Skip to content

Commit 2131b64

Browse files
iceljciceljc
authored
Merge pull request #296 from iceljc/features/refine-chat-window
refine agent filter, agent task filter, agent label
2 parents 71d4d50 + 22dc65f commit 2131b64

File tree

15 files changed

+340
-70
lines changed

15 files changed

+340
-70
lines changed

‎src/lib/common/MultiSelect.svelte‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
/** @type {string} */
2121
export let placeholder = '';
2222
23+
/** @type {string} */
24+
export let selectedText = '';
25+
2326
/** @type {string} */
2427
export let containerClasses = "";
2528
@@ -153,9 +156,9 @@
153156
if (count === 0) {
154157
displayText = '';
155158
} else if (count === options.length) {
156-
displayText = `All selected (${count})`;
159+
displayText = `All selected ${selectedText} (${count})`;
157160
} else {
158-
displayText = `Selected (${count})`;
161+
displayText = `Selected ${selectedText} (${count})`;
159162
}
160163
161164
verifySelectAll();

‎src/lib/helpers/enums.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,16 @@ const agentType = {
7171
};
7272
export const AgentType = Object.freeze(agentType);
7373

74+
const agentTaskStatus = {
75+
Scheduled: 'scheduled',
76+
New: 'new',
77+
Running: 'running',
78+
Success: 'success',
79+
Failed: 'failed'
80+
};
81+
export const AgentTaskStatus = Object.freeze(agentTaskStatus);
82+
83+
7484
const knowledgeCollectionType = {
7585
QuestionAnswer: 'question-answer',
7686
Document: 'document'

‎src/lib/helpers/types/agentTypes.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@
2727
/**
2828
* @typedef {Object} AgentFilter
2929
* @property {import('$commonTypes').Pagination} pager - Pagination
30-
* @property {string} [type]
31-
* @property {string} [agentName]
30+
* @property {string[]?} [types]
31+
* @property {string[]?} [agentNames]
3232
* @property {string} [similarName]
3333
* @property {boolean} [isPublic]
3434
* @property {boolean} [disabled]
35-
* @property {string[]} [agentIds]
35+
* @property {string[]?} [agentIds]
3636
*/
3737

3838
/**
@@ -46,9 +46,11 @@
4646
* @property {boolean} disabled
4747
* @property {boolean} is_public
4848
* @property {boolean} is_host
49+
* @property {boolean} is_router
4950
* @property {boolean} allow_routing
5051
* @property {string} icon_url - Icon
5152
* @property {string[]} profiles - The agent profiles.
53+
* @property {string[]} labels - The agent labels.
5254
* @property {boolean} merge_utility - Merge utility
5355
* @property {number?} [max_message_count]
5456
* @property {AgentUtility[]} utilities - The agent utilities.
@@ -78,6 +80,7 @@
7880
* @typedef {Object} AgentTaskFilter
7981
* @property {import('$commonTypes').Pagination} pager - Pagination
8082
* @property {string} [agentId] - The agent id.
83+
* @property {string?} [status] - The agent task status.
8184
*/
8285

8386
/**
@@ -87,6 +90,7 @@
8790
* @property {string} description - Description.
8891
* @property {string} content - Task detail.
8992
* @property {boolean} enabled
93+
* @property {string} status
9094
* @property {Date} created_datetime
9195
* @property {Date} updated_datetime
9296
* @property {string} agent_id - Description.
@@ -150,4 +154,12 @@
150154
* @property {string?} [displayName]
151155
*/
152156

157+
158+
/**
159+
* @typedef {Object} AgentTaskSearchOption
160+
* @property {string?} [agentId]
161+
* @property {string?} [status]
162+
*/
163+
164+
153165
export default {};

‎src/lib/scss/custom/pages/_agent.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
.agents-header-container {
2+
display: flex;
3+
justify-content: space-between;
4+
5+
.agent-filter {
6+
display: flex;
7+
gap: 10px
8+
}
9+
}
10+
111
.agent-prop-key {
212
width: 45%;
313
}
@@ -205,4 +215,11 @@
205215
}
206216
}
207217
}
218+
}
219+
220+
.agent-label-container {
221+
display: flex;
222+
gap: 5px;
223+
flex-wrap: wrap;
224+
margin: 5px 0px;
208225
}

‎src/lib/scss/custom/structure/_topbar.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
}
102102

103103
.page-content {
104+
min-height: 500px;
104105
padding: calc(#{$header-height} + #{$grid-gutter-width}) calc(#{$grid-gutter-width} * 0.75) $footer-height calc(#{$grid-gutter-width} * 0.75);
105106
}
106107

‎src/routes/chat/[agentId]/[conversationId]/chat-box.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,7 @@
7070
import ChatBigMessage from './chat-util/chat-big-message.svelte';
7171
import PersistLog from './persist-log/persist-log.svelte';
7272
import InstantLog from './instant-log/instant-log.svelte';
73-
74-
73+
7574
7675
const options = {
7776
scrollbars: {
@@ -1651,7 +1650,7 @@
16511650
<div class="msg-container">
16521651
<RcMessage containerClasses={'bot-msg'} markdownClasses={'markdown-dark text-dark'} message={message} />
16531652
{#if message?.message_id === lastBotMsg?.message_id && message?.uuid === lastBotMsg?.uuid}
1654-
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
1653+
<div style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px;">
16551654
{#if PUBLIC_LIVECHAT_SPEAKER_ENABLED === 'true'}
16561655
<AudioSpeaker
16571656
id={message?.message_id}

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

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111
import { _ } from 'svelte-i18n'
1212
import { goto } from '$app/navigation';
1313
import Swal from 'sweetalert2';
14-
import { GlobalEvent, UserPermission } from '$lib/helpers/enums';
14+
import { AgentType, GlobalEvent, UserPermission } from '$lib/helpers/enums';
1515
import { ADMIN_ROLES } from '$lib/helpers/constants';
1616
import { globalEventStore } from '$lib/helpers/store';
17+
import MultiSelect from '$lib/common/MultiSelect.svelte';
1718
1819
1920
const firstPage = 1;
@@ -42,6 +43,13 @@
4243
/** @type {any} */
4344
let unsubscriber;
4445
46+
let agentTypeOptions = Object.entries(AgentType).map(([k, v]) => (
47+
{ key: k, value: v }
48+
));
49+
50+
/** @type {string[]} */
51+
let selectedAgentTypes = [];
52+
4553
onMount(async () => {
4654
user = await myInfo();
4755
getPagedAgents();
@@ -50,7 +58,8 @@
5058
if (event.name !== GlobalEvent.Search) return;
5159
5260
filter = {
53-
pager: { page: firstPage, size: pageSize, count: 0 },
61+
pager: initFilter.pager,
62+
types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
5463
similarName: event.payload || null
5564
};
5665
getPagedAgents();
@@ -138,17 +147,62 @@
138147
139148
getPagedAgents();
140149
}
150+
151+
152+
/**
153+
* @param {any} e
154+
*/
155+
function selectAgentTypeOption(e) {
156+
// @ts-ignore
157+
selectedAgentTypes = e.detail.selecteds?.map(x => x.value) || [];
158+
}
159+
160+
function searchAgents() {
161+
filter = {
162+
...filter,
163+
types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
164+
pager: initFilter.pager
165+
};
166+
getPagedAgents();
167+
}
141168
</script>
142169
143170
<HeadTitle title="{$_('List')}" />
144171
<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('List')}" />
145172
<LoadingToComplete isLoading={isLoading} />
146173
147-
{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
148-
<Button class="mb-4" color="primary" on:click={() => createNewAgent()}>
149-
<i class="bx bx-copy" /> {$_('New Agent')}
150-
</Button>
151-
{/if}
174+
<div class="agents-header-container mb-4">
175+
<div>
176+
{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
177+
<Button color="primary" on:click={() => createNewAgent()}>
178+
<i class="bx bx-copy" /> {$_('New Agent')}
179+
</Button>
180+
{/if}
181+
</div>
182+
<div class="agent-filter">
183+
<MultiSelect
184+
tag={'agent-label-select'}
185+
placeholder={'Select agent labels'}
186+
selectedText={'labels'}
187+
options={[]}
188+
on:select={e => {}}
189+
/>
190+
<MultiSelect
191+
tag={'agent-type-select'}
192+
placeholder={'Select agent types'}
193+
selectedText={'types'}
194+
options={agentTypeOptions}
195+
on:select={e => selectAgentTypeOption(e)}
196+
/>
197+
<Button
198+
class="btn btn-light"
199+
on:click={(e) => searchAgents()}
200+
>
201+
<i class="mdi mdi-magnify" />
202+
</Button>
203+
</div>
204+
</div>
205+
152206
153207
<Row>
154208
<CardAgent agents={agents.items} />

‎src/routes/page/agent/[agentId]/+page.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
instruction: agent.instruction || '',
7676
channel_instructions: agent.channel_instructions || [],
7777
profiles: agent.profiles?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
78+
labels: agent.labels?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
7879
utilities: agent.utilities || [],
7980
knowledge_bases: agent.knowledge_bases || [],
8081
rules: agent.rules || [],
@@ -161,7 +162,7 @@
161162
<Row class="agent-detail-sections">
162163
<Col class="section-min-width agent-col" style="flex: 40%;">
163164
<div class="agent-detail-section">
164-
<AgentOverview agent={agent} profiles={agent.profiles || []} />
165+
<AgentOverview agent={agent} profiles={agent.profiles || []} labels={agent.labels || []} />
165166
</div>
166167
<div class="agent-detail-section">
167168
<AgentTabs bind:this={agentTabsCmp} agent={agent} />

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

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { AgentType } from '$lib/helpers/enums';
77
import { AgentExtensions } from '$lib/helpers/utils/agent';
88
9-
const profileLimit = 10;
9+
const limit = 10;
1010
1111
1212
/** @type {import('$agentTypes').AgentModel} */
@@ -15,6 +15,9 @@
1515
/** @type {string[]} */
1616
export let profiles = [];
1717
18+
/** @type {string[]} */
19+
export let labels = [];
20+
1821
onMount(() => {});
1922
2023
function addProfile() {
@@ -32,6 +35,21 @@
3235
agent.profiles = profiles;
3336
}
3437
38+
function addLabel() {
39+
if (!!!agent) return;
40+
41+
labels = [...labels, ''];
42+
agent.labels = labels;
43+
}
44+
45+
/**
46+
* @param {number} index
47+
*/
48+
function removeLabel(index) {
49+
labels = labels.filter((x, idx) => idx !== index);
50+
agent.labels = labels;
51+
}
52+
3553
function chatWithAgent() {
3654
if (!!!agent?.id) return;
3755
@@ -127,7 +145,7 @@
127145
</div>
128146
</div>
129147
{/each}
130-
{#if profiles?.length < profileLimit}
148+
{#if profiles?.length < limit}
131149
<div class="list-add">
132150
<i
133151
class="bx bx bx-list-plus"
@@ -141,6 +159,44 @@
141159
</div>
142160
</td>
143161
</tr>
162+
<tr>
163+
<th class="agent-prop-key">Labels</th>
164+
<td>
165+
<div class="agent-prop-list-container vertical-flexible">
166+
{#each labels as label, index}
167+
<div class="edit-wrapper">
168+
<input
169+
class="form-control edit-text-box"
170+
type="text"
171+
placeholder="Typing here..."
172+
maxlength={30}
173+
bind:value={label}
174+
/>
175+
<div class="delete-icon">
176+
<i
177+
class="bx bxs-no-entry"
178+
role="link"
179+
tabindex="0"
180+
on:keydown={() => {}}
181+
on:click={() => removeLabel(index)}
182+
/>
183+
</div>
184+
</div>
185+
{/each}
186+
{#if labels?.length < limit}
187+
<div class="list-add">
188+
<i
189+
class="bx bx bx-list-plus"
190+
role="link"
191+
tabindex="0"
192+
on:keydown={() => {}}
193+
on:click={() => addLabel()}
194+
/>
195+
</div>
196+
{/if}
197+
</div>
198+
</td>
199+
</tr>
144200
<tr>
145201
<th class="agent-prop-key">Status</th>
146202
<td>

0 commit comments

Comments
 (0)