From 7c0b0e42f5afb0e9c39bd2d42e4822d64d0c7b3e Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 25 Jun 2026 17:14:22 -0400
Subject: [PATCH] refac

---
 src/lib/components/common/Valves.svelte | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/common/Valves.svelte b/src/lib/components/common/Valves.svelte
index 7ad3573d50..b535206008 100644
--- a/src/lib/components/common/Valves.svelte
+++ b/src/lib/components/common/Valves.svelte
@@ -1,5 +1,8 @@
 <script>
-	import { onMount, getContext, createEventDispatcher } from 'svelte';
+	import { getContext, createEventDispatcher } from 'svelte';
+	import DOMPurify from 'dompurify';
+	import { marked } from 'marked';
+
 	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
 
@@ -12,7 +15,7 @@
 </script>
 
 {#if valvesSpec && Object.keys(valvesSpec?.properties ?? {}).length}
-	{#each Object.keys(valvesSpec.properties) as property, idx}
+	{#each Object.keys(valvesSpec.properties) as property}
 		<div class=" py-0.5 w-full justify-between">
 			<div class="flex w-full justify-between">
 				<div class=" self-center text-xs font-medium">
@@ -213,8 +216,11 @@
 			{/if}
 
 			{#if (valvesSpec.properties[property]?.description ?? null) !== null}
-				<div class="text-xs text-gray-500">
-					{valvesSpec.properties[property].description}
+				<div class="markdown-prose-xs max-w-full text-gray-500 dark:text-gray-400">
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					{@html DOMPurify.sanitize(
+						marked.parse(valvesSpec.properties[property].description ?? '', { async: false })
+					)}
 				</div>
 			{/if}
 		</div>