From 22dc65fe19f32faa7dfd00eaa1d3375783fb416e Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 30 Jan 2025 15:58:17 -0600
Subject: [PATCH] refine agent filter, agent task filter, agent label

---
 src/lib/common/MultiSelect.svelte             |  7 +-
 src/lib/helpers/enums.js                      | 10 +++
 src/lib/helpers/types/agentTypes.js           | 18 +++-
 src/lib/scss/custom/pages/_agent.scss         | 17 ++++
 src/lib/scss/custom/structure/_topbar.scss    |  1 +
 .../[conversationId]/chat-box.svelte          |  5 +-
 src/routes/page/agent/+page.svelte            | 68 +++++++++++++--
 src/routes/page/agent/[agentId]/+page.svelte  |  3 +-
 .../agent-components/agent-overview.svelte    | 60 +++++++++++++-
 src/routes/page/agent/card-agent.svelte       | 25 ++++--
 src/routes/page/agent/evaluator/+page.svelte  |  2 +-
 src/routes/page/agent/router/+page.svelte     | 20 +++--
 .../page/agent/router/routing-flow.svelte     | 83 ++++++++++++++-----
 src/routes/page/conversation/+page.svelte     | 17 ++--
 src/routes/page/task/+page.svelte             | 74 ++++++++++++++---
 15 files changed, 340 insertions(+), 70 deletions(-)

diff --git a/src/lib/common/MultiSelect.svelte b/src/lib/common/MultiSelect.svelte
index b2cb03bf..d324e2f8 100644
--- a/src/lib/common/MultiSelect.svelte
+++ b/src/lib/common/MultiSelect.svelte
@@ -20,6 +20,9 @@
     /** @type {string} */
     export let placeholder = '';
 
+    /** @type {string} */
+    export let selectedText = '';
+
     /** @type {string} */
     export let containerClasses = "";
 
@@ -153,9 +156,9 @@
         if (count === 0) {
             displayText = '';
         } else if (count === options.length) {
-            displayText = `All selected (${count})`;
+            displayText = `All selected ${selectedText} (${count})`;
         } else {
-            displayText = `Selected (${count})`;
+            displayText = `Selected ${selectedText} (${count})`;
         }
 
         verifySelectAll();
diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
index f15b25e2..3ade3dc6 100644
--- a/src/lib/helpers/enums.js
+++ b/src/lib/helpers/enums.js
@@ -71,6 +71,16 @@ const agentType = {
 };
 export const AgentType = Object.freeze(agentType);
 
+const agentTaskStatus = {
+    Scheduled: 'scheduled',
+    New: 'new',
+    Running: 'running',
+    Success: 'success',
+    Failed: 'failed'
+};
+export const AgentTaskStatus = Object.freeze(agentTaskStatus);
+
+
 const knowledgeCollectionType = {
     QuestionAnswer: 'question-answer',
     Document: 'document'
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index c0ea4e6d..61912e5a 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -27,12 +27,12 @@
 /** 
  * @typedef {Object} AgentFilter
  * @property {import('$commonTypes').Pagination} pager - Pagination
- * @property {string} [type]
- * @property {string} [agentName]
+ * @property {string[]?} [types]
+ * @property {string[]?} [agentNames]
  * @property {string} [similarName]
  * @property {boolean} [isPublic]
  * @property {boolean} [disabled]
- * @property {string[]} [agentIds]
+ * @property {string[]?} [agentIds]
  */
 
 /**
@@ -46,9 +46,11 @@
  * @property {boolean} disabled
  * @property {boolean} is_public
  * @property {boolean} is_host
+ * @property {boolean} is_router
  * @property {boolean} allow_routing
  * @property {string} icon_url - Icon
  * @property {string[]} profiles - The agent profiles.
+ * @property {string[]} labels - The agent labels.
  * @property {boolean} merge_utility - Merge utility
  * @property {number?} [max_message_count]
  * @property {AgentUtility[]} utilities - The agent utilities.
@@ -78,6 +80,7 @@
  * @typedef {Object} AgentTaskFilter
  * @property {import('$commonTypes').Pagination} pager - Pagination
  * @property {string} [agentId] - The agent id.
+ * @property {string?} [status] - The agent task status.
  */
 
 /**
@@ -87,6 +90,7 @@
  * @property {string} description - Description.
  * @property {string} content - Task detail.
  * @property {boolean} enabled
+ * @property {string} status
  * @property {Date} created_datetime
  * @property {Date} updated_datetime
  * @property {string} agent_id - Description.
@@ -150,4 +154,12 @@
  * @property {string?} [displayName]
  */
 
+
+/**
+ * @typedef {Object} AgentTaskSearchOption
+ * @property {string?} [agentId]
+ * @property {string?} [status]
+ */
+
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 0596a38e..bb9ea63e 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -1,3 +1,13 @@
+.agents-header-container {
+    display: flex;
+    justify-content: space-between;
+
+    .agent-filter {
+        display: flex;
+        gap: 10px
+    }
+}
+
 .agent-prop-key {
     width: 45%;
 }
@@ -205,4 +215,11 @@
             }
         }
     }
+}
+
+.agent-label-container {
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+    margin: 5px 0px;
 }
\ No newline at end of file
diff --git a/src/lib/scss/custom/structure/_topbar.scss b/src/lib/scss/custom/structure/_topbar.scss
index 98bfe937..d37e5c70 100644
--- a/src/lib/scss/custom/structure/_topbar.scss
+++ b/src/lib/scss/custom/structure/_topbar.scss
@@ -101,6 +101,7 @@
 }
 
 .page-content {
+    min-height: 500px;
     padding: calc(#{$header-height} + #{$grid-gutter-width}) calc(#{$grid-gutter-width} * 0.75) $footer-height calc(#{$grid-gutter-width} * 0.75);
 }
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 94378811..f264cfab 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -70,8 +70,7 @@
 	import ChatBigMessage from './chat-util/chat-big-message.svelte';
 	import PersistLog from './persist-log/persist-log.svelte';
 	import InstantLog from './instant-log/instant-log.svelte';
-	
-	
+
 	
 	const options = {
 		scrollbars: {
@@ -1651,7 +1650,7 @@
 												<div class="msg-container">
 													<RcMessage containerClasses={'bot-msg'} markdownClasses={'markdown-dark text-dark'} message={message} />
 													{#if message?.message_id === lastBotMsg?.message_id && message?.uuid === lastBotMsg?.uuid}
-														<div style="display: flex; gap: 10px; flex-wrap: wrap;">
+														<div style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px;">
 															{#if PUBLIC_LIVECHAT_SPEAKER_ENABLED === 'true'}
 																<AudioSpeaker
 																	id={message?.message_id} 
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index f211a828..03a6ef43 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -11,9 +11,10 @@
 	import { _ } from 'svelte-i18n'
 	import { goto } from '$app/navigation';
 	import Swal from 'sweetalert2';
-	import { GlobalEvent, UserPermission } from '$lib/helpers/enums';
+	import { AgentType, GlobalEvent, UserPermission } from '$lib/helpers/enums';
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { globalEventStore } from '$lib/helpers/store';
+	import MultiSelect from '$lib/common/MultiSelect.svelte';
 	
 	
   	const firstPage = 1;
@@ -42,6 +43,13 @@
 	/** @type {any} */
 	let unsubscriber;
 
+	let agentTypeOptions = Object.entries(AgentType).map(([k, v]) => (
+		{ key: k, value: v }
+	));
+
+	/** @type {string[]} */
+	let selectedAgentTypes = [];
+
 	onMount(async () => {
 		user = await myInfo();
 		getPagedAgents();
@@ -50,7 +58,8 @@
 			if (event.name !== GlobalEvent.Search) return;
 
 			filter = {
-				pager: { page: firstPage, size: pageSize, count: 0 },
+				pager: initFilter.pager,
+				types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
 				similarName: event.payload || null
 			};
 			getPagedAgents();
@@ -138,17 +147,62 @@
 
 		getPagedAgents();
 	}
+
+	
+	/**
+	 * @param {any} e
+	 */
+	function selectAgentTypeOption(e) {
+		// @ts-ignore
+		selectedAgentTypes = e.detail.selecteds?.map(x => x.value) || [];
+	}
+
+	function searchAgents() {
+		filter = {
+			...filter,
+			types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
+			pager: initFilter.pager
+		};
+		getPagedAgents();
+	}
 </script>
 
 <HeadTitle title="{$_('List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('List')}" />
 <LoadingToComplete isLoading={isLoading} />
 
-{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
-<Button class="mb-4" color="primary" on:click={() => createNewAgent()}>
-	<i class="bx bx-copy" /> {$_('New Agent')}
-</Button>
-{/if}
+<div class="agents-header-container mb-4">
+	<div>
+		{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
+		<Button color="primary" on:click={() => createNewAgent()}>
+			<i class="bx bx-copy" /> {$_('New Agent')}
+		</Button>
+		{/if}
+	</div>
+	<div class="agent-filter">
+		<MultiSelect
+			tag={'agent-label-select'}
+			placeholder={'Select agent labels'}
+			selectedText={'labels'}
+			options={[]}
+			on:select={e => {}}
+		/>
+		<MultiSelect
+			tag={'agent-type-select'}
+			placeholder={'Select agent types'}
+			selectedText={'types'}
+			options={agentTypeOptions}
+			on:select={e => selectAgentTypeOption(e)}
+		/>
+		<Button
+			class="btn btn-light"
+			on:click={(e) => searchAgents()}
+		>
+			<i class="mdi mdi-magnify" />
+		</Button>
+	</div>
+</div>
+
 
 <Row>
 	<CardAgent agents={agents.items} />
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 753bec9f..db2bdecd 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -75,6 +75,7 @@
             instruction: agent.instruction || '',
             channel_instructions: agent.channel_instructions || [],
             profiles: agent.profiles?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
+            labels: agent.labels?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
             utilities: agent.utilities || [],
             knowledge_bases: agent.knowledge_bases || [],
             rules: agent.rules || [],
@@ -161,7 +162,7 @@
     <Row class="agent-detail-sections">
         <Col class="section-min-width agent-col" style="flex: 40%;">
             <div class="agent-detail-section">
-                <AgentOverview agent={agent} profiles={agent.profiles || []} />
+                <AgentOverview agent={agent} profiles={agent.profiles || []} labels={agent.labels || []} />
             </div>
             <div class="agent-detail-section">
                 <AgentTabs bind:this={agentTabsCmp} agent={agent} />
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
index 56acd942..95c22905 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -6,7 +6,7 @@
 	import { AgentType } from '$lib/helpers/enums';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 
-    const profileLimit = 10;
+    const limit = 10;
 
 
     /** @type {import('$agentTypes').AgentModel} */
@@ -15,6 +15,9 @@
     /** @type {string[]} */
     export let profiles = [];
 
+    /** @type {string[]} */
+    export let labels = [];
+
     onMount(() => {});
 
     function addProfile() {
@@ -32,6 +35,21 @@
         agent.profiles = profiles;
     }
 
+    function addLabel() {
+        if (!!!agent) return;
+
+        labels = [...labels, ''];
+        agent.labels = labels;
+    }
+
+    /**
+	 * @param {number} index
+	 */
+    function removeLabel(index) {
+        labels = labels.filter((x, idx) => idx !== index);
+        agent.labels = labels;
+    }
+
     function chatWithAgent() {
         if (!!!agent?.id) return;
         
@@ -127,7 +145,7 @@
                                     </div>
                                 </div>
                                 {/each}
-                                {#if profiles?.length < profileLimit}
+                                {#if profiles?.length < limit}
                                 <div class="list-add">
                                     <i
                                         class="bx bx bx-list-plus"
@@ -141,6 +159,44 @@
                             </div>
                         </td>
                     </tr>
+                    <tr>
+                        <th class="agent-prop-key">Labels</th>
+                        <td>
+                            <div class="agent-prop-list-container vertical-flexible">
+                                {#each labels as label, index}
+                                <div class="edit-wrapper">
+                                    <input
+                                        class="form-control edit-text-box"
+                                        type="text"
+                                        placeholder="Typing here..."
+                                        maxlength={30}
+                                        bind:value={label}
+                                    />
+                                    <div class="delete-icon">
+                                        <i
+                                            class="bx bxs-no-entry"
+                                            role="link"
+                                            tabindex="0"
+                                            on:keydown={() => {}}
+                                            on:click={() => removeLabel(index)}
+                                        />
+                                    </div>
+                                </div>
+                                {/each}
+                                {#if labels?.length < limit}
+                                <div class="list-add">
+                                    <i
+                                        class="bx bx bx-list-plus"
+                                        role="link"
+                                        tabindex="0"
+                                        on:keydown={() => {}}
+                                        on:click={() => addLabel()}
+                                    />
+                                </div>
+                                {/if}
+                            </div>
+                        </td>
+                    </tr>
                     <tr>
                         <th class="agent-prop-key">Status</th>
                         <td>							
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index 0c4db673..5960660e 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -31,24 +31,32 @@
                 {agent.name}
               </Link>
             </h5>
-            <p>Provided by {agent.plugin.name}</p>
+            {#if agent.labels?.length > 0}
+              <div class="agent-label-container">
+                {#each agent.labels as label}
+                  <Badge color={"info"}>{label}</Badge>
+                {/each}
+              </div>
+            {:else}
+              <p>Provided by {agent.plugin.name}</p>
+            {/if}
             <p class="text-muted mb-4" style="height: 35px;">{agent.description}</p>
             <div class="avatar-group" style="height:35px;">
               {#if agent.is_router}
               <div class="avatar-group-item me-3">
-                  <img src="icons/router.png" class="rounded-circle avatar-xs" alt="routing"/>
+                <img src="icons/router.png" class="rounded-circle avatar-xs" alt="routing"/>
               </div>
               {/if}
               {#if agent.allow_routing}
               <div class="avatar-group-item me-3">
-                  <img src="icons/routing-2.png" class="rounded-circle avatar-xs" alt="routing"/>
+                <img src="icons/routing-2.png" class="rounded-circle avatar-xs" alt="routing"/>
               </div>
               {/if}
               {#each agent.functions as fn}
                 <div class="avatar-group-item">
-                <Link href="#" class="d-inline-block" id={"member" + fn.name}>
+                  <Link href="#" class="d-inline-block" id={"member" + fn.name}>
                     <img src="images/function.png" class="rounded-circle avatar-xs" alt={fn.name}/>
-                </Link>
+                  </Link>
                 </div>
               {/each}
             </div>
@@ -67,6 +75,13 @@
             <i class="bx bx-calendar me-1" />
             {format(agent.updated_datetime, 'short-date')}
           </li>
+          {#if agent.is_router}
+          <li class="list-inline-item me-1">
+            <Link href={`page/agent/router?agent_id=${agent.id}`} class="btn btn-primary btn-sm" target="_blank">
+              <i class="mdi mdi-magnify" /> {$_('View')}
+            </Link>
+          </li>
+          {/if}
           <li class="list-inline-item me-1">
             <Link href="page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank" disabled>
               <i class="bx bx-wrench" /> {$_('Build')}
diff --git a/src/routes/page/agent/evaluator/+page.svelte b/src/routes/page/agent/evaluator/+page.svelte
index 49e07d3a..85f60542 100644
--- a/src/routes/page/agent/evaluator/+page.svelte
+++ b/src/routes/page/agent/evaluator/+page.svelte
@@ -16,7 +16,7 @@
 	/** @type {import('$agentTypes').AgentFilter} */
 	const initFilter = {
 		pager: { page: firstPage, size: pageSize, count: 0 },
-    	type: "evaluating"
+    	types: ["evaluating"]
 	};
 
   	/** @type {import('$agentTypes').AgentFilter} */
diff --git a/src/routes/page/agent/router/+page.svelte b/src/routes/page/agent/router/+page.svelte
index 603a981f..081c6d23 100644
--- a/src/routes/page/agent/router/+page.svelte
+++ b/src/routes/page/agent/router/+page.svelte
@@ -1,29 +1,39 @@
 <script>
+  import { onMount } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { page } from '$app/stores';
   import { Col, Row } from '@sveltestrap/sveltestrap';
   import Breadcrumb from '$lib/common/Breadcrumb.svelte';
   import HeadTitle from '$lib/common/HeadTitle.svelte';
   import { getAgents } from '$lib/services/agent-service.js';
   import RoutingFlow from './routing-flow.svelte'
-  import { onMount } from 'svelte';
-  import { _ } from 'svelte-i18n'
+
+  const params = $page.url.searchParams;
 
   /** @type {import('$agentTypes').AgentModel[]} */
   let routers;
   let isRouterNodeSelected = false;
   let isAgentNodeSelected = false;
 
+  /** @type {string?} */
+  let targetAgentId = '';
+
   /** @type {import('$agentTypes').AgentFilter} */
 	const filter = {
 		pager: { page: 1, size: 10, count: 0 },
     disabled: false,
-		type: "routing"
+		types: ["routing"]
 	};
 
   onMount(async () => {
+    targetAgentId = params.get('agent_id');
     await getRouter();
   });
 
   async function getRouter() {
+    // if (!!targetAgentId) {
+    //   filter.agentIds = [targetAgentId];
+    // }
     const response = await getAgents(filter);
     if (response.items?.length > 0) {
       routers = response.items;
@@ -45,7 +55,6 @@
   function handleAgentNodeSelected(agent) {
     isRouterNodeSelected = false;
     isAgentNodeSelected = true;
-    console.log(agent);
   }
 </script>
 
@@ -56,7 +65,8 @@
 <Row>
   <Col>
     <RoutingFlow
-      routers={routers} 
+      routers={routers}
+      targetAgentId={targetAgentId}
       on:userNodeSelected={(e) => handleUserNodeSelected()}
       on:routerNodeSelected={(e) => handleRouterNodeSelected(e.detail.agent)}
       on:agentNodeSelected={(e) => handleAgentNodeSelected(e.detail.agent)}/>
diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte
index 289c4a5b..1e259078 100644
--- a/src/routes/page/agent/router/routing-flow.svelte
+++ b/src/routes/page/agent/router/routing-flow.svelte
@@ -1,14 +1,16 @@
 <script>
+    import { onMount, createEventDispatcher } from 'svelte';
     import Drawflow from 'drawflow';
     import 'drawflow/dist/drawflow.min.css';
     import '$lib/drawflow/drawflow.css';
     import { getAgents } from '$lib/services/agent-service.js';
-    import { onMount, createEventDispatcher } from 'svelte';
+	import { AgentType } from '$lib/helpers/enums';
 
     let includeRoutingAgent = true;
     let includePlannerAgent = false;
     let includeTaskAgent = false;
     let includeStaticAgent = false;
+    let disabled = false;
 
     /** @type {any[]} */
     let agents = [];
@@ -20,15 +22,22 @@
 	const filter = {
 		pager: { page: 1, size: 20, count: 0 },
         disabled: false,
-        type: includeTaskAgent ? "task" : "none"
+        types: includeTaskAgent ? [AgentType.Task] : ["none"]
 	};
 
     /** @type {import('$agentTypes').AgentModel[]} */
     export let routers;
 
+    /** @type {string?} */
+    export let targetAgentId = '';
+
     /** @type {Drawflow} */
     let editor;
     const dispatch = createEventDispatcher();
+
+    $: {
+        disabled = !targetAgentId;
+    }
     
     onMount(async () => {
         const response = await getAgents(filter);
@@ -54,7 +63,7 @@
         }
     });    
 
-    function renderRoutingFlow(){
+    function renderRoutingFlow() {
         agentNodes = [];
         editor.clear();
         let posX = 0;
@@ -189,7 +198,7 @@
 
             // draw fallback routing
             // fallback
-            const fallback = agent.routing_rules.find(p => p.type == "fallback");
+            const fallback = agent.routing_rules.find((/** @type {any} */ p) => p.type == "fallback");
             if (fallback) {
                 editor.addNodeOutput(nid);
                 let router = agentNodes.find(ag => ag.id == fallback.redirectTo);
@@ -214,7 +223,7 @@
 
     async function handlePlannerAgentSelected() {
         includePlannerAgent = !includePlannerAgent;
-        filter.type = getAgentTypes();
+        filter.types = getAgentTypes();
         const response = await getAgents(filter);
         agents = response?.items || [];
         renderRoutingFlow();
@@ -222,7 +231,7 @@
 
     async function handleTaskAgentSelected() {
         includeTaskAgent = !includeTaskAgent;
-        filter.type = getAgentTypes();
+        filter.types = getAgentTypes();
         const response = await getAgents(filter);
         agents = response?.items || [];
         renderRoutingFlow();
@@ -230,7 +239,7 @@
 
     async function handleStaticAgentSelected() {
         includeStaticAgent = !includeStaticAgent;
-        filter.type = getAgentTypes();
+        filter.types = getAgentTypes();
         const response = await getAgents(filter);
         agents = response?.items || [];
         renderRoutingFlow();
@@ -239,15 +248,15 @@
     function getAgentTypes() {
         let types = ['none'];
         if (includePlannerAgent) {
-            types.push('planning');
+            types.push(AgentType.Planning);
         }
         if (includeTaskAgent) {
-            types.push('task');
+            types.push(AgentType.Task);
         }
         if (includeStaticAgent) {
-            types.push('static')
+            types.push(AgentType.Static)
         }
-        return types.join(',');
+        return types;
     }
 
 </script>
@@ -256,14 +265,50 @@
     <input type="checkbox" class="btn-check active" id="btncheck1" autocomplete="off"/>
     <label class={`btn btn-${includeRoutingAgent ? "" : "outline-"}primary`} for="btncheck1">Routing Agent</label>
 
-    <input type="checkbox" class="btn-check active" id="btncheck2" autocomplete="off" on:click={() => handlePlannerAgentSelected()}/>
-    <label class={`btn btn-${includePlannerAgent ? "" : "outline-"}primary`} for="btncheck2">Planner Agent</label>
-
-    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off" on:click={() => handleTaskAgentSelected()} />
-    <label class={`btn btn-${includeTaskAgent ? "" : "outline-"}primary`} for="btncheck3">Task Agent</label>
-
-    <input type="checkbox" class="btn-check" id="btncheck4" autocomplete="off" on:click={() => handleStaticAgentSelected()} />
-    <label class={`btn btn-${includeStaticAgent ? "" : "outline-"}primary`} for="btncheck4">Static Agent</label>
+    <input
+        type="checkbox"
+        class="btn-check active"
+        id="btncheck2"
+        autocomplete="off"
+        disabled={disabled}
+        on:click={() => handlePlannerAgentSelected()}
+    />
+    <label
+        class={`btn btn-${includePlannerAgent ? "" : "outline-"}primary`}
+        for="btncheck2"
+    >
+        Planner Agent
+    </label>
+
+    <input
+        type="checkbox"
+        class="btn-check"
+        id="btncheck3"
+        autocomplete="off"
+        disabled={disabled}
+        on:click={() => handleTaskAgentSelected()}
+    />
+    <label 
+        class={`btn btn-${includeTaskAgent ? "" : "outline-"}primary`}
+        for="btncheck3"
+    >
+        Task Agent
+    </label>
+
+    <input
+        type="checkbox"
+        class="btn-check"
+        id="btncheck4"
+        autocomplete="off"
+        disabled={disabled}
+        on:click={() => handleStaticAgentSelected()}
+    />
+    <label
+        class={`btn btn-${includeStaticAgent ? "" : "outline-"}primary`}
+        for="btncheck4"
+    >
+        Static Agent
+    </label>
 </div>
 
 <div id="drawflow" style="height: 72vh; width: 100%"></div>
\ No newline at end of file
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 0342afce..c390f1a1 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -331,8 +331,7 @@
 		} else if (type === 'tags') {
 			searchOption = {
 				...searchOption,
-				// @ts-ignore
-				tags: e.detail.selecteds?.map(x => x.value) || []
+				tags: e.target.value?.length > 0 ? [e.target.value] : []
 			};
 		}
 	}
@@ -358,12 +357,12 @@
 				<div class="d-flex align-items-center">
 					<h5 class="mb-0 card-title flex-grow-1">{$_('Conversation List')}</h5>
 					<div class="flex-shrink-0">
-						<Button
+						<!-- <Button
 							class="btn btn-light"
 							on:click={(e) => searchConversations(e)}
 						>
 							<i class="mdi mdi-magnify" />
-						</Button>
+						</Button> -->
 						<Dropdown class="dropdown d-inline-block">
 							<DropdownToggle type="menu" class="btn" id="dropdownMenuButton1">
 								<i class="mdi mdi-dots-vertical" />
@@ -411,11 +410,11 @@
 						</select>
 					</Col>
 					<Col lg="2">
-						<MultiSelect
-							tag={'conv-tags'}
-							placeholder={'Select Tags'}
-							options={tagOptions}
-							on:select={e => changeOption(e, "tags")}
+						<Input
+							type={'text'}
+							placeholder={'Tag'}
+							maxlength={100}
+							on:input={e => changeOption(e, "tags")}
 						/>
 					</Col>
 					<!-- <Col lg="2">
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index 400c288e..0e3ab9ce 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n'
 	import {
 		Button,
@@ -16,14 +17,13 @@
 	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';
 	import { replaceNewLine } from '$lib/helpers/http';
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
+	import { AgentTaskStatus } from '$lib/helpers/enums';
 
 	let isError = false;
 	const duration = 3000;
@@ -56,6 +56,16 @@
 	/** @type {import('$commonTypes').Pagination} */
 	let pager = filter.pager;
 
+	/** @type {import('$agentTypes').AgentTaskSearchOption} */
+	let searchOption = {
+		agentId: null,
+		status: null
+	};
+
+	const statusOptions = Object.entries(AgentTaskStatus).map(([k, v]) => (
+		{ key: k, value: v }
+	));
+
     onMount(async () => {
 		await getPagedAgentTasks();
 
@@ -158,8 +168,38 @@
 			...filter,
 			pager: { page: firstPage, size: pageSize, count: 0 }
 		};
+		refreshFilter();
+		initFilterPager();
 		getPagedAgentTasks();
 	}
+
+
+	function refreshFilter() {
+		filter = {
+			...filter,
+			status: searchOption.status
+		};
+	}
+
+	function initFilterPager() {
+		filter = {
+			...filter,
+			pager: { page: firstPage, size: pageSize, count: 0 },
+		};
+	}
+
+	/**
+	 * @param {any} e
+	 * @param {string} type
+	 */
+	 function changeOption(e, type) {
+		if (type === 'status') {
+			searchOption = {
+				...searchOption,
+				status: e.target.value || null
+			};
+		}
+	}
 </script>
 
 <HeadTitle title="{$_('Task List')}" />
@@ -172,7 +212,7 @@
 				<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>
+						<!-- <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
@@ -186,7 +226,7 @@
 			</CardBody>
 			<CardBody class="border-bottom">
 				<Row class="g-3">
-					<Col xxl="4" lg="6">
+					<Col xxl="5" lg="5">
 						<Input
 							type="search"
 							class="form-control"
@@ -194,15 +234,21 @@
 							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>
+					<Col xxl="5" lg="5">
+						<select class="form-select" id="idStatus" value={searchOption.status} on:change={e => changeOption(e, 'status')}>
+							<option value={null}>{$_('Select Status')}</option>
+							{#each statusOptions as op}
+								<option value={`${op.value}`} selected={op.value === searchOption.status}>{$_(`${op.key}`)}</option>
+							{/each}
 						</select>
 					</Col>
-					<Col xxl="2" lg="4">
-						<Button type="button" color="secondary" class="btn-soft-secondary w-100">
+					<Col xxl="2" lg="2">
+						<Button
+							class="btn-soft-secondary w-100"
+							type="button"
+							color="secondary"
+							on:click={e => searchTasks(e)}
+						>
 							<i class="mdi mdi-filter-outline align-middle" /> {$_('Filter')}
 						</Button>
 					</Col>
@@ -218,6 +264,7 @@
 								<th scope="col">{$_('Agent')}</th>
 								<th scope="col">{$_('Details')}</th>
 								<th scope="col">{$_('Updated Date')}</th>
+								<th scope="col">{$_('Enabled')}</th>
 								<th scope="col">{$_('Status')}</th>
 								<th scope="col">{$_('Action')}</th>
 							</tr>
@@ -232,7 +279,8 @@
 								<td>{task.agent_name}</td>
 								<td><div style="max-height: 100px;" class="scrollbar">{@html replaceNewLine(task.content)}</div></td>
 								<td>{utcToLocal(task.updated_datetime)}</td>
-								<td><span class="badge bg-success">{task.enabled ? $_("Enabled") : $_('"Disabled"')}</span></td>
+								<td><span class="badge bg-success">{task.enabled ? $_("Enabled") : $_("Disabled")}</span></td>
+								<td><span class="badge bg-info">{task.status}</span></td>
 								<td>
 									<ul class="list-unstyled hstack gap-1 mb-0">
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="View">
@@ -252,7 +300,7 @@
 						</tbody>
 					</Table>
 				</div>
-				<TablePagination pagination={pager} pageTo={pageTo} />
+				<TablePagination pagination={pager} pageTo={pg => pageTo(pg)} />
 			</CardBody>
 		</Card>
 	</Col>