@jupyterlite/ai 0.14.0 → 0.16.0

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

@@ -1,6 +1,6 @@
-import { AISettingsModel } from '../models/settings-model';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import type { TranslationBundle } from '@jupyterlab/translation';
+import type { IAISettingsModel } from '../tokens';
 /**
  * The completion status props.
  */
@@ -8,7 +8,7 @@ interface ICompletionStatusProps {
     /**
      * The settings model.
      */
-    settingsModel: AISettingsModel;
+    settingsModel: IAISettingsModel;
     /**
      * The application language translator.
      */

package/lib/components/index.d.ts

@@ -2,5 +2,5 @@ export * from './clear-button';
 export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
-export * from './token-usage-display';
+export * from './usage-display';
 export * from './tool-select';

package/lib/components/index.js

@@ -2,5 +2,5 @@ export * from './clear-button';
 export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
-export * from './token-usage-display';
+export * from './usage-display';
 export * from './tool-select';

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

@@ -1,6 +1,6 @@
 import { InputToolbarRegistry } from '@jupyter/chat';
 import type { TranslationBundle } from '@jupyterlab/translation';
-import { AISettingsModel } from '../models/settings-model';
+import type { IAISettingsModel } from '../tokens';
 /**
  * Properties for the model select component.
  */
@@ -8,7 +8,7 @@ export interface IModelSelectProps extends InputToolbarRegistry.IToolbarItemProp
     /**
      * The settings model to get available models and current selection from.
      */
-    settingsModel: AISettingsModel;
+    settingsModel: IAISettingsModel;
     /**
      * The application language translator.
      */
@@ -21,4 +21,4 @@ export declare function ModelSelect(props: IModelSelectProps): JSX.Element;
 /**
  * Factory function returning the toolbar item for model selection.
  */
-export declare function createModelSelectItem(settingsModel: AISettingsModel, translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;
+export declare function createModelSelectItem(settingsModel: IAISettingsModel, translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;

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

@@ -0,0 +1,31 @@
+import { ReactWidget } from '@jupyterlab/ui-components';
+import type { TranslationBundle } from '@jupyterlab/translation';
+import React from 'react';
+import { AIChatModel } from '../chat-model';
+/**
+ * Properties for the SaveButton component.
+ */
+export interface ISaveButtonProps {
+    /**
+     * The chat model, used to listen for message changes for auto-save.
+     */
+    model: AIChatModel;
+    /**
+     * The application language translator.
+     */
+    translator: TranslationBundle;
+}
+/**
+ * A split button for saving the chat, with a button to toggle auto-save.
+ * When auto-save is active, the save button displays the JupyterLab
+ * toggled-on appearance (inset box-shadow all around).
+ */
+export declare function SaveComponent(props: ISaveButtonProps): JSX.Element;
+/**
+ * A Lumino widget wrapping the SaveButton React component.
+ */
+export declare class SaveComponentWidget extends ReactWidget {
+    constructor(options: ISaveButtonProps);
+    protected render(): React.ReactElement;
+    private _options;
+}

package/lib/components/save-button.js

@@ -0,0 +1,41 @@
+import { historyIcon, ReactWidget, saveIcon, ToolbarButtonComponent } from '@jupyterlab/ui-components';
+import React, { useEffect, useState } from 'react';
+const COMPONENT_CLASS = 'jp-ai-SaveButton';
+const AUTOSAVE_BUTTON_CLASS = 'jp-ai-AutoSaveButton';
+/**
+ * A split button for saving the chat, with a button to toggle auto-save.
+ * When auto-save is active, the save button displays the JupyterLab
+ * toggled-on appearance (inset box-shadow all around).
+ */
+export function SaveComponent(props) {
+    const { model, translator: trans } = props;
+    const [autosave, setAutosave] = useState(model.autosave);
+    /**
+     * Effect that update the autosave state when it is updated on the model.
+     */
+    useEffect(() => {
+        const updateAutosave = (_, value) => {
+            setAutosave(value);
+        };
+        model.autosaveChanged.connect(updateAutosave);
+        return () => {
+            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') })));
+}
+/**
+ * A Lumino widget wrapping the SaveButton React component.
+ */
+export class SaveComponentWidget extends ReactWidget {
+    constructor(options) {
+        super();
+        this._options = options;
+    }
+    render() {
+        return React.createElement(SaveComponent, { ...this._options });
+    }
+    _options;
+}

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

@@ -1,7 +1,6 @@
 import { InputToolbarRegistry } from '@jupyter/chat';
 import type { TranslationBundle } from '@jupyterlab/translation';
-import { IProviderRegistry, IToolRegistry } from '../tokens';
-import { AISettingsModel } from '../models/settings-model';
+import type { IAISettingsModel, IProviderRegistry, IToolRegistry } from '../tokens';
 /**
  * Properties for the tool select component.
  */
@@ -21,7 +20,7 @@ export interface IToolSelectProps extends InputToolbarRegistry.IToolbarItemProps
     /**
      * The settings model to compute provider-level web tools.
      */
-    settingsModel: AISettingsModel;
+    settingsModel: IAISettingsModel;
     /**
      * Registry for provider metadata used to resolve provider tool capabilities.
      */
@@ -38,4 +37,4 @@ export declare function ToolSelect(props: IToolSelectProps): JSX.Element;
 /**
  * Factory function returning the toolbar item for tool selection.
  */
-export declare function createToolSelectItem(toolRegistry: IToolRegistry, settingsModel: AISettingsModel, providerRegistry: IProviderRegistry, toolsEnabled: boolean | undefined, translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;
+export declare function createToolSelectItem(toolRegistry: IToolRegistry, settingsModel: IAISettingsModel, providerRegistry: IProviderRegistry, toolsEnabled: boolean | undefined, translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;

package/lib/components/{token-usage-display.d.ts → usage-display.d.ts}

@@ -2,12 +2,11 @@ import { ReactWidget } from '@jupyterlab/ui-components';
 import type { TranslationBundle } from '@jupyterlab/translation';
 import React from 'react';
 import { ISignal } from '@lumino/signaling';
-import { AISettingsModel } from '../models/settings-model';
-import { ITokenUsage } from '../tokens';
+import type { IAISettingsModel, ITokenUsage } from '../tokens';
 /**
- * Props for the TokenUsageDisplay component.
+ * Props for the UsageDisplay component.
  */
-export interface ITokenUsageDisplayProps {
+export interface IUsageDisplayProps {
     /**
      * The token usage changed signal
      */
@@ -15,7 +14,7 @@ export interface ITokenUsageDisplayProps {
     /**
      * The settings model instance for configuration options
      */
-    settingsModel: AISettingsModel;
+    settingsModel: IAISettingsModel;
     /**
      * Initial token usage.
      */
@@ -26,24 +25,24 @@ export interface ITokenUsageDisplayProps {
     translator: TranslationBundle;
 }
 /**
- * React component that displays token usage information.
- * Shows input/output token counts with up/down arrows.
- * Only renders when token usage display is enabled in settings.
+ * React component that displays usage information.
+ * Shows input/output token counts and optional estimated context usage.
+ * Only renders when token or context usage display is enabled in settings.
  */
-export declare const TokenUsageDisplay: React.FC<ITokenUsageDisplayProps>;
+export declare const UsageDisplay: React.FC<IUsageDisplayProps>;
 /**
- * JupyterLab widget wrapper for the TokenUsageDisplay component.
+ * JupyterLab widget wrapper for the UsageDisplay component.
  * Extends ReactWidget to integrate with the JupyterLab widget system.
  */
-export declare class TokenUsageWidget extends ReactWidget {
+export declare class UsageWidget extends ReactWidget {
     /**
-     * Creates a new TokenUsageWidget instance.
+     * Creates a new UsageWidget instance.
      * @param options - Configuration options containing required models
      */
-    constructor(options: ITokenUsageDisplayProps);
+    constructor(options: IUsageDisplayProps);
     /**
      * Renders the React component within the widget.
-     * @returns The TokenUsageDisplay React element
+     * @returns The UsageDisplay React element
      */
     protected render(): React.ReactElement;
     private _options;

package/lib/components/usage-display.js

@@ -0,0 +1,109 @@
+import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';
+import React from 'react';
+/**
+ * React component that displays usage information.
+ * Shows input/output token counts and optional estimated context usage.
+ * Only renders when token or context usage display is enabled in settings.
+ */
+export const UsageDisplay = ({ tokenUsageChanged, settingsModel, initialTokenUsage, translator: trans }) => {
+    const formatContextPercent = (value) => {
+        return Math.round(value).toLocaleString();
+    };
+    const badgeStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        fontSize: '12px',
+        color: 'var(--jp-ui-font-color2)',
+        padding: '4px 8px',
+        backgroundColor: 'var(--jp-layout-color1)',
+        border: '1px solid var(--jp-border-color1)',
+        borderRadius: '4px',
+        whiteSpace: 'nowrap'
+    };
+    return (React.createElement(UseSignal, { signal: settingsModel.stateChanged, initialArgs: undefined }, () => {
+        const config = settingsModel.config;
+        const showTokenUsage = config.showTokenUsage;
+        const showContextUsage = config.showContextUsage;
+        if (!showTokenUsage && !showContextUsage) {
+            return null;
+        }
+        return (React.createElement(UseSignal, { signal: tokenUsageChanged, initialArgs: initialTokenUsage }, (_, tokenUsage) => {
+            if (!tokenUsage) {
+                return null;
+            }
+            const total = tokenUsage.inputTokens + tokenUsage.outputTokens;
+            const hasKnownContextWindow = showContextUsage && tokenUsage.contextWindow !== undefined;
+            const contextUsagePercent = tokenUsage.lastRequestInputTokens !== undefined &&
+                tokenUsage.contextWindow !== undefined &&
+                tokenUsage.contextWindow > 0
+                ? Math.max(0, Math.min(100, (tokenUsage.lastRequestInputTokens /
+                    tokenUsage.contextWindow) *
+                    100))
+                : undefined;
+            const hasContextEstimate = hasKnownContextWindow &&
+                contextUsagePercent !== undefined &&
+                tokenUsage.lastRequestInputTokens !== undefined;
+            const contextLabel = hasContextEstimate
+                ? `${formatContextPercent(contextUsagePercent)}%`
+                : hasKnownContextWindow
+                    ? '0%'
+                    : '?';
+            const contextTitle = hasContextEstimate
+                ? trans.__('Context Usage (estimated): %1% (%2 / %3 tokens)', formatContextPercent(contextUsagePercent), tokenUsage.lastRequestInputTokens.toLocaleString(), tokenUsage.contextWindow.toLocaleString())
+                : hasKnownContextWindow
+                    ? trans.__('Context usage estimate will appear after the next request. Showing 0% until then. Context window: %1 tokens', tokenUsage.contextWindow.toLocaleString())
+                    : trans.__('Context Usage unavailable. Configure a context window for the active provider/model to enable estimation.');
+            return (React.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '6px'
+                } },
+                showTokenUsage && (React.createElement("span", { style: badgeStyle, title: trans.__('Token Usage - Sent: %1, Received: %2, Total: %3', tokenUsage.inputTokens.toLocaleString(), tokenUsage.outputTokens.toLocaleString(), total.toLocaleString()) },
+                    React.createElement("span", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '2px'
+                        } },
+                        React.createElement("span", null, "\u2191"),
+                        React.createElement("span", null, tokenUsage.inputTokens.toLocaleString())),
+                    React.createElement("span", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '2px'
+                        } },
+                        React.createElement("span", null, "\u2193"),
+                        React.createElement("span", null, tokenUsage.outputTokens.toLocaleString())))),
+                showContextUsage && (React.createElement("span", { style: badgeStyle, title: contextTitle },
+                    React.createElement("span", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '2px'
+                        } },
+                        React.createElement("span", null, "ctx"),
+                        React.createElement("span", null, contextLabel))))));
+        }));
+    }));
+};
+/**
+ * JupyterLab widget wrapper for the UsageDisplay component.
+ * Extends ReactWidget to integrate with the JupyterLab widget system.
+ */
+export class UsageWidget extends ReactWidget {
+    /**
+     * Creates a new UsageWidget instance.
+     * @param options - Configuration options containing required models
+     */
+    constructor(options) {
+        super();
+        this._options = options;
+    }
+    /**
+     * Renders the React component within the widget.
+     * @returns The UsageDisplay React element
+     */
+    render() {
+        return React.createElement(UsageDisplay, { ...this._options });
+    }
+    _options;
+}

package/lib/diff-manager.d.ts

@@ -1,6 +1,5 @@
 import { CommandRegistry } from '@lumino/commands';
-import { AISettingsModel } from './models/settings-model';
-import { IDiffManager, IShowCellDiffParams, IShowFileDiffParams } from './tokens';
+import type { IAISettingsModel, IDiffManager, IShowCellDiffParams, IShowFileDiffParams } from './tokens';
 /**
  * Implementation of the diff manager
  */
@@ -10,7 +9,7 @@ export declare class DiffManager implements IDiffManager {
      */
     constructor(options: {
         commands: CommandRegistry;
-        settingsModel: AISettingsModel;
+        settingsModel: IAISettingsModel;
     });
     /**
      * Show diff between original and modified cell content

package/lib/index.d.ts

@@ -1,9 +1,7 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 import { IChatCommandRegistry, IChatTracker, IInputToolbarRegistryFactory } from '@jupyter/chat';
-import { AgentManagerFactory } from './agent';
-import { IProviderRegistry, IToolRegistry, ISkillRegistry, IChatModelHandler, IDiffManager } from './tokens';
-import { AISettingsModel } from './models/settings-model';
-declare const _default: (JupyterFrontEndPlugin<IProviderRegistry> | JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IChatCommandRegistry> | JupyterFrontEndPlugin<IChatModelHandler> | JupyterFrontEndPlugin<IChatTracker> | JupyterFrontEndPlugin<AgentManagerFactory> | JupyterFrontEndPlugin<AISettingsModel> | JupyterFrontEndPlugin<IDiffManager> | JupyterFrontEndPlugin<ISkillRegistry> | JupyterFrontEndPlugin<IToolRegistry> | JupyterFrontEndPlugin<IInputToolbarRegistryFactory>)[];
+import { IAgentManagerFactory, IAISettingsModel, IChatModelHandler, IDiffManager, IProviderRegistry, IToolRegistry, ISkillRegistry } from './tokens';
+declare const _default: (JupyterFrontEndPlugin<IProviderRegistry> | JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IChatCommandRegistry> | JupyterFrontEndPlugin<IChatModelHandler> | JupyterFrontEndPlugin<IChatTracker> | JupyterFrontEndPlugin<IAgentManagerFactory> | JupyterFrontEndPlugin<IAISettingsModel> | JupyterFrontEndPlugin<IDiffManager> | JupyterFrontEndPlugin<ISkillRegistry> | JupyterFrontEndPlugin<IToolRegistry> | JupyterFrontEndPlugin<IInputToolbarRegistryFactory>)[];
 export default _default;
 export * from './tokens';
 export * from './icons';