@jupyterlite/ai 0.8.0 → 0.9.0-a0

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

@@ -0,0 +1,256 @@
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  Typography
+} from '@mui/material';
+import React from 'react';
+import { IProviderConfig } from '../models/settings-model';
+import type { IChatProviderRegistry } from '../tokens';
+
+interface IProviderConfigDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (config: Omit<IProviderConfig, 'id'>) => void;
+  initialConfig?: IProviderConfig;
+  mode: 'add' | 'edit';
+  chatProviderRegistry: IChatProviderRegistry;
+}
+
+export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
+  open,
+  onClose,
+  onSave,
+  initialConfig,
+  mode,
+  chatProviderRegistry
+}) => {
+  const [name, setName] = React.useState(initialConfig?.name || '');
+  const [provider, setProvider] = React.useState(
+    initialConfig?.provider || 'anthropic'
+  );
+  const [model, setModel] = React.useState(initialConfig?.model || '');
+  const [apiKey, setApiKey] = React.useState(initialConfig?.apiKey || '');
+  const [baseURL, setBaseURL] = React.useState(initialConfig?.baseURL || '');
+  const [showApiKey, setShowApiKey] = React.useState(false);
+
+  // Get provider options from registry
+  const providerOptions = React.useMemo(() => {
+    const providers = chatProviderRegistry.providers;
+    return Object.keys(providers).map(id => {
+      const info = providers[id];
+      return {
+        value: id,
+        label: info.name,
+        models: info.defaultModels,
+        requiresApiKey: info.requiresApiKey,
+        allowCustomModel: id === 'ollama' // Only Ollama allows custom models for now
+      };
+    });
+  }, [chatProviderRegistry]);
+
+  const selectedProvider = providerOptions.find(p => p.value === provider);
+
+  React.useEffect(() => {
+    if (open) {
+      // Reset form when dialog opens
+      setName(initialConfig?.name || '');
+      setProvider(initialConfig?.provider || 'anthropic');
+      setModel(initialConfig?.model || '');
+      setApiKey(initialConfig?.apiKey || '');
+      setBaseURL(initialConfig?.baseURL || '');
+      setShowApiKey(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]);
+
+  const handleSave = () => {
+    if (!name.trim() || !provider || !model) {
+      return;
+    }
+
+    const config: Omit<IProviderConfig, 'id'> = {
+      name: name.trim(),
+      provider: provider as IProviderConfig['provider'],
+      model,
+      ...(selectedProvider?.requiresApiKey && apiKey && { apiKey }),
+      ...(baseURL && { baseURL })
+    };
+
+    onSave(config);
+    onClose();
+  };
+
+  const isValid =
+    name.trim() &&
+    provider &&
+    model &&
+    (!selectedProvider?.requiresApiKey || apiKey);
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle>
+        {mode === 'add' ? 'Add New Provider' : 'Edit Provider'}
+      </DialogTitle>
+      <DialogContent>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
+          <TextField
+            fullWidth
+            label="Provider Name"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            placeholder="e.g., My Anthropic Config, Work Provider"
+            helperText="A friendly name to identify this provider configuration"
+            required
+          />
+
+          <FormControl fullWidth required>
+            <InputLabel>Provider Type</InputLabel>
+            <Select
+              value={provider}
+              label="Provider Type"
+              onChange={e =>
+                setProvider(e.target.value as IProviderConfig['provider'])
+              }
+            >
+              {providerOptions.map(option => (
+                <MenuItem key={option.value} value={option.value}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {option.label}
+                    {option.requiresApiKey && (
+                      <Chip
+                        size="small"
+                        label="API Key"
+                        color="default"
+                        variant="outlined"
+                      />
+                    )}
+                  </Box>
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          {selectedProvider?.allowCustomModel ? (
+            <TextField
+              fullWidth
+              label="Model"
+              value={model}
+              onChange={e => setModel(e.target.value)}
+              placeholder="Enter model name"
+              helperText="Enter any compatible model name"
+              required
+            />
+          ) : (
+            <FormControl fullWidth required>
+              <InputLabel>Model</InputLabel>
+              <Select
+                value={model}
+                label="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')
+                          ? 'Balanced performance'
+                          : modelOption.includes('opus')
+                            ? 'Advanced reasoning'
+                            : modelOption.includes('haiku')
+                              ? 'Fast and lightweight'
+                              : modelOption.includes('large')
+                                ? 'Most capable model'
+                                : modelOption.includes('small')
+                                  ? 'Fast and efficient'
+                                  : modelOption.includes('codestral')
+                                    ? 'Code-specialized'
+                                    : 'General purpose'}
+                      </Typography>
+                    </Box>
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+
+          {selectedProvider?.requiresApiKey && (
+            <TextField
+              fullWidth
+              label="API Key"
+              type={showApiKey ? 'text' : 'password'}
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              placeholder="Enter your API key..."
+              required={selectedProvider.requiresApiKey}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={() => setShowApiKey(!showApiKey)}
+                      edge="end"
+                    >
+                      {showApiKey ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                )
+              }}
+            />
+          )}
+
+          {(provider === 'ollama' || selectedProvider?.allowCustomModel) && (
+            <TextField
+              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 if needed'
+              }
+            />
+          )}
+
+          {!selectedProvider?.requiresApiKey && (
+            <Alert severity="info">
+              This provider does not require an API key.
+            </Alert>
+          )}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={handleSave} variant="contained" disabled={!isValid}>
+          {mode === 'add' ? 'Add Provider' : 'Save Changes'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

package/style/base.css

@@ -6,20 +6,6 @@
 
 @import url('@jupyter/chat/style/index.css');
 
-.jp-AISettingsInstructions {
-  font-size: var(--jp-content-font-size1);
-}
-
-.jp-AISettingsError {
-  color: var(--jp-error-color1);
-  font-size: var(--jp-content-font-size1);
-}
-
-.jp-AISettingsTextArea {
-  min-width: 400px;
-  min-height: 300px;
-}
-
 .jp-chat-welcome-message {
   text-align: center;
   max-width: 350px;
@@ -43,3 +29,338 @@
   border-color: var(--jp-brand-color1);
   color: var(--jp-brand-color1);
 }
+
+/* Tool Select Component Styles - Enhanced */
+.jp-AIToolSelect-item {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 8px 16px;
+  transition: background-color 0.2s ease;
+}
+
+.jp-AIToolSelect-item:hover {
+  background: var(--jp-layout-color2);
+}
+
+.jp-AIToolSelect-item .lm-Menu-itemIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+
+/* Enhanced tool select button styles */
+.jp-AIToolSelect-button {
+  min-width: 36px;
+  padding: 6px 8px;
+  background: var(--jp-layout-color2) !important;
+  border: 1px solid var(--jp-border-color1) !important;
+  transition: all 0.2s ease;
+}
+
+.jp-AIToolSelect-button:hover {
+  background: var(--jp-layout-color3) !important;
+  border-color: var(--jp-brand-color1) !important;
+}
+
+.jp-AIToolSelect-button[aria-expanded='true'] {
+  background: var(--jp-brand-color1) !important;
+  color: white !important;
+}
+
+/* Enhanced tool select menu styles */
+.jp-AIToolSelect-menu {
+  max-width: 300px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  border: 1px solid var(--jp-border-color2);
+}
+
+.jp-AIToolSelect-menu .MuiMenuItem-root {
+  padding: 8px 16px;
+  min-height: 40px;
+  border-bottom: 1px solid var(--jp-border-color3);
+}
+
+.jp-AIToolSelect-menu .MuiMenuItem-root:last-child {
+  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: 0 1px 3px rgb(0 0 0 / 8%);
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.jp-ai-tool-call:hover {
+  border-color: var(--jp-border-color2);
+  box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
+}
+
+/* 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-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);
+}
+
+/* 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;
+}
+
+.jp-AIChatWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.jp-AIChatPanel {
+  flex: 1;
+  min-height: 0;
+}
+
+.jp-chat-attachment {
+  border-radius: 2px;
+  padding: 0 0.4em;
+}
+
+/* Tool Approval UI Styles */
+.jp-ai-tool-approval {
+  margin: 8px 0;
+  border: 2px solid var(--jp-warn-color1);
+  border-radius: 8px;
+  background: var(--jp-layout-color0);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+  overflow: hidden;
+}
+
+.jp-ai-tool-approval-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: rgb(var(--jp-warn-color1-rgb) / 8%);
+  gap: 12px;
+}
+
+.jp-ai-tool-approval-header .jp-ai-tool-icon {
+  font-size: 16px;
+}
+
+.jp-ai-tool-approval-header .jp-ai-tool-title {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 600;
+  color: var(--jp-warn-color1);
+  flex: 1;
+}
+
+.jp-ai-tool-approval-body {
+  padding: 16px;
+}
+
+.jp-ai-tool-approval-buttons,
+.jp-ai-group-approval-buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  justify-content: flex-end;
+}
+
+.jp-ai-approval-btn {
+  padding: 6px 12px;
+  border: none;
+  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: white;
+}
+
+.jp-ai-approval-approve:hover:not(:disabled) {
+  background: var(--jp-success-color0);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
+}
+
+.jp-ai-approval-reject {
+  background: var(--jp-error-color1);
+  color: white;
+}
+
+.jp-ai-approval-reject:hover:not(:disabled) {
+  background: var(--jp-error-color0);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
+}
+
+.jp-ai-approval-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Unified Approval Status Styles for both single and grouped tools */
+.jp-ai-approval-status,
+.jp-ai-group-approval-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 500;
+}
+
+.jp-ai-approval-status-approved,
+.jp-ai-group-approval-status-approved {
+  background: rgb(var(--jp-success-color1-rgb) / 15%);
+  color: var(--jp-success-color1);
+  border: 1px solid rgb(var(--jp-success-color1-rgb) / 30%);
+}
+
+.jp-ai-approval-status-rejected,
+.jp-ai-group-approval-status-rejected {
+  background: rgb(var(--jp-error-color1-rgb) / 15%);
+  color: var(--jp-error-color1);
+  border: 1px solid rgb(var(--jp-error-color1-rgb) / 30%);
+}
+
+.jp-ai-approval-icon {
+  font-size: 16px;
+}

package/style/icons/jupyternaut-lite.svg

@@ -4,4 +4,4 @@
   <circle cx="19" cy="19" r="19" fill="#f7dc1e"/>
   <path d="m19.948 6.8365c0.6344-0.21603 1.0908-0.81693 1.0908-1.5244 0-0.88916-0.7208-1.61-1.61-1.61s-1.61 0.72081-1.61 1.61c0 0.70739 0.4562 1.3082 1.0905 1.5243v1.1674h-0.5394c-6.2858 0-11.399 5.1132-11.399 11.399 0 6.2859 5.1133 11.399 11.399 11.399h1.398c6.2859 0 11.399-5.1132 11.399-11.399 0-6.2253-5.0159-11.301-11.219-11.397v-1.1687zm-1.5781 22.163h1.398c5.3669 0 9.7303-4.9787 9.7303-8.3455 0-5.3669-4.3634-9.7303-9.7303-9.7303h-1.398c-5.3668 0-9.7302 4.3634-9.7302 9.7303 0 3.3668 4.3634 8.3455 9.7302 8.3455zm14.522-5.003c0.7341 0 0.7375-0.5123 0.7422-1.2408v-1e-4c0.0012-0.1847 0.0025-0.3833 0.0158-0.591 0.0573-0.8624 0.0739-1.7008 0.0573-2.4892l-0.0033-0.119c-0.0373-1.3318-0.0436-1.5579-1.3047-1.8058l-0.1479-0.0246 0.0015 0.0495c0.0076 0.2465 0.0151 0.493 0.0151 0.739 0 1.8018-0.2712 3.5478-0.773 5.189-0.1363 0.4459 0.3433 0.8629 0.7534 0.6411l0.6436-0.3481zm-27.612 0c-0.73409 0-0.73741-0.5123-0.74215-1.2407-0.0012-0.1848-0.00249-0.3834-0.01581-0.5912-0.0573-0.8624-0.07392-1.7007-0.05731-2.4892l0.00336-0.1189c0.03721-1.3319 0.04352-1.5579 1.3047-1.8058l0.14784-0.0247-0.00151 0.0495c-0.00756 0.2465-0.01511 0.493-0.01511 0.739 0 1.8019 0.27119 3.5478 0.773 5.189 0.13634 0.4459-0.34326 0.8629-0.7534 0.6411l-0.64361-0.3481zm14.242-12.005c-4.6297 0-8.4776 2.9361-9.4584 6.7577-0.13379 0.5212 0.5513 0.6935 0.877 0.2653 1.3829-1.818 3.1418-2.153 4.7068-2.4511 2.1143-0.4027 3.8746-0.7379 3.8746-4.5719z" clip-rule="evenodd" fill="#000" fill-rule="evenodd"/>
  </g>
-</svg>
+</svg>

package/lib/base-completer.d.ts

@@ -1,49 +0,0 @@
-import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
-import { BaseLanguageModel } from '@langchain/core/language_models/base';
-import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
-import { IAIProviderRegistry } from './tokens';
-export interface IBaseCompleter {
-    /**
-     * The completion prompt.
-     */
-    readonly systemPrompt: string;
-    /**
-     * The function to fetch a new completion.
-     */
-    requestCompletion?: () => void;
-    /**
-     * The fetch request for the LLM completer.
-     */
-    fetch(request: CompletionHandler.IRequest, context: IInlineCompletionContext): Promise<any>;
-}
-export declare abstract class BaseCompleter implements IBaseCompleter {
-    constructor(options: BaseCompleter.IOptions);
-    /**
-     * Get the system prompt for the completion.
-     */
-    get systemPrompt(): string;
-    /**
-     * The fetch request for the LLM completer.
-     */
-    abstract fetch(request: CompletionHandler.IRequest, context: IInlineCompletionContext): Promise<any>;
-    protected _providerRegistry: IAIProviderRegistry;
-    protected abstract _completer: BaseLanguageModel<any, any>;
-}
-/**
- * The namespace for the base completer.
- */
-export declare namespace BaseCompleter {
-    /**
-     * The options for the constructor of a completer.
-     */
-    interface IOptions {
-        /**
-         * The provider registry.
-         */
-        providerRegistry: IAIProviderRegistry;
-        /**
-         * The settings of the provider.
-         */
-        settings: ReadonlyPartialJSONObject;
-    }
-}

package/lib/base-completer.js

@@ -1,14 +0,0 @@
-import { DEFAULT_COMPLETION_SYSTEM_PROMPT } from './default-prompts';
-export class BaseCompleter {
-    constructor(options) {
-        this._providerRegistry = options.providerRegistry;
-    }
-    /**
-     * Get the system prompt for the completion.
-     */
-    get systemPrompt() {
-        return (this._providerRegistry.completerSystemPrompt ??
-            DEFAULT_COMPLETION_SYSTEM_PROMPT);
-    }
-    _providerRegistry;
-}