refine mark down style

Author: Jicheng Lu

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);

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 {

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 {

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>

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>

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>