markdown-flow-ui 0.1.129 → 0.2.1

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/ContentRender/plugins/MermaidChart.cjs.js

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

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

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

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

@@ -1,48 +1,49 @@
 import { j as e } from "../../../_virtual/jsx-runtime.es.js";
-import j, { useState as i, useEffect as w } from "react";
+import v, { useState as i, useEffect as w } from "react";
 import d from "../../../node_modules/mermaid/dist/mermaid.core.es.js";
-const l = {
+import { CJK_SAFE_SANS_FONT_FAMILY as h } from "../cjkFontFamily.es.js";
+const c = {
   emptyChart: "Empty chart content",
   loading: "Loading Mermaid chart...",
   badge: "mermaid"
-}, y = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', g = (r) => r.trim().replace(/^_streaming\s*/i, ""), S = ({
+}, g = (r) => r.trim().replace(/^_streaming\s*/i, ""), N = ({
   chart: r,
   messages: a,
-  frozen: c
+  frozen: l
 }) => {
-  const [m, s] = i(""), [p, n] = i(""), [h, x] = i(!1), u = async () => {
+  const [m, s] = i(""), [p, n] = i(""), [y, x] = i(!1), f = async () => {
     try {
       const t = g(r);
       if (!t) {
-        n(a?.emptyChart ?? l.emptyChart), s("");
+        n(a?.emptyChart ?? c.emptyChart), s("");
         return;
       }
       d.initialize({
         startOnLoad: !1,
         theme: "default",
         securityLevel: "loose",
-        fontFamily: y,
+        fontFamily: h,
         themeVariables: {
-          fontFamily: y
+          fontFamily: h
         }
       });
       try {
         await d.parse(t);
       } catch (b) {
-        const v = String(b).toLowerCase();
-        n(v), s(""), x(!0);
+        const j = String(b).toLowerCase();
+        n(j), s(""), x(!0);
         return;
       }
-      const o = `mermaid-${Date.now()}`, { svg: f } = await d.render(o, t);
-      s(f), n("");
+      const o = `mermaid-${Date.now()}`, { svg: u } = await d.render(o, t);
+      s(u), n("");
     } catch (t) {
       const o = String(t).toLowerCase();
       n(o), s("");
     }
   };
   if (w(() => {
-    c && h || u();
-  }, [r, c]), p) {
+    l && y || f();
+  }, [r, l]), p) {
     const t = g(r) || r.trim();
     return /* @__PURE__ */ e.jsxs("div", { className: "my-4 border border-gray-200 rounded-lg bg-gray-50", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "px-4 py-3 bg-gray-100 border-b border-gray-200 flex items-center gap-2", children: [
@@ -51,7 +52,7 @@ const l = {
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ e.jsx("pre", { className: "p-4 text-sm font-mono text-yellow-800", children: /* @__PURE__ */ e.jsx("code", { children: t }) }),
-        /* @__PURE__ */ e.jsx("div", { className: "absolute top-2 right-2 px-2 py-1 text-xs text-yellow-700 bg-white/90 rounded border border-gray-200", children: a?.badge ?? l.badge })
+        /* @__PURE__ */ e.jsx("div", { className: "absolute top-2 right-2 px-2 py-1 text-xs text-yellow-700 bg-white/90 rounded border border-gray-200", children: a?.badge ?? c.badge })
       ] })
     ] });
   }
@@ -61,9 +62,9 @@ const l = {
       className: "content-render-mermaid-inner",
       dangerouslySetInnerHTML: { __html: m }
     }
-  ) : /* @__PURE__ */ e.jsx("div", { className: "py-8 text-gray-500 italic", children: a?.loading ?? l.loading }) });
-}, M = j.memo(S, (r, a) => r.chart === a.chart && r.frozen === a.frozen);
+  ) : /* @__PURE__ */ e.jsx("div", { className: "py-8 text-gray-500 italic", children: a?.loading ?? c.loading }) });
+}, L = v.memo(N, (r, a) => r.chart === a.chart && r.frozen === a.frozen);
 export {
-  M as default
+  L as default
 };
 //# sourceMappingURL=MermaidChart.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MermaidChart.es.js","sources":["../../../../src/components/ContentRender/plugins/MermaidChart.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport mermaid from \"mermaid\";\n\nexport interface MermaidChartProps {\n  chart: string;\n  messages?: {\n    emptyChart?: string;\n    loading?: string;\n    badge?: string;\n  };\n  frozen?: boolean;\n}\n\nconst DEFAULT_MESSAGES = {\n  emptyChart: \"Empty chart content\",\n  loading: \"Loading Mermaid chart...\",\n  badge: \"mermaid\",\n} as const;\n\nconst MERMAID_FONT_STACK =\n  '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif';\n\nconst preprocessChart = (raw: string) =>\n  raw.trim().replace(/^_streaming\\s*/i, \"\");\n\nconst MermaidChart: React.FC<MermaidChartProps> = ({\n  chart,\n  messages,\n  frozen,\n}) => {\n  const [svg, setSvg] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [hasRendered, setHasRendered] = useState(false);\n\n  const renderChart = async () => {\n    try {\n      const cleaned = preprocessChart(chart);\n\n      if (!cleaned) {\n        setError(messages?.emptyChart ?? DEFAULT_MESSAGES.emptyChart);\n        setSvg(\"\");\n        return;\n      }\n\n      // Initialize mermaid with the same font stack used in markdown content.\n      // Using a concrete stack avoids clipping caused by `inherit` resolving to\n      // Storybook's default font during off-screen rendering.\n      mermaid.initialize({\n        startOnLoad: false,\n        theme: \"default\",\n        securityLevel: \"loose\",\n        fontFamily: MERMAID_FONT_STACK,\n        themeVariables: {\n          fontFamily: MERMAID_FONT_STACK,\n        },\n      });\n\n      // use mermaid.parse to check for errors\n      try {\n        await mermaid.parse(cleaned);\n      } catch (parseErr) {\n        const parseErrorMsg = String(parseErr).toLowerCase();\n        setError(parseErrorMsg);\n        setSvg(\"\");\n        // once render success, setHasRendered flag\n        setHasRendered(true);\n        return;\n      }\n\n      const id = `mermaid-${Date.now()}`;\n\n      // Render the chart\n      const { svg: renderedSvg } = await mermaid.render(id, cleaned);\n      setSvg(renderedSvg);\n      setError(\"\");\n    } catch (err) {\n      const errorMsg = String(err).toLowerCase();\n      setError(errorMsg);\n      setSvg(\"\");\n    }\n  };\n\n  useEffect(() => {\n    if (frozen && hasRendered) return; // 核心：被冻结就不渲染\n    renderChart();\n  }, [chart, frozen]);\n\n  if (error) {\n    const displayChart = preprocessChart(chart) || chart.trim();\n    return (\n      <div className=\"my-4 border border-gray-200 rounded-lg bg-gray-50\">\n        <div className=\"px-4 py-3 bg-gray-100 border-b border-gray-200 flex items-center gap-2\">\n          <span className=\"text-yellow-600\">⚠️</span>\n          <span className=\"text-sm text-yellow-700 font-medium whitespace-pre-wrap\">\n            {error}\n          </span>\n        </div>\n        <div className=\"relative\">\n          <pre className=\"p-4 text-sm font-mono text-yellow-800\">\n            <code>{displayChart}</code>\n          </pre>\n          <div className=\"absolute top-2 right-2 px-2 py-1 text-xs text-yellow-700 bg-white/90 rounded border border-gray-200\">\n            {messages?.badge ?? DEFAULT_MESSAGES.badge}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"my-4 text-center overflow-auto content-render-mermaid\">\n      {svg ? (\n        <div\n          className=\"content-render-mermaid-inner\"\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      ) : (\n        <div className=\"py-8 text-gray-500 italic\">\n          {messages?.loading ?? DEFAULT_MESSAGES.loading}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default React.memo(MermaidChart, (prev, next) => {\n  return prev.chart === next.chart && prev.frozen === next.frozen;\n});\n"],"names":["DEFAULT_MESSAGES","MERMAID_FONT_STACK","preprocessChart","raw","MermaidChart","chart","messages","frozen","svg","setSvg","useState","error","setError","hasRendered","setHasRendered","renderChart","cleaned","mermaid","parseErr","parseErrorMsg","id","renderedSvg","err","errorMsg","useEffect","displayChart","jsxs","jsx","MermaidChart$1","React","prev","next"],"mappings":"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"}
+{"version":3,"file":"MermaidChart.es.js","sources":["../../../../src/components/ContentRender/plugins/MermaidChart.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport mermaid from \"mermaid\";\nimport { CJK_SAFE_SANS_FONT_FAMILY } from \"../cjkFontFamily\";\n\nexport interface MermaidChartProps {\n  chart: string;\n  messages?: {\n    emptyChart?: string;\n    loading?: string;\n    badge?: string;\n  };\n  frozen?: boolean;\n}\n\nconst DEFAULT_MESSAGES = {\n  emptyChart: \"Empty chart content\",\n  loading: \"Loading Mermaid chart...\",\n  badge: \"mermaid\",\n} as const;\n\nconst preprocessChart = (raw: string) =>\n  raw.trim().replace(/^_streaming\\s*/i, \"\");\n\nconst MermaidChart: React.FC<MermaidChartProps> = ({\n  chart,\n  messages,\n  frozen,\n}) => {\n  const [svg, setSvg] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [hasRendered, setHasRendered] = useState(false);\n\n  const renderChart = async () => {\n    try {\n      const cleaned = preprocessChart(chart);\n\n      if (!cleaned) {\n        setError(messages?.emptyChart ?? DEFAULT_MESSAGES.emptyChart);\n        setSvg(\"\");\n        return;\n      }\n\n      // Initialize Mermaid with an explicit CJK-safe font stack.\n      // Using a concrete stack avoids clipping caused by `inherit` resolving to\n      // Storybook's default font during off-screen rendering.\n      mermaid.initialize({\n        startOnLoad: false,\n        theme: \"default\",\n        securityLevel: \"loose\",\n        fontFamily: CJK_SAFE_SANS_FONT_FAMILY,\n        themeVariables: {\n          fontFamily: CJK_SAFE_SANS_FONT_FAMILY,\n        },\n      });\n\n      // use mermaid.parse to check for errors\n      try {\n        await mermaid.parse(cleaned);\n      } catch (parseErr) {\n        const parseErrorMsg = String(parseErr).toLowerCase();\n        setError(parseErrorMsg);\n        setSvg(\"\");\n        // once render success, setHasRendered flag\n        setHasRendered(true);\n        return;\n      }\n\n      const id = `mermaid-${Date.now()}`;\n\n      // Render the chart\n      const { svg: renderedSvg } = await mermaid.render(id, cleaned);\n      setSvg(renderedSvg);\n      setError(\"\");\n    } catch (err) {\n      const errorMsg = String(err).toLowerCase();\n      setError(errorMsg);\n      setSvg(\"\");\n    }\n  };\n\n  useEffect(() => {\n    if (frozen && hasRendered) return; // 核心：被冻结就不渲染\n    renderChart();\n  }, [chart, frozen]);\n\n  if (error) {\n    const displayChart = preprocessChart(chart) || chart.trim();\n    return (\n      <div className=\"my-4 border border-gray-200 rounded-lg bg-gray-50\">\n        <div className=\"px-4 py-3 bg-gray-100 border-b border-gray-200 flex items-center gap-2\">\n          <span className=\"text-yellow-600\">⚠️</span>\n          <span className=\"text-sm text-yellow-700 font-medium whitespace-pre-wrap\">\n            {error}\n          </span>\n        </div>\n        <div className=\"relative\">\n          <pre className=\"p-4 text-sm font-mono text-yellow-800\">\n            <code>{displayChart}</code>\n          </pre>\n          <div className=\"absolute top-2 right-2 px-2 py-1 text-xs text-yellow-700 bg-white/90 rounded border border-gray-200\">\n            {messages?.badge ?? DEFAULT_MESSAGES.badge}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"my-4 text-center overflow-auto content-render-mermaid\">\n      {svg ? (\n        <div\n          className=\"content-render-mermaid-inner\"\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      ) : (\n        <div className=\"py-8 text-gray-500 italic\">\n          {messages?.loading ?? DEFAULT_MESSAGES.loading}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default React.memo(MermaidChart, (prev, next) => {\n  return prev.chart === next.chart && prev.frozen === next.frozen;\n});\n"],"names":["DEFAULT_MESSAGES","preprocessChart","raw","MermaidChart","chart","messages","frozen","svg","setSvg","useState","error","setError","hasRendered","setHasRendered","renderChart","cleaned","mermaid","CJK_SAFE_SANS_FONT_FAMILY","parseErr","parseErrorMsg","id","renderedSvg","err","errorMsg","useEffect","displayChart","jsxs","jsx","MermaidChart$1","React","prev","next"],"mappings":"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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;

package/dist/components/MarkdownFlow/MarkdownFlow.es.js

@@ -1,22 +1,24 @@
 import { j as t } from "../../_virtual/jsx-runtime.es.js";
-import c from "../ContentRender/ContentRender.es.js";
+import x from "../ContentRender/ContentRender.es.js";
 import "react";
 import "react-dom/client";
+import "../ContentRender/contentRenderI18n.es.js";
 import "../ui/inputGroup/input-group.es.js";
 /* empty css                    */
-const j = ({
+const w = ({
   initialContentList: r = [],
-  customRenderBar: d,
-  onSend: a,
+  locale: d,
+  customRenderBar: a,
+  onSend: o,
   confirmButtonText: s,
   copyButtonText: u,
-  copiedButtonText: o,
-  beforeSend: i,
-  interactionDefaultValueOptions: n
+  copiedButtonText: i,
+  beforeSend: n,
+  interactionDefaultValueOptions: m
 }) => /* @__PURE__ */ t.jsx("div", { className: "markdown-flow", children: r.map((e, l) => {
-  const m = e.isFinished ?? !1 ? void 0 : a, p = i ?? (() => !0);
+  const p = e.isFinished ?? !1 ? void 0 : o, c = n ?? (() => !0);
   return /* @__PURE__ */ t.jsx(
-    c,
+    x,
     {
       content: e.content,
       userInput: e.userInput,
@@ -24,20 +26,21 @@ const j = ({
       defaultButtonText: e.defaultButtonText,
       defaultSelectedValues: e.defaultSelectedValues,
       readonly: e.readonly,
-      customRenderBar: e.customRenderBar || d,
-      onSend: m,
-      beforeSend: p,
-      interactionDefaultValueOptions: n,
+      customRenderBar: e.customRenderBar || a,
+      onSend: p,
+      beforeSend: c,
+      locale: d,
+      interactionDefaultValueOptions: m,
       onClickCustomButtonAfterContent: e.onClickCustomButtonAfterContent,
       confirmButtonText: s,
       copyButtonText: u,
-      copiedButtonText: o,
+      copiedButtonText: i,
       dynamicInteractionFormat: e.dynamicInteractionFormat
     },
     l
   );
 }) });
 export {
-  j as default
+  w as default
 };
 //# sourceMappingURL=MarkdownFlow.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownFlow.es.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":";;;;;;AA+BA,MAAMA,IAA4C,CAAC;AAAA,EACjD,oBAAAC,IAAqB,CAAA;AAAA,EACrB,iBAAAC;AAAA,EACA,QAAQC;AAAA,EACR,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,gCAAAC;AACF,MAEIC,gBAAAA,MAAC,SAAI,WAAU,iBACZ,YAAmB,IAAI,CAACC,GAAaC,MAAU;AAE9C,QAAMC,IADaF,EAAY,cAAc,KACjB,SAAYP,GAClCU,IAAaN,MAAmB,MAAM;AAC5C,SACEE,gBAAAA,EAAAA;AAAAA,IAACK;AAAA,IAAA;AAAA,MAEC,SAASJ,EAAY;AAAA,MACrB,WAAWA,EAAY;AAAA,MACvB,kBAAkBA,EAAY;AAAA,MAC9B,mBAAmBA,EAAY;AAAA,MAC/B,uBAAuBA,EAAY;AAAA,MACnC,UAAUA,EAAY;AAAA,MACtB,iBAAiBA,EAAY,mBAAmBR;AAAA,MAChD,QAAAU;AAAA,MACA,YAAAC;AAAA,MACA,gCAAAL;AAAA,MACA,iCACEE,EAAY;AAAA,MAEd,mBAAAN;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,0BAA0BI,EAAY;AAAA,IAAA;AAAA,IAjBjCC;AAAA,EAAA;AAoBX,CAAC,EAAA,CACH;"}
+{"version":3,"file":"MarkdownFlow.es.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":";;;;;;;AAkCA,MAAMA,IAA4C,CAAC;AAAA,EACjD,oBAAAC,IAAqB,CAAA;AAAA,EACrB,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,QAAQC;AAAA,EACR,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,gCAAAC;AACF,MAEIC,gBAAAA,MAAC,SAAI,WAAU,iBACZ,YAAmB,IAAI,CAACC,GAAaC,MAAU;AAE9C,QAAMC,IADaF,EAAY,cAAc,KACjB,SAAYP,GAClCU,IAAaN,MAAmB,MAAM;AAC5C,SACEE,gBAAAA,EAAAA;AAAAA,IAACK;AAAA,IAAA;AAAA,MAEC,SAASJ,EAAY;AAAA,MACrB,WAAWA,EAAY;AAAA,MACvB,kBAAkBA,EAAY;AAAA,MAC9B,mBAAmBA,EAAY;AAAA,MAC/B,uBAAuBA,EAAY;AAAA,MACnC,UAAUA,EAAY;AAAA,MACtB,iBAAiBA,EAAY,mBAAmBR;AAAA,MAChD,QAAAU;AAAA,MACA,YAAAC;AAAA,MACA,QAAAZ;AAAA,MACA,gCAAAO;AAAA,MACA,iCACEE,EAAY;AAAA,MAEd,mBAAAN;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,0BAA0BI,EAAY;AAAA,IAAA;AAAA,IAlBjCC;AAAA,EAAA;AAqBX,CAAC,EAAA,CACH;"}

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

@@ -7,6 +7,11 @@ declare const meta: {
     };
     tags: string[];
     argTypes: {
+        locale: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
         initialContentList: {
             description: string;
             table: {
@@ -23,3 +28,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const MarkdownFlowStory: Story;
+export declare const FrenchLocale: Story;

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

@@ -3,6 +3,7 @@ import { MarkdownFlowProps } from './MarkdownFlow';
 export interface ScrollableMarkdownFlowProps extends MarkdownFlowProps {
     height?: string | number;
     className?: string;
+    scrollToBottomAriaLabel?: string;
 }
 declare const ScrollableMarkdownFlow: React.FC<ScrollableMarkdownFlowProps>;
 export default ScrollableMarkdownFlow;

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

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

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

@@ -1,6 +1,7 @@
 import r from "./MarkdownFlow.es.js";
 import "../../_virtual/jsx-runtime.es.js";
 import "react";
+import "../ContentRender/contentRenderI18n.es.js";
 /* empty css                    */
 export {
   r as MarkdownFlow,

package/dist/components/MarkdownFlow/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/MarkdownFlowEditor/MarkdownFlowEditor.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../_virtual/jsx-runtime.cjs.js"),r=require("react"),Ne=require("../../node_modules/@uiw/react-codemirror/esm/index.cjs.js"),Me=require("../../node_modules/@codemirror/autocomplete/dist/index.cjs.js"),he=require("../../node_modules/@codemirror/view/dist/index.cjs.js"),$e=require("../../node_modules/@codemirror/lang-markdown/dist/index.cjs.js"),pe=require("../../node_modules/@codemirror/language/dist/index.cjs.js"),Z=require("../ui/tooltip.cjs.js"),De=require("./components/CustomDialog.cjs.js"),_e=require("./components/CustomPopover.cjs.js"),ze=require("./components/EditorToolbar.cjs.js"),Be=require("./components/VariableSearchDropdown.cjs.js"),Fe=require("./editor-context.cjs.js"),He=require("./components/ImageInject.cjs.js"),Ue=require("./components/VideoInject.cjs.js"),Ge=require("./components/VariableSelect.cjs.js"),f=require("./types.cjs.js");;/* empty css                            */const y=require("./utils.cjs.js"),We=require("./plugins/ImgPlaceholder.cjs.js"),Qe=require("./plugins/VideoPlaceholder.cjs.js"),Ye=require("./plugins/VariablePlaceholder.cjs.js"),Je=require("./plugins/SyntaxHighlighter.cjs.js"),ee=require("../../node_modules/i18next/dist/esm/i18next.cjs.js"),k=require("./editorI18n.cjs.js"),Ke=require("../../node_modules/react-i18next/dist/es/initReactI18next.cjs.js"),Xe=require("../../node_modules/react-i18next/dist/es/useTranslation.cjs.js");ee.default.isInitialized?Object.entries(k.editorLocaleResources).forEach(([C,m])=>{ee.default.addResourceBundle(C,"translation",m.translation,!0,!0)}):ee.default.use(Ke.initReactI18next).init({resources:k.editorLocaleResources,lng:k.DEFAULT_EDITOR_LOCALE,fallbackLng:k.DEFAULT_EDITOR_LOCALE,interpolation:{escapeValue:!1}});const de=[],ge=(C,m)=>{if(!C||m<0)return!1;const v=y.createVariableExpressionRegexp();let S;for(;(S=v.exec(C))!==null;){const V=S.index??0,F=V+S[0].length,H=V+2,U=F-2;if(m>=H&&m<=U)return!0;v.lastIndex===S.index&&v.lastIndex++}return!1},Ze=(C="")=>`{{${C}}}`,et=({content:C="",editMode:m="codeEdit",variables:v,systemVariables:S,onChange:V,onBlur:F,locale:H=k.DEFAULT_EDITOR_LOCALE,uploadProps:U,disabled:o=!1,toolbarActionsRight:G,onReady:xe})=>{const{t:l,i18n:N}=Xe.useTranslation(),M=k.normalizeEditorLocale(H||N.language);r.useEffect(()=>{N.language!==M&&N.changeLanguage(M)},[N,M]);const O=k.getEditorLocaleMessages(M),g=r.useMemo(()=>({image:l("toolbarInsertImage",{defaultValue:"Insert image"}),video:l("toolbarInsertVideo",{defaultValue:"Insert video"}),variable:l("slashVariable",{defaultValue:"Variable"}),addVariable:l("toolbarInsertNewVariable",{defaultValue:"Insert new variable"}),search:l("toolbarInsertExistingVariable",{defaultValue:"Insert existing variable"}),confirmOutput:l("toolbarConfirmOutput",{defaultValue:"Confirm output"}),insertLink:l("toolbarInsertLink",{defaultValue:"Insert link"}),insertButton:l("toolbarInsertButton",{defaultValue:"Insert button"}),insertSingleChoice:l("toolbarInsertSingleChoice",{defaultValue:"Insert single choice"}),insertMultiChoice:l("toolbarInsertMultiChoice",{defaultValue:"Insert multi choice"}),insertInput:l("toolbarInsertInput",{defaultValue:"Insert input"}),singleChoiceOption1:l("toolbarChoiceOption1",{defaultValue:"Option 1"}),singleChoiceOption2:l("toolbarChoiceOption2",{defaultValue:"Option 2"}),inputPlaceholder:l("toolbarInputPlaceholder",{defaultValue:"Please enter"})}),[l]),Ce=r.useMemo(()=>({searchPlaceholder:l("variableSearchPlaceholder",{defaultValue:"Search variable"}),systemLabel:l("variableSectionSystem","System Variables"),customLabel:l("variableSectionCustom","Custom Variables"),emptyLabel:l("variableNotFound","No variables found")}),[l]),be=m==="quickEdit"?l("placeholderQuickEdit",{defaultValue:l("placeholderCodeEdit",{defaultValue:l("placeholder")})}):l("placeholderCodeEdit",{defaultValue:l("placeholder")}),q=r.useMemo(()=>{const e=new Set;return(S??de).filter(n=>{const s=typeof n?.name=="string"?n.name.toLowerCase():"";return!s||e.has(s)?!1:(e.add(s),!0)})},[S]),W=r.useMemo(()=>{const e=new Set(q.map(s=>s.name.toLowerCase())),n=new Set;return(v??de).filter(s=>{const t=typeof s?.name=="string"?s.name.toLowerCase():"";return!t||e.has(t)||n.has(t)?!1:(n.add(t),!0)})},[v,q]),[Q,E]=r.useState(!1),[Y,w]=r.useState(!1),[Se,P]=r.useState(null),[te,J]=r.useState(W),[$,Ve]=r.useState(q);r.useEffect(()=>{J(W)},[W]),r.useEffect(()=>{Ve(q)},[q]);const[b,I]=r.useState(f.SelectedOption.Empty),[c,A]=r.useState(),a=r.useRef(null),D=r.useRef(null),_=r.useRef(null),[K,ne]=r.useState(!1),d=r.useCallback(()=>{ne(!1),_.current=null},[]),Ee=r.useCallback(e=>{if(!o){if(K&&_.current===e){d();return}_.current=e,ne(!0)}},[d,o,K]),Ie={selectedOption:b,setSelectedOption:I,dialogOpen:Q,setDialogOpen:E,popoverOpen:Y,setPopoverOpen:w,popoverPosition:Se,setPopoverPosition:P};r.useEffect(()=>{o&&(E(!1),w(!1),I(f.SelectedOption.Empty),A(null),P(null),d())},[d,o,E,w,P,I,A]);const j=r.useCallback(e=>{if(m!=="quickEdit"||!e)return;const n=y.extractVariableNames(e);if(!n.length)return;const s=new Set($.map(t=>t.name.toLowerCase()));J(t=>{const u=new Set(t.map(x=>x.name.toLowerCase())),h=new Set,p=[];return n.forEach(x=>{const R=x.toLowerCase();!x||s.has(R)||u.has(R)||h.has(R)||(p.push({name:x}),h.add(R))}),p.length?[...p,...t]:t})},[m,$]);r.useEffect(()=>{j(C)},[C,j]);const X=r.useCallback(e=>{if(!o)if(d(),I(e),e===f.SelectedOption.Variable){if(a.current){const{state:n}=a.current,s=n.selection.main.from,t=a.current.coordsAtPos(s);t&&P({x:t.left,y:t.bottom})}w(!0)}else E(!0)},[d,o]),L=r.useCallback(e=>{if(o||!a.current)return;const{state:n,dispatch:s}=a.current,t=n.selection.main.from;s({changes:{from:t,insert:e},selection:{anchor:t+e.length}})},[a,o]),oe=r.useCallback(e=>{if(o||!a.current)return;const{state:n,dispatch:s}=a.current,t=n.selection.main;s({changes:{from:t.from,to:t.to,insert:e},selection:{anchor:t.from+e.length}})},[o]),re=r.useCallback(()=>{a.current?.focus()},[]),se=r.useCallback(()=>a.current?.state.doc.toString()??"",[]),ae=r.useCallback(e=>{if(o)return;if(!a.current){V?.(e);return}const n=a.current,{state:s,dispatch:t}=n;t({changes:{from:0,to:s.doc.length,insert:e},selection:{anchor:e.length}})},[o,V]),z=r.useCallback(()=>{if(o||!c||!a.current||c.from===-1)return;const{from:e,to:n}=c,{dispatch:s}=a.current;s({changes:{from:e,to:n,insert:""}})},[c,a,o]),B=r.useCallback((e,n,s=!1)=>{if(o||!a.current)return;const t=a.current,{state:u,dispatch:h}=t,p=n??u.selection.main,x=Ze(e),R=s?x.length:2+e.length;h({changes:{from:p.from,to:p.to,insert:x},selection:{anchor:p.from+R}}),t.focus()},[o]),ke=r.useCallback(()=>{o||(d(),B(""))},[d,o,B]),ve=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main;s({changes:{from:t.from,to:t.to,insert:"======"},selection:{anchor:t.from+3}}),e.focus()},[o]),Oe=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main;s({changes:{from:t.from,to:t.to,insert:"[]()"},selection:{anchor:t.from+1}}),e.focus()},[o]),we=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main;s({changes:{from:t.from,to:t.to,insert:"?[]"},selection:{anchor:t.from+2}}),e.focus()},[o]),je=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main,u=g.singleChoiceOption1,h=g.singleChoiceOption2,p=`?[%{{}} ${u} | ${h}]`;s({changes:{from:t.from,to:t.to,insert:p},selection:{anchor:t.from+5}}),e.focus()},[o,g.singleChoiceOption1,g.singleChoiceOption2]),Le=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main,u=g.singleChoiceOption1,h=g.singleChoiceOption2,p=`?[%{{}} ${u} || ${h}]`;s({changes:{from:t.from,to:t.to,insert:p},selection:{anchor:t.from+5}}),e.focus()},[o,g.singleChoiceOption1,g.singleChoiceOption2]),Te=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main,h=`?[%{{}}...${g.inputPlaceholder??"请输入"}]`;s({changes:{from:t.from,to:t.to,insert:h},selection:{anchor:t.from+5}}),e.focus()},[o,g.inputPlaceholder]),Re=r.useCallback(({resourceUrl:e,resourceTitle:n,scalePercent:s})=>{if(!e||o)return;const t=y.getImageContentToInsert({resourceUrl:e,resourceTitle:n,scalePercent:s});if(c?.type===f.SelectedOption.Image){if(z(),!a.current)return;const{dispatch:u}=a.current;u({changes:{from:c.from,insert:t}})}else L(t);E(!1)},[z,o,L,c]),ye=r.useCallback(({resourceUrl:e,resourceTitle:n})=>{if(o)return;const s=y.getVideoContentToInsert(e,n);if(c?.type===f.SelectedOption.Video){if(z(),!a.current)return;const{dispatch:t}=a.current;t({changes:{from:c.from,insert:s}})}else L(s);E(!1)},[z,o,L,c]),le=r.useCallback(e=>{if(o)return;const n=c?.type===f.SelectedOption.Variable?{from:c.from,to:c.to}:void 0;B(e.name,n,!0),w(!1),d()},[o,B,c,d]),ie=r.useCallback(()=>Me.autocompletion({override:[y.createSlashCommands(X,{image:O.slashImage,video:O.slashVideo,variable:O.slashVariable})]}),[O.slashImage,O.slashVideo,O.slashVariable,X]),ce=r.useCallback(e=>{if(a.current=e.view,m==="quickEdit"&&D.current&&e.selectionSet){const n=e.state.selection.main.head,s=e.state.doc.toString();ge(s,n)||(j(s),D.current=null)}},[j,m]),ue=r.useCallback(e=>{if(e.stopPropagation(),o)return;const{type:n,from:s,to:t,dataset:u,target:h}=e.detail,p=y.parseContentInfo(n,u);if(A({type:n,value:p,from:s,to:t}),I(n),n===f.SelectedOption.Variable){if(h){const x=h.getBoundingClientRect();P({x:x.left,y:x.bottom})}w(!0)}else E(!0)},[o]);r.useEffect(()=>{Q||(I(f.SelectedOption.Empty),A(null))},[Q]),r.useEffect(()=>{!Y&&b===f.SelectedOption.Variable&&(I(f.SelectedOption.Empty),A(null))},[Y,b]),r.useEffect(()=>{const e=n=>{n.detail.view===a.current&&ue(n)};return window.addEventListener("globalTagClick",e),()=>{window.removeEventListener("globalTagClick",e)}},[ue]);const qe=r.useMemo(()=>{const e=[he.EditorView.lineWrapping,$e.markdown(),pe.syntaxHighlighting(pe.defaultHighlightStyle),Je.default];return o||e.push(ie()),m==="quickEdit"&&e.push(We.default,Qe.default,Ye.default),e.push(he.EditorView.updateListener.of(n=>{ce(n)})),e},[o,m,ie,ce]),Pe=r.useCallback(e=>{if(o)return;const n=a.current?.state.selection.main.head??-1;ge(e,n)?D.current=e:(D.current=null,j(e)),V?.(e)},[j,V,o]),fe=!o&&K,T=r.useMemo(()=>({insertTextAtCursor:L,replaceSelection:oe,focus:re,getContent:se,setContent:ae}),[re,se,L,oe,ae]),me=r.useCallback(e=>{o||"render"in e||e.onClick?.(T)},[o,T]),Ae=r.useMemo(()=>G?.length?i.jsxRuntimeExports.jsx("div",{className:"markdown-flow-editor-toolbar-right",children:G.map(e=>{if("render"in e)return i.jsxRuntimeExports.jsx("div",{className:"markdown-flow-editor-toolbar-right-item",children:e.render(T)},e.key);const n=e.label||e.tooltip||void 0,s=i.jsxRuntimeExports.jsxs("button",{type:"button",disabled:o||e.disabled,onClick:()=>me(e),className:"markdown-flow-editor-toolbar-right-button","aria-label":n,title:e.label||e.tooltip,children:[e.icon?i.jsxRuntimeExports.jsx("span",{className:"toolbar-right-icon",children:e.icon}):null,e.label?i.jsxRuntimeExports.jsx("span",{className:"toolbar-right-label",children:e.label}):null]},e.key),t=e.tooltip?i.jsxRuntimeExports.jsxs(Z.Tooltip,{children:[i.jsxRuntimeExports.jsx(Z.TooltipTrigger,{asChild:!0,children:s}),i.jsxRuntimeExports.jsx(Z.TooltipContent,{side:"top",children:e.tooltip})]}):s;return i.jsxRuntimeExports.jsx("div",{className:"markdown-flow-editor-toolbar-right-item",children:t},e.key)})}):null,[o,T,me,G]);return r.useEffect(()=>{xe?.(T)},[T]),i.jsxRuntimeExports.jsxs("div",{className:"markdown-flow-editor","data-disabled":o?"true":void 0,"aria-disabled":o,children:[i.jsxRuntimeExports.jsx(ze.default,{disabled:o,labels:g,onSelect:X,onInsertVariablePlaceholder:ke,onVariableSearchToggle:Ee,onVariableSearchClose:d,onInsertConfirmOutput:ve,onInsertLink:Oe,onInsertButton:we,onInsertSingleChoice:je,onInsertMultiChoice:Le,onInsertInputField:Te,variableSearchActive:fe,rightSlot:Ae}),i.jsxRuntimeExports.jsx(Be.default,{open:fe,anchorElement:_.current,onClose:d,onSelect:le,variables:te,systemVariables:$,labels:Ce}),i.jsxRuntimeExports.jsx("div",{className:"markdown-flow-editor-body relative overflow-auto",children:i.jsxRuntimeExports.jsxs(Fe.default.Provider,{value:Ie,children:[i.jsxRuntimeExports.jsx(Ne.default,{extensions:qe,basicSetup:{lineNumbers:!1,syntaxHighlighting:!0,highlightActiveLine:!0,highlightActiveLineGutter:!0,foldGutter:!1},className:"rounded-md",placeholder:be,value:C,theme:"light",minHeight:"2rem",editable:!o,onChange:Pe,onBlur:F}),!o&&i.jsxRuntimeExports.jsxs(De.default,{labels:{title:b===f.SelectedOption.Image?l("dialogTitleImage"):b===f.SelectedOption.Video?l("dialogTitleVideo"):b===f.SelectedOption.Variable?l("dialogTitleVariable"):l("dialogTitle")},children:[b===f.SelectedOption.Image&&i.jsxRuntimeExports.jsx(He.default,{value:c?.value,onSelect:Re,uploadProps:U}),b===f.SelectedOption.Video&&i.jsxRuntimeExports.jsx(Ue.default,{value:c?.value,onSelect:ye})]}),!o&&i.jsxRuntimeExports.jsx(_e.default,{children:i.jsxRuntimeExports.jsx(Ge.default,{variables:te,systemVariables:$,selectedName:c?.value?.variableName,onSelect:le,onAddVariable:e=>{J(n=>{const s=e.name.toLowerCase();return n.some(u=>u.name.toLowerCase()===s)?n:[e,...n]})}})})]})})]})};exports.default=et;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../_virtual/jsx-runtime.cjs.js"),r=require("react"),Ne=require("../../node_modules/@uiw/react-codemirror/esm/index.cjs.js"),Me=require("../../node_modules/@codemirror/autocomplete/dist/index.cjs.js"),he=require("../../node_modules/@codemirror/view/dist/index.cjs.js"),$e=require("../../node_modules/@codemirror/lang-markdown/dist/index.cjs.js"),pe=require("../../node_modules/@codemirror/language/dist/index.cjs.js"),Z=require("../ui/tooltip.cjs.js"),De=require("./components/CustomDialog.cjs.js"),_e=require("./components/CustomPopover.cjs.js"),ze=require("./components/EditorToolbar.cjs.js"),Fe=require("./components/VariableSearchDropdown.cjs.js"),Be=require("./editor-context.cjs.js"),He=require("./components/ImageInject.cjs.js"),Ue=require("./components/VideoInject.cjs.js"),Ge=require("./components/VariableSelect.cjs.js"),f=require("./types.cjs.js");;/* empty css                            */const R=require("./utils.cjs.js"),We=require("./plugins/ImgPlaceholder.cjs.js"),Qe=require("./plugins/VideoPlaceholder.cjs.js"),Ye=require("./plugins/VariablePlaceholder.cjs.js"),Je=require("./plugins/SyntaxHighlighter.cjs.js"),ee=require("../../node_modules/i18next/dist/esm/i18next.cjs.js"),q=require("./editorI18n.cjs.js"),Ke=require("../../lib/locale.cjs.js"),Xe=require("../../node_modules/react-i18next/dist/es/initReactI18next.cjs.js"),Ze=require("../../node_modules/react-i18next/dist/es/useTranslation.cjs.js");ee.default.isInitialized?Object.entries(q.editorLocaleResources).forEach(([C,m])=>{ee.default.addResourceBundle(C,"translation",m.translation,!0,!0)}):ee.default.use(Xe.initReactI18next).init({resources:q.editorLocaleResources,lng:q.DEFAULT_EDITOR_LOCALE,fallbackLng:q.DEFAULT_EDITOR_LOCALE,interpolation:{escapeValue:!1}});const de=[],ge=(C,m)=>{if(!C||m<0)return!1;const k=R.createVariableExpressionRegexp();let S;for(;(S=k.exec(C))!==null;){const V=S.index??0,B=V+S[0].length,H=V+2,U=B-2;if(m>=H&&m<=U)return!0;k.lastIndex===S.index&&k.lastIndex++}return!1},et=(C="")=>`{{${C}}}`,tt=({content:C="",editMode:m="codeEdit",variables:k,systemVariables:S,onChange:V,onBlur:B,locale:H=q.DEFAULT_EDITOR_LOCALE,uploadProps:U,disabled:o=!1,toolbarActionsRight:G,onReady:xe})=>{const{t:l,i18n:N}=Ze.useTranslation(),M=Ke.normalizeMarkdownFlowLocale(H||N.language);r.useEffect(()=>{N.language!==M&&N.changeLanguage(M)},[N,M]);const v=q.getEditorLocaleMessages(M),g=r.useMemo(()=>({image:l("toolbarInsertImage",{defaultValue:"Insert image"}),video:l("toolbarInsertVideo",{defaultValue:"Insert video"}),variable:l("slashVariable",{defaultValue:"Variable"}),addVariable:l("toolbarInsertNewVariable",{defaultValue:"Insert new variable"}),search:l("toolbarInsertExistingVariable",{defaultValue:"Insert existing variable"}),confirmOutput:l("toolbarConfirmOutput",{defaultValue:"Confirm output"}),insertLink:l("toolbarInsertLink",{defaultValue:"Insert link"}),insertButton:l("toolbarInsertButton",{defaultValue:"Insert button"}),insertSingleChoice:l("toolbarInsertSingleChoice",{defaultValue:"Insert single choice"}),insertMultiChoice:l("toolbarInsertMultiChoice",{defaultValue:"Insert multi choice"}),insertInput:l("toolbarInsertInput",{defaultValue:"Insert input"}),singleChoiceOption1:l("toolbarChoiceOption1",{defaultValue:"Option 1"}),singleChoiceOption2:l("toolbarChoiceOption2",{defaultValue:"Option 2"}),inputPlaceholder:l("toolbarInputPlaceholder",{defaultValue:"Please enter"})}),[l]),Ce=r.useMemo(()=>({searchPlaceholder:l("variableSearchPlaceholder",{defaultValue:"Search variable"}),systemLabel:l("variableSectionSystem","System Variables"),customLabel:l("variableSectionCustom","Custom Variables"),emptyLabel:l("variableNotFound","No variables found")}),[l]),be=m==="quickEdit"?l("placeholderQuickEdit",{defaultValue:l("placeholderCodeEdit",{defaultValue:l("placeholder")})}):l("placeholderCodeEdit",{defaultValue:l("placeholder")}),y=r.useMemo(()=>{const e=new Set;return(S??de).filter(n=>{const s=typeof n?.name=="string"?n.name.toLowerCase():"";return!s||e.has(s)?!1:(e.add(s),!0)})},[S]),W=r.useMemo(()=>{const e=new Set(y.map(s=>s.name.toLowerCase())),n=new Set;return(k??de).filter(s=>{const t=typeof s?.name=="string"?s.name.toLowerCase():"";return!t||e.has(t)||n.has(t)?!1:(n.add(t),!0)})},[k,y]),[Q,E]=r.useState(!1),[Y,O]=r.useState(!1),[Se,P]=r.useState(null),[te,J]=r.useState(W),[$,Ve]=r.useState(y);r.useEffect(()=>{J(W)},[W]),r.useEffect(()=>{Ve(y)},[y]);const[b,I]=r.useState(f.SelectedOption.Empty),[c,A]=r.useState(),a=r.useRef(null),D=r.useRef(null),_=r.useRef(null),[K,ne]=r.useState(!1),d=r.useCallback(()=>{ne(!1),_.current=null},[]),Ee=r.useCallback(e=>{if(!o){if(K&&_.current===e){d();return}_.current=e,ne(!0)}},[d,o,K]),Ie={selectedOption:b,setSelectedOption:I,dialogOpen:Q,setDialogOpen:E,popoverOpen:Y,setPopoverOpen:O,popoverPosition:Se,setPopoverPosition:P};r.useEffect(()=>{o&&(E(!1),O(!1),I(f.SelectedOption.Empty),A(null),P(null),d())},[d,o,E,O,P,I,A]);const w=r.useCallback(e=>{if(m!=="quickEdit"||!e)return;const n=R.extractVariableNames(e);if(!n.length)return;const s=new Set($.map(t=>t.name.toLowerCase()));J(t=>{const u=new Set(t.map(x=>x.name.toLowerCase())),h=new Set,p=[];return n.forEach(x=>{const T=x.toLowerCase();!x||s.has(T)||u.has(T)||h.has(T)||(p.push({name:x}),h.add(T))}),p.length?[...p,...t]:t})},[m,$]);r.useEffect(()=>{w(C)},[C,w]);const X=r.useCallback(e=>{if(!o)if(d(),I(e),e===f.SelectedOption.Variable){if(a.current){const{state:n}=a.current,s=n.selection.main.from,t=a.current.coordsAtPos(s);t&&P({x:t.left,y:t.bottom})}O(!0)}else E(!0)},[d,o]),j=r.useCallback(e=>{if(o||!a.current)return;const{state:n,dispatch:s}=a.current,t=n.selection.main.from;s({changes:{from:t,insert:e},selection:{anchor:t+e.length}})},[a,o]),oe=r.useCallback(e=>{if(o||!a.current)return;const{state:n,dispatch:s}=a.current,t=n.selection.main;s({changes:{from:t.from,to:t.to,insert:e},selection:{anchor:t.from+e.length}})},[o]),re=r.useCallback(()=>{a.current?.focus()},[]),se=r.useCallback(()=>a.current?.state.doc.toString()??"",[]),ae=r.useCallback(e=>{if(o)return;if(!a.current){V?.(e);return}const n=a.current,{state:s,dispatch:t}=n;t({changes:{from:0,to:s.doc.length,insert:e},selection:{anchor:e.length}})},[o,V]),z=r.useCallback(()=>{if(o||!c||!a.current||c.from===-1)return;const{from:e,to:n}=c,{dispatch:s}=a.current;s({changes:{from:e,to:n,insert:""}})},[c,a,o]),F=r.useCallback((e,n,s=!1)=>{if(o||!a.current)return;const t=a.current,{state:u,dispatch:h}=t,p=n??u.selection.main,x=et(e),T=s?x.length:2+e.length;h({changes:{from:p.from,to:p.to,insert:x},selection:{anchor:p.from+T}}),t.focus()},[o]),ke=r.useCallback(()=>{o||(d(),F(""))},[d,o,F]),ve=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main;s({changes:{from:t.from,to:t.to,insert:"======"},selection:{anchor:t.from+3}}),e.focus()},[o]),Oe=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main;s({changes:{from:t.from,to:t.to,insert:"[]()"},selection:{anchor:t.from+1}}),e.focus()},[o]),we=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main;s({changes:{from:t.from,to:t.to,insert:"?[]"},selection:{anchor:t.from+2}}),e.focus()},[o]),je=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main,u=g.singleChoiceOption1,h=g.singleChoiceOption2,p=`?[%{{}} ${u} | ${h}]`;s({changes:{from:t.from,to:t.to,insert:p},selection:{anchor:t.from+5}}),e.focus()},[o,g.singleChoiceOption1,g.singleChoiceOption2]),Le=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main,u=g.singleChoiceOption1,h=g.singleChoiceOption2,p=`?[%{{}} ${u} || ${h}]`;s({changes:{from:t.from,to:t.to,insert:p},selection:{anchor:t.from+5}}),e.focus()},[o,g.singleChoiceOption1,g.singleChoiceOption2]),Te=r.useCallback(()=>{if(o||!a.current)return;const e=a.current,{state:n,dispatch:s}=e,t=n.selection.main,h=`?[%{{}}...${g.inputPlaceholder??"请输入"}]`;s({changes:{from:t.from,to:t.to,insert:h},selection:{anchor:t.from+5}}),e.focus()},[o,g.inputPlaceholder]),Re=r.useCallback(({resourceUrl:e,resourceTitle:n,scalePercent:s})=>{if(!e||o)return;const t=R.getImageContentToInsert({resourceUrl:e,resourceTitle:n,scalePercent:s});if(c?.type===f.SelectedOption.Image){if(z(),!a.current)return;const{dispatch:u}=a.current;u({changes:{from:c.from,insert:t}})}else j(t);E(!1)},[z,o,j,c]),qe=r.useCallback(({resourceUrl:e,resourceTitle:n})=>{if(o)return;const s=R.getVideoContentToInsert(e,n);if(c?.type===f.SelectedOption.Video){if(z(),!a.current)return;const{dispatch:t}=a.current;t({changes:{from:c.from,insert:s}})}else j(s);E(!1)},[z,o,j,c]),le=r.useCallback(e=>{if(o)return;const n=c?.type===f.SelectedOption.Variable?{from:c.from,to:c.to}:void 0;F(e.name,n,!0),O(!1),d()},[o,F,c,d]),ie=r.useCallback(()=>Me.autocompletion({override:[R.createSlashCommands(X,{image:v.slashImage,video:v.slashVideo,variable:v.slashVariable})]}),[v.slashImage,v.slashVideo,v.slashVariable,X]),ce=r.useCallback(e=>{if(a.current=e.view,m==="quickEdit"&&D.current&&e.selectionSet){const n=e.state.selection.main.head,s=e.state.doc.toString();ge(s,n)||(w(s),D.current=null)}},[w,m]),ue=r.useCallback(e=>{if(e.stopPropagation(),o)return;const{type:n,from:s,to:t,dataset:u,target:h}=e.detail,p=R.parseContentInfo(n,u);if(A({type:n,value:p,from:s,to:t}),I(n),n===f.SelectedOption.Variable){if(h){const x=h.getBoundingClientRect();P({x:x.left,y:x.bottom})}O(!0)}else E(!0)},[o]);r.useEffect(()=>{Q||(I(f.SelectedOption.Empty),A(null))},[Q]),r.useEffect(()=>{!Y&&b===f.SelectedOption.Variable&&(I(f.SelectedOption.Empty),A(null))},[Y,b]),r.useEffect(()=>{const e=n=>{n.detail.view===a.current&&ue(n)};return window.addEventListener("globalTagClick",e),()=>{window.removeEventListener("globalTagClick",e)}},[ue]);const ye=r.useMemo(()=>{const e=[he.EditorView.lineWrapping,$e.markdown(),pe.syntaxHighlighting(pe.defaultHighlightStyle),Je.default];return o||e.push(ie()),m==="quickEdit"&&e.push(We.default,Qe.default,Ye.default),e.push(he.EditorView.updateListener.of(n=>{ce(n)})),e},[o,m,ie,ce]),Pe=r.useCallback(e=>{if(o)return;const n=a.current?.state.selection.main.head??-1;ge(e,n)?D.current=e:(D.current=null,w(e)),V?.(e)},[w,V,o]),fe=!o&&K,L=r.useMemo(()=>({insertTextAtCursor:j,replaceSelection:oe,focus:re,getContent:se,setContent:ae}),[re,se,j,oe,ae]),me=r.useCallback(e=>{o||"render"in e||e.onClick?.(L)},[o,L]),Ae=r.useMemo(()=>G?.length?i.jsxRuntimeExports.jsx("div",{className:"markdown-flow-editor-toolbar-right",children:G.map(e=>{if("render"in e)return i.jsxRuntimeExports.jsx("div",{className:"markdown-flow-editor-toolbar-right-item",children:e.render(L)},e.key);const n=e.label||e.tooltip||void 0,s=i.jsxRuntimeExports.jsxs("button",{type:"button",disabled:o||e.disabled,onClick:()=>me(e),className:"markdown-flow-editor-toolbar-right-button","aria-label":n,title:e.label||e.tooltip,children:[e.icon?i.jsxRuntimeExports.jsx("span",{className:"toolbar-right-icon",children:e.icon}):null,e.label?i.jsxRuntimeExports.jsx("span",{className:"toolbar-right-label",children:e.label}):null]},e.key),t=e.tooltip?i.jsxRuntimeExports.jsxs(Z.Tooltip,{children:[i.jsxRuntimeExports.jsx(Z.TooltipTrigger,{asChild:!0,children:s}),i.jsxRuntimeExports.jsx(Z.TooltipContent,{side:"top",children:e.tooltip})]}):s;return i.jsxRuntimeExports.jsx("div",{className:"markdown-flow-editor-toolbar-right-item",children:t},e.key)})}):null,[o,L,me,G]);return r.useEffect(()=>{xe?.(L)},[L]),i.jsxRuntimeExports.jsxs("div",{className:"markdown-flow-editor","data-disabled":o?"true":void 0,"aria-disabled":o,children:[i.jsxRuntimeExports.jsx(ze.default,{disabled:o,labels:g,onSelect:X,onInsertVariablePlaceholder:ke,onVariableSearchToggle:Ee,onVariableSearchClose:d,onInsertConfirmOutput:ve,onInsertLink:Oe,onInsertButton:we,onInsertSingleChoice:je,onInsertMultiChoice:Le,onInsertInputField:Te,variableSearchActive:fe,rightSlot:Ae}),i.jsxRuntimeExports.jsx(Fe.default,{open:fe,anchorElement:_.current,onClose:d,onSelect:le,variables:te,systemVariables:$,labels:Ce}),i.jsxRuntimeExports.jsx("div",{className:"markdown-flow-editor-body relative overflow-auto",children:i.jsxRuntimeExports.jsxs(Be.default.Provider,{value:Ie,children:[i.jsxRuntimeExports.jsx(Ne.default,{extensions:ye,basicSetup:{lineNumbers:!1,syntaxHighlighting:!0,highlightActiveLine:!0,highlightActiveLineGutter:!0,foldGutter:!1},className:"rounded-md",placeholder:be,value:C,theme:"light",minHeight:"2rem",editable:!o,onChange:Pe,onBlur:B}),!o&&i.jsxRuntimeExports.jsxs(De.default,{labels:{title:b===f.SelectedOption.Image?l("dialogTitleImage"):b===f.SelectedOption.Video?l("dialogTitleVideo"):b===f.SelectedOption.Variable?l("dialogTitleVariable"):l("dialogTitle")},children:[b===f.SelectedOption.Image&&i.jsxRuntimeExports.jsx(He.default,{value:c?.value,onSelect:Re,uploadProps:U}),b===f.SelectedOption.Video&&i.jsxRuntimeExports.jsx(Ue.default,{value:c?.value,onSelect:qe})]}),!o&&i.jsxRuntimeExports.jsx(_e.default,{children:i.jsxRuntimeExports.jsx(Ge.default,{variables:te,systemVariables:$,selectedName:c?.value?.variableName,onSelect:le,onAddVariable:e=>{J(n=>{const s=e.name.toLowerCase();return n.some(u=>u.name.toLowerCase()===s)?n:[e,...n]})}})})]})})]})};exports.default=tt;
 //# sourceMappingURL=MarkdownFlowEditor.cjs.js.map