AII-449

Author: roary.yao

src/lib/common/RemoteSearchInput.svelte

@@ -0,0 +1,84 @@
+<script>
+  import { Input, Dropdown, DropdownMenu, DropdownItem, Spinner, DropdownToggle } from '@sveltestrap/sveltestrap';
+  import { debounce } from 'lodash';
+  
+  /** @type {{id: string, name: string} | null} */
+  export let selectedValue;
+  export let disabled = false;
+  export let placeholder = '';
+   /**
+
+ * @type {(arg0: any) => any[] | PromiseLike<any[]>}
+ */
+  export let onSearch;
+  export let loading = false;
+
+  /** @type {any[]} */
+  let searchResults = [];
+  let isOpen = false;
+
+  // @ts-ignore
+  const debouncedSearch = debounce(async (query) => {
+    if (query.length) {
+      loading = true;
+      searchResults = await onSearch(query);
+      loading = false;
+      isOpen = true;
+    } else {
+      searchResults = [];
+      isOpen = false;
+    }
+  }, 500);
+
+ /**
+ * @param {any} e
+ */
+  async function handleInput(e) {
+    const query = e.target.value;
+    selectedValue = { id: query, name: query };
+    await debouncedSearch(query);
+  }
+
+/**
+ * @param {{ id: string; name: string; }} result
+ */
+  function selectResult(result) {
+    selectedValue = result;
+  }
+
+  export function clearSearchResults() {
+    searchResults = [];
+  }
+
+</script>
+
+<div class="position-relative">
+  <Dropdown class="scrollable-dropdown" isOpen={isOpen && (searchResults.length > 0 || loading)} toggle={() => isOpen = !isOpen}>
+      <DropdownToggle tag="div">
+          <Input
+              type="text"
+              value={selectedValue?.name}
+              on:input={handleInput}
+              {disabled}
+              {placeholder}
+          />
+      </DropdownToggle>
+      <DropdownMenu class="w-100">
+          {#if loading}
+              <DropdownItem>
+                  <Spinner size="sm" />
+              </DropdownItem>
+          {:else}
+              {#each searchResults as result, index}
+                  <DropdownItem
+                      active={selectedValue?.id === result.id}
+                      on:click={() => selectResult(result)}
+                      title={result.name}
+                  >
+                      {result.name}
+                  </DropdownItem>
+              {/each}
+          {/if}
+      </DropdownMenu>
+  </Dropdown>
+</div>

src/lib/helpers/http.js

@@ -90,6 +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-search', 'g'),
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

src/lib/scss/custom/common/_common.scss

@@ -180,3 +180,15 @@ button:focus {
 .thin-scrollbar {
   scrollbar-width: thin;
 }
+
+.scrollable-dropdown {
+  .dropdown-menu {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .dropdown-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

src/lib/services/api-endpoints.js

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

src/lib/services/conversation-service.js

@@ -288,4 +288,38 @@ export async function getAddressOptions(text) {
         }
     });
     return response.data;
+}
+
+/**
+ * get conversation state key list
+ * @returns {Promise<{id: string, name: string, description: string}[]>}
+ */
+export async function getConversationStateKey() {
+    let url = endpoints.conversationStateKeyListUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
+/** @type {import('axios').CancelTokenSource | null} */
+let getConversationStateValueCancelToken = null;
+/**
+ * get conversation state value
+ * @param {string} key
+ * @param {string} query
+ * @returns {Promise<{id: string, name: string}[]>}
+ */
+export async function getConversationStateValue(key, query) {
+    let url = endpoints.conversationStateValueUrl;
+    if (getConversationStateValueCancelToken) {
+        getConversationStateValueCancelToken.cancel();
+    }
+    getConversationStateValueCancelToken = axios.CancelToken.source();
+    const response = await axios.get(url, {
+        params: {
+            conversatinFilterType: key,
+            searchKey: query
+        },
+        cancelToken: getConversationStateValueCancelToken.token
+    });
+    return response.data;
 }

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

@@ -21,12 +21,13 @@
 	import StateModal from '$lib/common/StateModal.svelte';
 	import { onMount } from 'svelte';
 	import { getAgents } from '$lib/services/agent-service';
-	import { getConversations, deleteConversation } from '$lib/services/conversation-service.js';
+	import { getConversations, deleteConversation, getConversationStateKey, getConversationStateValue } from '$lib/services/conversation-service.js';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import Swal from 'sweetalert2';
 	import lodash from "lodash";
 	import MultiSelect from '$lib/common/MultiSelect.svelte';
 	import { ConversationChannel, ConversationTag } from '$lib/helpers/enums';
+	import RemoteSearchInput from '$lib/common/RemoteSearchInput.svelte';
 
 	let isLoading = false;
 	let isComplete = false;
@@ -82,11 +83,29 @@
 		tags: []
 	};
 
+	/** @type {any[]} */
+	let stateOptions = [];
+
+	/** @type {string | null} */
+	let selectedState = null;
+
+	/** @type {{id: string, name: string} | null} */
+	let selectedValue;
+
+
+	let isValueEditable = false;
+
+	/**
+	 * @type {RemoteSearchInput}
+	 */
+	let remoteSearchInput;
+
     onMount(async () => {
 		isLoading = true;
 		Promise.all([
 			loadAgentOptions(),
 			loadSearchOption(),
+			loadStates(),
 			loadConversations()])
 		.finally(() => {
 			isLoading = false
@@ -221,13 +240,23 @@
 		};
 	}
 
-	function toggleSearchStateModal() {
-		isOpenSearchStateModal = !isOpenSearchStateModal;
-	}
-
-	function handleConfirmStateModal() {
+	/**
+	 * @param {any} e
+	 */
+	function handleConfirmStateModal(e) {
+		if (selectedState && selectedValue?.id) {
+		  searchOption.states = [
+			  {
+				  key: { data: stateOptions.find(x => Number(x.id) === Number(selectedState))?.description, isValid: true },
+				  value: {data: selectedValue.id, isValid: true },
+				  active_rounds: {data: 0, isValid: true},
+			  }
+			];
+		} else {
+			searchOption.states = [];
+		}
 		handleSearchStates();
-		toggleSearchStateModal();
+		searchConversations(e);
 	}
 
 	function loadSearchOption() {
@@ -333,46 +362,72 @@
 			};
 		}
 	}
+
+	async function loadStates() {
+		const response = await getConversationStateKey();
+		stateOptions = response;
+	}
+
+	/**
+	 * @param { any } e
+	 */
+	function handleStateChange(e) {
+		selectedState = e.target.value;
+		isValueEditable = !!selectedState;
+		selectedValue = null;
+		remoteSearchInput?.clearSearchResults();
+	}
+
+  /**
+   * @param {any} query
+   */
+	 async function handleValueSearch(query) {
+    if (!selectedState) return [];
+    const response = await getConversationStateValue(selectedState, query);
+    return response;
+  }
 </script>
 
 <HeadTitle title="{$_('Conversation List')}" />
 <Breadcrumb title="{$_('Communication')}" pagetitle="{$_('Conversations')}" />
 <LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} successText={'Delete completed!'} />
-<StateModal
-	isOpen={isOpenSearchStateModal}
-	validateKey={true}
-	validateValue={false}
-	bind:states={searchOption.states}
-	toggleModal={() => toggleSearchStateModal()}
-	confirm={() => handleConfirmStateModal()}
-	cancel={() => toggleSearchStateModal()}
-/>
 
 <Row>
 	<Col lg="12">
 		<Card>
 			<CardBody class="border-bottom">
 				<div class="d-flex align-items-center">
-					<h5 class="mb-0 card-title flex-grow-1">{$_('Conversation List')}</h5>
-					<div class="flex-shrink-0">
+					<h5 class="mb-0 card-title flex-grow-0">{$_('Conversation List')}</h5>
+					<div class="flex-grow-1">
+						<Row class="g-3">
+							<Col lg="1"></Col>
+							<Col lg="2" sm="12">
+								<select class="form-select" on:change={handleStateChange}>
+									<option value={null}>Select State</option>
+									{#each stateOptions as state}
+										<option value={state.id}>{state.name}</option>
+									{/each}
+								</select>
+							</Col>
+							<Col lg="2" sm="12">
+								<RemoteSearchInput 
+								  bind:selectedValue={selectedValue}
+								  disabled={!isValueEditable}
+								  onSearch={handleValueSearch}
+								  placeholder="Enter a value"
+								  bind:this={remoteSearchInput}
+								/>
+							</Col>
+							<Col lg="1" sm="12">
+								<button class="btn btn-primary" on:click={handleConfirmStateModal}>Confirm</button>
+							</Col>
+						</Row>
 						<!-- <Button
 							class="btn btn-light"
 							on:click={(e) => searchConversations(e)}
 						>
 							<i class="mdi mdi-magnify" />
 						</Button> -->
-						<Dropdown class="dropdown d-inline-block">
-							<DropdownToggle type="menu" class="btn" id="dropdownMenuButton1">
-								<i class="mdi mdi-dots-vertical" />
-							</DropdownToggle>
-							<DropdownMenu class="conv-state-search-menu">
-								<DropdownItem
-									on:click={() => toggleSearchStateModal()}
-								>
-									{$_('Search States')}
-								</DropdownItem>
-							</DropdownMenu>
-						</Dropdown>
 					</div>
 				</div>
 			</CardBody>
@@ -416,8 +471,8 @@
 						/>
 					</Col>
 					<!-- <Col lg="2">
-						<Input type="date" class="form-control" />
-					</Col> -->
+            <Input type="date" class="form-control" />
+          </Col> -->
 					<Col lg="1">
 						<Button
 							type="button"
@@ -430,11 +485,6 @@
 						</Button>
 					</Col>
 				</Row>
-				{#if searchStateStrs?.length > 0}
-					{#each searchStateStrs as str, idx (idx)}
-						<Label index={idx} text={str} onClose={(index) => handleCloseLabel(index)} />
-					{/each}
-				{/if}
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">