fix: prevent other DOM elements from rerendering when generating

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

@@ -1,16 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, { useEffect, useState } from 'react'
+import React, { memo, useMemo } from 'react'
 
 import Markdown from 'react-markdown'
 
-import {
+import { ChatCompletionRole, ContentType, ThreadMessage } from '@janhq/core'
-  ChatCompletionRole,
-  ContentType,
-  MessageStatus,
-  ThreadMessage,
-} from '@janhq/core'
 
 import { Tooltip } from '@janhq/joi'
 
@@ -50,16 +45,172 @@ import {
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
-  let text = ''
   const isUser = props.role === ChatCompletionRole.User
   const isSystem = props.role === ChatCompletionRole.System
   const editMessage = useAtomValue(editMessageAtom)
   const activeThread = useAtomValue(activeThreadAtom)
 
-  if (props.content && props.content.length > 0) {
+  const { onViewFile, onViewFileContainer } = usePath()
-    text = props.content[0]?.text?.value ?? ''
+  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 })
 
     function extractCodeLines(node: { children: { children: any[] }[] }) {
@@ -101,7 +252,8 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
       return (tree: { children: any[] }) => {
         tree.children = tree.children.map((node) => {
           if (node.tagName === 'pre' && node.children[0]?.tagName === 'code') {
-          const language = node.children[0].properties.className?.[1]?.replace(
+            const language =
+              node.children[0].properties.className?.[1]?.replace(
                 'language-',
                 ''
               )
@@ -232,143 +384,8 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
         })
       }
     }
-
-  const { onViewFile, onViewFileContainer } = usePath()
-  const tokenSpeed = useAtomValue(tokenSpeedAtom)
-  const messages = useAtomValue(getCurrentChatMessagesAtom)
-
     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'
-        )}
-      >
       <>
-          {props.content[0]?.type === 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={props.content[0]?.text.annotations[0]}
-                  id={props.id}
-                  onClick={() =>
-                    onViewFile(`${props.content[0]?.text.annotations[0]}`)
-                  }
-                />
-              </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>
-          )}
-
-          {props.content[0]?.type === 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}.${props.content[0]?.type}`)
-                }
-              />
-              <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"
-            >
         <Markdown
           remarkPlugins={[remarkMath]}
           rehypePlugins={[
@@ -391,12 +408,9 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
         >
           {text}
         </Markdown>
-            </div>
-          )}
       </>
-      </div>
-    </div>
     )
   }
+)
 
 export default React.memo(SimpleTextMessage)