xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ai-chat): adjust layout for WelcomeScreen and ChatInterface 

- Updated the positioning of the personal prompt in the WelcomeScreen to use absolute positioning for better visibility.
- Corrected the translate-y calculation in ChatInterface to ensure proper alignment when no messages are present.

These changes enhance the layout and user experience of the AI chat interface.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-08-07 11:08:02 +08:00
parent d78b7961fe
commit 28867d117d
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
2 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx
View File

@ -197,7 +197,7 @@ const ChatInterfaceContent = () => {
className={clsx(
"absolute mx-auto duration-200 ease-in-out",
hasMessages && "inset-x-0 bottom-0 max-w-4xl px-6 pb-6",
!hasMessages && "inset-x-0 bottom-1/2 max-w-3xl translate-y-[calc(100%+2rem)] px-6 pb-6",
!hasMessages && "inset-x-0 bottom-1/2 max-w-3xl translate-y-[calc(100%-2rem)] px-6 pb-6",
)}
>
{error && <CollapsibleError error={error} />}

41
apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx
View File

@ -34,32 +34,12 @@ export const WelcomeScreen = ({ onSend }: WelcomeScreenProps) => {
<div className="flex flex-col gap-2">
<h1 className="text-text text-2xl font-semibold">{APP_NAME} AI</h1>
<p className="text-text-secondary text-balance text-sm">{t("welcome_description")}</p>
{hasCustomPrompt && (
<div className="bg-material-medium border-border mx-auto mt-2 w-full max-w-2xl rounded-lg border p-3 text-left">
<div className="flex items-center justify-between">
<div className="text-text-secondary mb-1 text-xs font-medium">
Personal Prompt:
</div>
<button
type="button"
onClick={() => settingModalPresent("ai")}
className="text-text-tertiary hover:text-text-secondary flex size-5 items-center justify-center rounded transition-colors"
title="Edit in Settings"
>
<i className="i-mgc-edit-cute-re size-3.5" />
</button>
</div>
<p className="text-text-secondary text-xs leading-relaxed">
{aiSettings.personalizePrompt}
</p>
</div>
)}
</div>
</div>
<div className="relative mx-auto h-36 max-w-2xl" />
<div className="flex flex-wrap items-center justify-center gap-2">
<div className="relative flex flex-wrap items-center justify-center gap-2">
{/* Custom shortcuts first */}
{enabledShortcuts.slice(0, 6).map((shortcut, index) => (
<m.button
@ -91,6 +71,25 @@ export const WelcomeScreen = ({ onSend }: WelcomeScreenProps) => {
{suggestion}
</m.button>
))}
{hasCustomPrompt && (
<div className="bg-material-medium border-border absolute -bottom-4 mx-auto mt-2 w-full max-w-2xl translate-y-full rounded-lg border p-3 text-left">
<div className="flex items-center justify-between">
<div className="text-text-secondary mb-1 text-xs font-medium">Personal Prompt:</div>
<button
type="button"
onClick={() => settingModalPresent("ai")}
className="text-text-tertiary hover:text-text-secondary flex size-5 items-center justify-center rounded transition-colors"
title="Edit in Settings"
>
<i className="i-mgc-edit-cute-re size-3.5" />
</button>
</div>
<p className="text-text-secondary text-xs leading-relaxed">
{aiSettings.personalizePrompt}
</p>
</div>
)}
</div>
</div>
</div>