markdown-flow-ui 0.1.129 → 0.2.1

package/dist/components/ContentRender/contentRenderI18n.es.js

@@ -0,0 +1,59 @@
+import { normalizeMarkdownFlowLocale as o } from "../../lib/locale.es.js";
+import { buildLocaleTexts as n } from "../../lib/localeTextMap.es.js";
+const r = [
+  "confirmButtonText",
+  "copyButtonText",
+  "copiedButtonText",
+  "sandboxLoadingText",
+  "sandboxStyleLoadingText",
+  "sandboxScriptLoadingText",
+  "sandboxFullscreenButtonText",
+  "sandboxExitFullscreenButtonText",
+  "sendButtonLabel",
+  "scrollToBottomLabel"
+], t = (e) => n(
+  r,
+  e
+), i = {
+  "en-US": t([
+    "Submit",
+    "Copy",
+    "Copied",
+    "Loading content...",
+    "Building styles...",
+    "Building scripts cache...",
+    "Fullscreen",
+    "Exit fullscreen",
+    "Send",
+    "Scroll to bottom"
+  ]),
+  "fr-FR": t([
+    "Soumettre",
+    "Copier",
+    "Copié",
+    "Chargement du contenu...",
+    "Génération des styles...",
+    "Génération du cache des scripts...",
+    "Plein écran",
+    "Quitter le plein écran",
+    "Envoyer",
+    "Faire défiler jusqu'en bas"
+  ]),
+  "zh-CN": t([
+    "提交",
+    "复制",
+    "已复制",
+    "正在加载内容...",
+    "正在生成样式...",
+    "正在生成脚本缓存...",
+    "全屏浏览",
+    "退出全屏",
+    "发送",
+    "滚动到底部"
+  ])
+}, c = (e) => i[o(e)];
+export {
+  i as CONTENT_RENDER_LOCALE_TEXTS,
+  c as getContentRenderLocaleTexts
+};
+//# sourceMappingURL=contentRenderI18n.es.js.map

package/dist/components/ContentRender/contentRenderI18n.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contentRenderI18n.es.js","sources":["../../../src/components/ContentRender/contentRenderI18n.ts"],"sourcesContent":["import {\n  normalizeMarkdownFlowLocale,\n  type MarkdownFlowLocale,\n} from \"../../lib/locale\";\nimport {\n  buildLocaleTexts,\n  type LocaleTextValues,\n} from \"../../lib/localeTextMap\";\n\nexport interface ContentRenderLocaleTexts {\n  confirmButtonText: string;\n  copyButtonText: string;\n  copiedButtonText: string;\n  sandboxLoadingText: string;\n  sandboxStyleLoadingText: string;\n  sandboxScriptLoadingText: string;\n  sandboxFullscreenButtonText: string;\n  sandboxExitFullscreenButtonText: string;\n  sendButtonLabel: string;\n  scrollToBottomLabel: string;\n}\n\nconst CONTENT_RENDER_TEXT_KEYS = [\n  \"confirmButtonText\",\n  \"copyButtonText\",\n  \"copiedButtonText\",\n  \"sandboxLoadingText\",\n  \"sandboxStyleLoadingText\",\n  \"sandboxScriptLoadingText\",\n  \"sandboxFullscreenButtonText\",\n  \"sandboxExitFullscreenButtonText\",\n  \"sendButtonLabel\",\n  \"scrollToBottomLabel\",\n] as const satisfies readonly (keyof ContentRenderLocaleTexts)[];\n\nconst createContentRenderLocaleTexts = (\n  values: LocaleTextValues<typeof CONTENT_RENDER_TEXT_KEYS>\n): ContentRenderLocaleTexts =>\n  buildLocaleTexts(\n    CONTENT_RENDER_TEXT_KEYS,\n    values\n  ) as ContentRenderLocaleTexts;\n\nexport const CONTENT_RENDER_LOCALE_TEXTS: Record<\n  MarkdownFlowLocale,\n  ContentRenderLocaleTexts\n> = {\n  \"en-US\": createContentRenderLocaleTexts([\n    \"Submit\",\n    \"Copy\",\n    \"Copied\",\n    \"Loading content...\",\n    \"Building styles...\",\n    \"Building scripts cache...\",\n    \"Fullscreen\",\n    \"Exit fullscreen\",\n    \"Send\",\n    \"Scroll to bottom\",\n  ]),\n  \"fr-FR\": createContentRenderLocaleTexts([\n    \"Soumettre\",\n    \"Copier\",\n    \"Copié\",\n    \"Chargement du contenu...\",\n    \"Génération des styles...\",\n    \"Génération du cache des scripts...\",\n    \"Plein écran\",\n    \"Quitter le plein écran\",\n    \"Envoyer\",\n    \"Faire défiler jusqu'en bas\",\n  ]),\n  \"zh-CN\": createContentRenderLocaleTexts([\n    \"提交\",\n    \"复制\",\n    \"已复制\",\n    \"正在加载内容...\",\n    \"正在生成样式...\",\n    \"正在生成脚本缓存...\",\n    \"全屏浏览\",\n    \"退出全屏\",\n    \"发送\",\n    \"滚动到底部\",\n  ]),\n};\n\nexport const getContentRenderLocaleTexts = (\n  locale?: string | null\n): ContentRenderLocaleTexts =>\n  CONTENT_RENDER_LOCALE_TEXTS[normalizeMarkdownFlowLocale(locale)];\n"],"names":["CONTENT_RENDER_TEXT_KEYS","createContentRenderLocaleTexts","values","buildLocaleTexts","CONTENT_RENDER_LOCALE_TEXTS","getContentRenderLocaleTexts","locale","normalizeMarkdownFlowLocale"],"mappings":";;AAsBA,MAAMA,IAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAiC,CACrCC,MAEAC;AAAA,EACEH;AAAA,EACAE;AACF,GAEWE,IAGT;AAAA,EACF,SAASH,EAA+B;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAAA,EACD,SAASA,EAA+B;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAAA,EACD,SAASA,EAA+B;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACH,GAEaI,IAA8B,CACzCC,MAEAF,EAA4BG,EAA4BD,CAAM,CAAC;"}

package/dist/components/ContentRender/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ContentRender.cjs.js");require("../../_virtual/jsx-runtime.cjs.js");require("react");require("react-dom/client");require("../ui/inputGroup/input-group.cjs.js");exports.ContentRender=e.default;exports.default=e.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ContentRender.cjs.js");require("../../_virtual/jsx-runtime.cjs.js");require("react");require("react-dom/client");require("./contentRenderI18n.cjs.js");require("../ui/inputGroup/input-group.cjs.js");exports.ContentRender=e.default;exports.default=e.default;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -7,5 +7,6 @@ export type { RenderSegment } from './utils/split-content';
 export { splitContentSegments } from './utils/split-content';
 export { default as ContentRender } from './ContentRender';
 export type { ContentRenderProps } from './ContentRender';
+export type { MarkdownFlowLocale } from '../../lib/locale';
 export { default as MarkdownFlowInput } from './MarkdownFlowInput';
 export type { MarkdownFlowInputProps } from './MarkdownFlowInput';

package/dist/components/ContentRender/index.es.js

@@ -2,6 +2,7 @@ import o from "./ContentRender.es.js";
 import "../../_virtual/jsx-runtime.es.js";
 import "react";
 import "react-dom/client";
+import "./contentRenderI18n.es.js";
 import "../ui/inputGroup/input-group.es.js";
 export {
   o as ContentRender,

package/dist/components/ContentRender/index.es.js.map

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { Components } from 'react-markdown';
 import { OnSendContentParams } from '../../types';
+import { MarkdownFlowLocale } from '../../../lib/locale';
 interface CustomVariableNode {
     tagName: "custom-variable";
     properties?: {
@@ -16,6 +17,7 @@ interface CustomVariableProps {
     defaultButtonText?: string;
     defaultInputText?: string;
     defaultSelectedValues?: string[];
+    locale?: MarkdownFlowLocale;
     readonly?: boolean;
     onSend?: (content: OnSendContentParams) => void;
     confirmButtonText?: string;
@@ -24,6 +26,6 @@ interface CustomVariableProps {
 interface ComponentsWithCustomVariable extends Components {
     "custom-variable"?: React.ComponentType<CustomVariableProps>;
 }
-declare const CustomButtonInputVariable: ({ node, readonly, defaultButtonText, defaultInputText, defaultSelectedValues, onSend, confirmButtonText, beforeSend, }: CustomVariableProps) => React.JSX.Element;
+declare const CustomButtonInputVariable: ({ node, readonly, locale, defaultButtonText, defaultInputText, defaultSelectedValues, onSend, confirmButtonText, beforeSend, }: CustomVariableProps) => React.JSX.Element;
 export default CustomButtonInputVariable;
 export type { ComponentsWithCustomVariable, CustomVariableNode, CustomVariableProps, };

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

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