Add tooltips on the tool item

Author: brichet

schema/chat.json

@@ -26,7 +26,7 @@
     "UseTool": {
       "type": "boolean",
       "title": "Use tool",
-      "description": "Whether to be able to use or not a tool in chat",
+      "description": "Whether tools are available in chat or not",
       "default": false
     }
   },

src/components/tool-select.tsx

@@ -6,10 +6,11 @@
 import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat';
 import { checkIcon } from '@jupyterlab/ui-components';
 import BuildIcon from '@mui/icons-material/Build';
-import { Menu, MenuItem, Typography } from '@mui/material';
+import { Menu, MenuItem, Tooltip, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { ChatHandler } from '../chat-handler';
+import { Tool } from '../tokens';
 
 const SELECT_ITEM_CLASS = 'jp-AIToolSelect-item';
 
@@ -23,10 +24,8 @@ export function toolSelect(
   const toolRegistry = chatContext.toolsRegistry;
 
   const [useTool, setUseTool] = useState<boolean>(chatContext.useTool);
-  const [selectedTool, setSelectedTool] = useState<string | null>(null);
-  const [toolNames, setToolNames] = useState<string[]>(
-    toolRegistry?.toolNames || []
-  );
+  const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
+  const [tools, setTools] = useState<Tool[]>(toolRegistry?.tools || []);
   const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -40,15 +39,15 @@ export function toolSelect(
   }, []);
 
   const onClick = useCallback(
-    (tool: string | null) => {
+    (tool: Tool | null) => {
       setSelectedTool(tool);
-      chatContext.tool = toolRegistry?.get(tool) || null;
+      chatContext.tool = tool;
     },
     [props.model]
   );
 
   useEffect(() => {
-    const updateTools = () => setToolNames(toolRegistry?.toolNames || []);
+    const updateTools = () => setTools(toolRegistry?.tools || []);
     toolRegistry?.toolsChanged.connect(updateTools);
     return () => {
       toolRegistry?.toolsChanged.disconnect(updateTools);
@@ -63,13 +62,13 @@ export function toolSelect(
     };
   }, [chatContext]);
 
-  return useTool && toolNames.length ? (
+  return useTool && tools.length ? (
     <>
       <TooltippedButton
         onClick={e => {
           openMenu(e.currentTarget);
         }}
-        disabled={!toolNames.length}
+        disabled={!tools.length}
         tooltip="Tool"
         buttonProps={{
           variant: 'contained',
@@ -105,42 +104,46 @@ export function toolSelect(
         }}
         sx={{
           '& .MuiMenuItem-root': {
-            gap: '4px',
-            padding: '6px'
+            padding: '0.5em',
+            paddingRight: '2em'
           }
         }}
       >
-        <MenuItem
-          className={SELECT_ITEM_CLASS}
-          onClick={e => {
-            onClick(null);
-            // prevent sending second message with no selection
-            e.stopPropagation();
-          }}
-        >
-          {selectedTool === null ? (
-            <checkIcon.react className={'lm-Menu-itemIcon'} />
-          ) : (
-            <div className={'lm-Menu-itemIcon'} />
-          )}
-          <Typography display="block">No tool</Typography>
-        </MenuItem>
-        {toolNames.map(tool => (
+        <Tooltip title={'Do not use a tool'}>
           <MenuItem
             className={SELECT_ITEM_CLASS}
             onClick={e => {
-              onClick(tool);
+              onClick(null);
               // prevent sending second message with no selection
               e.stopPropagation();
             }}
           >
-            {selectedTool === tool ? (
+            {selectedTool === null ? (
               <checkIcon.react className={'lm-Menu-itemIcon'} />
             ) : (
               <div className={'lm-Menu-itemIcon'} />
             )}
-            <Typography display="block">{tool}</Typography>
+            <Typography display="block">No tool</Typography>
           </MenuItem>
+        </Tooltip>
+        {tools.map(tool => (
+          <Tooltip title={tool.description}>
+            <MenuItem
+              className={SELECT_ITEM_CLASS}
+              onClick={e => {
+                onClick(tool);
+                // prevent sending second message with no selection
+                e.stopPropagation();
+              }}
+            >
+              {selectedTool === tool ? (
+                <checkIcon.react className={'lm-Menu-itemIcon'} />
+              ) : (
+                <div className={'lm-Menu-itemIcon'} />
+              )}
+              <Typography display="block">{tool.name}</Typography>
+            </MenuItem>
+          </Tooltip>
         ))}
       </Menu>
     </>

src/tokens.ts

@@ -169,9 +169,9 @@ export type Tool = StructuredToolInterface;
  */
 export interface IToolRegistry {
   /**
-   * The registered tool names.
+   * The registered tools.
    */
-  readonly toolNames: string[];
+  readonly tools: Tool[];
   /**
    * A signal triggered when the tools has changed;
    */

src/tool-registry.ts

@@ -3,10 +3,10 @@ import { IToolRegistry, Tool } from './tokens';
 
 export class ToolsRegistry implements IToolRegistry {
   /**
-   * The registered tool names.
+   * The registered tools.
    */
-  get toolNames(): string[] {
-    return this._tools.map(tool => tool.name);
+  get tools(): Tool[] {
+    return this._tools;
   }
 
   /**