From 9e5abc2627e9daa50139d10e5b66eead45417635 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 06:29:30 +0000
Subject: [PATCH 1/2] feat: Display example prompts on desktop

Refactored the chat component to ensure that example prompts are displayed on desktop, tablet, and mobile devices.

- Created a new `ConditionalChatMessages` component to handle the logic of displaying either the `EmptyScreen` or the `ChatMessages` based on whether there are messages.
- Updated the `Chat` component to use the new `ConditionalChatMessages` component in both mobile and desktop layouts, removing duplicated code and improving maintainability.
---
 components/chat.tsx                      | 24 +++++++++++-------------
 components/conditional-chat-messages.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 components/conditional-chat-messages.tsx

diff --git a/components/chat.tsx b/components/chat.tsx
index 34e92244..df6e4a4f 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -3,9 +3,8 @@
 import { useEffect, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
 import { ChatPanel } from './chat-panel'
-import { ChatMessages } from './chat-messages'
-import { EmptyScreen } from './empty-screen'
 import { Mapbox } from './map/mapbox-map'
+import { ConditionalChatMessages } from './conditional-chat-messages'
 import { useUIState, useAIState } from 'ai/rsc'
 import MobileIconsBar from './mobile-icons-bar'
 import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
@@ -86,15 +85,11 @@ export function Chat({ id }: ChatProps) {
             <ChatPanel messages={messages} input={input} setInput={setInput} />
           </div>
           <div className="mobile-chat-messages-area">
-            {showEmptyScreen ? (
-              <EmptyScreen
-                submitMessage={message => {
-                  setInput(message)
-                }}
-              />
-            ) : (
-              <ChatMessages messages={messages} />
-            )}
+            <ConditionalChatMessages
+              messages={messages}
+              showEmptyScreen={showEmptyScreen}
+              setInput={setInput}
+            />
           </div>
         </div>
       </MapDataProvider>
@@ -107,8 +102,11 @@ export function Chat({ id }: ChatProps) {
       <div className="flex justify-start items-start">
         {/* This is the new div for scrolling */}
         <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-12 md:pt-14 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
-          {/* TODO: Add EmptyScreen for desktop if needed */}
-          <ChatMessages messages={messages} />
+          <ConditionalChatMessages
+            messages={messages}
+            showEmptyScreen={showEmptyScreen}
+            setInput={setInput}
+          />
           <ChatPanel messages={messages} input={input} setInput={setInput} />
         </div>
         <div
diff --git a/components/conditional-chat-messages.tsx b/components/conditional-chat-messages.tsx
new file mode 100644
index 00000000..c125cd0c
--- /dev/null
+++ b/components/conditional-chat-messages.tsx
@@ -0,0 +1,24 @@
+import { ChatMessages } from './chat-messages';
+import { EmptyScreen } from './empty-screen';
+
+export function ConditionalChatMessages({
+  messages,
+  showEmptyScreen,
+  setInput,
+}: {
+  messages: any[];
+  showEmptyScreen: boolean;
+  setInput: (value: string) => void;
+}) {
+  if (showEmptyScreen) {
+    return (
+      <EmptyScreen
+        submitMessage={(message) => {
+          setInput(message);
+        }}
+      />
+    );
+  }
+
+  return <ChatMessages messages={messages} />;
+}
\ No newline at end of file

From d197681180271f2fc71caeebf8ddce7eb0d85306 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 06:34:44 +0000
Subject: [PATCH 2/2] feat: Display example prompts on desktop and move them
 below the input

This commit updates the chat component to display example prompts on desktop, tablet, and mobile devices, and positions them below the chat input area.

- The `Chat` component is modified to render the `ChatPanel` (input) before the `EmptyScreen` (prompts) or `ChatMessages` (history).
- This change ensures a consistent layout across all screen sizes, with the input field always appearing above the content area.
- The unnecessary `conditional-chat-messages.tsx` component has been removed, and its logic is now handled directly within `chat.tsx`.
---
 components/chat.tsx                      | 31 +++++++++++++++---------
 components/conditional-chat-messages.tsx | 24 ------------------
 2 files changed, 20 insertions(+), 35 deletions(-)
 delete mode 100644 components/conditional-chat-messages.tsx

diff --git a/components/chat.tsx b/components/chat.tsx
index df6e4a4f..59c4d914 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -3,8 +3,9 @@
 import { useEffect, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
 import { ChatPanel } from './chat-panel'
+import { ChatMessages } from './chat-messages'
+import { EmptyScreen } from './empty-screen'
 import { Mapbox } from './map/mapbox-map'
-import { ConditionalChatMessages } from './conditional-chat-messages'
 import { useUIState, useAIState } from 'ai/rsc'
 import MobileIconsBar from './mobile-icons-bar'
 import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
@@ -85,11 +86,15 @@ export function Chat({ id }: ChatProps) {
             <ChatPanel messages={messages} input={input} setInput={setInput} />
           </div>
           <div className="mobile-chat-messages-area">
-            <ConditionalChatMessages
-              messages={messages}
-              showEmptyScreen={showEmptyScreen}
-              setInput={setInput}
-            />
+            {showEmptyScreen ? (
+              <EmptyScreen
+                submitMessage={message => {
+                  setInput(message)
+                }}
+              />
+            ) : (
+              <ChatMessages messages={messages} />
+            )}
           </div>
         </div>
       </MapDataProvider>
@@ -102,12 +107,16 @@ export function Chat({ id }: ChatProps) {
       <div className="flex justify-start items-start">
         {/* This is the new div for scrolling */}
         <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-12 md:pt-14 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
-          <ConditionalChatMessages
-            messages={messages}
-            showEmptyScreen={showEmptyScreen}
-            setInput={setInput}
-          />
           <ChatPanel messages={messages} input={input} setInput={setInput} />
+          {showEmptyScreen ? (
+            <EmptyScreen
+              submitMessage={message => {
+                setInput(message)
+              }}
+            />
+          ) : (
+            <ChatMessages messages={messages} />
+          )}
         </div>
         <div
           className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
diff --git a/components/conditional-chat-messages.tsx b/components/conditional-chat-messages.tsx
deleted file mode 100644
index c125cd0c..00000000
--- a/components/conditional-chat-messages.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ChatMessages } from './chat-messages';
-import { EmptyScreen } from './empty-screen';
-
-export function ConditionalChatMessages({
-  messages,
-  showEmptyScreen,
-  setInput,
-}: {
-  messages: any[];
-  showEmptyScreen: boolean;
-  setInput: (value: string) => void;
-}) {
-  if (showEmptyScreen) {
-    return (
-      <EmptyScreen
-        submitMessage={(message) => {
-          setInput(message);
-        }}
-      />
-    );
-  }
-
-  return <ChatMessages messages={messages} />;
-}
\ No newline at end of file