yt-chat-components 1.1.7 → 1.1.9

package/src/YtChatView/chatWidget/chatWindow/callInterface/style.ts

@@ -0,0 +1,45 @@
+export const callStyle = `
+.call-interface {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.call-header {
+  padding-top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contact-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contact-info h2 {
+  margin-top: 20px;
+  margin-bottom: 5px;
+  font-size: 24px;
+  color: #333;
+}
+
+.call-status {
+  color: #666;
+  font-size: 16px;
+}
+
+.call-controls {
+  padding-bottom: 100px;
+  display: flex;
+  justify-content: center;
+}
+
+.hangup-icon {
+  font-size: 24px;
+  color: white;
+}
+`

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/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,6 +131,7 @@ export default function ChatWindow({
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const lastMessage = useRef<HTMLDivElement>(null);
+  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 */
@@ -447,8 +452,19 @@ export default function ChatWindow({
         });
       setDropDownList(undefined);
     }
+    inputRef.current.value=''
   }
 
+  // 处理打电话按钮点击
+  const handleCallButtonClick = () => {
+    setShowCallInterface(true);
+  };
+  
+  // 处理挂断电话
+  const handleHangup = () => {
+    setShowCallInterface(false);
+  };
+
   /**
    * 获取文件类型
    * @param file File 对象
@@ -613,37 +629,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.onend = () => {
+        // 如果不是手动停止的，则可能是出错或自动结束
+        if (recordState) {
+          setRecordState(false);
+        }
       };
-      recognition.start()
-      setRecordState(true);
+  
+      try {
+        recognition.start();
+        setRecordState(true);
+      } catch (error) {
+        messageTip.error("启动语音识别失败，请检查浏览器设置");
+        console.error("启动语音识别失败:", error);
+      }
     }
-  }
+  };
 
   /**
    * 输出消息时，滚动到底部
@@ -754,7 +803,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}>
@@ -963,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) => {
@@ -995,7 +1044,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="支持图片格式">
@@ -1013,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'
@@ -1038,11 +1099,26 @@ 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}
+          userInfo={userInfo}
+        />
+        :
         <div className="cl-middle-container">
           <div className="cl-header" style={isMobile ? {position: 'absolute', top: 20, left: 0, paddingLeft: '1.6rem', paddingRight: '1.6rem'} : {}}>
             {
@@ -1051,7 +1127,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}
@@ -1102,7 +1178,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

@@ -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){
@@ -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}