From 308c277fd32d4dfc51ecc480bd3e02c594181a93 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 15 Sep 2025 13:22:41 -0500
Subject: [PATCH] refac: styling

---
 .../components/channel/MessageInput.svelte    | 19 ++++++++++++-------
 .../components/chat/Messages/Skeleton.svelte  | 12 ++++++++++--
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/channel/MessageInput.svelte b/src/lib/components/channel/MessageInput.svelte
index f9fbc32f6c..39eb130af6 100644
--- a/src/lib/components/channel/MessageInput.svelte
+++ b/src/lib/components/channel/MessageInput.svelte
@@ -36,6 +36,7 @@
 	import { getSuggestionRenderer } from '../common/RichTextInput/suggestions';
 	import CommandSuggestionList from '../chat/MessageInput/CommandSuggestionList.svelte';
 	import MentionList from './MessageInput/MentionList.svelte';
+	import Skeleton from '../chat/Messages/Skeleton.svelte';
 
 	export let placeholder = $i18n.t('Send a Message');
 
@@ -690,18 +691,22 @@
 						{/if}
 					</div>
 
-					<div class="relative">
-						<div class=" -mt-5">
-							{#if typingUsers.length > 0}
-								<div class=" text-xs px-4 mb-1">
+					{#if typingUsers.length > 0}
+						<div
+							class=" absolute -top-6 pb-2.5 w-full bg-gradient-to-t to-transparent from-white dark:from-gray-900 pointer-events-none select-none"
+						>
+							<div class=" text-xs px-2 mt-1 flex items-center gap-1.5">
+								<Skeleton size="xs" />
+
+								<div>
 									<span class=" font-normal text-black dark:text-white">
 										{typingUsers.map((user) => user.name).join(', ')}
 									</span>
 									{$i18n.t('is typing...')}
 								</div>
-							{/if}
+							</div>
 						</div>
-					</div>
+					{/if}
 				</div>
 			</div>
 
@@ -811,7 +816,7 @@
 											json={true}
 											messageInput={true}
 											richText={$settings?.richTextInput ?? true}
-											{showFormattingToolbar}
+											showFormattingToolbar={$settings?.showFormattingToolbar ?? false}
 											shiftEnter={!($settings?.ctrlEnterToSend ?? false) &&
 												(!$mobile ||
 													!(
diff --git a/src/lib/components/chat/Messages/Skeleton.svelte b/src/lib/components/chat/Messages/Skeleton.svelte
index 90d8a99131..b2631701af 100644
--- a/src/lib/components/chat/Messages/Skeleton.svelte
+++ b/src/lib/components/chat/Messages/Skeleton.svelte
@@ -2,14 +2,22 @@
 	export let size = 'md';
 </script>
 
-<span class="relative flex {size === 'md' ? 'size-3 my-2' : 'size-2 my-1'} mx-1">
+<span
+	class="relative flex {size === 'md'
+		? 'size-3 my-2'
+		: size === 'xs'
+			? 'size-1.5 my-1'
+			: 'size-2 my-1'} mx-1"
+>
 	<span
 		class="absolute inline-flex h-full w-full animate-pulse rounded-full bg-gray-700 dark:bg-gray-200 opacity-75"
 	></span>
 	<span
 		class="relative inline-flex {size === 'md'
 			? 'size-3'
-			: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
+			: size === 'xs'
+				? 'size-1.5'
+				: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
 	></span>
 </span>