feat: Implement text file upload functionality. 增加上传文本文件的按钮和功能

app/client/api.ts

@@ -29,11 +29,22 @@ export const TTSModels = ["tts-1", "tts-1-hd"] as const;
 export type ChatModel = ModelType;
 
 export interface MultimodalContent {
-  type: "text" | "image_url";
+  type: "text" | "image_url" | "file_url";
   text?: string;
   image_url?: {
     url: string;
   };
+  file_url?: {
+    url: string;
+    name: string;
+    tokenCount?: string;
+  };
+}
+
+export interface UploadFile {
+  name: string;
+  url: string;
+  tokenCount?: string;
 }
 
 export interface RequestMessage {

app/components/chat.module.scss

@@ -1,10 +1,18 @@
 @import "../styles/animation.scss";
 
-.attach-images {
+.attachments {
   position: absolute;
   left: 30px;
   bottom: 32px;
   display: flex;
+  flex-direction: row;
+}
+
+.attach-images {
+  //position: absolute;
+  //left: 30px;
+  //bottom: 32px;
+  display: flex;
 }
 
 .attach-image {
@@ -42,6 +50,91 @@
   }
 }
 
+.attach-files {
+  //position: absolute;
+  //left: 30px;
+  //bottom: 32px;
+  display: flex;
+  flex-direction: column;
+  //row-gap: 11px;
+  max-height: 64px;
+}
+
+.attach-file {
+  cursor: default;
+  display: flex;
+  flex-direction: row;
+  column-gap: 4px;
+  justify-content: flex-start;
+  color: var(--black);
+  font-size: 14px;
+  border-radius: 5px;
+  margin-right: 10px;
+
+  .attach-file-name-full {
+    max-width:calc(62vw);
+    display:flex;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .attach-file-name-half {
+    max-width:calc(45vw);
+    display:flex;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .attach-file-name-less {
+    max-width:calc(28vw);
+    display:flex;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .attach-file-name-min {
+    max-width:calc(12vw);
+    display:flex;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .attach-file-icon {
+    min-width: 16px;
+    max-width: 16px;
+  }
+
+  .attach-file-icon:hover {
+    opacity: 0;
+  }
+
+  .attach-image-mask {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: all ease 0.2s;
+    position: absolute;
+  }
+
+  .attach-image-mask:hover {
+    opacity: 1;
+  }
+
+  .delete-image {
+    width: 16px;
+    height: 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    float: left;
+    background-color: var(--white);
+  }
+}
+
+
+
 .chat-input-actions {
   display: flex;
   flex-wrap: wrap;
@@ -471,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));
@@ -693,4 +812,4 @@
 .shortcut-key span {
   font-size: 12px;
   color: var(--black);
-}
+}