fix: integrate geojsonEnricherV2 and refactor MapboxMap feedback handling

Author: ngoiyaeric

app/actions.tsx

@@ -31,6 +31,7 @@ import { VideoSearchSection } from '@/components/video-search-section'
 import { MapQueryHandler } from '@/components/map/map-query-handler' // Add this import
 import { LocationResponseHandler } from '@/components/map/location-response-handler'
 import { PartialRelated } from '@/lib/schema/related'
+import { geojsonEnricherV2 } from '@/lib/agents/geojson-enricher-v2'
 
 // Removed mcp parameter from submit, as geospatialTool now handles its client.
 async function submit(formData?: FormData, skip?: boolean) {
@@ -74,7 +75,7 @@ async function submit(formData?: FormData, skip?: boolean) {
       ...aiState.get(),
       messages: [
         ...aiState.get().messages,
-        { id: nanoid(), role: 'user', content }
+        { id: nanoid(), role: 'user', content: JSON.stringify(content) }
       ]
     });
     messages.push({ role: 'user', content });
@@ -384,8 +385,9 @@ async function submit(formData?: FormData, skip?: boolean) {
     if (!errorOccurred) {
       let locationResponse;
       try {
-        const { composio } = await initializeComposioMapbox();
-        locationResponse = await mapControlOrchestrator(answer, { mcpClient: composio });
+        // Attempt to enrich the response with GeoJSON data
+        locationResponse = await geojsonEnricherV2(answer);
+        console.log('✨ Enrichment successful:', locationResponse);
       } catch (e) {
         console.error("Error during geojson enrichment:", e);
         // Fallback to a response without location data

components/map/mapbox-map.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useCallback } from 'react' // Removed useState
+import { useEffect, useRef, useCallback } from 'react'
 import mapboxgl from 'mapbox-gl'
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
 import * as turf from '@turf/turf'
@@ -9,12 +9,24 @@ import 'react-toastify/dist/ReactToastify.css'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 import { useMapToggle, MapToggleEnum } from '../map-toggle-context'
-import { useMapData } from './map-data-context'; // Add this import
-import { useMapLoading } from '../map-loading-context'; // Import useMapLoading
+import { useMapData } from './map-data-context';
+import { useMapLoading } from '../map-loading-context';
 import { useMap } from './map-context'
+import { FeatureCollection } from 'geojson'
 
 mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN as string;
 
+interface MapFeedback {
+  success: boolean;
+  currentCenter: [number, number];
+  currentZoom: number;
+  currentPitch: number;
+  currentBearing: number;
+  currentBounds?: [[number, number], [number, number]];
+  error?: string;
+  timestamp: number;
+}
+
 export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number; } }> = ({ position }) => {
   const mapContainer = useRef<HTMLDivElement>(null)
   const map = useRef<mapboxgl.Map | null>(null)
@@ -30,16 +42,16 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
   const initializedRef = useRef<boolean>(false)
   const currentMapCenterRef = useRef<{ center: [number, number]; zoom: number; pitch: number }>({ center: [position?.longitude ?? 0, position?.latitude ?? 0], zoom: 2, pitch: 0 });
   const drawingFeatures = useRef<any>(null)
-  const { mapType, setMapType } = useMapToggle() // Get setMapType
-  const { mapData, setMapData } = useMapData(); // Consume the new context, get setMapData
-  const { setIsMapLoaded } = useMapLoading(); // Get setIsMapLoaded from context
+  const { mapType, setMapType } = useMapToggle()
+  const { mapData, setMapData } = useMapData();
+  const { setIsMapLoaded } = useMapLoading();
   const previousMapTypeRef = useRef<MapToggleEnum | null>(null)
 
   // Refs for long-press functionality
   const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
   const isMouseDownRef = useRef<boolean>(false);
 
-  // const [isMapLoaded, setIsMapLoaded] = useState(false); // Removed local state
+  const isDebug = process.env.NODE_ENV !== 'production';
 
   // Formats the area or distance for display
   const formatMeasurement = useCallback((value: number, isArea = true) => {
@@ -97,17 +109,12 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         el.style.borderRadius = '4px'
         el.style.fontSize = '12px'
         el.style.fontWeight = 'bold'
-        el.style.color = '#333333' // Added darker color
+        el.style.color = '#333333'
         el.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)'
         el.style.pointerEvents = 'none'
         el.textContent = formattedArea
 
         // Add marker for the label
-
-
-
-
-
         if (map.current) {
           const marker = new mapboxgl.Marker({ element: el })
             .setLngLat(coordinates as [number, number])
@@ -136,7 +143,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         el.style.borderRadius = '4px'
         el.style.fontSize = '12px'
         el.style.fontWeight = 'bold'
-        el.style.color = '#333333' // Added darker color
+        el.style.color = '#333333'
         el.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)'
         el.style.pointerEvents = 'none'
         el.textContent = formattedLength
@@ -547,11 +554,6 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         updateMapPosition(lat, lng);
       }
     }
-    // TODO: Handle mapData.mapFeature for drawing routes, polygons, etc. in a future step.
-    // For example:
-    // if (mapData.mapFeature && mapData.mapFeature.route_geometry && typeof drawRoute === 'function') {
-    //   drawRoute(mapData.mapFeature.route_geometry); // Implement drawRoute function if needed
-    // }
   }, [mapData.targetPosition, mapData.mapFeature, updateMapPosition]);
 
   // Effect to handle GeoJSON data updates
@@ -563,12 +565,13 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
 
     // If GeoJSON data is present, add or update the source and layers
     if (mapData.geojson) {
+      const geojsonData = mapData.geojson as FeatureCollection;
       if (source) {
-        (source as mapboxgl.GeoJSONSource).setData(mapData.geojson as any);
+        (source as mapboxgl.GeoJSONSource).setData(geojsonData);
       } else {
         mapInstance.addSource('geojson-data', {
           type: 'geojson',
-          data: mapData.geojson as any,
+          data: geojsonData,
         });
 
         // Add layer for points
@@ -607,26 +610,28 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
 
   // Effect to execute map commands with feedback
   useEffect(() => {
-    console.log('🗺️  Map commands useEffect triggered:', {
-      hasMap: !!map.current,
-      hasCommands: !!mapData.mapCommands,
-      commandCount: mapData.mapCommands?.length || 0,
-      commands: mapData.mapCommands,
-    });
+    if (isDebug) {
+      console.log('🗺️  Map commands useEffect triggered:', {
+        hasMap: !!map.current,
+        hasCommands: !!mapData.mapCommands,
+        commandCount: mapData.mapCommands?.length || 0,
+        commands: mapData.mapCommands,
+      });
+    }
 
     if (!map.current || !mapData.mapCommands || mapData.mapCommands.length === 0) {
-      console.log('⚠️ Skipping command execution - missing map or commands');
+      if (isDebug) console.log('⚠️ Skipping command execution - missing map or commands');
       return;
     }
 
     const mapInstance = map.current;
     let executionError: string | undefined;
 
-    console.log(`🗺️  Executing ${mapData.mapCommands.length} map commands...`);
+    if (isDebug) console.log(`🗺️  Executing ${mapData.mapCommands.length} map commands...`);
 
     try {
       mapData.mapCommands.forEach((command, idx) => {
-        console.log(`🗺️  Executing command ${idx + 1}/${mapData.mapCommands!.length}: ${command.command}`, command.params);
+        if (isDebug) console.log(`🗺️  Executing command ${idx + 1}/${mapData.mapCommands!.length}: ${command.command}`, command.params);
         switch (command.command) {
           case 'flyTo':
             mapInstance.flyTo(command.params);
@@ -669,14 +674,28 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         }
       });
 
+      // Guard flag to ensure feedbackHandler only runs once
+      let handled = false;
+      let fallbackTimeoutId: NodeJS.Timeout | null = null;
+
       // Capture feedback after commands complete
       const feedbackHandler = () => {
+        if (handled) return;
+        handled = true;
+        
+        if (fallbackTimeoutId) {
+          clearTimeout(fallbackTimeoutId);
+        }
+
+        // Clean up event listener
+        mapInstance.off('moveend', feedbackHandler);
+
         const center = mapInstance.getCenter();
         const bounds = mapInstance.getBounds();
 
-        const feedback: any = {
+        const feedback: MapFeedback = {
           success: !executionError,
-          currentCenter: [center.lng, center.lat] as [number, number],
+          currentCenter: [center.lng, center.lat],
           currentZoom: mapInstance.getZoom(),
           currentPitch: mapInstance.getPitch(),
           currentBearing: mapInstance.getBearing(),
@@ -688,10 +707,10 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
           feedback.currentBounds = [
             [bounds.getWest(), bounds.getSouth()],
             [bounds.getEast(), bounds.getNorth()]
-          ] as [[number, number], [number, number]];
+          ];
         }
 
-        console.log('📍 Map feedback:', feedback);
+        if (isDebug) console.log('📍 Map feedback:', feedback);
 
         // Send feedback via callback if provided
         if (mapData.feedbackCallback) {
@@ -710,24 +729,28 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
       mapInstance.once('moveend', feedbackHandler);
 
       // Fallback timeout in case moveend doesn't fire
-      setTimeout(() => {
+      // Increased timeout to allow for animation start
+      fallbackTimeoutId = setTimeout(() => {
         if (mapInstance.isMoving && mapInstance.isMoving()) {
           return; // Still moving, wait for moveend
         }
         // If not moving, trigger feedback immediately
-        mapInstance.off('moveend', feedbackHandler);
         feedbackHandler();
-      }, 100);
+      }, 500); 
 
     } catch (error) {
       executionError = error instanceof Error ? error.message : 'Unknown execution error';
       console.error('❌ Map command execution error:', error);
 
       // Send error feedback
-      const errorFeedback = {
+      const errorFeedback: MapFeedback = {
         success: false,
         error: executionError,
         timestamp: Date.now(),
+        currentCenter: [mapInstance.getCenter().lng, mapInstance.getCenter().lat],
+        currentZoom: mapInstance.getZoom(),
+        currentPitch: mapInstance.getPitch(),
+        currentBearing: mapInstance.getBearing()
       };
 
       if (mapData.feedbackCallback) {
@@ -741,7 +764,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
       }));
     }
 
-  }, [mapData.mapCommands, mapData.feedbackCallback, setMapData]);
+  }, [mapData.mapCommands, mapData.feedbackCallback, setMapData, isDebug]);
 
   // Long-press handlers
   const handleMouseDown = useCallback(() => {
@@ -770,14 +793,11 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
 
   // Cleanup for the main useEffect
   useEffect(() => {
-    // ... existing useEffect logic ...
     return () => {
-      // ... existing cleanup logic ...
-      if (longPressTimerRef.current) { // Cleanup timer on component unmount
+      if (longPressTimerRef.current) { 
         clearTimeout(longPressTimerRef.current);
         longPressTimerRef.current = null;
       }
-      // ... existing cleanup logic for map and geolocation ...
       if (map.current) {
         map.current.off('moveend', captureMapCenter)
 
@@ -811,7 +831,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
     handleUserInteraction,
     startRotation,
     stopRotation,
-    mapType, // mapType is already here, good.
+    mapType,
     updateMeasurementLabels,
     setupGeolocationWatcher,
     captureMapCenter,
@@ -828,7 +848,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         className="h-full w-full overflow-hidden rounded-l-lg"
         onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp} // Clear timer if mouse leaves container while pressed
+        onMouseLeave={handleMouseUp} 
       />
     </div>
   )