From 56ca95c200e4e7a6958e2f0b6d22ef973d953ea4 Mon Sep 17 00:00:00 2001
From: Xin Wang <wx44wx@XindeMac-mini.local>
Date: Thu, 12 Feb 2026 15:09:25 +0800
Subject: [PATCH] Improve UI

---
 web/pages/Assistants.tsx | 152 ++++++++++++++++++++++++---------------
 1 file changed, 95 insertions(+), 57 deletions(-)

diff --git a/web/pages/Assistants.tsx b/web/pages/Assistants.tsx
index 09820e6..157fcb7 100644
--- a/web/pages/Assistants.tsx
+++ b/web/pages/Assistants.tsx
@@ -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>