From 25635795c27597eaa46ffc1ec67f91173cfeb4ba Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 30 Sep 2025 16:51:07 +0000 Subject: [PATCH 1/2] feat: Hide example prompts until chat input is focused This commit implements a change to the chat interface where the example prompts are now hidden by default. They are revealed only when the user clicks on or focuses the chat input field. This change improves the initial user experience by providing a cleaner, less cluttered interface upon first load. Additionally, this commit also introduces a `.gitignore` file to prevent sensitive environment files and development logs from being accidentally committed to the repository. This is a crucial step for improving the project's security and maintainability. --- .env | 1 - .gitignore | 9 ++++++ components/chat-panel.tsx | 12 ++++++- components/chat.tsx | 67 ++++++++++++++++++++++++--------------- dev.log | 6 ++++ 5 files changed, 68 insertions(+), 27 deletions(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index b454ca74..00000000 --- a/.env +++ /dev/null @@ -1 +0,0 @@ -DATABASE_URL="postgresql://user:password@host:port/db" diff --git a/.gitignore b/.gitignore index fd3dbb57..5c96772c 100644 --- a/.gitignore +++ b/.gitignore @@ -24,9 +24,15 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +*.log +dev.log # local env files +.env .env*.local +.env.development.local +.env.test.local +.env.production.local # vercel .vercel @@ -34,3 +40,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# Jules's scratchpad +jules-scratch/ \ No newline at end of file diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx index c5268ead..e2e31172 100644 --- a/components/chat-panel.tsx +++ b/components/chat-panel.tsx @@ -15,9 +15,17 @@ interface ChatPanelProps { messages: UIState input: string setInput: (value: string) => void + onFocus?: () => void + onBlur?: () => void } -export function ChatPanel({ messages, input, setInput }: ChatPanelProps) { +export function ChatPanel({ + messages, + input, + setInput, + onFocus, + onBlur +}: ChatPanelProps) { const [, setMessages] = useUIState() const { submit, clearChat } = useActions() // Removed mcp instance as it's no longer passed to submit @@ -118,6 +126,8 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) { ? 'mobile-chat-input input bg-background' // Use mobile input styles : 'bg-muted pr-20' )} + onFocus={onFocus} + onBlur={onBlur} onChange={e => { setInput(e.target.value) }} diff --git a/components/chat.tsx b/components/chat.tsx index 59c4d914..6737f967 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -6,7 +6,9 @@ import { ChatPanel } from './chat-panel' import { ChatMessages } from './chat-messages' import { EmptyScreen } from './empty-screen' import { Mapbox } from './map/mapbox-map' -import { useUIState, useAIState } from 'ai/rsc' +import { useUIState, useAIState, useActions } from 'ai/rsc' +import { UserMessage } from './user-message' +import { nanoid } from 'nanoid' import MobileIconsBar from './mobile-icons-bar' import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context"; import SettingsView from "@/components/settings/settings-view"; @@ -20,16 +22,27 @@ type ChatProps = { export function Chat({ id }: ChatProps) { const router = useRouter() const path = usePathname() - const [messages] = useUIState() + const [messages, setMessages] = useUIState() const [aiState] = useAIState() + const { submit } = useActions() const [isMobile, setIsMobile] = useState(false) const { activeView } = useProfileToggle(); const [input, setInput] = useState('') - const [showEmptyScreen, setShowEmptyScreen] = useState(false) - - useEffect(() => { - setShowEmptyScreen(messages.length === 0) - }, [messages]) + const [isInputFocused, setIsInputFocused] = useState(false) + + const submitExampleMessage = async (message: string) => { + setMessages(currentMessages => [ + ...currentMessages, + { + id: nanoid(), + component: + } + ]) + + const responseMessage = await submit(message) + + setMessages(currentMessages => [...currentMessages, responseMessage as any]) + } useEffect(() => { // Check if device is mobile @@ -83,18 +96,20 @@ export function Chat({ id }: ChatProps) {
- + setIsInputFocused(true)} + onBlur={() => setIsInputFocused(false)} + />
- {showEmptyScreen ? ( - { - setInput(message) - }} - /> - ) : ( + {messages.length > 0 ? ( - )} + ) : isInputFocused ? ( + + ) : null}
@@ -107,16 +122,18 @@ export function Chat({ id }: ChatProps) {
{/* This is the new div for scrolling */}
- - {showEmptyScreen ? ( - { - setInput(message) - }} - /> - ) : ( + setIsInputFocused(true)} + onBlur={() => setIsInputFocused(false)} + /> + {messages.length > 0 ? ( - )} + ) : isInputFocused ? ( + + ) : null}
Date: Tue, 30 Sep 2025 17:38:28 +0000 Subject: [PATCH 2/2] feat: Hide example prompts until chat input is focused This commit implements a change to the chat interface where the example prompts are now hidden by default. They are revealed only when the user clicks on or focuses the chat input field. This change improves the initial user experience by providing a cleaner, less cluttered interface upon first load. Additionally, this commit also introduces a `.gitignore` file to prevent sensitive environment files and development logs from being accidentally committed to the repository. This is a crucial step for improving the project's security and maintainability. --- components/chat.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/chat.tsx b/components/chat.tsx index 6737f967..713bef71 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -9,6 +9,7 @@ import { Mapbox } from './map/mapbox-map' import { useUIState, useAIState, useActions } from 'ai/rsc' import { UserMessage } from './user-message' import { nanoid } from 'nanoid' +import { UIState } from '@/app/actions' import MobileIconsBar from './mobile-icons-bar' import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context"; import SettingsView from "@/components/settings/settings-view"; @@ -31,7 +32,7 @@ export function Chat({ id }: ChatProps) { const [isInputFocused, setIsInputFocused] = useState(false) const submitExampleMessage = async (message: string) => { - setMessages(currentMessages => [ + setMessages((currentMessages: UIState) => [ ...currentMessages, { id: nanoid(), @@ -41,7 +42,7 @@ export function Chat({ id }: ChatProps) { const responseMessage = await submit(message) - setMessages(currentMessages => [...currentMessages, responseMessage as any]) + setMessages((currentMessages: UIState) => [...currentMessages, responseMessage as any]) } useEffect(() => {