Merge pull request #132 from iceljc/features/add-user-role-limit

add user role limit

Author: Oceania2018

src/lib/common/Breadcrumb.svelte

@@ -13,7 +13,7 @@
 			<div class="page-title-right">
 				<ol class="breadcrumb m-0">
 					<BreadcrumbItem>
-						<Link href="#">{title}</Link>
+						<Link disabled>{title}</Link>
 					</BreadcrumbItem>
 					<BreadcrumbItem active>
 						{pagetitle}

src/lib/common/NotificationDropdown.svelte

@@ -37,12 +37,12 @@
 					<h6 class="m-0">{$_('Notifications')}</h6>
 				</div>
 				<div class="col-auto">
-					<Link href="#!" class="small">{$_('View All')}</Link>
+					<Link class="small" disabled>{$_('View All')}</Link>
 				</div>
 			</div>
 		</div>
 			<div style="max-height: 230px;" id="notification">
-			<Link href="javascript: void(0);" class="text-reset notification-item">
+				<Link href="javascript: void(0);" class="text-reset notification-item" disabled>
 					<div class="d-flex">
 						<div class="avatar-xs me-3">
 							<span class="avatar-title bg-primary rounded-circle font-size-16">

src/lib/common/ProfileDropdown.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@sveltestrap/sveltestrap';
+	import { resetLocalStorage } from '$lib/helpers/store';
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
 	import { _ } from 'svelte-i18n';
@@ -10,7 +11,7 @@
 	 export let user;
 	function logout() {
 		if (browser){	
-			localStorage.removeItem('user');
+			resetLocalStorage(true);
 		}
 		goto('login');
 	};
@@ -29,14 +30,14 @@
 	</DropdownToggle>
 	<DropdownMenu end>
 		<!-- item-->
-		<DropdownItem href="page/user/me"
-			><i class="bx bx-user font-size-16 align-middle me-1" />
+		<DropdownItem href="page/user/me">
+			<i class="bx bx-user font-size-16 align-middle me-1" />
 			<span>{$_('Profile')}</span>
 		</DropdownItem>
-		<DropdownItem href="#"
-			><span class="badge bg-success float-end">11</span><i
-				class="bx bx-wrench font-size-16 align-middle me-1"
-			/> <span key="t-settings">{$_('Settings')}</span>
+		<DropdownItem href="#" disabled>
+			<span class="badge bg-success float-end">11</span>
+			<i class="bx bx-wrench font-size-16 align-middle me-1"/>
+			<span key="t-settings">{$_('Settings')}</span>
 		</DropdownItem>
 		<DropdownItem divider />
 		<DropdownItem href="#">

src/lib/helpers/http.js

@@ -55,7 +55,8 @@ axios.interceptors.response.use(
 /** @param {import('axios').InternalAxiosRequestConfig<any>} config */
 function skipLoader(config) {
     const postRegexes = [
-        new RegExp('http(s*)://(.*?)/conversation/(.*?)/(.*?)', 'g')
+        new RegExp('http(s*)://(.*?)/conversation/(.*?)/(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/agent', 'g')
     ];
 
     const getRegexes = [

src/lib/helpers/store.js

@@ -152,4 +152,17 @@ const createConversationUserAttachmentStore = () => {
     }
 };
 
-export const conversationUserAttachmentStore = createConversationUserAttachmentStore();
+export const conversationUserAttachmentStore = createConversationUserAttachmentStore();
+
+
+export function resetLocalStorage(resetUser = false) {
+    conversationUserStateStore.reset();
+    conversationSearchOptionStore.reset();
+    conversationUserMessageStore.reset();
+    conversationUserAttachmentStore.reset();
+    localStorage.removeItem('conversation');
+
+    if (resetUser) {
+        localStorage.removeItem('user');
+    }
+}

src/lib/helpers/types.js

@@ -129,6 +129,7 @@
  * @property {Object[]} responses
  * @property {RoutingRule[]} routing_rules
  * @property {AgentWelcomeInfo} welcome_info - Welcome information.
+ * @property {boolean} editable
  */
 
 /**

src/lib/services/agent-service.js

@@ -48,6 +48,15 @@ export async function saveAgent(agent) {
     await axios.put(url, agent);
 }
 
+/**
+ * Delete agent detail
+ * @param {string} agentId
+ */
+export async function deleteAgent(agentId) {
+    let url = endpoints.agentDetailUrl.replace("{id}", agentId);
+    await axios.delete(url);
+}
+
 /**
  * Refresh agent data
  */

src/routes/(authentication)/login/+page.svelte

@@ -31,12 +31,7 @@
 		PUBLIC_AUTH_ENABLE_FIND_PWD,
 	} from '$env/static/public';
 	import { onMount } from 'svelte';
-	import {
-		conversationSearchOptionStore,
-		conversationUserAttachmentStore,
-		conversationUserMessageStore,
-		conversationUserStateStore
-	} from '$lib/helpers/store';
+	import { resetLocalStorage } from '$lib/helpers/store';
 
 	let username = PUBLIC_ADMIN_USERNAME;
 	let password = PUBLIC_ADMIN_PASSWORD;
@@ -71,7 +66,7 @@
 			status = 'success';
 			const redirectUrl = $page.url.searchParams.get('redirect');
 			isSubmitting = false;
-			resetStorage();
+			resetLocalStorage();
 			if (redirectUrl) {
 				window.location.href = decodeURIComponent(redirectUrl);
 			} else {
@@ -105,13 +100,6 @@
 			icon.className = 'mdi mdi-eye-outline';
 		}
 	}
-
-	function resetStorage() {
-		conversationUserStateStore.reset();
-		conversationSearchOptionStore.reset();
-		conversationUserMessageStore.reset();
-		conversationUserAttachmentStore.reset();
-	}
 </script>
 
 <Headtitle title="Login" />

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -127,6 +127,7 @@
 	let loadTextEditor = false;
 	let loadFileEditor = false;
 	let autoScrollLog = false;
+	let disableAction = false;
 
 	$: {
 		const editor = lastBotMsg?.rich_content?.editor || '';
@@ -135,6 +136,10 @@
 		loadEditor = !isSendingMsg && !isThinking && (loadTextEditor || loadFileEditor);
 	}
 
+	$: {
+		disableAction = currentUser?.role !== UserRole.Admin && currentUser?.id !== conversationUser?.id;
+	}
+
 	setContext('chat-window-context', {
 		autoScrollToBottom: autoScrollToBottom
 	});
@@ -914,12 +919,26 @@
 														</DropdownToggle>
 														<DropdownMenu>
 															{#if !isLoadStateLog}
-															<DropdownItem on:click={() => toggleStateLog()}>View States</DropdownItem>
+															<DropdownItem
+																on:click={() => toggleStateLog()}
+															>
+																View States
+															</DropdownItem>
 															{/if}
 															{#if !isOpenUserAddStateModal}
-															<DropdownItem on:click={() => toggleUserAddStateModal()}>Add States</DropdownItem>
+															<DropdownItem
+																disabled={disableAction}
+																on:click={() => toggleUserAddStateModal()}
+															>
+																Add States
+															</DropdownItem>
 															{/if}
-															<DropdownItem on:click={() => clearUserAddStates()}>Clear States</DropdownItem>
+															<DropdownItem
+																disabled={disableAction}
+																on:click={() => clearUserAddStates()}
+															>
+																Clear States
+															</DropdownItem>
 														</DropdownMenu>
 													</Dropdown>
 												</li>
@@ -932,6 +951,7 @@
 									<li class="list-inline-item d-md-inline-block">
 										<button
 											class="btn btn-primary btn-rounded btn-sm chat-send waves-effect waves-light"
+											disabled={disableAction}
 											on:click={() => endChat()}
 										>
 											<span class="d-none d-sm-inline-block me-2" >End Conversation</span> <i class="mdi mdi-window-close"></i>
@@ -986,7 +1006,7 @@
 										</div>
 											{#if !isLite}
 												<Dropdown>
-													<DropdownToggle class="dropdown-toggle" tag="span" disabled={isSendingMsg || isThinking}>
+													<DropdownToggle class="dropdown-toggle" tag="span" disabled={isSendingMsg || isThinking || disableAction}>
 														<i class="bx bx-dots-vertical-rounded" />
 													</DropdownToggle>
 													<DropdownMenu class="dropdown-menu-end">
@@ -1055,7 +1075,7 @@
 								<button
 									type="submit"
 									class="btn btn-primary btn-rounded waves-effect waves-light"
-									disabled={isSendingMsg || isThinking}
+									disabled={isSendingMsg || isThinking || disableAction}
 									on:click={startListen}
 								>
 									<i class="mdi mdi-{microphoneIcon} md-36" />
@@ -1066,13 +1086,13 @@
 									<ChatTextArea
 										className={`chat-input ${loadFileEditor ? 'chat-uploader' : ''}`}
 										bind:text={text}
-										disabled={isSendingMsg || isThinking}
+										disabled={isSendingMsg || isThinking || disableAction}
 										editor={lastBotMsg?.rich_content?.editor || ''}
 										onKeyDown={e => onSendMessage(e)}
 									/>
 									{#if loadFileEditor}
 										<div class="chat-input-links">
-											<ChatImageUploader />
+											<ChatImageUploader disabled={disableAction} />
 										</div>
 									{/if}
 								</div>
@@ -1081,7 +1101,7 @@
 								<button
 									type="submit"
 									class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
-									disabled={!!!_.trim(text) || isSendingMsg || isThinking}
+									disabled={!!!_.trim(text) || isSendingMsg || isThinking || disableAction}
 									on:click={() => sentTextMessage()}
 								><span class="d-none d-md-inline-block me-2">Send</span>
 									<i class="mdi mdi-send" />

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

@@ -6,9 +6,13 @@
   	import { createAgent, getAgents } from '$lib/services/agent-service.js';
   	import { onMount } from 'svelte';
 	import PlainPagination from '$lib/common/PlainPagination.svelte';
+	import { UserRole } from '$lib/helpers/enums';
 	import { _ } from 'svelte-i18n'
 	import { goto } from '$app/navigation';
-
+	import { myInfo } from '$lib/services/auth-service';
+	import Swal from 'sweetalert2/dist/sweetalert2.js';
+    import "sweetalert2/src/sweetalert2.scss";
+	
   	const firstPage = 1;
 	const pageSize = 12;
 
@@ -26,16 +30,37 @@
 	/** @type {import('$types').Pagination} */
 	let pager = filter.pager;
 
+	/** @type {import('$types').UserModel} */
+	let user;
+
 	onMount(async () => {
 		await getPagedAgents();
+		user = await myInfo();
 	});
 
   	async function getPagedAgents() {
     	agents = await getAgents(filter);
 		refresh();
 	}
 
-	async function createAndEditAgent() {
+	function createNewAgent() {
+		// @ts-ignore
+        Swal.fire({
+            title: 'Are you sure?',
+            text: "Are you sure you want to create a new agent?",
+            icon: 'warning',
+            showCancelButton: true,
+			cancelButtonText: 'No',
+            confirmButtonText: 'Yes'
+        // @ts-ignore
+        }).then(async (result) => {
+            if (result.value) {
+                await handleCreateNewAgent();
+            }
+        });
+	}
+
+	async function handleCreateNewAgent() {
 		const newAgent = {
 			name: 'New Agent',
 			description: 'New Agent Description',
@@ -87,9 +112,12 @@
 
 <HeadTitle title="{$_('List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('List')}" />
-<Button class="mb-4" color="primary" on:click={() => createAndEditAgent()}>
+
+{#if !!user && user.role == UserRole.Admin}
+<Button class="mb-4" color="primary" on:click={() => createNewAgent()}>
 	<i class="bx bx-copy" /> {$_('New Agent')}
 </Button>
+{/if}
 
 <Row>
 	<CardAgent agents={agents.items} />