use rendermime directrly in the react component

packages/jupyter-ai/src/components/chat-messages.tsx

@@ -7,7 +7,7 @@ import 'katex/dist/katex.min.css';
 import { AiService } from '../handler';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Jupyternaut } from '../icons';
-import { MarkdownComponent } from './markdown-component';
+import { RendermimeMarkdown } from './rendermime-markdown';
 import { useCollaboratorsContext } from '../contexts/collaborators-context';
 
 type ChatMessagesProps = {
@@ -143,7 +143,7 @@ export function ChatMessages(props: ChatMessagesProps): JSX.Element {
             timestamp={timestamps[message.id]}
             sx={{ marginBottom: 3 }}
           />
-          <MarkdownComponent
+          <RendermimeMarkdown
             rmRegistry={props.rmRegistry}
             markdownStr={message.body}
           />

packages/jupyter-ai/src/components/rendermime-markdown.tsx

@@ -0,0 +1,35 @@
+import React, { useRef, useEffect } from 'react';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+
+type RendermimeMarkdownProps = {
+  markdownStr: string;
+  rmRegistry: IRenderMimeRegistry;
+};
+
+export function RendermimeMarkdown(
+  props: RendermimeMarkdownProps
+): JSX.Element {
+  const { markdownStr, rmRegistry } = props;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const renderMarkdown = async () => {
+      if (!ref.current) {
+        return;
+      }
+      ref.current.innerHTML = '';
+
+      const mimeType = 'text/markdown';
+      const model = rmRegistry.createModel({
+        data: { [mimeType]: markdownStr }
+      });
+      const renderer = rmRegistry.createRenderer(mimeType);
+      await renderer.renderModel(model);
+      ref.current.appendChild(renderer.node);
+    };
+
+    renderMarkdown();
+  }, [markdownStr, rmRegistry]);
+
+  return <div ref={ref} />;
+}