From fc75fb64d255180a5ce83728343ccd4a65f7323e Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Mon, 2 Dec 2024 10:35:51 +0700
Subject: [PATCH] chore: refactor message container and types

---
 .../ThreadCenterPanel/ChatItem/index.tsx      | 78 +------------------
 .../TextMessage/DocMessage.tsx                | 55 +++++++++++++
 .../TextMessage/ImageMessage.tsx              | 45 +++++++++++
 .../TextMessage/RelativeImage.tsx             |  4 +-
 .../ThreadCenterPanel/TextMessage/index.tsx   | 23 +++++-
 5 files changed, 124 insertions(+), 81 deletions(-)
 create mode 100644 web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
 create mode 100644 web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
index c7c05dca9..10d408211 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
@@ -1,7 +1,6 @@
-import React, { forwardRef, useEffect, useMemo, useState } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 
 import {
-  ContentType,
   events,
   MessageEvent,
   MessageStatus,
@@ -9,20 +8,9 @@ import {
   ThreadMessage,
 } from '@janhq/core'
 
-import { Tooltip } from '@janhq/joi'
-
-import { FolderOpenIcon } from 'lucide-react'
-
 import ErrorMessage from '@/containers/ErrorMessage'
 
-import { usePath } from '@/hooks/usePath'
-
-import { toGibibytes } from '@/utils/converter'
-import { openFileTitle } from '@/utils/titleUtils'
-
-import Icon from '../FileUploadPreview/Icon'
-import TextMessage from '../TextMessage'
-import { RelativeImage } from '../TextMessage/RelativeImage'
+import MessageContainer from '../TextMessage'
 
 type Ref = HTMLDivElement
 
@@ -39,13 +27,6 @@ const ChatItem = forwardRef<Ref, Props>((message, ref) => {
       ? message
       : undefined
   )
-  const messageType = useMemo(() => content[0]?.type ?? '', [content])
-
-  const annotation = useMemo(
-    () => content[0]?.text?.annotations[0] ?? '',
-    [content]
-  )
-  const { onViewFile, onViewFileContainer } = usePath()
 
   function onMessageUpdate(data: ThreadMessage) {
     if (data.id === message.id) {
@@ -73,60 +54,7 @@ const ChatItem = forwardRef<Ref, Props>((message, ref) => {
     <>
       {status !== MessageStatus.Error && content?.length > 0 && (
         <div ref={ref} className="relative">
-          {messageType === ContentType.Image && (
-            <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={annotation}
-                  id={message.id}
-                  onClick={() => onViewFile(annotation)}
-                />
-              </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>
-          )}
-
-          {messageType === ContentType.Pdf && (
-            <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"
-                onClick={() => onViewFile(`${message.id}.${messageType}`)}
-              />
-              <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={content[0].type} />
-              <div className="w-full">
-                <h6 className="line-clamp-1 w-4/5 font-medium">
-                  {content[0].text.name?.replaceAll(/[-._]/g, ' ')}
-                </h6>
-                <p className="text-[hsla(var(--text-secondary)]">
-                  {toGibibytes(Number(content[0].text.size))}
-                </p>
-              </div>
-            </div>
-          )}
-          {messageType === ContentType.Text && (
-            <TextMessage {...message} content={content} status={status} />
-          )}
+          <MessageContainer {...message} content={content} status={status} />
         </div>
       )}
       {errorMessage && !message.loadModelError && (
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
new file mode 100644
index 000000000..9c0289734
--- /dev/null
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
@@ -0,0 +1,55 @@
+import { memo } from 'react'
+
+import { Tooltip } from '@janhq/joi'
+
+import { FolderOpenIcon } from 'lucide-react'
+
+import { usePath } from '@/hooks/usePath'
+
+import { toGibibytes } from '@/utils/converter'
+import { openFileTitle } from '@/utils/titleUtils'
+
+import Icon from '../FileUploadPreview/Icon'
+
+const DocMessage = ({
+  id,
+  name,
+  size,
+}: {
+  id: string
+  name?: string
+  size?: number
+}) => {
+  const { onViewFile, onViewFileContainer } = usePath()
+
+  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"
+        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>
+        <p className="text-[hsla(var(--text-secondary)]">
+          {toGibibytes(Number(size))}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default memo(DocMessage)
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx
new file mode 100644
index 000000000..117f259c0
--- /dev/null
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx
@@ -0,0 +1,45 @@
+import { memo, useMemo } from 'react'
+
+import { ThreadContent } from '@janhq/core'
+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 = ({ content }: { content: ThreadContent }) => {
+  const { onViewFile, onViewFileContainer } = usePath()
+
+  const annotation = useMemo(
+    () => content?.text?.annotations[0] ?? '',
+    [content]
+  )
+
+  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={annotation}
+          onClick={() => onViewFile(annotation)}
+        />
+      </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>
+  )
+}
+
+export default memo(ImageMessage)
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
index fda4c0755..72d2a9365 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
@@ -3,11 +3,9 @@ import { useEffect, useState } from 'react'
 import { getJanDataFolderPath } from '@janhq/core'
 
 export const RelativeImage = ({
-  id,
   src,
   onClick,
 }: {
-  id: string
   src: string
   onClick: () => void
 }) => {
@@ -22,7 +20,7 @@ export const RelativeImage = ({
     <button onClick={onClick}>
       <img
         className="aspect-auto h-[300px] cursor-pointer"
-        alt={id}
+        alt={src}
         src={src.includes('files/') ? `file://${path}/${src}` : src}
       />
     </button>
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index 905325e2e..7c4950b51 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 
-import { ChatCompletionRole, ThreadMessage } from '@janhq/core'
+import { ChatCompletionRole, ContentType, ThreadMessage } from '@janhq/core'
 
 import { useAtomValue } from 'jotai'
 import 'katex/dist/katex.min.css'
@@ -13,6 +13,8 @@ import { displayDate } from '@/utils/datetime'
 import EditChatInput from '../EditChatInput'
 import MessageToolbar from '../MessageToolbar'
 
+import DocMessage from './DocMessage'
+import ImageMessage from './ImageMessage'
 import { MarkdownTextMessage } from './MarkdownTextMessage'
 
 import {
@@ -22,7 +24,7 @@ import {
 } from '@/helpers/atoms/ChatMessage.atom'
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
-const TextMessage: React.FC<ThreadMessage> = (props) => {
+const MessageContainer: React.FC<ThreadMessage> = (props) => {
   const isUser = props.role === ChatCompletionRole.User
   const isSystem = props.role === ChatCompletionRole.System
   const editMessage = useAtomValue(editMessageAtom)
@@ -35,6 +37,10 @@ const TextMessage: React.FC<ThreadMessage> = (props) => {
     () => props.content[0]?.text?.value ?? '',
     [props.content]
   )
+  const messageType = useMemo(
+    () => props.content[0]?.type ?? '',
+    [props.content]
+  )
 
   return (
     <div className="group relative mx-auto max-w-[700px] p-4">
@@ -101,6 +107,17 @@ const TextMessage: React.FC<ThreadMessage> = (props) => {
         )}
       >
         <>
+          {messageType === ContentType.Image && (
+            <ImageMessage content={props.content[0]} />
+          )}
+          {messageType === ContentType.Pdf && (
+            <DocMessage
+              id={props.id}
+              name={props.content[0]?.text?.name}
+              size={props.content[0]?.text?.size}
+            />
+          )}
+
           {editMessage === props.id ? (
             <div>
               <EditChatInput message={props} />
@@ -121,4 +138,4 @@ const TextMessage: React.FC<ThreadMessage> = (props) => {
   )
 }
 
-export default React.memo(TextMessage)
+export default React.memo(MessageContainer)