Merge pull request #260 from iceljc/features/refine-chat-window

refine message style

Author: iceljc

src/lib/common/Markdown.svelte

@@ -8,6 +8,9 @@
 	/** @type {string} */
 	export let containerClasses = "";
 
+	/** @type {string} */
+	export let containerStyles = "";
+
 	/** @type {boolean} */
 	export let rawText = false;
 
@@ -23,6 +26,6 @@
 	}
 </script>
 
-<div class={`markdown-container ${containerClasses || 'text-white'}`}>
+<div class={`markdown-container markdown-lite ${containerClasses || 'text-white'}`} style={`${containerStyles}`}>
 	{@html displayText}
 </div>

src/lib/scss/custom/common/_common.scss

@@ -216,7 +216,6 @@ button:focus {
 
     th, td {
       padding: 3px 5px !important;
-      border: 1px solid white;
     }
   }
 
@@ -225,11 +224,31 @@ button:focus {
     margin-bottom: 0 !important;
   }
 
+  ul {
+    list-style-position: inside !important;
+  }
+}
+
+.markdown-lite {
+  table {
+    th, td {
+      border: 1px solid white;
+    }
+  }
+
   a {
     color: white;
   }
+}
 
-  ul {
-    list-style-position: inside !important;
+.markdown-dark {
+  table {
+    th, td {
+      border: 1px solid $primary;
+    }
+  }
+
+  a {
+    color: $primary;
   }
 }

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

@@ -224,6 +224,10 @@
             display: flex;
             flex-direction: column;
             width: 80%;
+
+            .bot-msg {
+                background-color: var(--#{$prefix}light) !important;
+            }
         }
 
         .ctext-wrap {

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

@@ -1060,7 +1060,7 @@
 	/** @param {string} messageId */
 	function highlightChatMessage(messageId) {
 		const targets = document.querySelectorAll('.user-msg');
-		const style = ['bg-danger', 'text-white'];
+		const style = ['bg-danger'];
 		targets.forEach(elm => {
 			if (elm.id === `user-msg-${messageId}`) {
 				elm.classList.add(...style);
@@ -1590,11 +1590,12 @@
 														on:keydown={() => {}}
 														on:click={() => directToLog(message.message_id)}
 													>
-														<div class="ctext-wrap user-msg" 
+														<div
+															class="ctext-wrap user-msg bg-primary" 
 															class:clickable={!isLite && isLoadPersistLog}
 															id={`user-msg-${message.message_id}`}
 														>
-															<div class="text-start fw-bold">{@html replaceNewLine(message.text)}</div>
+															<div class="text-start fw-bold text-white">{@html replaceNewLine(message.text)}</div>
 														</div>
 														<p class="chat-time mb-0 float-end">
 															<i class="bx bx-time-five align-middle me-1" />
@@ -1633,7 +1634,7 @@
 													{/if}
 												</div>
 												<div class="msg-container">
-													<RcMessage message={message} />
+													<RcMessage containerClasses={'bot-msg'} markdownClasses={'markdown-dark text-dark'} message={message} />
 													{#if message?.message_id === lastBotMsg?.message_id && message?.uuid === lastBotMsg?.uuid}
 														<div style="display: flex; gap: 10px;">
 															{#if PUBLIC_LIVECHAT_SPEAKER_ENABLED === 'true'}

src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte

@@ -3,10 +3,22 @@
 
     /** @type {any} */
     export let message;
+
+    /** @type {string} */
+    export let containerClasses = '';
+
+    /** @type {string} */
+    export let containerStyles = '';
+
+    /** @type {string} */
+    export let markdownClasses = '';
 </script>
 
-<div class="ctext-wrap bg-primary">
+<div
+    class={`ctext-wrap bg-primary ${containerClasses}`}
+    style={`${containerStyles}`}
+>
 	<div class="flex-shrink-0 align-self-center">
-        <Markdown text={message?.rich_content?.message?.text || message?.text} rawText />
+        <Markdown containerClasses={markdownClasses} text={message?.rich_content?.message?.text || message?.text} rawText />
     </div>
 </div>