Adding multi chats panel in @jupyter/chat package (#262)

* adding multichats panel

* Automatic application of license header

* Adding comments

* adding rename-chat button and ...

* lint fix

* Updating

* ui tests

* removing content manager from @jupyter/chat package

* Clean some unused code, and change section title class name to avoid duplication

* Remove the hook to listen for chat list, in favor to updating the list from the plugin

* Remove closeChat and moveToMain commands, and use openInMain callback to move the chat in the main area

* Remove rename modal in favor of jupyterlab modal, make the function optional in the panel, and improve error handling

* Renaming

* Revert wrong snapshot and test update, and fix commands test

* Allow section to have a name different from the chat model name

* Update chat list in throtter to avoid conflict

* Fix the update debouncer

* Better handling of chat file change, and increase timeout for first chat discovery

* Make callbacks optional, as well as the buttons depending on these callbacks

* Wait for the chat to be ready before creating the chat context of the main input, to ensure all the properties are available

* Add a disposed signal in chat model, and add a default id/icon to the multichat-panel

* Update the example

* handle optional getChatNames

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Nicolas Brichet <[email protected]>

Author: 3 people

docs/jupyter-chat-example/src/index.ts

@@ -4,16 +4,18 @@
  */
 
 import {
+  AbstractChatContext,
+  AbstractChatModel,
   ActiveCellManager,
   AttachmentOpenerRegistry,
-  buildChatSidebar,
-  AbstractChatModel,
   IAttachment,
   IChatMessage,
+  IChatContext,
+  IConfig,
   INewMessage,
+  MultiChatPanel,
   SelectionWatcher,
-  IChatContext,
-  AbstractChatContext
+  IChatModel
 } from '@jupyter/chat';
 import {
   JupyterFrontEnd,
@@ -48,6 +50,11 @@ class ChatContext extends AbstractChatContext {
 }
 
 class MyChatModel extends AbstractChatModel {
+  constructor(options: IChatModel.IOptions) {
+    super(options);
+    this.setReady();
+  }
+
   sendMessage(
     newMessage: INewMessage
   ): Promise<boolean | void> | boolean | void {
@@ -104,23 +111,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
       shell: app.shell
     });
 
-    const model = new MyChatModel({
-      activeCellManager,
-      selectionWatcher,
-      documentManager: filebrowser?.model.manager
-    });
-
-    // Update the settings when they change.
-    function loadSetting(setting: ISettingRegistry.ISettings): void {
-      model.config = {
-        sendWithShiftEnter: setting.get('sendWithShiftEnter')
-          .composite as boolean,
-        stackMessages: setting.get('stackMessages').composite as boolean,
-        unreadNotifications: setting.get('unreadNotifications')
-          .composite as boolean,
-        enableCodeToolbar: setting.get('enableCodeToolbar').composite as boolean
-      };
-    }
+    let config: IConfig = {};
 
     // Init the settings.
     if (settingRegistry) {
@@ -130,6 +121,21 @@ const plugin: JupyterFrontEndPlugin<void> = {
         settingRegistry.load('jupyter-chat-example:plugin')
       ])
         .then(([, setting]) => {
+          function loadSetting(setting: ISettingRegistry.ISettings) {
+            config = {
+              sendWithShiftEnter: setting.get('sendWithShiftEnter')
+                .composite as boolean,
+              stackMessages: setting.get('stackMessages').composite as boolean,
+              unreadNotifications: setting.get('unreadNotifications')
+                .composite as boolean,
+              enableCodeToolbar: setting.get('enableCodeToolbar')
+                .composite as boolean
+            };
+
+            panel.sections.forEach(section => {
+              section.model.config = config;
+            });
+          }
           // Read the settings
           loadSetting(setting);
 
@@ -149,12 +155,26 @@ const plugin: JupyterFrontEndPlugin<void> = {
       app.commands.execute('docmanager:open', { path: attachment.value });
     });
 
-    const panel = buildChatSidebar({
-      model,
+    app.commands.addCommand('chat-example:openChat', {
+      execute: async () => {
+        const model = new MyChatModel({
+          activeCellManager,
+          selectionWatcher,
+          documentManager: filebrowser?.model.manager,
+          config
+        });
+        model.name = UUID.uuid4();
+        panel.addChat(model);
+      }
+    });
+
+    const panel = new MultiChatPanel({
       rmRegistry,
       themeManager,
       attachmentOpenerRegistry,
-      welcomeMessage
+      welcomeMessage,
+      createChat: () => app.commands.execute('chat-example:openChat'),
+      renameChat: async (oldName: string, newName: string) => true
     });
     app.shell.add(panel, 'left');
   }

packages/jupyter-chat/package.json

@@ -60,6 +60,7 @@
     "@lumino/commands": "^2.0.0",
     "@lumino/coreutils": "^2.0.0",
     "@lumino/disposable": "^2.0.0",
+    "@lumino/polling": "^2.0.0",
     "@lumino/signaling": "^2.0.0",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",

packages/jupyter-chat/src/components/input/toolbar-registry.tsx

@@ -2,11 +2,12 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { Token } from '@lumino/coreutils';
+import { ISignal, Signal } from '@lumino/signaling';
 import * as React from 'react';
 
 import { AttachButton, CancelButton, SendButton } from './buttons';
 import { IInputModel } from '../../input-model';
-import { ISignal, Signal } from '@lumino/signaling';
 import { IChatCommandRegistry } from '../../registers';
 
 /**
@@ -166,3 +167,22 @@ export namespace InputToolbarRegistry {
     return registry;
   }
 }
+
+/**
+ * A factory interface for creating a new Input Toolbar Registry
+ * for each Chat Panel.
+ */
+export interface IInputToolbarRegistryFactory {
+  /**
+   * Create a new input toolbar registry instance.
+   */
+  create: () => IInputToolbarRegistry;
+}
+
+/**
+ * The token of the factory to create an input toolbar registry.
+ */
+export const IInputToolbarRegistryFactory =
+  new Token<IInputToolbarRegistryFactory>(
+    '@jupyter/chat:IInputToolbarRegistryFactory'
+  );

packages/jupyter-chat/src/input-model.ts

@@ -16,9 +16,9 @@ import { IAttachment, INotebookAttachment, IUser } from './types';
  */
 export interface IInputModel extends IDisposable {
   /**
-   * The chat context (a readonly subset of the chat model).
+   * The chat context (a subset of the chat model).
    */
-  readonly chatContext: IChatContext;
+  chatContext?: IChatContext;
 
   /**
    * Function to send a message.
@@ -175,10 +175,14 @@ export class InputModel implements IInputModel {
   /**
    * The chat context (a readonly subset of the chat model);
    */
-  get chatContext(): IChatContext {
+  get chatContext(): IChatContext | undefined {
     return this._chatContext;
   }
 
+  set chatContext(value: IChatContext | undefined) {
+    this._chatContext = value;
+  }
+
   /**
    * Function to send a message.
    */
@@ -468,7 +472,7 @@ export class InputModel implements IInputModel {
   }
 
   private _onSend: (input: string, model?: InputModel) => void;
-  private _chatContext: IChatContext;
+  private _chatContext?: IChatContext;
   private _value: string;
   private _cursorIndex: number | null = null;
   private _currentWord: string | null = null;
@@ -491,9 +495,9 @@ export class InputModel implements IInputModel {
 export namespace InputModel {
   export interface IOptions {
     /**
-     * The chat context (a readonly subset of the chat model).
+     * The chat context (a subset of the chat model).
      */
-    chatContext: IChatContext;
+    chatContext?: IChatContext;
 
     /**
      * The function that should send the message.

packages/jupyter-chat/src/model.ts

@@ -20,6 +20,7 @@ import {
   IUser
 } from './types';
 import { replaceMentionToSpan } from './utils';
+import { PromiseDelegate } from '@lumino/coreutils';
 
 /**
  * The chat model interface.
@@ -40,6 +41,11 @@ export interface IChatModel extends IDisposable {
    */
   unreadMessages: number[];
 
+  /**
+   * The promise resolving when the model is ready.
+   */
+  readonly ready: Promise<void>;
+
   /**
    * The indexes list of the messages currently in the viewport.
    */
@@ -226,7 +232,6 @@ export abstract class AbstractChatModel implements IChatModel {
     };
 
     this._inputModel = new InputModel({
-      chatContext: this.createChatContext(),
       activeCellManager: options.activeCellManager,
       selectionWatcher: options.selectionWatcher,
       documentManager: options.documentManager,
@@ -241,6 +246,12 @@ export abstract class AbstractChatModel implements IChatModel {
     this._activeCellManager = options.activeCellManager ?? null;
     this._selectionWatcher = options.selectionWatcher ?? null;
     this._documentManager = options.documentManager ?? null;
+
+    this._readyDelegate = new PromiseDelegate<void>();
+
+    this.ready.then(() => {
+      this._inputModel.chatContext = this.createChatContext();
+    });
   }
 
   /**
@@ -263,6 +274,10 @@ export abstract class AbstractChatModel implements IChatModel {
     this._name = value;
   }
 
+  get disposed(): ISignal<AbstractChatModel, void> {
+    return this._disposed;
+  }
+
   /**
    * The chat messages list.
    */
@@ -328,6 +343,20 @@ export abstract class AbstractChatModel implements IChatModel {
     localStorage.setItem(`@jupyter/chat:${this._id}`, JSON.stringify(storage));
   }
 
+  /**
+   * Promise that resolves when the model is ready.
+   */
+  get ready(): Promise<void> {
+    return this._readyDelegate.promise;
+  }
+
+  /**
+   * Set the model as ready.
+   */
+  protected setReady(): void {
+    this._readyDelegate.resolve();
+  }
+
   /**
    * The chat settings.
    */
@@ -484,6 +513,7 @@ export abstract class AbstractChatModel implements IChatModel {
       return;
     }
     this._isDisposed = true;
+    this._disposed.emit();
   }
 
   /**
@@ -677,7 +707,9 @@ export abstract class AbstractChatModel implements IChatModel {
   private _id: string | undefined;
   private _name: string = '';
   private _config: IConfig;
+  private _readyDelegate = new PromiseDelegate<void>();
   private _inputModel: IInputModel;
+  private _disposed = new Signal<this, void>(this);
   private _isDisposed = false;
   private _commands?: CommandRegistry;
   private _activeCellManager: IActiveCellManager | null;

packages/jupyter-chat/src/widgets/index.ts

@@ -6,3 +6,4 @@
 export * from './chat-error';
 export * from './chat-sidebar';
 export * from './chat-widget';
+export * from './multichat-panel';