Feature: Send chat transcript via email (#1152)

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

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="conv-header">
-    <div class="user">
+    <div v-if="!isContactPanelOpen" class="user">
       <Thumbnail
         :src="currentContact.thumbnail"
         size="40px"
@@ -14,13 +14,20 @@
         </h3>
         <button
           class="user--profile__button clear button small"
-          @click="$emit('contactPanelToggle')"
+          @click="$emit('contact-panel-toggle')"
         >
-          {{ viewProfileButtonLabel }}
+          {{
+            `${$t('CONVERSATION.HEADER.OPEN')} ${$t(
+              'CONVERSATION.HEADER.DETAILS'
+            )}`
+          }}
         </button>
       </div>
     </div>
-    <div class="flex-container">
+    <div
+      class="flex-container"
+      :class="{ 'justify-space-between w-100': isContactPanelOpen }"
+    >
       <div class="multiselect-box ion-headphone">
         <multiselect
           v-model="currentChat.meta.assignee"
@@ -38,24 +45,20 @@
           <span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
         </multiselect>
       </div>
-      <ResolveButton />
+
+      <more-actions :conversation-id="currentChat.id" />
     </div>
   </div>
 </template>
 <script>
-/* eslint no-console: 0 */
-/* eslint no-param-reassign: 0 */
-/* eslint no-shadow: 0 */
-/* global bus */
-
 import { mapGetters } from 'vuex';
+import MoreActions from './MoreActions';
 import Thumbnail from '../Thumbnail';
-import ResolveButton from '../../buttons/ResolveButton';
 
 export default {
   components: {
+    MoreActions,
     Thumbnail,
-    ResolveButton,
   },
 
   props: {
@@ -104,13 +107,6 @@ export default {
         ...this.agents,
       ];
     },
-    viewProfileButtonLabel() {
-      return `${
-        this.isContactPanelOpen
-          ? this.$t('CONVERSATION.HEADER.CLOSE')
-          : this.$t('CONVERSATION.HEADER.OPEN')
-      } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
-    },
   },
 
   methods: {