From dbd5b4c9f19c999d42e23cd239f3c1b1dc663ae6 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Thu, 15 Aug 2024 15:41:02 +0200
Subject: [PATCH] enh: render markdown user message

---
 .../chat/Messages/UserMessage.svelte          | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 1dea97f11..59f9af4c9 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -10,6 +10,9 @@
 	import { user as _user } from '$lib/stores';
 	import { getFileContentById } from '$lib/apis/files';
 	import FileItem from '$lib/components/common/FileItem.svelte';
+	import { marked } from 'marked';
+	import { processResponseContent, replaceTokens } from '$lib/utils';
+	import MarkdownTokens from './MarkdownTokens.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -91,7 +94,7 @@
 		{/if}
 
 		<div
-			class="prose chat-{message.role} w-full max-w-full flex flex-col justify-end dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
+			class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line"
 		>
 			{#if message.files}
 				<div class="mt-2.5 mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1 flex-wrap">
@@ -162,15 +165,24 @@
 				</div>
 			{:else}
 				<div class="w-full">
-					<div class="flex {($settings?.chatBubble ?? true) ? 'justify-end' : ''} mb-2">
+					<div class="flex {($settings?.chatBubble ?? true) ? 'justify-end' : ''} pb-2">
 						<div
 							class="rounded-3xl {($settings?.chatBubble ?? true)
 								? `max-w-[90%] px-5 py-2  bg-gray-50 dark:bg-gray-850 ${
 										message.files ? 'rounded-tr-lg' : ''
 									}`
-								: ''}  "
+								: ''}"
 						>
-							<pre id="user-message">{message.content}</pre>
+							{#if message.content}
+								<div class="">
+									{#key message.id}
+										<MarkdownTokens
+											id={message.id}
+											tokens={marked.lexer(processResponseContent(message?.content))}
+										/>
+									{/key}
+								</div>
+							{/if}
 						</div>
 					</div>