@jupyter/chat 0.20.0 → 0.21.0

package/src/components/attachments.tsx

@@ -10,7 +10,7 @@ import { PathExt } from '@jupyterlab/coreutils';
 import { UUID } from '@lumino/coreutils';
 
 import { TooltippedIconButton } from './mui-extras';
-import { useChatContext } from '../context';
+import { useChatContext, useTranslator } from '../context';
 import { IAttachment } from '../types';
 
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
@@ -87,7 +87,7 @@ export type AttachmentProps = AttachmentsProps & {
  * The Attachment component.
  */
 export function AttachmentPreview(props: AttachmentProps): JSX.Element {
-  const remove_tooltip = 'Remove attachment';
+  const trans = useTranslator();
   const { attachmentOpenerRegistry } = useChatContext();
   const isClickable = !!attachmentOpenerRegistry?.get(props.attachment.type);
 
@@ -133,7 +133,7 @@ export function AttachmentPreview(props: AttachmentProps): JSX.Element {
       </Tooltip>
       {props.onRemove && (
         <TooltippedIconButton
-          tooltip={remove_tooltip}
+          tooltip={trans.__('Remove attachment')}
           onClick={() => props.onRemove!(props.attachment)}
           className={REMOVE_BUTTON_CLASS}
           inputToolbar={false}

package/src/components/chat.tsx

@@ -5,6 +5,7 @@
 
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ITranslator } from '@jupyterlab/translation';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
@@ -181,6 +182,10 @@ export namespace Chat {
      * The area where the chat is displayed.
      */
     area?: ChatArea;
+    /**
+     * The translator for internationalization.
+     */
+    translator?: ITranslator;
   }
 
   /**

package/src/components/code-blocks/code-toolbar.tsx

@@ -9,6 +9,7 @@ import React, { useEffect, useState } from 'react';
 
 import { CopyButton } from './copy-button';
 import { TooltippedIconButton } from '../mui-extras';
+import { useTranslator } from '../../context';
 import { IActiveCellManager } from '../../active-cell-manager';
 import { replaceCellIcon } from '../../icons';
 import { IChatModel } from '../../model';
@@ -110,9 +111,10 @@ type ToolbarButtonProps = {
 };
 
 function InsertAboveButton(props: ToolbarButtonProps) {
+  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 (
     <TooltippedIconButton
@@ -128,9 +130,10 @@ function InsertAboveButton(props: ToolbarButtonProps) {
 }
 
 function InsertBelowButton(props: ToolbarButtonProps) {
+  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 (
     <TooltippedIconButton
@@ -146,11 +149,15 @@ function InsertBelowButton(props: ToolbarButtonProps) {
 }
 
 function ReplaceButton(props: ToolbarButtonProps) {
+  const trans = useTranslator();
   const tooltip = props.selectionExists
-    ? `Replace selection (${props.selectionWatcher?.selection?.numLines} line(s))`
+    ? trans.__(
+        'Replace selection (%1 line(s))',
+        props.selectionWatcher?.selection?.numLines ?? 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;
 

package/src/components/code-blocks/copy-button.tsx

@@ -7,6 +7,7 @@ import { copyIcon } from '@jupyterlab/ui-components';
 import React, { useState, useCallback, useRef } from 'react';
 
 import { TooltippedIconButton } from '../mui-extras';
+import { useTranslator } from '../../context';
 
 enum CopyStatus {
   None,
@@ -15,19 +16,13 @@ enum CopyStatus {
   Disabled
 }
 
-const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = {
-  [CopyStatus.None]: 'Copy to clipboard',
-  [CopyStatus.Copying]: 'Copying…',
-  [CopyStatus.Copied]: 'Copied!',
-  [CopyStatus.Disabled]: 'Copy to clipboard disabled in insecure context'
-};
-
 type CopyButtonProps = {
   value: string;
   className?: string;
 };
 
 export function CopyButton(props: CopyButtonProps): JSX.Element {
+  const trans = useTranslator();
   const isCopyDisabled = navigator.clipboard === undefined;
   const [copyStatus, setCopyStatus] = useState<CopyStatus>(
     isCopyDisabled ? CopyStatus.Disabled : CopyStatus.None
@@ -58,6 +53,15 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
     );
   }, [copyStatus, props.value]);
 
+  const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = {
+    [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 (
@@ -67,7 +71,7 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
       tooltip={tooltip}
       placement="top"
       onClick={copy}
-      aria-label="Copy to clipboard"
+      aria-label={trans.__('Copy to clipboard')}
       inputToolbar={false}
     >
       <copyIcon.react height="16px" width="16px" />

package/src/components/input/buttons/attach-button.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 
 const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
 
@@ -19,7 +20,8 @@ export function AttachButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
   const { model } = props;
-  const tooltip = 'Add attachment';
+  const trans = useTranslator();
+  const tooltip = trans.__('Add attachment');
 
   if (!model.documentManager || !model.addAttachment) {
     return <></>;
@@ -31,7 +33,7 @@ export function AttachButton(
     }
     try {
       const files = await FileDialog.getOpenFiles({
-        title: 'Select files to attach',
+        title: trans.__('Select files to attach'),
         manager: model.documentManager
       });
       if (files.value) {

package/src/components/input/buttons/cancel-button.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 
@@ -17,10 +18,12 @@ const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 export function CancelButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
+  const trans = useTranslator();
+
   if (!props.model.cancel) {
     return <></>;
   }
-  const tooltip = 'Cancel editing';
+  const tooltip = trans.__('Cancel editing');
   return (
     <TooltippedIconButton
       onClick={props.model.cancel}

package/src/components/input/buttons/save-edit-button.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 
 const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
 
@@ -18,6 +19,7 @@ export function SaveEditButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
   const { model, chatCommandRegistry, edit } = props;
+  const trans = useTranslator();
 
   // Don't show this button when not in edit mode
   if (!edit) {
@@ -25,7 +27,7 @@ export function SaveEditButton(
   }
 
   const [disabled, setDisabled] = useState(false);
-  const tooltip = 'Save edits';
+  const tooltip = trans.__('Save edits');
 
   useEffect(() => {
     const inputChanged = () => {

package/src/components/input/buttons/send-button.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 import { IInputModel, InputModel } from '../../../input-model';
 
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
@@ -19,6 +20,7 @@ export function SendButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
   const { model, chatCommandRegistry, edit } = props;
+  const trans = useTranslator();
 
   // Don't show this button when in edit mode
   if (edit) {
@@ -42,8 +44,8 @@ export function SendButton(
     const configChanged = (_: IInputModel, config: InputModel.IConfig) => {
       setTooltip(
         (config.sendWithShiftEnter ?? false)
-          ? 'Send message (SHIFT+ENTER)'
-          : 'Send message (ENTER)'
+          ? trans.__('Send message (SHIFT+ENTER)')
+          : trans.__('Send message (ENTER)')
       );
     };
     model.configChanged.connect(configChanged);

package/src/components/input/buttons/stop-button.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 
 const STOP_BUTTON_CLASS = 'jp-chat-stop-button';
 
@@ -19,7 +20,8 @@ export function StopButton(
 ): JSX.Element {
   const { chatModel } = props;
   const [disabled, setDisabled] = useState(true);
-  const tooltip = 'Stop generating';
+  const trans = useTranslator();
+  const tooltip = trans.__('Stop generating');
 
   useEffect(() => {
     if (!chatModel) {

package/src/components/input/chat-input.tsx

@@ -17,7 +17,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { InputToolbarRegistry } from './toolbar-registry';
 import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
-import { useChatContext } from '../../context';
+import { useChatContext, useTranslator } from '../../context';
 import { IInputModel, InputModel } from '../../input-model';
 import { IAttachment } from '../../types';
 
@@ -27,6 +27,7 @@ const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const { model } = props;
+  const trans = useTranslator();
   const { area, chatCommandRegistry, inputToolbarRegistry } = useChatContext();
   const chatModel = useChatContext().model;
 
@@ -230,7 +231,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
               multiline
               maxRows={10}
               onKeyDown={handleKeyDown}
-              placeholder="Type a chat message, @ to mention..."
+              placeholder={trans.__('Type a chat message, @ to mention...')}
               inputRef={inputRef}
               onSelect={() =>
                 (model.cursorIndex = inputRef.current?.selectionStart ?? null)

package/src/components/messages/header.tsx

@@ -7,6 +7,7 @@ import { Box, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import { Avatar } from '../avatar';
+import { useTranslator } from '../../context';
 import { IMessageContent, IMessage } from '../../types';
 
 const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
@@ -30,6 +31,7 @@ type ChatMessageHeaderProps = {
  * The message header component.
  */
 export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
+  const trans = useTranslator();
   const [message, setMessage] = useState<IMessageContent>(
     props.message.content
   );
@@ -90,7 +92,9 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
   const avatar = message.stacked ? null : Avatar({ user: sender });
 
   const name =
-    sender.display_name ?? sender.name ?? (sender.username || 'User undefined');
+    sender.display_name ??
+    sender.name ??
+    (sender.username || trans.__('User undefined'));
 
   // Don't render header for stacked messages not deleted or edited.
   return message.stacked && !message.deleted && !message.edited ? (
@@ -136,7 +140,9 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
                 fontSize: 'var(--jp-content-font-size0)'
               }}
             >
-              {message.deleted ? '(message deleted)' : '(edited)'}
+              {message.deleted
+                ? trans.__('(message deleted)')
+                : trans.__('(edited)')}
             </Typography>
           )}
         </Box>
@@ -148,7 +154,7 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
               color: 'var(--jp-ui-font-color2)',
               fontWeight: 300
             }}
-            title={message.raw_time ? 'Unverified time' : ''}
+            title={message.raw_time ? trans.__('Unverified time') : ''}
           >
             {`${datetime[message.time]}${message.raw_time ? '*' : ''}`}
           </Typography>

package/src/components/messages/message-renderer.tsx

@@ -68,25 +68,10 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
       let mimeModel: IRenderMime.IMimeModel;
 
       // 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;
-        message.mentions?.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.
@@ -121,6 +106,21 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
         }
 
         mimeModel = rmRegistry.createModel(mimeContent);
+      } else {
+        // Allow editing content for text messages.
+        setCanEdit(true);
+
+        // Improve users display in markdown content.
+        let mdStr = message.body;
+        message.mentions?.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);
 

package/src/components/messages/navigation.tsx

@@ -11,7 +11,7 @@ import {
 } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
 
-import { useChatContext } from '../../context';
+import { useChatContext, useTranslator } from '../../context';
 import { IChatModel } from '../../model';
 
 const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
@@ -38,6 +38,7 @@ type NavigationProps = {
  */
 export function Navigation(props: NavigationProps): JSX.Element {
   const { model } = useChatContext();
+  const trans = useTranslator();
   const [lastInViewport, setLastInViewport] = useState<boolean>(true);
   const [unreadBefore, setUnreadBefore] = useState<number | null>(null);
   const [unreadAfter, setUnreadAfter] = useState<number | null>(null);
@@ -132,7 +133,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
         <Button
           className={`${NAVIGATION_BUTTON_CLASS} ${NAVIGATION_UNREAD_CLASS} ${NAVIGATION_TOP_CLASS}`}
           onClick={() => gotoMessage!(unreadBefore)}
-          title={'Go to unread messages'}
+          title={trans.__('Go to unread messages')}
         >
           <LabIcon.resolveReact
             display={'flex'}
@@ -151,8 +152,8 @@ export function Navigation(props: NavigationProps): JSX.Element {
           }
           title={
             unreadAfter !== null
-              ? 'Go to unread messages'
-              : 'Go to last message'
+              ? trans.__('Go to unread messages')
+              : trans.__('Go to last message')
           }
         >
           <LabIcon.resolveReact

package/src/components/messages/toolbar.tsx

@@ -9,6 +9,7 @@ import { Box } from '@mui/material';
 import React from 'react';
 
 import { TooltippedIconButton } from '../mui-extras';
+import { useTranslator } from '../../context';
 
 const TOOLBAR_CLASS = 'jp-chat-toolbar';
 
@@ -16,14 +17,15 @@ const TOOLBAR_CLASS = 'jp-chat-toolbar';
  * The toolbar attached to a message.
  */
 export function MessageToolbar(props: MessageToolbar.IProps): JSX.Element {
+  const trans = useTranslator();
   const buttons: JSX.Element[] = [];
 
   if (props.edit !== undefined) {
     const editButton = (
       <TooltippedIconButton
-        tooltip={'Edit'}
+        tooltip={trans.__('Edit')}
         onClick={props.edit}
-        aria-label={'Edit'}
+        aria-label={trans.__('Edit')}
         inputToolbar={false}
       >
         <EditIcon />
@@ -34,9 +36,9 @@ export function MessageToolbar(props: MessageToolbar.IProps): JSX.Element {
   if (props.delete !== undefined) {
     const deleteButton = (
       <TooltippedIconButton
-        tooltip={'Delete'}
+        tooltip={trans.__('Delete')}
         onClick={props.delete}
-        aria-label={'Delete'}
+        aria-label={trans.__('Delete')}
         inputToolbar={false}
       >
         <DeleteIcon />

package/src/components/writing-indicator.tsx

@@ -3,9 +3,11 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { TranslationBundle } from '@jupyterlab/translation';
 import { Box, SxProps, Theme, Typography } from '@mui/material';
 import React from 'react';
 
+import { useTranslator } from '../context';
 import { IChatModel } from '../model';
 
 /**
@@ -31,23 +33,30 @@ export interface IInputWritingIndicatorProps {
  * 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: IChatModel.IWriter[]): string {
+function formatWritersText(
+  writers: IChatModel.IWriter[],
+  trans: TranslationBundle
+): string {
   if (writers.length === 0) {
     return '';
   }
 
   const names = writers.map(
-    w => w.user.display_name ?? w.user.name ?? w.user.username ?? 'Unknown'
+    w =>
+      w.user.display_name ??
+      w.user.name ??
+      w.user.username ??
+      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);
   }
 }
 
@@ -58,9 +67,11 @@ export function WritingIndicator(
   props: IInputWritingIndicatorProps
 ): JSX.Element {
   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 (
     <Box

package/src/context.ts

@@ -3,10 +3,13 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { nullTranslator, TranslationBundle } from '@jupyterlab/translation';
 import { createContext, useContext } from 'react';
 
 import { Chat } from './components';
 
+export const TRANSLATION_DOMAIN = 'jupyter-chat';
+
 export const ChatReactContext = createContext<Chat.IChatProps | undefined>(
   undefined
 );
@@ -18,3 +21,13 @@ export function useChatContext(): Chat.IChatProps {
   }
   return context;
 }
+
+/**
+ * Hook to get the translation bundle for the chat.
+ * Must be used within a ChatReactContext.Provider.
+ */
+export function useTranslator(): TranslationBundle {
+  const context = useContext(ChatReactContext);
+  const translator = context?.translator ?? nullTranslator;
+  return translator.load(TRANSLATION_DOMAIN);
+}

package/src/message.ts

@@ -39,7 +39,7 @@ export class Message implements IMessage {
   get type(): string {
     return this._content.type;
   }
-  get body(): string | IMimeModelBody {
+  get body(): string {
     return this._content.body;
   }
   get id(): string {
@@ -72,6 +72,9 @@ export class Message implements IMessage {
   get metadata(): IMessageMetadata | undefined {
     return this._content.metadata;
   }
+  get mime_model(): IMimeModelBody | undefined {
+    return this._content.mime_model;
+  }
 
   /**
    * A signal emitting when the message has been updated.