markdown-flow-ui 0.1.100-beta.47 → 0.1.100-beta.49

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

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

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 { cn } from \"../../../lib/utils\";\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  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  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  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          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  placeholder?: string;\n  value: string;\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  onSend: () => void;\n}\n\nconst InputSection = ({\n  readonly,\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      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  defaultButtonText,\n  defaultInputText,\n  defaultSelectedValues,\n  onSend,\n  confirmButtonText = \"Submit\", // Default to English, can be overridden\n  beforeSend = () => true,\n}: CustomVariableProps) => {\n  const [inputValue, setInputValue] = React.useState(defaultInputText || \"\");\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(\n    defaultSelectedValues || []\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() || defaultButtonText || \"Submit\";\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  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={confirmButtonText}\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          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          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","resolvedDefaultButtonText","handleButtonClick","handleSendClick","Button","MarkdownFlowInput","InputSection","onChange","onSend","CustomButtonInputVariable","defaultButtonText","defaultInputText","defaultSelectedValues","beforeSend","setInputValue","React","setSelectedValues","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 { cn } from \"../../../lib/utils\";\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  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  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  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          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  placeholder?: string;\n  value: string;\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  onSend: () => void;\n}\n\nconst InputSection = ({\n  readonly,\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      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  defaultButtonText,\n  defaultInputText,\n  defaultSelectedValues,\n  onSend,\n  confirmButtonText = \"Submit\", // Default to English, can be overridden\n  beforeSend = () => true,\n}: CustomVariableProps) => {\n  const [inputValue, setInputValue] = React.useState(defaultInputText || \"\");\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(\n    defaultSelectedValues || []\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() || defaultButtonText || \"Submit\";\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, node]);\n\n  React.useEffect(() => {\n    setSelectedValues(defaultSelectedValues || []);\n  }, [defaultSelectedValues, node]);\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={confirmButtonText}\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          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          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","resolvedDefaultButtonText","handleButtonClick","handleSendClick","Button","MarkdownFlowInput","InputSection","onChange","onSend","CustomButtonInputVariable","defaultButtonText","defaultInputText","defaultSelectedValues","beforeSend","setInputValue","React","setSelectedValues","isMultiSelect","baseButtonTexts","shouldUseFallbackButton","fallbackButtonLabel","singleSelectNode","singleSelectButtonTexts","singleSelectButtonValues","isSingleSelect","param","prev","v","noSelection","e","valueIndex","textIndex"],"mappings":"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"}

package/dist/components/Slide/Slide.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../_virtual/jsx-runtime.cjs.js"),t=require("react"),nt=require("../../lib/sandboxInteraction.cjs.js"),W=require("../../lib/utils.cjs.js"),rt=require("../ContentRender/ContentRender.cjs.js"),_e=require("../ContentRender/IframeSandbox.cjs.js");require("../ui/inputGroup/input-group.cjs.js");const Ae=require("../../lib/interaction-defaults.cjs.js"),st=require("./Player.cjs.js"),ot=require("./useSlide.cjs.js"),ut=require("./useWakePlayerFromIframe.cjs.js"),lt=require("./utils/playerCustomActions.cjs.js");;/* empty css               */const it=require("../../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/loader-circle.cjs.js"),at=1e3,Te=t.memo(({content:w,title:C,defaultButtonText:m,defaultInputText:O,defaultSelectedValues:S,confirmButtonText:ne,copyButtonText:re,copiedButtonText:_,onSend:H,readonly:A=!1})=>r.jsxRuntimeExports.jsxs("div",{className:"slide-player__interaction-card",children:[r.jsxRuntimeExports.jsx("div",{className:"slide-player__interaction-header",children:r.jsxRuntimeExports.jsx("p",{className:"slide-player__interaction-title",children:C})}),r.jsxRuntimeExports.jsx("div",{className:"slide-player__interaction-body",children:r.jsxRuntimeExports.jsx(rt.default,{content:w,defaultButtonText:m,defaultInputText:O,defaultSelectedValues:S,confirmButtonText:ne,copyButtonText:re,copiedButtonText:_,onSend:H,readonly:A,enableTypewriter:!1,sandboxMode:"content"})}),r.jsxRuntimeExports.jsx("div",{className:"slide-player__interaction-arrow"})]}));Te.displayName="InteractionOverlayCard";const ct=(w,C)=>w.length===C.length&&w.every((m,O)=>{const S=C[O];return m.sequence_number===S?.sequence_number&&m.type===S?.type&&m.content===S?.content}),dt=({elementList:w=[],showPlayer:C=!0,playerAlwaysVisible:m=!1,playerClassName:O,playerCustomActions:S,bufferingText:ne="Buffering...",interactionTitle:re,interactionTexts:_,playerAutoHideDelay:H=3e3,interactionDefaultValueOptions:A,onSend:ie,onPlayerVisibilityChange:se,onStepChange:ae,className:ke,onPointerDown:ce,...qe})=>{const oe=t.useRef(null),ue=t.useRef(null),de=t.useRef(null),$=t.useRef(null),D=t.useRef(null),U=t.useRef(null),fe=t.useRef([]),G=t.useRef(!1),T=t.useRef(null),{currentElementList:b,stepElementLists:me,slideElementList:k,currentIndex:c,audioList:h,currentAudioSequenceIndexes:xe,currentStepHasSpeakableElement:E,currentInteractionElement:i,canGoPrev:Pe,canGoNext:I,handlePrev:pe,handleNext:R}=ot.default(w),he=t.useMemo(()=>{if(!(c<0))return k[c]},[c,k]),Me=k.filter(e=>e.is_renderable!==!1).length===1,g=C&&(k.length>0||h.length>0||!!i),x=t.useMemo(()=>xe.map(e=>h[e]?.audioKey).filter(e=>!!e),[h,xe]),[ge,Y]=t.useState(!0),[J,z]=t.useState(!1),[y,q]=t.useState(null),[Ne,f]=t.useState(!1),[P,ye]=t.useState(!1),[u,Q]=t.useState(),[X,V]=t.useState(!1),M=g&&(m||ge),Se=t.useMemo(()=>lt.getPlayerCustomActionCount(S),[S]),Be=t.useMemo(()=>({"--slide-player-custom-action-count":String(Se)}),[Se]),{mountedStepStates:Fe,currentMountedStateIndex:Ke}=t.useMemo(()=>{const e=[],n=new Map;return me.forEach((l,a)=>{const s=e.findIndex(o=>ct(o.elementList,l));if(s>=0){e[s]?.sourceStepIndexes.push(a),n.set(a,s);return}e.push({elementList:l,sourceStepIndexes:[a]}),n.set(a,e.length-1)}),{mountedStepStates:e,currentMountedStateIndex:c>=0?n.get(c)??-1:-1}},[c,me]),be=t.useMemo(()=>String(c),[c]),le=t.useMemo(()=>y?h.findIndex(e=>(e.audioKey??"")===y):-1,[h,y]),Z=t.useMemo(()=>x[0]??"none",[x]),ve=t.useMemo(()=>i?`${i.sequence_number??"none"}:${String(i.content??"")}`:"none",[i]),Le=t.useMemo(()=>[be,ve].join("|"),[ve,be]),N=!!t.useMemo(()=>!Z||Z==="none"?"":h.find(n=>n.audioKey===Z)?.audioUrl?.trim()??"",[h,Z]),j=t.useCallback(()=>{$.current!==null&&(window.clearTimeout($.current),$.current=null)},[]),v=t.useCallback(()=>{U.current!==null&&(window.clearTimeout(U.current),U.current=null)},[]),B=t.useCallback(()=>{D.current!==null&&(window.clearTimeout(D.current),D.current=null)},[]),F=t.useCallback(()=>{B(),v(),q(null),f(!1),ye(!1),Q(void 0),V(!1)},[B,v]),K=t.useCallback(()=>{const e=x[0];return e?(q(e),!0):!1},[x]),ee=t.useCallback(()=>{v(),V(!1),!K()&&I&&R()},[I,v,R,K]),d=t.useCallback((e=J)=>{g&&(Y(!0),j(),!(m||!e||H<=0)&&($.current=window.setTimeout(()=>{Y(!1),$.current=null},H)))},[j,J,m,H,g]),Oe=!!(i?.readonly||i?.user_input?.trim()),L=!!i&&!Oe;t.useEffect(()=>()=>{B(),j(),v()},[B,v,j]),t.useEffect(()=>(se?.(M),()=>{se?.(!1)}),[se,M]),t.useEffect(()=>{ae?.(he,c)},[c,he,ae]),t.useEffect(()=>{if(!g){j(),Y(!1);return}if(m){j(),Y(!0);return}J||d(!0)},[j,J,m,g,d]),t.useEffect(()=>{if(typeof window>"u")return;const e=n=>{n.origin===window.location.origin&&nt.isSandboxInteractionMessage(n.data)&&g&&(z(!0),d(!0))};return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}},[g,d]),ut.default({sectionRef:oe,enabled:g,onWake:()=>{z(!0),d(!0)}}),t.useEffect(()=>{const e=T.current===c&&!!i;if(F(),!(b.length===0&&!i)){if(L||e){Q(i),V(!0),T.current=null;return}if(i&&(Q(i),V(!1),T.current=null),!K()){if(E){f(!0);return}if(I)return D.current=window.setTimeout(()=>{D.current=null,R()},at),()=>{B()}}}},[I,B,b.length,i,Le,E,R,L,F,K]),t.useEffect(()=>{if(!E||L){f(!1);return}if(P){f(!1);return}x.length===0&&f(!0)},[x.length,E,P,L]),t.useEffect(()=>{y||x.length===0||!E||L||P||K()},[y,x,E,P,L,K]),t.useEffect(()=>{!y||le>=0||q(null)},[le,y]),t.useEffect(()=>{N&&f(!1)},[N]);const Ee=t.useMemo(()=>u?Ae.getInteractionDefaultValues(typeof u.content=="string"?u.content:void 0,u.user_input,A):{},[u,A]),He=t.useMemo(()=>{if(u)return Ae.getInteractionDefaultSelectedValues(typeof u.content=="string"?u.content:void 0,u.user_input,A)},[u,A]),Re=!!u?.user_input?.trim(),Ie=!!u?.readonly||Re,je=Ie||Re,$e=t.useCallback(e=>{const l=[...e.selectedValues??[],e.inputText?.trim()??"",e.buttonText?.trim()??""].filter(Boolean).join(", ");Q(a=>!a||!l?a:{...a,user_input:l}),ie?.(e,u),ee()},[u,ee,ie]);t.useEffect(()=>{if(v(),!(!X||!je))return U.current=window.setTimeout(()=>{U.current=null,ee()},2e3),()=>{v()}},[v,ee,X,je]);const De=(e,n={})=>e?e.type==="slot"?r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:e.content}):e.type==="html"?r.jsxRuntimeExports.jsx(_e.default,{className:"content-render-iframe",hideFullScreen:!0,mode:"blackboard",replaceRootScreenHeightWithFull:n.replaceRootScreenHeightWithFull,type:"sandbox",content:e.content}):r.jsxRuntimeExports.jsx(_e.default,{className:"content-render-iframe",hideFullScreen:!0,mode:"blackboard",type:"markdown",content:e.content}):null,Ue=(e=[],n=!1)=>{if(e.length===0)return null;const l=e.filter(s=>s.is_renderable!==!1).length,a=e.reduce((s,o,p)=>o.is_renderable!==!1?p:s,-1);return r.jsxRuntimeExports.jsx("div",{className:"slide-stage__content flex w-full flex-col gap-4",children:e.map((s,o)=>{const p=s.type==="html"&&s.is_renderable===!1;return r.jsxRuntimeExports.jsx("div",{ref:n&&o===a?de:null,"aria-hidden":p||void 0,className:W.cn("w-full shrink-0",l===1&&s.is_renderable!==!1&&"slide-element--single",p?"pointer-events-none fixed left-[-200vw] top-0 -z-10 h-[100dvh] w-[100vw] overflow-hidden opacity-0":s.is_renderable===!1&&"hidden"),children:De(s,{replaceRootScreenHeightWithFull:l===1&&s.type==="html"&&s.is_renderable!==!1})},s.sequence_number??`${s.type}-${o}`)})})},ze=()=>{const e=oe.current;if(e){if(document.fullscreenElement){document.exitFullscreen().catch(()=>{});return}e.requestFullscreen?.().catch(()=>{})}},we=t.useCallback(()=>{const e=ue.current;e&&e.scrollTo({top:e.scrollHeight,behavior:"smooth"})},[]),Ve=t.useCallback(()=>{G.current=!0,T.current=null,z(!0),f(!1),d(!0),F(),pe()},[pe,F,d]),We=t.useCallback(()=>{G.current=!0,T.current=null,z(!0),f(!1),d(!0),F(),R()},[R,F,d]),Ge=t.useCallback(e=>{if(N){f(!1);return}if(!E||P){f(!1);return}f(e)},[E,P,N]),Ye=t.useCallback(e=>{const n=h[e]?.audioKey;if(!n||!y||n!==y)return;const l=x.findIndex(o=>o===n);if(l<0){q(null);return}const a=l+1,s=x[a];if(s){q(s);return}if(q(null),ye(!0),f(!1),I){const o=c+1,p=k[o];N&&p?.type==="interaction"&&(T.current=o),R()}},[h,I,c,y,x,R,N,k]),Je=t.useCallback(()=>{u&&V(e=>!e)},[u]),Ce=t.useCallback(e=>{e.stopPropagation(),M&&d(!0)},[ge,d]),Qe=t.useCallback(e=>{ce?.(e),z(!0),d(!0)},[ce,d]),Xe=!!u&&X,te=t.useMemo(()=>b.map((e,n)=>`${e.sequence_number??`${e.type}-${n}`}:${String(e.is_new??"")}`),[b]);return t.useEffect(()=>{const e=fe.current,a=(e.length>0&&e.length<te.length&&e.every((o,p)=>o===te[p])?b.slice(e.length):[]).some(o=>o.is_new===!1);if(fe.current=te,!a)return;const s=window.requestAnimationFrame(()=>{const o=ue.current,p=de.current;if(!o||!p)return;const Ze=o.getBoundingClientRect(),et=p.getBoundingClientRect(),tt=o.scrollTop+(et.top-Ze.top);o.scrollTo({top:Math.max(tt,0),behavior:"smooth"})});return()=>{window.cancelAnimationFrame(s)}},[b,te]),t.useEffect(()=>{if(!G.current||(G.current=!1,b.length===0))return;const e=window.requestAnimationFrame(()=>{we()});return()=>{window.cancelAnimationFrame(e)}},[b,we]),r.jsxRuntimeExports.jsxs("section",{ref:oe,className:W.cn("relative h-full w-full",ke),onPointerDown:Qe,...qe,children:[r.jsxRuntimeExports.jsx("div",{className:W.cn("h-full min-h-0 w-full",Me?"slide-content--single":"grid gap-4"),children:b.length>0?r.jsxRuntimeExports.jsx("div",{className:"slide-stage",children:r.jsxRuntimeExports.jsx("div",{ref:ue,className:"slide-stage__layer w-full",children:Fe.map((e,n)=>{const l=n===Ke;return r.jsxRuntimeExports.jsx("div",{"aria-hidden":!l||void 0,className:"w-full h-full",style:{display:l?void 0:"none"},children:Ue(e.elementList,l)},e.sourceStepIndexes[0]??n)})})}):null}),Ne?r.jsxRuntimeExports.jsxs("div",{className:"pointer-events-none absolute left-1/2 top-1/2 z-[3] flex size-28 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-2 rounded-2xl bg-foreground/65 px-3 py-4 text-center text-xs leading-4 font-medium text-background shadow-lg backdrop-blur-sm",children:[r.jsxRuntimeExports.jsx(it.default,{className:"size-5 animate-spin text-background"}),r.jsxRuntimeExports.jsx("span",{children:ne})]}):null,Xe?r.jsxRuntimeExports.jsx("div",{className:W.cn("slide-interaction-overlay",M&&g?"slide-interaction-overlay--with-player":"slide-interaction-overlay--standalone"),onClick:Ce,onPointerDown:Ce,style:Be,children:r.jsxRuntimeExports.jsx(Te,{content:String(u?.content??""),defaultButtonText:Ee.buttonText??"",defaultInputText:Ee.inputText??"",defaultSelectedValues:He,confirmButtonText:_?.confirmButtonText,copyButtonText:_?.copyButtonText,copiedButtonText:_?.copiedButtonText,onSend:$e,readonly:Ie,title:_?.title??re??"Submit the content below to continue."})}):null,g?r.jsxRuntimeExports.jsx(st.default,{audioList:h,className:W.cn("absolute left-1/2 bottom-6 z-[2] -translate-x-1/2",O,!M&&"pointer-events-none opacity-0"),currentAudioIndex:le,defaultPlaying:!0,hasInteraction:!!u,isInteractionOpen:X,onLoadingChange:Ge,nextDisabled:!I,onEnded:Ye,onFullscreen:ze,onInteractionToggle:Je,onNext:We,onPrev:Ve,prevDisabled:!Pe,showControls:M,customActions:S}):null]})};exports.default=dt;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../_virtual/jsx-runtime.cjs.js"),t=require("react"),nt=require("../../lib/sandboxInteraction.cjs.js"),W=require("../../lib/utils.cjs.js"),rt=require("../ContentRender/ContentRender.cjs.js"),Ae=require("../ContentRender/IframeSandbox.cjs.js");require("../ui/inputGroup/input-group.cjs.js");const Te=require("../../lib/interaction-defaults.cjs.js"),st=require("./Player.cjs.js"),ot=require("./useSlide.cjs.js"),ut=require("./useWakePlayerFromIframe.cjs.js"),lt=require("./utils/playerCustomActions.cjs.js");;/* empty css               */const it=require("../../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/loader-circle.cjs.js"),at=1e3,ke=t.memo(({content:w,title:C,defaultButtonText:m,defaultInputText:O,defaultSelectedValues:S,confirmButtonText:ne,copyButtonText:re,copiedButtonText:_,onSend:H,readonly:A=!1})=>r.jsxRuntimeExports.jsxs("div",{className:"slide-player__interaction-card",children:[r.jsxRuntimeExports.jsx("div",{className:"slide-player__interaction-header",children:r.jsxRuntimeExports.jsx("p",{className:"slide-player__interaction-title",children:C})}),r.jsxRuntimeExports.jsx("div",{className:"slide-player__interaction-body",children:r.jsxRuntimeExports.jsx(rt.default,{content:w,defaultButtonText:m,defaultInputText:O,defaultSelectedValues:S,confirmButtonText:ne,copyButtonText:re,copiedButtonText:_,onSend:H,readonly:A,enableTypewriter:!1,sandboxMode:"content"})}),r.jsxRuntimeExports.jsx("div",{className:"slide-player__interaction-arrow"})]}));ke.displayName="InteractionOverlayCard";const ct=(w,C)=>w.length===C.length&&w.every((m,O)=>{const S=C[O];return m.sequence_number===S?.sequence_number&&m.type===S?.type&&m.content===S?.content}),dt=({elementList:w=[],showPlayer:C=!0,playerAlwaysVisible:m=!1,playerClassName:O,playerCustomActions:S,bufferingText:ne="Buffering...",interactionTitle:re,interactionTexts:_,playerAutoHideDelay:H=3e3,interactionDefaultValueOptions:A,onSend:ae,onPlayerVisibilityChange:se,onStepChange:ce,className:Pe,onPointerDown:de,...qe})=>{const oe=t.useRef(null),ue=t.useRef(null),fe=t.useRef(null),$=t.useRef(null),D=t.useRef(null),U=t.useRef(null),me=t.useRef([]),G=t.useRef(!1),T=t.useRef(null),{currentElementList:v,stepElementLists:xe,slideElementList:k,currentIndex:c,audioList:h,currentAudioSequenceIndexes:pe,currentStepHasSpeakableElement:E,currentInteractionElement:i,canGoPrev:Be,canGoNext:I,handlePrev:he,handleNext:R}=ot.default(w),ge=t.useMemo(()=>{if(!(c<0))return k[c]},[c,k]),Me=k.filter(e=>e.is_renderable!==!1).length===1,g=C&&(k.length>0||h.length>0||!!i),x=t.useMemo(()=>pe.map(e=>h[e]?.audioKey).filter(e=>!!e),[h,pe]),[ye,Y]=t.useState(!0),[J,z]=t.useState(!1),[y,P]=t.useState(null),[Ne,f]=t.useState(!1),[q,Se]=t.useState(!1),[o,Q]=t.useState(),[X,V]=t.useState(!1),B=g&&(m||ye),ve=t.useMemo(()=>lt.getPlayerCustomActionCount(S),[S]),Fe=t.useMemo(()=>({"--slide-player-custom-action-count":String(ve)}),[ve]),{mountedStepStates:Ke,currentMountedStateIndex:Le}=t.useMemo(()=>{const e=[],n=new Map;return xe.forEach((l,a)=>{const s=e.findIndex(u=>ct(u.elementList,l));if(s>=0){e[s]?.sourceStepIndexes.push(a),n.set(a,s);return}e.push({elementList:l,sourceStepIndexes:[a]}),n.set(a,e.length-1)}),{mountedStepStates:e,currentMountedStateIndex:c>=0?n.get(c)??-1:-1}},[c,xe]),be=t.useMemo(()=>String(c),[c]),le=t.useMemo(()=>y?h.findIndex(e=>(e.audioKey??"")===y):-1,[h,y]),Z=t.useMemo(()=>x[0]??"none",[x]),Ee=t.useMemo(()=>i?`${i.sequence_number??"none"}:${String(i.content??"")}`:"none",[i]),Oe=t.useMemo(()=>[be,Ee].join("|"),[Ee,be]),M=!!t.useMemo(()=>!Z||Z==="none"?"":h.find(n=>n.audioKey===Z)?.audioUrl?.trim()??"",[h,Z]),j=t.useCallback(()=>{$.current!==null&&(window.clearTimeout($.current),$.current=null)},[]),b=t.useCallback(()=>{U.current!==null&&(window.clearTimeout(U.current),U.current=null)},[]),N=t.useCallback(()=>{D.current!==null&&(window.clearTimeout(D.current),D.current=null)},[]),F=t.useCallback(()=>{N(),b(),P(null),f(!1),Se(!1),Q(void 0),V(!1)},[N,b]),K=t.useCallback(()=>{const e=x[0];return e?(P(e),!0):!1},[x]),ee=t.useCallback(()=>{b(),V(!1),!K()&&I&&R()},[I,b,R,K]),d=t.useCallback((e=J)=>{g&&(Y(!0),j(),!(m||!e||H<=0)&&($.current=window.setTimeout(()=>{Y(!1),$.current=null},H)))},[j,J,m,H,g]),ie=!!(i?.readonly||i?.user_input?.trim()),L=!!i&&!ie;t.useEffect(()=>()=>{N(),j(),b()},[N,b,j]),t.useEffect(()=>(se?.(B),()=>{se?.(!1)}),[se,B]),t.useEffect(()=>{ce?.(ge,c)},[c,ge,ce]),t.useEffect(()=>{if(!g){j(),Y(!1);return}if(m){j(),Y(!0);return}J||d(!0)},[j,J,m,g,d]),t.useEffect(()=>{if(typeof window>"u")return;const e=n=>{n.origin===window.location.origin&&nt.isSandboxInteractionMessage(n.data)&&g&&(z(!0),d(!0))};return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}},[g,d]),ut.default({sectionRef:oe,enabled:g,onWake:()=>{z(!0),d(!0)}}),t.useEffect(()=>{const e=T.current===c&&!!i,n=!!i&&(L||e||ie);if(F(),!(v.length===0&&!i)){if(n){Q(i),V(!0),T.current=null;return}if(i&&(Q(i),V(!1),T.current=null),!K()){if(E){f(!0);return}if(I)return D.current=window.setTimeout(()=>{D.current=null,R()},at),()=>{N()}}}},[I,N,v.length,i,Oe,E,R,ie,L,F,K]),t.useEffect(()=>{if(!E||L){f(!1);return}if(q){f(!1);return}x.length===0&&f(!0)},[x.length,E,q,L]),t.useEffect(()=>{y||x.length===0||!E||L||q||K()},[y,x,E,q,L,K]),t.useEffect(()=>{!y||le>=0||P(null)},[le,y]),t.useEffect(()=>{M&&f(!1)},[M]);const Re=t.useMemo(()=>{if(!o)return{};const e=!!o.user_input?.trim();return Te.getInteractionDefaultValues(typeof o.content=="string"?o.content:void 0,o.user_input,e?void 0:A)},[o,A]),He=t.useMemo(()=>{if(!o)return;const e=!!o.user_input?.trim();return Te.getInteractionDefaultSelectedValues(typeof o.content=="string"?o.content:void 0,o.user_input,e?void 0:A)},[o,A]),Ie=!!o?.user_input?.trim(),je=!!o?.readonly||Ie,we=je||Ie,$e=t.useCallback(e=>{const l=[...e.selectedValues??[],e.inputText?.trim()??"",e.buttonText?.trim()??""].filter(Boolean).join(", ");Q(a=>!a||!l?a:{...a,user_input:l}),ae?.(e,o),ee()},[o,ee,ae]);t.useEffect(()=>{if(b(),!(!X||!we))return U.current=window.setTimeout(()=>{U.current=null,ee()},2e3),()=>{b()}},[b,ee,X,we]);const De=(e,n={})=>e?e.type==="slot"?r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:e.content}):e.type==="html"?r.jsxRuntimeExports.jsx(Ae.default,{className:"content-render-iframe",hideFullScreen:!0,mode:"blackboard",replaceRootScreenHeightWithFull:n.replaceRootScreenHeightWithFull,type:"sandbox",content:e.content}):r.jsxRuntimeExports.jsx(Ae.default,{className:"content-render-iframe",hideFullScreen:!0,mode:"blackboard",type:"markdown",content:e.content}):null,Ue=(e=[],n=!1)=>{if(e.length===0)return null;const l=e.filter(s=>s.is_renderable!==!1).length,a=e.reduce((s,u,p)=>u.is_renderable!==!1?p:s,-1);return r.jsxRuntimeExports.jsx("div",{className:"slide-stage__content flex w-full flex-col gap-4",children:e.map((s,u)=>{const p=s.type==="html"&&s.is_renderable===!1;return r.jsxRuntimeExports.jsx("div",{ref:n&&u===a?fe:null,"aria-hidden":p||void 0,className:W.cn("w-full shrink-0",l===1&&s.is_renderable!==!1&&"slide-element--single",p?"pointer-events-none fixed left-[-200vw] top-0 -z-10 h-[100dvh] w-[100vw] overflow-hidden opacity-0":s.is_renderable===!1&&"hidden"),children:De(s,{replaceRootScreenHeightWithFull:l===1&&s.type==="html"&&s.is_renderable!==!1})},s.sequence_number??`${s.type}-${u}`)})})},ze=()=>{const e=oe.current;if(e){if(document.fullscreenElement){document.exitFullscreen().catch(()=>{});return}e.requestFullscreen?.().catch(()=>{})}},Ce=t.useCallback(()=>{const e=ue.current;e&&e.scrollTo({top:e.scrollHeight,behavior:"smooth"})},[]),Ve=t.useCallback(()=>{G.current=!0,T.current=null,z(!0),f(!1),d(!0),F(),he()},[he,F,d]),We=t.useCallback(()=>{G.current=!0,T.current=null,z(!0),f(!1),d(!0),F(),R()},[R,F,d]),Ge=t.useCallback(e=>{if(M){f(!1);return}if(!E||q){f(!1);return}f(e)},[E,q,M]),Ye=t.useCallback(e=>{const n=h[e]?.audioKey;if(!n||!y||n!==y)return;const l=x.findIndex(u=>u===n);if(l<0){P(null);return}const a=l+1,s=x[a];if(s){P(s);return}if(P(null),Se(!0),f(!1),I){const u=c+1,p=k[u];M&&p?.type==="interaction"&&(T.current=u),R()}},[h,I,c,y,x,R,M,k]),Je=t.useCallback(()=>{o&&V(e=>!e)},[o]),_e=t.useCallback(e=>{e.stopPropagation(),B&&d(!0)},[ye,d]),Qe=t.useCallback(e=>{de?.(e),z(!0),d(!0)},[de,d]),Xe=!!o&&X,te=t.useMemo(()=>v.map((e,n)=>`${e.sequence_number??`${e.type}-${n}`}:${String(e.is_new??"")}`),[v]);return t.useEffect(()=>{const e=me.current,a=(e.length>0&&e.length<te.length&&e.every((u,p)=>u===te[p])?v.slice(e.length):[]).some(u=>u.is_new===!1);if(me.current=te,!a)return;const s=window.requestAnimationFrame(()=>{const u=ue.current,p=fe.current;if(!u||!p)return;const Ze=u.getBoundingClientRect(),et=p.getBoundingClientRect(),tt=u.scrollTop+(et.top-Ze.top);u.scrollTo({top:Math.max(tt,0),behavior:"smooth"})});return()=>{window.cancelAnimationFrame(s)}},[v,te]),t.useEffect(()=>{if(!G.current||(G.current=!1,v.length===0))return;const e=window.requestAnimationFrame(()=>{Ce()});return()=>{window.cancelAnimationFrame(e)}},[v,Ce]),r.jsxRuntimeExports.jsxs("section",{ref:oe,className:W.cn("relative h-full w-full",Pe),onPointerDown:Qe,...qe,children:[r.jsxRuntimeExports.jsx("div",{className:W.cn("h-full min-h-0 w-full",Me?"slide-content--single":"grid gap-4"),children:v.length>0?r.jsxRuntimeExports.jsx("div",{className:"slide-stage",children:r.jsxRuntimeExports.jsx("div",{ref:ue,className:"slide-stage__layer w-full",children:Ke.map((e,n)=>{const l=n===Le;return r.jsxRuntimeExports.jsx("div",{"aria-hidden":!l||void 0,className:"w-full h-full",style:{display:l?void 0:"none"},children:Ue(e.elementList,l)},e.sourceStepIndexes[0]??n)})})}):null}),Ne?r.jsxRuntimeExports.jsxs("div",{className:"pointer-events-none absolute left-1/2 top-1/2 z-[3] flex size-28 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-2 rounded-2xl bg-foreground/65 px-3 py-4 text-center text-xs leading-4 font-medium text-background shadow-lg backdrop-blur-sm",children:[r.jsxRuntimeExports.jsx(it.default,{className:"size-5 animate-spin text-background"}),r.jsxRuntimeExports.jsx("span",{children:ne})]}):null,Xe?r.jsxRuntimeExports.jsx("div",{className:W.cn("slide-interaction-overlay",B&&g?"slide-interaction-overlay--with-player":"slide-interaction-overlay--standalone"),onClick:_e,onPointerDown:_e,style:Fe,children:r.jsxRuntimeExports.jsx(ke,{content:String(o?.content??""),defaultButtonText:Re.buttonText??"",defaultInputText:Re.inputText??"",defaultSelectedValues:He,confirmButtonText:_?.confirmButtonText,copyButtonText:_?.copyButtonText,copiedButtonText:_?.copiedButtonText,onSend:$e,readonly:je,title:_?.title??re??"Submit the content below to continue."})}):null,g?r.jsxRuntimeExports.jsx(st.default,{audioList:h,className:W.cn("absolute left-1/2 bottom-6 z-[2] -translate-x-1/2",O,!B&&"pointer-events-none opacity-0"),currentAudioIndex:le,defaultPlaying:!0,hasInteraction:!!o,isInteractionOpen:X,onLoadingChange:Ge,nextDisabled:!I,onEnded:Ye,onFullscreen:ze,onInteractionToggle:Je,onNext:We,onPrev:Ve,prevDisabled:!Be,showControls:B,customActions:S}):null]})};exports.default=dt;
 //# sourceMappingURL=Slide.cjs.js.map