Delete components/LiveVoiceFab.tsx

components/LiveVoiceFab.tsx

@@ -1,372 +0,0 @@
-
-import React, { useState, useRef, useEffect } from 'react';
-import { Bot, Mic, X, MessageSquare, Loader2, Volume2, Power, Minimize2 } from 'lucide-react';
-import { GoogleGenAI, LiveServerMessage, Modality } from '@google/genai';
-import { api } from '../services/api';
-import { Toast } from './Toast';
-
-// --- Audio Utils (Specific for Live API PCM) ---
-const decodeAudioData = async (
-  base64String: string,
-  ctx: AudioContext,
-  sampleRate: number = 24000
-): Promise<AudioBuffer> => {
-  const binaryString = atob(base64String);
-  const len = binaryString.length;
-  const bytes = new Uint8Array(len);
-  for (let i = 0; i < len; i++) {
-    bytes[i] = binaryString.charCodeAt(i);
-  }
-  
-  // Convert Int16 PCM to Float32
-  const int16Data = new Int16Array(bytes.buffer);
-  const float32Data = new Float32Array(int16Data.length);
-  for (let i = 0; i < int16Data.length; i++) {
-    float32Data[i] = int16Data[i] / 32768.0;
-  }
-
-  const buffer = ctx.createBuffer(1, float32Data.length, sampleRate);
-  buffer.copyToChannel(float32Data, 0);
-  return buffer;
-};
-
-const createPCMBlob = (data: Float32Array): { data: string, mimeType: string } => {
-  const l = data.length;
-  const int16 = new Int16Array(l);
-  for (let i = 0; i < l; i++) {
-    int16[i] = Math.max(-1, Math.min(1, data[i])) * 32768;
-  }
-  const bytes = new Uint8Array(int16.buffer);
-  let binary = '';
-  const len = bytes.byteLength;
-  for (let i = 0; i < len; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-  return {
-    data: btoa(binary),
-    mimeType: 'audio/pcm;rate=16000', // Client input is usually 16k
-  };
-};
-
-interface ChatMessage {
-  id: string;
-  role: 'user' | 'model';
-  text: string;
-}
-
-export const LiveVoiceFab: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
-  const [isAiSpeaking, setIsAiSpeaking] = useState(false);
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  
-  // Refs for Audio & Session
-  const sessionRef = useRef<any>(null);
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const inputContextRef = useRef<AudioContext | null>(null);
-  const nextStartTimeRef = useRef<number>(0);
-  const sourceNodeRef = useRef<MediaStreamAudioSourceNode | null>(null);
-  const processorRef = useRef<ScriptProcessorNode | null>(null);
-  const activeSourcesRef = useRef<Set<AudioBufferSourceNode>>(new Set());
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  const currentUser = api.auth.getCurrentUser();
-  const hasAccess = currentUser?.aiAccess || currentUser?.role === 'ADMIN';
-
-  useEffect(() => {
-    if (isOpen && !audioContextRef.current) {
-        // @ts-ignore
-        const AudioCtor = window.AudioContext || window.webkitAudioContext;
-        audioContextRef.current = new AudioCtor({ sampleRate: 24000 });
-        inputContextRef.current = new AudioCtor({ sampleRate: 16000 });
-    }
-    // Scroll to bottom
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [isOpen, messages]);
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      disconnectSession();
-    };
-  }, []);
-
-  const connectSession = async () => {
-    setError(null);
-    try {
-      const { key } = await api.ai.getKey();
-      if (!key) throw new Error("无法获取 AI 配置");
-
-      const ai = new GoogleGenAI({ apiKey: key });
-      const model = 'gemini-2.5-flash-native-audio-preview-09-2025';
-      
-      const session = await ai.live.connect({
-        model,
-        config: {
-          responseModalities: [Modality.AUDIO],
-          speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: 'Kore' } } },
-          systemInstruction: { parts: [{ text: "你是一位友善的校园助手。请用简短、口语化的中文回答。请在回答中包含文字转录。" }] },
-          outputAudioTranscription: { } // Enable text output
-        },
-        callbacks: {
-            onopen: () => {
-                setIsConnected(true);
-                setMessages(prev => [...prev, { id: 'sys-start', role: 'model', text: '已连接！按住按钮说话。' }]);
-            },
-            onmessage: async (message: LiveServerMessage) => {
-                // 1. Handle Text (Transcription)
-                const transcript = message.serverContent?.modelTurn?.parts?.find(p => p.text)?.text;
-                if (transcript) {
-                   setMessages(prev => {
-                       const last = prev[prev.length - 1];
-                       if (last && last.role === 'model' && !last.text.endsWith('\n') && last.id !== 'sys-start') {
-                           // Append to streaming message
-                           return [...prev.slice(0, -1), { ...last, text: last.text + transcript }];
-                       }
-                       return [...prev, { id: Date.now().toString(), role: 'model', text: transcript }];
-                   });
-                }
-
-                // 2. Handle User Transcription (Echo) & Interruption
-                if (message.serverContent?.interrupted) {
-                    activeSourcesRef.current.forEach(s => s.stop());
-                    activeSourcesRef.current.clear();
-                    nextStartTimeRef.current = 0;
-                    setIsAiSpeaking(false);
-                }
-
-                // 3. Handle Audio Output
-                const audioData = message.serverContent?.modelTurn?.parts?.find(p => p.inlineData)?.inlineData?.data;
-                if (audioData && audioContextRef.current) {
-                    setIsAiSpeaking(true);
-                    const ctx = audioContextRef.current;
-                    const buffer = await decodeAudioData(audioData, ctx);
-                    
-                    const source = ctx.createBufferSource();
-                    source.buffer = buffer;
-                    source.connect(ctx.destination);
-                    
-                    // Scheduling
-                    const currentTime = ctx.currentTime;
-                    if (nextStartTimeRef.current < currentTime) {
-                        nextStartTimeRef.current = currentTime;
-                    }
-                    source.start(nextStartTimeRef.current);
-                    nextStartTimeRef.current += buffer.duration;
-                    
-                    activeSourcesRef.current.add(source);
-                    source.onended = () => {
-                        activeSourcesRef.current.delete(source);
-                        if (activeSourcesRef.current.size === 0) setIsAiSpeaking(false);
-                    };
-                }
-            },
-            onclose: () => {
-                setIsConnected(false);
-                setIsRecording(false);
-            },
-            onerror: (e) => {
-                console.error("Live API Error:", e);
-                setError("连接断开，请重试");
-                setIsConnected(false);
-            }
-        }
-      });
-
-      sessionRef.current = session;
-
-    } catch (e: any) {
-      console.error(e);
-      setError(e.message || "连接失败");
-      setIsConnected(false);
-    }
-  };
-
-  const disconnectSession = async () => {
-    if (sessionRef.current) {
-        // Typically session closure is handled by the server or object cleanup
-        // But we can try to close if method exists
-        try {
-            // @ts-ignore
-            if(typeof sessionRef.current.close === 'function') sessionRef.current.close();
-        } catch(e) {}
-        sessionRef.current = null; 
-    }
-    setIsConnected(false);
-    setIsRecording(false);
-    
-    // Stop audio input
-    if (sourceNodeRef.current) sourceNodeRef.current.disconnect();
-    if (processorRef.current) processorRef.current.disconnect();
-    sourceNodeRef.current = null;
-    processorRef.current = null;
-    
-    // Stop audio output
-    activeSourcesRef.current.forEach(s => s.stop());
-    activeSourcesRef.current.clear();
-  };
-
-  const startRecording = async () => {
-    if (!isConnected || !sessionRef.current || !inputContextRef.current) return;
-    setIsRecording(true);
-    
-    // Interrupt AI if speaking
-    // We can send an empty text to interrupt or rely on VAD, but explicit clear is safer for UI
-    activeSourcesRef.current.forEach(s => s.stop());
-    activeSourcesRef.current.clear();
-    nextStartTimeRef.current = 0;
-    setIsAiSpeaking(false);
-
-    try {
-        const ctx = inputContextRef.current;
-        if (ctx.state === 'suspended') await ctx.resume();
-
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: {
-            sampleRate: 16000,
-            channelCount: 1,
-            echoCancellation: true
-        }});
-        
-        const source = ctx.createMediaStreamSource(stream);
-        // Using ScriptProcessor for raw PCM access (AudioWorklet is better but more complex to setup in a single file)
-        const processor = ctx.createScriptProcessor(4096, 1, 1);
-        
-        processor.onaudioprocess = (e) => {
-            if (!sessionRef.current) return;
-            const inputData = e.inputBuffer.getChannelData(0);
-            const pcmBlob = createPCMBlob(inputData);
-            sessionRef.current.sendRealtimeInput({ media: pcmBlob });
-        };
-
-        source.connect(processor);
-        processor.connect(ctx.destination); // Required for script processor to run
-        
-        sourceNodeRef.current = source;
-        processorRef.current = processor;
-
-    } catch (e) {
-        console.error("Mic error", e);
-        setError("无法访问麦克风");
-        setIsRecording(false);
-    }
-  };
-
-  const stopRecording = () => {
-    setIsRecording(false);
-    if (sourceNodeRef.current) {
-        sourceNodeRef.current.disconnect();
-        sourceNodeRef.current = null;
-    }
-    if (processorRef.current) {
-        processorRef.current.disconnect();
-        processorRef.current = null;
-    }
-    // Note: We don't explicitly send "End of Turn", the model infers it from silence/VAD in Live API usually, 
-    // but stopping the stream is sufficient.
-  };
-
-  if (!hasAccess) return null;
-
-  return (
-    <>
-      {/* Floating Button */}
-      <button
-        onClick={() => {
-            setIsOpen(!isOpen);
-            if (!isOpen && !isConnected) connectSession(); 
-        }}
-        className={`fixed bottom-6 right-6 z-[9990] w-14 h-14 rounded-full shadow-2xl flex items-center justify-center transition-all hover:scale-110 active:scale-95 ${isOpen ? 'bg-red-500 rotate-45' : 'bg-gradient-to-tr from-blue-600 to-indigo-600'}`}
-      >
-        {isOpen ? <X color="white" size={24}/> : <Bot color="white" size={28}/>}
-      </button>
-
-      {/* Floating Window */}
-      {isOpen && (
-        <div className="fixed bottom-24 right-6 z-[9990] w-80 md:w-96 bg-white rounded-2xl shadow-2xl border border-gray-100 flex flex-col overflow-hidden animate-in slide-in-from-bottom-10 fade-in duration-200" style={{height: '500px'}}>
-            
-            {/* Header */}
-            <div className="p-4 bg-gradient-to-r from-blue-600 to-indigo-600 flex justify-between items-center shrink-0">
-                <div className="flex items-center gap-2 text-white">
-                    <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-400 animate-pulse' : 'bg-red-400'}`}></div>
-                    <span className="font-bold text-sm">AI 实时语音 (Live)</span>
-                </div>
-                <div className="flex gap-2">
-                    <button onClick={disconnectSession} className="text-white/80 hover:text-white" title="重连/刷新">
-                       <Power size={16}/>
-                    </button>
-                    <button onClick={() => setIsOpen(false)} className="text-white/80 hover:text-white">
-                       <Minimize2 size={16}/>
-                    </button>
-                </div>
-            </div>
-
-            {/* Chat Body */}
-            <div className="flex-1 bg-gray-50 overflow-y-auto p-4 space-y-3 custom-scrollbar">
-                {messages.length === 0 && isConnected && (
-                    <div className="text-center text-gray-400 text-xs mt-10">
-                        <p>已连接 Gemini Native Audio Dialog</p>
-                        <p>按住下方按钮开始对话</p>
-                    </div>
-                )}
-                {!isConnected && !error && (
-                    <div className="flex flex-col items-center justify-center h-full text-gray-400 gap-2">
-                        <Loader2 className="animate-spin text-blue-500" size={24}/>
-                        <span className="text-xs">正在建立加密连接...</span>
-                    </div>
-                )}
-                {error && (
-                    <div className="bg-red-50 text-red-600 p-3 rounded-lg text-xs text-center border border-red-100">
-                        {error}
-                        <button onClick={connectSession} className="block mx-auto mt-2 text-blue-600 underline">重试</button>
-                    </div>
-                )}
-                {messages.map((msg, idx) => (
-                    <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-                        <div className={`max-w-[85%] px-3 py-2 rounded-xl text-sm ${msg.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none' : 'bg-white border border-gray-200 text-gray-800 rounded-tl-none shadow-sm'}`}>
-                            {msg.text}
-                        </div>
-                    </div>
-                ))}
-                {isAiSpeaking && (
-                    <div className="flex justify-start">
-                        <div className="bg-white border border-gray-200 px-3 py-2 rounded-xl rounded-tl-none shadow-sm flex items-center gap-1 text-blue-600">
-                            <Volume2 size={14} className="animate-pulse"/>
-                            <div className="flex gap-0.5 items-end h-3">
-                                <div className="w-0.5 bg-blue-500 h-1 animate-[bounce_1s_infinite]"></div>
-                                <div className="w-0.5 bg-blue-500 h-2 animate-[bounce_1.2s_infinite]"></div>
-                                <div className="w-0.5 bg-blue-500 h-3 animate-[bounce_0.8s_infinite]"></div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-                <div ref={messagesEndRef}></div>
-            </div>
-
-            {/* Controls */}
-            <div className="p-4 bg-white border-t border-gray-100 shrink-0 flex flex-col items-center gap-2">
-                <button
-                    disabled={!isConnected}
-                    onMouseDown={startRecording}
-                    onMouseUp={stopRecording}
-                    onMouseLeave={stopRecording}
-                    onTouchStart={startRecording}
-                    onTouchEnd={stopRecording}
-                    className={`w-full py-3 rounded-full font-bold text-white shadow-lg transition-all transform active:scale-95 flex items-center justify-center gap-2 ${
-                        isRecording 
-                        ? 'bg-red-500 scale-105 ring-4 ring-red-100' 
-                        : isConnected ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-300 cursor-not-allowed'
-                    }`}
-                >
-                    {isRecording ? <><div className="w-3 h-3 bg-white rounded-full animate-ping"></div> 松开发送</> : <><Mic size={18}/> 按住说话</>}
-                </button>
-                <div className="text-[10px] text-gray-400">
-                    Model: gemini-2.5-flash-native-audio
-                </div>
-            </div>
-        </div>
-      )}
-    </>
-  );
-};