fix: Fixes widget unread view blocking parent page (#3658)

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/sdk/IFrameHelper.js

@@ -169,7 +169,6 @@ export const IFrameHelper = {
     },
     updateIframeHeight: message => {
       const { extraHeight = 0, isFixedHeight } = message;
-      if (!extraHeight) return;
 
       IFrameHelper.setFrameHeightToFitContent(extraHeight, isFixedHeight);
     },

app/javascript/sdk/sdk.js

@@ -18,6 +18,8 @@ export const SDK_CSS = `.woot-widget-holder {
 
 .woot-widget-holder.has-unread-view {
   border-radius: 0 !important;
+  min-height: 80px;
+  height: auto;
   bottom: 94px;
   box-shadow: none !important;
 }

app/javascript/widget/App.vue

@@ -166,7 +166,7 @@ export default {
         !isEmptyObject(activeCampaign) && !messageCount;
       if (this.isIFrame && isCampaignReadyToExecute) {
         this.replaceRoute('campaigns').then(() => {
-          this.setIframeHeight(this.isMobile);
+          this.setIframeHeight(true);
           IFrameHelper.sendMessage({ event: 'setUnreadMode' });
         });
       }
@@ -175,17 +175,16 @@ export default {
       const { unreadMessageCount } = this;
       if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
         this.replaceRoute('unread-messages').then(() => {
-          this.setIframeHeight(this.isMobile);
+          this.setIframeHeight(true);
           IFrameHelper.sendMessage({ event: 'setUnreadMode' });
         });
-        this.setIframeHeight(this.isMobile);
         this.handleUnreadNotificationDot();
       }
     },
     unsetUnreadView() {
       if (this.isIFrame) {
         IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
-        this.setIframeHeight();
+        this.setIframeHeight(false);
         this.handleUnreadNotificationDot();
       }
     },
@@ -260,17 +259,18 @@ export default {
         } else if (message.event === 'toggle-open') {
           this.$store.dispatch('appConfig/toggleWidgetOpen', message.isOpen);
 
-          if (
+          const shouldShowMessageView =
             ['home'].includes(this.$route.name) &&
             message.isOpen &&
-            this.messageCount
-          ) {
+            this.messageCount;
+          const shouldShowHomeView =
+            !message.isOpen &&
+            ['unread-messages', 'campaigns'].includes(this.$route.name);
+
+          if (shouldShowMessageView) {
             this.replaceRoute('messages');
           }
-          if (
-            !message.isOpen &&
-            ['unread-messages', 'campaigns'].includes(this.$route.name)
-          ) {
+          if (shouldShowHomeView) {
             this.$store.dispatch('conversation/setUserLastSeen');
             this.unsetUnreadView();
             this.replaceRoute('home');

app/javascript/widget/helpers/IframeEventHelper.js

@@ -19,7 +19,7 @@ export const getExtraSpaceToScroll = () => {
   if (!unreadMessageWrap) return 0;
 
   // 24px to compensate the paddings
-  let extraHeight = 24 + unreadMessageWrap.scrollHeight;
+  let extraHeight = 48 + unreadMessageWrap.scrollHeight;
   if (unreadCloseWrap) extraHeight += unreadCloseWrap.scrollHeight;
   if (readViewWrap) extraHeight += readViewWrap.scrollHeight;