[Enhancement] Use JS-Cookie to set Cookies (#193)

* Update js-cookie

* Add sdk css

* Remove conversation padding

app/javascript/widget/App.vue

@@ -6,6 +6,17 @@
 
 <script>
 import { mapActions } from 'vuex';
+import { setHeader } from './helpers/axios';
+
+export const IFrameHelper = {
+  isIFrame: () => window.self !== window.top,
+  sendMessage: msg => {
+    window.parent.postMessage(
+      `chatwoot-widget:${JSON.stringify({ ...msg })}`,
+      '*'
+    );
+  },
+};
 
 export default {
   name: 'App',
@@ -15,7 +26,28 @@ export default {
   },
 
   mounted() {
-    this.fetchOldConversations();
+    if (IFrameHelper.isIFrame()) {
+      IFrameHelper.sendMessage({
+        event: 'loaded',
+        config: {
+          authToken: window.authToken,
+        },
+      });
+      setHeader('X-Auth-Token', window.authToken);
+    }
+
+    window.addEventListener('message', e => {
+      if (
+        typeof e.data !== 'string' ||
+        e.data.indexOf('chatwoot-widget:') !== 0
+      ) {
+        return;
+      }
+      const message = JSON.parse(e.data.replace('chatwoot-widget:', ''));
+      if (message.event === 'config-set') {
+        this.fetchOldConversations();
+      }
+    });
   },
 };
 </script>

app/javascript/widget/assets/scss/sdk.js

@@ -1,3 +1,4 @@
+export const SDK_CSS = `
 .woot-widget-holder {
   z-index: 2147483000!important;
   position: fixed!important;
@@ -63,3 +64,4 @@
 .woot--hide {
   display: none !important;
 }
+`;

app/javascript/widget/components/ConversationWrap.vue

@@ -28,6 +28,5 @@ export default {
 
 .conversation {
   height: 100%;
-  padding: $space-large $space-small $space-large $space-normal;
 }
 </style>

app/javascript/widget/helpers/actionCable.js

@@ -6,6 +6,7 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.events = {
       'message.created': this.onMessageCreated,
     };
+    console.log('joined', app, pubsubToken);
   }
 
   onMessageCreated = data => {

app/javascript/widget/views/Home.vue

@@ -69,6 +69,7 @@ export default {
   .conversation-wrap {
     flex: 1;
     overflow-y: auto;
+    padding: $space-large $space-small $space-large $space-normal;
   }
 
   .footer-wrap {