@hhgtech/hhg-components 1.29.481-beta-1 → 1.29.481

package/build/esm/subot.js

@@ -1,76 +1,81 @@
-import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle, memo } from 'react';
-import { d as NodeType, E as ELEMENT_CONTROL_INPUT_TYPE, f as NodeActionType, c as NodePosition, e as NodeFinalTypes, g as NodeMultipleOptions, N as NodeIntentType, F as FULL_KEY_ADDRESS, C as COMMON_DATE_TRANSLATE_KEY } from './index-9a48dac8.js';
-import { a as __awaiter, _ as __rest } from './tslib.es6-04e47048.js';
-import { b as basePath, G as GA_TOKEN_COOKIE, A as API_DATE_FORMAT, I as ISO_FORMAT, j as SSO_URL } from './index-8a437344.js';
+import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
+import { d as NodeType, E as ELEMENT_CONTROL_INPUT_TYPE, f as NodeActionType, c as NodePosition, e as NodeFinalTypes, g as NodeMultipleOptions, N as NodeIntentType, F as FULL_KEY_ADDRESS, C as COMMON_DATE_TRANSLATE_KEY, h as SubotType } from './index-31186afa.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-66838b4c.js';
+import { b as basePath, G as GA_TOKEN_COOKIE, A as API_DATE_FORMAT, I as ISO_FORMAT, j as SSO_URL } from './index-8e23d685.js';
 import Cookies from 'js-cookie';
 import fd from 'fastdom';
 import fastdomPromised from 'fastdom/extensions/fastdom-promised';
-import { G as GlobalData, c as callApi, u as locale, T as TogetherComponentGlobalContext } from './utils-3a1412da.js';
+import { G as GlobalData, c as callApi, u as locale, T as TogetherComponentGlobalContext } from './utils-0152f899.js';
 import formatString from 'string-format';
-import { a as getUserIdFromCookie, b as getSubotCookieId, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, e as checkUntilFinished, g as getHelloSitesUrl, f as checkMobile, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, T as TIME_RESET_RESEND_OTP, j as isFakeEmail, s as ssoIntents, k as getHhgIdFromCookie } from './index-1a606e96.js';
-export { T as TIME_RESET_RESEND_OTP, f as checkMobile, e as checkUntilFinished, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, g as getHelloSitesUrl, k as getHhgIdFromCookie, b as getSubotCookieId, a as getUserIdFromCookie, c as getUserInfoFromCookie, d as getWindowId, j as isFakeEmail, o as overrideParamsByQuery, s as ssoIntents } from './index-1a606e96.js';
+import { a as getUserIdFromCookie, b as getSubotCookieId, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, e as checkUntilFinished, g as getHelloSitesUrl, f as checkMobile, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, T as TIME_RESET_RESEND_OTP, j as isFakeEmail, s as ssoIntents, k as getHhgIdFromCookie } from './index-c945f7e2.js';
+export { T as TIME_RESET_RESEND_OTP, f as checkMobile, e as checkUntilFinished, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, g as getHelloSitesUrl, k as getHhgIdFromCookie, b as getSubotCookieId, a as getUserIdFromCookie, c as getUserInfoFromCookie, d as getWindowId, j as isFakeEmail, o as overrideParamsByQuery, s as ssoIntents } from './index-c945f7e2.js';
 import dayjs from 'dayjs';
 import { MAP_DOMAIN_BY_LOCALE, domainLocales } from './constantsDomainLocales.js';
 import classNames from 'classnames';
-import { C as Container$w } from './index-26e2a3bf.js';
-import { L as Loading } from './index-290f0108.js';
+import { C as Container$w } from './index-626c4113.js';
+import { L as Loading } from './index-6e6a61c1.js';
 import { motion } from 'framer-motion';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-063d5e54.js';
-import { B as Button } from './index-1365ef94.js';
+import { M as MediaQueries } from './utils-231a9c1b.js';
+import { B as Button } from './index-c8465d3a.js';
 import { Remarkable } from 'remarkable';
-import { ArrowRight } from '@hhgtech/icons/other';
+import { ArrowRight as ArrowRight$1 } from '@hhgtech/icons/other';
 import { useInView } from 'react-intersection-observer';
 import { Box, Textarea } from '@mantine/core';
-import { C as CommonGAssets } from './index-3afa1d39.js';
+import { C as CommonGAssets } from './index-da2db16e.js';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import { d as LEAD_TOKEN_COOKIE } from './constants-0d9362f5.js';
+import { d as LEAD_TOKEN_COOKIE } from './constants-bb7365f2.js';
 import { v4 } from 'uuid';
-import { T as Text } from './index-6dd86cd9.js';
+import { T as Text } from './index-376fae17.js';
 import { theme } from './miscTheme.js';
 import { isProduction } from './constantsIsProduction.js';
-import { S as Select } from './index-b69cdfa7.js';
+import { S as Select } from './index-4b3ad3ae.js';
 import '@mantine/dates';
-import './index-9074ab66.js';
-import './index-5ee684cf.js';
-import './index.styles-810d632f.js';
-import './translationsContext-a5aaee40.js';
+import './index-6d63d999.js';
+import './index-d6b2f50d.js';
+import './index.styles-008046cd.js';
+import './translationsContext-af917846.js';
 import '@mantine/hooks';
-import './index-1163c2a2.js';
+import './index-1e80c3fb.js';
 import isEmpty from 'lodash/isEmpty';
 import { Controller, useForm } from 'react-hook-form';
 import PhoneInputBase, { getCountryCallingCode, isPossiblePhoneNumber, parsePhoneNumber } from 'react-phone-number-input';
 import { LoadScript } from '@react-google-maps/api';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY, a as GOOGLE_API_LANGUAGE } from './usePlacesAutocomplete-021fa87d.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY, a as GOOGLE_API_LANGUAGE } from './usePlacesAutocomplete-51e606e2.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { L as LOCALE } from './Locale-71e44b1f.js';
-import { I as InputDate } from './InputDate-079946dd.js';
-import { B as Button$1 } from './index-b6ab7c48.js';
-import { D as Dropdown } from './index-d73f2d9c.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-2faecd11.js';
-import { g as getURLwithSSOTracking } from './utils-b5c1cfce.js';
+import { L as LOCALE } from './Locale-ae6a3517.js';
+import { I as InputDate } from './InputDate-a808832c.js';
+import { B as Button$1 } from './index-f57b5c1f.js';
+import { D as Dropdown } from './index-d973dda2.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-0d8b6df6.js';
+import { g as getURLwithSSOTracking } from './utils-33eee6d7.js';
+import { T as TextArea } from './index-2893c22f.js';
+import StarRatings from 'react-star-ratings';
+import { ArticleCard } from './moleculesArticleCard.js';
+import { T as Text$1 } from './index-da553b67.js';
+import { H as Heading } from './index-1e726ac4.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './index-6a51131c.js';
+import './index-9311ce10.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './togetherApiPaths.js';
-import './index-35303540.js';
-import './WhatsApp-9de799dd.js';
-import './Spinner-318c3595.js';
-import './index-e66d5d69.js';
-import './shared-598c2dfd.js';
-import './index-de47f2b2.js';
+import './index-e46ed082.js';
+import './WhatsApp-b750f3fa.js';
+import './Spinner-e1d5632b.js';
+import './index-257784e5.js';
+import './shared-37b0921d.js';
+import './index-b81e787f.js';
 import '@mantine/carousel';
-import './useUniqueId-43a93ec7.js';
+import './useUniqueId-c17e11b4.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
 import 'zustand';
-import './index-4e2cb08c.js';
-import './normalizeLink-93c61066.js';
-import './healthTools-5be0b7ab.js';
+import './index-0c3d2686.js';
+import './normalizeLink-bdccd192.js';
+import './healthTools-df7d3d42.js';
 
 // extend fastdom
 const fastdom = fd.extend(fastdomPromised);
@@ -152,7 +157,7 @@ const getSubotApiPath = (path, params) => {
     return apiUrl + formatString(path, Object.assign({}, params));
 };
 /** inline message */
-const subotInlineMessage = (data) => __awaiter(void 0, void 0, void 0, function* () {
+const subotInlineMessage$1 = (data) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         return yield callApi(getSubotApiPath(PATHS$1.GET_INLINE_MESSAGE), 'POST', {
             data,
@@ -160,7 +165,7 @@ const subotInlineMessage = (data) => __awaiter(void 0, void 0, void 0, function*
     }
     catch (error) { }
 });
-const computeExtraSettingsForBot = (data) => {
+const computeExtraSettingsForBot$1 = (data) => {
     var _a;
     if ((data === null || data === void 0 ? void 0 : data._status) === 1 && ((_a = data === null || data === void 0 ? void 0 : data._data) === null || _a === void 0 ? void 0 : _a.extra_settings)) {
         try {
@@ -183,11 +188,11 @@ const computeExtraSettingsForBot = (data) => {
     return data;
 };
 /** inline first node */
-const subotInlineFirstNode = (id) => __awaiter(void 0, void 0, void 0, function* () {
+const subotInlineFirstNode$1 = (id) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         const data = yield CachedSystem.withCached('SubotInlineFirstNode/' + id, () => __awaiter(void 0, void 0, void 0, function* () {
             const response = yield callApi(getSubotApiPath(PATHS$1.GET_INLINE_FIRST_NODE) + `/${id}`, 'GET');
-            computeExtraSettingsForBot(response);
+            computeExtraSettingsForBot$1(response);
             return response;
         }));
         return data;
@@ -197,7 +202,7 @@ const subotInlineFirstNode = (id) => __awaiter(void 0, void 0, void 0, function*
     }
 });
 /** inline click */
-const subotInlineClick = (data) => __awaiter(void 0, void 0, void 0, function* () {
+const subotInlineClick$1 = (data) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         return yield callApi(getSubotApiPath(PATHS$1.GET_INLINE_CLICK), 'POST', {
             data,
@@ -206,7 +211,7 @@ const subotInlineClick = (data) => __awaiter(void 0, void 0, void 0, function* (
     catch (error) { }
 });
 /** inline impression */
-const subotInlineImpression = (data) => __awaiter(void 0, void 0, void 0, function* () {
+const subotInlineImpression$1 = (data) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         return yield callApi(getSubotApiPath(PATHS$1.GET_INLINE_IMPRESSION), 'POST', {
             data,
@@ -805,7 +810,7 @@ const detectToSkipNodeStart = (botItem, currentActiveId, currentListNodes) => {
     return [currentActiveId, currentListNodes];
 };
 
-const SubotInlineContext = createContext({
+const SubotInlineContext$1 = createContext({
     activeId: '',
     params: {},
     listNodes: [],
@@ -821,7 +826,7 @@ const SubotInlineContext = createContext({
     setLoading: () => null,
     userInfo: null,
 });
-const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer, bgColor: _bgColor, primaryColor: _primaryColor, textColor, textButtonColor, bgContentColor, bgImgFullContainer, isDisabledAnimationOnMobile, onCloseMobile, userInfo, typeFormProps, isMobile, locale, }) => {
+const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer, bgColor: _bgColor, primaryColor: _primaryColor, textColor, textButtonColor, bgContentColor, bgImgFullContainer, isDisabledAnimationOnMobile, onCloseMobile, userInfo, typeFormProps, customUrl, isMobile, locale, }) => {
     const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
     const ref = useRef(null);
     // const { formatMessage: f } = useIntl()
@@ -868,8 +873,7 @@ const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer,
     /** Get Params */
     const getParams = useCallback(() => {
         const gaData = window.gaData;
-        const url = window.location.origin +
-            basePath +
+        const url = (customUrl || window.location.origin + basePath) +
             ((GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.locale) === 'tl-PH'
                 ? articleLink.replace('fil/', '')
                 : articleLink);
@@ -918,7 +922,7 @@ const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer,
         let newActiveId = '';
         let nodes = [];
         setLoading(true);
-        const resFirst = yield subotInlineFirstNode(params.bot_id);
+        const resFirst = yield subotInlineFirstNode$1(params.bot_id);
         if ((resFirst === null || resFirst === void 0 ? void 0 : resFirst._status) === 1) {
             newActiveId = resFirst === null || resFirst === void 0 ? void 0 : resFirst._data.id.toString();
             nodes.push(resFirst === null || resFirst === void 0 ? void 0 : resFirst._data, resFirst === null || resFirst === void 0 ? void 0 : resFirst._data.first_node);
@@ -936,7 +940,7 @@ const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer,
         if (previousState &&
             previousState.params.action_id &&
             previousState.params.action_value) {
-            const resResultInline = yield subotInlineMessage(previousState.params);
+            const resResultInline = yield subotInlineMessage$1(previousState.params);
             if ((resResultInline === null || resResultInline === void 0 ? void 0 : resResultInline._status) === 1 && (resResultInline === null || resResultInline === void 0 ? void 0 : resResultInline._data.node)) {
                 newActiveId = resResultInline === null || resResultInline === void 0 ? void 0 : resResultInline._data.node.id;
                 nodes = previousState.listNodes;
@@ -1005,7 +1009,7 @@ const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer,
     const onNext = useCallback((messageParams) => __awaiter(void 0, void 0, void 0, function* () {
         if (messageParams === null || messageParams === void 0 ? void 0 : messageParams.node_id) {
             const newMessage = Object.assign(Object.assign({}, messageParams), getCurrentTotalDynamicScore(listNodes, activeId, messageParams.action_id));
-            const res = yield subotInlineMessage(newMessage);
+            const res = yield subotInlineMessage$1(newMessage);
             setLoading(false);
             if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
                 const _b = res === null || res === void 0 ? void 0 : res._data, { node } = _b, restData = __rest(_b, ["node"]);
@@ -1153,7 +1157,7 @@ const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer,
     if (!listNodes.length) {
         return null;
     }
-    return (React__default.createElement(SubotInlineContext.Provider, { value: value },
+    return (React__default.createElement(SubotInlineContext$1.Provider, { value: value },
         React__default.createElement("div", { ref: ref }, children)));
 };
 
@@ -1657,7 +1661,7 @@ const Container$u = () => {
     var _a, _b, _c;
     const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
     const currentUrl = useCurrentUrl();
-    const { listNodes, activeId, isShowFooter, onNext, onPrev, params, onStartOver, loading, } = useContext(SubotInlineContext);
+    const { listNodes, activeId, isShowFooter, onNext, onPrev, params, onStartOver, loading, } = useContext(SubotInlineContext$1);
     const { value } = useContext(NodeContext);
     const validation = useValidationMultiOption();
     const botItem = listNodes[0];
@@ -2049,7 +2053,7 @@ const Container$s = ({ node, onClickStart }) => {
     const refImpression = useRef(false);
     const { ref, inView } = useInView();
     const currentUrl = useCurrentUrl();
-    const { params, getParams, onNext, setIsShowFooter, listNodes } = useContext(SubotInlineContext);
+    const { params, getParams, onNext, setIsShowFooter, listNodes } = useContext(SubotInlineContext$1);
     const botItem = listNodes[0];
     const botType = (_a = botItem === null || botItem === void 0 ? void 0 : botItem.extra_settings) === null || _a === void 0 ? void 0 : _a.subot_type;
     useMemo(() => {
@@ -2059,14 +2063,14 @@ const Container$s = ({ node, onClickStart }) => {
         if (!inView || refImpression.current) {
             return;
         }
-        subotInlineImpression(getParams());
+        subotInlineImpression$1(getParams());
         refImpression.current = true;
     }, [inView]);
     const handleClickStart = () => {
         // 1. Tracking Event Click
         const params = getParams();
         params.device_id = checkMobile(window.navigator.userAgent) ? 2 : 1;
-        subotInlineClick(params);
+        subotInlineClick$1(params);
         // 2. Call API to fetch next node
         onNext();
         onClickStart === null || onClickStart === void 0 ? void 0 : onClickStart();
@@ -2080,7 +2084,7 @@ const Container$s = ({ node, onClickStart }) => {
                 email: '',
                 voucherName: '',
             } })),
-        React__default.createElement(Button, { onClick: handleClickStart, "data-event-category": "Service Connection", "data-event-action": "Risk Screening Start", "data-event-label": currentUrl, "data-bot-id": params.bot_id, rightIcon: React__default.createElement(ArrowRight, { color: "var(--subot-inline-text-button-color, #fff)" }), styles: {
+        React__default.createElement(Button, { onClick: handleClickStart, "data-event-category": "Service Connection", "data-event-action": "Risk Screening Start", "data-event-label": currentUrl, "data-bot-id": params.bot_id, rightIcon: React__default.createElement(ArrowRight$1, { color: "var(--subot-inline-text-button-color, #fff)" }), styles: {
                 root: {
                     backgroundColor: 'var(--subot-inline-primary-color) !important',
                     '&:hover': {
@@ -2345,7 +2349,7 @@ const handleFrisoRedirecition = (listNode) => {
 
 const Container$r = ({ intent }) => {
     var _a;
-    const { listNodes } = useContext(SubotInlineContext);
+    const { listNodes } = useContext(SubotInlineContext$1);
     const handleOnClick = () => {
         var _a;
         if ((_a = intent.url) === null || _a === void 0 ? void 0 : _a.includes('{{.frisoRedirectUrl}}')) {
@@ -2401,7 +2405,7 @@ const Container$q = ({ intent }) => {
 Container$q.displayName = 'SubotInlineIntentBotImage';
 
 const Container$p = ({ intent, indexNumber }) => {
-    const { listNodes } = useContext(SubotInlineContext);
+    const { listNodes } = useContext(SubotInlineContext$1);
     const isShowLabel = ![NodeIntentType.SSO_INTENT].includes(intent === null || intent === void 0 ? void 0 : intent.type);
     const isText = [
         NodeIntentType.BOT_TEXT,
@@ -2435,7 +2439,7 @@ Container$p.displayName = 'SubotInlineIntentBotTitle';
 
 const Container$o = ({ intent }) => {
     const currentUrl = useCurrentUrl();
-    const { listNodes, activeId, params } = useContext(SubotInlineContext);
+    const { listNodes, activeId, params } = useContext(SubotInlineContext$1);
     const foundNode = listNodes.find((n) => n.id == activeId);
     if (!intent.label || !foundNode) {
         return null;
@@ -2776,7 +2780,7 @@ const StyledWrap$e = styled.div `
 `;
 
 const Container$k = ({ intent }) => {
-    const { listNodes } = useContext(SubotInlineContext);
+    const { listNodes } = useContext(SubotInlineContext$1);
     if (!(intent === null || intent === void 0 ? void 0 : intent.label)) {
         return null;
     }
@@ -2837,15 +2841,15 @@ const Container$j = ({ intent }) => {
 };
 Container$j.displayName = 'SubotInlineIntentSSO';
 
-var _a$1;
-const SubotInlineIntentCol = styled.div `
+var _a$2;
+const SubotInlineIntentCol$1 = styled.div `
   width: ${({ width }) => width || '100%'};
   padding: 4px;
   ${MediaQueries.mbDown} {
     width: 100%;
   }
 `;
-const SubotInlineIntentUrlContainer = styled.div `
+const SubotInlineIntentUrlContainer$1 = styled.div `
   display: flex;
   .feature {
     width: 30%;
@@ -2873,7 +2877,7 @@ const SubotInlineIntentUrlContainer = styled.div `
     margin-left: 10px;
     line-height: 1.5;
     a {
-      color: ${((_a$1 = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a$1 === void 0 ? void 0 : _a$1.gray800) || '#262626'};
+      color: ${((_a$2 = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a$2 === void 0 ? void 0 : _a$2.gray800) || '#262626'};
       text-decoration: none;
     }
   }
@@ -2883,8 +2887,8 @@ const Container$i = ({ intent, }) => {
     const article = useMemo(() => intent.label.includes('{')
         ? JSON.parse(intent.label)
         : {}, [intent.label]);
-    return (React__default.createElement(React__default.Fragment, null, !!Object.keys(article).length && (React__default.createElement(SubotInlineIntentCol, null,
-        React__default.createElement(SubotInlineIntentUrlContainer, null,
+    return (React__default.createElement(React__default.Fragment, null, !!Object.keys(article).length && (React__default.createElement(SubotInlineIntentCol$1, null,
+        React__default.createElement(SubotInlineIntentUrlContainer$1, null,
             React__default.createElement("div", { className: "feature" },
                 React__default.createElement("a", { href: article === null || article === void 0 ? void 0 : article.url, className: "feature-wrapper" },
                     React__default.createElement("img", { loading: "lazy", src: article === null || article === void 0 ? void 0 : article.thumbnail, alt: article === null || article === void 0 ? void 0 : article.title, className: "feature-img" }))),
@@ -2921,7 +2925,7 @@ const SubotInlineIntentBaseTarget = {
     /** intents fake for sso block */
     [NodeIntentType.SSO_INTENT]: Container$j,
 };
-const SubotInlineIntentBase = new Proxy(SubotInlineIntentBaseTarget, {
+const SubotInlineIntentBase$1 = new Proxy(SubotInlineIntentBaseTarget, {
     get(_, prop) {
         const UnknowComponent = () => {
             if (isProduction)
@@ -2948,7 +2952,7 @@ const Container$h = ({ intents: intentsProp, indexNumber, }) => {
             const intentType = (intent === null || intent === void 0 ? void 0 : intent.type) || '';
             if (excludeIntents.includes(intentType))
                 return null;
-            const NodeIntent = SubotInlineIntentBase[intentType];
+            const NodeIntent = SubotInlineIntentBase$1[intentType];
             return NodeIntent && React__default.createElement(NodeIntent, { key: intent.id, intent: intent });
         })))));
 };
@@ -2956,7 +2960,7 @@ Container$h.displayName = 'SubotInlineIntent';
 
 const Container$g = ({ node }) => {
     var _a, _b;
-    const { setIsShowFooter, listNodes } = useContext(SubotInlineContext);
+    const { setIsShowFooter, listNodes } = useContext(SubotInlineContext$1);
     const botItem = listNodes[0];
     useMemo(() => {
         setIsShowFooter(true);
@@ -3147,7 +3151,7 @@ const SubInlineIntent = ({ subIntents }) => {
             React__default.createElement(ChevronDown, { className: "si-chevron-down" })),
         React__default.createElement(motion.div, { className: "si-sub-intent-expand", animate: isShow ? { height: 'auto' } : { height: 0 }, transition: { duration: 0.3 }, "data-show": isShow }, restSubIntents.map((intent) => {
             const intentType = (intent === null || intent === void 0 ? void 0 : intent.type) || '';
-            const NodeIntent = SubotInlineIntentBase[intentType];
+            const NodeIntent = SubotInlineIntentBase$1[intentType];
             return NodeIntent && React__default.createElement(NodeIntent, { key: intent.id, intent: intent });
         }))));
 };
@@ -3158,7 +3162,7 @@ const Container$f = ({ node }) => {
     // const isMobile = useGetIsMobile(true)
     const refMainIntents = useRef(null);
     const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
-    const { setIsShowFooter, listNodes } = useContext(SubotInlineContext);
+    const { setIsShowFooter, listNodes } = useContext(SubotInlineContext$1);
     const [isShowMore, setIsShowMore] = useState(false);
     useEffect(() => {
         var _a;
@@ -3263,11 +3267,11 @@ const Container$f = ({ node }) => {
             defaultMessage: 'See more',
         }))),
         React__default.createElement("div", { className: "wrap-main-button-intent" }, (_a = [...mainButtonIntents, ...bookingButtonIntents]) === null || _a === void 0 ? void 0 : _a.map((intent) => {
-            const NodeIntent = SubotInlineIntentBase[intent.type || ''];
+            const NodeIntent = SubotInlineIntentBase$1[intent.type || ''];
             return NodeIntent && React__default.createElement(NodeIntent, { key: intent.id, intent: intent });
         })),
         (suggestedServiceIntents === null || suggestedServiceIntents === void 0 ? void 0 : suggestedServiceIntents.length) > 0 && (React__default.createElement("div", null, suggestedServiceIntents.map((intent) => {
-            const NodeIntent = SubotInlineIntentBase[intent.type || ''];
+            const NodeIntent = SubotInlineIntentBase$1[intent.type || ''];
             return NodeIntent && React__default.createElement(NodeIntent, { key: intent.id, intent: intent });
         }))),
         (relatedArticleIntents === null || relatedArticleIntents === void 0 ? void 0 : relatedArticleIntents.length) > 0 && (React__default.createElement("div", { style: { marginTop: 24 } },
@@ -3276,7 +3280,7 @@ const Container$f = ({ node }) => {
                 defaultMessage: 'Related Articles',
             })),
             React__default.createElement("div", { style: { padding: '8px 0' } }, relatedArticleIntents.map((intent) => {
-                const NodeIntent = SubotInlineIntentBase[intent.type || ''];
+                const NodeIntent = SubotInlineIntentBase$1[intent.type || ''];
                 return (NodeIntent && React__default.createElement(NodeIntent, { key: intent.id, intent: intent }));
             })))),
         React__default.createElement(SubInlineIntent, { subIntents: subIntents })));
@@ -3290,7 +3294,7 @@ const StyledWrap$b = styled.div `
 `;
 
 const Container$e = ({ node }) => {
-    const { params, onNext, setIsShowFooter } = useContext(SubotInlineContext);
+    const { params, onNext, setIsShowFooter } = useContext(SubotInlineContext$1);
     useMemo(() => {
         setIsShowFooter(true);
     }, []);
@@ -3702,7 +3706,7 @@ const CountDown = ({ onFinish, onClick, isFinished, resendLabel, className }, re
 };
 var CountDown$1 = forwardRef(CountDown);
 
-styled.div `
+const StyledUserInfoFormContainer$1 = styled.div `
   margin: 0 auto;
   background: #f7f9fc;
   border-radius: ${theme.borderRadius};
@@ -4634,7 +4638,7 @@ const OTP_VERIFIED_MSG_CODE = {
     },
 };
 
-var _a, _b, _c, _d, _e;
+var _a$1, _b$1, _c$1, _d$1, _e$1;
 const StyledPhoneCode = styled.div `
   display: flex;
   align-items: center;
@@ -4646,21 +4650,21 @@ const StyledPhoneCode = styled.div `
     border-radius: 2px;
   }
   > div {
-    color: ${((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray800) || ''};
+    color: ${((_a$1 = theme.colors) === null || _a$1 === void 0 ? void 0 : _a$1.gray800) || ''};
     white-space: nowrap;
   }
 `;
 styled(PhoneInputBase) `
   display: flex;
-  border: 1px solid ${((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray200) || ''};
+  border: 1px solid ${((_b$1 = theme.colors) === null || _b$1 === void 0 ? void 0 : _b$1.gray200) || ''};
   border-radius: ${theme === null || theme === void 0 ? void 0 : theme.borderRadius};
   .PhoneInputCountry {
     position: relative;
     padding: 12px 8px 12px 16px;
-    border-right: 1px solid ${((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray200) || ''};
-    background-color: ${((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray100) || ''};
+    border-right: 1px solid ${((_c$1 = theme.colors) === null || _c$1 === void 0 ? void 0 : _c$1.gray200) || ''};
+    background-color: ${((_d$1 = theme.colors) === null || _d$1 === void 0 ? void 0 : _d$1.gray100) || ''};
     border-radius: 6px 0 0 6px;
-    color: ${((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray800) || ''};
+    color: ${((_e$1 = theme.colors) === null || _e$1 === void 0 ? void 0 : _e$1.gray800) || ''};
     .PhoneInputCountrySelect {
       position: absolute;
       top: 0;
@@ -5497,14 +5501,14 @@ const StyledWrap$a = styled.div `
 const Container$d = ({ node, indexNumber }) => {
     var _a;
     const locale = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.locale;
-    const { params, listNodes, activeId, onSubmit, setIsShowFooter } = useContext(SubotInlineContext);
+    const { params, listNodes, activeId, onSubmit, setIsShowFooter } = useContext(SubotInlineContext$1);
     useMemo(() => {
         setIsShowFooter(true);
     }, []);
     const handleSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
         checkSyncDataOnFrisoCampaign(listNodes[0], data.form_submit_meta);
         const _message = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, params), node._message), data), getCurrentTotalDynamicScore(listNodes, activeId, data.action_id, data.form_submit_meta)), { node_id: node.id });
-        const res = yield subotInlineMessage(_message);
+        const res = yield subotInlineMessage$1(_message);
         // asking
         if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
             const _b = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _b, restData = __rest(_b, ["node"]);
@@ -5669,7 +5673,7 @@ const StyledWrap$7 = styled.div `
 `;
 const Container$c = ({ action, active, onChange, htmlType, }) => {
     const currentUrl = useCurrentUrl();
-    const { params } = useContext(SubotInlineContext);
+    const { params } = useContext(SubotInlineContext$1);
     return (React__default.createElement(StyledWrap$7, { className: "si-action-img-choice", onClick: () => onChange && onChange(action), active: !!active, "data-event-category": "Service Connection", "data-event-action": "Risk Screening Answer Click", "data-event-label": currentUrl, "data-bot-id": params.bot_id },
         React__default.createElement("div", { className: "si-action-image-wrap" },
             React__default.createElement("img", { loading: "lazy", src: action === null || action === void 0 ? void 0 : action.url, alt: action === null || action === void 0 ? void 0 : action.label })),
@@ -5685,7 +5689,7 @@ const StyledWrap$6 = styled.div `
 `;
 const Container$b = ({ action, onChange }) => {
     const currentUrl = useCurrentUrl();
-    const { params, activeId } = useContext(SubotInlineContext);
+    const { params, activeId } = useContext(SubotInlineContext$1);
     return (React__default.createElement(StyledWrap$6, null,
         React__default.createElement(Button, { onClick: () => onChange && onChange(action), size: "lg", "data-event-category": "Service Connection", "data-event-action": "Risk Screening Sign Up for Result", "data-event-label": currentUrl, "data-bot-id": params.bot_id, "data-event-question-id": activeId, styles: {
                 root: {
@@ -5747,7 +5751,7 @@ const Container$a = ({ action, onChange, active, htmlType, formSubmitMeta, }) =>
     const currentUrl = useCurrentUrl();
     const inputRef = useRef(null);
     const [otherText, setOtherText] = useState('');
-    const { params } = useContext(SubotInlineContext);
+    const { params } = useContext(SubotInlineContext$1);
     const isActionPollWithOther = (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.POLL_CHOICE_TEXT_BY_INPUT;
     const isActionSelectWithOther = (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.USER_CHOICE_TEXT_BY_INPUT ||
         isActionPollWithOther;
@@ -5831,7 +5835,7 @@ const SubotInlineActionBaseTarget = {
     // [NodeActionType.RESULT_BUTTON]: SubotInlineActionTextChoice,
     // [NodeActionType.POLL_RESULT]: SubotInlinePollResult,
 };
-const SubotInlineActionBase = new Proxy(SubotInlineActionBaseTarget, {
+const SubotInlineActionBase$1 = new Proxy(SubotInlineActionBaseTarget, {
     get(_, prop) {
         const UnknowComponent = () => {
             if (isProduction)
@@ -5862,14 +5866,14 @@ const Container$7 = ({ actions, value, onChange, htmlType, node_type, formSubmit
         const actionType = action.type;
         if (excludeActions.includes(actionType))
             return null;
-        const NodeAction = SubotInlineActionBase[action.type];
+        const NodeAction = SubotInlineActionBase$1[action.type];
         return (NodeAction && (React__default.createElement(NodeAction, { key: action.id, action: action, onChange: onChange, active: value === null || value === void 0 ? void 0 : value.includes(action.id), htmlType: htmlType, formSubmitMeta: formSubmitMeta })));
     })));
 };
 Container$7.displayName = 'SubotInlineAction';
 
 const Container$6 = ({ node, indexNumber }) => {
-    const { params, listNodes, activeId, onSubmit, setIsShowFooter, setLoading } = useContext(SubotInlineContext);
+    const { params, listNodes, activeId, onSubmit, setIsShowFooter, setLoading } = useContext(SubotInlineContext$1);
     const { value, setValue } = useContext(NodeContext);
     useMemo(() => {
         setIsShowFooter(true);
@@ -5884,7 +5888,7 @@ const Container$6 = ({ node, indexNumber }) => {
         setValue(Object.assign(Object.assign({}, value), { action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key }));
         const newParams = Object.assign(Object.assign(Object.assign(Object.assign({}, params), value), { node_id: node.id, action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key }), getCurrentTotalDynamicScore(listNodes, activeId, action.id));
         setLoading(true);
-        const res = yield subotInlineMessage(newParams);
+        const res = yield subotInlineMessage$1(newParams);
         setLoading(false);
         if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
             const _a = res === null || res === void 0 ? void 0 : res._data, { node } = _a, restData = __rest(_a, ["node"]);
@@ -5909,7 +5913,7 @@ const StyledWrap$3 = styled.div `
 
 const Container$5 = ({ node, indexNumber }) => {
     var _a;
-    const { setIsShowFooter, onChange } = useContext(SubotInlineContext);
+    const { setIsShowFooter, onChange } = useContext(SubotInlineContext$1);
     const { value, setValue } = useContext(NodeContext);
     useMemo(() => {
         setIsShowFooter(true);
@@ -6021,7 +6025,7 @@ const StyledWrap$2 = styled.div `
 `;
 
 const Container$4 = ({ node, indexNumber }) => {
-    const { onChange, setIsShowFooter } = useContext(SubotInlineContext);
+    const { onChange, setIsShowFooter } = useContext(SubotInlineContext$1);
     const { value, setValue } = useContext(NodeContext);
     const descriptionNode = useDescriptionPollNode({ node });
     useMemo(() => {
@@ -6096,7 +6100,7 @@ const StyledWrap$1 = styled.div ``;
 const Container$3 = ({ node }) => {
     const refIsTrigger = useRef(false);
     const { formatMessage: f, data: { userInfo }, } = useContext(TogetherComponentGlobalContext);
-    const { params, setIsShowFooter, listNodes, activeId } = useContext(SubotInlineContext);
+    const { params, setIsShowFooter, listNodes, activeId } = useContext(SubotInlineContext$1);
     useMemo(() => {
         setIsShowFooter(true);
     }, []);
@@ -6158,7 +6162,7 @@ const StyledWrap = styled.div `
 `;
 
 const Container$2 = ({ node, indexNumber }) => {
-    const { params, onSubmit, setIsShowFooter, listNodes, activeId, setLoading, onChange, } = useContext(SubotInlineContext);
+    const { params, onSubmit, setIsShowFooter, listNodes, activeId, setLoading, onChange, } = useContext(SubotInlineContext$1);
     const { value, setValue } = useContext(NodeContext);
     useMemo(() => {
         setIsShowFooter(true);
@@ -6174,7 +6178,7 @@ const Container$2 = ({ node, indexNumber }) => {
     const handleOnChangeNormal = (action) => __awaiter(void 0, void 0, void 0, function* () {
         const newParams = Object.assign(Object.assign(Object.assign(Object.assign({}, params), value), { node_id: node.id, action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key, form_submit_meta: undefined }), getCurrentTotalDynamicScore(listNodes, activeId, action.id));
         setLoading(true);
-        const res = yield subotInlineMessage(newParams);
+        const res = yield subotInlineMessage$1(newParams);
         setLoading(false);
         if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
             const _a = res === null || res === void 0 ? void 0 : res._data, { node } = _a, restData = __rest(_a, ["node"]);
@@ -6222,7 +6226,7 @@ const SubotInlineNodeBaseTarget = {
     // RESULT_RATING = 12,
     // RESULT_REACTION = 13,
 };
-const SubotInlineNodeBase = new Proxy(SubotInlineNodeBaseTarget, {
+const SubotInlineNodeBase$1 = new Proxy(SubotInlineNodeBaseTarget, {
     get(_, prop) {
         const UnknowComponent = () => {
             if (isProduction)
@@ -6237,7 +6241,7 @@ const SubotInlineNodeBase = new Proxy(SubotInlineNodeBaseTarget, {
 
 const Container$1 = ({ onClickStart }) => {
     var _a;
-    const { listNodes, activeId, isDisabledAnimationOnMobile } = useContext(SubotInlineContext);
+    const { listNodes, activeId, isDisabledAnimationOnMobile } = useContext(SubotInlineContext$1);
     const foundIdx = useMemo(() => {
         return listNodes.findIndex((n) => n.id == activeId);
     }, [listNodes, activeId]);
@@ -6258,10 +6262,10 @@ const Container$1 = ({ onClickStart }) => {
     const nodeType = NodeType[node.type].valueOf();
     const nodeTypeSSO = (_a = NodePosition[node.position]) === null || _a === void 0 ? void 0 : _a.valueOf();
     let NodeComponent = node.position === NodePosition.SSO
-        ? SubotInlineNodeBase[nodeTypeSSO]
-        : SubotInlineNodeBase[nodeType];
+        ? SubotInlineNodeBase$1[nodeTypeSSO]
+        : SubotInlineNodeBase$1[nodeType];
     if (node.is_multi_select && node.type !== NodeType.POLL) {
-        NodeComponent = SubotInlineNodeBase['MULTIPLE'];
+        NodeComponent = SubotInlineNodeBase$1['MULTIPLE'];
     }
     return (React__default.createElement(motion.div, { key: node.id, initial: { opacity: 1, y: -300 }, animate: { opacity: 1, y: 0 }, transition: {
             y: { type: 'spring', stiffness: 300, damping: 30 },
@@ -6299,7 +6303,7 @@ const View = ({ loading, backgroundImage, isShowFooter, isFullContainer, isDisab
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
     }), [backgroundImage]);
-    const { isMobile, locale } = useContext(SubotInlineContext);
+    const { isMobile, locale } = useContext(SubotInlineContext$1);
     const [isDisplayFullMobile, setIsDisplayFullMobile] = useState(false);
     useEffect(() => {
         if (isDisplayFullMobile) {
@@ -6362,7 +6366,7 @@ const ViewWithMemo = memo(View);
 ViewWithMemo.displayName = 'SubotInlineRevampView';
 
 const Container = () => {
-    const { loading, listNodes, isShowFooter, activeId, isFullContainer, isDisabledAnimationOnMobile, onCloseMobile, userInfo, bgImgFullContainer, typeFormProps, } = useContext(SubotInlineContext);
+    const { loading, listNodes, isShowFooter, activeId, isFullContainer, isDisabledAnimationOnMobile, onCloseMobile, userInfo, bgImgFullContainer, typeFormProps, } = useContext(SubotInlineContext$1);
     const backgroundImage = useMemo(() => {
         var _a, _b;
         const foundNode = listNodes.find((n) => n.id == activeId);
@@ -6419,6 +6423,3155 @@ const SubotInlineRevampWithTheme = (props) => {
     return (React__default.createElement(ContainerWithProvider, Object.assign({}, props, { primaryColor: (_b = (_a = botData.extra_settings) === null || _a === void 0 ? void 0 : _a.inline_styles) === null || _b === void 0 ? void 0 : _b.primary_color, textColor: (_d = (_c = botData.extra_settings) === null || _c === void 0 ? void 0 : _c.inline_styles) === null || _d === void 0 ? void 0 : _d.text_color, textButtonColor: (_f = (_e = botData.extra_settings) === null || _e === void 0 ? void 0 : _e.inline_styles) === null || _f === void 0 ? void 0 : _f.text_button_color, bgColor: (_h = (_g = botData.extra_settings) === null || _g === void 0 ? void 0 : _g.inline_styles) === null || _h === void 0 ? void 0 : _h.container_bg_color, bgContentColor: (_k = (_j = botData.extra_settings) === null || _j === void 0 ? void 0 : _j.inline_styles) === null || _k === void 0 ? void 0 : _k.content_bg_color, bgImgFullContainer: (_m = (_l = botData.extra_settings) === null || _l === void 0 ? void 0 : _l.inline_styles) === null || _m === void 0 ? void 0 : _m.container_bg_image })));
 };
 
+const SubotInlineContext = createContext({
+    activeId: '',
+    params: {},
+    nodes: [],
+    getParams: () => ({}),
+    trackingCommonInline: {},
+});
+/** inline click */
+const subotInlineClick = (data) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        return yield callApi(getSubotApiPath(PATHS$1.GET_INLINE_CLICK), 'POST', {
+            data,
+        });
+    }
+    catch (error) { }
+});
+/** inline impression */
+const subotInlineImpression = (data) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        return yield callApi(getSubotApiPath(PATHS$1.GET_INLINE_IMPRESSION), 'POST', {
+            data,
+        });
+    }
+    catch (error) { }
+});
+/** inline message */
+const subotInlineMessage = (data) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        return yield callApi(getSubotApiPath(PATHS$1.GET_INLINE_MESSAGE), 'POST', {
+            data,
+        });
+    }
+    catch (error) { }
+});
+const computeExtraSettingsForBot = (data) => {
+    var _a;
+    if ((data === null || data === void 0 ? void 0 : data._status) === 1 && ((_a = data === null || data === void 0 ? void 0 : data._data) === null || _a === void 0 ? void 0 : _a.extra_settings)) {
+        try {
+            const extraSettingsObj = JSON.parse(data._data.extra_settings);
+            if (typeof extraSettingsObj === 'object') {
+                data._data.extra_settings = extraSettingsObj;
+            }
+            else {
+                data._data.extra_settings = {
+                    sync_data_friso_campaign: false,
+                };
+            }
+        }
+        catch (err) {
+            data._data.extra_settings = {
+                sync_data_friso_campaign: false,
+            };
+        }
+    }
+    return data;
+};
+/** inline first node */
+const subotInlineFirstNode = (id) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const data = yield callApi(getSubotApiPath(PATHS$1.GET_INLINE_FIRST_NODE) + `/${id}`, 'GET');
+        computeExtraSettingsForBot(data);
+        return data;
+    }
+    catch (error) { }
+});
+
+const SubotInlineFormContainer = styled.div `
+  margin-top: 2rem;
+  .form {
+    background-color: ${theme.colors.white || '#fff'};
+  }
+`;
+const SubotInlineIntentContainer = styled.div ``;
+const SubotInlineActionContainer = styled.div `
+  margin-top: 1.25rem;
+`;
+const SubotInlineReviewContainer = styled.div `
+  margin-bottom: 1rem;
+`;
+const SubotInlineDescription$1 = styled.div `
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: #595959;
+  font-style: italic;
+`;
+const SubotInlineFinalButton = styled(Button$1) `
+  position: relative;
+  min-width: 180px;
+  svg {
+    path {
+      stroke: currentColor;
+    }
+  }
+  &:hover {
+    svg {
+      path {
+        stroke: currentColor;
+      }
+    }
+  }
+`;
+const SubotInlineFinalMoreContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const SubotInlineFinalWrapper = styled.div `
+  position: relative;
+  overflow: ${({ isMore }) => (isMore ? 'unset' : 'hidden')};
+  max-height: ${({ maxHeight }) => (maxHeight ? maxHeight + 'px' : 'auto')};
+  margin-bottom: 8px;
+  transition: 0.25s all linear;
+  &:before {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: linear-gradient(
+      to top,
+      ${theme.colors.neutral50 || '#F7F9FC'} 0%,
+      transparent 100%
+    );
+    content: '';
+    pointer-events: none;
+    ${({ isMore }) => isMore && `opacity: 0;`}
+  }
+`;
+const SubotInlineFinalContainer = styled.div `
+  position: relative;
+  padding: 32px 32px 16px;
+  background-color: ${theme.colors.neutral50 || '#F7F9FC'};
+  border-radius: ${theme.borderRadius};
+  ${MediaQueries.tdDown} {
+    padding: 24px 24px 16px;
+  }
+  ${MediaQueries.mbDown} {
+    padding: 16px;
+    border-radius: 0px;
+  }
+`;
+const SubotInlineWrapper$1 = styled.div `
+  padding: 12px 32px 32px;
+  ${MediaQueries.tdDown} {
+    padding: 12px 24px 24px;
+  }
+  ${MediaQueries.mbDown} {
+    padding: 12px 16px 16px;
+  }
+`;
+const SubotInlineContainer$1 = styled.div `
+  border: 1px solid ${theme.colors.neutral100 || '#E4E8EC'};
+  background-color: ${theme.colors.neutral50 || '#F7F9FC'};
+  border-radius: ${theme.borderRadius};
+  ${MediaQueries.mbDown} {
+    border: none;
+  }
+`;
+
+const CheckboxIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z", fill: "#2D87F3", stroke: "#2D87F3", strokeWidth: "2" }),
+    React__default.createElement("path", { d: "M15.5714 8L9.67857 14L7 11.2727", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const CheckIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { d: "M13.3346 4L6.0013 11.3333L2.66797 8", stroke: "#737373", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const LikeIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.0521 5.70293L11.8834 2L12.6635 2.03149C12.6635 2.03149 13.5407 2.05593 14.4487 2.51311C15.3568 2.9703 16.375 4.04935 16.375 5.69552C16.375 6.76085 16.1102 7.83874 15.8458 8.67047H20.125C21.1497 8.67047 22 9.53063 22 10.5673V12.8847C22 13.1046 21.9497 13.3294 21.8462 13.533L18.6437 19.9571C18.3261 20.5939 17.6767 21 16.9701 21H8.875C7.85025 21 7 20.1398 7 19.1031V10.0579C7 9.50164 7.24299 8.97147 7.66284 8.61119L11.0521 5.70293ZM13.4432 4.15712C13.4125 4.15279 13.3784 4.14799 13.3263 4.1321L12.7422 6.73842L8.875 10.0579V19.1031H16.9701L20.125 12.7717V10.5673H13.0864L13.6357 9.25027C13.6357 9.25027 14.5 7.01241 14.5 5.69552C14.5 4.74112 14.1119 4.46257 13.6138 4.21176C13.5294 4.16929 13.4902 4.16376 13.4432 4.15712Z", fill: "#595959" }),
+    React__default.createElement("path", { d: "M2 10.5C2 9.672 2.672 9 3.5 9C4.328 9 5 9.672 5 10.5V19.5C5 20.328 4.328 21 3.5 21C2.672 21 2 20.328 2 19.5V10.5Z", fill: "#595959" })));
+
+const DislikeIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.0521 17.2971L11.8834 21L12.6635 20.9685C12.6635 20.9685 13.5407 20.9441 14.4487 20.4869C15.3568 20.0297 16.375 18.9507 16.375 17.3045C16.375 16.2391 16.1102 15.1613 15.8458 14.3295H20.125C21.1497 14.3295 22 13.4694 22 12.4327V10.1153C22 9.89545 21.9497 9.6706 21.8462 9.467L18.6437 3.0429C18.3261 2.40607 17.6767 2 16.9701 2H8.875C7.85025 2 7 2.86016 7 3.89685V12.9421C7 13.4984 7.24299 14.0285 7.66284 14.3888L11.0521 17.2971ZM13.4432 18.8429C13.4125 18.8472 13.3784 18.852 13.3263 18.8679L12.7422 16.2616L8.875 12.9421V3.89685H16.9701L20.125 10.2283V12.4327H13.0864L13.6357 13.7497C13.6357 13.7497 14.5 15.9876 14.5 17.3045C14.5 18.2589 14.1119 18.5374 13.6138 18.7882C13.5294 18.8307 13.4902 18.8362 13.4432 18.8429Z", fill: "#595959" }),
+    React__default.createElement("path", { d: "M2 12.5C2 13.328 2.672 14 3.5 14C4.328 14 5 13.328 5 12.5V3.5C5 2.672 4.328 2 3.5 2C2.672 2 2 2.672 2 3.5V12.5Z", fill: "#595959" })));
+
+const ArrowDown = (props) => (React__default.createElement("svg", Object.assign({ width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { d: "M1 1L5 5L9 1", stroke: "#595959", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const ArrowLeft = (props) => (React__default.createElement("svg", Object.assign({ width: "7", height: "10", viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { d: "M5.5 9L1.5 5L5.5 1", stroke: "#2D87F3", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const ArrowRight = (props) => (React__default.createElement("svg", Object.assign({ width: "7", height: "10", viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { d: "M1.5 9L5.5 5L1.5 1", stroke: "#2D87F3", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const ArrowUp = (props) => (React__default.createElement("svg", Object.assign({ width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { d: "M1 5L5 1L9 5", stroke: "#FC5D9A", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const ChevronRightActive = (props) => (React__default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { d: "M6 12L10 8L6 4", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const RotateLeft = (props) => (React__default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("g", { clipPath: "url(#clip0)" },
+        React__default.createElement("path", { d: "M0.666626 2.6665V6.6665H4.66663", stroke: "#737373", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__default.createElement("path", { d: "M2.33996 10.0001C2.77222 11.227 3.59152 12.2802 4.6744 13.001C5.75728 13.7218 7.04508 14.0712 8.34377 13.9964C9.64246 13.9217 10.8817 13.4269 11.8747 12.5866C12.8677 11.7464 13.5608 10.6061 13.8494 9.3377C14.1381 8.06929 14.0067 6.74143 13.475 5.55419C12.9434 4.36696 12.0403 3.38466 10.9018 2.7553C9.76339 2.12595 8.45123 1.88364 7.16308 2.06487C5.87493 2.24611 4.68057 2.84108 3.75996 3.76013L0.666626 6.6668", stroke: "#737373", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })),
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "clip0" },
+            React__default.createElement("rect", { width: "16", height: "16", fill: "white" })))));
+
+var _a, _b, _c, _d, _e, _f, _g;
+const SubotInlineButtonReaction = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 24px;
+  border: 1px solid ${theme.colors.neutral100 || '#E4E8EC'};
+  background-color: ${theme.colors.white || 'white'};
+  border-radius: 32px;
+  cursor: pointer;
+  transition: 0.25s all linear;
+  svg {
+    height: 16px;
+    margin-right: 3px;
+  }
+  &:hover {
+    background-color: ${theme.colors.neutral100};
+  }
+  &.active {
+    background-color: ${theme.colors.primaryActive};
+    color: ${theme.colors.white || '#fff'};
+    svg {
+      stroke: ${theme.colors.white || '#fff'};
+    }
+  }
+`;
+const SubotInlineButtonReview = styled.div `
+  padding: 12px 24px;
+  border: 1px solid ${theme.colors.neutral100 || '#E4E8EC'};
+  background-color: ${theme.colors.white || 'white'};
+  border-radius: 32px;
+  cursor: pointer;
+  transition: 0.25s all linear;
+  &.active {
+    background-color: ${(_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primaryActive};
+    color: ${theme.colors.white || '#fff'};
+    svg {
+      stroke: ${theme.colors.white || '#fff'};
+    }
+  }
+`;
+const SubotInlineActionText = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  border: 1px solid
+    ${({ active }) => active
+    ? theme.colors.primaryBase || '#2685F1'
+    : theme.colors.white || '#fff'};
+  background-color: ${theme.colors.white || '#fff'};
+  border-radius: ${theme.borderRadius};
+  cursor: pointer;
+  transition: 0.25s all linear;
+  .label {
+    flex: 1;
+  }
+  .icon {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
+    padding: 1px;
+    transition: 0.2s linear all;
+    .icon-checkbox {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      ${({ active }) => active && `opacity: 1`};
+      transition: 0.25s all linear;
+    }
+    &:before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 22px;
+      height: 22px;
+      border: 2px solid
+        ${({ active }) => active
+    ? theme.colors.primaryBase || '#2685F1'
+    : theme.colors.gray600 || '#595959'};
+      border-radius: 50%;
+      content: '';
+      transform: translate(-50%, -50%);
+      transition: 0.25s all linear;
+    }
+    &:after {
+      position: absolute;
+      z-index: -1;
+      top: 50%;
+      left: 50%;
+      width: 10px;
+      height: 10px;
+      background-color: ${theme.colors.primaryBase || '#2685F1'};
+      border-radius: 50%;
+      content: '';
+      opacity: 0;
+      ${({ active }) => active && `opacity: 1`};
+      transform: translate(-50%, -50%);
+      transition: 0.25s all linear;
+    }
+  }
+  &:hover {
+    border-color: ${((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primaryBase) || '#2685F1'};
+    .icon {
+      &:before {
+        border-color: ${((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primaryBase) || '#2685F1'};
+        transition: 0.2s linear all;
+      }
+    }
+  }
+  ${MediaQueries.tdDown} {
+    padding: 16px 20px;
+  }
+`;
+const SubotInlineActionImage = styled(SubotInlineActionText) `
+  position: relative;
+  flex-wrap: wrap;
+  padding: 16px;
+  background-color: ${((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.white) || '#fff'};
+  .image-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 67%;
+    border-radius: 10px;
+    .image {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      min-width: 100%;
+      height: auto;
+      min-height: 100%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .label {
+    margin-top: 16px;
+  }
+  .icon {
+    position: absolute;
+    top: 1.75rem;
+    right: 1.75rem;
+    &:before {
+      z-index: -1;
+      background-color: #fff;
+    }
+  }
+  ${MediaQueries.tdDown} {
+    padding: 12px;
+    .label {
+      margin-top: 12px;
+    }
+    .icon {
+      top: 1.3rem;
+      right: 1.3rem;
+    }
+  }
+  ${MediaQueries.tdDown} {
+    padding: 8px;
+    .label {
+      margin-top: 8px;
+    }
+    .icon {
+      top: 0.9rem;
+      right: 0.9rem;
+    }
+  }
+`;
+const SubotInlineActionRatingStartContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  ${MediaQueries.tdDown} {
+    justify-content: center;
+  }
+`;
+const SubotInlineActionRatingDescriptionContainer = styled.div `
+  textarea {
+    background-color: ${((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) || '#fff'};
+  }
+`;
+const SubotInlineActionPollResult = styled.div `
+  margin-top: 20px;
+  color: ${((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray500) || '#737373'};
+  font-weight: 600;
+`;
+const SubotInlineActionPollChoiceResult = styled.div `
+  position: relative;
+  z-index: 0;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  padding: 16px 20px;
+  border-radius: ${theme.borderRadius};
+  .number {
+    width: 32px;
+    margin-right: 14px;
+    font-weight: 600;
+  }
+  .content {
+    flex: 1;
+  }
+  .icon {
+    width: 16px;
+    margin-left: 8px;
+  }
+  &:before {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    right: ${({ percent }) => (percent ? `${100 - percent}%` : '100%')};
+    bottom: 0;
+    left: 0;
+    background-color: ${({ is_chosen }) => is_chosen
+    ? theme.colors.primary50 || '#E3F2FF'
+    : theme.colors.neutral100 || '#E4E8EC'};
+    content: '';
+    transition: 0.3s all linear;
+  }
+  &:after {
+    position: absolute;
+    z-index: -2;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: ${((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.white) || '#fff'};
+    content: '';
+  }
+  ${MediaQueries.mbDown} {
+    padding: 6px 16px;
+  }
+`;
+const SubotInlineActionItemContainer = styled.div `
+  width: ${({ width }) => width || '100%'};
+  padding: 4px;
+  &.item-image-container {
+    padding: 16px;
+    ${MediaQueries.tdDown} {
+      padding: 7.5px;
+    }
+    ${MediaQueries.mbDown} {
+      width: 50%;
+    }
+  }
+`;
+const SubotInlineActionListContainer = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  margin: -4px;
+
+  &.list-container {
+    margin: -16px;
+    ${MediaQueries.tdDown} {
+      margin: -7.5px;
+    }
+  }
+
+  &.review-container {
+    margin: -8px;
+    > div {
+      padding: 8px;
+    }
+  }
+`;
+
+const SubotInlineAction = ({ actions, value, onChange, htmlType, node_type, formSubmitMeta, }) => {
+    const className = useMemo(() => {
+        switch (node_type) {
+            case NodeType.IMAGE:
+            case NodeType.REACTION:
+                return 'list-container';
+            default:
+                return '';
+        }
+    }, [node_type]);
+    return (React__default.createElement(React__default.Fragment, null, actions && !!(actions === null || actions === void 0 ? void 0 : actions.length) && (React__default.createElement(SubotInlineActionListContainer, { className: className }, actions === null || actions === void 0 ? void 0 : actions.map((action) => {
+        const NodeAction = SubotInlineActionBase[action === null || action === void 0 ? void 0 : action.type];
+        return (NodeAction && (React__default.createElement(NodeAction, { key: action.id, action: action, onChange: onChange, active: value === null || value === void 0 ? void 0 : value.includes(action.id), htmlType: htmlType, formSubmitMeta: formSubmitMeta })));
+    })))));
+};
+
+const ButtonStyled = styled(Button$1) `
+  &:disabled {
+    background-color: rgb(242, 242, 242);
+    color: rgb(140, 140, 140);
+
+    &:hover {
+      border: 0;
+    }
+  }
+  svg {
+    path {
+      stroke: currentColor;
+    }
+  }
+`;
+const ButtonBackStyled = styled(ButtonStyled) `
+  &:disabled {
+    background-color: rgb(242, 242, 242);
+    color: rgb(140, 140, 140);
+    &:hover {
+      border: 0;
+    }
+  }
+  svg {
+    path {
+      stroke: currentColor;
+    }
+  }
+`;
+const SubotInlineFooterStyled = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 32px;
+  border-top: 4px solid ${theme.colors.neutral100 || '#E4E8EC'};
+  .mantine-Button-root {
+    + .mantine-Button-root {
+      margin-left: 8px;
+    }
+  }
+  ${MediaQueries.tdDown} {
+    padding: 12px 24px;
+  }
+  ${MediaQueries.mbDown} {
+    padding: 12px 16px;
+  }
+`;
+
+const SubotInlineActionTextChoice = ({ action, onChange, active, htmlType, formSubmitMeta, }) => {
+    const { trackingCommonInline } = useContext(SubotInlineContext);
+    const inputRef = useRef(null);
+    const [otherText, setOtherText] = useState('');
+    const isActionPollWithOther = (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.POLL_CHOICE_TEXT_BY_INPUT;
+    const isActionSelectWithOther = (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.USER_CHOICE_TEXT_BY_INPUT ||
+        isActionPollWithOther;
+    const onChangeTextArea = (evt) => {
+        setOtherText(evt.target.value);
+        if (isActionSelectWithOther) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(action, [
+                {
+                    key: KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD,
+                    control: ELEMENT_CONTROL_INPUT_TYPE[action === null || action === void 0 ? void 0 : action.type] || 'text',
+                    value: evt.target.value,
+                    action_id: action.id,
+                },
+            ]);
+        }
+    };
+    useEffect(() => {
+        var _a, _b;
+        if (active) {
+            setOtherText(((_a = formSubmitMeta === null || formSubmitMeta === void 0 ? void 0 : formSubmitMeta.find((f) => f.key === KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD)) === null || _a === void 0 ? void 0 : _a.value) || '');
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [active, formSubmitMeta]);
+    return (React__default.createElement(SubotInlineActionItemContainer, null,
+        React__default.createElement(SubotInlineActionText, Object.assign({ active: !!active, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(action), className: "pointer-event-child-none" }, trackingCommonInline, { "data-response-id": action === null || action === void 0 ? void 0 : action.id, "data-event-action": "Answer Click" }),
+            React__default.createElement("div", { className: "label" },
+                React__default.createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label)),
+            React__default.createElement("div", { className: "icon" }, htmlType === 'checkbox' && (React__default.createElement(CheckboxIcon, { className: "icon-checkbox", viewBox: "0 0 22 22" })))),
+        isActionSelectWithOther && active && (React__default.createElement(Box, { mt: "6px", style: { textAlign: 'right' } },
+            React__default.createElement(Textarea, { ref: inputRef, placeholder: action === null || action === void 0 ? void 0 : action.label, styles: {
+                    input: {
+                        paddingLeft: '24px',
+                        paddingRight: '24px',
+                        boxShadow: 'none',
+                        ':focus': { boxShadow: 'none' },
+                    },
+                }, value: otherText, onChange: onChangeTextArea, maxLength: 360 })))));
+};
+const SubotInlineActionImageChoice = ({ action, onChange, active, htmlType, }) => {
+    const { trackingCommonInline } = useContext(SubotInlineContext);
+    return (React__default.createElement(SubotInlineActionItemContainer, { width: "45%", className: 'item-image-container' },
+        React__default.createElement(SubotInlineActionImage, Object.assign({ onClick: () => onChange && onChange(action), active: !!active }, trackingCommonInline, { "data-response-id": action === null || action === void 0 ? void 0 : action.id, "data-event-action": "Answer Click" }),
+            React__default.createElement("div", { className: "image-container" },
+                React__default.createElement("img", { loading: "lazy", src: action === null || action === void 0 ? void 0 : action.url, alt: action === null || action === void 0 ? void 0 : action.label, className: "image" })),
+            (action === null || action === void 0 ? void 0 : action.label) && (React__default.createElement("div", { className: "label" },
+                React__default.createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))),
+            React__default.createElement("div", { className: "icon" }, htmlType === 'checkbox' && (React__default.createElement(CheckboxIcon, { className: "icon-checkbox", viewBox: "0 0 22 22" }))))));
+};
+const SubotInlineActionSSO = ({ action, onChange, }) => {
+    const { trackingCommonInline } = useContext(SubotInlineContext);
+    return (React__default.createElement(SubotInlineActionItemContainer, { width: "50%", style: { alignSelf: 'center' } },
+        React__default.createElement(ButtonStyled, Object.assign({ onClick: () => onChange && onChange(action), size: "lg", isBlock: true }, trackingCommonInline, { className: "pointer-event-child-none", "data-event-action": "Login Click", "data-response-id": action === null || action === void 0 ? void 0 : action.id }),
+            React__default.createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))));
+};
+const SubotInlinePollChoice = ({ active, action, onChange, htmlType, node_type, }) => {
+    const handleOnChange = (action) => {
+        if (action)
+            onChange &&
+                onChange({
+                    key: (action === null || action === void 0 ? void 0 : action.key) || '',
+                    control: ELEMENT_CONTROL_INPUT_TYPE[action === null || action === void 0 ? void 0 : action.type],
+                    value: '',
+                    action_id: action === null || action === void 0 ? void 0 : action.id,
+                });
+    };
+    if (node_type === NodeType.RESULT_POLL)
+        return (React__default.createElement(SubotInlineActionItemContainer, null,
+            React__default.createElement(SubotInlineActionPollChoiceResult, { percent: (action === null || action === void 0 ? void 0 : action.percent) || 0, is_chosen: action === null || action === void 0 ? void 0 : action.is_chosen },
+                React__default.createElement("div", { className: "number" }, action === null || action === void 0 ? void 0 :
+                    action.percent,
+                    "%"),
+                React__default.createElement("div", { className: "content" }, action === null || action === void 0 ? void 0 : action.label),
+                React__default.createElement("div", { className: "icon" }, (action === null || action === void 0 ? void 0 : action.is_chosen) && React__default.createElement(CheckIcon, { viewBox: "0 0 16 16" })))));
+    return (React__default.createElement(SubotInlineActionTextChoice, { active: !!active, action: action, onChange: handleOnChange, htmlType: htmlType }));
+};
+const SubotInlinePollChoiceImage = ({ active, action, onChange, htmlType, node_type, }) => {
+    const handleOnChange = (action) => {
+        if (action)
+            onChange &&
+                onChange({
+                    key: action === null || action === void 0 ? void 0 : action.key,
+                    control: ELEMENT_CONTROL_INPUT_TYPE[action === null || action === void 0 ? void 0 : action.type],
+                    value: '',
+                    action_id: action === null || action === void 0 ? void 0 : action.id,
+                });
+    };
+    if (node_type === NodeType.RESULT_POLL)
+        // TODO: Update layout result poll image
+        return (React__default.createElement(SubotInlineActionItemContainer, null,
+            React__default.createElement(SubotInlineActionPollChoiceResult, { percent: (action === null || action === void 0 ? void 0 : action.percent) || 0, is_chosen: action === null || action === void 0 ? void 0 : action.is_chosen },
+                React__default.createElement("div", { className: "number" }, action === null || action === void 0 ? void 0 :
+                    action.percent,
+                    "%"),
+                React__default.createElement("div", { className: "content" }, action === null || action === void 0 ? void 0 : action.label),
+                React__default.createElement("div", { className: "icon" }, (action === null || action === void 0 ? void 0 : action.is_chosen) && React__default.createElement(CheckIcon, { viewBox: "0 0 16 16" })))));
+    return (React__default.createElement(SubotInlineActionImageChoice, { active: !!active, action: action, onChange: handleOnChange, htmlType: htmlType }));
+};
+const SubotInlineRatingStar = ({ action, value, onChange, }) => {
+    var _a, _b;
+    return (React__default.createElement(SubotInlineActionItemContainer, null,
+        React__default.createElement(SubotInlineActionRatingStartContainer, null,
+            React__default.createElement(StarRatings, { rating: value && typeof value !== 'string' && (value === null || value === void 0 ? void 0 : value.value)
+                    ? parseInt(value === null || value === void 0 ? void 0 : value.value)
+                    : 0, changeRating: (star) => {
+                    const _value = {
+                        key: action === null || action === void 0 ? void 0 : action.key,
+                        control: ELEMENT_CONTROL_INPUT_TYPE[action === null || action === void 0 ? void 0 : action.type],
+                        value: star.toString(),
+                        action_id: action === null || action === void 0 ? void 0 : action.id,
+                    };
+                    onChange && onChange(_value);
+                }, starHoverColor: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.yellow600, starRatedColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.yellow600, starDimension: "48" }))));
+};
+const SubotInlineTextArea = ({ action, value, onChange, }) => {
+    return (React__default.createElement(SubotInlineActionItemContainer, null,
+        React__default.createElement(SubotInlineActionRatingDescriptionContainer, null,
+            React__default.createElement(TextArea, { placeholder: action === null || action === void 0 ? void 0 : action.label, value: value && typeof value !== 'string' && (value === null || value === void 0 ? void 0 : value.value)
+                    ? value === null || value === void 0 ? void 0 : value.value
+                    : '', onChange: (evt) => {
+                    const _value = {
+                        key: action === null || action === void 0 ? void 0 : action.key,
+                        control: ELEMENT_CONTROL_INPUT_TYPE[action === null || action === void 0 ? void 0 : action.type],
+                        value: evt.target.value,
+                        action_id: action === null || action === void 0 ? void 0 : action.id,
+                    };
+                    onChange && onChange(_value);
+                } }))));
+};
+const SubotInlineLikeChoice = ({ action, active, onChange, }) => {
+    return (React__default.createElement(SubotInlineActionItemContainer, { width: "40%", className: 'item-image-container' },
+        React__default.createElement(SubotInlineButtonReaction, { className: classNames(!!active && 'active'), onClick: () => onChange && onChange(action) },
+            React__default.createElement(LikeIcon, { viewBox: "0 0 24 24" }),
+            React__default.createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))));
+};
+const SubotInlineDislikeChoice = ({ action, active, onChange, }) => {
+    return (React__default.createElement(SubotInlineActionItemContainer, { width: "40%", className: 'item-image-container' },
+        React__default.createElement(SubotInlineButtonReaction, { className: classNames(!!active && 'active'), onClick: () => onChange && onChange(action) },
+            React__default.createElement(DislikeIcon, { viewBox: "0 0 24 24" }),
+            React__default.createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))));
+};
+const SubotInlineReviewChoice = ({ active, action, onChange, }) => (React__default.createElement(SubotInlineActionItemContainer, { width: "auto", className: "review-choice" },
+    React__default.createElement(SubotInlineButtonReview, { className: classNames(!!active && 'active'), onClick: () => onChange &&
+            onChange({
+                key: action === null || action === void 0 ? void 0 : action.key,
+                control: ELEMENT_CONTROL_INPUT_TYPE[action === null || action === void 0 ? void 0 : action.type],
+                value: '',
+                action_id: action === null || action === void 0 ? void 0 : action.id,
+            }) },
+        React__default.createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))));
+const SubotInlinePollResult = ({ action, }) => (React__default.createElement(SubotInlineActionItemContainer, null,
+    React__default.createElement(SubotInlineActionPollResult, null, action === null || action === void 0 ? void 0 : action.label)));
+const SubotInlineActionBase = {
+    'user-image': SubotInlineActionImageChoice,
+    [NodeActionType.USER_CHOICE_TEXT]: SubotInlineActionTextChoice,
+    [NodeActionType.USER_CHOICE_TEXT_BY_INPUT]: SubotInlineActionTextChoice,
+    [NodeActionType.USER_CHOICE_IMAGE]: SubotInlineActionImageChoice,
+    [NodeActionType.ACTION_SSO_REDIRECT]: SubotInlineActionSSO,
+    [NodeActionType.POLL_CHOICE]: SubotInlinePollChoice,
+    [NodeActionType.POLL_CHOICE_TEXT_BY_INPUT]: SubotInlineActionTextChoice,
+    [NodeActionType.POLL_CHOICE_IMAGE]: SubotInlinePollChoiceImage,
+    [NodeActionType.RATING_STAR]: SubotInlineRatingStar,
+    [NodeActionType.RATING_DESCRIPTION]: SubotInlineTextArea,
+    [NodeActionType.LIKE_CHOICE]: SubotInlineLikeChoice,
+    [NodeActionType.DISLIKE_CHOICE]: SubotInlineDislikeChoice,
+    [NodeActionType.REVIEW_CHOICE]: SubotInlineReviewChoice,
+    [NodeActionType.REVIEW_DESCRIPTION]: SubotInlineTextArea,
+    [NodeActionType.RESULT_BUTTON]: SubotInlineActionTextChoice,
+    [NodeActionType.POLL_RESULT]: SubotInlinePollResult,
+};
+
+const SubotInlineFooter = ({ onBack, onNext: onSubmit, hideBack, hideNext, nextText, backProps, nextProps, }) => {
+    var _a, _b, _c;
+    const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
+    const { nodes: listNodes, activeId, params, onNext, trackingCommonInline, } = useContext(SubotInlineContext);
+    const nodeMessage = listNodes.find((nodeItem) => nodeItem.id == activeId);
+    const actionNextChoice = (_a = nodeMessage === null || nodeMessage === void 0 ? void 0 : nodeMessage.actions) === null || _a === void 0 ? void 0 : _a.find((act) => act.type === NodeActionType.USER_CHOICE_NEXT);
+    const handleNextChoice = () => {
+        if (nodeMessage && actionNextChoice) {
+            const nextValue = {
+                node_id: nodeMessage.id,
+                action_id: actionNextChoice === null || actionNextChoice === void 0 ? void 0 : actionNextChoice.id,
+                action_value: actionNextChoice === null || actionNextChoice === void 0 ? void 0 : actionNextChoice.key,
+            };
+            onNext === null || onNext === void 0 ? void 0 : onNext(Object.assign(Object.assign(Object.assign({}, params), nextValue), nodeMessage._message));
+        }
+    };
+    const actionSubmitMultiple = (_b = nodeMessage === null || nodeMessage === void 0 ? void 0 : nodeMessage.actions) === null || _b === void 0 ? void 0 : _b.find((act) => act.type === NodeActionType.ACTION_MULTIPLE_BUTTON);
+    return (React__default.createElement(SubotInlineFooterStyled, null,
+        !hideBack && (React__default.createElement(ButtonBackStyled, Object.assign({ size: "md", color: "secondary", onClick: onBack }, backProps, { className: classNames('pointer-event-child-none', backProps === null || backProps === void 0 ? void 0 : backProps.className) }, trackingCommonInline, { "data-event-action": "Back Click" }),
+            React__default.createElement(ArrowLeft, { style: { marginRight: 10 } }),
+            f({
+                id: 'riskScreener.back',
+                defaultMessage: 'Back',
+            }))),
+        !hideNext && (React__default.createElement(ButtonStyled, Object.assign({ size: "md", color: "primary", onClick: actionNextChoice ? handleNextChoice : onSubmit }, nextProps, { className: classNames('pointer-event-child-none', nextProps === null || nextProps === void 0 ? void 0 : nextProps.className) }, trackingCommonInline, { "data-event-action": "Answer Click", "data-response-id": (actionSubmitMultiple === null || actionSubmitMultiple === void 0 ? void 0 : actionSubmitMultiple.id) ||
+                (actionNextChoice === null || actionNextChoice === void 0 ? void 0 : actionNextChoice.id) ||
+                ((_c = nodeMessage === null || nodeMessage === void 0 ? void 0 : nodeMessage._message) === null || _c === void 0 ? void 0 : _c.action_id) }),
+            !nextText
+                ? f({
+                    id: 'riskScreener.next',
+                    defaultMessage: 'Next',
+                })
+                : nextText,
+            React__default.createElement(ArrowRight, { style: { marginLeft: 10 } })))));
+};
+var SubotInlineFooter$1 = memo(SubotInlineFooter);
+
+const SubotInlineHeadline = styled.h4 `
+  padding: 32px 0px 12px;
+  border-bottom: 1px solid ${theme.colors.neutral100 || '#E4E8EC'};
+  margin: 0px 32px;
+  color: ${theme.colors.gray500 || '#737373'};
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
+  ${MediaQueries.tdDown} {
+    padding: 24px 0px 12px;
+    margin: 0px 24px;
+  }
+  ${MediaQueries.mbDown} {
+    padding: 16px 0px 12px;
+    margin: 0px 16px;
+  }
+`;
+const SubotInlineHeader = () => {
+    const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
+    const { nodes } = useContext(SubotInlineContext);
+    const headline = useMemo(() => { var _a; return (_a = nodes[0]) === null || _a === void 0 ? void 0 : _a.inline_headline; }, [nodes]);
+    return (React__default.createElement(SubotInlineHeadline, null, headline ||
+        f({
+            id: 'subotInline.quote',
+            defaultMessage: 'HAVE TIME FOR A QUICK QUESTION?',
+        })));
+};
+var SubotInlineHeader$1 = memo(SubotInlineHeader);
+
+const SubotInlineIntentTitle = styled.h3 `
+  margin-bottom: 0px;
+  font-size: 22px;
+  font-weight: bold;
+  line-height: 1.45;
+  ${MediaQueries.tdDown} {
+    font-size: 20px;
+  }
+`;
+const SubotInlineRecalculateButton = styled(Button$1) `
+  &.bot-recalculate {
+    svg {
+      path {
+        stroke: ${theme.colors.primaryBase || '#2685F1'} !important;
+      }
+    }
+    &:hover {
+      svg {
+        path {
+          stroke: #fff !important;
+        }
+      }
+    }
+  }
+`;
+const SubotInlineIntentButton = styled(Button$1) `
+  border: 2px solid transparent;
+`;
+const SubotInlineItemIcon = styled.div `
+  display: flex;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  .icon {
+    width: 64px;
+    height: 64px;
+    margin-right: 16px;
+    object-fit: contain;
+    object-position: center;
+  }
+  .content {
+    flex: 1;
+    .title {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: inherit;
+      font-weight: 700;
+      line-height: 1.4;
+    }
+    .description {
+      color: ${theme.colors.gray700 || '#404040'};
+      line-height: 1.4;
+    }
+  }
+  ${MediaQueries.mbDown} {
+    .icon {
+      width: 47px;
+      height: 47px;
+      margin-right: 16px;
+    }
+    .content {
+      .title {
+        font-size: 14px;
+      }
+      .description {
+        font-size: 14px;
+      }
+    }
+  }
+`;
+styled(Button$1) ``;
+const SubotInlineIntentFirstTextWrapper = styled.div `
+  display: flex;
+  align-items: flex-start;
+  color: ${theme.colors.gray800 || '#262626'};
+  font-size: 22px;
+  font-weight: 700;
+  letter-space: -0.6px;
+  line-height: 1.45;
+  .number {
+    margin-right: 3px;
+  }
+  .title {
+    flex: 1;
+  }
+  ${MediaQueries.tdDown} {
+    font-size: 20px;
+  }
+  ${MediaQueries.mbDown} {
+    font-size: 18px;
+  }
+`;
+const SubotInlineIntentFirstImageWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+`;
+const SubotInlineIntentFirstTextContainer = styled.div ``;
+const SubotInlineIntentTextContainer = styled.div `
+  padding: 12px 16px;
+  border: 1px solid ${theme.colors.gray200 || '#D9D9D9'};
+  background-color: ${theme.colors.white || '#fff'};
+  border-radius: ${theme.borderRadius};
+  line-height: 1.5;
+`;
+const SubotInlineIntentImageContainer = styled.div `
+  border: ${theme.colors.gray200 || '#D9D9D9'};
+  background-color: ${theme.colors.white || '#FFF'};
+  border-radius: ${theme.borderRadius};
+  .intent-img {
+    border-radius: ${theme.borderRadius};
+    &.has-label {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+  }
+  .intent-img-label {
+    padding: 5px 10px;
+    font-size: 0.8em;
+    font-style: italic;
+    font-weight: 400;
+  }
+`;
+const SubotInlineIntentUrlContainer = styled.div `
+  display: flex;
+  .feature {
+    width: 30%;
+    .feature-wrapper {
+      position: relative;
+      display: block;
+      overflow: hidden;
+      width: 100%;
+      padding-top: 66%;
+      border-radius: ${theme.borderRadius};
+      .feature-img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        min-width: 100%;
+        height: auto;
+        min-height: 100%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+  .body {
+    flex: 1;
+    margin-left: 10px;
+    line-height: 1.5;
+    a {
+      color: ${theme.colors.gray800 || '#262626'};
+      text-decoration: none;
+    }
+  }
+`;
+const SubotInlineIntentRiskScreenerContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 40px 20px 16px;
+  background-color: #fff;
+  border-radius: ${theme.borderRadius};
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06),
+    0px 0px 1px rgba(0, 0, 0, 0.04);
+  .feature {
+    display: block;
+    overflow: hidden;
+    width: 72px;
+    height: 72px;
+    margin-right: 16px;
+    border-radius: ${theme.borderRadius};
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+  .title-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    a {
+      font-size: 16px;
+      line-height: 1.5em;
+      text-decoration: none;
+      .title {
+        padding: 0;
+        color: #262626;
+        font-size: inherit;
+        line-height: inherit;
+      }
+      &.link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 20px;
+        color: #2d87f3;
+        font-weight: 700;
+      }
+    }
+  }
+  @media screen and (max-width: 769px) {
+    padding: 16px 12px;
+    .feature {
+      width: 50px;
+      height: 50px;
+    }
+    .title-container {
+      a {
+        font-size: 13px;
+        line-height: 20px;
+        &.link {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+`;
+const SubotInlineIntentFinalButtonContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+styled.div `
+  padding: 16px;
+  margin-top: 32px;
+  margin-bottom: 32px;
+  background-color: ${theme.colors.primary50 || ''};
+  border-radius: ${theme.borderRadius};
+  .item-grid {
+    > div {
+      box-shadow: none;
+    }
+  }
+  .lp--affiliate-product {
+    .arrow-left {
+      left: -20px;
+    }
+    .arrow-right {
+      right: -16px;
+    }
+  }
+  .bullet-nav {
+    bottom: -10px;
+  }
+`;
+const SubotInlineIntentFinalCol = styled.div `
+  width: ${({ width }) => width || '100%'};
+  padding: 8px;
+  ${MediaQueries.mbDown} {
+    width: 100%;
+  }
+`;
+const SubotInlineIntentFinalRow = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 -8px;
+`;
+const SubotInlineIntentCol = styled.div `
+  width: ${({ width }) => width || '100%'};
+  padding: 4px;
+  ${MediaQueries.mbDown} {
+    width: 100%;
+  }
+`;
+const SubotInlineIntentRow = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 -4px;
+`;
+const SubotInlineIntentList = styled.div `
+  margin-top: 20px;
+`;
+
+const SubotInlineIntent = ({ intents, indexNumber, }) => {
+    var _a, _b;
+    const title = useMemo(() => {
+        const _title = intents && intents[0];
+        if (_title)
+            return _title;
+        return null;
+    }, []);
+    if (!intents.length)
+        return React__default.createElement(SubotInlineIntentBotTitle, { indexNumber: indexNumber });
+    return (React__default.createElement(React__default.Fragment, null,
+        title && (React__default.createElement(SubotInlineIntentBotTitle, { intent: title, indexNumber: indexNumber })),
+        !!((_a = intents.slice(1)) === null || _a === void 0 ? void 0 : _a.length) && (React__default.createElement(SubotInlineIntentList, null,
+            React__default.createElement(SubotInlineIntentRow, null, (_b = intents.slice(1)) === null || _b === void 0 ? void 0 : _b.map((intent) => {
+                const NodeIntent = SubotInlineIntentBase[intent === null || intent === void 0 ? void 0 : intent.type];
+                return (NodeIntent && React__default.createElement(NodeIntent, { key: intent.id, intent: intent }));
+            }))))));
+};
+
+const SubotInlineIntentFinal = ({ intents: intentsProps, }) => {
+    const intents = useMemo(() => {
+        const mainIntents = [];
+        const subIntents = [];
+        const rest = [];
+        intentsProps === null || intentsProps === void 0 ? void 0 : intentsProps.map((intent) => {
+            switch (intent === null || intent === void 0 ? void 0 : intent.type) {
+                case NodeIntentType.BOT_MAIN_IMAGE:
+                    mainIntents.push(intent);
+                    break;
+                case NodeIntentType.BOT_MAIN_TITLE:
+                    mainIntents.push(intent);
+                    break;
+                case NodeIntentType.BOT_MAIN_BODY:
+                    mainIntents.push(intent);
+                    break;
+                case NodeIntentType.BOT_MAIN_BUTTON:
+                    mainIntents.push(intent);
+                    break;
+                case NodeIntentType.BOT_RECALCULATE:
+                    mainIntents.push(intent);
+                    break;
+                case NodeIntentType.BOT_SUB_TITLE:
+                    subIntents.push(intent);
+                    break;
+                case NodeIntentType.BOT_SUB_BODY:
+                    subIntents.push(intent);
+                    break;
+                default:
+                    rest.push(intent);
+                    break;
+            }
+        });
+        return {
+            mainIntents,
+            subIntents,
+            intents: rest,
+        };
+    }, []);
+    if (!(intentsProps === null || intentsProps === void 0 ? void 0 : intentsProps.length)) {
+        return null;
+    }
+    function renderIntent(intent) {
+        const NodeIntent = SubotInlineIntentBase[intent === null || intent === void 0 ? void 0 : intent.type];
+        if (!NodeIntent) {
+            return null;
+        }
+        return React__default.createElement(NodeIntent, { key: intent.id, intent: intent });
+    }
+    return (React__default.createElement(SubotInlineIntentRow, null,
+        React__default.createElement(SubotInlineIntentCol, null,
+            React__default.createElement(SubotInlineIntentFinalRow, null,
+                intents.mainIntents.map(renderIntent),
+                intents.subIntents.map(renderIntent),
+                intents.intents.map(renderIntent)))));
+};
+
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-text' ************************/
+//#region
+const SubotInlineIntentBotText = ({ intent, }) => {
+    if (!(intent === null || intent === void 0 ? void 0 : intent.label))
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentCol, null,
+        React__default.createElement(SubotInlineIntentTextContainer, null,
+            React__default.createElement(Markdown, null, intent === null || intent === void 0 ? void 0 : intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-text' ******************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-image' ***********************/
+//#region
+const SubotInlineIntentBotImage = ({ intent, }) => {
+    if (!intent.url)
+        return React__default.createElement(React__default.Fragment, null);
+    const isObject = (() => {
+        try {
+            return Boolean(JSON.parse((intent === null || intent === void 0 ? void 0 : intent.label) || ''));
+        }
+        catch (err) {
+            return false;
+        }
+    })();
+    return (React__default.createElement(SubotInlineIntentCol, { width: "50%" },
+        React__default.createElement(SubotInlineIntentImageContainer, null,
+            React__default.createElement("img", { loading: "lazy", src: intent.url, alt: intent.label, className: `intent-img ${intent.label && 'has-label'}` }),
+            isObject && (React__default.createElement("h4", { className: "intent-img-label" },
+                React__default.createElement(Markdown, null, intent.label))))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-image' *****************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-button' **********************/
+//#region
+const SubotInlineIntentBotButton = ({ intent, }) => {
+    const { trackingCommonInline } = useContext(SubotInlineContext);
+    const handleOnClick = () => {
+        window.location.href = intent.url;
+    };
+    if (!(intent === null || intent === void 0 ? void 0 : intent.label))
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentCol, { width: "60%" },
+        React__default.createElement(SubotInlineIntentButton, Object.assign({ size: "lg", color: "primary", onClick: handleOnClick, isBlock: true }, trackingCommonInline, { "data-event-action": "Click CTA", "data-response-id": intent.id }),
+            React__default.createElement(Markdown, null, intent === null || intent === void 0 ? void 0 : intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-button' ****************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-url' *************************/
+//#region
+const SubotInlineIntentUrl = ({ intent, }) => {
+    const article = useMemo(() => intent.label.includes('{')
+        ? JSON.parse(intent.label)
+        : {}, [intent.label]);
+    return (React__default.createElement(React__default.Fragment, null, !!Object.keys(article).length && (React__default.createElement(SubotInlineIntentCol, null,
+        React__default.createElement(SubotInlineIntentUrlContainer, null,
+            React__default.createElement("div", { className: "feature" },
+                React__default.createElement("a", { href: article === null || article === void 0 ? void 0 : article.url, className: "feature-wrapper" },
+                    React__default.createElement("img", { loading: "lazy", src: article === null || article === void 0 ? void 0 : article.thumbnail, alt: article === null || article === void 0 ? void 0 : article.title, className: "feature-img" }))),
+            React__default.createElement("div", { className: "body" },
+                React__default.createElement("a", { href: article === null || article === void 0 ? void 0 : article.url },
+                    React__default.createElement("h5", { className: "title" },
+                        React__default.createElement(Markdown, null, article === null || article === void 0 ? void 0 : article.title)))))))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-url' *******************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'sso-intent' *************************/
+//#region
+const SubotInlineIntentSSO = ({ intent, }) => {
+    const info = (() => {
+        try {
+            return (intent === null || intent === void 0 ? void 0 : intent.label) ? JSON.parse(intent === null || intent === void 0 ? void 0 : intent.label) : {};
+        }
+        catch (err) {
+            return {};
+        }
+    })();
+    if (!info || !info.title)
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentCol, null,
+        React__default.createElement(SubotInlineItemIcon, null,
+            React__default.createElement("img", { loading: "lazy", src: intent === null || intent === void 0 ? void 0 : intent.url, className: "icon", alt: "" }),
+            React__default.createElement("div", { className: "content" },
+                React__default.createElement("h3", { className: "title" }, info.title),
+                React__default.createElement("div", { className: "description" }, info === null || info === void 0 ? void 0 : info.description)))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'sso-intent' *******************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-title' ***********************/
+//#region
+const SubotInlineIntentBotTitle = ({ intent, indexNumber, }) => {
+    const isShowLabel = ![NodeIntentType.SSO_INTENT].includes(intent === null || intent === void 0 ? void 0 : intent.type);
+    return (React__default.createElement(SubotInlineIntentFirstTextContainer, null,
+        React__default.createElement(SubotInlineIntentFirstTextWrapper, null,
+            indexNumber && (React__default.createElement("div", { className: "number" },
+                indexNumber < 10 ? `0${indexNumber}` : indexNumber,
+                ".")),
+            isShowLabel &&
+                intent &&
+                [NodeIntentType.BOT_TEXT, NodeIntentType.BOT_BUTTON].includes(intent === null || intent === void 0 ? void 0 : intent.type) && React__default.createElement(Markdown, { className: "title" }, intent.label)),
+        intent &&
+            [NodeIntentType.BOT_IMAGE].includes(intent === null || intent === void 0 ? void 0 : intent.type) && (React__default.createElement(SubotInlineIntentFirstImageWrapper, null,
+            React__default.createElement(SubotInlineIntentBotImage, { intent: intent })))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-title' *****************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-main-title' ******************/
+//#region
+const SubotInlineIntentBotMainTitle = ({ intent, }) => {
+    if (!intent.label ||
+        intent.label === 'Sub title' ||
+        intent.label === 'Main title') {
+        return null;
+    }
+    return (React__default.createElement(SubotInlineIntentFinalCol, null,
+        React__default.createElement(SubotInlineIntentTitle, null,
+            React__default.createElement(Markdown, null, intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-main-title' ************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-main-image' ******************/
+//#region
+const SubotInlineIntentBotMainImage = ({ intent, }) => {
+    if (!intent.url)
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentFinalCol, null,
+        React__default.createElement(SubotInlineIntentImageContainer, null,
+            React__default.createElement("img", { loading: "lazy", src: intent.url, alt: intent.label, className: `intent-img ${intent.label && 'has-label'}` }),
+            intent.label && (React__default.createElement("h4", { className: "intent-img-label" },
+                React__default.createElement(Markdown, null, intent.label))))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-main-image' ************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-main-body' ******************/
+//#region
+const SubotInlineIntentBotMainBody = ({ intent, }) => {
+    if (!intent.label ||
+        intent.label === 'Main body' ||
+        intent.label === 'Sub body') {
+        return null;
+    }
+    return (React__default.createElement(SubotInlineIntentFinalCol, null,
+        React__default.createElement("div", { className: "intents__item markdown" },
+            React__default.createElement(Markdown, null, intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-main-body' ************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-main-button' *****************/
+//#region
+const SubotInlineIntentBotMainButton = ({ intent, }) => {
+    const { trackingCommonInline } = useContext(SubotInlineContext);
+    const handleOnClick = () => {
+        window.location.href = intent.url;
+    };
+    if (!intent.label)
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentCol, { width: "auto" },
+        React__default.createElement(SubotInlineIntentFinalButtonContainer, null,
+            React__default.createElement(SubotInlineIntentButton, Object.assign({ size: "lg", color: "primary", onClick: handleOnClick, className: "pointer-event-child-none" }, trackingCommonInline, { "data-event-action": "Click CTA", "data-response-id": intent.id }),
+                React__default.createElement(Markdown, null, intent === null || intent === void 0 ? void 0 : intent.label)))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-main-button' ***********/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-recalculate' *****************/
+//#region
+const SubotInlineIntentBotRecalculate = ({ intent }) => {
+    const { onReset } = useContext(SubotInlineContext);
+    const handleOnClick = () => {
+        onReset && onReset();
+    };
+    if (!(intent === null || intent === void 0 ? void 0 : intent.label))
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentCol, { width: "auto", style: { justifyContent: 'center', display: 'flex' } },
+        React__default.createElement(SubotInlineRecalculateButton, { size: "lg", color: "secondary", onClick: handleOnClick, icon: React__default.createElement(RotateLeft, null), className: "bot-recalculate" },
+            React__default.createElement(Markdown, null, intent === null || intent === void 0 ? void 0 : intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-recalculate' ***********/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-risk-screener' ***************/
+//#region
+const SubotInlineIntentBotRiskScreener = ({ intent }) => {
+    const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
+    const article = useMemo(() => {
+        if (intent.label && intent.label.includes('{')) {
+            return JSON.parse(intent.label);
+        }
+        return {};
+    }, [intent, intent === null || intent === void 0 ? void 0 : intent.label]);
+    return (React__default.createElement(React__default.Fragment, null, !!(article === null || article === void 0 ? void 0 : article.title) && !!(article === null || article === void 0 ? void 0 : article.thumbnail) && !!(article === null || article === void 0 ? void 0 : article.url) && (React__default.createElement(SubotInlineIntentFinalCol, null,
+        React__default.createElement(SubotInlineIntentRiskScreenerContainer, null,
+            React__default.createElement("a", { href: article === null || article === void 0 ? void 0 : article.url, className: "feature" },
+                React__default.createElement("img", { loading: "lazy", src: article === null || article === void 0 ? void 0 : article.thumbnail, alt: article === null || article === void 0 ? void 0 : article.title })),
+            React__default.createElement("div", { className: "title-container" },
+                React__default.createElement("a", { href: article === null || article === void 0 ? void 0 : article.url },
+                    React__default.createElement("h5", { className: "title" }, article === null || article === void 0 ? void 0 : article.title)),
+                React__default.createElement("a", { href: article === null || article === void 0 ? void 0 : article.url, className: "link" },
+                    f({
+                        id: 'riskScreener.start',
+                        defaultMessage: 'Start',
+                    }),
+                    React__default.createElement(ChevronRightActive, { style: { marginLeft: 10 } }))))))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-risk-screener' *********/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-related-article' *************/
+//#region
+const SubotInlineIntentBotRelatedArticle = ({ intent }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const article = useMemo(() => {
+        if (intent.label && intent.label.includes('{')) {
+            const _article = JSON.parse(intent.label);
+            if (_article.meta) {
+                const tmp = {};
+                _article.meta.map(({ key, value }) => {
+                    if (key && value)
+                        tmp[key] = value;
+                });
+                _article.meta = Object.assign({}, tmp);
+            }
+            return Object.assign({}, _article);
+        }
+        return {};
+    }, [intent, intent === null || intent === void 0 ? void 0 : intent.label]);
+    return (React__default.createElement(React__default.Fragment, null, !!(article === null || article === void 0 ? void 0 : article.title) &&
+        !!(article === null || article === void 0 ? void 0 : article.thumbnail) &&
+        !!(article === null || article === void 0 ? void 0 : article.url) &&
+        !!(article === null || article === void 0 ? void 0 : article.meta) &&
+        !!((_a = article === null || article === void 0 ? void 0 : article.meta) === null || _a === void 0 ? void 0 : _a.post_modified) &&
+        !!((_b = article === null || article === void 0 ? void 0 : article.meta) === null || _b === void 0 ? void 0 : _b.reviewed_display_name) &&
+        !!((_c = article === null || article === void 0 ? void 0 : article.meta) === null || _c === void 0 ? void 0 : _c.reviewed_url) &&
+        !!((_d = article === null || article === void 0 ? void 0 : article.meta) === null || _d === void 0 ? void 0 : _d.reviewed_avatar_thumbnail) &&
+        !!((_e = article === null || article === void 0 ? void 0 : article.meta) === null || _e === void 0 ? void 0 : _e.category_url) &&
+        !!((_f = article === null || article === void 0 ? void 0 : article.meta) === null || _f === void 0 ? void 0 : _f.category_name) && (React__default.createElement(SubotInlineIntentFinalCol, { width: "40%" },
+        React__default.createElement(ArticleCard, { title: article === null || article === void 0 ? void 0 : article.title, uploadTime: dayjs((_g = article === null || article === void 0 ? void 0 : article.meta) === null || _g === void 0 ? void 0 : _g.post_modified).format('DD/MM/YYYY'), authorName: (_h = article === null || article === void 0 ? void 0 : article.meta) === null || _h === void 0 ? void 0 : _h.reviewed_display_name, authorLink: (_j = article === null || article === void 0 ? void 0 : article.meta) === null || _j === void 0 ? void 0 : _j.reviewed_url, avatarImg: React__default.createElement("img", { loading: "lazy", src: (_k = article === null || article === void 0 ? void 0 : article.meta) === null || _k === void 0 ? void 0 : _k.reviewed_avatar_thumbnail, alt: (_l = article === null || article === void 0 ? void 0 : article.meta) === null || _l === void 0 ? void 0 : _l.reviewed_display_name }), categoryLink: (_m = article === null || article === void 0 ? void 0 : article.meta) === null || _m === void 0 ? void 0 : _m.category_url, categoryName: (_o = article === null || article === void 0 ? void 0 : article.meta) === null || _o === void 0 ? void 0 : _o.category_name, banner: React__default.createElement("img", { loading: "lazy", src: article === null || article === void 0 ? void 0 : article.thumbnail, alt: article === null || article === void 0 ? void 0 : article.title }), text: "", size: "sm", direction: "vertical" })))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-related-article' *******/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'thank-you-image' *****************/
+//#region
+const SubotInlineIntentThankYouImage = ({ intent, }) => {
+    if (!intent.url)
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentFinalCol, null,
+        React__default.createElement(SubotInlineIntentImageContainer, null,
+            React__default.createElement("img", { loading: "lazy", src: intent.url, alt: intent.label, className: `intent-img ${intent.label && 'has-label'}` }),
+            intent.label && (React__default.createElement("h4", { className: "intent-img-label" },
+                React__default.createElement(Markdown, null, intent.label))))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'thank-you-image' ***********/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'thank-you-title' *****************/
+//#region
+const SubotInlineIntentThankYouTitle = ({ intent, }) => {
+    if (!intent.label)
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentFinalCol, null,
+        React__default.createElement(SubotInlineIntentTitle, null,
+            React__default.createElement(Markdown, null, intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'thank-you-title' ***********/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'thank-you-body' ******************/
+//#region
+const SubotInlineIntentThankYouBody = ({ intent, }) => {
+    if (!intent.label)
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement(SubotInlineIntentFinalCol, null,
+        React__default.createElement("div", { className: "intents__item markdown" },
+            React__default.createElement(Markdown, null, intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'thank-you-body' ************/
+/*******************************************************************************/
+const SubotInlineIntentBase = {
+    [NodeIntentType.BOT_TEXT]: SubotInlineIntentBotText,
+    [NodeIntentType.BOT_IMAGE]: SubotInlineIntentBotImage,
+    [NodeIntentType.BOT_BUTTON]: SubotInlineIntentBotButton,
+    [NodeIntentType.BOT_URL]: SubotInlineIntentUrl,
+    [NodeIntentType.BOT_RECALCULATE]: SubotInlineIntentBotRecalculate,
+    [NodeIntentType.BOT_MAIN_TITLE]: SubotInlineIntentBotMainTitle,
+    [NodeIntentType.BOT_MAIN_IMAGE]: SubotInlineIntentBotMainImage,
+    [NodeIntentType.BOT_MAIN_BODY]: SubotInlineIntentBotMainBody,
+    [NodeIntentType.BOT_MAIN_BUTTON]: SubotInlineIntentBotMainButton,
+    [NodeIntentType.BOT_SUB_TITLE]: SubotInlineIntentBotMainTitle,
+    [NodeIntentType.BOT_SUB_BODY]: SubotInlineIntentBotMainBody,
+    [NodeIntentType.BOT_LANDING_PAGE_URL]: SubotInlineIntentBotText,
+    [NodeIntentType.BOT_LANDING_PAGE_BUTTON]: SubotInlineIntentBotText,
+    [NodeIntentType.BOT_RISK_SCREEN]: SubotInlineIntentBotRiskScreener,
+    [NodeIntentType.BOT_RELATED_ARTICLE]: SubotInlineIntentBotRelatedArticle,
+    [NodeIntentType.THANK_YOU_IMAGE]: SubotInlineIntentThankYouImage,
+    [NodeIntentType.THANK_YOU_TITLE]: SubotInlineIntentThankYouTitle,
+    [NodeIntentType.THANK_YOU_BODY]: SubotInlineIntentThankYouBody,
+    /** intents fake for sso block */
+    [NodeIntentType.SSO_INTENT]: SubotInlineIntentSSO,
+};
+
+/***************** type: TEXT, IMAGE ***************/
+const SubotInlineNode = ({ node, indexNumber, }) => {
+    const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const { params, onChange, onSubmit, onPrev, onNext, nodes, activeId } = useContext(SubotInlineContext);
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const handleOnChangeNormal = (action) => __awaiter(void 0, void 0, void 0, function* () {
+        const _message = Object.assign(Object.assign(Object.assign(Object.assign({}, params), value), { action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key }), getCurrentTotalDynamicScore(nodes, activeId, action.id));
+        delete _message.form_submit_meta;
+        const res = yield subotInlineMessage(_message);
+        if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+            const _a = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _a, restData = __rest(_a, ["node"]);
+            const _nextNode = Object.assign(Object.assign({}, _node), { _message: Object.assign(Object.assign({}, restData), { node_id: _node.id }) });
+            delete _nextNode._message.form_submit_meta;
+            onSubmit && onSubmit(_nextNode, _message);
+        }
+    });
+    const handleOnChange = (action, formSubmitMeta) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!action)
+            return;
+        const actionWithOther = (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.USER_CHOICE_TEXT_BY_INPUT ||
+            (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.POLL_CHOICE_TEXT_BY_INPUT;
+        const newValue = Object.assign(Object.assign({}, value), { action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key, form_submit_meta: formSubmitMeta });
+        if (actionWithOther) {
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            return;
+        }
+        delete newValue.form_submit_meta;
+        setValue(newValue);
+        handleOnChangeNormal(action);
+    });
+    const handleOnNext = () => {
+        const newMessage = JSON.parse(JSON.stringify(Object.assign(Object.assign(Object.assign({}, params), node === null || node === void 0 ? void 0 : node._message), value)));
+        if ((value === null || value === void 0 ? void 0 : value.action_id) &&
+            (value === null || value === void 0 ? void 0 : value.action_value) === KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD) {
+            onNext === null || onNext === void 0 ? void 0 : onNext(newMessage);
+            return;
+        }
+        if (!(value === null || value === void 0 ? void 0 : value.action_id) || !(value === null || value === void 0 ? void 0 : value.action_value)) {
+            pushNotifications({
+                title: '',
+                message: f({
+                    id: 'multiSelectError.required',
+                    defaultMessage: `There is no answer!`,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+        }
+        else {
+            delete newMessage.form_submit_meta;
+            onNext === null || onNext === void 0 ? void 0 : onNext(newMessage);
+        }
+    };
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null,
+                React__default.createElement(SubotInlineAction, { value: (value === null || value === void 0 ? void 0 : value.action_id) ? [value === null || value === void 0 ? void 0 : value.action_id] : [], actions: node === null || node === void 0 ? void 0 : node.actions, onChange: handleOnChange, formSubmitMeta: value === null || value === void 0 ? void 0 : value.form_submit_meta }))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, onNext: handleOnNext })));
+};
+
+const SubotInlineNodeFinal = ({ node, }) => {
+    var _a, _b;
+    const fixHeight = 350;
+    const { nodes } = useContext(SubotInlineContext);
+    const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
+    const flag = useRef(null);
+    const wrapper = useRef(null);
+    const [height, setHeight] = useState(fixHeight);
+    const [showMore, setShowMore] = useState(true);
+    const [isMore, setIsMore] = useState(false);
+    const handleOnClick = useCallback(() => {
+        fastdom.measure(() => {
+            var _a;
+            if (wrapper.current) {
+                const wrapperHeight = (_a = wrapper.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
+                if (height && height < wrapperHeight) {
+                    setHeight(wrapperHeight);
+                    setIsMore(true);
+                }
+                else {
+                    setHeight(fixHeight);
+                    setIsMore(false);
+                }
+                flag.current &&
+                    flag.current.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start',
+                        inline: 'start',
+                    });
+            }
+        });
+    }, [height]);
+    useLayoutEffect(() => {
+        fastdom.measure(() => {
+            if (wrapper.current) {
+                setTimeout(() => {
+                    var _a;
+                    const wrapperHeight = (_a = wrapper.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
+                    if (wrapperHeight && height > wrapperHeight) {
+                        setShowMore(false);
+                        setIsMore(false);
+                    }
+                }, 400);
+            }
+        });
+    }, []);
+    const botItem = nodes[0];
+    const botType = (_a = botItem === null || botItem === void 0 ? void 0 : botItem.extra_settings) === null || _a === void 0 ? void 0 : _a.subot_type;
+    const suggestedServiceIntents = useMemo(() => {
+        var _a;
+        return (((_a = node === null || node === void 0 ? void 0 : node.intents) === null || _a === void 0 ? void 0 : _a.filter((i) => i.type === NodeIntentType.BOT_SUGGESTED_SERVICE)) || []);
+    }, []);
+    return (React__default.createElement(SubotInlineFinalContainer, null,
+        React__default.createElement("div", { ref: flag, className: "hhg-flag", style: {
+                position: 'absolute',
+                top: -100,
+                left: 0,
+                pointerEvents: 'none',
+            } }),
+        React__default.createElement(SubotInlineFinalWrapper, { maxHeight: height, isMore: isMore },
+            React__default.createElement("div", { ref: wrapper },
+                React__default.createElement(SubotInlineIntentFinal, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [] }),
+                suggestedServiceIntents.length > 0 && (React__default.createElement("div", null, suggestedServiceIntents.map((intent) => {
+                    const NodeIntent = SubotInlineIntentBase$1[intent.type || ''];
+                    return (NodeIntent && React__default.createElement(NodeIntent, { key: intent.id, intent: intent }));
+                }))))),
+        showMore && (React__default.createElement(SubotInlineFinalMoreContainer, null,
+            React__default.createElement(SubotInlineFinalButton, { size: "md", color: "secondary", onClick: handleOnClick }, !isMore ? (React__default.createElement(React__default.Fragment, null,
+                f({ id: 'subotInline.showMore', defaultMessage: 'Show more' }),
+                React__default.createElement(ArrowDown, { style: { marginLeft: 10 } }))) : (React__default.createElement(React__default.Fragment, null,
+                f({ id: 'subotInline.showLess', defaultMessage: 'Show less' }),
+                React__default.createElement(ArrowUp, { style: { marginLeft: 10 } })))))),
+        botType === SubotType.voucherAcuvue && (React__default.createElement(SubotInlineVoucherLeftUI, { clientId: (_b = botItem.extra_settings) === null || _b === void 0 ? void 0 : _b.client_id, voucherAnswers: extractVoucherAnswers(nodes, botItem) }))));
+};
+
+const SubotInlineResultButton = styled.span `
+  display: inline-block;
+  margin-top: 20px;
+  color: ${theme.colors.primaryBase || '#2D87F3'};
+  cursor: pointer;
+  transition: 0.3 all ease;
+  &:hover {
+    color: ${theme.colors.primaryHover || '#2D87F3'};
+  }
+  ${MediaQueries.tdDown} {
+    margin-top: 16px;
+  }
+  ${MediaQueries.mbDown} {
+    margin-top: 12px;
+  }
+`;
+const SubotInlineWrapper = styled.div `
+  max-width: 430px;
+  margin-right: auto;
+  margin-left: auto;
+`;
+const SubotInlineContainer = styled.div `
+  padding: 44px 16px 32px;
+  background-color: ${theme.colors.neutral50 || '#F7F9FC'};
+  border-radius: ${theme.borderRadius};
+  position: relative;
+  text-align: center;
+  ${MediaQueries.tdDown} {
+    padding: 36px 16px 24px;
+  }
+  ${MediaQueries.mbDown} {
+    padding: 16px;
+    border-radius: 0px;
+  }
+`;
+const SubotInlineNodeFinalThankYou = ({ node, }) => {
+    var _a;
+    const { params, onNext } = useContext(SubotInlineContext);
+    const resultButton = useMemo(() => {
+        var _a;
+        const _resultButton = (_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.find(({ type }) => type === NodeActionType.RESULT_BUTTON);
+        if (_resultButton)
+            return _resultButton;
+        return null;
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const handleOnNext = useCallback(() => {
+        onNext &&
+            onNext(Object.assign(Object.assign(Object.assign({}, params), node === null || node === void 0 ? void 0 : node._message), { action_id: resultButton === null || resultButton === void 0 ? void 0 : resultButton.id, action_value: resultButton === null || resultButton === void 0 ? void 0 : resultButton.key }));
+    }, [resultButton]);
+    return (React__default.createElement(SubotInlineContainer, null,
+        React__default.createElement(SubotInlineWrapper, null, (_a = node === null || node === void 0 ? void 0 : node.intents) === null || _a === void 0 ? void 0 :
+            _a.map((intent) => {
+                const NodeIntent = SubotInlineIntentBase[intent === null || intent === void 0 ? void 0 : intent.type];
+                return NodeIntent && React__default.createElement(NodeIntent, { key: intent.id, intent: intent });
+            }),
+            resultButton && (React__default.createElement(SubotInlineResultButton, { onClick: handleOnNext }, resultButton === null || resultButton === void 0 ? void 0 : resultButton.label)))));
+};
+
+const SubotInlineNodeForm = ({ node, indexNumber, }) => {
+    var _a;
+    const { data: { locale }, } = useContext(TogetherComponentGlobalContext);
+    const { params, onPrev, onSubmit, trackingCommonInline, nodes, activeId } = useContext(SubotInlineContext);
+    const handleSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        const res = yield subotInlineMessage(Object.assign(Object.assign(Object.assign(Object.assign({}, params), node._message), data), getCurrentTotalDynamicScore(nodes, activeId, data.action_id, data.form_submit_meta)));
+        if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+            const _b = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _b, restData = __rest(_b, ["node"]);
+            const _nextNode = Object.assign(Object.assign({}, _node), { _message: Object.assign(Object.assign({}, restData), { node_id: _node.id }) });
+            onSubmit && onSubmit(_nextNode, Object.assign(Object.assign({}, node._message), data));
+        }
+    });
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineFormContainer, null,
+                React__default.createElement(UserInfoForm, { botId: params.bot_id, nodeId: String(node === null || node === void 0 ? void 0 : node.id), className: "form", actions: (node === null || node === void 0 ? void 0 : node.actions) || [], formSubmitMeta: ((_a = node === null || node === void 0 ? void 0 : node._message) === null || _a === void 0 ? void 0 : _a.form_submit_meta) || null, callBack: handleSubmit, countryCode: (locale === null || locale === void 0 ? void 0 : locale.split('-')[1]) || 'PH', trackingSubmitBtn: Object.assign(Object.assign({}, trackingCommonInline), { 'data-event-action': 'Submit' }) }))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, hideNext: true })));
+};
+
+const SubotInlineNodeImage = ({ node, indexNumber, }) => {
+    const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const { params, onSubmit, onPrev, onNext } = useContext(SubotInlineContext);
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const handleOnChange = (action) => __awaiter(void 0, void 0, void 0, function* () {
+        if (action) {
+            setValue(Object.assign(Object.assign({}, value), { action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key }));
+            const _message = Object.assign(Object.assign(Object.assign({}, params), value), { node_id: node.id, action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key });
+            const res = yield subotInlineMessage(_message);
+            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                const _a = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _a, restData = __rest(_a, ["node"]);
+                const _nextNode = Object.assign(Object.assign({}, _node), { _message: Object.assign(Object.assign({}, restData), { node_id: _node.id }) });
+                onSubmit && onSubmit(_nextNode, _message);
+            }
+        }
+    });
+    const handleOnNext = () => {
+        var _a;
+        if (!(node === null || node === void 0 ? void 0 : node._message) || !((_a = node._message) === null || _a === void 0 ? void 0 : _a.action_id)) {
+            pushNotifications({
+                title: '',
+                message: f({
+                    id: 'multiSelectError.required',
+                    defaultMessage: `There is no answer!`,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+        }
+        else {
+            onNext && onNext(Object.assign(Object.assign(Object.assign({}, params), value), node === null || node === void 0 ? void 0 : node._message));
+        }
+    };
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null,
+                React__default.createElement(SubotInlineAction, { node_type: node === null || node === void 0 ? void 0 : node.type, value: (value === null || value === void 0 ? void 0 : value.action_id) ? [value === null || value === void 0 ? void 0 : value.action_id] : [], actions: node === null || node === void 0 ? void 0 : node.actions, onChange: handleOnChange }))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, onNext: handleOnNext })));
+};
+
+const SubotInlineNodeMultiple = ({ node, indexNumber, }) => {
+    const { params, onChange, onPrev, onNext } = useContext(SubotInlineContext);
+    const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const submitButton = useMemo(() => {
+        var _a;
+        const _submitButton = (_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.find(({ type }) => type == NodeActionType.ACTION_MULTIPLE_BUTTON);
+        if (_submitButton)
+            return _submitButton;
+        return null;
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const activeActions = useMemo(() => {
+        if (value === null || value === void 0 ? void 0 : value.selected_actions) {
+            return Object.keys(value === null || value === void 0 ? void 0 : value.selected_actions);
+        }
+        return [];
+    }, [value, value === null || value === void 0 ? void 0 : value.selected_actions]);
+    const validateSelectActions = (selected_actions, callBack) => {
+        const activeActions = Object.keys(selected_actions);
+        if (!activeActions.length) {
+            pushNotifications({
+                title: '',
+                message: f({
+                    id: 'multiSelectError.required',
+                    defaultMessage: `There is no answer!`,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+            return;
+        }
+        else if ((node === null || node === void 0 ? void 0 : node.multi_select_option) === NodeMultipleOptions.RANGE &&
+            activeActions.length < (node === null || node === void 0 ? void 0 : node.from)) {
+            pushNotifications({
+                title: '',
+                message: f({
+                    id: 'multiSelectError.range',
+                    defaultMessage: 'You must choose from {from} to {to} answers (Ex: You must choose from 3 to 5 answers)',
+                }, {
+                    from: node.from,
+                    to: node.to,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+            return;
+        }
+        else if ((node === null || node === void 0 ? void 0 : node.multi_select_option) === NodeMultipleOptions.EXACT_NUMBER &&
+            activeActions.length !== (node === null || node === void 0 ? void 0 : node.from)) {
+            pushNotifications({
+                message: f({
+                    id: 'multiSelectError.exactNumber',
+                    defaultMessage: 'You must choose {from} answers.',
+                }, {
+                    from: node.from,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+            return;
+        }
+        else {
+            callBack();
+        }
+    };
+    const handleOnClick = (action, formSubmitMeta) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (action) {
+            const _value = JSON.parse(JSON.stringify(Object.assign(Object.assign({}, value), { action_id: submitButton === null || submitButton === void 0 ? void 0 : submitButton.id, action_value: submitButton === null || submitButton === void 0 ? void 0 : submitButton.key, selected_actions: Object.assign({}, value === null || value === void 0 ? void 0 : value.selected_actions) })));
+            if ((action === null || action === void 0 ? void 0 : action.type) === NodeActionType.POLL_CHOICE_TEXT_BY_INPUT ||
+                (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.USER_CHOICE_TEXT_BY_INPUT) {
+                const isExistedPoll = (_value === null || _value === void 0 ? void 0 : _value.selected_actions) && action.id in _value.selected_actions;
+                if (isExistedPoll) {
+                    if (formSubmitMeta) {
+                        _value.form_submit_meta = formSubmitMeta;
+                    }
+                    else {
+                        delete _value.form_submit_meta;
+                        (_a = _value.selected_actions) === null || _a === void 0 ? true : delete _a[action.id];
+                    }
+                }
+                else {
+                    if (action === null || action === void 0 ? void 0 : action.id) {
+                        _value.selected_actions = Object.assign(Object.assign({}, _value.selected_actions), { [action.id]: action.key || '' });
+                    }
+                }
+                setValue(_value);
+                onChange === null || onChange === void 0 ? void 0 : onChange(_value);
+                return;
+            }
+            if (!((_b = _value.selected_actions) === null || _b === void 0 ? void 0 : _b[action.id])) {
+                _value.selected_actions = Object.assign(Object.assign({}, _value.selected_actions), { [action.id]: action.key || '' });
+                onChange && onChange(_value);
+                setValue(_value);
+                return;
+            }
+            if (_value.selected_actions[action.id]) {
+                delete _value.selected_actions[action.id];
+                onChange && onChange(_value);
+                setValue(_value);
+                return;
+            }
+        }
+    });
+    const handleOnNext = useCallback(() => {
+        validateSelectActions((value === null || value === void 0 ? void 0 : value.selected_actions) || {}, () => {
+            onNext &&
+                onNext(Object.assign(Object.assign(Object.assign(Object.assign({}, params), node === null || node === void 0 ? void 0 : node._message), value), { node_id: node.id }));
+        });
+    }, [value, value === null || value === void 0 ? void 0 : value.selected_actions, onNext]);
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null,
+                React__default.createElement(SubotInlineAction, { value: activeActions, actions: node === null || node === void 0 ? void 0 : node.actions, onChange: handleOnClick, htmlType: "checkbox", formSubmitMeta: value === null || value === void 0 ? void 0 : value.form_submit_meta }))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, nextText: submitButton ? submitButton === null || submitButton === void 0 ? void 0 : submitButton.label : '', onNext: handleOnNext })));
+};
+
+const OTPInfoForm = ({ className, style, actions, countryCode, phoneNumber, areaCode, 
+// verified,
+callBack, }) => {
+    const countRef = useRef();
+    const [isFinishedCountDown, setIsFinishedCountDown] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingVerify, setIsLoadingVerify] = useState(false);
+    const [sentOTP, setSentOTP] = useState(false);
+    const { register, formState: { errors }, control, trigger, getValues, setValue, } = useForm();
+    const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    // useEffect(() => {
+    //   const actionPhone = actions.find(
+    //     (action) => action.type === NodeActionType.USER_SUBMIT_PHONE,
+    //   )
+    //   actionPhone?.key && setValue(actionPhone.key, '+84343261825')
+    //   setSentOTP(true)
+    // }, [])
+    // const placeholderPhone = useMemo(() => {
+    //   return actions.find(({ type }) => type === NodeActionType.USER_SUBMIT_PHONE)
+    //     ?.label
+    // }, [actions])
+    // const placeholderOtp = useMemo(() => {
+    //   return actions.find(
+    //     ({ type }) => type === NodeActionType.USER_SUBMIT_NUMBER,
+    //   )?.label
+    // }, [actions])
+    // const labelBtnSendOtp = 'Gửi mã OTP'
+    // const labelBtnVerifyOtp = useMemo(() => {
+    //   return (
+    //     actions.find(({ type }) => type === NodeActionType.USER_SUBMIT_SEND)
+    //       ?.label || 'Xác minh mã OTP'
+    //   )
+    // }, [actions])
+    // const labelBtnResendOtp = useMemo(() => {
+    //   return (
+    //     actions.find(({ type }) => type === NodeActionType.USER_SUBMIT_RESEND)
+    //       ?.label || 'Gửi lại mã OTP'
+    //   )
+    // }, [actions])
+    const handleSendOTP = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        event.preventDefault();
+        const data = getValues();
+        const parsedPhone = parsePhoneNumber(data.phone || '');
+        if (!(parsedPhone === null || parsedPhone === void 0 ? void 0 : parsedPhone.nationalNumber) || !(parsedPhone === null || parsedPhone === void 0 ? void 0 : parsedPhone.countryCallingCode)) {
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const result = yield callApi(getSubotApiPath(PATHS$1.POST_SEND_OTP), 'POST', {
+                data: {
+                    phone_number: parsedPhone.nationalNumber,
+                    area_code: `+${parsedPhone.countryCallingCode}`,
+                },
+            });
+            setIsLoading(false);
+            if ((result === null || result === void 0 ? void 0 : result._status) === 1) {
+                if (sentOTP) {
+                    setIsFinishedCountDown(false);
+                    countRef.current.reset();
+                }
+                setSentOTP(true);
+                setTimeout(() => {
+                    const input = document.querySelector('.input-otp-code');
+                    if (input) {
+                        input.focus();
+                        input.scrollIntoView({ block: 'center' });
+                    }
+                }, 100);
+                return;
+            }
+            if ((result === null || result === void 0 ? void 0 : result._status) === 0 &&
+                ((_a = result === null || result === void 0 ? void 0 : result._messages) === null || _a === void 0 ? void 0 : _a[0]) === 'This phone number was verified') {
+                // const { _messages } = result
+                if (countRef.current) {
+                    countRef.current.cancel();
+                }
+                pushNotifications({
+                    title: '',
+                    message: 'Số điện thoại này đã được xác minh.',
+                    type: 'success',
+                });
+                const action = actions.find((action) => action.type === NodeActionType.USER_SUBMIT_SEND);
+                action && callBack(action, data.phone);
+                return;
+            }
+            throw new Error();
+        }
+        catch (error) {
+            setIsLoading(false);
+            if (countRef.current) {
+                countRef.current.cancel();
+            }
+            showMessageSomethingWrong();
+        }
+    });
+    const handleOnVerify = (event, action) => __awaiter(void 0, void 0, void 0, function* () {
+        event.preventDefault();
+        setIsLoadingVerify(true);
+        yield trigger();
+        if (isEmpty(errors)) {
+            const data = getValues();
+            const { number } = data;
+            const parsedPhone = parsePhoneNumber(data.phone || '');
+            if (!(parsedPhone === null || parsedPhone === void 0 ? void 0 : parsedPhone.nationalNumber) || !(parsedPhone === null || parsedPhone === void 0 ? void 0 : parsedPhone.countryCallingCode)) {
+                return;
+            }
+            try {
+                const result = yield callApi(getSubotApiPath(PATHS$1.POST_VERIFY_OTP), 'POST', {
+                    data: {
+                        phone_number: parsedPhone.nationalNumber,
+                        area_code: `+${parsedPhone.countryCallingCode}`,
+                        code: number,
+                    },
+                });
+                setIsLoadingVerify(false);
+                if ((result === null || result === void 0 ? void 0 : result._status) === 1) {
+                    pushNotifications({
+                        title: '',
+                        message: f({ id: 'subot.verifyOTP.success.message' }),
+                        type: 'success',
+                    });
+                    callBack(action, data.phone);
+                    return;
+                }
+                throw new Error();
+            }
+            catch (error) {
+                pushNotifications({
+                    title: '',
+                    message: f({ id: 'validation.error.validOTP' }),
+                    type: 'danger',
+                });
+                setIsLoadingVerify(false);
+            }
+        }
+        else {
+            setIsLoadingVerify(false);
+        }
+    });
+    const showMessageSomethingWrong = () => {
+        pushNotifications({
+            title: '',
+            message: f({ id: 'notification.comment.somethingWrong' }),
+            type: 'danger',
+        });
+    };
+    const renderFormInput = (action) => {
+        if (!action.key) {
+            return null;
+        }
+        switch (action.type) {
+            case NodeActionType.USER_SUBMIT_PHONE:
+                return (React__default.createElement("div", { className: "input-row", key: action.id },
+                    React__default.createElement("label", { htmlFor: action.key }, action.label),
+                    React__default.createElement(Controller, { name: action.key, control: control, rules: {
+                            required: true,
+                            validate: (value) => isPossiblePhoneNumber(value),
+                        }, render: ({ field: { onChange, value } }) => {
+                            const disabledPhone = (!isFinishedCountDown && sentOTP) || isLoading;
+                            return (React__default.createElement(StyleWrapperPhoneInput, null,
+                                React__default.createElement(PhoneInputWithCode, { value: value, defaultValue: phoneNumber, onChange: onChange, defaultCountry: countryCode, id: action.id, className: `input-row ${action.id}`, name: action.key, disabled: disabledPhone, flagComponent: FlagComponent, placeholder: action.label }),
+                                disabledPhone && (React__default.createElement(IconEdit, { viewBox: "0 0 24 24", className: "icon-edit-phone", onClick: () => {
+                                        var _a;
+                                        onChange('');
+                                        setSentOTP(false);
+                                        setIsLoadingVerify(false);
+                                        (_a = countRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+                                    } })),
+                                action.key && errors[action.key] && (React__default.createElement("p", { className: "error-message" }, f({
+                                    id: 'validation.error.validNumber',
+                                    defaultMessage: 'Please enter a valid number.',
+                                }))),
+                                React__default.createElement("div", { className: "submit-btn-row", key: action.id },
+                                    React__default.createElement(Button$1, { className: "submit-btn", size: "lg", onClick: handleSendOTP, isDisabled: (!isFinishedCountDown && sentOTP) || isLoading, isLoading: isLoading }, sentOTP ? (React__default.createElement(CountDown$1, { ref: countRef, isFinished: isFinishedCountDown, onFinish: setIsFinishedCountDown })) : (React__default.createElement("span", null, f({
+                                        id: 'subot.sendOTP.button',
+                                        defaultMessage: 'Send OTP',
+                                    })))))));
+                        } })));
+            case NodeActionType.USER_SUBMIT_NUMBER:
+                if (!sentOTP) {
+                    return '';
+                }
+                return (React__default.createElement("div", { className: "input-row", key: action.id },
+                    React__default.createElement("label", { htmlFor: action.key }, action.label),
+                    React__default.createElement("input", Object.assign({ type: "tel", id: action.id, placeholder: action.label }, register(action.key, {
+                        required: true,
+                        pattern: /^[0-9]{0,6}$/,
+                    }), { className: "input-otp-code" })),
+                    errors[action.key] && (React__default.createElement("p", { className: "error-message" }, f({
+                        id: 'validation.error.validOTP',
+                        defaultMessage: 'Invalid OTP provided',
+                    })))));
+            default:
+                return '';
+        }
+    };
+    const renderFormSubmitAndTerms = (action) => {
+        switch (action.type) {
+            case NodeActionType.USER_SUBMIT_SEND:
+                if (!sentOTP)
+                    return '';
+                return (React__default.createElement("div", { className: "submit-btn-row", key: action.id },
+                    React__default.createElement(Button$1, { className: "submit-btn", size: "lg", isDisabled: isLoadingVerify, isLoading: isLoadingVerify, onClick: (event) => handleOnVerify(event, action) }, action.label)));
+            default:
+                return '';
+        }
+    };
+    useEffect(() => {
+        if (phoneNumber) {
+            const action = actions.find((action) => action.type === NodeActionType.USER_SUBMIT_PHONE);
+            if (action && action.key) {
+                setValue(action.key, `+${areaCode}${phoneNumber}`);
+            }
+        }
+    }, [phoneNumber, areaCode]);
+    return (React__default.createElement(StyledUserInfoFormContainer$1, { className: className, style: style },
+        React__default.createElement("form", { className: "user-info-form" },
+            actions.map((action) => renderFormInput(action)),
+            actions.map((action) => renderFormSubmitAndTerms(action)))));
+};
+
+const useVerifyPhoneNumber = () => {
+    const userInfo = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.userInfo;
+    const [verifiedPhone, setVerifiedPhone] = useState(false);
+    useEffect(() => {
+        if (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone) {
+            if (userInfo.phone_verified_at && userInfo.verify_phone_code) {
+                setVerifiedPhone(true);
+            }
+        }
+    }, [userInfo]);
+    return verifiedPhone;
+};
+
+const SubotInlineNodeOTP = ({ node, indexNumber, }) => {
+    const { params, onPrev, onNext } = useContext(SubotInlineContext);
+    const userInfo = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.userInfo;
+    const locale = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.locale;
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const verifiedPhone = useVerifyPhoneNumber();
+    const handleOnVerify = (action, phoneNumber) => {
+        var _a;
+        const actionPhone = (_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.find(({ type }) => type === NodeActionType.USER_SUBMIT_PHONE);
+        if (!action || !actionPhone) {
+            return;
+        }
+        const form_submit_meta = [
+            {
+                key: String(actionPhone.key),
+                control: ELEMENT_CONTROL_INPUT_TYPE[NodeActionType.USER_SUBMIT_PHONE],
+                value: phoneNumber,
+            },
+        ];
+        const newValue = Object.assign(Object.assign({}, value), { form_submit_meta, action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key });
+        setValue(newValue);
+        onNext && onNext(Object.assign(Object.assign(Object.assign({}, params), newValue), node === null || node === void 0 ? void 0 : node._message));
+    };
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null,
+                React__default.createElement(OTPInfoForm, { phoneNumber: userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone, verified: verifiedPhone, areaCode: userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code, callBack: handleOnVerify, actions: (node === null || node === void 0 ? void 0 : node.actions) || [], countryCode: (locale === null || locale === void 0 ? void 0 : locale.split('-')[1]) || 'PH' }))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, hideNext: true })));
+};
+
+// Poll Message
+// {
+// 	form_meta: [
+// 		{ key: "poll4", control: "formmeta", value: "", action_id: "action.id" },
+// 		{ key: "poll2", control: "formmeta", value: "", action_id: "action.id" },
+// 		{ key: "poll3", control: "formmeta", value: "", action_id: "action.id" },
+// 		{ key: 'attribite-description', control:"formmeta-description", value: '', action_id: "action.id"}
+// 	],
+// 	action_id: "button_id",
+// 	action_value: "button_attribute"
+// }
+const SubotInlineNodePoll = ({ node, indexNumber, }) => {
+    var _a, _b;
+    const { params, onChange, onPrev, onNext } = useContext(SubotInlineContext);
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const validation = useValidationMultiOption();
+    const descriptionNode = useDescriptionPollNode({ node });
+    const submitButton = useMemo(() => {
+        var _a;
+        const _submitButton = (_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.find(({ type }) => type == NodeActionType.POLL_BUTTON);
+        if (_submitButton)
+            return _submitButton;
+        return null;
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const handleOnChange = (action, formSubmitMeta) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const newValue = JSON.parse(JSON.stringify(Object.assign(Object.assign({}, value), { node_id: node.id, action_id: submitButton === null || submitButton === void 0 ? void 0 : submitButton.id, action_value: submitButton === null || submitButton === void 0 ? void 0 : submitButton.key, form_submit_meta: [...((value === null || value === void 0 ? void 0 : value.form_submit_meta) || [])] })));
+        if ((action === null || action === void 0 ? void 0 : action.type) === NodeActionType.POLL_CHOICE_TEXT_BY_INPUT ||
+            (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.USER_CHOICE_TEXT_BY_INPUT) {
+            const isExistedPoll = (_a = newValue.form_submit_meta) === null || _a === void 0 ? void 0 : _a.some(({ action_id }) => action_id === action.id);
+            if (isExistedPoll) {
+                newValue.form_submit_meta =
+                    typeof formSubmitMeta === 'undefined'
+                        ? (_b = newValue.form_submit_meta) === null || _b === void 0 ? void 0 : _b.filter(({ action_id }) => action_id !== action.id)
+                        : (_c = newValue.form_submit_meta) === null || _c === void 0 ? void 0 : _c.filter(({ action_id }) => action_id !== action.id).concat(formSubmitMeta);
+            }
+            else {
+                newValue.form_submit_meta = (_d = newValue.form_submit_meta) === null || _d === void 0 ? void 0 : _d.concat([
+                    {
+                        key: action === null || action === void 0 ? void 0 : action.key,
+                        control: ELEMENT_CONTROL_INPUT_TYPE[action === null || action === void 0 ? void 0 : action.type] || 'text',
+                        value: '',
+                        action_id: action === null || action === void 0 ? void 0 : action.id,
+                    },
+                ]);
+            }
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            return;
+        }
+        const isPoll = (_e = newValue.form_submit_meta) === null || _e === void 0 ? void 0 : _e.some(({ action_id }) => action_id === (action === null || action === void 0 ? void 0 : action.action_id));
+        if (isPoll) {
+            newValue.form_submit_meta = (_f = newValue.form_submit_meta) === null || _f === void 0 ? void 0 : _f.filter(({ action_id }) => action_id !== (action === null || action === void 0 ? void 0 : action.action_id));
+        }
+        else {
+            newValue.form_submit_meta = (_g = newValue.form_submit_meta) === null || _g === void 0 ? void 0 : _g.concat([action]);
+        }
+        setValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    const activeActions = useMemo(() => {
+        if (value === null || value === void 0 ? void 0 : value.form_submit_meta) {
+            return value === null || value === void 0 ? void 0 : value.form_submit_meta.map(({ action_id }) => action_id);
+        }
+        return [];
+    }, [value, value === null || value === void 0 ? void 0 : value.form_submit_meta]);
+    const handleOnNext = () => {
+        const tmp = {};
+        if (value.form_submit_meta && value.form_submit_meta.length) {
+            tmp[node.id] = value.form_submit_meta.map((_v) => _v.action_id);
+        }
+        const newValue = Object.assign(Object.assign({}, value), { current_polls: tmp });
+        validation.validateSelectActions(activeActions, node, () => {
+            onNext && onNext(Object.assign(Object.assign(Object.assign({}, params), node === null || node === void 0 ? void 0 : node._message), newValue));
+        });
+    };
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineDescription$1, null, descriptionNode),
+            React__default.createElement(SubotInlineActionContainer, null, (node === null || node === void 0 ? void 0 : node.actions) && !!((_a = node.actions) === null || _a === void 0 ? void 0 : _a.length) && (React__default.createElement(SubotInlineActionListContainer, null, (_b = node === null || node === void 0 ? void 0 : node.actions.filter(({ type }) => type !== NodeActionType.POLL_BUTTON)) === null || _b === void 0 ? void 0 : _b.map((action) => {
+                const NodeAction = SubotInlineActionBase[action === null || action === void 0 ? void 0 : action.type];
+                return (NodeAction && (React__default.createElement(NodeAction, { key: action.id, active: activeActions.includes(action.id), action: action, onChange: handleOnChange, htmlType: "checkbox", formSubmitMeta: value === null || value === void 0 ? void 0 : value.form_submit_meta })));
+            }))))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, nextText: submitButton ? submitButton === null || submitButton === void 0 ? void 0 : submitButton.label : '', onNext: handleOnNext })));
+};
+
+// Rating Message
+// {
+// 	form_meta: [
+// 		{ key: "action.key", control: "star", value: "", action_id: 'action.id' },
+// 		{ key: 'action.key', control: "text", value: '', action_id: 'action.id' }
+// 	],
+// 	action_id: "button_id",
+// 	action_value: "button_attribute"
+// }
+const SubotInlineNodeRating = ({ node, indexNumber, }) => {
+    var _a, _b;
+    const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const { params, onChange, onSubmit, onPrev, onNext } = useContext(SubotInlineContext);
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const [isSubmit, setIsSubmit] = useState(false);
+    const ratingStarValue = useMemo(() => {
+        var _a;
+        const _ratingStar = (_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.find(({ type }) => type === NodeActionType.RATING_STAR);
+        if (value.form_submit_meta && _ratingStar) {
+            const formIndex = value === null || value === void 0 ? void 0 : value.form_submit_meta.findIndex(({ action_id }) => action_id === (_ratingStar === null || _ratingStar === void 0 ? void 0 : _ratingStar.id));
+            if (formIndex !== -1)
+                return parseInt(value === null || value === void 0 ? void 0 : value.form_submit_meta[formIndex].value);
+        }
+        return 0;
+    }, [value === null || value === void 0 ? void 0 : value.form_submit_meta]);
+    const submitButton = useMemo(() => {
+        var _a;
+        const _submitButton = (_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.find(({ type }) => type == NodeActionType.RATING_BUTTON);
+        if (_submitButton)
+            return _submitButton;
+        return null;
+    }, []);
+    const handleOnChange = (formValue) => __awaiter(void 0, void 0, void 0, function* () {
+        if (formValue) {
+            const _message = Object.assign(Object.assign(Object.assign({}, params), value), { node_id: node.id, action_id: submitButton === null || submitButton === void 0 ? void 0 : submitButton.id, action_value: submitButton === null || submitButton === void 0 ? void 0 : submitButton.key, form_submit_meta: (value === null || value === void 0 ? void 0 : value.form_submit_meta)
+                    ? [...value === null || value === void 0 ? void 0 : value.form_submit_meta]
+                    : [] });
+            const tmpFormSubmitMeta = [
+                ..._message === null || _message === void 0 ? void 0 : _message.form_submit_meta,
+            ];
+            const formUpdateIndex = tmpFormSubmitMeta.findIndex(({ action_id }) => action_id === formValue.action_id);
+            if (formUpdateIndex !== -1)
+                tmpFormSubmitMeta[formUpdateIndex] = Object.assign({}, formValue);
+            else
+                tmpFormSubmitMeta.push(formValue);
+            _message.form_submit_meta = [...tmpFormSubmitMeta];
+            setValue(_message);
+            onChange && onChange(_message);
+        }
+    });
+    const handleOnNext = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!value.form_submit_meta || ratingStarValue === 0) {
+            pushNotifications({
+                title: '',
+                message: f({
+                    id: 'multiSelectError.required',
+                    defaultMessage: `There is no answer!`,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+            return;
+        }
+        if (!isSubmit) {
+            const _message = Object.assign(Object.assign(Object.assign({}, params), node === null || node === void 0 ? void 0 : node._message), value);
+            const res = yield subotInlineMessage(_message);
+            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                const _c = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _c, restData = __rest(_c, ["node"]);
+                const _nextNode = Object.assign(Object.assign({}, _node), { _message: Object.assign(Object.assign({}, restData), { node_id: _node.id }) });
+                onSubmit && onSubmit(_nextNode, _message);
+                setIsSubmit(true);
+            }
+        }
+        else {
+            onNext && onNext(Object.assign(Object.assign(Object.assign({}, params), value), node === null || node === void 0 ? void 0 : node._message));
+        }
+    });
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null, (node === null || node === void 0 ? void 0 : node.actions) && !!((_a = node.actions) === null || _a === void 0 ? void 0 : _a.length) && (React__default.createElement(SubotInlineActionListContainer, null, (_b = node === null || node === void 0 ? void 0 : node.actions.filter(({ type }) => type !== NodeActionType.RATING_BUTTON)) === null || _b === void 0 ? void 0 : _b.map((action) => {
+                var _a;
+                const NodeAction = SubotInlineActionBase[action === null || action === void 0 ? void 0 : action.type];
+                return (NodeAction && (React__default.createElement(NodeAction, { key: action.id, action: action, onChange: handleOnChange, value: (value &&
+                        (value === null || value === void 0 ? void 0 : value.form_submit_meta) &&
+                        ((_a = value.form_submit_meta) === null || _a === void 0 ? void 0 : _a.find(({ action_id }) => action_id === action.id))) })));
+            }))))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, nextText: submitButton ? submitButton === null || submitButton === void 0 ? void 0 : submitButton.label : '', onNext: handleOnNext })));
+};
+
+const SubotInlineNodeReaction = ({ node, indexNumber, }) => {
+    const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const { params, onSubmit, onPrev, onNext } = useContext(SubotInlineContext);
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const handleOnChange = (action) => __awaiter(void 0, void 0, void 0, function* () {
+        if (action) {
+            setValue(Object.assign(Object.assign({}, value), { action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key }));
+            const _message = Object.assign(Object.assign(Object.assign({}, params), value), { node_id: node.id, action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key });
+            const res = yield subotInlineMessage(_message);
+            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                const _a = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _a, restData = __rest(_a, ["node"]);
+                const _nextNode = Object.assign(Object.assign({}, _node), { _message: Object.assign(Object.assign({}, restData), { node_id: _node.id }) });
+                onSubmit && onSubmit(_nextNode, _message);
+            }
+        }
+    });
+    const handleOnNext = () => {
+        var _a;
+        if (!(node === null || node === void 0 ? void 0 : node._message) || !((_a = node._message) === null || _a === void 0 ? void 0 : _a.action_id)) {
+            pushNotifications({
+                title: '',
+                message: f({
+                    id: 'multiSelectError.required',
+                    defaultMessage: `There is no answer!`,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+        }
+        else {
+            onNext && onNext(Object.assign(Object.assign(Object.assign({}, params), value), node === null || node === void 0 ? void 0 : node._message));
+        }
+    };
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null,
+                React__default.createElement(SubotInlineAction, { value: (value === null || value === void 0 ? void 0 : value.action_id) ? [value === null || value === void 0 ? void 0 : value.action_id] : [], actions: (node === null || node === void 0 ? void 0 : node.actions) || [], onChange: handleOnChange }))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, onNext: handleOnNext })));
+};
+
+const SubotInlineNodeResultPoll = ({ node, }) => {
+    var _a, _b;
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [] })),
+            React__default.createElement(SubotInlineActionContainer, null, (node === null || node === void 0 ? void 0 : node.actions) && !!((_a = node.actions) === null || _a === void 0 ? void 0 : _a.length) && (React__default.createElement(SubotInlineActionListContainer, null, (_b = node === null || node === void 0 ? void 0 : node.actions.filter(({ type }) => type !== NodeActionType.POLL_BUTTON)) === null || _b === void 0 ? void 0 : _b.map((action) => {
+                const NodeAction = SubotInlineActionBase[action === null || action === void 0 ? void 0 : action.type];
+                return (NodeAction && (React__default.createElement(NodeAction, { key: action.id, action: action, htmlType: "checkbox", node_type: node === null || node === void 0 ? void 0 : node.type })));
+            })))))));
+};
+
+// Review Message
+// {
+// 	form_meta: [
+// 		{ key: "review1", control: "formmeta", value: '', action_id: "action.id" },
+// 		{ key: "review2", control: "formmeta", value: '', action_id: "action.id" },
+// 		{ key: "review3", control: "formmeta", value: "" },
+// 		{ key: "review4", control: "formmeta", value: "" },
+// 		{ key: "review5", control: "formmeta", value: "" },
+// 		{key: 'attribite-description', control:"formmeta-description", value: ''}
+// 	],
+// 	action_id: "button_id",
+// 	action_value: "button_attribute"
+// }
+const SubotInlineNodeReview = ({ node, indexNumber, }) => {
+    const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const { params, onChange, onSubmit, onPrev, onNext } = useContext(SubotInlineContext);
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const [isSubmit, setIsSubmit] = useState(false);
+    const reviewChoices = useMemo(() => {
+        var _a;
+        return ((_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.filter(({ type }) => type === NodeActionType.REVIEW_CHOICE)) || [];
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const reviewDescriptions = useMemo(() => {
+        var _a;
+        return ((_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.filter(({ type }) => type === NodeActionType.REVIEW_DESCRIPTION)) || [];
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const submitButton = useMemo(() => {
+        var _a;
+        const _submitButton = (_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.find(({ type }) => type == NodeActionType.REVIEW_BUTTON);
+        if (_submitButton)
+            return _submitButton;
+        return null;
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const activeActions = useMemo(() => {
+        if (value === null || value === void 0 ? void 0 : value.form_submit_meta) {
+            return value === null || value === void 0 ? void 0 : value.form_submit_meta.map(({ action_id }) => action_id).filter((action_id) => !!(reviewChoices === null || reviewChoices === void 0 ? void 0 : reviewChoices.map(({ id }) => id).includes(action_id)));
+        }
+        return [];
+    }, [value, value === null || value === void 0 ? void 0 : value.form_submit_meta]);
+    const handleOnClick = (formValue) => {
+        if (formValue) {
+            const _message = Object.assign(Object.assign(Object.assign({}, params), value), { node_id: node.id, action_id: submitButton === null || submitButton === void 0 ? void 0 : submitButton.id, action_value: submitButton === null || submitButton === void 0 ? void 0 : submitButton.key, form_submit_meta: (value === null || value === void 0 ? void 0 : value.form_submit_meta)
+                    ? [...value === null || value === void 0 ? void 0 : value.form_submit_meta]
+                    : [] });
+            let tmpFormSubmitMeta = [
+                ..._message === null || _message === void 0 ? void 0 : _message.form_submit_meta,
+            ];
+            const formUpdateIndex = tmpFormSubmitMeta.findIndex(({ action_id }) => action_id === formValue.action_id);
+            if (formUpdateIndex !== -1)
+                tmpFormSubmitMeta = [
+                    ...tmpFormSubmitMeta.slice(0, formUpdateIndex),
+                    ...tmpFormSubmitMeta.slice(formUpdateIndex + 1),
+                ];
+            else
+                tmpFormSubmitMeta.push(formValue);
+            _message.form_submit_meta = [...tmpFormSubmitMeta];
+            setValue(_message);
+            setIsSubmit(false);
+            onChange && onChange(_message);
+        }
+    };
+    const handleOnChange = (formValue) => {
+        if (formValue) {
+            const _message = Object.assign(Object.assign(Object.assign({}, params), value), { node_id: node.id, action_id: submitButton === null || submitButton === void 0 ? void 0 : submitButton.id, action_value: submitButton === null || submitButton === void 0 ? void 0 : submitButton.key, form_submit_meta: (value === null || value === void 0 ? void 0 : value.form_submit_meta)
+                    ? [...value === null || value === void 0 ? void 0 : value.form_submit_meta]
+                    : [] });
+            const tmpFormSubmitMeta = [
+                ..._message === null || _message === void 0 ? void 0 : _message.form_submit_meta,
+            ];
+            const formUpdateIndex = tmpFormSubmitMeta.findIndex(({ action_id }) => action_id === formValue.action_id);
+            if (formUpdateIndex !== -1)
+                tmpFormSubmitMeta[formUpdateIndex] = Object.assign({}, formValue);
+            else
+                tmpFormSubmitMeta.push(formValue);
+            _message.form_submit_meta = [...tmpFormSubmitMeta];
+            setValue(_message);
+            setIsSubmit(false);
+            onChange && onChange(_message);
+        }
+    };
+    const handleOnNext = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!((_a = node === null || node === void 0 ? void 0 : node._message) === null || _a === void 0 ? void 0 : _a.form_submit_meta) || !activeActions.length) {
+            pushNotifications({
+                title: '',
+                message: f({
+                    id: 'multiSelectError.required',
+                    defaultMessage: `There is no answer!`,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+            return;
+        }
+        if (!isSubmit) {
+            const _message = Object.assign(Object.assign(Object.assign({}, params), node === null || node === void 0 ? void 0 : node._message), value);
+            const res = yield subotInlineMessage(_message);
+            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                const _b = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _b, restData = __rest(_b, ["node"]);
+                const _nextNode = Object.assign(Object.assign({}, _node), { _message: Object.assign(Object.assign({}, restData), { node_id: _node.id }) });
+                onSubmit && onSubmit(_nextNode, _message);
+                setIsSubmit(true);
+            }
+        }
+        else {
+            onNext && onNext(Object.assign(Object.assign(Object.assign({}, params), value), node === null || node === void 0 ? void 0 : node._message));
+        }
+    });
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null,
+                !!reviewChoices.length && (React__default.createElement(SubotInlineReviewContainer, null,
+                    React__default.createElement(SubotInlineActionListContainer, { className: "review-container" }, reviewChoices.map((action) => {
+                        var _a;
+                        const NodeAction = SubotInlineActionBase[action === null || action === void 0 ? void 0 : action.type];
+                        return (NodeAction && (React__default.createElement(NodeAction, { key: action.id, action: action, onChange: handleOnClick, active: (value &&
+                                !!((_a = value === null || value === void 0 ? void 0 : value.form_submit_meta) === null || _a === void 0 ? void 0 : _a.find(({ action_id }) => action_id === action.id))) ||
+                                false })));
+                    })))),
+                !!(reviewDescriptions === null || reviewDescriptions === void 0 ? void 0 : reviewDescriptions.length) && (React__default.createElement(SubotInlineActionListContainer, null, reviewDescriptions.map((action) => {
+                    var _a;
+                    const NodeAction = SubotInlineActionBase[action === null || action === void 0 ? void 0 : action.type];
+                    return (NodeAction && (React__default.createElement(NodeAction, { key: action.id, action: action, onChange: handleOnChange, value: (value &&
+                            (value === null || value === void 0 ? void 0 : value.form_submit_meta) &&
+                            ((_a = value.form_submit_meta) === null || _a === void 0 ? void 0 : _a.find(({ action_id }) => action_id === action.id))) })));
+                }))))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, nextText: submitButton ? submitButton === null || submitButton === void 0 ? void 0 : submitButton.label : '', onNext: handleOnNext })));
+};
+
+const SubotInlineNodeSSO = ({ node, indexNumber, }) => {
+    const refIsTrigger = useRef(false);
+    const { params, onPrev, nodes, activeId, userInfo } = useContext(SubotInlineContext);
+    useEffect(() => {
+        var _a;
+        const actionSSO = (_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.find((act) => act.type === NodeActionType.ACTION_SSO_REDIRECT);
+        if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) && actionSSO && !refIsTrigger.current) {
+            refIsTrigger.current = true;
+            handleOnChange(actionSSO);
+        }
+    }, [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
+    const handleOnChange = (action) => {
+        if (action && action.type === NodeActionType.ACTION_SSO_REDIRECT) {
+            const currentState = {
+                params: Object.assign(Object.assign(Object.assign({}, params), node === null || node === void 0 ? void 0 : node._message), { action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key, mode: 'inline' }),
+                listNodes: nodes,
+                activeId,
+                createdAt: new Date().getTime(),
+                botId: params.bot_id,
+            };
+            localStorage.setItem(STATE_SUBOT_INLINE_KEY, JSON.stringify(currentState));
+            const urlObj = getURLwithSSOTracking(window.location.href, {
+                botItem: nodes[0],
+            });
+            urlObj.searchParams.set('bot_id', String(params.bot_id));
+            urlObj.searchParams.set('mode', 'inline');
+            urlObj.searchParams.set('source', 'subot-inline');
+            const returnUrl = urlObj.href;
+            if (IS_SSOV2_ENABLED()) {
+                useSSOV2Store.getState().triggerLogin({
+                    returnUrl,
+                    source: `subot-inline`,
+                });
+            }
+            else {
+                window.location.href = `${SSO_URL}?returnUrl=${encodeURIComponent(returnUrl)}`;
+            }
+        }
+    };
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: [
+                        ...((node === null || node === void 0 ? void 0 : node.intents) || []),
+                        ...ssoIntents(f),
+                    ], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null,
+                React__default.createElement(SubotInlineAction, { actions: node === null || node === void 0 ? void 0 : node.actions, onChange: handleOnChange }))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, hideNext: true })));
+};
+
+const SubotInlineNodeText = ({ node, indexNumber, }) => {
+    const { formatMessage: f, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const { nodes, activeId, params, onSubmit, onPrev, onNext, onChange } = useContext(SubotInlineContext);
+    const [value, setValue] = useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const handleOnChangeNormal = (action) => __awaiter(void 0, void 0, void 0, function* () {
+        const _message = Object.assign(Object.assign(Object.assign(Object.assign({}, params), value), { node_id: node.id, action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key }), getCurrentTotalDynamicScore(nodes, activeId, action.id));
+        delete _message.form_submit_meta;
+        const res = yield subotInlineMessage(_message);
+        if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+            const _a = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _a, restData = __rest(_a, ["node"]);
+            const _nextNode = Object.assign(Object.assign({}, _node), { _message: Object.assign(Object.assign({}, restData), { node_id: _node.id }) });
+            onSubmit && onSubmit(_nextNode, _message);
+        }
+    });
+    const handleOnChange = (action, formSubmitMeta) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!action)
+            return;
+        const actionWithOther = (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.USER_CHOICE_TEXT_BY_INPUT ||
+            (action === null || action === void 0 ? void 0 : action.type) === NodeActionType.POLL_CHOICE_TEXT_BY_INPUT;
+        const newValue = Object.assign(Object.assign({}, value), { action_id: action === null || action === void 0 ? void 0 : action.id, action_value: action === null || action === void 0 ? void 0 : action.key, form_submit_meta: formSubmitMeta });
+        if (actionWithOther) {
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            return;
+        }
+        delete newValue.form_submit_meta;
+        setValue(newValue);
+        handleOnChangeNormal(action);
+    });
+    const handleOnNext = () => {
+        const newMessage = JSON.parse(JSON.stringify(Object.assign(Object.assign(Object.assign({}, params), node === null || node === void 0 ? void 0 : node._message), value)));
+        if ((value === null || value === void 0 ? void 0 : value.action_id) &&
+            (value === null || value === void 0 ? void 0 : value.action_value) === KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD) {
+            onNext === null || onNext === void 0 ? void 0 : onNext(newMessage);
+            return;
+        }
+        if (!(value === null || value === void 0 ? void 0 : value.action_id) || !(value === null || value === void 0 ? void 0 : value.action_value)) {
+            pushNotifications({
+                title: '',
+                message: f({
+                    id: 'multiSelectError.required',
+                    defaultMessage: `There is no answer!`,
+                }),
+                type: 'warning', // "success" | "danger" | "info" | "warning"
+            });
+        }
+        else {
+            delete newMessage.form_submit_meta;
+            onNext === null || onNext === void 0 ? void 0 : onNext(newMessage);
+        }
+    };
+    return (React__default.createElement(SubotInlineContainer$1, null,
+        React__default.createElement(SubotInlineHeader$1, null),
+        React__default.createElement(SubotInlineWrapper$1, null,
+            React__default.createElement(SubotInlineIntentContainer, null,
+                React__default.createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default.createElement(SubotInlineActionContainer, null,
+                React__default.createElement(SubotInlineAction, { value: (value === null || value === void 0 ? void 0 : value.action_id) ? [value === null || value === void 0 ? void 0 : value.action_id] : [], actions: node === null || node === void 0 ? void 0 : node.actions, onChange: handleOnChange, formSubmitMeta: value === null || value === void 0 ? void 0 : value.form_submit_meta }))),
+        React__default.createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, onNext: handleOnNext })));
+};
+
+const SubotInlineNodeBase = {
+    TEXT: SubotInlineNodeText,
+    IMAGE: SubotInlineNodeImage,
+    FORM: SubotInlineNodeForm,
+    CONDITION: SubotInlineNode,
+    FINAL_STANDARD: SubotInlineNodeFinal,
+    FINAL: SubotInlineNodeFinal,
+    FINAL_THANK_YOU: SubotInlineNodeFinalThankYou,
+    SSO: SubotInlineNodeSSO,
+    MULTIPLE: SubotInlineNodeMultiple,
+    POLL: SubotInlineNodePoll,
+    RATING: SubotInlineNodeRating,
+    REACTION: SubotInlineNodeReaction,
+    REVIEW: SubotInlineNodeReview,
+    RESULT_POLL: SubotInlineNodeResultPoll,
+    OTP: SubotInlineNodeOTP,
+    // RESULT_RATING = 12,
+    // RESULT_REACTION = 13,
+};
+
+const SubotInlineButton = styled(Button$1) `
+  margin-top: 24px;
+  ${MediaQueries.mbUp} {
+    margin-top: 16px;
+  }
+`;
+const SubotInlineDescription = styled.div `
+  margin-top: 24px;
+`;
+const SubotInlineReview = styled(Text$1) `
+  text-align: center;
+  ${MediaQueries.mbUp} {
+    text-align: left;
+  }
+`;
+const SubotInlineTitle = styled(Heading) `
+  text-align: center;
+  margin-bottom: 8px;
+
+  ${MediaQueries.mbUp} {
+    margin-bottom: 0;
+    text-align: left;
+  }
+`;
+const SubotInlineImage = styled.div `
+  background-color: #ffffff;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+const SubotInlineContent = styled.div `
+  flex-grow: 1;
+  ${MediaQueries.tdDown} {
+    width: 100%;
+    margin-left: 0;
+  }
+`;
+const SubotInlineStartWrapper = styled.div `
+  position: relative;
+  display: flex;
+  gap: 24px;
+  ${MediaQueries.mbDown} {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+`;
+const SubotInlineStartContainer = styled.div `
+  position: relative;
+  overflow: hidden;
+  background-color: ${theme.colors.primary50};
+  padding: 32px;
+  border-radius: ${theme.borderRadius};
+  background-image: url('/images/subot-bg-transparent.png');
+  background-size: contain;
+  background-repeat: repeat-y;
+  ${MediaQueries.mbDown} {
+    padding: 24px;
+  }
+`;
+const SubotInlineNodeStart = ({ node, setLoading, }) => {
+    const startRef = useRef({
+        impress: false,
+    });
+    const userInfo = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.userInfo;
+    const { params, onNext, trackingCommonInline, isMobile } = useContext(SubotInlineContext);
+    const handleOnClick = (isCountClick = true) => () => {
+        if (isCountClick) {
+            const queryParams = {
+                cookie_id: params.cookie_id,
+                window_id: params.window_id,
+                bot_id: params.bot_id,
+                title_url: params.title_url,
+                url: params.url,
+                gtm_id: params.gtm_id,
+                ga_client_id: params.ga_client_id,
+                device_id: checkMobile(window.navigator.userAgent) ? 2 : 1,
+                account_id: params.account_id || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) || null,
+            };
+            subotInlineClick(queryParams);
+        }
+        onNext && onNext();
+    };
+    useEffect(() => {
+        const inViewport = (element, callback, options = {}) => {
+            if (!!window.IntersectionObserver && !startRef.current.impress) {
+                const observer = new IntersectionObserver((entries, observer) => {
+                    entries.forEach((entry) => callback(entry, observer));
+                }, options);
+                observer.observe(element);
+            }
+        };
+        const eventScrollImpress = () => {
+            if (startRef.current.element) {
+                inViewport(startRef.current.element, (element, observer) => {
+                    /** Not in viewport */
+                    if (!element.isIntersecting) {
+                        if (startRef.current.impress) {
+                            startRef.current.impress = false;
+                        }
+                        return;
+                    }
+                    if (!startRef.current.impress) {
+                        startRef.current.impress = true;
+                        if (startRef.current.debounce) {
+                            clearTimeout(startRef.current.debounce);
+                        }
+                        if (!(node === null || node === void 0 ? void 0 : node.inline_start_button)) {
+                            setLoading(true);
+                        }
+                        startRef.current.debounce = setTimeout(() => {
+                            const queryParams = {
+                                cookie_id: params.cookie_id,
+                                window_id: params.window_id,
+                                bot_id: params.bot_id,
+                                title_url: params.title_url,
+                                url: params.url,
+                                gtm_id: params.gtm_id,
+                                ga_client_id: params.ga_client_id,
+                                device_id: checkMobile(window.navigator.userAgent) ? 2 : 1,
+                                account_id: params.account_id || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) || null,
+                            };
+                            queryParams && subotInlineImpression(queryParams);
+                            /** Auto skip the starting node in the case
+                             * 		CTA Start value is not contributed on Subot Admin */
+                            if (!(node === null || node === void 0 ? void 0 : node.inline_start_button)) {
+                                handleOnClick(false)();
+                            }
+                        }, 400);
+                        startRef.current.element &&
+                            (observer === null || observer === void 0 ? void 0 : observer.unobserve(startRef.current.element));
+                    }
+                }, {
+                    rootMargin: '1000px',
+                });
+            }
+        };
+        eventScrollImpress();
+        window.addEventListener('scroll', eventScrollImpress, { passive: true });
+        return () => window.removeEventListener('scroll', eventScrollImpress);
+    }, [onNext]);
+    if (!node)
+        return null;
+    return (React__default.createElement(SubotInlineStartContainer, null,
+        React__default.createElement(SubotInlineStartWrapper, { ref: (ref) => (startRef.current.element = ref) },
+            node.inline_image && (React__default.createElement(SubotInlineImage, null,
+                React__default.createElement("img", { loading: "lazy", src: node.inline_image, alt: "" }))),
+            React__default.createElement(SubotInlineContent, null,
+                node.inline_title || node.inline_headline ? (React__default.createElement(SubotInlineTitle, { tag: "h3", fontWeight: "bold", color: theme.colors.secondaryBase },
+                    React__default.createElement(Markdown, null, node.inline_title || node.inline_headline))) : null,
+                node.inline_review && (React__default.createElement(SubotInlineReview, { size: "s4", color: theme.colors.gray600, 
+                    // fix error html, div is not allowed as child of p
+                    as: 'div' },
+                    React__default.createElement(Markdown, null, node.inline_review))),
+                node.inline_start_button && (React__default.createElement(SubotInlineButton, Object.assign({ size: "md", isBlock: isMobile, onClick: handleOnClick(true), className: "pointer-event-child-none" }, trackingCommonInline, { "data-event-action": "Start" }), node.inline_start_button)))),
+        React__default.createElement(SubotInlineDescription, null,
+            React__default.createElement(Markdown, null, node.inline_description))));
+};
+
+const SubotInlineLoading = styled.div `
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: ${theme.colors.gray800};
+  opacity: 0;
+  pointer-events: none;
+  &:before {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: ${theme.colors.neutral50 || '#F7F9FC'};
+    content: '';
+    opacity: 1;
+  }
+  ${({ isLoading }) => isLoading && ` opacity: 1; pointer-events: auto; `};
+`;
+const SubotInlineLoadingContainer = styled.div `
+  position: relative;
+  z-index: 1;
+  line-height: 1.5;
+  transition: 0.25s all linear;
+  margin-block: 16px;
+  content-visibility: auto;
+  contain-intrinsic-size: 500px;
+  &.hhg-subot-style {
+    min-height: 100px;
+  }
+  ${MediaQueries.mbDown} {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+`;
+const SubotInline = ({ id, isMobile, articleLink, customUrl, }) => {
+    const currentUrl = useCurrentUrl();
+    const refAccountIdFromLogs = useRef(null);
+    const flag = useRef(null);
+    const [loading, setLoading] = useState(true);
+    const [state, setState] = useState({
+        activeId: '',
+        params: {},
+        nodes: [],
+        getParams: () => ({}),
+    });
+    const userInfo = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.userInfo;
+    const currentNode = useMemo(() => {
+        return state.nodes.find((n) => n.id == state.activeId);
+    }, [state.nodes, state.activeId]);
+    const trackingCommonInline = useMemo(() => ({
+        'data-event-category': 'Subot',
+        'data-event-label': currentUrl,
+        'data-bot-id': state.params.bot_id,
+        'data-bot-type': 'Inline',
+        'data-question-id': typeof (currentNode === null || currentNode === void 0 ? void 0 : currentNode.id) === 'string' ? currentNode === null || currentNode === void 0 ? void 0 : currentNode.id : null,
+    }), [currentNode, currentUrl, state.params.bot_id]);
+    /** Get Params */
+    const getParams = useCallback(() => {
+        var _a, _b, _c, _d;
+        const gaData = window.gaData;
+        const _url = (customUrl || window.location.origin + basePath) +
+            (GlobalData.locale === 'tl-PH'
+                ? articleLink.replace('fil/', '')
+                : articleLink);
+        const params = {
+            bot_id: id,
+            account_id: ((_a = getUserInfoFromCookie()) === null || _a === void 0 ? void 0 : _a.id) || null,
+            action_id: '',
+            action_value: '',
+            cookie_id: getSubotCookieId((_c = (_b = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.router) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.cookie_id),
+            current_score: 0,
+            current_keys: [],
+            current_selected: [],
+            form_submit_meta: [],
+            gtm_id: gaData ? Object.keys(gaData)[0] : '',
+            ga_client_id: Cookies.get('_ga') || '',
+            is_new: false,
+            mode: 'inline',
+            node_id: '',
+            selected_actions: {},
+            title_url: document.title || '',
+            // url: _url,
+            // Keep this commnent line to test on local
+            url: _url
+                .replace('http://localhost', 'https://discover.hellobacsi.com')
+                .replace('dev.', 'discover.'),
+            window_id: getWindowId(),
+        };
+        return overrideParamsByQuery(params, (_d = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.router) === null || _d === void 0 ? void 0 : _d.query);
+    }, []);
+    const elementScrollIntoView = () => {
+        flag.current &&
+            flag.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+                inline: 'start',
+            });
+    };
+    const onChange = (message) => {
+        setState((state) => {
+            var _a;
+            if (message && (message === null || message === void 0 ? void 0 : message.node_id) && (message === null || message === void 0 ? void 0 : message.node_id) == (state === null || state === void 0 ? void 0 : state.activeId)) {
+                const nodeActiveIndex = state.nodes.findIndex(({ id }) => id == (state === null || state === void 0 ? void 0 : state.activeId));
+                if (nodeActiveIndex !== -1) {
+                    const tmpNode = Object.assign(Object.assign({}, state.nodes[nodeActiveIndex]), { _message: Object.assign(Object.assign({}, (_a = state.nodes[nodeActiveIndex]) === null || _a === void 0 ? void 0 : _a._message), message) });
+                    state.nodes[nodeActiveIndex] = tmpNode;
+                }
+            }
+            return Object.assign({}, state);
+        });
+    };
+    const onSubmit = (nextNode, message) => __awaiter(void 0, void 0, void 0, function* () {
+        /**
+         * Skip the OTP Node if user's phone number is verified.
+         */
+        // if (nextNode) {
+        //   const isNextNodeOTP = nextNode.type === NodeType.OTP
+        //   if (isNextNodeOTP && verifiedPhone) {
+        //     const actionOTPSubmit = nextNode.actions?.find(
+        //       (action) => action.type === NodeActionType.USER_SUBMIT_SEND,
+        //     )
+        //     const blockOTPMessage: SubotMessage = {
+        //       ...state.params,
+        //       node_id: nextNode.id,
+        //       action_id: actionOTPSubmit?.id,
+        //       action_value: actionOTPSubmit?.key,
+        //     }
+        //     const res = await subotInlineMessage(blockOTPMessage)
+        //     if (res?._status === 1) {
+        //       const { node: _node, ...restData } = res?._data
+        //       const nextNodeAfterOTP = {
+        //         ..._node,
+        //         _message: { ...restData, node_id: _node.id },
+        //       }
+        //       onSubmit && onSubmit(nextNodeAfterOTP, message)
+        //       return
+        //     }
+        //     pushNotifications({
+        //       title: '',
+        //       message: f({ id: 'notification.comment.somethingWrong' }),
+        //       type: 'danger',
+        //     })
+        //     return
+        //   }
+        // }
+        const _state = Object.assign(Object.assign({}, state), { nodes: [...state.nodes] });
+        if (message && (message === null || message === void 0 ? void 0 : message.node_id)) {
+            const updateNodeIndex = _state.nodes.findIndex(({ id }) => id == message.node_id);
+            if (updateNodeIndex !== -1) {
+                _state.nodes[updateNodeIndex]._message = Object.assign(Object.assign({}, _state.nodes[updateNodeIndex]._message), message);
+                _state.nodes = [..._state.nodes.slice(0, updateNodeIndex + 1)];
+            }
+        }
+        setLoading(true);
+        if (nextNode) {
+            const nextNodeFindIndex = _state.nodes.findIndex(({ id }) => id == (nextNode === null || nextNode === void 0 ? void 0 : nextNode.id));
+            if (nextNodeFindIndex === -1) {
+                _state.nodes = [..._state.nodes, Object.assign({}, nextNode)];
+            }
+            else {
+                const tmpNode = Object.assign(Object.assign(Object.assign({}, _state.nodes[nextNodeFindIndex]), nextNode), { _message: Object.assign(Object.assign({}, _state.nodes[nextNodeFindIndex]._message), nextNode === null || nextNode === void 0 ? void 0 : nextNode._message) });
+                _state.nodes = [
+                    ..._state.nodes.slice(0, nextNodeFindIndex),
+                    Object.assign({}, tmpNode),
+                    ..._state.nodes.slice(nextNodeFindIndex + 1),
+                ];
+            }
+            _state.activeId = nextNode.id;
+        }
+        setTimeout(() => {
+            setState(_state);
+            setLoading(false);
+            _state.activeId &&
+                saveSubotInlineLogs({
+                    nodes: _state.nodes,
+                    activeId: _state.activeId,
+                    params: _state.params,
+                    accountIdFromLogs: refAccountIdFromLogs.current,
+                });
+        }, 250);
+        elementScrollIntoView();
+    });
+    const onPrev = () => {
+        var _a;
+        const _state = Object.assign({}, state);
+        const nodeActiveIndex = (_a = _state === null || _state === void 0 ? void 0 : _state.nodes) === null || _a === void 0 ? void 0 : _a.findIndex(({ id }) => id == (_state === null || _state === void 0 ? void 0 : _state.activeId));
+        if (nodeActiveIndex && nodeActiveIndex !== -1 && nodeActiveIndex > 1) {
+            const prevNode = _state.nodes[nodeActiveIndex - 1];
+            if (prevNode)
+                _state.activeId = prevNode.id;
+        }
+        elementScrollIntoView();
+        setState(Object.assign({}, _state));
+        _state.activeId &&
+            saveSubotInlineLogs({
+                nodes: _state.nodes,
+                activeId: _state.activeId,
+                params: _state.params,
+                accountIdFromLogs: refAccountIdFromLogs.current,
+            });
+    };
+    const onNext = (message) => __awaiter(void 0, void 0, void 0, function* () {
+        if (message && (message === null || message === void 0 ? void 0 : message.node_id)) {
+            const newMessage = Object.assign(Object.assign({}, message), getCurrentTotalDynamicScore(state.nodes, state.activeId, message.action_id));
+            const res = yield subotInlineMessage(newMessage);
+            setLoading(false);
+            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                const _a = res === null || res === void 0 ? void 0 : res._data, { node: _node } = _a, restData = __rest(_a, ["node"]);
+                const _nextNode = Object.assign(Object.assign({}, _node), { _message: Object.assign(Object.assign({}, restData), { node_id: _node.id }) });
+                const nextNodeFindIndex = state.nodes.findIndex(({ id }) => id === _nextNode.id);
+                if (nextNodeFindIndex !== -1) {
+                    onSubmit(_nextNode);
+                }
+                else {
+                    onSubmit(_nextNode, message);
+                }
+                return;
+            }
+        }
+        const nodeActive = state.nodes.find(({ id }) => id == (state === null || state === void 0 ? void 0 : state.activeId));
+        if (nodeActive && !nodeActive.hasOwnProperty('type')) {
+            setLoading(true);
+            if (state.nodes[0].id == (state === null || state === void 0 ? void 0 : state.activeId)) {
+                // elementScrollIntoView()
+                setTimeout(() => {
+                    setState(Object.assign(Object.assign({}, state), { activeId: state.nodes[1].id.toString() }));
+                    setLoading(false);
+                    saveSubotInlineLogs({
+                        nodes: state.nodes,
+                        activeId: state.nodes[1].id.toString(),
+                        params: getParams(),
+                        accountIdFromLogs: refAccountIdFromLogs.current,
+                    });
+                }, 250);
+            }
+        }
+    });
+    const onReset = () => {
+        setLoading(true);
+        setState((state) => {
+            state.nodes = state.nodes.slice(0, 2);
+            state.nodes[1] = Object.assign(Object.assign({}, state.nodes[1]), { _message: undefined });
+            state.activeId = state.nodes[0].id.toString();
+            return Object.assign({}, state);
+        });
+        setTimeout(() => {
+            setLoading(false);
+        }, 250);
+        elementScrollIntoView();
+    };
+    const getFirstAPI = (params) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        if ((params === null || params === void 0 ? void 0 : params.url) && (params === null || params === void 0 ? void 0 : params.bot_id)) {
+            let activeId = '';
+            let nodes = [];
+            setLoading(true);
+            const resFirst = yield subotInlineFirstNode(params.bot_id);
+            if ((resFirst === null || resFirst === void 0 ? void 0 : resFirst._status) === 1) {
+                activeId = resFirst === null || resFirst === void 0 ? void 0 : resFirst._data.id.toString();
+                nodes.push(resFirst === null || resFirst === void 0 ? void 0 : resFirst._data, resFirst === null || resFirst === void 0 ? void 0 : resFirst._data.first_node);
+            }
+            const subotLogs = yield getSubotInlineLogs(nodes[0]);
+            if (subotLogs) {
+                const lastNode = subotLogs.nodes[subotLogs.nodes.length - 1];
+                const isComplete = [
+                    NodeType.FINAL,
+                    NodeType.FINAL_THANK_YOU,
+                    NodeType.FINAL_STANDARD,
+                ].includes(lastNode.type);
+                if (!isComplete) {
+                    nodes = subotLogs.nodes;
+                    activeId = subotLogs.activeId;
+                    refAccountIdFromLogs.current = ((_b = subotLogs.params) === null || _b === void 0 ? void 0 : _b.account_id) || 0;
+                }
+            }
+            /** [Subot Inline] Show result page after redirect from SSO */
+            const previousState = getPreviousStateFromStorage(params.bot_id, {
+                getParams,
+            });
+            if (previousState &&
+                previousState.params.action_id &&
+                previousState.params.action_value) {
+                const resResultInline = yield subotInlineMessage(previousState.params);
+                if ((resResultInline === null || resResultInline === void 0 ? void 0 : resResultInline._status) === 1 && (resResultInline === null || resResultInline === void 0 ? void 0 : resResultInline._data.node)) {
+                    activeId = resResultInline === null || resResultInline === void 0 ? void 0 : resResultInline._data.node.id;
+                    nodes = previousState.listNodes;
+                    nodes[nodes.length - 1] = resResultInline === null || resResultInline === void 0 ? void 0 : resResultInline._data.node;
+                    saveSubotInlineLogs({
+                        nodes,
+                        activeId: activeId,
+                        params: previousState.params,
+                        accountIdFromLogs: refAccountIdFromLogs.current,
+                    });
+                    setTimeout(() => {
+                        elementScrollIntoView();
+                    }, 100);
+                }
+            }
+            const newParams = (previousState === null || previousState === void 0 ? void 0 : previousState.params) || (subotLogs === null || subotLogs === void 0 ? void 0 : subotLogs.params) || params;
+            const _state = Object.assign(Object.assign({}, state), { params: newParams, activeId, nodes: nodes });
+            setLoading(false);
+            setState(_state);
+        }
+    });
+    useEffect(() => {
+        var _a;
+        if (!!((_a = state === null || state === void 0 ? void 0 : state.nodes) === null || _a === void 0 ? void 0 : _a.length)) {
+            console.log('Subot Already Loaded');
+            return () => undefined;
+        }
+        if (!Cookies.get(GA_TOKEN_COOKIE)) {
+            checkUntilFinished({
+                condition: () => Boolean(Cookies.get(GA_TOKEN_COOKIE)),
+                finished: () => {
+                    const params = getParams();
+                    getFirstAPI(params);
+                },
+            });
+        }
+        else {
+            const params = getParams();
+            getFirstAPI(params);
+        }
+    }, []);
+    if (state.nodes.length && !state.nodes[0].inline_active) {
+        return null;
+    }
+    return (React__default.createElement(SubotInlineContext.Provider, { value: Object.assign(Object.assign({}, state), { isMobile,
+            getParams,
+            onChange,
+            onSubmit,
+            onPrev,
+            onNext,
+            onReset,
+            trackingCommonInline,
+            userInfo }) },
+        React__default.createElement(SubotInlineLoadingContainer, { className: classNames('hhg-subot', `hhg-subot-${id}`, !!state.nodes.length && 'hhg-subot-style') }, !!state.nodes.length && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { ref: flag, className: "hhg-flag", style: {
+                    position: 'absolute',
+                    top: -150,
+                    left: 0,
+                    pointerEvents: 'none',
+                } }),
+            React__default.createElement(SubotInlineLoading, { isLoading: !!loading },
+                React__default.createElement(Loading, null),
+                "Verifying..."),
+            state.nodes.map((node, index) => {
+                if (node.id.toString() === (state === null || state === void 0 ? void 0 : state.activeId)) {
+                    if (node.hasOwnProperty('type')) {
+                        let NodeComponent;
+                        switch (node === null || node === void 0 ? void 0 : node.position) {
+                            case NodePosition.SSO:
+                                NodeComponent =
+                                    SubotInlineNodeBase[NodePosition[node === null || node === void 0 ? void 0 : node.position].valueOf()];
+                                break;
+                            default:
+                                NodeComponent =
+                                    SubotInlineNodeBase[NodeType[node === null || node === void 0 ? void 0 : node.type].valueOf()];
+                        }
+                        if (node.is_multi_select &&
+                            node.type !== NodeType.POLL)
+                            NodeComponent = SubotInlineNodeBase['MULTIPLE'];
+                        return (NodeComponent && (React__default.createElement(NodeComponent, { key: index.toString(), indexNumber: index, node: node })));
+                    }
+                    else {
+                        return (React__default.createElement(SubotInlineNodeStart, { key: index.toString(), node: node, setLoading: setLoading }));
+                    }
+                }
+                return null;
+            }))))));
+};
+
 // subot.sendOTP.button
 // subot.resendOTP.button
 // subot.verifyOTP.button
@@ -6458,6 +9611,7 @@ var index = /*#__PURE__*/Object.freeze({
   Markdown: Markdown,
   hexRgb: hexRgb,
   SubotInlineVoucherLeftUI: SubotInlineVoucherLeftUI,
+  SubotInline: SubotInline,
   overrideParamsByQuery: overrideParamsByQuery,
   ssoIntents: ssoIntents,
   checkUntilFinished: checkUntilFinished,
@@ -6473,11 +9627,11 @@ var index = /*#__PURE__*/Object.freeze({
   isFakeEmail: isFakeEmail,
   formatUrlWithEncrypedGa: formatUrlWithEncrypedGa,
   getSubotApiPath: getSubotApiPath,
-  subotInlineMessage: subotInlineMessage,
-  computeExtraSettingsForBot: computeExtraSettingsForBot,
-  subotInlineFirstNode: subotInlineFirstNode,
-  subotInlineClick: subotInlineClick,
-  subotInlineImpression: subotInlineImpression,
+  subotInlineMessage: subotInlineMessage$1,
+  computeExtraSettingsForBot: computeExtraSettingsForBot$1,
+  subotInlineFirstNode: subotInlineFirstNode$1,
+  subotInlineClick: subotInlineClick$1,
+  subotInlineImpression: subotInlineImpression$1,
   PATHS: PATHS$1,
   getPreviousStateFromStorage: getPreviousStateFromStorage,
   getSubotInlineLogs: getSubotInlineLogs,
@@ -6488,7 +9642,7 @@ var index = /*#__PURE__*/Object.freeze({
   detectToSkipNodeStart: detectToSkipNodeStart,
   KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD: KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD,
   SubotInlineIntentBaseTarget: SubotInlineIntentBaseTarget,
-  SubotInlineIntentBase: SubotInlineIntentBase,
+  SubotInlineIntentBase: SubotInlineIntentBase$1,
   checkSyncDataOnFrisoCampaign: checkSyncDataOnFrisoCampaign,
   handleFrisoRedirecition: handleFrisoRedirecition,
   getDynamicScore: getDynamicScore,
@@ -6496,4 +9650,4 @@ var index = /*#__PURE__*/Object.freeze({
   replaceTextWithVariables: replaceTextWithVariables
 });
 
-export { KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD, Markdown, PATHS$1 as PATHS, SubotInlineIntentBase, SubotInlineIntentBaseTarget, SubotInlineRevampWithTheme, SubotInlineVoucherLeftUI, UserInfoForm, checkSyncDataOnFrisoCampaign, computeExtraSettingsForBot, ContainerWithProvider as default, detectToSkipNodeStart, extractUnifiedAnswers, extractVoucherAnswers, getColorWithOpacity, getCurrentTotalDynamicScore, getDynamicScore, getPreviousStateFromStorage, getSubotApiPath, getSubotInlineLogs, handleFrisoRedirecition, hexRgb, replaceTextWithVariables, saveSubotInlineLogs, subotInlineClick, subotInlineFirstNode, subotInlineImpression, subotInlineMessage };
+export { KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD, Markdown, PATHS$1 as PATHS, SubotInline, SubotInlineIntentBase$1 as SubotInlineIntentBase, SubotInlineIntentBaseTarget, SubotInlineRevampWithTheme, SubotInlineVoucherLeftUI, UserInfoForm, checkSyncDataOnFrisoCampaign, computeExtraSettingsForBot$1 as computeExtraSettingsForBot, ContainerWithProvider as default, detectToSkipNodeStart, extractUnifiedAnswers, extractVoucherAnswers, getColorWithOpacity, getCurrentTotalDynamicScore, getDynamicScore, getPreviousStateFromStorage, getSubotApiPath, getSubotInlineLogs, handleFrisoRedirecition, hexRgb, replaceTextWithVariables, saveSubotInlineLogs, subotInlineClick$1 as subotInlineClick, subotInlineFirstNode$1 as subotInlineFirstNode, subotInlineImpression$1 as subotInlineImpression, subotInlineMessage$1 as subotInlineMessage };