Merge pull request #1363 from vibhatha/fix-chatbox-markdown-rendering

Chatbox markdown format rendering

mito-ai/src/Extensions/AiChat/ChatMessage/ChatMessage.tsx

@@ -3,6 +3,7 @@ import OpenAI from 'openai';
 import { classNames } from '../../../utils/classNames';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import CodeBlock from './CodeBlock';
+import MarkdownBlock from './MarkdownBlock';
 import { INotebookTracker } from '@jupyterlab/notebook';
 import { PYTHON_CODE_BLOCK_START_WITHOUT_NEW_LINE, splitStringWithCodeBlocks } from '../../../utils/strings';
 import ErrorIcon from '../../../icons/ErrorIcon';
@@ -96,7 +97,7 @@ const ChatMessage: React.FC<IChatMessageProps> = ({
                     if (messagePart.length > 14) {
                         return (
                             <CodeBlock
-                                key={index + messagePart} 
+                                key={index + messagePart}
                                 code={messagePart}
                                 role={message.role}
                                 rendermime={rendermime}
@@ -113,9 +114,12 @@ const ChatMessage: React.FC<IChatMessageProps> = ({
                 } else {
                     return (
                         <div style={{ position: 'relative' }}>
-                            <p onDoubleClick={() => setIsEditing(true)}>
+                            <p key={index + messagePart} onDoubleClick={() => setIsEditing(true)}>
                                 {mitoAIConnectionError && <span style={{ marginRight: '4px' }}><ErrorIcon /></span>}
-                                {messagePart}
+                                <MarkdownBlock
+                                    markdown={messagePart}
+                                    rendermime={rendermime}
+                                />
                             </p>
                             {message.role === 'user' && (
                                 <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '4px' }}>

mito-ai/src/Extensions/AiChat/ChatMessage/MarkdownBlock.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import { IRenderMimeRegistry, MimeModel } from '@jupyterlab/rendermime';
+
+
+interface IMarkdownCodeProps {
+    markdown: string;
+    rendermime: IRenderMimeRegistry;
+}
+
+const MarkdownBlock: React.FC<IMarkdownCodeProps> = ({ markdown, rendermime }) => {
+    const [renderedContent, setRenderedContent] = useState<JSX.Element | null>(null);
+
+
+    useEffect(() => {
+        const renderMarkdown = async () => {
+            const model = new MimeModel({
+                data: { ['text/markdown']: markdown },
+            });
+
+            const renderer = rendermime.createRenderer('text/markdown');
+            await renderer.renderModel(model);
+
+            const node = renderer.node;
+            setRenderedContent(<div ref={(el) => el && el.appendChild(node)} />);
+        };
+
+        renderMarkdown();
+    }, [markdown, rendermime]);
+
+    return (
+        <div>{renderedContent || <div></div>} </div>
+    );
+};
+
+export default MarkdownBlock;