draggable state log section

Author: iceljc

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

@@ -368,23 +368,24 @@
             margin-bottom: 10px;
             position: sticky;
             display: flex;
-            // justify-content: flex-end;
             justify-content: space-between;
         }
 
+        .state-log-section {
+            height: 90vh;
+        }
+
         .content-log-list {
             height: 90vh;
         }
 
         .state-change-log-list {
-            height: 35vh;
-            border-bottom-style: solid;
-            border-bottom-color: #fff;
-            border-bottom-width: 5px;
+            height: 100%;
         }
 
         .state-log-list {
-            height: 65vh;
+            height: 100%;
+            padding-top: 10px;
         }
 
         .queue-change-log-list {
@@ -393,6 +394,8 @@
         }
 
         .log-list {
+            background-color: black;
+
             .log-element {
                 margin-top: 10px;
                 margin-bottom: 15px;

src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte

@@ -2,6 +2,7 @@
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
 	import { afterUpdate, onDestroy, onMount } from 'svelte';
+    import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import { page } from '$app/stores';
 	import { GetStateLogs } from '$lib/services/logging-service';
     import StateLogElement from './state-log-element.svelte';
@@ -94,19 +95,28 @@
                 <i class="bx bx-trash"></i>
             </button>
         </div>
-        <div class="state-change-scrollbar state-change-log-list log-list padding-side">
-            <ul>
-                {#each stateChangeLogs as log}
-                    <StateChangeElement data={log} />
-                {/each}
-            </ul>
-        </div>
-        <div class="state-log-scrollbar state-log-list log-list padding-side">
-            <ul>
-                {#each stateLogs as log}
-                    <StateLogElement data={log} />
-                {/each}
-            </ul>
+        <div class="state-log-section">
+            <Splitpanes horizontal>
+                <Pane size={35} minSize={25} maxSize={75}>
+                    <div class="state-change-scrollbar state-change-log-list log-list padding-side">
+                        <ul>
+                            {#each stateChangeLogs as log}
+                                <StateChangeElement data={log} />
+                            {/each}
+                        </ul>
+                    </div>
+                </Pane>
+                <Pane size={65} minSize={25} maxSize={75}>
+                    <div class="state-log-scrollbar state-log-list log-list padding-side">
+                        <ul>
+                            {#each stateLogs as log}
+                                <StateLogElement data={log} />
+                            {/each}
+                        </ul>
+                    </div>
+                </Pane>
+            </Splitpanes>
         </div>
+        
     </div>
 </div>