Features/refine chat window

src/lib/common/Loader.svelte

@@ -3,9 +3,13 @@
 
     export let disableDefaultStyles = false;
     export let containerClasses = '';
+    export let containerStyles = '';
     export let size = 100;
 </script>
 
-<div class="{disableDefaultStyles ? '' : 'loader'} {containerClasses}">
+<div
+    class="{disableDefaultStyles ? '' : 'loader'} {containerClasses}"
+    style={`${containerStyles}`}
+>
     <Circle {size} color="var(--bs-primary)" unit="px" duration="1s" />
 </div>

src/lib/helpers/enums.js

@@ -125,6 +125,8 @@ export const UserPermission = Object.freeze(userPermission);
 
 const userAction = {
     Edit: "edit",
+    Train: "train",
+    Evaluate: "evaluate",
     Chat: "chat"
 };
 export const UserAction = Object.freeze(userAction);

src/lib/helpers/http.js

@@ -85,7 +85,10 @@ 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*)://(.*?)/role/options', 'g'),
+        new RegExp('http(s*)://(.*?)/role/(.*?)/details', 'g'),
+        new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

src/lib/helpers/types/agentTypes.js

@@ -60,6 +60,8 @@
  * @property {AgentWelcomeInfo} welcome_info - Welcome information.
  * @property {boolean} editable
  * @property {boolean} chatable
+ * @property {boolean} trainable
+ * @property {boolean} evaluable
  */
 
 

src/lib/helpers/types/roleTypes.js

@@ -0,0 +1,34 @@
+/**
+ * @typedef {Object} RoleModel
+ * @property {string} id - The user id.
+ * @property {string} [name] - Role name
+ * @property {string[]} permissions - Permissions.
+ * @property {RoleAgentAction[]} agent_actions - Agent actions
+ * @property {string} [create_date] - The user create date.
+ * @property {string} [update_date] - The user update date.
+ * @property {boolean} [open_detail]
+ */
+
+/**
+ * @typedef {Object} RoleAgentAction
+ * @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} RoleAgentInnerAction
+ * @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} RoleFilter
+ * @property {string[]} [names] - The role names.
+ */
+
+export default {};

src/lib/helpers/types/userTypes.js

@@ -44,6 +44,7 @@
  * @property {string[]} [user_ids] - The user ids.
  * @property {string[]} [user_names] - The user names
  * @property {string[]} [roles] - The roles.
+ * @property {string[]} [types] - The types.
  * @property {string[]} [sources] - The sources.
  * @property {string[]} [external_ids] - The external ids.
  */

src/lib/scss/app.scss

@@ -94,6 +94,7 @@ File: Main Css File
 @import "custom/pages/agent";
 @import "custom/pages/knowledgebase";
 @import "custom/pages/users";
+@import "custom/pages/roles";
 
 // Common
 @import "custom/common/animation";

src/lib/scss/custom/pages/_roles.scss

@@ -0,0 +1,120 @@
+.roles-table {
+    .role-plain-col {
+        width: 10%;
+        max-width: 100px;
+    }
+
+    .role-permission-col {
+        width: 40%;
+        max-width: 300px;
+    }
+
+    .role-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 0px 0px;
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+                flex: 0 0 50%;
+
+                .inline-edit {
+                    display: flex;
+                    gap: 3px;
+                }
+            }
+        }
+
+        .role-permission-container {
+            display: flex;
+            gap: 5px;
+
+            .permission-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 3px;
+
+                .edit-wrapper {
+                    display: flex;
+                    gap: 3px;
+                }
+
+                input[type="text"] {
+                    height: 30px;
+                    font-size: 12px;
+                }
+            }
+
+
+            .list-add {
+                font-size: 18px;
+            }
+        }
+
+        .role-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;
+                border-bottom: 1px dotted var(--bs-primary);
+
+                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;
+        }
+    }
+}

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

@@ -8,11 +8,6 @@
         width: 20%;
         max-width: 300px;
     }
-
-    .user-agent-col {
-        width: 25%;
-        max-width: 350px;
-    }
 
     .user-detail {
         padding: 2px 5px;
@@ -46,6 +41,14 @@
             }
         }
 
+        .role-wrapper {
+            .role-select {
+                height: 30px;
+                font-size: 12px;
+                padding: 0.3rem 1rem;
+            }
+        }
+
         .user-permission-container {
             display: flex;
             gap: 5px;
@@ -89,6 +92,7 @@
 
             .action-col {
                 padding: 3px 0px;
+                border-bottom: 1px dotted var(--bs-primary);
 
                 input[type='checkbox'] {
                     outline: none !important;

src/lib/services/api-endpoints.js

@@ -2,10 +2,17 @@ import { PUBLIC_SERVICE_URL } from '$env/static/public';
 export const host = PUBLIC_SERVICE_URL;
 
 export const endpoints = {
+    // role
+    roleOptionsUrl: `${host}/role/options`,
+    rolesUrl: `${host}/roles`,
+    roleDetailUrl: `${host}/role/{id}/details`,
+    roleUpdateUrl: `${host}/role`,
+
     // user
     tokenUrl: `${host}/token`,
     myInfoUrl: `${host}/user/me`,
     usersUrl: `${host}/users`,
+    userDetailUrl: `${host}/user/{id}/details`,
     userUpdateUrl: `${host}/user`,
     usrCreationUrl: `${host}/user`,
     userAvatarUrl: `${host}/user/avatar`,

src/lib/services/role-service.js

@@ -0,0 +1,45 @@
+import { endpoints } from './api-endpoints.js';
+import axios from 'axios';
+
+/**
+ * Get role options
+ * @returns {Promise<string[]>}
+ */
+export async function getRoleOptions() {
+    const response = await axios.get(endpoints.roleOptionsUrl);
+    return response.data;
+}
+
+
+/**
+ * Get role list
+ * @param {import('$roleTypes').RoleFilter?} [filter]
+ * @returns {Promise<import('$roleTypes').RoleModel[]>}
+ */
+export async function getRoles(filter = null) {
+    const response = await axios.post(endpoints.rolesUrl, filter);
+    return response.data;
+}
+
+
+/**
+ * Get user detail
+ * @param {string} id
+ * @returns {Promise<import('$roleTypes').RoleModel>}
+ */
+export async function getRoleDetails(id) {
+    const url = endpoints.roleDetailUrl.replace("{id}", id);
+    const response = await axios.get(url);
+    return response.data;
+}
+
+
+/**
+ * Update role
+ * @param {import('$roleTypes').RoleModel} model
+ * @returns {Promise<boolean>}
+ */
+export async function updateRole(model) {
+    const response = await axios.put(endpoints.roleUpdateUrl, { ...model });
+    return response.data;
+}

src/lib/services/user-service.js

@@ -12,6 +12,18 @@ export async function getUsers(filter) {
 }
 
 
+/**
+ * Get user detail
+ * @param {string} id
+ * @returns {Promise<import('$userTypes').UserModel>}
+ */
+export async function getUserDetails(id) {
+    const url = endpoints.userDetailUrl.replace("{id}", id);
+    const response = await axios.get(url);
+    return response.data;
+}
+
+
 /**
  * Get user list
  * @param {import('$userTypes').UserModel} model

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

@@ -202,7 +202,7 @@
 	}
 
 	$: {
-		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id;
+		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !agent?.chatable;
 	}
 
 	setContext('chat-window-context', {
@@ -1647,7 +1647,7 @@
 																	text={message?.rich_content?.message?.text || message?.text}
 																/>
 															{/if}
-															{#if PUBLIC_LIVECHAT_ENABLE_TRAINING === 'true'}
+															{#if PUBLIC_LIVECHAT_ENABLE_TRAINING === 'true' && agent?.trainable}
 																{#if message?.function}
 																	<div class="line-align-center" style="font-size: 17px;">
 																		<!-- svelte-ignore a11y-click-events-have-key-events -->

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

@@ -75,7 +75,7 @@
                     height="50"
                     class="mx-auto d-block"
                 />
-                {#if 1}
+                {#if !!agent.chatable}
                     <Button
                         class="btn btn-sm btn-soft-info agent-chat"
                         on:click={() => chatWithAgent()}

src/routes/page/agent/card-agent.svelte

@@ -78,7 +78,7 @@
             </Link>
           </li>
           <li class="list-inline-item me-1">
-            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank">
+            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank" disabled={!agent.chatable}>
               <i class="bx bx-chat" /> {$_('Test')}
             </Link>
           </li>