Bug: Fix missing close button on mobile chat window (#600)

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -1,22 +1,22 @@
 <template>
   <header class="header-expanded">
-    <div>
-      <!-- <img
+    <!-- <img
         class="logo"
-        src="http://www.hennigcompany.com/wp-content/uploads/2014/06/starbucks-logo.png"
+        src=""
       /> -->
-      <h2 class="title">
-        {{ introHeading }}
-      </h2>
-      <p class="body">
-        {{ introBody }}
-      </p>
-    </div>
+    <span class="close close-button" @click="closeWindow"></span>
+    <h2 class="title">
+      {{ introHeading }}
+    </h2>
+    <p class="body">
+      {{ introBody }}
+    </p>
   </header>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import { IFrameHelper } from 'widget/helpers/utils';
 
 export default {
   name: 'ChatHeaderExpanded',
@@ -36,6 +36,15 @@ export default {
         'We make it simple to connect with us. Ask us anything, or share your feedback.',
     },
   },
+  methods: {
+    closeWindow() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({
+          event: 'toggleBubble',
+        });
+      }
+    },
+  },
 };
 </script>
 
@@ -47,12 +56,19 @@ export default {
   padding: $space-larger $space-medium $space-large;
   width: 100%;
   box-sizing: border-box;
+  position: relative;
 
   .logo {
     width: 64px;
     height: 64px;
   }
 
+  .close {
+    position: absolute;
+    right: $space-medium;
+    top: $space-medium;
+    display: none;
+  }
   .title {
     color: $color-heading;
     font-size: $font-size-mega;