From 9cac01e31d3546789af274ac235932c6bc90f91f Mon Sep 17 00:00:00 2001
From: Xin Wang <wx44wx@XindeMac-mini.local>
Date: Mon, 9 Feb 2026 17:06:44 +0800
Subject: [PATCH] Improve audio debug drawer

---
 web/pages/Assistants.tsx | 38 +++++++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/web/pages/Assistants.tsx b/web/pages/Assistants.tsx
index 42690dc..f6df0ad 100644
--- a/web/pages/Assistants.tsx
+++ b/web/pages/Assistants.tsx
@@ -2014,16 +2014,7 @@ export const DebugDrawer: React.FC<{
                 <div className="flex-1 flex flex-col min-h-0 space-y-2">
                   {mode === 'voice' ? (
                     <div className="h-[68vh] min-h-[420px] max-h-[68vh] w-full flex flex-col min-h-0 overflow-hidden animate-in fade-in">
-                      <div className="mb-2 flex items-center gap-2 shrink-0">
-                        <select
-                          className="flex-1 text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-foreground"
-                          value={selectedMic}
-                          onChange={(e) => setSelectedMic(e.target.value)}
-                        >
-                          {devices.filter(d => d.kind === 'audioinput').map(d => (
-                            <option key={d.deviceId} value={d.deviceId}>{d.label || 'Mic'}</option>
-                          ))}
-                        </select>
+                      <div className="mb-2 flex items-center justify-end gap-2 shrink-0">
                         <div className="px-2 py-1 rounded border border-white/10 bg-black/20 text-[11px] text-muted-foreground inline-flex items-center gap-1.5">
                           <span className="h-1.5 w-1.5 rounded-full bg-green-400 animate-pulse" />
                           通话中
@@ -2051,14 +2042,24 @@ export const DebugDrawer: React.FC<{
                       <TranscriptionLog scrollRef={scrollRef} messages={messages} isLoading={isLoading} className="flex-1 min-h-0 overflow-y-auto" />
                     </div>
                   )}
-                  <Button variant="destructive" size="sm" className="w-full h-10 font-bold" onClick={handleHangup}>
-                    <PhoneOff className="mr-2 h-4 w-4" /> 结束通话
-                  </Button>
                 </div>
               )}
             </div>
 
             <div className={mode === 'text' && textSessionStarted ? 'shrink-0 mt-3 px-1 mb-3' : 'shrink-0 space-y-2 mt-2 px-1 mb-3'}>
+              {mode === 'voice' && (
+                <div className="w-full">
+                  <select
+                    className="w-full text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-foreground"
+                    value={selectedMic}
+                    onChange={(e) => setSelectedMic(e.target.value)}
+                  >
+                    {devices.filter(d => d.kind === 'audioinput').map(d => (
+                      <option key={d.deviceId} value={d.deviceId}>{d.label || 'Mic'}</option>
+                    ))}
+                  </select>
+                </div>
+              )}
               <div className="w-full flex items-center gap-2 min-w-0">
                 {mode === 'text' && textSessionStarted && (
                   <Button
@@ -2071,6 +2072,17 @@ export const DebugDrawer: React.FC<{
                     <span className="ml-1.5">结束测试</span>
                   </Button>
                 )}
+                {mode === 'voice' && callStatus === 'active' && (
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    className="h-9 px-3 font-bold shrink-0 whitespace-nowrap"
+                    onClick={handleHangup}
+                  >
+                    <PhoneOff className="h-4 w-4" />
+                    <span className="ml-1.5">结束通话</span>
+                  </Button>
+                )}
                 <Input
                   value={inputText}
                   onChange={e => setInputText(e.target.value)}