bhd-components 0.10.33 → 0.10.35

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 || '').replace(/<br>/g, '');
+        // 拼接回完整代码块（保留 ```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)=>{
@@ -413,38 +433,44 @@ const CustomerService = (props)=>{
             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;
+            try {
+                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}`);
+                let svgString = ((_svgDomClone = svgDomClone) === null || _svgDomClone === void 0 ? void 0 : _svgDomClone.outerHTML.toString()) || "";
+                const blob = new Blob([
+                    svgString
+                ], {
+                    type: 'image/svg+xml;charset=utf-8'
+                });
+                console.log('blob', blob);
+                const blobUrl = URL.createObjectURL(blob);
+                console.log('blobUrl', blobUrl);
+                setViewBase64(blobUrl);
+                setVisible(true);
+            // setMemaidContent(id);
+            // setShowMemaid(true);
+            } catch (error) {
+                console.log('error', error);
             }
-            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;
@@ -468,13 +494,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 +629,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 +1445,10 @@ const CustomerService = (props)=>{
             //发送结束
             finishedRef.current = true;
             setFinished(true);
+            renderMermaid();
+            setTimeout(()=>{
+                scrollToBottom();
+            }, 500);
         }
     };
     //问题记录到实验报告中
@@ -2251,6 +2276,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 +2325,8 @@ const CustomerService = (props)=>{
             // let code = message.split("```");
             // code = code[1];
             // console.log(code,888888888);
+            message = removeMermaidBlockComments(message);
+            message = handleRenderSyntaxBlock(message, finishedRef.current || i != historyMessageList.length - 1);
             if (lastId == item.id && keyWordProblem != "") {
                 //点击历史记录时，找到关键字，防止关键字和标签名重复
                 // let key_sign = 'sign_'+new Date().getTime();+'sign';
@@ -2344,13 +2380,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 +2798,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 +2872,7 @@ const CustomerService = (props)=>{
                 },
                 // context={{ loading }}
                 firstItemIndex: firstItemIndex,
-                logLevel: 0,
+                // logLevel={0}
                 overscan: {
                     main: 1000,
                     reverse: 1000
@@ -4232,12 +4255,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 || "";
+        }).replace(/<br>/g, "");
+        // 拼接回完整代码块（保留 ```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 };