Merge pull request #80 from faetalize/dev

1.1.0

Author: faetalize

package-lock.json

@@ -5,12 +5,14 @@
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-basic-ssl": "^2.1.0",
     "supabase": "^2.39.2",
+    "tailwindcss": "^4.1.16",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
   },
   "dependencies": {
     "@google/genai": "^0.8.0",
     "@supabase/supabase-js": "^2.53.0",
+    "@tailwindcss/vite": "^4.1.16",
     "buffer": "^6.0.3",
     "dexie": "^4.0.10",
     "dompurify": "^3.2.3",

package.json

@@ -0,0 +1,58 @@
+import { EditableImage, scrollToMessage } from "../../utils/imageHistory";
+
+/**
+ * Creates a history image preview element that shows an image from chat history
+ * that will be used for editing.
+ */
+export function historyImagePreviewElement(image: EditableImage): HTMLElement {
+    const container = document.createElement("div");
+    container.classList.add("history-image-preview", "attachment-container");
+    container.dataset.messageIndex = String(image.messageIndex);
+    container.dataset.source = image.source;
+
+    // Create image element
+    const img = document.createElement("img");
+    img.src = image.dataUri;
+    img.alt = "Image from chat history";
+    img.classList.add("history-image-thumbnail");
+    
+    // Create badge to indicate source
+    const badge = document.createElement("span");
+    badge.classList.add("history-image-badge");
+    badge.textContent = "Local";
+    
+    // Create remove button
+    const removeButton = document.createElement("button");
+    removeButton.classList.add("btn-textual", "material-symbols-outlined", "btn-remove-attachment");
+    removeButton.textContent = "close";
+    removeButton.title = "Clear preview";
+    removeButton.addEventListener("click", (e) => {
+        e.stopPropagation();
+        container.remove();
+        dispatchHistoryImageRemoved();
+    });
+
+    // Make the container clickable to scroll to source message
+    container.style.cursor = "pointer";
+    container.title = "Click to view original message";
+    container.addEventListener("click", (e) => {
+        // Don't scroll if clicking the remove button
+        if (e.target === removeButton) {
+            return;
+        }
+        scrollToMessage(image.messageIndex);
+    });
+
+    container.appendChild(img);
+    container.appendChild(badge);
+    container.appendChild(removeButton);
+
+    return container;
+}
+
+/**
+ * Dispatches a custom event when history image preview is removed
+ */
+function dispatchHistoryImageRemoved(): void {
+    window.dispatchEvent(new CustomEvent("history-image-removed"));
+}

src/components/dynamic/HistoryImagePreview.ts

@@ -91,6 +91,8 @@ export const messageElement = async (
                 <div class="generated-image-wrapper" data-index="${idx}">
                     <img class="generated-image" src="data:${img.mimeType};base64,${img.base64}" loading="lazy" />
                     <div class="generated-image-overlay">
+                        <button class="btn-textual btn-image-action btn-edit material-symbols-outlined" title="Edit this image">edit</button>
+                        <button class="btn-textual btn-image-action btn-attach material-symbols-outlined" title="Attach this image">attachment</button>
                         <button class="btn-textual btn-image-action btn-download material-symbols-outlined" title="Download">download</button>
                         <button class="btn-textual btn-image-action btn-expand material-symbols-outlined" title="Expand">open_in_full</button>
                     </div>
@@ -447,17 +449,64 @@ async function updateMessageInDatabase(markdownContent: string, messageIndex: nu
     }
 }
 
-// Adds overlay button interactions (download + expand) & a lightweight lightbox
+// Adds overlay button interactions (download + expand + edit + attach) & a lightweight lightbox
 function setupGeneratedImageInteractions(root: HTMLElement) {
     const wrappers = root.querySelectorAll<HTMLElement>(".generated-image-wrapper");
     if (!wrappers.length) return;
 
     wrappers.forEach(wrap => {
         const img = wrap.querySelector<HTMLImageElement>(".generated-image");
+        const editBtn = wrap.querySelector<HTMLButtonElement>(".btn-edit");
+        const attachBtn = wrap.querySelector<HTMLButtonElement>(".btn-attach");
         const downloadBtn = wrap.querySelector<HTMLButtonElement>(".btn-download");
         const expandBtn = wrap.querySelector<HTMLButtonElement>(".btn-expand");
         if (!img) return;
 
+        // Helper to convert base64 image to File
+        const imageToFile = async (): Promise<File> => {
+            const base64Data = img.src.split(',')[1];
+            const mimeType = img.src.match(/data:(.*?);/)?.[1] || 'image/png';
+            const byteString = atob(base64Data);
+            const arrayBuffer = new ArrayBuffer(byteString.length);
+            const uint8Array = new Uint8Array(arrayBuffer);
+            for (let i = 0; i < byteString.length; i++) {
+                uint8Array[i] = byteString.charCodeAt(i);
+            }
+            const blob = new Blob([uint8Array], { type: mimeType });
+            const ext = mimeType.split('/')[1];
+            return new File([blob], `image-${Date.now()}.${ext}`, { type: mimeType });
+        };
+
+        // Edit button: attach image + toggle editing mode
+        editBtn?.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            try {
+                const file = await imageToFile();
+                
+                // Dispatch custom event instead of manually modifying input
+                window.dispatchEvent(new CustomEvent('attach-image-from-chat', {
+                    detail: { file, toggleEditing: true }
+                }));
+            } catch (err) {
+                console.error('Failed to attach image for editing', err);
+            }
+        });
+
+        // Attach button: just attach image without toggling editing
+        attachBtn?.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            try {
+                const file = await imageToFile();
+                
+                // Dispatch custom event instead of manually modifying input
+                window.dispatchEvent(new CustomEvent('attach-image-from-chat', {
+                    detail: { file, toggleEditing: false }
+                }));
+            } catch (err) {
+                console.error('Failed to attach image', err);
+            }
+        });
+
         downloadBtn?.addEventListener('click', (e) => {
             e.stopPropagation();
             try {
@@ -494,23 +543,6 @@ function setupGeneratedImageInteractions(root: HTMLElement) {
 
             // Dynamically adjust sizing to ensure containment within viewport preserving aspect
             const lightboxImg = overlay.querySelector<HTMLImageElement>('.lightbox-image');
-            function fit() {
-                if (!lightboxImg || !lightboxImg.naturalWidth) return;
-                const vw = window.innerWidth * 0.95;
-                const vh = window.innerHeight * 0.95;
-                const { naturalWidth: iw, naturalHeight: ih } = lightboxImg;
-                const ratio = Math.min(vw / iw, vh / ih, 1);
-                lightboxImg.style.width = Math.round(iw * ratio) + 'px';
-                lightboxImg.style.height = Math.round(ih * ratio) + 'px';
-            }
-            if (lightboxImg?.complete) {
-                fit();
-            } else {
-                lightboxImg?.addEventListener('load', fit, { once: true });
-            }
-            window.addEventListener('resize', fit, { passive: true });
-            // Cleanup resize listener when closed
-            overlay.addEventListener('remove', () => window.removeEventListener('resize', fit));
         }
 
         expandBtn?.addEventListener('click', (e) => { e.stopPropagation(); openLightbox(); });

src/components/dynamic/message.ts

@@ -11,7 +11,7 @@ attachButton.addEventListener("click", () => {
         return
     }
     input.value = ""; // Clear the input value to allow re-selection of the same file
-    input.accept = "image/*,video/*,audio/*,application/pdf,text/plain"; // Accept images, videos, audio files, and PDFs, and text files
+    input.accept = "image/*,application/pdf,text/plain"; // Accept images, PDFs, and text files
     input.multiple = true; // Allow multiple files to be selected
     input.click();
 });

src/components/static/AttachButton.component.ts

@@ -13,6 +13,10 @@ export const attachmentPreviewElement = (file: File) => {
     const container = document.createElement("div");
     container.classList.add("attachment-container");
     container.dataset.attachmentSignature = getFileSignature(file);
+    
+    // Check if this file is from chat history
+    const isFromChatHistory = (file as any)._fromChatHistory === true;
+    
     if (file.type.startsWith("image/")) {
         const reader = new FileReader();
         reader.onload = (e) => {
@@ -28,8 +32,20 @@ export const attachmentPreviewElement = (file: File) => {
             img.src = e.target!.result as string;
             img.alt = file.name;
             container.appendChild(img);
+            
+            // Add "Local" badge if from chat history
+            if (isFromChatHistory) {
+                const badge = document.createElement("span");
+                badge.classList.add("history-image-badge");
+                badge.textContent = "Local";
+                container.appendChild(badge);
+            }
+            
             container.appendChild(removeButton);
             attachmentPreview.appendChild(container);
+            
+            // Dispatch attachment added event
+            dispatchAttachmentAdded();
         };
         reader.readAsDataURL(file);
     }
@@ -60,6 +76,9 @@ export const attachmentPreviewElement = (file: File) => {
         container.appendChild(fileIcon);
         container.appendChild(fileDetailsDiv);
         container.appendChild(removeButton);
+        
+        // Dispatch attachment added event
+        dispatchAttachmentAdded();
     }
 
 
@@ -104,4 +123,22 @@ function dispatchAttachmentRemoved(file: File): void {
         detail,
         bubbles: true,
     }));
+}
+
+function dispatchAttachmentAdded(): void {
+    const count = getAttachmentCount();
+    window.dispatchEvent(new CustomEvent("attachment-added", {
+        detail: { count },
+        bubbles: true,
+    }));
+}
+
+/**
+ * Get the current number of image attachments
+ */
+export function getAttachmentCount(): number {
+    if (!input || !input.files) {
+        return 0;
+    }
+    return Array.from(input.files).filter(f => f.type.startsWith('image/')).length;
 }