From b8d6cef77ed052cf45cb0bc21b8d3f99b1707720 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 12:37:06 -0700
Subject: [PATCH 01/10] Connects to s3

---
 apps/sim/app/api/files/presigned/route.ts     |  76 +++++-
 .../components/user-input/user-input.tsx      | 231 +++++++++++++++---
 apps/sim/lib/env.ts                           |   2 +
 apps/sim/lib/environment.ts                   |   2 +-
 apps/sim/lib/uploads/setup.server.ts          |   6 +
 apps/sim/lib/uploads/setup.ts                 |  12 +
 6 files changed, 287 insertions(+), 42 deletions(-)

diff --git a/apps/sim/app/api/files/presigned/route.ts b/apps/sim/app/api/files/presigned/route.ts
index 30c33215446..ac640bb68e6 100644
--- a/apps/sim/app/api/files/presigned/route.ts
+++ b/apps/sim/app/api/files/presigned/route.ts
@@ -9,9 +9,11 @@ import { getS3Client, sanitizeFilenameForMetadata } from '@/lib/uploads/s3/s3-cl
 import {
   BLOB_CHAT_CONFIG,
   BLOB_CONFIG,
+  BLOB_COPILOT_CONFIG,
   BLOB_KB_CONFIG,
   S3_CHAT_CONFIG,
   S3_CONFIG,
+  S3_COPILOT_CONFIG,
   S3_KB_CONFIG,
 } from '@/lib/uploads/setup'
 import { createErrorResponse, createOptionsResponse } from '@/app/api/files/utils'
@@ -22,9 +24,11 @@ interface PresignedUrlRequest {
   fileName: string
   contentType: string
   fileSize: number
+  userId?: string
+  chatId?: string
 }
 
-type UploadType = 'general' | 'knowledge-base' | 'chat'
+type UploadType = 'general' | 'knowledge-base' | 'chat' | 'copilot'
 
 class PresignedUrlError extends Error {
   constructor(
@@ -58,7 +62,7 @@ export async function POST(request: NextRequest) {
       throw new ValidationError('Invalid JSON in request body')
     }
 
-    const { fileName, contentType, fileSize } = data
+    const { fileName, contentType, fileSize, userId, chatId } = data
 
     if (!fileName?.trim()) {
       throw new ValidationError('fileName is required and cannot be empty')
@@ -83,7 +87,19 @@ export async function POST(request: NextRequest) {
         ? 'knowledge-base'
         : uploadTypeParam === 'chat'
           ? 'chat'
-          : 'general'
+          : uploadTypeParam === 'copilot'
+            ? 'copilot'
+            : 'general'
+
+    // Validate copilot-specific requirements
+    if (uploadType === 'copilot') {
+      if (!userId?.trim()) {
+        throw new ValidationError('userId is required for copilot uploads')
+      }
+      if (!chatId?.trim()) {
+        throw new ValidationError('chatId is required for copilot uploads')
+      }
+    }
 
     if (!isUsingCloudStorage()) {
       throw new StorageConfigError(
@@ -96,9 +112,9 @@ export async function POST(request: NextRequest) {
 
     switch (storageProvider) {
       case 's3':
-        return await handleS3PresignedUrl(fileName, contentType, fileSize, uploadType)
+        return await handleS3PresignedUrl(fileName, contentType, fileSize, uploadType, userId, chatId)
       case 'blob':
-        return await handleBlobPresignedUrl(fileName, contentType, fileSize, uploadType)
+        return await handleBlobPresignedUrl(fileName, contentType, fileSize, uploadType, userId, chatId)
       default:
         throw new StorageConfigError(`Unknown storage provider: ${storageProvider}`)
     }
@@ -126,7 +142,9 @@ async function handleS3PresignedUrl(
   fileName: string,
   contentType: string,
   fileSize: number,
-  uploadType: UploadType
+  uploadType: UploadType,
+  userId?: string,
+  chatId?: string
 ) {
   try {
     const config =
@@ -134,15 +152,26 @@ async function handleS3PresignedUrl(
         ? S3_KB_CONFIG
         : uploadType === 'chat'
           ? S3_CHAT_CONFIG
-          : S3_CONFIG
+          : uploadType === 'copilot'
+            ? S3_COPILOT_CONFIG
+            : S3_CONFIG
 
     if (!config.bucket || !config.region) {
       throw new StorageConfigError(`S3 configuration missing for ${uploadType} uploads`)
     }
 
     const safeFileName = fileName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9.-]/g, '_')
-    const prefix = uploadType === 'knowledge-base' ? 'kb/' : uploadType === 'chat' ? 'chat/' : ''
-    const uniqueKey = `${prefix}${Date.now()}-${uuidv4()}-${safeFileName}`
+    
+    let prefix = ''
+    if (uploadType === 'knowledge-base') {
+      prefix = 'kb/'
+    } else if (uploadType === 'chat') {
+      prefix = 'chat/'
+    } else if (uploadType === 'copilot') {
+      prefix = `${userId}/${chatId}/`
+    }
+    
+    const uniqueKey = `${prefix}${uuidv4()}-${safeFileName}`
 
     const sanitizedOriginalName = sanitizeFilenameForMetadata(fileName)
 
@@ -155,6 +184,10 @@ async function handleS3PresignedUrl(
       metadata.purpose = 'knowledge-base'
     } else if (uploadType === 'chat') {
       metadata.purpose = 'chat'
+    } else if (uploadType === 'copilot') {
+      metadata.purpose = 'copilot'
+      metadata.userId = userId || ''
+      metadata.chatId = chatId || ''
     }
 
     const command = new PutObjectCommand({
@@ -210,7 +243,9 @@ async function handleBlobPresignedUrl(
   fileName: string,
   contentType: string,
   fileSize: number,
-  uploadType: UploadType
+  uploadType: UploadType,
+  userId?: string,
+  chatId?: string
 ) {
   try {
     const config =
@@ -218,7 +253,9 @@ async function handleBlobPresignedUrl(
         ? BLOB_KB_CONFIG
         : uploadType === 'chat'
           ? BLOB_CHAT_CONFIG
-          : BLOB_CONFIG
+          : uploadType === 'copilot'
+            ? BLOB_COPILOT_CONFIG
+            : BLOB_CONFIG
 
     if (
       !config.accountName ||
@@ -229,8 +266,17 @@ async function handleBlobPresignedUrl(
     }
 
     const safeFileName = fileName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9.-]/g, '_')
-    const prefix = uploadType === 'knowledge-base' ? 'kb/' : uploadType === 'chat' ? 'chat/' : ''
-    const uniqueKey = `${prefix}${Date.now()}-${uuidv4()}-${safeFileName}`
+    
+    let prefix = ''
+    if (uploadType === 'knowledge-base') {
+      prefix = 'kb/'
+    } else if (uploadType === 'chat') {
+      prefix = 'chat/'
+    } else if (uploadType === 'copilot') {
+      prefix = `${userId}/${chatId}/`
+    }
+    
+    const uniqueKey = `${prefix}${uuidv4()}-${safeFileName}`
 
     const blobServiceClient = getBlobServiceClient()
     const containerClient = blobServiceClient.getContainerClient(config.containerName)
@@ -282,6 +328,10 @@ async function handleBlobPresignedUrl(
       uploadHeaders['x-ms-meta-purpose'] = 'knowledge-base'
     } else if (uploadType === 'chat') {
       uploadHeaders['x-ms-meta-purpose'] = 'chat'
+    } else if (uploadType === 'copilot') {
+      uploadHeaders['x-ms-meta-purpose'] = 'copilot'
+      uploadHeaders['x-ms-meta-userid'] = encodeURIComponent(userId || '')
+      uploadHeaders['x-ms-meta-chatid'] = encodeURIComponent(chatId || '')
     }
 
     return NextResponse.json({
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 1ffa1f397aa..829f17c81e0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -8,10 +8,12 @@ import {
   useRef,
   useState,
 } from 'react'
-import { ArrowUp, Loader2, MessageCircle, Package, X } from 'lucide-react'
+import { ArrowUp, Loader2, MessageCircle, Package, Paperclip, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { cn } from '@/lib/utils'
+import { useSession } from '@/lib/auth-client'
+import { useCopilotStore } from '@/stores/copilot/store'
 
 interface UserInputProps {
   onSubmit: (message: string) => void
@@ -27,6 +29,15 @@ interface UserInputProps {
   onChange?: (value: string) => void // Callback when value changes
 }
 
+interface AttachedFile {
+  id: string
+  name: string
+  size: number
+  type: string
+  path: string
+  uploading?: boolean
+}
+
 interface UserInputRef {
   focus: () => void
 }
@@ -49,7 +60,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     ref
   ) => {
     const [internalMessage, setInternalMessage] = useState('')
+    const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([])
     const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    
+    const { data: session } = useSession()
+    const { currentChat, workflowId } = useCopilotStore()
 
     // Expose focus method to parent
     useImperativeHandle(
@@ -111,6 +127,111 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }
 
+    const handleFileSelect = () => {
+      fileInputRef.current?.click()
+    }
+
+    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files
+      if (!files || files.length === 0) return
+
+      const file = files[0]
+      const userId = session?.user?.id
+      const chatId = currentChat?.id
+
+      if (!userId || !chatId) {
+        console.error('User ID or Chat ID not available for file upload')
+        return
+      }
+
+      // Create a temporary file entry with uploading state
+      const tempFile: AttachedFile = {
+        id: crypto.randomUUID(),
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        path: '',
+        uploading: true,
+      }
+
+      setAttachedFiles(prev => [...prev, tempFile])
+
+      try {
+        // Request presigned URL
+        const presignedResponse = await fetch('/api/files/presigned?type=copilot', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            fileName: file.name,
+            contentType: file.type,
+            fileSize: file.size,
+            userId,
+            chatId,
+          }),
+        })
+
+        if (!presignedResponse.ok) {
+          throw new Error('Failed to get presigned URL')
+        }
+
+        const presignedData = await presignedResponse.json()
+
+        // Upload file to S3
+        console.log('Uploading to S3:', presignedData.presignedUrl)
+        const uploadResponse = await fetch(presignedData.presignedUrl, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': file.type,
+          },
+          body: file,
+        })
+
+        console.log('S3 Upload response status:', uploadResponse.status)
+        
+        if (!uploadResponse.ok) {
+          const errorText = await uploadResponse.text()
+          console.error('S3 Upload failed:', errorText)
+          throw new Error(`Failed to upload file: ${uploadResponse.status} ${errorText}`)
+        }
+
+        // Update file entry with success
+        setAttachedFiles(prev =>
+          prev.map(f =>
+            f.id === tempFile.id
+              ? {
+                  ...f,
+                  path: presignedData.fileInfo.path,
+                  uploading: false,
+                }
+              : f
+          )
+        )
+      } catch (error) {
+        console.error('File upload failed:', error)
+        // Remove failed upload
+        setAttachedFiles(prev => prev.filter(f => f.id !== tempFile.id))
+      }
+
+      // Clear the input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    }
+
+    const removeFile = (fileId: string) => {
+      setAttachedFiles(prev => prev.filter(f => f.id !== fileId))
+    }
+
+    const formatFileSize = (bytes: number) => {
+      if (bytes === 0) return '0 Bytes'
+      const k = 1024
+      const sizes = ['Bytes', 'KB', 'MB', 'GB']
+      const i = Math.floor(Math.log(bytes) / Math.log(k))
+      return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+    }
+
     const canSubmit = message.trim().length > 0 && !disabled && !isLoading
     const showAbortButton = isLoading && onAbort
 
@@ -131,6 +252,36 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     return (
       <div className={cn('relative flex-none pb-4', className)}>
         <div className='rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] p-2 shadow-xs dark:border-[#414141] dark:bg-[#202020]'>
+          {/* Attached Files Display */}
+          {attachedFiles.length > 0 && (
+            <div className='mb-2 space-y-1'>
+              {attachedFiles.map((file) => (
+                <div
+                  key={file.id}
+                  className='flex items-center gap-2 rounded-md bg-secondary/50 px-2 py-1 text-xs'
+                >
+                  <Paperclip className='h-3 w-3 text-muted-foreground' />
+                  <span className='flex-1 truncate'>{file.name}</span>
+                  <span className='text-muted-foreground'>
+                    {formatFileSize(file.size)}
+                  </span>
+                  {file.uploading ? (
+                    <Loader2 className='h-3 w-3 animate-spin text-muted-foreground' />
+                  ) : (
+                    <Button
+                      variant='ghost'
+                      size='icon'
+                      onClick={() => removeFile(file.id)}
+                      className='h-4 w-4 hover:bg-destructive hover:text-destructive-foreground'
+                    >
+                      <X className='h-3 w-3' />
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
           {/* Textarea Field */}
           <Textarea
             ref={textareaRef}
@@ -144,9 +295,9 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             style={{ height: 'auto' }}
           />
 
-          {/* Bottom Row: Mode Selector + Send Button */}
+          {/* Bottom Row: Mode Selector + Attach Button + Send Button */}
           <div className='flex items-center justify-between'>
-            {/* Mode Selector Tag */}
+            {/* Left side: Mode Selector */}
             <Button
               variant='ghost'
               size='sm'
@@ -158,36 +309,60 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               <span className='capitalize'>{mode}</span>
             </Button>
 
-            {/* Send Button */}
-            {showAbortButton ? (
-              <Button
-                onClick={handleAbort}
-                disabled={isAborting}
-                size='icon'
-                className='h-6 w-6 rounded-full bg-red-500 text-white transition-all duration-200 hover:bg-red-600'
-                title='Stop generation'
-              >
-                {isAborting ? (
-                  <Loader2 className='h-3 w-3 animate-spin' />
-                ) : (
-                  <X className='h-3 w-3' />
-                )}
-              </Button>
-            ) : (
+            {/* Right side: Attach Button + Send Button */}
+            <div className='flex items-center gap-1'>
+              {/* Attach Button */}
               <Button
-                onClick={handleSubmit}
-                disabled={!canSubmit}
+                variant='ghost'
                 size='icon'
-                className='h-6 w-6 rounded-full bg-[#802FFF] text-white shadow-[0_0_0_0_#802FFF] transition-all duration-200 hover:bg-[#7028E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
+                onClick={handleFileSelect}
+                disabled={disabled || isLoading}
+                className='h-6 w-6 text-muted-foreground hover:text-foreground'
+                title='Attach file'
               >
-                {isLoading ? (
-                  <Loader2 className='h-3 w-3 animate-spin' />
-                ) : (
-                  <ArrowUp className='h-3 w-3' />
-                )}
+                <Paperclip className='h-3 w-3' />
               </Button>
-            )}
+
+              {/* Send Button */}
+              {showAbortButton ? (
+                <Button
+                  onClick={handleAbort}
+                  disabled={isAborting}
+                  size='icon'
+                  className='h-6 w-6 rounded-full bg-red-500 text-white transition-all duration-200 hover:bg-red-600'
+                  title='Stop generation'
+                >
+                  {isAborting ? (
+                    <Loader2 className='h-3 w-3 animate-spin' />
+                  ) : (
+                    <X className='h-3 w-3' />
+                  )}
+                </Button>
+              ) : (
+                <Button
+                  onClick={handleSubmit}
+                  disabled={!canSubmit}
+                  size='icon'
+                  className='h-6 w-6 rounded-full bg-[#802FFF] text-white shadow-[0_0_0_0_#802FFF] transition-all duration-200 hover:bg-[#7028E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
+                >
+                  {isLoading ? (
+                    <Loader2 className='h-3 w-3 animate-spin' />
+                  ) : (
+                    <ArrowUp className='h-3 w-3' />
+                  )}
+                </Button>
+              )}
+            </div>
           </div>
+
+          {/* Hidden File Input */}
+          <input
+            ref={fileInputRef}
+            type='file'
+            onChange={handleFileChange}
+            className='hidden'
+            accept='.pdf,.doc,.docx,.txt,.md,.png,.jpg,.jpeg,.gif,.svg'
+          />
         </div>
       </div>
     )
diff --git a/apps/sim/lib/env.ts b/apps/sim/lib/env.ts
index 41b40346068..aa608c778d3 100644
--- a/apps/sim/lib/env.ts
+++ b/apps/sim/lib/env.ts
@@ -96,6 +96,7 @@ export const env = createEnv({
     S3_LOGS_BUCKET_NAME:                  z.string().optional(),                // S3 bucket for storing logs
     S3_KB_BUCKET_NAME:                    z.string().optional(),                // S3 bucket for knowledge base files
     S3_CHAT_BUCKET_NAME:                  z.string().optional(),                // S3 bucket for chat logos
+    S3_COPILOT_BUCKET_NAME:               z.string().optional(),                // S3 bucket for copilot files
 
     // Cloud Storage - Azure Blob
     AZURE_ACCOUNT_NAME:                   z.string().optional(),                // Azure storage account name
@@ -104,6 +105,7 @@ export const env = createEnv({
     AZURE_STORAGE_CONTAINER_NAME:         z.string().optional(),                // Azure container for general files
     AZURE_STORAGE_KB_CONTAINER_NAME:      z.string().optional(),                // Azure container for knowledge base files
     AZURE_STORAGE_CHAT_CONTAINER_NAME:    z.string().optional(),                // Azure container for chat logos
+    AZURE_STORAGE_COPILOT_CONTAINER_NAME: z.string().optional(),                // Azure container for copilot files
 
     // Data Retention
     FREE_PLAN_LOG_RETENTION_DAYS:         z.string().optional(),                // Log retention days for free plan users
diff --git a/apps/sim/lib/environment.ts b/apps/sim/lib/environment.ts
index d6da01ec546..cfffb33186d 100644
--- a/apps/sim/lib/environment.ts
+++ b/apps/sim/lib/environment.ts
@@ -11,7 +11,7 @@ export const isProd = env.NODE_ENV === 'production'
 /**
  * Is the application running in development mode
  */
-export const isDev = env.NODE_ENV === 'development'
+export const isDev = false // env.NODE_ENV === 'development'
 
 /**
  * Is the application running in test mode
diff --git a/apps/sim/lib/uploads/setup.server.ts b/apps/sim/lib/uploads/setup.server.ts
index b2b0b0e24b7..f6cd212d8b8 100644
--- a/apps/sim/lib/uploads/setup.server.ts
+++ b/apps/sim/lib/uploads/setup.server.ts
@@ -69,9 +69,15 @@ if (typeof process !== 'undefined') {
   if (USE_BLOB_STORAGE && env.AZURE_STORAGE_KB_CONTAINER_NAME) {
     logger.info(`Azure Blob knowledge base container: ${env.AZURE_STORAGE_KB_CONTAINER_NAME}`)
   }
+  if (USE_BLOB_STORAGE && env.AZURE_STORAGE_COPILOT_CONTAINER_NAME) {
+    logger.info(`Azure Blob copilot container: ${env.AZURE_STORAGE_COPILOT_CONTAINER_NAME}`)
+  }
   if (USE_S3_STORAGE && env.S3_KB_BUCKET_NAME) {
     logger.info(`S3 knowledge base bucket: ${env.S3_KB_BUCKET_NAME}`)
   }
+  if (USE_S3_STORAGE && env.S3_COPILOT_BUCKET_NAME) {
+    logger.info(`S3 copilot bucket: ${env.S3_COPILOT_BUCKET_NAME}`)
+  }
 }
 
 export default ensureUploadsDirectory
diff --git a/apps/sim/lib/uploads/setup.ts b/apps/sim/lib/uploads/setup.ts
index c71b00e21f2..1b9efb6f194 100644
--- a/apps/sim/lib/uploads/setup.ts
+++ b/apps/sim/lib/uploads/setup.ts
@@ -60,6 +60,18 @@ export const BLOB_CHAT_CONFIG = {
   containerName: env.AZURE_STORAGE_CHAT_CONTAINER_NAME || '',
 }
 
+export const S3_COPILOT_CONFIG = {
+  bucket: env.S3_COPILOT_BUCKET_NAME || '',
+  region: env.AWS_REGION || '',
+}
+
+export const BLOB_COPILOT_CONFIG = {
+  accountName: env.AZURE_ACCOUNT_NAME || '',
+  accountKey: env.AZURE_ACCOUNT_KEY || '',
+  connectionString: env.AZURE_CONNECTION_STRING || '',
+  containerName: env.AZURE_STORAGE_COPILOT_CONTAINER_NAME || '',
+}
+
 export async function ensureUploadsDirectory() {
   if (USE_S3_STORAGE) {
     logger.info('Using S3 storage, skipping local uploads directory creation')

From aa8c2e7714474c0dda43408cec7da294812df706 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 13:24:57 -0700
Subject: [PATCH 02/10] Checkpoint

---
 apps/sim/app/api/copilot/chat/file-utils.ts   | 132 +++++++++++++
 apps/sim/app/api/copilot/chat/route.ts        | 184 ++++++++++++++++--
 apps/sim/app/api/files/presigned/route.ts     |  20 +-
 .../copilot-message/copilot-message.tsx       |  46 ++++-
 .../components/user-input/user-input.tsx      |  53 +++--
 .../panel/components/copilot/copilot.tsx      |   6 +-
 apps/sim/lib/copilot/api.ts                   |  12 ++
 apps/sim/lib/uploads/s3/s3-client.ts          |  24 +++
 apps/sim/stores/copilot/store.ts              |   1 +
 apps/sim/stores/copilot/types.ts              |  13 ++
 10 files changed, 439 insertions(+), 52 deletions(-)
 create mode 100644 apps/sim/app/api/copilot/chat/file-utils.ts

diff --git a/apps/sim/app/api/copilot/chat/file-utils.ts b/apps/sim/app/api/copilot/chat/file-utils.ts
new file mode 100644
index 00000000000..5092962a16c
--- /dev/null
+++ b/apps/sim/app/api/copilot/chat/file-utils.ts
@@ -0,0 +1,132 @@
+export interface FileAttachment {
+  id: string
+  s3_key: string
+  filename: string
+  media_type: string
+  size: number
+}
+
+export interface AnthropicMessageContent {
+  type: 'text' | 'image' | 'document'
+  text?: string
+  source?: {
+    type: 'base64'
+    media_type: string
+    data: string
+  }
+}
+
+/**
+ * Mapping of MIME types to Anthropic content types
+ */
+export const MIME_TYPE_MAPPING: Record<string, 'image' | 'document'> = {
+  // Images
+  'image/jpeg': 'image',
+  'image/jpg': 'image',
+  'image/png': 'image',
+  'image/gif': 'image',
+  'image/webp': 'image',
+  'image/svg+xml': 'image',
+  
+  // Documents
+  'application/pdf': 'document',
+  'text/plain': 'document',
+  'text/csv': 'document',
+  'application/json': 'document',
+  'application/xml': 'document',
+  'text/xml': 'document',
+  'text/html': 'document',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'document', // .docx
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'document', // .xlsx
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'document', // .pptx
+  'application/msword': 'document', // .doc
+  'application/vnd.ms-excel': 'document', // .xls
+  'application/vnd.ms-powerpoint': 'document', // .ppt
+  'text/markdown': 'document',
+  'application/rtf': 'document',
+}
+
+/**
+ * Get the Anthropic content type for a given MIME type
+ */
+export function getAnthropicContentType(mimeType: string): 'image' | 'document' | null {
+  return MIME_TYPE_MAPPING[mimeType.toLowerCase()] || null
+}
+
+/**
+ * Check if a MIME type is supported by Anthropic
+ */
+export function isSupportedFileType(mimeType: string): boolean {
+  return mimeType.toLowerCase() in MIME_TYPE_MAPPING
+}
+
+/**
+ * Convert a file buffer to base64
+ */
+export function bufferToBase64(buffer: Buffer): string {
+  return buffer.toString('base64')
+}
+
+/**
+ * Create Anthropic message content from file data
+ */
+export function createAnthropicFileContent(
+  fileBuffer: Buffer,
+  mimeType: string
+): AnthropicMessageContent | null {
+  const contentType = getAnthropicContentType(mimeType)
+  if (!contentType) {
+    return null
+  }
+
+  return {
+    type: contentType,
+    source: {
+      type: 'base64',
+      media_type: mimeType,
+      data: bufferToBase64(fileBuffer),
+    },
+  }
+}
+
+/**
+ * Extract file extension from filename
+ */
+export function getFileExtension(filename: string): string {
+  const lastDot = filename.lastIndexOf('.')
+  return lastDot !== -1 ? filename.slice(lastDot + 1).toLowerCase() : ''
+}
+
+/**
+ * Get MIME type from file extension (fallback if not provided)
+ */
+export function getMimeTypeFromExtension(extension: string): string {
+  const extensionMimeMap: Record<string, string> = {
+    // Images
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    gif: 'image/gif',
+    webp: 'image/webp',
+    svg: 'image/svg+xml',
+    
+    // Documents
+    pdf: 'application/pdf',
+    txt: 'text/plain',
+    csv: 'text/csv',
+    json: 'application/json',
+    xml: 'application/xml',
+    html: 'text/html',
+    htm: 'text/html',
+    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    doc: 'application/msword',
+    xls: 'application/vnd.ms-excel',
+    ppt: 'application/vnd.ms-powerpoint',
+    md: 'text/markdown',
+    rtf: 'application/rtf',
+  }
+  
+  return extensionMimeMap[extension.toLowerCase()] || 'application/octet-stream'
+} 
\ No newline at end of file
diff --git a/apps/sim/app/api/copilot/chat/route.ts b/apps/sim/app/api/copilot/chat/route.ts
index 6b5bfad14d0..30312025c4f 100644
--- a/apps/sim/app/api/copilot/chat/route.ts
+++ b/apps/sim/app/api/copilot/chat/route.ts
@@ -13,12 +13,25 @@ import { getCopilotModel } from '@/lib/copilot/config'
 import { TITLE_GENERATION_SYSTEM_PROMPT, TITLE_GENERATION_USER_PROMPT } from '@/lib/copilot/prompts'
 import { env } from '@/lib/env'
 import { createLogger } from '@/lib/logs/console/logger'
+import { downloadFile } from '@/lib/uploads'
+import { downloadFromS3WithConfig } from '@/lib/uploads/s3/s3-client'
+import { S3_COPILOT_CONFIG, USE_S3_STORAGE } from '@/lib/uploads/setup'
 import { db } from '@/db'
 import { copilotChats } from '@/db/schema'
 import { executeProviderRequest } from '@/providers'
+import { createAnthropicFileContent, isSupportedFileType } from './file-utils'
 
 const logger = createLogger('CopilotChatAPI')
 
+// Schema for file attachments
+const FileAttachmentSchema = z.object({
+  id: z.string(),
+  s3_key: z.string(),
+  filename: z.string(),
+  media_type: z.string(),
+  size: z.number(),
+})
+
 // Schema for chat messages
 const ChatMessageSchema = z.object({
   message: z.string().min(1, 'Message is required'),
@@ -29,6 +42,7 @@ const ChatMessageSchema = z.object({
   createNewChat: z.boolean().optional().default(false),
   stream: z.boolean().optional().default(true),
   implicitFeedback: z.string().optional(),
+  fileAttachments: z.array(FileAttachmentSchema).optional(),
 })
 
 // Sim Agent API configuration
@@ -145,6 +159,7 @@ export async function POST(req: NextRequest) {
       createNewChat,
       stream,
       implicitFeedback,
+      fileAttachments,
     } = ChatMessageSchema.parse(body)
 
     logger.info(`[${tracker.requestId}] Processing copilot chat request`, {
@@ -195,15 +210,83 @@ export async function POST(req: NextRequest) {
       }
     }
 
+    // Process file attachments if present
+    let processedFileContents: any[] = []
+    if (fileAttachments && fileAttachments.length > 0) {
+      logger.info(`[${tracker.requestId}] Processing ${fileAttachments.length} file attachments`)
+      
+      for (const attachment of fileAttachments) {
+        try {
+          // Check if file type is supported
+          if (!isSupportedFileType(attachment.media_type)) {
+            logger.warn(`[${tracker.requestId}] Unsupported file type: ${attachment.media_type}`)
+            continue
+          }
+
+          // Download file from S3
+          logger.info(`[${tracker.requestId}] Downloading file: ${attachment.s3_key}`)
+          let fileBuffer: Buffer
+          if (USE_S3_STORAGE) {
+            fileBuffer = await downloadFromS3WithConfig(attachment.s3_key, S3_COPILOT_CONFIG)
+          } else {
+            // Fallback to generic downloadFile for other storage providers
+            fileBuffer = await downloadFile(attachment.s3_key)
+          }
+          
+          // Convert to Anthropic format
+          const fileContent = createAnthropicFileContent(fileBuffer, attachment.media_type)
+          if (fileContent) {
+            processedFileContents.push(fileContent)
+            logger.info(`[${tracker.requestId}] Processed file: ${attachment.filename} (${attachment.media_type})`)
+          }
+        } catch (error) {
+          logger.error(`[${tracker.requestId}] Failed to process file ${attachment.filename}:`, error)
+          // Continue processing other files
+        }
+      }
+    }
+
     // Build messages array for sim agent with conversation history
     const messages = []
 
-    // Add conversation history
+    // Add conversation history (need to rebuild these with file support if they had attachments)
     for (const msg of conversationHistory) {
-      messages.push({
-        role: msg.role,
-        content: msg.content,
-      })
+      if (msg.fileAttachments && msg.fileAttachments.length > 0) {
+        // This is a message with file attachments - rebuild with content array
+        const content: any[] = [{ type: 'text', text: msg.content }]
+        
+        // Process file attachments for historical messages
+        for (const attachment of msg.fileAttachments) {
+          try {
+            if (isSupportedFileType(attachment.media_type)) {
+              let fileBuffer: Buffer
+              if (USE_S3_STORAGE) {
+                fileBuffer = await downloadFromS3WithConfig(attachment.s3_key, S3_COPILOT_CONFIG)
+              } else {
+                // Fallback to generic downloadFile for other storage providers
+                fileBuffer = await downloadFile(attachment.s3_key)
+              }
+              const fileContent = createAnthropicFileContent(fileBuffer, attachment.media_type)
+              if (fileContent) {
+                content.push(fileContent)
+              }
+            }
+          } catch (error) {
+            logger.error(`[${tracker.requestId}] Failed to process historical file ${attachment.filename}:`, error)
+          }
+        }
+        
+        messages.push({
+          role: msg.role,
+          content,
+        })
+      } else {
+        // Regular text-only message
+        messages.push({
+          role: msg.role,
+          content: msg.content,
+        })
+      }
     }
 
     // Add implicit feedback if provided
@@ -214,11 +297,29 @@ export async function POST(req: NextRequest) {
       })
     }
 
-    // Add current user message
-    messages.push({
-      role: 'user',
-      content: message,
-    })
+    // Add current user message with file attachments
+    if (processedFileContents.length > 0) {
+      // Message with files - use content array format
+      const content: any[] = [
+        { type: 'text', text: message }
+      ]
+      
+      // Add file contents
+      for (const fileContent of processedFileContents) {
+        content.push(fileContent)
+      }
+      
+      messages.push({
+        role: 'user',
+        content,
+      })
+    } else {
+      // Text-only message
+      messages.push({
+        role: 'user',
+        content: message,
+      })
+    }
 
     // Start title generation in parallel if this is a new chat with first message
     if (actualChatId && !currentChat?.title && conversationHistory.length === 0) {
@@ -231,21 +332,64 @@ export async function POST(req: NextRequest) {
       endpoint: `${SIM_AGENT_API_URL}/api/chat-completion-streaming`,
     })
 
+    // Prepare the request payload
+    const simAgentPayload = {
+      messages,
+      workflowId,
+      userId: authenticatedUserId,
+      stream: stream,
+      streamToolCalls: true,
+      mode: mode,
+      ...(session?.user?.name && { userName: session.user.name }),
+    }
+
+    // Log the complete request payload (with truncated message content for readability)
+    logger.info(`[${tracker.requestId}] Full sim agent request payload:`, {
+      ...simAgentPayload,
+      messages: messages.map((msg, index) => ({
+        role: msg.role,
+        contentType: Array.isArray(msg.content) ? 'array' : 'string',
+        contentLength: Array.isArray(msg.content) 
+          ? msg.content.length 
+          : typeof msg.content === 'string' 
+            ? msg.content.length 
+            : 0,
+        contentPreview: Array.isArray(msg.content)
+          ? msg.content.map(item => ({
+              type: item.type,
+              ...(item.type === 'text' && { 
+                textLength: item.text?.length || 0, 
+                textPreview: item.text?.substring(0, 100) + (item.text?.length > 100 ? '...' : '') 
+              }),
+              ...(item.type === 'image' && { 
+                mediaType: item.source?.media_type,
+                sourceType: item.source?.type,
+                hasBase64Data: !!item.source?.data,
+                base64DataLength: item.source?.data?.length || 0,
+                base64Preview: item.source?.data ? item.source.data.substring(0, 50) + '...' : 'NO DATA'
+              }),
+              ...(item.type === 'document' && { 
+                mediaType: item.source?.media_type,
+                sourceType: item.source?.type,
+                hasBase64Data: !!item.source?.data,
+                base64DataLength: item.source?.data?.length || 0,
+                base64Preview: item.source?.data ? item.source.data.substring(0, 50) + '...' : 'NO DATA'
+              }),
+            }))
+          : typeof msg.content === 'string'
+            ? msg.content.substring(0, 200) + (msg.content.length > 200 ? '...' : '')
+            : 'non-string content',
+        messageIndex: index,
+      })),
+    })
+
     const simAgentResponse = await fetch(`${SIM_AGENT_API_URL}/api/chat-completion-streaming`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         ...(SIM_AGENT_API_KEY && { 'x-api-key': SIM_AGENT_API_KEY }),
       },
-      body: JSON.stringify({
-        messages,
-        workflowId,
-        userId: authenticatedUserId,
-        stream: stream,
-        streamToolCalls: true,
-        mode: mode,
-        ...(session?.user?.name && { userName: session.user.name }),
-      }),
+      body: JSON.stringify(simAgentPayload),
     })
 
     if (!simAgentResponse.ok) {
@@ -270,6 +414,7 @@ export async function POST(req: NextRequest) {
         role: 'user',
         content: message,
         timestamp: new Date().toISOString(),
+        ...(fileAttachments && fileAttachments.length > 0 && { fileAttachments }),
       }
 
       // Create a pass-through stream that captures the response
@@ -590,6 +735,7 @@ export async function POST(req: NextRequest) {
         role: 'user',
         content: message,
         timestamp: new Date().toISOString(),
+        ...(fileAttachments && fileAttachments.length > 0 && { fileAttachments }),
       }
 
       const assistantMessage = {
diff --git a/apps/sim/app/api/files/presigned/route.ts b/apps/sim/app/api/files/presigned/route.ts
index ac640bb68e6..b8b9de12c99 100644
--- a/apps/sim/app/api/files/presigned/route.ts
+++ b/apps/sim/app/api/files/presigned/route.ts
@@ -96,9 +96,6 @@ export async function POST(request: NextRequest) {
       if (!userId?.trim()) {
         throw new ValidationError('userId is required for copilot uploads')
       }
-      if (!chatId?.trim()) {
-        throw new ValidationError('chatId is required for copilot uploads')
-      }
     }
 
     if (!isUsingCloudStorage()) {
@@ -112,9 +109,9 @@ export async function POST(request: NextRequest) {
 
     switch (storageProvider) {
       case 's3':
-        return await handleS3PresignedUrl(fileName, contentType, fileSize, uploadType, userId, chatId)
+        return await handleS3PresignedUrl(fileName, contentType, fileSize, uploadType, userId)
       case 'blob':
-        return await handleBlobPresignedUrl(fileName, contentType, fileSize, uploadType, userId, chatId)
+        return await handleBlobPresignedUrl(fileName, contentType, fileSize, uploadType, userId)
       default:
         throw new StorageConfigError(`Unknown storage provider: ${storageProvider}`)
     }
@@ -143,8 +140,7 @@ async function handleS3PresignedUrl(
   contentType: string,
   fileSize: number,
   uploadType: UploadType,
-  userId?: string,
-  chatId?: string
+  userId?: string
 ) {
   try {
     const config =
@@ -168,7 +164,7 @@ async function handleS3PresignedUrl(
     } else if (uploadType === 'chat') {
       prefix = 'chat/'
     } else if (uploadType === 'copilot') {
-      prefix = `${userId}/${chatId}/`
+      prefix = `${userId}/`  // Simplified to just userId, removed chatId
     }
     
     const uniqueKey = `${prefix}${uuidv4()}-${safeFileName}`
@@ -187,7 +183,6 @@ async function handleS3PresignedUrl(
     } else if (uploadType === 'copilot') {
       metadata.purpose = 'copilot'
       metadata.userId = userId || ''
-      metadata.chatId = chatId || ''
     }
 
     const command = new PutObjectCommand({
@@ -244,8 +239,7 @@ async function handleBlobPresignedUrl(
   contentType: string,
   fileSize: number,
   uploadType: UploadType,
-  userId?: string,
-  chatId?: string
+  userId?: string
 ) {
   try {
     const config =
@@ -273,7 +267,7 @@ async function handleBlobPresignedUrl(
     } else if (uploadType === 'chat') {
       prefix = 'chat/'
     } else if (uploadType === 'copilot') {
-      prefix = `${userId}/${chatId}/`
+      prefix = `${userId}/`  // Simplified to just userId, removed chatId
     }
     
     const uniqueKey = `${prefix}${uuidv4()}-${safeFileName}`
@@ -331,7 +325,7 @@ async function handleBlobPresignedUrl(
     } else if (uploadType === 'copilot') {
       uploadHeaders['x-ms-meta-purpose'] = 'copilot'
       uploadHeaders['x-ms-meta-userid'] = encodeURIComponent(userId || '')
-      uploadHeaders['x-ms-meta-chatid'] = encodeURIComponent(chatId || '')
+      // Removed chatId - no longer needed
     }
 
     return NextResponse.json({
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index bae6d96a348..5556c65a33f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { type FC, memo, useEffect, useMemo, useRef, useState } from 'react'
-import { Check, Clipboard, Loader2, RotateCcw, ThumbsDown, ThumbsUp, X } from 'lucide-react'
+import { Check, Clipboard, FileText, Image, Loader2, RotateCcw, ThumbsDown, ThumbsUp, X } from 'lucide-react'
 import { InlineToolCall } from '@/lib/copilot/tools/inline-tool-call'
 import { createLogger } from '@/lib/logs/console/logger'
 import { usePreviewStore } from '@/stores/copilot/preview-store'
@@ -38,6 +38,47 @@ const StreamingIndicator = memo(() => (
 
 StreamingIndicator.displayName = 'StreamingIndicator'
 
+// File attachment display component
+interface FileAttachmentDisplayProps {
+  fileAttachments: any[]
+}
+
+const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayProps) => {
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+  }
+
+  const getFileIcon = (mediaType: string) => {
+    if (mediaType.startsWith('image/')) {
+      return <Image className='h-4 w-4' />
+    }
+    return <FileText className='h-4 w-4' />
+  }
+
+  return (
+    <div className='mt-2 space-y-1'>
+      {fileAttachments.map((file) => (
+        <div
+          key={file.id}
+          className='flex items-center gap-2 rounded-md bg-muted/50 px-2 py-1 text-xs'
+        >
+          {getFileIcon(file.media_type)}
+          <span className='flex-1 truncate'>{file.filename}</span>
+          <span className='text-muted-foreground'>
+            {formatFileSize(file.size)}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+})
+
+FileAttachmentDisplay.displayName = 'FileAttachmentDisplay'
+
 // Smooth streaming text component with typewriter effect
 interface SmoothStreamingTextProps {
   content: string
@@ -490,6 +531,9 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 <div className='whitespace-pre-wrap break-words font-normal text-base text-foreground leading-relaxed'>
                   <WordWrap text={message.content} />
                 </div>
+                {message.fileAttachments && message.fileAttachments.length > 0 && (
+                  <FileAttachmentDisplay fileAttachments={message.fileAttachments} />
+                )}
               </div>
               {hasCheckpoints && (
                 <div className='mt-1 flex justify-end'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 829f17c81e0..b9adc901def 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -15,8 +15,26 @@ import { cn } from '@/lib/utils'
 import { useSession } from '@/lib/auth-client'
 import { useCopilotStore } from '@/stores/copilot/store'
 
+interface MessageFileAttachment {
+  id: string
+  s3_key: string
+  filename: string
+  media_type: string
+  size: number
+}
+
+interface AttachedFile {
+  id: string
+  name: string
+  size: number
+  type: string
+  path: string
+  key?: string // Add key field to store the actual S3 key
+  uploading: boolean
+}
+
 interface UserInputProps {
-  onSubmit: (message: string) => void
+  onSubmit: (message: string, fileAttachments?: MessageFileAttachment[]) => void
   onAbort?: () => void
   disabled?: boolean
   isLoading?: boolean
@@ -29,15 +47,6 @@ interface UserInputProps {
   onChange?: (value: string) => void // Callback when value changes
 }
 
-interface AttachedFile {
-  id: string
-  name: string
-  size: number
-  type: string
-  path: string
-  uploading?: boolean
-}
-
 interface UserInputRef {
   focus: () => void
 }
@@ -96,13 +105,26 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       const trimmedMessage = message.trim()
       if (!trimmedMessage || disabled || isLoading) return
 
-      onSubmit(trimmedMessage)
-      // Clear the message after submit
+      // Convert attached files to the format expected by the API
+      const fileAttachments = attachedFiles
+        .filter(f => !f.uploading && f.key) // Only include successfully uploaded files with keys
+        .map(f => ({
+          id: f.id,
+          s3_key: f.key!, // Use the actual S3 key stored from the upload response
+          filename: f.name,
+          media_type: f.type,
+          size: f.size,
+        }))
+
+      onSubmit(trimmedMessage, fileAttachments)
+      
+      // Clear the message and files after submit
       if (controlledValue !== undefined) {
         onControlledChange?.('')
       } else {
         setInternalMessage('')
       }
+      setAttachedFiles([])
     }
 
     const handleAbort = () => {
@@ -137,10 +159,9 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
       const file = files[0]
       const userId = session?.user?.id
-      const chatId = currentChat?.id
 
-      if (!userId || !chatId) {
-        console.error('User ID or Chat ID not available for file upload')
+      if (!userId) {
+        console.error('User ID not available for file upload')
         return
       }
 
@@ -168,7 +189,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             contentType: file.type,
             fileSize: file.size,
             userId,
-            chatId,
           }),
         })
 
@@ -203,6 +223,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               ? {
                   ...f,
                   path: presignedData.fileInfo.path,
+                  key: presignedData.fileInfo.key, // Store the actual S3 key
                   uploading: false,
                 }
               : f
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index d2628e3a1e6..9b56b710957 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -251,12 +251,12 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
 
   // Handle message submission
   const handleSubmit = useCallback(
-    async (query: string) => {
+    async (query: string, fileAttachments?: any[]) => {
       if (!query || isSendingMessage || !activeWorkflowId) return
 
       try {
-        await sendMessage(query, { stream: true })
-        logger.info('Sent message:', query)
+        await sendMessage(query, { stream: true, fileAttachments })
+        logger.info('Sent message:', query, fileAttachments ? `with ${fileAttachments.length} attachments` : '')
       } catch (error) {
         logger.error('Failed to send message:', error)
       }
diff --git a/apps/sim/lib/copilot/api.ts b/apps/sim/lib/copilot/api.ts
index 418073e8e38..57f6bcb9f04 100644
--- a/apps/sim/lib/copilot/api.ts
+++ b/apps/sim/lib/copilot/api.ts
@@ -37,6 +37,17 @@ export interface CopilotChat {
   updatedAt: Date
 }
 
+/**
+ * File attachment interface for message requests
+ */
+export interface MessageFileAttachment {
+  id: string
+  s3_key: string
+  filename: string
+  media_type: string
+  size: number
+}
+
 /**
  * Request interface for sending messages
  */
@@ -49,6 +60,7 @@ export interface SendMessageRequest {
   createNewChat?: boolean
   stream?: boolean
   implicitFeedback?: string
+  fileAttachments?: MessageFileAttachment[]
   abortSignal?: AbortSignal
 }
 
diff --git a/apps/sim/lib/uploads/s3/s3-client.ts b/apps/sim/lib/uploads/s3/s3-client.ts
index 420bd660dc3..1d00d2206a4 100644
--- a/apps/sim/lib/uploads/s3/s3-client.ts
+++ b/apps/sim/lib/uploads/s3/s3-client.ts
@@ -229,6 +229,30 @@ export async function downloadFromS3(key: string) {
   })
 }
 
+/**
+ * Download a file from S3 with custom bucket configuration
+ * @param key S3 object key
+ * @param customConfig Custom S3 configuration
+ * @returns File buffer
+ */
+export async function downloadFromS3WithConfig(key: string, customConfig: CustomS3Config) {
+  const command = new GetObjectCommand({
+    Bucket: customConfig.bucket,
+    Key: key,
+  })
+
+  const response = await getS3Client().send(command)
+  const stream = response.Body as any
+
+  // Convert stream to buffer
+  return new Promise<Buffer>((resolve, reject) => {
+    const chunks: Buffer[] = []
+    stream.on('data', (chunk: Buffer) => chunks.push(chunk))
+    stream.on('end', () => resolve(Buffer.concat(chunks)))
+    stream.on('error', reject)
+  })
+}
+
 /**
  * Delete a file from S3
  * @param key S3 object key
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index d49749b1292..1b64cbdaa10 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -1752,6 +1752,7 @@ export const useCopilotStore = create<CopilotStore>()(
             mode,
             createNewChat: !currentChat,
             stream,
+            fileAttachments: options.fileAttachments,
             abortSignal: abortController.signal,
           })
 
diff --git a/apps/sim/stores/copilot/types.ts b/apps/sim/stores/copilot/types.ts
index 7175515381c..82a6f45ed2e 100644
--- a/apps/sim/stores/copilot/types.ts
+++ b/apps/sim/stores/copilot/types.ts
@@ -60,6 +60,17 @@ export interface ToolCallContentBlock {
 
 export type ContentBlock = TextContentBlock | ToolCallContentBlock
 
+/**
+ * File attachment interface for copilot messages
+ */
+export interface MessageFileAttachment {
+  id: string
+  s3_key: string
+  filename: string
+  media_type: string
+  size: number
+}
+
 /**
  * Copilot message interface
  */
@@ -71,6 +82,7 @@ export interface CopilotMessage {
   citations?: Citation[]
   toolCalls?: CopilotToolCall[]
   contentBlocks?: ContentBlock[] // New chronological content structure
+  fileAttachments?: MessageFileAttachment[] // File attachments
 }
 
 /**
@@ -132,6 +144,7 @@ export interface CreateChatOptions {
  */
 export interface SendMessageOptions {
   stream?: boolean
+  fileAttachments?: MessageFileAttachment[]
 }
 
 /**

From c629a1c103aa3e4a1b1da67bd7b378b008987f85 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 13:55:06 -0700
Subject: [PATCH 03/10] File shows in message

---
 apps/sim/app/api/copilot/chat/route.ts        | 61 +++----------------
 .../api/copilot/chat/update-messages/route.ts |  9 +++
 apps/sim/stores/copilot/store.ts              | 11 ++--
 3 files changed, 24 insertions(+), 57 deletions(-)

diff --git a/apps/sim/app/api/copilot/chat/route.ts b/apps/sim/app/api/copilot/chat/route.ts
index 30312025c4f..f2613b83a4a 100644
--- a/apps/sim/app/api/copilot/chat/route.ts
+++ b/apps/sim/app/api/copilot/chat/route.ts
@@ -332,64 +332,21 @@ export async function POST(req: NextRequest) {
       endpoint: `${SIM_AGENT_API_URL}/api/chat-completion-streaming`,
     })
 
-    // Prepare the request payload
-    const simAgentPayload = {
-      messages,
-      workflowId,
-      userId: authenticatedUserId,
-      stream: stream,
-      streamToolCalls: true,
-      mode: mode,
-      ...(session?.user?.name && { userName: session.user.name }),
-    }
-
-    // Log the complete request payload (with truncated message content for readability)
-    logger.info(`[${tracker.requestId}] Full sim agent request payload:`, {
-      ...simAgentPayload,
-      messages: messages.map((msg, index) => ({
-        role: msg.role,
-        contentType: Array.isArray(msg.content) ? 'array' : 'string',
-        contentLength: Array.isArray(msg.content) 
-          ? msg.content.length 
-          : typeof msg.content === 'string' 
-            ? msg.content.length 
-            : 0,
-        contentPreview: Array.isArray(msg.content)
-          ? msg.content.map(item => ({
-              type: item.type,
-              ...(item.type === 'text' && { 
-                textLength: item.text?.length || 0, 
-                textPreview: item.text?.substring(0, 100) + (item.text?.length > 100 ? '...' : '') 
-              }),
-              ...(item.type === 'image' && { 
-                mediaType: item.source?.media_type,
-                sourceType: item.source?.type,
-                hasBase64Data: !!item.source?.data,
-                base64DataLength: item.source?.data?.length || 0,
-                base64Preview: item.source?.data ? item.source.data.substring(0, 50) + '...' : 'NO DATA'
-              }),
-              ...(item.type === 'document' && { 
-                mediaType: item.source?.media_type,
-                sourceType: item.source?.type,
-                hasBase64Data: !!item.source?.data,
-                base64DataLength: item.source?.data?.length || 0,
-                base64Preview: item.source?.data ? item.source.data.substring(0, 50) + '...' : 'NO DATA'
-              }),
-            }))
-          : typeof msg.content === 'string'
-            ? msg.content.substring(0, 200) + (msg.content.length > 200 ? '...' : '')
-            : 'non-string content',
-        messageIndex: index,
-      })),
-    })
-
     const simAgentResponse = await fetch(`${SIM_AGENT_API_URL}/api/chat-completion-streaming`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         ...(SIM_AGENT_API_KEY && { 'x-api-key': SIM_AGENT_API_KEY }),
       },
-      body: JSON.stringify(simAgentPayload),
+      body: JSON.stringify({
+        messages,
+        workflowId,
+        userId: authenticatedUserId,
+        stream: stream,
+        streamToolCalls: true,
+        mode: mode,
+        ...(session?.user?.name && { userName: session.user.name }),
+      }),
     })
 
     if (!simAgentResponse.ok) {
diff --git a/apps/sim/app/api/copilot/chat/update-messages/route.ts b/apps/sim/app/api/copilot/chat/update-messages/route.ts
index c7af5952516..0b1e65338d8 100644
--- a/apps/sim/app/api/copilot/chat/update-messages/route.ts
+++ b/apps/sim/app/api/copilot/chat/update-messages/route.ts
@@ -24,6 +24,15 @@ const UpdateMessagesSchema = z.object({
       timestamp: z.string(),
       toolCalls: z.array(z.any()).optional(),
       contentBlocks: z.array(z.any()).optional(),
+      fileAttachments: z.array(
+        z.object({
+          id: z.string(),
+          s3_key: z.string(),
+          filename: z.string(),
+          media_type: z.string(),
+          size: z.number(),
+        })
+      ).optional(),
     })
   ),
 })
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 1b64cbdaa10..c29d49bd2c6 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -7,7 +7,7 @@ import { toolRegistry } from '@/lib/copilot/tools'
 import { createLogger } from '@/lib/logs/console/logger'
 import { COPILOT_TOOL_DISPLAY_NAMES } from '@/stores/constants'
 import { COPILOT_TOOL_IDS } from './constants'
-import type { CopilotMessage, CopilotStore, WorkflowCheckpoint } from './types'
+import type { CopilotMessage, CopilotStore, WorkflowCheckpoint, MessageFileAttachment } from './types'
 
 const logger = createLogger('CopilotStore')
 
@@ -143,14 +143,15 @@ const initialState = {
 }
 
 /**
- * Helper function to create a new user messagenow let
+ * Helper function to create a new user message
  */
-function createUserMessage(content: string): CopilotMessage {
+function createUserMessage(content: string, fileAttachments?: MessageFileAttachment[]): CopilotMessage {
   return {
     id: crypto.randomUUID(),
     role: 'user',
     content,
     timestamp: new Date().toISOString(),
+    ...(fileAttachments && fileAttachments.length > 0 && { fileAttachments }),
   }
 }
 
@@ -1685,7 +1686,7 @@ export const useCopilotStore = create<CopilotStore>()(
       // Send a message
       sendMessage: async (message: string, options = {}) => {
         const { workflowId, currentChat, mode, revertState } = get()
-        const { stream = true } = options
+        const { stream = true, fileAttachments } = options
 
         if (!workflowId) {
           logger.warn('Cannot send message: no workflow ID set')
@@ -1696,7 +1697,7 @@ export const useCopilotStore = create<CopilotStore>()(
         const abortController = new AbortController()
         set({ isSendingMessage: true, error: null, abortController })
 
-        const userMessage = createUserMessage(message)
+        const userMessage = createUserMessage(message, fileAttachments)
         const streamingMessage = createStreamingMessage()
 
         // Handle message history rewriting if we're in revert state

From e10b384b978f0da78a682018d877ff08ab4a7580 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 14:00:04 -0700
Subject: [PATCH 04/10] Make files clickable

---
 .../app/api/files/serve/[...path]/route.ts    | 32 +++++++++++++++++--
 .../copilot-message/copilot-message.tsx       | 16 ++++++++--
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/api/files/serve/[...path]/route.ts b/apps/sim/app/api/files/serve/[...path]/route.ts
index 810bd58e108..8c5b77027ed 100644
--- a/apps/sim/app/api/files/serve/[...path]/route.ts
+++ b/apps/sim/app/api/files/serve/[...path]/route.ts
@@ -58,7 +58,11 @@ export async function GET(
     if (isUsingCloudStorage() || isCloudPath) {
       // Extract the actual key (remove 's3/' or 'blob/' prefix if present)
       const cloudKey = isCloudPath ? path.slice(1).join('/') : fullPath
-      return await handleCloudProxy(cloudKey)
+      
+      // Get bucket type from query parameter
+      const bucketType = request.nextUrl.searchParams.get('bucket')
+      
+      return await handleCloudProxy(cloudKey, bucketType)
     }
 
     // Use local handler for local files
@@ -152,12 +156,34 @@ async function downloadKBFile(cloudKey: string): Promise<Buffer> {
 /**
  * Proxy cloud file through our server
  */
-async function handleCloudProxy(cloudKey: string): Promise<NextResponse> {
+async function handleCloudProxy(cloudKey: string, bucketType?: string | null): Promise<NextResponse> {
   try {
     // Check if this is a KB file (starts with 'kb/')
     const isKBFile = cloudKey.startsWith('kb/')
 
-    const fileBuffer = isKBFile ? await downloadKBFile(cloudKey) : await downloadFile(cloudKey)
+    let fileBuffer: Buffer
+    
+    if (isKBFile) {
+      fileBuffer = await downloadKBFile(cloudKey)
+    } else if (bucketType === 'copilot') {
+      // Download from copilot-specific bucket
+      const storageProvider = getStorageProvider()
+      
+      if (storageProvider === 's3') {
+        const { downloadFromS3WithConfig } = await import('@/lib/uploads/s3/s3-client')
+        const { S3_COPILOT_CONFIG } = await import('@/lib/uploads/setup')
+        fileBuffer = await downloadFromS3WithConfig(cloudKey, S3_COPILOT_CONFIG)
+      } else if (storageProvider === 'blob') {
+        // For Azure Blob, use the default downloadFile for now
+        // TODO: Add downloadFromBlobWithConfig when needed
+        fileBuffer = await downloadFile(cloudKey)
+      } else {
+        fileBuffer = await downloadFile(cloudKey)
+      }
+    } else {
+      // Default bucket
+      fileBuffer = await downloadFile(cloudKey)
+    }
 
     // Extract the original filename from the key (last part after last /)
     const originalFilename = cloudKey.split('/').pop() || 'download'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 5556c65a33f..49995d720cc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -59,15 +59,27 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
     return <FileText className='h-4 w-4' />
   }
 
+  const handleFileClick = (file: any) => {
+    // Construct the serve URL for the file with bucket type parameter
+    const serveUrl = `/api/files/serve/s3/${encodeURIComponent(file.s3_key)}?bucket=copilot`
+    
+    // Open the file in a new tab
+    window.open(serveUrl, '_blank')
+  }
+
   return (
     <div className='mt-2 space-y-1'>
       {fileAttachments.map((file) => (
         <div
           key={file.id}
-          className='flex items-center gap-2 rounded-md bg-muted/50 px-2 py-1 text-xs'
+          className='flex items-center gap-2 rounded-md bg-muted/50 px-2 py-1 text-xs cursor-pointer hover:bg-muted/70 transition-colors'
+          onClick={() => handleFileClick(file)}
+          title={`Click to view ${file.filename}`}
         >
           {getFileIcon(file.media_type)}
-          <span className='flex-1 truncate'>{file.filename}</span>
+          <span className='flex-1 truncate text-primary underline decoration-dotted underline-offset-2'>
+            {file.filename}
+          </span>
           <span className='text-muted-foreground'>
             {formatFileSize(file.size)}
           </span>

From ba057bc77534e71122f11da33fd40ea5d97d9815 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 14:24:33 -0700
Subject: [PATCH 05/10] User input image

---
 .../copilot-message/copilot-message.tsx       |  78 +++++++++---
 .../components/user-input/user-input.tsx      | 115 ++++++++++++++++--
 2 files changed, 161 insertions(+), 32 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 49995d720cc..ae9c9ea4180 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -45,18 +45,24 @@ interface FileAttachmentDisplayProps {
 
 const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayProps) => {
   const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes'
+    if (bytes === 0) return '0 B'
     const k = 1024
-    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const sizes = ['B', 'KB', 'MB', 'GB']
     const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+    return Math.round(bytes / Math.pow(k, i) * 10) / 10 + ' ' + sizes[i]
   }
 
   const getFileIcon = (mediaType: string) => {
     if (mediaType.startsWith('image/')) {
-      return <Image className='h-4 w-4' />
+      return <Image className='h-5 w-5 text-muted-foreground' />
     }
-    return <FileText className='h-4 w-4' />
+    if (mediaType.includes('pdf')) {
+      return <FileText className='h-5 w-5 text-red-500' />
+    }
+    if (mediaType.includes('text') || mediaType.includes('json') || mediaType.includes('xml')) {
+      return <FileText className='h-5 w-5 text-blue-500' />
+    }
+    return <FileText className='h-5 w-5 text-muted-foreground' />
   }
 
   const handleFileClick = (file: any) => {
@@ -67,25 +73,50 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
     window.open(serveUrl, '_blank')
   }
 
+  const isImageFile = (mediaType: string) => {
+    return mediaType.startsWith('image/')
+  }
+
   return (
-    <div className='mt-2 space-y-1'>
+    <>
       {fileAttachments.map((file) => (
         <div
           key={file.id}
-          className='flex items-center gap-2 rounded-md bg-muted/50 px-2 py-1 text-xs cursor-pointer hover:bg-muted/70 transition-colors'
+          className='group relative w-16 h-16 rounded-md border border-border/50 bg-muted/20 hover:bg-muted/40 cursor-pointer transition-all overflow-hidden'
           onClick={() => handleFileClick(file)}
-          title={`Click to view ${file.filename}`}
+          title={`${file.filename} (${formatFileSize(file.size)})`}
         >
-          {getFileIcon(file.media_type)}
-          <span className='flex-1 truncate text-primary underline decoration-dotted underline-offset-2'>
-            {file.filename}
-          </span>
-          <span className='text-muted-foreground'>
-            {formatFileSize(file.size)}
-          </span>
+          {isImageFile(file.media_type) ? (
+            // For images, show actual thumbnail
+            <img 
+              src={`/api/files/serve/s3/${encodeURIComponent(file.s3_key)}?bucket=copilot`}
+              alt={file.filename}
+              className='w-full h-full object-cover'
+              onError={(e) => {
+                // If image fails to load, replace with icon
+                const target = e.target as HTMLImageElement
+                target.style.display = 'none'
+                const parent = target.parentElement
+                if (parent) {
+                  const iconContainer = document.createElement('div')
+                  iconContainer.className = 'flex items-center justify-center w-full h-full bg-background/50'
+                  iconContainer.innerHTML = '<svg class="h-5 w-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>'
+                  parent.appendChild(iconContainer)
+                }
+              }}
+            />
+          ) : (
+            // For other files, show icon centered
+            <div className='flex items-center justify-center w-full h-full bg-background/50'>
+              {getFileIcon(file.media_type)}
+            </div>
+          )}
+          
+          {/* Hover overlay effect */}
+          <div className='absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none' />
         </div>
       ))}
-    </div>
+    </>
   )
 })
 
@@ -534,8 +565,18 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     if (isUser) {
       return (
         <div className='w-full py-2'>
+          {/* File attachments displayed above the message, completely separate from message box width */}
+          {message.fileAttachments && message.fileAttachments.length > 0 && (
+            <div className='flex justify-end mb-1'>
+              <div className='flex flex-wrap gap-1.5'>
+                <FileAttachmentDisplay fileAttachments={message.fileAttachments} />
+              </div>
+            </div>
+          )}
+          
           <div className='flex justify-end'>
             <div className='max-w-[80%]'>
+              {/* Message content in purple box */}
               <div
                 className='rounded-[10px] px-3 py-2'
                 style={{ backgroundColor: 'rgba(128, 47, 255, 0.08)' }}
@@ -543,10 +584,9 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 <div className='whitespace-pre-wrap break-words font-normal text-base text-foreground leading-relaxed'>
                   <WordWrap text={message.content} />
                 </div>
-                {message.fileAttachments && message.fileAttachments.length > 0 && (
-                  <FileAttachmentDisplay fileAttachments={message.fileAttachments} />
-                )}
               </div>
+              
+              {/* Checkpoints below message */}
               {hasCheckpoints && (
                 <div className='mt-1 flex justify-end'>
                   {showRestoreConfirmation ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index b9adc901def..88c1affb359 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -8,7 +8,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { ArrowUp, Loader2, MessageCircle, Package, Paperclip, X } from 'lucide-react'
+import { ArrowUp, FileText, Image, Loader2, MessageCircle, Package, Paperclip, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { cn } from '@/lib/utils'
@@ -31,6 +31,7 @@ interface AttachedFile {
   path: string
   key?: string // Add key field to store the actual S3 key
   uploading: boolean
+  previewUrl?: string // For local preview of images before upload
 }
 
 interface UserInputProps {
@@ -101,6 +102,17 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [message])
 
+    // Cleanup preview URLs on unmount
+    useEffect(() => {
+      return () => {
+        attachedFiles.forEach(f => {
+          if (f.previewUrl) {
+            URL.revokeObjectURL(f.previewUrl)
+          }
+        })
+      }
+    }, [])
+
     const handleSubmit = () => {
       const trimmedMessage = message.trim()
       if (!trimmedMessage || disabled || isLoading) return
@@ -118,6 +130,13 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
       onSubmit(trimmedMessage, fileAttachments)
       
+      // Clean up preview URLs before clearing
+      attachedFiles.forEach(f => {
+        if (f.previewUrl) {
+          URL.revokeObjectURL(f.previewUrl)
+        }
+      })
+      
       // Clear the message and files after submit
       if (controlledValue !== undefined) {
         onControlledChange?.('')
@@ -165,6 +184,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         return
       }
 
+      // Create a preview URL for images
+      let previewUrl: string | undefined
+      if (file.type.startsWith('image/')) {
+        previewUrl = URL.createObjectURL(file)
+      }
+
       // Create a temporary file entry with uploading state
       const tempFile: AttachedFile = {
         id: crypto.randomUUID(),
@@ -173,6 +198,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         type: file.type,
         path: '',
         uploading: true,
+        previewUrl,
       }
 
       setAttachedFiles(prev => [...prev, tempFile])
@@ -242,9 +268,25 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     }
 
     const removeFile = (fileId: string) => {
+      // Clean up preview URL if it exists
+      const file = attachedFiles.find(f => f.id === fileId)
+      if (file?.previewUrl) {
+        URL.revokeObjectURL(file.previewUrl)
+      }
       setAttachedFiles(prev => prev.filter(f => f.id !== fileId))
     }
 
+    const handleFileClick = (file: AttachedFile) => {
+      // If file has been uploaded and has an S3 key, open the S3 URL
+      if (file.key) {
+        const serveUrl = `/api/files/serve/s3/${encodeURIComponent(file.key)}?bucket=copilot`
+        window.open(serveUrl, '_blank')
+      } else if (file.previewUrl) {
+        // If file hasn't been uploaded yet but has a preview URL, open that
+        window.open(file.previewUrl, '_blank')
+      }
+    }
+
     const formatFileSize = (bytes: number) => {
       if (bytes === 0) return '0 Bytes'
       const k = 1024
@@ -253,6 +295,23 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
     }
 
+    const isImageFile = (type: string) => {
+      return type.startsWith('image/')
+    }
+
+    const getFileIcon = (mediaType: string) => {
+      if (mediaType.startsWith('image/')) {
+        return <Image className='h-5 w-5 text-muted-foreground' />
+      }
+      if (mediaType.includes('pdf')) {
+        return <FileText className='h-5 w-5 text-red-500' />
+      }
+      if (mediaType.includes('text') || mediaType.includes('json') || mediaType.includes('xml')) {
+        return <FileText className='h-5 w-5 text-blue-500' />
+      }
+      return <FileText className='h-5 w-5 text-muted-foreground' />
+    }
+
     const canSubmit = message.trim().length > 0 && !disabled && !isLoading
     const showAbortButton = isLoading && onAbort
 
@@ -273,31 +332,61 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     return (
       <div className={cn('relative flex-none pb-4', className)}>
         <div className='rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] p-2 shadow-xs dark:border-[#414141] dark:bg-[#202020]'>
-          {/* Attached Files Display */}
+          {/* Attached Files Display with Thumbnails */}
           {attachedFiles.length > 0 && (
-            <div className='mb-2 space-y-1'>
+            <div className='mb-2 flex flex-wrap gap-1.5'>
               {attachedFiles.map((file) => (
                 <div
                   key={file.id}
-                  className='flex items-center gap-2 rounded-md bg-secondary/50 px-2 py-1 text-xs'
+                  className='group relative w-16 h-16 rounded-md border border-border/50 bg-muted/20 hover:bg-muted/40 cursor-pointer transition-all overflow-hidden'
+                  title={`${file.name} (${formatFileSize(file.size)})`}
+                  onClick={() => handleFileClick(file)}
                 >
-                  <Paperclip className='h-3 w-3 text-muted-foreground' />
-                  <span className='flex-1 truncate'>{file.name}</span>
-                  <span className='text-muted-foreground'>
-                    {formatFileSize(file.size)}
-                  </span>
-                  {file.uploading ? (
-                    <Loader2 className='h-3 w-3 animate-spin text-muted-foreground' />
+                  {isImageFile(file.type) && file.previewUrl ? (
+                    // For images, show actual thumbnail
+                    <img 
+                      src={file.previewUrl}
+                      alt={file.name}
+                      className='w-full h-full object-cover'
+                    />
+                  ) : isImageFile(file.type) && file.key ? (
+                    // For uploaded images without preview URL, use S3 URL
+                    <img 
+                      src={`/api/files/serve/s3/${encodeURIComponent(file.key)}?bucket=copilot`}
+                      alt={file.name}
+                      className='w-full h-full object-cover'
+                    />
                   ) : (
+                    // For other files, show icon centered
+                    <div className='flex items-center justify-center w-full h-full bg-background/50'>
+                      {getFileIcon(file.type)}
+                    </div>
+                  )}
+                  
+                  {/* Loading overlay */}
+                  {file.uploading && (
+                    <div className='absolute inset-0 bg-black/50 flex items-center justify-center'>
+                      <Loader2 className='h-4 w-4 animate-spin text-white' />
+                    </div>
+                  )}
+                  
+                  {/* Remove button */}
+                  {!file.uploading && (
                     <Button
                       variant='ghost'
                       size='icon'
-                      onClick={() => removeFile(file.id)}
-                      className='h-4 w-4 hover:bg-destructive hover:text-destructive-foreground'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        removeFile(file.id)
+                      }}
+                      className='absolute top-0.5 right-0.5 h-5 w-5 bg-black/50 hover:bg-black/70 text-white opacity-0 group-hover:opacity-100 transition-opacity'
                     >
                       <X className='h-3 w-3' />
                     </Button>
                   )}
+                  
+                  {/* Hover overlay effect */}
+                  <div className='absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none' />
                 </div>
               ))}
             </div>

From 5055692c2d9f4ae5775eeae0fc1b6d60fe3fe3e0 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 15:28:37 -0700
Subject: [PATCH 06/10] Persist thumbnails

---
 apps/sim/stores/copilot/store.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index c29d49bd2c6..6e2c7269cec 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -214,6 +214,7 @@ function validateMessagesForLLM(messages: CopilotMessage[]): any[] {
         ...(msg.toolCalls && msg.toolCalls.length > 0 && { toolCalls: msg.toolCalls }),
         ...(msg.contentBlocks &&
           msg.contentBlocks.length > 0 && { contentBlocks: msg.contentBlocks }),
+        ...(msg.fileAttachments && msg.fileAttachments.length > 0 && { fileAttachments: msg.fileAttachments }),
       }
     })
     .filter((msg) => {

From 81954844df6baf9ef8c3c37298f2c0fbe35a6a1f Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 16:37:05 -0700
Subject: [PATCH 07/10] Drag and drop files

---
 .../components/user-input/user-input.tsx      | 236 +++++++++++-------
 1 file changed, 150 insertions(+), 86 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 88c1affb359..ba71525ed02 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -71,6 +71,9 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
   ) => {
     const [internalMessage, setInternalMessage] = useState('')
     const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([])
+    // Drag and drop state
+    const [isDragging, setIsDragging] = useState(false)
+    const [dragCounter, setDragCounter] = useState(0)
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
     
@@ -113,6 +116,139 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [])
 
+    // Drag and drop handlers
+    const handleDragEnter = (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragCounter((prev) => {
+        const newCount = prev + 1
+        if (newCount === 1) {
+          setIsDragging(true)
+        }
+        return newCount
+      })
+    }
+
+    const handleDragLeave = (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragCounter((prev) => {
+        const newCount = prev - 1
+        if (newCount === 0) {
+          setIsDragging(false)
+        }
+        return newCount
+      })
+    }
+
+    const handleDragOver = (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      // Add visual feedback for valid drop zone
+      e.dataTransfer.dropEffect = 'copy'
+    }
+
+    const handleDrop = async (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragging(false)
+      setDragCounter(0)
+
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        await processFiles(e.dataTransfer.files)
+      }
+    }
+
+    // Process dropped or selected files
+    const processFiles = async (fileList: FileList) => {
+      const userId = session?.user?.id
+
+      if (!userId) {
+        console.error('User ID not available for file upload')
+        return
+      }
+
+      // Process files one by one
+      for (const file of Array.from(fileList)) {
+        // Create a preview URL for images
+        let previewUrl: string | undefined
+        if (file.type.startsWith('image/')) {
+          previewUrl = URL.createObjectURL(file)
+        }
+
+        // Create a temporary file entry with uploading state
+        const tempFile: AttachedFile = {
+          id: crypto.randomUUID(),
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          path: '',
+          uploading: true,
+          previewUrl,
+        }
+
+        setAttachedFiles(prev => [...prev, tempFile])
+
+        try {
+          // Request presigned URL
+          const presignedResponse = await fetch('/api/files/presigned?type=copilot', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              fileName: file.name,
+              contentType: file.type,
+              fileSize: file.size,
+              userId,
+            }),
+          })
+
+          if (!presignedResponse.ok) {
+            throw new Error('Failed to get presigned URL')
+          }
+
+          const presignedData = await presignedResponse.json()
+
+          // Upload file to S3
+          console.log('Uploading to S3:', presignedData.presignedUrl)
+          const uploadResponse = await fetch(presignedData.presignedUrl, {
+            method: 'PUT',
+            headers: {
+              'Content-Type': file.type,
+            },
+            body: file,
+          })
+
+          console.log('S3 Upload response status:', uploadResponse.status)
+          
+          if (!uploadResponse.ok) {
+            const errorText = await uploadResponse.text()
+            console.error('S3 Upload failed:', errorText)
+            throw new Error(`Failed to upload file: ${uploadResponse.status} ${errorText}`)
+          }
+
+          // Update file entry with success
+          setAttachedFiles(prev =>
+            prev.map(f =>
+              f.id === tempFile.id
+                ? {
+                    ...f,
+                    path: presignedData.fileInfo.path,
+                    key: presignedData.fileInfo.key, // Store the actual S3 key
+                    uploading: false,
+                  }
+                : f
+            )
+          )
+        } catch (error) {
+          console.error('File upload failed:', error)
+          // Remove failed upload
+          setAttachedFiles(prev => prev.filter(f => f.id !== tempFile.id))
+        }
+      }
+    }
+
     const handleSubmit = () => {
       const trimmedMessage = message.trim()
       if (!trimmedMessage || disabled || isLoading) return
@@ -176,90 +312,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       const files = e.target.files
       if (!files || files.length === 0) return
 
-      const file = files[0]
-      const userId = session?.user?.id
-
-      if (!userId) {
-        console.error('User ID not available for file upload')
-        return
-      }
-
-      // Create a preview URL for images
-      let previewUrl: string | undefined
-      if (file.type.startsWith('image/')) {
-        previewUrl = URL.createObjectURL(file)
-      }
-
-      // Create a temporary file entry with uploading state
-      const tempFile: AttachedFile = {
-        id: crypto.randomUUID(),
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        path: '',
-        uploading: true,
-        previewUrl,
-      }
-
-      setAttachedFiles(prev => [...prev, tempFile])
-
-      try {
-        // Request presigned URL
-        const presignedResponse = await fetch('/api/files/presigned?type=copilot', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            fileName: file.name,
-            contentType: file.type,
-            fileSize: file.size,
-            userId,
-          }),
-        })
-
-        if (!presignedResponse.ok) {
-          throw new Error('Failed to get presigned URL')
-        }
-
-        const presignedData = await presignedResponse.json()
-
-        // Upload file to S3
-        console.log('Uploading to S3:', presignedData.presignedUrl)
-        const uploadResponse = await fetch(presignedData.presignedUrl, {
-          method: 'PUT',
-          headers: {
-            'Content-Type': file.type,
-          },
-          body: file,
-        })
-
-        console.log('S3 Upload response status:', uploadResponse.status)
-        
-        if (!uploadResponse.ok) {
-          const errorText = await uploadResponse.text()
-          console.error('S3 Upload failed:', errorText)
-          throw new Error(`Failed to upload file: ${uploadResponse.status} ${errorText}`)
-        }
-
-        // Update file entry with success
-        setAttachedFiles(prev =>
-          prev.map(f =>
-            f.id === tempFile.id
-              ? {
-                  ...f,
-                  path: presignedData.fileInfo.path,
-                  key: presignedData.fileInfo.key, // Store the actual S3 key
-                  uploading: false,
-                }
-              : f
-          )
-        )
-      } catch (error) {
-        console.error('File upload failed:', error)
-        // Remove failed upload
-        setAttachedFiles(prev => prev.filter(f => f.id !== tempFile.id))
-      }
+      await processFiles(files)
 
       // Clear the input
       if (fileInputRef.current) {
@@ -331,7 +384,16 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
     return (
       <div className={cn('relative flex-none pb-4', className)}>
-        <div className='rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] p-2 shadow-xs dark:border-[#414141] dark:bg-[#202020]'>
+        <div 
+          className={cn(
+            'rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] p-2 shadow-xs dark:border-[#414141] dark:bg-[#202020] transition-all duration-200',
+            isDragging && 'border-[#802FFF] bg-purple-50/50 dark:bg-purple-950/20 dark:border-[#802FFF]'
+          )}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+        >
           {/* Attached Files Display with Thumbnails */}
           {attachedFiles.length > 0 && (
             <div className='mb-2 flex flex-wrap gap-1.5'>
@@ -398,7 +460,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             value={message}
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
-            placeholder={placeholder}
+            placeholder={isDragging ? 'Drop files here...' : placeholder}
             disabled={disabled}
             rows={1}
             className='mb-2 min-h-[32px] w-full resize-none overflow-hidden border-0 bg-transparent px-[2px] py-1 text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
@@ -472,6 +534,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             onChange={handleFileChange}
             className='hidden'
             accept='.pdf,.doc,.docx,.txt,.md,.png,.jpg,.jpeg,.gif,.svg'
+            multiple
           />
         </div>
       </div>
@@ -483,3 +546,4 @@ UserInput.displayName = 'UserInput'
 
 export { UserInput }
 export type { UserInputRef }
+

From 060bc0413feda5f146ae950ac9bfd896ad90c74e Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 16:42:20 -0700
Subject: [PATCH 08/10] Lint

---
 apps/sim/app/api/copilot/chat/file-utils.ts   |  8 +-
 apps/sim/app/api/copilot/chat/route.ts        | 32 ++++----
 .../api/copilot/chat/update-messages/route.ts | 20 ++---
 apps/sim/app/api/files/presigned/route.ts     | 13 ++--
 .../app/api/files/serve/[...path]/route.ts    | 13 ++--
 .../copilot-message/copilot-message.tsx       | 40 ++++++----
 .../components/user-input/user-input.tsx      | 75 +++++++++++--------
 .../panel/components/copilot/copilot.tsx      |  6 +-
 apps/sim/stores/copilot/store.ts              | 15 +++-
 9 files changed, 133 insertions(+), 89 deletions(-)

diff --git a/apps/sim/app/api/copilot/chat/file-utils.ts b/apps/sim/app/api/copilot/chat/file-utils.ts
index 5092962a16c..48b81bafa6c 100644
--- a/apps/sim/app/api/copilot/chat/file-utils.ts
+++ b/apps/sim/app/api/copilot/chat/file-utils.ts
@@ -27,7 +27,7 @@ export const MIME_TYPE_MAPPING: Record<string, 'image' | 'document'> = {
   'image/gif': 'image',
   'image/webp': 'image',
   'image/svg+xml': 'image',
-  
+
   // Documents
   'application/pdf': 'document',
   'text/plain': 'document',
@@ -109,7 +109,7 @@ export function getMimeTypeFromExtension(extension: string): string {
     gif: 'image/gif',
     webp: 'image/webp',
     svg: 'image/svg+xml',
-    
+
     // Documents
     pdf: 'application/pdf',
     txt: 'text/plain',
@@ -127,6 +127,6 @@ export function getMimeTypeFromExtension(extension: string): string {
     md: 'text/markdown',
     rtf: 'application/rtf',
   }
-  
+
   return extensionMimeMap[extension.toLowerCase()] || 'application/octet-stream'
-} 
\ No newline at end of file
+}
diff --git a/apps/sim/app/api/copilot/chat/route.ts b/apps/sim/app/api/copilot/chat/route.ts
index f2613b83a4a..9f042f855ed 100644
--- a/apps/sim/app/api/copilot/chat/route.ts
+++ b/apps/sim/app/api/copilot/chat/route.ts
@@ -211,10 +211,10 @@ export async function POST(req: NextRequest) {
     }
 
     // Process file attachments if present
-    let processedFileContents: any[] = []
+    const processedFileContents: any[] = []
     if (fileAttachments && fileAttachments.length > 0) {
       logger.info(`[${tracker.requestId}] Processing ${fileAttachments.length} file attachments`)
-      
+
       for (const attachment of fileAttachments) {
         try {
           // Check if file type is supported
@@ -232,15 +232,20 @@ export async function POST(req: NextRequest) {
             // Fallback to generic downloadFile for other storage providers
             fileBuffer = await downloadFile(attachment.s3_key)
           }
-          
+
           // Convert to Anthropic format
           const fileContent = createAnthropicFileContent(fileBuffer, attachment.media_type)
           if (fileContent) {
             processedFileContents.push(fileContent)
-            logger.info(`[${tracker.requestId}] Processed file: ${attachment.filename} (${attachment.media_type})`)
+            logger.info(
+              `[${tracker.requestId}] Processed file: ${attachment.filename} (${attachment.media_type})`
+            )
           }
         } catch (error) {
-          logger.error(`[${tracker.requestId}] Failed to process file ${attachment.filename}:`, error)
+          logger.error(
+            `[${tracker.requestId}] Failed to process file ${attachment.filename}:`,
+            error
+          )
           // Continue processing other files
         }
       }
@@ -254,7 +259,7 @@ export async function POST(req: NextRequest) {
       if (msg.fileAttachments && msg.fileAttachments.length > 0) {
         // This is a message with file attachments - rebuild with content array
         const content: any[] = [{ type: 'text', text: msg.content }]
-        
+
         // Process file attachments for historical messages
         for (const attachment of msg.fileAttachments) {
           try {
@@ -272,10 +277,13 @@ export async function POST(req: NextRequest) {
               }
             }
           } catch (error) {
-            logger.error(`[${tracker.requestId}] Failed to process historical file ${attachment.filename}:`, error)
+            logger.error(
+              `[${tracker.requestId}] Failed to process historical file ${attachment.filename}:`,
+              error
+            )
           }
         }
-        
+
         messages.push({
           role: msg.role,
           content,
@@ -300,15 +308,13 @@ export async function POST(req: NextRequest) {
     // Add current user message with file attachments
     if (processedFileContents.length > 0) {
       // Message with files - use content array format
-      const content: any[] = [
-        { type: 'text', text: message }
-      ]
-      
+      const content: any[] = [{ type: 'text', text: message }]
+
       // Add file contents
       for (const fileContent of processedFileContents) {
         content.push(fileContent)
       }
-      
+
       messages.push({
         role: 'user',
         content,
diff --git a/apps/sim/app/api/copilot/chat/update-messages/route.ts b/apps/sim/app/api/copilot/chat/update-messages/route.ts
index 0b1e65338d8..598679e560c 100644
--- a/apps/sim/app/api/copilot/chat/update-messages/route.ts
+++ b/apps/sim/app/api/copilot/chat/update-messages/route.ts
@@ -24,15 +24,17 @@ const UpdateMessagesSchema = z.object({
       timestamp: z.string(),
       toolCalls: z.array(z.any()).optional(),
       contentBlocks: z.array(z.any()).optional(),
-      fileAttachments: z.array(
-        z.object({
-          id: z.string(),
-          s3_key: z.string(),
-          filename: z.string(),
-          media_type: z.string(),
-          size: z.number(),
-        })
-      ).optional(),
+      fileAttachments: z
+        .array(
+          z.object({
+            id: z.string(),
+            s3_key: z.string(),
+            filename: z.string(),
+            media_type: z.string(),
+            size: z.number(),
+          })
+        )
+        .optional(),
     })
   ),
 })
diff --git a/apps/sim/app/api/files/presigned/route.ts b/apps/sim/app/api/files/presigned/route.ts
index b8b9de12c99..a343d3a1eb3 100644
--- a/apps/sim/app/api/files/presigned/route.ts
+++ b/apps/sim/app/api/files/presigned/route.ts
@@ -157,16 +157,16 @@ async function handleS3PresignedUrl(
     }
 
     const safeFileName = fileName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9.-]/g, '_')
-    
+
     let prefix = ''
     if (uploadType === 'knowledge-base') {
       prefix = 'kb/'
     } else if (uploadType === 'chat') {
       prefix = 'chat/'
     } else if (uploadType === 'copilot') {
-      prefix = `${userId}/`  // Simplified to just userId, removed chatId
+      prefix = `${userId}/`
     }
-    
+
     const uniqueKey = `${prefix}${uuidv4()}-${safeFileName}`
 
     const sanitizedOriginalName = sanitizeFilenameForMetadata(fileName)
@@ -260,16 +260,16 @@ async function handleBlobPresignedUrl(
     }
 
     const safeFileName = fileName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9.-]/g, '_')
-    
+
     let prefix = ''
     if (uploadType === 'knowledge-base') {
       prefix = 'kb/'
     } else if (uploadType === 'chat') {
       prefix = 'chat/'
     } else if (uploadType === 'copilot') {
-      prefix = `${userId}/`  // Simplified to just userId, removed chatId
+      prefix = `${userId}/`
     }
-    
+
     const uniqueKey = `${prefix}${uuidv4()}-${safeFileName}`
 
     const blobServiceClient = getBlobServiceClient()
@@ -325,7 +325,6 @@ async function handleBlobPresignedUrl(
     } else if (uploadType === 'copilot') {
       uploadHeaders['x-ms-meta-purpose'] = 'copilot'
       uploadHeaders['x-ms-meta-userid'] = encodeURIComponent(userId || '')
-      // Removed chatId - no longer needed
     }
 
     return NextResponse.json({
diff --git a/apps/sim/app/api/files/serve/[...path]/route.ts b/apps/sim/app/api/files/serve/[...path]/route.ts
index 8c5b77027ed..c0c8973e0b2 100644
--- a/apps/sim/app/api/files/serve/[...path]/route.ts
+++ b/apps/sim/app/api/files/serve/[...path]/route.ts
@@ -58,10 +58,10 @@ export async function GET(
     if (isUsingCloudStorage() || isCloudPath) {
       // Extract the actual key (remove 's3/' or 'blob/' prefix if present)
       const cloudKey = isCloudPath ? path.slice(1).join('/') : fullPath
-      
+
       // Get bucket type from query parameter
       const bucketType = request.nextUrl.searchParams.get('bucket')
-      
+
       return await handleCloudProxy(cloudKey, bucketType)
     }
 
@@ -156,19 +156,22 @@ async function downloadKBFile(cloudKey: string): Promise<Buffer> {
 /**
  * Proxy cloud file through our server
  */
-async function handleCloudProxy(cloudKey: string, bucketType?: string | null): Promise<NextResponse> {
+async function handleCloudProxy(
+  cloudKey: string,
+  bucketType?: string | null
+): Promise<NextResponse> {
   try {
     // Check if this is a KB file (starts with 'kb/')
     const isKBFile = cloudKey.startsWith('kb/')
 
     let fileBuffer: Buffer
-    
+
     if (isKBFile) {
       fileBuffer = await downloadKBFile(cloudKey)
     } else if (bucketType === 'copilot') {
       // Download from copilot-specific bucket
       const storageProvider = getStorageProvider()
-      
+
       if (storageProvider === 's3') {
         const { downloadFromS3WithConfig } = await import('@/lib/uploads/s3/s3-client')
         const { S3_COPILOT_CONFIG } = await import('@/lib/uploads/setup')
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index ae9c9ea4180..87471b85d19 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -1,7 +1,17 @@
 'use client'
 
 import { type FC, memo, useEffect, useMemo, useRef, useState } from 'react'
-import { Check, Clipboard, FileText, Image, Loader2, RotateCcw, ThumbsDown, ThumbsUp, X } from 'lucide-react'
+import {
+  Check,
+  Clipboard,
+  FileText,
+  Image,
+  Loader2,
+  RotateCcw,
+  ThumbsDown,
+  ThumbsUp,
+  X,
+} from 'lucide-react'
 import { InlineToolCall } from '@/lib/copilot/tools/inline-tool-call'
 import { createLogger } from '@/lib/logs/console/logger'
 import { usePreviewStore } from '@/stores/copilot/preview-store'
@@ -49,7 +59,7 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
     const k = 1024
     const sizes = ['B', 'KB', 'MB', 'GB']
     const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return Math.round(bytes / Math.pow(k, i) * 10) / 10 + ' ' + sizes[i]
+    return `${Math.round((bytes / k ** i) * 10) / 10} ${sizes[i]}`
   }
 
   const getFileIcon = (mediaType: string) => {
@@ -68,7 +78,7 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
   const handleFileClick = (file: any) => {
     // Construct the serve URL for the file with bucket type parameter
     const serveUrl = `/api/files/serve/s3/${encodeURIComponent(file.s3_key)}?bucket=copilot`
-    
+
     // Open the file in a new tab
     window.open(serveUrl, '_blank')
   }
@@ -82,16 +92,16 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
       {fileAttachments.map((file) => (
         <div
           key={file.id}
-          className='group relative w-16 h-16 rounded-md border border-border/50 bg-muted/20 hover:bg-muted/40 cursor-pointer transition-all overflow-hidden'
+          className='group relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-border/50 bg-muted/20 transition-all hover:bg-muted/40'
           onClick={() => handleFileClick(file)}
           title={`${file.filename} (${formatFileSize(file.size)})`}
         >
           {isImageFile(file.media_type) ? (
             // For images, show actual thumbnail
-            <img 
+            <img
               src={`/api/files/serve/s3/${encodeURIComponent(file.s3_key)}?bucket=copilot`}
               alt={file.filename}
-              className='w-full h-full object-cover'
+              className='h-full w-full object-cover'
               onError={(e) => {
                 // If image fails to load, replace with icon
                 const target = e.target as HTMLImageElement
@@ -99,21 +109,23 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
                 const parent = target.parentElement
                 if (parent) {
                   const iconContainer = document.createElement('div')
-                  iconContainer.className = 'flex items-center justify-center w-full h-full bg-background/50'
-                  iconContainer.innerHTML = '<svg class="h-5 w-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>'
+                  iconContainer.className =
+                    'flex items-center justify-center w-full h-full bg-background/50'
+                  iconContainer.innerHTML =
+                    '<svg class="h-5 w-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>'
                   parent.appendChild(iconContainer)
                 }
               }}
             />
           ) : (
             // For other files, show icon centered
-            <div className='flex items-center justify-center w-full h-full bg-background/50'>
+            <div className='flex h-full w-full items-center justify-center bg-background/50'>
               {getFileIcon(file.media_type)}
             </div>
           )}
-          
+
           {/* Hover overlay effect */}
-          <div className='absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none' />
+          <div className='pointer-events-none absolute inset-0 bg-black/10 opacity-0 transition-opacity group-hover:opacity-100' />
         </div>
       ))}
     </>
@@ -567,13 +579,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         <div className='w-full py-2'>
           {/* File attachments displayed above the message, completely separate from message box width */}
           {message.fileAttachments && message.fileAttachments.length > 0 && (
-            <div className='flex justify-end mb-1'>
+            <div className='mb-1 flex justify-end'>
               <div className='flex flex-wrap gap-1.5'>
                 <FileAttachmentDisplay fileAttachments={message.fileAttachments} />
               </div>
             </div>
           )}
-          
+
           <div className='flex justify-end'>
             <div className='max-w-[80%]'>
               {/* Message content in purple box */}
@@ -585,7 +597,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                   <WordWrap text={message.content} />
                 </div>
               </div>
-              
+
               {/* Checkpoints below message */}
               {hasCheckpoints && (
                 <div className='mt-1 flex justify-end'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index ba71525ed02..6144b5a9fda 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -8,11 +8,20 @@ import {
   useRef,
   useState,
 } from 'react'
-import { ArrowUp, FileText, Image, Loader2, MessageCircle, Package, Paperclip, X } from 'lucide-react'
+import {
+  ArrowUp,
+  FileText,
+  Image,
+  Loader2,
+  MessageCircle,
+  Package,
+  Paperclip,
+  X,
+} from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
-import { cn } from '@/lib/utils'
 import { useSession } from '@/lib/auth-client'
+import { cn } from '@/lib/utils'
 import { useCopilotStore } from '@/stores/copilot/store'
 
 interface MessageFileAttachment {
@@ -76,7 +85,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     const [dragCounter, setDragCounter] = useState(0)
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
-    
+
     const { data: session } = useSession()
     const { currentChat, workflowId } = useCopilotStore()
 
@@ -108,7 +117,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     // Cleanup preview URLs on unmount
     useEffect(() => {
       return () => {
-        attachedFiles.forEach(f => {
+        attachedFiles.forEach((f) => {
           if (f.previewUrl) {
             URL.revokeObjectURL(f.previewUrl)
           }
@@ -187,7 +196,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           previewUrl,
         }
 
-        setAttachedFiles(prev => [...prev, tempFile])
+        setAttachedFiles((prev) => [...prev, tempFile])
 
         try {
           // Request presigned URL
@@ -221,7 +230,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           })
 
           console.log('S3 Upload response status:', uploadResponse.status)
-          
+
           if (!uploadResponse.ok) {
             const errorText = await uploadResponse.text()
             console.error('S3 Upload failed:', errorText)
@@ -229,8 +238,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           }
 
           // Update file entry with success
-          setAttachedFiles(prev =>
-            prev.map(f =>
+          setAttachedFiles((prev) =>
+            prev.map((f) =>
               f.id === tempFile.id
                 ? {
                     ...f,
@@ -244,7 +253,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         } catch (error) {
           console.error('File upload failed:', error)
           // Remove failed upload
-          setAttachedFiles(prev => prev.filter(f => f.id !== tempFile.id))
+          setAttachedFiles((prev) => prev.filter((f) => f.id !== tempFile.id))
         }
       }
     }
@@ -255,8 +264,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
       // Convert attached files to the format expected by the API
       const fileAttachments = attachedFiles
-        .filter(f => !f.uploading && f.key) // Only include successfully uploaded files with keys
-        .map(f => ({
+        .filter((f) => !f.uploading && f.key) // Only include successfully uploaded files with keys
+        .map((f) => ({
           id: f.id,
           s3_key: f.key!, // Use the actual S3 key stored from the upload response
           filename: f.name,
@@ -265,14 +274,14 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         }))
 
       onSubmit(trimmedMessage, fileAttachments)
-      
+
       // Clean up preview URLs before clearing
-      attachedFiles.forEach(f => {
+      attachedFiles.forEach((f) => {
         if (f.previewUrl) {
           URL.revokeObjectURL(f.previewUrl)
         }
       })
-      
+
       // Clear the message and files after submit
       if (controlledValue !== undefined) {
         onControlledChange?.('')
@@ -322,11 +331,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
     const removeFile = (fileId: string) => {
       // Clean up preview URL if it exists
-      const file = attachedFiles.find(f => f.id === fileId)
+      const file = attachedFiles.find((f) => f.id === fileId)
       if (file?.previewUrl) {
         URL.revokeObjectURL(file.previewUrl)
       }
-      setAttachedFiles(prev => prev.filter(f => f.id !== fileId))
+      setAttachedFiles((prev) => prev.filter((f) => f.id !== fileId))
     }
 
     const handleFileClick = (file: AttachedFile) => {
@@ -345,7 +354,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       const k = 1024
       const sizes = ['Bytes', 'KB', 'MB', 'GB']
       const i = Math.floor(Math.log(bytes) / Math.log(k))
-      return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+      return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`
     }
 
     const isImageFile = (type: string) => {
@@ -384,10 +393,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
     return (
       <div className={cn('relative flex-none pb-4', className)}>
-        <div 
+        <div
           className={cn(
-            'rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] p-2 shadow-xs dark:border-[#414141] dark:bg-[#202020] transition-all duration-200',
-            isDragging && 'border-[#802FFF] bg-purple-50/50 dark:bg-purple-950/20 dark:border-[#802FFF]'
+            'rounded-[8px] border border-[#E5E5E5] bg-[#FFFFFF] p-2 shadow-xs transition-all duration-200 dark:border-[#414141] dark:bg-[#202020]',
+            isDragging &&
+              'border-[#802FFF] bg-purple-50/50 dark:border-[#802FFF] dark:bg-purple-950/20'
           )}
           onDragEnter={handleDragEnter}
           onDragLeave={handleDragLeave}
@@ -400,38 +410,38 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               {attachedFiles.map((file) => (
                 <div
                   key={file.id}
-                  className='group relative w-16 h-16 rounded-md border border-border/50 bg-muted/20 hover:bg-muted/40 cursor-pointer transition-all overflow-hidden'
+                  className='group relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-border/50 bg-muted/20 transition-all hover:bg-muted/40'
                   title={`${file.name} (${formatFileSize(file.size)})`}
                   onClick={() => handleFileClick(file)}
                 >
                   {isImageFile(file.type) && file.previewUrl ? (
                     // For images, show actual thumbnail
-                    <img 
+                    <img
                       src={file.previewUrl}
                       alt={file.name}
-                      className='w-full h-full object-cover'
+                      className='h-full w-full object-cover'
                     />
                   ) : isImageFile(file.type) && file.key ? (
                     // For uploaded images without preview URL, use S3 URL
-                    <img 
+                    <img
                       src={`/api/files/serve/s3/${encodeURIComponent(file.key)}?bucket=copilot`}
                       alt={file.name}
-                      className='w-full h-full object-cover'
+                      className='h-full w-full object-cover'
                     />
                   ) : (
                     // For other files, show icon centered
-                    <div className='flex items-center justify-center w-full h-full bg-background/50'>
+                    <div className='flex h-full w-full items-center justify-center bg-background/50'>
                       {getFileIcon(file.type)}
                     </div>
                   )}
-                  
+
                   {/* Loading overlay */}
                   {file.uploading && (
-                    <div className='absolute inset-0 bg-black/50 flex items-center justify-center'>
+                    <div className='absolute inset-0 flex items-center justify-center bg-black/50'>
                       <Loader2 className='h-4 w-4 animate-spin text-white' />
                     </div>
                   )}
-                  
+
                   {/* Remove button */}
                   {!file.uploading && (
                     <Button
@@ -441,14 +451,14 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                         e.stopPropagation()
                         removeFile(file.id)
                       }}
-                      className='absolute top-0.5 right-0.5 h-5 w-5 bg-black/50 hover:bg-black/70 text-white opacity-0 group-hover:opacity-100 transition-opacity'
+                      className='absolute top-0.5 right-0.5 h-5 w-5 bg-black/50 text-white opacity-0 transition-opacity hover:bg-black/70 group-hover:opacity-100'
                     >
                       <X className='h-3 w-3' />
                     </Button>
                   )}
-                  
+
                   {/* Hover overlay effect */}
-                  <div className='absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none' />
+                  <div className='pointer-events-none absolute inset-0 bg-black/10 opacity-0 transition-opacity group-hover:opacity-100' />
                 </div>
               ))}
             </div>
@@ -546,4 +556,3 @@ UserInput.displayName = 'UserInput'
 
 export { UserInput }
 export type { UserInputRef }
-
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 9b56b710957..92a824f7bdd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -256,7 +256,11 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
 
       try {
         await sendMessage(query, { stream: true, fileAttachments })
-        logger.info('Sent message:', query, fileAttachments ? `with ${fileAttachments.length} attachments` : '')
+        logger.info(
+          'Sent message:',
+          query,
+          fileAttachments ? `with ${fileAttachments.length} attachments` : ''
+        )
       } catch (error) {
         logger.error('Failed to send message:', error)
       }
diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts
index 6e2c7269cec..e2a937a149a 100644
--- a/apps/sim/stores/copilot/store.ts
+++ b/apps/sim/stores/copilot/store.ts
@@ -7,7 +7,12 @@ import { toolRegistry } from '@/lib/copilot/tools'
 import { createLogger } from '@/lib/logs/console/logger'
 import { COPILOT_TOOL_DISPLAY_NAMES } from '@/stores/constants'
 import { COPILOT_TOOL_IDS } from './constants'
-import type { CopilotMessage, CopilotStore, WorkflowCheckpoint, MessageFileAttachment } from './types'
+import type {
+  CopilotMessage,
+  CopilotStore,
+  MessageFileAttachment,
+  WorkflowCheckpoint,
+} from './types'
 
 const logger = createLogger('CopilotStore')
 
@@ -145,7 +150,10 @@ const initialState = {
 /**
  * Helper function to create a new user message
  */
-function createUserMessage(content: string, fileAttachments?: MessageFileAttachment[]): CopilotMessage {
+function createUserMessage(
+  content: string,
+  fileAttachments?: MessageFileAttachment[]
+): CopilotMessage {
   return {
     id: crypto.randomUUID(),
     role: 'user',
@@ -214,7 +222,8 @@ function validateMessagesForLLM(messages: CopilotMessage[]): any[] {
         ...(msg.toolCalls && msg.toolCalls.length > 0 && { toolCalls: msg.toolCalls }),
         ...(msg.contentBlocks &&
           msg.contentBlocks.length > 0 && { contentBlocks: msg.contentBlocks }),
-        ...(msg.fileAttachments && msg.fileAttachments.length > 0 && { fileAttachments: msg.fileAttachments }),
+        ...(msg.fileAttachments &&
+          msg.fileAttachments.length > 0 && { fileAttachments: msg.fileAttachments }),
       }
     })
     .filter((msg) => {

From fb879adec9381b4eb05bb74ed86986bb11fab33f Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 16:43:58 -0700
Subject: [PATCH 09/10] Fix isdev

---
 apps/sim/lib/environment.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sim/lib/environment.ts b/apps/sim/lib/environment.ts
index cfffb33186d..d6da01ec546 100644
--- a/apps/sim/lib/environment.ts
+++ b/apps/sim/lib/environment.ts
@@ -11,7 +11,7 @@ export const isProd = env.NODE_ENV === 'production'
 /**
  * Is the application running in development mode
  */
-export const isDev = false // env.NODE_ENV === 'development'
+export const isDev = env.NODE_ENV === 'development'
 
 /**
  * Is the application running in test mode

From b926171db45c72ba6de43ac18f3ca6568f0359a9 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 5 Aug 2025 16:54:01 -0700
Subject: [PATCH 10/10] Dont re-download files on rerender

---
 .../copilot-message/copilot-message.tsx       | 21 ++++++++++++++++---
 .../components/user-input/user-input.tsx      | 11 +++++++++-
 .../panel/components/copilot/copilot.tsx      |  7 +++++--
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 87471b85d19..e6e73b5afa2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -54,6 +54,9 @@ interface FileAttachmentDisplayProps {
 }
 
 const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayProps) => {
+  // Cache for file URLs to avoid re-fetching on every render
+  const [fileUrls, setFileUrls] = useState<Record<string, string>>({})
+
   const formatFileSize = (bytes: number) => {
     if (bytes === 0) return '0 B'
     const k = 1024
@@ -75,9 +78,21 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
     return <FileText className='h-5 w-5 text-muted-foreground' />
   }
 
+  const getFileUrl = (file: any) => {
+    const cacheKey = file.s3_key
+    if (fileUrls[cacheKey]) {
+      return fileUrls[cacheKey]
+    }
+
+    // Generate URL only once and cache it
+    const url = `/api/files/serve/s3/${encodeURIComponent(file.s3_key)}?bucket=copilot`
+    setFileUrls((prev) => ({ ...prev, [cacheKey]: url }))
+    return url
+  }
+
   const handleFileClick = (file: any) => {
-    // Construct the serve URL for the file with bucket type parameter
-    const serveUrl = `/api/files/serve/s3/${encodeURIComponent(file.s3_key)}?bucket=copilot`
+    // Use cached URL or generate it
+    const serveUrl = getFileUrl(file)
 
     // Open the file in a new tab
     window.open(serveUrl, '_blank')
@@ -99,7 +114,7 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
           {isImageFile(file.media_type) ? (
             // For images, show actual thumbnail
             <img
-              src={`/api/files/serve/s3/${encodeURIComponent(file.s3_key)}?bucket=copilot`}
+              src={getFileUrl(file)}
               alt={file.filename}
               className='h-full w-full object-cover'
               onError={(e) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 6144b5a9fda..b4e1dd12a26 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -24,7 +24,7 @@ import { useSession } from '@/lib/auth-client'
 import { cn } from '@/lib/utils'
 import { useCopilotStore } from '@/stores/copilot/store'
 
-interface MessageFileAttachment {
+export interface MessageFileAttachment {
   id: string
   s3_key: string
   filename: string
@@ -262,6 +262,15 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       const trimmedMessage = message.trim()
       if (!trimmedMessage || disabled || isLoading) return
 
+      // Check for failed uploads and show user feedback
+      const failedUploads = attachedFiles.filter((f) => !f.uploading && !f.key)
+      if (failedUploads.length > 0) {
+        console.error(
+          'Some files failed to upload:',
+          failedUploads.map((f) => f.name)
+        )
+      }
+
       // Convert attached files to the format expected by the API
       const fileAttachments = attachedFiles
         .filter((f) => !f.uploading && f.key) // Only include successfully uploaded files with keys
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 92a824f7bdd..4899d324469 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -12,7 +12,10 @@ import {
   CopilotWelcome,
   UserInput,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components'
-import type { UserInputRef } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
+import type {
+  MessageFileAttachment,
+  UserInputRef,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
 import { COPILOT_TOOL_IDS } from '@/stores/copilot/constants'
 import { usePreviewStore } from '@/stores/copilot/preview-store'
 import { useCopilotStore } from '@/stores/copilot/store'
@@ -251,7 +254,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
 
   // Handle message submission
   const handleSubmit = useCallback(
-    async (query: string, fileAttachments?: any[]) => {
+    async (query: string, fileAttachments?: MessageFileAttachment[]) => {
       if (!query || isSendingMessage || !activeWorkflowId) return
 
       try {