opencode/picoclaw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(web): avoid resetting web search draft on config refetch (#2536)

Browse source
This commit is contained in:
wenjie 2026-04-16 10:26:18 +08:00 • committed by GitHub
parent f1b659e5ef
commit f32b303d2a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 127 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

235
web/frontend/src/components/agent/tools/tools-page.tsx
View file

@ -1,15 +1,15 @@
import { IconSearch } from "@tabler/icons-react" import { IconSearch } from "@tabler/icons-react"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { useEffect, useMemo, useState } from "react" import { useMemo, useState } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { toast } from "sonner" import { toast } from "sonner"
import { import {
type ToolSupportItem,
type WebSearchConfigResponse,
getTools, getTools,
getWebSearchConfig, getWebSearchConfig,
setToolEnabled, setToolEnabled,
type ToolSupportItem,
type WebSearchConfigResponse,
updateWebSearchConfig, updateWebSearchConfig,
} from "@/api/tools" } from "@/api/tools"
import { PageHeader } from "@/components/page-header" import { PageHeader } from "@/components/page-header"
@ -54,14 +54,9 @@ export function ToolsPage() {
const [searchQuery, setSearchQuery] = useState("") const [searchQuery, setSearchQuery] = useState("")
const [statusFilter, setStatusFilter] = useState("all") const [statusFilter, setStatusFilter] = useState("all")
const [webSearchDraft, setWebSearchDraft] = const [webSearchDraftOverride, setWebSearchDraftOverride] =
useState<WebSearchConfigResponse | null>(null) useState<WebSearchConfigResponse | null>(null)
const webSearchDraft = webSearchDraftOverride ?? webSearchData ?? null
useEffect(() => {
if (webSearchData) {
setWebSearchDraft(webSearchData)
}
}, [webSearchData])
const toggleMutation = useMutation({ const toggleMutation = useMutation({
mutationFn: async ({ name, enabled }: { name: string; enabled: boolean }) => mutationFn: async ({ name, enabled }: { name: string; enabled: boolean }) =>
@ -87,9 +82,12 @@ export function ToolsPage() {
const webSearchMutation = useMutation({ const webSearchMutation = useMutation({
mutationFn: updateWebSearchConfig, mutationFn: updateWebSearchConfig,
onSuccess: (updated) => { onSuccess: (updated) => {
setWebSearchDraft(updated) queryClient.setQueryData(["tools", "web-search-config"], updated)
setWebSearchDraftOverride(null)
toast.success(t("pages.agent.tools.web_search.save_success")) toast.success(t("pages.agent.tools.web_search.save_success"))
void queryClient.invalidateQueries({ queryKey: ["tools", "web-search-config"] }) void queryClient.invalidateQueries({
queryKey: ["tools", "web-search-config"],
})
void queryClient.invalidateQueries({ queryKey: ["tools"] }) void queryClient.invalidateQueries({ queryKey: ["tools"] })
void refreshGatewayState({ force: true }) void refreshGatewayState({ force: true })
}, },
@ -148,7 +146,10 @@ export function ToolsPage() {
const updateDraft = ( const updateDraft = (
updater: (current: WebSearchConfigResponse) => WebSearchConfigResponse, updater: (current: WebSearchConfigResponse) => WebSearchConfigResponse,
) => { ) => {
setWebSearchDraft((current) => (current ? updater(current) : current)) setWebSearchDraftOverride((current) => {
const draft = current ?? webSearchData
return draft ? updater(draft) : current
})
} }
return ( return (
@ -161,7 +162,9 @@ export function ToolsPage() {
<Card className="border-destructive/50 bg-destructive/10 cursor-default"> <Card className="border-destructive/50 bg-destructive/10 cursor-default">
<CardHeader> <CardHeader>
<CardTitle>{t("pages.agent.tools.web_search.title")}</CardTitle> <CardTitle>{t("pages.agent.tools.web_search.title")}</CardTitle>
<CardDescription>{t("pages.agent.tools.web_search.load_error")}</CardDescription> <CardDescription>
{t("pages.agent.tools.web_search.load_error")}
</CardDescription>
</CardHeader> </CardHeader>
</Card> </Card>
) : isWebSearchLoading || !webSearchDraft ? ( ) : isWebSearchLoading || !webSearchDraft ? (
@ -201,7 +204,10 @@ export function ToolsPage() {
<Select <Select
value={webSearchDraft.provider} value={webSearchDraft.provider}
onValueChange={(value) => onValueChange={(value) =>
updateDraft((current) => ({ ...current, provider: value })) updateDraft((current) => ({
...current,
provider: value,
}))
} }
> >
<SelectTrigger> <SelectTrigger>
@ -254,74 +260,59 @@ export function ToolsPage() {
</div> </div>
<div className="grid gap-4 lg:grid-cols-2"> <div className="grid gap-4 lg:grid-cols-2">
{Object.entries(webSearchDraft.settings).map(([providerId, settings]) => { {Object.entries(webSearchDraft.settings).map(
const providerLabel = providerLabelMap.get(providerId) ?? providerId ([providerId, settings]) => {
const apiKeyPlaceholder = maskedSecretPlaceholder( const providerLabel =
settings.api_key_set ? `${providerId}-configured` : "", providerLabelMap.get(providerId) ?? providerId
t("pages.agent.tools.web_search.api_key_placeholder"), const apiKeyPlaceholder = maskedSecretPlaceholder(
) settings.api_key_set ? `${providerId}-configured` : "",
t("pages.agent.tools.web_search.api_key_placeholder"),
)
return ( return (
<Card key={providerId} className="border-border/60 shadow-none"> <Card
<CardHeader className="pb-3"> key={providerId}
<div className="flex items-center justify-between gap-3"> className="border-border/60 shadow-none"
<div> >
<CardTitle className="text-base">{providerLabel}</CardTitle> <CardHeader className="pb-3">
<CardDescription className="mt-1 text-xs"> <div className="flex items-center justify-between gap-3">
{t("pages.agent.tools.web_search.provider_hint")} <div>
</CardDescription> <CardTitle className="text-base">
</div> {providerLabel}
<Switch </CardTitle>
checked={settings.enabled} <CardDescription className="mt-1 text-xs">
onCheckedChange={(checked) => {t(
updateDraft((current) => ({ "pages.agent.tools.web_search.provider_hint",
...current, )}
settings: { </CardDescription>
...current.settings, </div>
[providerId]: { <Switch
...current.settings[providerId], checked={settings.enabled}
enabled: checked, 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> </div>
<Input </CardHeader>
type="number" <CardContent className="space-y-3">
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="space-y-2">
<div className="text-sm font-medium"> <div className="text-sm font-medium">
{t("pages.agent.tools.web_search.base_url")} {t("pages.agent.tools.web_search.max_results")}
</div> </div>
<Input <Input
value={settings.base_url ?? ""} type="number"
min={1}
max={10}
value={settings.max_results || 5}
onChange={(e) => onChange={(e) =>
updateDraft((current) => ({ updateDraft((current) => ({
...current, ...current,
@ -329,46 +320,74 @@ export function ToolsPage() {
...current.settings, ...current.settings,
[providerId]: { [providerId]: {
...current.settings[providerId], ...current.settings[providerId],
base_url: e.target.value, max_results:
Number(e.target.value) || 0,
}, },
}, },
})) }))
} }
placeholder={t("pages.agent.tools.web_search.base_url_placeholder")}
/> />
</div> </div>
)} {(providerId === "tavily" ||
{(providerId === "brave" || providerId === "searxng" ||
providerId === "tavily" || providerId === "glm_search" ||
providerId === "perplexity" || providerId === "baidu_search") && (
providerId === "glm_search" || <div className="space-y-2">
providerId === "baidu_search") && ( <div className="text-sm font-medium">
<div className="space-y-2"> {t("pages.agent.tools.web_search.base_url")}
<div className="text-sm font-medium"> </div>
{t("pages.agent.tools.web_search.api_key")} <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> </div>
<KeyInput )}
value={settings.api_key ?? ""} {(providerId === "brave" ||
onChange={(value) => providerId === "tavily" ||
updateDraft((current) => ({ providerId === "perplexity" ||
...current, providerId === "glm_search" ||
settings: { providerId === "baidu_search") && (
...current.settings, <div className="space-y-2">
[providerId]: { <div className="text-sm font-medium">
...current.settings[providerId], {t("pages.agent.tools.web_search.api_key")}
api_key: value, </div>
<KeyInput
value={settings.api_key ?? ""}
onChange={(value) =>
updateDraft((current) => ({
...current,
settings: {
...current.settings,
[providerId]: {
...current.settings[providerId],
api_key: value,
},
}, },
}, }))
})) }
} placeholder={apiKeyPlaceholder}
placeholder={apiKeyPlaceholder} />
/> </div>
</div> )}
)} </CardContent>
</CardContent> </Card>
</Card> )
) },
})} )}
</div> </div>
<div className="flex justify-end"> <div className="flex justify-end">