@jupyterlite/ai 0.18.0 → 0.19.0

package/lib/chat-commands/clear.d.ts

@@ -6,3 +6,4 @@ export declare class ClearCommandProvider implements IChatCommandProvider {
     private _command;
     private _regex;
 }
+//# sourceMappingURL=clear.d.ts.map

package/lib/chat-commands/index.d.ts

@@ -1,2 +1,3 @@
 export * from './clear';
 export * from './skills';
+//# sourceMappingURL=index.d.ts.map

package/lib/chat-commands/skills.d.ts

@@ -1,6 +1,6 @@
+import type { ISkillRegistry } from '@jupyternaut/agent';
 import { ChatCommand, IChatCommandProvider, IInputModel } from '@jupyter/chat';
 import { CommandRegistry } from '@lumino/commands';
-import { ISkillRegistry } from '../tokens';
 export declare class SkillsCommandProvider implements IChatCommandProvider {
     constructor(options: SkillsCommandProvider.IOptions);
     id: string;
@@ -17,3 +17,4 @@ export declare namespace SkillsCommandProvider {
         commands: CommandRegistry;
     }
 }
+//# sourceMappingURL=skills.d.ts.map

package/lib/chat-model-handler.d.ts

@@ -1,8 +1,9 @@
+import type { IAgentManagerFactory, IProviderRegistry, IToolRegistry } from '@jupyternaut/agent';
 import { ActiveCellManager } from '@jupyter/chat';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Contents } from '@jupyterlab/services';
-import type { IAgentManagerFactory, IAIChatModel, IAISettingsModel, IChatModelHandler, ICreateChatOptions, IProviderRegistry, IToolRegistry } from './tokens';
+import type { IAIChatModel, IAISettingsModel, IChatModelHandler, ICreateChatOptions } from './tokens';
 /**
  * The chat model handler.
  */
@@ -59,3 +60,4 @@ export declare namespace ChatModelHandler {
         contentsManager?: Contents.IManager;
     }
 }
+//# sourceMappingURL=chat-model-handler.d.ts.map

package/lib/chat-model.d.ts

@@ -1,9 +1,11 @@
 import { AbstractChatModel, IActiveCellManager, IAttachment, IChatContext, IMessageContent, IMimeModelBody, INewMessage, IUser } from '@jupyter/chat';
 import { IDocumentManager } from '@jupyterlab/docmanager';
+import * as nbformat from '@jupyterlab/nbformat';
 import { Contents } from '@jupyterlab/services';
+import type { IAgentManager, IProviderRegistry, ITokenUsage } from '@jupyternaut/agent';
 import { ISignal } from '@lumino/signaling';
 import type { UserContent } from 'ai';
-import type { IAgentManager, IAIChatModel, IAISettingsModel, IProviderRegistry, ITokenUsage } from './tokens';
+import type { IAIChatModel, IAISettingsModel } from './tokens';
 /**
  * AI Chat Model implementation that provides chat functionality tool integration,
  * and MCP server support.
@@ -107,6 +109,17 @@ export declare class AIChatModel extends AbstractChatModel implements IAIChatMod
      * @param messageId The ID of the queued message to remove
      */
     removeQueuedMessage(messageId: string): void;
+    /**
+     * Reorders queued messages by their IDs.
+     * @param messageIds Array of message IDs in the desired order
+     */
+    reorderQueuedMessages(messageIds: string[]): void;
+    /**
+     * Edits a queued message by its ID.
+     * @param messageId The ID of the queued message to edit
+     * @param newBody The new body of the message
+     */
+    editQueuedMessage(messageId: string, newBody: string): void;
     /**
      * Save the chat as json file.
      */
@@ -233,18 +246,29 @@ export declare class AIChatModel extends AbstractChatModel implements IAIChatMod
     private _titleChanged;
 }
 declare namespace Private {
-    interface IQueuedItem {
+    export interface IQueuedItem {
         id: string;
         body: string;
         _originalMsg: IMessageContent;
     }
+    type IDisplayOutput = nbformat.IDisplayData | nbformat.IDisplayUpdate | nbformat.IExecuteResult;
+    export const isPlainObject: (value: unknown) => value is Record<string, unknown>;
+    export const isDisplayOutput: (value: unknown) => value is IDisplayOutput;
+    export const toMimeBundle: (value: IDisplayOutput, trustedMimeTypes: ReadonlySet<string>) => IMimeModelBody | null;
+    /**
+     * Normalize arbitrary tool payloads into canonical display outputs.
+     *
+     * Tool outputs are not guaranteed to be raw Jupyter IOPub messages; they are
+     * often wrapped objects (for example `{ success, result: { outputs: [...] } }`).
+     */
+    export const toDisplayOutputs: (value: unknown) => IDisplayOutput[];
     /**
      * Extract rendermime-ready mime bundles from arbitrary tool results.
      */
-    function extractMimeBundlesFromUnknown(content: unknown, options?: {
+    export function extractMimeBundlesFromUnknown(content: unknown, options?: {
         trustedMimeTypes?: ReadonlyArray<string>;
     }): IMimeModelBody[];
-    function formatToolOutput(outputData: unknown): string;
+    export function formatToolOutput(outputData: unknown): string;
     /**
      * Processes file attachments and returns the message content with the attachments.
      * @param attachments Array of file attachments to process
@@ -255,28 +279,29 @@ declare namespace Private {
      * @param supportsAudio Whether the model supports audio
      * @returns Enhanced message content
      */
-    function processAttachments(attachments: IAttachment[], documentManager: IDocumentManager | null | undefined, body: string, supportsImages: boolean, supportsPdf: boolean, supportsAudio: boolean): Promise<UserContent>;
+    export function processAttachments(attachments: IAttachment[], documentManager: IDocumentManager | null | undefined, body: string, supportsImages: boolean, supportsPdf: boolean, supportsAudio: boolean): Promise<UserContent>;
     /**
      * Reads a binary attachment and returns its base64-encoded content.
      * @param attachment The attachment to read
      * @param documentManager Optional document manager for file operations
      * @returns Base64 string or null if unable to read
      */
-    function readBinaryAttachment(attachment: IAttachment, documentManager: IDocumentManager | null | undefined): Promise<string | null>;
+    export function readBinaryAttachment(attachment: IAttachment, documentManager: IDocumentManager | null | undefined): Promise<string | null>;
     /**
      * Reads the content of a notebook cell.
      * @param attachment The notebook attachment to read
      * @param documentManager Optional document manager for file operations
      * @returns Cell content as string or null if unable to read
      */
-    function readNotebookCells(attachment: IAttachment, documentManager: IDocumentManager | null | undefined): Promise<string | null>;
+    export function readNotebookCells(attachment: IAttachment, documentManager: IDocumentManager | null | undefined): Promise<string | null>;
     /**
      * Reads the content of a file attachment.
      * @param attachment The file attachment to read
      * @param documentManager Optional document manager for file operations
      * @returns File content as string or null if unable to read
      */
-    function readFileAttachment(attachment: IAttachment, documentManager: IDocumentManager | null | undefined): Promise<string | null>;
+    export function readFileAttachment(attachment: IAttachment, documentManager: IDocumentManager | null | undefined): Promise<string | null>;
+    export {};
 }
 /**
  * Namespace containing types and interfaces for AIChatModel.
@@ -339,6 +364,18 @@ export declare namespace AIChatModel {
          * The agent manager of the chat.
          */
         agentManager: IAgentManager;
+        /**
+         * Removes a queued message by its ID.
+         */
+        removeQueuedMessage: (id: string) => void;
+        /**
+         * Reorders queued messages by their IDs.
+         */
+        reorderQueuedMessages: (ids: string[]) => void;
+        /**
+         * Edits a queued message by its ID.
+         */
+        editQueuedMessage: (id: string, body: string) => void;
     }
     /**
      * The exported chat format.
@@ -380,3 +417,4 @@ export declare namespace AIChatModel {
     };
 }
 export {};
+//# sourceMappingURL=chat-model.d.ts.map

package/lib/chat-model.js

@@ -1,11 +1,11 @@
 import { AbstractChatModel } from '@jupyter/chat';
 import { PathExt } from '@jupyterlab/coreutils';
 import * as nbformat from '@jupyterlab/nbformat';
+import { AI_AVATAR } from '@jupyternaut/agent';
 import { UUID } from '@lumino/coreutils';
 import { Debouncer } from '@lumino/polling';
 import { Signal } from '@lumino/signaling';
-import { AI_AVATAR } from './icons';
-import { modelSupportsAudio, modelSupportsImages, modelSupportsPdf } from './providers/model-info';
+import { modelSupportsAudio, modelSupportsImages, modelSupportsPdf } from '@jupyternaut/agent';
 /**
  * AI Chat Model implementation that provides chat functionality tool integration,
  * and MCP server support.
@@ -151,7 +151,10 @@ export class AIChatModel extends AbstractChatModel {
             stopStreaming: () => this.stopStreaming(),
             clearMessages: () => this.clearMessages(),
             agentManager: this._agentManager,
-            addSystemMessage: (body) => this._addSystemMessage(body)
+            addSystemMessage: (body) => this._addSystemMessage(body),
+            removeQueuedMessage: (id) => this.removeQueuedMessage(id),
+            reorderQueuedMessages: (ids) => this.reorderQueuedMessages(ids),
+            editQueuedMessage: (id, body) => this.editQueuedMessage(id, body)
         };
     }
     /**
@@ -284,7 +287,9 @@ export class AIChatModel extends AbstractChatModel {
         finally {
             this._drainQueue();
             if (this._settingsModel.config.autoTitle &&
-                (this.messages.length <= 5 || this.title === null)) {
+                (this.messages.filter(msg => msg.sender.username !== 'ai-assistant')
+                    .length <= 5 ||
+                    this.title === null)) {
                 try {
                     this.title = await this.requestTitle();
                 }
@@ -363,8 +368,30 @@ export class AIChatModel extends AbstractChatModel {
      * @param messageId The ID of the queued message to remove
      */
     removeQueuedMessage(messageId) {
-        this._messageQueue = this._messageQueue.filter(msg => msg.id !== messageId);
-        this._updateQueueUI();
+        this.messageQueue = this._messageQueue.filter(msg => msg.id !== messageId);
+    }
+    /**
+     * Reorders queued messages by their IDs.
+     * @param messageIds Array of message IDs in the desired order
+     */
+    reorderQueuedMessages(messageIds) {
+        const byId = new Map(this._messageQueue.map(m => [m.id, m]));
+        this.messageQueue = messageIds
+            .map(id => byId.get(id))
+            .filter((m) => m !== undefined);
+    }
+    /**
+     * Edits a queued message by its ID.
+     * @param messageId The ID of the queued message to edit
+     * @param newBody The new body of the message
+     */
+    editQueuedMessage(messageId, newBody) {
+        const queue = [...this._messageQueue];
+        const index = queue.findIndex(m => m.id === messageId);
+        if (index !== -1) {
+            queue[index] = { ...queue[index], body: newBody };
+            this.messageQueue = queue;
+        }
     }
     /**
      * Save the chat as json file.
@@ -433,7 +460,7 @@ export class AIChatModel extends AbstractChatModel {
             }
         }
         else if (!silent) {
-            console.log(`Provider not providing when restoring ${filepath}.`);
+            console.log(`Provider not provided when restoring ${filepath}.`);
         }
         const messages = content.messages.map(message => {
             let attachments = [];
@@ -637,6 +664,7 @@ export class AIChatModel extends AbstractChatModel {
         this.messageAdded(aiMessage);
         this._currentStreamingMessage =
             this.messages.find(message => message.id === aiMessage.id) ?? null;
+        this._updateQueueUI();
     }
     /**
      * Handles streaming message chunks from the AI agent.
@@ -773,6 +801,7 @@ export class AIChatModel extends AbstractChatModel {
             raw_time: false
         };
         this.messageAdded(toolCallMessage);
+        this._updateQueueUI();
     }
     /**
      * Handles the completion of a tool call execution.
@@ -831,6 +860,7 @@ export class AIChatModel extends AbstractChatModel {
             type: 'msg',
             raw_time: false
         });
+        this._updateQueueUI();
     }
     /**
      * Handles tool approval request events from the AI agent.
@@ -941,11 +971,11 @@ export class AIChatModel extends AbstractChatModel {
 }
 var Private;
 (function (Private) {
-    const isPlainObject = (value) => {
+    Private.isPlainObject = (value) => {
         return typeof value === 'object' && value !== null && !Array.isArray(value);
     };
-    const isDisplayOutput = (value) => {
-        if (!isPlainObject(value)) {
+    Private.isDisplayOutput = (value) => {
+        if (!Private.isPlainObject(value)) {
             return false;
         }
         const output = value;
@@ -953,14 +983,14 @@ var Private;
             nbformat.isDisplayUpdate(output) ||
             nbformat.isExecuteResult(output));
     };
-    const toMimeBundle = (value, trustedMimeTypes) => {
+    Private.toMimeBundle = (value, trustedMimeTypes) => {
         const data = value.data;
-        if (!isPlainObject(data) || Object.keys(data).length === 0) {
+        if (!Private.isPlainObject(data) || Object.keys(data).length === 0) {
             return null;
         }
         return {
             data: data,
-            ...(isPlainObject(value.metadata)
+            ...(Private.isPlainObject(value.metadata)
                 ? { metadata: value.metadata }
                 : {}),
             // MIME auto-rendering only runs for explicitly configured command IDs.
@@ -976,21 +1006,21 @@ var Private;
      * Tool outputs are not guaranteed to be raw Jupyter IOPub messages; they are
      * often wrapped objects (for example `{ success, result: { outputs: [...] } }`).
      */
-    const toDisplayOutputs = (value) => {
-        if (isDisplayOutput(value)) {
+    Private.toDisplayOutputs = (value) => {
+        if (Private.isDisplayOutput(value)) {
             return [value];
         }
         if (Array.isArray(value)) {
-            return value.filter(isDisplayOutput);
+            return value.filter(Private.isDisplayOutput);
         }
-        if (!isPlainObject(value)) {
+        if (!Private.isPlainObject(value)) {
             return [];
         }
         if (Array.isArray(value.outputs)) {
-            return value.outputs.filter(isDisplayOutput);
+            return value.outputs.filter(Private.isDisplayOutput);
         }
         if ('result' in value) {
-            return toDisplayOutputs(value.result);
+            return Private.toDisplayOutputs(value.result);
         }
         return [];
     };
@@ -999,10 +1029,10 @@ var Private;
      */
     function extractMimeBundlesFromUnknown(content, options = {}) {
         const bundles = [];
-        const outputs = toDisplayOutputs(content);
+        const outputs = Private.toDisplayOutputs(content);
         const trustedMimeTypes = new Set(options.trustedMimeTypes ?? []);
         for (const output of outputs) {
-            const bundle = toMimeBundle(output, trustedMimeTypes);
+            const bundle = Private.toMimeBundle(output, trustedMimeTypes);
             if (bundle) {
                 bundles.push(bundle);
             }

package/lib/completion/completion-provider.d.ts

@@ -1,6 +1,7 @@
+import { IProviderRegistry } from '@jupyternaut/agent';
 import { CompletionHandler, IInlineCompletionContext, IInlineCompletionList, IInlineCompletionProvider } from '@jupyterlab/completer';
 import { ISecretsManager } from 'jupyter-secrets-manager';
-import { type IAISettingsModel, type IProviderRegistry } from '../tokens';
+import type { IAISettingsModel } from '../tokens';
 /**
  * Configuration interface for provider-specific completion behavior
  */
@@ -82,3 +83,4 @@ export declare namespace AICompletionProvider {
         token: symbol | null;
     }
 }
+//# sourceMappingURL=completion-provider.d.ts.map

package/lib/completion/completion-provider.js

@@ -1,7 +1,6 @@
+import { createCompletionModel, SECRETS_NAMESPACE } from '@jupyternaut/agent';
 import { NotebookPanel } from '@jupyterlab/notebook';
 import { generateText } from 'ai';
-import { createCompletionModel } from '../providers/models';
-import { SECRETS_NAMESPACE } from '../tokens';
 /**
  * Default temperature for code completion (lower than chat for more deterministic results)
  */

package/lib/completion/index.d.ts

@@ -1 +1,2 @@
 export * from './completion-provider';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/clear-button.d.ts

@@ -21,3 +21,4 @@ export declare function ClearButton(props: IClearButtonProps): JSX.Element;
  * Factory returning the clear button toolbar item.
  */
 export declare function clearItem(translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;
+//# sourceMappingURL=clear-button.d.ts.map

package/lib/components/clear-button.js

@@ -1,18 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TooltippedButton } from '@jupyter/chat';
 import ClearIcon from '@mui/icons-material/Clear';
-import React from 'react';
 /**
  * The clear button component.
  */
 export function ClearButton(props) {
     const { translator: trans } = props;
     const tooltip = trans.__('Clear chat');
-    return (React.createElement(TooltippedButton, { onClick: props.clearMessages, tooltip: tooltip, buttonProps: {
+    return (_jsx(TooltippedButton, { onClick: props.clearMessages, tooltip: tooltip, buttonProps: {
             title: tooltip,
             variant: 'outlined',
             color: 'secondary'
-        } },
-        React.createElement(ClearIcon, null)));
+        }, children: _jsx(ClearIcon, {}) }));
 }
 /**
  * Factory returning the clear button toolbar item.

package/lib/components/completion-status.d.ts

@@ -23,3 +23,4 @@ export declare class CompletionStatusWidget extends ReactWidget {
     private _props;
 }
 export {};
+//# sourceMappingURL=completion-status.d.ts.map

package/lib/components/completion-status.js

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { ReactWidget } from '@jupyterlab/ui-components';
-import { jupyternautIcon } from '../icons';
+import { jupyternautIcon } from '@jupyternaut/agent';
 const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
 const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
 /**
@@ -34,7 +35,7 @@ function CompletionStatus(props) {
             props.settingsModel.stateChanged.disconnect(stateChanged);
         };
     }, [props.settingsModel, trans]);
-    return (React.createElement(jupyternautIcon.react, { className: disabled ? COMPLETION_DISABLED_CLASS : '', top: '2px', width: '16px', stylesheet: 'statusBar', title: title }));
+    return (_jsx(jupyternautIcon.react, { className: disabled ? COMPLETION_DISABLED_CLASS : '', top: '2px', width: '16px', stylesheet: 'statusBar', title: title }));
 }
 /**
  * The completion status widget that will be added to the status bar.
@@ -46,7 +47,7 @@ export class CompletionStatusWidget extends ReactWidget {
         this._props = options;
     }
     render() {
-        return React.createElement(CompletionStatus, { ...this._props });
+        return _jsx(CompletionStatus, { ...this._props });
     }
     _props;
 }

package/lib/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './model-select';
 export * from './stop-button';
 export * from './usage-display';
 export * from './tool-select';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/model-select.d.ts

@@ -22,3 +22,4 @@ export declare function ModelSelect(props: IModelSelectProps): JSX.Element;
  * Factory function returning the toolbar item for model selection.
  */
 export declare function createModelSelectItem(settingsModel: IAISettingsModel, translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;
+//# sourceMappingURL=model-select.d.ts.map

package/lib/components/model-select.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { TooltippedButton } from '@jupyter/chat';
 import CheckIcon from '@mui/icons-material/Check';
 import { Menu, MenuItem, Typography } from '@mui/material';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 /**
  * The model select component for choosing AI models.
  */
@@ -60,7 +61,7 @@ export function ModelSelect(props) {
     }));
     // Show a message if no providers are configured
     if (availableModels.length === 0) {
-        return (React.createElement(TooltippedButton, { onClick: () => { }, tooltip: trans.__('No providers configured. Please go to AI Settings to add a provider.'), buttonProps: {
+        return (_jsx(TooltippedButton, { onClick: () => { }, tooltip: trans.__('No providers configured. Please go to AI Settings to add a provider.'), buttonProps: {
                 variant: 'outlined',
                 color: 'warning',
                 disabled: true,
@@ -70,72 +71,66 @@ export function ModelSelect(props) {
                 width: 'unset',
                 display: 'flex',
                 alignItems: 'center'
-            } },
-            React.createElement(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500 } }, trans.__('No Providers'))));
+            }, children: _jsx(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500 }, children: trans.__('No Providers') }) }));
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TooltippedButton, { onClick: e => {
-                openMenu(e.currentTarget);
-            }, tooltip: trans.__('Current Model: %1 - %2', currentProviderLabel, currentModel), buttonProps: {
-                title: trans.__('Select AI Model'),
-                onKeyDown: e => {
-                    if (e.key !== 'Enter' && e.key !== ' ') {
-                        return;
-                    }
+    return (_jsxs(_Fragment, { children: [_jsx(TooltippedButton, { onClick: e => {
                     openMenu(e.currentTarget);
-                    // Stop propagation to prevent sending message
-                    e.stopPropagation();
-                }
-            }, sx: {
-                minWidth: 'auto',
-                width: 'unset',
-                display: 'flex',
-                alignItems: 'center'
-            } },
-            React.createElement(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500, textTransform: 'none' } }, currentProviderLabel)),
-        React.createElement(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {
-                vertical: 'top',
-                horizontal: 'right'
-            }, transformOrigin: {
-                vertical: 'bottom',
-                horizontal: 'right'
-            }, sx: {
-                '& .MuiPaper-root': {
-                    maxHeight: '300px',
-                    overflowY: 'auto'
-                },
-                '& .MuiMenuItem-root': {
-                    padding: '0.5em',
-                    paddingRight: '2em',
-                    minWidth: '200px'
-                }
-            } }, availableModels.map(({ provider, providerLabel, isSelected }) => (React.createElement(MenuItem, { key: provider, onClick: async (e) => {
-                await selectModel(provider);
-                // Prevent sending message on model selection
-                e.stopPropagation();
-            }, sx: {
-                backgroundColor: isSelected
-                    ? 'var(--mui-palette-primary-main)'
-                    : 'transparent',
-                '&:hover': {
-                    backgroundColor: isSelected
-                        ? 'var(--mui-palette-primary-main)'
-                        : 'var(--jp-layout-color1)'
-                },
-                display: 'flex',
-                alignItems: 'center',
-                gap: '8px'
-            } },
-            isSelected ? (React.createElement(CheckIcon, { sx: {
-                    color: 'var(--jp-ui-inverse-font-color1)',
-                    fontSize: 16
-                } })) : (React.createElement("div", { style: { width: '16px' } })),
-            React.createElement(Typography, { variant: "body2", component: "div", sx: {
-                    fontWeight: isSelected ? 600 : 400,
-                    color: isSelected
-                        ? 'var(--jp-ui-inverse-font-color1)'
-                        : 'inherit'
-                } }, providerLabel)))))));
+                }, tooltip: trans.__('Current Model: %1 - %2', currentProviderLabel, currentModel), buttonProps: {
+                    title: trans.__('Select AI Model'),
+                    onKeyDown: e => {
+                        if (e.key !== 'Enter' && e.key !== ' ') {
+                            return;
+                        }
+                        openMenu(e.currentTarget);
+                        // Stop propagation to prevent sending message
+                        e.stopPropagation();
+                    }
+                }, sx: {
+                    minWidth: 'auto',
+                    width: 'unset',
+                    display: 'flex',
+                    alignItems: 'center'
+                }, children: _jsx(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500, textTransform: 'none' }, children: currentProviderLabel }) }), _jsx(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, sx: {
+                    '& .MuiPaper-root': {
+                        maxHeight: '300px',
+                        overflowY: 'auto'
+                    },
+                    '& .MuiMenuItem-root': {
+                        padding: '0.5em',
+                        paddingRight: '2em',
+                        minWidth: '200px'
+                    }
+                }, children: availableModels.map(({ provider, providerLabel, isSelected }) => (_jsxs(MenuItem, { onClick: async (e) => {
+                        await selectModel(provider);
+                        // Prevent sending message on model selection
+                        e.stopPropagation();
+                    }, sx: {
+                        backgroundColor: isSelected
+                            ? 'var(--mui-palette-primary-main)'
+                            : 'transparent',
+                        '&:hover': {
+                            backgroundColor: isSelected
+                                ? 'var(--mui-palette-primary-main)'
+                                : 'var(--jp-layout-color1)'
+                        },
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px'
+                    }, children: [isSelected ? (_jsx(CheckIcon, { sx: {
+                                color: 'var(--jp-ui-inverse-font-color1)',
+                                fontSize: 16
+                            } })) : (_jsx("div", { style: { width: '16px' } })), _jsx(Typography, { variant: "body2", component: "div", sx: {
+                                fontWeight: isSelected ? 600 : 400,
+                                color: isSelected
+                                    ? 'var(--jp-ui-inverse-font-color1)'
+                                    : 'inherit'
+                            }, children: providerLabel })] }, provider))) })] }));
 }
 /**
  * Factory function returning the toolbar item for model selection.
@@ -152,7 +147,7 @@ export function createModelSelectItem(settingsModel, translator) {
                 settingsModel,
                 translator
             };
-            return React.createElement(ModelSelect, { ...modelSelectProps });
+            return _jsx(ModelSelect, { ...modelSelectProps });
         },
         position: 0.5
     };

package/lib/components/save-button.d.ts

@@ -29,3 +29,4 @@ export declare class SaveComponentWidget extends ReactWidget {
     protected render(): React.ReactElement;
     private _options;
 }
+//# sourceMappingURL=save-button.d.ts.map

package/lib/components/save-button.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { historyIcon, ReactWidget, saveIcon, ToolbarButtonComponent } from '@jupyterlab/ui-components';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 const COMPONENT_CLASS = 'jp-ai-SaveButton';
 const AUTOSAVE_BUTTON_CLASS = 'jp-ai-AutoSaveButton';
 /**
@@ -22,9 +23,7 @@ export function SaveComponent(props) {
             model.autosaveChanged.disconnect(updateAutosave);
         };
     }, [model]);
-    return (React.createElement("div", { className: `${COMPONENT_CLASS}${autosave ? ' lm-mod-toggled' : ''}` },
-        React.createElement(ToolbarButtonComponent, { icon: saveIcon, onClick: () => model.save(), tooltip: trans.__('Save chat') }),
-        React.createElement(ToolbarButtonComponent, { className: AUTOSAVE_BUTTON_CLASS, icon: historyIcon, onClick: () => (model.autosave = !model.autosave), tooltip: trans.__('Auto-save') })));
+    return (_jsxs("div", { className: `${COMPONENT_CLASS}${autosave ? ' lm-mod-toggled' : ''}`, children: [_jsx(ToolbarButtonComponent, { icon: saveIcon, onClick: () => model.save(), tooltip: trans.__('Save chat') }), _jsx(ToolbarButtonComponent, { className: AUTOSAVE_BUTTON_CLASS, icon: historyIcon, onClick: () => (model.autosave = !model.autosave), tooltip: trans.__('Auto-save') })] }));
 }
 /**
  * A Lumino widget wrapping the SaveButton React component.
@@ -35,7 +34,7 @@ export class SaveComponentWidget extends ReactWidget {
         this._options = options;
     }
     render() {
-        return React.createElement(SaveComponent, { ...this._options });
+        return _jsx(SaveComponent, { ...this._options });
     }
     _options;
 }

package/lib/components/stop-button.d.ts

@@ -21,3 +21,4 @@ export declare function StopButton(props: IStopButtonProps): JSX.Element;
  * Factory returning the stop button toolbar item.
  */
 export declare function stopItem(translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;
+//# sourceMappingURL=stop-button.d.ts.map