@jupyterlite/ai 0.14.0 → 0.15.0

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 { SaveComponentWidget } from '../components/save-button';
 import { TokenUsageWidget } from '../components/token-usage-display';
-import { AISettingsModel } from '../models/settings-model';
 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,6 +42,17 @@ 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({
       tokenUsageChanged: this.model.tokenUsageChanged,
@@ -52,11 +62,6 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
     });
     this.toolbar.addItem('token-usage', tokenUsageWidget);
 
-    // 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,12 @@ 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';
 
 /**
  * Default parameter values for provider configuration
@@ -187,7 +191,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 +203,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 +223,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 +234,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 +460,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 +490,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' && (

package/style/base.css

@@ -88,164 +88,6 @@
   border-bottom: none;
 }
 
-/* Modern Tool Call Card Styling */
-.jp-ai-tool-call {
-  margin: 8px 0;
-  border: 1px solid var(--jp-border-color1);
-  border-radius: 6px;
-  background: var(--jp-layout-color0);
-  box-shadow: var(--jp-elevation-z2);
-  transition: all 0.2s ease;
-  overflow: hidden;
-}
-
-.jp-ai-tool-call:hover {
-  border-color: var(--jp-border-color2);
-  box-shadow: var(--jp-elevation-z4);
-}
-
-/* Tool Header - clickable summary */
-.jp-ai-tool-header {
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  background: var(--jp-layout-color1);
-  cursor: pointer;
-  user-select: none;
-  gap: 8px;
-  transition: background-color 0.2s ease;
-}
-
-.jp-ai-tool-header:hover {
-  background: var(--jp-layout-color2);
-}
-
-.jp-ai-tool-header::marker {
-  content: '';
-}
-
-.jp-ai-tool-header::before {
-  content: '';
-  width: 0;
-  height: 0;
-  border-left: 5px solid var(--jp-ui-font-color2);
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  transition: transform 0.2s ease;
-}
-
-.jp-ai-tool-call[open] .jp-ai-tool-header::before {
-  transform: rotate(90deg);
-}
-
-.jp-ai-tool-icon {
-  font-size: 14px;
-  opacity: 0.8;
-}
-
-.jp-ai-tool-title {
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size1);
-  font-weight: 500;
-  color: var(--jp-ui-font-color1);
-  flex: 1;
-}
-
-.jp-ai-tool-summary {
-  font-weight: 400;
-  opacity: 0.7;
-  font-size: var(--jp-ui-font-size0);
-}
-
-.jp-ai-tool-summary::before {
-  content: ' ';
-  white-space: pre;
-}
-
-.jp-ai-tool-status {
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 500;
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-
-.jp-ai-tool-status-pending {
-  background: rgb(var(--jp-warn-color1-rgb) / 15%);
-  color: var(--jp-warn-color1);
-}
-
-.jp-ai-tool-status-completed {
-  background: rgb(var(--jp-success-color1-rgb) / 15%);
-  color: var(--jp-success-color1);
-}
-
-.jp-ai-tool-status-error {
-  background: rgb(var(--jp-error-color1-rgb) / 15%);
-  color: var(--jp-error-color1);
-}
-
-.jp-ai-tool-status-approval {
-  background: rgb(var(--jp-warn-color1-rgb) / 15%);
-  color: var(--jp-warn-color1);
-}
-
-/* Tool Body */
-.jp-ai-tool-body {
-  padding: 8px 12px 12px;
-}
-
-.jp-ai-tool-section {
-  margin-bottom: 8px;
-}
-
-.jp-ai-tool-section:last-child {
-  margin-bottom: 0;
-}
-
-.jp-ai-tool-label {
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  color: var(--jp-ui-font-color2);
-  margin-bottom: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.jp-ai-tool-code {
-  background: var(--jp-layout-color2);
-  border: 1px solid var(--jp-border-color1);
-  border-radius: 4px;
-  padding: 8px;
-  margin: 0;
-  font-family: var(--jp-code-font-family);
-  font-size: var(--jp-code-font-size);
-  line-height: 1.4;
-  overflow: auto auto;
-  max-height: 200px;
-}
-
-.jp-ai-tool-code code {
-  background: none;
-  padding: 0;
-  border: none;
-  font-family: inherit;
-  font-size: inherit;
-}
-
-/* State-specific styling */
-.jp-ai-tool-pending {
-  border-left: 4px solid var(--jp-warn-color1);
-}
-
-.jp-ai-tool-completed {
-  border-left: 4px solid var(--jp-success-color1);
-}
-
-.jp-ai-tool-error {
-  border-left: 4px solid var(--jp-error-color1);
-}
-
 .jp-AIChatToolbar {
   display: flex;
   flex-shrink: 0;
@@ -267,53 +109,33 @@
   padding: 0 0.4em;
 }
 
-/* Tool Approval Button Styles */
-.jp-ai-tool-approval-buttons,
-.jp-ai-group-approval-buttons {
+/* Save button */
+.jp-ai-SaveButton {
   display: flex;
-  gap: 8px;
-  margin-top: 12px;
-  justify-content: flex-end;
-}
-
-.jp-ai-approval-btn {
-  padding: 6px 12px;
-  border: none;
+  align-items: center;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color1);
   border-radius: 4px;
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 70px;
-  display: inline-block;
-}
-
-.jp-ai-approval-approve {
-  background: var(--jp-success-color1);
-  color: var(--jp-ui-inverse-font-color1);
+  padding: 4px;
 }
 
-.jp-ai-approval-approve:hover:not(:disabled) {
-  background: var(--jp-success-color0);
-  transform: translateY(-1px);
-  box-shadow: var(--jp-elevation-z4);
+.jp-ai-SaveButton.lm-mod-toggled {
+  box-shadow: inset 0 0 2px 2px var(--neutral-fill-strong-active);
 }
 
-.jp-ai-approval-reject {
-  background: var(--jp-error-color1);
-  color: var(--jp-ui-inverse-font-color1);
+.jp-ai-SaveButton .jp-ToolbarButtonComponent {
+  margin: unset;
+  height: 18px;
 }
 
-.jp-ai-approval-reject:hover:not(:disabled) {
-  background: var(--jp-error-color0);
-  transform: translateY(-1px);
-  box-shadow: var(--jp-elevation-z4);
+.jp-ai-SaveButton .jp-ai-AutoSaveButton {
+  min-width: unset;
+  width: 18px;
 }
 
-.jp-ai-approval-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.jp-ai-SaveButton .jp-ai-AutoSaveButton svg {
+  width: 12px;
+  height: 12px;
 }
 
 .jp-MainAreaWidget

package/lib/approval-buttons.d.ts

@@ -1,49 +0,0 @@
-import { ChatWidget } from '@jupyter/chat';
-import { IDisposable } from '@lumino/disposable';
-import type { AgentManager } from './agent';
-/**
- * Handles click events for approval buttons in the chat panel.
- */
-export declare class ApprovalButtons implements IDisposable {
-    constructor(options: ApprovalButtons.IOptions);
-    get isDisposed(): boolean;
-    /**
-     * Dispose of the resources held by the object.
-     */
-    dispose(): void;
-    /**
-     * Handles click events using event delegation.
-     * Detects clicks on approval buttons and calls the appropriate handler.
-     */
-    private _handleClick;
-    /**
-     * Handles approval/rejection of a tool call.
-     */
-    private _handleApproval;
-    /**
-     * Extracts the approval ID from an element's class list.
-     * The ID is encoded in a class name like "jp-ai-approval-id--{id}".
-     */
-    private _extractApprovalId;
-    private _chatPanel;
-    private _isDisposed;
-    private _agentManager;
-}
-/**
- * Namespace for ApprovalButtons statics.
- */
-export declare namespace ApprovalButtons {
-    /**
-     * The options for the constructor of the approval buttons.
-     */
-    interface IOptions {
-        /**
-         * The chat panel widget to wrap.
-         */
-        chatPanel: ChatWidget;
-        /**
-         * The agent manager for handling approvals.
-         */
-        agentManager: AgentManager;
-    }
-}

package/lib/approval-buttons.js

@@ -1,79 +0,0 @@
-/**
- * Handles click events for approval buttons in the chat panel.
- */
-export class ApprovalButtons {
-    constructor(options) {
-        this._chatPanel = options.chatPanel;
-        this._agentManager = options.agentManager;
-        this._chatPanel.node.addEventListener('click', this._handleClick);
-    }
-    get isDisposed() {
-        return this._isDisposed;
-    }
-    /**
-     * Dispose of the resources held by the object.
-     */
-    dispose() {
-        if (this._isDisposed) {
-            return;
-        }
-        this._isDisposed = true;
-        this._chatPanel.node.removeEventListener('click', this._handleClick);
-        this._chatPanel = null;
-    }
-    /**
-     * Handles click events using event delegation.
-     * Detects clicks on approval buttons and calls the appropriate handler.
-     */
-    _handleClick = (event) => {
-        const target = event.target;
-        // Check if the click target is an approval button
-        if (!target.classList.contains('jp-ai-approval-btn')) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        const isApprove = target.classList.contains('jp-ai-approval-approve');
-        this._handleApproval(target, isApprove);
-    };
-    /**
-     * Handles approval/rejection of a tool call.
-     */
-    _handleApproval(target, isApprove) {
-        const container = target.closest('.jp-ai-tool-approval-buttons');
-        if (!container) {
-            return;
-        }
-        // Extract approval ID from class name (encoded as jp-ai-approval-id--{id})
-        const approvalId = this._extractApprovalId(container);
-        if (!approvalId) {
-            console.warn('No approval ID found for button');
-            return;
-        }
-        // Disable buttons to prevent double-clicks
-        const buttons = container.querySelectorAll('button');
-        buttons.forEach(btn => btn.setAttribute('disabled', 'true'));
-        if (isApprove) {
-            this._agentManager.approveToolCall(approvalId);
-        }
-        else {
-            this._agentManager.rejectToolCall(approvalId);
-        }
-    }
-    /**
-     * Extracts the approval ID from an element's class list.
-     * The ID is encoded in a class name like "jp-ai-approval-id--{id}".
-     */
-    _extractApprovalId(element) {
-        const prefix = 'jp-ai-approval-id--';
-        for (const className of element.classList) {
-            if (className.startsWith(prefix)) {
-                return className.slice(prefix.length);
-            }
-        }
-        return null;
-    }
-    _chatPanel;
-    _isDisposed = false;
-    _agentManager;
-}