@jupyter/chat 0.20.0 → 0.21.0

package/lib/model.d.ts

@@ -1,4 +1,5 @@
 import { IDocumentManager } from '@jupyterlab/docmanager';
+import { ITranslator, TranslationBundle } from '@jupyterlab/translation';
 import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
@@ -78,6 +79,10 @@ export interface IChatModel extends IDisposable {
      * A signal emitting when the writers change.
      */
     readonly writersChanged?: ISignal<IChatModel, IChatModel.IWriter[]>;
+    /**
+     * A signal emitting when a message has been updated.
+     */
+    readonly messageChanged: ISignal<IChatModel, IMessage>;
     /**
      * A signal emitting when the message edition input changed change.
      */
@@ -254,6 +259,10 @@ export declare abstract class AbstractChatModel implements IChatModel {
      * A signal emitting when the writers change.
      */
     get writersChanged(): ISignal<IChatModel, IChatModel.IWriter[]>;
+    /**
+     * A signal emitting when a message has been updated.
+     */
+    get messageChanged(): ISignal<IChatModel, IMessage>;
     /**
      * A signal emitting when the message edition input changed change.
      */
@@ -339,6 +348,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
      *    unread messages count decrease.
      */
     private _notify;
+    private _onMessageChanged;
     private _messages;
     private _unreadMessages;
     private _lastRead;
@@ -346,6 +356,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     private _id;
     private _name;
     private _config;
+    protected _trans: TranslationBundle;
     private _readyDelegate;
     private _inputModel;
     private _disposed;
@@ -358,6 +369,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     private _writers;
     private _messageEditions;
     private _messagesUpdated;
+    private _messageChanged;
     private _configChanged;
     private _unreadChanged;
     private _viewportChanged;
@@ -384,6 +396,10 @@ export declare namespace IChatModel {
          * Commands registry.
          */
         commands?: CommandRegistry;
+        /**
+         * The translator for internationalization.
+         */
+        translator?: ITranslator;
         /**
          * Active cell manager.
          */

package/lib/model.js

@@ -2,9 +2,11 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { nullTranslator } from '@jupyterlab/translation';
 import { ArrayExt } from '@lumino/algorithm';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
+import { TRANSLATION_DOMAIN } from './context';
 import { InputModel } from './input-model';
 import { Message } from './message';
 /**
@@ -18,7 +20,7 @@ export class AbstractChatModel {
      * Create a new chat model.
      */
     constructor(options = {}) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         this._messages = [];
         this._unreadMessages = [];
         this._lastRead = 0;
@@ -31,6 +33,7 @@ export class AbstractChatModel {
         this._writers = [];
         this._messageEditions = new Map();
         this._messagesUpdated = new Signal(this);
+        this._messageChanged = new Signal(this);
         this._configChanged = new Signal(this);
         this._unreadChanged = new Signal(this);
         this._viewportChanged = new Signal(this);
@@ -46,6 +49,7 @@ export class AbstractChatModel {
             sendTypingNotification: true,
             ...config
         };
+        this._trans = ((_b = options.translator) !== null && _b !== void 0 ? _b : nullTranslator).load(TRANSLATION_DOMAIN);
         this._inputModel = new InputModel({
             activeCellManager: options.activeCellManager,
             selectionWatcher: options.selectionWatcher,
@@ -56,9 +60,9 @@ export class AbstractChatModel {
             onSend: (input) => this.sendMessage({ body: input })
         });
         this._commands = options.commands;
-        this._activeCellManager = (_b = options.activeCellManager) !== null && _b !== void 0 ? _b : null;
-        this._selectionWatcher = (_c = options.selectionWatcher) !== null && _c !== void 0 ? _c : null;
-        this._documentManager = (_d = options.documentManager) !== null && _d !== void 0 ? _d : null;
+        this._activeCellManager = (_c = options.activeCellManager) !== null && _c !== void 0 ? _c : null;
+        this._selectionWatcher = (_d = options.selectionWatcher) !== null && _d !== void 0 ? _d : null;
+        this._documentManager = (_e = options.documentManager) !== null && _e !== void 0 ? _e : null;
         this._readyDelegate = new PromiseDelegate();
         this.ready.then(() => {
             this._inputModel.chatContext = this.createChatContext();
@@ -257,6 +261,12 @@ export class AbstractChatModel {
     get writersChanged() {
         return this._writersChanged;
     }
+    /**
+     * A signal emitting when a message has been updated.
+     */
+    get messageChanged() {
+        return this._messageChanged;
+    }
     /**
      * A signal emitting when the message edition input changed change.
      */
@@ -279,6 +289,7 @@ export class AbstractChatModel {
         }
         this._isDisposed = true;
         this._disposed.emit();
+        Signal.clearData(this);
     }
     /**
      * Whether the chat handler is disposed.
@@ -326,7 +337,9 @@ export class AbstractChatModel {
         // Format the messages.
         messages.forEach((message, idx) => {
             const formattedMessage = this.formatChatMessage(message);
-            formattedMessages.push(new Message(formattedMessage));
+            const msg = new Message(formattedMessage);
+            msg.changed.connect(this._onMessageChanged, this);
+            formattedMessages.push(msg);
             if (message.time > this.lastRead) {
                 unreadIndexes.push(index + idx);
             }
@@ -355,7 +368,9 @@ export class AbstractChatModel {
      * @param count - the number of messages to delete.
      */
     messagesDeleted(index, count) {
-        this._messages.splice(index, count);
+        this._messages.splice(index, count).forEach(msg => {
+            msg.changed.disconnect(this._onMessageChanged, this);
+        });
         this._messagesUpdated.emit();
     }
     /**
@@ -423,14 +438,16 @@ export class AbstractChatModel {
                 this._commands
                     .execute('apputils:update-notification', {
                     id: this._notificationId,
-                    message: `${unreadCount} incoming message(s) ${this._name ? 'in ' + this._name : ''}`
+                    message: this._name
+                        ? this._trans.__('%1 incoming message(s) in %2', unreadCount, this._name)
+                        : this._trans.__('%1 incoming message(s)', unreadCount)
                 })
                     .then(success => {
                     // Create a new notification only if messages are added.
                     if (!success && canCreate) {
                         this._commands.execute('apputils:notify', {
                             type: 'info',
-                            message: `${unreadCount} incoming message(s) in ${this._name}`
+                            message: this._trans.__('%1 incoming message(s) in %2', unreadCount, this._name)
                         }).then(id => {
                             this._notificationId = id;
                         });
@@ -446,6 +463,9 @@ export class AbstractChatModel {
             }
         }
     }
+    _onMessageChanged(msg) {
+        this._messageChanged.emit(msg);
+    }
 }
 /**
  * An abstract base class implementing `IChatContext`. This can be extended into

package/lib/types.d.ts

@@ -75,18 +75,59 @@ export interface IMessageMetadata {
  * The chat message description.
  */
 export type IMessageContent<T = IUser, U = IAttachment> = {
+    /**
+     * The type of the message, usually 'msg' for a regular message.
+     */
     type: string;
-    body: string | IMimeModelBody;
+    /**
+     * The body of the message, markdown formatted.
+     */
+    body: string;
+    /**
+     * The message id (should be unique).
+     */
     id: string;
+    /**
+     * The message timestamp (seconds since epoch).
+     */
     time: number;
+    /**
+     * The sender of the message, default to IUser type.
+     */
     sender: T;
+    /**
+     * The attachment list, default to IAttachment type.
+     */
     attachments?: U[];
+    /**
+     * Optional, list of users mentioned in the message.
+     */
     mentions?: T[];
+    /**
+     * Optional, whether the message time has been verified.
+     */
     raw_time?: boolean;
+    /**
+     * Optional, whether the message has been deleted.
+     */
     deleted?: boolean;
+    /**
+     * Optional, whether the message has been edited.
+     */
     edited?: boolean;
+    /**
+     * Optional, whether the message should be stacked to the previous one.
+     */
     stacked?: boolean;
+    /**
+     * Optional, the metadata of the message.
+     */
     metadata?: IMessageMetadata;
+    /**
+     * Optional, a mime bundle.
+     * If provided, the body won't be displayed in favor of the mime bundle.
+     */
+    mime_model?: IMimeModelBody;
 };
 export interface IMessage extends IMessageContent {
     /**
@@ -173,6 +214,10 @@ export interface INotebookAttachment {
      * The local path of the notebook, relative to `ContentsManager.root_dir`.
      */
     value: string;
+    /**
+     * (optional) The MIME type of the attachment.
+     */
+    mimetype?: string;
     /**
      * (optional) A list of cells in the notebook.
      */

package/lib/widgets/chat-error.d.ts

@@ -1,2 +1,3 @@
 import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
-export declare function buildErrorWidget(themeManager: IThemeManager | null): ReactWidget;
+import { ITranslator } from '@jupyterlab/translation';
+export declare function buildErrorWidget(themeManager: IThemeManager | null, translator?: ITranslator): ReactWidget;

package/lib/widgets/chat-error.js

@@ -3,11 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { ReactWidget } from '@jupyterlab/apputils';
+import { nullTranslator } from '@jupyterlab/translation';
 import { Alert, Box } from '@mui/material';
 import React from 'react';
 import { JlThemeProvider } from '../components/jl-theme-provider';
+import { TRANSLATION_DOMAIN } from '../context';
 import { chatIcon } from '../icons';
-export function buildErrorWidget(themeManager) {
+export function buildErrorWidget(themeManager, translator) {
+    const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load(TRANSLATION_DOMAIN);
     const ErrorWidget = ReactWidget.create(React.createElement(JlThemeProvider, { themeManager: themeManager },
         React.createElement(Box, { sx: {
                 width: '100%',
@@ -18,9 +21,9 @@ export function buildErrorWidget(themeManager) {
                 flexDirection: 'column'
             } },
             React.createElement(Box, { sx: { padding: 4 } },
-                React.createElement(Alert, { severity: "error" }, "There seems to be a problem with the Chat backend, please look at the JupyterLab server logs or contact your administrator to correct this problem.")))));
+                React.createElement(Alert, { severity: "error" }, trans.__('There seems to be a problem with the Chat backend, please look at the JupyterLab server logs or contact your administrator to correct this problem.'))))));
     ErrorWidget.id = 'jupyter-chat::chat';
     ErrorWidget.title.icon = chatIcon;
-    ErrorWidget.title.caption = 'Jupyter Chat'; // TODO: i18n
+    ErrorWidget.title.caption = trans.__('Jupyter Chat');
     return ErrorWidget;
 }

package/lib/widgets/chat-selector-popup.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ITranslator } from '@jupyterlab/translation';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';
 /**
@@ -76,6 +77,7 @@ export declare class ChatSelectorPopup extends ReactWidget {
     private _onClose?;
     private _anchor;
     private _anchorRect;
+    private _trans;
 }
 /**
  * Namespace for ChatSelectorPopup.
@@ -98,5 +100,9 @@ export declare namespace ChatSelectorPopup {
          * The element to anchor the popup to.
          */
         anchor?: HTMLElement;
+        /**
+         * The translator for internationalization.
+         */
+        translator?: ITranslator;
     }
 }

package/lib/widgets/chat-selector-popup.js

@@ -3,8 +3,10 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { Button } from '@jupyter/react-components';
+import { nullTranslator } from '@jupyterlab/translation';
 import { closeIcon, ReactWidget } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef } from 'react';
+import { TRANSLATION_DOMAIN } from '../context';
 const POPUP_CLASS = 'jp-chat-selector-popup';
 const POPUP_LIST_CLASS = 'jp-chat-selector-popup-list';
 const POPUP_ITEM_CLASS = 'jp-chat-selector-popup-item';
@@ -16,7 +18,7 @@ const POPUP_EMPTY_CLASS = 'jp-chat-selector-popup-empty';
  */
 export class ChatSelectorPopup extends ReactWidget {
     constructor(options) {
-        var _a;
+        var _a, _b;
         super();
         /**
          * Check if the popup should move (anchor has moved).
@@ -70,6 +72,7 @@ export class ChatSelectorPopup extends ReactWidget {
         this._onSelect = options.onSelect;
         this._onClose = options.onClose;
         this._anchor = (_a = options.anchor) !== null && _a !== void 0 ? _a : null;
+        this._trans = ((_b = options.translator) !== null && _b !== void 0 ? _b : nullTranslator).load(TRANSLATION_DOMAIN);
         // Start hidden
         this.hide();
         // Initialize filtered chats
@@ -196,7 +199,7 @@ export class ChatSelectorPopup extends ReactWidget {
         super.hide();
     }
     render() {
-        return (React.createElement(ChatSelectorList, { names: this._filteredChats, selectedName: this._selectedName, loadedModels: this._loadedModels, onSelect: this._handleItemClick, onUpdateSelectedName: this._handleUpdateSelectedName, onClose: this._handleClose }));
+        return (React.createElement(ChatSelectorList, { names: this._filteredChats, selectedName: this._selectedName, loadedModels: this._loadedModels, onSelect: this._handleItemClick, onUpdateSelectedName: this._handleUpdateSelectedName, onClose: this._handleClose, trans: this._trans }));
     }
     onAfterShow(msg) {
         super.onAfterShow(msg);
@@ -261,7 +264,7 @@ export class ChatSelectorPopup extends ReactWidget {
 /**
  * React component for rendering the chat list.
  */
-function ChatSelectorList({ names, selectedName, loadedModels, onSelect, onUpdateSelectedName, onClose }) {
+function ChatSelectorList({ names, selectedName, loadedModels, onSelect, onUpdateSelectedName, onClose, trans }) {
     const listRef = useRef(null);
     // Scroll selected item into view
     useEffect(() => {
@@ -277,7 +280,7 @@ function ChatSelectorList({ names, selectedName, loadedModels, onSelect, onUpdat
         onClose(name);
     };
     if (names.length === 0) {
-        return React.createElement("div", { className: POPUP_EMPTY_CLASS }, "No chat found");
+        return React.createElement("div", { className: POPUP_EMPTY_CLASS }, trans.__('No chat found'));
     }
     return (React.createElement("ul", { ref: listRef, className: POPUP_LIST_CLASS }, names.map(name => {
         const isLoaded = loadedModels.has(name);
@@ -287,7 +290,7 @@ function ChatSelectorList({ names, selectedName, loadedModels, onSelect, onUpdat
                     React.createElement("div", { className: POPUP_ITEM_LABEL_CLASS },
                         React.createElement("span", { className: "jp-chat-selector-popup-item-name", title: name }, name),
                         isLoaded && (React.createElement("span", { className: "jp-chat-selector-popup-item-indicator" }, "\u25CF")))),
-                isLoaded && (React.createElement(Button, { onClick: e => handleCloseClick(e, name), appearance: "stealth", title: "Close and dispose this chat", className: "jp-chat-selector-popup-item-close" },
+                isLoaded && (React.createElement(Button, { onClick: e => handleCloseClick(e, name), appearance: "stealth", title: trans.__('Close and dispose this chat'), className: "jp-chat-selector-popup-item-close" },
                     React.createElement(closeIcon.react, { tag: null }))))));
     })));
 }

package/lib/widgets/chat-sidebar.js

@@ -2,12 +2,16 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { nullTranslator } from '@jupyterlab/translation';
+import { TRANSLATION_DOMAIN } from '../context';
 import { chatIcon } from '../icons';
 import { ChatWidget } from './chat-widget';
 export function buildChatSidebar(options) {
+    var _a;
     const widget = new ChatWidget(options);
+    const trans = ((_a = options.translator) !== null && _a !== void 0 ? _a : nullTranslator).load(TRANSLATION_DOMAIN);
     widget.id = 'jupyter-chat::side-panel';
     widget.title.icon = chatIcon;
-    widget.title.caption = 'Jupyter Chat'; // TODO: i18n
+    widget.title.caption = trans.__('Jupyter Chat');
     return widget;
 }

package/lib/widgets/chat-widget.js

@@ -5,9 +5,11 @@
 import { ReactWidget } from '@jupyterlab/apputils';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
+import { nullTranslator } from '@jupyterlab/translation';
 import React from 'react';
 import { Drag } from '@lumino/dragdrop';
 import { Chat, MESSAGE_CLASS } from '../components';
+import { TRANSLATION_DOMAIN } from '../context';
 import { chatIcon } from '../icons';
 // MIME type constant for file browser drag events
 const FILE_BROWSER_MIME = 'application/x-jupyter-icontentsrich';
@@ -20,10 +22,12 @@ const INPUT_CONTAINER_CLASS = 'jp-chat-input-container';
 const DRAG_HOVER_CLASS = 'jp-chat-drag-hover';
 export class ChatWidget extends ReactWidget {
     constructor(options) {
+        var _a;
         super();
         this._dragTarget = null;
+        const trans = ((_a = options.translator) !== null && _a !== void 0 ? _a : nullTranslator).load(TRANSLATION_DOMAIN);
         this.title.icon = chatIcon;
-        this.title.caption = 'Jupyter Chat'; // TODO: i18n
+        this.title.caption = trans.__('Jupyter Chat');
         this._chatOptions = options;
         this.id = `jupyter-chat::widget::${options.model.name}`;
         this.addClass('jp-chat-widget');
@@ -271,6 +275,7 @@ export class ChatWidget extends ReactWidget {
                 const attachment = {
                     type: 'notebook',
                     value: notebookPath,
+                    mimetype: 'application/x-ipynb+json',
                     cells: validCells
                 };
                 const inputModel = this._getInputFromEvent(event);

package/lib/widgets/multichat-panel.d.ts

@@ -1,3 +1,4 @@
+import { TranslationBundle } from '@jupyterlab/translation';
 import { PanelWithToolbar } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';
 import { ISignal } from '@lumino/signaling';
@@ -100,6 +101,7 @@ export declare class MultiChatPanel extends PanelWithToolbar {
     private _currentWidget?;
     private _chatNames;
     private _visibilityChanged;
+    private _trans;
 }
 /**
  * The chat panel namespace.
@@ -229,6 +231,10 @@ declare namespace SidePanelWidget {
          * The callback to rename the chat.
          */
         renameChat?: boolean | ((oldName: string) => Promise<string | null>);
+        /**
+         * The translation bundle.
+         */
+        trans: TranslationBundle;
     }
 }
 export {};

package/lib/widgets/multichat-panel.js

@@ -7,6 +7,7 @@
  * Originally adapted from jupyterlab-chat's ChatPanel
  */
 import { InputDialog } from '@jupyterlab/apputils';
+import { nullTranslator } from '@jupyterlab/translation';
 import { addIcon, closeIcon, launchIcon, PanelWithToolbar, ReactWidget, Spinner, ToolbarButton } from '@jupyterlab/ui-components';
 import { ArrayExt } from '@lumino/algorithm';
 import { Debouncer } from '@lumino/polling';
@@ -15,6 +16,7 @@ import { Widget } from '@lumino/widgets';
 import React, { useEffect, useRef, useState } from 'react';
 import { ChatWidget } from './chat-widget';
 import { ChatSelectorPopup } from './chat-selector-popup';
+import { TRANSLATION_DOMAIN } from '../context';
 import { chatIcon, readIcon } from '../icons';
 const SIDEPANEL_CLASS = 'jp-chat-sidepanel';
 const ADD_BUTTON_CLASS = 'jp-chat-add';
@@ -29,6 +31,7 @@ export class MultiChatPanel extends PanelWithToolbar {
      * The constructor of the multichat panel.
      */
     constructor(options) {
+        var _a;
         super(options);
         /**
          * Invoke the update of the list of available chats.
@@ -93,7 +96,9 @@ export class MultiChatPanel extends PanelWithToolbar {
         this._visibilityChanged = new Signal(this);
         this.id = 'jupyter-chat::multi-chat-panel';
         this.title.icon = chatIcon;
-        this.title.caption = 'Jupyter Chat'; // TODO: i18n/
+        const translator = (_a = options.translator) !== null && _a !== void 0 ? _a : nullTranslator;
+        this._trans = translator.load(TRANSLATION_DOMAIN);
+        this.title.caption = this._trans.__('Jupyter Chat');
         this.addClass(SIDEPANEL_CLASS);
         this._chatOptions = options;
         this._inputToolbarFactory = options.inputToolbarFactory;
@@ -109,14 +114,14 @@ export class MultiChatPanel extends PanelWithToolbar {
                     this.open(addChatArgs);
                 },
                 icon: addIcon,
-                tooltip: 'Create a new chat'
+                tooltip: this._trans.__('Create a new chat')
             });
             addChat.addClass(ADD_BUTTON_CLASS);
             this.toolbar.addItem('createChat', addChat);
         }
         if (this._getChatNames && this._createModel) {
             // Chat selector with search input
-            this._openChatWidget = ReactWidget.create(React.createElement(ChatSearchInput, { selectChat: this._onSelectChat, getPopup: () => this._chatSelectorPopup, chatOpened: this._chatOpened }));
+            this._openChatWidget = ReactWidget.create(React.createElement(ChatSearchInput, { selectChat: this._onSelectChat, getPopup: () => this._chatSelectorPopup, chatOpened: this._chatOpened, trans: this._trans }));
             this._openChatWidget.addClass(OPEN_SELECT_CLASS);
             this.toolbar.addItem('openChat', this._openChatWidget);
             // Create the popup widget (attached to document body)
@@ -125,7 +130,8 @@ export class MultiChatPanel extends PanelWithToolbar {
                 onSelect: this._onSelectChat,
                 onClose: (name) => {
                     this.disposeLoadedModel(name);
-                }
+                },
+                translator
             });
         }
         // Insert the toolbar as first child.
@@ -246,7 +252,8 @@ export class MultiChatPanel extends PanelWithToolbar {
             renameChat: this._renameChat,
             onClose: (name) => {
                 this.disposeLoadedModel(name);
-            }
+            },
+            trans: this._trans
         });
         // Add to content panel
         this.addWidget(widget);
@@ -326,6 +333,7 @@ class SidePanelWidget extends PanelWithToolbar {
         this._nameChanged = new Signal(this);
         this._chatWidget = options.widget;
         this._displayName = (_a = options.displayName) !== null && _a !== void 0 ? _a : options.widget.model.name;
+        const trans = options.trans;
         this.addClass(SIDEPANEL_WIDGET_CLASS);
         this.toolbar.addClass(TOOLBAR_CLASS);
         this._updateTitle();
@@ -341,7 +349,7 @@ class SidePanelWidget extends PanelWithToolbar {
         // Add toolbar buttons
         this._markAsRead = new ToolbarButton({
             icon: readIcon,
-            iconLabel: 'Mark chat as read',
+            iconLabel: trans.__('Mark chat as read'),
             className: 'jp-mod-styled',
             onClick: () => {
                 if (this.model) {
@@ -353,7 +361,7 @@ class SidePanelWidget extends PanelWithToolbar {
         if (options.renameChat) {
             const renameButton = new ToolbarButton({
                 iconClass: 'jp-EditIcon',
-                iconLabel: 'Rename chat',
+                iconLabel: trans.__('Rename chat'),
                 className: 'jp-mod-styled',
                 onClick: async () => {
                     if (!options.renameChat) {
@@ -363,9 +371,9 @@ class SidePanelWidget extends PanelWithToolbar {
                     if (options.renameChat === true) {
                         // If rename chat is true, let's provide a input to select new name.
                         const result = await InputDialog.getText({
-                            title: 'Rename Chat',
+                            title: trans.__('Rename Chat'),
                             text: this.model.name,
-                            placeholder: 'new-name'
+                            placeholder: trans.__('new-name')
                         });
                         if (!result.button.accept && result.value) {
                             return;
@@ -389,7 +397,7 @@ class SidePanelWidget extends PanelWithToolbar {
         if (options.openInMain) {
             const moveToMain = new ToolbarButton({
                 icon: launchIcon,
-                iconLabel: 'Move the chat to the main area',
+                iconLabel: trans.__('Move the chat to the main area'),
                 className: 'jp-mod-styled',
                 onClick: async () => {
                     var _a;
@@ -403,7 +411,7 @@ class SidePanelWidget extends PanelWithToolbar {
         }
         const closeButton = new ToolbarButton({
             icon: closeIcon,
-            iconLabel: 'Close the chat',
+            iconLabel: trans.__('Close the chat'),
             className: 'jp-mod-styled',
             onClick: () => {
                 options.onClose(this._displayName);
@@ -480,7 +488,7 @@ class SidePanelWidget extends PanelWithToolbar {
 /**
  * A search input component for selecting a chat.
  */
-function ChatSearchInput({ selectChat, getPopup, chatOpened }) {
+function ChatSearchInput({ selectChat, getPopup, chatOpened, trans }) {
     const [query, setQuery] = useState('');
     const inputRef = useRef(null);
     useEffect(() => {
@@ -553,5 +561,5 @@ function ChatSearchInput({ selectChat, getPopup, chatOpened }) {
                 break;
         }
     };
-    return (React.createElement("input", { ref: inputRef, type: "text", placeholder: "Select a chat", value: query, onChange: handleInputChange, onFocus: handleInputFocus, onClick: handleInputClick, onKeyDown: handleKeyDown, className: "jp-chat-search-input" }));
+    return (React.createElement("input", { ref: inputRef, type: "text", placeholder: trans.__('Select a chat'), value: query, onChange: handleInputChange, onFocus: handleInputFocus, onClick: handleInputClick, onKeyDown: handleKeyDown, className: "jp-chat-search-input" }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -56,6 +56,7 @@
     "@jupyterlab/fileeditor": "^4.2.0",
     "@jupyterlab/notebook": "^4.2.0",
     "@jupyterlab/rendermime": "^4.2.0",
+    "@jupyterlab/translation": "^4.2.0",
     "@jupyterlab/ui-components": "^4.2.0",
     "@lumino/algorithm": "^2.0.0",
     "@lumino/commands": "^2.0.0",

package/src/__tests__/model.spec.ts

@@ -80,6 +80,64 @@ describe('test chat model', () => {
     });
   });
 
+  describe('messageChanged signal', () => {
+    const msg = {
+      type: 'msg',
+      id: 'message1',
+      time: Date.now() / 1000,
+      body: 'original body',
+      sender: { username: 'user' }
+    } as IMessageContent;
+
+    it('should emit messageChanged when a message is updated', () => {
+      const model = new MockChatModel();
+      model.messageAdded(msg);
+
+      let emitCount = 0;
+      model.messageChanged.connect(() => {
+        emitCount++;
+      });
+
+      let changedMessage: IMessage | null = null;
+      model.messageChanged.connect((sender, message) => {
+        changedMessage = message;
+      });
+
+      model.messages[0].update({ body: 'updated body' });
+      expect(emitCount).toBe(1);
+      expect(changedMessage).not.toBeNull();
+      expect(changedMessage!.body).toBe('updated body');
+    });
+
+    it('should not emit messageChanged after the message is deleted', () => {
+      const model = new MockChatModel();
+      model.messageAdded(msg);
+
+      let emitCount = 0;
+      model.messageChanged.connect(() => {
+        emitCount++;
+      });
+
+      model.messagesDeleted(0, 1);
+      model.messages[0]?.update({ body: 'updated body' });
+      expect(emitCount).toBe(0);
+    });
+
+    it('should not emit messageChanged after the model is disposed', () => {
+      const model = new MockChatModel();
+      model.messageAdded(msg);
+
+      let emitCount = 0;
+      model.messageChanged.connect(() => {
+        emitCount++;
+      });
+
+      model.dispose();
+      model.messages[0]?.update({ body: 'updated body' });
+      expect(emitCount).toBe(0);
+    });
+  });
+
   describe('model config', () => {
     it('should have empty config', () => {
       const model = new MockChatModel();