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

add log tab

Author: Oceania2018

src/lib/common/nav-bar/NavBar.svelte

@@ -0,0 +1,32 @@
+<script>
+
+    /** @type {string} */
+    export let id = "nav-bar";
+
+    /** @type {string} */
+    export let role = "tablist";
+
+    /** @type {string} */
+    export let containerClasses = "";
+
+    /** @type {string} */
+    export let containerStyles = "";
+
+    /** @type {boolean} */
+    export let disableDefaultStyles = false;
+</script>
+
+<ul
+    class="{disableDefaultStyles ? '' : 'nav nav-tabs nav-container'} {containerClasses}"
+    style={`${containerStyles}`}
+    id={id}
+    role={role}
+>
+    <slot />
+</ul>
+
+<style>
+    .nav-container {
+        height: 100%;
+    }
+</style>

src/lib/common/nav-bar/NavItem.svelte

@@ -0,0 +1,103 @@
+<script>
+
+    /** @type {string} */
+    export let containerClasses = "";
+
+    /** @type {string} */
+    export let containerStyles = "";
+
+    /** @type {boolean} */
+    export let disableDefaultContainerStyles = false;
+
+    /** @type {string} */
+    export let containerRole = "presentation";
+
+    /** @type {string} */
+    export let containerId = "nav-item";
+
+    /** @type {string} */
+    export let navBtnClasses = "";
+
+    /** @type {string} */
+    export let navBtnStyles = "";
+
+    /** @type {boolean} */
+    export let disableDefaultNavBtnStyles = false;
+
+    /** @type {string} */
+    export let navBtnRole = "tab";
+
+    /** @type {string} */
+    export let navBtnId = "nav-item-id";
+
+    /** @type {string} */
+    export let navBtnText;
+
+    /** @type {boolean} */
+    export let active = false;
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    /** @type {string} */
+    export let dataBsToggle = "tab";
+
+    /** @type {string} */
+    export let dataBsTarget = "#nav-item-pane";
+
+    /** @type {string} */
+    export let ariaControls = "nav-item-tab-pane";
+
+    /** @type {() => void} */
+    export let onClick = () => {};
+
+    /** @param {any} e */
+    function handleTabClick(e) {
+        e.preventDefault();
+        onClick?.();
+    }
+</script>
+
+<li
+    class="{disableDefaultContainerStyles ? '' : 'nav-item tab-item'} {containerClasses}"
+    style={`${containerStyles}`}
+    id={containerId}
+    role={containerRole}
+>
+    <button
+        class="{disableDefaultNavBtnStyles ? '' : 'nav-link tab-btn'} {navBtnClasses}"
+        class:active={active}
+        style={`${navBtnStyles}`}
+        id={navBtnId}
+        type="button" 
+        role={navBtnRole}
+        data-bs-toggle={dataBsToggle}
+        data-bs-target={dataBsTarget}
+        aria-controls={ariaControls}
+        aria-selected={`${active ? "true" : "false"}`}
+        disabled={disabled}
+        on:click={(e) => handleTabClick(e)}
+    >
+        {navBtnText}
+    </button>
+</li>
+
+<style>
+    .tab-item {
+        flex: 0 1 50%;
+    }
+
+    .tab-btn {
+        width: 100%;
+        height: 100%;
+        border: none !important;
+        color: white !important;
+        background-color: var(--bs-secondary);
+        font-weight: 500;
+        font-size: 1.2em;
+    }
+
+    .tab-btn.active {
+        background-color: var(--bs-primary) !important;
+    }
+</style>

src/lib/helpers/types.js

@@ -302,7 +302,7 @@ IRichContent.prototype.text;
  */
 
 /**
- * @typedef {Object} StateChangeModel
+ * @typedef {Object} MessageStateLogModel
  * @property {string} conversation_id - The conversation id.
  * @property {string} message_id - The message id.
  * @property {string} before_value - The value before change.
@@ -315,7 +315,7 @@ IRichContent.prototype.text;
  */
 
 /**
- * @typedef {Object} AgentQueueChangedModel
+ * @typedef {Object} AgentQueueLogModel
  * @property {string} conversation_id - The conversation id.
  * @property {string} log - The log content.
  * @property {Date} created_at - The log sent time.
@@ -416,14 +416,14 @@ IRichContent.prototype.text;
  * Conversation state change log
  * 
  * @callback OnStateChangeGenerated
- * @param {StateChangeModel} log
+ * @param {MessageStateLogModel} log
  */
 
 /** 
  * Agent queue changed log
  * 
  * @callback OnAgentQueueChanged
- * @param {AgentQueueChangedModel} log
+ * @param {AgentQueueLogModel} log
  */
 
 /** 

src/lib/scss/app.scss

@@ -91,6 +91,7 @@ File: Main Css File
 
 // Common
 @import "custom/common/animation";
+@import "custom/common/display";
 
 //RTL
 // @import "custom/rtl/bootstrap-rtl";

src/lib/scss/custom/common/_display.scss

@@ -0,0 +1,3 @@
+.hide {
+    display: none !important;
+}

src/lib/scss/custom/pages/_chat.scss

@@ -343,6 +343,20 @@
 .chat-log {
     height: 100vh;
 
+    .log-flex {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .log-header {
+        flex: 5%;
+    }
+
+    .log-content {
+        flex: 90%
+    }
+
     .padding-side {
         padding-left: 20px;
         padding-right: 20px;
@@ -361,28 +375,6 @@
             position: sticky;
             display: flex;
             justify-content: space-between;
-            height: 7vh;
-        }
-
-        .state-log-section {
-            height: 90vh;
-        }
-
-        .content-log-list {
-            height: 90vh;
-        }
-
-        .state-change-log-list {
-            height: 100%;
-        }
-
-        .state-log-list {
-            height: 100%;
-            padding-top: 10px;
-        }
-
-        .queue-change-log-list {
-            width: 100%;
         }
 
         .log-list {
@@ -436,6 +428,7 @@
             .state-change-container {
                 margin-top: 0px;
                 margin-bottom: 5px;
+                padding-left: 10px;
 
                 .state-key {
                     color: var(--bs-primary);
@@ -463,10 +456,11 @@
             .queue-change-container {
                 margin-top: 0px;
                 margin-bottom: 0px;
+                padding: 0px 10px;
 
                 .log-content {
                     text-align: center;
-                    font-size: 14px;
+                    font-size: 18px;
                     margin-top: 2px;
                     margin-bottom: 2px;
                 }