From 3a4f0d1a83659563ea1271e692ce9b26db89328a Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 30 Mar 2026 20:16:52 +0800
Subject: [PATCH] Fix: The chat settings are not displayed correctly on the
 first page load. (#13855)

### What problem does this PR solve?
Fix: The chat settings are not displayed correctly on the first page
load.

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/ui/tree-view.tsx           |  6 +-
 .../chat/app-settings/chat-settings.tsx       | 82 ++++++++++---------
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/web/src/components/ui/tree-view.tsx b/web/src/components/ui/tree-view.tsx
index 8d954c2504..6327370ef6 100644
--- a/web/src/components/ui/tree-view.tsx
+++ b/web/src/components/ui/tree-view.tsx
@@ -7,11 +7,11 @@ import { ChevronRight } from 'lucide-react';
 import React from 'react';
 
 const treeVariants = cva(
-  'group hover:before:opacity-100 before:absolute before:rounded-lg before:left-0 px-2 before:w-full before:opacity-0 before:bg-accent/70 before:h-[2rem] before:-z-10',
+  'group hover:before:opacity-100 before:absolute before:rounded-lg before:left-0 px-2 before:w-full before:opacity-0 before:bg-accent/70 before:h-[2rem] before:-z-10 text-text-secondary',
 );
 
 const selectedTreeVariants = cva(
-  'before:opacity-100 before:bg-[#4E74Fd]/70 text-accent-foreground',
+  'before:opacity-100 before:bg-bg-card text-accent-foreground',
 );
 
 export interface TreeDataItem {
@@ -355,4 +355,4 @@ const TreeActions = ({
   );
 };
 
-export { TreeView, type TreeDataItem };
+export { TreeView };
diff --git a/web/src/pages/next-chats/chat/app-settings/chat-settings.tsx b/web/src/pages/next-chats/chat/app-settings/chat-settings.tsx
index 7276268d57..14cd0da620 100644
--- a/web/src/pages/next-chats/chat/app-settings/chat-settings.tsx
+++ b/web/src/pages/next-chats/chat/app-settings/chat-settings.tsx
@@ -120,54 +120,58 @@ export function ChatSettings({ hasSingleChatBox }: ChatSettingsProps) {
       <section
         data-testid="chat-detail-settings"
         className={cn(
-          'transition-[width] ease-out duration-300 flex-shrink-0 flex flex-col',
+          'transition-[width] ease-out duration-300 flex-shrink-0 flex flex-col overflow-hidden',
           settingVisible ? 'w-[440px]' : 'w-0',
         )}
       >
-        <div className="p-5 pb-2 flex justify-between items-center text-base">
-          {t('chat.chatSetting')}
+        {settingVisible && (
+          <>
+            <div className="p-5 pb-2 flex justify-between items-center text-base">
+              {t('chat.chatSetting')}
 
-          <Button
-            variant="transparent"
-            size="icon-sm"
-            className="border-0"
-            onClick={switchSettingVisible}
-            data-testid="chat-detail-settings-close"
-          >
-            <LucidePanelRightClose
-              className="size-4 cursor-pointer"
-              onClick={switchSettingVisible}
-            />
-          </Button>
-        </div>
-
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit, onInvalid)}
-            className="flex-1 flex flex-col min-h-0"
-          >
-            <ScrollArea>
-              <section className="p-5 space-y-6 overflow-auto flex-1 min-h-0">
-                <ChatBasicSetting></ChatBasicSetting>
-                <Separator />
-                <ChatPromptEngine></ChatPromptEngine>
-                <Separator />
-                <ChatModelSettings></ChatModelSettings>
-              </section>
-            </ScrollArea>
-
-            <div className="p-5 pt-4 space-x-5 text-right">
               <Button
-                variant={'outline'}
+                variant="transparent"
+                size="icon-sm"
+                className="border-0"
                 onClick={switchSettingVisible}
-                data-testid="chat-detail-settings-cancel"
+                data-testid="chat-detail-settings-close"
               >
-                {t('chat.cancel')}
+                <LucidePanelRightClose
+                  className="size-4 cursor-pointer"
+                  onClick={switchSettingVisible}
+                />
               </Button>
-              <SavingButton loading={loading}></SavingButton>
             </div>
-          </form>
-        </Form>
+
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit, onInvalid)}
+                className="flex-1 flex flex-col min-h-0"
+              >
+                <ScrollArea>
+                  <section className="p-5 space-y-6 overflow-auto flex-1 min-h-0">
+                    <ChatBasicSetting></ChatBasicSetting>
+                    <Separator />
+                    <ChatPromptEngine></ChatPromptEngine>
+                    <Separator />
+                    <ChatModelSettings></ChatModelSettings>
+                  </section>
+                </ScrollArea>
+
+                <div className="p-5 pt-4 space-x-5 text-right">
+                  <Button
+                    variant={'outline'}
+                    onClick={switchSettingVisible}
+                    data-testid="chat-detail-settings-cancel"
+                  >
+                    {t('chat.cancel')}
+                  </Button>
+                  <SavingButton loading={loading}></SavingButton>
+                </div>
+              </form>
+            </Form>
+          </>
+        )}
       </section>
     </>
   );