From 715ac7ecf9b37d54a1653bb58ed55a338f099ec8 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Thu, 15 Feb 2024 13:59:31 -0600
Subject: [PATCH 1/5] add content log and state log api

---
 src/lib/helpers/types.js                      |  7 +++---
 src/lib/scss/custom/pages/_chat.scss          |  2 +-
 src/lib/services/api-endpoints.js             |  2 ++
 src/lib/services/logging-service.js           | 23 +++++++++++++++++++
 src/lib/services/signalr-service.js           |  1 +
 .../[conversationId]/chat-box.svelte          | 15 +++++-------
 .../content-log-element.svelte                | 10 ++++----
 .../[conversationId]/content-log.svelte       | 22 ++++++++++++++----
 .../[conversationId]/state-log-element.svelte |  4 +++-
 .../[conversationId]/state-log.svelte         | 16 +++++++++++--
 10 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
index 196ce381..853d0e9d 100644
--- a/src/lib/helpers/types.js
+++ b/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
  */
 
 /** 
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index 98e20381..b71614d2 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -309,7 +309,7 @@
 
                     span {
                         color: white;
-                        font-size: 18px;
+                        font-size: 15px;
                     }
                 }
 
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index da983635..61423724 100644
--- a/src/lib/services/api-endpoints.js
+++ b/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`,
diff --git a/src/lib/services/logging-service.js b/src/lib/services/logging-service.js
index 50c7ee08..7d2855ee 100644
--- a/src/lib/services/logging-service.js
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/lib/services/signalr-service.js b/src/lib/services/signalr-service.js
index 38ba245a..8962a653 100644
--- a/src/lib/services/signalr-service.js
+++ b/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);
       }
     });
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index c918c380..3c69b6b6 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/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[]} */
@@ -77,7 +77,7 @@
 
 	/** @type {boolean} */
 	let isLoadContentLog = false;
-	let isLoadStateLog = false;
+	let isLoadStateLog = true;
 	let isOpenEditMsgModal = false;
 	let isOpenStateModal = false;
 	let isSendingMsg = false;
@@ -137,12 +137,9 @@
 		refresh();
     }
 
-	/** @param {import('$types').ContentLogModel} log */
+	/** @param {import('$types').ConversationContentLogModel} log */
 	function onContentLogGenerated(log) {
-		contentLogs.push({
-			...log,
-			is_collapsed: true
-		});
+		contentLogs.push({ ...log });
 		contentLogs = contentLogs.map(x => { return { ...x }; });
 	}
 
@@ -508,7 +505,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}
@@ -591,7 +588,7 @@
 		</Pane>
 		{#if isLoadContentLog}
 		<Pane size={30} minSize={20} maxSize={50}>
-			<ContentLog logs={contentLogs} closeWindow={toggleContentLog} />
+			<ContentLog contentlogs={contentLogs} closeWindow={toggleContentLog} />
 		</Pane>
 		{/if}
 	</Splitpanes>
diff --git a/src/routes/chat/[agentId]/[conversationId]/content-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/content-log-element.svelte
index 165866e7..955c0624 100644
--- a/src/routes/chat/[agentId]/[conversationId]/content-log-element.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
index 438045df..9e1d3c9c 100644
--- a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
@@ -1,17 +1,21 @@
 <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 = [];
 
     const options = {
 		scrollbars: {
@@ -26,6 +30,10 @@
 	};
 
     onMount(async () => {
+        const conversationId = $page.params.conversationId;
+        initLogs = await GetContentLogs(conversationId);
+        contentlogs = [...initLogs, ...contentlogs];
+
 		const scrollElements = document.querySelectorAll('.content-log-scrollbar');
 		scrollElements.forEach((item) => {
 			scrollbar = OverlayScrollbars(item, options);
@@ -38,10 +46,14 @@
         refreshLog();
     });
 
+    onDestroy(() => {
+        initLogs = [];
+        contentlogs = [];
+    });
 
     async function refreshLog() {
         // trigger UI render
-        logs = logs || [];
+        contentlogs = [...initLogs, ...contentlogs];
         await tick();
 
         setTimeout(() => {
@@ -64,7 +76,7 @@
         </div>
         <div class="content-log-scrollbar log-list padding-side">
             <ul>
-                {#each logs as log}
+                {#each contentlogs as log}
                     <ContentLogElement data={log} />
                 {/each}
             </ul>
diff --git a/src/routes/chat/[agentId]/[conversationId]/state-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/state-log-element.svelte
index b736ab90..6abc8865 100644
--- a/src/routes/chat/[agentId]/[conversationId]/state-log-element.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/state-log.svelte b/src/routes/chat/[agentId]/[conversationId]/state-log.svelte
index e825638d..580325ea 100644
--- a/src/routes/chat/[agentId]/[conversationId]/state-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/state-log.svelte
@@ -1,8 +1,10 @@
 <script>
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import { afterUpdate, onMount, tick } from 'svelte';
+	import { afterUpdate, onDestroy, onMount, tick } from 'svelte';
 	import StateLogElement from './state-log-element.svelte';
+	import { page } from '$app/stores';
+	import { GetStateLogs } from '$lib/services/logging-service';
 
     /** @type {any[]} */
     export let stateLogs = [];
@@ -12,6 +14,8 @@
 
     // @ts-ignore
     let scrollbar;
+    /** @type {any[]} */
+    let initLogs = [];
 
     const options = {
 		scrollbars: {
@@ -26,6 +30,10 @@
 	};
 
     onMount(async () => {
+        const conversationId = $page.params.conversationId;
+        initLogs = await GetStateLogs(conversationId);
+        stateLogs = [...initLogs, ...stateLogs];
+        
 		const scrollElements = document.querySelectorAll('.state-log-scrollbar');
 		scrollElements.forEach((item) => {
 			scrollbar = OverlayScrollbars(item, options);
@@ -38,10 +46,14 @@
         refreshLog();
     });
 
+    onDestroy(() => {
+        initLogs = [];
+        stateLogs = [];
+    });
 
     async function refreshLog() {
         // trigger UI render
-        stateLogs = stateLogs || [];
+        stateLogs = [...initLogs, ...stateLogs];
         await tick();
 
         setTimeout(() => {

From 9c0494ddfb9cf6f06798b1dd00820674394200fa Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Thu, 15 Feb 2024 14:20:10 -0600
Subject: [PATCH 2/5] fix duplicate load

---
 .../[conversationId]/chat-box.svelte          | 12 ++++++++++--
 .../[conversationId]/content-log.svelte       | 19 ++++++++-----------
 .../[conversationId]/state-log.svelte         | 19 ++++++++-----------
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 3c69b6b6..d153c6c5 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -77,7 +77,7 @@
 
 	/** @type {boolean} */
 	let isLoadContentLog = false;
-	let isLoadStateLog = true;
+	let isLoadStateLog = false;
 	let isOpenEditMsgModal = false;
 	let isOpenStateModal = false;
 	let isSendingMsg = false;
@@ -139,12 +139,14 @@
 
 	/** @param {import('$types').ConversationContentLogModel} log */
 	function onContentLogGenerated(log) {
+		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 }; });
 	}
@@ -278,10 +280,16 @@
 
 	function toggleContentLog() {
 		isLoadContentLog = !isLoadContentLog;
+		if (!isLoadContentLog) {
+			contentLogs = [];
+		}
     }
 
 	function toggleStateLog() {
 		isLoadStateLog = !isLoadStateLog;
+		if (!isLoadStateLog) {
+			stateLogs = [];
+		}
 	}
 
 	function toggleStateModal() {
@@ -588,7 +596,7 @@
 		</Pane>
 		{#if isLoadContentLog}
 		<Pane size={30} minSize={20} maxSize={50}>
-			<ContentLog contentlogs={contentLogs} closeWindow={toggleContentLog} />
+			<ContentLog contentLogs={contentLogs} closeWindow={toggleContentLog} />
 		</Pane>
 		{/if}
 	</Splitpanes>
diff --git a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
index 9e1d3c9c..e5f8aaf3 100644
--- a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
@@ -7,7 +7,7 @@
 	import { GetContentLogs } from '$lib/services/logging-service';
 
     /** @type {import('$types').ConversationContentLogModel[]} */
-    export let contentlogs = [];
+    export let contentLogs = [];
 
     /** @type {() => void} */
     export let closeWindow;
@@ -17,6 +17,8 @@
     /** @type {import('$types').ConversationContentLogModel[]} */
     let initLogs = [];
 
+    $: allLogs = [...initLogs, ...contentLogs];
+
     const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -32,30 +34,25 @@
     onMount(async () => {
         const conversationId = $page.params.conversationId;
         initLogs = await GetContentLogs(conversationId);
-        contentlogs = [...initLogs, ...contentlogs];
 
 		const scrollElements = document.querySelectorAll('.content-log-scrollbar');
 		scrollElements.forEach((item) => {
 			scrollbar = OverlayScrollbars(item, options);
 		});
 
-		refreshLog();
+		refresh();
 	});
 
     afterUpdate(() => {
-        refreshLog();
+        refresh();
     });
 
     onDestroy(() => {
         initLogs = [];
-        contentlogs = [];
+        contentLogs = [];
     });
 
-    async function refreshLog() {
-        // trigger UI render
-        contentlogs = [...initLogs, ...contentlogs];
-        await tick();
-
+    async function refresh() {
         setTimeout(() => {
             const { viewport } = scrollbar.elements();
             viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
@@ -76,7 +73,7 @@
         </div>
         <div class="content-log-scrollbar log-list padding-side">
             <ul>
-                {#each contentlogs as log}
+                {#each allLogs as log}
                     <ContentLogElement data={log} />
                 {/each}
             </ul>
diff --git a/src/routes/chat/[agentId]/[conversationId]/state-log.svelte b/src/routes/chat/[agentId]/[conversationId]/state-log.svelte
index 580325ea..af3490cd 100644
--- a/src/routes/chat/[agentId]/[conversationId]/state-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/state-log.svelte
@@ -1,7 +1,7 @@
 <script>
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import { afterUpdate, onDestroy, onMount, tick } from 'svelte';
+	import { afterUpdate, onDestroy, onMount } from 'svelte';
 	import StateLogElement from './state-log-element.svelte';
 	import { page } from '$app/stores';
 	import { GetStateLogs } from '$lib/services/logging-service';
@@ -17,6 +17,8 @@
     /** @type {any[]} */
     let initLogs = [];
 
+    $: allLogs = [...initLogs, ...stateLogs];
+
     const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -32,18 +34,17 @@
     onMount(async () => {
         const conversationId = $page.params.conversationId;
         initLogs = await GetStateLogs(conversationId);
-        stateLogs = [...initLogs, ...stateLogs];
         
 		const scrollElements = document.querySelectorAll('.state-log-scrollbar');
 		scrollElements.forEach((item) => {
 			scrollbar = OverlayScrollbars(item, options);
 		});
 
-		refreshLog();
+		refresh();
 	});
 
     afterUpdate(() => {
-        refreshLog();
+        refresh();
     });
 
     onDestroy(() => {
@@ -51,11 +52,7 @@
         stateLogs = [];
     });
 
-    async function refreshLog() {
-        // trigger UI render
-        stateLogs = [...initLogs, ...stateLogs];
-        await tick();
-
+    function refresh() {
         setTimeout(() => {
             const { viewport } = scrollbar.elements();
             viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
@@ -75,8 +72,8 @@
         </div>
         <div class="state-log-scrollbar log-list padding-side">
             <ul>
-                {#each stateLogs as state}
-                    <StateLogElement data={state} />
+                {#each allLogs as log}
+                    <StateLogElement data={log} />
                 {/each}
             </ul>
         </div>

From 1c1ee56b2c224eac402ef4ffad570e8742a6c54d Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Thu, 15 Feb 2024 14:35:21 -0600
Subject: [PATCH 3/5] minor change

---
 src/routes/chat/[agentId]/[conversationId]/chat-box.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index d153c6c5..6bc7d5ca 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -247,6 +247,10 @@
 			return;
 		}
 
+		if (e.key === 'Enter') {
+			e.preventDefault();
+		}
+
 		prevSentMsgs = [...prevSentMsgs, text];
 		isSendingMsg = true;
 		sendMessageToHub(params.agentId, params.conversationId, text).then(() => {
@@ -569,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">

From f5194a3e1987ffefe0d549544c3e625c399c02bf Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Thu, 15 Feb 2024 14:36:58 -0600
Subject: [PATCH 4/5] fix naming

---
 .../[agentId]/[conversationId]/chat-box.svelte     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 6bc7d5ca..9012332e 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -79,7 +79,7 @@
 	let isLoadContentLog = false;
 	let isLoadStateLog = false;
 	let isOpenEditMsgModal = false;
-	let isOpenStateModal = false;
+	let isOpenAddStateModal = false;
 	let isSendingMsg = false;
 	
 	onMount(async () => {
@@ -296,8 +296,8 @@
 		}
 	}
 
-	function toggleStateModal() {
-		isOpenStateModal = !isOpenStateModal;
+	function toggleAddStateModal() {
+		isOpenAddStateModal = !isOpenAddStateModal;
 	}
 
 	function clearStates() {
@@ -413,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='' />

From 9ba15ac49f5e840b39161475e290caf060eee81d Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Thu, 15 Feb 2024 14:42:34 -0600
Subject: [PATCH 5/5] fix typo

---
 src/routes/chat/[agentId]/[conversationId]/chat-box.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 9012332e..692e8051 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -451,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">
@@ -461,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>