yt-chat-components 1.7.5 → 1.7.6

package/package.json

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

@@ -52,7 +52,6 @@ export class AudioPlayer {
 
     connect(token : string) {
         // cosyvoice 流式语言合成 2元、万字
-        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}`;

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

@@ -377,7 +377,7 @@ const CallInterface: React.FC<CallInterfaceProps> = ({
         } else if (message.type === 'connected') {
           setCallStatus('connected');
           if (message.audioData) {
-            handleAudioData(message.audioData);
+            handleAudioChunkData(message.audioData)
           }
         } else if (message.type === 'complete-audio') {
           // 处理从后端返回的完整音频响应

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import {extractMessageFromOutput} from './utils';
+import {checkAndRequestMicrophonePermission, extractMessageFromOutput} from './utils';
 import React, {Context, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {ChatMessageType, embedAppExtend, InputValueType, MessageItem, MessageType} from './types/chatWidget';
 import ChatMessage from './chatMessage';
@@ -661,7 +661,11 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
 
   // 处理打电话按钮点击
   const handleCallButtonClick = () => {
-    setShowCallInterface(true);
+    checkAndRequestMicrophonePermission().then((isGranted) => {
+      if (isGranted) {
+        setShowCallInterface(true);
+      }
+    });
   };
   
   // 处理挂断电话
@@ -1374,7 +1378,13 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
               <div
                   className="w_send_voice_box"
                   style={receivingMessage ? {cursor: 'not-allowed'} : {}}
-                  onClick={startConnectAndRecord}
+                  onClick={() => {
+                    checkAndRequestMicrophonePermission().then(isGranted => {
+                      if (isGranted){
+                        startConnectAndRecord();
+                      }
+                    })
+                  }}
               >
                 <img src={recordState ? soundWavePng : (speakUrl || luyinPng)} style={{width: 35}}
                      className={recordState ? "w_recordIng" : ''}></img>

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

@@ -1,6 +1,7 @@
 import React from "react";// 音波动画组件
 import styles from "./index.module.css";
 import {Input, message} from "antd";
+import {checkAndRequestMicrophonePermission} from "../utils";
 
 class InputMobile extends React.Component {
     constructor(props) {
@@ -54,13 +55,26 @@ class InputMobile extends React.Component {
     handleRecordClick = () => {
         const {onStartRecordClick} = this.props;
         if (this.state.isVoice && !this.state.isRecording) {
-            this.startRecording();
-            onStartRecordClick()
+            checkAndRequestMicrophonePermission().then(isGranted => {
+                if (isGranted) {
+                    this.startRecording();
+                    onStartRecordClick();
+                }
+            })
         } else {
             this.stopRecording();
         }
     }
 
+    handleSwitchVoice = () => {
+        // 如果正在录音，则停止录音
+        if (this.state.isRecording) {
+            this.stopRecording();
+        }else {
+            this.setState({isVoice: !this.state.isVoice})
+        }
+    }
+
     render() {
         const {isShowVoiceButton, disabled, placeholder, onSendClick, inputRef, onSmartRobotClick = () => {}, isInH5Page } = this.props;
         return (
@@ -75,7 +89,7 @@ class InputMobile extends React.Component {
                     {
                         isShowVoiceButton &&
                         <div
-                            onClick={() => this.setState({isVoice: !this.state.isVoice})}
+                            onClick={this.handleSwitchVoice}
                             className={styles.m_voiceToggle}
                         >
                             <img

package/src/YtChatView/chatWidget/chatWindow/utils.ts

@@ -1,75 +1,127 @@
-export function getChatPosition(
-	triggerPosition: DOMRect,
-	Cwidth:number,
-	Cheight:number,
-	position?: string,
-): { top: string; left: string;
-	position?: string, } {
-	if (!triggerPosition) {
-		return { top: "0px", left: "0px" }; // Return empty string if trigger position is not available
-	}
-
-	const { top, left, width, height } = triggerPosition;
-
-	const distance = 5; // Adjust this value to set the desired distance from the trigger
-	if(!position) return { top: distance + height+ "px", left: width + "px" };
-
-	switch (position) {
-		case "top-left":
-			return { top: - distance - Cheight + "px", left: -Cwidth + "px" };
-		case "top-center":
-			return { top: - distance - Cheight + "px", left: width/2-Cwidth / 2 + "px" };
-		case "top-right":
-			return { top: - distance - Cheight + "px", left: width+ "px" };
-		case "center-left":
-			return { top: width/2-Cheight/2 + "px", left: -Cwidth - distance + "px" };
-		case "center-right":
-			return {
-				top: width/2-Cheight/2 + "px",
-				left: width + distance + "px",
-			};
-		case "bottom-right":
-			return { top: distance + height+ "px", left: width + "px" };
-		case "bottom-center":
-			return {
-				top: distance + height+ "px",
-				left: width/2-Cwidth / 2 + "px",
-			};
-		case "bottom-left":
-			return { top: distance + height+ "px", left: -Cwidth + "px"};
-		default:
-			return { top: distance + height+ "px", left: width + "px" };
-		}
-}
-
-export function getAnimationOrigin(position?:string) {
-	if(!position) return "origin-top-left";
-	switch (position) {
-		case "top-left":
-			return 'origin-bottom-right'
-		case "top-center":
-			return "origin-bottom";
-		case "top-right":
-			return "origin-bottom-left";
-		case "center-left":
-			return "origin-center";
-		case "center-right":
-			return "origin-center";
-		case "bottom-right":
-			return "origin-top-left";
-		case "bottom-center":
-			return "origin-top";
-		case "bottom-left":
-			return "origin-top-right"
-		default:
-			return "origin-top-left"
-		}
-}
-
-export function extractMessageFromOutput(output:{type:string, message:any}){
-	const {type, message} = output;
-	if(type === "text") return message;
-	if (type ==="message") return message.text;
-	if(type==="object") return message.text;
-	return "Unknown message structure"
-}
+import {message} from "antd";
+
+
+export function getChatPosition(
+	triggerPosition: DOMRect,
+	Cwidth:number,
+	Cheight:number,
+	position?: string,
+): { top: string; left: string;
+	position?: string, } {
+	if (!triggerPosition) {
+		return { top: "0px", left: "0px" }; // Return empty string if trigger position is not available
+	}
+
+	const { top, left, width, height } = triggerPosition;
+
+	const distance = 5; // Adjust this value to set the desired distance from the trigger
+	if(!position) return { top: distance + height+ "px", left: width + "px" };
+
+	switch (position) {
+		case "top-left":
+			return { top: - distance - Cheight + "px", left: -Cwidth + "px" };
+		case "top-center":
+			return { top: - distance - Cheight + "px", left: width/2-Cwidth / 2 + "px" };
+		case "top-right":
+			return { top: - distance - Cheight + "px", left: width+ "px" };
+		case "center-left":
+			return { top: width/2-Cheight/2 + "px", left: -Cwidth - distance + "px" };
+		case "center-right":
+			return {
+				top: width/2-Cheight/2 + "px",
+				left: width + distance + "px",
+			};
+		case "bottom-right":
+			return { top: distance + height+ "px", left: width + "px" };
+		case "bottom-center":
+			return {
+				top: distance + height+ "px",
+				left: width/2-Cwidth / 2 + "px",
+			};
+		case "bottom-left":
+			return { top: distance + height+ "px", left: -Cwidth + "px"};
+		default:
+			return { top: distance + height+ "px", left: width + "px" };
+		}
+}
+
+export function getAnimationOrigin(position?:string) {
+	if(!position) return "origin-top-left";
+	switch (position) {
+		case "top-left":
+			return 'origin-bottom-right'
+		case "top-center":
+			return "origin-bottom";
+		case "top-right":
+			return "origin-bottom-left";
+		case "center-left":
+			return "origin-center";
+		case "center-right":
+			return "origin-center";
+		case "bottom-right":
+			return "origin-top-left";
+		case "bottom-center":
+			return "origin-top";
+		case "bottom-left":
+			return "origin-top-right"
+		default:
+			return "origin-top-left"
+		}
+}
+
+export function extractMessageFromOutput(output:{type:string, message:any}){
+	const {type, message} = output;
+	if(type === "text") return message;
+	if (type ==="message") return message.text;
+	if(type==="object") return message.text;
+	return "Unknown message structure"
+}
+
+/**
+ * 麦克风权限检查及请求
+ */
+export async function checkAndRequestMicrophonePermission() {
+	// 检查是否支持 navigator.mediaDevices 和 getUserMedia
+	if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+		console.error('您的浏览器不支持麦克风访问');
+		alert('您的浏览器不支持麦克风访问，请使用最新版本的浏览器尝试。');
+		return false;
+	}
+
+	try {
+		// 尝试获取麦克风权限
+		const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+		console.log('麦克风权限已授予');
+
+		// 如果成功获取权限，关闭音频流以释放麦克风资源
+		stream.getTracks().forEach(track => track.stop());
+		return true;
+	} catch (err) {
+		let alertMessage = '获取麦克风失败:';
+		// @ts-ignore
+		switch(err.name) {
+			case 'NotAllowedError':
+			case 'PermissionDeniedError': // 部分浏览器可能使用 PermissionDeniedError
+				alertMessage += '您已拒绝麦克风访问权限。请在浏览器设置中允许此网站访问麦克风。';
+				break;
+			case 'NotFoundError':
+				alertMessage += '未找到可用的麦克风设备。';
+				break;
+			case 'NotReadableError':
+				alertMessage += '麦克风设备正在被占用或无法访问。';
+				break;
+			case 'SecurityError':
+				alertMessage += '安全错误，可能是由于页面不是通过HTTPS提供服务。';
+				break;
+			default:
+				alertMessage += err;
+				break;
+		}
+		console.error(alertMessage);
+
+		// 提供用户友好的提示信息
+		message.warning (alertMessage + '\n如果您希望使用录音功能，请按照提示调整设置。');
+
+		return false;
+	}
+}

package/src/YtChatView/components/TabSelector/index.jsx

@@ -114,7 +114,6 @@ const TabSelector = ({
                                         borderBottom: 'transparent !important',
                                     }}
                                     renderTabBar={(props, DefaultTabBar) => {
-                                        console.log(" " , activeKey , props.activeKey)
                                         return (
                                             <div className={props.activeKey === activeKey ? styles.tabBarActive : styles.tabBar}>
                                                 <DefaultTabBar {...props}  style={{ marginBottom: '0px' }}/>

package/src/YtChatView/mobileChat/index.jsx

@@ -403,10 +403,8 @@ export class MobileChatPage extends React.Component {
       userInfo.code = sessionId;
     }
     const operationId = userInfo['code'] || '';
-    console.log('getCurrentFlowHistory', flowId, operationId)
     getHistoryList(this.props.hostUrl, flowId, operationId).then((res) => {
       if(res.status === 200){
-        console.log('getCurrentFlowHistory', res.data)
         this.setState({ historyList: res.data });
       }
     });
@@ -429,7 +427,6 @@ export class MobileChatPage extends React.Component {
       }else{
         const currentScene = sceneData||this.state.sceneInfo;
         const currentFlow = currentScene.flows[0];
-        console.log('getHistoryList', sceneData, currentFlow)
         const dropDownList = this.getDropDownList(currentFlow.welcome_words);
         if(!isEmpty(sceneData)){
           this.setState({ currentFlow, dropDownList })

package/src/YtChatView/mobileChatV2/index.jsx

@@ -674,8 +674,6 @@ export class MobileChatPageV2 extends React.Component {
                     <img src={"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/call.png"}
                          alt="call"
                          onClick={() => {
-                           console.log(this.chatWindowRef);
-
                            this.chatWindowRef.current.handleCallButtonClick()
                          }}
                     />