@jupyterlite/ai 0.8.0 → 0.9.0-a0

package/lib/widgets/chat-wrapper.d.ts

@@ -0,0 +1,144 @@
+import { CommandRegistry } from '@lumino/commands';
+import { Panel, Widget } from '@lumino/widgets';
+import { AIChatModel } from '../chat-model';
+import { AISettingsModel } from '../models/settings-model';
+/**
+ * A widget wrapper for the chat panel that provides toolbar functionality
+ * and approval button handling for AI tool calls.
+ */
+export declare class ChatWrapperWidget extends Panel {
+    /**
+     * Constructs a new ChatWrapperWidget.
+     *
+     * @param options - Configuration options for the widget
+     */
+    constructor(options: ChatWrapperWidget.IOptions);
+    /**
+     * Creates and configures the toolbar with token usage display and settings button.
+     *
+     * TODO: integrate with IToolbarRegistry to allow adding custom toolbar items
+     *
+     * @returns The configured toolbar widget
+     */
+    private _createToolbar;
+    /**
+     * Sets up event handlers for existing approval buttons in the chat panel.
+     */
+    private _setupApprovalHandlers;
+    /**
+     * Adds click event handler to an approval button.
+     *
+     * @param button - The button element to add handler to
+     */
+    private _addButtonHandler;
+    /**
+     * Handles click events for individual approval buttons.
+     *
+     * @param event - The click event
+     */
+    private _handleButtonClick;
+    /**
+     * Adds click event handler to a grouped approval button.
+     *
+     * @param button - The button element to add handler to
+     */
+    private _addGroupedButtonHandler;
+    /**
+     * Handles click events for grouped approval buttons.
+     *
+     * @param event - The click event
+     */
+    private _handleGroupedButtonClick;
+    /**
+     * Shows approval status by replacing buttons with status indicator.
+     *
+     * @param buttonsContainer - The container element holding the buttons
+     * @param isApprove - Whether the action was approval or rejection
+     */
+    private _showApprovalStatus;
+    /**
+     * Shows group approval status by replacing buttons with status indicator.
+     *
+     * @param buttonsContainer - The container element holding the buttons
+     * @param isApprove - Whether the action was approval or rejection
+     * @param toolCount - The number of tools that were approved/rejected
+     */
+    private _showGroupApprovalStatus;
+    /**
+     * Sets up mutation observer to watch for new messages and process approval buttons.
+     */
+    private _setupMessageProcessing;
+    /**
+     * Processes text nodes to replace approval button placeholders with actual button elements.
+     *
+     * @param element - The element to search for approval button placeholders
+     */
+    private _processApprovalButtons;
+    /**
+     * Creates an approval button element with appropriate styling and classes.
+     *
+     * @param text - The button text
+     * @param isApprove - Whether this is an approve or reject button
+     * @param additionalClasses - Additional CSS classes to add
+     * @returns The created button element
+     */
+    private _createApprovalButton;
+    /**
+     * Creates and inserts approval buttons for a single tool call.
+     *
+     * @param textNode - The text node to replace with buttons
+     * @param interruptionId - The interruption ID for the tool call
+     */
+    private _createSingleApprovalButtons;
+    /**
+     * Creates and inserts approval buttons for grouped tool calls.
+     *
+     * @param textNode - The text node to replace with buttons
+     * @param groupId - The group ID for the tool calls
+     * @param interruptionIds - Comma-separated interruption IDs
+     */
+    private _createGroupedApprovalButtons;
+    /**
+     * Finds the message ID by traversing up the DOM tree from a text node.
+     *
+     * @param textNode - The text node to start searching from
+     * @returns The message ID if found, null otherwise
+     */
+    private _findMessageId;
+    /**
+     * Fixes focus issue by replacing the global click handler with a more selective one.
+     * Only focuses the input when clicking empty areas, not on interactive elements.
+     */
+    private _fixCopyFocusIssue;
+    private _chatPanel;
+    private _chatModel;
+    private _settingsModel;
+    private _toolbar;
+    private _commands;
+}
+/**
+ * Namespace for ChatWrapperWidget statics.
+ */
+export declare namespace ChatWrapperWidget {
+    /**
+     * The options for the constructor of the chat wrapper widget.
+     */
+    interface IOptions {
+        /**
+         * The chat panel widget to wrap.
+         */
+        chatPanel: Widget;
+        /**
+         * The command registry for the chat wrapper.
+         */
+        commands: CommandRegistry;
+        /**
+         * The chat model for the chat wrapper.
+         */
+        chatModel: AIChatModel;
+        /**
+         * The settings model for the chat wrapper.
+         */
+        settingsModel: AISettingsModel;
+    }
+}

package/lib/widgets/chat-wrapper.js

@@ -0,0 +1,390 @@
+import { settingsIcon, Toolbar, ToolbarButton } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import { TokenUsageWidget } from '../components/token-usage-display';
+/**
+ * CSS class for the chat toolbar
+ */
+const CHAT_TOOLBAR_CLASS = 'jp-AIChatToolbar';
+/**
+ * CSS class for the chat panel
+ */
+const CHAT_PANEL_CLASS = 'jp-AIChatPanel';
+/**
+ * A widget wrapper for the chat panel that provides toolbar functionality
+ * and approval button handling for AI tool calls.
+ */
+export class ChatWrapperWidget extends Panel {
+    /**
+     * Constructs a new ChatWrapperWidget.
+     *
+     * @param options - Configuration options for the widget
+     */
+    constructor(options) {
+        super();
+        this._chatPanel = options.chatPanel;
+        this._chatModel = options.chatModel;
+        this._settingsModel = options.settingsModel;
+        this._commands = options.commands;
+        this._toolbar = this._createToolbar();
+        this.id = '@jupyterlite/ai:chat-wrapper';
+        this.title.caption = 'Chat with AI assistant';
+        this.title.icon = this._chatPanel.title.icon;
+        this.addClass('jp-AIChatWrapper');
+        this._toolbar.addClass(CHAT_TOOLBAR_CLASS);
+        this._chatPanel.addClass(CHAT_PANEL_CLASS);
+        // Add widgets to the panel
+        this.addWidget(this._toolbar);
+        this.addWidget(this._chatPanel);
+        // Set up approval button event handling
+        this._setupApprovalHandlers();
+        // Set up message processing for approval buttons
+        this._setupMessageProcessing();
+        // Fix the focus issue: override the global click handler
+        // TODO: remove after https://github.com/jupyterlab/jupyter-chat/issues/267
+        this._fixCopyFocusIssue();
+    }
+    /**
+     * Creates and configures the toolbar with token usage display and settings button.
+     *
+     * TODO: integrate with IToolbarRegistry to allow adding custom toolbar items
+     *
+     * @returns The configured toolbar widget
+     */
+    _createToolbar() {
+        const toolbar = new Toolbar();
+        const tokenUsageWidget = new TokenUsageWidget({
+            tokenUsageChanged: this._chatModel.tokenUsageChanged,
+            settingsModel: this._settingsModel
+        });
+        toolbar.addItem('token-usage', tokenUsageWidget);
+        toolbar.addItem('spacer', Toolbar.createSpacerItem());
+        toolbar.addItem('settings', new ToolbarButton({
+            icon: settingsIcon,
+            onClick: () => {
+                this._commands.execute('@jupyterlite/ai:open-settings');
+            },
+            tooltip: 'Open AI Settings'
+        }));
+        return toolbar;
+    }
+    /**
+     * Sets up event handlers for existing approval buttons in the chat panel.
+     */
+    _setupApprovalHandlers() {
+        // This method will be called to add handlers to existing buttons
+        // New buttons get handlers added in _processApprovalButtons
+        const existingButtons = this._chatPanel.node.querySelectorAll('.jp-ai-approval-btn');
+        existingButtons.forEach(button => {
+            this._addButtonHandler(button);
+        });
+    }
+    /**
+     * Adds click event handler to an approval button.
+     *
+     * @param button - The button element to add handler to
+     */
+    _addButtonHandler(button) {
+        // Remove any existing listeners to avoid duplicates
+        button.removeEventListener('click', this._handleButtonClick);
+        button.addEventListener('click', this._handleButtonClick);
+    }
+    /**
+     * Handles click events for individual approval buttons.
+     *
+     * @param event - The click event
+     */
+    _handleButtonClick = async (event) => {
+        const target = event.target;
+        event.preventDefault();
+        event.stopPropagation();
+        const buttonsContainer = target.closest('.jp-ai-tool-approval-buttons');
+        if (!buttonsContainer) {
+            return;
+        }
+        const interruptionId = buttonsContainer.getAttribute('data-interruption-id');
+        if (!interruptionId) {
+            return;
+        }
+        // Get message ID for updating the tool call box
+        const messageId = buttonsContainer.getAttribute('data-message-id');
+        // Hide buttons immediately and show status
+        const isApprove = target.classList.contains('jp-ai-approval-approve');
+        this._showApprovalStatus(buttonsContainer, isApprove);
+        if (isApprove) {
+            // Execute approval with message ID for updating the tool call box
+            await this._chatModel.approveToolCall(interruptionId, messageId || undefined);
+        }
+        else if (target.classList.contains('jp-ai-approval-reject')) {
+            // Execute rejection with message ID for updating the tool call box
+            await this._chatModel.rejectToolCall(interruptionId, messageId || undefined);
+        }
+    };
+    /**
+     * Adds click event handler to a grouped approval button.
+     *
+     * @param button - The button element to add handler to
+     */
+    _addGroupedButtonHandler(button) {
+        // Remove any existing listeners to avoid duplicates
+        button.removeEventListener('click', this._handleGroupedButtonClick);
+        button.addEventListener('click', this._handleGroupedButtonClick);
+    }
+    /**
+     * Handles click events for grouped approval buttons.
+     *
+     * @param event - The click event
+     */
+    _handleGroupedButtonClick = async (event) => {
+        const target = event.target;
+        event.preventDefault();
+        event.stopPropagation();
+        const buttonsContainer = target.closest('.jp-ai-group-approval-buttons');
+        if (!buttonsContainer) {
+            return;
+        }
+        const groupId = buttonsContainer.getAttribute('data-group-id');
+        const interruptionIdsStr = buttonsContainer.getAttribute('data-interruption-ids');
+        if (!groupId || !interruptionIdsStr) {
+            return;
+        }
+        const interruptionIds = interruptionIdsStr.split(',');
+        const messageId = buttonsContainer.getAttribute('data-message-id');
+        // Hide buttons immediately and show status
+        const isApprove = target.classList.contains('jp-ai-group-approve-all');
+        this._showGroupApprovalStatus(buttonsContainer, isApprove);
+        if (isApprove) {
+            // Execute grouped approval
+            await this._chatModel.approveGroupedToolCalls(groupId, interruptionIds, messageId || undefined);
+        }
+        else if (target.classList.contains('jp-ai-group-reject-all')) {
+            // Execute grouped rejection
+            await this._chatModel.rejectGroupedToolCalls(groupId, interruptionIds, messageId || undefined);
+        }
+    };
+    /**
+     * Shows approval status by replacing buttons with status indicator.
+     *
+     * @param buttonsContainer - The container element holding the buttons
+     * @param isApprove - Whether the action was approval or rejection
+     */
+    _showApprovalStatus(buttonsContainer, isApprove) {
+        // Clear the container and add status indicator
+        buttonsContainer.innerHTML = '';
+        const statusDiv = document.createElement('div');
+        statusDiv.className = `jp-ai-approval-status ${isApprove ? 'jp-ai-approval-status-approved' : 'jp-ai-approval-status-rejected'}`;
+        const icon = document.createElement('span');
+        icon.className = 'jp-ai-approval-icon';
+        icon.textContent = isApprove ? '✅' : '❌';
+        const text = document.createElement('span');
+        text.textContent = isApprove ? 'Tools approved' : 'Tools rejected';
+        statusDiv.appendChild(icon);
+        statusDiv.appendChild(text);
+        buttonsContainer.appendChild(statusDiv);
+    }
+    /**
+     * Shows group approval status by replacing buttons with status indicator.
+     *
+     * @param buttonsContainer - The container element holding the buttons
+     * @param isApprove - Whether the action was approval or rejection
+     * @param toolCount - The number of tools that were approved/rejected
+     */
+    _showGroupApprovalStatus(buttonsContainer, isApprove) {
+        // Clear the container and add status indicator
+        buttonsContainer.innerHTML = '';
+        const statusDiv = document.createElement('div');
+        statusDiv.className = `jp-ai-group-approval-status ${isApprove ? 'jp-ai-group-approval-status-approved' : 'jp-ai-group-approval-status-rejected'}`;
+        const icon = document.createElement('span');
+        icon.className = 'jp-ai-approval-icon';
+        icon.textContent = isApprove ? '✅' : '❌';
+        const text = document.createElement('span');
+        text.textContent = isApprove ? 'Tools approved' : 'Tools rejected';
+        statusDiv.appendChild(icon);
+        statusDiv.appendChild(text);
+        buttonsContainer.appendChild(statusDiv);
+    }
+    /**
+     * Sets up mutation observer to watch for new messages and process approval buttons.
+     */
+    _setupMessageProcessing() {
+        // Use a MutationObserver to watch for new messages and process approval buttons
+        const observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                mutation.addedNodes.forEach(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const element = node;
+                        this._processApprovalButtons(element);
+                    }
+                });
+            });
+        });
+        observer.observe(this._chatPanel.node, {
+            childList: true,
+            subtree: true
+        });
+    }
+    /**
+     * Processes text nodes to replace approval button placeholders with actual button elements.
+     *
+     * @param element - The element to search for approval button placeholders
+     */
+    _processApprovalButtons(element) {
+        // Find all text nodes that contain approval buttons and replace them with actual buttons
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+        const textNodes = [];
+        let node;
+        while ((node = walker.nextNode())) {
+            textNodes.push(node);
+        }
+        textNodes.forEach(textNode => {
+            const text = textNode.textContent || '';
+            // Handle single tool approval buttons [APPROVAL_BUTTONS:id]
+            const singleMatch = text.match(/\[APPROVAL_BUTTONS:([^\]]+)\]/);
+            if (singleMatch) {
+                this._createSingleApprovalButtons(textNode, singleMatch[1]);
+                return;
+            }
+            // Handle grouped tool approval buttons [GROUP_APPROVAL_BUTTONS:groupId:id1,id2,id3]
+            const groupMatch = text.match(/\[GROUP_APPROVAL_BUTTONS:([^:]+):([^\]]+)\]/);
+            if (groupMatch) {
+                this._createGroupedApprovalButtons(textNode, groupMatch[1], groupMatch[2]);
+                return;
+            }
+        });
+    }
+    /**
+     * Creates an approval button element with appropriate styling and classes.
+     *
+     * @param text - The button text
+     * @param isApprove - Whether this is an approve or reject button
+     * @param additionalClasses - Additional CSS classes to add
+     * @returns The created button element
+     */
+    _createApprovalButton(text, isApprove, additionalClasses = '') {
+        const button = document.createElement('button');
+        const baseClass = isApprove
+            ? 'jp-ai-approval-approve'
+            : 'jp-ai-approval-reject';
+        button.className = `jp-ai-approval-btn ${baseClass}${additionalClasses ? ' ' + additionalClasses : ''}`;
+        button.textContent = text;
+        return button;
+    }
+    /**
+     * Creates and inserts approval buttons for a single tool call.
+     *
+     * @param textNode - The text node to replace with buttons
+     * @param interruptionId - The interruption ID for the tool call
+     */
+    _createSingleApprovalButtons(textNode, interruptionId) {
+        // Create approval buttons for single tool
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'jp-ai-tool-approval-buttons';
+        buttonContainer.setAttribute('data-interruption-id', interruptionId);
+        // Try to find the message ID from the closest message container
+        const messageId = this._findMessageId(textNode);
+        if (messageId) {
+            buttonContainer.setAttribute('data-message-id', messageId);
+        }
+        const approveBtn = this._createApprovalButton('Approve', true);
+        const rejectBtn = this._createApprovalButton('Reject', false);
+        // Add click handlers directly to the buttons
+        this._addButtonHandler(approveBtn);
+        this._addButtonHandler(rejectBtn);
+        buttonContainer.appendChild(approveBtn);
+        buttonContainer.appendChild(rejectBtn);
+        // Replace the text node with the button container
+        const parent = textNode.parentNode;
+        if (parent) {
+            parent.replaceChild(buttonContainer, textNode);
+        }
+    }
+    /**
+     * Creates and inserts approval buttons for grouped tool calls.
+     *
+     * @param textNode - The text node to replace with buttons
+     * @param groupId - The group ID for the tool calls
+     * @param interruptionIds - Comma-separated interruption IDs
+     */
+    _createGroupedApprovalButtons(textNode, groupId, interruptionIds) {
+        // Create approval buttons for grouped tools
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'jp-ai-group-approval-buttons';
+        buttonContainer.setAttribute('data-group-id', groupId);
+        buttonContainer.setAttribute('data-interruption-ids', interruptionIds);
+        // Try to find the message ID from the closest message container
+        const messageId = this._findMessageId(textNode);
+        if (messageId) {
+            buttonContainer.setAttribute('data-message-id', messageId);
+        }
+        const approveBtn = this._createApprovalButton('Approve', true, 'jp-ai-group-approve-all');
+        const rejectBtn = this._createApprovalButton('Reject', false, 'jp-ai-group-reject-all');
+        // Add click handlers for grouped approvals
+        this._addGroupedButtonHandler(approveBtn);
+        this._addGroupedButtonHandler(rejectBtn);
+        buttonContainer.appendChild(approveBtn);
+        buttonContainer.appendChild(rejectBtn);
+        // Replace the text node with the button container
+        const parent = textNode.parentNode;
+        if (parent) {
+            parent.replaceChild(buttonContainer, textNode);
+        }
+    }
+    /**
+     * Finds the message ID by traversing up the DOM tree from a text node.
+     *
+     * @param textNode - The text node to start searching from
+     * @returns The message ID if found, null otherwise
+     */
+    _findMessageId(textNode) {
+        let messageElement = textNode.parentNode;
+        while (messageElement && messageElement !== document.body) {
+            if (messageElement.nodeType === Node.ELEMENT_NODE) {
+                const element = messageElement;
+                // Look for common message container attributes or classes
+                const messageId = element.getAttribute('data-message-id') ||
+                    element.getAttribute('id') ||
+                    element
+                        .querySelector('[data-message-id]')
+                        ?.getAttribute('data-message-id');
+                if (messageId) {
+                    return messageId;
+                }
+            }
+            messageElement = messageElement.parentNode;
+        }
+        return null;
+    }
+    /**
+     * Fixes focus issue by replacing the global click handler with a more selective one.
+     * Only focuses the input when clicking empty areas, not on interactive elements.
+     */
+    _fixCopyFocusIssue() {
+        // Remove the global click handler that causes focus on any click
+        // The original handler is: this.node.onclick = () => this.model.input.focus();
+        if (this._chatPanel.node.onclick) {
+            this._chatPanel.node.onclick = null;
+        }
+        // Add a more selective click handler that only focuses when clicking empty areas
+        this._chatPanel.node.addEventListener('click', (event) => {
+            const target = event.target;
+            // Don't focus if clicking on selectable text elements
+            const selection = window.getSelection();
+            if (target.closest('pre') ||
+                target.closest('code') ||
+                target.closest('.jp-RenderedMarkdown') ||
+                target.closest('.jp-ai-tool-call') ||
+                target.closest('button') ||
+                target.closest('.jp-chat-input-container') ||
+                (selection && selection.toString().length > 0)) {
+                return;
+            }
+            // Only focus input when clicking empty chat areas
+            this._chatModel.input.focus();
+        });
+    }
+    // Private fields
+    _chatPanel;
+    _chatModel;
+    _settingsModel;
+    _toolbar;
+    _commands;
+}

package/lib/widgets/provider-config-dialog.d.ts

@@ -0,0 +1,13 @@
+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 declare const ProviderConfigDialog: React.FC<IProviderConfigDialogProps>;
+export {};

package/lib/widgets/provider-config-dialog.js

@@ -0,0 +1,104 @@
+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';
+export const ProviderConfigDialog = ({ 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 = {
+            name: name.trim(),
+            provider: provider,
+            model,
+            ...(selectedProvider?.requiresApiKey && apiKey && { apiKey }),
+            ...(baseURL && { baseURL })
+        };
+        onSave(config);
+        onClose();
+    };
+    const isValid = name.trim() &&
+        provider &&
+        model &&
+        (!selectedProvider?.requiresApiKey || apiKey);
+    return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true },
+        React.createElement(DialogTitle, null, mode === 'add' ? 'Add New Provider' : 'Edit Provider'),
+        React.createElement(DialogContent, null,
+            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, pt: 1 } },
+                React.createElement(TextField, { fullWidth: true, 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: true }),
+                React.createElement(FormControl, { fullWidth: true, required: true },
+                    React.createElement(InputLabel, null, "Provider Type"),
+                    React.createElement(Select, { value: provider, label: "Provider Type", onChange: e => setProvider(e.target.value) }, providerOptions.map(option => (React.createElement(MenuItem, { key: option.value, value: option.value },
+                        React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+                            option.label,
+                            option.requiresApiKey && (React.createElement(Chip, { size: "small", label: "API Key", color: "default", variant: "outlined" })))))))),
+                selectedProvider?.allowCustomModel ? (React.createElement(TextField, { fullWidth: true, label: "Model", value: model, onChange: e => setModel(e.target.value), placeholder: "Enter model name", helperText: "Enter any compatible model name", required: true })) : (React.createElement(FormControl, { fullWidth: true, required: true },
+                    React.createElement(InputLabel, null, "Model"),
+                    React.createElement(Select, { value: model, label: "Model", onChange: e => setModel(e.target.value) }, selectedProvider?.models.map(modelOption => (React.createElement(MenuItem, { key: modelOption, value: modelOption },
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { variant: "body1" }, modelOption),
+                            React.createElement(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')))))))),
+                selectedProvider?.requiresApiKey && (React.createElement(TextField, { fullWidth: true, 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: (React.createElement(InputAdornment, { position: "end" },
+                            React.createElement(IconButton, { onClick: () => setShowApiKey(!showApiKey), edge: "end" }, showApiKey ? React.createElement(VisibilityOff, null) : React.createElement(Visibility, null))))
+                    } })),
+                (provider === 'ollama' || selectedProvider?.allowCustomModel) && (React.createElement(TextField, { fullWidth: true, 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 && (React.createElement(Alert, { severity: "info" }, "This provider does not require an API key.")))),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { onClick: onClose }, "Cancel"),
+            React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !isValid }, mode === 'add' ? 'Add Provider' : 'Save Changes'))));
+};