SciSharp · iceljc · Mar 12, 2025 · Mar 12, 2025
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
@@ -108,7 +108,9 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
         new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
-        new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g')
+        new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
+        new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
+        new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

diff --git a/src/lib/helpers/types/commonTypes.js b/src/lib/helpers/types/commonTypes.js
@@ -24,6 +24,14 @@
  * @property {T[]} items - Items.
  */
 
+/**
+ * @template T
+ * @typedef {Object} DateTimePagedItems<T>
+ * @property {number} count - Row count.
+ * @property {T[]} items - Items.
+ * @property {Date?} [nextTime]
+ */
+
 /**
  * @typedef {Object} LlmConfigOption
  * @property {number?} [type]

diff --git a/src/lib/helpers/types/conversationTypes.js b/src/lib/helpers/types/conversationTypes.js
@@ -152,6 +152,7 @@ IRichContent.prototype.quick_replies;
 
 /**
  * @typedef {Object} ConversationContentLogModel
+ * @property {string?} [uid]
  * @property {string} conversation_id - The conversation id.
  * @property {string} message_id - The message id.
  * @property {string} name - The sender name.
@@ -164,12 +165,19 @@ IRichContent.prototype.quick_replies;
 
 /**
  * @typedef {Object} ConversationStateLogModel
+ * @property {string?} [uid]
  * @property {string} conversation_id - The conversation id.
  * @property {string} message_id - The message id.
  * @property {Object} states - The states content.
  * @property {Date} created_at - The log sent time.
  */
 
+/**
+ * @typedef {Object} ConversationLogFilter
+ * @property {number} size
+ * @property {Date?} [startTime]
+ */
+
 /**
  * @typedef {Object} MessageStateLogModel
  * @property {string} conversation_id - The conversation id.

diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
@@ -86,7 +86,7 @@
 
         .chat-head-info {
             display: flex;
-            flex: 0 0 fit-content;
+            // flex: 0 0 fit-content;
             flex-direction: column;
             height: 100%;
             gap: 5px;

diff --git a/src/lib/services/conversation-service.js b/src/lib/services/conversation-service.js
@@ -80,11 +80,16 @@ export async function deleteConversation(conversationId) {
 /**
  * Get dialog history
  * @param {string} conversationId 
+ * @param {number} count
  * @returns {Promise<import('$conversationTypes').ChatResponseModel[]>}
  */
-export async function getDialogs(conversationId) {
+export async function getDialogs(conversationId, count = 100) {
     let url = replaceUrl(endpoints.dialogsUrl, {conversationId: conversationId});
-    const response = await axios.get(url);
+    const response = await axios.get(url, {
+        params: {
+            count: count
+        }
+    });
     return response.data;
 }
 

diff --git a/src/lib/services/logging-service.js b/src/lib/services/logging-service.js
@@ -23,22 +23,32 @@ export async function getFullLog() {
 
 /**
  * Get conversation content log
- * @param {string} conversationId 
- * @returns {Promise<import('$conversationTypes').ConversationContentLogModel[]>}
+ * @param {string} conversationId
+ * @param {import('$conversationTypes').ConversationLogFilter} filter
+ * @returns {Promise<import('$commonTypes').DateTimePagedItems<import('$conversationTypes').ConversationContentLogModel>>}
  */
-export async function GetContentLogs(conversationId) {
+export async function getContentLogs(conversationId, filter) {
     let url = replaceUrl(endpoints.loggingContentLogUrl, {conversationId: conversationId});
-    const response = await axios.get(url);
+    const response = await axios.get(url, {
+        params: {
+            ...filter
+        }
+    });
     return response.data;
 }
 
 /**
  * Get conversation state log
- * @param {string} conversationId 
- * @returns {Promise<import('$conversationTypes').ConversationStateLogModel[]>}
+ * @param {string} conversationId
+ * @param {import('$conversationTypes').ConversationLogFilter} filter
+ * @returns {Promise<import('$commonTypes').DateTimePagedItems<import('$conversationTypes').ConversationStateLogModel>>}
  */
-export async function GetStateLogs(conversationId) {
+export async function getStateLogs(conversationId, filter) {
     let url = replaceUrl(endpoints.loggingStateLogUrl, {conversationId: conversationId});
-    const response = await axios.get(url);
+    const response = await axios.get(url, {
+        params: {
+            ...filter
+        }
+    });
     return response.data;
 }
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -88,9 +88,10 @@
 	const params = $page.params;
 	const messageLimit = 100;
 	const screenWidthThreshold = 1024;
-	const chatWidthThreshold = 300;
+	const chatWidthThreshold = 500;
 	const maxTextLength = 64000;
 	const duration = 2000;
+	const dialogCount = 50;
 	const MESSAGE_STORAGE_KEY = 'message_draft_';
 
 	/** @type {import('$agentTypes').AgentModel} */
@@ -219,7 +220,7 @@
 	onMount(async () => {
 		disableSpeech = navigator.userAgent.includes('Firefox');
 		conversation = await getConversation(params.conversationId);
-		dialogs = await getDialogs(params.conversationId);
+		dialogs = await getDialogs(params.conversationId, dialogCount);
 		conversationUser = await getConversationUser(params.conversationId);
 		selectedTags = conversation?.tags || [];
 		initUserSentMessages(dialogs);
@@ -494,7 +495,8 @@
 	/** @param {import('$conversationTypes').ConversationContentLogModel} log */
 	function onConversationContentLogGenerated(log) {
 		if (!isLoadPersistLog) return;
-		contentLogs.push({ ...log });
+
+		contentLogs.push({ ...log, uid: uuidv4() });
 		contentLogs = contentLogs.map(x => { return { ...x }; });
 	}
 
@@ -503,7 +505,7 @@
 		if (!isLoadPersistLog) return;
 
 		latestStateLog = log;
-		convStateLogs.push({ ...log });
+		convStateLogs.push({ ...log, uid: uuidv4() });
 		convStateLogs = convStateLogs.map(x => { return { ...x }; });
 	}
 
@@ -1489,7 +1491,7 @@
 				<div class="card mb-0" style="height: 100vh;">
 					<div class="border-bottom chat-head">
 						<div class="row chat-row">
-							<div class="col-md-4 col-7 chat-head-info">
+							<div class="col-md-4 col-4 chat-head-info">
 								<div class="chat-head-agent">
 									{#if agent?.icon_url}
 									<div class="line-align-center">
@@ -1507,9 +1509,9 @@
 									</div>
 								</div>
 							</div>
-		
-							<div class="col-md-8 col-5">
-								<div class="user-chat-nav user-chat-nav-flex mb-0">
+
+							<div class="col-md-8 col-8">
+								<div class="user-chat-nav user-chat-nav-flex mb-0" style={`padding-top: ${!isFrame ? '5px' : '0px'};`}>
 									{#if PUBLIC_DEBUG_MODE === 'true' && isFrame}
 										<div class="">
 											<button
@@ -1913,7 +1915,7 @@
 				bind:contentLogs={contentLogs}
 				bind:convStateLogs={convStateLogs}
 				bind:lastestStateLog={latestStateLog}
-				autoScroll={autoScrollLog}
+				bind:autoScroll={autoScrollLog}
 				closeWindow={() => closePersistLog()}
 				cleanScreen={() => cleanPersistLogScreen()}
 			/>

diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
@@ -26,6 +26,8 @@
     ];
 
     $: {
+        logDisplayStyle = '';
+        logTextStyle = '';
         if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
             logDisplayStyle = 'border border-secondary';
             logTextStyle = 'text-info';
@@ -62,7 +64,7 @@
             {/if}
             </span>
             <span class="ms-2">{`${utcToLocal(data?.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')} `}</span>
-        </div>        
+        </div>
     </div>
     <div
         class={`rounded log-content ${logDisplayStyle}`}

diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte
@@ -18,8 +18,8 @@
         />
     </div>
     {#if data.message_id}
-    <div style="margin-top: 10px;">
-        {`MessageId: ${data.message_id}`}
-    </div>
+        <div style="margin-top: 10px;">
+            {`MessageId: ${data.message_id}`}
+        </div>
     {/if} 
 </div>
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
@@ -1,16 +1,31 @@
 <script>
+    import { afterUpdate, beforeUpdate, onDestroy, onMount, tick } from 'svelte';
+    import { page } from '$app/stores';
+    import moment from 'moment';
+    import { v4 as uuidv4 } from 'uuid';
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import { afterUpdate, beforeUpdate, onDestroy, onMount } from 'svelte';
-	import { page } from '$app/stores';
-	import { GetContentLogs, GetStateLogs } from '$lib/services/logging-service';
+	import { getContentLogs, getStateLogs } from '$lib/services/logging-service';
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
     import NavItem from '$lib/common/nav-bar/NavItem.svelte';
     import ContentLogElement from './content-log-element.svelte';
 	import ConversationStateLogElement from './conversation-state-log-element.svelte';
-
+	
     const contentLogTab = 1;
     const conversationStateLogTab = 2;
+    const conversationId = $page.params.conversationId;
+    const utcNow = moment.utc().toDate();
+
+    const scrollbarElements = [
+        {
+            id: '.content-log-scrollbar',
+            type: contentLogTab,
+        },
+        {
+            id: '.conv-state-log-scrollbar',
+            type: conversationStateLogTab,
+        }
+    ];
 
     /** @type {import('$conversationTypes').ConversationContentLogModel[]} */
     export let contentLogs = [];
@@ -36,6 +51,11 @@
     let selectedTab = contentLogTab;
     let tabChanged = false;
 
+    /** @type {import('$conversationTypes').ConversationLogFilter} */
+    let contentLogFilter = { size: 20, startTime: utcNow };
+    /** @type {import('$conversationTypes').ConversationLogFilter} */
+    let stateLogFilter = { size: 20, startTime: utcNow };
+
     const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -49,18 +69,10 @@
 	};
 
     onMount(async () => {
-        const conversationId = $page.params.conversationId;
-        contentLogs = await GetContentLogs(conversationId);
-        convStateLogs = await GetStateLogs(conversationId);
-        lastestStateLog = convStateLogs.slice(-1)[0];
-
-        const scrollbarElements = [
-            document.querySelector('.content-log-scrollbar'),
-            document.querySelector('.conv-state-log-scrollbar')
-        ].filter(Boolean);
-        scrollbarElements.forEach(elem => {
-            scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
-        });
+        await getChatContentLogs();
+        await getChatStateLogs();
+
+        initScrollbars();
 		scrollToBottom();
 	});
 
@@ -95,6 +107,63 @@
             }, 200);
         });
     }
+
+    function initScrollbars() {
+        scrollbarElements.forEach(item => {
+            const elem = document.querySelector(item.id);
+            if (!elem) return;
+
+            const scrollbar = OverlayScrollbars(elem, options);
+            scrollbar.on("scroll", async (e) => {
+                const curScrollTop = e.elements().scrollOffsetElement.scrollTop;
+                if (curScrollTop <= 1) {
+                    tabChanged = true;
+                    if (item.type === contentLogTab) {
+                        await getChatContentLogs();
+                    } else if (item.type === conversationStateLogTab) {
+                        await getChatStateLogs();
+                    }
+                }
+            });
+
+            scrollbars = [ ...scrollbars, scrollbar];
+        });
+    }
+
+    async function getChatContentLogs() {
+        if (!contentLogFilter.startTime) return;
+
+        const pagedContentLogs = await getContentLogs(conversationId, contentLogFilter);
+        contentLogFilter = {
+            ...contentLogFilter,
+            startTime: pagedContentLogs.nextTime || null
+        };
+        const newLogs = pagedContentLogs.items?.map(x => {
+            return { uid: uuidv4(), ...x };
+        }) || [];
+
+        if (newLogs.length > 0) {
+            contentLogs = [...newLogs, ...contentLogs];
+        }
+    }
+
+    async function getChatStateLogs() {
+        if (!stateLogFilter.startTime) return;
+
+        const pagedStateLogs = await getStateLogs(conversationId, stateLogFilter);
+        stateLogFilter = {
+            ...stateLogFilter,
+            startTime: pagedStateLogs.nextTime || null
+        };
+        const newLogs = pagedStateLogs.items?.map(x => {
+            return { uid: uuidv4(), ...x };
+        }) || [];
+
+        if (newLogs.length > 0) {
+            convStateLogs = [...newLogs, ...convStateLogs];
+            lastestStateLog = convStateLogs.slice(-1)[0];
+        }
+    }
 
     function cleanLogs() {
         contentLogs = [];
@@ -141,15 +210,15 @@
 
         <div class="content-log-scrollbar log-list padding-side log-body" class:hide={selectedTab !== contentLogTab}>
             <ul>
-                {#each contentLogs as log}
+                {#each contentLogs as log (log.uid)}
                     <ContentLogElement data={log} />
                 {/each}
             </ul>
         </div>
 
         <div class="conv-state-log-scrollbar log-list padding-side log-body" class:hide={selectedTab !== conversationStateLogTab}>
             <ul>
-                {#each convStateLogs as log}
+                {#each convStateLogs as log (log.uid)}
                     <ConversationStateLogElement data={log} />
                 {/each}
             </ul>