feat: compose form improvements (#13668)

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

@@ -5,7 +5,7 @@ import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
 import { debounce } from '@chatwoot/utils';
 import { useMapGetter } from 'dashboard/composables/store.js';
-import { searchContacts } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
+import { createContactSearcher } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 import { fetchContactDetails } from '../helpers/searchHelper';
 
@@ -18,6 +18,8 @@ const props = defineProps({
 
 const emit = defineEmits(['change']);
 
+const searchContacts = createContactSearcher();
+
 const FROM_TYPE = {
   CONTACT: 'contact',
   AGENT: 'agent',
@@ -119,7 +121,10 @@ const debouncedSearch = debounce(async query => {
   }
 
   try {
-    const contacts = await searchContacts(query);
+    const contacts = await searchContacts(query, { skipMinLength: true });
+
+    // null means the request was aborted (a newer search is in-flight),
+    if (contacts === null) return;
 
     // Add selected contact to top if not already in results
     const allContacts = selectedContact.value
@@ -130,9 +135,8 @@ const debouncedSearch = debounce(async query => {
       : contacts;
 
     searchedContacts.value = allContacts;
+    isSearching.value = false;
   } catch {
-    // Ignore error
-  } finally {
     isSearching.value = false;
   }
 }, 300);