@jupyter/chat 0.7.0 → 0.8.0

package/lib/components/chat.js

@@ -10,23 +10,22 @@ import React, { useState } from 'react';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
+import { AttachmentOpenerContext } from '../context';
 export function ChatBody(props) {
-    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) => {
         // send message to backend
         model.sendMessage({ body: input });
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ChatMessages, { rmRegistry: renderMimeRegistry, model: model }),
+    return (React.createElement(AttachmentOpenerContext.Provider, { value: props.attachmentOpenerRegistry },
+        React.createElement(ChatMessages, { rmRegistry: props.rmRegistry, model: model, chatCommandRegistry: props.chatCommandRegistry, documentManager: props.documentManager }),
         React.createElement(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 })));
 }
 export function Chat(props) {
     var _a;
@@ -54,7 +53,7 @@ export function Chat(props) {
                     React.createElement(ArrowBackIcon, null))) : (React.createElement(Box, null)),
                 view !== Chat.View.settings && props.settingsPanel ? (React.createElement(IconButton, { onClick: () => setView(Chat.View.settings) },
                     React.createElement(SettingsIcon, null))) : (React.createElement(Box, null))),
-            view === Chat.View.chat && (React.createElement(ChatBody, { model: props.model, rmRegistry: props.rmRegistry, autocompletionRegistry: props.autocompletionRegistry })),
+            view === Chat.View.chat && (React.createElement(ChatBody, { model: props.model, rmRegistry: props.rmRegistry, documentManager: props.documentManager, chatCommandRegistry: props.chatCommandRegistry, attachmentOpenerRegistry: props.attachmentOpenerRegistry })),
             view === Chat.View.settings && props.settingsPanel && (React.createElement(props.settingsPanel, null)))));
 }
 /**

package/lib/components/input/attach-button.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IDocumentManager } from '@jupyterlab/docmanager';
+import { IAttachment } from '../../types';
+/**
+ * The attach button props.
+ */
+export type AttachButtonProps = {
+    documentManager: IDocumentManager;
+    onAttach: (attachment: IAttachment) => void;
+};
+/**
+ * The attach button.
+ */
+export declare function AttachButton(props: AttachButtonProps): JSX.Element;

package/lib/components/input/attach-button.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { FileDialog } from '@jupyterlab/filebrowser';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import React from 'react';
+import { TooltippedButton } from '../mui-extras/tooltipped-button';
+const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
+/**
+ * The attach button.
+ */
+export function AttachButton(props) {
+    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 (React.createElement(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'
+        } },
+        React.createElement(AttachFileIcon, null)));
+}

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

@@ -1,2 +1,3 @@
+export * from './attach-button';
 export * from './cancel-button';
 export * from './send-button';

package/lib/components/input/index.js

@@ -2,5 +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';

package/lib/components/input/send-button.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { IChatModel } from '../../model';
+import { IInputModel } from '../../input-model';
 import { Selection } from '../../types';
 /**
  * The send button props.
  */
 export type SendButtonProps = {
-    model: IChatModel;
+    model: IInputModel;
     sendWithShiftEnter: boolean;
     inputExists: boolean;
     onSend: (selection?: Selection) => unknown;

package/lib/components/input/use-chat-commands.d.ts

@@ -0,0 +1,19 @@
+import type { AutocompleteProps as GenericAutocompleteProps } from '@mui/material';
+import { IChatCommandRegistry } from '../../chat-commands';
+import { IInputModel } from '../../input-model';
+type AutocompleteProps = GenericAutocompleteProps<any, any, any, any>;
+type UseChatCommandsReturn = {
+    autocompleteProps: Omit<AutocompleteProps, 'renderInput'>;
+    menu: {
+        open: boolean;
+        highlighted: boolean;
+    };
+};
+/**
+ * A hook which automatically returns the list of command options given the
+ * current input and chat command registry.
+ *
+ * Intended usage: `const chatCommands = useChatCommands(...)`.
+ */
+export declare function useChatCommands(inputModel: IInputModel, chatCommandRegistry?: IChatCommandRegistry): UseChatCommandsReturn;
+export {};

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

@@ -0,0 +1,127 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+/**
+ * A hook which automatically returns the list of command options given the
+ * current input and chat command registry.
+ *
+ * Intended usage: `const chatCommands = useChatCommands(...)`.
+ */
+export function useChatCommands(inputModel, chatCommandRegistry) {
+    // whether an option is highlighted in the chat commands menu
+    const [highlighted, setHighlighted] = useState(false);
+    // whether the chat commands menu is open
+    const [open, setOpen] = useState(false);
+    // current list of chat commands matched by the current word.
+    // the current word is the space-separated word at the user's cursor.
+    const [commands, setCommands] = useState([]);
+    useEffect(() => {
+        async function getCommands(_, currentWord) {
+            const providers = chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.getProviders();
+            if (!providers) {
+                return;
+            }
+            if (!(currentWord === null || currentWord === void 0 ? void 0 : currentWord.length)) {
+                setCommands([]);
+                setOpen(false);
+                setHighlighted(false);
+                return;
+            }
+            let newCommands = [];
+            for (const provider of providers) {
+                // TODO: optimize performance when this method is truly async
+                try {
+                    newCommands = newCommands.concat(await provider.getChatCommands(inputModel));
+                }
+                catch (e) {
+                    console.error(`Error when getting chat commands from command provider '${provider.id}': `, e);
+                }
+            }
+            if (newCommands) {
+                setOpen(true);
+            }
+            setCommands(newCommands);
+        }
+        inputModel.currentWordChanged.connect(getCommands);
+        return () => {
+            inputModel.currentWordChanged.disconnect(getCommands);
+        };
+    }, [inputModel]);
+    /**
+     * onChange(): the callback invoked when a command is selected from the chat
+     * commands menu by the user.
+     */
+    const onChange = (e, command, reason) => {
+        if (reason !== 'selectOption') {
+            // only call this callback when a command is selected by the user. this
+            // requires `reason === 'selectOption'`.
+            return;
+        }
+        if (!chatCommandRegistry) {
+            return;
+        }
+        const currentWord = inputModel.currentWord;
+        if (!currentWord) {
+            return;
+        }
+        // if replaceWith is set, handle the command immediately
+        if (command.replaceWith) {
+            inputModel.replaceCurrentWord(command.replaceWith);
+            return;
+        }
+        // otherwise, defer handling to the command provider
+        chatCommandRegistry.handleChatCommand(command, inputModel);
+    };
+    return {
+        autocompleteProps: {
+            open,
+            options: commands,
+            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)));
+                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)));
+            },
+            // always show all options, since command providers should exclusively
+            // define what commands are added to the menu.
+            filterOptions: (commands) => commands,
+            value: null,
+            autoHighlight: true,
+            freeSolo: true,
+            disableClearable: true,
+            onChange,
+            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);
+            }
+        },
+        menu: {
+            open,
+            highlighted
+        }
+    };
+}

package/lib/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IAttachmentOpenerRegistry } from './registry';
+export declare const AttachmentOpenerContext: import("react").Context<IAttachmentOpenerRegistry | undefined>;

package/lib/context.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createContext } from 'react';
+export const AttachmentOpenerContext = createContext(undefined);

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 export * from './active-cell-manager';
 export * from './components';
 export * from './icons';
+export * from './input-model';
 export * from './model';
 export * from './registry';
 export * from './selection-watcher';
@@ -8,3 +9,4 @@ 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

@@ -5,6 +5,7 @@
 export * from './active-cell-manager';
 export * from './components';
 export * from './icons';
+export * from './input-model';
 export * from './model';
 export * from './registry';
 export * from './selection-watcher';
@@ -12,3 +13,4 @@ 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

@@ -0,0 +1,221 @@
+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';
+/**
+ * The chat input interface.
+ */
+export interface IInputModel extends IDisposable {
+    /**
+     * The entire input value.
+     */
+    value: string;
+    /**
+     * A signal emitting when the value has changed.
+     */
+    readonly valueChanged: ISignal<IInputModel, string>;
+    /**
+     * The current cursor index.
+     * This refers to the index of the character in front of the cursor.
+     */
+    cursorIndex: number | null;
+    /**
+     * A signal emitting when the cursor position has changed.
+     */
+    readonly cursorIndexChanged: ISignal<IInputModel, number | null>;
+    /**
+     * The current word behind the user's cursor, space-separated.
+     */
+    readonly currentWord: string | null;
+    /**
+     * A signal emitting when the current word has changed.
+     */
+    readonly currentWordChanged: ISignal<IInputModel, string | null>;
+    /**
+     * Get the active cell manager.
+     */
+    readonly activeCellManager: IActiveCellManager | null;
+    /**
+     * Get the selection watcher.
+     */
+    readonly selectionWatcher: ISelectionWatcher | null;
+    /**
+     * The input configuration.
+     */
+    config: InputModel.IConfig;
+    /**
+     * A signal emitting when the messages list is updated.
+     */
+    readonly configChanged: ISignal<IInputModel, InputModel.IConfig>;
+    /**
+     * Function to request the focus on the input of the chat.
+     */
+    focus(): void;
+    /**
+     * A signal emitting when the focus is requested on the input.
+     */
+    readonly focusInputSignal?: ISignal<IInputModel, void>;
+    /**
+     * The attachments list.
+     */
+    readonly attachments: IAttachment[];
+    /**
+     * Add attachment to the next message to send.
+     */
+    addAttachment?(attachment: IAttachment): void;
+    /**
+     * Remove attachment to the next message to send.
+     */
+    removeAttachment?(attachment: IAttachment): void;
+    /**
+     * Clear the attachment list.
+     */
+    clearAttachments(): void;
+    /**
+     * A signal emitting when the attachment list has changed.
+     */
+    readonly attachmentsChanged?: ISignal<IInputModel, IAttachment[]>;
+    /**
+     * Replace the current word in the input with a new one.
+     */
+    replaceCurrentWord(newWord: string): void;
+}
+/**
+ * The input model.
+ */
+export declare class InputModel implements IInputModel {
+    constructor(options: InputModel.IOptions);
+    /**
+     * The entire input value.
+     */
+    get value(): string;
+    set value(newInput: string);
+    /**
+     * A signal emitting when the value has changed.
+     */
+    get valueChanged(): ISignal<IInputModel, string>;
+    /**
+     * The cursor position in the input.
+     */
+    get cursorIndex(): number | null;
+    set cursorIndex(newIndex: number | null);
+    /**
+     * A signal emitting when the cursor position has changed.
+     */
+    get cursorIndexChanged(): ISignal<IInputModel, number | null>;
+    /**
+     * The current word behind the user's cursor, space-separated.
+     */
+    get currentWord(): string | null;
+    /**
+     * A signal emitting when the current word has changed.
+     */
+    get currentWordChanged(): ISignal<IInputModel, string | null>;
+    /**
+     * Get the active cell manager.
+     */
+    get activeCellManager(): IActiveCellManager | null;
+    /**
+     * Get the selection watcher.
+     */
+    get selectionWatcher(): ISelectionWatcher | null;
+    /**
+     * The input configuration.
+     */
+    get config(): InputModel.IConfig;
+    set config(value: Partial<InputModel.IConfig>);
+    /**
+     * A signal emitting when the configuration is updated.
+     */
+    get configChanged(): ISignal<IInputModel, InputModel.IConfig>;
+    /**
+     * Function to request the focus on the input of the chat.
+     */
+    focus(): void;
+    /**
+     * A signal emitting when the focus is requested on the input.
+     */
+    get focusInputSignal(): ISignal<IInputModel, void>;
+    /**
+     * The attachments list.
+     */
+    get attachments(): IAttachment[];
+    /**
+     * Add attachment to send with next message.
+     */
+    addAttachment: (attachment: IAttachment) => void;
+    /**
+     * Remove attachment to be sent.
+     */
+    removeAttachment: (attachment: IAttachment) => void;
+    /**
+     * Update attachments.
+     */
+    clearAttachments: () => void;
+    /**
+     * A signal emitting when the input attachments changed.
+     */
+    get attachmentsChanged(): ISignal<IInputModel, IAttachment[]>;
+    /**
+     * Replace the current word in the input with a new one.
+     */
+    replaceCurrentWord(newWord: string): void;
+    /**
+     * Dispose the input model.
+     */
+    dispose(): void;
+    /**
+     * Whether the input model is disposed.
+     */
+    get isDisposed(): boolean;
+    private _value;
+    private _cursorIndex;
+    private _currentWord;
+    private _attachments;
+    private _activeCellManager;
+    private _selectionWatcher;
+    private _config;
+    private _valueChanged;
+    private _cursorIndexChanged;
+    private _currentWordChanged;
+    private _configChanged;
+    private _focusInputSignal;
+    private _attachmentsChanged;
+    private _isDisposed;
+}
+export declare namespace InputModel {
+    interface IOptions {
+        /**
+         * The initial value of the input.
+         */
+        value?: string;
+        /**
+         * The initial attachments.
+         */
+        attachments?: IAttachment[];
+        /**
+         * The current cursor index.
+         * This refers to the index of the character in front of the cursor.
+         */
+        cursorIndex?: number;
+        /**
+         * The configuration for the input component.
+         */
+        config?: IConfig;
+        /**
+         * Active cell manager.
+         */
+        activeCellManager?: IActiveCellManager | null;
+        /**
+         * Selection watcher.
+         */
+        selectionWatcher?: ISelectionWatcher | null;
+    }
+    interface IConfig {
+        /**
+         * Whether to send a message via Shift-Enter instead of Enter.
+         */
+        sendWithShiftEnter?: boolean;
+    }
+}