@jupyter/chat 0.20.0 → 0.21.1

package/lib/__tests__/model.spec.js

@@ -66,6 +66,55 @@ describe('test chat model', () => {
             expect(messages[0].body).toBe('formatted msg');
         });
     });
+    describe('messageChanged signal', () => {
+        const msg = {
+            type: 'msg',
+            id: 'message1',
+            time: Date.now() / 1000,
+            body: 'original body',
+            sender: { username: 'user' }
+        };
+        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 = 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', () => {
+            var _a;
+            const model = new MockChatModel();
+            model.messageAdded(msg);
+            let emitCount = 0;
+            model.messageChanged.connect(() => {
+                emitCount++;
+            });
+            model.messagesDeleted(0, 1);
+            (_a = model.messages[0]) === null || _a === void 0 ? void 0 : _a.update({ body: 'updated body' });
+            expect(emitCount).toBe(0);
+        });
+        it('should not emit messageChanged after the model is disposed', () => {
+            var _a;
+            const model = new MockChatModel();
+            model.messageAdded(msg);
+            let emitCount = 0;
+            model.messageChanged.connect(() => {
+                emitCount++;
+            });
+            model.dispose();
+            (_a = model.messages[0]) === null || _a === void 0 ? void 0 : _a.update({ body: 'updated body' });
+            expect(emitCount).toBe(0);
+        });
+    });
     describe('model config', () => {
         it('should have empty config', () => {
             const model = new MockChatModel();

package/lib/components/attachments.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { PathExt } from '@jupyterlab/coreutils';
 import { UUID } from '@lumino/coreutils';
 import { TooltippedIconButton } from './mui-extras';
-import { useChatContext } from '../context';
+import { useChatContext, useTranslator } from '../context';
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
 const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
 const REMOVE_BUTTON_CLASS = 'jp-chat-attachment-remove';
@@ -52,7 +52,7 @@ export function AttachmentPreviewList(props) {
  * The Attachment component.
  */
 export function AttachmentPreview(props) {
-    const remove_tooltip = 'Remove attachment';
+    const trans = useTranslator();
     const { attachmentOpenerRegistry } = useChatContext();
     const isClickable = !!(attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type));
     return (React.createElement(Box, { className: ATTACHMENT_CLASS, sx: {
@@ -80,7 +80,7 @@ export function AttachmentPreview(props) {
                         }
                         : {}
                 } }, getAttachmentDisplayName(props.attachment))),
-        props.onRemove && (React.createElement(TooltippedIconButton, { tooltip: remove_tooltip, onClick: () => props.onRemove(props.attachment), className: REMOVE_BUTTON_CLASS, inputToolbar: false, sx: {
+        props.onRemove && (React.createElement(TooltippedIconButton, { tooltip: trans.__('Remove attachment'), onClick: () => props.onRemove(props.attachment), className: REMOVE_BUTTON_CLASS, inputToolbar: false, sx: {
                 width: 'unset',
                 minWidth: 'unset',
                 height: 'unset',

package/lib/components/chat.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ITranslator } from '@jupyterlab/translation';
 import { IInputToolbarRegistry } from './input';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry, IChatCommandRegistry, IMessageFooterRegistry, IMessagePreambleRegistry } from '../registers';
@@ -51,6 +52,10 @@ export declare namespace Chat {
          * The area where the chat is displayed.
          */
         area?: ChatArea;
+        /**
+         * The translator for internationalization.
+         */
+        translator?: ITranslator;
     }
     /**
      * The options to build the Chat UI.

package/lib/components/code-blocks/code-toolbar.js

@@ -7,6 +7,7 @@ import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { CopyButton } from './copy-button';
 import { TooltippedIconButton } from '../mui-extras';
+import { useTranslator } from '../../context';
 import { replaceCellIcon } from '../../icons';
 const CODE_TOOLBAR_CLASS = 'jp-chat-code-toolbar';
 const CODE_TOOLBAR_ITEM_CLASS = 'jp-chat-code-toolbar-item';
@@ -61,26 +62,29 @@ export function CodeToolbar(props) {
         React.createElement(CopyButton, { value: content, className: CODE_TOOLBAR_ITEM_CLASS })));
 }
 function InsertAboveButton(props) {
+    const trans = useTranslator();
     const tooltip = props.activeCellAvailable
-        ? 'Insert above active cell'
-        : 'Insert above active cell (no active cell)';
+        ? trans.__('Insert above active cell')
+        : trans.__('Insert above active cell (no active cell)');
     return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertAbove(props.content); }, disabled: !props.activeCellAvailable, inputToolbar: false },
         React.createElement(addAboveIcon.react, { height: "16px", width: "16px" })));
 }
 function InsertBelowButton(props) {
+    const trans = useTranslator();
     const tooltip = props.activeCellAvailable
-        ? 'Insert below active cell'
-        : 'Insert below active cell (no active cell)';
+        ? trans.__('Insert below active cell')
+        : trans.__('Insert below active cell (no active cell)');
     return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, disabled: !props.activeCellAvailable, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertBelow(props.content); }, inputToolbar: false },
         React.createElement(addBelowIcon.react, { height: "16px", width: "16px" })));
 }
 function ReplaceButton(props) {
-    var _a, _b;
+    var _a, _b, _c;
+    const trans = useTranslator();
     const tooltip = props.selectionExists
-        ? `Replace selection (${(_b = (_a = props.selectionWatcher) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.numLines} line(s))`
+        ? trans.__('Replace selection (%1 line(s))', (_c = (_b = (_a = props.selectionWatcher) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.numLines) !== null && _c !== void 0 ? _c : 0)
         : props.activeCellAvailable
-            ? 'Replace selection (active cell)'
-            : 'Replace selection (no selection)';
+            ? trans.__('Replace selection (active cell)')
+            : trans.__('Replace selection (no selection)');
     const disabled = !props.activeCellAvailable && !props.selectionExists;
     const replace = () => {
         var _a, _b, _c;

package/lib/components/code-blocks/copy-button.js

@@ -5,6 +5,7 @@
 import { copyIcon } from '@jupyterlab/ui-components';
 import React, { useState, useCallback, useRef } from 'react';
 import { TooltippedIconButton } from '../mui-extras';
+import { useTranslator } from '../../context';
 var CopyStatus;
 (function (CopyStatus) {
     CopyStatus[CopyStatus["None"] = 0] = "None";
@@ -12,13 +13,8 @@ var CopyStatus;
     CopyStatus[CopyStatus["Copied"] = 2] = "Copied";
     CopyStatus[CopyStatus["Disabled"] = 3] = "Disabled";
 })(CopyStatus || (CopyStatus = {}));
-const COPYBTN_TEXT_BY_STATUS = {
-    [CopyStatus.None]: 'Copy to clipboard',
-    [CopyStatus.Copying]: 'Copying…',
-    [CopyStatus.Copied]: 'Copied!',
-    [CopyStatus.Disabled]: 'Copy to clipboard disabled in insecure context'
-};
 export function CopyButton(props) {
+    const trans = useTranslator();
     const isCopyDisabled = navigator.clipboard === undefined;
     const [copyStatus, setCopyStatus] = useState(isCopyDisabled ? CopyStatus.Disabled : CopyStatus.None);
     const timeoutId = useRef(null);
@@ -41,7 +37,13 @@ export function CopyButton(props) {
         }
         timeoutId.current = window.setTimeout(() => setCopyStatus(CopyStatus.None), 1000);
     }, [copyStatus, props.value]);
+    const COPYBTN_TEXT_BY_STATUS = {
+        [CopyStatus.None]: trans.__('Copy to clipboard'),
+        [CopyStatus.Copying]: trans.__('Copying…'),
+        [CopyStatus.Copied]: trans.__('Copied!'),
+        [CopyStatus.Disabled]: trans.__('Copy to clipboard disabled in insecure context')
+    };
     const tooltip = COPYBTN_TEXT_BY_STATUS[copyStatus];
-    return (React.createElement(TooltippedIconButton, { disabled: isCopyDisabled, className: props.className, tooltip: tooltip, placement: "top", onClick: copy, "aria-label": "Copy to clipboard", inputToolbar: false },
+    return (React.createElement(TooltippedIconButton, { disabled: isCopyDisabled, className: props.className, tooltip: tooltip, placement: "top", onClick: copy, "aria-label": trans.__('Copy to clipboard'), inputToolbar: false },
         React.createElement(copyIcon.react, { height: "16px", width: "16px" })));
 }

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

@@ -6,13 +6,15 @@ import { FileDialog } from '@jupyterlab/filebrowser';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import React from 'react';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
 /**
  * The attach button.
  */
 export function AttachButton(props) {
     const { model } = props;
-    const tooltip = 'Add attachment';
+    const trans = useTranslator();
+    const tooltip = trans.__('Add attachment');
     if (!model.documentManager || !model.addAttachment) {
         return React.createElement(React.Fragment, null);
     }
@@ -22,7 +24,7 @@ export function AttachButton(props) {
         }
         try {
             const files = await FileDialog.getOpenFiles({
-                title: 'Select files to attach',
+                title: trans.__('Select files to attach'),
                 manager: model.documentManager
             });
             if (files.value) {

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

@@ -5,15 +5,17 @@
 import CloseIcon from '@mui/icons-material/Close';
 import React from 'react';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 /**
  * The cancel button.
  */
 export function CancelButton(props) {
+    const trans = useTranslator();
     if (!props.model.cancel) {
         return React.createElement(React.Fragment, null);
     }
-    const tooltip = 'Cancel editing';
+    const tooltip = trans.__('Cancel editing');
     return (React.createElement(TooltippedIconButton, { onClick: props.model.cancel, tooltip: tooltip, buttonProps: {
             title: tooltip,
             className: CANCEL_BUTTON_CLASS

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

@@ -5,18 +5,20 @@
 import CheckIcon from '@mui/icons-material/Check';
 import React, { useEffect, useState } from 'react';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
 /**
  * The save edit button.
  */
 export function SaveEditButton(props) {
     const { model, chatCommandRegistry, edit } = props;
+    const trans = useTranslator();
     // Don't show this button when not in edit mode
     if (!edit) {
         return React.createElement(React.Fragment, null);
     }
     const [disabled, setDisabled] = useState(false);
-    const tooltip = 'Save edits';
+    const tooltip = trans.__('Save edits');
     useEffect(() => {
         var _a;
         const inputChanged = () => {

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

@@ -5,12 +5,14 @@
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import React, { useEffect, useState } from 'react';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
 /**
  * The send button.
  */
 export function SendButton(props) {
     const { model, chatCommandRegistry, edit } = props;
+    const trans = useTranslator();
     // Don't show this button when in edit mode
     if (edit) {
         return React.createElement(React.Fragment, null);
@@ -29,8 +31,8 @@ export function SendButton(props) {
         const configChanged = (_, config) => {
             var _a;
             setTooltip(((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false)
-                ? 'Send message (SHIFT+ENTER)'
-                : 'Send message (ENTER)');
+                ? trans.__('Send message (SHIFT+ENTER)')
+                : trans.__('Send message (ENTER)'));
         };
         model.configChanged.connect(configChanged);
         // Initialize the tooltip.

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

@@ -5,6 +5,7 @@
 import StopIcon from '@mui/icons-material/Stop';
 import React, { useEffect, useState } from 'react';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 const STOP_BUTTON_CLASS = 'jp-chat-stop-button';
 /**
  * The stop button.
@@ -12,7 +13,8 @@ const STOP_BUTTON_CLASS = 'jp-chat-stop-button';
 export function StopButton(props) {
     const { chatModel } = props;
     const [disabled, setDisabled] = useState(true);
-    const tooltip = 'Stop generating';
+    const trans = useTranslator();
+    const tooltip = trans.__('Stop generating');
     useEffect(() => {
         var _a;
         if (!chatModel) {

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

@@ -7,13 +7,14 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
-import { useChatContext } from '../../context';
+import { useChatContext, useTranslator } from '../../context';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 export function ChatInput(props) {
     var _a;
     const { model } = props;
+    const trans = useTranslator();
     const { area, chatCommandRegistry, inputToolbarRegistry } = useChatContext();
     const chatModel = useChatContext().model;
     const [input, setInput] = useState(model.value);
@@ -162,7 +163,7 @@ export function ChatInput(props) {
                             padding: 0
                         }
                     }
-                }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "standard", className: INPUT_TEXTFIELD_CLASS, multiline: true, maxRows: 10, onKeyDown: handleKeyDown, placeholder: "Type a chat message, @ to mention...", inputRef: inputRef, onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, sx: {
+                }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "standard", className: INPUT_TEXTFIELD_CLASS, multiline: true, maxRows: 10, onKeyDown: handleKeyDown, placeholder: trans.__('Type a chat message, @ to mention...'), inputRef: inputRef, onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, sx: {
                         padding: 1.5,
                         margin: 0,
                         boxSizing: 'border-box',

package/lib/components/messages/header.js

@@ -5,6 +5,7 @@
 import { Box, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { Avatar } from '../avatar';
+import { useTranslator } from '../../context';
 const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
 const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
 /**
@@ -12,6 +13,7 @@ const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
  */
 export function ChatMessageHeader(props) {
     var _a, _b;
+    const trans = useTranslator();
     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);
@@ -62,7 +64,7 @@ export function ChatMessageHeader(props) {
         };
     }, [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');
+    const name = (_b = (_a = sender.display_name) !== null && _a !== void 0 ? _a : sender.name) !== null && _b !== void 0 ? _b : (sender.username || trans.__('User undefined'));
     // 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',
@@ -89,10 +91,12 @@ export function ChatMessageHeader(props) {
                 (message.deleted || message.edited) && (React.createElement(Typography, { sx: {
                         fontStyle: 'italic',
                         fontSize: 'var(--jp-content-font-size0)'
-                    } }, message.deleted ? '(message deleted)' : '(edited)'))),
+                    } }, message.deleted
+                    ? trans.__('(message deleted)')
+                    : trans.__('(edited)')))),
             !onlyState && (React.createElement(Typography, { className: MESSAGE_TIME_CLASS, sx: {
                     fontSize: '0.8em',
                     color: 'var(--jp-ui-font-color2)',
                     fontWeight: 300
-                }, title: message.raw_time ? 'Unverified time' : '' }, `${datetime[message.time]}${message.raw_time ? '*' : ''}`)))));
+                }, title: message.raw_time ? trans.__('Unverified time') : '' }, `${datetime[message.time]}${message.raw_time ? '*' : ''}`)))));
 }

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

@@ -31,24 +31,10 @@ function MessageRendererBase(props) {
             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 {
+            if (message.mime_model) {
                 setCanEdit(false);
                 // This is a mime bundle.
-                let mimeContent = message.body;
+                let mimeContent = message.mime_model;
                 let preferred = rmRegistry.preferredMimeType(mimeContent.data, 'ensure' // Should be changed with 'prefer' if we can handle trusted content.
                 );
                 if (!preferred) {
@@ -64,7 +50,7 @@ function MessageRendererBase(props) {
                 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 => {
+                        (_a = message.mentions) === null || _a === void 0 ? void 0 : _a.forEach(user => {
                             mdStr = replaceMentionToSpan(mdStr, user);
                         });
                         mimeContent = {
@@ -81,6 +67,20 @@ function MessageRendererBase(props) {
                 }
                 mimeModel = rmRegistry.createModel(mimeContent);
             }
+            else {
+                // Allow editing content for text messages.
+                setCanEdit(true);
+                // Improve users display in markdown content.
+                let mdStr = message.body;
+                (_b = message.mentions) === null || _b === void 0 ? void 0 : _b.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 }
+                });
+            }
             await renderer.renderModel(mimeModel);
             // Manually trigger the onAfterAttach of the renderer, because the widget will
             // never been attached, only the node.
@@ -108,7 +108,7 @@ function MessageRendererBase(props) {
             props.rendered.resolve();
         };
         renderContent();
-    }, [message.body, message.mentions, rmRegistry]);
+    }, [message.body, message.mime_model, 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 }),

package/lib/components/messages/navigation.js

@@ -5,7 +5,7 @@
 import { Button } from '@jupyter/react-components';
 import { LabIcon, caretDownEmptyIcon, classes } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
-import { useChatContext } from '../../context';
+import { useChatContext, useTranslator } from '../../context';
 const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
 const NAVIGATION_UNREAD_CLASS = 'jp-chat-navigation-unread';
 const NAVIGATION_TOP_CLASS = 'jp-chat-navigation-top';
@@ -15,6 +15,7 @@ const NAVIGATION_BOTTOM_CLASS = 'jp-chat-navigation-bottom';
  */
 export function Navigation(props) {
     const { model } = useChatContext();
+    const trans = useTranslator();
     const [lastInViewport, setLastInViewport] = useState(true);
     const [unreadBefore, setUnreadBefore] = useState(null);
     const [unreadAfter, setUnreadAfter] = useState(null);
@@ -88,12 +89,12 @@ export function Navigation(props) {
         };
     }, [model]);
     return (React.createElement(React.Fragment, null,
-        unreadBefore !== null && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${NAVIGATION_UNREAD_CLASS} ${NAVIGATION_TOP_CLASS}`, onClick: () => gotoMessage(unreadBefore), title: 'Go to unread messages' },
+        unreadBefore !== null && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${NAVIGATION_UNREAD_CLASS} ${NAVIGATION_TOP_CLASS}`, onClick: () => gotoMessage(unreadBefore), title: trans.__('Go to unread messages') },
             React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') }))),
         (unreadAfter !== null || !lastInViewport) && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${unreadAfter !== null ? NAVIGATION_UNREAD_CLASS : ''} ${NAVIGATION_BOTTOM_CLASS}`, onClick: unreadAfter === null
                 ? () => gotoMessage(model.messages.length - 1, false)
                 : () => gotoMessage(unreadAfter), title: unreadAfter !== null
-                ? 'Go to unread messages'
-                : 'Go to last message' },
+                ? trans.__('Go to unread messages')
+                : trans.__('Go to last message') },
             React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') })))));
 }

package/lib/components/messages/toolbar.js

@@ -7,19 +7,21 @@ import EditIcon from '@mui/icons-material/Edit';
 import { Box } from '@mui/material';
 import React from 'react';
 import { TooltippedIconButton } from '../mui-extras';
+import { useTranslator } from '../../context';
 const TOOLBAR_CLASS = 'jp-chat-toolbar';
 /**
  * The toolbar attached to a message.
  */
 export function MessageToolbar(props) {
+    const trans = useTranslator();
     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: trans.__('Edit'), onClick: props.edit, "aria-label": trans.__('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 },
+        const deleteButton = (React.createElement(TooltippedIconButton, { tooltip: trans.__('Delete'), onClick: props.delete, "aria-label": trans.__('Delete'), inputToolbar: false },
             React.createElement(DeleteIcon, null)));
         buttons.push(deleteButton);
     }

package/lib/components/writing-indicator.js

@@ -4,6 +4,7 @@
  */
 import { Box, Typography } from '@mui/material';
 import React from 'react';
+import { useTranslator } from '../context';
 /**
  * Classname on the root element. Used in E2E tests.
  */
@@ -12,21 +13,24 @@ const WRITERS_ELEMENT_CLASSNAME = 'jp-chat-writers';
  * Format the writers list into a readable string.
  * Examples: "Alice is typing...", "Alice and Bob are typing...", "Alice, Bob, and Carol are typing..."
  */
-function formatWritersText(writers) {
+function formatWritersText(writers, trans) {
     if (writers.length === 0) {
         return '';
     }
-    const names = writers.map(w => { var _a, _b, _c; return (_c = (_b = (_a = w.user.display_name) !== null && _a !== void 0 ? _a : w.user.name) !== null && _b !== void 0 ? _b : w.user.username) !== null && _c !== void 0 ? _c : 'Unknown'; });
+    const names = writers.map(w => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = w.user.display_name) !== null && _a !== void 0 ? _a : w.user.name) !== null && _b !== void 0 ? _b : w.user.username) !== null && _c !== void 0 ? _c : trans.__('Unknown');
+    });
     if (names.length === 1) {
-        return `${names[0]} is typing...`;
+        return trans.__('%1 is typing...', names[0]);
     }
     else if (names.length === 2) {
-        return `${names[0]} and ${names[1]} are typing...`;
+        return trans.__('%1 and %2 are typing...', names[0], names[1]);
     }
     else {
         const allButLast = names.slice(0, -1).join(', ');
         const last = names[names.length - 1];
-        return `${allButLast}, and ${last} are typing...`;
+        return trans.__('%1, and %2 are typing...', allButLast, last);
     }
 }
 /**
@@ -34,8 +38,9 @@ function formatWritersText(writers) {
  */
 export function WritingIndicator(props) {
     const { writers } = props;
+    const trans = useTranslator();
     // Always render the container to reserve space, even if no writers
-    const writersText = writers.length > 0 ? formatWritersText(writers) : '';
+    const writersText = writers.length > 0 ? formatWritersText(writers, trans) : '';
     return (React.createElement(Box, { className: WRITERS_ELEMENT_CLASSNAME, sx: {
             ...props.sx,
             minHeight: '16px'

package/lib/context.d.ts

@@ -1,4 +1,11 @@
 /// <reference types="react" />
+import { TranslationBundle } from '@jupyterlab/translation';
 import { Chat } from './components';
+export declare const TRANSLATION_DOMAIN = "jupyter-chat";
 export declare const ChatReactContext: import("react").Context<Chat.IChatProps | undefined>;
 export declare function useChatContext(): Chat.IChatProps;
+/**
+ * Hook to get the translation bundle for the chat.
+ * Must be used within a ChatReactContext.Provider.
+ */
+export declare function useTranslator(): TranslationBundle;

package/lib/context.js

@@ -2,7 +2,9 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { nullTranslator } from '@jupyterlab/translation';
 import { createContext, useContext } from 'react';
+export const TRANSLATION_DOMAIN = 'jupyter-chat';
 export const ChatReactContext = createContext(undefined);
 export function useChatContext() {
     const context = useContext(ChatReactContext);
@@ -11,3 +13,13 @@ export function useChatContext() {
     }
     return context;
 }
+/**
+ * Hook to get the translation bundle for the chat.
+ * Must be used within a ChatReactContext.Provider.
+ */
+export function useTranslator() {
+    var _a;
+    const context = useContext(ChatReactContext);
+    const translator = (_a = context === null || context === void 0 ? void 0 : context.translator) !== null && _a !== void 0 ? _a : nullTranslator;
+    return translator.load(TRANSLATION_DOMAIN);
+}

package/lib/message.d.ts

@@ -18,7 +18,7 @@ export declare class Message implements IMessage {
      * Getters for each attribute individually.
      */
     get type(): string;
-    get body(): string | IMimeModelBody;
+    get body(): string;
     get id(): string;
     get time(): number;
     get sender(): IUser;
@@ -29,6 +29,7 @@ export declare class Message implements IMessage {
     get edited(): boolean | undefined;
     get stacked(): boolean | undefined;
     get metadata(): IMessageMetadata | undefined;
+    get mime_model(): IMimeModelBody | undefined;
     /**
      * A signal emitting when the message has been updated.
      */

package/lib/message.js

@@ -61,6 +61,9 @@ export class Message {
     get metadata() {
         return this._content.metadata;
     }
+    get mime_model() {
+        return this._content.mime_model;
+    }
     /**
      * A signal emitting when the message has been updated.
      */