webui: Spring Cleaning Refactor v1 (#22505)

* wip: server_tools

* feat: Integrate with `/tools` endpoint

* feat: Builtin + MCP + JSON Schema Tools WIP

* refactor

* displayName -> display_name

* snake_case everywhere

* rm redundant field

* feat: Improvements

* chore: update webui build output

* refactor: Updates after server updates

* chore: update webui build output

* change arg to --tools all

* feat: UI improvements

* chore: update webui build output

* add readme mention

* llama-gen-docs

* chore: update webui build output

* chore: update webui build output

* chore: update webui build output

* feat: Reorganize settings sections

* feat: Separate dialogs for MCP Servers Settings and Import/Export

* feat: WIP

* feat: WIP

* feat: WIP

* feat: WIP

* feat: WIP

* feat: WIP

* WIP on allozaur/20677-webui-server-tools

* feat: UI improvements

* chore: Update package lock

* chore: Run `npm audit fix`

* feat: UI WIP

* feat: UI

* refactor: Desktop Icon Strip DRY

* feat: Cleaner rendering and transition for ChatScreen

* feat: UI improvements

* feat: UI improvement

* feat: Remove MCP Server "enable" switch from Tools submenu

* chore: Run `npm audit fix`

* feat: WIP

* feat: Logic improvements

* refactor: Cleanup

* refactor: DRY

* test: Fix Chat Sidebar UI Tests

* chore: Update package lock

* refactor: Cleanup

* feat: Chat Message Action Card with Continue and Permission flow implementations

* feat: Add agentic steering messages, draft messages and improve chat UX

* fix: Search results UI

* test: Fix unit test

* feat: UI/UX improvements

* refactor: Simplify `useToolsPanel` access in components

* feat: Implement Processing Info Context API

* feat: Implement 'Go back to chat' functionality for settings

* feat: Enhance MCP Server management in Chat Form Attachments

* style: Minor UI and branding adjustments

* chore: Update webui static build output

* chore: Formatting, linting & type checks

* feat: Draft messages logic

* feat: UI improvements

* feat: Steering Messages improvements

* refactor: Cleanup

* refactor: Cleanup

* feat: Improve UI

* refactor: Settings navigation hook

* refactor: DRY code

* refactor: DRY ChatMessageUser UI components

* refactor: Desktop Icon Strip DRY

* refactor: Tools & permissions

* fix: Navigation condition

* refactor: Cleanup

* refactor: Cleanup

* refactor: Cleanup

* fix: preserve reasoning_content in agentic flow

* refactor: Storybook cleanup

* refactor: isInViewport util function

* refactor: Rename globally `onClick` to `onclick`

* chore: `npm audit fix`

* refactor: Action Icon usage

* refactor: Naming

* refactor: JS in `class` directive

* refactor: Chat components cleanup WIP

* refactor: Components structure

* refactor: Cleanup WIP

* feat: New ChatAttachmentsPreview component

* feat: UI improvements

* feat: UI improvements

* refactor: Cleanup

* refactor: ChatAttachmentsPreview UI/UX

* refactor: Remove dead code

* refactor: Cleanup

* fix: Model Name aliases displaying

* feat: Shortcut improvements

* refactor: Chat Message

* feat: Move Import/Export to settings

* refactor: Cleanup

* refactor: Cleanup

* refactor: Cleanup

* refactor: Cleanup

---------

Co-authored-by: Xuan Son Nguyen <son@huggingface.co>

tools/server/webui/src/routes/+layout.svelte

@@ -2,14 +2,15 @@
 	import '../app.css';
 	import { base } from '$app/paths';
 	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { untrack } from 'svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import {
-		ChatSidebar,
 		DesktopIconStrip,
-		DialogConversationTitleUpdate
+		DialogConversationTitleUpdate,
+		SidebarNavigation
 	} from '$lib/components/app';
 	import { conversationsStore } from '$lib/stores/conversations.svelte';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
@@ -24,6 +25,7 @@
 	import { IsMobile } from '$lib/hooks/is-mobile.svelte';
 	import { useKeyboardShortcuts } from '$lib/hooks/use-keyboard-shortcuts.svelte';
 	import { useSettingsNavigation } from '$lib/hooks/use-settings-navigation.svelte';
+	import { conversations } from '$lib/stores/conversations.svelte';
 
 	let { children } = $props();
 
@@ -37,7 +39,6 @@
 		| { activateSearchMode?: () => void; editActiveConversation?: () => void }
 		| undefined = $state();
 
-	// Conversation title update dialog state
 	let titleUpdateDialogOpen = $state(false);
 	let titleUpdateCurrentTitle = $state('');
 	let titleUpdateNewTitle = $state('');
@@ -45,13 +46,70 @@
 
 	const panelNav = useSettingsNavigation();
 
+	function navigateToConversation(direction: -1 | 1) {
+		const allConvs = conversations();
+		if (allConvs.length === 0) return;
+
+		const currentId = page.params.id;
+
+		if (!currentId) {
+			goto(`#/chat/${allConvs[direction === 1 ? 0 : allConvs.length - 1].id}`);
+
+			return;
+		}
+
+		const idx = allConvs.findIndex((c) => c.id === currentId);
+		if (idx === -1) return;
+
+		const targetIdx = idx + direction;
+
+		if (targetIdx >= 0 && targetIdx < allConvs.length) {
+			goto(`#/chat/${allConvs[targetIdx].id}`);
+		} else {
+			goto('?new_chat=true#/');
+		}
+	}
+
 	// Global keyboard shortcuts
 	const { handleKeydown } = useKeyboardShortcuts({
-		editActiveConversation: () => chatSidebar?.editActiveConversation?.()
+		editActiveConversation: () => chatSidebar?.editActiveConversation?.(),
+
+		navigateToPrevConversation: () => navigateToConversation(-1),
+
+		navigateToNextConversation: () => navigateToConversation(1)
 	});
 
+	function checkApiKey() {
+		const apiKey = config().apiKey;
+
+		if (
+			(page.route.id === '/(chat)' || page.route.id === '/(chat)/chat/[id]') &&
+			page.status !== 401 &&
+			page.status !== 403
+		) {
+			const headers: Record<string, string> = {
+				'Content-Type': 'application/json'
+			};
+
+			if (apiKey && apiKey.trim() !== '') {
+				headers.Authorization = `Bearer ${apiKey.trim()}`;
+			}
+
+			fetch(`${base}/props`, { headers })
+				.then((response) => {
+					if (response.status === 401 || response.status === 403) {
+						window.location.reload();
+					}
+				})
+				.catch((e) => {
+					console.error('Error checking API key:', e);
+				});
+		}
+	}
+
 	function handleTitleUpdateCancel() {
 		titleUpdateDialogOpen = false;
+
 		if (titleUpdateResolve) {
 			titleUpdateResolve(false);
 			titleUpdateResolve = null;
@@ -60,6 +118,7 @@
 
 	function handleTitleUpdateConfirm() {
 		titleUpdateDialogOpen = false;
+
 		if (titleUpdateResolve) {
 			titleUpdateResolve(true);
 			titleUpdateResolve = null;
@@ -135,31 +194,7 @@
 
 	// Monitor API key changes and redirect to error page if removed or changed when required
 	$effect(() => {
-		const apiKey = config().apiKey;
-
-		if (
-			(page.route.id === '/(chat)' || page.route.id === '/(chat)/chat/[id]') &&
-			page.status !== 401 &&
-			page.status !== 403
-		) {
-			const headers: Record<string, string> = {
-				'Content-Type': 'application/json'
-			};
-
-			if (apiKey && apiKey.trim() !== '') {
-				headers.Authorization = `Bearer ${apiKey.trim()}`;
-			}
-
-			fetch(`${base}/props`, { headers })
-				.then((response) => {
-					if (response.status === 401 || response.status === 403) {
-						window.location.reload();
-					}
-				})
-				.catch((e) => {
-					console.error('Error checking API key:', e);
-				});
-		}
+		checkApiKey();
 	});
 
 	// Set up title update confirmation callback
@@ -193,7 +228,7 @@
 	<Sidebar.Provider bind:open={sidebarOpen}>
 		<div class="flex h-screen w-full" style:height="{innerHeight}px">
 			<Sidebar.Root variant="floating" class="h-full">
-				<ChatSidebar bind:this={chatSidebar} />
+				<SidebarNavigation bind:this={chatSidebar} />
 			</Sidebar.Root>
 
 			{#if !(alwaysShowSidebarOnDesktop && isDesktop) && !(panelNav.isSettingsRoute && !isDesktop)}

tools/server/webui/src/routes/settings/import-export/+page.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { SettingsImportExport } from '$lib/components/app/settings';
-</script>
-
-<div class="mx-auto w-full p-4 md:p-8 md:py-10">
-	<SettingsImportExport />
-</div>