bhd-components 0.10.31 → 0.10.33

package/esm/customerService/index.js

@@ -28,13 +28,15 @@ import { parseDate } from "../utils/Date";
 import { Remarkable } from "remarkable";
 import hljs from "highlight.js";
 import "highlight.js/styles/github.css";
+import mermaid from "mermaid";
+import ViewMemaid from "./viewMemaid";
 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, urlToBase64 } from "./function"; //一些方法
+import { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, urlToBase64, toHashString } from "./function"; //一些方法
 // import html2canvas from "html2canvas";
 // const screenShot = require('./screenShotPlugin.esm')
 import ScreenShot from "./js-screen-shot/main";
@@ -57,6 +59,15 @@ function escapeHtml(str) {
     }
     return str;
 }
+mermaid.initialize({
+    startOnLoad: false,
+    theme: "default",
+    securityLevel: "loose",
+    flowchart: {
+        htmlLabels: true,
+        curve: "basis"
+    }
+});
 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, screenshotAreaId = props.screenshotAreaId, config = props.config;
     // const { bese64String, startRecord, stopRecord } = useMediaRecorder(); //语音转文字
@@ -121,9 +132,17 @@ var CustomerService = function(props) {
     var _useState34 = _sliced_to_array(useState(0), 2), firstItemIndex = _useState34[0], setFirstItemIndex = _useState34[1];
     var _useState35 = _sliced_to_array(useState(null), 2), historyMessageListVirtuosoHeight = _useState35[0], setHistoryMessageListVirtuosoHeight = _useState35[1];
     var msgStreamingCountRef = useRef(0);
+    var isWheelRef = useRef(false);
+    var getLisyFlagRef = useRef(0);
+    var _useState36 = _sliced_to_array(useState(false), 2), showMemaid = _useState36[0], setShowMemaid = _useState36[1]; //是否显示mermaid弹窗
+    var _useState37 = _sliced_to_array(useState(""), 2), memaidContent = _useState37[0], setMemaidContent = _useState37[1]; //mermaid内容
     var remarkable = new Remarkable({
         html: true,
         highlight: function highlight(str, lang) {
+            // 特殊处理 mermaid 代码块
+            if (lang === "mermaid") {
+                return str; // 不高亮 mermaid 代码
+            }
             if (lang && hljs.getLanguage(lang)) {
                 try {
                     return hljs.highlight(lang, str).value;
@@ -135,6 +154,18 @@ var CustomerService = function(props) {
             return ""; // use external default escaping
         }
     });
+    // 添加自定义规则来处理 mermaid 代码块
+    remarkable.renderer.rules.fence_custom = {
+        mermaid: function mermaid(tokens, idx) {
+            var token = tokens[idx];
+            var id = "mermaid_" + toHashString(token.content);
+            return '<span class="'.concat(styles.maskZoomBox, '"><pre class="').concat(styles.mermaid, '" id="').concat(id, '">').concat(token.content, '</pre><span class="').concat(styles.zoomBox, '" onclick="openViewMemaid(\'').concat(id, '\')"><svg viewBox="64 64 896 896" focusable="false" data-icon="zoom-in" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"></path></svg></span></span>');
+        }
+    };
+    remarkable.renderer.rules.image = function(tokens, idx) {
+        var token = tokens[idx];
+        return '<span class="'.concat(styles.maskZoomBox, '"><img src="').concat(token.src, '" alt="').concat(token.alt, '" title="').concat(token.title, '"/><span class="').concat(styles.zoomBox, '" onclick="openViewBase64(\'').concat(token.src, '\')"><svg viewBox="64 64 896 896" focusable="false" data-icon="zoom-in" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"></path></svg></span></span>');
+    };
     var remarkReplaceKey = function(message, keyWordProblem) {
         var newRemarkable = new Remarkable({
             html: true,
@@ -154,9 +185,21 @@ var CustomerService = function(props) {
             var text = escapeHtml(tokens[idx].content);
             return text.replace(keyWordProblem, '<span class="'.concat(styles.sign, '">').concat(keyWordProblem, "</span>"));
         };
+        // 添加自定义规则来处理 mermaid 代码块
+        newRemarkable.renderer.rules.fence_custom = {
+            mermaid: function mermaid(tokens, idx) {
+                var token = tokens[idx];
+                var id = "mermaid_" + toHashString(token.content);
+                return '<span class="'.concat(styles.maskZoomBox, '"><pre class="').concat(styles.mermaid, '" id="').concat(id, '">').concat(token.content, '</pre><span class="').concat(styles.zoomBox, '" onclick="openViewMemaid(\'').concat(id, '\')"><svg viewBox="64 64 896 896" focusable="false" data-icon="zoom-in" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"></path></svg></span></span>');
+            }
+        };
+        remarkable.renderer.rules.image = function(tokens, idx) {
+            var token = tokens[idx];
+            return '<span class="'.concat(styles.maskZoomBox, '"><img src="').concat(token.src, '" alt="').concat(token.alt, '" title="').concat(token.title, '"/><span class="').concat(styles.zoomBox, '"><svg viewBox="64 64 896 896" focusable="false" data-icon="zoom-in" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"></path></svg></span></span>');
+        };
         return newRemarkable.render(message);
     };
-    var _useState36 = _sliced_to_array(useState(0), 2), screenShotType = _useState36[0], setScreenShotType = _useState36[1]; //1是 screenShotPlugin   2是html2canvas
+    var _useState38 = _sliced_to_array(useState(0), 2), screenShotType = _useState38[0], setScreenShotType = _useState38[1]; //1是 screenShotPlugin   2是html2canvas
     var screenShotPlugin = useRef();
     useEffect(function() {
         // if(config && config.type == 'video'){
@@ -299,17 +342,7 @@ var CustomerService = function(props) {
                 screenShotPlugin.current.destroyComponents();
             }
         };
-        //|| showScreenshot
-        if (showType == 5 || showScreenshot) {
-            // console.log("bbbbbbbbbbbbbb");
-            handlerHtml2canvas();
-        // window.addEventListener('resize',handlerHtml2canvas)
-        }
-        if (showType != 1 && !firstLoad && pageCount > 0) {
-            setFirstLoad(true);
-        // scrollToBottom();
-        }
-        // function handleScroll() {
+        var openViewBase64 = // function handleScroll() {
         //   const container = document.getElementById(
         //     showType == 1 || showType == 3 ? "chat_content" : "chat_content_modal"
         //   );
@@ -367,6 +400,59 @@ var CustomerService = function(props) {
         // if (content) {
         //   content.addEventListener("scroll", handleScroll);
         // }
+        function openViewBase64(img) {
+            setViewBase64(img);
+            setVisible(true);
+        };
+        var openViewMemaid = function openViewMemaid(id) {
+            var _document_querySelector, _svgDomClone;
+            console.log("openViewMemaid");
+            var svgDomClone = (_document_querySelector = document.querySelector("#".concat(id, " svg"))) === null || _document_querySelector === void 0 ? void 0 : _document_querySelector.cloneNode(true);
+            if (!svgDomClone) {
+                return;
+            }
+            svgDomClone.style.backgroundColor = "#fafafa";
+            svgDomClone.style.width = "auto";
+            svgDomClone.style.height = "auto";
+            var viewBox = svgDomClone.getAttribute("viewBox");
+            var _ref = _sliced_to_array(viewBox ? viewBox.split(" ").map(Number) : [
+                0,
+                0,
+                0,
+                0
+            ], 4), x = _ref[0], y = _ref[1], width = _ref[2], height = _ref[3];
+            x -= 10;
+            y -= 10;
+            width += 20;
+            height += 20;
+            svgDomClone.setAttribute("viewBox", "".concat(x, " ").concat(y, " ").concat(width, " ").concat(height));
+            var svgString = ((_svgDomClone = svgDomClone) === null || _svgDomClone === void 0 ? void 0 : _svgDomClone.outerHTML.toString()) || "";
+            var blob = new Blob([
+                svgString
+            ], {
+                type: "image/svg+xml;charset=utf-8"
+            });
+            var blobUrl = URL.createObjectURL(blob);
+            setViewBase64(blobUrl);
+            setVisible(true);
+        // setMemaidContent(id);
+        // setShowMemaid(true);
+        };
+        //|| showScreenshot
+        if (showType == 5 || showScreenshot) {
+            // console.log("bbbbbbbbbbbbbb");
+            handlerHtml2canvas();
+        // window.addEventListener('resize',handlerHtml2canvas)
+        }
+        if (showType != 1 && !firstLoad && pageCount > 0) {
+            setFirstLoad(true);
+            scrollToBottom();
+            setTimeout(function() {
+                scrollToBottom();
+            }, 1000);
+        }
+        window.openViewBase64 = openViewBase64;
+        window.openViewMemaid = openViewMemaid;
         return function() {
             // const content = document.getElementById(
             //   showType == 1 || showType == 3 ? "chat_content" : "chat_content_modal"
@@ -376,6 +462,8 @@ var CustomerService = function(props) {
             // }
             window.removeEventListener("resize", handlerHtml2canvas);
             window.removeEventListener("resize", cancelScreenshot);
+            window.openViewBase64 = undefined;
+            window.openViewMemaid = undefined;
         };
     }, [
         historyMessageList,
@@ -385,6 +473,13 @@ var CustomerService = function(props) {
     ]);
     useEffect(function() {
         historyMessageListRef.current = historyMessageList;
+        var timer = setTimeout(function() {
+            mermaid.init({
+                querySelector: ".".concat(styles.mermaid, ':not([data-processed="true"])'),
+                suppressErrors: true
+            }, ".".concat(styles.mermaid, ':not([data-processed="true"])'));
+            clearTimeout(timer);
+        }, 500);
     }, [
         historyMessageList
     ]);
@@ -393,20 +488,12 @@ var CustomerService = function(props) {
     }, [
         lastId
     ]);
-    useEffect(function() {
-        console.log("isPositionState", isPositionState, isPosition.current);
-    }, [
-        isPositionState
-    ]);
     useEffect(function() {
         resettingBottomHei();
-        var timer = setTimeout(function() {
-            scrollToBottom();
-            clearTimeout(timer);
-        }, 80);
         var dom = document.getElementById(showType == 1 || showType == 3 ? "chat_content" : "chat_content_modal");
         if (dom) {
             var hei = null;
+            console.log("buttomHei1", buttomHei);
             if (showType == 1) {
                 hei = window.innerHeight - 60 - buttomHei;
                 dom.style.maxHeight = "".concat(hei, "px");
@@ -419,10 +506,24 @@ var CustomerService = function(props) {
             }
             setHistoryMessageListVirtuosoHeight(hei);
         }
+        var timer = setTimeout(function() {
+            console.log("showType", showType);
+            scrollToBottom();
+            clearTimeout(timer);
+        }, 100);
     }, [
         buttomHei,
         showType
     ]);
+    useEffect(function() {
+        var timer = setTimeout(function() {
+            console.log("buttomHei2", historyMessageListRef.current.length);
+            scrollToBottom();
+            clearTimeout(timer);
+        }, 100);
+    }, [
+        historyMessageListVirtuosoHeight
+    ]);
     //创建聊天室并获取聊天室列表
     useEffect(function() {
         createRooms("AI").then(function(res) {
@@ -441,7 +542,7 @@ var CustomerService = function(props) {
     }, []);
     useEffect(function() {
         if (roomId != "") {
-            if (lastId == "") {
+            if (lastIdRef.current == "") {
                 getHistoryMessage(pageNum, 2);
             } else {
                 //查看历史记录，需要定位到当前记录
@@ -645,7 +746,10 @@ var CustomerService = function(props) {
                     }));
                     return newHistoryMessageList;
                 });
-                scrollToBottom();
+                var timer = setTimeout(function() {
+                    scrollToBottom();
+                    clearTimeout(timer);
+                }, 100);
             }
         }
     };
@@ -1442,6 +1546,13 @@ var CustomerService = function(props) {
     //获取历史消息  flag:1,历史记录点击定位，2，代表是上拉加载,3,存在新的消息-->老师回答等,4,下拉加载，滚动到底部时，主要用于查看历史记录
     var getHistoryMessage = function(pageNum, flag) {
         var id = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "1", raw_data = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : [];
+        console.log("buttomHei4", {
+            flag: flag,
+            pageNum: pageNum,
+            id: id,
+            raw_data: raw_data
+        });
+        getLisyFlagRef.current = flag;
         clearTimeout(roomMessage.current);
         // console.log(pageNum,flag,'dkfjvndfjvndfkvdf')
         // flag == 1 时已经设置好了位置标记
@@ -1450,7 +1561,9 @@ var CustomerService = function(props) {
             last_id = historyMessageList[0].id;
         }
         if (flag != 1 && last_id != "") {
+            lastIdRef.current = last_id;
             setLastId(last_id);
+            console.log("历史定位", last_id);
         }
         //取消搜索页码标记
         if (flag == 4 && pageNum == 1) {
@@ -1474,13 +1587,32 @@ var CustomerService = function(props) {
                 var total = res.data.total;
                 var maxPageSize = 30;
                 var dataList = res.data.messages.reverse();
-                //历史记录点击进来的,多加载一页，防止定位不准
-                if (flag == 1 && page > 1) {
-                    var markPage = page - 1;
-                    setPageNumHistory(markPage);
-                    getHistoryMessage(page - 1, 5, "1", dataList);
-                    return;
-                }
+                //       const mermaidChart = `\n\`\`\`mermaid\n%%\{init:\{'securityLevel':'loose','theme':'default','themeVariables': \{'useMaxWidth':false,'fontSize':'12px'\}\}\}%%
+                //   sequenceDiagram
+                // actor 用户 as 用户
+                // participant 前端 as Web/App前端
+                // participant 后端 as 后端服务器
+                // participant 数据库 as 数据库
+                // 用户->>前端: 1. 输入用户名密码
+                // 前端->>后端: 2. POST /api/login
+                // 后端->>数据库: 3. 查询用户凭证
+                // 数据库-->>后端: 4. 返回用户数据
+                // alt 验证成功
+                //     后端-->>前端: 5. 返回Token & 用户信息
+                //     前端-->>用户: 6. 显示登录成功，跳转主页
+                // else 验证失败
+                //     后端-->>前端: 5. 返回错误信息
+                //     前端-->>用户: 6. 提示“用户名或密码错误”
+                // end\n\n\`\`\` `;
+                //       const imgTxt=`\n![公司图片](https://www.xiaoqiqiao.com/university/newImg/newHome/smartEdu/img1.png)`
+                //       dataList[dataList.length - 1].message = mermaidChart+imgTxt;
+                // //历史记录点击进来的,多加载一页，防止定位不准
+                // if(flag == 1 && page > 1){
+                //     let markPage = page-1;
+                //     setPageNumHistory(markPage);
+                //     getHistoryMessage(page-1,5,'1',dataList);
+                //     return;
+                // }
                 setPageCount(Math.ceil(total / maxPageSize));
                 setFirstItemIndex(total - maxPageSize * (page - 1));
                 var newHistoryMessageList = [];
@@ -1514,6 +1646,7 @@ var CustomerService = function(props) {
                     totalNumber = newHistoryMessageList.length;
                     return newHistoryMessageList;
                 });
+                historyMessageListRef.current = newHistoryMessageList;
                 // console.log(lastId,'lastIdlastId-------')
                 //如果在跟老师的聊天窗口,用于找到与老师的最新的聊天,并不在与老师对话的窗口中,并聊天窗口相同
                 try {
@@ -1562,6 +1695,9 @@ var CustomerService = function(props) {
                 //&& pageNum == 1
                 getRoomidHistoryMessage(totalNumber, rid);
             }
+            setTimeout(function() {
+                getLisyFlagRef.current = 0;
+            }, 100);
         }).catch(function(res) {
             setLoading(false);
         });
@@ -1932,28 +2068,49 @@ var CustomerService = function(props) {
         if (!historyMessageListVirtuosoRef.current || !isPosition.current) {
             return;
         } else {
-            historyMessageListVirtuosoRef.current.scrollToIndex({
-                index: "LAST",
-                align: "end",
-                behavior: "auto"
-            });
+            if (showType === 4) {
+                var t = setTimeout(function() {
+                    historyMessageListVirtuosoRef.current.scrollIntoView({
+                        index: "LAST",
+                        align: "end",
+                        behavior: "auto",
+                        offset: 144
+                    });
+                    clearTimeout(t);
+                }, 100);
+            } else {
+                historyMessageListVirtuosoRef.current.scrollToIndex({
+                    index: "LAST",
+                    align: "end",
+                    behavior: "auto",
+                    offset: 58
+                });
+            }
         }
     };
     //滚动到指定位置
     var scrollTo = function(id) {
+        console.log("scrollTo", {
+            id: id
+        });
+        if (id == "123456_date") {
+            return;
+        }
         var timer = setTimeout(function() {
             var index = historyMessageListRef.current.findIndex(function(x) {
                 return x.id === id;
             });
-            // console.log("scrollTo", id, index, historyMessageListRef.current);
+            console.log("scrollTo", id, index, historyMessageListRef.current);
             if (index > -1) {
-                historyMessageListVirtuosoRef.current.scrollToIndex({
+                var _historyMessageListVirtuosoRef_current;
+                (_historyMessageListVirtuosoRef_current = historyMessageListVirtuosoRef.current) === null || _historyMessageListVirtuosoRef_current === void 0 ? void 0 : _historyMessageListVirtuosoRef_current.scrollToIndex({
                     index: index,
                     align: "start",
                     behavior: "auto"
                 });
             }
             setLoading(false);
+            setBottomLoading(false);
             clearTimeout(timer);
         }, 10);
     };
@@ -1967,7 +2124,10 @@ var CustomerService = function(props) {
                 }
             } else {
                 if (document.getElementById("Drawer_buttom_modal")) {
-                    var hei1 = document.getElementById("Drawer_buttom_modal").offsetHeight + document.getElementById("BottomAssociationProblem_modal").offsetHeight;
+                    // newlabo 因为是会出现两个#BottomAssociationProblem_modal
+                    var len = document.querySelectorAll("#BottomAssociationProblem_modal").length;
+                    var dom = len > 1 ? document.querySelectorAll("#BottomAssociationProblem_modal")[1] : document.getElementById("BottomAssociationProblem_modal");
+                    var hei1 = document.getElementById("Drawer_buttom_modal").offsetHeight + dom.offsetHeight;
                     setButtomHei(hei1);
                 }
             }
@@ -2171,6 +2331,7 @@ var CustomerService = function(props) {
     var switchChatRoom = function(id, type) {
         if (type != "1") {
             readMessage(id, urllocation, userData, http);
+            lastIdRef.current = "";
             setLastId("");
             setPageNum(1);
             setPageCount(0);
@@ -2209,6 +2370,9 @@ var CustomerService = function(props) {
     //渲染问答
     var renderQuestion = function() {
         var itemContent = function itemContent(index, item) {
+            if (!item) {
+                return null;
+            }
             var _historyMessageList_findIndex;
             var i = (_historyMessageList_findIndex = historyMessageList.findIndex(function(x) {
                 return x.id == item.id;
@@ -2267,6 +2431,13 @@ var CustomerService = function(props) {
                 var text = "<p class='".concat(styles.copyCode, " copyCodeFun' data-id=").concat(item.id, " data-position=").concat(position, ">\n                <span class='").concat(styles.icon, ' copy\' >\n                  <svg\n                    width="1em"\n                    height="1em"\n                    viewBox="0 0 14 14"\n                    shape-rendering="geometricPrecision"\n                    fill="currentColor"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <g clip-path="url(#clip0_518_8403)">\n                      <path\n                        d="M6.16666 1.66666H13.1667C13.4761 1.66666 13.7728 1.78957 13.9916 2.00837C14.2104 2.22716 14.3333 2.5239 14.3333 2.83332V9.83332C14.3333 10.1427 14.2104 10.4395 13.9916 10.6583C13.7728 10.8771 13.4761 11 13.1667 11H6.16666C5.85724 11 5.5605 10.8771 5.34171 10.6583C5.12291 10.4395 5 10.1427 5 9.83332V2.83332C5 2.5239 5.12291 2.22716 5.34171 2.00837C5.5605 1.78957 5.85724 1.66666 6.16666 1.66666ZM6.16666 2.66666C6.12246 2.66666 6.08007 2.68422 6.04881 2.71547C6.01756 2.74673 6 2.78912 6 2.83332V9.83332C6 9.85521 6.00431 9.87688 6.01268 9.8971C6.02106 9.91732 6.03334 9.9357 6.04881 9.95117C6.06429 9.96665 6.08266 9.97893 6.10288 9.9873C6.1231 9.99568 6.14478 9.99999 6.16666 9.99999H13.1667C13.2109 9.99999 13.2533 9.98243 13.2845 9.95117C13.3158 9.91992 13.3333 9.87753 13.3333 9.83332V2.83332C13.3333 2.78912 13.3158 2.74673 13.2845 2.71547C13.2533 2.68422 13.2109 2.66666 13.1667 2.66666H6.16666ZM10 12C10 11.8674 10.0527 11.7402 10.1464 11.6464C10.2402 11.5527 10.3674 11.5 10.5 11.5C10.6326 11.5 10.7598 11.5527 10.8536 11.6464C10.9473 11.7402 11 11.8674 11 12V13.1667C11 13.4761 10.8771 13.7728 10.6583 13.9916C10.4395 14.2104 10.1427 14.3333 9.83333 14.3333H2.83333C2.52391 14.3333 2.22717 14.2104 2.00837 13.9916C1.78958 13.7728 1.66666 13.4761 1.66666 13.1667V6.16666C1.66666 5.85724 1.78958 5.56049 2.00837 5.3417C2.22717 5.12291 2.52391 4.99999 2.83333 4.99999H4C4.13261 4.99999 4.25978 5.05267 4.35355 5.14644C4.44732 5.2402 4.5 5.36738 4.5 5.49999C4.5 5.6326 4.44732 5.75978 4.35355 5.85354C4.25978 5.94731 4.13261 5.99999 4 5.99999H2.83333C2.78913 5.99999 2.74674 6.01755 2.71548 6.04881C2.68422 6.08006 2.66666 6.12245 2.66666 6.16666V13.1667C2.66666 13.2109 2.68422 13.2533 2.71548 13.2845C2.74674 13.3158 2.78913 13.3333 2.83333 13.3333H9.83333C9.87753 13.3333 9.91993 13.3158 9.95118 13.2845C9.98244 13.2533 10 13.2109 10 13.1667V12Z"\n                      />\n                    </g>\n                    <defs>\n                      <clipPath id="clip0_518_8403">\n                        <rect width="16" height="16" />\n                      </clipPath>\n                    </defs>\n                  </svg>\n                </span>\n                <span class=\'').concat(styles.icon, ' copy_success_flag\'>\n                  <svg\n                    width="1em"\n                    height="1em"\n                    shape-rendering="geometricPrecision"\n                    fill="currentColor"\n                    viewBox="0 0 12 7"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path d="M11.2242 0.375687C11.4586 0.610002 11.4586 0.989901 11.2242 1.22422L4.82424 7.62422C4.58992 7.85853 4.21003 7.85853 3.97571 7.62422L0.775712 4.42422C0.541397 4.1899 0.541397 3.81 0.775712 3.57569C1.01003 3.34137 1.38993 3.34137 1.62424 3.57569L4.39998 6.35142L10.3757 0.375687C10.61 0.141373 10.9899 0.141373 11.2242 0.375687Z" />\n                  </svg>\n                </span><span class="copyCode">复制代码</span></p><pre');
                 return text;
             });
+            // message = message.replaceAll(
+            //   new RegExp(`<img`, "ig"),
+            //   (i: any, index: any) => {
+            //     let text = `<div class='${styles.a}'><img`;
+            //     return text;
+            //   }
+            // );
             if (item.sender == mid) {
                 //只有引用和复制功能
                 li = /*#__PURE__*/ _jsxs(_Fragment, {
@@ -2469,10 +2640,8 @@ var CustomerService = function(props) {
                                                 // onMouseEnter方法内：判断回答内容的气泡是否在可视区域内，动态判断点赞按钮显示的上下位置
                                                 var isSmall = showType == 1 || showType == 3;
                                                 var container = document.getElementById(isSmall ? "chat_content" : "chat_content_modal");
-                                                console.log("onMouseEnter1", container);
                                                 if (container) {
                                                     var dom = container.querySelector('[id="'.concat(item.id, '"]'));
-                                                    console.log("onMouseEnter2", dom);
                                                     if (dom) {
                                                         // const con_h=document.getElementById('chat_content').clientHeight-24;//滚动区域的高度
                                                         var con_h = container.clientHeight - (isSmall ? 24 : 0); //滚动区域的高度;
@@ -2480,14 +2649,6 @@ var CustomerService = function(props) {
                                                         var h = dom.clientHeight + (isSmall ? 24 : 0); //当前元素高度
                                                         var topDom = dom.getElementsByClassName(styles.operate_modal_showtop)[0];
                                                         var bottomDom = dom.getElementsByClassName(styles.operate_modal_showbottom)[0];
-                                                        console.log("onMouseEnter3", topDom, bottomDom);
-                                                        console.log("onMouseEnter4", {
-                                                            h: h,
-                                                            con_h: con_h,
-                                                            rectY: rectY,
-                                                            topDom: topDom,
-                                                            bottomDom: bottomDom
-                                                        });
                                                         if (topDom && bottomDom) {
                                                             if (rectY > 0) {
                                                                 //显示上边
@@ -2671,6 +2832,18 @@ var CustomerService = function(props) {
                 children: li
             }, item.id);
         };
+        //     return (
+        //         <pre className={`${styles.mermaid}`}>
+        //           {`graph TD
+        //     A[开始] --> B[步骤1]
+        //     B --> C{条件判断}
+        //     C -- 是 --> D[步骤2]
+        //     C -- 否 --> E[步骤3]
+        //     D --> F[结束]
+        //     E --> F
+        // `}
+        //         </pre>
+        //     )
         return /*#__PURE__*/ _jsx("ul", {
             className: styles.message_con,
             style: {
@@ -2684,45 +2857,101 @@ var CustomerService = function(props) {
                 style: {
                     height: "100%"
                 },
-                // initialTopMostItemIndex={isPositionState? { index: "LAST", align: "end" }:undefined}
-                startReached: function() {
-                    if (pageCount > pageNum && pageCount > 0) {
+                initialTopMostItemIndex: !finished && isPositionState ? undefined : {
+                    index: "LAST",
+                    align: "end",
+                    offset: showType === 3 ? 58 : showType === 4 ? 144 : 58
+                },
+                initialItemCount: 10,
+                itemsRendered: function() {
+                    var t = setTimeout(function() {
+                        mermaid.init({
+                            querySelector: ".".concat(styles.mermaid, ':not([data-processed="true"])'),
+                            suppressErrors: true
+                        }, ".".concat(styles.mermaid, ':not([data-processed="true"])'));
+                        clearTimeout(t);
+                    }, 100);
+                },
+                // startReached={(index) => {
+                //   console.log('atTopStateChange-startReached',index,lastIdRef.current)
+                //   if (pageCount > pageNum && pageCount > 0&& !loading&&lastIdRef.current=='') {
+                //     let number = pageNum + 1;
+                //     setPageNum((pageNum) => {
+                //       return pageNum + 1;
+                //     });
+                //     setLoading(true);
+                //     listTimer.current = setTimeout(() => {
+                //       getHistoryMessage(number, 2);
+                //       lastIdRef.current = "";
+                //       setLastId("");
+                //     }, 1000);
+                //   }
+                // }}
+                atTopStateChange: function(atTop) {
+                    // 判断是否滚动到顶部
+                    console.log("StateChange-atTopStateChange", {
+                        pageCount: pageCount,
+                        pageNum: pageNum
+                    }, getLisyFlagRef.current);
+                    if (atTop && pageCount > pageNum && pageCount > 0 && getLisyFlagRef.current != 1 && getLisyFlagRef.current != 4) {
                         var number = pageNum + 1;
                         setPageNum(function(pageNum) {
                             return pageNum + 1;
                         });
                         setLoading(true);
+                        setBottomLoading(false);
                         listTimer.current = setTimeout(function() {
                             getHistoryMessage(number, 2);
-                        }, 1000);
+                        }, 100);
                     }
                 },
-                endReached: function() {
-                    if (pageNumHistory > 1) {
+                // endReached={(index) => {
+                //   console.log('endReached',pageNumHistory,lastIdRef.current)
+                //   if (pageNumHistory > 1&&lastIdRef.current=='') {
+                //     let number = pageNumHistory - 1;
+                //     setPageNumHistory(number);
+                //     clearTimeout(listTimer.current);
+                //     listTimer.current = setTimeout(() => {
+                //       if (number > 0) {
+                //         setBottomLoading(true);
+                //         getHistoryMessage(number, 4);
+                //         lastIdRef.current = "";
+                //         setLastId("");
+                //       } else {
+                //         setPageNumHistory(0);
+                //       }
+                //     }, 1000);
+                //   }
+                // }}
+                atBottomStateChange: function(atBottom) {
+                    console.log("StateChange-atBottomStateChange", pageNumHistory, getLisyFlagRef.current);
+                    if (atBottom && pageNumHistory > 1 && getLisyFlagRef.current != 1) {
                         var number = pageNumHistory - 1;
                         setPageNumHistory(number);
                         clearTimeout(listTimer.current);
                         listTimer.current = setTimeout(function() {
                             if (number > 0) {
                                 setBottomLoading(true);
+                                setLoading(false);
                                 getHistoryMessage(number, 4);
+                                lastIdRef.current = "";
                                 setLastId("");
                             } else {
                                 setPageNumHistory(0);
                             }
-                        }, 1000);
+                        }, 100);
                     }
                 },
-                context: {
-                    loading: loading
-                },
+                // context={{ loading }}
                 firstItemIndex: firstItemIndex,
-                increaseViewportBy: 200,
-                overscan: 10,
                 logLevel: 0,
+                overscan: {
+                    main: 1000,
+                    reverse: 1000
+                },
                 onScroll: function(e) {
                     //生成答案过程中
-                    if (!finishedRef.current) {
+                    if (!finishedRef.current && isWheelRef.current) {
                         var _container, _container1, _container2;
                         var container = e.target;
                         var _container_scrollTop;
@@ -2741,6 +2970,7 @@ var CustomerService = function(props) {
                             isPosition.current = true;
                             setIsPositionState(true);
                         }
+                        isWheelRef.current = false;
                         console.log("Scroll-onScroll", {
                             container: container,
                             scrollTop: scrollTop,
@@ -2749,6 +2979,11 @@ var CustomerService = function(props) {
                             isPosition: isPosition.current
                         });
                     }
+                },
+                onWheel: function() {
+                    if (!finishedRef.current) {
+                        isWheelRef.current = true;
+                    }
                 }
             })
         });
@@ -3552,6 +3787,7 @@ var CustomerService = function(props) {
         if (page != 1) {
             setPageNumHistory(page);
         }
+        lastIdRef.current = id;
         setLastId(id); //用于定位
         setPageNum(page);
         //如果是当前聊天室
@@ -4126,6 +4362,14 @@ var CustomerService = function(props) {
                         resolve(viewBase64);
                     });
                 }
+            }),
+            showMemaid && memaidContent && /*#__PURE__*/ _jsx(ViewMemaid, {
+                visible: showMemaid,
+                onCancel: function() {
+                    return setShowMemaid(false);
+                },
+                className: "",
+                content: memaidContent
             })
         ]
     });