style: improve code formatting in chat module styles

app/components/chat.module.scss

@@ -564,6 +564,32 @@
   border: rgba($color: #888, $alpha: 0.2) 1px solid;
 }
 
+.chat-message-item-files {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.chat-message-item-file {
+  display: flex;
+  flex-direction: row;
+  column-gap: 6px;
+
+}
+.chat-message-item-file-icon {
+  max-width: 16px;
+}
+
+.chat-message-item-file-name {
+  max-width:100%;  
+}
+
+
+
+
 
 @media only screen and (max-width: 600px) {
   $calc-image-width: calc(100vw/3*2/var(--image-count));

app/components/chat.tsx

@@ -1941,9 +1941,37 @@ function _Chat() {
                       </div>
                     )}
                     {getMessageFiles(message).length > 0 && (
-                      <div>
+                      <div className={styles["chat-message-item-files"]}>
                         {getMessageFiles(message).map((file, index) => {
-                          return <div key={index}></div>;
+                          const extension: DefaultExtensionType = file.url
+                            .split(".")
+                            .pop()
+                            ?.toLowerCase() as DefaultExtensionType;
+                          const style = defaultStyles[extension];
+
+                          return (
+                            <a
+                              href={file.url}
+                              target="_blank"
+                              key={index}
+                              className={styles["chat-message-item-file"]}
+                            >
+                              <div
+                                className={
+                                  styles["chat-message-item-file-icon"]
+                                }
+                              >
+                                <FileIcon {...style} />
+                              </div>
+                              <div
+                                className={
+                                  styles["chat-message-item-file-name"]
+                                }
+                              >
+                                {file.name}
+                              </div>
+                            </a>
+                          );
                         })}
                       </div>
                     )}

app/store/chat.ts

@@ -162,7 +162,9 @@ const readFileContent = async (file: UploadFile): Promise<string> => {
         `Failed to fetch content from ${file.url}: ${response.statusText}`,
       );
     }
-    return await response.text();
+    const content = await response.text();
+    const result = file.name + "\n" + content;
+    return result;
   } catch (error) {
     console.error("Error reading file content:", error);
     return "";
@@ -356,26 +358,37 @@ export const useChatStore = createPersistStore(
 
         let mContent: string | MultimodalContent[] = userContent;
         let displayContent: string | MultimodalContent[] = userContent;
+        displayContent = [
+          {
+            type: "text",
+            text: userContent,
+          },
+        ];
 
         if (attachFiles && attachFiles.length > 0) {
-          let fileContent = userContent + " file content: \n";
+          let fileContent = userContent + " Here are the files: \n";
           for (let i = 0; i < attachFiles.length; i++) {
             fileContent += await readFileContent(attachFiles[i]);
           }
+          mContent = [
+            {
+              type: "text",
+              text: fileContent,
+            },
+          ];
+          displayContent = displayContent.concat(
+            attachFiles.map((file) => {
+              return {
+                type: "file_url",
+                file_url: {
+                  url: file.url,
+                  name: file.name,
+                },
+              };
+            }),
+          );
 
           if (attachImages && attachImages.length > 0) {
-            mContent = [
-              {
-                type: "text",
-                text: fileContent,
-              },
-            ];
-            displayContent = [
-              {
-                type: "text",
-                text: userContent,
-              },
-            ];
             mContent = mContent.concat(
               attachImages.map((url) => {
                 return {
@@ -387,20 +400,46 @@ export const useChatStore = createPersistStore(
               }),
             );
             displayContent = displayContent.concat(
-              attachFiles.map((file) => {
+              attachImages.map((url) => {
                 return {
-                  type: "file_url",
+                  type: "image_url",
-                  file_url: {
+                  image_url: {
-                    url: file.url,
+                    url: url,
-                    name: file.name,
                   },
                 };
               }),
             );
-          } else {
-            mContent = fileContent;
-            displayContent = userContent;
           }
+        } else if (attachImages && attachImages.length > 0) {
+          mContent = [
+            {
+              type: "text",
+              text: userContent,
+            },
+          ];
+          mContent = mContent.concat(
+            attachImages.map((url) => {
+              return {
+                type: "image_url",
+                image_url: {
+                  url: url,
+                },
+              };
+            }),
+          );
+          displayContent = displayContent.concat(
+            attachImages.map((url) => {
+              return {
+                type: "image_url",
+                image_url: {
+                  url: url,
+                },
+              };
+            }),
+          );
+        } else {
+          mContent = userContent;
+          displayContent = userContent;
         }
 
         let userMessage: ChatMessage = createMessage({

app/utils.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { showToast } from "./components/ui-lib";
 import Locale from "./locales";
-import { RequestMessage } from "./client/api";
+import { RequestMessage, UploadFile } from "./client/api";
 import { ServiceProvider, REQUEST_TIMEOUT_MS } from "./constant";
 import { fetch as tauriFetch, ResponseType } from "@tauri-apps/api/http";
 
@@ -250,17 +250,17 @@ export function getMessageImages(message: RequestMessage): string[] {
   return urls;
 }
 
-export function getMessageFiles(message: RequestMessage): string[] {
+export function getMessageFiles(message: RequestMessage): UploadFile[] {
   if (typeof message.content === "string") {
     return [];
   }
-  const urls: string[] = [];
+  const files: UploadFile[] = [];
   for (const c of message.content) {
     if (c.type === "file_url") {
-      urls.push(c.file_url?.url ?? "");
+      files.push(c.file_url ? c.file_url : { name: "", url: "" });
     }
   }
-  return urls;
+  return files;
 }
 
 export function isVisionModel(model: string) {