Skip to content

Commit f1496fb

Browse files
author
roary.yao
committed
AII-449
1 parent 50fc013 commit f1496fb

File tree

7 files changed

+109
-150
lines changed

7 files changed

+109
-150
lines changed

‎src/lib/common/RemoteSearchInput.svelte‎

Lines changed: 75 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,85 @@
11
<script>
2-
import { Input, Dropdown, DropdownMenu, DropdownItem, Spinner, DropdownToggle } from '@sveltestrap/sveltestrap';
3-
import { debounce } from 'lodash';
4-
5-
/** @type {{id: string, name: string} | null} */
6-
export let selectedValue;
7-
export let disabled = false;
8-
export let placeholder = '';
9-
/**
2+
import {
3+
Input,
4+
Dropdown,
5+
DropdownMenu,
6+
DropdownItem,
7+
Spinner,
8+
DropdownToggle
9+
} from '@sveltestrap/sveltestrap';
10+
import { debounce } from 'lodash';
1011
11-
* @type {(arg0: any) => any[] | PromiseLike<any[]>}
12-
*/
13-
export let onSearch;
14-
export let loading = false;
12+
/** @type {string} */
13+
export let value;
14+
export let disabled = false;
15+
export let placeholder = '';
16+
/**
17+
* @type {(query: string) => Promise<({id: string; name: string} | string)[]>}
18+
*/
19+
export let onSearch;
20+
export let loading = false;
1521
16-
/** @type {any[]} */
17-
let searchResults = [];
18-
let isOpen = false;
22+
/** @type {({id: string; name: string} | string)[]} */
23+
let searchResults = [];
24+
let isOpen = false;
1925
20-
// @ts-ignore
21-
const debouncedSearch = debounce(async (query) => {
22-
if (query.length) {
23-
loading = true;
24-
searchResults = await onSearch(query);
25-
loading = false;
26-
isOpen = true;
27-
} else {
28-
searchResults = [];
29-
isOpen = false;
30-
}
31-
}, 500);
26+
// @ts-ignore
27+
const debouncedSearch = debounce(async (query) => {
28+
if (query.length) {
29+
loading = true;
30+
searchResults = await onSearch(query);
31+
loading = false;
32+
} else {
33+
searchResults = [];
34+
isOpen = false;
35+
}
36+
}, 500);
3237
33-
/**
34-
* @param {any} e
35-
*/
36-
async function handleInput(e) {
37-
const query = e.target.value;
38-
selectedValue = { id: query, name: query };
39-
await debouncedSearch(query);
40-
}
38+
/**
39+
* @param {any} e
40+
*/
41+
async function handleInput(e) {
42+
const query = e.target.value;
43+
isOpen = true;
44+
value = query;
45+
await debouncedSearch(query);
46+
}
4147
42-
/**
43-
* @param {{ id: string; name: string; }} result
44-
*/
45-
function selectResult(result) {
46-
selectedValue = result;
47-
}
48-
49-
export function clearSearchResults() {
50-
searchResults = [];
51-
}
48+
/**
49+
* @param { {id: string; name: string} | string } result
50+
*/
51+
function selectResult(result) {
52+
value = typeof result === 'string' ? result : result?.id;
53+
}
5254
55+
export function clearSearchResults() {
56+
searchResults = [];
57+
}
5358
</script>
5459
5560
<div class="position-relative">
56-
<Dropdown class="scrollable-dropdown" isOpen={isOpen && (searchResults.length > 0 || loading)} toggle={() => isOpen = !isOpen}>
57-
<DropdownToggle tag="div">
58-
<Input
59-
type="text"
60-
value={selectedValue?.name}
61-
on:input={handleInput}
62-
{disabled}
63-
{placeholder}
64-
/>
65-
</DropdownToggle>
66-
<DropdownMenu class="w-100">
67-
{#if loading}
68-
<DropdownItem>
69-
<Spinner size="sm" />
70-
</DropdownItem>
71-
{:else}
72-
{#each searchResults as result, index}
73-
<DropdownItem
74-
active={selectedValue?.id === result.id}
75-
on:click={() => selectResult(result)}
76-
title={result.name}
77-
>
78-
{result.name}
79-
</DropdownItem>
80-
{/each}
81-
{/if}
82-
</DropdownMenu>
83-
</Dropdown>
84-
</div>
61+
<Dropdown
62+
class="scrollable-dropdown"
63+
isOpen={isOpen && (searchResults.length > 0 || loading)}
64+
toggle={() => (isOpen = !isOpen)}
65+
>
66+
<DropdownToggle tag="div">
67+
<Input type="text" {value} on:input={handleInput} {disabled} {placeholder} />
68+
</DropdownToggle>
69+
<DropdownMenu class="w-100">
70+
{#if loading}
71+
<li class="text-center"><Spinner size="sm" /></li>
72+
{:else}
73+
{#each searchResults as result, index}
74+
<DropdownItem
75+
active={value === (typeof result === 'string' ? result : result?.id)}
76+
on:click={() => selectResult(result)}
77+
title={typeof result === 'string' ? result : result?.name}
78+
>
79+
{typeof result === 'string' ? result : result?.name}
80+
</DropdownItem>
81+
{/each}
82+
{/if}
83+
</DropdownMenu>
84+
</Dropdown>
85+
</div>

‎src/lib/helpers/http.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ function skipLoader(config) {
9090
new RegExp('http(s*)://(.*?)/role/(.*?)/details', 'g'),
9191
new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
9292
new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
93-
new RegExp('http(s*)://(.*?)/conversation/state-search', 'g'),
93+
new RegExp('http(s*)://(.*?)/conversation/state-key', 'g'),
9494
];
9595

9696
if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

‎src/lib/services/api-endpoints.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ export const endpoints = {
6767
conversationTagsUpdateUrl: `${host}/conversation/{conversationId}/update-tags`,
6868
fileUploadUrl: `${host}/agent/{agentId}/conversation/{conversationId}/upload`,
6969
pinConversationUrl: `${host}/agent/{agentId}/conversation/{conversationId}/dashboard`,
70-
conversationStateValueUrl: `${host}/conversation/state-search`,
7170
conversationStateKeyListUrl: `${host}/conversation/state-key`,
7271

7372
// LLM provider

‎src/lib/services/conversation-service.js‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -290,36 +290,24 @@ export async function getAddressOptions(text) {
290290
return response.data;
291291
}
292292

293-
/**
294-
* get conversation state key list
295-
* @returns {Promise<{id: string, name: string, description: string}[]>}
296-
*/
297-
export async function getConversationStateKey() {
298-
let url = endpoints.conversationStateKeyListUrl;
299-
const response = await axios.get(url);
300-
return response.data;
301-
}
302-
303293
/** @type {import('axios').CancelTokenSource | null} */
304-
let getConversationStateValueCancelToken = null;
294+
let getConversationStatKeyCancelToken = null;
305295
/**
306-
* get conversation state value
307-
* @param {string} key
296+
* get conversation state key list
308297
* @param {string} query
309298
* @returns {Promise<{id: string, name: string}[]>}
310299
*/
311-
export async function getConversationStateValue(key, query) {
312-
let url = endpoints.conversationStateValueUrl;
313-
if (getConversationStateValueCancelToken) {
314-
getConversationStateValueCancelToken.cancel();
300+
export async function getConversationStateKey(query) {
301+
let url = endpoints.conversationStateKeyListUrl;
302+
if (getConversationStatKeyCancelToken) {
303+
getConversationStatKeyCancelToken.cancel();
315304
}
316-
getConversationStateValueCancelToken = axios.CancelToken.source();
305+
getConversationStatKeyCancelToken = axios.CancelToken.source();
317306
const response = await axios.get(url, {
318307
params: {
319-
conversatinFilterType: key,
320308
searchKey: query
321309
},
322-
cancelToken: getConversationStateValueCancelToken.token
310+
cancelToken: getConversationStatKeyCancelToken.token
323311
});
324312
return response.data;
325313
}

‎src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
function changeMaxOutputToken(e) {
8686
const value = Number(e.target.value) || 0;
8787
config.max_output_tokens = value;
88+
handleAgentChange();
8889
}
8990
</script>
9091

‎src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
class="form-check-input"
115115
type="checkbox"
116116
bind:checked={agent.is_public}
117-
on:input={handleAgentChange}
117+
on:change={handleAgentChange}
118118
id="is_public"
119119
/>
120120
<label class="form-check-label" for="is_public"> Public </label>
@@ -129,7 +129,7 @@
129129
class="form-check-input"
130130
type="checkbox"
131131
bind:checked={agent.allow_routing}
132-
on:input={handleAgentChange}
132+
on:change={handleAgentChange}
133133
id="allow_routing"
134134
/>
135135
<label class="form-check-label" for="allow_routing">Allow</label>
@@ -222,7 +222,7 @@
222222
class="form-check-input"
223223
type="checkbox"
224224
bind:checked={agent.disabled}
225-
on:input={handleAgentChange}
225+
on:change={handleAgentChange}
226226
id="disabled"
227227
/>
228228
<label class="form-check-label" for="disabled">Disabled</label>

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

Lines changed: 21 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
import StateModal from '$lib/common/StateModal.svelte';
2222
import { onMount } from 'svelte';
2323
import { getAgents } from '$lib/services/agent-service';
24-
import { getConversations, deleteConversation, getConversationStateKey, getConversationStateValue } from '$lib/services/conversation-service.js';
24+
import { getConversations, deleteConversation, getConversationStateKey } from '$lib/services/conversation-service.js';
2525
import { utcToLocal } from '$lib/helpers/datetime';
2626
import Swal from 'sweetalert2';
2727
import lodash from "lodash";
@@ -83,29 +83,17 @@
8383
tags: []
8484
};
8585
86-
/** @type {any[]} */
87-
let stateOptions = [];
86+
/** @type {string} */
87+
let stateKey = "";
8888
8989
/** @type {string | null} */
90-
let selectedState = null;
91-
92-
/** @type {{id: string, name: string} | null} */
93-
let selectedValue;
94-
95-
96-
let isValueEditable = false;
97-
98-
/**
99-
* @type {RemoteSearchInput}
100-
*/
101-
let remoteSearchInput;
90+
let stateValue = null;
10291
10392
onMount(async () => {
10493
isLoading = true;
10594
Promise.all([
10695
loadAgentOptions(),
10796
loadSearchOption(),
108-
loadStates(),
10997
loadConversations()])
11098
.finally(() => {
11199
isLoading = false
@@ -244,12 +232,12 @@
244232
* @param {any} e
245233
*/
246234
function handleConfirmStateModal(e) {
247-
if (selectedState && selectedValue?.id) {
235+
if (stateKey && stateValue) {
248236
searchOption.states = [
249237
{
250-
key: { data: stateOptions.find(x => Number(x.id) === Number(selectedState))?.description, isValid: true },
251-
value: {data: selectedValue.id, isValid: true },
252-
active_rounds: {data: 0, isValid: true},
238+
key: { data: stateKey, isValid: true },
239+
value: {data: stateValue, isValid: true },
240+
active_rounds: {data: -1, isValid: true},
253241
}
254242
];
255243
} else {
@@ -363,28 +351,12 @@
363351
}
364352
}
365353
366-
async function loadStates() {
367-
const response = await getConversationStateKey();
368-
stateOptions = response;
369-
}
370-
371-
/**
372-
* @param { any } e
373-
*/
374-
function handleStateChange(e) {
375-
selectedState = e.target.value;
376-
isValueEditable = !!selectedState;
377-
selectedValue = null;
378-
remoteSearchInput?.clearSearchResults();
379-
}
380-
381354
/**
382355
* @param {any} query
383356
*/
384-
async function handleValueSearch(query) {
385-
if (!selectedState) return [];
386-
const response = await getConversationStateValue(selectedState, query);
387-
return response;
357+
async function handleStateSearch(query) {
358+
const response = await getConversationStateKey(query);
359+
return response || [];
388360
}
389361
</script>
390362
@@ -402,20 +374,18 @@
402374
<Row class="g-3">
403375
<Col lg="1"></Col>
404376
<Col lg="2" sm="12">
405-
<select class="form-select" on:change={handleStateChange}>
406-
<option value={null}>Select State</option>
407-
{#each stateOptions as state}
408-
<option value={state.id}>{state.name}</option>
409-
{/each}
410-
</select>
377+
<RemoteSearchInput
378+
bind:value={stateKey}
379+
onSearch={handleStateSearch}
380+
placeholder="Search States"
381+
/>
411382
</Col>
412383
<Col lg="2" sm="12">
413-
<RemoteSearchInput
414-
bind:selectedValue={selectedValue}
415-
disabled={!isValueEditable}
416-
onSearch={handleValueSearch}
417-
placeholder="Enter a value"
418-
bind:this={remoteSearchInput}
384+
<Input
385+
type="text"
386+
bind:value={stateValue}
387+
disabled={!stateKey}
388+
placeholder="Enter a value"
419389
/>
420390
</Col>
421391
<Col lg="1" sm="12">

0 commit comments

Comments
 (0)