[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>