feat: add configurable name separator for tools and prompts (#353)

2025-12-23 18:29:21 -05:00 · 2025-10-02 14:40:01 +08:00
parent 7685b9bca8
commit f6934a32dc
15 changed files with 170 additions and 32 deletions
--- a/frontend/src/components/ServerToolConfig.tsx
+++ b/frontend/src/components/ServerToolConfig.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IGroupServerConfig, Server, Tool } from '@/types';
 import { cn } from '@/utils/cn';
+import { useSettingsData } from '@/hooks/useSettingsData';

 interface ServerToolConfigProps {
  servers: Server[];
@@ -17,6 +18,7 @@ export const ServerToolConfig: React.FC<ServerToolConfigProps> = ({
  className
 }) => {
  const { t } = useTranslation();
+  const { nameSeparator } = useSettingsData();
  const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());

  // Normalize current value to IGroupServerConfig[] format
@@ -116,7 +118,7 @@ export const ServerToolConfig: React.FC<ServerToolConfigProps> = ({
    const server = availableServers.find(s => s.name === serverName);
    if (!server) return;

-    const allToolNames = server.tools?.map(tool => tool.name.replace(`${serverName}-`, '')) || [];
+    const allToolNames = server.tools?.map(tool => tool.name.replace(`${serverName}${nameSeparator}`, '')) || [];
    const serverConfig = normalizedValue.find(config => config.name === serverName);

    if (!serverConfig) {
@@ -279,7 +281,7 @@ export const ServerToolConfig: React.FC<ServerToolConfigProps> = ({

                  <div className="grid grid-cols-1 gap-2 max-h-32 overflow-y-auto">
                    {serverTools.map(tool => {
-                      const toolName = tool.name.replace(`${server.name}-`, '');
+                      const toolName = tool.name.replace(`${server.name}${nameSeparator}`, '');
                      const isToolChecked = isToolSelected(server.name, toolName);

                      return (
--- a/frontend/src/components/ui/PromptCard.tsx
+++ b/frontend/src/components/ui/PromptCard.tsx
@@ -4,6 +4,7 @@ import { Prompt } from '@/types'
 import { ChevronDown, ChevronRight, Play, Loader, Edit, Check } from '@/components/icons/LucideIcons'
 import { Switch } from './ToggleGroup'
 import { getPrompt, PromptCallResult } from '@/services/promptService'
+import { useSettingsData } from '@/hooks/useSettingsData'
 import DynamicForm from './DynamicForm'
 import PromptResult from './PromptResult'

@@ -16,6 +17,7 @@ interface PromptCardProps {

 const PromptCard = ({ prompt, server, onToggle, onDescriptionUpdate }: PromptCardProps) => {
  const { t } = useTranslation()
+  const { nameSeparator } = useSettingsData()
  const [isExpanded, setIsExpanded] = useState(false)
  const [showRunForm, setShowRunForm] = useState(false)
  const [isRunning, setIsRunning] = useState(false)
@@ -154,7 +156,7 @@ const PromptCard = ({ prompt, server, onToggle, onDescriptionUpdate }: PromptCar
      >
        <div className="flex-1">
          <h3 className="text-lg font-medium text-gray-900">
-            {prompt.name.replace(server + '-', '')}
+            {prompt.name.replace(server + nameSeparator, '')}
            {prompt.title && (
              <span className="ml-2 text-sm font-normal text-gray-600">
                {prompt.title}
@@ -249,7 +251,7 @@ const PromptCard = ({ prompt, server, onToggle, onDescriptionUpdate }: PromptCar
                onCancel={handleCancelRun}
                loading={isRunning}
                storageKey={getStorageKey()}
-                title={t('prompt.runPromptWithName', { name: prompt.name.replace(server + '-', '') })}
+                title={t('prompt.runPromptWithName', { name: prompt.name.replace(server + nameSeparator, '') })}
              />
              {/* Prompt Result */}
              {result && (
--- a/frontend/src/components/ui/ToolCard.tsx
+++ b/frontend/src/components/ui/ToolCard.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { Tool } from '@/types'
 import { ChevronDown, ChevronRight, Play, Loader, Edit, Check } from '@/components/icons/LucideIcons'
 import { callTool, ToolCallResult, updateToolDescription } from '@/services/toolService'
+import { useSettingsData } from '@/hooks/useSettingsData'
 import { Switch } from './ToggleGroup'
 import DynamicForm from './DynamicForm'
 import ToolResult from './ToolResult'
@@ -25,6 +26,7 @@ function isEmptyValue(value: any): boolean {

 const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps) => {
  const { t } = useTranslation()
+  const { nameSeparator } = useSettingsData()
  const [isExpanded, setIsExpanded] = useState(false)
  const [showRunForm, setShowRunForm] = useState(false)
  const [isRunning, setIsRunning] = useState(false)
@@ -148,7 +150,7 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
      >
        <div className="flex-1">
          <h3 className="text-lg font-medium text-gray-900">
-            {tool.name.replace(server + '-', '')}
+            {tool.name.replace(server + nameSeparator, '')}
            <span className="ml-2 text-sm font-normal text-gray-600 inline-flex items-center">
              {isEditingDescription ? (
                <>
@@ -246,7 +248,7 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
                onCancel={handleCancelRun}
                loading={isRunning}
                storageKey={getStorageKey()}
-                title={t('tool.runToolWithName', { name: tool.name.replace(server + '-', '') })}
+                title={t('tool.runToolWithName', { name: tool.name.replace(server + nameSeparator, '') })}
              />
              {/* Tool Result */}
              {result && (
--- a/frontend/src/hooks/useSettingsData.ts
+++ b/frontend/src/hooks/useSettingsData.ts
@@ -40,6 +40,7 @@ interface SystemSettings {
    install?: InstallConfig;
    smartRouting?: SmartRoutingConfig;
    mcpRouter?: MCPRouterConfig;
+    nameSeparator?: string;
  };
 }

@@ -84,6 +85,8 @@ export const useSettingsData = () => {
    baseUrl: 'https://api.mcprouter.to/v1',
  });

+  const [nameSeparator, setNameSeparator] = useState<string>('-');
+
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [refreshKey, setRefreshKey] = useState(0);
@@ -135,6 +138,9 @@ export const useSettingsData = () => {
          baseUrl: data.data.systemConfig.mcpRouter.baseUrl || 'https://api.mcprouter.to/v1',
        });
      }
+      if (data.success && data.data?.systemConfig?.nameSeparator !== undefined) {
+        setNameSeparator(data.data.systemConfig.nameSeparator);
+      }
    } catch (error) {
      console.error('Failed to fetch settings:', error);
      setError(error instanceof Error ? error.message : 'Failed to fetch settings');
@@ -384,6 +390,36 @@ export const useSettingsData = () => {
    }
  };

+  // Update name separator
+  const updateNameSeparator = async (value: string) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const data = await apiPut('/system-config', {
+        nameSeparator: value,
+      });
+
+      if (data.success) {
+        setNameSeparator(value);
+        showToast(t('settings.restartRequired'), 'info');
+        return true;
+      } else {
+        showToast(data.message || t('errors.failedToUpdateSystemConfig'));
+        return false;
+      }
+    } catch (error) {
+      console.error('Failed to update name separator:', error);
+      const errorMessage =
+        error instanceof Error ? error.message : 'Failed to update name separator';
+      setError(errorMessage);
+      showToast(errorMessage);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
  // Fetch settings when the component mounts or refreshKey changes
  useEffect(() => {
    fetchSettings();
@@ -404,6 +440,7 @@ export const useSettingsData = () => {
    installConfig,
    smartRoutingConfig,
    mcpRouterConfig,
+    nameSeparator,
    loading,
    error,
    setError,
@@ -416,5 +453,6 @@ export const useSettingsData = () => {
    updateRoutingConfigBatch,
    updateMCPRouterConfig,
    updateMCPRouterConfigBatch,
+    updateNameSeparator,
  };
 };
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -48,6 +48,8 @@ const SettingsPage: React.FC = () => {
    baseUrl: 'https://api.mcprouter.to/v1',
  });

+  const [tempNameSeparator, setTempNameSeparator] = useState<string>('-');
+
  const {
    routingConfig,
    tempRoutingConfig,
@@ -55,13 +57,15 @@ const SettingsPage: React.FC = () => {
    installConfig: savedInstallConfig,
    smartRoutingConfig,
    mcpRouterConfig,
+    nameSeparator,
    loading,
    updateRoutingConfig,
    updateRoutingConfigBatch,
    updateInstallConfig,
    updateSmartRoutingConfig,
    updateSmartRoutingConfigBatch,
-    updateMCPRouterConfig
+    updateMCPRouterConfig,
+    updateNameSeparator,
  } = useSettingsData();

  // Update local installConfig when savedInstallConfig changes
@@ -95,15 +99,21 @@ const SettingsPage: React.FC = () => {
    }
  }, [mcpRouterConfig]);

+  // Update local tempNameSeparator when nameSeparator changes
+  useEffect(() => {
+    setTempNameSeparator(nameSeparator);
+  }, [nameSeparator]);
+
  const [sectionsVisible, setSectionsVisible] = useState({
    routingConfig: false,
    installConfig: false,
    smartRoutingConfig: false,
    mcpRouterConfig: false,
+    nameSeparator: false,
    password: false
  });

-  const toggleSection = (section: 'routingConfig' | 'installConfig' | 'smartRoutingConfig' | 'mcpRouterConfig' | 'password') => {
+  const toggleSection = (section: 'routingConfig' | 'installConfig' | 'smartRoutingConfig' | 'mcpRouterConfig' | 'nameSeparator' | 'password') => {
    setSectionsVisible(prev => ({
      ...prev,
      [section]: !prev[section]
@@ -181,6 +191,10 @@ const SettingsPage: React.FC = () => {
    await updateMCPRouterConfig(key, tempMCPRouterConfig[key]);
  };

+  const saveNameSeparator = async () => {
+    await updateNameSeparator(tempNameSeparator);
+  };
+
  const handleSmartRoutingEnabledChange = async (value: boolean) => {
    // If enabling Smart Routing, validate required fields and save any unsaved changes
    if (value) {
@@ -427,6 +441,48 @@ const SettingsPage: React.FC = () => {
        </div>
      </PermissionChecker>

+      {/* System Settings */}
+      <div className="bg-white shadow rounded-lg py-4 px-6 mb-6 dashboard-card">
+        <div
+          className="flex justify-between items-center cursor-pointer"
+          onClick={() => toggleSection('nameSeparator')}
+        >
+          <h2 className="font-semibold text-gray-800">{t('settings.systemSettings')}</h2>
+          <span className="text-gray-500">
+            {sectionsVisible.nameSeparator ? '▼' : '►'}
+          </span>
+        </div>
+
+        {sectionsVisible.nameSeparator && (
+          <div className="space-y-4 mt-4">
+            <div className="p-3 bg-gray-50 rounded-md">
+              <div className="mb-2">
+                <h3 className="font-medium text-gray-700">{t('settings.nameSeparatorLabel')}</h3>
+                <p className="text-sm text-gray-500">{t('settings.nameSeparatorDescription')}</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <input
+                  type="text"
+                  value={tempNameSeparator}
+                  onChange={(e) => setTempNameSeparator(e.target.value)}
+                  placeholder="-"
+                  className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
+                  disabled={loading}
+                  maxLength={5}
+                />
+                <button
+                  onClick={saveNameSeparator}
+                  disabled={loading}
+                  className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                >
+                  {t('common.save')}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
      {/* Route Configuration Settings */}
      <div className="bg-white shadow rounded-lg py-4 px-6 mb-6 dashboard-card">
        <div
--- a/frontend/src/services/configService.ts
+++ b/frontend/src/services/configService.ts
@@ -20,6 +20,7 @@ export interface SystemConfig {
    openaiApiKey?: string;
    openaiApiEmbeddingModel?: string;
  };
+  nameSeparator?: string;
 }

 export interface PublicConfigResponse {
@@ -96,3 +97,5 @@ export const shouldSkipAuth = async (): Promise<boolean> => {
    return false;
  }
 };
+
+