Fix file upload

IgorWounds · IgorWounds · commit dee1d7f7fdf2 · 2025-05-15T13:28:42.000+02:00
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
@@ -36,10 +36,22 @@ export async function POST(request: Request) {
 
     let finalMessages: Message[] = messages;
     if (attachments && attachments.length > 0) {
-      finalMessages = [
-        { role: 'system', content: `The user has attached the following image(s):\n${attachments.join('\n')}` },
-        ...messages,
-      ];
+      // Find last user message
+      const lastUserIdx = messages.map((m: Message) => m.role).lastIndexOf('user');
+      if (lastUserIdx !== -1) {
+        const userMsg = messages[lastUserIdx];
+        let contentArr: Array<{ type: string; text?: string; image_url?: { url: string } }> = [];
+        if (typeof userMsg.content === 'string') {
+          contentArr.push({ type: 'text', text: userMsg.content });
+        } else if (Array.isArray(userMsg.content)) {
+          contentArr = userMsg.content as Array<{ type: string; text?: string; image_url?: { url: string } }>;
+        }
+        for (const url of attachments) {
+          contentArr.push({ type: 'image_url', image_url: { url } });
+        }
+        messages[lastUserIdx] = { ...userMsg, content: contentArr };
+      }
+      finalMessages = messages;
     }
 
     const res = await createChatCompletionWithFallback({ model, messages: finalMessages });
diff --git a/components/chat/__tests__/chat-phase3-phase4.test.tsx b/components/chat/__tests__/chat-phase3-phase4.test.tsx
@@ -182,15 +182,15 @@ describe('Chat Phase 3 & 4', () => {
     await act(async () => {
       fireEvent.change(fileInput as HTMLInputElement, { target: { files: [file] } })
     })
-    // Preview should appear instantly
-    // Debug DOM
     screen.debug()
-    await waitFor(() => screen.getByTestId('attachment-filename'))
-    expect(screen.getByTestId('attachment-filename').textContent).toContain('fail.txt')
-    // Wait for error icon
-    await waitFor(() => expect(screen.getByText('!')).toBeInTheDocument())
-    // Should show the file name
-    expect(screen.getByTestId('attachment-filename').textContent).toContain('fail.txt')
+    // Preview should appear instantly
+    // Find the preview row and check for file name and error icon
+    await waitFor(() => {
+      const previewRow = document.querySelector('.flex.items-center.gap-4.mb-2');
+      if (!previewRow) throw new Error('No preview row');
+      if (!previewRow.textContent?.includes('fail.txt')) throw new Error('File name not found');
+      if (!previewRow.textContent?.includes('!')) throw new Error('Error icon not found');
+    });
   })
 
   it('queues message+attachment if conversation is temp and flushes on real ID', async () => {
diff --git a/components/chat/chat-area.tsx b/components/chat/chat-area.tsx
@@ -8,6 +8,7 @@ import { useActiveConversation } from '@/hooks/use-active-conversation'
 import { useMessages } from '@/hooks/use-messages'
 import ChatList from './chat-list'
 import { ChevronDown } from 'lucide-react'
+import type { Database } from '@/types/supabase'
 
 export default function ChatArea() {
   const { activeConversationId } = useActiveConversation()
@@ -21,6 +22,8 @@ export default function ChatArea() {
   const [isAtBottom, setIsAtBottom] = useState(true)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
 
+  type MessageWithAttachments = Database['public']['Tables']['messages']['Row'] & { attachments: Database['public']['Tables']['attachments']['Row'][] }
+
   // Update search results when term or messages change
   useEffect(() => {
     if (!searchTerm || !messages) {
@@ -85,10 +88,11 @@ export default function ChatArea() {
             >
               {messages && (
                 <ChatList
-                  messages={messages.map(m => ({
+                  messages={(messages as MessageWithAttachments[]).map(m => ({
                     id: m.id,
                     role: m.role as 'user' | 'assistant',
                     content: m.content,
+                    attachments: m.attachments,
                   }))}
                   searchTerm={searchTerm}
                   searchResults={searchResults}
diff --git a/components/chat/chat-input.tsx b/components/chat/chat-input.tsx
@@ -28,6 +28,7 @@ type PendingMessage = {
     url: string;
     status: 'pending' | 'uploaded' | 'error';
     error?: string;
+    base64?: string;
   }>;
   model: string | null;
   messages: { role: string; content: string }[];
@@ -45,7 +46,7 @@ const ChatInput = React.memo(function ChatInput({ onOpenSearch, defaultModel }:
   })
   const createMessage = useCreateMessage()
   const [error, setError] = useState<string | null>(null)
-  const [uploadError, setUploadError] = useState<string | null>(null)
+  const [uploadError] = useState<string | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const chatInputRef = useRef<HTMLInputElement>(null)
   const [inputValue, setInputValue] = useState('')
@@ -57,8 +58,8 @@ const ChatInput = React.memo(function ChatInput({ onOpenSearch, defaultModel }:
     url: string;
     status: 'pending' | 'uploaded' | 'error';
     error?: string;
+    base64?: string;
   }>>([])
-  const [, forceRerender] = useState(0)
   const { data: messages } = useMessages(activeConversationId);
   const queryClient = useQueryClient();
   const selectedModelRaw = useConversationModelStore(s => activeConversationId ? s.getModel(activeConversationId) : undefined)
@@ -68,76 +69,6 @@ const ChatInput = React.memo(function ChatInput({ onOpenSearch, defaultModel }:
   const [showLimitModal, setShowLimitModal] = useState(false)
   const decrementPremiumCount = usePremiumQueryCountStore(s => s.decrement)
 
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    console.log('handleFileChange', e.target.files)
-    setUploadError(null)
-    const files = e.target.files
-    if (!files || files.length === 0) return
-    const allowed = [
-      'image/png', 'image/jpeg', 'image/webp', 'application/pdf',
-      'text/plain', 'application/zip', 'application/json',
-    ]
-    for (const file of Array.from(files)) {
-      if (!allowed.includes(file.type)) {
-        setUploadError('Unsupported file type')
-        continue
-      }
-      if (file.size > 10 * 1024 * 1024) {
-        setUploadError('File too large (max 10MB)')
-        continue
-      }
-      // Optimistically add preview
-      let localUrl = ''
-      if (typeof window !== 'undefined' && typeof window.URL !== 'undefined' && typeof window.URL.createObjectURL === 'function') {
-        localUrl = window.URL.createObjectURL(file)
-      } else {
-        // fallback for test/SSR
-        localUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB...'
-      }
-      const ext = file.name.split('.').pop()
-      const filePath = `uploads/${Date.now()}-${Math.random().toString(36).slice(2)}.${ext}`
-      setPendingAttachments(prev => {
-        const next: typeof prev = [
-          ...prev,
-          {
-            name: file.name,
-            type: file.type,
-            size: file.size,
-            filePath,
-            url: localUrl,
-            status: 'pending' as const,
-          },
-        ]
-        return next
-      })
-      forceRerender(n => n + 1)
-      // Start upload in background
-      void (async () => {
-        try {
-          const { error: uploadError } = await supabase.storage.from('attachments').upload(filePath, file, {
-            cacheControl: '3600',
-            upsert: false,
-          })
-          if (uploadError) {
-            setPendingAttachments(prev => prev.map(a =>
-              a.filePath === filePath ? { ...a, status: 'error', error: uploadError.message } : a
-            ))
-            return
-          }
-          const { data } = supabase.storage.from('attachments').getPublicUrl(filePath)
-          setPendingAttachments(prev => prev.map(a =>
-            a.filePath === filePath ? { ...a, url: data.publicUrl, status: 'uploaded' } : a
-          ))
-        } catch {
-          setPendingAttachments(prev => prev.map(a =>
-            a.filePath === filePath ? { ...a, status: 'error', error: 'Upload failed' } : a
-          ))
-        }
-      })()
-    }
-    if (fileInputRef.current) fileInputRef.current.value = ''
-  }
-
   const handleRemoveAttachment = (filePath: string) => {
     setPendingAttachments(prev => prev.filter(a => a.filePath !== filePath))
   }
@@ -306,13 +237,14 @@ const ChatInput = React.memo(function ChatInput({ onOpenSearch, defaultModel }:
             console.log('Assistant message created:', assistantMsg);
             let streamedContent = '';
             let res;
-            const imageUrls = pendingAttachments
-              .filter((att: { type: string }) => att.type.startsWith('image/'))
-              .map((att: { url: string }) => att.url);
+            // Only use base64 for Together AI attachments
+            const togetherAttachments = pendingAttachments
+              .filter(att => att.type.startsWith('image/') && att.base64)
+              .map(att => att.base64)
             try {
               res = await fetch('/api/chat', {
                 method: 'POST',
-                body: JSON.stringify({ messages: currentMessages, conversation_id: conversationId, model: selectedModel, attachments: imageUrls }),
+                body: JSON.stringify({ messages: currentMessages, conversation_id: conversationId, model: selectedModel, attachments: togetherAttachments }),
               });
               console.log('API response:', res);
             } catch (err) {
@@ -360,23 +292,13 @@ const ChatInput = React.memo(function ChatInput({ onOpenSearch, defaultModel }:
           <div className="text-sm text-red-500 mb-2">{error}</div>
         )}
         {uploadError && <div className="text-xs text-red-500 mb-2">{uploadError}</div>}
-        {/* Hidden file input for upload icon */}
-        <input
-          ref={fileInputRef}
-          type="file"
-          className="hidden"
-          accept="image/png,image/jpeg,image/webp,application/pdf,text/plain,application/zip,application/json"
-          onChange={handleFileChange}
-          disabled={createConversation.isPending || createMessage.isPending}
-          multiple
-        />
         {/* File preview row inside the input box, at the top */}
         <div className="flex items-center gap-4 mb-2 overflow-x-auto scrollbar-thin scrollbar-thumb-[#353740] scrollbar-track-transparent">
           {pendingAttachments.map(att => {
             console.log('preview row map', att)
             return (
               <div
-                key={att.filePath}
+                key={att.filePath || att.name || att.base64 || Math.random()}
                 className={`relative flex-shrink-0 w-16 h-16 rounded-2xl overflow-hidden bg-[#23272f] border border-[#353740] group`}
               >
                 {/* Status indicator (spinner or error) */}
@@ -402,7 +324,7 @@ const ChatInput = React.memo(function ChatInput({ onOpenSearch, defaultModel }:
                 ) : (
                   <span className="flex items-center justify-center w-full h-full text-3xl text-[#b4bcd0]">📄</span>
                 )}
-                {/* Filename overlay at bottom */}
+                {/* Filename overlay at bottom (always show, even on error) */}
                 <div data-testid="attachment-filename" className="absolute bottom-0 left-0 w-full px-2 py-1 bg-gradient-to-t from-black/80 to-black/0 text-[11px] text-[#ececf1] truncate pointer-events-none font-medium">
                   {att.name}
                 </div>
@@ -534,6 +456,67 @@ const ChatInput = React.memo(function ChatInput({ onOpenSearch, defaultModel }:
             </Tooltip.Portal>
           </Tooltip.Root>
         </div>
+        {/* Hidden file input for upload icon */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          accept="image/png,image/jpeg,image/webp"
+          onChange={async e => {
+            const files = e.target.files;
+            if (!files || files.length === 0) return;
+            const file = files[0];
+            if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type)) {
+              setPendingAttachments(prev => [
+                ...prev,
+                {
+                  name: file.name,
+                  type: file.type,
+                  size: file.size,
+                  filePath: '',
+                  url: '',
+                  status: 'error',
+                  error: 'Unsupported file type',
+                }
+              ]);
+              return;
+            }
+            if (file.size > 10 * 1024 * 1024) {
+              setPendingAttachments(prev => [
+                ...prev,
+                {
+                  name: file.name,
+                  type: file.type,
+                  size: file.size,
+                  filePath: '',
+                  url: '',
+                  status: 'error',
+                  error: 'File too large',
+                }
+              ]);
+              return;
+            }
+            const base64 = await new Promise<string>((resolve, reject) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve(reader.result as string);
+              reader.onerror = reject;
+              reader.readAsDataURL(file);
+            });
+            setPendingAttachments(prev => [
+              ...prev,
+              {
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                filePath: '',
+                url: base64,
+                status: 'uploaded',
+                base64,
+              }
+            ]);
+          }}
+          disabled={createConversation.isPending || createMessage.isPending}
+        />
         <style jsx global>{`
           input::placeholder {
             color: #b4bcd0 !important;
diff --git a/components/chat/chat-list.tsx b/components/chat/chat-list.tsx
@@ -1,9 +1,15 @@
 import ChatMessage from './chat-message'
 import React, { useEffect, useRef } from 'react'
 import { Loader2 } from 'lucide-react'
+import type { Database } from '@/types/supabase'
 
 type ChatListProps = {
-  messages: { id: string; role: 'user' | 'assistant'; content: string }[]
+  messages: Array<{
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    attachments?: Database['public']['Tables']['attachments']['Row'][];
+  }>
   searchTerm?: string
   searchResults?: number[]
   activeResultIdx?: number
@@ -50,6 +56,7 @@ export default function ChatList({ messages, searchTerm, searchResults, activeRe
               content={msg.content || (msg.role === 'assistant' ? <span className="flex items-center gap-2 text-[#b4bcd0]"><Loader2 className="animate-spin w-4 h-4" /> Generating...</span> : '')}
               highlight={!!searchTerm && activeIdx === idx}
               searchTerm={searchTerm}
+              attachments={msg.attachments}
             />
           </div>
         </React.Fragment>
diff --git a/components/chat/chat-message.tsx b/components/chat/chat-message.tsx
@@ -3,11 +3,20 @@ import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import React from 'react'
 
-export default function ChatMessage({ role, content, highlight, searchTerm }: {
+export default function ChatMessage({ role, content, highlight, searchTerm, attachments }: {
   role: 'user' | 'assistant',
   content: React.ReactNode,
   highlight?: boolean,
-  searchTerm?: string
+  searchTerm?: string,
+  attachments?: Array<{
+    file_name: string;
+    file_type: string;
+    file_path: string;
+    file_size: number;
+    created_at: string;
+    id: string;
+    message_id: string | null;
+  }>
 }) {
   // Highlight search term in content
   let displayContent: React.ReactNode = content
@@ -94,6 +103,19 @@ export default function ChatMessage({ role, content, highlight, searchTerm }: {
   return (
     <div className={`bg-[#545563] text-white rounded-2xl rounded-br-3xl px-6 py-4 max-w-full font-normal leading-relaxed whitespace-pre-line text-[15px]${highlight ? ' ring-2 ring-yellow-400/60' : ''}`} style={{ fontFamily: 'Inter, sans-serif', fontWeight: 400 }}>
       {displayContent}
+      {attachments && attachments.length > 0 && (
+        <div className="flex flex-wrap gap-2 mt-2">
+          {attachments.map(att => (
+            <span
+              key={att.id}
+              className="bg-[#23272f] border border-[#353740] rounded-lg px-3 py-1 text-xs text-[#ececf1] font-medium truncate max-w-[160px]"
+              title={att.file_name}
+            >
+              {att.file_name}
+            </span>
+          ))}
+        </div>
+      )}
     </div>
   )
 } 
diff --git a/components/chat/file-upload.tsx b/components/chat/file-upload.tsx
diff --git a/hooks/use-messages.ts b/hooks/use-messages.ts
diff --git a/knowledge_base/tasks.md b/knowledge_base/tasks.md
