add clear screen btn

Author: Jicheng Lu

src/lib/helpers/enums.js

@@ -27,6 +27,7 @@ const contentLogSource = {
     UserInput: "user input",
     Prompt: "prompt",
     FunctionCall: "function call",
-    AgentResponse: "agent response"
+    AgentResponse: "agent response",
+    HardRule: "hard rule"
 };
 export const ContentLogSource = Object.freeze(contentLogSource);

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

@@ -312,8 +312,13 @@
     height: 100vh;
 
     .padding-side {
-        padding-left: 10px;
+        padding-left: 20px;
         padding-right: 20px;
+
+        ul {
+            padding-left: 2px !important;
+            padding-right: 0px !important;
+        }
     }
 
     .log-background {
@@ -324,7 +329,8 @@
             margin-bottom: 10px;
             position: sticky;
             display: flex;
-            justify-content: flex-end;
+            // justify-content: flex-end;
+            justify-content: space-between;
         }
 
         .log-list {

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

@@ -332,13 +332,21 @@
 		}
     }
 
+	function cleanContentLogScreen() {
+		contentLogs = [];
+	}
+
 	function toggleStateLog() {
 		isLoadStateLog = !isLoadStateLog;
 		if (!isLoadStateLog) {
 			stateLogs = [];
 		}
 	}
 
+	function cleanStateLogScreen() {
+		stateLogs = [];
+	}
+
 	function toggleAddStateModal() {
 		isOpenAddStateModal = !isOpenAddStateModal;
 	}
@@ -427,8 +435,15 @@
 	async function confirmEditMsg() {
 		const isDeleted = truncateDialogs(truncateMsgId);
 		if (!isDeleted) return;
-		toggleEditMsgModal();
-		await sendMessageToHub(params.agentId, params.conversationId, editText, truncateMsgId);
+		
+		isSendingMsg = true;
+		sendMessageToHub(params.agentId, params.conversationId, editText, truncateMsgId).then(() => {
+			isSendingMsg = false;
+			toggleEditMsgModal();
+		}).catch(() => {
+			isSendingMsg = false;
+			toggleEditMsgModal();
+		});
 	}
 
 	/** @param {string} messageId */
@@ -467,7 +482,7 @@
 	<Splitpanes>
 		{#if isLoadStateLog}
 		<Pane size={30} minSize={20} maxSize={50} >
-			<StateLog stateLogs={stateLogs} closeWindow={toggleStateLog} />
+			<StateLog stateLogs={stateLogs} closeWindow={toggleStateLog} cleanScreen={cleanStateLogScreen} />
 		</Pane>
 		{/if}
 		<Pane minSize={20}>
@@ -669,7 +684,7 @@
 		</Pane>
 		{#if isLoadContentLog}
 		<Pane size={30} minSize={20} maxSize={50}>
-			<ContentLog contentLogs={contentLogs} closeWindow={toggleContentLog} />
+			<ContentLog contentLogs={contentLogs} closeWindow={toggleContentLog} cleanScreen={cleanContentLogScreen} />
 		</Pane>
 		{/if}
 	</Splitpanes>

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

@@ -9,10 +9,8 @@
 
     let logBackground = '';
     let is_collapsed = true;
-    const excludedSources = [
-        ContentLogSource.UserInput,
-        ContentLogSource.FunctionCall,
-        ContentLogSource.AgentResponse
+    const includedSources = [
+        ContentLogSource.Prompt
     ];
 
     $: {
@@ -22,6 +20,8 @@
             logBackground = 'bg-secondary';
         } else if (data.source === ContentLogSource.Prompt) {
             logBackground = 'bg-danger';
+        } else if (data.source === ContentLogSource.HardRule) {
+            logBackground = "bg-warning";
         }
     }
 
@@ -37,10 +37,10 @@
         <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={!excludedSources.includes(data.source) && !!is_collapsed}>
+    <div class="log-content" class:log-collapse={includedSources.includes(data.source) && !!is_collapsed}>
         {@html replaceNewLine(data?.content)}
     </div>
-    {#if !excludedSources.includes(data.source)}
+    {#if includedSources.includes(data.source)}
     <Button class='toggle-btn' color="link" on:click={(e) => toggleText(e)}>
         {`${is_collapsed ? 'More +' : 'Less -'}`}
     </Button>

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

@@ -12,6 +12,9 @@
     /** @type {() => void} */
     export let closeWindow;
 
+    /** @type {() => void} */
+    export let cleanScreen;
+
     // @ts-ignore
     let scrollbar;
     /** @type {import('$types').ConversationContentLogModel[]} */
@@ -63,12 +66,20 @@
 
 <div class="chat-log">
     <div class="card mb-0 log-background" style="height: 100%;">
-        <div class="log-close-btn padding-side ">
+        <div class="log-close-btn padding-side">
+            <button
+                type="button"
+                class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                on:click={() => cleanScreen()}
+            >
+                <i class="bx bx-trash"></i>
+            </button>
             <button
                 type="button"
                 class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
                 on:click={() => closeWindow()}
-            ><i class="mdi mdi-window-close"></i>
+            >
+                <i class="mdi mdi-window-close"></i>
             </button>
         </div>
         <div class="content-log-scrollbar log-list padding-side">

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

@@ -12,6 +12,9 @@
     /** @type {() => void} */
     export let closeWindow;
 
+    /** @type {() => void} */
+    export let cleanScreen;
+
     // @ts-ignore
     let scrollbar;
     /** @type {any[]} */
@@ -62,12 +65,20 @@
 
 <div class="chat-log">
     <div class="card mb-0 log-background" style="height: 100%;">
-        <div class="log-close-btn padding-side ">
+        <div class="log-close-btn padding-side">
             <button
                 type="button"
                 class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
                 on:click={() => closeWindow()}
-            ><i class="mdi mdi-window-close"></i>
+            >
+                <i class="mdi mdi-window-close"></i>
+            </button>
+            <button
+                type="button"
+                class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                on:click={() => cleanScreen()}
+            >
+                <i class="bx bx-trash"></i>
             </button>
         </div>
         <div class="state-log-scrollbar log-list padding-side">