markdown-flow-ui 0.2.13 → 0.2.15

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

@@ -1,240 +1,254 @@
-import { j as s } from "../../../_virtual/jsx-runtime.es.js";
-import d from "react";
-import { Button as L } from "../../ui/button.es.js";
-import { Checkbox as _ } from "../../ui/checkbox.es.js";
-import I from "../MarkdownFlowInput.es.js";
-import { InputGroup as z, InputGroupTextarea as J } from "../../ui/inputGroup/input-group.es.js";
-import { cn as D } from "../../../lib/utils.es.js";
-import { getContentRenderLocaleTexts as U } from "../contentRenderI18n.es.js";
-const q = ({
-  node: e,
-  readonly: r,
-  selectedValues: l,
-  inputValue: n,
-  confirmButtonText: a,
-  handleCheckboxChange: c,
-  handleInputChange: f,
-  handleKeyDown: g,
-  handleConfirmClick: p
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import v from "react";
+import { Button as J } from "../../ui/button.es.js";
+import { Checkbox as U } from "../../ui/checkbox.es.js";
+import O from "../MarkdownFlowInput.es.js";
+import { InputGroup as q, InputGroupTextarea as A } from "../../ui/inputGroup/input-group.es.js";
+import { cn as j } from "../../../lib/utils.es.js";
+import { getContentRenderLocaleTexts as H } from "../contentRenderI18n.es.js";
+const P = ({
+  node: c,
+  readonly: i,
+  selectedValues: e,
+  inputValue: s,
+  confirmButtonText: o,
+  handleCheckboxChange: n,
+  handleInputChange: m,
+  handleKeyDown: f,
+  handleConfirmClick: h
 }) => {
-  const u = e.properties?.placeholder, m = r || l.length === 0 && !n?.trim(), i = (h) => /* @__PURE__ */ s.jsx(
+  const b = c.properties?.placeholder, p = i || e.length === 0 && !s?.trim(), x = (u) => /* @__PURE__ */ r(
     "span",
     {
-      className: D(
+      className: j(
         "multi-select-confirm-wrapper flex flex-col items-center",
-        m ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-        h
+        p ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        u
       ),
-      children: /* @__PURE__ */ s.jsx(
+      children: /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           className: "multi-select-confirm-button text-sm font-medium text-primary",
-          disabled: m,
-          onClick: p,
-          children: a
+          disabled: p,
+          onClick: h,
+          children: o
         }
       )
     }
   );
-  return /* @__PURE__ */ s.jsxs("span", { className: "multi-select-container flex w-full flex-col", children: [
-    /* @__PURE__ */ s.jsx("span", { className: "flex flex-wrap gap-y-[9px] gap-x-6", children: e.properties?.buttonTexts?.map((h, b) => {
-      const v = e.properties?.buttonValues?.[b], N = v !== void 0 ? v : h;
-      return /* @__PURE__ */ s.jsx(
-        _,
+  return /* @__PURE__ */ w("span", { className: "multi-select-container flex w-full flex-col", children: [
+    /* @__PURE__ */ r("span", { className: "flex flex-wrap gap-y-[9px] gap-x-6", children: c.properties?.buttonTexts?.map((u, l) => {
+      const N = c.properties?.buttonValues?.[l], d = N !== void 0 ? N : u;
+      return /* @__PURE__ */ r(
+        U,
         {
-          label: h,
-          disabled: r,
-          checked: l.includes(N),
-          onCheckedChange: (x) => c(N, x),
+          label: u,
+          disabled: i,
+          checked: e.includes(d),
+          onCheckedChange: (k) => n(d, k),
           className: "text-sm"
         },
-        b
+        l
       );
     }) }),
-    u ? /* @__PURE__ */ s.jsx("span", { className: "block mb-1 w-full max-w-[500px]", children: /* @__PURE__ */ s.jsxs("span", { className: "multi-select-input-row flex w-full items-end gap-3", children: [
-      /* @__PURE__ */ s.jsx(z, { "data-disabled": r, className: "flex-1", children: /* @__PURE__ */ s.jsx(
-        J,
+    b ? /* @__PURE__ */ r("span", { className: "block mb-1 w-full max-w-[500px]", children: /* @__PURE__ */ w("span", { className: "multi-select-input-row flex w-full items-end gap-3", children: [
+      /* @__PURE__ */ r(q, { "data-disabled": i, className: "flex-1", children: /* @__PURE__ */ r(
+        A,
         {
-          disabled: r,
-          placeholder: u,
-          value: n,
-          onChange: f,
-          onKeyDown: g,
+          disabled: i,
+          placeholder: b,
+          value: s,
+          onChange: m,
+          onKeyDown: f,
           className: "text-sm px-3",
-          title: u
+          title: b
         }
       ) }),
-      i("shrink-0")
-    ] }) }) : i("self-start multi-select-confirm-wrapper--stacked")
+      x("shrink-0")
+    ] }) }) : x("self-start multi-select-confirm-wrapper--stacked")
   ] });
-}, A = ({
+}, Q = ({
+  dir: c,
+  lang: i,
   node: e,
-  readonly: r,
-  locale: l,
+  readonly: s,
+  locale: o,
   resolvedDefaultButtonText: n,
-  handleButtonClick: a,
-  inputValue: c,
-  handleInputChange: f,
-  handleSendClick: g
-}) => /* @__PURE__ */ s.jsxs("span", { className: "single-select-container inline-flex w-full flex-col", children: [
-  /* @__PURE__ */ s.jsx("span", { className: "flex flex-wrap gap-y-[9px] gap-x-2", children: e.properties?.buttonTexts?.map((p, u) => {
-    const m = e.properties?.buttonValues?.[u], i = m !== void 0 ? m : p;
-    return /* @__PURE__ */ s.jsx(
-      L,
+  handleButtonClick: m,
+  inputValue: f,
+  handleInputChange: h,
+  handleSendClick: b
+}) => /* @__PURE__ */ w("span", { className: "single-select-container inline-flex w-full flex-col", children: [
+  /* @__PURE__ */ r("span", { className: "flex flex-wrap gap-y-[9px] gap-x-2", children: e.properties?.buttonTexts?.map((p, x) => {
+    const u = e.properties?.buttonValues?.[x], l = u !== void 0 ? u : p;
+    return /* @__PURE__ */ r(
+      J,
       {
-        disabled: r,
+        disabled: s,
         variant: "outline",
         type: "button",
         size: "sm",
-        onClick: () => a(i),
-        className: D(
-          "max-w-full shrink whitespace-normal break-words text-left leading-5 h-auto min-h-8 px-3 py-1.5",
+        onClick: () => m(l),
+        className: j(
+          "max-w-full shrink whitespace-normal break-words text-start leading-5 h-auto min-h-8 px-3 py-1.5",
           "hover:bg-gray-200",
           n === p && "select"
         ),
         children: p
       },
-      u
+      x
     );
   }) }),
-  e.properties?.placeholder && /* @__PURE__ */ s.jsx("span", { className: "mt-[9px] mb-1", children: /* @__PURE__ */ s.jsx(
-    I,
+  e.properties?.placeholder && /* @__PURE__ */ r("span", { className: "mt-[9px] mb-1", children: /* @__PURE__ */ r(
+    O,
     {
-      disabled: r,
-      locale: l,
+      dir: c,
+      lang: i,
+      disabled: s,
+      locale: o,
       placeholder: e.properties.placeholder,
-      value: c,
-      onChange: f,
-      onSend: g,
+      value: f,
+      onChange: h,
+      onSend: b,
       title: e.properties.placeholder
     }
   ) })
-] }), H = ({
+] }), W = ({
+  dir: c,
+  lang: i,
   readonly: e,
-  locale: r,
-  placeholder: l,
+  locale: s,
+  placeholder: o,
   value: n,
-  onChange: a,
-  onSend: c
-}) => l ? /* @__PURE__ */ s.jsx(
-  I,
+  onChange: m,
+  onSend: f
+}) => o ? /* @__PURE__ */ r(
+  O,
   {
+    dir: c,
+    lang: i,
     disabled: e,
-    locale: r,
-    placeholder: l,
+    locale: s,
+    placeholder: o,
     value: n,
-    onChange: a,
-    onSend: c,
-    title: l
+    onChange: m,
+    onSend: f,
+    title: o
   }
-) : null, te = ({
+) : null, ne = ({
+  dir: c,
+  lang: i,
   node: e,
-  readonly: r,
-  locale: l,
+  readonly: s,
+  locale: o,
   defaultButtonText: n,
-  defaultInputText: a,
-  defaultSelectedValues: c,
-  onSend: f,
-  confirmButtonText: g,
+  defaultInputText: m,
+  defaultSelectedValues: f,
+  onSend: h,
+  confirmButtonText: b,
   beforeSend: p = () => !0
 }) => {
-  const u = U(l), m = g || u.confirmButtonText, [i, h] = d.useState(a || ""), [b, v] = d.useState(
-    c || []
-  ), N = JSON.stringify({
+  const x = H(o), u = b || x.confirmButtonText, [l, N] = v.useState(m || ""), [d, k] = v.useState(
+    f || []
+  ), B = JSON.stringify({
     buttonTexts: e.properties?.buttonTexts,
     buttonValues: e.properties?.buttonValues,
     isMultiSelect: e.properties?.isMultiSelect,
     placeholder: e.properties?.placeholder,
     variableName: e.properties?.variableName
-  }), x = e.properties?.isMultiSelect ?? !1, E = e.properties?.buttonTexts || [], T = !x && E.length === 0 && !e.properties?.placeholder, C = e.properties?.variableName?.trim() || n || m, k = d.useMemo(() => T ? {
+  }), g = e.properties?.isMultiSelect ?? !1, F = e.properties?.buttonTexts || [], M = !g && F.length === 0 && !e.properties?.placeholder, S = e.properties?.variableName?.trim() || n || u, T = v.useMemo(() => M ? {
     ...e,
     properties: {
       ...e.properties || {},
-      buttonTexts: [C],
-      buttonValues: [C]
+      buttonTexts: [S],
+      buttonValues: [S]
     }
-  } : e, [C, e, T]), j = k.properties?.buttonTexts || [], V = k.properties?.buttonValues || [], y = !x && j.length > 0, K = (t) => {
-    const o = {
+  } : e, [S, e, M]), C = T.properties?.buttonTexts || [], I = T.properties?.buttonValues || [], D = !g && C.length > 0, G = (t) => {
+    const a = {
       variableName: e.properties?.variableName || "",
       buttonText: t
     };
-    p?.(o) && f?.(o);
-  }, O = (t, o) => {
-    v((M) => o ? [...M, t] : M.filter((G) => G !== t));
-  }, B = () => {
-    const t = b.length === 0 && !i?.trim(), o = {
+    p?.(a) && h?.(a);
+  }, L = (t, a) => {
+    k((K) => a ? [...K, t] : K.filter((z) => z !== t));
+  }, E = () => {
+    const t = d.length === 0 && !l?.trim(), a = {
       variableName: e.properties?.variableName || "",
-      selectedValues: b,
-      inputText: i?.trim() || void 0
+      selectedValues: d,
+      inputText: l?.trim() || void 0
     };
-    r || t || p?.(o) && f?.(o);
-  }, w = (t) => {
-    h(t.target.value);
+    s || t || p?.(a) && h?.(a);
+  }, V = (t) => {
+    N(t.target.value);
   }, R = (t) => {
-    t.nativeEvent.isComposing || t.keyCode === 229 || t.key === "Enter" && !t.shiftKey && (t.preventDefault(), x ? b.length === 0 && !i.trim() || B() : S());
-  }, S = () => {
+    t.nativeEvent.isComposing || t.keyCode === 229 || t.key === "Enter" && !t.shiftKey && (t.preventDefault(), g ? d.length === 0 && !l.trim() || E() : y());
+  }, y = () => {
     const t = {
       variableName: e.properties?.variableName || "",
-      inputText: i
+      inputText: l
     };
-    p?.(t) && f?.(t);
-  }, F = d.useMemo(() => {
+    p?.(t) && h?.(t);
+  }, _ = v.useMemo(() => {
     if (!n)
       return;
-    const t = V.indexOf(n);
+    const t = I.indexOf(n);
     if (t > -1)
-      return j[t] ?? n;
-    const o = j.indexOf(n);
-    if (o > -1)
-      return j[o];
-  }, [n, j, V]);
-  return d.useEffect(() => {
-    h(a || "");
-  }, [a, N]), d.useEffect(() => {
-    v(c || []);
-  }, [c, N]), /* @__PURE__ */ s.jsxs("span", { className: "custom-variable-container inline-flex items-center flex-wrap", children: [
-    x && /* @__PURE__ */ s.jsx(
-      q,
+      return C[t] ?? n;
+    const a = C.indexOf(n);
+    if (a > -1)
+      return C[a];
+  }, [n, C, I]);
+  return v.useEffect(() => {
+    N(m || "");
+  }, [m, B]), v.useEffect(() => {
+    k(f || []);
+  }, [f, B]), /* @__PURE__ */ w("span", { className: "custom-variable-container inline-flex items-center flex-wrap", children: [
+    g && /* @__PURE__ */ r(
+      P,
       {
         node: e,
-        readonly: r,
-        selectedValues: b,
-        inputValue: i,
-        confirmButtonText: m,
-        handleCheckboxChange: O,
-        handleInputChange: w,
+        readonly: s,
+        selectedValues: d,
+        inputValue: l,
+        confirmButtonText: u,
+        handleCheckboxChange: L,
+        handleInputChange: V,
         handleKeyDown: R,
-        handleConfirmClick: B
+        handleConfirmClick: E
       }
     ),
-    !x && y && /* @__PURE__ */ s.jsx(
-      A,
+    !g && D && /* @__PURE__ */ r(
+      Q,
       {
-        node: k,
-        readonly: r,
-        locale: l,
-        resolvedDefaultButtonText: F,
-        handleButtonClick: K,
-        inputValue: i,
-        handleInputChange: w,
-        handleSendClick: S
+        dir: c,
+        lang: i,
+        node: T,
+        readonly: s,
+        locale: o,
+        resolvedDefaultButtonText: _,
+        handleButtonClick: G,
+        inputValue: l,
+        handleInputChange: V,
+        handleSendClick: y
       }
     ),
-    !x && !y && e.properties?.placeholder && /* @__PURE__ */ s.jsx(
-      H,
+    !g && !D && e.properties?.placeholder && /* @__PURE__ */ r(
+      W,
       {
-        readonly: r,
-        locale: l,
+        dir: c,
+        lang: i,
+        readonly: s,
+        locale: o,
         placeholder: e.properties.placeholder,
-        value: i,
-        onChange: w,
-        onSend: S
+        value: l,
+        onChange: V,
+        onSend: y
       }
     )
   ] });
 };
 export {
-  te as default
+  ne as default
 };
 //# sourceMappingURL=CustomVariable.es.js.map

package/dist/components/ContentRender/plugins/CustomVariable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomVariable.es.js","sources":["../../../../src/components/ContentRender/plugins/CustomVariable.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { OnSendContentParams } from \"../../types\";\nimport { Button } from \"../../ui/button\";\nimport { Checkbox } from \"../../ui/checkbox\";\nimport MarkdownFlowInput from \"../MarkdownFlowInput\";\nimport {\n  InputGroup,\n  InputGroupTextarea,\n} from \"../../ui/inputGroup/input-group\";\nimport type { MarkdownFlowLocale } from \"../../../lib/locale\";\nimport { cn } from \"../../../lib/utils\";\nimport { getContentRenderLocaleTexts } from \"../contentRenderI18n\";\n\n// Define custom variable node type\ninterface CustomVariableNode {\n  tagName: \"custom-variable\";\n  properties?: {\n    variableName?: string;\n    buttonTexts?: string[];\n    buttonValues?: string[];\n    placeholder?: string;\n    isMultiSelect?: boolean;\n  };\n}\n\n// Define custom variable component Props type\ninterface CustomVariableProps {\n  node: CustomVariableNode;\n  defaultButtonText?: string;\n  defaultInputText?: string;\n  defaultSelectedValues?: string[];\n  locale?: MarkdownFlowLocale;\n  readonly?: boolean;\n  onSend?: (content: OnSendContentParams) => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  beforeSend?: (param: OnSendContentParams) => boolean;\n}\n\ninterface ComponentsWithCustomVariable extends Components {\n  \"custom-variable\"?: React.ComponentType<CustomVariableProps>;\n}\n\n// Multi select section( with checkboxes and input)\ninterface MultiSelectSectionProps {\n  node: CustomVariableNode;\n  readonly?: boolean;\n  selectedValues: string[];\n  inputValue: string;\n  confirmButtonText: string;\n  handleCheckboxChange: (value: string, checked: boolean) => void;\n  handleInputChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n  handleConfirmClick: () => void;\n}\n\nconst MultiSelectSection = ({\n  node,\n  readonly,\n  selectedValues,\n  inputValue,\n  confirmButtonText,\n  handleCheckboxChange,\n  handleInputChange,\n  handleKeyDown,\n  handleConfirmClick,\n}: MultiSelectSectionProps) => {\n  const placeholder = node.properties?.placeholder;\n  const confirmDisabled =\n    readonly || (selectedValues.length === 0 && !inputValue?.trim());\n\n  const renderConfirmButton = (extraWrapperClassName?: string) => (\n    <span\n      className={cn(\n        \"multi-select-confirm-wrapper flex flex-col items-center\",\n        confirmDisabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n        extraWrapperClassName\n      )}\n    >\n      <button\n        type=\"button\"\n        className=\"multi-select-confirm-button text-sm font-medium text-primary\"\n        disabled={confirmDisabled}\n        onClick={handleConfirmClick}\n      >\n        {confirmButtonText}\n      </button>\n    </span>\n  );\n\n  return (\n    <span className=\"multi-select-container flex w-full flex-col\">\n      <span className=\"flex flex-wrap gap-y-[9px] gap-x-6\">\n        {node.properties?.buttonTexts?.map((text, index) => {\n          const value = node.properties?.buttonValues?.[index];\n          const buttonValue = value !== undefined ? value : text;\n          return (\n            <Checkbox\n              key={index}\n              label={text}\n              disabled={readonly}\n              checked={selectedValues.includes(buttonValue)}\n              onCheckedChange={(checked) =>\n                handleCheckboxChange(buttonValue, checked)\n              }\n              className=\"text-sm\"\n            />\n          );\n        })}\n      </span>\n      {placeholder ? (\n        <span className=\"block mb-1 w-full max-w-[500px]\">\n          <span className=\"multi-select-input-row flex w-full items-end gap-3\">\n            <InputGroup data-disabled={readonly} className=\"flex-1\">\n              <InputGroupTextarea\n                disabled={readonly}\n                placeholder={placeholder}\n                value={inputValue}\n                onChange={handleInputChange}\n                onKeyDown={handleKeyDown}\n                className=\"text-sm px-3\"\n                title={placeholder}\n              />\n            </InputGroup>\n            {renderConfirmButton(\"shrink-0\")}\n          </span>\n        </span>\n      ) : (\n        renderConfirmButton(\"self-start multi-select-confirm-wrapper--stacked\")\n      )}\n    </span>\n  );\n};\n\n// Single select section( with buttons and input)\ninterface SingleSelectSectionProps {\n  node: CustomVariableNode;\n  readonly?: boolean;\n  locale?: MarkdownFlowLocale;\n  resolvedDefaultButtonText?: string;\n  handleButtonClick: (value: string) => void;\n  inputValue: string;\n  handleInputChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  handleSendClick: () => void;\n}\n\nconst SingleSelectSection = ({\n  node,\n  readonly,\n  locale,\n  resolvedDefaultButtonText,\n  handleButtonClick,\n  inputValue,\n  handleInputChange,\n  handleSendClick,\n}: SingleSelectSectionProps) => (\n  <span className=\"single-select-container inline-flex w-full flex-col\">\n    <span className=\"flex flex-wrap gap-y-[9px] gap-x-2\">\n      {node.properties?.buttonTexts?.map((text, index) => {\n        const value = node.properties?.buttonValues?.[index];\n        const buttonValue = value !== undefined ? value : text;\n        return (\n          <Button\n            key={index}\n            disabled={readonly}\n            variant=\"outline\"\n            type=\"button\"\n            size=\"sm\"\n            onClick={() => handleButtonClick(buttonValue)}\n            className={cn(\n              \"max-w-full shrink whitespace-normal break-words text-left leading-5 h-auto min-h-8 px-3 py-1.5\",\n              \"hover:bg-gray-200\",\n              resolvedDefaultButtonText === text && \"select\"\n            )}\n          >\n            {text}\n          </Button>\n        );\n      })}\n    </span>\n    {node.properties?.placeholder && (\n      <span className=\"mt-[9px] mb-1\">\n        <MarkdownFlowInput\n          disabled={readonly}\n          locale={locale}\n          placeholder={node.properties.placeholder}\n          value={inputValue}\n          onChange={handleInputChange}\n          onSend={handleSendClick}\n          title={node.properties.placeholder}\n        />\n      </span>\n    )}\n  </span>\n);\n\n// Pure input\ninterface InputSectionProps {\n  readonly?: boolean;\n  locale?: MarkdownFlowLocale;\n  placeholder?: string;\n  value: string;\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  onSend: () => void;\n}\n\nconst InputSection = ({\n  readonly,\n  locale,\n  placeholder,\n  value,\n  onChange,\n  onSend,\n}: InputSectionProps) => {\n  if (!placeholder) {\n    return null;\n  }\n\n  return (\n    <MarkdownFlowInput\n      disabled={readonly}\n      locale={locale}\n      placeholder={placeholder}\n      value={value}\n      onChange={onChange}\n      onSend={onSend}\n      title={placeholder}\n    />\n  );\n};\n\n// Define custom variable component\nconst CustomButtonInputVariable = ({\n  node,\n  readonly,\n  locale,\n  defaultButtonText,\n  defaultInputText,\n  defaultSelectedValues,\n  onSend,\n  confirmButtonText,\n  beforeSend = () => true,\n}: CustomVariableProps) => {\n  const localeTexts = getContentRenderLocaleTexts(locale);\n  const resolvedConfirmButtonText =\n    confirmButtonText || localeTexts.confirmButtonText;\n  const [inputValue, setInputValue] = React.useState(defaultInputText || \"\");\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(\n    defaultSelectedValues || []\n  );\n  const interactionDefinitionKey = JSON.stringify({\n    buttonTexts: node.properties?.buttonTexts,\n    buttonValues: node.properties?.buttonValues,\n    isMultiSelect: node.properties?.isMultiSelect,\n    placeholder: node.properties?.placeholder,\n    variableName: node.properties?.variableName,\n  });\n  const isMultiSelect = node.properties?.isMultiSelect ?? false;\n  const baseButtonTexts = node.properties?.buttonTexts || [];\n  const shouldUseFallbackButton =\n    !isMultiSelect &&\n    baseButtonTexts.length === 0 &&\n    !node.properties?.placeholder;\n  const fallbackButtonLabel =\n    node.properties?.variableName?.trim() ||\n    defaultButtonText ||\n    resolvedConfirmButtonText;\n\n  const singleSelectNode = React.useMemo<CustomVariableNode>(() => {\n    if (!shouldUseFallbackButton) {\n      return node;\n    }\n    return {\n      ...node,\n      properties: {\n        ...(node.properties || {}),\n        buttonTexts: [fallbackButtonLabel],\n        buttonValues: [fallbackButtonLabel],\n      },\n    };\n  }, [fallbackButtonLabel, node, shouldUseFallbackButton]);\n\n  const singleSelectButtonTexts =\n    singleSelectNode.properties?.buttonTexts || [];\n  const singleSelectButtonValues =\n    singleSelectNode.properties?.buttonValues || [];\n  const isSingleSelect = !isMultiSelect && singleSelectButtonTexts.length > 0;\n\n  const handleButtonClick = (value: string) => {\n    const param = {\n      variableName: node.properties?.variableName || \"\",\n      buttonText: value,\n    };\n    if (!beforeSend?.(param)) return;\n    onSend?.(param);\n  };\n\n  const handleCheckboxChange = (value: string, checked: boolean) => {\n    setSelectedValues((prev) => {\n      if (checked) {\n        return [...prev, value];\n      } else {\n        return prev.filter((v) => v !== value);\n      }\n    });\n  };\n\n  const handleConfirmClick = () => {\n    const noSelection = selectedValues.length === 0 && !inputValue?.trim();\n    const param = {\n      variableName: node.properties?.variableName || \"\",\n      selectedValues,\n      inputText: inputValue?.trim() || undefined,\n    };\n    if (readonly || noSelection) return;\n    if (!beforeSend?.(param)) return;\n    onSend?.(param);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInputValue(e.target.value);\n  };\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.nativeEvent.isComposing || e.keyCode === 229) {\n      return;\n    }\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      if (isMultiSelect) {\n        const noSelection = selectedValues.length === 0 && !inputValue.trim();\n        if (!noSelection) handleConfirmClick();\n      } else {\n        handleSendClick();\n      }\n    }\n  };\n  const handleSendClick = () => {\n    const param = {\n      variableName: node.properties?.variableName || \"\",\n      inputText: inputValue,\n    };\n    if (!beforeSend?.(param)) return;\n    onSend?.(param);\n  };\n\n  const resolvedDefaultButtonText = React.useMemo(() => {\n    if (!defaultButtonText) {\n      return undefined;\n    }\n    const valueIndex = singleSelectButtonValues.indexOf(defaultButtonText);\n    if (valueIndex > -1) {\n      return singleSelectButtonTexts[valueIndex] ?? defaultButtonText;\n    }\n    const textIndex = singleSelectButtonTexts.indexOf(defaultButtonText);\n    if (textIndex > -1) {\n      return singleSelectButtonTexts[textIndex];\n    }\n    return undefined;\n  }, [defaultButtonText, singleSelectButtonTexts, singleSelectButtonValues]);\n\n  React.useEffect(() => {\n    setInputValue(defaultInputText || \"\");\n  }, [defaultInputText, interactionDefinitionKey]);\n\n  React.useEffect(() => {\n    setSelectedValues(defaultSelectedValues || []);\n  }, [defaultSelectedValues, interactionDefinitionKey]);\n\n  return (\n    <span className=\"custom-variable-container inline-flex items-center flex-wrap\">\n      {isMultiSelect && (\n        <MultiSelectSection\n          node={node}\n          readonly={readonly}\n          selectedValues={selectedValues}\n          inputValue={inputValue}\n          confirmButtonText={resolvedConfirmButtonText}\n          handleCheckboxChange={handleCheckboxChange}\n          handleInputChange={handleInputChange}\n          handleKeyDown={handleKeyDown}\n          handleConfirmClick={handleConfirmClick}\n        />\n      )}\n\n      {!isMultiSelect && isSingleSelect && (\n        <SingleSelectSection\n          node={singleSelectNode}\n          readonly={readonly}\n          locale={locale}\n          resolvedDefaultButtonText={resolvedDefaultButtonText}\n          handleButtonClick={handleButtonClick}\n          inputValue={inputValue}\n          handleInputChange={handleInputChange}\n          handleSendClick={handleSendClick}\n        />\n      )}\n\n      {!isMultiSelect && !isSingleSelect && node.properties?.placeholder && (\n        <InputSection\n          readonly={readonly}\n          locale={locale}\n          placeholder={node.properties.placeholder}\n          value={inputValue}\n          onChange={handleInputChange}\n          onSend={handleSendClick}\n        />\n      )}\n    </span>\n  );\n};\n\nexport default CustomButtonInputVariable;\nexport type {\n  ComponentsWithCustomVariable,\n  CustomVariableNode,\n  CustomVariableProps,\n};\n"],"names":["MultiSelectSection","node","readonly","selectedValues","inputValue","confirmButtonText","handleCheckboxChange","handleInputChange","handleKeyDown","handleConfirmClick","placeholder","confirmDisabled","renderConfirmButton","extraWrapperClassName","jsx","cn","jsxs","text","index","value","buttonValue","Checkbox","checked","InputGroup","InputGroupTextarea","SingleSelectSection","locale","resolvedDefaultButtonText","handleButtonClick","handleSendClick","Button","MarkdownFlowInput","InputSection","onChange","onSend","CustomButtonInputVariable","defaultButtonText","defaultInputText","defaultSelectedValues","beforeSend","localeTexts","getContentRenderLocaleTexts","resolvedConfirmButtonText","setInputValue","React","setSelectedValues","interactionDefinitionKey","isMultiSelect","baseButtonTexts","shouldUseFallbackButton","fallbackButtonLabel","singleSelectNode","singleSelectButtonTexts","singleSelectButtonValues","isSingleSelect","param","prev","v","noSelection","e","valueIndex","textIndex"],"mappings":"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"}
+{"version":3,"file":"CustomVariable.es.js","sources":["../../../../src/components/ContentRender/plugins/CustomVariable.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { OnSendContentParams } from \"../../types\";\nimport { Button } from \"../../ui/button\";\nimport { Checkbox } from \"../../ui/checkbox\";\nimport MarkdownFlowInput from \"../MarkdownFlowInput\";\nimport {\n  InputGroup,\n  InputGroupTextarea,\n} from \"../../ui/inputGroup/input-group\";\nimport type { MarkdownFlowLocale } from \"../../../lib/locale\";\nimport { cn } from \"../../../lib/utils\";\nimport { getContentRenderLocaleTexts } from \"../contentRenderI18n\";\n\n// Define custom variable node type\ninterface CustomVariableNode {\n  tagName: \"custom-variable\";\n  properties?: {\n    variableName?: string;\n    buttonTexts?: string[];\n    buttonValues?: string[];\n    placeholder?: string;\n    isMultiSelect?: boolean;\n  };\n}\n\n// Define custom variable component Props type\ninterface CustomVariableProps {\n  /** Explicit direction for nested input controls. */\n  dir?: React.HTMLAttributes<HTMLDivElement>[\"dir\"];\n  /** Explicit language for nested input controls. */\n  lang?: string;\n  node: CustomVariableNode;\n  defaultButtonText?: string;\n  defaultInputText?: string;\n  defaultSelectedValues?: string[];\n  locale?: MarkdownFlowLocale;\n  readonly?: boolean;\n  onSend?: (content: OnSendContentParams) => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  beforeSend?: (param: OnSendContentParams) => boolean;\n}\n\ninterface ComponentsWithCustomVariable extends Components {\n  \"custom-variable\"?: React.ComponentType<CustomVariableProps>;\n}\n\n// Multi select section( with checkboxes and input)\ninterface MultiSelectSectionProps {\n  node: CustomVariableNode;\n  readonly?: boolean;\n  selectedValues: string[];\n  inputValue: string;\n  confirmButtonText: string;\n  handleCheckboxChange: (value: string, checked: boolean) => void;\n  handleInputChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n  handleConfirmClick: () => void;\n}\n\nconst MultiSelectSection = ({\n  node,\n  readonly,\n  selectedValues,\n  inputValue,\n  confirmButtonText,\n  handleCheckboxChange,\n  handleInputChange,\n  handleKeyDown,\n  handleConfirmClick,\n}: MultiSelectSectionProps) => {\n  const placeholder = node.properties?.placeholder;\n  const confirmDisabled =\n    readonly || (selectedValues.length === 0 && !inputValue?.trim());\n\n  const renderConfirmButton = (extraWrapperClassName?: string) => (\n    <span\n      className={cn(\n        \"multi-select-confirm-wrapper flex flex-col items-center\",\n        confirmDisabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n        extraWrapperClassName\n      )}\n    >\n      <button\n        type=\"button\"\n        className=\"multi-select-confirm-button text-sm font-medium text-primary\"\n        disabled={confirmDisabled}\n        onClick={handleConfirmClick}\n      >\n        {confirmButtonText}\n      </button>\n    </span>\n  );\n\n  return (\n    <span className=\"multi-select-container flex w-full flex-col\">\n      <span className=\"flex flex-wrap gap-y-[9px] gap-x-6\">\n        {node.properties?.buttonTexts?.map((text, index) => {\n          const value = node.properties?.buttonValues?.[index];\n          const buttonValue = value !== undefined ? value : text;\n          return (\n            <Checkbox\n              key={index}\n              label={text}\n              disabled={readonly}\n              checked={selectedValues.includes(buttonValue)}\n              onCheckedChange={(checked) =>\n                handleCheckboxChange(buttonValue, checked)\n              }\n              className=\"text-sm\"\n            />\n          );\n        })}\n      </span>\n      {placeholder ? (\n        <span className=\"block mb-1 w-full max-w-[500px]\">\n          <span className=\"multi-select-input-row flex w-full items-end gap-3\">\n            <InputGroup data-disabled={readonly} className=\"flex-1\">\n              <InputGroupTextarea\n                disabled={readonly}\n                placeholder={placeholder}\n                value={inputValue}\n                onChange={handleInputChange}\n                onKeyDown={handleKeyDown}\n                className=\"text-sm px-3\"\n                title={placeholder}\n              />\n            </InputGroup>\n            {renderConfirmButton(\"shrink-0\")}\n          </span>\n        </span>\n      ) : (\n        renderConfirmButton(\"self-start multi-select-confirm-wrapper--stacked\")\n      )}\n    </span>\n  );\n};\n\n// Single select section( with buttons and input)\ninterface SingleSelectSectionProps {\n  dir?: CustomVariableProps[\"dir\"];\n  lang?: string;\n  node: CustomVariableNode;\n  readonly?: boolean;\n  locale?: MarkdownFlowLocale;\n  resolvedDefaultButtonText?: string;\n  handleButtonClick: (value: string) => void;\n  inputValue: string;\n  handleInputChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  handleSendClick: () => void;\n}\n\nconst SingleSelectSection = ({\n  dir,\n  lang,\n  node,\n  readonly,\n  locale,\n  resolvedDefaultButtonText,\n  handleButtonClick,\n  inputValue,\n  handleInputChange,\n  handleSendClick,\n}: SingleSelectSectionProps) => (\n  <span className=\"single-select-container inline-flex w-full flex-col\">\n    <span className=\"flex flex-wrap gap-y-[9px] gap-x-2\">\n      {node.properties?.buttonTexts?.map((text, index) => {\n        const value = node.properties?.buttonValues?.[index];\n        const buttonValue = value !== undefined ? value : text;\n        return (\n          <Button\n            key={index}\n            disabled={readonly}\n            variant=\"outline\"\n            type=\"button\"\n            size=\"sm\"\n            onClick={() => handleButtonClick(buttonValue)}\n            className={cn(\n              \"max-w-full shrink whitespace-normal break-words text-start leading-5 h-auto min-h-8 px-3 py-1.5\",\n              \"hover:bg-gray-200\",\n              resolvedDefaultButtonText === text && \"select\"\n            )}\n          >\n            {text}\n          </Button>\n        );\n      })}\n    </span>\n    {node.properties?.placeholder && (\n      <span className=\"mt-[9px] mb-1\">\n        <MarkdownFlowInput\n          dir={dir}\n          lang={lang}\n          disabled={readonly}\n          locale={locale}\n          placeholder={node.properties.placeholder}\n          value={inputValue}\n          onChange={handleInputChange}\n          onSend={handleSendClick}\n          title={node.properties.placeholder}\n        />\n      </span>\n    )}\n  </span>\n);\n\n// Pure input\ninterface InputSectionProps {\n  dir?: CustomVariableProps[\"dir\"];\n  lang?: string;\n  readonly?: boolean;\n  locale?: MarkdownFlowLocale;\n  placeholder?: string;\n  value: string;\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  onSend: () => void;\n}\n\nconst InputSection = ({\n  dir,\n  lang,\n  readonly,\n  locale,\n  placeholder,\n  value,\n  onChange,\n  onSend,\n}: InputSectionProps) => {\n  if (!placeholder) {\n    return null;\n  }\n\n  return (\n    <MarkdownFlowInput\n      dir={dir}\n      lang={lang}\n      disabled={readonly}\n      locale={locale}\n      placeholder={placeholder}\n      value={value}\n      onChange={onChange}\n      onSend={onSend}\n      title={placeholder}\n    />\n  );\n};\n\n// Define custom variable component\nconst CustomButtonInputVariable = ({\n  dir,\n  lang,\n  node,\n  readonly,\n  locale,\n  defaultButtonText,\n  defaultInputText,\n  defaultSelectedValues,\n  onSend,\n  confirmButtonText,\n  beforeSend = () => true,\n}: CustomVariableProps) => {\n  const localeTexts = getContentRenderLocaleTexts(locale);\n  const resolvedConfirmButtonText =\n    confirmButtonText || localeTexts.confirmButtonText;\n  const [inputValue, setInputValue] = React.useState(defaultInputText || \"\");\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(\n    defaultSelectedValues || []\n  );\n  const interactionDefinitionKey = JSON.stringify({\n    buttonTexts: node.properties?.buttonTexts,\n    buttonValues: node.properties?.buttonValues,\n    isMultiSelect: node.properties?.isMultiSelect,\n    placeholder: node.properties?.placeholder,\n    variableName: node.properties?.variableName,\n  });\n  const isMultiSelect = node.properties?.isMultiSelect ?? false;\n  const baseButtonTexts = node.properties?.buttonTexts || [];\n  const shouldUseFallbackButton =\n    !isMultiSelect &&\n    baseButtonTexts.length === 0 &&\n    !node.properties?.placeholder;\n  const fallbackButtonLabel =\n    node.properties?.variableName?.trim() ||\n    defaultButtonText ||\n    resolvedConfirmButtonText;\n\n  const singleSelectNode = React.useMemo<CustomVariableNode>(() => {\n    if (!shouldUseFallbackButton) {\n      return node;\n    }\n    return {\n      ...node,\n      properties: {\n        ...(node.properties || {}),\n        buttonTexts: [fallbackButtonLabel],\n        buttonValues: [fallbackButtonLabel],\n      },\n    };\n  }, [fallbackButtonLabel, node, shouldUseFallbackButton]);\n\n  const singleSelectButtonTexts =\n    singleSelectNode.properties?.buttonTexts || [];\n  const singleSelectButtonValues =\n    singleSelectNode.properties?.buttonValues || [];\n  const isSingleSelect = !isMultiSelect && singleSelectButtonTexts.length > 0;\n\n  const handleButtonClick = (value: string) => {\n    const param = {\n      variableName: node.properties?.variableName || \"\",\n      buttonText: value,\n    };\n    if (!beforeSend?.(param)) return;\n    onSend?.(param);\n  };\n\n  const handleCheckboxChange = (value: string, checked: boolean) => {\n    setSelectedValues((prev) => {\n      if (checked) {\n        return [...prev, value];\n      } else {\n        return prev.filter((v) => v !== value);\n      }\n    });\n  };\n\n  const handleConfirmClick = () => {\n    const noSelection = selectedValues.length === 0 && !inputValue?.trim();\n    const param = {\n      variableName: node.properties?.variableName || \"\",\n      selectedValues,\n      inputText: inputValue?.trim() || undefined,\n    };\n    if (readonly || noSelection) return;\n    if (!beforeSend?.(param)) return;\n    onSend?.(param);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInputValue(e.target.value);\n  };\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.nativeEvent.isComposing || e.keyCode === 229) {\n      return;\n    }\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      if (isMultiSelect) {\n        const noSelection = selectedValues.length === 0 && !inputValue.trim();\n        if (!noSelection) handleConfirmClick();\n      } else {\n        handleSendClick();\n      }\n    }\n  };\n  const handleSendClick = () => {\n    const param = {\n      variableName: node.properties?.variableName || \"\",\n      inputText: inputValue,\n    };\n    if (!beforeSend?.(param)) return;\n    onSend?.(param);\n  };\n\n  const resolvedDefaultButtonText = React.useMemo(() => {\n    if (!defaultButtonText) {\n      return undefined;\n    }\n    const valueIndex = singleSelectButtonValues.indexOf(defaultButtonText);\n    if (valueIndex > -1) {\n      return singleSelectButtonTexts[valueIndex] ?? defaultButtonText;\n    }\n    const textIndex = singleSelectButtonTexts.indexOf(defaultButtonText);\n    if (textIndex > -1) {\n      return singleSelectButtonTexts[textIndex];\n    }\n    return undefined;\n  }, [defaultButtonText, singleSelectButtonTexts, singleSelectButtonValues]);\n\n  React.useEffect(() => {\n    setInputValue(defaultInputText || \"\");\n  }, [defaultInputText, interactionDefinitionKey]);\n\n  React.useEffect(() => {\n    setSelectedValues(defaultSelectedValues || []);\n  }, [defaultSelectedValues, interactionDefinitionKey]);\n\n  return (\n    <span className=\"custom-variable-container inline-flex items-center flex-wrap\">\n      {isMultiSelect && (\n        <MultiSelectSection\n          node={node}\n          readonly={readonly}\n          selectedValues={selectedValues}\n          inputValue={inputValue}\n          confirmButtonText={resolvedConfirmButtonText}\n          handleCheckboxChange={handleCheckboxChange}\n          handleInputChange={handleInputChange}\n          handleKeyDown={handleKeyDown}\n          handleConfirmClick={handleConfirmClick}\n        />\n      )}\n\n      {!isMultiSelect && isSingleSelect && (\n        <SingleSelectSection\n          dir={dir}\n          lang={lang}\n          node={singleSelectNode}\n          readonly={readonly}\n          locale={locale}\n          resolvedDefaultButtonText={resolvedDefaultButtonText}\n          handleButtonClick={handleButtonClick}\n          inputValue={inputValue}\n          handleInputChange={handleInputChange}\n          handleSendClick={handleSendClick}\n        />\n      )}\n\n      {!isMultiSelect && !isSingleSelect && node.properties?.placeholder && (\n        <InputSection\n          dir={dir}\n          lang={lang}\n          readonly={readonly}\n          locale={locale}\n          placeholder={node.properties.placeholder}\n          value={inputValue}\n          onChange={handleInputChange}\n          onSend={handleSendClick}\n        />\n      )}\n    </span>\n  );\n};\n\nexport default CustomButtonInputVariable;\nexport type {\n  ComponentsWithCustomVariable,\n  CustomVariableNode,\n  CustomVariableProps,\n};\n"],"names":["MultiSelectSection","node","readonly","selectedValues","inputValue","confirmButtonText","handleCheckboxChange","handleInputChange","handleKeyDown","handleConfirmClick","placeholder","confirmDisabled","renderConfirmButton","extraWrapperClassName","jsx","cn","jsxs","text","index","value","buttonValue","Checkbox","checked","InputGroup","InputGroupTextarea","SingleSelectSection","dir","lang","locale","resolvedDefaultButtonText","handleButtonClick","handleSendClick","Button","MarkdownFlowInput","InputSection","onChange","onSend","CustomButtonInputVariable","defaultButtonText","defaultInputText","defaultSelectedValues","beforeSend","localeTexts","getContentRenderLocaleTexts","resolvedConfirmButtonText","setInputValue","React","setSelectedValues","interactionDefinitionKey","isMultiSelect","baseButtonTexts","shouldUseFallbackButton","fallbackButtonLabel","singleSelectNode","singleSelectButtonTexts","singleSelectButtonValues","isSingleSelect","param","prev","v","noSelection","e","valueIndex","textIndex"],"mappings":"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"}

package/dist/components/ContentRender/plugins/MermaidChart.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../../_virtual/jsx-runtime.cjs"),a=require("react"),d=require("../../../node_modules/mermaid/dist/mermaid.core.cjs"),u=require("../cjkFontFamily.cjs"),c={emptyChart:"Empty chart content",loading:"Loading Mermaid chart...",badge:"mermaid"},p=t=>t.trim().replace(/^_streaming\s*/i,""),S=({chart:t,messages:s,frozen:l})=>{const[m,n]=a.useState(""),[x,o]=a.useState(""),[g,y]=a.useState(!1),h=async()=>{try{const r=p(t);if(!r){o(s?.emptyChart??c.emptyChart),n("");return}d.default.initialize({startOnLoad:!1,theme:"default",securityLevel:"loose",fontFamily:u.CJK_SAFE_SANS_FONT_FAMILY,themeVariables:{fontFamily:u.CJK_SAFE_SANS_FONT_FAMILY}});try{await d.default.parse(r)}catch(E){const f=String(E).toLowerCase();o(f),n(""),y(!0);return}const i=`mermaid-${Date.now()}`,{svg:j}=await d.default.render(i,r);n(j),o("")}catch(r){const i=String(r).toLowerCase();o(i),n("")}};if(a.useEffect(()=>{l&&g||h()},[t,l]),x){const r=p(t)||t.trim();return e.jsxRuntimeExports.jsxs("div",{className:"my-4 border border-gray-200 rounded-lg bg-gray-50",children:[e.jsxRuntimeExports.jsxs("div",{className:"px-4 py-3 bg-gray-100 border-b border-gray-200 flex items-center gap-2",children:[e.jsxRuntimeExports.jsx("span",{className:"text-yellow-600",children:"⚠️"}),e.jsxRuntimeExports.jsx("span",{className:"text-sm text-yellow-700 font-medium whitespace-pre-wrap",children:x})]}),e.jsxRuntimeExports.jsxs("div",{className:"relative",children:[e.jsxRuntimeExports.jsx("pre",{className:"p-4 text-sm font-mono text-yellow-800",children:e.jsxRuntimeExports.jsx("code",{children:r})}),e.jsxRuntimeExports.jsx("div",{className:"absolute top-2 right-2 px-2 py-1 text-xs text-yellow-700 bg-white/90 rounded border border-gray-200",children:s?.badge??c.badge})]})]})}return e.jsxRuntimeExports.jsx("div",{className:"my-4 text-center overflow-auto content-render-mermaid",children:m?e.jsxRuntimeExports.jsx("div",{className:"content-render-mermaid-inner",dangerouslySetInnerHTML:{__html:m}}):e.jsxRuntimeExports.jsx("div",{className:"py-8 text-gray-500 italic",children:s?.loading??c.loading})})},b=a.memo(S,(t,s)=>t.chart===s.chart&&t.frozen===s.frozen);exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("react"),c=require("../../../node_modules/mermaid/dist/mermaid.core.cjs"),h=require("../cjkFontFamily.cjs"),i={emptyChart:"Empty chart content",loading:"Loading Mermaid chart...",error:"Unable to display the Mermaid chart",badge:"mermaid"},y=e=>e.trim().replace(/^_streaming\s*/i,""),_=({chart:e,messages:r,frozen:m})=>{const[g,o]=s.useState(""),[u,d]=s.useState(""),[p,b]=s.useState(!1),x=async()=>{try{const a=y(e);if(!a){d(""),o("");return}c.default.initialize({startOnLoad:!1,theme:"default",securityLevel:"loose",fontFamily:h.CJK_SAFE_SANS_FONT_FAMILY,themeVariables:{fontFamily:h.CJK_SAFE_SANS_FONT_FAMILY}});try{await c.default.parse(a)}catch(S){const C=String(S).toLowerCase();d(C),o(""),b(!0);return}const l=`mermaid-${Date.now()}`,{svg:f}=await c.default.render(l,a);o(f),d("")}catch(a){const l=String(a).toLowerCase();d(l),o("")}};s.useEffect(()=>{m&&p||x()},[e,m]);const n=y(e);if(u||!n){const a=n||e.trim();return t.jsxs("div",{className:"my-4 border border-gray-200 rounded-lg bg-gray-50","data-mermaid-error":u||void 0,children:[t.jsxs("div",{className:"px-4 py-3 bg-gray-100 border-b border-gray-200 flex items-center gap-2",children:[t.jsx("span",{className:"text-yellow-600",children:"⚠️"}),t.jsx("span",{dir:"auto",className:"text-sm text-yellow-700 font-medium whitespace-pre-wrap",children:n?r?.error??i.error:r?.emptyChart??i.emptyChart})]}),t.jsxs("div",{className:"relative",children:[t.jsx("pre",{dir:"ltr",className:"p-4 text-sm font-mono text-yellow-800 text-start [unicode-bidi:isolate]",children:t.jsx("code",{children:a})}),t.jsx("div",{className:"absolute top-2 right-2 px-2 py-1 text-xs text-yellow-700 bg-white/90 rounded border border-gray-200",children:r?.badge??i.badge})]})]})}return t.jsx("div",{className:"my-4 text-center overflow-auto content-render-mermaid",children:g?t.jsx("div",{className:"content-render-mermaid-inner",dangerouslySetInnerHTML:{__html:g}}):t.jsx("div",{className:"py-8 text-gray-500 italic",children:r?.loading??i.loading})})},j=s.memo(_,(e,r)=>e.chart===r.chart&&e.frozen===r.frozen&&e.messages?.emptyChart===r.messages?.emptyChart&&e.messages?.loading===r.messages?.loading&&e.messages?.error===r.messages?.error&&e.messages?.badge===r.messages?.badge);exports.default=j;
 //# sourceMappingURL=MermaidChart.cjs.map

package/dist/components/ContentRender/plugins/MermaidChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidChart.cjs","sources":["../../../../src/components/ContentRender/plugins/MermaidChart.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport mermaid from \"mermaid\";\nimport { CJK_SAFE_SANS_FONT_FAMILY } from \"../cjkFontFamily\";\n\nexport interface MermaidChartProps {\n  chart: string;\n  messages?: {\n    emptyChart?: string;\n    loading?: string;\n    badge?: string;\n  };\n  frozen?: boolean;\n}\n\nconst DEFAULT_MESSAGES = {\n  emptyChart: \"Empty chart content\",\n  loading: \"Loading Mermaid chart...\",\n  badge: \"mermaid\",\n} as const;\n\nconst preprocessChart = (raw: string) =>\n  raw.trim().replace(/^_streaming\\s*/i, \"\");\n\nconst MermaidChart: React.FC<MermaidChartProps> = ({\n  chart,\n  messages,\n  frozen,\n}) => {\n  const [svg, setSvg] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [hasRendered, setHasRendered] = useState(false);\n\n  const renderChart = async () => {\n    try {\n      const cleaned = preprocessChart(chart);\n\n      if (!cleaned) {\n        setError(messages?.emptyChart ?? DEFAULT_MESSAGES.emptyChart);\n        setSvg(\"\");\n        return;\n      }\n\n      // Initialize Mermaid with an explicit CJK-safe font stack.\n      // Using a concrete stack avoids clipping caused by `inherit` resolving to\n      // Storybook's default font during off-screen rendering.\n      mermaid.initialize({\n        startOnLoad: false,\n        theme: \"default\",\n        securityLevel: \"loose\",\n        fontFamily: CJK_SAFE_SANS_FONT_FAMILY,\n        themeVariables: {\n          fontFamily: CJK_SAFE_SANS_FONT_FAMILY,\n        },\n      });\n\n      // use mermaid.parse to check for errors\n      try {\n        await mermaid.parse(cleaned);\n      } catch (parseErr) {\n        const parseErrorMsg = String(parseErr).toLowerCase();\n        setError(parseErrorMsg);\n        setSvg(\"\");\n        // once render success, setHasRendered flag\n        setHasRendered(true);\n        return;\n      }\n\n      const id = `mermaid-${Date.now()}`;\n\n      // Render the chart\n      const { svg: renderedSvg } = await mermaid.render(id, cleaned);\n      setSvg(renderedSvg);\n      setError(\"\");\n    } catch (err) {\n      const errorMsg = String(err).toLowerCase();\n      setError(errorMsg);\n      setSvg(\"\");\n    }\n  };\n\n  useEffect(() => {\n    if (frozen && hasRendered) return; // 核心：被冻结就不渲染\n    renderChart();\n  }, [chart, frozen]);\n\n  if (error) {\n    const displayChart = preprocessChart(chart) || chart.trim();\n    return (\n      <div className=\"my-4 border border-gray-200 rounded-lg bg-gray-50\">\n        <div className=\"px-4 py-3 bg-gray-100 border-b border-gray-200 flex items-center gap-2\">\n          <span className=\"text-yellow-600\">⚠️</span>\n          <span className=\"text-sm text-yellow-700 font-medium whitespace-pre-wrap\">\n            {error}\n          </span>\n        </div>\n        <div className=\"relative\">\n          <pre className=\"p-4 text-sm font-mono text-yellow-800\">\n            <code>{displayChart}</code>\n          </pre>\n          <div className=\"absolute top-2 right-2 px-2 py-1 text-xs text-yellow-700 bg-white/90 rounded border border-gray-200\">\n            {messages?.badge ?? DEFAULT_MESSAGES.badge}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"my-4 text-center overflow-auto content-render-mermaid\">\n      {svg ? (\n        <div\n          className=\"content-render-mermaid-inner\"\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      ) : (\n        <div className=\"py-8 text-gray-500 italic\">\n          {messages?.loading ?? DEFAULT_MESSAGES.loading}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default React.memo(MermaidChart, (prev, next) => {\n  return prev.chart === next.chart && prev.frozen === next.frozen;\n});\n"],"names":["DEFAULT_MESSAGES","preprocessChart","raw","MermaidChart","chart","messages","frozen","svg","setSvg","useState","error","setError","hasRendered","setHasRendered","renderChart","cleaned","mermaid","CJK_SAFE_SANS_FONT_FAMILY","parseErr","parseErrorMsg","id","renderedSvg","err","errorMsg","useEffect","displayChart","jsxs","jsx","MermaidChart$1","React","prev","next"],"mappings":"uRAcMA,EAAmB,CACvB,WAAY,sBACZ,QAAS,2BACT,MAAO,SACT,EAEMC,EAAmBC,GACvBA,EAAI,OAAO,QAAQ,kBAAmB,EAAE,EAEpCC,EAA4C,CAAC,CACjD,MAAAC,EACA,SAAAC,EACA,OAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAKC,CAAM,EAAIC,EAAAA,SAAS,EAAE,EAC3B,CAACC,EAAOC,CAAQ,EAAIF,EAAAA,SAAS,EAAE,EAC/B,CAACG,EAAaC,CAAc,EAAIJ,EAAAA,SAAS,EAAK,EAE9CK,EAAc,SAAY,CAC9B,GAAI,CACF,MAAMC,EAAUd,EAAgBG,CAAK,EAErC,GAAI,CAACW,EAAS,CACZJ,EAASN,GAAU,YAAcL,EAAiB,UAAU,EAC5DQ,EAAO,EAAE,EACT,MACF,CAKAQ,EAAAA,QAAQ,WAAW,CACjB,YAAa,GACb,MAAO,UACP,cAAe,QACf,WAAYC,EAAAA,0BACZ,eAAgB,CACd,WAAYA,EAAAA,yBAAA,CACd,CACD,EAGD,GAAI,CACF,MAAMD,EAAAA,QAAQ,MAAMD,CAAO,CAC7B,OAASG,EAAU,CACjB,MAAMC,EAAgB,OAAOD,CAAQ,EAAE,YAAA,EACvCP,EAASQ,CAAa,EACtBX,EAAO,EAAE,EAETK,EAAe,EAAI,EACnB,MACF,CAEA,MAAMO,EAAK,WAAW,KAAK,IAAA,CAAK,GAG1B,CAAE,IAAKC,CAAA,EAAgB,MAAML,EAAAA,QAAQ,OAAOI,EAAIL,CAAO,EAC7DP,EAAOa,CAAW,EAClBV,EAAS,EAAE,CACb,OAASW,EAAK,CACZ,MAAMC,EAAW,OAAOD,CAAG,EAAE,YAAA,EAC7BX,EAASY,CAAQ,EACjBf,EAAO,EAAE,CACX,CACF,EAOA,GALAgB,EAAAA,UAAU,IAAM,CACVlB,GAAUM,GACdE,EAAA,CACF,EAAG,CAACV,EAAOE,CAAM,CAAC,EAEdI,EAAO,CACT,MAAMe,EAAexB,EAAgBG,CAAK,GAAKA,EAAM,KAAA,EACrD,OACEsB,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,oDACb,SAAA,CAAAA,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,yEACb,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,kBAAkB,SAAA,KAAE,EACpCA,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,0DACb,SAAAjB,CAAA,CACH,CAAA,EACF,EACAgB,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,WACb,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,OAAI,UAAU,wCACb,SAAAA,wBAAC,OAAA,CAAM,WAAa,CAAA,CACtB,0BACC,MAAA,CAAI,UAAU,sGACZ,SAAAtB,GAAU,OAASL,EAAiB,KAAA,CACvC,CAAA,CAAA,CACF,CAAA,EACF,CAEJ,CAEA,OACE2B,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wDACZ,SAAApB,EACCoB,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,+BACV,wBAAyB,CAAE,OAAQpB,CAAA,CAAI,CAAA,0BAGxC,MAAA,CAAI,UAAU,4BACZ,SAAAF,GAAU,SAAWL,EAAiB,OAAA,CACzC,CAAA,CAEJ,CAEJ,EAEA4B,EAAeC,EAAM,KAAK1B,EAAc,CAAC2B,EAAMC,IACtCD,EAAK,QAAUC,EAAK,OAASD,EAAK,SAAWC,EAAK,MAC1D"}
+{"version":3,"file":"MermaidChart.cjs","sources":["../../../../src/components/ContentRender/plugins/MermaidChart.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport mermaid from \"mermaid\";\nimport { CJK_SAFE_SANS_FONT_FAMILY } from \"../cjkFontFamily\";\n\nexport interface MermaidChartProps {\n  chart: string;\n  messages?: {\n    emptyChart?: string;\n    loading?: string;\n    error?: string;\n    badge?: string;\n  };\n  frozen?: boolean;\n}\n\nconst DEFAULT_MESSAGES = {\n  emptyChart: \"Empty chart content\",\n  loading: \"Loading Mermaid chart...\",\n  error: \"Unable to display the Mermaid chart\",\n  badge: \"mermaid\",\n} as const;\n\nconst preprocessChart = (raw: string) =>\n  raw.trim().replace(/^_streaming\\s*/i, \"\");\n\nconst MermaidChart: React.FC<MermaidChartProps> = ({\n  chart,\n  messages,\n  frozen,\n}) => {\n  const [svg, setSvg] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [hasRendered, setHasRendered] = useState(false);\n\n  const renderChart = async () => {\n    try {\n      const cleaned = preprocessChart(chart);\n\n      if (!cleaned) {\n        setError(\"\");\n        setSvg(\"\");\n        return;\n      }\n\n      // Initialize Mermaid with an explicit CJK-safe font stack.\n      // Using a concrete stack avoids clipping caused by `inherit` resolving to\n      // Storybook's default font during off-screen rendering.\n      mermaid.initialize({\n        startOnLoad: false,\n        theme: \"default\",\n        securityLevel: \"loose\",\n        fontFamily: CJK_SAFE_SANS_FONT_FAMILY,\n        themeVariables: {\n          fontFamily: CJK_SAFE_SANS_FONT_FAMILY,\n        },\n      });\n\n      // use mermaid.parse to check for errors\n      try {\n        await mermaid.parse(cleaned);\n      } catch (parseErr) {\n        const parseErrorMsg = String(parseErr).toLowerCase();\n        setError(parseErrorMsg);\n        setSvg(\"\");\n        // once render success, setHasRendered flag\n        setHasRendered(true);\n        return;\n      }\n\n      const id = `mermaid-${Date.now()}`;\n\n      // Render the chart\n      const { svg: renderedSvg } = await mermaid.render(id, cleaned);\n      setSvg(renderedSvg);\n      setError(\"\");\n    } catch (err) {\n      const errorMsg = String(err).toLowerCase();\n      setError(errorMsg);\n      setSvg(\"\");\n    }\n  };\n\n  useEffect(() => {\n    if (frozen && hasRendered) return; // 核心：被冻结就不渲染\n    renderChart();\n  }, [chart, frozen]);\n\n  const cleanedChart = preprocessChart(chart);\n  if (error || !cleanedChart) {\n    const displayChart = cleanedChart || chart.trim();\n    return (\n      <div\n        className=\"my-4 border border-gray-200 rounded-lg bg-gray-50\"\n        data-mermaid-error={error || undefined}\n      >\n        <div className=\"px-4 py-3 bg-gray-100 border-b border-gray-200 flex items-center gap-2\">\n          <span className=\"text-yellow-600\">⚠️</span>\n          <span\n            dir=\"auto\"\n            className=\"text-sm text-yellow-700 font-medium whitespace-pre-wrap\"\n          >\n            {cleanedChart\n              ? (messages?.error ?? DEFAULT_MESSAGES.error)\n              : (messages?.emptyChart ?? DEFAULT_MESSAGES.emptyChart)}\n          </span>\n        </div>\n        <div className=\"relative\">\n          <pre\n            dir=\"ltr\"\n            className=\"p-4 text-sm font-mono text-yellow-800 text-start [unicode-bidi:isolate]\"\n          >\n            <code>{displayChart}</code>\n          </pre>\n          <div className=\"absolute top-2 right-2 px-2 py-1 text-xs text-yellow-700 bg-white/90 rounded border border-gray-200\">\n            {messages?.badge ?? DEFAULT_MESSAGES.badge}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"my-4 text-center overflow-auto content-render-mermaid\">\n      {svg ? (\n        <div\n          className=\"content-render-mermaid-inner\"\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      ) : (\n        <div className=\"py-8 text-gray-500 italic\">\n          {messages?.loading ?? DEFAULT_MESSAGES.loading}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default React.memo(MermaidChart, (prev, next) => {\n  return (\n    prev.chart === next.chart &&\n    prev.frozen === next.frozen &&\n    prev.messages?.emptyChart === next.messages?.emptyChart &&\n    prev.messages?.loading === next.messages?.loading &&\n    prev.messages?.error === next.messages?.error &&\n    prev.messages?.badge === next.messages?.badge\n  );\n});\n"],"names":["DEFAULT_MESSAGES","preprocessChart","raw","MermaidChart","chart","messages","frozen","svg","setSvg","useState","error","setError","hasRendered","setHasRendered","renderChart","cleaned","mermaid","CJK_SAFE_SANS_FONT_FAMILY","parseErr","parseErrorMsg","id","renderedSvg","err","errorMsg","useEffect","cleanedChart","displayChart","jsxs","jsx","MermaidChart$1","React","prev","next"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ export interface MermaidChartProps {
     messages?: {
         emptyChart?: string;
         loading?: string;
+        error?: string;
         badge?: string;
     };
     frozen?: boolean;