From f1496fb86c6c7a1775786163918caf64f5c242e7 Mon Sep 17 00:00:00 2001
From: "roary.yao" <roary.yao@starlight-sms.com>
Date: Tue, 11 Feb 2025 17:42:48 +0800
Subject: [PATCH] AII-449

---
 src/lib/common/RemoteSearchInput.svelte       | 149 +++++++++---------
 src/lib/helpers/http.js                       |   2 +-
 src/lib/services/api-endpoints.js             |   1 -
 src/lib/services/conversation-service.js      |  28 +---
 .../agent-components/agent-llm-config.svelte  |   1 +
 .../agent-components/agent-overview.svelte    |   6 +-
 src/routes/page/conversation/+page.svelte     |  72 +++------
 7 files changed, 109 insertions(+), 150 deletions(-)

diff --git a/src/lib/common/RemoteSearchInput.svelte b/src/lib/common/RemoteSearchInput.svelte
index b69f4635..f02e44de 100644
--- a/src/lib/common/RemoteSearchInput.svelte
+++ b/src/lib/common/RemoteSearchInput.svelte
@@ -1,84 +1,85 @@
 <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 = '';
-   /**
+	import {
+		Input,
+		Dropdown,
+		DropdownMenu,
+		DropdownItem,
+		Spinner,
+		DropdownToggle
+	} from '@sveltestrap/sveltestrap';
+	import { debounce } from 'lodash';
 
- * @type {(arg0: any) => any[] | PromiseLike<any[]>}
- */
-  export let onSearch;
-  export let loading = false;
+	/** @type {string} */
+	export let value;
+	export let disabled = false;
+	export let placeholder = '';
+	/**
+	 * @type {(query: string) => Promise<({id: string; name: string} | string)[]>}
+	 */
+	export let onSearch;
+	export let loading = false;
 
-  /** @type {any[]} */
-  let searchResults = [];
-  let isOpen = false;
+	/** @type {({id: string; name: string} | string)[]} */
+	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);
+	// @ts-ignore
+	const debouncedSearch = debounce(async (query) => {
+		if (query.length) {
+			loading = true;
+			searchResults = await onSearch(query);
+			loading = false;
+		} 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 {any} e
+	 */
+	async function handleInput(e) {
+		const query = e.target.value;
+		isOpen = true;
+		value = query;
+		await debouncedSearch(query);
+	}
 
-/**
- * @param {{ id: string; name: string; }} result
- */
-  function selectResult(result) {
-    selectedValue = result;
-  }
-
-  export function clearSearchResults() {
-    searchResults = [];
-  }
+	/**
+	 * @param { {id: string; name: string} | string } result
+	 */
+	function selectResult(result) {
+		value = typeof result === 'string' ? result : result?.id;
+	}
 
+	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>
\ No newline at end of file
+	<Dropdown
+		class="scrollable-dropdown"
+		isOpen={isOpen && (searchResults.length > 0 || loading)}
+		toggle={() => (isOpen = !isOpen)}
+	>
+		<DropdownToggle tag="div">
+			<Input type="text" {value} on:input={handleInput} {disabled} {placeholder} />
+		</DropdownToggle>
+		<DropdownMenu class="w-100">
+			{#if loading}
+				<li class="text-center"><Spinner size="sm" /></li>
+			{:else}
+				{#each searchResults as result, index}
+					<DropdownItem
+						active={value === (typeof result === 'string' ? result : result?.id)}
+						on:click={() => selectResult(result)}
+						title={typeof result === 'string' ? result : result?.name}
+					>
+						{typeof result === 'string' ? result : result?.name}
+					</DropdownItem>
+				{/each}
+			{/if}
+		</DropdownMenu>
+	</Dropdown>
+</div>
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 4a113b32..319d5545 100644
--- a/src/lib/helpers/http.js
+++ b/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-search', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation/state-key', 'g'),
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index b42c4cb3..77d4ba8f 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -67,7 +67,6 @@ 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
diff --git a/src/lib/services/conversation-service.js b/src/lib/services/conversation-service.js
index 16124019..1bb4140b 100644
--- a/src/lib/services/conversation-service.js
+++ b/src/lib/services/conversation-service.js
@@ -290,36 +290,24 @@ 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;
+let getConversationStatKeyCancelToken = null;
 /**
- * get conversation state value
- * @param {string} key
+ * get conversation state key list
  * @param {string} query
  * @returns {Promise<{id: string, name: string}[]>}
  */
-export async function getConversationStateValue(key, query) {
-    let url = endpoints.conversationStateValueUrl;
-    if (getConversationStateValueCancelToken) {
-        getConversationStateValueCancelToken.cancel();
+export async function getConversationStateKey(query) {
+    let url = endpoints.conversationStateKeyListUrl;
+    if (getConversationStatKeyCancelToken) {
+        getConversationStatKeyCancelToken.cancel();
     }
-    getConversationStateValueCancelToken = axios.CancelToken.source();
+    getConversationStatKeyCancelToken = axios.CancelToken.source();
     const response = await axios.get(url, {
         params: {
-            conversatinFilterType: key,
             searchKey: query
         },
-        cancelToken: getConversationStateValueCancelToken.token
+        cancelToken: getConversationStatKeyCancelToken.token
     });
     return response.data;
 }
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
index 73d51876..6f8615a0 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
@@ -85,6 +85,7 @@
     function changeMaxOutputToken(e) {
         const value = Number(e.target.value) || 0;
         config.max_output_tokens = value;
+        handleAgentChange();
     }
 </script>
 
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
index f7e3dae5..c55ee8ff 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -114,7 +114,7 @@
                                     class="form-check-input" 
                                     type="checkbox" 
                                     bind:checked={agent.is_public} 
-                                    on:input={handleAgentChange}
+                                    on:change={handleAgentChange}
                                     id="is_public" 
                                 />
                                 <label class="form-check-label" for="is_public"> Public </label>
@@ -129,7 +129,7 @@
                                     class="form-check-input" 
                                     type="checkbox" 
                                     bind:checked={agent.allow_routing} 
-                                    on:input={handleAgentChange}
+                                    on:change={handleAgentChange}
                                     id="allow_routing" 
                                 />
                                 <label class="form-check-label" for="allow_routing">Allow</label>
@@ -222,7 +222,7 @@
                                     class="form-check-input" 
                                     type="checkbox" 
                                     bind:checked={agent.disabled} 
-                                    on:input={handleAgentChange}
+                                    on:change={handleAgentChange}
                                     id="disabled" 
                                 />
                                 <label class="form-check-label" for="disabled">Disabled</label>
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 9f526da0..056e6e9f 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -21,7 +21,7 @@
 	import StateModal from '$lib/common/StateModal.svelte';
 	import { onMount } from 'svelte';
 	import { getAgents } from '$lib/services/agent-service';
-	import { getConversations, deleteConversation, getConversationStateKey, getConversationStateValue } from '$lib/services/conversation-service.js';
+	import { getConversations, deleteConversation, getConversationStateKey } from '$lib/services/conversation-service.js';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import Swal from 'sweetalert2';
 	import lodash from "lodash";
@@ -83,29 +83,17 @@
 		tags: []
 	};
 
-	/** @type {any[]} */
-	let stateOptions = [];
+	/** @type {string} */
+	let stateKey = "";
 
 	/** @type {string | null} */
-	let selectedState = null;
-
-	/** @type {{id: string, name: string} | null} */
-	let selectedValue;
-
-
-	let isValueEditable = false;
-
-	/**
-	 * @type {RemoteSearchInput}
-	 */
-	let remoteSearchInput;
+	let stateValue = null;
 
     onMount(async () => {
 		isLoading = true;
 		Promise.all([
 			loadAgentOptions(),
 			loadSearchOption(),
-			loadStates(),
 			loadConversations()])
 		.finally(() => {
 			isLoading = false
@@ -244,12 +232,12 @@
 	 * @param {any} e
 	 */
 	function handleConfirmStateModal(e) {
-		if (selectedState && selectedValue?.id) {
+		if (stateKey && stateValue) {
 		  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},
+				  key: { data: stateKey, isValid: true },
+				  value: {data: stateValue, isValid: true },
+				  active_rounds: {data: -1, isValid: true},
 			  }
 			];
 		} else {
@@ -363,28 +351,12 @@
 		}
 	}
 
-	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;
+  async function handleStateSearch(query) {
+    const response = await getConversationStateKey(query);
+		return response || [];
   }
 </script>
 
@@ -402,20 +374,18 @@
 						<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>
+								<RemoteSearchInput
+									bind:value={stateKey}
+									onSearch={handleStateSearch}
+									placeholder="Search States"
+								/>
 							</Col>
 							<Col lg="2" sm="12">
-								<RemoteSearchInput 
-								  bind:selectedValue={selectedValue}
-								  disabled={!isValueEditable}
-								  onSearch={handleValueSearch}
-								  placeholder="Enter a value"
-								  bind:this={remoteSearchInput}
+								<Input
+									type="text"
+									bind:value={stateValue}
+									disabled={!stateKey}
+									placeholder="Enter a value"
 								/>
 							</Col>
 							<Col lg="1" sm="12">