Merge branch 'develop' into feat/CW-3082

app/javascript/packs/portal.js

@@ -5,8 +5,10 @@ import Vue from 'vue';
 import { InitializationHelpers } from '../portal/portalHelpers';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
+import { directive as onClickaway } from 'vue-clickaway';
 
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
+Vue.directive('on-clickaway', onClickaway);
 
 Rails.start();
 Turbolinks.start();

app/javascript/packs/sdk.js

@@ -10,14 +10,37 @@ import {
   getUserCookieName,
   hasUserKeys,
 } from '../sdk/cookieHelpers';
-import { addClasses, removeClasses } from '../sdk/DOMHelpers';
+import {
+  addClasses,
+  removeClasses,
+  restoreWidgetInDOM,
+} from '../sdk/DOMHelpers';
 import { setCookieWithDomain } from '../sdk/cookieHelpers';
 import { SDK_SET_BUBBLE_VISIBILITY } from 'shared/constants/sharedFrameEvents';
+
 const runSDK = ({ baseUrl, websiteToken }) => {
   if (window.$chatwoot) {
     return;
   }
 
+  if (window.Turbo) {
+    // if this is a Rails Turbo app
+    document.addEventListener('turbo:before-render', event =>
+      restoreWidgetInDOM(event.detail.newBody)
+    );
+  }
+
+  if (window.Turbolinks) {
+    document.addEventListener('turbolinks:before-render', event => {
+      restoreWidgetInDOM(event.data.newBody);
+    });
+  }
+
+  // if this is an astro app
+  document.addEventListener('astro:before-swap', event =>
+    restoreWidgetInDOM(event.newDocument.body)
+  );
+
   const chatwootSettings = window.chatwootSettings || {};
   let locale = chatwootSettings.locale;
   let baseDomain = chatwootSettings.baseDomain;

app/javascript/packs/widget.js

@@ -12,12 +12,15 @@ import {
   isPhoneNumberValidWithDialCode,
 } from 'shared/helpers/Validators';
 import router from '../widget/router';
+import { directive as onClickaway } from 'vue-clickaway';
+
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 const PhoneInput = () => import('../widget/components/Form/PhoneInput');
 
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
+Vue.directive('on-clickaway', onClickaway);
 
 const i18nConfig = new VueI18n({
   locale: 'en',