@botonic/react 0.31.0-alpha.3 → 0.31.0-alpha.5

package/src/webchat/webchat-typed/webchat-typed.tsx

@@ -1,728 +0,0 @@
-// import {
-//   BotonicAction,
-//   INPUT,
-//   isMobile,
-//   params2queryString,
-// } from '@botonic/core'
-// import merge from 'lodash.merge'
-// import React, {
-//   forwardRef,
-//   useEffect,
-//   useImperativeHandle,
-//   useRef,
-//   useState,
-// } from 'react'
-// import { StyleSheetManager } from 'styled-components'
-// import { v7 as uuidv7 } from 'uuid'
-
-// import { Audio, Document, Image, Text, Video } from '../../components'
-// import { Handoff } from '../../components/handoff'
-// import { normalizeWebchatSettings } from '../../components/webchat-settings'
-// import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../../constants'
-// import { WebchatContext, WebviewRequestContext } from '../../contexts'
-// import { SENDERS } from '../../index-types'
-// import {
-//   getMediaType,
-//   isAllowedSize,
-//   isAudio,
-//   isDocument,
-//   isImage,
-//   isMedia,
-//   isText,
-//   isVideo,
-//   readDataURL,
-// } from '../../message-utils'
-// import { msgToBotonic } from '../../msg-to-botonic'
-// import { isDev } from '../../util/environment'
-// import { deserializeRegex, stringifyWithRegexs } from '../../util/regexs'
-// import {
-//   _getThemeProperty,
-//   getServerErrorMessage,
-//   initSession,
-//   shouldKeepSessionOnReload,
-// } from '../../util/webchat'
-// import { ChatArea } from '../chat-area'
-// import { OpenedPersistentMenu } from '../components/opened-persistent-menu'
-// import { BotonicContainerId } from '../constants'
-// import { CoverComponent } from '../cover-component'
-// import { WebchatHeader } from '../header'
-// import {
-//   useComponentWillMount,
-//   usePrevious,
-//   useScrollToBottom,
-//   useTyping,
-//   useWebchat,
-// } from '../hooks'
-// import { InputPanel } from '../input-panel'
-// import { TriggerButton } from '../trigger-button'
-// import { useStorageState } from '../use-storage-state-hook'
-// import { getParsedAction } from '../utils'
-// import { WebviewContainer } from '../webview'
-// import {
-//   DarkBackgroundMenu,
-//   ErrorMessage,
-//   ErrorMessageContainer,
-//   StyledWebchat,
-// } from './styles'
-
-// // eslint-disable-next-line complexity, react/display-name
-// export const WebchatTyped = forwardRef((props: WebchatTypeProps, ref) => {
-//   const {
-//     addMessage,
-//     addMessageComponent,
-//     clearMessages,
-//     doRenderCustomComponent,
-//     openWebviewT,
-//     resetUnreadMessages,
-//     setCurrentAttachment,
-//     setError,
-//     setLastMessageVisible,
-//     setOnline,
-//     toggleCoverComponent,
-//     toggleEmojiPicker,
-//     togglePersistentMenu,
-//     toggleWebchat,
-//     updateDevSettings,
-//     updateHandoff,
-//     updateLastMessageDate,
-//     updateLastRoutePath,
-//     updateLatestInput,
-//     updateMessage,
-//     updateReplies,
-//     updateSession,
-//     updateTheme,
-//     updateTyping,
-//     updateWebview,
-//     webchatState,
-//     webchatRef,
-//     chatAreaRef,
-//     inputPanelRef,
-//     headerRef,
-//     scrollableMessagesListRef,
-
-//     // eslint-disable-next-line react-hooks/rules-of-hooks
-//   } = props.webchatHooks || useWebchat()
-//   const firstUpdate = useRef(true)
-//   const isOnline = () => webchatState.online
-//   const currentDateString = () => new Date().toISOString()
-//   const theme = merge(webchatState.theme, props.theme)
-//   const { initialSession, initialDevSettings, onStateChange } = props
-//   const getThemeProperty = _getThemeProperty(theme)
-
-//   const [customComponent, setCustomComponent] = useState(null)
-//   const storage = props.storage
-//   const storageKey =
-//     typeof props.storageKey === 'function'
-//       ? props.storageKey()
-//       : props.storageKey
-
-//   const [botonicState, saveState] = useStorageState(storage, storageKey)
-
-//   const host = props.host || document.body
-
-//   const { scrollToBottom } = useScrollToBottom({ host })
-
-//   const saveWebchatState = webchatState => {
-//     storage &&
-//       saveState(
-//         JSON.parse(
-//           stringifyWithRegexs({
-//             messages: webchatState.messagesJSON,
-//             session: webchatState.session,
-//             lastRoutePath: webchatState.lastRoutePath,
-//             devSettings: webchatState.devSettings,
-//             lastMessageUpdate: webchatState.lastMessageUpdate,
-//             themeUpdates: webchatState.themeUpdates,
-//           })
-//         )
-//       )
-//   }
-
-//   const handleAttachment = event => {
-//     if (!isAllowedSize(event.target.files[0].size)) {
-//       throw new Error(
-//         `The file is too large. A maximum of ${MAX_ALLOWED_SIZE_MB}MB is allowed.`
-//       )
-//     }
-//     setCurrentAttachment({
-//       fileName: event.target.files[0].name,
-//       file: event.target.files[0], // TODO: Attach more files?
-//       attachmentType: getMediaType(event.target.files[0].type),
-//     })
-//   }
-
-//   useEffect(() => {
-//     if (webchatState.currentAttachment)
-//       sendAttachment(webchatState.currentAttachment)
-//   }, [webchatState.currentAttachment])
-
-//   const sendUserInput = async input => {
-//     if (props.onUserInput) {
-//       resetUnreadMessages()
-//       scrollToBottom()
-//       props.onUserInput({
-//         user: webchatState.session.user,
-//         input: input,
-//         session: webchatState.session,
-//         lastRoutePath: webchatState.lastRoutePath,
-//       })
-//     }
-//   }
-
-//   // Load styles stored in window._botonicInsertStyles by Webpack
-//   useComponentWillMount(() => {
-//     if (window._botonicInsertStyles && window._botonicInsertStyles.length) {
-//       for (const botonicStyle of window._botonicInsertStyles) {
-//         // Injecting styles at head is needed even if we use shadowDOM
-//         // as some dependencies like simplebar rely on creating ephemeral elements
-//         // on document.body and assume styles will be available globally
-//         document.head.appendChild(botonicStyle)
-
-//         // injecting styles in host node too so that shadowDOM works
-//         if (props.shadowDOM) host.appendChild(botonicStyle.cloneNode(true))
-//       }
-//       delete window._botonicInsertStyles
-//     }
-
-//     if (props.shadowDOM) {
-//       // emoji-picker-react injects styles in head, so we need to
-//       // re-inject them in our host node to make it work with shadowDOM
-//       for (const style of document.querySelectorAll('style')) {
-//         if (
-//           style.textContent &&
-//           style.textContent.includes('emoji-picker-react')
-//         )
-//           host.appendChild(style.cloneNode(true))
-//       }
-//     }
-//   })
-
-//   // Load initial state from storage
-//   useEffect(() => {
-//     let {
-//       messages,
-//       session,
-//       lastRoutePath,
-//       devSettings,
-//       lastMessageUpdate,
-//       themeUpdates,
-//     } = botonicState || {}
-//     session = initSession(session)
-//     updateSession(session)
-//     if (shouldKeepSessionOnReload({ initialDevSettings, devSettings })) {
-//       if (messages) {
-//         messages.forEach(message => {
-//           addMessage(message)
-//           const newMessageComponent = msgToBotonic(
-//             { ...message, delay: 0, typing: 0 },
-//             (props.theme.message && props.theme.message.customTypes) ||
-//               props.theme.customMessageTypes
-//           )
-//           if (newMessageComponent) addMessageComponent(newMessageComponent)
-//         })
-//       }
-//       if (initialSession) updateSession(merge(initialSession, session))
-//       if (lastRoutePath) updateLastRoutePath(lastRoutePath)
-//     } else updateSession(merge(initialSession, session))
-//     if (devSettings) updateDevSettings(devSettings)
-//     else if (initialDevSettings) updateDevSettings(initialDevSettings)
-//     if (lastMessageUpdate) updateLastMessageDate(lastMessageUpdate)
-//     if (themeUpdates !== undefined)
-//       updateTheme(merge(props.theme, themeUpdates), themeUpdates)
-//     if (props.onInit) setTimeout(() => props.onInit(), 100)
-//   }, [])
-
-//   useEffect(() => {
-//     if (!webchatState.isWebchatOpen) {
-//       if (webchatState.isLastMessageVisible) {
-//         resetUnreadMessages()
-//       }
-//       return
-//     }
-//   }, [webchatState.isWebchatOpen])
-
-//   useEffect(() => {
-//     if (onStateChange && typeof onStateChange === 'function') {
-//       onStateChange(webchatState)
-//     }
-//     saveWebchatState(webchatState)
-//   }, [
-//     webchatState.messagesJSON,
-//     webchatState.session,
-//     webchatState.lastRoutePath,
-//     webchatState.devSettings,
-//     webchatState.lastMessageUpdate,
-//   ])
-
-//   useEffect(() => {
-//     if (!webchatState.online) {
-//       setError({
-//         message: getServerErrorMessage(props.server),
-//       })
-//     } else {
-//       if (!firstUpdate.current) {
-//         setError(undefined)
-//       }
-//     }
-//   }, [webchatState.online])
-
-//   useTyping({ webchatState, updateTyping, updateMessage, host })
-
-//   useEffect(() => {
-//     updateTheme(merge(props.theme, theme, webchatState.themeUpdates))
-//   }, [props.theme, webchatState.themeUpdates])
-
-//   const openWebview = (webviewComponent, params) => {
-//     updateWebview(webviewComponent, params)
-//   }
-
-//   const textareaRef = useRef(null)
-
-//   const closeWebview = async options => {
-//     updateWebview()
-//     if (userInputEnabled) {
-//       textareaRef.current.focus()
-//     }
-//     if (options?.payload) {
-//       await sendPayload(options.payload)
-//     } else if (options?.path) {
-//       const params = options.params ? params2queryString(options.params) : ''
-//       await sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`)
-//     }
-//   }
-
-//   const persistentMenuOptions = getThemeProperty(
-//     WEBCHAT.CUSTOM_PROPERTIES.persistentMenu,
-//     props.persistentMenu
-//   )
-
-//   const darkBackgroundMenu = getThemeProperty(
-//     WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu
-//   )
-
-//   const getBlockInputs = (rule, inputData) => {
-//     const processedInput = rule.preprocess
-//       ? rule.preprocess(inputData)
-//       : inputData
-
-//     return rule.match.some(regex => {
-//       if (typeof regex === 'string') regex = deserializeRegex(regex)
-//       return regex.test(processedInput)
-//     })
-//   }
-
-//   const checkBlockInput = input => {
-//     // if is a text we check if it is a serialized RE
-//     const blockInputs = getThemeProperty(
-//       WEBCHAT.CUSTOM_PROPERTIES.blockInputs,
-//       props.blockInputs
-//     )
-//     if (!Array.isArray(blockInputs)) return false
-//     for (const rule of blockInputs) {
-//       if (getBlockInputs(rule, input.data)) {
-//         addMessageComponent(
-//           <Text
-//             sentBy={SENDERS.user}
-//             blob={false}
-//             style={{
-//               backgroundColor: COLORS.SCORPION_GRAY,
-//               borderColor: COLORS.SCORPION_GRAY,
-//               padding: '8px 12px',
-//             }}
-//           >
-//             {rule.message}
-//           </Text>
-//         )
-//         updateReplies(false)
-//         return true
-//       }
-//     }
-//     return false
-//   }
-
-//   const closeMenu = () => {
-//     togglePersistentMenu(false)
-//   }
-
-//   const persistentMenu = () => {
-//     return (
-//       <OpenedPersistentMenu
-//         onClick={closeMenu}
-//         options={persistentMenuOptions}
-//         borderRadius={webchatState.theme.style.borderRadius || '10px'}
-//       />
-//     )
-//   }
-
-//   const getCoverComponent = () => {
-//     return getThemeProperty(
-//       WEBCHAT.CUSTOM_PROPERTIES.coverComponent,
-//       props.coverComponent &&
-//         (props.coverComponent.component || props.coverComponent)
-//     )
-//   }
-//   const coverComponent = getCoverComponent()
-//   const coverComponentProps = props.coverComponent?.props
-
-//   useEffect(() => {
-//     if (!coverComponent) return
-//     if (
-//       !botonicState ||
-//       (botonicState.messages && botonicState.messages.length === 0)
-//     )
-//       toggleCoverComponent(true)
-//   }, [])
-
-//   const messageComponentFromInput = input => {
-//     let messageComponent: any = null
-//     if (isText(input)) {
-//       messageComponent = <Text sentBy={SENDERS.user}>{input.data}</Text>
-//     } else if (isMedia(input)) {
-//       const temporaryDisplayUrl = URL.createObjectURL(input.data)
-//       const mediaProps = {
-//         id: input.id,
-//         sentBy: SENDERS.user,
-//         src: temporaryDisplayUrl,
-//       }
-//       if (isImage(input)) {
-//         mediaProps.input = input
-//         messageComponent = <Image {...mediaProps} />
-//       } else if (isAudio(input)) messageComponent = <Audio {...mediaProps} />
-//       else if (isVideo(input)) messageComponent = <Video {...mediaProps} />
-//       else if (isDocument(input))
-//         messageComponent = <Document {...mediaProps} />
-//     }
-//     return messageComponent
-//   }
-
-//   const sendInput = async input => {
-//     if (!input || Object.keys(input).length == 0) return
-//     if (isText(input) && (!input.data || !input.data.trim())) return // in case trim() doesn't work in a browser we can use !/\S/.test(input.data)
-//     if (isText(input) && checkBlockInput(input)) return
-//     if (!input.id) input.id = uuidv7()
-//     const messageComponent = messageComponentFromInput(input)
-//     if (messageComponent) addMessageComponent(messageComponent)
-//     if (isMedia(input)) input.data = await readDataURL(input.data)
-//     sendUserInput(input)
-//     updateLatestInput(input)
-//     isOnline() && updateLastMessageDate(currentDateString())
-//     updateReplies(false)
-//     togglePersistentMenu(false)
-//     toggleEmojiPicker(false)
-//   }
-
-//   /* This is the public API this component exposes to its parents
-//   https://stackoverflow.com/questions/37949981/call-child-method-from-parent
-//   */
-
-//   const updateSessionWithUser = userToUpdate =>
-//     updateSession(merge(webchatState.session, { user: userToUpdate }))
-
-//   useImperativeHandle(ref, () => ({
-//     addBotResponse: ({ response, session, lastRoutePath }) => {
-//       updateTyping(false)
-
-//       const isUnread =
-//         !webchatState.isLastMessageVisible || webchatState.numUnreadMessages > 0
-
-//       if (Array.isArray(response)) {
-//         response.forEach(r => {
-//           addMessageComponent({ ...r, props: { ...r.props, isUnread } })
-//         })
-//       } else if (response) {
-//         addMessageComponent({
-//           ...response,
-//           props: { ...response.props, isUnread },
-//         })
-//       }
-
-//       if (session) {
-//         updateSession(merge(session, { user: webchatState.session.user }))
-//         const action = session._botonic_action || ''
-//         const handoff = action.startsWith(BotonicAction.CreateCase)
-//         if (handoff && isDev) addMessageComponent(<Handoff />)
-//         updateHandoff(handoff)
-//       }
-
-//       if (lastRoutePath) updateLastRoutePath(lastRoutePath)
-
-//       updateLastMessageDate(currentDateString())
-//     },
-//     setTyping: typing => updateTyping(typing),
-//     addUserMessage: message => sendInput(message),
-//     updateUser: updateSessionWithUser,
-//     openWebchat: () => toggleWebchat(true),
-//     closeWebchat: () => toggleWebchat(false),
-//     toggleWebchat: () => toggleWebchat(!webchatState.isWebchatOpen),
-//     openCoverComponent: () => toggleCoverComponent(true),
-//     closeCoverComponent: () => toggleCoverComponent(false),
-//     renderCustomComponent: _customComponent => {
-//       setCustomComponent(_customComponent)
-//       doRenderCustomComponent(true)
-//     },
-//     unmountCustomComponent: () => doRenderCustomComponent(false),
-//     toggleCoverComponent: () =>
-//       toggleCoverComponent(!webchatState.isCoverComponentOpen),
-//     openWebviewApi: component => openWebviewT(component),
-//     setError,
-//     setOnline,
-//     getMessages: () => webchatState.messagesJSON,
-//     isOnline,
-//     clearMessages: () => {
-//       clearMessages()
-//       updateReplies(false)
-//     },
-//     getLastMessageUpdate: () => webchatState.lastMessageUpdate,
-//     updateMessageInfo: (msgId, messageInfo) => {
-//       const messageToUpdate = webchatState.messagesJSON.filter(
-//         m => m.id == msgId
-//       )[0]
-//       const updatedMsg = merge(messageToUpdate, messageInfo)
-//       if (updatedMsg.ack === 1) delete updatedMsg.unsentInput
-//       updateMessage(updatedMsg)
-//     },
-//     updateWebchatSettings: settings => {
-//       if (settings.user) {
-//         updateSessionWithUser(settings.user)
-//       }
-//       const themeUpdates = normalizeWebchatSettings(settings)
-//       updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates)
-//       updateTyping(false)
-//     },
-//     closeWebview: closeWebview,
-//   }))
-
-//   const resolveCase = () => {
-//     updateHandoff(false)
-//     updateSession({ ...webchatState.session, _botonic_action: null })
-//   }
-
-//   const prevSession = usePrevious(webchatState.session)
-//   useEffect(() => {
-//     // Resume conversation after handoff
-//     if (
-//       prevSession &&
-//       prevSession._botonic_action &&
-//       !webchatState.session._botonic_action
-//     ) {
-//       const action = getParsedAction(prevSession._botonic_action)
-//       if (action && action.on_finish) sendPayload(action.on_finish)
-//     }
-//   }, [webchatState.session._botonic_action])
-
-//   const sendText = async (text, payload) => {
-//     if (!text) return
-//     const input = { type: INPUT.TEXT, data: text, payload }
-//     await sendInput(input)
-//   }
-
-//   const sendPayload = async payload => {
-//     if (!payload) return
-//     const input = { type: INPUT.POSTBACK, payload }
-//     await sendInput(input)
-//   }
-
-//   const sendAttachment = async attachment => {
-//     if (attachment.file) {
-//       const attachmentType = getMediaType(attachment.file.type)
-//       if (!attachmentType) return
-//       const input = {
-//         type: attachmentType,
-//         data: attachment.file,
-//       }
-//       await sendInput(input)
-//       setCurrentAttachment(undefined)
-//     }
-//   }
-
-//   const webviewRequestContext = {
-//     closeWebview: closeWebview,
-//     getString: stringId => props.getString(stringId, webchatState.session),
-//     params: webchatState.webviewParams || {},
-//     session: webchatState.session || {},
-//   }
-
-//   useEffect(() => {
-//     if (firstUpdate.current) {
-//       firstUpdate.current = false
-//       return
-//     }
-
-//     if (webchatState.isWebchatOpen && props.onOpen) props.onOpen()
-
-//     if (!webchatState.isWebchatOpen && props.onClose && !firstUpdate.current) {
-//       props.onClose()
-//       toggleEmojiPicker(false)
-//       togglePersistentMenu(false)
-//     }
-//   }, [webchatState.isWebchatOpen])
-
-//   const isUserInputEnabled = () => {
-//     const isUserInputEnabled = getThemeProperty(
-//       WEBCHAT.CUSTOM_PROPERTIES.enableUserInput,
-//       props.enableUserInput !== undefined ? props.enableUserInput : true
-//     )
-//     return isUserInputEnabled && !webchatState.isCoverComponentOpen
-//   }
-
-//   const userInputEnabled = isUserInputEnabled()
-
-//   const webchatWebview = () => (
-//     <WebviewRequestContext.Provider value={webviewRequestContext}>
-//       <WebviewContainer
-//         style={{
-//           ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
-//           ...mobileStyle,
-//         }}
-//         webview={webchatState.webview}
-//       />
-//     </WebviewRequestContext.Provider>
-//   )
-//   let mobileStyle = {}
-//   if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
-//     mobileStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
-//       width: '100%',
-//       height: '100%',
-//       right: 0,
-//       bottom: 0,
-//       borderRadius: 0,
-//     }
-//   }
-
-//   useEffect(() => {
-//     // Prod mode
-//     saveWebchatState(webchatState)
-//   }, [webchatState.themeUpdates])
-
-//   // Only needed for dev/serve mode
-//   const updateWebchatDevSettings = settings => {
-//     // eslint-disable-next-line react-hooks/rules-of-hooks
-//     useEffect(() => {
-//       const themeUpdates = normalizeWebchatSettings(settings)
-//       updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates)
-//     }, [webchatState.messagesJSON])
-//   }
-
-//   const DarkenBackground = ({ component }) => {
-//     return (
-//       <div>
-//         {darkBackgroundMenu && (
-//           <DarkBackgroundMenu
-//             style={{
-//               borderRadius: webchatState.theme.style.borderRadius,
-//             }}
-//           />
-//         )}
-//         {component}
-//       </div>
-//     )
-//   }
-
-//   const _renderCustomComponent = () => {
-//     if (!customComponent) return <></>
-//     else return customComponent
-//   }
-
-//   const WebchatComponent = (
-//     <WebchatContext.Provider
-//       value={{
-//         addMessage,
-//         getThemeProperty,
-//         openWebview,
-//         resolveCase,
-//         resetUnreadMessages,
-//         setLastMessageVisible,
-//         sendAttachment,
-//         sendInput,
-//         sendPayload,
-//         sendText,
-//         toggleWebchat,
-//         toggleEmojiPicker,
-//         togglePersistentMenu,
-//         toggleCoverComponent,
-//         updateLatestInput,
-//         updateMessage,
-//         updateReplies,
-//         updateUser: updateSessionWithUser,
-//         updateWebchatDevSettings: updateWebchatDevSettings,
-//         webchatState,
-//         trackEvent: props.onTrackEvent,
-//         webchatRef,
-//         chatAreaRef,
-//         inputPanelRef,
-//         headerRef,
-//         scrollableMessagesListRef,
-//       }}
-//     >
-//       {!webchatState.isWebchatOpen && <TriggerButton />}
-
-//       {webchatState.isWebchatOpen && (
-//         <StyledWebchat
-//           id={BotonicContainerId.Webchat}
-//           ref={webchatRef}
-//           // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
-//           role={ROLES.WEBCHAT}
-//           width={webchatState.width}
-//           height={webchatState.height}
-//           style={{
-//             ...webchatState.theme.style,
-//             ...mobileStyle,
-//           }}
-//         >
-//           <WebchatHeader
-//             id={BotonicContainerId.Header}
-//             ref={headerRef}
-//             onCloseClick={() => {
-//               toggleWebchat(false)
-//             }}
-//           />
-
-//           {webchatState.isCoverComponentOpen ? (
-//             <CoverComponent
-//               component={coverComponent}
-//               componentProps={coverComponentProps}
-//             />
-//           ) : (
-//             <>
-//               {webchatState.error.message && (
-//                 <ErrorMessageContainer>
-//                   <ErrorMessage>{webchatState.error.message}</ErrorMessage>
-//                 </ErrorMessageContainer>
-//               )}
-
-//               <ChatArea />
-
-//               {webchatState.isPersistentMenuOpen && (
-//                 <DarkenBackground component={persistentMenu()} />
-//               )}
-
-//               {!webchatState.handoff && userInputEnabled && (
-//                 <InputPanel
-//                   persistentMenu={props.persistentMenu}
-//                   enableEmojiPicker={props.enableEmojiPicker}
-//                   enableAttachments={props.enableAttachments}
-//                   handleAttachment={handleAttachment}
-//                   textareaRef={textareaRef}
-//                   host={host}
-//                   onUserInput={props.onUserInput}
-//                 />
-//               )}
-
-//               {webchatState.webview && webchatWebview()}
-
-//               {webchatState.isCustomComponentRendered &&
-//                 customComponent &&
-//                 _renderCustomComponent()}
-//             </>
-//           )}
-//         </StyledWebchat>
-//       )}
-//     </WebchatContext.Provider>
-//   )
-
-//   return props.shadowDOM ? (
-//     <StyleSheetManager target={host}>{WebchatComponent}</StyleSheetManager>
-//   ) : (
-//     WebchatComponent
-//   )
-// })