webui: Add setting to always show sidebar on Desktop (#17809)

* feat: Add setting to always show Sidebar on Desktop

* chore: update webui build output

* feat: Add auto-show sidebar setting

* fix: Mobile settings dialog UI

* chore: update webui build output

* feat: UI label update

* chore: update webui build output

* chore: update webui build output

* chore: update webui build output

* refactor: Cleanup

* chore: update webui build output

diff --git a/tools/server/public/index.html.gz b/tools/server/public/index.html.gz
index 85be6c4c001e97e8a1c06eae8f032c829379e94e..a58285a1a2c0103fafc517f2e851913dd774d277 100644 (file)
Binary files a/tools/server/public/index.html.gz and b/tools/server/public/index.html.gz differ

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
index 45640e42a0174cf940c33dda305797a53ef916a8..6dfae599507862bb355e9a3b05e8db4f989e6fc3 100644 (file)
--- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
@@ -109,6 +109,16 @@
                                        key: 'disableAutoScroll',
                                        label: 'Disable automatic scroll',
                                        type: 'checkbox'
+                               },
+                               {
+                                       key: 'alwaysShowSidebarOnDesktop',
+                                       label: 'Always show sidebar on desktop',
+                                       type: 'checkbox'
+                               },
+                               {
+                                       key: 'autoShowSidebarOnNewChat',
+                                       label: 'Auto-show sidebar on new chat',
+                                       type: 'checkbox'
                                }
                        ]
                },
@@ -404,7 +414,7 @@
        </div>
 
        <!-- Mobile Header with Horizontal Scrollable Menu -->
-       <div class="flex flex-col md:hidden">
+       <div class="flex flex-col pt-6 md:hidden">
                <div class="border-b border-border/30 py-4">
                        <!-- Horizontal Scrollable Category Menu with Navigation -->
                        <div class="relative flex items-center" style="scroll-padding: 1rem;">

diff --git a/tools/server/webui/src/lib/constants/settings-config.ts b/tools/server/webui/src/lib/constants/settings-config.ts
index 3764a2856b52d4a879ef671f1ce73def1c1a7198..8024be92e19a620255e23fed81864ddbd8479ce5 100644 (file)
--- a/tools/server/webui/src/lib/constants/settings-config.ts
+++ b/tools/server/webui/src/lib/constants/settings-config.ts
@@ -15,6 +15,8 @@ export const SETTING_CONFIG_DEFAULT: Record<string, string | number | boolean> =
        pdfAsImage: false,
        disableAutoScroll: false,
        renderUserContentAsMarkdown: false,
+       alwaysShowSidebarOnDesktop: false,
+       autoShowSidebarOnNewChat: true,
        autoMicOnEmpty: false,
        // make sure these default values are in sync with `common.h`
        samplers: 'top_k;typ_p;top_p;min_p;temperature',
@@ -96,6 +98,10 @@ export const SETTING_CONFIG_INFO: Record<string, string> = {
        disableAutoScroll:
                'Disable automatic scrolling while messages stream so you can control the viewport position manually.',
        renderUserContentAsMarkdown: 'Render user messages using markdown formatting in the chat.',
+       alwaysShowSidebarOnDesktop:
+               'Always keep the sidebar visible on desktop instead of auto-hiding it.',
+       autoShowSidebarOnNewChat:
+               'Automatically show sidebar when starting a new chat. Disable to keep the sidebar hidden until you click on it.',
        autoMicOnEmpty:
                'Automatically show microphone button instead of send button when textarea is empty for models with audio modality support.',
        pyInterpreterEnabled:

diff --git a/tools/server/webui/src/routes/+layout.svelte b/tools/server/webui/src/routes/+layout.svelte
index 27dfac19c3e7e6c0da6c8cdbabb44152d9c76418..17e13e9f33dbb50b209fdc89e2edfebbd0bd841d 100644 (file)
--- a/tools/server/webui/src/routes/+layout.svelte
+++ b/tools/server/webui/src/routes/+layout.svelte
@@ -14,6 +14,7 @@
        import { goto } from '$app/navigation';
        import { modelsStore } from '$lib/stores/models.svelte';
        import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
+       import { IsMobile } from '$lib/hooks/is-mobile.svelte';
 
        let { children } = $props();
 
@@ -21,6 +22,10 @@
        let isHomeRoute = $derived(page.route.id === '/');
        let isNewChatMode = $derived(page.url.searchParams.get('new_chat') === 'true');
        let showSidebarByDefault = $derived(activeMessages().length > 0 || isLoading());
+       let alwaysShowSidebarOnDesktop = $derived(config().alwaysShowSidebarOnDesktop);
+       let autoShowSidebarOnNewChat = $derived(config().autoShowSidebarOnNewChat);
+       let isMobile = new IsMobile();
+       let isDesktop = $derived(!isMobile.current);
        let sidebarOpen = $state(false);
        let innerHeight = $state<number | undefined>();
        let chatSidebar:
@@ -76,6 +81,11 @@
        }
 
        $effect(() => {
+               if (alwaysShowSidebarOnDesktop && isDesktop) {
+                       sidebarOpen = true;
+                       return;
+               }
+
                if (isHomeRoute && !isNewChatMode) {
                        // Auto-collapse sidebar when navigating to home route (but not in new chat mode)
                        sidebarOpen = false;
@@ -83,8 +93,11 @@
                        // Keep sidebar open in new chat mode
                        sidebarOpen = true;
                } else if (isChatRoute) {
-                       // On chat routes, show sidebar by default
-                       sidebarOpen = true;
+                       // On chat routes, only auto-show sidebar if setting is enabled
+                       if (autoShowSidebarOnNewChat) {
+                               sidebarOpen = true;
+                       }
+                       // If setting is disabled, don't change sidebar state - let user control it manually
                } else {
                        // Other routes follow default behavior
                        sidebarOpen = showSidebarByDefault;
@@ -190,12 +203,14 @@
                                <ChatSidebar bind:this={chatSidebar} />
                        </Sidebar.Root>
 
-                       <Sidebar.Trigger
-                               class="transition-left absolute left-0 z-[900] h-8 w-8 duration-200 ease-linear {sidebarOpen
-                                       ? 'md:left-[var(--sidebar-width)]'
-                                       : ''}"
-                               style="translate: 1rem 1rem;"
-                       />
+                       {#if !(alwaysShowSidebarOnDesktop && isDesktop)}
+                               <Sidebar.Trigger
+                                       class="transition-left absolute left-0 z-[900] h-8 w-8 duration-200 ease-linear {sidebarOpen
+                                               ? 'md:left-[var(--sidebar-width)]'
+                                               : ''}"
+                                       style="translate: 1rem 1rem;"
+                               />
+                       {/if}
 
                        <Sidebar.Inset class="flex flex-1 flex-col overflow-hidden">
                                {@render children?.()}