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

Features/refine chat window

Author: iceljc

src/lib/common/MultiSelect.svelte

@@ -23,6 +23,9 @@
     /** @type {string} */
     export let selectedText = '';
 
+    /** @type {string[]} */
+    export let selectedKeys;
+
     /** @type {string} */
     export let containerClasses = "";
 
@@ -78,6 +81,43 @@
         });
     });
 
+    $: {
+        innerOptions = innerOptions.map(x => {
+            x.checked = !!selectedKeys?.includes(x.key);
+            return {...x};
+        });
+        refOptions = refOptions.map(x => {
+            x.checked = !!selectedKeys?.includes(x.key);
+            return {...x};
+        });
+        changeDisplayText();
+    }
+
+    $: {
+        if (options.length > refOptions.length) {
+            const curKeys = refOptions.map(x => x.key);
+            const newOptions = options.filter(x => !curKeys.includes(x.key)).map(x => {
+                return {
+                    key: x.key,
+                    value: x.value,
+                    checked: false
+                };
+            });
+
+            innerOptions = [
+                ...innerOptions,
+                ...newOptions
+            ];
+
+            refOptions = [
+                ...refOptions,
+                ...newOptions
+            ];
+
+            changeDisplayText();
+        }
+    }
+
 
     async function toggleOptionList() {
         showOptionList = !showOptionList;
@@ -226,31 +266,6 @@
             }
         }
     }
-
-    $: {
-        if (options.length > refOptions.length) {
-            const curKeys = refOptions.map(x => x.key);
-            const newOptions = options.filter(x => !curKeys.includes(x.key)).map(x => {
-                return {
-                    key: x.key,
-                    value: x.value,
-                    checked: false
-                };
-            });
-
-            innerOptions = [
-                ...innerOptions,
-                ...newOptions
-            ];
-
-            refOptions = [
-                ...refOptions,
-                ...newOptions
-            ];
-
-            changeDisplayText();
-        }
-    }
 </script>
 
 

src/lib/helpers/http.js

@@ -89,6 +89,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/role/options', 'g'),
         new RegExp('http(s*)://(.*?)/role/(.*?)/details', 'g'),
         new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

src/lib/helpers/types/agentTypes.js

@@ -30,6 +30,7 @@
  * @property {string[]?} [types]
  * @property {string[]?} [agentNames]
  * @property {string} [similarName]
+ * @property {string[]?} [labels]
  * @property {boolean} [isPublic]
  * @property {boolean} [disabled]
  * @property {string[]?} [agentIds]

src/lib/services/agent-service.js

@@ -19,15 +19,9 @@ export async function getSettings() {
  */
 export async function getAgents(filter, checkAuth = false) {
     let url = endpoints.agentListUrl;
-    const response = await axios.get(url, {
-        params: {
-            ...filter,
-            checkAuth : checkAuth
-        },
-        paramsSerializer: {
-            dots: true,
-            indexes: null,
-        }
+    const response = await axios.post(url, {
+        filter: filter,
+        checkAuth : checkAuth
     });
     return response.data;
 }
@@ -100,4 +94,14 @@ export async function getAgentRuleOptions() {
     const url = endpoints.agentRuleOptionsUrl;
     const response = await axios.get(url);
     return response.data;
+}
+
+/**
+ * Get agent labels
+ * @returns {Promise<string[]>}
+ */
+export async function getAgentLabels() {
+    const url = endpoints.agentLabelsUrl;
+    const response = await axios.get(url);
+    return response.data;
 }

src/lib/services/api-endpoints.js

@@ -35,6 +35,7 @@ export const endpoints = {
     agentCreateUrl: `${host}/agent`,
     agentUtilityOptionsUrl: `${host}/agent/utility/options`,
     agentRuleOptionsUrl: `${host}/rule/triggers`,
+    agentLabelsUrl: `${host}/agent/labels`,
 
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
@@ -97,7 +98,7 @@ export const endpoints = {
 
     // dashboard
     dashboardSettingUrl: `${host}/dashboard/components`,
-    dashConversationInstructionUrl: `${host}/dashboard/component/conversation?userId={userId}`,
+    dashConversationInstructionUrl: `${host}/dashboard/component/conversation`,
 
     // Google geocode api
     addressUrl: `${host}/address/options`

src/lib/services/conversation-service.js

@@ -135,13 +135,10 @@ export async function unpinConversationFromDashboard(agentId, conversationId) {
 
 /**
  * update a dashboard conversation instuction
- * @param {string} userId - The conversation id
  * @param {import('$userTypes').DashboardConversation} dashConv - The instruction
  */
-export async function updateDashboardConversation(userId, dashConv) {
-    let url = replaceUrl(endpoints.dashConversationInstructionUrl, {
-        userId: userId
-    });
+export async function updateDashboardConversation(dashConv) {
+    let url = endpoints.dashConversationInstructionUrl;
     const response = await axios.post(url, dashConv);
     return response.data;
 }

src/lib/services/dashboard-service.js

@@ -3,17 +3,10 @@ import axios from 'axios';
 
 /**
  * Get dashboard settings
- * @param {string} userId - The user id
  * @returns {Promise<import('$userTypes').DashboardModel>}
  */
-export async function getDashboardSettings(userId) {
-    let userIdParam = userId;
-    let url = endpoints.dashboardSettingUrl;
-    console.log(url);
-    const response = await axios.get(url, {
-        params: {
-            "userId" : userId
-        }
-    });
+export async function getDashboardSettings() {
+    const url = endpoints.dashboardSettingUrl;
+    const response = await axios.get(url);
     return response.data;
 }

src/routes/page/agent/+page.svelte

@@ -5,7 +5,7 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import CardAgent from './card-agent.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-  	import { createAgent, getAgents } from '$lib/services/agent-service.js';
+  	import { createAgent, getAgentLabels, getAgents } from '$lib/services/agent-service.js';
   	import { myInfo } from '$lib/services/auth-service';
 	import PlainPagination from '$lib/common/PlainPagination.svelte';
 	import { _ } from 'svelte-i18n'
@@ -43,16 +43,22 @@
 	/** @type {any} */
 	let unsubscriber;
 
-	let agentTypeOptions = Object.entries(AgentType).map(([k, v]) => (
-		{ key: k, value: v }
+	const agentTypeOptions = Object.entries(AgentType).map(([k, v]) => (
+		{ key: v, value: v }
 	));
 
+	/** @type {{ key: string, value: string }[]} */
+	let agentLabelOptions = [];
+
 	/** @type {string[]} */
 	let selectedAgentTypes = [];
+	/** @type {string[]} */
+	let selectedAgentLabels = [];
 
 	onMount(async () => {
 		user = await myInfo();
 		getPagedAgents();
+		getAgentLabelOptions();
 
 		unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
 			if (event.name !== GlobalEvent.Search) return;
@@ -82,6 +88,14 @@
 		});
 	}
 
+	function getAgentLabelOptions() {
+		return getAgentLabels().then(res => {
+			agentLabelOptions = res?.map(x => ({ key: x, value: x })) || [];
+		}).catch(() => {
+			agentLabelOptions = [];
+		});
+	}
+
 	function createNewAgent() {
 		// @ts-ignore
         Swal.fire({
@@ -147,23 +161,44 @@
 
 		getPagedAgents();
 	}
-
 	
-	/**
-	 * @param {any} e
-	 */
+	/** @param {any} e */
 	function selectAgentTypeOption(e) {
 		// @ts-ignore
-		selectedAgentTypes = e.detail.selecteds?.map(x => x.value) || [];
+		selectedAgentTypes = e.detail.selecteds?.map(x => x.key) || [];
+	}
+
+	/** @param {any} e */
+	function selectAgentLabelOption(e) {
+		// @ts-ignore
+		selectedAgentLabels = e.detail.selecteds?.map(x => x.key) || [];
+	}
+
+	function search() {
+		refreshFilter();
+		initFilterPager();
+		getPagedAgents();
+	}
+
+	function reset() {
+		selectedAgentTypes = [];
+		selectedAgentLabels = [];
 	}
 
-	function searchAgents() {
+	function refreshFilter() {
 		filter = {
 			...filter,
 			types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
+			labels: selectedAgentLabels?.length > 0 ? selectedAgentLabels : null,
 			pager: initFilter.pager
 		};
-		getPagedAgents();
+	}
+
+	function initFilterPager() {
+		filter = {
+			...filter,
+			pager: { page: firstPage, size: pageSize, count: 0 },
+		};
 	}
 </script>
 
@@ -182,24 +217,39 @@
 	<div class="agent-filter">
 		<MultiSelect
 			tag={'agent-label-select'}
-			placeholder={'Select agent labels'}
+			placeholder={'Select labels'}
 			selectedText={'labels'}
-			options={[]}
-			on:select={e => {}}
+			searchMode
+			selectedKeys={selectedAgentLabels}
+			options={agentLabelOptions}
+			on:select={e => selectAgentLabelOption(e)}
 		/>
 		<MultiSelect
 			tag={'agent-type-select'}
-			placeholder={'Select agent types'}
+			placeholder={'Select types'}
 			selectedText={'types'}
+			selectedKeys={selectedAgentTypes}
 			options={agentTypeOptions}
 			on:select={e => selectAgentTypeOption(e)}
 		/>
 		<Button
-			class="btn btn-light"
-			on:click={(e) => searchAgents()}
+			class="btn btn-info"
+			data-bs-toggle="tooltip"
+			data-bs-placement="bottom"
+			title="Search"
+			on:click={(e) => search()}
 		>
 			<i class="mdi mdi-magnify" />
 		</Button>
+		<Button
+			class="btn btn-light"
+			data-bs-toggle="tooltip"
+			data-bs-placement="bottom"
+			title="Reset filters"
+			on:click={(e) => reset()}
+		>
+			<i class="mdi mdi-restore" />
+		</Button>
 	</div>
 </div>
 

src/routes/page/agent/router/+page.svelte

@@ -6,6 +6,7 @@
   import Breadcrumb from '$lib/common/Breadcrumb.svelte';
   import HeadTitle from '$lib/common/HeadTitle.svelte';
   import { getAgents } from '$lib/services/agent-service.js';
+	import { AgentType } from '$lib/helpers/enums';
   import RoutingFlow from './routing-flow.svelte'
 
   const params = $page.url.searchParams;
@@ -22,7 +23,7 @@
 	const filter = {
 		pager: { page: 1, size: 10, count: 0 },
     disabled: false,
-		types: ["routing"]
+		types: [AgentType.Routing]
 	};
 
   onMount(async () => {
@@ -31,9 +32,9 @@
   });
 
   async function getRouter() {
-    // if (!!targetAgentId) {
-    //   filter.agentIds = [targetAgentId];
-    // }
+    if (!!targetAgentId) {
+      filter.agentIds = [targetAgentId];
+    }
     const response = await getAgents(filter);
     if (response.items?.length > 0) {
       routers = response.items;
@@ -66,7 +67,7 @@
   <Col>
     <RoutingFlow
       routers={routers}
-      targetAgentId={targetAgentId}
+      viewOnlyMode={!!targetAgentId}
       on:userNodeSelected={(e) => handleUserNodeSelected()}
       on:routerNodeSelected={(e) => handleRouterNodeSelected(e.detail.agent)}
       on:agentNodeSelected={(e) => handleAgentNodeSelected(e.detail.agent)}/>