From d475cb91748585fddbbf4b53ee79b1e7cd964d93 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 14 Jul 2026 03:10:12 -0400
Subject: [PATCH] refac

---
 .../components/chat/ChatPlaceholder.svelte    |   4 +-
 .../components/chat/Controls/Controls.svelte  |  20 +-
 .../components/chat/Controls/Valves.svelte    |   4 +-
 src/lib/components/chat/MessageInput.svelte   |   2 +-
 src/lib/components/chat/Navbar.svelte         | 171 +++++++-----------
 src/lib/components/chat/Placeholder.svelte    |   4 +-
 src/lib/components/common/Collapsible.svelte  |  10 +-
 src/lib/components/layout/Navbar/Menu.svelte  |   2 +-
 8 files changed, 97 insertions(+), 120 deletions(-)

diff --git a/src/lib/components/chat/ChatPlaceholder.svelte b/src/lib/components/chat/ChatPlaceholder.svelte
index af38981cf2..c02ad0fc68 100644
--- a/src/lib/components/chat/ChatPlaceholder.svelte
+++ b/src/lib/components/chat/ChatPlaceholder.svelte
@@ -76,8 +76,8 @@
 				className="w-full flex justify-start mb-0.5"
 				placement="top"
 			>
-				<div class="flex items-center gap-2 text-gray-500 text-lg mt-2 w-fit">
-					<EyeSlash strokeWidth="2.5" className="size-5" />{$i18n.t('Temporary Chat')}
+				<div class="flex items-center gap-1.5 text-gray-500 text-xs mt-1 w-fit">
+					<EyeSlash strokeWidth="2" className="size-3.5" />{$i18n.t('Temporary Chat')}
 				</div>
 			</Tooltip>
 		{/if}
diff --git a/src/lib/components/chat/Controls/Controls.svelte b/src/lib/components/chat/Controls/Controls.svelte
index b611e4e17a..aa7d355260 100644
--- a/src/lib/components/chat/Controls/Controls.svelte
+++ b/src/lib/components/chat/Controls/Controls.svelte
@@ -30,7 +30,7 @@
 	let showAdvancedParams = getOpen('advancedParams');
 
 	const compactSectionButtonClass =
-		'w-full h-8 px-2.5 rounded-xl text-[13px] font-normal text-gray-600 hover:bg-gray-50/40 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-100 transition cursor-pointer select-none';
+		'w-full py-1 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition cursor-pointer select-none';
 </script>
 
 <div class=" dark:text-white">
@@ -50,13 +50,15 @@
 	{/if}
 
 	{#if $user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true)}
-		<div class=" dark:text-gray-200 text-sm py-0.5 px-0.5">
+		<div class="space-y-1 dark:text-gray-200 text-sm py-0.5 px-0.5">
 			{#if chatFiles.length > 0}
 				<Collapsible
 					title={$i18n.t('Files')}
 					bind:open={showFiles}
 					onChange={setOpen('files')}
 					buttonClassName="w-full"
+					chevronClassName="size-2.5"
+					chevronStrokeWidth="2"
 				>
 					<div class="flex flex-col gap-1 mt-1.5" slot="content">
 						{#each chatFiles as file, fileIdx}
@@ -91,8 +93,10 @@
 					onChange={setOpen('valves')}
 					title={$i18n.t('Valves')}
 					buttonClassName={compactSectionButtonClass}
+					chevronClassName="size-2.5"
+					chevronStrokeWidth="2"
 				>
-					<div class="px-2 pt-1 text-sm" slot="content">
+					<div class="pt-1 pb-1 text-xs" slot="content">
 						<Valves show={showValves} />
 					</div>
 				</Collapsible>
@@ -104,11 +108,13 @@
 					bind:open={showSystemPrompt}
 					onChange={setOpen('systemPrompt')}
 					buttonClassName={compactSectionButtonClass}
+					chevronClassName="size-2.5"
+					chevronStrokeWidth="2"
 				>
-					<div class="px-2 pt-1" slot="content">
+					<div class="pt-1 pb-1" slot="content">
 						<textarea
 							bind:value={params.system}
-							class="w-full text-sm outline-hidden resize-vertical {$settings.highContrastMode
+							class="w-full text-xs outline-hidden resize-vertical {$settings.highContrastMode
 								? 'border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 px-2 py-1.5'
 								: 'py-1 bg-transparent'}"
 							rows="3"
@@ -124,8 +130,10 @@
 					bind:open={showAdvancedParams}
 					onChange={setOpen('advancedParams')}
 					buttonClassName={compactSectionButtonClass}
+					chevronClassName="size-2.5"
+					chevronStrokeWidth="2"
 				>
-					<div class="px-2 pt-1 text-sm" slot="content">
+					<div class="pt-1 pb-1 text-xs" slot="content">
 						<div>
 							<AdvancedParams admin={$user?.role === 'admin'} custom={true} bind:params />
 						</div>
diff --git a/src/lib/components/chat/Controls/Valves.svelte b/src/lib/components/chat/Controls/Valves.svelte
index 958735421b..880b55b298 100644
--- a/src/lib/components/chat/Controls/Valves.svelte
+++ b/src/lib/components/chat/Controls/Valves.svelte
@@ -148,7 +148,7 @@
 				<div class="flex gap-2">
 					<div class="flex-1">
 						<select
-							class="w-full h-[1.6875rem] rounded-xl text-xs px-2 bg-transparent outline-hidden"
+							class="w-full rounded-sm py-1 px-1 text-xs bg-transparent outline-hidden"
 							bind:value={tab}
 							placeholder={$i18n.t('Select')}
 						>
@@ -161,7 +161,7 @@
 
 					<div class="flex-1">
 						<select
-							class="w-full h-[1.6875rem] rounded-xl px-2 text-xs bg-transparent outline-hidden"
+							class="w-full rounded-sm py-1 px-1 text-xs bg-transparent outline-hidden"
 							bind:value={selectedId}
 							on:change={async () => {
 								await tick();
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 2fe8525338..89a91857a8 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -2013,7 +2013,7 @@
 								</div>
 
 								<div class="self-end flex space-x-1 mr-1 shrink-0 gap-[0.5px]">
-									<div class="-mr-1 flex min-w-0 max-w-[10rem] items-center sm:max-w-[13rem]">
+									<div class="-mr-[0.5px] flex min-w-0 max-w-[10rem] items-center sm:max-w-[13rem]">
 										<ModelSelector
 											bind:selectedModels
 											showSetDefault={!history?.currentId}
diff --git a/src/lib/components/chat/Navbar.svelte b/src/lib/components/chat/Navbar.svelte
index 20ba3a388b..6dbf99b565 100644
--- a/src/lib/components/chat/Navbar.svelte
+++ b/src/lib/components/chat/Navbar.svelte
@@ -9,7 +9,6 @@
 		config,
 		mobile,
 		settings,
-		showArchivedChats,
 		showControls,
 		showSidebar,
 		temporaryChatEnabled,
@@ -23,7 +22,6 @@
 	import ShareChatModal from '../chat/ShareChatModal.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import Menu from '$lib/components/layout/Navbar/Menu.svelte';
-	import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
 	import AdjustmentsHorizontal from '../icons/AdjustmentsHorizontal.svelte';
 
 	import PencilSquare from '../icons/PencilSquare.svelte';
@@ -37,7 +35,6 @@
 	import ChatPlus from '../icons/ChatPlus.svelte';
 	import ChatCheck from '../icons/ChatCheck.svelte';
 	import Knobs from '../icons/Knobs.svelte';
-	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -80,11 +77,7 @@
 	aria-label="New Chat"
 />
 
-<nav
-	class="sticky top-0 z-30 w-full {chat?.id
-		? 'pt-0.5 pb-1'
-		: 'pt-1 pb-1'} -mb-12 flex flex-col items-center drag-region"
->
+<nav class="sticky top-0 z-30 w-full pt-0.5 pb-1 -mb-12 flex flex-col items-center drag-region">
 	<div class="flex items-center w-full pl-1.5 pr-1">
 		<div
 			id="navbar-bg-gradient-to-b"
@@ -93,47 +86,83 @@
 				: 'invisible'} bg-linear-to-b via-40% to-97% from-white/90 via-white/50 to-transparent dark:from-gray-900/90 dark:via-gray-900/50 dark:to-transparent pointer-events-none absolute inset-0 -bottom-10 z-[-1]"
 		></div>
 
-		<div class=" flex max-w-full w-full mx-auto px-1.5 md:px-2 bg-transparent">
+		<div class=" flex max-w-full w-full mx-auto bg-transparent">
 			<div class="flex items-center w-full max-w-full">
 				{#if $mobile && !$showSidebar}
-					<div
-						class="-translate-x-0.5 mr-1 mt-1 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
-					>
+					<div class="-translate-x-0.5 mr-1 mt-1 self-start flex flex-none items-center">
 						<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
 							<button
-								class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+								class="flex size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
 								on:click={() => {
 									showSidebar.set(!$showSidebar);
 								}}
+								aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 							>
-								<div class=" self-center p-1.5">
-									<Sidebar />
-								</div>
+								<Sidebar />
 							</button>
 						</Tooltip>
 					</div>
 				{/if}
 
-				<div class="flex-1 overflow-hidden max-w-full mt-0.5 py-0.5 {$showSidebar ? 'ml-1' : ''}">
+				<div
+					class="flex-1 overflow-hidden max-w-full mt-0.5 py-0.5 pl-0.5 {$showSidebar
+						? 'ml-1'
+						: ''}"
+				>
 					{#if chat?.id}
-						<button
-							type="button"
-							class="max-w-full truncate rounded-lg px-2 py-1 text-left text-[13px] font-medium text-gray-700 transition-colors duration-100 hover:bg-gray-50/40 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-100"
-							on:click={() => scrollToTop?.()}
-						>
-							{title || chat?.chat?.title || $i18n.t('New Chat')}
-						</button>
+						<div class="flex max-w-full min-w-0 items-center gap-2">
+							<div
+								class="min-w-0 truncate py-1 text-left text-[15px] font-normal text-gray-700 dark:text-gray-300"
+							>
+								{title || chat?.chat?.title || $i18n.t('New Chat')}
+							</div>
+
+							{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
+								<Menu
+									{chat}
+									{shareEnabled}
+									{readOnly}
+									{scrollToTop}
+									shareHandler={() => {
+										showShareChatModal = !showShareChatModal;
+									}}
+									archiveChatHandler={() => {
+										archiveChatHandler(chat.id);
+									}}
+									deleteChatHandler={() => {
+										deleteChatHandler(chat.id);
+									}}
+									{moveChatHandler}
+								>
+									<button
+										class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
+										id="chat-context-menu-button"
+										aria-label={$i18n.t('Chat actions')}
+									>
+										<EllipsisHorizontal className="size-4.5" strokeWidth="1.5" />
+									</button>
+								</Menu>
+							{/if}
+						</div>
+					{:else}
+						<div class="pointer-events-none invisible flex max-w-full min-w-0 items-center gap-2">
+							<div
+								class="min-w-0 truncate py-1 text-left text-[15px] font-normal text-gray-700 dark:text-gray-300"
+							>
+								{$i18n.t('New Chat')}
+							</div>
+						</div>
 					{/if}
 				</div>
 
-				<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400">
+				<div class="mr-1 flex flex-none items-center gap-2 self-center">
 					<!-- <div class="md:hidden flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" /> -->
 
 					{#if $user?.role === 'user' ? ($user?.permissions?.chat?.temporary ?? true) && !($user?.permissions?.chat?.temporary_enforced ?? false) : true}
 						{#if !chat?.id}
 							<Tooltip content={$i18n.t(`Temporary Chat`)}>
 								<button
-									class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+									class="flex size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
 									id="temporary-chat-button"
 									on:click={async () => {
 										if (($settings?.temporaryChatByDefault ?? false) && $temporaryChatEnabled) {
@@ -154,28 +183,26 @@
 											window.history.replaceState(null, '', location.pathname);
 										}
 									}}
+									aria-label={$i18n.t(`Temporary Chat`)}
 								>
-									<div class=" m-auto self-center">
-										{#if $temporaryChatEnabled}
-											<ChatBubbleDottedChecked className=" size-4.5" strokeWidth="1.5" />
-										{:else}
-											<ChatBubbleDotted className=" size-4.5" strokeWidth="1.5" />
-										{/if}
-									</div>
+									{#if $temporaryChatEnabled}
+										<ChatBubbleDottedChecked className="size-4.5" strokeWidth="1.5" />
+									{:else}
+										<ChatBubbleDotted className="size-4.5" strokeWidth="1.5" />
+									{/if}
 								</button>
 							</Tooltip>
 						{:else if $temporaryChatEnabled}
 							<Tooltip content={$i18n.t(`Save Chat`)}>
 								<button
-									class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+									class="flex size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
 									id="save-temporary-chat-button"
 									on:click={async () => {
 										onSaveTempChat();
 									}}
+									aria-label={$i18n.t(`Save Chat`)}
 								>
-									<div class=" m-auto self-center">
-										<ChatCheck className=" size-4.5" strokeWidth="1.5" />
-									</div>
+									<ChatCheck className="size-4.5" strokeWidth="1.5" />
 								</button>
 							</Tooltip>
 						{/if}
@@ -184,92 +211,32 @@
 					{#if $mobile && !$temporaryChatEnabled && chat && chat.id}
 						<Tooltip content={$i18n.t('New Chat')}>
 							<button
-								class=" flex {$showSidebar
+								class="flex size-6 {$showSidebar
 									? 'md:hidden'
-									: ''} cursor-pointer px-2 py-2 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+									: ''} cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
 								on:click={() => {
 									initNewChat();
 								}}
 								aria-label="New Chat"
 							>
-								<div class=" m-auto self-center">
-									<ChatPlus className=" size-4.5" strokeWidth="1.5" />
-								</div>
+								<ChatPlus className="size-4.5" strokeWidth="1.5" />
 							</button>
 						</Tooltip>
 					{/if}
 
-					{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
-						<Menu
-							{chat}
-							{shareEnabled}
-							{readOnly}
-							{scrollToTop}
-							shareHandler={() => {
-								showShareChatModal = !showShareChatModal;
-							}}
-							archiveChatHandler={() => {
-								archiveChatHandler(chat.id);
-							}}
-							deleteChatHandler={() => {
-								deleteChatHandler(chat.id);
-							}}
-							{moveChatHandler}
-						>
-							<button
-								class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
-								id="chat-context-menu-button"
-							>
-								<div class=" m-auto self-center">
-									<EllipsisHorizontal className=" size-5" strokeWidth="1.5" />
-								</div>
-							</button>
-						</Menu>
-					{/if}
-
 					{#if $user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true)}
 						<Tooltip content={$i18n.t('Controls')}>
 							<button
-								class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+								class="flex size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
 								on:click={async () => {
 									await showControls.set(!$showControls);
 								}}
 								aria-label="Controls"
 							>
-								<div class=" m-auto self-center">
-									<Knobs className=" size-5" strokeWidth="1" />
-								</div>
+								<Knobs className="size-5" strokeWidth="1" />
 							</button>
 						</Tooltip>
 					{/if}
-
-					{#if $user !== undefined && $user !== null}
-						<UserMenu
-							className="w-[240px]"
-							role={$user?.role}
-							help={true}
-							on:show={(e) => {
-								if (e.detail === 'archived-chat') {
-									showArchivedChats.set(true);
-								}
-							}}
-						>
-							<button
-								type="button"
-								class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
-								aria-label={$i18n.t('User menu')}
-							>
-								<div class=" self-center">
-									<img
-										src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
-										class="size-6 object-cover rounded-full"
-										alt=""
-										draggable="false"
-									/>
-								</div>
-							</button>
-						</UserMenu>
-					{/if}
 				</div>
 			</div>
 		</div>
diff --git a/src/lib/components/chat/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte
index a89a69f2ce..d4e7121c49 100644
--- a/src/lib/components/chat/Placeholder.svelte
+++ b/src/lib/components/chat/Placeholder.svelte
@@ -87,8 +87,8 @@
 			className="w-full flex justify-center mb-0.5"
 			placement="top"
 		>
-			<div class="flex items-center gap-2 text-gray-500 text-base my-2 w-fit">
-				<EyeSlash strokeWidth="2.5" className="size-4" />{$i18n.t('Temporary Chat')}
+			<div class="flex items-center gap-1.5 text-gray-500 text-xs my-1 w-fit">
+				<EyeSlash strokeWidth="2" className="size-3.5" />{$i18n.t('Temporary Chat')}
 			</div>
 		</Tooltip>
 	{/if}
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 21eecc327f..854d757735 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -45,6 +45,8 @@
 	export let id = '';
 	export let title = null;
 	export let attributes = null;
+	export let chevronClassName = 'size-3';
+	export let chevronStrokeWidth = '2.75';
 
 	export let chevron = false;
 	export let grow = false;
@@ -119,9 +121,9 @@
 				{#if !disabled}
 					<div class="flex self-center translate-y-[1px]">
 						{#if open}
-							<ChevronUp strokeWidth="2.75" className="size-3" />
+							<ChevronUp strokeWidth={chevronStrokeWidth} className={chevronClassName} />
 						{:else}
-							<ChevronDown strokeWidth="2.75" className="size-3" />
+							<ChevronDown strokeWidth={chevronStrokeWidth} className={chevronClassName} />
 						{/if}
 					</div>
 				{/if}
@@ -144,9 +146,9 @@
 					{#if chevron}
 						<div class="flex self-start translate-y-1">
 							{#if open}
-								<ChevronUp strokeWidth="2.75" className="size-3" />
+								<ChevronUp strokeWidth={chevronStrokeWidth} className={chevronClassName} />
 							{:else}
-								<ChevronDown strokeWidth="2.75" className="size-3" />
+								<ChevronDown strokeWidth={chevronStrokeWidth} className={chevronClassName} />
 							{/if}
 						</div>
 					{/if}
diff --git a/src/lib/components/layout/Navbar/Menu.svelte b/src/lib/components/layout/Navbar/Menu.svelte
index 44cfa2884d..695816f146 100644
--- a/src/lib/components/layout/Navbar/Menu.svelte
+++ b/src/lib/components/layout/Navbar/Menu.svelte
@@ -284,7 +284,7 @@
 			onClose();
 		}
 	}}
-	align="end"
+	align="start"
 	sideOffset={8}
 >
 	<slot />