\n {childrenArray.length > 0 && defaultAlignment ? childrenArray.map((child, index) => {\n const alignLeft = child && childrenArray.length === 3 && index === 0;\n const childType = child as ReactElement;\n const key = `dialog-actions-${index}`;\n\n return (\n \n {childType !== null && cloneElement(childType, {\n ...childType.props,\n className: alignLeft ? cx(childType.props.className, 'xs:mr-auto w-full xs:w-auto') : cx(childType.props.className, 'w-full xs:w-auto')\n })}\n \n );\n }) : children}\n
\n );\n};\n\nDialogActions.defaultProps = dialogActionsDefaultProps;\n","import { useRef, useEffect, useState } from 'react';\nimport { useDebounce } from '@jotforminc/hooks';\n\nexport const useOutsideClick = callback => {\n const ref = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = event => {\n if (ref.current && !ref.current.contains(event.target)) {\n callback();\n }\n };\n\n document.addEventListener('mouseup', handleClickOutside);\n document.addEventListener('touchend', handleClickOutside);\n\n return () => {\n document.removeEventListener('mouseup', handleClickOutside);\n document.removeEventListener('touchend', handleClickOutside);\n };\n }, [callback]);\n\n return ref;\n};\n\nexport const useScrollIntoElement = () => {\n const element = useRef();\n\n const autoScrollCancelEvents = ['wheel', 'touchmove', 'mousedown'];\n\n const scrollIntoElement = () => {\n const container = document.querySelector('#chat-container');\n if (!element.current || !container) return;\n const containerTop = container.getBoundingClientRect().top;\n const elementTop = element.current.getBoundingClientRect().top;\n const top = elementTop - containerTop + container.scrollTop;\n\n container.scrollTo({ top, behavior: 'smooth' });\n };\n\n useEffect(() => {\n if (window.ResizeObserver) {\n const container = document.querySelector('#chat-container');\n const resizeObserver = new window.ResizeObserver(scrollIntoElement);\n resizeObserver.observe(element.current);\n const cancelObserver = () => element.current && resizeObserver.unobserve(element.current);\n autoScrollCancelEvents.map(event => container.addEventListener(event, cancelObserver));\n return () => {\n cancelObserver();\n autoScrollCancelEvents.map(event => container.removeEventListener(event, cancelObserver));\n };\n }\n scrollIntoElement();\n }, []);\n\n return element;\n};\n\nexport const useScrollDownButton = containerRef => {\n const SCROLL_THRESHOLD = 5;\n const [showScrollDownButton, setShowScrollDownButton] = useState();\n\n const handleScroll = useDebounce(e => {\n const container = e.target;\n setShowScrollDownButton(container.offsetHeight !== 0 && Math.abs(container.scrollHeight - container.offsetHeight - container.scrollTop) > SCROLL_THRESHOLD);\n }, 100);\n\n useEffect(() => {\n containerRef.current?.addEventListener('scroll', handleScroll);\n return () => containerRef.current?.removeEventListener('scroll', handleScroll);\n }, []);\n\n return showScrollDownButton;\n};\n\nexport const useViewTransition = state => {\n const [internalState, setInternalState] = useState(state);\n const isTransitioning = useRef(false);\n const resolveUpdate = useRef();\n\n if (\n document.startViewTransition\n && state !== internalState\n && !isTransitioning.current\n ) {\n isTransitioning.current = true;\n document.startViewTransition(() => {\n setInternalState(state);\n return new Promise(r => {\n resolveUpdate.current = r;\n });\n });\n }\n\n useEffect(() => {\n if (resolveUpdate.current) {\n resolveUpdate.current();\n resolveUpdate.current = undefined;\n isTransitioning.current = false;\n }\n }, [internalState]);\n\n return document.startViewTransition ? internalState : state;\n};\n","import React, { useState } from 'react';\nimport { Button, Flex } from '@jotforminc/magnet';\nimport { IconAlignTextJustify } from '@jotforminc/svg-icons';\nimport { t } from '@jotforminc/translation';\nimport classNames from 'classnames';\nimport { arrayOf, bool, shape } from 'prop-types';\nimport { useOutsideClick, useViewTransition } from '../hooks';\n\nconst ContextMenu = ({ menuItems, disabled }) => {\n const [isOpen, setIsOpen] = useState(false);\n const uiIsOpen = useViewTransition(isOpen);\n const ctxMenuRef = useOutsideClick(() => setIsOpen(false));\n\n const handleMenuButtonClick = () => setIsOpen(!isOpen);\n\n return (\n \n
\n \n \n ) : (\n <>\n \n 
\n
\n {title}
{formTitle}
\n \n );\n};\n\nFormHeader.propTypes = {\n logoClass: string.isRequired,\n titleClass: string,\n formLogo: string.isRequired,\n formTitle: string\n};\n\nexport default FormHeader;\n","import { Flex, Button } from '@jotforminc/magnet';\nimport React from 'react';\nimport { IconFormFilled, IconCheckSm } from '@jotforminc/svg-icons';\nimport { t } from '@jotforminc/translation';\nimport classNames from 'classnames';\nimport {\n arrayOf, bool, func, number, shape, string\n} from 'prop-types';\nimport ContextMenu from './ContextMenu';\nimport FormHeader from './FormHeader';\n\nconst ChatSidebar = ({\n assistantImage,\n assistantGender,\n chatMode,\n logo,\n title,\n onOpenClassicForm = f => f,\n menuItems = [],\n isMaximizeView = false,\n toggleMaximizeView = f => f,\n closeEmbedAgent = f => f,\n fillingProgress = 0,\n isInFillingFlow = false\n}) => (\n\n \n \n
\n);\n\nChatSidebar.propTypes = {\n assistantImage: string.isRequired,\n assistantGender: string.isRequired,\n chatMode: string.isRequired,\n logo: string.isRequired,\n title: string.isRequired,\n onOpenClassicForm: func,\n menuItems: arrayOf(shape({})),\n isMaximizeView: bool,\n toggleMaximizeView: func,\n closeEmbedAgent: func,\n fillingProgress: number,\n isInFillingFlow: bool\n};\n\nexport default ChatSidebar;\n","import {\n Flex,\n Button,\n Dialog,\n DialogBody,\n DialogTitle,\n DialogActions,\n DialogCloseButton\n}\n from '@jotforminc/magnet';\nimport { t } from '@jotforminc/translation';\nimport classNames from 'classnames';\nimport React from 'react';\nimport {\n arrayOf, bool, func, node, oneOfType, shape, string\n} from 'prop-types';\n\nimport { getUrlParameter } from '@jotforminc/utils';\nimport MobileHeader from './MobileHeader';\nimport ChatSidebar from './ChatSidebar';\n\nconst ChatWrapper = ({\n children,\n chatMode,\n isBuilder = false,\n isPreviewMode = false,\n MobileHeaderRenderer = MobileHeader,\n ChatSidebarRenderer = ChatSidebar,\n styles,\n onResetModalActionClick,\n isOpened\n}) => {\n const {\n pageBackgroundStart = '#DADEF3',\n pageBackgroundEnd = '#DADEF3',\n chatBackground = '#ffffff',\n inputBackground = '#F3F3FE',\n inputTextColor = '#0a1551',\n sendButtonBackground = '#0a1551',\n sendButtonIconColor = '#ffffff',\n agentBackgroundStart = '#C8CEED',\n agentBackgroundEnd = '#C8CEED',\n fontFamily = 'inter, sans-serif',\n backgroundImage = '',\n layout = 'right'\n } = styles || {};\n\n const isWelcomeOrSubmitResult = ['welcome', 'submitresult'].includes(chatMode);\n const mobileHeaderStyle = isWelcomeOrSubmitResult ? pageBackgroundEnd : agentBackgroundEnd;\n const signEmbedAgent = getUrlParameter('agentImplementationID') === 'signAgent';\n\n return (\n <>\n \n \n {chatMode !== 'manual-filling'\n && (\n
\n \n {Number(fillingProgress) > 0 && (\n <>\n \n \n {t('Open Form')}\n \n )}\n
\n )}\n \n \n
\n \n )}\n {isInFillingFlow\n && (\n \n
\n \n
\n \n {`${fillingProgress}% completed`}\n
\n \n \n
\n \n \n
\n Thank you!
\n \n {t('Your submission has been received.')}\n
\n \n {chatCompleted && (\n \n \n {t('Back to Chat')}\n \n \n )}\n {submitinprogress && (\n {\n setIsFormLoaded(true);\n }}\n id=\"ai-agent-editsubmission-formframe\"\n src={`${formURL}?&isAIAgentEmbed=1&chatID=${chatID}&nosubmit=1&no-form-toolbar=true&emailVerifiedInAgent=1`}\n title={getTitle()}\n style={{\n minWidth: '100%', maxWidth: '100%', height: '100%', border: 'none', borderRadius: '24px'\n }}\n frameborder=\"0\" allow=\"geolocation; microphone; camera; fullscreen\"\n />\n
\n {!chatCompleted && (\n \n
\n )}\n \n {logoUrl && 
}\n \n \n \n \n {t('Let’s start!')}\n \n \n
\n {title}
\n {description && (\n\n {description}\n
\n )}\n{icon}
: null;\n }\n\n renderV1() {\n const {\n text,\n onClick,\n backgroundColor,\n color,\n children,\n customProps\n } = this.props;\n\n return (text || children) ? (\n \n
\n \n \n ) : null;\n }\n\n renderV2() {\n const {\n v2,\n animated,\n className,\n backgroundColor,\n wrapperClassName,\n isVisible,\n children,\n align,\n attach,\n customProps,\n style,\n allowHover,\n hideArrow,\n tooltipDistance,\n tooltipArrowDistance,\n noWrap,\n ...props\n } = this.props;\n\n const isVertical = VerticalAttachments.indexOf(attach) >= 0;\n\n return children ? (\n \n {this.renderIcon()}\n
\n {children || text}
\n \n \n
\n \n {children}\n
\n \n ) : null;\n }\n\n render() {\n const { v2 } = this.props;\n return !v2 ? this.renderV1() : this.renderV2();\n }\n}\n\nTooltip.propTypes = {\n v2: bool,\n className: string,\n children: node,\n icon: oneOfType([\n elementType,\n node\n ]),\n text: string,\n align: oneOf(['Left', 'Center', 'Right', 'Start', 'End']),\n attach: oneOf([...VerticalAttachments, ...HorizontalAttachments]),\n animated: bool,\n onClick: func,\n wrapperClassName: string,\n backgroundColor: string,\n color: string,\n isVisible: bool,\n allowHover: bool,\n hideArrow: bool,\n noWrap: bool,\n renderInContainer: bool,\n tooltipDistance: string,\n tooltipArrowDistance: string,\n style: shape({}),\n customProps: shape({})\n};\n\nTooltip.defaultProps = {\n v2: false,\n className: null,\n children: null,\n icon: null,\n text: null,\n align: 'Center',\n attach: 'Top',\n animated: false,\n onClick: f => f,\n wrapperClassName: null,\n backgroundColor: null,\n color: null,\n isVisible: false,\n allowHover: false,\n hideArrow: false,\n noWrap: false,\n renderInContainer: false,\n tooltipDistance: null,\n tooltipArrowDistance: null,\n style: {},\n customProps: {}\n};\n","// TODO: In the future this class should support AI based APIs too.\nexport default class SpeechRecognition {\n activeEngine = null;\n\n fullCapturedSpeech = '';\n\n #autoStopTimeoutID;\n\n #autoStopInSeconds;\n\n getBrowserSpeechEngine = () => {\n return window.SpeechRecognition || window.webkitSpeechRecognition;\n };\n\n isSupported = () => {\n if (this.getBrowserSpeechEngine()) {\n return true;\n }\n return false;\n };\n\n start = ({\n onStop,\n onError,\n onInterimResults,\n onSpeechEnd,\n autoStopInSeconds\n }) => {\n if (!this.isSupported()) {\n onError(new Error('Browser Not Supported'));\n return;\n }\n this.onInterimResults = onInterimResults;\n this.#autoStopInSeconds = autoStopInSeconds;\n\n const BrowserSpeechEngine = this.getBrowserSpeechEngine();\n const engine = new BrowserSpeechEngine();\n engine.continuous = true;\n engine.interimResults = true;\n engine.lang = 'en-US'; // TODO: get from browser or user somehow\n\n engine.onresult = this.#onVoice;\n\n engine.addEventListener('speechend', () => {\n this.fullCapturedSpeech = '';\n onSpeechEnd?.();\n });\n\n engine.addEventListener('error', () => {\n onError('Speech Engine Error');\n });\n\n engine.addEventListener('end', () => {\n onStop();\n this.fullCapturedSpeech = '';\n });\n\n engine.start();\n\n this.activeEngine = engine;\n this.#autoStop(this.#autoStopInSeconds);\n };\n\n stop = () => {\n clearTimeout(this.#autoStopTimeoutID);\n this.activeEngine?.stop();\n };\n\n #onVoice = event => {\n let interimTranscript = '';\n let finalInterimTranscript = '';\n\n for (let i = event.resultIndex; i < event.results.length; ++i) {\n if (event.results[i].isFinal) {\n finalInterimTranscript += event.results[i][0].transcript;\n } else {\n interimTranscript += event.results[i][0].transcript;\n }\n }\n\n if (finalInterimTranscript) {\n this.fullCapturedSpeech = `${this.fullCapturedSpeech} ${finalInterimTranscript}`;\n }\n\n const value = {\n interimTranscript,\n finalInterimTranscript,\n activeText: `${this.fullCapturedSpeech} ${interimTranscript}`,\n fullTranscript: this.fullCapturedSpeech\n };\n\n this.#autoStop(this.#autoStopInSeconds);\n this.onInterimResults(value);\n };\n\n #autoStop(autoStopInSeconds) {\n clearTimeout(this.#autoStopTimeoutID);\n if (!autoStopInSeconds) return;\n\n this.#autoStopTimeoutID = setTimeout(() => this.stop(), autoStopInSeconds * 1000);\n }\n}\n","/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { Button } from '@jotforminc/magnet';\nimport { IconMicrophoneFilled, IconSquareFilled } from '@jotforminc/svg-icons';\nimport '../styles/index.scss';\nimport { t } from '@jotforminc/translation';\nimport { Tooltip } from '@jotforminc/tooltip';\nimport SpeechRecognition from './SpeechRecognition';\n\nconst noop = () => {};\n\nconst VoiceButton = ({\n disabled,\n initialText,\n onSpeechInterim,\n onSpeechEnd,\n autoStopInSeconds,\n onClick = noop,\n onStart = noop,\n onStop = noop,\n onError = noop,\n micColor\n}) => {\n const [hasError, setHasError] = useState(false);\n const [isActive, setIsActive] = useState(false);\n const [isTooltipVisible, setIsTooltipVisible] = useState();\n\n const recognition = useMemo(() => new SpeechRecognition(), []);\n\n const handleClick = () => {\n onClick();\n if (isActive) {\n recognition.stop();\n setIsActive(false);\n return;\n }\n\n setIsActive(true);\n onStart();\n recognition.start({\n autoStopInSeconds,\n onSpeechEnd,\n onError: () => {\n setHasError(true);\n setIsActive(false);\n onError();\n },\n onStop: () => {\n setIsActive(false);\n onStop();\n },\n onInterimResults: values => {\n const previousInputValue = initialText ? `${initialText} ` : '';\n onSpeechInterim(`${previousInputValue}${values.activeText}`);\n }\n });\n };\n\n useEffect(() => {\n if (!hasError) return;\n\n setIsTooltipVisible(true);\n setTimeout(() => {\n setIsTooltipVisible(false);\n }, 3000);\n }, [hasError]);\n\n useEffect(() => {\n if (!disabled || !recognition) return;\n recognition.stop();\n }, [disabled]);\n\n return (\n \n
\n );\n};\n\nexport default VoiceButton;\n","import React, { useRef, useEffect, useState } from 'react';\nimport { Button, Flex } from '@jotforminc/magnet';\nimport VoiceButton from '@jotforminc/voice-button';\nimport {\n IconPaperPlaneFilled\n} from '@jotforminc/svg-icons';\nimport { t } from '@jotforminc/translation';\nimport { bool, func, string } from 'prop-types';\nimport { useEventListener } from '@jotforminc/hooks';\n\nconst isAgentTemplateEnvironment = () => {\n try {\n const agentDirectoryPaths = ['/agent-templates/', '/agent-directory/', '/myagents/'];\n const currentPath = window.parent.location.pathname;\n return agentDirectoryPaths.find(path => currentPath.includes(path)) !== undefined;\n } catch (e) {\n return false;\n }\n};\n\nconst Input = ({\n inProgress = false,\n onSend = f => f,\n onValueChange = f => f,\n value = '',\n chatMode = ''\n}) => {\n const inputRef = useRef();\n const [isVoice, setIsVoice] = useState(false);\n const [isFirstAnswer, setIsFirstAnswer] = useState(true);\n const agentTemplateEnvironment = isAgentTemplateEnvironment();\n const isMobileDevice = window.innerWidth <= 768;\n const maxRows = 4;\n const maxMobileRows = 3;\n\n const handleInputChange = e => {\n const textarea = inputRef.current;\n const textareaLineHeight = 20;\n textarea.rows = 1;\n const currentRows = Math.floor(textarea.scrollHeight / textareaLineHeight);\n if (isMobileDevice) {\n textarea.rows = currentRows < maxMobileRows ? currentRows : maxMobileRows;\n } else {\n textarea.rows = currentRows < maxRows ? currentRows : maxRows;\n }\n onValueChange(e.target.value);\n setIsVoice(false);\n };\n\n const handleOnSpeech = result => {\n onValueChange(result);\n setIsVoice(true);\n };\n\n const handleSend = async () => {\n onValueChange('');\n setIsFirstAnswer(false);\n onSend({ isFirstAnswer, isVoice });\n const textarea = inputRef.current;\n textarea.rows = 1;\n };\n\n useEffect(() => {\n const textarea = inputRef.current;\n textarea.style.lineHeight = '20px';\n textarea.rows = 1;\n if (!agentTemplateEnvironment) return;\n window.addEventListener('message', (message = {}) => {\n const { data = {} } = message;\n const { source, question } = data;\n if (['agent-templates', 'agent-directory'].includes(source) && question) {\n handleInputChange({ target: { value: question } });\n }\n });\n }, []);\n\n const handleKeyDown = ({ key, shiftKey }) => {\n if (key === 'Enter' && !shiftKey && !inProgress && value.trim().length > 0) {\n handleSend();\n return true;\n }\n };\n\n const messages = document.querySelectorAll('#chat-container section[data-message=\"ai\"]');\n\n useEffect(() => {\n if (!inProgress) {\n if ((isMobileDevice && messages.length > 1) || !isMobileDevice) {\n inputRef?.current?.focus();\n }\n }\n if (agentTemplateEnvironment) {\n window.parent.postMessage({ source: 'ai-agent', inProgress }, window.location.origin);\n }\n }, [inProgress, messages.length]);\n\n const handleWrapperClick = () => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n useEventListener('message', ({ data }) => {\n const { action = '' } = data || {};\n if (action === 'focus-ai-input') {\n handleWrapperClick();\n }\n });\n\n return (\n <>\n \n \n
\n )}\n \n
\n \n {drows.map((d, index) => {\n const inputProps = {\n type: 'range',\n min: 1,\n max: columnCount,\n id: `rangeInput_${index}`,\n ...(viewMode || isInitial(index) ? { value: getDefaultValue(index) } : null),\n className: `slider ${isEmojiSlider ? emojiClasses[index] || `slider-emoji slider-icon-${centerOfSlider}` : ''}`,\n onMouseUp: onSliderReleased,\n onTouchEnd: onSliderReleased,\n onChange: onSliderChanged,\n disabled: viewMode\n };\n return (\n <>\n
\n );\n};\n\nMatrixSlider.propTypes = {\n question: shape({}).isRequired,\n setAnswer: func.isRequired,\n answer: shape(),\n viewMode: bool\n};\n\nexport default MatrixSlider;\n","/* eslint-disable no-param-reassign */\nimport React, { useMemo } from 'react';\nimport { shape, func, bool } from 'prop-types';\nimport { safeJSONParse } from '@jotforminc/utils';\n\nconst matrixYesNo = ({\n question,\n setAnswer,\n answer,\n viewMode\n}) => {\n const drows = useMemo(() => safeJSONParse(question.drows, []), [question]);\n const rowTitles = useMemo(() => drows.map(r => r.text), [drows]);\n const toggleLabels = useMemo(() => question.toggleText.split('|'), [question]);\n\n const onChange = ({ target }) => {\n const match = target.name.match(/row_radio_(\\d+)/);\n const result = { ...answer };\n const rowIds = [];\n result[match[1]] = target.value;\n\n for (let i = 0; i < drows.length; i++) {\n rowIds.push(drows[i].id);\n }\n setAnswer({\n ...result,\n rowIds: JSON.stringify(rowIds)\n });\n };\n\n return (\n \n {!isEmojiSlider ? {getColumnTitleFromValue(currentValues[index] || centerOfSlider)} : null}\n
\n \n );\n })}\n \n {rowTitles[index]}\n
\n \n \n {rangePointSpans.filter((r, i) => i >= (currentValues[index] || centerOfSlider))}\n
\n \n {drows.map((r, rIndex) => {\n const yesInputID = `row_radio_${rIndex}_0`;\n const noInputID = `row_radio_${rIndex}_1`;\n return (\n <>\n
\n );\n};\n\nmatrixYesNo.propTypes = {\n question: shape({}).isRequired,\n setAnswer: func.isRequired,\n answer: shape(),\n viewMode: bool\n};\n\nexport default matrixYesNo;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport {\n any, bool, func, shape\n} from 'prop-types';\nimport Fields from '@jotforminc/form-fields';\nimport { SKIP_MESSAGES } from '@jotforminc/constants';\nimport '../../styles/matrix.scss';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { getColumnType, MATRIX_COLUMN_TYPE } from '@jotforminc/agent-utils';\nimport MatrixSlider from './MatrixSlider';\nimport MatrixYesNo from './MatrixYesNo';\n\nconst Matrix = ({\n question,\n setAnswer,\n answer,\n viewMode\n}\n) => {\n const [customAnswer, setCustomAnswer] = useState();\n const dcolumns = useMemo(() => safeJSONParse(question.dcolumns, []), [question.dcolumns]);\n\n useEffect(() => {\n if (typeof answer === 'string') {\n if (SKIP_MESSAGES.includes(answer)) {\n return;\n }\n setCustomAnswer(safeJSONParse(answer, []));\n } else {\n setCustomAnswer(answer);\n }\n }, [answer]);\n\n const generateInitialResult = (rowCount, columnCount) => {\n const result = {};\n for (let r = 0; r < rowCount; r++) {\n result[Number(r)] = [];\n for (let c = 0; c < columnCount; c++) {\n result[Number(r)].push('');\n }\n }\n result.rowIds = [];\n for (let i = 0; i < rowCount; i++) {\n result.rowIds.push(i.toString());\n }\n result.colIds = [];\n for (let i = 0; i < columnCount; i++) {\n result.colIds.push(i.toString());\n }\n return result;\n };\n\n const generateInitialResultForOldMatrix = (rowCount, columnCount) => {\n const result = [];\n for (let r = 0; r < rowCount; r++) {\n const rowResult = [];\n for (let c = 0; c < columnCount; c++) {\n rowResult.push('');\n }\n result.push(rowResult);\n }\n return result;\n };\n\n const getRowAndColumnFromInputName = target => {\n const nameMatch = target.name.match(/q\\d+_.*\\[(\\d+)\\]\\[(\\d+)\\]/);\n const idMatch = target.id.match(/.*_\\d+_(\\d+)_(\\d+)/);\n return {\n rowIndex: nameMatch ? parseInt(nameMatch[1], 10) : parseInt(idMatch[1], 10),\n columnIndex: nameMatch ? parseInt(nameMatch[2], 10) : parseInt(idMatch[2], 10)\n };\n };\n\n const checkAllColumnSameType = () => {\n if (question.inputType !== 'Dynamic') {\n return true;\n }\n const typeArr = dcolumns.map(c => c.type);\n return typeArr.filter(i => i === typeArr[0]).length === typeArr.length;\n };\n\n const getTable = () => document.querySelector(`input[name*=q${question.qid}_], select[name*=q${question.qid}_]`)?.closest('table');\n\n const isNewMatrixVersion = () => question.featureSet && question.featureSet.includes('useDcols') && question.featureSet.includes('useIds');\n\n const getTableResult = () => {\n const rowCount = question.mrows.split('|').length;\n const columnCount = dcolumns.length;\n const result = (isNewMatrixVersion() ? generateInitialResult : generateInitialResultForOldMatrix)(rowCount, columnCount);\n const table = getTable();\n table.querySelectorAll('input, select').forEach(item => {\n const { rowIndex, columnIndex } = getRowAndColumnFromInputName(item);\n const columnType = getColumnType(question.inputType, dcolumns, columnIndex);\n switch (true) {\n case checkAllColumnSameType(dcolumns) && columnType === MATRIX_COLUMN_TYPE.RadioButton:\n result[rowIndex][columnIndex] = item.checked ? item.value : '';\n break;\n case [MATRIX_COLUMN_TYPE.RadioButton, MATRIX_COLUMN_TYPE.CheckBox].includes(columnType):\n result[rowIndex][columnIndex] = item.checked ? item.value : '';\n break;\n default:\n result[rowIndex][columnIndex] = item.value;\n break;\n }\n });\n return result;\n };\n\n const handleMultipleRadioColumn = target => {\n const radioColumns = dcolumns.filter(col => col.type === MATRIX_COLUMN_TYPE.RadioButton);\n if (target.type === 'radio' && radioColumns.length > 1) {\n Array.from(target?.closest('tr').querySelectorAll(`input[type=\"radio\"]:not([name=\"${target.name}\"])`))\n .filter(input => input !== target)\n .forEach(input => {\n // eslint-disable-next-line no-param-reassign\n input.checked = false;\n });\n }\n };\n\n const onInputChange = ({ target }) => {\n handleMultipleRadioColumn(target);\n const result = getTableResult();\n setAnswer(result);\n return true;\n };\n const handleEventListener = (remove = false) => {\n const table = getTable();\n table?.querySelectorAll('input, select').forEach(item => {\n if (remove) {\n item.removeEventListener('change', onInputChange);\n } else {\n item.addEventListener('change', onInputChange);\n }\n });\n };\n\n const showAnswerOnTable = () => {\n if (!(customAnswer instanceof Array || customAnswer instanceof Object)) {\n return;\n }\n const table = getTable();\n table?.querySelectorAll('tr:has(input) td input, tr:has(select) td select').forEach(i => {\n const { rowIndex, columnIndex } = getRowAndColumnFromInputName(i);\n const columnType = getColumnType(question.inputType, dcolumns, columnIndex);\n const value = customAnswer[rowIndex]?.[columnIndex];\n if ([MATRIX_COLUMN_TYPE.RadioButton, MATRIX_COLUMN_TYPE.CheckBox].includes(columnType)) {\n // eslint-disable-next-line no-param-reassign\n i.checked = !!value;\n } else {\n // eslint-disable-next-line no-param-reassign\n i.value = value || '';\n }\n });\n };\n\n useEffect(() => {\n if (customAnswer) {\n showAnswerOnTable();\n }\n handleEventListener();\n window.JotForm = {\n setMatrixLayout: f => f,\n handleSingleChoiceWithMultiTypeColumnsForCardForms: f => f\n };\n return () => handleEventListener(true);\n }, [customAnswer]);\n\n const props = {\n qid: {\n value: `input_${question.qid}`\n },\n qname: {\n value: `q${question.qid}_${question.name}`\n },\n subLabel: {\n value: question.subLabel\n },\n id: {\n value: question.qid\n },\n mcolumns: {\n value: question.mcolumns\n },\n dcolumns: {\n value: question.dcolumns\n },\n drows: {\n value: question.drows\n },\n mrows: {\n value: question.mrows\n },\n calcMatrixValues: {\n value: question.calcMatrixValues\n },\n matrixwidth: {\n value: question.matrixwidth\n },\n matrixcells: {\n value: question.matrixcells\n },\n inputType: {\n value: question.inputType\n },\n dropdown: {\n value: question.dropdown\n },\n featureSet: {\n value: question.featureSet\n },\n // manageMatrixOptions: PropTypes.elementType,\n type: {\n value: 'control_matrix'\n },\n required: {\n value: question.required\n },\n passive: !!viewMode,\n focusedPosition: { mrows: question.mrows, mcolumns: question.mcolumns }\n };\n\n switch (true) {\n case [MATRIX_COLUMN_TYPE.EmojiSlider, MATRIX_COLUMN_TYPE.Slider].includes(question.inputType):\n return (\n \n
\n \n );\n })}\n \n
\n {rowTitles[rIndex]}
\n \n \n \n
\n \n \n
\n \n );\n};\n\nStarRating.propTypes = {\n setAnswer: func.isRequired,\n isActive: bool.isRequired,\n question: shape({}).isRequired,\n viewMode: bool.isRequired,\n answer: any.isRequired\n};\n\nexport default StarRating;\n","import {\n bool, func, number, oneOfType, shape, string\n} from 'prop-types';\nimport React from 'react';\n\nconst ScaleRating = ({\n isActive, question, setAnswer, answer\n}) => {\n const {\n qid, scaleAmount, scaleFrom = 1\n } = question;\n\n const min = parseInt(scaleFrom, 10);\n const max = parseInt(scaleAmount, 10) + 1;\n\n const ratings = [...Array(max - min)].map((_value, index) => min + index);\n\n return (\n <>\n \n {[...Array(starCount)].map((_, index) => (\n
\n \n \n = index ? activeColor : (hoveredRating !== null && hoveredRating >= index ? hoverColor : '#fff')}\n stroke={clickedRating !== null && clickedRating >= index ? activeColor : (hoveredRating !== null && hoveredRating >= index ? activeColor : '#979dc6')}\n key={index}\n className={classNames('star-icon', { 'cursor-pointer': isActive })}\n tabIndex=\"0\"\n aria-label={`${index + 1} out of ${starCount}`}\n role=\"radio\"\n aria-checked={index === clickedRating ? 'true' : 'false'}\n onMouseEnter={() => handleHover(index)}\n onMouseLeave={() => handleHover(null)}\n onClick={() => handleStarClick(index)}\n />\n
\n ))}\n \n \n
\n \n );\n};\n\nScaleRating.propTypes = {\n isActive: bool.isRequired,\n question: shape({}).isRequired,\n setAnswer: func.isRequired,\n answer: oneOfType([string, number]).isRequired\n};\n\nexport default ScaleRating;\n","import React from 'react';\nimport { Button, Flex } from '@jotforminc/magnet';\nimport { bool, func } from 'prop-types';\nimport { t } from '@jotforminc/translation';\n\nconst Submit = ({\n setChatMode = f => f, logAction = f => f, logCommonAction = f => f, chatCompleted = false\n}) => {\n const handleSubmit = () => {\n logAction({ action: 'clicked', target: 'ReviewAndSubmit' });\n logCommonAction({ action: 'ReviewAndSubmit' });\n setChatMode('editsubmission');\n };\n\n return (\n <>\n \n {ratings.map(rating => (\n
\n \n \n isActive && setAnswer(rating)}\n />\n \n
\n ))}\n \n \n {!hideLabel\n && (\n setHideLabel(true)}\n onEnd={handleSignatureChange}\n canvasProps={{ className: 'h-full max-w-full w-56 md:w-60 radius-xl absolute inset-0 border-ai-soft' }}\n clearOnResize={false}\n />\n \n {(!viewMode && answer) && (\n {\n setAnswer('');\n signRef.current?.clear();\n setHideLabel(false);\n }}\n startIcon={IconTrashFilled}\n showTextOnly=\"md\"\n disabled={!signRef.current || signRef.current?.toDataURL()?.length <= 0}\n >\n Clear\n \n )}\n
\n );\n};\n\nSignature.propTypes = {\n setAnswer: func.isRequired,\n viewMode: bool,\n answer: any.isRequired\n};\n\nexport default Signature;\n","export const convertFileToBase64 = async file => {\n const toBase64 = fileObj => new Promise((resolve, reject) => {\n const reader = new window.FileReader();\n reader.readAsDataURL(fileObj);\n reader.onload = () => resolve(reader.result);\n reader.onerror = reject;\n });\n\n const base64Value = await toBase64(file);\n return base64Value;\n};\n\nexport const byteToSize = bytes => {\n if (bytes === 0) return '0 Byte';\n\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);\n\n return `${Math.round(bytes / 1024 ** i, 2)} ${sizes[i]}`;\n};\n","import React, { useMemo, useRef, useState } from 'react';\nimport {\n any, bool, func, shape\n} from 'prop-types';\nimport { Button, Flex } from '@jotforminc/magnet';\nimport WarningBox from '@jotforminc/warning-box';\nimport { IconCloudArrowUp, IconXmark, IconFolderFilled } from '@jotforminc/svg-icons';\nimport { formatBytes } from '@jotforminc/utils';\nimport { byteToSize, convertFileToBase64, isJsonString } from '@jotforminc/agent-utils';\n\nconst Upload = ({\n setAnswer, question, viewMode = false, answer\n}) => {\n const [warnings, setWarnings] = useState([]);\n\n const ref = useRef();\n const currentFiles = useMemo(() => {\n if (!Array.isArray(answer)) {\n return [];\n }\n if (viewMode && isJsonString(answer)) {\n const files = JSON.parse(answer);\n const mappedFiles = files.map(file => ({ name: file, size: '', type: '' }));\n return mappedFiles;\n }\n\n return answer;\n }, [answer]);\n\n const canUploadFiles = files => {\n setWarnings([]);\n let allowedFiles = files;\n const {\n fileLimit, extensions, limitFileSize, minFileSize, maxFileSize\n } = question;\n\n const fileLimitNumber = parseInt(fileLimit, 10);\n\n allowedFiles = allowedFiles.filter(file => {\n const extension = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length);\n const validExtension = question.extensions.includes(extension);\n if (!validExtension) {\n setWarnings(prev => [...prev, `${file.name} has invalid extension. Only ${extensions} are allowed.`]);\n }\n return validExtension;\n });\n\n if (limitFileSize === 'Yes') {\n allowedFiles = allowedFiles.filter(file => {\n const minFileSizeByte = parseInt(minFileSize, 10) * 1024;\n const maxFileSizeByte = parseInt(maxFileSize, 10) * 1024;\n const isFileTooSmall = file.size < minFileSizeByte;\n const isFileTooBig = file.size > maxFileSizeByte;\n if (isFileTooSmall || isFileTooBig) {\n const size = byteToSize(isFileTooSmall ? minFileSizeByte : maxFileSizeByte);\n const sizeWarning = `${file.name} is too ${isFileTooSmall ? 'small' : 'big'}, ${isFileTooSmall ? 'minimum' : 'maximum'} file size is ${size}.`;\n setWarnings(prev => [...prev, sizeWarning]);\n return false;\n }\n return true;\n });\n }\n\n if (allowedFiles.length > fileLimitNumber) {\n allowedFiles = allowedFiles.slice(0, fileLimitNumber);\n setWarnings(prev => [...prev, `Only ${fileLimitNumber} file uploads are allowed.`]);\n }\n\n return allowedFiles;\n };\n\n const handleUploadChange = async ({ target: { files } }) => {\n const allowedFiles = canUploadFiles(Array.from(files));\n if (allowedFiles.length === 0) return;\n const filesArray = await Promise.all(allowedFiles.map(async file => {\n const base64 = await convertFileToBase64(file);\n return {\n data: base64, name: file.name, size: file.size, type: file.type, rawFile: file\n };\n }));\n await setAnswer(currentFiles ? [...currentFiles, ...filesArray] : filesArray, true);\n };\n\n const handleDrop = event => {\n if (viewMode) return;\n event.preventDefault();\n const droppedFiles = event.dataTransfer.files;\n if (droppedFiles.length > 0) {\n handleUploadChange({ target: { files: droppedFiles } });\n }\n };\n\n const handleDeleteFile = async deletedFileName => {\n await setAnswer(currentFiles.filter(currFile => currFile.name !== deletedFileName), true);\n };\n\n const handleOnClickFileUpload = () => {\n if (viewMode) return;\n ref.current.click();\n };\n\n return (\n <>\n \n
\n )}\n \n Click to upload\n {' '}\n or drag & drop here\n
\n \n {currentFiles && (\n \n {currentFiles.map(file => {\n return (\n \n \n \n \n {file.size && handleDeleteFile(file.name)}\n />\n )}\n \n \n );\n })}\n
\n )}\n {warnings.length > 0 && (\n warnings.map(warning => {\n return (\n \n {file.type.includes('image') ? (\n 
\n ) : (\n
\n {file.name}\n {formatBytes(file.size)}
}\n {!viewMode && (\n \n
\n {\n file ? (\n <>\n \n 
\n
\n \n \n \n \n \n handleDeleteFile(file.name)}\n />\n )}\n \n \n
\n \n ) : (\n \n \n
\n {file.name}\n {formatBytes((file.base64.length * 6) / 8)}
\n {!viewMode && (\n \n
\n ) : (\n <>\n \n \n Click to upload\n {' '}\n or drag & drop here\n
\n \n )\n }\n\n \n )\n }\n \n );\n};\n\nImageUploadPreview.propTypes = {\n setAnswer: func.isRequired,\n question: shape.isRequired,\n viewMode: bool,\n answer: any.isRequired\n};\n\nexport default ImageUploadPreview;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { safeJSONParse } from '@jotforminc/utils';\n\nconst isObject = data => {\n return data !== null && typeof data === 'object' && !Array.isArray(data);\n};\n\nconst constructUploadUrl = (url, owner, base) => {\n const sanitizedBase = decodeURIComponent(base)\n .replace(/&([a-zA-Z]+);/g, '&')\n .replace(/\\s/g, '%20');\n return `https://${url}/uploads/${owner}/form_files/${sanitizedBase}`;\n};\n\nconst PDFEmbedder = ({ question }) => {\n const parsedParams = safeJSONParse(question.link);\n let error;\n\n if (!parsedParams || !isObject(parsedParams)) {\n error = 'Invalid data format. Failed to load PDF.';\n return {error}
;\n }\n\n let link = '';\n\n try {\n if (parsedParams.url) {\n if (parsedParams.base && parsedParams.owner) {\n link = constructUploadUrl(parsedParams.url, parsedParams.owner, parsedParams.base);\n } else {\n link = parsedParams.url;\n }\n } else {\n error = 'PDF link not available.';\n return {error}
;\n }\n } catch (e) {\n error = 'There was an error loading the PDF.';\n return {error}
;\n }\n\n const src = `${link}?serveInlineWithCache=1`;\n\n return (\n <>\n \n \n
\n \n );\n};\n\nTakePhoto.propTypes = {\n question: shape.isRequired,\n answer: any.isRequired,\n setAnswer: func.isRequired,\n isActive: bool.isRequired\n};\n\nexport default TakePhoto;\n","import React, { useState } from 'react';\nimport {\n shape, any, func, bool\n} from 'prop-types';\nimport { WIDGETS } from '@jotforminc/constants';\nimport { sanitizeHtmlForParagraphField } from '@jotforminc/agent-utils';\n// eslint-disable-next-line import/extensions\nimport ChoiceButton from '../../ChoiceButton';\n\nconst TermsAndCondition = props => {\n const {\n question, answer, setAnswer, isActive = false, inProgress\n } = props;\n\n const {\n selectedField: widgetID\n } = question;\n\n const [accepted, setAccepted] = useState(false);\n const isShortScrollableTerms = widgetID === WIDGETS.ShortScrollableTerms;\n\n const TermsAndConditionParams = ['termsText', 'acceptedText', 'termsLink', 'theme'];\n const ShortScrollableTermsParams = ['termsText', 'content', 'sendTermsConditionals', 'isBottomRequired'];\n const params = {};\n (isShortScrollableTerms ? ShortScrollableTermsParams : TermsAndConditionParams).forEach(p => { params[p] = question[p]; });\n\n if (!isShortScrollableTerms && !/^(https|http):\\/\\//i.test(params.termsLink)) {\n params.termsLink = `https://${params.termsLink}`;\n }\n\n // eslint-disable-next-line max-len\n const termsAndConditionText = sanitizeHtmlForParagraphField((isShortScrollableTerms ? params.content : params.termsText).replaceAll('{', ``).replaceAll('}', ''));\n const defaultText = isShortScrollableTerms ? 'By clicking the button, I agree to terms & conditions.' : 'I agree to terms & conditions';\n\n const accept = () => {\n // eslint-disable-next-line no-nested-ternary\n const newAnswer = isShortScrollableTerms ? (params.sendTermsConditionals === 'Yes' ? params.content : 'Accepted') : (params.acceptedText || 'Accepted');\n\n setAccepted(true);\n setAnswer(newAnswer);\n };\n\n return (\n <>\n {imgElement}
\n );\n};\n\nImage.propTypes = {\n question: shape({}).isRequired\n};\n\nexport default Image;\n","import React, { useState, useEffect } from 'react';\nimport { string, func, bool } from 'prop-types';\nimport { TYPE_DURATION_PER_CHARACTER } from '../constants';\n\nconst HTMLTyping = ({ htmlString, onTypingEnd, useSpan }) => {\n const [displayedHtml, setDisplayedHtml] = useState('');\n\n const decodeHtmlEntities = str => {\n const textarea = document.createElement('textarea');\n textarea.innerHTML = str;\n return textarea.value;\n };\n useEffect(() => {\n let index = 0;\n const decodedHtml = decodeHtmlEntities(htmlString);\n let tagOpened = false;\n let lastTimeout = null;\n const type = () => {\n const newText = decodedHtml.slice(0, index + 1);\n setDisplayedHtml(newText);\n index++;\n if (index !== decodedHtml.length) {\n if (newText.charAt(newText.length - 1) === '<') {\n tagOpened = true;\n type();\n } else if (tagOpened && newText.charAt(newText.length - 1) !== '>') {\n type();\n } else if (tagOpened && newText.charAt(newText.length - 1) === '>') {\n tagOpened = false;\n type();\n } else {\n lastTimeout = setTimeout(type, TYPE_DURATION_PER_CHARACTER);\n }\n } else if (onTypingEnd) {\n onTypingEnd();\n }\n };\n type();\n return () => {\n if (lastTimeout) {\n clearTimeout(lastTimeout);\n }\n };\n }, []);\n\n const Element = useSpan ? 'span' : 'div';\n\n return (\n \n {viewMode || !isActive\n ? \n :
}\n