@jupyter/chat 0.19.0 → 0.20.0-alpha.1

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/footer.js

@@ -17,6 +17,9 @@ export function MessageFooterComponent(props) {
         return null;
     }
     const footer = messageFooterRegistry.getFooter();
+    if (!footer.left && !footer.center && !footer.right) {
+        return null;
+    }
     return (React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
         ((_a = footer.left) === null || _a === void 0 ? void 0 : _a.component) ? (React.createElement(footer.left.component, { message: message, model: model })) : (React.createElement("div", null)),
         ((_b = footer.center) === null || _b === void 0 ? void 0 : _b.component) ? (React.createElement(footer.center.component, { message: message, model: model })) : (React.createElement("div", null)),

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,116 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { MessageLoop } from '@lumino/messaging';
+import { Widget } from '@lumino/widgets';
 import React, { useState, useEffect } 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;
+    // The rendered content, return by the mime renderer.
     const [renderedContent, setRenderedContent] = useState(null);
-    // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
+    // 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(() => {
         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);
+            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);
+            }
+            // Update the content.
             setRenderedContent(renderer.node);
             // 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 }),
+    }, [message.body, message.mentions, rmRegistry]);
+    return (React.createElement(React.Fragment, null,
+        renderedContent && (React.createElement("div", { className: RENDERED_CLASS, ref: node => node && node.replaceChildren(renderedContent) })),
+        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

@@ -9,6 +9,7 @@ import { ChatInput } from '../input';
 import { useChatContext } from '../../context';
 import { InputModel } from '../../input-model';
 import { replaceSpanToMention } from '../../utils';
+const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
 /**
  * The message component body.
  */
@@ -56,8 +57,8 @@ export const ChatMessage = forwardRef((props, ref) => {
     }, [props.message]);
     // Create an input model only if the message is edited.
     const startEdition = () => {
-        var _a;
-        if (!canEdit) {
+        var _a, _b;
+        if (!canEdit || !(typeof message.body === 'string')) {
             return;
         }
         let body = message.body;
@@ -75,7 +76,7 @@ export const ChatMessage = forwardRef((props, ref) => {
             config: {
                 sendWithShiftEnter: model.config.sendWithShiftEnter
             },
-            attachments: message.attachments,
+            attachments: structuredClone((_b = message.attachments) !== null && _b !== void 0 ? _b : []),
             mentions: message.mentions
         });
         model.addEditionModel(message.id, inputModel);
@@ -110,8 +111,8 @@ export const ChatMessage = forwardRef((props, ref) => {
         model.deleteMessage(id);
     };
     // 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 })),
+    return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index, className: MESSAGE_CONTAINER_CLASS },
+        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.d.ts

@@ -341,6 +341,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     private _notify;
     private _messages;
     private _unreadMessages;
+    private _lastRead;
     private _messagesInViewport;
     private _id;
     private _name;

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.
  *
@@ -22,6 +21,7 @@ export class AbstractChatModel {
         var _a, _b, _c, _d;
         this._messages = [];
         this._unreadMessages = [];
+        this._lastRead = 0;
         this._messagesInViewport = [];
         this._name = '';
         this._readyDelegate = new PromiseDelegate();
@@ -72,6 +72,12 @@ export class AbstractChatModel {
     }
     set id(value) {
         this._id = value;
+        // Update the last read message.
+        const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
+        if (typeof storage.lastRead === 'number' &&
+            storage.lastRead > this._lastRead) {
+            this._lastRead = storage.lastRead;
+        }
     }
     /**
      * The chat model name.
@@ -125,17 +131,14 @@ export class AbstractChatModel {
      * Timestamp of the last read message in local storage.
      */
     get lastRead() {
-        var _a;
-        if (this._id === undefined) {
-            return 0;
-        }
-        const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
-        return (_a = storage.lastRead) !== null && _a !== void 0 ? _a : 0;
+        return this._lastRead;
     }
     set lastRead(value) {
+        this._lastRead = value;
         if (this._id === undefined) {
             return;
         }
+        // Save the last read message to the local storage, for persistence across reload.
         const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
         storage.lastRead = value;
         localStorage.setItem(`@jupyter/chat:${this._id}`, JSON.stringify(storage));
@@ -193,17 +196,16 @@ export class AbstractChatModel {
         return this._unreadMessages;
     }
     set unreadMessages(unread) {
-        var _a;
         const recentlyRead = this._unreadMessages.filter(elem => !unread.includes(elem));
         const unreadCountDiff = unread.length - this._unreadMessages.length;
         this._unreadMessages = unread;
         this._unreadChanged.emit(this._unreadMessages);
         // Notify the change.
         this._notify(unread.length, unreadCountDiff > 0);
-        // Save the last read to the local storage.
-        if (this._id !== undefined && recentlyRead.length) {
+        // Save the last read.
+        if (recentlyRead.length) {
             let lastReadChanged = false;
-            let lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : this.messages[recentlyRead[0]].time;
+            let lastRead = this.lastRead;
             recentlyRead.forEach(index => {
                 if (this.messages[index].time > lastRead) {
                     lastRead = this.messages[index].time;
@@ -289,10 +291,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;
     }
     /**
@@ -323,15 +321,13 @@ export class AbstractChatModel {
      * @param messages - the messages list.
      */
     messagesInserted(index, messages) {
-        var _a;
         const formattedMessages = [];
         const unreadIndexes = [];
-        const lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : 0;
         // Format the messages.
         messages.forEach((message, idx) => {
             const formattedMessage = this.formatChatMessage(message);
             formattedMessages.push(new Message(formattedMessage));
-            if (message.time > lastRead) {
+            if (message.time > this.lastRead) {
                 unreadIndexes.push(index + idx);
             }
         });

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.1",
   "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/footer.tsx

@@ -33,6 +33,10 @@ export function MessageFooterComponent(
   }
   const footer = messageFooterRegistry.getFooter();
 
+  if (!footer.left && !footer.center && !footer.right) {
+    return null;
+  }
+
   return (
     <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
       {footer.left?.component ? (