@jupyterlite/ai 0.14.0 → 0.16.0

package/src/completion/completion-provider.ts

@@ -8,9 +8,12 @@ import { NotebookPanel } from '@jupyterlab/notebook';
 import { generateText, type LanguageModel } from 'ai';
 import { ISecretsManager } from 'jupyter-secrets-manager';
 
-import { AISettingsModel } from '../models/settings-model';
 import { createCompletionModel } from '../providers/models';
-import { SECRETS_NAMESPACE, type IProviderRegistry } from '../tokens';
+import {
+  type IAISettingsModel,
+  SECRETS_NAMESPACE,
+  type IProviderRegistry
+} from '../tokens';
 
 /**
  * Configuration interface for provider-specific completion behavior
@@ -304,7 +307,7 @@ export class AICompletionProvider implements IInlineCompletionProvider {
     };
   }
 
-  private _settingsModel: AISettingsModel;
+  private _settingsModel: IAISettingsModel;
   private _providerRegistry?: IProviderRegistry;
   private _model: LanguageModel | null = null;
   private _secretsManager?: ISecretsManager;
@@ -318,7 +321,7 @@ export namespace AICompletionProvider {
     /**
      * The AI settings model.
      */
-    settingsModel: AISettingsModel;
+    settingsModel: IAISettingsModel;
     /**
      * The provider registry
      */

package/src/components/completion-status.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { AISettingsModel } from '../models/settings-model';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import type { TranslationBundle } from '@jupyterlab/translation';
 import { jupyternautIcon } from '../icons';
+import type { IAISettingsModel } from '../tokens';
 
 const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
 const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
@@ -14,7 +14,7 @@ interface ICompletionStatusProps {
   /**
    * The settings model.
    */
-  settingsModel: AISettingsModel;
+  settingsModel: IAISettingsModel;
   /**
    * The application language translator.
    */
@@ -33,7 +33,7 @@ function CompletionStatus(props: ICompletionStatusProps): JSX.Element {
    * Handle changes in the settings.
    */
   useEffect(() => {
-    const stateChanged = (model: AISettingsModel) => {
+    const stateChanged = (model: IAISettingsModel) => {
       if (model.config.useSameProviderForChatAndCompleter) {
         setDisabled(false);
         setTitle(

package/src/components/index.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/src/components/model-select.tsx

@@ -4,7 +4,8 @@ import CheckIcon from '@mui/icons-material/Check';
 import { Menu, MenuItem, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import { AIChatModel } from '../chat-model';
-import { AISettingsModel } from '../models/settings-model';
+import type { IAISettingsModel } from '../tokens';
+
 /**
  * Properties for the model select component.
  */
@@ -13,7 +14,7 @@ export interface IModelSelectProps
   /**
    * The settings model to get available models and current selection from.
    */
-  settingsModel: AISettingsModel;
+  settingsModel: IAISettingsModel;
   /**
    * The application language translator.
    */
@@ -243,7 +244,7 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element {
  * Factory function returning the toolbar item for model selection.
  */
 export function createModelSelectItem(
-  settingsModel: AISettingsModel,
+  settingsModel: IAISettingsModel,
   translator: TranslationBundle
 ): InputToolbarRegistry.IToolbarItem {
   return {

package/src/components/save-button.tsx

@@ -0,0 +1,84 @@
+import {
+  historyIcon,
+  ReactWidget,
+  saveIcon,
+  ToolbarButtonComponent
+} from '@jupyterlab/ui-components';
+import type { TranslationBundle } from '@jupyterlab/translation';
+import React, { useEffect, useState } from 'react';
+
+import { AIChatModel } from '../chat-model';
+
+const COMPONENT_CLASS = 'jp-ai-SaveButton';
+const AUTOSAVE_BUTTON_CLASS = 'jp-ai-AutoSaveButton';
+
+/**
+ * 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 function SaveComponent(props: ISaveButtonProps): JSX.Element {
+  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 = (_: AIChatModel, value: boolean) => {
+      setAutosave(value);
+    };
+
+    model.autosaveChanged.connect(updateAutosave);
+    return () => {
+      model.autosaveChanged.disconnect(updateAutosave);
+    };
+  }, [model]);
+
+  return (
+    <div className={`${COMPONENT_CLASS}${autosave ? ' lm-mod-toggled' : ''}`}>
+      <ToolbarButtonComponent
+        icon={saveIcon}
+        onClick={() => model.save()}
+        tooltip={trans.__('Save chat')}
+      />
+      <ToolbarButtonComponent
+        className={AUTOSAVE_BUTTON_CLASS}
+        icon={historyIcon}
+        onClick={() => (model.autosave = !model.autosave)}
+        tooltip={trans.__('Auto-save')}
+      />
+    </div>
+  );
+}
+
+/**
+ * A Lumino widget wrapping the SaveButton React component.
+ */
+export class SaveComponentWidget extends ReactWidget {
+  constructor(options: ISaveButtonProps) {
+    super();
+    this._options = options;
+  }
+
+  protected render(): React.ReactElement {
+    return <SaveComponent {...this._options} />;
+  }
+
+  private _options: ISaveButtonProps;
+}

package/src/components/tool-select.tsx

@@ -10,11 +10,17 @@ import { Divider, Menu, MenuItem, Tooltip, Typography } from '@mui/material';
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { INamedTool, IProviderRegistry, IToolRegistry } from '../tokens';
 import { AIChatModel } from '../chat-model';
-import { AISettingsModel } from '../models/settings-model';
+
 import { createProviderTools } from '../providers/provider-tools';
 
+import type {
+  IAISettingsModel,
+  INamedTool,
+  IProviderRegistry,
+  IToolRegistry
+} from '../tokens';
+
 const SELECT_ITEM_CLASS = 'jp-AIToolSelect-item';
 
 /**
@@ -40,7 +46,7 @@ export interface IToolSelectProps
   /**
    * The settings model to compute provider-level web tools.
    */
-  settingsModel: AISettingsModel;
+  settingsModel: IAISettingsModel;
 
   /**
    * Registry for provider metadata used to resolve provider tool capabilities.
@@ -307,7 +313,7 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element {
  */
 export function createToolSelectItem(
   toolRegistry: IToolRegistry,
-  settingsModel: AISettingsModel,
+  settingsModel: IAISettingsModel,
   providerRegistry: IProviderRegistry,
   toolsEnabled: boolean = true,
   translator: TranslationBundle

package/src/components/usage-display.tsx

@@ -0,0 +1,208 @@
+import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';
+import type { TranslationBundle } from '@jupyterlab/translation';
+import React from 'react';
+import { ISignal } from '@lumino/signaling';
+import type { IAISettingsModel, ITokenUsage } from '../tokens';
+
+/**
+ * Props for the UsageDisplay component.
+ */
+export interface IUsageDisplayProps {
+  /**
+   * The token usage changed signal
+   */
+  tokenUsageChanged: ISignal<any, ITokenUsage>;
+
+  /**
+   * The settings model instance for configuration options
+   */
+  settingsModel: IAISettingsModel;
+
+  /**
+   * Initial token usage.
+   */
+  initialTokenUsage?: ITokenUsage;
+
+  /**
+   * The application language translator.
+   */
+  translator: TranslationBundle;
+}
+
+/**
+ * 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: React.FC<IUsageDisplayProps> = ({
+  tokenUsageChanged,
+  settingsModel,
+  initialTokenUsage,
+  translator: trans
+}) => {
+  const formatContextPercent = (value: number): string => {
+    return Math.round(value).toLocaleString();
+  };
+
+  const badgeStyle: React.CSSProperties = {
+    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 (
+    <UseSignal signal={settingsModel.stateChanged} initialArgs={undefined}>
+      {() => {
+        const config = settingsModel.config;
+        const showTokenUsage = config.showTokenUsage;
+        const showContextUsage = config.showContextUsage;
+        if (!showTokenUsage && !showContextUsage) {
+          return null;
+        }
+
+        return (
+          <UseSignal signal={tokenUsageChanged} initialArgs={initialTokenUsage}>
+            {(_, tokenUsage: ITokenUsage | null | undefined) => {
+              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 (
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '6px'
+                  }}
+                >
+                  {showTokenUsage && (
+                    <span
+                      style={badgeStyle}
+                      title={trans.__(
+                        'Token Usage - Sent: %1, Received: %2, Total: %3',
+                        tokenUsage.inputTokens.toLocaleString(),
+                        tokenUsage.outputTokens.toLocaleString(),
+                        total.toLocaleString()
+                      )}
+                    >
+                      <span
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '2px'
+                        }}
+                      >
+                        <span>↑</span>
+                        <span>{tokenUsage.inputTokens.toLocaleString()}</span>
+                      </span>
+                      <span
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '2px'
+                        }}
+                      >
+                        <span>↓</span>
+                        <span>{tokenUsage.outputTokens.toLocaleString()}</span>
+                      </span>
+                    </span>
+                  )}
+                  {showContextUsage && (
+                    <span style={badgeStyle} title={contextTitle}>
+                      <span
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '2px'
+                        }}
+                      >
+                        <span>ctx</span>
+                        <span>{contextLabel}</span>
+                      </span>
+                    </span>
+                  )}
+                </div>
+              );
+            }}
+          </UseSignal>
+        );
+      }}
+    </UseSignal>
+  );
+};
+
+/**
+ * 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: IUsageDisplayProps) {
+    super();
+    this._options = options;
+  }
+
+  /**
+   * Renders the React component within the widget.
+   * @returns The UsageDisplay React element
+   */
+  protected render(): React.ReactElement {
+    return <UsageDisplay {...this._options} />;
+  }
+
+  private _options: IUsageDisplayProps;
+}

package/src/diff-manager.ts

@@ -1,6 +1,6 @@
 import { CommandRegistry } from '@lumino/commands';
-import { AISettingsModel } from './models/settings-model';
-import {
+import type {
+  IAISettingsModel,
   IDiffManager,
   IShowCellDiffParams,
   IShowFileDiffParams
@@ -30,7 +30,7 @@ export class DiffManager implements IDiffManager {
    */
   constructor(options: {
     commands: CommandRegistry;
-    settingsModel: AISettingsModel;
+    settingsModel: IAISettingsModel;
   }) {
     this._commands = options.commands;
     this._settingsModel = options.settingsModel;
@@ -77,5 +77,5 @@ export class DiffManager implements IDiffManager {
   }
 
   private _commands: CommandRegistry;
-  private _settingsModel: AISettingsModel;
+  private _settingsModel: IAISettingsModel;
 }