Skip to content

Commit e322aa7

Browse files
iceljciceljc
authored
Merge pull request #306 from Roaryyyy/roary-features/chat-window
AII-449
2 parents 4a1481d + b1abede commit e322aa7

File tree

6 files changed

+108
-148
lines changed

6 files changed

+108
-148
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-overview.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@
136136
class="form-check-input"
137137
type="checkbox"
138138
bind:checked={agent.is_public}
139-
on:input={handleAgentChange}
139+
on:change={handleAgentChange}
140140
id="is_public"
141141
/>
142142
<label class="form-check-label" for="is_public"> Public </label>
@@ -151,7 +151,7 @@
151151
class="form-check-input"
152152
type="checkbox"
153153
bind:checked={agent.allow_routing}
154-
on:input={handleAgentChange}
154+
on:change={handleAgentChange}
155155
id="allow_routing"
156156
/>
157157
<label class="form-check-label" for="allow_routing">Allow</label>
@@ -244,7 +244,7 @@
244244
class="form-check-input"
245245
type="checkbox"
246246
bind:checked={agent.disabled}
247-
on:input={handleAgentChange}
247+
on:change={handleAgentChange}
248248
id="disabled"
249249
/>
250250
<label class="form-check-label" for="disabled">Disabled</label>

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

Lines changed: 21 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
1616
import { onMount } from 'svelte';
1717
import { getAgents } from '$lib/services/agent-service';
18-
import { getConversations, deleteConversation, getConversationStateKey, getConversationStateValue } from '$lib/services/conversation-service.js';
18+
import { getConversations, deleteConversation, getConversationStateKey } from '$lib/services/conversation-service.js';
1919
import { utcToLocal } from '$lib/helpers/datetime';
2020
import Swal from 'sweetalert2';
2121
import lodash from "lodash";
@@ -70,27 +70,17 @@
7070
tags: []
7171
};
7272
73-
/** @type {any[]} */
74-
let stateOptions = [];
73+
/** @type {string} */
74+
let stateKey = "";
7575
7676
/** @type {string | null} */
77-
let selectedStateKey = null;
78-
79-
/** @type {{id: string, name: string} | null} */
80-
let selectedStateValue;
81-
82-
/** @type {boolean} */
83-
let isValueEditable = false;
84-
85-
/** @type {RemoteSearchInput} */
86-
let remoteSearchInput;
77+
let stateValue = null;
8778
8879
onMount(async () => {
8980
isLoading = true;
9081
Promise.all([
9182
loadAgentOptions(),
9283
loadSearchOption(),
93-
loadStates(),
9484
loadConversations()])
9585
.finally(() => {
9686
isLoading = false
@@ -229,12 +219,12 @@
229219
* @param {any} e
230220
*/
231221
function handleConfirmStateModal(e) {
232-
if (selectedStateKey && selectedStateValue?.id) {
222+
if (stateKey && stateValue) {
233223
searchOption.states = [
234224
{
235-
key: { data: stateOptions.find(x => Number(x.id) === Number(selectedStateKey))?.description, isValid: true },
236-
value: {data: selectedStateValue.id, isValid: true },
237-
active_rounds: {data: 0, isValid: true},
225+
key: { data: stateKey, isValid: true },
226+
value: {data: stateValue, isValid: true },
227+
active_rounds: {data: -1, isValid: true},
238228
}
239229
];
240230
} else {
@@ -348,28 +338,12 @@
348338
}
349339
}
350340
351-
async function loadStates() {
352-
const response = await getConversationStateKey();
353-
stateOptions = response;
354-
}
355-
356-
/**
357-
* @param { any } e
358-
*/
359-
function handleStateChange(e) {
360-
selectedStateKey = e.target.value;
361-
isValueEditable = !!selectedStateKey;
362-
selectedStateValue = null;
363-
remoteSearchInput?.clearSearchResults();
364-
}
365-
366341
/**
367342
* @param {any} query
368343
*/
369-
async function handleValueSearch(query) {
370-
if (!selectedStateKey) return [];
371-
const response = await getConversationStateValue(selectedStateKey, query);
372-
return response;
344+
async function handleStateSearch(query) {
345+
const response = await getConversationStateKey(query);
346+
return response || [];
373347
}
374348
</script>
375349
@@ -386,20 +360,18 @@
386360
<div style="width: 100%;">
387361
<div class="state-search-container">
388362
<div>
389-
<select class="form-select" on:change={handleStateChange}>
390-
<option value={null}>Select State</option>
391-
{#each stateOptions as state}
392-
<option value={state.id}>{state.name}</option>
393-
{/each}
394-
</select>
363+
<RemoteSearchInput
364+
bind:value={stateKey}
365+
onSearch={handleStateSearch}
366+
placeholder="Search States"
367+
/>
395368
</div>
396369
<div>
397-
<RemoteSearchInput
398-
bind:selectedValue={selectedStateValue}
399-
disabled={!isValueEditable}
400-
onSearch={handleValueSearch}
401-
placeholder="Enter a value"
402-
bind:this={remoteSearchInput}
370+
<Input
371+
type="text"
372+
bind:value={stateValue}
373+
disabled={!stateKey}
374+
placeholder="Enter a value"
403375
/>
404376
</div>
405377
<div>

0 commit comments

Comments
 (0)