@jupyter/chat 0.8.0 → 0.9.0

package/src/components/input/{send-button.tsx → buttons/send-button.tsx}

@@ -8,36 +8,29 @@ import SendIcon from '@mui/icons-material/Send';
 import { Box, Menu, MenuItem, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { TooltippedButton } from '../mui-extras/tooltipped-button';
-import { includeSelectionIcon } from '../../icons';
-import { IInputModel } from '../../input-model';
-import { Selection } from '../../types';
+import { InputToolbarRegistry } from '../toolbar-registry';
+import { TooltippedButton } from '../../mui-extras/tooltipped-button';
+import { includeSelectionIcon } from '../../../icons';
+import { IInputModel, InputModel } from '../../../input-model';
 
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
 const SEND_INCLUDE_OPENER_CLASS = 'jp-chat-send-include-opener';
 const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
 
-/**
- * The send button props.
- */
-export type SendButtonProps = {
-  model: IInputModel;
-  sendWithShiftEnter: boolean;
-  inputExists: boolean;
-  onSend: (selection?: Selection) => unknown;
-  hideIncludeSelection?: boolean;
-  hasButtonOnLeft?: boolean;
-};
-
 /**
  * The send button, with optional 'include selection' menu.
  */
-export function SendButton(props: SendButtonProps): JSX.Element {
-  const { activeCellManager, selectionWatcher } = props.model;
-  const hideIncludeSelection = props.hideIncludeSelection ?? false;
-  const hasButtonOnLeft = props.hasButtonOnLeft ?? false;
+export function SendButton(
+  props: InputToolbarRegistry.IToolbarItemProps
+): JSX.Element {
+  const { model } = props;
+  const { activeCellManager, selectionWatcher } = model;
+  const hideIncludeSelection = !activeCellManager || !selectionWatcher;
+
   const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+  const [tooltip, setTooltip] = useState<string>('');
 
   const openMenu = useCallback((el: HTMLElement | null) => {
     setMenuAnchorEl(el);
@@ -48,11 +41,36 @@ export function SendButton(props: SendButtonProps): JSX.Element {
     setMenuOpen(false);
   }, []);
 
-  const disabled = !props.inputExists;
-
   const [selectionTooltip, setSelectionTooltip] = useState<string>('');
   const [disableInclude, setDisableInclude] = useState<boolean>(true);
 
+  useEffect(() => {
+    const inputChanged = () => {
+      const inputExist = !!model.value.trim() || model.attachments.length;
+      setDisabled(!inputExist);
+    };
+
+    model.valueChanged.connect(inputChanged);
+    model.attachmentsChanged?.connect(inputChanged);
+
+    inputChanged();
+
+    const configChanged = (_: IInputModel, config: InputModel.IConfig) => {
+      setTooltip(
+        (config.sendWithShiftEnter ?? false)
+          ? 'Send message (SHIFT+ENTER)'
+          : 'Send message (ENTER)'
+      );
+    };
+    model.configChanged.connect(configChanged);
+
+    return () => {
+      model.valueChanged.disconnect(inputChanged);
+      model.attachmentsChanged?.disconnect(inputChanged);
+      model.configChanged?.disconnect(configChanged);
+    };
+  }, [model]);
+
   useEffect(() => {
     /**
      * Enable or disable the include selection button, and adapt the tooltip.
@@ -78,55 +96,44 @@ export function SendButton(props: SendButtonProps): JSX.Element {
       selectionWatcher?.selectionChanged.disconnect(toggleIncludeState);
       activeCellManager?.availabilityChanged.disconnect(toggleIncludeState);
     };
-  }, [activeCellManager, selectionWatcher, hideIncludeSelection]);
-
-  const defaultTooltip = props.sendWithShiftEnter
-    ? 'Send message (SHIFT+ENTER)'
-    : 'Send message (ENTER)';
-  const tooltip = defaultTooltip;
+  }, [activeCellManager, selectionWatcher]);
 
   function sendWithSelection() {
-    // Append the selected text if exists.
+    let source = '';
+
     if (selectionWatcher?.selection) {
-      props.onSend({
-        type: 'text',
-        source: selectionWatcher.selection.text
-      });
-      closeMenu();
-      return;
+      // Append the selected text if exists.
+      source = selectionWatcher.selection.text;
+    } else if (activeCellManager?.available) {
+      // Append the active cell content if exists.
+      source = activeCellManager.getContent(false)!.source;
     }
+    let content = model.value;
+    if (source) {
+      content += `
 
-    // Append the active cell content if exists.
-    if (activeCellManager?.available) {
-      props.onSend({
-        type: 'cell',
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        source: activeCellManager.getContent(false)!.source
-      });
-      closeMenu();
-      return;
+\`\`\`
+${source}
+\`\`\`
+`;
     }
+    model.send(content);
+    closeMenu();
+    model.value = '';
   }
 
   return (
-    <Box sx={{ display: 'flex', flexWrap: 'nowrap' }}>
+    <>
       <TooltippedButton
-        onClick={() => props.onSend()}
+        onClick={() => model.send(model.value)}
         disabled={disabled}
         tooltip={tooltip}
         buttonProps={{
           size: 'small',
-          title: defaultTooltip,
+          title: tooltip,
           variant: 'contained',
           className: SEND_BUTTON_CLASS
         }}
-        sx={{
-          minWidth: 'unset',
-          borderTopLeftRadius: hasButtonOnLeft ? '0px' : '2px',
-          borderTopRightRadius: hideIncludeSelection ? '2px' : '0px',
-          borderBottomRightRadius: hideIncludeSelection ? '2px' : '0px',
-          borderBottomLeftRadius: hasButtonOnLeft ? '0px' : '2px'
-        }}
       >
         <SendIcon />
       </TooltippedButton>
@@ -151,12 +158,6 @@ export function SendButton(props: SendButtonProps): JSX.Element {
               },
               className: SEND_INCLUDE_OPENER_CLASS
             }}
-            sx={{
-              minWidth: 'unset',
-              padding: '4px 0px',
-              borderRadius: '0px 2px 2px 0px',
-              marginLeft: '1px'
-            }}
           >
             <KeyboardArrowDown />
           </TooltippedButton>
@@ -205,6 +206,6 @@ export function SendButton(props: SendButtonProps): JSX.Element {
           </Menu>
         </>
       )}
-    </Box>
+    </>
   );
 }

package/src/components/input/index.ts

@@ -3,6 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-export * from './attach-button';
-export * from './cancel-button';
-export * from './send-button';
+export * from './buttons';
+export * from './toolbar-registry';
+export * from './use-chat-commands';

package/src/components/input/toolbar-registry.tsx

@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import * as React from 'react';
+
+import { AttachButton, CancelButton, SendButton } from './buttons';
+import { IInputModel } from '../../input-model';
+import { ISignal, Signal } from '@lumino/signaling';
+
+/**
+ * The toolbar registry interface.
+ */
+export interface IInputToolbarRegistry {
+  /**
+   * A signal emitting when the items has changed.
+   */
+  readonly itemsChanged: ISignal<IInputToolbarRegistry, void>;
+  /**
+   * Get a toolbar item.
+   */
+  get(name: string): InputToolbarRegistry.IToolbarItem | undefined;
+
+  /**
+   * Get the list of the visible toolbar items in order.
+   */
+  getItems(): InputToolbarRegistry.IToolbarItem[];
+
+  /**
+   * Add a toolbar item.
+   */
+  addItem(name: string, item: InputToolbarRegistry.IToolbarItem): void;
+
+  /**
+   * Hide an element.
+   */
+  hide(name: string): void;
+
+  /**
+   * Show an element.
+   */
+  show(name: string): void;
+}
+
+/**
+ * The toolbar registry implementation.
+ */
+export class InputToolbarRegistry implements IInputToolbarRegistry {
+  /**
+   * A signal emitting when the items has changed.
+   */
+  get itemsChanged(): ISignal<IInputToolbarRegistry, void> {
+    return this._itemsChanged;
+  }
+
+  /**
+   * Get a toolbar item.
+   */
+  get(name: string): InputToolbarRegistry.IToolbarItem | undefined {
+    return this._items.get(name);
+  }
+
+  /**
+   * Get the list of the visible toolbar items in order.
+   */
+  getItems(): InputToolbarRegistry.IToolbarItem[] {
+    return Array.from(this._items.values())
+      .filter(item => !item.hidden)
+      .sort((a, b) => a.position - b.position);
+  }
+
+  /**
+   * Add a toolbar item.
+   */
+  addItem(name: string, item: InputToolbarRegistry.IToolbarItem): void {
+    if (!this._items.has(name)) {
+      this._items.set(name, item);
+      this._itemsChanged.emit();
+    } else {
+      console.warn(`A chat input toolbar item '${name}' is already registered`);
+    }
+  }
+
+  /**
+   * Hide an element.
+   */
+  hide(name: string): void {
+    const item = this._items.get(name);
+    if (item) {
+      item.hidden = true;
+      this._itemsChanged.emit();
+    }
+  }
+
+  /**
+   * Show an element.
+   */
+  show(name: string): void {
+    const item = this._items.get(name);
+    if (item) {
+      item.hidden = false;
+      this._itemsChanged.emit();
+    }
+  }
+
+  private _items = new Map<string, InputToolbarRegistry.IToolbarItem>();
+  private _itemsChanged = new Signal<this, void>(this);
+}
+
+export namespace InputToolbarRegistry {
+  /**
+   * The toolbar item interface.
+   */
+  export interface IToolbarItem {
+    /**
+     * The react functional component with the button.
+     *
+     * NOTE:
+     * This component must be a TooltippedButton for a good integration in the toolbar.
+     */
+    element: React.FunctionComponent<IToolbarItemProps>;
+    /**
+     * The position of the button in the toolbar.
+     */
+    position: number;
+    /**
+     * Whether the button is hidden or not.
+     */
+    hidden?: boolean;
+  }
+
+  /**
+   * The toolbar item properties, send to the button.
+   */
+  export interface IToolbarItemProps {
+    /**
+     * The input model of the input component including the button.
+     */
+    model: IInputModel;
+  }
+
+  /**
+   * The default toolbar registry if none is provided.
+   */
+  export function defaultToolbarRegistry(): InputToolbarRegistry {
+    const registry = new InputToolbarRegistry();
+
+    registry.addItem('send', {
+      element: SendButton,
+      position: 100
+    });
+    registry.addItem('attach', {
+      element: AttachButton,
+      position: 20
+    });
+    registry.addItem('cancel', {
+      element: CancelButton,
+      position: 10
+    });
+    return registry;
+  }
+}

package/src/components/input/use-chat-commands.tsx

@@ -144,8 +144,14 @@ export function useChatCommands(
           <Box key={key} component="li" {...listItemProps}>
             {commandIcon}
             <p className="jp-chat-command-name">{command.name}</p>
-            <span> - </span>
-            <p className="jp-chat-command-description">{command.description}</p>
+            {command.description && (
+              <>
+                <span> - </span>
+                <p className="jp-chat-command-description">
+                  {command.description}
+                </p>
+              </>
+            )}
           </Box>
         );
       },

package/src/components/mui-extras/tooltipped-button.tsx

@@ -3,11 +3,13 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React from 'react';
 import { Button, ButtonProps, SxProps, TooltipProps } from '@mui/material';
+import React from 'react';
 
 import { ContrastingTooltip } from './contrasting-tooltip';
 
+const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
+
 export type TooltippedButtonProps = {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   tooltip: string;
@@ -72,7 +74,7 @@ export function TooltippedButton(props: TooltippedButtonProps): JSX.Element {
 
         See: https://mui.com/material-ui/react-tooltip/#disabled-elements
       */}
-      <span style={{ cursor: 'default' }}>
+      <span style={{ cursor: 'default' }} className={TOOLTIPPED_WRAP_CLASS}>
         <Button
           {...props.buttonProps}
           onClick={props.onClick}

package/src/components/mui-extras/tooltipped-icon-button.tsx

@@ -3,11 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React from 'react';
+import { classes } from '@jupyterlab/ui-components';
 import { IconButton, IconButtonProps, TooltipProps } from '@mui/material';
+import React from 'react';
 
 import { ContrastingTooltip } from './contrasting-tooltip';
 
+const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
+
 export type TooltippedIconButtonProps = {
   onClick: () => unknown;
   tooltip: string;
@@ -68,7 +71,7 @@ export function TooltippedIconButton(
 
         See: https://mui.com/material-ui/react-tooltip/#disabled-elements
       */}
-      <span className={props.className}>
+      <span className={classes(props.className, TOOLTIPPED_WRAP_CLASS)}>
         <IconButton
           {...props.iconButtonProps}
           onClick={props.onClick}

package/src/input-model.ts

@@ -8,6 +8,7 @@ import { ISignal, Signal } from '@lumino/signaling';
 import { IActiveCellManager } from './active-cell-manager';
 import { ISelectionWatcher } from './selection-watcher';
 import { IAttachment } from './types';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 
 const WHITESPACE = new Set([' ', '\n', '\t']);
 
@@ -15,6 +16,16 @@ const WHITESPACE = new Set([' ', '\n', '\t']);
  * The chat input interface.
  */
 export interface IInputModel extends IDisposable {
+  /**
+   * Function to send a message.
+   */
+  send: (content: string) => void;
+
+  /**
+   * Optional function to cancel edition.
+   */
+  cancel: (() => void) | undefined;
+
   /**
    * The entire input value.
    */
@@ -56,6 +67,11 @@ export interface IInputModel extends IDisposable {
    */
   readonly selectionWatcher: ISelectionWatcher | null;
 
+  /**
+   * Get the document manager.
+   */
+  readonly documentManager: IDocumentManager | null;
+
   /**
    * The input configuration.
    */
@@ -112,17 +128,32 @@ export interface IInputModel extends IDisposable {
  */
 export class InputModel implements IInputModel {
   constructor(options: InputModel.IOptions) {
+    this._onSend = options.onSend;
     this._value = options.value || '';
     this._attachments = options.attachments || [];
     this.cursorIndex = options.cursorIndex || this.value.length;
     this._activeCellManager = options.activeCellManager ?? null;
     this._selectionWatcher = options.selectionWatcher ?? null;
-
+    this._documentManager = options.documentManager ?? null;
     this._config = {
       ...options.config
     };
+    this.cancel = options.onCancel;
   }
 
+  /**
+   * Function to send a message.
+   */
+  send = (input: string): void => {
+    this._onSend(input, this);
+    this.value = '';
+  };
+
+  /**
+   * Optional function to cancel edition.
+   */
+  cancel: (() => void) | undefined;
+
   /**
    * The entire input value.
    */
@@ -199,6 +230,13 @@ export class InputModel implements IInputModel {
     return this._selectionWatcher;
   }
 
+  /**
+   * Get the document manager.
+   */
+  get documentManager(): IDocumentManager | null {
+    return this._documentManager;
+  }
+
   /**
    * The input configuration.
    */
@@ -314,12 +352,14 @@ export class InputModel implements IInputModel {
     return this._isDisposed;
   }
 
+  private _onSend: (input: string, model?: InputModel) => void;
   private _value: string;
   private _cursorIndex: number | null = null;
   private _currentWord: string | null = null;
   private _attachments: IAttachment[];
   private _activeCellManager: IActiveCellManager | null;
   private _selectionWatcher: ISelectionWatcher | null;
+  private _documentManager: IDocumentManager | null;
   private _config: InputModel.IConfig;
   private _valueChanged = new Signal<IInputModel, string>(this);
   private _cursorIndexChanged = new Signal<IInputModel, number | null>(this);
@@ -332,6 +372,18 @@ export class InputModel implements IInputModel {
 
 export namespace InputModel {
   export interface IOptions {
+    /**
+     * The function that should send the message.
+     * @param content - the content of the message.
+     * @param model - the model of the input sending the message.
+     */
+    onSend: (content: string, model?: InputModel) => void;
+
+    /**
+     * Function that should cancel the message edition.
+     */
+    onCancel?: () => void;
+
     /**
      * The initial value of the input.
      */
@@ -362,6 +414,11 @@ export namespace InputModel {
      * Selection watcher.
      */
     selectionWatcher?: ISelectionWatcher | null;
+
+    /**
+     * Document manager.
+     */
+    documentManager?: IDocumentManager | null;
   }
 
   export interface IConfig {

package/src/model.ts

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal, Signal } from '@lumino/signaling';
@@ -67,6 +68,11 @@ export interface IChatModel extends IDisposable {
    */
   readonly selectionWatcher: ISelectionWatcher | null;
 
+  /**
+   * Get the selection watcher.
+   */
+  readonly documentManager: IDocumentManager | null;
+
   /**
    * A signal emitting when the messages list is updated.
    */
@@ -101,6 +107,11 @@ export interface IChatModel extends IDisposable {
    */
   sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
 
+  /**
+   * Clear the message list.
+   */
+  clearMessages(): void;
+
   /**
    * Optional, to update a message from the chat panel.
    *
@@ -189,16 +200,18 @@ export class ChatModel implements IChatModel {
     this._inputModel = new InputModel({
       activeCellManager: options.activeCellManager,
       selectionWatcher: options.selectionWatcher,
+      documentManager: options.documentManager,
       config: {
         sendWithShiftEnter: config.sendWithShiftEnter
-      }
+      },
+      onSend: (input: string) => this.sendMessage({ body: input })
     });
 
     this._commands = options.commands;
 
     this._activeCellManager = options.activeCellManager ?? null;
-
     this._selectionWatcher = options.selectionWatcher ?? null;
+    this._documentManager = options.documentManager ?? null;
   }
 
   /**
@@ -249,6 +262,13 @@ export class ChatModel implements IChatModel {
     return this._selectionWatcher;
   }
 
+  /**
+   * Get the document manager.
+   */
+  get documentManager(): IDocumentManager | null {
+    return this._documentManager;
+  }
+
   /**
    * Timestamp of the last read message in local storage.
    */
@@ -403,6 +423,14 @@ export class ChatModel implements IChatModel {
    */
   sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void {}
 
+  /**
+   * Clear the message list.
+   */
+  clearMessages(): void {
+    this._messages = [];
+    this._messagesUpdated.emit();
+  }
+
   /**
    * Dispose the chat model.
    */
@@ -569,6 +597,7 @@ export class ChatModel implements IChatModel {
   private _commands?: CommandRegistry;
   private _activeCellManager: IActiveCellManager | null;
   private _selectionWatcher: ISelectionWatcher | null;
+  private _documentManager: IDocumentManager | null;
   private _notificationId: string | null = null;
   private _messagesUpdated = new Signal<IChatModel, void>(this);
   private _configChanged = new Signal<IChatModel, IConfig>(this);
@@ -609,5 +638,10 @@ export namespace ChatModel {
      * Selection watcher.
      */
     selectionWatcher?: ISelectionWatcher | null;
+
+    /**
+     * Document manager.
+     */
+    documentManager?: IDocumentManager | null;
   }
 }

package/src/types.ts

@@ -94,24 +94,3 @@ export interface IAttachment {
  * An empty interface to describe optional settings that could be fetched from server.
  */
 export interface ISettings {} /* eslint-disable-line @typescript-eslint/no-empty-object-type */
-
-/**
- * Representation of a selected text.
- */
-export type TextSelection = {
-  type: 'text';
-  source: string;
-};
-
-/**
- * Representation of a selected cell.
- */
-export type CellSelection = {
-  type: 'cell';
-  source: string;
-};
-
-/**
- * Selection object (text or cell).
- */
-export type Selection = TextSelection | CellSelection;