From 1b4f1794c9e3877792814322a6c305d8b2cff166 Mon Sep 17 00:00:00 2001
From: Haiping Chen <101423@smsassist.com>
Date: Wed, 28 Feb 2024 10:19:28 -0600
Subject: [PATCH] improved the stream log format

---
 .../contentLogs/content-log-element.svelte    | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte
index 7e9ba73d..08e2395f 100644
--- a/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte
@@ -33,20 +33,24 @@
     }
 </script>
 
-<div class={`log-element p-2 rounded ${logBackground}`} id={`content-log-${data.message_id}`}>
-    <div class="log-meta">
-        <div><b>{`[${data?.name?.length > 0 ? data?.name + ' ' : ''}${utcToLocal(data?.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')}]`}</b></div>
-        {#if data.message_id}
-        <div><b>{`[MessageId: ${data.message_id}]`}</b></div>
-        {/if}
+<div class={`log-element p-2 rounded`} id={`content-log-${data.message_id}`}>
+    <div class="log-meta text-secondary">
+        <div>
+            <span class="text-white h4">{`${data?.name?.length > 0 ? data?.name + ' ' : ''}`}</span> 
+            <span class="ms-2">{`${utcToLocal(data?.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')} `}</span>
+        </div>        
     </div>
-    <br>
-    <div class="log-content" class:log-collapse={includedSources.includes(data.source) && !!is_collapsed}>
+    <div class={`p-2 rounded log-content ${logBackground}`} class:log-collapse={includedSources.includes(data.source) && !!is_collapsed}>
         {@html replaceNewLine(data?.content)}
     </div>
+
     {#if includedSources.includes(data.source)}
-    <Button class='toggle-btn' color="link" on:click={(e) => toggleText(e)}>
+    <Button class='toggle-btn btn-sm' color="link" on:click={(e) => toggleText(e)}>
         {`${is_collapsed ? 'More +' : 'Less -'}`}
     </Button>
     {/if}
+
+    {#if data.message_id}
+    <div>{`MessageId: ${data.message_id}`}</div>
+    {/if}         
 </div>
\ No newline at end of file