bhd-components 0.10.33 → 0.10.34

package/es2017/customerService/function.d.ts

@@ -22,4 +22,6 @@ declare const getBase64Image: (src: any) => Promise<unknown>;
 declare const formatDate: (dateStr: any) => any;
 declare const urlToBase64: (url: string) => Promise<unknown>;
 declare const toHashString: (str: string) => string;
-export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString };
+declare const removeMermaidBlockComments: (markdownContent: any) => any;
+declare const handleRenderSyntaxBlock: (markdownContent: any, flag: boolean) => any;
+export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString, removeMermaidBlockComments, handleRenderSyntaxBlock, };

package/es2017/customerService/function.js

@@ -191,4 +191,37 @@ const toHashString = (str)=>{
     // 转换为正数并格式化为8位十六进制
     return (result >>> 0).toString(16).padStart(8, '0');
 };
-export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString };
+// 正则：匹配```mermaid代码块内 ‘// 注释的内容’ 移除
+const removeMermaidBlockComments = (markdownContent)=>{
+    // 正则匹配 ```mermaid 代码块，捕获块内内容
+    const mermaidBlockRegex = /(```mermaid\n)([\s\S]*?)(\n```)/gm;
+    // 替换逻辑：保留代码块标识，仅清理块内注释
+    return markdownContent.replace(mermaidBlockRegex, (match, prefix, content, suffix)=>{
+        // 清理块内注释的正则（同之前逻辑，优先保留字符串）
+        const commentRegex = /(".*?"|'.*?')|(\/\*[\s\S]*?\*\/)|(\/\/.*?$)/gm;
+        const cleanContent = content.replace(commentRegex, (m, stringPart)=>stringPart || '');
+        // 拼接回完整代码块（保留 ```mermaid 和 ``` 标识）
+        return `${prefix}${cleanContent}${suffix}`;
+    });
+};
+// 处理渲染语法
+const handleRenderSyntaxBlock = (markdownContent, flag)=>{
+    if (flag) {
+        // 正则匹配 ![alt](url) 图片语法
+        const imgBlockRegex = /\[([^\]]*)\]\[\]\((https?:\/\/[^\s)]+)\)/gm;
+        markdownContent = markdownContent.replace(imgBlockRegex, (match, altText, url)=>{
+            return `![${altText}](${url})`;
+        });
+        markdownContent = markdownContent.replaceAll('```mermaid-code', '```mermaid');
+        return markdownContent;
+    } else {
+        // 正则匹配 ![alt](url) 图片语法
+        const imgBlockRegex = /!\[([^\]]*)\]\((https?:\/\/[^\s)]+)\)/gm;
+        markdownContent = markdownContent.replace(imgBlockRegex, (match, altText, url)=>{
+            return `[${altText}][](${url})`;
+        });
+        markdownContent = markdownContent.replaceAll('```mermaid', '```mermaid-code');
+        return markdownContent;
+    }
+};
+export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString, removeMermaidBlockComments, handleRenderSyntaxBlock };

package/es2017/customerService/index.js

@@ -25,14 +25,13 @@ 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, toHashString } from "./function"; //一些方法
+import { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, urlToBase64, toHashString, removeMermaidBlockComments, handleRenderSyntaxBlock } from "./function"; //一些方法
 // import html2canvas from "html2canvas";
 // const screenShot = require('./screenShotPlugin.esm')
 import ScreenShot from "./js-screen-shot/main";
@@ -60,8 +59,13 @@ mermaid.initialize({
     theme: 'default',
     securityLevel: 'loose',
     flowchart: {
+        useMaxWidth: true,
         htmlLabels: true,
         curve: 'basis'
+    },
+    pie: {
+        useMaxWidth: true,
+        useWidth: 360
     }
 });
 const CustomerService = (props)=>{
@@ -136,9 +140,9 @@ const CustomerService = (props)=>{
         html: true,
         highlight: function(str, lang) {
             // 特殊处理 mermaid 代码块
-            if (lang === 'mermaid') {
-                return str; // 不高亮 mermaid 代码
-            }
+            // if (lang === 'mermaid') {
+            //   return str; // 不高亮 mermaid 代码
+            // }
             if (lang && hljs.getLanguage(lang)) {
                 try {
                     return hljs.highlight(lang, str).value;
@@ -154,8 +158,16 @@ const CustomerService = (props)=>{
     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>`;
+            try {
+                if (mermaid.parse(token.content)) {
+                    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>`;
+                } else {
+                    return `<pre><code class="language-mermaid">${token.content}</code></pre>`;
+                }
+            } catch (error) {
+                return `<pre><code class="language-mermaid">${token.content}</code></pre>`;
+            }
         }
     };
     remarkable.renderer.rules.image = (tokens, idx)=>{
@@ -185,8 +197,16 @@ const CustomerService = (props)=>{
         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>`;
+                try {
+                    if (mermaid.parse(token.content)) {
+                        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>`;
+                    } else {
+                        return `<pre><code class="language-mermaid">${token.content}</code></pre>`;
+                    }
+                } catch (error) {
+                    return `<pre><code class="language-mermaid">${token.content}</code></pre>`;
+                }
             }
         };
         remarkable.renderer.rules.image = (tokens, idx)=>{
@@ -468,13 +488,7 @@ 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);
+        renderMermaid(500);
     }, [
         historyMessageList
     ]);
@@ -609,6 +623,7 @@ const CustomerService = (props)=>{
         if (!message) return;
         let codeConment = '';
         let i = 0;
+        message = removeMermaidBlockComments(message);
         message.replaceAll(new RegExp(/```(?:.|\n)*?```/, "ig"), (con)=>{
             i++;
             if (i == position) {
@@ -1424,6 +1439,10 @@ const CustomerService = (props)=>{
             //发送结束
             finishedRef.current = true;
             setFinished(true);
+            renderMermaid();
+            setTimeout(()=>{
+                scrollToBottom();
+            }, 500);
         }
     };
     //问题记录到实验报告中
@@ -2251,6 +2270,15 @@ const CustomerService = (props)=>{
     //   setRoomId(id);
     // }
     };
+    const renderMermaid = (duration = 100)=>{
+        const t = setTimeout(()=>{
+            mermaid.init({
+                querySelector: `.${styles.mermaid}:not([data-processed="true"])`,
+                suppressErrors: true
+            }, `.${styles.mermaid}:not([data-processed="true"])`);
+            clearTimeout(t);
+        }, duration);
+    };
     //渲染问答
     const renderQuestion = ()=>{
         function itemContent(index, item) {
@@ -2291,6 +2319,8 @@ const CustomerService = (props)=>{
             // let code = message.split("```");
             // code = code[1];
             // console.log(code,888888888);
+            message = removeMermaidBlockComments(message);
+            message = handleRenderSyntaxBlock(message, finishedRef.current);
             if (lastId == item.id && keyWordProblem != "") {
                 //点击历史记录时，找到关键字，防止关键字和标签名重复
                 // let key_sign = 'sign_'+new Date().getTime();+'sign';
@@ -2344,13 +2374,6 @@ 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, {
@@ -2769,13 +2792,7 @@ const CustomerService = (props)=>{
                 },
                 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);
+                    renderMermaid();
                 },
                 // startReached={(index) => {
                 //   console.log('atTopStateChange-startReached',index,lastIdRef.current)
@@ -2849,7 +2866,7 @@ const CustomerService = (props)=>{
                 },
                 // context={{ loading }}
                 firstItemIndex: firstItemIndex,
-                logLevel: 0,
+                // logLevel={0}
                 overscan: {
                     main: 1000,
                     reverse: 1000
@@ -4232,12 +4249,6 @@ const CustomerService = (props)=>{
                         resolve(viewBase64);
                     });
                 }
-            }),
-            showMemaid && memaidContent && /*#__PURE__*/ _jsx(ViewMemaid, {
-                visible: showMemaid,
-                onCancel: ()=>setShowMemaid(false),
-                className: "",
-                content: memaidContent
             })
         ]
     });

package/es2017/customerService/index.module.less

@@ -503,7 +503,6 @@
                 margin-bottom: 8px;
                 border-radius: 0 0 4px 4px;
                 &.mermaid{
-                  text-align: center;
                   border-top: 1px solid rgba(0, 0, 0, 0.06);
                   border-radius: 4px;
                   margin: 0;
@@ -524,6 +523,8 @@
                 display: inline-block;    
                 max-width: 100%;
                 padding: 0 !important;
+                margin-top: 8px;
+                margin-bottom: 8px;
                 >img{
                   max-width: 100%;
                 }

package/es2017/customerService/index2.module.less

@@ -496,7 +496,6 @@
                 margin-bottom: 8px;
                 border-radius: 0 0 4px 4px;
                 &.mermaid{
-                  text-align: center;
                   border-top: 1px solid rgba(0, 0, 0, 0.06);
                   border-radius: 4px;
                   margin:0;
@@ -518,6 +517,8 @@
                 display: inline-block;
                 max-width: 100%;               
                 padding: 0 !important;
+                margin-top: 8px;
+                margin-bottom: 8px;
                 >img{
                   max-width: 100%;
                 }

package/esm/customerService/function.d.ts

@@ -22,4 +22,6 @@ declare const getBase64Image: (src: any) => Promise<unknown>;
 declare const formatDate: (dateStr: any) => any;
 declare const urlToBase64: (url: string) => Promise<unknown>;
 declare const toHashString: (str: string) => string;
-export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString };
+declare const removeMermaidBlockComments: (markdownContent: any) => any;
+declare const handleRenderSyntaxBlock: (markdownContent: any, flag: boolean) => any;
+export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString, removeMermaidBlockComments, handleRenderSyntaxBlock, };

package/esm/customerService/function.js

@@ -195,4 +195,39 @@ var toHashString = function(str) {
     // 转换为正数并格式化为8位十六进制
     return (result >>> 0).toString(16).padStart(8, "0");
 };
-export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString };
+// 正则：匹配```mermaid代码块内 ‘// 注释的内容’ 移除
+var removeMermaidBlockComments = function(markdownContent) {
+    // 正则匹配 ```mermaid 代码块，捕获块内内容
+    var mermaidBlockRegex = /(```mermaid\n)([\s\S]*?)(\n```)/gm;
+    // 替换逻辑：保留代码块标识，仅清理块内注释
+    return markdownContent.replace(mermaidBlockRegex, function(match, prefix, content, suffix) {
+        // 清理块内注释的正则（同之前逻辑，优先保留字符串）
+        var commentRegex = /(".*?"|'.*?')|(\/\*[\s\S]*?\*\/)|(\/\/.*?$)/gm;
+        var cleanContent = content.replace(commentRegex, function(m, stringPart) {
+            return stringPart || "";
+        });
+        // 拼接回完整代码块（保留 ```mermaid 和 ``` 标识）
+        return "".concat(prefix).concat(cleanContent).concat(suffix);
+    });
+};
+// 处理渲染语法
+var handleRenderSyntaxBlock = function(markdownContent, flag) {
+    if (flag) {
+        // 正则匹配 ![alt](url) 图片语法
+        var imgBlockRegex = /\[([^\]]*)\]\[\]\((https?:\/\/[^\s)]+)\)/gm;
+        markdownContent = markdownContent.replace(imgBlockRegex, function(match, altText, url) {
+            return "![".concat(altText, "](").concat(url, ")");
+        });
+        markdownContent = markdownContent.replaceAll("```mermaid-code", "```mermaid");
+        return markdownContent;
+    } else {
+        // 正则匹配 ![alt](url) 图片语法
+        var imgBlockRegex1 = /!\[([^\]]*)\]\((https?:\/\/[^\s)]+)\)/gm;
+        markdownContent = markdownContent.replace(imgBlockRegex1, function(match, altText, url) {
+            return "[".concat(altText, "][](").concat(url, ")");
+        });
+        markdownContent = markdownContent.replaceAll("```mermaid", "```mermaid-code");
+        return markdownContent;
+    }
+};
+export { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, getBase64Image, formatDate, urlToBase64, toHashString, removeMermaidBlockComments, handleRenderSyntaxBlock };

package/esm/customerService/index.js

@@ -29,14 +29,13 @@ 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, toHashString } from "./function"; //一些方法
+import { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate, urlToBase64, toHashString, removeMermaidBlockComments, handleRenderSyntaxBlock } from "./function"; //一些方法
 // import html2canvas from "html2canvas";
 // const screenShot = require('./screenShotPlugin.esm')
 import ScreenShot from "./js-screen-shot/main";
@@ -64,8 +63,13 @@ mermaid.initialize({
     theme: "default",
     securityLevel: "loose",
     flowchart: {
+        useMaxWidth: true,
         htmlLabels: true,
         curve: "basis"
+    },
+    pie: {
+        useMaxWidth: true,
+        useWidth: 360
     }
 });
 var CustomerService = function(props) {
@@ -140,9 +144,9 @@ var CustomerService = function(props) {
         html: true,
         highlight: function highlight(str, lang) {
             // 特殊处理 mermaid 代码块
-            if (lang === "mermaid") {
-                return str; // 不高亮 mermaid 代码
-            }
+            // if (lang === 'mermaid') {
+            //   return str; // 不高亮 mermaid 代码
+            // }
             if (lang && hljs.getLanguage(lang)) {
                 try {
                     return hljs.highlight(lang, str).value;
@@ -156,10 +160,18 @@ var CustomerService = function(props) {
     });
     // 添加自定义规则来处理 mermaid 代码块
     remarkable.renderer.rules.fence_custom = {
-        mermaid: function mermaid(tokens, idx) {
+        mermaid: function mermaid1(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>');
+            try {
+                if (mermaid.parse(token.content)) {
+                    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>');
+                } else {
+                    return '<pre><code class="language-mermaid">'.concat(token.content, "</code></pre>");
+                }
+            } catch (error) {
+                return '<pre><code class="language-mermaid">'.concat(token.content, "</code></pre>");
+            }
         }
     };
     remarkable.renderer.rules.image = function(tokens, idx) {
@@ -187,10 +199,18 @@ var CustomerService = function(props) {
         };
         // 添加自定义规则来处理 mermaid 代码块
         newRemarkable.renderer.rules.fence_custom = {
-            mermaid: function mermaid(tokens, idx) {
+            mermaid: function mermaid1(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>');
+                try {
+                    if (mermaid.parse(token.content)) {
+                        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>');
+                    } else {
+                        return '<pre><code class="language-mermaid">'.concat(token.content, "</code></pre>");
+                    }
+                } catch (error) {
+                    return '<pre><code class="language-mermaid">'.concat(token.content, "</code></pre>");
+                }
             }
         };
         remarkable.renderer.rules.image = function(tokens, idx) {
@@ -473,13 +493,7 @@ 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);
+        renderMermaid(500);
     }, [
         historyMessageList
     ]);
@@ -616,6 +630,7 @@ var CustomerService = function(props) {
         if (!message) return;
         var codeConment = "";
         var i = 0;
+        message = removeMermaidBlockComments(message);
         message.replaceAll(new RegExp(/```(?:.|\n)*?```/, "ig"), function(con) {
             i++;
             if (i == position) {
@@ -1514,6 +1529,10 @@ var CustomerService = function(props) {
             //发送结束
             finishedRef.current = true;
             setFinished(true);
+            renderMermaid();
+            setTimeout(function() {
+                scrollToBottom();
+            }, 500);
         }
     };
     //问题记录到实验报告中
@@ -2367,6 +2386,16 @@ var CustomerService = function(props) {
     //   setRoomId(id);
     // }
     };
+    var renderMermaid = function() {
+        var duration = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 100;
+        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);
+        }, duration);
+    };
     //渲染问答
     var renderQuestion = function() {
         var itemContent = function itemContent(index, item) {
@@ -2411,6 +2440,8 @@ var CustomerService = function(props) {
             // let code = message.split("```");
             // code = code[1];
             // console.log(code,888888888);
+            message = removeMermaidBlockComments(message);
+            message = handleRenderSyntaxBlock(message, finishedRef.current);
             if (lastId == item.id && keyWordProblem != "") {
                 //点击历史记录时，找到关键字，防止关键字和标签名重复
                 // let key_sign = 'sign_'+new Date().getTime();+'sign';
@@ -2431,13 +2462,6 @@ 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, {
@@ -2864,13 +2888,7 @@ var CustomerService = function(props) {
                 },
                 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);
+                    renderMermaid();
                 },
                 // startReached={(index) => {
                 //   console.log('atTopStateChange-startReached',index,lastIdRef.current)
@@ -2944,7 +2962,7 @@ var CustomerService = function(props) {
                 },
                 // context={{ loading }}
                 firstItemIndex: firstItemIndex,
-                logLevel: 0,
+                // logLevel={0}
                 overscan: {
                     main: 1000,
                     reverse: 1000
@@ -4362,14 +4380,6 @@ var CustomerService = function(props) {
                         resolve(viewBase64);
                     });
                 }
-            }),
-            showMemaid && memaidContent && /*#__PURE__*/ _jsx(ViewMemaid, {
-                visible: showMemaid,
-                onCancel: function() {
-                    return setShowMemaid(false);
-                },
-                className: "",
-                content: memaidContent
             })
         ]
     });

package/esm/customerService/index.module.less

@@ -503,7 +503,6 @@
                 margin-bottom: 8px;
                 border-radius: 0 0 4px 4px;
                 &.mermaid{
-                  text-align: center;
                   border-top: 1px solid rgba(0, 0, 0, 0.06);
                   border-radius: 4px;
                   margin: 0;
@@ -524,6 +523,8 @@
                 display: inline-block;    
                 max-width: 100%;
                 padding: 0 !important;
+                margin-top: 8px;
+                margin-bottom: 8px;
                 >img{
                   max-width: 100%;
                 }

package/esm/customerService/index2.module.less

@@ -496,7 +496,6 @@
                 margin-bottom: 8px;
                 border-radius: 0 0 4px 4px;
                 &.mermaid{
-                  text-align: center;
                   border-top: 1px solid rgba(0, 0, 0, 0.06);
                   border-radius: 4px;
                   margin:0;
@@ -518,6 +517,8 @@
                 display: inline-block;
                 max-width: 100%;               
                 padding: 0 !important;
+                margin-top: 8px;
+                margin-bottom: 8px;
                 >img{
                   max-width: 100%;
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bhd-components",
-  "version": "0.10.33",
+  "version": "0.10.34",
   "description": "组件功能描述",
   "config": {
     "commitizen": {
@@ -42,8 +42,7 @@
   "scripts": {
     "start:large-memory": "node --max-old-space-size=8192 node_modules/.bin/ice-pkg start",
     "start": "ice-pkg start",
-    "build:1": "ice-pkg build",
-    "build":"node --max-old-space-size=8192 node_modules/.bin/ice-pkg build",
+    "build": "node --max-old-space-size=8192 node_modules/.bin/ice-pkg build",
     "build:esm": "cross-env NODE_TYPE=esm ice-pkg build",
     "build:online": "cross-env NODE_TYPE=online ice-pkg build ",
     "build:online_dev": "cross-env NODE_TYPE=online_dev ice-pkg build ",