feat: Revamps search to use new search API's (#6582)

* feat: Revamps search to use new search API's

* Fixes search result spacing

* Fixes message result

* Fixes issue with empty search results

* Remove console errors

* Remove console errors

* Fix console errors, canned responses

* Fixes message rendering on results

* Highlights search term

* Fixes html rendering for emails

* FIxes email rendering issues

* Removes extra spaces and line breaks

---------

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -0,0 +1,61 @@
+<template>
+  <search-result-section
+    :title="$t('SEARCH.SECTION.MESSAGES')"
+    :empty="!messages.length"
+    :query="query"
+  >
+    <ul 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-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';
+import SearchResultSection from './SearchResultSection.vue';
+import MessageContent from './MessageContent';
+
+export default {
+  components: {
+    SearchResultConversationItem,
+    SearchResultSection,
+    MessageContent,
+  },
+  props: {
+    messages: {
+      type: Array,
+      default: () => [],
+    },
+    query: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+    }),
+  },
+  methods: {
+    getName(message) {
+      return message && message.sender && message.sender.name
+        ? message.sender.name
+        : this.$t('SEARCH.BOT_LABEL');
+    },
+  },
+};
+</script>