@botonic/react 0.31.0-alpha.2 → 0.31.0-alpha.4

package/src/webchat/webchat.jsx

@@ -44,6 +44,7 @@ import {
 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,
@@ -120,6 +121,7 @@ export const Webchat = forwardRef((props, ref) => {
     resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setIsInputFocused,
     setLastMessageVisible,
     setOnline,
     toggleCoverComponent,
@@ -203,7 +205,7 @@ export const Webchat = forwardRef((props, ref) => {
   const sendUserInput = async input => {
     if (props.onUserInput) {
       resetUnreadMessages()
-      scrollToBottom({ host })
+      scrollToBottom()
       props.onUserInput({
         user: webchatState.session.user,
         input: input,
@@ -367,7 +369,7 @@ export const Webchat = forwardRef((props, ref) => {
       if (getBlockInputs(rule, input.data)) {
         addMessageComponent(
           <Text
-            id={input.id}
+            id={input.id} //TODO: Remove id from Text component
             sentBy={SENDERS.user}
             blob={false}
             style={{
@@ -407,41 +409,23 @@ export const Webchat = forwardRef((props, ref) => {
         (props.coverComponent.component || props.coverComponent)
     )
   }
-  const CoverComponent = getCoverComponent()
-
-  const closeCoverComponent = () => {
-    toggleCoverComponent(false)
-  }
+  const coverComponent = getCoverComponent()
+  const coverComponentProps = props.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
     if (isText(input)) {
       messageComponent = (
+        //TODO: Remove id and payload from Text component
         <Text id={input.id} payload={input.payload} sentBy={SENDERS.user}>
           {input.data}
         </Text>
@@ -700,6 +684,7 @@ export const Webchat = forwardRef((props, ref) => {
         openWebview,
         resolveCase,
         resetUnreadMessages,
+        setIsInputFocused,
         setLastMessageVisible,
         sendAttachment,
         sendInput,
@@ -708,6 +693,7 @@ export const Webchat = forwardRef((props, ref) => {
         toggleWebchat,
         toggleEmojiPicker,
         togglePersistentMenu,
+        toggleCoverComponent,
         updateLatestInput,
         updateMessage,
         updateReplies,
@@ -744,36 +730,50 @@ export const Webchat = forwardRef((props, ref) => {
               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.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()}
+            </>
           )}
-          {webchatState.webview && webchatWebview()}
-          {webchatState.isCoverComponentOpen && coverComponent()}
-          {webchatState.isCustomComponentRendered &&
-            customComponent &&
-            _renderCustomComponent()}
         </StyledWebchat>
       )}
     </WebchatContext.Provider>
   )
+
   return props.shadowDOM ? (
     <StyleSheetManager target={host}>{WebchatComponent}</StyleSheetManager>
   ) : (