@jupyterlite/ai 0.13.0 → 0.14.0

package/lib/widgets/ai-settings.js

@@ -13,7 +13,7 @@ import MoreVert from '@mui/icons-material/MoreVert';
 import Settings from '@mui/icons-material/Settings';
 import { Alert, Box, Button, Card, CardContent, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControl, FormControlLabel, IconButton, InputLabel, List, ListItem, ListItemText, Menu, MenuItem, Select, Switch, Tab, Tabs, TextField, ThemeProvider, Tooltip, Typography, createTheme } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
-import { SECRETS_NAMESPACE, SECRETS_REPLACEMENT } from '../tokens';
+import { SECRETS_REPLACEMENT } from '../tokens';
 import { ProviderConfigDialog } from './provider-config-dialog';
 /**
  * Create a theme that uses IThemeManager to detect theme
@@ -41,21 +41,20 @@ export class AISettingsWidget extends ReactWidget {
      */
     constructor(options) {
         super();
-        Private.setToken(options.token);
         this._settingsModel = options.settingsModel;
         this._agentManagerFactory = options.agentManagerFactory;
         this._themeManager = options.themeManager;
         this._providerRegistry = options.providerRegistry;
-        this._secretsManager = options.secretsManager;
+        this._secretsAccess = options.secretsAccess;
         this._trans = options.trans;
         this.id = 'jupyterlite-ai-settings';
         this.title.label = this._trans.__('AI Settings');
         this.title.caption = this._trans.__('Configure AI providers and behavior');
         this.title.closable = true;
         // Disable the secrets manager if the token is empty.
-        if (!options.token) {
+        if (!options.secretsAccess.isAvailable) {
             this._settingsModel.updateConfig({ useSecretsManager: false });
-            this._secretsManager = undefined;
+            this._secretsAccess = undefined;
         }
     }
     /**
@@ -63,13 +62,13 @@ export class AISettingsWidget extends ReactWidget {
      * @returns A React element containing the AI settings interface
      */
     render() {
-        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsManager: this._secretsManager, trans: this._trans }));
+        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsAccess: this._secretsAccess, trans: this._trans }));
     }
     _settingsModel;
     _agentManagerFactory;
     _themeManager;
     _providerRegistry;
-    _secretsManager;
+    _secretsAccess;
     _trans;
 }
 /**
@@ -77,7 +76,7 @@ export class AISettingsWidget extends ReactWidget {
  * @param props - Component props containing models and theme manager
  * @returns A React component for AI settings configuration
  */
-const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsManager, trans }) => {
+const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsAccess, trans }) => {
     if (!model) {
         return React.createElement("div", null, trans.__('Settings model not available'));
     }
@@ -174,23 +173,10 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
         void promptDebouncer.invoke();
     };
     const getSecretFromManager = async (provider, fieldName) => {
-        const token = Private.getToken();
-        if (!token) {
-            return;
-        }
-        const secret = await secretsManager?.get(token, SECRETS_NAMESPACE, `${provider}:${fieldName}`);
-        return secret?.value;
+        return secretsAccess?.get(`${provider}:${fieldName}`);
     };
     const setSecretToManager = async (provider, fieldName, value) => {
-        const token = Private.getToken();
-        if (!token) {
-            return;
-        }
-        await secretsManager?.set(token, SECRETS_NAMESPACE, `${provider}:${fieldName}`, {
-            namespace: SECRETS_NAMESPACE,
-            id: `${provider}:${fieldName}`,
-            value
-        });
+        await secretsAccess?.set(`${provider}:${fieldName}`, value);
     };
     /**
      * Attach a secrets field to the secrets manager.
@@ -199,14 +185,10 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
      * @param fieldName - the name of the field.
      */
     const handleSecretField = async (input, provider, fieldName) => {
-        if (!(model.config.useSecretsManager && secretsManager)) {
+        if (!(model.config.useSecretsManager && secretsAccess?.isAvailable)) {
             return;
         }
-        const token = Private.getToken();
-        if (!token) {
-            return;
-        }
-        await secretsManager?.attach(token, SECRETS_NAMESPACE, `${provider}:${fieldName}`, input);
+        await secretsAccess.attach(`${provider}:${fieldName}`, input);
     };
     /**
      * Handle adding a new AI provider
@@ -214,7 +196,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
      */
     const handleAddProvider = async (providerConfig) => {
         if (model.config.useSecretsManager &&
-            secretsManager &&
+            secretsAccess?.isAvailable &&
             providerConfig.apiKey) {
             providerConfig.apiKey = SECRETS_REPLACEMENT;
         }
@@ -227,7 +209,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
     const handleEditProvider = async (providerConfig) => {
         if (editingProvider) {
             if (model.config.useSecretsManager &&
-                secretsManager &&
+                secretsAccess?.isAvailable &&
                 providerConfig.apiKey) {
                 providerConfig.apiKey = SECRETS_REPLACEMENT;
             }
@@ -249,7 +231,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
      */
     const openEditDialog = async (provider) => {
         // Retrieve the API key from the secrets manager if necessary.
-        if (model.config.useSecretsManager && secretsManager) {
+        if (model.config.useSecretsManager && secretsAccess?.isAvailable) {
             provider.apiKey =
                 (await getSecretFromManager(provider.provider, 'apiKey')) ?? '';
         }
@@ -477,7 +459,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                     React.createElement(IconButton, { onClick: e => handleMenuClick(e, provider.id), size: "small" },
                                         React.createElement(MoreVert, null)))));
                         }))))),
-                secretsManager !== undefined && (React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSecretsManager, onChange: e => handleConfigUpdate({
+                secretsAccess?.isAvailable && (React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSecretsManager, onChange: e => handleConfigUpdate({
                             useSecretsManager: e.target.checked
                         }), color: "primary", sx: { alignSelf: 'flex-start' } }), label: React.createElement("div", null,
                         React.createElement("span", null, trans.__('Use the secrets manager to manage API keys')),
@@ -761,18 +743,3 @@ const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode, trans })
             React.createElement(Button, { onClick: onClose }, trans.__('Cancel')),
             React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !canSave }, mode === 'add' ? trans.__('Add') : trans.__('Save')))));
 };
-var Private;
-(function (Private) {
-    /**
-     * The token to use with the secrets manager, setter and getter.
-     */
-    let secretsToken;
-    function setToken(value) {
-        secretsToken = value;
-    }
-    Private.setToken = setToken;
-    function getToken() {
-        return secretsToken;
-    }
-    Private.getToken = getToken;
-})(Private || (Private = {}));

package/lib/widgets/provider-config-dialog.js

@@ -68,7 +68,6 @@ function sanitizeCustomSettingsForProvider(customSettings, capabilities) {
     return result;
 }
 export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mode, providerRegistry, handleSecretField, trans }) => {
-    const apiKeyRef = React.useRef();
     const [name, setName] = React.useState(initialConfig?.name || '');
     const [provider, setProvider] = React.useState(initialConfig?.provider || 'anthropic');
     const [model, setModel] = React.useState(initialConfig?.model || '');
@@ -130,13 +129,11 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
             setModel(selectedProvider.models[0]);
         }
     }, [provider, selectedProvider, model]);
-    React.useEffect(() => {
-        // Attach the API key field to the secrets manager, to automatically save the value
-        // when it is updated.
-        if (open && apiKeyRef.current) {
-            handleSecretField(apiKeyRef.current, provider, 'apiKey');
+    const handleRef = React.useCallback((node) => {
+        if (open && node) {
+            handleSecretField(node, provider, 'apiKey');
         }
-    }, [open, provider, handleSecretField]);
+    }, [provider, handleSecretField, open]);
     const updateCustomSetting = React.useCallback((section, key, value) => {
         setCustomSettings(prev => {
             const next = { ...prev };
@@ -275,7 +272,7 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
                                                     ? trans.__('Code-specialized')
                                                     : trans.__('General purpose'))))))))),
                 selectedProvider &&
-                    selectedProvider?.apiKeyRequirement !== 'none' && (React.createElement(TextField, { fullWidth: true, inputRef: apiKeyRef, label: selectedProvider?.apiKeyRequirement === 'required'
+                    selectedProvider?.apiKeyRequirement !== 'none' && (React.createElement(TextField, { fullWidth: true, inputRef: handleRef, label: selectedProvider?.apiKeyRequirement === 'required'
                         ? trans.__('API Key')
                         : trans.__('API Key (Optional)'), type: showApiKey ? 'text' : 'password', value: apiKey, onChange: e => setApiKey(e.target.value), placeholder: trans.__('Enter your API key...'), required: selectedProvider?.apiKeyRequirement === 'required', InputProps: {
                         endAdornment: (React.createElement(InputAdornment, { position: "end" },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.13.0",
+    "version": "0.14.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -56,12 +56,12 @@
         "docs:build": "sed -e 's/\\[@/[/g' -e 's/@/\\@/g' CHANGELOG.md > docs/_changelog_content.md && jupyter book build --html"
     },
     "dependencies": {
-        "@ai-sdk/anthropic": "^3.0.40",
-        "@ai-sdk/google": "^3.0.23",
-        "@ai-sdk/mcp": "^1.0.19",
-        "@ai-sdk/mistral": "^3.0.19",
-        "@ai-sdk/openai": "^3.0.26",
-        "@ai-sdk/openai-compatible": "^2.0.28",
+        "@ai-sdk/anthropic": "^3.0.53",
+        "@ai-sdk/google": "^3.0.36",
+        "@ai-sdk/mcp": "^1.0.23",
+        "@ai-sdk/mistral": "^3.0.22",
+        "@ai-sdk/openai": "^3.0.39",
+        "@ai-sdk/openai-compatible": "^2.0.33",
         "@jupyter/chat": "^0.20.0",
         "@jupyterlab/application": "^4.0.0",
         "@jupyterlab/apputils": "^4.5.6",
@@ -86,7 +86,7 @@
         "@lumino/widgets": "^2.7.1",
         "@mui/icons-material": "^7",
         "@mui/material": "^7",
-        "ai": "^6.0.78",
+        "ai": "^6.0.108",
         "jupyter-secrets-manager": "^0.5.0",
         "yaml": "^2.8.1",
         "zod": "^4.3.6"

package/src/agent.ts

@@ -111,6 +111,20 @@ export class AgentManagerFactory {
       secretsManager: this._secretsManager
     });
     this._agentManagers.push(agentManager);
+
+    // New chats can be created before MCP setup finishes.
+    // Reinitialize them with connected MCP tools once it does.
+    this._initQueue
+      .then(() => this.getMCPTools())
+      .then(mcpTools => {
+        if (Object.keys(mcpTools).length > 0) {
+          agentManager.initializeAgent(mcpTools);
+        }
+      })
+      .catch(error =>
+        console.warn('Failed to pass MCP tools to new agent:', error)
+      );
+
     return agentManager;
   }
 
@@ -657,6 +671,9 @@ export class AgentManager {
           data: { error: error as Error }
         });
       }
+      // After an error (including AbortError), sanitize the history
+      // to remove any trailing assistant messages without tool results
+      this._sanitizeHistory();
     } finally {
       this._controller = null;
     }
@@ -1191,6 +1208,96 @@ WEB RETRIEVAL POLICY:
     return `Supported MIME types in this session: ${safeMimeTypes.join(', ')}`;
   }
 
+  /**
+   * Sanitizes history to ensure it's in a valid state in case of abort or error.
+   */
+  private _sanitizeHistory(): void {
+    if (this._history.length === 0) {
+      return;
+    }
+
+    const newHistory: ModelMessage[] = [];
+    for (let i = 0; i < this._history.length; i++) {
+      const msg = this._history[i];
+
+      if (msg.role === 'assistant') {
+        const toolCallIds = this._getToolCallIds(msg);
+        if (toolCallIds.length > 0) {
+          // Find if there's a following tool message with results for these calls
+          const nextMsg = this._history[i + 1];
+          if (
+            nextMsg &&
+            nextMsg.role === 'tool' &&
+            this._matchesAllToolCalls(nextMsg, toolCallIds)
+          ) {
+            newHistory.push(msg);
+          } else {
+            // Message has unmatched tool calls drop it and everything after it
+            break;
+          }
+        } else {
+          newHistory.push(msg);
+        }
+      } else if (msg.role === 'tool') {
+        // Tool messages are valid if they were preceded by a valid assistant message
+        newHistory.push(msg);
+      } else {
+        newHistory.push(msg);
+      }
+    }
+
+    this._history = newHistory;
+  }
+
+  /**
+   * Extracts tool call IDs from a message
+   */
+  private _getToolCallIds(message: ModelMessage): string[] {
+    const ids: string[] = [];
+
+    // Check content array for tool-call parts
+    if (Array.isArray(message.content)) {
+      for (const part of message.content) {
+        if (
+          typeof part === 'object' &&
+          part !== null &&
+          'type' in part &&
+          part.type === 'tool-call'
+        ) {
+          ids.push(part.toolCallId);
+        }
+      }
+    }
+
+    return ids;
+  }
+
+  /**
+   * Checks if a tool message contains results for all specified tool call IDs
+   */
+  private _matchesAllToolCalls(
+    message: ModelMessage,
+    callIds: string[]
+  ): boolean {
+    if (message.role !== 'tool' || !Array.isArray(message.content)) {
+      return false;
+    }
+
+    const resultIds = new Set<string>();
+    for (const part of message.content) {
+      if (
+        typeof part === 'object' &&
+        part !== null &&
+        'type' in part &&
+        part.type === 'tool-result'
+      ) {
+        resultIds.add(part.toolCallId);
+      }
+    }
+
+    return callIds.every(id => resultIds.has(id));
+  }
+
   // Private attributes
   private _settingsModel: AISettingsModel;
   private _toolRegistry?: IToolRegistry;