markdown-flow-ui 0.1.100-beta.4 → 0.1.100-beta.40

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

@@ -1 +1 @@
-{"version":3,"file":"SandboxApp.es.js","sources":["../../../src/components/ContentRender/SandboxApp.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nexport interface SandboxAppProps {\n  html: string;\n  styleLoadingText?: string;\n  scriptLoadingText?: string;\n  resetToken?: number;\n  mode?: \"content\" | \"blackboard\";\n  hasRootVhHeight?: boolean;\n}\n\nconst IMAGE_REUSE_ATTRIBUTES = [\n  \"src\",\n  \"srcset\",\n  \"sizes\",\n  \"alt\",\n  \"class\",\n  \"width\",\n  \"height\",\n  \"style\",\n  \"loading\",\n  \"decoding\",\n  \"crossorigin\",\n  \"referrerpolicy\",\n];\n\nconst getImageReuseKey = (image: HTMLImageElement) =>\n  IMAGE_REUSE_ATTRIBUTES.map(\n    (attribute) => `${attribute}:${image.getAttribute(attribute) || \"\"}`\n  ).join(\"|\");\n\nconst collectReusableImages = (root: ParentNode) => {\n  const imageMap = new Map<string, HTMLImageElement[]>();\n  root.querySelectorAll(\"img\").forEach((node) => {\n    const image = node as HTMLImageElement;\n    const key = getImageReuseKey(image);\n    const bucket = imageMap.get(key) || [];\n    bucket.push(image);\n    imageMap.set(key, bucket);\n  });\n  return imageMap;\n};\n\nconst syncImageAttributes = (\n  sourceImage: HTMLImageElement,\n  targetImage: HTMLImageElement\n) => {\n  const sourceAttributes = Array.from(sourceImage.attributes);\n  const sourceAttributeNames = new Set(\n    sourceAttributes.map((attribute) => attribute.name)\n  );\n\n  Array.from(targetImage.attributes).forEach((attribute) => {\n    if (!sourceAttributeNames.has(attribute.name)) {\n      targetImage.removeAttribute(attribute.name);\n    }\n  });\n\n  sourceAttributes.forEach((attribute) => {\n    targetImage.setAttribute(attribute.name, attribute.value);\n  });\n};\n\nconst reuseRenderedImages = (\n  root: ParentNode,\n  imageMap: Map<string, HTMLImageElement[]>\n) => {\n  if (!imageMap.size) return;\n\n  root.querySelectorAll(\"img\").forEach((node) => {\n    const nextImage = node as HTMLImageElement;\n    const key = getImageReuseKey(nextImage);\n    const bucket = imageMap.get(key);\n    const preservedImage = bucket?.shift();\n    if (!preservedImage) return;\n\n    syncImageAttributes(nextImage, preservedImage);\n    nextImage.replaceWith(preservedImage);\n\n    if (bucket && bucket.length === 0) {\n      imageMap.delete(key);\n    }\n  });\n};\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({\n  html,\n  styleLoadingText,\n  scriptLoadingText,\n  resetToken = 0,\n  mode = \"content\",\n  hasRootVhHeight = false,\n}) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [, setIsWaitingFirstDiv] = useState(true);\n  const [isGeneratingStyles, setIsGeneratingStyles] = useState(false);\n  const [isGeneratingScripts, setIsGeneratingScripts] = useState(false);\n  const appendedStylesRef = useRef<HTMLStyleElement[]>([]);\n  const appendedScriptsRef = useRef<HTMLScriptElement[]>([]);\n  const styleStartRef = useRef(0);\n  const scriptStartRef = useRef(0);\n  const styleTimerRef = useRef<number | null>(null);\n  const scriptTimerRef = useRef<number | null>(null);\n  const hasStylesRef = useRef(false);\n  const hasScriptsRef = useRef(false);\n  const hasRenderedContentRef = useRef(false);\n  const prevResetTokenRef = useRef(resetToken);\n  const MIN_LOADING_MS = 200;\n\n  const clearTimer = (timerRef: React.MutableRefObject<number | null>) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  const settleStateWithMinimumDelay = (\n    setter: React.Dispatch<React.SetStateAction<boolean>>,\n    timerRef: React.MutableRefObject<number | null>,\n    startRef: React.MutableRefObject<number>,\n    onDone?: () => void\n  ) => {\n    const elapsed = performance.now() - startRef.current;\n    const delay = Math.max(0, MIN_LOADING_MS - elapsed);\n    clearTimer(timerRef);\n    timerRef.current = window.setTimeout(() => {\n      setter(false);\n      onDone?.();\n      timerRef.current = null;\n    }, delay);\n  };\n\n  useEffect(() => {\n    const doc = containerRef.current?.ownerDocument;\n    if (!doc) return;\n    const styleId = \"sandbox-spinner-style\";\n    let styleEl = doc.getElementById(styleId) as HTMLStyleElement | null;\n    if (!styleEl) {\n      styleEl = doc.createElement(\"style\");\n      styleEl.id = styleId;\n      doc.head?.appendChild(styleEl);\n    }\n    styleEl.textContent = `\n      @keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }\n      .sandbox-wrapper { align-items: center; }\n      .sandbox-container { width: 100%; }\n      .sandbox-container svg,\n      .sandbox-container img { display: block; margin-left: auto; margin-right: auto; }\n      .justify-\\\\[safe_center\\\\]{\n        justify-content: safe center;\n      }\n    `;\n  }, []);\n\n  useEffect(() => {\n    if (resetToken !== prevResetTokenRef.current) {\n      hasRenderedContentRef.current = false;\n      prevResetTokenRef.current = resetToken;\n    }\n    clearTimer(styleTimerRef);\n    clearTimer(scriptTimerRef);\n    hasStylesRef.current = false;\n    hasScriptsRef.current = false;\n\n    const container = containerRef.current;\n    if (!container) return;\n    const doc = container.ownerDocument;\n    const body = doc?.body;\n    if (!body) return;\n    const reusableImages = collectReusableImages(container);\n\n    appendedStylesRef.current.forEach((node) => node.remove());\n    appendedStylesRef.current = [];\n    appendedScriptsRef.current.forEach((node) => node.remove());\n    appendedScriptsRef.current = [];\n\n    const hasRenderedBefore = hasRenderedContentRef.current;\n    setIsWaitingFirstDiv(!hasRenderedBefore);\n    setIsGeneratingStyles(false);\n    setIsGeneratingScripts(false);\n    const wrapper = doc.createElement(\"div\");\n    wrapper.innerHTML = html;\n\n    const openScriptCount = (html.match(/<script[\\s>]/gi) || []).length;\n    const closeScriptCount = (html.match(/<\\/script>/gi) || []).length;\n    const shouldExecuteScripts =\n      openScriptCount > 0 && openScriptCount === closeScriptCount;\n\n    const resourceQueue: HTMLElement[] = [];\n\n    Array.from(wrapper.querySelectorAll(\"style, script\")).forEach((node) => {\n      if (node.tagName.toLowerCase() === \"style\") {\n        const cloned = doc.createElement(\"style\");\n        cloned.textContent = node.textContent || \"\";\n        Array.from(node.attributes).forEach((attr) => {\n          cloned.setAttribute(attr.name, attr.value);\n        });\n        resourceQueue.push(cloned);\n      } else {\n        const replacement = doc.createElement(\"script\");\n        Array.from(node.attributes).forEach((attr) => {\n          replacement.setAttribute(attr.name, attr.value);\n        });\n        replacement.textContent = node.textContent || \"\";\n        resourceQueue.push(replacement);\n      }\n      node.remove();\n    });\n    reuseRenderedImages(wrapper, reusableImages);\n\n    const hasStyles = resourceQueue.some(\n      (node) => node.tagName.toLowerCase() === \"style\"\n    );\n    const hasScripts = resourceQueue.some(\n      (node) => node.tagName.toLowerCase() === \"script\"\n    );\n    if (hasStyles) {\n      hasStylesRef.current = true;\n      styleStartRef.current = performance.now();\n      clearTimer(styleTimerRef);\n      setIsGeneratingStyles(true);\n    }\n    if (hasScripts) {\n      hasScriptsRef.current = true;\n      scriptStartRef.current = performance.now();\n      clearTimer(scriptTimerRef);\n      setIsGeneratingScripts(true);\n    }\n\n    const hasFirstElement = !!wrapper.firstElementChild;\n    setIsWaitingFirstDiv(!hasFirstElement && !hasRenderedBefore);\n    if (hasFirstElement) {\n      hasRenderedContentRef.current = true;\n    }\n\n    container.innerHTML = \"\";\n    const contentNodes = Array.from(wrapper.childNodes);\n    container.append(...contentNodes);\n\n    resourceQueue.forEach((node) => {\n      if (node.tagName.toLowerCase() === \"style\") {\n        doc.head?.appendChild(node);\n        appendedStylesRef.current.push(node as HTMLStyleElement);\n        return;\n      }\n\n      if (shouldExecuteScripts) {\n        const scriptNode = node as HTMLScriptElement;\n        const scriptText = scriptNode.textContent || \"\";\n        const shouldValidate = !scriptNode.src;\n\n        if (shouldValidate) {\n          try {\n            // Validate script is syntactically complete before executing\n\n            new Function(scriptText);\n          } catch {\n            scriptNode.remove();\n            return;\n          }\n        }\n\n        try {\n          body.appendChild(scriptNode);\n          appendedScriptsRef.current.push(scriptNode);\n        } catch {\n          scriptNode.remove();\n        }\n      } else {\n        // Defer execution until all script tags are fully received\n        node.remove();\n      }\n    });\n    requestAnimationFrame(() => {\n      if (hasStyles) {\n        settleStateWithMinimumDelay(\n          setIsGeneratingStyles,\n          styleTimerRef,\n          styleStartRef,\n          () => {\n            hasStylesRef.current = false;\n          }\n        );\n      }\n      if (hasScripts) {\n        settleStateWithMinimumDelay(\n          setIsGeneratingScripts,\n          scriptTimerRef,\n          scriptStartRef,\n          () => {\n            hasScriptsRef.current = false;\n          }\n        );\n      }\n    });\n  }, [html, resetToken]);\n\n  useEffect(\n    () => () => {\n      clearTimer(styleTimerRef);\n      clearTimer(scriptTimerRef);\n    },\n    []\n  );\n\n  const overlayMessage = (() => {\n    if (isGeneratingScripts || hasScriptsRef.current)\n      return scriptLoadingText || \"Building scripts cache...\";\n    if (isGeneratingStyles || hasStylesRef.current)\n      return styleLoadingText || \"Building styles...\";\n    return null;\n  })();\n\n  const isBlackboard = mode === \"blackboard\";\n  const sandboxWrapperStyle: React.CSSProperties = {\n    position: \"relative\",\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    // Keep blackboard scroll behavior while centering content in non-blackboard mode\n    justifyContent: isBlackboard ? \"space-around\" : \"flex-start\",\n  };\n  const sandboxContainerStyle: React.CSSProperties = {\n    pointerEvents: overlayMessage ? \"none\" : undefined,\n    margin: isBlackboard ? undefined : \"auto 0\",\n    width: \"100%\",\n  };\n\n  return (\n    <div\n      ref={wrapperRef}\n      data-root-vh={hasRootVhHeight ? \"true\" : \"false\"}\n      className=\"sandbox-wrapper\"\n      style={sandboxWrapperStyle}\n      aria-busy={!!overlayMessage}\n    >\n      <div\n        ref={containerRef}\n        className=\"sandbox-container\"\n        style={sandboxContainerStyle}\n      />\n      {overlayMessage && (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            background: \"rgba(51, 51, 51, 0.80)\",\n            color: \"#ffffff\",\n            fontSize: 16,\n            fontWeight: 700,\n            gap: 10,\n            pointerEvents: \"auto\",\n            zIndex: 20,\n          }}\n        >\n          <Loader2\n            aria-hidden\n            size={20}\n            style={{ animation: \"sandbox-spin 1s linear infinite\" }}\n          />\n          {overlayMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default SandboxApp;\n"],"names":["IMAGE_REUSE_ATTRIBUTES","getImageReuseKey","image","attribute","collectReusableImages","root","imageMap","node","key","bucket","syncImageAttributes","sourceImage","targetImage","sourceAttributes","sourceAttributeNames","reuseRenderedImages","nextImage","preservedImage","SandboxApp","html","styleLoadingText","scriptLoadingText","resetToken","mode","hasRootVhHeight","wrapperRef","useRef","containerRef","setIsWaitingFirstDiv","useState","isGeneratingStyles","setIsGeneratingStyles","isGeneratingScripts","setIsGeneratingScripts","appendedStylesRef","appendedScriptsRef","styleStartRef","scriptStartRef","styleTimerRef","scriptTimerRef","hasStylesRef","hasScriptsRef","hasRenderedContentRef","prevResetTokenRef","MIN_LOADING_MS","clearTimer","timerRef","settleStateWithMinimumDelay","setter","startRef","onDone","elapsed","delay","useEffect","doc","styleId","styleEl","container","body","reusableImages","hasRenderedBefore","wrapper","openScriptCount","closeScriptCount","shouldExecuteScripts","resourceQueue","cloned","attr","replacement","hasStyles","hasScripts","hasFirstElement","contentNodes","scriptNode","scriptText","overlayMessage","isBlackboard","sandboxWrapperStyle","sandboxContainerStyle","jsxs","jsx","Loader2"],"mappings":"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"}
+{"version":3,"file":"SandboxApp.es.js","sources":["../../../src/components/ContentRender/SandboxApp.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nexport interface SandboxAppProps {\n  html: string;\n  loadingText?: string;\n  styleLoadingText?: string;\n  scriptLoadingText?: string;\n  fullScreenButtonText?: string;\n  hideFullScreen?: boolean;\n  resetToken?: number;\n  mode?: \"content\" | \"blackboard\";\n  hasRootVhHeight?: boolean;\n  stretchRootHeight?: boolean;\n}\n\nconst IMAGE_REUSE_ATTRIBUTES = [\n  \"src\",\n  \"srcset\",\n  \"sizes\",\n  \"alt\",\n  \"class\",\n  \"width\",\n  \"height\",\n  \"style\",\n  \"loading\",\n  \"decoding\",\n  \"crossorigin\",\n  \"referrerpolicy\",\n  \"fetchpriority\",\n];\n\nconst getImageReuseKey = (image: HTMLImageElement) =>\n  IMAGE_REUSE_ATTRIBUTES.map(\n    (attribute) => `${attribute}:${image.getAttribute(attribute) || \"\"}`\n  ).join(\"|\");\n\nconst collectReusableImages = (root: ParentNode) => {\n  const imageMap = new Map<string, HTMLImageElement[]>();\n  root.querySelectorAll(\"img\").forEach((node) => {\n    const image = node as HTMLImageElement;\n    const key = getImageReuseKey(image);\n    const bucket = imageMap.get(key) || [];\n    bucket.push(image);\n    imageMap.set(key, bucket);\n  });\n  return imageMap;\n};\n\nconst syncImageAttributes = (\n  sourceImage: HTMLImageElement,\n  targetImage: HTMLImageElement\n) => {\n  const sourceAttributes = Array.from(sourceImage.attributes);\n  const sourceAttributeNames = new Set(\n    sourceAttributes.map((attribute) => attribute.name)\n  );\n\n  Array.from(targetImage.attributes).forEach((attribute) => {\n    if (!sourceAttributeNames.has(attribute.name)) {\n      targetImage.removeAttribute(attribute.name);\n    }\n  });\n\n  sourceAttributes.forEach((attribute) => {\n    targetImage.setAttribute(attribute.name, attribute.value);\n  });\n};\n\nconst reuseRenderedImages = (\n  root: ParentNode,\n  imageMap: Map<string, HTMLImageElement[]>\n) => {\n  if (!imageMap.size) return;\n\n  root.querySelectorAll(\"img\").forEach((node) => {\n    const nextImage = node as HTMLImageElement;\n    const key = getImageReuseKey(nextImage);\n    const bucket = imageMap.get(key);\n    const preservedImage = bucket?.shift();\n    if (!preservedImage) return;\n\n    // Clone the already-rendered image instead of moving the live node out of\n    // the visible tree before the next DOM commit.\n    const clonedImage = preservedImage.cloneNode(true) as HTMLImageElement;\n    syncImageAttributes(nextImage, clonedImage);\n    nextImage.replaceWith(clonedImage);\n\n    if (bucket && bucket.length === 0) {\n      imageMap.delete(key);\n    }\n  });\n};\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({\n  html,\n  styleLoadingText,\n  scriptLoadingText,\n  resetToken = 0,\n  mode = \"content\",\n  hasRootVhHeight = false,\n  stretchRootHeight = false,\n}) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [, setIsWaitingFirstDiv] = useState(true);\n  const [isGeneratingStyles, setIsGeneratingStyles] = useState(false);\n  const [isGeneratingScripts, setIsGeneratingScripts] = useState(false);\n  const appendedStylesRef = useRef<HTMLStyleElement[]>([]);\n  const appendedScriptsRef = useRef<HTMLScriptElement[]>([]);\n  const styleStartRef = useRef(0);\n  const scriptStartRef = useRef(0);\n  const styleTimerRef = useRef<number | null>(null);\n  const scriptTimerRef = useRef<number | null>(null);\n  const hasStylesRef = useRef(false);\n  const hasScriptsRef = useRef(false);\n  const hasRenderedContentRef = useRef(false);\n  const prevResetTokenRef = useRef(resetToken);\n  const MIN_LOADING_MS = 200;\n\n  const clearTimer = (timerRef: React.MutableRefObject<number | null>) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  const settleStateWithMinimumDelay = (\n    setter: React.Dispatch<React.SetStateAction<boolean>>,\n    timerRef: React.MutableRefObject<number | null>,\n    startRef: React.MutableRefObject<number>,\n    onDone?: () => void\n  ) => {\n    const elapsed = performance.now() - startRef.current;\n    const delay = Math.max(0, MIN_LOADING_MS - elapsed);\n    clearTimer(timerRef);\n    timerRef.current = window.setTimeout(() => {\n      setter(false);\n      onDone?.();\n      timerRef.current = null;\n    }, delay);\n  };\n\n  useEffect(() => {\n    const doc = containerRef.current?.ownerDocument;\n    if (!doc) return;\n    const styleId = \"sandbox-spinner-style\";\n    let styleEl = doc.getElementById(styleId) as HTMLStyleElement | null;\n    if (!styleEl) {\n      styleEl = doc.createElement(\"style\");\n      styleEl.id = styleId;\n      doc.head?.appendChild(styleEl);\n    }\n    styleEl.textContent = `\n      @keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }\n      .sandbox-wrapper { align-items: center; }\n      .sandbox-container { position: relative; width: 100%; }\n      .sandbox-container svg,\n      .sandbox-container img { display: block; margin-left: auto; margin-right: auto; }\n      .justify-\\\\[safe_center\\\\]{\n        justify-content: safe center;\n      }\n    `;\n  }, []);\n\n  useEffect(() => {\n    if (resetToken !== prevResetTokenRef.current) {\n      hasRenderedContentRef.current = false;\n      prevResetTokenRef.current = resetToken;\n    }\n    clearTimer(styleTimerRef);\n    clearTimer(scriptTimerRef);\n    hasStylesRef.current = false;\n    hasScriptsRef.current = false;\n\n    const container = containerRef.current;\n    if (!container) return;\n    const doc = container.ownerDocument;\n    const body = doc?.body;\n    if (!body) return;\n    const reusableImages = collectReusableImages(container);\n\n    appendedStylesRef.current.forEach((node) => node.remove());\n    appendedStylesRef.current = [];\n    appendedScriptsRef.current.forEach((node) => node.remove());\n    appendedScriptsRef.current = [];\n\n    const hasRenderedBefore = hasRenderedContentRef.current;\n    setIsWaitingFirstDiv(!hasRenderedBefore);\n    setIsGeneratingStyles(false);\n    setIsGeneratingScripts(false);\n    const wrapper = doc.createElement(\"div\");\n    wrapper.innerHTML = html;\n\n    const openScriptCount = (html.match(/<script[\\s>]/gi) || []).length;\n    const closeScriptCount = (html.match(/<\\/script>/gi) || []).length;\n    const shouldExecuteScripts =\n      openScriptCount > 0 && openScriptCount === closeScriptCount;\n\n    const resourceQueue: HTMLElement[] = [];\n\n    Array.from(wrapper.querySelectorAll(\"style, script\")).forEach((node) => {\n      if (node.tagName.toLowerCase() === \"style\") {\n        const cloned = doc.createElement(\"style\");\n        cloned.textContent = node.textContent || \"\";\n        Array.from(node.attributes).forEach((attr) => {\n          cloned.setAttribute(attr.name, attr.value);\n        });\n        resourceQueue.push(cloned);\n      } else {\n        const replacement = doc.createElement(\"script\");\n        Array.from(node.attributes).forEach((attr) => {\n          replacement.setAttribute(attr.name, attr.value);\n        });\n        replacement.textContent = node.textContent || \"\";\n        resourceQueue.push(replacement);\n      }\n      node.remove();\n    });\n    reuseRenderedImages(wrapper, reusableImages);\n\n    const hasStyles = resourceQueue.some(\n      (node) => node.tagName.toLowerCase() === \"style\"\n    );\n    const hasScripts = resourceQueue.some(\n      (node) => node.tagName.toLowerCase() === \"script\"\n    );\n    if (hasStyles) {\n      hasStylesRef.current = true;\n      styleStartRef.current = performance.now();\n      clearTimer(styleTimerRef);\n      setIsGeneratingStyles(true);\n    }\n    if (hasScripts) {\n      hasScriptsRef.current = true;\n      scriptStartRef.current = performance.now();\n      clearTimer(scriptTimerRef);\n      setIsGeneratingScripts(true);\n    }\n\n    const hasFirstElement = !!wrapper.firstElementChild;\n    setIsWaitingFirstDiv(!hasFirstElement && !hasRenderedBefore);\n    if (hasFirstElement) {\n      hasRenderedContentRef.current = true;\n    }\n\n    const contentNodes = Array.from(wrapper.childNodes);\n    container.replaceChildren(...contentNodes);\n\n    resourceQueue.forEach((node) => {\n      if (node.tagName.toLowerCase() === \"style\") {\n        doc.head?.appendChild(node);\n        appendedStylesRef.current.push(node as HTMLStyleElement);\n        return;\n      }\n\n      if (shouldExecuteScripts) {\n        const scriptNode = node as HTMLScriptElement;\n        const scriptText = scriptNode.textContent || \"\";\n        const shouldValidate = !scriptNode.src;\n\n        if (shouldValidate) {\n          try {\n            // Validate script is syntactically complete before executing\n\n            new Function(scriptText);\n          } catch {\n            scriptNode.remove();\n            return;\n          }\n        }\n\n        try {\n          body.appendChild(scriptNode);\n          appendedScriptsRef.current.push(scriptNode);\n        } catch {\n          scriptNode.remove();\n        }\n      } else {\n        // Defer execution until all script tags are fully received\n        node.remove();\n      }\n    });\n    requestAnimationFrame(() => {\n      if (hasStyles) {\n        settleStateWithMinimumDelay(\n          setIsGeneratingStyles,\n          styleTimerRef,\n          styleStartRef,\n          () => {\n            hasStylesRef.current = false;\n          }\n        );\n      }\n      if (hasScripts) {\n        settleStateWithMinimumDelay(\n          setIsGeneratingScripts,\n          scriptTimerRef,\n          scriptStartRef,\n          () => {\n            hasScriptsRef.current = false;\n          }\n        );\n      }\n    });\n  }, [html, resetToken]);\n\n  useEffect(\n    () => () => {\n      clearTimer(styleTimerRef);\n      clearTimer(scriptTimerRef);\n    },\n    []\n  );\n\n  const overlayMessage = (() => {\n    if (isGeneratingScripts || hasScriptsRef.current)\n      return scriptLoadingText || \"Building scripts cache...\";\n    if (isGeneratingStyles || hasStylesRef.current)\n      return styleLoadingText || \"Building styles...\";\n    return null;\n  })();\n\n  const isBlackboard = mode === \"blackboard\";\n  const shouldStretchRootHeight = isBlackboard && stretchRootHeight;\n  const sandboxWrapperStyle: React.CSSProperties = {\n    position: \"relative\",\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    // Keep blackboard scroll behavior while centering content in non-blackboard mode\n    justifyContent: shouldStretchRootHeight\n      ? \"flex-start\"\n      : isBlackboard\n        ? \"space-around\"\n        : \"flex-start\",\n  };\n  const sandboxContainerStyle: React.CSSProperties = {\n    pointerEvents: overlayMessage ? \"none\" : undefined,\n    margin: isBlackboard ? undefined : \"auto 0\",\n    width: \"100%\",\n    height: shouldStretchRootHeight ? \"100%\" : undefined,\n    minHeight: shouldStretchRootHeight ? 0 : undefined,\n    flex: shouldStretchRootHeight ? \"1 1 auto\" : undefined,\n  };\n\n  return (\n    <div\n      ref={wrapperRef}\n      data-root-vh={hasRootVhHeight ? \"true\" : \"false\"}\n      className=\"sandbox-wrapper\"\n      style={sandboxWrapperStyle}\n      aria-busy={!!overlayMessage}\n    >\n      <div\n        ref={containerRef}\n        className=\"sandbox-container\"\n        style={sandboxContainerStyle}\n      />\n      {overlayMessage && (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            background: \"rgba(51, 51, 51, 0.80)\",\n            color: \"#ffffff\",\n            fontSize: 16,\n            fontWeight: 700,\n            gap: 10,\n            pointerEvents: \"auto\",\n            zIndex: 20,\n          }}\n        >\n          <Loader2\n            aria-hidden\n            size={20}\n            style={{ animation: \"sandbox-spin 1s linear infinite\" }}\n          />\n          {overlayMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default SandboxApp;\n"],"names":["IMAGE_REUSE_ATTRIBUTES","getImageReuseKey","image","attribute","collectReusableImages","root","imageMap","node","key","bucket","syncImageAttributes","sourceImage","targetImage","sourceAttributes","sourceAttributeNames","reuseRenderedImages","nextImage","preservedImage","clonedImage","SandboxApp","html","styleLoadingText","scriptLoadingText","resetToken","mode","hasRootVhHeight","stretchRootHeight","wrapperRef","useRef","containerRef","setIsWaitingFirstDiv","useState","isGeneratingStyles","setIsGeneratingStyles","isGeneratingScripts","setIsGeneratingScripts","appendedStylesRef","appendedScriptsRef","styleStartRef","scriptStartRef","styleTimerRef","scriptTimerRef","hasStylesRef","hasScriptsRef","hasRenderedContentRef","prevResetTokenRef","MIN_LOADING_MS","clearTimer","timerRef","settleStateWithMinimumDelay","setter","startRef","onDone","elapsed","delay","useEffect","doc","styleId","styleEl","container","body","reusableImages","hasRenderedBefore","wrapper","openScriptCount","closeScriptCount","shouldExecuteScripts","resourceQueue","cloned","attr","replacement","hasStyles","hasScripts","hasFirstElement","contentNodes","scriptNode","scriptText","overlayMessage","isBlackboard","shouldStretchRootHeight","sandboxWrapperStyle","sandboxContainerStyle","jsxs","jsx","Loader2"],"mappings":"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"}

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

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

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

@@ -1,11 +1,10 @@
-import r from "./ContentRender.es.js";
-import { default as f } from "./IframeSandbox.es.js";
+import o from "./ContentRender.es.js";
 import "../../_virtual/jsx-runtime.es.js";
-import "../ui/inputGroup/input-group.es.js";
 import "react";
+import "react-dom/client";
+import "../ui/inputGroup/input-group.es.js";
 export {
-  r as ContentRender,
-  f as IframeSandbox,
-  r as default
+  o as ContentRender,
+  o as default
 };
 //# sourceMappingURL=index.es.js.map

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

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

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

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

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

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

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

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