Update components/LiveAssistant.tsx

components/LiveAssistant.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState, useRef, useEffect } from 'react';
-import { Mic, Power, Loader2, Bot, Volume2, Radio, RefreshCw, ChevronDown, Square, StopCircle } from 'lucide-react';
+import { Mic, Loader2, Bot, Volume2, Radio, RefreshCw, ChevronDown, Phone, PhoneOff } from 'lucide-react';
 import { api } from '../services/api';
 
 // --- Audio Types & Helpers ---
@@ -17,7 +17,7 @@ function base64ToUint8Array(base64: string) {
   return bytes;
 }
 
-// Simple downsampling algorithm (e.g. 48000 -> 16000)
+// Downsampling: Force input to 16kHz for backend compatibility
 function downsampleBuffer(buffer: Float32Array, inputRate: number, outputRate: number) {
     if (outputRate === inputRate) {
         return buffer;
@@ -179,7 +179,6 @@ export const LiveAssistant: React.FC = () => {
 
   const handleMinimize = () => {
       setIsOpen(false);
-      // Restore previous button position if it exists
       if (prevButtonPos.current) {
           setPosition(prevButtonPos.current);
       }
@@ -205,10 +204,11 @@ export const LiveAssistant: React.FC = () => {
       if (!user) return;
 
       setStatus('CONNECTING');
-      setTranscript('正在连接服务器...');
+      setTranscript('正在呼叫 AI 助理...');
 
       try {
           initOutputAudioContext();
+          
           const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
           const wsUrl = `${protocol}//${window.location.host}/ws/live?userId=${user._id}&username=${encodeURIComponent(user.username)}`;
           
@@ -216,10 +216,13 @@ export const LiveAssistant: React.FC = () => {
           const ws = new WebSocket(wsUrl);
           wsRef.current = ws;
 
-          ws.onopen = () => {
+          ws.onopen = async () => {
               console.log('WS Open');
               setStatus('CONNECTED');
-              setTranscript('连接成功，点击麦克风开始说话');
+              setTranscript('通话已接通');
+              
+              // Automatically start recording once connected (simulate phone call behavior)
+              await startRecording();
           };
 
           ws.onmessage = async (event) => {
@@ -238,14 +241,14 @@ export const LiveAssistant: React.FC = () => {
 
           ws.onerror = (e) => {
               console.error('WS Error', e);
-              setTranscript('连接服务器失败');
+              setTranscript('连接中断');
               handleDisconnect();
           };
 
       } catch (e) {
           console.error("Connect failed", e);
           setStatus('DISCONNECTED');
-          setTranscript('连接失败');
+          setTranscript('呼叫失败');
       }
   };
 
@@ -279,7 +282,7 @@ export const LiveAssistant: React.FC = () => {
           
           source.onended = () => {
               if (ctx.currentTime >= nextPlayTimeRef.current - 0.1) {
-                  setStatus('CONNECTED'); 
+                  setStatus('LISTENING'); 
               }
           };
       }
@@ -296,17 +299,8 @@ 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;
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
       
       try {
           isRecordingRef.current = true;
@@ -338,7 +332,7 @@ export const LiveAssistant: React.FC = () => {
           const source = ctx.createMediaStreamSource(stream);
           const processor = ctx.createScriptProcessor(4096, 1, 1);
           
-          // Mute gain to prevent feedback loop
+          // Mute gain
           const muteGain = ctx.createGain();
           muteGain.gain.value = 0;
 
@@ -346,14 +340,14 @@ export const LiveAssistant: React.FC = () => {
           processor.connect(muteGain);
           muteGain.connect(ctx.destination);
           
-          const contextSampleRate = ctx.sampleRate; // e.g. 48000 or 44100
+          const contextSampleRate = ctx.sampleRate; 
 
           processor.onaudioprocess = (e) => {
               if (!isRecordingRef.current) return; 
 
               const inputData = e.inputBuffer.getChannelData(0);
               
-              // 3. DOWNSAMPLE if necessary (Force to 16000 for backend compatibility)
+              // 3. Downsample to 16000Hz for API compatibility
               const downsampledData = downsampleBuffer(inputData, contextSampleRate, TARGET_SAMPLE_RATE);
 
               // 4. Convert to PCM16
@@ -385,19 +379,18 @@ export const LiveAssistant: React.FC = () => {
           processorRef.current = processor;
           
           setStatus('LISTENING');
-          setTranscript('正在聆听...');
+          // Don't set transcript here, keep "Connected" message until AI speaks or user status changes
 
       } catch (e) {
           console.error(e);
           isRecordingRef.current = false;
-          setTranscript('无法访问麦克风');
+          setTranscript('麦克风访问失败');
       }
   };
 
   const stopRecording = () => {
       isRecordingRef.current = false;
       
-      // Cleanup Mic Processing
       if (processorRef.current) {
           processorRef.current.disconnect();
           processorRef.current = null;
@@ -414,11 +407,6 @@ export const LiveAssistant: React.FC = () => {
           inputAudioContextRef.current.close().catch(()=>{});
           inputAudioContextRef.current = null;
       }
-      
-      if (status === 'LISTENING') {
-          setStatus('THINKING');
-          setTranscript('思考中...');
-      }
   };
 
   const handleDisconnect = () => {
@@ -461,7 +449,7 @@ export const LiveAssistant: React.FC = () => {
 
         {isOpen && (
             <div className="bg-slate-900 w-80 md:w-96 rounded-3xl shadow-2xl border border-slate-700 overflow-hidden flex flex-col animate-in slide-in-from-bottom-5 fade-in duration-300 h-[500px]">
-                {/* Draggable Header */}
+                {/* Header */}
                 <div 
                     className="bg-slate-800/50 p-4 flex justify-between items-center text-white shrink-0 backdrop-blur-md cursor-move select-none"
                     onMouseDown={handleDragStart}
@@ -469,55 +457,62 @@ 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 实时通话 (Toggle模式)</span>
+                        <span className="font-bold text-sm">AI 实时通话</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>
+                        {status === 'DISCONNECTED' && (
+                            <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>
+                        )}
                         <button onClick={handleMinimize} 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()}><ChevronDown size={20}/></button>
                     </div>
                 </div>
 
+                {/* Main Visual */}
                 <div className="flex-1 flex flex-col items-center justify-center p-6 relative">
                     <div className={`relative w-40 h-40 flex items-center justify-center transition-all duration-500 ${status === 'LISTENING' ? 'scale-110' : 'scale-100'}`}>
+                        {/* Pulse Effect */}
                         <div 
                             className={`absolute inset-0 rounded-full blur-2xl transition-all duration-300 ${
                                 status === 'SPEAKING' ? 'bg-blue-500/40' : 
-                                status === 'LISTENING' ? 'bg-red-500/40' : 
+                                status === 'LISTENING' ? 'bg-green-500/40' : 
                                 status === 'THINKING' ? 'bg-purple-500/40' : 'bg-gray-500/10'
                             }`}
                             style={{ opacity: 0.5 + (volumeLevel / 200) }}
                         ></div>
+                        {/* Ripple 1 */}
                         <div 
                             className={`absolute inset-0 rounded-full border-2 border-white/10 transition-all duration-100`}
                             style={{ transform: `scale(${1 + volumeLevel/100})` }}
                         ></div>
+                        {/* Ripple 2 */}
                         <div 
                             className={`absolute inset-0 rounded-full border border-white/20 transition-all duration-100 delay-75`}
                             style={{ transform: `scale(${1 + volumeLevel/150})` }}
                         ></div>
+                        {/* Center Icon */}
                         <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-red-500' : 
+                            status === 'LISTENING' ? 'bg-green-600' : 
                             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-pulse"/> :
                              status === 'THINKING' ? <Loader2 size={40} className="animate-spin"/> :
-                             status === 'CONNECTED' ? <Radio size={40}/> : <Power size={40}/>}
+                             status === 'CONNECTED' ? <Radio size={40}/> : <Phone size={40}/>}
                         </div>
                     </div>
 
                     <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-red-400' : 
+                            status === 'LISTENING' ? 'text-green-400' : 
                             status === 'THINKING' ? 'text-purple-400' : 'text-gray-500'
                         }`}>
                             {status === 'DISCONNECTED' ? '未连接' : 
-                             status === 'CONNECTING' ? '连接中...' :
-                             status === 'CONNECTED' ? '准备就绪' : 
-                             status === 'LISTENING' ? '正在录音...' : 
+                             status === 'CONNECTING' ? '呼叫中...' :
+                             status === 'CONNECTED' ? '通话建立' : 
+                             status === 'LISTENING' ? '正在聆听...' : 
                              status === 'THINKING' ? '思考中...' : '正在说话'}
                         </p>
                         <p className="text-white text-lg font-medium leading-relaxed min-h-[3rem] line-clamp-3 transition-all">
@@ -526,32 +521,26 @@ export const LiveAssistant: React.FC = () => {
                     </div>
                 </div>
 
+                {/* Controls */}
                 <div className="p-6 pb-8 bg-slate-800/50 backdrop-blur-md border-t border-slate-700 flex justify-center">
                     {status === 'DISCONNECTED' ? (
                         <button 
                             onClick={handleConnect} 
-                            className="w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-bold flex items-center justify-center gap-2 transition-all hover:scale-[1.02] active:scale-95"
+                            className="w-full py-4 bg-green-500 hover:bg-green-600 text-white rounded-2xl font-bold flex items-center justify-center gap-2 transition-all hover:scale-[1.02] active:scale-95 shadow-lg shadow-green-500/30"
                         >
-                            <Power size={20}/> 开启 AI 语音
+                            <Phone size={24} fill="currentColor" /> 呼叫 AI 助理
                         </button>
                     ) : (
                         <div className="flex items-center gap-4 w-full justify-center">
                             <div className="relative group">
                                 <button 
-                                    onClick={toggleRecording}
-                                    className={`w-20 h-20 rounded-full flex items-center justify-center shadow-lg transition-all transform ${
-                                        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'
-                                    }`}
+                                    onClick={handleDisconnect}
+                                    className="w-20 h-20 rounded-full flex items-center justify-center shadow-2xl transition-all transform bg-red-500 hover:bg-red-600 text-white scale-100 hover:scale-110 active:scale-95 ring-4 ring-red-100"
                                 >
-                                    {status === 'LISTENING' ? (
-                                        <Square size={28} fill="white" className="text-white" />
-                                    ) : (
-                                        <Mic size={32} fill="currentColor" />
-                                    )}
+                                    <PhoneOff size={32} />
                                 </button>
-                                <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 className="absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs text-gray-400 whitespace-nowrap opacity-80 mt-2 font-bold">
+                                    挂断
                                 </div>
                             </div>
                         </div>