markdown-flow-ui 0.1.84 → 0.1.86

package/dist/_virtual/index.es11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es11.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.es11.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index.es5.js

@@ -1,5 +1,6 @@
-var s = { exports: {} };
+import { __require as r } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/@braintree_sanitize-url@7.1.1/node_modules/@braintree/sanitize-url/dist/index.es.js";
+var i = r();
 export {
-  s as __module
+  i as d
 };
 //# sourceMappingURL=index.es5.js.map

package/dist/_virtual/index.es5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.es5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index.es6.js

@@ -1,8 +1,5 @@
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.es.js";
-import { __require as o } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/style-to-js@1.1.18/node_modules/style-to-js/cjs/index.es.js";
-var t = o();
-const a = /* @__PURE__ */ r(t);
+var s = { exports: {} };
 export {
-  a as default
+  s as __module
 };
 //# sourceMappingURL=index.es6.js.map

package/dist/_virtual/index.es6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.es6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index.es7.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.es.js";
-import { __require as r } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/extend@3.0.2/node_modules/extend/index.es.js";
-var t = r();
-const a = /* @__PURE__ */ e(t);
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.es.js";
+import { __require as o } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/style-to-js@1.1.18/node_modules/style-to-js/cjs/index.es.js";
+var t = o();
+const a = /* @__PURE__ */ r(t);
 export {
   a as default
 };

package/dist/_virtual/index.es8.js

@@ -1,6 +1,8 @@
-import { __require as r } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/@braintree_sanitize-url@7.1.1/node_modules/@braintree/sanitize-url/dist/index.es.js";
-var i = r();
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.es.js";
+import { __require as r } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/extend@3.0.2/node_modules/extend/index.es.js";
+var t = r();
+const a = /* @__PURE__ */ e(t);
 export {
-  i as d
+  a as default
 };
 //# sourceMappingURL=index.es8.js.map

package/dist/_virtual/index.es8.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.es8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/ContentRender/ContentRender.cjs.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../_virtual/jsx-runtime.cjs.js");;/* empty css                                                                                                                                 */;/* empty css                                                                                                                    */const u=require("react"),I=require("../../_virtual/index.cjs.js");;/* empty css                       */;/* empty css                               */const M=require("./CodeBlock.cjs.js"),z=require("./plugins/CustomVariable.cjs.js"),C=require("./plugins/MermaidChart.cjs.js"),B=require("./useTypewriterStateMachine.cjs.js"),L=require("./utils/custom-variable-props.cjs.js"),S=require("./utils/highlight-languages.cjs.js"),A=require("./utils/mermaid-parse.cjs.js"),P=require("./utils/normalize-inline-html.cjs.js"),T=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.cjs.js"),H=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.cjs.js"),V=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.cjs.js"),_=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.cjs.js"),U=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.cjs.js"),W=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.cjs.js"),O=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.cjs.js"),D=({svg:r})=>{const m=u.useRef(null);return u.useEffect(()=>{const o=m.current;if(!o)return;const i=o.shadowRoot??o.attachShadow({mode:"open"}),g="content-render-svg-style";let a=i.getElementById(g);a||(a=document.createElement("style"),a.id=g,a.textContent=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../_virtual/jsx-runtime.cjs.js");;/* empty css                                                                                                                                 */;/* empty css                                                                                                                    */const o=require("react"),_=require("../../_virtual/index.cjs.js");;/* empty css                       */;/* empty css                               */const U=require("./CodeBlock.cjs.js"),F=require("./plugins/CustomVariable.cjs.js"),T=require("./plugins/MermaidChart.cjs.js"),O=require("./useTypewriterStateMachine.cjs.js"),z=require("./utils/custom-variable-props.cjs.js"),B=require("./utils/highlight-languages.cjs.js"),P=require("./utils/mermaid-parse.cjs.js"),H=require("./utils/normalize-inline-html.cjs.js"),D=require("./IframeSandbox.cjs.js"),G=require("./utils/split-content.cjs.js"),J=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.cjs.js"),K=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.cjs.js"),Q=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.cjs.js"),X=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.cjs.js"),Y=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.cjs.js"),Z=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.cjs.js"),ee=require("../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.cjs.js"),te=({svg:r})=>{const l=o.useRef(null);return o.useEffect(()=>{const i=l.current;if(!i)return;const a=i.shadowRoot??i.attachShadow({mode:"open"}),v="content-render-svg-style";let c=a.getElementById(v);c||(c=document.createElement("style"),c.id=v,c.textContent=`
         svg { height: auto; display: inline-block; }
         svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }
         svg.content-render-svg-el--fixed { max-width: none; }
-      `,i.appendChild(a)),Array.from(i.childNodes).filter(s=>s!==a).forEach(s=>i.removeChild(s));const R=document.createElement("template");R.innerHTML=r,i.append(R.content.cloneNode(!0));let v=!1,x=!1;i.querySelectorAll("svg").forEach(s=>{const y=s.getAttribute("viewBox");if(!y)return;const h=y.trim().split(/[\s,]+/).map(e=>Number(e));if(h.length!==4||h.some(Number.isNaN))return;const[,,p,l]=h,f=s.getAttribute("width"),j=s.getAttribute("height"),N=!!f&&f!=="0",d=!!j&&j!=="0";if(!N&&!d){v=!0,s.classList.add("content-render-svg-el--responsive"),s.classList.remove("content-render-svg-el--fixed"),s.style.width="100%",s.style.height="auto",!s.style.aspectRatio&&l>0&&(s.style.aspectRatio=`${p} / ${l}`);return}x=!0,s.classList.add("content-render-svg-el--fixed"),s.classList.remove("content-render-svg-el--responsive"),!N&&p>0&&s.setAttribute("width",`${p}`),!d&&l>0&&s.setAttribute("height",`${l}`)});const b=v&&!x;o.classList.toggle("content-render-svg--responsive",b),o.classList.toggle("content-render-svg--fixed",!b)},[r]),t.jsxRuntimeExports.jsx("div",{className:"content-render-svg-scroll",children:t.jsxRuntimeExports.jsx("div",{className:"content-render-svg",ref:m})})},F=({content:r,customRenderBar:m,onSend:o,typingSpeed:i=30,enableTypewriter:g=!1,defaultButtonText:a,defaultInputText:q,defaultSelectedValues:R,readonly:v=!1,onTypeFinished:x,confirmButtonText:b,copyButtonText:s,copiedButtonText:y,onClickCustomButtonAfterContent:h,beforeSend:p})=>{const l=u.useMemo(()=>P.normalizeInlineHtml(r),[r]),{displayContent:f,isComplete:j}=B.default({content:l,typingSpeed:i,disabled:!g}),N={"custom-button-after-content":({children:e})=>t.jsxRuntimeExports.jsx("button",{className:"content-render-custom-button-after-content",onClick:h,children:t.jsxRuntimeExports.jsx("span",{className:"content-render-custom-button-after-content-inner",children:e})}),"custom-variable":e=>t.jsxRuntimeExports.jsx(z.default,{...e,readonly:v,defaultButtonText:a,defaultInputText:q,defaultSelectedValues:R,onSend:o,beforeSend:p,confirmButtonText:b}),code:e=>{const{className:n,children:c,...w}=e;if(/language-(\w+)/.exec(n||"")?.[1]==="mermaid"){const k=c?.toString().replace(/\n$/,"")||"",$=A.mermaidBlockIsComplete(r,k);return t.jsxRuntimeExports.jsx(C.default,{chart:k,frozen:$})}return t.jsxRuntimeExports.jsx("code",{className:n,...w,children:c})},table:({...e})=>t.jsxRuntimeExports.jsx("div",{className:"content-render-table-container",children:t.jsxRuntimeExports.jsx("table",{className:"content-render-table",...e})}),th:({...e})=>t.jsxRuntimeExports.jsx("th",{className:"content-render-th",...e}),td:({...e})=>t.jsxRuntimeExports.jsx("td",{className:"content-render-td",...e}),tr:({...e})=>t.jsxRuntimeExports.jsx("tr",{className:"content-render-tr",...e}),li:({node:e,...n})=>{const c=e?.properties?.className;return typeof c=="string"&&c.includes("task-list-item")||Array.isArray(c)&&c.includes("task-list-item")?t.jsxRuntimeExports.jsx("li",{className:"content-render-task-list-item",...n}):t.jsxRuntimeExports.jsx("li",{...n})},ol:({...e})=>t.jsxRuntimeExports.jsx("ol",{className:"content-render-ol",...e}),ul:({...e})=>t.jsxRuntimeExports.jsx("ul",{className:"content-render-ul",...e}),input:({...e})=>e.type==="checkbox"?t.jsxRuntimeExports.jsx("input",{type:"checkbox",className:"content-render-checkbox",disabled:!0,...e}):t.jsxRuntimeExports.jsx("input",{...e}),a:({children:e,...n})=>t.jsxRuntimeExports.jsx("a",{target:"_blank",rel:"noopener noreferrer",...n,children:e}),pre:e=>t.jsxRuntimeExports.jsx(M.default,{...e,copyButtonText:s,copiedButtonText:y})},d=u.useRef(!1);u.useEffect(()=>{j&&!d.current&&(d.current=!0,x?.())},[j,x]),u.useEffect(()=>{d.current=!1},[r]);const E=A.parseMarkdownSegments(f);return t.jsxRuntimeExports.jsxs("div",{className:"content-render markdown-body",children:[E.map((e,n)=>{if(e.type==="text")return t.jsxRuntimeExports.jsx(T.Markdown,{remarkPlugins:[U.default,W.default,I.default,O.default],rehypePlugins:[L.preserveCustomVariableProperties,H.default,L.restoreCustomVariableProperties,[V.default,{languages:S.highlightLanguages,subset:S.subsetLanguages}],_.default],components:N,children:e.value},n);if(e.type==="mermaid")return t.jsxRuntimeExports.jsx(C.default,{chart:e.value,frozen:!e.complete},n);if(e.type==="svg")return t.jsxRuntimeExports.jsx(D,{svg:e.value},n)}),m&&t.jsxRuntimeExports.jsx("div",{className:"content-render-custom-bar",children:u.createElement(m,{content:r,displayContent:f,onSend:o})})]})};exports.default=F;
+      `,a.appendChild(c)),Array.from(a.childNodes).filter(s=>s!==c).forEach(s=>a.removeChild(s));const b=document.createElement("template");b.innerHTML=r,a.append(b.content.cloneNode(!0));let y=!1,x=!1;a.querySelectorAll("svg").forEach(s=>{const N=s.getAttribute("viewBox");if(!N)return;const p=N.trim().split(/[\s,]+/).map(u=>Number(u));if(p.length!==4||p.some(Number.isNaN))return;const[,,h,m]=p,f=s.getAttribute("width"),j=s.getAttribute("height"),q=u=>{if(!u)return!1;const g=u.trim().toLowerCase();return g==="auto"||g.endsWith("%")},w=!!f&&f!=="0"&&!q(f),k=!!j&&j!=="0"&&!q(j);if(!w&&!k){y=!0,s.classList.add("content-render-svg-el--responsive"),s.classList.remove("content-render-svg-el--fixed"),s.style.width="100%",s.style.height="auto",!s.style.aspectRatio&&m>0&&(s.style.aspectRatio=`${h} / ${m}`);return}x=!0,s.classList.add("content-render-svg-el--fixed"),s.classList.remove("content-render-svg-el--responsive"),!w&&h>0&&s.setAttribute("width",`${h}`),!k&&m>0&&s.setAttribute("height",`${m}`)});const E=y&&!x;i.classList.toggle("content-render-svg--responsive",E),i.classList.toggle("content-render-svg--fixed",!E)},[r]),t.jsxRuntimeExports.jsx("div",{className:"content-render-svg-scroll",children:t.jsxRuntimeExports.jsx("div",{className:"content-render-svg",ref:l})})},se=[Y.default,Z.default,_.default,ee.default],ne=[z.preserveCustomVariableProperties,K.default,z.restoreCustomVariableProperties,[Q.default,{languages:B.highlightLanguages,subset:B.subsetLanguages}],X.default],$=({content:r,components:l})=>t.jsxRuntimeExports.jsx("div",{className:"markdown-renderer",children:t.jsxRuntimeExports.jsx(J.Markdown,{remarkPlugins:se,rehypePlugins:ne,components:l,children:r})}),re=({content:r,customRenderBar:l,onSend:i,typingSpeed:a=30,enableTypewriter:v=!1,defaultButtonText:c,defaultInputText:M,defaultSelectedValues:b,readonly:y=!1,onTypeFinished:x,confirmButtonText:E,copyButtonText:s,copiedButtonText:N,sandboxLoadingText:p,sandboxStyleLoadingText:h,sandboxScriptLoadingText:m,sandboxFullscreenButtonText:f,sandboxMode:j="content",onClickCustomButtonAfterContent:q,beforeSend:w})=>{const k=o.useMemo(()=>H.normalizeInlineHtml(r),[r]),C={"custom-button-after-content":({children:e})=>t.jsxRuntimeExports.jsx("button",{className:"content-render-custom-button-after-content",onClick:q,children:t.jsxRuntimeExports.jsx("span",{className:"content-render-custom-button-after-content-inner",children:e})}),"custom-variable":e=>t.jsxRuntimeExports.jsx(F.default,{...e,readonly:y,defaultButtonText:c,defaultInputText:M,defaultSelectedValues:b,onSend:i,beforeSend:w,confirmButtonText:E}),code:e=>{const{className:n,children:d,...A}=e;if(/language-(\w+)/.exec(n||"")?.[1]==="mermaid"){const I=d?.toString().replace(/\n$/,"")||"",W=P.mermaidBlockIsComplete(r,I);return t.jsxRuntimeExports.jsx(T.default,{chart:I,frozen:W})}return t.jsxRuntimeExports.jsx("code",{className:n,...A,children:d})},table:({...e})=>t.jsxRuntimeExports.jsx("div",{className:"content-render-table-container",children:t.jsxRuntimeExports.jsx("table",{className:"content-render-table",...e})}),th:({...e})=>t.jsxRuntimeExports.jsx("th",{className:"content-render-th",...e}),td:({...e})=>t.jsxRuntimeExports.jsx("td",{className:"content-render-td",...e}),tr:({...e})=>t.jsxRuntimeExports.jsx("tr",{className:"content-render-tr",...e}),li:({node:e,...n})=>{const d=e?.properties?.className;return typeof d=="string"&&d.includes("task-list-item")||Array.isArray(d)&&d.includes("task-list-item")?t.jsxRuntimeExports.jsx("li",{className:"content-render-task-list-item",...n}):t.jsxRuntimeExports.jsx("li",{...n})},ol:({...e})=>t.jsxRuntimeExports.jsx("ol",{className:"content-render-ol",...e}),ul:({...e})=>t.jsxRuntimeExports.jsx("ul",{className:"content-render-ul",...e}),input:({...e})=>e.type==="checkbox"?t.jsxRuntimeExports.jsx("input",{type:"checkbox",className:"content-render-checkbox",disabled:!0,...e}):t.jsxRuntimeExports.jsx("input",{...e}),a:({children:e,...n})=>t.jsxRuntimeExports.jsx("a",{target:"_blank",rel:"noopener noreferrer",...n,children:e}),pre:e=>t.jsxRuntimeExports.jsx(U.default,{...e,copyButtonText:s,copiedButtonText:N})},{displayContent:u,isComplete:g}=O.default({content:k,typingSpeed:a,disabled:!v}),S=o.useMemo(()=>G.splitContentSegments(r,!0),[r]);console.log("renderSegments=====",r,S);const R=S.some(e=>e.type==="sandbox"),V=o.useMemo(()=>P.parseMarkdownSegments(u),[u]),L=o.useRef(!1);return o.useEffect(()=>{R||g&&!L.current&&(L.current=!0,x?.())},[R,g,x]),o.useEffect(()=>{R||(L.current=!1)},[R,r]),R?t.jsxRuntimeExports.jsx("div",{className:"content-render markdown-body",children:S.map((e,n)=>e.type==="sandbox"?t.jsxRuntimeExports.jsx(D.default,{hideFullScreen:!0,content:e.value,className:"content-render-iframe",loadingText:p,styleLoadingText:h,scriptLoadingText:m,fullScreenButtonText:f,mode:j},`sandbox-${n}`):t.jsxRuntimeExports.jsx($,{components:C,content:H.normalizeInlineHtml(e.value)},`md-${n}`))}):t.jsxRuntimeExports.jsxs("div",{className:"content-render markdown-body",children:[V.map((e,n)=>{if(e.type==="text")return t.jsxRuntimeExports.jsx($,{components:C,content:e.value},n);if(e.type==="mermaid")return t.jsxRuntimeExports.jsx(T.default,{chart:e.value,frozen:!e.complete},n);if(e.type==="svg")return t.jsxRuntimeExports.jsx(te,{svg:e.value},n)}),l&&t.jsxRuntimeExports.jsx("div",{className:"content-render-custom-bar",children:o.createElement(l,{content:r,displayContent:u,onSend:i})})]})};exports.MarkdownRenderer=$;exports.default=re;
 //# sourceMappingURL=ContentRender.cjs.js.map

package/dist/components/ContentRender/ContentRender.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentRender.cjs.js","sources":["../../../src/components/ContentRender/ContentRender.tsx"],"sourcesContent":["import \"highlight.js/styles/github.css\";\nimport \"katex/dist/katex.min.css\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeRaw from \"rehype-raw\";\nimport remarkBreaks from \"remark-breaks\";\nimport remarkFlow from \"remark-flow\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./contentRender.css\";\nimport \"./github-markdown-light.css\";\nimport CodeBlock from \"./CodeBlock\";\nimport CustomButtonInputVariable, {\n  ComponentsWithCustomVariable,\n} from \"./plugins/CustomVariable\";\nimport MermaidChart from \"./plugins/MermaidChart\";\nimport useTypewriterStateMachine from \"./useTypewriterStateMachine\";\nimport {\n  preserveCustomVariableProperties,\n  restoreCustomVariableProperties,\n} from \"./utils/custom-variable-props\";\nimport {\n  highlightLanguages,\n  subsetLanguages,\n} from \"./utils/highlight-languages\";\n// import { processMarkdownText } from \"./utils/process-markdown\";\nimport {\n  parseMarkdownSegments,\n  mermaidBlockIsComplete,\n} from \"./utils/mermaid-parse\";\nimport { normalizeInlineHtml } from \"./utils/normalize-inline-html\";\n// Define component Props type\nexport interface ContentRenderProps {\n  content: string;\n  /**\n+   * Callback invoked when the custom button after content is clicked.\n+   * This button is rendered via the `<custom-button-after-content>` tag in markdown content.\n+   * @example\n+   * ```tsx\n+   * <ContentRender\n+   *   content=\"Hello <custom-button-after-content>Ask</custom-button-after-content>\"\n+   *   onClickCustomButtonAfterContent={() => console.log('Button clicked')}\n+   * />\n+   * ```\n+   */\n  customRenderBar?: CustomRenderBarProps;\n  onClickCustomButtonAfterContent?: () => void;\n  onSend?: (content: OnSendContentParams) => void;\n  typingSpeed?: number;\n  enableTypewriter?: boolean;\n  defaultButtonText?: string;\n  defaultInputText?: string; // Text input by user\n  defaultSelectedValues?: string[]; // Default selected values for multi-select\n  readonly?: boolean;\n  onTypeFinished?: () => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text (i18n support)\n  copyButtonText?: string;\n  // Copied state text (i18n support)\n  copiedButtonText?: string;\n  // Dynamic interaction format for multi-select support\n  dynamicInteractionFormat?: string;\n  beforeSend?: (param: OnSendContentParams) => boolean;\n  // tooltipMinLength?: number; // Control minimum character length for tooltip display, default 10\n}\n\n// Render svg string via Shadow DOM to avoid markdown wrapping\nconst SvgBlockInShadow: React.FC<{ svg: string }> = ({ svg }) => {\n  const hostRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: \"open\" });\n    const styleId = \"content-render-svg-style\";\n    let styleEl = shadowRoot.getElementById(styleId) as HTMLStyleElement | null;\n\n    if (!styleEl) {\n      styleEl = document.createElement(\"style\");\n      styleEl.id = styleId;\n      // Keep intrinsic SVG width so the wrapper can scroll horizontally when needed\n      styleEl.textContent = `\n        svg { height: auto; display: inline-block; }\n        svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }\n        svg.content-render-svg-el--fixed { max-width: none; }\n      `;\n      shadowRoot.appendChild(styleEl);\n    }\n\n    const nodesToRemove = Array.from(shadowRoot.childNodes).filter(\n      (node) => node !== styleEl\n    );\n    nodesToRemove.forEach((node) => shadowRoot.removeChild(node));\n\n    const template = document.createElement(\"template\");\n    template.innerHTML = svg;\n    shadowRoot.append(template.content.cloneNode(true));\n\n    let hasResponsiveSvg = false;\n    let hasFixedSvg = false;\n\n    shadowRoot.querySelectorAll(\"svg\").forEach((svgEl) => {\n      // Derive responsive sizing from viewBox so pure viewBox SVGs stay visible and fluid\n      const viewBox = svgEl.getAttribute(\"viewBox\");\n      if (!viewBox) return;\n\n      const dimensions = viewBox\n        .trim()\n        .split(/[\\s,]+/)\n        .map((value) => Number(value));\n\n      if (dimensions.length !== 4 || dimensions.some(Number.isNaN)) return;\n\n      const [, , viewBoxWidth, viewBoxHeight] = dimensions;\n      const widthAttr = svgEl.getAttribute(\"width\");\n      const heightAttr = svgEl.getAttribute(\"height\");\n      const hasWidth = !!widthAttr && widthAttr !== \"0\";\n      const hasHeight = !!heightAttr && heightAttr !== \"0\";\n      const shouldUseResponsiveSize = !hasWidth && !hasHeight;\n\n      if (shouldUseResponsiveSize) {\n        hasResponsiveSvg = true;\n        svgEl.classList.add(\"content-render-svg-el--responsive\");\n        svgEl.classList.remove(\"content-render-svg-el--fixed\");\n        svgEl.style.width = \"100%\";\n        svgEl.style.height = \"auto\";\n        if (!svgEl.style.aspectRatio && viewBoxHeight > 0) {\n          svgEl.style.aspectRatio = `${viewBoxWidth} / ${viewBoxHeight}`;\n        }\n        return;\n      }\n\n      hasFixedSvg = true;\n      svgEl.classList.add(\"content-render-svg-el--fixed\");\n      svgEl.classList.remove(\"content-render-svg-el--responsive\");\n      if (!hasWidth && viewBoxWidth > 0) {\n        svgEl.setAttribute(\"width\", `${viewBoxWidth}`);\n      }\n      if (!hasHeight && viewBoxHeight > 0) {\n        svgEl.setAttribute(\"height\", `${viewBoxHeight}`);\n      }\n    });\n\n    const hostResponsive = hasResponsiveSvg && !hasFixedSvg;\n    host.classList.toggle(\"content-render-svg--responsive\", hostResponsive);\n    host.classList.toggle(\"content-render-svg--fixed\", !hostResponsive);\n  }, [svg]);\n\n  return (\n    <div className=\"content-render-svg-scroll\">\n      <div className=\"content-render-svg\" ref={hostRef} />\n    </div>\n  );\n};\n\n// Extended component interface\ntype CustomComponents = ComponentsWithCustomVariable & {\n  \"custom-button-after-content\"?: React.ComponentType<{\n    children: React.ReactNode;\n  }>;\n};\n\nconst ContentRender: React.FC<ContentRenderProps> = ({\n  content,\n  customRenderBar,\n  onSend,\n  typingSpeed = 30,\n  enableTypewriter = false,\n  defaultButtonText,\n  defaultInputText,\n  defaultSelectedValues,\n  readonly = false,\n  onTypeFinished,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  onClickCustomButtonAfterContent,\n  beforeSend,\n  // tooltipMinLength,\n}) => {\n  const normalizedContent = useMemo(\n    () => normalizeInlineHtml(content),\n    [content]\n  );\n\n  // Use custom Hook to handle typewriter effect\n  const { displayContent, isComplete } = useTypewriterStateMachine({\n    // processMarkdownText will let code block printf(\"You win!\\n\") become printf(\"You win!<br/>\");\n    // content: processMarkdownText(content),\n    content: normalizedContent,\n    typingSpeed,\n    disabled: !enableTypewriter,\n  });\n\n  const components: CustomComponents = {\n    \"custom-button-after-content\": ({\n      children,\n    }: {\n      children: React.ReactNode;\n    }) => {\n      return (\n        <button\n          className=\"content-render-custom-button-after-content\"\n          onClick={onClickCustomButtonAfterContent}\n        >\n          <span className=\"content-render-custom-button-after-content-inner\">\n            {children}\n          </span>\n        </button>\n      );\n    },\n    \"custom-variable\": (props) => (\n      <CustomButtonInputVariable\n        {...props}\n        readonly={readonly}\n        defaultButtonText={defaultButtonText}\n        defaultInputText={defaultInputText}\n        defaultSelectedValues={defaultSelectedValues}\n        onSend={onSend}\n        beforeSend={beforeSend}\n        confirmButtonText={confirmButtonText}\n        // tooltipMinLength={tooltipMinLength}\n      />\n    ),\n    code: (props) => {\n      const { className, children, ...rest } = props as {\n        className?: string;\n        children?: React.ReactNode;\n      };\n      const match = /language-(\\w+)/.exec(className || \"\");\n      const language = match?.[1];\n      if (language === \"mermaid\") {\n        const chartContent = children?.toString().replace(/\\n$/, \"\") || \"\";\n        const frozen = mermaidBlockIsComplete(content, chartContent);\n        return <MermaidChart chart={chartContent} frozen={frozen} />;\n      }\n\n      return (\n        <code className={className} {...rest}>\n          {children}\n        </code>\n      );\n    },\n    table: ({ ...props }) => (\n      <div className=\"content-render-table-container\">\n        <table className=\"content-render-table\" {...props} />\n      </div>\n    ),\n    th: ({ ...props }) => <th className=\"content-render-th\" {...props} />,\n    td: ({ ...props }) => <td className=\"content-render-td\" {...props} />,\n    tr: ({ ...props }) => <tr className=\"content-render-tr\" {...props} />,\n    li: ({ node, ...props }) => {\n      const className = node?.properties?.className;\n      const hasTaskListItem =\n        (typeof className === \"string\" &&\n          className.includes(\"task-list-item\")) ||\n        (Array.isArray(className) && className.includes(\"task-list-item\"));\n      if (hasTaskListItem) {\n        return <li className=\"content-render-task-list-item\" {...props} />;\n      }\n      return <li {...props} />;\n    },\n    ol: ({ ...props }) => <ol className=\"content-render-ol\" {...props} />,\n    ul: ({ ...props }) => <ul className=\"content-render-ul\" {...props} />,\n    input: ({ ...props }) => {\n      if (props.type === \"checkbox\") {\n        return (\n          <input\n            type=\"checkbox\"\n            className=\"content-render-checkbox\"\n            disabled\n            {...props}\n          />\n        );\n      }\n      return <input {...props} />;\n    },\n    a: ({ children, ...props }) => (\n      <a target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n        {children}\n      </a>\n    ),\n    pre: (props) => (\n      <CodeBlock\n        {...props}\n        copyButtonText={copyButtonText}\n        copiedButtonText={copiedButtonText}\n      />\n    ),\n  };\n\n  const hasCompleted = useRef(false);\n\n  useEffect(() => {\n    if (isComplete && !hasCompleted.current) {\n      hasCompleted.current = true; // Mark as completed\n      onTypeFinished?.(); // Call the passed callback\n    }\n  }, [isComplete, onTypeFinished]);\n  useEffect(() => {\n    hasCompleted.current = false; // Reset completion status when content changes\n  }, [content]);\n\n  const segments = parseMarkdownSegments(displayContent);\n\n  return (\n    <div className={`content-render markdown-body`}>\n      {segments.map((seg, index) => {\n        if (seg.type === \"text\") {\n          return (\n            <ReactMarkdown\n              key={index}\n              remarkPlugins={[remarkGfm, remarkMath, remarkFlow, remarkBreaks]}\n              rehypePlugins={[\n                preserveCustomVariableProperties,\n                rehypeRaw,\n                restoreCustomVariableProperties,\n                [\n                  rehypeHighlight,\n                  { languages: highlightLanguages, subset: subsetLanguages },\n                ],\n                rehypeKatex,\n              ]}\n              components={components}\n            >\n              {seg.value}\n            </ReactMarkdown>\n          );\n        }\n\n        if (seg.type === \"mermaid\") {\n          return (\n            <MermaidChart\n              key={index}\n              chart={seg.value}\n              frozen={!seg.complete}\n            />\n          );\n        }\n\n        if (seg.type === \"svg\") {\n          return <SvgBlockInShadow key={index} svg={seg.value} />;\n        }\n      })}\n\n      {customRenderBar && (\n        <div className=\"content-render-custom-bar\">\n          {React.createElement(customRenderBar, {\n            content,\n            displayContent,\n            onSend,\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ContentRender;\n"],"names":["SvgBlockInShadow","svg","hostRef","useRef","useEffect","host","shadowRoot","styleId","styleEl","node","template","hasResponsiveSvg","hasFixedSvg","svgEl","viewBox","dimensions","value","viewBoxWidth","viewBoxHeight","widthAttr","heightAttr","hasWidth","hasHeight","hostResponsive","jsx","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","onClickCustomButtonAfterContent","beforeSend","normalizedContent","useMemo","normalizeInlineHtml","displayContent","isComplete","useTypewriterStateMachine","components","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","CodeBlock","hasCompleted","segments","parseMarkdownSegments","jsxs","seg","index","ReactMarkdown","remarkGfm","remarkMath","remarkFlow","remarkBreaks","preserveCustomVariableProperties","rehypeRaw","restoreCustomVariableProperties","rehypeHighlight","highlightLanguages","subsetLanguages","rehypeKatex","React"],"mappings":"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"}
+{"version":3,"file":"ContentRender.cjs.js","sources":["../../../src/components/ContentRender/ContentRender.tsx"],"sourcesContent":["import \"highlight.js/styles/github.css\";\nimport \"katex/dist/katex.min.css\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeRaw from \"rehype-raw\";\nimport remarkBreaks from \"remark-breaks\";\nimport remarkFlow from \"remark-flow\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./contentRender.css\";\nimport \"./github-markdown-light.css\";\nimport CodeBlock from \"./CodeBlock\";\nimport CustomButtonInputVariable, {\n  ComponentsWithCustomVariable,\n} from \"./plugins/CustomVariable\";\nimport MermaidChart from \"./plugins/MermaidChart\";\nimport useTypewriterStateMachine from \"./useTypewriterStateMachine\";\nimport {\n  preserveCustomVariableProperties,\n  restoreCustomVariableProperties,\n} from \"./utils/custom-variable-props\";\nimport {\n  highlightLanguages,\n  subsetLanguages,\n} from \"./utils/highlight-languages\";\n// import { processMarkdownText } from \"./utils/process-markdown\";\nimport {\n  parseMarkdownSegments,\n  mermaidBlockIsComplete,\n} from \"./utils/mermaid-parse\";\nimport { normalizeInlineHtml } from \"./utils/normalize-inline-html\";\nimport IframeSandbox from \"./IframeSandbox\";\nimport { splitContentSegments } from \"./utils/split-content\";\n// Define component Props type\nexport interface ContentRenderProps {\n  content: string;\n  /**\n+   * Callback invoked when the custom button after content is clicked.\n+   * This button is rendered via the `<custom-button-after-content>` tag in markdown content.\n+   * @example\n+   * ```tsx\n+   * <ContentRender\n+   *   content=\"Hello <custom-button-after-content>Ask</custom-button-after-content>\"\n+   *   onClickCustomButtonAfterContent={() => console.log('Button clicked')}\n+   * />\n+   * ```\n+   */\n  customRenderBar?: CustomRenderBarProps;\n  onClickCustomButtonAfterContent?: () => void;\n  onSend?: (content: OnSendContentParams) => void;\n  typingSpeed?: number;\n  enableTypewriter?: boolean;\n  defaultButtonText?: string;\n  defaultInputText?: string; // Text input by user\n  defaultSelectedValues?: string[]; // Default selected values for multi-select\n  readonly?: boolean;\n  onTypeFinished?: () => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text (i18n support)\n  copyButtonText?: string;\n  // Copied state text (i18n support)\n  copiedButtonText?: string;\n  // Dynamic interaction format for multi-select support\n  dynamicInteractionFormat?: string;\n  // Loading text before first HTML block renders inside iframe (i18n support)\n  sandboxLoadingText?: string;\n  // Loading text while styles are being generated inside iframe\n  sandboxStyleLoadingText?: string;\n  // Loading text while scripts are being cached/executed inside iframe\n  sandboxScriptLoadingText?: string;\n  // Fullscreen button text for iframe sandbox\n  sandboxFullscreenButtonText?: string;\n  // Sandbox render mode\n  sandboxMode?: \"content\" | \"blackboard\";\n  beforeSend?: (param: OnSendContentParams) => boolean;\n  // tooltipMinLength?: number; // Control minimum character length for tooltip display, default 10\n}\n\n// Render svg string via Shadow DOM to avoid markdown wrapping\nconst SvgBlockInShadow: React.FC<{ svg: string }> = ({ svg }) => {\n  const hostRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: \"open\" });\n    const styleId = \"content-render-svg-style\";\n    let styleEl = shadowRoot.getElementById(styleId) as HTMLStyleElement | null;\n\n    if (!styleEl) {\n      styleEl = document.createElement(\"style\");\n      styleEl.id = styleId;\n      // Keep intrinsic SVG width so the wrapper can scroll horizontally when needed\n      styleEl.textContent = `\n        svg { height: auto; display: inline-block; }\n        svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }\n        svg.content-render-svg-el--fixed { max-width: none; }\n      `;\n      shadowRoot.appendChild(styleEl);\n    }\n\n    const nodesToRemove = Array.from(shadowRoot.childNodes).filter(\n      (node) => node !== styleEl\n    );\n    nodesToRemove.forEach((node) => shadowRoot.removeChild(node));\n\n    const template = document.createElement(\"template\");\n    template.innerHTML = svg;\n    shadowRoot.append(template.content.cloneNode(true));\n\n    let hasResponsiveSvg = false;\n    let hasFixedSvg = false;\n\n    shadowRoot.querySelectorAll(\"svg\").forEach((svgEl) => {\n      // Derive responsive sizing from viewBox so pure viewBox SVGs stay visible and fluid\n      const viewBox = svgEl.getAttribute(\"viewBox\");\n      if (!viewBox) return;\n\n      const dimensions = viewBox\n        .trim()\n        .split(/[\\s,]+/)\n        .map((value) => Number(value));\n\n      if (dimensions.length !== 4 || dimensions.some(Number.isNaN)) return;\n\n      const [, , viewBoxWidth, viewBoxHeight] = dimensions;\n      const widthAttr = svgEl.getAttribute(\"width\");\n      const heightAttr = svgEl.getAttribute(\"height\");\n      const isRelativeLength = (value?: string | null) => {\n        if (!value) return false;\n        const normalized = value.trim().toLowerCase();\n        return normalized === \"auto\" || normalized.endsWith(\"%\");\n      };\n      // Treat percentage/auto sizing as responsive so viewBox drives the layout\n      const hasWidth =\n        !!widthAttr && widthAttr !== \"0\" && !isRelativeLength(widthAttr);\n      const hasHeight =\n        !!heightAttr && heightAttr !== \"0\" && !isRelativeLength(heightAttr);\n\n      const shouldUseResponsiveSize = !hasWidth && !hasHeight;\n\n      if (shouldUseResponsiveSize) {\n        hasResponsiveSvg = true;\n        svgEl.classList.add(\"content-render-svg-el--responsive\");\n        svgEl.classList.remove(\"content-render-svg-el--fixed\");\n        svgEl.style.width = \"100%\";\n        svgEl.style.height = \"auto\";\n        if (!svgEl.style.aspectRatio && viewBoxHeight > 0) {\n          svgEl.style.aspectRatio = `${viewBoxWidth} / ${viewBoxHeight}`;\n        }\n        return;\n      }\n\n      hasFixedSvg = true;\n      svgEl.classList.add(\"content-render-svg-el--fixed\");\n      svgEl.classList.remove(\"content-render-svg-el--responsive\");\n      if (!hasWidth && viewBoxWidth > 0) {\n        svgEl.setAttribute(\"width\", `${viewBoxWidth}`);\n      }\n      if (!hasHeight && viewBoxHeight > 0) {\n        svgEl.setAttribute(\"height\", `${viewBoxHeight}`);\n      }\n    });\n\n    const hostResponsive = hasResponsiveSvg && !hasFixedSvg;\n    host.classList.toggle(\"content-render-svg--responsive\", hostResponsive);\n    host.classList.toggle(\"content-render-svg--fixed\", !hostResponsive);\n  }, [svg]);\n\n  return (\n    <div className=\"content-render-svg-scroll\">\n      <div className=\"content-render-svg\" ref={hostRef} />\n    </div>\n  );\n};\n\n// Extended component interface\ntype CustomComponents = ComponentsWithCustomVariable & {\n  \"custom-button-after-content\"?: React.ComponentType<{\n    children: React.ReactNode;\n  }>;\n};\n\nconst remarkPlugins = [remarkGfm, remarkMath, remarkFlow, remarkBreaks];\n\nconst rehypePlugins = [\n  preserveCustomVariableProperties,\n  rehypeRaw,\n  restoreCustomVariableProperties,\n  [rehypeHighlight, { languages: highlightLanguages, subset: subsetLanguages }],\n  rehypeKatex,\n];\n\nexport const MarkdownRenderer: React.FC<{\n  content: string;\n  components: CustomComponents;\n}> = ({ content: markdownContent, components }) => (\n  <div className=\"markdown-renderer\">\n    <ReactMarkdown\n      remarkPlugins={remarkPlugins}\n      rehypePlugins={rehypePlugins}\n      components={components}\n    >\n      {markdownContent}\n    </ReactMarkdown>\n  </div>\n);\n\nconst ContentRender: React.FC<ContentRenderProps> = ({\n  content,\n  customRenderBar,\n  onSend,\n  typingSpeed = 30,\n  enableTypewriter = false,\n  defaultButtonText,\n  defaultInputText,\n  defaultSelectedValues,\n  readonly = false,\n  onTypeFinished,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  sandboxLoadingText,\n  sandboxStyleLoadingText,\n  sandboxScriptLoadingText,\n  sandboxFullscreenButtonText,\n  sandboxMode = \"content\",\n  onClickCustomButtonAfterContent,\n  beforeSend,\n  // tooltipMinLength,\n}) => {\n  const normalizedContent = useMemo(\n    () => normalizeInlineHtml(content),\n    [content]\n  );\n\n  // Use custom Hook to handle typewriter effect\n  const components: CustomComponents = {\n    \"custom-button-after-content\": ({\n      children,\n    }: {\n      children: React.ReactNode;\n    }) => {\n      return (\n        <button\n          className=\"content-render-custom-button-after-content\"\n          onClick={onClickCustomButtonAfterContent}\n        >\n          <span className=\"content-render-custom-button-after-content-inner\">\n            {children}\n          </span>\n        </button>\n      );\n    },\n    \"custom-variable\": (props) => (\n      <CustomButtonInputVariable\n        {...props}\n        readonly={readonly}\n        defaultButtonText={defaultButtonText}\n        defaultInputText={defaultInputText}\n        defaultSelectedValues={defaultSelectedValues}\n        onSend={onSend}\n        beforeSend={beforeSend}\n        confirmButtonText={confirmButtonText}\n        // tooltipMinLength={tooltipMinLength}\n      />\n    ),\n    code: (props) => {\n      const { className, children, ...rest } = props as {\n        className?: string;\n        children?: React.ReactNode;\n      };\n      const match = /language-(\\w+)/.exec(className || \"\");\n      const language = match?.[1];\n      if (language === \"mermaid\") {\n        const chartContent = children?.toString().replace(/\\n$/, \"\") || \"\";\n        const frozen = mermaidBlockIsComplete(content, chartContent);\n        return <MermaidChart chart={chartContent} frozen={frozen} />;\n      }\n\n      return (\n        <code className={className} {...rest}>\n          {children}\n        </code>\n      );\n    },\n    table: ({ ...props }) => (\n      <div className=\"content-render-table-container\">\n        <table className=\"content-render-table\" {...props} />\n      </div>\n    ),\n    th: ({ ...props }) => <th className=\"content-render-th\" {...props} />,\n    td: ({ ...props }) => <td className=\"content-render-td\" {...props} />,\n    tr: ({ ...props }) => <tr className=\"content-render-tr\" {...props} />,\n    li: ({ node, ...props }) => {\n      const className = node?.properties?.className;\n      const hasTaskListItem =\n        (typeof className === \"string\" &&\n          className.includes(\"task-list-item\")) ||\n        (Array.isArray(className) && className.includes(\"task-list-item\"));\n      if (hasTaskListItem) {\n        return <li className=\"content-render-task-list-item\" {...props} />;\n      }\n      return <li {...props} />;\n    },\n    ol: ({ ...props }) => <ol className=\"content-render-ol\" {...props} />,\n    ul: ({ ...props }) => <ul className=\"content-render-ul\" {...props} />,\n    input: ({ ...props }) => {\n      if (props.type === \"checkbox\") {\n        return (\n          <input\n            type=\"checkbox\"\n            className=\"content-render-checkbox\"\n            disabled\n            {...props}\n          />\n        );\n      }\n      return <input {...props} />;\n    },\n    a: ({ children, ...props }) => (\n      <a target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n        {children}\n      </a>\n    ),\n    pre: (props) => (\n      <CodeBlock\n        {...props}\n        copyButtonText={copyButtonText}\n        copiedButtonText={copiedButtonText}\n      />\n    ),\n  };\n\n  const { displayContent, isComplete } = useTypewriterStateMachine({\n    // processMarkdownText will let code block printf(\"You win!\\n\") become printf(\"You win!<br/>\");\n    // content: processMarkdownText(content),\n    content: normalizedContent,\n    typingSpeed,\n    disabled: !enableTypewriter,\n  });\n\n  const renderSegments = useMemo(\n    () => splitContentSegments(content, true),\n    [content]\n  );\n  console.log(\"renderSegments=====\", content, renderSegments);\n  const hasSandbox = renderSegments.some(\n    (segment) => segment.type === \"sandbox\"\n  );\n\n  const segments = useMemo(\n    () => parseMarkdownSegments(displayContent),\n    [displayContent]\n  );\n\n  const hasCompleted = useRef(false);\n\n  useEffect(() => {\n    if (hasSandbox) return;\n    if (isComplete && !hasCompleted.current) {\n      hasCompleted.current = true; // Mark as completed\n      onTypeFinished?.(); // Call the passed callback\n    }\n  }, [hasSandbox, isComplete, onTypeFinished]);\n\n  useEffect(() => {\n    if (hasSandbox) return;\n    hasCompleted.current = false; // Reset completion status when content changes\n  }, [hasSandbox, content]);\n\n  if (hasSandbox) {\n    return (\n      <div className=\"content-render markdown-body\">\n        {renderSegments.map((segment, idx) =>\n          segment.type === \"sandbox\" ? (\n            <IframeSandbox\n              key={`sandbox-${idx}`}\n              hideFullScreen\n              content={segment.value}\n              className=\"content-render-iframe\"\n              loadingText={sandboxLoadingText}\n              styleLoadingText={sandboxStyleLoadingText}\n              scriptLoadingText={sandboxScriptLoadingText}\n              fullScreenButtonText={sandboxFullscreenButtonText}\n              mode={sandboxMode}\n            />\n          ) : (\n            <MarkdownRenderer\n              key={`md-${idx}`}\n              components={components}\n              content={normalizeInlineHtml(segment.value)}\n            />\n          )\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"content-render markdown-body\">\n      {segments.map((seg, index) => {\n        if (seg.type === \"text\") {\n          return (\n            <MarkdownRenderer\n              key={index}\n              components={components}\n              content={seg.value}\n            />\n          );\n        }\n\n        if (seg.type === \"mermaid\") {\n          return (\n            <MermaidChart\n              key={index}\n              chart={seg.value}\n              frozen={!seg.complete}\n            />\n          );\n        }\n\n        if (seg.type === \"svg\") {\n          return <SvgBlockInShadow key={index} svg={seg.value} />;\n        }\n      })}\n\n      {customRenderBar && (\n        <div className=\"content-render-custom-bar\">\n          {React.createElement(customRenderBar, {\n            content,\n            displayContent,\n            onSend,\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ContentRender;\n"],"names":["SvgBlockInShadow","svg","hostRef","useRef","useEffect","host","shadowRoot","styleId","styleEl","node","template","hasResponsiveSvg","hasFixedSvg","svgEl","viewBox","dimensions","value","viewBoxWidth","viewBoxHeight","widthAttr","heightAttr","isRelativeLength","normalized","hasWidth","hasHeight","hostResponsive","jsx","remarkPlugins","remarkGfm","remarkMath","remarkFlow","remarkBreaks","rehypePlugins","preserveCustomVariableProperties","rehypeRaw","restoreCustomVariableProperties","rehypeHighlight","highlightLanguages","subsetLanguages","rehypeKatex","MarkdownRenderer","markdownContent","components","ReactMarkdown","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","sandboxLoadingText","sandboxStyleLoadingText","sandboxScriptLoadingText","sandboxFullscreenButtonText","sandboxMode","onClickCustomButtonAfterContent","beforeSend","normalizedContent","useMemo","normalizeInlineHtml","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","CodeBlock","displayContent","isComplete","useTypewriterStateMachine","renderSegments","splitContentSegments","hasSandbox","segment","segments","parseMarkdownSegments","hasCompleted","idx","IframeSandbox","jsxs","seg","index","React"],"mappings":"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"}

package/dist/components/ContentRender/ContentRender.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { CustomRenderBarProps, OnSendContentParams } from '../types';
+import { ComponentsWithCustomVariable } from './plugins/CustomVariable';
 export interface ContentRenderProps {
     content: string;
     /**
@@ -27,7 +28,21 @@ export interface ContentRenderProps {
     copyButtonText?: string;
     copiedButtonText?: string;
     dynamicInteractionFormat?: string;
+    sandboxLoadingText?: string;
+    sandboxStyleLoadingText?: string;
+    sandboxScriptLoadingText?: string;
+    sandboxFullscreenButtonText?: string;
+    sandboxMode?: "content" | "blackboard";
     beforeSend?: (param: OnSendContentParams) => boolean;
 }
+type CustomComponents = ComponentsWithCustomVariable & {
+    "custom-button-after-content"?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+};
+export declare const MarkdownRenderer: React.FC<{
+    content: string;
+    components: CustomComponents;
+}>;
 declare const ContentRender: React.FC<ContentRenderProps>;
 export default ContentRender;

package/dist/components/ContentRender/ContentRender.es.js

@@ -1,123 +1,142 @@
 import { j as t } from "../../_virtual/jsx-runtime.es.js";
 /* empty css                                                                                                                               */
 /* empty css                                                                                                                  */
-import I, { useMemo as M, useRef as S, useEffect as k } from "react";
-import z from "../../_virtual/index.es.js";
+import F, { useMemo as B, useRef as V, useEffect as I } from "react";
+import U from "../../_virtual/index.es.js";
 /* empty css                     */
 /* empty css                             */
-import H from "./CodeBlock.es.js";
-import T from "./plugins/CustomVariable.es.js";
-import L from "./plugins/MermaidChart.es.js";
-import $ from "./useTypewriterStateMachine.es.js";
-import { preserveCustomVariableProperties as P, restoreCustomVariableProperties as V } from "./utils/custom-variable-props.es.js";
-import { subsetLanguages as _, highlightLanguages as U } from "./utils/highlight-languages.es.js";
-import { parseMarkdownSegments as W, mermaidBlockIsComplete as q } from "./utils/mermaid-parse.es.js";
-import { normalizeInlineHtml as F } from "./utils/normalize-inline-html.es.js";
-import { Markdown as G } from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.es.js";
-import K from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.es.js";
-import D from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.es.js";
-import J from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.es.js";
-import O from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
-import Q from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.es.js";
-import X from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.es.js";
-const Y = ({ svg: n }) => {
-  const d = S(null);
-  return k(() => {
-    const o = d.current;
+import q from "./CodeBlock.es.js";
+import G from "./plugins/CustomVariable.es.js";
+import $ from "./plugins/MermaidChart.es.js";
+import K from "./useTypewriterStateMachine.es.js";
+import { preserveCustomVariableProperties as D, restoreCustomVariableProperties as J } from "./utils/custom-variable-props.es.js";
+import { subsetLanguages as O, highlightLanguages as Q } from "./utils/highlight-languages.es.js";
+import { parseMarkdownSegments as X, mermaidBlockIsComplete as Y } from "./utils/mermaid-parse.es.js";
+import { normalizeInlineHtml as H } from "./utils/normalize-inline-html.es.js";
+import Z from "./IframeSandbox.es.js";
+import { splitContentSegments as E } from "./utils/split-content.es.js";
+import { Markdown as ee } from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.es.js";
+import te from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.es.js";
+import re from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.es.js";
+import ne from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.es.js";
+import se from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
+import oe from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.es.js";
+import ae from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.es.js";
+const ie = ({ svg: s }) => {
+  const l = V(null);
+  return I(() => {
+    const o = l.current;
     if (!o) return;
-    const a = o.shadowRoot ?? o.attachShadow({ mode: "open" }), g = "content-render-svg-style";
-    let i = a.getElementById(g);
-    i || (i = document.createElement("style"), i.id = g, i.textContent = `
+    const a = o.shadowRoot ?? o.attachShadow({ mode: "open" }), b = "content-render-svg-style";
+    let i = a.getElementById(b);
+    i || (i = document.createElement("style"), i.id = b, i.textContent = `
         svg { height: auto; display: inline-block; }
         svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }
         svg.content-render-svg-el--fixed { max-width: none; }
       `, a.appendChild(i)), Array.from(a.childNodes).filter(
       (r) => r !== i
     ).forEach((r) => a.removeChild(r));
-    const v = document.createElement("template");
-    v.innerHTML = n, a.append(v.content.cloneNode(!0));
-    let b = !1, u = !1;
+    const j = document.createElement("template");
+    j.innerHTML = s, a.append(j.content.cloneNode(!0));
+    let y = !1, u = !1;
     a.querySelectorAll("svg").forEach((r) => {
-      const y = r.getAttribute("viewBox");
-      if (!y) return;
-      const h = y.trim().split(/[\s,]+/).map((e) => Number(e));
+      const k = r.getAttribute("viewBox");
+      if (!k) return;
+      const h = k.trim().split(/[\s,]+/).map((c) => Number(c));
       if (h.length !== 4 || h.some(Number.isNaN)) return;
-      const [, , p, l] = h, f = r.getAttribute("width"), x = r.getAttribute("height"), N = !!f && f !== "0", m = !!x && x !== "0";
-      if (!N && !m) {
-        b = !0, r.classList.add("content-render-svg-el--responsive"), r.classList.remove("content-render-svg-el--fixed"), r.style.width = "100%", r.style.height = "auto", !r.style.aspectRatio && l > 0 && (r.style.aspectRatio = `${p} / ${l}`);
+      const [, , p, d] = h, f = r.getAttribute("width"), x = r.getAttribute("height"), w = (c) => {
+        if (!c) return !1;
+        const g = c.trim().toLowerCase();
+        return g === "auto" || g.endsWith("%");
+      }, C = !!f && f !== "0" && !w(f), R = !!x && x !== "0" && !w(x);
+      if (!C && !R) {
+        y = !0, r.classList.add("content-render-svg-el--responsive"), r.classList.remove("content-render-svg-el--fixed"), r.style.width = "100%", r.style.height = "auto", !r.style.aspectRatio && d > 0 && (r.style.aspectRatio = `${p} / ${d}`);
         return;
       }
-      u = !0, r.classList.add("content-render-svg-el--fixed"), r.classList.remove("content-render-svg-el--responsive"), !N && p > 0 && r.setAttribute("width", `${p}`), !m && l > 0 && r.setAttribute("height", `${l}`);
+      u = !0, r.classList.add("content-render-svg-el--fixed"), r.classList.remove("content-render-svg-el--responsive"), !C && p > 0 && r.setAttribute("width", `${p}`), !R && d > 0 && r.setAttribute("height", `${d}`);
     });
-    const j = b && !u;
-    o.classList.toggle("content-render-svg--responsive", j), o.classList.toggle("content-render-svg--fixed", !j);
-  }, [n]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: d }) });
-}, Ne = ({
-  content: n,
-  customRenderBar: d,
+    const N = y && !u;
+    o.classList.toggle("content-render-svg--responsive", N), o.classList.toggle("content-render-svg--fixed", !N);
+  }, [s]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: l }) });
+}, ce = [se, oe, U, ae], le = [
+  D,
+  te,
+  J,
+  [re, { languages: Q, subset: O }],
+  ne
+], P = ({ content: s, components: l }) => /* @__PURE__ */ t.jsx("div", { className: "markdown-renderer", children: /* @__PURE__ */ t.jsx(
+  ee,
+  {
+    remarkPlugins: ce,
+    rehypePlugins: le,
+    components: l,
+    children: s
+  }
+) }), He = ({
+  content: s,
+  customRenderBar: l,
   onSend: o,
   typingSpeed: a = 30,
-  enableTypewriter: g = !1,
+  enableTypewriter: b = !1,
   defaultButtonText: i,
-  defaultInputText: w,
-  defaultSelectedValues: v,
-  readonly: b = !1,
+  defaultInputText: T,
+  defaultSelectedValues: j,
+  readonly: y = !1,
   onTypeFinished: u,
-  confirmButtonText: j,
+  confirmButtonText: N,
   copyButtonText: r,
-  copiedButtonText: y,
-  onClickCustomButtonAfterContent: h,
-  beforeSend: p
+  copiedButtonText: k,
+  sandboxLoadingText: h,
+  sandboxStyleLoadingText: p,
+  sandboxScriptLoadingText: d,
+  sandboxFullscreenButtonText: f,
+  sandboxMode: x = "content",
+  onClickCustomButtonAfterContent: w,
+  beforeSend: C
   // tooltipMinLength,
 }) => {
-  const l = M(
-    () => F(n),
-    [n]
-  ), { displayContent: f, isComplete: x } = $({
-    // processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
-    // content: processMarkdownText(content),
-    content: l,
-    typingSpeed: a,
-    disabled: !g
-  }), N = {
+  const R = B(
+    () => H(s),
+    [s]
+  ), S = {
     "custom-button-after-content": ({
       children: e
     }) => /* @__PURE__ */ t.jsx(
       "button",
       {
         className: "content-render-custom-button-after-content",
-        onClick: h,
+        onClick: w,
         children: /* @__PURE__ */ t.jsx("span", { className: "content-render-custom-button-after-content-inner", children: e })
       }
     ),
     "custom-variable": (e) => /* @__PURE__ */ t.jsx(
-      T,
+      G,
       {
         ...e,
-        readonly: b,
+        readonly: y,
         defaultButtonText: i,
-        defaultInputText: w,
-        defaultSelectedValues: v,
+        defaultInputText: T,
+        defaultSelectedValues: j,
         onSend: o,
-        beforeSend: p,
-        confirmButtonText: j
+        beforeSend: C,
+        confirmButtonText: N
       }
     ),
     code: (e) => {
-      const { className: s, children: c, ...R } = e;
-      if (/language-(\w+)/.exec(s || "")?.[1] === "mermaid") {
-        const A = c?.toString().replace(/\n$/, "") || "", B = q(n, A);
-        return /* @__PURE__ */ t.jsx(L, { chart: A, frozen: B });
+      const { className: n, children: m, ...M } = e;
+      if (/language-(\w+)/.exec(n || "")?.[1] === "mermaid") {
+        const z = m?.toString().replace(/\n$/, "") || "", _ = Y(s, z);
+        return /* @__PURE__ */ t.jsx($, { chart: z, frozen: _ });
       }
-      return /* @__PURE__ */ t.jsx("code", { className: s, ...R, children: c });
+      return /* @__PURE__ */ t.jsx("code", { className: n, ...M, children: m });
     },
     table: ({ ...e }) => /* @__PURE__ */ t.jsx("div", { className: "content-render-table-container", children: /* @__PURE__ */ t.jsx("table", { className: "content-render-table", ...e }) }),
     th: ({ ...e }) => /* @__PURE__ */ t.jsx("th", { className: "content-render-th", ...e }),
     td: ({ ...e }) => /* @__PURE__ */ t.jsx("td", { className: "content-render-td", ...e }),
     tr: ({ ...e }) => /* @__PURE__ */ t.jsx("tr", { className: "content-render-tr", ...e }),
-    li: ({ node: e, ...s }) => {
-      const c = e?.properties?.className;
-      return typeof c == "string" && c.includes("task-list-item") || Array.isArray(c) && c.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...s }) : /* @__PURE__ */ t.jsx("li", { ...s });
+    li: ({ node: e, ...n }) => {
+      const m = e?.properties?.className;
+      return typeof m == "string" && m.includes("task-list-item") || Array.isArray(m) && m.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...n }) : /* @__PURE__ */ t.jsx("li", { ...n });
     },
     ol: ({ ...e }) => /* @__PURE__ */ t.jsx("ol", { className: "content-render-ol", ...e }),
     ul: ({ ...e }) => /* @__PURE__ */ t.jsx("ul", { className: "content-render-ul", ...e }),
@@ -130,64 +149,90 @@ const Y = ({ svg: n }) => {
         ...e
       }
     ) : /* @__PURE__ */ t.jsx("input", { ...e }),
-    a: ({ children: e, ...s }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...s, children: e }),
+    a: ({ children: e, ...n }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...n, children: e }),
     pre: (e) => /* @__PURE__ */ t.jsx(
-      H,
+      q,
       {
         ...e,
         copyButtonText: r,
-        copiedButtonText: y
+        copiedButtonText: k
       }
     )
-  }, m = S(!1);
-  k(() => {
-    x && !m.current && (m.current = !0, u?.());
-  }, [x, u]), k(() => {
-    m.current = !1;
-  }, [n]);
-  const C = W(f);
-  return /* @__PURE__ */ t.jsxs("div", { className: "content-render markdown-body", children: [
-    C.map((e, s) => {
+  }, { displayContent: c, isComplete: g } = K({
+    // processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
+    // content: processMarkdownText(content),
+    content: R,
+    typingSpeed: a,
+    disabled: !b
+  }), L = B(
+    () => E(s, !0),
+    [s]
+  );
+  console.log("renderSegments=====", s, L);
+  const v = L.some(
+    (e) => e.type === "sandbox"
+  ), W = B(
+    () => X(c),
+    [c]
+  ), A = V(!1);
+  return I(() => {
+    v || g && !A.current && (A.current = !0, u?.());
+  }, [v, g, u]), I(() => {
+    v || (A.current = !1);
+  }, [v, s]), v ? /* @__PURE__ */ t.jsx("div", { className: "content-render markdown-body", children: L.map(
+    (e, n) => e.type === "sandbox" ? /* @__PURE__ */ t.jsx(
+      Z,
+      {
+        hideFullScreen: !0,
+        content: e.value,
+        className: "content-render-iframe",
+        loadingText: h,
+        styleLoadingText: p,
+        scriptLoadingText: d,
+        fullScreenButtonText: f,
+        mode: x
+      },
+      `sandbox-${n}`
+    ) : /* @__PURE__ */ t.jsx(
+      P,
+      {
+        components: S,
+        content: H(e.value)
+      },
+      `md-${n}`
+    )
+  ) }) : /* @__PURE__ */ t.jsxs("div", { className: "content-render markdown-body", children: [
+    W.map((e, n) => {
       if (e.type === "text")
         return /* @__PURE__ */ t.jsx(
-          G,
+          P,
           {
-            remarkPlugins: [O, Q, z, X],
-            rehypePlugins: [
-              P,
-              K,
-              V,
-              [
-                D,
-                { languages: U, subset: _ }
-              ],
-              J
-            ],
-            components: N,
-            children: e.value
+            components: S,
+            content: e.value
           },
-          s
+          n
         );
       if (e.type === "mermaid")
         return /* @__PURE__ */ t.jsx(
-          L,
+          $,
           {
             chart: e.value,
             frozen: !e.complete
           },
-          s
+          n
         );
       if (e.type === "svg")
-        return /* @__PURE__ */ t.jsx(Y, { svg: e.value }, s);
+        return /* @__PURE__ */ t.jsx(ie, { svg: e.value }, n);
     }),
-    d && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: I.createElement(d, {
-      content: n,
-      displayContent: f,
+    l && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: F.createElement(l, {
+      content: s,
+      displayContent: c,
       onSend: o
     }) })
   ] });
 };
 export {
-  Ne as default
+  P as MarkdownRenderer,
+  He as default
 };
 //# sourceMappingURL=ContentRender.es.js.map