bhd-components 0.7.8 → 0.7.10

package/es2017/customerService/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import "highlight.js/styles/default.css";
+import './html2canvas.test.js';
 interface Service {
     type: string;
     params: any;
@@ -14,6 +15,7 @@ interface Service {
     stepId?: string | number;
     onEvent: (a: string, b: string, c: string) => {};
     config: any;
+    screenshotAreaId: string;
 }
 declare const CustomerService: (props: Service) => JSX.Element;
 export default CustomerService;

package/es2017/customerService/index.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runt
 import React, { useEffect, useState, useRef } from "react";
 import { Modal, Drawer, Input, Tooltip } from "antd";
 import { ViewImage } from "bhd-components";
-import html2canvas from "html2canvas";
+// import html2canvas from "html2canvas";
 import cssStyle from "./index.module.less";
 import cssStyleOnline from "./index2.module.less";
 let styles = cssStyle;
@@ -23,11 +23,12 @@ import "highlight.js/styles/default.css";
 import { render } from "react-dom";
 import Provider from "../provider";
 const { TextArea  } = Input;
+import "./html2canvas.test.js";
 import knowledge_icon from "./images/knowledge_icon.png";
 // import { useMediaRecorder } from "./useMediaRecorder"; //录音使用文件
 import { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate } from "./function"; //一些方法
 const CustomerService = (props)=>{
-    let { userData , http , urllocation , onCancel , serverName , fetchEventSource , initShowType , onEvent , stepIds , stepId , config  } = props;
+    let { userData , http , urllocation , onCancel , serverName , fetchEventSource , initShowType , onEvent , stepIds , stepId , screenshotAreaId , config  } = props;
     // const { bese64String, startRecord, stopRecord } = useMediaRecorder(); //语音转文字
     // const [voiceRecordingStatus, setVoiceRecordingStatus] = useState(3); //语音录制状态 3，语音识别完成 2，录制中， 1，录制结束
     const [copyTextOBJ, setCopyTextObj] = useState([]); //复制的消息id
@@ -37,6 +38,7 @@ const CustomerService = (props)=>{
     const [keyWord, setKeyWord] = useState(""); //搜索内容
     const [questionsList, setQuestionsList] = useState([]); //问题列表
     const [hotQuestionsList, setHotQuestionsList] = useState([]); //热门问题
+    // const [videoHotQuestionsList, setVideoHotQuestionsList] = useState([]); //热门问题
     const [greetingMessage, setGreetingMessage] = useState(false); //聊天记录列表是否请求完成
     const [pageNum, setPageNum] = useState(1); //页码
     const [pageNumHistory, setPageNumHistory] = useState(0); //用于搜索历史记录后的页码
@@ -74,6 +76,7 @@ const CustomerService = (props)=>{
     let scrollTopHei = useRef(0);
     let isPosition = useRef(true);
     let recommendeQuestionID = useRef([]); //推荐问题id
+    let videoHotQuestionsList = useRef([]); //视频热门问题
     const mid = props.userData.mid;
     const remarkable = new Remarkable({
         highlight: function(str, lang) {
@@ -88,30 +91,51 @@ const CustomerService = (props)=>{
             return ""; // use external default escaping
         }
     });
+    useEffect(()=>{
+        // console.log(props,'lsdkcmsdlcksd')
+        // getQuestiionsList("", 1);
+        if (props.config && props.config.type == 'video') {
+            //获取热门推荐
+            videoPageQuestiionsList(1);
+        // getQuestiionsList("", 3)
+        }
+        setShowType(initShowType);
+    //获取视频页面推荐问题
+    // videoPageQuestiionsList();
+    // scrollToBottom();
+    }, [
+        initShowType
+    ]);
     useEffect(()=>{
         if (showType == 5) {
-            setImgBese64('');
-            html2canvas(document.getElementsByTagName('html')[0]).then((canvas)=>{
-                console.log(canvas, 22222);
-                setTimeout(()=>{
-                    //let dom = document.getElementById("container_html5_api")
-                    let dom = document.getElementById("rootWrapper");
-                    html2canvas(dom, {
-                        backgroundColor: null,
-                        useCORS: true,
-                        allowTaint: true,
-                        scale: 1,
-                        logging: false
-                    }).then(function(canvas) {
-                        // document.body.appendChild(canvas);
-                        console.log(canvas, 4444444);
-                        // var base64URL = canvas.toDataURL('image/jpeg')
-                        // let base64URL=canvas.toDataURL("image/jpg", 1.0)
-                        let base64URL = canvas.toDataURL("image/png");
-                        setImgBese64(base64URL);
-                    });
-                }, 100);
-            });
+            try {
+                setImgBese64('');
+                // html2canvas(document.getElementsByTagName('html')[0],{
+                //   // ignoreElements:(element)=>{
+                //   //  if(element.compareDocumentPosition(dom)===2)return true
+                //   //     return false
+                //   //  }
+                // }).then((canvas)=>{
+                //   console.log(canvas,22222);
+                // setTimeout(()=>{
+                let dom = document.getElementById(screenshotAreaId);
+                html2canvas(dom, {
+                    useCORS: true,
+                    // allowTaint: true, // 污染处理
+                    scale: 1
+                }).then(function(canvas) {
+                    // document.body.appendChild(canvas);
+                    // document.body.appendChild(canvas);
+                    console.log(canvas, 99999);
+                    // var base64URL = canvas.toDataURL('image/jpeg')
+                    let base64URL = canvas.toDataURL("image/jpg", 1.0);
+                    setImgBese64(base64URL);
+                });
+            //   },100)
+            // })
+            } catch (error) {
+                console.log(error);
+            }
         }
         if (showType != 1 && !firstLoad && pageCount > 0) {
             setFirstLoad(true);
@@ -195,16 +219,21 @@ const CustomerService = (props)=>{
         buttomHei,
         showType
     ]);
+    //创建聊天室并获取聊天室列表
     useEffect(()=>{
-        // console.log(props,'lsdkcmsdlcksd')
-        // getQuestiionsList("", 1);
-        setShowType(initShowType);
-        //获取视频页面推荐问题
-        videoPageQuestiionsList();
-        scrollToBottom();
-    }, [
-        initShowType
-    ]);
+        createRooms("AI").then((res)=>{
+            setRoomId(res.data.id);
+        });
+        roomsListTimer();
+        return ()=>{
+            clearTimeout(receiveMessageTimer.current);
+            // clearTimeout(voiceCountdownTimer.current);
+            clearTimeout(listTimer.current);
+            clearTimeout(timer.current);
+            clearTimeout(roomMessage.current);
+            clearTimeout(chatRoomList.current);
+        };
+    }, []);
     useEffect(()=>{
         if (roomId != "") {
             if (lastId == "") {
@@ -225,21 +254,6 @@ const CustomerService = (props)=>{
     }, [
         roomId
     ]);
-    //创建聊天室并获取聊天室列表
-    useEffect(()=>{
-        createRooms("AI").then((res)=>{
-            setRoomId(res.data.id);
-        });
-        roomsListTimer();
-        return ()=>{
-            clearTimeout(receiveMessageTimer.current);
-            // clearTimeout(voiceCountdownTimer.current);
-            clearTimeout(listTimer.current);
-            clearTimeout(timer.current);
-            clearTimeout(roomMessage.current);
-            clearTimeout(chatRoomList.current);
-        };
-    }, []);
     //进入页面，发送打招呼信息
     useEffect(()=>{
         //老师的聊天窗口不发送打招呼信息
@@ -258,9 +272,8 @@ const CustomerService = (props)=>{
             scrollToBottom();
         }
     }, [
-        greetingMessage,
-        hotQuestionsList
-    ]);
+        greetingMessage
+    ]); //hotQuestionsList
     //查找需要复制的代码
     const findCopyContent = (e)=>{
         let source = findParent(e.target, styles.copyCode);
@@ -301,10 +314,9 @@ const CustomerService = (props)=>{
         let questionsList = [];
         let obj = {};
         if (type == 1) {
-            let questionsId = [];
+            console.log(hotQuestionsList, '33322221111');
             questionsList = hotQuestionsList.map((item, index)=>{
                 if (index < 3) {
-                    questionsId.push(item.id);
                     return {
                         key: "messageSource",
                         value: item.id,
@@ -315,7 +327,6 @@ const CustomerService = (props)=>{
                     return null;
                 }
             });
-            recommendeQuestionID.current = questionsId; //保存推荐问题id
             questionsList = questionsList.filter((i)=>i != null);
             obj = {
                 roomId: roomId,
@@ -326,8 +337,9 @@ const CustomerService = (props)=>{
             };
             if (pageNumHistory <= 1) {
                 setHistoryMessageList((historyMessageList)=>{
-                    let newHistoryMessageList = historyMessageList.concat(_object_spread_props(_object_spread({}, obj), {
-                        id: new Date().getTime() + 'dede',
+                    let newHistoryMessageList = historyMessageList.filter((e)=>e.id != '123456_date');
+                    newHistoryMessageList.push(_object_spread_props(_object_spread({}, obj), {
+                        id: '123456_date',
                         upvoted: false,
                         downvoted: false,
                         quotedMessage: "",
@@ -528,6 +540,38 @@ const CustomerService = (props)=>{
         //点击知识库的问题，或者是点击问候消息
         if (questions.length > 0) {
             questions = questions[0];
+            //知识库联想的问题没有答案
+            if (!questions.answer && userData.modules.some((item)=>item.short == "AIservice")) {
+                let sendData = {
+                    //相关数据
+                    roomId: roomId,
+                    message: questions.question,
+                    quotedMessage: '',
+                    regenerate: true,
+                    generateUpvoteOrDownvoteMessage: false
+                };
+                if (pageNumHistory <= 1) {
+                    setHistoryMessageList((historyMessageList)=>{
+                        let newHistoryMessageList = historyMessageList.concat({
+                            roomId: roomId,
+                            sender: mid,
+                            recevier: "AI",
+                            message: questions.question,
+                            quotedMessage: '',
+                            id: "654321",
+                            upvoted: false,
+                            downvoted: false,
+                            createdAt: getDataTime(-1),
+                            extraInfo: JSON.stringify([])
+                        });
+                        return newHistoryMessageList;
+                    });
+                }
+                setFinished(false);
+                aiSendQuestions(3, sendData, 1);
+                return;
+            }
+            console.log(questions, '知识库内容11111');
             //向知识库发送问题 type 1，发送问题 2 发送答案  obj 需要的参数
             let obj = {
                 roomId: roomId,
@@ -560,14 +604,6 @@ const CustomerService = (props)=>{
                 generateUpvoteOrDownvoteMessage: false
             };
             let imageUrl = '';
-            // if(citationContent.imageUrl){
-            //   sendData.image = citationContent.imageUrl;
-            //   imageUrl = citationContent.imageUrl;
-            //   getBase64Image(citationContent.imageUrl).then((res)=>{
-            //     console.log(res,33333);
-            //   });
-            //   console.log(imageUrl,'转换的bese64');
-            // }
             if (screenshotBese64) {
                 sendData.image = screenshotBese64;
                 imageUrl = screenshotBese64;
@@ -620,9 +656,9 @@ const CustomerService = (props)=>{
         }
         console.log(type, '接受答案77777');
         //获取下面的推荐问题
-        if (type == 2) {
-            videoPageQuestiionsList(2);
-        }
+        // if(type == 2){
+        //   videoPageQuestiionsList(2);
+        // }
         http.post(`${urllocation}/chat-service/public/v1.0/history-messages`, obj).then((res)=>{
             if (res.data.id) {
                 if (pageNumHistory <= 1) {
@@ -684,6 +720,23 @@ const CustomerService = (props)=>{
                 });
             });
         }, 60 * 1000);
+        if (props.config && props.config.type == 'video' && props.config.params) {
+            let params = props.config.params;
+            let videoId = params.videoId;
+            let watchTime = params.videoProgress;
+            let courseId = getQuery('yc_id');
+            let sectionId = params.VideoBriefSummaryId;
+            obj.contexts = [
+                {
+                    "type": "VIDEO",
+                    "courseId": courseId,
+                    "sectionId": sectionId,
+                    "videoId": videoId,
+                    "watchTime": watchTime
+                }
+            ];
+            obj.regenerate = false;
+        }
         let data = JSON.stringify(obj);
         setKeyWord("");
         setQuestionsList([]);
@@ -723,6 +776,10 @@ const CustomerService = (props)=>{
             });
             scrollToBottom();
         }
+        if (props.config && props.config.type == 'video') {
+            //先请求问题列表
+            videoPageQuestiionsList(3);
+        }
         //使用fetchEventSource接收数据
         const eventSource = fetchEventSource(`${urllocation}/chat-service/public/v1.0/chat-with-ai/messages`, {
             method: "POST",
@@ -887,9 +944,23 @@ const CustomerService = (props)=>{
             } else {
                 let newHistoryMessageList2 = list1.map((item)=>{
                     message = item.message + obj.message;
+                    let extraInfo = [];
+                    // message = '抱歉，我暂时无法回答这样的问题。'
+                    if (message == '抱歉，我暂时无法回答这样的问题。') {
+                        extraInfo = videoHotQuestionsList.current.map((str, index)=>{
+                            return {
+                                key: "messageSource",
+                                value: str.id,
+                                question: str.question,
+                                answer: str.answer,
+                                welcomeMessage: true
+                            };
+                        });
+                    }
                     if (item.id == id) {
                         return _object_spread_props(_object_spread({}, item), {
-                            message: message
+                            message: message,
+                            extraInfo: extraInfo == null ? item.extraInfo : JSON.stringify(extraInfo)
                         });
                     } else {
                         return item;
@@ -1205,15 +1276,14 @@ const CustomerService = (props)=>{
         } else if (flag == 3) {
             data = {
                 page: 1,
-                maxPageSize: 4,
+                maxPageSize: 5,
                 question: value,
                 sectionId: getQuery('s_id')
             };
         } else if (flag == 4) {
             data = {
                 page: 1,
-                maxPageSize: 4,
-                question: value
+                maxPageSize: 4
             };
         } else {
             data = {
@@ -1230,7 +1300,7 @@ const CustomerService = (props)=>{
                 if (flag == 1) {
                     setHotQuestionsList(questionList);
                 } else if (flag == 4) {
-                    setQuestionsList((questionList)=>{
+                    setHotQuestionsList((questionList)=>{
                         return [
                             ...questionList,
                             ...res.data.questions
@@ -1239,30 +1309,41 @@ const CustomerService = (props)=>{
                 } else {
                     setQuestionsList(questionList);
                 }
-                if (questionList.length < 4 && flag == 3) {
+                if (questionList.length < 5 && flag == 3) {
                     console.log('视频页面，联想问题小于4个');
                     //视频页面，联想问题小于4个
-                    getQuestiionsList(value, 4);
+                    http.get(`${urllocation}/chat-service/public/v1.0/knowledge-base/questions`, {
+                        params: {
+                            page: 1,
+                            maxPageSize: 5 - questionList.length
+                        }
+                    }).then((res)=>{
+                        if (res.data.questions) {
+                            setHotQuestionsList((questionList)=>{
+                                return [
+                                    ...questionList,
+                                    ...res.data.questions
+                                ];
+                            });
+                        }
+                    });
                 }
             }
         });
     };
-    //获取视频页面热门问题 flag == 1，默认推荐问题 == 2，已经推荐过问题
+    //获取视频页面热门问题 flag == 1，默认推荐问题 == 2，底部渲染问题，flag == 3，ai回答后请求相关问题
     const videoPageQuestiionsList = (flag = 1)=>{
-        console.log(props, 3333333);
+        console.log(flag, props, 3333333);
         let config = props.config;
         if (config && config.type == 'video' && config.params) {
             let params = config.params;
             let videoId = params.videoId;
             let watchTime = params.videoProgress;
             let courseId = getQuery('yc_id');
-            let sectionId = getQuery('s_id');
-            if (videoId && watchTime && courseId && sectionId) {
-                console.log('请求接口2222', config);
+            let sectionId = params.VideoBriefSummaryId;
+            if (videoId && courseId && sectionId) {
                 http.post(`${urllocation}/chat-service/public/v1.0/knowledge-base/questions:recommend`, {
-                    "recommendedQuestions": flag == 2 ? recommendeQuestionID.current : [
-                        ''
-                    ],
+                    "recommendedQuestions": [],
                     "contexts": [
                         {
                             "type": "VIDEO",
@@ -1272,19 +1353,32 @@ const CustomerService = (props)=>{
                             "watchTime": watchTime
                         }
                     ],
-                    "maximum": 5
+                    "maximum": flag == 1 || flag == 2 ? 3 : 5
                 }).then((res)=>{
-                    console.log(res, 333333);
                     if (res.data.total > 0) {
                         let data = res.data.questions;
+                        if (flag == 3) {
+                            // setQuestionsList(data);
+                            // setVideoHotQuestionsList(data);
+                            videoHotQuestionsList.current = data;
+                            return;
+                        }
                         if (flag == 2) {
                             setBottomRecommendationQuestions(data);
                         } else {
                             setHotQuestionsList(data);
                         }
+                        let ids = [];
+                        data.map((str)=>{
+                            ids.push(str.id);
+                        });
+                        recommendeQuestionID.current = Array.from(new Set(recommendeQuestionID.current.concat(ids)));
                         resettingBottomHei();
                         scrollToBottom();
-                        console.log(data, 99999);
+                    // console.log(data,99999);
+                    // if(data.length < 4){
+                    //   getQuestiionsList('',4)
+                    // }
                     }
                 }).catch(()=>{});
             }
@@ -1937,23 +2031,37 @@ const CustomerService = (props)=>{
                                                                         })
                                                                     ]
                                                                 }),
-                                                                item.extraInfo != undefined && JSON.parse(item.extraInfo).length > 0 && JSON.parse(item.extraInfo)[0].key == "messageSource" && JSON.parse(item.extraInfo)[0].value != "knowledgebase" && /*#__PURE__*/ _jsx("ul", {
-                                                                    className: styles.association_problem,
-                                                                    children: JSON.parse(item.extraInfo).map((list, index)=>{
-                                                                        return /*#__PURE__*/ _jsxs("li", {
-                                                                            onClick: ()=>{
-                                                                                sendMessage(list, 1);
-                                                                            },
-                                                                            children: [
-                                                                                index + 1,
-                                                                                ".",
-                                                                                list.question
-                                                                            ]
-                                                                        }, i + "_" + index + "_" + list.value);
-                                                                    })
+                                                                item.extraInfo != undefined && JSON.parse(item.extraInfo).length > 0 && JSON.parse(item.extraInfo)[0].key == "messageSource" && JSON.parse(item.extraInfo)[0].value != "knowledgebase" && /*#__PURE__*/ _jsxs("ul", {
+                                                                    className: `${styles.association_problem} ${item.message == '抱歉，我暂时无法回答这样的问题。' ? 'association_problem_flag' : ''}`,
+                                                                    children: [
+                                                                        item.message == '抱歉，我暂时无法回答这样的问题。' && /*#__PURE__*/ _jsx("li", {
+                                                                            className: styles.related_issues_flag,
+                                                                            children: /*#__PURE__*/ _jsx("span", {
+                                                                                children: "相关问题"
+                                                                            })
+                                                                        }),
+                                                                        JSON.parse(item.extraInfo).map((list, index)=>{
+                                                                            return /*#__PURE__*/ _jsx("li", {
+                                                                                onClick: ()=>{
+                                                                                    sendMessage(list, 1);
+                                                                                    if (props.config && props.config.type == 'video') {
+                                                                                        //先请求问题列表
+                                                                                        videoPageQuestiionsList(2);
+                                                                                    }
+                                                                                },
+                                                                                children: item.message == '抱歉，我暂时无法回答这样的问题。' ? list.question : /*#__PURE__*/ _jsxs(_Fragment, {
+                                                                                    children: [
+                                                                                        index + 1,
+                                                                                        ".",
+                                                                                        list.question
+                                                                                    ]
+                                                                                })
+                                                                            }, i + "_" + index + "_" + list.value);
+                                                                        })
+                                                                    ]
                                                                 }),
                                                                 //findTeacher//是否在召唤老师过程中，是否是最后一条消息
-                                                                !item.findTeacher && historyMessageList.length - 1 == i && item.id != "123456" && renderLastOperateBtn(item, isAiChatWindow, i),
+                                                                !item.findTeacher && historyMessageList.length - 1 == i && item.id != "123456" && item.id != '123456_date' && renderLastOperateBtn(item, isAiChatWindow, i),
                                                                 //召唤老师回答按钮
                                                                 isAiChatWindow && item.findTeacher && userData.modules.some((item)=>item.short == "TeacherAnswer") && /*#__PURE__*/ _jsx("div", {
                                                                     className: `${styles.operate_modal_bottom} `,
@@ -2167,11 +2275,9 @@ const CustomerService = (props)=>{
         if (!showStopBtn && isAiChatWindow && (extraInfo != undefined && JSON.parse(extraInfo).length > 0 && JSON.parse(extraInfo)[0].key == "questionId" || extraInfo == null) && historyMessageList[i - 1] && historyMessageList[i - 1].extraInfo && JSON.parse(historyMessageList[i - 1].extraInfo).length > 0 && JSON.parse(historyMessageList[i - 1].extraInfo)[0].key != "imageUrl") {
             findTeacherBtn = true;
         }
+        /// style={{position:showStopBtn && isPosition.current ? 'sticky' : 'relative'}}
         return /*#__PURE__*/ _jsxs("div", {
             className: `${styles.operate_modal_bottom}`,
-            style: {
-                position: showStopBtn && isPosition.current ? 'sticky' : 'relative'
-            },
             children: [
                 /*#__PURE__*/ _jsxs("p", {
                     className: styles.stop_generate,
@@ -2427,6 +2533,7 @@ const CustomerService = (props)=>{
                                                     className: styles.icon_close,
                                                     onClick: ()=>{
                                                         setScreenshotBese64('');
+                                                        resettingBottomHei();
                                                     },
                                                     children: /*#__PURE__*/ _jsx(CustomRoundClose, {})
                                                 }),
@@ -2791,7 +2898,7 @@ const CustomerService = (props)=>{
         return /*#__PURE__*/ _jsx("div", {
             className: styles.issues_list_flag,
             style: {
-                bottom: `${buttomHei}px`
+                bottom: `${buttomHei - 60}px`
             },
             id: "BottomAssociationProblem",
             children: bottomRecommendationQuestions.map((item)=>{

package/es2017/customerService/index.module.less

@@ -626,7 +626,9 @@
             cursor: pointer;
             list-style-type: none;
           }
+          
         }
+  
 
         .img_con{
           width: 100%;
@@ -743,6 +745,34 @@
 
         }
       }
+
+      .association_problem_flag{
+        padding-left: 30px;
+       
+        li{
+          position: relative;
+          &::after{
+            content: '';
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: rgba(217, 217, 217, 1);
+            display: block;
+            position: absolute;
+            top: 12px;
+            left: 12px;
+          }
+        }
+        .related_issues_flag{
+          span{
+            color: #000;
+            font-weight: 600;
+            border-bottom: 4px solid @color-background-primary-weak-hover;
+          }
+          
+        }
+      }
+
       .time {
         display: block;
         margin: 40px 0;
@@ -910,11 +940,12 @@
       margin: 0 16px;
       // padding-bottom: 4px;
       line-height: 1;
-      // padding-top: 24px;
+      padding-top: 24px;
       p{
         padding: 8px 16px;
         background-color: #fff;
         border-radius: 38px;
+        margin-bottom: 16px;
         cursor: pointer;
         &:hover{
           background-color: @color-background-primary-weak;