=test_update_homework_tests_and_work_log
Some checks failed
CI / build-deploy (push) Has been cancelled
Some checks failed
CI / build-deploy (push) Has been cancelled
This commit is contained in:
SpecialX
405
src/modules/settings/components/ai-provider-settings-card.tsx
Normal file
405
src/modules/settings/components/ai-provider-settings-card.tsx
Normal file
@@ -0,0 +1,405 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react"
|
||||
import { z } from "zod"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { toast } from "sonner"
|
||||
import { Loader2, Save, Sparkles } from "lucide-react"
|
||||
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Checkbox } from "@/shared/components/ui/checkbox"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/shared/components/ui/form"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select"
|
||||
import { getAiProviderSummaries, testAiProviderAction, upsertAiProviderAction, type AiProviderSummary } from "@/modules/settings/actions"
|
||||
|
||||
const ProviderSchema = z.enum(["zhipu", "openai", "gemini", "custom"])
|
||||
|
||||
const AiProviderFormSchema = z.object({
|
||||
id: z.string().optional(),
|
||||
provider: ProviderSchema,
|
||||
baseUrl: z.string().optional(),
|
||||
model: z.string().min(1, "Model is required"),
|
||||
apiKey: z.string().optional(),
|
||||
isDefault: z.boolean().optional(),
|
||||
})
|
||||
|
||||
type AiProviderFormValues = z.infer<typeof AiProviderFormSchema>
|
||||
|
||||
const providerLabels: Record<z.infer<typeof ProviderSchema>, string> = {
|
||||
zhipu: "智谱",
|
||||
openai: "OpenAI",
|
||||
gemini: "Gemini",
|
||||
custom: "Custom",
|
||||
}
|
||||
|
||||
const NEW_PROVIDER_VALUE = "__new__"
|
||||
|
||||
export function AiProviderSettingsCard({
|
||||
onProvidersChanged,
|
||||
initialMode = "first",
|
||||
}: {
|
||||
onProvidersChanged?: (rows: AiProviderSummary[]) => void
|
||||
initialMode?: "new" | "first"
|
||||
}) {
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const [providers, setProviders] = useState<AiProviderSummary[]>([])
|
||||
const [selectedId, setSelectedId] = useState<string>("")
|
||||
const [testStatus, setTestStatus] = useState<"idle" | "testing" | "passed" | "failed">("idle")
|
||||
const [lastTestedSignature, setLastTestedSignature] = useState<string>("")
|
||||
const loadedRef = useRef(false)
|
||||
|
||||
const form = useForm<AiProviderFormValues>({
|
||||
resolver: zodResolver(AiProviderFormSchema),
|
||||
defaultValues: {
|
||||
id: "",
|
||||
provider: "openai",
|
||||
baseUrl: "",
|
||||
model: "",
|
||||
apiKey: "",
|
||||
isDefault: false,
|
||||
},
|
||||
})
|
||||
|
||||
const selectedProvider = useMemo(
|
||||
() => providers.find((item) => item.id === selectedId) ?? null,
|
||||
[providers, selectedId]
|
||||
)
|
||||
|
||||
const buildSignature = useCallback((values: AiProviderFormValues) => {
|
||||
return JSON.stringify({
|
||||
provider: values.provider,
|
||||
baseUrl: values.baseUrl?.trim() || "",
|
||||
model: values.model.trim(),
|
||||
apiKey: values.apiKey?.trim() || "",
|
||||
})
|
||||
}, [])
|
||||
|
||||
const resetToNew = useCallback(() => {
|
||||
setSelectedId("")
|
||||
setTestStatus("idle")
|
||||
setLastTestedSignature("")
|
||||
form.reset({
|
||||
id: "",
|
||||
provider: "openai",
|
||||
baseUrl: "",
|
||||
model: "",
|
||||
apiKey: "",
|
||||
isDefault: false,
|
||||
})
|
||||
}, [form])
|
||||
|
||||
useEffect(() => {
|
||||
if (loadedRef.current) return
|
||||
loadedRef.current = true
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const rows = await getAiProviderSummaries()
|
||||
setProviders(rows)
|
||||
onProvidersChanged?.(rows)
|
||||
if (initialMode === "new") {
|
||||
resetToNew()
|
||||
return
|
||||
}
|
||||
if (rows.length > 0 && !selectedId) {
|
||||
const next = rows[0]
|
||||
setSelectedId(next.id)
|
||||
form.reset({
|
||||
id: next.id,
|
||||
provider: next.provider,
|
||||
baseUrl: next.baseUrl ?? "",
|
||||
model: next.model,
|
||||
apiKey: "",
|
||||
isDefault: next.isDefault,
|
||||
})
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to load AI providers")
|
||||
}
|
||||
})
|
||||
}, [form, selectedId, onProvidersChanged, initialMode, resetToNew])
|
||||
|
||||
const handleSelectChange = (value: string) => {
|
||||
if (value === NEW_PROVIDER_VALUE) {
|
||||
resetToNew()
|
||||
return
|
||||
}
|
||||
setSelectedId(value)
|
||||
setTestStatus("idle")
|
||||
setLastTestedSignature("")
|
||||
const next = providers.find((item) => item.id === value)
|
||||
if (!next) return
|
||||
form.reset({
|
||||
id: next.id,
|
||||
provider: next.provider,
|
||||
baseUrl: next.baseUrl ?? "",
|
||||
model: next.model,
|
||||
apiKey: "",
|
||||
isDefault: next.isDefault,
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const subscription = form.watch(() => {
|
||||
if (!lastTestedSignature) return
|
||||
const currentSignature = buildSignature(form.getValues())
|
||||
if (currentSignature !== lastTestedSignature) {
|
||||
setTestStatus("idle")
|
||||
}
|
||||
})
|
||||
return () => subscription.unsubscribe()
|
||||
}, [form, buildSignature, lastTestedSignature])
|
||||
|
||||
const handleTest = () => {
|
||||
const values = form.getValues()
|
||||
const apiKey = values.apiKey?.trim()
|
||||
if (!apiKey && !values.id?.trim()) {
|
||||
toast.error("Please enter API key to test")
|
||||
return
|
||||
}
|
||||
setTestStatus("testing")
|
||||
startTransition(async () => {
|
||||
const payload = {
|
||||
id: values.id?.trim() || undefined,
|
||||
provider: values.provider,
|
||||
baseUrl: values.baseUrl?.trim() || undefined,
|
||||
model: values.model.trim(),
|
||||
apiKey: apiKey || undefined,
|
||||
isDefault: values.isDefault ?? false,
|
||||
}
|
||||
const result = await testAiProviderAction(payload)
|
||||
if (result.success) {
|
||||
setTestStatus("passed")
|
||||
setLastTestedSignature(buildSignature(values))
|
||||
toast.success(result.message ?? "Test passed")
|
||||
} else {
|
||||
setTestStatus("failed")
|
||||
toast.error(result.message ?? "Test failed")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onSubmit = (values: AiProviderFormValues) => {
|
||||
const signature = buildSignature(values)
|
||||
if (testStatus !== "passed" || signature !== lastTestedSignature) {
|
||||
toast.error("Please test the configuration before saving")
|
||||
return
|
||||
}
|
||||
startTransition(async () => {
|
||||
const payload = {
|
||||
id: values.id?.trim() || undefined,
|
||||
provider: values.provider,
|
||||
baseUrl: values.baseUrl?.trim() || undefined,
|
||||
model: values.model.trim(),
|
||||
apiKey: values.apiKey?.trim() || undefined,
|
||||
isDefault: values.isDefault ?? false,
|
||||
}
|
||||
const result = await upsertAiProviderAction(payload)
|
||||
if (result.success) {
|
||||
toast.success(result.message ?? "Saved")
|
||||
setTestStatus("idle")
|
||||
setLastTestedSignature("")
|
||||
const rows = await getAiProviderSummaries()
|
||||
setProviders(rows)
|
||||
onProvidersChanged?.(rows)
|
||||
const nextId = result.data ?? payload.id ?? ""
|
||||
setSelectedId(nextId)
|
||||
const next = rows.find((item) => item.id === nextId)
|
||||
if (next) {
|
||||
form.reset({
|
||||
id: next.id,
|
||||
provider: next.provider,
|
||||
baseUrl: next.baseUrl ?? "",
|
||||
model: next.model,
|
||||
apiKey: "",
|
||||
isDefault: next.isDefault,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
toast.error(result.message ?? "Failed to save")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4 text-purple-500" />
|
||||
AI Providers
|
||||
</CardTitle>
|
||||
<CardDescription>Manage AI vendors and default model configuration.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<FormLabel>Existing Providers</FormLabel>
|
||||
<Select value={selectedId || NEW_PROVIDER_VALUE} onValueChange={handleSelectChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Create new or select existing" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NEW_PROVIDER_VALUE}>Create new</SelectItem>
|
||||
{providers.map((item) => (
|
||||
<SelectItem key={item.id} value={item.id}>
|
||||
{providerLabels[item.provider]} · {item.model}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<FormLabel>Key Status</FormLabel>
|
||||
<div className="rounded-md border px-3 py-2 text-sm text-muted-foreground">
|
||||
{selectedProvider?.apiKeyLast4
|
||||
? `Stored • ****${selectedProvider.apiKeyLast4}`
|
||||
: "No key stored"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form {...form}>
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} value={field.value ?? ""} disabled />
|
||||
</FormControl>
|
||||
<FormDescription>Auto-generated for each provider.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="provider"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>品牌方</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select provider" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="zhipu">智谱</SelectItem>
|
||||
<SelectItem value="openai">OpenAI</SelectItem>
|
||||
<SelectItem value="gemini">Gemini</SelectItem>
|
||||
<SelectItem value="custom">Custom</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="baseUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>API URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="https://open.bigmodel.cn/api/paas/v4" />
|
||||
</FormControl>
|
||||
<FormDescription>填写基础地址，不要包含 /chat/completions。</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="model"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Model</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="gpt-4o-mini" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="apiKey"
|
||||
render={({ field }) => (
|
||||
<FormItem className="sm:col-span-2">
|
||||
<FormLabel>API Key</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} placeholder="Paste new key to replace" />
|
||||
</FormControl>
|
||||
<FormDescription>不会回显历史 Key，留空表示不更新。</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isDefault"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-2">
|
||||
<FormControl>
|
||||
<Checkbox checked={!!field.value} onCheckedChange={(value) => field.onChange(value === true)} />
|
||||
</FormControl>
|
||||
<FormLabel>设为默认</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<CardFooter className="flex justify-between border-t px-0 pt-4">
|
||||
<Button type="button" variant="outline" onClick={handleTest} disabled={isPending || testStatus === "testing"}>
|
||||
{testStatus === "testing" ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Testing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="mr-2 h-4 w-4" />
|
||||
Test
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button type="button" onClick={form.handleSubmit(onSubmit)} disabled={isPending}>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</div>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user