From ac8e81834ca0d9683895502c4ef28d5315025781 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 12 Apr 2025 21:44:15 -0700
Subject: [PATCH] refac

---
 .../components/admin/Users/UserList.svelte    | 23 +++++++++++++++++++
 .../Messages/Markdown/AlertRenderer.svelte    | 12 ++++++----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte
index 6be4198b3..f8859d219 100644
--- a/src/lib/components/admin/Users/UserList.svelte
+++ b/src/lib/components/admin/Users/UserList.svelte
@@ -29,6 +29,7 @@
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import About from '$lib/components/chat/Settings/About.svelte';
 	import Banner from '$lib/components/common/Banner.svelte';
+	import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -486,3 +487,25 @@
 </div>
 
 <Pagination bind:page count={users.length} />
+
+{#if users.length > 3}
+	<div class="text-sm">
+		<Markdown
+			content={`
+> [!NOTE]
+> # **Hey there! 👋**
+>
+> It looks like you have over 50 users — that usually falls under organizational usage.
+> 
+> Open WebUI is proudly open source and completely free, with no hidden limits — and we'd love to keep it that way. 🌱  
+>
+> By supporting the project through sponsorship or an enterprise license, you’re not only helping us stay independent, you’re also helping us ship new features faster, improve stability, and grow the project for the long haul. With an *enterprise license*, you also get additional perks like dedicated support, customization options, and more — all at a fraction of what it would cost to build and maintain internally.  
+> 
+> Your support helps us stay independent and continue building great tools for everyone. 💛
+> 
+> - 👉 **[Click here to learn more about enterprise licensing](https://docs.openwebui.com/enterprise)**
+> - 👉 *[Click here to sponsor the project on GitHub](https://github.com/sponsors/tjbck)*
+`}
+		/>
+	</div>
+{/if}
diff --git a/src/lib/components/chat/Messages/Markdown/AlertRenderer.svelte b/src/lib/components/chat/Messages/Markdown/AlertRenderer.svelte
index 874c639bc..caf1410b1 100644
--- a/src/lib/components/chat/Messages/Markdown/AlertRenderer.svelte
+++ b/src/lib/components/chat/Messages/Markdown/AlertRenderer.svelte
@@ -99,10 +99,12 @@ Renders the following Markdown as alerts:
 > Example warning
 
 -->
-<div class={`border-l-2 pl-2 ${alertStyles[alert.type].border}`}>
-	<p class={alertStyles[alert.type].text}>
+<div class={`border-l-4 pl-2.5 ${alertStyles[alert.type].border} my-0.5`}>
+	<div class="{alertStyles[alert.type].text} items-center flex gap-1 py-1.5">
 		<svelte:component this={alertStyles[alert.type].icon} className="inline-block size-4" />
-		<b>{alert.type}</b>
-	</p>
-	<MarkdownTokens id={`${id}-${tokenIdx}`} tokens={alert.tokens} {onTaskClick} {onSourceClick} />
+		<span class=" font-medium">{alert.type}</span>
+	</div>
+	<div class="pb-2">
+		<MarkdownTokens id={`${id}-${tokenIdx}`} tokens={alert.tokens} {onTaskClick} {onSourceClick} />
+	</div>
 </div>