refine log

Author: Jicheng Lu

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

@@ -368,7 +368,7 @@
             position: sticky;
             display: flex;
             justify-content: space-between;
-            height: 5vh;
+            height: 7vh;
         }
 
         .state-log-section {

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -458,7 +458,7 @@
 			});
 		} else {
 			window.parent.postMessage({ action: "close" }, "*");
-		} 
+		}
 	}
 
 	function toggleContentLog() {

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

@@ -1,18 +1,26 @@
 <script>
-
     /** @type {any} */
     export let data;
 
     /** @type {string} */
     let beforeActiveRoundText = '';
     let afterActiveRoundText = '';
-    const defaultKey = '-';
+    let beforeDataValue = '';
+    let afterDataValue = '';
+    const defaultValue = '-';
 
     $: {
+        beforeDataValue = buildDataValue(data?.before_value);
+        afterDataValue = buildDataValue(data?.after_value);
         beforeActiveRoundText = buildActiveRoundText(data?.before_value, data?.before_active_rounds);
         afterActiveRoundText = buildActiveRoundText(data?.after_value, data?.after_active_rounds);
     }
 
+    /** @param {any} value */
+    function buildDataValue(value) {
+        return value || defaultValue;
+    }
+
     /**
      * @param {any} value
 	 * @param {any} activeRounds
@@ -34,14 +42,15 @@
     }
 </script>
 
+{#if beforeDataValue != defaultValue || afterDataValue != defaultValue}
 <div class="log-element state-change-container">
     <div class="log-meta state-key">
         <div><b>{`${data?.name}`}</b></div>
     </div>
     <div class="log-content state-value-container">
         <div class="state-value">
             <div class="value">
-                {`${data?.before_value || defaultKey}`}
+                {beforeDataValue}
             </div>
             {#if !!beforeActiveRoundText}
             <div class="active-rounds">
@@ -51,7 +60,7 @@
         </div>
         <div class="state-value text-warning">
             <div class="value">
-                {`${data?.after_value || defaultKey}`}
+                {afterDataValue}
             </div>
             {#if !!afterActiveRoundText}
             <div class="active-rounds">
@@ -61,3 +70,4 @@
         </div>
     </div>
 </div>
+{/if}