Input toolbar registry (#198)

* Input toolbar buttons only take the input model as prop

* Add an input toolbar registry that can be provided by extensions

* Fix doc example

* Update interface name

* Fix the custom toolbar sent to the chat component

* Add a toolbar registry with a token in jupyterlab-chat, to be able to replace it with an extension

* Add a simple test to modify the input toolbar of main area chat

* lint

* Removal of an unnecessary method in the input toolbar register

* Fix the test

Author: brichet

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

@@ -77,7 +77,11 @@ const plugin: JupyterFrontEndPlugin<void> = {
       shell: app.shell
     });
 
-    const model = new MyChatModel({ activeCellManager, selectionWatcher });
+    const model = new MyChatModel({
+      activeCellManager,
+      selectionWatcher,
+      documentManager: filebrowser?.model.manager
+    });
 
     // Update the settings when they change.
     function loadSetting(setting: ISettingRegistry.ISettings): void {
@@ -122,7 +126,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
       model,
       rmRegistry,
       themeManager,
-      documentManager: filebrowser?.model.manager,
       attachmentOpenerRegistry
     });
     app.shell.add(panel, 'left');

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

@@ -3,7 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { IDocumentManager } from '@jupyterlab/docmanager';
 import {
   Autocomplete,
   AutocompleteInputChangeReason,
@@ -17,16 +16,20 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { AttachmentPreviewList } from './attachments';
-import { AttachButton, CancelButton, SendButton } from './input';
+import {
+  IInputToolbarRegistry,
+  InputToolbarRegistry,
+  useChatCommands
+} from './input';
 import { IInputModel, InputModel } from '../input-model';
-import { IAttachment, Selection } from '../types';
-import { useChatCommands } from './input/use-chat-commands';
+import { IAttachment } from '../types';
 import { IChatCommandRegistry } from '../chat-commands';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
+const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
-  const { documentManager, model } = props;
+  const { model, toolbarRegistry } = props;
   const [input, setInput] = useState<string>(model.value);
   const inputRef = useRef<HTMLInputElement>();
 
@@ -38,14 +41,16 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const [attachments, setAttachments] = useState<IAttachment[]>(
     model.attachments
   );
+  const [toolbarElements, setToolbarElements] = useState<
+    InputToolbarRegistry.IToolbarItem[]
+  >([]);
 
-  // Display the include selection menu if it is not explicitly hidden, and if at least
-  // one of the tool to check for text or cell selection is enabled.
-  let hideIncludeSelection = props.hideIncludeSelection ?? false;
-  if (model.activeCellManager === null && model.selectionWatcher === null) {
-    hideIncludeSelection = true;
-  }
-
+  /**
+   * Handle the changes on the model that affect the input.
+   * - focus requested
+   * - config changed
+   * - attachments changed
+   */
   useEffect(() => {
     const inputChanged = (_: IInputModel, value: string) => {
       setInput(value);
@@ -76,6 +81,22 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     };
   }, [model]);
 
+  /**
+   * Handle the changes in the toolbar items.
+   */
+  useEffect(() => {
+    const updateToolbar = () => {
+      setToolbarElements(toolbarRegistry.getItems());
+    };
+
+    toolbarRegistry.itemsChanged.connect(updateToolbar);
+    updateToolbar();
+
+    return () => {
+      toolbarRegistry.itemsChanged.disconnect(updateToolbar);
+    };
+  }, [toolbarRegistry]);
+
   const inputExists = !!input.trim();
 
   /**
@@ -136,38 +157,12 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       (sendWithShiftEnter && event.shiftKey) ||
       (!sendWithShiftEnter && !event.shiftKey)
     ) {
-      onSend();
+      model.send(input);
       event.stopPropagation();
       event.preventDefault();
     }
   }
 
-  /**
-   * Triggered when sending the message.
-   *
-   * Add code block if cell or text is selected.
-   */
-  function onSend(selection?: Selection) {
-    let content = input;
-    if (selection) {
-      content += `
-
-\`\`\`
-${selection.source}
-\`\`\`
-`;
-    }
-    props.onSend(content);
-    model.value = '';
-  }
-
-  /**
-   * Triggered when cancelling edition.
-   */
-  function onCancel() {
-    props.onCancel?.();
-  }
-
   // Set the helper text based on whether Shift+Enter is used for sending.
   const helperText = sendWithShiftEnter ? (
     <span>
@@ -221,22 +216,10 @@ ${selection.source}
             InputProps={{
               ...params.InputProps,
               endAdornment: (
-                <InputAdornment position="end">
-                  {documentManager && model.addAttachment && (
-                    <AttachButton
-                      documentManager={documentManager}
-                      onAttach={model.addAttachment}
-                    />
-                  )}
-                  {props.onCancel && <CancelButton onCancel={onCancel} />}
-                  <SendButton
-                    model={model}
-                    sendWithShiftEnter={sendWithShiftEnter}
-                    inputExists={inputExists || attachments.length > 0}
-                    onSend={onSend}
-                    hideIncludeSelection={hideIncludeSelection}
-                    hasButtonOnLeft={!!props.onCancel}
-                  />
+                <InputAdornment position="end" className={INPUT_TOOLBAR_CLASS}>
+                  {toolbarElements.map(item => (
+                    <item.element model={model} />
+                  ))}
                 </InputAdornment>
               )
             }}
@@ -277,25 +260,17 @@ export namespace ChatInput {
      */
     model: IInputModel;
     /**
-     * The function to be called to send the message.
+     * The toolbar registry.
      */
-    onSend: (input: string) => unknown;
+    toolbarRegistry: IInputToolbarRegistry;
     /**
      * The function to be called to cancel editing.
      */
     onCancel?: () => unknown;
-    /**
-     * Whether to allow or not including selection.
-     */
-    hideIncludeSelection?: boolean;
     /**
      * Custom mui/material styles.
      */
     sx?: SxProps<Theme>;
-    /**
-     * The document manager.
-     */
-    documentManager?: IDocumentManager;
     /**
      * Chat command registry.
      */

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

@@ -4,7 +4,6 @@
  */
 
 import { Button } from '@jupyter/react-components';
-import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import {
   LabIcon,
@@ -19,6 +18,7 @@ import React, { useEffect, useState, useRef, forwardRef } from 'react';
 
 import { AttachmentPreviewList } from './attachments';
 import { ChatInput } from './chat-input';
+import { IInputToolbarRegistry } from './input';
 import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
 import { IChatCommandRegistry } from '../chat-commands';
@@ -41,10 +41,22 @@ const NAVIGATION_BOTTOM_CLASS = 'jp-chat-navigation-bottom';
  * The base components props.
  */
 type BaseMessageProps = {
+  /**
+   * The mime renderer registry.
+   */
   rmRegistry: IRenderMimeRegistry;
+  /**
+   * The chat model.
+   */
   model: IChatModel;
+  /**
+   * The chat commands registry.
+   */
   chatCommandRegistry?: IChatCommandRegistry;
-  documentManager?: IDocumentManager;
+  /**
+   * The input toolbar registry.
+   */
+  inputToolbarRegistry: IInputToolbarRegistry;
 };
 
 /**
@@ -200,8 +212,10 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
  * The message header props.
  */
 type ChatMessageHeaderProps = {
+  /**
+   * The chat message.
+   */
   message: IChatMessage;
-  sx?: SxProps<Theme>;
 };
 
 /**
@@ -262,8 +276,7 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
         '& > :not(:last-child)': {
           marginRight: 3
         },
-        marginBottom: message.stacked ? '0px' : '12px',
-        ...props.sx
+        marginBottom: message.stacked ? '0px' : '12px'
       }}
     >
       {avatar}
@@ -364,13 +377,15 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       if (edit && canEdit) {
         setInputModel(
           new InputModel({
+            onSend: (input: string, model?: IInputModel) =>
+              updateMessage(message.id, input, model),
+            onCancel: () => cancelEdition(),
             value: message.body,
-            activeCellManager: model.activeCellManager,
-            selectionWatcher: model.selectionWatcher,
             config: {
               sendWithShiftEnter: model.config.sendWithShiftEnter
             },
-            attachments: message.attachments
+            attachments: message.attachments,
+            documentManager: model.documentManager
           })
         );
       } else {
@@ -384,14 +399,18 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     };
 
     // Update the content of the message.
-    const updateMessage = (id: string, input: string): void => {
-      if (!canEdit) {
+    const updateMessage = (
+      id: string,
+      input: string,
+      inputModel?: IInputModel
+    ): void => {
+      if (!canEdit || !inputModel) {
         return;
       }
       // Update the message
       const updatedMessage = { ...message };
       updatedMessage.body = input;
-      updatedMessage.attachments = inputModel?.attachments;
+      updatedMessage.attachments = inputModel.attachments;
       model.updateMessage!(id, updatedMessage);
       setEdit(false);
     };
@@ -411,12 +430,10 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       <div ref={ref} data-index={props.index}>
         {edit && canEdit && inputModel ? (
           <ChatInput
-            onSend={(input: string) => updateMessage(message.id, input)}
             onCancel={() => cancelEdition()}
             model={inputModel}
-            hideIncludeSelection={true}
             chatCommandRegistry={props.chatCommandRegistry}
-            documentManager={props.documentManager}
+            toolbarRegistry={props.inputToolbarRegistry}
           />
         ) : (
           <MarkdownRenderer