Update components/LiveAssistant.tsx

components/LiveAssistant.tsx

@@ -1,10 +1,10 @@
 
 import React, { useState, useRef, useEffect } from 'react';
-import { Mic, Power, Loader2, Bot, Volume2, Radio, RefreshCw, ChevronDown } from 'lucide-react';
+import { Mic, Power, Loader2, Bot, Volume2, Radio, RefreshCw, ChevronDown, Square, StopCircle } from 'lucide-react';
 import { api } from '../services/api';
 
 // --- Audio Types & Helpers ---
-const INPUT_SAMPLE_RATE = 16000;
+const TARGET_SAMPLE_RATE = 16000;
 const OUTPUT_SAMPLE_RATE = 24000;
 
 function base64ToUint8Array(base64: string) {
@@ -17,6 +17,26 @@ function base64ToUint8Array(base64: string) {
   return bytes;
 }
 
+// Simple downsampling algorithm (e.g. 48000 -> 16000)
+function downsampleBuffer(buffer: Float32Array, inputRate: number, outputRate: number) {
+    if (outputRate === inputRate) {
+        return buffer;
+    }
+    const compression = inputRate / outputRate;
+    const length = Math.ceil(buffer.length / compression);
+    const result = new Float32Array(length);
+    let index = 0;
+    let inputIndex = 0;
+
+    while (index < length) {
+        const intIndex = Math.floor(inputIndex);
+        result[index] = buffer[intIndex] || 0; 
+        index++;
+        inputIndex += compression;
+    }
+    return result;
+}
+
 export const LiveAssistant: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [status, setStatus] = useState<'DISCONNECTED' | 'CONNECTING' | 'CONNECTED' | 'LISTENING' | 'THINKING' | 'SPEAKING'>('DISCONNECTED');
@@ -28,7 +48,7 @@ export const LiveAssistant: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const dragRef = useRef({ isDragging: false, startX: 0, startY: 0, initialLeft: 0, initialTop: 0 });
   const hasMovedRef = useRef(false);
-  const prevButtonPos = useRef<{x: number, y: number} | null>(null); // Store pos before expand
+  const prevButtonPos = useRef<{x: number, y: number} | null>(null); 
 
   // Audio Refs
   const audioContextRef = useRef<AudioContext | null>(null); // Output Context
@@ -44,7 +64,7 @@ export const LiveAssistant: React.FC = () => {
   const volumeIntervalRef = useRef<any>(null);
   
   // State Refs for async safety
-  const isRecordingIntentRef = useRef(false);
+  const isRecordingRef = useRef(false);
 
   useEffect(() => {
       if (!isOpen) {
@@ -152,7 +172,6 @@ export const LiveAssistant: React.FC = () => {
               if (position) prevButtonPos.current = position;
               setIsOpen(true);
           } else {
-              // Closing (via button click, though typically via minimize button)
               setIsOpen(false);
           }
       }
@@ -160,7 +179,7 @@ export const LiveAssistant: React.FC = () => {
 
   const handleMinimize = () => {
       setIsOpen(false);
-      // Restore previous button position if it exists, otherwise leave it where it is (or reset)
+      // Restore previous button position if it exists
       if (prevButtonPos.current) {
           setPosition(prevButtonPos.current);
       }
@@ -200,7 +219,7 @@ export const LiveAssistant: React.FC = () => {
           ws.onopen = () => {
               console.log('WS Open');
               setStatus('CONNECTED');
-              setTranscript('连接成功，请按住麦克风说话');
+              setTranscript('连接成功，点击麦克风开始说话');
           };
 
           ws.onmessage = async (event) => {
@@ -277,16 +296,24 @@ export const LiveAssistant: React.FC = () => {
       }
   };
 
+  const toggleRecording = async () => {
+      if (status === 'LISTENING') {
+          stopRecording();
+      } else {
+          startRecording();
+      }
+  };
+
   const startRecording = async () => {
+      // Allow interrupting Speaker to talk
       if (status !== 'CONNECTED' && status !== 'SPEAKING') return;
       
       try {
-          isRecordingIntentRef.current = true;
-          if (status === 'SPEAKING') setStatus('CONNECTED'); 
-
+          isRecordingRef.current = true;
+          
+          // 1. Get Stream
           const stream = await navigator.mediaDevices.getUserMedia({ 
               audio: { 
-                  sampleRate: INPUT_SAMPLE_RATE,
                   channelCount: 1,
                   echoCancellation: true,
                   autoGainControl: true,
@@ -294,24 +321,24 @@ export const LiveAssistant: React.FC = () => {
               }
           });
           
-          // Safety check: if user released mouse while getting stream
-          if (!isRecordingIntentRef.current) {
+          if (!isRecordingRef.current) {
               stream.getTracks().forEach(t => t.stop());
               return;
           }
 
           mediaStreamRef.current = stream;
           
+          // 2. Create Input Context
           // @ts-ignore
           const AudioCtor = window.AudioContext || window.webkitAudioContext;
-          const ctx = new AudioCtor({ sampleRate: INPUT_SAMPLE_RATE });
+          const ctx = new AudioCtor(); 
           inputAudioContextRef.current = ctx;
           await ctx.resume();
 
           const source = ctx.createMediaStreamSource(stream);
           const processor = ctx.createScriptProcessor(4096, 1, 1);
           
-          // Create a mute gain node to prevent feedback while keeping the processor alive
+          // Mute gain to prevent feedback loop
           const muteGain = ctx.createGain();
           muteGain.gain.value = 0;
 
@@ -319,17 +346,25 @@ export const LiveAssistant: React.FC = () => {
           processor.connect(muteGain);
           muteGain.connect(ctx.destination);
           
+          const contextSampleRate = ctx.sampleRate; // e.g. 48000 or 44100
+
           processor.onaudioprocess = (e) => {
-              if (!isRecordingIntentRef.current) return; 
+              if (!isRecordingRef.current) return; 
 
               const inputData = e.inputBuffer.getChannelData(0);
-              const l = inputData.length;
+              
+              // 3. DOWNSAMPLE if necessary (Force to 16000 for backend compatibility)
+              const downsampledData = downsampleBuffer(inputData, contextSampleRate, TARGET_SAMPLE_RATE);
+
+              // 4. Convert to PCM16
+              const l = downsampledData.length;
               const int16Data = new Int16Array(l);
               for (let i = 0; i < l; i++) {
-                  int16Data[i] = Math.max(-1, Math.min(1, inputData[i])) * 32767; // Clamp and convert
+                  let s = Math.max(-1, Math.min(1, downsampledData[i]));
+                  int16Data[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
               }
               
-              // Raw PCM -> Base64
+              // 5. Send
               let binary = '';
               const bytes = new Uint8Array(int16Data.buffer);
               const len = bytes.byteLength;
@@ -354,13 +389,13 @@ export const LiveAssistant: React.FC = () => {
 
       } catch (e) {
           console.error(e);
-          isRecordingIntentRef.current = false;
+          isRecordingRef.current = false;
           setTranscript('无法访问麦克风');
       }
   };
 
   const stopRecording = () => {
-      isRecordingIntentRef.current = false;
+      isRecordingRef.current = false;
       
       // Cleanup Mic Processing
       if (processorRef.current) {
@@ -434,7 +469,7 @@ export const LiveAssistant: React.FC = () => {
                 >
                     <div className="flex items-center gap-2">
                         <div className={`w-2 h-2 rounded-full ${status === 'DISCONNECTED' ? 'bg-red-500' : 'bg-green-500 animate-pulse'}`}></div>
-                        <span className="font-bold text-sm">AI 实时通话 (代理模式)</span>
+                        <span className="font-bold text-sm">AI 实时通话 (Toggle模式)</span>
                     </div>
                     <div className="flex gap-2">
                         <button onClick={handleDisconnect} title="重置" className="hover:bg-white/10 p-1.5 rounded-full text-gray-400 hover:text-white transition-colors cursor-pointer" onMouseDown={e=>e.stopPropagation()}><RefreshCw size={16}/></button>
@@ -447,7 +482,7 @@ export const LiveAssistant: React.FC = () => {
                         <div 
                             className={`absolute inset-0 rounded-full blur-2xl transition-all duration-300 ${
                                 status === 'SPEAKING' ? 'bg-blue-500/40' : 
-                                status === 'LISTENING' ? 'bg-green-500/40' : 
+                                status === 'LISTENING' ? 'bg-red-500/40' : 
                                 status === 'THINKING' ? 'bg-purple-500/40' : 'bg-gray-500/10'
                             }`}
                             style={{ opacity: 0.5 + (volumeLevel / 200) }}
@@ -462,12 +497,12 @@ export const LiveAssistant: React.FC = () => {
                         ></div>
                         <div className={`z-10 w-24 h-24 rounded-full flex items-center justify-center text-white shadow-xl transition-colors duration-500 ${
                             status === 'SPEAKING' ? 'bg-blue-600' : 
-                            status === 'LISTENING' ? 'bg-green-600' : 
+                            status === 'LISTENING' ? 'bg-red-500' : 
                             status === 'THINKING' ? 'bg-purple-600' : 
                             status === 'CONNECTED' ? 'bg-slate-700' : 'bg-slate-800'
                         }`}>
                             {status === 'SPEAKING' ? <Volume2 size={40} className="animate-pulse"/> : 
-                             status === 'LISTENING' ? <Mic size={40} className="animate-bounce"/> :
+                             status === 'LISTENING' ? <Mic size={40} className="animate-pulse"/> :
                              status === 'THINKING' ? <Loader2 size={40} className="animate-spin"/> :
                              status === 'CONNECTED' ? <Radio size={40}/> : <Power size={40}/>}
                         </div>
@@ -476,13 +511,13 @@ export const LiveAssistant: React.FC = () => {
                     <div className="mt-8 text-center px-4 w-full">
                         <p className={`text-sm font-bold uppercase tracking-wider mb-2 ${
                             status === 'SPEAKING' ? 'text-blue-400' : 
-                            status === 'LISTENING' ? 'text-green-400' : 
+                            status === 'LISTENING' ? 'text-red-400' : 
                             status === 'THINKING' ? 'text-purple-400' : 'text-gray-500'
                         }`}>
                             {status === 'DISCONNECTED' ? '未连接' : 
                              status === 'CONNECTING' ? '连接中...' :
                              status === 'CONNECTED' ? '准备就绪' : 
-                             status === 'LISTENING' ? '正在聆听...' : 
+                             status === 'LISTENING' ? '正在录音...' : 
                              status === 'THINKING' ? '思考中...' : '正在说话'}
                         </p>
                         <p className="text-white text-lg font-medium leading-relaxed min-h-[3rem] line-clamp-3 transition-all">
@@ -503,23 +538,21 @@ export const LiveAssistant: React.FC = () => {
                         <div className="flex items-center gap-4 w-full justify-center">
                             <div className="relative group">
                                 <button 
-                                    onMouseDown={startRecording}
-                                    onMouseUp={stopRecording}
-                                    onMouseLeave={stopRecording}
-                                    onTouchStart={(e) => { e.preventDefault(); startRecording(); }}
-                                    onTouchEnd={(e) => { e.preventDefault(); stopRecording(); }}
+                                    onClick={toggleRecording}
                                     className={`w-20 h-20 rounded-full flex items-center justify-center shadow-lg transition-all transform ${
-                                        status === 'LISTENING' ? 'bg-green-500 scale-110 ring-4 ring-green-500/30' : 
-                                        'bg-white text-slate-900 hover:bg-gray-100'
+                                        status === 'LISTENING' ? 'bg-red-500 hover:bg-red-600 scale-110 ring-4 ring-red-500/30' : 
+                                        'bg-white text-slate-900 hover:bg-gray-100 hover:scale-105'
                                     }`}
                                 >
-                                    <Mic size={32} fill={status==='LISTENING' ? 'white' : 'currentColor'} className={status==='LISTENING'?'text-white':''}/>
+                                    {status === 'LISTENING' ? (
+                                        <Square size={28} fill="white" className="text-white" />
+                                    ) : (
+                                        <Mic size={32} fill="currentColor" />
+                                    )}
                                 </button>
-                                {status === 'CONNECTED' && (
-                                    <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs text-gray-400 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
-                                        按住说话
-                                    </div>
-                                )}
+                                <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs text-gray-400 whitespace-nowrap opacity-80 mt-2">
+                                    {status === 'LISTENING' ? '点击停止' : '点击说话'}
+                                </div>
                             </div>
                         </div>
                     )}