diff options
Diffstat (limited to '.rules/changelog/2026-03/29/02.md')
| -rw-r--r-- | .rules/changelog/2026-03/29/02.md | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/.rules/changelog/2026-03/29/02.md b/.rules/changelog/2026-03/29/02.md new file mode 100644 index 0000000..5dc23b5 --- /dev/null +++ b/.rules/changelog/2026-03/29/02.md @@ -0,0 +1,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) |