✨ Add tool category feature. #1362

✨ Add tool category feature. #1362

Author: jiangpeiling

backend/apps/tool_config_app.py

@@ -5,7 +5,7 @@
 from fastapi import APIRouter, Header, HTTPException
 from fastapi.responses import JSONResponse
 
-from consts.exceptions import MCPConnectionError, TimeoutException, NotFoundException
+from consts.exceptions import MCPConnectionError, NotFoundException
 from consts.model import ToolInstanceInfoRequest, ToolInstanceSearchRequest, ToolValidateRequest
 from services.tool_configuration_service import (
     search_tool_info_impl,
@@ -132,5 +132,5 @@ async def validate_tool(
         logger.error(f"Failed to validate tool: {e}")
         raise HTTPException(
             status_code=HTTPStatus.INTERNAL_SERVER_ERROR,
-            detail=f"Failed to validate tool: {str(e)}"
+            detail=str(e)
         )

backend/consts/model.py

@@ -245,6 +245,7 @@ class ToolInfo(BaseModel):
     class_name: str
     usage: Optional[str]
     origin_name: Optional[str] = None
+    category: Optional[str] = None
 
 
 # used in Knowledge Summary request

backend/database/db_models.py

@@ -177,6 +177,7 @@ class ToolInfo(TableBase):
     params = Column(JSON, doc="Tool parameter information (json)")
     inputs = Column(String(2048), doc="Prompt tool inputs description")
     output_type = Column(String(100), doc="Prompt tool output description")
+    category = Column(String(100), doc="Tool category description")
     is_available = Column(
         Boolean, doc="Whether the tool can be used under the current main service")
 

backend/services/tool_configuration_service.py

@@ -2,7 +2,6 @@
 import importlib
 import inspect
 import json
-import keyword
 import logging
 from typing import Any, List, Optional, Dict
 from urllib.parse import urljoin
@@ -102,6 +101,7 @@ def get_local_tools() -> List[ToolInfo]:
             inputs=json.dumps(getattr(tool_class, 'inputs'),
                               ensure_ascii=False),
             output_type=getattr(tool_class, 'output_type'),
+            category=getattr(tool_class, 'category'),
             class_name=tool_class.__name__,
             usage=None,
             origin_name=getattr(tool_class, 'name')
@@ -162,7 +162,8 @@ def _build_tool_info_from_langchain(obj) -> ToolInfo:
         output_type=output_type,
         class_name=tool_name,
         usage=None,
-        origin_name=tool_name
+        origin_name=tool_name,
+        category=None
     )
     return tool_info
 
@@ -298,7 +299,8 @@ async def get_tool_from_remote_mcp_server(mcp_server_name: str, remote_mcp_serve
                                      output_type="string",
                                      class_name=sanitized_tool_name,
                                      usage=mcp_server_name,
-                                     origin_name=tool.name)
+                                     origin_name=tool.name,
+                                     category=None)
                 tools_info.append(tool_info)
             return tools_info
     except Exception as e:
@@ -351,7 +353,8 @@ async def list_all_tools(tenant_id: str):
             "create_time": tool.get("create_time"),
             "usage": tool.get("usage"),
             "params": tool.get("params", []),
-            "inputs": tool.get("inputs", {})
+            "inputs": tool.get("inputs", {}),
+            "category": tool.get("category")
         }
         formatted_tools.append(formatted_tool)
 
@@ -665,10 +668,10 @@ async def validate_tool_impl(
 
     except NotFoundException as e:
         logger.error(f"Tool not found: {e}")
-        raise NotFoundException(f"Tool not found: {str(e)}")
+        raise NotFoundException(str(e))
     except MCPConnectionError as e:
         logger.error(f"MCP connection failed: {e}")
-        raise MCPConnectionError(f"MCP connection failed: {str(e)}")
+        raise MCPConnectionError(str(e))
     except Exception as e:
         logger.error(f"Validate Tool failed: {e}")
-        raise ToolExecutionException(f"Validate Tool failed: {str(e)}")
+        raise ToolExecutionException(str(e))

docker/init.sql

@@ -237,6 +237,7 @@ CREATE TABLE IF NOT EXISTS nexent.ag_tool_info_t (
     params JSON,
     inputs VARCHAR,
     output_type VARCHAR(100),
+    category VARCHAR(100),
     is_available BOOLEAN DEFAULT FALSE,
     create_time TIMESTAMP WITHOUT TIME ZONE DEFAULT CURRENT_TIMESTAMP,
     update_time TIMESTAMP WITHOUT TIME ZONE DEFAULT CURRENT_TIMESTAMP,

docker/sql/1013_add_tool_group_to_ag_tool_info.sql

@@ -0,0 +1,8 @@
+-- Add category column to ag_tool_info_t table
+-- This field stores the tool category information (search, file, email, terminal)
+
+ALTER TABLE nexent.ag_tool_info_t 
+ADD COLUMN IF NOT EXISTS category VARCHAR(100);
+
+-- Add comment to document the purpose of this field
+COMMENT ON COLUMN nexent.ag_tool_info_t.category IS 'Tool category information';

frontend/app/[locale]/setup/agents/components/tool/ToolConfigModal.tsx

@@ -51,6 +51,9 @@ export default function ToolConfigModal({
   const [parsedInputs, setParsedInputs] = useState<Record<string, any>>({});
   const [paramValues, setParamValues] = useState<Record<string, string>>({});
   const [dynamicInputParams, setDynamicInputParams] = useState<string[]>([]);
+  const [windowWidth, setWindowWidth] = useState<number>(0);
+  const [mainModalTop, setMainModalTop] = useState<number>(0);
+  const [mainModalRight, setMainModalRight] = useState<number>(0);
 
   // load tool config
   useEffect(() => {
@@ -118,6 +121,55 @@ export default function ToolConfigModal({
     }
   }, [isOpen, tool, mainAgentId, t]);
 
+  // Monitor window width for responsive positioning
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    // Set initial width
+    setWindowWidth(window.innerWidth);
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  // Calculate main modal position for tool test panel alignment
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const calculateMainModalPosition = () => {
+      const modalElement = document.querySelector(".ant-modal");
+      if (modalElement) {
+        const rect = modalElement.getBoundingClientRect();
+        setMainModalTop(rect.top);
+        setMainModalRight(rect.right);
+      }
+    };
+
+    // Delay calculation to ensure Modal is rendered
+    const timeoutId = setTimeout(calculateMainModalPosition, 100);
+
+    // Use ResizeObserver to track modal size changes
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const rect = entry.target.getBoundingClientRect();
+        setMainModalTop(rect.top);
+        setMainModalRight(rect.right);
+      }
+    });
+
+    const modalElement = document.querySelector(".ant-modal");
+    if (modalElement) {
+      observer.observe(modalElement);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+      observer.disconnect();
+    };
+  }, [isOpen]);
+
   // check required fields
   const checkRequiredFields = () => {
     if (!tool) return false;
@@ -572,8 +624,11 @@ export default function ToolConfigModal({
             className="tool-test-panel"
             style={{
               position: "fixed",
-              top: "10vh",
-              right: "5vw",
+              top: mainModalTop > 0 ? `${mainModalTop}px` : "10vh", // Align with main modal top or fallback to 10vh
+              left:
+                mainModalRight > 0
+                  ? `${mainModalRight + windowWidth * 0.05}px`
+                  : "calc(50% + 300px + 5vw)", // Position to the right of main modal with 5% viewport width gap
               width: "500px",
               height: "auto",
               maxHeight: "80vh",
@@ -759,4 +814,4 @@ export default function ToolConfigModal({
       )}
     </>
   );
-}
+}

frontend/app/[locale]/setup/agents/components/tool/ToolPool.tsx

@@ -12,13 +12,13 @@ import {
 } from "@ant-design/icons";
 
 import { TOOL_SOURCE_TYPES } from "@/const/agentConfig";
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from "@/components/ui/tooltip";
 import log from "@/lib/logger";
-import { Tool, ToolPoolProps, ToolGroup } from "@/types/agentConfig";
+import {
+  Tool,
+  ToolPoolProps,
+  ToolGroup,
+  ToolSubGroup,
+} from "@/types/agentConfig";
 import {
   fetchTools,
   searchToolConfig,
@@ -56,6 +56,7 @@ function ToolPool({
   const [isMcpModalOpen, setIsMcpModalOpen] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [activeTabKey, setActiveTabKey] = useState<string>("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
 
   // Use useMemo to cache tool grouping
   const toolGroups = useMemo(() => {
@@ -100,6 +101,37 @@ function ToolPool({
         return a.create_time.localeCompare(b.create_time);
       });
 
+      // Create secondary grouping for local tools
+      let subGroups: ToolSubGroup[] | undefined;
+      if (key === TOOL_SOURCE_TYPES.LOCAL) {
+        const categoryMap = new Map<string, Tool[]>();
+
+        sortedTools.forEach((tool) => {
+          const category =
+            tool.category && tool.category.trim() !== ""
+              ? tool.category
+              : t("toolPool.category.other");
+          if (!categoryMap.has(category)) {
+            categoryMap.set(category, []);
+          }
+          categoryMap.get(category)!.push(tool);
+        });
+
+        subGroups = Array.from(categoryMap.entries())
+          .map(([category, categoryTools]) => ({
+            key: category,
+            label: category,
+            tools: categoryTools.sort((a, b) => a.name.localeCompare(b.name)), // Sort by name alphabetically
+          }))
+          .sort((a, b) => {
+            // Put "Other" category at the end
+            const otherKey = t("toolPool.category.other");
+            if (a.key === otherKey) return 1;
+            if (b.key === otherKey) return -1;
+            return a.label.localeCompare(b.label); // Sort other categories alphabetically
+          });
+      }
+
       groups.push({
         key,
         label: key.startsWith("mcp-")
@@ -110,6 +142,7 @@ function ToolPool({
           ? t("toolPool.group.langchain")
           : key,
         tools: sortedTools,
+        subGroups,
       });
     });
 
@@ -132,6 +165,20 @@ function ToolPool({
     }
   }, [toolGroups, activeTabKey]);
 
+  // Set default category selection for local tools
+  useEffect(() => {
+    const localGroup = toolGroups.find(
+      (group) => group.key === TOOL_SOURCE_TYPES.LOCAL
+    );
+    if (
+      localGroup?.subGroups &&
+      localGroup.subGroups.length > 0 &&
+      !selectedCategory
+    ) {
+      setSelectedCategory(localGroup.subGroups[0].key);
+    }
+  }, [toolGroups, selectedCategory]);
+
   // Use useMemo to cache the selected tool ID set to improve lookup efficiency
   const selectedToolIds = useMemo(() => {
     return new Set(selectedTools.map((tool) => tool.id));
@@ -511,17 +558,94 @@ function ToolPool({
       ),
       children: (
         <div
-          className="flex flex-col gap-3 pr-2"
+          className="flex h-full flex-col sm:flex-row"
           style={{
             height: "100%",
-            overflowY: "auto",
-            padding: "8px 0",
-            maxHeight: "100%",
+            overflow: "hidden",
           }}
         >
-          {group.tools.map((tool) => (
-            <ToolItem key={tool.id} tool={tool} />
-          ))}
+          {group.subGroups ? (
+            <>
+              {/* Left sidebar - Category navigation */}
+              <div className="w-auto min-w-fit border-r border-gray-200 flex flex-col hidden sm:flex">
+                <div className="flex-1 overflow-y-auto">
+                  <div className="px-2 py-2">
+                    {/* Individual categories */}
+                    {group.subGroups.map((subGroup) => (
+                      <div key={subGroup.key}>
+                        <div
+                          className={`h-14 flex items-center px-2 cursor-pointer transition-colors ${
+                            selectedCategory === subGroup.key
+                              ? "text-blue-600 font-medium"
+                              : "text-gray-700 font-normal"
+                          }`}
+                          onClick={() => setSelectedCategory(subGroup.key)}
+                        >
+                          <div className="whitespace-nowrap">
+                            {subGroup.label}
+                          </div>
+                        </div>
+                        <div className="border-b border-gray-200 -mx-2"></div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* Mobile category selector */}
+              <div className="sm:hidden w-full mb-2">
+                <select
+                  value={selectedCategory}
+                  onChange={(e) => setSelectedCategory(e.target.value)}
+                  className="w-full p-2 text-sm border border-gray-300 rounded-md bg-white"
+                >
+                  {group.subGroups.map((subGroup) => (
+                    <option key={subGroup.key} value={subGroup.key}>
+                      {subGroup.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Right content - Tool list */}
+              <div className="flex-1 overflow-hidden">
+                <div
+                  className="h-full overflow-y-auto p-2"
+                  style={{
+                    maxHeight: "100%",
+                  }}
+                >
+                  {(() => {
+                    const selectedSubGroup = group.subGroups.find(
+                      (sg) => sg.key === selectedCategory
+                    );
+                    return selectedSubGroup ? (
+                      <div className="space-y-2">
+                        {selectedSubGroup.tools.map((tool) => (
+                          <ToolItem key={tool.id} tool={tool} />
+                        ))}
+                      </div>
+                    ) : null;
+                  })()}
+                </div>
+              </div>
+            </>
+          ) : (
+            // Regular layout for non-local tools
+            <div
+              className="flex flex-col gap-3 pr-2 flex-1"
+              style={{
+                height: "100%",
+                overflowY: "auto",
+                padding: "8px 0",
+                maxHeight: "100%",
+              }}
+            >
+              {group.tools.map((tool) => (
+                <ToolItem key={tool.id} tool={tool} />
+              ))}
+            </div>
+          )}
         </div>
       ),
     };