@jupyterlite/ai 0.15.0 → 0.17.0

package/src/components/clear-button.tsx

@@ -16,7 +16,7 @@ export interface IClearButtonProps
   /**
    * The function to clear messages.
    */
-  clearMessages: () => void;
+  clearMessages: () => Promise<void>;
   /**
    * The application language translator.
    */
@@ -53,8 +53,8 @@ export function clearItem(
   return {
     element: (props: InputToolbarRegistry.IToolbarItemProps) => {
       const { model } = props;
-      const clearMessages = () =>
-        (model.chatContext as AIChatModel.IAIChatContext).clearMessages();
+      const clearMessages = async () =>
+        await (model.chatContext as AIChatModel.IAIChatContext).clearMessages();
       const clearProps: IClearButtonProps = {
         ...props,
         clearMessages,

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/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/index.ts

@@ -114,7 +114,7 @@ import {
   createToolSelectItem,
   stopItem,
   CompletionStatusWidget,
-  TokenUsageWidget
+  UsageWidget
 } from './components';
 
 import { AISettingsModel } from './models/settings-model';
@@ -357,6 +357,27 @@ const chatModelHandler: JupyterFrontEndPlugin<IChatModelHandler> = {
   }
 };
 
+/**
+ * The active cell manager plugin, to allow copying code from chat to notebook.
+ */
+const activeCellManager: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlite/ai:activeCellManager',
+  description: 'Add the active cell manager to the model handler',
+  autoStart: true,
+  requires: [IChatModelHandler, INotebookTracker],
+  activate: (
+    app: JupyterFrontEnd,
+    modelHandler: IChatModelHandler,
+    notebookTracker: INotebookTracker
+  ) => {
+    const activeCellManager = new ActiveCellManager({
+      tracker: notebookTracker,
+      shell: app.shell
+    });
+    modelHandler.activeCellManager = activeCellManager;
+  }
+};
+
 /**
  * Initialization data for the extension.
  */
@@ -376,7 +397,6 @@ const plugin: JupyterFrontEndPlugin<IChatTracker> = {
     IThemeManager,
     ILayoutRestorer,
     ILabShell,
-    INotebookTracker,
     ITranslator,
     IComponentsRendererFactory,
     ICommandPalette,
@@ -392,7 +412,6 @@ const plugin: JupyterFrontEndPlugin<IChatTracker> = {
     themeManager?: IThemeManager,
     restorer?: ILayoutRestorer,
     labShell?: ILabShell,
-    notebookTracker?: INotebookTracker,
     translator?: ITranslator,
     chatComponentsFactory?: IComponentsRendererFactory,
     palette?: ICommandPalette,
@@ -416,17 +435,6 @@ const plugin: JupyterFrontEndPlugin<IChatTracker> = {
       }
     };
 
-    // Create ActiveCellManager if notebook tracker is available, and add it to the
-    // model registry.
-    let activeCellManager: ActiveCellManager | undefined;
-    if (notebookTracker) {
-      activeCellManager = new ActiveCellManager({
-        tracker: notebookTracker,
-        shell: app.shell
-      });
-    }
-    modelHandler.activeCellManager = activeCellManager;
-
     // Creating the tracker for the chat widgets
     const namespace = 'ai-chat';
     const tracker = new WidgetTracker<MainAreaChat | ChatWidget>({ namespace });
@@ -516,7 +524,7 @@ const plugin: JupyterFrontEndPlugin<IChatTracker> = {
       chatPanel.disposed.connect(disconnectSettingsButtonListener);
     }
 
-    let tokenUsageWidget: TokenUsageWidget | null = null;
+    let usageWidget: UsageWidget | null = null;
     chatPanel.chatOpened.connect((_, widget) => {
       const model = widget.model as AIChatModel;
 
@@ -527,6 +535,18 @@ const plugin: JupyterFrontEndPlugin<IChatTracker> = {
         tracker.save(widget);
       }
 
+      function updateToolbarTitleOverlay() {
+        const titleNode = chatPanel.current?.toolbar.node
+          .getElementsByClassName('jp-chat-sidepanel-widget-title')
+          .item(0);
+        if (titleNode) {
+          titleNode.setAttribute('title', model.title ?? model.name);
+        }
+      }
+
+      model.titleChanged.connect(updateToolbarTitleOverlay);
+      updateToolbarTitleOverlay();
+
       // Update the tracker if the model name changed.
       model.nameChanged.connect(saveTracker);
 
@@ -534,19 +554,15 @@ const plugin: JupyterFrontEndPlugin<IChatTracker> = {
       model.agentManager.activeProviderChanged.connect(saveTracker);
 
       // Update the token usage widget.
-      tokenUsageWidget?.dispose();
+      usageWidget?.dispose();
 
-      tokenUsageWidget = new TokenUsageWidget({
+      usageWidget = new UsageWidget({
         tokenUsageChanged: model.tokenUsageChanged,
         settingsModel,
         initialTokenUsage: model.agentManager.tokenUsage,
         translator: trans
       });
-      chatPanel.current?.toolbar.insertBefore(
-        'markRead',
-        'token-usage',
-        tokenUsageWidget
-      );
+      chatPanel.current?.toolbar.insertBefore('markRead', 'usage', usageWidget);
 
       if (model.saveAvailable) {
         const saveChatButton = new SaveComponentWidget({
@@ -586,6 +602,7 @@ const plugin: JupyterFrontEndPlugin<IChatTracker> = {
       });
 
       widget.disposed.connect(() => {
+        model.titleChanged.disconnect(updateToolbarTitleOverlay);
         model.nameChanged.disconnect(saveTracker);
         model.agentManager.activeProviderChanged.disconnect(saveTracker);
         model.writersChanged?.disconnect(writersChanged);
@@ -738,7 +755,7 @@ function registerCommands(
       }
     });
 
-    const openInMain = (model: AIChatModel) => {
+    const openInMain = (model: AIChatModel): MainAreaChat => {
       const content = new ChatWidget({
         model,
         rmRegistry,
@@ -771,6 +788,64 @@ function registerCommands(
         model.nameChanged.disconnect(saveTracker);
         model.agentManager.activeProviderChanged.disconnect(saveTracker);
       });
+
+      return widget;
+    };
+
+    const focusOnChat = (
+      area: 'main' | 'side',
+      widget?: ChatWidget | MainAreaChat
+    ) => {
+      if (area === 'main' && widget) {
+        app.shell.activateById(widget.id);
+      } else {
+        app.shell.activateById(chatPanel.id);
+      }
+    };
+
+    const applyInputArgs = (model: IChatModel, args: any) => {
+      const input = typeof args.input === 'string' ? args.input : undefined;
+      const autoSend = args.autoSend === true;
+      const shouldFocus = args.focus !== false;
+
+      if (input !== undefined) {
+        model.input.value = input;
+      }
+      if (autoSend && input !== undefined) {
+        model.input.send(model.input.value);
+      }
+      if (shouldFocus) {
+        model.input.focus();
+      }
+    };
+
+    const findChatWidget = (
+      name?: string,
+      provider?: string
+    ): ChatWidget | MainAreaChat | undefined => {
+      if (!name && !provider) {
+        return;
+      }
+      return tracker.find(widget => {
+        const model = widget.model as AIChatModel;
+        return (
+          (!name || widget.model.name === name) &&
+          (!provider || model.agentManager.activeProvider === provider)
+        );
+      });
+    };
+
+    const disposeSideChatModel = (model: IChatModel): boolean => {
+      const loadedName = chatPanel
+        .getLoadedModelNames()
+        .find(name => chatPanel.getLoadedModel(name) === model);
+
+      if (!loadedName) {
+        return false;
+      }
+
+      chatPanel.disposeLoadedModel(loadedName);
+      return true;
     };
 
     commands.addCommand(CommandIds.openChat, {
@@ -805,11 +880,18 @@ function registerCommands(
           return false;
         }
 
+        const shouldFocus = args.focus === true;
+        let widget: ChatWidget | MainAreaChat | undefined;
         if (area === 'main') {
-          openInMain(model);
+          widget = openInMain(model);
         } else {
-          chatPanel.open({ model });
+          widget = chatPanel.open({ model });
+        }
+        if (shouldFocus) {
+          focusOnChat(area, widget);
         }
+        applyInputArgs(model, { ...args, focus: shouldFocus });
+
         return true;
       },
       describedBy: {
@@ -828,6 +910,137 @@ function registerCommands(
             provider: {
               type: 'string',
               description: trans.__('The provider/model to use with this chat')
+            },
+            input: {
+              type: 'string',
+              description: trans.__('The input text to prefill in the chat')
+            },
+            focus: {
+              type: 'boolean',
+              description: trans.__(
+                'Whether to focus the chat input after opening it'
+              )
+            },
+            autoSend: {
+              type: 'boolean',
+              description: trans.__(
+                'Whether to auto-send the provided input after opening the chat'
+              )
+            }
+          }
+        }
+      }
+    });
+
+    commands.addCommand(CommandIds.openOrRevealChat, {
+      label: trans.__('Open or reveal the chat panel'),
+      execute: async (args): Promise<boolean> => {
+        const area = (args.area as string) === 'main' ? 'main' : 'side';
+        const provider = (args.provider as string) ?? undefined;
+        const name = (args.name as string) ?? undefined;
+        const shouldFocus = args.focus === true;
+
+        let existingWidget = findChatWidget(name, provider);
+        if (!existingWidget && !name) {
+          const providerConfig = provider
+            ? settingsModel.getProvider(provider)
+            : settingsModel.getDefaultProvider();
+          existingWidget = findChatWidget(undefined, providerConfig?.id);
+        }
+
+        // If the side chat model is loaded but not currently displayed, reveal it first.
+        if (!existingWidget && name) {
+          const loadedModel = chatPanel.getLoadedModel(name);
+          if (loadedModel) {
+            existingWidget = chatPanel.open({ model: loadedModel });
+          }
+        }
+
+        if (!existingWidget) {
+          return commands.execute(CommandIds.openChat, {
+            ...args,
+            focus: shouldFocus
+          }) as Promise<boolean>;
+        }
+
+        const currentArea =
+          existingWidget instanceof MainAreaChat ? 'main' : 'side';
+        if (currentArea !== area) {
+          const targetName = existingWidget.model.name;
+          const moved = (await commands.execute(CommandIds.moveChat, {
+            name: targetName,
+            area
+          })) as boolean;
+          if (!moved) {
+            return false;
+          }
+
+          const movedWidget = findChatWidget(targetName);
+          if (!movedWidget) {
+            return false;
+          }
+
+          if (area === 'side') {
+            chatPanel.open({ model: movedWidget.model });
+          }
+          if (shouldFocus) {
+            focusOnChat(area, movedWidget);
+          }
+          applyInputArgs(movedWidget.model, {
+            ...args,
+            focus: shouldFocus
+          });
+
+          return true;
+        }
+
+        if (area === 'side') {
+          chatPanel.open({ model: existingWidget.model });
+        }
+        if (shouldFocus) {
+          focusOnChat(area, existingWidget);
+        }
+        applyInputArgs(existingWidget.model, {
+          ...args,
+          focus: shouldFocus
+        });
+
+        return true;
+      },
+      describedBy: {
+        args: {
+          type: 'object',
+          properties: {
+            area: {
+              type: 'string',
+              enum: ['main', 'side'],
+              description: trans.__(
+                'The name of the area to open or reveal the chat in'
+              )
+            },
+            name: {
+              type: 'string',
+              description: trans.__('The name of the chat')
+            },
+            provider: {
+              type: 'string',
+              description: trans.__('The provider/model to use with this chat')
+            },
+            input: {
+              type: 'string',
+              description: trans.__('The input text to prefill in the chat')
+            },
+            focus: {
+              type: 'boolean',
+              description: trans.__(
+                'Whether to focus the chat input after opening it'
+              )
+            },
+            autoSend: {
+              type: 'boolean',
+              description: trans.__(
+                'Whether to auto-send the provided input after opening the chat'
+              )
             }
           }
         }
@@ -887,7 +1100,8 @@ function registerCommands(
           activeProvider: previousModel.agentManager.activeProvider,
           tokenUsage: previousModel.agentManager.tokenUsage,
           messages: previousModel.messages,
-          autosave: previousModel.autosave
+          autosave: previousModel.autosave,
+          title: previousModel.title
         });
 
         // Wait (with timeout) for the tracker to have updated the previous widget.
@@ -907,6 +1121,15 @@ function registerCommands(
 
         if (area === 'main') {
           openInMain(model);
+
+          if (previousWidget instanceof ChatWidget) {
+            // Clean up the side-panel model entry before disposing the previous
+            // widget/model state.
+            if (!disposeSideChatModel(previousModel)) {
+              previousWidget.dispose();
+              previousModel.dispose();
+            }
+          }
         } else {
           previousWidget?.dispose();
           previousModel.dispose();
@@ -1516,6 +1739,7 @@ export default [
   skillRegistryPlugin,
   skillsCommandPlugin,
   chatModelHandler,
+  activeCellManager,
   plugin,
   toolRegistry,
   agentManagerFactory,

package/src/models/settings-model.ts

@@ -23,6 +23,7 @@ export class AISettingsModel extends VDomModel implements IAISettingsModel {
     toolsEnabled: true,
     sendWithShiftEnter: false,
     showTokenUsage: false,
+    showContextUsage: false,
     showCellDiff: true,
     showFileDiff: true,
     diffDisplayMode: 'split',

package/src/providers/built-in-providers.ts

@@ -4,6 +4,7 @@ import { createMistral } from '@ai-sdk/mistral';
 import { createOpenAI } from '@ai-sdk/openai';
 import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
 
+import { BUILT_IN_PROVIDER_MODEL_INFO } from './generated-context-windows';
 import type { IProviderInfo } from '../tokens';
 import type { IModelOptions } from './models';
 
@@ -30,6 +31,7 @@ export const anthropicProvider: IProviderInfo = {
     'claude-sonnet-4-0',
     'claude-sonnet-4-20250514'
   ],
+  modelInfo: BUILT_IN_PROVIDER_MODEL_INFO.anthropic,
   supportsBaseURL: true,
   supportsHeaders: true,
   providerToolCapabilities: {
@@ -77,6 +79,7 @@ export const googleProvider: IProviderInfo = {
     'gemini-flash-latest',
     'gemini-flash-lite-latest'
   ],
+  modelInfo: BUILT_IN_PROVIDER_MODEL_INFO.google,
   supportsBaseURL: true,
   factory: (options: IModelOptions) => {
     if (!options.apiKey) {
@@ -113,6 +116,7 @@ export const mistralProvider: IProviderInfo = {
     'codestral-latest',
     'devstral-latest'
   ],
+  modelInfo: BUILT_IN_PROVIDER_MODEL_INFO.mistral,
   supportsBaseURL: true,
   factory: (options: IModelOptions) => {
     if (!options.apiKey) {
@@ -182,6 +186,7 @@ export const openaiProvider: IProviderInfo = {
     'gpt-3.5-turbo',
     'gpt-3.5-turbo-0125'
   ],
+  modelInfo: BUILT_IN_PROVIDER_MODEL_INFO.openai,
   supportsBaseURL: true,
   supportsHeaders: true,
   providerToolCapabilities: {