SciSharp · Oceania2018 · Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024
diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
@@ -277,6 +277,7 @@ 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
  */
 
 /** 

diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
@@ -88,29 +88,22 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    gap: 5px;
 }
 
 .user-chat-nav {
-    .chat-nav-element {
-        align-self: stretch;
-        min-width: 30px;
-        min-height: 30px;
-
-        .nav-btn {
-            color: var(--#{$prefix}body-color);
-            box-shadow: none;
-            padding: 0;
-            background-color: var(--#{$prefix}light);
-            border-radius: 50%;
-            border: none;
-            width: 100%;
-            height: 100%;
-        }
-
-        button {
-            height: 100%;
-        }
+    align-self: stretch;
+    min-width: 30px;
+    min-height: 30px;
+
+    .nav-btn {
+        color: var(--#{$prefix}body-color);
+        box-shadow: none;
+        padding: 0;
+        background-color: var(--#{$prefix}light);
+        border-radius: 50%;
+        border: none;
+        width: 40px;
+        height: 40px;
     }
 
     .dropdown {
@@ -355,20 +348,17 @@
                 }
 
                 .log-content {
-                    font-size: 15px;
+                    font-size: 17px;
                     color: white;
 
                     li {
                         margin-top: 5px;
                         margin-bottom: 5px;
-                        .property {
-                            padding-left: 10px;
-                        }
                     }
 
                     span {
                         color: white;
-                        font-size: 15px;
+                        font-size: 16px;
                     }
                 }
 

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -84,19 +84,14 @@
 	/** @type {boolean} */
 	let isLoadContentLog = false;
 	let isLoadStateLog = false;
-	let isContentLogClosed = false;
-	let isStateLogClosed = false;
+	let isContentLogClosed = false; // initial condition
+	let isStateLogClosed = false; // initial condition
 	let isOpenEditMsgModal = false;
 	let isOpenAddStateModal = false;
 	let isSendingMsg = false;
 	let isThinking = false;
 	let isLite = false;
 	let isFrame = false;
-
-	/** @type {any} */
-	let contentLogComponent;
-	/** @type {any} */
-	let stateLogComponent;
 
 	onMount(async () => {
 		dialogs = await GetDialogs(params.conversationId);
@@ -119,16 +114,8 @@
 	function resizeChatWindow() {
 		isLite = Viewport.Width <= screenWidthThreshold;
 		if (!isLite) {
-			if (isContentLogClosed) {
-				isLoadContentLog = false;
-			} else {
-				isLoadContentLog = true;
-			}
-			if (isStateLogClosed) {
-				isLoadStateLog = false;
-			} else {
-				isLoadStateLog = true;
-			}
+			isLoadContentLog = !isContentLogClosed;
+			isLoadStateLog = !isStateLogClosed;
 		} else {
 			isLoadContentLog = false;
 			isLoadStateLog = false;
@@ -137,6 +124,14 @@
 		}
 	}
 
+	function initChatView() {
+		isFrame = $page.url.searchParams.get('isFrame') === 'true';
+		// initial condition
+		isContentLogClosed = false;
+		isStateLogClosed = false;
+		resizeChatWindow();
+	}
+
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
 	function initUserSentMessages(dialogs) {
 		const curConvMessages = dialogs?.filter(x => x.sender?.role != UserRole.Assistant).map(x => {
@@ -186,11 +181,6 @@
 		return messages?.slice(-messageLimit) || [];
 	}
 
-	function initChatView() {
-		isFrame = $page.url.searchParams.get('isFrame') === 'true';
-		resizeChatWindow();
-	}
-
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
 	function findLastBotMessage(dialogs) {
 		const lastMsg = dialogs.slice(-1)[0];
@@ -543,12 +533,22 @@
 
 	/** @param {string} messageId */
 	function truncateLogs(messageId) {
-		if (contentLogComponent && contentLogComponent.onDeleteMessage) {
-			contentLogComponent.onDeleteMessage(messageId);
+		if (isLoadContentLog) {
+			const targetIdx = contentLogs.findIndex(x => x.message_id === messageId);
+			if (targetIdx < 0) {
+				contentLogs = [];
+			} else {
+				contentLogs = contentLogs.filter((x, idx) => idx < targetIdx);
+			}
 		}
 
-		if (stateLogComponent && stateLogComponent.onDeleteMessage) {
-			stateLogComponent.onDeleteMessage(messageId);
+		if (isLoadStateLog) {
+			const targetIdx = stateLogs.findIndex(x => x.message_id === messageId);
+			if (targetIdx < 0) {
+				stateLogs = [];
+			} else {
+				stateLogs = stateLogs.filter((x, idx) => idx < targetIdx);
+			}
 		}
 	}
 
@@ -557,17 +557,60 @@
 		if (!!!messageId || isLite) return;
 
 		highlightChatMessage(messageId);
+		highlightStateLog(messageId);
+		autoScrollToTargetLog(messageId);
+	}
+
+	/** @param {string} messageId */
+	function highlightChatMessage(messageId) {
+		const targets = document.querySelectorAll('.user-msg');
+		targets.forEach(elm => {
+			if (elm.id === `user-msg-${messageId}`) {
+				elm.classList.add('bg-primary', 'text-white');
+			} else {
+				elm.classList.remove('bg-primary', 'text-white');
+			}
+		});
+	}
+
+	/** @param {string} messageId */
+	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');
+			if (!contentElm) return;
+
+			if (elm.id === `state-log-${messageId}`) {
+				contentElm.classList.add('border', 'border-warning', 'rounded', 'p-1');
+			} else {
+				contentElm.classList.remove('border', 'border-warning', 'rounded', 'p-1');
+			}
+		});
+	}
+
+	/** @param {string} messageId */
+	function autoScrollToTargetLog(messageId) {
 		const elements = [];
 		const contentLogElm = document.querySelector(`#content-log-${messageId}`);
-		if (!!contentLogElm) {
+		if (isLoadContentLog && !!contentLogElm) {
 			elements.push({
 				elm: contentLogElm,
 				wrapperName: '.content-log-scrollbar'
 			});
 		}
 
 		const stateLogElm = document.querySelector(`#state-log-${messageId}`);
-		if (!!stateLogElm) {
+		if (isLoadStateLog && !!stateLogElm) {
 			elements.push({
 				elm: stateLogElm,
 				wrapperName: '.state-log-scrollbar'
@@ -582,18 +625,6 @@
 		});
 	}
 
-	/** @param {string} messageId */
-	function highlightChatMessage(messageId) {
-		const targets = document.querySelectorAll('.user-msg');
-		targets.forEach(elm => {
-			if (elm.id === `user-msg-${messageId}`) {
-				elm.classList.add('bg-primary', 'text-white');
-			} else {
-				elm.classList.remove('bg-primary', 'text-white');
-			}
-		});
-	}
-
 	function openFullScreen() {
 		window.open($page.url.pathname);
 	}
@@ -627,8 +658,7 @@
 		{#if isLoadStateLog}
 		<Pane size={30} minSize={20} maxSize={50} >
 			<StateLog
-				bind:this={stateLogComponent}
-				stateLogs={stateLogs}
+				bind:stateLogs={stateLogs}
 				closeWindow={toggleStateLog}
 				cleanScreen={cleanStateLogScreen}
 			/>
@@ -648,17 +678,17 @@
 
 							<div class="col-md-8 col-5">
 								<ul class="list-inline user-chat-nav user-chat-nav-flex mb-0">
-									{#if isFrame}
-									<li class="chat-nav-element">
+									{#if 1}
+									<li class="list-inline-item">
 										<button
-											class="btn btn-secondary nav-btn dropdown-toggle"
+											class="btn btn-secondary btn-rounded btn-sm"
 											on:click={() => openFullScreen()}
 										>
 											<i class="bx bx-fullscreen" />
 										</button>
 									</li>
 									{/if}
-									<li class="chat-nav-element">
+									<li class="list-inline-item">
 										<Dropdown>
 											<DropdownToggle class="nav-btn dropdown-toggle">
 												<i class="bx bx-dots-horizontal-rounded" />
@@ -690,7 +720,7 @@
 										</Dropdown>
 									</li>
 
-									<li class="chat-nav-element d-md-inline-block">
+									<li class="list-inline-item d-md-inline-block">
 										<button
 											class="btn btn-primary btn-rounded btn-sm chat-send waves-effect waves-light"
 											on:click={() => endChat()}
@@ -835,8 +865,7 @@
 		{#if isLoadContentLog}
 		<Pane size={30} minSize={20} maxSize={50}>
 			<ContentLog
-				bind:this={contentLogComponent}
-				contentLogs={contentLogs}
+				bind:contentLogs={contentLogs}
 				closeWindow={toggleContentLog}
 				cleanScreen={cleanContentLogScreen}
 			/>

diff --git a/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte
@@ -50,7 +50,7 @@
     </Button>
     {/if}
 
-    {#if data.message_id}
+    {#if data.message_id && data.source === ContentLogSource.UserInput}
     <div>{`MessageId: ${data.message_id}`}</div>
     {/if}         
 </div>
diff --git a/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte
@@ -15,17 +15,8 @@
     /** @type {() => void} */
     export let cleanScreen;
 
-    export const onDeleteMessage = (/** @type {string} */ messageId) => {
-        const targetIdx = allLogs.findIndex(x => x.message_id === messageId);
-        allLogs = allLogs.filter((x, idx) => idx < targetIdx);
-    }
-
     // @ts-ignore
     let scrollbar;
-    /** @type {import('$types').ConversationContentLogModel[]} */
-    let initLogs = [];
-
-    $: allLogs = [...initLogs, ...contentLogs];
 
     const options = {
 		scrollbars: {
@@ -41,7 +32,7 @@
 
     onMount(async () => {
         const conversationId = $page.params.conversationId;
-        initLogs = await GetContentLogs(conversationId);
+        contentLogs = await GetContentLogs(conversationId);
 
 		const scrollElement = document.querySelector('.content-log-scrollbar');
 		scrollbar = OverlayScrollbars(scrollElement, options);
@@ -64,20 +55,13 @@
     }
 
     function cleanLogs() {
-        initLogs = [];
         contentLogs = [];
     }
 
     function handleCleanScreen() {
         cleanLogs();
         cleanScreen && cleanScreen();
     }
-
-    // /** @param {string} messageId */
-    // function onDeleteMessage(messageId) {
-    //     const targetIdx = allLogs.findIndex(x => x.message_id === messageId);
-    //     allLogs = allLogs.filter((x, idx) => idx < targetIdx);
-    // }
 </script>
 
 <div class="chat-log">
@@ -100,7 +84,7 @@
         </div>
         <div class="content-log-scrollbar log-list padding-side">
             <ul>
-                {#each allLogs as log}
+                {#each contentLogs as log}
                     <ContentLogElement data={log} />
                 {/each}
             </ul>