markdown-flow-ui 0.2.35 → 0.2.36-dev.1

package/README.md

@@ -90,6 +90,18 @@ can change that structure; typing an already received snapshot preserves it.
 
 ### Interactive Elements
 
+This variable-name policy matches AI-Shifu's existing MarkdownFlow 2.0
+implementation. It is a compatibility extension to the public MarkdownFlow
+specification, which currently restricts names to letters, digits, and underscores
+without surrounding whitespace.
+
+Variable names follow that backend rule: they are non-empty and contain no
+whitespace or braces. Question marks can remain in the name, so `?[%{{你的性别是？}} 男 | 女 | 秘密]` submits the unchanged key
+`你的性别是？`. Whitespace around the name inside `{{ }}` is trimmed. The name
+is a memory key; write the question text separately when it should be displayed.
+Existing identifier names such as `user_name` continue to work. Interaction
+delimiters retain their existing grammar.
+
 ```tsx
 import { MarkdownFlow } from "markdown-flow-ui";
 

package/dist/_virtual/index.es8.js

@@ -1,5 +1,5 @@
-var s = { exports: {} };
+var r = {};
 export {
-  s as __module
+  r as __exports
 };
 //# sourceMappingURL=index.es8.js.map

package/dist/_virtual/index.es9.js

@@ -1,5 +1,5 @@
-var r = {};
+var s = { exports: {} };
 export {
-  r as __exports
+  s as __module
 };
 //# sourceMappingURL=index.es9.js.map

package/dist/_virtual/index8.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
 //# sourceMappingURL=index8.cjs.map

package/dist/_virtual/index9.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
 //# sourceMappingURL=index9.cjs.map

package/dist/_virtual/variable-name.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
+//# sourceMappingURL=variable-name.cjs.map

package/dist/_virtual/variable-name.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"variable-name.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/variable-name.es.js

@@ -0,0 +1,5 @@
+var a = {};
+export {
+  a as __exports
+};
+//# sourceMappingURL=variable-name.es.js.map

package/dist/_virtual/variable-name.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variable-name.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CustomVariable.cjs","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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"}
+{"version":3,"file":"CustomVariable.cjs","sources":["../../../../src/components/ContentRender/plugins/CustomVariable.tsx"],"sourcesContent":["import React from \"react\";\nimport { normalizeVariableName } from \"remark-flow\";\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    normalizeVariableName(node.properties?.variableName || \"\") ||\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","normalizeVariableName","singleSelectNode","singleSelectButtonTexts","singleSelectButtonValues","isSingleSelect","param","prev","v","noSelection","e","valueIndex","textIndex"],"mappings":"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"}

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

@@ -1,18 +1,19 @@
 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 { d as J } from "../../../_virtual/index.es.js";
+import { Button as U } from "../../ui/button.es.js";
+import { Checkbox as q } 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 { InputGroup as A, InputGroupTextarea as H } 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 = ({
+import { getContentRenderLocaleTexts as P } from "../contentRenderI18n.es.js";
+const Q = ({
   node: c,
   readonly: i,
   selectedValues: e,
   inputValue: s,
   confirmButtonText: o,
-  handleCheckboxChange: n,
+  handleCheckboxChange: l,
   handleInputChange: m,
   handleKeyDown: f,
   handleConfirmClick: h
@@ -38,23 +39,23 @@ const P = ({
     }
   );
   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;
+    /* @__PURE__ */ r("span", { className: "flex flex-wrap gap-y-[9px] gap-x-6", children: c.properties?.buttonTexts?.map((u, n) => {
+      const N = c.properties?.buttonValues?.[n], d = N !== void 0 ? N : u;
       return /* @__PURE__ */ r(
-        U,
+        q,
         {
           label: u,
           disabled: i,
           checked: e.includes(d),
-          onCheckedChange: (k) => n(d, k),
+          onCheckedChange: (k) => l(d, k),
           className: "text-sm"
         },
-        l
+        n
       );
     }) }),
     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,
+      /* @__PURE__ */ r(A, { "data-disabled": i, className: "flex-1", children: /* @__PURE__ */ r(
+        H,
         {
           disabled: i,
           placeholder: b,
@@ -68,32 +69,32 @@ const P = ({
       x("shrink-0")
     ] }) }) : x("self-start multi-select-confirm-wrapper--stacked")
   ] });
-}, Q = ({
+}, W = ({
   dir: c,
   lang: i,
   node: e,
   readonly: s,
   locale: o,
-  resolvedDefaultButtonText: n,
+  resolvedDefaultButtonText: 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;
+    const u = e.properties?.buttonValues?.[x], n = u !== void 0 ? u : p;
     return /* @__PURE__ */ r(
-      J,
+      U,
       {
         disabled: s,
         variant: "outline",
         type: "button",
         size: "sm",
-        onClick: () => m(l),
+        onClick: () => m(n),
         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"
+          l === p && "select"
         ),
         children: p
       },
@@ -114,13 +115,13 @@ const P = ({
       title: e.properties.placeholder
     }
   ) })
-] }), W = ({
+] }), X = ({
   dir: c,
   lang: i,
   readonly: e,
   locale: s,
   placeholder: o,
-  value: n,
+  value: l,
   onChange: m,
   onSend: f
 }) => o ? /* @__PURE__ */ r(
@@ -131,25 +132,25 @@ const P = ({
     disabled: e,
     locale: s,
     placeholder: o,
-    value: n,
+    value: l,
     onChange: m,
     onSend: f,
     title: o
   }
-) : null, ne = ({
+) : null, ie = ({
   dir: c,
   lang: i,
   node: e,
   readonly: s,
   locale: o,
-  defaultButtonText: n,
+  defaultButtonText: l,
   defaultInputText: m,
   defaultSelectedValues: f,
   onSend: h,
   confirmButtonText: b,
   beforeSend: p = () => !0
 }) => {
-  const x = H(o), u = b || x.confirmButtonText, [l, N] = v.useState(m || ""), [d, k] = v.useState(
+  const x = P(o), u = b || x.confirmButtonText, [n, N] = v.useState(m || ""), [d, k] = v.useState(
     f || []
   ), B = JSON.stringify({
     buttonTexts: e.properties?.buttonTexts,
@@ -157,91 +158,91 @@ const P = ({
     isMultiSelect: e.properties?.isMultiSelect,
     placeholder: e.properties?.placeholder,
     variableName: e.properties?.variableName
-  }), 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 ? {
+  }), g = e.properties?.isMultiSelect ?? !1, z = e.properties?.buttonTexts || [], M = !g && z.length === 0 && !e.properties?.placeholder, S = J.normalizeVariableName(e.properties?.variableName || "") || l || u, T = v.useMemo(() => M ? {
     ...e,
     properties: {
       ...e.properties || {},
       buttonTexts: [S],
       buttonValues: [S]
     }
-  } : e, [S, e, M]), C = T.properties?.buttonTexts || [], I = T.properties?.buttonValues || [], D = !g && C.length > 0, G = (t) => {
+  } : e, [S, e, M]), C = T.properties?.buttonTexts || [], I = T.properties?.buttonValues || [], D = !g && C.length > 0, F = (t) => {
     const a = {
       variableName: e.properties?.variableName || "",
       buttonText: t
     };
     p?.(a) && h?.(a);
-  }, L = (t, a) => {
-    k((K) => a ? [...K, t] : K.filter((z) => z !== t));
+  }, G = (t, a) => {
+    k((K) => a ? [...K, t] : K.filter((_) => _ !== t));
   }, E = () => {
-    const t = d.length === 0 && !l?.trim(), a = {
+    const t = d.length === 0 && !n?.trim(), a = {
       variableName: e.properties?.variableName || "",
       selectedValues: d,
-      inputText: l?.trim() || void 0
+      inputText: n?.trim() || void 0
     };
     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(), g ? d.length === 0 && !l.trim() || E() : y());
+  }, L = (t) => {
+    t.nativeEvent.isComposing || t.keyCode === 229 || t.key === "Enter" && !t.shiftKey && (t.preventDefault(), g ? d.length === 0 && !n.trim() || E() : y());
   }, y = () => {
     const t = {
       variableName: e.properties?.variableName || "",
-      inputText: l
+      inputText: n
     };
     p?.(t) && h?.(t);
-  }, _ = v.useMemo(() => {
-    if (!n)
+  }, R = v.useMemo(() => {
+    if (!l)
       return;
-    const t = I.indexOf(n);
+    const t = I.indexOf(l);
     if (t > -1)
-      return C[t] ?? n;
-    const a = C.indexOf(n);
+      return C[t] ?? l;
+    const a = C.indexOf(l);
     if (a > -1)
       return C[a];
-  }, [n, C, I]);
+  }, [l, 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,
+      Q,
       {
         node: e,
         readonly: s,
         selectedValues: d,
-        inputValue: l,
+        inputValue: n,
         confirmButtonText: u,
-        handleCheckboxChange: L,
+        handleCheckboxChange: G,
         handleInputChange: V,
-        handleKeyDown: R,
+        handleKeyDown: L,
         handleConfirmClick: E
       }
     ),
     !g && D && /* @__PURE__ */ r(
-      Q,
+      W,
       {
         dir: c,
         lang: i,
         node: T,
         readonly: s,
         locale: o,
-        resolvedDefaultButtonText: _,
-        handleButtonClick: G,
-        inputValue: l,
+        resolvedDefaultButtonText: R,
+        handleButtonClick: F,
+        inputValue: n,
         handleInputChange: V,
         handleSendClick: y
       }
     ),
     !g && !D && e.properties?.placeholder && /* @__PURE__ */ r(
-      W,
+      X,
       {
         dir: c,
         lang: i,
         readonly: s,
         locale: o,
         placeholder: e.properties.placeholder,
-        value: l,
+        value: n,
         onChange: V,
         onSend: y
       }
@@ -249,6 +250,6 @@ const P = ({
   ] });
 };
 export {
-  ne as default
+  ie 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  /** 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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"}
+{"version":3,"file":"CustomVariable.es.js","sources":["../../../../src/components/ContentRender/plugins/CustomVariable.tsx"],"sourcesContent":["import React from \"react\";\nimport { normalizeVariableName } from \"remark-flow\";\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    normalizeVariableName(node.properties?.variableName || \"\") ||\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","normalizeVariableName","singleSelectNode","singleSelectButtonTexts","singleSelectButtonValues","isSingleSelect","param","prev","v","noSelection","e","valueIndex","textIndex"],"mappings":"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"}