@notebook-intelligence/notebook-intelligence 2.0.0 → 2.1.0

package/lib/chat-sidebar.js

@@ -318,10 +318,11 @@ async function submitCompletionRequest(request, responseEmitter) {
 }
 function CheckBoxItem(props) {
     const indent = props.indent || 0;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: `checkbox-item checkbox-item-indent-${indent}`, onClick: event => props.onClick(event) },
+    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.label),
+        props.title && (React.createElement("div", { className: "checkbox-item-description" }, props.title))));
 }
 function SidebarComponent(props) {
     const [chatMessages, setChatMessages] = useState([]);
@@ -449,7 +450,7 @@ function SidebarComponent(props) {
         const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
         const selectedServerTools = toolSelections.mcpServers[id];
         for (const tool of mcpServer.tools) {
-            if (!selectedServerTools.includes(tool)) {
+            if (!selectedServerTools.includes(tool.name)) {
                 return false;
             }
         }
@@ -464,7 +465,7 @@ function SidebarComponent(props) {
         else {
             const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
             const newConfig = { ...toolSelections };
-            newConfig.mcpServers[id] = structuredClone(mcpServer.tools);
+            newConfig.mcpServers[id] = structuredClone(mcpServer.tools.map((tool) => tool.name));
             setToolSelections(newConfig);
         }
     };
@@ -1206,16 +1207,16 @@ 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" }, toolConfig.builtinToolsets.map((toolset) => (React.createElement(CheckBoxItem, { key: toolset.id, label: toolset.name, checked: getBuiltinToolsetState(toolset.id), onClick: () => {
+                    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, checked: getMCPServerState(mcpServer.id), onClick: () => onMCPServerClicked(mcpServer.id) }),
-                        mcpServer.tools.map((tool, index) => (React.createElement(CheckBoxItem, { label: tool, indent: 1, checked: getMCPServerToolState(mcpServer.id, tool), onClick: () => setMCPServerToolState(mcpServer.id, tool, !getMCPServerToolState(mcpServer.id, tool)) })))))),
+                        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})`, checked: getExtensionState(extension.id), onClick: () => onExtensionClicked(extension.id) }),
+                        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)) }))))))))))))))));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@notebook-intelligence/notebook-intelligence",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "AI coding assistant for JupyterLab",
     "keywords": [
         "AI",

package/src/chat-sidebar.tsx

@@ -651,11 +651,12 @@ function CheckBoxItem(props: any) {
   const indent = props.indent || 0;
 
   return (
-    <>
-      <div
-        className={`checkbox-item checkbox-item-indent-${indent}`}
-        onClick={event => props.onClick(event)}
-      >
+    <div
+      className={`checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`}
+      title={props.title}
+      onClick={event => props.onClick(event)}
+    >
+      <div className="checkbox-item-toggle">
         {props.checked ? (
           <MdCheckBox className="checkbox-icon" />
         ) : (
@@ -663,7 +664,10 @@ function CheckBoxItem(props: any) {
         )}
         {props.label}
       </div>
-    </>
+      {props.title && (
+        <div className="checkbox-item-description">{props.title}</div>
+      )}
+    </div>
   );
 }
 
@@ -823,7 +827,7 @@ function SidebarComponent(props: any) {
     const selectedServerTools: string[] = toolSelections.mcpServers[id];
 
     for (const tool of mcpServer.tools) {
-      if (!selectedServerTools.includes(tool)) {
+      if (!selectedServerTools.includes(tool.name)) {
         return false;
       }
     }
@@ -839,7 +843,9 @@ function SidebarComponent(props: any) {
     } else {
       const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
       const newConfig = { ...toolSelections };
-      newConfig.mcpServers[id] = structuredClone(mcpServer.tools);
+      newConfig.mcpServers[id] = structuredClone(
+        mcpServer.tools.map((tool: any) => tool.name)
+      );
       setToolSelections(newConfig);
     }
   };
@@ -1915,12 +1921,13 @@ function SidebarComponent(props: any) {
               </div>
               <div className="mode-tools-popover-tool-list">
                 <div className="mode-tools-group-header">Built-in</div>
-                <div className="mode-tools-group">
+                <div className="mode-tools-group mode-tools-group-built-in">
                   {toolConfig.builtinToolsets.map((toolset: any) => (
                     <CheckBoxItem
                       key={toolset.id}
                       label={toolset.name}
                       checked={getBuiltinToolsetState(toolset.id)}
+                      header={true}
                       onClick={() => {
                         setBuiltinToolsetState(
                           toolset.id,
@@ -1937,19 +1944,21 @@ function SidebarComponent(props: any) {
                   <div className="mode-tools-group">
                     <CheckBoxItem
                       label={mcpServer.id}
+                      header={true}
                       checked={getMCPServerState(mcpServer.id)}
                       onClick={() => onMCPServerClicked(mcpServer.id)}
                     />
                     {mcpServer.tools.map((tool: any, index: number) => (
                       <CheckBoxItem
-                        label={tool}
+                        label={tool.name}
+                        title={tool.description}
                         indent={1}
-                        checked={getMCPServerToolState(mcpServer.id, tool)}
+                        checked={getMCPServerToolState(mcpServer.id, tool.name)}
                         onClick={() =>
                           setMCPServerToolState(
                             mcpServer.id,
-                            tool,
-                            !getMCPServerToolState(mcpServer.id, tool)
+                            tool.name,
+                            !getMCPServerToolState(mcpServer.id, tool.name)
                           )
                         }
                       />
@@ -1963,6 +1972,7 @@ function SidebarComponent(props: any) {
                   <div className="mode-tools-group">
                     <CheckBoxItem
                       label={`${extension.name} (${extension.id})`}
+                      header={true}
                       checked={getExtensionState(extension.id)}
                       onClick={() => onExtensionClicked(extension.id)}
                     />

package/style/base.css

@@ -370,6 +370,10 @@ pre:has(.code-block-header) {
   flex-direction: column;
 }
 
+.mode-tools-popover-title {
+  font-weight: bold;
+}
+
 .mode-tools-popover-header {
   display: flex;
   align-items: center;
@@ -758,10 +762,7 @@ svg.access-token-warning {
 
 .checkbox-item {
   display: flex;
-  align-items: center;
-  gap: 5px;
-  margin: 0 2px;
-  padding: 3px 2px;
+  flex-direction: column;
   cursor: pointer;
 }
 
@@ -789,4 +790,32 @@ svg.access-token-warning {
   width: 16px;
   height: 16px;
   color: var(--jp-brand-color1);
+  padding-top: 1px;
+}
+
+.checkbox-item-toggle {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin: 0 2px;
+  padding: 3px 2px;
+  color: var(--jp-ui-font-color1);
+}
+
+.checkbox-item-header .checkbox-item-toggle {
+  color: var(--jp-ui-font-color0);
+  font-weight: bold;
+}
+
+.mode-tools-group-built-in .checkbox-item-toggle {
+  font-weight: normal;
+}
+
+.checkbox-item-description {
+  padding-left: 25px;
+  color: var(--jp-ui-font-color2);
+  padding-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }