From 66e37d80d62d12cb5390ae51022c5a54c3a499a5 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Tue, 17 Dec 2024 16:07:11 +0700
Subject: [PATCH 1/3] fix: attachment preview issue

---
 web/hooks/usePath.ts                          | 26 +++++++---
 .../ThreadCenterPanel/ChatInput/index.tsx     |  2 +-
 .../TextMessage/DocMessage.tsx                | 47 +++++++++----------
 .../TextMessage/ImageMessage.tsx              | 27 +----------
 .../TextMessage/RelativeImage.tsx             |  9 ++--
 .../ThreadCenterPanel/TextMessage/index.tsx   |  4 +-
 web/utils/file.ts                             |  9 ++++
 7 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/web/hooks/usePath.ts b/web/hooks/usePath.ts
index afdafe11ff..315072000a 100644
--- a/web/hooks/usePath.ts
+++ b/web/hooks/usePath.ts
@@ -1,6 +1,8 @@
-import { openFileExplorer, joinPath, baseName } from '@janhq/core'
+import { openFileExplorer, joinPath, baseName, fs } from '@janhq/core'
 import { useAtomValue } from 'jotai'
 
+import { getFileInfo } from '@/utils/file'
+
 import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
 import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
 import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
@@ -47,13 +49,23 @@ export const usePath = () => {
   const onViewFile = async (id: string) => {
     if (!activeThread) return
 
-    let filePath = undefined
-
     id = await baseName(id)
-    filePath = await joinPath(['threads', `${activeThread.id}/files`, `${id}`])
-    if (!filePath) return
-    const fullPath = await joinPath([janDataFolderPath, filePath])
-    openFileExplorer(fullPath)
+
+    // New ID System
+    if (!id.startsWith('file-')) {
+      const threadFilePath = await joinPath([
+        janDataFolderPath,
+        'threads',
+        `${activeThread.id}/files`,
+        id,
+      ])
+      openFileExplorer(threadFilePath)
+    } else {
+      id = id.split('.')[0]
+      const fileName = (await getFileInfo(id)).filename
+      const filesPath = await joinPath([janDataFolderPath, 'files', fileName])
+      openFileExplorer(filesPath)
+    }
   }
 
   const onViewFileContainer = async () => {
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
index b3246a26b7..4f00bbc595 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -126,7 +126,7 @@ const ChatInput = () => {
   const renderPreview = (fileUpload: any) => {
     if (fileUpload) {
       if (fileUpload.type === 'image') {
-        return <ImageUploadPreview file={fileUpload[0].file} />
+        return <ImageUploadPreview file={fileUpload.file} />
       } else {
         return <FileUploadPreview />
       }
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
index 69d61d0d58..0051f832e3 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
@@ -1,44 +1,39 @@
-import { memo } from 'react'
-
-import { Tooltip } from '@janhq/joi'
-
-import { FolderOpenIcon } from 'lucide-react'
+import { memo, useEffect, useState } from 'react'
 
 import { usePath } from '@/hooks/usePath'
 
-import { toGibibytes } from '@/utils/converter'
-import { openFileTitle } from '@/utils/titleUtils'
+import { getFileInfo } from '@/utils/file'
 
 import Icon from '../FileUploadPreview/Icon'
 
-const DocMessage = ({ id, name }: { id: string; name?: string }) => {
-  const { onViewFile, onViewFileContainer } = usePath()
+const DocMessage = ({ id }: { id: string }) => {
+  const { onViewFile } = usePath()
+  const [fileInfo, setFileInfo] = useState<
+    { filename: string; id: string } | undefined
+  >()
+  useEffect(() => {
+    if (!fileInfo) {
+      getFileInfo(id).then((data) => {
+        setFileInfo(data)
+      })
+    }
+  }, [fileInfo, id])
 
   return (
     <div className="group/file bg-secondary relative mb-2 inline-flex w-60 cursor-pointer gap-x-3 overflow-hidden rounded-lg p-4">
       <div
-        className="absolute left-0 top-0 z-20 hidden h-full w-full bg-black/20 backdrop-blur-sm group-hover/file:inline-block"
+        className="absolute left-0 top-0 z-20 hidden h-full w-full bg-black/20 opacity-50 group-hover/file:inline-block"
         onClick={() => onViewFile(`${id}.pdf`)}
       />
-      <Tooltip
-        trigger={
-          <div
-            className="absolute right-2 top-2 z-20 hidden h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-[hsla(var(--app-bg))] group-hover/file:flex"
-            onClick={onViewFileContainer}
-          >
-            <FolderOpenIcon size={20} />
-          </div>
-        }
-        content={<span>{openFileTitle()}</span>}
-      />
+
       <Icon type="pdf" />
       <div className="w-full">
-        <h6 className="line-clamp-1 w-4/5 font-medium">
-          {name?.replaceAll(/[-._]/g, ' ')}
+        <h6 className="line-clamp-1 w-4/5 overflow-hidden font-medium">
+          {fileInfo?.filename}
         </h6>
-        {/* <p className="text-[hsla(var(--text-secondary)]">
-          {toGibibytes(Number(size))}
-        </p> */}
+        <p className="text-[hsla(var(--text-secondary)] line-clamp-1 overflow-hidden truncate">
+          {fileInfo?.id ?? id}
+        </p>
       </div>
     </div>
   )
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx
index e83d35fbbb..14041721bb 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx
@@ -1,34 +1,11 @@
 import { memo } from 'react'
 
-import { Tooltip } from '@janhq/joi'
-
-import { FolderOpenIcon } from 'lucide-react'
-
-import { usePath } from '@/hooks/usePath'
-
-import { openFileTitle } from '@/utils/titleUtils'
-
 import { RelativeImage } from '../TextMessage/RelativeImage'
 
 const ImageMessage = ({ image }: { image: string }) => {
-  const { onViewFile, onViewFileContainer } = usePath()
-
   return (
-    <div className="group/image relative mb-2 inline-flex cursor-pointer overflow-hidden rounded-xl">
-      <div className="left-0 top-0 z-20 h-full w-full group-hover/image:inline-block">
-        <RelativeImage src={image} onClick={() => onViewFile(image)} />
-      </div>
-      <Tooltip
-        trigger={
-          <div
-            className="absolute right-2 top-2 z-20 hidden h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-[hsla(var(--app-bg))] group-hover/image:flex"
-            onClick={onViewFileContainer}
-          >
-            <FolderOpenIcon size={20} />
-          </div>
-        }
-        content={<span>{openFileTitle()}</span>}
-      />
+    <div className="group/file relative mb-2 inline-flex overflow-hidden rounded-xl">
+      <RelativeImage src={image} />
     </div>
   )
 }
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
index 72d2a9365b..bfd13b0efc 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
@@ -7,7 +7,7 @@ export const RelativeImage = ({
   onClick,
 }: {
   src: string
-  onClick: () => void
+  onClick?: () => void
 }) => {
   const [path, setPath] = useState<string>('')
 
@@ -17,9 +17,12 @@ export const RelativeImage = ({
     })
   }, [])
   return (
-    <button onClick={onClick}>
+    <button
+      onClick={onClick}
+      className={onClick ? 'cursor-pointer' : 'cursor-default'}
+    >
       <img
-        className="aspect-auto h-[300px] cursor-pointer"
+        className="aspect-auto h-[300px]"
         alt={src}
         src={src.includes('files/') ? `file://${path}/${src}` : src}
       />
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index fe42ef2e1f..0af9b128e1 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -125,7 +125,9 @@ const MessageContainer: React.FC<
         >
           <>
             {image && <ImageMessage image={image} />}
-            {attachedFile && <DocMessage id={props.id} name={props.id} />}
+            {attachedFile && (
+              <DocMessage id={props.attachments?.[0]?.file_id ?? props.id} />
+            )}
 
             {editMessage === props.id ? (
               <div>
diff --git a/web/utils/file.ts b/web/utils/file.ts
index 83c9107c64..e20a75dc37 100644
--- a/web/utils/file.ts
+++ b/web/utils/file.ts
@@ -47,3 +47,12 @@ export const uploader = () => {
   })
   return uppy
 }
+
+/**
+ * Get the file information from the server.
+ */
+export const getFileInfo = (id: string) => {
+  return fetch(`${API_BASE_URL}/v1/files/${id}`)
+    .then((e) => e.json())
+    .catch(() => undefined)
+}

From 8613e35c15466a851fe244851a3331e0f42eb4fa Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Tue, 17 Dec 2024 17:12:03 +0700
Subject: [PATCH 2/3] fix: timestamp issue

---
 core/src/browser/extensions/engines/OAIEngine.ts           | 4 ++--
 core/src/node/api/restful/helper/builder.ts                | 4 ++--
 core/src/types/message/messageEntity.ts                    | 4 ++--
 web/hooks/useSendChatMessage.ts                            | 2 +-
 web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx | 2 +-
 web/utils/datetime.ts                                      | 5 ++++-
 6 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/core/src/browser/extensions/engines/OAIEngine.ts b/core/src/browser/extensions/engines/OAIEngine.ts
index df51d37bb0..0ed34c8db3 100644
--- a/core/src/browser/extensions/engines/OAIEngine.ts
+++ b/core/src/browser/extensions/engines/OAIEngine.ts
@@ -80,8 +80,8 @@ export abstract class OAIEngine extends AIEngine {
       role: ChatCompletionRole.Assistant,
       content: [],
       status: MessageStatus.Pending,
-      created: timestamp,
-      updated: timestamp,
+      created_at: timestamp,
+      completed_at: timestamp,
       object: 'thread.message',
     }
 
diff --git a/core/src/node/api/restful/helper/builder.ts b/core/src/node/api/restful/helper/builder.ts
index 230eb64ab0..31eb649a3c 100644
--- a/core/src/node/api/restful/helper/builder.ts
+++ b/core/src/node/api/restful/helper/builder.ts
@@ -194,8 +194,8 @@ export const createMessage = async (threadId: string, message: any) => {
       id: msgId,
       thread_id: threadId,
       status: MessageStatus.Ready,
-      created: createdAt,
-      updated: createdAt,
+      created_at: createdAt,
+      completed_at: createdAt,
       object: 'thread.message',
       role: message.role,
       content: [
diff --git a/core/src/types/message/messageEntity.ts b/core/src/types/message/messageEntity.ts
index 7c2774da6d..302b824ee5 100644
--- a/core/src/types/message/messageEntity.ts
+++ b/core/src/types/message/messageEntity.ts
@@ -27,9 +27,9 @@ export type ThreadMessage = {
   /** The status of this message. **/
   status: MessageStatus
   /** The timestamp indicating when this message was created. Represented in Unix time. **/
-  created: number
+  created_at: number
   /** The timestamp indicating when this message was updated. Represented in Unix time. **/
-  updated: number
+  completed_at: number
   /** The additional metadata of this message. **/
   metadata?: Record<string, unknown>
 
diff --git a/web/hooks/useSendChatMessage.ts b/web/hooks/useSendChatMessage.ts
index bbe5e3cd71..68db97c2a8 100644
--- a/web/hooks/useSendChatMessage.ts
+++ b/web/hooks/useSendChatMessage.ts
@@ -181,7 +181,7 @@ export default function useSendChatMessage() {
       // Update thread state
       const updatedThread: Thread = {
         ...activeThreadRef.current,
-        updated: newMessage.created,
+        updated: newMessage.created_at,
         metadata: {
           ...activeThreadRef.current.metadata,
           lastMessage: prompt,
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index 0af9b128e1..ddd82590bc 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -91,7 +91,7 @@ const MessageContainer: React.FC<
             : (activeAssistant?.assistant_name ?? props.role)}
         </div>
         <p className="text-xs font-medium text-gray-400">
-          {props.created && displayDate(props.created ?? new Date())}
+          {props.created_at && displayDate(props.created_at ?? new Date())}
         </p>
       </div>
 
diff --git a/web/utils/datetime.ts b/web/utils/datetime.ts
index e596f08418..aec1c92ab8 100644
--- a/web/utils/datetime.ts
+++ b/web/utils/datetime.ts
@@ -6,7 +6,10 @@ export const isToday = (timestamp: number) => {
 export const displayDate = (timestamp?: string | number | Date) => {
   if (!timestamp) return 'N/A'
 
-  const date = new Date(timestamp)
+  const date =
+    typeof timestamp === 'number'
+      ? new Date(timestamp * 1000)
+      : new Date(timestamp)
 
   let displayDate = `${date.toLocaleDateString(undefined, {
     day: '2-digit',

From 3a9c99972c34d9b3c883b25cacc98248b9bd7fff Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Tue, 17 Dec 2024 18:11:07 +0700
Subject: [PATCH 3/3] test: update test cases

---
 web/utils/datetime.test.ts             | 39 +++++++++++++-------------
 web/utils/threadMessageBuilder.test.ts |  4 +--
 web/utils/threadMessageBuilder.ts      |  4 +--
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/web/utils/datetime.test.ts b/web/utils/datetime.test.ts
index 75bdb1f8f7..e7e00ada98 100644
--- a/web/utils/datetime.test.ts
+++ b/web/utils/datetime.test.ts
@@ -1,27 +1,28 @@
+import { displayDate } from './datetime'
+import { isToday } from './datetime'
 
-import { displayDate } from './datetime';
-import { isToday } from './datetime';
-
-test('should return only time for today\'s timestamp', () => {
-  const today = new Date();
-  const timestamp = today.getTime();
-  const expectedTime = today.toLocaleTimeString(undefined, {
+test("should return only time for today's timestamp", () => {
+  const today = new Date()
+  const timestamp = today.getTime()
+  const expectedTime = `${today.toLocaleDateString(undefined, {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  })}, ${today.toLocaleTimeString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',
     hour12: true,
-  });
-  expect(displayDate(timestamp)).toBe(expectedTime);
-});
-
+  })}`
+  expect(displayDate(timestamp / 1000)).toBe(expectedTime)
+})
 
 test('should return N/A for undefined timestamp', () => {
-  expect(displayDate()).toBe('N/A');
-});
-
+  expect(displayDate()).toBe('N/A')
+})
 
-test('should return true for today\'s timestamp', () => {
-  const today = new Date();
-  const timestamp = today.setHours(0, 0, 0, 0);
-  expect(isToday(timestamp)).toBe(true);
-});
+test("should return true for today's timestamp", () => {
+  const today = new Date()
+  const timestamp = today.setHours(0, 0, 0, 0)
+  expect(isToday(timestamp)).toBe(true)
+})
diff --git a/web/utils/threadMessageBuilder.test.ts b/web/utils/threadMessageBuilder.test.ts
index 856c9ad06b..d296635e64 100644
--- a/web/utils/threadMessageBuilder.test.ts
+++ b/web/utils/threadMessageBuilder.test.ts
@@ -23,8 +23,8 @@ describe('ThreadMessageBuilder', () => {
     expect(result.thread_id).toBe(msgRequest.thread.id)
     expect(result.role).toBe(ChatCompletionRole.User)
     expect(result.status).toBe(MessageStatus.Ready)
-    expect(result.created).toBeDefined()
-    expect(result.updated).toBeDefined()
+    expect(result.created_at).toBeDefined()
+    expect(result.completed_at).toBeDefined()
     expect(result.object).toBe('thread.message')
     expect(result.content).toEqual([])
   })
diff --git a/web/utils/threadMessageBuilder.ts b/web/utils/threadMessageBuilder.ts
index d1aac2f842..d10ef03c40 100644
--- a/web/utils/threadMessageBuilder.ts
+++ b/web/utils/threadMessageBuilder.ts
@@ -29,8 +29,8 @@ export class ThreadMessageBuilder {
       attachments: this.attachments,
       role: ChatCompletionRole.User,
       status: MessageStatus.Ready,
-      created: timestamp,
-      updated: timestamp,
+      created_at: timestamp,
+      completed_at: timestamp,
       object: 'thread.message',
       content: this.content,
     }