Merge branch 'main' of https://github.com/SciSharp/BotSharp-UI

Author: Daishaojie111

src/lib/common/errors/error-500.svelte

@@ -18,7 +18,7 @@
 			</h1>
 			<h4 class="text-uppercase">Internal Server Error</h4>
 			<div class="mt-5 text-center">
-			  <Link class="btn btn-primary" href="/dashboard">
+			  <Link class="btn btn-primary" href="page/dashboard">
 				Back to Dashboard
 			  </Link>
 			</div>

src/lib/helpers/enums.js

@@ -1,19 +1,18 @@
 const userRole = {
     System: "system",
+    Admin: "admin",
     User: "user",
     Client: "client",
     Function: "function",
     Assistant: "assistant"
 };
-
 export const UserRole = Object.freeze(userRole);
 
 const senderAction = {
     TypingOn: 1,
     TypingOff: 2,
     MarkSeen: 3
 }
-
 export const SenderAction = Object.freeze(senderAction);
 
 const richType = {
@@ -22,5 +21,13 @@ const richType = {
     Button: 'button_template',
     MultiSelect: 'multi-select_template'
 }
+export const RichType = Object.freeze(richType);
 
-export const RichType = Object.freeze(richType);
+const contentLogSource = {
+    UserInput: "user input",
+    Prompt: "prompt",
+    FunctionCall: "function call",
+    AgentResponse: "agent response",
+    HardRule: "hard rule"
+};
+export const ContentLogSource = Object.freeze(contentLogSource);

src/lib/helpers/types.js

@@ -264,6 +264,7 @@ IRichContent.prototype.text;
  * @property {string} conversation_id - The conversation id.
  * @property {string} name - The sender name.
  * @property {string} role - The sender role.
+ * @property {string} source - The log source.
  * @property {string} content - The log content.
  * @property {Date} created_at - The log sent time.
  */

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

@@ -277,6 +277,7 @@
 
 .chat-input-section {
     border-top: 1px solid var(--#{$prefix}border-color);
+    padding: 2vmin 2% 2vmin 2%;
 }
 
 .chat-input {
@@ -311,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 {
@@ -323,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/(authentication)/recoverpw/+page.svelte

@@ -27,7 +27,7 @@
 					</div>
 					<CardBody class="pt-0">
 						<div>
-							<Link href="/dashboard">
+							<Link href="page/dashboard">
 								<div class="avatar-md profile-user-wid mb-4">
 									<span class="avatar-title rounded-circle bg-light">
 										<img src={PUBLIC_LOGO_URL} alt="" class="rounded-circle" height="34" />
@@ -41,7 +41,7 @@
 								Enter your Email and instructions will be sent to you!
 							</Alert>
 
-							<Form class="form-horizontal" action="/dashboard">
+							<Form class="form-horizontal" action="page/dashboard">
 								<div class="mb-3">
 									<Label for="useremail" class="form-label">Email</Label>
 									<Input

src/routes/(authentication)/register/+page.svelte

@@ -76,7 +76,7 @@
 					</div>
 					<CardBody class="pt-0">
 						<div>
-							<Link href="/dashboard">
+							<Link href="page/dashboard">
 								<div class="avatar-md profile-user-wid mb-4">
 									<span class="avatar-title rounded-circle bg-light">
 										<img src={PUBLIC_LOGO_URL} alt="" class="rounded-circle" height="34" />

src/routes/VerticalLayout/Header.svelte

@@ -49,7 +49,7 @@
 		<div class="d-flex">
 			<!-- LOGO -->
 			<div class="navbar-brand-box">
-				<a href="/dashboard" class="logo logo-dark">
+				<a href="page/dashboard" class="logo logo-dark">
 					<span class="logo-sm">
 						<img src={PUBLIC_LOGO_URL} alt="" height="25" />
 					</span>
@@ -58,7 +58,7 @@
 					</span>
 				</a>
 
-				<a href="/dashboard" class="logo logo-light">
+				<a href="page/dashboard" class="logo logo-light">
 					<span class="logo-sm">
 						<img src={PUBLIC_LOGO_URL} alt="" height="25" />
 					</span>

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}>
@@ -630,7 +645,7 @@
 						</div>
 					</div>
 		
-					<div class="chat-input-section" style="height: 8%; padding: 2%">
+					<div class="chat-input-section" style="height: 8%;">
 						<div class="row">
 							<div class="col-auto">
 								<button
@@ -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

@@ -2,23 +2,26 @@
 	import { Button } from '@sveltestrap/sveltestrap';
     import moment from 'moment';
     import { replaceNewLine } from '$lib/helpers/http';
-	import { UserRole } from '$lib/helpers/enums';
+	import { ContentLogSource } from '$lib/helpers/enums';
 
     /** @type {import('$types').ConversationContentLogModel} */
     export let data;
 
     let logBackground = '';
     let is_collapsed = true;
-    const excludedRoles = [
-        UserRole.User,
-        UserRole.Assistant
+    const includedSources = [
+        ContentLogSource.Prompt
     ];
 
     $: {
-        if (data.role == UserRole.Assistant) {
+        if (data.source === ContentLogSource.AgentResponse) {
             logBackground = 'bg-info';
-        } else if (data.role == UserRole.Function) {
+        } else if (data.source === ContentLogSource.FunctionCall) {
             logBackground = 'bg-secondary';
+        } else if (data.source === ContentLogSource.Prompt) {
+            logBackground = 'bg-danger';
+        } else if (data.source === ContentLogSource.HardRule) {
+            logBackground = "bg-warning";
         }
     }
 
@@ -34,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={!excludedRoles.includes(data.role) && !!is_collapsed}>
+    <div class="log-content" class:log-collapse={includedSources.includes(data.source) && !!is_collapsed}>
         {@html replaceNewLine(data?.content)}
     </div>
-    {#if !excludedRoles.includes(data.role)}
+    {#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">