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

package/lib/widgets/chat-selector-popup.d.ts

@@ -0,0 +1,102 @@
+/// <reference types="react" />
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { Message } from '@lumino/messaging';
+/**
+ * A popup widget for selecting a chat from a filtered list.
+ */
+export declare class ChatSelectorPopup extends ReactWidget {
+    constructor(options: ChatSelectorPopup.IOptions);
+    /**
+     * Getter/setter of the anchor element.
+     */
+    get anchor(): HTMLElement | null;
+    set anchor(element: HTMLElement | null);
+    /**
+     * Update the list of available chats.
+     */
+    updateChats(chatNames: string[]): void;
+    /**
+     * Update the list of loaded models.
+     */
+    setLoadedModels(loadedModels: string[]): void;
+    /**
+     * Set the currently displayed chat.
+     */
+    setCurrentChat(chatName: string | null): void;
+    /**
+     * Set the search query and filter the list.
+     */
+    setQuery(query: string): void;
+    /**
+     * Get the currently selected chat value.
+     */
+    getSelectedValue(): string | null;
+    /**
+     * Move selection down.
+     */
+    selectNext(): void;
+    /**
+     * Move selection up.
+     */
+    selectPrevious(): void;
+    /**
+     * Show the popup and position it.
+     */
+    show(): void;
+    /**
+     * Hide the popup.
+     */
+    hide(): void;
+    render(): JSX.Element;
+    protected onAfterShow(msg: Message): void;
+    protected onAfterHide(msg: Message): void;
+    /**
+     * Check if the popup should move (anchor has moved).
+     */
+    private _checkPosition;
+    /**
+     * Position the popup below the search element.
+     */
+    private _positionPopup;
+    /**
+     * Update the filtered and sorted chats based on current state.
+     */
+    private _updateFilteredChats;
+    private _handleItemClick;
+    private _handleUpdateSelectedName;
+    private _handleClose;
+    private _handleOutsideClick;
+    private _chatNames;
+    private _loadedModels;
+    private _currentChat;
+    private _query;
+    private _selectedName;
+    private _filteredChats;
+    private _onSelect?;
+    private _onClose?;
+    private _anchor;
+    private _anchorRect;
+}
+/**
+ * Namespace for ChatSelectorPopup.
+ */
+export declare namespace ChatSelectorPopup {
+    interface IOptions {
+        /**
+         * Object mapping display names to values used to identify/open chats.
+         */
+        chatNames: string[];
+        /**
+         * Callback when a chat is selected.
+         */
+        onSelect?: (name: string) => void;
+        /**
+         * Callback when a chat is closed/disposed.
+         */
+        onClose?: (name: string) => void;
+        /**
+         * The element to anchor the popup to.
+         */
+        anchor?: HTMLElement;
+    }
+}

package/lib/widgets/chat-selector-popup.js

@@ -0,0 +1,293 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Button } from '@jupyter/react-components';
+import { closeIcon, ReactWidget } from '@jupyterlab/ui-components';
+import React, { useEffect, useRef } from 'react';
+const POPUP_CLASS = 'jp-chat-selector-popup';
+const POPUP_LIST_CLASS = 'jp-chat-selector-popup-list';
+const POPUP_ITEM_CLASS = 'jp-chat-selector-popup-item';
+const POPUP_ITEM_ACTIVE_CLASS = 'jp-chat-selector-popup-item-active';
+const POPUP_ITEM_LABEL_CLASS = 'jp-chat-selector-popup-item-label';
+const POPUP_EMPTY_CLASS = 'jp-chat-selector-popup-empty';
+/**
+ * A popup widget for selecting a chat from a filtered list.
+ */
+export class ChatSelectorPopup extends ReactWidget {
+    constructor(options) {
+        var _a;
+        super();
+        /**
+         * Check if the popup should move (anchor has moved).
+         */
+        this._checkPosition = () => {
+            var _a;
+            if (!this._anchor) {
+                return;
+            }
+            const rect = this._anchor.getBoundingClientRect();
+            if (rect.bottom !== ((_a = this._anchorRect) === null || _a === void 0 ? void 0 : _a.bottom) ||
+                rect.left !== this._anchorRect.left ||
+                rect.width !== this._anchorRect.width) {
+                this._positionPopup();
+            }
+        };
+        this._handleItemClick = (name) => {
+            if (this._onSelect) {
+                this._onSelect(name);
+            }
+        };
+        this._handleUpdateSelectedName = (name) => {
+            this._selectedName = name;
+        };
+        this._handleClose = (name) => {
+            if (this._onClose) {
+                this._onClose(name);
+            }
+        };
+        this._handleOutsideClick = (event) => {
+            if (this.isHidden) {
+                return;
+            }
+            const target = event.target;
+            if (!this.node.contains(target) &&
+                this._anchor &&
+                !this._anchor.contains(target)) {
+                this.hide();
+            }
+        };
+        this._chatNames = [];
+        this._loadedModels = new Set();
+        this._currentChat = null;
+        this._query = '';
+        this._selectedName = null;
+        this._filteredChats = [];
+        this._anchor = null;
+        this._anchorRect = null;
+        this.addClass(POPUP_CLASS);
+        this._chatNames = options.chatNames;
+        this._onSelect = options.onSelect;
+        this._onClose = options.onClose;
+        this._anchor = (_a = options.anchor) !== null && _a !== void 0 ? _a : null;
+        // Start hidden
+        this.hide();
+        // Initialize filtered chats
+        this._updateFilteredChats();
+    }
+    /**
+     * Getter/setter of the anchor element.
+     */
+    get anchor() {
+        return this._anchor;
+    }
+    set anchor(element) {
+        this._anchor = element;
+    }
+    /**
+     * Update the list of available chats.
+     */
+    updateChats(chatNames) {
+        this._chatNames = chatNames;
+        this._updateFilteredChats();
+        this.update();
+    }
+    /**
+     * Update the list of loaded models.
+     */
+    setLoadedModels(loadedModels) {
+        this._loadedModels = new Set(loadedModels);
+        this._updateFilteredChats();
+        this.update();
+    }
+    /**
+     * Set the currently displayed chat.
+     */
+    setCurrentChat(chatName) {
+        this._currentChat = chatName;
+        this.update();
+    }
+    /**
+     * Set the search query and filter the list.
+     */
+    setQuery(query) {
+        this._query = query;
+        this._updateFilteredChats();
+        // When filtering, select first in filtered list
+        if (query.trim()) {
+            this._selectedName =
+                this._filteredChats.length > 0 ? this._filteredChats[0] : null;
+        }
+        this.update();
+    }
+    /**
+     * Get the currently selected chat value.
+     */
+    getSelectedValue() {
+        return this._selectedName;
+    }
+    /**
+     * Move selection down.
+     */
+    selectNext() {
+        if (this._filteredChats.length === 0) {
+            return;
+        }
+        const currentIndex = this._filteredChats.findIndex(name => name === this._selectedName);
+        // If not found or at the end, wrap to first or move down
+        if (currentIndex === -1) {
+            // No selection yet, select first
+            this._selectedName = this._filteredChats[0];
+        }
+        else if (currentIndex < this._filteredChats.length - 1) {
+            // Move to next
+            this._selectedName = this._filteredChats[currentIndex + 1];
+        }
+        this.update();
+    }
+    /**
+     * Move selection up.
+     */
+    selectPrevious() {
+        if (this._filteredChats.length === 0) {
+            return;
+        }
+        const currentIndex = this._filteredChats.findIndex(name => name === this._selectedName);
+        // If not found, select last; otherwise move up
+        if (currentIndex === -1) {
+            // No selection yet, select last
+            this._selectedName = this._filteredChats[this._filteredChats.length - 1];
+        }
+        else if (currentIndex > 0) {
+            // Move to previous
+            this._selectedName = this._filteredChats[currentIndex - 1];
+        }
+        this.update();
+    }
+    /**
+     * Show the popup and position it.
+     */
+    show() {
+        let needsUpdate = false;
+        if (this._filteredChats.length > 0) {
+            const oldSelection = this._selectedName;
+            // If there's a current chat and no query, select it
+            if (this._currentChat && !this._query.trim()) {
+                this._selectedName = this._currentChat;
+            }
+            else if (!this._selectedName) {
+                // Otherwise select first chat if nothing is selected
+                this._selectedName = this._filteredChats[0];
+            }
+            needsUpdate = oldSelection !== this._selectedName;
+        }
+        super.show();
+        this._positionPopup();
+        // Only update if selection changed
+        if (needsUpdate) {
+            this.update();
+        }
+    }
+    /**
+     * Hide the popup.
+     */
+    hide() {
+        this._anchorRect = null;
+        super.hide();
+    }
+    render() {
+        return (React.createElement(ChatSelectorList, { names: this._filteredChats, selectedName: this._selectedName, loadedModels: this._loadedModels, onSelect: this._handleItemClick, onUpdateSelectedName: this._handleUpdateSelectedName, onClose: this._handleClose }));
+    }
+    onAfterShow(msg) {
+        super.onAfterShow(msg);
+        document.addEventListener('pointerdown', this._handleOutsideClick, true);
+        window.addEventListener('resize', this._checkPosition);
+    }
+    onAfterHide(msg) {
+        document.removeEventListener('pointerdown', this._handleOutsideClick, true);
+        window.removeEventListener('resize', this._checkPosition);
+        super.onAfterHide(msg);
+    }
+    /**
+     * Position the popup below the search element.
+     */
+    _positionPopup() {
+        if (!this._anchor) {
+            return;
+        }
+        this._anchorRect = this._anchor.getBoundingClientRect();
+        const rect = this.node.getBoundingClientRect();
+        const margin = 8;
+        let left = this._anchorRect.left;
+        if (this._anchorRect.left + rect.width > window.innerWidth - margin) {
+            left = window.innerWidth - margin - rect.width;
+        }
+        let top = this._anchorRect.bottom;
+        if (this._anchorRect.bottom + rect.height > window.innerHeight - margin) {
+            top = window.innerHeight - margin - rect.height;
+        }
+        this.node.style.minWidth = `${this._anchorRect.width}px`;
+        this.node.style.top = `${top}px`;
+        this.node.style.left = `${left}px`;
+    }
+    /**
+     * Update the filtered and sorted chats based on current state.
+     */
+    _updateFilteredChats() {
+        let filteredChats = Array.from(new Set([...this._chatNames, ...this._loadedModels]));
+        // Filter by query if present
+        if (this._query.trim()) {
+            const queryLower = this._query.toLowerCase();
+            filteredChats = filteredChats.filter(name => name.toLowerCase().includes(queryLower));
+        }
+        // Separate into loaded and non-loaded
+        const loadedChats = [];
+        const nonLoadedChats = [];
+        filteredChats.forEach(name => {
+            if (this._loadedModels.has(name)) {
+                loadedChats.push(name);
+            }
+            else {
+                nonLoadedChats.push(name);
+            }
+        });
+        // Sort each group alphabetically by name
+        loadedChats.sort();
+        nonLoadedChats.sort();
+        // Combine: loaded first, then non-loaded
+        this._filteredChats = [...loadedChats, ...nonLoadedChats];
+    }
+}
+/**
+ * React component for rendering the chat list.
+ */
+function ChatSelectorList({ names, selectedName, loadedModels, onSelect, onUpdateSelectedName, onClose }) {
+    const listRef = useRef(null);
+    // Scroll selected item into view
+    useEffect(() => {
+        if (listRef.current && selectedName) {
+            const selectedItem = listRef.current.querySelector(`[data-chat-name="${CSS.escape(selectedName)}"]`);
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }
+    }, [selectedName]);
+    const handleCloseClick = (event, name) => {
+        event.stopPropagation();
+        onClose(name);
+    };
+    if (names.length === 0) {
+        return React.createElement("div", { className: POPUP_EMPTY_CLASS }, "No chats found");
+    }
+    return (React.createElement("ul", { ref: listRef, className: POPUP_LIST_CLASS }, names.map(name => {
+        const isLoaded = loadedModels.has(name);
+        return (React.createElement("li", { key: name, "data-chat-name": name, className: `${POPUP_ITEM_CLASS} ${name === selectedName ? POPUP_ITEM_ACTIVE_CLASS : ''}`, onClick: () => onSelect(name), onMouseEnter: () => onUpdateSelectedName(name) },
+            React.createElement("div", { className: "jp-chat-selector-popup-item-content" },
+                React.createElement("div", { className: "jp-chat-selector-popup-item-text" },
+                    React.createElement("div", { className: POPUP_ITEM_LABEL_CLASS },
+                        React.createElement("span", { className: "jp-chat-selector-popup-item-name", title: name }, name),
+                        isLoaded && (React.createElement("span", { className: "jp-chat-selector-popup-item-indicator" }, "\u25CF")))),
+                isLoaded && (React.createElement(Button, { onClick: e => handleCloseClick(e, name), appearance: "stealth", title: "Close and dispose this chat", className: "jp-chat-selector-popup-item-close" },
+                    React.createElement(closeIcon.react, { tag: null }))))));
+    })));
+}

package/lib/widgets/chat-widget.js

@@ -26,6 +26,7 @@ export class ChatWidget extends ReactWidget {
         this.title.caption = 'Jupyter Chat'; // TODO: i18n
         this._chatOptions = options;
         this.id = `jupyter-chat::widget::${options.model.name}`;
+        this.addClass('jp-chat-widget');
         this.node.addEventListener('click', (event) => {
             const target = event.target;
             if (this.node.contains(document.activeElement)) {

package/lib/widgets/index.d.ts

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

package/lib/widgets/index.js

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './chat-error';
+export * from './chat-selector-popup';
 export * from './chat-sidebar';
 export * from './chat-widget';
 export * from './multichat-panel';