@notebook-intelligence/notebook-intelligence 2.4.2 → 2.6.0

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;
+}

package/lib/components/settings-panel.js

@@ -0,0 +1,374 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useRef, useState } from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { VscWarning } from 'react-icons/vsc';
+import * as path from 'path';
+import copySvgstr from '../../style/icons/copy.svg';
+import { NBIAPI } from '../api';
+import { CheckBoxItem } from './checkbox';
+import { PillItem } from './pill';
+import { mcpServerSettingsToEnabledState } from './mcp-util';
+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';
+export class SettingsPanel extends ReactWidget {
+    constructor(options) {
+        super();
+        this._onSave = options.onSave;
+        this._onEditMCPConfigClicked = options.onEditMCPConfigClicked;
+    }
+    render() {
+        return (React.createElement(SettingsPanelComponent, { onSave: this._onSave, onEditMCPConfigClicked: this._onEditMCPConfigClicked }));
+    }
+}
+function SettingsPanelComponent(props) {
+    const [activeTab, setActiveTab] = useState('general');
+    const onTabSelected = (tab) => {
+        setActiveTab(tab);
+    };
+    return (React.createElement("div", { className: "nbi-settings-panel" },
+        React.createElement("div", { className: "nbi-settings-panel-tabs" },
+            React.createElement(SettingsPanelTabsComponent, { onTabSelected: onTabSelected, activeTab: activeTab })),
+        React.createElement("div", { className: "nbi-settings-panel-tab-content" },
+            activeTab === 'general' && (React.createElement(SettingsPanelComponentGeneral, { onSave: props.onSave, onEditMCPConfigClicked: props.onEditMCPConfigClicked })),
+            activeTab === 'mcp-servers' && (React.createElement(SettingsPanelComponentMCPServers, { onEditMCPConfigClicked: props.onEditMCPConfigClicked })))));
+}
+function SettingsPanelTabsComponent(props) {
+    const [activeTab, setActiveTab] = useState(props.activeTab);
+    return (React.createElement("div", null,
+        React.createElement("div", { className: `nbi-settings-panel-tab ${activeTab === 'general' ? 'active' : ''}`, onClick: () => {
+                setActiveTab('general');
+                props.onTabSelected('general');
+            } }, "General"),
+        React.createElement("div", { className: `nbi-settings-panel-tab ${activeTab === 'mcp-servers' ? 'active' : ''}`, onClick: () => {
+                setActiveTab('mcp-servers');
+                props.onTabSelected('mcp-servers');
+            } }, "MCP Servers")));
+}
+function SettingsPanelComponentGeneral(props) {
+    const nbiConfig = NBIAPI.config;
+    const llmProviders = nbiConfig.llmProviders;
+    const [chatModels, setChatModels] = useState([]);
+    const [inlineCompletionModels, setInlineCompletionModels] = useState([]);
+    const handleSaveSettings = 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);
+        }
+    };
+    useEffect(() => {
+        updateModelOptionsForProvider(chatModelProvider, 'chat');
+        updateModelOptionsForProvider(inlineCompletionModelProvider, 'inline-completion');
+    }, []);
+    useEffect(() => {
+        handleSaveSettings();
+    }, [
+        defaultChatMode,
+        chatModelProvider,
+        chatModel,
+        chatModelProperties,
+        inlineCompletionModelProvider,
+        inlineCompletionModel,
+        inlineCompletionModelProperties,
+        storeGitHubAccessToken
+    ]);
+    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" }, "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 } })))))))));
+}
+function SettingsPanelComponentMCPServers(props) {
+    const nbiConfig = NBIAPI.config;
+    const mcpServersRef = useRef(nbiConfig.toolConfig.mcpServers);
+    const mcpServerSettingsRef = useRef(nbiConfig.mcpServerSettings);
+    const [renderCount, setRenderCount] = useState(1);
+    const [mcpServerEnabledState, setMCPServerEnabledState] = useState(new Map(mcpServerSettingsToEnabledState(mcpServersRef.current, mcpServerSettingsRef.current)));
+    const mcpServerEnabledStateToMcpServerSettings = () => {
+        const mcpServerSettings = {};
+        for (const mcpServer of mcpServersRef.current) {
+            if (mcpServerEnabledState.has(mcpServer.id)) {
+                const disabledTools = [];
+                for (const tool of mcpServer.tools) {
+                    if (!mcpServerEnabledState.get(mcpServer.id).has(tool.name)) {
+                        disabledTools.push(tool.name);
+                    }
+                }
+                mcpServerSettings[mcpServer.id] = {
+                    disabled: false,
+                    disabled_tools: disabledTools
+                };
+            }
+            else {
+                mcpServerSettings[mcpServer.id] = { disabled: true };
+            }
+        }
+        return mcpServerSettings;
+    };
+    const syncSettingsToServerState = () => {
+        NBIAPI.setConfig({
+            mcp_server_settings: mcpServerSettingsRef.current
+        });
+    };
+    const handleReloadMCPServersClick = async () => {
+        await NBIAPI.reloadMCPServers();
+    };
+    useEffect(() => {
+        syncSettingsToServerState();
+    }, [mcpServerSettingsRef.current]);
+    useEffect(() => {
+        mcpServerSettingsRef.current = mcpServerEnabledStateToMcpServerSettings();
+        setRenderCount(renderCount => renderCount + 1);
+    }, [mcpServerEnabledState]);
+    const setMCPServerEnabled = (serverId, enabled) => {
+        var _a;
+        const currentState = new Map(mcpServerEnabledState);
+        if (enabled) {
+            if (!(serverId in currentState)) {
+                currentState.set(serverId, new Set((_a = mcpServersRef.current
+                    .find((server) => server.id === serverId)) === null || _a === void 0 ? void 0 : _a.tools.map((tool) => tool.name)));
+            }
+        }
+        else {
+            currentState.delete(serverId);
+        }
+        setMCPServerEnabledState(currentState);
+    };
+    const getMCPServerEnabled = (serverId) => {
+        return mcpServerEnabledState.has(serverId);
+    };
+    const getMCPServerToolEnabled = (serverId, toolName) => {
+        return (mcpServerEnabledState.has(serverId) &&
+            mcpServerEnabledState.get(serverId).has(toolName));
+    };
+    const setMCPServerToolEnabled = (serverId, toolName, enabled) => {
+        const currentState = new Map(mcpServerEnabledState);
+        const serverState = currentState.get(serverId);
+        if (enabled) {
+            serverState.add(toolName);
+        }
+        else {
+            serverState.delete(toolName);
+        }
+        setMCPServerEnabledState(currentState);
+    };
+    useEffect(() => {
+        NBIAPI.configChanged.connect(() => {
+            mcpServersRef.current = nbiConfig.toolConfig.mcpServers;
+            mcpServerSettingsRef.current = nbiConfig.mcpServerSettings;
+            setRenderCount(renderCount => renderCount + 1);
+        });
+    }, []);
+    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", style: { display: 'flex' } },
+                    React.createElement("div", { style: { flexGrow: 1 } }, "MCP Servers"),
+                    React.createElement("div", null,
+                        React.createElement("button", { className: "jp-toast-button jp-mod-small jp-Button", onClick: handleReloadMCPServersClick },
+                            React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Reload")))),
+                React.createElement("div", { className: "model-config-section-body" },
+                    mcpServersRef.current.length === 0 && renderCount > 0 && (React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null, "No MCP servers found. Add MCP servers in the configuration file.")))),
+                    mcpServersRef.current.length > 0 && renderCount > 0 && (React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" }, mcpServersRef.current.map((server) => (React.createElement("div", { key: server.id },
+                            React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+                                React.createElement(CheckBoxItem, { header: true, label: server.id, checked: getMCPServerEnabled(server.id), onClick: () => {
+                                        setMCPServerEnabled(server.id, !getMCPServerEnabled(server.id));
+                                    } }),
+                                React.createElement("div", { className: `server-status-indicator ${server.status}`, title: server.status })),
+                            getMCPServerEnabled(server.id) && (React.createElement("div", null, server.tools.map((tool) => (React.createElement(PillItem, { label: tool.name, title: tool.description, checked: getMCPServerToolEnabled(server.id, tool.name), onClick: () => {
+                                    setMCPServerToolEnabled(server.id, tool.name, !getMCPServerToolEnabled(server.id, tool.name));
+                                } }))))))))))),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column", style: { flexGrow: 'initial' } },
+                            React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", style: { width: 'max-content' }, onClick: props.onEditMCPConfigClicked },
+                                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Add / Edit")))))))));
+}

package/lib/index.js

@@ -1,6 +1,6 @@
 // Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
 import { IDocumentManager } from '@jupyterlab/docmanager';
-import { Dialog, ICommandPalette } from '@jupyterlab/apputils';
+import { Dialog, ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
 import { IMainMenu } from '@jupyterlab/mainmenu';
 import { IEditorLanguageRegistry } from '@jupyterlab/codemirror';
 import { CodeCell } from '@jupyterlab/cells';
@@ -14,14 +14,16 @@ import { LabIcon } from '@jupyterlab/ui-components';
 import { Menu, Panel, Widget } from '@lumino/widgets';
 import { CommandRegistry } from '@lumino/commands';
 import { IStatusBar } from '@jupyterlab/statusbar';
-import { ChatSidebar, ConfigurationDialogBody, GitHubCopilotLoginDialogBody, GitHubCopilotStatusBarItem, InlinePromptWidget, RunChatCompletionType } from './chat-sidebar';
+import { ChatSidebar, FormInputDialogBody, GitHubCopilotLoginDialogBody, GitHubCopilotStatusBarItem, InlinePromptWidget, RunChatCompletionType } from './chat-sidebar';
 import { NBIAPI, GitHubCopilotLoginStatus } from './api';
 import { BackendMessageType, GITHUB_COPILOT_PROVIDER_ID, INotebookIntelligence, RequestDataType, TelemetryEventType } from './tokens';
 import sparklesSvgstr from '../style/icons/sparkles.svg';
 import copilotSvgstr from '../style/icons/copilot.svg';
+import sparklesWarningSvgstr from '../style/icons/sparkles-warning.svg';
 import { applyCodeToSelectionInEditor, cellOutputAsText, compareSelections, extractLLMGeneratedCode, getSelectionInEditor, getTokenCount, getWholeNotebookContent, isSelectionEmpty, markdownToComment, waitForDuration } from './utils';
 import { UUID } from '@lumino/coreutils';
 import * as path from 'path';
+import { SettingsPanel } from './components/settings-panel';
 var CommandIDs;
 (function (CommandIDs) {
     CommandIDs.chatuserInput = 'notebook-intelligence:chat-user-input';
@@ -51,6 +53,7 @@ var CommandIDs;
     CommandIDs.getCurrentFileContent = 'notebook-intelligence:get-current-file-content';
     CommandIDs.setCurrentFileContent = 'notebook-intelligence:set-current-file-content';
     CommandIDs.openMCPConfigEditor = 'notebook-intelligence:open-mcp-config-editor';
+    CommandIDs.showFormInputDialog = 'notebook-intelligence:show-form-input-dialog';
 })(CommandIDs || (CommandIDs = {}));
 const DOCUMENT_WATCH_INTERVAL = 1000;
 const MAX_TOKENS = 4096;
@@ -62,6 +65,10 @@ const sparkleIcon = new LabIcon({
     name: 'notebook-intelligence:sparkles-icon',
     svgstr: sparklesSvgstr
 });
+const sparkleWarningIcon = new LabIcon({
+    name: 'notebook-intelligence:sparkles-warning-icon',
+    svgstr: sparklesWarningSvgstr
+});
 const emptyNotebookContent = {
     cells: [],
     metadata: {},
@@ -498,7 +505,7 @@ const plugin = {
         panel.id = 'notebook-intelligence-tab';
         panel.title.caption = 'Notebook Intelligence';
         const sidebarIcon = new LabIcon({
-            name: 'ui-components:palette',
+            name: 'notebook-intelligence:sidebar-icon',
             svgstr: sparklesSvgstr
         });
         panel.title.icon = sidebarIcon;
@@ -525,6 +532,23 @@ const plugin = {
         panel.addWidget(sidebar);
         app.shell.add(panel, 'left', { rank: 1000 });
         app.shell.activateById(panel.id);
+        const updateSidebarIcon = () => {
+            if (NBIAPI.getChatEnabled()) {
+                panel.title.icon = sidebarIcon;
+            }
+            else {
+                panel.title.icon = sparkleWarningIcon;
+            }
+        };
+        NBIAPI.githubLoginStatusChanged.connect((_, args) => {
+            updateSidebarIcon();
+        });
+        NBIAPI.configChanged.connect((_, args) => {
+            updateSidebarIcon();
+        });
+        setTimeout(() => {
+            updateSidebarIcon();
+        }, 2000);
         app.commands.addCommand(CommandIDs.chatuserInput, {
             execute: args => {
                 NBIAPI.sendChatUserInput(args.id, args.data);
@@ -594,6 +618,36 @@ const plugin = {
                 return newPyFile;
             }
         });
+        app.commands.addCommand(CommandIDs.showFormInputDialog, {
+            execute: async (args) => {
+                const title = args.title;
+                const fields = args.fields;
+                return new Promise((resolve, reject) => {
+                    let dialog = null;
+                    const dialogBody = new FormInputDialogBody({
+                        fields: fields,
+                        onDone: (formData) => {
+                            dialog.dispose();
+                            resolve(formData);
+                        }
+                    });
+                    dialog = new Dialog({
+                        title: title,
+                        hasClose: true,
+                        body: dialogBody,
+                        buttons: []
+                    });
+                    dialog
+                        .launch()
+                        .then((result) => {
+                        reject();
+                    })
+                        .catch(() => {
+                        reject(new Error('Failed to show form input dialog'));
+                    });
+                });
+            }
+        });
         app.commands.addCommand(CommandIDs.createNewNotebookFromPython, {
             execute: async (args) => {
                 var _a;
@@ -922,28 +976,32 @@ const plugin = {
                 dialog.launch();
             }
         });
+        const createNewSettingsWidget = () => {
+            const settingsPanel = new SettingsPanel({
+                onSave: () => {
+                    NBIAPI.fetchCapabilities();
+                },
+                onEditMCPConfigClicked: () => {
+                    app.commands.execute('notebook-intelligence:open-mcp-config-editor');
+                }
+            });
+            const widget = new MainAreaWidget({ content: settingsPanel });
+            widget.id = 'nbi-settings';
+            widget.title.label = 'NBI Settings';
+            widget.title.closable = true;
+            return widget;
+        };
+        let settingsWidget = createNewSettingsWidget();
         app.commands.addCommand(CommandIDs.openConfigurationDialog, {
             label: 'Notebook Intelligence Settings',
             execute: args => {
-                let dialog = null;
-                const dialogBody = new ConfigurationDialogBody({
-                    onSave: () => {
-                        dialog === null || dialog === void 0 ? void 0 : dialog.dispose();
-                        NBIAPI.fetchCapabilities();
-                    },
-                    onEditMCPConfigClicked: () => {
-                        dialog === null || dialog === void 0 ? void 0 : dialog.dispose();
-                        app.commands.execute('notebook-intelligence:open-mcp-config-editor');
-                    }
-                });
-                dialog = new Dialog({
-                    title: 'Notebook Intelligence Settings',
-                    hasClose: true,
-                    body: dialogBody,
-                    buttons: []
-                });
-                dialog.node.classList.add('config-dialog-container');
-                dialog.launch();
+                if (settingsWidget.isDisposed) {
+                    settingsWidget = createNewSettingsWidget();
+                }
+                if (!settingsWidget.isAttached) {
+                    app.shell.add(settingsWidget, 'main');
+                }
+                app.shell.activateById(settingsWidget.id);
             }
         });
         app.commands.addCommand(CommandIDs.openMCPConfigEditor, {
@@ -1138,6 +1196,8 @@ const plugin = {
                 existingCode,
                 prefix: prefix,
                 suffix: suffix,
+                language: ActiveDocumentWatcher.activeDocumentInfo.language,
+                filename: ActiveDocumentWatcher.activeDocumentInfo.filePath,
                 onRequestSubmitted: (prompt) => {
                     userPrompt = prompt;
                     generatedContent = '';