1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
# Image Attachment Feature — Part 2: Frontend UI
## Files Modified
### `src/chat-view.ts`
- Added imports for `setCurrentAttachments`, `clearCurrentAttachments`, and `ImageAttachment` from `./image-attachments`
- Added `PendingAttachment` interface (holds `File`, data URL, MIME type)
- Added class fields: `pendingAttachments`, `attachmentStrip`, `attachButton`, `fileInput`
- **`onOpen()`**: Added attachment preview strip (full-width, hidden when empty), attach button with `image-plus` icon (hidden when `save_image` tool is disabled), hidden `<input type="file">` with image MIME filter and `multiple` support
- **`handleSend()`**: Converts pending attachments to `ImageAttachment[]`, sets module-level attachments, prepends LLM context note instructing the AI to use `save_image`, shows original text in UI while sending augmented content in message history. Allows sending with images and no text.
- **`onClose()`**: Clears pending attachments and module-level attachments, nulls new DOM refs
- **Clear Chat handler**: Also clears pending and module-level attachments
- **Catch block**: Calls `clearCurrentAttachments()` on error/abort to prevent stale attachment leak
- **`setStreamingState()`**: Disables attach button during streaming
- **`updateAttachButtonVisibility()`**: New method that hides/shows the attach button based on whether `save_image` tool is enabled; called on open and when tools modal closes
- Added `handleFileSelection()`, `readFileAsDataUrl()`, `renderAttachmentStrip()` methods for file picking and thumbnail strip UI with per-thumbnail remove buttons
### `styles.css`
- Updated `.ai-pulse-input-row` with `flex-wrap: wrap` and `align-items: flex-end` for strip-above-controls layout
- Added `.ai-pulse-attach-btn` (icon button with hover/disabled states)
- Added `.ai-pulse-attachment-strip` (horizontal scrollable thumbnail row, full width)
- Added `.ai-pulse-attachment-thumb` (48x48 thumbnail container with border)
- Added `.ai-pulse-attachment-thumb img` (cover-fit image)
- Added `.ai-pulse-attachment-remove` (circular × button, positioned top-right of thumb, red on hover)
|
