feat: End conversation from widget (#3660)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/HeaderActions.vue

@@ -1,5 +1,13 @@
 <template>
   <div v-if="showHeaderActions" class="actions flex items-center">
+    <button
+      v-if="conversationStatus === 'open'"
+      class="button transparent compact"
+      :title="$t('END_CONVERSATION')"
+      @click="resolveConversation"
+    >
+      <fluent-icon icon="sign-out" size="22" class="text-black-900" />
+    </button>
     <button
       v-if="showPopoutButton"
       class="button transparent compact new-window--button "
@@ -19,6 +27,7 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { buildPopoutURL } from '../helpers/urlParamsHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -33,6 +42,9 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      conversationAttributes: 'conversationAttributes/getConversationParams',
+    }),
     isIframe() {
       return IFrameHelper.isIFrame();
     },
@@ -40,7 +52,13 @@ export default {
       return RNHelper.isRNWebView();
     },
     showHeaderActions() {
-      return this.isIframe || this.isRNWebView;
+      return this.isIframe || this.isRNWebView || this.hasWidgetOptions;
+    },
+    conversationStatus() {
+      return this.conversationAttributes.status;
+    },
+    hasWidgetOptions() {
+      return this.showPopoutButton || this.conversationStatus === 'open';
     },
   },
   methods: {
@@ -72,6 +90,9 @@ export default {
         RNHelper.sendMessage({ type: 'close-widget' });
       }
     },
+    resolveConversation() {
+      this.$store.dispatch('conversation/resolveConversation');
+    },
   },
 };
 </script>