feat: add image upload and multimodal chat support

.vscode/settings.json

@@ -19,4 +19,4 @@
     "titleBar.inactiveForeground": "#e7e7e799"
   },
   "peacock.color": "#38b"
-}
+}

vibes.diy/pkg/app/components/ChatInput.tsx

@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import type { ChatState } from "../types/chat.js";
 import ModelPicker, { type ModelOption } from "./ModelPicker.js";
+import ImagePreview from "./ImagePreview.js";
 import { preloadLlmsText } from "../prompts.js";
 
 interface ChatInputProps {
@@ -45,6 +46,8 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
 
     // State for responsive behavior
     const [isCompact, setIsCompact] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
 
     // Expose the click function to parent components
     useImperativeHandle(
@@ -102,9 +105,64 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       };
     }, []);
 
+    const handleFilesSelected = useCallback(
+      async (files: FileList | null) => {
+        if (!files || !chatState.attachImages) return;
+        await chatState.attachImages(files);
+      },
+      [chatState.attachImages],
+    );
+
+    const onDropFiles = useCallback(
+      async (e: React.DragEvent<HTMLElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        const files = e.dataTransfer?.files;
+        if (files && chatState.attachImages) {
+          await chatState.attachImages(files);
+        }
+      },
+      [chatState.attachImages],
+    );
+
     return (
-      <div ref={containerRef} className="px-4 py-2">
-        <div className="space-y-1">
+      <div
+        ref={containerRef}
+        className="px-4 py-2"
+        onDragEnter={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragOver={(e) => {
+          // Prevent default to avoid the browser opening the file
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          setIsDragging(false);
+        }}
+        onDrop={(e) => {
+          // Prevent navigation and route valid file drops to the shared handler
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(false);
+          if (e.dataTransfer?.files?.length) {
+            void onDropFiles(e);
+          }
+        }}
+      >
+        <div className="space-y-2">
+          {/* Attached images preview */}
+          {Array.isArray(chatState.attachedImages) &&
+            chatState.attachedImages.length > 0 && (
+              <ImagePreview
+                images={chatState.attachedImages}
+                onRemove={(id) => chatState.removeAttachedImage?.(id)}
+              />
+            )}
+
           <textarea
             ref={chatState.inputRef}
             value={chatState.input}
@@ -113,6 +171,19 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 chatState.setInput(e.target.value);
               }
             }}
+            onDragEnter={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={onDropFiles}
             onFocus={() => {
               // Fire and forget: warm the LLMs text cache using raw imports
               void preloadLlmsText();
@@ -123,7 +194,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 handleSendMessage();
               }
             }}
-            className="border-light-decorative-00 dark:border-dark-decorative-00 text-light-primary dark:text-dark-primary bg-light-background-01 dark:bg-dark-background-01 focus:ring-accent-01-light dark:focus:ring-accent-01-dark max-h-[200px] min-h-[90px] w-full resize-y rounded-lg border p-2.5 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
+            className={`border-light-decorative-00 dark:border-dark-decorative-00 text-light-primary dark:text-dark-primary bg-light-background-01 dark:bg-dark-background-01 focus:ring-accent-01-light dark:focus:ring-accent-01-dark max-h-[200px] min-h-[90px] w-full resize-y rounded-lg border p-2.5 text-sm focus:border-transparent focus:ring-2 focus:outline-none ${isDragging ? "ring-2 ring-blue-500" : ""}`}
             placeholder={
               chatState.docs.length || chatState.isStreaming
                 ? "Continue coding..."
@@ -144,18 +215,44 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 compact={isCompact}
               />
             ) : (
-              <span aria-hidden="true" />
+              <span className="flex items-center gap-2" aria-hidden="true" />
             )}
-            <button
-              ref={submitButtonRef}
-              type="button"
-              onClick={handleSendMessage}
-              disabled={chatState.isStreaming}
-              className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
-              aria-label={chatState.isStreaming ? "Generating" : "Send message"}
-            >
-              {chatState.isStreaming ? "•••" : "Code"}
-            </button>
+            <div className="flex items-center gap-2">
+              {/* Hidden file input */}
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                multiple
+                className="hidden"
+                onChange={(e) => {
+                  void handleFilesSelected(e.target.files);
+                  // Allow selecting the same file(s) consecutively
+                  e.currentTarget.value = "";
+                }}
+              />
+              <button
+                type="button"
+                aria-label="Attach images"
+                className="border-light-decorative-00 text-light-primary hover:bg-light-decorative-00/40 dark:border-dark-decorative-00 dark:text-dark-primary dark:hover:bg-dark-decorative-00/40 rounded-md border px-2 py-1 text-sm transition-colors"
+                onClick={() => fileInputRef.current?.click()}
+                disabled={chatState.isStreaming}
+              >
+                +
+              </button>
+              <button
+                ref={submitButtonRef}
+                type="button"
+                onClick={handleSendMessage}
+                disabled={chatState.isStreaming}
+                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+                aria-label={
+                  chatState.isStreaming ? "Generating" : "Send message"
+                }
+              >
+                {chatState.isStreaming ? "•••" : "Code"}
+              </button>
+            </div>
           </div>
         </div>
       </div>

vibes.diy/pkg/app/components/ImagePreview.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+interface ImagePreviewItem {
+  id: string;
+  previewUrl: string;
+  mimeType: string;
+}
+
+export function ImagePreview({
+  images,
+  onRemove,
+}: {
+  images: ImagePreviewItem[];
+  onRemove: (id: string) => void | Promise<void>;
+}) {
+  if (!images || images.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {images.map((img) => (
+        <div
+          key={img.id}
+          className="border-light-decorative-00 dark:border-dark-decorative-00 relative h-16 w-16 overflow-hidden rounded border"
+        >
+          <img
+            src={img.previewUrl}
+            alt="attachment"
+            className="h-full w-full object-cover"
+            draggable={false}
+          />
+          <button
+            type="button"
+            onClick={() => onRemove(img.id)}
+            aria-label="Remove image"
+            className="absolute top-0 right-0 m-0.5 rounded bg-black/60 px-1 text-[10px] leading-4 font-semibold text-white hover:bg-black/80"
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default ImagePreview;

vibes.diy/pkg/app/components/Message.tsx

@@ -1,13 +1,17 @@
-import React, { memo } from "react";
+import React, { memo, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import StructuredMessage from "./StructuredMessage.js";
 import type {
   ChatMessageDocument,
   AiChatMessageDocument,
   SystemChatMessageDocument,
+  UserChatMessageDocument,
   ViewType,
 } from "../types/chat.js";
 import { parseContent } from "../utils/segmentParser.js";
+import { useFireproof, type DocFileMeta } from "use-fireproof";
+import { getSessionDatabaseName } from "../utils/databaseManager.js";
+import { ImgFile } from "./SessionSidebar/ImgFile.js";
 
 interface MessageProps {
   message: ChatMessageDocument;
@@ -106,10 +110,90 @@
   },
 );
 
+const UserImages = ({
+  sessionId,
+  imageIds,
+}: {
+  sessionId: string;
+  imageIds: string[];
+}) => {
+  const dbName = getSessionDatabaseName(sessionId);
+  const { database } = useFireproof(dbName);
+  const [files, setFiles] = useState<DocFileMeta[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      const result: DocFileMeta[] = [];
+      for (const id of imageIds) {
+        try {
+          const doc = await database.get(id);
+          const fpFiles = doc?._files || {};
+          const key = "image" in fpFiles ? "image" : Object.keys(fpFiles)[0];
+          const ref = key ? fpFiles[key] : undefined;
+          if (ref) {
+            const anyRef: any = ref as any;
+            if (typeof anyRef.file === "function") {
+              // Fireproof DocFileMeta
+              result.push(anyRef as DocFileMeta);
+            } else if (ref instanceof File) {
+              // Raw File stored in _files (dev/testing scenarios)
+              const wrapped: DocFileMeta = {
+                file: async () => ref,
+                type: ref.type || "application/octet-stream",
+                size: ref.size,
+                cid: undefined as any,
+              };
+              result.push(wrapped);
+            }
+          }
+        } catch (err) {
+          console.warn(`Failed to load image ${id}:`, err);
+        }
+      }
+      if (!cancelled) {
+        setFiles(result);
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [database, imageIds]);
+
+  if (files.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2 mb-2">
+      {files.map((file, index) => (
+        <div
+          key={`${sessionId}-${imageIds[index]}`}
+          className="border-light-decorative-00 dark:border-dark-decorative-00 overflow-hidden rounded border"
+        >
+          <ImgFile
+            file={file}
+            alt="User attachment"
+            className="max-w-xs"
+            maxHeight="12rem"
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
 const UserMessage = memo(({ message }: { message: ChatMessageDocument }) => {
+  const userMessage = message as UserChatMessageDocument;
+  const hasImages = userMessage.images && userMessage.images.length > 0;
   return (
     <div className="mb-4 flex flex-row justify-end px-4">
       <div className="bg-light-background-02 dark:bg-dark-decorative-00 text-light-primary dark:text-dark-primary max-w-[85%] rounded-xl px-5 py-3 shadow-md">
+        {hasImages && (
+          <UserImages
+            sessionId={userMessage.session_id}
+            imageIds={userMessage.images!}
+          />
+        )}
         <div className="prose prose-sm dark:prose-invert prose-ul:pl-5 prose-ul:list-disc prose-ol:pl-5 prose-ol:list-decimal prose-li:my-0 max-w-none">
           <ReactMarkdown>{message.text}</ReactMarkdown>
         </div>