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/ReadMore.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="read-more">
+    <div ref="content" :class="{ 'shrink-container': shrink }">
+      <slot />
+      <woot-button
+        v-if="shrink"
+        size="tiny"
+        variant="smooth"
+        color-scheme="primary"
+        class="read-more-button"
+        @click.prevent="$emit('expand')"
+      >
+        {{ $t('SEARCH.READ_MORE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    shrink: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.shrink-container {
+  max-height: 100px;
+  overflow: hidden;
+  position: relative;
+}
+.shrink-container::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%);
+  z-index: 4;
+}
+.read-more-button {
+  max-width: max-content;
+  position: absolute;
+  bottom: var(--space-small);
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 5;
+  box-shadow: var(--box-shadow);
+}
+</style>