From a5f6bde26f3a6a03bd3defbe8b4fa1bc6ccf7581 Mon Sep 17 00:00:00 2001
From: agoudbg <agoudbg@gmail.com>
Date: Fri, 21 Nov 2025 09:27:14 +0800
Subject: [PATCH] refactor: Welcome layout and conditional rendering (#690)

* refactor: Welcome layout and conditional rendering

Improves flex layout and spacing in ConversationStarter, and updates MessagesBlock to conditionally render ConversationStarter or MessageListView based on chat state. This streamlines the UI and removes redundant rendering logic.

* fix: replay mode

* fix: Remove unnecessary inset-0

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
---
 .../chat/components/conversation-starter.tsx  | 15 ++++++++++----
 .../app/chat/components/messages-block.tsx    | 20 +++++++++----------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/web/src/app/chat/components/conversation-starter.tsx b/web/src/app/chat/components/conversation-starter.tsx
index b80e4c10..f57ca4cd 100644
--- a/web/src/app/chat/components/conversation-starter.tsx
+++ b/web/src/app/chat/components/conversation-starter.tsx
@@ -19,11 +19,18 @@ export function ConversationStarter({
   const questions = t.raw("conversationStarters") as string[];
 
   return (
-    <div className={cn("flex flex-col items-center", className)}>
-      <div className="pointer-events-none fixed inset-0 flex items-center justify-center">
-        <Welcome className="pointer-events-auto mb-15 w-[75%] -translate-y-24" />
+    <div
+      className={cn(
+        "flex h-full flex-col items-center justify-between overflow-auto",
+        className,
+      )}
+    >
+      {/* Spacer for flex layout - pushes Welcome to center */}
+      <div />
+      <div className="pointer-events-none flex items-center justify-center">
+        <Welcome className="pointer-events-auto mt-14 mb-5 w-[75%]" />
       </div>
-      <ul className="flex flex-wrap">
+      <ul className="mb-6 flex flex-wrap">
         {questions.map((question, index) => (
           <motion.li
             key={`${index}-${question}`}
diff --git a/web/src/app/chat/components/messages-block.tsx b/web/src/app/chat/components/messages-block.tsx
index 31c125f8..83e134e0 100644
--- a/web/src/app/chat/components/messages-block.tsx
+++ b/web/src/app/chat/components/messages-block.tsx
@@ -87,19 +87,17 @@ export function MessagesBlock({ className }: { className?: string }) {
   }, [fastForwarding]);
   return (
     <div className={cn("flex h-full flex-col", className)}>
-      <MessageListView
-        className="flex flex-grow"
-        onFeedback={handleFeedback}
-        onSendMessage={handleSend}
-      />
+      {responding || messageCount !== 0 || isReplay ? (
+        <MessageListView
+          className="flex flex-grow"
+          onFeedback={handleFeedback}
+          onSendMessage={handleSend}
+        />
+      ) : (
+        <ConversationStarter onSend={handleSend} />
+      )}
       {!isReplay ? (
         <div className="relative flex h-42 shrink-0 pb-4">
-          {!responding && messageCount === 0 && (
-            <ConversationStarter
-              className="absolute top-[-218px] left-0"
-              onSend={handleSend}
-            />
-          )}
           <InputBox
             className="h-full w-full"
             responding={responding}