bhd-components 0.7.8 → 0.7.10

package/esm/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/esm/customerService/index.js

@@ -6,7 +6,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";
 var styles = cssStyle;
@@ -25,11 +25,12 @@ import "highlight.js/styles/default.css";
 import { render } from "react-dom";
 import Provider from "../provider";
 var TextArea = Input.TextArea;
+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"; //一些方法
 var CustomerService = function(props) {
-    var userData = props.userData, http = props.http, urllocation = props.urllocation, onCancel = props.onCancel, serverName = props.serverName, fetchEventSource = props.fetchEventSource, initShowType = props.initShowType, onEvent = props.onEvent, stepIds = props.stepIds, stepId = props.stepId, config = props.config;
+    var userData = props.userData, http = props.http, urllocation = props.urllocation, onCancel = props.onCancel, serverName = props.serverName, fetchEventSource = props.fetchEventSource, initShowType = props.initShowType, onEvent = props.onEvent, stepIds = props.stepIds, stepId = props.stepId, screenshotAreaId = props.screenshotAreaId, config = props.config;
     // const { bese64String, startRecord, stopRecord } = useMediaRecorder(); //语音转文字
     // const [voiceRecordingStatus, setVoiceRecordingStatus] = useState(3); //语音录制状态 3，语音识别完成 2，录制中， 1，录制结束
     var _useState = _sliced_to_array(useState([]), 2), copyTextOBJ = _useState[0], setCopyTextObj = _useState[1]; //复制的消息id
@@ -39,6 +40,7 @@ var CustomerService = function(props) {
     var _useState4 = _sliced_to_array(useState(""), 2), keyWord = _useState4[0], setKeyWord = _useState4[1]; //搜索内容
     var _useState5 = _sliced_to_array(useState([]), 2), questionsList = _useState5[0], setQuestionsList = _useState5[1]; //问题列表
     var _useState6 = _sliced_to_array(useState([]), 2), hotQuestionsList = _useState6[0], setHotQuestionsList = _useState6[1]; //热门问题
+    // const [videoHotQuestionsList, setVideoHotQuestionsList] = useState([]); //热门问题
     var _useState7 = _sliced_to_array(useState(false), 2), greetingMessage = _useState7[0], setGreetingMessage = _useState7[1]; //聊天记录列表是否请求完成
     var _useState8 = _sliced_to_array(useState(1), 2), pageNum = _useState8[0], setPageNum = _useState8[1]; //页码
     var _useState9 = _sliced_to_array(useState(0), 2), pageNumHistory = _useState9[0], setPageNumHistory = _useState9[1]; //用于搜索历史记录后的页码
@@ -76,6 +78,7 @@ var CustomerService = function(props) {
     var scrollTopHei = useRef(0);
     var isPosition = useRef(true);
     var recommendeQuestionID = useRef([]); //推荐问题id
+    var videoHotQuestionsList = useRef([]); //视频热门问题
     var mid = props.userData.mid;
     var remarkable = new Remarkable({
         highlight: function highlight(str, lang) {
@@ -90,6 +93,21 @@ var CustomerService = function(props) {
             return ""; // use external default escaping
         }
     });
+    useEffect(function() {
+        // console.log(props,'lsdkcmsdlcksd')
+        // getQuestiionsList("", 1);
+        if (props.config && props.config.type == "video") {
+            //获取热门推荐
+            videoPageQuestiionsList(1);
+        // getQuestiionsList("", 3)
+        }
+        setShowType(initShowType);
+    //获取视频页面推荐问题
+    // videoPageQuestiionsList();
+    // scrollToBottom();
+    }, [
+        initShowType
+    ]);
     useEffect(function() {
         var handleScroll = function handleScroll() {
             var container = document.getElementById(showType == 1 || showType == 3 ? "chat_content" : "chat_content_modal");
@@ -138,28 +156,34 @@ var CustomerService = function(props) {
             scrollTopHei.current = scrollTop;
         };
         if (showType == 5) {
-            setImgBese64("");
-            html2canvas(document.getElementsByTagName("html")[0]).then(function(canvas) {
-                console.log(canvas, 22222);
-                setTimeout(function() {
-                    //let dom = document.getElementById("container_html5_api")
-                    var 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)
-                        var 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(()=>{
+                var 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')
+                    var base64URL = canvas.toDataURL("image/jpg", 1.0);
+                    setImgBese64(base64URL);
+                });
+            //   },100)
+            // })
+            } catch (error) {
+                console.log(error);
+            }
         }
         if (showType != 1 && !firstLoad && pageCount > 0) {
             setFirstLoad(true);
@@ -197,16 +221,21 @@ var CustomerService = function(props) {
         buttomHei,
         showType
     ]);
+    //创建聊天室并获取聊天室列表
     useEffect(function() {
-        // console.log(props,'lsdkcmsdlcksd')
-        // getQuestiionsList("", 1);
-        setShowType(initShowType);
-        //获取视频页面推荐问题
-        videoPageQuestiionsList();
-        scrollToBottom();
-    }, [
-        initShowType
-    ]);
+        createRooms("AI").then(function(res) {
+            setRoomId(res.data.id);
+        });
+        roomsListTimer();
+        return function() {
+            clearTimeout(receiveMessageTimer.current);
+            // clearTimeout(voiceCountdownTimer.current);
+            clearTimeout(listTimer.current);
+            clearTimeout(timer.current);
+            clearTimeout(roomMessage.current);
+            clearTimeout(chatRoomList.current);
+        };
+    }, []);
     useEffect(function() {
         if (roomId != "") {
             if (lastId == "") {
@@ -227,21 +256,6 @@ var CustomerService = function(props) {
     }, [
         roomId
     ]);
-    //创建聊天室并获取聊天室列表
-    useEffect(function() {
-        createRooms("AI").then(function(res) {
-            setRoomId(res.data.id);
-        });
-        roomsListTimer();
-        return function() {
-            clearTimeout(receiveMessageTimer.current);
-            // clearTimeout(voiceCountdownTimer.current);
-            clearTimeout(listTimer.current);
-            clearTimeout(timer.current);
-            clearTimeout(roomMessage.current);
-            clearTimeout(chatRoomList.current);
-        };
-    }, []);
     //进入页面，发送打招呼信息
     useEffect(function() {
         //老师的聊天窗口不发送打招呼信息
@@ -260,9 +274,8 @@ var CustomerService = function(props) {
             scrollToBottom();
         }
     }, [
-        greetingMessage,
-        hotQuestionsList
-    ]);
+        greetingMessage
+    ]); //hotQuestionsList
     //查找需要复制的代码
     var findCopyContent = function(e) {
         var source = findParent(e.target, styles.copyCode);
@@ -305,10 +318,9 @@ var CustomerService = function(props) {
         var questionsList = [];
         var obj = {};
         if (type == 1) {
-            var questionsId = [];
+            console.log(hotQuestionsList, "33322221111");
             questionsList = hotQuestionsList.map(function(item, index) {
                 if (index < 3) {
-                    questionsId.push(item.id);
                     return {
                         key: "messageSource",
                         value: item.id,
@@ -319,7 +331,6 @@ var CustomerService = function(props) {
                     return null;
                 }
             });
-            recommendeQuestionID.current = questionsId; //保存推荐问题id
             questionsList = questionsList.filter(function(i) {
                 return i != null;
             });
@@ -332,8 +343,11 @@ var CustomerService = function(props) {
             };
             if (pageNumHistory <= 1) {
                 setHistoryMessageList(function(historyMessageList) {
-                    var newHistoryMessageList = historyMessageList.concat(_object_spread_props(_object_spread({}, obj), {
-                        id: new Date().getTime() + "dede",
+                    var newHistoryMessageList = historyMessageList.filter(function(e) {
+                        return e.id != "123456_date";
+                    });
+                    newHistoryMessageList.push(_object_spread_props(_object_spread({}, obj), {
+                        id: "123456_date",
                         upvoted: false,
                         downvoted: false,
                         quotedMessage: "",
@@ -538,6 +552,40 @@ var CustomerService = function(props) {
         //点击知识库的问题，或者是点击问候消息
         if (questions.length > 0) {
             questions = questions[0];
+            //知识库联想的问题没有答案
+            if (!questions.answer && userData.modules.some(function(item) {
+                return item.short == "AIservice";
+            })) {
+                var sendData = {
+                    //相关数据
+                    roomId: roomId,
+                    message: questions.question,
+                    quotedMessage: "",
+                    regenerate: true,
+                    generateUpvoteOrDownvoteMessage: false
+                };
+                if (pageNumHistory <= 1) {
+                    setHistoryMessageList(function(historyMessageList) {
+                        var 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 需要的参数
             var obj = {
                 roomId: roomId,
@@ -563,7 +611,7 @@ var CustomerService = function(props) {
         } else if (userData.modules.some(function(item) {
             return item.short == "AIservice";
         })) {
-            var sendData = {
+            var sendData1 = {
                 //相关数据
                 roomId: roomId,
                 message: keyWord,
@@ -572,16 +620,8 @@ var CustomerService = function(props) {
                 generateUpvoteOrDownvoteMessage: false
             };
             var 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;
+                sendData1.image = screenshotBese64;
                 imageUrl = screenshotBese64;
             }
             if (pageNumHistory <= 1) {
@@ -607,7 +647,7 @@ var CustomerService = function(props) {
                 });
             }
             setFinished(false);
-            aiSendQuestions(3, sendData, 1);
+            aiSendQuestions(3, sendData1, 1);
             setScreenshotBese64("");
         //存在AI客服
         } else {
@@ -632,9 +672,9 @@ var CustomerService = function(props) {
         }
         console.log(type, "接受答案77777");
         //获取下面的推荐问题
-        if (type == 2) {
-            videoPageQuestiionsList(2);
-        }
+        // if(type == 2){
+        //   videoPageQuestiionsList(2);
+        // }
         http.post("".concat(urllocation, "/chat-service/public/v1.0/history-messages"), obj).then(function(res) {
             if (res.data.id) {
                 if (pageNumHistory <= 1) {
@@ -698,6 +738,23 @@ var CustomerService = function(props) {
                 });
             });
         }, 60 * 1000);
+        if (props.config && props.config.type == "video" && props.config.params) {
+            var params = props.config.params;
+            var videoId = params.videoId;
+            var watchTime = params.videoProgress;
+            var courseId = getQuery("yc_id");
+            var sectionId = params.VideoBriefSummaryId;
+            obj.contexts = [
+                {
+                    "type": "VIDEO",
+                    "courseId": courseId,
+                    "sectionId": sectionId,
+                    "videoId": videoId,
+                    "watchTime": watchTime
+                }
+            ];
+            obj.regenerate = false;
+        }
         var data = JSON.stringify(obj);
         setKeyWord("");
         setQuestionsList([]);
@@ -737,6 +794,10 @@ var CustomerService = function(props) {
             });
             scrollToBottom();
         }
+        if (props.config && props.config.type == "video") {
+            //先请求问题列表
+            videoPageQuestiionsList(3);
+        }
         //使用fetchEventSource接收数据
         var eventSource = fetchEventSource("".concat(urllocation, "/chat-service/public/v1.0/chat-with-ai/messages"), {
             method: "POST",
@@ -909,9 +970,23 @@ var CustomerService = function(props) {
             } else {
                 var newHistoryMessageList2 = list1.map(function(item) {
                     message = item.message + obj.message;
+                    var extraInfo = [];
+                    // message = '抱歉，我暂时无法回答这样的问题。'
+                    if (message == "抱歉，我暂时无法回答这样的问题。") {
+                        extraInfo = videoHotQuestionsList.current.map(function(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;
@@ -1238,15 +1313,14 @@ var CustomerService = function(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 = {
@@ -1263,37 +1337,45 @@ var CustomerService = function(props) {
                 if (flag == 1) {
                     setHotQuestionsList(questionList);
                 } else if (flag == 4) {
-                    setQuestionsList(function(questionList) {
+                    setHotQuestionsList(function(questionList) {
                         return _to_consumable_array(questionList).concat(_to_consumable_array(res.data.questions));
                     });
                 } else {
                     setQuestionsList(questionList);
                 }
-                if (questionList.length < 4 && flag == 3) {
+                if (questionList.length < 5 && flag == 3) {
                     console.log("视频页面，联想问题小于4个");
                     //视频页面，联想问题小于4个
-                    getQuestiionsList(value, 4);
+                    http.get("".concat(urllocation, "/chat-service/public/v1.0/knowledge-base/questions"), {
+                        params: {
+                            page: 1,
+                            maxPageSize: 5 - questionList.length
+                        }
+                    }).then(function(res) {
+                        if (res.data.questions) {
+                            setHotQuestionsList(function(questionList) {
+                                return _to_consumable_array(questionList).concat(_to_consumable_array(res.data.questions));
+                            });
+                        }
+                    });
                 }
             }
         });
     };
-    //获取视频页面热门问题 flag == 1，默认推荐问题 == 2，已经推荐过问题
+    //获取视频页面热门问题 flag == 1，默认推荐问题 == 2，底部渲染问题，flag == 3，ai回答后请求相关问题
     var videoPageQuestiionsList = function() {
         var flag = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 1;
-        console.log(props, 3333333);
+        console.log(flag, props, 3333333);
         var config = props.config;
         if (config && config.type == "video" && config.params) {
             var params = config.params;
             var videoId = params.videoId;
             var watchTime = params.videoProgress;
             var courseId = getQuery("yc_id");
-            var sectionId = getQuery("s_id");
-            if (videoId && watchTime && courseId && sectionId) {
-                console.log("请求接口2222", config);
+            var sectionId = params.VideoBriefSummaryId;
+            if (videoId && courseId && sectionId) {
                 http.post("".concat(urllocation, "/chat-service/public/v1.0/knowledge-base/questions:recommend"), {
-                    "recommendedQuestions": flag == 2 ? recommendeQuestionID.current : [
-                        ""
-                    ],
+                    "recommendedQuestions": [],
                     "contexts": [
                         {
                             "type": "VIDEO",
@@ -1303,19 +1385,32 @@ var CustomerService = function(props) {
                             "watchTime": watchTime
                         }
                     ],
-                    "maximum": 5
+                    "maximum": flag == 1 || flag == 2 ? 3 : 5
                 }).then(function(res) {
-                    console.log(res, 333333);
                     if (res.data.total > 0) {
                         var data = res.data.questions;
+                        if (flag == 3) {
+                            // setQuestionsList(data);
+                            // setVideoHotQuestionsList(data);
+                            videoHotQuestionsList.current = data;
+                            return;
+                        }
                         if (flag == 2) {
                             setBottomRecommendationQuestions(data);
                         } else {
                             setHotQuestionsList(data);
                         }
+                        var ids = [];
+                        data.map(function(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(function() {});
             }
@@ -1959,23 +2054,37 @@ var CustomerService = function(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(function(list, index) {
-                                                                        return /*#__PURE__*/ _jsxs("li", {
-                                                                            onClick: function() {
-                                                                                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: "".concat(styles.association_problem, " ").concat(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(function(list, index) {
+                                                                            return /*#__PURE__*/ _jsx("li", {
+                                                                                onClick: function() {
+                                                                                    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(function(item) {
                                                                     return item.short == "TeacherAnswer";
@@ -2201,11 +2310,9 @@ var CustomerService = function(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: "".concat(styles.operate_modal_bottom),
-            style: {
-                position: showStopBtn && isPosition.current ? "sticky" : "relative"
-            },
             children: [
                 /*#__PURE__*/ _jsxs("p", {
                     className: styles.stop_generate,
@@ -2475,6 +2582,7 @@ var CustomerService = function(props) {
                                                     className: styles.icon_close,
                                                     onClick: function() {
                                                         setScreenshotBese64("");
+                                                        resettingBottomHei();
                                                     },
                                                     children: /*#__PURE__*/ _jsx(CustomRoundClose, {})
                                                 }),
@@ -2851,7 +2959,7 @@ var CustomerService = function(props) {
         return /*#__PURE__*/ _jsx("div", {
             className: styles.issues_list_flag,
             style: {
-                bottom: "".concat(buttomHei, "px")
+                bottom: "".concat(buttomHei - 60, "px")
             },
             id: "BottomAssociationProblem",
             children: bottomRecommendationQuestions.map(function(item) {

package/esm/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;