yt-chat-components 1.5.3 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",

package/public/index.html

@@ -111,8 +111,8 @@
         host-url="https://ai-api.yuntu.cn"
         sign-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/logo.png"
         app-id="5f48c683-38d8-430e-8479-17730a605821"
-        box-style='{"height":"100%","background":"url(https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/system/portal_bg_blue.png) center top / 100% 100% no-repeat"}'
-        is-show-side-right=false
+        box-style='{"height":"100%","minWidth": "1380px","background":"url(https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/system/portal_bg_blue.png) center top / 100% 100% no-repeat"}'
+        is-show-side-right=true
         is-show-side-left=true
         dialog-index="999999999"
         agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/byz/xinge.png"
@@ -122,7 +122,6 @@
         is-title-side-icon=true
         is-show-upload-button=false
         drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"
-        banner-map='{"a":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png","b":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png","c":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png"}'
         asset-map='{"sendMessageUrl":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/sendMessage.png","stopMessageUrl":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/stopMessage.png","speakUrl":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/speak.png"}'
 />
 </body>

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

@@ -67,7 +67,7 @@ export class StreamAudioPlayer {
             this.pendingBufferSizeSec += durationSec;
 
             // 如果累计 ≥ 0.5s 才创建 buffer 并推入队列
-            if (this.pendingBufferSizeSec >= 0.5) {
+            if (this.pendingBufferSizeSec >= 0.3) {
                 const totalLength = this.pendingBuffer.reduce((sum, b) => sum + b.length, 0);
                 const mergedChannel = new Float32Array(totalLength);
 

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

@@ -249,11 +249,11 @@ export async function getFlowInfo(baseUrl: string, flowId: string, api_key: stri
   return axios.get(`${baseUrl}/api/t1/flow/detail/${flowId}`,{headers});
 }
 
-export async function getKnowledgeInfo(baseUrl: string, flowId: string, api_key: string) {
+export async function getQaInfo(baseUrl: string, flowId: string, api_key: string) {
   const headers = {
     'Content-Type': 'multipart/form-data',
     'x-api-key': api_key,
     timeout:600000
   };
-  return axios.get(`${baseUrl}/api/t1/knowledge/detail/${flowId}`,{headers});
+  return axios.get(`${baseUrl}/api/t1/qa_doc/find_doc_by_flow_id/${flowId}`,{headers});
 }

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

@@ -153,6 +153,7 @@ export default function ChatWindow({
     { file: File; fileUrl: string; fileType: string; fileId: string }[]
   >([]);
   const scrollContainerRef = useRef(null);
+  const sessionIdRef = useRef(null);
   const [showLeftArrow, setShowLeftArrow] = useState(false); // 控制左侧箭头显示
   const [showRightArrow, setShowRightArrow] = useState(false); // 控制右侧箭头显示
   const isStream = true;//是否流式输出（手动开关）
@@ -529,7 +530,7 @@ export default function ChatWindow({
 
       let userInfoClone = {...userInfo};
       if(isEmpty(userInfoClone.code)) {
-        userInfoClone.code = sessionId;
+        userInfoClone.code = sessionIdRef.current;
       }
       const code = userInfoClone['code'] ? userInfoClone['code'] : ""
       const name = userInfoClone['name'] ? userInfoClone['name'] : ""
@@ -573,7 +574,7 @@ export default function ChatWindow({
         message,
         input_type,
         output_type,
-        sessionId,
+        sessionIdRef.current,
         output_component,
         tweaks,
         api_key,
@@ -598,13 +599,13 @@ export default function ChatWindow({
               isSend: false
             });
           }else if (e.name !== 'AbortError') {
-            messageTip.error('网络请求错误，请重试');
+            messageTip.error('当前网络繁忙，请稍后重试');
             // ?????? done
             addMessage({
               messageItemList: [{
                 id:new Date().getTime() + '',
                 name: "AI",
-                message: "网络请求错误，请重试",
+                message: "当前网络繁忙，请稍后重试",
                 type: MessageType.text,
               }],
               isSend: false
@@ -895,9 +896,9 @@ export default function ChatWindow({
     try {
       let userInfoClone = userInfo;
       if(isEmpty(userInfoClone.code)) {
-        userInfoClone.code = sessionId;
+        userInfoClone.code = sessionIdRef.current;
       }
-      const res = await getChatHistory(hostUrl, flowId, sessionId, userInfoClone['code']);
+      const res = await getChatHistory(hostUrl, flowId, sessionIdRef.current, userInfoClone['code']);
       const chatHistory = res.data?.length ? res.data : [];
 
       // 这里是多轮对话全量的信息，应该逐条处理成最终结果
@@ -957,6 +958,7 @@ export default function ChatWindow({
    * 当获取历史记录时（sessindId变化时），清空消息，并添加历史记录
    */
   useEffect(() => {
+    sessionIdRef.current = sessionId;
     fetchChatHistory().then();
 
     return () => {
@@ -999,7 +1001,7 @@ export default function ChatWindow({
    * 对话是否处于活跃状态
    * */
   const isActiveMessage = useCallback(() => {
-    return !!receivingMessageRef.current;
+    return receivingMessageRef.current;
   }, []);
 
   const renderTipsInfo = () => {

package/src/YtChatView/chatWidget/index.tsx

@@ -100,7 +100,6 @@ export default function ChatWidget({
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
-  const sessionId = session_id;
 
   function updateLastMessage(message: ChatMessageType) {
     setMessages((prev) => {
@@ -157,7 +156,7 @@ export default function ChatWidget({
         messages={messages}
         triggerRef={triggerRef}
         position={chat_position}
-        sessionId={sessionId}
+        sessionId={session_id}
         additional_headers={additional_headers}
         setDropDownList={setDropDownList}
         dropDownList={dropDownList}

package/src/YtChatView/previewDialogV2/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ChatWidget from '../chatWidget/index';
 import aiAvatarPng from '../../assets/aicenter/aiavatar.png';
-import { getFlowInfo, getHistoryList, getKnowledgeInfo } from '../chatWidget/chatWindow/controllers/index';
+import { getFlowInfo, getHistoryList, getQaInfo } from '../chatWidget/chatWindow/controllers/index';
 import './index.module.css'
 import { v4 as uuidv4 } from 'uuid';
 import historyListEmptyPng from '../../assets/aicenter/history-list-empty.png';
@@ -69,19 +69,19 @@ const style = `
 }
 .p_toolDialog .p_sign{
   width: calc(100vw - 140px);
+  min-width:1380px;
   margin: 0 auto;
-  min-width: 1200px;
 }
 
 .dialog_box{
   margin: 1.5rem auto 0;
   width: calc(100vw - 140px);
   height: calc(100vh - 192px);
+  min-width:1380px;
   background: #fff;
   border-radius: 15px;
   display: flex;
   flex-direction: column;
-  min-width: 1200px;
 }
 .p_toolDialog .p_toolLeft {
   display: flex;
@@ -222,7 +222,8 @@ const style = `
 
 .p_toolDialog .p_toolRight {
   flex: 1;
-  background: #f5f5f5;h
+  background: #f5f5f5;
+  min-width:780px;
 }
 
 .p_toolRightToRight {
@@ -376,17 +377,17 @@ export class ToolDialogV2 extends React.Component {
     const res = await getFlowInfo(this.props.hostUrl, this.props.appId, api_key);
     if(res.status === 200 && typeof res.data !== "string") {
       //  查询知识库相关信息用作预置问题
-      // getKnowledgeInfo(this.props.hostUrl, this.props.appId, api_key).then(res => {
-      //   if (res.status === 200 && typeof res.data !== "string") {
-      //     if (!isEmpty(knowledgeInfo)) {
-      //       this.setState({ knowledgeInfo: res.data })
-      //     } else if (!isEmpty(this.props.knowledgeInfo)) {
-      //       this.setState({ knowledgeInfo: this.props.knowledgeInfo })
-      //     }
-      //   }
-      // }).catch(e => {
-      //   console.log(e);
-      // });
+      getQaInfo(this.props.hostUrl, this.props.appId, api_key).then(res => {
+        if (res.status === 200 && typeof res.data !== "string") {
+          if ( !isEmpty(res.data) && !isEmpty(res.data.media) && !isEmpty(res.data.question)) {
+            this.setState({ knowledgeInfo: res.data })
+          } else if ( !isEmpty(this.props.knowledgeInfo)) {
+            this.setState({ knowledgeInfo: this.props.knowledgeInfo })
+          }
+        }
+      }).catch(e => {
+        console.log(e);
+      });
       this.setState({ currentFlow: res.data });
     }
     return res.data;
@@ -474,7 +475,7 @@ export class ToolDialogV2 extends React.Component {
       modalWidth,
       isShowReadIcon = false,
       signUrl,
-      knowledgeInfo,
+      isShowVoiceButton,
     } = this.props;
     const { currentFlow = {} } = this.state;
     return (
@@ -562,6 +563,7 @@ export class ToolDialogV2 extends React.Component {
                       dropDownList={this.state.dropDownList}
                       baseConfig={{ isTitleSideIcon, logoWidth, agentUrl, ...assetMap }}
                       isShowUploadButton={isShowUploadButton}
+                      isShowVoiceButton={isShowVoiceButton}
                       dropManUrl={currentFlow.character}
                       modalWidth={modalWidth}
                       isShowReadIcon={isShowReadIcon}
@@ -572,32 +574,34 @@ export class ToolDialogV2 extends React.Component {
                   />
                   </MethodContext.Provider>
                 </div>
-                <div className={'p_toolRightToRight'}>
-                  <Carousel autoplay={{ dotDuration: true }} autoplaySpeed={4000} className={'p_carousel'}>
-                    {
-                      (this.state.knowledgeInfo?.media||[]).map(item => {
-                        if (item.a_type==='image') {
-                          return <div key={item.a}>
-                            <Image
-                                preview={{
-                                  mask: <div><EyeOutlined style={{marginRight:'4px'}}/>预览</div>
-                                }}
-                                style={contentStyle} src={item.a}
-                            />
-                          </div>
-                        }else if(item.a_type==='video'){
-                          return <div key={item.a}>
-                            <video style={contentStyle} src={item.a} controls={true}/>
-                          </div>
-                        }
-                      })
-                    }
-                  </Carousel>
-                  <div style={{ height: '1px', background: '#E5E5E5',marginTop: '25px' }}/>
-                  <div className={'p_hot'}>
-                    <img src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/hot.png'}/>
-                    <span>热点问题</span>
-                  </div>
+                {
+                 isShowSideRight && <div className={'p_toolRightToRight'}>
+                    <Carousel autoplay={{ dotDuration: true }} autoplaySpeed={4000} className={'p_carousel'}>
+                      {
+                        (this.state.knowledgeInfo?.media || []).map(item => {
+                          if (item.a_type === 'image') {
+                            return <div key={item.a}>
+                              <Image
+                                  preview={{
+                                    mask: <div><EyeOutlined style={{ marginRight: '4px' }}/>预览</div>
+                                  }}
+                                  style={contentStyle} src={item.a}
+                              />
+                            </div>
+                          } else if (item.a_type === 'video') {
+                            return <div key={item.a}>
+                              <video style={contentStyle} src={item.a} controls={true}/>
+                            </div>
+                          }
+                        })
+                      }
+                    </Carousel>
+                    <div style={{ height: '1px', background: '#E5E5E5', marginTop: '25px' }}/>
+                    <div className={'p_hot'}>
+                      <img
+                          src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/hot.png'}/>
+                      <span>热点问题</span>
+                    </div>
                     <TabSelector
                         isSimple={true}
                         handleRowClick={(word) => {
@@ -605,10 +609,11 @@ export class ToolDialogV2 extends React.Component {
                         }}
                         dataList={this.state.knowledgeInfo?.question || []}
                     />
-                </div>
+                  </div>
+                }
               </div>
             </div>
-            <div className={'p_footer'}><span style={{fontSize: 16}}>技术支持：北京云图科技有限公司</span></div>
+            <div className={'p_footer'}><span style={{ fontSize: 16 }}>技术支持：北京云图科技有限公司</span></div>
           </div>
         </div>
     );

package/src/YtChatView/previewDialogV2/index.module.css

@@ -13,8 +13,8 @@
 
 .toolDialogSign {
   width: calc(100vw - 140px);
+  min-width:1380px;
   margin: 0 auto;
-  min-width: 1200px;
 }
 
 .dialogBox {
@@ -25,7 +25,7 @@
   border-radius: 15px;
   display: flex;
   flex-direction: column;
-  min-width: 1200px;
+  min-width:1380px;
 }
 
 .toolLeft {
@@ -154,6 +154,7 @@
 .toolRight {
   flex: 1;
   background: #f5f5f5;
+  min-width:780px;
 }
 
 .toolRightToRight {