@jupyter/chat 0.23.0-alpha.2 → 0.23.0-alpha.3

package/src/input-model.ts

@@ -10,7 +10,13 @@ import { ISignal, Signal } from '@lumino/signaling';
 import { IActiveCellManager } from './active-cell-manager';
 import { ISelectionWatcher } from './selection-watcher';
 import { IChatContext } from './model';
-import { IAttachment, INotebookAttachment, IUser } from './types';
+import {
+  IAttachment,
+  IMessageMetadata,
+  INewMessage,
+  INotebookAttachment,
+  IUser
+} from './types';
 
 /**
  * The chat input interface.
@@ -152,6 +158,31 @@ export interface IInputModel extends IDisposable {
    */
   clearMentions(): void;
 
+  /**
+   * Get the metadata to attach to the next message to send.
+   */
+  getMetadata(): IMessageMetadata;
+
+  /**
+   * Merge a patch into the metadata to attach to the next message to send.
+   *
+   * This is a *shallow* merge: each key in `patch` replaces the existing value
+   * at that key wholesale, rather than being merged recursively. To change a
+   * nested field, pass the whole new value for its top-level key. The patch is
+   * deep-copied, so mutating it afterwards won't affect the stored metadata.
+   */
+  updateMetadata(patch: IMessageMetadata): void;
+
+  /**
+   * Clear the metadata.
+   */
+  clearMetadata(): void;
+
+  /**
+   * A signal emitting when the metadata has changed.
+   */
+  readonly metadataChanged?: ISignal<IInputModel, IMessageMetadata>;
+
   /**
    * A signal emitting when disposing of the model.
    */
@@ -169,6 +200,7 @@ export class InputModel implements IInputModel {
     this._value = options.value || '';
     this._attachments = options.attachments || [];
     this._mentions = options.mentions || [];
+    this._metadata = options.metadata || {};
     this.cursorIndex = options.cursorIndex || this.value.length;
     this._activeCellManager = options.activeCellManager ?? null;
     this._selectionWatcher = options.selectionWatcher ?? null;
@@ -194,8 +226,32 @@ export class InputModel implements IInputModel {
    * Function to send a message.
    */
   send = (input: string): void => {
-    this._onSend(input, this);
+    const message: INewMessage = {
+      body: input
+    };
+
+    // Add the attachments
+    if (this.attachments.length) {
+      message.attachments = [...this.attachments];
+    }
+
+    // Add the mentions
+    if (this.mentions.length) {
+      message.mentions = [...this.mentions];
+    }
+
+    // Add the metadata
+    if (Object.keys(this._metadata).length) {
+      message.metadata = { ...this._metadata };
+    }
+
+    // Send the message
+    this._onSend(message);
+
+    // Clear the input
     this.value = '';
+    this.clearAttachments();
+    this.clearMentions();
   };
 
   /**
@@ -460,6 +516,45 @@ export class InputModel implements IInputModel {
     this._mentions = [];
   };
 
+  /**
+   * Get the metadata to attach to the next message to send.
+   */
+  getMetadata(): IMessageMetadata {
+    return this._metadata;
+  }
+
+  /**
+   * Merge a patch into the metadata to attach to the next message to send.
+   *
+   * This is a *shallow* merge: each key in `patch` replaces the existing value
+   * at that key wholesale, rather than being merged recursively. To change a
+   * nested field, pass the whole new value for its top-level key. The patch is
+   * deep-copied, so mutating it afterwards won't affect the stored metadata.
+   */
+  updateMetadata = (patch: IMessageMetadata): void => {
+    // Deep-copy the patch so a caller mutating a nested field afterwards can't
+    // reach into the stored metadata. `this._metadata` only ever holds values
+    // that were themselves deep-copied on the way in, so a shallow spread of it
+    // is safe.
+    this._metadata = { ...this._metadata, ...structuredClone(patch) };
+    this._metadataChanged.emit(this._metadata);
+  };
+
+  /**
+   * Clear the metadata.
+   */
+  clearMetadata = (): void => {
+    this._metadata = {};
+    this._metadataChanged.emit(this._metadata);
+  };
+
+  /**
+   * A signal emitting when the metadata has changed.
+   */
+  get metadataChanged(): ISignal<IInputModel, IMessageMetadata> {
+    return this._metadataChanged;
+  }
+
   /**
    * Dispose the input model.
    */
@@ -486,13 +581,14 @@ export class InputModel implements IInputModel {
   }
 
   private _id: string;
-  private _onSend: (input: string, model?: InputModel) => void;
+  private _onSend: (message: INewMessage) => void;
   private _chatContext?: IChatContext;
   private _value: string;
   private _cursorIndex: number | null = null;
   private _currentWord: string | null = null;
   private _attachments: IAttachment[];
   private _mentions: IUser[];
+  private _metadata: IMessageMetadata;
   private _activeCellManager: IActiveCellManager | null;
   private _selectionWatcher: ISelectionWatcher | null;
   private _documentManager: IDocumentManager | null;
@@ -503,6 +599,7 @@ export class InputModel implements IInputModel {
   private _configChanged = new Signal<IInputModel, InputModel.IConfig>(this);
   private _focusInputSignal = new Signal<InputModel, void>(this);
   private _attachmentsChanged = new Signal<InputModel, IAttachment[]>(this);
+  private _metadataChanged = new Signal<InputModel, IMessageMetadata>(this);
   private _onDisposed = new Signal<InputModel, void>(this);
   private _isDisposed = false;
 }
@@ -519,7 +616,7 @@ export namespace InputModel {
      * @param content - the content of the message.
      * @param model - the model of the input sending the message.
      */
-    onSend: (content: string, model?: InputModel) => void;
+    onSend: (message: INewMessage) => void;
 
     /**
      * Function that should cancel the message edition.
@@ -541,6 +638,11 @@ export namespace InputModel {
      */
     mentions?: IUser[];
 
+    /**
+     * The initial metadata.
+     */
+    metadata?: IMessageMetadata;
+
     /**
      * The current cursor index.
      * This refers to the index of the character in front of the cursor.

package/src/model.ts

@@ -264,7 +264,7 @@ export abstract class AbstractChatModel implements IChatModel {
       config: {
         sendWithShiftEnter: config.sendWithShiftEnter
       },
-      onSend: (input: string) => this.sendMessage({ body: input })
+      onSend: this.sendMessage.bind(this)
     });
 
     this._commands = options.commands;

package/src/tokens.ts

@@ -3,24 +3,40 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
+import { IWidgetTracker } from '@jupyterlab/apputils';
 import { Token } from '@lumino/coreutils';
 import { Widget } from '@lumino/widgets';
 
 import { ChatWidget, Placeholder } from './widgets';
 import { IChatModel } from './model';
+import { ChatArea } from './types';
 
 /**
- * The main area chat widget type.
+ * The interface for any widget displaying a chat (main area or side panel).
  */
-export type MainAreaChat = MainAreaWidget<ChatWidget> & {
+export interface IChatPanel extends Widget {
+  /**
+   * The chat widget embedded in the panel.
+   */
+  widget: ChatWidget;
+  /**
+   * The model of the chat widget.
+   */
   model: IChatModel;
-};
+  /**
+   * The area of the panel.
+   */
+  area: ChatArea;
+  /**
+   * The chat panel toolbar.
+   */
+  toolbar: Widget;
+}
 
 /**
  * the chat tracker type.
  */
-export type IChatTracker = IWidgetTracker<ChatWidget | MainAreaChat>;
+export type IChatTracker = IWidgetTracker<IChatPanel>;
 
 /**
  * A chat tracker token.

package/src/types.ts

@@ -174,10 +174,12 @@ export interface IChatHistory {
 /**
  * The content of a new message.
  */
-export interface INewMessage {
-  body: string;
-  id?: string;
-}
+export type INewMessage<T = IUser, U = IAttachment> = Partial<
+  Pick<
+    IMessageContent<T, U>,
+    'body' | 'attachments' | 'mentions' | 'metadata' | 'mime_model' | 'sender'
+  >
+>;
 
 /**
  * The attachment type. Jupyter Chat allows for two types of attachments

package/src/utils.ts

@@ -3,13 +3,17 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { CommandToolbarButton, ToolbarRegistry } from '@jupyterlab/apputils';
 import { CodeEditor } from '@jupyterlab/codeeditor';
 import { CodeMirrorEditor } from '@jupyterlab/codemirror';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { FileEditor } from '@jupyterlab/fileeditor';
 import { Notebook } from '@jupyterlab/notebook';
+import { IObservableList, ObservableList } from '@jupyterlab/observables';
+import { CommandRegistry } from '@lumino/commands';
 import { Widget } from '@lumino/widgets';
 
+import { IChatPanel } from './tokens';
 import { IUser } from './types';
 
 const MENTION_CLASS = 'jp-chat-mention';
@@ -81,3 +85,58 @@ export function replaceSpanToMention(content: string, user: IUser): string {
   const regex = new RegExp(mentionEl, 'g');
   return content.replace(regex, mention);
 }
+
+/**
+ * Wraps a toolbar factory so that every CommandToolbarButton it creates
+ * automatically receives the panel's area as an arg.
+ * This lets commands branch on `args.area` without each plugin having to
+ * register a per-item toolbarRegistry.addFactory call.
+ */
+export function injectAreaArg(
+  baseFactory: (
+    panel: IChatPanel
+  ) => IObservableList<ToolbarRegistry.IToolbarItem>,
+  commands: CommandRegistry
+): (panel: IChatPanel) => IObservableList<ToolbarRegistry.IToolbarItem> {
+  return (panel: IChatPanel) => {
+    const base = baseFactory(panel);
+
+    const inject = (
+      item: ToolbarRegistry.IToolbarItem
+    ): ToolbarRegistry.IToolbarItem => {
+      const { widget } = item;
+      if (!(widget instanceof CommandToolbarButton)) {
+        return item;
+      }
+      return {
+        name: item.name,
+        widget: new CommandToolbarButton({
+          commands,
+          id: widget.commandId,
+          args: { area: panel.area }
+        })
+      };
+    };
+
+    const wrapped = new ObservableList<ToolbarRegistry.IToolbarItem>({
+      values: Array.from({ length: base.length }, (_, i) => inject(base.get(i)))
+    });
+
+    base.changed.connect((_, change) => {
+      if (change.type === 'add') {
+        wrapped.insertAll(change.newIndex, change.newValues.map(inject));
+      } else if (change.type === 'remove') {
+        wrapped.removeRange(
+          change.oldIndex,
+          change.oldIndex + change.oldValues.length
+        );
+      } else if (change.type === 'set') {
+        change.newValues.forEach((item, i) =>
+          wrapped.set(change.newIndex + i, inject(item))
+        );
+      }
+    });
+
+    return wrapped;
+  };
+}

package/src/widgets/multichat-panel.tsx

@@ -8,12 +8,12 @@
  * Originally adapted from jupyterlab-chat's ChatPanel
  */
 
-import { InputDialog } from '@jupyterlab/apputils';
+import { InputDialog, ToolbarRegistry } from '@jupyterlab/apputils';
+import { IObservableList } from '@jupyterlab/observables';
 import { nullTranslator, TranslationBundle } from '@jupyterlab/translation';
 import {
   addIcon,
   closeIcon,
-  launchIcon,
   PanelWithToolbar,
   ReactiveToolbar,
   ReactWidget,
@@ -37,9 +37,10 @@ import {
   IInputToolbarRegistryFactory
 } from '../components';
 import { TRANSLATION_DOMAIN } from '../context';
-import { chatIcon, readIcon } from '../icons';
+import { chatIcon } from '../icons';
 import { IChatModel } from '../model';
-import { IChatPlaceholderFactory } from '../tokens';
+import { IChatPanel, IChatPlaceholderFactory } from '../tokens';
+import { ChatArea } from '../types';
 
 const SIDEPANEL_CLASS = 'jp-chat-sidepanel';
 const ADD_BUTTON_CLASS = 'jp-chat-add';
@@ -86,10 +87,10 @@ export class MultiChatPanel extends PanelWithToolbar {
 
     this._chatOptions = options;
     this._inputToolbarFactory = options.inputToolbarFactory;
+    this._chatToolbarFactory = options.chatToolbarFactory;
 
     this._getChatNames = options.getChatNames;
     this._createModel = options.createModel;
-    this._openInMain = options.openInMain;
     this._renameChat = options.renameChat;
     this._placeholderFactory = options.placeholderFactory;
 
@@ -149,9 +150,9 @@ export class MultiChatPanel extends PanelWithToolbar {
   }
 
   /**
-   * A signal emitting when a chat widget is opened in the panel.
+   * A signal emitting when a chat panel is opened in the sidepanel.
    */
-  get chatOpened(): ISignal<MultiChatPanel, ChatWidget> {
+  get chatOpened(): ISignal<MultiChatPanel, IChatPanel> {
     return this._chatOpened;
   }
 
@@ -293,8 +294,8 @@ export class MultiChatPanel extends PanelWithToolbar {
     const widget = new SidePanelWidget({
       widget: chatWidget,
       displayName: name,
-      openInMain: this._openInMain,
       renameChat: this._renameChat,
+      toolbarFactory: this._chatToolbarFactory,
       onClose: (name: string, disposeModel = true) => {
         this.unsetLoadedModel(name, disposeModel);
       },
@@ -313,7 +314,7 @@ export class MultiChatPanel extends PanelWithToolbar {
       this._chatSelectorPopup.setCurrentChat(name);
     }
 
-    this._chatOpened.emit(chatWidget);
+    this._chatOpened.emit(widget);
     return chatWidget;
   }
 
@@ -437,20 +438,22 @@ export class MultiChatPanel extends PanelWithToolbar {
     this._chatSelectorPopup?.hide();
   };
 
-  private _chatOpened = new Signal<MultiChatPanel, ChatWidget>(this);
+  private _chatOpened = new Signal<MultiChatPanel, IChatPanel>(this);
   private _chatNamesChanged = new Signal<
     MultiChatPanel,
     { [name: string]: string }
   >(this);
   private _chatOptions: Omit<Chat.IOptions, 'model' | 'inputToolbarRegistry'>;
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
+  private _chatToolbarFactory?: (
+    panel: IChatPanel
+  ) => IObservableList<ToolbarRegistry.IToolbarItem>;
   private _updateChatListDebouncer: Debouncer;
 
   private _createModel?: (
     name?: string
   ) => Promise<MultiChatPanel.IOpenChatArgs>;
   private _getChatNames?: () => Promise<{ [name: string]: string }>;
-  private _openInMain?: (name: string) => Promise<boolean>;
   private _renameChat?: boolean | ((oldName: string) => Promise<string | null>);
   private _placeholderFactory?: IChatPlaceholderFactory;
   private _openChatWidget?: ReactWidget;
@@ -476,6 +479,12 @@ export namespace MultiChatPanel {
      * The input toolbar factory;
      */
     inputToolbarFactory?: IInputToolbarRegistryFactory;
+    /**
+     * An optional toolbar factory for each opened chat.
+     */
+    chatToolbarFactory?: (
+      panel: IChatPanel
+    ) => IObservableList<ToolbarRegistry.IToolbarItem>;
     /**
      * An optional callback to create a chat model.
      *
@@ -489,12 +498,6 @@ export namespace MultiChatPanel {
      * @returns an object mapping chat display names to identifiers.
      */
     getChatNames?: () => Promise<{ [name: string]: string }>;
-    /**
-     * An optional callback to open the chat in the main area.
-     *
-     * @param name - the name of the chat to move.
-     */
-    openInMain?: (name: string) => Promise<boolean>;
     /**
      * An optional callback to rename a chat.
      *
@@ -531,7 +534,7 @@ export namespace MultiChatPanel {
 /**
  * A widget containing the chat and its toolbar.
  */
-class SidePanelWidget extends ReactivePanelWithToolbar {
+class SidePanelWidget extends ReactivePanelWithToolbar implements IChatPanel {
   constructor(options: SidePanelWidget.IOptions) {
     super();
     this._chatWidget = options.widget;
@@ -557,19 +560,6 @@ class SidePanelWidget extends ReactivePanelWithToolbar {
     // Add the chat widget
     this.addWidget(this._chatWidget);
 
-    // Add toolbar buttons
-    this._markAsRead = new ToolbarButton({
-      icon: readIcon,
-      iconLabel: trans.__('Mark chat as read'),
-      className: 'jp-mod-styled',
-      onClick: () => {
-        if (this.model) {
-          this.model.unreadMessages = [];
-        }
-      }
-    });
-    this.toolbar.addItem('markRead', this._markAsRead);
-
     if (options.renameChat) {
       const renameButton = new ToolbarButton({
         iconClass: 'jp-EditIcon',
@@ -606,21 +596,6 @@ class SidePanelWidget extends ReactivePanelWithToolbar {
       this.toolbar.addItem('rename', renameButton);
     }
 
-    if (options.openInMain) {
-      const moveToMain = new ToolbarButton({
-        icon: launchIcon,
-        iconLabel: trans.__('Move the chat to the main area'),
-        className: 'jp-mod-styled',
-        onClick: async () => {
-          const name = this.model.name;
-          if (await options.openInMain?.(name)) {
-            options.onClose(this._displayName, false);
-          }
-        }
-      });
-      this.toolbar.addItem('moveMain', moveToMain);
-    }
-
     const closeButton = new ToolbarButton({
       icon: closeIcon,
       iconLabel: trans.__('Close the chat'),
@@ -631,9 +606,24 @@ class SidePanelWidget extends ReactivePanelWithToolbar {
     });
     this.toolbar.addItem('close', closeButton);
 
-    // Update mark as read button state
-    this.model.unreadChanged?.connect(this._unreadChanged);
-    this._markAsRead.enabled = (this.model?.unreadMessages.length ?? 0) > 0;
+    if (options.toolbarFactory) {
+      const items = options.toolbarFactory(this);
+      for (let i = 0; i < items.length; i++) {
+        const { name, widget } = items.get(i);
+        this.toolbar.insertBefore('close', name, widget);
+      }
+      items.changed.connect((_, change) => {
+        if (change.type === 'add') {
+          for (const { name, widget } of change.newValues) {
+            this.toolbar.insertBefore('close', name, widget);
+          }
+        } else if (change.type === 'remove') {
+          for (const { widget } of change.oldValues) {
+            widget.dispose();
+          }
+        }
+      });
+    }
   }
 
   protected onAfterAttach(msg: Message): void {
@@ -646,6 +636,13 @@ class SidePanelWidget extends ReactivePanelWithToolbar {
     this._updateReactiveToolbar();
   }
 
+  /**
+   * The area of the widget.
+   */
+  get area(): ChatArea {
+    return 'sidebar';
+  }
+
   /**
    * The chat widget embedded in the sidepanel widget.
    */
@@ -687,10 +684,6 @@ class SidePanelWidget extends ReactivePanelWithToolbar {
    * Dispose of the resources held by the widget.
    */
   dispose(): void {
-    const model = this.model;
-    if (model) {
-      model.unreadChanged?.disconnect(this._unreadChanged);
-    }
     super.dispose();
   }
 
@@ -716,13 +709,6 @@ class SidePanelWidget extends ReactivePanelWithToolbar {
     this.toolbar.insertItem(0, 'title', this._titleWidget);
   }
 
-  /**
-   * Enable/disable unread icon.
-   */
-  private _unreadChanged = (_: IChatModel, unread: number[]) => {
-    this._markAsRead.enabled = unread.length > 0;
-  };
-
   /**
    * Trigger reactive toolbar overflow computation from rendered toolbar size.
    */
@@ -739,7 +725,6 @@ class SidePanelWidget extends ReactivePanelWithToolbar {
   }
 
   private _chatWidget: ChatWidget;
-  private _markAsRead: ToolbarButton;
   private _displayName: string;
   private _titleWidget: Widget | undefined;
   private _nameChanged = new Signal<
@@ -768,14 +753,16 @@ namespace SidePanelWidget {
      * The displayed name of the chat.
      */
     displayName?: string;
-    /**
-     * The callback to open the chat in main area.
-     */
-    openInMain?: (name: string) => Promise<boolean>;
     /**
      * The callback to rename the chat.
      */
     renameChat?: boolean | ((oldName: string) => Promise<string | null>);
+    /**
+     * An optional toolbar factory.
+     */
+    toolbarFactory?: (
+      panel: IChatPanel
+    ) => IObservableList<ToolbarRegistry.IToolbarItem>;
     /**
      * The translation bundle.
      */
@@ -795,7 +782,7 @@ type ChatSearchInputProps = {
   /**
    * Signal emitting when a chat is opened.
    */
-  chatOpened: ISignal<MultiChatPanel, ChatWidget>;
+  chatOpened: ISignal<MultiChatPanel, IChatPanel>;
   /**
    * The translation bundle.
    */