mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 22:32:06 +00:00
feat: Add image upload support for Spec Creation chat
Add the ability to attach images (JPEG, PNG) in the Spec Creation chat interface for Claude to analyze during app specification creation. Frontend changes: - Add ImageAttachment interface to types.ts with id, filename, mimeType, base64Data, previewUrl, and size fields - Update ChatMessage interface with optional attachments field - Update useSpecChat hook to accept and send attachments via WebSocket - Add file input, drag-drop support, and preview thumbnails to SpecCreationChat component with validation (5 MB max, JPEG/PNG only) - Update ChatMessage component to render image attachments with click-to-enlarge functionality Backend changes: - Add ImageAttachment Pydantic schema with base64 validation - Update spec_creation.py WebSocket handler to parse and validate image attachments from client messages - Update spec_chat_session.py to format multimodal content blocks for Claude API using async generator pattern Features: - Drag-and-drop or click paperclip button to attach images - Preview thumbnails with remove button before sending - File type validation (image/jpeg, image/png) - File size validation (5 MB maximum) - Images display in chat history - Click images to view full size - Cross-platform compatible (Windows, macOS, Linux) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -209,11 +209,22 @@ export type SpecChatServerMessage =
|
||||
| SpecChatPongMessage
|
||||
| SpecChatResponseDoneMessage
|
||||
|
||||
// Image attachment for chat messages
|
||||
export interface ImageAttachment {
|
||||
id: string
|
||||
filename: string
|
||||
mimeType: 'image/jpeg' | 'image/png'
|
||||
base64Data: string // Raw base64 (without data: prefix)
|
||||
previewUrl: string // data: URL for display
|
||||
size: number // File size in bytes
|
||||
}
|
||||
|
||||
// UI chat message for display
|
||||
export interface ChatMessage {
|
||||
id: string
|
||||
role: 'user' | 'assistant' | 'system'
|
||||
content: string
|
||||
attachments?: ImageAttachment[]
|
||||
timestamp: Date
|
||||
questions?: SpecQuestion[]
|
||||
isStreaming?: boolean
|
||||
|
||||
Reference in New Issue
Block a user