add user update api

Author: Jicheng Lu

src/lib/helpers/http.js

@@ -67,6 +67,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/update', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/update-message', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/update-tags', 'g'),
+        new RegExp('http(s*)://(.*?)/users', 'g'),
     ];
 
     const deleteRegexes = [
@@ -83,7 +84,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/llm-provider/(.*?)/models', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/collections', 'g'),
-        new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/exist', 'g')
+        new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/exist', 'g'),
+        new RegExp('http(s*)://(.*?)/users', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

src/lib/helpers/types/userTypes.js

@@ -27,6 +27,15 @@
  * @property {string[]} actions - The actions
  */
 
+/**
+ * @typedef {Object} UserAgentInnerAction
+ * @property {string?} [id] - The id
+ * @property {string} agent_id - The agent id
+ * @property {string} [agent_name] - The agent name
+ * @property {import('$agentTypes').AgentModel} [agent] - The agent details
+ * @property {{ key: string, value: string, checked: boolean }[]} actions - The actions
+ */
+
 /**
  * @typedef {Object} UserFilter
  * @property {number} page - The page number

src/lib/scss/custom/common/_common.scss

@@ -157,6 +157,11 @@ button:focus {
   justify-content:center;
 }
 
+.div-center {
+  display: flex;
+  justify-content:center;
+}
+
 .ellipsis {
   white-space: nowrap;
   overflow: hidden;
@@ -171,6 +176,10 @@ button:focus {
 .danger-background {
   background-color: $danger !important;
 }
+
+.thin-scrollbar {
+  scrollbar-width: thin;
+}
 
 .markdown-container {
   overflow-x: auto;

src/lib/scss/custom/pages/_users.scss

@@ -5,7 +5,7 @@
     }
 
     .user-permission-col {
-        width: 10%;
+        width: 20%;
         max-width: 300px;
     }
 
@@ -88,6 +88,7 @@
             display: flex;
             justify-content: flex-end;
             font-size: 16px;
+            margin-top: 10px;
         }
     }
 }

src/lib/services/api-endpoints.js

@@ -6,6 +6,7 @@ export const endpoints = {
     tokenUrl: `${host}/token`,
     myInfoUrl: `${host}/user/me`,
     usersUrl: `${host}/users`,
+    userUpdateUrl: `${host}/user`,
     usrCreationUrl: `${host}/user`,
     userAvatarUrl: `${host}/user/avatar`,
 

src/lib/services/user-service.js

@@ -9,4 +9,15 @@ import axios from 'axios';
 export async function getUsers(filter) {
     const response = await axios.post(endpoints.usersUrl, { ...filter });
     return response.data;
+}
+
+
+/**
+ * Get user list
+ * @param {import('$userTypes').UserModel} model
+ * @returns {Promise<boolean>}
+ */
+export async function updateUser(model) {
+    const response = await axios.put(endpoints.userUpdateUrl, { ...model });
+    return response.data;
 }

src/routes/page/agent/[agentId]/agent-overview.svelte

@@ -85,7 +85,7 @@
                     </Button>
                 {/if}
             </div>
-            <h5 class="mt-1 mb-1"><InPlaceEdit bind:value={agent.name} /></h5>
+            <h5 class="mt-1 mb-1 div-center"><InPlaceEdit bind:value={agent.name} /></h5>
             <p class="text-muted mb-0">Updated at {format(agent.updated_datetime, 'time')}</p>
         </div>
     </CardHeader>

src/routes/page/conversation/+page.svelte

@@ -440,7 +440,7 @@
 				{/if}
 			</CardBody>
 			<CardBody>
-				<div class="table-responsive">
+				<div class="table-responsive thin-scrollbar">
 					<Table class="align-middle nowrap" bordered>
 						<thead>
 							<tr>

src/routes/page/users/+page.svelte

@@ -6,8 +6,6 @@
 		CardBody,
 		Col,
 		Dropdown,
-		DropdownItem,
-		DropdownMenu,
 		DropdownToggle,
 		Input,
 		Row,
@@ -19,21 +17,21 @@
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import TablePagination from '$lib/common/TablePagination.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import { getUsers } from '$lib/services/user-service';
+	import { getUsers, updateUser } from '$lib/services/user-service';
 	import UserItem from './user-item.svelte';
 	import { getAgents } from '$lib/services/agent-service';
 	
     const duration = 3000;
 	const firstPage = 1;
-	const pageSize = 5;
+	const pageSize = 15;
 
     const initPager = { page: firstPage, size: pageSize };
 
     let isLoading = false;
 	let isComplete = false;
 	let isError = false;
-    let successText = '';
-    let errorText = '';
+    let successText = 'User has been updated!';
+    let errorText = 'Failed to update user!';
 
     /** @type {import('$commonTypes').Pagination} */    
     let pager = { ...initPager, count: 0 };
@@ -60,8 +58,18 @@
     });
 
     async function getPagedUsers() {
-		users = await getUsers(filter);
-        refresh();
+        isLoading = true;
+        return new Promise((resolve, reject) => {
+            getUsers(filter).then(res => {
+                users = res;
+                refresh();
+                resolve(res);
+            }).finally(() => {
+                setTimeout(() => {
+                    isLoading = false;
+                }, 200);
+            });
+        });
 	}
 
     async function getPagedAgents() {
@@ -123,9 +131,43 @@
 			page: pageNum,
             size: pageSize
 		};
-
 		getPagedUsers();
 	}
+
+    /** @param {any} e */
+    function saveUser(e) {
+        const data = e.detail.updatedData;
+        isLoading = true;
+        updateUser(data).then(() => {
+			isLoading = false;
+			isComplete = true;
+            postUpdateUser(data);
+			setTimeout(() => {
+				isComplete = false;
+			}, duration);
+		}).catch(() => {
+			isLoading = false;
+			isComplete = false;
+			isError = true;
+			setTimeout(() => {
+				isError = false;
+			}, duration);
+		});
+    }
+
+    /** @param {import('$userTypes').UserModel} data */
+    function postUpdateUser(data) {
+        const newItems = users?.items?.map(x => {
+            if (x.id === data.id) {
+                return { ...data };
+            }
+            return x;
+        }) || [];
+        users = {
+            ...users,
+            items: newItems
+        };
+    }
 </script>
 
 
@@ -183,23 +225,22 @@
 				</Row>
 			</CardBody>
 			<CardBody>
-				<div class="table-responsive">
+				<div class="table-responsive thin-scrollbar">
 					<Table class="align-middle nowrap users-table" bordered>
 						<thead>
 							<tr>
 								<th scope="col">{$_('User Name')}</th>
 								<th scope="col">{$_('Full Name')}</th>
 								<th scope="col">{$_('External Id')}</th>
-								<th scope="col">{$_('Role')}</th>
+								<th scope="col" class="user-plain-col">{$_('Role')}</th>
 								<th scope="col">{$_('Source')}</th>
 								<th scope="col" class="user-permission-col">{$_('Permissions')}</th>
-								<th scope="col" class="user-agent-col">{$_('Agents')}</th>
 								<th scope="col">{$_('')}</th>
 							</tr>
 						</thead>
 						<tbody>
 							{#each users.items as item, idx (idx)}
-                                <UserItem item={item} agents={agents} />
+                                <UserItem item={item} agents={agents} on:save={e => saveUser(e)} />
                             {/each}
 						</tbody>
 					</Table>