Merge pull request #2524 from SiYue-ZO/feature/sogou-web-search-default

Add configurable Sogou-backed web search

web/frontend/src/api/tools.ts

@@ -17,6 +17,31 @@ interface ToolActionResponse {
   status: string
 }
 
+export interface WebSearchProviderOption {
+  id: string
+  label: string
+  configured: boolean
+  current: boolean
+  requires_auth: boolean
+}
+
+export interface WebSearchProviderConfig {
+  enabled: boolean
+  max_results: number
+  base_url?: string
+  api_key?: string
+  api_key_set?: boolean
+}
+
+export interface WebSearchConfigResponse {
+  provider: string
+  current_service: string
+  prefer_native: boolean
+  proxy?: string
+  providers: WebSearchProviderOption[]
+  settings: Record<string, WebSearchProviderConfig>
+}
+
 async function request<T>(path: string, options?: RequestInit): Promise<T> {
   const res = await launcherFetch(path, options)
   if (!res.ok) {
@@ -56,3 +81,17 @@ export async function setToolEnabled(
     },
   )
 }
+
+export async function getWebSearchConfig(): Promise<WebSearchConfigResponse> {
+  return request<WebSearchConfigResponse>("/api/tools/web-search-config")
+}
+
+export async function updateWebSearchConfig(
+  payload: WebSearchConfigResponse,
+): Promise<WebSearchConfigResponse> {
+  return request<WebSearchConfigResponse>("/api/tools/web-search-config", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  })
+}

web/frontend/src/components/agent/tools/tools-page.tsx

@@ -1,11 +1,21 @@
 import { IconSearch } from "@tabler/icons-react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
-import { type ToolSupportItem, getTools, setToolEnabled } from "@/api/tools"
+import {
+  getTools,
+  getWebSearchConfig,
+  setToolEnabled,
+  type ToolSupportItem,
+  type WebSearchConfigResponse,
+  updateWebSearchConfig,
+} from "@/api/tools"
 import { PageHeader } from "@/components/page-header"
+import { maskedSecretPlaceholder } from "@/components/secret-placeholder"
+import { KeyInput } from "@/components/shared-form"
+import { Button } from "@/components/ui/button"
 import {
   Card,
   CardContent,
@@ -33,9 +43,25 @@ export function ToolsPage() {
     queryKey: ["tools"],
     queryFn: getTools,
   })
+  const {
+    data: webSearchData,
+    isLoading: isWebSearchLoading,
+    error: webSearchError,
+  } = useQuery({
+    queryKey: ["tools", "web-search-config"],
+    queryFn: getWebSearchConfig,
+  })
 
   const [searchQuery, setSearchQuery] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
+  const [webSearchDraft, setWebSearchDraft] =
+    useState<WebSearchConfigResponse | null>(null)
+
+  useEffect(() => {
+    if (webSearchData) {
+      setWebSearchDraft(webSearchData)
+    }
+  }, [webSearchData])
 
   const toggleMutation = useMutation({
     mutationFn: async ({ name, enabled }: { name: string; enabled: boolean }) =>
@@ -58,6 +84,24 @@ export function ToolsPage() {
     },
   })
 
+  const webSearchMutation = useMutation({
+    mutationFn: updateWebSearchConfig,
+    onSuccess: (updated) => {
+      setWebSearchDraft(updated)
+      toast.success(t("pages.agent.tools.web_search.save_success"))
+      void queryClient.invalidateQueries({ queryKey: ["tools", "web-search-config"] })
+      void queryClient.invalidateQueries({ queryKey: ["tools"] })
+      void refreshGatewayState({ force: true })
+    },
+    onError: (err) => {
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : t("pages.agent.tools.web_search.save_error"),
+      )
+    },
+  })
+
   // Filter and group tools
   const { groupedTools, totalFilteredCount } = useMemo(() => {
     if (!data) return { groupedTools: [], totalFilteredCount: 0 }
@@ -91,12 +135,254 @@ export function ToolsPage() {
     }
   }, [data, searchQuery, statusFilter])
 
+  const providerLabelMap = useMemo(() => {
+    const entries = webSearchDraft?.providers ?? []
+    return new Map(entries.map((item) => [item.id, item.label]))
+  }, [webSearchDraft])
+
+  const currentProviderLabel = webSearchDraft?.current_service
+    ? (providerLabelMap.get(webSearchDraft.current_service) ??
+      webSearchDraft.current_service)
+    : t("pages.agent.tools.web_search.none")
+
+  const updateDraft = (
+    updater: (current: WebSearchConfigResponse) => WebSearchConfigResponse,
+  ) => {
+    setWebSearchDraft((current) => (current ? updater(current) : current))
+  }
+
   return (
     <div className="bg-background flex h-full flex-col">
       <PageHeader title={t("navigation.tools")} />
 
       <div className="flex-1 overflow-auto px-6 py-6">
         <div className="mx-auto w-full max-w-6xl space-y-8">
+          {webSearchError ? (
+            <Card className="border-destructive/50 bg-destructive/10 cursor-default">
+              <CardHeader>
+                <CardTitle>{t("pages.agent.tools.web_search.title")}</CardTitle>
+                <CardDescription>{t("pages.agent.tools.web_search.load_error")}</CardDescription>
+              </CardHeader>
+            </Card>
+          ) : isWebSearchLoading || !webSearchDraft ? (
+            <Card className="border-border/60 shadow-none">
+              <CardHeader>
+                <Skeleton className="h-5 w-48" />
+                <Skeleton className="h-4 w-80" />
+              </CardHeader>
+              <CardContent className="grid gap-4 lg:grid-cols-2">
+                <Skeleton className="h-9 w-full" />
+                <Skeleton className="h-9 w-full" />
+                <Skeleton className="h-24 w-full lg:col-span-2" />
+              </CardContent>
+            </Card>
+          ) : (
+            <Card className="border-border/60 shadow-none">
+              <CardHeader>
+                <CardTitle>{t("pages.agent.tools.web_search.title")}</CardTitle>
+                <CardDescription>
+                  {t("pages.agent.tools.web_search.description")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="grid gap-4 lg:grid-cols-3">
+                  <div className="space-y-2">
+                    <div className="text-sm font-medium">
+                      {t("pages.agent.tools.web_search.current_service")}
+                    </div>
+                    <div className="text-muted-foreground rounded-md border px-3 py-2 text-sm">
+                      {currentProviderLabel}
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="text-sm font-medium">
+                      {t("pages.agent.tools.web_search.provider")}
+                    </div>
+                    <Select
+                      value={webSearchDraft.provider}
+                      onValueChange={(value) =>
+                        updateDraft((current) => ({ ...current, provider: value }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {webSearchDraft.providers.map((provider) => (
+                          <SelectItem key={provider.id} value={provider.id}>
+                            {provider.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="text-sm font-medium">
+                      {t("pages.agent.tools.web_search.proxy")}
+                    </div>
+                    <Input
+                      value={webSearchDraft.proxy ?? ""}
+                      onChange={(e) =>
+                        updateDraft((current) => ({
+                          ...current,
+                          proxy: e.target.value,
+                        }))
+                      }
+                      placeholder="http://127.0.0.1:7890"
+                    />
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between rounded-md border px-4 py-3">
+                  <div>
+                    <div className="text-sm font-medium">
+                      {t("pages.agent.tools.web_search.prefer_native")}
+                    </div>
+                    <div className="text-muted-foreground text-xs">
+                      {t("pages.agent.tools.web_search.prefer_native_hint")}
+                    </div>
+                  </div>
+                  <Switch
+                    checked={webSearchDraft.prefer_native}
+                    onCheckedChange={(checked) =>
+                      updateDraft((current) => ({
+                        ...current,
+                        prefer_native: checked,
+                      }))
+                    }
+                  />
+                </div>
+
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {Object.entries(webSearchDraft.settings).map(([providerId, settings]) => {
+                    const providerLabel = providerLabelMap.get(providerId) ?? providerId
+                    const apiKeyPlaceholder = maskedSecretPlaceholder(
+                      settings.api_key_set ? `${providerId}-configured` : "",
+                      t("pages.agent.tools.web_search.api_key_placeholder"),
+                    )
+
+                    return (
+                      <Card key={providerId} className="border-border/60 shadow-none">
+                        <CardHeader className="pb-3">
+                          <div className="flex items-center justify-between gap-3">
+                            <div>
+                              <CardTitle className="text-base">{providerLabel}</CardTitle>
+                              <CardDescription className="mt-1 text-xs">
+                                {t("pages.agent.tools.web_search.provider_hint")}
+                              </CardDescription>
+                            </div>
+                            <Switch
+                              checked={settings.enabled}
+                              onCheckedChange={(checked) =>
+                                updateDraft((current) => ({
+                                  ...current,
+                                  settings: {
+                                    ...current.settings,
+                                    [providerId]: {
+                                      ...current.settings[providerId],
+                                      enabled: checked,
+                                    },
+                                  },
+                                }))
+                              }
+                            />
+                          </div>
+                        </CardHeader>
+                        <CardContent className="space-y-3">
+                          <div className="space-y-2">
+                            <div className="text-sm font-medium">
+                              {t("pages.agent.tools.web_search.max_results")}
+                            </div>
+                            <Input
+                              type="number"
+                              min={1}
+                              max={10}
+                              value={settings.max_results || 5}
+                              onChange={(e) =>
+                                updateDraft((current) => ({
+                                  ...current,
+                                  settings: {
+                                    ...current.settings,
+                                    [providerId]: {
+                                      ...current.settings[providerId],
+                                      max_results: Number(e.target.value) || 0,
+                                    },
+                                  },
+                                }))
+                              }
+                            />
+                          </div>
+                          {(providerId === "tavily" ||
+                            providerId === "searxng" ||
+                            providerId === "glm_search" ||
+                            providerId === "baidu_search") && (
+                            <div className="space-y-2">
+                              <div className="text-sm font-medium">
+                                {t("pages.agent.tools.web_search.base_url")}
+                              </div>
+                              <Input
+                                value={settings.base_url ?? ""}
+                                onChange={(e) =>
+                                  updateDraft((current) => ({
+                                    ...current,
+                                    settings: {
+                                      ...current.settings,
+                                      [providerId]: {
+                                        ...current.settings[providerId],
+                                        base_url: e.target.value,
+                                      },
+                                    },
+                                  }))
+                                }
+                                placeholder={t("pages.agent.tools.web_search.base_url_placeholder")}
+                              />
+                            </div>
+                          )}
+                          {(providerId === "brave" ||
+                            providerId === "tavily" ||
+                            providerId === "perplexity" ||
+                            providerId === "glm_search" ||
+                            providerId === "baidu_search") && (
+                            <div className="space-y-2">
+                              <div className="text-sm font-medium">
+                                {t("pages.agent.tools.web_search.api_key")}
+                              </div>
+                              <KeyInput
+                                value={settings.api_key ?? ""}
+                                onChange={(value) =>
+                                  updateDraft((current) => ({
+                                    ...current,
+                                    settings: {
+                                      ...current.settings,
+                                      [providerId]: {
+                                        ...current.settings[providerId],
+                                        api_key: value,
+                                      },
+                                    },
+                                  }))
+                                }
+                                placeholder={apiKeyPlaceholder}
+                              />
+                            </div>
+                          )}
+                        </CardContent>
+                      </Card>
+                    )
+                  })}
+                </div>
+
+                <div className="flex justify-end">
+                  <Button
+                    onClick={() => webSearchMutation.mutate(webSearchDraft)}
+                    disabled={webSearchMutation.isPending}
+                  >
+                    {t("pages.agent.tools.web_search.save")}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
           {/* Header & Description */}
           <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-end">
             {/* Filters Toolbar */}

web/frontend/src/i18n/index.ts

@@ -7,6 +7,8 @@ import i18n from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
 import { initReactI18next } from "react-i18next"
 
+import { launcherFetch } from "@/api/http"
+
 import en from "./locales/en.json"
 import zh from "./locales/zh.json"
 
@@ -44,6 +46,14 @@ i18n.on("languageChanged", (lng) => {
   } else {
     dayjs.locale("en")
   }
+
+  void launcherFetch("/api/ui/language", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ language: lng }),
+  }).catch(() => {
+    // Keep UI language changes responsive even if backend sync fails.
+  })
 })
 
 export default i18n

web/frontend/src/i18n/locales/en.json

@@ -533,6 +533,26 @@
         "enable_success": "Tool enabled.",
         "disable_success": "Tool disabled.",
         "toggle_error": "Failed to update tool state.",
+        "web_search": {
+          "title": "Web Search Service",
+          "description": "Choose the default web search backend and configure supported providers.",
+          "load_error": "Failed to load web search configuration.",
+          "save": "Save Web Search Settings",
+          "save_success": "Web search configuration updated.",
+          "save_error": "Failed to update web search configuration.",
+          "current_service": "Current Service",
+          "provider": "Preferred Provider",
+          "proxy": "Proxy",
+          "prefer_native": "Prefer Provider Native Search",
+          "prefer_native_hint": "When the active model supports built-in web search, prefer that capability over the client-side tool.",
+          "provider_hint": "Enable this provider and fill any required connection settings.",
+          "max_results": "Max Results",
+          "base_url": "Base URL",
+          "base_url_placeholder": "https://api.example.com/search",
+          "api_key": "API Key",
+          "api_key_placeholder": "Leave blank to keep the existing key",
+          "none": "Unavailable"
+        },
         "status": {
           "enabled": "Enabled",
           "disabled": "Disabled",

web/frontend/src/i18n/locales/zh.json

@@ -533,6 +533,26 @@
         "enable_success": "工具已启用。",
         "disable_success": "工具已禁用。",
         "toggle_error": "更新工具状态失败。",
+        "web_search": {
+          "title": "Web Search 服务",
+          "description": "选择默认网页搜索后端，并配置已支持的搜索服务。",
+          "load_error": "加载 Web Search 配置失败。",
+          "save": "保存 Web Search 配置",
+          "save_success": "Web Search 配置已更新。",
+          "save_error": "更新 Web Search 配置失败。",
+          "current_service": "当前服务",
+          "provider": "首选服务",
+          "proxy": "代理",
+          "prefer_native": "优先使用模型原生搜索",
+          "prefer_native_hint": "如果当前模型支持内建网页搜索，优先使用模型原生能力而不是客户端工具。",
+          "provider_hint": "启用该服务后，可继续填写所需的连接参数。",
+          "max_results": "最大结果数",
+          "base_url": "基础 URL",
+          "base_url_placeholder": "https://api.example.com/search",
+          "api_key": "API Key",
+          "api_key_placeholder": "留空则保留现有密钥",
+          "none": "不可用"
+        },
         "status": {
           "enabled": "已启用",
           "disabled": "已禁用",