@jupyter/chat 0.20.0-alpha.2 → 0.20.0-alpha.3

package/lib/widgets/multichat-panel.js

@@ -7,38 +7,90 @@
  * 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 { addIcon, closeIcon, launchIcon, PanelWithToolbar, ReactWidget, Spinner, ToolbarButton } from '@jupyterlab/ui-components';
+import { ArrayExt } from '@lumino/algorithm';
 import { Debouncer } from '@lumino/polling';
 import { Signal } from '@lumino/signaling';
-import React, { useState } from 'react';
+import { Widget } from '@lumino/widgets';
+import React, { useEffect, useRef, useState } from 'react';
 import { ChatWidget } from './chat-widget';
+import { ChatSelectorPopup } from './chat-selector-popup';
 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';
+const SIDEPANEL_WIDGET_CLASS = 'jp-chat-sidepanel-widget';
+const TOOLBAR_CLASS = 'jp-chat-sidepanel-widget-toolbar';
 /**
  * Generic sidepanel widget including multiple chats and the add chat button.
  */
-export class MultiChatPanel extends SidePanel {
+export class MultiChatPanel extends PanelWithToolbar {
+    /**
+     * The constructor of the multichat panel.
+     */
     constructor(options) {
         super(options);
+        /**
+         * Invoke the update of the list of available chats.
+         */
+        this.updateChatList = () => {
+            this._updateChatListDebouncer.invoke();
+        };
         /**
          * Update the list of available chats.
          */
         this._updateChatList = async () => {
-            var _a;
+            var _a, _b;
             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 : {});
+                if (!ArrayExt.shallowEqual(Object.keys(chatNames !== null && chatNames !== void 0 ? chatNames : {}), Object.keys(this._chatNames))) {
+                    this._chatNames = chatNames !== null && chatNames !== void 0 ? chatNames : {};
+                    (_b = this._chatSelectorPopup) === null || _b === void 0 ? void 0 : _b.updateChats(Object.keys(this._chatNames));
+                }
             }
             catch (e) {
                 console.error('Error getting chat files', e);
             }
         };
-        this._chatNamesChanged = new Signal(this);
-        this._sectionAdded = new Signal(this);
+        /**
+         * Update loaded model when the current widget updates its name.
+         */
+        this._modelNameChanged = (_, change) => {
+            var _a, _b, _c;
+            const model = this.getLoadedModel(change.old);
+            if (model) {
+                this._loadedModels.set(change.new, model);
+                this._loadedModels.delete(change.old);
+                (_a = this._chatSelectorPopup) === null || _a === void 0 ? void 0 : _a.setLoadedModels(this.getLoadedModelNames());
+                if (((_b = this._currentWidget) === null || _b === void 0 ? void 0 : _b.model.name) === model.name) {
+                    (_c = this._chatSelectorPopup) === null || _c === void 0 ? void 0 : _c.setCurrentChat(change.new);
+                }
+            }
+        };
+        /**
+         * Handle chat selection from the popup.
+         */
+        this._onSelectChat = async (name) => {
+            var _a;
+            // Check if model is already loaded
+            let openChatArgs = {
+                model: this.getLoadedModel(name),
+                displayName: name
+            };
+            // If not, create the model.
+            if (!openChatArgs.model && this._createModel) {
+                const chatID = this._chatNames[name];
+                openChatArgs = await this._createModel(chatID);
+            }
+            if (openChatArgs.model) {
+                this.open(openChatArgs);
+            }
+            (_a = this._chatSelectorPopup) === null || _a === void 0 ? void 0 : _a.hide();
+        };
+        this._chatOpened = new Signal(this);
+        this._loadedModels = new Map();
+        this._chatNames = {};
+        this._visibilityChanged = new Signal(this);
         this.id = 'jupyter-chat::multi-chat-panel';
         this.title.icon = chatIcon;
         this.title.caption = 'Jupyter Chat'; // TODO: i18n/
@@ -54,96 +106,173 @@ export class MultiChatPanel extends SidePanel {
             const addChat = new ToolbarButton({
                 onClick: async () => {
                     const addChatArgs = await this._createModel();
-                    this.addChat(addChatArgs);
+                    this.open(addChatArgs);
                 },
                 icon: addIcon,
-                label: 'Chat',
-                tooltip: 'Add a new chat'
+                tooltip: 'Create 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) }));
+            // Chat selector with search input
+            this._openChatWidget = ReactWidget.create(React.createElement(ChatSearchInput, { selectChat: this._onSelectChat, getPopup: () => this._chatSelectorPopup, chatOpened: this._chatOpened }));
             this._openChatWidget.addClass(OPEN_SELECT_CLASS);
             this.toolbar.addItem('openChat', this._openChatWidget);
+            // Create the popup widget (attached to document body)
+            this._chatSelectorPopup = new ChatSelectorPopup({
+                chatNames: [],
+                onSelect: this._onSelectChat,
+                onClose: (name) => {
+                    this.disposeLoadedModel(name);
+                }
+            });
         }
-        const content = this.content;
-        content.expansionToggled.connect(this._onExpansionToggled, this);
+        // Insert the toolbar as first child.
+        this.insertWidget(0, this.toolbar);
         this._updateChatListDebouncer = new Debouncer(this._updateChatList, 200);
     }
     /**
-     * The sections of the side panel.
+     * The currently displayed chat widget.
+     */
+    get current() {
+        return this._currentWidget;
+    }
+    /**
+     * A signal emitting when a chat widget is opened in the panel.
      */
-    get sections() {
-        return this.widgets;
+    get chatOpened() {
+        return this._chatOpened;
     }
     /**
-     * A signal emitting when a section is added to the panel.
+     * A signal emitting when the panel visibility changed.
      */
-    get sectionAdded() {
-        return this._sectionAdded;
+    get visibilityChanged() {
+        return this._visibilityChanged;
     }
     /**
-     * Add a new widget to the chat panel.
+     * Add a chat to the panel by creating or showing its widget.
      *
-     * @param model - the model of the chat widget
-     * @param displayName - the name of the chat.
+     * @param args - the chat args including model and display name.
      */
-    addChat(args) {
-        const { model, displayName } = args;
+    open(args) {
+        var _a, _b;
+        const { model } = args;
         if (!model) {
             return;
         }
-        if (this.openIfExists(model.name)) {
+        const displayName = (_a = args.displayName) !== null && _a !== void 0 ? _a : model.name;
+        // Add model to loaded models
+        if (!this._loadedModels.has(displayName)) {
+            this._loadedModels.set(displayName, model);
+            (_b = this._chatSelectorPopup) === null || _b === void 0 ? void 0 : _b.setLoadedModels(this.getLoadedModelNames());
+        }
+        // Open this chat (will create widget)
+        return this._open(displayName);
+    }
+    /**
+     * Get a loaded model by name, or undefined if not loaded.
+     */
+    getLoadedModel(name) {
+        return this._loadedModels.get(name);
+    }
+    /**
+     * Get all loaded model names.
+     */
+    getLoadedModelNames() {
+        return Array.from(this._loadedModels.keys());
+    }
+    /**
+     * Dispose a model, removing it from loaded models.
+     */
+    disposeLoadedModel(name) {
+        var _a, _b;
+        const model = this._loadedModels.get(name);
+        if (model) {
+            // If this is the currently displayed chat, remove it.
+            if (((_a = this._currentWidget) === null || _a === void 0 ? void 0 : _a.model) === model) {
+                this._currentWidget.nameChanged.disconnect(this._modelNameChanged);
+                this._currentWidget.dispose();
+                this._currentWidget = undefined;
+                // Clear current chat in selector
+                if (this._chatSelectorPopup) {
+                    this._chatSelectorPopup.setCurrentChat(null);
+                }
+            }
+            model.dispose();
+            this._loadedModels.delete(name);
+            (_b = this._chatSelectorPopup) === null || _b === void 0 ? void 0 : _b.setLoadedModels(this.getLoadedModelNames());
+        }
+    }
+    /**
+     * Emit a signal when the panel visibility changed.
+     */
+    onAfterShow(msg) {
+        this._visibilityChanged.emit(true);
+    }
+    onBeforeHide(msg) {
+        this._visibilityChanged.emit(false);
+    }
+    /**
+     * Open a specific chat by name, creating a new sidepanel widget.
+     */
+    _open(name) {
+        const model = this._loadedModels.get(name);
+        if (!model) {
             return;
         }
-        const content = this.content;
-        for (let i = 0; i < this.widgets.length; i++) {
-            content.collapse(i);
+        // Dispose current chat widget if any
+        if (this._currentWidget) {
+            this._currentWidget.nameChanged.disconnect(this._modelNameChanged);
+            this._currentWidget.dispose();
         }
         // Create the toolbar registry.
         let inputToolbarRegistry;
         if (this._inputToolbarFactory) {
             inputToolbarRegistry = this._inputToolbarFactory.create();
         }
-        // Create a new widget.
-        const widget = new ChatWidget({
+        // Create a new widget for this model
+        const chatWidget = new ChatWidget({
             model,
             ...this._chatOptions,
             inputToolbarRegistry,
             area: 'sidebar'
         });
-        const section = new ChatSection({
-            widget,
+        // Create a chat with toolbar
+        const widget = new SidePanelWidget({
+            widget: chatWidget,
+            displayName: name,
             openInMain: this._openInMain,
             renameChat: this._renameChat,
-            displayName
+            onClose: (name) => {
+                this.disposeLoadedModel(name);
+            }
         });
-        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();
+        // Add to content panel
+        this.addWidget(widget);
+        this.update();
+        this._currentWidget = widget;
+        this._currentWidget.nameChanged.connect(this._modelNameChanged);
+        // Update selector to show current chat
+        if (this._chatSelectorPopup) {
+            this._chatSelectorPopup.setCurrentChat(name);
+        }
+        this._chatOpened.emit(chatWidget);
+        return chatWidget;
     }
     /**
-     * Open a chat if it exists in the side panel.
+     * Open a chat if its model is already loaded.
      *
      * @param name - the name of the chat.
-     * @returns a boolean, whether the chat existed in the side panel or not.
+     * @returns a boolean, whether the chat model was already loaded or not.
      */
-    openIfExists(name) {
-        const index = this._getChatIndex(name);
-        if (index > -1) {
-            this._expandChat(index);
+    openIfLoaded(name) {
+        const model = this._loadedModels.get(name);
+        if (model) {
+            this._open(name);
+            return true;
         }
-        return index > -1;
+        return false;
     }
     /**
      * A message handler invoked on an `'after-attach'` message.
@@ -151,82 +280,65 @@ export class MultiChatPanel extends SidePanel {
     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);
+        // Attach the popup to the document body
+        if (this._chatSelectorPopup && !this._chatSelectorPopup.isAttached) {
+            Widget.attach(this._chatSelectorPopup, document.body);
         }
     }
     /**
-     * Handle `change` events for the HTMLSelect component.
+     * A message handler invoked on an `'before-detach'` message.
      */
-    async _chatSelected(event) {
-        const selection = event.target.value;
-        if (selection === '-') {
-            return;
-        }
-        if (this._createModel) {
-            const addChatArgs = await this._createModel(selection);
-            this.addChat(addChatArgs);
+    onBeforeDetach() {
+        // Detach the popup
+        if (this._chatSelectorPopup && this._chatSelectorPopup.isAttached) {
+            Widget.detach(this._chatSelectorPopup);
         }
-        event.target.selectedIndex = 0;
     }
     /**
-     * Triggered when a section is toggled. If the section is opened, all others
-     * sections are closed.
+     * Dispose of the resources held by the widget.
      */
-    _onExpansionToggled(panel, index) {
-        if (!this.widgets[index].isVisible) {
-            return;
+    dispose() {
+        // Dispose all loaded models
+        for (const model of this._loadedModels.values()) {
+            model.dispose();
         }
-        for (let i = 0; i < this.widgets.length; i++) {
-            if (i !== index) {
-                panel.collapse(i);
-            }
+        this._loadedModels.clear();
+        if (this._chatSelectorPopup) {
+            this._chatSelectorPopup.dispose();
+            this._chatSelectorPopup = undefined;
         }
+        super.dispose();
     }
 }
 /**
- * The chat section containing a chat widget.
+ * A widget containing the chat and its toolbar.
  */
-export class ChatSection extends PanelWithToolbar {
-    /**
-     * Constructor of the chat section.
-     */
+class SidePanelWidget extends PanelWithToolbar {
     constructor(options) {
-        var _a, _b, _c, _d, _e;
-        super(options);
+        var _a, _b, _c, _d;
+        super();
         /**
-         * 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.
+         * Enable/disable unread icon.
          */
         this._unreadChanged = (_, unread) => {
             this._markAsRead.enabled = unread.length > 0;
         };
-        this._spinner = new Spinner();
+        this._nameChanged = new Signal(this);
         this._chatWidget = options.widget;
-        this.addWidget(this._chatWidget);
-        this.addWidget(this._spinner);
-        this.addClass(SECTION_CLASS);
+        this._displayName = (_a = options.displayName) !== null && _a !== void 0 ? _a : options.widget.model.name;
+        this.addClass(SIDEPANEL_WIDGET_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.addWidget(this.toolbar);
+        // Add spinner while loading
+        const spinner = new Spinner();
+        this.addWidget(spinner);
+        this._chatWidget.model.ready.then(() => {
+            spinner.dispose();
+        });
+        // Add the chat widget
+        this.addWidget(this._chatWidget);
+        // Add toolbar buttons
         this._markAsRead = new ToolbarButton({
             icon: readIcon,
             iconLabel: 'Mark chat as read',
@@ -244,24 +356,32 @@ export class ChatSection extends PanelWithToolbar {
                 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
+                    if (!options.renameChat) {
+                        return;
                     }
-                    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))) {
+                    let newName;
+                    if (options.renameChat === true) {
+                        // If rename chat is true, let's provide a input to select new name.
+                        const result = await InputDialog.getText({
+                            title: 'Rename Chat',
+                            text: this.model.name,
+                            placeholder: 'new-name'
+                        });
+                        if (!result.button.accept && result.value) {
+                            return;
+                        }
+                        newName = result.value;
+                        if (newName) {
                             this.model.name = newName;
-                            this._displayName = newName;
-                            this._updateTitle();
                         }
                     }
+                    else {
+                        // Rename chat is a function, let's call it.
+                        newName = await options.renameChat(this.model.name);
+                    }
+                    if (newName) {
+                        this.name = newName;
+                    }
                 }
             });
             this.toolbar.addItem('rename', renameButton);
@@ -275,8 +395,7 @@ export class ChatSection extends PanelWithToolbar {
                     var _a;
                     const name = this.model.name;
                     if (await ((_a = options.openInMain) === null || _a === void 0 ? void 0 : _a.call(options, name))) {
-                        this.model.dispose();
-                        this.dispose();
+                        options.onClose(this._displayName);
                     }
                 }
             });
@@ -287,33 +406,16 @@ export class ChatSection extends PanelWithToolbar {
             iconLabel: 'Close the chat',
             className: 'jp-mod-styled',
             onClick: () => {
-                this.model.dispose();
-                this.dispose();
+                options.onClose(this._displayName);
             }
         });
         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();
+        // Update mark as read button state
+        (_b = this.model.unreadChanged) === null || _b === void 0 ? void 0 : _b.connect(this._unreadChanged);
+        this._markAsRead.enabled = ((_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.unreadMessages.length) !== null && _d !== void 0 ? _d : 0) > 0;
     }
     /**
-     * The chat widget of the section.
+     * The chat widget embedded in the sidepanel widget.
      */
     get widget() {
         return this._chatWidget;
@@ -324,6 +426,27 @@ export class ChatSection extends PanelWithToolbar {
     get model() {
         return this._chatWidget.model;
     }
+    /**
+     * The displayed name of the widget.
+     */
+    get name() {
+        return this._displayName;
+    }
+    set name(value) {
+        const old = this._displayName;
+        if (old === value) {
+            return;
+        }
+        this._displayName = value;
+        this._updateTitle();
+        this._nameChanged.emit({ old, new: value });
+    }
+    /**
+     * A signal emitting when the name has changed.
+     */
+    get nameChanged() {
+        return this._nameChanged;
+    }
     /**
      * Dispose of the resources held by the widget.
      */
@@ -336,25 +459,99 @@ export class ChatSection extends PanelWithToolbar {
         super.dispose();
     }
     /**
-     *  * Update the section’s title based on the chat name.
-     * */
+     * Update the title based on the chat name.
+     */
     _updateTitle() {
-        this.title.label = this._displayName;
+        this.title.label = this.model.name;
         this.title.caption = this._displayName;
+        const titleElement = document.createElement('span');
+        titleElement.classList.add('jp-chat-sidepanel-widget-title');
+        titleElement.title = this._displayName;
+        titleElement.textContent = this._displayName;
+        // Dispose of the previous widget.
+        if (this._titleWidget) {
+            this._titleWidget.dispose();
+        }
+        // Insert the new title widget in toolbar.
+        this._titleWidget = new Widget({ node: titleElement });
+        this.toolbar.insertItem(0, 'title', this._titleWidget);
     }
 }
 /**
- * A component to select a chat from the drive.
+ * A search input component for selecting a chat.
  */
-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, { key: Object.keys(chatNames).join(), onChange: handleChange, value: "-" },
-        React.createElement("option", { value: "-", disabled: true, hidden: true }, "Open a chat"),
-        Object.keys(chatNames).map(name => (React.createElement("option", { value: chatNames[name] }, name)))));
+function ChatSearchInput({ selectChat, getPopup, chatOpened }) {
+    const [query, setQuery] = useState('');
+    const inputRef = useRef(null);
+    useEffect(() => {
+        const resetQuery = () => {
+            setQuery('');
+        };
+        chatOpened.connect(resetQuery);
+        return () => {
+            chatOpened.disconnect(resetQuery);
+        };
+    }, [chatOpened]);
+    const handleInputChange = (event) => {
+        const value = event.target.value;
+        setQuery(value);
+        const popup = getPopup();
+        if (popup) {
+            popup.setQuery(value);
+            if (!popup.isVisible && value) {
+                popup.show();
+            }
+        }
+    };
+    const handleInputFocus = () => {
+        const popup = getPopup();
+        if (popup && inputRef.current) {
+            // Set anchor element before showing
+            popup.anchor = inputRef.current;
+            popup.setQuery(query);
+            popup.show();
+        }
+    };
+    const handleInputClick = () => {
+        var _a;
+        const popup = getPopup();
+        if (popup && inputRef.current && !popup.isVisible) {
+            popup.anchor = inputRef.current;
+            popup.setQuery(query);
+            popup.show();
+        }
+        // Force focus on input.
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleKeyDown = (event) => {
+        const popup = getPopup();
+        if (!popup || !popup.isVisible) {
+            return;
+        }
+        let value;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                popup.selectNext();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                popup.selectPrevious();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                value = popup.getSelectedValue();
+                if (value) {
+                    selectChat(value);
+                    popup.hide();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                popup.hide();
+                setQuery('');
+                break;
+        }
+    };
+    return (React.createElement("input", { ref: inputRef, type: "text", placeholder: "Select a chat", value: query, onChange: handleInputChange, onFocus: handleInputFocus, onClick: handleInputClick, onKeyDown: handleKeyDown, className: "jp-chat-search-input" }));
 }