Merge pull request #296 from iceljc/features/refine-chat-window

refine agent filter, agent task filter, agent label

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();

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'

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 {};

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;
 }

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);
 }
 

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} 

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} />

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} />

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>