and the corresponding
if they exist\r\n if (renderedText.startsWith(\"\")) {\r\n renderedText = renderedText.substring(3);\r\n }\r\n if (renderedText.endsWith(\"
\\n\")) {\r\n renderedText = renderedText.substring(0, renderedText.length - 5);\r\n }\r\n\r\n return renderedText;\r\n }\r\n\r\n setShowSearchBotChatField = (show) => {\r\n\r\n window.parent.postMessage({'showSearchBotChatField': show}, '*');\r\n\r\n this.setState({showSearchBotChatField: show})\r\n }\r\n\r\n loadMoreSpeechBubble = () => {\r\n this.setState({loadToEnd : false});\r\n this.invokeSignalRMessage(['SendChatHistory', this.state.language.id, this.state.startLoad, Setup.messageLoadCount]);\r\n };\r\n\r\n sendMostAskedQuestions = (questions) => {\r\n this.invokeSignalRMessage(['SendMostAskedQuestions', this.state.language.id, this.state.startLoad, Setup.messageLoadCount, questions]);\r\n } \r\n componentDidUpdate(prevProps, prevState) {\r\n if (prevState.pendingFileUrls !== this.state.pendingFileUrls) {\r\n const uniquePendingFileUrls = [...new Set(this.state.pendingFileUrls)];\r\n if (uniquePendingFileUrls.length !== this.state.pendingFileUrls.length) {\r\n this.setState({ pendingFileUrls: uniquePendingFileUrls });\r\n }\r\n }\r\n \r\n if (prevState.fileUploadedList !== this.state.fileUploadedList) {\r\n if (this.state.fileUploadedList && this.state.fileUploadedList.length > 0) {\r\n this.setState({ fileUploadedText: true });}\r\n const uniqueFileUploadedList = [...new Set(this.state.fileUploadedList)];\r\n if (uniqueFileUploadedList.length !== this.state.fileUploadedList.length) {\r\n this.setState({ fileUploadedList: uniqueFileUploadedList });\r\n }\r\n }\r\n \r\n if (prevState.sourcesList !== this.state.sourcesList && this.state.chatConfig.layoutMode === LayoutTypeEnum.searchBot) {\r\n this.resizeSourceContainer(this.state.sourcesList);\r\n }\r\n if ((prevState.chatConfig !== this.state.chatConfig)) {\r\n this.setChatFieldPlacement();\r\n }\r\n }\r\n \r\n\r\n\r\n /**\r\n * On startup a connection is made to the SignalR hub and event listeners is set up.\r\n */\r\n componentDidMount = () => {\r\n // SignalR connection config.\r\n const hubConnection = new SignalR.HubConnectionBuilder()\r\n .withUrl((process.env.NODE_ENV === 'development' ? Setup.apiEndpointDev : process.env.REACT_APP_TEST_BUILD ? Setup.apiEndpointTest : Setup.apiEndpointProd) +\r\n 'chat?token=' + this.state.token + '&userId=' + this.state.userId + '&chatAgentMode=' + this.state.chatAgentMode +\r\n '&clientKey=' + this.state.clientKey + '&domain=' + this.state.domain)\r\n .configureLogging(process.env.NODE_ENV === 'development' || process.env.REACT_APP_TEST_BUILD ? SignalR.LogLevel.Debug : SignalR.LogLevel.Error)\r\n .build();\r\n\r\n // Establishing connection to SignalR hub.\r\n this.setState({hubConnection}, () => {\r\n this.startChatConnection();\r\n\r\n // Event listener for when the connection is lost\r\n this.state.hubConnection.onclose((error) => {\r\n this.setState({connected: false}, () => {\r\n setTimeout(() => {\r\n this.startChatConnection();\r\n }, Setup.signalrConnectionRetryInterval);\r\n });\r\n });\r\n\r\n // Event listener for when the widget should disable retry\r\n this.state.hubConnection.on('DisableConnectionRetry', () => {\r\n this.setState({DisableConnectionRetry: true});\r\n window.parent.postMessage({'hideChatbot': true}, '*');\r\n });\r\n\r\n // Event listener for when the chat config is recieved.\r\n this.state.hubConnection.on('ChatConfig', (chatConfig, token) => {\r\n this.setState({token});\r\n\r\n if(chatConfig.layoutMode === LayoutTypeEnum.searchBot)\r\n {\r\n window.parent.postMessage({'setSearchbotToken': token}, '*');\r\n }else\r\n {\r\n window.parent.postMessage({'setChatToken': token}, '*');\r\n }\r\n\r\n\r\n\r\n hubConnection.connection.baseUrl = (process.env.NODE_ENV === 'development' ? Setup.apiEndpointDev : process.env.REACT_APP_TEST_BUILD ? Setup.apiEndpointTest : Setup.apiEndpointProd) +\r\n 'chat?token=' + token+ '&userId=' + this.state.userId + '&chatAgentMode=' + this.state.chatAgentMode +\r\n '&clientKey=' + this.state.clientKey + '&domain=' + this.state.domain;\r\n\r\n if (this.state.chatConfig) {\r\n return;\r\n }\r\n\r\n this.setState({chatConfig});\r\n\r\n let language = this.state.language;\r\n let languageParam = this.state.languageParam;\r\n\r\n // First try to read the language from query parameter.\r\n if (!language && languageParam) {\r\n //override e-gb to en - language\r\n if(languageParam.toLowerCase() == \"en-gb\")\r\n {\r\n languageParam = \"en\";\r\n }\r\n language = chatConfig.chatConfigLanguageList.find((lang) => {\r\n return lang.language.languageCode.toLowerCase() === languageParam.toLowerCase() ||\r\n lang.language.languageCodeShort.toLowerCase() === languageParam.toLowerCase() ||\r\n lang.language.countryCode.toLowerCase() === languageParam.toLowerCase() ||\r\n lang.language.name.toLowerCase() === languageParam.toLowerCase();\r\n }).language;\r\n }\r\n\r\n // If no language found, set the first language in the chat config as selected.\r\n if (!language) {\r\n language = chatConfig.chatConfigLanguageList[0].language;\r\n }\r\n\r\n this.setState({language}, () => {\r\n if(!(this.state.userId == null && this.state.chatConfig.layoutMode !== null && this.state.chatConfig.layoutMode === LayoutTypeEnum.searchBot)){\r\n this.invokeSignalRMessage(['SendChatHistory', this.state.language.id, this.state.startLoad, Setup.messageLoadCount]);\r\n }\r\n });\r\n\r\n // Inject client html, script and css\r\n const head = document.getElementsByTagName('head')[0];\r\n\r\n if (chatConfig.clientScript && this.state.userId == null) {\r\n const clientScriptElement = document.createElement('script');\r\n clientScriptElement.text = chatConfig.clientScript;\r\n\r\n head.appendChild(clientScriptElement);\r\n }\r\n\r\n if (chatConfig.clientCss) {\r\n const clientStyleElement = document.createElement('style');\r\n clientStyleElement.appendChild(document.createTextNode(chatConfig.clientCss));\r\n\r\n head.appendChild(clientStyleElement);\r\n }\r\n\r\n if (chatConfig.clientHeaderHtml) {\r\n\r\n const linkElement = document.createElement('link');\r\n linkElement.href = chatConfig.clientHeaderHtml;\r\n linkElement.rel = 'stylesheet';\r\n\r\n head.appendChild(linkElement);\r\n }\r\n\r\n if(chatConfig.soundOnMessageReceived) {\r\n var x = document.createElement(\"AUDIO\");\r\n x.id = \"audio_messagereceived\";\r\n x.src = \"/sound/\" + chatConfig.messageReceivedSound;\r\n x.preload = \"auto\";\r\n document.body.appendChild(x);\r\n }\r\n\r\n if (this.state.chatConfig && \r\n this.state.chatConfig.layoutMode !== null && \r\n this.state.chatConfig.layoutMode === LayoutTypeEnum.searchBot) {\r\n this.setSearchBot();\r\n this.setChatFieldPlacement();\r\n }\r\n else{\r\n this.setChatBot();\r\n }\r\n\r\n });\r\n\r\n // Event listener for when user or chat agent starts or stop writing\r\n this.state.hubConnection.on('SendUserIsWriting', (isChatAgent, isWriting) => {\r\n if (isChatAgent) {\r\n this.setState({botWriting: isWriting});\r\n } else {\r\n this.setState({userWriting: isWriting});\r\n }\r\n });\r\n\r\n // Event listener for when messages are recieved.\r\n this.state.hubConnection.on('Send', (chatResponse) => {\r\n if (this.state.chatbotOpenState === false) {\r\n const showNewMsgIcon = isMobile ? this.state.chatConfig.showNewMsgIconMobile : this.state.chatConfig.showNewMsgIconDesktop;\r\n\r\n if (showNewMsgIcon) {\r\n window.parent.postMessage({'showNewMsgIcon': true}, '*');\r\n }\r\n }\r\n\r\n this.setState({loadToEnd: true});\r\n this.handleChatResponse(chatResponse);\r\n });\r\n\r\n this.state.hubConnection.on('SendSource', (chatResponse) => {\r\n\r\n let uniqueTuples = [...this.state.sourcesList];\r\n /* console.log(speechBubbleList, \"HER\") */\r\n //Her skal du så hvert svar ^ lave et array eller noget, så du senere kan vise Link/Titel og et uddrag fra kilden\r\n if(chatResponse.speechBubbleList!=null && chatResponse.speechBubbleList.length> 0 ) {\r\n chatResponse.speechBubbleList.forEach((speechBubble) => {\r\n if (speechBubble.title !== \"\" && speechBubble.url !== \"\") {\r\n const exists = uniqueTuples.some(\r\n ([title, url]) => title === speechBubble.title && url === speechBubble.url\r\n );\r\n\r\n if (!exists) {\r\n uniqueTuples.push([speechBubble.messageList\r\n .map(message => this.markText(message.content))\r\n .join('\\n'),speechBubble.title, speechBubble.url]); // Add tuple to state array.\r\n }\r\n }\r\n });\r\n\r\n // Update state with unique tuples\r\n this.setState({ sourcesList: uniqueTuples });\r\n }\r\n\r\n });\r\n\r\n \r\n\r\n // Event listener when chat history is received\r\n this.state.hubConnection.on('SendChatHistory', (chatResponseListResult) => {\r\n let speechBubbleList = this.state.speechBubbleList;\r\n\r\n if(this.state.loadToEnd == false) {\r\n chatResponseListResult.item2= chatResponseListResult.item2.reverse();\r\n }\r\n\r\n chatResponseListResult.item2.forEach((chatResponse) => {\r\n if(this.state.loadToEnd == false) {\r\n chatResponse.speechBubbleList= chatResponse.speechBubbleList.reverse();\r\n }\r\n speechBubbleList = this.handleChatResponse(chatResponse, speechBubbleList);\r\n });\r\n\r\n const startLoadCalc = this.state.startLoad + chatResponseListResult.item2.length;\r\n const loadMoreCalc = startLoadCalc < chatResponseListResult.item1;\r\n\r\n this.setState({totalCount: chatResponseListResult.item1,startLoad: startLoadCalc, loadMore: loadMoreCalc});\r\n\r\n this.setState({speechBubbleList}, () => {\r\n if (this.state.requestedWelcome === false && this.state.userId == null) {\r\n if (this.state.intentId) {\r\n this.sendIntent(this.state.intentId, ChatQuestionTypeEnum.customIntent);\r\n } else {\r\n this.sendWelcome();\r\n }\r\n\r\n this.setState({requestedWelcome: true});\r\n }\r\n });\r\n\r\n });\r\n\r\n\r\n // Event listener when a user likes a message\r\n this.state.hubConnection.on('SendChatResponseFeedback', (chatQuestionId, chatResponseFeedback) => {\r\n let speechBubbleList = this.state.speechBubbleList;\r\n\r\n const speechBubbleIndex = speechBubbleList.findIndex(sb => sb.chatQuestionId === chatQuestionId);\r\n if (speechBubbleIndex !== -1) {\r\n speechBubbleList[speechBubbleIndex].chatResponseFeedback = chatResponseFeedback;\r\n\r\n this.setState({speechBubbleList});\r\n }\r\n });\r\n\r\n // Event listener for when mail is sent.\r\n this.state.hubConnection.on('SendEmail', () => {\r\n this.setState({botWriting: false});\r\n\r\n let speechBubbleList = this.state.speechBubbleList;\r\n\r\n speechBubbleList.forEach((speechBubble) => {\r\n if (speechBubble.isMailResponse) {\r\n speechBubble.hidden = false;\r\n }\r\n });\r\n\r\n this.setState({speechBubbleList});\r\n });\r\n\r\n this.state.hubConnection.on('SendTrainingPhraseList', (trainingPhraseList) => {\r\n this.setState({trainingPhraseList: trainingPhraseList });\r\n });\r\n });\r\n\r\n };\r\n\r\n toggleChatbot = () => {\r\n this.setState((prevState) => ({\r\n isChatMinimized: !prevState.isChatMinimized\r\n }));\r\n };\r\n\r\n handleMenuItemClick = (menuItem) => {\r\n\r\n const speechBubbleToDisplay = this.getMessageSpeechBubble(menuItem.displayName);\r\n\r\n this.setBotIsWriting();\r\n\r\n if(this.state.chatConfig.layoutMode !== null && this.state.chatConfig.layoutMode === LayoutTypeEnum.chatBot){\r\n this.appendSendMessage(speechBubbleToDisplay);\r\n }else {\r\n this.setState({ chatInputMessage: menuItem.displayName });\r\n }\r\n\r\n };\r\n\r\n handleResetUploadedFiles = () => {\r\n this.setState({fileUploadedList:[]})\r\n }\r\n\r\n handleAddUploadedFiles = (newFile) => {\r\n this.setState(prevState => {\r\n\r\n const fileExists = prevState.fileUploadedList.some(file => file === newFile);\r\n if (fileExists) {\r\n return null;\r\n }\r\n\r\n return {\r\n fileUploadedList: [...prevState.fileUploadedList, newFile]\r\n };\r\n });\r\n }\r\n\r\n handleDeleteUploadedFile = (fileName) => {\r\n this.setState((prevState) => {\r\n const updatedFileUploadedList = prevState.fileUploadedList.filter(file => file !== fileName);\r\n const updatedPendingFiles = prevState.pendingFiles.filter(file => !file.name.includes(fileName));\r\n\r\n return {\r\n fileUploadedList: updatedFileUploadedList,\r\n pendingFiles: updatedPendingFiles\r\n };\r\n }, () => {\r\n this.setState((prevState) => ({\r\n fileUploadedText: prevState.fileUploadedList.length > 0\r\n }));\r\n });\r\n };\r\n\r\n \r\n handleFlushDeleteUploadedFile = () => {\r\n this.setState({fileUploadedListRemove: null})\r\n if (this.state.fileUploadedList && this.state.fileUploadedList.length > 0) {\r\n this.setState({ fileUploadedText: true });\r\n } else {\r\n this.setState({ fileUploadedText: false });\r\n }\r\n }\r\n\r\n handleDeletePendingFile = (fileName) => {\r\n this.setState(prevState => ({\r\n fileUploadedList: prevState.fileUploadedList.filter(file => file !== fileName),\r\n pendingFiles: prevState.pendingFiles.filter(file => !file.name.includes(fileName)),\r\n }));\r\n };\r\n\r\n\r\n \r\n handleChatResponse = (chatResponse, speechBubbleList) => {\r\n\r\n if(chatResponse.isStream == true )\r\n {\r\n speechBubbleList = this.state.speechBubbleList;\r\n let uniqueTuples = Array.isArray(this.state.sourcesList) ? [...this.state.sourcesList] : [];\r\n/* console.log(speechBubbleList, \"HER\") */\r\n //Her skal du så hvert svar ^ lave et array eller noget, så du senere kan vise Link/Titel og et uddrag fra kilden\r\n if(speechBubbleList!=null && speechBubbleList.length> 0 ) {\r\n speechBubbleList.forEach((speechBubble) => {\r\n if (speechBubble.title !== \"\" && speechBubble.url !== \"\") {\r\n const exists = uniqueTuples.some(\r\n ([title, url]) => title === speechBubble.title && url === speechBubble.url\r\n );\r\n \r\n if (!exists) {\r\n uniqueTuples.push([speechBubble.title, speechBubble.url]); // Add tuple to state array.\r\n } \r\n }\r\n });\r\n \r\n // Update state with unique tuples\r\n this.setState({ sourcesList: uniqueTuples });\r\n \r\n\r\n const streamId = chatResponse.speechBubbleList[0].streamId;\r\n\r\n if(this.state.streamIdStopped.some((x) => x == streamId) )\r\n {\r\n return ;\r\n }\r\n\r\n if(chatResponse.speechBubbleList[0].index > 1) {\r\n\r\n let speechBubbleBuffer = this.state.speechBubbleBuffer;\r\n\r\n speechBubbleBuffer.push(chatResponse.speechBubbleList[0]);\r\n\r\n speechBubbleBuffer = speechBubbleBuffer.sort((a, b) => a.index - b.index);\r\n\r\n let lastSpeechBubble = speechBubbleList[speechBubbleList.length - 1];\r\n\r\n speechBubbleBuffer.forEach((item, index) => {\r\n\r\n lastSpeechBubble.index = (lastSpeechBubble.index == undefined || lastSpeechBubble.index == 0 ? 1 : lastSpeechBubble.index);\r\n\r\n const indexDiff = item.index - lastSpeechBubble.index;\r\n\r\n if (lastSpeechBubble && (lastSpeechBubble.isUser == undefined || lastSpeechBubble.isUser == false) && lastSpeechBubble.streamId == streamId && (indexDiff == 1) && item.isLastStream == false) {\r\n\r\n\r\n const lastSpeechBubbleMsg = lastSpeechBubble.messageList[0];\r\n const currentSpeechBubbleMsg = item.messageList[0];\r\n const speechBubbleContent = (lastSpeechBubbleMsg.contentSource ? lastSpeechBubbleMsg.contentSource : lastSpeechBubbleMsg.content) + (currentSpeechBubbleMsg.contentSource ? currentSpeechBubbleMsg.contentSource : currentSpeechBubbleMsg.content);\r\n speechBubbleList[speechBubbleList.length - 1].messageList[0].contentSource = speechBubbleContent;\r\n speechBubbleList[speechBubbleList.length - 1].messageList[0].content = this.markText(speechBubbleContent);\r\n speechBubbleList[speechBubbleList.length - 1].index = item.index;\r\n speechBubbleList[speechBubbleList.length - 1].isLastStream = item.isLastStream;\r\n speechBubbleBuffer = speechBubbleBuffer.filter(bufferItem => bufferItem.index !== item.index);\r\n\r\n }\r\n\r\n });\r\n\r\n let showStopMessage = true;\r\n\r\n if(chatResponse.speechBubbleList[0].isLastStream)\r\n {\r\n const currentSpeechBubbleContent = chatResponse.speechBubbleList[0].messageList[0].content;\r\n speechBubbleList[speechBubbleList.length - 1].messageList[0].contentSource = currentSpeechBubbleContent;\r\n speechBubbleList[speechBubbleList.length - 1].messageList[0].content = this.markText(currentSpeechBubbleContent);\r\n speechBubbleList[speechBubbleList.length - 1].isLastStream = true;\r\n\r\n let streamIdStopped = this.state.streamIdStopped;\r\n\r\n streamIdStopped.push(chatResponse.speechBubbleList[0].streamId);\r\n\r\n showStopMessage = false;\r\n\r\n this.setState({streamIdStopped});\r\n }\r\n\r\n var botWritingStream = speechBubbleList[speechBubbleList.length - 1].isLastStream || speechBubbleList[speechBubbleList.length - 1].messageList[0].contentSource == undefined ? false: true\r\n\r\n this.setState({\r\n speechBubbleList: speechBubbleList,\r\n speechBubbleBuffer: speechBubbleBuffer,\r\n lastStreamId: streamId,\r\n showStopMessage,\r\n botWriting: this.state.chatConfig.layoutMode === LayoutTypeEnum.searchBot ? false: botWritingStream\r\n });\r\n\r\n return;\r\n }\r\n\r\n\r\n }\r\n\r\n }\r\n\r\n let delay = 0;\r\n\r\n const lastNonSuggestionSpeechBubbleIndex = chatResponse.speechBubbleList.map((speechBubble) => {\r\n return speechBubble.suggestion;\r\n }).lastIndexOf(null);\r\n\r\n //Id used in internal sorting for search bot layout\r\n const chatResponseDropId = uuidv4();\r\n\r\n chatResponse.speechBubbleList.forEach((speechBubble, i, array) => {\r\n // If any delay on speechbubble a 'is writing animation' speechbubble is shown.\r\n\r\n if (speechBubble.delay) {\r\n delay += speechBubble.delay;\r\n let botWriting = true;\r\n this.setState({botWriting});\r\n }\r\n\r\n if(this.state.loadToEnd == false)\r\n {\r\n if (speechBubble.suggestion) {\r\n speechBubble.hidden = true;\r\n }\r\n }\r\n\r\n speechBubble.dropId = chatResponseDropId;\r\n speechBubble.chatResponseId = chatResponse.id;\r\n speechBubble.integrationType = chatResponse.integrationType;\r\n\r\n speechBubble.index = i;\r\n\r\n if (!(this.state.chatConfig && \r\n this.state.chatConfig.layoutMode !== null &&\r\n this.state.chatConfig.layoutMode === LayoutTypeEnum.searchBot)) {\r\n speechBubble.dateTimeUtc = chatResponse.dateTimeUtc;\r\n }\r\n\r\n\r\n // Sets if chat rating buttons should be shown.\r\n if (chatResponse.chatQuestionId &&\r\n speechBubble.index === lastNonSuggestionSpeechBubbleIndex &&\r\n !speechBubble.isUser &&\r\n speechBubble.lineBreakType !== LineBreakTypeEnum.carousel) {\r\n\r\n speechBubble.chatQuestionId = chatResponse.chatQuestionId;\r\n speechBubble.chatResponseFeedback = chatResponse.chatResponseFeedback;\r\n }\r\n\r\n if (speechBubble.index > 0) {\r\n speechBubble.index -= array.some(speechBubble => speechBubble.isUser) ? 1 : 0;\r\n }\r\n\r\n // Disables suggestions if in spectatormode.\r\n if (speechBubble.suggestion && this.state.userId) {\r\n speechBubble.disabled = true;\r\n }\r\n\r\n\r\n if (speechBubble.isGpt) {\r\n speechBubble.messageList = speechBubble.messageList.map(message => {\r\n return { ...message, content: this.markText(message.content) };\r\n });\r\n }\r\n\r\n\r\n // If state should be updated.\r\n if (speechBubbleList) {\r\n if(this.state.loadToEnd) {\r\n speechBubbleList.push(speechBubble);\r\n } else\r\n {\r\n if(speechBubbleList.find(x=>x.chatQuestionId ==speechBubble.chatQuestionId) == undefined|| speechBubble.id=='00000000-0000-0000-0000-000000000000' || speechBubble.chatQuestionId == null) {\r\n speechBubbleList.unshift(speechBubble);\r\n }\r\n }\r\n } else {\r\n // Sets delay on when to show the speechbubble.\r\n setTimeout(() => {\r\n speechBubbleList = this.state.speechBubbleList;\r\n\r\n // Hide suggestions if user speechbubble is recieved.\r\n if (speechBubble.isUser || this.state.loadToEnd == false) {\r\n speechBubbleList.forEach((sb) => {\r\n if (sb.suggestion) {\r\n sb.hidden = true;\r\n }\r\n });\r\n }\r\n\r\n if(this.state.loadToEnd) {\r\n speechBubbleList.push(speechBubble);\r\n }else\r\n {\r\n if(speechBubbleList.find(x=>x.chatQuestionId ==speechBubble.chatQuestionId) == undefined|| speechBubble.id=='00000000-0000-0000-0000-000000000000' || speechBubble.chatQuestionId == null) {\r\n speechBubbleList.unshift(speechBubble);\r\n }\r\n }\r\n\r\n this.setState({speechBubbleList});\r\n\r\n if (i === array.length - 1 ) {\r\n let botWriting = false;\r\n this.setState({botWriting});\r\n }\r\n\r\n }, delay);\r\n\r\n if(this.state.chatConfig.soundOnMessageReceived && chatResponse.speechBubbleList && chatResponse.speechBubbleList[0] && chatResponse.speechBubbleList[0].avatarName) {\r\n setTimeout(() => {\r\n console.log(\"Play sound: Chat message received (delay = \" + speechBubble.delay + \")\");\r\n this.playReceivedMessageSound();\r\n }, speechBubble.delay);\r\n }\r\n\r\n // Open chatbot if message is recieved from chat agent.\r\n if (!this.state.userId && chatResponse && chatResponse.intentId === null) {\r\n window.parent.postMessage({'openChatbot': true}, '*');\r\n }\r\n }\r\n });\r\n\r\n\r\n\r\n // close chatbot , action close\r\n if (!this.state.userId && chatResponse && chatResponse.closeChatbot) {\r\n window.parent.postMessage({'closeChatbot': true}, '*');\r\n }\r\n\r\n\r\n if (this.state.chatConfig && \r\n this.state.chatConfig.layoutMode !== null &&\r\n this.state.chatConfig.layoutMode === LayoutTypeEnum.searchBot) {\r\n\r\n if (speechBubbleList && speechBubbleList.length > 0 ) {\r\n // Check WithMemory flag to determine whether to keep all speech bubbles or just the last one\r\n if (!this.state.chatConfig.withMemory) {\r\n speechBubbleList = [speechBubbleList[speechBubbleList.length - 1]];\r\n }\r\n\r\n this.setState({ speechBubbleList });\r\n }\r\n }\r\n\r\n return speechBubbleList;\r\n };\r\n\r\n playReceivedMessageSound = () => {\r\n var audio = document.getElementById(\"audio_messagereceived\");\r\n audio.play();\r\n }\r\n\r\n startChatConnection = () => {\r\n if (this.state.disableConnectionRetry) {\r\n return;\r\n }\r\n\r\n this.state.hubConnection.start()\r\n .then(() => {\r\n this.setState({connected: true});\r\n this.setState({showConnectionLostMsg: false})\r\n }).catch(() => {\r\n setTimeout(() => {\r\n this.startChatConnection();\r\n }, Setup.signalrConnectionRetryInterval);\r\n });\r\n };\r\n\r\n\r\n getMessageSpeechBubble = (message) => {\r\n return {\r\n isUser: true,\r\n messageList: [\r\n {\r\n messageType: MessageType.text,\r\n content: message,\r\n }\r\n ]\r\n };\r\n };\r\n\r\n //\r\n updateStateOfPlaceholder=()=>{\r\nthis.setState({fileUploadedText:false});\r\n }\r\n getFileMessageSpeechBubble = (filename, url) => {\r\n return {\r\n isUser: true,\r\n displayBackground: false,\r\n messageList: [\r\n {\r\n messageType: MessageType.file,\r\n filename:filename,\r\n url: url,\r\n lineBreak: 1\r\n }\r\n ]\r\n };\r\n };\r\n\r\n sendWelcome = () => {\r\n this.invokeSignalRMessage(['SendWelcome', this.state.language.languageCode, this.state.forceWelcomeMessage]);\r\n this.setState({forceWelcomeMessage: false});\r\n };\r\n\r\n sendUserIsWriting = (isWriting) => {\r\n this.invokeSignalRMessage(['SendUserIsWriting', isWriting]);\r\n };\r\n\r\n appendSendMessage = (speechBubble) => {\r\n\r\n this.setState({loadToEnd:true});\r\n\r\n let speechBubbleList = this.state.speechBubbleList;\r\n\r\n if(this.state.lastStreamId!=null)\r\n {\r\n let streamIdStopped = this.state.streamIdStopped\r\n\r\n streamIdStopped.push(this.state.lastStreamId);\r\n\r\n this.setState({streamIdStopped});\r\n }\r\n\r\n // Hides suggestions\r\n speechBubbleList.forEach((speechBubble) => {\r\n if (speechBubble.suggestion) {\r\n speechBubble.hidden = true;\r\n }\r\n });\r\n\r\n // Shows a message to the user that looks like they sent it.\r\n if (speechBubble && !(this.state.chatConfig.layoutMode !== null && this.state.chatConfig.layoutMode === LayoutTypeEnum.searchBot && this.state.chatConfig.withMemory === false)) {\r\n speechBubble.lineBreakType = LineBreakTypeEnum.newLine;\r\n if (this.state.chatAgentMode === true) {\r\n if (!speechBubbleList.some(msg => msg.content === speechBubble.content)) {\r\n speechBubbleList.push(speechBubble); \r\n }\r\n } else {\r\n speechBubbleList.push(speechBubble); \r\n }\r\n }\r\n\r\n this.setState({speechBubbleList});\r\n };\r\n\r\n stopMessage = () => {\r\n\r\n let streamIdStopped = this.state.streamIdStopped;\r\n\r\n if (!streamIdStopped.includes(this.state.lastStreamId)) {\r\n streamIdStopped.push(this.state.lastStreamId);\r\n this.setState({ streamIdStopped, botWriting: false });\r\n }\r\n \r\n this.setState({ showStopMessage: false });\r\n\r\n }\r\n\r\n setBotIsWriting = () => {\r\n this.setState({ botWriting: true });\r\n }\r\n\r\n handleAddPendingFiles = (newFile) => {\r\n this.setState(prevState => {\r\n const updatedPendingFiles = prevState.pendingFiles.filter(file => file.name !== newFile.name);\r\n return {\r\n pendingFiles: [...updatedPendingFiles, newFile]\r\n };\r\n });\r\n }\r\n\r\n\r\n flushPendingFiles = () => {\r\n this.setState({pendingFiles: []})\r\n }\r\n\r\n sendFiles = () => {\r\n const { pendingFiles } = this.state;\r\n\r\n\r\n // Convert each file upload to a Promise\r\n const uploadPromises = pendingFiles.map((file) => {\r\n return new Promise((resolve, reject) => {\r\n this.uploadFileComplete(file, this.props.match.params.token, (error) => {\r\n if (error) {\r\n console.error(`Error uploading file ${file.name}:`, error);\r\n reject(error);\r\n } else {\r\n resolve();\r\n }\r\n });\r\n });\r\n });\r\n\r\n return Promise.all(uploadPromises)\r\n .then(() => {\r\n this.setState({ pendingFiles: [], fileUploading: false });\r\n this.handleResetUploadedFiles();\r\n })\r\n .catch((error) => {\r\n console.error(\"Error in file uploads:\", error);\r\n this.setState({ fileUploading: false });\r\n });\r\n };\r\n\r\n /**\r\n * Gets called when a message is sent from the webclient.\r\n */\r\n \r\n sendMessage = async (message, messageToDisplay, urls) => {\r\n if (this.state.connected === false) {\r\n this.setState({ showConnectionLostMsg: true });\r\n this.flushTrainingPhraseList();\r\n return false;\r\n }\r\n\r\n if(this.state.chatConfig.layoutMode === LayoutTypeEnum.searchBot){\r\n this.resizeContainerSend([]);\r\n }\r\n\r\n // Call resetChatMenuItems before sending the message\r\n if (this.searchBotFieldRef.current) {\r\n this.searchBotFieldRef.current.resetChatMenuItems();\r\n }\r\n\r\n try {\r\n\r\n this.setBotIsWriting();\r\n\r\n // Existing sendMessage logic\r\n const speechBubbleToDisplay = urls\r\n ? this.getFileMessageSpeechBubble(messageToDisplay, urls)\r\n : this.getMessageSpeechBubble(messageToDisplay);\r\n\r\n if(this.state.chatConfig.layoutMode === LayoutTypeEnum.chatBot || this.state.chatConfig.withMemory){\r\n this.appendSendMessage(speechBubbleToDisplay);\r\n }\r\n\r\n // Wait for pending files to be uploaded before proceeding\r\n await this.sendFiles();\r\n\r\n\r\n this.invokeSignalRMessage([\r\n 'Send',\r\n message,\r\n this.state.language.languageCode,\r\n this.state.pendingFileUrls,\r\n this.state.lastStreamId\r\n ]);\r\n this.openChatContainer();\r\n this.setState({ sourcesList: [] });\r\n this.setState({ pendingFileUrls: [] });\r\n\r\n return true;\r\n } catch (error) {\r\n console.error('Error uploading files:', error);\r\n return false;\r\n }\r\n };\r\n\r\n\r\n sendIntent = (intentId, chatQuestionType, messageToDisplay, speechBubble, hideSuggestions, chatMenuItemId) => {\r\n if (this.state.connected === false) {\r\n this.setState({showConnectionLostMsg: true});\r\n return;\r\n }\r\n\r\n this.setState({loadToEnd: true});\r\n\r\n let speechBubbleToDisplay;\r\n\r\n // Clone speechbubble and show as the user send it.\r\n if (speechBubble) {\r\n speechBubbleToDisplay = JSON.parse(JSON.stringify(speechBubble));\r\n speechBubbleToDisplay.isUser = true;\r\n speechBubbleToDisplay.index = 0;\r\n speechBubbleToDisplay.chatResponseId = null;\r\n speechBubbleToDisplay.suggestion = null;\r\n } else if (messageToDisplay) {\r\n speechBubbleToDisplay = this.getMessageSpeechBubble(messageToDisplay);\r\n }\r\n\r\n this.appendSendMessage(speechBubbleToDisplay);\r\n\r\n // Sends either id of suggestion or chat menu item clicked or null.\r\n let key = null;\r\n if (chatQuestionType === ChatQuestionTypeEnum.suggestion) {\r\n key = speechBubble.suggestion.id;\r\n } else if (chatQuestionType === ChatQuestionTypeEnum.menuItem) {\r\n key = chatMenuItemId;\r\n }\r\n\r\n this.invokeSignalRMessage(['SendIntent', intentId, this.state.language.languageCode, chatQuestionType, key, speechBubbleToDisplay]);\r\n };\r\n\r\n sendChatAgentIntent = (intentId) => {\r\n if (this.state.connected === false) {\r\n this.setState({showConnectionLostMsg: true});\r\n return false;\r\n }\r\n this.invokeSignalRMessage(['SendIntent', intentId, this.state.language.languageCode, ChatQuestionTypeEnum.customIntent, null, null]);\r\n return true;\r\n };\r\n\r\n sendChatResponseFeedback = (chatQuestionId, chatResponseFeedback) => {\r\n if (this.state.connected === false) {\r\n this.setState({showConnectionLostMsg: true});\r\n return;\r\n }\r\n\r\n let speechBubbleList = this.state.speechBubbleList;\r\n let speechBubble = speechBubbleList.find((sb => {\r\n return sb.chatQuestionId === chatQuestionId;\r\n }));\r\n\r\n if (speechBubble) {\r\n speechBubble.chatResponseFeedback = chatResponseFeedback === ChatResponseFeedbackEnum.notSet ? null : chatResponseFeedback;\r\n }\r\n\r\n this.setState({speechBubbleList}, () => {\r\n this.invokeSignalRMessage(['SendChatResponseFeedback', chatQuestionId, chatResponseFeedback]);\r\n });\r\n };\r\n\r\n languageSelected = (countryCode) => {\r\n if (this.state.connected === false) {\r\n this.setState({showConnectionLostMsg: true});\r\n return false;\r\n }\r\n\r\n const language = this.state.chatConfig.chatConfigLanguageList.map(ccl => ccl.language).find((lang) => {\r\n return lang.countryCode === countryCode;\r\n });\r\n\r\n window.parent.postMessage({'languageSelected': language.languageCode}, '*');\r\n\r\n this.setState({language, requestedWelcome: false, forceWelcomeMessage: true, speechBubbleList: [], startLoad: 0, trainingPhraseSuggestionList: []}, () => {\r\n this.invokeSignalRMessage(['SendChatHistory', this.state.language.id , this.state.startLoad, Setup.messageLoadCount]);\r\n });\r\n\r\n return true;\r\n };\r\n\r\n clearSpeechBubble = () => {\r\n\r\n this.setState({speechBubbleList: [], sourcesList:[]})\r\n }\r\n getTrainingPhraseList = (searchText) => {\r\n if (this.state.connected === false) {\r\n this.setState({showConnectionLostMsg: true});\r\n return;\r\n }\r\n this.invokeSignalRMessage(['GetTrainingPhraseList', searchText, this.state.language.languageCode]);\r\n };\r\n\r\n getChatResponse = (intentId) => {\r\n if (this.state.connected === false) {\r\n this.setState({showConnectionLostMsg: true});\r\n return;\r\n }\r\n\r\n return this.invokeSignalRMessage(['GetChatResponse', intentId, this.state.language.languageCode]);\r\n };\r\n\r\n uploadFileComplete(file, token, callback) {\r\n \r\n return axios\r\n .post((process.env.NODE_ENV === 'development' ? Setup.apiEndpointDev : process.env.REACT_APP_TEST_BUILD ? Setup.apiEndpointTest : Setup.apiEndpointProd) + 'storage/upload/clientKey/' + this.state.clientKey , {file})\r\n .then(response => {\r\n this.sendUserIsWriting(false);\r\n this.setState(this.state.chatAgentMode ? {botWriting: false} : {userWriting: false});\r\n /* this.sendMessage(file.name, file.name, response.data) */\r\n\r\n this.setState((prevState) => ({\r\n pendingFileUrls: [...(prevState.pendingFileUrls || []), response.data], // Initialize if undefined\r\n }));\r\n\r\n callback();\r\n })\r\n .catch(error => {\r\n this.setSnackbarErrorMessage(Localization[getLocalizationLanguageCode(this.state.language ? this.state.language.languageCode : null)]['chatInput.chatAttachment.uploadFileError']);\r\n this.sendUserIsWriting(false);\r\n this.setState(this.state.chatAgentMode ? {botWriting: false} : {userWriting: false});\r\n callback();\r\n })\r\n }\r\n\r\n toggleShowInfoPage = () => {\r\n this.setState({showInfoPage: !this.state.showInfoPage});\r\n };\r\n\r\n closeChatbot = () => {\r\n\r\n this.setState({isMaximized: false});\r\n window.parent.postMessage({'closeChatbot': true}, '*');\r\n\r\n };\r\n\r\n openChatContainer = () => {\r\n window.parent.postMessage({'openChatContainer': true}, '*');\r\n };\r\n\r\n resizeChatContainer = (entries) => {\r\n window.parent.postMessage({'resizeChatContainer': entries}, '*');\r\n }\r\n\r\n setSearchBot = () => {\r\n window.parent.postMessage({'setSearchBot' : true}, '*')\r\n }\r\n\r\n setChatFieldPlacement = () => {\r\n window.parent.postMessage({ setChatFieldPlacement: this.state.chatConfig.openDownwards }, '*');\r\n if (this.state.chatConfig.openDownwards) {\r\n const searchBotLayoutElem = document.getElementById('search-bot-layout');\r\n if (searchBotLayoutElem) {\r\n // Remove any inline bottom and force top: 0\r\n searchBotLayoutElem.style.setProperty('bottom', 'auto', 'important');\r\n searchBotLayoutElem.style.setProperty('top', '0', 'important');\r\n }\r\n }\r\n };\r\n\r\n setChatBot = () => {\r\n window.parent.postMessage({'setChatBot' : true}, '*')\r\n }\r\n\r\n toggleMaxiChatbot = () => {\r\n window.parent.postMessage({'toggleMaxiChatbot': true}, '*');\r\n\r\n this.setState({isMaximized: !this.state.isMaximized});\r\n };\r\n\r\n resizeSourceContainer = (entries) => {\r\n const length = entries.length\r\n window.parent.postMessage({'resizeSourceContainer': length}, '*')\r\n }\r\n\r\n resizeContainerSend = (entries) => {\r\n const length = entries.length\r\n window.parent.postMessage({'resizeContainerSend': length}, '*')\r\n }\r\n\r\n setSnackbarErrorMessage = (errorMessage) => {\r\n this.setState({snackbarErrorMessage: errorMessage});\r\n };\r\n\r\n reEnableMostAskedQuestions = () => {\r\n window.parent.postMessage({'resetSearchBotWindow': true}, '*');\r\n if (this.searchBotFieldRef && this.searchBotFieldRef.current) {\r\n this.searchBotFieldRef.current.initializeChatMenuItems(true);\r\n }\r\n };\r\n\r\n disableMostAskedQuestions = () => {\r\n window.parent.postMessage({'resetSearchBotWindow': false}, '*');\r\n if (this.searchBotFieldRef && this.searchBotFieldRef.current) {\r\n this.searchBotFieldRef.current.initializeChatMenuItems(false);\r\n }\r\n };\r\n\r\n handleRootClick = () => {\r\n if (this.state.hadFirstClick === false) {\r\n\r\n if (this.state.welcomePreviewEnabled) {\r\n window.parent.postMessage({'disableWelcomePreview': true}, '*');\r\n this.setState({welcomePreviewEnabled: false});\r\n }\r\n\r\n this.setState({hadFirstClick: true});\r\n }\r\n };\r\n\r\n flushTrainingPhraseList = () => {\r\n this.setState({trainingPhraseList: []})\r\n }\r\n\r\n render() {\r\n\r\n const chatFieldSpectatorStyle = {\r\n width: '100%',\r\n maxWidth: '100%'\r\n };\r\n\r\n return (\r\n