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)
This commit is contained in:
balibabu
2026-03-30 20:16:52 +08:00
committed by GitHub
parent 620fe215a4
commit 3a4f0d1a83
2 changed files with 46 additions and 42 deletions

View File

@@ -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 };

View File

@@ -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>
</>
);