feat: Search improvements for conversations (#6645)

* feat: Shows search as a popover * Reverts search from popover to page * Fixes review comments on usability * Fixes keyboard navigation issues
2025-11-02 12:08:01 +00:00 · 2023-03-14 13:09:43 +05:30
parent da76537011
commit cae3ac94cd
10 changed files with 203 additions and 98 deletions
--- a/app/javascript/dashboard/i18n/locale/en/search.json
+++ b/app/javascript/dashboard/i18n/locale/en/search.json
@@ -14,7 +14,8 @@
    "EMPTY_STATE": "No %{item} found for query '%{query}'",
    "EMPTY_STATE_FULL": "No results found for query '%{query}'",
    "PLACEHOLDER_KEYBINDING": "/ to focus",
-    "INPUT_PLACEHOLDER": "Search message content, contact name, email or phone or conversations",
+    "INPUT_PLACEHOLDER": "Search messages, contacts or conversations",
+    "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results.",
    "BOT_LABEL": "Bot",
    "READ_MORE": "Read more",
    "WROTE": "wrote:"
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="input-container">
+  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
    <div class="icon-container">
      <fluent-icon icon="search" class="icon" aria-hidden="true" />
    </div>
@@ -8,11 +8,15 @@
      type="search"
      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
      :value="searchQuery"
+      @focus="onFocus"
+      @blur="onBlur"
      @input="debounceSearch"
    />
-    <div class="key-binding">
-      <span>{{ $t('SEARCH.PLACEHOLDER_KEYBINDING') }}</span>
-    </div>
+    <woot-label
+      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
+      :show-close="false"
+      small
+    />
  </div>
 </template>

@@ -21,6 +25,7 @@ export default {
  data() {
    return {
      searchQuery: '',
+      isInputFocused: false,
    };
  },
  mounted() {
@@ -35,6 +40,12 @@ export default {
      if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
        e.preventDefault();
        this.$refs.searchInput.focus();
+      } else if (
+        e.key === 'Escape' &&
+        document.activeElement.tagName === 'INPUT'
+      ) {
+        e.preventDefault();
+        this.$refs.searchInput.blur();
      }
    },
    debounceSearch(e) {
@@ -43,56 +54,50 @@ export default {
      this.debounce = setTimeout(async () => {
        if (this.searchQuery.length > 2 || this.searchQuery.match(/^[0-9]+$/)) {
          this.$emit('search', this.searchQuery);
+        } else {
+          this.$emit('search', '');
        }
      }, 500);
    },
+    onFocus() {
+      this.isInputFocused = true;
+    },
+    onBlur() {
+      this.isInputFocused = false;
+    },
  },
 };
 </script>

 <style lang="scss" scoped>
+@import 'app/javascript/dashboard/assets/scss/_mixins.scss';
 .input-container {
  position: relative;
-  border-radius: var(--border-radius-normal);
+  display: flex;
+  align-items: center;
+  padding: var(--space-small) var(--space-normal);
+  border-bottom: 1px solid var(--s-100);
+  transition: border-bottom 0.2s ease-in-out;
+
  input[type='search'] {
+    @include ghost-input;
    width: 100%;
-    padding-left: calc(var(--space-large) + var(--space-small));
-    margin-bottom: 0;
-    padding-right: var(--space-mega);
-    &:focus {
-      .icon {
-        color: var(--w-500) !important;
-      }
+    margin: 0;
+  }
+
+  &.is-focused {
+    border-bottom: 1px solid var(--w-100);
+
+    .icon {
+      color: var(--w-400);
    }
  }
 }
 .icon-container {
-  padding-left: var(--space-small);
  display: flex;
  align-items: center;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  position: absolute;
  .icon {
    color: var(--s-400);
  }
 }
-.key-binding {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  padding: var(--space-small) var(--space-small) 0 var(--space-small);
-  span {
-    color: var(--s-400);
-    font-weight: var(--font-weight-medium);
-    font-size: calc(var(--space-slab) + var(--space-micro));
-    padding: 0 var(--space-small);
-    border: 1px solid var(--s-100);
-    border-radius: var(--border-radius-normal);
-    display: inline-flex;
-    align-items: center;
-  }
-}
 </style>
--- a/app/javascript/dashboard/modules/search/components/SearchInput.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="search-input-box">
+    <woot-button
+      class="hollow"
+      size="small"
+      color-scheme="secondary"
+      is-expanded
+    >
+      <div class="search-input">
+        <fluent-icon icon="search" size="14px" class="search--icon" />
+        <span class="text-ellipsis search-placeholder">
+          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
+        </span>
+      </div>
+    </woot-button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.search-input-box {
+  padding: var(--space-small);
+}
+.search--icon {
+  flex-shrink: 0;
+  color: var(--s-500);
+}
+.search-placeholder {
+  color: var(--s-500);
+}
+
+.search-input {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-smaller);
+}
+</style>
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -64,7 +64,7 @@ export default {
  }
 }
 .contact-details {
-  margin-left: var(--space-normal);
+  margin-left: var(--space-small);
 }
 .name {
  margin: 0;
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -113,7 +113,7 @@ export default {
  margin-left: var(--space-smaller);
 }
 .conversation-details {
-  margin-left: var(--space-normal);
+  margin-left: var(--space-small);
  flex-grow: 1;
  min-width: 0;
 }
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -1,6 +1,6 @@
 <template>
-  <section>
-    <div class="label-container">
+  <section class="result-section">
+    <div class="header">
      <h3 class="text-block-title">{{ title }}</h3>
    </div>
    <slot />
@@ -38,17 +38,21 @@ export default {
 </script>

 <style scoped lang="scss">
+.result-section {
+  margin-bottom: var(--space-normal);
+}
 .search-list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-normal) 0;
 }
-.label-container {
+.header {
  position: sticky;
  top: 0;
-  padding: var(--space-small) 0;
+  padding: var(--space-small);
  z-index: 50;
  background: var(--white);
+  margin-bottom: var(--space-micro);
 }

 .empty {
@@ -56,6 +60,7 @@ export default {
  align-items: center;
  justify-content: center;
  padding: var(--space-medium) var(--space-normal);
+  margin: 0 var(--space-small);
  background: var(--s-25);
  border-radius: var(--border-radius-medium);
  .icon {
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -34,7 +34,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .tab-container {
-  margin-left: var(--space-minus-normal);
-  margin-top: var(--space-small);
+  margin-top: var(--space-smaller);
+  border-bottom: 1px solid var(--s-50);
 }
 </style>
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -1,46 +1,63 @@
 <template>
-  <section class="search-root">
-    <woot-button
-      color-scheme="secondary"
-      size="large"
-      icon="dismiss"
-      variant="smooth"
-      class="modal--close"
-      @click="onBack"
-    />
-    <header>
-      <search-header @search="search" />
-      <search-tabs :tabs="tabs" @tab-change="tab => (selectedTab = tab)" />
-    </header>
-    <div class="search-results">
-      <woot-loading-state v-if="uiFlags.isFetching" :message="'Searching'" />
-      <div v-else>
-        <div v-if="all.length">
-          <search-result-contacts-list
-            v-if="filterContacts"
-            :contacts="contacts"
-            :query="query"
-          />
-          <search-result-messages-list
-            v-if="filterMessages"
-            :messages="messages"
-            :query="query"
-          />
-          <search-result-conversations-list
-            v-if="filterConversations"
-            :conversations="conversations"
-            :query="query"
-          />
-        </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 class="width-100">
+    <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"
+          @tab-change="tab => (selectedTab = tab)"
+        />
+      </header>
+      <div class="search-results">
+        <woot-loading-state v-if="uiFlags.isFetching" :message="'Searching'" />
+        <div v-else>
+          <div v-if="all.length">
+            <search-result-contacts-list
+              v-if="filterContacts"
+              :contacts="contacts"
+              :query="query"
+            />
+            <search-result-messages-list
+              v-if="filterMessages"
+              :messages="messages"
+              :query="query"
+            />
+            <search-result-conversations-list
+              v-if="filterConversations"
+              :conversations="conversations"
+              :query="query"
+            />
+          </div>
+          <div v-else-if="showEmptySearchResults && !all.length" 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">
+              <fluent-icon icon="search" size="24px" class="icon" />
+            </p>
+            <p class="empty-state__text">
+              {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
+            </p>
+          </div>
        </div>
      </div>
-    </div>
-  </section>
+    </section>
+  </div>
 </template>

 <script>
@@ -51,6 +68,7 @@ import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
 import { isEmptyObject } from 'dashboard/helper/commons.js';

+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 export default {
@@ -61,12 +79,14 @@ export default {
    SearchResultConversationsList,
    SearchResultMessagesList,
  },
+  mixins: [clickaway],
  data() {
    return {
      selectedTab: 'all',
      query: '',
    };
  },
+
  computed: {
    ...mapGetters({
      fullSearchRecords: 'conversationSearch/getFullSearchRecords',
@@ -147,48 +167,68 @@ export default {
      );
    },
  },
+  beforeDestroy() {
+    this.query = '';
+    this.$store.dispatch('conversationSearch/clearSearchResults');
+  },
+  mounted() {
+    this.$store.dispatch('conversationSearch/clearSearchResults');
+  },
  methods: {
-    search(q) {
+    onSearch(q) {
      this.query = q;
+      if (!q) {
+        this.$store.dispatch('conversationSearch/clearSearchResults');
+        return;
+      }
      this.$track(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
      this.$store.dispatch('conversationSearch/fullSearch', { q });
    },
    onBack() {
-      this.$router.push({ name: 'home' });
+      if (window.history.length > 2) {
+        this.$router.go(-1);
+      } else {
+        this.$router.push({ name: 'home' });
+      }
    },
  },
 };
 </script>

 <style lang="scss" scoped>
+.page-header {
+  display: flex;
+  padding: var(--space-normal);
+}
 .search-root {
-  max-width: 800px;
-  width: 100%;
  margin: 0 auto;
-  height: 100%;
+  max-width: 64rem;
+  min-height: 48rem;
+  width: 100%;
+  height: fit-content;
+  box-shadow: var(--shadow);
  display: flex;
  position: relative;
-  padding: var(--space-normal);
  flex-direction: column;
+  background: white;
+  border-radius: var(--border-radius-large);
+  margin-top: var(--space-large);
+  border-top: 1px solid var(--s-25);
  .search-results {
    flex-grow: 1;
    height: 100%;
+    max-height: 80vh;
    overflow-y: auto;
-    margin-top: var(--space-normal);
+    padding: 0 var(--space-small);
  }
 }
-.modal--close {
-  position: fixed;
-  right: var(--space-small);
-  top: var(--space-small);
-}

 .empty {
  display: flex;
+  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-medium) var(--space-normal);
-  background: var(--s-25);
  border-radius: var(--border-radius-medium);
  .icon {
    color: var(--s-500);
@@ -196,7 +236,7 @@ export default {
  .empty-state__text {
    text-align: center;
    color: var(--s-500);
-    margin: 0 var(--space-small);
+    margin: var(--space-small);
  }
 }
 </style>
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -2,7 +2,7 @@
  <div class="search-wrap">
    <div class="search" :class="{ 'is-active': showSearchBox }">
      <woot-sidemenu-icon />
-      <router-link :to="searchUrl" class="search--link" replace>
+      <router-link :to="searchUrl" class="search--link">
        <div class="icon">
          <fluent-icon icon="search" class="search--icon" size="16" />
        </div>
--- a/app/javascript/dashboard/store/modules/conversationSearch.js
+++ b/app/javascript/dashboard/store/modules/conversationSearch.js
@@ -55,6 +55,9 @@ export const actions = {
      commit(types.FULL_SEARCH_SET_UI_FLAG, { isFetching: false });
    }
  },
+  async clearSearchResults({ commit }) {
+    commit(types.FULL_SEARCH_SET, {});
+  },
 };

 export const mutations = {