From 28867d117dc2b44c1e8c7c8019669389cd3e0fa3 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 7 Aug 2025 11:08:02 +0800
Subject: [PATCH] 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>
---
 .../components/layouts/ChatInterface.tsx      |  2 +-
 .../components/layouts/WelcomeScreen.tsx      | 41 +++++++++----------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx
index d9c969eb0..b4cdce21b 100644
--- a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx
@@ -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} />}
diff --git a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx
index 95582ea1e..ff25037c3 100644
--- a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx
@@ -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>