feat: add tool management features including toggle and description updates (#163)

Co-authored-by: samanhappy@qq.com <my6051199>
2025-12-24 02:39:19 -05:00 · 2025-06-04 16:03:45 +08:00
parent 4039a85ee1
commit 503b60edb7
12 changed files with 518 additions and 57 deletions
--- a/frontend/src/components/ServerCard.tsx
+++ b/frontend/src/components/ServerCard.tsx
@@ -11,10 +11,11 @@ interface ServerCardProps {
  server: Server
  onRemove: (serverName: string) => void
  onEdit: (server: Server) => void
-  onToggle?: (server: Server, enabled: boolean) => void
+  onToggle?: (server: Server, enabled: boolean) => Promise<boolean>
+  onRefresh?: () => void
 }

-const ServerCard = ({ server, onRemove, onEdit, onToggle }: ServerCardProps) => {
+const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCardProps) => {
  const { t } = useTranslation()
  const { showToast } = useToast()
  const [isExpanded, setIsExpanded] = useState(false)
@@ -102,6 +103,29 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle }: ServerCardProps) =>
    setShowDeleteDialog(false)
  }

+  const handleToolToggle = async (toolName: string, enabled: boolean) => {
+    try {
+      const { toggleTool } = await import('@/services/toolService')
+      const result = await toggleTool(server.name, toolName, enabled)
+
+      if (result.success) {
+        showToast(
+          t(enabled ? 'tool.enableSuccess' : 'tool.disableSuccess', { name: toolName }),
+          'success'
+        )
+        // Trigger refresh to update the tool's state in the UI
+        if (onRefresh) {
+          onRefresh()
+        }
+      } else {
+        showToast(result.error || t('tool.toggleFailed'), 'error')
+      }
+    } catch (error) {
+      console.error('Error toggling tool:', error)
+      showToast(t('tool.toggleFailed'), 'error')
+    }
+  }
+
  return (
    <>
      <div className={`bg-white shadow rounded-lg p-6 mb-6 ${server.enabled === false ? 'opacity-60' : ''}`}>
@@ -217,7 +241,7 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle }: ServerCardProps) =>
            <h6 className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`}>{t('server.tools')}</h6>
            <div className="space-y-4">
              {server.tools.map((tool, index) => (
-                <ToolCard key={index} server={server.name} tool={tool} />
+                <ToolCard key={index} server={server.name} tool={tool} onToggle={handleToolToggle} />
              ))}
            </div>
          </div>
--- a/frontend/src/components/ui/ToolCard.tsx
+++ b/frontend/src/components/ui/ToolCard.tsx
@@ -1,22 +1,48 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Tool } from '@/types'
-import { ChevronDown, ChevronRight, Play, Loader } from '@/components/icons/LucideIcons'
-import { callTool, ToolCallResult } from '@/services/toolService'
+import { ChevronDown, ChevronRight, Play, Loader, Edit, Check } from '@/components/icons/LucideIcons'
+import { callTool, ToolCallResult, updateToolDescription } from '@/services/toolService'
+import { Switch } from './ToggleGroup'
 import DynamicForm from './DynamicForm'
 import ToolResult from './ToolResult'

 interface ToolCardProps {
  server: string
  tool: Tool
+  onToggle?: (toolName: string, enabled: boolean) => void
+  onDescriptionUpdate?: (toolName: string, description: string) => void
 }

-const ToolCard = ({ tool, server }: ToolCardProps) => {
+const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps) => {
  const { t } = useTranslation()
  const [isExpanded, setIsExpanded] = useState(false)
  const [showRunForm, setShowRunForm] = useState(false)
  const [isRunning, setIsRunning] = useState(false)
  const [result, setResult] = useState<ToolCallResult | null>(null)
+  const [isEditingDescription, setIsEditingDescription] = useState(false)
+  const [customDescription, setCustomDescription] = useState(tool.description || '')
+  const descriptionInputRef = useRef<HTMLInputElement>(null)
+  const descriptionTextRef = useRef<HTMLSpanElement>(null)
+  const [textWidth, setTextWidth] = useState<number>(0)
+
+  // Focus the input when editing mode is activated
+  useEffect(() => {
+    if (isEditingDescription && descriptionInputRef.current) {
+      descriptionInputRef.current.focus()
+      // Set input width to match text width
+      if (textWidth > 0) {
+        descriptionInputRef.current.style.width = `${textWidth + 20}px` // Add some padding
+      }
+    }
+  }, [isEditingDescription, textWidth])
+
+  // Measure text width when not editing
+  useEffect(() => {
+    if (!isEditingDescription && descriptionTextRef.current) {
+      setTextWidth(descriptionTextRef.current.offsetWidth)
+    }
+  }, [isEditingDescription, customDescription])

  // Generate a unique key for localStorage based on tool name and server
  const getStorageKey = useCallback(() => {
@@ -28,6 +54,49 @@ const ToolCard = ({ tool, server }: ToolCardProps) => {
    localStorage.removeItem(getStorageKey())
  }, [getStorageKey])

+  const handleToggle = (enabled: boolean) => {
+    if (onToggle) {
+      onToggle(tool.name, enabled)
+    }
+  }
+
+  const handleDescriptionEdit = () => {
+    setIsEditingDescription(true)
+  }
+
+  const handleDescriptionSave = async () => {
+    try {
+      const result = await updateToolDescription(server, tool.name, customDescription)
+      if (result.success) {
+        setIsEditingDescription(false)
+        if (onDescriptionUpdate) {
+          onDescriptionUpdate(tool.name, customDescription)
+        }
+      } else {
+        // Revert on error
+        setCustomDescription(tool.description || '')
+        console.error('Failed to update tool description:', result.error)
+      }
+    } catch (error) {
+      console.error('Error updating tool description:', error)
+      setCustomDescription(tool.description || '')
+      setIsEditingDescription(false)
+    }
+  }
+
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomDescription(e.target.value)
+  }
+
+  const handleDescriptionKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleDescriptionSave()
+    } else if (e.key === 'Escape') {
+      setCustomDescription(tool.description || '')
+      setIsEditingDescription(false)
+    }
+  }
+
  const handleRunTool = async (arguments_: Record<string, any>) => {
    setIsRunning(true)
    try {
@@ -68,13 +137,61 @@ const ToolCard = ({ tool, server }: ToolCardProps) => {
      >
        <div className="flex-1">
          <h3 className="text-lg font-medium text-gray-900">
-            {tool.name}
-            <span className="ml-2 text-sm font-normal text-gray-600">
-              {tool.description || t('tool.noDescription')}
+            {tool.name.replace(server + '/', '')}
+            <span className="ml-2 text-sm font-normal text-gray-600 inline-flex items-center">
+              {isEditingDescription ? (
+                <>
+                  <input
+                    ref={descriptionInputRef}
+                    type="text"
+                    className="px-2 py-1 border border-blue-300 rounded bg-white text-sm"
+                    value={customDescription}
+                    onChange={handleDescriptionChange}
+                    onKeyDown={handleDescriptionKeyDown}
+                    onClick={(e) => e.stopPropagation()}
+                    style={{
+                      minWidth: '100px',
+                      width: textWidth > 0 ? `${textWidth + 20}px` : 'auto'
+                    }}
+                  />
+                  <button
+                    className="ml-2 p-1 text-green-600 hover:text-green-800"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleDescriptionSave()
+                    }}
+                  >
+                    <Check size={16} />
+                  </button>
+                </>
+              ) : (
+                <>
+                  <span ref={descriptionTextRef}>{customDescription || t('tool.noDescription')}</span>
+                  <button
+                    className="ml-2 p-1 text-gray-500 hover:text-blue-600 transition-colors"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleDescriptionEdit()
+                    }}
+                  >
+                    <Edit size={14} />
+                  </button>
+                </>
+              )}
            </span>
          </h3>
        </div>
        <div className="flex items-center space-x-2">
+          <div
+            className="flex items-center space-x-2"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Switch
+              checked={tool.enabled ?? true}
+              onCheckedChange={handleToggle}
+              disabled={isRunning}
+            />
+          </div>
          <button
            onClick={(e) => {
              e.stopPropagation()
@@ -82,7 +199,7 @@ const ToolCard = ({ tool, server }: ToolCardProps) => {
              setShowRunForm(true)
            }}
            className="flex items-center space-x-1 px-3 py-1 text-sm text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors"
-            disabled={isRunning}
+            disabled={isRunning || !tool.enabled}
          >
            {isRunning ? (
              <Loader size={14} className="animate-spin" />
@@ -112,7 +229,7 @@ const ToolCard = ({ tool, server }: ToolCardProps) => {
          {/* Run Form */}
          {showRunForm && (
            <div className="border border-gray-300 rounded-lg p-4 bg-blue-50">
-              <h4 className="text-sm font-medium text-gray-900 mb-3">{t('tool.runToolWithName', { name: tool.name })}</h4>
+              <h4 className="text-sm font-medium text-gray-900 mb-3">{t('tool.runToolWithName', { name: tool.name.replace(server + '/', '') })}</h4>
              <DynamicForm
                schema={tool.inputSchema || { type: 'object' }}
                onSubmit={handleRunTool}
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -284,7 +284,11 @@
    "toolResult": "Tool result",
    "noParameters": "This tool does not require any parameters.",
    "selectOption": "Select an option",
-    "enterValue": "Enter {{type}} value"
+    "enterValue": "Enter {{type}} value",
+    "enabled": "Enabled",
+    "enableSuccess": "Tool {{name}} enabled successfully",
+    "disableSuccess": "Tool {{name}} disabled successfully",
+    "toggleFailed": "Failed to toggle tool status"
  },
  "settings": {
    "enableGlobalRoute": "Enable Global Route",
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -285,7 +285,11 @@
    "toolResult": "工具结果",
    "noParameters": "此工具不需要任何参数。",
    "selectOption": "选择一个选项",
-    "enterValue": "输入{{type}}值"
+    "enterValue": "输入{{type}}值",
+    "enabled": "已启用",
+    "enableSuccess": "工具 {{name}} 启用成功",
+    "disableSuccess": "工具 {{name}} 禁用成功",
+    "toggleFailed": "切换工具状态失败"
  },
  "settings": {
    "enableGlobalRoute": "启用全局路由",
--- a/frontend/src/pages/ServersPage.tsx
+++ b/frontend/src/pages/ServersPage.tsx
@@ -125,6 +125,7 @@ const ServersPage: React.FC = () => {
              onRemove={handleServerRemove}
              onEdit={handleEditClick}
              onToggle={handleServerToggle}
+              onRefresh={triggerRefresh}
            />
          ))}
        </div>
--- a/frontend/src/services/toolService.ts
+++ b/frontend/src/services/toolService.ts
@@ -70,3 +70,90 @@ export const callTool = async (
    };
  }
 };
+
+/**
+ * Toggle a tool's enabled state for a specific server
+ */
+export const toggleTool = async (
+  serverName: string,
+  toolName: string,
+  enabled: boolean,
+): Promise<{ success: boolean; error?: string }> => {
+  try {
+    const token = getToken();
+    if (!token) {
+      throw new Error('Authentication token not found. Please log in.');
+    }
+
+    const response = await fetch(getApiUrl(`/servers/${serverName}/tools/${toolName}/toggle`), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-auth-token': token,
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({ enabled }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return {
+      success: data.success,
+      error: data.success ? undefined : data.message,
+    };
+  } catch (error) {
+    console.error('Error toggling tool:', error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred',
+    };
+  }
+};
+
+/**
+ * Update a tool's description for a specific server
+ */
+export const updateToolDescription = async (
+  serverName: string,
+  toolName: string,
+  description: string,
+): Promise<{ success: boolean; error?: string }> => {
+  try {
+    const token = getToken();
+    if (!token) {
+      throw new Error('Authentication token not found. Please log in.');
+    }
+
+    const response = await fetch(
+      getApiUrl(`/servers/${serverName}/tools/${toolName}/description`),
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-auth-token': token,
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ description }),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return {
+      success: data.success,
+      error: data.success ? undefined : data.message,
+    };
+  } catch (error) {
+    console.error('Error updating tool description:', error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred',
+    };
+  }
+};
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -67,6 +67,7 @@ export interface Tool {
  name: string;
  description: string;
  inputSchema: ToolInputSchema;
+  enabled?: boolean;
 }

 // Server config types
@@ -78,6 +79,7 @@ export interface ServerConfig {
  env?: Record<string, string>;
  headers?: Record<string, string>;
  enabled?: boolean;
+  tools?: Record<string, { enabled: boolean; description?: string }>; // Tool-specific configurations with enable/disable state and custom descriptions
 }

 // Server types