@jupyter/chat 0.19.0 → 0.20.0-alpha.0

package/lib/components/chat.js

@@ -40,7 +40,6 @@ export function ChatBody(props) {
             (_a = model === null || model === void 0 ? void 0 : model.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(updateWriters);
         };
     }, [model]);
-    // const horizontalPadding = props.area === 'main' ? 8 : 4;
     const horizontalPadding = 4;
     const contextValue = {
         ...props,

package/lib/components/messages/message-renderer.d.ts

@@ -1,21 +1,18 @@
 import { PromiseDelegate } from '@lumino/coreutils';
 import React from 'react';
+import { IMessageContent } from '../../types';
 /**
  * The type of the props for the MessageRenderer component.
  */
 type MessageRendererProps = {
     /**
-     * The string to render.
+     * The string or rendermime bundle to render.
      */
-    markdownStr: string;
+    message: IMessageContent;
     /**
      * The promise to resolve when the message is rendered.
      */
     rendered: PromiseDelegate<void>;
-    /**
-     * Whether to append the content to the existing content or not.
-     */
-    appendContent?: boolean;
     /**
      * The function to call to edit a message.
      */

package/lib/components/messages/message-renderer.js

@@ -2,51 +2,126 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useState, useEffect } from 'react';
+import { MessageLoop } from '@lumino/messaging';
+import { Widget } from '@lumino/widgets';
+import React, { useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { MessageToolbar } from './toolbar';
 import { CodeToolbar } from '../code-blocks/code-toolbar';
 import { useChatContext } from '../../context';
-import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
+import { replaceMentionToSpan } from '../../utils';
+const RENDERED_CLASS = 'jp-chat-rendered-message';
+const DEFAULT_MIME_TYPE = 'text/markdown';
 /**
  * The message renderer base component.
  */
 function MessageRendererBase(props) {
-    const { markdownStr } = props;
+    const { message } = props;
     const { model, rmRegistry } = useChatContext();
-    const appendContent = props.appendContent || false;
-    const [renderedContent, setRenderedContent] = useState(null);
-    // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
+    const containerRef = useRef(null);
+    // Allow edition only on text messages.
+    const [canEdit, setCanEdit] = useState(false);
+    // Each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
     const [codeToolbarDefns, setCodeToolbarDefns] = useState([]);
     useEffect(() => {
+        let node = null;
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
         const renderContent = async () => {
-            const renderer = await MarkdownRenderer.renderContent({
-                content: markdownStr,
-                rmRegistry
-            });
-            const newCodeToolbarDefns = [];
-            // Attach CodeToolbar root element to each <pre> block
-            const preBlocks = renderer.node.querySelectorAll('pre');
-            preBlocks.forEach(preBlock => {
-                var _a;
-                const codeToolbarRoot = document.createElement('div');
-                (_a = preBlock.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(codeToolbarRoot, preBlock.nextSibling);
-                newCodeToolbarDefns.push([
-                    codeToolbarRoot,
-                    { model: model, content: preBlock.textContent || '' }
-                ]);
-            });
-            setCodeToolbarDefns(newCodeToolbarDefns);
-            setRenderedContent(renderer.node);
+            var _a, _b;
+            let isMarkdownRenderer = true;
+            let renderer;
+            let mimeModel;
+            // Create the renderer and the mime model.
+            if (typeof message.body === 'string') {
+                // Allow editing content for text messages.
+                setCanEdit(true);
+                // Improve users display in markdown content.
+                let mdStr = message.body;
+                (_a = message.mentions) === null || _a === void 0 ? void 0 : _a.forEach(user => {
+                    mdStr = replaceMentionToSpan(mdStr, user);
+                });
+                // Body is a string, use the markdown renderer.
+                renderer = rmRegistry.createRenderer(DEFAULT_MIME_TYPE);
+                mimeModel = rmRegistry.createModel({
+                    data: { [DEFAULT_MIME_TYPE]: mdStr }
+                });
+            }
+            else {
+                setCanEdit(false);
+                // This is a mime bundle.
+                let mimeContent = message.body;
+                let preferred = rmRegistry.preferredMimeType(mimeContent.data, 'ensure' // Should be changed with 'prefer' if we can handle trusted content.
+                );
+                if (!preferred) {
+                    preferred = DEFAULT_MIME_TYPE;
+                    mimeContent = {
+                        data: {
+                            [DEFAULT_MIME_TYPE]: `_No renderer found for [**${Object.keys(mimeContent.data).join(', ')}**] mimetype(s)_`
+                        }
+                    };
+                }
+                renderer = rmRegistry.createRenderer(preferred);
+                // Improve users display in markdown content.
+                if (preferred === DEFAULT_MIME_TYPE) {
+                    let mdStr = mimeContent.data[DEFAULT_MIME_TYPE];
+                    if (mdStr) {
+                        (_b = message.mentions) === null || _b === void 0 ? void 0 : _b.forEach(user => {
+                            mdStr = replaceMentionToSpan(mdStr, user);
+                        });
+                        mimeContent = {
+                            ...mimeContent,
+                            data: {
+                                ...mimeContent.data,
+                                [DEFAULT_MIME_TYPE]: mdStr
+                            }
+                        };
+                    }
+                }
+                else {
+                    isMarkdownRenderer = false;
+                }
+                mimeModel = rmRegistry.createModel(mimeContent);
+            }
+            await renderer.renderModel(mimeModel);
+            // Manually trigger the onAfterAttach of the renderer, because the widget will
+            // never been attached, only the node.
+            // This is necessary to render latex.
+            MessageLoop.sendMessage(renderer, Widget.Msg.AfterAttach);
+            // Add code toolbar if markdown has been rendered.
+            if (isMarkdownRenderer) {
+                const newCodeToolbarDefns = [];
+                // Attach CodeToolbar root element to each <pre> block
+                const preBlocks = renderer.node.querySelectorAll('pre');
+                preBlocks.forEach(preBlock => {
+                    var _a;
+                    const codeToolbarRoot = document.createElement('div');
+                    (_a = preBlock.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(codeToolbarRoot, preBlock.nextSibling);
+                    newCodeToolbarDefns.push([
+                        codeToolbarRoot,
+                        { model: model, content: preBlock.textContent || '' }
+                    ]);
+                });
+                setCodeToolbarDefns(newCodeToolbarDefns);
+            }
+            // Add the rendered node to the DOM.
+            node = renderer.node;
+            container.insertBefore(node, container.firstChild);
             // Resolve the rendered promise.
             props.rendered.resolve();
         };
         renderContent();
-    }, [markdownStr, rmRegistry]);
-    return (React.createElement("div", { className: MD_RENDERED_CLASS },
-        renderedContent &&
-            (appendContent ? (React.createElement("div", { ref: node => node && node.appendChild(renderedContent) })) : (React.createElement("div", { ref: node => node && node.replaceChildren(renderedContent) }))),
-        React.createElement(MessageToolbar, { edit: props.edit, delete: props.delete }),
+        return () => {
+            if (node && container.contains(node)) {
+                container.removeChild(node);
+            }
+            node = null;
+        };
+    }, [message.body, message.mentions, rmRegistry]);
+    return (React.createElement("div", { className: RENDERED_CLASS, ref: containerRef },
+        React.createElement(MessageToolbar, { edit: canEdit ? props.edit : undefined, delete: props.delete }),
         // Render a `CodeToolbar` element underneath each code block.
         // We use ReactDOM.createPortal() so each `CodeToolbar` element is able
         // to use the context in the main React tree.

package/lib/components/messages/message.js

@@ -57,7 +57,7 @@ export const ChatMessage = forwardRef((props, ref) => {
     // Create an input model only if the message is edited.
     const startEdition = () => {
         var _a;
-        if (!canEdit) {
+        if (!canEdit || !(typeof message.body === 'string')) {
             return;
         }
         let body = message.body;
@@ -111,7 +111,7 @@ export const ChatMessage = forwardRef((props, ref) => {
     };
     // Empty if the message has been deleted.
     return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index },
-        edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), edit: true })) : (React.createElement(MessageRenderer, { markdownStr: message.body, edit: canEdit ? startEdition : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise })),
+        edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), edit: true })) : (React.createElement(MessageRenderer, { message: message, edit: canEdit ? startEdition : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise })),
         message.attachments && !edit && (
         // Display the attachments only if message is not edited, otherwise the
         // input component display them.

package/lib/components/messages/toolbar.js

@@ -14,7 +14,7 @@ const TOOLBAR_CLASS = 'jp-chat-toolbar';
 export function MessageToolbar(props) {
     const buttons = [];
     if (props.edit !== undefined) {
-        const editButton = (React.createElement(TooltippedIconButton, { tooltip: 'edit', onClick: props.edit, "aria-label": 'Edit', inputToolbar: false },
+        const editButton = (React.createElement(TooltippedIconButton, { tooltip: 'Edit', onClick: props.edit, "aria-label": 'Edit', inputToolbar: false },
             React.createElement(EditIcon, null)));
         buttons.push(editButton);
     }

package/lib/components/messages/welcome.js

@@ -2,11 +2,12 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import { classes } from '@jupyterlab/ui-components';
+import { MessageLoop } from '@lumino/messaging';
+import { Widget } from '@lumino/widgets';
 import React, { useEffect, useRef } from 'react';
 import { useChatContext } from '../../context';
-import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
 const WELCOME_MESSAGE_CLASS = 'jp-chat-welcome-message';
+const MD_MIME_TYPE = 'text/markdown';
 /**
  * The welcome message component.
  * This message is displayed on top of the chat messages, and is rendered using a
@@ -17,26 +18,35 @@ export function WelcomeMessage(props) {
     const content = props.content + '\n----\n';
     // ref that tracks the content container to store the rendermime node in
     const renderingContainer = useRef(null);
-    // ref that tracks whether the rendermime node has already been inserted
-    const renderingInserted = useRef(false);
     /**
      * Effect: use Rendermime to render `props.markdownStr` into an HTML element,
      * and insert it into `renderingContainer` if not yet inserted.
      */
     useEffect(() => {
+        let node = null;
         const renderContent = async () => {
-            const renderer = await MarkdownRenderer.renderContent({
-                content,
-                rmRegistry
+            var _a;
+            // Render the welcome message using markdown renderer.
+            const renderer = rmRegistry.createRenderer(MD_MIME_TYPE);
+            const mimeModel = rmRegistry.createModel({
+                data: { [MD_MIME_TYPE]: content }
             });
-            // insert the rendering into renderingContainer if not yet inserted
-            if (renderingContainer.current !== null && !renderingInserted.current) {
-                renderingContainer.current.appendChild(renderer.node);
-                renderingInserted.current = true;
-            }
+            await renderer.renderModel(mimeModel);
+            // Manually trigger the onAfterAttach of the renderer, because the widget will
+            // never been attached, only the node.
+            // This is necessary to render latex.
+            MessageLoop.sendMessage(renderer, Widget.Msg.AfterAttach);
+            node = renderer.node;
+            (_a = renderingContainer.current) === null || _a === void 0 ? void 0 : _a.append(node);
         };
         renderContent();
+        return () => {
+            var _a;
+            if (node && ((_a = renderingContainer.current) === null || _a === void 0 ? void 0 : _a.contains(node))) {
+                renderingContainer.current.removeChild(node);
+            }
+            node = null;
+        };
     }, [content]);
-    return (React.createElement("div", { className: classes(MD_RENDERED_CLASS, WELCOME_MESSAGE_CLASS) },
-        React.createElement("div", { ref: renderingContainer })));
+    return React.createElement("div", { className: WELCOME_MESSAGE_CLASS, ref: renderingContainer });
 }

package/lib/index.d.ts

@@ -2,7 +2,6 @@ export * from './active-cell-manager';
 export * from './components';
 export * from './icons';
 export * from './input-model';
-export * from './markdown-renderer';
 export * from './model';
 export * from './registers';
 export * from './selection-watcher';

package/lib/index.js

@@ -6,7 +6,6 @@ export * from './active-cell-manager';
 export * from './components';
 export * from './icons';
 export * from './input-model';
-export * from './markdown-renderer';
 export * from './model';
 export * from './registers';
 export * from './selection-watcher';

package/lib/message.d.ts

@@ -1,3 +1,4 @@
+import { IRenderMime } from '@jupyterlab/rendermime';
 import { ISignal } from '@lumino/signaling';
 import { IAttachment, IMessageContent, IMessage, IUser } from './types';
 /**
@@ -18,7 +19,7 @@ export declare class Message implements IMessage {
      * Getters for each attribute individually.
      */
     get type(): string;
-    get body(): string;
+    get body(): string | (Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>);
     get id(): string;
     get time(): number;
     get sender(): IUser;

package/lib/model.js

@@ -7,7 +7,6 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import { InputModel } from './input-model';
 import { Message } from './message';
-import { replaceMentionToSpan } from './utils';
 /**
  * An abstract implementation of IChatModel.
  *
@@ -289,10 +288,6 @@ export class AbstractChatModel {
      * Can be useful if some actions are required on the message.
      */
     formatChatMessage(message) {
-        var _a;
-        (_a = message.mentions) === null || _a === void 0 ? void 0 : _a.forEach(user => {
-            message.body = replaceMentionToSpan(message.body, user);
-        });
         return message;
     }
     /**

package/lib/theme-provider.js

@@ -15,8 +15,9 @@ export async function pollUntilReady() {
 }
 export async function getJupyterLabTheme() {
     await pollUntilReady();
-    const light = document.body.getAttribute('data-jp-theme-light');
+    const light = document.body.getAttribute('data-jp-theme-light') === 'true';
     return createTheme({
+        cssVariables: true,
         spacing: 4,
         components: {
             MuiButton: {
@@ -40,12 +41,12 @@ export async function getJupyterLabTheme() {
                         // The default style for input toolbar button variant.
                         props: { variant: 'input-toolbar' },
                         style: {
-                            backgroundColor: 'var(--jp-brand-color1)',
-                            color: 'white',
+                            backgroundColor: `var(--jp-brand-color${light ? '1' : '2'})`,
+                            color: 'var(--jp-ui-inverse-font-color1)',
                             borderRadius: '4px',
                             boxShadow: 'none',
                             '&:hover': {
-                                backgroundColor: 'var(--jp-brand-color0)',
+                                backgroundColor: `var(--jp-brand-color${light ? '0' : '1'})`,
                                 boxShadow: 'none'
                             },
                             '&:disabled': {
@@ -97,12 +98,12 @@ export async function getJupyterLabTheme() {
                         // The default style for input toolbar button variant.
                         props: { variant: 'input-toolbar' },
                         style: {
-                            backgroundColor: 'var(--jp-brand-color1)',
-                            color: 'white',
+                            backgroundColor: `var(--jp-brand-color${light ? '1' : '2'})`,
+                            color: 'var(--jp-ui-inverse-font-color1)',
                             borderRadius: '4px',
                             boxShadow: 'none',
                             '&:hover': {
-                                backgroundColor: 'var(--jp-brand-color0)',
+                                backgroundColor: `var(--jp-brand-color${light ? '0' : '1'})`,
                                 boxShadow: 'none'
                             },
                             '&:disabled': {
@@ -162,9 +163,9 @@ export async function getJupyterLabTheme() {
                 paper: getCSSVariable('--jp-layout-color1'),
                 default: getCSSVariable('--jp-layout-color1')
             },
-            mode: light === 'true' ? 'light' : 'dark',
+            mode: light ? 'light' : 'dark',
             primary: {
-                main: getCSSVariable('--jp-brand-color1'),
+                main: getCSSVariable(`--jp-brand-color${light ? '1' : '2'}`),
                 light: getCSSVariable('--jp-brand-color2'),
                 dark: getCSSVariable('--jp-brand-color0')
             },

package/lib/types.d.ts

@@ -1,4 +1,5 @@
 import { ISignal } from '@lumino/signaling';
+import { IRenderMime } from '@jupyterlab/rendermime';
 /**
  * The user description.
  */
@@ -57,7 +58,7 @@ export interface IConfig {
  */
 export type IMessageContent<T = IUser, U = IAttachment> = {
     type: string;
-    body: string;
+    body: string | (Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>);
     id: string;
     time: number;
     sender: T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.19.0",
+  "version": "0.20.0-alpha.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",

package/src/components/chat.tsx

@@ -60,7 +60,6 @@ export function ChatBody(props: Chat.IChatProps): JSX.Element {
     };
   }, [model]);
 
-  // const horizontalPadding = props.area === 'main' ? 8 : 4;
   const horizontalPadding = 4;
 
   const contextValue: Chat.IChatProps = {

package/src/components/messages/message-renderer.tsx

@@ -3,31 +3,34 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { IRenderMime } from '@jupyterlab/rendermime';
 import { PromiseDelegate } from '@lumino/coreutils';
-import React, { useState, useEffect } from 'react';
+import { MessageLoop } from '@lumino/messaging';
+import { Widget } from '@lumino/widgets';
+import React, { useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import { MessageToolbar } from './toolbar';
 import { CodeToolbar, CodeToolbarProps } from '../code-blocks/code-toolbar';
 import { useChatContext } from '../../context';
-import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
+import { IMessageContent } from '../../types';
+import { replaceMentionToSpan } from '../../utils';
+
+const RENDERED_CLASS = 'jp-chat-rendered-message';
+const DEFAULT_MIME_TYPE = 'text/markdown';
 
 /**
  * The type of the props for the MessageRenderer component.
  */
 type MessageRendererProps = {
   /**
-   * The string to render.
+   * The string or rendermime bundle to render.
    */
-  markdownStr: string;
+  message: IMessageContent;
   /**
    * The promise to resolve when the message is rendered.
    */
   rendered: PromiseDelegate<void>;
-  /**
-   * Whether to append the content to the existing content or not.
-   */
-  appendContent?: boolean;
   /**
    * The function to call to edit a message.
    */
@@ -42,60 +45,138 @@ type MessageRendererProps = {
  * The message renderer base component.
  */
 function MessageRendererBase(props: MessageRendererProps): JSX.Element {
-  const { markdownStr } = props;
+  const { message } = props;
   const { model, rmRegistry } = useChatContext();
-  const appendContent = props.appendContent || false;
-  const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
-    null
-  );
 
-  // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Allow edition only on text messages.
+  const [canEdit, setCanEdit] = useState<boolean>(false);
+
+  // Each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
   const [codeToolbarDefns, setCodeToolbarDefns] = useState<
     Array<[HTMLDivElement, CodeToolbarProps]>
   >([]);
 
   useEffect(() => {
+    let node: HTMLElement | null = null;
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
     const renderContent = async () => {
-      const renderer = await MarkdownRenderer.renderContent({
-        content: markdownStr,
-        rmRegistry
-      });
-
-      const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
-
-      // Attach CodeToolbar root element to each <pre> block
-      const preBlocks = renderer.node.querySelectorAll('pre');
-      preBlocks.forEach(preBlock => {
-        const codeToolbarRoot = document.createElement('div');
-        preBlock.parentNode?.insertBefore(
-          codeToolbarRoot,
-          preBlock.nextSibling
+      let isMarkdownRenderer = true;
+      let renderer: IRenderMime.IRenderer;
+      let mimeModel: IRenderMime.IMimeModel;
+
+      // Create the renderer and the mime model.
+      if (typeof message.body === 'string') {
+        // Allow editing content for text messages.
+        setCanEdit(true);
+
+        // Improve users display in markdown content.
+        let mdStr = message.body;
+        message.mentions?.forEach(user => {
+          mdStr = replaceMentionToSpan(mdStr, user);
+        });
+
+        // Body is a string, use the markdown renderer.
+        renderer = rmRegistry.createRenderer(DEFAULT_MIME_TYPE);
+        mimeModel = rmRegistry.createModel({
+          data: { [DEFAULT_MIME_TYPE]: mdStr }
+        });
+      } else {
+        setCanEdit(false);
+        // This is a mime bundle.
+        let mimeContent = message.body;
+        let preferred = rmRegistry.preferredMimeType(
+          mimeContent.data,
+          'ensure' // Should be changed with 'prefer' if we can handle trusted content.
         );
-        newCodeToolbarDefns.push([
-          codeToolbarRoot,
-          { model: model, content: preBlock.textContent || '' }
-        ]);
-      });
+        if (!preferred) {
+          preferred = DEFAULT_MIME_TYPE;
+          mimeContent = {
+            data: {
+              [DEFAULT_MIME_TYPE]: `_No renderer found for [**${Object.keys(mimeContent.data).join(', ')}**] mimetype(s)_`
+            }
+          };
+        }
+        renderer = rmRegistry.createRenderer(preferred);
+
+        // Improve users display in markdown content.
+        if (preferred === DEFAULT_MIME_TYPE) {
+          let mdStr = mimeContent.data[DEFAULT_MIME_TYPE];
+          if (mdStr) {
+            message.mentions?.forEach(user => {
+              mdStr = replaceMentionToSpan(mdStr as string, user);
+            });
+            mimeContent = {
+              ...mimeContent,
+              data: {
+                ...mimeContent.data,
+                [DEFAULT_MIME_TYPE]: mdStr
+              }
+            };
+          }
+        } else {
+          isMarkdownRenderer = false;
+        }
 
-      setCodeToolbarDefns(newCodeToolbarDefns);
-      setRenderedContent(renderer.node);
+        mimeModel = rmRegistry.createModel(mimeContent);
+      }
+      await renderer.renderModel(mimeModel);
+
+      // Manually trigger the onAfterAttach of the renderer, because the widget will
+      // never been attached, only the node.
+      // This is necessary to render latex.
+      MessageLoop.sendMessage(renderer, Widget.Msg.AfterAttach);
+
+      // Add code toolbar if markdown has been rendered.
+      if (isMarkdownRenderer) {
+        const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
+
+        // Attach CodeToolbar root element to each <pre> block
+        const preBlocks = renderer.node.querySelectorAll('pre');
+        preBlocks.forEach(preBlock => {
+          const codeToolbarRoot = document.createElement('div');
+          preBlock.parentNode?.insertBefore(
+            codeToolbarRoot,
+            preBlock.nextSibling
+          );
+          newCodeToolbarDefns.push([
+            codeToolbarRoot,
+            { model: model, content: preBlock.textContent || '' }
+          ]);
+        });
+
+        setCodeToolbarDefns(newCodeToolbarDefns);
+      }
+
+      // Add the rendered node to the DOM.
+      node = renderer.node;
+      container.insertBefore(node, container.firstChild);
 
       // Resolve the rendered promise.
       props.rendered.resolve();
     };
 
     renderContent();
-  }, [markdownStr, rmRegistry]);
+
+    return () => {
+      if (node && container.contains(node)) {
+        container.removeChild(node);
+      }
+      node = null;
+    };
+  }, [message.body, message.mentions, rmRegistry]);
 
   return (
-    <div className={MD_RENDERED_CLASS}>
-      {renderedContent &&
-        (appendContent ? (
-          <div ref={node => node && node.appendChild(renderedContent)} />
-        ) : (
-          <div ref={node => node && node.replaceChildren(renderedContent)} />
-        ))}
-      <MessageToolbar edit={props.edit} delete={props.delete} />
+    <div className={RENDERED_CLASS} ref={containerRef}>
+      <MessageToolbar
+        edit={canEdit ? props.edit : undefined}
+        delete={props.delete}
+      />
       {
         // Render a `CodeToolbar` element underneath each code block.
         // We use ReactDOM.createPortal() so each `CodeToolbar` element is able

package/src/components/messages/message.tsx

@@ -85,7 +85,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
 
     // Create an input model only if the message is edited.
     const startEdition = (): void => {
-      if (!canEdit) {
+      if (!canEdit || !(typeof message.body === 'string')) {
         return;
       }
       let body = message.body;
@@ -157,7 +157,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
           />
         ) : (
           <MessageRenderer
-            markdownStr={message.body}
+            message={message}
             edit={canEdit ? startEdition : undefined}
             delete={canDelete ? () => deleteMessage(message.id) : undefined}
             rendered={props.renderedPromise}

package/src/components/messages/toolbar.tsx

@@ -21,7 +21,7 @@ export function MessageToolbar(props: MessageToolbar.IProps): JSX.Element {
   if (props.edit !== undefined) {
     const editButton = (
       <TooltippedIconButton
-        tooltip={'edit'}
+        tooltip={'Edit'}
         onClick={props.edit}
         aria-label={'Edit'}
         inputToolbar={false}

package/src/components/messages/welcome.tsx

@@ -3,13 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { classes } from '@jupyterlab/ui-components';
+import { MessageLoop } from '@lumino/messaging';
+import { Widget } from '@lumino/widgets';
 import React, { useEffect, useRef } from 'react';
 
 import { useChatContext } from '../../context';
-import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
 
 const WELCOME_MESSAGE_CLASS = 'jp-chat-welcome-message';
+const MD_MIME_TYPE = 'text/markdown';
 
 /**
  * The component props.
@@ -32,33 +33,40 @@ export function WelcomeMessage(props: IWelcomeMessageProps): JSX.Element {
 
   // ref that tracks the content container to store the rendermime node in
   const renderingContainer = useRef<HTMLDivElement | null>(null);
-  // ref that tracks whether the rendermime node has already been inserted
-  const renderingInserted = useRef<boolean>(false);
 
   /**
    * Effect: use Rendermime to render `props.markdownStr` into an HTML element,
    * and insert it into `renderingContainer` if not yet inserted.
    */
   useEffect(() => {
+    let node: HTMLElement | null = null;
+
     const renderContent = async () => {
-      const renderer = await MarkdownRenderer.renderContent({
-        content,
-        rmRegistry
+      // Render the welcome message using markdown renderer.
+      const renderer = rmRegistry.createRenderer(MD_MIME_TYPE);
+      const mimeModel = rmRegistry.createModel({
+        data: { [MD_MIME_TYPE]: content }
       });
+      await renderer.renderModel(mimeModel);
 
-      // insert the rendering into renderingContainer if not yet inserted
-      if (renderingContainer.current !== null && !renderingInserted.current) {
-        renderingContainer.current.appendChild(renderer.node);
-        renderingInserted.current = true;
-      }
+      // Manually trigger the onAfterAttach of the renderer, because the widget will
+      // never been attached, only the node.
+      // This is necessary to render latex.
+      MessageLoop.sendMessage(renderer, Widget.Msg.AfterAttach);
+
+      node = renderer.node;
+      renderingContainer.current?.append(node);
     };
 
     renderContent();
+
+    return () => {
+      if (node && renderingContainer.current?.contains(node)) {
+        renderingContainer.current.removeChild(node);
+      }
+      node = null;
+    };
   }, [content]);
 
-  return (
-    <div className={classes(MD_RENDERED_CLASS, WELCOME_MESSAGE_CLASS)}>
-      <div ref={renderingContainer} />
-    </div>
-  );
+  return <div className={WELCOME_MESSAGE_CLASS} ref={renderingContainer}></div>;
 }

package/src/index.ts

@@ -7,7 +7,6 @@ export * from './active-cell-manager';
 export * from './components';
 export * from './icons';
 export * from './input-model';
-export * from './markdown-renderer';
 export * from './model';
 export * from './registers';
 export * from './selection-watcher';

package/src/message.ts

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { IRenderMime } from '@jupyterlab/rendermime';
 import { ISignal, Signal } from '@lumino/signaling';
 import { IAttachment, IMessageContent, IMessage, IUser } from './types';
 
@@ -32,7 +33,9 @@ export class Message implements IMessage {
   get type(): string {
     return this._content.type;
   }
-  get body(): string {
+  get body():
+    | string
+    | (Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>) {
     return this._content.body;
   }
   get id(): string {

package/src/model.ts

@@ -22,7 +22,6 @@ import {
   INewMessage,
   IUser
 } from './types';
-import { replaceMentionToSpan } from './utils';
 
 /**
  * The chat model interface.
@@ -535,9 +534,6 @@ export abstract class AbstractChatModel implements IChatModel {
    * Can be useful if some actions are required on the message.
    */
   protected formatChatMessage(message: IMessageContent): IMessageContent {
-    message.mentions?.forEach(user => {
-      message.body = replaceMentionToSpan(message.body, user);
-    });
     return message;
   }
 

package/src/theme-provider.ts

@@ -40,8 +40,9 @@ export async function pollUntilReady(): Promise<void> {
 
 export async function getJupyterLabTheme(): Promise<Theme> {
   await pollUntilReady();
-  const light = document.body.getAttribute('data-jp-theme-light');
+  const light = document.body.getAttribute('data-jp-theme-light') === 'true';
   return createTheme({
+    cssVariables: true,
     spacing: 4,
     components: {
       MuiButton: {
@@ -65,12 +66,12 @@ export async function getJupyterLabTheme(): Promise<Theme> {
             // The default style for input toolbar button variant.
             props: { variant: 'input-toolbar' },
             style: {
-              backgroundColor: 'var(--jp-brand-color1)',
-              color: 'white',
+              backgroundColor: `var(--jp-brand-color${light ? '1' : '2'})`,
+              color: 'var(--jp-ui-inverse-font-color1)',
               borderRadius: '4px',
               boxShadow: 'none',
               '&:hover': {
-                backgroundColor: 'var(--jp-brand-color0)',
+                backgroundColor: `var(--jp-brand-color${light ? '0' : '1'})`,
                 boxShadow: 'none'
               },
               '&:disabled': {
@@ -122,12 +123,12 @@ export async function getJupyterLabTheme(): Promise<Theme> {
             // The default style for input toolbar button variant.
             props: { variant: 'input-toolbar' },
             style: {
-              backgroundColor: 'var(--jp-brand-color1)',
-              color: 'white',
+              backgroundColor: `var(--jp-brand-color${light ? '1' : '2'})`,
+              color: 'var(--jp-ui-inverse-font-color1)',
               borderRadius: '4px',
               boxShadow: 'none',
               '&:hover': {
-                backgroundColor: 'var(--jp-brand-color0)',
+                backgroundColor: `var(--jp-brand-color${light ? '0' : '1'})`,
                 boxShadow: 'none'
               },
               '&:disabled': {
@@ -187,9 +188,9 @@ export async function getJupyterLabTheme(): Promise<Theme> {
         paper: getCSSVariable('--jp-layout-color1'),
         default: getCSSVariable('--jp-layout-color1')
       },
-      mode: light === 'true' ? 'light' : 'dark',
+      mode: light ? 'light' : 'dark',
       primary: {
-        main: getCSSVariable('--jp-brand-color1'),
+        main: getCSSVariable(`--jp-brand-color${light ? '1' : '2'}`),
         light: getCSSVariable('--jp-brand-color2'),
         dark: getCSSVariable('--jp-brand-color0')
       },

package/src/types.ts

@@ -4,6 +4,7 @@
  */
 
 import { ISignal } from '@lumino/signaling';
+import { IRenderMime } from '@jupyterlab/rendermime';
 
 /**
  * The user description.
@@ -65,7 +66,10 @@ export interface IConfig {
  */
 export type IMessageContent<T = IUser, U = IAttachment> = {
   type: string;
-  body: string;
+  body:
+    | string
+    // Should contain at least the data of the mime model.
+    | (Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>);
   id: string;
   time: number;
   sender: T;

package/style/chat.css

@@ -3,16 +3,16 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-.jp-chat-rendered-markdown {
+.jp-chat-rendered-message {
   position: relative;
 }
 
-.jp-chat-rendered-markdown hr {
+.jp-chat-rendered-message hr {
   color: #00000026;
   background-color: transparent;
 }
 
-.jp-chat-rendered-markdown .jp-RenderedHTMLCommon > :last-child {
+.jp-chat-message .jp-RenderedHTMLCommon > :last-child {
   margin-bottom: 0;
 }
 
@@ -23,15 +23,20 @@
  * See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling
  * See also: https://github.com/jupyterlab/jupyter-ai/issues/1090
  */
-.jp-ThemedContainer .jp-chat-rendered-markdown.jp-chat-welcome-message {
+.jp-ThemedContainer .jp-chat-welcome-message {
   padding: 0 1em;
 }
 
-.jp-ThemedContainer .jp-chat-rendered-markdown .jp-RenderedHTMLCommon {
+.jp-ThemedContainer .jp-chat-rendered-message .jp-RenderedHTMLCommon {
   padding-right: 0;
 }
 
-.jp-ThemedContainer .jp-chat-rendered-markdown pre {
+.jp-ThemedContainer .jp-chat-rendered-message .jp-RenderedJSON {
+  padding-left: 5px;
+}
+
+.jp-ThemedContainer .jp-chat-rendered-message .jp-RenderedMarkdown pre,
+.jp-ThemedContainer .jp-chat-welcome-message .jp-RenderedMarkdown pre {
   background-color: var(--jp-cell-editor-background);
   overflow-x: auto;
   white-space: pre;
@@ -40,13 +45,13 @@
   border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
 }
 
-.jp-ThemedContainer .jp-chat-rendered-markdown pre > code {
+.jp-ThemedContainer .jp-RenderedMarkdown pre > code {
   background-color: inherit;
   overflow-x: inherit;
   white-space: inherit;
 }
 
-.jp-ThemedContainer .jp-chat-rendered-markdown mjx-container {
+.jp-ThemedContainer .jp-RenderedHTMLCommon mjx-container {
   font-size: 119%;
 }
 
@@ -64,7 +69,7 @@
   color: var(--jp-ui-font-color2);
 }
 
-.jp-chat-rendered-markdown:hover .jp-chat-toolbar {
+.jp-chat-rendered-message:hover .jp-chat-toolbar {
   visibility: visible;
 }
 

package/style/input.css

@@ -20,7 +20,7 @@
   position: absolute;
   inset: 0;
   background: rgb(33 150 243 / 10%);
-  border: 2px dashed var(--jp-brand-color1);
+  border: 2px dashed var(--mui-palette-primary-main);
   border-radius: 4px;
   pointer-events: none;
   z-index: 1;
@@ -32,7 +32,7 @@
   top: -24px;
   left: 50%;
   transform: translateX(-50%);
-  color: var(--jp-brand-color1);
+  color: var(--mui-palette-primary-main);
   font-size: 12px;
   font-weight: 500;
   pointer-events: none;
@@ -47,5 +47,5 @@
 }
 
 .jp-chat-input-container:focus-within > div:first-of-type {
-  border-color: var(--jp-brand-color1);
+  border-color: var(--mui-palette-primary-main);
 }

package/lib/markdown-renderer.d.ts

@@ -1,38 +0,0 @@
-import { IRenderMime, IRenderMimeRegistry } from '@jupyterlab/rendermime';
-export declare const MD_RENDERED_CLASS = "jp-chat-rendered-markdown";
-export declare const MD_MIME_TYPE = "text/markdown";
-/**
- * A namespace for the MarkdownRenderer.
- */
-export declare namespace MarkdownRenderer {
-    /**
-     * The options for the MarkdownRenderer.
-     */
-    interface IOptions {
-        /**
-         * The rendermime registry.
-         */
-        rmRegistry: IRenderMimeRegistry;
-        /**
-         * The markdown content.
-         */
-        content: string;
-    }
-    /**
-     * A generic function to render a markdown string into a DOM element.
-     *
-     * @param content - the markdown content.
-     * @param rmRegistry - the rendermime registry.
-     * @returns a promise that resolves to the renderer.
-     */
-    function renderContent(options: IOptions): Promise<IRenderMime.IRenderer>;
-    /**
-     * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
-     * after the initial MarkDown render. For example, this function takes '\(` and
-     * returns `\\(`.
-     *
-     * Required for proper rendering of MarkDown + LaTeX markup in the chat by
-     * `ILatexTypesetter`.
-     */
-    function escapeLatexDelimiters(text: string): string;
-}

package/lib/markdown-renderer.js

@@ -1,54 +0,0 @@
-/*
- * Copyright (c) Jupyter Development Team.
- * Distributed under the terms of the Modified BSD License.
- */
-export const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
-export const MD_MIME_TYPE = 'text/markdown';
-/**
- * A namespace for the MarkdownRenderer.
- */
-export var MarkdownRenderer;
-(function (MarkdownRenderer) {
-    /**
-     * A generic function to render a markdown string into a DOM element.
-     *
-     * @param content - the markdown content.
-     * @param rmRegistry - the rendermime registry.
-     * @returns a promise that resolves to the renderer.
-     */
-    async function renderContent(options) {
-        var _a;
-        const { rmRegistry, content } = options;
-        // initialize mime model
-        const mdStr = escapeLatexDelimiters(content);
-        const model = rmRegistry.createModel({
-            data: { [MD_MIME_TYPE]: mdStr }
-        });
-        const renderer = rmRegistry.createRenderer(MD_MIME_TYPE);
-        // step 1: render markdown
-        await renderer.renderModel(model);
-        if (!renderer.node) {
-            throw new Error('Rendermime was unable to render Markdown content within a chat message. Please report this upstream to Jupyter chat on GitHub.');
-        }
-        // step 2: render LaTeX via MathJax.
-        (_a = rmRegistry.latexTypesetter) === null || _a === void 0 ? void 0 : _a.typeset(renderer.node);
-        return renderer;
-    }
-    MarkdownRenderer.renderContent = renderContent;
-    /**
-     * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
-     * after the initial MarkDown render. For example, this function takes '\(` and
-     * returns `\\(`.
-     *
-     * Required for proper rendering of MarkDown + LaTeX markup in the chat by
-     * `ILatexTypesetter`.
-     */
-    function escapeLatexDelimiters(text) {
-        return text
-            .replace(/\\\(/g, '\\\\(')
-            .replace(/\\\)/g, '\\\\)')
-            .replace(/\\\[/g, '\\\\[')
-            .replace(/\\\]/g, '\\\\]');
-    }
-    MarkdownRenderer.escapeLatexDelimiters = escapeLatexDelimiters;
-})(MarkdownRenderer || (MarkdownRenderer = {}));

package/src/markdown-renderer.ts

@@ -1,78 +0,0 @@
-/*
- * Copyright (c) Jupyter Development Team.
- * Distributed under the terms of the Modified BSD License.
- */
-
-import { IRenderMime, IRenderMimeRegistry } from '@jupyterlab/rendermime';
-
-export const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
-export const MD_MIME_TYPE = 'text/markdown';
-
-/**
- * A namespace for the MarkdownRenderer.
- */
-export namespace MarkdownRenderer {
-  /**
-   * The options for the MarkdownRenderer.
-   */
-  export interface IOptions {
-    /**
-     * The rendermime registry.
-     */
-    rmRegistry: IRenderMimeRegistry;
-    /**
-     * The markdown content.
-     */
-    content: string;
-  }
-
-  /**
-   * A generic function to render a markdown string into a DOM element.
-   *
-   * @param content - the markdown content.
-   * @param rmRegistry - the rendermime registry.
-   * @returns a promise that resolves to the renderer.
-   */
-  export async function renderContent(
-    options: IOptions
-  ): Promise<IRenderMime.IRenderer> {
-    const { rmRegistry, content } = options;
-
-    // initialize mime model
-    const mdStr = escapeLatexDelimiters(content);
-    const model = rmRegistry.createModel({
-      data: { [MD_MIME_TYPE]: mdStr }
-    });
-
-    const renderer = rmRegistry.createRenderer(MD_MIME_TYPE);
-
-    // step 1: render markdown
-    await renderer.renderModel(model);
-    if (!renderer.node) {
-      throw new Error(
-        'Rendermime was unable to render Markdown content within a chat message. Please report this upstream to Jupyter chat on GitHub.'
-      );
-    }
-
-    // step 2: render LaTeX via MathJax.
-    rmRegistry.latexTypesetter?.typeset(renderer.node);
-
-    return renderer;
-  }
-
-  /**
-   * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
-   * after the initial MarkDown render. For example, this function takes '\(` and
-   * returns `\\(`.
-   *
-   * Required for proper rendering of MarkDown + LaTeX markup in the chat by
-   * `ILatexTypesetter`.
-   */
-  export function escapeLatexDelimiters(text: string) {
-    return text
-      .replace(/\\\(/g, '\\\\(')
-      .replace(/\\\)/g, '\\\\)')
-      .replace(/\\\[/g, '\\\\[')
-      .replace(/\\\]/g, '\\\\]');
-  }
-}