@notebook-intelligence/notebook-intelligence 1.3.5 → 2.1.0

package/README.md

@@ -157,7 +157,7 @@ Below is an example of a server configuration with SSE transport. For SSE transp
 }
 ```
 
-If you have multiple servers configured but you would like to disable some for a while, you can do so by using the `disabled` key. `servername2` will be diabled and not available in `@mcp` chat participant.
+If you have multiple servers configured but you would like to disable some for a while, you can do so by using the `disabled` key. `servername2` will be disabled and not available in `@mcp` chat participant.
 
 ```json
 "mcpServers": {

package/lib/api.d.ts

@@ -1,5 +1,5 @@
 import { Signal } from '@lumino/signaling';
-import { IChatCompletionResponseEmitter, IChatParticipant, IContextItem, ITelemetryEvent, RequestDataType } from './tokens';
+import { IChatCompletionResponseEmitter, IChatParticipant, IContextItem, ITelemetryEvent, IToolSelections, RequestDataType } from './tokens';
 export declare enum GitHubCopilotLoginStatus {
     NotLoggedIn = "NOT_LOGGED_IN",
     ActivatingDevice = "ACTIVATING_DEVICE",
@@ -18,6 +18,7 @@ export declare class NBIConfig {
     get inlineCompletionModel(): any;
     get usingGitHubCopilotModel(): boolean;
     get storeGitHubAccessToken(): boolean;
+    get toolConfig(): any;
     capabilities: any;
     chatParticipants: IChatParticipant[];
     changed: Signal<this, void>;
@@ -39,7 +40,7 @@ export declare class NBIAPI {
     static fetchCapabilities(): Promise<void>;
     static setConfig(config: any): Promise<void>;
     static updateOllamaModelList(): Promise<void>;
-    static chatRequest(messageId: string, chatId: string, prompt: string, language: string, filename: string, additionalContext: IContextItem[], responseEmitter: IChatCompletionResponseEmitter): Promise<void>;
+    static chatRequest(messageId: string, chatId: string, prompt: string, language: string, filename: string, additionalContext: IContextItem[], chatMode: string, toolSelections: IToolSelections, responseEmitter: IChatCompletionResponseEmitter): Promise<void>;
     static generateCode(chatId: string, prompt: string, prefix: string, suffix: string, existingCode: string, language: string, filename: string, responseEmitter: IChatCompletionResponseEmitter): Promise<void>;
     static sendChatUserInput(messageId: string, data: any): Promise<void>;
     static sendWebSocketMessage(messageId: string, messageType: RequestDataType, data: any): Promise<void>;

package/lib/api.js

@@ -42,6 +42,9 @@ export class NBIConfig {
     get storeGitHubAccessToken() {
         return this.capabilities.store_github_access_token === true;
     }
+    get toolConfig() {
+        return this.capabilities.tool_config;
+    }
 }
 class NBIAPI {
     static async initialize() {
@@ -167,7 +170,7 @@ class NBIAPI {
             });
         });
     }
-    static async chatRequest(messageId, chatId, prompt, language, filename, additionalContext, responseEmitter) {
+    static async chatRequest(messageId, chatId, prompt, language, filename, additionalContext, chatMode, toolSelections, responseEmitter) {
         this._messageReceived.connect((_, msg) => {
             msg = JSON.parse(msg);
             if (msg.id === messageId) {
@@ -177,7 +180,15 @@ class NBIAPI {
         this._webSocket.send(JSON.stringify({
             id: messageId,
             type: RequestDataType.ChatRequest,
-            data: { chatId, prompt, language, filename, additionalContext }
+            data: {
+                chatId,
+                prompt,
+                language,
+                filename,
+                additionalContext,
+                chatMode,
+                toolSelections
+            }
         }));
     }
     static async generateCode(chatId, prompt, prefix, suffix, existingCode, language, filename, responseEmitter) {

package/lib/chat-sidebar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ReactWidget } from '@jupyterlab/apputils';
-import { IActiveDocumentInfo, ICellContents, IContextItem, ITelemetryEmitter } from './tokens';
+import { IActiveDocumentInfo, ICellContents, IContextItem, ITelemetryEmitter, IToolSelections } from './tokens';
 import { JupyterFrontEnd } from '@jupyterlab/application';
 export declare enum RunChatCompletionType {
     Chat = 0,
@@ -21,6 +21,8 @@ export interface IRunChatCompletionRequest {
     suffix?: string;
     existingCode?: string;
     additionalContext?: IContextItem[];
+    chatMode: string;
+    toolSelections?: IToolSelections;
 }
 export interface IChatSidebarOptions {
     getActiveDocumentInfo: () => IActiveDocumentInfo;

package/lib/chat-sidebar.js

@@ -4,12 +4,13 @@ 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, ContextType, GITHUB_COPILOT_PROVIDER_ID, RequestDataType, ResponseStreamDataType, TelemetryEventType } from './tokens';
+import { BackendMessageType, BuiltinToolsetType, ContextType, GITHUB_COPILOT_PROVIDER_ID, RequestDataType, ResponseStreamDataType, TelemetryEventType } from './tokens';
 import { MarkdownRenderer } from './markdown-renderer';
 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 } from 'react-icons/vsc';
+import { VscSend, VscStopCircle, VscEye, VscEyeClosed, VscTriangleRight, VscTriangleDown, VscWarning, VscSettingsGear, VscPassFilled, VscTools, VscTrash } from 'react-icons/vsc';
+import { MdOutlineCheckBoxOutlineBlank, MdCheckBox } from 'react-icons/md';
 import { extractLLMGeneratedCode, isDarkTheme } from './utils';
 const OPENAI_COMPATIBLE_CHAT_MODEL_ID = 'openai-compatible-chat-model';
 const LITELLM_COMPATIBLE_CHAT_MODEL_ID = 'litellm-compatible-chat-model';
@@ -239,7 +240,9 @@ function ChatResponse(props) {
             React.createElement("div", { className: "chat-message-from" },
                 ((_a = msg.participant) === null || _a === void 0 ? void 0 : _a.iconPath) && (React.createElement("div", { className: `chat-message-from-icon ${((_b = msg.participant) === null || _b === void 0 ? void 0 : _b.id) === 'default' ? 'chat-message-from-icon-default' : ''} ${isDarkTheme() ? 'dark' : ''}` },
                     React.createElement("img", { src: msg.participant.iconPath }))),
-                React.createElement("div", { className: "chat-message-from-title" }, msg.from === 'user' ? 'User' : ((_c = msg.participant) === null || _c === void 0 ? void 0 : _c.name) || 'Copilot'),
+                React.createElement("div", { className: "chat-message-from-title" }, msg.from === 'user'
+                    ? 'User'
+                    : ((_c = msg.participant) === null || _c === void 0 ? void 0 : _c.name) || 'AI Assistant'),
                 React.createElement("div", { className: "chat-message-from-progress", style: { display: `${props.showGenerating ? 'visible' : 'none'}` } },
                     React.createElement("div", { className: "loading-ellipsis" }, "Generating"))),
             React.createElement("div", { className: "chat-message-timestamp" }, timestamp)),
@@ -302,17 +305,25 @@ function ChatResponse(props) {
 async function submitCompletionRequest(request, responseEmitter) {
     switch (request.type) {
         case RunChatCompletionType.Chat:
-            return NBIAPI.chatRequest(request.messageId, request.chatId, request.content, request.language || 'python', request.filename || 'Untitled.ipynb', request.additionalContext || [], responseEmitter);
+            return NBIAPI.chatRequest(request.messageId, request.chatId, request.content, request.language || 'python', request.filename || 'Untitled.ipynb', request.additionalContext || [], request.chatMode, request.toolSelections || {}, responseEmitter);
         case RunChatCompletionType.ExplainThis:
         case RunChatCompletionType.FixThis:
         case RunChatCompletionType.ExplainThisOutput:
         case RunChatCompletionType.TroubleshootThisOutput: {
-            return NBIAPI.chatRequest(request.messageId, request.chatId, request.content, request.language || 'python', request.filename || 'Untitled.ipynb', [], responseEmitter);
+            return NBIAPI.chatRequest(request.messageId, request.chatId, request.content, request.language || 'python', request.filename || 'Untitled.ipynb', [], 'ask', {}, responseEmitter);
         }
         case RunChatCompletionType.GenerateCode:
             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('');
@@ -336,8 +347,274 @@ function SidebarComponent(props) {
     const [activeDocumentInfo, setActiveDocumentInfo] = useState(null);
     const [currentFileContextTitle, setCurrentFileContextTitle] = useState('');
     const telemetryEmitter = props.getTelemetryEmitter();
+    const [chatMode, setChatMode] = useState('ask');
+    const [toolSelectionTitle, setToolSelectionTitle] = useState('Tool selection');
+    const [selectedToolCount, setSelectedToolCount] = useState(0);
+    const [notebookExecuteToolSelected, setNotebookExecuteToolSelected] = useState(false);
+    const [toolConfig, setToolConfig] = useState({
+        builtinToolsets: [
+            { id: BuiltinToolsetType.NotebookEdit, name: 'Notebook edit' },
+            { id: BuiltinToolsetType.NotebookExecute, name: 'Notebook execute' }
+        ],
+        mcpServers: [],
+        extensions: []
+    });
+    const [showModeTools, setShowModeTools] = useState(false);
+    const toolSelectionsInitial = {
+        builtinToolsets: [BuiltinToolsetType.NotebookEdit],
+        mcpServers: {},
+        extensions: {}
+    };
+    const toolSelectionsEmpty = {
+        builtinToolsets: [],
+        mcpServers: {},
+        extensions: {}
+    };
+    const [toolSelections, setToolSelections] = useState(toolSelectionsInitial);
+    const [hasExtensionTools, setHasExtensionTools] = useState(false);
+    NBIAPI.configChanged.connect(() => {
+        setToolConfig(NBIAPI.config.toolConfig);
+    });
+    useEffect(() => {
+        let hasTools = false;
+        for (const extension of toolConfig.extensions) {
+            if (extension.toolsets.length > 0) {
+                hasTools = true;
+                break;
+            }
+        }
+        setHasExtensionTools(hasTools);
+    }, [toolConfig]);
+    useEffect(() => {
+        const builtinToolSelCount = toolSelections.builtinToolsets.length;
+        let mcpServerToolSelCount = 0;
+        let extensionToolSelCount = 0;
+        for (const serverId in toolSelections.mcpServers) {
+            const mcpServerTools = toolSelections.mcpServers[serverId];
+            mcpServerToolSelCount += mcpServerTools.length;
+        }
+        for (const extensionId in toolSelections.extensions) {
+            const extensionToolsets = toolSelections.extensions[extensionId];
+            for (const toolsetId in extensionToolsets) {
+                const toolsetTools = extensionToolsets[toolsetId];
+                extensionToolSelCount += toolsetTools.length;
+            }
+        }
+        const typeCounts = [];
+        if (builtinToolSelCount > 0) {
+            typeCounts.push(`${builtinToolSelCount} built-in`);
+        }
+        if (mcpServerToolSelCount > 0) {
+            typeCounts.push(`${mcpServerToolSelCount} mcp`);
+        }
+        if (extensionToolSelCount > 0) {
+            typeCounts.push(`${extensionToolSelCount} ext`);
+        }
+        setSelectedToolCount(builtinToolSelCount + mcpServerToolSelCount + extensionToolSelCount);
+        setNotebookExecuteToolSelected(toolSelections.builtinToolsets.includes(BuiltinToolsetType.NotebookExecute));
+        setToolSelectionTitle(typeCounts.length === 0
+            ? 'Tool selection'
+            : `Tool selection (${typeCounts.join(', ')})`);
+    }, [toolSelections]);
+    const onClearToolsButtonClicked = () => {
+        setToolSelections(toolSelectionsEmpty);
+    };
+    const getBuiltinToolsetState = (toolsetName) => {
+        return toolSelections.builtinToolsets.includes(toolsetName);
+    };
+    const setBuiltinToolsetState = (toolsetName, enabled) => {
+        const newConfig = { ...toolSelections };
+        if (enabled) {
+            if (!toolSelections.builtinToolsets.includes(toolsetName)) {
+                newConfig.builtinToolsets.push(toolsetName);
+            }
+        }
+        else {
+            const index = newConfig.builtinToolsets.indexOf(toolsetName);
+            if (index !== -1) {
+                newConfig.builtinToolsets.splice(index, 1);
+            }
+        }
+        setToolSelections(newConfig);
+    };
+    const anyMCPServerToolSelected = (id) => {
+        if (!(id in toolSelections.mcpServers)) {
+            return false;
+        }
+        return toolSelections.mcpServers[id].length > 0;
+    };
+    const getMCPServerState = (id) => {
+        if (!(id in toolSelections.mcpServers)) {
+            return false;
+        }
+        const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
+        const selectedServerTools = toolSelections.mcpServers[id];
+        for (const tool of mcpServer.tools) {
+            if (!selectedServerTools.includes(tool.name)) {
+                return false;
+            }
+        }
+        return true;
+    };
+    const onMCPServerClicked = (id) => {
+        if (anyMCPServerToolSelected(id)) {
+            const newConfig = { ...toolSelections };
+            delete newConfig.mcpServers[id];
+            setToolSelections(newConfig);
+        }
+        else {
+            const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
+            const newConfig = { ...toolSelections };
+            newConfig.mcpServers[id] = structuredClone(mcpServer.tools.map((tool) => tool.name));
+            setToolSelections(newConfig);
+        }
+    };
+    const getMCPServerToolState = (serverId, toolId) => {
+        if (!(serverId in toolSelections.mcpServers)) {
+            return false;
+        }
+        const selectedServerTools = toolSelections.mcpServers[serverId];
+        return selectedServerTools.includes(toolId);
+    };
+    const setMCPServerToolState = (serverId, toolId, checked) => {
+        const newConfig = { ...toolSelections };
+        if (checked && !(serverId in newConfig.mcpServers)) {
+            newConfig.mcpServers[serverId] = [];
+        }
+        const selectedServerTools = newConfig.mcpServers[serverId];
+        if (checked) {
+            selectedServerTools.push(toolId);
+        }
+        else {
+            const index = selectedServerTools.indexOf(toolId);
+            if (index !== -1) {
+                selectedServerTools.splice(index, 1);
+            }
+        }
+        setToolSelections(newConfig);
+    };
+    // all toolsets and tools of the extension are selected
+    const getExtensionState = (extensionId) => {
+        if (!(extensionId in toolSelections.extensions)) {
+            return false;
+        }
+        const extension = toolConfig.extensions.find(extension => extension.id === extensionId);
+        for (const toolset of extension.toolsets) {
+            if (!getExtensionToolsetState(extensionId, toolset.id)) {
+                return false;
+            }
+        }
+        return true;
+    };
+    const getExtensionToolsetState = (extensionId, toolsetId) => {
+        if (!(extensionId in toolSelections.extensions)) {
+            return false;
+        }
+        if (!(toolsetId in toolSelections.extensions[extensionId])) {
+            return false;
+        }
+        const extension = toolConfig.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) {
+            if (!selectedToolsetTools.includes(tool)) {
+                return false;
+            }
+        }
+        return true;
+    };
+    const anyExtensionToolsetSelected = (extensionId) => {
+        if (!(extensionId in toolSelections.extensions)) {
+            return false;
+        }
+        return Object.keys(toolSelections.extensions[extensionId]).length > 0;
+    };
+    const onExtensionClicked = (extensionId) => {
+        if (anyExtensionToolsetSelected(extensionId)) {
+            const newConfig = { ...toolSelections };
+            delete newConfig.extensions[extensionId];
+            setToolSelections(newConfig);
+        }
+        else {
+            const newConfig = { ...toolSelections };
+            const extension = toolConfig.extensions.find(ext => ext.id === extensionId);
+            if (extensionId in newConfig.extensions) {
+                delete newConfig.extensions[extensionId];
+            }
+            newConfig.extensions[extensionId] = {};
+            for (const toolset of extension.toolsets) {
+                newConfig.extensions[extensionId][toolset.id] = structuredClone(toolset.tools);
+            }
+            setToolSelections(newConfig);
+        }
+    };
+    const anyExtensionToolsetToolSelected = (extensionId, toolsetId) => {
+        if (!(extensionId in toolSelections.extensions)) {
+            return false;
+        }
+        if (!(toolsetId in toolSelections.extensions[extensionId])) {
+            return false;
+        }
+        return toolSelections.extensions[extensionId][toolsetId].length > 0;
+    };
+    const onExtensionToolsetClicked = (extensionId, toolsetId) => {
+        if (anyExtensionToolsetToolSelected(extensionId, toolsetId)) {
+            const newConfig = { ...toolSelections };
+            if (toolsetId in newConfig.extensions[extensionId]) {
+                delete newConfig.extensions[extensionId][toolsetId];
+            }
+            setToolSelections(newConfig);
+        }
+        else {
+            const extension = toolConfig.extensions.find(ext => ext.id === extensionId);
+            const extensionToolset = extension.toolsets.find((toolset) => toolset.id === toolsetId);
+            const newConfig = { ...toolSelections };
+            if (!(extensionId in newConfig.extensions)) {
+                newConfig.extensions[extensionId] = {};
+            }
+            newConfig.extensions[extensionId][toolsetId] = structuredClone(extensionToolset.tools);
+            setToolSelections(newConfig);
+        }
+    };
+    const getExtensionToolsetToolState = (extensionId, toolsetId, toolId) => {
+        if (!(extensionId in toolSelections.extensions)) {
+            return false;
+        }
+        const selectedExtensionToolsets = toolSelections.extensions[extensionId];
+        if (!(toolsetId in selectedExtensionToolsets)) {
+            return false;
+        }
+        const selectedServerTools = selectedExtensionToolsets[toolsetId];
+        return selectedServerTools.includes(toolId);
+    };
+    const setExtensionToolsetToolState = (extensionId, toolsetId, toolId, checked) => {
+        const newConfig = { ...toolSelections };
+        if (checked && !(extensionId in newConfig.extensions)) {
+            newConfig.extensions[extensionId] = {};
+        }
+        if (checked && !(toolsetId in newConfig.extensions[extensionId])) {
+            newConfig.extensions[extensionId][toolsetId] = [];
+        }
+        const selectedTools = newConfig.extensions[extensionId][toolsetId];
+        if (checked) {
+            selectedTools.push(toolId);
+        }
+        else {
+            const index = selectedTools.indexOf(toolId);
+            if (index !== -1) {
+                selectedTools.splice(index, 1);
+            }
+        }
+        setToolSelections(newConfig);
+    };
     useEffect(() => {
         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;
@@ -353,7 +630,7 @@ function SidebarComponent(props) {
         }
         setOriginalPrefixes(prefixes);
         setPrefixSuggestions(prefixes);
-    }, []);
+    }, [chatMode]);
     useEffect(() => {
         const fetchData = () => {
             setGHLoginStatus(NBIAPI.getLoginStatus());
@@ -399,6 +676,7 @@ function SidebarComponent(props) {
         applyPrefixSuggestion(prefix);
     };
     const handleSubmitStopChatButtonClick = async () => {
+        setShowModeTools(false);
         if (!copilotRequestInProgress) {
             handleUserInputSubmit();
         }
@@ -406,6 +684,18 @@ function SidebarComponent(props) {
             handleUserInputCancel();
         }
     };
+    const handleSettingsButtonClick = async () => {
+        setShowModeTools(false);
+        props
+            .getApp()
+            .commands.execute('notebook-intelligence:open-configuration-dialog');
+    };
+    const handleChatToolsButtonClick = async () => {
+        if (!showModeTools) {
+            NBIAPI.fetchCapabilities();
+        }
+        setShowModeTools(!showModeTools);
+    };
     const handleUserInputSubmit = async () => {
         setPromptHistoryIndex(promptHistory.length + 1);
         setPromptHistory([...promptHistory, prompt]);
@@ -480,7 +770,9 @@ function SidebarComponent(props) {
             content: extractedPrompt,
             language: activeDocInfo.language,
             filename: activeDocInfo.filename,
-            additionalContext
+            additionalContext,
+            chatMode,
+            toolSelections: toolSelections
         }, {
             emit: async (response) => {
                 var _a, _b, _c, _d, _e;
@@ -617,6 +909,7 @@ function SidebarComponent(props) {
             event.stopPropagation();
             event.preventDefault();
             setShowPopover(false);
+            setShowModeTools(false);
             setSelectedPrefixSuggestionIndex(0);
         }
         else if (event.key === 'ArrowUp') {
@@ -831,7 +1124,9 @@ function SidebarComponent(props) {
     }, [ghLoginStatus]);
     return (React.createElement("div", { className: "sidebar" },
         React.createElement("div", { className: "sidebar-header" },
-            React.createElement("div", { className: "sidebar-title" }, "Notebook Intelligence")),
+            React.createElement("div", { className: "sidebar-title" }, "Notebook Intelligence"),
+            React.createElement("div", { className: "user-input-footer-button", onClick: () => handleSettingsButtonClick() },
+                React.createElement(VscSettingsGear, null))),
         !chatEnabled && !ghLoginRequired && (React.createElement("div", { className: "sidebar-login-info" },
             "Chat is disabled as you don't have a model configured.",
             React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: handleConfigurationClick },
@@ -851,7 +1146,7 @@ function SidebarComponent(props) {
                         copilotRequestInProgress }))),
                 React.createElement("div", { ref: messagesEndRef })))),
         chatEnabled && (React.createElement("div", { className: `sidebar-user-input ${copilotRequestInProgress ? 'generating' : ''}` },
-            React.createElement("textarea", { ref: promptInputRef, rows: 3, onChange: onPromptChange, onKeyDown: onPromptKeyDown, placeholder: "Ask Copilot...", spellCheck: false, value: prompt }),
+            React.createElement("textarea", { ref: promptInputRef, rows: 3, onChange: onPromptChange, onKeyDown: onPromptKeyDown, placeholder: "Ask Notebook Intelligence...", spellCheck: false, value: prompt }),
             (activeDocumentInfo === null || activeDocumentInfo === void 0 ? void 0 : activeDocumentInfo.filename) && (React.createElement("div", { className: "user-input-context-row" },
                 React.createElement("div", { className: `user-input-context user-input-context-active-file ${contextOn ? 'on' : 'off'}` },
                     React.createElement("div", null, currentFileContextTitle),
@@ -859,16 +1154,72 @@ function SidebarComponent(props) {
                         React.createElement(VscEye, { title: "Use as context" }))) : (React.createElement("div", { className: "user-input-context-toggle", onClick: () => setContextOn(!contextOn) },
                         React.createElement(VscEyeClosed, { title: "Don't use as context" })))))),
             React.createElement("div", { className: "user-input-footer" },
-                React.createElement("div", null,
+                chatMode === 'ask' && (React.createElement("div", null,
                     React.createElement("a", { href: "javascript:void(0)", onClick: () => {
                             var _a;
                             setShowPopover(true);
                             (_a = promptInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        }, title: "Select chat participant" }, "@")),
+                        }, title: "Select chat participant" }, "@"))),
                 React.createElement("div", { style: { flexGrow: 1 } }),
+                React.createElement("div", { className: "chat-mode-widgets-container" },
+                    React.createElement("div", null,
+                        React.createElement("select", { className: "chat-mode-select", title: "Chat mode", value: chatMode, onChange: event => {
+                                if (event.target.value === 'ask') {
+                                    setToolSelections(toolSelectionsEmpty);
+                                }
+                                else if (event.target.value === 'agent') {
+                                    setToolSelections(toolSelectionsInitial);
+                                }
+                                setShowModeTools(false);
+                                setChatMode(event.target.value);
+                            } },
+                            React.createElement("option", { value: "ask" }, "Ask"),
+                            React.createElement("option", { value: "agent" }, "Agent"))),
+                    chatMode !== 'ask' && (React.createElement("div", { className: `user-input-footer-button tools-button ${notebookExecuteToolSelected ? 'tools-button-warning' : selectedToolCount > 0 ? 'tools-button-active' : ''}`, onClick: () => handleChatToolsButtonClick(), title: notebookExecuteToolSelected
+                            ? `Notebook execute tool selected!\n${toolSelectionTitle}`
+                            : toolSelectionTitle },
+                        React.createElement(VscTools, null),
+                        selectedToolCount > 0 && React.createElement(React.Fragment, null, selectedToolCount)))),
                 React.createElement("div", null,
                     React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled send-button", onClick: () => handleSubmitStopChatButtonClick(), disabled: prompt.length === 0 && !copilotRequestInProgress }, copilotRequestInProgress ? React.createElement(VscStopCircle, null) : React.createElement(VscSend, null)))),
-            showPopover && prefixSuggestions.length > 0 && (React.createElement("div", { className: "user-input-autocomplete" }, prefixSuggestions.map((prefix, index) => (React.createElement("div", { key: `key-${index}`, className: `user-input-autocomplete-item ${index === selectedPrefixSuggestionIndex ? 'selected' : ''}`, "data-value": prefix, onClick: event => prefixSuggestionSelected(event) }, prefix)))))))));
+            showPopover && prefixSuggestions.length > 0 && (React.createElement("div", { className: "user-input-autocomplete" }, prefixSuggestions.map((prefix, index) => (React.createElement("div", { key: `key-${index}`, className: `user-input-autocomplete-item ${index === selectedPrefixSuggestionIndex ? 'selected' : ''}`, "data-value": prefix, onClick: event => prefixSuggestionSelected(event) }, prefix))))),
+            showModeTools && (React.createElement("div", { className: "mode-tools-popover", tabIndex: 1, autoFocus: true, onKeyDown: (event) => {
+                    if (event.key === 'Escape' || event.key === 'Enter') {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        setShowModeTools(false);
+                    }
+                } },
+                React.createElement("div", { className: "mode-tools-popover-header" },
+                    React.createElement("div", { className: "mode-tools-popover-header-icon" },
+                        React.createElement(VscTools, null)),
+                    React.createElement("div", { className: "mode-tools-popover-title" }, toolSelectionTitle),
+                    React.createElement("div", { className: "mode-tools-popover-clear-tools-button", style: {
+                            visibility: selectedToolCount > 0 ? 'visible' : 'hidden'
+                        } },
+                        React.createElement("div", null,
+                            React.createElement(VscTrash, null)),
+                        React.createElement("div", null,
+                            React.createElement("a", { href: "javascript:void(0);", onClick: onClearToolsButtonClicked }, "clear"))),
+                    React.createElement("div", { className: "mode-tools-popover-close-button", onClick: () => setShowModeTools(false) },
+                        React.createElement("div", null,
+                            React.createElement(VscPassFilled, null)),
+                        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: () => {
+                            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)) })))))),
+                    hasExtensionTools && (React.createElement("div", { className: "mode-tools-group-header" }, "Extension tools")),
+                    toolConfig.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})`, indent: 1, checked: getExtensionToolsetState(extension.id, toolset.id), onClick: () => onExtensionToolsetClicked(extension.id, toolset.id) }),
+                            toolset.tools.map((tool, index) => (React.createElement(CheckBoxItem, { label: tool, indent: 2, checked: getExtensionToolsetToolState(extension.id, toolset.id, tool), onClick: () => setExtensionToolsetToolState(extension.id, toolset.id, tool, !getExtensionToolsetToolState(extension.id, toolset.id, tool)) }))))))))))))))));
 }
 function InlinePopoverComponent(props) {
     const [modifiedCode, setModifiedCode] = useState('');
@@ -964,7 +1315,8 @@ function InlinePromptComponent(props) {
             filename: undefined,
             prefix: props.prefix,
             suffix: props.suffix,
-            existingCode: props.existingCode
+            existingCode: props.existingCode,
+            chatMode: 'ask'
         }, {
             emit: async (response) => {
                 props.onResponseEmit(response);
@@ -999,7 +1351,7 @@ function InlinePromptComponent(props) {
         }
     }, []);
     return (React.createElement("div", { className: "inline-prompt-container", style: { height: props.limitHeight ? '40px' : '100%' } },
-        React.createElement("textarea", { ref: promptInputRef, rows: 3, onChange: onPromptChange, onKeyDown: onPromptKeyDown, placeholder: "Ask Copilot to generate Python code...", spellCheck: false, value: prompt })));
+        React.createElement("textarea", { ref: promptInputRef, rows: 3, onChange: onPromptChange, onKeyDown: onPromptKeyDown, placeholder: "Ask Notebook Intelligence to generate Python code...", spellCheck: false, value: prompt })));
 }
 function GitHubCopilotStatusComponent(props) {
     const [ghLoginStatus, setGHLoginStatus] = useState(GitHubCopilotLoginStatus.NotLoggedIn);