@jupyter/chat 0.19.0-alpha.3 → 0.20.0-alpha.0

package/lib/__tests__/model.spec.js

@@ -52,7 +52,7 @@ describe('test chat model', () => {
             });
             model.messageAdded(msg);
             expect(messages).toHaveLength(1);
-            expect(messages[0]).toBe(msg);
+            expect(messages[0].content).toBe(msg);
         });
         it('should format message', () => {
             model = new TestChat();
@@ -62,7 +62,7 @@ describe('test chat model', () => {
             });
             model.messageAdded({ ...msg });
             expect(messages).toHaveLength(1);
-            expect(messages[0]).not.toBe(msg);
+            expect(messages[0].content).not.toBe(msg);
             expect(messages[0].body).toBe('formatted msg');
         });
     });

package/lib/components/chat.js

@@ -6,18 +6,40 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ChatInput, InputToolbarRegistry } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './messages';
+import { WritingIndicator } from './writing-indicator';
 import { ChatReactContext } from '../context';
 export function ChatBody(props) {
     const { model } = props;
+    const [writers, setWriters] = useState([]);
     let { inputToolbarRegistry } = props;
     if (!inputToolbarRegistry) {
         inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
     }
-    // const horizontalPadding = props.area === 'main' ? 8 : 4;
+    /**
+     * Handle the changes in the writers list.
+     */
+    useEffect(() => {
+        var _a;
+        if (!model) {
+            return;
+        }
+        const updateWriters = (_, writers) => {
+            // Show all writers for now - AI generating responses will have messageID
+            setWriters(writers);
+        };
+        // Set initial writers state
+        const initialWriters = model.writers;
+        setWriters(initialWriters);
+        (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(updateWriters);
+        return () => {
+            var _a;
+            (_a = model === null || model === void 0 ? void 0 : model.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(updateWriters);
+        };
+    }, [model]);
     const horizontalPadding = 4;
     const contextValue = {
         ...props,
@@ -30,7 +52,11 @@ export function ChatBody(props) {
                 paddingRight: horizontalPadding,
                 paddingTop: 0,
                 paddingBottom: 0
-            }, model: model.input })));
+            }, model: model.input }),
+        React.createElement(WritingIndicator, { sx: {
+                paddingLeft: horizontalPadding,
+                paddingRight: horizontalPadding
+            }, writers: writers })));
 }
 export function Chat(props) {
     var _a;

package/lib/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './jl-theme-provider';
 export * from './messages';
 export * from './mui-extras';
 export * from './scroll-container';
+export * from './writing-indicator';

package/lib/components/index.js

@@ -10,3 +10,4 @@ export * from './jl-theme-provider';
 export * from './messages';
 export * from './mui-extras';
 export * from './scroll-container';
+export * from './writing-indicator';

package/lib/components/input/chat-input.js

@@ -8,7 +8,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
 import { useChatContext } from '../../context';
-import { InputWritingIndicator } from './writing-indicator';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
@@ -23,7 +22,6 @@ export function ChatInput(props) {
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
     const [attachments, setAttachments] = useState(model.attachments);
     const [toolbarElements, setToolbarElements] = useState([]);
-    const [writers, setWriters] = useState([]);
     /**
      * Auto-focus the input when the component is first mounted.
      */
@@ -79,27 +77,6 @@ export function ChatInput(props) {
             inputToolbarRegistry === null || inputToolbarRegistry === void 0 ? void 0 : inputToolbarRegistry.itemsChanged.disconnect(updateToolbar);
         };
     }, [inputToolbarRegistry]);
-    /**
-     * Handle the changes in the writers list.
-     */
-    useEffect(() => {
-        var _a;
-        if (!chatModel) {
-            return;
-        }
-        const updateWriters = (_, writers) => {
-            // Show all writers for now - AI generating responses will have messageID
-            setWriters(writers);
-        };
-        // Set initial writers state
-        const initialWriters = chatModel.writers;
-        setWriters(initialWriters);
-        (_a = chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(updateWriters);
-        return () => {
-            var _a;
-            (_a = chatModel === null || chatModel === void 0 ? void 0 : chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(updateWriters);
-        };
-    }, [chatModel]);
     const inputExists = !!input.trim();
     /**
      * `handleKeyDown()`: callback invoked when the user presses any key in the
@@ -232,6 +209,5 @@ export function ChatInput(props) {
                     borderColor: 'var(--jp-border-color1)',
                     backgroundColor: 'var(--jp-layout-color0)',
                     transition: 'background-color 0.2s ease'
-                } }, toolbarElements.map((item, index) => (React.createElement(item.element, { key: index, model: model, chatCommandRegistry: chatCommandRegistry, chatModel: chatModel, edit: props.edit }))))),
-        React.createElement(InputWritingIndicator, { writers: writers })));
+                } }, toolbarElements.map((item, index) => (React.createElement(item.element, { key: index, model: model, chatCommandRegistry: chatCommandRegistry, chatModel: chatModel, edit: props.edit })))))));
 }

package/lib/components/input/index.d.ts

@@ -2,4 +2,3 @@ export * from './buttons';
 export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';
-export * from './writing-indicator';

package/lib/components/input/index.js

@@ -6,4 +6,3 @@ export * from './buttons';
 export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';
-export * from './writing-indicator';

package/lib/components/messages/footer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IChatMessage } from '../../types';
+import { IMessageContent } from '../../types';
 /**
  * The chat footer component properties.
  */
@@ -7,7 +7,7 @@ export interface IMessageFootersProps {
     /**
      * The chat model.
      */
-    message: IChatMessage;
+    message: IMessageContent;
 }
 /**
  * The chat footer component, which displays footer components on a row according to

package/lib/components/messages/header.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IChatMessage } from '../../types';
+import { IMessage } from '../../types';
 /**
  * The message header props.
  */
@@ -7,7 +7,7 @@ type ChatMessageHeaderProps = {
     /**
      * The chat message.
      */
-    message: IChatMessage;
+    message: IMessage;
     /**
      * Whether this message is from the current user.
      */

package/lib/components/messages/header.js

@@ -12,11 +12,7 @@ const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
  */
 export function ChatMessageHeader(props) {
     var _a, _b;
-    const message = props.message;
-    // Don't render header for stacked messages not deleted or edited.
-    if (message.stacked && !message.deleted && !message.edited) {
-        return React.createElement(React.Fragment, null);
-    }
+    const [message, setMessage] = useState(props.message.content);
     // Flag to display only the deleted or edited information (stacked message).
     const onlyState = message.stacked && (message.deleted || message.edited);
     const [datetime, setDatetime] = useState({});
@@ -55,9 +51,20 @@ export function ChatMessageHeader(props) {
             setDatetime(newDatetime);
         }
     });
+    // Listen for changes in the current message.
+    useEffect(() => {
+        function messageChanged() {
+            setMessage(props.message.content);
+        }
+        props.message.changed.connect(messageChanged);
+        return () => {
+            props.message.changed.disconnect(messageChanged);
+        };
+    }, [props.message]);
     const avatar = message.stacked ? null : Avatar({ user: sender });
     const name = (_b = (_a = sender.display_name) !== null && _a !== void 0 ? _a : sender.name) !== null && _b !== void 0 ? _b : (sender.username || 'User undefined');
-    return (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
+    // Don't render header for stacked messages not deleted or edited.
+    return message.stacked && !message.deleted && !message.edited ? (React.createElement(React.Fragment, null)) : (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
             display: 'flex',
             alignItems: 'center',
             '& > :not(:last-child)': {

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.d.ts

@@ -1,6 +1,6 @@
 import { PromiseDelegate } from '@lumino/coreutils';
 import React from 'react';
-import { IChatMessage } from '../../types';
+import { IMessage } from '../../types';
 /**
  * The message component props.
  */
@@ -8,7 +8,7 @@ type ChatMessageProps = {
     /**
      * The message to display.
      */
-    message: IChatMessage;
+    message: IMessage;
     /**
      * The index of the message in the list.
      */

package/lib/components/messages/message.js

@@ -13,8 +13,8 @@ import { replaceSpanToMention } from '../../utils';
  * The message component body.
  */
 export const ChatMessage = forwardRef((props, ref) => {
-    const { message } = props;
     const { model } = useChatContext();
+    const [message, setMessage] = useState(props.message.content);
     const [edit, setEdit] = useState(false);
     const [deleted, setDeleted] = useState(false);
     const [canEdit, setCanEdit] = useState(false);
@@ -39,10 +39,25 @@ export const ChatMessage = forwardRef((props, ref) => {
             setCanDelete(false);
         }
     }, [model, message]);
+    // Listen for changes in the current message.
+    useEffect(() => {
+        function messageChanged() {
+            setMessage(props.message.content);
+        }
+        props.message.changed.connect(messageChanged);
+        // Initialize the message when the message is re-rendered.
+        // FIX ? This seems to be required for outofband change, to get the new value,
+        // even if when an outofband change occurs, all the messages are deleted and
+        // recreated.
+        setMessage(props.message.content);
+        return () => {
+            props.message.changed.disconnect(messageChanged);
+        };
+    }, [props.message]);
     // 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;
@@ -96,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/messages.js

@@ -13,6 +13,7 @@ import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { ScrollContainer } from '../scroll-container';
 import { useChatContext } from '../../context';
+import { Message } from '../../message';
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
@@ -39,7 +40,7 @@ export function ChatMessages() {
             }
             model
                 .getHistory()
-                .then(history => setMessages(history.messages))
+                .then(history => setMessages(history.messages.map(message => new Message({ ...message }))))
                 .catch(e => console.error(e));
         }
         fetchHistory();
@@ -150,7 +151,7 @@ export function ChatMessages() {
                     model.user.username === message.sender.username;
                 return (
                 // extra div needed to ensure each bubble is on a new line
-                React.createElement(Box, { key: i, sx: {
+                React.createElement(Box, { key: message.id, sx: {
                         ...(isCurrentUser && {
                             marginLeft: area === 'main' ? '25%' : '10%',
                             backgroundColor: 'var(--jp-layout-color2)',

package/lib/components/messages/toolbar.js

@@ -2,8 +2,8 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-// import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
 import { Box } from '@mui/material';
 import React from 'react';
 import { TooltippedIconButton } from '../mui-extras';
@@ -13,19 +13,11 @@ const TOOLBAR_CLASS = 'jp-chat-toolbar';
  */
 export function MessageToolbar(props) {
     const buttons = [];
-    // if (props.edit !== undefined) {
-    //   const editButton = (
-    //     <TooltippedIconButton
-    //       tooltip={'edit'}
-    //       onClick={props.edit}
-    //       aria-label={'Edit'}
-    //       inputToolbar={false}
-    //     >
-    //       <EditIcon />
-    //     </TooltippedIconButton>
-    //   );
-    //   buttons.push(editButton);
-    // }
+    if (props.edit !== undefined) {
+        const editButton = (React.createElement(TooltippedIconButton, { tooltip: 'Edit', onClick: props.edit, "aria-label": 'Edit', inputToolbar: false },
+            React.createElement(EditIcon, null)));
+        buttons.push(editButton);
+    }
     if (props.delete !== undefined) {
         const deleteButton = (React.createElement(TooltippedIconButton, { tooltip: 'Delete', onClick: props.delete, "aria-label": 'Delete', inputToolbar: false },
             React.createElement(DeleteIcon, null)));

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/components/writing-indicator.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+import { IChatModel } from '../model';
+/**
+ * The input writing indicator component props.
+ */
+export interface IInputWritingIndicatorProps {
+    /**
+     * The list of users currently writing.
+     */
+    writers: IChatModel.IWriter[];
+    /**
+     * Custom mui/material styles.
+     */
+    sx?: SxProps<Theme>;
+}
+/**
+ * The writing indicator component, displaying typing status.
+ */
+export declare function WritingIndicator(props: IInputWritingIndicatorProps): JSX.Element;

package/lib/components/{input/writing-indicator.js → writing-indicator.js}

@@ -30,13 +30,14 @@ function formatWritersText(writers) {
     }
 }
 /**
- * The input writing indicator component, displaying typing status in the chat input area.
+ * The writing indicator component, displaying typing status.
  */
-export function InputWritingIndicator(props) {
+export function WritingIndicator(props) {
     const { writers } = props;
     // Always render the container to reserve space, even if no writers
     const writersText = writers.length > 0 ? formatWritersText(writers) : '';
     return (React.createElement(Box, { className: WRITERS_ELEMENT_CLASSNAME, sx: {
+            ...props.sx,
             minHeight: '16px'
         } },
         React.createElement(Typography, { variant: "caption", sx: {

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';