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

package/src/__tests__/multichat-panel.spec.ts

@@ -3,13 +3,16 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { ToolbarButton } from '@jupyterlab/ui-components';
+import { ToolbarRegistry } from '@jupyterlab/apputils';
 import { RenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ObservableList } from '@jupyterlab/observables';
+import { ToolbarButton, PanelWithToolbar } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
 
 import { IChatPlaceholderFactory } from '../tokens';
 import { MultiChatPanel } from '../widgets/multichat-panel';
 import { defaultPlaceholder, Placeholder } from '../widgets/placeholder';
+import { MockChatModel } from './mocks';
 
 describe('MultiChatPanel', () => {
   let rmRegistry: RenderMimeRegistry;
@@ -79,40 +82,6 @@ describe('MultiChatPanel', () => {
     });
   });
 
-  describe('openInMain', () => {
-    it('should not dispose the model when moving to main area', async () => {
-      const { MockChatModel } = await import('./mocks');
-      const model = new MockChatModel();
-      const openInMain = jest.fn().mockResolvedValue(true);
-
-      const panel = new MultiChatPanel({ rmRegistry, openInMain });
-      panel.open({ model, displayName: 'test-chat' });
-
-      // Find the 'moveMain' toolbar button by name and invoke its click handler directly.
-      // ToolbarButton stores the onClick handler independently of DOM/React rendering,
-      // so this works without attaching the widget to the document.
-      const toolbar = panel.current!.toolbar;
-      const names = Array.from(toolbar.names());
-      const moveMainIdx = names.indexOf('moveMain');
-      expect(moveMainIdx).toBeGreaterThan(-1);
-
-      const moveButton = (toolbar.layout as any).widgets[
-        moveMainIdx
-      ] as ToolbarButton;
-
-      moveButton.onClick();
-      // Wait for the async onClick handler: openInMain resolves, then onClose is called.
-      await Promise.resolve();
-
-      expect(openInMain).toHaveBeenCalledWith(model.name);
-      expect(model.isDisposed).toBe(false);
-      expect(panel.getLoadedModel('test-chat')).toBeUndefined();
-
-      model.dispose();
-      panel.dispose();
-    });
-  });
-
   describe('placeholderFactory', () => {
     it('should use defaultPlaceholder when no factory is provided', () => {
       const panel = new MultiChatPanel({ rmRegistry });
@@ -207,7 +176,7 @@ describe('MultiChatPanel', () => {
       panel.dispose();
     });
 
-    it('should call factory.create again when the placeholder is re-added after closing a chat', async () => {
+    it('should call factory.create again when the placeholder is re-added after closing a chat', () => {
       const factory: IChatPlaceholderFactory = {
         create: jest.fn().mockReturnValue(new Widget())
       };
@@ -219,7 +188,6 @@ describe('MultiChatPanel', () => {
       });
 
       // Simulate opening and closing a chat to trigger _addPlaceholder again.
-      const { MockChatModel } = await import('./mocks');
       const model = new MockChatModel();
       panel.open({ model, displayName: 'test-chat' });
       panel.unsetLoadedModel('test-chat');
@@ -240,7 +208,95 @@ describe('MultiChatPanel', () => {
         '.jp-Toolbar-responsive-opener'
       );
       expect(opener).not.toBeNull();
+      panel.dispose();
+    });
+  });
+
+  describe('chatToolbarFactory', () => {
+    const makeFactory = (items: ToolbarRegistry.IToolbarItem[]) =>
+      jest.fn().mockReturnValue(new ObservableList({ values: items }));
+
+    it('should call factory with the panel when a chat is opened', () => {
+      const factory = makeFactory([{ name: 'myButton', widget: new Widget() }]);
+      const panel = new MultiChatPanel({
+        rmRegistry,
+        chatToolbarFactory: factory
+      });
+      const model = new MockChatModel();
+      const chatWidget = panel.open({ model, displayName: 'test' });
+      expect(factory).toHaveBeenCalledTimes(1);
+      expect(factory.mock.calls[0][0].widget).toBe(chatWidget);
+      panel.dispose();
+    });
 
+    it('should add the created widget to the chat toolbar', () => {
+      const panel = new MultiChatPanel({
+        rmRegistry,
+        chatToolbarFactory: makeFactory([
+          { name: 'myButton', widget: new Widget() }
+        ])
+      });
+      const model = new MockChatModel();
+      panel.open({ model, displayName: 'test' });
+      const toolbar = (panel.current as unknown as PanelWithToolbar).toolbar;
+      expect(Array.from(toolbar.names())).toContain('myButton');
+      panel.dispose();
+    });
+
+    it('should insert the item before "close"', () => {
+      const panel = new MultiChatPanel({
+        rmRegistry,
+        chatToolbarFactory: makeFactory([
+          { name: 'myButton', widget: new Widget() }
+        ])
+      });
+      const model = new MockChatModel();
+      panel.open({ model, displayName: 'test' });
+      const toolbar = (panel.current as unknown as PanelWithToolbar).toolbar;
+      const names = Array.from(toolbar.names());
+      expect(names.indexOf('myButton')).toBeLessThan(names.indexOf('close'));
+      panel.dispose();
+    });
+
+    it('should add all items when factory returns multiple items', () => {
+      const panel = new MultiChatPanel({
+        rmRegistry,
+        chatToolbarFactory: makeFactory([
+          { name: 'item1', widget: new Widget() },
+          { name: 'item2', widget: new Widget() }
+        ])
+      });
+      const model = new MockChatModel();
+      panel.open({ model, displayName: 'test' });
+      const toolbar = (panel.current as unknown as PanelWithToolbar).toolbar;
+      const names = Array.from(toolbar.names());
+      expect(names).toContain('item1');
+      expect(names).toContain('item2');
+      panel.dispose();
+    });
+
+    it('should call factory again for each newly opened chat', () => {
+      const factory = jest.fn().mockImplementation(
+        () =>
+          new ObservableList<ToolbarRegistry.IToolbarItem>({
+            values: [{ name: 'myButton', widget: new Widget() }]
+          })
+      );
+      const panel = new MultiChatPanel({
+        rmRegistry,
+        chatToolbarFactory: factory
+      });
+      const model1 = new MockChatModel();
+      panel.open({ model: model1, displayName: 'chat1' });
+      panel.unsetLoadedModel('chat1');
+
+      const model2 = new MockChatModel();
+      panel.open({ model: model2, displayName: 'chat2' });
+
+      expect(factory).toHaveBeenCalledTimes(2);
+      expect(factory.mock.results[0].value).not.toBe(
+        factory.mock.results[1].value
+      );
       panel.dispose();
     });
   });

package/src/components/messages/message.tsx

@@ -10,8 +10,8 @@ import { MessageRenderer } from './message-renderer';
 import { AttachmentPreviewList } from '../attachments';
 import { ChatInput } from '../input';
 import { useChatContext } from '../../context';
-import { IInputModel, InputModel } from '../../input-model';
-import { IMessageContent, IMessage } from '../../types';
+import { InputModel } from '../../input-model';
+import { IMessageContent, IMessage, INewMessage } from '../../types';
 import { replaceSpanToMention } from '../../utils';
 
 export const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
@@ -96,8 +96,8 @@ export function ChatMessageBase(props: ChatMessageProps): JSX.Element {
     });
     const inputModel = new InputModel({
       chatContext: model.createChatContext(),
-      onSend: (input: string, model?: IInputModel) =>
-        updateMessage(message.id, input, model),
+      onSend: (newMessage: INewMessage) =>
+        updateMessage(message.id, newMessage),
       onCancel: () => cancelEdition(),
       value: body,
       activeCellManager: model.activeCellManager,
@@ -121,17 +121,27 @@ export function ChatMessageBase(props: ChatMessageProps): JSX.Element {
 
   // Update the content of the message.
   const updateMessage = useCallback(
-    (id: string, input: string, inputModel?: IInputModel): void => {
-      if (!canEdit || !inputModel) {
+    (id: string, newMessage: INewMessage): void => {
+      const inputModel = model.getEditionModel(id);
+      if (!canEdit || !inputModel || !model.updateMessage) {
+        setEdit(false);
         return;
       }
+
       // Update the message
       const updatedMessage = { ...message };
-      updatedMessage.body = input;
-      updatedMessage.attachments = inputModel.attachments;
-      updatedMessage.mentions = inputModel.mentions;
-      model.updateMessage!(id, updatedMessage);
-      model.getEditionModel(message.id)?.dispose();
+      if (newMessage.body) {
+        updatedMessage.body = newMessage.body;
+      }
+      if (newMessage.attachments) {
+        updatedMessage.attachments = newMessage.attachments;
+      }
+      if (newMessage.mentions) {
+        updatedMessage.mentions = newMessage.mentions;
+      }
+
+      model.updateMessage(id, updatedMessage);
+      inputModel.dispose();
       setEdit(false);
     },
     [model, message, canEdit]

package/src/index.ts

@@ -13,4 +13,5 @@ export * from './registers';
 export * from './selection-watcher';
 export * from './tokens';
 export * from './types';
+export * from './utils';
 export * from './widgets';

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

@@ -9,6 +9,7 @@ import {
   nullTranslator,
   TranslationBundle
 } from '@jupyterlab/translation';
+import type { IAwareness } from '@jupyter/ydoc';
 import { ArrayExt } from '@lumino/algorithm';
 import { CommandRegistry } from '@lumino/commands';
 import { PromiseDelegate } from '@lumino/coreutils';
@@ -53,6 +54,14 @@ export interface IChatModel extends IDisposable {
    */
   readonly ready: Promise<void>;
 
+  /**
+   * The awareness channel of the underlying shared document, when the chat is
+   * backed by one. Lets extensions read collaborative state attached to the
+   * chat (e.g. session information published by AI personas) through a
+   * supported API instead of reaching into a concrete implementation.
+   */
+  readonly awareness?: IAwareness;
+
   /**
    * The indexes list of the messages currently in the viewport.
    */
@@ -264,7 +273,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;
@@ -894,6 +903,11 @@ export interface IChatContext {
    * Current user connected with the chat panel
    */
   readonly user: IUser | undefined;
+  /**
+   * The awareness channel of the underlying shared document, when the chat is
+   * backed by one.
+   */
+  readonly awareness?: IAwareness;
 }
 
 /**
@@ -917,6 +931,10 @@ export abstract class AbstractChatContext implements IChatContext {
     return this._model?.user;
   }
 
+  get awareness(): IAwareness | undefined {
+    return this._model.awareness;
+  }
+
   /**
    * ABSTRACT: Should return a list of users who have connected to this chat.
    */

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;
+  };
+}