yt-chat-components 1.1.8 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "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');
@@ -46,7 +53,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相关引用
@@ -135,10 +142,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;
       
       // 添加连接超时处理
@@ -236,16 +244,16 @@ 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();
           }
@@ -299,11 +307,11 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
                     }
                   };
 
-                  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;
                 });
@@ -507,11 +515,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: 50}}>{
+                      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){