@jupyter/chat 0.22.1 → 0.23.0-alpha.0

package/lib/__tests__/multichat-panel.spec.js

@@ -11,6 +11,76 @@ describe('MultiChatPanel', () => {
     beforeEach(() => {
         rmRegistry = new RenderMimeRegistry();
     });
+    describe('unsetLoadedModel', () => {
+        it('should dispose the model by default', async () => {
+            const panel = new MultiChatPanel({ rmRegistry });
+            const { MockChatModel } = await import('./mocks');
+            const model = new MockChatModel();
+            panel.open({ model, displayName: 'test-chat' });
+            panel.unsetLoadedModel('test-chat');
+            expect(model.isDisposed).toBe(true);
+            panel.dispose();
+        });
+        it('should not dispose the model when dispose=false', async () => {
+            const panel = new MultiChatPanel({ rmRegistry });
+            const { MockChatModel } = await import('./mocks');
+            const model = new MockChatModel();
+            panel.open({ model, displayName: 'test-chat' });
+            panel.unsetLoadedModel('test-chat', false);
+            expect(model.isDisposed).toBe(false);
+            model.dispose();
+            panel.dispose();
+        });
+        it('should dispose the model when clicking the close button', async () => {
+            const panel = new MultiChatPanel({ rmRegistry });
+            const { MockChatModel } = await import('./mocks');
+            const model = new MockChatModel();
+            panel.open({ model, displayName: 'test-chat' });
+            const toolbar = panel.current.toolbar;
+            const names = Array.from(toolbar.names());
+            const closeIdx = names.indexOf('close');
+            expect(closeIdx).toBeGreaterThan(-1);
+            const closeButton = toolbar.layout.widgets[closeIdx];
+            closeButton.onClick();
+            expect(model.isDisposed).toBe(true);
+            panel.dispose();
+        });
+        it('should remove the model from loaded models regardless of dispose flag', async () => {
+            const panel = new MultiChatPanel({ rmRegistry });
+            const { MockChatModel } = await import('./mocks');
+            const model = new MockChatModel();
+            panel.open({ model, displayName: 'test-chat' });
+            panel.unsetLoadedModel('test-chat', false);
+            expect(panel.getLoadedModel('test-chat')).toBeUndefined();
+            model.dispose();
+            panel.dispose();
+        });
+    });
+    describe('openInMain', () => {
+        it('should not dispose the model when moving to main area', async () => {
+            const { MockChatModel } = await import('./mocks');
+            const model = new MockChatModel();
+            const openInMain = jest.fn().mockResolvedValue(true);
+            const panel = new MultiChatPanel({ rmRegistry, openInMain });
+            panel.open({ model, displayName: 'test-chat' });
+            // Find the 'moveMain' toolbar button by name and invoke its click handler directly.
+            // ToolbarButton stores the onClick handler independently of DOM/React rendering,
+            // so this works without attaching the widget to the document.
+            const toolbar = panel.current.toolbar;
+            const names = Array.from(toolbar.names());
+            const moveMainIdx = names.indexOf('moveMain');
+            expect(moveMainIdx).toBeGreaterThan(-1);
+            const moveButton = toolbar.layout.widgets[moveMainIdx];
+            moveButton.onClick();
+            // Wait for the async onClick handler: openInMain resolves, then onClose is called.
+            await Promise.resolve();
+            expect(openInMain).toHaveBeenCalledWith(model.name);
+            expect(model.isDisposed).toBe(false);
+            expect(panel.getLoadedModel('test-chat')).toBeUndefined();
+            model.dispose();
+            panel.dispose();
+        });
+    });
     describe('placeholderFactory', () => {
         it('should use defaultPlaceholder when no factory is provided', () => {
             const panel = new MultiChatPanel({ rmRegistry });
@@ -108,9 +178,20 @@ describe('MultiChatPanel', () => {
             const { MockChatModel } = await import('./mocks');
             const model = new MockChatModel();
             panel.open({ model, displayName: 'test-chat' });
-            panel.disposeLoadedModel('test-chat');
+            panel.unsetLoadedModel('test-chat');
             expect(factory.create).toHaveBeenCalledTimes(2);
             panel.dispose();
         });
     });
+    describe('side panel toolbar', () => {
+        it('should include the responsive toolbar opener for overflow actions', async () => {
+            var _a;
+            const panel = new MultiChatPanel({ rmRegistry });
+            const { MockChatModel } = await import('./mocks');
+            panel.open({ model: new MockChatModel(), displayName: 'test-chat' });
+            const opener = (_a = panel.current) === null || _a === void 0 ? void 0 : _a.toolbar.node.querySelector('.jp-Toolbar-responsive-opener');
+            expect(opener).not.toBeNull();
+            panel.dispose();
+        });
+    });
 });

package/lib/components/attachments.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IAttachment } from '../types';
 export type AttachmentsProps = {
     attachments: IAttachment[];

package/lib/components/avatar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IUser } from '../types';
 /**
  * The avatar props.

package/lib/components/chat.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ITranslator } from '@jupyterlab/translation';

package/lib/components/chat.js

@@ -6,7 +6,7 @@ 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, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { ChatInput, InputToolbarRegistry } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './messages';
@@ -15,10 +15,6 @@ import { ChatReactContext } from '../context';
 export function ChatBody(props) {
     const { model } = props;
     const [writers, setWriters] = useState([]);
-    let { inputToolbarRegistry } = props;
-    if (!inputToolbarRegistry) {
-        inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
-    }
     /**
      * Handle the changes in the writers list.
      */
@@ -41,10 +37,13 @@ export function ChatBody(props) {
         };
     }, [model]);
     const horizontalPadding = 4;
-    const contextValue = {
-        ...props,
-        inputToolbarRegistry
-    };
+    const contextValue = useMemo(() => {
+        var _a;
+        return ({
+            ...props,
+            inputToolbarRegistry: (_a = props.inputToolbarRegistry) !== null && _a !== void 0 ? _a : InputToolbarRegistry.defaultToolbarRegistry()
+        });
+    }, [props]);
     return (React.createElement(ChatReactContext.Provider, { value: contextValue },
         React.createElement(ChatMessages, null),
         React.createElement(ChatInput, { sx: {

package/lib/components/code-blocks/code-toolbar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IChatModel } from '../../model';
 export type CodeToolbarProps = {
     /**

package/lib/components/code-blocks/copy-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type CopyButtonProps = {
     value: string;
     className?: string;

package/lib/components/input/buttons/attach-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputToolbarRegistry } from '../toolbar-registry';
 /**
  * The attach button.

package/lib/components/input/buttons/cancel-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputToolbarRegistry } from '../toolbar-registry';
 /**
  * The cancel button.

package/lib/components/input/buttons/save-edit-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputToolbarRegistry } from '../toolbar-registry';
 /**
  * The save edit button.

package/lib/components/input/buttons/save-edit-button.js

@@ -4,6 +4,7 @@
  */
 import CheckIcon from '@mui/icons-material/Check';
 import React, { useEffect, useState } from 'react';
+import { submitInputMessage } from '../submit-message';
 import { TooltippedIconButton } from '../../mui-extras';
 import { useTranslator } from '../../../context';
 const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
@@ -35,8 +36,7 @@ export function SaveEditButton(props) {
         };
     }, [model]);
     async function save() {
-        await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
-        model.send(model.value);
+        await submitInputMessage({ model, chatCommandRegistry });
     }
     return (React.createElement(TooltippedIconButton, { onClick: save, tooltip: tooltip, disabled: disabled, buttonProps: {
             title: tooltip,

package/lib/components/input/buttons/send-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputToolbarRegistry } from '../toolbar-registry';
 /**
  * The send button, with optional 'include selection' menu.

package/lib/components/input/buttons/send-button.js

@@ -6,6 +6,7 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { Box, Menu, MenuItem, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
+import { submitInputMessage } from '../submit-message';
 import { TooltippedIconButton } from '../../mui-extras';
 import { useTranslator } from '../../../context';
 import { includeSelectionIcon } from '../../../icons';
@@ -86,15 +87,9 @@ export function SendButton(props) {
         };
     }, [activeCellManager, selectionWatcher, showSendWithSelection]);
     async function send() {
-        // Run all command providers
-        await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
-        const body = model.value;
-        model.value = '';
-        model.send(body);
-        model.focus();
+        await submitInputMessage({ model, chatCommandRegistry });
     }
     async function sendWithSelection() {
-        await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
         let source = '';
         let language;
         if (selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection) {
@@ -110,10 +105,8 @@ export function SendButton(props) {
         if (source) {
             body += `\n\n\`\`\`${language !== null && language !== void 0 ? language : ''}\n${source}\n\`\`\`\n`;
         }
-        model.value = '';
         closeMenu();
-        model.send(body);
-        model.focus();
+        await submitInputMessage({ model, chatCommandRegistry, body });
     }
     return (React.createElement(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: '1px' } },
         React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, sx: {

package/lib/components/input/buttons/stop-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputToolbarRegistry } from '../toolbar-registry';
 /**
  * The stop button.

package/lib/components/input/chat-input.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SxProps, Theme } from '@mui/material';
 import { IInputModel } from '../../input-model';
 export declare function ChatInput(props: ChatInput.IProps): JSX.Element;

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

@@ -5,6 +5,7 @@
 import { Autocomplete, Box, TextField } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
+import { submitInputMessage } from './submit-message';
 import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
 import { useChatContext, useTranslator } from '../../context';
@@ -130,9 +131,7 @@ export function ChatInput(props) {
         }
         // Finally, send the message when all other conditions are met.
         if (isSendCombination) {
-            // Run all command providers
-            await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
-            model.send(model.value);
+            await submitInputMessage({ model, chatCommandRegistry });
             event.stopPropagation();
             event.preventDefault();
         }

package/lib/components/input/submit-message.d.ts

@@ -0,0 +1,22 @@
+import { IInputModel } from '../../input-model';
+import { IChatCommandRegistry } from '../../registers';
+/**
+ * Submit the current input value as a chat message.
+ */
+export declare function submitInputMessage(options: submitInputMessage.IOptions): Promise<void>;
+export declare namespace submitInputMessage {
+    interface IOptions {
+        /**
+         * The input model containing the message to send.
+         */
+        model: IInputModel;
+        /**
+         * Optional chat command registry used to preprocess message content.
+         */
+        chatCommandRegistry?: IChatCommandRegistry;
+        /**
+         * Optional message body to send instead of the current model value.
+         */
+        body?: string;
+    }
+}

package/lib/components/input/submit-message.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Submit the current input value as a chat message.
+ */
+export async function submitInputMessage(options) {
+    const { model, chatCommandRegistry, body } = options;
+    await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
+    model.send(body !== null && body !== void 0 ? body : model.value);
+    model.focus();
+}

package/lib/components/messages/chat-body-placeholder.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Component that renders chat body placeholder using the factory from context.
  * Renders nothing if no factory is provided.

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IMessageContent } from '../../types';
 /**
  * The chat footer component properties.

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { IMessage } from '../../types';
 /**
  * The message header props.
@@ -16,5 +16,6 @@ type ChatMessageHeaderProps = {
 /**
  * The message header component.
  */
-export declare function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element;
+export declare function ChatMessageHeaderBase(props: ChatMessageHeaderProps): JSX.Element;
+export declare const ChatMessageHeader: React.MemoExoticComponent<typeof ChatMessageHeaderBase>;
 export {};

package/lib/components/messages/header.js

@@ -11,7 +11,7 @@ const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
 /**
  * The message header component.
  */
-export function ChatMessageHeader(props) {
+export function ChatMessageHeaderBase(props) {
     var _a, _b;
     const trans = useTranslator();
     const [message, setMessage] = useState(props.message.content);
@@ -100,3 +100,4 @@ export function ChatMessageHeader(props) {
                     fontWeight: 300
                 }, title: message.raw_time ? trans.__('Unverified time') : '' }, `${datetime[message.time]}${message.raw_time ? '*' : ''}`)))));
 }
+export const ChatMessageHeader = React.memo(ChatMessageHeaderBase);

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

@@ -1,6 +1,6 @@
-import { PromiseDelegate } from '@lumino/coreutils';
 import React from 'react';
 import { IMessage } from '../../types';
+export declare const MESSAGE_CONTAINER_CLASS = "jp-chat-message-container";
 /**
  * The message component props.
  */
@@ -13,13 +13,10 @@ type ChatMessageProps = {
      * The index of the message in the list.
      */
     index: number;
-    /**
-     * The promise to resolve when the message is rendered.
-     */
-    renderedPromise: PromiseDelegate<void>;
 };
 /**
  * The message component body.
  */
-export declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+export declare function ChatMessageBase(props: ChatMessageProps): JSX.Element;
+export declare const ChatMessage: React.MemoExoticComponent<typeof ChatMessageBase>;
 export {};

package/lib/components/messages/message.js

@@ -2,20 +2,21 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { MessageRenderer } from './message-renderer';
 import { AttachmentPreviewList } from '../attachments';
 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';
+export const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
 /**
  * The message component body.
  */
-export const ChatMessage = forwardRef((props, ref) => {
+export function ChatMessageBase(props) {
     const { model } = useChatContext();
     const [message, setMessage] = useState(props.message.content);
+    const [renderedDelegate, setRenderedDelegate] = useState(props.message.renderedDelegate);
     const [edit, setEdit] = useState(false);
     const [deleted, setDeleted] = useState(false);
     const [canEdit, setCanEdit] = useState(false);
@@ -44,6 +45,7 @@ export const ChatMessage = forwardRef((props, ref) => {
     useEffect(() => {
         function messageChanged() {
             setMessage(props.message.content);
+            setRenderedDelegate(props.message.renderedDelegate);
         }
         props.message.changed.connect(messageChanged);
         // Initialize the message when the message is re-rendered.
@@ -51,12 +53,13 @@ export const ChatMessage = forwardRef((props, ref) => {
         // even if when an outofband change occurs, all the messages are deleted and
         // recreated.
         setMessage(props.message.content);
+        setRenderedDelegate(props.message.renderedDelegate);
         return () => {
             props.message.changed.disconnect(messageChanged);
         };
     }, [props.message]);
     // Create an input model only if the message is edited.
-    const startEdition = () => {
+    const startEdition = useCallback(() => {
         var _a, _b;
         if (!canEdit || !(typeof message.body === 'string')) {
             return;
@@ -81,15 +84,15 @@ export const ChatMessage = forwardRef((props, ref) => {
         });
         model.addEditionModel(message.id, inputModel);
         setEdit(true);
-    };
+    }, [canEdit, model, message]);
     // Cancel the current edition of the message.
-    const cancelEdition = () => {
+    const cancelEdition = useCallback(() => {
         var _a;
         (_a = model.getEditionModel(message.id)) === null || _a === void 0 ? void 0 : _a.dispose();
         setEdit(false);
-    };
+    }, [model, message]);
     // Update the content of the message.
-    const updateMessage = (id, input, inputModel) => {
+    const updateMessage = useCallback((id, input, inputModel) => {
         var _a;
         if (!canEdit || !inputModel) {
             return;
@@ -102,19 +105,28 @@ export const ChatMessage = forwardRef((props, ref) => {
         model.updateMessage(id, updatedMessage);
         (_a = model.getEditionModel(message.id)) === null || _a === void 0 ? void 0 : _a.dispose();
         setEdit(false);
-    };
+    }, [model, message, canEdit]);
     // Delete the message.
-    const deleteMessage = (id) => {
+    const deleteMessage = useCallback((id) => {
         if (!canDelete) {
             return;
         }
         model.deleteMessage(id);
-    };
+    }, [model, canDelete]);
+    useEffect(() => {
+        if (deleted) {
+            renderedDelegate.resolve();
+        }
+    }, [deleted, renderedDelegate]);
     // 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, 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 })),
+    if (deleted) {
+        return React.createElement("div", { "data-index": props.index });
+    }
+    return (React.createElement("div", { "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: renderedDelegate })),
         message.attachments && !edit && (
         // Display the attachments only if message is not edited, otherwise the
         // input component display them.
         React.createElement(AttachmentPreviewList, { attachments: message.attachments }))));
-});
+}
+export const ChatMessage = React.memo(ChatMessageBase);

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const MESSAGE_CLASS = "jp-chat-message";
 /**
  * The messages list component.

package/lib/components/messages/messages.js

@@ -2,13 +2,12 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import { PromiseDelegate } from '@lumino/coreutils';
 import { Box } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useState, useRef } from 'react';
 import { MessageFooterComponent } from './footer';
 import { ChatMessageHeader } from './header';
-import { ChatMessage } from './message';
+import { ChatMessage, MESSAGE_CONTAINER_CLASS } from './message';
 import { MessagePreambleComponent } from './preamble';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
@@ -29,9 +28,6 @@ export function ChatMessages() {
     const refMsgBox = useRef(null);
     const [allRendered, setAllRendered] = useState(false);
     const [showDeleted, setShowDeleted] = useState((_a = model.config.showDeleted) !== null && _a !== void 0 ? _a : false);
-    // The list of message DOM and their rendered promises.
-    const listRef = useRef([]);
-    const renderedPromise = useRef([]);
     /**
      * Effect: fetch history and config on initial render
      */
@@ -128,11 +124,13 @@ export function ChatMessages() {
      * Observe the messages to update the current viewport and the unread messages.
      */
     useEffect(() => {
+        var _a;
         const observer = new IntersectionObserver(entries => {
             var _a;
-            // Used on first rendering, to ensure all the message as been rendered once.
+            // Used on first rendering, to ensure all the messages have been rendered once.
             if (!allRendered) {
-                Promise.all(renderedPromise.current.map(p => p.promise)).then(() => {
+                const promises = (showDeleted ? messages : messages.filter(message => !message.deleted)).map(msg => msg.renderedDelegate.promise);
+                Promise.all(promises).then(() => {
                     setAllRendered(true);
                 });
             }
@@ -161,7 +159,7 @@ export function ChatMessages() {
             });
             model.messagesInViewport = inViewport;
             // Ensure that all messages are rendered before updating unread messages, otherwise
-            // it can lead to wrong assumption , because more message are in the viewport
+            // it can lead to wrong assumption, because more messages are in the viewport
             // before they are rendered.
             if (allRendered && unreadModified) {
                 model.unreadMessages = unread;
@@ -170,19 +168,13 @@ export function ChatMessages() {
         /**
          * Observe the messages.
          */
-        listRef.current.forEach(item => {
-            if (item) {
-                observer.observe(item);
-            }
+        (_a = refMsgBox.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${MESSAGE_CONTAINER_CLASS}`).forEach(item => {
+            observer.observe(item);
         });
         return () => {
-            listRef.current.forEach(item => {
-                if (item) {
-                    observer.unobserve(item);
-                }
-            });
+            observer.disconnect();
         };
-    }, [messages, allRendered]);
+    }, [messages, showDeleted, allRendered]);
     const horizontalPadding = area === 'main' ? 8 : 4;
     return (React.createElement(React.Fragment, null,
         React.createElement(ScrollContainer, { ref: scrollContainerRef, sx: { flexGrow: 1 } },
@@ -199,7 +191,6 @@ export function ChatMessages() {
                 }, ref: refMsgBox, className: clsx(MESSAGES_BOX_CLASS) }, (showDeleted
                 ? messages
                 : messages.filter(message => !message.deleted)).map((message, i) => {
-                renderedPromise.current[i] = new PromiseDelegate();
                 const isCurrentUser = model.user !== undefined &&
                     model.user.username === message.sender.username;
                 return (
@@ -215,7 +206,7 @@ export function ChatMessages() {
                     }, className: clsx(MESSAGE_CLASS, message.stacked ? MESSAGE_STACKED_CLASS : '') },
                     React.createElement(ChatMessageHeader, { message: message, isCurrentUser: isCurrentUser }),
                     messagePreambleRegistry && (React.createElement(MessagePreambleComponent, { message: message })),
-                    React.createElement(ChatMessage, { message: message, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) }),
+                    React.createElement(ChatMessage, { message: message, index: i }),
                     messageFooterRegistry && (React.createElement(MessageFooterComponent, { message: message }))));
             }))),
         React.createElement(Navigation, { refMsgBox: refMsgBox, allRendered: allRendered })));

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IMessage } from '../../types';
 /**
  * The preamble component properties.

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * The toolbar attached to a message.
  */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * The component props.
  */

package/lib/components/mui-extras/tooltipped-icon-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { TooltippedButtonProps } from './tooltipped-button';
 /**

package/lib/components/writing-indicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SxProps, Theme } from '@mui/material';
 import { IChatModel } from '../model';
 /**

package/lib/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TranslationBundle } from '@jupyterlab/translation';
 import { Chat } from './components';
 export declare const TRANSLATION_DOMAIN = "jupyter-chat";

package/lib/message.d.ts

@@ -1,3 +1,4 @@
+import { PromiseDelegate } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { IAttachment, IMessageContent, IMessage, IMessageMetadata, IUser, IMimeModelBody } from './types';
 /**
@@ -34,10 +35,15 @@ export declare class Message implements IMessage {
      * A signal emitting when the message has been updated.
      */
     get changed(): ISignal<IMessage, void>;
+    /**
+     * A promise delegate that resolve when the message is rendered.
+     */
+    get renderedDelegate(): PromiseDelegate<void>;
     /**
      * Update one or several fields of the message.
      */
     update(updated: Partial<IMessageContent>): void;
     private _content;
     private _changed;
+    private _rendered;
 }