fix: rerender lag bug

samuelint · Jul 9, 2024 · 7f46d20 · 7f46d20
1 parent 70010e6
commit 7f46d20
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/webapp/components/message-content.tsx b/webapp/components/message-content.tsx
@@ -1,6 +1,7 @@
 import { Markdown } from './markdown';
 import { ChatMessageContentDto } from './chat.type';
 import { Card } from './ui/card';
+import { useMemo } from 'react';
 
 
 export interface ChatMessageProps {
@@ -9,10 +10,12 @@ export interface ChatMessageProps {
 
 export function MessageContent({ content }: ChatMessageProps) {
   const textContent = content?.filter((contentItem) => contentItem.type === 'text')?.map((contentItem) => contentItem.text.value).join('');
+  const markdown = useMemo(() => <Markdown>{textContent}</Markdown>, [textContent]);
   const images = content?.filter((contentItem) => contentItem.type === 'image_file' || contentItem.type === 'image_url');
+
   return (
     <>
-      <Markdown>{textContent}</Markdown>
+      { markdown }
       { images?.map((image, index) => <Card key={index}>{JSON.stringify(image)}</Card>)}
     </>
   );