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>

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}`}

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}