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/jupyter-chat/src/widgets/multichat-panel.tsx

@@ -30,7 +30,8 @@ import { ChatWidget } from './chat-widget';
 import {
   Chat,
   IInputToolbarRegistry,
-  IInputToolbarRegistryFactory
+  IInputToolbarRegistryFactory,
+  WriterComponent
 } from '../components';
 import { chatIcon, readIcon } from '../icons';
 import { IChatModel } from '../model';
@@ -65,6 +66,7 @@ export class MultiChatPanel extends SidePanel {
     this._inputToolbarFactory = options.inputToolbarFactory;
     this._messageFooterRegistry = options.messageFooterRegistry;
     this._welcomeMessage = options.welcomeMessage;
+    this._writerComponent = options.writerComponent;
 
     this._getChatNames = options.getChatNames;
     this._createModel = options.createModel;
@@ -155,7 +157,8 @@ export class MultiChatPanel extends SidePanel {
       attachmentOpenerRegistry: this._attachmentOpenerRegistry,
       inputToolbarRegistry,
       messageFooterRegistry: this._messageFooterRegistry,
-      welcomeMessage: this._welcomeMessage
+      welcomeMessage: this._welcomeMessage,
+      writerComponent: this._writerComponent
     });
 
     const section = new ChatSection({
@@ -273,6 +276,7 @@ export class MultiChatPanel extends SidePanel {
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
   private _messageFooterRegistry?: IMessageFooterRegistry;
   private _welcomeMessage?: string;
+  private _writerComponent?: WriterComponent;
   private _updateChatListDebouncer: Debouncer;
 
   private _createModel?: (

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

@@ -17,6 +17,7 @@ import {
   InputToolbarRegistry,
   MessageFooterRegistry,
   SelectionWatcher,
+  WriterComponent,
   chatIcon,
   readIcon,
   IInputToolbarRegistryFactory,
@@ -58,6 +59,7 @@ import {
   IChatPanel,
   ISelectionWatcherToken,
   IWelcomeMessage,
+  IWriterComponent,
   LabChatModelFactory,
   LabChatPanel,
   WidgetConfig,
@@ -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'
 };
 
 /**
@@ -178,7 +182,8 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
     IThemeManager,
     IToolbarWidgetRegistry,
     ITranslator,
-    IWelcomeMessage
+    IWelcomeMessage,
+    IWriterComponent
   ],
   provides: IChatFactory,
   activate: (
@@ -197,7 +202,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;
 
@@ -362,7 +368,8 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
       attachmentOpenerRegistry,
       inputToolbarFactory,
       messageFooterRegistry,
-      welcomeMessage
+      welcomeMessage,
+      writerComponent
     });
 
     // Add the widget to the tracker when it's created
@@ -596,6 +603,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;
@@ -788,7 +796,8 @@ const chatPanel: JupyterFrontEndPlugin<MultiChatPanel> = {
     ILayoutRestorer,
     IMessageFooterRegistry,
     IThemeManager,
-    IWelcomeMessage
+    IWelcomeMessage,
+    IWriterComponent
   ],
   activate: (
     app: JupyterFrontEnd,
@@ -801,7 +810,8 @@ const chatPanel: JupyterFrontEndPlugin<MultiChatPanel> = {
     restorer: ILayoutRestorer | null,
     messageFooterRegistry: IMessageFooterRegistry,
     themeManager: IThemeManager | null,
-    welcomeMessage: string
+    welcomeMessage: string,
+    writerComponent: WriterComponent
   ): MultiChatPanel => {
     const { commands, serviceManager } = app;
 
@@ -847,7 +857,8 @@ const chatPanel: JupyterFrontEndPlugin<MultiChatPanel> = {
       attachmentOpenerRegistry,
       inputToolbarFactory,
       messageFooterRegistry,
-      welcomeMessage
+      welcomeMessage,
+      writerComponent
     });
     chatPanel.id = 'JupyterlabChat:sidepanel';
 
@@ -1002,7 +1013,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,
@@ -1011,6 +1022,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,
@@ -1022,5 +1046,6 @@ export default [
   inputToolbarFactory,
   selectionWatcher,
   emojiCommandsPlugin,
-  mentionCommandsPlugin
+  mentionCommandsPlugin,
+  writerComponent
 ];

packages/jupyterlab-chat/src/factory.ts

@@ -12,6 +12,7 @@ import {
   IMessageFooterRegistry,
   ISelectionWatcher,
   IInputToolbarRegistryFactory
+  WriterComponent
 } from '@jupyter/chat';
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
@@ -84,6 +85,7 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
     this._inputToolbarFactory = options.inputToolbarFactory;
     this._messageFooterRegistry = options.messageFooterRegistry;
     this._welcomeMessage = options.welcomeMessage;
+    this._writerComponent = options.writerComponent;
   }
 
   /**
@@ -99,6 +101,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();
     }
@@ -125,6 +128,7 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
   private _messageFooterRegistry?: IMessageFooterRegistry;
   private _welcomeMessage?: string;
+  private _writerComponent?: WriterComponent;
 }
 
 export namespace ChatWidgetFactory {
@@ -137,6 +141,7 @@ export namespace ChatWidgetFactory {
     inputToolbarRegistry?: IInputToolbarRegistry;
     messageFooterRegistry?: IMessageFooterRegistry;
     welcomeMessage?: string;
+    writerComponent?: WriterComponent;
   }
 
   export interface IOptions<T extends LabChatPanel>
@@ -148,6 +153,7 @@ export namespace ChatWidgetFactory {
     inputToolbarFactory?: IInputToolbarRegistryFactory;
     messageFooterRegistry?: IMessageFooterRegistry;
     welcomeMessage?: string;
+    writerComponent?: WriterComponent;
   }
 }
 

packages/jupyterlab-chat/src/model.ts

@@ -353,7 +353,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

@@ -8,7 +8,8 @@ import {
   chatIcon,
   IActiveCellManager,
   ISelectionWatcher,
-  ChatWidget
+  ChatWidget,
+  WriterComponent
 } from '@jupyter/chat';
 import { WidgetTracker } from '@jupyterlab/apputils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
@@ -143,3 +144,10 @@ export const ISelectionWatcherToken = new Token<ISelectionWatcher>(
 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

@@ -3,7 +3,23 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+<<<<<<< HEAD
 import { ChatWidget, IChatModel } from '@jupyter/chat';
+=======
+import {
+  ChatWidget,
+  IAttachmentOpenerRegistry,
+  IChatCommandRegistry,
+  IChatModel,
+  IInputToolbarRegistry,
+  IMessageFooterRegistry,
+  readIcon,
+  WriterComponent
+} from '@jupyter/chat';
+import { Contents } from '@jupyterlab/services';
+import { IThemeManager } from '@jupyterlab/apputils';
+import { PathExt } from '@jupyterlab/coreutils';
+>>>>>>> 04982b7 (Add the writer component plugin to alow third party extension to provide it)
 import { DocumentWidget } from '@jupyterlab/docregistry';
 
 import { LabChatModel } from './model';