@jupyter/chat 0.17.0 → 0.18.0

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

@@ -2,12 +2,14 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Autocomplete, Box, InputAdornment, TextField } from '@mui/material';
+import { Autocomplete, Box, TextField, Toolbar } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { AttachmentPreviewList } from '../attachments';
 import { useChatCommands } from '.';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
+const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield';
+const INPUT_COMPONENT_CLASS = 'jp-chat-input-component';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 export function ChatInput(props) {
     var _a;
@@ -139,7 +141,7 @@ export function ChatInput(props) {
         React.createElement(AttachmentPreviewList, { attachments: attachments, onRemove: model.removeAttachment }),
         React.createElement(Autocomplete, { ...chatCommands.autocompleteProps, 
             // ensure the autocomplete popup always renders on top
-            componentsProps: {
+            slotProps: {
                 popper: {
                     placement: 'top'
                 },
@@ -147,24 +149,26 @@ export function ChatInput(props) {
                     sx: {
                         border: '1px solid lightgray'
                     }
-                }
-            }, ListboxProps: {
-                sx: {
-                    '& .MuiAutocomplete-option': {
-                        padding: 2
+                },
+                listbox: {
+                    sx: {
+                        '& .MuiAutocomplete-option': {
+                            padding: 2
+                        }
                     }
                 }
-            }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", inputRef: inputRef, sx: { marginTop: '1px' }, onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, InputProps: {
-                    ...params.InputProps,
-                    endAdornment: (React.createElement(InputAdornment, { position: "end", className: INPUT_TOOLBAR_CLASS }, toolbarElements.map(item => (React.createElement(item.element, { model: model, chatCommandRegistry: props.chatCommandRegistry })))))
-                }, FormHelperTextProps: {
-                    sx: { marginLeft: 'auto', marginRight: 0 }
-                }, helperText: input.length > 2 ? helperText : ' ' })), inputValue: input, onInputChange: (_, newValue, reason) => {
+            }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "filled", className: INPUT_TEXTFIELD_CLASS, multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", inputRef: inputRef, sx: { marginTop: '1px' }, onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, slotProps: {
+                    input: {
+                        ...params.InputProps,
+                        className: INPUT_COMPONENT_CLASS
+                    }
+                }, label: input.length > 2 ? helperText : ' ' })), inputValue: input, onInputChange: (_, newValue, reason) => {
                 // Do not update the value if the reason is 'reset', which should occur only
                 // if an autocompletion command has been selected. In this case, the value is
                 // set in the 'onChange()' callback of the autocompletion (to avoid conflicts).
                 if (reason !== 'reset') {
                     model.value = newValue;
                 }
-            } })));
+            } }),
+        React.createElement(Toolbar, { className: INPUT_TOOLBAR_CLASS }, toolbarElements.map(item => (React.createElement(item.element, { model: model, chatCommandRegistry: props.chatCommandRegistry }))))));
 }

package/lib/components/input/toolbar-registry.d.ts

@@ -1,6 +1,7 @@
+import { Token } from '@lumino/coreutils';
+import { ISignal } from '@lumino/signaling';
 import * as React from 'react';
 import { IInputModel } from '../../input-model';
-import { ISignal } from '@lumino/signaling';
 import { IChatCommandRegistry } from '../../registers';
 /**
  * The toolbar registry interface.
@@ -102,3 +103,17 @@ export declare namespace InputToolbarRegistry {
      */
     function defaultToolbarRegistry(): InputToolbarRegistry;
 }
+/**
+ * A factory interface for creating a new Input Toolbar Registry
+ * for each Chat Panel.
+ */
+export interface IInputToolbarRegistryFactory {
+    /**
+     * Create a new input toolbar registry instance.
+     */
+    create: () => IInputToolbarRegistry;
+}
+/**
+ * The token of the factory to create an input toolbar registry.
+ */
+export declare const IInputToolbarRegistryFactory: Token<IInputToolbarRegistryFactory>;

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

@@ -1,5 +1,10 @@
-import { AttachButton, CancelButton, SendButton } from './buttons';
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Token } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
+import { AttachButton, CancelButton, SendButton } from './buttons';
 /**
  * The toolbar registry implementation.
  */
@@ -83,3 +88,7 @@ export class InputToolbarRegistry {
     }
     InputToolbarRegistry.defaultToolbarRegistry = defaultToolbarRegistry;
 })(InputToolbarRegistry || (InputToolbarRegistry = {}));
+/**
+ * The token of the factory to create an input toolbar registry.
+ */
+export const IInputToolbarRegistryFactory = new Token('@jupyter/chat:IInputToolbarRegistryFactory');

package/lib/components/messages/messages.d.ts

@@ -3,6 +3,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IInputToolbarRegistry } from '../input';
 import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
 import { IChatModel } from '../../model';
+export declare const MESSAGE_CLASS = "jp-chat-message";
 /**
  * The base components props.
  */

package/lib/components/messages/messages.js

@@ -13,8 +13,8 @@ import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { WritingUsersList } from './writers';
 import { ScrollContainer } from '../scroll-container';
+export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
-const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
 /**
  * The messages list component.

package/lib/input-model.d.ts

@@ -10,9 +10,9 @@ import { IAttachment, IUser } from './types';
  */
 export interface IInputModel extends IDisposable {
     /**
-     * The chat context (a readonly subset of the chat model).
+     * The chat context (a subset of the chat model).
      */
-    readonly chatContext: IChatContext;
+    chatContext?: IChatContext;
     /**
      * Function to send a message.
      */
@@ -127,7 +127,8 @@ export declare class InputModel implements IInputModel {
     /**
      * The chat context (a readonly subset of the chat model);
      */
-    get chatContext(): IChatContext;
+    get chatContext(): IChatContext | undefined;
+    set chatContext(value: IChatContext | undefined);
     /**
      * Function to send a message.
      */
@@ -244,7 +245,7 @@ export declare class InputModel implements IInputModel {
      */
     get isDisposed(): boolean;
     private _onSend;
-    private _chatContext;
+    private _chatContext?;
     private _value;
     private _cursorIndex;
     private _currentWord;
@@ -266,9 +267,9 @@ export declare class InputModel implements IInputModel {
 export declare namespace InputModel {
     interface IOptions {
         /**
-         * The chat context (a readonly subset of the chat model).
+         * The chat context (a subset of the chat model).
          */
-        chatContext: IChatContext;
+        chatContext?: IChatContext;
         /**
          * The function that should send the message.
          * @param content - the content of the message.

package/lib/input-model.js

@@ -104,6 +104,9 @@ export class InputModel {
     get chatContext() {
         return this._chatContext;
     }
+    set chatContext(value) {
+        this._chatContext = value;
+    }
     /**
      * The entire input value.
      */

package/lib/model.d.ts

@@ -22,6 +22,10 @@ export interface IChatModel extends IDisposable {
      * The indexes list of the unread messages.
      */
     unreadMessages: number[];
+    /**
+     * The promise resolving when the model is ready.
+     */
+    readonly ready: Promise<void>;
     /**
      * The indexes list of the messages currently in the viewport.
      */
@@ -173,6 +177,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
      */
     get name(): string;
     set name(value: string);
+    get disposed(): ISignal<AbstractChatModel, void>;
     /**
      * The chat messages list.
      */
@@ -202,6 +207,14 @@ export declare abstract class AbstractChatModel implements IChatModel {
      */
     get lastRead(): number;
     set lastRead(value: number);
+    /**
+     * Promise that resolves when the model is ready.
+     */
+    get ready(): Promise<void>;
+    /**
+     * Set the model as ready.
+     */
+    protected setReady(): void;
     /**
      * The chat settings.
      */
@@ -324,7 +337,9 @@ export declare abstract class AbstractChatModel implements IChatModel {
     private _id;
     private _name;
     private _config;
+    private _readyDelegate;
     private _inputModel;
+    private _disposed;
     private _isDisposed;
     private _commands?;
     private _activeCellManager;

package/lib/model.js

@@ -6,6 +6,7 @@ import { ArrayExt } from '@lumino/algorithm';
 import { Signal } from '@lumino/signaling';
 import { InputModel } from './input-model';
 import { replaceMentionToSpan } from './utils';
+import { PromiseDelegate } from '@lumino/coreutils';
 /**
  * An abstract implementation of IChatModel.
  *
@@ -22,6 +23,8 @@ export class AbstractChatModel {
         this._unreadMessages = [];
         this._messagesInViewport = [];
         this._name = '';
+        this._readyDelegate = new PromiseDelegate();
+        this._disposed = new Signal(this);
         this._isDisposed = false;
         this._notificationId = null;
         this._writers = [];
@@ -43,7 +46,6 @@ export class AbstractChatModel {
             ...config
         };
         this._inputModel = new InputModel({
-            chatContext: this.createChatContext(),
             activeCellManager: options.activeCellManager,
             selectionWatcher: options.selectionWatcher,
             documentManager: options.documentManager,
@@ -56,6 +58,10 @@ export class AbstractChatModel {
         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;
+        this._readyDelegate = new PromiseDelegate();
+        this.ready.then(() => {
+            this._inputModel.chatContext = this.createChatContext();
+        });
     }
     /**
      * The chat model id.
@@ -75,6 +81,9 @@ export class AbstractChatModel {
     set name(value) {
         this._name = value;
     }
+    get disposed() {
+        return this._disposed;
+    }
     /**
      * The chat messages list.
      */
@@ -130,6 +139,18 @@ export class AbstractChatModel {
         storage.lastRead = value;
         localStorage.setItem(`@jupyter/chat:${this._id}`, JSON.stringify(storage));
     }
+    /**
+     * Promise that resolves when the model is ready.
+     */
+    get ready() {
+        return this._readyDelegate.promise;
+    }
+    /**
+     * Set the model as ready.
+     */
+    setReady() {
+        this._readyDelegate.resolve();
+    }
     /**
      * The chat settings.
      */
@@ -254,6 +275,7 @@ export class AbstractChatModel {
             return;
         }
         this._isDisposed = true;
+        this._disposed.emit();
     }
     /**
      * Whether the chat handler is disposed.

package/lib/widgets/chat-widget.js

@@ -6,7 +6,7 @@ import { ReactWidget } from '@jupyterlab/apputils';
 import { isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
 import React from 'react';
 import { Drag } from '@lumino/dragdrop';
-import { Chat } from '../components';
+import { Chat, MESSAGE_CLASS } from '../components';
 import { chatIcon } from '../icons';
 // MIME type constant for file browser drag events
 const FILE_BROWSER_MIME = 'application/x-jupyter-icontentsrich';
@@ -23,7 +23,22 @@ export class ChatWidget extends ReactWidget {
         this.title.caption = 'Jupyter Chat'; // TODO: i18n
         this._chatOptions = options;
         this.id = `jupyter-chat::widget::${options.model.name}`;
-        this.node.onclick = () => this.model.input.focus();
+        this.node.addEventListener('click', (event) => {
+            const target = event.target;
+            if (this.node.contains(document.activeElement)) {
+                return;
+            }
+            const message = target.closest(`.${MESSAGE_CLASS}`);
+            if (message) {
+                const selection = window.getSelection();
+                if (selection &&
+                    selection.toString().trim() !== '' &&
+                    message.contains(selection.anchorNode)) {
+                    return;
+                }
+            }
+            this.model.input.focus();
+        });
     }
     /**
      * Get the model of the widget.

package/lib/widgets/index.d.ts

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

package/lib/widgets/index.js

@@ -5,3 +5,4 @@
 export * from './chat-error';
 export * from './chat-sidebar';
 export * from './chat-widget';
+export * from './multichat-panel';

package/lib/widgets/multichat-panel.d.ts

@@ -0,0 +1,212 @@
+import { PanelWithToolbar, SidePanel } from '@jupyterlab/ui-components';
+import { ISignal } from '@lumino/signaling';
+import { Panel } from '@lumino/widgets';
+import { ChatWidget } from './chat-widget';
+import { Chat, IInputToolbarRegistryFactory } from '../components';
+import { IChatModel } from '../model';
+/**
+ * Generic sidepanel widget including multiple chats and the add chat button.
+ */
+export declare class MultiChatPanel extends SidePanel {
+    constructor(options: MultiChatPanel.IOptions);
+    /**
+     * The sections of the side panel.
+     */
+    get sections(): ChatSection[];
+    /**
+     * A signal emitting when a section is added to the panel.
+     */
+    get sectionAdded(): ISignal<MultiChatPanel, ChatSection>;
+    /**
+     * Add a new widget to the chat panel.
+     *
+     * @param model - the model of the chat widget
+     * @param displayName - the name of the chat.
+     */
+    addChat(args: MultiChatPanel.IAddChatArgs): ChatWidget | undefined;
+    /**
+     * Invoke the update of the list of available chats.
+     */
+    updateChatList(): void;
+    /**
+     * Update the list of available chats.
+     */
+    private _updateChatList;
+    /**
+     * Open a chat if it exists in the side panel.
+     *
+     * @param name - the name of the chat.
+     * @returns a boolean, whether the chat existed in the side panel or not.
+     */
+    openIfExists(name: string): boolean;
+    /**
+     * A message handler invoked on an `'after-attach'` message.
+     */
+    protected onAfterAttach(): void;
+    /**
+     * Return the index of the chat in the list (-1 if not opened).
+     *
+     * @param name - the chat name.
+     */
+    private _getChatIndex;
+    /**
+     * Expand the chat from its index.
+     */
+    private _expandChat;
+    /**
+     * Handle `change` events for the HTMLSelect component.
+     */
+    private _chatSelected;
+    /**
+     * Triggered when a section is toggled. If the section is opened, all others
+     * sections are closed.
+     */
+    private _onExpansionToggled;
+    private _chatNamesChanged;
+    private _sectionAdded;
+    private _rmRegistry;
+    private _themeManager?;
+    private _chatCommandRegistry?;
+    private _attachmentOpenerRegistry?;
+    private _inputToolbarFactory?;
+    private _messageFooterRegistry?;
+    private _welcomeMessage?;
+    private _updateChatListDebouncer;
+    private _createModel?;
+    private _getChatNames?;
+    private _openInMain?;
+    private _renameChat?;
+    private _openChatWidget?;
+}
+/**
+ * The chat panel namespace.
+ */
+export declare namespace MultiChatPanel {
+    /**
+     * Options of the constructor of the chat panel.
+     */
+    interface IOptions extends SidePanel.IOptions, Omit<Chat.IOptions, 'model' | 'inputToolbarRegistry'> {
+        /**
+         * The input toolbar factory;
+         */
+        inputToolbarFactory?: IInputToolbarRegistryFactory;
+        /**
+         * An optional callback to create a chat model.
+         *
+         * @param name - the name of the chat, optional.
+         * @return an object that can be passed to add a chat section.
+         */
+        createModel?: (name?: string) => Promise<IAddChatArgs>;
+        /**
+         * An optional callback to get the list of existing chats.
+         *
+         * @returns an object with display name as key and the "full" name as value.
+         */
+        getChatNames?: () => Promise<{
+            [name: string]: string;
+        }>;
+        /**
+         * An optional callback to open the chat in the main area.
+         *
+         * @param name - the name of the chat to move.
+         */
+        openInMain?: (name: string) => void;
+        /**
+         * An optional callback to rename a chat.
+         *
+         * @param oldName - the old name of the chat.
+         * @param newName - the new name of the chat.
+         * @returns - a boolean, whether the chat has been renamed or not.
+         */
+        renameChat?: (oldName: string, newName: string) => Promise<boolean>;
+    }
+    /**
+     * The options for the add chat method.
+     */
+    interface IAddChatArgs {
+        /**
+         * The model of the chat.
+         * No-op id undefined.
+         */
+        model?: IChatModel;
+        /**
+         * The display name of the chat in the section title.
+         */
+        displayName?: string;
+    }
+}
+/**
+ * The chat section containing a chat widget.
+ */
+export declare class ChatSection extends PanelWithToolbar {
+    /**
+     * Constructor of the chat section.
+     */
+    constructor(options: ChatSection.IOptions);
+    /**
+     * The display name.
+     */
+    get displayName(): string;
+    set displayName(value: string);
+    /**
+     * The chat widget of the section.
+     */
+    get widget(): ChatWidget;
+    /**
+     * The model of the widget.
+     */
+    get model(): IChatModel;
+    /**
+     * Dispose of the resources held by the widget.
+     */
+    dispose(): void;
+    /**
+     *  * Update the section’s title based on the chat name.
+     * */
+    private _updateTitle;
+    /**
+     * Change the title when messages are unread.
+     *
+     * TODO: fix it upstream in @jupyterlab/ui-components.
+     * Updating the title create a new Title widget, but does not attach again the
+     * toolbar. The toolbar is attached only when the title widget is attached the first
+     * time.
+     */
+    private _unreadChanged;
+    private _chatWidget;
+    private _markAsRead;
+    private _spinner;
+    private _displayName;
+}
+/**
+ * The chat section namespace.
+ */
+export declare namespace ChatSection {
+    /**
+     * Options to build a chat section.
+     */
+    interface IOptions extends Panel.IOptions {
+        /**
+         * The widget to display in the section.
+         */
+        widget: ChatWidget;
+        /**
+         * An optional callback to open the chat in the main area.
+         *
+         * @param name - the name of the chat to move.
+         */
+        openInMain?: (name: string) => void;
+        /**
+         * An optional callback to rename a chat.
+         *
+         * @param oldName - the old name of the chat.
+         * @param newName - the new name of the chat.
+         * @returns - a boolean, whether the chat has been renamed or not.
+         */
+        renameChat?: (oldName: string, newName: string) => Promise<boolean>;
+        /**
+         * The name to display in the section title.
+         */
+        displayName?: string;
+    }
+}