@jupyterlite/ai 0.8.1 → 0.9.0-a1

package/lib/widgets/ai-settings.js

@@ -0,0 +1,580 @@
+import { ReactWidget } from '@jupyterlab/ui-components';
+import Add from '@mui/icons-material/Add';
+import Cable from '@mui/icons-material/Cable';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
+import Error from '@mui/icons-material/Error';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import MoreVert from '@mui/icons-material/MoreVert';
+import Psychology from '@mui/icons-material/Psychology';
+import Settings from '@mui/icons-material/Settings';
+import { Alert, Box, Button, Card, CardContent, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControl, FormControlLabel, IconButton, InputLabel, List, ListItem, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Select, Slider, Switch, Tab, Tabs, TextField, ThemeProvider, Typography, createTheme } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { SECRETS_NAMESPACE, SECRETS_REPLACEMENT } from '../tokens';
+import { ProviderConfigDialog } from './provider-config-dialog';
+/**
+ * Create a theme that uses IThemeManager to detect theme
+ * @param themeManager - Optional theme manager to detect theme
+ * @returns A Material-UI theme configured for the current JupyterLab theme
+ */
+const createJupyterLabTheme = (themeManager) => {
+    // Use IThemeManager if available, otherwise default to light theme
+    const isDark = themeManager?.theme
+        ? !themeManager.isLight(themeManager.theme)
+        : false;
+    return createTheme({
+        palette: {
+            mode: isDark ? 'dark' : 'light'
+        }
+    });
+};
+/**
+ * A JupyterLab widget for AI settings configuration
+ */
+export class AISettingsWidget extends ReactWidget {
+    /**
+     * Construct a new AI settings widget
+     * @param options - The options for initializing the widget
+     */
+    constructor(options) {
+        super();
+        Private.setToken(options.token);
+        this._settingsModel = options.settingsModel;
+        this._agentManager = options.agentManager;
+        this._themeManager = options.themeManager;
+        this._chatProviderRegistry = options.chatProviderRegistry;
+        this._secretsManager = options.secretsManager;
+        this.id = 'jupyterlite-ai-settings';
+        this.title.label = 'AI Settings';
+        this.title.caption = 'Configure AI providers and behavior';
+        this.title.closable = true;
+    }
+    /**
+     * Render the AI settings component
+     * @returns A React element containing the AI settings interface
+     */
+    render() {
+        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManager: this._agentManager, themeManager: this._themeManager, chatProviderRegistry: this._chatProviderRegistry, secretsManager: this._secretsManager }));
+    }
+    _settingsModel;
+    _agentManager;
+    _themeManager;
+    _chatProviderRegistry;
+    _secretsManager;
+}
+/**
+ * The main AI settings component that provides configuration UI
+ * @param props - Component props containing models and theme manager
+ * @returns A React component for AI settings configuration
+ */
+const AISettingsComponent = ({ model, agentManager, themeManager, chatProviderRegistry, secretsManager }) => {
+    if (!model) {
+        return React.createElement("div", null, "Settings model not available");
+    }
+    const [config, setConfig] = useState(model.config || {});
+    const [theme, setTheme] = useState(() => createJupyterLabTheme(themeManager));
+    const [activeTab, setActiveTab] = useState(0);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingProvider, setEditingProvider] = useState();
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const [menuProviderId, setMenuProviderId] = useState('');
+    const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+    const [editingMCPServer, setEditingMCPServer] = useState();
+    const [mcpMenuAnchor, setMcpMenuAnchor] = useState(null);
+    const [mcpMenuServerId, setMcpMenuServerId] = useState('');
+    /**
+     * Effect to listen for model state changes and update config
+     */
+    useEffect(() => {
+        if (!model || !model.stateChanged) {
+            return;
+        }
+        const onStateChanged = () => {
+            setConfig(model.config || {});
+        };
+        model.stateChanged.connect(onStateChanged);
+        return () => {
+            model.stateChanged.disconnect(onStateChanged);
+        };
+    }, [model]);
+    /**
+     * Effect to listen for theme changes and update the Material-UI theme
+     */
+    useEffect(() => {
+        if (!themeManager) {
+            return;
+        }
+        const updateTheme = () => {
+            setTheme(createJupyterLabTheme(themeManager));
+        };
+        themeManager.themeChanged.connect(updateTheme);
+        return () => {
+            themeManager.themeChanged.disconnect(updateTheme);
+        };
+    }, [themeManager]);
+    /**
+     * Effect to listen for MCP connection changes to re-render connection status
+     */
+    useEffect(() => {
+        if (!agentManager) {
+            return;
+        }
+        const onMCPConnectionChanged = () => {
+            // Force a re-render by updating the config state
+            setConfig(prevConfig => ({ ...prevConfig }));
+        };
+        agentManager.mcpConnectionChanged.connect(onMCPConnectionChanged);
+        return () => {
+            agentManager.mcpConnectionChanged.disconnect(onMCPConnectionChanged);
+        };
+    }, [agentManager]);
+    const getSecretFromManager = async (provider, fieldName) => {
+        const secret = await secretsManager?.get(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`);
+        return secret?.value;
+    };
+    /**
+     * Attach a secrets field to the secrets manager.
+     * @param input - the DOm element to attach.
+     * @param provider - the name of the provider.
+     * @param fieldName - the name of the field.
+     */
+    const handleSecretField = async (input, provider, fieldName) => {
+        if (!(model.config.useSecretsManager && secretsManager)) {
+            return;
+        }
+        await secretsManager?.attach(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`, input);
+    };
+    /**
+     * Handle adding a new AI provider
+     * @param providerConfig - The provider configuration to add
+     */
+    const handleAddProvider = async (providerConfig) => {
+        if (model.config.useSecretsManager &&
+            secretsManager &&
+            providerConfig.apiKey) {
+            providerConfig.apiKey = SECRETS_REPLACEMENT;
+        }
+        await model.addProvider(providerConfig);
+    };
+    /**
+     * Handle editing an existing AI provider
+     * @param providerConfig - The updated provider configuration
+     */
+    const handleEditProvider = async (providerConfig) => {
+        if (editingProvider) {
+            if (model.config.useSecretsManager &&
+                secretsManager &&
+                providerConfig.apiKey) {
+                providerConfig.apiKey = SECRETS_REPLACEMENT;
+            }
+            await model.updateProvider(editingProvider.id, providerConfig);
+            setEditingProvider(undefined);
+        }
+    };
+    /**
+     * Handle deleting an AI provider
+     * @param id - The ID of the provider to delete
+     */
+    const handleDeleteProvider = async (id) => {
+        await model.removeProvider(id);
+        setMenuAnchor(null);
+    };
+    /**
+     * Open the provider edit dialog
+     * @param provider - The provider to edit
+     */
+    const openEditDialog = async (provider) => {
+        // Retrieve the API key from the secrets manager if necessary.
+        if (model.config.useSecretsManager && secretsManager) {
+            provider.apiKey =
+                (await getSecretFromManager(provider.provider, 'apiKey')) ??
+                    provider.apiKey ??
+                    '';
+        }
+        setEditingProvider(provider);
+        setDialogOpen(true);
+        setMenuAnchor(null);
+    };
+    /**
+     * Open the provider add dialog
+     */
+    const openAddDialog = () => {
+        setEditingProvider(undefined);
+        setDialogOpen(true);
+    };
+    /**
+     * Handle provider menu click
+     * @param event - The click event
+     * @param providerId - The ID of the provider
+     */
+    const handleMenuClick = (event, providerId) => {
+        setMenuAnchor(event.currentTarget);
+        setMenuProviderId(providerId);
+    };
+    /**
+     * Handle provider menu close
+     */
+    const handleMenuClose = () => {
+        setMenuAnchor(null);
+        setMenuProviderId('');
+    };
+    /**
+     * Handle updating AI configuration
+     * @param updates - Partial configuration updates to apply
+     */
+    const handleConfigUpdate = async (updates) => {
+        if (updates.useSecretsManager !== undefined) {
+            if (updates.useSecretsManager) {
+                for (const provider of model.config.providers) {
+                    provider.apiKey = SECRETS_REPLACEMENT;
+                    await model.updateProvider(provider.id, provider);
+                }
+            }
+            else {
+                for (const provider of model.config.providers) {
+                    const apiKey = await getSecretFromManager(provider.provider, 'apiKey');
+                    if (apiKey) {
+                        provider.apiKey = apiKey;
+                        await model.updateProvider(provider.id, provider);
+                    }
+                }
+            }
+        }
+        await model.updateConfig(updates);
+    };
+    /**
+     * Handle adding a new MCP server
+     * @param serverConfig - The MCP server configuration to add
+     */
+    const handleAddMCPServer = async (serverConfig) => {
+        await model.addMCPServer(serverConfig);
+    };
+    /**
+     * Handle editing an existing MCP server
+     * @param serverConfig - The updated MCP server configuration
+     */
+    const handleEditMCPServer = async (serverConfig) => {
+        if (editingMCPServer) {
+            await model.updateMCPServer(editingMCPServer.id, serverConfig);
+            setEditingMCPServer(undefined);
+        }
+    };
+    /**
+     * Handle deleting an MCP server
+     * @param id - The ID of the MCP server to delete
+     */
+    const handleDeleteMCPServer = async (id) => {
+        await model.removeMCPServer(id);
+        setMcpMenuAnchor(null);
+    };
+    /**
+     * Open the MCP server edit dialog
+     * @param server - The MCP server to edit
+     */
+    const openEditMCPDialog = (server) => {
+        setEditingMCPServer(server);
+        setMcpDialogOpen(true);
+        setMcpMenuAnchor(null);
+    };
+    /**
+     * Open the MCP server add dialog
+     */
+    const openAddMCPDialog = () => {
+        setEditingMCPServer(undefined);
+        setMcpDialogOpen(true);
+    };
+    /**
+     * Handle MCP server menu click
+     * @param event - The click event
+     * @param serverId - The ID of the MCP server
+     */
+    const handleMCPMenuClick = (event, serverId) => {
+        setMcpMenuAnchor(event.currentTarget);
+        setMcpMenuServerId(serverId);
+    };
+    /**
+     * Handle MCP server menu close
+     */
+    const handleMCPMenuClose = () => {
+        setMcpMenuAnchor(null);
+        setMcpMenuServerId('');
+    };
+    const isValidConfig = agentManager?.hasValidConfig() ?? false;
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(Box, { sx: {
+                height: '100%',
+                maxHeight: '100vh',
+                overflow: 'auto',
+                p: 2,
+                pb: 4,
+                fontSize: '0.9rem'
+            } },
+            React.createElement(Box, { sx: { mb: 2, display: 'flex', alignItems: 'center', gap: 2 } },
+                React.createElement(Settings, { color: "primary", sx: { fontSize: 24 } }),
+                React.createElement(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600 } }, "AI Settings")),
+            React.createElement(Alert, { severity: isValidConfig ? 'success' : 'warning', icon: isValidConfig ? React.createElement(CheckCircle, null) : React.createElement(Error, null), sx: { mb: 2 } }, isValidConfig
+                ? 'Configuration is valid and ready to use'
+                : 'Please add and configure a provider to get started'),
+            React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider', mb: 2 } },
+                React.createElement(Tabs, { value: activeTab, onChange: (_, newValue) => setActiveTab(newValue) },
+                    React.createElement(Tab, { label: "Providers" }),
+                    React.createElement(Tab, { label: "Model Parameters" }),
+                    React.createElement(Tab, { label: "Behavior" }),
+                    React.createElement(Tab, { label: "MCP Servers" }))),
+            activeTab === 0 && (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
+                secretsManager !== undefined && (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, "Use the secrets manager to manage API keys"),
+                        !config.useSecretsManager && (React.createElement(Alert, { severity: "warning", icon: React.createElement(Error, null), sx: { mb: 2 } }, "The secrets will be stored in plain text in settings"))) })),
+                config.providers.length > 0 && (React.createElement(Card, { elevation: 2 },
+                    React.createElement(CardContent, null,
+                        React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, "Active Providers"),
+                        React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
+                            React.createElement(FormControl, { fullWidth: true },
+                                React.createElement(InputLabel, null, "Chat Provider"),
+                                React.createElement(Select, { value: config.activeProvider, label: "Chat Provider", onChange: e => model.setActiveProvider(e.target.value) }, config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name))))),
+                            React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSameProviderForChatAndCompleter, onChange: e => handleConfigUpdate({
+                                        useSameProviderForChatAndCompleter: e.target.checked
+                                    }), color: "primary" }), label: "Use same provider for chat and completions" }),
+                            !config.useSameProviderForChatAndCompleter && (React.createElement(FormControl, { fullWidth: true },
+                                React.createElement(InputLabel, null, "Completion Provider"),
+                                React.createElement(Select, { value: config.activeCompleterProvider || '', label: "Completion Provider", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined) },
+                                    React.createElement(MenuItem, { value: "" },
+                                        React.createElement("em", null, "Use chat provider")),
+                                    config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name)))))))))),
+                React.createElement(Card, { elevation: 2 },
+                    React.createElement(CardContent, null,
+                        React.createElement(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                mb: 2
+                            } },
+                            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+                                React.createElement(Typography, { variant: "h6", component: "h2" }, "Configured Providers")),
+                            React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddDialog, size: "small" }, "Add Provider")),
+                        config.providers.length === 0 ? (React.createElement(Alert, { severity: "info" }, "No providers configured yet. Click \"Add Provider\" to get started.")) : (React.createElement(List, null, config.providers.map(provider => (React.createElement(ListItem, { key: provider.id, divider: true },
+                            React.createElement(ListItemText, { primary: provider.name, secondary: React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                                    provider.provider,
+                                    " \u2022 ",
+                                    provider.model) }),
+                            React.createElement(ListItemSecondaryAction, null,
+                                React.createElement(IconButton, { onClick: e => handleMenuClick(e, provider.id), size: "small" },
+                                    React.createElement(MoreVert, null)))))))))))),
+            activeTab === 1 && (React.createElement(Card, { elevation: 2 },
+                React.createElement(CardContent, null,
+                    React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', mb: 1.5, gap: 1 } },
+                        React.createElement(Psychology, { color: "primary" }),
+                        React.createElement(Typography, { variant: "h6", component: "h2" }, "Model Parameters")),
+                    React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { variant: "body1", gutterBottom: true },
+                                "Temperature: ",
+                                config.temperature),
+                            React.createElement(Slider, { value: config.temperature, onChange: (_, value) => handleConfigUpdate({ temperature: value }), min: 0, max: 2, step: 0.1, valueLabelDisplay: "auto" }),
+                            React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Controls response creativity: low value = deterministic and focused, middle value = balanced, high value = creative and varied")),
+                        React.createElement(TextField, { fullWidth: true, label: "Max Tokens", type: "number", value: config.maxTokens || '', onChange: e => handleConfigUpdate({
+                                maxTokens: e.target.value
+                                    ? parseInt(e.target.value)
+                                    : undefined
+                            }), inputProps: { min: 1, max: 8192 }, helperText: "Maximum length of AI responses (leave empty for provider default)" }),
+                        React.createElement(TextField, { fullWidth: true, label: "Max Turns", type: "number", value: config.maxTurns, onChange: e => handleConfigUpdate({
+                                maxTurns: parseInt(e.target.value)
+                            }), inputProps: { min: 1, max: 100 }, helperText: "Maximum number of tool execution turns (when using tools)" }))))),
+            activeTab === 2 && (React.createElement(Card, { elevation: 2 },
+                React.createElement(CardContent, null,
+                    React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, "Behavior Settings"),
+                    React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
+                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.toolsEnabled, onChange: e => handleConfigUpdate({
+                                    toolsEnabled: e.target.checked
+                                }), color: "primary" }), label: React.createElement(Box, null,
+                                React.createElement(Typography, { variant: "body1" }, "Enable Tools"),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Allow the AI to use tools like notebook operations, code execution, and file management")) }),
+                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.sendWithShiftEnter, onChange: e => handleConfigUpdate({
+                                    sendWithShiftEnter: e.target.checked
+                                }), color: "primary" }), label: React.createElement(Box, null,
+                                React.createElement(Typography, { variant: "body1" }, "Send with Shift+Enter"),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Use Shift+Enter to send messages (Enter creates new line)")) }),
+                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showTokenUsage, onChange: e => handleConfigUpdate({
+                                    showTokenUsage: e.target.checked
+                                }), color: "primary" }), label: React.createElement(Box, null,
+                                React.createElement(Typography, { variant: "body1" }, "Show Token Usage"),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Display token usage information in the chat toolbar")) }),
+                        React.createElement(Divider, { sx: { my: 1 } }),
+                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: "System Prompt", value: config.systemPrompt, onChange: e => handleConfigUpdate({ systemPrompt: e.target.value }), placeholder: "Define the AI's behavior and personality...", helperText: "Instructions that define how the AI should behave and respond" }),
+                        React.createElement(Divider, { sx: { my: 2 } }),
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { variant: "body1", gutterBottom: true }, "Commands Requiring Approval"),
+                            React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, "Commands that require user approval before AI can execute them"),
+                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, config.commandsRequiringApproval.map((command, index) => (React.createElement(ListItem, { key: index, divider: true },
+                                React.createElement(ListItemText, { primary: command }),
+                                React.createElement(ListItemSecondaryAction, null,
+                                    React.createElement(IconButton, { onClick: () => {
+                                            const newCommands = [
+                                                ...config.commandsRequiringApproval
+                                            ];
+                                            newCommands.splice(index, 1);
+                                            handleConfigUpdate({
+                                                commandsRequiringApproval: newCommands
+                                            });
+                                        }, size: "small" },
+                                        React.createElement(Delete, null))))))),
+                            React.createElement(TextField, { fullWidth: true, label: "Add New Command", placeholder: "e.g., notebook:run-cell", onKeyDown: e => {
+                                    if (e.key === 'Enter') {
+                                        const value = e.target.value.trim();
+                                        if (value &&
+                                            !config.commandsRequiringApproval.includes(value)) {
+                                            const newCommands = [
+                                                ...config.commandsRequiringApproval,
+                                                value
+                                            ];
+                                            handleConfigUpdate({
+                                                commandsRequiringApproval: newCommands
+                                            });
+                                            e.target.value = '';
+                                        }
+                                    }
+                                }, helperText: "Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code" })))))),
+            activeTab === 3 && (React.createElement(Card, { elevation: 2 },
+                React.createElement(CardContent, null,
+                    React.createElement(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            mb: 2
+                        } },
+                        React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+                            React.createElement(Cable, { color: "primary" }),
+                            React.createElement(Typography, { variant: "h6", component: "h2" }, "Remote MCP Servers")),
+                        React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddMCPDialog, size: "small" }, "Add Server")),
+                    React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 } }, "Configure remote Model Context Protocol (MCP) servers to extend the AI's capabilities with external tools and data sources."),
+                    config.mcpServers.length === 0 ? (React.createElement(Alert, { severity: "info" }, "No MCP servers configured yet. Click \"Add Server\" to connect to remote MCP services.")) : (React.createElement(List, null, config.mcpServers.map(server => (React.createElement(ListItem, { key: server.id, divider: true },
+                        React.createElement(ListItemText, { primary: React.createElement(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 1
+                                } },
+                                React.createElement(Typography, { variant: "body1" }, server.name),
+                                server.enabled &&
+                                    agentManager?.isMCPServerConnected(server.name) && (React.createElement(CheckCircleOutline, { sx: { color: 'success.main', fontSize: 16 } })),
+                                server.enabled &&
+                                    !agentManager?.isMCPServerConnected(server.name) && (React.createElement(ErrorOutline, { sx: { color: 'error.main', fontSize: 16 } })),
+                                React.createElement(Switch, { checked: server.enabled, onChange: e => model.updateMCPServer(server.id, {
+                                        enabled: e.target.checked
+                                    }), size: "small", color: "primary" })), secondary: React.createElement(Box, null,
+                                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, server.url),
+                                server.enabled &&
+                                    server.connected !== undefined && (React.createElement(Typography, { variant: "caption", color: "text.secondary" },
+                                    "Status:",
+                                    ' ',
+                                    server.connected
+                                        ? 'Connected'
+                                        : 'Connection failed'))) }),
+                        React.createElement(ListItemSecondaryAction, null,
+                            React.createElement(IconButton, { onClick: e => handleMCPMenuClick(e, server.id), size: "small" },
+                                React.createElement(MoreVert, null))))))))))),
+            React.createElement(ProviderConfigDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSave: editingProvider ? handleEditProvider : handleAddProvider, initialConfig: editingProvider, mode: editingProvider ? 'edit' : 'add', chatProviderRegistry: chatProviderRegistry, handleSecretField: handleSecretField }),
+            React.createElement(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: handleMenuClose },
+                React.createElement(MenuItem, { onClick: () => {
+                        const provider = config.providers.find(p => p.id === menuProviderId);
+                        if (provider) {
+                            openEditDialog(provider);
+                        }
+                    } },
+                    React.createElement(Edit, { sx: { mr: 1 } }),
+                    "Edit"),
+                React.createElement(MenuItem, { onClick: () => handleDeleteProvider(menuProviderId), sx: { color: 'error.main' } },
+                    React.createElement(Delete, { sx: { mr: 1 } }),
+                    "Delete")),
+            React.createElement(MCPServerDialog, { open: mcpDialogOpen, onClose: () => setMcpDialogOpen(false), onSave: editingMCPServer ? handleEditMCPServer : handleAddMCPServer, initialConfig: editingMCPServer, mode: editingMCPServer ? 'edit' : 'add' }),
+            React.createElement(Menu, { anchorEl: mcpMenuAnchor, open: Boolean(mcpMenuAnchor), onClose: handleMCPMenuClose },
+                React.createElement(MenuItem, { onClick: () => {
+                        const server = config.mcpServers.find(s => s.id === mcpMenuServerId);
+                        if (server) {
+                            openEditMCPDialog(server);
+                        }
+                    } },
+                    React.createElement(Edit, { sx: { mr: 1 } }),
+                    "Edit"),
+                React.createElement(MenuItem, { onClick: () => handleDeleteMCPServer(mcpMenuServerId), sx: { color: 'error.main' } },
+                    React.createElement(Delete, { sx: { mr: 1 } }),
+                    "Delete")))));
+};
+/**
+ * Dialog component for adding/editing MCP server configurations
+ * @param props - Component props for the MCP server dialog
+ * @returns A React component for MCP server configuration
+ */
+const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode }) => {
+    const [name, setName] = useState(initialConfig?.name || '');
+    const [url, setUrl] = useState(initialConfig?.url || '');
+    const [enabled, setEnabled] = useState(initialConfig?.enabled ?? true);
+    /**
+     * Effect to reset dialog state when opened with new config
+     */
+    useEffect(() => {
+        if (open) {
+            setName(initialConfig?.name || '');
+            setUrl(initialConfig?.url || '');
+            setEnabled(initialConfig?.enabled ?? true);
+        }
+    }, [open, initialConfig]);
+    /**
+     * Handle saving the MCP server configuration
+     */
+    const handleSave = () => {
+        if (!name.trim() || !url.trim()) {
+            return;
+        }
+        onSave({
+            name: name.trim(),
+            url: url.trim(),
+            enabled,
+            connected: false
+        });
+        onClose();
+    };
+    /**
+     * Check if a URL is valid
+     * @param url - The URL to validate
+     * @returns true if the URL is valid
+     */
+    const _isValidUrl = (url) => {
+        try {
+            new URL(url);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    };
+    const canSave = name.trim() && url.trim() && _isValidUrl(url.trim());
+    return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "sm", fullWidth: true },
+        React.createElement(DialogTitle, null, mode === 'add' ? 'Add MCP Server' : 'Edit MCP Server'),
+        React.createElement(DialogContent, null,
+            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, pt: 1 } },
+                React.createElement(TextField, { autoFocus: true, fullWidth: true, label: "Server Name", value: name, onChange: e => setName(e.target.value), placeholder: "My MCP Server", helperText: "A friendly name to identify this MCP server" }),
+                React.createElement(TextField, { fullWidth: true, label: "Server URL", value: url, onChange: e => setUrl(e.target.value), placeholder: "https://example.com/mcp", helperText: "The HTTP/HTTPS URL of the MCP server", error: Boolean(url.trim() && !_isValidUrl(url.trim())) }),
+                React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: enabled, onChange: e => setEnabled(e.target.checked), color: "primary" }), label: "Enable this server" }))),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { onClick: onClose }, "Cancel"),
+            React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !canSave }, mode === 'add' ? 'Add' : '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 = {}));