bhd-components 0.10.30 → 0.10.32

package/es2017/customerService/index.js

@@ -24,6 +24,8 @@ 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;
@@ -34,8 +36,8 @@ import { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, re
 // import html2canvas from "html2canvas";
 // const screenShot = require('./screenShotPlugin.esm')
 import ScreenShot from "./js-screen-shot/main";
-/*
-自定义remarkable的text解析规则
+/*
+自定义remarkable的text解析规则
  */ const HTML_ESCAPE_TEST_RE = /[&<>"]/;
 const HTML_ESCAPE_REPLACE_RE = /[&<>"]/g;
 const HTML_REPLACEMENTS = {
@@ -53,6 +55,25 @@ function escapeHtml(str) {
     }
     return str;
 }
+function simpleFingerprint(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');
+}
+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 +138,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 +160,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_' + simpleFingerprint(token.content);
+            return `<span class="${styles.maskZoomBox}"><pre class="${styles.mermaid}">${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 style="display:none" id="${id}">${token.content}</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 +191,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_' + simpleFingerprint(token.content);
+                return `<span class="${styles.maskZoomBox}"><pre class="${styles.mermaid}">${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 style="display:none" id="${id}">${token.content}</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 +355,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 +418,17 @@ const CustomerService = (props)=>{
         // if (content) {
         //   content.addEventListener("scroll", handleScroll);
         // }
+        function openViewBase64(img) {
+            setViewBase64(img);
+            setVisible(true);
+        }
+        function openViewMemaid(id) {
+            console.log('openViewMemaid');
+            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 +438,8 @@ const CustomerService = (props)=>{
             // }
             window.removeEventListener("resize", handlerHtml2canvas);
             window.removeEventListener("resize", cancelScreenshot);
+            window.openViewBase64 = undefined;
+            window.openViewMemaid = undefined;
         };
     }, [
         historyMessageList,
@@ -380,6 +449,12 @@ const CustomerService = (props)=>{
     ]);
     useEffect(()=>{
         historyMessageListRef.current = historyMessageList;
+        setTimeout(()=>{
+            mermaid.init({
+                querySelector: `.${styles.mermaid}`,
+                suppressErrors: true
+            }, `.${styles.mermaid}`);
+        }, 500);
     }, [
         historyMessageList
     ]);
@@ -388,20 +463,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 +481,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 +517,7 @@ const CustomerService = (props)=>{
     }, []);
     useEffect(()=>{
         if (roomId != "") {
-            if (lastId == "") {
+            if (lastIdRef.current == "") {
                 getHistoryMessage(pageNum, 2);
             } else {
                 //查看历史记录，需要定位到当前记录
@@ -630,7 +711,10 @@ const CustomerService = (props)=>{
                     }));
                     return newHistoryMessageList;
                 });
-                scrollToBottom();
+                const timer = setTimeout(()=>{
+                    scrollToBottom();
+                    clearTimeout(timer);
+                }, 100);
             }
         }
     };
@@ -1349,6 +1433,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 +1448,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 +1474,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 +1531,7 @@ const CustomerService = (props)=>{
                     totalNumber = newHistoryMessageList.length;
                     return newHistoryMessageList;
                 });
+                historyMessageListRef.current = newHistoryMessageList;
                 // console.log(lastId,'lastIdlastId-------')
                 //如果在跟老师的聊天窗口,用于找到与老师的最新的聊天,并不在与老师对话的窗口中,并聊天窗口相同
                 try {
@@ -1465,6 +1578,9 @@ const CustomerService = (props)=>{
                 //&& pageNum == 1
                 getRoomidHistoryMessage(totalNumber, rid);
             }
+            setTimeout(()=>{
+                getLisyFlagRef.current = 0;
+            }, 100);
         }).catch((res)=>{
             setLoading(false);
         });
@@ -1824,26 +1940,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 +1994,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 +2197,7 @@ const CustomerService = (props)=>{
     const switchChatRoom = (id, type)=>{
         if (type != "1") {
             readMessage(id, urllocation, userData, http);
+            lastIdRef.current = "";
             setLastId("");
             setPageNum(1);
             setPageCount(0);
@@ -2144,42 +2285,49 @@ const CustomerService = (props)=>{
             let position = 0;
             message = message.replaceAll(new RegExp(`<pre`, "ig"), (i, index)=>{
                 position++;
-                let text = `<p class='${styles.copyCode} copyCodeFun' data-id=${item.id} data-position=${position}>
-                <span class='${styles.icon} copy' >
-                  <svg
-                    width="1em"
-                    height="1em"
-                    viewBox="0 0 14 14"
-                    shape-rendering="geometricPrecision"
-                    fill="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <g clip-path="url(#clip0_518_8403)">
-                      <path
-                        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"
-                      />
-                    </g>
-                    <defs>
-                      <clipPath id="clip0_518_8403">
-                        <rect width="16" height="16" />
-                      </clipPath>
-                    </defs>
-                  </svg>
-                </span>
-                <span class='${styles.icon} copy_success_flag'>
-                  <svg
-                    width="1em"
-                    height="1em"
-                    shape-rendering="geometricPrecision"
-                    fill="currentColor"
-                    viewBox="0 0 12 7"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <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" />
-                  </svg>
+                let text = `<p class='${styles.copyCode} copyCodeFun' data-id=${item.id} data-position=${position}>
+                <span class='${styles.icon} copy' >
+                  <svg
+                    width="1em"
+                    height="1em"
+                    viewBox="0 0 14 14"
+                    shape-rendering="geometricPrecision"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g clip-path="url(#clip0_518_8403)">
+                      <path
+                        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"
+                      />
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_518_8403">
+                        <rect width="16" height="16" />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </span>
+                <span class='${styles.icon} copy_success_flag'>
+                  <svg
+                    width="1em"
+                    height="1em"
+                    shape-rendering="geometricPrecision"
+                    fill="currentColor"
+                    viewBox="0 0 12 7"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <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" />
+                  </svg>
                 </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 +2522,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 +2531,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 +2714,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 +2737,102 @@ const CustomerService = (props)=>{
                 itemContent: itemContent,
                 totalCount: historyMessageList.length,
                 style: {
-                    height: "100%"
+                    height: '100%'
+                },
+                initialTopMostItemIndex: !finished && isPositionState ? undefined : {
+                    index: "LAST",
+                    align: "end",
+                    offset: showType === 3 ? 58 : showType === 4 ? 144 : 58
+                },
+                itemsRendered: ()=>{
+                    const t = setTimeout(()=>{
+                        mermaid.init({
+                            querySelector: `.${styles.mermaid}`,
+                            suppressErrors: true
+                        }, `.${styles.mermaid}`);
+                        clearTimeout(t);
+                    }, 100);
                 },
-                // initialTopMostItemIndex={isPositionState? { index: "LAST", align: "end" }:undefined}
-                startReached: ()=>{
-                    if (pageCount > pageNum && pageCount > 0) {
+                // 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: 500,
+                    reverse: 200
+                },
                 onScroll: (e)=>{
                     //生成答案过程中
-                    if (!finishedRef.current) {
+                    if (!finishedRef.current && isWheelRef.current) {
                         var _container, _container1, _container2;
                         const container = e.target;
                         var _container_scrollTop;
@@ -2646,6 +2851,7 @@ const CustomerService = (props)=>{
                             isPosition.current = true;
                             setIsPositionState(true);
                         }
+                        isWheelRef.current = false;
                         console.log("Scroll-onScroll", {
                             container,
                             scrollTop,
@@ -2654,6 +2860,11 @@ const CustomerService = (props)=>{
                             isPosition: isPosition.current
                         });
                     }
+                },
+                onWheel: ()=>{
+                    if (!finishedRef.current) {
+                        isWheelRef.current = true;
+                    }
                 }
             })
         });
@@ -3424,6 +3635,7 @@ const CustomerService = (props)=>{
         if (page != 1) {
             setPageNumHistory(page);
         }
+        lastIdRef.current = id;
         setLastId(id); //用于定位
         setPageNum(page);
         //如果是当前聊天室
@@ -3996,6 +4208,12 @@ const CustomerService = (props)=>{
                         resolve(viewBase64);
                     });
                 }
+            }),
+            showMemaid && memaidContent && /*#__PURE__*/ _jsx(ViewMemaid, {
+                visible: showMemaid,
+                onCancel: ()=>setShowMemaid(false),
+                className: "",
+                content: memaidContent
             })
         ]
     });