@notebook-intelligence/notebook-intelligence 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/chat-sidebar.js +14 -13
  2. package/package.json +1 -1
  3. package/src/chat-sidebar.tsx +31 -20
  4. package/style/base.css +33 -4
package/lib/chat-sidebar.js CHANGED
@@ -318,10 +318,11 @@ async function submitCompletionRequest(request, responseEmitter) {
318
318
  }
319
319
  function CheckBoxItem(props) {
320
320
  const indent = props.indent || 0;
321
- return (React.createElement(React.Fragment, null,
322
- React.createElement("div", { className: `checkbox-item checkbox-item-indent-${indent}`, onClick: event => props.onClick(event) },
321
+ return (React.createElement("div", { className: `checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`, title: props.title, onClick: event => props.onClick(event) },
322
+ React.createElement("div", { className: "checkbox-item-toggle" },
323
323
  props.checked ? (React.createElement(MdCheckBox, { className: "checkbox-icon" })) : (React.createElement(MdOutlineCheckBoxOutlineBlank, { className: "checkbox-icon" })),
324
- props.label)));
324
+ props.label),
325
+ props.title && (React.createElement("div", { className: "checkbox-item-description" }, props.title))));
325
326
  }
326
327
  function SidebarComponent(props) {
327
328
  const [chatMessages, setChatMessages] = useState([]);
@@ -449,7 +450,7 @@ function SidebarComponent(props) {
449
450
  const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
450
451
  const selectedServerTools = toolSelections.mcpServers[id];
451
452
  for (const tool of mcpServer.tools) {
452
- if (!selectedServerTools.includes(tool)) {
453
+ if (!selectedServerTools.includes(tool.name)) {
453
454
  return false;
454
455
  }
455
456
  }
@@ -464,7 +465,7 @@ function SidebarComponent(props) {
464
465
  else {
465
466
  const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
466
467
  const newConfig = { ...toolSelections };
467
- newConfig.mcpServers[id] = structuredClone(mcpServer.tools);
468
+ newConfig.mcpServers[id] = structuredClone(mcpServer.tools.map((tool) => tool.name));
468
469
  setToolSelections(newConfig);
469
470
  }
470
471
  };
@@ -516,7 +517,7 @@ function SidebarComponent(props) {
516
517
  const extensionToolset = extension.toolsets.find((toolset) => toolset.id === toolsetId);
517
518
  const selectedToolsetTools = toolSelections.extensions[extensionId][toolsetId];
518
519
  for (const tool of extensionToolset.tools) {
519
- if (!selectedToolsetTools.includes(tool)) {
520
+ if (!selectedToolsetTools.includes(tool.name)) {
520
521
  return false;
521
522
  }
522
523
  }
@@ -542,7 +543,7 @@ function SidebarComponent(props) {
542
543
  }
543
544
  newConfig.extensions[extensionId] = {};
544
545
  for (const toolset of extension.toolsets) {
545
- newConfig.extensions[extensionId][toolset.id] = structuredClone(toolset.tools);
546
+ newConfig.extensions[extensionId][toolset.id] = structuredClone(toolset.tools.map((tool) => tool.name));
546
547
  }
547
548
  setToolSelections(newConfig);
548
549
  }
@@ -571,7 +572,7 @@ function SidebarComponent(props) {
571
572
  if (!(extensionId in newConfig.extensions)) {
572
573
  newConfig.extensions[extensionId] = {};
573
574
  }
574
- newConfig.extensions[extensionId][toolsetId] = structuredClone(extensionToolset.tools);
575
+ newConfig.extensions[extensionId][toolsetId] = structuredClone(extensionToolset.tools.map((tool) => tool.name));
575
576
  setToolSelections(newConfig);
576
577
  }
577
578
  };
@@ -1206,19 +1207,19 @@ function SidebarComponent(props) {
1206
1207
  React.createElement("div", null, "Done"))),
1207
1208
  React.createElement("div", { className: "mode-tools-popover-tool-list" },
1208
1209
  React.createElement("div", { className: "mode-tools-group-header" }, "Built-in"),
1209
- 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: () => {
1210
+ 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: () => {
1210
1211
  setBuiltinToolsetState(toolset.id, !getBuiltinToolsetState(toolset.id));
1211
1212
  } })))),
1212
1213
  toolConfig.mcpServers.length > 0 && (React.createElement("div", { className: "mode-tools-group-header" }, "MCP Servers")),
1213
1214
  toolConfig.mcpServers.map((mcpServer, index) => (React.createElement("div", { className: "mode-tools-group" },
1214
- React.createElement(CheckBoxItem, { label: mcpServer.id, checked: getMCPServerState(mcpServer.id), onClick: () => onMCPServerClicked(mcpServer.id) }),
1215
- 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)) })))))),
1215
+ React.createElement(CheckBoxItem, { label: mcpServer.id, header: true, checked: getMCPServerState(mcpServer.id), onClick: () => onMCPServerClicked(mcpServer.id) }),
1216
+ 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)) })))))),
1216
1217
  hasExtensionTools && (React.createElement("div", { className: "mode-tools-group-header" }, "Extension tools")),
1217
1218
  toolConfig.extensions.map((extension, index) => (React.createElement("div", { className: "mode-tools-group" },
1218
- React.createElement(CheckBoxItem, { label: `${extension.name} (${extension.id})`, checked: getExtensionState(extension.id), onClick: () => onExtensionClicked(extension.id) }),
1219
+ React.createElement(CheckBoxItem, { label: `${extension.name} (${extension.id})`, header: true, checked: getExtensionState(extension.id), onClick: () => onExtensionClicked(extension.id) }),
1219
1220
  extension.toolsets.map((toolset, index) => (React.createElement(React.Fragment, null,
1220
1221
  React.createElement(CheckBoxItem, { label: `${toolset.name} (${toolset.id})`, indent: 1, checked: getExtensionToolsetState(extension.id, toolset.id), onClick: () => onExtensionToolsetClicked(extension.id, toolset.id) }),
1221
- 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)) }))))))))))))))));
1222
+ toolset.tools.map((tool, index) => (React.createElement(CheckBoxItem, { label: tool.name, title: tool.description, indent: 2, checked: getExtensionToolsetToolState(extension.id, toolset.id, tool.name), onClick: () => setExtensionToolsetToolState(extension.id, toolset.id, tool.name, !getExtensionToolsetToolState(extension.id, toolset.id, tool.name)) }))))))))))))))));
1222
1223
  }
1223
1224
  function InlinePopoverComponent(props) {
1224
1225
  const [modifiedCode, setModifiedCode] = useState('');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@notebook-intelligence/notebook-intelligence",
3
- "version": "2.0.0",
3
+ "version": "2.2.0",
4
4
  "description": "AI coding assistant for JupyterLab",
5
5
  "keywords": [
6
6
  "AI",
package/src/chat-sidebar.tsx CHANGED
@@ -651,11 +651,12 @@ function CheckBoxItem(props: any) {
651
651
  const indent = props.indent || 0;
652
652
 
653
653
  return (
654
- <>
655
- <div
656
- className={`checkbox-item checkbox-item-indent-${indent}`}
657
- onClick={event => props.onClick(event)}
658
- >
654
+ <div
655
+ className={`checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`}
656
+ title={props.title}
657
+ onClick={event => props.onClick(event)}
658
+ >
659
+ <div className="checkbox-item-toggle">
659
660
  {props.checked ? (
660
661
  <MdCheckBox className="checkbox-icon" />
661
662
  ) : (
@@ -663,7 +664,10 @@ function CheckBoxItem(props: any) {
663
664
  )}
664
665
  {props.label}
665
666
  </div>
666
- </>
667
+ {props.title && (
668
+ <div className="checkbox-item-description">{props.title}</div>
669
+ )}
670
+ </div>
667
671
  );
668
672
  }
669
673
 
@@ -823,7 +827,7 @@ function SidebarComponent(props: any) {
823
827
  const selectedServerTools: string[] = toolSelections.mcpServers[id];
824
828
 
825
829
  for (const tool of mcpServer.tools) {
826
- if (!selectedServerTools.includes(tool)) {
830
+ if (!selectedServerTools.includes(tool.name)) {
827
831
  return false;
828
832
  }
829
833
  }
@@ -839,7 +843,9 @@ function SidebarComponent(props: any) {
839
843
  } else {
840
844
  const mcpServer = toolConfig.mcpServers.find(server => server.id === id);
841
845
  const newConfig = { ...toolSelections };
842
- newConfig.mcpServers[id] = structuredClone(mcpServer.tools);
846
+ newConfig.mcpServers[id] = structuredClone(
847
+ mcpServer.tools.map((tool: any) => tool.name)
848
+ );
843
849
  setToolSelections(newConfig);
844
850
  }
845
851
  };
@@ -919,7 +925,7 @@ function SidebarComponent(props: any) {
919
925
  toolSelections.extensions[extensionId][toolsetId];
920
926
 
921
927
  for (const tool of extensionToolset.tools) {
922
- if (!selectedToolsetTools.includes(tool)) {
928
+ if (!selectedToolsetTools.includes(tool.name)) {
923
929
  return false;
924
930
  }
925
931
  }
@@ -951,7 +957,7 @@ function SidebarComponent(props: any) {
951
957
  newConfig.extensions[extensionId] = {};
952
958
  for (const toolset of extension.toolsets) {
953
959
  newConfig.extensions[extensionId][toolset.id] = structuredClone(
954
- toolset.tools
960
+ toolset.tools.map((tool: any) => tool.name)
955
961
  );
956
962
  }
957
963
  setToolSelections(newConfig);
@@ -995,7 +1001,7 @@ function SidebarComponent(props: any) {
995
1001
  newConfig.extensions[extensionId] = {};
996
1002
  }
997
1003
  newConfig.extensions[extensionId][toolsetId] = structuredClone(
998
- extensionToolset.tools
1004
+ extensionToolset.tools.map((tool: any) => tool.name)
999
1005
  );
1000
1006
  setToolSelections(newConfig);
1001
1007
  }
@@ -1915,12 +1921,13 @@ function SidebarComponent(props: any) {
1915
1921
  </div>
1916
1922
  <div className="mode-tools-popover-tool-list">
1917
1923
  <div className="mode-tools-group-header">Built-in</div>
1918
- <div className="mode-tools-group">
1924
+ <div className="mode-tools-group mode-tools-group-built-in">
1919
1925
  {toolConfig.builtinToolsets.map((toolset: any) => (
1920
1926
  <CheckBoxItem
1921
1927
  key={toolset.id}
1922
1928
  label={toolset.name}
1923
1929
  checked={getBuiltinToolsetState(toolset.id)}
1930
+ header={true}
1924
1931
  onClick={() => {
1925
1932
  setBuiltinToolsetState(
1926
1933
  toolset.id,
@@ -1937,19 +1944,21 @@ function SidebarComponent(props: any) {
1937
1944
  <div className="mode-tools-group">
1938
1945
  <CheckBoxItem
1939
1946
  label={mcpServer.id}
1947
+ header={true}
1940
1948
  checked={getMCPServerState(mcpServer.id)}
1941
1949
  onClick={() => onMCPServerClicked(mcpServer.id)}
1942
1950
  />
1943
1951
  {mcpServer.tools.map((tool: any, index: number) => (
1944
1952
  <CheckBoxItem
1945
- label={tool}
1953
+ label={tool.name}
1954
+ title={tool.description}
1946
1955
  indent={1}
1947
- checked={getMCPServerToolState(mcpServer.id, tool)}
1956
+ checked={getMCPServerToolState(mcpServer.id, tool.name)}
1948
1957
  onClick={() =>
1949
1958
  setMCPServerToolState(
1950
1959
  mcpServer.id,
1951
- tool,
1952
- !getMCPServerToolState(mcpServer.id, tool)
1960
+ tool.name,
1961
+ !getMCPServerToolState(mcpServer.id, tool.name)
1953
1962
  )
1954
1963
  }
1955
1964
  />
@@ -1963,6 +1972,7 @@ function SidebarComponent(props: any) {
1963
1972
  <div className="mode-tools-group">
1964
1973
  <CheckBoxItem
1965
1974
  label={`${extension.name} (${extension.id})`}
1975
+ header={true}
1966
1976
  checked={getExtensionState(extension.id)}
1967
1977
  onClick={() => onExtensionClicked(extension.id)}
1968
1978
  />
@@ -1981,22 +1991,23 @@ function SidebarComponent(props: any) {
1981
1991
  />
1982
1992
  {toolset.tools.map((tool: any, index: number) => (
1983
1993
  <CheckBoxItem
1984
- label={tool}
1994
+ label={tool.name}
1995
+ title={tool.description}
1985
1996
  indent={2}
1986
1997
  checked={getExtensionToolsetToolState(
1987
1998
  extension.id,
1988
1999
  toolset.id,
1989
- tool
2000
+ tool.name
1990
2001
  )}
1991
2002
  onClick={() =>
1992
2003
  setExtensionToolsetToolState(
1993
2004
  extension.id,
1994
2005
  toolset.id,
1995
- tool,
2006
+ tool.name,
1996
2007
  !getExtensionToolsetToolState(
1997
2008
  extension.id,
1998
2009
  toolset.id,
1999
- tool
2010
+ tool.name
2000
2011
  )
2001
2012
  )
2002
2013
  }
package/style/base.css CHANGED
@@ -370,6 +370,10 @@ pre:has(.code-block-header) {
370
370
  flex-direction: column;
371
371
  }
372
372
 
373
+ .mode-tools-popover-title {
374
+ font-weight: bold;
375
+ }
376
+
373
377
  .mode-tools-popover-header {
374
378
  display: flex;
375
379
  align-items: center;
@@ -758,10 +762,7 @@ svg.access-token-warning {
758
762
 
759
763
  .checkbox-item {
760
764
  display: flex;
761
- align-items: center;
762
- gap: 5px;
763
- margin: 0 2px;
764
- padding: 3px 2px;
765
+ flex-direction: column;
765
766
  cursor: pointer;
766
767
  }
767
768
 
@@ -789,4 +790,32 @@ svg.access-token-warning {
789
790
  width: 16px;
790
791
  height: 16px;
791
792
  color: var(--jp-brand-color1);
793
+ padding-top: 1px;
794
+ }
795
+
796
+ .checkbox-item-toggle {
797
+ display: flex;
798
+ align-items: center;
799
+ gap: 5px;
800
+ margin: 0 2px;
801
+ padding: 3px 2px;
802
+ color: var(--jp-ui-font-color1);
803
+ }
804
+
805
+ .checkbox-item-header .checkbox-item-toggle {
806
+ color: var(--jp-ui-font-color0);
807
+ font-weight: bold;
808
+ }
809
+
810
+ .mode-tools-group-built-in .checkbox-item-toggle {
811
+ font-weight: normal;
812
+ }
813
+
814
+ .checkbox-item-description {
815
+ padding-left: 25px;
816
+ color: var(--jp-ui-font-color2);
817
+ padding-bottom: 4px;
818
+ overflow: hidden;
819
+ text-overflow: ellipsis;
820
+ white-space: nowrap;
792
821
  }