Editing UI

public/js/chat.js

@@ -307,6 +307,38 @@ function sendSvg() {
 
 // ── Inline editing ────────────────────────────────────────────────────────
 
+/**
+ * Extract image attachments from message content.
+ * Message content can be a string or array with image_url objects.
+ */
+function extractAttachmentsFromContent(content) {
+  if (!content || typeof content === 'string') return [];
+  if (!Array.isArray(content)) return [];
+  
+  const attachments = [];
+  content.forEach(item => {
+    if (item.type === 'image_url' && item.image_url?.url) {
+      const dataUrl = item.image_url.url;
+      // Parse data URL to get mimeType and base64
+      if (dataUrl.startsWith('data:')) {
+        const comma = dataUrl.indexOf(',');
+        if (comma > 0) {
+          const mimeType = dataUrl.slice(5, dataUrl.indexOf(';'));
+          const base64 = dataUrl.slice(comma + 1);
+          const ext = mimeType.split('/')[1] || 'png';
+          attachments.push({
+            type: 'image',
+            name: `image.${ext}`,
+            base64,
+            mimeType,
+          });
+        }
+      }
+    }
+  });
+  return attachments;
+}
+
 /**
  * User message edit: replaces bubble content with a textarea + toolbar
  * (tool toggles + attach) + Cancel/Send buttons.
@@ -325,9 +357,18 @@ function startUserEdit(wrap, index, msg, originalText) {
 
   // File preview row (for newly attached files during edit)
   const editAttachments = [];
+  // Populate with existing attachments from the message
+  const existingAttachments = extractAttachmentsFromContent(msg.content);
+  editAttachments.push(...existingAttachments);
+
   const filePreviewRow = document.createElement('div');
   filePreviewRow.className = 'edit-file-preview-row';
   bubble.appendChild(filePreviewRow);
+  
+  // Render existing attachments initially
+  if (editAttachments.length > 0) {
+    renderEditFilePreview(editAttachments, filePreviewRow);
+  }
 
   // Bottom toolbar: tools + attach on left, cancel+send on right
   const toolbar = document.createElement('div');
@@ -357,6 +398,35 @@ function startUserEdit(wrap, index, msg, originalText) {
     toolRow.appendChild(btn);
   });
 
+  // Add paste event listener to textarea for images
+  ta.addEventListener('paste', async (e) => {
+    const items = e.clipboardData?.items || [];
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) {
+          const dataUrl = await new Promise((res, rej) => {
+            const reader = new FileReader();
+            reader.onload = () => res(reader.result);
+            reader.onerror = rej;
+            reader.readAsDataURL(file);
+          });
+          const comma = dataUrl.indexOf(',');
+          const mimeType = dataUrl.slice(5, dataUrl.indexOf(';'));
+          const base64 = dataUrl.slice(comma + 1);
+          editAttachments.push({
+            type: 'image',
+            name: file.name || `image.${mimeType.split('/')[1] || 'png'}`,
+            base64,
+            mimeType,
+          });
+          renderEditFilePreview(editAttachments, filePreviewRow);
+        }
+      }
+    }
+  });
+
   // Attach button
   const attachBtn = document.createElement('button');
   attachBtn.className = 'edit-attach-btn';