\n
`;\n\nexport const generateHeader = isDarkBg =>\n `\n ${botName} Demo Website\n
\n \n \n \n ${demoLink}\n \n ![\"copy-icon\"](\"${COPY_ICON}\" "\\"copy-icon\\"")
\n
\n\n ![\"zeroshotbot\"](\"${\n)
\n
`;\n\nexport const generateEncryptedBot = (\n jid,\n sentinel,\n url,\n publicKey,\n pubAskedQuestion\n) => {\n const botData = {\n url,\n pubAskedQuestion: {\n key: publicKey,\n nd: jid,\n wlk: pubAskedQuestion,\n snt: sentinel,\n },\n };\n\n return AES.encrypt(JSON.stringify(botData), '').toString();\n};\n\nexport const generateEncryptedWordPressBot = (\n jid,\n sentinel,\n url,\n publicKey,\n pubAskedQuestion,\n pubInfo\n) => {\n const botData = {\n url: `${AZURE_STORAGE_URI}${INTEGRATIONS_CONTAINER_NAME}/${url}`,\n key: publicKey,\n nd: jid,\n snt: sentinel,\n // CREDENTIALS FOR WIDGET ASK QUESTION\n pubAskedQuestion: {\n wlk: pubAskedQuestion,\n },\n // CREDENTIALS FOR PUBLIC APIS URL\n pubInfo: {\n wlk: pubInfo,\n },\n };\n\n return AES.encrypt(JSON.stringify(botData), '').toString();\n};\n\nexport const generateBotComponent = (\n jid,\n sentinel,\n publicKey,\n pubAskedQuestion,\n integrationData,\n integrationConfigURL,\n height,\n isMobile,\n isDemo,\n botVersion\n) => {\n const encryptedBot = generateEncryptedBot(\n jid,\n sentinel,\n integrationConfigURL,\n publicKey,\n pubAskedQuestion\n );\n const authenticatedHTMLTag = !!integrationData.settings.authenticatedUser\n ? `visitorid=$visitorID`\n : ``;\n const botComponent = isMobile\n ? `WebViewPlus(\n javascriptMode: JavascriptMode.unrestricted,\n onWebViewCreated: (controller) {\n ${\n !!integrationData.settings.authenticatedUser\n ? `final String visitorID = ModalRoute.of(context)!.settings.arguments as String;`\n : ``\n }\n final String botIntegration='${\n botVersion === 'v2' ? BOT_SCRIPT_V2 : BOT_SCRIPT\n }{`It's easy peasey`}
\n{text}
\n {rightEl}
\n {text}
\n {!!subHeader && {subHeader}}\n {hasPrintBtn ? (\n {`Are you sure you want to delete ${itemTobeDeleted}?`}
\n \n );\n};\n\nConfirmDelete.propTypes = {\n itemTobeDeleted: PropTypes.string,\n loading: PropTypes.bool,\n modalTitle: PropTypes.string,\n show: PropTypes.bool.isRequired,\n};\n\nexport default ConfirmDelete;\n","import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useHistory } from 'react-router-dom';\nimport { ExclamationCircleTwoTone } from '@ant-design/icons';\nimport { Popover } from 'antd';\n\nimport { Context } from 'store/store';\nimport Button from './Button';\nimport { StyledSpaceBetweenFlexColumn } from 'styles/GenericStyledComponents';\nimport { cssVariables } from 'styles/root';\nimport { REMOVE_WEAK_BOT_STATUS } from 'store/action';\nimport { botStatistics } from 'utils/bot';\n\nconst StyledPopover = styled(Popover)`\n img {\n max-width: 100%;\n }\n\n p:last-child {\n margin-bottom: 0;\n }\n\n text-align: center;\n`;\n\nconst StyledContentWrapper = styled(StyledSpaceBetweenFlexColumn)`\n max-width: 450px;\n text-align: center;\n padding: 20px 0;\n > * + * {\n margin: 5px 0;\n }\n`;\n\nexport const WeakStatPopover = props => {\n const { weakData, triggerComponent, dataStatName, location, jid, ...rest } =\n props;\n const { push } = useHistory();\n const [_, dispatch] = useContext(Context);\n const { weakBotMessage, redirect } = botStatistics(weakData, jid);\n\n const handleDismiss = () => {\n dispatch({\n type: REMOVE_WEAK_BOT_STATUS,\n payload: {\n location,\n jid: dataStatName === 'bot' ? weakData.jid : weakData.id,\n },\n });\n };\n\n if (!weakData) {\n return false;\n }\n\n const content = (\n \n {dataStatName === 'bot' ? weakData?.name : weakData?.identifier}{' '}\n {'is not doing great lately'}...\n
\n {weakBotMessage && Array.isArray(weakBotMessage) ? (\n weakBotMessage.map(msg =>{msg}
)\n ) : (\n\n {`This ${dataStatName} doesn't have a good conversational skills and introduce \"dead\n end\" most of the time.`}\n
\n )}\n (isList ? viewBot() : false)}>\n
\n {bot?.name[0]}
\n \n \n \n {bot?.name}\n \n {totalAnswersText}\n {totalFilesText}\n {totalWebsiteCount}\n {isList ? (\n \n \n {mode?.toUpperCase()}\n \n \n ) : null}\n \n
\n \n {showWeakBotStat ? (\n
\n \n \n
\n ) : null}\n \n
\n \n \n \n
\n (isList ? viewBot() : false)}>\n {bot.lastUpdatedAt && (\n \n {!isList ? (\n \n {mode?.toUpperCase()}\n \n ) : null}\n \n {'Modified'} {getTimeDifference(bot.lastUpdatedAt)}\n \n \n )}\n
\n {!botsExceedsLimit ? (\n {'Locked'}
\n \n }\n style={{ padding: '8px 16px' }}\n title={`Upgrade or delete at least ${totalExceedingBots} bot(s) to unlock.`}\n />\n )}\n \n
\n );\n\n const BOT_MODAL_STEPS = [\n {\n title: 'Import Bot',\n content: () => (\n You have reached the maximum allowed bots of {maxBotCount}.
\n {planType === 'advanced' ? (\n\n \n Contact Us\n {' '}\n for support.\n
\n ) : (\n\n Please upgrade your plan to\n increase bot count.\n
\n )}\n\n {webSocketIsInprogress && (\n
\n \n ) : (\n \n {option.children ? (\n <>\n \n {option.label}:\n \n handleChangeImportType(e, option.children)}\n style={{ marginLeft: 16 }}\n defaultValue={selectExportType}\n disabled={\n (!selectExportType.includes('answer') &&\n !selectExportType.includes('website') &&\n !selectExportType.includes('file') &&\n option.children.value !== 'answer') ||\n webSocketIsInprogress\n }\n />\n \n ) : (\n \n {option.label}\n \n )}\n
\n ))}\n Hello {user?.name || 'User'},
\nWelcome to ZeroShotBot!
\n\n ZeroShotBot is a no-code, no-train bot platform. First of its kind.\n Just add your answers in the answer bank and deploy your bot. Select a\n path you’d like to get started with.\n
\n\n\n {'Date created: '}\n {ticketInfo.dateRaised\n ? getLocalTimeString(new Date(ticketInfo.dateRaised))\n : null}\n
\n
\n \n
\n {'Last update: '}\n {ticketInfo.lastUpdate\n ? getLocalTimeString(new Date(ticketInfo.lastUpdate))\n : null}\n
\n
\n \n
You are impersonating {impersonatedUser?.name || 'User'}
\n \n \n Impersonating user will end, are you sure you want to go back to\n admin page?\n
\n ),\n onOk() {\n stopImpersonation();\n history.push(ROUTES.ADMIN_PAGE);\n },\n onCancel() {\n return;\n },\n });\n } else {\n history.push(ROUTES.ADMIN_PAGE);\n }\n } else {\n history.push(ROUTES.HOME);\n }\n };\n\n const stopImpersonation = async () => {\n await dispatch({\n type: STOP_IMPERSONATING_USER,\n });\n };\n\n const getTransactionCountParagraph = () => {\n if (currentTransactionCount > maxTransactionCount) {\n const excessTransaction = Math.abs(\n currentTransactionCount - maxTransactionCount\n );\n return `You have gone above your transaction limit this month. Excess transaction count: ${excessTransaction} `;\n } else {\n return `You have used ${currentTransactionCount} of ${maxTransactionCount} ${\n planType === 'free' ? 'free' : ''\n } transactions per month.`;\n }\n };\n\n const UserOptions = (\n\n \n {planType.charAt(0).toUpperCase() + planType.slice(1)} Plan\n \n
\n \n 80}>\n {getTransactionCountParagraph()}\n \n {isExternalPage ? (\n \n Upgrade Plan\n \n ) : (\n Upgrade Plan\n )}\n
\n Settings
\n \n {state?.user?.is_superuser && !isImpersonating ? (\n Admin
\n \n ) : (\n My Bots
\n \n )}\n \n \n Bot Menu - Overview\n \n
\n ),\n target: '.bot-menu-sidebar',\n disableBeacon: true,\n hideFooter: true,\n placement: 'auto',\n styles: {\n options: {\n zIndex: 10000,\n },\n },\n },\n];\n","import { useHistory } from 'react-router-dom';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport ROUTES from 'constants/routes';\nimport BackButton from '.';\nimport { cssVariables } from 'styles/root';\nimport { HomeOutlined } from '@ant-design/icons';\n\nconst StyledBack = styled(BackButton)`\n text-transform: uppercase;\n color: ${cssVariables.gray0} !important;\n width: 88%;\n text-align: left;\n background: none !important;\n font-weight: ${cssVariables.font.bold};\n font-size: 14px;\n box-shadow: none;\n :hover {\n color: ${cssVariables.gray0} !important;\n background: none !important;\n }\n\n .anticon-arrow-left {\n font-size: 18px;\n }\n`;\n\nexport const BackToBotsPage = props => {\n const history = useHistory();\n const { iconOnly, ...rest } = props;\n return (\n \n This is your Bot Menu where you can find the features and\n functionalities that you need to completely setup and integrate your\n bot. The Bot Overview will show you the Total no. of Answers in your\n Answer Bank, Total Questions Asked (Last 7 days), Fallback Answer\n Called (Last 7 days), Total Live Integrations, Total Test Suites, and\n Visitors (Last 7 days).\n
\n\n Click on the link below the tile card to get the details on your Bot.\n Click on Answer Bank in the Bot menu to add answers in your Bot. After\n setting up your Answer Bank, you can test your answers by clicking on\n Automation Testing in the Bot menu. Once your ready to deploy your\n Bot, click on Integration in the menu, then select your desired\n integration channel (Web, Mobile, Viber, Facebook, Sandbox).\n
\n\n Click on Analytics to view a summary of your Bot response and\n performance.\n
\n\n Click on Bot Settings to update your Bot's general settings, response,\n and set the access and permission.\n
\n{step.title}
}\n {step.content}
\n \n {index > 0 && (\n \n )}\n {isLastStep ? (\n \n ) : (\n \n )}\n
\n \n \n
\n \n {showIconOnly ? (\n {botName[0]?.toUpperCase() || '?'} \n ) : (\n 
\n )}\n {!showIconOnly && {botName}}\n
\n {step.title}
}\n {step.content}
\n \n \n
\n ),\n target: '.default-chat-answer',\n disableBeacon: true,\n placement: 'auto',\n },\n {\n content: (\n Default Answer
\n\n This is the Fallback response which the bot provides when none of\n answers are found to be relevant for the question by the AI, based on\n a threshold score defined for the bot.\n
\n\n
\n ),\n target: '.default-chat-score',\n disableBeacon: true,\n placement: 'auto',\n },\n {\n content: (\n Threshold Score
\n\n We have defined a default Threshold score of 0.1. You can change the\n threshold score as well as Fallback Response for your bot. This option\n is in the Bot settings section in the left navigation bar.\n
\n\n
\n ),\n target: '.test-answer-use-draft',\n disableBeacon: true,\n placement: 'auto',\n },\n];\n\nexport const CHAT_ANSWER_STEPS = [\n {\n content: (\n Use Draft
\nTest your bot using draft answers.
\n\n
\n ),\n target: '.chat-answer',\n disableBeacon: true,\n placement: 'auto',\n },\n {\n content: (\n Bot Response
\n\n ZSB Bot uses an advanced-first of its kind, AI model to select the\n best response for the question from the answer bank options.\n
\nAnchor and Display Answer
\nThe Answer has two components:
\n\n The Anchor Answer is used by the AI model to score the\n relevance of an answer to the question being asked. It is recommended\n to keep this limited to text.\n
\n\n Display Answer is what the bot provides as response. This\n provides you the ability to add rich text content, images, links to\n the answer without affecting the AI model (or your could even use it\n to trick the AI 😉).\n
\n\n
\n ),\n target: '.chat-score',\n disableBeacon: true,\n placement: 'auto',\n },\n {\n content: (\n Score
\n\n The bot matches the question with all answers in the answer bank and\n returns the answer with the highest relevance score assigned by our\n AI.\n
\n\n The 'Use Another Response' option in the menu (⋮) next to the Answer\n can be used to check what the AI has scored for other answers.\n
\n\n
\n ),\n target: '.chat-edit-answer',\n disableBeacon: true,\n placement: 'auto',\n },\n {\n content: (\n Edit Answer
\n\n Not satisfied with the answer? Edit your bot's Anchor or Display\n Answer quickly from here or from within the Answer Bank. You also have\n the ability to nudge the AI's knowledge to make it respond with\n another answer.\n
\n\n Try the 'Use Another Response' option in the menu next to the answer.\n Please note: Linking could change how the bot responds for other\n questions too.\n
\n\n
\n ),\n target: '.chat-action',\n disableBeacon: true,\n placement: 'auto',\n },\n];\n","import { createSelector } from 'reselect';\nimport { currentBotSelector } from '.';\n\nexport const chatListSelector = createSelector(\n currentBotSelector,\n bot => bot.chatList || []\n);\n","import { useState, useEffect, useContext, useRef } from 'react';\nimport { ACTIONS, EVENTS, STATUS } from 'react-joyride';\nimport { message } from 'antd';\nimport { useLocation } from 'react-router-dom';\n\nimport { apiService } from 'services/api.service';\nimport { Context } from 'store/store';\nimport {\n CLEAR_CHAT_LIST,\n CLOSE_SIMILAR_QUESTIONS_MODAL,\n PUSH_CHAT_ANSWER,\n PUSH_CHAT_QUESTION,\n SET_ANSWER_EDITOR_SELECTED_ANSWER,\n SET_BOT_SETTINGS,\n SET_CHAT_MODE,\n SET_ONBOARDING_FLAG,\n SET_TYPING_EXPERIENCE,\n SET_WS_ASK_QUESTION_SENDING,\n SHOW_CHAT_ANSWER_IN_MODAL,\n SHOW_CHAT_SELECTED_SEQUENCE_IN_MODAL,\n SHOW_QUESTION_EDITOR,\n SHOW_RESPONSE_PICKER_MODAL_WITH_ANSWERSCORE_PAYLOAD,\n} from 'store/action';\nimport { getCurrentBrowser, isM1Chip } from 'utils';\nimport {\n chatAnswerInModalSelector,\n isChatOnDevModeSelector,\n isSidebarChatExpandedSelector,\n similarQuestionsModalSelector,\n} from 'selectors/bot/ui';\nimport { defaultAnswerThresholdSelector } from 'selectors/bot/answers';\nimport { DEFAULT_ERROR_MESSAGE, GET_DATA_ERROR } from 'constants/error';\nimport useSelector from 'store/useSelector';\nimport {\n botModeSelector,\n isAutoTranslateResponseSelector,\n isBotOpenAIEnabledSelector,\n isBotTypingExperienceEnabledSelector,\n shouldShowTestChatUseContextSelector,\n} from 'selectors/bot';\nimport { chatListSelector } from 'selectors/bot/chatList';\n\nconst useSidebarChat = ({\n handleChatAskQuestion,\n setContextHistory,\n maxInteraction,\n setMaxInteraction,\n contextHistory,\n}) => {\n const SpeechRecognition =\n window.SpeechRecognition || window.webkitSpeechRecognition;\n // const SpeechGrammarList =\n // window.SpeechGrammarList || window.webkitSpeechGrammarList;\n // const SpeechRecognitionEvent =\n // window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;\n\n const [state, dispatch] = useContext(Context);\n const similarQuestionsModal = useSelector(similarQuestionsModalSelector);\n const isAutoTranslateResponse = useSelector(isAutoTranslateResponseSelector);\n const isBotTypingExperienceEnabled = useSelector(\n isBotTypingExperienceEnabledSelector\n );\n const isBotOpenAIEnabled = useSelector(isBotOpenAIEnabledSelector);\n const chatList = useSelector(chatListSelector);\n const isChatOnDevMode = useSelector(isChatOnDevModeSelector);\n const isSidebarChatExpanded = useSelector(isSidebarChatExpandedSelector);\n const chatAnswerInModal = useSelector(chatAnswerInModalSelector);\n const defaultAnswerThreshold = useSelector(defaultAnswerThresholdSelector);\n const botMode = useSelector(botModeSelector);\n const shouldShowTestChatUseContext = useSelector(\n shouldShowTestChatUseContextSelector\n );\n\n const {\n sentinel,\n token,\n graph,\n plan: { onboarding_flag },\n bot: { name, jid },\n featureFlags,\n webSocket,\n } = state;\n const { pathname } = useLocation();\n const [chatQuestion, setChatQuestion] = useState(null);\n const [isSpeechActivated, setSpeechActivated] = useState(false);\n const [flipAnswer, setflipAnswer] = useState([]);\n const [sending, setSending] = useState(false);\n const [loading, setLoading] = useState(false);\n const [listening, setListening] = useState(false);\n const [runTour, setRunTour] = useState(false);\n const [runTourDefaultAnswer, setRunTourDefaultAnswer] = useState(false);\n const [stepIndex, setStepIndex] = useState(0);\n const [stepIndexDefaultAnswer, setStepIndexDefaultAnswer] = useState(0);\n const lastChatAnswer = chatList?.length\n ? chatList[chatList?.length - 1].answer\n : null;\n const [isQuickButtonsVisible, setIsQuickButtonsVisible] = useState(false);\n const [isIncludeDraftAnswers, setIncludeDraftAnswers] = useState(false);\n const [isChatMoreMenuOpen, setChatMoreMenuOpen] = useState(false);\n const [translateLanguage, setTranslateLanguage] = useState(\n isAutoTranslateResponse\n );\n\n const [typingExperience, setTypingExperience] = useState(\n isBotTypingExperienceEnabled\n );\n\n const bottomChatAreaRef = useRef(null);\n\n const excludedBrowsers = ['Opera', 'Firefox'];\n const isNotAnswerBank = !pathname.includes(`answer-bank`) ? true : false;\n // Should allow on google chrome browsers\n // OR\n // Should allow on all browser except browsers inside `excludedBrowsers`\n // AND\n // Should not be on mac m1 chips\n const isSpeechAllowed =\n getCurrentBrowser().includes('Chrome') ||\n (!excludedBrowsers.includes(getCurrentBrowser()) && !isM1Chip());\n const synth = window.speechSynthesis;\n const voices = synth?.getVoices();\n\n useEffect(() => {\n if (chatList !== null && chatList.length) {\n scrollToEnd();\n }\n\n if (\n (lastChatAnswer &&\n !!lastChatAnswer.quickReply &&\n lastChatAnswer.quickReplyOptions &&\n lastChatAnswer.quickReplyOptions.length) ||\n (lastChatAnswer && lastChatAnswer.requestAgent)\n ) {\n setIsQuickButtonsVisible(true);\n } else {\n setIsQuickButtonsVisible(false);\n }\n }, [chatList, isQuickButtonsVisible]);\n\n useEffect(() => {\n scrollToEnd();\n }, [webSocket]);\n\n useEffect(() => {\n return () => {\n dispatch({\n type: SET_CHAT_MODE,\n payload: false,\n });\n };\n }, []);\n\n const handleFlipAnswer = index => {\n if (flipAnswer.includes(index)) {\n const flippedIndices = flipAnswer.filter(\n answerIndex => answerIndex !== index\n );\n setflipAnswer(flippedIndices);\n } else {\n setflipAnswer([...flipAnswer, index]);\n }\n };\n\n const scrollToEnd = () => {\n if (bottomChatAreaRef.current) {\n bottomChatAreaRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n });\n }\n };\n useEffect(() => {\n const answersList = chatList || [];\n const isDefaultAnswer = answersList.some(\n list => list?.answer?.type === 'default_answer'\n );\n\n if (isDefaultAnswer && !onboarding_flag.includes('TestDefaultAnswer')) {\n setTimeout(() => setRunTourDefaultAnswer(true), 2000);\n } else {\n setRunTourDefaultAnswer(false);\n }\n }, [chatList, onboarding_flag]);\n\n useEffect(() => {\n const notDefaultAnswerList = chatList?.filter(\n chat => chat.answerContext?.name !== 'default_answer'\n );\n\n if (\n notDefaultAnswerList?.length === 1 &&\n !onboarding_flag.includes('TestChatAnswer')\n ) {\n setTimeout(() => setRunTour(true), 2000);\n } else {\n setRunTour(false);\n }\n }, [chatList?.length, onboarding_flag]);\n\n const onClickCallback = async data => {\n const { action, index, type, status } = data;\n if (\n [STATUS.FINISHED, STATUS.SKIPPED].includes(status) ||\n ACTIONS.CLOSE === action\n ) {\n setRunTour(false);\n setStepIndex(0);\n if (!onboarding_flag.includes('TestChatAnswer')) {\n await apiService.setOnboardingFlag(\n sentinel,\n token,\n graph,\n 'TestChatAnswer'\n );\n dispatch({ type: SET_ONBOARDING_FLAG, payload: 'TestChatAnswer' });\n }\n } else if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {\n const stepIndex = index + (action === ACTIONS.PREV ? -1 : 1);\n setStepIndex(stepIndex);\n if (index === 0) {\n }\n }\n };\n\n const onDefaultAnswerClickCallback = async data => {\n const { action, index, type, status } = data;\n if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {\n setRunTourDefaultAnswer(false);\n setStepIndexDefaultAnswer(0);\n if (!onboarding_flag.includes('TestDefaultAnswer')) {\n await apiService.setOnboardingFlag(\n sentinel,\n token,\n graph,\n 'TestDefaultAnswer'\n );\n dispatch({ type: SET_ONBOARDING_FLAG, payload: 'TestDefaultAnswer' });\n }\n } else if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {\n const stepIndex = index + (action === ACTIONS.PREV ? -1 : 1);\n setStepIndexDefaultAnswer(stepIndex);\n if (index === 0) {\n }\n }\n };\n\n const handleChange = e => {\n if (sending || webSocket?.sending) {\n return false;\n }\n setChatQuestion(e.target.value);\n };\n\n const handleSubmit = async (evt, channel) => {\n evt.preventDefault();\n setChatQuestion(null);\n if (sending || webSocket?.sending) {\n return false;\n }\n await dispatch({\n type: SET_WS_ASK_QUESTION_SENDING,\n });\n\n try {\n await handleChatAskQuestion(chatQuestion, channel, isIncludeDraftAnswers);\n } catch (error) {}\n setChatQuestion(null);\n };\n\n const handleLinkAnswer = async (chatItem, idx) => {\n setLoading(true);\n try {\n await openQuestionEditor(chatItem.question, chatItem.answer, idx);\n } catch (error) {}\n setLoading(false);\n };\n\n const getStoredInteractions = () => {\n const interactionList = JSON.parse(localStorage.getItem('interactions'));\n if (interactionList?.length > maxInteraction * 2) {\n interactionList.splice(0, 2);\n }\n return contextHistory ? interactionList : [];\n };\n\n const handleQuickReplyAnswer = async (\n chatAnswer,\n chatQuestion,\n channel,\n includeDraftAnswers\n ) => {\n const questionPayload = {\n text: { ...chatQuestion, question: chatQuestion.label },\n metadata: { channel },\n use_draft: includeDraftAnswers,\n history: getStoredInteractions(),\n };\n\n await dispatch({\n type: PUSH_CHAT_QUESTION,\n payload: questionPayload,\n });\n\n // Add 1 second delay for answer\n setSending(true);\n setTimeout(() => {\n dispatch({\n type: PUSH_CHAT_ANSWER,\n payload: chatAnswer,\n });\n setSending(false);\n }, 1000);\n };\n\n const handleSendQuickReply = async quickReply => {\n setChatQuestion(quickReply.question);\n setSending(true);\n if (typeof quickReply.answer === 'object') {\n handleQuickReplyAnswer(\n quickReply.answer,\n quickReply,\n 'ZSB Platform',\n isIncludeDraftAnswers\n );\n } else {\n await handleChatAskQuestion(\n quickReply,\n 'ZSB Platform',\n isIncludeDraftAnswers\n );\n }\n\n setChatQuestion(null);\n setSending(false);\n };\n\n const openResponseModalPicker = async (text, answer, idx) => {\n setSending(true);\n if (\n text === 'string' &&\n !text.length &&\n !answer &&\n !Object.keys(similarQuestionsModal?.itemToChange)?.length\n ) {\n return false;\n }\n const question =\n typeof text === 'string' && text.length\n ? text\n : similarQuestionsModal.itemToChange?.question;\n const responsePickerSelectedAnswer =\n typeof answer === 'object' && Object.keys(answer).length\n ? answer\n : similarQuestionsModal.itemToChange?.answer;\n\n const title = 'Hard Link Question to Answer';\n const res = await apiService.getQuestionMatchesWithAnswer(\n question,\n null,\n sentinel,\n jid,\n token\n );\n\n if (!res.data?.report[0]) {\n setSending(false);\n return message.error(DEFAULT_ERROR_MESSAGE);\n }\n\n await dispatch({\n type: CLOSE_SIMILAR_QUESTIONS_MODAL,\n });\n await dispatch({\n type: SHOW_RESPONSE_PICKER_MODAL_WITH_ANSWERSCORE_PAYLOAD,\n payload: {\n answers: res.data.report[0],\n botName: name,\n withQuestion: true,\n action: similarQuestionsModal.action || 'edit',\n title,\n isHardLinked: responsePickerSelectedAnswer?.isHardLinked,\n answerId: responsePickerSelectedAnswer?.jid,\n itemToChange: {\n question: {\n text: question,\n jid: answer?.questionId,\n },\n answer: responsePickerSelectedAnswer,\n idx: idx || similarQuestionsModal?.itemToChange?.idx || 0,\n },\n },\n });\n setSending(false);\n };\n\n const openQuestionEditor = async (text, answer, idx) => {\n const res = await apiService.getSimilarQuestions(\n text,\n sentinel,\n jid,\n token\n );\n\n if (!res.data?.report[0]) {\n setSending(false);\n return message.error(DEFAULT_ERROR_MESSAGE);\n }\n const similarQuestions = res.data.report[0];\n\n dispatch({\n type: SHOW_QUESTION_EDITOR,\n payload: {\n action: answer?.isHardLinked ? 'edit' : 'add',\n answerId: answer?.jid,\n isHardLinked: answer?.isHardLinked ? true : false,\n jid: answer?.isHardLinked ? answer?.questionId : null,\n text,\n similarQuestions,\n },\n });\n };\n\n const handleCloseSimilarQuestionsModal = () => {\n dispatch({\n type: CLOSE_SIMILAR_QUESTIONS_MODAL,\n });\n };\n\n const toggleSpeak = () => {\n const isToggled = isSpeechActivated;\n if (!isToggled && SpeechRecognition) {\n const recognition = new SpeechRecognition();\n setSpeechActivated(!isSpeechActivated);\n setListening(true);\n recognition.continuous = false;\n recognition.lang = navigator.language;\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n recognition.start();\n\n recognition.onresult = function (event) {\n concatSpeech(event.results[0][0].transcript);\n stopListening();\n };\n recognition.onspeechend = function () {\n console.log('Speech ending');\n stopListening();\n };\n recognition.onend = function () {\n console.log('Speech ending');\n stopListening();\n };\n recognition.onabort = function () {\n console.log('Speech aborted');\n stopListening();\n };\n recognition.onnomatch = function (event) {\n console.log(\"Speech API can't recognize\");\n };\n recognition.onerror = function (event) {\n stopListening();\n console.log('Speech API error occured: ', event.error);\n };\n } else if (isToggled && SpeechRecognition) {\n return stopListening();\n } else {\n console.log('Speech API not supported');\n }\n };\n\n const stopListening = () => {\n setListening(false);\n setSpeechActivated(false);\n };\n\n const readText = (answer, idx) => {\n if (answer && voices.length) {\n // only read the .text\n // show_text could contain html elements\n const utterThis = new SpeechSynthesisUtterance(answer);\n utterThis.lang = navigator.language;\n utterThis.onend = function (event) {\n console.log('SpeechSynthesisUtterance.onend');\n };\n utterThis.onerror = function (event) {\n console.error('SpeechSynthesisUtterance.onerror');\n };\n utterThis.pitch = 1;\n utterThis.rate = 1;\n synth.speak(utterThis);\n }\n };\n\n const concatSpeech = newSpeech => {\n if (chatQuestion) {\n setChatQuestion(`${chatQuestion} ${newSpeech}`);\n } else {\n setChatQuestion(newSpeech);\n }\n };\n\n const handleChangeAnswerVersion = e => {\n return e.target.checked && !isIncludeDraftAnswers\n ? setIncludeDraftAnswers(true)\n : setIncludeDraftAnswers(false);\n };\n\n const handleTranslateChange = async event => {\n setTranslateLanguage(event.target.checked);\n const res = await apiService.editTranslationSettings(\n sentinel,\n jid,\n token,\n event.target.checked\n );\n if (!res.data || !res.data.report[0] || !res.data.report[0].context) {\n throw new Error(GET_DATA_ERROR);\n }\n\n const botData = res.data.report[0];\n const defaultAnswerData = res.data.report[1];\n\n dispatch({\n type: SET_BOT_SETTINGS,\n payload: {\n bot: botData,\n defaultAnswer: defaultAnswerData,\n },\n });\n };\n\n const handleTypingExperience = async event => {\n setTypingExperience(event.target.checked);\n dispatch({\n type: SET_TYPING_EXPERIENCE,\n payload: event.target.checked,\n });\n };\n\n const handleContextHistoryChange = async event => {\n setContextHistory(event.target.checked);\n };\n\n const handleChangeDropdownVisibility = val => {\n setChatMoreMenuOpen(val);\n };\n\n const handleChangeChatView = isDevMode => {\n dispatch({\n type: SET_CHAT_MODE,\n payload: isDevMode,\n });\n };\n\n const handleShowJSONAnswerInModal = (answer, question) => {\n dispatch({\n type: SHOW_CHAT_ANSWER_IN_MODAL,\n payload: { answer, question },\n });\n };\n\n const handleShowSelectedSequenceInModal = sequence => {\n dispatch({\n type: SHOW_CHAT_SELECTED_SEQUENCE_IN_MODAL,\n payload: sequence,\n });\n };\n\n const clearChatHistory = () => {\n dispatch({\n type: CLEAR_CHAT_LIST,\n payload: null,\n });\n };\n\n const handleShowAnswerEditorModal = (answer, args) => {\n dispatch({\n type: SET_ANSWER_EDITOR_SELECTED_ANSWER,\n payload: { answer, args },\n });\n };\n\n return {\n chatAnswerInModal,\n chatList,\n chatQuestion,\n featureFlags,\n flipAnswer,\n bottomChatAreaRef,\n handleChange,\n handleFlipAnswer,\n handleLinkAnswer,\n handleSendQuickReply,\n handleSubmit,\n handleChangeAnswerVersion,\n handleCloseSimilarQuestionsModal,\n handleTranslateChange,\n handleContextHistoryChange,\n handleChangeChatView,\n handleChangeDropdownVisibility,\n handleShowJSONAnswerInModal,\n handleShowSelectedSequenceInModal,\n handleShowAnswerEditorModal,\n isBotOpenAIEnabled,\n isChatMoreMenuOpen,\n isChatOnDevMode,\n isNotAnswerBank,\n isSidebarChatExpanded,\n isSpeechAllowed,\n isQuickButtonsVisible,\n isSpeechActivated,\n lastChatAnswer,\n listening,\n loading,\n maxInteraction,\n name,\n onClickCallback,\n onDefaultAnswerClickCallback,\n openResponseModalPicker,\n readText,\n runTour,\n runTourDefaultAnswer,\n sending,\n setMaxInteraction,\n shouldShowTestChatUseContext,\n similarQuestionsModal,\n stepIndex,\n stepIndexDefaultAnswer,\n toggleSpeak,\n translateLanguage,\n clearChatHistory,\n defaultAnswerThreshold,\n botMode,\n webSocket,\n typingExperience,\n handleTypingExperience,\n };\n};\nexport default useSidebarChat;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { cssVariables } from 'styles/root';\n\nconst StyledHR = styled.div`\n width: 100%;\n border: none;\n border-top: 1px solid ${cssVariables.gray2};\n`;\n\nconst GenericHR = props => {\n const { ...rest } = props;\n return \n The below options are available in the menu in addition to Edit Answer\n and Use Another Response.\n
\nSeek
\n\n You can use Seek, if you have a big list in the answer bank and want\n to navigate to the current answer.\n
\nHide Display Answer
\n\n This flips the Display answer to show the Anchor Answer. You can\n revert by selecting Show Display answer.\n
\n{'ZSB will brb...'}
\n{START_TRIAL_DAYS_MESSAGE}
\n{'Access our basic plan features.'}
\n\n Impersonating user will end, are you sure you want to go back to\n admin page?\n
\n ),\n onOk() {\n stopImpersonation();\n history.push(ROUTES.ADMIN_PAGE);\n },\n onCancel() {\n return;\n },\n });\n } else {\n history.push(ROUTES.ADMIN_PAGE);\n }\n } else {\n history.push(ROUTES.HOME);\n }\n };\n\n const handlePageResizing = () => {\n dispatch({\n type: SET_PAGE_DETAILS,\n });\n };\n\n useEffect(() => {\n window.addEventListener('resize', handlePageResizing);\n handlePageResizing();\n return () => {\n window.removeEventListener('resize', handlePageResizing);\n };\n }, []);\n\n return (\n\n \n {websiteFormState?.selectedPageList?.category\n ?.charAt(0)\n .toUpperCase() +\n websiteFormState?.selectedPageList?.category?.slice(\n 1\n ) || ''}{' '}\n \n
\n )}\n />\n \n ) : (\n\n {uploadURLSteps[currentStep]?.content}\n
\n \n ) : (\n <>\n \n\n {scrapePreviewSrc && (\n Hello {user?.name || 'User'},
\nWelcome to ZeroShotBot!
\n\n ZeroShotBot is a no-code, no-train bot platform. We can create a bot and\n create a Wordpress integration for you, you just need to upload a file\n or import a url below.\n
{' '}\n{fileType === 'file' ? 'Select a file' : 'Import Website'}
\n\n \n {!websiteFormState?.isTargetElementOpen && (\n setFileType(e.target.value)}\n value={fileType}\n style={{ paddingLeft: '10px', paddingBottom: '3%' }}\n disabled={actionPercentage > 0}\n >\n File \n Website \n \n )}\n {actionPercentage > 0 && !websiteFormState?.isTargetElementOpen && (\n <>\n \n {activeActionLabel}\n \n \n )}\n\n {fileType === 'file' && !websiteFormState?.isTargetElementOpen && (\n \n
\n \n \n );\n};\n\nWordPressIntegrationModal.propTypes = {\n onClose: PropTypes.func,\n show: PropTypes.bool.isRequired,\n};\n\nexport default WordPressIntegrationModal;\n","import React, { useEffect } from 'react';\nimport { Dropdown, Menu, Breadcrumb, Modal, Col } from 'antd';\nimport {\n SearchOutlined,\n DownOutlined,\n UpOutlined,\n PlusOutlined,\n HomeOutlined,\n} from '@ant-design/icons';\nimport Joyride from 'react-joyride';\nimport { useHistory } from 'react-router-dom';\n\nimport Title from 'components/Title';\nimport BotCard from 'components/BotCard';\nimport BotModal from 'components/Modals/BotModal/BotModal';\nimport NewUserModal from 'components/Modals/NewUserModal';\nimport Layout from 'components/Layout';\nimport JoyrideTooltip from 'components/ToolTips/JoyrideToolTip';\nimport Button from 'components/Button';\nimport {\n NewBotCard,\n StyledRoot,\n StyledBotSearch,\n StyledSearchInput,\n StyledBotSorter,\n StyledSortSelected,\n StyledViewTypeMenu,\n StyledMenuOutlined,\n StyledTableOutlined,\n StyledCheckOutlined,\n StyledDownOutlined,\n StyledViewTypeDropDown,\n StyledViewTypeOption,\n StyledViewTypeText,\n StyledListviewBots,\n StyledListviewNewBot,\n StyledNoBots,\n StyledNoBotsText,\n StyledBots,\n} from './bots.styles';\nimport useYourBots from './hooks';\nimport ROUTES from 'constants/routes';\nimport WordPressIntegrationModal from 'components/Modals/WordPressIntegrationModal';\nimport { CLOSE_WORDPRESS_MODAL } from 'store/action';\n\nconst { confirm } = Modal;\n\nconst steps = [\n {\n content: `This is your Home page where you can view all your Bot. In here you can view all your Bots, the no. of answers in your bot, and the no. of days your bot has been modified. At the top right of your Bot tile, select the menu (vertical ellipsis) to edit or delete the selected bot. \n To add or create a new bot, click on +New tile card, and enter your Bot details (Bot Name and Bot Description). To open your Bot, click on View Bot button below your Bot's Name.`,\n target: '.view-bot-button',\n disableBeacon: true,\n hideFooter: true,\n },\n];\n\nconst BOT_SORTING_LIST = [\n {\n key: 0,\n label: 'Date Modified (desc)',\n sortBy: 'lastUpdatedAt',\n },\n {\n key: 1,\n label: 'Date Modified (asc)',\n sortBy: 'lastUpdatedAt',\n },\n {\n key: 2,\n label: 'Date Created (desc)',\n sortBy: 'createdAt',\n },\n {\n key: 3,\n label: 'Date Created (asc)',\n sortBy: 'createdAt',\n },\n {\n key: 4,\n label: 'Bot Name (desc)',\n sortBy: 'name',\n },\n {\n key: 5,\n label: 'Bot Name (asc)',\n sortBy: 'name',\n },\n {\n key: 6,\n label: 'Total Answers (desc)',\n sortBy: 'answerCount',\n },\n {\n key: 7,\n label: 'Total Answers (asc)',\n sortBy: 'answerCount',\n },\n];\n\nconst YourBots = () => {\n const {\n botsOrder,\n bots,\n searchKey,\n loading,\n tempBot,\n viewType,\n onAddBot,\n onClickCallback,\n onSearchKeyChange,\n runTour,\n setRunTour,\n setShowNewUserModal,\n showNewUserModal,\n handleSortBots,\n handleViewBot,\n handleUpdateViewType,\n stopImpersonation,\n isAdmin,\n isImpersonating,\n isBotModalVisible,\n stepIndex,\n setStepIndex,\n isWordPressModalVisible,\n dispatch,\n isExternalPage,\n } = useYourBots();\n const { push } = useHistory();\n\n useEffect(() => {\n if (isImpersonating) {\n window.history.pushState(null, window.title, window.location.href);\n window.onpopstate = e => {\n confirm({\n content: (\n \n 0}\n >\n \n \n \n
\n )}\n\n {fileType === 'website' && actionPercentage < 60 && (\n \n Impersonating user will end, are you sure you want to go back to\n admin page?\n
\n ),\n onOk() {\n stopImpersonation();\n window.history.back();\n },\n onCancel() {\n window.history.pushState(\n null,\n document.title,\n window.location.href\n );\n },\n });\n };\n\n return () => (window.onpopstate = null);\n }\n }, []);\n\n const viewTypeMenu = (\n{testSuite.name}
\n \n {testSuite.testCount} Questions\n
\n {selectedTestSuite &&\n testSuite.jid === selectedTestSuite.jid && (\n {testSuite.name}
\n \n {testSuite.testCount} Questions\n
\n {selectedTestSuite &&\n testSuite.jid === selectedTestSuite.jid && (\n \n Create a new one.\n
\n You are deleting {name} category with{' '}\n {answersList.length} answers. \n This action cannot be undone.\n
\nPlease select an action from below:
\n\n
\n
To proceed, write `{name}` in the field below.
\n\n {isUserCategory && (\n \n \n \n \n )}\n \n \n setShowDeleteCategoryModal(true)}\n />\n \n \n
\n\n {`${answers.length} Answers`}
\n\n \n {'Preview'}\n \n \n {categoryName || selectedCategory.name || 'Category Name'}\n \n
\n \n {selectedCategory.action !== 'add'\n ? 'Edit/Delete Category'\n : 'New Category'}\n
\n )\n }\n onOk={isEditingCategory ? handleSubmit : handleCloseModal}\n okButtonProps={{\n disabled: isSubmitDisabled,\n loading,\n }}\n onCancel={handleCloseModal}\n okText={selectedCategory.action !== 'view-categories' ? 'Save' : 'Close'}\n spinning={loading}\n cancelText={'Close'}\n destroyOnClose\n isFormModal\n cancelButtonProps={{\n style: { display: !isEditingCategory ? 'none' : 'block' },\n disabled: loading,\n }}\n >\n {selectedCategory.action !== 'view-categories' ? (\n\n {fileType === 'generate-faq' && (\n handleFindFAQquestion(answer)}>\n \n )}\n \n selectedAnswer.uuid === answer.uuid\n )}\n >\n \n handleShowAnswerEditorModal(e, idx)}\n disabled={answersAllowed <= idx}\n className={\n (handleDuplicates(answer) > 0 &&\n 'text-area-with-duplicate') ||\n (similarAnswers.filter(\n item => item.answer === handleCheckAnswer(answer)\n ).length > 0 &&\n 'text-area-similar-answer-validated')\n }\n disableSpan={true}\n />\n {answersAllowed > idx && (\n \n {handleAnswerIsVerified(handleCheckAnswer(answer)) ? (\n <>\n Final\n \n {fileType === 'json' ? (\n handleToggleAnswerEditor(answer, idx)}\n />\n ) : null}\n {answersAllowed > idx &&\n handleDuplicates(handleCheckAnswer(answer)) === 0 &&\n handleAnswerIsVerified(handleCheckAnswer(answer)) === false &&\n handleCheckAnswer(answer) !==\n selectedSimilarAnswers[idx]?.answer && (\n \n \n handleDisplaySimilarAnswer(handleCheckAnswer(answer))\n }\n className=\"text-ingest-delete\"\n />\n \n )}\n {handleCheckAnswer(answer) ===\n selectedSimilarAnswers[idx]?.answer && (\n \n \n handleVerifyAnswer(handleCheckAnswer(answer))\n }\n />\n \n )}\n {verifiedAnswers &&\n handleAnswerIsVerified(handleCheckAnswer(answer)) ===\n true && (\n \n \n )}\n \n handleRemoveAnswer(answer)}\n className={`text-ingest-delete \n ${handleDuplicates(answer) > 0 && 'mrgn-left'}\n `}\n />\n \n \n {getSimilarAnswer(answer)}\n
\n );\n })}\n \n );\n};\n\nAnswerList.propTypes = {\n parsedFileAnswers: PropTypes.array,\n selectedAnswers: PropTypes.array,\n answersAllowed: PropTypes.number,\n fileType: PropTypes.string,\n similarAnswers: PropTypes.array,\n verifiedAnswers: PropTypes.array,\n selectedSimilarAnswers: PropTypes.array,\n handleFindFAQquestion: PropTypes.func,\n toggleListCheckbox: PropTypes.func,\n handleCheckAnswer: PropTypes.func,\n handleShowAnswerEditorModal: PropTypes.func,\n handleDisplaySimilarAnswer: PropTypes.func,\n handleDuplicates: PropTypes.func,\n handleAnswerIsVerified: PropTypes.func,\n handleToggleAnswerEditor: PropTypes.func,\n handleVerifyAnswer: PropTypes.func,\n handleRemoveAnswer: PropTypes.func,\n getSimilarAnswer: PropTypes.func,\n toggleCheckBox: PropTypes.func,\n deleteAnswers: PropTypes.func,\n verifyAnswers: PropTypes.func,\n verifyAnswersProgress: PropTypes.number,\n importErrorMsg: PropTypes.string,\n importWarnMsg: PropTypes.string,\n similarAnswerWarnMsg: PropTypes.string,\n finalAnswerWarnMsg: PropTypes.string,\n};\n","import PropTypes from 'prop-types';\nimport { Upload } from 'antd';\nimport { ImportOutlined } from '@ant-design/icons';\nimport { StyledAntUploadContent } from './ImportAnswerModal.style';\nconst { Dragger } = Upload;\n\nconst CsvOrJsonStep = ({ fileType, handleUploadFile, handleRemoveFile }) => (\n Are you sure you want to close this window?
,\n onOk() {\n resetModal();\n },\n onCancel() {\n return;\n },\n cancelText: 'Cancel',\n okText: 'Close',\n });\n } else if (!closeAll && modalBtnLoading) {\n setCurrentStep(0);\n message.info('Import process will continue in the background', 10);\n setShowUploadModal(false);\n return onClose();\n } else if (closeAll) {\n resetModal();\n\n if (!isAddedAnswer) {\n return onClose();\n }\n }\n },\n [\n isVerifyingAnswers,\n modalBtnLoading,\n onClose,\n resetModal,\n setCurrentStep,\n setShowUploadModal,\n ]\n );\n\n const handleCancelImport = useCallback(() => {\n controller.abort();\n setModalBtnLoading(false);\n return handleCloseUploadModal(true);\n }, [controller, handleCloseUploadModal]);\n\n const openNotification = useCallback(() => {\n const key = `open${uuid()}`;\n setNotificationKey(key);\n const btn = (\n\n \n Text Ingest\n \n
\n
\n ),\n target: '.text-ingest-inputs',\n disableBeacon: true,\n hideFooter: true,\n placement: 'auto',\n },\n {\n content: (\n \n You can ingest text from a web page (eg:\n https://www.zeroshotbot.com/terms ). Just copy the url and paste it\n here to start the text ingesting process. Our AI will convert the\n content on the website into relevant answers.\n
\n\n
\n Or you can chose to use the text or paragraphs option to copy the text\n directly and parse them as answers.\n
\n\n \n Text Ingest\n \n
\n ),\n target: '.next-step-button',\n disableBeacon: true,\n hideFooter: true,\n placement: 'auto',\n },\n];\n","import React, { useCallback, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Joyride, { ACTIONS, EVENTS, STATUS } from 'react-joyride';\nimport {\n CloseCircleOutlined,\n InfoCircleOutlined,\n MinusSquareOutlined,\n CloseSquareOutlined,\n} from '@ant-design/icons';\nimport {\n Col,\n Input,\n Row,\n Spin,\n Statistic,\n Steps,\n Typography,\n message,\n} from 'antd';\nimport TextArea from 'components/TextArea';\nimport Tooltip from 'components/ToolTips/BaseToolTip';\nimport Button from 'components/Button';\nimport Modal from 'components/Modals/GenericModal';\nimport KeywordsForm from './KeywordsForm';\nimport JoyrideTooltip from 'components/ToolTips/JoyrideToolTip';\nimport { AnswerList } from './AnswerList';\nimport ImportAlertMessage from './ImportAlertMessage';\nimport CsvOrJsonStep from './CsvOrJsonStep';\nimport TextIngestStep from './TextIngestStep';\nimport {\n MaxSentenceCountWrapper,\n KeywordsWrapper,\n StyledFooterWrapper,\n StyledUploadTip,\n StyledUploadTipTitle,\n StyledSimilarAnswersLabel,\n StyledAnswersItem,\n StyledAnswers,\n StyledSimilarAnswers,\n StyledSummaryCard,\n ProductNameWrapper,\n MaxAnswersCountWrapper,\n HeaderContainer,\n HeaderTitle,\n HeaderActions,\n} from './ImportAnswerModal.style';\nimport useImportAnswerModal from './hooks';\nimport { apiService } from 'services/api.service';\nimport { TEXT_INGEST_STEP_ONE } from 'constants/joyride_steps/import_answer_modal';\nimport { SET_ONBOARDING_FLAG } from 'store/action';\nimport Select from 'components/Select';\n\nconst { Paragraph } = Typography;\nconst { Step } = Steps;\n\nconst SAMPLE_JSON_FORMAT = (\n Click next to start generating answers.
\n\n {`[\n {\n \"text\": \"Sample plain answer text\",\n \"show_text\": \"New answer again for testing\"\n \"qlinks\": ['hello', 'test question'],\n \"category\": 'test answers',\n \"category_color\": \"#d3d3d3\",\n },\n {\n \"text\": \"Another sample answer text\",\n \"show_text\": \"Another answer for testing\"\n \"qlinks\": ['question link', 'show me another answer'],\n \"category\": 'test answers 2',\n \"category_color\": \"#167be7\",\n },\n]`}\n \n {getActionButtons()}
\n {modalTitle[fileType]}
\n\n {steps[currentStep].content()}\n
\n \n \n \n \n Import Answer\n \n
\n ),\n target: '.import-button-dropdown',\n disableBeacon: true,\n hideFooter: true,\n placement: 'left',\n },\n {\n content: (\n \n This Import button will allow you to import multiple answers from a\n file. Supported formats are .csv, .txt, and .json file.\n
\n\n \n Import Answer\n \n
\n ),\n target: '.text-ingest',\n disableBeacon: true,\n hideFooter: true,\n placement: 'left',\n },\n];\n","import { EditTwoTone } from '@ant-design/icons';\nimport { cssVariables } from 'styles/root';\n\nexport const ANSWER_SORTING_LIST = [\n {\n key: 0,\n label: 'Date Modified (desc)',\n sortBy: 'lastEdited',\n },\n {\n key: 1,\n label: 'Date Modified (asc)',\n sortBy: 'lastEdited',\n },\n {\n key: 2,\n label: 'Length (desc)',\n sortBy: 'answerLength',\n },\n {\n key: 3,\n label: 'Length (asc)',\n sortBy: 'answerLength',\n },\n {\n key: 4,\n label: 'Popularity (desc)',\n sortBy: 'hitcount',\n },\n {\n key: 5,\n label: 'Popularity (asc)',\n sortBy: 'hitcount',\n },\n];\n\nexport const ANSWER_VERSION_LIST = [\n {\n label: {'Draft'},\n key: 'draft',\n icon: \n Use this feature to import an answers from a website (URL) or from a\n section in an article.\n
\nNo questions asked to the answer
\n )}\n \n setShowBulkMoveCategoryModal(false)}\n value=\"Cancel\"\n variant=\"secondary-btn-v2\"\n disabled={confirmModalLoading}\n />\n
\n {'Ooops! Something went wrong. Please try again later.'}
\n' + JSON.stringify(value, null, 2) + ''\n : value && lowerCase(key).includes('time')\n ? getLocalTimeString(value)\n : value?.toString() || 'None'\n }\n
\n `);\n }\n });\n }\n\n if (context.length && !isHovering) {\n setSelectedNode(Array.from(context).join('\\n').toString());\n }\n\n return context;\n };\n\n useEffect(() => {\n if (Object.keys(networkData).length && container.current) {\n const network = new vis.Network(container.current, networkData, options);\n network.on('click', item => {\n const node = !!network?.body?.data?.nodes\n ? network.body.data.nodes.get(item.nodes[0]).attributes\n : null;\n mapNodeContext(node);\n });\n }\n }, []);\n\n return (\n
\n
\n \n }\n >\n \n {option.children ? (\n <>\n \n {option.label}:\n \n handleChangeExportType(e, option.children)}\n style={{ marginLeft: 16 }}\n defaultValue={selectExportType}\n />\n \n ) : (\n \n {option.label}\n \n )}\n
\n ))}\n \n
\n \n }\n >\n \n \n \n \n \n
\n {`Generate FAQ`}
\n ) : (\n {`Text Generate`}
\n ) : (\n {`hits: ${hitcount}`}
\n ) : null}\n {!defaultAnswer && qlinks?.length > 0 ? (\n \n {`linked questions: ${qlinks?.length}`}\n
\n ) : null}\n \n {!defaultAnswer && (\n \n \n answer.type === 'answer'\n ? handleShowAnswerEditorModal(answer)\n : answer.type === 'website'\n ? handleShowWebsiteEditorModal(answer)\n : handleShowFileEditorModal(answer)\n }\n />\n \n )}\n \n
\n \n \n )}\n \n \n {botMode !== BOT_MODES.OPENAI ? (\n
\n ) : (\n \n setShowDisplayAnswer(!displayAnswer)}\n />\n )}\n
\n )}\n {tab.key === 'all' || selectedAnswers?.length ? null : (\n Let's teach {name || 'your bot'} how to respond.
\n\n It's Day 1 for {name || 'your bot'}. Add answers to its answer bank.\n
\n{name || 'Your bot'} will use these answers to respond.
\nYou can start with someting like
\n- \"Hi! I am {name || 'your bot'}.\"
\n- \"I will be answering questions for you.\"
\n- \"I use advanced AI to identify the right response.\"
\n {!isFreeUser && mode === BOT_MODES.ZSB && (\n\n or add answers from our{' '}\n
\n \n
\n \n }\n cancelText=\"Cancel\"\n >\n \n
\n ),\n onOk() {},\n });\n };\n\n const handleAddFile = async () => {\n setModalBtnLoading(true);\n let pages;\n\n try {\n dispatch({\n type: WS_UPDATE_ACTION,\n payload: {\n action: 'add_file',\n },\n });\n\n if (answersAllowed <= 0) {\n return message.error(limitErrorMsg);\n }\n\n if (selectedTemplateDetails?.crawlerParams === null) {\n setModalBtnLoading(false);\n setCurrentStep(currentStep + 1);\n }\n pages = renderImportedUrlParams();\n\n const payload = {\n ver: version ? 'final' : 'draft',\n fileType,\n pages,\n uploadingMethod: websiteFormState?.selectedUploadingMethod,\n webSocketChannel: webSocket?.channel ? webSocket?.channel : null,\n preConfigs: renderPreconfigData(\n websiteFormState?.selectedUploadingMethod,\n timeoutInSecond,\n []\n ),\n };\n\n if (!payload.pages) {\n delete payload.pages;\n }\n\n if (websiteFormState?.selectedTemplate === 'single') {\n delete payload.preConfigs;\n }\n\n const response = await apiService.addFile(payload, token, jid, sentinel);\n\n if (response?.data?.is_queued !== true) {\n const filesResponse = response?.data?.report[0]?.success;\n setTimeout(() => {\n addFileSuccessMessage();\n resetStates();\n setCurrentStep(0);\n setTimeoutInSecond(60);\n dispatch({\n type: ADD_FILE,\n payload: {\n response: filesResponse,\n type: 'website',\n },\n });\n handleCloseUploadModal(true, true);\n }, 3000);\n }\n } catch (error) {\n if (axios.isCancel(error)) {\n setIsImportBtnDisabled(false);\n return message.error(error.message || 'Operation aborted by the user.');\n } else {\n setModalBtnLoading(false);\n setIsImportBtnDisabled(false);\n return message.error(\n error.message || `Something went wrong. Importing website failed.`\n );\n }\n }\n };\n\n const renderCrawlerParams = () => {\n const parsedUrl = parsedUrlFilter();\n const extractedURL = new URL(websiteFormState?.urlList[0]?.url);\n const params =\n websiteFormState?.selectedScanningMethod === 'all'\n ? {\n filters: ['^' + parsedUrl],\n depth: 1,\n selector: websiteFormState?.targetElement\n ? websiteFormState?.targetElement.final + ' a[href]'\n : null,\n }\n : {\n filters: ['^' + extractedURL],\n depth: 1,\n selector: websiteFormState?.targetElement\n ? websiteFormState?.targetElement.final + ' a[href]'\n : null,\n };\n\n if (!params.selector) {\n delete params.selector;\n }\n return params;\n };\n\n const handleScrapedUrl = async () => {\n setModalBtnLoading(true);\n let urlDataSource = [];\n const triggerID = uuid();\n dispatch({\n type: WS_UPDATE_ACTION,\n payload: {\n action: 'scrape',\n triggerID,\n },\n });\n\n try {\n const scrapedParams = {\n url: websiteFormState?.urlList[0]?.url,\n uploadingMethod: websiteFormState?.selectedUploadingMethod,\n timeoutInSecond,\n crawler: renderCrawlerParams(),\n webSocketChannel: webSocket?.channel,\n method: websiteFormState?.targetElement ? 'selector' : null,\n expression: websiteFormState?.targetElement?.final,\n triggerID,\n };\n if (!scrapedParams.crawler) {\n delete scrapedParams.crawler;\n } else if (!scrapedParams.crawler?.filters) {\n delete scrapedParams.crawler?.filters;\n } else if (!scrapedParams.crawler?.webSocketChannel) {\n delete scrapedParams.crawler?.webSocketChannel;\n }\n\n if (!scrapedParams.method) {\n delete scrapedParams.method;\n delete scrapedParams.targetElement;\n }\n\n const response = await apiService.scrappedUrl(\n scrapedParams,\n token,\n jid,\n sentinel\n );\n\n const scannedResponse = response.data?.report[0]?.scanned\n ? extractScannedObject(response.data?.report[0]?.scanned)\n : [];\n\n if (scannedResponse?.length > 1) {\n dispatch({\n type: UPDATE_WS_SCANNED_DATA_SOURCE,\n payload: [\n ...extractWebsiteScanList(scannedResponse),\n {\n key: urlDataSource.length,\n url: websiteFormState?.urlList[0]?.url,\n },\n ],\n });\n }\n\n setCurrentStep(currentStep + 1);\n setModalBtnLoading(false);\n } catch (error) {\n if (axios.isCancel(error)) {\n setIsImportBtnDisabled(false);\n return message.error(error.message || 'Operation aborted by the user.');\n } else {\n setModalBtnLoading(false);\n setIsImportBtnDisabled(false);\n return message.error(\n error.message || `Something went wrong. File upload failed.`\n );\n }\n }\n };\n\n const resetStates = () => {\n setModalBtnLoading(false);\n setPages(null);\n setWebsiteFormState(DEFAULT_WEBSITE_FORM_STATE_VALUE);\n handleRemoveFile();\n dispatch({\n type: RESET_WEBSITE_SELECTED_PAGES,\n });\n };\n\n const resetModal = useCallback(() => {\n setParsedFileAnswers([]);\n setShowUploadModal(false);\n }, [setParsedFileAnswers, setShowUploadModal]);\n\n const handleCloseUploadModal = useCallback(() => {\n onClose();\n }, [modalBtnLoading, onClose, resetModal, setShowUploadModal]);\n\n const handleCancelImport = useCallback(() => {\n controller.abort();\n resetStates();\n dispatch({\n type: RESET_WS_SCANNER,\n });\n return handleCloseUploadModal(true);\n }, [controller, handleCloseUploadModal]);\n\n const handleBackward = () => {\n setCurrentStep(0);\n resetStates();\n dispatch({\n type: RESET_WS_SCANNER,\n });\n };\n\n const parsePageRange = pageRange => {\n const [start, end] = pageRange?.split('-').map(Number);\n return Array.from({ length: end - start + 1 }, (_, i) =>\n websiteFormState?.urlList[0]?.url.replace('{pages}', start + i)\n );\n };\n\n const handleGeneratePaginatedUrl = () => {\n if (websiteFormState?.urlList[0]?.url) {\n const pagesList = pages?.split(',').map(part => part.trim());\n let renderPageList = [];\n for (const page of pagesList) {\n if (page.includes('-')) {\n renderPageList = renderPageList.concat(parsePageRange(page));\n } else {\n renderPageList.push(\n websiteFormState?.urlList[0]?.url?.replace('{pages}', page)\n );\n }\n }\n\n // setPaginatedURLList(renderPageList);\n return renderPageList;\n }\n };\n\n const handleStopScrapping = async () => {\n try {\n const response = await apiService.stopScrapping(\n webSocket?.triggerID,\n token,\n jid,\n sentinel\n );\n\n if (response?.data?.success) {\n dispatch({\n type: WS_STOP_SCRAPER,\n });\n message.error(`Fetching stopped.`);\n }\n } catch (error) {\n setModalBtnLoading(false);\n return message.error(\n error.message || `Something went wrong. Stop fetching failed.`\n );\n }\n };\n\n const handleCloseElementSelecting = () => {\n handelWebsiteFormStateChanges(false, 'isTargetElementOpen');\n };\n\n const handleSaveElement = () => {\n setWebsiteFormState(prevState => {\n return {\n ...prevState,\n isTargetElementOpen: false,\n targetElement: {\n ...prevState.targetElement,\n final: prevState?.targetElement?.draft,\n },\n };\n });\n };\n\n const handleBackToPagesList = () => {\n handelWebsiteFormStateChanges(\n INITIAL_SELECTED_PAGE_LIST,\n 'selectedPageList'\n );\n };\n\n const getSelectedRowKeysFromUrls = (urls, data) => {\n return data?.filter(item => urls.includes(item.url)).map(item => item.key);\n };\n\n const getSelectedRowKeysFromCategories = (categories, data) => {\n return data\n ?.filter(item => categories.includes(item.name))\n .map(item => item.key);\n };\n\n const onClickCallback = async data => {\n const { action, index, type, status } = data;\n if (STATUS.FINISHED === status || STATUS.SKIPPED === status) {\n setRunTour(false);\n setStepIndex(0);\n if (!onboarding_flag.includes('TextIngest')) {\n await apiService.setOnboardingFlag(\n sentinel,\n token,\n graph,\n 'TextIngest'\n );\n dispatch({ type: SET_ONBOARDING_FLAG, payload: 'TextIngest' });\n }\n } else if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {\n const stepIndex = index + (action === ACTIONS.PREV ? -1 : 1);\n setStepIndex(stepIndex);\n }\n };\n\n useEffect(() => {\n const urlSelectedRowKeys = getSelectedRowKeysFromUrls(\n selectionState.urlSelected,\n webSocket?.scannedTableDataSource\n );\n const categorySelectedRowKeys = getSelectedRowKeysFromCategories(\n selectionState.categorySelected,\n webSocket?.categorizedTableDataSource\n );\n\n dispatch({\n type: SET_WEBSITE_SELECTED_PAGES,\n payload: {\n urlSelectedRowKeys,\n categorySelectedRowKeys,\n },\n });\n }, []);\n\n useEffect(() => {\n if (!webSocket?.sending && webSocket?.scan?.length > 0) {\n const scannedList = extractWebsiteScanList(webSocket.scan);\n const extractedUrls = categorizedWebsitePages(scannedList);\n const websiteSelectedPages = {\n urlSelectedRowKeys: scannedList?.map(row => {\n return row.key;\n }),\n urlSelected: scannedList?.map(row => {\n return row.url;\n }),\n categorySelected: extractedUrls?.map(row => {\n return row.name;\n }),\n categorySelectedRowKeys: extractedUrls?.map(row => {\n return row.key;\n }),\n };\n\n dispatch({\n type: UPDATE_WS_SCANNED_DATA_SOURCE,\n payload: { scannedList, websiteSelectedPages },\n });\n }\n }, [webSocket?.sending, webSocket?.scan]);\n\n const handleUploadFile = info => {\n setFileList([info]);\n const reader = new FileReader();\n reader.onload = e => {\n const answers = JSON.parse(e.target.result);\n const websiteList = websites?.map(site => site.text);\n const uploadedFileData = answers?.bot[0]?.website;\n const duplicateWebsite = uploadedFileData?.filter(website =>\n websiteList?.includes(website.name)\n );\n if (duplicateWebsite.length > 0) {\n setImportErrorMsg('Duplicate website found. Please review the file.');\n } else if (answersAllowed < uploadedFileData.length) {\n setImportWarnMsg(\n `Maximum number of answers reached. System will only upload ${answersAllowed} answer(s).`\n );\n } else {\n setImportErrorMsg(null);\n setImportWarnMsg(null);\n }\n\n if (answers?.bot[0]?.website) {\n setPasedAnswers(answers?.bot[0]?.website);\n } else {\n setImportErrorMsg(`No valid website found from the file.`);\n }\n };\n reader.readAsText(info);\n return false;\n };\n\n const handleRemoveFile = () => {\n setParsedFileAnswers([]);\n setImportErrorMsg(null);\n setImportWarnMsg(null);\n setParsedFileAnswers([]);\n setFileList([]);\n // setIsImportBtnDisabled(true);\n };\n\n const handleAddWebsiteJson = async () => {\n try {\n const triggerID = uuid();\n setModalBtnLoading(true);\n const res = await apiService.importer(\n sentinel,\n jid,\n token,\n { website: parsedAnswers },\n webSocket.channel,\n triggerID\n );\n\n if (res?.data?.is_queued) {\n dispatch({\n type: SET_WS_IMPORTER_ACTION,\n payload: triggerID,\n });\n }\n } catch (error) {\n if (axios.isCancel(error)) {\n setIsImportBtnDisabled(false);\n return message.error(error.message || 'Operation aborted by the user.');\n } else {\n setModalBtnLoading(false);\n setIsImportBtnDisabled(false);\n return message.error(\n error.message || `Something went wrong. Importing website failed.`\n );\n }\n }\n };\n\n useEffect(() => {\n if (webSocket?.fileAdded?.length > 0) {\n addFileSuccessMessage();\n setCurrentStep(0);\n setTimeoutInSecond(60);\n resetStates();\n dispatch({\n type: RESET_WS_ADD_FILE_ADDED,\n });\n handleCloseUploadModal(true, true);\n }\n }, [webSocket?.fileAdded]);\n\n useEffect(() => {\n setTimeout(() => {\n setRunTour(true);\n }, 3000);\n }, [onboarding_flag]);\n\n useEffect(() => {\n const fetchWebsiteList = async () => {\n const websiteResponse = await apiService.getFiles(\n sentinel,\n WITH_PREFIX_BOT_JID,\n token\n );\n\n dispatch({\n type: SET_WS_IMPORTER_PROCESS_COMPLETED,\n payload: websiteResponse?.data?.report[0]?.filter(\n website =>\n website.context.scraping_info &&\n website.context.scraping_info !== null\n ),\n });\n };\n\n if (webSocket.activeAction === 'completed') {\n fetchWebsiteList();\n handleCloseUploadModal(true, true);\n setModalBtnLoading(false);\n setIsImportBtnDisabled(false);\n message.success('Website Successfully Imported!');\n }\n }, [webSocket]);\n\n return {\n modalBtnLoading,\n handleCancelImport,\n handleAddFile,\n setVersion,\n version,\n currentStep,\n handleScrapedUrl,\n selectionState,\n handleBackward,\n webSocket,\n allUrlIsValid,\n handleCloseElementSelecting,\n handleSaveElement,\n selectedTemplateDetails,\n handleBackToPagesList,\n onClickCallback,\n runTour,\n stepIndex,\n handleStopScrapping,\n setModalBtnLoading,\n crawlerParams,\n setCrawlerParams,\n setWebsiteFormState,\n websiteFormState,\n handelWebsiteFormStateChanges,\n showImportTip,\n setShowImportTip,\n handleUploadFile,\n handleRemoveFile,\n importErrorMsg,\n importWarnMsg,\n handleAddWebsiteJson,\n parsedAnswers,\n fileList,\n };\n};\n\nexport default useImportWebsiteModal;\n","import { Alert } from 'antd';\nimport styled from 'styled-components';\n\nexport const StyledModalErrorAlert = styled(Alert)`\n margin: 20px 0;\n`;\n\nexport const ActionContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 16px 0;\n color: ${props => (props?.error ? `red` : `rgba(0, 0, 0, 0.85)`)};\n`;\n\nexport const StyledBtnAdvanceSettings = styled.button`\n display: flex;\n border: none;\n height: 38px;\n background: #ffff;\n color: #1667e7;\n border-radius: 1px;\n cursor: pointer;\n margin-top: 15px;\n float: right;\n line-height: 32px;\n\n &:hover {\n background: #1667e726;\n }\n`;\n\nexport const ActionButtons = styled.div`\n display: flex;\n gap: 8px;\n`;\n\nexport const ActiveActionLabel = styled.h3`\n color: #167be7 !important;\n`;\n","import PropTypes from 'prop-types';\nimport { StyledModalErrorAlert } from './ImportWebsiteModal.style';\n\nconst ImportAlertMessage = ({\n importErrorMsg,\n importWarnMsg,\n similarAnswerWarnMsg,\n finalAnswerWarnMsg,\n}) => {\n return (\n <>\n {importErrorMsg ? (\n \n All {urlCount} Page\n {urlCount > 1 ? 's' : ''} has been imported without any issues.\n
\n\n {displayStopButton ? (\n \n ) : (\n 0\n ? handleBackToPagesList\n : handleBackward\n }\n />\n )}\n {\n websiteFormState?.isTargetElementOpen === true\n ? handleSaveElement()\n : currentStep === 0\n ? selectedTemplateDetails?.crawlerParams === null\n ? handleAddFile()\n : handleScrapedUrl()\n : handleAddFile();\n }}\n disabled={\n currentStep === 0\n ? !allUrlIsValid || !websiteFormState?.selectedTemplate\n : selectionState?.urlSelected?.length === 0 ||\n webSocket?.sending === true\n }\n />\n
\n \n );\n\n return (\n <>\n \n
\n);\n\nconst CustomTooltip = ({\n index,\n step,\n backProps,\n primaryProps,\n tooltipProps,\n isLastStep,\n skipProps,\n}) => {\n return (\n Cannot load the page. Please refresh your browser.
\n{step.title}
}\n {step.content}
\n \n {index > 0 && (\n \n )}\n {isLastStep ? (\n \n ) : (\n \n )}\n
\n \n Background process for verifying answers is already running.
\n ),\n onOk() {\n notification.close(notificationKey);\n setShowUploadAnswerModal(true);\n },\n onCancel() {\n handleResetVerifyingAnswers();\n notification.close(notificationKey);\n },\n cancelText: 'Cancel',\n okText: 'Resume',\n });\n } else {\n setShowUploadAnswerModal(true);\n }\n },\n [handleResetVerifyingAnswers, isVerifyingAnswers, notificationKey]\n );\n\n const handleOpenFileModal = useCallback(\n type => {\n setFileType(type);\n if (isVerifyingAnswers) {\n confirm({\n content: (\nBackground process for verifying answers is already running.
\n ),\n onOk() {\n notification.close(notificationKey);\n setShowUploadFileModal(true);\n },\n onCancel() {\n handleResetVerifyingAnswers();\n notification.close(notificationKey);\n },\n cancelText: 'Cancel',\n okText: 'Resume',\n });\n } else {\n setShowUploadFileModal(true);\n }\n },\n [handleResetVerifyingAnswers, isVerifyingAnswers, notificationKey]\n );\n\n const handleCloseImportAnswerModal = () => {\n setFileType(null);\n setShowUploadAnswerModal(false);\n };\n\n const handleCloseImportFileModal = () => {\n setFileType(null);\n setShowUploadFileModal(false);\n };\n\n const getSortBtnTitle = useMemo(\n () => ANSWER_SORTING_LIST[answersOrder.key].label,\n [answersOrder]\n );\n\n const verifyAnswersProgress = useCallback(\n () => Math.round((verifiedAnswers.length / parsedFileAnswers.length) * 100),\n [parsedFileAnswers.length, verifiedAnswers.length]\n );\n\n const saveOnboardingFlag = async () => {\n if (!onboarding_flag.includes('ImportAnswerButton')) {\n await apiService.setOnboardingFlag(\n sentinel,\n token,\n graph,\n 'ImportAnswerButton'\n );\n dispatch({ type: SET_ONBOARDING_FLAG, payload: 'ImportAnswerButton' });\n }\n };\n\n const onClickCallback = async data => {\n const { action, index, type, status } = data;\n if (STATUS.FINISHED === status) {\n setRunTour(false);\n setStepIndex(0);\n handleOpenAnswerModal('ingest');\n saveOnboardingFlag();\n } else if (STATUS.SKIPPED === status) {\n setRunTour(false);\n setStepIndex(0);\n saveOnboardingFlag();\n } else if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {\n const stepIndex = index + (action === ACTIONS.PREV ? -1 : 1);\n if (stepIndex === 1) {\n setIsImportDropdownVisible(true);\n setRunTour(false);\n setTimeout(() => {\n setRunTour(true);\n setStepIndex(stepIndex);\n }, 250);\n }\n if (stepIndex === 2) {\n setIsImportDropdownVisible(false);\n setTimeout(() => {\n setStepIndex(stepIndex);\n }, 250);\n }\n\n setStepIndex(stepIndex);\n }\n };\n\n const AnswerBankButtons = () => {\n return (\n{'Session Details'}
\n {customerInfo ? (\n{getLocalTimeString(item.date)}
\n {'Interaction ID:'}
\n {item.interactionID}
\n \n ) : null}\n \n {!!logData?.visitorID ? logData?.visitorID : 'N/A'}\n
\n ),\n forMobileViewOnly: true,\n },\n {\n field: 'Date',\n value: () => {\n const localDate = UTCToLocal(new Date(logData?.date));\n return {getLocalTimeString(localDate)}
;\n },\n forMobileViewOnly: true,\n },\n {\n field: 'Channel',\n value: {logData?.channel || 'N/A'}
,\n forMobileViewOnly: true,\n },\n {\n field: 'Category',\n value: () => {\n const categoryName =\n logData?.category && typeof logData?.category === 'string'\n ? logData?.category\n : isAnObject(logData?.category) && logData?.category.name\n ? logData?.category?.name\n : 'N/A';\n return {categoryName}
;\n },\n forMobileViewOnly: true,\n },\n {\n field: 'Source',\n value: logData?.answer?.url || logData?.answer?.text,\n forMobileViewOnly: false,\n },\n {\n field: 'Display Answer',\n value: (\n {`Are you sure you want to mark this as ${\n validationDetails?.validation === 0 ? 'incorrect' : 'correct'\n }?`}
\n \n );\n};\n\nConfirmQuestionValidation.propTypes = {\n itemTobeDeleted: PropTypes.string,\n loading: PropTypes.bool,\n modalTitle: PropTypes.string,\n show: PropTypes.bool.isRequired,\n};\n\nexport default ConfirmQuestionValidation;\n","/* eslint-disable react/display-name */\nimport React, { useMemo, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Spin,\n Table,\n Dropdown,\n Menu,\n Row,\n Col,\n Pagination,\n Space,\n Drawer,\n Checkbox,\n Tag,\n Collapse,\n Grid,\n} from 'antd';\nimport { useReactToPrint } from 'react-to-print';\nimport {\n FolderAddOutlined,\n LockTwoTone,\n CaretDownOutlined,\n SmileOutlined,\n DownloadOutlined,\n CheckOutlined,\n CloseOutlined,\n CheckCircleFilled,\n CloseCircleFilled,\n ArrowsAltOutlined,\n FilterFilled,\n ArrowRightOutlined,\n} from '@ant-design/icons';\nimport { startCase } from 'lodash';\n\nimport Title from 'components/Title';\nimport AddQuestionToTestSuiteModal from 'components/Modals/AddQuestionToTestSuiteModal';\nimport CallbackModal from 'components/Modals/CallbackModal';\nimport FeedbackModal from 'components/Modals/FeedbackModal';\nimport DateFilter from 'components/DateFilter';\nimport { UTCToLocal, getLocalTimeString } from 'utils/dates';\nimport { stringLocaleCompare } from 'utils/stringManipulation';\nimport useAnalytics from './hooks';\nimport {\n CardsWrapper,\n ChartWrapper,\n StyledColumnChart,\n DataSummaryCard,\n StyledDatePickerButton,\n StyledGhostDropdown,\n StyledExpandedRow,\n StyledRoot,\n StyledMetric,\n StyledMetricPeriodFilter,\n StyledDateFilterLabel,\n StyledQuestionsList,\n StyledQuestion,\n StyledQuestions,\n StyledMore,\n StyledShowAnswer,\n StyledFiltersSelect,\n RowSpaceBetween,\n KeyMetricsSummaryCard,\n KeyMetricsCardsWrapper,\n StyledExpandedTableTitle,\n StyledFilterWrapper,\n StyledSequenceContainer,\n} from './Analytics.styles';\nimport LimitationBanner from 'components/LimitationBanner';\nimport { cssVariables } from 'styles/root';\nimport Button from 'components/Button';\nimport moment from 'moment';\nimport ToolTip from 'components/ToolTips/BaseToolTip';\nimport {\n CORRECT_QUESTIONS,\n INCORRECT_QUESTIONS,\n INTENTS,\n MOST_ASKED_QUESTION,\n PERFORMANCE_METRICS_DEFAULT_ANSWERS,\n PERFORMANCE_METRICS_INCORRECT_QUESTIONS,\n PERFORMANCE_METRICS_NEGATIVE_FEEDBACKS,\n QUESTION_LOGS,\n QUESTION_WITH_NEGATIVE_FEEDBACK,\n QUESTION_WITH_POSITIVE_FEEDBACK,\n TOOLTIPS,\n} from 'constants/analytics';\nimport ConfirmQuestionValidation from 'components/Modals/ConfirmQuestionValidation';\nimport { isAnObject } from 'utils/dataTypes';\nimport { AnswerRenderer } from 'components/AnswerRenderer';\nimport {\n StyledFlexColumn,\n StyledFlexRowLeft,\n} from 'styles/GenericStyledComponents';\n\nconst { Panel } = Collapse;\nconst { useBreakpoint } = Grid;\nconst EXPORT_TO_EXCEL =\n process.env.REACT_APP_EXPORT_TO_EXCEL === 'true' ? true : false;\n\nconst FILTER_SELECT_OPTIONS = [\n {\n label: 'Category',\n value: 'category',\n key: 'category',\n },\n {\n label: 'Integration',\n value: 'integration',\n key: 'integration',\n },\n];\n\nconst Analytics = ({ handleShowAddTestSuiteModal }) => {\n const {\n chartData,\n dateFilter,\n handleChangeDataFilterButton,\n handleChangeIntegrationSelection,\n handleChangeCategories,\n handleCloseAddTestSuiteModal,\n handleCloseInteractionFeedback,\n handleCloseSessionCallbacks,\n handleDateFilterChange,\n handleCSVDownloadQlogs,\n handleXLSXDownloadQlogs,\n handleOnSelect,\n handleShowSessionCallbacks,\n handleClickedQuality,\n handleChangePageNumber,\n integrationFilterOptions,\n isFreeUser,\n pageLoading,\n questionForTestSuite,\n selectedInteractionID,\n selectedTableView,\n selectedSessionID,\n sessionFilters,\n showAddQuestionToTestSuiteModal,\n showModal,\n tableSpinner,\n aggregations,\n params,\n showPagination,\n handleTableChange,\n sessionFilteredInfo,\n isPerformanceMetricsView,\n tableViewList,\n maximizeTableColumn,\n selectedLog,\n setMaximizeTableColumn,\n expandTable,\n showConfirmQuestionValidation,\n handleShowMarkQuestionModal,\n validationDetails,\n setShowConfirmQuestionValidation,\n handleValidateQuestion,\n modalIsLoading,\n sessionData,\n allQuestions,\n tableData,\n categoryFilter,\n graphSpinner,\n isPageReady,\n selectedCategories,\n showFilterDropdown,\n setShowFilterDropdown,\n filters,\n handleChangeFilters,\n setFilters,\n handlePanelChange,\n sequenceActivePannel,\n selectedPanelDetails,\n isMobileView,\n smallFont,\n } = useAnalytics();\n const componentRef = useRef();\n const screens = useBreakpoint();\n const handlePrint = useReactToPrint({\n content: () => componentRef.current,\n pageStyle: `margin: 20px`,\n });\n const { startDate, endDate } = dateFilter;\n const rangePickerStyle = {\n width: screens.xs ? '100%' : 'auto',\n padding: screens.xs ? '8px 12px' : 'auto',\n };\n\n const dropdownStyle = {\n width: screens.xs ? '100%' : 'auto',\n };\n\n const questionDropdownMenu = (question, id, validation) => (\n \n );\n\n const getTablePaginatedTotal = () => {\n if (\n [QUESTION_LOGS, PERFORMANCE_METRICS_DEFAULT_ANSWERS].includes(\n selectedTableView\n )\n ) {\n return allQuestions?.length;\n } else if (selectedTableView === MOST_ASKED_QUESTION) {\n return tableData?.mostAskedQuestions?.length;\n } else if (selectedTableView === QUESTION_WITH_POSITIVE_FEEDBACK) {\n return tableData?.positiveFeedbackQuestions?.length;\n } else if (\n [\n QUESTION_WITH_NEGATIVE_FEEDBACK,\n PERFORMANCE_METRICS_NEGATIVE_FEEDBACKS,\n ].includes(selectedTableView)\n ) {\n return tableData?.negativeFeedbackQuestions?.length;\n } else if (selectedTableView === INTENTS) {\n return tableData?.intents?.length;\n } else if (selectedTableView === CORRECT_QUESTIONS) {\n return tableData.correctQuestions?.length;\n } else if (selectedTableView === INCORRECT_QUESTIONS) {\n return tableData.incorrectQuestions?.length;\n }\n return 0;\n };\n\n const getCurrentTableViewTotalQuestions = () => {\n switch (selectedTableView) {\n case PERFORMANCE_METRICS_DEFAULT_ANSWERS:\n return aggregations.answerCountEachType?.defaultAnswerCount;\n case CORRECT_QUESTIONS:\n return aggregations.totalCorrectValidation;\n case INCORRECT_QUESTIONS:\n return aggregations.totalIncorrectValidation;\n case MOST_ASKED_QUESTION:\n return aggregations.tableData.mostAskedQuestionsData?.length || 0;\n case INTENTS:\n return aggregations.tableData.intentsData?.length || 0;\n case QUESTION_WITH_NEGATIVE_FEEDBACK:\n case PERFORMANCE_METRICS_NEGATIVE_FEEDBACKS:\n return aggregations.dislikes;\n case QUESTION_WITH_POSITIVE_FEEDBACK:\n return aggregations.likes;\n case QUESTION_LOGS:\n return aggregations.totalQuestions;\n default:\n return 0;\n }\n };\n\n const allQuestionsTableData = [\n {\n title: '',\n align: 'right',\n dataIndex: 'maximizeTable',\n width: '2%',\n render: (value, row) => (\n {!!visitorID ? visitorID : 'N/A'}
\n ),\n responsive: ['xxl', 'xl', 'lg'],\n },\n {\n title: 'Date',\n align: 'center',\n dataIndex: 'date',\n width: '20%',\n defaultSortOrder: 'ascend',\n sorter: {},\n render: date => {\n const localDate = UTCToLocal(new Date(date));\n return {getLocalTimeString(localDate)}
;\n },\n responsive: ['xxl', 'xl', 'lg'],\n },\n {\n title: 'Channel',\n align: 'center',\n dataIndex: 'channel',\n sorter: {},\n onFilter: (value, row) => {\n if (value === 'undefined') {\n return !row.channel;\n } else {\n const matchChannel = new RegExp(`^${value}$`);\n return row?.channel && row?.channel.match(matchChannel);\n }\n },\n render: channel => {channel || 'N/A'}
,\n responsive: ['xxl', 'xl', 'lg'],\n },\n {\n title: 'Category',\n align: 'center',\n dataIndex: 'category',\n render: category => {\n const categoryName =\n category && typeof category === 'string'\n ? category\n : isAnObject(category) && category.name\n ? category?.name\n : 'N/A';\n return {categoryName}
;\n },\n responsive: ['xxl', 'xl', 'lg'],\n },\n ];\n\n const allQuestionsExpandedTableData = [\n {\n title: 'Fields',\n align: 'center',\n dataIndex: 'field',\n sorter: {\n compare: (a, b) => stringLocaleCompare(a.field, b.field),\n },\n },\n {\n title: 'Value',\n dataIndex: 'value',\n align: 'center',\n width: '80%',\n },\n ];\n\n const mostAskedQuestionsTableData = [\n {\n title: 'Count',\n align: 'center',\n dataIndex: 'count',\n width: '12%',\n sorter: (a, b) => b.count - a.count,\n },\n {\n title: `Question (${getTablePaginatedTotal()})`,\n dataIndex: 'question',\n sorter: {\n compare: (a, b) => stringLocaleCompare(a.question, b.question),\n },\n },\n ];\n\n const intentsTableData = [\n {\n title: 'Count',\n align: 'center',\n dataIndex: 'count',\n width: '12%',\n sorter: (a, b) => b.count - a.count,\n },\n {\n title: `Intents (${getTablePaginatedTotal()})`,\n dataIndex: 'intents',\n sorter: {\n compare: (a, b) => stringLocaleCompare(a.intents, b.intents),\n },\n },\n ];\n\n const filteredColumns = allQuestionsTableData.filter(col => {\n if (!col.responsive) {\n return true;\n }\n return col.responsive.some(bp => screens[bp]);\n });\n\n const expandable = {\n // eslint-disable-next-line react/display-name\n expandedRowRender: data => (\n {`# of sessions`}
\n {aggregations?.sessionCount || 0}
\n \n{`# of visitors`}
\n {aggregations?.visitorCount || 0}
\n \n{`# of questions asked`}
\n {aggregations?.totalQuestions || 0}
\n \n{'Audit Results'}
\n \n \n \n \n \n
\n handleClickedQuality(1)}>\n {aggregations?.totalCorrectValidation || 0}\n
\nhandleClickedQuality(0)}>\n {aggregations?.totalIncorrectValidation || 0}\n
\n\n \n handleClickedQuality(1)}\n />\n \n \n handleClickedQuality(0)}\n />\n \n
\n {`# of fallback answers called`}
\n \n {aggregations?.answerCountEachType\n ?.defaultAnswerCount || 0}\n
\n{`${\n aggregations?.containmentRate || '0%'\n } Containment Rate`}
\n {`CSAT Score`}
\n \n
\n {aggregations?.csatScore}
\n \n {`# of default answer`}
\n \n {aggregations?.answerCountEachType\n ?.defaultAnswerCount || 0}\n
\n \n \n{`# of incorrect audit result`}
\n {aggregations?.totalIncorrectValidation || 0}
\n \n \n{`# of negative feedback`}
\n {aggregations?.dislikes || 0}
\n \n \n \n{`Total questions asked for ${moment(startDate).format(\n 'MMMM D, YYYY'\n )} - ${moment(endDate).format('MMMM D, YYYY')}`}
\n\n \n {question}\n \n \n handleEditTestCase(selectedTestCase)}\n >\n Edit Test\n \n Test Result \n\n \n \n \n \n {testResult}\n \n \n \n \n {`Last Test Run: ${\n lastTestTime ? getTimeDifference(lastTestTime) : 'N/A'\n }`}\n \n \n \n
\n \n }\n onOk={onOkModal}\n onCancel={onOkModal}\n okText=\"Done\"\n spinning={modalLoading}\n confirmLoading={modalLoading}\n isFormModal\n >\n {isTestPassed ? (\n \n \n \n \n \n \n {testSuite?.lastTestStatus?.success} Passed{' | '}\n {testSuite?.lastTestStatus?.fail} Failed\n {/* COMMENTED FOR FUTURE USE OF OUTDATED AND UNTESTED */}\n {/* {!DISABLE_UNTESTED_AND_OUTDATED &&\n !!testSuite?.lastTestStatus?.outdated &&\n ' | ' + testSuite.lastTestStatus?.outdated + ' Edited'}\n {!DISABLE_UNTESTED_AND_OUTDATED &&\n !!testSuite?.lastTestStatus?.unknown &&\n ' | ' + testSuite.lastTestStatus?.unknown + ' Untested'} */}\n \n
\n )}\n \n \n
\n ),\n target: '.new-suite-btn',\n disableBeacon: true,\n placement: 'auto',\n },\n];\n\nexport const FIRST_SUITE = [\n {\n content: (\n \n Use this feature to run an automated test of your answers. Just simply\n add your question/s here then run the test to check if your Bot’s\n response are correct based on the threshold.\n
\nImprove your Bot’s performance by running this test regularly.
\n\n
\n ),\n target: '.add-question-btn',\n disableBeacon: true,\n placement: 'auto',\n },\n];\n\nexport const RESPONSE_PICKER_STEPS = [\n {\n content: (\n Click to add questions that you want to test.
\n\n
\n ),\n target: '.firstAnswer',\n disableBeacon: true,\n placement: 'bottom',\n },\n {\n content: (\n Choose your expected answer by clicking the tick mark.
\n\n Note: The Best Answer is placed on the top and has the highest score.\n
\n\n
\n ),\n target: '.validation-response__button',\n disableBeacon: true,\n placement: 'bottom',\n },\n];\n","import { MoreOutlined } from '@ant-design/icons';\nimport styled from 'styled-components';\n\nexport const StyledMoreMenu = styled(MoreOutlined)`\n transform: rotate(-90deg);\n top: 16px;\n right: 16px;\n padding: 5px;\n\n &:hover {\n background: ${props => props.theme.gray2};\n border-radius: 50%;\n }\n\n}`;\n","import React from 'react';\nimport { StyledMoreMenu } from './MoreMenu.styles';\n\nconst MoreMenu = props => {\n const { ...rest } = props;\n return {`Click OK to save the test case.`}
\n{'Selected Answer'}
\n \n \n {'Select Expected Answer'}\n \n \n {responses.map(response => {\n return (\n !!response && (\n handleSelect(response)}\n key={response.jid}\n />\n )\n );\n })}\n
\n \n {testSuites?.map((testSuite, idx) => (\n
\n );\n };\n\n const renderEditSuiteModal = () => (\n {testStatus.success}
\n Tests Passed
\n {testStatus.fail}
\n Failed Tests
\n {testStatus.outdated}
\n Edited Tests
\n {testStatus.unknown}
\n Untested
\n \n \n {hasError ? (\n <>\n {time} \n
\n );\n};\n\nV1CustomComponent.propTypes = {\n message: PropTypes.string,\n time: PropTypes.string,\n hasError: PropTypes.bool,\n};\n\nexport default V1CustomComponent;\n","import React, { useState, useContext, useEffect, useCallback } from 'react';\nimport {\n addResponseMessage,\n dropMessages,\n isWidgetOpened,\n renderCustomComponent,\n toggleWidget,\n} from 'react-chat-widget';\nimport { message } from 'antd';\nimport { BlobServiceClient } from '@azure/storage-blob';\n\nimport { apiService } from 'services/api.service';\nimport { Context } from 'store/store';\nimport { getBase64 } from 'utils';\nimport { StyledTempImage } from './BotCustomizer.styles';\nimport {\n RESET_INTEGRATION_SETTINGS,\n SET_BOT_CUSTOMIZER_ACTIVE_PANEL,\n SET_CURRENT_INTEGRATION_DATA,\n SET_DEMO_BACKGROUND,\n SET_DEMO_BACKGROUND_TO_CLOUD_PATH,\n SET_HEADER_AVATAR_TO_CLOUD_PATH,\n SET_INTEGRATION_ACTIVE_PANEL,\n SET_LAUNCHER_AVATAR_TO_CLOUD_PATH,\n SPAWN_CREATE,\n} from 'store/action';\nimport { DEFAULT_ERROR_MESSAGE } from 'constants/error';\nimport { INTEGRATION_DATA } from 'constants/localStorage';\nimport {\n AVATAR_ICON_OPTIONS,\n LAUNCHER_ONLY_AVATAR,\n} from 'constants/botCustomizer';\nimport { allAnswersSelector } from 'selectors/bot/answers';\nimport useSelector from 'store/useSelector';\nimport {\n isBotMailConfigEnabledSelector,\n isBotOpenAIEnabledSelector,\n} from 'selectors/bot';\nimport {\n avatarPositionSelector,\n botTitleSelector,\n currentIntegrationIDSelector,\n integrationDataSelector,\n currentIntegrationSettingsSettingPropSelector,\n customizerActivePanelSelector,\n demoCustomBackgroundSelector,\n demoIntegrationBackgroundSelector,\n encryptedBotSelector,\n initialIntegrationSettingsSelector,\n integrationConfigURLSelector,\n integrationFolderPathSelector,\n isPostCustomizationEditModalEditableSelector,\n isDemoCustomBgSelectedSelector,\n isDemoHasCustomBackgroundSelector,\n isDemoIntegrationSelector,\n isIntegrationDataNotLoadedSelector,\n isMobileIntegrationSelector,\n widgetHeightSelector,\n widgetHeightWithPixelSelector,\n widgetIconColorSelector,\n widgetThemeColorSelector,\n isPostCustomizationEditModalOpenSelector,\n} from 'selectors/bot/integration';\nimport {\n defaultReplyBubbleColorSelector,\n isHeaderAvatarSvgIconSelector,\n isHeaderAvatarCantApplySelector,\n isUseWidgetIconRadioDisabledSelector,\n launcherAvatarSelector,\n launcherAvatarTypeSelector,\n welcomeMessageSelector,\n widgetHeaderAvatarSelector,\n widgetHeaderAvatarTypeSelector,\n integrationConfigDataSelector,\n demoHTMLSelector,\n} from 'selectors/bot/integration/settings';\nimport { generateIcon, injectToDOM } from './iconUtils';\nimport { isAvatarPickerModalOpenSelector } from 'selectors/bot/ui';\nimport { useQuery } from 'pages/useQuery';\nimport V1CustomComponent from './V1CustomComponent';\nimport { hexToRGBA } from './utils';\nimport { BlobStorageService } from 'services/azureBlobStorage.service';\n\nconst DEMO_CONTAINER_NAME = '$web';\nconst SAS_TOKEN = process.env.REACT_APP_AZURE_SAS_TOKEN;\nconst AZURE_STORAGE_URI = process.env.REACT_APP_AZURE_STORAGE_URI;\nconst AZURE_DEMO_URI = process.env.REACT_APP_AZURE_DEMO_URI;\nconst LAST_PANEL_AND_PERMIT_KEY = 3;\n\nconst useBotCustomizer = ({ onSave, onUpdate }) => {\n const query = useQuery();\n const [state, dispatch] = useContext(Context);\n const platform = query.get('platform');\n\n const allAnswers = useSelector(allAnswersSelector);\n const isBotOpenAIEnabled = useSelector(isBotOpenAIEnabledSelector);\n const isBotMailConfigEnabled = useSelector(isBotMailConfigEnabledSelector);\n const currentIntegrationID = useSelector(currentIntegrationIDSelector);\n const headerAvatarType = useSelector(widgetHeaderAvatarTypeSelector);\n const isHeaderIconTypeAvatar = useSelector(isHeaderAvatarSvgIconSelector);\n const headerAvatar = useSelector(widgetHeaderAvatarSelector);\n const iconColor = useSelector(widgetIconColorSelector);\n const launcherAvatar = useSelector(launcherAvatarSelector);\n const launcherAvatarType = useSelector(launcherAvatarTypeSelector);\n const isAvatarPickerModalOpen = useSelector(isAvatarPickerModalOpenSelector);\n const widgetThemeColor = useSelector(widgetThemeColorSelector);\n const avatarPosition = useSelector(avatarPositionSelector);\n const isPostCustomizationEditModalOpen = useSelector(\n isPostCustomizationEditModalOpenSelector\n );\n const widgetHeight = useSelector(widgetHeightSelector);\n const widgetHeightWithPixel = useSelector(widgetHeightWithPixelSelector);\n const customizerActivePanel = useSelector(customizerActivePanelSelector);\n const isMobileIntegration = useSelector(isMobileIntegrationSelector);\n const demoCustomBackground = useSelector(demoCustomBackgroundSelector);\n const encryptedBot = useSelector(encryptedBotSelector);\n const folderPath = useSelector(integrationFolderPathSelector);\n const isCustomBgSelected = useSelector(isDemoCustomBgSelectedSelector);\n const isHeaderAvatarNotAllowed = useSelector(isHeaderAvatarCantApplySelector);\n const integrationConfigURL = useSelector(integrationConfigURLSelector);\n const defaultReplyBubbleColor = useSelector(defaultReplyBubbleColorSelector);\n const welcomeMessage = useSelector(welcomeMessageSelector);\n const botTitle = useSelector(botTitleSelector);\n const isUseWidgetIconRadioDisabled = useSelector(\n isUseWidgetIconRadioDisabledSelector\n );\n const isDemo =\n useSelector(isDemoIntegrationSelector) || platform?.includes('demo');\n const isDemoHasCustomBackground = useSelector(\n isDemoHasCustomBackgroundSelector\n );\n const demoBackground = useSelector(demoIntegrationBackgroundSelector);\n const currentIntegrationSettingsObject = useSelector(\n currentIntegrationSettingsSettingPropSelector\n );\n const isPostCustomizationEditable = useSelector(\n isPostCustomizationEditModalEditableSelector\n );\n const currentIntegrationSettings = useSelector(integrationDataSelector);\n const initialIntegrationSettings = useSelector(\n initialIntegrationSettingsSelector\n );\n const isIntegrationDataNotLoaded = useSelector(\n isIntegrationDataNotLoadedSelector\n );\n const integrationConfigData = useSelector(integrationConfigDataSelector);\n const demoHTML = useSelector(demoHTMLSelector);\n\n const {\n sentinel,\n publicKey,\n token,\n bot: { jid, name },\n } = state;\n const [showUserBg, setShowUserBg] = useState(false);\n const blobServiceClient = new BlobServiceClient(\n `${AZURE_STORAGE_URI}?${SAS_TOKEN}`\n );\n const containerClient =\n blobServiceClient.getContainerClient(DEMO_CONTAINER_NAME);\n\n const blobHTMLName = folderPath + '/index.html';\n\n const [loading, setLoading] = useState(false);\n\n const localIntegration = JSON.parse(localStorage.getItem(INTEGRATION_DATA));\n const [showColorPicker, setShowColorPicker] = useState(false);\n const [showColorPickerBubble, setShowColorPickerBubble] = useState(false);\n const [showColorPickerIcon, setShowColorPickerIcon] = useState(false);\n\n // `setIntegrationData` => to change integrationData on component state level\n const [integrationData, setIntegrationData] = useState(\n localIntegration || currentIntegrationSettings\n );\n // Not sure where we need this specific state\n const [onLoadIntegrationData, setOnloadIntegrationData] = useState(\n localIntegration || currentIntegrationSettings\n );\n\n const chatWidget = document.getElementsByClassName('chatBot');\n const [setEnableEdit] = useState(false);\n const [bgImage, setBgImage] = useState(null);\n const [widgetImage, setWidgetImage] = useState(null);\n const [headerImage, setHeaderImage] = useState(null);\n const [uploadedBgImage, setUploadedBgImage] = useState(true);\n const [uploadedWidgetImage, setUploadedWidgetImage] = useState(false);\n const [uploadedHeaderImage, setUploadedHeaderImage] = useState(false);\n const [demoLink, setDemoLink] = useState(null);\n const [tempFormFields, setTempFormFields] = useState(\n integrationData?.settings?.formFields\n );\n\n // To be removed ;)\n\n const [viewWidgetImage, setViewWidgetImage] = useState({\n isVisible: false,\n previewImage: '',\n previewTitle: '',\n });\n\n const [viewHeaderImage, setViewHeaderImage] = useState({\n isVisible: false,\n previewImage: '',\n previewTitle: '',\n });\n\n const applyheight = useCallback(\n chatWidgetEl => {\n const chatWidgetActive = chatWidgetEl.querySelector(\n '.rcw-messages-container'\n );\n if (chatWidgetEl && !!chatWidgetActive) {\n chatWidgetEl.querySelector('.rcw-messages-container').style.height =\n widgetHeightWithPixel;\n chatWidgetEl.querySelector('.rcw-messages-container').style.maxHeight =\n widgetHeightWithPixel;\n }\n return false;\n },\n [widgetHeightWithPixel]\n );\n\n const applyMessageColor = useCallback(\n (elem, color, textColor, fontSize) => {\n let chatWidgetEl = elem;\n if (chatWidgetEl) {\n const messages = [...chatWidgetEl.querySelectorAll('.rcw-message')];\n if (messages) {\n messages.map(elem => {\n if (elem.querySelector('.rcw-message-text')) {\n elem.querySelector('.rcw-message-text').style.backgroundColor =\n color;\n elem.querySelector('.rcw-message-text').style.color = textColor;\n elem.querySelector('.rcw-message-text').style.fontSize = fontSize;\n }\n return null;\n });\n }\n if (chatWidgetEl.querySelector('.rcw-header')) {\n chatWidgetEl.querySelector('.rcw-header h4').style.color = textColor;\n chatWidgetEl.querySelector('.rcw-header').style.color = textColor;\n }\n }\n },\n [currentIntegrationSettings.settings.textColor]\n );\n\n const leftAlignHeader = (chatWidgetEl, headerTitle) => {\n const header = chatWidgetEl.querySelector('.rcw-header');\n if (header) {\n header.style.textAlign = 'left';\n }\n headerTitle.style.padding = '3px';\n };\n\n const applyAndAlignHeaderAvatar = (chatWidgetEl, headerTitle) => {\n if (headerTitle) {\n const header = chatWidgetEl.querySelector('.rcw-header');\n if (header) {\n header.style.display = 'revert';\n }\n if (headerAvatarType === 'custom') {\n setHeaderImg(headerTitle);\n } else if (headerAvatarType === 'icon') {\n setHeaderIcon(headerTitle);\n }\n // Align-to-left ChatHeader contents if avatar is applied\n leftAlignHeader(chatWidgetEl, headerTitle);\n }\n };\n\n const setHeaderImg = useCallback(\n headerTitle => {\n const createdDiv = document.createElement('div');\n const createdImg = document.createElement('img');\n createdImg.classList.add('headerLogo');\n createdImg.style.marginRight = '2%';\n createdImg.style.float = 'left';\n createdImg.style.height = '70px';\n createdImg.style.width = 'auto';\n if (headerAvatar.preview) {\n createdImg.setAttribute('src', headerAvatar.preview);\n } else {\n // expecting it to be a cloudpath\n createdImg.setAttribute('src', headerAvatar);\n }\n createdDiv.appendChild(createdImg);\n createdDiv.setAttribute('id', 'headerLogo');\n headerTitle.parentNode.insertBefore(createdDiv, headerTitle);\n },\n [headerAvatar, headerAvatarType, launcherAvatar, launcherAvatarType]\n );\n\n const setHeaderIcon = useCallback(\n headerTitle => {\n switch (headerAvatar) {\n case 'icon1':\n injectToDOM.icon1(iconColor, headerTitle);\n break;\n case 'icon2':\n injectToDOM.icon2(iconColor, headerTitle);\n break;\n case 'icon3':\n injectToDOM.icon3(iconColor, headerTitle);\n break;\n case 'icon4':\n injectToDOM.icon4(iconColor, headerTitle);\n break;\n default:\n injectToDOM.defaultIcon(iconColor, headerTitle);\n break;\n }\n },\n [headerAvatar, launcherAvatar, launcherAvatarType, headerAvatarType]\n );\n\n const removeHeaderIcon = useCallback((chatWidgetEl, logoParentEl) => {\n logoParentEl?.parentNode?.removeChild(logoParentEl);\n const header = chatWidgetEl.querySelector('.rcw-header');\n if (header) {\n chatWidgetEl.querySelector('.rcw-header').style.textAlign = 'center';\n chatWidgetEl.querySelector('.rcw-header').style.padding = '15px';\n }\n }, []);\n\n const applyHeaderLogo = useCallback(\n chatWidgetEl => {\n if (chatWidgetEl) {\n const headerLogoElement = document.getElementById('headerLogo');\n const headerTitle = chatWidgetEl.querySelector(\n '.rcw-header .rcw-title'\n );\n\n // checks if current avatar is ALLOWED to be displayed\n if (\n (isUseWidgetIconRadioDisabled &&\n LAUNCHER_ONLY_AVATAR.includes(headerAvatar)) ||\n (headerAvatarType === 'custom' &&\n (!headerAvatar || AVATAR_ICON_OPTIONS.includes(headerAvatar)))\n ) {\n return removeHeaderIcon(chatWidgetEl, headerLogoElement);\n }\n // checks if avatar is EMPTY\n else if (\n !headerAvatar ||\n (headerAvatarType === 'icon' && isHeaderAvatarNotAllowed)\n ) {\n return removeHeaderIcon(chatWidgetEl, headerLogoElement);\n }\n // NON-EMPTY avatar goes here\n else {\n if (headerAvatarType === 'custom' || headerAvatarType === 'icon') {\n if (!headerLogoElement) {\n applyAndAlignHeaderAvatar(chatWidgetEl, headerTitle);\n } else {\n headerLogoElement.parentNode.removeChild(headerLogoElement);\n applyAndAlignHeaderAvatar(chatWidgetEl, headerTitle);\n }\n } else {\n return removeHeaderIcon(chatWidgetEl, headerLogoElement);\n }\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n headerAvatar,\n isHeaderIconTypeAvatar,\n setHeaderIcon,\n setHeaderImg,\n // include launcherAvatar as dependecy\n // cuz we'll inject current launcher icon value\n // if launcherAvatar and avatar both use widget icons\n launcherAvatar,\n headerAvatarType,\n isUseWidgetIconRadioDisabled,\n removeHeaderIcon,\n botTitle,\n ]\n );\n\n const applyWelcomeMessage = useCallback(\n elem => {\n let chatWidgetEl = elem;\n if (chatWidgetEl && currentIntegrationSettings.settings) {\n const chatWidgetActive = chatWidgetEl.querySelector(\n '.rcw-messages-container'\n );\n if (chatWidgetEl && !!chatWidgetActive) {\n setTimeout(() => {\n dropMessages();\n renderCustomComponent(V1CustomComponent, {\n message: welcomeMessage,\n time: new Date().toLocaleTimeString(navigator.language, {\n hour: '2-digit',\n minute: '2-digit',\n }),\n });\n applyReplyColor(chatWidget[0]);\n }, 500);\n }\n }\n },\n [currentIntegrationSettingsObject]\n );\n\n const applyReplyColor = useCallback(\n elem => {\n const { color, replyBubbleGradient, fontSize } =\n currentIntegrationSettingsObject;\n let chatWidgetEl = elem;\n if (chatWidgetEl) {\n const replies = [\n ...chatWidgetEl.getElementsByClassName('parsedAnswer'),\n ];\n if (replies) {\n const bgColor = hexToRGBA(color, replyBubbleGradient);\n replies.map(elem => (elem.style.backgroundColor = bgColor));\n replies.map(elem => (elem.style.fontSize = fontSize));\n }\n }\n },\n [currentIntegrationSettingsObject, defaultReplyBubbleColor]\n );\n\n const applyThemeColor = useCallback(\n (elem, color) => {\n let chatWidgetEl = elem;\n if (chatWidgetEl) {\n if (\n chatWidgetEl.getElementsByClassName('.rcw-conversation-container') &&\n chatWidgetEl.querySelector('.rcw-header')\n ) {\n chatWidgetEl.querySelector('.rcw-header').style.backgroundColor =\n color;\n }\n if (chatWidgetEl.getElementsByClassName('chatBotWidgetLauncher')[0]) {\n chatWidgetEl.getElementsByClassName(\n 'chatBotWidgetLauncher'\n )[0].style.backgroundColor = color + 260;\n }\n if (chatWidgetEl.querySelector('.rcw-sender')) {\n chatWidgetEl.querySelector('.rcw-sender').style.backgroundColor =\n color + 260;\n chatWidgetEl.querySelector('.rcw-new-message').style.backgroundColor =\n color + 260;\n chatWidgetEl.querySelector('.rcw-send').style.backgroundColor =\n color + 260;\n }\n }\n },\n [currentIntegrationSettings?.settings?.color]\n );\n\n const applyTime = useCallback(\n (elem, today) => {\n let chatWidgetEl = elem;\n if (chatWidgetEl) {\n const messagesCount = chatWidgetEl.querySelectorAll(\n '.rcw-messages-container .rcw-message'\n );\n if (messagesCount) {\n const timeStampElem = messagesCount[\n messagesCount.length - 1\n ].querySelector('.rcw-client .rcw-timestamp');\n if (timeStampElem) {\n timeStampElem.innerHTML = today;\n }\n }\n }\n },\n [integrationData]\n );\n\n const handleChangeWidgetImage = async ({ file }) => {\n setUploadedWidgetImage(true);\n if (file.status === 'removed') {\n setWidgetImage(null);\n handleChangeFields('widgetIconUrl', null);\n setViewWidgetImage({ ...viewWidgetImage, isVisible: false });\n } else {\n setWidgetImage([file]);\n if (!file.url && !file.preview) {\n file.preview = await getBase64(file);\n }\n setViewWidgetImage({\n isVisible: true,\n previewImage: file.url || file.preview,\n previewTitle:\n file.name || file.url.substring(file.url.lastIndexOf('/') + 1),\n });\n handleChangeFields(\n 'widgetIconUrl',\n AZURE_DEMO_URI +\n `${folderPath}/widget${file.name.substr(file.name.indexOf('.'))}`\n );\n }\n };\n\n const handleChangeFields = (name, value) => {\n const key = { [name]: value };\n const { settings } = integrationData;\n setUploadedBgImage(true);\n if (\n name === 'shape' &&\n value !== 'rectangle' &&\n settings?.position?.includes('mid')\n ) {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, position: 'bottom-right', shape: value },\n });\n } else if (name === 'shape' && value === 'rectangle') {\n setIntegrationData({\n ...integrationData,\n settings: {\n ...settings,\n label: settings?.label || `Ask ${settings.botTitle || 'Me'}`,\n shape: value,\n },\n });\n } else if (\n name === 'avatar' &&\n (value === 'default' || value === 'icon1')\n ) {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, avatar: value, avatarPosition: null },\n });\n } else if (name === 'undo') {\n handleUndoFields(value, settings);\n } else if (name === 'undoIcon') {\n if (onLoadIntegrationData.settings.botAvatar === 'icon') {\n handleUndoIcon(settings);\n } else {\n setWidgetImage(null);\n handleUndoWidget(settings);\n }\n } else if (name === 'undoHeaderIcon') {\n setHeaderImage(null);\n handleUndoHeader(settings);\n } else if (name === 'removedHeader') {\n setHeaderImage(null);\n delete integrationData.settings.headerResponseImgUrl;\n } else if (name === 'clear') {\n clearIntegrationData();\n } else if (name === 'background' && value !== 'light' && value !== 'dark') {\n setUploadedBgImage(false);\n if (!bgImage) {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, background: demoBackground || 'custom' },\n });\n } else {\n setBgImage(bgImage);\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, ...key },\n });\n }\n } else if (name === 'fontSize') {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, fontSize: value + 'px' },\n });\n } else if (name === 'color') {\n setIntegrationData({\n ...integrationData,\n settings: {\n ...settings,\n ...key,\n bubbleColor: value,\n },\n });\n } else if (\n (name === 'widgetIconUrl' && value === null) ||\n (name === 'botAvatar' && value === 'icon')\n ) {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, ...key },\n });\n delete integrationData.settings.widgetIconUrl;\n } else if (name === 'authenticatedUser') {\n if (value === true) {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, ...key, displayFormFields: false },\n });\n } else {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, ...key, displayFormFields: true },\n });\n }\n } else if (name === 'displayFormFields' && value === false) {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, ...key, callbackEmail: false },\n });\n\n delete integrationData.settings.formFields;\n } else {\n setIntegrationData({\n ...integrationData,\n settings: { ...settings, ...key },\n });\n }\n };\n\n const clearIntegrationData = () => {\n if (showColorPicker) {\n setShowColorPicker(!showColorPicker);\n }\n if (showColorPickerBubble) {\n setShowColorPickerBubble(!showColorPickerBubble);\n }\n if (showColorPickerIcon) {\n setShowColorPickerIcon(!showColorPickerIcon);\n }\n setIntegrationData(initialIntegrationSettings);\n setBgImage(null);\n setWidgetImage(null);\n setHeaderImage(null);\n };\n\n const handleChangeDemoBackground = val => {\n dispatch({ type: SET_DEMO_BACKGROUND, payload: val });\n };\n\n useEffect(() => {\n setIntegrationData(currentIntegrationSettings);\n }, [currentIntegrationSettings]);\n\n const handleUndoIcon = settings => {\n setIntegrationData({\n ...integrationData,\n settings: {\n ...settings,\n botAvatar: onLoadIntegrationData.settings.botAvatar,\n headerAvatar: onLoadIntegrationData.settings.headerAvatar,\n responseAvatar: onLoadIntegrationData.settings.responseAvatar,\n iconColor: onLoadIntegrationData.settings.iconColor,\n },\n });\n };\n\n const handleUndoHeader = settings => {\n setUploadedHeaderImage(false);\n setViewHeaderImage({\n isVisible: false,\n previewImage: '',\n previewTitle: '',\n });\n setIntegrationData({\n ...integrationData,\n settings: {\n ...settings,\n headerResponseImgUrl:\n onLoadIntegrationData.settings.headerResponseImgUrl,\n },\n });\n };\n\n const handleUndoWidget = settings => {\n setUploadedWidgetImage(false);\n setUploadedHeaderImage(false);\n setViewWidgetImage({\n isVisible: false,\n previewImage: '',\n previewTitle: '',\n });\n setIntegrationData({\n ...integrationData,\n settings: {\n ...settings,\n widgetIconUrl: onLoadIntegrationData.settings.widgetIconUrl,\n botAvatar: onLoadIntegrationData.settings.botAvatar,\n },\n });\n };\n\n const handleUndoFields = (value, settings) => {\n if (value === 'botPanelConfig') {\n setIntegrationData({\n ...integrationData,\n settings: {\n ...settings,\n botTitle: onLoadIntegrationData.settings.botTitle,\n subtitle: onLoadIntegrationData.settings.subtitle,\n placeholder: onLoadIntegrationData.settings.placeholder,\n welcomeMessage,\n },\n });\n } else if (value === 'botAppearance') {\n setWidgetImage(null);\n setHeaderImage(null);\n setIntegrationData({\n ...integrationData,\n settings: {\n ...settings,\n ...onLoadIntegrationData.settings,\n },\n });\n } else if (value === 'botPlacement') {\n setBgImage(null);\n setIntegrationData({\n ...integrationData,\n settings: {\n ...settings,\n background: onLoadIntegrationData.settings.background,\n shape: onLoadIntegrationData.settings.shape,\n src: onLoadIntegrationData.settings.src,\n position: onLoadIntegrationData.settings.position,\n label: onLoadIntegrationData.settings.label,\n },\n });\n }\n };\n\n const handleNewUserMessage = async (\n newMessage,\n channel,\n theme,\n textColor,\n fontSize\n ) => {\n const chatWidget = document.getElementsByClassName('chatBot');\n const today = new Date().toLocaleTimeString(navigator.language, {\n hour: '2-digit',\n minute: '2-digit',\n });\n try {\n const res = await apiService.askQuestion(\n sentinel,\n jid,\n newMessage,\n token,\n channel\n );\n if (chatWidget && chatWidget[0]) {\n await applyTime(chatWidget[0], today);\n applyMessageColor(chatWidget[0], theme, textColor, fontSize);\n const answerMessage = res.data.report[0].context;\n if (\n answerMessage &&\n answerMessage.show_text &&\n answerMessage.show_html\n ) {\n const answerList = answerMessage.show_html || answerMessage.show_text;\n const displayAnswer = Array.isArray(answerList)\n ? answerList\n : [answerList];\n displayAnswer?.map(answer =>\n renderCustomComponent(V1CustomComponent, {\n message: answer,\n time: today,\n })\n );\n } else if (answerMessage && answerMessage.text) {\n addResponseMessage(answerMessage.text);\n } else {\n renderCustomComponent(V1CustomComponent, {\n message: `Error encountered, try reloading the page or contact the Admin.`,\n time: today,\n hasError: true,\n });\n }\n await applyReplyColor(chatWidget[0]);\n }\n } catch (err) {\n throw typeof err === 'string' ? err : err.message;\n }\n };\n\n const spawnCreate = async () => {\n const apiName = 'zsb_public_api';\n try {\n const res = await apiService.spawnCreate(apiName, token);\n const pkRes = await apiService.getPublicKey(token);\n const pK = pkRes.data.anyone;\n const pAQ = res.data.jid;\n dispatch({\n type: SPAWN_CREATE,\n payload: {\n publicKey: pK,\n pubAskedQuestion: pAQ,\n },\n });\n\n return [pK, pAQ];\n } catch (error) {\n throw new Error('Something went wrong while creating the integration');\n }\n };\n\n const handleSubmitCustomizeBot = async evt => {\n if (evt) {\n evt.preventDefault();\n }\n setLoading(true);\n setShowColorPicker(false);\n setShowColorPickerBubble(false);\n setShowColorPickerIcon(false);\n\n if (!publicKey) {\n try {\n await spawnCreate();\n setLoading(false);\n } catch (error) {\n setLoading(false);\n return message.error(error.message || DEFAULT_ERROR_MESSAGE);\n }\n }\n\n try {\n if (launcherAvatarType === 'custom' && launcherAvatar instanceof File) {\n await BlobStorageService.uploadIntegrationCustomAvatar(\n folderPath,\n launcherAvatar,\n 'launcherAvatar'\n );\n dispatch({\n type: SET_LAUNCHER_AVATAR_TO_CLOUD_PATH,\n });\n }\n if (headerAvatarType === 'custom' && headerAvatar instanceof File) {\n await BlobStorageService.uploadIntegrationCustomAvatar(\n folderPath,\n headerAvatar,\n 'headerAvatar'\n );\n dispatch({\n type: SET_HEADER_AVATAR_TO_CLOUD_PATH,\n });\n }\n\n if (isDemo) {\n await BlobStorageService.uploadDemoHTMLAndImageFiles(\n folderPath,\n integrationConfigData,\n isDemo,\n integrationConfigURL,\n demoHTML,\n isDemoHasCustomBackground,\n demoCustomBackground\n );\n\n if (isDemoHasCustomBackground) {\n dispatch({\n type: SET_DEMO_BACKGROUND_TO_CLOUD_PATH,\n });\n }\n }\n\n if (isDemo) {\n setDemoLink(`${AZURE_DEMO_URI}${folderPath}`);\n }\n } catch (error) {\n message.error(error.message || DEFAULT_ERROR_MESSAGE);\n }\n\n if (!isDemo) {\n await handleSendToWebIntegration();\n }\n\n // ???\n // renderPreviewImgBackground(currentIntegrationSettings.settings.background);\n\n dispatch({\n type: SET_INTEGRATION_ACTIVE_PANEL,\n payload: {\n panel: LAST_PANEL_AND_PERMIT_KEY,\n permit: LAST_PANEL_AND_PERMIT_KEY,\n },\n });\n setIntegrationData(currentIntegrationSettings);\n setOnloadIntegrationData(currentIntegrationSettings);\n setLoading(false);\n };\n\n const handleSendToWebIntegration = async () => {\n try {\n const res = !currentIntegrationID ? await onSave() : await onUpdate();\n\n if (!currentIntegrationID) {\n message.success(`Integration channel added`);\n } else {\n message.success(`Successfully updated integration channel`);\n }\n\n dispatch({\n type: SET_CURRENT_INTEGRATION_DATA,\n payload: res,\n });\n } catch (error) {\n setLoading(false);\n return message.error(\n error || `An error encountred while adding the integration channel.`\n );\n }\n };\n\n const getButtonValue = () => {\n if (currentIntegrationID) {\n return 'Update';\n } else if (loading) {\n return 'Processing';\n } else if (isDemo && demoLink) {\n return 'Update Demo URL';\n } else if (isDemo) {\n return 'Get Demo URL';\n }\n return 'Save';\n };\n\n useEffect(() => {\n const imgContainer = document.getElementsByClassName(\n 'ant-upload-list-picture-card-container'\n );\n\n if (!bgImage && imgContainer && imgContainer[0]) {\n imgContainer[0].classList.add('hidden');\n }\n }, [bgImage]);\n\n useEffect(() => {\n // on component load/update\n async function getExistingDemo() {\n setLoading(true);\n try {\n const demoHTMLFile = containerClient.getBlobClient(blobHTMLName);\n const demoConfigfile = `${AZURE_DEMO_URI}${folderPath}/config.json`;\n const isDemoExists = await demoHTMLFile.exists();\n if (isDemoExists) {\n setDemoLink(`${AZURE_DEMO_URI}${folderPath}`);\n }\n const demoConfigJSON = containerClient.getBlobClient(\n `${folderPath}/config.json`\n );\n const isConfigExists = await demoConfigJSON.exists();\n\n // Addtional check so previous users w/o config file but has demo wont break\n if (isConfigExists) {\n const configFile = await fetch(demoConfigfile);\n const configData = await configFile.json();\n // TODO: create separate reducer for demos\n dispatch({\n type: SET_CURRENT_INTEGRATION_DATA,\n payload: { settings: configData, type: 'demo' },\n });\n } else {\n dispatch({\n type: SET_CURRENT_INTEGRATION_DATA,\n payload: { type: 'demo' },\n });\n }\n setLoading(false);\n } catch (error) {\n if (error.message) {\n message.error(error.message);\n }\n setLoading(false);\n }\n }\n if (isDemo && isIntegrationDataNotLoaded) {\n getExistingDemo();\n }\n }, []);\n\n useEffect(() => {\n if (chatWidget && chatWidget[0] && integrationData.settings) {\n applyheight(chatWidget[0]);\n applyThemeColor(chatWidget[0], integrationData.settings.color);\n applyMessageColor(\n chatWidget[0],\n integrationData.settings.bubbleColor || integrationData.settings.color,\n integrationData.settings.textColor,\n integrationData.settings.fontSize\n );\n applyReplyColor(chatWidget[0]);\n applyHeaderLogo(chatWidget[0]);\n applyWelcomeMessage(chatWidget[0]);\n }\n }, [\n applyMessageColor,\n applyReplyColor,\n applyThemeColor,\n applyheight,\n applyHeaderLogo,\n applyWelcomeMessage,\n chatWidget,\n integrationData,\n headerAvatar,\n headerAvatarType,\n avatarPosition,\n launcherAvatar,\n widgetHeight,\n ]);\n\n useEffect(() => {\n if (currentIntegrationID) {\n setIntegrationData(currentIntegrationSettings);\n }\n }, [currentIntegrationSettings]);\n\n useEffect(() => {\n dropMessages();\n if (!isWidgetOpened()) {\n toggleWidget();\n }\n }, [integrationData, sentinel]);\n\n useEffect(() => {\n return () => {\n if (isDemo) {\n dispatch({\n type: RESET_INTEGRATION_SETTINGS,\n });\n localStorage.removeItem(INTEGRATION_DATA);\n }\n };\n }, []);\n\n const renderPreviewImgBackground = () => {\n return (\n \n Upload \n
\n );\n};\n\nexport default UploadButton;\n","import styled from 'styled-components';\nimport { Radio, Avatar } from 'antd';\nimport { cssVariables } from 'styles/root';\n\nexport const StyledAvatarModalRadio = styled(Radio)`\n padding-top: 30px;\n\n & span:last-child {\n & div {\n & .default {\n & label {\n & span {\n padding: 6px;\n }\n }\n }\n }\n }\n`;\n\nexport const StyledAvatarSelect = styled.input`\n margin-top: 25px;\n display: none;\n\n &:checked + label {\n font-weight: ${cssVariables.font.bold};\n background: ${cssVariables.primaryBlue};\n padding: 25px 15px;\n border-radius: 10%;\n }\n`;\n\nexport const StyledAvatarSelectLabel = styled.label`\n cursor: pointer;\n padding: 25px 15px;\n\n &:hover {\n background: ${cssVariables.blue1};\n padding: 25px 15px;\n border-radius: 10%;\n }\n`;\n\nexport const StyledAvatar = styled(Avatar)`\n background-color: ${props => props.integrationDataColor};\n`;\n\nexport const StyledChromePickerPosition = styled.div`\n position: relative;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n`;\n\nexport const StyledTempIconImage = styled.div`\n height: 100px;\n border: 1px solid ${cssVariables.gray2};\n margin-bottom: 8px;\n width: fit-content;\n\n & img {\n height: 100%;\n width: auto;\n padding: 5px;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const StyledImageUploaderWrapper = styled.div`\n display: flex;\n align-items: center;\n column-gap: 5px;\n`;\n","import React, { useContext, useState } from 'react';\nimport { ChromePicker } from 'react-color';\nimport { Radio, Space, Tooltip, Upload, Popover } from 'antd';\n\nimport Input from 'components/Input';\nimport Modal from 'components/Modals/GenericModal';\nimport UploadButton from '../UploadButton/UploadButton';\nimport {\n StyledAvatarModalRadio,\n StyledAvatarSelect,\n StyledAvatarSelectLabel,\n StyledChromePickerPosition,\n StyledTempIconImage,\n StyledImageUploaderWrapper,\n StyledAvatar,\n} from './LauncherIconPickerModal.style';\nimport { Context } from 'store/store';\nimport {\n CLOSE_WIDGET_AVATAR_PICKER_MODAL,\n OPEN_IMAGE_VIEWER_MODAL,\n SET_WIDGET_AVATAR_COLOR,\n SET_WIDGET_LAUNCHER_ICON,\n SET_WIDGET_LAUNCHER_AVATAR_TYPE,\n SET_WIDGET_THEME_COLOR,\n} from 'store/action';\nimport useSelector from 'store/useSelector';\nimport {\n isSearchWidgetSelector,\n widgetIconColorSelector,\n widgetThemeColorSelector,\n} from 'selectors/bot/integration';\nimport { getBase64 } from 'utils';\nimport DefaultIcon from '../svg/DefaultIcon';\nimport Icon1 from '../svg/Icon1';\nimport Icon2 from '../svg/Icon2';\nimport Icon3 from '../svg/Icon3';\nimport Icon4 from '../svg/Icon4';\nimport {\n launcherAvatarCloudPathSelector,\n launcherAvatarSelector,\n launcherAvatarTypeSelector,\n showLauncherImagePreviewSelector,\n} from 'selectors/bot/integration/settings';\n\nconst LauncherIconPickerModal = () => {\n const [, dispatch] = useContext(Context);\n\n const themeColor = useSelector(widgetThemeColorSelector);\n const iconColor = useSelector(widgetIconColorSelector);\n const launcherAvatar = useSelector(launcherAvatarSelector);\n const launcherAvatarType = useSelector(launcherAvatarTypeSelector);\n const isSearchWidget = useSelector(isSearchWidgetSelector);\n const showLauncherImagePreview = useSelector(\n showLauncherImagePreviewSelector\n );\n const launcherAvatarInCloud = useSelector(launcherAvatarCloudPathSelector);\n\n const [showIconColorPicker, setShowIconColorPicker] = useState(false);\n\n const avatarColor = isSearchWidget ? themeColor : iconColor;\n const avatarBackgroundColor = isSearchWidget ? '#fff' : themeColor;\n\n const handleChangeAvatar = evt => {\n dispatch({ type: SET_WIDGET_LAUNCHER_ICON, payload: evt.target.value });\n };\n\n const handleChangeAvatarImg = async ({ file, fileList }) => {\n if (!file.url && !file.preview) {\n file.preview = await getBase64(fileList[0]?.originFileObj);\n }\n\n dispatch({\n type: SET_WIDGET_LAUNCHER_ICON,\n payload: file,\n });\n };\n\n const handleChangeAvatarColor = color => {\n if (isSearchWidget) {\n dispatch({ type: SET_WIDGET_THEME_COLOR, payload: color.hex });\n } else {\n dispatch({ type: SET_WIDGET_AVATAR_COLOR, payload: color.hex });\n }\n };\n\n const handleChangeAvatarType = evt => {\n dispatch({\n type: SET_WIDGET_LAUNCHER_AVATAR_TYPE,\n payload: evt.target.value,\n });\n };\n\n const handleCloseModal = () => {\n dispatch({ type: CLOSE_WIDGET_AVATAR_PICKER_MODAL });\n };\n\n const handleShowImagePreview = () => {\n dispatch({\n type: OPEN_IMAGE_VIEWER_MODAL,\n payload: { source: launcherAvatar, title: 'Launcher Avatar Preview' },\n });\n };\n\n return (\n \n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n setShowIconColorPicker(false)}\n >\n
\n ) : null}\n \n
\n
\n
\n
{'Personalise you search widget'}
\n \n {isAvatarPickerModalOpen ?\n {'Allow Authenticated User'}\n
\n \n \n \n {'Header Image'}\n \n\n handleChangeAvatarType('header', e.target.value)}\n >\n \n {'None'} \n \n \n \n {'Use Widget Icons'}\n \n \n \n {'Custom'} \n \n
\n \n\n
\n
\n\n \n 
\n \n \n \n file.type === 'image/png' || file.type === 'image/jpg'\n }\n listType=\"picture-card\"\n onPreview={handlePreviewAvatar}\n onChange={handleChangeHeaderImage}\n onRemove={handleRemoveImage}\n accept=\".png, .jpg, .jpeg\"\n maxCount={1}\n >\n \n \n\n \n {'Avatar Next To Response'}\n \n\n handleChangeAvatarType('response', e.target.value)}\n >\n \n {'None'} \n \n \n {'Use Widget Icon'}\n \n \n
\n \n \n \n {'Gradient'} \n \n \n
\n \n
\n\n \n
\n );\n};\n\nAdvanceSettings.propTypes = {\n showAdvanceSettings: PropTypes.bool,\n};\n\nexport default AdvanceSettings;\n","import React from 'react';\nimport { Popover } from 'antd';\n\nimport { StyledFlexLeftColumn } from 'styles/GenericStyledComponents';\nimport Input from 'components/Input';\nimport {\n StyledAvatar,\n StyledBotProfileBlock,\n StyledBtnAdvanceSettings,\n StyledBtnEditBotProfile,\n StyledErrorBottomText,\n StyledLabel,\n StyledSelect,\n} from '../../CustomizeBot.style';\nimport ColorPicker from '../../ColorPicker';\nimport { generateIcon } from '../../../iconUtils';\nimport {\n MAX_WIDGET_HEIGHT,\n MIN_WIDGET_HEIGHT,\n TEXT_COLOR_LIST,\n} from '../../constants';\nimport AdvanceSettings from './AdvanceSettings';\nimport PanelActionButtons from '../../PanelActionButtons';\nimport { useAppearancePanel } from './hooks';\n\nconst NEXT_PANEL_KEY = 'bot-customizer-panel-3';\n\nconst AppearancePanel = () => {\n const {\n handleEditAvatar,\n handleChangeTheme,\n handleChangeHeight,\n handleSelectFontColor,\n setHeight,\n setShowColorPicker,\n setShowAdvanceSettings,\n showColorPicker,\n showAdvanceSettings,\n iconColor,\n color,\n height,\n textColor,\n botName,\n isAppearancePanelSettingsUnchanged,\n launcherAvatar,\n tempHeight,\n handlePanelChange,\n } = useAppearancePanel();\n\n return (\n \n
\n
\n \n Current demo page background\n \n \n \n 
\n \n \n
\n );\n };\n\n return (\n \n setTempLabel(e.target.value)}\n placeholder={`Enter bot label`}\n onBlur={handleBlurLabelInput}\n maxLength={25}\n />\n {!label ? (\n Label is Required. \n ) : label.length === 25 ? (\n \n Label must have at least 1 character but not more than 25\n characters.\n \n ) : null}\n
\n ) : null}\n\n \n {'Form Fields'} \n
\n {tempFormFields.map((form, idx) => (\n \n {'Display Feedback Form'}\n
\n \n {'Allow Callback Email'}\n
\n \n {shouldShowWidget ? (\n
\n \n {headTagCode}\n \n \n {zsbComponent}\n \n {'Installation'}
\n\n {npmInstallScript}\n \n \n {yarnInstallScript}\n \n {'Usage'}
\n\n {usageExample}\n \n \n
{'Documentation'}
\n\n \n \n {'1'} \n {'Channel information'}\n \n }\n >\n \n \n \n \n \n \n {'2'} \n {'Personalise your bot'}\n \n {activePanel === 2 ? \n {'3'} \n {'Save and Integrate'}\n \n }\n >\n \n \n {`You are done. Copy the code into your file. Analytics and\n reports for this integration can be viewed in integrated\n channels.`}\n \n
\n
\n {!isEmpty(fullIntegrationData.settings) ? (\n integrationMethod === 'html' ? (\n \n \n \n
\n \n
\n {!isEmpty(fullIntegrationData.settings) ? (\n integrationMethod === 'html' ? (\n
\n
\n \n Making a change in the channel information can result into a change in\n the code. Are you sure you want to edit the channel information?\n
\n \n );\n\n const getButtonValue = useMemo(() => {\n if (!!currentIntegrationID) {\n return 'Update';\n } else if (loading) {\n return 'Processing';\n }\n return 'Save';\n }, [currentIntegrationID, loading]);\n\n return (\n\n handlePanelChange(e)}\n >\n \n 1 \n Channel information\n \n }\n >\n \n \n \n \n \n 2 \n Personalise your bot\n \n }\n >\n {!!currentIntegrationSettings &&\n !!currentIntegrationSettings.settings ? (\n \n 3 \n Save and Integrate\n \n }\n >\n \n \n You are done. Copy the code into your flutter application.\n Analytics and reports for this integration can be viewed in\n integrated channels.\n \n \n \n Copy and paste it in page where you want to include the\n button that will redirect on webview.\n \n \n \n \n \n \n \n \n {`Copy and paste this webview code in your dat file. This\n also automatically open the widget.`}\n \n \n \n \n \n \n \n \n \n )}\n \n {ConfirmEditModal}\n \n \n
\n \n {currentIntegrationSettings?.code2}\n \n \n {currentIntegrationSettings?.code1}\n \n \n \n \n \n Facebook Messenger \n Viber \n \n \n {applicationSelected === 'Viber' && (\n <>\n handleChangeApplicationKey(e.target.value)}\n />\n \n \n \n )}\n\n {!!botComponent && webHookURL && (\n <>\n \n \n Copy and paste this webhook url.\n \n \n \n \n \n \n \n \n \n )}\n \n
\n \n {webHookURL}\n \n \n {`Making a change in the channel information can result into a change in\n the code. Are you sure you want to edit the channel information?`}\n
\n \n );\n\n const getButtonValue = useMemo(() => {\n if (!!currentIntegrationID) {\n return 'Update';\n } else if (loading) {\n return 'Processing';\n }\n return 'Save';\n }, [currentIntegrationID, loading]);\n\n return (\n\n handlePanelChange(e)}\n >\n \n 1 \n Channel information\n \n }\n >\n \n \n \n \n \n \n \n 2 \n {'Save and Integrate'}\n \n }\n >\n \n \n {`You're almost there, next step is to verify your Callback URL.`}\n \n {!!integrationData.code1 && (\n <>\n \n \n {'Copy and paste this webhook URL.'}\n \n \n \n \n {`Copy and paste this Access Token to the \"Verify Token\" field, then click the \"Verify and save\" button.`}\n \n \n \n \n \n )}\n \n {ConfirmEditModal}\n \n \n
\n {'Before you start 💡'}
\n- \n
- {`On your Facebook Apps page(https://developers.facebook.com/apps). Choose the page where you'd want to add the bot and then click.`} \n
- {`Navigate to \"Messenger\" from the sidebar then click \"Settings\".`} \n
- {`Your current URL should be https://developers.facebook.com/apps/{page-or-app-id}/messenger/settings/`} \n
- {`Find the \"Access Tokens\" section and generate your token.`} \n
- {`Enter a name for your integration on the Channel Name input field below.`} \n
- {`Then copy and paste the generated \"Access Token\" from the Step 2 panel, to the \"Verify Token\" field of the \"Edit Callback URL\" modal of the Facebook Developers.`} \n
- \n
- \n {\n 'Navigate to the \"Webhooks\" section (just below the Access Tokens section)'\n }\n \n
- {'Click \"Edit callback URL'} \n
\n \n Channel information\n \n \n \n \n \n \n
\n {'Before you start 💡'}
\n- \n
- {`Create a Viber account on a platform which supports bots (iOS/Android). This account will automatically be set as the account administrator during the account creation process.`} \n
- {`Go to this link https://partners.viber.com/. Note: an active Viber account is needed to receive the login code to access the bot creation page.`} \n
- {`On the left navigation click Create Bot Account.`} \n
- {`Fill up the form.`} \n
- {`Click Create button.`} \n
- {`Once your account is created your authentication token will appear in the account’s “edit info” screen (for admins only).`} \n
- {`Copy the token.`} \n
- {`Paste token in the Access Token field below.`} \n
\n handlePanelChange(e)}\n >\n \n {'1'} \n {'Channel information'}\n \n }\n >\n \n \n \n \n \n {'2'} \n {'Personalise your bot'}\n \n }\n >\n {!!currentIntegrationSettings &&\n !!currentIntegrationSettings.settings ? (\n \n {'3'} \n {'Save and Integrate'}\n \n }\n >\n \n \n {`You are done. Copy the code into your file. Analytics and\n reports for this integration can be viewed in integrated\n channels.`}\n \n
\n {!!currentIntegrationSettings?.settings && (\n\n \n \n \n Zeroshotbot Plugin for WordPress\n \n \n \n \n
\n \n \n Upload Zeroshotbot plugin directory to WordPress plugins\n directory (/wp-content/plugins/).\n \n \n Activate the Zeroshotbot plugin through the Plugins menu\n in WordPress.\n \n \n Click the Zeroshotbot plugin Settings under Zeroshotbot\n Menu.\n \n \n Copy and paste Bot ID below into the Bot ID field and\n click Save Changes.\n \n \n \n \n {' '}\n \n {' '}\n \n
\n \n \n \n \n \n )}\n \n \n \n
\n \n {!!currentIntegrationSettings?.settings && (\n
{'Bot ID'}
\n \n\n \n {\n currentIntegrationSettings?.code1?.wordpress\n ?.botComponent\n }\n \n \n \n {apiGatewayConfig?.url}\n \n \n {header}\n \n \n \n {`{ `}\n {generatePayload(true, botIdPayload)}\n {generatePayload(true, questionPayload)}\n {generatePayload(\n false,\n interactionIdPayload,\n 'getDummyComment',\n 'interaction_id'\n )}\n {generatePayload(\n false,\n sessionIdPayload,\n 'getDummyComment',\n 'session_id'\n )}\n {generatePayload(\n false,\n visitorIdPayload,\n 'getDummyComment',\n 'visitor_id'\n )}\n {generatePayload(false, authenticatedPayload, 'authenticated')}\n {generatePayload(false, asyncPayload, 'async')}\n {`}`}\n \n \n \n {`Making a change in the channel information can result into a change in\n the code. Are you sure you want to edit the channel information?`}\n
\n \n );\n};\n\nexport default PostCustomizationConfirmEditModal;\n","import React, { useCallback, useContext, useMemo } from 'react';\nimport { Modal } from 'antd';\nimport { ExclamationCircleOutlined } from '@ant-design/icons';\nimport { Context } from 'store/store';\nimport {\n CLOSE_PRE_CUSTOMIZATION_EDIT_WIDGET_MODAL,\n SET_INTEGRATION_ACTIVE_PANEL,\n} from 'store/action';\nimport useSelector from 'store/useSelector';\nimport {\n currentIntegrationActivePanelSelector,\n integrationPanelPermitSelector,\n isPreCustomizationEditModalOpenSelector,\n} from 'selectors/bot/integration';\n\nconst { confirm } = Modal;\n\nconst PreCustomizationConfirmEditModal = () => {\n const [, dispatch] = useContext(Context);\n const permit = useSelector(integrationPanelPermitSelector);\n const activePanel = useSelector(currentIntegrationActivePanelSelector);\n const isPreCustomizationEditModalOpen = useSelector(\n isPreCustomizationEditModalOpenSelector\n );\n\n const renderConfirmModal = useCallback(() => {\n confirm({\n title: 'Bot Personalization',\n icon:{`Recommended to be set between 0.06 - 0.12.`}
\nNo questions linked to the answer
\n )}\n \n );\n};\n\nLinkedQuestionModal.propTypes = {\n showLinkedQuestionModal: PropTypes.bool,\n linkedAnswerToEdit: PropTypes.object,\n handleCloseLinkedQuestionModal: PropTypes.func,\n};\n\nexport default LinkedQuestionModal;\n","import styled from 'styled-components';\nimport Modal from 'components/Modals/GenericModal';\nimport { cssVariables } from 'styles/root';\n\nexport const StyledQuestionModalTitle = styled.h4`\n font-family: ${cssVariables.font.fontFamily};\n font-weight: ${cssVariables.font.normal};\n font-size: 18px;\n color: #000;\n margin-top: 8px;\n`;\n\nexport const StyledResponsePicker = styled(Modal)`\n width: 816px !important;\n padding: 0;\n\n & .ant-modal-body {\n max-height: 600;\n overflow-y: auto;\n }\n\n @media (max-width: 1000px) {\n width: 60vw !important;\n }\n`;\n\nexport const StyledModalSection = styled.div`\n margin-bottom: 30px;\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: ${cssVariables.font.bold};\n color: ${cssVariables.gray0};\n }\n`;\n\nexport const StyledCurrentQuestion = styled.div`\n height: 40px;\n border-radius: 5px;\n border: 1px solid #e8f0fd;\n display: flex;\n padding-left: 10px;\n align-items: center;\n`;\n\nexport const StyledCurrentAnswer = styled.div`\n background-color: ${cssVariables.gray3};\n & div:first-child {\n background: none;\n }\n & > *:hover {\n border: 1px solid ${cssVariables.gray3};\n }\n`;\n\nexport const StyledLinkHint = styled.div`\n padding: 5px 0px;\n font-size: 11px;\n margin-bottom: 10px;\n`;\n","import { useState, useContext, useEffect } from 'react';\n\nimport {\n ADD_QUESTION,\n CLOSE_RESPONSE_PICKER_MODAL,\n PUSH_ANSWER_AS_RESPONSE_PICKER_BEST_ANSWER,\n REMOVE_HARD_LINK_FROM_RESPONSE_PICKER,\n UPDATE_CHAT_LIST_ITEM,\n UPDATE_QUESTION_AND_ANSWER,\n UPDATE_RESPONSE_PICKER_ANSWERS,\n UPDATE_RESPONSE_PICKER_SIMILAR_QUESTIONS,\n} from 'store/action';\nimport { Context } from 'store/store';\nimport { message } from 'antd';\n\nimport { apiService } from 'services/api.service';\nimport { DEFAULT_ERROR_MESSAGE } from 'constants/error';\nimport { responsePickerModalSelector } from 'selectors/bot/ui';\nimport useSelector from 'store/useSelector';\n\nconst useResponsePickerModal = () => {\n const [state, dispatch] = useContext(Context);\n const {\n sentinel,\n token,\n bot: { jid },\n } = state;\n const responsePickerModal = useSelector(responsePickerModalSelector);\n\n const {\n isOpen,\n answers,\n isHardLinked,\n botName,\n title,\n itemToChange,\n modalStatus,\n questionIdLinked,\n similarQuestions,\n editableQuestion,\n } = responsePickerModal;\n const { question, answer } = itemToChange;\n const [searchKey, setSearchKey] = useState(null);\n const [filteredAnswers, setFilteredAnswers] = useState([]);\n const [showDisplayAnswer, setShowDisplayAnswer] = useState(isOpen);\n const [loading, setLoading] = useState(false);\n const [showQuestionsSkeleton, setshowQuestionsSkeleton] = useState(false);\n const [newQuestion, setNewQuestion] = useState(question?.text);\n\n const [currentAnswer, ...alternateAnswser] = answers;\n\n const chatQuestion =\n question && typeof question === 'object' ? question.text : question;\n const isCurrentAnswerHasLink = isHardLinked;\n\n const onChangeSearchKey = e => {\n e.preventDefault();\n setSearchKey(e.target.value);\n };\n\n useEffect(() => {\n setNewQuestion(question?.text);\n }, [question?.text]);\n\n const handleCloseResponsePickerModal = () => {\n setNewQuestion(null);\n setFilteredAnswers([]);\n setSearchKey(null);\n setshowQuestionsSkeleton(false);\n dispatch({\n type: CLOSE_RESPONSE_PICKER_MODAL,\n });\n };\n\n const handleChangeQuestion = evt => {\n setNewQuestion(evt.target.value);\n };\n\n const handleSelectQuestion = async (answerId, type) => {\n return pushAnswerAsResponsePickerAnswer(answerId);\n };\n\n const pushAnswerAsResponsePickerAnswer = answerId => {\n dispatch({\n type: PUSH_ANSWER_AS_RESPONSE_PICKER_BEST_ANSWER,\n payload: {\n answerId,\n answers,\n isHardLinked: false,\n questionText: newQuestion || question,\n },\n });\n };\n\n const updateResponsePickerAnswers = async () => {\n try {\n const res = await apiService.getQuestionMatchesWithAnswer(\n question,\n null,\n sentinel,\n jid,\n token\n );\n\n if (!res.data?.report[0]) {\n return message.error(DEFAULT_ERROR_MESSAGE);\n }\n\n setLoading(false);\n return dispatch({\n type: UPDATE_RESPONSE_PICKER_ANSWERS,\n payload: {\n answers: res.data.report[0],\n isHardLinked: false,\n answerId: res.data.report[0][0]?.answer?.jid || null,\n questionIdLinked: null,\n },\n });\n } catch (error) {\n message.error(error.message || DEFAULT_ERROR_MESSAGE);\n }\n };\n\n const hardLinkQuestionToAnswer = async skipSimilarityCheck => {\n try {\n if (!skipSimilarityCheck) {\n setshowQuestionsSkeleton(true);\n const res = await apiService.getSimilarQuestions(\n newQuestion || question?.text,\n sentinel,\n jid,\n token\n );\n if (!res.data.success) {\n throw new Error(DEFAULT_ERROR_MESSAGE);\n }\n dispatch({\n type: UPDATE_RESPONSE_PICKER_SIMILAR_QUESTIONS,\n payload: {\n similarQuestions: res.data.report[0],\n questionText: newQuestion || question?.text,\n currentQuestion:\n responsePickerModal.action === 'edit' ? question?.jid : null,\n },\n });\n return setshowQuestionsSkeleton(false);\n } else {\n setLoading(true);\n if (\n responsePickerModal.action === 'add' ||\n !responsePickerModal.isHardLinked\n ) {\n const res = await apiService.hardLinkQuestion(\n newQuestion || question.text,\n answers[0].jid,\n jid,\n sentinel,\n token,\n true\n );\n\n if (!res.data.success) {\n throw new Error(DEFAULT_ERROR_MESSAGE);\n }\n\n await dispatch({\n type: ADD_QUESTION,\n payload: res.data.report[0],\n });\n message.success('Successfully linked the question to the answer');\n handleCloseResponsePickerModal();\n } else if (responsePickerModal.action === 'edit') {\n const res = await apiService.editQuestion(\n newQuestion || question.text,\n answers[0].jid,\n question.jid,\n question.version || 'draft',\n sentinel,\n token,\n true\n );\n\n if (!res.data.success) {\n throw new Error(DEFAULT_ERROR_MESSAGE);\n }\n\n await dispatch({\n type: UPDATE_QUESTION_AND_ANSWER,\n payload: res.data.report[0],\n });\n message.success('Successfully linked the question to the answer');\n handleCloseResponsePickerModal();\n }\n }\n } catch (error) {\n message.error(error.message || DEFAULT_ERROR_MESSAGE);\n }\n setLoading(false);\n };\n\n const handleUnlinkQuestion = async () => {\n setLoading(true);\n try {\n await apiService.deleteQuestionHardLink(question.jid, sentinel, token);\n setLoading(false);\n dispatch({\n type: REMOVE_HARD_LINK_FROM_RESPONSE_PICKER,\n payload: question.jid,\n });\n return message.success(\n 'Successfully unlinked the question to the answer'\n );\n } catch (error) {\n setLoading(false);\n return message.error(error.message || DEFAULT_ERROR_MESSAGE);\n }\n };\n\n const updateChatList = (answer, msgIndex) => {\n dispatch({\n type: UPDATE_CHAT_LIST_ITEM,\n payload: {\n answer,\n msgIndex,\n chatItemToChangeAnswerJID: itemToChange.answer.jid,\n },\n });\n };\n\n return {\n alternateAnswser,\n answers,\n botName,\n chatQuestion,\n hardLinkQuestionToAnswer,\n currentAnswer,\n editableQuestion,\n filteredAnswers,\n handleChangeQuestion,\n handleCloseResponsePickerModal,\n handleSelectQuestion,\n handleUnlinkQuestion,\n modalStatus,\n isOpen,\n isCurrentAnswerHasLink,\n itemToChange,\n loading,\n newQuestion,\n onChangeSearchKey,\n question,\n responsePickerModal,\n showDisplayAnswer,\n searchKey,\n similarQuestions,\n setShowDisplayAnswer,\n setFilteredAnswers,\n showQuestionsSkeleton,\n title,\n };\n};\n\nexport default useResponsePickerModal;\n","import styled from 'styled-components';\nimport { cssVariables } from 'styles/root';\nimport { MoreOutlined } from '@ant-design/icons';\n\nexport const StyledSimilarAnswerModalTitle = styled.h4`\n font-family: Roboto;\n font-weight: ${cssVariables.font.normal};\n font-size: 18px;\n color: #000;\n margin-top: 8px;\n`;\n\nexport const StyledAnswersItem = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: ${cssVariables.gray4};\n padding: 10px;\n border-radius: 5px;\n margin: 5px 0;\n`;\n\nexport const StyledAnswers = styled.div`\n font-family: Helvetica;\n font-size: 15px;\n color: ${cssVariables.primaryGray};\n width: 75%;\n`;\n\nexport const StyledAskedQuestionTimeAndAction = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n`;\n\nexport const StyledAskedQuestionTime = styled.div`\n font-family: Helvetica;\n font-size: 14px;\n color: #26292d;\n`;\n\nexport const StyledMoreOutlined = styled(MoreOutlined)`\n transform: rotate(-90deg);\n padding: 10px;\n margin-left: 10px;\n color: #98a5ac;\n\n &:hover {\n background: ${cssVariables.gray4};\n border-radius: 50%;\n }\n`;\n\nexport const StyledSimilarAnswersLabel = styled.div`\n font-size: 15px;\n color: #33363c;\n margin-right: 6px;\n margin-top: 20px;\n font-weight: ${cssVariables.font.bold};\n`;\n","import React, { useEffect, useMemo } from 'react';\nimport { ApiFilled, SearchOutlined } from '@ant-design/icons';\nimport FlipMove from 'react-flip-move';\nimport { Skeleton, Tag } from 'antd';\n\nimport Input from 'components/Input';\nimport AnswerWithScore from 'components/AnswerWithScore';\nimport {\n StyledQuestionModalTitle,\n StyledResponsePicker,\n StyledModalSection,\n StyledLinkHint,\n StyledCurrentQuestion,\n} from './ResponsePickerModal.styles';\nimport ToggleShowDisplayAnswer from 'components/Button/ToggleShowDisplayAnswer';\nimport {\n StyledFlexRowCenter,\n StyledSpaceBetweenFlexCenter,\n StyledWarningBox,\n UnpaddedList,\n} from 'styles/GenericStyledComponents';\nimport useResponsePickerModal from './hooks';\nimport TextArea from 'components/TextArea';\nimport ToolTip from 'components/ToolTips/BaseToolTip';\nimport {\n StyledAnswers,\n StyledAnswersItem,\n} from 'pages/BotDetails/AnswerBank/SimilarAnswerModal/SimilarAnswerModal.style';\n\nconst ResponsePickerModal = () => {\n const {\n alternateAnswser,\n answers,\n chatQuestion,\n currentAnswer,\n hardLinkQuestionToAnswer,\n editableQuestion,\n filteredAnswers,\n handleChangeQuestion,\n handleCloseResponsePickerModal,\n handleUnlinkQuestion,\n handleSelectQuestion,\n isOpen,\n isCurrentAnswerHasLink,\n itemToChange,\n loading,\n modalStatus,\n newQuestion,\n onChangeSearchKey,\n question,\n responsePickerModal,\n showDisplayAnswer,\n searchKey,\n similarQuestions,\n setShowDisplayAnswer,\n setFilteredAnswers,\n showQuestionsSkeleton,\n title,\n } = useResponsePickerModal();\n\n const answerWithScoreOptions = useMemo(() => {\n if (filteredAnswers?.length && searchKey) {\n return filteredAnswers;\n } else if (!searchKey) {\n return answers;\n }\n return [];\n }, [answers, filteredAnswers]);\n\n useEffect(() => {\n if (alternateAnswser && searchKey) {\n const filteredAnswers = answers.filter(answer =>\n answer.text.toLowerCase().includes(searchKey.toLowerCase())\n );\n setFilteredAnswers(filteredAnswers);\n }\n }, [searchKey]);\n\n const skipSimilarityCheck = useMemo(() => {\n // add new question:\n // always check for similarity\n // when question in edited\n // call similarity check\n if (newQuestion !== question?.text) {\n return false;\n }\n // if similar questions is found\n // and question inside textarea is not change\n // skip similarity check\n if (similarQuestions?.length && newQuestion === question?.text) {\n return true;\n }\n // if similar questions is found\n // and question inside textarea has changed\n // call similarity check\n else if (similarQuestions?.length && newQuestion !== question?.text) {\n return false;\n }\n // if no similar questions found\n // skip similarity check\n else if (!similarQuestions?.length) {\n return true;\n }\n // always call similarity check for all\n // other scenarios\n return false;\n }, [similarQuestions?.length, newQuestion, question?.text]);\n\n if (!isOpen) {\n return false;\n }\n\n return (\n {'Similar Questions Found'}
\n{'Link Alternate Response'}
\n{'No answer found.'}
\n )}\nfor last item */}\n {idx < interactionID?.length - 1 ? (\n
\n ) : null}\n
{getLocalTimeString(localDate)}
;\n },\n responsive: ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'],\n },\n {\n title: 'Session ID',\n dataIndex: 'sessionID',\n width: '16%',\n sorter: {\n compare: (a, b) => stringLocaleCompare(a.sessionID, b.sessionID),\n },\n filters: callbackSessionFilters,\n filteredValue: sessionFilteredInfo || null,\n onFilter: (value, row) => {\n if (value === 'undefined') {\n return !row.sessionID;\n } else {\n return row.sessionID && row.sessionID.includes(value);\n }\n },\n render: (sessionID, row) => (\n {name}
,\n responsive: ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'],\n },\n {\n title: 'Email',\n dataIndex: 'email',\n width: '18%',\n sorter: {\n compare: (a, b) => stringLocaleCompare(a.email, b.email),\n },\n render: email => {email}
,\n responsive: ['xxl', 'xl', 'lg', 'md'],\n },\n {\n title: 'Phone Number',\n dataIndex: 'mobile',\n width: '10%',\n sorter: {\n compare: (a, b) => stringLocaleCompare(a.mobile, b.mobile),\n },\n render: mobile => {mobile}
,\n responsive: ['xxl', 'xl', 'lg', 'md'],\n },\n {\n title: 'Interaction IDs',\n dataIndex: 'interactionID',\n width: '10%',\n render: interactionID =>\n interactionID.map((i, idx) =>\n renderInteractionIDs(interactionID, i, idx)\n ),\n responsive: ['xxl', 'xl', 'lg', 'md'],\n },\n {\n title: 'Others',\n width: '30%',\n dataIndex: 'others',\n render: others => {\n const extraData = filterObjectKeys(others, EXCLUDED_CALLBACK_COLUMNS);\n if (Object.keys(extraData).length) {\n return Object.entries(extraData).map(([key, value], idx) => {\n return (\n \n \n {!!key ? _.startCase(key) : ''}\n {': '}\n \n {value}\n
\n );\n });\n }\n return null;\n },\n responsive: ['xxl', 'xl', 'lg', 'md'],\n },\n // {\n // title: 'Action',\n // width: '30%',\n // dataIndex: 'action',\n // render: (value, row) => \n
\n ));\n\n return (\n \n {card.data}\n
\n ) : (\n {card.data}\n )}\n \n {card.link}\n \n \n )}\n {card.data === undefined && (\n \n {aggregations?.visitorCount || 0}\n
\n ) : (\n {aggregations?.visitorCount || 0}\n )}\n\n \n \n Import Question\n \n
\n ),\n target: '.import-question-button',\n disableBeacon: true,\n hideFooter: true,\n placement: 'auto',\n },\n {\n content: (\n \n You can link question to an answer by simply importing the file here.\n
\nDrag your files or select a file.
\n\n \n Import Question\n \n
\n ),\n target: '.next-step-importquestion-button',\n disableBeacon: true,\n hideFooter: true,\n placement: 'auto',\n },\n];\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Joyride from 'react-joyride';\nimport {\n CheckCircleOutlined,\n CloseCircleOutlined,\n DeleteOutlined,\n EditOutlined,\n ImportOutlined,\n InfoCircleOutlined,\n} from '@ant-design/icons';\nimport { Spin, Steps, Typography, Upload } from 'antd';\nimport TextArea from 'components/TextArea';\nimport Tooltip from 'components/ToolTips/BaseToolTip';\nimport Button from 'components/Button';\nimport Modal from 'components/Modals/GenericModal';\nimport JoyrideTooltip from 'components/ToolTips/JoyrideToolTip';\nimport {\n EditableAnswerWrapper,\n StyledFooterWrapper,\n StyledAntUploadContent,\n StyledUploadTip,\n StyledUploadTipTitle,\n StyledModalErrorAlert,\n TextAreaWrapper,\n VerifiedTag,\n} from './ImportQuestionModal.style';\nimport useImportQuestionModal from './hooks';\nimport { IMPORT_QUESTION } from 'constants/joyride_steps/import_question_modal';\nconst { Dragger } = Upload;\nconst { Paragraph } = Typography;\nconst { Step } = Steps;\n\nconst SAMPLE_JSON_FORMAT = (\n Click next to start importing questions.
\n\n {`[\n {\n \"text\": \"Sample plain answer text\",\n \"show_text\": \"New answer again for testing\"\n \"qlinks\": ['hello', 'test question'],\n \"category\": 'test answers',\n \"category_color\": \"#d3d3d3\",\n },\n {\n \"text\": \"Another sample answer text\",\n \"show_text\": \"Another answer for testing\"\n \"qlinks\": ['question link', 'show me another answer'],\n \"category\": 'test answers 2',\n \"category_color\": \"#167be7\",\n },\n]`}\n \n {modalTitle[fileType]}
}\n okButtonProps={{\n disabled: isImportBtnDisabled || !parsedFileQuestions?.length,\n }}\n cancelText={modalBtnLoading ? 'Close' : 'Cancel'}\n confirmLoading={modalBtnLoading}\n destroyOnClose\n width=\"700px\"\n footer={\n{getActionButtons()}
\n \n {steps[currentStep].content()}\n
\n \n \n \n );\n};\n\nImportQuestionModal.propTypes = {\n fileType: PropTypes.string,\n onClose: PropTypes.func,\n show: PropTypes.bool.isRequired,\n};\n\nexport default ImportQuestionModal;\n","import React, { useMemo } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport { Col, Collapse, Dropdown, Menu, Row, Spin, Tag, Upload } from 'antd';\nimport styled from 'styled-components';\nimport {\n CaretDownFilled,\n CaretRightOutlined,\n DeleteTwoTone,\n EditTwoTone,\n ImportOutlined,\n SearchOutlined,\n SettingOutlined,\n} from '@ant-design/icons';\n\nimport Title from 'components/Title';\nimport { StyledBotDetailsWrapper } from 'styles/GenericStyledComponents';\nimport useQuestions from './hooks';\nimport { cssVariables } from 'styles/root';\nimport TextArea from 'components/TextArea';\nimport { FlexRowSpaceBetweenWrapper } from 'components/Modals/AnswerEditor/Variant/Variant.styles';\nimport Modal from 'components/Modals/GenericModal';\nimport { StyledAntUploadContent } from 'components/Modals/ImportAnswerModal/ImportAnswerModal.style';\nimport Button from 'components/Button';\nimport Input from 'components/Input';\nimport ExportModal from 'components/Modals/ExportModal';\nimport SettingsDropdownMenu from './SettingsDropdownMenu/SettingsDropdownMenu';\nimport { StyledDropdownButtonMenu } from '../BotDetails.styles';\nimport QuestionImportExportMenu from './QuestionImportExportMenu/QuestionImportExportMenu';\nimport ImportQuestionModal from 'components/Modals/ImportQuestionModal';\n\nconst { Panel } = Collapse;\nconst { Dragger } = Upload;\n\nconst StyledCollapse = styled(Collapse)`\n .ant-collapse-arrow {\n height: 80% !important;\n padding: 0 !important;\n display: flex !important;\n align-items: center !important;\n }\n .ant-collapse-expand-icon {\n align-self: center;\n }\n\n .ant-collapse-header .ant-collapse-header-text {\n align-self: center;\n }\n\n .ant-collapse-extra {\n width: 30%;\n }\n`;\n\nconst StyledSearch = styled(Input)`\n border: none;\n border-bottom: 1px solid ${cssVariables.gray1} !important;\n // width: 24vw;\n`;\n\nconst Questions = props => {\n const {\n allQuestionsWithAnswer,\n filteredQuestions,\n loading,\n newQuestion,\n searchKey,\n showQuestionImporter,\n onSearchQuestion,\n onChangeQuestion,\n handleDeleteQuestion,\n handleEditQuestion,\n handleAddNewQuestion,\n handleUploadFile,\n setShowQuestionImporter,\n openExportModal,\n handleOpenExportModal,\n handleCloseExportModal,\n showImportModal,\n fileType,\n handleCloseImportModal,\n handleOpenImportModal,\n isMobileView,\n } = useQuestions();\n const ErrorPage = () => (\n \n
\n );\n\n const questionsWithAnswer = useMemo(() => {\n if (filteredQuestions?.length && searchKey?.length) {\n return filteredQuestions;\n } else if (!searchKey) {\n return allQuestionsWithAnswer;\n }\n return [];\n }, [allQuestionsWithAnswer, filteredQuestions]);\n\n return (\n Cannot load the page. Please refresh your browser.
\n{'Search: '}
\n \n\n {'Answer'}\n {': '}\n {item.answer?.text}\n
\n \n \n );\n })\n ) : (\n\n
\n )}\n Empty
\n\n \n {deleteOnly ? (\n \n {score && !noScore ? score?.toFixed(3) : \n )}\n \n {!editing ? (\n {question?.context?.text}\n ) : (\n setNewQuestion(evt.target.value)}\n />\n )}\n
\n \n\n {similarQuestionsModal.itemToChange.question}\n \n {'Similar Questions:'}\n {similarQuestionsModal.data.map((item, idx) => {\n return
{label}
}\n\n \n \n Question:\n \n onQuickReplyChange(e, 'question', item.key)}\n disabled={!item.editableQuestion && item.answer}\n />\n \n Display:\n \n onQuickReplyChange(e, 'label', item.key)}\n disabled={!item.editableQuestion && item.answer}\n />\n 
\n )\n }\n value={actionSelected}\n variant=\"link\"\n style={{ fontSize: 16 }}\n onClick={e =>\n onQuickReplyChange(\n e,\n actionSelected === 'Unlink' ? 'unlink' : 'edit',\n item.key\n )\n }\n size=\"small\"\n />\n \n deleteRow(item.key)}\n />\n \n \n {(actionSelected === 'Unlink' || actionSelected === 'Update') && (\n \n \n Linked Answer:\n \n onQuickReplyChange(e, 'answer', item.key)}\n options={answerList}\n filterOption={filterOption}\n showSearch\n hidden={!item.editableQuestion}\n />\n onQuickReplyChange(e, 'edit', item.key)}\n >\n {allAnswers?.find(answer => answer.jid === item.answer)?.text}\n \n \n )}\n
\n );\n};\n\nQuickReplyFormRow.propTypes = {\n deleteRow: PropTypes.func,\n index: PropTypes.number,\n isRemoveRowDisabled: PropTypes.bool,\n item: PropTypes.object.isRequired,\n onQuickReplyChange: PropTypes.func.isRequired,\n};\n\nexport default QuickReplyFormRow;\n","import styled from 'styled-components';\nimport QuickReplyFormRow from 'components/QuickReplyFormRow';\n\nexport const StyledInputGroup = styled(QuickReplyFormRow)`\n align-items: center;\n transition: transform 0.2s ease-in-out;\n width: 100%;\n padding: 5px 0;\n\n & .unlinkedIcon {\n width: 15px;\n height: 17px;\n\n margin-right: 5px;\n }\n & .linkedIcon {\n width: 20px;\n height: 20px;\n margin-right: 5px;\n }\n & .ant-input {\n padding: 5px;\n height: 32px;\n }\n\n & input-with-label {\n width: 100%;\n }\n`;\n\nexport const StyledInputGroupLabel = styled.div`\n display: flex;\n & span {\n width: 100%;\n margin-left: 19px;\n }\n\n & span:first-child {\n width: 60%;\n }\n`;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { PlusOutlined } from '@ant-design/icons';\n\nimport { StyledInputGroup } from './QuickReply.styles';\nimport { StyledFlexColumn } from 'styles/GenericStyledComponents';\n\nconst QuickReply = ({\n addRow,\n deleteRow,\n handleQuickReplyChange,\n isAddRowDisabled,\n isRemoveRowDisabled,\n quickReplies,\n}) => {\n const MemoisedQuickReplyForm = useMemo(() => {\n return (quickReplies?.quickReplyOptions || []).map((item, idx) => (\n IF
:AND
}\n \n \n{'Linked Questions:'}
\n- \n {answerEditorQuestions.map(q => {\n return (\n
{!!visitorID ? visitorID : 'N/A'}
\n ),\n },\n {\n title: 'Feedback',\n dataIndex: 'feedback',\n align: 'center',\n width: '10%',\n render: feedback => {\n if (feedback === 1) {\n return {getLocalTimeString(localDate)}
;\n },\n },\n ];\n\n const graphConfig = useMemo(() => {\n return {\n data: answerEditorInsights?.graph || [],\n xField: 'date',\n yField: 'count',\n xAxis: {\n label: {\n autoRotate: false,\n },\n },\n };\n }, [answerEditorInsights?.graph]);\n\n const renderInsightsTab = () => {\n if (shouldUseSkeletonComponent || !answerEditorInsights) {\n return {`# of sessions`}
\n \n {answerEditorInsights?.aggregations?.sessionCount || 0}\n
\n \n{`# of visitors`}
\n \n {answerEditorInsights?.aggregations?.visitorCount || 0}\n
\n \n{`# of questions asked`}
\n \n {answerEditorInsights?.aggregations?.totalQuestions || 0}\n
\n \n{`Total questions asked from ${moment(\n dateFilter.startDate\n ).format('MMMM D, YYYY')} - ${moment(dateFilter.endDate).format(\n 'MMMM D, YYYY'\n )}`}
\nSimilar Answers:
\n\n
\n \n ) : undefined\n }\n >\n \n \n {'Question'}:\n \n \n {questionEditorModal?.version}\n \n \n \n
\n {!currentStep ? (\n <>\n {showSkeleton ? \n
\n);\n\nconst ConversationSimulator = props => {\n const {\n loading,\n question,\n layoutedNodes,\n layoutedEdges,\n handleFindAnswer,\n setQuestion,\n onNodesChange,\n onEdgesChange,\n onNodeClick,\n } = useConversationSimulator();\n\n return (\n Cannot load the page. Please refresh your browser.
\n\n \n
\n \n
\n }\n >\n \n {auth.field === 'input' &&\n displayField(auth) &&\n RenderInputField(auth)}\n {auth.field === 'textArea' &&\n displayField(auth) &&\n RenderTextAreaField(auth)}\n {auth.field === 'select' &&\n displayField(auth) &&\n RenderSelectField(auth)}\n
\n ))}\n {RenderCollapsePanel()}\n \n {outputProps?.map((output, propIdx) =>\n output.name === 'type' ||\n output.hide ||\n renderAdvanceSettingCondition(output) ||\n SELECTABLE_FIELDS.includes(output.name) ? null : (\n
\n );\n};\n\nOutput.propTypes = {\n outputProps: PropTypes.array.isRequired,\n requiredFields: PropTypes.array.isRequired,\n getOutputPropertyDetails: PropTypes.func.isRequired,\n setOutputProps: PropTypes.func.isRequired,\n advanceSettingOption: PropTypes.bool.isRequired,\n showAdvancedSettings: PropTypes.bool.isRequired,\n setParamsProps: PropTypes.func,\n paramProps: PropTypes.array,\n objectifiedParamProps: PropTypes.any,\n addProps: PropTypes.func,\n setRequiredFields: PropTypes.func,\n};\n\nexport default Output;\n","import React, { useContext, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty, isEqual } from 'lodash';\nimport { Spin, Switch, Tag, message, Typography, Radio } from 'antd';\n\nimport Modal from 'components/Modals/GenericModal';\nimport {\n StyledFlexRowLeft,\n StyledFlexRowRight,\n StyledSpaceBetweenFlexCenter,\n} from 'styles/GenericStyledComponents';\nimport Input from 'components/Input';\nimport TextArea from 'components/TextArea';\nimport { InfoCircleTwoTone } from '@ant-design/icons';\nimport {\n StyledFormToolsContent,\n StyledFormItem,\n StyledBtnAdvanceSettings,\n} from './StyledComponents';\nimport Button from 'components/Button';\nimport { aiTools } from 'services/aiTools.service';\nimport useSelector from 'store/useSelector';\nimport CodeBlock from 'components/CodeBlock';\nimport { botJIDSelector } from 'selectors/bot';\nimport {\n DEFAULT_STATIC_OUTPUT_FIElDS,\n DEFAULT_URL_OUTPUT_FIElDS,\n DEFAULT_WALKER_OUTPUT_FIElDS,\n NEW_OBJECT_ITEM,\n OUTPUT_TYPES,\n} from 'constants/aiTools';\nimport { aiToolModalSelector } from 'selectors/bot/ui';\nimport { Context } from 'store/store';\nimport { ADD_AI_TOOL, EDIT_AI_TOOL } from 'store/action';\nimport ToolTip from 'components/ToolTips/BaseToolTip';\nimport Output from './Output';\nimport { isMobileViewSelector } from 'selectors/layout';\n\nconst { Text } = Typography;\n\nconst FunctionModal = props => {\n const [, dispatch] = useContext(Context);\n const botJID = useSelector(botJIDSelector);\n const isMobileView = useSelector(isMobileViewSelector);\n const selectedTool = useSelector(aiToolModalSelector);\n const modalAction = selectedTool.action;\n const { title, onClose } = props;\n const [paramProps, setParamsProps] = useState(\n selectedTool.parameters?.properties?.length > 0\n ? selectedTool.parameters?.properties\n : NEW_OBJECT_ITEM\n );\n const [outputProps, setOutputProps] = useState(\n selectedTool.output || DEFAULT_URL_OUTPUT_FIElDS\n );\n const [toolName, setToolName] = useState(selectedTool.name || null);\n const [toolDescription, setToolDescription] = useState(\n selectedTool.description || null\n );\n const [version, setVersion] = useState(selectedTool.version || 'draft');\n const [requiredFields, setRequiredFields] = useState(\n selectedTool?.parameters?.required || []\n );\n const [modalLoading, setModalLoading] = useState(false);\n const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);\n\n const isFormValid = useMemo(() => {\n const isOutputValid =\n outputProps?.filter(\n output => output.required === true && output.value === ''\n ).length === 0;\n\n return toolName && toolDescription && isOutputValid;\n }, [toolName, toolDescription, outputProps]);\n\n const addProps = (evt, isOutputProps) => {\n const newKey = isOutputProps ? outputProps.length : paramProps.length;\n const newProps = {\n position: newKey + 1,\n name: '',\n };\n\n return isOutputProps\n ? setOutputProps([...outputProps, newProps])\n : setParamsProps([...paramProps, newProps]);\n };\n\n const onSelectOutputType = e => {\n setShowAdvancedSettings(false);\n if (e.target.value === selectedTool?.outputInTable?.type) {\n // fill output props with previous values\n setOutputProps(selectedTool.output);\n } else {\n switch (e.target.value) {\n case 'url':\n setOutputProps(DEFAULT_URL_OUTPUT_FIElDS);\n break;\n\n case 'walker':\n setOutputProps(DEFAULT_WALKER_OUTPUT_FIElDS);\n break;\n\n default:\n setOutputProps(DEFAULT_STATIC_OUTPUT_FIElDS);\n break;\n }\n }\n };\n\n const handleChangeToolName = e => {\n setToolName(e.target.value);\n };\n\n const handleChangeToolDescription = e => {\n setToolDescription(e.target.value);\n };\n\n const handleSubmitTool = async e => {\n e.preventDefault();\n try {\n setModalLoading(true);\n if (modalAction === 'add') {\n const output = objectifiedOutput;\n\n if (!output.auth?.type) {\n delete output.auth;\n }\n\n const res = await aiTools.addTool(\n toolName,\n toolDescription,\n objectifiedParamProps?.hasOwnProperty() ? objectifiedParamProps : {},\n objectifiedOutput,\n version,\n requiredFields,\n botJID\n );\n\n dispatch({\n type: ADD_AI_TOOL,\n payload: res.data.report,\n });\n } else {\n const {\n name,\n description,\n parameters,\n jid: toolJid,\n output,\n version: currentVersion,\n } = selectedTool;\n const res = await aiTools.changeTool(toolJid, {\n // removing unchanged props\n name: toolName === name ? undefined : toolName,\n description:\n toolDescription === description ? undefined : toolDescription,\n ver: version === currentVersion ? undefined : version,\n requiredFields: isEqual(parameters.required, requiredFields)\n ? undefined\n : requiredFields,\n properties: isEqual(paramProps, parameters?.properties)\n ? undefined\n : objectifiedParamProps,\n output: isEqual(output, outputProps) ? undefined : objectifiedOutput,\n });\n\n dispatch({\n type: EDIT_AI_TOOL,\n payload: res.data.report,\n });\n }\n setShowAdvancedSettings(false);\n setModalLoading(false);\n message.success(\n `Successfully ${modalAction === 'add' ? 'saved' : 'updated'} AI tool`\n );\n } catch (error) {\n setShowAdvancedSettings(false);\n setModalLoading(false);\n message.error(error?.message || 'Error saving AI tool');\n }\n };\n\n const objectifiedParamProps = useMemo(() => {\n return paramProps?.reduce((acc, item) => {\n const key = item.name;\n const objectProperties = {};\n\n if (!isEmpty(item.properties)) {\n item.properties.forEach(item => {\n const { name, value, position, ...rest } = item;\n // dont include name, value and position\n objectProperties[name] = rest;\n });\n }\n const newItem = {\n ...item,\n properties: isEmpty(item.properties) ? undefined : objectProperties,\n };\n // delete fields not to be shown on preview object\n delete newItem.position;\n delete newItem.name;\n\n acc[key] = newItem;\n\n return acc;\n }, {});\n }, [paramProps]);\n\n const authParamsPropsOutput = auth => {\n const authTypeValue = auth?.request?.find(\n request => request.name === 'type'\n )?.value;\n const objectType = authTypeValue === 'bearer' ? 'header' : 'request';\n\n const objectRequest = auth?.request?.reduce(\n (acc, item) => {\n const key = item?.name || '';\n const value = item?.value || null;\n const objectProperties = {};\n const displayData = item.authType === authTypeValue;\n if (\n item.type === 'object' &&\n !isEmpty(item.properties) &&\n displayData\n ) {\n item.properties.forEach(item => {\n const { name, value } = item;\n // pair the name & value\n // to create key value pair as an object item\n // for the properties array\n if (name && name !== 'type') {\n objectProperties[name] = value && value !== 'null' ? value : null;\n }\n });\n // assign the object to create a nested object for 'object' type\n const newItem = {\n [key]: objectProperties,\n };\n\n return Object.assign(acc, newItem);\n } else if (displayData) {\n // assign directly the name & value\n // to create key value pair\n const newItem = {\n [key]: value && value !== 'null' ? value : null,\n };\n\n return Object.assign(acc, newItem);\n } else {\n return acc;\n }\n },\n // initialize the accumulator with the output type\n // other items are stored in an array\n // so we use `reduce` to create nested object from the array\n {}\n );\n\n return {\n [auth.name]: {\n type: authTypeValue,\n [objectType]: objectRequest,\n },\n };\n };\n\n const objectifiedOutput = useMemo(() => {\n return outputProps?.reduce(\n (acc, item) => {\n const key = item?.name || '';\n const value = item?.value || null;\n const objectProperties = {};\n if (item.type === 'object' && !isEmpty(item.properties)) {\n item.properties.forEach(item => {\n const { name, value } = item;\n // pair the name & value\n // to create key value pair as an object item\n // for the properties array\n if (name) {\n objectProperties[name] = value && value !== 'null' ? value : null;\n }\n });\n // assign the object to create a nested object for 'object' type\n const newItem = {\n [key]: objectProperties,\n };\n\n return Object.assign(acc, newItem);\n } else if (item.name === 'auth') {\n const newItem = authParamsPropsOutput(item);\n return Object.assign(acc, newItem);\n } else {\n // assign directly the name & value\n // to create key value pair\n const newItem = {\n [key]: value && value !== 'null' ? value : null,\n };\n\n return Object.assign(acc, newItem);\n }\n },\n // initialize the accumulator with the output type\n // other items are stored in an array\n // so we use `reduce` to create nested object from the array\n {}\n );\n }, [outputProps]);\n\n const selectedOutput = useMemo(() => {\n if (outputProps) {\n return outputProps[0]?.value;\n }\n }, [outputProps]);\n\n const getOutputPropertyDetails = value => {\n return outputProps?.find(output => output.name === value);\n };\n\n const validateToolName = (_, value) => {\n const regex = /^[a-zA-Z0-9_-]{1,64}$/;\n if (!value) {\n return Promise.reject('Please enter your tool name.');\n }\n\n if (!regex.test(value)) {\n return Promise.reject('Please enter a valid tool name.');\n }\n return Promise.resolve();\n };\n\n const CodeBlockDetails = () => (\n \n {output.field === 'input' &&\n displayField(output) &&\n RenderInputField(output)}\n {output.field === 'textArea' &&\n displayField(output) &&\n RenderTextAreaField(output)}\n {output.field === 'select' &&\n displayField(output) &&\n !SELECTABLE_FIELDS.includes(output.name) && (\n \n \n {output.label} {' '}\n {output.tooltip && (\n \n \n )}\n \n }\n options={output.options}\n onChange={evt => handleOutputPropsChanges(evt, output.name)}\n value={output.value}\n defaultValue={output.value}\n />\n \n )}\n
\n )\n )}\n\n {showAdvancedSettings && TabAdvancedSettings()}\n \n
\n \n
\n \n \n {selectedPageList?.category?.charAt(0).toUpperCase() +\n selectedPageList?.category?.slice(1) || ''}{' '}\n \n
\n\n {' '}\n Last Edited:\n {websiteEditorAnswer.lastEdited}\n
\n \n \n Test your bot\n \n
\n ),\n target: '.test-icon',\n disableBeacon: true,\n hideFooter: true,\n placement: 'left',\n },\n];\n\nconst CustomTooltip = ({\n continuous,\n index,\n step,\n backProps,\n primaryProps,\n tooltipProps,\n}) => {\n return (\n \n Awesome! Now that you have added answers, you can test your bot by\n clicking here.\n
\nAsk relevant question that you think your customers might ask.
\n{step.title}
}\n {step.content}
\n \n {index > 0 && (\n \n )}\n {continuous && (\n \n )}\n
\n \n \n {error && \n \n \n \n \n \n \n \n \n\n \n \n \n \n
\n \n
\n \n {/* {showIconOnly ? null : (\n <> */}\n \n {'Transactions'}\n \n \n {`${currentTransactionCount}/${maxTransactionCount}`}\n \n {/* \n )} */}\n 80}\n >\n {getTransactionCountParagraph()}\n \n {planType === 'advanced' ? (\n \n Contact us for more\n \n ) : (\n \n Get more transactions.\n \n )}\n \n )}\n
\n ) : null}\n \n Bots \n \n {`${currentBotCount}/${maxBotCount}`}\n \n
\n \n Loading...\n
\n );\n\n const endMessageTemplate = (\n\n All logs are displayed.\n
\n );\n\n const setParams = (start_date, end_date, parameter) => {\n let params = {\n master_id: location?.state ? [location?.state?.user_id] : null,\n start_date,\n end_date,\n all: location.pathname === ROUTES.ADMIN_ACTIVITY_LOGS,\n sort: {\n datetime: parameter.sort,\n },\n };\n\n if (\n parameter.bot &&\n parameter.bot_id &&\n parameter.activity_type &&\n parameter.master_id\n ) {\n return params;\n }\n\n if (\n searchCheckedBotList?.botId?.length > 1 &&\n searchCheckedBotList?.botName?.length > 1\n ) {\n params = {\n ...params,\n bot: searchCheckedBotList.botName,\n bot_id: searchCheckedBotList.botId,\n };\n }\n if (searchCheckedAction.length > 1) {\n params = {\n ...params,\n activity_type: searchCheckedAction,\n };\n }\n\n if (searchCheckedUsers.length > 1) {\n params = {\n ...params,\n all: false,\n master_id: searchCheckedUsers,\n };\n }\n\n return params;\n };\n\n const getActivityLogs = async (start_date, end_date, param) => {\n setIsLoading(true);\n try {\n let noOfRecords = 0;\n const params = setParams(start_date, end_date, param);\n if (!param.isExecutedAlready || param.isExecutedAlready === false) {\n noOfRecords = numberOfRecords;\n setPageNumber(1);\n setNumberOfRecords(noOfRecords);\n } else if (param.isExecutedAlready === true) {\n noOfRecords =\n totalRecords >= numberOfRecords\n ? 10 * (pageNumber + 1)\n : numberOfRecords;\n setNumberOfRecords(noOfRecords);\n setPageNumber(pageNumber + 1);\n }\n const res = await apiService.getActivityLogs(\n sentinel,\n token,\n params,\n noOfRecords\n );\n\n if (!res.data.success || !res.data.report || !res.data.report[0]) {\n throw new Error(GET_DATA_ERROR);\n }\n setActivityLogs(res?.data?.report[0]?.hits?.hits);\n setTotalRecords(res?.data?.report[0]?.hits?.total.value);\n setActivityLogsState({\n items: res?.data?.report[0]?.hits?.hits,\n hasMore:\n res?.data?.report[0]?.hits?.total.value >\n res?.data?.report[0]?.hits?.hits.length,\n });\n fetchFilters(params.master_id, params);\n } catch (err) {\n console.log('error:', err);\n setIsLoading(false);\n }\n };\n\n const parseToStartAndEndOfDayISODate = dateFilter => {\n const { startDate, endDate } = dateFilter;\n\n var validStartDate = new Date(\n new Date(startDate).setHours(0, 0, 0, 0)\n ).toISOString();\n var validEndDate = new Date(\n new Date(endDate).setHours(23, 59, 59, 59)\n ).toISOString();\n\n return { validStartDate, validEndDate };\n };\n\n const formatDateTime = dateTime => {\n const localDate = UTCToLocal(new Date(dateTime));\n return getLocalTimeString(localDate);\n };\n\n const handleDateFilterChange = (start_date, end_date) => {\n const startDateConverted = new Date(start_date);\n const endDate = new Date(end_date);\n setDateFilter({\n startDate: startDateConverted,\n endDate: endDate,\n });\n };\n\n const handleModalOpening = (\n activityDate,\n activityAction,\n bot,\n message,\n user,\n planType,\n id\n ) => {\n if (activityDate || activityAction) {\n setSelectedActivityLogs({\n activityDate,\n activityAction,\n bot,\n message,\n user,\n planType,\n id,\n });\n } else {\n setSelectedActivityLogs(null);\n }\n setShowDetailsModal(!showDetailsModal);\n };\n\n const handleModalClosing = () => {\n setSelectedActivityLogs(null);\n setShowDetailsModal(false);\n };\n\n const setSelectedActivityLogDetails = logDetails => {\n handleModalOpening(\n formatDateTime(moment(logDetails.datetime)),\n logDetails.activity_action,\n logDetails.bot,\n assignActivityMessage(logDetails),\n logDetails.user?.email,\n logDetails.data.plan_type,\n logDetails.bot_id\n );\n };\n\n const assignActivityMessage = (logDetails, isExportFile) => {\n switch (logDetails.activity_type) {\n case 'add_bot':\n return logDetails.data.desc\n ? `Name: ${logDetails.data.name} ` +\n (isExportFile ? `` : `\\n`) +\n `Description: ${logDetails.data.desc}`\n : `Name: ${logDetails.data.name}`;\n case 'change_integration':\n case 'create_integration':\n return (\n `Name: ${logDetails?.data?.identifier} ` +\n (isExportFile ? `` : `\\n`) +\n `Type: ${logDetails?.data?.int_type}`\n );\n default:\n return logDetails?.data?.text;\n }\n };\n\n const handleDownloadActivityLogs = () => {\n const titleColumn = [\n 'Activity Date,',\n 'User,',\n 'Action,',\n 'Bot Name,',\n 'Current Bot Name,',\n 'Message,',\n '\\n',\n ];\n const fileData = activityLogs.map(item => {\n const message = assignActivityMessage(item._source, true)\n ? `Value: ${assignActivityMessage(item._source, true)}`\n : 'N/A';\n const userInfo = item._source.user ? item._source.user?.email : '';\n const newBotName = activeBots?.find(\n activeBot =>\n activeBot.jid === item._source.bot_id &&\n activeBot?.context?.name !== item._source.bot\n )\n ? activeBots?.find(activeBot => activeBot.jid === item._source.bot_id)\n ?.context?.name\n : '';\n\n return (\n moment(UTCToLocal(new Date(item._source.datetime))).format(\n 'YYYY-MM-DD HH:mm'\n ) +\n ',' +\n userInfo +\n ',' +\n item._source.activity_action +\n ',' +\n item._source.bot +\n ',' +\n newBotName +\n ',' +\n message +\n '\\n'\n );\n });\n const blob = new Blob(['\\ufeff', ...titleColumn, ...fileData], {\n type: 'text/csv',\n });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.download = 'zsb-activity-logs.csv';\n link.href = url;\n link.click();\n message.success('Activity logs is exported successfully');\n };\n\n const handleChangeFilter = e => {\n setFilter(e.target.value);\n if (e.target.value === 'all') {\n resetState();\n }\n };\n\n const handleChangeActivityDateSorting = sort => {\n setSort(sort);\n getActivityLogs(dateFilter.startDate, dateFilter.endDate, {\n sort,\n isExecutedAlready: true,\n });\n };\n\n const handleSearch = (e, botName) => {\n if (filter === 'action') {\n setSearchCheckedAction(\n handleCheckedOnSearch(\n searchCheckedAction.filter(value => value !== e.target?.value),\n e.target.value,\n e.target.checked\n )\n );\n } else if (filter === 'botName') {\n const selectedBot = {\n botId: handleCheckedOnSearch(\n searchCheckedBotList?.botId?.filter(\n value => value !== e.target?.value\n ),\n e.target.value,\n e.target.checked\n ),\n botName: handleCheckedOnSearch(\n searchCheckedBotList?.botName?.filter(value => value !== botName),\n botName,\n e.target.checked\n ),\n };\n setSearchCheckedBotList(selectedBot);\n } else if (filter === 'users') {\n setSearchCheckedUsers(\n handleCheckedOnSearch(\n searchCheckedUsers.filter(value => value !== e.target?.value),\n e.target.value,\n e.target.checked\n )\n );\n }\n };\n\n const handleCheckedOnSearch = (filteredData, value, checked) => {\n if (!checked) {\n return filteredData;\n } else {\n return [...filteredData, value];\n }\n };\n\n const fetchFilters = async (master_id, params) => {\n try {\n const res = await apiService.getActivityLogsFilters(\n sentinel,\n token,\n master_id,\n location.pathname === ROUTES.ADMIN_ACTIVITY_LOGS,\n params\n );\n\n if (!res.data.success || !res.data.report || !res.data.report[0]) {\n throw new Error(GET_DATA_ERROR);\n }\n setIsLoading(false);\n setBots(\n res.data.report[0]?.aggregations?.bots?.buckets.map(bot => {\n return {\n name: bot.key[0],\n id: bot.key[1],\n status: res.data?.report[1]?.find(\n activeBots => activeBots.jid === bot.key[1]\n )\n ? 'Active'\n : 'Deleted',\n };\n })\n );\n setActiveBots(res.data?.report[1]);\n setActions(res.data.report[0]?.aggregations?.types?.buckets);\n setUsers(res.data.report[0]?.aggregations?.masters?.buckets);\n } catch (err) {\n console.log('error:', err);\n setIsLoading(false);\n }\n };\n\n const handleChangePopOver = newOpen => {\n setIsOpen(newOpen);\n };\n\n const filterTitle = (\n\n {selectedActivityLogs?.activityAction}\n
\n {selectedActivityLogs?.message && (\n <>\nValue:
\n \n {selectedActivityLogs?.message}\n \n \n )}\n \n ))}\n\n {selectedActivityLogs?.planType && (\n\n \n \n \n \n \n
\n ) : (\n \n Current Plan:{' '}\n {selectedUserPlan.charAt(0).toUpperCase() +\n selectedUserPlan.slice(1)}\n
\nNo available data for this user.
\n )}\n \n );\n};\n\nUpdateUserModal.propTypes = {\n showUpdateBotset: PropTypes.bool.isRequired,\n setShowUpdateBotset: PropTypes.func.isRequired,\n handleChange: PropTypes.func.isRequired,\n selectedUser: PropTypes.object,\n};\n\nexport default UpdateUserModal;\n","import React, { useCallback, useState, useContext, useEffect } from 'react';\nimport { Descriptions, message, Modal, Layout, Spin, Col } from 'antd';\nimport { useHistory } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { EditOutlined, SaveOutlined } from '@ant-design/icons';\n\nimport Button from 'components/Button';\nimport DiGraph from 'components/DiGraph';\nimport UpdateUserModal from '../UpdateUserModal';\nimport AdminSidebar from '../../AdminSidebar';\nimport {\n UserDetailsContainer,\n UserInformation,\n GraphModal,\n UserDetailsCTA,\n SelectContainer,\n} from './UserDetails.style';\nimport { Context } from 'store/store';\nimport {\n START_IMPERSONATING_USER,\n INIT_JAC,\n SHOW_DIGRAPH,\n HIDE_DIGRAPH,\n GET_ALL_VERSIONS,\n} from 'store/action';\nimport ROUTES from 'constants/routes';\nimport { DEFAULT_ERROR_MESSAGE, GET_DATA_ERROR } from 'constants/error';\nimport { apiService } from 'services/api.service';\nimport { getToken, setImpersonateUser } from 'services/auth.service';\nimport { stripeAPIService } from 'services/stripeAPI.service';\nimport { getGraphObject } from 'utils/apiUtils';\nimport { cssVariables } from 'styles/root';\nimport { withPrefixUUID } from 'utils';\nimport { SidebarRoutes } from 'pages/Admin/SidebarRoutes';\n\nconst { confirm } = Modal;\n\nconst UserDetails = ({ jid }) => {\n const userJID = withPrefixUUID(jid);\n const [state, dispatch] = useContext(Context);\n const {\n sentinel,\n graph,\n admin: { all_users, showDigraph, all_versions },\n } = state;\n const [showUpdateBotset, setShowUpdateBotset] = useState(false);\n const [userData, setUserData] = useState(null);\n const [userObject, setUserObject] = useState(null);\n const [selectedUser] = all_users.filter(data => data.jid === userJID);\n const token = getToken();\n const history = useHistory();\n const [loading, setloading] = useState(false);\n const [editVersion, setEditVersion] = useState(false);\n const [selectedVersion, setSelectedVersion] = useState(null);\n const [currentVersion, setCurrentVersion] = useState(null);\n\n const getAllVersions = async () => {\n setEditVersion(false);\n const allVersions = await apiService.getVersions(sentinel, token);\n if (!allVersions || !allVersions.data) {\n throw new Error(DEFAULT_ERROR_MESSAGE);\n }\n\n const versionData = allVersions?.data.report[0];\n setCurrentVersion(versionData.current);\n const allVersionsData = Object.entries(versionData.versions).map(\n version => ({\n version: version[0],\n })\n );\n await dispatch({\n type: GET_ALL_VERSIONS,\n payload: allVersionsData,\n });\n };\n\n useEffect(() => {\n setloading(true);\n const getUser = async () => {\n try {\n const userObject = await getGraphObject(userJID, token);\n if (userObject?.data?.active_gph_id) {\n if (sentinel && token) {\n const botSet = await apiService.getBotSet(\n userObject.data.active_gph_id,\n sentinel,\n token\n );\n setSelectedVersion(botSet.data.report[0].context.features.version);\n setUserData(botSet.data.report[0]);\n }\n }\n\n getAllVersions();\n setUserObject(userObject.data);\n setloading(false);\n } catch (error) {\n setloading(false);\n message.error(GET_DATA_ERROR);\n }\n };\n\n getUser();\n }, [userJID, sentinel, token]);\n\n const loadUserData = async (sentinel, graph) => {\n try {\n const planData = await apiService.init(sentinel, graph, token);\n await dispatch({\n type: INIT_JAC,\n payload: {\n plan: planData.data.report[0].context,\n subscription: planData.data?.report[1]?.context || {},\n },\n });\n } catch (error) {\n throw new Error(GET_DATA_ERROR);\n }\n };\n\n const handleShowDigraph = () => {\n dispatch({\n type: SHOW_DIGRAPH,\n });\n };\n\n const handleCloseDigraph = () => {\n dispatch({\n type: HIDE_DIGRAPH,\n });\n };\n\n const handleImpersonateClick = async () => {\n if (userData) {\n const userActiveGraph = userObject?.active_gph_id || null;\n const userType = userObject?.j_type || null;\n const userDataPayload = {\n impersonated_user: {\n graph: userActiveGraph,\n ...userObject,\n name: selectedUser.name,\n email: selectedUser.user,\n },\n };\n\n setImpersonateUser(graph, JSON.stringify(userDataPayload));\n if (userActiveGraph && userType !== 'super_master') {\n await dispatch({\n type: START_IMPERSONATING_USER,\n payload: userDataPayload,\n });\n\n await loadUserData(sentinel, userActiveGraph, null, token);\n\n history.push(ROUTES.BOTS_PAGE);\n } else {\n return message.error('Sorry! Graph data not available.', 3);\n }\n } else {\n return message.error('Sorry! Graph data not available.', 3);\n }\n };\n\n const handleActivityLogsClick = () => {\n history.push({\n pathname: ROUTES.ADMIN_ACTIVITY_LOGS,\n state: { user_id: userJID },\n });\n };\n\n const updatePlan = useCallback(\n async plan => {\n const result = await stripeAPIService.overrideCustomerPlan(\n userObject?.active_gph_id,\n sentinel,\n token,\n plan\n );\n const [botSet] = result.data.report.filter(\n report => report.name === 'botset'\n );\n setUserData(botSet);\n\n if (result.data.success && result.data.report.length > 0) {\n setShowUpdateBotset(false);\n message.success(`Plan updated to ${plan}!`, 3);\n } else {\n message.error('Sorry! Something went wrong updating user plan.', 3);\n }\n },\n [sentinel, token, userObject?.active_gph_id]\n );\n\n const handleChange = useCallback(\n async value => {\n confirm({\n content:Update plan to {value}?
,\n onOk() {\n updatePlan(value);\n },\n onCancel() {\n console.log('Cancel');\n },\n });\n },\n [updatePlan]\n );\n\n const handleSyncSentinel = async () => {\n setloading(true);\n try {\n const result = await apiService.syncSentinelGlobal(\n selectedUser.jid,\n token\n );\n if (result.data.success) {\n if (result?.data?.report.length > 0) {\n setUserObject(result?.data?.report[0]);\n }\n setloading(false);\n return message.success(`Successfully done`, 3);\n } else {\n setloading(false);\n return message.error('Sorry! Something went wrong while syncing.', 3);\n }\n } catch (error) {\n setloading(false);\n return message.error('Sorry! Something went wrong while syncing.', 3);\n }\n };\n\n const handleSetVersion = async () => {\n setloading(true);\n try {\n const result = await apiService.updateUserVersion(\n sentinel,\n token,\n {\n ver: selectedVersion,\n },\n userObject.active_gph_id\n );\n\n if (result.data.success) {\n if (result?.data?.report.length > 0) {\n const userObject = await getGraphObject(userJID, token);\n if (userObject?.data?.active_gph_id) {\n if (sentinel && token) {\n const botSet = await apiService.getBotSet(\n userObject.data.active_gph_id,\n sentinel,\n token\n );\n\n if (botSet.data?.report && botSet.data?.report[0]) {\n setSelectedVersion(\n botSet.data.report[0].context.features.version\n );\n setUserData(botSet.data.report[0]);\n }\n }\n }\n }\n setloading(false);\n setEditVersion(false);\n return message.success(`Successfully updated.`, 3);\n } else {\n setloading(false);\n setEditVersion(false);\n return message.error('Sorry! Something went wrong while syncing.', 3);\n }\n } catch (err) {\n setloading(false);\n setEditVersion(false);\n throw err;\n }\n };\n\n const handleChangeVersion = e => {\n setSelectedVersion(e);\n };\n\n if (!selectedUser) {\n return null;\n }\n\n return (\n({userObject?.active_snt_id})\n \n )}\n
\n menu(userData)}\n type=\"primary\"\n icon={
\n ),\n },\n ]}\n pagination={{\n pageSize: 10,\n total: filteredUsers.length,\n position: ['topRight'],\n }}\n onChange={handleOnChange}\n dataSource={filteredUsers}\n footer={() => `Showing ${filteredUsers.length} total users.`}\n />\n );\n};\n\nUsersListTable.propTypes = {\n user: PropTypes.object,\n initLoading: PropTypes.bool.isRequired,\n filteredUsers: PropTypes.array.isRequired,\n handleOnChange: PropTypes.func.isRequired,\n handleImpersonateClick: PropTypes.func.isRequired,\n handleUserTypeClick: PropTypes.func.isRequired,\n handleUpdateUser: PropTypes.func.isRequired,\n handleActivityLogsClick: PropTypes.func.isRequired,\n};\n\nexport default UsersListTable;\n","import React, { useState, useEffect, useContext } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { message } from 'antd';\nimport { apiService } from 'services/api.service';\nimport { setImpersonateUser } from 'services/auth.service';\nimport { Context } from 'store/store';\nimport {\n GET_ALL_USERS,\n START_IMPERSONATING_USER,\n UPDATE_USER_DATA,\n CLEAR_DIGRAPH_DATA,\n} from 'store/action';\nimport ROUTES from 'constants/routes';\nimport AdminSidebar from '../AdminSidebar';\nimport UserDetails from './UserDetails';\nimport UsersListTable from './UsersListTable';\nimport {\n StyledWrapper,\n StyledTableContainer,\n StyledSearch,\n StyledTitle,\n} from './Users.style';\nimport { useQuery } from '../../useQuery';\nimport { getGraphObject, masterUpdateUser } from 'utils/apiUtils';\nimport { stripUUID } from 'utils';\nimport { getTokenSelector } from 'selectors/user';\nimport useSelector from 'store/useSelector';\nimport { SidebarRoutes } from '../SidebarRoutes';\n\nconst Users = () => {\n const [state, dispatch] = useContext(Context);\n const {\n admin: { all_users },\n graph,\n } = state;\n const token = useSelector(getTokenSelector);\n\n const [initLoading, setInitLoading] = useState(true);\n const [searchFilter, setSearchFilter] = useState(null);\n const [filteredUsers, setFilteredUsers] = useState([]);\n const history = useHistory();\n let filtered_users = all_users;\n const query = useQuery();\n const userJID = query.get('jid') ? stripUUID(query.get('jid')) : null;\n\n useEffect(() => {\n if (!searchFilter) {\n const allUsers = all_users.map((user, key) => {\n return {\n key,\n ...user,\n };\n });\n setFilteredUsers(allUsers);\n }\n }, [all_users, searchFilter]);\n\n useEffect(() => {\n const getuser = async () => {\n setInitLoading(true);\n const allUsers = await apiService.getMasterAllUser(\n {\n limit: 1000,\n offset: 0,\n },\n token\n );\n\n const allUsersData = allUsers.data.data;\n await dispatch({\n type: GET_ALL_USERS,\n payload: allUsersData,\n });\n };\n\n getuser();\n setInitLoading(false);\n }, [dispatch, token]);\n\n const handleOnChange = event => {\n console.log('event ', event);\n };\n\n const handleImpersonateClick = async userData => {\n const userObject = await getGraphObject(userData.jid, token);\n const userActiveGraph = userObject.data?.active_gph_id || null;\n const userType = userObject.data?.j_type || null;\n const userDataPayload = {\n impersonated_user: {\n graph: userActiveGraph,\n ...userData,\n email: userData.user,\n },\n };\n\n setImpersonateUser(graph, JSON.stringify(userDataPayload));\n if (userActiveGraph && userType !== 'super_master') {\n await dispatch({\n type: START_IMPERSONATING_USER,\n payload: userDataPayload,\n });\n\n window.location.href = ROUTES.BOTS_PAGE;\n } else {\n return message.error('Sorry! Graph data not available.', 3);\n }\n };\n\n const handleActivityLogsClick = user_id => {\n history.push({\n pathname: ROUTES.ADMIN_ACTIVITY_LOGS,\n state: { user_id: user_id },\n });\n };\n\n const handleUpdateUser = async (userData, action) => {\n if (action === 'activate') {\n const result = await masterUpdateUser(userData.id, token, {\n is_activated: true,\n });\n if (result.status === 200 && result.data === 'Update Success!') {\n message.success('User is now active!');\n dispatch({\n type: UPDATE_USER_DATA,\n payload: {\n id: userData.id,\n is_activated: true,\n },\n });\n } else {\n message.success('Ooops. Something is wrong, try again later.');\n }\n } else {\n const result = await masterUpdateUser(userData.id, token, {\n is_activated: false,\n });\n if (result.status === 200 && result.data === 'Update Success!') {\n message.success('User is now inactive!');\n dispatch({\n type: UPDATE_USER_DATA,\n payload: {\n id: userData.id,\n is_activated: false,\n },\n });\n } else {\n message.success('Ooops. Something is wrong, try again later.');\n }\n }\n };\n\n const onSearch = event => {\n const { value } = event.target;\n filtered_users = all_users.filter(au => {\n if (\n au.user.toLowerCase().includes(value.toLowerCase()) ||\n au.user.toLowerCase().includes(value.toLowerCase()) ||\n au.jid.toLowerCase().includes(value.toLowerCase())\n ) {\n return true;\n }\n return false;\n });\n\n setSearchFilter(value);\n setFilteredUsers(filtered_users);\n };\n\n useEffect(() => {\n return () => {\n dispatch({\n type: CLEAR_DIGRAPH_DATA,\n payload: null,\n });\n };\n }, [dispatch, userJID]);\n\n if (userJID) {\n return \n Edit Global Vars \n
\n ) : (\n \n Add Global Vars \n
\n )}\n \n \n \n \n \n
\n \n \n );\n};\nexport default GlobalVarsAddModal;\n","import styled from 'styled-components';\nimport { Table } from 'antd';\n\nexport const StyledWrapper = styled.div`\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledTable = styled(Table)`\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.02);\n\n & .ant-table-tbody > tr > td {\n padding: 18px;\n }\n\n & tr > td {\n border-right: 1px solid #33363c1a;\n padding: 12px !important;\n }\n`;\n\nexport const StyledButtonContainer = styled.div`\n display: flex;\n align-items: center;\n & button {\n margin-right: 15px;\n }\n`;\n","import React, { useContext, useState } from 'react';\nimport Button from 'components/Button';\nimport GlobalVarsAddModal from '../GlobalVarsAddModal/GlobalVarsAddModal';\nimport { Context } from 'store/store';\nimport { apiService } from 'services/api.service';\nimport { GET_ALL_GLOBAL_VARS } from 'store/action';\nimport {\n StyledTable,\n StyledWrapper,\n StyledButtonContainer,\n} from './GlobalVarsTable.style';\n\nconst GlobalVarsTable = ({\n totalDatas,\n loading,\n pageSize,\n setInitLoading,\n datatable,\n setCurrentData,\n}) => {\n const [, dispatch] = useContext(Context);\n const [currentSize, setCurrentSize] = useState(pageSize);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [selectedGlobalVar, setSelectedGlobalVar] = useState({\n name: '',\n value: {},\n });\n\n const handlePagination = (current, pageSize) => {\n setInitLoading(true);\n current * pageSize < totalDatas\n ? setCurrentSize(current * pageSize)\n : setCurrentSize(totalDatas);\n datatable.slice((current - 1) * pageSize, current * pageSize);\n setInitLoading(false);\n };\n\n const handleUpdateVersion = row => {\n setIsModalOpen(true);\n setSelectedGlobalVar(prevState => ({\n ...prevState,\n name: row.name,\n value: row.value,\n }));\n };\n\n const handleCloseModal = () => setIsModalOpen(false);\n // const rowSelection = {\n // onChange: (selectedRowKeys, selectedRows) => {\n // console.log(\n // `selectedRowKeys: ${selectedRowKeys}`,\n // 'selectedRows: ',\n // selectedRows\n // );\n // },\n // onSelect: (record, selected, selectedRows) => {\n // console.log(record, selected, selectedRows);\n // },\n // onSelectAll: (selected, selectedRows, changeRows) => {\n // console.log(selected, selectedRows, changeRows);\n // },\n // getCheckboxProps: record => ({\n // name: record.name,\n // }),\n // };\n\n const editGlobalVars = async (name, value, token) => {\n try {\n const res = await apiService.addGlobalVars(name, value, token);\n if (res.data.success) {\n const refetchGlobalVars = async () => {\n setInitLoading(true);\n const allGlobalVars = await apiService.getGlobalVars({}, token);\n const allGlobalVarsData = allGlobalVars.data.results;\n\n await dispatch({\n type: GET_ALL_GLOBAL_VARS,\n payload: allGlobalVarsData,\n });\n setCurrentData(allGlobalVarsData);\n };\n\n refetchGlobalVars();\n setInitLoading(false);\n }\n } catch (err) {\n throw err;\n }\n };\n\n return (\n Name
\nValue
\n0 of {totalDatas} selected.
\n \n {'Current Version'}\n handleChangeField('current', value)}\n key={versionDetails.version}\n />\n
\n \n {planType?.charAt(0).toUpperCase() + planType?.slice(1)}\n
\n {isTrialSubscription ? (\n\n \n {detailedPlanFeatures(planDetails[planType][0])} per month\n for {maxTransactionCount} queries,\n {PRICE_PER_QUERY} per query thereafter.{' '}\n \n {planRenewDate && !isCancelledSubscription ? (\n
\n ) : null}\n Your plan renews on {planRenewDate}.
\n ) : null}\n {trialDaysLeft ? (\n{`Your trial subscription will end in ${trialDaysLeft} day(s)`}
\n ) : null}\n\n 80}\n >\n {getTransactionCountParagraph()}\n \n {'Upgrade for more'}\n
\n Payment Information
\n \n\n \n {isPaymentInfoEmpty ? (\n \n \n \n Billing details\n \n \n \n {billingDetails?.name}\n \n \n {billingDetails?.email}\n \n \n {billingDetails?.phone || 'N/A'}\n \n \n {billingDetails?.address?.country || 'N/A'}\n \n \n \n \n \n Payment Method\n \n {paymentError && (\n \n \n \n \n \n \n
\n )}\n \n
\n \n\n {'No Data Yet.'}
\n ) : (\n{'No Data Yet.'}
\n ) : Array.isArray(invoices) && invoices?.length > 0 ? (\n{'No Data Yet.'}
\n )}\n{'forever'}
\n \n )}\nper month
\n \n )}\nper month
\n \n )}\n{`Can't find the right plan?`}
\n\n {`We'd be more than happy to find a solution for your organisation`}\n
\n\n Thank you for starting your free trial to{' '}\n {planType.charAt(0).toUpperCase() + planType.slice(1)} Plan :)\n
\n With a {selectedPlan} plan, you now have:\n- \n {selectedPlan &&\n planDetails[selectedPlan].shortFeatures.map((sf, key) => (\n
- {sf} \n ))}\n
{`Your existing bots will be inactive${\n trialDaysLeft ? ' in ' + trialDaysLeft + ' days.' : '.'\n }`}
\n );\n if (showCancelledSubscriptionSuccessMessage) {\n return (\n <>\n{'Subscription Cancelled!'}
\n {deactivatingBotNotice}\n\n {`You can always `}\n subscribe to a plan\n {` if you\n change your mind :)`}\n
\n\n {apiGatewayConfig?.auth}\n \n API Key
\n\n \n {apiGatewayConfig?.auth}{' '}\n {apiGatewayConfig?.auth.includes('****') &&\n ``}\n \n \n \n {apiGatewayConfig?.url}\n \n \n {apiGatewayConfig?.key}\n \n {`An activation code has been sent to your email: `}
\n {state && state.email && {state.email}}\n {error && Success! Your account has been successfully verified.
\nYou've been inactive for 10 minutes.
\nLogging you out in {`${minutes}:${seconds}`}
\n \n );\n};\n\nexport default IdleTimerCountdown;\n","import React, { useEffect, useContext } from 'react';\nimport styled from 'styled-components';\nimport { useHistory } from 'react-router-dom';\n\nimport DeadBotLogo from 'assets/images/zsb-dead-logo.png';\nimport { StyledLogo } from 'pages/Auth/SignIn/SignIn.style';\nimport Button from 'components/Button';\nimport { cssVariables } from 'styles/root';\nimport ROUTES from 'constants/routes';\nimport { Context } from 'store/store';\nimport { LOGOUT_EXTERNAL_USER, LOGOUT_USER } from 'store/action';\nimport { isExternalPageSelector } from 'selectors/user';\nimport useSelector from 'store/useSelector';\n\nconst StyledInfo = styled.div`\n align-items: center;\n display: flex;\n justify-content: center;\n background-color: ${cssVariables.blue1};\n margin: 20px 0;\n font-size: 1.2rem;\n color: ${cssVariables.primaryGray};\n padding: 1%;\n`;\n\nconst StyledLogout = styled.div`\n padding-top: 5%;\n display: flex;\n justify-content: center;\n flex-direction: column;\n align-items: center;\n width: 100%;\n\n button {\n margin-top: 24px;\n }\n`;\n\nconst Logout = () => {\n const history = useHistory();\n const [, dispatch] = useContext(Context);\n const isExternalPage = useSelector(isExternalPageSelector);\n\n useEffect(() => {\n dispatch({\n type: isExternalPage ? LOGOUT_EXTERNAL_USER : LOGOUT_USER,\n payload: null,\n });\n }, []);\n\n return (\n\n \n {isAuthenticated && \n \n \n \n \n \n \n \n
\n Category
,\n dataIndex: 'name',\n key: 'name',\n render: (value, urlDetails) => (\n \n \n {value?.charAt(0).toUpperCase() + value?.slice(1) || 'General'}\n \n\n