@botonic/react 0.36.0-alpha.0 → 0.36.0-alpha.1

package/src/webchat/{webchat.jsx → webchat.tsx}

@@ -1,9 +1,4 @@
-import {
-  BotonicAction,
-  INPUT,
-  isMobile,
-  params2queryString,
-} from '@botonic/core'
+import { BotonicAction, INPUT, params2queryString } from '@botonic/core'
 import merge from 'lodash.merge'
 import React, {
   forwardRef,
@@ -12,15 +7,22 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import styled, { StyleSheetManager } from 'styled-components'
+import { StyleSheetManager, ThemeProvider } 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 {
+  Audio,
+  Document,
+  Handoff,
+  Image,
+  normalizeWebchatSettings,
+  Text,
+  Video,
+  WebchatSettingsProps,
+} from '../components'
 import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants'
-import { WebchatContext, WebviewRequestContext } from '../contexts'
-import { SENDERS } from '../index-types'
+import { CloseWebviewOptions } from '../contexts'
+import { SENDERS, WebchatProps, WebchatRef } from '../index-types'
 import {
   getMediaType,
   isAllowedSize,
@@ -40,86 +42,44 @@ import {
   getServerErrorMessage,
   initSession,
   shouldKeepSessionOnReload,
+  updateUserLocaleAndCountry,
 } from '../util/webchat'
 import { ChatArea } from './chat-area'
 import { OpenedPersistentMenu } from './components/opened-persistent-menu'
 import { BotonicContainerId } from './constants'
+import { useWebchat, WebchatContext, WebchatState } from './context'
+import { CoverComponent } from './cover-component'
 import { WebchatHeader } from './header'
 import {
   useComponentWillMount,
   usePrevious,
   useScrollToBottom,
   useTyping,
-  useWebchat,
 } from './hooks'
 import { InputPanel } from './input-panel'
+import {
+  DarkBackgroundMenu,
+  ErrorMessage,
+  ErrorMessageContainer,
+  StyledWebchat,
+} from './styles'
+import { WebchatTheme } from './theme/types'
 import { TriggerButton } from './trigger-button'
 import { useStorageState } from './use-storage-state-hook'
 import { getParsedAction } from './utils'
-import { WebviewContainer } from './webview'
-
-const StyledWebchat = styled.div`
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
-  margin: auto;
-  background-color: ${COLORS.SOLID_WHITE};
-  border-radius: 10px;
-  box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
-`
-
-const ErrorMessageContainer = styled.div`
-  position: relative;
-  display: flex;
-  z-index: 1;
-  justify-content: center;
-  width: 100%;
-`
-
-const ErrorMessage = styled.div`
-  position: absolute;
-  top: 10px;
-  font-size: 14px;
-  line-height: 20px;
-  padding: 4px 11px;
-  display: flex;
-  background-color: ${COLORS.ERROR_RED};
-  color: ${COLORS.CONCRETE_WHITE};
-  border-radius: 5px;
-  align-items: center;
-  justify-content: center;
-  font-family: ${WEBCHAT.DEFAULTS.FONT_FAMILY};
-`
-
-const DarkBackgroundMenu = styled.div`
-  background: ${COLORS.SOLID_BLACK};
-  opacity: 0.3;
-  z-index: 1;
-  right: 0;
-  bottom: 0;
-  border-radius: 10px;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-`
+import { WebviewContainer } from './webview/index'
 
 // eslint-disable-next-line complexity, react/display-name
-export const Webchat = forwardRef((props, ref) => {
+const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
   const {
     addMessage,
     addMessageComponent,
     clearMessages,
     doRenderCustomComponent,
-    openWebviewT,
     resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setIsInputFocused,
     setLastMessageVisible,
     setOnline,
     toggleCoverComponent,
@@ -137,15 +97,18 @@ export const Webchat = forwardRef((props, ref) => {
     updateTheme,
     updateTyping,
     updateWebview,
+    removeWebview,
+    removeReplies,
     webchatState,
-    webchatRef,
+    webchatContainerRef,
     chatAreaRef,
     inputPanelRef,
     headerRef,
+    repliesRef,
     scrollableMessagesListRef,
-
     // eslint-disable-next-line react-hooks/rules-of-hooks
-  } = props.webchatHooks || useWebchat()
+  } = props.webchatHooks || useWebchat(props.theme)
+
   const firstUpdate = useRef(true)
   const isOnline = () => webchatState.online
   const currentDateString = () => new Date().toISOString()
@@ -166,7 +129,7 @@ export const Webchat = forwardRef((props, ref) => {
 
   const { scrollToBottom } = useScrollToBottom({ host })
 
-  const saveWebchatState = webchatState => {
+  const saveWebchatState = (webchatState: WebchatState) => {
     storage &&
       saveState(
         JSON.parse(
@@ -182,32 +145,34 @@ export const Webchat = forwardRef((props, ref) => {
       )
   }
 
-  const handleAttachment = event => {
+  const handleAttachment = (event: any) => {
     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),
-    })
+
+    // TODO: Attach more files?
+    setCurrentAttachment(event.target.files[0])
   }
 
   useEffect(() => {
-    if (webchatState.currentAttachment)
+    if (webchatState.currentAttachment) {
       sendAttachment(webchatState.currentAttachment)
+    }
   }, [webchatState.currentAttachment])
 
-  const sendUserInput = async input => {
+  const sendUserInput = async (input: any) => {
     if (props.onUserInput) {
       resetUnreadMessages()
-      scrollToBottom({ host })
+      scrollToBottom()
       props.onUserInput({
         user: webchatState.session.user,
+        // TODO: Review if this input.sentBy exists in the frontend
         input: input,
+        //@ts-ignore
         session: webchatState.session,
+        // TODO: Review why we were passing lastRoutePath, is only for devMode?
         lastRoutePath: webchatState.lastRoutePath,
       })
     }
@@ -259,9 +224,9 @@ export const Webchat = forwardRef((props, ref) => {
           addMessage(message)
           const newMessageComponent = msgToBotonic(
             { ...message, delay: 0, typing: 0 },
-            (props.theme.message && props.theme.message.customTypes) ||
-              props.theme.customMessageTypes
+            props.theme?.message?.customTypes
           )
+          //@ts-ignore
           if (newMessageComponent) addMessageComponent(newMessageComponent)
         })
       }
@@ -270,10 +235,23 @@ export const Webchat = forwardRef((props, ref) => {
     } else updateSession(merge(initialSession, session))
     if (devSettings) updateDevSettings(devSettings)
     else if (initialDevSettings) updateDevSettings(initialDevSettings)
-    if (lastMessageUpdate) updateLastMessageDate(lastMessageUpdate)
-    if (themeUpdates !== undefined)
+
+    if (lastMessageUpdate) {
+      updateLastMessageDate(lastMessageUpdate)
+    }
+
+    if (themeUpdates !== undefined) {
       updateTheme(merge(props.theme, themeUpdates), themeUpdates)
-    if (props.onInit) setTimeout(() => props.onInit(), 100)
+    }
+
+    if (props.onInit) {
+      setTimeout(() => {
+        if (typeof props.onInit === 'function') {
+          props.onInit()
+          session.user = updateUserLocaleAndCountry(session.user)
+        }
+      }, 100)
+    }
   }, [])
 
   useEffect(() => {
@@ -286,8 +264,9 @@ export const Webchat = forwardRef((props, ref) => {
   }, [webchatState.isWebchatOpen])
 
   useEffect(() => {
-    if (onStateChange && typeof onStateChange === 'function') {
-      onStateChange(webchatState)
+    const { messagesJSON, session } = webchatState
+    if (onStateChange && typeof onStateChange === 'function' && session.user) {
+      onStateChange({ messagesJSON, user: session.user })
     }
     saveWebchatState(webchatState)
   }, [
@@ -320,12 +299,12 @@ export const Webchat = forwardRef((props, ref) => {
     updateWebview(webviewComponent, params)
   }
 
-  const textareaRef = useRef(null)
+  const textareaRef = useRef<HTMLTextAreaElement | undefined>()
 
-  const closeWebview = async options => {
-    updateWebview()
+  const closeWebview = async (options?: CloseWebviewOptions) => {
+    removeWebview()
     if (userInputEnabled) {
-      textareaRef.current.focus()
+      textareaRef.current?.focus()
     }
     if (options?.payload) {
       await sendPayload(options.payload)
@@ -336,13 +315,11 @@ export const Webchat = forwardRef((props, ref) => {
   }
 
   const persistentMenuOptions = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.persistentMenu,
-    props.persistentMenu
+    WEBCHAT.CUSTOM_PROPERTIES.persistentMenu
   )
 
   const darkBackgroundMenu = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu,
-    false
+    WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu
   )
 
   const getBlockInputs = (rule, inputData) => {
@@ -358,15 +335,15 @@ export const Webchat = forwardRef((props, ref) => {
 
   const checkBlockInput = input => {
     // if is a text we check if it is a serialized RE
-    const blockInputs = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.blockInputs,
-      props.blockInputs
-    )
+    const blockInputs = webchatState.theme.userInput?.blockInputs
     if (!Array.isArray(blockInputs)) return false
     for (const rule of blockInputs) {
       if (getBlockInputs(rule, input.data)) {
         addMessageComponent(
           <Text
+            // Is necessary to add the id of the input
+            // to keep the input.id generated in the frontend as id of the message
+            // @ts-ignore
             id={input.id}
             sentBy={SENDERS.user}
             blob={false}
@@ -379,7 +356,7 @@ export const Webchat = forwardRef((props, ref) => {
             {rule.message}
           </Text>
         )
-        updateReplies(false)
+        removeReplies()
         return true
       }
     }
@@ -400,55 +377,45 @@ export const Webchat = forwardRef((props, ref) => {
     )
   }
 
-  const getCoverComponent = () => {
-    return getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.coverComponent,
-      props.coverComponent &&
-        (props.coverComponent.component || props.coverComponent)
-    )
-  }
-  const CoverComponent = getCoverComponent()
-
-  const closeCoverComponent = () => {
-    toggleCoverComponent(false)
-  }
+  const coverComponent = webchatState.theme.coverComponent
+  const coverComponentProps = webchatState.theme.coverComponent?.props
 
   useEffect(() => {
-    if (!CoverComponent) return
+    if (!coverComponent) return
     if (
       !botonicState ||
-      (botonicState.messages && botonicState.messages.length == 0)
+      (botonicState.messages && botonicState.messages.length === 0)
     )
       toggleCoverComponent(true)
   }, [])
 
-  const coverComponent = () => {
-    const coverComponentProps = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps,
-      props.coverComponent && props.coverComponent.props
-    )
-
-    if (CoverComponent && webchatState.isCoverComponentOpen)
-      return (
-        <CoverComponent
-          closeComponent={closeCoverComponent}
-          {...coverComponentProps}
-        />
-      )
-    return null
-  }
-
   const messageComponentFromInput = input => {
-    let messageComponent = null
+    let messageComponent: any = null
     if (isText(input)) {
       messageComponent = (
-        <Text id={input.id} payload={input.payload} sentBy={SENDERS.user}>
+        <Text
+          // Is necessary to add the id of the input
+          // to keep the input.id generated in the frontend as id of the message
+          // @ts-ignore
+          id={input.id}
+          // Is necessary to add the payload of the input when user clicks a button
+          // @ts-ignore
+          payload={input.payload}
+          sentBy={SENDERS.user}
+        >
           {input.data}
         </Text>
       )
     } else if (isMedia(input)) {
       const temporaryDisplayUrl = URL.createObjectURL(input.data)
-      const mediaProps = {
+      // TODO: We should use URL.revokeObjectURL(temporaryDisplayUrl) when the component is unmounted
+      // https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static#memory_management
+      const mediaProps: {
+        id: string
+        sentBy: SENDERS
+        src: string
+        input?: any
+      } = {
         id: input.id,
         sentBy: SENDERS.user,
         src: temporaryDisplayUrl,
@@ -464,7 +431,7 @@ export const Webchat = forwardRef((props, ref) => {
     return messageComponent
   }
 
-  const sendInput = async input => {
+  const sendInput = async (input: any) => {
     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
@@ -475,7 +442,7 @@ export const Webchat = forwardRef((props, ref) => {
     sendUserInput(input)
     updateLatestInput(input)
     isOnline() && updateLastMessageDate(currentDateString())
-    updateReplies(false)
+    removeReplies()
     togglePersistentMenu(false)
     toggleEmojiPicker(false)
   }
@@ -484,8 +451,10 @@ export const Webchat = forwardRef((props, ref) => {
   https://stackoverflow.com/questions/37949981/call-child-method-from-parent
   */
 
-  const updateSessionWithUser = userToUpdate =>
+  const updateSessionWithUser = (userToUpdate: any) => {
+    console.log('userToUpdate', userToUpdate)
     updateSession(merge(webchatState.session, { user: userToUpdate }))
+  }
 
   useImperativeHandle(ref, () => ({
     addBotResponse: ({ response, session, lastRoutePath }) => {
@@ -517,7 +486,7 @@ export const Webchat = forwardRef((props, ref) => {
 
       updateLastMessageDate(currentDateString())
     },
-    setTyping: typing => updateTyping(typing),
+    setTyping: (typing: boolean) => updateTyping(typing),
     addUserMessage: message => sendInput(message),
     updateUser: updateSessionWithUser,
     openWebchat: () => toggleWebchat(true),
@@ -532,85 +501,76 @@ export const Webchat = forwardRef((props, ref) => {
     unmountCustomComponent: () => doRenderCustomComponent(false),
     toggleCoverComponent: () =>
       toggleCoverComponent(!webchatState.isCoverComponentOpen),
-    openWebviewApi: component => openWebviewT(component),
-    setError,
     setOnline,
     getMessages: () => webchatState.messagesJSON,
     isOnline,
     clearMessages: () => {
       clearMessages()
-      updateReplies(false)
+      removeReplies()
     },
     getLastMessageUpdate: () => webchatState.lastMessageUpdate,
-    updateMessageInfo: (msgId, messageInfo) => {
+    updateMessageInfo: (msgId: string, messageInfo: any) => {
       const messageToUpdate = webchatState.messagesJSON.filter(
-        m => m.id == msgId
+        m => m.id === msgId
       )[0]
       const updatedMsg = merge(messageToUpdate, messageInfo)
       if (updatedMsg.ack === 1) delete updatedMsg.unsentInput
       updateMessage(updatedMsg)
     },
-    updateWebchatSettings: settings => {
+    updateWebchatSettings: (settings: WebchatSettingsProps) => {
       if (settings.user) {
         updateSessionWithUser(settings.user)
       }
       const themeUpdates = normalizeWebchatSettings(settings)
-      updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates)
+      updateTheme(
+        merge(webchatState.theme, themeUpdates),
+        themeUpdates as WebchatTheme
+      )
       updateTyping(false)
     },
-    closeWebview: closeWebview,
+    closeWebview: async (options?: CloseWebviewOptions) =>
+      closeWebview(options),
   }))
 
   const resolveCase = () => {
     updateHandoff(false)
-    updateSession({ ...webchatState.session, _botonic_action: null })
+    updateSession({ ...webchatState.session, _botonic_action: undefined })
   }
 
   const prevSession = usePrevious(webchatState.session)
   useEffect(() => {
     // Resume conversation after handoff
-    if (
-      prevSession &&
-      prevSession._botonic_action &&
-      !webchatState.session._botonic_action
-    ) {
+    if (prevSession?._botonic_action && !webchatState.session._botonic_action) {
       const action = getParsedAction(prevSession._botonic_action)
-      if (action && action.on_finish) sendPayload(action.on_finish)
+      if (action?.on_finish) sendPayload(action.on_finish)
     }
   }, [webchatState.session._botonic_action])
 
-  const sendText = async (text, payload) => {
+  const sendText = async (text: string, payload?: string) => {
     if (!text) return
     const input = { type: INPUT.TEXT, data: text, payload }
     await sendInput(input)
   }
 
-  const sendPayload = async payload => {
+  const sendPayload = async (payload: string) => {
     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)
+  const sendAttachment = async (attachment: File) => {
+    if (attachment) {
+      const attachmentType = getMediaType(attachment.type)
       if (!attachmentType) return
       const input = {
         type: attachmentType,
-        data: attachment.file,
+        data: attachment,
       }
       await sendInput(input)
-      setCurrentAttachment(undefined)
+      setCurrentAttachment()
     }
   }
 
-  const webviewRequestContext = {
-    closeWebview: closeWebview,
-    getString: stringId => props.getString(stringId, webchatState.session),
-    params: webchatState.webviewParams || {},
-    session: webchatState.session || {},
-  }
-
   useEffect(() => {
     if (firstUpdate.current) {
       firstUpdate.current = false
@@ -628,36 +588,13 @@ export const Webchat = forwardRef((props, ref) => {
 
   const isUserInputEnabled = () => {
     const isUserInputEnabled = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.enableUserInput,
-      props.enableUserInput !== undefined ? props.enableUserInput : true
+      WEBCHAT.CUSTOM_PROPERTIES.enableUserInput
     )
     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)
@@ -668,7 +605,10 @@ export const Webchat = forwardRef((props, ref) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const themeUpdates = normalizeWebchatSettings(settings)
-      updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates)
+      updateTheme(
+        merge(webchatState.theme, themeUpdates),
+        themeUpdates as WebchatTheme
+      )
     }, [webchatState.messagesJSON])
   }
 
@@ -697,9 +637,11 @@ export const Webchat = forwardRef((props, ref) => {
       value={{
         addMessage,
         getThemeProperty,
+        closeWebview,
         openWebview,
         resolveCase,
         resetUnreadMessages,
+        setIsInputFocused,
         setLastMessageVisible,
         sendAttachment,
         sendInput,
@@ -708,75 +650,81 @@ export const Webchat = forwardRef((props, ref) => {
         toggleWebchat,
         toggleEmojiPicker,
         togglePersistentMenu,
+        toggleCoverComponent,
         updateLatestInput,
         updateMessage,
         updateReplies,
         updateUser: updateSessionWithUser,
         updateWebchatDevSettings: updateWebchatDevSettings,
-        webchatState,
         trackEvent: props.onTrackEvent,
-        webchatRef,
+        webchatState,
+        webchatContainerRef,
         chatAreaRef,
         inputPanelRef,
         headerRef,
+        repliesRef,
         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.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.isCoverComponentOpen && coverComponent()}
-          {webchatState.isCustomComponentRendered &&
-            customComponent &&
-            _renderCustomComponent()}
-        </StyledWebchat>
-      )}
+      <ThemeProvider theme={webchatState.theme}>
+        {!webchatState.isWebchatOpen && <TriggerButton />}
+
+        {webchatState.isWebchatOpen && (
+          <StyledWebchat
+            id={BotonicContainerId.Webchat}
+            ref={webchatContainerRef}
+            // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
+            role={ROLES.WEBCHAT}
+          >
+            <WebchatHeader ref={headerRef} />
+
+            {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
+                    handleAttachment={handleAttachment}
+                    textareaRef={textareaRef}
+                    host={host}
+                    onUserInput={props.onUserInput}
+                  />
+                )}
+
+                {webchatState.webview && <WebviewContainer />}
+
+                {webchatState.isCustomComponentRendered &&
+                  customComponent &&
+                  _renderCustomComponent()}
+              </>
+            )}
+          </StyledWebchat>
+        )}
+      </ThemeProvider>
     </WebchatContext.Provider>
   )
+
   return props.shadowDOM ? (
     <StyleSheetManager target={host}>{WebchatComponent}</StyleSheetManager>
   ) : (
     WebchatComponent
   )
 })
+
+Webchat.displayName = 'Webchat'
+export { Webchat }