Upload 54 files

components/LiveVoiceFab.tsx

@@ -100,8 +100,6 @@ export const LiveVoiceFab: React.FC = () => {
       if (!key) throw new Error("无法获取 AI 配置");
 
       const ai = new GoogleGenAI({ apiKey: key });
-      
-      // Use the model mentioned (mapped to the standard preview)
       const model = 'gemini-2.5-flash-native-audio-preview-09-2025';
       
       const session = await ai.live.connect({
@@ -112,16 +110,72 @@ export const LiveVoiceFab: React.FC = () => {
           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;
-      setIsConnected(true);
-      
-      // Welcome message
-      setMessages(prev => [...prev, { id: 'sys-start', role: 'model', text: '已连接！按住按钮说话。' }]);
-
-      // Listen for messages
-      receiveLoop(session);
 
     } catch (e: any) {
       console.error(e);
@@ -132,8 +186,13 @@ export const LiveVoiceFab: React.FC = () => {
 
   const disconnectSession = async () => {
     if (sessionRef.current) {
-      // Typically session closure is handled by the server or object cleanup
-      sessionRef.current = null; 
+        // 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);
@@ -141,71 +200,14 @@ export const LiveVoiceFab: React.FC = () => {
     // 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 receiveLoop = async (session: any) => {
-    try {
-      for await (const msg of session.receive()) {
-        const message = msg as 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')) {
-                   // 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)
-        if (message.serverContent?.interrupted) {
-            // Clear queue if 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);
-            };
-        }
-      }
-    } catch (e) {
-      console.log("Session ended or error", e);
-      setIsConnected(false);
-    }
-  };
-
   const startRecording = async () => {
     if (!isConnected || !sessionRef.current || !inputContextRef.current) return;
     setIsRecording(true);