Improve UI
This commit is contained in:
Xin Wang
@@ -520,34 +520,46 @@ export const AssistantsPage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-white flex items-center">
|
||||
<MessageSquare className="w-4 h-4 mr-2 text-primary"/> 开场白 (Opener)
|
||||
</label>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<label className="text-sm font-medium text-white flex items-center">
|
||||
<MessageSquare className="w-4 h-4 mr-2 text-primary"/> 开场白
|
||||
</label>
|
||||
<div className="inline-flex rounded-lg border border-white/10 bg-white/5 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateAssistant('generatedOpenerEnabled', false)}
|
||||
className={`px-3 py-1 text-xs rounded-md transition-colors ${
|
||||
selectedAssistant.generatedOpenerEnabled === true
|
||||
? 'text-muted-foreground hover:text-foreground'
|
||||
: 'bg-primary text-primary-foreground shadow-sm'
|
||||
}`}
|
||||
>
|
||||
手动输入
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateAssistant('generatedOpenerEnabled', true)}
|
||||
className={`px-3 py-1 text-xs rounded-md transition-colors ${
|
||||
selectedAssistant.generatedOpenerEnabled === true
|
||||
? 'bg-primary text-primary-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
自动生成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
value={selectedAssistant.opener}
|
||||
onChange={(e) => updateAssistant('opener', e.target.value)}
|
||||
placeholder="例如：您好，我是您的专属AI助手..."
|
||||
placeholder={selectedAssistant.generatedOpenerEnabled === true ? '将基于提示词自动生成开场白' : '例如：您好，我是您的专属AI助手...'}
|
||||
disabled={selectedAssistant.generatedOpenerEnabled === true}
|
||||
className="bg-white/5 border-white/10 focus:border-primary/50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">接通通话后的第一句话。</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-white flex items-center">
|
||||
<Sparkles className="w-4 h-4 mr-2 text-primary" /> Generated Opener
|
||||
</label>
|
||||
<label className="flex h-12 items-center justify-between rounded-xl border border-white/10 bg-white/5 px-4 text-sm">
|
||||
<span className="text-foreground">自动生成开场白</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedAssistant.generatedOpenerEnabled === true}
|
||||
onChange={(e) => updateAssistant('generatedOpenerEnabled', e.target.checked)}
|
||||
className="accent-primary"
|
||||
/>
|
||||
</label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
开启后，系统将自动生成开场白，手动开场白输入框会暂时禁用。
|
||||
{selectedAssistant.generatedOpenerEnabled === true
|
||||
? '通话接通后将根据提示词自动生成开场白。'
|
||||
: '接通通话后的第一句话。'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -656,26 +668,37 @@ export const AssistantsPage: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-white flex items-center">
|
||||
<Volume2 className="w-4 h-4 mr-2 text-primary" /> 启用语音输出
|
||||
</label>
|
||||
<label className="flex h-12 items-center justify-between rounded-xl border border-white/10 bg-white/5 px-4 text-sm">
|
||||
<span className="text-foreground">TTS 输出</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedAssistant.voiceOutputEnabled !== false}
|
||||
onChange={(e) => updateAssistant('voiceOutputEnabled', e.target.checked)}
|
||||
className="accent-primary"
|
||||
/>
|
||||
</label>
|
||||
<p className="text-xs text-muted-foreground">关闭后将进入纯文本输出模式，不会产生语音音频。</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<label className="text-sm font-medium text-white flex items-center">
|
||||
<Volume2 className="w-4 h-4 mr-2 text-primary"/> 语音输出
|
||||
</label>
|
||||
<div className="inline-flex rounded-lg border border-white/10 bg-white/5 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateAssistant('voiceOutputEnabled', false)}
|
||||
className={`px-3 py-1 text-xs rounded-md transition-colors ${
|
||||
selectedAssistant.voiceOutputEnabled !== false
|
||||
? 'text-muted-foreground hover:text-foreground'
|
||||
: 'bg-primary text-primary-foreground shadow-sm'
|
||||
}`}
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateAssistant('voiceOutputEnabled', true)}
|
||||
className={`px-3 py-1 text-xs rounded-md transition-colors ${
|
||||
selectedAssistant.voiceOutputEnabled !== false
|
||||
? 'bg-primary text-primary-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
开启
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-white flex items-center">
|
||||
<Volume2 className="w-4 h-4 mr-2 text-primary"/> 选择音色 (From Voice Library)
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<select
|
||||
className="flex h-12 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-1 text-sm shadow-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground appearance-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
@@ -695,30 +718,45 @@ export const AssistantsPage: React.FC = () => {
|
||||
<p className="text-xs text-muted-foreground flex items-center mt-1">
|
||||
<Sparkles className="w-3 h-3 mr-1 text-primary opacity-70" />
|
||||
{selectedAssistant.voiceOutputEnabled === false
|
||||
? '启用语音输出后才可选择音色。'
|
||||
? '已关闭语音输出，仅文本回复。开启后可选择音色。'
|
||||
: '音色配置同步自声音库。如需添加更多音色，请前往“声音库”模块。'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 pt-2">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<label className="text-sm font-medium text-white flex items-center">
|
||||
<ArrowLeftRight className="w-4 h-4 mr-2 text-primary" /> Bot cannot be interrupted
|
||||
</label>
|
||||
<label className="flex h-12 items-center justify-between rounded-xl border border-white/10 bg-white/5 px-4 text-sm">
|
||||
<span className="text-foreground">机器人不可打断</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedAssistant.botCannotBeInterrupted === true}
|
||||
onChange={(e) => updateAssistant('botCannotBeInterrupted', e.target.checked)}
|
||||
className="accent-primary"
|
||||
/>
|
||||
<ArrowLeftRight className="w-4 h-4 mr-2 text-primary" /> 打断控制
|
||||
</label>
|
||||
<div className="inline-flex rounded-lg border border-white/10 bg-white/5 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateAssistant('botCannotBeInterrupted', false)}
|
||||
className={`px-3 py-1 text-xs rounded-md transition-colors ${
|
||||
selectedAssistant.botCannotBeInterrupted === true
|
||||
? 'text-muted-foreground hover:text-foreground'
|
||||
: 'bg-primary text-primary-foreground shadow-sm'
|
||||
}`}
|
||||
>
|
||||
可打断
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateAssistant('botCannotBeInterrupted', true)}
|
||||
className={`px-3 py-1 text-xs rounded-md transition-colors ${
|
||||
selectedAssistant.botCannotBeInterrupted === true
|
||||
? 'bg-primary text-primary-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
不可打断
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<label className={`text-sm font-medium flex items-center ${canAdjustInterruptionSensitivity ? 'text-white' : 'text-muted-foreground'}`}>
|
||||
<Timer className="w-4 h-4 mr-2 text-primary"/> 打断灵敏度 (Interruption Sensitivity)
|
||||
<Timer className="w-4 h-4 mr-2 text-primary"/> 打断灵敏度
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
@@ -746,14 +784,14 @@ export const AssistantsPage: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
<div className={`flex justify-between text-[10px] font-mono uppercase tracking-widest px-0.5 ${canAdjustInterruptionSensitivity ? 'text-muted-foreground opacity-50' : 'text-muted-foreground/60 opacity-35'}`}>
|
||||
<span>0ms (Extreme)</span>
|
||||
<span>0ms（极易打断）</span>
|
||||
<span>1000ms</span>
|
||||
<span>2000ms (Lazy)</span>
|
||||
<span>2000ms（较难打断）</span>
|
||||
</div>
|
||||
<p className={`text-xs pt-1 italic ${canAdjustInterruptionSensitivity ? 'text-muted-foreground opacity-60' : 'text-muted-foreground/70 opacity-50'}`}>
|
||||
{canAdjustInterruptionSensitivity
|
||||
? '* 定义用户说话多长时间后 AI 应当停止当前的发言并响应。数值越小响应越快，但也更容易被噪音误导打断。'
|
||||
: '* 当前已开启“机器人不可打断”，VAD 打断灵敏度已禁用。'}
|
||||
? '用户持续说话达到该时长后，AI 将停止当前发言并响应。数值越小越敏感，也更容易被噪音触发。'
|
||||
: '当前为“不可打断”，打断灵敏度已禁用。'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user