improvement(chat-file-upload): add visual indication of file upload exceeding limit (#1123)

* improvement(chat-file-upload): add visual indication of file upload exceeding limit

* fix duplicate error + lint

* fix lint

* fix lint

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx

@@ -4,6 +4,7 @@ import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState }
 import { ArrowDown, ArrowUp } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Notice } from '@/components/ui/notice'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -32,12 +33,11 @@ interface ChatFile {
 }
 
 interface ChatProps {
-  panelWidth: number
   chatMessage: string
   setChatMessage: (message: string) => void
 }
 
-export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
+export function Chat({ chatMessage, setChatMessage }: ChatProps) {
   const { activeWorkflowId } = useWorkflowRegistry()
 
   const {
@@ -63,6 +63,7 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
   // File upload state
   const [chatFiles, setChatFiles] = useState<ChatFile[]>([])
   const [isUploadingFiles, setIsUploadingFiles] = useState(false)
+  const [uploadErrors, setUploadErrors] = useState<string[]>([])
   const [dragCounter, setDragCounter] = useState(0)
   const isDragOver = dragCounter > 0
   // Scroll state
@@ -280,11 +281,15 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
           type: chatFile.type,
           file: chatFile.file, // Pass the actual File object
         }))
+        workflowInput.onUploadError = (message: string) => {
+          setUploadErrors((prev) => [...prev, message])
+        }
       }
 
       // Clear input and files, refocus immediately
       setChatMessage('')
       setChatFiles([])
+      setUploadErrors([])
       focusInput(10)
 
       // Execute the workflow to generate a response
@@ -560,14 +565,16 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
               No messages yet
             </div>
           ) : (
-            <ScrollArea ref={scrollAreaRef} className='h-full pb-2' hideScrollbar={true}>
-              <div>
-                {workflowMessages.map((message) => (
-                  <ChatMessage key={message.id} message={message} />
-                ))}
-                <div ref={messagesEndRef} />
-              </div>
-            </ScrollArea>
+            <div ref={scrollAreaRef} className='h-full'>
+              <ScrollArea className='h-full pb-2' hideScrollbar={true}>
+                <div>
+                  {workflowMessages.map((message) => (
+                    <ChatMessage key={message.id} message={message} />
+                  ))}
+                  <div ref={messagesEndRef} />
+                </div>
+              </ScrollArea>
+            </div>
           )}
 
           {/* Scroll to bottom button */}
@@ -615,26 +622,68 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
             if (!(!activeWorkflowId || isExecuting || isUploadingFiles)) {
               const droppedFiles = Array.from(e.dataTransfer.files)
               if (droppedFiles.length > 0) {
-                const newFiles = droppedFiles.slice(0, 5 - chatFiles.length).map((file) => ({
-                  id: crypto.randomUUID(),
-                  name: file.name,
-                  size: file.size,
-                  type: file.type,
-                  file,
-                }))
-                setChatFiles([...chatFiles, ...newFiles])
+                const remainingSlots = Math.max(0, 5 - chatFiles.length)
+                const candidateFiles = droppedFiles.slice(0, remainingSlots)
+                const errors: string[] = []
+                const validNewFiles: ChatFile[] = []
+
+                for (const file of candidateFiles) {
+                  if (file.size > 10 * 1024 * 1024) {
+                    errors.push(`${file.name} is too large (max 10MB)`)
+                    continue
+                  }
+
+                  const isDuplicate = chatFiles.some(
+                    (existingFile) =>
+                      existingFile.name === file.name && existingFile.size === file.size
+                  )
+                  if (isDuplicate) {
+                    errors.push(`${file.name} already added`)
+                    continue
+                  }
+
+                  validNewFiles.push({
+                    id: crypto.randomUUID(),
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                    file,
+                  })
+                }
+
+                if (errors.length > 0) {
+                  setUploadErrors(errors)
+                }
+
+                if (validNewFiles.length > 0) {
+                  setChatFiles([...chatFiles, ...validNewFiles])
+                }
               }
             }
           }}
         >
           {/* File upload section */}
           <div className='mb-2'>
+            {uploadErrors.length > 0 && (
+              <div className='mb-2'>
+                <Notice variant='error' title='File upload error'>
+                  <ul className='list-disc pl-5'>
+                    {uploadErrors.map((err, idx) => (
+                      <li key={idx}>{err}</li>
+                    ))}
+                  </ul>
+                </Notice>
+              </div>
+            )}
             <ChatFileUpload
               files={chatFiles}
-              onFilesChange={setChatFiles}
+              onFilesChange={(files) => {
+                setChatFiles(files)
+              }}
               maxFiles={5}
               maxSize={10}
               disabled={!activeWorkflowId || isExecuting || isUploadingFiles}
+              onError={(errors) => setUploadErrors(errors)}
             />
           </div>
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/components/chat-file-upload.tsx

@@ -21,6 +21,7 @@ interface ChatFileUploadProps {
   maxSize?: number // in MB
   acceptedTypes?: string[]
   disabled?: boolean
+  onError?: (errors: string[]) => void
 }
 
 export function ChatFileUpload({
@@ -30,6 +31,7 @@ export function ChatFileUpload({
   maxSize = 10,
   acceptedTypes = ['*'],
   disabled = false,
+  onError,
 }: ChatFileUploadProps) {
   const [isDragOver, setIsDragOver] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -91,7 +93,7 @@ export function ChatFileUpload({
 
     if (errors.length > 0) {
       logger.warn('File upload errors:', errors)
-      // You could show these errors in a toast or alert
+      onError?.(errors)
     }
 
     if (newFiles.length > 0) {
@@ -168,7 +170,12 @@ export function ChatFileUpload({
           ref={fileInputRef}
           type='file'
           multiple
-          onChange={(e) => handleFileSelect(e.target.files)}
+          onChange={(e) => {
+            handleFileSelect(e.target.files)
+            if (fileInputRef.current) {
+              fileInputRef.current.value = ''
+            }
+          }}
           className='hidden'
           accept={acceptedTypes.join(',')}
           disabled={disabled}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -492,11 +492,7 @@ export function Panel() {
           <div className='flex-1 overflow-hidden px-3'>
             {/* Keep all tabs mounted but hidden to preserve state and animations */}
             <div style={{ display: activeTab === 'chat' ? 'block' : 'none', height: '100%' }}>
-              <Chat
-                panelWidth={panelWidth}
-                chatMessage={chatMessage}
-                setChatMessage={setChatMessage}
-              />
+              <Chat chatMessage={chatMessage} setChatMessage={setChatMessage} />
             </div>
             <div style={{ display: activeTab === 'console' ? 'block' : 'none', height: '100%' }}>
               <Console panelWidth={panelWidth} />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

@@ -279,15 +279,17 @@ export function useWorkflowExecution() {
 
             // Handle file uploads if present
             const uploadedFiles: any[] = []
-            console.log('Checking for files to upload:', workflowInput.files)
+            interface UploadErrorCapableInput {
+              onUploadError: (message: string) => void
+            }
+            const isUploadErrorCapable = (value: unknown): value is UploadErrorCapableInput =>
+              !!value &&
+              typeof value === 'object' &&
+              'onUploadError' in (value as any) &&
+              typeof (value as any).onUploadError === 'function'
             if (workflowInput.files && Array.isArray(workflowInput.files)) {
               try {
-                console.log('Processing files for upload:', workflowInput.files.length)
-
                 for (const fileData of workflowInput.files) {
-                  console.log('Uploading file:', fileData.name, fileData.size)
-                  console.log('File data:', fileData)
-
                   // Create FormData for upload
                   const formData = new FormData()
                   formData.append('file', fileData.file)
@@ -303,8 +305,6 @@ export function useWorkflowExecution() {
 
                   if (response.ok) {
                     const uploadResult = await response.json()
-                    console.log('Upload successful:', uploadResult)
-
                     // Convert upload result to clean UserFile format
                     const processUploadResult = (result: any) => ({
                       id:
@@ -327,23 +327,28 @@ export function useWorkflowExecution() {
                       // Single file upload - the result IS the file object
                       uploadedFiles.push(processUploadResult(uploadResult))
                     } else {
-                      console.error('Unexpected upload response format:', uploadResult)
+                      logger.error('Unexpected upload response format:', uploadResult)
                     }
                   } else {
                     const errorText = await response.text()
-                    console.error(
-                      `Failed to upload file ${fileData.name}:`,
-                      response.status,
-                      errorText
-                    )
+                    const message = `Failed to upload ${fileData.name}: ${response.status} ${errorText}`
+                    logger.error(message)
+                    if (isUploadErrorCapable(workflowInput)) {
+                      try {
+                        workflowInput.onUploadError(message)
+                      } catch {}
+                    }
                   }
                 }
-
-                console.log('All files processed. Uploaded files:', uploadedFiles)
                 // Update workflow input with uploaded files
                 workflowInput.files = uploadedFiles
               } catch (error) {
-                console.error('Error uploading files:', error)
+                logger.error('Error uploading files:', error)
+                if (isUploadErrorCapable(workflowInput)) {
+                  try {
+                    workflowInput.onUploadError('Unexpected error uploading files')
+                  } catch {}
+                }
                 // Continue execution even if file upload fails
                 workflowInput.files = []
               }