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

minor fixes

Author: Oceania2018

src/lib/helpers/types.js

@@ -278,7 +278,6 @@ IRichContent.prototype.text;
  * @property {string} message_id - The message id.
  * @property {Object} states - The states content.
  * @property {Date} created_at - The states sent time.
- * @property {number} expand_level - The object expand level
  */
 
 /** 

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

@@ -535,20 +535,12 @@
 	function truncateLogs(messageId) {
 		if (isLoadContentLog) {
 			const targetIdx = contentLogs.findIndex(x => x.message_id === messageId);
-			if (targetIdx < 0) {
-				contentLogs = [];
-			} else {
-				contentLogs = contentLogs.filter((x, idx) => idx < targetIdx);
-			}
+			contentLogs = contentLogs.filter((x, idx) => idx < targetIdx);
 		}
 		
 		if (isLoadStateLog) {
 			const targetIdx = stateLogs.findIndex(x => x.message_id === messageId);
-			if (targetIdx < 0) {
-				stateLogs = [];
-			} else {
-				stateLogs = stateLogs.filter((x, idx) => idx < targetIdx);
-			}
+			stateLogs = stateLogs.filter((x, idx) => idx < targetIdx);
 		}
 	}
 
@@ -578,14 +570,6 @@
 	function highlightStateLog(messageId) {
 		if (!isLoadStateLog) return;
 
-		stateLogs = stateLogs.map(item => {
-			if (item.message_id === messageId) {
-				item.expand_level = 1;
-			} else {
-				item.expand_level = 0;
-			}
-			return item;
-		});
 		const targets = document.querySelectorAll('.state-log-item');
 		targets.forEach(elm => {
 			const contentElm = elm.querySelector('.log-content');

src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte

@@ -51,7 +51,7 @@
                 </Link>
                 {:else}
                 <span class="text-white">
-                    {`${data?.name}`}
+                    {data.name}
                 </span>
                 {/if}
             </span>

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

@@ -4,8 +4,6 @@
 
     /** @type {any} */
     export let data;
-
-    $: stateObj = JSON.parse(JSON.stringify(data?.states || {}));
 </script>
 
 <div class="log-element state-log-item" id={`state-log-${data.message_id}`}>
@@ -14,10 +12,7 @@
     </div>
     <br>
     <div class="log-content">
-        <JSONTree
-            value={stateObj}
-            defaultExpandedLevel={data.expand_level || 0}
-        />
+        <JSONTree value={data?.states || {}} />
     </div>
     {#if data.message_id}
     <div style="margin-top: 10px;">

src/routes/page/conversation/[conversationId]/conv-dialogs.svelte

@@ -6,6 +6,7 @@
     import { onMount } from 'svelte';
     import { _ } from 'svelte-i18n'  
 	import { USER_SENDERS } from '$lib/helpers/constants';
+	import Markdown from '$lib/common/Markdown.svelte';
 
     /** @type {import('$types').ChatResponseModel[]} */
     let dialogs = [];
@@ -60,9 +61,18 @@
                         <div class="flex-grow-1">
                             <div>
                                 <span>{dialog.sender.full_name}</span>
-                                <p class="fw-bold">{dialog.text}</p>
-                                <span class="text-muted">{utcToLocal(dialog.created_at)}</span>
+                                <span class="text-muted ms-2" style="font-size: 0.7rem;">{utcToLocal(dialog.created_at)}</span>
                             </div>
+                            <div>
+                                <p class="fw-bold">
+                                    <Markdown text={dialog?.rich_content?.message?.text || dialog?.text} />
+                                </p>
+                            </div>
+                            {#if dialog.message_id}
+                            <div>
+                                <span class="text-muted" style="font-size: 0.7rem;">{`Message id: ${dialog.message_id}`}</span>
+                            </div>
+                            {/if}
                         </div>
                     </div>
                   </li>