file upload limits

sawka · sawka · commit 8650843e55fa · 2025-09-29T14:32:13.000-07:00
diff --git a/frontend/app/aipanel/ai-utils.ts b/frontend/app/aipanel/ai-utils.ts
@@ -135,4 +135,53 @@ export const createDataUrl = (file: File): Promise<string> => {
         reader.onerror = reject;
         reader.readAsDataURL(file);
     });
+};
+
+export interface FileSizeError {
+    fileName: string;
+    fileSize: number;
+    maxSize: number;
+    fileType: 'text' | 'pdf' | 'image';
+}
+
+export const validateFileSize = (file: File): FileSizeError | null => {
+    const TEXT_FILE_LIMIT = 200 * 1024; // 200KB
+    const PDF_LIMIT = 5 * 1024 * 1024; // 5MB
+    const IMAGE_LIMIT = 10 * 1024 * 1024; // 10MB
+
+    if (file.type.startsWith('image/')) {
+        if (file.size > IMAGE_LIMIT) {
+            return {
+                fileName: file.name,
+                fileSize: file.size,
+                maxSize: IMAGE_LIMIT,
+                fileType: 'image'
+            };
+        }
+    } else if (file.type === 'application/pdf') {
+        if (file.size > PDF_LIMIT) {
+            return {
+                fileName: file.name,
+                fileSize: file.size,
+                maxSize: PDF_LIMIT,
+                fileType: 'pdf'
+            };
+        }
+    } else {
+        if (file.size > TEXT_FILE_LIMIT) {
+            return {
+                fileName: file.name,
+                fileSize: file.size,
+                maxSize: TEXT_FILE_LIMIT,
+                fileType: 'text'
+            };
+        }
+    }
+
+    return null;
+};
+
+export const formatFileSizeError = (error: FileSizeError): string => {
+    const typeLabel = error.fileType === 'image' ? 'Image' : error.fileType === 'pdf' ? 'PDF' : 'Text file';
+    return `${typeLabel} "${error.fileName}" is too large (${formatFileSize(error.fileSize)}). Maximum size is ${formatFileSize(error.maxSize)}.`;
 };
diff --git a/frontend/app/aipanel/aipanel.tsx b/frontend/app/aipanel/aipanel.tsx
@@ -11,7 +11,7 @@ import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
 import * as jotai from "jotai";
 import { memo, useEffect, useRef, useState } from "react";
-import { createDataUrl, isAcceptableFile, normalizeMimeType } from "./ai-utils";
+import { createDataUrl, formatFileSizeError, isAcceptableFile, normalizeMimeType, validateFileSize } from "./ai-utils";
 import { AIDroppedFiles } from "./aidroppedfiles";
 import { AIPanelHeader } from "./aipanelheader";
 import { AIPanelInput, type AIPanelInputRef } from "./aipanelinput";
@@ -27,8 +27,8 @@ interface AIPanelProps {
 const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
     const [input, setInput] = useState("");
     const [isDragOver, setIsDragOver] = useState(false);
-    const [errorMessage, setErrorMessage] = useState<string>("");
     const model = WaveAIModel.getInstance();
+    const errorMessage = jotai.useAtomValue(model.errorMessage);
     const realMessageRef = useRef<AIMessage>(null);
     const inputRef = useRef<AIPanelInputRef>(null);
     const isLayoutMode = jotai.useAtomValue(atoms.controlShiftDelayAtom);
@@ -54,8 +54,7 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
         }),
         onError: (error) => {
             console.error("AI Chat error:", error);
-            setErrorMessage(error.message || "An error occurred");
-            // Remove the last user message that failed to send
+            model.setError(error.message || "An error occurred");
             setMessages((prevMessages) => {
                 if (prevMessages.length > 0 && prevMessages[prevMessages.length - 1].role === "user") {
                     return prevMessages.slice(0, -1);
@@ -96,8 +95,7 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
         e.preventDefault();
         if (!input.trim() || status !== "ready") return;
 
-        // Clear any previous error when submitting
-        setErrorMessage("");
+        model.clearError();
 
         const droppedFiles = globalStore.get(model.droppedFiles) as DroppedFile[];
 
@@ -203,9 +201,14 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
         const files = Array.from(e.dataTransfer.files);
         const acceptableFiles = files.filter(isAcceptableFile);
 
-        acceptableFiles.forEach((file) => {
+        for (const file of acceptableFiles) {
+            const sizeError = validateFileSize(file);
+            if (sizeError) {
+                model.setError(formatFileSizeError(sizeError));
+                return;
+            }
             model.addFile(file);
-        });
+        }
 
         if (acceptableFiles.length < files.length) {
             console.warn(`${files.length - acceptableFiles.length} files were rejected due to unsupported file types`);
@@ -291,8 +294,15 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
                     <>
                         <AIPanelMessages messages={messages} status={status} />
                         {errorMessage && (
-                            <div className="px-4 py-2 text-red-400 bg-red-900/20 border-l-4 border-red-500 mx-2 mb-2">
-                                <div className="text-sm">{errorMessage}</div>
+                            <div className="px-4 py-2 text-red-400 bg-red-900/20 border-l-4 border-red-500 mx-2 mb-2 relative">
+                                <button
+                                    onClick={() => model.clearError()}
+                                    className="absolute top-2 right-2 text-red-400 hover:text-red-300 cursor-pointer z-10"
+                                    aria-label="Close error"
+                                >
+                                    <i className="fa fa-times text-sm"></i>
+                                </button>
+                                <div className="text-sm pr-6 max-h-[100px] overflow-y-auto">{errorMessage}</div>
                             </div>
                         )}
                         <AIDroppedFiles model={model} />
@@ -302,6 +312,7 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
                             setInput={setInput}
                             onSubmit={handleSubmit}
                             status={status}
+                            model={model}
                         />
                     </>
                 )}
diff --git a/frontend/app/aipanel/aipanelinput.tsx b/frontend/app/aipanel/aipanelinput.tsx
@@ -1,6 +1,8 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { formatFileSizeError, isAcceptableFile, validateFileSize } from "@/app/aipanel/ai-utils";
+import { type WaveAIModel } from "@/app/aipanel/waveai-model";
 import { atoms, globalStore } from "@/app/store/global";
 import { workspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
 import { cn } from "@/util/util";
@@ -12,6 +14,7 @@ interface AIPanelInputProps {
     setInput: (value: string) => void;
     onSubmit: (e: React.FormEvent) => void;
     status: string;
+    model: WaveAIModel;
 }
 
 export interface AIPanelInputRef {
@@ -20,9 +23,10 @@ export interface AIPanelInputRef {
 }
 
 export const AIPanelInput = memo(
-    forwardRef<AIPanelInputRef, AIPanelInputProps>(({ input, setInput, onSubmit, status }, ref) => {
+    forwardRef<AIPanelInputRef, AIPanelInputProps>(({ input, setInput, onSubmit, status, model }, ref) => {
         const isFocused = useAtomValue(atoms.waveAIFocusedAtom);
         const textareaRef = useRef<HTMLTextAreaElement>(null);
+        const fileInputRef = useRef<HTMLInputElement>(null);
         const isPanelOpen = useAtomValue(workspaceLayoutModel.panelVisibleAtom);
 
         const resizeTextarea = useCallback(() => {
@@ -68,8 +72,47 @@ export const AIPanelInput = memo(
             }
         }, [isPanelOpen, resizeTextarea]);
 
+        const handleUploadClick = () => {
+            fileInputRef.current?.click();
+        };
+
+        const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            const files = Array.from(e.target.files || []);
+            const acceptableFiles = files.filter(isAcceptableFile);
+
+            for (const file of acceptableFiles) {
+                const sizeError = validateFileSize(file);
+                if (sizeError) {
+                    model.setError(formatFileSizeError(sizeError));
+                    if (e.target) {
+                        e.target.value = "";
+                    }
+                    return;
+                }
+                model.addFile(file);
+            }
+
+            if (acceptableFiles.length < files.length) {
+                console.warn(
+                    `${files.length - acceptableFiles.length} files were rejected due to unsupported file types`
+                );
+            }
+
+            if (e.target) {
+                e.target.value = "";
+            }
+        };
+
         return (
             <div className={cn("border-t", isFocused ? "border-accent/50" : "border-gray-600")}>
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    accept="image/*,.pdf,.txt,.md,.js,.jsx,.ts,.tsx,.go,.py,.java,.c,.cpp,.h,.hpp,.html,.css,.scss,.sass,.json,.xml,.yaml,.yml,.sh,.bat,.sql"
+                    onChange={handleFileChange}
+                    className="hidden"
+                />
                 <form onSubmit={onSubmit}>
                     <div className="relative">
                         <textarea
@@ -81,12 +124,21 @@ export const AIPanelInput = memo(
                             onBlur={handleBlur}
                             placeholder="Ask Wave AI anything..."
                             className={cn(
-                                "w-full  text-white px-2 py-2 pr-6 focus:outline-none resize-none overflow-hidden",
+                                "w-full  text-white px-2 py-2 pr-12 focus:outline-none resize-none overflow-hidden",
                                 isFocused ? "bg-accent-900/50" : "bg-gray-800"
                             )}
                             style={{ fontSize: "13px" }}
                             rows={2}
                         />
+                        <button
+                            type="button"
+                            onClick={handleUploadClick}
+                            className={cn(
+                                "absolute bottom-6 right-1 w-3.5 h-3.5 transition-colors flex items-center justify-center text-gray-400 hover:text-accent cursor-pointer"
+                            )}
+                        >
+                            <i className="fa fa-paperclip text-xs"></i>
+                        </button>
                         <button
                             type="submit"
                             disabled={status !== "ready" || !input.trim()}
diff --git a/frontend/app/aipanel/waveai-model.tsx b/frontend/app/aipanel/waveai-model.tsx
@@ -23,6 +23,7 @@ export class WaveAIModel {
     widgetAccess: jotai.PrimitiveAtom<boolean> = jotai.atom(true);
     droppedFiles: jotai.PrimitiveAtom<DroppedFile[]> = jotai.atom([]);
     chatId: jotai.PrimitiveAtom<string> = jotai.atom(crypto.randomUUID());
+    errorMessage: jotai.PrimitiveAtom<string> = jotai.atom(null) as jotai.PrimitiveAtom<string>;
 
     private constructor() {
         // Private constructor prevents direct instantiation
@@ -90,6 +91,14 @@ export class WaveAIModel {
         globalStore.set(this.chatId, crypto.randomUUID());
     }
 
+    setError(message: string) {
+        globalStore.set(this.errorMessage, message);
+    }
+
+    clearError() {
+        globalStore.set(this.errorMessage, null);
+    }
+
     registerInputRef(ref: React.RefObject<AIPanelInputRef>) {
         this.inputRef = ref;
     }
