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

refine log style

Author: Oceania2018

src/lib/helpers/http.js

@@ -95,5 +95,5 @@ export function replaceNewLine(text) {
  * @returns string
  */
 export function replaceMarkdown(text) {
-    return text.replace(/#/g, '\\# ');
+    return text.replace(/#([\s]*)/g, '\\# ').replace(/\*([\s]*)/g, '\\* ');
 }

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

@@ -389,8 +389,8 @@
 
         .log-list {
             .log-element {
-                margin-top: 25px;
-                margin-bottom: 30px;
+                margin-top: 10px;
+                margin-bottom: 15px;
 
                 .log-meta {
                     font-size: 15px;
@@ -431,12 +431,33 @@
                     font-size: 15px;
                     padding-left: 0px;
                 }
+
+                .state-key {
+                    color: var(--bs-primary);
+                }
+                
+                .state-value-container {
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .state-value {
+                        min-width: 50%;
+                        font-size: 15px;
+                        margin-top: 3px;
+                        margin-bottom: 3px;
+                    }
+                }
             }
 
-            .state-log-item .log-content {
-                span {
-                    color: white;
-                    font-size: 16px;
+            .state-log-item {
+                margin-top: 5px;
+                margin-bottom: 10px;
+
+                .log-content {
+                    span {
+                        color: white;
+                        font-size: 16px;
+                    }
                 }
             }
         }

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

@@ -4,41 +4,16 @@
     export let data;
 </script>
 
-<div class="log-element state-change-element">
-    <div class="log-meta">
-        <div><b>{`[${data?.name}]`}</b></div>
+<div class="log-element">
+    <div class="log-meta state-key">
+        <div><b>{`${data?.name}`}</b></div>
     </div>
-    <div class="log-content">
-        <div class="transition-word text-secondary">
-            Before
-        </div>
+    <div class="log-content state-value-container">
         <div class="state-value">
             <div>{`${data?.before_value || 'unknown'}`}</div>
         </div>
-        
-        <div class="transition-word text-secondary">
-            After
-        </div>
-        <div class="state-value">
+        <div class="state-value text-warning">
             <div>{`${data?.after_value || 'unknown'}`}</div>
         </div>
     </div>
 </div>
-
-<style>
-    .transition-word {
-        font-size: 12px;
-        font-weight: 600;
-        margin-top: 5px;
-        margin-bottom: 5px;
-    }
-
-    .state-change-element {
-        margin-top: 15px !important;
-        margin-bottom: 15px !important;
-    }
-
-    .state-value {
-        font-size: 15px;
-    }
-</style>

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

@@ -1,16 +1,11 @@
 <script>
-	import { utcToLocal } from '$lib/helpers/datetime';
     import JSONTree from 'svelte-json-tree';
 
     /** @type {any} */
     export let data;
 </script>
 
 <div class="log-element state-log-item" id={`state-log-${data.message_id}`}>
-    <div class="log-meta">
-        <div><b>{`[${utcToLocal(data.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')}]`}</b></div>
-    </div>
-    <br>
     <div class="log-content">
         <JSONTree value={data?.states || {}} />
     </div>