yt-chat-components 1.1.9 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "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,9 +42,10 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
   
   // 添加VAD相关状态
   const isSpeakingRef = useRef<boolean>(false);
-  const [isListening, setIsListening] = useState(false);
   const SILENCE_THRESHOLD = 35; // 静音阈值，可根据环境调整
   const SPEECH_DELAY = 1500; // 停止说话多久后认为一段话结束(毫秒)
+  // 发送信息后持有这个id，当id不为null放弃处理后续说话
+  const msgIdRef = useRef<string | null>(null);
 
   // WebRTC相关状态和引用
   const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
@@ -61,7 +62,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 +75,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
   };
 
   const handleAudioData = (audioData: string) => {
-    setIsListening(true);
     setWorkStatus('正在回复');
     
     // 将base64音频转换为Blob
@@ -90,33 +91,24 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
     const audio = new Audio(audioUrl);
     responseAudio = audio;
     
-    // 监听播放结束事件
-    audio.onended = () => {
-      URL.revokeObjectURL(audioUrl);
-      setIsListening(false);
-      setWorkStatus('正在聆听');
-    };
-    
     // 监听用户打断
     audio.onplay = () => {
-      // 设置打断检测
+      // 设置打断检测，3秒后才启动
       const interruptionCheck = setInterval(() => {
         if (isSpeakingRef.current) {
           // 用户开始说话，打断播放
-          console.log('用户打断播放');
+          // console.log('用户打断播放');
           audio.pause();
           URL.revokeObjectURL(audioUrl);
-          setIsListening(false);
-          setWorkStatus('正在聆听');
           clearInterval(interruptionCheck);
+          setWorkStatus('正在聆听');
         }
-      }, 100);
+      }, 3000);
       
       // 播放结束时清除检测
       audio.onended = () => {
         clearInterval(interruptionCheck);
         URL.revokeObjectURL(audioUrl);
-        setIsListening(false);
         setWorkStatus('正在聆听');
       };
     };
@@ -124,7 +116,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
     // 开始播放
     audio.play().catch(err => {
       console.error('播放音频失败:', err);
-      setIsListening(false);
       setWorkStatus('正在聆听');
     });
   };
@@ -145,7 +136,7 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
       const {code} = userInfo;
       const opeartorId = code || sessionId;
       // 创建WebSocket连接
-      console.log('开始连接WebSocket', flowId, sessionId, api_key);
+      console.log('开始连接WebSocket');
       const ws = new WebSocket(`${hostUrl.replace('http', 'ws')}/api/v1/ws/webrtc?flow_id=${flowId}&session_id=${sessionId}&api_key=${api_key}&operator_id=${opeartorId}`);
       wsRef.current = ws;
       
@@ -210,7 +201,14 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
       vadProcessorRef.current = vadProcessor;
       
       vadProcessor.onaudioprocess = (e) => {
-        if (isListening) return; // 正在听对方说话，不处理
+        // 正在听对方说话 or 思考，不处理
+        if (workStatus === '正在回复'){
+          console.log("--------------------- 正在回复")
+          return
+        }else if(msgIdRef.current !== null){
+          console.log("--------------------- 正在思考")
+          return;
+        }
         
         analyser.getByteFrequencyData(dataArray);
         
@@ -223,12 +221,12 @@ 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,21 +255,20 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
             });
             recorder.start();
           }
-          
+
           // 清除之前的超时
           if (speechTimeoutRef.current) {
             clearTimeout(speechTimeoutRef.current);
             speechTimeoutRef.current = null;
           }
-        } else if (!isSpeakingNow && isSpeakingRef.current) {
-          console.log('准备停止说话');
+        }
+        else if (!isSpeakingNow && isSpeakingRef.current) {
           // 可能停止说话，设置超时
           if (!speechTimeoutRef.current) {
             speechTimeoutRef.current = setTimeout(() => {
               // 确认停止说话
-              console.log('停止说话');
               isSpeakingRef.current = false;
-              
+
               // 停止录制
               if (recorderRef.current) {
                 recorderRef.current.stop((blob: Blob, duration:any, mime:any) => {
@@ -281,16 +278,15 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                   reader.readAsDataURL(blob);
                   reader.onloadend = () => {
                     const base64Audio = reader.result as string;
-                    console.log('准备发送');
                     // 发送完整的语音片段到服务器
                     if (wsRef.current) {
-                      console.log('发送数据');
+                      msgIdRef.current = new Date().getTime() + ""
                       sendWebSocketMessage('complete-audio', {
                         audioData: base64Audio.split(',')[1], // 移除data URL前缀
                         userMessage: true,
                         audioFormat:"mp3",
                         sampleRate:16000,
-                        voice:"longxiang"
+                        msgId: msgIdRef.current,
                       });
                       console.log('发送完毕');
 
@@ -301,9 +297,8 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                       //   timestamp: new Date().toISOString()
                       // });
 
-                      // 设置为正在听模式
-                      setIsListening(true);
                       setWorkStatus('正在思考');
+                      setIsSpeakingNow(false)
                     }
                   };
 
@@ -316,11 +311,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) {
@@ -352,11 +348,12 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
           }
         } else if (message.type === 'complete-audio') {
           // 处理从后端返回的完整音频响应
+          msgIdRef.current = null
           if (message.audioData) {
             handleAudioData(message.audioData);
+          }else {
+            setWorkStatus('正在聆听');
           }
-        } else if (message.type === 'busy') {
-          message.info('对方正在思考，请稍等');
         }
       };
       
@@ -520,8 +517,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}