feat: Add a popout option on webwidget (#1174)

* feat: Add a popout option on webwidget

app/javascript/widget/components/ChatHeader.vue

@@ -4,16 +4,18 @@
       <img v-if="avatarUrl" :src="avatarUrl" alt="avatar" />
       <h2 class="title" v-html="title"></h2>
     </div>
-    <span class="close-button" @click="closeWindow"></span>
+    <header-actions :show-popout-button="showPopoutButton" />
   </header>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import { IFrameHelper } from 'widget/helpers/utils';
-
+import HeaderActions from './HeaderActions';
 export default {
   name: 'ChatHeader',
+  components: {
+    HeaderActions,
+  },
   props: {
     avatarUrl: {
       type: String,
@@ -23,21 +25,16 @@ export default {
       type: String,
       default: '',
     },
+    showPopoutButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
   },
-  methods: {
-    closeWindow() {
-      if (IFrameHelper.isIFrame()) {
-        IFrameHelper.sendMessage({
-          event: 'toggleBubble',
-        });
-      }
-    },
-  },
 };
 </script>
 
@@ -73,9 +70,5 @@ export default {
     width: 24px;
     margin-right: $space-small;
   }
-
-  .close-button {
-    display: none;
-  }
 }
 </style>