From 7cbc0ccde86d5c5ae5fdbc50eba1ad40b5e6547e Mon Sep 17 00:00:00 2001
From: Haiping Chen <haiping008@gmail.com>
Date: Fri, 2 Feb 2024 16:35:23 -0600
Subject: [PATCH] AgentTask

---
 src/lib/helpers/types.js                      |  20 ++
 src/lib/services/api-endpoints.js             |   3 +
 src/lib/services/task-service.js              |  18 ++
 src/routes/(home)/+page.svelte                |   2 +-
 src/routes/page/conversation/+page.svelte     |   4 +-
 .../[conversationId]/conv-dialogs.svelte      |  17 +-
 src/routes/page/task/+page.svelte             | 236 ++++++++++++++++++
 7 files changed, 293 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/services/task-service.js
 create mode 100644 src/routes/page/task/+page.svelte

diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
index e7cbeb78..ce26278b 100644
--- a/src/lib/helpers/types.js
+++ b/src/lib/helpers/types.js
@@ -124,6 +124,26 @@
  * @property {AgentLlmConfig} llmConfig - LLM settings.
  */
 
+/** 
+ * @typedef {Object} AgentTaskFilter
+ * @property {Pagination} pager - Pagination
+ * @property {string} [agentId] - The agent id.
+ */
+
+/**
+ * @typedef {Object} AgentTaskViewModel
+ * @property {string} id - Task id.
+ * @property {string} name - Task name.
+ * @property {string} description - Description.
+ * @property {string} content - Task detail.
+ * @property {boolean} enabled
+ * @property {Date} created_datetime
+ * @property {Date} updated_datetime
+ * @property {string} agent_id - Description.
+ * @property {string} agent_name - Task detail.
+ */
+
+
 /**
  * @typedef {Object} InstructMessageModel
  * @property {string} [instruction] - User provided prompt instead of predefined template.
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 54691189..0974cd9a 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -23,6 +23,9 @@ export const endpoints = {
     agentDetailUrl: `${host}/agent/{id}`,
     agentRefreshUrl: `${host}/refresh-agents`,
     
+    // agent task
+    agentTaskListUrl: `${host}/agent/tasks`,
+
     // agent instruct
     instructCompletionUrl: `${host}/instruct/{agentId}`,
 
diff --git a/src/lib/services/task-service.js b/src/lib/services/task-service.js
new file mode 100644
index 00000000..a852a3eb
--- /dev/null
+++ b/src/lib/services/task-service.js
@@ -0,0 +1,18 @@
+import { endpoints } from '$lib/services/api-endpoints.js';
+import { replaceUrl } from '$lib/helpers/http';
+import axios from 'axios';
+
+/**
+ * Get agent list
+ * @param {import('$types').AgentTaskFilter} filter
+ * @returns {Promise<import('$types').PagedItems<import('$types').AgentTaskViewModel>>}
+ */
+export async function getAgentTasks(filter) {
+    const response = await axios.get(endpoints.agentTaskListUrl, { params: filter,
+        paramsSerializer: {
+            dots: true,
+            indexes: null,
+        }
+    });
+    return response.data;
+}
\ No newline at end of file
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
index e6295916..a5ab0ebc 100644
--- a/src/routes/(home)/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -35,7 +35,7 @@
             </Link>                
         </Col>
     </Row>
-    <Row>
+    <Row class="d-flex justify-content-center align-items-center" style="height: 60vh;">
         <Col lg="12">
             <div class="text-center">
                 <Row class="justify-content-center mt-5">
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 69b50d82..bcd993a5 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -246,9 +246,9 @@
                                             </Link>
 										</li>
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
-											<Link href="#" on:click={() => openDeleteModal(conv.id)} class="btn btn-sm btn-soft-danger">
+											<Button on:click={() => openDeleteModal(conv.id)} class="btn btn-sm btn-soft-danger">
                                                 <i class="mdi mdi-delete-outline" />
-                                            </Link>
+                                            </Button>
 										</li>
 									</ul>
 								</td>
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
index 080d23a3..d78ea551 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
@@ -13,6 +13,15 @@
     onMount(async () => {
         dialogs = await GetDialogs(conversation.id);
     });
+
+    /** 
+     * @param {import('$types').ChatResponseModel} dialog
+     * @returns {boolean}
+    */
+    function showInRight(dialog) {
+        const sender = dialog.sender;
+        return sender.role != "client" && sender.role != "user";
+    }
 </script>
 
 <Card>
@@ -24,14 +33,14 @@
                 <li class="event-list">
                     <div class="event-timeline-dot">
                       <i
-                        class={dialog.sender.role === "client"
-                          ? "bx bx-right-arrow-circle bx-fade-right"
-                          : "bx bx-right-arrow-circle"}
+                        class={"bx " + showInRight(dialog)
+                          ? "bx-right-arrow-circle bx-fade-right"
+                          : "bx-right-arrow-circle"}
                       />
                     </div>
                     <div class="d-flex">
                         <div class="flex-shrink-0 me-3">
-                            <i class={"bx " + (dialog.sender.role == "client" ? "bx-user" : "bx-bot") + " h2 text-primary"}></i>
+                            <i class={"bx " + (showInRight(dialog) ? "bx-user" : "bx-bot") + " h2 text-primary"}></i>
                         </div>
                         <div class="flex-grow-1">
                             <div>
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
new file mode 100644
index 00000000..fd3780ba
--- /dev/null
+++ b/src/routes/page/task/+page.svelte
@@ -0,0 +1,236 @@
+<script>
+	import {
+		Button,
+		Card,
+		CardBody,
+		Col,
+		Dropdown,
+		DropdownItem,
+		DropdownMenu,
+		DropdownToggle,
+		Input,
+		Row,
+		Table
+	} from '@sveltestrap/sveltestrap';
+	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/HeadTitle.svelte';
+	import TablePagination from '$lib/common/TablePagination.svelte';
+	import { onMount } from 'svelte';
+	import Link from 'svelte-link';
+    import { getAgentTasks } from '$lib/services/task-service';
+	import { utcToLocal } from '$lib/helpers/datetime';
+	import Swal from 'sweetalert2/dist/sweetalert2.js';
+	import "sweetalert2/src/sweetalert2.scss";
+	import { replaceNewLine } from '$lib/helpers/http';
+
+	let isError = false;
+	const duration = 3000;
+	const firstPage = 1;
+	const pageSize = 10;
+
+    /** @type {import('$types').PagedItems<import('$types').AgentTaskViewModel>} */
+    let tasks = { count: 0, items: [] };
+
+	/** @type {import('$types').AgentTaskFilter} */
+	const initFilter = {
+		pager: { page: firstPage, size: pageSize, count: 0 }
+	};
+
+    /** @type {import('$types').AgentTaskFilter} */
+    let filter = { ... initFilter };
+
+	/** @type {import('$types').Pagination} */
+	let pager = filter.pager;
+
+    onMount(async () => {
+		await getPagedAgentTasks();
+    });
+
+	async function getPagedAgentTasks() {
+		tasks = await getAgentTasks( filter);
+		refresh();
+	}
+
+	function refresh() {
+		refreshTasks();
+		refreshPager(tasks.count, filter.pager.page, filter.pager.size);
+	}
+
+	function refreshTasks() {
+		tasks = {
+			items: tasks?.items?.map(t => { return { ...t }; }) || [],
+			count: tasks?.count || 0
+		};
+	}
+
+	/** @param {number} totalItemsCount */
+	function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
+		pager = {
+			page: page,
+			size: pageCount,
+			count: totalItemsCount
+		};
+	}
+
+	/** @param {number} pageNum */
+	function pageTo(pageNum) {
+		pager = {
+			...pager,
+			page: pageNum
+		};
+
+		filter = {
+			...filter,
+			pager: pager
+		};
+
+		getPagedAgentTasks();
+	}
+
+
+	async function reloadConversations() {
+		filter = { ...initFilter };
+		tasks = await getAgentTasks(filter);
+		refreshPager(tasks.count);
+	}
+
+	/** @param {string} taskId */
+    function handleTaskDeletion(taskId) {
+        /*deleteConversation(conversationId).then(async () => {
+			isLoading = false;
+			isComplete = true;
+			setTimeout(() => {
+				isComplete = false;
+			}, duration);
+			await reloadConversations();
+		}).catch(err => {
+			isLoading = false;
+			isComplete = false;
+			isError = true;
+			setTimeout(() => {
+				isError = false;
+			}, duration);
+		});*/
+    }
+
+	/** @param {string} taskId */
+	function openDeleteModal(taskId) {
+		// @ts-ignore
+		Swal.fire({
+            title: 'Are you sure?',
+            text: "You won't be able to revert this!",
+            icon: 'warning',
+			customClass: 'delete-modal',
+            showCancelButton: true,
+            confirmButtonText: 'Yes, delete it!'
+        // @ts-ignore
+        }).then((result) => {
+            if (result.value) {
+				handleTaskDeletion(taskId);
+            }
+        });
+	}
+
+	/**
+	 * @param {any} e
+	 */
+	function searchTasks(e) {
+		e.preventDefault();
+		filter = {
+			...filter,
+			pager: { page: firstPage, size: pageSize, count: 0 }
+		};
+		getPagedAgentTasks();
+	}
+</script>
+
+<HeadTitle title="Task List" />
+<Breadcrumb title="Agent" pagetitle="Task" />
+
+<Row>
+	<Col lg="12">
+		<Card>
+			<CardBody class="border-bottom">
+				<div class="d-flex align-items-center">
+					<h5 class="mb-0 card-title flex-grow-1">Task List</h5>
+					<div class="flex-shrink-0">
+						<Link class="btn btn-light" on:click={(e) => searchTasks(e)}><i class="mdi mdi-magnify" /></Link>
+						<Dropdown class="dropdown d-inline-block">
+							<DropdownToggle type="menu" class="btn" id="dropdownMenuButton1">
+								<i class="mdi mdi-dots-vertical" /></DropdownToggle
+							>
+							<DropdownMenu>
+								<DropdownItem>Action</DropdownItem>
+							</DropdownMenu>
+						</Dropdown>
+					</div>
+				</div>
+			</CardBody>
+			<CardBody class="border-bottom">
+				<Row class="g-3">
+					<Col xxl="4" lg="6">
+						<Input
+							type="search"
+							class="form-control"
+							id="searchTableList"
+							placeholder="Search for ..."
+						/>
+					</Col>
+					<Col xxl="2" lg="6">
+						<select class="form-select" id="idStatus" bind:value={filter.status}>
+							<option value={null}>Status</option>
+							<option value="open">Active</option>
+							<option value="closed">Completed</option>
+						</select>
+					</Col>
+					<Col xxl="2" lg="4">
+						<Button type="button" color="secondary" class="btn-soft-secondary w-100">
+							<i class="mdi mdi-filter-outline align-middle" /> Filter
+						</Button>
+					</Col>
+				</Row>
+			</CardBody>
+			<CardBody>
+				<div class="table-responsive">
+					<Table class="align-middle nowrap" bordered>
+						<thead>
+							<tr>
+								<th scope="col">Name</th>
+								<th scope="col">Description</th>
+								<th scope="col">Agent</th>
+								<th scope="col">Content</th>
+								<th scope="col">Updated Date</th>
+								<th scope="col">Status</th>
+								<th scope="col">Action</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each tasks.items as task}
+							<tr>
+								<td scope="row">
+									<a href="page/conversation/{task.id}">{task.name}</a>
+								</td>
+								<td>{task.description}</td>
+								<td>{task.agent_name}</td>
+								<td>{@html replaceNewLine(task.content)}</td>
+								<td>{utcToLocal(task.updated_datetime)}</td>
+								<td><span class="badge bg-success">{task.enabled ? "Enabled" : "Disabled"}</span></td>
+								<td>
+									<ul class="list-unstyled hstack gap-1 mb-0">
+										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
+											<Button on:click={() => openDeleteModal(task.id)} class="btn btn-sm btn-soft-danger">
+                                                <i class="mdi mdi-delete-outline" />
+                                            </Button>
+										</li>
+									</ul>
+								</td>
+							</tr>
+							{/each}
+						</tbody>
+					</Table>
+				</div>
+				<TablePagination pagination={pager} pageTo={pageTo} />
+			</CardBody>
+		</Card>
+	</Col>
+</Row>
\ No newline at end of file