fix: attach file information into message metadata for a quick retrieval

janhq · Dec 19, 2024 · 40f99e9 · 40f99e9
1 parent 0271774
commit 40f99e9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
@@ -2,11 +2,18 @@ import { memo, useEffect, useState } from 'react'
 
 import { usePath } from '@/hooks/usePath'
 
+import { toGibibytes } from '@/utils/converter'
 import { getFileInfo } from '@/utils/file'
 
 import Icon from '../FileUploadPreview/Icon'
 
-const DocMessage = ({ id }: { id: string }) => {
+const DocMessage = ({
+  id,
+  metadata,
+}: {
+  id: string
+  metadata: Record<string, unknown> | undefined
+}) => {
   const { onViewFile } = usePath()
   const [fileInfo, setFileInfo] = useState<
     { filename: string; id: string } | undefined
@@ -29,10 +36,14 @@ const DocMessage = ({ id }: { id: string }) => {
       <Icon type="pdf" />
       <div className="w-full">
         <h6 className="line-clamp-1 w-4/5 overflow-hidden font-medium">
-          {fileInfo?.filename}
+          {metadata && 'filename' in metadata
+            ? (metadata.filename as string)
+            : fileInfo?.filename}
         </h6>
         <p className="text-[hsla(var(--text-secondary)] line-clamp-1 overflow-hidden truncate">
-          {fileInfo?.id ?? id}
+          {metadata && 'size' in metadata
+            ? toGibibytes(Number(metadata.size))
+            : (fileInfo?.id ?? id)}
         </p>
       </div>
     </div>

diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -127,7 +127,10 @@ const MessageContainer: React.FC<
           <>
             {image && <ImageMessage image={image} />}
             {attachedFile && (
-              <DocMessage id={props.attachments?.[0]?.file_id ?? props.id} />
+              <DocMessage
+                id={props.attachments?.[0]?.file_id ?? props.id}
+                metadata={props.metadata}
+              />
             )}
 
             {editMessage === props.id ? (

diff --git a/web/utils/threadMessageBuilder.ts b/web/utils/threadMessageBuilder.ts
@@ -16,6 +16,7 @@ export class ThreadMessageBuilder {
 
   content: ThreadContent[] = []
   attachments: Attachment[] = []
+  metadata: Record<string, unknown> = {}
 
   constructor(messageRequest: MessageRequestBuilder) {
     this.messageRequest = messageRequest
@@ -33,6 +34,7 @@ export class ThreadMessageBuilder {
       completed_at: timestamp,
       object: 'thread.message',
       content: this.content,
+      metadata: this.metadata,
     }
   }
 
@@ -68,6 +70,10 @@ export class ThreadMessageBuilder {
           },
         ],
       })
+      this.metadata = {
+        filename: fileUpload.name,
+        size: fileUpload.file?.size,
+      }
     }
 
     return this