yt-chat-components 1.6.7 → 1.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.6.7",
+  "version": "1.6.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/audioPlayer/AudioPlayer.tsx

@@ -1,14 +1,14 @@
 // @ts-ignore
 import { v4 as uuidv4 } from 'uuid';
 import PCMAudioPlayer from "./PCMAudioPlayer";
+import {getAsrToken} from "../controllers";
 
 export class AudioPlayer {
     private websocket: WebSocket | null = null;
     private appkey: string;
-    private token: string;
     private isSendSentenceEnd : boolean = false;
     private pcmAudioPlayer: PCMAudioPlayer | null = null;
-    private voice : string = 'longxiaochun'; // longxiaochun zhixiaoxia
+    private voice : string | undefined = 'longxiaochun'; // longxiaochun zhixiaoxia
 
     // 回调函数
     onError?: (error: any) => void;
@@ -20,30 +20,40 @@ export class AudioPlayer {
     private isPlaying: boolean = false;
 
     constructor(voice: string) {
-        // this.appkey = "9S7HL8z0fT80giNH";
-        // this.token = 'd20cf27fac634fee88d5d54a12cc36a6';
-
         this.appkey = 'DhyCL7mwzachpGjL';
-        this.token = '980bc0c1a3fe4fa093ae7cbb470c086f';
-
         this.taskId = uuidv4().replaceAll('-', '');
-        if (voice){
+        if (voice) {
             this.voice = voice;
         }
-
         this.pcmAudioPlayer = new PCMAudioPlayer(16000);
         this.pcmAudioPlayer.onQueueEnd = () => {
             this.isPlaying = false;
-            if (this.onComplete){
+            if (this.onComplete) {
                 this.onComplete();
             }
         };
-        this.connect();
     }
 
-    connect() {
+    // 工厂方法：用于异步创建实例
+    static async createInstance(voice: string, hostUrl: string, flowId: string): Promise<AudioPlayer> {
+        const instance = new AudioPlayer(voice);
+        try {
+            // 假设这是你的异步请求
+            const response = await getAsrToken(hostUrl, flowId);
+            console.log('response = ', response);
+            instance.connect(response?.data?.data?.token); // 连接或其他逻辑
+            return instance;
+        } catch (error) {
+            console.error('Failed to initialize instance:', error);
+            throw error;
+        }
+    }
+
+
+    connect(token : string) {
         // cosyvoice 流式语言合成 2元、万字
-        const socketUrl = `wss://nls-gateway-cn-beijing.aliyuncs.com/ws/v1?token=${this.token}`;
+        console.log('token = ',  token)
+        const socketUrl = `wss://nls-gateway-cn-beijing.aliyuncs.com/ws/v1?token=${token}`;
         // 普通语言合成 1元、万字
         // const socketUrl = `wss://nls-gateway.cn-shanghai.aliyuncs.com/ws/v1?token=${this.token}`;
         this.websocket = new WebSocket(socketUrl);

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

@@ -1,5 +1,6 @@
 // @ts-ignore
 import { v4 as uuidv4 } from 'uuid';
+import {getAsrToken} from "../controllers";
 
 export class AudioRecorder {
     // 状态与资源
@@ -11,12 +12,10 @@ export class AudioRecorder {
     recordingTimeout: any = null;
     timeoutSeconds: number = 60;
     appkey: string;
-    token: string;
+    token: string | undefined;
     onTextUpdate: ((text: string) => void) | null = null;
     onRecordError: ((error: any) => void) | null = null;
     onRecordTimeout: (() => void) | null = null;
-
-
     // 缓存识别结果
     transcriptionCache: {
         [taskId: string]: {
@@ -29,7 +28,6 @@ export class AudioRecorder {
 
     finalResults: string[] = [];
 
-
     constructor(timeoutSeconds: number) {
         this.websocket = null;
         this.audioContext = null;
@@ -39,14 +37,26 @@ export class AudioRecorder {
         if (timeoutSeconds){
             this.timeoutSeconds = timeoutSeconds;
         }
-
         this.appkey = 'DhyCL7mwzachpGjL';
-        this.token = '980bc0c1a3fe4fa093ae7cbb470c086f';
-
         this.bindEventHandlers();
         console.log('AudioRecorder init')
     }
 
+    // 工厂方法：用于异步创建实例
+    static async createInstance(timeoutSeconds: number, hostUrl: string, flowId: string): Promise<AudioRecorder> {
+        const instance = new AudioRecorder(timeoutSeconds);
+        try {
+            // 假设这是你的异步请求
+            const response = await getAsrToken(hostUrl, flowId);
+            console.log('response = ', response);
+            instance.token = response?.data?.data?.token;
+            return instance;
+        } catch (error) {
+            console.error('Failed to initialize instance:', error);
+            throw error;
+        }
+    }
+
     bindEventHandlers() {
         // 绑定 this 到所有回调函数中
         this.connectWebSocket = this.connectWebSocket.bind(this);
@@ -59,12 +69,8 @@ export class AudioRecorder {
     }
 
     connectWebSocket() {
-
-
         const socketUrl = `wss://nls-gateway-cn-shanghai.aliyuncs.com/ws/v1?token=${this.token}`;
-
         this.websocket = new WebSocket(socketUrl);
-
         // 移除旧事件监听器
         this.cleanupWebSocketListeners();
 
@@ -199,6 +205,7 @@ export class AudioRecorder {
     }
 
     async startRecorder() {
+        console.log('开始录音')
         this.connectWebSocket();
 
         // 设置 60 秒超时自动停止

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

@@ -64,7 +64,8 @@ export default function ChatMessage({
   key,
   isShowReadIcon,
   renderInitNode,
-  voice
+  voice,
+  flowId,
 }: ChatMessageType) {
   const parseFileName = (
     text: string,
@@ -151,19 +152,23 @@ export default function ChatMessage({
         window.messageAudioPlayer.stop();
         window.messageAudioPlayer = null;
       }
-      console.log('voice = ' +  voice)
-      window.messageAudioPlayer = new AudioPlayer(voice);
-      window.messageAudioPlayer.onReady = () => {
-        console.log('已连接到语音合成服务');
-        window.messageAudioPlayer.sendRunSynthesis(text)// 尽快发送 StartSynthesis
-      };
-      window.messageAudioPlayer.onComplete = () => {
-        setIsPlay(false);
-      };
-      window.messageAudioPlayer.onError = (err) => {
-        // alert('发生错误：' + err);
-      };
-      setIsPlay(true)
+       AudioPlayer.createInstance(voice, host_url, flowId).then(instance => {
+         window.messageAudioPlayer = instance;
+         window.messageAudioPlayer.onReady = () => {
+           console.log('已连接到语音合成服务');
+           window.messageAudioPlayer.sendRunSynthesis(text)// 尽快发送 StartSynthesis
+         };
+         window.messageAudioPlayer.onComplete = () => {
+           setIsPlay(false);
+         };
+         window.messageAudioPlayer.onError = (err) => {
+           // alert('发生错误：' + err);
+         };
+         setIsPlay(true)
+
+      }).catch(err => {
+        console.error('创建实例失败', err);
+      });
     }
   }
 

package/src/YtChatView/chatWidget/chatWindow/controllers/index.ts

@@ -256,4 +256,13 @@ export async function getQaInfo(baseUrl: string, flowId: string, api_key: string
     timeout:600000
   };
   return axios.get(`${baseUrl}/api/t1/qa_doc/find_doc_by_flow_id/${flowId}`,{headers});
+}
+
+export async function getAsrToken(baseUrl: string, flowId: string) {
+  const headers = {
+    'Content-Type': 'multipart/form-data',
+    // 'x-api-key': api_key,
+    timeout:10000
+  };
+  return axios.get(`${baseUrl}/api/v1/token/${flowId}`,{headers});
 }

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

@@ -893,7 +893,7 @@ export default function ChatWindow({
   };
 
   const stopRecord = () =>{
-    audioRecorder.current.stopRecorder();
+    audioRecorder?.current?.stopRecorder();
     audioRecorder.current = undefined;
     setRecordState(false)
   }
@@ -902,26 +902,31 @@ export default function ChatWindow({
       stopRecord()
     }else {
       setRecordState(true)
-      audioRecorder.current = new AudioRecorder();
-      audioRecorder.current.startRecorder();
-      audioRecorder.current.onTextUpdate = (text: string) => {
-        setValue(text);
-        if (inputMobileRef.current){
-          inputMobileRef.current.handleSetInputText(text);
-        }
-        if (inputRef.current) {
-          inputRef.current.value = text;
-        }
-      };
-      audioRecorder.current.onRecordError = (error: string) => {
-        stopRecord()
-      };
-      audioRecorder.current.onRecordTimeout = () => {
-        stopRecord()
-        if (inputMobileRef.current){
-          inputMobileRef.current.stopRecording();
-        }
-      };
+      AudioRecorder.createInstance(60, hostUrl, flowId).then(instance => {
+        audioRecorder.current = instance;
+        audioRecorder.current.startRecorder();
+        audioRecorder.current.onTextUpdate = (text: string) => {
+          setValue(text);
+          if (inputMobileRef.current){
+            inputMobileRef.current.handleSetInputText(text);
+          }
+          if (inputRef.current) {
+            inputRef.current.value = text;
+          }
+        };
+        audioRecorder.current.onRecordError = (error: string) => {
+          stopRecord()
+        };
+        audioRecorder.current.onRecordTimeout = () => {
+          stopRecord()
+          if (inputMobileRef.current){
+            console.log(inputMobileRef.current)
+            inputMobileRef.current.stopRecording();
+          }
+        };
+      }).catch(error => {
+          console.error("启动语音识别失败:", error);
+      })
     }
   };
 
@@ -1550,6 +1555,7 @@ export default function ChatWindow({
                           isShowReadIcon={isShowReadIcon}
                           renderInitNode={message.renderInitNode}
                           voice={voice}
+                          flowId={flowId}
                       />
                   ))
                 }
@@ -1569,6 +1575,7 @@ export default function ChatWindow({
                                 handleSendMessage={handleSendMessage}
                                 isShowReadIcon={isShowReadIcon}
                                 voice={voice}
+                                flowId={flowId}
                             /> : <ChatMessagePlaceholder bot_message_style={bot_message_style} aiStatus={aiStatus}/>
                     )
                 }

package/src/YtChatView/chatWidget/chatWindow/inputMobile/inputMobile.jsx

@@ -128,7 +128,7 @@ class InputMobile extends React.Component {
                                 onSendClick();
                                 this.setState({inputText: ''})
                             }}>
-                                <span style={{color: 'white', fontSize: 14}}>{disabled ? '停止' : '开始'}</span>
+                                <span style={{color: 'white', fontSize: 14}}>{disabled ? '停止' : '发送'}</span>
                             </div>
                         )
                     }