refine state search

Author: Jicheng Lu

src/lib/common/RemoteSearchInput.svelte

@@ -11,15 +11,20 @@
 
 	/** @type {string} */
 	export let value;
+    /** @type {string} */
+    export let placeholder = '';
+    /** @type {boolean} */
 	export let disabled = false;
-	export let placeholder = '';
-	/**
-	 * @type {(query: string) => Promise<({id: string; name: string} | string)[]>}
-	 */
-	export let onSearch;
+	/** @type {boolean} */
 	export let loading = false;
+    /** @type {(query: string) => Promise<string[]>} */
+	export let onSearch = query => Promise.resolve([]);
+
+    export const clearSearchResults = () => {
+		searchResults = [];
+	};
 
-	/** @type {({id: string; name: string} | string)[]} */
+	/** @type {string[]} */
 	let searchResults = [];
 	let isOpen = false;
 
@@ -46,15 +51,13 @@
 	}
 
 	/**
-	 * @param { {id: string; name: string} | string } result
+	 * @param { string } result
 	 */
 	function selectResult(result) {
-		value = typeof result === 'string' ? result : result?.id;
+		value = result;
 	}
 
-	export function clearSearchResults() {
-		searchResults = [];
-	}
+	
 </script>
 
 <div class="position-relative">
@@ -66,17 +69,17 @@
 		<DropdownToggle tag="div">
 			<Input type="text" {value} on:input={handleInput} {disabled} {placeholder} />
 		</DropdownToggle>
-		<DropdownMenu class="w-100">
+		<DropdownMenu class="w-100 thin-scrollbar">
 			{#if loading}
 				<li class="text-center"><Spinner size="sm" /></li>
 			{:else}
-				{#each searchResults as result, index}
+				{#each searchResults as item, index}
 					<DropdownItem
-						active={value === (typeof result === 'string' ? result : result?.id)}
-						on:click={() => selectResult(result)}
-						title={typeof result === 'string' ? result : result?.name}
+						active={value === item}
+						title={item}
+                        on:click={() => selectResult(item)}
 					>
-						{typeof result === 'string' ? result : result?.name}
+						{item}
 					</DropdownItem>
 				{/each}
 			{/if}

src/lib/helpers/http.js

@@ -90,7 +90,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/role/(.*?)/details', 'g'),
         new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
         new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
-        new RegExp('http(s*)://(.*?)/conversation/state-key', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

src/lib/helpers/types/conversationTypes.js

@@ -37,6 +37,14 @@
  */
 
 
+/**
+ * @typedef {Object} StateSearchQuery
+ * @property {string} query - The search query.
+ * @property {number?} [keyLimit] - The key limit.
+ * @property {boolean?} [preLoad] - Whether it is preloading or not.
+ */
+
+
 /**
  * @interface
  * @class

src/lib/scss/custom/pages/_conversation.scss

@@ -7,6 +7,9 @@
 
 .list-title {
     width: 40%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .conv-state-search-menu {

src/lib/services/api-endpoints.js

@@ -67,7 +67,7 @@ export const endpoints = {
     conversationTagsUpdateUrl: `${host}/conversation/{conversationId}/update-tags`,
     fileUploadUrl: `${host}/agent/{agentId}/conversation/{conversationId}/upload`,
     pinConversationUrl: `${host}/agent/{agentId}/conversation/{conversationId}/dashboard`,
-    conversationStateKeyListUrl: `${host}/conversation/state-key`,
+    conversationStateSearchKeysUrl: `${host}/conversation/state/keys`,
 
     // LLM provider
     llmProvidersUrl: `${host}/llm-providers`,

src/lib/services/conversation-service.js

@@ -290,24 +290,21 @@ export async function getAddressOptions(text) {
     return response.data;
 }
 
-/** @type {import('axios').CancelTokenSource | null} */
-let getConversationStatKeyCancelToken = null;
+/** @type {AbortController} */
+let controller = new AbortController();
+
 /**
- * get conversation state key list
- * @param {string} query
- * @returns {Promise<{id: string, name: string}[]>}
+ * get conversation state search keys
+ * @param {import('$conversationTypes').StateSearchQuery} request
+ * @returns {Promise<string[]>}
  */
-export async function getConversationStateKey(query) {
-    let url = endpoints.conversationStateKeyListUrl;
-    if (getConversationStatKeyCancelToken) {
-        getConversationStatKeyCancelToken.cancel();
-    }
-    getConversationStatKeyCancelToken = axios.CancelToken.source();
+export async function getConversationStateSearchKeys(request) {
+    let url = endpoints.conversationStateSearchKeysUrl;
     const response = await axios.get(url, {
         params: {
-            searchKey: query
+            ...request
         },
-        cancelToken: getConversationStatKeyCancelToken.token
+        signal: controller.signal
     });
     return response.data;
 }

src/routes/page/conversation/+page.svelte

@@ -1,5 +1,8 @@
 <script>
-	import { _ } from 'svelte-i18n'
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import Swal from 'sweetalert2';
+	import lodash from "lodash";
 	import {
 		Button,
 		Card,
@@ -13,13 +16,10 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import TablePagination from '$lib/common/TablePagination.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import { onMount } from 'svelte';
 	import { getAgents } from '$lib/services/agent-service';
-	import { getConversations, deleteConversation, getConversationStateKey } from '$lib/services/conversation-service.js';
+	import { getConversations, deleteConversation, getConversationStateSearchKeys } from '$lib/services/conversation-service.js';
 	import { utcToLocal } from '$lib/helpers/datetime';
-	import Swal from 'sweetalert2';
-	import lodash from "lodash";
-	import { ConversationChannel, ConversationTag } from '$lib/helpers/enums';
+	import { ConversationChannel } from '$lib/helpers/enums';
 	import RemoteSearchInput from '$lib/common/RemoteSearchInput.svelte';
 
 	let isLoading = false;
@@ -219,11 +219,11 @@
 	 * @param {any} e
 	 */
 	function handleConfirmStateModal(e) {
-		if (stateKey && stateValue) {
+		if (stateKey) {
 		  searchOption.states = [
 			  {
 				  key: { data: stateKey, isValid: true },
-				  value: {data: stateValue, isValid: true },
+				  value: { data: stateValue || '', isValid: true },
 				  active_rounds: {data: -1, isValid: true},
 			  }
 			];
@@ -338,13 +338,16 @@
 		}
 	}
 
-  /**
-   * @param {any} query
-   */
-  async function handleStateSearch(query) {
-    const response = await getConversationStateKey(query);
-		return response || [];
-  }
+	/** @param {string} query */
+	function handleStateSearch(query) {
+		return new Promise((resolve) => {
+			getConversationStateSearchKeys({
+				query: query
+			}).then(res => {
+				resolve(res || []);
+			}).catch(() => resolve([]));
+		});
+	}
 </script>
 
 <HeadTitle title="{$_('Conversation List')}" />
@@ -355,14 +358,16 @@
 	<Col lg="12">
 		<Card>
 			<CardBody class="border-bottom">
-				<div class="d-flex align-items-center">
-					<h5 class="mb-0 card-title flex-grow-0" style="width: 100%;">{$_('Conversation List')}</h5>
-					<div style="width: 100%;">
+				<div class="d-flex align-items-center" style="flex-wrap: wrap; justify-content: space-between;">
+					<div class="mb-0 card-title flex-grow-0">
+						<h5 class="mb-0">{$_('Conversation List')}</h5>
+					</div>
+					<div>
 						<div class="state-search-container">
 							<div>
 								<RemoteSearchInput
 									bind:value={stateKey}
-									onSearch={handleStateSearch}
+									onSearch={e => handleStateSearch(e)}
 									placeholder="Search States"
 								/>
 							</div>
@@ -435,7 +440,7 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
-					<Table class="align-middle nowrap" bordered>
+					<Table class="align-middle nowrap" style="table-layout: fixed;" bordered>
 						<thead>
 							<tr>
 								<th scope="col" class="list-title">{$_('Title')}</th>