chore: refactor message container and types

2024-12-02 10:35:51 +07:00 · 2024-12-02 10:35:51 +07:00 · fc75fb64d2
commit fc75fb64d2
parent e800349ed5
5 changed files with 124 additions and 81 deletions
--- 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 && (
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
+++ 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)
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/ImageMessage.tsx
+++ 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)
--- 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>
--- 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)