@jupyter/chat 0.20.0-alpha.2 → 0.20.0

package/lib/components/attachments.js

@@ -3,10 +3,11 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import CloseIcon from '@mui/icons-material/Close';
-import { Box, Button, Tooltip } from '@mui/material';
+import { Box, Tooltip } from '@mui/material';
 import React from 'react';
 import { PathExt } from '@jupyterlab/coreutils';
 import { UUID } from '@lumino/coreutils';
+import { TooltippedIconButton } from './mui-extras';
 import { useChatContext } from '../context';
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
 const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
@@ -79,17 +80,11 @@ export function AttachmentPreview(props) {
                         }
                         : {}
                 } }, getAttachmentDisplayName(props.attachment))),
-        props.onRemove && (React.createElement(Tooltip, { title: remove_tooltip, placement: "top", arrow: true },
-            React.createElement("span", null,
-                React.createElement(Button, { onClick: () => props.onRemove(props.attachment), size: "small", className: REMOVE_BUTTON_CLASS, "aria-label": remove_tooltip, sx: {
-                        minWidth: 'unset',
-                        padding: 0,
-                        lineHeight: 0,
-                        color: 'var(--jp-ui-font-color2)',
-                        '&:hover': {
-                            color: 'var(--jp-ui-font-color0)',
-                            backgroundColor: 'transparent'
-                        }
-                    } },
-                    React.createElement(CloseIcon, { fontSize: "small" })))))));
+        props.onRemove && (React.createElement(TooltippedIconButton, { tooltip: remove_tooltip, onClick: () => props.onRemove(props.attachment), className: REMOVE_BUTTON_CLASS, inputToolbar: false, sx: {
+                width: 'unset',
+                minWidth: 'unset',
+                height: 'unset',
+                padding: 0
+            } },
+            React.createElement(CloseIcon, { fontSize: "small" })))));
 }

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 export * from './active-cell-manager';
 export * from './components';
+export * from './context';
 export * from './icons';
 export * from './input-model';
 export * from './model';

package/lib/index.js

@@ -4,6 +4,7 @@
  */
 export * from './active-cell-manager';
 export * from './components';
+export * from './context';
 export * from './icons';
 export * from './input-model';
 export * from './model';

package/lib/message.d.ts

@@ -1,6 +1,5 @@
-import { IRenderMime } from '@jupyterlab/rendermime';
 import { ISignal } from '@lumino/signaling';
-import { IAttachment, IMessageContent, IMessage, IMessageMetadata, IUser } from './types';
+import { IAttachment, IMessageContent, IMessage, IMessageMetadata, IUser, IMimeModelBody } from './types';
 /**
  * The message object.
  */
@@ -19,7 +18,7 @@ export declare class Message implements IMessage {
      * Getters for each attribute individually.
      */
     get type(): string;
-    get body(): string | (Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>);
+    get body(): string | IMimeModelBody;
     get id(): string;
     get time(): number;
     get sender(): IUser;

package/lib/theme-provider.js

@@ -159,10 +159,6 @@ export async function getJupyterLabTheme() {
             }
         },
         palette: {
-            background: {
-                paper: getCSSVariable('--jp-layout-color1'),
-                default: getCSSVariable('--jp-layout-color1')
-            },
             mode: light ? 'light' : 'dark',
             primary: {
                 main: getCSSVariable(`--jp-brand-color${light ? '1' : '2'}`),

package/lib/tokens.d.ts

@@ -1,10 +1,17 @@
 import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
 import { Token } from '@lumino/coreutils';
 import { ChatWidget } from './widgets';
+import { IChatModel } from './model';
+/**
+ * The main area chat widget type.
+ */
+export type MainAreaChat = MainAreaWidget<ChatWidget> & {
+    model: IChatModel;
+};
 /**
  * the chat tracker type.
  */
-export type IChatTracker = IWidgetTracker<ChatWidget | MainAreaWidget<ChatWidget>>;
+export type IChatTracker = IWidgetTracker<ChatWidget | MainAreaChat>;
 /**
  * A chat tracker token.
  */

package/lib/types.d.ts

@@ -53,6 +53,10 @@ export interface IConfig {
      */
     showDeleted?: boolean;
 }
+/**
+ * Mime model body type, a partial mime bundle model containing at least the data.
+ */
+export type IMimeModelBody = Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>;
 /**
  * An empty interface to describe optional metadata attached to a chat message.
  * Extensions can augment this interface to add custom fields:
@@ -72,7 +76,7 @@ export interface IMessageMetadata {
  */
 export type IMessageContent<T = IUser, U = IAttachment> = {
     type: string;
-    body: string | (Partial<IRenderMime.IMimeModel> & Pick<IRenderMime.IMimeModel, 'data'>);
+    body: string | IMimeModelBody;
     id: string;
     time: number;
     sender: T;

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 chat 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';