markdown-flow-ui 0.1.71 → 0.1.72-beta.1

package/dist/components/ContentRender/ContentRender.js

@@ -20,32 +20,32 @@ import F from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rema
 import J from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.js";
 import O from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.js";
 const Q = ({ svg: s }) => {
-  const n = x(null);
+  const a = x(null);
   return i(() => {
-    const a = n.current;
-    if (!a) return;
-    const m = a.shadowRoot ?? a.attachShadow({ mode: "open" });
+    const o = a.current;
+    if (!o) return;
+    const m = o.shadowRoot ?? o.attachShadow({ mode: "open" });
     m.innerHTML = s;
-  }, [s]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: n });
-}, ke = ({
+  }, [s]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: a });
+}, be = ({
   content: s,
-  customRenderBar: n,
-  onSend: a,
+  customRenderBar: a,
+  onSend: o,
   typingSpeed: m = 30,
   enableTypewriter: j = !1,
-  defaultButtonText: k,
-  defaultInputText: b,
+  defaultButtonText: b,
+  defaultInputText: k,
   defaultSelectedValues: g,
   readonly: N = !1,
   onTypeFinished: l,
   confirmButtonText: y,
-  copyButtonText: C,
-  copiedButtonText: v,
+  copyButtonText: v,
+  copiedButtonText: C,
   onClickCustomButtonAfterContent: w,
   beforeSend: R
   // tooltipMinLength,
 }) => {
-  const { displayContent: u, isComplete: p } = T({
+  const { displayContent: u, isComplete: d } = T({
     // processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
     // content: processMarkdownText(content),
     content: s,
@@ -59,7 +59,7 @@ const Q = ({ svg: s }) => {
       {
         className: "content-render-custom-button-after-content",
         onClick: w,
-        children: e
+        children: /* @__PURE__ */ t.jsx("span", { className: "content-render-custom-button-after-content-inner", children: e })
       }
     ),
     "custom-variable": (e) => /* @__PURE__ */ t.jsx(
@@ -67,29 +67,29 @@ const Q = ({ svg: s }) => {
       {
         ...e,
         readonly: N,
-        defaultButtonText: k,
-        defaultInputText: b,
+        defaultButtonText: b,
+        defaultInputText: k,
         defaultSelectedValues: g,
-        onSend: a,
+        onSend: o,
         beforeSend: R,
         confirmButtonText: y
       }
     ),
     code: (e) => {
-      const { className: r, children: o, ...d } = e;
+      const { className: r, children: n, ...p } = e;
       if (/language-(\w+)/.exec(r || "")?.[1] === "mermaid") {
-        const f = o?.toString().replace(/\n$/, "") || "", L = G(s, f);
+        const f = n?.toString().replace(/\n$/, "") || "", L = G(s, f);
         return /* @__PURE__ */ t.jsx(h, { chart: f, frozen: L });
       }
-      return /* @__PURE__ */ t.jsx("code", { className: r, ...d, children: o });
+      return /* @__PURE__ */ t.jsx("code", { className: r, ...p, children: n });
     },
     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, ...r }) => {
-      const o = e?.properties?.className;
-      return typeof o == "string" && o.includes("task-list-item") || Array.isArray(o) && o.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...r }) : /* @__PURE__ */ t.jsx("li", { ...r });
+      const n = e?.properties?.className;
+      return typeof n == "string" && n.includes("task-list-item") || Array.isArray(n) && n.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...r }) : /* @__PURE__ */ t.jsx("li", { ...r });
     },
     ol: ({ ...e }) => /* @__PURE__ */ t.jsx("ol", { className: "content-render-ol", ...e }),
     ul: ({ ...e }) => /* @__PURE__ */ t.jsx("ul", { className: "content-render-ul", ...e }),
@@ -107,14 +107,14 @@ const Q = ({ svg: s }) => {
       P,
       {
         ...e,
-        copyButtonText: C,
-        copiedButtonText: v
+        copyButtonText: v,
+        copiedButtonText: C
       }
     )
   }, c = x(!1);
   i(() => {
-    p && !c.current && (c.current = !0, l?.());
-  }, [p, l]), i(() => {
+    d && !c.current && (c.current = !0, l?.());
+  }, [d, l]), i(() => {
     c.current = !1;
   }, [s]);
   const I = H(u);
@@ -152,14 +152,14 @@ const Q = ({ svg: s }) => {
       if (e.type === "svg")
         return /* @__PURE__ */ t.jsx(Q, { svg: e.value }, r);
     }),
-    n && S.createElement(n, {
+    a && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: S.createElement(a, {
       content: s,
       displayContent: u,
-      onSend: a
-    })
+      onSend: o
+    }) })
   ] });
 };
 export {
-  ke as default
+  be as default
 };
 //# sourceMappingURL=ContentRender.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentRender.js","sources":["../../../src/components/ContentRender/ContentRender.tsx"],"sourcesContent":["import \"highlight.js/styles/github.css\";\nimport \"katex/dist/katex.min.css\";\nimport React, { useEffect, 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\";\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    shadowRoot.innerHTML = svg;\n  }, [svg]);\n\n  return <div className=\"content-render-svg\" ref={hostRef} />;\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  // 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: content,\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          {children}\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        React.createElement(customRenderBar, {\n          content,\n          displayContent,\n          onSend,\n        })}\n    </div>\n  );\n};\n\nexport default ContentRender;\n"],"names":["SvgBlockInShadow","svg","hostRef","useRef","useEffect","host","shadowRoot","jsx","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","onClickCustomButtonAfterContent","beforeSend","displayContent","isComplete","useTypewriterStateMachine","components","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","node","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.js","sources":["../../../src/components/ContentRender/ContentRender.tsx"],"sourcesContent":["import \"highlight.js/styles/github.css\";\nimport \"katex/dist/katex.min.css\";\nimport React, { useEffect, 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\";\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    shadowRoot.innerHTML = svg;\n  }, [svg]);\n\n  return <div className=\"content-render-svg\" ref={hostRef} />;\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  // 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: content,\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","jsx","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","onClickCustomButtonAfterContent","beforeSend","displayContent","isComplete","useTypewriterStateMachine","components","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","node","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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"}

package/dist/components/ui/inputGroup/textarea.js

@@ -1,7 +1,7 @@
 import { j as i } from "../../../_virtual/jsx-runtime.js";
 import * as d from "react";
 import n from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/TextArea.js";
-import "../../../_virtual/index4.js";
+import "../../../_virtual/index3.js";
 import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-resize-observer@1.4.3_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-resize-observer/es/index.js";
 import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useLayoutEffect.js";
 import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/raf.js";

package/package.json

@@ -149,7 +149,7 @@
     "storybook": "storybook dev -p 6006",
     "test": "echo \"No tests specified\" && exit 0"
   },
-  "version": "0.1.71",
+  "version": "0.1.72-beta.1",
   "type": "module",
   "exports": {
     ".": {