feat: use a code block when generating the message for mermaid instea…

…d of using the component directly
Belphemur · Sep 6, 2023 · 1274385 · 1274385
1 parent c39f252
commit 1274385
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
@@ -41,6 +41,9 @@ export const MessageItem =  memo(function MessageItem({message}: MessageItemProp
         inline?: boolean
     }, "node" | "className" | "inline" | "lang">) {
         if (className == "language-mermaid") {
+            if(message.isGenerating) {
+                return <Code block {...props} />;
+            }
             return <Mermaid
                 chart={`${props.children as string}`}
             ></Mermaid>
@@ -124,4 +127,4 @@ export const MessageItem =  memo(function MessageItem({message}: MessageItemProp
                     </Flex>
                 </Card>
     );
-}, (prevProps, nextProps) => prevProps.message.content == nextProps.message.content);
+}, (prevProps, nextProps) => prevProps.message.content == nextProps.message.content && prevProps.message.isGenerating == nextProps.message.isGenerating);