yt-chat-components 1.1.9 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",

package/src/YtChatView/chatWidget/chatWindow/callInterface/index.tsx

@@ -42,7 +42,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
   
   // 添加VAD相关状态
   const isSpeakingRef = useRef<boolean>(false);
-  const [isListening, setIsListening] = useState(false);
   const SILENCE_THRESHOLD = 35; // 静音阈值，可根据环境调整
   const SPEECH_DELAY = 1500; // 停止说话多久后认为一段话结束(毫秒)
 
@@ -61,7 +60,8 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
   const speechTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const vadProcessorRef = useRef<ScriptProcessorNode | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
-  
+  const [isSpeakingNow,setIsSpeakingNow] = useState(false);
+
 
   // 添加统一的WebSocket消息发送方法
   const sendWebSocketMessage = (type: string, data: any) => {
@@ -73,7 +73,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
   };
 
   const handleAudioData = (audioData: string) => {
-    setIsListening(true);
     setWorkStatus('正在回复');
     
     // 将base64音频转换为Blob
@@ -90,13 +89,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
     const audio = new Audio(audioUrl);
     responseAudio = audio;
     
-    // 监听播放结束事件
-    audio.onended = () => {
-      URL.revokeObjectURL(audioUrl);
-      setIsListening(false);
-      setWorkStatus('正在聆听');
-    };
-    
     // 监听用户打断
     audio.onplay = () => {
       // 设置打断检测
@@ -106,9 +98,8 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
           console.log('用户打断播放');
           audio.pause();
           URL.revokeObjectURL(audioUrl);
-          setIsListening(false);
-          setWorkStatus('正在聆听');
           clearInterval(interruptionCheck);
+          setWorkStatus('正在聆听');
         }
       }, 100);
       
@@ -116,7 +107,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
       audio.onended = () => {
         clearInterval(interruptionCheck);
         URL.revokeObjectURL(audioUrl);
-        setIsListening(false);
         setWorkStatus('正在聆听');
       };
     };
@@ -124,7 +114,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
     // 开始播放
     audio.play().catch(err => {
       console.error('播放音频失败:', err);
-      setIsListening(false);
       setWorkStatus('正在聆听');
     });
   };
@@ -210,7 +199,7 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
       vadProcessorRef.current = vadProcessor;
       
       vadProcessor.onaudioprocess = (e) => {
-        if (isListening) return; // 正在听对方说话，不处理
+        if (workStatus === '正在回复' || workStatus === '正在思考') return; // 正在听对方说话 or 思考，不处理
         
         analyser.getByteFrequencyData(dataArray);
         
@@ -223,12 +212,13 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
         
         // 检测是否有语音
         const isSpeakingNow = average > SILENCE_THRESHOLD;
-        
+
         if (isSpeakingNow && !isSpeakingRef.current) {
+          setIsSpeakingNow(true)
           // 开始说话
           console.log('开始说话', isSpeakingRef.current);
           isSpeakingRef.current = true;
-          
+
           // 开始录制
           if (!recorderRef.current && localStreamRef.current) {
             console.log('准备录制');
@@ -257,13 +247,14 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
             });
             recorder.start();
           }
-          
+
           // 清除之前的超时
           if (speechTimeoutRef.current) {
             clearTimeout(speechTimeoutRef.current);
             speechTimeoutRef.current = null;
           }
-        } else if (!isSpeakingNow && isSpeakingRef.current) {
+        }
+        else if (!isSpeakingNow && isSpeakingRef.current) {
           console.log('准备停止说话');
           // 可能停止说话，设置超时
           if (!speechTimeoutRef.current) {
@@ -271,7 +262,7 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
               // 确认停止说话
               console.log('停止说话');
               isSpeakingRef.current = false;
-              
+
               // 停止录制
               if (recorderRef.current) {
                 recorderRef.current.stop((blob: Blob, duration:any, mime:any) => {
@@ -289,8 +280,7 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                         audioData: base64Audio.split(',')[1], // 移除data URL前缀
                         userMessage: true,
                         audioFormat:"mp3",
-                        sampleRate:16000,
-                        voice:"longxiang"
+                        sampleRate:16000
                       });
                       console.log('发送完毕');
 
@@ -301,9 +291,8 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                       //   timestamp: new Date().toISOString()
                       // });
 
-                      // 设置为正在听模式
-                      setIsListening(true);
                       setWorkStatus('正在思考');
+                      setIsSpeakingNow(false)
                     }
                   };
 
@@ -316,11 +305,12 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                   recorderRef.current=null;
                 });
               }
-              
+
               speechTimeoutRef.current = null;
             }, SPEECH_DELAY);
           }
-        } else if (isSpeakingNow && isSpeakingRef.current) {
+        }
+        else if (isSpeakingNow && isSpeakingRef.current) {
           console.log('继续说话');
           // 继续说话，重置超时
           if (speechTimeoutRef.current) {
@@ -520,8 +510,8 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                 {/*    <div className='recwave' style={{width: 120, height: 50, display: workStatus === '正在聆听' ? 'block' : 'none'}}></div>*/}
                 {/*  }*/}
                 {/*</div>*/}
-                  <div className='recwave' style={{width: 120, height: 50}}>{
-                      workStatus === '正在聆听'||  workStatus === '正在回复' ? <img src={ai_call_working}/>:<img src={ai_call_thinking}/>
+                  <div className='recwave' style={{width: 120, height: 65}}>{
+                    (isSpeakingNow &&  workStatus === '正在聆听')||  workStatus === '正在回复' ? <img src={ai_call_working}/>:<img src={ai_call_thinking}/>
                   }</div>
                 <p className="call-status">
                   {workStatus}