From 02b4c13b7f98944eac2a2e56690d6ad8bdb8c539 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 7 Nov 2024 13:41:14 -0600
Subject: [PATCH 1/2] refine markdown

---
 package-lock.json                             | 29 ++++++++++
 package.json                                  |  1 +
 src/lib/common/Markdown.svelte                | 31 ----------
 src/lib/common/markdown/CodeBlock.svelte      | 57 +++++++++++++++++++
 src/lib/common/markdown/Markdown.svelte       | 35 ++++++++++++
 src/lib/scss/app.scss                         |  1 +
 src/lib/scss/custom/common/_common.scss       | 13 -----
 src/lib/scss/custom/components/_markdown.scss | 20 +++++++
 src/lib/scss/custom/pages/_conversation.scss  |  1 +
 .../persist-log/content-log-element.svelte    |  2 +-
 .../rich-content/rc-message.svelte            |  2 +-
 .../rich-content/rich-content.svelte          |  1 -
 .../conv-dialog-element.svelte                |  2 +-
 13 files changed, 147 insertions(+), 48 deletions(-)
 delete mode 100644 src/lib/common/Markdown.svelte
 create mode 100644 src/lib/common/markdown/CodeBlock.svelte
 create mode 100644 src/lib/common/markdown/Markdown.svelte
 create mode 100644 src/lib/scss/custom/components/_markdown.scss

diff --git a/package-lock.json b/package-lock.json
index 9f3155b8..2ad031f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
 				"svelte-json-tree": "^2.2.0",
 				"svelte-jsoneditor": "^0.21.1",
 				"svelte-link": "^1.4.0",
+				"svelte-markdown": "^0.4.1",
 				"svelte-player": "^0.0.21",
 				"svelte-select": "^5.7.0",
 				"svelte-splitpanes": "^8.0.5",
@@ -1251,6 +1252,11 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
 			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
 		},
+		"node_modules/@types/marked": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.2.tgz",
+			"integrity": "sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg=="
+		},
 		"node_modules/@types/md5": {
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/@types/md5/-/md5-2.3.2.tgz",
@@ -3874,6 +3880,29 @@
 			"integrity": "sha512-mthHQ2TwiwzTWzbFry3CBnVEfzqPOD9WkVw84OfSYzHRq6N9wgQ+yv37u81uPeuLU/ZOIPqhujpXquB1aol5ZQ==",
 			"dev": true
 		},
+		"node_modules/svelte-markdown": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.4.1.tgz",
+			"integrity": "sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==",
+			"dependencies": {
+				"@types/marked": "^5.0.1",
+				"marked": "^5.1.2"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
+		},
+		"node_modules/svelte-markdown/node_modules/marked": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-5.1.2.tgz",
+			"integrity": "sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 16"
+			}
+		},
 		"node_modules/svelte-player": {
 			"version": "0.0.21",
 			"resolved": "https://registry.npmjs.org/svelte-player/-/svelte-player-0.0.21.tgz",
diff --git a/package.json b/package.json
index f09321b2..dcd5755b 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
 		"svelte-json-tree": "^2.2.0",
 		"svelte-jsoneditor": "^0.21.1",
 		"svelte-link": "^1.4.0",
+		"svelte-markdown": "^0.4.1",
 		"svelte-player": "^0.0.21",
 		"svelte-select": "^5.7.0",
 		"svelte-splitpanes": "^8.0.5",
diff --git a/src/lib/common/Markdown.svelte b/src/lib/common/Markdown.svelte
deleted file mode 100644
index 529ba438..00000000
--- a/src/lib/common/Markdown.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-    import { marked } from 'marked';
-    import { replaceMarkdown, replaceNewLine } from '$lib/helpers/http';
-
-    /** @type {string} */
-	export let text;
-
-	/** @type {string} */
-	export let containerClasses = "";
-
-	/** @type {string} */
-	export let containerStyles = "";
-
-	/** @type {boolean} */
-	export let rawText = false;
-
-    let displayText = '';
-	$: {
-		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);
-		} else {
-            displayText = markedText;
-        }
-	}
-</script>
-
-<div class={`markdown-container markdown-lite ${containerClasses || 'text-white'}`} style={`${containerStyles}`}>
-	{@html displayText}
-</div>
\ No newline at end of file
diff --git a/src/lib/common/markdown/CodeBlock.svelte b/src/lib/common/markdown/CodeBlock.svelte
new file mode 100644
index 00000000..f99fc036
--- /dev/null
+++ b/src/lib/common/markdown/CodeBlock.svelte
@@ -0,0 +1,57 @@
+<script>
+
+    /** @type {string} */
+    export let lang;
+
+    /** @type {string} */
+    export let text;
+
+
+    /** @type {boolean} */
+    let copied = false;
+
+    function copyToClipboard() {
+        navigator.clipboard.writeText(text).then(() => {
+            setTimeout(() => {
+                copied = false;
+            }, 800);
+        });
+    }
+</script>
+
+
+<div class="code-block">
+    <div class="code-header">
+        <div class="line-align-center fw-bold">
+            {lang || ''}
+        </div>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div
+            class="line-align-center copy-btn"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="Copy"
+            on:mouseup={() => copyToClipboard()}
+            on:mousedown={() => copied = true}
+        >
+            {#if 1}
+                <div class="div-center">
+                    <div class="line-align-center">
+                        <i class="bx bx-check" style="font-size: 18px;" /> 
+                    </div>
+                    <div class="line-align-center">
+                        <span style="font-size: 10px;">{'Copied!'}</span>
+                    </div>
+                </div>
+            {:else}
+                <i class="bx bx-copy clickable" />
+            {/if}
+        </div>
+    </div>
+    <pre>
+        <code class={`language-${lang}`}>
+            <div>{text}</div>
+        </code>
+    </pre>
+</div>
\ No newline at end of file
diff --git a/src/lib/common/markdown/Markdown.svelte b/src/lib/common/markdown/Markdown.svelte
new file mode 100644
index 00000000..5684b9c0
--- /dev/null
+++ b/src/lib/common/markdown/Markdown.svelte
@@ -0,0 +1,35 @@
+<script>
+	import SvelteMarkdown from 'svelte-markdown';
+    import { replaceMarkdown, replaceNewLine } from '$lib/helpers/http';
+	import CodeBlock from './CodeBlock.svelte';
+
+    /** @type {string} */
+	export let text;
+
+	/** @type {string} */
+	export let containerClasses = "";
+
+	/** @type {string} */
+	export let containerStyles = "";
+
+	/** @type {boolean} */
+	export let rawText = false;
+
+    let innerText = '';
+	$: {
+		innerText = !rawText ? replaceNewLine(replaceMarkdown(text || '')) : text;
+	}
+</script>
+
+<div
+	class={`markdown-container markdown-lite ${containerClasses || 'text-white'}`}
+	style={`${containerStyles}`}
+>
+	<!-- {@html innerText} -->
+	<SvelteMarkdown
+		source={innerText}
+		renderers={{
+			code: CodeBlock
+		}}
+	/>
+</div>
\ No newline at end of file
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index 389b85c0..7d112623 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -44,6 +44,7 @@ File: Main Css File
 @import "custom/components/audio";
 @import "custom/components/text";
 @import "custom/components/multiselect";
+@import "custom/components/markdown";
 
 // Plugins
 @import "custom/plugins/custom-scrollbar";
diff --git a/src/lib/scss/custom/common/_common.scss b/src/lib/scss/custom/common/_common.scss
index d86ed5f4..a447d826 100644
--- a/src/lib/scss/custom/common/_common.scss
+++ b/src/lib/scss/custom/common/_common.scss
@@ -190,19 +190,6 @@ button:focus {
     white-space: pre-wrap;
     margin-top: 1em;
     margin-bottom: 1em;
-
-    &:has(.language-sql),
-    &:has(.language-java),
-    &:has(.language-javascript),
-    &:has(.language-typescript),
-    &:has(.language-csharp),
-    &:has(.language-python),
-    &:has(.language-json) {
-      background-color: black;
-      color: white;
-      border-radius: 5px;
-      padding: 5px 10px;
-    }
   }
 
   pre::-webkit-scrollbar {
diff --git a/src/lib/scss/custom/components/_markdown.scss b/src/lib/scss/custom/components/_markdown.scss
new file mode 100644
index 00000000..32e22b17
--- /dev/null
+++ b/src/lib/scss/custom/components/_markdown.scss
@@ -0,0 +1,20 @@
+.code-block {
+    position: relative;
+    background-color: black;
+    color: white;
+    border-radius: 5px;
+    padding: 5px 10px;
+    
+    pre {
+        margin: 0px !important;
+        white-space: pre !important;
+        overflow-x: auto;
+        scrollbar-width: thin;
+        max-width: 100%;
+    }
+
+    .code-header {
+        display: flex;
+        justify-content: space-between;
+    }
+}
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_conversation.scss b/src/lib/scss/custom/pages/_conversation.scss
index c2b46a4c..e62fb798 100644
--- a/src/lib/scss/custom/pages/_conversation.scss
+++ b/src/lib/scss/custom/pages/_conversation.scss
@@ -27,4 +27,5 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 10;
+    max-height: 300px;
 }
\ No newline at end of file
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 0409023f..495674f3 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
@@ -1,7 +1,7 @@
 <script>
 	import { Button } from '@sveltestrap/sveltestrap';
     import Link from 'svelte-link/src/Link.svelte';
-    import Markdown from "$lib/common/Markdown.svelte";
+    import Markdown from "$lib/common/markdown/Markdown.svelte";
 	import { ContentLogSource } from '$lib/helpers/enums';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { directToAgentPage } from '$lib/helpers/utils/common';
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 f51fb338..47f0ab42 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Markdown from "$lib/common/Markdown.svelte";
+	import Markdown from "$lib/common/markdown/Markdown.svelte";
 
     /** @type {any} */
     export let message;
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
index 6e0064d3..ea470f28 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
@@ -3,7 +3,6 @@
 	import RcPlainOptions from "./rc-plain-options.svelte";
 	import RcComplexOptions from "./rc-complex-options.svelte";
 	import ChatAttachmentOptions from "../chat-util/chat-attachment-options.svelte";
-	import { afterUpdate, tick } from "svelte";
 	
     /** @type {import('$conversationTypes').ChatResponseModel?} */
     export let message;
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
index 0f19de35..16b02ae5 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Markdown from '$lib/common/Markdown.svelte';
+	import Markdown from '$lib/common/markdown/Markdown.svelte';
 	import { Button } from '@sveltestrap/sveltestrap';
 
   /** @type {import('$conversationTypes').ChatResponseModel} */

From 64e2cc49a2d1e5192e844ad9464f2e4e45925078 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 7 Nov 2024 13:42:33 -0600
Subject: [PATCH 2/2] minor change

---
 src/lib/common/markdown/CodeBlock.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/common/markdown/CodeBlock.svelte b/src/lib/common/markdown/CodeBlock.svelte
index f99fc036..6d1c9f69 100644
--- a/src/lib/common/markdown/CodeBlock.svelte
+++ b/src/lib/common/markdown/CodeBlock.svelte
@@ -35,7 +35,7 @@
             on:mouseup={() => copyToClipboard()}
             on:mousedown={() => copied = true}
         >
-            {#if 1}
+            {#if copied}
                 <div class="div-center">
                     <div class="line-align-center">
                         <i class="bx bx-check" style="font-size: 18px;" />