yt-chat-components 1.1.6 → 1.1.8

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

@@ -234,7 +234,10 @@ export default function ChatMessage({
       if (className && className.includes('language-echart')) {
         try {
           // 解析代码块内容为 JSON 配置
+          // console.log(" --- 1", children.toString().trim())
           const chartOptions = JSON.parse(children.toString().trim());
+          // console.log(" --- 2", chartOptions)
+
           // 渲染 ECharts 组件
           return <EChartsReact option={chartOptions} style={{minWidth: 500, width: '100%', height: 300, backgroundColor: '#fff' }} />;
         } catch (error) {

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

@@ -1,23 +1,23 @@
-// @ts-nocheck
-import { MoreHorizontal } from "lucide-react";
-import { ChatMessagePlaceholderType } from "../types/chatWidget";
-// import './index.module.css'
-
-export default function ChatMessagePlaceholder({
-  bot_message_style,
-}: ChatMessagePlaceholderType) {
-  return (
-    <div
-      className="cl-chat-message cl-justify-start"
-    >
-        <div style={bot_message_style} className={"cl-bot_message"}>
-            <div className="cl-animate-pulse">
-              <div className="plh_textBox">
-                <div className="plh_text">深度思考中</div>
-                <MoreHorizontal />
-              </div>
-            </div>
-        </div>
-    </div>
-  );
-}
+// @ts-nocheck
+import { MoreHorizontal } from "lucide-react";
+import { ChatMessagePlaceholderType } from "../types/chatWidget";
+// import './index.module.css'
+
+export default function ChatMessagePlaceholder({
+  bot_message_style, aiStatus
+}: ChatMessagePlaceholderType) {
+  return (
+    <div
+      className="cl-chat-message cl-justify-start"
+    >
+        <div style={bot_message_style} className={"cl-bot_message"}>
+            <div className="cl-animate-pulse">
+              <div className="plh_textBox">
+                <div className="plh_text">{aiStatus ? aiStatus : "深度思考中"}</div>
+                <MoreHorizontal />
+              </div>
+            </div>
+        </div>
+    </div>
+  );
+}

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

@@ -22,6 +22,8 @@ import typeMobiPng from '../../../assets/aicenter/type-mobi.png';
 import typeRPubPng from '../../../assets/aicenter/type-rpub.png';
 import soundWavePng from '../../../assets/aicenter/sound-wave.gif';
 import luyinPng from '../../../assets/aicenter/luyin.png';
+import phonePng from '../../../assets/aicenter/phone.png';
+import CallInterface from './callInterface/index.tsx';
 import { RightOutlined } from '@ant-design/icons';
 import { Image, message as messageTip, Tooltip, Typography } from 'antd';
 import { isEmpty, isFunction } from 'lodash';
@@ -37,6 +39,7 @@ const setValue = (value) => {
 };
 
 export default function ChatWindow({
+  is_enable_call,
   tags,
   getHistoryList,
   userInfo,
@@ -82,6 +85,7 @@ export default function ChatWindow({
   isMobile = false,
   isShowChatHeader = true,
 }: {
+  is_enable_call:boolean;
   tags: [];
   getHistoryList: Function;
   userInfo: object;
@@ -127,7 +131,8 @@ export default function ChatWindow({
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const lastMessage = useRef<HTMLDivElement>(null);
-  const [windowPosition, setWindowPosition] = useState({ left: '0', top: '0' });
+  const [showCallInterface, setShowCallInterface] = useState(false); // 添加通话界面状态
+  const [aiStatus, setAiStatus] = useState(null);
   const inputRef = useRef<HTMLInputElement>(null); /* User input Ref */
   /* Initial listener for loss of focus that refocuses User input after a small delay */
   const [nowAIContent, setNowAIContent] = useState<string>('');
@@ -170,7 +175,7 @@ export default function ChatWindow({
   const handleDelayMessage = () => {
     if (delayMessageList.length > 0) {
       const message = delayMessageList.shift();
-      console.log("-- add = delay")
+      // console.log("-- add = delay")
       addMessage(message);
       handleDelayMessage();
     }
@@ -220,6 +225,11 @@ export default function ChatWindow({
       })
       delayMessageTimer()
     }
+    else if (event == 'status') {
+      // 更新状态
+      console.log("-- status = ", data)
+      setAiStatus(data.status)
+    }
     else if (event == 'end') {
       const res = {
         data: data['result'],
@@ -291,6 +301,7 @@ export default function ChatWindow({
         contentRef.current = null
       }
       setSendingMessage(false);
+      setAiStatus(null)
     }
   };
 
@@ -443,6 +454,16 @@ export default function ChatWindow({
     }
   }
 
+  // 处理打电话按钮点击
+  const handleCallButtonClick = () => {
+    setShowCallInterface(true);
+  };
+  
+  // 处理挂断电话
+  const handleHangup = () => {
+    setShowCallInterface(false);
+  };
+
   /**
    * 获取文件类型
    * @param file File 对象
@@ -607,37 +628,70 @@ export default function ChatWindow({
   /**
    * 语音实时识别
    */
-  const startRecord = ()=>{
-    if (!('webkitSpeechRecognition' in window)) {
-      alert('您的浏览器不支持语音识别功能')
+  const startRecord = () => {
+    // 检查是否支持语音识别API（更通用的检测方式）
+    if (!('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
+      messageTip.error('您的浏览器不支持语音识别功能，请使用Chrome或Edge浏览器');
       return;
     }
-    if(recordState){
+    
+    // 检查是否在HTTPS环境
+    if (window.location.protocol !== 'https:' && window.location.hostname !== 'localhost') {
+      messageTip.error('语音识别功能需要在HTTPS环境下使用');
+      return;
+    }
+  
+    if (recordState) {
       recognition.stop();
       setRecordState(false);
-    }else{
-      recognition = new webkitSpeechRecognition();
+    } else {
+      // 使用标准API或webkit前缀版本
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      recognition = new SpeechRecognition();
       recognition.continuous = true;
       recognition.interimResults = true;
       recognition.lang = 'zh-CN';
-
+  
       recognition.onresult = (event) => {
         const transcript = Array.from(event.results)
           .map(result => result[0].transcript)
           .join('');
-        setValue(transcript)
+        setValue(transcript);
+        
+        // 如果使用的是textarea，还需要更新DOM元素的值
+        if (inputRef.current) {
+          inputRef.current.value = transcript;
+        }
       };
-
+  
       recognition.onerror = (event) => {
-        if(event.error === 'not-allowed'){
-          messageTip.error("录音权限被拒绝，请允许录音权限后重试")
+        if (event.error === 'not-allowed') {
+          messageTip.error("录音权限被拒绝，请允许录音权限后重试");
+        } else if (event.error === 'no-speech') {
+          messageTip.info("未检测到语音，请说话或检查麦克风");
+        } else {
+          messageTip.error(`语音识别错误: ${event.error}`);
         }
         console.error('语音识别错误:', event);
+        setRecordState(false);
       };
-      recognition.start()
-      setRecordState(true);
+      
+      recognition.onend = () => {
+        // 如果不是手动停止的，则可能是出错或自动结束
+        if (recordState) {
+          setRecordState(false);
+        }
+      };
+  
+      try {
+        recognition.start();
+        setRecordState(true);
+      } catch (error) {
+        messageTip.error("启动语音识别失败，请检查浏览器设置");
+        console.error("启动语音识别失败:", error);
+      }
     }
-  }
+  };
 
   /**
    * 输出消息时，滚动到底部
@@ -748,7 +802,7 @@ export default function ChatWindow({
       if (isEmpty(dropManUrl)){
         return (
             <div className='cl-drop-down'>
-              <div className="drop-down-title">Hi，ssss欢迎使用{window_title}，您可以这样问我:</div>
+              <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
               <div className="drop-down-list">
                 {dropDownList.map(({backgroundImg, title}) => (
                     <div className="drop-down-item-card" key={title}>
@@ -862,6 +916,9 @@ export default function ChatWindow({
               key={index}
               className="w_tagItemBox"
               onClick={() => {
+                if (sendingMessage){
+                  return
+                }
                 handleSendMessage(item?.name);
                 setFileList([]);
               }}
@@ -986,7 +1043,18 @@ export default function ChatWindow({
                   </div>
                 </Tooltip>
             }
-            {/*<Tooltip title="支持PDF / Word / Excel / Markdown / txt / mobi / rpub">*/}
+            {
+              is_enable_call &&
+                <Tooltip title="语音通话">
+                  <div
+                      className="w_send_voice_box"
+                      style={sendingMessage ? { cursor: 'not-allowed' } : {}}
+                      onClick={handleCallButtonClick}
+                  >
+                    <img src={phonePng} style={{ width: 23 }}></img>
+                  </div>
+                </Tooltip>
+            }
             {
               isShowUploadButton &&
               <Tooltip title="支持图片格式">
@@ -1029,11 +1097,25 @@ export default function ChatWindow({
     )
   }
   return (
-      <div
-          style={{...chat_window_style, width: width, height: "100%"}}
-          ref={ref}
-          className="cl-window"
-      >
+    <div
+        style={{...chat_window_style, width: width, height: "100%"}}
+        ref={ref}
+        className="cl-window"
+    >
+
+      {/* 添加通话界面 */}
+      {is_enable_call && showCallInterface ?
+        <CallInterface
+          onHangup={handleHangup}
+          contactName={window_title}
+          contactAvatar={agentUrl}
+          api_key={api_key}
+          flowId={flowId}
+          sessionId={sessionId}
+          hostUrl={hostUrl}
+          onMessage={addMessage}
+        />
+        :
         <div className="cl-middle-container">
           <div className="cl-header" style={isMobile ? {position: 'absolute', top: 20, left: 0, paddingLeft: '1.6rem', paddingRight: '1.6rem'} : {}}>
             {
@@ -1042,7 +1124,7 @@ export default function ChatWindow({
                   {
                     isTitleSideIcon ?
                         <img className="p_logoImg" style={{width: logoWidth, height: 'auto', marginRight: 10}}
-                             src={agentUrl}/> :
+                              src={agentUrl}/> :
                         <span className="diamond"/>
                   }
                   {window_title}
@@ -1085,7 +1167,7 @@ export default function ChatWindow({
                   message={{ message: nowAIContent}}
                   isSend={false}
                   handleSendMessage={handleSendMessage}
-                /> : <ChatMessagePlaceholder bot_message_style={bot_message_style} />
+                /> : <ChatMessagePlaceholder bot_message_style={bot_message_style} aiStatus={aiStatus} />
               )
             }
             <div ref={lastMessage}></div>
@@ -1093,7 +1175,8 @@ export default function ChatWindow({
           {
             renderInputArea()
           }
-      </div>
+        </div>
+      }
     </div>
   );
 }

package/src/YtChatView/chatWidget/index.tsx

@@ -4,6 +4,7 @@ import ChatWindow from './chatWindow';
 import { ChatMessageType } from './chatWindow/types/chatWidget';
 
 export default function ChatWidget({
+  is_enable_call,
   tags,
   getHistoryList,
   userInfo,
@@ -44,6 +45,7 @@ export default function ChatWidget({
   isMobile = false,
   isShowChatHeader = true,
 }: {
+  is_enable_call:boolean,
   tags: [];
   getHistoryList: Function;
   userInfo: object;
@@ -2543,6 +2545,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
     <div style={{ position: 'relative',height:'100%' }}>
       <style dangerouslySetInnerHTML={{ __html: styles + markdownBody + yt_style }}></style>
       <ChatWindow
+        is_enable_call={is_enable_call}
         tags={tags}
         getHistoryList={getHistoryList}
         userInfo={userInfo}

package/src/YtChatView/previewDialog/index.jsx

@@ -502,6 +502,7 @@ export class ToolDialog extends React.Component {
                   window_title={currentFlow?.name || title}
                   flow_id={currentFlow?.id || flowId}
                   tags={currentFlow?.keywords || tags}
+                  is_enable_call={currentFlow?.is_enable_call || false}
                   host_url={hostUrl}
                   api_key={api_key}
                   session_id={this.state.sessionId}