From 9b92a09857de36e5743b3a75b5280298060ed726 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 7 Oct 2025 16:53:29 +0000 Subject: [PATCH 1/3] Refactor: Move map analysis button to navigation bars This commit refactors the 'Analyze current map view' functionality by moving the trigger from a floating button over the map to the main navigation bars for both desktop and mobile views. Key changes: - Created a new `AnalysisToolContext` to manage the state and logic for the map analysis, including the `isAnalyzing` state and the `handleResolutionSearch` function. - Integrated the `AnalysisToolProvider` into the main `Chat` component to make the context available to the header and mobile navigation bar. - Modified the desktop `Header` and `MobileIconsBar` to use the `useAnalysisTool` hook, connecting the search icon to the map analysis functionality. - The button now correctly shows a spinning animation during analysis and is disabled until the map is loaded, as per the requirements. - Added the 'use client' directive to `analysis-tool-context.tsx` and `header.tsx` to resolve application crashes in the Next.js environment. --- ...sis-tool.tsx => analysis-tool-context.tsx} | 46 +++++---- components/chat.tsx | 93 +++++++++--------- components/header.tsx | 21 +++- components/mobile-icons-bar.tsx | 18 +++- dev_server.log | 6 -- .../verification/error_screenshot.png | Bin 35755 -> 0 bytes .../verification/verify_e2e_analysis.py | 66 ------------- 7 files changed, 107 insertions(+), 143 deletions(-) rename components/{analysis-tool.tsx => analysis-tool-context.tsx} (67%) delete mode 100644 jules-scratch/verification/error_screenshot.png delete mode 100644 jules-scratch/verification/verify_e2e_analysis.py diff --git a/components/analysis-tool.tsx b/components/analysis-tool-context.tsx similarity index 67% rename from components/analysis-tool.tsx rename to components/analysis-tool-context.tsx index db53fa71..4a63c46e 100644 --- a/components/analysis-tool.tsx +++ b/components/analysis-tool-context.tsx @@ -1,16 +1,25 @@ 'use client' -import React, { useState } from 'react' +'use client' + +import React, { createContext, useContext, useState, ReactNode } from 'react' import { useActions, useUIState } from 'ai/rsc' import { AI } from '@/app/actions' -import { Button } from '@/components/ui/button' -import { Search } from 'lucide-react' import { useMap } from './map/map-context' import { nanoid } from 'nanoid' import { UserMessage } from './user-message' import { toast } from 'react-toastify' -export function AnalysisTool() { +type AnalysisToolContextType = { + isAnalyzing: boolean + handleResolutionSearch: () => void +} + +const AnalysisToolContext = createContext( + undefined +) + +export const AnalysisToolProvider = ({ children }: { children: ReactNode }) => { const { map } = useMap() const { submit } = useActions() const [, setMessages] = useUIState() @@ -57,21 +66,18 @@ export function AnalysisTool() { } return ( -
- -
+ + {children} + ) +} + +export const useAnalysisTool = (): AnalysisToolContextType => { + const context = useContext(AnalysisToolContext) + if (!context) { + throw new Error('useAnalysisTool must be used within an AnalysisToolProvider') + } + return context } \ No newline at end of file diff --git a/components/chat.tsx b/components/chat.tsx index 44de7be0..38bdb09b 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -13,11 +13,7 @@ import SettingsView from "@/components/settings/settings-view"; import { MapDataProvider, useMapData } from './map/map-data-context'; // Add this and useMapData import { MapProvider } from './map/map-context' import { updateDrawingContext } from '@/lib/actions/chat'; // Import the server action -import dynamic from 'next/dynamic' - -const AnalysisTool = dynamic(() => import('./analysis-tool').then(mod => mod.AnalysisTool), { - ssr: false, -}) +import { AnalysisToolProvider } from './analysis-tool-context'; type ChatProps = { id?: string // This is the chatId @@ -87,28 +83,30 @@ export function Chat({ id }: ChatProps) { return ( {/* Add Provider */} -
-
- {activeView ? : } -
-
- -
-
- -
-
- {showEmptyScreen ? ( - { - setInput(message) - }} - /> - ) : ( - - )} + +
+
+ {activeView ? : }
-
+
+ +
+
+ +
+
+ {showEmptyScreen ? ( + { + setInput(message) + }} + /> + ) : ( + + )} +
+
+ ); @@ -118,28 +116,29 @@ export function Chat({ id }: ChatProps) { return ( {/* Add Provider */} -
- {/* This is the new div for scrolling */} -
- - {showEmptyScreen ? ( - { - setInput(message) - }} - /> - ) : ( - - )} -
-
- {activeView ? : } - + +
+ {/* This is the new div for scrolling */} +
+ + {showEmptyScreen ? ( + { + setInput(message) + }} + /> + ) : ( + + )} +
+
+ {activeView ? : } +
-
+ ); diff --git a/components/header.tsx b/components/header.tsx index 0a370612..9b53d65f 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,3 +1,5 @@ +'use client' + import React from 'react' import Image from 'next/image' import { ModeToggle } from './mode-toggle' @@ -13,8 +15,13 @@ import { } from 'lucide-react' import { MapToggle } from './map-toggle' import { ProfileToggle } from './profile-toggle' +import { useAnalysisTool } from './analysis-tool-context' +import { useMap } from './map/map-context' export const Header = () => { + const { isAnalyzing, handleResolutionSearch } = useAnalysisTool() + const { map } = useMap() + return (
@@ -39,8 +46,18 @@ export const Header = () => { - -