@notebook-intelligence/notebook-intelligence 2.4.2 → 2.5.0

package/lib/chat-sidebar.js

@@ -10,14 +10,10 @@ 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)) {
@@ -707,7 +697,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);
     };
@@ -1146,10 +1142,12 @@ function SidebarComponent(props) {
     };
     const [ghLoginRequired, setGHLoginRequired] = useState(getGHLoginRequired());
     const [chatEnabled, setChatEnabled] = useState(getChatEnabled());
-    NBIAPI.configChanged.connect(() => {
-        setGHLoginRequired(getGHLoginRequired());
-        setChatEnabled(getChatEnabled());
-    });
+    useEffect(() => {
+        NBIAPI.configChanged.connect(() => {
+            setGHLoginRequired(getGHLoginRequired());
+            setChatEnabled(getChatEnabled());
+        });
+    }, []);
     useEffect(() => {
         setGHLoginRequired(getGHLoginRequired());
         setChatEnabled(getChatEnabled());
@@ -1200,7 +1198,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 +1237,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 Servers")),
+                    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) }),
@@ -1501,245 +1508,3 @@ 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)) || []);
-    };
-    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")))));
-}

package/lib/components/checkbox.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CheckBoxItem(props: any): React.JSX.Element;

package/lib/components/checkbox.js

@@ -0,0 +1,11 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React from 'react';
+import { MdOutlineCheckBoxOutlineBlank, MdCheckBox } from 'react-icons/md';
+export 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))));
+}

package/lib/components/mcp-util.d.ts

@@ -0,0 +1,2 @@
+export declare function mcpServerSettingsToEnabledState(mcpServers: any, mcpServerSettings: any): Map<string, Set<string>>;
+export declare function mcpServerSettingsToServerToolEnabledState(mcpServers: any, mcpServerSettings: any, serverId: string): Set<string>;

package/lib/components/mcp-util.js

@@ -0,0 +1,37 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+export function mcpServerSettingsToEnabledState(mcpServers, mcpServerSettings) {
+    const mcpServerEnabledState = new Map();
+    for (const server of mcpServers) {
+        const mcpServerToolEnabledState = mcpServerSettingsToServerToolEnabledState(mcpServers, mcpServerSettings, server.id);
+        if (mcpServerToolEnabledState) {
+            mcpServerEnabledState.set(server.id, mcpServerToolEnabledState);
+        }
+    }
+    return mcpServerEnabledState;
+}
+export function mcpServerSettingsToServerToolEnabledState(mcpServers, mcpServerSettings, serverId) {
+    var _a;
+    const server = mcpServers.find((server) => server.id === serverId);
+    let mcpServerToolEnabledState = null;
+    if (!server) {
+        return mcpServerToolEnabledState;
+    }
+    if (mcpServerSettings[server.id]) {
+        const serverSettings = mcpServerSettings[server.id];
+        if (!serverSettings.disabled) {
+            mcpServerToolEnabledState = new Set();
+            for (const tool of server.tools) {
+                if (!((_a = serverSettings.disabled_tools) === null || _a === void 0 ? void 0 : _a.includes(tool.name))) {
+                    mcpServerToolEnabledState.add(tool.name);
+                }
+            }
+        }
+    }
+    else {
+        mcpServerToolEnabledState = new Set();
+        for (const tool of server.tools) {
+            mcpServerToolEnabledState.add(tool.name);
+        }
+    }
+    return mcpServerToolEnabledState;
+}

package/lib/components/pill.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function PillItem(props: any): React.JSX.Element;

package/lib/components/pill.js

@@ -0,0 +1,5 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React from 'react';
+export function PillItem(props) {
+    return (React.createElement("div", { className: `pill-item ${props.checked ? 'checked' : ''}`, title: props.title, onClick: event => props.onClick(event) }, props.label));
+}

package/lib/components/settings-panel.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ReactWidget } from '@jupyterlab/apputils';
+export declare class SettingsPanel extends ReactWidget {
+    constructor(options: {
+        onSave: () => void;
+        onEditMCPConfigClicked: () => void;
+    });
+    render(): JSX.Element;
+    private _onSave;
+    private _onEditMCPConfigClicked;
+}