@allbluecn/web-app 0.3.0

package/src/components/settings/ai/provider-detail-form.tsx

@@ -0,0 +1,418 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// apps/web/src/components/settings/ai/provider-detail-form.tsx
+import { useRef, useState } from "react"
+import { useMutation } from "@tanstack/react-query"
+import { useDebouncedCallback } from "@tanstack/react-pacer"
+import { Link, useRouter } from "@tanstack/react-router"
+import { useForm } from "@tanstack/react-form"
+import {
+  AlertTriangle,
+  ArrowLeft,
+  Check,
+  ExternalLink,
+  Loader2,
+  Sparkles,
+  Zap,
+} from "lucide-react"
+import { toast } from "@/components/ui/sonner"
+import { useTranslation } from "react-i18next"
+import type { AiModelMeta, AiProviderMeta } from "@allbluecn/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSet,
+  FieldLegend,
+  FieldSeparator,
+} from "@/components/ui/field"
+import {
+  deleteAiProviderConfigFn,
+  getAiProviderFn,
+  testAiProviderFn,
+  updateAiProviderFn,
+} from "@/server/serverFns/ai/providers"
+import { ProviderIcon } from "./provider-icon"
+import { ApiKeyField } from "./api-key-field"
+import { ModelManager } from "./model-manager"
+import {
+  providerDetailSchema,
+  type ProviderDetailValues,
+} from "./schemas/provider-detail"
+
+export type ProviderDetail = Awaited<ReturnType<typeof getAiProviderFn>>
+
+type PersistData = {
+  apiKey?: string
+  clearKey?: boolean
+  baseUrl?: string
+  enabled?: boolean
+  models?: string[]
+}
+
+type SaveState = "idle" | "saving" | "saved" | "error"
+
+export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
+  const { t } = useTranslation("settings")
+  const router = useRouter()
+  const meta = initial.meta as AiProviderMeta
+  const initialConfig = initial.config
+
+  const [apiKey, setApiKey] = useState<string | undefined>(undefined)
+  const [clearKey, setClearKey] = useState<boolean>(false)
+  const [models, setModels] = useState<string[]>(
+    initialConfig.models.length > 0
+      ? initialConfig.models
+      : meta.models.map((m) => m.id),
+  )
+  const [customModels, setCustomModels] = useState<AiModelMeta[]>(
+    initialConfig.customModels ?? [],
+  )
+
+  const [saveState, setSaveState] = useState<SaveState>("idle")
+
+  const form = useForm({
+    defaultValues: {
+      baseUrl: initialConfig.baseUrl ?? "",
+      enabled: initialConfig.enabled,
+    },
+    validators: [{ run: providerDetailSchema as any, triggers: ['change'] }],
+  })
+  const savedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const pendingRef = useRef<PersistData>({})
+
+  const persistMutation = useMutation({
+    mutationFn: (data: PersistData & { providerId: string }) =>
+      updateAiProviderFn({ data }),
+    onMutate: () => setSaveState("saving"),
+    onSuccess: async () => {
+      setSaveState("saved")
+      setApiKey(undefined)
+      setClearKey(false)
+      await router.invalidate()
+      if (savedTimerRef.current) clearTimeout(savedTimerRef.current)
+      savedTimerRef.current = setTimeout(() => setSaveState("idle"), 1500)
+    },
+    onError: (err) => {
+      setSaveState("error")
+      toast.error(
+        t("ai.saveFailedReason", { message: err instanceof Error ? err.message : t("ai.unknownError") }),
+      )
+    },
+  })
+
+  // 防抖合并保存（baseUrl / models 拖拽排序）
+  const debouncedFlush = useDebouncedCallback(
+    () => {
+      const pending = pendingRef.current
+      pendingRef.current = {}
+      if (Object.keys(pending).length > 0) {
+        persistMutation.mutate({ providerId: meta.providerId, ...pending })
+      }
+    },
+    { wait: 600 },
+  )
+
+  function schedulePersist(data: PersistData) {
+    pendingRef.current = { ...pendingRef.current, ...data }
+    debouncedFlush()
+  }
+
+  function persistImmediate(data: PersistData) {
+    pendingRef.current = { ...pendingRef.current, ...data }
+    const merged = pendingRef.current
+    pendingRef.current = {}
+    persistMutation.mutate({ providerId: meta.providerId, ...merged })
+  }
+
+  const deleteMutation = useMutation({
+    mutationFn: (providerId: string) =>
+      deleteAiProviderConfigFn({ data: { providerId } }),
+    onSuccess: () => {
+      toast.success(t("ai.configDeleted"))
+      router.navigate({ to: "/settings/ai" })
+    },
+    onError: (err) =>
+      toast.error(
+        t("ai.deleteFailedReason", { message: err instanceof Error ? err.message : t("ai.unknownError") }),
+      ),
+  })
+
+  const testMutation = useMutation({
+    mutationFn: () =>
+      testAiProviderFn({
+        data: {
+          providerId: meta.providerId,
+          ...(apiKey ? { apiKey } : {}),
+          ...(baseUrlValue ? { baseUrl: baseUrlValue } : {}),
+        },
+      }),
+    onSuccess: (result) => {
+      if (result.success) toast.success(result.message)
+      else toast.error(result.message)
+    },
+    onError: (err) =>
+      toast.error(t("ai.testFailedReason", { message: err instanceof Error ? err.message : t("ai.unknownError") })),
+  })
+
+  function handleApiKeyBlur() {
+    if (apiKey) {
+      const v = apiKey
+      setApiKey(undefined)
+      persistImmediate({ apiKey: v })
+    }
+  }
+
+  const enabledValue = form.state.values.enabled
+  const baseUrlValue = form.state.values.baseUrl
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2">
+        <Button asChild variant="ghost" size="icon">
+          <Link to="/settings/ai" aria-label={t("ai.back")}>
+            <ArrowLeft className="size-4" />
+          </Link>
+        </Button>
+        <h2 className="text-lg font-semibold">{meta.displayName}</h2>
+        <SaveStatusIndicator state={saveState} />
+      </div>
+
+      {!initial.platformEnabled && (
+        <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-700 dark:text-amber-400">
+          <AlertTriangle className="mt-0.5 size-4 shrink-0" />
+          <div>
+            <p className="font-medium">{t("ai.platformDelistedTitle")}</p>
+            <p>{t("ai.platformDelistedDesc")}</p>
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-start gap-4 rounded-xl border bg-card p-4">
+        <ProviderIcon provider={meta} size={56} />
+        <div className="flex-1 space-y-1">
+          <div className="flex items-center gap-2">
+            <h3 className="font-semibold">{meta.displayName}</h3>
+            <span className="text-xs text-muted-foreground">
+              ({meta.brandName})
+            </span>
+            {meta.category === "recommended" && (
+              <Badge variant="default" className="gap-1">
+                <Sparkles className="size-3" />
+                {t("ai.recommended")}
+              </Badge>
+            )}
+            {meta.isLocal && <Badge variant="secondary">{t("ai.providerLocal")}</Badge>}
+            <Badge
+              variant={enabledValue ? "default" : "outline"}
+              className={cn(
+                "text-[10px]",
+                enabledValue
+                  ? "bg-emerald-500/10 text-emerald-600 border-emerald-500/30 dark:text-emerald-400"
+                  : "text-muted-foreground",
+              )}
+            >
+              {enabledValue ? t("ai.enabled") : t("ai.disabled")}
+            </Badge>
+          </div>
+          <p className="text-sm text-muted-foreground">{meta.description}</p>
+          <div className="flex flex-wrap gap-2 pt-1 text-xs">
+            {meta.docsUrl && (
+              <a
+                href={meta.docsUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 text-primary hover:underline"
+              >
+                <ExternalLink className="size-3" />
+                {t("ai.docs")}
+              </a>
+            )}
+            {meta.keyUrl && !meta.isLocal && (
+              <a
+                href={meta.keyUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 text-primary hover:underline"
+              >
+                <ExternalLink className="size-3" />
+                {t("ai.getApiKey")}
+              </a>
+            )}
+          </div>
+        </div>
+        <form.Field
+          name="enabled"
+          children={(field) => (
+            <div className="flex flex-col items-center gap-1.5 self-center">
+              <Switch
+                checked={field.value}
+                onCheckedChange={(next) => {
+                  field.handleChange(!!next)
+                  persistImmediate({ enabled: !!next })
+                }}
+                aria-label={t("ai.enableProvider")}
+              />
+            </div>
+          )}
+        />
+      </div>
+
+      <FieldSet>
+        <FieldLegend>{t("ai.setupConfig")}</FieldLegend>
+
+        <FieldGroup>
+          <ApiKeyField
+            hasKey={initialConfig.hasKey}
+            apiKeyMasked={initialConfig.apiKeyMasked}
+            keyPlaceholder={meta.keyPlaceholder ?? ""}
+            keyUrl={meta.keyUrl}
+            isLocal={meta.isLocal}
+            onChange={(next) => {
+              if (next.apiKey !== undefined) {
+                setApiKey(next.apiKey)
+                setClearKey(false)
+              }
+              if (next.clearKey) {
+                setClearKey(true)
+                setApiKey(undefined)
+                persistImmediate({ clearKey: true })
+              }
+            }}
+            onBlurApiKey={handleApiKeyBlur}
+          />
+
+          <FieldSeparator />
+
+          <form.Field
+            name="baseUrl"
+            children={(field) => (
+              <Field orientation="horizontal">
+                <FieldContent>
+                  <FieldLabel>{t("ai.baseUrlLabel")}</FieldLabel>
+                  <FieldDescription className="text-xs space-y-1">
+                    {t("ai.baseUrlHint")}
+                    {meta.defaultBaseUrl && (
+                      <code className="rounded bg-muted px-1.5 py-0.5">
+                        {meta.defaultBaseUrl}
+                      </code>
+                    )}
+                  </FieldDescription>
+                </FieldContent>
+                <Input
+                  value={field.value}
+                  onChange={(e) => {
+                    field.handleChange(e.target.value)
+                    schedulePersist({ baseUrl: e.target.value })
+                  }}
+                  placeholder={meta.defaultBaseUrl ?? ""}
+                  className="w-72"
+                />
+              </Field>
+            )}
+          />
+        </FieldGroup>
+      </FieldSet>
+
+      <FieldSet className="mt-20">
+        <FieldLegend>{t("ai.modelManagement")}</FieldLegend>
+        <FieldDescription className="text-xs">
+          {t("ai.modelManagementDesc")}
+        </FieldDescription>
+        <ModelManager
+          globalModels={meta.models}
+          customModels={customModels}
+          selected={models}
+          provider={{
+            providerId: meta.providerId,
+            brandName: meta.brandName,
+            displayName: meta.displayName,
+          }}
+          onChange={(next) => {
+            setModels(next)
+            schedulePersist({ models: next })
+          }}
+          onChanged={async () => {
+            const res = await getAiProviderFn({
+              data: { providerId: meta.providerId },
+            })
+            setCustomModels(res.config.customModels ?? [])
+          }}
+        />
+      </FieldSet>
+
+      <div className="flex items-center justify-between">
+        <Button
+          variant="ghost"
+          className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+          onClick={() => {
+            if (initialConfig.hasKey || initialConfig.enabled) {
+              deleteMutation.mutate(meta.providerId)
+            }
+          }}
+          disabled={!initialConfig.hasKey && !initialConfig.enabled}
+        >
+          {t("ai.clearConfig")}
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => testMutation.mutate()}
+          disabled={testMutation.isPending}
+        >
+          {testMutation.isPending ? (
+            <Loader2 className="size-4 animate-spin" data-icon="inline-start" />
+          ) : (
+            <Zap className="size-4" data-icon="inline-start" />
+          )}
+          {t("ai.testConnection")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function SaveStatusIndicator({ state }: { state: SaveState }) {
+  const { t } = useTranslation("settings")
+  if (state === "saving") {
+    return (
+      <span className="text-xs text-muted-foreground inline-flex items-center gap-1">
+        <Loader2 className="size-3 animate-spin" />
+        {t("ai.saving")}
+      </span>
+    )
+  }
+  if (state === "saved") {
+    return (
+      <span className="text-xs text-emerald-600 dark:text-emerald-400 inline-flex items-center gap-1">
+        <Check className="size-3" />
+        {t("ai.saved")}
+      </span>
+    )
+  }
+  if (state === "error") {
+    return <span className="text-xs text-destructive">{t("ai.saveShort")}</span>
+  }
+  return null
+}

package/src/components/settings/ai/provider-grid.tsx

@@ -0,0 +1,157 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// apps/web/src/components/settings/ai/provider-grid.tsx
+import { useEffect, useMemo, useState } from "react"
+import { Search } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useLiveQuery } from "@tanstack/react-db"
+import { aiProvidersCollection } from "@/lib/collections/ai/ai-providers-collection"
+import { cn } from "@/lib/utils"
+import { ProviderCard } from "./provider-card"
+
+type SortMode = "default" | "name" | "configured-first"
+
+function ProviderResults({
+  query,
+  sort,
+}: {
+  query: string
+  sort: SortMode
+}) {
+  const { t } = useTranslation("settings")
+  const { data: providers } = useLiveQuery((q) =>
+    q.from({ p: aiProvidersCollection })
+  )
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    let list = providers ?? []
+    if (q) {
+      list = list.filter(
+        ({ meta }) =>
+          meta.displayName.toLowerCase().includes(q) ||
+          meta.brandName.toLowerCase().includes(q) ||
+          meta.description.toLowerCase().includes(q),
+      )
+    }
+    if (sort === "name") {
+      list = [...list].sort((a, b) =>
+        a.meta.displayName.localeCompare(b.meta.displayName, "zh-CN"),
+      )
+    } else if (sort === "configured-first") {
+      list = [...list].sort((a, b) => {
+        const aReady = a.config.enabled ? 0 : 1
+        const bReady = b.config.enabled ? 0 : 1
+        return aReady - bReady
+      })
+    }
+    return list
+  }, [providers, query, sort])
+
+  const enabledProviders = filtered.filter((p) => p.config.enabled)
+  const disabledProviders = filtered.filter((p) => !p.config.enabled)
+
+  return (
+    <>
+      {enabledProviders.length > 0 && (
+        <div className="space-y-3">
+          <h3 className="text-xs font-medium text-muted-foreground">
+            {t("ai.enabledProviders", { count: enabledProviders.length })}
+          </h3>
+          <div className={cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4")}>
+            {enabledProviders.map(({ meta, config, platformEnabled }) => (
+              <ProviderCard
+                key={meta.providerId}
+                data={{ meta, config, platformEnabled }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {disabledProviders.length > 0 && (
+        <div className="space-y-3">
+          <h3 className="text-xs font-medium text-muted-foreground">
+            {t("ai.disabledProviders", { count: disabledProviders.length })}
+          </h3>
+          <div className={cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4")}>
+            {disabledProviders.map(({ meta, config, platformEnabled }) => (
+              <ProviderCard
+                key={meta.providerId}
+                data={{ meta, config, platformEnabled }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {filtered.length === 0 && (
+        <div className="py-12 text-center text-sm text-muted-foreground">
+          {t("ai.noMatchedProviders")}
+        </div>
+      )}
+    </>
+  )
+}
+
+export function ProviderGrid() {
+  const [query, setQuery] = useState("")
+  const [sort, setSort] = useState<SortMode>("default")
+  const [mounted, setMounted] = useState(false)
+  const { t } = useTranslation("settings")
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="relative min-w-60 flex-1">
+          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("ai.searchPlaceholder")}
+            className="pl-9"
+          />
+        </div>
+        <Select value={sort} onValueChange={(v) => setSort(v as SortMode)}>
+          <SelectTrigger className="w-40">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="default">{t("ai.sortDefault")}</SelectItem>
+            <SelectItem value="name">{t("ai.sortByName")}</SelectItem>
+            <SelectItem value="configured-first">{t("ai.sortConfiguredFirst")}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {mounted && <ProviderResults query={query} sort={sort} />}
+    </div>
+  )
+}

package/src/components/settings/ai/provider-icon.tsx

@@ -0,0 +1,43 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// apps/web/src/components/settings/ai/provider-icon.tsx
+import type { AiProviderMeta } from "@allbluecn/shared"
+import { cn } from "@/lib/utils"
+import { ProviderLogo } from "./provider-logo"
+
+export function ProviderIcon({
+  provider,
+  size = 40,
+  className,
+}: {
+  provider: Pick<AiProviderMeta, "providerId" | "brandName">
+  size?: number
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center rounded-lg bg-muted text-foreground",
+        className,
+      )}
+      style={{ width: size, height: size }}
+    >
+      <ProviderLogo provider={provider} size={Math.round(size * 0.6)} />
+    </div>
+  )
+}