bhd-components 0.7.9 → 0.7.10

package/es2017/customerService/index.js

@@ -38,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); //用于搜索历史记录后的页码
@@ -75,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) {
@@ -89,57 +91,48 @@ 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) {
-            // 获取屏幕流  
-            // 获取 video 元素和 canvas 元素
-            // var video = document.getElementById('container_html5_api');
-            // // const canvas = document.createElement('canvas'); 
-            // const canvas = document.getElementById('canvas_test');
-            // var context = canvas.getContext('2d');
-            // // 设置 canvas 尺寸
-            // canvas.width = video.videoWidth/4;
-            // canvas.height = video.videoHeight/4;
-            // // 在 canvas 上绘制 video 的当前帧
-            // context.drawImage(video, 0, 0, canvas.width, canvas.height);
-            // // 使用 html2canvas 对 canvas 进行截图
-            // html2canvas(canvas,{
-            //   scale: 1,
-            //   useCORS: true,
-            //   logging: true,
-            // }).then(function(screenshot) {
-            //     // 将截图显示在页面上，或者进行其他操作
-            //     document.body.appendChild(screenshot);
-            //     setTimeout(()=>{
-            //       let url = screenshot.toDataURL('image/png');
-            //       console.log(url);
-            //     },3000)
-            //     // console.log("container_html5_apicontainer_html5_api",screenshot)
-            //     // console.log(screenshot.toDataURL('image/jpeg'))
-            // });
-            // // 显示图片或者做其他操作
             try {
                 setImgBese64('');
-                html2canvas(document.getElementsByTagName('html')[0]).then((canvas)=>{
-                    console.log(canvas, 22222);
-                    setTimeout(()=>{
-                        let dom = document.getElementById(screenshotAreaId);
-                        //let dom = document.getElementById("container_html5_api");
-                        //let dom = document.getElementsByTagName('html')[0];
-                        html2canvas(dom, {
-                            useCORS: true,
-                            // allowTaint: true, // 污染处理
-                            scale: 1
-                        }).then(function(canvas) {
-                            // document.body.appendChild(canvas);
-                            // document.body.appendChild(canvas);
-                            console.log(canvas, 4444444);
-                            // var base64URL = canvas.toDataURL('image/jpeg')
-                            let base64URL = canvas.toDataURL("image/jpg", 1.0);
-                            setImgBese64(base64URL);
-                        });
-                    }, 100);
+                // 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);
             }
@@ -226,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 == "") {
@@ -256,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(()=>{
         //老师的聊天窗口不发送打招呼信息
@@ -289,9 +272,8 @@ const CustomerService = (props)=>{
             scrollToBottom();
         }
     }, [
-        greetingMessage,
-        hotQuestionsList
-    ]);
+        greetingMessage
+    ]); //hotQuestionsList
     //查找需要复制的代码
     const findCopyContent = (e)=>{
         let source = findParent(e.target, styles.copyCode);
@@ -332,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,
@@ -346,7 +327,6 @@ const CustomerService = (props)=>{
                     return null;
                 }
             });
-            recommendeQuestionID.current = questionsId; //保存推荐问题id
             questionsList = questionsList.filter((i)=>i != null);
             obj = {
                 roomId: roomId,
@@ -676,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) {
@@ -755,6 +735,7 @@ const CustomerService = (props)=>{
                     "watchTime": watchTime
                 }
             ];
+            obj.regenerate = false;
         }
         let data = JSON.stringify(obj);
         setKeyWord("");
@@ -795,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",
@@ -959,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;
@@ -1277,7 +1276,7 @@ const CustomerService = (props)=>{
         } else if (flag == 3) {
             data = {
                 page: 1,
-                maxPageSize: 4,
+                maxPageSize: 5,
                 question: value,
                 sectionId: getQuery('s_id')
             };
@@ -1310,17 +1309,31 @@ 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;
@@ -1330,9 +1343,7 @@ const CustomerService = (props)=>{
             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",
@@ -1342,22 +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);
-                        if (data.length < 4) {
-                            getQuestiionsList('', 4);
-                        }
+                    // console.log(data,99999);
+                    // if(data.length < 4){
+                    //   getQuestiionsList('',4)
+                    // }
                     }
                 }).catch(()=>{});
             }
@@ -1728,9 +1749,6 @@ const CustomerService = (props)=>{
                 let timeObj = parseDate(item.createdAt);
                 // console.log(item.message);
                 let message = item.message;
-                if (message == '抱歉，我暂时无法回答这样的问题。' && props.config && props.config.type == 'video') {
-                    videoPageQuestiionsList(2);
-                }
                 let li;
                 // 是否需要显示日期
                 let itemIndex = historyMessageList.findIndex((ite)=>ite.id === item.id);
@@ -2013,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} `,
@@ -2243,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,
@@ -2503,6 +2533,7 @@ const CustomerService = (props)=>{
                                                     className: styles.icon_close,
                                                     onClick: ()=>{
                                                         setScreenshotBese64('');
+                                                        resettingBottomHei();
                                                     },
                                                     children: /*#__PURE__*/ _jsx(CustomRoundClose, {})
                                                 }),
@@ -2867,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;
@@ -915,6 +945,7 @@
         padding: 8px 16px;
         background-color: #fff;
         border-radius: 38px;
+        margin-bottom: 16px;
         cursor: pointer;
         &:hover{
           background-color: @color-background-primary-weak;

package/es2017/customerService/index2.module.less

@@ -113,7 +113,10 @@
           position: relative;
           z-index: 99;
           .popover{
-            padding: 8px;
+            padding: 8px 0;
+            width: 74px;
+            text-align: center;
+
             border-radius: 4px;
             line-height: 1.5;
             color: rgba(0, 0, 0, 0.65);
@@ -620,7 +623,9 @@
             cursor: pointer;
             list-style-type: none;
           }
+          
         }
+  
 
         .img_con{
           width: 100%;
@@ -629,7 +634,10 @@
           border-radius: 4px;
           overflow: hidden;
           display: inline-flex;
-          margin-top: 24px;
+          margin-top: 12px;
+          img{
+            width: 100%;
+          }
           .mask_zoom{
             position: absolute;
             top: 0;
@@ -714,8 +722,13 @@
           padding: 0 2px;
         }
         li{
+          :global{
+            ::marker {
+              font-weight: 600 !important;
+            }
+          }
           ::marker {
-            font-weight: 600;
+            font-weight: 600 !important;
           }
           p{
             font-weight: 400 !important;
@@ -723,11 +736,40 @@
               border-bottom: 6px solid @color-background-primary-weak-hover;
               height: 20px;
               display: inline-block;
+              font-weight: 600;
             }
           }
 
         }
       }
+
+      .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;
@@ -895,11 +937,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;
@@ -1119,6 +1162,7 @@
           svg {
             font-size: 20px;
             color: @color-icon-fill-Tr;
+            cursor: pointer;
           }
         }
         .disabled {