@allbluecn/web-app 0.3.0

package/src/components/settings/ai/model-manager.tsx

@@ -0,0 +1,353 @@
+// 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/>.
+
+import { useMemo, useState } from "react"
+import { useMutation } from "@tanstack/react-query"
+import { useTranslation } from "react-i18next"
+import { toast } from '@/components/ui/sonner'
+import { DragDropProvider, type DragEndEvent } from "@dnd-kit/react"
+import { useSortable } from "@dnd-kit/react/sortable"
+import { Loader2, Plus, Power, RefreshCw, Search } from "lucide-react"
+import {
+  MODEL_TABS,
+  type AiModelMeta,
+  type AiProviderMeta,
+  type ModelCapability,
+  type ModelTab,
+} from "@allbluecn/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { cn } from "@/lib/utils"
+import { ModelCard } from "./model-card"
+import { CreateCustomModelDialog } from "./create-custom-model-dialog"
+import { refreshModelsFn } from "@/server/serverFns/ai/providers"
+
+function arrayMove<T>(arr: T[], from: number, to: number): T[] {
+  const copy = [...arr]
+  const [item] = copy.splice(from, 1)
+  copy.splice(to, 0, item)
+  return copy
+}
+
+function dedupeById(models: AiModelMeta[]): AiModelMeta[] {
+  const seen = new Set<string>()
+  const out: AiModelMeta[] = []
+  for (const m of models) {
+    if (seen.has(m.id)) continue
+    seen.add(m.id)
+    out.push(m)
+  }
+  return out
+}
+
+function matchTab(model: AiModelMeta, tab: ModelTab): boolean {
+  if (tab === "all") return true
+  if (tab === "video") return false
+  return model.capabilities?.includes(tab as ModelCapability) ?? false
+}
+
+function matchSearch(model: AiModelMeta, q: string): boolean {
+  if (!q) return true
+  const lower = q.toLowerCase()
+  return (
+    model.id.toLowerCase().includes(lower) ||
+    model.displayName.toLowerCase().includes(lower)
+  )
+}
+
+function SortableModelCard({
+  model,
+  index,
+  active,
+  provider,
+  onToggle,
+}: {
+  model: AiModelMeta
+  index: number
+  active: boolean
+  provider: Pick<AiProviderMeta, "providerId" | "brandName">
+  onToggle: (id: string, next: boolean) => void
+}) {
+  const { handleRef, ref, isDragging } = useSortable({
+    id: model.id,
+    index,
+    group: "model-manager",
+  })
+  return (
+    <div ref={ref} className={cn(isDragging && "opacity-40")}>
+      <ModelCard
+        model={model}
+        active={active}
+        provider={provider}
+        onToggle={onToggle}
+        sortable
+        dragHandleRef={handleRef}
+      />
+    </div>
+  )
+}
+
+export function ModelManager({
+  globalModels,
+  customModels,
+  selected,
+  provider,
+  onChange,
+  onChanged,
+}: {
+  globalModels: AiModelMeta[]
+  customModels: AiModelMeta[]
+  selected: string[]
+  provider: Pick<AiProviderMeta, "providerId" | "brandName" | "displayName">
+  onChange: (next: string[]) => void
+  onChanged?: () => void
+}) {
+  const [activeTab, setActiveTab] = useState<ModelTab>("all")
+  const [search, setSearch] = useState("")
+  const [createOpen, setCreateOpen] = useState(false)
+  const { t } = useTranslation("settings")
+
+  const allModels = useMemo(
+    () => dedupeById([...globalModels, ...customModels]),
+    [globalModels, customModels],
+  )
+
+  const filtered = useMemo(
+    () =>
+      allModels.filter(
+        (m) => matchTab(m, activeTab) && matchSearch(m, search.trim()),
+      ),
+    [allModels, activeTab, search],
+  )
+
+  const selectedSet = useMemo(() => new Set(selected), [selected])
+  const enabledFiltered = useMemo(
+    () =>
+      selected
+        .map((id) => filtered.find((m) => m.id === id))
+        .filter((m): m is AiModelMeta => !!m),
+    [selected, filtered],
+  )
+  const disabledFiltered = useMemo(
+    () => filtered.filter((m) => !selectedSet.has(m.id)),
+    [filtered, selectedSet],
+  )
+
+  const refreshMutation = useMutation({
+    mutationFn: () =>
+      refreshModelsFn({ data: { providerId: provider.providerId } }),
+    onSuccess: (res) => {
+      if (res.success) toast.success(res.message)
+      else toast.error(res.message)
+      onChanged?.()
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : t("ai.fetchFailed")),
+  })
+
+  function toggle(id: string, next: boolean) {
+    if (next) onChange([...selected, id])
+    else onChange(selected.filter((x) => x !== id))
+  }
+
+  function setAllEnabled(next: boolean) {
+    if (next) {
+      const ids = filtered.map((m) => m.id)
+      const merged = Array.from(new Set([...selected, ...ids]))
+      onChange(merged)
+    } else {
+      const remove = new Set(filtered.map((m) => m.id))
+      onChange(selected.filter((id) => !remove.has(id)))
+    }
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    if (event.canceled) return
+    const source = event.operation.source
+    const target = event.operation.target
+    if (!source || !target || source.id === target.id) return
+    const from = selected.indexOf(String(source.id))
+    const to = selected.indexOf(String(target.id))
+    if (from < 0 || to < 0) return
+    onChange(arrayMove(selected, from, to))
+  }
+
+  const allEnabledInView =
+    filtered.length > 0 && enabledFiltered.length === filtered.length
+  const tabCounts = useMemo(() => {
+    const counts: Record<ModelTab, number> = {
+      all: allModels.length,
+      text: 0,
+      reasoning: 0,
+      tools: 0,
+      vision: 0,
+      video: 0,
+    }
+    for (const m of allModels) {
+      for (const t of MODEL_TABS) {
+        if (t.value !== "all" && matchTab(m, t.value)) counts[t.value]++
+      }
+    }
+    return counts
+  }, [allModels])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="text-sm text-muted-foreground">
+          {t("ai.totalModels", { count: allModels.length })}
+          {customModels.length > 0 && (
+            <span className="text-[11px]">{t("ai.includesCustom", { count: customModels.length })}</span>
+          )}
+        </div>
+        <div className="relative ml-auto">
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t("ai.searchModels")}
+            className="h-9 w-56 pl-9"
+          />
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refreshMutation.mutate()}
+          disabled={refreshMutation.isPending}
+        >
+          {refreshMutation.isPending ? (
+            <Loader2 className="size-4 animate-spin" data-icon="inline-start" />
+          ) : (
+            <RefreshCw className="size-4" data-icon="inline-start" />
+          )}
+          {t("ai.fetchModels")}
+        </Button>
+        <Button size="sm" onClick={() => setCreateOpen(true)}>
+          <Plus className="size-4" data-icon="inline-start" />
+          {t("ai.createModel")}
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap gap-1 border-b">
+        {MODEL_TABS.map((tTab) => {
+          const isActive = activeTab === tTab.value
+          const count = tabCounts[tTab.value]
+          return (
+            <button
+              key={tTab.value}
+              type="button"
+              onClick={() => setActiveTab(tTab.value)}
+              className={cn(
+                "relative -mb-px border-b-2 px-3 py-1.5 text-sm transition-colors",
+                isActive
+                  ? "border-primary text-primary"
+                  : "border-transparent text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {t(`ai.tabs.${tTab.value}`)}
+              <span className="ml-1 text-[11px] text-muted-foreground">
+                {count}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-medium">{t("ai.enabled")}</h4>
+            <span className="text-xs text-muted-foreground">
+              {enabledFiltered.length} / {filtered.length}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">{t("ai.enableAll")}</span>
+            <Switch
+              checked={allEnabledInView}
+              onCheckedChange={setAllEnabled}
+              disabled={filtered.length === 0}
+              aria-label={t("ai.toggleAllFiltered")}
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-destructive"
+              onClick={() => setAllEnabled(false)}
+              disabled={enabledFiltered.length === 0}
+            >
+              <Power className="size-3.5" />
+              {t("ai.disableAll")}
+            </Button>
+          </div>
+        </div>
+        {enabledFiltered.length === 0 ? (
+          <p className="rounded-lg border border-dashed py-6 text-center text-xs text-muted-foreground">
+            {search || activeTab !== "all"
+              ? t("ai.noEnabledInFilter")
+              : t("ai.noEnabledYet")}
+          </p>
+        ) : (
+          <DragDropProvider onDragEnd={handleDragEnd}>
+            <div className="space-y-2">
+              {enabledFiltered.map((m, i) => (
+                <SortableModelCard
+                  key={m.id}
+                  model={m}
+                  index={i}
+                  active
+                  provider={provider}
+                  onToggle={toggle}
+                />
+              ))}
+            </div>
+          </DragDropProvider>
+        )}
+      </div>
+
+      {disabledFiltered.length > 0 && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-medium">{t("ai.disabled")}</h4>
+            <span className="text-xs text-muted-foreground">
+              {disabledFiltered.length}
+            </span>
+          </div>
+          <div className="space-y-2 opacity-80">
+            {disabledFiltered.map((m) => (
+              <ModelCard
+                key={m.id}
+                model={m}
+                active={false}
+                provider={provider}
+                onToggle={toggle}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <CreateCustomModelDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        providerId={provider.providerId}
+        onCreated={onChanged}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,130 @@
+// 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-card.tsx
+import { useMutation } from "@tanstack/react-query"
+import { Link, useRouter } from "@tanstack/react-router"
+import { AlertTriangle, Check } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { toast } from '@/components/ui/sonner'
+import type { AiProviderMeta } from "@allbluecn/shared"
+import { PROVIDER_BADGE_STYLES } from "@allbluecn/shared"
+import { Badge } from "@/components/ui/badge"
+import { Switch } from "@/components/ui/switch"
+import { cn } from "@/lib/utils"
+import { updateAiProviderFn } from "@/server/serverFns/ai/providers"
+import { ProviderIcon } from "./provider-icon"
+
+export type ProviderCardData = {
+  meta: AiProviderMeta
+  config: {
+    apiKeyMasked: string
+    hasKey: boolean
+    baseUrl: string | null
+    enabled: boolean
+    models: string[]
+  }
+  platformEnabled: boolean
+}
+
+export function ProviderCard({ data }: { data: ProviderCardData }) {
+  const { meta, config, platformEnabled } = data
+  const isConfigured = config.hasKey || meta.isLocal
+  const isReady = config.enabled && (config.hasKey || meta.isLocal)
+  const modelCount = config.models.length > 0 ? config.models.length : meta.models.length
+  const router = useRouter()
+  const { t } = useTranslation("settings")
+
+  const toggleMutation = useMutation({
+    mutationFn: (enabled: boolean) =>
+      updateAiProviderFn({ data: { providerId: meta.providerId, enabled } }),
+    onSuccess: async () => {
+      await router.invalidate()
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : t("ai.operationFailed")),
+  })
+
+  const badgeStyle = meta.badge
+    ? PROVIDER_BADGE_STYLES[meta.badge] ?? "bg-muted text-muted-foreground border-border"
+    : null
+
+  return (
+    <Link
+      to="/settings/ai/$providerId"
+      params={{ providerId: meta.providerId }}
+      className={cn(
+        "group relative flex flex-col gap-3 rounded-xl border bg-card p-4 transition-all",
+        "hover:border-primary/40 hover:shadow-sm",
+        isReady && "border-primary/30",
+        !platformEnabled && "opacity-80",
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <ProviderIcon provider={meta} size={44} />
+        {isReady ? (
+          <Badge variant="default" className="gap-1">
+            <Check className="size-3" />
+            {t("ai.providerEnabled")}
+          </Badge>
+        ) : isConfigured ? (
+          <Badge variant="secondary">{t("ai.providerConfigured")}</Badge>
+        ) : (
+          <Badge variant="outline">{meta.isLocal ? t("ai.providerLocal") : t("ai.providerNotConfigured")}</Badge>
+        )}
+      </div>
+
+      <div className="space-y-1">
+        <div className="flex items-center gap-1.5">
+          <h3 className="text-sm font-semibold leading-tight">{meta.displayName}</h3>
+          {badgeStyle && meta.badge && (
+            <span className={`inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium ${badgeStyle}`}>
+              {meta.badge}
+            </span>
+          )}
+          {!platformEnabled && (
+            <AlertTriangle
+              className="size-3.5 text-amber-500"
+              aria-label={t("ai.platformDepreciated")}
+            />
+          )}
+        </div>
+        <p className="line-clamp-2 text-xs text-muted-foreground">{meta.description}</p>
+      </div>
+
+      <div className="mt-auto flex items-center justify-between text-xs text-muted-foreground">
+        <span>{t("ai.modelCount", { count: modelCount })}</span>
+        <div
+          className="flex items-center gap-1.5"
+          onClick={(e) => e.preventDefault()}
+        >
+          <Switch
+            checked={config.enabled}
+            onCheckedChange={(checked) => toggleMutation.mutate(checked)}
+            aria-label={config.enabled ? t("ai.disable") : t("ai.enable")}
+          />
+        </div>
+      </div>
+
+      {!platformEnabled && (
+        <p className="rounded bg-amber-500/10 px-2 py-1 text-[10px] text-amber-700 dark:text-amber-400">
+          {t("ai.platformDepreciatedNotice")}
+        </p>
+      )}
+    </Link>
+  )
+}