1 files changed, 6 insertions, 4 deletions
diff --git a/src/client/views/nodes/ChatBox/MessageComponent.tsx b/src/client/views/nodes/ChatBox/MessageComponent.tsx
index 9f3dee990..fb4a56bc3 100644
--- a/src/client/views/nodes/ChatBox/MessageComponent.tsx
+++ b/src/client/views/nodes/ChatBox/MessageComponent.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
+import ReactMarkdown from 'react-markdown';
 import { AssistantMessage, Citation } from './types';
 
 interface MessageComponentProps {
@@ -13,7 +14,7 @@ interface MessageComponentProps {
 const MessageComponentBox: React.FC<MessageComponentProps> = function ({ message, index, onFollowUpClick, onCitationClick, updateMessageCitations }) {
     const renderContent = (content: string) => {
         if (!message.citations || message.citations.length === 0) {
-            return content;
+            return <ReactMarkdown>{content}</ReactMarkdown>;
         }
 
         const parts = [];
@@ -22,9 +23,10 @@ const MessageComponentBox: React.FC<MessageComponentProps> = function ({ message
         message.citations.forEach((citation, idx) => {
             const location = citation.text_location;
             const textBefore = content.slice(lastIndex, location);
+            parts.push(<ReactMarkdown key={`md-${idx}`}>{textBefore}</ReactMarkdown>);
             const citationButton = (
                 <button
-                    key={idx}
+                    key={`citation-${idx}`}
                     className="citation-button"
                     onClick={() => onCitationClick(citation)}
                     style={{
@@ -46,11 +48,11 @@ const MessageComponentBox: React.FC<MessageComponentProps> = function ({ message
                     {idx + 1}
                 </button>
             );
-            parts.push(textBefore, citationButton);
+            parts.push(citationButton);
             lastIndex = location;
         });
 
-        parts.push(content.slice(lastIndex));
+        parts.push(<ReactMarkdown key="md-last">{content.slice(lastIndex)}</ReactMarkdown>);
 
         return parts;
     };