fix: apply ESLint rule vue/component-tags-order

app/javascript/dashboard/modules/contact/ContactMergeModal.vue

@@ -1,23 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('MERGE_CONTACTS.TITLE')"
-      :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
-    />
-
-    <merge-contact
-      :primary-contact="primaryContact"
-      :is-searching="isSearching"
-      :is-merging="uiFlags.isMerging"
-      :search-results="searchResults"
-      @search="onContactSearch"
-      @cancel="onClose"
-      @submit="onMergeContacts"
-    />
-  </woot-modal>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
@@ -88,4 +68,24 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('MERGE_CONTACTS.TITLE')"
+      :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
+    />
+
+    <merge-contact
+      :primary-contact="primaryContact"
+      :is-searching="isSearching"
+      :is-merging="uiFlags.isMerging"
+      :search-results="searchResults"
+      @search="onContactSearch"
+      @cancel="onClose"
+      @submit="onMergeContacts"
+    />
+  </woot-modal>
+</template>
 <style lang="scss" scoped></style>

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -1,41 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
-      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
-    />
-    <form class="w-full" @submit.prevent="addCustomAttribute">
-      <woot-input
-        v-model.trim="attributeName"
-        :class="{ error: v$.attributeName.$error }"
-        class="w-full"
-        :error="attributeNameError"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
-        @input="v$.attributeName.$touch"
-      />
-      <woot-input
-        v-model.trim="attributeValue"
-        class="w-full"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
-      />
-      <div class="flex items-center justify-end gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.attributeName.$invalid || isCreating"
-          :is-loading="isCreating"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </modal>
-</template>
-
 <script>
 import Modal from 'dashboard/components/Modal.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -98,3 +60,41 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
+      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
+    />
+    <form class="w-full" @submit.prevent="addCustomAttribute">
+      <woot-input
+        v-model.trim="attributeName"
+        :class="{ error: v$.attributeName.$error }"
+        class="w-full"
+        :error="attributeNameError"
+        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
+        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
+        @input="v$.attributeName.$touch"
+      />
+      <woot-input
+        v-model.trim="attributeValue"
+        class="w-full"
+        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
+        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
+      />
+      <div class="flex items-center justify-end gap-2 px-0 py-2">
+        <woot-button
+          :is-disabled="v$.attributeName.$invalid || isCreating"
+          :is-loading="isCreating"
+        >
+          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </form>
+  </modal>
+</template>

app/javascript/dashboard/modules/contact/components/ContactAttribute.vue

@@ -1,3 +1,41 @@
+<script>
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    label: { type: String, required: true },
+    icon: { type: String, default: '' },
+    emoji: { type: String, default: '' },
+    value: { type: [String, Number], default: '' },
+    showEdit: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      isEditing: false,
+      editedValue: this.value,
+    };
+  },
+  methods: {
+    focusInput() {
+      this.$refs.inputfield.focus();
+    },
+    onEdit() {
+      this.isEditing = true;
+      this.$nextTick(() => {
+        this.focusInput();
+      });
+    },
+    onUpdate() {
+      this.isEditing = false;
+      this.$emit('update', this.editedValue);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="contact-attribute">
     <div class="title-wrap">
@@ -49,44 +87,6 @@
   </div>
 </template>
 
-<script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  props: {
-    label: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    showEdit: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      isEditing: false,
-      editedValue: this.value,
-    };
-  },
-  methods: {
-    focusInput() {
-      this.$refs.inputfield.focus();
-    },
-    onEdit() {
-      this.isEditing = true;
-      this.$nextTick(() => {
-        this.focusInput();
-      });
-    },
-    onUpdate() {
-      this.isEditing = false;
-      this.$emit('update', this.editedValue);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .contact-attribute {
   margin-bottom: var(--space-small);

app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue

@@ -1,28 +1,3 @@
-<template>
-  <div class="option-item--user">
-    <thumbnail :src="thumbnail" size="28px" :username="name" />
-    <div class="option__user-data">
-      <h5 class="option__title">
-        {{ name }}
-        <span v-if="identifier" class="user-identifier">
-          (ID: {{ identifier }})
-        </span>
-      </h5>
-      <p class="option__body">
-        <span v-if="email" class="email-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
-          {{ email }}
-        </span>
-        <span v-if="phoneNumber" class="phone-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
-          {{ phoneNumber }}
-        </span>
-        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
-      </p>
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from '../../../components/widgets/Thumbnail.vue';
 
@@ -55,6 +30,31 @@ export default {
 };
 </script>
 
+<template>
+  <div class="option-item--user">
+    <thumbnail :src="thumbnail" size="28px" :username="name" />
+    <div class="option__user-data">
+      <h5 class="option__title">
+        {{ name }}
+        <span v-if="identifier" class="user-identifier">
+          (ID: {{ identifier }})
+        </span>
+      </h5>
+      <p class="option__body">
+        <span v-if="email" class="email-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
+        </span>
+        <span v-if="phoneNumber" class="phone-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
+          {{ phoneNumber }}
+        </span>
+        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .option-item--user {
   @apply flex items-center;

app/javascript/dashboard/modules/contact/components/ContactFields.vue

@@ -1,3 +1,53 @@
+<script>
+import Attribute from './ContactAttribute.vue';
+
+export default {
+  components: { Attribute },
+  props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    additionalAttributes() {
+      return this.contact.additional_attributes || {};
+    },
+    company() {
+      const { company = {} } = this.contact;
+      return company;
+    },
+    customAttributes() {
+      const { custom_attributes: customAttributes = {} } = this.contact;
+      return customAttributes;
+    },
+    customAttributekeys() {
+      return Object.keys(this.customAttributes).filter(key => {
+        const value = this.customAttributes[key];
+        return value !== null && value !== undefined;
+      });
+    },
+  },
+  methods: {
+    onEmailUpdate(value) {
+      this.$emit('update', { email: value });
+    },
+    onPhoneUpdate(value) {
+      this.$emit('update', { phone_number: value });
+    },
+    onLocationUpdate(value) {
+      this.$emit('update', { location: value });
+    },
+    handleCustomCreate() {
+      this.$emit('create-attribute');
+    },
+    onCustomAttributeUpdate(key, value) {
+      this.$emit('update', { custom_attributes: { [key]: value } });
+    },
+  },
+};
+</script>
 <template>
   <div class="contact-fields">
     <h3 class="text-lg title">
@@ -51,56 +101,6 @@
     </woot-button>
   </div>
 </template>
-<script>
-import Attribute from './ContactAttribute.vue';
-
-export default {
-  components: { Attribute },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  computed: {
-    additionalAttributes() {
-      return this.contact.additional_attributes || {};
-    },
-    company() {
-      const { company = {} } = this.contact;
-      return company;
-    },
-    customAttributes() {
-      const { custom_attributes: customAttributes = {} } = this.contact;
-      return customAttributes;
-    },
-    customAttributekeys() {
-      return Object.keys(this.customAttributes).filter(key => {
-        const value = this.customAttributes[key];
-        return value !== null && value !== undefined;
-      });
-    },
-  },
-  methods: {
-    onEmailUpdate(value) {
-      this.$emit('update', { email: value });
-    },
-    onPhoneUpdate(value) {
-      this.$emit('update', { phone_number: value });
-    },
-    onLocationUpdate(value) {
-      this.$emit('update', { location: value });
-    },
-    handleCustomCreate() {
-      this.$emit('create-attribute');
-    },
-    onCustomAttributeUpdate(key, value) {
-      this.$emit('update', { custom_attributes: { [key]: value } });
-    },
-  },
-};
-</script>
 
 <style scoped lang="scss">
 .contact-fields {

app/javascript/dashboard/modules/contact/components/ContactIntro.vue

@@ -1,46 +1,3 @@
-<template>
-  <div class="contact--intro">
-    <thumbnail
-      :src="contact.thumbnail"
-      size="64px"
-      :username="contact.name"
-      :status="contact.availability_status"
-    />
-
-    <div class="contact--details">
-      <h2 class="text-lg contact--name">
-        {{ contact.name }}
-      </h2>
-      <h3 class="text-base contact--work">
-        {{ contact.title }}
-        <i v-if="company.name" class="icon ion-minus-round" />
-        <span class="company-name">{{ company.name }}</span>
-      </h3>
-      <p v-if="additionalAttributes.description" class="contact--bio">
-        {{ additionalAttributes.description }}
-      </p>
-      <social-icons :social-profiles="socialProfiles" />
-    </div>
-    <div class="contact-actions">
-      <woot-button
-        class="new-message"
-        size="small expanded"
-        icon="ion-paper-airplane"
-        @click="onNewMessageClick"
-      >
-        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="small expanded"
-        icon="edit"
-        @click="onEditClick"
-      >
-        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from 'dashboard/routes/dashboard/conversation/contact/SocialIcons.vue';
@@ -84,6 +41,49 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="contact--intro">
+    <thumbnail
+      :src="contact.thumbnail"
+      size="64px"
+      :username="contact.name"
+      :status="contact.availability_status"
+    />
+
+    <div class="contact--details">
+      <h2 class="text-lg contact--name">
+        {{ contact.name }}
+      </h2>
+      <h3 class="text-base contact--work">
+        {{ contact.title }}
+        <i v-if="company.name" class="icon ion-minus-round" />
+        <span class="company-name">{{ company.name }}</span>
+      </h3>
+      <p v-if="additionalAttributes.description" class="contact--bio">
+        {{ additionalAttributes.description }}
+      </p>
+      <social-icons :social-profiles="socialProfiles" />
+    </div>
+    <div class="contact-actions">
+      <woot-button
+        class="new-message"
+        size="small expanded"
+        icon="ion-paper-airplane"
+        @click="onNewMessageClick"
+      >
+        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
+      </woot-button>
+      <woot-button
+        variant="hollow"
+        size="small expanded"
+        icon="edit"
+        @click="onEditClick"
+      >
+        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
 
 <style scoped lang="scss">
 .contact--details {

app/javascript/dashboard/modules/contact/components/ContactPanel.vue

@@ -1,34 +1,3 @@
-<template>
-  <div class="panel">
-    <contact-intro
-      :contact="contact"
-      @message="toggleConversationModal"
-      @edit="toggleEditModal"
-    />
-    <contact-fields
-      :contact="contact"
-      @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
-    />
-    <edit-contact
-      v-if="showEditModal"
-      :show="showEditModal"
-      :contact="contact"
-      @cancel="toggleEditModal"
-    />
-    <new-conversation
-      v-if="enableNewConversation"
-      :show="showConversationModal"
-      :contact="contact"
-      @cancel="toggleConversationModal"
-    />
-    <add-custom-attribute
-      :show="showCustomAttributeModal"
-      @cancel="toggleCustomAttributeModal"
-      @create="createCustomAttribute"
-    />
-  </div>
-</template>
 <script>
 import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact.vue';
 import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation.vue';
@@ -97,6 +66,37 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="panel">
+    <contact-intro
+      :contact="contact"
+      @message="toggleConversationModal"
+      @edit="toggleEditModal"
+    />
+    <contact-fields
+      :contact="contact"
+      @update="updateField"
+      @create-attribute="toggleCustomAttributeModal"
+    />
+    <edit-contact
+      v-if="showEditModal"
+      :show="showEditModal"
+      :contact="contact"
+      @cancel="toggleEditModal"
+    />
+    <new-conversation
+      v-if="enableNewConversation"
+      :show="showConversationModal"
+      :contact="contact"
+      @cancel="toggleConversationModal"
+    />
+    <add-custom-attribute
+      :show="showCustomAttributeModal"
+      @cancel="toggleCustomAttributeModal"
+      @create="createCustomAttribute"
+    />
+  </div>
+</template>
 
 <style scoped lang="scss">
 .panel {

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -1,3 +1,70 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+
+import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
+import ContactDropdownItem from './ContactDropdownItem.vue';
+
+export default {
+  components: { MergeContactSummary, ContactDropdownItem },
+  props: {
+    primaryContact: {
+      type: Object,
+      required: true,
+    },
+    isSearching: {
+      type: Boolean,
+      default: false,
+    },
+    isMerging: {
+      type: Boolean,
+      default: false,
+    },
+    searchResults: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations: {
+    primaryContact: {
+      required,
+    },
+    parentContact: {
+      required,
+    },
+  },
+  data() {
+    return {
+      parentContact: undefined,
+    };
+  },
+
+  computed: {
+    parentContactName() {
+      return this.parentContact ? this.parentContact.name : '';
+    },
+  },
+  methods: {
+    searchChange(query) {
+      this.$emit('search', query);
+    },
+    onSubmit() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.$emit('submit', this.parentContact.id);
+    },
+    onCancel() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>
+
 <template>
   <form @submit.prevent="onSubmit">
     <div>
@@ -113,73 +180,6 @@
   </form>
 </template>
 
-<script>
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-
-import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
-import ContactDropdownItem from './ContactDropdownItem.vue';
-
-export default {
-  components: { MergeContactSummary, ContactDropdownItem },
-  props: {
-    primaryContact: {
-      type: Object,
-      required: true,
-    },
-    isSearching: {
-      type: Boolean,
-      default: false,
-    },
-    isMerging: {
-      type: Boolean,
-      default: false,
-    },
-    searchResults: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  validations: {
-    primaryContact: {
-      required,
-    },
-    parentContact: {
-      required,
-    },
-  },
-  data() {
-    return {
-      parentContact: undefined,
-    };
-  },
-
-  computed: {
-    parentContactName() {
-      return this.parentContact ? this.parentContact.name : '';
-    },
-  },
-  methods: {
-    searchChange(query) {
-      this.$emit('search', query);
-    },
-    onSubmit() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      this.$emit('submit', this.parentContact.id);
-    },
-    onCancel() {
-      this.$emit('cancel');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 /* TDOD: Clean errors in forms style */
 .error .message {

app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue

@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    primaryContactName: {
+      type: String,
+      default: '',
+    },
+    parentContactName: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-if="parentContactName"
@@ -31,18 +46,3 @@
     </ul>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    primaryContactName: {
-      type: String,
-      default: '',
-    },
-    parentContactName: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -1,108 +1,3 @@
-<template>
-  <div class="context-menu">
-    <!-- Add To Canned Responses -->
-    <woot-modal
-      v-if="isCannedResponseModalOpen && enabledOptions['cannedResponse']"
-      :show.sync="isCannedResponseModalOpen"
-      :on-close="hideCannedResponseModal"
-    >
-      <add-canned-modal
-        :response-content="plainTextContent"
-        :on-close="hideCannedResponseModal"
-      />
-    </woot-modal>
-    <!-- Translate Content -->
-    <translate-modal
-      v-if="showTranslateModal"
-      :content="messageContent"
-      :content-attributes="contentAttributes"
-      @close="onCloseTranslateModal"
-    />
-    <!-- Confirm Deletion -->
-    <woot-delete-modal
-      v-if="showDeleteModal"
-      class="context-menu--delete-modal"
-      :show.sync="showDeleteModal"
-      :on-close="closeDeleteModal"
-      :on-confirm="confirmDeletion"
-      :title="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.TITLE')"
-      :message="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.MESSAGE')"
-      :confirm-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.DELETE')"
-      :reject-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.CANCEL')"
-    />
-    <woot-button
-      icon="more-vertical"
-      color-scheme="secondary"
-      variant="clear"
-      size="small"
-      @click="handleOpen"
-    />
-    <woot-context-menu
-      v-if="isOpen && !isCannedResponseModalOpen"
-      :x="contextMenuPosition.x"
-      :y="contextMenuPosition.y"
-      @close="handleClose"
-    >
-      <div class="menu-container">
-        <menu-item
-          v-if="enabledOptions['replyTo']"
-          :option="{
-            icon: 'arrow-reply',
-            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
-          }"
-          variant="icon"
-          @click="handleReplyTo"
-        />
-        <menu-item
-          v-if="enabledOptions['copy']"
-          :option="{
-            icon: 'clipboard',
-            label: $t('CONVERSATION.CONTEXT_MENU.COPY'),
-          }"
-          variant="icon"
-          @click="handleCopy"
-        />
-        <menu-item
-          v-if="enabledOptions['copy']"
-          :option="{
-            icon: 'translate',
-            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
-          }"
-          variant="icon"
-          @click="handleTranslate"
-        />
-        <hr />
-        <menu-item
-          :option="{
-            icon: 'link',
-            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
-          }"
-          variant="icon"
-          @click="copyLinkToMessage"
-        />
-        <menu-item
-          v-if="enabledOptions['cannedResponse']"
-          :option="{
-            icon: 'comment-add',
-            label: $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'),
-          }"
-          variant="icon"
-          @click="showCannedResponseModal"
-        />
-        <hr v-if="enabledOptions['delete']" />
-        <menu-item
-          v-if="enabledOptions['delete']"
-          :option="{
-            icon: 'delete',
-            label: $t('CONVERSATION.CONTEXT_MENU.DELETE'),
-          }"
-          variant="icon"
-          @click="openDeleteModal"
-        />
-      </div>
-    </woot-context-menu>
-  </div>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
@@ -245,6 +140,111 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="context-menu">
+    <!-- Add To Canned Responses -->
+    <woot-modal
+      v-if="isCannedResponseModalOpen && enabledOptions['cannedResponse']"
+      :show.sync="isCannedResponseModalOpen"
+      :on-close="hideCannedResponseModal"
+    >
+      <add-canned-modal
+        :response-content="plainTextContent"
+        :on-close="hideCannedResponseModal"
+      />
+    </woot-modal>
+    <!-- Translate Content -->
+    <translate-modal
+      v-if="showTranslateModal"
+      :content="messageContent"
+      :content-attributes="contentAttributes"
+      @close="onCloseTranslateModal"
+    />
+    <!-- Confirm Deletion -->
+    <woot-delete-modal
+      v-if="showDeleteModal"
+      class="context-menu--delete-modal"
+      :show.sync="showDeleteModal"
+      :on-close="closeDeleteModal"
+      :on-confirm="confirmDeletion"
+      :title="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.TITLE')"
+      :message="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.MESSAGE')"
+      :confirm-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.DELETE')"
+      :reject-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.CANCEL')"
+    />
+    <woot-button
+      icon="more-vertical"
+      color-scheme="secondary"
+      variant="clear"
+      size="small"
+      @click="handleOpen"
+    />
+    <woot-context-menu
+      v-if="isOpen && !isCannedResponseModalOpen"
+      :x="contextMenuPosition.x"
+      :y="contextMenuPosition.y"
+      @close="handleClose"
+    >
+      <div class="menu-container">
+        <menu-item
+          v-if="enabledOptions['replyTo']"
+          :option="{
+            icon: 'arrow-reply',
+            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
+          }"
+          variant="icon"
+          @click="handleReplyTo"
+        />
+        <menu-item
+          v-if="enabledOptions['copy']"
+          :option="{
+            icon: 'clipboard',
+            label: $t('CONVERSATION.CONTEXT_MENU.COPY'),
+          }"
+          variant="icon"
+          @click="handleCopy"
+        />
+        <menu-item
+          v-if="enabledOptions['copy']"
+          :option="{
+            icon: 'translate',
+            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
+          }"
+          variant="icon"
+          @click="handleTranslate"
+        />
+        <hr />
+        <menu-item
+          :option="{
+            icon: 'link',
+            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
+          }"
+          variant="icon"
+          @click="copyLinkToMessage"
+        />
+        <menu-item
+          v-if="enabledOptions['cannedResponse']"
+          :option="{
+            icon: 'comment-add',
+            label: $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'),
+          }"
+          variant="icon"
+          @click="showCannedResponseModal"
+        />
+        <hr v-if="enabledOptions['delete']" />
+        <menu-item
+          v-if="enabledOptions['delete']"
+          :option="{
+            icon: 'delete',
+            label: $t('CONVERSATION.CONTEXT_MENU.DELETE'),
+          }"
+          variant="icon"
+          @click="openDeleteModal"
+        />
+      </div>
+    </woot-context-menu>
+  </div>
+</template>
 <style lang="scss" scoped>
 .menu-container {
   @apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;

app/javascript/dashboard/modules/notes/NotesOnContactPage.vue

@@ -1,12 +1,3 @@
-<template>
-  <note-list
-    :is-fetching="uiFlags.isFetching"
-    :notes="notes"
-    @add="onAdd"
-    @delete="onDelete"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import NoteList from './components/NoteList.vue';
@@ -48,3 +39,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <note-list
+    :is-fetching="uiFlags.isFetching"
+    :notes="notes"
+    @add="onAdd"
+    @delete="onDelete"
+  />
+</template>

app/javascript/dashboard/modules/notes/components/AddNote.vue

@@ -1,26 +1,3 @@
-<template>
-  <div
-    class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
-  >
-    <woot-message-editor
-      v-model="noteContent"
-      class="input--note"
-      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
-      :enable-suggestions="false"
-    />
-    <div class="flex justify-end w-full">
-      <woot-button
-        color-scheme="warning"
-        :title="$t('NOTES.ADD.TITLE')"
-        :is-disabled="buttonDisabled"
-        @click="onAdd"
-      >
-        {{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -59,6 +36,29 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
+  >
+    <woot-message-editor
+      v-model="noteContent"
+      class="input--note"
+      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+      :enable-suggestions="false"
+    />
+    <div class="flex justify-end w-full">
+      <woot-button
+        color-scheme="warning"
+        :title="$t('NOTES.ADD.TITLE')"
+        :is-disabled="buttonDisabled"
+        @click="onAdd"
+      >
+        {{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .input--note {
   &::v-deep .ProseMirror-menubar {

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -1,55 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
-  >
-    <div class="flex items-end justify-between gap-1 text-xs">
-      <div class="flex items-center">
-        <thumbnail
-          :title="noteAuthorName"
-          :src="noteAuthor.thumbnail"
-          :username="noteAuthorName"
-          size="20px"
-        />
-        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
-          <span class="font-medium text-slate-800 dark:text-slate-100">
-            {{ noteAuthorName }}
-          </span>
-          <span class="text-slate-700 dark:text-slate-100">
-            {{ $t('NOTES.LIST.LABEL') }}
-          </span>
-          <span class="font-medium text-slate-700 dark:text-slate-100">
-            {{ readableTime }}
-          </span>
-        </div>
-      </div>
-      <div class="flex invisible actions">
-        <woot-button
-          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
-          variant="smooth"
-          size="tiny"
-          icon="delete"
-          color-scheme="secondary"
-          @click="toggleDeleteModal"
-        />
-      </div>
-      <woot-delete-modal
-        v-if="showDeleteModal"
-        :show.sync="showDeleteModal"
-        :on-close="closeDelete"
-        :on-confirm="confirmDeletion"
-        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
-        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
-        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
-        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
-      />
-    </div>
-    <p
-      v-dompurify-html="formatMessage(note || '')"
-      class="mt-4 note__content"
-    />
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -115,6 +63,58 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
+  >
+    <div class="flex items-end justify-between gap-1 text-xs">
+      <div class="flex items-center">
+        <thumbnail
+          :title="noteAuthorName"
+          :src="noteAuthor.thumbnail"
+          :username="noteAuthorName"
+          size="20px"
+        />
+        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
+          <span class="font-medium text-slate-800 dark:text-slate-100">
+            {{ noteAuthorName }}
+          </span>
+          <span class="text-slate-700 dark:text-slate-100">
+            {{ $t('NOTES.LIST.LABEL') }}
+          </span>
+          <span class="font-medium text-slate-700 dark:text-slate-100">
+            {{ readableTime }}
+          </span>
+        </div>
+      </div>
+      <div class="flex invisible actions">
+        <woot-button
+          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
+          variant="smooth"
+          size="tiny"
+          icon="delete"
+          color-scheme="secondary"
+          @click="toggleDeleteModal"
+        />
+      </div>
+      <woot-delete-modal
+        v-if="showDeleteModal"
+        :show.sync="showDeleteModal"
+        :on-close="closeDelete"
+        :on-confirm="confirmDeletion"
+        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
+        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
+        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
+        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
+      />
+    </div>
+    <p
+      v-dompurify-html="formatMessage(note || '')"
+      class="mt-4 note__content"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 // For RTL direction view
 .app-rtl--wrapper {

app/javascript/dashboard/modules/notes/components/NoteList.vue

@@ -1,27 +1,3 @@
-<template>
-  <div>
-    <add-note @add="onAddNote" />
-    <contact-note
-      v-for="note in notes"
-      :id="note.id"
-      :key="note.id"
-      :note="note.content"
-      :user="note.user"
-      :created-at="note.created_at"
-      @edit="onEditNote"
-      @delete="onDeleteNote"
-    />
-
-    <div v-if="isFetching" class="text-center p-4 text-base">
-      <spinner size="" />
-      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
-    </div>
-    <div v-else-if="!notes.length" class="text-center p-4 text-base">
-      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
 import AddNote from './AddNote.vue';
 import ContactNote from './ContactNote.vue';
@@ -58,3 +34,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <add-note @add="onAddNote" />
+    <contact-note
+      v-for="note in notes"
+      :id="note.id"
+      :key="note.id"
+      :note="note.content"
+      :user="note.user"
+      :created-at="note.created_at"
+      @edit="onEditNote"
+      @delete="onDeleteNote"
+    />
+
+    <div v-if="isFetching" class="text-center p-4 text-base">
+      <spinner size="" />
+      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
+    </div>
+    <div v-else-if="!notes.length" class="text-center p-4 text-base">
+      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/modules/search/components/MessageContent.vue

@@ -1,20 +1,3 @@
-<template>
-  <blockquote
-    ref="messageContainer"
-    class="message border-l-2 border-slate-100 dark:border-slate-700"
-  >
-    <p class="header">
-      <strong class="text-slate-700 dark:text-slate-100">
-        {{ author }}
-      </strong>
-      {{ $t('SEARCH.WROTE') }}
-    </p>
-    <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
-      <div v-dompurify-html="prepareContent(content)" class="message-content" />
-    </read-more>
-  </blockquote>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import ReadMore from './ReadMore.vue';
@@ -81,6 +64,23 @@ export default {
 };
 </script>
 
+<template>
+  <blockquote
+    ref="messageContainer"
+    class="message border-l-2 border-slate-100 dark:border-slate-700"
+  >
+    <p class="header">
+      <strong class="text-slate-700 dark:text-slate-100">
+        {{ author }}
+      </strong>
+      {{ $t('SEARCH.WROTE') }}
+    </p>
+    <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
+      <div v-dompurify-html="prepareContent(content)" class="message-content" />
+    </read-more>
+  </blockquote>
+</template>
+
 <style scoped lang="scss">
 .message {
   @apply py-0 px-2 mt-2;

app/javascript/dashboard/modules/search/components/ReadMore.vue

@@ -1,3 +1,14 @@
+<script>
+export default {
+  props: {
+    shrink: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="read-more">
     <div
@@ -22,17 +33,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    shrink: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
 <style scoped>
 @tailwind components;
 @layer components {

app/javascript/dashboard/modules/search/components/SearchHeader.vue

@@ -1,27 +1,3 @@
-<template>
-  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
-    <div class="icon-container">
-      <fluent-icon icon="search" class="icon" aria-hidden="true" />
-    </div>
-    <input
-      ref="searchInput"
-      type="search"
-      class="dark:bg-slate-900"
-      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
-      :value="searchQuery"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="debounceSearch"
-    />
-    <woot-label
-      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
-      :show-close="false"
-      small
-      class="helper-label"
-    />
-  </div>
-</template>
-
 <script>
 export default {
   data() {
@@ -71,6 +47,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
+    <div class="icon-container">
+      <fluent-icon icon="search" class="icon" aria-hidden="true" />
+    </div>
+    <input
+      ref="searchInput"
+      type="search"
+      class="dark:bg-slate-900"
+      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
+      :value="searchQuery"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="debounceSearch"
+    />
+    <woot-label
+      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
+      :show-close="false"
+      small
+      class="helper-label"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .input-container {
   transition: border-bottom 0.2s ease-in-out;

app/javascript/dashboard/modules/search/components/SearchInput.vue

@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
 <template>
   <div class="search-input-box">
     <woot-button
@@ -17,21 +32,6 @@
     </woot-button>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    tabs: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {},
-};
-</script>
 <style lang="scss" scoped>
 .search-input-box {
   @apply p-2;

app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue

@@ -1,27 +1,3 @@
-<template>
-  <router-link :to="navigateTo" class="contact-item">
-    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
-    <div class="ml-2 rtl:mr-2 rtl:ml-0">
-      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
-        {{ name }}
-      </h5>
-      <p
-        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
-      >
-        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
-          email
-        }}</span>
-        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
-          •
-        </span>
-        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
-          {{ phone }}
-        </span>
-      </p>
-    </div>
-  </router-link>
-</template>
-
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';
 export default {
@@ -59,6 +35,30 @@ export default {
 };
 </script>
 
+<template>
+  <router-link :to="navigateTo" class="contact-item">
+    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
+    <div class="ml-2 rtl:mr-2 rtl:ml-0">
+      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
+        {{ name }}
+      </h5>
+      <p
+        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
+      >
+        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
+          email
+        }}</span>
+        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+          •
+        </span>
+        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
+          {{ phone }}
+        </span>
+      </p>
+    </div>
+  </router-link>
+</template>
+
 <style scoped lang="scss">
 .contact-item {
   @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;

app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue

@@ -1,26 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.CONTACTS')"
-    :empty="!contacts.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="contacts.length" class="search-list">
-      <li v-for="contact in contacts" :key="contact.id">
-        <search-result-contact-item
-          :id="contact.id"
-          :name="contact.name"
-          :email="contact.email"
-          :phone="contact.phone_number"
-          :account-id="accountId"
-          :thumbnail="contact.thumbnail"
-        />
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -57,3 +34,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <search-result-section
+    :title="$t('SEARCH.SECTION.CONTACTS')"
+    :empty="!contacts.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="contacts.length" class="search-list">
+      <li v-for="contact in contacts" :key="contact.id">
+        <search-result-contact-item
+          :id="contact.id"
+          :name="contact.name"
+          :email="contact.email"
+          :phone="contact.phone_number"
+          :account-id="accountId"
+          :thumbnail="contact.thumbnail"
+        />
+      </li>
+    </ul>
+  </search-result-section>
+</template>

app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue

@@ -1,43 +1,3 @@
-<template>
-  <router-link :to="navigateTo" class="conversation-item">
-    <div class="icon-wrap">
-      <fluent-icon icon="chat-multiple" :size="14" />
-    </div>
-    <div class="conversation-details">
-      <div class="meta-wrap">
-        <div class="flex">
-          <woot-label
-            class="conversation-id"
-            :title="`#${id}`"
-            :show-close="false"
-            small
-          />
-          <div class="inbox-name-wrap">
-            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
-          </div>
-        </div>
-        <div>
-          <span class="created-at">{{ createdAtTime }}</span>
-        </div>
-      </div>
-      <div class="user-details">
-        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
-          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
-          {{ name }}
-        </h5>
-        <h5
-          v-if="email"
-          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
-        >
-          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
-          {{ email }}
-        </h5>
-      </div>
-      <slot />
-    </div>
-  </router-link>
-</template>
-
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime } from 'shared/helpers/timeHelper';
@@ -95,6 +55,46 @@ export default {
 };
 </script>
 
+<template>
+  <router-link :to="navigateTo" class="conversation-item">
+    <div class="icon-wrap">
+      <fluent-icon icon="chat-multiple" :size="14" />
+    </div>
+    <div class="conversation-details">
+      <div class="meta-wrap">
+        <div class="flex">
+          <woot-label
+            class="conversation-id"
+            :title="`#${id}`"
+            :show-close="false"
+            small
+          />
+          <div class="inbox-name-wrap">
+            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
+          </div>
+        </div>
+        <div>
+          <span class="created-at">{{ createdAtTime }}</span>
+        </div>
+      </div>
+      <div class="user-details">
+        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
+          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
+          {{ name }}
+        </h5>
+        <h5
+          v-if="email"
+          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+        >
+          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
+          {{ email }}
+        </h5>
+      </div>
+      <slot />
+    </div>
+  </router-link>
+</template>
+
 <style scoped lang="scss">
 .conversation-item {
   @apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;

app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue

@@ -1,26 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
-    :empty="!conversations.length"
-    :query="query"
-    :show-title="showTitle || isFetching"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="conversations.length" class="search-list">
-      <li v-for="conversation in conversations" :key="conversation.id">
-        <search-result-conversation-item
-          :id="conversation.id"
-          :name="conversation.contact.name"
-          :email="conversation.contact.email"
-          :account-id="accountId"
-          :inbox="conversation.inbox"
-          :created-at="conversation.created_at"
-        />
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import SearchResultSection from './SearchResultSection.vue';
@@ -56,3 +33,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <search-result-section
+    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
+    :empty="!conversations.length"
+    :query="query"
+    :show-title="showTitle || isFetching"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="conversations.length" class="search-list">
+      <li v-for="conversation in conversations" :key="conversation.id">
+        <search-result-conversation-item
+          :id="conversation.id"
+          :name="conversation.contact.name"
+          :email="conversation.contact.email"
+          :account-id="accountId"
+          :inbox="conversation.inbox"
+          :created-at="conversation.created_at"
+        />
+      </li>
+    </ul>
+  </search-result-section>
+</template>

app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue

@@ -1,31 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.MESSAGES')"
-    :empty="!messages.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="messages.length" class="search-list">
-      <li v-for="message in messages" :key="message.id">
-        <search-result-conversation-item
-          :id="message.conversation_id"
-          :account-id="accountId"
-          :inbox="message.inbox"
-          :created-at="message.created_at"
-          :message-id="message.id"
-        >
-          <message-content
-            :author="getName(message)"
-            :content="message.content"
-            :search-term="query"
-          />
-        </search-result-conversation-item>
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import SearchResultConversationItem from './SearchResultConversationItem.vue';
@@ -70,3 +42,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <search-result-section
+    :title="$t('SEARCH.SECTION.MESSAGES')"
+    :empty="!messages.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="messages.length" class="search-list">
+      <li v-for="message in messages" :key="message.id">
+        <search-result-conversation-item
+          :id="message.conversation_id"
+          :account-id="accountId"
+          :inbox="message.inbox"
+          :created-at="message.created_at"
+          :message-id="message.id"
+        >
+          <message-content
+            :author="getName(message)"
+            :content="message.content"
+            :search-term="query"
+          />
+        </search-result-conversation-item>
+      </li>
+    </ul>
+  </search-result-section>
+</template>

app/javascript/dashboard/modules/search/components/SearchResultSection.vue

@@ -1,19 +1,3 @@
-<template>
-  <section class="result-section">
-    <div v-if="showTitle" class="header">
-      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
-    </div>
-    <woot-loading-state v-if="isFetching" :message="'Searching'" />
-    <slot v-else />
-    <div v-if="empty && !isFetching" class="empty">
-      <fluent-icon icon="info" size="16px" class="icon" />
-      <p class="empty-state__text">
-        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
-      </p>
-    </div>
-  </section>
-</template>
-
 <script>
 export default {
   props: {
@@ -46,6 +30,22 @@ export default {
 };
 </script>
 
+<template>
+  <section class="result-section">
+    <div v-if="showTitle" class="header">
+      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
+    </div>
+    <woot-loading-state v-if="isFetching" :message="'Searching'" />
+    <slot v-else />
+    <div v-if="empty && !isFetching" class="empty">
+      <fluent-icon icon="info" size="16px" class="icon" />
+      <p class="empty-state__text">
+        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
+      </p>
+    </div>
+  </section>
+</template>
+
 <style scoped lang="scss">
 .result-section {
   @apply my-2 mx-0;

app/javascript/dashboard/modules/search/components/SearchTabs.vue

@@ -1,16 +1,3 @@
-<template>
-  <div class="tab-container">
-    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
-      <woot-tabs-item
-        v-for="item in tabs"
-        :key="item.key"
-        :name="item.name"
-        :count="item.count"
-      />
-    </woot-tabs>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -43,6 +30,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="tab-container">
+    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
+      <woot-tabs-item
+        v-for="item in tabs"
+        :key="item.key"
+        :name="item.name"
+        :count="item.count"
+      />
+    </woot-tabs>
+  </div>
+</template>
 <style lang="scss" scoped>
 .tab-container {
   @apply mt-1 border-b border-solid border-slate-100 dark:border-slate-800/50;

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -1,71 +1,3 @@
-<template>
-  <div class="search-page">
-    <div class="page-header">
-      <woot-button
-        icon="chevron-left"
-        variant="smooth"
-        size="small "
-        class="back-button"
-        @click="onBack"
-      >
-        {{ $t('GENERAL_SETTINGS.BACK') }}
-      </woot-button>
-    </div>
-    <section class="search-root">
-      <header>
-        <search-header @search="onSearch" />
-        <search-tabs
-          v-if="query"
-          :tabs="tabs"
-          :selected-tab="activeTabIndex"
-          @tab-change="tab => (selectedTab = tab)"
-        />
-      </header>
-      <div class="search-results">
-        <div v-if="showResultsSection">
-          <search-result-contacts-list
-            v-if="filterContacts"
-            :is-fetching="uiFlags.contact.isFetching"
-            :contacts="contacts"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-
-          <search-result-messages-list
-            v-if="filterMessages"
-            :is-fetching="uiFlags.message.isFetching"
-            :messages="messages"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-
-          <search-result-conversations-list
-            v-if="filterConversations"
-            :is-fetching="uiFlags.conversation.isFetching"
-            :conversations="conversations"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-        </div>
-        <div v-else-if="showEmptySearchResults" class="empty">
-          <fluent-icon icon="info" size="16px" class="icon" />
-          <p class="empty-state__text">
-            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
-          </p>
-        </div>
-        <div v-else class="empty text-center">
-          <p class="text-center margin-bottom-0">
-            <fluent-icon icon="search" size="24px" class="icon" />
-          </p>
-          <p class="empty-state__text">
-            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
-          </p>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
 <script>
 import SearchHeader from './SearchHeader.vue';
 import SearchTabs from './SearchTabs.vue';
@@ -208,6 +140,74 @@ export default {
 };
 </script>
 
+<template>
+  <div class="search-page">
+    <div class="page-header">
+      <woot-button
+        icon="chevron-left"
+        variant="smooth"
+        size="small "
+        class="back-button"
+        @click="onBack"
+      >
+        {{ $t('GENERAL_SETTINGS.BACK') }}
+      </woot-button>
+    </div>
+    <section class="search-root">
+      <header>
+        <search-header @search="onSearch" />
+        <search-tabs
+          v-if="query"
+          :tabs="tabs"
+          :selected-tab="activeTabIndex"
+          @tab-change="tab => (selectedTab = tab)"
+        />
+      </header>
+      <div class="search-results">
+        <div v-if="showResultsSection">
+          <search-result-contacts-list
+            v-if="filterContacts"
+            :is-fetching="uiFlags.contact.isFetching"
+            :contacts="contacts"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <search-result-messages-list
+            v-if="filterMessages"
+            :is-fetching="uiFlags.message.isFetching"
+            :messages="messages"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <search-result-conversations-list
+            v-if="filterConversations"
+            :is-fetching="uiFlags.conversation.isFetching"
+            :conversations="conversations"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+        </div>
+        <div v-else-if="showEmptySearchResults" class="empty">
+          <fluent-icon icon="info" size="16px" class="icon" />
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
+          </p>
+        </div>
+        <div v-else class="empty text-center">
+          <p class="text-center margin-bottom-0">
+            <fluent-icon icon="search" size="24px" class="icon" />
+          </p>
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .search-page {
   @apply flex flex-col w-full bg-white dark:bg-slate-900;

app/javascript/dashboard/modules/widget-preview/components/Widget.vue

@@ -1,52 +1,3 @@
-<template>
-  <div class="widget-preview-container">
-    <div v-if="isWidgetVisible" class="screen-selector">
-      <input-radio-group
-        name="widget-screen"
-        :items="widgetScreens"
-        :action="handleScreenChange"
-      />
-    </div>
-    <div v-if="isWidgetVisible" class="widget-wrapper">
-      <WidgetHead :config="getWidgetHeadConfig" />
-      <div>
-        <WidgetBody :config="getWidgetBodyConfig" />
-        <WidgetFooter :config="getWidgetFooterConfig" />
-        <div class="branding">
-          <a class="branding-link">
-            <img class="branding-image" :src="globalConfig.logoThumbnail" />
-            <span>
-              {{
-                useInstallationName(
-                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
-                  globalConfig.installationName
-                )
-              }}
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="widget-bubble" :style="getBubblePositionStyle">
-      <button
-        class="bubble"
-        :class="getBubbleTypeClass"
-        :style="{ background: color }"
-        @click="toggleWidget"
-      >
-        <img
-          v-if="!isWidgetVisible"
-          src="~dashboard/assets/images/bubble-logo.svg"
-          alt=""
-        />
-        <div>
-          {{ getWidgetBubbleLauncherTitle }}
-        </div>
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WidgetHead from './WidgetHead.vue';
 import WidgetBody from './WidgetBody.vue';
@@ -198,6 +149,55 @@ export default {
 };
 </script>
 
+<template>
+  <div class="widget-preview-container">
+    <div v-if="isWidgetVisible" class="screen-selector">
+      <input-radio-group
+        name="widget-screen"
+        :items="widgetScreens"
+        :action="handleScreenChange"
+      />
+    </div>
+    <div v-if="isWidgetVisible" class="widget-wrapper">
+      <WidgetHead :config="getWidgetHeadConfig" />
+      <div>
+        <WidgetBody :config="getWidgetBodyConfig" />
+        <WidgetFooter :config="getWidgetFooterConfig" />
+        <div class="branding">
+          <a class="branding-link">
+            <img class="branding-image" :src="globalConfig.logoThumbnail" />
+            <span>
+              {{
+                useInstallationName(
+                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
+                  globalConfig.installationName
+                )
+              }}
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="widget-bubble" :style="getBubblePositionStyle">
+      <button
+        class="bubble"
+        :class="getBubbleTypeClass"
+        :style="{ background: color }"
+        @click="toggleWidget"
+      >
+        <img
+          v-if="!isWidgetVisible"
+          src="~dashboard/assets/images/bubble-logo.svg"
+          alt=""
+        />
+        <div>
+          {{ getWidgetBubbleLauncherTitle }}
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .screen-selector {
   display: flex;

app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue

@@ -1,3 +1,42 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  name: 'WidgetBody',
+  components: {
+    Thumbnail,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    getStatusText() {
+      return this.config.isOnline
+        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
+        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
+    },
+    getWidgetBodyClass() {
+      return {
+        'with-chat-view': !this.config.isDefaultScreen,
+        'with-heading-or-title':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline),
+        'with-heading-or-title-without-logo':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline) &&
+          !this.config.logo,
+        'without-heading-and-title':
+          this.config.isDefaultScreen &&
+          !this.config.welcomeHeading &&
+          !this.config.welcomeTagline,
+      };
+    },
+  },
+};
+</script>
+
 <template>
   <div class="widget-body-container">
     <div v-if="config.isDefaultScreen" class="availability-content">
@@ -46,45 +85,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  name: 'WidgetBody',
-  components: {
-    Thumbnail,
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    getStatusText() {
-      return this.config.isOnline
-        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
-        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
-    },
-    getWidgetBodyClass() {
-      return {
-        'with-chat-view': !this.config.isDefaultScreen,
-        'with-heading-or-title':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline),
-        'with-heading-or-title-without-logo':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline) &&
-          !this.config.logo,
-        'without-heading-and-title':
-          this.config.isDefaultScreen &&
-          !this.config.welcomeHeading &&
-          !this.config.welcomeTagline,
-      };
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .widget-body-container {
   .availability-content {

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -1,3 +1,21 @@
+<script>
+import CustomButton from 'dashboard/components/buttons/Button.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
+export default {
+  name: 'WidgetFooter',
+  components: {
+    CustomButton,
+    ResizableTextArea,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+};
+</script>
+
 <template>
   <div class="footer-wrap">
     <custom-button
@@ -26,24 +44,6 @@
   </div>
 </template>
 
-<script>
-import CustomButton from 'dashboard/components/buttons/Button.vue';
-import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-export default {
-  name: 'WidgetFooter',
-  components: {
-    CustomButton,
-    ResizableTextArea,
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables.scss';
 .footer-wrap {

app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue

@@ -1,3 +1,25 @@
+<script>
+export default {
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    isDefaultScreen() {
+      return (
+        this.config.isDefaultScreen &&
+        ((this.config.welcomeHeading &&
+          this.config.welcomeHeading.length !== 0) ||
+          (this.config.welcomeTagLine &&
+            this.config.welcomeTagline.length !== 0))
+      );
+    },
+  },
+};
+</script>
+
 <template>
   <div class="header-wrapper">
     <div class="header-branding">
@@ -24,28 +46,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    isDefaultScreen() {
-      return (
-        this.config.isDefaultScreen &&
-        ((this.config.welcomeHeading &&
-          this.config.welcomeHeading.length !== 0) ||
-          (this.config.welcomeTagLine &&
-            this.config.welcomeTagline.length !== 0))
-      );
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .header-wrapper {
   background-color: var(--white);