refactor(models): refactor models page into modular components and improve UX
- split /models route into dedicated components (page, provider section, card, add/edit sheets, delete dialog) - add provider grouping/sorting, provider labels/icons, and a no-default hint in the models page - add "Set as default model" toggle to add/edit flows with safer defaults - introduce shared form helpers and new UI primitives (field, label, switch) - update i18n strings (en/zh) for models and gateway header text usage - apply minor UI polish (models nav icon, separator client directive)
This commit is contained in:
wenjie
parent
82ff997f2e
commit
1159646345
17 changed files with 1651 additions and 1103 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { IconChevronRight } from "@tabler/icons-react"
|
||||
import {
|
||||
IconAtom,
|
||||
IconCloud,
|
||||
IconCpu,
|
||||
IconKey,
|
||||
IconListDetails,
|
||||
IconMessageCircle,
|
||||
|
|
@ -40,7 +40,7 @@ const navGroups = [
|
|||
defaultOpen: true,
|
||||
items: [
|
||||
{ title: "navigation.providers", url: "/providers", icon: IconCloud },
|
||||
{ title: "navigation.models", url: "/models", icon: IconCpu },
|
||||
{ title: "navigation.models", url: "/models", icon: IconAtom },
|
||||
{ title: "navigation.credentials", url: "/credentials", icon: IconKey },
|
||||
],
|
||||
},
|
||||
|
|
|
|||
320
web/frontend/src/components/models/add-model-sheet.tsx
Normal file
320
web/frontend/src/components/models/add-model-sheet.tsx
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
import { IconLoader2 } from "@tabler/icons-react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import { addModel, setDefaultModel } from "@/api/models"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
import { AdvancedSection, Field, KeyInput } from "./shared-form"
|
||||
|
||||
interface AddForm {
|
||||
modelName: string
|
||||
model: string
|
||||
apiBase: string
|
||||
apiKey: string
|
||||
proxy: string
|
||||
authMethod: string
|
||||
connectMode: string
|
||||
workspace: string
|
||||
rpm: string
|
||||
maxTokensField: string
|
||||
requestTimeout: string
|
||||
thinkingLevel: string
|
||||
}
|
||||
|
||||
const EMPTY_ADD_FORM: AddForm = {
|
||||
modelName: "",
|
||||
model: "",
|
||||
apiBase: "",
|
||||
apiKey: "",
|
||||
proxy: "",
|
||||
authMethod: "",
|
||||
connectMode: "",
|
||||
workspace: "",
|
||||
rpm: "",
|
||||
maxTokensField: "",
|
||||
requestTimeout: "",
|
||||
thinkingLevel: "",
|
||||
}
|
||||
|
||||
interface AddModelSheetProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSaved: () => void
|
||||
}
|
||||
|
||||
export function AddModelSheet({ open, onClose, onSaved }: AddModelSheetProps) {
|
||||
const { t } = useTranslation()
|
||||
const [form, setForm] = useState<AddForm>(EMPTY_ADD_FORM)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [setAsDefault, setSetAsDefault] = useState(false)
|
||||
const [fieldErrors, setFieldErrors] = useState<
|
||||
Partial<Record<keyof AddForm, string>>
|
||||
>({})
|
||||
const [serverError, setServerError] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setForm(EMPTY_ADD_FORM)
|
||||
setSetAsDefault(false)
|
||||
setFieldErrors({})
|
||||
setServerError("")
|
||||
}
|
||||
}, [open])
|
||||
|
||||
const validate = (): boolean => {
|
||||
const errors: Partial<Record<keyof AddForm, string>> = {}
|
||||
if (!form.modelName.trim()) errors.modelName = t("models.add.errorRequired")
|
||||
if (!form.model.trim()) errors.model = t("models.add.errorRequired")
|
||||
setFieldErrors(errors)
|
||||
return Object.keys(errors).length === 0
|
||||
}
|
||||
|
||||
const setField =
|
||||
(key: keyof AddForm) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setForm((f) => ({ ...f, [key]: e.target.value }))
|
||||
if (fieldErrors[key]) {
|
||||
setFieldErrors((prev) => ({ ...prev, [key]: undefined }))
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!validate()) return
|
||||
setSaving(true)
|
||||
setServerError("")
|
||||
try {
|
||||
const modelName = form.modelName.trim()
|
||||
const modelId = form.model.trim()
|
||||
await addModel({
|
||||
model_name: modelName,
|
||||
model: modelId,
|
||||
api_base: form.apiBase.trim() || undefined,
|
||||
api_key: form.apiKey.trim() || undefined,
|
||||
proxy: form.proxy.trim() || undefined,
|
||||
auth_method: form.authMethod.trim() || undefined,
|
||||
connect_mode: form.connectMode.trim() || undefined,
|
||||
workspace: form.workspace.trim() || undefined,
|
||||
rpm: form.rpm ? Number(form.rpm) : undefined,
|
||||
max_tokens_field: form.maxTokensField.trim() || undefined,
|
||||
request_timeout: form.requestTimeout
|
||||
? Number(form.requestTimeout)
|
||||
: undefined,
|
||||
thinking_level: form.thinkingLevel.trim() || undefined,
|
||||
})
|
||||
if (setAsDefault) {
|
||||
await setDefaultModel(modelName)
|
||||
}
|
||||
onSaved()
|
||||
onClose()
|
||||
} catch (e) {
|
||||
setServerError(e instanceof Error ? e.message : t("models.add.saveError"))
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={(v) => !v && onClose()}>
|
||||
<SheetContent
|
||||
side="right"
|
||||
className="flex flex-col gap-0 p-0 data-[side=right]:!w-full data-[side=right]:sm:!w-[560px] data-[side=right]:sm:!max-w-[560px]"
|
||||
>
|
||||
<SheetHeader className="border-b-muted border-b px-6 py-5">
|
||||
<SheetTitle className="text-base">{t("models.add.title")}</SheetTitle>
|
||||
<SheetDescription className="text-xs">
|
||||
{t("models.add.description")}
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto">
|
||||
<div className="space-y-5 px-6 py-5">
|
||||
<Field
|
||||
label={t("models.add.modelName")}
|
||||
hint={t("models.add.modelNameHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.modelName}
|
||||
onChange={setField("modelName")}
|
||||
placeholder={t("models.add.modelNamePlaceholder")}
|
||||
aria-invalid={!!fieldErrors.modelName}
|
||||
/>
|
||||
{fieldErrors.modelName && (
|
||||
<p className="text-destructive text-xs">
|
||||
{fieldErrors.modelName}
|
||||
</p>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.add.modelId")}
|
||||
hint={t("models.add.modelIdHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.model}
|
||||
onChange={setField("model")}
|
||||
placeholder={t("models.add.modelIdPlaceholder")}
|
||||
className="font-mono text-sm"
|
||||
aria-invalid={!!fieldErrors.model}
|
||||
/>
|
||||
{fieldErrors.model && (
|
||||
<p className="text-destructive text-xs">{fieldErrors.model}</p>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field label={t("models.field.apiKey")}>
|
||||
<KeyInput
|
||||
value={form.apiKey}
|
||||
onChange={(v) => setForm((f) => ({ ...f, apiKey: v }))}
|
||||
placeholder={t("models.field.apiKeyPlaceholder")}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label={t("models.field.apiBase")}>
|
||||
<Input
|
||||
value={form.apiBase}
|
||||
onChange={setField("apiBase")}
|
||||
placeholder="https://api.example.com/v1"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="border-input flex h-9 items-center justify-between rounded-md border px-2.5">
|
||||
<span className="text-sm font-medium">
|
||||
{t("models.defaultOnSave.label")}
|
||||
</span>
|
||||
<Switch
|
||||
checked={setAsDefault}
|
||||
onCheckedChange={setSetAsDefault}
|
||||
aria-label={t("models.defaultOnSave.label")}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{t("models.defaultOnSave.description")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AdvancedSection>
|
||||
<Field
|
||||
label={t("models.field.proxy")}
|
||||
hint={t("models.field.proxyHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.proxy}
|
||||
onChange={setField("proxy")}
|
||||
placeholder="http://127.0.0.1:7890"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.authMethod")}
|
||||
hint={t("models.field.authMethodHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.authMethod}
|
||||
onChange={setField("authMethod")}
|
||||
placeholder="oauth"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.connectMode")}
|
||||
hint={t("models.field.connectModeHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.connectMode}
|
||||
onChange={setField("connectMode")}
|
||||
placeholder="stdio"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.workspace")}
|
||||
hint={t("models.field.workspaceHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.workspace}
|
||||
onChange={setField("workspace")}
|
||||
placeholder="/path/to/workspace"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.requestTimeout")}
|
||||
hint={t("models.field.requestTimeoutHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.requestTimeout}
|
||||
onChange={setField("requestTimeout")}
|
||||
placeholder="60"
|
||||
type="number"
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.rpm")}
|
||||
hint={t("models.field.rpmHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.rpm}
|
||||
onChange={setField("rpm")}
|
||||
placeholder="60"
|
||||
type="number"
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.thinkingLevel")}
|
||||
hint={t("models.field.thinkingLevelHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.thinkingLevel}
|
||||
onChange={setField("thinkingLevel")}
|
||||
placeholder="off"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.maxTokensField")}
|
||||
hint={t("models.field.maxTokensFieldHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.maxTokensField}
|
||||
onChange={setField("maxTokensField")}
|
||||
placeholder="max_completion_tokens"
|
||||
/>
|
||||
</Field>
|
||||
</AdvancedSection>
|
||||
|
||||
{serverError && (
|
||||
<p className="text-destructive bg-destructive/10 rounded-md px-3 py-2 text-sm">
|
||||
{serverError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SheetFooter className="border-t-muted border-t px-6 py-4">
|
||||
<Button variant="ghost" onClick={onClose} disabled={saving}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving && <IconLoader2 className="size-4 animate-spin" />}
|
||||
{t("models.add.confirm")}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
74
web/frontend/src/components/models/delete-model-dialog.tsx
Normal file
74
web/frontend/src/components/models/delete-model-dialog.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import { IconLoader2 } from "@tabler/icons-react"
|
||||
import { useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import { type ModelInfo, deleteModel } from "@/api/models"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
|
||||
interface DeleteModelDialogProps {
|
||||
model: ModelInfo | null
|
||||
onClose: () => void
|
||||
onDeleted: () => void
|
||||
}
|
||||
|
||||
export function DeleteModelDialog({
|
||||
model,
|
||||
onClose,
|
||||
onDeleted,
|
||||
}: DeleteModelDialogProps) {
|
||||
const { t } = useTranslation()
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (!model) return
|
||||
if (model.is_default) {
|
||||
onClose()
|
||||
return
|
||||
}
|
||||
setDeleting(true)
|
||||
try {
|
||||
await deleteModel(model.index)
|
||||
onDeleted()
|
||||
} catch {
|
||||
// ignore, user can retry from list
|
||||
} finally {
|
||||
setDeleting(false)
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AlertDialog open={model !== null} onOpenChange={(v) => !v && onClose()}>
|
||||
<AlertDialogContent size="sm">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{t("models.delete.title")}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t("models.delete.description", { name: model?.model_name })}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={onClose} disabled={deleting}>
|
||||
{t("common.cancel")}
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
variant="destructive"
|
||||
onClick={handleConfirm}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting && <IconLoader2 className="size-4 animate-spin" />}
|
||||
{t("models.delete.confirm")}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
301
web/frontend/src/components/models/edit-model-sheet.tsx
Normal file
301
web/frontend/src/components/models/edit-model-sheet.tsx
Normal file
|
|
@ -0,0 +1,301 @@
|
|||
import { IconLoader2 } from "@tabler/icons-react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import { type ModelInfo, setDefaultModel, updateModel } from "@/api/models"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
import { AdvancedSection, Field, KeyInput } from "./shared-form"
|
||||
|
||||
interface EditForm {
|
||||
apiKey: string
|
||||
apiBase: string
|
||||
proxy: string
|
||||
authMethod: string
|
||||
connectMode: string
|
||||
workspace: string
|
||||
rpm: string
|
||||
maxTokensField: string
|
||||
requestTimeout: string
|
||||
thinkingLevel: string
|
||||
}
|
||||
|
||||
interface EditModelSheetProps {
|
||||
model: ModelInfo | null
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSaved: () => void
|
||||
}
|
||||
|
||||
export function EditModelSheet({
|
||||
model,
|
||||
open,
|
||||
onClose,
|
||||
onSaved,
|
||||
}: EditModelSheetProps) {
|
||||
const { t } = useTranslation()
|
||||
const [form, setForm] = useState<EditForm>({
|
||||
apiKey: "",
|
||||
apiBase: "",
|
||||
proxy: "",
|
||||
authMethod: "",
|
||||
connectMode: "",
|
||||
workspace: "",
|
||||
rpm: "",
|
||||
maxTokensField: "",
|
||||
requestTimeout: "",
|
||||
thinkingLevel: "",
|
||||
})
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [setAsDefault, setSetAsDefault] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (model) {
|
||||
setForm({
|
||||
apiKey: "",
|
||||
apiBase: model.api_base ?? "",
|
||||
proxy: model.proxy ?? "",
|
||||
authMethod: model.auth_method ?? "",
|
||||
connectMode: model.connect_mode ?? "",
|
||||
workspace: model.workspace ?? "",
|
||||
rpm: model.rpm ? String(model.rpm) : "",
|
||||
maxTokensField: model.max_tokens_field ?? "",
|
||||
requestTimeout: model.request_timeout
|
||||
? String(model.request_timeout)
|
||||
: "",
|
||||
thinkingLevel: model.thinking_level ?? "",
|
||||
})
|
||||
setSetAsDefault(model.is_default)
|
||||
setError("")
|
||||
}
|
||||
}, [model])
|
||||
|
||||
const setField =
|
||||
(key: keyof EditForm) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setForm((f) => ({ ...f, [key]: e.target.value }))
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!model) return
|
||||
setSaving(true)
|
||||
setError("")
|
||||
try {
|
||||
await updateModel(model.index, {
|
||||
model_name: model.model_name,
|
||||
model: model.model,
|
||||
api_base: form.apiBase || undefined,
|
||||
api_key: form.apiKey || undefined,
|
||||
proxy: form.proxy || undefined,
|
||||
auth_method: form.authMethod || undefined,
|
||||
connect_mode: form.connectMode || undefined,
|
||||
workspace: form.workspace || undefined,
|
||||
rpm: form.rpm ? Number(form.rpm) : undefined,
|
||||
max_tokens_field: form.maxTokensField || undefined,
|
||||
request_timeout: form.requestTimeout
|
||||
? Number(form.requestTimeout)
|
||||
: undefined,
|
||||
thinking_level: form.thinkingLevel || undefined,
|
||||
})
|
||||
if (setAsDefault) {
|
||||
await setDefaultModel(model.model_name)
|
||||
}
|
||||
onSaved()
|
||||
onClose()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : t("models.edit.saveError"))
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const isOAuth = model?.auth_method === "oauth"
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={(v) => !v && onClose()}>
|
||||
<SheetContent
|
||||
side="right"
|
||||
className="flex flex-col gap-0 p-0 data-[side=right]:!w-full data-[side=right]:sm:!w-[560px] data-[side=right]:sm:!max-w-[560px]"
|
||||
>
|
||||
<SheetHeader className="border-b px-6 py-5">
|
||||
<SheetTitle className="text-base">
|
||||
{t("models.edit.title", { name: model?.model_name })}
|
||||
</SheetTitle>
|
||||
<SheetDescription className="font-mono text-xs">
|
||||
{model?.model}
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto">
|
||||
<div className="space-y-5 px-6 py-5">
|
||||
{!isOAuth && (
|
||||
<Field
|
||||
label={t("models.field.apiKey")}
|
||||
hint={
|
||||
model?.configured ? t("models.edit.apiKeyHint") : undefined
|
||||
}
|
||||
>
|
||||
<KeyInput
|
||||
value={form.apiKey}
|
||||
onChange={(v) => setForm((f) => ({ ...f, apiKey: v }))}
|
||||
placeholder={
|
||||
model?.configured
|
||||
? t("models.field.apiKeyPlaceholderSet")
|
||||
: t("models.field.apiKeyPlaceholder")
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field
|
||||
label={t("models.field.apiBase")}
|
||||
hint={isOAuth ? t("models.edit.oauthNote") : undefined}
|
||||
>
|
||||
<Input
|
||||
value={form.apiBase}
|
||||
onChange={setField("apiBase")}
|
||||
placeholder="https://api.example.com/v1"
|
||||
disabled={isOAuth}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="border-input flex h-9 items-center justify-between rounded-md border px-2.5">
|
||||
<span className="text-sm font-medium">
|
||||
{t("models.defaultOnSave.label")}
|
||||
</span>
|
||||
<Switch
|
||||
checked={setAsDefault}
|
||||
onCheckedChange={setSetAsDefault}
|
||||
aria-label={t("models.defaultOnSave.label")}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{t("models.defaultOnSave.description")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AdvancedSection>
|
||||
<Field
|
||||
label={t("models.field.proxy")}
|
||||
hint={t("models.field.proxyHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.proxy}
|
||||
onChange={setField("proxy")}
|
||||
placeholder="http://127.0.0.1:7890"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.authMethod")}
|
||||
hint={t("models.field.authMethodHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.authMethod}
|
||||
onChange={setField("authMethod")}
|
||||
placeholder="oauth"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.connectMode")}
|
||||
hint={t("models.field.connectModeHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.connectMode}
|
||||
onChange={setField("connectMode")}
|
||||
placeholder="stdio"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.workspace")}
|
||||
hint={t("models.field.workspaceHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.workspace}
|
||||
onChange={setField("workspace")}
|
||||
placeholder="/path/to/workspace"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.requestTimeout")}
|
||||
hint={t("models.field.requestTimeoutHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.requestTimeout}
|
||||
onChange={setField("requestTimeout")}
|
||||
placeholder="60"
|
||||
type="number"
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.rpm")}
|
||||
hint={t("models.field.rpmHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.rpm}
|
||||
onChange={setField("rpm")}
|
||||
placeholder="60"
|
||||
type="number"
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.thinkingLevel")}
|
||||
hint={t("models.field.thinkingLevelHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.thinkingLevel}
|
||||
onChange={setField("thinkingLevel")}
|
||||
placeholder="off"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t("models.field.maxTokensField")}
|
||||
hint={t("models.field.maxTokensFieldHint")}
|
||||
>
|
||||
<Input
|
||||
value={form.maxTokensField}
|
||||
onChange={setField("maxTokensField")}
|
||||
placeholder="max_completion_tokens"
|
||||
/>
|
||||
</Field>
|
||||
</AdvancedSection>
|
||||
|
||||
{error && (
|
||||
<p className="text-destructive bg-destructive/10 rounded-md px-3 py-2 text-sm">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SheetFooter className="border-t px-6 py-4">
|
||||
<Button variant="ghost" onClick={onClose} disabled={saving}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving && <IconLoader2 className="size-4 animate-spin" />}
|
||||
{t("common.save")}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
136
web/frontend/src/components/models/model-card.tsx
Normal file
136
web/frontend/src/components/models/model-card.tsx
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
import {
|
||||
IconEdit,
|
||||
IconKey,
|
||||
IconLoader2,
|
||||
IconStar,
|
||||
IconStarFilled,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import type { ModelInfo } from "@/api/models"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
interface ModelCardProps {
|
||||
model: ModelInfo
|
||||
onEdit: (model: ModelInfo) => void
|
||||
onSetDefault: (model: ModelInfo) => void
|
||||
onDelete: (model: ModelInfo) => void
|
||||
settingDefault: boolean
|
||||
}
|
||||
|
||||
export function ModelCard({
|
||||
model,
|
||||
onEdit,
|
||||
onSetDefault,
|
||||
onDelete,
|
||||
settingDefault,
|
||||
}: ModelCardProps) {
|
||||
const { t } = useTranslation()
|
||||
const isOAuth = model.auth_method === "oauth"
|
||||
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
"group/card hover:bg-muted/30 relative flex w-full max-w-[36rem] flex-col gap-3 justify-self-start rounded-xl border p-4 transition-colors hover:shadow-xs",
|
||||
model.configured
|
||||
? "border-border/60 bg-card"
|
||||
: "border-border/50 bg-card/60",
|
||||
].join(" ")}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span
|
||||
className={[
|
||||
"mt-0.5 h-2 w-2 shrink-0 rounded-full",
|
||||
model.is_default
|
||||
? "bg-green-400 shadow-[0_0_0_2px_rgba(74,222,128,0.35)]"
|
||||
: model.configured
|
||||
? "bg-green-500"
|
||||
: "bg-muted-foreground/25",
|
||||
].join(" ")}
|
||||
title={
|
||||
model.configured
|
||||
? t("models.status.configured")
|
||||
: t("models.status.unconfigured")
|
||||
}
|
||||
/>
|
||||
<span className="text-foreground truncate text-sm font-semibold">
|
||||
{model.model_name}
|
||||
</span>
|
||||
{model.is_default && (
|
||||
<span className="bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[10px] leading-none font-medium">
|
||||
{t("models.badge.default")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-0.5">
|
||||
{model.is_default ? (
|
||||
<span
|
||||
className="text-primary p-1"
|
||||
title={t("models.badge.default")}
|
||||
>
|
||||
<IconStarFilled className="size-3.5" />
|
||||
</span>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => onSetDefault(model)}
|
||||
disabled={settingDefault}
|
||||
title={t("models.action.setDefault")}
|
||||
>
|
||||
{settingDefault ? (
|
||||
<IconLoader2 className="size-3.5 animate-spin" />
|
||||
) : (
|
||||
<IconStar className="size-3.5" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => onEdit(model)}
|
||||
title={t("models.action.edit")}
|
||||
>
|
||||
<IconEdit className="size-3.5" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => onDelete(model)}
|
||||
disabled={model.is_default}
|
||||
title={t("models.action.delete")}
|
||||
className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<IconTrash className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground truncate font-mono text-xs leading-snug">
|
||||
{model.model}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isOAuth ? (
|
||||
<span className="text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-[10px] font-medium">
|
||||
OAuth
|
||||
</span>
|
||||
) : model.configured && model.api_key ? (
|
||||
<span className="text-muted-foreground/70 flex items-center gap-1 font-mono text-[11px]">
|
||||
<IconKey className="size-3" />
|
||||
{model.api_key}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground/50 text-[11px]">
|
||||
{t("models.status.unconfigured")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
212
web/frontend/src/components/models/models-page.tsx
Normal file
212
web/frontend/src/components/models/models-page.tsx
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
import { IconLoader2, IconPlus, IconStar } from "@tabler/icons-react"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import { type ModelInfo, getModels, setDefaultModel } from "@/api/models"
|
||||
import { PageHeader } from "@/components/page-header"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
import { AddModelSheet } from "./add-model-sheet"
|
||||
import { DeleteModelDialog } from "./delete-model-dialog"
|
||||
import { EditModelSheet } from "./edit-model-sheet"
|
||||
import { getProviderKey, getProviderLabel } from "./provider-label"
|
||||
import { ProviderSection } from "./provider-section"
|
||||
|
||||
const PROVIDER_PRIORITY: Record<string, number> = {
|
||||
openai: 0,
|
||||
gemini: 1,
|
||||
anthropic: 2,
|
||||
zhipu: 3,
|
||||
deepseek: 4,
|
||||
volcengine: 5,
|
||||
openrouter: 6,
|
||||
qwen: 7,
|
||||
moonshot: 8,
|
||||
groq: 9,
|
||||
"github-copilot": 10,
|
||||
antigravity: 11,
|
||||
nvidia: 12,
|
||||
cerebras: 13,
|
||||
shengsuanyun: 14,
|
||||
ollama: 15,
|
||||
vllm: 16,
|
||||
mistral: 17,
|
||||
avian: 18,
|
||||
}
|
||||
|
||||
interface ProviderGroup {
|
||||
key: string
|
||||
label: string
|
||||
models: ModelInfo[]
|
||||
hasDefault: boolean
|
||||
configuredCount: number
|
||||
}
|
||||
|
||||
export function ModelsPage() {
|
||||
const { t } = useTranslation()
|
||||
const [models, setModels] = useState<ModelInfo[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [fetchError, setFetchError] = useState("")
|
||||
|
||||
const [editingModel, setEditingModel] = useState<ModelInfo | null>(null)
|
||||
const [deletingModel, setDeletingModel] = useState<ModelInfo | null>(null)
|
||||
const [addOpen, setAddOpen] = useState(false)
|
||||
const [settingDefaultIndex, setSettingDefaultIndex] = useState<number | null>(
|
||||
null,
|
||||
)
|
||||
|
||||
const fetchModels = useCallback(async () => {
|
||||
try {
|
||||
const data = await getModels()
|
||||
const sorted = [...data.models].sort((a, b) => {
|
||||
if (a.is_default && !b.is_default) return -1
|
||||
if (!a.is_default && b.is_default) return 1
|
||||
if (a.configured && !b.configured) return -1
|
||||
if (!a.configured && b.configured) return 1
|
||||
return a.model_name.localeCompare(b.model_name)
|
||||
})
|
||||
setModels(sorted)
|
||||
setFetchError("")
|
||||
} catch (e) {
|
||||
setFetchError(e instanceof Error ? e.message : t("models.loadError"))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [t])
|
||||
|
||||
useEffect(() => {
|
||||
fetchModels()
|
||||
}, [fetchModels])
|
||||
|
||||
const handleSetDefault = async (model: ModelInfo) => {
|
||||
setSettingDefaultIndex(model.index)
|
||||
try {
|
||||
await setDefaultModel(model.model_name)
|
||||
await fetchModels()
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setSettingDefaultIndex(null)
|
||||
}
|
||||
}
|
||||
|
||||
const grouped: Record<string, { label: string; models: ModelInfo[] }> = {}
|
||||
for (const model of models) {
|
||||
const providerKey = getProviderKey(model.model)
|
||||
if (!grouped[providerKey]) {
|
||||
grouped[providerKey] = {
|
||||
label: getProviderLabel(model.model),
|
||||
models: [],
|
||||
}
|
||||
}
|
||||
grouped[providerKey].models.push(model)
|
||||
}
|
||||
|
||||
const providerGroups: ProviderGroup[] = Object.entries(grouped)
|
||||
.map(([key, group]) => {
|
||||
const configuredCount = group.models.filter(
|
||||
(model) => model.configured,
|
||||
).length
|
||||
return {
|
||||
key,
|
||||
label: group.label,
|
||||
models: group.models,
|
||||
hasDefault: group.models.some((model) => model.is_default),
|
||||
configuredCount,
|
||||
}
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (a.hasDefault && !b.hasDefault) return -1
|
||||
if (!a.hasDefault && b.hasDefault) return 1
|
||||
|
||||
if (a.configuredCount !== b.configuredCount) {
|
||||
return b.configuredCount - a.configuredCount
|
||||
}
|
||||
|
||||
const aPriority = PROVIDER_PRIORITY[a.key] ?? Number.MAX_SAFE_INTEGER
|
||||
const bPriority = PROVIDER_PRIORITY[b.key] ?? Number.MAX_SAFE_INTEGER
|
||||
if (aPriority !== bPriority) {
|
||||
return aPriority - bPriority
|
||||
}
|
||||
|
||||
return a.label.localeCompare(b.label)
|
||||
})
|
||||
|
||||
const defaultModel = models.find((model) => model.is_default)
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<PageHeader title={t("navigation.models", "Models")}>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button size="sm" variant="outline" onClick={() => setAddOpen(true)}>
|
||||
<IconPlus className="size-4" />
|
||||
{t("models.add.button")}
|
||||
</Button>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 sm:px-6">
|
||||
<div className="pt-2">
|
||||
{!defaultModel && (
|
||||
<div className="text-muted-foreground flex items-center gap-1.5 text-sm">
|
||||
<span>{t("models.noDefaultHintPrefix")}</span>
|
||||
<IconStar className="size-3.5 shrink-0" />
|
||||
<span>{t("models.noDefaultHintSuffix")}</span>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-muted-foreground mt-1 text-sm">
|
||||
{t("models.description")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<IconLoader2 className="text-muted-foreground size-6 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{fetchError && (
|
||||
<div className="text-destructive bg-destructive/10 rounded-lg px-4 py-3 text-sm">
|
||||
{fetchError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !fetchError && (
|
||||
<div className="pb-8">
|
||||
{providerGroups.map((providerGroup) => (
|
||||
<ProviderSection
|
||||
key={providerGroup.key}
|
||||
provider={providerGroup.label}
|
||||
providerKey={providerGroup.key}
|
||||
models={providerGroup.models}
|
||||
onEdit={setEditingModel}
|
||||
onSetDefault={handleSetDefault}
|
||||
onDelete={setDeletingModel}
|
||||
settingDefaultIndex={settingDefaultIndex}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<EditModelSheet
|
||||
model={editingModel}
|
||||
open={editingModel !== null}
|
||||
onClose={() => setEditingModel(null)}
|
||||
onSaved={fetchModels}
|
||||
/>
|
||||
|
||||
<AddModelSheet
|
||||
open={addOpen}
|
||||
onClose={() => setAddOpen(false)}
|
||||
onSaved={fetchModels}
|
||||
/>
|
||||
|
||||
<DeleteModelDialog
|
||||
model={deletingModel}
|
||||
onClose={() => setDeletingModel(null)}
|
||||
onDeleted={fetchModels}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
95
web/frontend/src/components/models/provider-icon.tsx
Normal file
95
web/frontend/src/components/models/provider-icon.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { useMemo, useState } from "react"
|
||||
|
||||
const PROVIDER_ICON_SLUGS: Record<string, string> = {
|
||||
openai: "openai",
|
||||
anthropic: "anthropic",
|
||||
gemini: "googlegemini",
|
||||
deepseek: "deepseek",
|
||||
qwen: "alibabacloud",
|
||||
groq: "groq",
|
||||
openrouter: "openrouter",
|
||||
nvidia: "nvidia",
|
||||
cerebras: "cerebras",
|
||||
volcengine: "bytedance",
|
||||
"github-copilot": "githubcopilot",
|
||||
ollama: "ollama",
|
||||
mistral: "mistralai",
|
||||
zhipu: "zhipu",
|
||||
}
|
||||
|
||||
const PROVIDER_DOMAINS: Record<string, string> = {
|
||||
openai: "openai.com",
|
||||
anthropic: "anthropic.com",
|
||||
gemini: "gemini.google.com",
|
||||
deepseek: "deepseek.com",
|
||||
qwen: "qwenlm.ai",
|
||||
moonshot: "moonshot.ai",
|
||||
groq: "groq.com",
|
||||
openrouter: "openrouter.ai",
|
||||
nvidia: "nvidia.com",
|
||||
cerebras: "cerebras.ai",
|
||||
volcengine: "volcengine.com",
|
||||
shengsuanyun: "shengsuanyun.com",
|
||||
antigravity: "antigravity.google",
|
||||
"github-copilot": "github.com",
|
||||
ollama: "ollama.com",
|
||||
mistral: "mistral.ai",
|
||||
avian: "avian.io",
|
||||
vllm: "vllm.ai",
|
||||
zhipu: "zhipuai.cn",
|
||||
}
|
||||
|
||||
interface ProviderIconProps {
|
||||
providerKey: string
|
||||
providerLabel: string
|
||||
}
|
||||
|
||||
export function ProviderIcon({
|
||||
providerKey,
|
||||
providerLabel,
|
||||
}: ProviderIconProps) {
|
||||
const [sourceIndex, setSourceIndex] = useState(0)
|
||||
const [loadFailed, setLoadFailed] = useState(false)
|
||||
const initial = providerLabel.trim().charAt(0).toUpperCase() || "?"
|
||||
const iconUrls = useMemo(() => {
|
||||
const slug = PROVIDER_ICON_SLUGS[providerKey]
|
||||
const domain = PROVIDER_DOMAINS[providerKey]
|
||||
const urls: string[] = []
|
||||
if (slug) {
|
||||
urls.push(`https://cdn.simpleicons.org/${slug}`)
|
||||
}
|
||||
if (domain) {
|
||||
urls.push(`https://www.google.com/s2/favicons?domain=${domain}&sz=64`)
|
||||
}
|
||||
return urls
|
||||
}, [providerKey])
|
||||
|
||||
const iconUrl = iconUrls[sourceIndex]
|
||||
|
||||
if (!iconUrl || loadFailed) {
|
||||
return (
|
||||
<span className="inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-black/10 bg-white text-[9px] font-semibold text-black/70 dark:border-white/20 dark:text-black/70">
|
||||
{initial}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-black/10 bg-white p-0.5 dark:border-white/20">
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt={`${providerLabel} logo`}
|
||||
className="size-full object-contain drop-shadow-[0_0_1px_rgba(0,0,0,0.45)]"
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer"
|
||||
onError={() => {
|
||||
if (sourceIndex < iconUrls.length - 1) {
|
||||
setSourceIndex((idx) => idx + 1)
|
||||
return
|
||||
}
|
||||
setLoadFailed(true)
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
33
web/frontend/src/components/models/provider-label.ts
Normal file
33
web/frontend/src/components/models/provider-label.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
const PROVIDER_LABELS: Record<string, string> = {
|
||||
openai: "OpenAI",
|
||||
anthropic: "Anthropic",
|
||||
gemini: "Google Gemini",
|
||||
deepseek: "DeepSeek",
|
||||
qwen: "Qwen (阿里云)",
|
||||
moonshot: "Moonshot (月之暗面)",
|
||||
groq: "Groq",
|
||||
openrouter: "OpenRouter",
|
||||
nvidia: "NVIDIA",
|
||||
cerebras: "Cerebras",
|
||||
volcengine: "Volcengine (火山引擎)",
|
||||
shengsuanyun: "ShengsuanYun (神算云)",
|
||||
antigravity: "Google Code Assist",
|
||||
"github-copilot": "GitHub Copilot",
|
||||
ollama: "Ollama (local)",
|
||||
mistral: "Mistral AI",
|
||||
avian: "Avian",
|
||||
vllm: "VLLM (local)",
|
||||
zhipu: "Zhipu AI (智谱)",
|
||||
}
|
||||
|
||||
export function getProviderKey(model: string): string {
|
||||
return model.split("/")[0]
|
||||
}
|
||||
|
||||
export function getProviderLabel(model: string): string {
|
||||
const prefix = getProviderKey(model)
|
||||
const labels: Record<string, string> = {
|
||||
...PROVIDER_LABELS,
|
||||
}
|
||||
return labels[prefix] ?? prefix
|
||||
}
|
||||
72
web/frontend/src/components/models/provider-section.tsx
Normal file
72
web/frontend/src/components/models/provider-section.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import { IconChevronDown } from "@tabler/icons-react"
|
||||
import { useState } from "react"
|
||||
|
||||
import type { ModelInfo } from "@/api/models"
|
||||
|
||||
import { ModelCard } from "./model-card"
|
||||
import { ProviderIcon } from "./provider-icon"
|
||||
|
||||
interface ProviderSectionProps {
|
||||
provider: string
|
||||
providerKey: string
|
||||
models: ModelInfo[]
|
||||
onEdit: (model: ModelInfo) => void
|
||||
onSetDefault: (model: ModelInfo) => void
|
||||
onDelete: (model: ModelInfo) => void
|
||||
settingDefaultIndex: number | null
|
||||
}
|
||||
|
||||
export function ProviderSection({
|
||||
provider,
|
||||
providerKey,
|
||||
models,
|
||||
onEdit,
|
||||
onSetDefault,
|
||||
onDelete,
|
||||
settingDefaultIndex,
|
||||
}: ProviderSectionProps) {
|
||||
const [open, setOpen] = useState(true)
|
||||
|
||||
return (
|
||||
<section className="my-8">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="mb-3 grid w-full grid-cols-[1fr_auto_1fr_auto] items-center gap-2 px-1 py-1.5 text-left"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<div className="border-border/40 border-t" />
|
||||
<span className="text-foreground/80 text-center text-xs font-semibold tracking-wide uppercase">
|
||||
<span className="bg-background inline-flex items-center gap-1.5 px-2">
|
||||
<ProviderIcon providerKey={providerKey} providerLabel={provider} />
|
||||
{provider}
|
||||
</span>
|
||||
</span>
|
||||
<div className="border-border/40 border-t" />
|
||||
<span className="flex justify-end">
|
||||
<IconChevronDown
|
||||
className={[
|
||||
"text-muted-foreground size-4 transition-transform",
|
||||
open ? "rotate-180" : "",
|
||||
].join(" ")}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{models.map((model) => (
|
||||
<ModelCard
|
||||
key={model.index}
|
||||
model={model}
|
||||
onEdit={onEdit}
|
||||
onSetDefault={onSetDefault}
|
||||
onDelete={onDelete}
|
||||
settingDefault={settingDefaultIndex === model.index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
100
web/frontend/src/components/models/shared-form.tsx
Normal file
100
web/frontend/src/components/models/shared-form.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { IconChevronDown, IconEye, IconEyeOff } from "@tabler/icons-react"
|
||||
import { type ReactNode, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import {
|
||||
FieldDescription,
|
||||
FieldLabel,
|
||||
Field as UiField,
|
||||
} from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
interface FieldProps {
|
||||
label: string
|
||||
hint?: string
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function Field({ label, hint, children }: FieldProps) {
|
||||
return (
|
||||
<UiField className="gap-2.5">
|
||||
<div className="space-y-1">
|
||||
<FieldLabel>{label}</FieldLabel>
|
||||
{hint && (
|
||||
<FieldDescription className="text-xs leading-normal">
|
||||
{hint}
|
||||
</FieldDescription>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</UiField>
|
||||
)
|
||||
}
|
||||
|
||||
interface KeyInputProps {
|
||||
value: string
|
||||
onChange: (v: string) => void
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
export function KeyInput({ value, onChange, placeholder }: KeyInputProps) {
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={show ? "text" : "password"}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShow((v) => !v)}
|
||||
tabIndex={-1}
|
||||
className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2 transition-colors"
|
||||
>
|
||||
{show ? (
|
||||
<IconEyeOff className="size-4" />
|
||||
) : (
|
||||
<IconEye className="size-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface AdvancedSectionProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function AdvancedSection({ children }: AdvancedSectionProps) {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="border-border/50 rounded-lg border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="hover:bg-muted/40 flex w-full items-center justify-between rounded-lg px-4 py-3 transition-colors"
|
||||
>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{t("models.advanced.toggle")}
|
||||
</span>
|
||||
<IconChevronDown
|
||||
className={[
|
||||
"text-muted-foreground size-4 transition-transform duration-200",
|
||||
open ? "rotate-180" : "",
|
||||
].join(" ")}
|
||||
/>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="border-border/30 space-y-5 border-t px-4 pt-4 pb-4">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
236
web/frontend/src/components/ui/field.tsx
Normal file
236
web/frontend/src/components/ui/field.tsx
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
import { useMemo } from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
|
||||
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
|
||||
return (
|
||||
<fieldset
|
||||
data-slot="field-set"
|
||||
className={cn(
|
||||
"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLegend({
|
||||
className,
|
||||
variant = "legend",
|
||||
...props
|
||||
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
|
||||
return (
|
||||
<legend
|
||||
data-slot="field-legend"
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-group"
|
||||
className={cn(
|
||||
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const fieldVariants = cva(
|
||||
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
|
||||
{
|
||||
variants: {
|
||||
orientation: {
|
||||
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
||||
horizontal:
|
||||
"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
responsive:
|
||||
"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "vertical",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Field({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="field"
|
||||
data-orientation={orientation}
|
||||
className={cn(fieldVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-content"
|
||||
className={cn(
|
||||
"group/field-content flex flex-1 flex-col gap-1 leading-snug",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Label>) {
|
||||
return (
|
||||
<Label
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
|
||||
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="field-description"
|
||||
className={cn(
|
||||
"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
|
||||
"last:mt-0 nth-last-2:-mt-1",
|
||||
"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
children?: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-separator"
|
||||
data-content={!!children}
|
||||
className={cn(
|
||||
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Separator className="absolute inset-0 top-1/2" />
|
||||
{children && (
|
||||
<span
|
||||
className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
|
||||
data-slot="field-separator-content"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldError({
|
||||
className,
|
||||
children,
|
||||
errors,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
errors?: Array<{ message?: string } | undefined>
|
||||
}) {
|
||||
const content = useMemo(() => {
|
||||
if (children) {
|
||||
return children
|
||||
}
|
||||
|
||||
if (!errors?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const uniqueErrors = [
|
||||
...new Map(errors.map((error) => [error?.message, error])).values(),
|
||||
]
|
||||
|
||||
if (uniqueErrors?.length == 1) {
|
||||
return uniqueErrors[0]?.message
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="ml-4 flex list-disc flex-col gap-1">
|
||||
{uniqueErrors.map(
|
||||
(error, index) =>
|
||||
error?.message && <li key={index}>{error.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
)
|
||||
}, [children, errors])
|
||||
|
||||
if (!content) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
data-slot="field-error"
|
||||
className={cn("text-sm font-normal text-destructive", className)}
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLegend,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldContent,
|
||||
FieldTitle,
|
||||
}
|
||||
22
web/frontend/src/components/ui/label.tsx
Normal file
22
web/frontend/src/components/ui/label.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import * as React from "react"
|
||||
import { Label as LabelPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Separator as SeparatorPrimitive } from "radix-ui"
|
||||
|
||||
|
|
|
|||
31
web/frontend/src/components/ui/switch.tsx
Normal file
31
web/frontend/src/components/ui/switch.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import * as React from "react"
|
||||
import { Switch as SwitchPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
|
||||
/>
|
||||
</SwitchPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Switch }
|
||||
|
|
@ -74,12 +74,13 @@
|
|||
"save": "Save"
|
||||
},
|
||||
"models": {
|
||||
"description": "Configure API keys for each AI provider. Only configured models are available for chat.",
|
||||
"description": "Configure API keys for AI providers. Only configured models are available for chat.",
|
||||
"loadError": "Failed to load models",
|
||||
"header": {
|
||||
"configured": "configured"
|
||||
},
|
||||
"currentDefault": "Default model:",
|
||||
"noDefaultHintPrefix": "No default model set yet. Click",
|
||||
"noDefaultHintSuffix": "to set one.",
|
||||
"status": {
|
||||
"configured": "Configured",
|
||||
"unconfigured": "Not configured"
|
||||
|
|
@ -92,6 +93,10 @@
|
|||
"setDefault": "Set as default",
|
||||
"delete": "Delete model"
|
||||
},
|
||||
"defaultOnSave": {
|
||||
"label": "Default Model",
|
||||
"description": "Automatically set this model as default after saving."
|
||||
},
|
||||
"add": {
|
||||
"button": "Add Model",
|
||||
"title": "Add Custom Model",
|
||||
|
|
|
|||
|
|
@ -74,12 +74,13 @@
|
|||
"save": "保存"
|
||||
},
|
||||
"models": {
|
||||
"description": "为每个 AI 服务商配置 API Key。只有已配置的模型可用于对话。",
|
||||
"description": "为 AI 服务商配置 API Key。只有已配置的模型可用于对话。",
|
||||
"loadError": "加载模型列表失败",
|
||||
"header": {
|
||||
"configured": "已配置"
|
||||
},
|
||||
"currentDefault": "默认模型：",
|
||||
"noDefaultHintPrefix": "尚未设置默认模型，点击",
|
||||
"noDefaultHintSuffix": "设为默认。",
|
||||
"status": {
|
||||
"configured": "已配置",
|
||||
"unconfigured": "未配置"
|
||||
|
|
@ -92,6 +93,10 @@
|
|||
"setDefault": "设为默认",
|
||||
"delete": "删除模型"
|
||||
},
|
||||
"defaultOnSave": {
|
||||
"label": "默认模型",
|
||||
"description": "保存后自动将该模型设置为默认模型。"
|
||||
},
|
||||
"add": {
|
||||
"button": "添加模型",
|
||||
"title": "添加自定义模型",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue