feat(chat): add image upload functionality to chat component

PROJECT_PLAN.md

@@ -0,0 +1,211 @@
+# Project Plan: Bolt.new Any LLM
+
+## Project Overview
+A web-based development environment that integrates LLM capabilities with code editing, chat interface, and terminal functionality. The application provides a seamless experience for developers to interact with AI while working on their code.
+
+## Architecture
+
+### Frontend Stack
+- React + TypeScript
+- Remix for routing and server-side rendering
+- SCSS for styling
+- CodeMirror for code editing
+- Web Container API for terminal emulation
+
+### Core Components
+
+1. Chat System (`app/components/chat/`)
+   - Base chat interface
+   - Message handling (user/assistant)
+   - Code block rendering
+   - Markdown support
+   - Image upload capabilities
+   - Artifact handling
+
+2. Code Editor (`app/components/editor/`)
+   - CodeMirror integration
+   - Syntax highlighting
+   - Multiple language support
+   - Binary content handling
+
+3. Workbench (`app/components/workbench/`)
+   - File tree navigation
+   - Editor panel
+   - Preview functionality
+   - Terminal integration
+   - Port management
+
+4. Terminal (`app/components/workbench/terminal/`)
+   - Command execution
+   - Custom theming
+   - Shell integration
+
+### State Management
+- Store-based architecture (`app/lib/stores/`)
+  - Chat state
+  - Editor state
+  - File system state
+  - Preview management
+  - Settings
+  - Terminal state
+  - Theme management
+  - Workbench state
+
+### Data Persistence
+- Local storage based persistence
+- Chat history management
+- File system state preservation
+- User preferences storage
+
+### Runtime Features
+- Message parsing system
+- Action running capabilities
+- Prompt enhancement
+- Web container integration
+
+## Key Features
+
+1. AI Integration
+   - Real-time chat interface
+   - Code-aware responses
+   - Context-aware suggestions
+   - File system integration
+
+2. Development Environment
+   - Multi-file editing
+   - Live preview
+   - Terminal access
+   - File system operations
+
+3. User Experience
+   - Theme switching
+   - Responsive design
+   - Keyboard shortcuts
+   - Drag-and-drop support
+
+4. File Management
+   - File tree navigation
+   - File creation/editing
+   - Binary file handling
+   - Breadcrumb navigation
+
+## Implementation Priorities
+
+1. Core Infrastructure
+   - Basic application setup
+   - Routing system
+   - State management
+   - Theme support
+
+2. Editor Integration
+   - CodeMirror setup
+   - Language support
+   - File handling
+
+3. Chat System
+   - Message handling
+   - AI integration
+   - Code block support
+   - Markdown rendering
+
+4. Terminal & Preview
+   - Terminal emulation
+   - Preview functionality
+   - Port management
+
+5. User Experience
+   - Responsive design
+   - Keyboard shortcuts
+   - Performance optimization
+
+## Technical Considerations
+
+### Performance
+- Efficient state management
+- Lazy loading of components
+- Optimized file handling
+- Memory management for terminal sessions
+
+### Security
+- Secure file system operations
+- Safe terminal command execution
+- Input sanitization
+- Secure AI interactions
+
+### Accessibility
+- Keyboard navigation
+- Screen reader support
+- ARIA attributes
+- Color contrast compliance
+
+### Browser Compatibility
+- Modern browser support
+- Progressive enhancement
+- Fallback behaviors
+- Mobile device support
+
+## Development Workflow
+
+1. Version Control
+   - Git-based workflow
+   - Feature branching
+   - Pull request reviews
+   - Semantic versioning
+
+2. Code Quality
+   - TypeScript for type safety
+   - ESLint for code linting
+   - Prettier for code formatting
+   - Unit testing with Jest
+
+3. Documentation
+   - Code documentation
+   - API documentation
+   - User guides
+   - Contributing guidelines
+
+## Future Enhancements
+
+1. Collaboration Features
+   - Real-time collaboration
+   - Shared terminals
+   - Chat history sharing
+   - Project sharing
+
+2. Advanced AI Features
+   - Multiple model support
+   - Custom model integration
+   - Enhanced context awareness
+   - Code generation improvements
+
+3. Development Tools
+   - Debugging capabilities
+   - Performance profiling
+   - Error tracking
+   - Analytics integration
+
+4. Extensibility
+   - Plugin system
+   - Custom themes
+   - API integrations
+   - Custom commands
+
+## Maintenance & Support
+
+1. Monitoring
+   - Error tracking
+   - Performance monitoring
+   - Usage analytics
+   - User feedback collection
+
+2. Updates
+   - Regular dependency updates
+   - Security patches
+   - Feature enhancements
+   - Bug fixes
+
+3. Support
+   - Documentation maintenance
+   - Issue tracking
+   - Community engagement
+   - User support channels

app/components/chat/BaseChat.tsx

@@ -10,7 +10,9 @@ import { classNames } from '~/utils/classNames';
 import { MODEL_LIST, DEFAULT_PROVIDER } from '~/utils/constants';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
+import { LastSavedIndicator } from './LastSavedIndicator.client';
 import { useState } from 'react';
+import { ImageUpload } from './ImageUpload';
 
 import styles from './BaseChat.module.scss';
 
@@ -83,6 +85,9 @@ interface BaseChatProps {
   sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   enhancePrompt?: () => void;
+  imageFile?: File | null;
+  onImageUpload?: (file: File) => void;
+  isProcessingImage?: boolean;
 }
 
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
@@ -104,6 +109,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       handleInputChange,
       enhancePrompt,
       handleStop,
+      imageFile,
+      onImageUpload,
+      isProcessingImage = false,
     },
     ref,
   ) => {
@@ -229,6 +237,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                           </>
                         )}
                       </IconButton>
+                      <ImageUpload onImageUpload={onImageUpload} isProcessing={isProcessingImage} />
+                      <ClientOnly>
+                        {() => <LastSavedIndicator />}
+                      </ClientOnly>
                     </div>
                     {input.length > 3 ? (
                       <div className="text-xs text-bolt-elements-textTertiary">
@@ -237,6 +249,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     ) : null}
                   </div>
                 </div>
+                {imageFile && (
+                  <div className="px-4 pb-2 text-sm text-bolt-elements-textSecondary">
+                    Image attached: {imageFile.name} {isProcessingImage && "(Processing...)"}
+                  </div>
+                )}
                 <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
               </div>
             </div>