Skip to content

Commit 9ee3f83

Browse files
Oceania2018Oceania2018
authored
Merge pull request #149 from iceljc/features/add-agent-tool
add agent tools
2 parents 47682f7 + f727d35 commit 9ee3f83

File tree

9 files changed

+143
-23
lines changed

9 files changed

+143
-23
lines changed

‎src/lib/helpers/types.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@
122122
* @property {boolean} allow_routing
123123
* @property {string} icon_url - Icon
124124
* @property {string[]} profiles - The agent profiles.
125+
* @property {string[]} tools - The agent tools.
125126
* @property {Date} created_datetime
126127
* @property {Date} updated_datetime
127128
* @property {AgentLlmConfig} llm_config - LLM settings.

‎src/lib/scss/_variables.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1808,4 +1808,7 @@ $nested-kbd-font-weight: null; // Deprecated in v5.2.0, removing in v
18081808

18091809
$pre-color: null;
18101810

1811-
$faded-color: #BCBCBC;
1811+
$faded-color: #BCBCBC;
1812+
1813+
$log-sec-height-lg: 400px;
1814+
$log-sec-height-sm: 300px;

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

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,41 @@
22
width: 45%;
33
}
44

5-
.agent-profile-container {
6-
width: fit-content;
5+
.agent-prop-list-container {
6+
width: 85%;
77
max-width: 100%;
8-
.profile-name {
9-
font-size: 1.1em;
8+
9+
.edit-wrapper {
10+
display: flex;
11+
flex-wrap: wrap;
12+
gap: 5px;
13+
margin-bottom: 5px;
14+
margin-left: -0.75rem;
15+
16+
.edit-text-box {
17+
flex: 0.9;
18+
border: none;
19+
}
20+
21+
.delete-icon {
22+
flex: 0.1;
23+
display: flex;
24+
align-items: center;
25+
26+
i {
27+
cursor: pointer;
28+
font-size: 18px;
29+
color: red;
30+
}
31+
}
32+
}
33+
34+
.list-add {
35+
font-size: 20px;
36+
37+
i {
38+
cursor: pointer;
39+
}
1040
}
1141
}
1242

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -375,11 +375,8 @@
375375
border-radius: 10px;
376376
border: 1px solid var(--bs-secondary);
377377
margin: 0px 60px;
378-
flex: 0 0 400px;
379378
display: flex;
380379
flex-direction: column;
381-
height: 400px;
382-
min-height: 400px;
383380

384381
.close-icon {
385382
font-size: 20px;
@@ -391,6 +388,18 @@
391388
}
392389
}
393390
}
391+
392+
.instant-log-sec-lg {
393+
flex: 0 0 $log-sec-height-lg;
394+
height: $log-sec-height-lg;
395+
min-height: $log-sec-height-lg;
396+
}
397+
398+
.instant-log-sec-sm {
399+
flex: 0 0 $log-sec-height-sm;
400+
height: $log-sec-height-sm;
401+
min-height: $log-sec-height-sm;
402+
}
394403
}
395404

396405
.nav-group {

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,15 @@ export async function refreshAgents() {
7373
export async function createAgent(agent) {
7474
const url = endpoints.agentCreateUrl;
7575
const response = await axios.post(url, agent);
76-
console.log(response.data);
76+
return response.data;
77+
}
78+
79+
/**
80+
* Get agent tools
81+
* @returns {Promise<string[]>}
82+
*/
83+
export async function getAgentTools() {
84+
const url = endpoints.agentToolsUrl;
85+
const response = await axios.get(url);
7786
return response.data;
7887
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const endpoints = {
2424
agentDetailUrl: `${host}/agent/{id}`,
2525
agentRefreshUrl: `${host}/refresh-agents`,
2626
agentCreateUrl: `${host}/agent`,
27+
agentToolsUrl: `${host}/agent/tools`,
2728

2829
// agent task
2930
agentTaskListUrl: `${host}/agent/tasks`,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
</div>
119119
</div>
120120
<div class="log-body instant-log-body">
121-
<div class="log-list instant-log-section" class:hide={!!!msgStateLogs || msgStateLogs?.length === 0}>
121+
<div class="log-list instant-log-section instant-log-sec-lg" class:hide={!!!msgStateLogs || msgStateLogs?.length === 0}>
122122
<div class="close-icon">
123123
<span
124124
style="float: right;"
@@ -139,7 +139,7 @@
139139
</div>
140140
</div>
141141

142-
<div class="log-list instant-log-section" class:hide={!!!agentQueueLogs || agentQueueLogs?.length === 0}>
142+
<div class="log-list instant-log-section instant-log-sec-sm" class:hide={!!!agentQueueLogs || agentQueueLogs?.length === 0}>
143143
<div class="close-icon">
144144
<span
145145
style="float: right;"

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@
6262
...agent,
6363
description: agent.description || '',
6464
instruction: agent.instruction || '',
65-
profiles: agent.profiles?.filter(x => x?.trim()?.length > 0) || []
65+
profiles: agent.profiles?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
66+
tools: agent.tools?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || []
6667
};
6768
saveAgent(agent).then(res => {
6869
isLoading = false;
@@ -123,7 +124,7 @@
123124
{#if agent}
124125
<Row>
125126
<Col style="flex: 30%;">
126-
<AgentOverview agent={agent} profiles={agent.profiles || []} />
127+
<AgentOverview agent={agent} profiles={agent.profiles || []} tools={agent.tools || []} />
127128
<AgentLlmConfig agent={agent} />
128129
{#if agent.routing_rules?.length > 0}
129130
<AgentRouting agent={agent} />

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

Lines changed: 76 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
11
<script>
2-
import { Button, Card, CardBody, CardHeader, Col, Table } from '@sveltestrap/sveltestrap';
2+
import { Card, CardBody, CardHeader, Input, Table } from '@sveltestrap/sveltestrap';
33
import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
44
import { format } from '$lib/helpers/datetime';
5+
import { onMount } from 'svelte';
6+
import { getAgentTools } from '$lib/services/agent-service';
57
68
/** @type {import('$types').AgentModel} */
79
export let agent;
810
911
/** @type {string[]} */
1012
export let profiles = [];
1113
14+
/** @type {string[]} */
15+
export let tools = [];
16+
17+
/** @type {string[]} */
18+
let toolOptions = [];
19+
1220
const profileLimit = 10;
21+
const toolLimit = 10;
22+
23+
onMount(() => {
24+
getAgentTools().then(data => {
25+
const tools = data?.filter(x => x?.trim()?.length > 0) || [];
26+
toolOptions = ["", ...tools];
27+
});
28+
});
1329
1430
function addProfile() {
1531
if (!!!agent) return;
@@ -26,6 +42,21 @@
2642
agent.profiles = profiles;
2743
}
2844
45+
function addTool() {
46+
if (!!!agent) return;
47+
48+
tools = [...tools, ''];
49+
agent.tools = tools;
50+
}
51+
52+
/**
53+
* @param {number} index
54+
*/
55+
function removeTool(index) {
56+
tools = tools.filter((x, idx) => idx !== index);
57+
agent.tools = tools;
58+
}
59+
2960
function chatWithAgent() {
3061
if (!!!agent?.id) return;
3162
@@ -86,19 +117,19 @@
86117
<tr>
87118
<th class="agent-prop-key">Profiles</th>
88119
<td>
89-
<div class="agent-profile-container">
120+
<div class="agent-prop-list-container">
90121
{#each profiles as profile, index}
91-
<div style="display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px;">
122+
<div class="edit-wrapper">
92123
<input
93-
class="form-control"
94-
style="flex: 0.9; border: none; padding-left: 0px;"
124+
class="form-control edit-text-box"
95125
type="text"
96126
placeholder="Typing here..."
97-
bind:value={profile} maxlength={30} />
98-
<div style="flex: 0.1; display: flex; align-items: center;">
127+
maxlength={30}
128+
bind:value={profile}
129+
/>
130+
<div class="delete-icon">
99131
<i
100132
class="bx bxs-no-entry"
101-
style="cursor: pointer; font-size: 18px; color: red;"
102133
role="link"
103134
tabindex="0"
104135
on:keydown={() => {}}
@@ -108,10 +139,9 @@
108139
</div>
109140
{/each}
110141
{#if profiles?.length < profileLimit}
111-
<div style="font-size: 20px;">
142+
<div class="list-add">
112143
<i
113144
class="bx bx bx-list-plus"
114-
style="cursor: pointer;"
115145
role="link"
116146
tabindex="0"
117147
on:keydown={() => {}}
@@ -122,6 +152,42 @@
122152
</div>
123153
</td>
124154
</tr>
155+
<tr>
156+
<th class="agent-prop-key">Tools</th>
157+
<td>
158+
<div class="agent-prop-list-container">
159+
{#each tools as tool, index}
160+
<div class="edit-wrapper">
161+
<Input type="select" class="edit-text-box" bind:value={tool}>
162+
{#each toolOptions as option}
163+
<option selected={tool === option}>{option}</option>
164+
{/each}
165+
</Input>
166+
<div class="delete-icon">
167+
<i
168+
class="bx bxs-no-entry"
169+
role="link"
170+
tabindex="0"
171+
on:keydown={() => {}}
172+
on:click={() => removeTool(index)}
173+
/>
174+
</div>
175+
</div>
176+
{/each}
177+
{#if tools?.length < toolLimit}
178+
<div class="list-add">
179+
<i
180+
class="bx bx bx-list-plus"
181+
role="link"
182+
tabindex="0"
183+
on:keydown={() => {}}
184+
on:click={() => addTool()}
185+
/>
186+
</div>
187+
{/if}
188+
</div>
189+
</td>
190+
</tr>
125191
<tr>
126192
<th class="agent-prop-key">Status</th>
127193
<td>

0 commit comments

Comments
 (0)