From 38db6711a2a072ac36e042fc1c975f77ab7b1308 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 8 Oct 2024 11:22:24 -0500
Subject: [PATCH] refine mark down style

---
 src/lib/common/Markdown.svelte                      |  4 ++--
 src/lib/scss/custom/common/_common.scss             |  4 ++--
 src/lib/scss/custom/pages/_chat.scss                |  4 ++--
 .../persist-log/content-log-element.svelte          | 13 +++++++++----
 .../[conversationId]/rich-content/rc-message.svelte |  2 +-
 .../[conversationId]/conv-dialog-element.svelte     |  2 +-
 6 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/lib/common/Markdown.svelte b/src/lib/common/Markdown.svelte
index 4fbc336a..6240cd78 100644
--- a/src/lib/common/Markdown.svelte
+++ b/src/lib/common/Markdown.svelte
@@ -9,11 +9,11 @@
 	export let containerClasses = "";
 
 	/** @type {boolean} */
-	export let replaceText = false;
+	export let rawText = false;
 
     let displayText = '';
 	$: {
-		const markedText = replaceNewLine(marked(replaceText ? replaceMarkdown(text || '') : text || '')?.toString());
+		const markedText = !rawText ? replaceNewLine(marked(replaceMarkdown(text || ''))?.toString()) : marked(text || '')?.toString();
 		if (!!markedText && markedText.endsWith('<br>')) {
 			const idx = markedText.lastIndexOf('<br>');
 			displayText = markedText.substring(0, idx);
diff --git a/src/lib/scss/custom/common/_common.scss b/src/lib/scss/custom/common/_common.scss
index 83337cc1..a593d41f 100644
--- a/src/lib/scss/custom/common/_common.scss
+++ b/src/lib/scss/custom/common/_common.scss
@@ -183,8 +183,8 @@ button:focus {
   }
   
   p {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
+    margin-top: 1em !important;
+    margin-bottom: 1em !important;
   }
 
   a {
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index ca3d5382..a18cc578 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -218,8 +218,8 @@
             }
 
             span p {
-                margin-top: 0px !important;
-                margin-bottom: 0px !important;
+                margin-top: 1em !important;
+                margin-bottom: 1em !important;
             }
 
             .chat-indication {
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
index 6d97e1d3..0409023f 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
@@ -13,13 +13,18 @@
     let logTextStyle = '';
     let is_collapsed = true;
     const unknownAgent = "Uknown";
-    const includedSources = [
+    const collapsedSources = [
         ContentLogSource.Prompt,
         ContentLogSource.AgentResponse,
         ContentLogSource.FunctionCall,
         ContentLogSource.Notification
     ];
 
+    const rawTextSources = [
+        ContentLogSource.AgentResponse,
+        ContentLogSource.FunctionCall,
+    ];
+
     $: {
         if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
             logDisplayStyle = 'border border-secondary';
@@ -63,11 +68,11 @@
         class={`rounded log-content ${logDisplayStyle}`}
         style="padding: 5px 8px;"
     >
-        <div class:log-collapse={includedSources.includes(data.source) && !!is_collapsed}>
-            <Markdown containerClasses={logTextStyle} text={data?.content} replaceText />
+        <div class:log-collapse={collapsedSources.includes(data.source) && !!is_collapsed}>
+            <Markdown containerClasses={logTextStyle} text={data?.content} rawText={rawTextSources.includes(data.source)} />
         </div>
 
-        {#if includedSources.includes(data.source)}
+        {#if collapsedSources.includes(data.source)}
             <Button class='toggle-btn btn-sm' color="link" on:click={(e) => toggleText(e)}>
                 {`${is_collapsed ? 'More +' : 'Less -'}`}
             </Button>
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
index 05289ecc..33e5c475 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
@@ -7,6 +7,6 @@
 
 <div class="ctext-wrap bg-primary">
 	<div class="flex-shrink-0 align-self-center">
-        <Markdown text={message?.rich_content?.message?.text || message?.text} />
+        <Markdown text={message?.rich_content?.message?.text || message?.text} rawText />
     </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
index b84d1441..0f19de35 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
@@ -21,7 +21,7 @@
   <Markdown
     containerClasses={'dialog-item-text'}
     text={dialog?.rich_content?.message?.text || dialog?.text}
-    replaceText
+    rawText
   />
 </div>