diff --git a/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx
index d84ae57d7..a8d2cdbf2 100644
--- a/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx
+++ b/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 {
-  ChatCompletionRole,
-  ContentType,
-  MessageStatus,
-  ThreadMessage,
-} from '@janhq/core'
+import { ChatCompletionRole, ContentType, ThreadMessage } from '@janhq/core'
 
 import { Tooltip } from '@janhq/joi'
 
@@ -50,193 +45,29 @@ 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) {
-    text = props.content[0]?.text?.value ?? ''
-  }
-
-  const clipboard = useClipboard({ timeout: 1000 })
-
-  function extractCodeLines(node: { children: { children: any[] }[] }) {
-    const codeLines: any[] = []
-
-    // Helper function to extract text recursively from children
-    function getTextFromNode(node: {
-      type: string
-      value: any
-      children: any[]
-    }): string {
-      if (node.type === 'text') {
-        return node.value
-      } else if (node.children) {
-        return node.children.map(getTextFromNode).join('')
-      }
-      return ''
-    }
-
-    // Traverse each line in the <code> block
-    node.children[0].children.forEach(
-      (lineNode: {
-        type: string
-        tagName: string
-        value: any
-        children: any[]
-      }) => {
-        if (lineNode.type === 'element' && lineNode.tagName === 'span') {
-          const lineContent = getTextFromNode(lineNode)
-          codeLines.push(lineContent)
-        }
-      }
-    )
-
-    // Join the lines with newline characters for proper formatting
-    return codeLines.join('\n')
-  }
-  function wrapCodeBlocksWithoutVisit() {
-    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(
-            'language-',
-            ''
-          )
-
-          if (extractCodeLines(node) === '') {
-            return node
-          }
-
-          return {
-            type: 'element',
-            tagName: 'div',
-            properties: {
-              className: ['code-block-wrapper'],
-            },
-            children: [
-              {
-                type: 'element',
-                tagName: 'div',
-                properties: {
-                  className: [
-                    'code-block',
-                    'group/item',
-                    'relative',
-                    'my-4',
-                    'overflow-auto',
-                  ],
-                },
-                children: [
-                  {
-                    type: 'element',
-                    tagName: 'div',
-                    properties: {
-                      className:
-                        'code-header bg-[hsla(var(--app-code-block))] flex justify-between items-center py-2 px-3 code-header--border rounded-t-lg',
-                    },
-                    children: [
-                      {
-                        type: 'element',
-                        tagName: 'span',
-                        properties: {
-                          className: 'text-xs font-medium text-gray-300',
-                        },
-                        children: [
-                          {
-                            type: 'text',
-                            value: language
-                              ? `${getLanguageFromExtension(language)}`
-                              : '',
-                          },
-                        ],
-                      },
-                      {
-                        type: 'element',
-                        tagName: 'button',
-                        properties: {
-                          className:
-                            'copy-button ml-auto flex items-center gap-1 text-xs font-medium text-gray-400 hover:text-gray-600 focus:outline-none',
-                          onClick: (event: Event) => {
-                            clipboard.copy(extractCodeLines(node))
-
-                            const button = event.currentTarget as HTMLElement
-                            button.innerHTML = `
-                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none text-green-600"><path d="M20 6 9 17l-5-5"/></svg>
-                              <span>Copied</span>
-                            `
-
-                            setTimeout(() => {
-                              button.innerHTML = `
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy pointer-events-none text-gray-400"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
-                                <span>Copy</span>
-                              `
-                            }, 2000)
-                          },
-                        },
-                        children: [
-                          {
-                            type: 'element',
-                            tagName: 'svg',
-                            properties: {
-                              xmlns: 'http://www.w3.org/2000/svg',
-                              width: '16',
-                              height: '16',
-                              viewBox: '0 0 24 24',
-                              fill: 'none',
-                              stroke: 'currentColor',
-                              strokeWidth: '2',
-                              strokeLinecap: 'round',
-                              strokeLinejoin: 'round',
-                              className:
-                                'lucide lucide-copy pointer-events-none text-gray-400',
-                            },
-                            children: [
-                              {
-                                type: 'element',
-                                tagName: 'rect',
-                                properties: {
-                                  width: '14',
-                                  height: '14',
-                                  x: '8',
-                                  y: '8',
-                                  rx: '2',
-                                  ry: '2',
-                                },
-                                children: [],
-                              },
-                              {
-                                type: 'element',
-                                tagName: 'path',
-                                properties: {
-                                  d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2',
-                                },
-                                children: [],
-                              },
-                            ],
-                          },
-                          { type: 'text', value: 'Copy' },
-                        ],
-                      },
-                    ],
-                  },
-                  node,
-                ],
-              },
-            ],
-          }
-        }
-        return node
-      })
-    }
-  }
-
   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
@@ -302,15 +133,13 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
         )}
       >
         <>
-          {props.content[0]?.type === ContentType.Image && (
+          {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={props.content[0]?.text.annotations[0]}
+                  src={annotation}
                   id={props.id}
-                  onClick={() =>
-                    onViewFile(`${props.content[0]?.text.annotations[0]}`)
-                  }
+                  onClick={() => onViewFile(annotation)}
                 />
               </div>
               <Tooltip
@@ -327,13 +156,11 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
             </div>
           )}
 
-          {props.content[0]?.type === ContentType.Pdf && (
+          {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}.${props.content[0]?.type}`)
-                }
+                onClick={() => onViewFile(`${props.id}.${messageType}`)}
               />
               <Tooltip
                 trigger={
@@ -369,28 +196,10 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
               )}
               dir="ltr"
             >
-              <Markdown
-                remarkPlugins={[remarkMath]}
-                rehypePlugins={[
-                  [rehypeKatex, { throwOnError: false }],
-                  rehypeRaw,
-                  [
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    rehypeHighlight,
-                    {
-                      languages: { latex },
-                      subset: false,
-                      plainText: ['txt', 'text'],
-                    },
-                  ],
-                  [rehypeHighlightCodeLines, { showLineNumbers: true }],
-                  wrapCodeBlocksWithoutVisit,
-                ]}
-                skipHtml={true}
-              >
-                {text}
-              </Markdown>
+              <MarkdownTextMessage
+                id={props.id}
+                text={text}
+              ></MarkdownTextMessage>
             </div>
           )}
         </>
@@ -399,4 +208,209 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
   )
 }
 
+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[] }[] }) {
+      const codeLines: any[] = []
+
+      // Helper function to extract text recursively from children
+      function getTextFromNode(node: {
+        type: string
+        value: any
+        children: any[]
+      }): string {
+        if (node.type === 'text') {
+          return node.value
+        } else if (node.children) {
+          return node.children.map(getTextFromNode).join('')
+        }
+        return ''
+      }
+
+      // Traverse each line in the <code> block
+      node.children[0].children.forEach(
+        (lineNode: {
+          type: string
+          tagName: string
+          value: any
+          children: any[]
+        }) => {
+          if (lineNode.type === 'element' && lineNode.tagName === 'span') {
+            const lineContent = getTextFromNode(lineNode)
+            codeLines.push(lineContent)
+          }
+        }
+      )
+
+      // Join the lines with newline characters for proper formatting
+      return codeLines.join('\n')
+    }
+    function wrapCodeBlocksWithoutVisit() {
+      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(
+                'language-',
+                ''
+              )
+
+            if (extractCodeLines(node) === '') {
+              return node
+            }
+
+            return {
+              type: 'element',
+              tagName: 'div',
+              properties: {
+                className: ['code-block-wrapper'],
+              },
+              children: [
+                {
+                  type: 'element',
+                  tagName: 'div',
+                  properties: {
+                    className: [
+                      'code-block',
+                      'group/item',
+                      'relative',
+                      'my-4',
+                      'overflow-auto',
+                    ],
+                  },
+                  children: [
+                    {
+                      type: 'element',
+                      tagName: 'div',
+                      properties: {
+                        className:
+                          'code-header bg-[hsla(var(--app-code-block))] flex justify-between items-center py-2 px-3 code-header--border rounded-t-lg',
+                      },
+                      children: [
+                        {
+                          type: 'element',
+                          tagName: 'span',
+                          properties: {
+                            className: 'text-xs font-medium text-gray-300',
+                          },
+                          children: [
+                            {
+                              type: 'text',
+                              value: language
+                                ? `${getLanguageFromExtension(language)}`
+                                : '',
+                            },
+                          ],
+                        },
+                        {
+                          type: 'element',
+                          tagName: 'button',
+                          properties: {
+                            className:
+                              'copy-button ml-auto flex items-center gap-1 text-xs font-medium text-gray-400 hover:text-gray-600 focus:outline-none',
+                            onClick: (event: Event) => {
+                              clipboard.copy(extractCodeLines(node))
+
+                              const button = event.currentTarget as HTMLElement
+                              button.innerHTML = `
+                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none text-green-600"><path d="M20 6 9 17l-5-5"/></svg>
+                              <span>Copied</span>
+                            `
+
+                              setTimeout(() => {
+                                button.innerHTML = `
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy pointer-events-none text-gray-400"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+                                <span>Copy</span>
+                              `
+                              }, 2000)
+                            },
+                          },
+                          children: [
+                            {
+                              type: 'element',
+                              tagName: 'svg',
+                              properties: {
+                                xmlns: 'http://www.w3.org/2000/svg',
+                                width: '16',
+                                height: '16',
+                                viewBox: '0 0 24 24',
+                                fill: 'none',
+                                stroke: 'currentColor',
+                                strokeWidth: '2',
+                                strokeLinecap: 'round',
+                                strokeLinejoin: 'round',
+                                className:
+                                  'lucide lucide-copy pointer-events-none text-gray-400',
+                              },
+                              children: [
+                                {
+                                  type: 'element',
+                                  tagName: 'rect',
+                                  properties: {
+                                    width: '14',
+                                    height: '14',
+                                    x: '8',
+                                    y: '8',
+                                    rx: '2',
+                                    ry: '2',
+                                  },
+                                  children: [],
+                                },
+                                {
+                                  type: 'element',
+                                  tagName: 'path',
+                                  properties: {
+                                    d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2',
+                                  },
+                                  children: [],
+                                },
+                              ],
+                            },
+                            { type: 'text', value: 'Copy' },
+                          ],
+                        },
+                      ],
+                    },
+                    node,
+                  ],
+                },
+              ],
+            }
+          }
+          return node
+        })
+      }
+    }
+    return (
+      <>
+        <Markdown
+          remarkPlugins={[remarkMath]}
+          rehypePlugins={[
+            [rehypeKatex, { throwOnError: false }],
+            rehypeRaw,
+            [
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              rehypeHighlight,
+              {
+                languages: { latex },
+                subset: false,
+                plainText: ['txt', 'text'],
+              },
+            ],
+            [rehypeHighlightCodeLines, { showLineNumbers: true }],
+            wrapCodeBlocksWithoutVisit,
+          ]}
+          skipHtml={true}
+        >
+          {text}
+        </Markdown>
+      </>
+    )
+  }
+)
+
 export default React.memo(SimpleTextMessage)