Skip to content

Commit e0ca31b

Browse files
iceljciceljc
authored
Merge pull request #326 from iceljc/features/refine-chat-window
add save agent task
2 parents 24e3254 + 2ade75d commit e0ca31b

File tree

5 files changed

+194
-72
lines changed

5 files changed

+194
-72
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@
9494
* @property {string} content - Task detail.
9595
* @property {boolean} enabled
9696
* @property {string} status
97-
* @property {Date} created_datetime
98-
* @property {Date} updated_datetime
97+
* @property {Date} created_time
98+
* @property {Date} updated_time
9999
* @property {string} agent_id - Description.
100100
* @property {string} agent_name - Task detail.
101101
* @property {string} [direct_agent_id] - Run task directly in this agent.

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

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const endpoints = {
4141
// agent task
4242
agentTaskListUrl: `${host}/agent/tasks`,
4343
agentTaskDetailUrl: `${host}/agent/{agentId}/task/{taskId}`,
44+
agentTaskUpdateUrl: `${host}/agent/{agentId}/task/{taskId}`,
4445

4546
// agent instruct
4647
instructCompletionUrl: `${host}/instruct/{agentId}`,

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

+14
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,18 @@ export async function getAgentTaskDetail(agentId, taskid) {
2727
const url = replaceUrl(endpoints.agentTaskDetailUrl, { agentId: agentId, taskId: taskid });
2828
var response = await axios.get(url);
2929
return response.data;
30+
}
31+
32+
/**
33+
* Update agent task
34+
* @param {string} agentId
35+
* @param {string} taskId
36+
* @param {import('$agentTypes').AgentTaskModel} task
37+
*/
38+
export async function updateAgentTask(agentId, taskId, task) {
39+
const url = replaceUrl(endpoints.agentTaskUpdateUrl, { agentId: agentId, taskId: taskId });
40+
var response = await axios.put(url, {
41+
...task
42+
});
43+
return response.data;
3044
}

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

+107-70
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script>
22
import { onMount } from 'svelte';
3-
import { _ } from 'svelte-i18n'
3+
import { _ } from 'svelte-i18n';
4+
import Swal from 'sweetalert2';
5+
import 'overlayscrollbars/overlayscrollbars.css';
6+
import { OverlayScrollbars } from 'overlayscrollbars';
47
import {
58
Button,
69
Card,
@@ -17,15 +20,12 @@
1720
import Breadcrumb from '$lib/common/Breadcrumb.svelte';
1821
import HeadTitle from '$lib/common/HeadTitle.svelte';
1922
import TablePagination from '$lib/common/TablePagination.svelte';
20-
import { getAgentTasks } from '$lib/services/task-service';
21-
import { utcToLocal } from '$lib/helpers/datetime';
22-
import Swal from 'sweetalert2';
23-
import { replaceNewLine } from '$lib/helpers/http';
24-
import 'overlayscrollbars/overlayscrollbars.css';
25-
import { OverlayScrollbars } from 'overlayscrollbars';
23+
import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
24+
import { getAgentTasks, updateAgentTask } from '$lib/services/task-service';
2625
import { AgentTaskStatus } from '$lib/helpers/enums';
26+
import TaskItem from './task-item.svelte';
27+
2728
28-
let isError = false;
2929
const duration = 3000;
3030
const firstPage = 1;
3131
const pageSize = 10;
@@ -42,6 +42,10 @@
4242
}
4343
};
4444
45+
let isLoading = false;
46+
let isComplete = false;
47+
let successText = "Update completed!";
48+
4549
/** @type {import('$commonTypes').PagedItems<import('$agentTypes').AgentTaskModel>} */
4650
let tasks = { count: 0, items: [] };
4751
@@ -123,42 +127,6 @@
123127
refreshPager(tasks.count);
124128
}
125129
126-
/** @param {string} taskId */
127-
function handleTaskDeletion(taskId) {
128-
/*deleteConversation(conversationId).then(async () => {
129-
isLoading = false;
130-
isComplete = true;
131-
setTimeout(() => {
132-
isComplete = false;
133-
}, duration);
134-
await reloadConversations();
135-
}).catch(err => {
136-
isLoading = false;
137-
isComplete = false;
138-
isError = true;
139-
setTimeout(() => {
140-
isError = false;
141-
}, duration);
142-
});*/
143-
}
144-
145-
/** @param {string} taskId */
146-
function openDeleteModal(taskId) {
147-
// @ts-ignore
148-
Swal.fire({
149-
title: 'Are you sure?',
150-
text: "You won't be able to revert this!",
151-
icon: 'warning',
152-
customClass: 'custom-modal',
153-
showCancelButton: true,
154-
confirmButtonText: 'Yes, delete it!'
155-
}).then((result) => {
156-
if (result.value) {
157-
handleTaskDeletion(taskId);
158-
}
159-
});
160-
}
161-
162130
/**
163131
* @param {any} e
164132
*/
@@ -200,10 +168,99 @@
200168
};
201169
}
202170
}
171+
172+
/** @param {any} e */
173+
function onTaskSaved(e) {
174+
const task = e.detail.task;
175+
if (!task) return;
176+
177+
openSaveModal(task);
178+
}
179+
180+
/** @param {import('$agentTypes').AgentTaskModel} task */
181+
function openSaveModal(task) {
182+
// @ts-ignore
183+
Swal.fire({
184+
title: 'Are you sure?',
185+
text: "You can change it back.",
186+
icon: 'warning',
187+
customClass: 'custom-modal',
188+
showCancelButton: true,
189+
confirmButtonText: 'Yes, save it!'
190+
}).then((result) => {
191+
if (result.value) {
192+
handleTaskSave(task);
193+
}
194+
});
195+
}
196+
197+
/** @param {import('$agentTypes').AgentTaskModel} task */
198+
function handleTaskSave(task) {
199+
updateAgentTask(task.agent_id, task.id, task).then(async () => {
200+
isLoading = false;
201+
isComplete = true;
202+
successText = "Update completed!";
203+
setTimeout(() => {
204+
isComplete = false;
205+
successText = '';
206+
}, duration);
207+
}).catch(() => {
208+
isLoading = false;
209+
isComplete = false;
210+
successText = '';
211+
});
212+
}
213+
214+
215+
216+
/** @param {any} e */
217+
function onTaskDeleted(e) {
218+
const task = e.detail.task;
219+
if (!task) return;
220+
221+
openDeleteModal(task.id);
222+
}
223+
224+
/** @param {string} taskId */
225+
function openDeleteModal(taskId) {
226+
// @ts-ignore
227+
Swal.fire({
228+
title: 'Are you sure?',
229+
text: "You won't be able to revert this!",
230+
icon: 'warning',
231+
customClass: 'custom-modal',
232+
showCancelButton: true,
233+
confirmButtonText: 'Yes, delete it!'
234+
}).then((result) => {
235+
if (result.value) {
236+
handleTaskDeletion(taskId);
237+
}
238+
});
239+
}
240+
241+
/** @param {string} taskId */
242+
function handleTaskDeletion(taskId) {
243+
/*deleteConversation(conversationId).then(async () => {
244+
isLoading = false;
245+
isComplete = true;
246+
setTimeout(() => {
247+
isComplete = false;
248+
}, duration);
249+
await reloadConversations();
250+
}).catch(err => {
251+
isLoading = false;
252+
isComplete = false;
253+
isError = true;
254+
setTimeout(() => {
255+
isError = false;
256+
}, duration);
257+
});*/
258+
}
203259
</script>
204260
205261
<HeadTitle title="{$_('Task List')}" />
206262
<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Task')}" />
263+
<LoadingToComplete isLoading={isLoading} isComplete={isComplete} />
207264
208265
<Row>
209266
<Col lg="12">
@@ -263,39 +320,19 @@
263320
<th scope="col">{$_('Description')}</th>
264321
<th scope="col">{$_('Agent')}</th>
265322
<th scope="col">{$_('Details')}</th>
266-
<th scope="col">{$_('Updated Date')}</th>
323+
<th scope="col">{$_('Updated Time')}</th>
267324
<th scope="col">{$_('Enabled')}</th>
268325
<th scope="col">{$_('Status')}</th>
269326
<th scope="col">{$_('Action')}</th>
270327
</tr>
271328
</thead>
272329
<tbody>
273330
{#each tasks.items as task}
274-
<tr>
275-
<td scope="row">
276-
<a href="page/conversation/{task.id}">{task.name}</a>
277-
</td>
278-
<td>{task.description}</td>
279-
<td>{task.agent_name}</td>
280-
<td><div style="max-height: 100px;" class="scrollbar">{@html replaceNewLine(task.content)}</div></td>
281-
<td>{utcToLocal(task.updated_datetime)}</td>
282-
<td><span class="badge bg-success">{task.enabled ? $_("Enabled") : $_("Disabled")}</span></td>
283-
<td><span class="badge bg-info">{task.status}</span></td>
284-
<td>
285-
<ul class="list-unstyled hstack gap-1 mb-0">
286-
<li data-bs-toggle="tooltip" data-bs-placement="top" title="View">
287-
<a href="page/task/{task.id}?agentId={task.agent_id}" target="_blank" class="btn btn-sm btn-soft-danger">
288-
<i class="mdi mdi-eye-outline" />
289-
</a>
290-
</li>
291-
<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
292-
<Button on:click={() => openDeleteModal(task.id)} class="btn btn-sm btn-soft-danger">
293-
<i class="mdi mdi-delete-outline" />
294-
</Button>
295-
</li>
296-
</ul>
297-
</td>
298-
</tr>
331+
<TaskItem
332+
task={task}
333+
on:save={e => onTaskSaved(e)}
334+
on:delete={e => onTaskDeleted(e)}
335+
/>
299336
{/each}
300337
</tbody>
301338
</Table>

‎src/routes/page/task/task-item.svelte

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script>
2+
import { createEventDispatcher } from 'svelte';
3+
import { _ } from 'svelte-i18n';
4+
import { Button } from "@sveltestrap/sveltestrap";
5+
import { utcToLocal } from "$lib/helpers/datetime";
6+
import { replaceNewLine } from "$lib/helpers/http";
7+
8+
const svelteDispatch = createEventDispatcher();
9+
10+
/** @type {import('$agentTypes').AgentTaskModel} */
11+
export let task;
12+
13+
/** @type {boolean} */
14+
export let disabled = false;
15+
16+
function toggleTask() {
17+
task.enabled = !task.enabled;
18+
}
19+
20+
function handleSaveTask() {
21+
svelteDispatch("save", {
22+
task: task
23+
});
24+
}
25+
26+
function handleDeleteTask() {
27+
svelteDispatch("delete", {
28+
task: task
29+
});
30+
}
31+
</script>
32+
33+
<tr>
34+
<td scope="row" class="text-primary">{task.name}</td>
35+
<td>{task.description}</td>
36+
<td>{task.agent_name}</td>
37+
<td><div style="max-height: 100px;" class="scrollbar">{@html replaceNewLine(task.content)}</div></td>
38+
<td>{utcToLocal(task.updated_time)}</td>
39+
<td>
40+
<!-- svelte-ignore a11y-click-events-have-key-events -->
41+
<!-- svelte-ignore a11y-no-static-element-interactions -->
42+
<span class="clickable" on:click={() => toggleTask()}>
43+
{#if task.enabled}
44+
<span class="badge bg-success">{$_("Enabled")}</span>
45+
{:else}
46+
<span class="badge bg-danger">{$_("Disabled")}</span>
47+
{/if}
48+
</span>
49+
</td>
50+
<td><span class="badge bg-info">{task.status}</span></td>
51+
<td>
52+
<ul class="list-unstyled hstack gap-1 mb-0">
53+
<li data-bs-toggle="tooltip" data-bs-placement="top" title="View">
54+
<a href="page/task/{task.id}?agentId={task.agent_id}" target="_blank" class="btn btn-sm btn-soft-primary">
55+
<i class="mdi mdi-eye-outline" />
56+
</a>
57+
</li>
58+
<li data-bs-toggle="tooltip" data-bs-placement="top" title="Save">
59+
<Button on:click={() => handleSaveTask()} class="btn btn-sm btn-soft-info">
60+
<i class="mdi mdi-content-save-all" />
61+
</Button>
62+
</li>
63+
<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
64+
<Button on:click={() => handleDeleteTask()} class="btn btn-sm btn-soft-danger">
65+
<i class="mdi mdi-delete-outline" />
66+
</Button>
67+
</li>
68+
</ul>
69+
</td>
70+
</tr>

0 commit comments

Comments
 (0)