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

Features/refine chat window

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",

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 copied}
+                <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>

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>

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

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 {

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;
+    }
+}

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

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

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;

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;

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} */