Add a message footer registry, to allow extensions to provides their footers (#210)

* Add a chat footer registry to allow extensions to provides their footers

* Update snapshots

* Update snapshot

* Enhance names (suggested changes from PR comments)

Author: brichet

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

@@ -20,8 +20,10 @@ import { AttachmentPreviewList } from './attachments';
 import { ChatInput } from './chat-input';
 import { IInputToolbarRegistry } from './input';
 import { MarkdownRenderer } from './markdown-renderer';
+import { MessageFooter } from './messages/footer';
 import { ScrollContainer } from './scroll-container';
 import { IChatCommandRegistry } from '../chat-commands';
+import { IMessageFooterRegistry } from '../footers';
 import { IInputModel, InputModel } from '../input-model';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
@@ -58,6 +60,10 @@ type BaseMessageProps = {
    * The input toolbar registry.
    */
   inputToolbarRegistry: IInputToolbarRegistry;
+  /**
+   * The footer registry.
+   */
+  messageFooterRegistry?: IMessageFooterRegistry;
 };
 
 /**
@@ -198,6 +204,13 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
                   renderedPromise={renderedPromise.current[i]}
                   ref={el => (listRef.current[i] = el)}
                 />
+                {props.messageFooterRegistry && (
+                  <MessageFooter
+                    registry={props.messageFooterRegistry}
+                    message={message}
+                    model={model}
+                  />
+                )}
               </Box>
             );
           })}

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

@@ -17,6 +17,7 @@ import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
 import { IInputToolbarRegistry, InputToolbarRegistry } from './input';
 import { AttachmentOpenerContext } from '../context';
+import { IMessageFooterRegistry } from '../footers';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry } from '../registry';
 
@@ -34,6 +35,7 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         model={model}
         chatCommandRegistry={props.chatCommandRegistry}
         inputToolbarRegistry={inputToolbarRegistry}
+        messageFooterRegistry={props.messageFooterRegistry}
       />
       <ChatInput
         sx={{
@@ -125,6 +127,10 @@ export namespace Chat {
      * The input toolbar registry
      */
     inputToolbarRegistry?: IInputToolbarRegistry;
+    /**
+     * The footer registry.
+     */
+    messageFooterRegistry?: IMessageFooterRegistry;
   }
 
   /**

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

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Box } from '@mui/material';
+import React from 'react';
+import {
+  IMessageFooterRegistry,
+  MessageFooterSectionProps
+} from '../../footers';
+
+/**
+ * The chat footer component properties.
+ */
+export interface IMessageFootersProps extends MessageFooterSectionProps {
+  /**
+   * The chat footer registry.
+   */
+  registry: IMessageFooterRegistry;
+}
+
+/**
+ * The chat footer component, which displays footer components on a row according to
+ * their respective positions.
+ */
+export function MessageFooter(props: IMessageFootersProps): JSX.Element {
+  const { message, model, registry } = props;
+  const footer = registry.getFooter();
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+      {footer.left?.component ? (
+        <footer.left.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+      {footer.center?.component ? (
+        <footer.center.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+      {footer.right?.component ? (
+        <footer.right.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+    </Box>
+  );
+}

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

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './registry';
+export * from './types';

packages/jupyter-chat/src/footers/registry.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Token } from '@lumino/coreutils';
+import { MessageFooter, MessageFooterSection } from './types';
+
+/**
+ * The interface of a registry to provide chat footer.
+ */
+export interface IMessageFooterRegistry {
+  /**
+   * Get the message footer.
+   */
+  getFooter(): MessageFooter;
+  /**
+   * Add a message footer section.
+   * If multiple labextensions add a section in the same region, only
+   * the last one will be displayed.
+   */
+  addSection(section: MessageFooterSection): void;
+}
+
+/**
+ * The default implementation of the message footer registry.
+ */
+export class MessageFooterRegistry implements IMessageFooterRegistry {
+  /**
+   * Get the footer from the registry.
+   */
+  getFooter(): MessageFooter {
+    return this._footers;
+  }
+
+  /**
+   * Add a message footer.
+   * If several extension add footers, only the last one will be displayed.
+   */
+  addSection(footer: MessageFooterSection): void {
+    this._footers[footer.position] = footer;
+  }
+
+  private _footers: MessageFooter = {};
+}
+
+/**
+ * The token providing the chat footer registry.
+ */
+export const IMessageFooterRegistry = new Token<IMessageFooterRegistry>(
+  '@jupyter/chat:ChatFooterRegistry'
+);

packages/jupyter-chat/src/footers/types.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IChatModel } from '../model';
+import { IChatMessage } from '../types';
+
+/**
+ * The props sent passed to each `MessageFooterSection` React component.
+ */
+export type MessageFooterSectionProps = {
+  model: IChatModel;
+  message: IChatMessage;
+};
+
+/**
+ * A message footer section which can be added to the footer registry.
+ */
+export type MessageFooterSection = {
+  component: React.FC<MessageFooterSectionProps>;
+  position: 'left' | 'center' | 'right';
+};
+
+/**
+ * The message footer returned by the registry, composed of 'left', 'center',
+ * and 'right' sections.
+ */
+export type MessageFooter = {
+  left?: MessageFooterSection;
+  center?: MessageFooterSection;
+  right?: MessageFooterSection;
+};

packages/jupyter-chat/src/index.ts

@@ -6,6 +6,7 @@
 export * from './active-cell-manager';
 export * from './chat-commands';
 export * from './components';
+export * from './footers';
 export * from './icons';
 export * from './input-model';
 export * from './model';

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

@@ -12,8 +12,10 @@ import {
   IAttachment,
   IAttachmentOpenerRegistry,
   IChatCommandRegistry,
+  IMessageFooterRegistry,
   ISelectionWatcher,
   InputToolbarRegistry,
+  MessageFooterRegistry,
   SelectionWatcher,
   chatIcon,
   readIcon
@@ -115,6 +117,7 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
     IDefaultFileBrowser,
     IInputToolbarRegistryFactory,
     ILayoutRestorer,
+    IMessageFooterRegistry,
     ISelectionWatcherToken,
     ISettingRegistry,
     IThemeManager,
@@ -132,6 +135,7 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
     filebrowser: IDefaultFileBrowser | null,
     inputToolbarFactory: IInputToolbarRegistryFactory,
     restorer: ILayoutRestorer | null,
+    messageFooterRegistry: IMessageFooterRegistry,
     selectionWatcher: ISelectionWatcher | null,
     settingRegistry: ISettingRegistry | null,
     themeManager: IThemeManager | null,
@@ -301,7 +305,8 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
       translator,
       chatCommandRegistry,
       attachmentOpenerRegistry,
-      inputToolbarFactory
+      inputToolbarFactory,
+      messageFooterRegistry
     });
 
     // Add the widget to the tracker when it's created
@@ -665,6 +670,7 @@ const chatPanel: JupyterFrontEndPlugin<ChatPanel> = {
     IChatCommandRegistry,
     IInputToolbarRegistryFactory,
     ILayoutRestorer,
+    IMessageFooterRegistry,
     IThemeManager
   ],
   activate: (
@@ -676,6 +682,7 @@ const chatPanel: JupyterFrontEndPlugin<ChatPanel> = {
     chatCommandRegistry: IChatCommandRegistry,
     inputToolbarFactory: IInputToolbarRegistryFactory,
     restorer: ILayoutRestorer | null,
+    messageFooterRegistry: IMessageFooterRegistry,
     themeManager: IThemeManager | null
   ): ChatPanel => {
     const { commands } = app;
@@ -693,7 +700,8 @@ const chatPanel: JupyterFrontEndPlugin<ChatPanel> = {
       defaultDirectory,
       chatCommandRegistry,
       attachmentOpenerRegistry,
-      inputToolbarFactory
+      inputToolbarFactory,
+      messageFooterRegistry
     });
     chatPanel.id = 'JupyterlabChat:sidepanel';
     chatPanel.title.icon = chatIcon;
@@ -818,13 +826,27 @@ const inputToolbarFactory: JupyterFrontEndPlugin<IInputToolbarRegistryFactory> =
     }
   };
 
+/**
+ * Extension providing the message footer registry.
+ */
+const footerRegistry: JupyterFrontEndPlugin<IMessageFooterRegistry> = {
+  id: 'jupyterlab-chat/footerRegistry',
+  description: 'The footer registry plugin.',
+  autoStart: true,
+  provides: IMessageFooterRegistry,
+  activate: (app: JupyterFrontEnd): IMessageFooterRegistry => {
+    return new MessageFooterRegistry();
+  }
+};
+
 export default [
   activeCellManager,
   attachmentOpeners,
   chatCommands,
   chatCommandRegistryPlugin,
   chatPanel,
   docFactories,
+  footerRegistry,
   inputToolbarFactory,
   selectionWatcher,
   emojiCommandsPlugin,

packages/jupyterlab-chat/src/factory.ts

@@ -9,6 +9,7 @@ import {
   IAttachmentOpenerRegistry,
   IChatCommandRegistry,
   IInputToolbarRegistry,
+  IMessageFooterRegistry,
   ISelectionWatcher
 } from '@jupyter/chat';
 import { IThemeManager } from '@jupyterlab/apputils';
@@ -84,6 +85,7 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
     this._chatCommandRegistry = options.chatCommandRegistry;
     this._attachmentOpenerRegistry = options.attachmentOpenerRegistry;
     this._inputToolbarFactory = options.inputToolbarFactory;
+    this._messageFooterRegistry = options.messageFooterRegistry;
   }
 
   /**
@@ -97,6 +99,7 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
     context.themeManager = this._themeManager;
     context.chatCommandRegistry = this._chatCommandRegistry;
     context.attachmentOpenerRegistry = this._attachmentOpenerRegistry;
+    context.messageFooterRegistry = this._messageFooterRegistry;
     if (this._inputToolbarFactory) {
       context.inputToolbarRegistry = this._inputToolbarFactory.create();
     }
@@ -111,6 +114,7 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
   private _chatCommandRegistry?: IChatCommandRegistry;
   private _attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
+  private _messageFooterRegistry?: IMessageFooterRegistry;
 }
 
 export namespace ChatWidgetFactory {
@@ -121,6 +125,7 @@ export namespace ChatWidgetFactory {
     chatCommandRegistry?: IChatCommandRegistry;
     attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
     inputToolbarRegistry?: IInputToolbarRegistry;
+    messageFooterRegistry?: IMessageFooterRegistry;
   }
 
   export interface IOptions<T extends LabChatPanel>
@@ -130,6 +135,7 @@ export namespace ChatWidgetFactory {
     chatCommandRegistry?: IChatCommandRegistry;
     attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
     inputToolbarFactory?: IInputToolbarRegistryFactory;
+    messageFooterRegistry?: IMessageFooterRegistry;
   }
 }
 

packages/jupyterlab-chat/src/widget.tsx

@@ -9,6 +9,7 @@ import {
   IChatCommandRegistry,
   IChatModel,
   IInputToolbarRegistry,
+  IMessageFooterRegistry,
   readIcon
 } from '@jupyter/chat';
 import { ICollaborativeDrive } from '@jupyter/collaborative-drive';
@@ -111,6 +112,7 @@ export class ChatPanel extends SidePanel {
     this._chatCommandRegistry = options.chatCommandRegistry;
     this._attachmentOpenerRegistry = options.attachmentOpenerRegistry;
     this._inputToolbarFactory = options.inputToolbarFactory;
+    this._messageFooterRegistry = options.messageFooterRegistry;
 
     const addChat = new CommandToolbarButton({
       commands: this._commands,
@@ -180,7 +182,8 @@ export class ChatPanel extends SidePanel {
       themeManager: this._themeManager,
       chatCommandRegistry: this._chatCommandRegistry,
       attachmentOpenerRegistry: this._attachmentOpenerRegistry,
-      inputToolbarRegistry
+      inputToolbarRegistry,
+      messageFooterRegistry: this._messageFooterRegistry
     });
 
     this.addWidget(
@@ -302,6 +305,7 @@ export class ChatPanel extends SidePanel {
   private _chatCommandRegistry?: IChatCommandRegistry;
   private _attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
+  private _messageFooterRegistry?: IMessageFooterRegistry;
 }
 
 /**
@@ -320,6 +324,7 @@ export namespace ChatPanel {
     chatCommandRegistry?: IChatCommandRegistry;
     attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
     inputToolbarFactory?: IInputToolbarRegistryFactory;
+    messageFooterRegistry?: IMessageFooterRegistry;
   }
 }