@jupyter/chat 0.13.0 → 0.14.0

package/lib/{footers/registry.d.ts → registers/footers.d.ts}

@@ -1,5 +1,11 @@
+/// <reference types="react" />
 import { Token } from '@lumino/coreutils';
-import { MessageFooter, MessageFooterSection } from './types';
+import { IChatModel } from '../model';
+import { IChatMessage } from '../types';
+/**
+ * The token providing the chat footer registry.
+ */
+export declare const IMessageFooterRegistry: Token<IMessageFooterRegistry>;
 /**
  * The interface of a registry to provide chat footer.
  */
@@ -15,6 +21,29 @@ export interface IMessageFooterRegistry {
      */
     addSection(section: MessageFooterSection): void;
 }
+/**
+ * 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;
+};
 /**
  * The default implementation of the message footer registry.
  */
@@ -30,7 +59,3 @@ export declare class MessageFooterRegistry implements IMessageFooterRegistry {
     addSection(footer: MessageFooterSection): void;
     private _footers;
 }
-/**
- * The token providing the chat footer registry.
- */
-export declare const IMessageFooterRegistry: Token<IMessageFooterRegistry>;

package/lib/registers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './attachment-openers';
+export * from './chat-commands';
+export * from './footers';

package/lib/{footers → registers}/index.js

@@ -2,5 +2,6 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './registry';
-export * from './types';
+export * from './attachment-openers';
+export * from './chat-commands';
+export * from './footers';

package/lib/selection-watcher.d.ts

@@ -1,5 +1,6 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { CodeEditor } from '@jupyterlab/codeeditor';
+import { IEditorLanguageRegistry } from '@jupyterlab/codemirror';
 import { Widget } from '@lumino/widgets';
 import { ISignal, Signal } from '@lumino/signaling';
 /**
@@ -14,6 +15,10 @@ export declare namespace SelectionWatcher {
          * The current shell of the application.
          */
         shell: JupyterFrontEnd.IShell;
+        /**
+         * Editor language registry.
+         */
+        languages?: IEditorLanguageRegistry;
     }
     /**
      * The selection type.
@@ -31,6 +36,10 @@ export declare namespace SelectionWatcher {
          * The ID of the document widget in which the selection was made.
          */
         widgetId: string;
+        /**
+         * The language of the selection.
+         */
+        language?: string;
         /**
          * The ID of the cell in which the selection was made, if the original widget
          * was a notebook.
@@ -54,9 +63,10 @@ export declare class SelectionWatcher {
     get selection(): SelectionWatcher.Selection | null;
     get selectionChanged(): ISignal<this, SelectionWatcher.Selection | null>;
     replaceSelection(selection: SelectionWatcher.Selection): void;
-    protected _poll(): void;
+    protected _poll(): Promise<void>;
     protected _shell: JupyterFrontEnd.IShell;
     protected _mainAreaDocumentWidget: Widget | null;
     protected _selection: SelectionWatcher.Selection | null;
     protected _selectionChanged: Signal<this, SelectionWatcher.Selection | null>;
+    private _languages;
 }

package/lib/selection-watcher.js

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { DocumentWidget } from '@jupyterlab/docregistry';
+import { EditorLanguageRegistry } from '@jupyterlab/codemirror';
 import { Notebook } from '@jupyterlab/notebook';
 import { find } from '@lumino/algorithm';
 import { Signal } from '@lumino/signaling';
@@ -17,6 +18,7 @@ export class SelectionWatcher {
         this._selection = null;
         this._selectionChanged = new Signal(this);
         this._shell = options.shell;
+        this._languages = options.languages || new EditorLanguageRegistry();
         (_a = this._shell.currentChanged) === null || _a === void 0 ? void 0 : _a.connect((sender, args) => {
             var _a;
             // Do not change the main area widget if the new one has no editor, for example
@@ -76,13 +78,13 @@ export class SelectionWatcher {
         const newPosition = editor.getPositionAt(editor.getOffsetAt(selection.start) + selection.text.length);
         editor.setSelection({ start: newPosition, end: newPosition });
     }
-    _poll() {
+    async _poll() {
         var _a;
         let currSelection = null;
         const prevSelection = this._selection;
         // Do not return selected text if the main area widget is hidden.
         if ((_a = this._mainAreaDocumentWidget) === null || _a === void 0 ? void 0 : _a.isVisible) {
-            currSelection = getTextSelection(this._mainAreaDocumentWidget);
+            currSelection = await getTextSelection(this._mainAreaDocumentWidget, this._languages);
         }
         if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.text) !== (currSelection === null || currSelection === void 0 ? void 0 : currSelection.text)) {
             this._selection = currSelection;
@@ -93,8 +95,8 @@ export class SelectionWatcher {
 /**
  * Gets a Selection object from a document widget. Returns `null` if unable.
  */
-function getTextSelection(widget) {
-    var _a;
+async function getTextSelection(widget, languages) {
+    var _a, _b;
     const editor = getEditor(widget);
     // widget type check is redundant but hints the type to TypeScript
     if (!editor || !(widget instanceof DocumentWidget)) {
@@ -120,6 +122,7 @@ function getTextSelection(widget) {
     if (startOffset > endOffset) {
         [start, end] = [end, start];
     }
+    const language = (_b = (await languages.getLanguage(editor === null || editor === void 0 ? void 0 : editor.model.mimeType))) === null || _b === void 0 ? void 0 : _b.name;
     return {
         ...selectionObj,
         start,
@@ -127,6 +130,9 @@ function getTextSelection(widget) {
         text,
         numLines: text.split('\n').length,
         widgetId: widget.id,
+        ...(language && {
+            language
+        }),
         ...(cellId && {
             cellId
         })

package/lib/widgets/index.d.ts

@@ -0,0 +1,3 @@
+export * from './chat-error';
+export * from './chat-sidebar';
+export * from './chat-widget';

package/lib/{chat-commands → widgets}/index.js

@@ -2,5 +2,6 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './types';
-export * from './registry';
+export * from './chat-error';
+export * from './chat-sidebar';
+export * from './chat-widget';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -48,6 +48,8 @@
     "@jupyter/react-components": "^0.15.2",
     "@jupyterlab/application": "^4.2.0",
     "@jupyterlab/apputils": "^4.3.0",
+    "@jupyterlab/codeeditor": "^4.2.0",
+    "@jupyterlab/codemirror": "^4.2.0",
     "@jupyterlab/docmanager": "^4.2.0",
     "@jupyterlab/filebrowser": "^4.2.0",
     "@jupyterlab/fileeditor": "^4.2.0",

package/src/active-cell-manager.ts

@@ -13,11 +13,13 @@ import { ISignal, Signal } from '@lumino/signaling';
 type CellContent = {
   type: string;
   source: string;
+  language?: string;
 };
 
 type CellWithErrorContent = {
   type: 'code';
   source: string;
+  language?: string;
   error: {
     name: string;
     value: string;
@@ -148,6 +150,11 @@ export class ActiveCellManager implements IActiveCellManager {
   getContent(withError: true): CellWithErrorContent | null;
   getContent(withError = false): CellContent | CellWithErrorContent | null {
     const sharedModel = this._notebookTracker.activeCell?.model.sharedModel;
+    const language =
+      sharedModel?.cell_type === 'code'
+        ? this._notebookTracker.currentWidget?.model?.defaultKernelLanguage
+        : undefined;
+
     if (!sharedModel) {
       return null;
     }
@@ -156,7 +163,8 @@ export class ActiveCellManager implements IActiveCellManager {
     if (!withError) {
       return {
         type: sharedModel.cell_type,
-        source: sharedModel.getSource()
+        source: sharedModel.getSource(),
+        language
       };
     }
 
@@ -166,6 +174,7 @@ export class ActiveCellManager implements IActiveCellManager {
       return {
         type: 'code',
         source: sharedModel.getSource(),
+        language,
         error: {
           name: error.ename,
           value: error.evalue,

package/src/components/avatar.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Avatar as MuiAvatar, Typography } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+import React from 'react';
+
+import { IUser } from '../types';
+
+/**
+ * The avatar props.
+ */
+type AvatarProps = {
+  /**
+   * The user to display an avatar.
+   */
+  user: IUser;
+  /**
+   * Whether the avatar should be small.
+   */
+  small?: boolean;
+};
+
+/**
+ * The avatar component.
+ */
+export function Avatar(props: AvatarProps): JSX.Element | null {
+  const { user } = props;
+
+  const sharedStyles: SxProps<Theme> = {
+    height: `${props.small ? '16' : '24'}px`,
+    width: `${props.small ? '16' : '24'}px`,
+    bgcolor: user.color,
+    fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`
+  };
+
+  const name =
+    user.display_name ?? user.name ?? (user.username || 'User undefined');
+  return user.avatar_url ? (
+    <MuiAvatar
+      sx={{
+        ...sharedStyles
+      }}
+      src={user.avatar_url}
+      alt={name}
+      title={name}
+    ></MuiAvatar>
+  ) : user.initials ? (
+    <MuiAvatar
+      sx={{
+        ...sharedStyles
+      }}
+      alt={name}
+      title={name}
+    >
+      <Typography
+        sx={{
+          fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`,
+          color: 'var(--jp-ui-inverse-font-color1)'
+        }}
+      >
+        {user.initials}
+      </Typography>
+    </MuiAvatar>
+  ) : null;
+}

package/src/components/chat.tsx

@@ -11,15 +11,20 @@ import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
 import React, { useState } from 'react';
 
+import {
+  ChatInput,
+  IInputToolbarRegistry,
+  InputToolbarRegistry
+} from './input';
 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 { ChatMessages } from './messages';
 import { AttachmentOpenerContext } from '../context';
-import { IMessageFooterRegistry } from '../footers';
 import { IChatModel } from '../model';
-import { IAttachmentOpenerRegistry } from '../registry';
+import {
+  IAttachmentOpenerRegistry,
+  IChatCommandRegistry,
+  IMessageFooterRegistry
+} from '../registers';
 
 export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
   const { model } = props;

package/src/components/index.ts

@@ -3,12 +3,11 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+export * from './avatar';
 export * from './chat';
-export * from './chat-input';
-export * from './chat-messages';
 export * from './code-blocks';
 export * from './input';
 export * from './jl-theme-provider';
+export * from './messages';
 export * from './mui-extras';
 export * from './scroll-container';
-export * from './toolbar';

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

@@ -23,7 +23,7 @@ const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
 export function SendButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
-  const { model } = props;
+  const { model, chatCommandRegistry } = props;
   const { activeCellManager, selectionWatcher } = model;
   const hideIncludeSelection = !activeCellManager || !selectionWatcher;
 
@@ -98,21 +98,33 @@ export function SendButton(
     };
   }, [activeCellManager, selectionWatcher]);
 
-  function sendWithSelection() {
+  async function send() {
+    await chatCommandRegistry?.onSubmit(model);
+    model.send(model.value);
+  }
+
+  async function sendWithSelection() {
     let source = '';
 
+    // Run all chat command providers
+    await chatCommandRegistry?.onSubmit(model);
+
+    let language: string | undefined;
     if (selectionWatcher?.selection) {
       // Append the selected text if exists.
       source = selectionWatcher.selection.text;
+      language = selectionWatcher.selection.language;
     } else if (activeCellManager?.available) {
       // Append the active cell content if exists.
-      source = activeCellManager.getContent(false)!.source;
+      const content = activeCellManager.getContent(false);
+      source = content!.source;
+      language = content?.language;
     }
     let content = model.value;
     if (source) {
       content += `
 
-\`\`\`
+\`\`\`${language ?? ''}
 ${source}
 \`\`\`
 `;
@@ -125,7 +137,7 @@ ${source}
   return (
     <>
       <TooltippedButton
-        onClick={() => model.send(model.value)}
+        onClick={send}
         disabled={disabled}
         tooltip={tooltip}
         buttonProps={{

package/src/components/{chat-input.tsx → input/chat-input.tsx}

@@ -15,15 +15,15 @@ import {
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { AttachmentPreviewList } from './attachments';
+import { AttachmentPreviewList } from '../attachments';
 import {
   IInputToolbarRegistry,
   InputToolbarRegistry,
   useChatCommands
-} from './input';
-import { IInputModel, InputModel } from '../input-model';
-import { IChatCommandRegistry } from '../chat-commands';
-import { IAttachment } from '../types';
+} from '.';
+import { IInputModel, InputModel } from '../../input-model';
+import { IChatCommandRegistry } from '../../registers';
+import { IAttachment } from '../../types';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
@@ -105,7 +105,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
    * "Enter". This also handles many of the edge cases in the MUI Autocomplete
    * component.
    */
-  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+  async 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.
@@ -157,6 +157,8 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       (sendWithShiftEnter && event.shiftKey) ||
       (!sendWithShiftEnter && !event.shiftKey)
     ) {
+      // Run all command providers
+      await props.chatCommandRegistry?.onSubmit(model);
       model.send(input);
       event.stopPropagation();
       event.preventDefault();
@@ -218,7 +220,10 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
               endAdornment: (
                 <InputAdornment position="end" className={INPUT_TOOLBAR_CLASS}>
                   {toolbarElements.map(item => (
-                    <item.element model={model} />
+                    <item.element
+                      model={model}
+                      chatCommandRegistry={props.chatCommandRegistry}
+                    />
                   ))}
                 </InputAdornment>
               )

package/src/components/input/index.ts

@@ -4,5 +4,6 @@
  */
 
 export * from './buttons';
+export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';

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

@@ -7,6 +7,7 @@ import * as React from 'react';
 import { AttachButton, CancelButton, SendButton } from './buttons';
 import { IInputModel } from '../../input-model';
 import { ISignal, Signal } from '@lumino/signaling';
+import { IChatCommandRegistry } from '../../registers';
 
 /**
  * The toolbar registry interface.
@@ -137,6 +138,11 @@ export namespace InputToolbarRegistry {
      * The input model of the input component including the button.
      */
     model: IInputModel;
+    /**
+     * Chat command registry. Should be used by the "Send" button to run
+     * `onSubmit()` on all command providers before sending the message.
+     */
+    chatCommandRegistry?: IChatCommandRegistry;
   }
 
   /**

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

@@ -11,7 +11,7 @@ import type {
 import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
-import { ChatCommand, IChatCommandRegistry } from '../../chat-commands';
+import { ChatCommand, IChatCommandRegistry } from '../../registers';
 import { IInputModel } from '../../input-model';
 
 type AutocompleteProps = GenericAutocompleteProps<any, any, any, any>;
@@ -45,6 +45,9 @@ export function useChatCommands(
   const [commands, setCommands] = useState<ChatCommand[]>([]);
 
   useEffect(() => {
+    /**
+     * Callback that runs whenever the current word changes.
+     */
     async function getCommands(_: IInputModel, currentWord: string | null) {
       const providers = chatCommandRegistry?.getProviders();
       if (!providers) {
@@ -58,12 +61,12 @@ export function useChatCommands(
         return;
       }
 
-      let newCommands: ChatCommand[] = [];
+      let commandCompletions: ChatCommand[] = [];
       for (const provider of providers) {
         // TODO: optimize performance when this method is truly async
         try {
-          newCommands = newCommands.concat(
-            await provider.getChatCommands(inputModel)
+          commandCompletions = commandCompletions.concat(
+            await provider.listCommandCompletions(inputModel)
           );
         } catch (e) {
           console.error(
@@ -72,10 +75,23 @@ export function useChatCommands(
           );
         }
       }
-      if (newCommands) {
-        setOpen(true);
+
+      // Immediately replace the current word if it exactly matches one command
+      // and 'replaceWith' is set.
+      if (
+        commandCompletions.length === 1 &&
+        commandCompletions[0].name === inputModel.currentWord &&
+        commandCompletions[0].replaceWith !== undefined
+      ) {
+        const replacement = commandCompletions[0].replaceWith;
+        inputModel.replaceCurrentWord(replacement);
+        return;
       }
-      setCommands(newCommands);
+
+      // Otherwise, open/close the menu based on the presence of command
+      // completions and set the menu entries.
+      setOpen(!!commandCompletions.length);
+      setCommands(commandCompletions);
     }
 
     inputModel.currentWordChanged.connect(getCommands);
@@ -87,7 +103,8 @@ export function useChatCommands(
 
   /**
    * onChange(): the callback invoked when a command is selected from the chat
-   * commands menu by the user.
+   * commands menu. When a command `cmd` is selected, this function replaces the
+   * current word with `cmd.replaceWith` if set, `cmd.name` otherwise.
    */
   const onChange: AutocompleteProps['onChange'] = (
     e: unknown,
@@ -109,14 +126,12 @@ export function useChatCommands(
       return;
     }
 
-    // if replaceWith is set, handle the command immediately
-    if (command.replaceWith) {
-      inputModel.replaceCurrentWord(command.replaceWith);
-      return;
+    let replacement =
+      command.replaceWith === undefined ? command.name : command.replaceWith;
+    if (command.spaceOnAccept) {
+      replacement += ' ';
     }
-
-    // otherwise, defer handling to the command provider
-    chatCommandRegistry.handleChatCommand(command, inputModel);
+    inputModel.replaceCurrentWord(replacement);
   };
 
   return {

package/src/components/messages/footer.tsx

@@ -5,10 +5,11 @@
 
 import { Box } from '@mui/material';
 import React from 'react';
+
 import {
   IMessageFooterRegistry,
   MessageFooterSectionProps
-} from '../../footers';
+} from '../../registers';
 
 /**
  * The chat footer component properties.
@@ -24,7 +25,9 @@ export interface IMessageFootersProps extends MessageFooterSectionProps {
  * The chat footer component, which displays footer components on a row according to
  * their respective positions.
  */
-export function MessageFooter(props: IMessageFootersProps): JSX.Element {
+export function MessageFooterComponent(
+  props: IMessageFootersProps
+): JSX.Element {
   const { message, model, registry } = props;
   const footer = registry.getFooter();