From 164ef5b8becf987ed9f5a10ea175221c2d64f008 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 b80e4c1..f57ca4c 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 31c125f..83e134e 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}