npm - markdown-flow-ui - Versions diffs - 0.1.69-beta.8 → 0.1.70-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (404) hide show

package/dist/components/ContentRender/ContentBlackboard.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+type ContentBlackboardProps = {
+    payload?: string;
+    renderNarrationAsCaption?: boolean;
+    maxVisibleStepNumber?: number;
+    visibleStepNumber?: number;
+};
+declare const ContentBlackboard: React.FC<ContentBlackboardProps>;
+export default ContentBlackboard;

package/dist/components/ContentRender/ContentBlackboard.js ADDED Viewed

@@ -0,0 +1,126 @@
+import { j as f } from "../../_virtual/jsx-runtime.js";
+import { useState as y, useRef as j, useEffect as u, useMemo as w } from "react";
+import { parseContentHtmlStreamChunk as v } from "./utils/content-html-stream.js";
+const k = (o) => o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), I = ({
+  payload: o,
+  renderNarrationAsCaption: c = !1,
+  maxVisibleStepNumber: l,
+  visibleStepNumber: i
+}) => {
+  const [n, m] = y(
+    []
+  ), d = j(null);
+  u(() => {
+    if (typeof o > "u") {
+      m([]);
+      return;
+    }
+    const e = o.trim();
+    if (!e) {
+      m([]);
+      return;
+    }
+    const t = v(e);
+    t && m((r) => {
+      const a = `${t.blockIndex}-${t.stepNumber}`;
+      return [
+        ...r.filter((s) => s.id !== a),
+        {
+          id: a,
+          stepNumber: t.stepNumber,
+          html: t.html,
+          narration: t.narration
+        }
+      ].sort((s, H) => s.stepNumber - H.stepNumber);
+    });
+  }, [o]);
+  const h = w(() => n.length === 0 ? "" : (typeof i == "number" ? n.filter(
+    (t) => t.stepNumber === i
+  ) : typeof l == "number" ? n.filter(
+    (t) => t.stepNumber <= l
+  ) : n).map((t) => {
+    const r = !c && t.narration ? `<p class="content-render-html-stream-narration">${k(
+      t.narration
+    )}</p>` : "";
+    return `${t.html}${r}`;
+  }).join(""), [l, c, n]), x = w(() => `
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+  />
+  <style>
+    :root { color-scheme: light; }
+    body {
+      margin: 0;
+      padding: 16px;
+      color: #0f172a;
+      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      line-height: 1.6;
+    }
+    .content-render-html-stream-narration {
+      margin-top: 10px;
+      color: #4b5563;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <div id="content-container"></div>
+</body>
+</html>
+    `.trim(), []), [p, b] = y(!1);
+  return u(() => {
+    const e = d.current;
+    if (!e) return;
+    const t = () => {
+      b(!0);
+    };
+    return e.addEventListener("load", t), () => {
+      e.removeEventListener("load", t);
+    };
+  }, []), u(() => {
+    if (!p) return;
+    const e = d.current;
+    if (!e) return;
+    const t = e.contentDocument;
+    if (!t) return;
+    const r = t.getElementById("content-container");
+    r && (r.innerHTML = h);
+    const a = () => {
+      try {
+        const s = t.body?.scrollHeight || 0;
+        e.style.height = `${Math.max(s, 100)}px`;
+      } catch {
+      }
+    };
+    a();
+    const g = window.setTimeout(a, 60);
+    return () => {
+      window.clearTimeout(g);
+    };
+  }, [h, p]), /* @__PURE__ */ f.jsxs("div", { className: "content-render-html content-render-html-stream", children: [
+    /* @__PURE__ */ f.jsx(
+      "iframe",
+      {
+        ref: d,
+        className: "content-render-html-stream-iframe",
+        sandbox: "allow-same-origin allow-scripts",
+        loading: "lazy",
+        title: "content-render-html-stream",
+        srcDoc: x
+      }
+    ),
+    c && n.length > 0 && /* @__PURE__ */ f.jsx("div", { className: "content-render-html-stream-caption", children: typeof i == "number" && n.find(
+      (t) => t.stepNumber === i
+    )?.narration || n[n.length - 1].narration })
+  ] });
+};
+export {
+  I as default
+};
+//# sourceMappingURL=ContentBlackboard.js.map

package/dist/components/ContentRender/ContentBlackboard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContentBlackboard.js","sources":["../../../src/components/ContentRender/ContentBlackboard.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n ContentHtmlStreamChunk,\n parseContentHtmlStreamChunk,\n} from \"./utils/content-html-stream\";\n\ntype ContentBlackboardProps = {\n payload?: string;\n renderNarrationAsCaption?: boolean;\n maxVisibleStepNumber?: number;\n visibleStepNumber?: number;\n};\n\ntype ContentHtmlStreamStep = {\n id: string;\n stepNumber: number;\n html: string;\n narration?: string;\n};\n\nconst escapeHtml = (value: string) =>\n value\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n\nconst ContentBlackboard: React.FC<ContentBlackboardProps> = ({\n payload,\n renderNarrationAsCaption = false,\n maxVisibleStepNumber,\n visibleStepNumber,\n}) => {\n const [streamingSteps, setStreamingSteps] = useState<ContentHtmlStreamStep[]>(\n []\n );\n const iframeRef = useRef<HTMLIFrameElement>(null);\n\n useEffect(() => {\n if (typeof payload === \"undefined\") {\n setStreamingSteps([]);\n return;\n }\n\n const trimmed = payload.trim();\n if (!trimmed) {\n setStreamingSteps([]);\n return;\n }\n\n const chunk: ContentHtmlStreamChunk | null =\n parseContentHtmlStreamChunk(trimmed);\n if (!chunk) return;\n\n setStreamingSteps((prev) => {\n const id = `${chunk.blockIndex}-${chunk.stepNumber}`;\n const filtered = prev.filter((item) => item.id !== id);\n return [\n ...filtered,\n {\n id,\n stepNumber: chunk.stepNumber,\n html: chunk.html,\n narration: chunk.narration,\n },\n ].sort((a, b) => a.stepNumber - b.stepNumber);\n });\n }, [payload]);\n\n const combinedHtml = useMemo(() => {\n if (streamingSteps.length === 0) return \"\";\n const filtered = (() => {\n if (typeof visibleStepNumber === \"number\") {\n return streamingSteps.filter(\n (step) => step.stepNumber === visibleStepNumber\n );\n }\n if (typeof maxVisibleStepNumber === \"number\") {\n return streamingSteps.filter(\n (step) => step.stepNumber <= maxVisibleStepNumber\n );\n }\n return streamingSteps;\n })();\n return filtered\n .map((step) => {\n const narrationHtml =\n !renderNarrationAsCaption && step.narration\n ? `<p class=\"content-render-html-stream-narration\">${escapeHtml(\n step.narration\n )}</p>`\n : \"\";\n return `${step.html}${narrationHtml}`;\n })\n .join(\"\");\n }, [maxVisibleStepNumber, renderNarrationAsCaption, streamingSteps]);\n\n const templateHtml = useMemo(() => {\n return `\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link\n rel=\"stylesheet\"\n href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\"\n />\n <style>\n :root { color-scheme: light; }\n body {\n margin: 0;\n padding: 16px;\n color: #0f172a;\n font-family: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n line-height: 1.6;\n }\n .content-render-html-stream-narration {\n margin-top: 10px;\n color: #4b5563;\n font-size: 14px;\n }\n </style>\n</head>\n<body>\n <div id=\"content-container\"></div>\n</body>\n</html>\n `.trim();\n }, []);\n\n const [isLoaded, setIsLoaded] = useState(false);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (!iframe) return;\n\n const handleLoad = () => {\n setIsLoaded(true);\n };\n\n iframe.addEventListener(\"load\", handleLoad);\n return () => {\n iframe.removeEventListener(\"load\", handleLoad);\n };\n }, []);\n\n useEffect(() => {\n if (!isLoaded) return;\n const iframe = iframeRef.current;\n if (!iframe) return;\n const doc = iframe.contentDocument;\n if (!doc) return;\n\n const container = doc.getElementById(\"content-container\");\n if (container) {\n container.innerHTML = combinedHtml;\n }\n\n const updateHeight = () => {\n try {\n const height = doc.body?.scrollHeight || 0;\n iframe.style.height = `${Math.max(height, 100)}px`;\n } catch {\n // ignore cross-origin issues\n }\n };\n\n updateHeight();\n // re-measure after a short delay to allow for rendering (e.g. images)\n const timer = window.setTimeout(updateHeight, 60);\n return () => {\n window.clearTimeout(timer);\n };\n }, [combinedHtml, isLoaded]);\n\n return (\n <div className=\"content-render-html content-render-html-stream\">\n <iframe\n ref={iframeRef}\n className=\"content-render-html-stream-iframe\"\n sandbox=\"allow-same-origin allow-scripts\"\n loading=\"lazy\"\n title=\"content-render-html-stream\"\n srcDoc={templateHtml}\n />\n {renderNarrationAsCaption && streamingSteps.length > 0 && (\n <div className=\"content-render-html-stream-caption\">\n {(() => {\n if (typeof visibleStepNumber === \"number\") {\n const target = streamingSteps.find(\n (step) => step.stepNumber === visibleStepNumber\n );\n return (\n target?.narration ||\n streamingSteps[streamingSteps.length - 1].narration\n );\n }\n return streamingSteps[streamingSteps.length - 1].narration;\n })()}\n </div>\n )}\n </div>\n );\n};\n\nexport default ContentBlackboard;\n"],"names":["escapeHtml","value","ContentBlackboard","payload","renderNarrationAsCaption","maxVisibleStepNumber","visibleStepNumber","streamingSteps","setStreamingSteps","useState","iframeRef","useRef","useEffect","trimmed","chunk","parseContentHtmlStreamChunk","prev","id","item","a","b","combinedHtml","useMemo","step","narrationHtml","templateHtml","isLoaded","setIsLoaded","iframe","handleLoad","doc","container","updateHeight","height","timer","jsxs","jsx"],"mappings":"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"}

package/dist/components/ContentRender/ContentHtml.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export type ContentHtmlMeta = {
+    title: string;
+    description?: string;
+};
+export type ContentHtmlProps = {
+    html?: string;
+    payload?: string;
+    fullscreenButtonText?: string;
+};
+declare const parseContentHtmlMeta: (payload: string) => ContentHtmlMeta | null;
+declare const isLikelyHtmlDocument: (value: string) => boolean;
+declare const HtmlBlockInIframe: React.FC<{
+    html: string;
+    fullscreenButtonText?: string;
+}>;
+declare const HtmlBlockLoading: React.FC<{
+    meta: ContentHtmlMeta;
+}>;
+declare const ContentHtml: React.FC<ContentHtmlProps>;
+export { ContentHtml, HtmlBlockInIframe, HtmlBlockLoading, isLikelyHtmlDocument, parseContentHtmlMeta, };
+export default ContentHtml;

package/dist/components/ContentRender/ContentHtml.js ADDED Viewed

@@ -0,0 +1,108 @@
+import { j as e } from "../../_virtual/jsx-runtime.js";
+import { useState as a, useEffect as h } from "react";
+import f from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/fullscreen.js";
+const p = (n) => {
+  try {
+    const t = JSON.parse(n), s = t?.title, r = t?.description;
+    return typeof s != "string" || s.trim().length === 0 ? null : {
+      title: s.trim(),
+      description: typeof r == "string" ? r : void 0
+    };
+  } catch {
+    return null;
+  }
+}, x = (n) => {
+  const t = n.trim();
+  return /^<!doctype html/i.test(t) || /^<html[\s\S]*?>/i.test(t) || /^<head[\s\S]*?>/i.test(t) || /^<body[\s\S]*?>/i.test(t);
+}, m = ({ html: n, fullscreenButtonText: t }) => {
+  const s = () => {
+    try {
+      const r = new Blob([n], { type: "text/html" }), o = URL.createObjectURL(r);
+      window.open(o, "_blank", "noopener,noreferrer"), window.setTimeout(() => URL.revokeObjectURL(o), 3e4);
+    } catch (r) {
+      console.error("Failed to open HTML in new window", r);
+    }
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "content-render-html", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "content-render-html-toolbar", children: /* @__PURE__ */ e.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "content-render-html-fullscreen",
+        onClick: s,
+        children: [
+          /* @__PURE__ */ e.jsx(
+            f,
+            {
+              size: 12,
+              className: "content-render-html-fullscreen-icon"
+            }
+          ),
+          /* @__PURE__ */ e.jsx("span", { className: "content-render-html-fullscreen-text", children: t || "Fullscreen" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(
+      "iframe",
+      {
+        className: "content-render-html-iframe",
+        sandbox: "allow-same-origin allow-scripts",
+        loading: "lazy",
+        title: "content-render-html",
+        srcDoc: n
+      }
+    )
+  ] });
+}, j = ({ meta: n }) => /* @__PURE__ */ e.jsx("div", { className: "content-render-html content-render-html-loading", children: /* @__PURE__ */ e.jsxs("div", { className: "content-render-html-loading-body", children: [
+  /* @__PURE__ */ e.jsx("p", { className: "content-render-html-loading-title", children: n.title }),
+  n.description ? /* @__PURE__ */ e.jsx("p", { className: "content-render-html-loading-description", children: n.description }) : null,
+  /* @__PURE__ */ e.jsx("div", { className: "content-render-html-loading-bar", children: /* @__PURE__ */ e.jsx("span", { className: "content-render-html-loading-bar-fill" }) })
+] }) }), N = ({
+  html: n,
+  payload: t,
+  fullscreenButtonText: s
+}) => {
+  const [r, o] = a(), [c, l] = a();
+  return h(() => {
+    if (typeof t > "u") {
+      o(void 0), l(void 0);
+      return;
+    }
+    const i = t.trim();
+    if (!i) {
+      o(void 0), l(void 0);
+      return;
+    }
+    const d = p(i);
+    if (d) {
+      o(d), l(void 0);
+      return;
+    }
+    if (x(i)) {
+      l(i), o((u) => u);
+      return;
+    }
+    o(void 0), l(void 0);
+  }, [t]), n ? /* @__PURE__ */ e.jsx(
+    m,
+    {
+      html: n,
+      fullscreenButtonText: s
+    }
+  ) : typeof t > "u" ? null : c ? /* @__PURE__ */ e.jsx(
+    m,
+    {
+      html: c,
+      fullscreenButtonText: s
+    }
+  ) : r ? /* @__PURE__ */ e.jsx(j, { meta: r }) : null;
+};
+export {
+  N as ContentHtml,
+  m as HtmlBlockInIframe,
+  j as HtmlBlockLoading,
+  N as default,
+  x as isLikelyHtmlDocument,
+  p as parseContentHtmlMeta
+};
+//# sourceMappingURL=ContentHtml.js.map

package/dist/components/ContentRender/ContentHtml.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContentHtml.js","sources":["../../../src/components/ContentRender/ContentHtml.tsx"],"sourcesContent":["import { Fullscreen } from \"lucide-react\";\nimport React, { useEffect, useState } from \"react\";\n\nexport type ContentHtmlMeta = {\n title: string;\n description?: string;\n};\n\nexport type ContentHtmlProps = {\n html?: string;\n payload?: string;\n fullscreenButtonText?: string;\n};\n\nconst parseContentHtmlMeta = (payload: string): ContentHtmlMeta | null => {\n try {\n const parsed = JSON.parse(payload);\n const maybeTitle = parsed?.title;\n const maybeDescription = parsed?.description;\n if (typeof maybeTitle !== \"string\" || maybeTitle.trim().length === 0) {\n return null;\n }\n return {\n title: maybeTitle.trim(),\n description:\n typeof maybeDescription === \"string\" ? maybeDescription : undefined,\n };\n } catch {\n return null;\n }\n};\n\nconst isLikelyHtmlDocument = (value: string) => {\n const trimmed = value.trim();\n return (\n /^<!doctype html/i.test(trimmed) ||\n /^<html[\\s\\S]*?>/i.test(trimmed) ||\n /^<head[\\s\\S]*?>/i.test(trimmed) ||\n /^<body[\\s\\S]*?>/i.test(trimmed)\n );\n};\n\nconst HtmlBlockInIframe: React.FC<{\n html: string;\n fullscreenButtonText?: string;\n}> = ({ html, fullscreenButtonText }) => {\n const handleOpenFullscreen = () => {\n try {\n const blob = new Blob([html], { type: \"text/html\" });\n const url = URL.createObjectURL(blob);\n window.open(url, \"_blank\", \"noopener,noreferrer\");\n window.setTimeout(() => URL.revokeObjectURL(url), 30000);\n } catch (error) {\n console.error(\"Failed to open HTML in new window\", error);\n }\n };\n\n return (\n <div className=\"content-render-html\">\n <div className=\"content-render-html-toolbar\">\n <button\n type=\"button\"\n className=\"content-render-html-fullscreen\"\n onClick={handleOpenFullscreen}\n >\n <Fullscreen\n size={12}\n className=\"content-render-html-fullscreen-icon\"\n />\n <span className=\"content-render-html-fullscreen-text\">\n {fullscreenButtonText || \"Fullscreen\"}\n </span>\n </button>\n </div>\n <iframe\n className=\"content-render-html-iframe\"\n sandbox=\"allow-same-origin allow-scripts\"\n loading=\"lazy\"\n title=\"content-render-html\"\n srcDoc={html}\n />\n </div>\n );\n};\n\nconst HtmlBlockLoading: React.FC<{ meta: ContentHtmlMeta }> = ({ meta }) => {\n return (\n <div className=\"content-render-html content-render-html-loading\">\n <div className=\"content-render-html-loading-body\">\n <p className=\"content-render-html-loading-title\">{meta.title}</p>\n {meta.description ? (\n <p className=\"content-render-html-loading-description\">\n {meta.description}\n </p>\n ) : null}\n <div className=\"content-render-html-loading-bar\">\n <span className=\"content-render-html-loading-bar-fill\" />\n </div>\n </div>\n </div>\n );\n};\n\nconst ContentHtml: React.FC<ContentHtmlProps> = ({\n html,\n payload,\n fullscreenButtonText,\n}) => {\n const [meta, setMeta] = useState<ContentHtmlMeta>();\n const [documentHtml, setDocumentHtml] = useState<string>();\n\n useEffect(() => {\n if (typeof payload === \"undefined\") {\n setMeta(undefined);\n setDocumentHtml(undefined);\n return;\n }\n\n const trimmedPayload = payload.trim();\n if (!trimmedPayload) {\n setMeta(undefined);\n setDocumentHtml(undefined);\n return;\n }\n\n const parsedMeta = parseContentHtmlMeta(trimmedPayload);\n if (parsedMeta) {\n setMeta(parsedMeta);\n setDocumentHtml(undefined);\n return;\n }\n\n if (isLikelyHtmlDocument(trimmedPayload)) {\n setDocumentHtml(trimmedPayload);\n setMeta((prev) => prev);\n return;\n }\n\n setMeta(undefined);\n setDocumentHtml(undefined);\n }, [payload]);\n\n if (html) {\n return (\n <HtmlBlockInIframe\n html={html}\n fullscreenButtonText={fullscreenButtonText}\n />\n );\n }\n\n if (typeof payload === \"undefined\") {\n return null;\n }\n\n if (documentHtml) {\n return (\n <HtmlBlockInIframe\n html={documentHtml}\n fullscreenButtonText={fullscreenButtonText}\n />\n );\n }\n\n if (meta) {\n return <HtmlBlockLoading meta={meta} />;\n }\n\n return null;\n};\n\nexport {\n ContentHtml,\n HtmlBlockInIframe,\n HtmlBlockLoading,\n isLikelyHtmlDocument,\n parseContentHtmlMeta,\n};\n\nexport default ContentHtml;\n"],"names":["parseContentHtmlMeta","payload","parsed","maybeTitle","maybeDescription","isLikelyHtmlDocument","value","trimmed","HtmlBlockInIframe","html","fullscreenButtonText","handleOpenFullscreen","blob","url","error","jsxs","jsx","Fullscreen","HtmlBlockLoading","meta","ContentHtml","setMeta","useState","documentHtml","setDocumentHtml","useEffect","trimmedPayload","parsedMeta","prev"],"mappings":"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"}

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

@@ -3,16 +3,16 @@ import { CustomRenderBarProps, OnSendContentParams } from '../types';
 export interface ContentRenderProps {
     content: string;
     /**
-  +   * Callback invoked when the custom button after content is clicked.
-  +   * This button is rendered via the `<custom-button-after-content>` tag in markdown content.
-  +   * @example
-  +   * ```tsx
-  +   * <ContentRender
-  +   *   content="Hello <custom-button-after-content>Ask</custom-button-after-content>"
-  +   *   onClickCustomButtonAfterContent={() => console.log('Button clicked')}
-  +   * />
-  +   * ```
-  +   */
+     * Callback invoked when the custom button after content is clicked.
+     * This button is rendered via the `<custom-button-after-content>` tag in markdown content.
+     * @example
+     * ```tsx
+     * <ContentRender
+     *   content="Hello <custom-button-after-content>Ask</custom-button-after-content>"
+     *   onClickCustomButtonAfterContent={() => console.log('Button clicked')}
+     * />
+     * ```
+     */
     customRenderBar?: CustomRenderBarProps;
     onClickCustomButtonAfterContent?: () => void;
     onSend?: (content: OnSendContentParams) => void;
@@ -27,7 +27,13 @@ export interface ContentRenderProps {
     copyButtonText?: string;
     copiedButtonText?: string;
     dynamicInteractionFormat?: string;
+    fullscreenButtonText?: string;
     beforeSend?: (param: OnSendContentParams) => boolean;
+    contentHtmlPayload?: string;
+    contentType?: "default" | "blackboard";
+    renderNarrationAsCaption?: boolean;
+    maxVisibleStepNumber?: number;
+    visibleStepNumber?: number;
 }
 declare const ContentRender: React.FC<ContentRenderProps>;
 export default ContentRender;

package/dist/components/ContentRender/ContentRender.js CHANGED Viewed

@@ -1,95 +1,103 @@
 import { j as t } from "../../_virtual/jsx-runtime.js";
-/* empty css                                                */
+/* empty css                                                                                                                            */
 /* empty css                                                                                                               */
-import S, { useRef as x, useEffect as i } from "react";
-import B from "../../_virtual/index.js";
+import P, { useRef as b, useEffect as i } from "react";
+import T from "../../_virtual/index.js";
+import G from "./ContentBlackboard.js";
 /* empty css                  */
 /* empty css                          */
-import P from "./CodeBlock.js";
-import E from "./plugins/CustomVariable.js";
-import h from "./plugins/MermaidChart.js";
-import T from "./useTypewriterStateMachine.js";
-import { preserveCustomVariableProperties as V, restoreCustomVariableProperties as _ } from "./utils/custom-variable-props.js";
-import { subsetLanguages as z, highlightLanguages as A } from "./utils/highlight-languages.js";
-import { parseMarkdownSegments as H, mermaidBlockIsComplete as G } from "./utils/mermaid-parse.js";
-import { Markdown as K } from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.js";
-import $ from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js";
-import q from "../../node_modules/rehype-highlight/lib/index.js";
-import D from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.js";
-import F from "../../node_modules/remark-gfm/lib/index.js";
-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);
+import H from "./CodeBlock.js";
+import K from "./plugins/CustomVariable.js";
+import j from "./plugins/MermaidChart.js";
+import { ContentHtml as k } from "./ContentHtml.js";
+import $ from "./useTypewriterStateMachine.js";
+import { preserveCustomVariableProperties as q, restoreCustomVariableProperties as D } from "./utils/custom-variable-props.js";
+import { subsetLanguages as F, highlightLanguages as J } from "./utils/highlight-languages.js";
+import { parseMarkdownSegments as O, mermaidBlockIsComplete as Q } from "./utils/mermaid-parse.js";
+import { Markdown as U } from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.js";
+import W from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js";
+import X from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.js";
+import Y from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.js";
+import Z from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.js";
+import ee from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.js";
+import te from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.js";
+const re = ({ svg: o }) => {
+  const n = b(null);
   return i(() => {
-    const a = n.current;
-    if (!a) return;
-    const m = a.shadowRoot ?? a.attachShadow({ mode: "open" });
-    m.innerHTML = s;
-  }, [s]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: n });
-}, ke = ({
-  content: s,
+    const s = n.current;
+    if (!s) return;
+    const m = s.shadowRoot ?? s.attachShadow({ mode: "open" });
+    m.innerHTML = o;
+  }, [o]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: n });
+}, Ie = ({
+  content: o,
   customRenderBar: n,
-  onSend: a,
+  onSend: s,
   typingSpeed: m = 30,
-  enableTypewriter: j = !1,
-  defaultButtonText: k,
-  defaultInputText: b,
-  defaultSelectedValues: g,
-  readonly: N = !1,
-  onTypeFinished: l,
-  confirmButtonText: y,
-  copyButtonText: C,
-  copiedButtonText: v,
-  onClickCustomButtonAfterContent: w,
-  beforeSend: R
+  enableTypewriter: g = !1,
+  defaultButtonText: y,
+  defaultInputText: N,
+  defaultSelectedValues: C,
+  readonly: v = !1,
+  onTypeFinished: u,
+  confirmButtonText: w,
+  copyButtonText: R,
+  copiedButtonText: M,
+  fullscreenButtonText: p,
+  onClickCustomButtonAfterContent: I,
+  beforeSend: L,
+  contentHtmlPayload: l,
+  contentType: S = "default",
+  renderNarrationAsCaption: B = !1,
+  maxVisibleStepNumber: E,
+  visibleStepNumber: V
   // tooltipMinLength,
 }) => {
-  const { displayContent: u, isComplete: p } = T({
+  const { displayContent: f, isComplete: d } = $({
     // processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
     // content: processMarkdownText(content),
-    content: s,
+    content: o,
     typingSpeed: m,
-    disabled: !j
-  }), M = {
+    disabled: !g
+  }), _ = {
     "custom-button-after-content": ({
       children: e
     }) => /* @__PURE__ */ t.jsx(
       "button",
       {
         className: "content-render-custom-button-after-content",
-        onClick: w,
+        onClick: I,
         children: e
       }
     ),
     "custom-variable": (e) => /* @__PURE__ */ t.jsx(
-      E,
+      K,
       {
         ...e,
-        readonly: N,
-        defaultButtonText: k,
-        defaultInputText: b,
-        defaultSelectedValues: g,
-        onSend: a,
-        beforeSend: R,
-        confirmButtonText: y
+        readonly: v,
+        defaultButtonText: y,
+        defaultInputText: N,
+        defaultSelectedValues: C,
+        onSend: s,
+        beforeSend: L,
+        confirmButtonText: w
       }
     ),
     code: (e) => {
-      const { className: r, children: o, ...d } = e;
+      const { className: r, children: a, ...h } = e;
       if (/language-(\w+)/.exec(r || "")?.[1] === "mermaid") {
-        const f = o?.toString().replace(/\n$/, "") || "", L = G(s, f);
-        return /* @__PURE__ */ t.jsx(h, { chart: f, frozen: L });
+        const x = a?.toString().replace(/\n$/, "") || "", A = Q(o, x);
+        return /* @__PURE__ */ t.jsx(j, { chart: x, frozen: A });
       }
-      return /* @__PURE__ */ t.jsx("code", { className: r, ...d, children: o });
+      return /* @__PURE__ */ t.jsx("code", { className: r, ...h, children: a });
     },
     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 a = e?.properties?.className;
+      return typeof a == "string" && a.includes("task-list-item") || Array.isArray(a) && a.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 }),
@@ -104,62 +112,77 @@ const Q = ({ svg: s }) => {
     ) : /* @__PURE__ */ t.jsx("input", { ...e }),
     a: ({ children: e, ...r }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...r, children: e }),
     pre: (e) => /* @__PURE__ */ t.jsx(
-      P,
+      H,
       {
         ...e,
-        copyButtonText: C,
-        copiedButtonText: v
+        copyButtonText: R,
+        copiedButtonText: M
       }
     )
-  }, c = x(!1);
+  }, c = b(!1);
   i(() => {
-    p && !c.current && (c.current = !0, l?.());
-  }, [p, l]), i(() => {
+    d && !c.current && (c.current = !0, u?.());
+  }, [d, u]), i(() => {
     c.current = !1;
-  }, [s]);
-  const I = H(u);
+  }, [o]);
+  const z = O(f);
   return /* @__PURE__ */ t.jsxs("div", { className: "content-render markdown-body", children: [
-    I.map((e, r) => {
-      if (e.type === "text")
-        return /* @__PURE__ */ t.jsx(
-          K,
-          {
-            remarkPlugins: [F, J, B, O],
-            rehypePlugins: [
-              V,
-              $,
-              _,
-              [
-                q,
-                { languages: A, subset: z }
-              ],
-              D
-            ],
-            components: M,
-            children: e.value
-          },
-          r
-        );
-      if (e.type === "mermaid")
-        return /* @__PURE__ */ t.jsx(
-          h,
-          {
-            chart: e.value,
-            frozen: !e.complete
-          },
-          r
-        );
-      if (e.type === "svg")
-        return /* @__PURE__ */ t.jsx(Q, { svg: e.value }, r);
-    }),
-    n && S.createElement(n, {
-      content: s,
-      displayContent: u,
-      onSend: a
+    z.map((e, r) => e.type === "text" ? /* @__PURE__ */ t.jsx(
+      U,
+      {
+        remarkPlugins: [Z, ee, T, te],
+        rehypePlugins: [
+          q,
+          W,
+          D,
+          [
+            X,
+            { languages: J, subset: F }
+          ],
+          Y
+        ],
+        components: _,
+        children: e.value
+      },
+      r
+    ) : e.type === "mermaid" ? /* @__PURE__ */ t.jsx(
+      j,
+      {
+        chart: e.value,
+        frozen: !e.complete
+      },
+      r
+    ) : e.type === "svg" ? /* @__PURE__ */ t.jsx(re, { svg: e.value }, r) : e.type === "html" ? /* @__PURE__ */ t.jsx(
+      k,
+      {
+        html: e.value,
+        fullscreenButtonText: p
+      },
+      r
+    ) : null),
+    l && (S === "blackboard" ? /* @__PURE__ */ t.jsx(
+      G,
+      {
+        payload: l,
+        renderNarrationAsCaption: B,
+        maxVisibleStepNumber: E,
+        visibleStepNumber: V
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      k,
+      {
+        payload: l,
+        fullscreenButtonText: p
+      }
+    )),
+    n && P.createElement(n, {
+      content: o,
+      displayContent: f,
+      onSend: s
     })
   ] });
 };
 export {
-  ke as default
+  Ie as default
 };
 //# sourceMappingURL=ContentRender.js.map