550 lines
21 KiB
TypeScript
550 lines
21 KiB
TypeScript
import { create } from "@bufbuild/protobuf";
|
|
import { isEqual } from "lodash-es";
|
|
import { MoreVerticalIcon, PlusIcon } from "lucide-react";
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { toast } from "react-hot-toast";
|
|
import ConfirmDialog from "@/components/ConfirmDialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useInstance } from "@/contexts/InstanceContext";
|
|
import {
|
|
InstanceSetting_AIProviderConfig,
|
|
InstanceSetting_AIProviderConfigSchema,
|
|
InstanceSetting_AIProviderType,
|
|
InstanceSetting_AISettingSchema,
|
|
InstanceSetting_Key,
|
|
InstanceSetting_TranscriptionConfig,
|
|
InstanceSetting_TranscriptionConfigSchema,
|
|
InstanceSettingSchema,
|
|
} from "@/types/proto/api/v1/instance_service_pb";
|
|
import { useTranslate } from "@/utils/i18n";
|
|
import SettingGroup from "./SettingGroup";
|
|
import { SettingPanel } from "./SettingList";
|
|
import SettingSection from "./SettingSection";
|
|
import SettingTable from "./SettingTable";
|
|
import useInstanceSettingUpdater, { buildInstanceSettingName } from "./useInstanceSettingUpdater";
|
|
|
|
type LocalAIProvider = {
|
|
id: string;
|
|
title: string;
|
|
type: InstanceSetting_AIProviderType;
|
|
endpoint: string;
|
|
apiKey: string;
|
|
apiKeySet: boolean;
|
|
apiKeyHint: string;
|
|
};
|
|
|
|
type LocalTranscription = {
|
|
providerId: string;
|
|
model: string;
|
|
language: string;
|
|
prompt: string;
|
|
};
|
|
|
|
const providerTypeOptions = [InstanceSetting_AIProviderType.OPENAI, InstanceSetting_AIProviderType.GEMINI];
|
|
|
|
const byokNotes = ["setting.ai.byok-key-note", "setting.ai.byok-storage-note", "setting.ai.byok-model-note"] as const;
|
|
|
|
const createProviderID = () => {
|
|
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
|
|
return crypto.randomUUID();
|
|
}
|
|
return `ai-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
|
};
|
|
|
|
const getProviderTypeLabel = (type: InstanceSetting_AIProviderType) => {
|
|
return InstanceSetting_AIProviderType[type] ?? "UNKNOWN";
|
|
};
|
|
|
|
const toLocalProvider = (provider: InstanceSetting_AIProviderConfig): LocalAIProvider => ({
|
|
id: provider.id,
|
|
title: provider.title,
|
|
type: provider.type,
|
|
endpoint: provider.endpoint,
|
|
apiKey: "",
|
|
apiKeySet: provider.apiKeySet,
|
|
apiKeyHint: provider.apiKeyHint,
|
|
});
|
|
|
|
const toLocalTranscription = (config: InstanceSetting_TranscriptionConfig | undefined): LocalTranscription => ({
|
|
providerId: config?.providerId ?? "",
|
|
model: config?.model ?? "",
|
|
language: config?.language ?? "",
|
|
prompt: config?.prompt ?? "",
|
|
});
|
|
|
|
const newProvider = (): LocalAIProvider => ({
|
|
id: createProviderID(),
|
|
title: "",
|
|
type: InstanceSetting_AIProviderType.OPENAI,
|
|
endpoint: "",
|
|
apiKey: "",
|
|
apiKeySet: false,
|
|
apiKeyHint: "",
|
|
});
|
|
|
|
const toProviderConfig = (provider: LocalAIProvider) =>
|
|
create(InstanceSetting_AIProviderConfigSchema, {
|
|
id: provider.id,
|
|
title: provider.title.trim(),
|
|
type: provider.type,
|
|
endpoint: provider.endpoint.trim(),
|
|
apiKey: provider.apiKey,
|
|
});
|
|
|
|
const toTranscriptionConfig = (transcription: LocalTranscription) =>
|
|
create(InstanceSetting_TranscriptionConfigSchema, {
|
|
providerId: transcription.providerId,
|
|
model: transcription.model.trim(),
|
|
language: transcription.language.trim(),
|
|
prompt: transcription.prompt,
|
|
});
|
|
|
|
const AISection = () => {
|
|
const t = useTranslate();
|
|
const saveInstanceSetting = useInstanceSettingUpdater();
|
|
const { aiSetting: originalSetting } = useInstance();
|
|
const [providers, setProviders] = useState<LocalAIProvider[]>(() => originalSetting.providers.map(toLocalProvider));
|
|
const [transcription, setTranscription] = useState<LocalTranscription>(() => toLocalTranscription(originalSetting.transcription));
|
|
const [editingProvider, setEditingProvider] = useState<LocalAIProvider | undefined>();
|
|
const [deleteTarget, setDeleteTarget] = useState<LocalAIProvider | undefined>();
|
|
|
|
useEffect(() => {
|
|
setProviders(originalSetting.providers.map(toLocalProvider));
|
|
}, [originalSetting.providers]);
|
|
|
|
// Only re-sync the transcription draft when the server-side content actually
|
|
// changes — not on every originalSetting identity change. This prevents
|
|
// provider-side saves (which keep transcription unchanged on the server) from
|
|
// wiping an in-progress transcription draft.
|
|
const lastSyncedTranscription = useRef<LocalTranscription>(toLocalTranscription(originalSetting.transcription));
|
|
useEffect(() => {
|
|
const next = toLocalTranscription(originalSetting.transcription);
|
|
if (!isEqual(lastSyncedTranscription.current, next)) {
|
|
setTranscription(next);
|
|
lastSyncedTranscription.current = next;
|
|
}
|
|
}, [originalSetting.transcription]);
|
|
|
|
const originalTranscription = useMemo(() => toLocalTranscription(originalSetting.transcription), [originalSetting.transcription]);
|
|
const transcriptionHasChanges = !isEqual(transcription, originalTranscription);
|
|
|
|
const transcriptionProviderRef = useMemo(
|
|
() => providers.find((provider) => provider.id === transcription.providerId),
|
|
[providers, transcription.providerId],
|
|
);
|
|
|
|
// Persists the AI setting using a specific providers list and transcription
|
|
// value. Provider operations pass originalSetting.transcription so an
|
|
// in-progress transcription draft is never accidentally committed.
|
|
const persistAISetting = async (
|
|
nextProviders: LocalAIProvider[],
|
|
nextTranscription: InstanceSetting_TranscriptionConfig | undefined,
|
|
errorContext: string,
|
|
) => {
|
|
return saveInstanceSetting({
|
|
key: InstanceSetting_Key.AI,
|
|
setting: create(InstanceSettingSchema, {
|
|
name: buildInstanceSettingName(InstanceSetting_Key.AI),
|
|
value: {
|
|
case: "aiSetting",
|
|
value: create(InstanceSetting_AISettingSchema, {
|
|
providers: nextProviders.map(toProviderConfig),
|
|
transcription: nextTranscription,
|
|
}),
|
|
},
|
|
}),
|
|
errorContext,
|
|
});
|
|
};
|
|
|
|
const handleCreateProvider = () => {
|
|
setEditingProvider(newProvider());
|
|
};
|
|
|
|
const handleEditProvider = (provider: LocalAIProvider) => {
|
|
setEditingProvider({ ...provider, apiKey: "" });
|
|
};
|
|
|
|
const handleSaveProvider = async (provider: LocalAIProvider) => {
|
|
const title = provider.title.trim();
|
|
const endpoint = provider.endpoint.trim();
|
|
|
|
if (!title) {
|
|
toast.error(t("setting.ai.provider-title-required"));
|
|
return;
|
|
}
|
|
if (!provider.apiKeySet && !provider.apiKey.trim()) {
|
|
toast.error(t("setting.ai.api-key-required"));
|
|
return;
|
|
}
|
|
|
|
const normalizedProvider = { ...provider, title, endpoint };
|
|
const exists = providers.some((item) => item.id === normalizedProvider.id);
|
|
const nextProviders = exists
|
|
? providers.map((item) => (item.id === normalizedProvider.id ? normalizedProvider : item))
|
|
: [...providers, normalizedProvider];
|
|
|
|
const ok = await persistAISetting(nextProviders, originalSetting.transcription, "Update AI provider");
|
|
if (!ok) return;
|
|
setProviders(nextProviders);
|
|
setEditingProvider(undefined);
|
|
};
|
|
|
|
const handleDeleteProvider = async () => {
|
|
if (!deleteTarget) return;
|
|
const target = deleteTarget;
|
|
const nextProviders = providers.filter((provider) => provider.id !== target.id);
|
|
|
|
// If the persisted transcription references the deleted provider, the
|
|
// server would reject the save (provider_id must reference an existing
|
|
// provider). Send a cleared transcription in that case.
|
|
const persistedTranscription = originalSetting.transcription;
|
|
const nextTranscription =
|
|
persistedTranscription && persistedTranscription.providerId === target.id
|
|
? create(InstanceSetting_TranscriptionConfigSchema, {})
|
|
: persistedTranscription;
|
|
|
|
const ok = await persistAISetting(nextProviders, nextTranscription, "Delete AI provider");
|
|
if (!ok) return;
|
|
setProviders(nextProviders);
|
|
if (transcription.providerId === target.id) {
|
|
setTranscription((prev) => ({ ...prev, providerId: "" }));
|
|
}
|
|
setDeleteTarget(undefined);
|
|
};
|
|
|
|
const handleSaveTranscription = async () => {
|
|
if (transcription.providerId && !transcriptionProviderRef) {
|
|
toast.error(t("setting.ai.transcription-empty-providers"));
|
|
return;
|
|
}
|
|
await persistAISetting(providers, toTranscriptionConfig(transcription), "Update transcription");
|
|
};
|
|
|
|
return (
|
|
<SettingSection
|
|
title={t("setting.ai.label")}
|
|
actions={
|
|
<Button onClick={handleCreateProvider}>
|
|
<PlusIcon className="w-4 h-4 mr-2" />
|
|
{t("setting.ai.add-provider")}
|
|
</Button>
|
|
}
|
|
>
|
|
<SettingPanel className="bg-muted/30 px-4 py-3">
|
|
<div className="flex max-w-3xl flex-col gap-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="rounded-md border border-border bg-background px-2 py-0.5 text-xs font-medium text-foreground">
|
|
{t("setting.ai.byok-label")}
|
|
</span>
|
|
<h4 className="text-sm font-semibold text-foreground">{t("setting.ai.byok-title")}</h4>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">{t("setting.ai.byok-description")}</p>
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
{byokNotes.map((note) => (
|
|
<li key={note} className="flex gap-2">
|
|
<span className="mt-2 size-1 rounded-full bg-muted-foreground/60" aria-hidden />
|
|
<span>{t(note)}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</SettingPanel>
|
|
|
|
<SettingGroup title={t("setting.ai.integrations-title")} description={t("setting.ai.integrations-description")}>
|
|
<SettingTable
|
|
columns={[
|
|
{
|
|
key: "title",
|
|
header: t("common.name"),
|
|
render: (_, provider: LocalAIProvider) => (
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-foreground">{provider.title}</span>
|
|
<span className="font-mono text-xs text-muted-foreground">{provider.id}</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "type",
|
|
header: t("setting.ai.provider-type"),
|
|
render: (_, provider: LocalAIProvider) => <span>{getProviderTypeLabel(provider.type)}</span>,
|
|
},
|
|
{
|
|
key: "endpoint",
|
|
header: t("setting.ai.endpoint"),
|
|
render: (_, provider: LocalAIProvider) => (
|
|
<span className="font-mono text-xs">{provider.endpoint || t("setting.ai.default-endpoint")}</span>
|
|
),
|
|
},
|
|
{
|
|
key: "apiKeySet",
|
|
header: t("setting.ai.api-key"),
|
|
render: (_, provider: LocalAIProvider) => (
|
|
<span className="font-mono text-xs">{provider.apiKeySet ? provider.apiKeyHint || t("setting.ai.configured") : "-"}</span>
|
|
),
|
|
},
|
|
{
|
|
key: "actions",
|
|
header: "",
|
|
className: "text-right",
|
|
render: (_, provider: LocalAIProvider) => (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm">
|
|
<MoreVerticalIcon className="w-4 h-auto" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" sideOffset={2}>
|
|
<DropdownMenuItem onClick={() => handleEditProvider(provider)}>{t("common.edit")}</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setDeleteTarget(provider)} className="text-destructive focus:text-destructive">
|
|
{t("common.delete")}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
),
|
|
},
|
|
]}
|
|
data={providers}
|
|
emptyMessage={t("setting.ai.no-providers")}
|
|
getRowKey={(provider) => provider.id}
|
|
/>
|
|
</SettingGroup>
|
|
|
|
<SettingGroup
|
|
title={t("setting.ai.transcription-title")}
|
|
description={t("setting.ai.transcription-description")}
|
|
showSeparator
|
|
actions={
|
|
<Button disabled={!transcriptionHasChanges} onClick={handleSaveTranscription}>
|
|
{t("common.save")}
|
|
</Button>
|
|
}
|
|
>
|
|
<TranscriptionForm
|
|
providers={providers}
|
|
transcription={transcription}
|
|
onChange={setTranscription}
|
|
referencedProvider={transcriptionProviderRef}
|
|
/>
|
|
</SettingGroup>
|
|
|
|
<AIProviderDialog
|
|
provider={editingProvider}
|
|
onOpenChange={(open) => !open && setEditingProvider(undefined)}
|
|
onSave={handleSaveProvider}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={!!deleteTarget}
|
|
onOpenChange={(open) => !open && setDeleteTarget(undefined)}
|
|
title={deleteTarget ? t("setting.ai.delete-provider", { title: deleteTarget.title }) : ""}
|
|
confirmLabel={t("common.delete")}
|
|
cancelLabel={t("common.cancel")}
|
|
onConfirm={handleDeleteProvider}
|
|
confirmVariant="destructive"
|
|
/>
|
|
</SettingSection>
|
|
);
|
|
};
|
|
|
|
interface TranscriptionFormProps {
|
|
providers: LocalAIProvider[];
|
|
transcription: LocalTranscription;
|
|
referencedProvider: LocalAIProvider | undefined;
|
|
onChange: (next: LocalTranscription) => void;
|
|
}
|
|
|
|
const TranscriptionForm = ({ providers, transcription, referencedProvider, onChange }: TranscriptionFormProps) => {
|
|
const t = useTranslate();
|
|
const noProviders = providers.length === 0;
|
|
|
|
const update = (partial: Partial<LocalTranscription>) => {
|
|
onChange({ ...transcription, ...partial });
|
|
};
|
|
|
|
const placeholderForProvider = (provider: LocalAIProvider | undefined) => {
|
|
if (!provider) return "";
|
|
return provider.type === InstanceSetting_AIProviderType.GEMINI
|
|
? t("setting.ai.transcription-model-placeholder-gemini")
|
|
: t("setting.ai.transcription-model-placeholder-openai");
|
|
};
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-3xl">
|
|
<div className="flex flex-col gap-1.5 sm:col-span-2">
|
|
<Label>{t("setting.ai.transcription-provider")}</Label>
|
|
<Select
|
|
value={transcription.providerId || "__none__"}
|
|
onValueChange={(value) => update({ providerId: value === "__none__" ? "" : value })}
|
|
disabled={noProviders}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__none__">{t("setting.ai.transcription-no-provider")}</SelectItem>
|
|
{providers.map((provider) => (
|
|
<SelectItem key={provider.id} value={provider.id}>
|
|
{provider.title || provider.id}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{noProviders && <p className="text-xs text-muted-foreground">{t("setting.ai.transcription-empty-providers")}</p>}
|
|
{referencedProvider && !referencedProvider.apiKeySet && (
|
|
<p className="text-xs text-destructive">{t("setting.ai.transcription-warning-no-key")}</p>
|
|
)}
|
|
{referencedProvider?.type === InstanceSetting_AIProviderType.GEMINI && (
|
|
<p className="text-xs text-muted-foreground">{t("setting.ai.transcription-warning-gemini-webm")}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5 sm:col-span-2">
|
|
<Label>{t("setting.ai.transcription-model")}</Label>
|
|
<Input
|
|
value={transcription.model}
|
|
onChange={(e) => update({ model: e.target.value })}
|
|
placeholder={placeholderForProvider(referencedProvider)}
|
|
disabled={!transcription.providerId}
|
|
maxLength={256}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">{t("setting.ai.transcription-model-help")}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label>{t("setting.ai.transcription-language")}</Label>
|
|
<Input
|
|
value={transcription.language}
|
|
onChange={(e) => update({ language: e.target.value })}
|
|
placeholder={t("setting.ai.transcription-language-placeholder")}
|
|
disabled={!transcription.providerId}
|
|
maxLength={32}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">{t("setting.ai.transcription-language-help")}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5 sm:col-span-2">
|
|
<Label>{t("setting.ai.transcription-prompt")}</Label>
|
|
<Textarea
|
|
value={transcription.prompt}
|
|
onChange={(e) => update({ prompt: e.target.value })}
|
|
placeholder={t("setting.ai.transcription-prompt-placeholder")}
|
|
rows={3}
|
|
disabled={!transcription.providerId}
|
|
maxLength={4096}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">{t("setting.ai.transcription-prompt-help")}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface AIProviderDialogProps {
|
|
provider?: LocalAIProvider;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSave: (provider: LocalAIProvider) => void;
|
|
}
|
|
|
|
const AIProviderDialog = ({ provider, onOpenChange, onSave }: AIProviderDialogProps) => {
|
|
const t = useTranslate();
|
|
const [draft, setDraft] = useState<LocalAIProvider>(() => provider ?? newProvider());
|
|
|
|
useEffect(() => {
|
|
const next = provider ?? newProvider();
|
|
setDraft(next);
|
|
}, [provider]);
|
|
|
|
const updateDraft = (partial: Partial<LocalAIProvider>) => {
|
|
setDraft((prev) => ({ ...prev, ...partial }));
|
|
};
|
|
|
|
const handleSave = () => {
|
|
onSave(draft);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={!!provider} onOpenChange={onOpenChange}>
|
|
<DialogContent size="2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{provider?.apiKeySet ? t("setting.ai.edit-provider") : t("setting.ai.add-provider")}</DialogTitle>
|
|
<DialogDescription>{t("setting.ai.dialog-description")}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label>{t("setting.ai.provider-title")}</Label>
|
|
<Input value={draft.title} onChange={(e) => updateDraft({ title: e.target.value })} placeholder="OpenAI" />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label>{t("setting.ai.provider-type")}</Label>
|
|
<Select
|
|
value={String(draft.type)}
|
|
onValueChange={(value) => updateDraft({ type: Number(value) as InstanceSetting_AIProviderType })}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{providerTypeOptions.map((type) => (
|
|
<SelectItem key={type} value={String(type)}>
|
|
{getProviderTypeLabel(type)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5 sm:col-span-2">
|
|
<Label>{t("setting.ai.endpoint")}</Label>
|
|
<Input
|
|
value={draft.endpoint}
|
|
onChange={(e) => updateDraft({ endpoint: e.target.value })}
|
|
placeholder={getDefaultEndpointPlaceholder(draft.type)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">{t("setting.ai.endpoint-hint")}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5 sm:col-span-2">
|
|
<Label>{t("setting.ai.api-key")}</Label>
|
|
<Input
|
|
type="password"
|
|
value={draft.apiKey}
|
|
onChange={(e) => updateDraft({ apiKey: e.target.value })}
|
|
placeholder={draft.apiKeySet ? t("setting.ai.keep-api-key") : ""}
|
|
/>
|
|
{draft.apiKeySet && (
|
|
<p className="text-xs text-muted-foreground">{t("setting.ai.current-key", { key: draft.apiKeyHint || "-" })}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
<Button onClick={handleSave}>{t("common.save")}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const getDefaultEndpointPlaceholder = (type: InstanceSetting_AIProviderType) => {
|
|
switch (type) {
|
|
case InstanceSetting_AIProviderType.OPENAI:
|
|
return "https://api.openai.com/v1";
|
|
case InstanceSetting_AIProviderType.GEMINI:
|
|
return "https://generativelanguage.googleapis.com/v1beta";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
|
|
export default AISection;
|