Fix/google maps gemini grounding

app/actions.tsx

@@ -285,6 +285,8 @@ async function submit(formData?: FormData, skip?: boolean) {
   const userId = 'anonymous'
   const currentSystemPrompt = (await getSystemPrompt(userId)) || ''
 
+  const mapProvider = formData?.get('mapProvider') as 'mapbox' | 'google'
+
   async function processEvents() {
     let action: any = { object: { next: 'proceed' } }
     if (!skip) {
@@ -330,6 +332,7 @@ async function submit(formData?: FormData, skip?: boolean) {
         uiStream,
         streamText,
         messages,
+        mapProvider,
         useSpecificAPI
       )
       answer = fullResponse

components/chat-panel.tsx

@@ -10,6 +10,7 @@ import { Button } from './ui/button'
 import { ArrowRight, Plus, Paperclip, X } from 'lucide-react'
 import Textarea from 'react-textarea-autosize'
 import { nanoid } from 'nanoid'
+import { useSettingsStore } from '@/lib/store/settings'
 
 interface ChatPanelProps {
   messages: UIState
@@ -25,6 +26,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
   const [, setMessages] = useUIState<typeof AI>()
   const { submit, clearChat } = useActions()
   // Removed mcp instance as it's no longer passed to submit
+  const { mapProvider } = useSettingsStore()
   const [isMobile, setIsMobile] = useState(false)
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
@@ -176,6 +178,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             isMobile && 'mobile-chat-input' // Apply mobile chat input styling
           )}
         >
+          <input type="hidden" name="mapProvider" value={mapProvider} />
           <input
             type="file"
             ref={fileInputRef}

components/map/google-map.tsx

@@ -5,12 +5,14 @@ import { useEffect } from 'react'
 import { useToast } from '@/components/ui/hooks/use-toast'
 import { useMapData } from './map-data-context'
 import { useSettingsStore } from '@/lib/store/settings'
+import { useMapLoading } from '../map-loading-context';
 import { Map3D } from './map-3d'
 
 export function GoogleMapComponent() {
   const { toast } = useToast()
   const { mapData } = useMapData()
   const { setMapProvider } = useSettingsStore()
+  const { setIsMapLoaded } = useMapLoading();
 
   const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
 
@@ -25,18 +27,26 @@ export function GoogleMapComponent() {
     }
   }, [apiKey, setMapProvider, toast])
 
+  useEffect(() => {
+    setIsMapLoaded(true);
+    return () => {
+      setIsMapLoaded(false);
+    };
+  }, [setIsMapLoaded]);
+
   if (!apiKey) {
     return null
   }
 
+  const cameraOptions = mapData.targetPosition
+    ? { center: mapData.targetPosition, range: 1000, tilt: 60, heading: 0 }
+    : { center: { lat: 37.7749, lng: -122.4194 }, range: 1000, tilt: 60, heading: 0 };
+
   return (
     <APIProvider apiKey={apiKey} version="alpha">
       <Map3D
         style={{ width: '100%', height: '100%' }}
-        center={{ lat: 37.7749, lng: -122.4194, altitude: 0 }}
-        heading={0}
-        tilt={60}
-        range={1000}
+        cameraOptions={cameraOptions}
         mode="SATELLITE"
       />
     </APIProvider>

components/map/map-3d-types.ts

@@ -38,6 +38,12 @@ declare global {
 export interface Map3DProps extends google.maps.maps3d.Map3DElementOptions {
   style?: CSSProperties;
   onCameraChange?: (e: Map3DCameraChangeEvent) => void;
+  cameraOptions?: {
+    center?: { lat: number; lng: number };
+    heading?: number;
+    tilt?: number;
+    range?: number;
+  };
 }
 
 /**

components/map/map-3d.tsx

@@ -29,14 +29,7 @@ export const Map3D = forwardRef(
       props.onCameraChange(p);
     });
 
-    const [customElementsReady, setCustomElementsReady] = useState(false);
-    useEffect(() => {
-      customElements.whenDefined('gmp-map-3d').then(() => {
-        setCustomElementsReady(true);
-      });
-    }, []);
-
-    const {center, heading, tilt, range, roll, ...map3dOptions} = props;
+    const {center, heading, tilt, range, roll, cameraOptions, ...map3dOptions} = props;
 
     useDeepCompareEffect(() => {
       if (!map3DElement) return;
@@ -45,13 +38,30 @@ export const Map3D = forwardRef(
       Object.assign(map3DElement, map3dOptions);
     }, [map3DElement, map3dOptions]);
 
+    useDeepCompareEffect(() => {
+      if (!map3DElement || !cameraOptions) return;
+
+      const { center, heading, tilt, range } = cameraOptions;
+
+      if (center) {
+        map3DElement.center = { ...center, altitude: 0 };
+      }
+      if (heading !== undefined) {
+        map3DElement.heading = heading;
+      }
+      if (tilt !== undefined) {
+        map3DElement.tilt = tilt;
+      }
+      if (range !== undefined) {
+        map3DElement.range = range;
+      }
+    }, [map3DElement, cameraOptions]);
+
     useImperativeHandle<
       google.maps.maps3d.Map3DElement | null,
       google.maps.maps3d.Map3DElement | null
     >(forwardedRef, () => map3DElement, [map3DElement]);
 
-    if (!customElementsReady) return null;
-
     return (
       <div style={props.style}>
         <gmp-map-3d

components/map/map-data-context.tsx

@@ -1,11 +1,9 @@
 'use client';
 
 import React, { createContext, useContext, useState, ReactNode } from 'react';
-import { LngLatLike } from 'mapbox-gl'; // Import LngLatLike
-
 // Define the shape of the map data you want to share
 export interface MapData {
-  targetPosition?: LngLatLike | null; // For flying to a location
+  targetPosition?: { lat: number; lng: number } | null; // For flying to a location
   // TODO: Add other relevant map data types later (e.g., routeGeoJSON, poiList)
   mapFeature?: any | null; // Generic feature from MCP hook's processLocationQuery
   drawnFeatures?: Array<{ // Added to store drawn features and their measurements

components/map/map-query-handler.tsx

@@ -38,10 +38,9 @@ export const MapQueryHandler: React.FC<MapQueryHandlerProps> = ({ toolOutput })
         console.log(`MapQueryHandler: Received data from geospatialTool. Place: ${place_name}, Lat: ${latitude}, Lng: ${longitude}`);
         setMapData(prevData => ({
           ...prevData,
-          // Ensure coordinates are in [lng, lat] format for MapboxGL
-          targetPosition: [longitude, latitude], 
+          targetPosition: { lat: latitude, lng: longitude },
           // Optionally store more info from mcp_response if needed by MapboxMap component later
-          mapFeature: { 
+          mapFeature: {
             place_name, 
             // Potentially add mapUrl or other details from toolOutput.mcp_response
             mapUrl: toolOutput.mcp_response?.mapUrl 

components/map/mapbox-map.tsx

@@ -513,14 +513,9 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
   // Effect to handle map updates from MapDataContext
   useEffect(() => {
     if (mapData.targetPosition && map.current) {
-      // console.log("Mapbox.tsx: Received new targetPosition from context:", mapData.targetPosition);
-      // targetPosition is LngLatLike, which can be [number, number]
-      // updateMapPosition expects (latitude, longitude)
-      const [lng, lat] = mapData.targetPosition as [number, number]; // Assuming LngLatLike is [lng, lat]
+      const { lat, lng } = mapData.targetPosition;
       if (typeof lat === 'number' && typeof lng === 'number') {
         updateMapPosition(lat, lng);
-      } else {
-        // console.error("Mapbox.tsx: Invalid targetPosition format in mapData", mapData.targetPosition);
       }
     }
     // TODO: Handle mapData.mapFeature for drawing routes, polygons, etc. in a future step.

dev_server.log

@@ -0,0 +1,11 @@
+$ next dev --turbo
+ ⚠ Port 3000 is in use, using available port 3001 instead.
+   ▲ Next.js 15.3.6 (Turbopack)
+   - Local:        http://localhost:3001
+   - Network:      http://192.168.0.2:3001
+   - Environments: .env
+
+ ✓ Starting...
+ ○ Compiling middleware ...
+ ✓ Compiled middleware in 528ms
+ ✓ Ready in 2.7s

lib/agents/researcher.tsx

@@ -11,6 +11,7 @@ import { Section } from '@/components/section'
 import { BotMessage } from '@/components/message'
 import { getTools } from './tools'
 import { getModel } from '../utils'
+import { MapProvider } from '@/lib/store/settings'
 
 // This magic tag lets us write raw multi-line strings with backticks, arrows, etc.
 const raw = String.raw
@@ -78,6 +79,7 @@ export async function researcher(
   uiStream: ReturnType<typeof createStreamableUI>,
   streamText: ReturnType<typeof createStreamableValue<string>>,
   messages: CoreMessage[],
+  mapProvider: MapProvider,
   useSpecificModel?: boolean
 ) {
   let fullResponse = ''
@@ -97,8 +99,8 @@ export async function researcher(
       : getDefaultSystemPrompt(currentDate)
 
   // Check if any message contains an image
-  const hasImage = messages.some(message => 
-    Array.isArray(message.content) && 
+  const hasImage = messages.some(message =>
+    Array.isArray(message.content) &&
     message.content.some(part => part.type === 'image')
   )
 
@@ -107,7 +109,7 @@ export async function researcher(
     maxTokens: 4096,
     system: systemPromptToUse,
     messages,
-    tools: getTools({ uiStream, fullResponse }),
+    tools: getTools({ uiStream, fullResponse, mapProvider }),
   })
 
   uiStream.update(null) // remove spinner

lib/agents/tools/geospatial.tsx

@@ -8,6 +8,9 @@ import { Client as MCPClientClass } from '@modelcontextprotocol/sdk/client/index
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
 // Smithery SDK removed - using direct URL construction
 import { z } from 'zod';
+import { GoogleGenerativeAI } from '@google/generative-ai';
+import { getSelectedModel } from '@/lib/actions/users';
+import { MapProvider } from '@/lib/store/settings';
 
 // Types
 export type McpClient = MCPClientClass;
@@ -152,7 +155,13 @@ async function closeClient(client: McpClient | null) {
 /**
  * Main geospatial tool executor.
  */
-export const geospatialTool = ({ uiStream }: { uiStream: ReturnType<typeof createStreamableUI> }) => ({
+export const geospatialTool = ({
+  uiStream,
+  mapProvider
+}: {
+  uiStream: ReturnType<typeof createStreamableUI>
+  mapProvider?: MapProvider
+}) => ({
   description: `Use this tool for location-based queries including: 
   There a plethora of tools inside this tool accessible on the mapbox mcp server where switch case into the tool of choice for that use case
   If the Query is supposed to use multiple tools in a sequence you must access all the tools in the sequence and then provide a final answer based on the results of all the tools used. 
@@ -224,11 +233,67 @@ Uses the Mapbox Search Box Text Search API endpoint to power searching for and g
   parameters: geospatialQuerySchema,
   execute: async (params: z.infer<typeof geospatialQuerySchema>) => {
     const { queryType, includeMap = true } = params;
-    console.log('[GeospatialTool] Execute called with:', params);
+    console.log('[GeospatialTool] Execute called with:', params, 'and map provider:', mapProvider);
 
     const uiFeedbackStream = createStreamableValue<string>();
     uiStream.append(<BotMessage content={uiFeedbackStream.value} />);
 
+    const selectedModel = await getSelectedModel();
+
+    if (selectedModel?.includes('gemini') && mapProvider === 'google') {
+      let feedbackMessage = `Processing geospatial query with Gemini...`;
+      uiFeedbackStream.update(feedbackMessage);
+
+      try {
+        const genAI = new GoogleGenerativeAI(process.env.GEMINI_3_PRO_API_KEY!);
+        const model = genAI.getGenerativeModel({
+          model: 'gemini-1.5-pro-latest',
+        });
+
+        const searchText = (params as any).location || (params as any).query;
+        const prompt = `Find the location for: ${searchText}`;
+        const tools: any = [{ googleSearch: {} }];
+        const result = await model.generateContent({
+          contents: [{ role: 'user', parts: [{ text: prompt }] }],
+          tools,
+        });
+        const response = await result.response;
+        const functionCalls = (response as any).functionCalls();
+
+        if (functionCalls && functionCalls.length > 0) {
+          const gsr = functionCalls[0];
+          // This is a placeholder for the actual response structure,
+          // as I don't have a way to inspect it at the moment.
+          const place = (gsr as any).results[0].place;
+          if (place) {
+            const { latitude, longitude } = place.coordinates;
+            const place_name = place.displayName;
+
+            const mcpData = {
+              location: {
+                latitude,
+                longitude,
+                place_name,
+              },
+            };
+            feedbackMessage = `Found location: ${place_name}`;
+            uiFeedbackStream.update(feedbackMessage);
+            uiFeedbackStream.done();
+            uiStream.update(<BotMessage content={uiFeedbackStream.value} />);
+            return { type: 'MAP_QUERY_TRIGGER', originalUserInput: JSON.stringify(params), queryType, timestamp: new Date().toISOString(), mcp_response: mcpData, error: null };
+          }
+        }
+        throw new Error('No location found by Gemini.');
+      } catch (error: any) {
+        const toolError = `Gemini grounding error: ${error.message}`;
+        uiFeedbackStream.update(toolError);
+        console.error('[GeospatialTool] Gemini execution failed:', error);
+        uiFeedbackStream.done();
+        uiStream.update(<BotMessage content={uiFeedbackStream.value} />);
+        return { type: 'MAP_QUERY_TRIGGER', originalUserInput: JSON.stringify(params), queryType, timestamp: new Date().toISOString(), mcp_response: null, error: toolError };
+      }
+    }
+
     let feedbackMessage = `Processing geospatial query (type: ${queryType})... Connecting to mapping service...`;
     uiFeedbackStream.update(feedbackMessage);
 

lib/agents/tools/index.tsx

@@ -4,14 +4,15 @@ import { searchTool } from './search'
 import { videoSearchTool } from './video-search'
 import { geospatialTool } from './geospatial' // Removed useGeospatialToolMcp import
 
+import { MapProvider } from '@/lib/store/settings'
+
 export interface ToolProps {
   uiStream: ReturnType<typeof createStreamableUI>
   fullResponse: string
-  // mcp?: any; // Removed mcp property as it's no longer passed down for geospatialTool
+  mapProvider?: MapProvider
 }
 
-// Removed mcp from parameters
-export const getTools = ({ uiStream, fullResponse }: ToolProps) => {
+export const getTools = ({ uiStream, fullResponse, mapProvider }: ToolProps) => {
   const tools: any = {
     search: searchTool({
       uiStream,
@@ -21,10 +22,9 @@ export const getTools = ({ uiStream, fullResponse }: ToolProps) => {
       uiStream,
       fullResponse
     }),
-    // geospatialTool now only requires uiStream
     geospatialQueryTool: geospatialTool({
-      uiStream
-      // mcp: mcp || null // Removed mcp argument
+      uiStream,
+      mapProvider
     })
   }
 

package.json

@@ -23,6 +23,7 @@
     "@ai-sdk/xai": "^1.2.18",
     "@composio/core": "^0.3.3",
     "@google-cloud/storage": "^7.18.0",
+    "@google/generative-ai": "^0.24.1",
     "@heroicons/react": "^2.2.0",
     "@hookform/resolvers": "3.3.4",
     "@mapbox/mapbox-gl-draw": "^1.5.0",