Update components/LiveAssistant.tsx

components/LiveAssistant.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState, useRef, useEffect } from 'react';
-import { Mic, X, Power, Loader2, Bot, Volume2, Radio, Activity, RefreshCw, ChevronDown, Move } from 'lucide-react';
+import { Mic, Power, Loader2, Bot, Volume2, Radio, RefreshCw, ChevronDown } from 'lucide-react';
 import { api } from '../services/api';
 
 // --- Audio Types & Helpers ---
@@ -28,29 +28,29 @@ 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
 
-  // Refs
+  // Audio Refs
   const audioContextRef = useRef<AudioContext | null>(null); // Output Context
-  const inputAudioContextRef = useRef<AudioContext | null>(null); // Input Context (New)
+  const inputAudioContextRef = useRef<AudioContext | null>(null); // Input Context
   
   const mediaStreamRef = useRef<MediaStream | null>(null);
   const processorRef = useRef<ScriptProcessorNode | null>(null);
   const sourceNodeRef = useRef<MediaStreamAudioSourceNode | null>(null);
-  const gainNodeRef = useRef<GainNode | null>(null);
   
   const wsRef = useRef<WebSocket | null>(null); 
   const nextPlayTimeRef = useRef<number>(0);
   const analyserRef = useRef<AnalyserNode | null>(null);
   const volumeIntervalRef = useRef<any>(null);
   
-  // Track recording state for the processor callback to avoid stale closures or race conditions
-  const isRecordingRef = useRef(false);
+  // State Refs for async safety
+  const isRecordingIntentRef = useRef(false);
 
   useEffect(() => {
       if (!isOpen) {
           handleDisconnect();
       }
-      // When opening/closing, ensure we stay within bounds if position exists
+      // Boundary check on open
       if (position && containerRef.current) {
           const { innerWidth, innerHeight } = window;
           const rect = containerRef.current.getBoundingClientRect();
@@ -65,6 +65,7 @@ export const LiveAssistant: React.FC = () => {
       };
   }, [isOpen]);
 
+  // Drag Logic
   useEffect(() => {
       const handleMove = (e: MouseEvent | TouchEvent) => {
           if (!dragRef.current.isDragging) return;
@@ -111,6 +112,7 @@ export const LiveAssistant: React.FC = () => {
       };
   }, []);
 
+  // Volume Visualizer
   useEffect(() => {
       if (status === 'DISCONNECTED') {
           setVolumeLevel(0);
@@ -129,42 +131,38 @@ export const LiveAssistant: React.FC = () => {
 
   const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {
       if (!containerRef.current) return;
-      
-      // Prevent default to stop scrolling on mobile while dragging
-      // e.preventDefault(); // Note: might block click if not careful, handled by checking dragging state
-
       const clientX = 'touches' in e ? e.touches[0].clientX : (e as React.MouseEvent).clientX;
       const clientY = 'touches' in e ? e.touches[0].clientY : (e as React.MouseEvent).clientY;
-      
       const rect = containerRef.current.getBoundingClientRect();
       
-      // If position is null (initial state), set it to current computed position
       if (!position) {
           setPosition({ x: rect.left, y: rect.top });
-          dragRef.current = {
-              isDragging: true,
-              startX: clientX,
-              startY: clientY,
-              initialLeft: rect.left,
-              initialTop: rect.top
-          };
+          dragRef.current = { isDragging: true, startX: clientX, startY: clientY, initialLeft: rect.left, initialTop: rect.top };
       } else {
-          dragRef.current = {
-              isDragging: true,
-              startX: clientX,
-              startY: clientY,
-              initialLeft: position.x,
-              initialTop: position.y
-          };
+          dragRef.current = { isDragging: true, startX: clientX, startY: clientY, initialLeft: position.x, initialTop: position.y };
       }
-      
       hasMovedRef.current = false;
       document.body.style.userSelect = 'none';
   };
 
   const handleToggleOpen = () => {
       if (!hasMovedRef.current) {
-          setIsOpen(prev => !prev);
+          if (!isOpen) {
+              // Opening: Save current position as "button position"
+              if (position) prevButtonPos.current = position;
+              setIsOpen(true);
+          } else {
+              // Closing (via button click, though typically via minimize button)
+              setIsOpen(false);
+          }
+      }
+  };
+
+  const handleMinimize = () => {
+      setIsOpen(false);
+      // Restore previous button position if it exists, otherwise leave it where it is (or reset)
+      if (prevButtonPos.current) {
+          setPosition(prevButtonPos.current);
       }
   };
 
@@ -173,16 +171,10 @@ export const LiveAssistant: React.FC = () => {
           // @ts-ignore
           const AudioCtor = window.AudioContext || window.webkitAudioContext;
           const ctx = new AudioCtor({ sampleRate: OUTPUT_SAMPLE_RATE });
-          
           const analyser = ctx.createAnalyser();
           analyser.fftSize = 64;
-          
-          const gain = ctx.createGain();
-          gain.connect(ctx.destination); 
-          
           audioContextRef.current = ctx;
           analyserRef.current = analyser;
-          gainNodeRef.current = gain;
       }
       if (audioContextRef.current.state === 'suspended') {
           audioContextRef.current.resume();
@@ -198,9 +190,7 @@ export const LiveAssistant: React.FC = () => {
 
       try {
           initOutputAudioContext();
-          
           const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-          // Append User Info to ensure backend creates a distinct session context
           const wsUrl = `${protocol}//${window.location.host}/ws/live?userId=${user._id}&username=${encodeURIComponent(user.username)}`;
           
           console.log("Connecting to", wsUrl);
@@ -256,9 +246,9 @@ export const LiveAssistant: React.FC = () => {
           const source = ctx.createBufferSource();
           source.buffer = buffer;
           
-          if (analyserRef.current && gainNodeRef.current) {
+          if (analyserRef.current) {
               source.connect(analyserRef.current);
-              analyserRef.current.connect(gainNodeRef.current);
+              analyserRef.current.connect(ctx.destination);
           } else {
               source.connect(ctx.destination);
           }
@@ -291,41 +281,55 @@ export const LiveAssistant: React.FC = () => {
       if (status !== 'CONNECTED' && status !== 'SPEAKING') return;
       
       try {
-          if (status === 'SPEAKING') {
-              setStatus('CONNECTED'); 
+          isRecordingIntentRef.current = true;
+          if (status === 'SPEAKING') setStatus('CONNECTED'); 
+
+          const stream = await navigator.mediaDevices.getUserMedia({ 
+              audio: { 
+                  sampleRate: INPUT_SAMPLE_RATE,
+                  channelCount: 1,
+                  echoCancellation: true,
+                  autoGainControl: true,
+                  noiseSuppression: true
+              }
+          });
+          
+          // Safety check: if user released mouse while getting stream
+          if (!isRecordingIntentRef.current) {
+              stream.getTracks().forEach(t => t.stop());
+              return;
           }
 
-          isRecordingRef.current = true; // Mark as recording
-
-          const stream = await navigator.mediaDevices.getUserMedia({ audio: { 
-              sampleRate: INPUT_SAMPLE_RATE,
-              channelCount: 1,
-              echoCancellation: true,
-              autoGainControl: true,
-              noiseSuppression: true
-          }});
           mediaStreamRef.current = stream;
           
-          // Use a new context for input to ensure 16k rate if browser supports specific ctx rate
           // @ts-ignore
           const AudioCtor = window.AudioContext || window.webkitAudioContext;
           const ctx = new AudioCtor({ sampleRate: INPUT_SAMPLE_RATE });
           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
+          const muteGain = ctx.createGain();
+          muteGain.gain.value = 0;
+
+          source.connect(processor);
+          processor.connect(muteGain);
+          muteGain.connect(ctx.destination);
+          
           processor.onaudioprocess = (e) => {
-              // Crucial check: If we decided to stop recording, do not process even if event fires
-              if (!isRecordingRef.current) return; 
+              if (!isRecordingIntentRef.current) return; 
 
               const inputData = e.inputBuffer.getChannelData(0);
               const l = inputData.length;
               const int16Data = new Int16Array(l);
               for (let i = 0; i < l; i++) {
-                  int16Data[i] = inputData[i] * 32768;
+                  int16Data[i] = Math.max(-1, Math.min(1, inputData[i])) * 32767; // Clamp and convert
               }
               
+              // Raw PCM -> Base64
               let binary = '';
               const bytes = new Uint8Array(int16Data.buffer);
               const len = bytes.byteLength;
@@ -341,29 +345,25 @@ export const LiveAssistant: React.FC = () => {
                   }));
               }
           };
-
-          source.connect(processor);
-          processor.connect(ctx.destination); 
           
           sourceNodeRef.current = source;
           processorRef.current = processor;
+          
           setStatus('LISTENING');
           setTranscript('正在聆听...');
 
       } catch (e) {
           console.error(e);
-          isRecordingRef.current = false;
+          isRecordingIntentRef.current = false;
           setTranscript('无法访问麦克风');
       }
   };
 
   const stopRecording = () => {
-      if (!isRecordingRef.current) return;
-      isRecordingRef.current = false; // Stop processing loop immediately
+      isRecordingIntentRef.current = false;
       
       // Cleanup Mic Processing
       if (processorRef.current) {
-          processorRef.current.onaudioprocess = null; // Detach handler
           processorRef.current.disconnect();
           processorRef.current = null;
       }
@@ -375,14 +375,15 @@ export const LiveAssistant: React.FC = () => {
           mediaStreamRef.current.getTracks().forEach(t => t.stop());
           mediaStreamRef.current = null;
       }
-      // Force close input context to ensure hardware releases
       if (inputAudioContextRef.current) {
           inputAudioContextRef.current.close().catch(()=>{});
           inputAudioContextRef.current = null;
       }
       
-      setStatus('THINKING');
-      setTranscript('思考中...');
+      if (status === 'LISTENING') {
+          setStatus('THINKING');
+          setTranscript('思考中...');
+      }
   };
 
   const handleDisconnect = () => {
@@ -437,7 +438,7 @@ export const LiveAssistant: React.FC = () => {
                     </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>
-                        <button onClick={() => setIsOpen(false)} 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>
+                        <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>