From 18d4856502f013a27131b74639de71303dec8716 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 8 Oct 2026 15:02:17 +0400
Subject: [PATCH] refac

---
 .../chat/Messages/UserMessage.svelte          |  2 +-
 src/routes/s/[id]/+page.svelte                | 42 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 9e6fed5611..82656581fb 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -172,7 +172,7 @@
 		{#if (!($settings?.chatBubble ?? true) || !isOwn) && !(message?.meta?.internal === true && message?.meta?.type === 'subagent') && !(message?.meta?.internal === true && message?.meta?.type === 'timer')}
 			<div
 				class={($settings?.chatBubble ?? true)
-					? 'mb-1 text-xs text-gray-400 dark:text-gray-500'
+					? 'mb-1 ps-2 text-xs text-gray-400 dark:text-gray-500'
 					: ''}
 			>
 				{#if $settings?.chatBubble ?? true}
diff --git a/src/routes/s/[id]/+page.svelte b/src/routes/s/[id]/+page.svelte
index a70bde1682..d7d552e9d5 100644
--- a/src/routes/s/[id]/+page.svelte
+++ b/src/routes/s/[id]/+page.svelte
@@ -4,6 +4,7 @@
 	import { page } from '$app/stores';
 
 	import dayjs from 'dayjs';
+	import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 	import { settings, chatId, WEBUI_NAME, models, config, user as sessionUser } from '$lib/stores';
 	import { convertMessagesToHistory, createMessagesList } from '$lib/utils';
@@ -15,7 +16,6 @@
 	import { getUserInfoById, getUserSettings } from '$lib/apis/users';
 	import { getModels } from '$lib/apis';
 	import { toast } from 'svelte-sonner';
-	import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 	const i18n = getContext('i18n');
 	dayjs.extend(localizedFormat);
@@ -185,32 +185,36 @@
 		class="h-screen max-h-[100dvh] w-full flex flex-col text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900"
 	>
 		<div class="flex flex-col flex-auto justify-center relative">
-			<div class="@container flex flex-col w-full flex-auto overflow-auto h-0" id="messages-container">
-				<div
-					class="pt-5 px-2 w-full {($settings?.widescreenMode ?? null)
-						? 'max-w-full'
-						: 'max-w-[58rem]'} mx-auto"
+			<div
+				class="@container flex flex-col w-full flex-auto overflow-auto h-0"
+				id="messages-container"
+			>
+				<header
+					class="sticky top-0 z-30 mx-auto w-full max-w-[58rem] shrink-0 bg-white px-2 dark:bg-gray-900"
 				>
-					<div class="px-3">
-						<h1 class=" text-2xl font-normal line-clamp-1 m-0">
+					<div
+						class="pointer-events-none absolute inset-x-0 top-full h-10 z-[-1] bg-linear-to-b from-white to-transparent dark:from-gray-900"
+					></div>
+					<div class="flex items-center gap-3 px-3 py-2">
+						<h1
+							class="min-w-0 truncate text-[0.9375rem] font-normal text-gray-700 dark:text-gray-300"
+							{title}
+						>
 							{title}
 						</h1>
-
-						<div class="flex text-sm justify-between items-center mt-1">
-							<time
-								class="text-gray-400"
-								datetime={new Date(chat?.chat?.timestamp || Date.now()).toISOString()}
-							>
-								{dayjs(chat.chat.timestamp).format('LLL')}
-							</time>
-						</div>
+						<time
+							class="ms-auto shrink-0 whitespace-nowrap text-xs text-gray-400 dark:text-gray-500"
+							datetime={dayjs(chat.chat.timestamp || chat.created_at * 1000).toISOString()}
+						>
+							{dayjs(chat.chat.timestamp || chat.created_at * 1000).format('LLL')}
+						</time>
 					</div>
-				</div>
+				</header>
 
 				<div class=" h-full w-full flex flex-col py-2" role="main">
 					<div class="w-full">
 						<Messages
-							className="h-full flex pt-4 pb-8 "
+							className="h-full flex pb-8"
 							{user}
 							chatId={$chatId}
 							readOnly={true}