Merge pull request #116 from AutoMaker-Org/feat/enchance-pasting-images

feat: add image paste functionality to DescriptionImageDropZone compo…

apps/app/src/components/ui/description-image-dropzone.tsx

@@ -268,6 +268,52 @@ export function DescriptionImageDropZone({
     [images, onImagesChange]
   );
 
+  // Handle paste events to detect and process images from clipboard
+  // Works across all OS (Windows, Linux, macOS)
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      if (disabled || isProcessing) return;
+
+      const clipboardItems = e.clipboardData?.items;
+      if (!clipboardItems) return;
+
+      const imageFiles: File[] = [];
+
+      // Iterate through clipboard items to find images
+      for (let i = 0; i < clipboardItems.length; i++) {
+        const item = clipboardItems[i];
+
+        // Check if the item is an image
+        if (item.type.startsWith("image/")) {
+          const file = item.getAsFile();
+          if (file) {
+            // Generate a filename for pasted images since they don't have one
+            const extension = item.type.split("/")[1] || "png";
+            const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+            const renamedFile = new File(
+              [file],
+              `pasted-image-${timestamp}.${extension}`,
+              { type: file.type }
+            );
+            imageFiles.push(renamedFile);
+          }
+        }
+      }
+
+      // If we found images, process them and prevent default paste behavior
+      if (imageFiles.length > 0) {
+        e.preventDefault();
+
+        // Create a FileList-like object from the array
+        const dataTransfer = new DataTransfer();
+        imageFiles.forEach((file) => dataTransfer.items.add(file));
+        processFiles(dataTransfer.files);
+      }
+      // If no images found, let the default paste behavior happen (paste text)
+    },
+    [disabled, isProcessing, processFiles]
+  );
+
   return (
     <div className={cn("relative", className)}>
       {/* Hidden file input */}
@@ -313,6 +359,7 @@ export function DescriptionImageDropZone({
           placeholder={placeholder}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          onPaste={handlePaste}
           disabled={disabled}
           autoFocus={autoFocus}
           aria-invalid={error}
@@ -326,7 +373,7 @@ export function DescriptionImageDropZone({
 
       {/* Hint text */}
       <p className="text-xs text-muted-foreground mt-1">
-        Drag and drop images here or{" "}
+        Paste, drag and drop images, or{" "}
         <button
           type="button"
           onClick={handleBrowseClick}

apps/app/src/components/ui/image-drop-zone.tsx

@@ -244,14 +244,16 @@ export function ImageDropZone({
                   <p className="text-xs font-medium text-foreground truncate">
                     {image.filename}
                   </p>
-                  <p className="text-xs text-muted-foreground">
-                    {formatFileSize(image.size)}
-                  </p>
+                  {image.size !== undefined && (
+                    <p className="text-xs text-muted-foreground">
+                      {formatFileSize(image.size)}
+                    </p>
+                  )}
                 </div>
                 {/* Remove button */}
-                {!disabled && (
+                {!disabled && image.id && (
                   <button
-                    onClick={() => removeImage(image.id)}
+                    onClick={() => removeImage(image.id!)}
                     className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive hover:text-destructive-foreground text-muted-foreground"
                   >
                     <X className="h-3 w-3" />

apps/app/src/components/views/agent-view.tsx

@@ -17,6 +17,7 @@ import {
   PanelLeft,
   Paperclip,
   X,
+  ImageIcon,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useElectronAgent } from "@/hooks/use-electron-agent";
@@ -30,7 +31,8 @@ import {
 } from "@/hooks/use-keyboard-shortcuts";
 
 export function AgentView() {
-  const { currentProject, setLastSelectedSession, getLastSelectedSession } = useAppStore();
+  const { currentProject, setLastSelectedSession, getLastSelectedSession } =
+    useAppStore();
   const shortcuts = useKeyboardShortcutsConfig();
   const [input, setInput] = useState("");
   const [selectedImages, setSelectedImages] = useState<ImageAttachment[]>([]);
@@ -71,13 +73,16 @@ export function AgentView() {
   });
 
   // Handle session selection with persistence
-  const handleSelectSession = useCallback((sessionId: string | null) => {
-    setCurrentSessionId(sessionId);
-    // Persist the selection for this project
-    if (currentProject?.path) {
-      setLastSelectedSession(currentProject.path, sessionId);
-    }
-  }, [currentProject?.path, setLastSelectedSession]);
+  const handleSelectSession = useCallback(
+    (sessionId: string | null) => {
+      setCurrentSessionId(sessionId);
+      // Persist the selection for this project
+      if (currentProject?.path) {
+        setLastSelectedSession(currentProject.path, sessionId);
+      }
+    },
+    [currentProject?.path, setLastSelectedSession]
+  );
 
   // Restore last selected session when switching to Agent view or when project changes
   useEffect(() => {
@@ -94,7 +99,10 @@ export function AgentView() {
 
     const lastSessionId = getLastSelectedSession(currentProject.path);
     if (lastSessionId) {
-      console.log("[AgentView] Restoring last selected session:", lastSessionId);
+      console.log(
+        "[AgentView] Restoring last selected session:",
+        lastSessionId
+      );
       setCurrentSessionId(lastSessionId);
     }
   }, [currentProject?.path, getLastSelectedSession]);
@@ -417,7 +425,9 @@ export function AgentView() {
           <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
             <Sparkles className="w-8 h-8 text-primary" />
           </div>
-          <h2 className="text-xl font-semibold mb-3 text-foreground">No Project Selected</h2>
+          <h2 className="text-xl font-semibold mb-3 text-foreground">
+            No Project Selected
+          </h2>
           <p className="text-muted-foreground leading-relaxed">
             Open or create a project to start working with the AI agent.
           </p>
@@ -479,7 +489,9 @@ export function AgentView() {
               <Bot className="w-5 h-5 text-primary" />
             </div>
             <div>
-              <h1 className="text-lg font-semibold text-foreground">AI Agent</h1>
+              <h1 className="text-lg font-semibold text-foreground">
+                AI Agent
+              </h1>
               <p className="text-sm text-muted-foreground">
                 {currentProject.name}
                 {currentSessionId && !isConnected && " - Connecting..."}
@@ -496,7 +508,9 @@ export function AgentView() {
               </div>
             )}
             {agentError && (
-              <span className="text-xs text-destructive font-medium">{agentError}</span>
+              <span className="text-xs text-destructive font-medium">
+                {agentError}
+              </span>
             )}
             {currentSessionId && messages.length > 0 && (
               <Button
@@ -588,6 +602,50 @@ export function AgentView() {
                       {message.content}
                     </p>
                   )}
+
+                  {/* Display attached images for user messages */}
+                  {message.role === "user" &&
+                    message.images &&
+                    message.images.length > 0 && (
+                      <div className="mt-3 space-y-2">
+                        <div className="flex items-center gap-1.5 text-xs text-primary-foreground/80">
+                          <ImageIcon className="w-3 h-3" />
+                          <span>
+                            {message.images.length} image
+                            {message.images.length > 1 ? "s" : ""} attached
+                          </span>
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {message.images.map((image, index) => {
+                            // Construct proper data URL from base64 data and mime type
+                            const dataUrl = image.data.startsWith("data:")
+                              ? image.data
+                              : `data:${image.mimeType || "image/png"};base64,${
+                                  image.data
+                                }`;
+                            return (
+                              <div
+                                key={image.id || `img-${index}`}
+                                className="relative group rounded-lg overflow-hidden border border-primary-foreground/20 bg-primary-foreground/10"
+                              >
+                                <img
+                                  src={dataUrl}
+                                  alt={
+                                    image.filename ||
+                                    `Attached image ${index + 1}`
+                                  }
+                                  className="w-20 h-20 object-cover hover:opacity-90 transition-opacity"
+                                />
+                                <div className="absolute bottom-0 left-0 right-0 bg-black/50 px-1.5 py-0.5 text-[9px] text-white truncate">
+                                  {image.filename || `Image ${index + 1}`}
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+
                   <p
                     className={cn(
                       "text-[11px] mt-2 font-medium",
@@ -614,9 +672,18 @@ export function AgentView() {
                 <div className="bg-card border border-border rounded-2xl px-4 py-3 shadow-sm">
                   <div className="flex items-center gap-3">
                     <div className="flex items-center gap-1">
-                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "0ms" }} />
-                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "150ms" }} />
-                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "300ms" }} />
+                      <span
+                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
+                        style={{ animationDelay: "0ms" }}
+                      />
+                      <span
+                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
+                        style={{ animationDelay: "150ms" }}
+                      />
+                      <span
+                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
+                        style={{ animationDelay: "300ms" }}
+                      />
                     </div>
                     <span className="text-sm text-muted-foreground">
                       Thinking...
@@ -677,18 +744,22 @@ export function AgentView() {
                         <p className="text-xs font-medium text-foreground truncate max-w-24">
                           {image.filename}
                         </p>
-                        <p className="text-[10px] text-muted-foreground">
-                          {formatFileSize(image.size)}
-                        </p>
+                        {image.size !== undefined && (
+                          <p className="text-[10px] text-muted-foreground">
+                            {formatFileSize(image.size)}
+                          </p>
+                        )}
                       </div>
                       {/* Remove button */}
-                      <button
-                        onClick={() => removeImage(image.id)}
-                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
-                        disabled={isProcessing}
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
+                      {image.id && (
+                        <button
+                          onClick={() => removeImage(image.id!)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+                          disabled={isProcessing}
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      )}
                     </div>
                   ))}
                 </div>
@@ -729,7 +800,8 @@ export function AgentView() {
                 />
                 {selectedImages.length > 0 && !isDragOver && (
                   <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full font-medium">
-                    {selectedImages.length} image{selectedImages.length > 1 ? "s" : ""}
+                    {selectedImages.length} image
+                    {selectedImages.length > 1 ? "s" : ""}
                   </div>
                 )}
                 {isDragOver && (
@@ -748,7 +820,8 @@ export function AgentView() {
                 disabled={isProcessing || !isConnected}
                 className={cn(
                   "h-11 w-11 rounded-xl border-border",
-                  showImageDropZone && "bg-primary/10 text-primary border-primary/30",
+                  showImageDropZone &&
+                    "bg-primary/10 text-primary border-primary/30",
                   selectedImages.length > 0 && "border-primary/30 text-primary"
                 )}
                 title="Attach images"
@@ -773,7 +846,11 @@ export function AgentView() {
 
             {/* Keyboard hint */}
             <p className="text-[11px] text-muted-foreground mt-2 text-center">
-              Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">Enter</kbd> to send
+              Press{" "}
+              <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">
+                Enter
+              </kbd>{" "}
+              to send
             </p>
           </div>
         )}

apps/app/src/store/app-store.ts

@@ -210,11 +210,11 @@ export const DEFAULT_KEYBOARD_SHORTCUTS: KeyboardShortcuts = {
 };
 
 export interface ImageAttachment {
-  id: string;
+  id?: string; // Optional - may not be present in messages loaded from server
   data: string; // base64 encoded image data
   mimeType: string; // e.g., "image/png", "image/jpeg"
   filename: string;
-  size: number; // file size in bytes
+  size?: number; // file size in bytes - optional for messages from server
 }
 
 export interface ChatMessage {

apps/app/src/types/electron.d.ts

@@ -3,11 +3,11 @@
  */
 
 export interface ImageAttachment {
-  id: string;
+  id?: string; // Optional - may not be present in messages loaded from server
   data: string; // base64 encoded image data
   mimeType: string; // e.g., "image/png", "image/jpeg"
   filename: string;
-  size: number; // file size in bytes
+  size?: number; // file size in bytes - optional for messages from server
 }
 
 export interface Message {

apps/app/tests/utils/files/drag-drop.ts

@@ -36,3 +36,47 @@ export async function simulateFileDrop(
     { selector: targetSelector, content: fileContent, name: fileName, mime: mimeType }
   );
 }
+
+/**
+ * Simulate pasting an image from clipboard onto an element
+ * Works across all OS (Windows, Linux, macOS)
+ */
+export async function simulateImagePaste(
+  page: Page,
+  targetSelector: string,
+  imageBase64: string,
+  mimeType: string = "image/png"
+): Promise<void> {
+  await page.evaluate(
+    ({ selector, base64, mime }) => {
+      const target = document.querySelector(selector);
+      if (!target) throw new Error(`Element not found: ${selector}`);
+
+      // Convert base64 to Blob
+      const byteCharacters = atob(base64);
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const blob = new Blob([byteArray], { type: mime });
+
+      // Create a File from Blob
+      const file = new File([blob], "pasted-image.png", { type: mime });
+
+      // Create a DataTransfer with clipboard items
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+
+      // Create ClipboardEvent with the image data
+      const clipboardEvent = new ClipboardEvent("paste", {
+        bubbles: true,
+        cancelable: true,
+        clipboardData: dataTransfer,
+      });
+
+      target.dispatchEvent(clipboardEvent);
+    },
+    { selector: targetSelector, base64: imageBase64, mime: mimeType }
+  );
+}