feat: add attachment preview UI component (#66)

- Create Attachment interface in messages.ts
- Create AttachmentPreview.svelte component with:
  - Image thumbnails for image attachments
  - File icons for documents
  - File size display
  - Remove button on hover
- Add attachments array to Conversation interface
- Add attachment management methods to conversation store:
  - addAttachment, removeAttachment, clearAttachments, getAttachments
- Integrate AttachmentPreview into InputBar
- Clear attachments on conversation reset
This commit is contained in:
2026-01-24 13:57:51 -08:00
committed by Naomi Carrigan
parent 2e5de9dc5e
commit d3bab9cbab
5 changed files with 292 additions and 0 deletions
+8
View File
@@ -25,6 +25,7 @@ export const claudeStore = {
isProcessing: conversationsStore.isProcessing,
grantedTools: conversationsStore.grantedTools,
pendingRetryMessage: conversationsStore.pendingRetryMessage,
attachments: conversationsStore.attachments,
// New conversation-aware subscriptions
conversations: conversationsStore.conversations,
@@ -67,6 +68,12 @@ export const claudeStore = {
saveScrollPosition: conversationsStore.saveScrollPosition,
getScrollPosition: conversationsStore.getScrollPosition,
// Attachment management
addAttachment: conversationsStore.addAttachment,
removeAttachment: conversationsStore.removeAttachment,
clearAttachments: conversationsStore.clearAttachments,
getAttachments: conversationsStore.getAttachments,
getGrantedTools: (): string[] => {
let tools: string[] = [];
conversationsStore.grantedTools.subscribe((t) => (tools = Array.from(t)))();
@@ -86,6 +93,7 @@ export const claudeStore = {
conversationsStore.setWorkingDirectory("");
conversationsStore.setProcessing(false);
conversationsStore.revokeAllTools();
conversationsStore.clearAttachments();
// Also clear history restoration
clearHistoryRestore();
},