74 lines
4.6 KiB
TypeScript
74 lines
4.6 KiB
TypeScript
import { useState } from "react";
|
||
import useSWR from "swr";
|
||
import { Check, ChevronDown, SlidersHorizontal } from "lucide-react";
|
||
import { fetchSpeechVoiceCatalog } from "../speech-voice-catalog";
|
||
import { Button } from "@/shared/ui/button";
|
||
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/shared/ui/command";
|
||
import { getSpeechVoiceDescription, getSpeechVoiceName, setSelectedSpeechVoice, useSelectedSpeechVoice } from "../speech-voices";
|
||
import { AGENT_MESSAGE_ACTION_CLASS_NAME, AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME } from "./agent-chat-message-chrome";
|
||
|
||
export function AgentSpeechVoicePicker() {
|
||
const [open, setOpen] = useState(false);
|
||
const selected = useSelectedSpeechVoice();
|
||
const { data, error, isLoading, mutate } = useSWR("/api/tts/edge/voices", fetchSpeechVoiceCatalog, {
|
||
revalidateOnFocus: false, revalidateOnReconnect: false, dedupingInterval: 60 * 60 * 1_000,
|
||
shouldRetryOnError: false
|
||
});
|
||
const selectedVoice = data?.voices.find((voice) => voice.id === (selected || data.defaultVoice));
|
||
const defaultVoice = data?.voices.find((voice) => voice.id === data.defaultVoice);
|
||
const selectedName = selectedVoice ? getSpeechVoiceName(selectedVoice) : selected ? "已选音色" : "默认音色";
|
||
const choose = (id: string) => { setSelectedSpeechVoice(id); setOpen(false); };
|
||
return (
|
||
<Popover open={open} onOpenChange={setOpen}>
|
||
<PopoverTrigger asChild>
|
||
<Button variant="ghost" size="sm" className={AGENT_MESSAGE_ACTION_CLASS_NAME}
|
||
aria-label={`选择朗读音色，当前${selectedName}`} title={`朗读音色：${selectedName}`}>
|
||
<SlidersHorizontal size={16} aria-hidden="true" />
|
||
<span className={AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME}>音色</span>
|
||
<ChevronDown className="size-3" aria-hidden="true" />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent data-agent-theme="chat" align="end" side="top" collisionPadding={12} className="z-[90] w-80 overflow-hidden p-0" aria-label="选择朗读音色">
|
||
<div className="border-b px-3 py-2">
|
||
<p className="text-sm font-medium">普通话音色</p>
|
||
<p className="text-xs text-muted-foreground">{data ? `${data.voices.length} 种音色，选择后下次播放生效` : "选择后下次播放生效"}</p>
|
||
</div>
|
||
<Command loop>
|
||
<CommandInput placeholder="搜索普通话音色" aria-label="搜索音色" />
|
||
<CommandList className="max-h-[min(320px,calc(var(--radix-popover-content-available-height)-180px))] overscroll-contain">
|
||
{isLoading ? <p role="status" className="p-3 text-sm text-muted-foreground">正在加载音色…</p> : null}
|
||
{error ? <div role="alert" className="p-3 text-sm">
|
||
<p>音色列表加载失败</p>
|
||
{error instanceof Error ? <p className="mt-1 text-xs text-muted-foreground">{error.message}</p> : null}
|
||
<Button variant="link" size="sm" className="px-0" onClick={() => void mutate()}>重新加载音色</Button>
|
||
</div> : null}
|
||
<CommandEmpty>没有找到匹配的音色</CommandEmpty>
|
||
<CommandGroup>
|
||
<CommandItem value="default 默认音色" onSelect={() => choose("")}>
|
||
<span className="flex-1">默认音色{defaultVoice ? `（${getSpeechVoiceName(defaultVoice)}）` : ""}</span>
|
||
{!selected ? <Check aria-hidden="true" /> : null}
|
||
</CommandItem>
|
||
</CommandGroup>
|
||
{selected && data && !selectedVoice ? <p role="status" className="px-3 py-2 text-xs text-muted-foreground">原选音色已不可用，请重新选择。</p> : null}
|
||
<CommandGroup>
|
||
{data?.voices.map((voice) => {
|
||
const name = getSpeechVoiceName(voice);
|
||
const description = getSpeechVoiceDescription(voice);
|
||
return <CommandItem key={voice.id} value={`${voice.id} ${name} ${description} ${voice.name}`} onSelect={() => choose(voice.id)}>
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block break-words text-sm">{name}</span>
|
||
<span className="block break-words text-xs text-muted-foreground">{description}</span>
|
||
</span>
|
||
{selected === voice.id ? <Check aria-hidden="true" /> : null}
|
||
</CommandItem>;
|
||
})}
|
||
</CommandGroup>
|
||
</CommandList>
|
||
</Command>
|
||
<p className="border-t px-3 py-2 text-xs text-muted-foreground">音色偏好保存在当前浏览器。</p>
|
||
</PopoverContent>
|
||
</Popover>
|
||
);
|
||
}
|