yt-chat-components 1.1.8 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.1.8",
+  "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

@@ -6,7 +6,10 @@ import { ChatMessageType } from '../../chatWindow/types/chatWidget';
 import Recorder from 'recorder-core'
 import 'recorder-core/src/engine/mp3'
 import 'recorder-core/src/engine/mp3-engine'
-import 'recorder-core/src/extensions/waveview'
+// import 'recorder-core/src/extensions/waveview'
+import ai_call_thinking from '../../../../assets/aicenter/ai_call_thinking.png'
+import ai_call_working from '../../../../assets/aicenter/ai_call_working.gif'
+
 
 interface CallInterfaceProps {
   onHangup: () => void;
@@ -17,6 +20,9 @@ interface CallInterfaceProps {
   sessionId: React.MutableRefObject<string>;
   hostUrl: string;
   addMessage: (message: ChatMessageType) => void;
+  userInfo: {
+    code: string;
+  };
 }
 
 const CallInterface: React.FC<CallInterfaceProps> = ({ 
@@ -27,7 +33,8 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
   flowId,
   sessionId,
   hostUrl,
-  addMessage
+  addMessage,
+  userInfo,
 }) => {
   const [callDuration, setCallDuration] = useState(0);
   const [callStatus, setCallStatus] = useState<'connecting' | 'connected'>('connecting');
@@ -35,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; // 停止说话多久后认为一段话结束(毫秒)
 
@@ -46,7 +52,7 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
   const remoteStreamRef = useRef<MediaStream | null>(null);
   const remoteAudioRef = useRef<HTMLAudioElement>(null);
   let responseAudio: any = null;
-  let wave: any = null;
+  // let wave: any = null;
   const wsRef = useRef<WebSocket | null>(null);
   
   // VAD相关引用
@@ -54,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) => {
@@ -66,7 +73,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
   };
 
   const handleAudioData = (audioData: string) => {
-    setIsListening(true);
     setWorkStatus('正在回复');
     
     // 将base64音频转换为Blob
@@ -83,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 = () => {
       // 设置打断检测
@@ -99,9 +98,8 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
           console.log('用户打断播放');
           audio.pause();
           URL.revokeObjectURL(audioUrl);
-          setIsListening(false);
-          setWorkStatus('正在聆听');
           clearInterval(interruptionCheck);
+          setWorkStatus('正在聆听');
         }
       }, 100);
       
@@ -109,7 +107,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
       audio.onended = () => {
         clearInterval(interruptionCheck);
         URL.revokeObjectURL(audioUrl);
-        setIsListening(false);
         setWorkStatus('正在聆听');
       };
     };
@@ -117,7 +114,6 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
     // 开始播放
     audio.play().catch(err => {
       console.error('播放音频失败:', err);
-      setIsListening(false);
       setWorkStatus('正在聆听');
     });
   };
@@ -135,10 +131,11 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
         ]
       });
       peerConnectionRef.current = peerConnection;
-
+      const {code} = userInfo;
+      const opeartorId = code || sessionId;
       // 创建WebSocket连接
       console.log('开始连接WebSocket', flowId, sessionId, api_key);
-      const ws = new WebSocket(`${hostUrl.replace('http', 'ws')}/api/v1/ws/webrtc?flow_id=${flowId}&session_id=${sessionId}&api_key=${api_key}&operator_id=test`);
+      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;
       
       // 添加连接超时处理
@@ -202,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);
         
@@ -215,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('准备录制');
@@ -236,26 +234,27 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                 //可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等
 
                 //可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）
-                if(workStatus === '正在聆听'){
-                  wave && wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
-                }
+                // if(workStatus === '正在聆听'){
+                //   wave && wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
+                // }
               }
             });
             recorderRef.current = recorder;
             recorder.open(() => {
-              if(Recorder.WaveView){
-                wave = Recorder.WaveView({elem: ".recwave"});
-              }
+              // if(Recorder.WaveView){
+              //   wave = Recorder.WaveView({elem: ".recwave"});
+              // }
             });
             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) {
@@ -263,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) => {
@@ -281,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('发送完毕');
 
@@ -293,26 +291,26 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                       //   timestamp: new Date().toISOString()
                       // });
 
-                      // 设置为正在听模式
-                      setIsListening(true);
                       setWorkStatus('正在思考');
+                      setIsSpeakingNow(false)
                     }
                   };
 
-                  wave = null
+                  // wave = null
                   recorderRef.current = null;
                 },(msg: any)=> {
                   console.log("录音失败:"+msg);
-                  wave = null
+                  // wave = null
                   recorderRef.current.close();//可以通过stop方法的第3个参数来自动调用close
                   recorderRef.current=null;
                 });
               }
-              
+
               speechTimeoutRef.current = null;
             }, SPEECH_DELAY);
           }
-        } else if (isSpeakingNow && isSpeakingRef.current) {
+        }
+        else if (isSpeakingNow && isSpeakingRef.current) {
           console.log('继续说话');
           // 继续说话，重置超时
           if (speechTimeoutRef.current) {
@@ -507,11 +505,14 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
           {
             callStatus === 'connected' &&
               <div style={{display: 'flex', flexDirection:'column', justifyContent: 'center', alignItems: 'center'}}>
-                <div style={{width: 120, height: 50, position: 'relative'}}>
-                  {
-                    <div className='recwave' style={{width: 120, height: 50, display: workStatus === '正在聆听' ? 'block' : 'none'}}></div>
-                  }
-                </div>
+                {/*<div style={{width: 120, height: 50, position: 'relative'}}>*/}
+                {/*  {*/}
+                {/*    <div className='recwave' style={{width: 120, height: 50, display: workStatus === '正在聆听' ? 'block' : 'none'}}></div>*/}
+                {/*  }*/}
+                {/*</div>*/}
+                  <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}
                 </p>

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

@@ -452,6 +452,7 @@ export default function ChatWindow({
         });
       setDropDownList(undefined);
     }
+    inputRef.current.value=''
   }
 
   // 处理打电话按钮点击
@@ -1011,7 +1012,7 @@ export default function ChatWindow({
           <div className="w_inputBox" style={{height: inputContainerHeight}}>
             <textarea
               onFocus={()=>setInputContainerHeight('120px')}
-              onBlur={()=>setInputContainerHeight('50px')}
+              onBlur={() => setTimeout(() => setInputContainerHeight('50px'), 200)}
               // value={inputValue}
               onChange={(e) => setValue(e.target.value)}
               onKeyDown={(e) => {
@@ -1072,6 +1073,7 @@ export default function ChatWindow({
                 style={{ ...(sendingMessage ? { cursor: 'pointer' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
                 onClick={() => {
                   if(sendingMessage){
+                    // 如果正在发送消息，此时点击则为取消发送
                     const output = {
                       message:nowAIContent,
                       type:'text'
@@ -1114,6 +1116,7 @@ export default function ChatWindow({
           sessionId={sessionId}
           hostUrl={hostUrl}
           onMessage={addMessage}
+          userInfo={userInfo}
         />
         :
         <div className="cl-middle-container">

package/src/YtChatView/previewDialog/index.jsx

@@ -350,7 +350,7 @@ export class ToolDialog extends React.Component {
 
   // 获取历史对话列表
   getHistoryList = (sceneData, isRefreshWords) => {
-    const { sceneId, appId: flowId, isShowSideLeft } = this.props;
+    const { sceneId, appId: flowId, isShowSideLeft = true } = this.props;
       if(isEmpty(sceneId)){
         //  单独组件情况
         if(isRefreshWords){