@jupyterlite/ai 0.14.0 → 0.16.0

package/src/widgets/ai-settings.tsx

@@ -45,17 +45,16 @@ import {
   createTheme
 } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
-import { AgentManagerFactory } from '../agent';
+import { getEffectiveContextWindow } from '../providers/model-info';
 import {
-  AISettingsModel,
-  IAIConfig,
-  IMCPServerConfig,
-  IProviderConfig
-} from '../models/settings-model';
-import {
-  SECRETS_REPLACEMENT,
+  type IAgentManagerFactory,
+  type IAIConfig,
   type IAISecretsAccess,
-  type IProviderRegistry
+  type IAISettingsModel,
+  type IMCPServerConfig,
+  type IProviderConfig,
+  type IProviderRegistry,
+  SECRETS_REPLACEMENT
 } from '../tokens';
 import { ProviderConfigDialog } from './provider-config-dialog';
 
@@ -122,8 +121,8 @@ export class AISettingsWidget extends ReactWidget {
     );
   }
 
-  private _settingsModel: AISettingsModel;
-  private _agentManagerFactory?: AgentManagerFactory;
+  private _settingsModel: IAISettingsModel;
+  private _agentManagerFactory?: IAgentManagerFactory;
   private _themeManager?: IThemeManager;
   private _providerRegistry: IProviderRegistry;
   private _secretsAccess?: IAISecretsAccess;
@@ -134,8 +133,8 @@ export class AISettingsWidget extends ReactWidget {
  * Props interface for the AISettingsComponent
  */
 interface IAISettingsComponentProps {
-  model: AISettingsModel;
-  agentManagerFactory?: AgentManagerFactory;
+  model: IAISettingsModel;
+  agentManagerFactory?: IAgentManagerFactory;
   themeManager?: IThemeManager;
   providerRegistry: IProviderRegistry;
   secretsAccess?: IAISecretsAccess;
@@ -672,6 +671,10 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                       const providerToolCapabilities =
                         providerInfo?.providerToolCapabilities;
                       const params = provider.parameters;
+                      const effectiveContextWindow = getEffectiveContextWindow(
+                        provider,
+                        providerRegistry
+                      );
                       const webSearchEnabled =
                         !!providerToolCapabilities?.webSearch &&
                         provider.customSettings?.webSearch?.enabled === true;
@@ -743,6 +746,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                               {(params?.temperature !== undefined ||
                                 params?.maxOutputTokens !== undefined ||
                                 params?.maxTurns !== undefined ||
+                                effectiveContextWindow !== undefined ||
                                 webSearchEnabled ||
                                 webFetchEnabled) && (
                                 <Box
@@ -783,6 +787,16 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                                       variant="outlined"
                                     />
                                   )}
+                                  {effectiveContextWindow !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Context: %1',
+                                        effectiveContextWindow
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
                                   {webSearchEnabled && (
                                     <Chip
                                       label={trans.__('Web Search')}
@@ -937,6 +951,32 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                   }
                 />
 
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={config.showContextUsage}
+                      onChange={e =>
+                        handleConfigUpdate({
+                          showContextUsage: e.target.checked
+                        })
+                      }
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <Box>
+                      <Typography variant="body1">
+                        {trans.__('Show Context Usage')}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        {trans.__(
+                          'Display estimated context usage in the chat toolbar'
+                        )}
+                      </Typography>
+                    </Box>
+                  }
+                />
+
                 <FormControlLabel
                   control={
                     <Switch
@@ -1011,6 +1051,20 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                   }
                 />
 
+                <TextField
+                  fullWidth
+                  label={trans.__('Chat Backup Directory')}
+                  value={config.chatBackupDirectory}
+                  onChange={e =>
+                    handleConfigUpdate({
+                      chatBackupDirectory: e.target.value
+                    })
+                  }
+                  helperText={trans.__(
+                    'Directory where chat history backups are saved (relative to the server root)'
+                  )}
+                />
+
                 <Divider sx={{ my: 1 }} />
 
                 <TextField
@@ -1678,8 +1732,8 @@ export namespace AISettingsWidget {
    * Options interface for constructing an AISettingsWidget
    */
   export interface IOptions {
-    settingsModel: AISettingsModel;
-    agentManagerFactory?: AgentManagerFactory;
+    settingsModel: IAISettingsModel;
+    agentManagerFactory?: IAgentManagerFactory;
     themeManager?: IThemeManager;
     providerRegistry: IProviderRegistry;
     /**

package/src/widgets/main-area-chat.ts

@@ -4,17 +4,16 @@ import { launchIcon } from '@jupyterlab/ui-components';
 import type { TranslationBundle } from '@jupyterlab/translation';
 import { CommandRegistry } from '@lumino/commands';
 
-import { ApprovalButtons } from '../approval-buttons';
 import { AIChatModel } from '../chat-model';
-import { TokenUsageWidget } from '../components/token-usage-display';
-import { AISettingsModel } from '../models/settings-model';
+import { SaveComponentWidget } from '../components/save-button';
+import { UsageWidget } from '../components/usage-display';
 import { RenderedMessageOutputAreaCompat } from '../rendered-message-outputarea';
-import { CommandIds } from '../tokens';
+import { CommandIds, type IAISettingsModel } from '../tokens';
 
 export namespace MainAreaChat {
   export interface IOptions extends MainAreaWidget.IOptions<ChatWidget> {
     commands: CommandRegistry;
-    settingsModel: AISettingsModel;
+    settingsModel: IAISettingsModel;
     trans: TranslationBundle;
   }
 }
@@ -29,7 +28,7 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
 
     const { trans } = options;
 
-    // add the move to side button.
+    // Move to side button.
     this.toolbar.addItem(
       'moveToSide',
       new CommandToolbarButton({
@@ -43,20 +42,26 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
       })
     );
 
+    if (this.model.saveAvailable) {
+      // Save chat component
+      this.toolbar.addItem(
+        'saveChat',
+        new SaveComponentWidget({
+          model: this.model,
+          translator: trans
+        })
+      );
+    }
+
     // Add the token usage button.
-    const tokenUsageWidget = new TokenUsageWidget({
+    const usageWidget = new UsageWidget({
       tokenUsageChanged: this.model.tokenUsageChanged,
       settingsModel: options.settingsModel,
       initialTokenUsage: this.model.agentManager.tokenUsage,
       translator: trans
     });
-    this.toolbar.addItem('token-usage', tokenUsageWidget);
+    this.toolbar.addItem('usage', usageWidget);
 
-    // Add the approval button, tied to the chat widget.
-    this._approvalButtons = new ApprovalButtons({
-      chatPanel: this.content,
-      agentManager: this.model.agentManager
-    });
     // Temporary compat: keep output-area CSS context for MIME renderers
     // until jupyter-chat provides it natively.
     this._outputAreaCompat = new RenderedMessageOutputAreaCompat({
@@ -69,7 +74,6 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
   dispose(): void {
     super.dispose();
     // Dispose of the approval buttons widget when the chat is disposed.
-    this._approvalButtons.dispose();
     this._outputAreaCompat.dispose();
     this.model.writersChanged.disconnect(this._writersChanged);
   }
@@ -103,6 +107,5 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
     }
   };
 
-  private _approvalButtons: ApprovalButtons;
   private _outputAreaCompat: RenderedMessageOutputAreaCompat;
 }

package/src/widgets/provider-config-dialog.tsx

@@ -31,8 +31,13 @@ import {
 } from '@mui/material';
 import type { TranslationBundle } from '@jupyterlab/translation';
 import React from 'react';
-import { IProviderConfig, IProviderParameters } from '../models/settings-model';
-import type { IProviderRegistry, IProviderToolCapabilities } from '../tokens';
+import type {
+  IProviderConfig,
+  IProviderParameters,
+  IProviderRegistry,
+  IProviderToolCapabilities
+} from '../tokens';
+import { getProviderModelInfo } from '../providers/model-info';
 
 /**
  * Default parameter values for provider configuration
@@ -164,6 +169,10 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
   );
   const providerToolCapabilities =
     selectedProviderInfo?.providerToolCapabilities;
+  const selectedModelInfo = React.useMemo(
+    () => getProviderModelInfo(selectedProviderInfo, model),
+    [selectedProviderInfo, model]
+  );
   const webSearchImplementation =
     providerToolCapabilities?.webSearch?.implementation;
   const supportsWebSearch = !!providerToolCapabilities?.webSearch;
@@ -187,7 +196,6 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
         label: info.name,
         models: info.defaultModels,
         apiKeyRequirement: info.apiKeyRequirement,
-        allowCustomModel: id === 'generic', // Generic allows custom models
         supportsBaseURL: info.supportsBaseURL,
         description: info.description,
         baseUrls: info.baseUrls
@@ -200,9 +208,14 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
   React.useEffect(() => {
     if (open) {
       // Reset form when dialog opens
+      const initialProvider = initialConfig?.provider || 'anthropic';
+      const initialProviderInfo =
+        providerRegistry.getProviderInfo(initialProvider);
       setName(initialConfig?.name || '');
-      setProvider(initialConfig?.provider || 'anthropic');
-      setModel(initialConfig?.model || '');
+      setProvider(initialProvider);
+      setModel(
+        initialConfig?.model || initialProviderInfo?.defaultModels[0] || ''
+      );
       setApiKey(initialConfig?.apiKey || '');
       setBaseURL(initialConfig?.baseURL || '');
       setParameters(initialConfig?.parameters || {});
@@ -215,14 +228,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
       setDomainInputs(createEmptyDomainInputs());
       setExpandedAdvanced(false);
     }
-  }, [open, initialConfig]);
-
-  React.useEffect(() => {
-    // Auto-select first model when provider changes
-    if (selectedProvider && selectedProvider.models.length > 0 && !model) {
-      setModel(selectedProvider.models[0]);
-    }
-  }, [provider, selectedProvider, model]);
+  }, [open, initialConfig, providerRegistry]);
 
   const handleRef = React.useCallback(
     (node: HTMLInputElement | null) => {
@@ -233,6 +239,15 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
     [provider, handleSecretField, open]
   );
 
+  const handleProviderChange = React.useCallback(
+    (newProvider: IProviderConfig['provider']) => {
+      const newProviderInfo = providerRegistry.getProviderInfo(newProvider);
+      setProvider(newProvider);
+      setModel(newProviderInfo?.defaultModels[0] || '');
+    },
+    [providerRegistry]
+  );
+
   const updateCustomSetting = React.useCallback(
     (section: 'webSearch' | 'webFetch', key: string, value: unknown) => {
       setCustomSettings(prev => {
@@ -450,7 +465,9 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
               value={provider}
               label={trans.__('Provider Type')}
               onChange={e =>
-                setProvider(e.target.value as IProviderConfig['provider'])
+                handleProviderChange(
+                  e.target.value as IProviderConfig['provider']
+                )
               }
             >
               {providerOptions.map(option => (
@@ -478,49 +495,32 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
             </Select>
           </FormControl>
 
-          {selectedProvider?.allowCustomModel ? (
-            <TextField
-              fullWidth
-              label={trans.__('Model')}
-              value={model}
-              onChange={e => setModel(e.target.value)}
-              placeholder={trans.__('Enter model name')}
-              helperText={trans.__('Enter any compatible model name')}
-              required
-            />
-          ) : (
-            <FormControl fullWidth required>
-              <InputLabel>{trans.__('Model')}</InputLabel>
-              <Select
-                value={model}
+          <Autocomplete
+            freeSolo
+            fullWidth
+            options={selectedProvider?.models ?? []}
+            value={model}
+            onChange={(_, value) => {
+              setModel(typeof value === 'string' ? value : '');
+            }}
+            inputValue={model}
+            onInputChange={(_, value) => {
+              setModel(value);
+            }}
+            renderInput={params => (
+              <TextField
+                {...params}
+                fullWidth
                 label={trans.__('Model')}
-                onChange={e => setModel(e.target.value)}
-              >
-                {selectedProvider?.models.map(modelOption => (
-                  <MenuItem key={modelOption} value={modelOption}>
-                    <Box>
-                      <Typography variant="body1">{modelOption}</Typography>
-                      <Typography variant="caption" color="text.secondary">
-                        {modelOption.includes('sonnet')
-                          ? trans.__('Balanced performance')
-                          : modelOption.includes('opus')
-                            ? trans.__('Advanced reasoning')
-                            : modelOption.includes('haiku')
-                              ? trans.__('Fast and lightweight')
-                              : modelOption.includes('large')
-                                ? trans.__('Most capable model')
-                                : modelOption.includes('small')
-                                  ? trans.__('Fast and efficient')
-                                  : modelOption.includes('codestral')
-                                    ? trans.__('Code-specialized')
-                                    : trans.__('General purpose')}
-                      </Typography>
-                    </Box>
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
+                placeholder={trans.__('Select or type a model ID')}
+                required
+                helperText={trans.__(
+                  'Choose from the list or enter a custom model ID'
+                )}
+              />
+            )}
+            clearOnBlur={false}
+          />
 
           {selectedProvider &&
             selectedProvider?.apiKeyRequirement !== 'none' && (
@@ -658,7 +658,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                   }
                   placeholder={trans.__('Leave empty for provider default')}
                   helperText={trans.__('Maximum length of AI responses')}
-                  inputProps={{ min: 1 }}
+                  slotProps={{ htmlInput: { min: 1 } }}
                 />
 
                 <TextField
@@ -678,7 +678,42 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                   helperText={trans.__(
                     'Maximum number of tool execution turns'
                   )}
-                  inputProps={{ min: 1, max: 100 }}
+                  slotProps={{ htmlInput: { min: 1, max: 100 } }}
+                />
+
+                <TextField
+                  fullWidth
+                  label={trans.__('Context Window (Optional)')}
+                  type="number"
+                  value={parameters.contextWindow ?? ''}
+                  onChange={e =>
+                    setParameters({
+                      ...parameters,
+                      contextWindow: e.target.value
+                        ? Number(e.target.value)
+                        : undefined
+                    })
+                  }
+                  placeholder={
+                    selectedModelInfo?.contextWindow !== undefined
+                      ? trans.__(
+                          'Default: %1',
+                          selectedModelInfo.contextWindow.toLocaleString()
+                        )
+                      : trans.__('e.g., 128000')
+                  }
+                  helperText={
+                    selectedModelInfo?.contextWindow !== undefined &&
+                    parameters.contextWindow === undefined
+                      ? trans.__(
+                          'Using provider metadata default of %1 tokens for this model unless you override it here.',
+                          selectedModelInfo.contextWindow.toLocaleString()
+                        )
+                      : trans.__(
+                          'Model context window size in tokens (used for context usage estimation)'
+                        )
+                  }
+                  slotProps={{ htmlInput: { min: 1 } }}
                 />
 
                 <Typography
@@ -835,7 +870,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                                         : undefined
                                     )
                                   }
-                                  inputProps={{ min: 1 }}
+                                  slotProps={{ htmlInput: { min: 1 } }}
                                 />
                                 {renderDomainList(
                                   'webSearch.blockedDomains',
@@ -893,7 +928,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                                     : undefined
                                 )
                               }
-                              inputProps={{ min: 1 }}
+                              slotProps={{ htmlInput: { min: 1 } }}
                             />
                             <TextField
                               fullWidth
@@ -909,7 +944,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                                     : undefined
                                 )
                               }
-                              inputProps={{ min: 1 }}
+                              slotProps={{ htmlInput: { min: 1 } }}
                             />
                             {renderDomainList(
                               'webFetch.allowedDomains',