fix: Smoothens out opening animation for widget (#2789)

app/javascript/widget/App.vue

@@ -59,6 +59,16 @@ export default {
     activeCampaign() {
       this.setCampaignView();
     },
+    showUnreadView(newVal) {
+      if (newVal) {
+        this.setIframeHeight(this.isMobile);
+      }
+    },
+    showCampaignView(newVal) {
+      if (newVal) {
+        this.setIframeHeight(this.isMobile);
+      }
+    },
   },
   mounted() {
     const { websiteToken, locale } = window.chatwootWebChannel;
@@ -98,9 +108,13 @@ export default {
       });
     },
     setIframeHeight(isFixedHeight) {
-      IFrameHelper.sendMessage({
-        event: 'updateIframeHeight',
-        isFixedHeight,
+      this.$nextTick(() => {
+        const extraHeight = this.getExtraSpaceToscroll();
+        IFrameHelper.sendMessage({
+          event: 'updateIframeHeight',
+          isFixedHeight,
+          extraHeight,
+        });
       });
     },
     setLocale(locale) {
@@ -256,6 +270,23 @@ export default {
         },
       });
     },
+    getExtraSpaceToscroll: () => {
+      // This function calculates the extra space needed for the view to
+      // accomodate the height of close button + height of
+      // read messages button. So that scrollbar won't appear
+      const unreadMessageWrap = document.querySelector('.unread-messages');
+      const unreadCloseWrap = document.querySelector('.close-unread-wrap');
+      const readViewWrap = document.querySelector('.open-read-view-wrap');
+
+      if (!unreadMessageWrap) return 0;
+
+      // 24px to compensate the paddings
+      let extraHeight = 24 + unreadMessageWrap.scrollHeight;
+      if (unreadCloseWrap) extraHeight += unreadCloseWrap.scrollHeight;
+      if (readViewWrap) extraHeight += readViewWrap.scrollHeight;
+
+      return extraHeight;
+    },
   },
 };
 </script>