@jupyterlite/ai 0.9.0-a3 → 0.9.0

package/src/widgets/ai-settings.tsx

@@ -1,5 +1,6 @@
 import { IThemeManager } from '@jupyterlab/apputils';
 import { ReactWidget } from '@jupyterlab/ui-components';
+import { Debouncer } from '@lumino/polling';
 import Add from '@mui/icons-material/Add';
 import Cable from '@mui/icons-material/Cable';
 import CheckCircle from '@mui/icons-material/CheckCircle';
@@ -42,7 +43,7 @@ import {
   createTheme
 } from '@mui/material';
 import { ISecretsManager } from 'jupyter-secrets-manager';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AgentManagerFactory } from '../agent';
 import {
   AISettingsModel,
@@ -162,6 +163,14 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
   >();
   const [mcpMenuAnchor, setMcpMenuAnchor] = useState<null | HTMLElement>(null);
   const [mcpMenuServerId, setMcpMenuServerId] = useState<string>('');
+  const [systemPromptValue, setSystemPromptValue] = useState(
+    config.systemPrompt
+  );
+  const systemPromptValueRef = React.useRef(config.systemPrompt);
+  const [completionPromptValue, setCompletionPromptValue] = useState(
+    config.completionSystemPrompt
+  );
+  const completionPromptValueRef = React.useRef(config.completionSystemPrompt);
 
   /**
    * Effect to listen for model state changes and update config
@@ -220,6 +229,47 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
     };
   }, [agentManagerFactory]);
 
+  // Sync local state when config changes externally
+  useEffect(() => {
+    setSystemPromptValue(config.systemPrompt);
+    systemPromptValueRef.current = config.systemPrompt;
+  }, [config.systemPrompt]);
+
+  useEffect(() => {
+    setCompletionPromptValue(config.completionSystemPrompt);
+    completionPromptValueRef.current = config.completionSystemPrompt;
+  }, [config.completionSystemPrompt]);
+
+  const promptDebouncer = useMemo(
+    () =>
+      new Debouncer(async () => {
+        await handleConfigUpdate({
+          systemPrompt: systemPromptValueRef.current,
+          completionSystemPrompt: completionPromptValueRef.current
+        });
+      }, 1000),
+    []
+  );
+
+  // Cleanup debouncer on unmount
+  useEffect(() => {
+    return () => {
+      promptDebouncer.dispose();
+    };
+  }, [promptDebouncer]);
+
+  const handleSystemPromptChange = (value: string) => {
+    setSystemPromptValue(value);
+    systemPromptValueRef.current = value;
+    void promptDebouncer.invoke();
+  };
+
+  const handleCompletionPromptChange = (value: string) => {
+    setCompletionPromptValue(value);
+    completionPromptValueRef.current = value;
+    void promptDebouncer.invoke();
+  };
+
   const getSecretFromManager = async (
     provider: string,
     fieldName: string
@@ -232,6 +282,23 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
     return secret?.value;
   };
 
+  const setSecretToManager = async (
+    provider: string,
+    fieldName: string,
+    value: string
+  ): Promise<void> => {
+    await secretsManager?.set(
+      Private.getToken(),
+      SECRETS_NAMESPACE,
+      `${provider}:${fieldName}`,
+      {
+        namespace: SECRETS_NAMESPACE,
+        id: `${provider}:${fieldName}`,
+        value
+      }
+    );
+  };
+
   /**
    * Attach a secrets field to the secrets manager.
    * @param input - the DOm element to attach.
@@ -308,9 +375,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
     // Retrieve the API key from the secrets manager if necessary.
     if (model.config.useSecretsManager && secretsManager) {
       provider.apiKey =
-        (await getSecretFromManager(provider.provider, 'apiKey')) ??
-        provider.apiKey ??
-        '';
+        (await getSecretFromManager(provider.provider, 'apiKey')) ?? '';
     }
     setEditingProvider(provider);
     setDialogOpen(true);
@@ -354,6 +419,15 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
     if (updates.useSecretsManager !== undefined) {
       if (updates.useSecretsManager) {
         for (const provider of model.config.providers) {
+          // if the secrets manager doesn't have the current API key, copy the current
+          // one from settings.
+          if (!(await getSecretFromManager(provider.provider, 'apiKey'))) {
+            setSecretToManager(
+              provider.provider,
+              'apiKey',
+              provider.apiKey ?? ''
+            );
+          }
           provider.apiKey = SECRETS_REPLACEMENT;
           await model.updateProvider(provider.id, provider);
         }
@@ -453,6 +527,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
           overflow: 'auto',
           p: 2,
           pb: 4,
+          boxSizing: 'border-box',
           fontSize: '0.9rem'
         }}
       >
@@ -478,32 +553,6 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
         {/* Tab Panels */}
         {activeTab === 0 && (
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            {secretsManager !== undefined && (
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={config.useSecretsManager}
-                    onChange={e =>
-                      handleConfigUpdate({
-                        useSecretsManager: e.target.checked
-                      })
-                    }
-                    color="primary"
-                    sx={{ alignSelf: 'flex-start' }}
-                  />
-                }
-                label={
-                  <div>
-                    <span>Use the secrets manager to manage API keys</span>
-                    {!config.useSecretsManager && (
-                      <Alert severity="warning" icon={<Error />} sx={{ mb: 2 }}>
-                        The secrets will be stored in plain text in settings
-                      </Alert>
-                    )}
-                  </div>
-                }
-              />
-            )}
             {/* Default Provider Selection */}
             {config.providers.length > 0 && (
               <Card elevation={2}>
@@ -552,6 +601,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                         <Select
                           value={config.activeCompleterProvider || ''}
                           label="Completion Provider"
+                          className="jp-ai-completion-provider-select"
                           onChange={e =>
                             model.setActiveCompleterProvider(
                               e.target.value || undefined
@@ -559,7 +609,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                           }
                         >
                           <MenuItem value="">
-                            <em>Use chat provider</em>
+                            <em>No completion</em>
                           </MenuItem>
                           {config.providers.map(provider => (
                             <MenuItem key={provider.id} value={provider.id}>
@@ -726,6 +776,34 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                 )}
               </CardContent>
             </Card>
+
+            {/* Secrets Manager Settings */}
+            {secretsManager !== undefined && (
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={config.useSecretsManager}
+                    onChange={e =>
+                      handleConfigUpdate({
+                        useSecretsManager: e.target.checked
+                      })
+                    }
+                    color="primary"
+                    sx={{ alignSelf: 'flex-start' }}
+                  />
+                }
+                label={
+                  <div>
+                    <span>Use the secrets manager to manage API keys</span>
+                    {!config.useSecretsManager && (
+                      <Alert severity="warning" icon={<Error />} sx={{ mb: 2 }}>
+                        The secrets are stored in plain text in settings
+                      </Alert>
+                    )}
+                  </div>
+                }
+              />
+            )}
           </Box>
         )}
 
@@ -807,6 +885,68 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                   }
                 />
 
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={config.showCellDiff}
+                      onChange={e =>
+                        handleConfigUpdate({
+                          showCellDiff: e.target.checked
+                        })
+                      }
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <Box>
+                      <Typography variant="body1">Show Cell Diff</Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        Show diff view when AI modifies cell content
+                      </Typography>
+                    </Box>
+                  }
+                />
+
+                {config.showCellDiff && (
+                  <FormControl sx={{ ml: 4 }}>
+                    <InputLabel>Diff Display Mode</InputLabel>
+                    <Select
+                      value={config.diffDisplayMode}
+                      label="Diff Display Mode"
+                      onChange={e =>
+                        handleConfigUpdate({
+                          diffDisplayMode: e.target.value as 'split' | 'unified'
+                        })
+                      }
+                    >
+                      <MenuItem value="split">Split View</MenuItem>
+                      <MenuItem value="unified">Unified View</MenuItem>
+                    </Select>
+                  </FormControl>
+                )}
+
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={config.showFileDiff}
+                      onChange={e =>
+                        handleConfigUpdate({
+                          showFileDiff: e.target.checked
+                        })
+                      }
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <Box>
+                      <Typography variant="body1">Show File Diff</Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        Show diff view when AI modifies file content
+                      </Typography>
+                    </Box>
+                  }
+                />
+
                 <Divider sx={{ my: 1 }} />
 
                 <TextField
@@ -814,14 +954,23 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                   multiline
                   rows={3}
                   label="System Prompt"
-                  value={config.systemPrompt}
-                  onChange={e =>
-                    handleConfigUpdate({ systemPrompt: e.target.value })
-                  }
+                  value={systemPromptValue}
+                  onChange={e => handleSystemPromptChange(e.target.value)}
                   placeholder="Define the AI's behavior and personality..."
                   helperText="Instructions that define how the AI should behave and respond"
                 />
 
+                <TextField
+                  fullWidth
+                  multiline
+                  rows={3}
+                  label="Completion System Prompt"
+                  value={completionPromptValue}
+                  onChange={e => handleCompletionPromptChange(e.target.value)}
+                  placeholder="Define how the AI should generate code completions..."
+                  helperText="Instructions that define how the AI should generate code completions"
+                />
+
                 <Divider sx={{ my: 2 }} />
 
                 <Box>

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

@@ -5,6 +5,7 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Autocomplete,
   Box,
   Button,
   Chip,
@@ -83,9 +84,10 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
         label: info.name,
         models: info.defaultModels,
         apiKeyRequirement: info.apiKeyRequirement,
-        allowCustomModel: id === 'ollama' || id === 'generic', // Ollama and Generic allow custom models
+        allowCustomModel: id === 'generic', // Generic allows custom models
         supportsBaseURL: info.supportsBaseURL,
-        description: info.description
+        description: info.description,
+        baseUrls: info.baseUrls
       };
     });
   }, [providerRegistry]);
@@ -279,21 +281,46 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
             )}
 
           {selectedProvider?.supportsBaseURL && (
-            <TextField
+            <Autocomplete
+              freeSolo
               fullWidth
-              label="Base URL (Optional)"
-              value={baseURL}
-              onChange={e => setBaseURL(e.target.value)}
-              placeholder={
-                provider === 'ollama'
-                  ? 'http://localhost:11434/api'
-                  : 'Custom API endpoint'
-              }
-              helperText={
-                provider === 'ollama'
-                  ? 'Ollama server endpoint'
-                  : 'Custom API base URL (e.g., for LiteLLM proxy). Leave empty to use default provider endpoint.'
-              }
+              options={(selectedProvider.baseUrls ?? []).map(
+                option => option.url
+              )}
+              value={baseURL || ''}
+              onChange={(_, value) => {
+                if (value && typeof value === 'string') {
+                  setBaseURL(value);
+                }
+              }}
+              inputValue={baseURL || ''}
+              renderOption={(props, option) => {
+                const urlOption = (selectedProvider.baseUrls ?? []).find(
+                  u => u.url === option
+                );
+                return (
+                  <Box component="li" {...props} key={option}>
+                    <Box>
+                      <Typography variant="body2">{option}</Typography>
+                      {urlOption?.description && (
+                        <Typography variant="caption" color="text.secondary">
+                          {urlOption.description}
+                        </Typography>
+                      )}
+                    </Box>
+                  </Box>
+                );
+              }}
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  fullWidth
+                  label="Base URL"
+                  placeholder="https://api.example.com/v1"
+                  onChange={e => setBaseURL(e.target.value)}
+                />
+              )}
+              clearOnBlur={false}
             />
           )}
 

package/style/base.css

@@ -371,6 +371,11 @@
   transform: rotate(180deg);
 }
 
+.jp-ai-settings-icon {
+  align-items: center;
+  display: flex;
+}
+
 .jp-chat-sidepanel .jp-chat-add span.jp-ToolbarButtonComponent-label {
   display: none;
 }
@@ -379,3 +384,12 @@
   stroke: var(--jp-inverse-layout-color3);
   stroke-width: 2;
 }
+
+/* Disabled color for the completion status */
+.jp-ai-completion-status .jp-ai-completion-disabled circle {
+  fill: var(--jp-layout-color3);
+}
+
+.jp-ai-completion-status .jp-ai-completion-disabled path {
+  fill: var(--jp-layout-color2);
+}