add role manage page

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/types/roleTypes.js

@@ -3,9 +3,32 @@
  * @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,119 @@
+.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;
+
+                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;

src/lib/services/api-endpoints.js

@@ -6,6 +6,7 @@ export const endpoints = {
     roleOptionsUrl: `${host}/role/options`,
     rolesUrl: `${host}/roles`,
     roleDetailUrl: `${host}/role/{id}/details`,
+    roleUpdateUrl: `${host}/role`,
 
     // user
     tokenUrl: `${host}/token`,

src/lib/services/role-service.js

@@ -11,7 +11,15 @@ export async function getRoleOptions() {
 }
 
 
-
+/**
+ * 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;
+}
 
 
 /**
@@ -24,3 +32,14 @@ export async function getRoleDetails(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/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', {

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>