feat: Include email in the searched result (#7397)

app/javascript/dashboard/i18n/locale/en/search.json

@@ -18,6 +18,8 @@
     "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results. ",
     "BOT_LABEL": "Bot",
     "READ_MORE": "Read more",
-    "WROTE": "wrote:"
+    "WROTE": "wrote:",
+    "FROM": "from",
+    "EMAIL": "email"
   }
 }

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

@@ -20,10 +20,16 @@
           <span class="created-at">{{ createdAtTime }}</span>
         </div>
       </div>
+      <div class="user-details">
         <h5 v-if="name" class="text-block-title name">
-        <span class="pre-text">from:</span>
+          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
           {{ name }}
         </h5>
+        <h5 v-if="email" class="text-block-title email text-truncate">
+          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
+          {{ email }}
+        </h5>
+      </div>
       <slot />
     </div>
   </router-link>
@@ -52,6 +58,10 @@ export default {
       type: String,
       default: '',
     },
+    email: {
+      type: String,
+      default: '',
+    },
     accountId: {
       type: [String, Number],
       default: '',
@@ -128,8 +138,13 @@ export default {
   flex-grow: 1;
   min-width: 0;
 }
-.conversation-id,
+
 .name {
+  flex-shrink: 0;
+}
+.conversation-id,
+.name,
+.email {
   margin: 0;
 }
 .created-at,
@@ -138,4 +153,9 @@ export default {
   font-size: var(--font-size-mini);
   font-weight: var(--font-weight-normal);
 }
+
+.user-details {
+  display: flex;
+  gap: var(--space-small);
+}
 </style>

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

@@ -11,6 +11,7 @@
         <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"