markdown-flow-ui 0.1.69-beta.8 → 0.1.70-beta.0

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 ContentBlackboard from \"./ContentBlackboard\";\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 ContentHtml from \"./ContentHtml\";\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  // Fullscreen button text for iframe rendering\n  fullscreenButtonText?: string;\n  beforeSend?: (param: OnSendContentParams) => boolean;\n  // Raw payload for content_html stream messages\n  contentHtmlPayload?: string;\n  // Content render type, blackboard will use ContentBlackboard for streaming chunks\n  contentType?: \"default\" | \"blackboard\";\n  // Render narration as caption overlay for blackboard streaming mode\n  renderNarrationAsCaption?: boolean;\n  // Maximum visible step number when using blackboard streaming mode (manual stepping)\n  maxVisibleStepNumber?: number;\n  // Visible step number for single-step display (non-accumulated)\n  visibleStepNumber?: number;\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  fullscreenButtonText,\n  onClickCustomButtonAfterContent,\n  beforeSend,\n  contentHtmlPayload,\n  contentType = \"default\",\n  renderNarrationAsCaption = false,\n  maxVisibleStepNumber,\n  visibleStepNumber,\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  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        if (seg.type === \"html\") {\n          return (\n            <ContentHtml\n              key={index}\n              html={seg.value}\n              fullscreenButtonText={fullscreenButtonText}\n            />\n          );\n        }\n\n        return null;\n      })}\n\n      {contentHtmlPayload &&\n        (contentType === \"blackboard\" ? (\n          <ContentBlackboard\n            payload={contentHtmlPayload}\n            renderNarrationAsCaption={renderNarrationAsCaption}\n            maxVisibleStepNumber={maxVisibleStepNumber}\n            visibleStepNumber={visibleStepNumber}\n          />\n        ) : (\n          <ContentHtml\n            payload={contentHtmlPayload}\n            fullscreenButtonText={fullscreenButtonText}\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","fullscreenButtonText","onClickCustomButtonAfterContent","beforeSend","contentHtmlPayload","contentType","renderNarrationAsCaption","maxVisibleStepNumber","visibleStepNumber","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","ContentHtml","ContentBlackboard","React"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
 import { StoryObj } from '@storybook/nextjs-vite';
+import { default as React } from 'react';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('./ContentRender').ContentRenderProps>;
+    component: React.FC<import('./ContentRender').ContentRenderProps>;
     parameters: {
         layout: string;
     };
@@ -11,6 +12,10 @@ declare const meta: {
             control: "text";
             description: string;
         };
+        fullscreenButtonText: {
+            control: "text";
+            description: string;
+        };
     };
     args: {
         content: string;
@@ -31,5 +36,11 @@ export declare const InteractiveMultiSelectDemo: Story;
 export declare const ChineseMultiSelectDemo: Story;
 export declare const NativeHtmlElements: Story;
 export declare const CodeBlockShowcase: Story;
+export declare const HtmlCodeBlockAsCode: Story;
 export declare const EnglishChineseTypographyPreview: Story;
 export declare const SVGDemo: Story;
+export declare const HtmlIframeDemo: Story;
+export declare const HtmlIframeWithLoading: Story;
+export declare const HtmlChunkStreaming: Story;
+export declare const HtmlChunkStreamingWithCaption: Story;
+export declare const HtmlChunkStreamingManual: Story;

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

@@ -4,4 +4,5 @@ export { default as ContentRender } from './ContentRender';
 export { default as MarkdownFlowInput } from './MarkdownFlowInput';
 export { default as useTypewriter } from './useTypewriter';
 export { default as useTypewriterStateMachine } from './useTypewriterStateMachine';
+export { default as ContentBlackboard } from './ContentBlackboard';
 export type { MarkdownFlowInputProps } from './MarkdownFlowInput';

package/dist/components/ContentRender/utils/content-html-stream.d.ts

@@ -0,0 +1,8 @@
+export type ContentHtmlStreamChunk = {
+    html: string;
+    narration?: string;
+    stepNumber: number;
+    isComplete: boolean;
+    blockIndex: number;
+};
+export declare const parseContentHtmlStreamChunk: (payload: string) => ContentHtmlStreamChunk | null;

package/dist/components/ContentRender/utils/content-html-stream.js

@@ -0,0 +1,18 @@
+const p = (c) => {
+  try {
+    const n = JSON.parse(c), e = typeof n == "object" && n !== null ? n : null, t = typeof e?.data == "object" && e?.data !== null ? e.data : e, r = t?.html, o = t?.narration, a = t?.step_number ?? t?.stepNumber, s = t?.is_complete ?? t?.isComplete, l = t?.block_index ?? t?.blockIndex ?? 0;
+    return typeof r != "string" || typeof a != "number" || typeof s != "boolean" || typeof l != "number" ? null : {
+      html: r,
+      narration: typeof o == "string" && o.trim() ? o : void 0,
+      stepNumber: a,
+      isComplete: s,
+      blockIndex: l
+    };
+  } catch {
+    return null;
+  }
+};
+export {
+  p as parseContentHtmlStreamChunk
+};
+//# sourceMappingURL=content-html-stream.js.map

package/dist/components/ContentRender/utils/content-html-stream.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-html-stream.js","sources":["../../../../src/components/ContentRender/utils/content-html-stream.ts"],"sourcesContent":["export type ContentHtmlStreamChunk = {\n  html: string;\n  narration?: string;\n  stepNumber: number;\n  isComplete: boolean;\n  blockIndex: number;\n};\n\nexport const parseContentHtmlStreamChunk = (\n  payload: string\n): ContentHtmlStreamChunk | null => {\n  try {\n    const parsed = JSON.parse(payload);\n    const source =\n      typeof parsed === \"object\" && parsed !== null ? parsed : null;\n    const maybeData =\n      typeof source?.data === \"object\" && source?.data !== null\n        ? source.data\n        : source;\n\n    const html = maybeData?.html;\n    const narration = maybeData?.narration;\n    const stepNumber = maybeData?.step_number ?? maybeData?.stepNumber;\n    const isComplete = maybeData?.is_complete ?? maybeData?.isComplete;\n    const blockIndex = maybeData?.block_index ?? maybeData?.blockIndex ?? 0;\n\n    if (\n      typeof html !== \"string\" ||\n      typeof stepNumber !== \"number\" ||\n      typeof isComplete !== \"boolean\" ||\n      typeof blockIndex !== \"number\"\n    ) {\n      return null;\n    }\n\n    return {\n      html,\n      narration:\n        typeof narration === \"string\" && narration.trim()\n          ? narration\n          : undefined,\n      stepNumber,\n      isComplete,\n      blockIndex,\n    };\n  } catch {\n    return null;\n  }\n};\n"],"names":["parseContentHtmlStreamChunk","payload","parsed","source","maybeData","html","narration","stepNumber","isComplete","blockIndex"],"mappings":"AAQO,MAAMA,IAA8B,CACzCC,MACkC;AAClC,MAAI;AACF,UAAMC,IAAS,KAAK,MAAMD,CAAO,GAC3BE,IACJ,OAAOD,KAAW,YAAYA,MAAW,OAAOA,IAAS,MACrDE,IACJ,OAAOD,GAAQ,QAAS,YAAYA,GAAQ,SAAS,OACjDA,EAAO,OACPA,GAEAE,IAAOD,GAAW,MAClBE,IAAYF,GAAW,WACvBG,IAAaH,GAAW,eAAeA,GAAW,YAClDI,IAAaJ,GAAW,eAAeA,GAAW,YAClDK,IAAaL,GAAW,eAAeA,GAAW,cAAc;AAEtE,WACE,OAAOC,KAAS,YAChB,OAAOE,KAAe,YACtB,OAAOC,KAAe,aACtB,OAAOC,KAAe,WAEf,OAGF;AAAA,MACL,MAAAJ;AAAA,MACA,WACE,OAAOC,KAAc,YAAYA,EAAU,KAAA,IACvCA,IACA;AAAA,MACN,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,IAAA;AAAA,EAEJ,QAAQ;AACN,WAAO;AAAA,EACT;AACF;"}

package/dist/components/ContentRender/utils/highlight-languages.js

@@ -1,25 +1,25 @@
-import o from "../../../node_modules/highlight.js/es/languages/javascript.js";
-import m from "../../../node_modules/highlight.js/es/languages/typescript.js";
-import r from "../../../node_modules/highlight.js/es/languages/python.js";
-import i from "../../../node_modules/highlight.js/es/languages/java.js";
-import t from "../../../node_modules/highlight.js/es/languages/xml.js";
-import a from "../../../node_modules/highlight.js/es/languages/css.js";
-import f from "../../../node_modules/highlight.js/es/languages/json.js";
-import p from "../../../node_modules/highlight.js/es/languages/bash.js";
-import l from "../../../node_modules/highlight.js/es/languages/sql.js";
-import s from "../../../node_modules/highlight.js/es/languages/markdown.js";
-import h from "../../../node_modules/highlight.js/es/languages/c.js";
-import c from "../../../node_modules/highlight.js/es/languages/cpp.js";
-import e from "../../../node_modules/highlight.js/es/languages/go.js";
-import n from "../../../node_modules/highlight.js/es/languages/plaintext.js";
-import g from "../../../node_modules/highlight.js/es/languages/rust.js";
-import j from "../../../node_modules/highlight.js/es/languages/shell.js";
-import u from "../../../node_modules/highlight.js/es/languages/scss.js";
-import x from "../../../node_modules/highlight.js/es/languages/yaml.js";
-import y from "../../../node_modules/highlight.js/es/languages/vhdl.js";
-import v from "../../../node_modules/highlight.js/es/languages/latex.js";
-import d from "../../../node_modules/highlight.js/es/languages/lua.js";
-import b from "../../../node_modules/highlight.js/es/languages/php.js";
+import o from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/javascript.js";
+import m from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/typescript.js";
+import r from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/python.js";
+import i from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/java.js";
+import t from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/xml.js";
+import a from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/css.js";
+import f from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/json.js";
+import p from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/bash.js";
+import l from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/sql.js";
+import s from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/markdown.js";
+import h from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/c.js";
+import c from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/cpp.js";
+import e from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/go.js";
+import n from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/plaintext.js";
+import g from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/rust.js";
+import j from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/shell.js";
+import u from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/scss.js";
+import x from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/yaml.js";
+import y from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/vhdl.js";
+import v from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/latex.js";
+import d from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/lua.js";
+import b from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/languages/php.js";
 const S = {
   javascript: o,
   js: o,

package/dist/components/ContentRender/utils/mermaid-parse.d.ts

@@ -9,6 +9,10 @@ export declare function parseMarkdownSegments(markdown: string): ({
     type: "svg";
     value: string;
     complete: boolean;
+} | {
+    type: "html";
+    value: string;
+    complete: boolean;
 })[];
 export declare function parseMermaidBlocks(fullMarkdown: string): {
     code: string;

package/dist/components/ContentRender/utils/mermaid-parse.js

@@ -1,96 +1,143 @@
-function d(e) {
-  const t = [], n = /```[\s\S]*?```|<svg[\s\S]*?<\/svg>/g;
-  let s = 0, i;
-  for (; (i = n.exec(e)) !== null; ) {
-    const u = i.index, a = n.lastIndex, r = i[0];
-    if (u > s && t.push({
+function B(s) {
+  const e = [], u = (c) => {
+    const r = /```/g;
+    let l, n = !1;
+    for (; (l = r.exec(s)) !== null && l.index < c; )
+      n = !n;
+    return n;
+  }, o = /```[\s\S]*?```|<!DOCTYPE html[\s\S]*?<\/html>|<html[\s\S]*?<\/html>|<svg[\s\S]*?<\/svg>/gi;
+  let t = 0, i;
+  for (; (i = o.exec(s)) !== null; ) {
+    const c = i.index, r = o.lastIndex, l = i[0];
+    if (c > t && e.push({
       type: "text",
-      value: e.slice(s, u)
-    }), r.startsWith("```mermaid")) {
-      const f = r.replace(/^```mermaid/, "").replace(/```$/, "").trim();
-      t.push({
+      value: s.slice(t, c)
+    }), l.startsWith("```mermaid")) {
+      const n = l.replace(/^```mermaid/, "").replace(/```$/, "").trim();
+      e.push({
         type: "mermaid",
-        value: f,
+        value: n,
         complete: !0
       });
-    } else r.startsWith("```") ? t.push({
-      type: "text",
-      value: r
-    }) : t.push({
-      type: "svg",
-      value: r,
-      complete: !0
-    });
-    s = a;
+    } else if (l.startsWith("```"))
+      e.push({
+        type: "text",
+        value: l
+      });
+    else if (/^<svg/i.test(l)) {
+      if (u(c)) {
+        e.push({
+          type: "text",
+          value: l
+        }), t = r;
+        continue;
+      }
+      e.push({
+        type: "svg",
+        value: l,
+        complete: !0
+      });
+    } else {
+      if (u(c)) {
+        e.push({
+          type: "text",
+          value: l
+        }), t = r;
+        continue;
+      }
+      e.push({
+        type: "html",
+        value: l,
+        complete: !0
+      });
+    }
+    t = r;
   }
-  let l = e.lastIndexOf("<svg");
-  const c = e.lastIndexOf("</svg>");
-  (l === -1 || c !== -1 && c > l) && (e.endsWith("<sv") ? l = e.length - 3 : e.endsWith("<s") && (l = e.length - 2));
-  const o = e.indexOf("```", s);
-  if (!(o !== -1 && o < l) && l !== -1 && (c === -1 || c < l) && l >= s)
-    return l > s && t.push({
+  const p = s.indexOf("```", t), a = s.toLowerCase(), d = (c, r, l) => {
+    let n = a.lastIndexOf(c);
+    const f = a.lastIndexOf(r);
+    if (n === -1 || f !== -1 && f > n) {
+      const v = l.find(
+        (I) => a.endsWith(I)
+      );
+      v && (n = s.length - v.length);
+    }
+    return !(p !== -1 && p < n) && n !== -1 && (f === -1 || f < n) && n >= t ? n : -1;
+  }, x = d("<html", "</html>", [
+    "<htm",
+    "<ht"
+  ]), g = d("<svg", "</svg>", [
+    "<sv",
+    "<s"
+  ]), h = Math.max(x, g);
+  if (h !== -1)
+    return h > t && e.push({
       type: "text",
-      value: e.slice(s, l)
-    }), t.push({
+      value: s.slice(t, h)
+    }), h === x ? e.push({
+      type: "html",
+      value: s.slice(h),
+      complete: !1
+    }) : e.push({
       type: "svg",
-      value: e.slice(l),
+      value: s.slice(h),
       complete: !1
-    }), t;
-  const p = e.lastIndexOf("```mermaid");
-  if (p !== -1 && p >= s && // Ensure this mermaid block isn't inside another code block (unlikely but safe to check)
+    }), e;
+  const m = s.lastIndexOf("```mermaid");
+  if (m !== -1 && m >= t && // Ensure this mermaid block isn't inside another code block (unlikely but safe to check)
   // Actually, incompleteCodeBlockStart would capture this "```mermaid" as just "```"
   // so we need to be careful.
   // If incompleteCodeBlockStart points to THIS mermaid block, we process it as mermaid.
-  p === o) {
-    const u = e.slice(p + 10);
-    return t.push({
+  m === p) {
+    const c = s.slice(m + 10);
+    return e.push({
       type: "mermaid",
-      value: u.trim(),
+      value: c.trim(),
       complete: !1
-    }), p > s && t.push({
+    }), m > t && e.push({
       type: "text",
-      value: e.slice(s, p)
-    }), t;
+      value: s.slice(t, m)
+    }), e;
   }
-  return s < e.length && t.push({
+  return t < s.length && e.push({
     type: "text",
-    value: e.slice(s)
-  }), t;
+    value: s.slice(t)
+  }), e;
 }
-function h(e) {
-  const t = [], n = e.split(/\r?\n/);
-  let s = !1, i = [], l = 0;
-  return n.forEach((c, o) => {
-    if (!s) {
-      c.trim().startsWith("```mermaid") && (s = !0, l = o, i = []);
+function y(s) {
+  const e = [], u = s.split(/\r?\n/);
+  let o = !1, t = [], i = 0;
+  return u.forEach((p, a) => {
+    if (!o) {
+      p.trim().startsWith("```mermaid") && (o = !0, i = a, t = []);
       return;
     }
-    if (c.trim() === "```") {
-      t.push({
-        code: i.join(`
+    if (p.trim() === "```") {
+      e.push({
+        code: t.join(`
 `).trim(),
-        startLine: l,
-        endLine: o,
+        startLine: i,
+        endLine: a,
         complete: !0
-      }), s = !1;
+      }), o = !1;
       return;
     }
-    i.push(c);
-  }), s && t.push({
-    code: i.join(`
+    t.push(p);
+  }), o && e.push({
+    code: t.join(`
 `).trim(),
-    startLine: l,
+    startLine: i,
     endLine: null,
     complete: !1
-  }), t;
+  }), e;
 }
-function g(e, t) {
-  const n = t.trim(), i = h(e).find((l) => l.code === n);
-  return i ? i.complete : !1;
+function M(s, e) {
+  const u = e.trim(), t = y(s).find((i) => i.code === u);
+  return t ? t.complete : !1;
 }
 export {
-  g as mermaidBlockIsComplete,
-  d as parseMarkdownSegments,
-  h as parseMermaidBlocks
+  M as mermaidBlockIsComplete,
+  B as parseMarkdownSegments,
+  y as parseMermaidBlocks
 };
 //# sourceMappingURL=mermaid-parse.js.map

package/dist/components/ContentRender/utils/mermaid-parse.js.map

@@ -1 +1 @@
-{"version":3,"file":"mermaid-parse.js","sources":["../../../../src/components/ContentRender/utils/mermaid-parse.ts"],"sourcesContent":["export function parseMarkdownSegments(markdown: string) {\n  const segments: Array<\n    | { type: \"text\"; value: string }\n    | { type: \"mermaid\"; value: string; complete: boolean }\n    | { type: \"svg\"; value: string; complete: boolean }\n  > = [];\n\n  // Match:\n  // 1. Generic code blocks (including mermaid): ``` ... ```\n  // 2. SVG blocks: <svg ... </svg>\n  const regex = /```[\\s\\S]*?```|<svg[\\s\\S]*?<\\/svg>/g;\n\n  let lastIndex = 0;\n  let match;\n\n  while ((match = regex.exec(markdown)) !== null) {\n    const start = match.index;\n    const end = regex.lastIndex;\n    const rawMatch = match[0];\n\n    // Preceding plain text\n    if (start > lastIndex) {\n      segments.push({\n        type: \"text\",\n        value: markdown.slice(lastIndex, start),\n      });\n    }\n\n    // Complete mermaid block, generic code block, or svg block\n    if (rawMatch.startsWith(\"```mermaid\")) {\n      const code = rawMatch\n        .replace(/^```mermaid/, \"\")\n        .replace(/```$/, \"\")\n        .trim();\n      segments.push({\n        type: \"mermaid\",\n        value: code,\n        complete: true,\n      });\n    } else if (rawMatch.startsWith(\"```\")) {\n      // Generic code block - treat as text so ReactMarkdown renders it\n      segments.push({\n        type: \"text\",\n        value: rawMatch,\n      });\n    } else {\n      // SVG block\n      segments.push({\n        type: \"svg\",\n        value: rawMatch,\n        complete: true,\n      });\n    }\n\n    lastIndex = end;\n  }\n\n  // Handle unfinished svg block to avoid leaking raw tags while streaming\n  let incompleteSvgStart = markdown.lastIndexOf(\"<svg\");\n  const lastSvgClose = markdown.lastIndexOf(\"</svg>\");\n\n  // If we haven't found an open <svg tag (or the last one is closed),\n  // check if the string ends with a partial <svg tag (<s, <sv).\n  if (\n    incompleteSvgStart === -1 ||\n    (lastSvgClose !== -1 && lastSvgClose > incompleteSvgStart)\n  ) {\n    if (markdown.endsWith(\"<sv\")) {\n      incompleteSvgStart = markdown.length - 3;\n    } else if (markdown.endsWith(\"<s\")) {\n      incompleteSvgStart = markdown.length - 2;\n    }\n  }\n\n  // Check if we are inside an unclosed code block\n  // If an unclosed code block starts AFTER the last complete segment (lastIndex),\n  // and BEFORE the potential SVG start, then the SVG is inside the code block.\n  const incompleteCodeBlockStart = markdown.indexOf(\"```\", lastIndex);\n  const isInsideCodeBlock =\n    incompleteCodeBlockStart !== -1 &&\n    incompleteCodeBlockStart < incompleteSvgStart;\n\n  const hasIncompleteSvg =\n    !isInsideCodeBlock &&\n    incompleteSvgStart !== -1 &&\n    (lastSvgClose === -1 || lastSvgClose < incompleteSvgStart) &&\n    incompleteSvgStart >= lastIndex;\n\n  if (hasIncompleteSvg) {\n    if (incompleteSvgStart > lastIndex) {\n      segments.push({\n        type: \"text\",\n        value: markdown.slice(lastIndex, incompleteSvgStart),\n      });\n    }\n\n    segments.push({\n      type: \"svg\",\n      value: markdown.slice(incompleteSvgStart),\n      complete: false,\n    });\n    return segments;\n  }\n\n  // Check whether there is an unfinished mermaid block\n  // Only if we are NOT inside a generic incomplete code block that started earlier\n  // Actually, standard mermaid block starts with ```mermaid, so it IS a code block start.\n  // We just need to check if it's specifically mermaid.\n  const incompleteStart = markdown.lastIndexOf(\"```mermaid\");\n  if (\n    incompleteStart !== -1 &&\n    incompleteStart >= lastIndex &&\n    // Ensure this mermaid block isn't inside another code block (unlikely but safe to check)\n    // Actually, incompleteCodeBlockStart would capture this \"```mermaid\" as just \"```\"\n    // so we need to be careful.\n    // If incompleteCodeBlockStart points to THIS mermaid block, we process it as mermaid.\n    incompleteStart === incompleteCodeBlockStart\n  ) {\n    const code = markdown.slice(incompleteStart + 10);\n    segments.push({\n      type: \"mermaid\",\n      value: code.trim(),\n      complete: false,\n    });\n\n    if (incompleteStart > lastIndex) {\n      segments.push({\n        type: \"text\",\n        value: markdown.slice(lastIndex, incompleteStart),\n      });\n    }\n\n    return segments;\n  }\n\n  // Remaining text\n  if (lastIndex < markdown.length) {\n    segments.push({\n      type: \"text\",\n      value: markdown.slice(lastIndex),\n    });\n  }\n\n  return segments;\n}\n\nexport function parseMermaidBlocks(fullMarkdown: string) {\n  const blocks = [];\n  const lines: string[] = fullMarkdown.split(/\\r?\\n/);\n\n  let inside = false;\n  let current: string[] = [];\n  let startLine = 0;\n\n  lines.forEach((line, index) => {\n    if (!inside) {\n      if (line.trim().startsWith(\"```mermaid\")) {\n        inside = true;\n        startLine = index;\n        current = [];\n      }\n      return;\n    }\n\n    // inside mermaid mode\n    if (line.trim() === \"```\") {\n      // block complete\n      blocks.push({\n        code: current.join(\"\\n\").trim(),\n        startLine,\n        endLine: index,\n        complete: true,\n      });\n      inside = false;\n      return;\n    }\n\n    current.push(line);\n  });\n\n  // if still inside → incomplete block\n  if (inside) {\n    blocks.push({\n      code: current.join(\"\\n\").trim(),\n      startLine,\n      endLine: null,\n      complete: false,\n    });\n  }\n\n  return blocks;\n}\n\n/**\n * Determine whether the mermaid block for the given codeString is fully closed.\n * @param fullMarkdown Full markdown text (grows over time in streaming scenarios)\n * @param codeString Mermaid block code passed to the renderer (children)\n */\nexport function mermaidBlockIsComplete(\n  fullMarkdown: string,\n  codeString: string\n) {\n  const cleaned = codeString.trim();\n  const blocks = parseMermaidBlocks(fullMarkdown);\n  // Locate the block that matches the current codeString\n  const block = blocks.find((b) => b.code === cleaned);\n\n  if (!block) return false;\n\n  // Block is complete when the closing fence already exists\n  return block.complete;\n}\n"],"names":["parseMarkdownSegments","markdown","segments","regex","lastIndex","match","start","end","rawMatch","code","incompleteSvgStart","lastSvgClose","incompleteCodeBlockStart","incompleteStart","parseMermaidBlocks","fullMarkdown","blocks","lines","inside","current","startLine","line","index","mermaidBlockIsComplete","codeString","cleaned","block","b"],"mappings":"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"}
+{"version":3,"file":"mermaid-parse.js","sources":["../../../../src/components/ContentRender/utils/mermaid-parse.ts"],"sourcesContent":["export function parseMarkdownSegments(markdown: string) {\n  const segments: Array<\n    | { type: \"text\"; value: string }\n    | { type: \"mermaid\"; value: string; complete: boolean }\n    | { type: \"svg\"; value: string; complete: boolean }\n    | { type: \"html\"; value: string; complete: boolean }\n  > = [];\n\n  const isInsideCodeFence = (position: number) => {\n    const fenceRegex = /```/g;\n    let matchFence;\n    let inside = false;\n    while (\n      (matchFence = fenceRegex.exec(markdown)) !== null &&\n      matchFence.index < position\n    ) {\n      inside = !inside;\n    }\n    return inside;\n  };\n\n  // Match:\n  // 1. Generic code blocks (including mermaid): ``` ... ```\n  // 2. SVG blocks: <svg ... </svg>\n  // 3. Full HTML documents: <!DOCTYPE html> ... </html> or <html ... </html>\n  const regex =\n    /```[\\s\\S]*?```|<!DOCTYPE html[\\s\\S]*?<\\/html>|<html[\\s\\S]*?<\\/html>|<svg[\\s\\S]*?<\\/svg>/gi;\n\n  let lastIndex = 0;\n  let match;\n\n  while ((match = regex.exec(markdown)) !== null) {\n    const start = match.index;\n    const end = regex.lastIndex;\n    const rawMatch = match[0];\n\n    // Preceding plain text\n    if (start > lastIndex) {\n      segments.push({\n        type: \"text\",\n        value: markdown.slice(lastIndex, start),\n      });\n    }\n\n    // Complete mermaid block, generic code block, or svg block\n    if (rawMatch.startsWith(\"```mermaid\")) {\n      const code = rawMatch\n        .replace(/^```mermaid/, \"\")\n        .replace(/```$/, \"\")\n        .trim();\n      segments.push({\n        type: \"mermaid\",\n        value: code,\n        complete: true,\n      });\n    } else if (rawMatch.startsWith(\"```\")) {\n      // Generic code block - treat as text so ReactMarkdown renders it\n      segments.push({\n        type: \"text\",\n        value: rawMatch,\n      });\n    } else if (/^<svg/i.test(rawMatch)) {\n      if (isInsideCodeFence(start)) {\n        segments.push({\n          type: \"text\",\n          value: rawMatch,\n        });\n        lastIndex = end;\n        continue;\n      }\n      // SVG block\n      segments.push({\n        type: \"svg\",\n        value: rawMatch,\n        complete: true,\n      });\n    } else {\n      if (isInsideCodeFence(start)) {\n        segments.push({\n          type: \"text\",\n          value: rawMatch,\n        });\n        lastIndex = end;\n        continue;\n      }\n      // HTML block\n      segments.push({\n        type: \"html\",\n        value: rawMatch,\n        complete: true,\n      });\n    }\n\n    lastIndex = end;\n  }\n\n  // Check if we are inside an unclosed code block\n  // If an unclosed code block starts AFTER the last complete segment (lastIndex),\n  // and BEFORE the potential SVG start, then the SVG is inside the code block.\n  const incompleteCodeBlockStart = markdown.indexOf(\"```\", lastIndex);\n  const lowerMarkdown = markdown.toLowerCase();\n\n  const findIncompleteBlockStart = (\n    openTag: string,\n    closeTag: string,\n    partialEndings: string[]\n  ) => {\n    let openIndex = lowerMarkdown.lastIndexOf(openTag);\n    const closeIndex = lowerMarkdown.lastIndexOf(closeTag);\n\n    if (openIndex === -1 || (closeIndex !== -1 && closeIndex > openIndex)) {\n      const partial = partialEndings.find((ending) =>\n        lowerMarkdown.endsWith(ending)\n      );\n      if (partial) {\n        openIndex = markdown.length - partial.length;\n      }\n    }\n\n    const isInsideCodeBlock =\n      incompleteCodeBlockStart !== -1 && incompleteCodeBlockStart < openIndex;\n\n    const hasIncomplete =\n      !isInsideCodeBlock &&\n      openIndex !== -1 &&\n      (closeIndex === -1 || closeIndex < openIndex) &&\n      openIndex >= lastIndex;\n\n    return hasIncomplete ? openIndex : -1;\n  };\n\n  const incompleteHtmlStart = findIncompleteBlockStart(\"<html\", \"</html>\", [\n    \"<htm\",\n    \"<ht\",\n  ]);\n  const incompleteSvgStart = findIncompleteBlockStart(\"<svg\", \"</svg>\", [\n    \"<sv\",\n    \"<s\",\n  ]);\n\n  const nextIncompleteStart = Math.max(incompleteHtmlStart, incompleteSvgStart);\n\n  if (nextIncompleteStart !== -1) {\n    if (nextIncompleteStart > lastIndex) {\n      segments.push({\n        type: \"text\",\n        value: markdown.slice(lastIndex, nextIncompleteStart),\n      });\n    }\n\n    if (nextIncompleteStart === incompleteHtmlStart) {\n      segments.push({\n        type: \"html\",\n        value: markdown.slice(nextIncompleteStart),\n        complete: false,\n      });\n    } else {\n      segments.push({\n        type: \"svg\",\n        value: markdown.slice(nextIncompleteStart),\n        complete: false,\n      });\n    }\n    return segments;\n  }\n\n  // Check whether there is an unfinished mermaid block\n  // Only if we are NOT inside a generic incomplete code block that started earlier\n  // Actually, standard mermaid block starts with ```mermaid, so it IS a code block start.\n  // We just need to check if it's specifically mermaid.\n  const incompleteStart = markdown.lastIndexOf(\"```mermaid\");\n  if (\n    incompleteStart !== -1 &&\n    incompleteStart >= lastIndex &&\n    // Ensure this mermaid block isn't inside another code block (unlikely but safe to check)\n    // Actually, incompleteCodeBlockStart would capture this \"```mermaid\" as just \"```\"\n    // so we need to be careful.\n    // If incompleteCodeBlockStart points to THIS mermaid block, we process it as mermaid.\n    incompleteStart === incompleteCodeBlockStart\n  ) {\n    const code = markdown.slice(incompleteStart + 10);\n    segments.push({\n      type: \"mermaid\",\n      value: code.trim(),\n      complete: false,\n    });\n\n    if (incompleteStart > lastIndex) {\n      segments.push({\n        type: \"text\",\n        value: markdown.slice(lastIndex, incompleteStart),\n      });\n    }\n\n    return segments;\n  }\n\n  // Remaining text\n  if (lastIndex < markdown.length) {\n    segments.push({\n      type: \"text\",\n      value: markdown.slice(lastIndex),\n    });\n  }\n\n  return segments;\n}\n\nexport function parseMermaidBlocks(fullMarkdown: string) {\n  const blocks = [];\n  const lines: string[] = fullMarkdown.split(/\\r?\\n/);\n\n  let inside = false;\n  let current: string[] = [];\n  let startLine = 0;\n\n  lines.forEach((line, index) => {\n    if (!inside) {\n      if (line.trim().startsWith(\"```mermaid\")) {\n        inside = true;\n        startLine = index;\n        current = [];\n      }\n      return;\n    }\n\n    // inside mermaid mode\n    if (line.trim() === \"```\") {\n      // block complete\n      blocks.push({\n        code: current.join(\"\\n\").trim(),\n        startLine,\n        endLine: index,\n        complete: true,\n      });\n      inside = false;\n      return;\n    }\n\n    current.push(line);\n  });\n\n  // if still inside → incomplete block\n  if (inside) {\n    blocks.push({\n      code: current.join(\"\\n\").trim(),\n      startLine,\n      endLine: null,\n      complete: false,\n    });\n  }\n\n  return blocks;\n}\n\n/**\n * Determine whether the mermaid block for the given codeString is fully closed.\n * @param fullMarkdown Full markdown text (grows over time in streaming scenarios)\n * @param codeString Mermaid block code passed to the renderer (children)\n */\nexport function mermaidBlockIsComplete(\n  fullMarkdown: string,\n  codeString: string\n) {\n  const cleaned = codeString.trim();\n  const blocks = parseMermaidBlocks(fullMarkdown);\n  // Locate the block that matches the current codeString\n  const block = blocks.find((b) => b.code === cleaned);\n\n  if (!block) return false;\n\n  // Block is complete when the closing fence already exists\n  return block.complete;\n}\n"],"names":["parseMarkdownSegments","markdown","segments","isInsideCodeFence","position","fenceRegex","matchFence","inside","regex","lastIndex","match","start","end","rawMatch","code","incompleteCodeBlockStart","lowerMarkdown","findIncompleteBlockStart","openTag","closeTag","partialEndings","openIndex","closeIndex","partial","ending","incompleteHtmlStart","incompleteSvgStart","nextIncompleteStart","incompleteStart","parseMermaidBlocks","fullMarkdown","blocks","lines","current","startLine","line","index","mermaidBlockIsComplete","codeString","cleaned","block","b"],"mappings":"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"}

package/dist/components/MarkdownFlow/MarkdownFlow.d.ts

@@ -11,6 +11,12 @@ export interface MarkdownFlowProps {
         customRenderBar?: CustomRenderBarProps;
         onClickCustomButtonAfterContent?: () => void;
         dynamicInteractionFormat?: string;
+        fullscreenButtonText?: string;
+        contentHtmlPayload?: string;
+        contentType?: "default" | "blackboard";
+        renderNarrationAsCaption?: boolean;
+        maxVisibleStepNumber?: number;
+        visibleStepNumber?: number;
     }[];
     customRenderBar?: CustomRenderBarProps;
     onSend?: (content: OnSendContentParams) => void;
@@ -21,6 +27,7 @@ export interface MarkdownFlowProps {
     copyButtonText?: string;
     copiedButtonText?: string;
     beforeSend?: (content: OnSendContentParams) => boolean;
+    fullscreenButtonText?: string;
 }
 declare const MarkdownFlow: React.FC<MarkdownFlowProps>;
 export default MarkdownFlow;

package/dist/components/MarkdownFlow/MarkdownFlow.js

@@ -1,22 +1,23 @@
-import { j as o } from "../../_virtual/jsx-runtime.js";
+import { j as a } from "../../_virtual/jsx-runtime.js";
 import B from "../ContentRender/ContentRender.js";
 import "../ui/inputGroup/input-group.js";
 import "react";
 /* empty css                 */
-const b = ({
-  initialContentList: a = [],
-  customRenderBar: d,
-  onSend: n,
-  typingSpeed: i,
-  enableTypewriter: s = !1,
-  onBlockComplete: l,
-  confirmButtonText: u,
+const v = ({
+  initialContentList: i = [],
+  customRenderBar: l,
+  onSend: s,
+  typingSpeed: d,
+  enableTypewriter: o = !1,
+  onBlockComplete: u,
+  confirmButtonText: n,
   copyButtonText: m,
   copiedButtonText: p,
-  beforeSend: c
-}) => /* @__PURE__ */ o.jsx("div", { className: "markdown-flow", children: a.map((e, r) => {
-  const t = e.isFinished ?? !1, y = !t && s, f = t ? void 0 : n, x = t ? void 0 : i, S = c ?? (() => !0);
-  return /* @__PURE__ */ o.jsx(
+  beforeSend: c,
+  fullscreenButtonText: y
+}) => /* @__PURE__ */ a.jsx("div", { className: "markdown-flow", children: i.map((e, r) => {
+  const t = e.isFinished ?? !1, b = !t && o, x = t ? void 0 : s, S = t ? void 0 : d, T = c ?? (() => !0);
+  return /* @__PURE__ */ a.jsx(
     B,
     {
       content: e.content,
@@ -24,24 +25,30 @@ const b = ({
       defaultButtonText: e.defaultButtonText,
       defaultSelectedValues: e.defaultSelectedValues,
       readonly: e.readonly,
-      enableTypewriter: y,
-      customRenderBar: e.customRenderBar || d,
-      onSend: f,
-      beforeSend: S,
+      enableTypewriter: b,
+      customRenderBar: e.customRenderBar || l,
+      onSend: x,
+      beforeSend: T,
       onClickCustomButtonAfterContent: e.onClickCustomButtonAfterContent,
-      typingSpeed: x,
-      confirmButtonText: u,
+      typingSpeed: S,
+      confirmButtonText: n,
       copyButtonText: m,
       copiedButtonText: p,
       dynamicInteractionFormat: e.dynamicInteractionFormat,
+      fullscreenButtonText: e.fullscreenButtonText || y,
+      contentHtmlPayload: e.contentHtmlPayload,
+      contentType: e.contentType,
+      renderNarrationAsCaption: e.renderNarrationAsCaption,
+      maxVisibleStepNumber: e.maxVisibleStepNumber,
+      visibleStepNumber: e.visibleStepNumber,
       onTypeFinished: () => {
-        l?.(r);
+        u?.(r);
       }
     },
     r
   );
 }) });
 export {
-  b as default
+  v as default
 };
 //# sourceMappingURL=MarkdownFlow.js.map

package/dist/components/MarkdownFlow/MarkdownFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownFlow.js","sources":["../../../src/components/MarkdownFlow/MarkdownFlow.tsx"],"sourcesContent":["import React from \"react\";\nimport ContentRender from \"../ContentRender\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./markdownFlow.css\";\n\nexport interface MarkdownFlowProps {\n  initialContentList?: {\n    content: string;\n    isFinished?: boolean;\n    defaultInputText?: string;\n    defaultButtonText?: string;\n    defaultSelectedValues?: string[];\n    readonly?: boolean;\n    customRenderBar?: CustomRenderBarProps;\n    onClickCustomButtonAfterContent?: () => void;\n    dynamicInteractionFormat?: string;\n  }[];\n  customRenderBar?: CustomRenderBarProps;\n  onSend?: (content: OnSendContentParams) => void;\n  typingSpeed?: number;\n  enableTypewriter?: boolean;\n  onBlockComplete?: (blockIndex: number) => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text for code blocks\n  copyButtonText?: string;\n  // Copied state text for code blocks\n  copiedButtonText?: string;\n  beforeSend?: (content: OnSendContentParams) => boolean;\n}\n\nconst MarkdownFlow: React.FC<MarkdownFlowProps> = ({\n  initialContentList = [],\n  customRenderBar,\n  onSend: onSendProp,\n  typingSpeed: typingSpeedProp,\n  enableTypewriter = false,\n  onBlockComplete,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  beforeSend: beforeSendProp,\n}) => {\n  return (\n    <div className=\"markdown-flow\">\n      {initialContentList.map((contentInfo, index) => {\n        const isFinished = contentInfo.isFinished ?? false;\n        const enableTypewriterForBlock = !isFinished && enableTypewriter;\n        const onSend = isFinished ? undefined : onSendProp;\n        const typingSpeed = isFinished ? undefined : typingSpeedProp;\n        const beforeSend = beforeSendProp ?? (() => true);\n        return (\n          <ContentRender\n            key={index}\n            content={contentInfo.content}\n            defaultInputText={contentInfo.defaultInputText}\n            defaultButtonText={contentInfo.defaultButtonText}\n            defaultSelectedValues={contentInfo.defaultSelectedValues}\n            readonly={contentInfo.readonly}\n            enableTypewriter={enableTypewriterForBlock}\n            customRenderBar={contentInfo.customRenderBar || customRenderBar}\n            onSend={onSend}\n            beforeSend={beforeSend}\n            onClickCustomButtonAfterContent={\n              contentInfo.onClickCustomButtonAfterContent\n            }\n            typingSpeed={typingSpeed}\n            confirmButtonText={confirmButtonText}\n            copyButtonText={copyButtonText}\n            copiedButtonText={copiedButtonText}\n            dynamicInteractionFormat={contentInfo.dynamicInteractionFormat}\n            onTypeFinished={() => {\n              onBlockComplete?.(index);\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MarkdownFlow;\n"],"names":["MarkdownFlow","initialContentList","customRenderBar","onSendProp","typingSpeedProp","enableTypewriter","onBlockComplete","confirmButtonText","copyButtonText","copiedButtonText","beforeSendProp","jsx","contentInfo","index","isFinished","enableTypewriterForBlock","onSend","typingSpeed","beforeSend","ContentRender"],"mappings":";;;;;AA+BA,MAAMA,IAA4C,CAAC;AAAA,EACjD,oBAAAC,IAAqB,CAAA;AAAA,EACrB,iBAAAC;AAAA,EACA,QAAQC;AAAA,EACR,aAAaC;AAAA,EACb,kBAAAC,IAAmB;AAAA,EACnB,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAYC;AACd,MAEIC,gBAAAA,MAAC,SAAI,WAAU,iBACZ,YAAmB,IAAI,CAACC,GAAaC,MAAU;AAC9C,QAAMC,IAAaF,EAAY,cAAc,IACvCG,IAA2B,CAACD,KAAcT,GAC1CW,IAASF,IAAa,SAAYX,GAClCc,IAAcH,IAAa,SAAYV,GACvCc,IAAaR,MAAmB,MAAM;AAC5C,SACEC,gBAAAA,EAAAA;AAAAA,IAACQ;AAAA,IAAA;AAAA,MAEC,SAASP,EAAY;AAAA,MACrB,kBAAkBA,EAAY;AAAA,MAC9B,mBAAmBA,EAAY;AAAA,MAC/B,uBAAuBA,EAAY;AAAA,MACnC,UAAUA,EAAY;AAAA,MACtB,kBAAkBG;AAAA,MAClB,iBAAiBH,EAAY,mBAAmBV;AAAA,MAChD,QAAAc;AAAA,MACA,YAAAE;AAAA,MACA,iCACEN,EAAY;AAAA,MAEd,aAAAK;AAAA,MACA,mBAAAV;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,0BAA0BG,EAAY;AAAA,MACtC,gBAAgB,MAAM;AACpB,QAAAN,IAAkBO,CAAK;AAAA,MACzB;AAAA,IAAA;AAAA,IApBKA;AAAA,EAAA;AAuBX,CAAC,EAAA,CACH;"}
+{"version":3,"file":"MarkdownFlow.js","sources":["../../../src/components/MarkdownFlow/MarkdownFlow.tsx"],"sourcesContent":["import React from \"react\";\nimport ContentRender from \"../ContentRender\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./markdownFlow.css\";\n\nexport interface MarkdownFlowProps {\n  initialContentList?: {\n    content: string;\n    isFinished?: boolean;\n    defaultInputText?: string;\n    defaultButtonText?: string;\n    defaultSelectedValues?: string[];\n    readonly?: boolean;\n    customRenderBar?: CustomRenderBarProps;\n    onClickCustomButtonAfterContent?: () => void;\n    dynamicInteractionFormat?: string;\n    fullscreenButtonText?: string;\n    contentHtmlPayload?: string;\n    contentType?: \"default\" | \"blackboard\";\n    renderNarrationAsCaption?: boolean;\n    maxVisibleStepNumber?: number;\n    visibleStepNumber?: number;\n  }[];\n  customRenderBar?: CustomRenderBarProps;\n  onSend?: (content: OnSendContentParams) => void;\n  typingSpeed?: number;\n  enableTypewriter?: boolean;\n  onBlockComplete?: (blockIndex: number) => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text for code blocks\n  copyButtonText?: string;\n  // Copied state text for code blocks\n  copiedButtonText?: string;\n  beforeSend?: (content: OnSendContentParams) => boolean;\n  // Fullscreen button text for iframe rendering\n  fullscreenButtonText?: string;\n}\n\nconst MarkdownFlow: React.FC<MarkdownFlowProps> = ({\n  initialContentList = [],\n  customRenderBar,\n  onSend: onSendProp,\n  typingSpeed: typingSpeedProp,\n  enableTypewriter = false,\n  onBlockComplete,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  beforeSend: beforeSendProp,\n  fullscreenButtonText,\n}) => {\n  return (\n    <div className=\"markdown-flow\">\n      {initialContentList.map((contentInfo, index) => {\n        const isFinished = contentInfo.isFinished ?? false;\n        const enableTypewriterForBlock = !isFinished && enableTypewriter;\n        const onSend = isFinished ? undefined : onSendProp;\n        const typingSpeed = isFinished ? undefined : typingSpeedProp;\n        const beforeSend = beforeSendProp ?? (() => true);\n        return (\n          <ContentRender\n            key={index}\n            content={contentInfo.content}\n            defaultInputText={contentInfo.defaultInputText}\n            defaultButtonText={contentInfo.defaultButtonText}\n            defaultSelectedValues={contentInfo.defaultSelectedValues}\n            readonly={contentInfo.readonly}\n            enableTypewriter={enableTypewriterForBlock}\n            customRenderBar={contentInfo.customRenderBar || customRenderBar}\n            onSend={onSend}\n            beforeSend={beforeSend}\n            onClickCustomButtonAfterContent={\n              contentInfo.onClickCustomButtonAfterContent\n            }\n            typingSpeed={typingSpeed}\n            confirmButtonText={confirmButtonText}\n            copyButtonText={copyButtonText}\n            copiedButtonText={copiedButtonText}\n            dynamicInteractionFormat={contentInfo.dynamicInteractionFormat}\n            fullscreenButtonText={\n              contentInfo.fullscreenButtonText || fullscreenButtonText\n            }\n            contentHtmlPayload={contentInfo.contentHtmlPayload}\n            contentType={contentInfo.contentType}\n            renderNarrationAsCaption={contentInfo.renderNarrationAsCaption}\n            maxVisibleStepNumber={contentInfo.maxVisibleStepNumber}\n            visibleStepNumber={contentInfo.visibleStepNumber}\n            onTypeFinished={() => {\n              onBlockComplete?.(index);\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MarkdownFlow;\n"],"names":["MarkdownFlow","initialContentList","customRenderBar","onSendProp","typingSpeedProp","enableTypewriter","onBlockComplete","confirmButtonText","copyButtonText","copiedButtonText","beforeSendProp","fullscreenButtonText","jsx","contentInfo","index","isFinished","enableTypewriterForBlock","onSend","typingSpeed","beforeSend","ContentRender"],"mappings":";;;;;AAuCA,MAAMA,IAA4C,CAAC;AAAA,EACjD,oBAAAC,IAAqB,CAAA;AAAA,EACrB,iBAAAC;AAAA,EACA,QAAQC;AAAA,EACR,aAAaC;AAAA,EACb,kBAAAC,IAAmB;AAAA,EACnB,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,sBAAAC;AACF,MAEIC,gBAAAA,MAAC,SAAI,WAAU,iBACZ,YAAmB,IAAI,CAACC,GAAaC,MAAU;AAC9C,QAAMC,IAAaF,EAAY,cAAc,IACvCG,IAA2B,CAACD,KAAcV,GAC1CY,IAASF,IAAa,SAAYZ,GAClCe,IAAcH,IAAa,SAAYX,GACvCe,IAAaT,MAAmB,MAAM;AAC5C,SACEE,gBAAAA,EAAAA;AAAAA,IAACQ;AAAA,IAAA;AAAA,MAEC,SAASP,EAAY;AAAA,MACrB,kBAAkBA,EAAY;AAAA,MAC9B,mBAAmBA,EAAY;AAAA,MAC/B,uBAAuBA,EAAY;AAAA,MACnC,UAAUA,EAAY;AAAA,MACtB,kBAAkBG;AAAA,MAClB,iBAAiBH,EAAY,mBAAmBX;AAAA,MAChD,QAAAe;AAAA,MACA,YAAAE;AAAA,MACA,iCACEN,EAAY;AAAA,MAEd,aAAAK;AAAA,MACA,mBAAAX;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,0BAA0BI,EAAY;AAAA,MACtC,sBACEA,EAAY,wBAAwBF;AAAA,MAEtC,oBAAoBE,EAAY;AAAA,MAChC,aAAaA,EAAY;AAAA,MACzB,0BAA0BA,EAAY;AAAA,MACtC,sBAAsBA,EAAY;AAAA,MAClC,mBAAmBA,EAAY;AAAA,MAC/B,gBAAgB,MAAM;AACpB,QAAAP,IAAkBQ,CAAK;AAAA,MACzB;AAAA,IAAA;AAAA,IA5BKA;AAAA,EAAA;AA+BX,CAAC,EAAA,CACH;"}