Features/add conversation log

src/lib/helpers/types.js

@@ -260,19 +260,18 @@ IRichContent.prototype.text;
  */
 
 /**
- * @typedef {Object} ContentLogModel
+ * @typedef {Object} ConversationContentLogModel
  * @property {string} conversation_id - The conversation id.
  * @property {string} name - The sender name.
  * @property {string} role - The sender role.
  * @property {string} content - The log content.
  * @property {Date} created_at - The log sent time.
- * @property {boolean} is_collapsed - For UI display.
  */
 
 /**
  * @typedef {Object} ConversationStateLogModel
  * @property {string} conversation_id - The conversation id.
- * @property {string} states - The states content.
+ * @property {Object} states - The states content.
  * @property {Date} created_at - The states sent time.
  */
 
@@ -319,7 +318,7 @@ IRichContent.prototype.text;
  * Content log
  * 
  * @callback OnContentLogReceived
- * @param {ContentLogModel} log
+ * @param {ConversationContentLogModel} log
  */
 
 /** 

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

@@ -309,7 +309,7 @@
 
                     span {
                         color: white;
-                        font-size: 18px;
+                        font-size: 15px;
                     }
                 }
 

src/lib/services/api-endpoints.js

@@ -49,6 +49,8 @@ export const endpoints = {
 
     // logging
     loggingFullLogUrl: `${host}/logger/full-log`,
+    loggingContentLogUrl: `${host}/logger/conversation/{conversationId}/content-log`,
+    loggingStateLogUrl: `${host}/logger/conversation/{conversationId}/state-log`,
 
     // knowledge base
     knowledgeBaseUploadUrl: `${host}/knowledge-base/upload`,

src/lib/services/logging-service.js

@@ -1,3 +1,4 @@
+import { replaceUrl } from '$lib/helpers/http.js';
 import { endpoints } from './api-endpoints.js';
 import axios from 'axios';
 
@@ -18,4 +19,26 @@ export async function getFullLog() {
         link.click();
         link.remove();
     })
+}
+
+/**
+ * Get conversation content log
+ * @param {string} conversationId 
+ * @returns {Promise<import('$types').ConversationContentLogModel[]>}
+ */
+export async function GetContentLogs(conversationId) {
+    let url = replaceUrl(endpoints.loggingContentLogUrl, {conversationId: conversationId});
+    const response = await axios.get(url);
+    return response.data;
+}
+
+/**
+ * Get conversation state log
+ * @param {string} conversationId 
+ * @returns {Promise<import('$types').ConversationStateLogModel[]>}
+ */
+export async function GetStateLogs(conversationId) {
+    let url = replaceUrl(endpoints.loggingStateLogUrl, {conversationId: conversationId});
+    const response = await axios.get(url);
+    return response.data;
 }

src/lib/services/signalr-service.js

@@ -91,6 +91,7 @@ export const signalr = {
     connection.on('onConversateStatesGenerated', (data) => {
       const jsonData = JSON.parse(data);
       if (conversationId === jsonData?.conversation_id) {
+        console.log(data, jsonData);
         this.onConversationStatesGenerated(jsonData);
       }
     });

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

@@ -69,7 +69,7 @@
 	/** @type {{ [s: string]: any; }} */
 	let groupedDialogs = [];
 
-	/** @type {import('$types').ContentLogModel[]} */
+	/** @type {import('$types').ConversationContentLogModel[]} */
 	let contentLogs = [];
 
 	/** @type {import('$types').ConversationStateLogModel[]} */
@@ -79,7 +79,7 @@
 	let isLoadContentLog = false;
 	let isLoadStateLog = false;
 	let isOpenEditMsgModal = false;
-	let isOpenStateModal = false;
+	let isOpenAddStateModal = false;
 	let isSendingMsg = false;
 
 	onMount(async () => {
@@ -137,17 +137,16 @@
 		refresh();
     }
 
-	/** @param {import('$types').ContentLogModel} log */
+	/** @param {import('$types').ConversationContentLogModel} log */
 	function onContentLogGenerated(log) {
-		contentLogs.push({
-			...log,
-			is_collapsed: true
-		});
+		if (!isLoadContentLog) return;
+		contentLogs.push({ ...log });
 		contentLogs = contentLogs.map(x => { return { ...x }; });
 	}
 
 	/** @param {import('$types').ConversationStateLogModel} data */
 	function onConversationStatesGenerated(data) {
+		if (!isLoadStateLog) return;
 		stateLogs.push({ ...data });
 		stateLogs = stateLogs.map(x => { return { ...x }; });
 	}
@@ -248,6 +247,10 @@
 			return;
 		}
 
+		if (e.key === 'Enter') {
+			e.preventDefault();
+		}
+
 		prevSentMsgs = [...prevSentMsgs, text];
 		isSendingMsg = true;
 		sendMessageToHub(params.agentId, params.conversationId, text).then(() => {
@@ -281,14 +284,20 @@
 
 	function toggleContentLog() {
 		isLoadContentLog = !isLoadContentLog;
+		if (!isLoadContentLog) {
+			contentLogs = [];
+		}
     }
 
 	function toggleStateLog() {
 		isLoadStateLog = !isLoadStateLog;
+		if (!isLoadStateLog) {
+			stateLogs = [];
+		}
 	}
 
-	function toggleStateModal() {
-		isOpenStateModal = !isOpenStateModal;
+	function toggleAddStateModal() {
+		isOpenAddStateModal = !isOpenAddStateModal;
 	}
 
 	function clearStates() {
@@ -404,10 +413,10 @@
 
 <StateModal
 	className="custom-modal"
-	isOpen={isOpenStateModal}
-	toggleModal={toggleStateModal}
-	confirm={toggleStateModal}
-	cancel={toggleStateModal}
+	isOpen={isOpenAddStateModal}
+	toggleModal={toggleAddStateModal}
+	confirm={toggleAddStateModal}
+	cancel={toggleAddStateModal}
 />
 
 <HeadTitle title="Chat" addOn='' />
@@ -442,7 +451,7 @@
 												{#if !isLoadContentLog}
 												<DropdownItem on:click={() => toggleContentLog()}>View Log</DropdownItem>
 												{/if}
-												{#if !isLoadStateLog || !isOpenStateModal}
+												{#if !isLoadStateLog || !isOpenAddStateModal}
 												<li>
 													<Dropdown direction="right" class="state-menu">
 														<DropdownToggle caret class="dropdown-item">
@@ -452,8 +461,8 @@
 															{#if !isLoadStateLog}
 															<DropdownItem on:click={() => toggleStateLog()}>View States</DropdownItem>
 															{/if}
-															{#if !isOpenStateModal}
-															<DropdownItem on:click={() => toggleStateModal()}>Add States</DropdownItem>
+															{#if !isOpenAddStateModal}
+															<DropdownItem on:click={() => toggleAddStateModal()}>Add States</DropdownItem>
 															{/if}
 															<DropdownItem on:click={() => clearStates()}>Clear States</DropdownItem>
 														</DropdownMenu>
@@ -508,7 +517,7 @@
 											{:else}
 											<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
 											{/if}
-										</div>																
+										</div>
 										{/if}
 
 										{#if message.sender.id === currentUser.id}
@@ -564,7 +573,7 @@
 							</div>
 							<div class="col">
 								<div class="position-relative">
-									<textarea rows={1} maxlength={500} class="form-control chat-input" bind:value={text} on:keydown={e => onSendMessage(e)} placeholder="Enter Message..." />
+									<textarea rows={1} maxlength={500} class="form-control chat-input" bind:value={text} on:keydown={e => onSendMessage(e)} disabled={isSendingMsg} placeholder="Enter Message..." />
 									<div class="chat-input-links" id="tooltip-container">
 										<ul class="list-inline mb-0">
 											<li class="list-inline-item">
@@ -591,7 +600,7 @@
 		</Pane>
 		{#if isLoadContentLog}
 		<Pane size={30} minSize={20} maxSize={50}>
-			<ContentLog logs={contentLogs} closeWindow={toggleContentLog} />
+			<ContentLog contentLogs={contentLogs} closeWindow={toggleContentLog} />
 		</Pane>
 		{/if}
 	</Splitpanes>

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

@@ -4,13 +4,15 @@
     import { replaceNewLine } from '$lib/helpers/http';
 	import { UserRole } from '$lib/helpers/enums';
 
-    /** @type {import('$types').ContentLogModel} */
+    /** @type {import('$types').ConversationContentLogModel} */
     export let data;
 
+    let is_collapsed = true;
+
      /** @param {any} e */
     function toggleText(e) {
         e.preventDefault();
-        data.is_collapsed = !data.is_collapsed;
+        is_collapsed = !is_collapsed;
     }
 </script>
 
@@ -19,12 +21,12 @@
         <b>{`[${data?.name?.length > 0 ? data?.name + ' ' : ''}${moment.utc(data?.created_at).local().format('hh:mm:ss.SSS A, MMM DD YYYY')}]`}</b>
     </div>
     <br>
-    <div class="log-content" class:log-collapse={!!data?.is_collapsed}>
+    <div class="log-content" class:log-collapse={!!is_collapsed}>
         {@html replaceNewLine(data?.content)}
     </div>
     {#if data.role != UserRole.User}
     <Button class='toggle-btn' color="link" on:click={(e) => toggleText(e)}>
-        {`${!!data?.is_collapsed ? 'More +' : 'Less -'}`}
+        {`${is_collapsed ? 'More +' : 'Less -'}`}
     </Button>
     {/if}
 </div>

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

@@ -1,17 +1,23 @@
 <script>
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import { afterUpdate, onMount, tick } from 'svelte';
+	import { afterUpdate, onDestroy, onMount, tick } from 'svelte';
 	import ContentLogElement from './content-log-element.svelte';
+	import { page } from '$app/stores';
+	import { GetContentLogs } from '$lib/services/logging-service';
 
-    /** @type {import('$types').ContentLogModel[]} */
-    export let logs = [];
+    /** @type {import('$types').ConversationContentLogModel[]} */
+    export let contentLogs = [];
 
     /** @type {() => void} */
     export let closeWindow;
 
     // @ts-ignore
     let scrollbar;
+    /** @type {import('$types').ConversationContentLogModel[]} */
+    let initLogs = [];
+
+    $: allLogs = [...initLogs, ...contentLogs];
 
     const options = {
 		scrollbars: {
@@ -26,24 +32,27 @@
 	};
 
     onMount(async () => {
+        const conversationId = $page.params.conversationId;
+        initLogs = await GetContentLogs(conversationId);
+
 		const scrollElements = document.querySelectorAll('.content-log-scrollbar');
 		scrollElements.forEach((item) => {
 			scrollbar = OverlayScrollbars(item, options);
 		});
 
-		refreshLog();
+		refresh();
 	});
 
     afterUpdate(() => {
-        refreshLog();
+        refresh();
     });
 
+    onDestroy(() => {
+        initLogs = [];
+        contentLogs = [];
+    });
 
-    async function refreshLog() {
-        // trigger UI render
-        logs = logs || [];
-        await tick();
-
+    async function refresh() {
         setTimeout(() => {
             const { viewport } = scrollbar.elements();
             viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
@@ -64,7 +73,7 @@
         </div>
         <div class="content-log-scrollbar log-list padding-side">
             <ul>
-                {#each logs as log}
+                {#each allLogs as log}
                     <ContentLogElement data={log} />
                 {/each}
             </ul>

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

@@ -4,6 +4,8 @@
 
     /** @type {any} */
     export let data;
+
+    $: stateObj = JSON.parse(JSON.stringify(data?.states || {}));
 </script>
 
 <div class="log-element">
@@ -12,6 +14,6 @@
     </div>
     <br>
     <div class="log-content">
-        <JSONTree value={JSON.parse(data?.states)} />
+        <JSONTree value={stateObj} />
     </div>
 </div>