Upload 58 files

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 } from 'lucide-react';
+import { Mic, X, Power, Loader2, Bot, Volume2, Radio, Activity, RefreshCw, ChevronDown, Move } from 'lucide-react';
 import { api } from '../services/api';
 
 // --- Audio Types & Helpers ---
@@ -23,7 +23,16 @@ export const LiveAssistant: React.FC = () => {
   const [transcript, setTranscript] = useState(''); 
   const [volumeLevel, setVolumeLevel] = useState(0);
 
-  const audioContextRef = useRef<AudioContext | null>(null);
+  // Dragging State
+  const [position, setPosition] = useState<{x: number, y: number} | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef({ isDragging: false, startX: 0, startY: 0, initialLeft: 0, initialTop: 0 });
+  const hasMovedRef = useRef(false);
+
+  // Refs
+  const audioContextRef = useRef<AudioContext | null>(null); // Output Context
+  const inputAudioContextRef = useRef<AudioContext | null>(null); // Input Context (New)
+  
   const mediaStreamRef = useRef<MediaStream | null>(null);
   const processorRef = useRef<ScriptProcessorNode | null>(null);
   const sourceNodeRef = useRef<MediaStreamAudioSourceNode | null>(null);
@@ -33,16 +42,75 @@ export const LiveAssistant: React.FC = () => {
   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);
 
   useEffect(() => {
       if (!isOpen) {
           handleDisconnect();
       }
+      // When opening/closing, ensure we stay within bounds if position exists
+      if (position && containerRef.current) {
+          const { innerWidth, innerHeight } = window;
+          const rect = containerRef.current.getBoundingClientRect();
+          const newX = Math.min(Math.max(0, position.x), innerWidth - rect.width);
+          const newY = Math.min(Math.max(0, position.y), innerHeight - rect.height);
+          if (newX !== position.x || newY !== position.y) {
+              setPosition({ x: newX, y: newY });
+          }
+      }
       return () => {
           handleDisconnect();
       };
   }, [isOpen]);
 
+  useEffect(() => {
+      const handleMove = (e: MouseEvent | TouchEvent) => {
+          if (!dragRef.current.isDragging) return;
+          
+          const clientX = 'touches' in e ? e.touches[0].clientX : (e as MouseEvent).clientX;
+          const clientY = 'touches' in e ? e.touches[0].clientY : (e as MouseEvent).clientY;
+          
+          const deltaX = clientX - dragRef.current.startX;
+          const deltaY = clientY - dragRef.current.startY;
+          
+          if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+              hasMovedRef.current = true;
+          }
+
+          let newX = dragRef.current.initialLeft + deltaX;
+          let newY = dragRef.current.initialTop + deltaY;
+
+          // Bounds check
+          if (containerRef.current) {
+              const rect = containerRef.current.getBoundingClientRect();
+              const { innerWidth, innerHeight } = window;
+              newX = Math.min(Math.max(0, newX), innerWidth - rect.width);
+              newY = Math.min(Math.max(0, newY), innerHeight - rect.height);
+          }
+
+          setPosition({ x: newX, y: newY });
+      };
+
+      const handleUp = () => {
+          dragRef.current.isDragging = false;
+          document.body.style.userSelect = '';
+      };
+
+      window.addEventListener('mousemove', handleMove);
+      window.addEventListener('mouseup', handleUp);
+      window.addEventListener('touchmove', handleMove, { passive: false });
+      window.addEventListener('touchend', handleUp);
+
+      return () => {
+          window.removeEventListener('mousemove', handleMove);
+          window.removeEventListener('mouseup', handleUp);
+          window.removeEventListener('touchmove', handleMove);
+          window.removeEventListener('touchend', handleUp);
+      };
+  }, []);
+
   useEffect(() => {
       if (status === 'DISCONNECTED') {
           setVolumeLevel(0);
@@ -59,7 +127,48 @@ export const LiveAssistant: React.FC = () => {
       return () => clearInterval(volumeIntervalRef.current);
   }, [status]);
 
-  const initAudioContext = () => {
+  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
+          };
+      } else {
+          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);
+      }
+  };
+
+  const initOutputAudioContext = () => {
       if (!audioContextRef.current) {
           // @ts-ignore
           const AudioCtor = window.AudioContext || window.webkitAudioContext;
@@ -88,7 +197,7 @@ export const LiveAssistant: React.FC = () => {
       setTranscript('正在连接服务器...');
 
       try {
-          initAudioContext();
+          initOutputAudioContext();
           
           const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
           // Append User Info to ensure backend creates a distinct session context
@@ -186,18 +295,30 @@ export const LiveAssistant: React.FC = () => {
               setStatus('CONNECTED'); 
           }
 
+          isRecordingRef.current = true; // Mark as recording
+
           const stream = await navigator.mediaDevices.getUserMedia({ audio: { 
               sampleRate: INPUT_SAMPLE_RATE,
               channelCount: 1,
-              echoCancellation: true
+              echoCancellation: true,
+              autoGainControl: true,
+              noiseSuppression: true
           }});
           mediaStreamRef.current = stream;
           
-          const ctx = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: INPUT_SAMPLE_RATE });
+          // 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;
+
           const source = ctx.createMediaStreamSource(stream);
           const processor = ctx.createScriptProcessor(4096, 1, 1);
           
           processor.onaudioprocess = (e) => {
+              // Crucial check: If we decided to stop recording, do not process even if event fires
+              if (!isRecordingRef.current) return; 
+
               const inputData = e.inputBuffer.getChannelData(0);
               const l = inputData.length;
               const int16Data = new Int16Array(l);
@@ -231,14 +352,18 @@ export const LiveAssistant: React.FC = () => {
 
       } catch (e) {
           console.error(e);
+          isRecordingRef.current = false;
           setTranscript('无法访问麦克风');
       }
   };
 
   const stopRecording = () => {
-      if (status !== 'LISTENING') return;
+      if (!isRecordingRef.current) return;
+      isRecordingRef.current = false; // Stop processing loop immediately
       
+      // Cleanup Mic Processing
       if (processorRef.current) {
+          processorRef.current.onaudioprocess = null; // Detach handler
           processorRef.current.disconnect();
           processorRef.current = null;
       }
@@ -250,6 +375,11 @@ 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('思考中...');
@@ -273,26 +403,41 @@ export const LiveAssistant: React.FC = () => {
   if (!api.auth.getCurrentUser()) return null;
 
   return (
-    <div className="fixed bottom-6 right-6 z-[9999]">
+    <div 
+        ref={containerRef}
+        className={`fixed z-[9999] touch-none ${position ? '' : 'bottom-6 right-6'}`}
+        style={position ? { left: position.x, top: position.y } : undefined}
+    >
         {!isOpen && (
-            <button 
-                onClick={() => setIsOpen(true)}
-                className="w-14 h-14 rounded-full bg-gradient-to-br from-indigo-600 to-purple-600 text-white shadow-2xl flex items-center justify-center hover:scale-110 transition-transform cursor-pointer border-2 border-white/20 animate-in zoom-in"
+            <div
+                className="cursor-move"
+                onMouseDown={handleDragStart}
+                onTouchStart={handleDragStart}
             >
-                <Bot size={28} />
-            </button>
+                <button 
+                    onClick={handleToggleOpen}
+                    className="w-14 h-14 rounded-full bg-gradient-to-br from-indigo-600 to-purple-600 text-white shadow-2xl flex items-center justify-center hover:scale-110 transition-transform cursor-pointer border-2 border-white/20 animate-in zoom-in"
+                >
+                    <Bot size={28} />
+                </button>
+            </div>
         )}
 
         {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]">
-                <div className="bg-slate-800/50 p-4 flex justify-between items-center text-white shrink-0 backdrop-blur-md">
+                {/* Draggable 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}
+                    onTouchStart={handleDragStart}
+                >
                     <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>
                     </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"><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"><ChevronDown size={20}/></button>
+                        <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>
                     </div>
                 </div>
 
@@ -359,6 +504,7 @@ export const LiveAssistant: React.FC = () => {
                                 <button 
                                     onMouseDown={startRecording}
                                     onMouseUp={stopRecording}
+                                    onMouseLeave={stopRecording}
                                     onTouchStart={(e) => { e.preventDefault(); startRecording(); }}
                                     onTouchEnd={(e) => { e.preventDefault(); stopRecording(); }}
                                     className={`w-20 h-20 rounded-full flex items-center justify-center shadow-lg transition-all transform ${