bhd-components 0.10.31 → 0.10.33

package/es2017/customerService/function.d.ts

@@ -21,4 +21,5 @@ declare const delegate: (element: any, eventType: string, selector: string, call
 declare const getBase64Image: (src: any) => Promise<unknown>;
 declare const formatDate: (dateStr: any) => any;
 declare const urlToBase64: (url: string) => Promise<unknown>;
-export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64 };
+declare const toHashString: (str: string) => string;
+export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString };

package/es2017/customerService/function.js

@@ -181,4 +181,14 @@ const urlToBase64 = (url)=>{
         };
     });
 };
-export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64 };
+const toHashString = (str)=>{
+    let result = 0;
+    const length = str.length;
+    for(let i = 0; i < length; i++){
+        result = (result << 5) - result + str.charCodeAt(i);
+        result |= 0; // 转换为32位整数
+    }
+    // 转换为正数并格式化为8位十六进制
+    return (result >>> 0).toString(16).padStart(8, '0');
+};
+export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString };

package/es2017/customerService/index.js

@@ -24,13 +24,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";
 const { TextArea } = Input;
 // import './html2canvas.test.js';
 import knowledge_icon from "./images/knowledge_icon.png";
 // import { useMediaRecorder } from "./useMediaRecorder"; //录音使用文件
-import { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, 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";
@@ -53,6 +55,15 @@ function escapeHtml(str) {
     }
     return str;
 }
+mermaid.initialize({
+    startOnLoad: false,
+    theme: 'default',
+    securityLevel: 'loose',
+    flowchart: {
+        htmlLabels: true,
+        curve: 'basis'
+    }
+});
 const CustomerService = (props)=>{
     let { userData, http, urllocation, onCancel, serverName, fetchEventSource, initShowType, onEvent, stepIds, stepId, screenshotAreaId, config } = props;
     // const { bese64String, startRecord, stopRecord } = useMediaRecorder(); //语音转文字
@@ -117,9 +128,17 @@ const CustomerService = (props)=>{
     const [firstItemIndex, setFirstItemIndex] = useState(0);
     const [historyMessageListVirtuosoHeight, setHistoryMessageListVirtuosoHeight] = useState(null);
     const msgStreamingCountRef = useRef(0);
+    const isWheelRef = useRef(false);
+    const getLisyFlagRef = useRef(0);
+    const [showMemaid, setShowMemaid] = useState(false); //是否显示mermaid弹窗
+    const [memaidContent, setMemaidContent] = useState(""); //mermaid内容
     const remarkable = new Remarkable({
         html: true,
         highlight: function(str, lang) {
+            // 特殊处理 mermaid 代码块
+            if (lang === 'mermaid') {
+                return str; // 不高亮 mermaid 代码
+            }
             if (lang && hljs.getLanguage(lang)) {
                 try {
                     return hljs.highlight(lang, str).value;
@@ -131,6 +150,18 @@ const CustomerService = (props)=>{
             return ""; // use external default escaping
         }
     });
+    // 添加自定义规则来处理 mermaid 代码块
+    remarkable.renderer.rules.fence_custom = {
+        mermaid: function(tokens, idx) {
+            const token = tokens[idx];
+            const id = 'mermaid_' + toHashString(token.content);
+            return `<span class="${styles.maskZoomBox}"><pre class="${styles.mermaid}" id="${id}">${token.content}</pre><span class="${styles.zoomBox}" onclick="openViewMemaid('${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 = (tokens, idx)=>{
+        const token = tokens[idx];
+        return `<span class="${styles.maskZoomBox}"><img src="${token.src}" alt="${token.alt}" title="${token.title}"/><span class="${styles.zoomBox}" onclick="openViewBase64('${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>`;
+    };
     const remarkReplaceKey = (message, keyWordProblem)=>{
         let newRemarkable = new Remarkable({
             html: true,
@@ -150,6 +181,18 @@ const CustomerService = (props)=>{
             let text = escapeHtml(tokens[idx].content);
             return text.replace(keyWordProblem, `<span class="${styles.sign}">${keyWordProblem}</span>`);
         };
+        // 添加自定义规则来处理 mermaid 代码块
+        newRemarkable.renderer.rules.fence_custom = {
+            mermaid: function(tokens, idx) {
+                const token = tokens[idx];
+                const id = 'mermaid_' + toHashString(token.content);
+                return `<span class="${styles.maskZoomBox}"><pre class="${styles.mermaid}" id="${id}">${token.content}</pre><span class="${styles.zoomBox}" onclick="openViewMemaid('${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 = (tokens, idx)=>{
+            const token = tokens[idx];
+            return `<span class="${styles.maskZoomBox}"><img src="${token.src}" alt="${token.alt}" title="${token.title}"/><span class="${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);
     };
     const [screenShotType, setScreenShotType] = useState(0); //1是 screenShotPlugin   2是html2canvas
@@ -302,7 +345,10 @@ const CustomerService = (props)=>{
         }
         if (showType != 1 && !firstLoad && pageCount > 0) {
             setFirstLoad(true);
-        // scrollToBottom();
+            scrollToBottom();
+            setTimeout(()=>{
+                scrollToBottom();
+            }, 1000);
         }
         // function handleScroll() {
         //   const container = document.getElementById(
@@ -362,6 +408,46 @@ const CustomerService = (props)=>{
         // if (content) {
         //   content.addEventListener("scroll", handleScroll);
         // }
+        function openViewBase64(img) {
+            setViewBase64(img);
+            setVisible(true);
+        }
+        function openViewMemaid(id) {
+            var _document_querySelector, _svgDomClone;
+            console.log('openViewMemaid');
+            const svgDomClone = (_document_querySelector = document.querySelector(`#${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";
+            const viewBox = svgDomClone.getAttribute('viewBox');
+            let [x, y, width, height] = viewBox ? viewBox.split(' ').map(Number) : [
+                0,
+                0,
+                0,
+                0
+            ];
+            x -= 10;
+            y -= 10;
+            width += 20;
+            height += 20;
+            svgDomClone.setAttribute('viewBox', `${x} ${y} ${width} ${height}`);
+            const svgString = ((_svgDomClone = svgDomClone) === null || _svgDomClone === void 0 ? void 0 : _svgDomClone.outerHTML.toString()) || "";
+            const blob = new Blob([
+                svgString
+            ], {
+                type: 'image/svg+xml;charset=utf-8'
+            });
+            const blobUrl = URL.createObjectURL(blob);
+            setViewBase64(blobUrl);
+            setVisible(true);
+        // setMemaidContent(id);
+        // setShowMemaid(true);
+        }
+        window.openViewBase64 = openViewBase64;
+        window.openViewMemaid = openViewMemaid;
         return ()=>{
             // const content = document.getElementById(
             //   showType == 1 || showType == 3 ? "chat_content" : "chat_content_modal"
@@ -371,6 +457,8 @@ const CustomerService = (props)=>{
             // }
             window.removeEventListener("resize", handlerHtml2canvas);
             window.removeEventListener("resize", cancelScreenshot);
+            window.openViewBase64 = undefined;
+            window.openViewMemaid = undefined;
         };
     }, [
         historyMessageList,
@@ -380,6 +468,13 @@ const CustomerService = (props)=>{
     ]);
     useEffect(()=>{
         historyMessageListRef.current = historyMessageList;
+        const timer = setTimeout(()=>{
+            mermaid.init({
+                querySelector: `.${styles.mermaid}:not([data-processed="true"])`,
+                suppressErrors: true
+            }, `.${styles.mermaid}:not([data-processed="true"])`);
+            clearTimeout(timer);
+        }, 500);
     }, [
         historyMessageList
     ]);
@@ -388,20 +483,12 @@ const CustomerService = (props)=>{
     }, [
         lastId
     ]);
-    useEffect(()=>{
-        console.log('isPositionState', isPositionState, isPosition.current);
-    }, [
-        isPositionState
-    ]);
     useEffect(()=>{
         resettingBottomHei();
-        const timer = setTimeout(()=>{
-            scrollToBottom();
-            clearTimeout(timer);
-        }, 80);
         let dom = document.getElementById(showType == 1 || showType == 3 ? "chat_content" : "chat_content_modal");
         if (dom) {
             let hei = null;
+            console.log('buttomHei1', buttomHei);
             if (showType == 1) {
                 hei = window.innerHeight - 60 - buttomHei;
                 dom.style.maxHeight = `${hei}px`;
@@ -414,10 +501,24 @@ const CustomerService = (props)=>{
             }
             setHistoryMessageListVirtuosoHeight(hei);
         }
+        const timer = setTimeout(()=>{
+            console.log('showType', showType);
+            scrollToBottom();
+            clearTimeout(timer);
+        }, 100);
     }, [
         buttomHei,
         showType
     ]);
+    useEffect(()=>{
+        const timer = setTimeout(()=>{
+            console.log('buttomHei2', historyMessageListRef.current.length);
+            scrollToBottom();
+            clearTimeout(timer);
+        }, 100);
+    }, [
+        historyMessageListVirtuosoHeight
+    ]);
     //创建聊天室并获取聊天室列表
     useEffect(()=>{
         createRooms("AI").then((res)=>{
@@ -436,7 +537,7 @@ const CustomerService = (props)=>{
     }, []);
     useEffect(()=>{
         if (roomId != "") {
-            if (lastId == "") {
+            if (lastIdRef.current == "") {
                 getHistoryMessage(pageNum, 2);
             } else {
                 //查看历史记录，需要定位到当前记录
@@ -630,7 +731,10 @@ const CustomerService = (props)=>{
                     }));
                     return newHistoryMessageList;
                 });
-                scrollToBottom();
+                const timer = setTimeout(()=>{
+                    scrollToBottom();
+                    clearTimeout(timer);
+                }, 100);
             }
         }
     };
@@ -1349,6 +1453,13 @@ const CustomerService = (props)=>{
     };
     //获取历史消息  flag:1,历史记录点击定位，2，代表是上拉加载,3,存在新的消息-->老师回答等,4,下拉加载，滚动到底部时，主要用于查看历史记录
     const getHistoryMessage = (pageNum, flag, id = "1", raw_data = [])=>{
+        console.log('buttomHei4', {
+            flag,
+            pageNum,
+            id,
+            raw_data
+        });
+        getLisyFlagRef.current = flag;
         clearTimeout(roomMessage.current);
         // console.log(pageNum,flag,'dkfjvndfjvndfkvdf')
         // flag == 1 时已经设置好了位置标记
@@ -1357,7 +1468,9 @@ const CustomerService = (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) {
@@ -1381,13 +1494,32 @@ const CustomerService = (props)=>{
                 let total = res.data.total;
                 let maxPageSize = 30;
                 let dataList = res.data.messages.reverse();
-                //历史记录点击进来的,多加载一页，防止定位不准
-                if (flag == 1 && page > 1) {
-                    let 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));
                 let newHistoryMessageList = [];
@@ -1419,6 +1551,7 @@ const CustomerService = (props)=>{
                     totalNumber = newHistoryMessageList.length;
                     return newHistoryMessageList;
                 });
+                historyMessageListRef.current = newHistoryMessageList;
                 // console.log(lastId,'lastIdlastId-------')
                 //如果在跟老师的聊天窗口,用于找到与老师的最新的聊天,并不在与老师对话的窗口中,并聊天窗口相同
                 try {
@@ -1465,6 +1598,9 @@ const CustomerService = (props)=>{
                 //&& pageNum == 1
                 getRoomidHistoryMessage(totalNumber, rid);
             }
+            setTimeout(()=>{
+                getLisyFlagRef.current = 0;
+            }, 100);
         }).catch((res)=>{
             setLoading(false);
         });
@@ -1824,26 +1960,47 @@ const CustomerService = (props)=>{
         if (!historyMessageListVirtuosoRef.current || !isPosition.current) {
             return;
         } else {
-            historyMessageListVirtuosoRef.current.scrollToIndex({
-                index: "LAST",
-                align: "end",
-                behavior: "auto"
-            });
+            if (showType === 4) {
+                const t = setTimeout(()=>{
+                    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
+                });
+            }
         }
     };
     //滚动到指定位置
     const scrollTo = (id)=>{
+        console.log('scrollTo', {
+            id
+        });
+        if (id == '123456_date') {
+            return;
+        }
         const timer = setTimeout(()=>{
             const index = historyMessageListRef.current.findIndex((x)=>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,
-                    align: "start",
+                    align: 'start',
                     behavior: "auto"
                 });
             }
             setLoading(false);
+            setBottomLoading(false);
             clearTimeout(timer);
         }, 10);
     };
@@ -1857,7 +2014,10 @@ const CustomerService = (props)=>{
                 }
             } else {
                 if (document.getElementById("Drawer_buttom_modal")) {
-                    let hei = document.getElementById("Drawer_buttom_modal").offsetHeight + document.getElementById("BottomAssociationProblem_modal").offsetHeight;
+                    // newlabo 因为是会出现两个#BottomAssociationProblem_modal
+                    const len = document.querySelectorAll('#BottomAssociationProblem_modal').length;
+                    const dom = len > 1 ? document.querySelectorAll('#BottomAssociationProblem_modal')[1] : document.getElementById("BottomAssociationProblem_modal");
+                    let hei = document.getElementById("Drawer_buttom_modal").offsetHeight + dom.offsetHeight;
                     setButtomHei(hei);
                 }
             }
@@ -2057,6 +2217,7 @@ const CustomerService = (props)=>{
     const switchChatRoom = (id, type)=>{
         if (type != "1") {
             readMessage(id, urllocation, userData, http);
+            lastIdRef.current = "";
             setLastId("");
             setPageNum(1);
             setPageCount(0);
@@ -2093,6 +2254,9 @@ const CustomerService = (props)=>{
     //渲染问答
     const renderQuestion = ()=>{
         function itemContent(index, item) {
+            if (!item) {
+                return null;
+            }
             var _historyMessageList_findIndex;
             const i = (_historyMessageList_findIndex = historyMessageList.findIndex((x)=>x.id == item.id)) !== null && _historyMessageList_findIndex !== void 0 ? _historyMessageList_findIndex : index;
             let timeObj = parseDate(item.createdAt);
@@ -2180,6 +2344,13 @@ const CustomerService = (props)=>{
                 </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, {
@@ -2374,10 +2545,8 @@ const CustomerService = (props)=>{
                                                 // onMouseEnter方法内：判断回答内容的气泡是否在可视区域内，动态判断点赞按钮显示的上下位置
                                                 const isSmall = showType == 1 || showType == 3;
                                                 const container = document.getElementById(isSmall ? "chat_content" : "chat_content_modal");
-                                                console.log('onMouseEnter1', container);
                                                 if (container) {
                                                     const dom = container.querySelector(`[id="${item.id}"]`);
-                                                    console.log('onMouseEnter2', dom);
                                                     if (dom) {
                                                         // const con_h=document.getElementById('chat_content').clientHeight-24;//滚动区域的高度
                                                         const con_h = container.clientHeight - (isSmall ? 24 : 0); //滚动区域的高度;
@@ -2385,14 +2554,6 @@ const CustomerService = (props)=>{
                                                         const h = dom.clientHeight + (isSmall ? 24 : 0); //当前元素高度
                                                         const topDom = dom.getElementsByClassName(styles.operate_modal_showtop)[0];
                                                         const bottomDom = dom.getElementsByClassName(styles.operate_modal_showbottom)[0];
-                                                        console.log('onMouseEnter3', topDom, bottomDom);
-                                                        console.log('onMouseEnter4', {
-                                                            h,
-                                                            con_h,
-                                                            rectY,
-                                                            topDom,
-                                                            bottomDom
-                                                        });
                                                         if (topDom && bottomDom) {
                                                             if (rectY > 0) {
                                                                 //显示上边
@@ -2576,6 +2737,18 @@ const CustomerService = (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: {
@@ -2587,47 +2760,103 @@ const CustomerService = (props)=>{
                 itemContent: itemContent,
                 totalCount: historyMessageList.length,
                 style: {
-                    height: "100%"
+                    height: '100%'
                 },
-                // initialTopMostItemIndex={isPositionState? { index: "LAST", align: "end" }:undefined}
-                startReached: ()=>{
-                    if (pageCount > pageNum && pageCount > 0) {
+                initialTopMostItemIndex: !finished && isPositionState ? undefined : {
+                    index: "LAST",
+                    align: "end",
+                    offset: showType === 3 ? 58 : showType === 4 ? 144 : 58
+                },
+                initialItemCount: 10,
+                itemsRendered: ()=>{
+                    const t = setTimeout(()=>{
+                        mermaid.init({
+                            querySelector: `.${styles.mermaid}:not([data-processed="true"])`,
+                            suppressErrors: true
+                        }, `.${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: (atTop)=>{
+                    // 判断是否滚动到顶部
+                    console.log('StateChange-atTopStateChange', {
+                        pageCount,
+                        pageNum
+                    }, getLisyFlagRef.current);
+                    if (atTop && pageCount > pageNum && pageCount > 0 && getLisyFlagRef.current != 1 && getLisyFlagRef.current != 4) {
                         let number = pageNum + 1;
                         setPageNum((pageNum)=>{
                             return pageNum + 1;
                         });
                         setLoading(true);
+                        setBottomLoading(false);
                         listTimer.current = setTimeout(()=>{
                             getHistoryMessage(number, 2);
-                        }, 1000);
+                        }, 100);
                     }
                 },
-                endReached: ()=>{
-                    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: (atBottom)=>{
+                    console.log('StateChange-atBottomStateChange', pageNumHistory, getLisyFlagRef.current);
+                    if (atBottom && pageNumHistory > 1 && getLisyFlagRef.current != 1) {
                         let number = pageNumHistory - 1;
                         setPageNumHistory(number);
                         clearTimeout(listTimer.current);
                         listTimer.current = setTimeout(()=>{
                             if (number > 0) {
                                 setBottomLoading(true);
+                                setLoading(false);
                                 getHistoryMessage(number, 4);
+                                lastIdRef.current = "";
                                 setLastId("");
                             } else {
                                 setPageNumHistory(0);
                             }
-                        }, 1000);
+                        }, 100);
                     }
                 },
-                context: {
-                    loading
-                },
+                // context={{ loading }}
                 firstItemIndex: firstItemIndex,
-                increaseViewportBy: 200,
-                overscan: 10,
                 logLevel: 0,
+                overscan: {
+                    main: 1000,
+                    reverse: 1000
+                },
                 onScroll: (e)=>{
                     //生成答案过程中
-                    if (!finishedRef.current) {
+                    if (!finishedRef.current && isWheelRef.current) {
                         var _container, _container1, _container2;
                         const container = e.target;
                         var _container_scrollTop;
@@ -2646,6 +2875,7 @@ const CustomerService = (props)=>{
                             isPosition.current = true;
                             setIsPositionState(true);
                         }
+                        isWheelRef.current = false;
                         console.log("Scroll-onScroll", {
                             container,
                             scrollTop,
@@ -2654,6 +2884,11 @@ const CustomerService = (props)=>{
                             isPosition: isPosition.current
                         });
                     }
+                },
+                onWheel: ()=>{
+                    if (!finishedRef.current) {
+                        isWheelRef.current = true;
+                    }
                 }
             })
         });
@@ -3424,6 +3659,7 @@ const CustomerService = (props)=>{
         if (page != 1) {
             setPageNumHistory(page);
         }
+        lastIdRef.current = id;
         setLastId(id); //用于定位
         setPageNum(page);
         //如果是当前聊天室
@@ -3996,6 +4232,12 @@ const CustomerService = (props)=>{
                         resolve(viewBase64);
                     });
                 }
+            }),
+            showMemaid && memaidContent && /*#__PURE__*/ _jsx(ViewMemaid, {
+                visible: showMemaid,
+                onCancel: ()=>setShowMemaid(false),
+                className: "",
+                content: memaidContent
             })
         ]
     });