Fixes file loading (mckaywrigley#1236)

* adjust display ui

* modify how files load

components/chat/chat-files-display.tsx

@@ -115,7 +115,7 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
         </div>
 
         <div className="overflow-auto">
-          <div className="flex flex-wrap gap-2 truncate pt-2">
+          <div className="flex gap-2 overflow-auto pt-2">
             {messageImages.map((image, index) => (
               <div
                 key={index}

components/chat/chat-ui.tsx

@@ -1,8 +1,8 @@
 import Loading from "@/app/[locale]/loading"
 import { useChatHandler } from "@/components/chat/chat-hooks/use-chat-handler"
 import { ChatbotUIContext } from "@/context/context"
+import { getChatFilesByChatId } from "@/db/chat-files"
 import { getChatById } from "@/db/chats"
-import { getFileById } from "@/db/files"
 import { getMessageFileItemsByMessageId } from "@/db/message-file-items"
 import { getMessagesByChatId } from "@/db/messages"
 import { getMessageImageFromStorage } from "@/db/storage/message-images"
@@ -120,33 +120,19 @@ export const ChatUI: FC<ChatUIProps> = ({}) => {
     const uniqueFileItems = messageFileItems.flatMap(item => item.file_items)
     setChatFileItems(uniqueFileItems)
 
-    const uniqueFileIds = [
-      ...new Set(uniqueFileItems.map(item => item.file_id))
-    ]
+    const chatFiles = await getChatFilesByChatId(params.chatid as string)
 
-    if (uniqueFileIds.length > 0) {
-      const fileFetchPromises = uniqueFileIds.map(async fileId => {
-        const file = await getFileById(fileId)
-        return file
-      })
-
-      const files = await Promise.all(fileFetchPromises)
-      setChatFiles(
-        files.map(file => ({
-          id: file.id,
-          name: file.name,
-          type: file.type,
-          file: null
-        }))
-      )
+    setChatFiles(
+      chatFiles.files.map(file => ({
+        id: file.id,
+        name: file.name,
+        type: file.type,
+        file: null
+      }))
+    )
 
-      setUseRetrieval(true)
-      setShowFilesDisplay(true)
-    } else {
-      setUseRetrieval(false)
-      setShowFilesDisplay(false)
-      setChatFiles([])
-    }
+    setUseRetrieval(true)
+    setShowFilesDisplay(true)
 
     const fetchedChatMessages = fetchedMessages.map(message => {
       return {

db/chat-files.ts

@@ -8,7 +8,7 @@ export const getChatFilesByChatId = async (chatId: string) => {
       `
       id, 
       name, 
-      files ( id, name, type )
+      files (*)
     `
     )
     .eq("id", chatId)