markdown-flow-ui 0.1.129 → 0.2.0

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

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../_virtual/jsx-runtime.cjs.js"),x=require("../ContentRender/ContentRender.cjs.js");require("react");require("react-dom/client");require("../ui/inputGroup/input-group.cjs.js");;/* empty css                      */const p=({initialContentList:r=[],customRenderBar:u,onSend:s,confirmButtonText:d,copyButtonText:i,copiedButtonText:a,beforeSend:n,interactionDefaultValueOptions:l})=>t.jsxRuntimeExports.jsx("div",{className:"markdown-flow",children:r.map((e,o)=>{const m=e.isFinished??!1?void 0:s,c=n??(()=>!0);return t.jsxRuntimeExports.jsx(x.default,{content:e.content,userInput:e.userInput,defaultInputText:e.defaultInputText,defaultButtonText:e.defaultButtonText,defaultSelectedValues:e.defaultSelectedValues,readonly:e.readonly,customRenderBar:e.customRenderBar||u,onSend:m,beforeSend:c,interactionDefaultValueOptions:l,onClickCustomButtonAfterContent:e.onClickCustomButtonAfterContent,confirmButtonText:d,copyButtonText:i,copiedButtonText:a,dynamicInteractionFormat:e.dynamicInteractionFormat},o)})});exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../_virtual/jsx-runtime.cjs.js"),p=require("../ContentRender/ContentRender.cjs.js");require("react");require("react-dom/client");require("../ContentRender/contentRenderI18n.cjs.js");require("../ui/inputGroup/input-group.cjs.js");;/* empty css                      */const S=({initialContentList:r=[],locale:u,customRenderBar:s,onSend:d,confirmButtonText:i,copyButtonText:a,copiedButtonText:n,beforeSend:l,interactionDefaultValueOptions:o})=>t.jsxRuntimeExports.jsx("div",{className:"markdown-flow",children:r.map((e,m)=>{const c=e.isFinished??!1?void 0:d,x=l??(()=>!0);return t.jsxRuntimeExports.jsx(p.default,{content:e.content,userInput:e.userInput,defaultInputText:e.defaultInputText,defaultButtonText:e.defaultButtonText,defaultSelectedValues:e.defaultSelectedValues,readonly:e.readonly,customRenderBar:e.customRenderBar||s,onSend:c,beforeSend:x,locale:u,interactionDefaultValueOptions:o,onClickCustomButtonAfterContent:e.onClickCustomButtonAfterContent,confirmButtonText:i,copyButtonText:a,copiedButtonText:n,dynamicInteractionFormat:e.dynamicInteractionFormat},m)})});exports.default=S;
 //# sourceMappingURL=MarkdownFlow.cjs.js.map

package/dist/components/MarkdownFlow/MarkdownFlow.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownFlow.cjs.js","sources":["../../../src/components/MarkdownFlow/MarkdownFlow.tsx"],"sourcesContent":["import React from \"react\";\nimport type { InteractionDefaultValueOptions } from \"../../lib/interaction-defaults\";\nimport ContentRender from \"../ContentRender\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./markdownFlow.css\";\n\nexport interface MarkdownFlowProps {\n  initialContentList?: {\n    content: string;\n    isFinished?: boolean;\n    userInput?: string;\n    defaultInputText?: string;\n    defaultButtonText?: string;\n    defaultSelectedValues?: string[];\n    readonly?: boolean;\n    customRenderBar?: CustomRenderBarProps;\n    onClickCustomButtonAfterContent?: () => void;\n    dynamicInteractionFormat?: string;\n  }[];\n  customRenderBar?: CustomRenderBarProps;\n  onSend?: (content: OnSendContentParams) => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text for code blocks\n  copyButtonText?: string;\n  // Copied state text for code blocks\n  copiedButtonText?: string;\n  beforeSend?: (content: OnSendContentParams) => boolean;\n  interactionDefaultValueOptions?: InteractionDefaultValueOptions;\n}\n\nconst MarkdownFlow: React.FC<MarkdownFlowProps> = ({\n  initialContentList = [],\n  customRenderBar,\n  onSend: onSendProp,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  beforeSend: beforeSendProp,\n  interactionDefaultValueOptions,\n}) => {\n  return (\n    <div className=\"markdown-flow\">\n      {initialContentList.map((contentInfo, index) => {\n        const isFinished = contentInfo.isFinished ?? false;\n        const onSend = isFinished ? undefined : onSendProp;\n        const beforeSend = beforeSendProp ?? (() => true);\n        return (\n          <ContentRender\n            key={index}\n            content={contentInfo.content}\n            userInput={contentInfo.userInput}\n            defaultInputText={contentInfo.defaultInputText}\n            defaultButtonText={contentInfo.defaultButtonText}\n            defaultSelectedValues={contentInfo.defaultSelectedValues}\n            readonly={contentInfo.readonly}\n            customRenderBar={contentInfo.customRenderBar || customRenderBar}\n            onSend={onSend}\n            beforeSend={beforeSend}\n            interactionDefaultValueOptions={interactionDefaultValueOptions}\n            onClickCustomButtonAfterContent={\n              contentInfo.onClickCustomButtonAfterContent\n            }\n            confirmButtonText={confirmButtonText}\n            copyButtonText={copyButtonText}\n            copiedButtonText={copiedButtonText}\n            dynamicInteractionFormat={contentInfo.dynamicInteractionFormat}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MarkdownFlow;\n"],"names":["MarkdownFlow","initialContentList","customRenderBar","onSendProp","confirmButtonText","copyButtonText","copiedButtonText","beforeSendProp","interactionDefaultValueOptions","jsx","contentInfo","index","onSend","beforeSend","ContentRender"],"mappings":"qVA+BA,MAAMA,EAA4C,CAAC,CACjD,mBAAAC,EAAqB,CAAA,EACrB,gBAAAC,EACA,OAAQC,EACR,kBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,WAAYC,EACZ,+BAAAC,CACF,IAEIC,wBAAC,OAAI,UAAU,gBACZ,WAAmB,IAAI,CAACC,EAAaC,IAAU,CAE9C,MAAMC,EADaF,EAAY,YAAc,GACjB,OAAYP,EAClCU,EAAaN,IAAmB,IAAM,IAC5C,OACEE,EAAAA,kBAAAA,IAACK,EAAAA,QAAA,CAEC,QAASJ,EAAY,QACrB,UAAWA,EAAY,UACvB,iBAAkBA,EAAY,iBAC9B,kBAAmBA,EAAY,kBAC/B,sBAAuBA,EAAY,sBACnC,SAAUA,EAAY,SACtB,gBAAiBA,EAAY,iBAAmBR,EAChD,OAAAU,EACA,WAAAC,EACA,+BAAAL,EACA,gCACEE,EAAY,gCAEd,kBAAAN,EACA,eAAAC,EACA,iBAAAC,EACA,yBAA0BI,EAAY,wBAAA,EAjBjCC,CAAA,CAoBX,CAAC,CAAA,CACH"}
+{"version":3,"file":"MarkdownFlow.cjs.js","sources":["../../../src/components/MarkdownFlow/MarkdownFlow.tsx"],"sourcesContent":["import React from \"react\";\nimport type { InteractionDefaultValueOptions } from \"../../lib/interaction-defaults\";\nimport type { MarkdownFlowLocale } from \"../../lib/locale\";\nimport ContentRender from \"../ContentRender\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./markdownFlow.css\";\n\nexport interface MarkdownFlowProps {\n  initialContentList?: {\n    content: string;\n    isFinished?: boolean;\n    userInput?: string;\n    defaultInputText?: string;\n    defaultButtonText?: string;\n    defaultSelectedValues?: string[];\n    readonly?: boolean;\n    customRenderBar?: CustomRenderBarProps;\n    onClickCustomButtonAfterContent?: () => void;\n    dynamicInteractionFormat?: string;\n  }[];\n  /** Locale used for built-in UI text when a more specific text prop is not provided. */\n  locale?: MarkdownFlowLocale;\n  customRenderBar?: CustomRenderBarProps;\n  onSend?: (content: OnSendContentParams) => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text for code blocks\n  copyButtonText?: string;\n  // Copied state text for code blocks\n  copiedButtonText?: string;\n  beforeSend?: (content: OnSendContentParams) => boolean;\n  interactionDefaultValueOptions?: InteractionDefaultValueOptions;\n}\n\nconst MarkdownFlow: React.FC<MarkdownFlowProps> = ({\n  initialContentList = [],\n  locale,\n  customRenderBar,\n  onSend: onSendProp,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  beforeSend: beforeSendProp,\n  interactionDefaultValueOptions,\n}) => {\n  return (\n    <div className=\"markdown-flow\">\n      {initialContentList.map((contentInfo, index) => {\n        const isFinished = contentInfo.isFinished ?? false;\n        const onSend = isFinished ? undefined : onSendProp;\n        const beforeSend = beforeSendProp ?? (() => true);\n        return (\n          <ContentRender\n            key={index}\n            content={contentInfo.content}\n            userInput={contentInfo.userInput}\n            defaultInputText={contentInfo.defaultInputText}\n            defaultButtonText={contentInfo.defaultButtonText}\n            defaultSelectedValues={contentInfo.defaultSelectedValues}\n            readonly={contentInfo.readonly}\n            customRenderBar={contentInfo.customRenderBar || customRenderBar}\n            onSend={onSend}\n            beforeSend={beforeSend}\n            locale={locale}\n            interactionDefaultValueOptions={interactionDefaultValueOptions}\n            onClickCustomButtonAfterContent={\n              contentInfo.onClickCustomButtonAfterContent\n            }\n            confirmButtonText={confirmButtonText}\n            copyButtonText={copyButtonText}\n            copiedButtonText={copiedButtonText}\n            dynamicInteractionFormat={contentInfo.dynamicInteractionFormat}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MarkdownFlow;\n"],"names":["MarkdownFlow","initialContentList","locale","customRenderBar","onSendProp","confirmButtonText","copyButtonText","copiedButtonText","beforeSendProp","interactionDefaultValueOptions","jsx","contentInfo","index","onSend","beforeSend","ContentRender"],"mappings":"0YAkCA,MAAMA,EAA4C,CAAC,CACjD,mBAAAC,EAAqB,CAAA,EACrB,OAAAC,EACA,gBAAAC,EACA,OAAQC,EACR,kBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,WAAYC,EACZ,+BAAAC,CACF,IAEIC,wBAAC,OAAI,UAAU,gBACZ,WAAmB,IAAI,CAACC,EAAaC,IAAU,CAE9C,MAAMC,EADaF,EAAY,YAAc,GACjB,OAAYP,EAClCU,EAAaN,IAAmB,IAAM,IAC5C,OACEE,EAAAA,kBAAAA,IAACK,EAAAA,QAAA,CAEC,QAASJ,EAAY,QACrB,UAAWA,EAAY,UACvB,iBAAkBA,EAAY,iBAC9B,kBAAmBA,EAAY,kBAC/B,sBAAuBA,EAAY,sBACnC,SAAUA,EAAY,SACtB,gBAAiBA,EAAY,iBAAmBR,EAChD,OAAAU,EACA,WAAAC,EACA,OAAAZ,EACA,+BAAAO,EACA,gCACEE,EAAY,gCAEd,kBAAAN,EACA,eAAAC,EACA,iBAAAC,EACA,yBAA0BI,EAAY,wBAAA,EAlBjCC,CAAA,CAqBX,CAAC,CAAA,CACH"}

package/dist/components/MarkdownFlow/MarkdownFlow.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { InteractionDefaultValueOptions } from '../../lib/interaction-defaults';
+import { MarkdownFlowLocale } from '../../lib/locale';
 import { CustomRenderBarProps, OnSendContentParams } from '../types';
 export interface MarkdownFlowProps {
     initialContentList?: {
@@ -14,6 +15,8 @@ export interface MarkdownFlowProps {
         onClickCustomButtonAfterContent?: () => void;
         dynamicInteractionFormat?: string;
     }[];
+    /** Locale used for built-in UI text when a more specific text prop is not provided. */
+    locale?: MarkdownFlowLocale;
     customRenderBar?: CustomRenderBarProps;
     onSend?: (content: OnSendContentParams) => void;
     confirmButtonText?: string;