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

package/build/subot.js

@@ -3,77 +3,82 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index$2 = require('./index-53be3962.js');
-var tslib_es6 = require('./tslib.es6-4a797eff.js');
-var index$3 = require('./index-9b546f20.js');
+var index$2 = require('./index-2f7adb56.js');
+var tslib_es6 = require('./tslib.es6-32438f57.js');
+var index$3 = require('./index-9a36414e.js');
 var Cookies = require('js-cookie');
 var fd = require('fastdom');
 var fastdomPromised = require('fastdom/extensions/fastdom-promised');
-var togetherComponentGlobalContext = require('./utils-08e02596.js');
+var togetherComponentGlobalContext = require('./utils-8b3db262.js');
 var formatString = require('string-format');
-var index$1 = require('./index-791182a1.js');
+var index$1 = require('./index-487227c1.js');
 var dayjs = require('dayjs');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var classNames = require('classnames');
-var index$b = require('./index-33dba9cd.js');
-var index$a = require('./index-84dd735a.js');
+var index$b = require('./index-1d983f41.js');
+var index$a = require('./index-7a8db159.js');
 var framerMotion = require('framer-motion');
 var styled = require('@emotion/styled');
-var utils = require('./utils-a42d098a.js');
-var index$4 = require('./index-77e110f2.js');
+var utils = require('./utils-4e787da9.js');
+var index$4 = require('./index-048722ab.js');
 var remarkable = require('remarkable');
 var other = require('@hhgtech/icons/other');
 var reactIntersectionObserver = require('react-intersection-observer');
 var core = require('@mantine/core');
-var index$5 = require('./index-be6985c5.js');
+var index$5 = require('./index-4890570c.js');
 var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
-var constants = require('./constants-7b4d3f11.js');
+var constants = require('./constants-87793bc2.js');
 var uuid = require('uuid');
-var index$6 = require('./index-cffc4281.js');
+var index$6 = require('./index-f0e815f1.js');
 var miscTheme = require('./miscTheme.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var index$7 = require('./index-77d6cac2.js');
+var index$7 = require('./index-c06fecd6.js');
 require('@mantine/dates');
-require('./index-0912b470.js');
-require('./index-2bcb7fb6.js');
-require('./index.styles-6ba02a76.js');
-require('./translationsContext-d610fe38.js');
+require('./index-9ec9f9d4.js');
+require('./index-4e847075.js');
+require('./index.styles-d012f777.js');
+require('./translationsContext-2057a072.js');
 require('@mantine/hooks');
-require('./index-2de1864d.js');
+require('./index-5ab55624.js');
 var isEmpty = require('lodash/isEmpty');
 var reactHookForm = require('react-hook-form');
 var PhoneInputBase = require('react-phone-number-input');
 var api = require('@react-google-maps/api');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-f9c22817.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-6bb93dd8.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
-var Locale = require('./Locale-788d4cb6.js');
-var InputDate = require('./InputDate-3636db90.js');
-var index$8 = require('./index-62e5d1e3.js');
-var index$9 = require('./index-9fee1060.js');
-var store = require('./store-c771d6e1.js');
-var utils$1 = require('./utils-dccb42b6.js');
+var Locale = require('./Locale-f24f8e73.js');
+var InputDate = require('./InputDate-aa02d9a5.js');
+var index$8 = require('./index-a44ea4a0.js');
+var index$9 = require('./index-68feb624.js');
+var store = require('./store-6620f22f.js');
+var utils$1 = require('./utils-f888ab19.js');
+var index$c = require('./index-787cf506.js');
+var StarRatings = require('react-star-ratings');
+var moleculesArticleCard = require('./moleculesArticleCard.js');
+var index$d = require('./index-34a55146.js');
+var index$e = require('./index-3d4023fb.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
-require('./index-1029ee59.js');
+require('./index-a5ed4245.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('./togetherApiPaths.js');
-require('./index-d261736c.js');
-require('./WhatsApp-4e8363c9.js');
-require('./Spinner-43a43219.js');
-require('./index-51ffa1f5.js');
-require('./shared-7eff181c.js');
-require('./index-6ef4a34b.js');
+require('./index-4f881245.js');
+require('./WhatsApp-cd094714.js');
+require('./Spinner-4e5067bf.js');
+require('./index-366354c9.js');
+require('./shared-d5ae85ac.js');
+require('./index-eb8ad24a.js');
 require('@mantine/carousel');
-require('./useUniqueId-7fa06486.js');
+require('./useUniqueId-80352f05.js');
 require('@emotion/react');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
 require('zustand');
-require('./index-1990eff6.js');
-require('./normalizeLink-678e875a.js');
-require('./healthTools-eb1ccbaa.js');
+require('./index-0570f20a.js');
+require('./normalizeLink-cb644fd3.js');
+require('./healthTools-4e928273.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -88,6 +93,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 var isSameOrBefore__default = /*#__PURE__*/_interopDefault(isSameOrBefore);
 var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty);
 var PhoneInputBase__default = /*#__PURE__*/_interopDefault(PhoneInputBase);
+var StarRatings__default = /*#__PURE__*/_interopDefault(StarRatings);
 
 // extend fastdom
 const fastdom = fd__default["default"].extend(fastdomPromised__default["default"]);
@@ -169,7 +175,7 @@ const getSubotApiPath = (path, params) => {
     return apiUrl + formatString__default["default"](path, Object.assign({}, params));
 };
 /** inline message */
-const subotInlineMessage = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+const subotInlineMessage$1 = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
     try {
         return yield togetherComponentGlobalContext.callApi(getSubotApiPath(PATHS$1.GET_INLINE_MESSAGE), 'POST', {
             data,
@@ -177,7 +183,7 @@ const subotInlineMessage = (data) => tslib_es6.__awaiter(void 0, void 0, void 0,
     }
     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 {
@@ -200,11 +206,11 @@ const computeExtraSettingsForBot = (data) => {
     return data;
 };
 /** inline first node */
-const subotInlineFirstNode = (id) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+const subotInlineFirstNode$1 = (id) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
     try {
         const data = yield CachedSystem.withCached('SubotInlineFirstNode/' + id, () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
             const response = yield togetherComponentGlobalContext.callApi(getSubotApiPath(PATHS$1.GET_INLINE_FIRST_NODE) + `/${id}`, 'GET');
-            computeExtraSettingsForBot(response);
+            computeExtraSettingsForBot$1(response);
             return response;
         }));
         return data;
@@ -214,7 +220,7 @@ const subotInlineFirstNode = (id) => tslib_es6.__awaiter(void 0, void 0, void 0,
     }
 });
 /** inline click */
-const subotInlineClick = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+const subotInlineClick$1 = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
     try {
         return yield togetherComponentGlobalContext.callApi(getSubotApiPath(PATHS$1.GET_INLINE_CLICK), 'POST', {
             data,
@@ -223,7 +229,7 @@ const subotInlineClick = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, f
     catch (error) { }
 });
 /** inline impression */
-const subotInlineImpression = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+const subotInlineImpression$1 = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
     try {
         return yield togetherComponentGlobalContext.callApi(getSubotApiPath(PATHS$1.GET_INLINE_IMPRESSION), 'POST', {
             data,
@@ -822,7 +828,7 @@ const detectToSkipNodeStart = (botItem, currentActiveId, currentListNodes) => {
     return [currentActiveId, currentListNodes];
 };
 
-const SubotInlineContext = React.createContext({
+const SubotInlineContext$1 = React.createContext({
     activeId: '',
     params: {},
     listNodes: [],
@@ -838,7 +844,7 @@ const SubotInlineContext = React.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 }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
     const ref = React.useRef(null);
     // const { formatMessage: f } = useIntl()
@@ -885,8 +891,7 @@ const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer,
     /** Get Params */
     const getParams = React.useCallback(() => {
         const gaData = window.gaData;
-        const url = window.location.origin +
-            index$3.basePath +
+        const url = (customUrl || window.location.origin + index$3.basePath) +
             ((togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.locale) === 'tl-PH'
                 ? articleLink.replace('fil/', '')
                 : articleLink);
@@ -935,7 +940,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);
@@ -953,7 +958,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;
@@ -1022,7 +1027,7 @@ const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer,
     const onNext = React.useCallback((messageParams) => tslib_es6.__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 = tslib_es6.__rest(_b, ["node"]);
@@ -1170,7 +1175,7 @@ const SubotInlineProvider = ({ children, articleLink, subotId, isFullContainer,
     if (!listNodes.length) {
         return null;
     }
-    return (React__default["default"].createElement(SubotInlineContext.Provider, { value: value },
+    return (React__default["default"].createElement(SubotInlineContext$1.Provider, { value: value },
         React__default["default"].createElement("div", { ref: ref }, children)));
 };
 
@@ -1674,7 +1679,7 @@ const Container$u = () => {
     var _a, _b, _c;
     const { formatMessage: f, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
     const currentUrl = useCurrentUrl();
-    const { listNodes, activeId, isShowFooter, onNext, onPrev, params, onStartOver, loading, } = React.useContext(SubotInlineContext);
+    const { listNodes, activeId, isShowFooter, onNext, onPrev, params, onStartOver, loading, } = React.useContext(SubotInlineContext$1);
     const { value } = React.useContext(NodeContext);
     const validation = useValidationMultiOption();
     const botItem = listNodes[0];
@@ -2066,7 +2071,7 @@ const Container$s = ({ node, onClickStart }) => {
     const refImpression = React.useRef(false);
     const { ref, inView } = reactIntersectionObserver.useInView();
     const currentUrl = useCurrentUrl();
-    const { params, getParams, onNext, setIsShowFooter, listNodes } = React.useContext(SubotInlineContext);
+    const { params, getParams, onNext, setIsShowFooter, listNodes } = React.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;
     React.useMemo(() => {
@@ -2076,14 +2081,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 = index$1.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();
@@ -2362,7 +2367,7 @@ const handleFrisoRedirecition = (listNode) => {
 
 const Container$r = ({ intent }) => {
     var _a;
-    const { listNodes } = React.useContext(SubotInlineContext);
+    const { listNodes } = React.useContext(SubotInlineContext$1);
     const handleOnClick = () => {
         var _a;
         if ((_a = intent.url) === null || _a === void 0 ? void 0 : _a.includes('{{.frisoRedirectUrl}}')) {
@@ -2418,7 +2423,7 @@ const Container$q = ({ intent }) => {
 Container$q.displayName = 'SubotInlineIntentBotImage';
 
 const Container$p = ({ intent, indexNumber }) => {
-    const { listNodes } = React.useContext(SubotInlineContext);
+    const { listNodes } = React.useContext(SubotInlineContext$1);
     const isShowLabel = ![index$2.NodeIntentType.SSO_INTENT].includes(intent === null || intent === void 0 ? void 0 : intent.type);
     const isText = [
         index$2.NodeIntentType.BOT_TEXT,
@@ -2452,7 +2457,7 @@ Container$p.displayName = 'SubotInlineIntentBotTitle';
 
 const Container$o = ({ intent }) => {
     const currentUrl = useCurrentUrl();
-    const { listNodes, activeId, params } = React.useContext(SubotInlineContext);
+    const { listNodes, activeId, params } = React.useContext(SubotInlineContext$1);
     const foundNode = listNodes.find((n) => n.id == activeId);
     if (!intent.label || !foundNode) {
         return null;
@@ -2793,7 +2798,7 @@ const StyledWrap$e = styled__default["default"].div `
 `;
 
 const Container$k = ({ intent }) => {
-    const { listNodes } = React.useContext(SubotInlineContext);
+    const { listNodes } = React.useContext(SubotInlineContext$1);
     if (!(intent === null || intent === void 0 ? void 0 : intent.label)) {
         return null;
     }
@@ -2854,15 +2859,15 @@ const Container$j = ({ intent }) => {
 };
 Container$j.displayName = 'SubotInlineIntentSSO';
 
-var _a$1;
-const SubotInlineIntentCol = styled__default["default"].div `
+var _a$2;
+const SubotInlineIntentCol$1 = styled__default["default"].div `
   width: ${({ width }) => width || '100%'};
   padding: 4px;
   ${utils.MediaQueries.mbDown} {
     width: 100%;
   }
 `;
-const SubotInlineIntentUrlContainer = styled__default["default"].div `
+const SubotInlineIntentUrlContainer$1 = styled__default["default"].div `
   display: flex;
   .feature {
     width: 30%;
@@ -2890,7 +2895,7 @@ const SubotInlineIntentUrlContainer = styled__default["default"].div `
     margin-left: 10px;
     line-height: 1.5;
     a {
-      color: ${((_a$1 = miscTheme.theme === null || miscTheme.theme === void 0 ? void 0 : miscTheme.theme.colors) === null || _a$1 === void 0 ? void 0 : _a$1.gray800) || '#262626'};
+      color: ${((_a$2 = miscTheme.theme === null || miscTheme.theme === void 0 ? void 0 : miscTheme.theme.colors) === null || _a$2 === void 0 ? void 0 : _a$2.gray800) || '#262626'};
       text-decoration: none;
     }
   }
@@ -2900,8 +2905,8 @@ const Container$i = ({ intent, }) => {
     const article = React.useMemo(() => intent.label.includes('{')
         ? JSON.parse(intent.label)
         : {}, [intent.label]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, !!Object.keys(article).length && (React__default["default"].createElement(SubotInlineIntentCol, null,
-        React__default["default"].createElement(SubotInlineIntentUrlContainer, null,
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, !!Object.keys(article).length && (React__default["default"].createElement(SubotInlineIntentCol$1, null,
+        React__default["default"].createElement(SubotInlineIntentUrlContainer$1, null,
             React__default["default"].createElement("div", { className: "feature" },
                 React__default["default"].createElement("a", { href: article === null || article === void 0 ? void 0 : article.url, className: "feature-wrapper" },
                     React__default["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" }))),
@@ -2938,7 +2943,7 @@ const SubotInlineIntentBaseTarget = {
     /** intents fake for sso block */
     [index$2.NodeIntentType.SSO_INTENT]: Container$j,
 };
-const SubotInlineIntentBase = new Proxy(SubotInlineIntentBaseTarget, {
+const SubotInlineIntentBase$1 = new Proxy(SubotInlineIntentBaseTarget, {
     get(_, prop) {
         const UnknowComponent = () => {
             if (constantsIsProduction.isProduction)
@@ -2965,7 +2970,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["default"].createElement(NodeIntent, { key: intent.id, intent: intent });
         })))));
 };
@@ -2973,7 +2978,7 @@ Container$h.displayName = 'SubotInlineIntent';
 
 const Container$g = ({ node }) => {
     var _a, _b;
-    const { setIsShowFooter, listNodes } = React.useContext(SubotInlineContext);
+    const { setIsShowFooter, listNodes } = React.useContext(SubotInlineContext$1);
     const botItem = listNodes[0];
     React.useMemo(() => {
         setIsShowFooter(true);
@@ -3164,7 +3169,7 @@ const SubInlineIntent = ({ subIntents }) => {
             React__default["default"].createElement(ChevronDown, { className: "si-chevron-down" })),
         React__default["default"].createElement(framerMotion.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["default"].createElement(NodeIntent, { key: intent.id, intent: intent });
         }))));
 };
@@ -3175,7 +3180,7 @@ const Container$f = ({ node }) => {
     // const isMobile = useGetIsMobile(true)
     const refMainIntents = React.useRef(null);
     const { formatMessage: f } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
-    const { setIsShowFooter, listNodes } = React.useContext(SubotInlineContext);
+    const { setIsShowFooter, listNodes } = React.useContext(SubotInlineContext$1);
     const [isShowMore, setIsShowMore] = React.useState(false);
     React.useEffect(() => {
         var _a;
@@ -3280,11 +3285,11 @@ const Container$f = ({ node }) => {
             defaultMessage: 'See more',
         }))),
         React__default["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["default"].createElement(NodeIntent, { key: intent.id, intent: intent });
         })),
         (suggestedServiceIntents === null || suggestedServiceIntents === void 0 ? void 0 : suggestedServiceIntents.length) > 0 && (React__default["default"].createElement("div", null, suggestedServiceIntents.map((intent) => {
-            const NodeIntent = SubotInlineIntentBase[intent.type || ''];
+            const NodeIntent = SubotInlineIntentBase$1[intent.type || ''];
             return NodeIntent && React__default["default"].createElement(NodeIntent, { key: intent.id, intent: intent });
         }))),
         (relatedArticleIntents === null || relatedArticleIntents === void 0 ? void 0 : relatedArticleIntents.length) > 0 && (React__default["default"].createElement("div", { style: { marginTop: 24 } },
@@ -3293,7 +3298,7 @@ const Container$f = ({ node }) => {
                 defaultMessage: 'Related Articles',
             })),
             React__default["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["default"].createElement(NodeIntent, { key: intent.id, intent: intent }));
             })))),
         React__default["default"].createElement(SubInlineIntent, { subIntents: subIntents })));
@@ -3307,7 +3312,7 @@ const StyledWrap$b = styled__default["default"].div `
 `;
 
 const Container$e = ({ node }) => {
-    const { params, onNext, setIsShowFooter } = React.useContext(SubotInlineContext);
+    const { params, onNext, setIsShowFooter } = React.useContext(SubotInlineContext$1);
     React.useMemo(() => {
         setIsShowFooter(true);
     }, []);
@@ -3719,7 +3724,7 @@ const CountDown = ({ onFinish, onClick, isFinished, resendLabel, className }, re
 };
 var CountDown$1 = React.forwardRef(CountDown);
 
-styled__default["default"].div `
+const StyledUserInfoFormContainer$1 = styled__default["default"].div `
   margin: 0 auto;
   background: #f7f9fc;
   border-radius: ${miscTheme.theme.borderRadius};
@@ -4651,7 +4656,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__default["default"].div `
   display: flex;
   align-items: center;
@@ -4663,21 +4668,21 @@ const StyledPhoneCode = styled__default["default"].div `
     border-radius: 2px;
   }
   > div {
-    color: ${((_a = miscTheme.theme.colors) === null || _a === void 0 ? void 0 : _a.gray800) || ''};
+    color: ${((_a$1 = miscTheme.theme.colors) === null || _a$1 === void 0 ? void 0 : _a$1.gray800) || ''};
     white-space: nowrap;
   }
 `;
 styled__default["default"](PhoneInputBase__default["default"]) `
   display: flex;
-  border: 1px solid ${((_b = miscTheme.theme.colors) === null || _b === void 0 ? void 0 : _b.gray200) || ''};
+  border: 1px solid ${((_b$1 = miscTheme.theme.colors) === null || _b$1 === void 0 ? void 0 : _b$1.gray200) || ''};
   border-radius: ${miscTheme.theme === null || miscTheme.theme === void 0 ? void 0 : miscTheme.theme.borderRadius};
   .PhoneInputCountry {
     position: relative;
     padding: 12px 8px 12px 16px;
-    border-right: 1px solid ${((_c = miscTheme.theme.colors) === null || _c === void 0 ? void 0 : _c.gray200) || ''};
-    background-color: ${((_d = miscTheme.theme.colors) === null || _d === void 0 ? void 0 : _d.gray100) || ''};
+    border-right: 1px solid ${((_c$1 = miscTheme.theme.colors) === null || _c$1 === void 0 ? void 0 : _c$1.gray200) || ''};
+    background-color: ${((_d$1 = miscTheme.theme.colors) === null || _d$1 === void 0 ? void 0 : _d$1.gray100) || ''};
     border-radius: 6px 0 0 6px;
-    color: ${((_e = miscTheme.theme.colors) === null || _e === void 0 ? void 0 : _e.gray800) || ''};
+    color: ${((_e$1 = miscTheme.theme.colors) === null || _e$1 === void 0 ? void 0 : _e$1.gray800) || ''};
     .PhoneInputCountrySelect {
       position: absolute;
       top: 0;
@@ -5514,14 +5519,14 @@ const StyledWrap$a = styled__default["default"].div `
 const Container$d = ({ node, indexNumber }) => {
     var _a;
     const locale = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.locale;
-    const { params, listNodes, activeId, onSubmit, setIsShowFooter } = React.useContext(SubotInlineContext);
+    const { params, listNodes, activeId, onSubmit, setIsShowFooter } = React.useContext(SubotInlineContext$1);
     React.useMemo(() => {
         setIsShowFooter(true);
     }, []);
     const handleSubmit = (data) => tslib_es6.__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 = tslib_es6.__rest(_b, ["node"]);
@@ -5686,7 +5691,7 @@ const StyledWrap$7 = styled__default["default"].div `
 `;
 const Container$c = ({ action, active, onChange, htmlType, }) => {
     const currentUrl = useCurrentUrl();
-    const { params } = React.useContext(SubotInlineContext);
+    const { params } = React.useContext(SubotInlineContext$1);
     return (React__default["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["default"].createElement("div", { className: "si-action-image-wrap" },
             React__default["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 })),
@@ -5702,7 +5707,7 @@ const StyledWrap$6 = styled__default["default"].div `
 `;
 const Container$b = ({ action, onChange }) => {
     const currentUrl = useCurrentUrl();
-    const { params, activeId } = React.useContext(SubotInlineContext);
+    const { params, activeId } = React.useContext(SubotInlineContext$1);
     return (React__default["default"].createElement(StyledWrap$6, null,
         React__default["default"].createElement(index$4.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: {
@@ -5764,7 +5769,7 @@ const Container$a = ({ action, onChange, active, htmlType, formSubmitMeta, }) =>
     const currentUrl = useCurrentUrl();
     const inputRef = React.useRef(null);
     const [otherText, setOtherText] = React.useState('');
-    const { params } = React.useContext(SubotInlineContext);
+    const { params } = React.useContext(SubotInlineContext$1);
     const isActionPollWithOther = (action === null || action === void 0 ? void 0 : action.type) === index$2.NodeActionType.POLL_CHOICE_TEXT_BY_INPUT;
     const isActionSelectWithOther = (action === null || action === void 0 ? void 0 : action.type) === index$2.NodeActionType.USER_CHOICE_TEXT_BY_INPUT ||
         isActionPollWithOther;
@@ -5848,7 +5853,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 (constantsIsProduction.isProduction)
@@ -5879,14 +5884,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["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 } = React.useContext(SubotInlineContext);
+    const { params, listNodes, activeId, onSubmit, setIsShowFooter, setLoading } = React.useContext(SubotInlineContext$1);
     const { value, setValue } = React.useContext(NodeContext);
     React.useMemo(() => {
         setIsShowFooter(true);
@@ -5901,7 +5906,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 = tslib_es6.__rest(_a, ["node"]);
@@ -5926,7 +5931,7 @@ const StyledWrap$3 = styled__default["default"].div `
 
 const Container$5 = ({ node, indexNumber }) => {
     var _a;
-    const { setIsShowFooter, onChange } = React.useContext(SubotInlineContext);
+    const { setIsShowFooter, onChange } = React.useContext(SubotInlineContext$1);
     const { value, setValue } = React.useContext(NodeContext);
     React.useMemo(() => {
         setIsShowFooter(true);
@@ -6038,7 +6043,7 @@ const StyledWrap$2 = styled__default["default"].div `
 `;
 
 const Container$4 = ({ node, indexNumber }) => {
-    const { onChange, setIsShowFooter } = React.useContext(SubotInlineContext);
+    const { onChange, setIsShowFooter } = React.useContext(SubotInlineContext$1);
     const { value, setValue } = React.useContext(NodeContext);
     const descriptionNode = useDescriptionPollNode({ node });
     React.useMemo(() => {
@@ -6113,7 +6118,7 @@ const StyledWrap$1 = styled__default["default"].div ``;
 const Container$3 = ({ node }) => {
     const refIsTrigger = React.useRef(false);
     const { formatMessage: f, data: { userInfo }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
-    const { params, setIsShowFooter, listNodes, activeId } = React.useContext(SubotInlineContext);
+    const { params, setIsShowFooter, listNodes, activeId } = React.useContext(SubotInlineContext$1);
     React.useMemo(() => {
         setIsShowFooter(true);
     }, []);
@@ -6175,7 +6180,7 @@ const StyledWrap = styled__default["default"].div `
 `;
 
 const Container$2 = ({ node, indexNumber }) => {
-    const { params, onSubmit, setIsShowFooter, listNodes, activeId, setLoading, onChange, } = React.useContext(SubotInlineContext);
+    const { params, onSubmit, setIsShowFooter, listNodes, activeId, setLoading, onChange, } = React.useContext(SubotInlineContext$1);
     const { value, setValue } = React.useContext(NodeContext);
     React.useMemo(() => {
         setIsShowFooter(true);
@@ -6191,7 +6196,7 @@ const Container$2 = ({ node, indexNumber }) => {
     const handleOnChangeNormal = (action) => tslib_es6.__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 = tslib_es6.__rest(_a, ["node"]);
@@ -6239,7 +6244,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 (constantsIsProduction.isProduction)
@@ -6254,7 +6259,7 @@ const SubotInlineNodeBase = new Proxy(SubotInlineNodeBaseTarget, {
 
 const Container$1 = ({ onClickStart }) => {
     var _a;
-    const { listNodes, activeId, isDisabledAnimationOnMobile } = React.useContext(SubotInlineContext);
+    const { listNodes, activeId, isDisabledAnimationOnMobile } = React.useContext(SubotInlineContext$1);
     const foundIdx = React.useMemo(() => {
         return listNodes.findIndex((n) => n.id == activeId);
     }, [listNodes, activeId]);
@@ -6275,10 +6280,10 @@ const Container$1 = ({ onClickStart }) => {
     const nodeType = index$2.NodeType[node.type].valueOf();
     const nodeTypeSSO = (_a = index$2.NodePosition[node.position]) === null || _a === void 0 ? void 0 : _a.valueOf();
     let NodeComponent = node.position === index$2.NodePosition.SSO
-        ? SubotInlineNodeBase[nodeTypeSSO]
-        : SubotInlineNodeBase[nodeType];
+        ? SubotInlineNodeBase$1[nodeTypeSSO]
+        : SubotInlineNodeBase$1[nodeType];
     if (node.is_multi_select && node.type !== index$2.NodeType.POLL) {
-        NodeComponent = SubotInlineNodeBase['MULTIPLE'];
+        NodeComponent = SubotInlineNodeBase$1['MULTIPLE'];
     }
     return (React__default["default"].createElement(framerMotion.motion.div, { key: node.id, initial: { opacity: 1, y: -300 }, animate: { opacity: 1, y: 0 }, transition: {
             y: { type: 'spring', stiffness: 300, damping: 30 },
@@ -6316,7 +6321,7 @@ const View = ({ loading, backgroundImage, isShowFooter, isFullContainer, isDisab
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
     }), [backgroundImage]);
-    const { isMobile, locale } = React.useContext(SubotInlineContext);
+    const { isMobile, locale } = React.useContext(SubotInlineContext$1);
     const [isDisplayFullMobile, setIsDisplayFullMobile] = React.useState(false);
     React.useEffect(() => {
         if (isDisplayFullMobile) {
@@ -6379,7 +6384,7 @@ const ViewWithMemo = React.memo(View);
 ViewWithMemo.displayName = 'SubotInlineRevampView';
 
 const Container = () => {
-    const { loading, listNodes, isShowFooter, activeId, isFullContainer, isDisabledAnimationOnMobile, onCloseMobile, userInfo, bgImgFullContainer, typeFormProps, } = React.useContext(SubotInlineContext);
+    const { loading, listNodes, isShowFooter, activeId, isFullContainer, isDisabledAnimationOnMobile, onCloseMobile, userInfo, bgImgFullContainer, typeFormProps, } = React.useContext(SubotInlineContext$1);
     const backgroundImage = React.useMemo(() => {
         var _a, _b;
         const foundNode = listNodes.find((n) => n.id == activeId);
@@ -6436,6 +6441,3155 @@ const SubotInlineRevampWithTheme = (props) => {
     return (React__default["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 = React.createContext({
+    activeId: '',
+    params: {},
+    nodes: [],
+    getParams: () => ({}),
+    trackingCommonInline: {},
+});
+/** inline click */
+const subotInlineClick = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        return yield togetherComponentGlobalContext.callApi(getSubotApiPath(PATHS$1.GET_INLINE_CLICK), 'POST', {
+            data,
+        });
+    }
+    catch (error) { }
+});
+/** inline impression */
+const subotInlineImpression = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        return yield togetherComponentGlobalContext.callApi(getSubotApiPath(PATHS$1.GET_INLINE_IMPRESSION), 'POST', {
+            data,
+        });
+    }
+    catch (error) { }
+});
+/** inline message */
+const subotInlineMessage = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        return yield togetherComponentGlobalContext.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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const data = yield togetherComponentGlobalContext.callApi(getSubotApiPath(PATHS$1.GET_INLINE_FIRST_NODE) + `/${id}`, 'GET');
+        computeExtraSettingsForBot(data);
+        return data;
+    }
+    catch (error) { }
+});
+
+const SubotInlineFormContainer = styled__default["default"].div `
+  margin-top: 2rem;
+  .form {
+    background-color: ${miscTheme.theme.colors.white || '#fff'};
+  }
+`;
+const SubotInlineIntentContainer = styled__default["default"].div ``;
+const SubotInlineActionContainer = styled__default["default"].div `
+  margin-top: 1.25rem;
+`;
+const SubotInlineReviewContainer = styled__default["default"].div `
+  margin-bottom: 1rem;
+`;
+const SubotInlineDescription$1 = styled__default["default"].div `
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: #595959;
+  font-style: italic;
+`;
+const SubotInlineFinalButton = styled__default["default"](index$8.Button) `
+  position: relative;
+  min-width: 180px;
+  svg {
+    path {
+      stroke: currentColor;
+    }
+  }
+  &:hover {
+    svg {
+      path {
+        stroke: currentColor;
+      }
+    }
+  }
+`;
+const SubotInlineFinalMoreContainer = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const SubotInlineFinalWrapper = styled__default["default"].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,
+      ${miscTheme.theme.colors.neutral50 || '#F7F9FC'} 0%,
+      transparent 100%
+    );
+    content: '';
+    pointer-events: none;
+    ${({ isMore }) => isMore && `opacity: 0;`}
+  }
+`;
+const SubotInlineFinalContainer = styled__default["default"].div `
+  position: relative;
+  padding: 32px 32px 16px;
+  background-color: ${miscTheme.theme.colors.neutral50 || '#F7F9FC'};
+  border-radius: ${miscTheme.theme.borderRadius};
+  ${utils.MediaQueries.tdDown} {
+    padding: 24px 24px 16px;
+  }
+  ${utils.MediaQueries.mbDown} {
+    padding: 16px;
+    border-radius: 0px;
+  }
+`;
+const SubotInlineWrapper$1 = styled__default["default"].div `
+  padding: 12px 32px 32px;
+  ${utils.MediaQueries.tdDown} {
+    padding: 12px 24px 24px;
+  }
+  ${utils.MediaQueries.mbDown} {
+    padding: 12px 16px 16px;
+  }
+`;
+const SubotInlineContainer$1 = styled__default["default"].div `
+  border: 1px solid ${miscTheme.theme.colors.neutral100 || '#E4E8EC'};
+  background-color: ${miscTheme.theme.colors.neutral50 || '#F7F9FC'};
+  border-radius: ${miscTheme.theme.borderRadius};
+  ${utils.MediaQueries.mbDown} {
+    border: none;
+  }
+`;
+
+const CheckboxIcon = (props) => (React__default["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["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["default"].createElement("path", { d: "M15.5714 8L9.67857 14L7 11.2727", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const CheckIcon = (props) => (React__default["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["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["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["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["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["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["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["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["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["default"].createElement("path", { d: "M1 1L5 5L9 1", stroke: "#595959", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const ArrowLeft = (props) => (React__default["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["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["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["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["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["default"].createElement("path", { d: "M1 5L5 1L9 5", stroke: "#FC5D9A", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const ChevronRightActive = (props) => (React__default["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["default"].createElement("path", { d: "M6 12L10 8L6 4", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const RotateLeft = (props) => (React__default["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["default"].createElement("g", { clipPath: "url(#clip0)" },
+        React__default["default"].createElement("path", { d: "M0.666626 2.6665V6.6665H4.66663", stroke: "#737373", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__default["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["default"].createElement("defs", null,
+        React__default["default"].createElement("clipPath", { id: "clip0" },
+            React__default["default"].createElement("rect", { width: "16", height: "16", fill: "white" })))));
+
+var _a, _b, _c, _d, _e, _f, _g;
+const SubotInlineButtonReaction = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 24px;
+  border: 1px solid ${miscTheme.theme.colors.neutral100 || '#E4E8EC'};
+  background-color: ${miscTheme.theme.colors.white || 'white'};
+  border-radius: 32px;
+  cursor: pointer;
+  transition: 0.25s all linear;
+  svg {
+    height: 16px;
+    margin-right: 3px;
+  }
+  &:hover {
+    background-color: ${miscTheme.theme.colors.neutral100};
+  }
+  &.active {
+    background-color: ${miscTheme.theme.colors.primaryActive};
+    color: ${miscTheme.theme.colors.white || '#fff'};
+    svg {
+      stroke: ${miscTheme.theme.colors.white || '#fff'};
+    }
+  }
+`;
+const SubotInlineButtonReview = styled__default["default"].div `
+  padding: 12px 24px;
+  border: 1px solid ${miscTheme.theme.colors.neutral100 || '#E4E8EC'};
+  background-color: ${miscTheme.theme.colors.white || 'white'};
+  border-radius: 32px;
+  cursor: pointer;
+  transition: 0.25s all linear;
+  &.active {
+    background-color: ${(_a = miscTheme.theme.colors) === null || _a === void 0 ? void 0 : _a.primaryActive};
+    color: ${miscTheme.theme.colors.white || '#fff'};
+    svg {
+      stroke: ${miscTheme.theme.colors.white || '#fff'};
+    }
+  }
+`;
+const SubotInlineActionText = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  border: 1px solid
+    ${({ active }) => active
+    ? miscTheme.theme.colors.primaryBase || '#2685F1'
+    : miscTheme.theme.colors.white || '#fff'};
+  background-color: ${miscTheme.theme.colors.white || '#fff'};
+  border-radius: ${miscTheme.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
+    ? miscTheme.theme.colors.primaryBase || '#2685F1'
+    : miscTheme.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: ${miscTheme.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 = miscTheme.theme.colors) === null || _b === void 0 ? void 0 : _b.primaryBase) || '#2685F1'};
+    .icon {
+      &:before {
+        border-color: ${((_c = miscTheme.theme.colors) === null || _c === void 0 ? void 0 : _c.primaryBase) || '#2685F1'};
+        transition: 0.2s linear all;
+      }
+    }
+  }
+  ${utils.MediaQueries.tdDown} {
+    padding: 16px 20px;
+  }
+`;
+const SubotInlineActionImage = styled__default["default"](SubotInlineActionText) `
+  position: relative;
+  flex-wrap: wrap;
+  padding: 16px;
+  background-color: ${((_d = miscTheme.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;
+    }
+  }
+  ${utils.MediaQueries.tdDown} {
+    padding: 12px;
+    .label {
+      margin-top: 12px;
+    }
+    .icon {
+      top: 1.3rem;
+      right: 1.3rem;
+    }
+  }
+  ${utils.MediaQueries.tdDown} {
+    padding: 8px;
+    .label {
+      margin-top: 8px;
+    }
+    .icon {
+      top: 0.9rem;
+      right: 0.9rem;
+    }
+  }
+`;
+const SubotInlineActionRatingStartContainer = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  ${utils.MediaQueries.tdDown} {
+    justify-content: center;
+  }
+`;
+const SubotInlineActionRatingDescriptionContainer = styled__default["default"].div `
+  textarea {
+    background-color: ${((_e = miscTheme.theme.colors) === null || _e === void 0 ? void 0 : _e.white) || '#fff'};
+  }
+`;
+const SubotInlineActionPollResult = styled__default["default"].div `
+  margin-top: 20px;
+  color: ${((_f = miscTheme.theme.colors) === null || _f === void 0 ? void 0 : _f.gray500) || '#737373'};
+  font-weight: 600;
+`;
+const SubotInlineActionPollChoiceResult = styled__default["default"].div `
+  position: relative;
+  z-index: 0;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  padding: 16px 20px;
+  border-radius: ${miscTheme.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
+    ? miscTheme.theme.colors.primary50 || '#E3F2FF'
+    : miscTheme.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 = miscTheme.theme.colors) === null || _g === void 0 ? void 0 : _g.white) || '#fff'};
+    content: '';
+  }
+  ${utils.MediaQueries.mbDown} {
+    padding: 6px 16px;
+  }
+`;
+const SubotInlineActionItemContainer = styled__default["default"].div `
+  width: ${({ width }) => width || '100%'};
+  padding: 4px;
+  &.item-image-container {
+    padding: 16px;
+    ${utils.MediaQueries.tdDown} {
+      padding: 7.5px;
+    }
+    ${utils.MediaQueries.mbDown} {
+      width: 50%;
+    }
+  }
+`;
+const SubotInlineActionListContainer = styled__default["default"].div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  margin: -4px;
+
+  &.list-container {
+    margin: -16px;
+    ${utils.MediaQueries.tdDown} {
+      margin: -7.5px;
+    }
+  }
+
+  &.review-container {
+    margin: -8px;
+    > div {
+      padding: 8px;
+    }
+  }
+`;
+
+const SubotInlineAction = ({ actions, value, onChange, htmlType, node_type, formSubmitMeta, }) => {
+    const className = React.useMemo(() => {
+        switch (node_type) {
+            case index$2.NodeType.IMAGE:
+            case index$2.NodeType.REACTION:
+                return 'list-container';
+            default:
+                return '';
+        }
+    }, [node_type]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, actions && !!(actions === null || actions === void 0 ? void 0 : actions.length) && (React__default["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["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__default["default"](index$8.Button) `
+  &:disabled {
+    background-color: rgb(242, 242, 242);
+    color: rgb(140, 140, 140);
+
+    &:hover {
+      border: 0;
+    }
+  }
+  svg {
+    path {
+      stroke: currentColor;
+    }
+  }
+`;
+const ButtonBackStyled = styled__default["default"](ButtonStyled) `
+  &:disabled {
+    background-color: rgb(242, 242, 242);
+    color: rgb(140, 140, 140);
+    &:hover {
+      border: 0;
+    }
+  }
+  svg {
+    path {
+      stroke: currentColor;
+    }
+  }
+`;
+const SubotInlineFooterStyled = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 32px;
+  border-top: 4px solid ${miscTheme.theme.colors.neutral100 || '#E4E8EC'};
+  .mantine-Button-root {
+    + .mantine-Button-root {
+      margin-left: 8px;
+    }
+  }
+  ${utils.MediaQueries.tdDown} {
+    padding: 12px 24px;
+  }
+  ${utils.MediaQueries.mbDown} {
+    padding: 12px 16px;
+  }
+`;
+
+const SubotInlineActionTextChoice = ({ action, onChange, active, htmlType, formSubmitMeta, }) => {
+    const { trackingCommonInline } = React.useContext(SubotInlineContext);
+    const inputRef = React.useRef(null);
+    const [otherText, setOtherText] = React.useState('');
+    const isActionPollWithOther = (action === null || action === void 0 ? void 0 : action.type) === index$2.NodeActionType.POLL_CHOICE_TEXT_BY_INPUT;
+    const isActionSelectWithOther = (action === null || action === void 0 ? void 0 : action.type) === index$2.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: index$2.ELEMENT_CONTROL_INPUT_TYPE[action === null || action === void 0 ? void 0 : action.type] || 'text',
+                    value: evt.target.value,
+                    action_id: action.id,
+                },
+            ]);
+        }
+    };
+    React.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["default"].createElement(SubotInlineActionItemContainer, null,
+        React__default["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["default"].createElement("div", { className: "label" },
+                React__default["default"].createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label)),
+            React__default["default"].createElement("div", { className: "icon" }, htmlType === 'checkbox' && (React__default["default"].createElement(CheckboxIcon, { className: "icon-checkbox", viewBox: "0 0 22 22" })))),
+        isActionSelectWithOther && active && (React__default["default"].createElement(core.Box, { mt: "6px", style: { textAlign: 'right' } },
+            React__default["default"].createElement(core.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 } = React.useContext(SubotInlineContext);
+    return (React__default["default"].createElement(SubotInlineActionItemContainer, { width: "45%", className: 'item-image-container' },
+        React__default["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["default"].createElement("div", { className: "image-container" },
+                React__default["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["default"].createElement("div", { className: "label" },
+                React__default["default"].createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))),
+            React__default["default"].createElement("div", { className: "icon" }, htmlType === 'checkbox' && (React__default["default"].createElement(CheckboxIcon, { className: "icon-checkbox", viewBox: "0 0 22 22" }))))));
+};
+const SubotInlineActionSSO = ({ action, onChange, }) => {
+    const { trackingCommonInline } = React.useContext(SubotInlineContext);
+    return (React__default["default"].createElement(SubotInlineActionItemContainer, { width: "50%", style: { alignSelf: 'center' } },
+        React__default["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["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: index$2.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 === index$2.NodeType.RESULT_POLL)
+        return (React__default["default"].createElement(SubotInlineActionItemContainer, null,
+            React__default["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["default"].createElement("div", { className: "number" }, action === null || action === void 0 ? void 0 :
+                    action.percent,
+                    "%"),
+                React__default["default"].createElement("div", { className: "content" }, action === null || action === void 0 ? void 0 : action.label),
+                React__default["default"].createElement("div", { className: "icon" }, (action === null || action === void 0 ? void 0 : action.is_chosen) && React__default["default"].createElement(CheckIcon, { viewBox: "0 0 16 16" })))));
+    return (React__default["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: index$2.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 === index$2.NodeType.RESULT_POLL)
+        // TODO: Update layout result poll image
+        return (React__default["default"].createElement(SubotInlineActionItemContainer, null,
+            React__default["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["default"].createElement("div", { className: "number" }, action === null || action === void 0 ? void 0 :
+                    action.percent,
+                    "%"),
+                React__default["default"].createElement("div", { className: "content" }, action === null || action === void 0 ? void 0 : action.label),
+                React__default["default"].createElement("div", { className: "icon" }, (action === null || action === void 0 ? void 0 : action.is_chosen) && React__default["default"].createElement(CheckIcon, { viewBox: "0 0 16 16" })))));
+    return (React__default["default"].createElement(SubotInlineActionImageChoice, { active: !!active, action: action, onChange: handleOnChange, htmlType: htmlType }));
+};
+const SubotInlineRatingStar = ({ action, value, onChange, }) => {
+    var _a, _b;
+    return (React__default["default"].createElement(SubotInlineActionItemContainer, null,
+        React__default["default"].createElement(SubotInlineActionRatingStartContainer, null,
+            React__default["default"].createElement(StarRatings__default["default"], { 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: index$2.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 = miscTheme.theme === null || miscTheme.theme === void 0 ? void 0 : miscTheme.theme.colors) === null || _a === void 0 ? void 0 : _a.yellow600, starRatedColor: (_b = miscTheme.theme === null || miscTheme.theme === void 0 ? void 0 : miscTheme.theme.colors) === null || _b === void 0 ? void 0 : _b.yellow600, starDimension: "48" }))));
+};
+const SubotInlineTextArea = ({ action, value, onChange, }) => {
+    return (React__default["default"].createElement(SubotInlineActionItemContainer, null,
+        React__default["default"].createElement(SubotInlineActionRatingDescriptionContainer, null,
+            React__default["default"].createElement(index$c.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: index$2.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["default"].createElement(SubotInlineActionItemContainer, { width: "40%", className: 'item-image-container' },
+        React__default["default"].createElement(SubotInlineButtonReaction, { className: classNames__default["default"](!!active && 'active'), onClick: () => onChange && onChange(action) },
+            React__default["default"].createElement(LikeIcon, { viewBox: "0 0 24 24" }),
+            React__default["default"].createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))));
+};
+const SubotInlineDislikeChoice = ({ action, active, onChange, }) => {
+    return (React__default["default"].createElement(SubotInlineActionItemContainer, { width: "40%", className: 'item-image-container' },
+        React__default["default"].createElement(SubotInlineButtonReaction, { className: classNames__default["default"](!!active && 'active'), onClick: () => onChange && onChange(action) },
+            React__default["default"].createElement(DislikeIcon, { viewBox: "0 0 24 24" }),
+            React__default["default"].createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))));
+};
+const SubotInlineReviewChoice = ({ active, action, onChange, }) => (React__default["default"].createElement(SubotInlineActionItemContainer, { width: "auto", className: "review-choice" },
+    React__default["default"].createElement(SubotInlineButtonReview, { className: classNames__default["default"](!!active && 'active'), onClick: () => onChange &&
+            onChange({
+                key: action === null || action === void 0 ? void 0 : action.key,
+                control: index$2.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["default"].createElement(Markdown, null, action === null || action === void 0 ? void 0 : action.label))));
+const SubotInlinePollResult = ({ action, }) => (React__default["default"].createElement(SubotInlineActionItemContainer, null,
+    React__default["default"].createElement(SubotInlineActionPollResult, null, action === null || action === void 0 ? void 0 : action.label)));
+const SubotInlineActionBase = {
+    'user-image': SubotInlineActionImageChoice,
+    [index$2.NodeActionType.USER_CHOICE_TEXT]: SubotInlineActionTextChoice,
+    [index$2.NodeActionType.USER_CHOICE_TEXT_BY_INPUT]: SubotInlineActionTextChoice,
+    [index$2.NodeActionType.USER_CHOICE_IMAGE]: SubotInlineActionImageChoice,
+    [index$2.NodeActionType.ACTION_SSO_REDIRECT]: SubotInlineActionSSO,
+    [index$2.NodeActionType.POLL_CHOICE]: SubotInlinePollChoice,
+    [index$2.NodeActionType.POLL_CHOICE_TEXT_BY_INPUT]: SubotInlineActionTextChoice,
+    [index$2.NodeActionType.POLL_CHOICE_IMAGE]: SubotInlinePollChoiceImage,
+    [index$2.NodeActionType.RATING_STAR]: SubotInlineRatingStar,
+    [index$2.NodeActionType.RATING_DESCRIPTION]: SubotInlineTextArea,
+    [index$2.NodeActionType.LIKE_CHOICE]: SubotInlineLikeChoice,
+    [index$2.NodeActionType.DISLIKE_CHOICE]: SubotInlineDislikeChoice,
+    [index$2.NodeActionType.REVIEW_CHOICE]: SubotInlineReviewChoice,
+    [index$2.NodeActionType.REVIEW_DESCRIPTION]: SubotInlineTextArea,
+    [index$2.NodeActionType.RESULT_BUTTON]: SubotInlineActionTextChoice,
+    [index$2.NodeActionType.POLL_RESULT]: SubotInlinePollResult,
+};
+
+const SubotInlineFooter = ({ onBack, onNext: onSubmit, hideBack, hideNext, nextText, backProps, nextProps, }) => {
+    var _a, _b, _c;
+    const { formatMessage: f } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { nodes: listNodes, activeId, params, onNext, trackingCommonInline, } = React.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 === index$2.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 === index$2.NodeActionType.ACTION_MULTIPLE_BUTTON);
+    return (React__default["default"].createElement(SubotInlineFooterStyled, null,
+        !hideBack && (React__default["default"].createElement(ButtonBackStyled, Object.assign({ size: "md", color: "secondary", onClick: onBack }, backProps, { className: classNames__default["default"]('pointer-event-child-none', backProps === null || backProps === void 0 ? void 0 : backProps.className) }, trackingCommonInline, { "data-event-action": "Back Click" }),
+            React__default["default"].createElement(ArrowLeft, { style: { marginRight: 10 } }),
+            f({
+                id: 'riskScreener.back',
+                defaultMessage: 'Back',
+            }))),
+        !hideNext && (React__default["default"].createElement(ButtonStyled, Object.assign({ size: "md", color: "primary", onClick: actionNextChoice ? handleNextChoice : onSubmit }, nextProps, { className: classNames__default["default"]('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["default"].createElement(ArrowRight, { style: { marginLeft: 10 } })))));
+};
+var SubotInlineFooter$1 = React.memo(SubotInlineFooter);
+
+const SubotInlineHeadline = styled__default["default"].h4 `
+  padding: 32px 0px 12px;
+  border-bottom: 1px solid ${miscTheme.theme.colors.neutral100 || '#E4E8EC'};
+  margin: 0px 32px;
+  color: ${miscTheme.theme.colors.gray500 || '#737373'};
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
+  ${utils.MediaQueries.tdDown} {
+    padding: 24px 0px 12px;
+    margin: 0px 24px;
+  }
+  ${utils.MediaQueries.mbDown} {
+    padding: 16px 0px 12px;
+    margin: 0px 16px;
+  }
+`;
+const SubotInlineHeader = () => {
+    const { formatMessage: f } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { nodes } = React.useContext(SubotInlineContext);
+    const headline = React.useMemo(() => { var _a; return (_a = nodes[0]) === null || _a === void 0 ? void 0 : _a.inline_headline; }, [nodes]);
+    return (React__default["default"].createElement(SubotInlineHeadline, null, headline ||
+        f({
+            id: 'subotInline.quote',
+            defaultMessage: 'HAVE TIME FOR A QUICK QUESTION?',
+        })));
+};
+var SubotInlineHeader$1 = React.memo(SubotInlineHeader);
+
+const SubotInlineIntentTitle = styled__default["default"].h3 `
+  margin-bottom: 0px;
+  font-size: 22px;
+  font-weight: bold;
+  line-height: 1.45;
+  ${utils.MediaQueries.tdDown} {
+    font-size: 20px;
+  }
+`;
+const SubotInlineRecalculateButton = styled__default["default"](index$8.Button) `
+  &.bot-recalculate {
+    svg {
+      path {
+        stroke: ${miscTheme.theme.colors.primaryBase || '#2685F1'} !important;
+      }
+    }
+    &:hover {
+      svg {
+        path {
+          stroke: #fff !important;
+        }
+      }
+    }
+  }
+`;
+const SubotInlineIntentButton = styled__default["default"](index$8.Button) `
+  border: 2px solid transparent;
+`;
+const SubotInlineItemIcon = styled__default["default"].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: ${miscTheme.theme.colors.gray700 || '#404040'};
+      line-height: 1.4;
+    }
+  }
+  ${utils.MediaQueries.mbDown} {
+    .icon {
+      width: 47px;
+      height: 47px;
+      margin-right: 16px;
+    }
+    .content {
+      .title {
+        font-size: 14px;
+      }
+      .description {
+        font-size: 14px;
+      }
+    }
+  }
+`;
+styled__default["default"](index$8.Button) ``;
+const SubotInlineIntentFirstTextWrapper = styled__default["default"].div `
+  display: flex;
+  align-items: flex-start;
+  color: ${miscTheme.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;
+  }
+  ${utils.MediaQueries.tdDown} {
+    font-size: 20px;
+  }
+  ${utils.MediaQueries.mbDown} {
+    font-size: 18px;
+  }
+`;
+const SubotInlineIntentFirstImageWrapper = styled__default["default"].div `
+  display: flex;
+  justify-content: center;
+`;
+const SubotInlineIntentFirstTextContainer = styled__default["default"].div ``;
+const SubotInlineIntentTextContainer = styled__default["default"].div `
+  padding: 12px 16px;
+  border: 1px solid ${miscTheme.theme.colors.gray200 || '#D9D9D9'};
+  background-color: ${miscTheme.theme.colors.white || '#fff'};
+  border-radius: ${miscTheme.theme.borderRadius};
+  line-height: 1.5;
+`;
+const SubotInlineIntentImageContainer = styled__default["default"].div `
+  border: ${miscTheme.theme.colors.gray200 || '#D9D9D9'};
+  background-color: ${miscTheme.theme.colors.white || '#FFF'};
+  border-radius: ${miscTheme.theme.borderRadius};
+  .intent-img {
+    border-radius: ${miscTheme.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__default["default"].div `
+  display: flex;
+  .feature {
+    width: 30%;
+    .feature-wrapper {
+      position: relative;
+      display: block;
+      overflow: hidden;
+      width: 100%;
+      padding-top: 66%;
+      border-radius: ${miscTheme.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: ${miscTheme.theme.colors.gray800 || '#262626'};
+      text-decoration: none;
+    }
+  }
+`;
+const SubotInlineIntentRiskScreenerContainer = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 40px 20px 16px;
+  background-color: #fff;
+  border-radius: ${miscTheme.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: ${miscTheme.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__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+styled__default["default"].div `
+  padding: 16px;
+  margin-top: 32px;
+  margin-bottom: 32px;
+  background-color: ${miscTheme.theme.colors.primary50 || ''};
+  border-radius: ${miscTheme.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__default["default"].div `
+  width: ${({ width }) => width || '100%'};
+  padding: 8px;
+  ${utils.MediaQueries.mbDown} {
+    width: 100%;
+  }
+`;
+const SubotInlineIntentFinalRow = styled__default["default"].div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 -8px;
+`;
+const SubotInlineIntentCol = styled__default["default"].div `
+  width: ${({ width }) => width || '100%'};
+  padding: 4px;
+  ${utils.MediaQueries.mbDown} {
+    width: 100%;
+  }
+`;
+const SubotInlineIntentRow = styled__default["default"].div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 -4px;
+`;
+const SubotInlineIntentList = styled__default["default"].div `
+  margin-top: 20px;
+`;
+
+const SubotInlineIntent = ({ intents, indexNumber, }) => {
+    var _a, _b;
+    const title = React.useMemo(() => {
+        const _title = intents && intents[0];
+        if (_title)
+            return _title;
+        return null;
+    }, []);
+    if (!intents.length)
+        return React__default["default"].createElement(SubotInlineIntentBotTitle, { indexNumber: indexNumber });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        title && (React__default["default"].createElement(SubotInlineIntentBotTitle, { intent: title, indexNumber: indexNumber })),
+        !!((_a = intents.slice(1)) === null || _a === void 0 ? void 0 : _a.length) && (React__default["default"].createElement(SubotInlineIntentList, null,
+            React__default["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["default"].createElement(NodeIntent, { key: intent.id, intent: intent }));
+            }))))));
+};
+
+const SubotInlineIntentFinal = ({ intents: intentsProps, }) => {
+    const intents = React.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 index$2.NodeIntentType.BOT_MAIN_IMAGE:
+                    mainIntents.push(intent);
+                    break;
+                case index$2.NodeIntentType.BOT_MAIN_TITLE:
+                    mainIntents.push(intent);
+                    break;
+                case index$2.NodeIntentType.BOT_MAIN_BODY:
+                    mainIntents.push(intent);
+                    break;
+                case index$2.NodeIntentType.BOT_MAIN_BUTTON:
+                    mainIntents.push(intent);
+                    break;
+                case index$2.NodeIntentType.BOT_RECALCULATE:
+                    mainIntents.push(intent);
+                    break;
+                case index$2.NodeIntentType.BOT_SUB_TITLE:
+                    subIntents.push(intent);
+                    break;
+                case index$2.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["default"].createElement(NodeIntent, { key: intent.id, intent: intent });
+    }
+    return (React__default["default"].createElement(SubotInlineIntentRow, null,
+        React__default["default"].createElement(SubotInlineIntentCol, null,
+            React__default["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["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentCol, null,
+        React__default["default"].createElement(SubotInlineIntentTextContainer, null,
+            React__default["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["default"].createElement(React__default["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["default"].createElement(SubotInlineIntentCol, { width: "50%" },
+        React__default["default"].createElement(SubotInlineIntentImageContainer, null,
+            React__default["default"].createElement("img", { loading: "lazy", src: intent.url, alt: intent.label, className: `intent-img ${intent.label && 'has-label'}` }),
+            isObject && (React__default["default"].createElement("h4", { className: "intent-img-label" },
+                React__default["default"].createElement(Markdown, null, intent.label))))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-image' *****************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-button' **********************/
+//#region
+const SubotInlineIntentBotButton = ({ intent, }) => {
+    const { trackingCommonInline } = React.useContext(SubotInlineContext);
+    const handleOnClick = () => {
+        window.location.href = intent.url;
+    };
+    if (!(intent === null || intent === void 0 ? void 0 : intent.label))
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentCol, { width: "60%" },
+        React__default["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["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 = React.useMemo(() => intent.label.includes('{')
+        ? JSON.parse(intent.label)
+        : {}, [intent.label]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, !!Object.keys(article).length && (React__default["default"].createElement(SubotInlineIntentCol, null,
+        React__default["default"].createElement(SubotInlineIntentUrlContainer, null,
+            React__default["default"].createElement("div", { className: "feature" },
+                React__default["default"].createElement("a", { href: article === null || article === void 0 ? void 0 : article.url, className: "feature-wrapper" },
+                    React__default["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["default"].createElement("div", { className: "body" },
+                React__default["default"].createElement("a", { href: article === null || article === void 0 ? void 0 : article.url },
+                    React__default["default"].createElement("h5", { className: "title" },
+                        React__default["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["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentCol, null,
+        React__default["default"].createElement(SubotInlineItemIcon, null,
+            React__default["default"].createElement("img", { loading: "lazy", src: intent === null || intent === void 0 ? void 0 : intent.url, className: "icon", alt: "" }),
+            React__default["default"].createElement("div", { className: "content" },
+                React__default["default"].createElement("h3", { className: "title" }, info.title),
+                React__default["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 = ![index$2.NodeIntentType.SSO_INTENT].includes(intent === null || intent === void 0 ? void 0 : intent.type);
+    return (React__default["default"].createElement(SubotInlineIntentFirstTextContainer, null,
+        React__default["default"].createElement(SubotInlineIntentFirstTextWrapper, null,
+            indexNumber && (React__default["default"].createElement("div", { className: "number" },
+                indexNumber < 10 ? `0${indexNumber}` : indexNumber,
+                ".")),
+            isShowLabel &&
+                intent &&
+                [index$2.NodeIntentType.BOT_TEXT, index$2.NodeIntentType.BOT_BUTTON].includes(intent === null || intent === void 0 ? void 0 : intent.type) && React__default["default"].createElement(Markdown, { className: "title" }, intent.label)),
+        intent &&
+            [index$2.NodeIntentType.BOT_IMAGE].includes(intent === null || intent === void 0 ? void 0 : intent.type) && (React__default["default"].createElement(SubotInlineIntentFirstImageWrapper, null,
+            React__default["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["default"].createElement(SubotInlineIntentFinalCol, null,
+        React__default["default"].createElement(SubotInlineIntentTitle, null,
+            React__default["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["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentFinalCol, null,
+        React__default["default"].createElement(SubotInlineIntentImageContainer, null,
+            React__default["default"].createElement("img", { loading: "lazy", src: intent.url, alt: intent.label, className: `intent-img ${intent.label && 'has-label'}` }),
+            intent.label && (React__default["default"].createElement("h4", { className: "intent-img-label" },
+                React__default["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["default"].createElement(SubotInlineIntentFinalCol, null,
+        React__default["default"].createElement("div", { className: "intents__item markdown" },
+            React__default["default"].createElement(Markdown, null, intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'bot-main-body' ************/
+/*******************************************************************************/
+/*******************************************************************************/
+/*************************** NodeIntentType: 'bot-main-button' *****************/
+//#region
+const SubotInlineIntentBotMainButton = ({ intent, }) => {
+    const { trackingCommonInline } = React.useContext(SubotInlineContext);
+    const handleOnClick = () => {
+        window.location.href = intent.url;
+    };
+    if (!intent.label)
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentCol, { width: "auto" },
+        React__default["default"].createElement(SubotInlineIntentFinalButtonContainer, null,
+            React__default["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["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 } = React.useContext(SubotInlineContext);
+    const handleOnClick = () => {
+        onReset && onReset();
+    };
+    if (!(intent === null || intent === void 0 ? void 0 : intent.label))
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentCol, { width: "auto", style: { justifyContent: 'center', display: 'flex' } },
+        React__default["default"].createElement(SubotInlineRecalculateButton, { size: "lg", color: "secondary", onClick: handleOnClick, icon: React__default["default"].createElement(RotateLeft, null), className: "bot-recalculate" },
+            React__default["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 } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const article = React.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["default"].createElement(React__default["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["default"].createElement(SubotInlineIntentFinalCol, null,
+        React__default["default"].createElement(SubotInlineIntentRiskScreenerContainer, null,
+            React__default["default"].createElement("a", { href: article === null || article === void 0 ? void 0 : article.url, className: "feature" },
+                React__default["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["default"].createElement("div", { className: "title-container" },
+                React__default["default"].createElement("a", { href: article === null || article === void 0 ? void 0 : article.url },
+                    React__default["default"].createElement("h5", { className: "title" }, article === null || article === void 0 ? void 0 : article.title)),
+                React__default["default"].createElement("a", { href: article === null || article === void 0 ? void 0 : article.url, className: "link" },
+                    f({
+                        id: 'riskScreener.start',
+                        defaultMessage: 'Start',
+                    }),
+                    React__default["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 = React.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["default"].createElement(React__default["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["default"].createElement(SubotInlineIntentFinalCol, { width: "40%" },
+        React__default["default"].createElement(moleculesArticleCard.ArticleCard, { title: article === null || article === void 0 ? void 0 : article.title, uploadTime: dayjs__default["default"]((_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["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["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["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentFinalCol, null,
+        React__default["default"].createElement(SubotInlineIntentImageContainer, null,
+            React__default["default"].createElement("img", { loading: "lazy", src: intent.url, alt: intent.label, className: `intent-img ${intent.label && 'has-label'}` }),
+            intent.label && (React__default["default"].createElement("h4", { className: "intent-img-label" },
+                React__default["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["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentFinalCol, null,
+        React__default["default"].createElement(SubotInlineIntentTitle, null,
+            React__default["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["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(SubotInlineIntentFinalCol, null,
+        React__default["default"].createElement("div", { className: "intents__item markdown" },
+            React__default["default"].createElement(Markdown, null, intent.label))));
+};
+//#endregion
+/*************************** END - NodeIntentType: 'thank-you-body' ************/
+/*******************************************************************************/
+const SubotInlineIntentBase = {
+    [index$2.NodeIntentType.BOT_TEXT]: SubotInlineIntentBotText,
+    [index$2.NodeIntentType.BOT_IMAGE]: SubotInlineIntentBotImage,
+    [index$2.NodeIntentType.BOT_BUTTON]: SubotInlineIntentBotButton,
+    [index$2.NodeIntentType.BOT_URL]: SubotInlineIntentUrl,
+    [index$2.NodeIntentType.BOT_RECALCULATE]: SubotInlineIntentBotRecalculate,
+    [index$2.NodeIntentType.BOT_MAIN_TITLE]: SubotInlineIntentBotMainTitle,
+    [index$2.NodeIntentType.BOT_MAIN_IMAGE]: SubotInlineIntentBotMainImage,
+    [index$2.NodeIntentType.BOT_MAIN_BODY]: SubotInlineIntentBotMainBody,
+    [index$2.NodeIntentType.BOT_MAIN_BUTTON]: SubotInlineIntentBotMainButton,
+    [index$2.NodeIntentType.BOT_SUB_TITLE]: SubotInlineIntentBotMainTitle,
+    [index$2.NodeIntentType.BOT_SUB_BODY]: SubotInlineIntentBotMainBody,
+    [index$2.NodeIntentType.BOT_LANDING_PAGE_URL]: SubotInlineIntentBotText,
+    [index$2.NodeIntentType.BOT_LANDING_PAGE_BUTTON]: SubotInlineIntentBotText,
+    [index$2.NodeIntentType.BOT_RISK_SCREEN]: SubotInlineIntentBotRiskScreener,
+    [index$2.NodeIntentType.BOT_RELATED_ARTICLE]: SubotInlineIntentBotRelatedArticle,
+    [index$2.NodeIntentType.THANK_YOU_IMAGE]: SubotInlineIntentThankYouImage,
+    [index$2.NodeIntentType.THANK_YOU_TITLE]: SubotInlineIntentThankYouTitle,
+    [index$2.NodeIntentType.THANK_YOU_BODY]: SubotInlineIntentThankYouBody,
+    /** intents fake for sso block */
+    [index$2.NodeIntentType.SSO_INTENT]: SubotInlineIntentSSO,
+};
+
+/***************** type: TEXT, IMAGE ***************/
+const SubotInlineNode = ({ node, indexNumber, }) => {
+    const { formatMessage: f, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { params, onChange, onSubmit, onPrev, onNext, nodes, activeId } = React.useContext(SubotInlineContext);
+    const [value, setValue] = React.useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const handleOnChangeNormal = (action) => tslib_es6.__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 = tslib_es6.__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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (!action)
+            return;
+        const actionWithOther = (action === null || action === void 0 ? void 0 : action.type) === index$2.NodeActionType.USER_CHOICE_TEXT_BY_INPUT ||
+            (action === null || action === void 0 ? void 0 : action.type) === index$2.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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineActionContainer, null,
+                React__default["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["default"].createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, onNext: handleOnNext })));
+};
+
+const SubotInlineNodeFinal = ({ node, }) => {
+    var _a, _b;
+    const fixHeight = 350;
+    const { nodes } = React.useContext(SubotInlineContext);
+    const { formatMessage: f } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const flag = React.useRef(null);
+    const wrapper = React.useRef(null);
+    const [height, setHeight] = React.useState(fixHeight);
+    const [showMore, setShowMore] = React.useState(true);
+    const [isMore, setIsMore] = React.useState(false);
+    const handleOnClick = React.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]);
+    React.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 = React.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 === index$2.NodeIntentType.BOT_SUGGESTED_SERVICE)) || []);
+    }, []);
+    return (React__default["default"].createElement(SubotInlineFinalContainer, null,
+        React__default["default"].createElement("div", { ref: flag, className: "hhg-flag", style: {
+                position: 'absolute',
+                top: -100,
+                left: 0,
+                pointerEvents: 'none',
+            } }),
+        React__default["default"].createElement(SubotInlineFinalWrapper, { maxHeight: height, isMore: isMore },
+            React__default["default"].createElement("div", { ref: wrapper },
+                React__default["default"].createElement(SubotInlineIntentFinal, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [] }),
+                suggestedServiceIntents.length > 0 && (React__default["default"].createElement("div", null, suggestedServiceIntents.map((intent) => {
+                    const NodeIntent = SubotInlineIntentBase$1[intent.type || ''];
+                    return (NodeIntent && React__default["default"].createElement(NodeIntent, { key: intent.id, intent: intent }));
+                }))))),
+        showMore && (React__default["default"].createElement(SubotInlineFinalMoreContainer, null,
+            React__default["default"].createElement(SubotInlineFinalButton, { size: "md", color: "secondary", onClick: handleOnClick }, !isMore ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                f({ id: 'subotInline.showMore', defaultMessage: 'Show more' }),
+                React__default["default"].createElement(ArrowDown, { style: { marginLeft: 10 } }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                f({ id: 'subotInline.showLess', defaultMessage: 'Show less' }),
+                React__default["default"].createElement(ArrowUp, { style: { marginLeft: 10 } })))))),
+        botType === index$2.SubotType.voucherAcuvue && (React__default["default"].createElement(SubotInlineVoucherLeftUI, { clientId: (_b = botItem.extra_settings) === null || _b === void 0 ? void 0 : _b.client_id, voucherAnswers: extractVoucherAnswers(nodes, botItem) }))));
+};
+
+const SubotInlineResultButton = styled__default["default"].span `
+  display: inline-block;
+  margin-top: 20px;
+  color: ${miscTheme.theme.colors.primaryBase || '#2D87F3'};
+  cursor: pointer;
+  transition: 0.3 all ease;
+  &:hover {
+    color: ${miscTheme.theme.colors.primaryHover || '#2D87F3'};
+  }
+  ${utils.MediaQueries.tdDown} {
+    margin-top: 16px;
+  }
+  ${utils.MediaQueries.mbDown} {
+    margin-top: 12px;
+  }
+`;
+const SubotInlineWrapper = styled__default["default"].div `
+  max-width: 430px;
+  margin-right: auto;
+  margin-left: auto;
+`;
+const SubotInlineContainer = styled__default["default"].div `
+  padding: 44px 16px 32px;
+  background-color: ${miscTheme.theme.colors.neutral50 || '#F7F9FC'};
+  border-radius: ${miscTheme.theme.borderRadius};
+  position: relative;
+  text-align: center;
+  ${utils.MediaQueries.tdDown} {
+    padding: 36px 16px 24px;
+  }
+  ${utils.MediaQueries.mbDown} {
+    padding: 16px;
+    border-radius: 0px;
+  }
+`;
+const SubotInlineNodeFinalThankYou = ({ node, }) => {
+    var _a;
+    const { params, onNext } = React.useContext(SubotInlineContext);
+    const resultButton = React.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 === index$2.NodeActionType.RESULT_BUTTON);
+        if (_resultButton)
+            return _resultButton;
+        return null;
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const handleOnNext = React.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["default"].createElement(SubotInlineContainer, null,
+        React__default["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["default"].createElement(NodeIntent, { key: intent.id, intent: intent });
+            }),
+            resultButton && (React__default["default"].createElement(SubotInlineResultButton, { onClick: handleOnNext }, resultButton === null || resultButton === void 0 ? void 0 : resultButton.label)))));
+};
+
+const SubotInlineNodeForm = ({ node, indexNumber, }) => {
+    var _a;
+    const { data: { locale }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { params, onPrev, onSubmit, trackingCommonInline, nodes, activeId } = React.useContext(SubotInlineContext);
+    const handleSubmit = (data) => tslib_es6.__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 = tslib_es6.__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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineFormContainer, null,
+                React__default["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["default"].createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, hideNext: true })));
+};
+
+const SubotInlineNodeImage = ({ node, indexNumber, }) => {
+    const { formatMessage: f, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { params, onSubmit, onPrev, onNext } = React.useContext(SubotInlineContext);
+    const [value, setValue] = React.useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const handleOnChange = (action) => tslib_es6.__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 = tslib_es6.__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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineActionContainer, null,
+                React__default["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["default"].createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, onNext: handleOnNext })));
+};
+
+const SubotInlineNodeMultiple = ({ node, indexNumber, }) => {
+    const { params, onChange, onPrev, onNext } = React.useContext(SubotInlineContext);
+    const { formatMessage: f, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [value, setValue] = React.useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const submitButton = React.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 == index$2.NodeActionType.ACTION_MULTIPLE_BUTTON);
+        if (_submitButton)
+            return _submitButton;
+        return null;
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const activeActions = React.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) === index$2.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) === index$2.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) => tslib_es6.__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) === index$2.NodeActionType.POLL_CHOICE_TEXT_BY_INPUT ||
+                (action === null || action === void 0 ? void 0 : action.type) === index$2.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 = React.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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineActionContainer, null,
+                React__default["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["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 = React.useRef();
+    const [isFinishedCountDown, setIsFinishedCountDown] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [isLoadingVerify, setIsLoadingVerify] = React.useState(false);
+    const [sentOTP, setSentOTP] = React.useState(false);
+    const { register, formState: { errors }, control, trigger, getValues, setValue, } = reactHookForm.useForm();
+    const { formatMessage: f, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        event.preventDefault();
+        const data = getValues();
+        const parsedPhone = PhoneInputBase.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 togetherComponentGlobalContext.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 === index$2.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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        event.preventDefault();
+        setIsLoadingVerify(true);
+        yield trigger();
+        if (isEmpty__default["default"](errors)) {
+            const data = getValues();
+            const { number } = data;
+            const parsedPhone = PhoneInputBase.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 togetherComponentGlobalContext.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 index$2.NodeActionType.USER_SUBMIT_PHONE:
+                return (React__default["default"].createElement("div", { className: "input-row", key: action.id },
+                    React__default["default"].createElement("label", { htmlFor: action.key }, action.label),
+                    React__default["default"].createElement(reactHookForm.Controller, { name: action.key, control: control, rules: {
+                            required: true,
+                            validate: (value) => PhoneInputBase.isPossiblePhoneNumber(value),
+                        }, render: ({ field: { onChange, value } }) => {
+                            const disabledPhone = (!isFinishedCountDown && sentOTP) || isLoading;
+                            return (React__default["default"].createElement(StyleWrapperPhoneInput, null,
+                                React__default["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["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["default"].createElement("p", { className: "error-message" }, f({
+                                    id: 'validation.error.validNumber',
+                                    defaultMessage: 'Please enter a valid number.',
+                                }))),
+                                React__default["default"].createElement("div", { className: "submit-btn-row", key: action.id },
+                                    React__default["default"].createElement(index$8.Button, { className: "submit-btn", size: "lg", onClick: handleSendOTP, isDisabled: (!isFinishedCountDown && sentOTP) || isLoading, isLoading: isLoading }, sentOTP ? (React__default["default"].createElement(CountDown$1, { ref: countRef, isFinished: isFinishedCountDown, onFinish: setIsFinishedCountDown })) : (React__default["default"].createElement("span", null, f({
+                                        id: 'subot.sendOTP.button',
+                                        defaultMessage: 'Send OTP',
+                                    })))))));
+                        } })));
+            case index$2.NodeActionType.USER_SUBMIT_NUMBER:
+                if (!sentOTP) {
+                    return '';
+                }
+                return (React__default["default"].createElement("div", { className: "input-row", key: action.id },
+                    React__default["default"].createElement("label", { htmlFor: action.key }, action.label),
+                    React__default["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["default"].createElement("p", { className: "error-message" }, f({
+                        id: 'validation.error.validOTP',
+                        defaultMessage: 'Invalid OTP provided',
+                    })))));
+            default:
+                return '';
+        }
+    };
+    const renderFormSubmitAndTerms = (action) => {
+        switch (action.type) {
+            case index$2.NodeActionType.USER_SUBMIT_SEND:
+                if (!sentOTP)
+                    return '';
+                return (React__default["default"].createElement("div", { className: "submit-btn-row", key: action.id },
+                    React__default["default"].createElement(index$8.Button, { className: "submit-btn", size: "lg", isDisabled: isLoadingVerify, isLoading: isLoadingVerify, onClick: (event) => handleOnVerify(event, action) }, action.label)));
+            default:
+                return '';
+        }
+    };
+    React.useEffect(() => {
+        if (phoneNumber) {
+            const action = actions.find((action) => action.type === index$2.NodeActionType.USER_SUBMIT_PHONE);
+            if (action && action.key) {
+                setValue(action.key, `+${areaCode}${phoneNumber}`);
+            }
+        }
+    }, [phoneNumber, areaCode]);
+    return (React__default["default"].createElement(StyledUserInfoFormContainer$1, { className: className, style: style },
+        React__default["default"].createElement("form", { className: "user-info-form" },
+            actions.map((action) => renderFormInput(action)),
+            actions.map((action) => renderFormSubmitAndTerms(action)))));
+};
+
+const useVerifyPhoneNumber = () => {
+    const userInfo = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.userInfo;
+    const [verifiedPhone, setVerifiedPhone] = React.useState(false);
+    React.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 } = React.useContext(SubotInlineContext);
+    const userInfo = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.userInfo;
+    const locale = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.locale;
+    const [value, setValue] = React.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 === index$2.NodeActionType.USER_SUBMIT_PHONE);
+        if (!action || !actionPhone) {
+            return;
+        }
+        const form_submit_meta = [
+            {
+                key: String(actionPhone.key),
+                control: index$2.ELEMENT_CONTROL_INPUT_TYPE[index$2.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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineActionContainer, null,
+                React__default["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["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 } = React.useContext(SubotInlineContext);
+    const [value, setValue] = React.useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const validation = useValidationMultiOption();
+    const descriptionNode = useDescriptionPollNode({ node });
+    const submitButton = React.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 == index$2.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) === index$2.NodeActionType.POLL_CHOICE_TEXT_BY_INPUT ||
+            (action === null || action === void 0 ? void 0 : action.type) === index$2.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: index$2.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 = React.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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineDescription$1, null, descriptionNode),
+            React__default["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["default"].createElement(SubotInlineActionListContainer, null, (_b = node === null || node === void 0 ? void 0 : node.actions.filter(({ type }) => type !== index$2.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["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["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 }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { params, onChange, onSubmit, onPrev, onNext } = React.useContext(SubotInlineContext);
+    const [value, setValue] = React.useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const [isSubmit, setIsSubmit] = React.useState(false);
+    const ratingStarValue = React.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 === index$2.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 = React.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 == index$2.NodeActionType.RATING_BUTTON);
+        if (_submitButton)
+            return _submitButton;
+        return null;
+    }, []);
+    const handleOnChange = (formValue) => tslib_es6.__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 = () => tslib_es6.__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 = tslib_es6.__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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["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["default"].createElement(SubotInlineActionListContainer, null, (_b = node === null || node === void 0 ? void 0 : node.actions.filter(({ type }) => type !== index$2.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["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["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 }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { params, onSubmit, onPrev, onNext } = React.useContext(SubotInlineContext);
+    const [value, setValue] = React.useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const handleOnChange = (action) => tslib_es6.__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 = tslib_es6.__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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineActionContainer, null,
+                React__default["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["default"].createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, onNext: handleOnNext })));
+};
+
+const SubotInlineNodeResultPoll = ({ node, }) => {
+    var _a, _b;
+    return (React__default["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [] })),
+            React__default["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["default"].createElement(SubotInlineActionListContainer, null, (_b = node === null || node === void 0 ? void 0 : node.actions.filter(({ type }) => type !== index$2.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["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 }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { params, onChange, onSubmit, onPrev, onNext } = React.useContext(SubotInlineContext);
+    const [value, setValue] = React.useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const [isSubmit, setIsSubmit] = React.useState(false);
+    const reviewChoices = React.useMemo(() => {
+        var _a;
+        return ((_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.filter(({ type }) => type === index$2.NodeActionType.REVIEW_CHOICE)) || [];
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const reviewDescriptions = React.useMemo(() => {
+        var _a;
+        return ((_a = node === null || node === void 0 ? void 0 : node.actions) === null || _a === void 0 ? void 0 : _a.filter(({ type }) => type === index$2.NodeActionType.REVIEW_DESCRIPTION)) || [];
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const submitButton = React.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 == index$2.NodeActionType.REVIEW_BUTTON);
+        if (_submitButton)
+            return _submitButton;
+        return null;
+    }, [node === null || node === void 0 ? void 0 : node.actions]);
+    const activeActions = React.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 = () => tslib_es6.__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 = tslib_es6.__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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineActionContainer, null,
+                !!reviewChoices.length && (React__default["default"].createElement(SubotInlineReviewContainer, null,
+                    React__default["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["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["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["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["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 = React.useRef(false);
+    const { params, onPrev, nodes, activeId, userInfo } = React.useContext(SubotInlineContext);
+    React.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 === index$2.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 } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const handleOnChange = (action) => {
+        if (action && action.type === index$2.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 = utils$1.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 (store.IS_SSOV2_ENABLED()) {
+                store.useSSOV2Store.getState().triggerLogin({
+                    returnUrl,
+                    source: `subot-inline`,
+                });
+            }
+            else {
+                window.location.href = `${index$3.SSO_URL}?returnUrl=${encodeURIComponent(returnUrl)}`;
+            }
+        }
+    };
+    return (React__default["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: [
+                        ...((node === null || node === void 0 ? void 0 : node.intents) || []),
+                        ...index$1.ssoIntents(f),
+                    ], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineActionContainer, null,
+                React__default["default"].createElement(SubotInlineAction, { actions: node === null || node === void 0 ? void 0 : node.actions, onChange: handleOnChange }))),
+        React__default["default"].createElement(SubotInlineFooter$1, { onBack: () => onPrev && onPrev(), backProps: { isDisabled: !!(indexNumber === 1) }, hideNext: true })));
+};
+
+const SubotInlineNodeText = ({ node, indexNumber, }) => {
+    const { formatMessage: f, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { nodes, activeId, params, onSubmit, onPrev, onNext, onChange } = React.useContext(SubotInlineContext);
+    const [value, setValue] = React.useState((node === null || node === void 0 ? void 0 : node._message) || {});
+    const handleOnChangeNormal = (action) => tslib_es6.__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 = tslib_es6.__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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (!action)
+            return;
+        const actionWithOther = (action === null || action === void 0 ? void 0 : action.type) === index$2.NodeActionType.USER_CHOICE_TEXT_BY_INPUT ||
+            (action === null || action === void 0 ? void 0 : action.type) === index$2.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["default"].createElement(SubotInlineContainer$1, null,
+        React__default["default"].createElement(SubotInlineHeader$1, null),
+        React__default["default"].createElement(SubotInlineWrapper$1, null,
+            React__default["default"].createElement(SubotInlineIntentContainer, null,
+                React__default["default"].createElement(SubotInlineIntent, { intents: (node === null || node === void 0 ? void 0 : node.intents) || [], indexNumber: indexNumber })),
+            React__default["default"].createElement(SubotInlineActionContainer, null,
+                React__default["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["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__default["default"](index$8.Button) `
+  margin-top: 24px;
+  ${utils.MediaQueries.mbUp} {
+    margin-top: 16px;
+  }
+`;
+const SubotInlineDescription = styled__default["default"].div `
+  margin-top: 24px;
+`;
+const SubotInlineReview = styled__default["default"](index$d.Text) `
+  text-align: center;
+  ${utils.MediaQueries.mbUp} {
+    text-align: left;
+  }
+`;
+const SubotInlineTitle = styled__default["default"](index$e.Heading) `
+  text-align: center;
+  margin-bottom: 8px;
+
+  ${utils.MediaQueries.mbUp} {
+    margin-bottom: 0;
+    text-align: left;
+  }
+`;
+const SubotInlineImage = styled__default["default"].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__default["default"].div `
+  flex-grow: 1;
+  ${utils.MediaQueries.tdDown} {
+    width: 100%;
+    margin-left: 0;
+  }
+`;
+const SubotInlineStartWrapper = styled__default["default"].div `
+  position: relative;
+  display: flex;
+  gap: 24px;
+  ${utils.MediaQueries.mbDown} {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+`;
+const SubotInlineStartContainer = styled__default["default"].div `
+  position: relative;
+  overflow: hidden;
+  background-color: ${miscTheme.theme.colors.primary50};
+  padding: 32px;
+  border-radius: ${miscTheme.theme.borderRadius};
+  background-image: url('/images/subot-bg-transparent.png');
+  background-size: contain;
+  background-repeat: repeat-y;
+  ${utils.MediaQueries.mbDown} {
+    padding: 24px;
+  }
+`;
+const SubotInlineNodeStart = ({ node, setLoading, }) => {
+    const startRef = React.useRef({
+        impress: false,
+    });
+    const userInfo = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.userInfo;
+    const { params, onNext, trackingCommonInline, isMobile } = React.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: index$1.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();
+    };
+    React.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: index$1.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["default"].createElement(SubotInlineStartContainer, null,
+        React__default["default"].createElement(SubotInlineStartWrapper, { ref: (ref) => (startRef.current.element = ref) },
+            node.inline_image && (React__default["default"].createElement(SubotInlineImage, null,
+                React__default["default"].createElement("img", { loading: "lazy", src: node.inline_image, alt: "" }))),
+            React__default["default"].createElement(SubotInlineContent, null,
+                node.inline_title || node.inline_headline ? (React__default["default"].createElement(SubotInlineTitle, { tag: "h3", fontWeight: "bold", color: miscTheme.theme.colors.secondaryBase },
+                    React__default["default"].createElement(Markdown, null, node.inline_title || node.inline_headline))) : null,
+                node.inline_review && (React__default["default"].createElement(SubotInlineReview, { size: "s4", color: miscTheme.theme.colors.gray600, 
+                    // fix error html, div is not allowed as child of p
+                    as: 'div' },
+                    React__default["default"].createElement(Markdown, null, node.inline_review))),
+                node.inline_start_button && (React__default["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["default"].createElement(SubotInlineDescription, null,
+            React__default["default"].createElement(Markdown, null, node.inline_description))));
+};
+
+const SubotInlineLoading = styled__default["default"].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: ${miscTheme.theme.colors.gray800};
+  opacity: 0;
+  pointer-events: none;
+  &:before {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: ${miscTheme.theme.colors.neutral50 || '#F7F9FC'};
+    content: '';
+    opacity: 1;
+  }
+  ${({ isLoading }) => isLoading && ` opacity: 1; pointer-events: auto; `};
+`;
+const SubotInlineLoadingContainer = styled__default["default"].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;
+  }
+  ${utils.MediaQueries.mbDown} {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+`;
+const SubotInline = ({ id, isMobile, articleLink, customUrl, }) => {
+    const currentUrl = useCurrentUrl();
+    const refAccountIdFromLogs = React.useRef(null);
+    const flag = React.useRef(null);
+    const [loading, setLoading] = React.useState(true);
+    const [state, setState] = React.useState({
+        activeId: '',
+        params: {},
+        nodes: [],
+        getParams: () => ({}),
+    });
+    const userInfo = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.userInfo;
+    const currentNode = React.useMemo(() => {
+        return state.nodes.find((n) => n.id == state.activeId);
+    }, [state.nodes, state.activeId]);
+    const trackingCommonInline = React.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 = React.useCallback(() => {
+        var _a, _b, _c, _d;
+        const gaData = window.gaData;
+        const _url = (customUrl || window.location.origin + index$3.basePath) +
+            (togetherComponentGlobalContext.GlobalData.locale === 'tl-PH'
+                ? articleLink.replace('fil/', '')
+                : articleLink);
+        const params = {
+            bot_id: id,
+            account_id: ((_a = index$1.getUserInfoFromCookie()) === null || _a === void 0 ? void 0 : _a.id) || null,
+            action_id: '',
+            action_value: '',
+            cookie_id: index$1.getSubotCookieId((_c = (_b = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.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__default["default"].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: index$1.getWindowId(),
+        };
+        return index$1.overrideParamsByQuery(params, (_d = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.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) => tslib_es6.__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) => tslib_es6.__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 = tslib_es6.__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) => tslib_es6.__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 = [
+                    index$2.NodeType.FINAL,
+                    index$2.NodeType.FINAL_THANK_YOU,
+                    index$2.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);
+        }
+    });
+    React.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__default["default"].get(index$3.GA_TOKEN_COOKIE)) {
+            index$1.checkUntilFinished({
+                condition: () => Boolean(Cookies__default["default"].get(index$3.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["default"].createElement(SubotInlineContext.Provider, { value: Object.assign(Object.assign({}, state), { isMobile,
+            getParams,
+            onChange,
+            onSubmit,
+            onPrev,
+            onNext,
+            onReset,
+            trackingCommonInline,
+            userInfo }) },
+        React__default["default"].createElement(SubotInlineLoadingContainer, { className: classNames__default["default"]('hhg-subot', `hhg-subot-${id}`, !!state.nodes.length && 'hhg-subot-style') }, !!state.nodes.length && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("div", { ref: flag, className: "hhg-flag", style: {
+                    position: 'absolute',
+                    top: -150,
+                    left: 0,
+                    pointerEvents: 'none',
+                } }),
+            React__default["default"].createElement(SubotInlineLoading, { isLoading: !!loading },
+                React__default["default"].createElement(index$a.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 index$2.NodePosition.SSO:
+                                NodeComponent =
+                                    SubotInlineNodeBase[index$2.NodePosition[node === null || node === void 0 ? void 0 : node.position].valueOf()];
+                                break;
+                            default:
+                                NodeComponent =
+                                    SubotInlineNodeBase[index$2.NodeType[node === null || node === void 0 ? void 0 : node.type].valueOf()];
+                        }
+                        if (node.is_multi_select &&
+                            node.type !== index$2.NodeType.POLL)
+                            NodeComponent = SubotInlineNodeBase['MULTIPLE'];
+                        return (NodeComponent && (React__default["default"].createElement(NodeComponent, { key: index.toString(), indexNumber: index, node: node })));
+                    }
+                    else {
+                        return (React__default["default"].createElement(SubotInlineNodeStart, { key: index.toString(), node: node, setLoading: setLoading }));
+                    }
+                }
+                return null;
+            }))))));
+};
+
 // subot.sendOTP.button
 // subot.resendOTP.button
 // subot.verifyOTP.button
@@ -6475,6 +9629,7 @@ var index = /*#__PURE__*/Object.freeze({
   Markdown: Markdown,
   hexRgb: hexRgb,
   SubotInlineVoucherLeftUI: SubotInlineVoucherLeftUI,
+  SubotInline: SubotInline,
   overrideParamsByQuery: index$1.overrideParamsByQuery,
   ssoIntents: index$1.ssoIntents,
   checkUntilFinished: index$1.checkUntilFinished,
@@ -6490,11 +9645,11 @@ var index = /*#__PURE__*/Object.freeze({
   isFakeEmail: index$1.isFakeEmail,
   formatUrlWithEncrypedGa: index$1.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,
@@ -6505,7 +9660,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,
@@ -6530,13 +9685,14 @@ exports.ssoIntents = index$1.ssoIntents;
 exports.KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD = KEY_OF_TEXT_CHOICE_WITH_OTHER_FIELD;
 exports.Markdown = Markdown;
 exports.PATHS = PATHS$1;
-exports.SubotInlineIntentBase = SubotInlineIntentBase;
+exports.SubotInline = SubotInline;
+exports.SubotInlineIntentBase = SubotInlineIntentBase$1;
 exports.SubotInlineIntentBaseTarget = SubotInlineIntentBaseTarget;
 exports.SubotInlineRevampWithTheme = SubotInlineRevampWithTheme;
 exports.SubotInlineVoucherLeftUI = SubotInlineVoucherLeftUI;
 exports.UserInfoForm = UserInfoForm;
 exports.checkSyncDataOnFrisoCampaign = checkSyncDataOnFrisoCampaign;
-exports.computeExtraSettingsForBot = computeExtraSettingsForBot;
+exports.computeExtraSettingsForBot = computeExtraSettingsForBot$1;
 exports["default"] = ContainerWithProvider;
 exports.detectToSkipNodeStart = detectToSkipNodeStart;
 exports.extractUnifiedAnswers = extractUnifiedAnswers;
@@ -6551,7 +9707,7 @@ exports.handleFrisoRedirecition = handleFrisoRedirecition;
 exports.hexRgb = hexRgb;
 exports.replaceTextWithVariables = replaceTextWithVariables;
 exports.saveSubotInlineLogs = saveSubotInlineLogs;
-exports.subotInlineClick = subotInlineClick;
-exports.subotInlineFirstNode = subotInlineFirstNode;
-exports.subotInlineImpression = subotInlineImpression;
-exports.subotInlineMessage = subotInlineMessage;
+exports.subotInlineClick = subotInlineClick$1;
+exports.subotInlineFirstNode = subotInlineFirstNode$1;
+exports.subotInlineImpression = subotInlineImpression$1;
+exports.subotInlineMessage = subotInlineMessage$1;