chore: refactor message components

web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useEffect, useState } from 'react'
+import React, { forwardRef, useEffect, useMemo, useState } from 'react'
 
 import {
+  ContentType,
   events,
   MessageEvent,
   MessageStatus,
@@ -8,9 +9,20 @@ import {
   ThreadMessage,
 } from '@janhq/core'
 
+import { Tooltip } from '@janhq/joi'
+
+import { FolderOpenIcon } from 'lucide-react'
+
 import ErrorMessage from '@/containers/ErrorMessage'
 
-import SimpleTextMessage from '../SimpleTextMessage'
+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'
 
 type Ref = HTMLDivElement
 
@@ -27,6 +39,13 @@ 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) {
@@ -54,7 +73,60 @@ const ChatItem = forwardRef<Ref, Props>((message, ref) => {
     <>
       {status !== MessageStatus.Error && content?.length > 0 && (
         <div ref={ref} className="relative">
-          <SimpleTextMessage {...message} content={content} status={status} />
+          {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} />
+          )}
         </div>
       )}
       {errorMessage && !message.loadModelError && (

web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx

@@ -1,217 +1,26 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, { memo, useMemo } from 'react'
+import React, { memo } from 'react'
 
 import Markdown from 'react-markdown'
 
-import { ChatCompletionRole, ContentType, ThreadMessage } from '@janhq/core'
-
-import { Tooltip } from '@janhq/joi'
-
 import latex from 'highlight.js/lib/languages/latex'
-import { useAtomValue } from 'jotai'
-import { FolderOpenIcon } from 'lucide-react'
 import rehypeHighlight from 'rehype-highlight'
 import rehypeHighlightCodeLines from 'rehype-highlight-code-lines'
 import rehypeKatex from 'rehype-katex'
 import rehypeRaw from 'rehype-raw'
 import remarkMath from 'remark-math'
 import 'katex/dist/katex.min.css'
-import { twMerge } from 'tailwind-merge'
-
-import LogoMark from '@/containers/Brand/Logo/Mark'
 
 import { useClipboard } from '@/hooks/useClipboard'
-import { usePath } from '@/hooks/usePath'
 
 import { getLanguageFromExtension } from '@/utils/codeLanguageExtension'
-import { toGibibytes } from '@/utils/converter'
-import { displayDate } from '@/utils/datetime'
-
-import { openFileTitle } from '@/utils/titleUtils'
-
-import EditChatInput from '../EditChatInput'
-import Icon from '../FileUploadPreview/Icon'
-import MessageToolbar from '../MessageToolbar'
-
-import { RelativeImage } from './RelativeImage'
-
-import {
-  editMessageAtom,
-  getCurrentChatMessagesAtom,
-  tokenSpeedAtom,
-} from '@/helpers/atoms/ChatMessage.atom'
-import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
-
-const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
-  const isUser = props.role === ChatCompletionRole.User
-  const isSystem = props.role === ChatCompletionRole.System
-  const editMessage = useAtomValue(editMessageAtom)
-  const activeThread = useAtomValue(activeThreadAtom)
-
-  const { onViewFile, onViewFileContainer } = usePath()
-  const tokenSpeed = useAtomValue(tokenSpeedAtom)
-  const messages = useAtomValue(getCurrentChatMessagesAtom)
-
-  const text = useMemo(
-    () => props.content[0]?.text?.value ?? '',
-    [props.content]
-  )
-  const messageType = useMemo(
-    () => props.content[0]?.type ?? '',
-    [props.content]
-  )
-
-  const annotation = useMemo(
-    () => props.content[0]?.text?.annotations[0] ?? '',
-    [props.content]
-  )
-
-  return (
-    <div className="group relative mx-auto max-w-[700px] p-4">
-      <div
-        className={twMerge(
-          'mb-2 flex items-center justify-start gap-x-2',
-          !isUser && 'mt-2'
-        )}
-      >
-        {!isUser && !isSystem && <LogoMark width={28} />}
-        {isUser && (
-          <div className="flex h-8 w-8 items-center justify-center rounded-full border border-[hsla(var(--app-border))] last:border-none">
-            <svg
-              width="12"
-              height="16"
-              viewBox="0 0 12 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6 0.497864C4.34315 0.497864 3 1.84101 3 3.49786C3 5.15472 4.34315 6.49786 6 6.49786C7.65685 6.49786 9 5.15472 9 3.49786C9 1.84101 7.65685 0.497864 6 0.497864ZM9.75 7.99786L2.24997 7.99787C1.00734 7.99787 0 9.00527 0 10.2479C0 11.922 0.688456 13.2633 1.81822 14.1701C2.93013 15.0625 4.42039 15.4979 6 15.4979C7.57961 15.4979 9.06987 15.0625 10.1818 14.1701C11.3115 13.2633 12 11.922 12 10.2479C12 9.00522 10.9926 7.99786 9.75 7.99786Z"
-                fill="#9CA3AF"
-              />
-            </svg>
-          </div>
-        )}
-
-        <div
-          className={twMerge(
-            'font-extrabold capitalize',
-            isUser && 'text-gray-500'
-          )}
-        >
-          {isUser
-            ? props.role
-            : (activeThread?.assistants[0].assistant_name ?? props.role)}
-        </div>
-        <p className="text-xs font-medium text-gray-400">
-          {displayDate(props.created)}
-        </p>
-        <div
-          className={twMerge(
-            'absolute right-0 cursor-pointer transition-all',
-            messages[messages.length - 1]?.id === props.id && !isUser
-              ? 'absolute -bottom-8 right-4'
-              : 'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex'
-          )}
-        >
-          <MessageToolbar message={props} />
-        </div>
-        {tokenSpeed &&
-          tokenSpeed.message === props.id &&
-          tokenSpeed.tokenSpeed > 0 && (
-            <p className="absolute right-8 text-xs font-medium text-[hsla(var(--text-secondary))]">
-              Token Speed: {Number(tokenSpeed.tokenSpeed).toFixed(2)}t/s
-            </p>
-          )}
-      </div>
-
-      <div
-        className={twMerge(
-          'w-full',
-          !isUser && !text.includes(' ') && 'break-all'
-        )}
-      >
-        <>
-          {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={props.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(`${props.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={props.content[0].type} />
-              <div className="w-full">
-                <h6 className="line-clamp-1 w-4/5 font-medium">
-                  {props.content[0].text.name?.replaceAll(/[-._]/g, ' ')}
-                </h6>
-                <p className="text-[hsla(var(--text-secondary)]">
-                  {toGibibytes(Number(props.content[0].text.size))}
-                </p>
-              </div>
-            </div>
-          )}
-
-          {editMessage === props.id ? (
-            <div>
-              <EditChatInput message={props} />
-            </div>
-          ) : (
-            <div
-              className={twMerge(
-                'message max-width-[100%] flex flex-col gap-y-2 overflow-auto leading-relaxed'
-              )}
-              dir="ltr"
-            >
-              <MarkdownTextMessage
-                id={props.id}
-                text={text}
-              ></MarkdownTextMessage>
-            </div>
-          )}
-        </>
-      </div>
-    </div>
-  )
-}
 
 export const MarkdownTextMessage = memo(
   ({ text, id }: { id: string; text: string }) => {
-    console.log('rerender', id)
     const clipboard = useClipboard({ timeout: 1000 })
+    console.log('rerender', id)
 
     function extractCodeLines(node: { children: { children: any[] }[] }) {
       const codeLines: any[] = []
@@ -412,5 +221,3 @@ export const MarkdownTextMessage = memo(
     )
   }
 )
-
-export default React.memo(SimpleTextMessage)

web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx

@@ -0,0 +1,129 @@
+import React, { useMemo } from 'react'
+
+import { ChatCompletionRole, ContentType, ThreadMessage } from '@janhq/core'
+
+import { Tooltip } from '@janhq/joi'
+
+import { useAtomValue } from 'jotai'
+import { FolderOpenIcon } from 'lucide-react'
+import 'katex/dist/katex.min.css'
+import { twMerge } from 'tailwind-merge'
+
+import LogoMark from '@/containers/Brand/Logo/Mark'
+
+import { usePath } from '@/hooks/usePath'
+
+import { displayDate } from '@/utils/datetime'
+
+import EditChatInput from '../EditChatInput'
+import MessageToolbar from '../MessageToolbar'
+
+import { MarkdownTextMessage } from './MarkdownTextMessage'
+
+import {
+  editMessageAtom,
+  getCurrentChatMessagesAtom,
+  tokenSpeedAtom,
+} from '@/helpers/atoms/ChatMessage.atom'
+import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
+
+const TextMessage: React.FC<ThreadMessage> = (props) => {
+  const isUser = props.role === ChatCompletionRole.User
+  const isSystem = props.role === ChatCompletionRole.System
+  const editMessage = useAtomValue(editMessageAtom)
+  const activeThread = useAtomValue(activeThreadAtom)
+
+  const tokenSpeed = useAtomValue(tokenSpeedAtom)
+  const messages = useAtomValue(getCurrentChatMessagesAtom)
+
+  const text = useMemo(
+    () => props.content[0]?.text?.value ?? '',
+    [props.content]
+  )
+
+  return (
+    <div className="group relative mx-auto max-w-[700px] p-4">
+      <div
+        className={twMerge(
+          'mb-2 flex items-center justify-start gap-x-2',
+          !isUser && 'mt-2'
+        )}
+      >
+        {!isUser && !isSystem && <LogoMark width={28} />}
+        {isUser && (
+          <div className="flex h-8 w-8 items-center justify-center rounded-full border border-[hsla(var(--app-border))] last:border-none">
+            <svg
+              width="12"
+              height="16"
+              viewBox="0 0 12 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 0.497864C4.34315 0.497864 3 1.84101 3 3.49786C3 5.15472 4.34315 6.49786 6 6.49786C7.65685 6.49786 9 5.15472 9 3.49786C9 1.84101 7.65685 0.497864 6 0.497864ZM9.75 7.99786L2.24997 7.99787C1.00734 7.99787 0 9.00527 0 10.2479C0 11.922 0.688456 13.2633 1.81822 14.1701C2.93013 15.0625 4.42039 15.4979 6 15.4979C7.57961 15.4979 9.06987 15.0625 10.1818 14.1701C11.3115 13.2633 12 11.922 12 10.2479C12 9.00522 10.9926 7.99786 9.75 7.99786Z"
+                fill="#9CA3AF"
+              />
+            </svg>
+          </div>
+        )}
+
+        <div
+          className={twMerge(
+            'font-extrabold capitalize',
+            isUser && 'text-gray-500'
+          )}
+        >
+          {isUser
+            ? props.role
+            : (activeThread?.assistants[0].assistant_name ?? props.role)}
+        </div>
+        <p className="text-xs font-medium text-gray-400">
+          {displayDate(props.created)}
+        </p>
+        <div
+          className={twMerge(
+            'absolute right-0 cursor-pointer transition-all',
+            messages[messages.length - 1]?.id === props.id && !isUser
+              ? 'absolute -bottom-8 right-4'
+              : 'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex'
+          )}
+        >
+          <MessageToolbar message={props} />
+        </div>
+        {tokenSpeed &&
+          tokenSpeed.message === props.id &&
+          tokenSpeed.tokenSpeed > 0 && (
+            <p className="absolute right-8 text-xs font-medium text-[hsla(var(--text-secondary))]">
+              Token Speed: {Number(tokenSpeed.tokenSpeed).toFixed(2)}t/s
+            </p>
+          )}
+      </div>
+
+      <div
+        className={twMerge(
+          'w-full',
+          !isUser && !text.includes(' ') && 'break-all'
+        )}
+      >
+        <>
+          {editMessage === props.id ? (
+            <div>
+              <EditChatInput message={props} />
+            </div>
+          ) : (
+            <div
+              className={twMerge(
+                'message max-width-[100%] flex flex-col gap-y-2 overflow-auto leading-relaxed'
+              )}
+              dir="ltr"
+            >
+              <MarkdownTextMessage id={props.id} text={text} />
+            </div>
+          )}
+        </>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(TextMessage)