@bikdotai/bik-component-library 0.0.808-beta.0 → 0.0.809-beta.0

package/dist/esm/components/WhatsAppTextEditor/AIRephraseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AIRephraseButton.js","sources":["../../../../src/components/WhatsAppTextEditor/AIRephraseButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { useEffect, useRef, useState } from 'react';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport ChevronDownIcon from '../../assets/icons/chevronDown.svg';\nimport ChevronRightIcon from '../../assets/icons/chevronRight.svg';\nimport EditIcon from '../../assets/icons/edit.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport SparkleIcon from '../../assets/icons/magic-line.svg';\nimport BorderAnimation from './BorderAnimation';\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid transparent;\n\tborder-radius: 16px;\n\tbackground: #ffe8ef;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ disabled?: boolean }>`\n\tborder: 0;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 16px 0 0 16px;\n\tpadding: 6px 10px;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tline-height: 16px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t:hover {\n\t\tfilter: brightness(0.98);\n\t}\n`;\n\nconst AIArrowButton = styled.button<{ disabled?: boolean }>`\n\tborder: 0;\n\tborder-left: 1px solid #f6c8d7;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 0 16px 16px 0;\n\t//padding: 4px 6px;\n\tline-height: 1;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\n`;\n\nconst AIDropdownContainer = styled.div`\n\tposition: relative;\n`;\n\nconst AIDropdownMenu = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 6px);\n\tleft: 0;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\twidth: 209px;\n\tz-index: 10;\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n\tpadding: 4px;\n`;\n\nconst AIDropdownItem = styled.button<{\n\tselected?: boolean;\n\tisInstructions?: boolean;\n\t/** Change tone row: green highlight when tone submenu is open */\n\ttoneSubmenuOpen?: boolean;\n\t/** Change tone row: green text/icon on hover or when submenu open */\n\tisChangeToneRow?: boolean;\n}>`\n\twidth: 100%;\n\ttext-align: left;\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.selected || props.toneSubmenuOpen ? '#d9e8db' : 'transparent'};\n\tcolor: ${(props) =>\n\t\tprops.selected || props.toneSubmenuOpen\n\t\t\t? '#1e6b34'\n\t\t\t: COLORS.content.primary};\n\tpadding: 10px 10px;\n\tborder-radius: 6px;\n\tcursor: pointer;\n\tfont-size: 14px;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\t:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.selected || props.toneSubmenuOpen ? '#d9e8db' : '#f7f7f8'};\n\t}\n\t${(props) =>\n\t\tprops.isChangeToneRow\n\t\t\t? `\n\t\t&:hover {\n\t\t\tcolor: #1e6b34;\n\t\t\tbackground: ${props.toneSubmenuOpen ? '#d9e8db' : '#f7f7f8'};\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nconst ToneSubMenu = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tleft: calc(100% + 4px);\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tmin-width: 140px;\n\tz-index: 11;\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n\tpadding: 4px;\n`;\n\ntype AIRephraseButtonProps = {\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tinstructionActive?: boolean;\n\tonClick?: () => void;\n\tonToneChange?: (toneId: string) => void;\n\tonInstructionsClick?: () => void;\n\tshowSecondaryRephraseOption?: boolean;\n\tonSecondaryRephraseClick?: () => void;\n};\n\nexport const AIRephraseButton = ({\n\tlabel,\n\tdisabled,\n\tloading,\n\thighlighted,\n\ttones,\n\tselectedToneId,\n\tinstructionActive,\n\tonClick,\n\tonToneChange,\n\tonInstructionsClick,\n\tshowSecondaryRephraseOption,\n\tonSecondaryRephraseClick,\n}: AIRephraseButtonProps) => {\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [isToneMenuOpen, setIsToneMenuOpen] = useState(false);\n\tconst isDropdownDisabled = !!instructionActive || !!disabled || !!loading;\n\n\tuseOutside(dropdownRef, () => {\n\t\tsetIsDropdownOpen(false);\n\t\tsetIsToneMenuOpen(false);\n\t});\n\n\tuseEffect(() => {\n\t\tif (!instructionActive) return;\n\t\tsetIsDropdownOpen(false);\n\t\tsetIsToneMenuOpen(false);\n\t}, [instructionActive]);\n\n\treturn (\n\t\t<AIDropdownContainer ref={dropdownRef}>\n\t\t\t<BorderAnimation\n\t\t\t\tshowAnimation={!!highlighted}\n\t\t\t\tdisabled={!!disabled || !!loading}\n\t\t\t\tborderRadius={16}\n\t\t\t\tborderSize={2}\n\t\t\t>\n\t\t\t\t<AIButtonGroup disabled={disabled || loading}>\n\t\t\t\t\t<AIButton\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdisabled={disabled || loading}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SparkleIcon width={12} height={12} color=\"#f53f77\" />\n\t\t\t\t\t\t{loading ? '...' : label}\n\t\t\t\t\t</AIButton>\n\t\t\t\t\t<AIArrowButton\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdisabled={isDropdownDisabled}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\tsetIsDropdownOpen((prev) => !prev);\n\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronDownIcon width={14} height={14} />\n\t\t\t\t\t</AIArrowButton>\n\t\t\t\t</AIButtonGroup>\n\t\t\t</BorderAnimation>\n\t\t\t{isDropdownOpen ? (\n\t\t\t\t<AIDropdownMenu>\n\t\t\t\t\t{tones?.length ? (\n\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttoneSubmenuOpen={isToneMenuOpen}\n\t\t\t\t\t\t\tisChangeToneRow\n\t\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\t\tsetIsToneMenuOpen(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonClick={() => setIsToneMenuOpen((prev) => !prev)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<EmojiIcon width={18} height={18} color=\"currentColor\" />\n\t\t\t\t\t\t\t\t\tChange tone\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<ChevronRightIcon width={14} height={14} color=\"currentColor\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tisInstructions\n\t\t\t\t\t\tselected={!!instructionActive}\n\t\t\t\t\t\tonMouseEnter={() => setIsToneMenuOpen(false)}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\tonInstructionsClick?.();\n\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EditIcon width={16} height={16} color={COLORS.content.primary} />\n\t\t\t\t\t\tAdd instructions\n\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t{showSecondaryRephraseOption ? (\n\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonMouseEnter={() => setIsToneMenuOpen(false)}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (disabled || loading) return;\n\t\t\t\t\t\t\t\tonSecondaryRephraseClick?.();\n\t\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SparkleIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\tRephrase\n\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{isToneMenuOpen && tones?.length ? (\n\t\t\t\t\t\t<ToneSubMenu>\n\t\t\t\t\t\t\t{tones.map((tone) => (\n\t\t\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\t\t\tkey={tone.id}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tselected={tone.id === selectedToneId}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\t\t\t\tonToneChange?.(tone.id);\n\t\t\t\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{tone.label}\n\t\t\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</ToneSubMenu>\n\t\t\t\t\t) : null}\n\t\t\t\t</AIDropdownMenu>\n\t\t\t) : null}\n\t\t</AIDropdownContainer>\n\t);\n};\nexport type AIActionToneOption = {\n\tid: string;\n\tlabel: string;\n};\n"],"names":["AIButtonGroup","_styled","process","env","NODE_ENV","target","label","props","disabled","AIButton","AIArrowButton","AIDropdownContainer","name","styles","map","toString","AIDropdownMenu","COLORS","surface","standard","stroke","primary","AIDropdownItem","selected","toneSubmenuOpen","content","isChangeToneRow","ToneSubMenu","AIRephraseButton","loading","highlighted","tones","selectedToneId","instructionActive","onClick","onToneChange","onInstructionsClick","showSecondaryRephraseOption","onSecondaryRephraseClick","dropdownRef","useRef","isDropdownOpen","setIsDropdownOpen","useState","isToneMenuOpen","setIsToneMenuOpen","isDropdownDisabled","useOutside","useEffect","_jsxs","Object","assign","ref","children","_jsx","BorderAnimation","showAnimation","borderRadius","borderSize","type","SparkleIcon","width","height","color","prev","ChevronDownIcon","length","onMouseEnter","style","display","alignItems","justifyContent","gap","EmojiIcon","ChevronRightIcon","isInstructions","EditIcon","tone","id"],"mappings":"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"}
+{"version":3,"file":"AIRephraseButton.js","sources":["../../../../src/components/WhatsAppTextEditor/AIRephraseButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { useEffect, useRef, useState } from 'react';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport ChevronDownIcon from '../../assets/icons/chevronDown.svg';\nimport ChevronRightIcon from '../../assets/icons/chevronRight.svg';\nimport EditIcon from '../../assets/icons/edit.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport SparkleIcon from '../../assets/icons/magic-line.svg';\nimport BorderAnimation from './BorderAnimation';\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid transparent;\n\tborder-radius: 16px;\n\tbackground: #ffe8ef;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ disabled?: boolean }>`\n\tborder: 0;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 16px 0 0 16px;\n\tpadding: 6px 10px;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tline-height: 16px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t:hover {\n\t\tfilter: brightness(0.98);\n\t}\n`;\n\nconst AIArrowButton = styled.button<{ disabled?: boolean }>`\n\tborder: 0;\n\tborder-left: 1px solid #f6c8d7;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 0 16px 16px 0;\n\t//padding: 4px 6px;\n\tline-height: 1;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\n`;\n\nconst AIDropdownContainer = styled.div`\n\tposition: relative;\n`;\n\nconst AIDropdownMenu = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 6px);\n\tleft: 0;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\twidth: 209px;\n\tz-index: 10;\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n\tpadding: 4px;\n`;\n\nconst AIDropdownItem = styled.button<{\n\tselected?: boolean;\n\tisInstructions?: boolean;\n\t/** Change tone row: green highlight when tone submenu is open */\n\ttoneSubmenuOpen?: boolean;\n\t/** Change tone row: green text/icon on hover or when submenu open */\n\tisChangeToneRow?: boolean;\n}>`\n\twidth: 100%;\n\ttext-align: left;\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.selected || props.toneSubmenuOpen ? '#d9e8db' : 'transparent'};\n\tcolor: ${(props) =>\n\t\tprops.selected || props.toneSubmenuOpen\n\t\t\t? '#1e6b34'\n\t\t\t: COLORS.content.primary};\n\tpadding: 10px 10px;\n\tborder-radius: 6px;\n\tcursor: pointer;\n\tfont-size: 14px;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\t:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.selected || props.toneSubmenuOpen ? '#d9e8db' : '#f7f7f8'};\n\t}\n\t${(props) =>\n\t\tprops.isChangeToneRow\n\t\t\t? `\n\t\t&:hover {\n\t\t\tcolor: #1e6b34;\n\t\t\tbackground: ${props.toneSubmenuOpen ? '#d9e8db' : '#f7f7f8'};\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nconst ToneSubMenu = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tleft: calc(100% + 4px);\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tmin-width: 140px;\n\tz-index: 11;\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n\tpadding: 4px;\n`;\n\ntype AIRephraseButtonProps = {\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tinstructionActive?: boolean;\n\tonClick?: () => void;\n\tonToneChange?: (toneId: string) => void;\n\tonInstructionsClick?: () => void;\n\tshowSecondaryRephraseOption?: boolean;\n\tonSecondaryRephraseClick?: () => void;\n};\n\nexport const AIRephraseButton = ({\n\tlabel,\n\tdisabled,\n\tloading,\n\thighlighted,\n\ttones,\n\tselectedToneId,\n\tinstructionActive,\n\tonClick,\n\tonToneChange,\n\tonInstructionsClick,\n\tshowSecondaryRephraseOption,\n\tonSecondaryRephraseClick,\n}: AIRephraseButtonProps) => {\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [isToneMenuOpen, setIsToneMenuOpen] = useState(false);\n\tconst isDropdownDisabled = !!instructionActive || !!disabled || !!loading;\n\n\tuseOutside(dropdownRef, () => {\n\t\tsetIsDropdownOpen(false);\n\t\tsetIsToneMenuOpen(false);\n\t});\n\n\tuseEffect(() => {\n\t\tif (!instructionActive) return;\n\t\tsetIsDropdownOpen(false);\n\t\tsetIsToneMenuOpen(false);\n\t}, [instructionActive]);\n\n\treturn (\n\t\t<AIDropdownContainer ref={dropdownRef}>\n\t\t\t<BorderAnimation\n\t\t\t\tshowAnimation={!!highlighted}\n\t\t\t\tdisabled={!!disabled || !!loading}\n\t\t\t\tborderRadius={16}\n\t\t\t\tborderSize={2}\n\t\t\t>\n\t\t\t\t<AIButtonGroup disabled={disabled || loading}>\n\t\t\t\t\t<AIButton\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdisabled={disabled || loading}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SparkleIcon width={12} height={12} color=\"#f53f77\" />\n\t\t\t\t\t\t{loading ? '...' : label}\n\t\t\t\t\t</AIButton>\n\t\t\t\t\t<AIArrowButton\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdisabled={isDropdownDisabled}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\tsetIsDropdownOpen((prev) => !prev);\n\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronDownIcon width={14} height={14} />\n\t\t\t\t\t</AIArrowButton>\n\t\t\t\t</AIButtonGroup>\n\t\t\t</BorderAnimation>\n\t\t\t{isDropdownOpen ? (\n\t\t\t\t<AIDropdownMenu>\n\t\t\t\t\t{tones?.length ? (\n\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttoneSubmenuOpen={isToneMenuOpen}\n\t\t\t\t\t\t\tisChangeToneRow\n\t\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\t\tsetIsToneMenuOpen(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonClick={() => setIsToneMenuOpen((prev) => !prev)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<EmojiIcon width={18} height={18} color=\"currentColor\" />\n\t\t\t\t\t\t\t\t\tChange tone\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<ChevronRightIcon width={14} height={14} color=\"currentColor\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tisInstructions\n\t\t\t\t\t\tselected={!!instructionActive}\n\t\t\t\t\t\tonMouseEnter={() => setIsToneMenuOpen(false)}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\tonInstructionsClick?.();\n\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EditIcon width={16} height={16} color={COLORS.content.primary} />\n\t\t\t\t\t\tAdd instructions\n\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t{showSecondaryRephraseOption ? (\n\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonMouseEnter={() => setIsToneMenuOpen(false)}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (disabled || loading) return;\n\t\t\t\t\t\t\t\tonSecondaryRephraseClick?.();\n\t\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SparkleIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\tRephrase\n\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{isToneMenuOpen && tones?.length ? (\n\t\t\t\t\t\t<ToneSubMenu>\n\t\t\t\t\t\t\t{tones.map((tone) => (\n\t\t\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\t\t\tkey={tone.id}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tselected={tone.id === selectedToneId}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\t\t\t\tonToneChange?.(tone.id);\n\t\t\t\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{tone.label}\n\t\t\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</ToneSubMenu>\n\t\t\t\t\t) : null}\n\t\t\t\t</AIDropdownMenu>\n\t\t\t) : null}\n\t\t</AIDropdownContainer>\n\t);\n};\nexport type AIActionToneOption = {\n\tid: string;\n\tlabel: string;\n};\n"],"names":["AIButtonGroup","_styled","process","env","NODE_ENV","target","label","props","disabled","AIButton","AIArrowButton","AIDropdownContainer","name","styles","map","toString","AIDropdownMenu","COLORS","surface","standard","stroke","primary","AIDropdownItem","selected","toneSubmenuOpen","content","isChangeToneRow","ToneSubMenu","AIRephraseButton","_ref","loading","highlighted","tones","selectedToneId","instructionActive","onClick","onToneChange","onInstructionsClick","showSecondaryRephraseOption","onSecondaryRephraseClick","dropdownRef","useRef","isDropdownOpen","setIsDropdownOpen","useState","isToneMenuOpen","setIsToneMenuOpen","isDropdownDisabled","useOutside","useEffect","_jsxs","Object","assign","ref","children","_jsx","BorderAnimation","showAnimation","borderRadius","borderSize","type","SparkleIcon","width","height","color","prev","ChevronDownIcon","length","onMouseEnter","style","display","alignItems","justifyContent","gap","EmojiIcon","ChevronRightIcon","isInstructions","EditIcon","tone","id"],"mappings":"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"}

package/dist/esm/components/WhatsAppTextEditor/BorderAnimation.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{useState as e,useEffect as t}from"react";import{BorderAnimationContainer as o}from"./AIRephrase.styled.js";const n=5e3,i=16,s=2,a=({children:a,showAnimation:d,disabled:u=!1,onAnimationStart:c,borderRadius:l=12,borderSize:m=2})=>{const[b,f]=e(0);return t((()=>{if(!d||u)return;null==c||c();const r=setInterval((()=>{f((r=>(r+s)%360))}),i);return()=>clearInterval(r)}),[d,u,c]),t((()=>{if(!d||u)return;const r=setTimeout((()=>{f(0)}),n);return()=>clearTimeout(r)}),[d,u]),r(o,Object.assign({rotation:b,show:d,borderRadius:l,borderSize:m},{children:a}))};export{a as default};
+import{jsx as r}from"react/jsx-runtime";import{useState as e,useEffect as t}from"react";import{BorderAnimationContainer as o}from"./AIRephrase.styled.js";const n=5e3,i=16,s=2,a=a=>{let{children:d,showAnimation:l,disabled:u=!1,onAnimationStart:c,borderRadius:m=12,borderSize:b=2}=a;const[f,h]=e(0);return t((()=>{if(!l||u)return;null==c||c();const r=setInterval((()=>{h((r=>(r+s)%360))}),i);return()=>clearInterval(r)}),[l,u,c]),t((()=>{if(!l||u)return;const r=setTimeout((()=>{h(0)}),n);return()=>clearTimeout(r)}),[l,u]),r(o,Object.assign({rotation:f,show:l,borderRadius:m,borderSize:b},{children:d}))};export{a as default};
 //# sourceMappingURL=BorderAnimation.js.map

package/dist/esm/components/WhatsAppTextEditor/BorderAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderAnimation.js","sources":["../../../../src/components/WhatsAppTextEditor/BorderAnimation.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from 'react';\nimport { BorderAnimationContainer } from './AIRephrase.styled';\n\nconst ANIMATION_CONFIG = {\n\tANIMATION_DURATION: 5000,\n\tROTATION_SPEED: 16,\n\tROTATION_INCREMENT: 2,\n} as const;\n\ninterface BorderAnimationProps {\n\tchildren: ReactNode;\n\tshowAnimation: boolean;\n\tdisabled?: boolean;\n\tonAnimationStart?: () => void;\n\tborderRadius?: string | number;\n\tborderSize?: string | number;\n}\n\nconst BorderAnimation: React.FC<BorderAnimationProps> = ({\n\tchildren,\n\tshowAnimation,\n\tdisabled = false,\n\tonAnimationStart,\n\tborderRadius = 12,\n\tborderSize = 2,\n}) => {\n\tconst [rotation, setRotation] = useState<number>(0);\n\n\tuseEffect(() => {\n\t\tif (!showAnimation || disabled) return;\n\n\t\tonAnimationStart?.();\n\n\t\tconst interval = setInterval(() => {\n\t\t\tsetRotation((prev) => (prev + ANIMATION_CONFIG.ROTATION_INCREMENT) % 360);\n\t\t}, ANIMATION_CONFIG.ROTATION_SPEED);\n\n\t\treturn () => clearInterval(interval);\n\t}, [showAnimation, disabled, onAnimationStart]);\n\n\tuseEffect(() => {\n\t\tif (!showAnimation || disabled) return;\n\n\t\tconst timer = setTimeout(() => {\n\t\t\tsetRotation(0);\n\t\t}, ANIMATION_CONFIG.ANIMATION_DURATION);\n\n\t\treturn () => clearTimeout(timer);\n\t}, [showAnimation, disabled]);\n\n\treturn (\n\t\t<BorderAnimationContainer\n\t\t\trotation={rotation}\n\t\t\t/* Ring visibility follows the nudge only; `disabled` only stops rotation below. */\n\t\t\tshow={showAnimation}\n\t\t\tborderRadius={borderRadius}\n\t\t\tborderSize={borderSize}\n\t\t>\n\t\t\t{children}\n\t\t</BorderAnimationContainer>\n\t);\n};\n\nexport default BorderAnimation;\n"],"names":["ANIMATION_CONFIG","BorderAnimation","children","showAnimation","disabled","onAnimationStart","borderRadius","borderSize","rotation","setRotation","useState","useEffect","interval","setInterval","prev","clearInterval","timer","setTimeout","clearTimeout","_jsx","BorderAnimationContainer","Object","assign","show"],"mappings":"0JAGA,MAAMA,EACe,IADfA,EAEW,GAFXA,EAGe,EAYfC,EAAkDA,EACvDC,WACAC,gBACAC,YAAW,EACXC,mBACAC,eAAe,GACfC,aAAa,MAEb,MAAOC,EAAUC,GAAeC,EAAiB,GAwBjD,OAtBAC,GAAU,KACT,IAAKR,GAAiBC,EAAU,OAEhCC,SAAAA,IAEA,MAAMO,EAAWC,aAAY,KAC5BJ,GAAaK,IAAUA,EAAOd,GAAuC,KAAI,GACvEA,GAEH,MAAO,IAAMe,cAAcH,EAAS,GAClC,CAACT,EAAeC,EAAUC,IAE7BM,GAAU,KACT,IAAKR,GAAiBC,EAAU,OAEhC,MAAMY,EAAQC,YAAW,KACxBR,EAAY,EAAE,GACZT,GAEH,MAAO,IAAMkB,aAAaF,EAAM,GAC9B,CAACb,EAAeC,IAGlBe,EAACC,EACAC,OAAAC,OAAA,CAAAd,SAAUA,EAEVe,KAAMpB,EACNG,aAAcA,EACdC,WAAYA,GAAU,CAAAL,SAErBA,IACyB"}
+{"version":3,"file":"BorderAnimation.js","sources":["../../../../src/components/WhatsAppTextEditor/BorderAnimation.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from 'react';\nimport { BorderAnimationContainer } from './AIRephrase.styled';\n\nconst ANIMATION_CONFIG = {\n\tANIMATION_DURATION: 5000,\n\tROTATION_SPEED: 16,\n\tROTATION_INCREMENT: 2,\n} as const;\n\ninterface BorderAnimationProps {\n\tchildren: ReactNode;\n\tshowAnimation: boolean;\n\tdisabled?: boolean;\n\tonAnimationStart?: () => void;\n\tborderRadius?: string | number;\n\tborderSize?: string | number;\n}\n\nconst BorderAnimation: React.FC<BorderAnimationProps> = ({\n\tchildren,\n\tshowAnimation,\n\tdisabled = false,\n\tonAnimationStart,\n\tborderRadius = 12,\n\tborderSize = 2,\n}) => {\n\tconst [rotation, setRotation] = useState<number>(0);\n\n\tuseEffect(() => {\n\t\tif (!showAnimation || disabled) return;\n\n\t\tonAnimationStart?.();\n\n\t\tconst interval = setInterval(() => {\n\t\t\tsetRotation((prev) => (prev + ANIMATION_CONFIG.ROTATION_INCREMENT) % 360);\n\t\t}, ANIMATION_CONFIG.ROTATION_SPEED);\n\n\t\treturn () => clearInterval(interval);\n\t}, [showAnimation, disabled, onAnimationStart]);\n\n\tuseEffect(() => {\n\t\tif (!showAnimation || disabled) return;\n\n\t\tconst timer = setTimeout(() => {\n\t\t\tsetRotation(0);\n\t\t}, ANIMATION_CONFIG.ANIMATION_DURATION);\n\n\t\treturn () => clearTimeout(timer);\n\t}, [showAnimation, disabled]);\n\n\treturn (\n\t\t<BorderAnimationContainer\n\t\t\trotation={rotation}\n\t\t\t/* Ring visibility follows the nudge only; `disabled` only stops rotation below. */\n\t\t\tshow={showAnimation}\n\t\t\tborderRadius={borderRadius}\n\t\t\tborderSize={borderSize}\n\t\t>\n\t\t\t{children}\n\t\t</BorderAnimationContainer>\n\t);\n};\n\nexport default BorderAnimation;\n"],"names":["ANIMATION_CONFIG","BorderAnimation","_ref","children","showAnimation","disabled","onAnimationStart","borderRadius","borderSize","rotation","setRotation","useState","useEffect","interval","setInterval","prev","clearInterval","timer","setTimeout","clearTimeout","_jsx","BorderAnimationContainer","Object","assign","show"],"mappings":"0JAGA,MAAMA,EACe,IADfA,EAEW,GAFXA,EAGe,EAYfC,EAAkDC,IAOnD,IAPoDC,SACxDA,EAAQC,cACRA,EAAaC,SACbA,GAAW,EAAKC,iBAChBA,EAAgBC,aAChBA,EAAe,GAAEC,WACjBA,EAAa,GACbN,EACA,MAAOO,EAAUC,GAAeC,EAAiB,GAwBjD,OAtBAC,GAAU,KACT,IAAKR,GAAiBC,EAAU,OAEhCC,SAAAA,IAEA,MAAMO,EAAWC,aAAY,KAC5BJ,GAAaK,IAAUA,EAAOf,GAAuC,KAAI,GACvEA,GAEH,MAAO,IAAMgB,cAAcH,EAAS,GAClC,CAACT,EAAeC,EAAUC,IAE7BM,GAAU,KACT,IAAKR,GAAiBC,EAAU,OAEhC,MAAMY,EAAQC,YAAW,KACxBR,EAAY,EAAE,GACZV,GAEH,MAAO,IAAMmB,aAAaF,EAAM,GAC9B,CAACb,EAAeC,IAGlBe,EAACC,EACAC,OAAAC,OAAA,CAAAd,SAAUA,EAEVe,KAAMpB,EACNG,aAAcA,EACdC,WAAYA,GAAU,CAAAL,SAErBA,IACyB"}