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

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

app/javascript/widget/components/AgentMessage.vue

@@ -85,6 +85,7 @@ export default {
     .avatar-wrap {
       height: $space-medium;
       width: $space-medium;
+      flex-shrink: 0;
 
       .user-thumbnail-box {
         margin-top: -$space-large;

app/javascript/widget/components/ChatHeader.vue

@@ -3,7 +3,7 @@
     <h2 class="title">
       {{ title }}
     </h2>
-    <span class="close" @click="closeWindow"></span>
+    <span class="close-button" @click="closeWindow"></span>
   </header>
 </template>
 
@@ -54,27 +54,8 @@ export default {
     color: $color-heading;
   }
 
-  .close {
-    cursor: pointer;
-    position: relative;
-    width: $space-two;
-
-    &:before,
-    &:after {
-      position: absolute;
-      left: $space-small;
-      top: $space-smaller;
-      content: ' ';
-      height: $space-normal;
-      width: 2px;
-      background-color: $color-heading;
-    }
-    &:before {
-      transform: rotate(45deg);
-    }
-    &:after {
-      transform: rotate(-45deg);
-    }
+  .close-button {
+    display: none;
   }
 }
 </style>

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;