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

Features/refine chat window

Author: iceljc

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}

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 = [

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);

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 = [

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
  */
 
 

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 {};

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";

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/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 {

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;
+        }
+    }
+}