@jupyter/chat 0.7.1 → 0.8.0

package/src/components/chat-input.tsx

@@ -3,10 +3,10 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
-
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import {
   Autocomplete,
+  AutocompleteInputChangeReason,
   Box,
   InputAdornment,
   SxProps,
@@ -14,29 +14,29 @@ import {
   Theme
 } from '@mui/material';
 import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
 
-import { CancelButton } from './input/cancel-button';
-import { SendButton } from './input/send-button';
-import { IChatModel } from '../model';
-import { IAutocompletionRegistry } from '../registry';
-import {
-  AutocompleteCommand,
-  IAutocompletionCommandsProps,
-  IConfig,
-  Selection
-} from '../types';
+import { AttachmentPreviewList } from './attachments';
+import { AttachButton, CancelButton, SendButton } from './input';
+import { IInputModel, InputModel } from '../input-model';
+import { IAttachment, Selection } from '../types';
+import { useChatCommands } from './input/use-chat-commands';
+import { IChatCommandRegistry } from '../chat-commands';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
-  const { autocompletionName, autocompletionRegistry, model } = props;
-  const autocompletion = useRef<IAutocompletionCommandsProps>();
-  const [input, setInput] = useState<string>(props.value || '');
+  const { documentManager, model } = props;
+  const [input, setInput] = useState<string>(model.value);
+  const inputRef = useRef<HTMLInputElement>();
+
+  const chatCommands = useChatCommands(model, props.chatCommandRegistry);
+
   const [sendWithShiftEnter, setSendWithShiftEnter] = useState<boolean>(
     model.config.sendWithShiftEnter ?? false
   );
-  const [typingNotification, setTypingNotification] = useState<boolean>(
-    model.config.sendTypingNotification ?? false
+  const [attachments, setAttachments] = useState<IAttachment[]>(
+    model.attachments
   );
 
   // Display the include selection menu if it is not explicitly hidden, and if at least
@@ -46,13 +46,14 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     hideIncludeSelection = true;
   }
 
-  // store reference to the input element to enable focusing it easily
-  const inputRef = useRef<HTMLInputElement>();
-
   useEffect(() => {
-    const configChanged = (_: IChatModel, config: IConfig) => {
+    const inputChanged = (_: IInputModel, value: string) => {
+      setInput(value);
+    };
+    model.valueChanged.connect(inputChanged);
+
+    const configChanged = (_: IInputModel, config: InputModel.IConfig) => {
       setSendWithShiftEnter(config.sendWithShiftEnter ?? false);
-      setTypingNotification(config.sendTypingNotification ?? false);
     };
     model.configChanged.connect(configChanged);
 
@@ -63,81 +64,66 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     };
     model.focusInputSignal?.connect(focusInputElement);
 
+    const attachmentChanged = (_: IInputModel, attachments: IAttachment[]) => {
+      setAttachments([...attachments]);
+    };
+    model.attachmentsChanged?.connect(attachmentChanged);
+
     return () => {
       model.configChanged?.disconnect(configChanged);
       model.focusInputSignal?.disconnect(focusInputElement);
+      model.attachmentsChanged?.disconnect(attachmentChanged);
     };
   }, [model]);
 
-  // The autocomplete commands options.
-  const [commandOptions, setCommandOptions] = useState<AutocompleteCommand[]>(
-    []
-  );
-  // whether any option is highlighted in the slash command autocomplete
-  const [highlighted, setHighlighted] = useState<boolean>(false);
-  // controls whether the slash command autocomplete is open
-  const [open, setOpen] = useState<boolean>(false);
-
   const inputExists = !!input.trim();
 
   /**
-   * Effect: fetch the list of available autocomplete commands.
-   */
-  useEffect(() => {
-    if (autocompletionRegistry === undefined) {
-      return;
-    }
-    autocompletion.current = autocompletionName
-      ? autocompletionRegistry.get(autocompletionName)
-      : autocompletionRegistry.getDefaultCompletion();
-
-    if (autocompletion.current === undefined) {
-      return;
-    }
-
-    if (Array.isArray(autocompletion.current.commands)) {
-      setCommandOptions(autocompletion.current.commands);
-    } else if (typeof autocompletion.current.commands === 'function') {
-      autocompletion.current
-        .commands()
-        .then((commands: AutocompleteCommand[]) => {
-          setCommandOptions(commands);
-        });
-    }
-  }, []);
-
-  /**
-   * Effect: Open the autocomplete when the user types the 'opener' string into an
-   * empty chat input. Close the autocomplete and reset the last selected value when
-   * the user clears the chat input.
+   * `handleKeyDown()`: callback invoked when the user presses any key in the
+   * `TextField` component. This is used to send the message when a user presses
+   * "Enter". This also handles many of the edge cases in the MUI Autocomplete
+   * component.
    */
-  useEffect(() => {
-    if (!autocompletion.current?.opener) {
-      return;
-    }
-
-    if (input === autocompletion.current?.opener) {
-      setOpen(true);
-      return;
-    }
-
-    if (input === '') {
-      setOpen(false);
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    /**
+     * IMPORTANT: This statement ensures that arrow keys can be used to navigate
+     * the multiline input when the chat commands menu is closed.
+     */
+    if (
+      ['ArrowDown', 'ArrowUp'].includes(event.key) &&
+      !chatCommands.menu.open
+    ) {
+      event.stopPropagation();
       return;
     }
-  }, [input]);
 
-  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    // remainder of this function only handles the "Enter" key.
     if (event.key !== 'Enter') {
       return;
     }
 
-    // Do not send the message if the user was selecting a suggested command from the
-    // Autocomplete component.
-    if (highlighted) {
+    /**
+     * IMPORTANT: This statement ensures that when the chat commands menu is
+     * open with a highlighted command, the "Enter" key should run that command
+     * instead of sending the message.
+     *
+     * This is done by returning early and letting the event propagate to the
+     * `Autocomplete` component.
+     */
+    if (chatCommands.menu.highlighted) {
       return;
     }
 
+    // remainder of this function only handles the "Enter" key pressed while the
+    // commands menu is closed.
+    /**
+     * IMPORTANT: This ensures that when the "Enter" key is pressed with the
+     * commands menu closed, the event is not propagated up to the
+     * `Autocomplete` component. Without this, `Autocomplete.onChange()` gets
+     * called with an invalid `string` instead of a `ChatCommand`.
+     */
+    event.stopPropagation();
+
     // Do not send empty messages, and avoid adding new line in empty message.
     if (!inputExists) {
       event.stopPropagation();
@@ -145,6 +131,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       return;
     }
 
+    // Finally, send the message when all other conditions are met.
     if (
       (sendWithShiftEnter && event.shiftKey) ||
       (!sendWithShiftEnter && !event.shiftKey)
@@ -171,15 +158,14 @@ ${selection.source}
 `;
     }
     props.onSend(content);
-    setInput('');
+    model.value = '';
   }
 
   /**
    * Triggered when cancelling edition.
    */
   function onCancel() {
-    setInput(props.value || '');
-    props.onCancel!();
+    props.onCancel?.();
   }
 
   // Set the helper text based on whether Shift+Enter is used for sending.
@@ -195,12 +181,12 @@ ${selection.source}
 
   return (
     <Box sx={props.sx} className={clsx(INPUT_BOX_CLASS)}>
+      <AttachmentPreviewList
+        attachments={attachments}
+        onRemove={model.removeAttachment}
+      />
       <Autocomplete
-        options={commandOptions}
-        value={props.value}
-        open={open}
-        autoHighlight
-        freeSolo
+        {...chatCommands.autocompleteProps}
         // ensure the autocomplete popup always renders on top
         componentsProps={{
           popper: {
@@ -228,15 +214,25 @@ ${selection.source}
             onKeyDown={handleKeyDown}
             placeholder="Start chatting"
             inputRef={inputRef}
+            sx={{ marginTop: '1px' }}
+            onSelect={() =>
+              (model.cursorIndex = inputRef.current?.selectionStart ?? null)
+            }
             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}
+                    inputExists={inputExists || attachments.length > 0}
                     onSend={onSend}
                     hideIncludeSelection={hideIncludeSelection}
                     hasButtonOnLeft={!!props.onCancel}
@@ -250,38 +246,19 @@ ${selection.source}
             helperText={input.length > 2 ? helperText : ' '}
           />
         )}
-        {...autocompletion.current?.props}
         inputValue={input}
-        onInputChange={(_, newValue: string) => {
-          setInput(newValue);
-          if (typingNotification && model.inputChanged) {
-            model.inputChanged(newValue);
+        onInputChange={(
+          _,
+          newValue: string,
+          reason: AutocompleteInputChangeReason
+        ) => {
+          // Do not update the value if the reason is 'reset', which should occur only
+          // if an autocompletion command has been selected. In this case, the value is
+          // set in the 'onChange()' callback of the autocompletion (to avoid conflicts).
+          if (reason !== 'reset') {
+            model.value = newValue;
           }
         }}
-        onHighlightChange={
-          /**
-           * On highlight change: set `highlighted` to whether an option is
-           * highlighted by the user.
-           *
-           * This isn't called when an option is selected for some reason, so we
-           * need to call `setHighlighted(false)` in `onClose()`.
-           */
-          (_, highlightedOption) => {
-            setHighlighted(!!highlightedOption);
-          }
-        }
-        onClose={
-          /**
-           * On close: set `highlighted` to `false` and close the popup by
-           * setting `open` to `false`.
-           */
-          () => {
-            setHighlighted(false);
-            setOpen(false);
-          }
-        }
-        // hide default extra right padding in the text field
-        disableClearable
       />
     </Box>
   );
@@ -298,11 +275,7 @@ export namespace ChatInput {
     /**
      * The chat model.
      */
-    model: IChatModel;
-    /**
-     * The initial value of the input (default to '')
-     */
-    value?: string;
+    model: IInputModel;
     /**
      * The function to be called to send the message.
      */
@@ -320,12 +293,12 @@ export namespace ChatInput {
      */
     sx?: SxProps<Theme>;
     /**
-     * Autocompletion properties.
+     * The document manager.
      */
-    autocompletionRegistry?: IAutocompletionRegistry;
+    documentManager?: IDocumentManager;
     /**
-     * Autocompletion name.
+     * Chat command registry.
      */
-    autocompletionName?: string;
+    chatCommandRegistry?: IChatCommandRegistry;
   }
 }

package/src/components/chat-messages.tsx

@@ -4,6 +4,7 @@
  */
 
 import { Button } from '@jupyter/react-components';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import {
   LabIcon,
@@ -16,9 +17,12 @@ import type { SxProps, Theme } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useState, useRef, forwardRef } from 'react';
 
+import { AttachmentPreviewList } from './attachments';
 import { ChatInput } from './chat-input';
 import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
+import { IChatCommandRegistry } from '../chat-commands';
+import { IInputModel, InputModel } from '../input-model';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
 
@@ -39,6 +43,8 @@ const NAVIGATION_BOTTOM_CLASS = 'jp-chat-navigation-bottom';
 type BaseMessageProps = {
   rmRegistry: IRenderMimeRegistry;
   model: IChatModel;
+  chatCommandRegistry?: IChatCommandRegistry;
+  documentManager?: IDocumentManager;
 };
 
 /**
@@ -337,6 +343,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     const [deleted, setDeleted] = useState<boolean>(false);
     const [canEdit, setCanEdit] = useState<boolean>(false);
     const [canDelete, setCanDelete] = useState<boolean>(false);
+    const [inputModel, setInputModel] = useState<IInputModel | null>(null);
 
     // Look if the message can be deleted or edited.
     useEffect(() => {
@@ -352,6 +359,25 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       }
     }, [model, message]);
 
+    // Create an input model only if the message is edited.
+    useEffect(() => {
+      if (edit && canEdit) {
+        setInputModel(
+          new InputModel({
+            value: message.body,
+            activeCellManager: model.activeCellManager,
+            selectionWatcher: model.selectionWatcher,
+            config: {
+              sendWithShiftEnter: model.config.sendWithShiftEnter
+            },
+            attachments: message.attachments
+          })
+        );
+      } else {
+        setInputModel(null);
+      }
+    }, [edit]);
+
     // Cancel the current edition of the message.
     const cancelEdition = (): void => {
       setEdit(false);
@@ -365,6 +391,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       // Update the message
       const updatedMessage = { ...message };
       updatedMessage.body = input;
+      updatedMessage.attachments = inputModel?.attachments;
       model.updateMessage!(id, updatedMessage);
       setEdit(false);
     };
@@ -382,13 +409,14 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       <div ref={ref} data-index={props.index}></div>
     ) : (
       <div ref={ref} data-index={props.index}>
-        {edit && canEdit ? (
+        {edit && canEdit && inputModel ? (
           <ChatInput
-            value={message.body}
             onSend={(input: string) => updateMessage(message.id, input)}
             onCancel={() => cancelEdition()}
-            model={model}
+            model={inputModel}
             hideIncludeSelection={true}
+            chatCommandRegistry={props.chatCommandRegistry}
+            documentManager={props.documentManager}
           />
         ) : (
           <MarkdownRenderer
@@ -400,6 +428,11 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
             rendered={props.renderedPromise}
           />
         )}
+        {message.attachments && !edit && (
+          // Display the attachments only if message is not edited, otherwise the
+          // input component display them.
+          <AttachmentPreviewList attachments={message.attachments} />
+        )}
       </div>
     );
   }

package/src/components/chat.tsx

@@ -4,6 +4,7 @@
  */
 
 import { IThemeManager } from '@jupyterlab/apputils';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -12,40 +13,42 @@ import { Box } from '@mui/system';
 import React, { useState } from 'react';
 
 import { JlThemeProvider } from './jl-theme-provider';
+import { IChatCommandRegistry } from '../chat-commands';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
+import { AttachmentOpenerContext } from '../context';
 import { IChatModel } from '../model';
-import { IAutocompletionRegistry } from '../registry';
+import { IAttachmentOpenerRegistry } from '../registry';
 
 export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
-  const {
-    model,
-    rmRegistry: renderMimeRegistry,
-    autocompletionRegistry
-  } = props;
-  // no need to append to messageGroups imperatively here. all of that is
-  // handled by the listeners registered in the effect hooks above.
+  const { model } = props;
   const onSend = async (input: string) => {
     // send message to backend
     model.sendMessage({ body: input });
   };
 
   return (
-    <>
-      <ChatMessages rmRegistry={renderMimeRegistry} model={model} />
+    <AttachmentOpenerContext.Provider value={props.attachmentOpenerRegistry}>
+      <ChatMessages
+        rmRegistry={props.rmRegistry}
+        model={model}
+        chatCommandRegistry={props.chatCommandRegistry}
+        documentManager={props.documentManager}
+      />
       <ChatInput
         onSend={onSend}
         sx={{
           paddingLeft: 4,
           paddingRight: 4,
-          paddingTop: 3.5,
+          paddingTop: 1,
           paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}
-        model={model}
-        autocompletionRegistry={autocompletionRegistry}
+        model={model.input}
+        documentManager={props.documentManager}
+        chatCommandRegistry={props.chatCommandRegistry}
       />
-    </>
+    </AttachmentOpenerContext.Provider>
   );
 }
 
@@ -90,7 +93,9 @@ export function Chat(props: Chat.IOptions): JSX.Element {
           <ChatBody
             model={props.model}
             rmRegistry={props.rmRegistry}
-            autocompletionRegistry={props.autocompletionRegistry}
+            documentManager={props.documentManager}
+            chatCommandRegistry={props.chatCommandRegistry}
+            attachmentOpenerRegistry={props.attachmentOpenerRegistry}
           />
         )}
         {view === Chat.View.settings && props.settingsPanel && (
@@ -118,13 +123,17 @@ export namespace Chat {
      */
     rmRegistry: IRenderMimeRegistry;
     /**
-     * Autocompletion registry.
+     * The document manager.
+     */
+    documentManager?: IDocumentManager;
+    /**
+     * Chat command registry.
      */
-    autocompletionRegistry?: IAutocompletionRegistry;
+    chatCommandRegistry?: IChatCommandRegistry;
     /**
-     * Autocompletion name.
+     * Attachment opener registry.
      */
-    autocompletionName?: string;
+    attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
   }
 
   /**

package/src/components/input/attach-button.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IDocumentManager } from '@jupyterlab/docmanager';
+import { FileDialog } from '@jupyterlab/filebrowser';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import React from 'react';
+
+import { TooltippedButton } from '../mui-extras/tooltipped-button';
+import { IAttachment } from '../../types';
+
+const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
+
+/**
+ * The attach button props.
+ */
+export type AttachButtonProps = {
+  documentManager: IDocumentManager;
+  onAttach: (attachment: IAttachment) => void;
+};
+
+/**
+ * The attach button.
+ */
+export function AttachButton(props: AttachButtonProps): JSX.Element {
+  const tooltip = 'Add attachment';
+
+  const onclick = async () => {
+    try {
+      const files = await FileDialog.getOpenFiles({
+        title: 'Select files to attach',
+        manager: props.documentManager
+      });
+      if (files.value) {
+        files.value.forEach(file => {
+          if (file.type !== 'directory') {
+            props.onAttach({ type: 'file', value: file.path });
+          }
+        });
+      }
+    } catch (e) {
+      console.warn('Error selecting files to attach', e);
+    }
+  };
+
+  return (
+    <TooltippedButton
+      onClick={onclick}
+      tooltip={tooltip}
+      buttonProps={{
+        size: 'small',
+        variant: 'contained',
+        title: tooltip,
+        className: ATTACH_BUTTON_CLASS
+      }}
+      sx={{
+        minWidth: 'unset',
+        padding: '4px',
+        borderRadius: '2px 0px 0px 2px',
+        marginRight: '1px'
+      }}
+    >
+      <AttachFileIcon />
+    </TooltippedButton>
+  );
+}

package/src/components/input/cancel-button.tsx

@@ -5,6 +5,7 @@
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import React from 'react';
+
 import { TooltippedButton } from '../mui-extras/tooltipped-button';
 
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';

package/src/components/input/index.ts

@@ -3,5 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+export * from './attach-button';
 export * from './cancel-button';
 export * from './send-button';

package/src/components/input/send-button.tsx

@@ -8,9 +8,9 @@ import SendIcon from '@mui/icons-material/Send';
 import { Box, Menu, MenuItem, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { IChatModel } from '../../model';
 import { TooltippedButton } from '../mui-extras/tooltipped-button';
 import { includeSelectionIcon } from '../../icons';
+import { IInputModel } from '../../input-model';
 import { Selection } from '../../types';
 
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
@@ -21,7 +21,7 @@ const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
  * The send button props.
  */
 export type SendButtonProps = {
-  model: IChatModel;
+  model: IInputModel;
   sendWithShiftEnter: boolean;
   inputExists: boolean;
   onSend: (selection?: Selection) => unknown;