@jupyter/chat 0.17.0 → 0.18.0

package/lib/widgets/multichat-panel.js

@@ -0,0 +1,368 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Multi-chat panel for @jupyter/chat
+ * Originally adapted from jupyterlab-chat's ChatPanel
+ */
+import { InputDialog } from '@jupyterlab/apputils';
+import { addIcon, closeIcon, HTMLSelect, launchIcon, PanelWithToolbar, ReactWidget, SidePanel, Spinner, ToolbarButton } from '@jupyterlab/ui-components';
+import { Debouncer } from '@lumino/polling';
+import { Signal } from '@lumino/signaling';
+import React, { useState } from 'react';
+import { ChatWidget } from './chat-widget';
+import { chatIcon, readIcon } from '../icons';
+const SIDEPANEL_CLASS = 'jp-chat-sidepanel';
+const ADD_BUTTON_CLASS = 'jp-chat-add';
+const OPEN_SELECT_CLASS = 'jp-chat-open';
+const SECTION_CLASS = 'jp-chat-section';
+const TOOLBAR_CLASS = 'jp-chat-section-toolbar';
+/**
+ * Generic sidepanel widget including multiple chats and the add chat button.
+ */
+export class MultiChatPanel extends SidePanel {
+    constructor(options) {
+        super(options);
+        /**
+         * Update the list of available chats.
+         */
+        this._updateChatList = async () => {
+            var _a;
+            try {
+                const chatNames = await ((_a = this._getChatNames) === null || _a === void 0 ? void 0 : _a.call(this));
+                this._chatNamesChanged.emit(chatNames !== null && chatNames !== void 0 ? chatNames : {});
+            }
+            catch (e) {
+                console.error('Error getting chat files', e);
+            }
+        };
+        this._chatNamesChanged = new Signal(this);
+        this._sectionAdded = new Signal(this);
+        this.id = 'jupyter-chat::multi-chat-panel';
+        this.title.icon = chatIcon;
+        this.title.caption = 'Jupyter Chat'; // TODO: i18n/
+        this.addClass(SIDEPANEL_CLASS);
+        this._rmRegistry = options.rmRegistry;
+        this._themeManager = options.themeManager;
+        this._chatCommandRegistry = options.chatCommandRegistry;
+        this._attachmentOpenerRegistry = options.attachmentOpenerRegistry;
+        this._inputToolbarFactory = options.inputToolbarFactory;
+        this._messageFooterRegistry = options.messageFooterRegistry;
+        this._welcomeMessage = options.welcomeMessage;
+        this._getChatNames = options.getChatNames;
+        this._createModel = options.createModel;
+        this._openInMain = options.openInMain;
+        this._renameChat = options.renameChat;
+        if (this._createModel) {
+            // Add chat button calls the createChat callback
+            const addChat = new ToolbarButton({
+                onClick: async () => {
+                    const addChatArgs = await this._createModel();
+                    this.addChat(addChatArgs);
+                },
+                icon: addIcon,
+                label: 'Chat',
+                tooltip: 'Add a new chat'
+            });
+            addChat.addClass(ADD_BUTTON_CLASS);
+            this.toolbar.addItem('createChat', addChat);
+        }
+        if (this._getChatNames && this._createModel) {
+            // Chat select dropdown
+            this._openChatWidget = ReactWidget.create(React.createElement(ChatSelect, { chatNamesChanged: this._chatNamesChanged, handleChange: this._chatSelected.bind(this) }));
+            this._openChatWidget.addClass(OPEN_SELECT_CLASS);
+            this.toolbar.addItem('openChat', this._openChatWidget);
+        }
+        const content = this.content;
+        content.expansionToggled.connect(this._onExpansionToggled, this);
+        this._updateChatListDebouncer = new Debouncer(this._updateChatList, 200);
+    }
+    /**
+     * The sections of the side panel.
+     */
+    get sections() {
+        return this.widgets;
+    }
+    /**
+     * A signal emitting when a section is added to the panel.
+     */
+    get sectionAdded() {
+        return this._sectionAdded;
+    }
+    /**
+     * 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) {
+        const { model, displayName } = args;
+        if (!model) {
+            return;
+        }
+        if (this.openIfExists(model.name)) {
+            return;
+        }
+        const content = this.content;
+        for (let i = 0; i < this.widgets.length; i++) {
+            content.collapse(i);
+        }
+        // Create the toolbar registry.
+        let inputToolbarRegistry;
+        if (this._inputToolbarFactory) {
+            inputToolbarRegistry = this._inputToolbarFactory.create();
+        }
+        // Create a new widget.
+        const widget = new ChatWidget({
+            model,
+            rmRegistry: this._rmRegistry,
+            themeManager: this._themeManager,
+            chatCommandRegistry: this._chatCommandRegistry,
+            attachmentOpenerRegistry: this._attachmentOpenerRegistry,
+            inputToolbarRegistry,
+            messageFooterRegistry: this._messageFooterRegistry,
+            welcomeMessage: this._welcomeMessage
+        });
+        const section = new ChatSection({
+            widget,
+            openInMain: this._openInMain,
+            renameChat: this._renameChat,
+            displayName
+        });
+        this.addWidget(section);
+        content.expand(this.widgets.length - 1);
+        this._sectionAdded.emit(section);
+        return widget;
+    }
+    /**
+     * Invoke the update of the list of available chats.
+     */
+    updateChatList() {
+        this._updateChatListDebouncer.invoke();
+    }
+    /**
+     * 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) {
+        const index = this._getChatIndex(name);
+        if (index > -1) {
+            this._expandChat(index);
+        }
+        return index > -1;
+    }
+    /**
+     * A message handler invoked on an `'after-attach'` message.
+     */
+    onAfterAttach() {
+        var _a, _b;
+        (_b = (_a = this._openChatWidget) === null || _a === void 0 ? void 0 : _a.renderPromise) === null || _b === void 0 ? void 0 : _b.then(() => this.updateChatList());
+    }
+    /**
+     * Return the index of the chat in the list (-1 if not opened).
+     *
+     * @param name - the chat name.
+     */
+    _getChatIndex(name) {
+        return this.sections.findIndex(section => { var _a; return ((_a = section.model) === null || _a === void 0 ? void 0 : _a.name) === name; });
+    }
+    /**
+     * Expand the chat from its index.
+     */
+    _expandChat(index) {
+        if (!this.widgets[index].isVisible) {
+            this.content.expand(index);
+        }
+    }
+    /**
+     * Handle `change` events for the HTMLSelect component.
+     */
+    async _chatSelected(event) {
+        const selection = event.target.value;
+        if (selection === '-') {
+            return;
+        }
+        if (this._createModel) {
+            const addChatArgs = await this._createModel(selection);
+            this.addChat(addChatArgs);
+        }
+        event.target.selectedIndex = 0;
+    }
+    /**
+     * Triggered when a section is toggled. If the section is opened, all others
+     * sections are closed.
+     */
+    _onExpansionToggled(panel, index) {
+        if (!this.widgets[index].isVisible) {
+            return;
+        }
+        for (let i = 0; i < this.widgets.length; i++) {
+            if (i !== index) {
+                panel.collapse(i);
+            }
+        }
+    }
+}
+/**
+ * The chat section containing a chat widget.
+ */
+export class ChatSection extends PanelWithToolbar {
+    /**
+     * Constructor of the chat section.
+     */
+    constructor(options) {
+        var _a, _b, _c, _d, _e;
+        super(options);
+        /**
+         * 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.
+         */
+        this._unreadChanged = (_, unread) => {
+            this._markAsRead.enabled = unread.length > 0;
+        };
+        this._spinner = new Spinner();
+        this._chatWidget = options.widget;
+        this.addWidget(this._chatWidget);
+        this.addWidget(this._spinner);
+        this.addClass(SECTION_CLASS);
+        this.toolbar.addClass(TOOLBAR_CLASS);
+        this._displayName =
+            (_b = (_a = options.displayName) !== null && _a !== void 0 ? _a : options.widget.model.name) !== null && _b !== void 0 ? _b : 'Chat';
+        this._updateTitle();
+        this._markAsRead = new ToolbarButton({
+            icon: readIcon,
+            iconLabel: 'Mark chat as read',
+            className: 'jp-mod-styled',
+            onClick: () => {
+                if (this.model) {
+                    this.model.unreadMessages = [];
+                }
+            }
+        });
+        this.toolbar.addItem('markRead', this._markAsRead);
+        if (options.renameChat) {
+            const renameButton = new ToolbarButton({
+                iconClass: 'jp-EditIcon',
+                iconLabel: 'Rename chat',
+                className: 'jp-mod-styled',
+                onClick: async () => {
+                    var _a, _b;
+                    const oldName = (_a = this.model.name) !== null && _a !== void 0 ? _a : 'Chat';
+                    const result = await InputDialog.getText({
+                        title: 'Rename Chat',
+                        text: this.model.name,
+                        placeholder: 'new-name'
+                    });
+                    if (!result.button.accept) {
+                        return; // user cancelled
+                    }
+                    const newName = result.value;
+                    if (this.model && newName && newName !== oldName) {
+                        if (await ((_b = options.renameChat) === null || _b === void 0 ? void 0 : _b.call(options, oldName, newName))) {
+                            this.model.name = newName;
+                            this._displayName = newName;
+                            this._updateTitle();
+                        }
+                    }
+                }
+            });
+            this.toolbar.addItem('rename', renameButton);
+        }
+        if (options.openInMain) {
+            const moveToMain = new ToolbarButton({
+                icon: launchIcon,
+                iconLabel: 'Move the chat to the main area',
+                className: 'jp-mod-styled',
+                onClick: () => {
+                    var _a;
+                    const name = this.model.name;
+                    this.model.dispose();
+                    (_a = options.openInMain) === null || _a === void 0 ? void 0 : _a.call(options, name);
+                    this.dispose();
+                }
+            });
+            this.toolbar.addItem('moveMain', moveToMain);
+        }
+        const closeButton = new ToolbarButton({
+            icon: closeIcon,
+            iconLabel: 'Close the chat',
+            className: 'jp-mod-styled',
+            onClick: () => {
+                this.model.dispose();
+                this.dispose();
+            }
+        });
+        this.toolbar.addItem('close', closeButton);
+        (_c = this.model.unreadChanged) === null || _c === void 0 ? void 0 : _c.connect(this._unreadChanged);
+        this._markAsRead.enabled = ((_e = (_d = this.model) === null || _d === void 0 ? void 0 : _d.unreadMessages.length) !== null && _e !== void 0 ? _e : 0) > 0;
+        options.widget.node.style.height = '100%';
+        /**
+         * Remove the spinner when the chat is ready.
+         */
+        this.model.ready.then(() => {
+            this._spinner.dispose();
+        });
+    }
+    /**
+     * The display name.
+     */
+    get displayName() {
+        return this._displayName;
+    }
+    set displayName(value) {
+        this._displayName = value;
+        this._updateTitle();
+    }
+    /**
+     * The chat widget of the section.
+     */
+    get widget() {
+        return this._chatWidget;
+    }
+    /**
+     * The model of the widget.
+     */
+    get model() {
+        return this._chatWidget.model;
+    }
+    /**
+     * Dispose of the resources held by the widget.
+     */
+    dispose() {
+        var _a;
+        const model = this.model;
+        if (model) {
+            (_a = model.unreadChanged) === null || _a === void 0 ? void 0 : _a.disconnect(this._unreadChanged);
+        }
+        super.dispose();
+    }
+    /**
+     *  * Update the section’s title based on the chat name.
+     * */
+    _updateTitle() {
+        this.title.label = this._displayName;
+        this.title.caption = this._displayName;
+    }
+}
+/**
+ * A component to select a chat from the drive.
+ */
+function ChatSelect({ chatNamesChanged, handleChange }) {
+    // An object associating a chat name to its path. Both are purely indicative, the name
+    // is the section title and the path is used as caption.
+    const [chatNames, setChatNames] = useState({});
+    // Update the chat list.
+    chatNamesChanged.connect((_, chatNames) => {
+        setChatNames(chatNames);
+    });
+    return (React.createElement(HTMLSelect, { onChange: handleChange, value: "-" },
+        React.createElement("option", { value: "-" }, "Open a chat"),
+        Object.keys(chatNames).map(name => (React.createElement("option", { value: chatNames[name] }, name)))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -60,9 +60,10 @@
     "@lumino/commands": "^2.0.0",
     "@lumino/coreutils": "^2.0.0",
     "@lumino/disposable": "^2.0.0",
+    "@lumino/polling": "^2.0.0",
     "@lumino/signaling": "^2.0.0",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.0",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
     "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

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

@@ -7,10 +7,10 @@ import {
   Autocomplete,
   AutocompleteInputChangeReason,
   Box,
-  InputAdornment,
   SxProps,
   TextField,
-  Theme
+  Theme,
+  Toolbar
 } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
@@ -26,6 +26,8 @@ import { IChatCommandRegistry } from '../../registers';
 import { IAttachment } from '../../types';
 
 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: ChatInput.IProps): JSX.Element {
@@ -185,7 +187,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       <Autocomplete
         {...chatCommands.autocompleteProps}
         // ensure the autocomplete popup always renders on top
-        componentsProps={{
+        slotProps={{
           popper: {
             placement: 'top'
           },
@@ -193,12 +195,12 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
             sx: {
               border: '1px solid lightgray'
             }
-          }
-        }}
-        ListboxProps={{
-          sx: {
-            '& .MuiAutocomplete-option': {
-              padding: 2
+          },
+          listbox: {
+            sx: {
+              '& .MuiAutocomplete-option': {
+                padding: 2
+              }
             }
           }
         }}
@@ -206,7 +208,8 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
           <TextField
             {...params}
             fullWidth
-            variant="outlined"
+            variant="filled"
+            className={INPUT_TEXTFIELD_CLASS}
             multiline
             onKeyDown={handleKeyDown}
             placeholder="Start chatting"
@@ -215,23 +218,13 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
             onSelect={() =>
               (model.cursorIndex = inputRef.current?.selectionStart ?? null)
             }
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: (
-                <InputAdornment position="end" className={INPUT_TOOLBAR_CLASS}>
-                  {toolbarElements.map(item => (
-                    <item.element
-                      model={model}
-                      chatCommandRegistry={props.chatCommandRegistry}
-                    />
-                  ))}
-                </InputAdornment>
-              )
-            }}
-            FormHelperTextProps={{
-              sx: { marginLeft: 'auto', marginRight: 0 }
+            slotProps={{
+              input: {
+                ...params.InputProps,
+                className: INPUT_COMPONENT_CLASS
+              }
             }}
-            helperText={input.length > 2 ? helperText : ' '}
+            label={input.length > 2 ? helperText : ' '}
           />
         )}
         inputValue={input}
@@ -248,6 +241,14 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
           }
         }}
       />
+      <Toolbar className={INPUT_TOOLBAR_CLASS}>
+        {toolbarElements.map(item => (
+          <item.element
+            model={model}
+            chatCommandRegistry={props.chatCommandRegistry}
+          />
+        ))}
+      </Toolbar>
     </Box>
   );
 }

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

@@ -2,11 +2,12 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { Token } from '@lumino/coreutils';
+import { ISignal, Signal } from '@lumino/signaling';
 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';
 
 /**
@@ -166,3 +167,22 @@ export namespace InputToolbarRegistry {
     return registry;
   }
 }
+
+/**
+ * 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 const IInputToolbarRegistryFactory =
+  new Token<IInputToolbarRegistryFactory>(
+    '@jupyter/chat:IInputToolbarRegistryFactory'
+  );

package/src/components/messages/messages.tsx

@@ -21,8 +21,8 @@ import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
 import { IChatModel } from '../../model';
 import { IChatMessage, IUser } from '../../types';
 
+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';
 
 /**

package/src/input-model.ts

@@ -16,9 +16,9 @@ import { IAttachment, INotebookAttachment, 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.
@@ -175,10 +175,14 @@ export class InputModel implements IInputModel {
   /**
    * The chat context (a readonly subset of the chat model);
    */
-  get chatContext(): IChatContext {
+  get chatContext(): IChatContext | undefined {
     return this._chatContext;
   }
 
+  set chatContext(value: IChatContext | undefined) {
+    this._chatContext = value;
+  }
+
   /**
    * Function to send a message.
    */
@@ -468,7 +472,7 @@ export class InputModel implements IInputModel {
   }
 
   private _onSend: (input: string, model?: InputModel) => void;
-  private _chatContext: IChatContext;
+  private _chatContext?: IChatContext;
   private _value: string;
   private _cursorIndex: number | null = null;
   private _currentWord: string | null = null;
@@ -491,9 +495,9 @@ export class InputModel implements IInputModel {
 export namespace InputModel {
   export 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.

package/src/model.ts

@@ -20,6 +20,7 @@ import {
   IUser
 } from './types';
 import { replaceMentionToSpan } from './utils';
+import { PromiseDelegate } from '@lumino/coreutils';
 
 /**
  * The chat model interface.
@@ -40,6 +41,11 @@ export interface IChatModel extends IDisposable {
    */
   unreadMessages: number[];
 
+  /**
+   * The promise resolving when the model is ready.
+   */
+  readonly ready: Promise<void>;
+
   /**
    * The indexes list of the messages currently in the viewport.
    */
@@ -226,7 +232,6 @@ export abstract class AbstractChatModel implements IChatModel {
     };
 
     this._inputModel = new InputModel({
-      chatContext: this.createChatContext(),
       activeCellManager: options.activeCellManager,
       selectionWatcher: options.selectionWatcher,
       documentManager: options.documentManager,
@@ -241,6 +246,12 @@ export abstract class AbstractChatModel implements IChatModel {
     this._activeCellManager = options.activeCellManager ?? null;
     this._selectionWatcher = options.selectionWatcher ?? null;
     this._documentManager = options.documentManager ?? null;
+
+    this._readyDelegate = new PromiseDelegate<void>();
+
+    this.ready.then(() => {
+      this._inputModel.chatContext = this.createChatContext();
+    });
   }
 
   /**
@@ -263,6 +274,10 @@ export abstract class AbstractChatModel implements IChatModel {
     this._name = value;
   }
 
+  get disposed(): ISignal<AbstractChatModel, void> {
+    return this._disposed;
+  }
+
   /**
    * The chat messages list.
    */
@@ -328,6 +343,20 @@ export abstract class AbstractChatModel implements IChatModel {
     localStorage.setItem(`@jupyter/chat:${this._id}`, JSON.stringify(storage));
   }
 
+  /**
+   * Promise that resolves when the model is ready.
+   */
+  get ready(): Promise<void> {
+    return this._readyDelegate.promise;
+  }
+
+  /**
+   * Set the model as ready.
+   */
+  protected setReady(): void {
+    this._readyDelegate.resolve();
+  }
+
   /**
    * The chat settings.
    */
@@ -484,6 +513,7 @@ export abstract class AbstractChatModel implements IChatModel {
       return;
     }
     this._isDisposed = true;
+    this._disposed.emit();
   }
 
   /**
@@ -677,7 +707,9 @@ export abstract class AbstractChatModel implements IChatModel {
   private _id: string | undefined;
   private _name: string = '';
   private _config: IConfig;
+  private _readyDelegate = new PromiseDelegate<void>();
   private _inputModel: IInputModel;
+  private _disposed = new Signal<this, void>(this);
   private _isDisposed = false;
   private _commands?: CommandRegistry;
   private _activeCellManager: IActiveCellManager | null;