@jupyter/chat 0.8.1 → 0.10.0

package/lib/components/input/{send-button.js → buttons/send-button.js}

@@ -6,8 +6,8 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 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 { TooltippedButton } from '../../mui-extras/tooltipped-button';
+import { includeSelectionIcon } from '../../../icons';
 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';
@@ -15,12 +15,13 @@ const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
  * The send button, with optional 'include selection' menu.
  */
 export function SendButton(props) {
-    var _a, _b;
-    const { activeCellManager, selectionWatcher } = props.model;
-    const hideIncludeSelection = (_a = props.hideIncludeSelection) !== null && _a !== void 0 ? _a : false;
-    const hasButtonOnLeft = (_b = props.hasButtonOnLeft) !== null && _b !== void 0 ? _b : false;
+    const { model } = props;
+    const { activeCellManager, selectionWatcher } = model;
+    const hideIncludeSelection = !activeCellManager || !selectionWatcher;
     const [menuAnchorEl, setMenuAnchorEl] = useState(null);
     const [menuOpen, setMenuOpen] = useState(false);
+    const [disabled, setDisabled] = useState(false);
+    const [tooltip, setTooltip] = useState('');
     const openMenu = useCallback((el) => {
         setMenuAnchorEl(el);
         setMenuOpen(true);
@@ -28,9 +29,31 @@ export function SendButton(props) {
     const closeMenu = useCallback(() => {
         setMenuOpen(false);
     }, []);
-    const disabled = !props.inputExists;
     const [selectionTooltip, setSelectionTooltip] = useState('');
     const [disableInclude, setDisableInclude] = useState(true);
+    useEffect(() => {
+        var _a;
+        const inputChanged = () => {
+            const inputExist = !!model.value.trim() || model.attachments.length;
+            setDisabled(!inputExist);
+        };
+        model.valueChanged.connect(inputChanged);
+        (_a = model.attachmentsChanged) === null || _a === void 0 ? void 0 : _a.connect(inputChanged);
+        inputChanged();
+        const configChanged = (_, config) => {
+            var _a;
+            setTooltip(((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false)
+                ? 'Send message (SHIFT+ENTER)'
+                : 'Send message (ENTER)');
+        };
+        model.configChanged.connect(configChanged);
+        return () => {
+            var _a, _b;
+            model.valueChanged.disconnect(inputChanged);
+            (_a = model.attachmentsChanged) === null || _a === void 0 ? void 0 : _a.disconnect(inputChanged);
+            (_b = model.configChanged) === null || _b === void 0 ? void 0 : _b.disconnect(configChanged);
+        };
+    }, [model]);
     useEffect(() => {
         /**
          * Enable or disable the include selection button, and adapt the tooltip.
@@ -53,44 +76,36 @@ export function SendButton(props) {
             selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selectionChanged.disconnect(toggleIncludeState);
             activeCellManager === null || activeCellManager === void 0 ? void 0 : 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 === null || selectionWatcher === void 0 ? void 0 : 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 === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) {
+            // Append the active cell content if exists.
+            source = activeCellManager.getContent(false).source;
         }
-        // Append the active cell content if exists.
-        if (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) {
-            props.onSend({
-                type: 'cell',
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                source: activeCellManager.getContent(false).source
-            });
-            closeMenu();
-            return;
+        let content = model.value;
+        if (source) {
+            content += `
+
+\`\`\`
+${source}
+\`\`\`
+`;
         }
+        model.send(content);
+        closeMenu();
+        model.value = '';
     }
-    return (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'nowrap' } },
-        React.createElement(TooltippedButton, { onClick: () => props.onSend(), disabled: disabled, tooltip: tooltip, buttonProps: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TooltippedButton, { 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'
             } },
             React.createElement(SendIcon, null)),
         !hideIncludeSelection && (React.createElement(React.Fragment, null,
@@ -108,11 +123,6 @@ export function SendButton(props) {
                         e.stopPropagation();
                     },
                     className: SEND_INCLUDE_OPENER_CLASS
-                }, sx: {
-                    minWidth: 'unset',
-                    padding: '4px 0px',
-                    borderRadius: '0px 2px 2px 0px',
-                    marginLeft: '1px'
                 } },
                 React.createElement(KeyboardArrowDown, null)),
             React.createElement(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {

package/lib/components/input/index.d.ts

@@ -1,3 +1,3 @@
-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/lib/components/input/index.js

@@ -2,6 +2,6 @@
  * Copyright (c) Jupyter Development Team.
  * 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/lib/components/input/toolbar-registry.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { IInputModel } from '../../input-model';
+import { ISignal } 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 declare class InputToolbarRegistry implements IInputToolbarRegistry {
+    /**
+     * A signal emitting when the items has changed.
+     */
+    get 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;
+    private _items;
+    private _itemsChanged;
+}
+export declare namespace InputToolbarRegistry {
+    /**
+     * The toolbar item interface.
+     */
+    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.
+     */
+    interface IToolbarItemProps {
+        /**
+         * The input model of the input component including the button.
+         */
+        model: IInputModel;
+    }
+    /**
+     * The default toolbar registry if none is provided.
+     */
+    function defaultToolbarRegistry(): InputToolbarRegistry;
+}

package/lib/components/input/toolbar-registry.js

@@ -0,0 +1,85 @@
+import { AttachButton, CancelButton, SendButton } from './buttons';
+import { Signal } from '@lumino/signaling';
+/**
+ * The toolbar registry implementation.
+ */
+export class InputToolbarRegistry {
+    constructor() {
+        this._items = new Map();
+        this._itemsChanged = new Signal(this);
+    }
+    /**
+     * A signal emitting when the items has changed.
+     */
+    get itemsChanged() {
+        return this._itemsChanged;
+    }
+    /**
+     * Get a toolbar item.
+     */
+    get(name) {
+        return this._items.get(name);
+    }
+    /**
+     * Get the list of the visible toolbar items in order.
+     */
+    getItems() {
+        return Array.from(this._items.values())
+            .filter(item => !item.hidden)
+            .sort((a, b) => a.position - b.position);
+    }
+    /**
+     * Add a toolbar item.
+     */
+    addItem(name, item) {
+        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) {
+        const item = this._items.get(name);
+        if (item) {
+            item.hidden = true;
+            this._itemsChanged.emit();
+        }
+    }
+    /**
+     * Show an element.
+     */
+    show(name) {
+        const item = this._items.get(name);
+        if (item) {
+            item.hidden = false;
+            this._itemsChanged.emit();
+        }
+    }
+}
+(function (InputToolbarRegistry) {
+    /**
+     * The default toolbar registry if none is provided.
+     */
+    function defaultToolbarRegistry() {
+        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;
+    }
+    InputToolbarRegistry.defaultToolbarRegistry = defaultToolbarRegistry;
+})(InputToolbarRegistry || (InputToolbarRegistry = {}));

package/lib/components/input/use-chat-commands.js

@@ -2,9 +2,9 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React from 'react';
-import { useEffect, useState } from 'react';
+import { LabIcon } from '@jupyterlab/ui-components';
 import { Box } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 /**
  * A hook which automatically returns the list of command options given the
  * current input and chat command registry.
@@ -83,12 +83,13 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
             getOptionLabel: (command) => command.name,
             renderOption: (defaultProps, command, __, ___) => {
                 const { key, ...listItemProps } = defaultProps;
-                const commandIcon = (React.createElement("span", null, typeof command.icon === 'object' ? (React.createElement(command.icon.react, null)) : (command.icon)));
+                const commandIcon = React.isValidElement(command.icon) ? (command.icon) : (React.createElement("span", null, command.icon instanceof LabIcon ? (React.createElement(command.icon.react, null)) : (command.icon)));
                 return (React.createElement(Box, { key: key, component: "li", ...listItemProps },
                     commandIcon,
                     React.createElement("p", { className: "jp-chat-command-name" }, command.name),
-                    React.createElement("span", null, " - "),
-                    React.createElement("p", { className: "jp-chat-command-description" }, command.description)));
+                    command.description && (React.createElement(React.Fragment, null,
+                        React.createElement("span", null, " - "),
+                        React.createElement("p", { className: "jp-chat-command-description" }, command.description)))));
             },
             // always show all options, since command providers should exclusively
             // define what commands are added to the menu.

package/lib/components/mui-extras/tooltipped-button.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { ButtonProps, SxProps, TooltipProps } from '@mui/material';
+import React from 'react';
 export type TooltippedButtonProps = {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     tooltip: string;

package/lib/components/mui-extras/tooltipped-button.js

@@ -2,9 +2,10 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React from 'react';
 import { Button } from '@mui/material';
+import React from 'react';
 import { ContrastingTooltip } from './contrasting-tooltip';
+const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
 /**
  * A component that renders an MUI `Button` with a high-contrast tooltip
  * provided by `ContrastingTooltip`. This component differs from the MUI
@@ -34,7 +35,7 @@ export function TooltippedButton(props) {
                 ]
             }
         } },
-        React.createElement("span", { style: { cursor: 'default' } },
+        React.createElement("span", { style: { cursor: 'default' }, className: TOOLTIPPED_WRAP_CLASS },
             React.createElement(Button, { ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, sx: {
                     lineHeight: 0,
                     ...(props.disabled && { opacity: 0.5 }),

package/lib/components/mui-extras/tooltipped-icon-button.js

@@ -2,9 +2,11 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React from 'react';
+import { classes } from '@jupyterlab/ui-components';
 import { IconButton } from '@mui/material';
+import React from 'react';
 import { ContrastingTooltip } from './contrasting-tooltip';
+const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
 /**
  * A component that renders an MUI `IconButton` with a high-contrast tooltip
  * provided by `ContrastingTooltip`. This component differs from the MUI
@@ -31,7 +33,7 @@ export function TooltippedIconButton(props) {
                 ]
             }
         } },
-        React.createElement("span", { className: props.className },
+        React.createElement("span", { className: classes(props.className, TOOLTIPPED_WRAP_CLASS) },
             React.createElement(IconButton, { ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: {
                     marginLeft: '8px',
                     lineHeight: 0,

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './active-cell-manager';
+export * from './chat-commands';
 export * from './components';
 export * from './icons';
 export * from './input-model';
@@ -9,4 +10,3 @@ export * from './types';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';
-export * from './chat-commands';

package/lib/index.js

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './active-cell-manager';
+export * from './chat-commands';
 export * from './components';
 export * from './icons';
 export * from './input-model';
@@ -13,4 +14,3 @@ export * from './types';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';
-export * from './chat-commands';

package/lib/input-model.d.ts

@@ -1,12 +1,26 @@
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
 import { IActiveCellManager } from './active-cell-manager';
 import { ISelectionWatcher } from './selection-watcher';
-import { IAttachment } from './types';
+import { IChatContext } from './model';
+import { IAttachment, IUser } from './types';
 /**
  * The chat input interface.
  */
 export interface IInputModel extends IDisposable {
+    /**
+     * The chat context (a readonly subset of the chat model).
+     */
+    readonly chatContext: IChatContext;
+    /**
+     * Function to send a message.
+     */
+    send: (content: string) => void;
+    /**
+     * Optional function to cancel edition.
+     */
+    cancel: (() => void) | undefined;
     /**
      * The entire input value.
      */
@@ -40,6 +54,10 @@ export interface IInputModel extends IDisposable {
      * Get the selection watcher.
      */
     readonly selectionWatcher: ISelectionWatcher | null;
+    /**
+     * Get the document manager.
+     */
+    readonly documentManager: IDocumentManager | null;
     /**
      * The input configuration.
      */
@@ -80,12 +98,40 @@ export interface IInputModel extends IDisposable {
      * Replace the current word in the input with a new one.
      */
     replaceCurrentWord(newWord: string): void;
+    /**
+     * The mentioned user list.
+     */
+    readonly mentions: IUser[];
+    /**
+     * Add user mention.
+     */
+    addMention?(user: IUser): void;
+    /**
+     * Remove a user mention.
+     */
+    removeMention(user: IUser): void;
+    /**
+     * Clear mentions list.
+     */
+    clearMentions(): void;
 }
 /**
  * The input model.
  */
 export declare class InputModel implements IInputModel {
     constructor(options: InputModel.IOptions);
+    /**
+     * The chat context (a readonly subset of the chat model);
+     */
+    get chatContext(): IChatContext;
+    /**
+     * Function to send a message.
+     */
+    send: (input: string) => void;
+    /**
+     * Optional function to cancel edition.
+     */
+    cancel: (() => void) | undefined;
     /**
      * The entire input value.
      */
@@ -120,6 +166,10 @@ export declare class InputModel implements IInputModel {
      * Get the selection watcher.
      */
     get selectionWatcher(): ISelectionWatcher | null;
+    /**
+     * Get the document manager.
+     */
+    get documentManager(): IDocumentManager | null;
     /**
      * The input configuration.
      */
@@ -161,6 +211,22 @@ export declare class InputModel implements IInputModel {
      * Replace the current word in the input with a new one.
      */
     replaceCurrentWord(newWord: string): void;
+    /**
+     * The mentioned user list.
+     */
+    get mentions(): IUser[];
+    /**
+     * Add a user mention.
+     */
+    addMention(user: IUser): void;
+    /**
+     * Remove a user mention.
+     */
+    removeMention(user: IUser): void;
+    /**
+     * Clear mentions list.
+     */
+    clearMentions: () => void;
     /**
      * Dispose the input model.
      */
@@ -169,12 +235,16 @@ export declare class InputModel implements IInputModel {
      * Whether the input model is disposed.
      */
     get isDisposed(): boolean;
+    private _onSend;
+    private _chatContext;
     private _value;
     private _cursorIndex;
     private _currentWord;
     private _attachments;
+    private _mentions;
     private _activeCellManager;
     private _selectionWatcher;
+    private _documentManager;
     private _config;
     private _valueChanged;
     private _cursorIndexChanged;
@@ -186,6 +256,20 @@ export declare class InputModel implements IInputModel {
 }
 export declare namespace InputModel {
     interface IOptions {
+        /**
+         * The chat context (a readonly subset of the chat model).
+         */
+        chatContext: IChatContext;
+        /**
+         * 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.
          */
@@ -194,6 +278,10 @@ export declare namespace InputModel {
          * The initial attachments.
          */
         attachments?: IAttachment[];
+        /**
+         * The initial mentions.
+         */
+        mentions?: IUser[];
         /**
          * The current cursor index.
          * This refers to the index of the character in front of the cursor.
@@ -211,6 +299,10 @@ export declare namespace InputModel {
          * Selection watcher.
          */
         selectionWatcher?: ISelectionWatcher | null;
+        /**
+         * Document manager.
+         */
+        documentManager?: IDocumentManager | null;
     }
     interface IConfig {
         /**