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

Features/refine chat window
SciSharp · Nov 1, 2024 · 8d08281 · 8d08281
2 parents 07e002b + 42a1e95
commit 8d08281
Show file tree

Hide file tree

Showing 24 changed files with 823 additions and 31 deletions.
diff --git a/src/lib/common/InPlaceEdit.svelte b/src/lib/common/InPlaceEdit.svelte
@@ -26,19 +26,18 @@
     }
   
     function submit() {
+        editing = false;
         if (value != original) {
             dispatch('submit', value);
         }
-          
-        editing = false;
     }
   
     /** @param {any} event */
     function keydown(event) {
         if (event.key == 'Escape') {
             event.preventDefault()
             value = original;
-            editing = false
+            editing = false;
         }
     }
       
@@ -63,7 +62,7 @@
 {:else}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div style="width: fit-content; min-width: 30%;" on:click={() => edit()}>
+    <div style="width: fit-content; min-width: 30%;" class="clickable" on:click={() => edit()}>
         {#if !!value?.trim()}
             <span>{value}</span>
         {:else}

diff --git a/src/lib/helpers/constants.js b/src/lib/helpers/constants.js
@@ -5,7 +5,13 @@ export const CHAT_FRAME_ID = "chatbox-frame";
 export const USER_SENDERS = [
     UserRole.Admin,
     UserRole.User,
-    UserRole.Client
+    UserRole.Client,
+    UserRole.Root
+];
+
+export const ADMIN_ROLES = [
+    UserRole.Admin,
+    UserRole.Root
 ];
 
 export const BOT_SENDERS = [

diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
@@ -4,7 +4,8 @@ const userRole = {
     User: "user",
     Client: "client",
     Function: "function",
-    Assistant: "assistant"
+    Assistant: "assistant",
+    Root: "root"
 };
 export const UserRole = Object.freeze(userRole);
 
@@ -115,4 +116,15 @@ const conversationTag = {
     Evaluation: "evaluation-set",
     Test: "test-set"
 };
-export const ConversationTag = Object.freeze(conversationTag);
+export const ConversationTag = Object.freeze(conversationTag);
+
+const userPermission = {
+    CreateAgent: "create-agent"
+};
+export const UserPermission = Object.freeze(userPermission);
+
+const userAction = {
+    Edit: "edit",
+    Chat: "chat"
+};
+export const UserAction = Object.freeze(userAction);
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
@@ -61,12 +61,14 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/(.*?)/search', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/create', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
+        new RegExp('http(s*)://(.*?)/users', 'g')
     ];
 
     const putRegexes = [
         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 = [

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
@@ -58,6 +58,7 @@
  * @property {RoutingRule[]} routing_rules
  * @property {AgentWelcomeInfo} welcome_info - Welcome information.
  * @property {boolean} editable
+ * @property {boolean} chatable
  */
 
 

diff --git a/src/lib/helpers/types/userTypes.js b/src/lib/helpers/types/userTypes.js
@@ -7,13 +7,45 @@
  * @property {string} [full_name] - The user full name.
  * @property {string} [email] - The user email.
  * @property {string} source - Account source.
+ * @property {string?} [type] - Account source.
  * @property {string} [external_id] - The user external id.
+ * @property {string[]} permissions - Permissions.
+ * @property {UserAgentAction[]} agent_actions - Agent actions
  * @property {string} [create_date] - The user create date.
  * @property {string} [update_date] - The user update date.
  * @property {string} [role] - The user role.
  * @property {string} [avatar] - The user avatar.
  * @property {string} [color]
  * @property {string} [token]
+ * @property {boolean} [open_detail]
+ */
+
+/**
+ * @typedef {Object} UserAgentAction
+ * @property {string?} [id] - The id
+ * @property {string} agent_id - The agent id
+ * @property {import('$agentTypes').AgentModel} [agent] - The agent details
+ * @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
+ * @property {number} size - The page size
+ * @property {string[]} [user_ids] - The user ids.
+ * @property {string[]} [user_names] - The user names
+ * @property {string[]} [roles] - The roles.
+ * @property {string[]} [sources] - The sources.
+ * @property {string[]} [external_ids] - The external ids.
  */
 
 export default {};
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
@@ -92,6 +92,7 @@ File: Main Css File
 @import "custom/pages/conversation";
 @import "custom/pages/agent";
 @import "custom/pages/knowledgebase";
+@import "custom/pages/users";
 
 // Common
 @import "custom/common/animation";

diff --git a/src/lib/scss/custom/common/_common.scss b/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;

diff --git a/src/lib/scss/custom/components/_chat.scss b/src/lib/scss/custom/components/_chat.scss
@@ -54,7 +54,7 @@ $bubble-chat-theme-color: rgba($primary, 80%);
     width: 100%;
     z-index: 999;
     padding: 10px 15px;
-    background-color: rgb(255, 255, 239);
+    background-color: white;
 }
 
 .chat-util-item {

diff --git a/src/lib/scss/custom/pages/_users.scss b/src/lib/scss/custom/pages/_users.scss
@@ -0,0 +1,98 @@
+.users-table {
+    .user-plain-col {
+        width: 10%;
+        max-width: 100px;
+    }
+
+    .user-permission-col {
+        width: 20%;
+        max-width: 300px;
+    }
+
+    .user-agent-col {
+        width: 25%;
+        max-width: 350px;
+    }
+
+    .user-detail {
+        padding: 2px 5px;
+        border-radius: 3px;
+        border-color: var(--#{$prefix}light) !important;
+        background-color: var(--#{$prefix}light) !important;
+        position: relative;
+
+        ul {
+            li {
+                margin: 2px 0px;
+            }
+        }
+
+        .wrappable {
+            white-space: wrap !important;
+        }
+
+        .basic-info {
+            margin: 15px 0px 8px 0px;
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+                flex: 0 0 50%;
+
+                .inline-edit {
+                    display: flex;
+                    gap: 3px;
+                }
+            }
+        }
+
+        .user-agent-container {
+            margin: 20px 0px;
+            padding: 0px 2rem;
+
+            .action-row-wrapper {
+                overflow-y: auto;
+                scrollbar-width: thin;
+                height: fit-content;
+                max-height: 300px;
+            }
+
+            .action-row {
+                display: flex;
+            }
+
+            .action-col {
+                padding: 3px 0px;
+
+                input[type='checkbox'] {
+                    outline: none !important;
+                    box-shadow: none !important;
+                }
+            }
+
+            .action-title {
+                .action-title-wrapper {
+                    display: flex;
+                    gap: 3px;
+                    justify-content: center;
+                    text-transform: capitalize;
+                    text-align: center;
+                    border-bottom: 2px solid var(--bs-primary);
+                }
+            }
+
+            .action-center {
+                display: flex;
+                justify-content: center;
+            }
+        }
+
+        .edit-btn {
+            display: flex;
+            justify-content: flex-end;
+            font-size: 16px;
+            margin-top: 3px;
+            margin-right: 5px;
+        }
+    }
+}
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
@@ -14,13 +14,15 @@ export async function getSettings() {
 /**
  * Get agent list
  * @param {import('$agentTypes').AgentFilter} filter
+ * @param {boolean} checkAuth
  * @returns {Promise<import('$commonTypes').PagedItems<import('$agentTypes').AgentModel>>}
  */
-export async function getAgents(filter) {
+export async function getAgents(filter, checkAuth = false) {
     let url = endpoints.agentListUrl;
     const response = await axios.get(url, {
         params: {
-            ...filter
+            ...filter,
+            checkAuth : checkAuth
         },
         paramsSerializer: {
             dots: true,

diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
@@ -5,6 +5,8 @@ export const endpoints = {
     // user
     tokenUrl: `${host}/token`,
     myInfoUrl: `${host}/user/me`,
+    usersUrl: `${host}/users`,
+    userUpdateUrl: `${host}/user`,
     usrCreationUrl: `${host}/user`,
     userAvatarUrl: `${host}/user/avatar`,
 

diff --git a/src/lib/services/user-service.js b/src/lib/services/user-service.js
@@ -0,0 +1,23 @@
+import { endpoints } from './api-endpoints.js';
+import axios from 'axios';
+
+/**
+ * Get user list
+ * @param {import('$userTypes').UserFilter} filter
+ * @returns {Promise<import('$commonTypes').PagedItems<import('$userTypes').UserModel>>}
+ */
+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;
+}
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
@@ -16,7 +16,7 @@
     let agentId = 'undefined';
 
 	onMount(async () => {
-        const response = await getAgents(filter);
+        const response = await getAgents(filter, true);
         agents = response?.items?.map(t => { return { ...t }; }) || [];
         const agentSettings = await getSettingDetail("Agent");
         // @ts-ignore

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -43,7 +43,7 @@
 		PUBLIC_LIVECHAT_ENABLE_TRAINING,
 		PUBLIC_DEBUG_MODE
 	} from '$env/static/public';
-	import { BOT_SENDERS, LERNER_ID, TEXT_EDITORS, TRAINING_MODE, USER_SENDERS } from '$lib/helpers/constants';
+	import { BOT_SENDERS, LERNER_ID, TEXT_EDITORS, TRAINING_MODE, USER_SENDERS, ADMIN_ROLES } from '$lib/helpers/constants';
 	import { signalr } from '$lib/services/signalr-service.js';
 	import { webSpeech } from '$lib/services/web-speech.js';
 	import { newConversation } from '$lib/services/conversation-service';
@@ -201,7 +201,7 @@
 	}
 
 	$: {
-		disableAction = currentUser?.role !== UserRole.Admin && currentUser?.id !== conversationUser?.id;
+		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !agent?.chatable;
 	}
 
 	setContext('chat-window-context', {
@@ -1504,8 +1504,12 @@
 													</Dropdown>
 												</li>
 												{/if}
-												{#if currentUser?.role === UserRole.Admin}
-													<DropdownItem on:click={() => toggleTagModal()}>
+												
+												{#if ADMIN_ROLES.includes(currentUser?.role || '')}
+													<DropdownItem
+														disabled={disableAction}
+														on:click={() => toggleTagModal()}
+													>
 														Add Tags
 													</DropdownItem>
 												{/if}