webui: Fix Chat Screen Form box disappearing + autoscroll issues on WebKit (#22977)

* debug: Scroll/Sticky issues

* fix: UI improvements

* refactor: Remove unneeded logic

* fix: Better logic for initial load of messages

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import { beforeNavigate, afterNavigate } from '$app/navigation';
 	import { ChatMessage, ChatMessageUserPending } from '$lib/components/app';
 	import { setChatActionsContext } from '$lib/contexts';
 	import { MessageRole } from '$lib/enums';
@@ -27,11 +29,14 @@
 	interface Props {
 		messages?: DatabaseMessage[];
 		onUserAction?: () => void;
+		onMessagesReady?: (messageCount: number) => void;
 	}
 
-	let { messages = [], onUserAction }: Props = $props();
+	let { messages = [], onUserAction, onMessagesReady }: Props = $props();
 
 	let allConversationMessages = $state<DatabaseMessage[]>([]);
+	let isVisible = $state(false);
+	let previousConversationId = $state<string | null>(null);
 
 	const currentConfig = config();
 
@@ -117,15 +122,51 @@
 		}
 	}
 
-	// Single effect that tracks both conversation and message changes
+	// Track conversation changes to trigger transition even on same route
 	$effect(() => {
 		const conversation = activeConversation();
+		const currentId = conversation?.id ?? null;
 
-		if (conversation) {
-			refreshAllMessages();
+		if (currentId !== previousConversationId && previousConversationId !== null) {
+			// Conversation changed - trigger fade out/in
+			isVisible = false;
+			requestAnimationFrame(() => {
+				refreshAllMessages();
+				previousConversationId = currentId;
+				requestAnimationFrame(() => {
+					isVisible = true;
+				});
+			});
+		} else {
+			previousConversationId = currentId;
+			if (conversation) {
+				refreshAllMessages();
+			}
 		}
 	});
 
+	$effect(() => {
+		void allConversationMessages;
+
+		onMessagesReady?.(displayMessages.length);
+	});
+
+	onMount(() => {
+		requestAnimationFrame(() => {
+			isVisible = true;
+		});
+	});
+
+	beforeNavigate(() => {
+		isVisible = false;
+	});
+
+	afterNavigate(() => {
+		requestAnimationFrame(() => {
+			isVisible = true;
+		});
+	});
+
 	let displayMessages = $derived.by(() => {
 		if (!messages.length) {
 			return [];
@@ -207,42 +248,47 @@
 	});
 </script>
 
-{#each displayMessages as { message, toolMessages, isLastAssistantMessage, siblingInfo } (message.id)}
-	<ChatMessage
-		class="mx-auto mt-12 w-full max-w-[48rem]"
-		{message}
-		{toolMessages}
-		{isLastAssistantMessage}
-		{siblingInfo}
-	/>
-{/each}
-
-{#if activeConversation() && agenticPendingSteeringMessageContent(activeConversation()!.id)}
-	{@const convId = activeConversation()!.id}
-	{@const pendingContent = agenticPendingSteeringMessageContent(convId)}
-
-	{#if pendingContent}
-		<ChatMessageUserPending
+<div
+	class="transition-opacity delay-300 duration-500 ease-out
+		{isVisible ? 'opacity-100' : 'opacity-0'}"
+>
+	{#each displayMessages as { message, toolMessages, isLastAssistantMessage, siblingInfo } (message.id)}
+		<ChatMessage
 			class="mx-auto mt-12 w-full max-w-[48rem]"
-			content={pendingContent}
-			extras={agenticPendingSteeringMessageExtras(convId)}
-			onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
-			onEdit={(newContent, extras) => agenticInjectSteeringMessage(convId, newContent, extras)}
-			onDelete={() => agenticClearSteeringMessage(convId)}
+			{message}
+			{toolMessages}
+			{isLastAssistantMessage}
+			{siblingInfo}
 		/>
-	{/if}
-{:else if activeConversation() && chatPendingMessageContent(activeConversation()!.id)}
-	{@const convId = activeConversation()!.id}
-	{@const pendingContent = chatPendingMessageContent(convId)}
+	{/each}
 
-	{#if pendingContent}
-		<ChatMessageUserPending
-			class="mx-auto mt-12 w-full max-w-[48rem]"
-			content={pendingContent}
-			extras={chatPendingMessageExtras(convId)}
-			onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
-			onEdit={(newContent, extras) => chatInjectPendingMessage(convId, newContent, extras)}
-			onDelete={() => chatClearPendingMessage(convId)}
-		/>
+	{#if activeConversation() && agenticPendingSteeringMessageContent(activeConversation()!.id)}
+		{@const convId = activeConversation()!.id}
+		{@const pendingContent = agenticPendingSteeringMessageContent(convId)}
+
+		{#if pendingContent}
+			<ChatMessageUserPending
+				class="mx-auto mt-12 w-full max-w-[48rem]"
+				content={pendingContent}
+				extras={agenticPendingSteeringMessageExtras(convId)}
+				onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
+				onEdit={(newContent, extras) => agenticInjectSteeringMessage(convId, newContent, extras)}
+				onDelete={() => agenticClearSteeringMessage(convId)}
+			/>
+		{/if}
+	{:else if activeConversation() && chatPendingMessageContent(activeConversation()!.id)}
+		{@const convId = activeConversation()!.id}
+		{@const pendingContent = chatPendingMessageContent(convId)}
+
+		{#if pendingContent}
+			<ChatMessageUserPending
+				class="mx-auto mt-12 w-full max-w-[48rem]"
+				content={pendingContent}
+				extras={chatPendingMessageExtras(convId)}
+				onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
+				onEdit={(newContent, extras) => chatInjectPendingMessage(convId, newContent, extras)}
+				onDelete={() => chatClearPendingMessage(convId)}
+			/>
+		{/if}
 	{/if}
-{/if}
+</div>

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte

@@ -42,6 +42,8 @@
 
 	let { showCenteredEmpty = false } = $props();
 
+	const autoScroll = createAutoScrollController();
+
 	let disableAutoScroll = $derived(Boolean(config().disableAutoScroll));
 	let chatScrollContainer: HTMLDivElement | undefined = $state();
 	let dragCounter = $state(0);
@@ -49,8 +51,6 @@
 	let showFileErrorDialog = $state(false);
 	let uploadedFiles = $state<ChatUploadedFile[]>([]);
 
-	const autoScroll = createAutoScrollController({ isColumnReverse: true });
-
 	let fileErrorData = $state<{
 		generallyUnsupported: File[];
 		modalityUnsupported: File[];
@@ -322,6 +322,14 @@
 		}
 	});
 
+	function handleMessagesReady() {
+		if (!disableAutoScroll) {
+			requestAnimationFrame(() => {
+				autoScroll.scrollToBottom('instant');
+			});
+		}
+	}
+
 	onMount(() => {
 		autoScroll.startObserving();
 
@@ -357,7 +365,7 @@
 	<div
 		bind:this={chatScrollContainer}
 		aria-label="Chat interface with file drop zone"
-		class="flex h-full flex-col-reverse overflow-y-auto px-4 md:px-6"
+		class="flex h-full flex-col overflow-y-auto px-4 md:px-6"
 		ondragenter={handleDragEnter}
 		ondragleave={handleDragLeave}
 		ondragover={handleDragOver}
@@ -373,6 +381,7 @@
 						autoScroll.enable();
 						autoScroll.scrollToBottom();
 					}}
+					onMessagesReady={handleMessagesReady}
 				/>
 			{/if}
 

tools/server/webui/src/lib/hooks/use-auto-scroll.svelte.ts

@@ -2,7 +2,6 @@ import { AUTO_SCROLL_AT_BOTTOM_THRESHOLD, AUTO_SCROLL_INTERVAL } from '$lib/cons
 
 export interface AutoScrollOptions {
 	disabled?: boolean;
-	isColumnReverse?: boolean;
 }
 
 /**
@@ -12,7 +11,6 @@ export interface AutoScrollOptions {
  * - Auto-scrolls to bottom during streaming/loading
  * - Stops auto-scroll when user manually scrolls up
  * - Resumes auto-scroll when user scrolls back to bottom
- * - Supports both normal and column-reverse scroll containers
  */
 export class AutoScrollController {
 	private _autoScrollEnabled = $state(true);
@@ -22,14 +20,11 @@ export class AutoScrollController {
 	private _scrollTimeout: ReturnType<typeof setTimeout> | undefined;
 	private _container: HTMLElement | undefined;
 	private _disabled: boolean;
-	private _isColumnReverse: boolean;
 	private _mutationObserver: MutationObserver | null = null;
 	private _rafPending = false;
 	private _observerEnabled = false;
-
 	constructor(options: AutoScrollOptions = {}) {
 		this._disabled = options.disabled ?? false;
-		this._isColumnReverse = options.isColumnReverse ?? false;
 	}
 
 	get autoScrollEnabled(): boolean {
@@ -73,20 +68,8 @@ export class AutoScrollController {
 		if (this._disabled || !this._container) return;
 
 		const { scrollTop, scrollHeight, clientHeight } = this._container;
-
-		let distanceFromBottom: number;
-		let isScrollingUp: boolean;
-
-		if (this._isColumnReverse) {
-			// column-reverse: scrollTop=0 at bottom, negative when scrolled up
-			distanceFromBottom = Math.abs(scrollTop);
-			isScrollingUp = scrollTop < this._lastScrollTop;
-		} else {
-			// normal: scrollTop=0 at top, increases when scrolled down
-			distanceFromBottom = scrollHeight - clientHeight - scrollTop;
-			isScrollingUp = scrollTop < this._lastScrollTop;
-		}
-
+		const distanceFromBottom = scrollHeight - clientHeight - scrollTop;
+		const isScrollingUp = scrollTop < this._lastScrollTop;
 		const isAtBottom = distanceFromBottom < AUTO_SCROLL_AT_BOTTOM_THRESHOLD;
 
 		if (isScrollingUp && !isAtBottom) {
@@ -116,13 +99,7 @@ export class AutoScrollController {
 	 */
 	scrollToBottom(behavior: ScrollBehavior = 'smooth'): void {
 		if (this._disabled || !this._container) return;
-
-		if (this._isColumnReverse) {
-			// column-reverse: scrollTop=0 is the bottom
-			this._container.scrollTo({ top: 0, behavior });
-		} else {
-			this._container.scrollTo({ top: this._container.scrollHeight, behavior });
-		}
+		this._container.scrollTo({ top: this._container.scrollHeight, behavior });
 	}
 
 	/**
@@ -210,20 +187,13 @@ export class AutoScrollController {
 	private _doStartObserving(): void {
 		if (!this._container || this._mutationObserver) return;
 
-		const isReverse = this._isColumnReverse;
-
 		this._mutationObserver = new MutationObserver(() => {
 			if (!this._autoScrollEnabled || this._rafPending) return;
 			this._rafPending = true;
 			requestAnimationFrame(() => {
 				this._rafPending = false;
 				if (this._autoScrollEnabled && this._container) {
-					if (isReverse) {
-						// column-reverse: scrollTop=0 is the bottom
-						this._container.scrollTop = 0;
-					} else {
-						this._container.scrollTop = this._container.scrollHeight;
-					}
+					this._container.scrollTop = this._container.scrollHeight;
 				}
 			});
 		});