@jupyter/chat 0.8.0 → 0.9.0

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

@@ -87,8 +87,9 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
                 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/input-model.d.ts

@@ -3,10 +3,19 @@ import { ISignal } from '@lumino/signaling';
 import { IActiveCellManager } from './active-cell-manager';
 import { ISelectionWatcher } from './selection-watcher';
 import { IAttachment } from './types';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 /**
  * The chat input interface.
  */
 export interface IInputModel extends IDisposable {
+    /**
+     * Function to send a message.
+     */
+    send: (content: string) => void;
+    /**
+     * Optional function to cancel edition.
+     */
+    cancel: (() => void) | undefined;
     /**
      * The entire input value.
      */
@@ -40,6 +49,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.
      */
@@ -86,6 +99,14 @@ export interface IInputModel extends IDisposable {
  */
 export declare class InputModel implements IInputModel {
     constructor(options: InputModel.IOptions);
+    /**
+     * Function to send a message.
+     */
+    send: (input: string) => void;
+    /**
+     * Optional function to cancel edition.
+     */
+    cancel: (() => void) | undefined;
     /**
      * The entire input value.
      */
@@ -120,6 +141,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.
      */
@@ -169,12 +194,14 @@ export declare class InputModel implements IInputModel {
      * Whether the input model is disposed.
      */
     get isDisposed(): boolean;
+    private _onSend;
     private _value;
     private _cursorIndex;
     private _currentWord;
     private _attachments;
     private _activeCellManager;
     private _selectionWatcher;
+    private _documentManager;
     private _config;
     private _valueChanged;
     private _cursorIndexChanged;
@@ -186,6 +213,16 @@ export declare class InputModel implements IInputModel {
 }
 export declare namespace InputModel {
     interface IOptions {
+        /**
+         * 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.
          */
@@ -211,6 +248,10 @@ export declare namespace InputModel {
          * Selection watcher.
          */
         selectionWatcher?: ISelectionWatcher | null;
+        /**
+         * Document manager.
+         */
+        documentManager?: IDocumentManager | null;
     }
     interface IConfig {
         /**

package/lib/input-model.js

@@ -9,7 +9,14 @@ const WHITESPACE = new Set([' ', '\n', '\t']);
  */
 export class InputModel {
     constructor(options) {
-        var _a, _b;
+        var _a, _b, _c;
+        /**
+         * Function to send a message.
+         */
+        this.send = (input) => {
+            this._onSend(input, this);
+            this.value = '';
+        };
         /**
          * Add attachment to send with next message.
          */
@@ -48,14 +55,17 @@ export class InputModel {
         this._focusInputSignal = new Signal(this);
         this._attachmentsChanged = new Signal(this);
         this._isDisposed = false;
+        this._onSend = options.onSend;
         this._value = options.value || '';
         this._attachments = options.attachments || [];
         this.cursorIndex = options.cursorIndex || this.value.length;
         this._activeCellManager = (_a = options.activeCellManager) !== null && _a !== void 0 ? _a : null;
         this._selectionWatcher = (_b = options.selectionWatcher) !== null && _b !== void 0 ? _b : null;
+        this._documentManager = (_c = options.documentManager) !== null && _c !== void 0 ? _c : null;
         this._config = {
             ...options.config
         };
+        this.cancel = options.onCancel;
     }
     /**
      * The entire input value.
@@ -124,6 +134,12 @@ export class InputModel {
     get selectionWatcher() {
         return this._selectionWatcher;
     }
+    /**
+     * Get the document manager.
+     */
+    get documentManager() {
+        return this._documentManager;
+    }
     /**
      * The input configuration.
      */

package/lib/model.d.ts

@@ -1,3 +1,4 @@
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
@@ -45,6 +46,10 @@ export interface IChatModel extends IDisposable {
      * Get the selection watcher.
      */
     readonly selectionWatcher: ISelectionWatcher | null;
+    /**
+     * Get the selection watcher.
+     */
+    readonly documentManager: IDocumentManager | null;
     /**
      * A signal emitting when the messages list is updated.
      */
@@ -73,6 +78,10 @@ export interface IChatModel extends IDisposable {
      * @returns whether the message has been sent or not, or nothing if not needed.
      */
     sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    /**
+     * Clear the message list.
+     */
+    clearMessages(): void;
     /**
      * Optional, to update a message from the chat panel.
      *
@@ -159,6 +168,10 @@ export declare class ChatModel implements IChatModel {
      * Get the selection watcher.
      */
     get selectionWatcher(): ISelectionWatcher | null;
+    /**
+     * Get the document manager.
+     */
+    get documentManager(): IDocumentManager | null;
     /**
      * Timestamp of the last read message in local storage.
      */
@@ -207,6 +220,10 @@ export declare class ChatModel implements IChatModel {
      * @returns whether the message has been sent or not.
      */
     sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    /**
+     * Clear the message list.
+     */
+    clearMessages(): void;
     /**
      * Dispose the chat model.
      */
@@ -271,6 +288,7 @@ export declare class ChatModel implements IChatModel {
     private _commands?;
     private _activeCellManager;
     private _selectionWatcher;
+    private _documentManager;
     private _notificationId;
     private _messagesUpdated;
     private _configChanged;
@@ -306,5 +324,9 @@ export declare namespace ChatModel {
          * Selection watcher.
          */
         selectionWatcher?: ISelectionWatcher | null;
+        /**
+         * Document manager.
+         */
+        documentManager?: IDocumentManager | null;
     }
 }

package/lib/model.js

@@ -14,7 +14,7 @@ export class ChatModel {
      * Create a new chat model.
      */
     constructor(options = {}) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this._messages = [];
         this._unreadMessages = [];
         this._messagesInViewport = [];
@@ -39,13 +39,16 @@ export class ChatModel {
         this._inputModel = new InputModel({
             activeCellManager: options.activeCellManager,
             selectionWatcher: options.selectionWatcher,
+            documentManager: options.documentManager,
             config: {
                 sendWithShiftEnter: config.sendWithShiftEnter
-            }
+            },
+            onSend: (input) => this.sendMessage({ body: input })
         });
         this._commands = options.commands;
         this._activeCellManager = (_b = options.activeCellManager) !== null && _b !== void 0 ? _b : null;
         this._selectionWatcher = (_c = options.selectionWatcher) !== null && _c !== void 0 ? _c : null;
+        this._documentManager = (_d = options.documentManager) !== null && _d !== void 0 ? _d : null;
     }
     /**
      * The chat model id.
@@ -89,6 +92,12 @@ export class ChatModel {
     get selectionWatcher() {
         return this._selectionWatcher;
     }
+    /**
+     * Get the document manager.
+     */
+    get documentManager() {
+        return this._documentManager;
+    }
     /**
      * Timestamp of the last read message in local storage.
      */
@@ -219,6 +228,13 @@ export class ChatModel {
      * @returns whether the message has been sent or not.
      */
     sendMessage(message) { }
+    /**
+     * Clear the message list.
+     */
+    clearMessages() {
+        this._messages = [];
+        this._messagesUpdated.emit();
+    }
     /**
      * Dispose the chat model.
      */

package/lib/types.d.ts

@@ -84,21 +84,3 @@ export interface IAttachment {
  */
 export interface ISettings {
 }
-/**
- * Representation of a selected text.
- */
-export type TextSelection = {
-    type: 'text';
-    source: string;
-};
-/**
- * Representation of a selected cell.
- */
-export type CellSelection = {
-    type: 'cell';
-    source: string;
-};
-/**
- * Selection object (text or cell).
- */
-export type Selection = TextSelection | CellSelection;

package/lib/widgets/chat-widget.d.ts

@@ -1,6 +1,6 @@
 import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
-import { Chat } from '../components/chat';
+import { Chat, IInputToolbarRegistry } from '../components';
 import { IChatModel } from '../model';
 export declare class ChatWidget extends ReactWidget {
     constructor(options: Chat.IOptions);
@@ -8,6 +8,10 @@ export declare class ChatWidget extends ReactWidget {
      * Get the model of the widget.
      */
     get model(): IChatModel;
+    /**
+     * Get the input toolbar registry (if it has been provided when creating the widget).
+     */
+    get inputToolbarRegistry(): IInputToolbarRegistry | undefined;
     render(): React.JSX.Element;
     private _chatOptions;
 }

package/lib/widgets/chat-widget.js

@@ -4,7 +4,7 @@
  */
 import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
-import { Chat } from '../components/chat';
+import { Chat } from '../components';
 import { chatIcon } from '../icons';
 export class ChatWidget extends ReactWidget {
     constructor(options) {
@@ -21,6 +21,12 @@ export class ChatWidget extends ReactWidget {
     get model() {
         return this._chatOptions.model;
     }
+    /**
+     * Get the input toolbar registry (if it has been provided when creating the widget).
+     */
+    get inputToolbarRegistry() {
+        return this._chatOptions.inputToolbarRegistry;
+    }
     render() {
         // The model need to be passed, otherwise it is undefined in the widget in
         // the case of collaborative document.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",