Merge pull request #28 from iceljc/features/add-resizeable-panel

Features/add resizeable panel

Author: Oceania2018

package-lock.json

@@ -60,6 +60,7 @@
 		"svelte-jsoneditor": "^0.21.1",
 		"svelte-link": "^1.4.0",
 		"svelte-select": "^5.7.0",
+		"svelte-splitpanes": "^0.8.0",
 		"svelvet": "^9.0.0",
 		"sweetalert2": "^11.6.13",
 		"swiper": "^10.3.1"

package.json

@@ -217,8 +217,10 @@ IRichContent.prototype.text;
 /**
  * @typedef {Object} ContentLogModel
  * @property {string} conversation_id - The conversation id.
+ * @property {string} name - The sender name.
  * @property {string} content - The log content.
  * @property {Date} created_at - The log sent time.
+ * @property {boolean} is_collapsed - For UI display.
  */
 
 /**

src/lib/helpers/types.js

@@ -253,16 +253,8 @@
     }
 }
 
-.user-chat {
-    flex: 1;
-}
-
-.chat-with-log {
-    flex: 0.6;
-}
-
 .chat-log {
-    flex: 0.4;
+    height: 100vh;
 
     .padding-side {
         padding-left: 10px;
@@ -285,11 +277,24 @@
             .log-element {
                 margin-top: 15px;
                 margin-bottom: 15px;
+
+                .log-meta {
+                    font-size: 15px;
+                    color: white;
+                }
 
                 .log-content {
                     font-size: 15px;
                     color: white;
                 }
+
+                .log-collapse {
+                    overflow-y: hidden;
+                    height: 10%;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 5;
+                }
 
                 .divider {
                     overflow: visible; /* For IE */
@@ -299,6 +304,14 @@
                     color: white;
                     text-align: center;
                 }
+
+                .toggle-btn {
+                    outline: none;
+                    box-shadow: none;
+                    color: white;
+                    font-size: 15px;
+                    padding-left: 0px;
+                }
             }
         }
     }

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

@@ -6,13 +6,21 @@
     import { getAgents } from '$lib/services/agent-service.js'
     
     const params = $page.params;
+    /** @type {import('$types').AgentFilter} */
+    const filter = {
+        pager: { page: 1, size: 10, count: 0 },
+    	isEvaluator: false
+    };
+
     /** @type {import('$types').AgentModel[]} */
     let agents = [];
     let agentId = 'undefined';
 
 	onMount(async () => {
-        agents = await getAgents({isEvaluator: false});
+        const response = await getAgents(filter);
+        agents = response?.items?.map(t => { return { ...t }; }) || [];
         const agentSettings = await getSettingDetail("Agent");
+        // @ts-ignore
         agentId = agentSettings.hostAgentId;
 	});
 </script>