yt-chat-components 1.7.4 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.7.4",
+  "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/chatMessage/index.tsx

@@ -396,7 +396,13 @@ export default function ChatMessage({
           alt={''}
           fallback="data:image/png;base64,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"
       />
-    }
+    },
+    a: ({node, ...props}) => {
+      if (props.href?.startsWith('http')) {
+        return <a {...props} target="_blank" rel="noopener noreferrer"/>;
+      }
+      return <a {...props} />;
+    },
   }), [isSubmittingForm]);  // 依赖 isSubmittingForm 刷新ui
 
   const getStatusIcon = (status: CustomThoughtChainItem['status'], icon?: React.ReactNode) => {

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';
@@ -160,7 +160,8 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
   voice,
   onSmartRobotClick,
   isShowMobileInputArea,
-  isInH5Page
+  isInH5Page,
+  welcomeWords
 }, ref) => {
   const rootRef = useRef<HTMLDivElement>(null);
   const lastMessage = useRef<HTMLDivElement>(null);
@@ -660,7 +661,11 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
 
   // 处理打电话按钮点击
   const handleCallButtonClick = () => {
-    setShowCallInterface(true);
+    checkAndRequestMicrophonePermission().then((isGranted) => {
+      if (isGranted) {
+        setShowCallInterface(true);
+      }
+    });
   };
   
   // 处理挂断电话
@@ -1038,7 +1043,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
                 keyShowSize={4}
                 agentName={window_title}
                 agentUrl={agentUrl}
-                welcomeWords={`Hi，欢迎使用${window_title}，您可以这样问我:`}
+                welcomeWords={welcomeWords || '很高兴认识您，您有什么问题尽可咨询我！'}
                 handleRowClick={(word) => {
                   if(!receivingMessageRef.current){
                     handleSendMessage(word)
@@ -1373,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/chatWidget/index.tsx

@@ -59,6 +59,7 @@ export default function ChatWidget({
   isShowMobileInputArea,
   isInH5Page,
   chatWindowRef,
+  welcomeWords,
 }: {
   is_enable_call:boolean,
   tags: [];
@@ -111,6 +112,7 @@ export default function ChatWidget({
   isShowMobileInputArea?: boolean;
   isInH5Page: boolean;
   chatWindowRef?: object;
+  welcomeWords?: string;
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -193,6 +195,7 @@ export default function ChatWidget({
         onSmartRobotClick={onSmartRobotClick}
         isShowMobileInputArea={isShowMobileInputArea}
         isInH5Page={isInH5Page}
+        welcomeWords={welcomeWords}
       />
     </div>
   );

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

@@ -543,8 +543,8 @@ export class MobileChatPageV2 extends React.Component {
                     <div className="drawer-history-header" style={{marginTop:0, padding: '54px 14px 14px 14px', background: 'linear-gradient( 71deg, #E1E9FF 0%, #FFFFFF 100%)', position: "relative"}}>
                       <img src={icon_history_headerbg} style={{position: 'absolute', right: 0, bottom: 0, width: '40%', zIndex:0}}/>
                       <div className="drawer-history-header-title" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-                        <img style={{width: 35}} src={agentUrl}/>
-                        <span style={{fontSize: 24, marginLeft: 10}}>{agentName}</span>
+                        <img style={{width: 45}} src={agentUrl}/>
+                        <span style={{fontSize: 19, marginLeft: 10}}>{agentName}</span>
                       </div>
                     </div>
                     <div
@@ -575,7 +575,7 @@ export class MobileChatPageV2 extends React.Component {
                               justifyContent: 'center',
                               cursor: 'pointer',
                               padding: '30px 14px 15px 14px',
-                              borderBottom: this.state.currentTabKey === item.id ? '2px solid #2850FF' : '2px solid #fff'
+                              // borderBottom: this.state.currentTabKey === item.id ? '2px solid #2850FF' : '2px solid #fff'
                             }}
                                  onClick={() => this.setState({currentTabKey: item.id})}
                             >
@@ -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()
                          }}
                     />