From fe9685867e03da5a18e8e956fd1afdcc354f62d4 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 15 Jun 2024 04:32:18 -0600
Subject: [PATCH] enh: model desc md support

---
 src/app.css                                         | 4 ++++
 src/lib/components/chat/Messages/Placeholder.svelte | 8 ++++++--
 src/lib/components/common/Tooltip.svelte            | 4 +++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index da1d961e5..baf620845 100644
--- a/src/app.css
+++ b/src/app.css
@@ -28,6 +28,10 @@ math {
 	@apply rounded-lg;
 }
 
+.markdown a {
+	@apply underline;
+}
+
 ol > li {
 	counter-increment: list-number;
 	display: block;
diff --git a/src/lib/components/chat/Messages/Placeholder.svelte b/src/lib/components/chat/Messages/Placeholder.svelte
index 2000d2171..ac5f8dce1 100644
--- a/src/lib/components/chat/Messages/Placeholder.svelte
+++ b/src/lib/components/chat/Messages/Placeholder.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { marked } from 'marked';
+
 	import { config, user, models as _models } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 
@@ -65,8 +67,10 @@
 
 				<div in:fade={{ duration: 200, delay: 200 }}>
 					{#if models[selectedModelIdx]?.info?.meta?.description ?? null}
-						<div class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400 line-clamp-3">
-							{models[selectedModelIdx]?.info?.meta?.description}
+						<div
+							class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400 line-clamp-3 markdown"
+						>
+							{@html marked.parse(models[selectedModelIdx]?.info?.meta?.description)}
 						</div>
 						{#if models[selectedModelIdx]?.info?.meta?.user}
 							<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte
index 0b5d52d25..2b8eefc51 100644
--- a/src/lib/components/common/Tooltip.svelte
+++ b/src/lib/components/common/Tooltip.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
+	import { marked } from 'marked';
+
 	import tippy from 'tippy.js';
 
 	export let placement = 'top';
@@ -15,7 +17,7 @@
 			tooltipInstance.setContent(content);
 		} else {
 			tooltipInstance = tippy(tooltipElement, {
-				content: content,
+				content: marked.parse(content),
 				placement: placement,
 				allowHTML: true,
 				touch: touch