Add the writer component plugin to alow third party extension to provide it

Author: brichet

packages/jupyter-chat/src/components/messages/writers.tsx

@@ -183,6 +183,10 @@ export type WriterComponentProps = {
   writer: IChatModel.IWriter;
 };
 
+/**
+ * The writer component class containing a react component to display with the user
+ * writing notification.
+ */
 export class WriterComponent {
   /**
    * The react component.

packages/jupyterlab-chat-extension/src/index.ts

@@ -17,6 +17,7 @@ import {
   InputToolbarRegistry,
   MessageFooterRegistry,
   SelectionWatcher,
+  WriterComponent,
   chatIcon,
   readIcon
 } from '@jupyter/chat';
@@ -58,6 +59,7 @@ import {
   IInputToolbarRegistryFactory,
   ISelectionWatcherToken,
   IWelcomeMessage,
+  IWriterComponent,
   LabChatModel,
   LabChatModelFactory,
   LabChatPanel,
@@ -77,8 +79,10 @@ const pluginIds = {
   chatCommands: 'jupyterlab-chat-extension:commands',
   chatPanel: 'jupyterlab-chat-extension:chat-panel',
   docFactories: 'jupyterlab-chat-extension:factory',
+  footerRegistry: 'jupyterlab-chat/footerRegistry',
   inputToolbarFactory: 'jupyterlab-chat-extension:inputToolbarFactory',
-  selectionWatcher: 'jupyterlab-chat-extension:selectionWatcher'
+  selectionWatcher: 'jupyterlab-chat-extension:selectionWatcher',
+  writerComponentRegistry: 'jupyterlab-chat-extension:writerComponent'
 };
 
 /**
@@ -126,7 +130,8 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
     IThemeManager,
     IToolbarWidgetRegistry,
     ITranslator,
-    IWelcomeMessage
+    IWelcomeMessage,
+    IWriterComponent
   ],
   provides: IChatFactory,
   activate: (
@@ -145,7 +150,8 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
     themeManager: IThemeManager | null,
     toolbarRegistry: IToolbarWidgetRegistry | null,
     translator_: ITranslator | null,
-    welcomeMessage: string
+    welcomeMessage: string,
+    writerComponent: WriterComponent
   ): IChatFactory => {
     const translator = translator_ ?? nullTranslator;
 
@@ -310,7 +316,8 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
       attachmentOpenerRegistry,
       inputToolbarFactory,
       messageFooterRegistry,
-      welcomeMessage
+      welcomeMessage,
+      writerComponent
     });
 
     // Add the widget to the tracker when it's created
@@ -558,6 +565,7 @@ const chatCommands: JupyterFrontEndPlugin<void> = {
         commands.addCommand(CommandIDs.openChat, {
           label: 'Open a chat',
           execute: async args => {
+            console.log('ARG', args);
             const inSidePanel: boolean = (args.inSidePanel as boolean) ?? false;
             const startup: boolean = (args.startup as boolean) ?? false;
             let filepath: string | null = (args.filepath as string) ?? null;
@@ -708,7 +716,8 @@ const chatPanel: JupyterFrontEndPlugin<ChatPanel> = {
     ILayoutRestorer,
     IMessageFooterRegistry,
     IThemeManager,
-    IWelcomeMessage
+    IWelcomeMessage,
+    IWriterComponent
   ],
   activate: (
     app: JupyterFrontEnd,
@@ -721,7 +730,8 @@ const chatPanel: JupyterFrontEndPlugin<ChatPanel> = {
     restorer: ILayoutRestorer | null,
     messageFooterRegistry: IMessageFooterRegistry,
     themeManager: IThemeManager | null,
-    welcomeMessage: string
+    welcomeMessage: string,
+    writerComponent: WriterComponent
   ): ChatPanel => {
     const { commands } = app;
 
@@ -740,7 +750,8 @@ const chatPanel: JupyterFrontEndPlugin<ChatPanel> = {
       attachmentOpenerRegistry,
       inputToolbarFactory,
       messageFooterRegistry,
-      welcomeMessage
+      welcomeMessage,
+      writerComponent
     });
     chatPanel.id = 'JupyterlabChat:sidepanel';
     chatPanel.title.icon = chatIcon;
@@ -857,7 +868,7 @@ const inputToolbarFactory: JupyterFrontEndPlugin<IInputToolbarRegistryFactory> =
  * Extension providing the message footer registry.
  */
 const footerRegistry: JupyterFrontEndPlugin<IMessageFooterRegistry> = {
-  id: 'jupyterlab-chat/footerRegistry',
+  id: pluginIds.footerRegistry,
   description: 'The footer registry plugin.',
   autoStart: true,
   provides: IMessageFooterRegistry,
@@ -866,6 +877,19 @@ const footerRegistry: JupyterFrontEndPlugin<IMessageFooterRegistry> = {
   }
 };
 
+/**
+ * Plugin providing a writer component.
+ */
+const writerComponent: JupyterFrontEndPlugin<WriterComponent> = {
+  id: pluginIds.writerComponentRegistry,
+  description: 'The writer component registry plugin.',
+  autoStart: true,
+  provides: IWriterComponent,
+  activate: (): WriterComponent => {
+    return new WriterComponent();
+  }
+};
+
 export default [
   activeCellManager,
   attachmentOpeners,
@@ -877,5 +901,6 @@ export default [
   inputToolbarFactory,
   selectionWatcher,
   emojiCommandsPlugin,
-  mentionCommandsPlugin
+  mentionCommandsPlugin,
+  writerComponent
 ];

packages/jupyterlab-chat/src/factory.ts

@@ -10,7 +10,8 @@ import {
   IChatCommandRegistry,
   IInputToolbarRegistry,
   IMessageFooterRegistry,
-  ISelectionWatcher
+  ISelectionWatcher,
+  WriterComponent
 } from '@jupyter/chat';
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
@@ -87,6 +88,7 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
     this._inputToolbarFactory = options.inputToolbarFactory;
     this._messageFooterRegistry = options.messageFooterRegistry;
     this._welcomeMessage = options.welcomeMessage;
+    this._writerComponent = options.writerComponent;
   }
 
   /**
@@ -102,6 +104,7 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
     context.attachmentOpenerRegistry = this._attachmentOpenerRegistry;
     context.messageFooterRegistry = this._messageFooterRegistry;
     context.welcomeMessage = this._welcomeMessage;
+    context.writerComponent = this._writerComponent;
     if (this._inputToolbarFactory) {
       context.inputToolbarRegistry = this._inputToolbarFactory.create();
     }
@@ -128,6 +131,7 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
   private _messageFooterRegistry?: IMessageFooterRegistry;
   private _welcomeMessage?: string;
+  private _writerComponent?: WriterComponent;
 }
 
 export namespace ChatWidgetFactory {
@@ -140,6 +144,7 @@ export namespace ChatWidgetFactory {
     inputToolbarRegistry?: IInputToolbarRegistry;
     messageFooterRegistry?: IMessageFooterRegistry;
     welcomeMessage?: string;
+    writerComponent?: WriterComponent;
   }
 
   export interface IOptions<T extends LabChatPanel>
@@ -151,6 +156,7 @@ export namespace ChatWidgetFactory {
     inputToolbarFactory?: IInputToolbarRegistryFactory;
     messageFooterRegistry?: IMessageFooterRegistry;
     welcomeMessage?: string;
+    writerComponent?: WriterComponent;
   }
 }
 

packages/jupyterlab-chat/src/model.ts

@@ -362,7 +362,8 @@ export class LabChatModel
       if (state.isWriting !== undefined && state.isWriting !== false) {
         const writer: IChatModel.IWriter = {
           user: state.user,
-          messageID: state.isWriting === true ? undefined : state.isWriting
+          messageID: state.isWriting === true ? undefined : state.isWriting,
+          typingIndicator: state.typingIndicator
         };
         writers.push(writer);
       }

packages/jupyterlab-chat/src/token.ts

@@ -9,7 +9,8 @@ import {
   IActiveCellManager,
   ISelectionWatcher,
   ChatWidget,
-  IInputToolbarRegistry
+  IInputToolbarRegistry,
+  WriterComponent
 } from '@jupyter/chat';
 import { WidgetTracker } from '@jupyterlab/apputils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
@@ -153,3 +154,10 @@ export const IInputToolbarRegistryFactory =
 export const IWelcomeMessage = new Token<string>(
   'jupyterlab-chat:IWelcomeMessage'
 );
+
+/**
+ * The token to add a component to the writing notification.
+ */
+export const IWriterComponent = new Token<WriterComponent>(
+  'jupyterlab-chat:IWriterComponent'
+);

packages/jupyterlab-chat/src/widget.tsx

@@ -10,7 +10,8 @@ import {
   IChatModel,
   IInputToolbarRegistry,
   IMessageFooterRegistry,
-  readIcon
+  readIcon,
+  WriterComponent
 } from '@jupyter/chat';
 import { Contents } from '@jupyterlab/services';
 import { IThemeManager } from '@jupyterlab/apputils';
@@ -115,6 +116,7 @@ export class ChatPanel extends SidePanel {
     this._inputToolbarFactory = options.inputToolbarFactory;
     this._messageFooterRegistry = options.messageFooterRegistry;
     this._welcomeMessage = options.welcomeMessage;
+    this._writerComponent = options.writerComponent;
 
     const addChat = new CommandToolbarButton({
       commands: this._commands,
@@ -204,7 +206,8 @@ export class ChatPanel extends SidePanel {
       attachmentOpenerRegistry: this._attachmentOpenerRegistry,
       inputToolbarRegistry,
       messageFooterRegistry: this._messageFooterRegistry,
-      welcomeMessage: this._welcomeMessage
+      welcomeMessage: this._welcomeMessage,
+      writerComponent: this._writerComponent
     });
 
     this.addWidget(
@@ -328,6 +331,7 @@ export class ChatPanel extends SidePanel {
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
   private _messageFooterRegistry?: IMessageFooterRegistry;
   private _welcomeMessage?: string;
+  private _writerComponent?: WriterComponent;
 }
 
 /**
@@ -348,6 +352,7 @@ export namespace ChatPanel {
     inputToolbarFactory?: IInputToolbarRegistryFactory;
     messageFooterRegistry?: IMessageFooterRegistry;
     welcomeMessage?: string;
+    writerComponent?: WriterComponent;
   }
 }