@jupyter/chat 0.8.1 → 0.10.0

package/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 { IChatCommandRegistry } from '../chat-commands';
+import { IAttachment } from '../types';
 
 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>
               )
             }}
@@ -273,29 +256,21 @@ export namespace ChatInput {
    */
   export interface IProps {
     /**
-     * The chat model.
+     * The input model.
      */
     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.
      */

package/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,12 +18,14 @@ 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';
 import { IInputModel, InputModel } from '../input-model';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
+import { replaceSpanToMention } from '../utils';
 
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
@@ -41,10 +42,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 +213,10 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
  * The message header props.
  */
 type ChatMessageHeaderProps = {
+  /**
+   * The chat message.
+   */
   message: IChatMessage;
-  sx?: SxProps<Theme>;
 };
 
 /**
@@ -262,8 +277,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}
@@ -362,17 +376,27 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     // Create an input model only if the message is edited.
     useEffect(() => {
       if (edit && canEdit) {
-        setInputModel(
-          new InputModel({
-            value: message.body,
+        setInputModel(() => {
+          let body = message.body;
+          message.mentions?.forEach(user => {
+            body = replaceSpanToMention(body, user);
+          });
+          return new InputModel({
+            chatContext: model.createChatContext(),
+            onSend: (input: string, model?: IInputModel) =>
+              updateMessage(message.id, input, model),
+            onCancel: () => cancelEdition(),
+            value: body,
             activeCellManager: model.activeCellManager,
             selectionWatcher: model.selectionWatcher,
+            documentManager: model.documentManager,
             config: {
               sendWithShiftEnter: model.config.sendWithShiftEnter
             },
-            attachments: message.attachments
-          })
-        );
+            attachments: message.attachments,
+            mentions: message.mentions
+          });
+        });
       } else {
         setInputModel(null);
       }
@@ -384,14 +408,19 @@ 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;
+      updatedMessage.mentions = inputModel.mentions;
       model.updateMessage!(id, updatedMessage);
       setEdit(false);
     };
@@ -411,12 +440,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

package/src/components/chat.tsx

@@ -4,7 +4,6 @@
  */
 
 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';
@@ -16,16 +15,17 @@ import { JlThemeProvider } from './jl-theme-provider';
 import { IChatCommandRegistry } from '../chat-commands';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
+import { IInputToolbarRegistry, InputToolbarRegistry } from './input';
 import { AttachmentOpenerContext } from '../context';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry } from '../registry';
 
 export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
   const { model } = props;
-  const onSend = async (input: string) => {
-    // send message to backend
-    model.sendMessage({ body: input });
-  };
+  let { inputToolbarRegistry } = props;
+  if (!inputToolbarRegistry) {
+    inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
+  }
 
   return (
     <AttachmentOpenerContext.Provider value={props.attachmentOpenerRegistry}>
@@ -33,10 +33,9 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         rmRegistry={props.rmRegistry}
         model={model}
         chatCommandRegistry={props.chatCommandRegistry}
-        documentManager={props.documentManager}
+        inputToolbarRegistry={inputToolbarRegistry}
       />
       <ChatInput
-        onSend={onSend}
         sx={{
           paddingLeft: 4,
           paddingRight: 4,
@@ -45,8 +44,8 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
           borderTop: '1px solid var(--jp-border-color1)'
         }}
         model={model.input}
-        documentManager={props.documentManager}
         chatCommandRegistry={props.chatCommandRegistry}
+        toolbarRegistry={inputToolbarRegistry}
       />
     </AttachmentOpenerContext.Provider>
   );
@@ -89,15 +88,7 @@ export function Chat(props: Chat.IOptions): JSX.Element {
           )}
         </Box>
         {/* body */}
-        {view === Chat.View.chat && (
-          <ChatBody
-            model={props.model}
-            rmRegistry={props.rmRegistry}
-            documentManager={props.documentManager}
-            chatCommandRegistry={props.chatCommandRegistry}
-            attachmentOpenerRegistry={props.attachmentOpenerRegistry}
-          />
-        )}
+        {view === Chat.View.chat && <ChatBody {...props} />}
         {view === Chat.View.settings && props.settingsPanel && (
           <props.settingsPanel />
         )}
@@ -122,10 +113,6 @@ export namespace Chat {
      * The rendermime registry.
      */
     rmRegistry: IRenderMimeRegistry;
-    /**
-     * The document manager.
-     */
-    documentManager?: IDocumentManager;
     /**
      * Chat command registry.
      */
@@ -134,6 +121,10 @@ export namespace Chat {
      * Attachment opener registry.
      */
     attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
+    /**
+     * The input toolbar registry
+     */
+    inputToolbarRegistry?: IInputToolbarRegistry;
   }
 
   /**

package/src/components/code-blocks/copy-button.tsx

@@ -12,13 +12,15 @@ import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
 enum CopyStatus {
   None,
   Copying,
-  Copied
+  Copied,
+  Disabled
 }
 
 const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = {
   [CopyStatus.None]: 'Copy to clipboard',
   [CopyStatus.Copying]: 'Copying…',
-  [CopyStatus.Copied]: 'Copied!'
+  [CopyStatus.Copied]: 'Copied!',
+  [CopyStatus.Disabled]: 'Copy to clipboard disabled in insecure context'
 };
 
 type CopyButtonProps = {
@@ -27,7 +29,10 @@ type CopyButtonProps = {
 };
 
 export function CopyButton(props: CopyButtonProps): JSX.Element {
-  const [copyStatus, setCopyStatus] = useState<CopyStatus>(CopyStatus.None);
+  const isCopyDisabled = navigator.clipboard === undefined;
+  const [copyStatus, setCopyStatus] = useState<CopyStatus>(
+    isCopyDisabled ? CopyStatus.Disabled : CopyStatus.None
+  );
   const timeoutId = useRef<number | null>(null);
 
   const copy = useCallback(async () => {
@@ -56,6 +61,7 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
 
   return (
     <TooltippedIconButton
+      disabled={isCopyDisabled}
       className={props.className}
       tooltip={COPYBTN_TEXT_BY_STATUS[copyStatus]}
       placement="top"

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

@@ -3,40 +3,41 @@
  * 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';
+import { InputToolbarRegistry } from '../toolbar-registry';
+import { TooltippedButton } from '../../mui-extras/tooltipped-button';
 
 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 {
+export function AttachButton(
+  props: InputToolbarRegistry.IToolbarItemProps
+): JSX.Element {
+  const { model } = props;
   const tooltip = 'Add attachment';
 
+  if (!model.documentManager || !model.addAttachment) {
+    return <></>;
+  }
+
   const onclick = async () => {
+    if (!model.documentManager || !model.addAttachment) {
+      return;
+    }
     try {
       const files = await FileDialog.getOpenFiles({
         title: 'Select files to attach',
-        manager: props.documentManager
+        manager: model.documentManager
       });
       if (files.value) {
         files.value.forEach(file => {
           if (file.type !== 'directory') {
-            props.onAttach({ type: 'file', value: file.path });
+            model.addAttachment?.({ type: 'file', value: file.path });
           }
         });
       }
@@ -55,12 +56,6 @@ export function AttachButton(props: AttachButtonProps): JSX.Element {
         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 → buttons/cancel-button.tsx}

@@ -6,25 +6,24 @@
 import CancelIcon from '@mui/icons-material/Cancel';
 import React from 'react';
 
-import { TooltippedButton } from '../mui-extras/tooltipped-button';
+import { InputToolbarRegistry } from '../toolbar-registry';
+import { TooltippedButton } from '../../mui-extras/tooltipped-button';
 
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 
-/**
- * The cancel button props.
- */
-export type CancelButtonProps = {
-  onCancel: () => void;
-};
-
 /**
  * The cancel button.
  */
-export function CancelButton(props: CancelButtonProps): JSX.Element {
+export function CancelButton(
+  props: InputToolbarRegistry.IToolbarItemProps
+): JSX.Element {
+  if (!props.model.cancel) {
+    return <></>;
+  }
   const tooltip = 'Cancel edition';
   return (
     <TooltippedButton
-      onClick={props.onCancel}
+      onClick={props.model.cancel}
       tooltip={tooltip}
       buttonProps={{
         size: 'small',
@@ -32,12 +31,6 @@ export function CancelButton(props: CancelButtonProps): JSX.Element {
         title: tooltip,
         className: CANCEL_BUTTON_CLASS
       }}
-      sx={{
-        minWidth: 'unset',
-        padding: '4px',
-        borderRadius: '2px 0px 0px 2px',
-        marginRight: '1px'
-      }}
     >
       <CancelIcon />
     </TooltippedButton>

package/src/components/input/buttons/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export { AttachButton } from './attach-button';
+export { CancelButton } from './cancel-button';
+export { SendButton } from './send-button';