@jupyter/chat 0.20.0-alpha.3 → 0.21.0

package/src/message.ts

@@ -3,14 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { IRenderMime } from '@jupyterlab/rendermime';
 import { ISignal, Signal } from '@lumino/signaling';
 import {
   IAttachment,
   IMessageContent,
   IMessage,
   IMessageMetadata,
-  IUser
+  IUser,
+  IMimeModelBody
 } from './types';
 
 /**
@@ -39,9 +39,7 @@ export class Message implements IMessage {
   get type(): string {
     return this._content.type;
   }
-  get body():
-    | string
-    | (Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>) {
+  get body(): string {
     return this._content.body;
   }
   get id(): string {
@@ -74,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.

package/src/model.ts

@@ -4,6 +4,11 @@
  */
 
 import { IDocumentManager } from '@jupyterlab/docmanager';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
 import { ArrayExt } from '@lumino/algorithm';
 import { CommandRegistry } from '@lumino/commands';
 import { PromiseDelegate } from '@lumino/coreutils';
@@ -11,6 +16,7 @@ import { IDisposable } from '@lumino/disposable';
 import { ISignal, Signal } from '@lumino/signaling';
 
 import { IActiveCellManager } from './active-cell-manager';
+import { TRANSLATION_DOMAIN } from './context';
 import { IInputModel, InputModel } from './input-model';
 import { Message } from './message';
 import { ISelectionWatcher } from './selection-watcher';
@@ -112,6 +118,11 @@ export interface IChatModel extends IDisposable {
    */
   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.
    */
@@ -237,6 +248,10 @@ export abstract class AbstractChatModel implements IChatModel {
       ...config
     };
 
+    this._trans = (options.translator ?? nullTranslator).load(
+      TRANSLATION_DOMAIN
+    );
+
     this._inputModel = new InputModel({
       activeCellManager: options.activeCellManager,
       selectionWatcher: options.selectionWatcher,
@@ -493,6 +508,13 @@ export abstract class AbstractChatModel implements IChatModel {
     return this._writersChanged;
   }
 
+  /**
+   * A signal emitting when a message has been updated.
+   */
+  get messageChanged(): ISignal<IChatModel, IMessage> {
+    return this._messageChanged;
+  }
+
   /**
    * A signal emitting when the message edition input changed change.
    */
@@ -528,6 +550,7 @@ export abstract class AbstractChatModel implements IChatModel {
     }
     this._isDisposed = true;
     this._disposed.emit();
+    Signal.clearData(this);
   }
 
   /**
@@ -580,7 +603,9 @@ export abstract class AbstractChatModel implements IChatModel {
     // 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);
       }
@@ -613,7 +638,9 @@ export abstract class AbstractChatModel implements IChatModel {
    * @param count - the number of messages to delete.
    */
   messagesDeleted(index: number, count: number): void {
-    this._messages.splice(index, count);
+    this._messages.splice(index, count).forEach(msg => {
+      msg.changed.disconnect(this._onMessageChanged, this);
+    });
     this._messagesUpdated.emit();
   }
 
@@ -695,14 +722,24 @@ export abstract class AbstractChatModel implements IChatModel {
         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;
               });
@@ -718,6 +755,10 @@ export abstract class AbstractChatModel implements IChatModel {
     }
   }
 
+  private _onMessageChanged(msg: IMessage): void {
+    this._messageChanged.emit(msg);
+  }
+
   private _messages: IMessage[] = [];
   private _unreadMessages: number[] = [];
   private _lastRead: number = 0;
@@ -725,6 +766,7 @@ export abstract class AbstractChatModel implements IChatModel {
   private _id: string | undefined;
   private _name: string = '';
   private _config: IConfig;
+  protected _trans: TranslationBundle;
   private _readyDelegate = new PromiseDelegate<void>();
   private _inputModel: IInputModel;
   private _disposed = new Signal<this, void>(this);
@@ -737,6 +779,7 @@ export abstract class AbstractChatModel implements IChatModel {
   private _writers: IChatModel.IWriter[] = [];
   private _messageEditions = new Map<string, IInputModel>();
   private _messagesUpdated = new Signal<IChatModel, void>(this);
+  private _messageChanged = new Signal<IChatModel, IMessage>(this);
   private _configChanged = new Signal<IChatModel, IConfig>(this);
   private _unreadChanged = new Signal<IChatModel, number[]>(this);
   private _viewportChanged = new Signal<IChatModel, number[]>(this);
@@ -770,6 +813,11 @@ export namespace IChatModel {
      */
     commands?: CommandRegistry;
 
+    /**
+     * The translator for internationalization.
+     */
+    translator?: ITranslator;
+
     /**
      * Active cell manager.
      */

package/src/theme-provider.ts

@@ -184,10 +184,6 @@ export async function getJupyterLabTheme(): Promise<Theme> {
       }
     },
     palette: {
-      background: {
-        paper: getCSSVariable('--jp-layout-color1'),
-        default: getCSSVariable('--jp-layout-color1')
-      },
       mode: light ? 'light' : 'dark',
       primary: {
         main: getCSSVariable(`--jp-brand-color${light ? '1' : '2'}`),

package/src/tokens.ts

@@ -7,13 +7,19 @@ import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
 import { Token } from '@lumino/coreutils';
 
 import { ChatWidget } from './widgets';
+import { IChatModel } from './model';
+
+/**
+ * The main area chat widget type.
+ */
+export type MainAreaChat = MainAreaWidget<ChatWidget> & {
+  model: IChatModel;
+};
 
 /**
  * the chat tracker type.
  */
-export type IChatTracker = IWidgetTracker<
-  ChatWidget | MainAreaWidget<ChatWidget>
->;
+export type IChatTracker = IWidgetTracker<ChatWidget | MainAreaChat>;
 
 /**
  * A chat tracker token.

package/src/types.ts

@@ -61,6 +61,12 @@ export interface IConfig {
   showDeleted?: boolean;
 }
 
+/**
+ * Mime model body type, a partial mime bundle model containing at least the data.
+ */
+export type IMimeModelBody = Partial<IRenderMime.IMimeModel> &
+  Pick<IRenderMime.IMimeModel, 'data'>;
+
 /**
  * An empty interface to describe optional metadata attached to a chat message.
  * Extensions can augment this interface to add custom fields:
@@ -79,21 +85,59 @@ export interface IMessageMetadata {} /* eslint-disable-line @typescript-eslint/n
  * 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
-    // Should contain at least the data of the mime model.
-    | (Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>);
+  /**
+   * 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 {
@@ -187,6 +231,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/src/widgets/chat-error.tsx

@@ -4,15 +4,19 @@
  */
 
 import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
+import { ITranslator, 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: IThemeManager | null
+  themeManager: IThemeManager | null,
+  translator?: ITranslator
 ): ReactWidget {
+  const trans = (translator ?? nullTranslator).load(TRANSLATION_DOMAIN);
   const ErrorWidget = ReactWidget.create(
     <JlThemeProvider themeManager={themeManager}>
       <Box
@@ -27,9 +31,9 @@ export function buildErrorWidget(
       >
         <Box sx={{ padding: 4 }}>
           <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.
+            {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.'
+            )}
           </Alert>
         </Box>
       </Box>
@@ -37,7 +41,7 @@ export function buildErrorWidget(
   );
   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/src/widgets/chat-selector-popup.tsx

@@ -4,10 +4,17 @@
  */
 
 import { Button } from '@jupyter/react-components';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
 import { closeIcon, ReactWidget } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';
 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';
@@ -26,6 +33,9 @@ export class ChatSelectorPopup extends ReactWidget {
     this._onSelect = options.onSelect;
     this._onClose = options.onClose;
     this._anchor = options.anchor ?? null;
+    this._trans = (options.translator ?? nullTranslator).load(
+      TRANSLATION_DOMAIN
+    );
 
     // Start hidden
     this.hide();
@@ -181,6 +191,7 @@ export class ChatSelectorPopup extends ReactWidget {
         onSelect={this._handleItemClick}
         onUpdateSelectedName={this._handleUpdateSelectedName}
         onClose={this._handleClose}
+        trans={this._trans}
       />
     );
   }
@@ -319,6 +330,7 @@ export class ChatSelectorPopup extends ReactWidget {
   private _onClose?: (name: string) => void;
   private _anchor: HTMLElement | null = null;
   private _anchorRect: DOMRect | null = null;
+  private _trans: TranslationBundle;
 }
 
 /**
@@ -342,6 +354,10 @@ export namespace ChatSelectorPopup {
      * The element to anchor the popup to.
      */
     anchor?: HTMLElement;
+    /**
+     * The translator for internationalization.
+     */
+    translator?: ITranslator;
   }
 }
 
@@ -355,6 +371,7 @@ interface IChatSelectorListProps {
   onSelect: (name: string) => void;
   onUpdateSelectedName: (name: string) => void;
   onClose: (names: string) => void;
+  trans: TranslationBundle;
 }
 
 /**
@@ -366,7 +383,8 @@ function ChatSelectorList({
   loadedModels,
   onSelect,
   onUpdateSelectedName,
-  onClose
+  onClose,
+  trans
 }: IChatSelectorListProps): JSX.Element {
   const listRef = useRef<HTMLUListElement>(null);
 
@@ -388,7 +406,7 @@ function ChatSelectorList({
   };
 
   if (names.length === 0) {
-    return <div className={POPUP_EMPTY_CLASS}>No chats found</div>;
+    return <div className={POPUP_EMPTY_CLASS}>{trans.__('No chat found')}</div>;
   }
 
   return (
@@ -425,7 +443,7 @@ function ChatSelectorList({
                 <Button
                   onClick={e => handleCloseClick(e, name)}
                   appearance="stealth"
-                  title="Close and dispose this chat"
+                  title={trans.__('Close and dispose this chat')}
                   className="jp-chat-selector-popup-item-close"
                 >
                   <closeIcon.react tag={null} />

package/src/widgets/chat-sidebar.tsx

@@ -3,14 +3,18 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { nullTranslator } from '@jupyterlab/translation';
+
 import { Chat } from '../components/chat';
+import { TRANSLATION_DOMAIN } from '../context';
 import { chatIcon } from '../icons';
 import { ChatWidget } from './chat-widget';
 
 export function buildChatSidebar(options: Chat.IOptions): ChatWidget {
   const widget = new ChatWidget(options);
+  const trans = (options.translator ?? 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/src/widgets/chat-widget.tsx

@@ -8,12 +8,14 @@ import { Cell } from '@jupyterlab/cells';
 import { DirListing } from '@jupyterlab/filebrowser';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { ICell, isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
+import { nullTranslator } from '@jupyterlab/translation';
 import React from 'react';
 import { Message } from '@lumino/messaging';
 import { Drag } from '@lumino/dragdrop';
 import { Widget } from '@lumino/widgets';
 
 import { Chat, IInputToolbarRegistry, MESSAGE_CLASS } from '../components';
+import { TRANSLATION_DOMAIN } from '../context';
 import { chatIcon } from '../icons';
 import { IChatModel } from '../model';
 import {
@@ -42,8 +44,11 @@ export class ChatWidget extends ReactWidget {
   constructor(options: Chat.IOptions) {
     super();
 
+    const trans = (options.translator ?? 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}`;
@@ -334,6 +339,7 @@ export class ChatWidget extends ReactWidget {
         const attachment: INotebookAttachment = {
           type: 'notebook',
           value: notebookPath,
+          mimetype: 'application/x-ipynb+json',
           cells: validCells
         };
         const inputModel = this._getInputFromEvent(event);

package/src/widgets/multichat-panel.tsx

@@ -9,6 +9,7 @@
  */
 
 import { InputDialog } from '@jupyterlab/apputils';
+import { nullTranslator, TranslationBundle } from '@jupyterlab/translation';
 import {
   addIcon,
   closeIcon,
@@ -32,6 +33,7 @@ import {
   IInputToolbarRegistry,
   IInputToolbarRegistryFactory
 } from '../components';
+import { TRANSLATION_DOMAIN } from '../context';
 import { chatIcon, readIcon } from '../icons';
 import { IChatModel } from '../model';
 
@@ -52,7 +54,11 @@ export class MultiChatPanel extends PanelWithToolbar {
     super(options);
     this.id = 'jupyter-chat::multi-chat-panel';
     this.title.icon = chatIcon;
-    this.title.caption = 'Jupyter Chat'; // TODO: i18n/
+
+    const translator = options.translator ?? nullTranslator;
+    this._trans = translator.load(TRANSLATION_DOMAIN);
+
+    this.title.caption = this._trans.__('Jupyter Chat');
 
     this.addClass(SIDEPANEL_CLASS);
 
@@ -72,7 +78,7 @@ 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);
@@ -85,6 +91,7 @@ export class MultiChatPanel extends PanelWithToolbar {
           selectChat={this._onSelectChat}
           getPopup={() => this._chatSelectorPopup}
           chatOpened={this._chatOpened}
+          trans={this._trans}
         />
       );
       this._openChatWidget.addClass(OPEN_SELECT_CLASS);
@@ -96,7 +103,8 @@ export class MultiChatPanel extends PanelWithToolbar {
         onSelect: this._onSelectChat,
         onClose: (name: string) => {
           this.disposeLoadedModel(name);
-        }
+        },
+        translator
       });
     }
 
@@ -234,7 +242,8 @@ export class MultiChatPanel extends PanelWithToolbar {
       renameChat: this._renameChat,
       onClose: (name: string) => {
         this.disposeLoadedModel(name);
-      }
+      },
+      trans: this._trans
     });
 
     // Add to content panel
@@ -389,6 +398,7 @@ export class MultiChatPanel extends PanelWithToolbar {
   private _currentWidget?: SidePanelWidget;
   private _chatNames: { [name: string]: string } = {};
   private _visibilityChanged = new Signal<MultiChatPanel, boolean>(this);
+  private _trans: TranslationBundle;
 }
 
 /**
@@ -457,6 +467,7 @@ class SidePanelWidget extends PanelWithToolbar {
     super();
     this._chatWidget = options.widget;
     this._displayName = options.displayName ?? options.widget.model.name;
+    const trans = options.trans;
 
     this.addClass(SIDEPANEL_WIDGET_CLASS);
     this.toolbar.addClass(TOOLBAR_CLASS);
@@ -477,7 +488,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) {
@@ -490,7 +501,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) {
@@ -500,9 +511,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;
@@ -526,7 +537,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 () => {
           const name = this.model.name;
@@ -540,7 +551,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);
@@ -668,6 +679,10 @@ namespace SidePanelWidget {
      * The callback to rename the chat.
      */
     renameChat?: boolean | ((oldName: string) => Promise<string | null>);
+    /**
+     * The translation bundle.
+     */
+    trans: TranslationBundle;
   }
 }
 
@@ -684,6 +699,10 @@ type ChatSearchInputProps = {
    * Signal emitting when a chat is opened.
    */
   chatOpened: ISignal<MultiChatPanel, ChatWidget>;
+  /**
+   * The translation bundle.
+   */
+  trans: TranslationBundle;
 };
 
 /**
@@ -692,7 +711,8 @@ type ChatSearchInputProps = {
 function ChatSearchInput({
   selectChat,
   getPopup,
-  chatOpened
+  chatOpened,
+  trans
 }: ChatSearchInputProps): JSX.Element {
   const [query, setQuery] = useState<string>('');
   const inputRef = useRef<HTMLInputElement>(null);
@@ -777,7 +797,7 @@ function ChatSearchInput({
     <input
       ref={inputRef}
       type="text"
-      placeholder="Select a chat"
+      placeholder={trans.__('Select a chat')}
       value={query}
       onChange={handleInputChange}
       onFocus={handleInputFocus}