@notebook-intelligence/notebook-intelligence 2.4.2 → 2.6.0

package/lib/chat-sidebar.js

@@ -4,20 +4,16 @@ import { ReactWidget } from '@jupyterlab/apputils';
 import { UUID } from '@lumino/coreutils';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 import { NBIAPI, GitHubCopilotLoginStatus } from './api';
-import { BackendMessageType, BuiltinToolsetType, ContextType, GITHUB_COPILOT_PROVIDER_ID, RequestDataType, ResponseStreamDataType, TelemetryEventType } from './tokens';
+import { BackendMessageType, BuiltinToolsetType, ContextType, RequestDataType, ResponseStreamDataType, TelemetryEventType } from './tokens';
 import { MarkdownRenderer as OriginalMarkdownRenderer } from './markdown-renderer';
 const MarkdownRenderer = memo(OriginalMarkdownRenderer);
 import copySvgstr from '../style/icons/copy.svg';
 import copilotSvgstr from '../style/icons/copilot.svg';
 import copilotWarningSvgstr from '../style/icons/copilot-warning.svg';
-import { VscSend, VscStopCircle, VscEye, VscEyeClosed, VscTriangleRight, VscTriangleDown, VscWarning, VscSettingsGear, VscPassFilled, VscTools, VscTrash } from 'react-icons/vsc';
-import { MdOutlineCheckBoxOutlineBlank, MdCheckBox } from 'react-icons/md';
+import { VscSend, VscStopCircle, VscEye, VscEyeClosed, VscTriangleRight, VscTriangleDown, VscSettingsGear, VscPassFilled, VscTools, VscTrash } from 'react-icons/vsc';
 import { extractLLMGeneratedCode, isDarkTheme } from './utils';
-import * as path from 'path';
-const OPENAI_COMPATIBLE_CHAT_MODEL_ID = 'openai-compatible-chat-model';
-const LITELLM_COMPATIBLE_CHAT_MODEL_ID = 'litellm-compatible-chat-model';
-const OPENAI_COMPATIBLE_INLINE_COMPLETION_MODEL_ID = 'openai-compatible-inline-completion-model';
-const LITELLM_COMPATIBLE_INLINE_COMPLETION_MODEL_ID = 'litellm-compatible-inline-completion-model';
+import { CheckBoxItem } from './components/checkbox';
+import { mcpServerSettingsToEnabledState } from './components/mcp-util';
 export var RunChatCompletionType;
 (function (RunChatCompletionType) {
     RunChatCompletionType[RunChatCompletionType["Chat"] = 0] = "Chat";
@@ -128,16 +124,6 @@ export class GitHubCopilotLoginDialogBody extends ReactWidget {
         return (React.createElement(GitHubCopilotLoginDialogBodyComponent, { onLoggedIn: () => this._onLoggedIn() }));
     }
 }
-export class ConfigurationDialogBody extends ReactWidget {
-    constructor(options) {
-        super();
-        this._onEditMCPConfigClicked = options.onEditMCPConfigClicked;
-        this._onSave = options.onSave;
-    }
-    render() {
-        return (React.createElement(ConfigurationDialogBodyComponent, { onEditMCPConfigClicked: this._onEditMCPConfigClicked, onSave: this._onSave }));
-    }
-}
 const answeredForms = new Map();
 function ChatResponseHTMLFrame(props) {
     const iframSrc = useMemo(() => URL.createObjectURL(new Blob([props.source], { type: 'text/html' })), []);
@@ -329,14 +315,6 @@ async function submitCompletionRequest(request, responseEmitter) {
             return NBIAPI.generateCode(request.chatId, request.content, request.prefix || '', request.suffix || '', request.existingCode || '', request.language || 'python', request.filename || 'Untitled.ipynb', responseEmitter);
     }
 }
-function CheckBoxItem(props) {
-    const indent = props.indent || 0;
-    return (React.createElement("div", { className: `checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`, title: props.title, onClick: event => props.onClick(event) },
-        React.createElement("div", { className: "checkbox-item-toggle" },
-            props.checked ? (React.createElement(MdCheckBox, { className: "checkbox-icon" })) : (React.createElement(MdOutlineCheckBoxOutlineBlank, { className: "checkbox-icon" })),
-            props.label),
-        props.title && (React.createElement("div", { className: "checkbox-item-description" }, props.title))));
-}
 function SidebarComponent(props) {
     const [chatMessages, setChatMessages] = useState([]);
     const [prompt, setPrompt] = useState('');
@@ -364,7 +342,8 @@ function SidebarComponent(props) {
     const [toolSelectionTitle, setToolSelectionTitle] = useState('Tool selection');
     const [selectedToolCount, setSelectedToolCount] = useState(0);
     const [notebookExecuteToolSelected, setNotebookExecuteToolSelected] = useState(false);
-    const [toolConfig, setToolConfig] = useState({
+    const [renderCount, setRenderCount] = useState(1);
+    const toolConfigRef = useRef({
         builtinToolsets: [
             { id: BuiltinToolsetType.NotebookEdit, name: 'Notebook edit' },
             { id: BuiltinToolsetType.NotebookExecute, name: 'Notebook execute' }
@@ -372,6 +351,8 @@ function SidebarComponent(props) {
         mcpServers: [],
         extensions: []
     });
+    const mcpServerSettingsRef = useRef(NBIAPI.config.mcpServerSettings);
+    const [mcpServerEnabledState, setMCPServerEnabledState] = useState(new Map(mcpServerSettingsToEnabledState(toolConfigRef.current.mcpServers, mcpServerSettingsRef.current)));
     const [showModeTools, setShowModeTools] = useState(false);
     const toolSelectionsInitial = {
         builtinToolsets: [BuiltinToolsetType.NotebookEdit],
@@ -383,23 +364,30 @@ function SidebarComponent(props) {
         mcpServers: {},
         extensions: {}
     };
-    const [toolSelections, setToolSelections] = useState(toolSelectionsInitial);
+    const [toolSelections, setToolSelections] = useState(structuredClone(toolSelectionsInitial));
     const [hasExtensionTools, setHasExtensionTools] = useState(false);
     const [lastScrollTime, setLastScrollTime] = useState(0);
     const [scrollPending, setScrollPending] = useState(false);
-    NBIAPI.configChanged.connect(() => {
-        setToolConfig(NBIAPI.config.toolConfig);
-    });
+    useEffect(() => {
+        NBIAPI.configChanged.connect(() => {
+            toolConfigRef.current = NBIAPI.config.toolConfig;
+            mcpServerSettingsRef.current = NBIAPI.config.mcpServerSettings;
+            const newMcpServerEnabledState = mcpServerSettingsToEnabledState(toolConfigRef.current.mcpServers, mcpServerSettingsRef.current);
+            setMCPServerEnabledState(newMcpServerEnabledState);
+            setToolSelections(structuredClone(toolSelectionsInitial));
+            setRenderCount(renderCount => renderCount + 1);
+        });
+    }, []);
     useEffect(() => {
         let hasTools = false;
-        for (const extension of toolConfig.extensions) {
+        for (const extension of toolConfigRef.current.extensions) {
             if (extension.toolsets.length > 0) {
                 hasTools = true;
                 break;
             }
         }
         setHasExtensionTools(hasTools);
-    }, [toolConfig]);
+    }, [toolConfigRef.current]);
     useEffect(() => {
         const builtinToolSelCount = toolSelections.builtinToolsets.length;
         let mcpServerToolSelCount = 0;
@@ -462,7 +450,7 @@ function SidebarComponent(props) {
         if (!(id in toolSelections.mcpServers)) {
             return false;
         }
-        const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
+        const mcpServer = toolConfigRef.current.mcpServers.find(server => server.id === id);
         const selectedServerTools = toolSelections.mcpServers[id];
         for (const tool of mcpServer.tools) {
             if (!selectedServerTools.includes(tool.name)) {
@@ -478,9 +466,11 @@ function SidebarComponent(props) {
             setToolSelections(newConfig);
         }
         else {
-            const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
+            const mcpServer = toolConfigRef.current.mcpServers.find(server => server.id === id);
             const newConfig = { ...toolSelections };
-            newConfig.mcpServers[id] = structuredClone(mcpServer.tools.map((tool) => tool.name));
+            newConfig.mcpServers[id] = structuredClone(mcpServer.tools
+                .filter((tool) => mcpServerEnabledState.get(mcpServer.id).has(tool.name))
+                .map((tool) => tool.name));
             setToolSelections(newConfig);
         }
     };
@@ -513,7 +503,7 @@ function SidebarComponent(props) {
         if (!(extensionId in toolSelections.extensions)) {
             return false;
         }
-        const extension = toolConfig.extensions.find(extension => extension.id === extensionId);
+        const extension = toolConfigRef.current.extensions.find(extension => extension.id === extensionId);
         for (const toolset of extension.toolsets) {
             if (!getExtensionToolsetState(extensionId, toolset.id)) {
                 return false;
@@ -528,7 +518,7 @@ function SidebarComponent(props) {
         if (!(toolsetId in toolSelections.extensions[extensionId])) {
             return false;
         }
-        const extension = toolConfig.extensions.find(ext => ext.id === extensionId);
+        const extension = toolConfigRef.current.extensions.find(ext => ext.id === extensionId);
         const extensionToolset = extension.toolsets.find((toolset) => toolset.id === toolsetId);
         const selectedToolsetTools = toolSelections.extensions[extensionId][toolsetId];
         for (const tool of extensionToolset.tools) {
@@ -552,7 +542,7 @@ function SidebarComponent(props) {
         }
         else {
             const newConfig = { ...toolSelections };
-            const extension = toolConfig.extensions.find(ext => ext.id === extensionId);
+            const extension = toolConfigRef.current.extensions.find(ext => ext.id === extensionId);
             if (extensionId in newConfig.extensions) {
                 delete newConfig.extensions[extensionId];
             }
@@ -581,7 +571,7 @@ function SidebarComponent(props) {
             setToolSelections(newConfig);
         }
         else {
-            const extension = toolConfig.extensions.find(ext => ext.id === extensionId);
+            const extension = toolConfigRef.current.extensions.find(ext => ext.id === extensionId);
             const extensionToolset = extension.toolsets.find((toolset) => toolset.id === toolsetId);
             const newConfig = { ...toolSelections };
             if (!(extensionId in newConfig.extensions)) {
@@ -623,29 +613,36 @@ function SidebarComponent(props) {
         setToolSelections(newConfig);
     };
     useEffect(() => {
+        var _a;
         const prefixes = [];
-        if (chatMode !== 'ask') {
-            prefixes.push('/clear');
-            setOriginalPrefixes(prefixes);
-            setPrefixSuggestions(prefixes);
-            return;
-        }
-        const chatParticipants = NBIAPI.config.chatParticipants;
-        for (const participant of chatParticipants) {
-            const id = participant.id;
-            const commands = participant.commands;
-            const participantPrefix = id === 'default' ? '' : `@${id}`;
-            if (participantPrefix !== '') {
-                prefixes.push(participantPrefix);
+        prefixes.push('/clear');
+        if (chatMode === 'ask') {
+            const chatParticipants = NBIAPI.config.chatParticipants;
+            for (const participant of chatParticipants) {
+                const id = participant.id;
+                const commands = participant.commands;
+                const participantPrefix = id === 'default' ? '' : `@${id}`;
+                if (participantPrefix !== '') {
+                    prefixes.push(participantPrefix);
+                }
+                const commandPrefix = participantPrefix === '' ? '' : `${participantPrefix} `;
+                for (const command of commands) {
+                    prefixes.push(`${commandPrefix}/${command}`);
+                }
             }
-            const commandPrefix = participantPrefix === '' ? '' : `${participantPrefix} `;
-            for (const command of commands) {
-                prefixes.push(`${commandPrefix}/${command}`);
+        }
+        const mcpServers = NBIAPI.config.toolConfig.mcpServers;
+        const mcpServerSettings = NBIAPI.config.mcpServerSettings;
+        for (const mcpServer of mcpServers) {
+            if (((_a = mcpServerSettings[mcpServer.id]) === null || _a === void 0 ? void 0 : _a.disabled) !== true) {
+                for (const prompt of mcpServer.prompts) {
+                    prefixes.push(`/mcp:${mcpServer.id}:${prompt.name}`);
+                }
             }
         }
         setOriginalPrefixes(prefixes);
         setPrefixSuggestions(prefixes);
-    }, [chatMode]);
+    }, [chatMode, renderCount]);
     useEffect(() => {
         const fetchData = () => {
             setGHLoginStatus(NBIAPI.getLoginStatus());
@@ -674,13 +671,37 @@ function SidebarComponent(props) {
             setShowPopover(false);
         }
     };
-    const applyPrefixSuggestion = (prefix) => {
+    const applyPrefixSuggestion = async (prefix) => {
         var _a;
+        let mcpArguments = '';
+        if (prefix.startsWith('/mcp:')) {
+            mcpArguments = ':';
+            const serverId = prefix.split(':')[1];
+            const promptName = prefix.split(':')[2];
+            const promptConfig = NBIAPI.config.getMCPServerPrompt(serverId, promptName);
+            if (promptConfig &&
+                promptConfig.arguments &&
+                promptConfig.arguments.length > 0) {
+                const result = await props
+                    .getApp()
+                    .commands.execute('notebook-intelligence:show-form-input-dialog', {
+                    title: 'Input Parameters',
+                    fields: promptConfig.arguments
+                });
+                const argumentValues = [];
+                for (const argument of promptConfig.arguments) {
+                    if (result[argument.name] !== undefined) {
+                        argumentValues.push(`${argument.name}=${result[argument.name]}`);
+                    }
+                }
+                mcpArguments = `(${argumentValues.join(', ')}):`;
+            }
+        }
         if (prefix.includes(prompt)) {
-            setPrompt(`${prefix} `);
+            setPrompt(`${prefix}${mcpArguments} `);
         }
         else {
-            setPrompt(`${prefix} ${prompt} `);
+            setPrompt(`${prefix} ${prompt}${mcpArguments} `);
         }
         setShowPopover(false);
         (_a = promptInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -707,7 +728,13 @@ function SidebarComponent(props) {
     };
     const handleChatToolsButtonClick = async () => {
         if (!showModeTools) {
-            NBIAPI.fetchCapabilities();
+            NBIAPI.fetchCapabilities().then(() => {
+                toolConfigRef.current = NBIAPI.config.toolConfig;
+                mcpServerSettingsRef.current = NBIAPI.config.mcpServerSettings;
+                const newMcpServerEnabledState = mcpServerSettingsToEnabledState(toolConfigRef.current.mcpServers, mcpServerSettingsRef.current);
+                setMCPServerEnabledState(newMcpServerEnabledState);
+                setRenderCount(renderCount => renderCount + 1);
+            });
         }
         setShowModeTools(!showModeTools);
     };
@@ -725,7 +752,6 @@ function SidebarComponent(props) {
                 }
             }
         }
-        const promptPrefix = promptPrefixParts.length > 0 ? promptPrefixParts.join(' ') + ' ' : '';
         lastMessageId.current = UUID.uuid4();
         lastRequestTime.current = new Date();
         const newList = [
@@ -784,7 +810,7 @@ function SidebarComponent(props) {
             type: RunChatCompletionType.Chat,
             content: extractedPrompt,
             language: activeDocInfo.language,
-            filename: activeDocInfo.filename,
+            filename: activeDocInfo.filePath,
             additionalContext,
             chatMode,
             toolSelections: toolSelections
@@ -867,7 +893,7 @@ function SidebarComponent(props) {
                 ]);
             }
         });
-        const newPrompt = prompt.startsWith('/settings') ? '' : promptPrefix;
+        const newPrompt = '';
         setPrompt(newPrompt);
         filterPrefixSuggestions(newPrompt);
         telemetryEmitter.emitTelemetryEvent({
@@ -1134,25 +1160,17 @@ function SidebarComponent(props) {
         }
         return `${activeDocumentInfo.filename}${cellAndLineIndicator}`;
     };
-    const nbiConfig = NBIAPI.config;
-    const getGHLoginRequired = () => {
-        return (nbiConfig.usingGitHubCopilotModel &&
-            NBIAPI.getLoginStatus() === GitHubCopilotLoginStatus.NotLoggedIn);
-    };
-    const getChatEnabled = () => {
-        return nbiConfig.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
-            ? !getGHLoginRequired()
-            : nbiConfig.llmProviders.find(provider => provider.id === nbiConfig.chatModel.provider);
-    };
-    const [ghLoginRequired, setGHLoginRequired] = useState(getGHLoginRequired());
-    const [chatEnabled, setChatEnabled] = useState(getChatEnabled());
-    NBIAPI.configChanged.connect(() => {
-        setGHLoginRequired(getGHLoginRequired());
-        setChatEnabled(getChatEnabled());
-    });
+    const [ghLoginRequired, setGHLoginRequired] = useState(NBIAPI.getGHLoginRequired());
+    const [chatEnabled, setChatEnabled] = useState(NBIAPI.getChatEnabled());
     useEffect(() => {
-        setGHLoginRequired(getGHLoginRequired());
-        setChatEnabled(getChatEnabled());
+        NBIAPI.configChanged.connect(() => {
+            setGHLoginRequired(NBIAPI.getGHLoginRequired());
+            setChatEnabled(NBIAPI.getChatEnabled());
+        });
+    }, []);
+    useEffect(() => {
+        setGHLoginRequired(NBIAPI.getGHLoginRequired());
+        setChatEnabled(NBIAPI.getChatEnabled());
     }, [ghLoginStatus]);
     return (React.createElement("div", { className: "sidebar" },
         React.createElement("div", { className: "sidebar-header" },
@@ -1200,7 +1218,7 @@ function SidebarComponent(props) {
                                     setToolSelections(toolSelectionsEmpty);
                                 }
                                 else if (event.target.value === 'agent') {
-                                    setToolSelections(toolSelectionsInitial);
+                                    setToolSelections(structuredClone(toolSelectionsInitial));
                                 }
                                 setShowModeTools(false);
                                 setChatMode(event.target.value);
@@ -1239,15 +1257,24 @@ function SidebarComponent(props) {
                         React.createElement("div", null, "Done"))),
                 React.createElement("div", { className: "mode-tools-popover-tool-list" },
                     React.createElement("div", { className: "mode-tools-group-header" }, "Built-in"),
-                    React.createElement("div", { className: "mode-tools-group mode-tools-group-built-in" }, toolConfig.builtinToolsets.map((toolset) => (React.createElement(CheckBoxItem, { key: toolset.id, label: toolset.name, checked: getBuiltinToolsetState(toolset.id), header: true, onClick: () => {
+                    React.createElement("div", { className: "mode-tools-group mode-tools-group-built-in" }, toolConfigRef.current.builtinToolsets.map((toolset) => (React.createElement(CheckBoxItem, { key: toolset.id, label: toolset.name, checked: getBuiltinToolsetState(toolset.id), header: true, onClick: () => {
                             setBuiltinToolsetState(toolset.id, !getBuiltinToolsetState(toolset.id));
                         } })))),
-                    toolConfig.mcpServers.length > 0 && (React.createElement("div", { className: "mode-tools-group-header" }, "MCP Servers")),
-                    toolConfig.mcpServers.map((mcpServer, index) => (React.createElement("div", { className: "mode-tools-group" },
-                        React.createElement(CheckBoxItem, { label: mcpServer.id, header: true, checked: getMCPServerState(mcpServer.id), onClick: () => onMCPServerClicked(mcpServer.id) }),
-                        mcpServer.tools.map((tool, index) => (React.createElement(CheckBoxItem, { label: tool.name, title: tool.description, indent: 1, checked: getMCPServerToolState(mcpServer.id, tool.name), onClick: () => setMCPServerToolState(mcpServer.id, tool.name, !getMCPServerToolState(mcpServer.id, tool.name)) })))))),
+                    renderCount > 0 &&
+                        mcpServerEnabledState.size > 0 &&
+                        toolConfigRef.current.mcpServers.length > 0 && (React.createElement("div", { className: "mode-tools-group-header" }, "MCP Server Tools")),
+                    renderCount > 0 &&
+                        toolConfigRef.current.mcpServers
+                            .filter(mcpServer => mcpServerEnabledState.has(mcpServer.id))
+                            .map((mcpServer, index) => (React.createElement("div", { className: "mode-tools-group" },
+                            React.createElement(CheckBoxItem, { label: mcpServer.id, header: true, checked: getMCPServerState(mcpServer.id), onClick: () => onMCPServerClicked(mcpServer.id) }),
+                            mcpServer.tools
+                                .filter((tool) => mcpServerEnabledState
+                                .get(mcpServer.id)
+                                .has(tool.name))
+                                .map((tool, index) => (React.createElement(CheckBoxItem, { label: tool.name, title: tool.description, indent: 1, checked: getMCPServerToolState(mcpServer.id, tool.name), onClick: () => setMCPServerToolState(mcpServer.id, tool.name, !getMCPServerToolState(mcpServer.id, tool.name)) })))))),
                     hasExtensionTools && (React.createElement("div", { className: "mode-tools-group-header" }, "Extension tools")),
-                    toolConfig.extensions.map((extension, index) => (React.createElement("div", { className: "mode-tools-group" },
+                    toolConfigRef.current.extensions.map((extension, index) => (React.createElement("div", { className: "mode-tools-group" },
                         React.createElement(CheckBoxItem, { label: `${extension.name} (${extension.id})`, header: true, checked: getExtensionState(extension.id), onClick: () => onExtensionClicked(extension.id) }),
                         extension.toolsets.map((toolset, index) => (React.createElement(React.Fragment, null,
                             React.createElement(CheckBoxItem, { label: `${toolset.name} (${toolset.id})`, title: toolset.description, indent: 1, checked: getExtensionToolsetState(extension.id, toolset.id), onClick: () => onExtensionToolsetClicked(extension.id, toolset.id) }),
@@ -1343,8 +1370,8 @@ function InlinePromptComponent(props) {
             chatId: UUID.uuid4(),
             type: RunChatCompletionType.GenerateCode,
             content: prompt,
-            language: undefined,
-            filename: undefined,
+            language: props.language || 'python',
+            filename: props.filename || 'Untitled.ipynb',
             prefix: props.prefix,
             suffix: props.suffix,
             existingCode: props.existingCode,
@@ -1501,245 +1528,31 @@ function GitHubCopilotLoginDialogBodyComponent(props) {
             React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: handleLogoutClick },
                 React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Cancel activation"))))));
 }
-function ConfigurationDialogBodyComponent(props) {
-    var _a;
-    const nbiConfig = NBIAPI.config;
-    const llmProviders = nbiConfig.llmProviders;
-    const [chatModels, setChatModels] = useState([]);
-    const [inlineCompletionModels, setInlineCompletionModels] = useState([]);
-    const [mcpServerNames, setMcpServerNames] = useState(((_a = nbiConfig.toolConfig.mcpServers) === null || _a === void 0 ? void 0 : _a.map((server) => server.id)) || []);
-    const handleSaveClick = async () => {
-        const config = {
-            default_chat_mode: defaultChatMode,
-            chat_model: {
-                provider: chatModelProvider,
-                model: chatModel,
-                properties: chatModelProperties
-            },
-            inline_completion_model: {
-                provider: inlineCompletionModelProvider,
-                model: inlineCompletionModel,
-                properties: inlineCompletionModelProperties
-            }
-        };
-        if (chatModelProvider === 'github-copilot' ||
-            inlineCompletionModelProvider === 'github-copilot') {
-            config.store_github_access_token = storeGitHubAccessToken;
-        }
-        await NBIAPI.setConfig(config);
-        props.onSave();
-    };
-    const handleRefreshOllamaModelListClick = async () => {
-        await NBIAPI.updateOllamaModelList();
-        updateModelOptionsForProvider(chatModelProvider, 'chat');
-    };
-    const [chatModelProvider, setChatModelProvider] = useState(nbiConfig.chatModel.provider || 'none');
-    const [inlineCompletionModelProvider, setInlineCompletionModelProvider] = useState(nbiConfig.inlineCompletionModel.provider || 'none');
-    const [defaultChatMode, setDefaultChatMode] = useState(nbiConfig.defaultChatMode);
-    const [chatModel, setChatModel] = useState(nbiConfig.chatModel.model);
-    const [chatModelProperties, setChatModelProperties] = useState([]);
-    const [inlineCompletionModelProperties, setInlineCompletionModelProperties] = useState([]);
-    const [inlineCompletionModel, setInlineCompletionModel] = useState(nbiConfig.inlineCompletionModel.model);
-    const [storeGitHubAccessToken, setStoreGitHubAccessToken] = useState(nbiConfig.storeGitHubAccessToken);
-    const updateModelOptionsForProvider = (providerId, modelType) => {
-        if (modelType === 'chat') {
-            setChatModelProvider(providerId);
-        }
-        else {
-            setInlineCompletionModelProvider(providerId);
-        }
-        const models = modelType === 'chat'
-            ? nbiConfig.chatModels
-            : nbiConfig.inlineCompletionModels;
-        const selectedModelId = modelType === 'chat'
-            ? nbiConfig.chatModel.model
-            : nbiConfig.inlineCompletionModel.model;
-        const providerModels = models.filter((model) => model.provider === providerId);
-        if (modelType === 'chat') {
-            setChatModels(providerModels);
-        }
-        else {
-            setInlineCompletionModels(providerModels);
-        }
-        let selectedModel = providerModels.find((model) => model.id === selectedModelId);
-        if (!selectedModel) {
-            selectedModel = providerModels === null || providerModels === void 0 ? void 0 : providerModels[0];
-        }
-        if (selectedModel) {
-            if (modelType === 'chat') {
-                setChatModel(selectedModel.id);
-                setChatModelProperties(selectedModel.properties);
-            }
-            else {
-                setInlineCompletionModel(selectedModel.id);
-                setInlineCompletionModelProperties(selectedModel.properties);
-            }
-        }
-        else {
-            if (modelType === 'chat') {
-                setChatModelProperties([]);
-            }
-            else {
-                setInlineCompletionModelProperties([]);
-            }
-        }
-    };
-    const onModelPropertyChange = (modelType, propertyId, value) => {
-        const modelProperties = modelType === 'chat'
-            ? chatModelProperties
-            : inlineCompletionModelProperties;
-        const updatedProperties = modelProperties.map((property) => {
-            if (property.id === propertyId) {
-                return { ...property, value };
-            }
-            return property;
-        });
-        if (modelType === 'chat') {
-            setChatModelProperties(updatedProperties);
-        }
-        else {
-            setInlineCompletionModelProperties(updatedProperties);
-        }
-    };
-    const handleReloadMCPServersClick = async () => {
-        var _a;
-        const data = await NBIAPI.reloadMCPServerList();
-        setMcpServerNames(((_a = data.mcpServers) === null || _a === void 0 ? void 0 : _a.map((server) => server.id)) || []);
+export class FormInputDialogBody extends ReactWidget {
+    constructor(options) {
+        super();
+        this._fields = options.fields || [];
+        this._onDone = options.onDone || (() => { });
+    }
+    render() {
+        return (React.createElement(FormInputDialogBodyComponent, { fields: this._fields, onDone: this._onDone }));
+    }
+}
+function FormInputDialogBodyComponent(props) {
+    const [formData, setFormData] = useState({});
+    const handleInputChange = (event) => {
+        setFormData({ ...formData, [event.target.name]: event.target.value });
     };
-    useEffect(() => {
-        updateModelOptionsForProvider(chatModelProvider, 'chat');
-        updateModelOptionsForProvider(inlineCompletionModelProvider, 'inline-completion');
-    }, []);
-    return (React.createElement("div", { className: "config-dialog" },
-        React.createElement("div", { className: "config-dialog-body" },
-            React.createElement("div", { className: "model-config-section" },
-                React.createElement("div", { className: "model-config-section-header" }, "Default chat mode"),
-                React.createElement("div", { className: "model-config-section-body" },
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" },
-                            React.createElement("div", null,
-                                React.createElement("select", { className: "jp-mod-styled", value: defaultChatMode, onChange: event => setDefaultChatMode(event.target.value) },
-                                    React.createElement("option", { value: "ask" }, "Ask"),
-                                    React.createElement("option", { value: "agent" }, "Agent")))),
-                        React.createElement("div", { className: "model-config-section-column" }, " ")))),
-            React.createElement("div", { className: "model-config-section" },
-                React.createElement("div", { className: "model-config-section-header" }, "Chat model"),
-                React.createElement("div", { className: "model-config-section-body" },
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" },
-                            React.createElement("div", null, "Provider"),
-                            React.createElement("div", null,
-                                React.createElement("select", { className: "jp-mod-styled", onChange: event => updateModelOptionsForProvider(event.target.value, 'chat') },
-                                    llmProviders.map((provider, index) => (React.createElement("option", { key: index, value: provider.id, selected: provider.id === chatModelProvider }, provider.name))),
-                                    React.createElement("option", { key: -1, value: "none", selected: chatModelProvider === 'none' ||
-                                            !llmProviders.find(provider => provider.id === chatModelProvider) }, "None")))),
-                        !['openai-compatible', 'litellm-compatible', 'none'].includes(chatModelProvider) &&
-                            chatModels.length > 0 && (React.createElement("div", { className: "model-config-section-column" },
-                            React.createElement("div", null, "Model"),
-                            ![
-                                OPENAI_COMPATIBLE_CHAT_MODEL_ID,
-                                LITELLM_COMPATIBLE_CHAT_MODEL_ID
-                            ].includes(chatModel) &&
-                                chatModels.length > 0 && (React.createElement("div", null,
-                                React.createElement("select", { className: "jp-mod-styled", onChange: event => setChatModel(event.target.value) }, chatModels.map((model, index) => (React.createElement("option", { key: index, value: model.id, selected: model.id === chatModel }, model.name))))))))),
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" }, chatModelProvider === 'ollama' && chatModels.length === 0 && (React.createElement("div", { className: "ollama-warning-message" },
-                            "No Ollama models found! Make sure",
-                            ' ',
-                            React.createElement("a", { href: "https://ollama.com/", target: "_blank" }, "Ollama"),
-                            ' ',
-                            "is running and models are downloaded to your computer.",
-                            ' ',
-                            React.createElement("a", { href: "javascript:void(0)", onClick: handleRefreshOllamaModelListClick }, "Try again"),
-                            ' ',
-                            "once ready.")))),
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" }, chatModelProperties.map((property, index) => (React.createElement("div", { className: "form-field-row", key: index },
-                            React.createElement("div", { className: "form-field-description" },
-                                property.name,
-                                " ",
-                                property.optional ? '(optional)' : ''),
-                            React.createElement("input", { name: "chat-model-id-input", placeholder: property.description, className: "jp-mod-styled", spellCheck: false, value: property.value, onChange: event => onModelPropertyChange('chat', property.id, event.target.value) })))))))),
-            React.createElement("div", { className: "model-config-section" },
-                React.createElement("div", { className: "model-config-section-header" }, "Auto-complete model"),
-                React.createElement("div", { className: "model-config-section-body" },
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" },
-                            React.createElement("div", null, "Provider"),
-                            React.createElement("div", null,
-                                React.createElement("select", { className: "jp-mod-styled", onChange: event => updateModelOptionsForProvider(event.target.value, 'inline-completion') },
-                                    llmProviders.map((provider, index) => (React.createElement("option", { key: index, value: provider.id, selected: provider.id === inlineCompletionModelProvider }, provider.name))),
-                                    React.createElement("option", { key: -1, value: "none", selected: inlineCompletionModelProvider === 'none' ||
-                                            !llmProviders.find(provider => provider.id === inlineCompletionModelProvider) }, "None")))),
-                        !['openai-compatible', 'litellm-compatible', 'none'].includes(inlineCompletionModelProvider) && (React.createElement("div", { className: "model-config-section-column" },
-                            React.createElement("div", null, "Model"),
-                            ![
-                                OPENAI_COMPATIBLE_INLINE_COMPLETION_MODEL_ID,
-                                LITELLM_COMPATIBLE_INLINE_COMPLETION_MODEL_ID
-                            ].includes(inlineCompletionModel) && (React.createElement("div", null,
-                                React.createElement("select", { className: "jp-mod-styled", onChange: event => setInlineCompletionModel(event.target.value) }, inlineCompletionModels.map((model, index) => (React.createElement("option", { key: index, value: model.id, selected: model.id === inlineCompletionModel }, model.name))))))))),
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" }, inlineCompletionModelProperties.map((property, index) => (React.createElement("div", { className: "form-field-row", key: index },
-                            React.createElement("div", { className: "form-field-description" },
-                                property.name,
-                                " ",
-                                property.optional ? '(optional)' : ''),
-                            React.createElement("input", { name: "inline-completion-model-id-input", placeholder: property.description, className: "jp-mod-styled", spellCheck: false, value: property.value, onChange: event => onModelPropertyChange('inline-completion', property.id, event.target.value) })))))))),
-            (chatModelProvider === 'github-copilot' ||
-                inlineCompletionModelProvider === 'github-copilot') && (React.createElement("div", { className: "model-config-section" },
-                React.createElement("div", { className: "model-config-section-header access-token-config-header" },
-                    "GitHub Copilot login",
-                    ' ',
-                    React.createElement("a", { href: "https://github.com/notebook-intelligence/notebook-intelligence/blob/main/README.md#remembering-github-copilot-login", target: "_blank" },
-                        ' ',
-                        React.createElement(VscWarning, { className: "access-token-warning", title: "Click to learn more about security implications" }))),
-                React.createElement("div", { className: "model-config-section-body" },
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" },
-                            React.createElement("label", null,
-                                React.createElement("input", { type: "checkbox", checked: storeGitHubAccessToken, onChange: event => {
-                                        setStoreGitHubAccessToken(event.target.checked);
-                                    } }),
-                                "Remember my GitHub Copilot access token")))))),
-            React.createElement("div", { className: "model-config-section" },
-                React.createElement("div", { className: "model-config-section-header" },
-                    "MCP Servers (",
-                    mcpServerNames.length,
-                    ") [",
-                    React.createElement("a", { href: "javascript:void(0)", onClick: props.onEditMCPConfigClicked }, "edit"),
-                    "]"),
-                React.createElement("div", { className: "model-config-section-body" },
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" },
-                            mcpServerNames.length === 0 && (React.createElement("div", null, "No MCP servers found. Add MCP servers in the configuration file.")),
-                            mcpServerNames.length > 0 && (React.createElement("div", null, mcpServerNames.sort().join(', ')))),
-                        React.createElement("div", { className: "model-config-section-column", style: { flexGrow: 'initial' } },
-                            React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: handleReloadMCPServersClick },
-                                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Reload")))))),
-            React.createElement("div", { className: "model-config-section" },
-                React.createElement("div", { className: "model-config-section-header" }, "Config file path"),
-                React.createElement("div", { className: "model-config-section-body" },
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" },
-                            React.createElement("span", { className: "user-code-span", onClick: () => {
-                                    navigator.clipboard.writeText(path.join(NBIAPI.config.userConfigDir, 'config.json'));
-                                    return true;
-                                } },
-                                path.join(NBIAPI.config.userConfigDir, 'config.json'),
-                                ' ',
-                                React.createElement("span", { className: "copy-icon", dangerouslySetInnerHTML: { __html: copySvgstr } }))))),
-                React.createElement("div", { className: "model-config-section-header" }, "MCP config file path"),
-                React.createElement("div", { className: "model-config-section-body" },
-                    React.createElement("div", { className: "model-config-section-row" },
-                        React.createElement("div", { className: "model-config-section-column" },
-                            React.createElement("span", { className: "user-code-span", onClick: () => {
-                                    navigator.clipboard.writeText(path.join(NBIAPI.config.userConfigDir, 'mcp.json'));
-                                    return true;
-                                } },
-                                path.join(NBIAPI.config.userConfigDir, 'mcp.json'),
-                                ' ',
-                                React.createElement("span", { className: "copy-icon", dangerouslySetInnerHTML: { __html: copySvgstr } }))))))),
-        React.createElement("div", { className: "config-dialog-footer" },
-            React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: handleSaveClick },
-                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Save")))));
+    return (React.createElement("div", { className: "form-input-dialog-body" },
+        React.createElement("div", { className: "form-input-dialog-body-content" },
+            React.createElement("div", { className: "form-input-dialog-body-content-title" }, props.title),
+            React.createElement("div", { className: "form-input-dialog-body-content-fields" }, props.fields.map((field) => (React.createElement("div", { className: "form-input-dialog-body-content-field", key: field.name },
+                React.createElement("label", { className: "form-input-dialog-body-content-field-label jp-mod-styled", htmlFor: field.name },
+                    field.name,
+                    field.required ? ' (required)' : ''),
+                React.createElement("input", { className: "form-input-dialog-body-content-field-input jp-mod-styled", type: field.type, id: field.name, name: field.name, onChange: handleInputChange, value: formData[field.name] || '' }))))),
+            React.createElement("div", null,
+                React.createElement("div", { style: { marginTop: '10px' } },
+                    React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => props.onDone(formData) },
+                        React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Done")))))));
 }