feat: Add Resolution Search agent for map analysis

app/actions.tsx

@@ -8,10 +8,11 @@ import {
 } from 'ai/rsc'
 import { CoreMessage, ToolResultPart } from 'ai'
 import { nanoid } from 'nanoid'
+import type { FeatureCollection } from 'geojson'
 import { Spinner } from '@/components/ui/spinner'
 import { Section } from '@/components/section'
 import { FollowupPanel } from '@/components/followup-panel'
-import { inquire, researcher, taskManager, querySuggestor } from '@/lib/agents'
+import { inquire, researcher, taskManager, querySuggestor, resolutionSearch } from '@/lib/agents'
 // Removed import of useGeospatialToolMcp as it no longer exists and was incorrectly used here.
 // The geospatialTool (if used by agents like researcher) now manages its own MCP client.
 import { writer } from '@/lib/agents/writer'
@@ -21,6 +22,7 @@ import { UserMessage } from '@/components/user-message'
 import { BotMessage } from '@/components/message'
 import { SearchSection } from '@/components/search-section'
 import SearchRelated from '@/components/search-related'
+import { GeoJsonLayer } from '@/components/map/geojson-layer'
 import { CopilotDisplay } from '@/components/copilot-display'
 import RetrieveSection from '@/components/retrieve-section'
 import { VideoSearchSection } from '@/components/video-search-section'
@@ -39,6 +41,80 @@ async function submit(formData?: FormData, skip?: boolean) {
   const uiStream = createStreamableUI()
   const isGenerating = createStreamableValue(true)
   const isCollapsed = createStreamableValue(false)
+
+  const action = formData?.get('action') as string;
+  if (action === 'resolution_search') {
+    const file = formData?.get('file') as File;
+    if (!file) {
+      throw new Error('No file provided for resolution search.');
+    }
+
+    const buffer = await file.arrayBuffer();
+    const dataUrl = `data:${file.type};base64,${Buffer.from(buffer).toString('base64')}`;
+
+    // Get the current messages, excluding tool-related ones.
+    const messages: CoreMessage[] = [...(aiState.get().messages as any[])].filter(
+      message =>
+        message.role !== 'tool' &&
+        message.type !== 'followup' &&
+        message.type !== 'related' &&
+        message.type !== 'end'
+    );
+
+    // The user's prompt for this action is static.
+    const userInput = 'Analyze this map view.';
+
+    // Construct the multimodal content for the user message.
+    const content: CoreMessage['content'] = [
+      { type: 'text', text: userInput },
+      { type: 'image', image: dataUrl, mimeType: file.type }
+    ];
+
+    // Add the new user message to the AI state.
+    aiState.update({
+      ...aiState.get(),
+      messages: [
+        ...aiState.get().messages,
+        { id: nanoid(), role: 'user', content }
+      ]
+    });
+    messages.push({ role: 'user', content });
+
+    // Call the simplified agent, which now returns data directly.
+    const analysisResult = await resolutionSearch(messages);
+
+    // Create a streamable value for the summary and mark it as done.
+    const summaryStream = createStreamableValue<string>();
+    summaryStream.done(analysisResult.summary || 'Analysis complete.');
+
+    // Update the UI stream with the BotMessage component.
+    uiStream.update(
+      <BotMessage content={summaryStream.value} />
+    );
+
+    aiState.done({
+      ...aiState.get(),
+      messages: [
+        ...aiState.get().messages,
+        {
+          id: nanoid(),
+          role: 'assistant',
+          content: JSON.stringify(analysisResult),
+          type: 'resolution_search_result'
+        }
+      ]
+    });
+
+    isGenerating.done(false);
+    uiStream.done();
+    return {
+      id: nanoid(),
+      isGenerating: isGenerating.value,
+      component: uiStream.value,
+      isCollapsed: isCollapsed.value
+    };
+  }
+
   const messages: CoreMessage[] = [...(aiState.get().messages as any[])].filter(
     message =>
       message.role !== 'tool' &&
@@ -539,6 +615,26 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
                   </Section>
                 )
               }
+            case 'resolution_search_result': {
+              const analysisResult = JSON.parse(content as string);
+              const summaryValue = createStreamableValue();
+              summaryValue.done(analysisResult.summary);
+              const geoJson = analysisResult.geoJson as FeatureCollection;
+
+              return {
+                id,
+                component: (
+                  <>
+                    <Section title="Map Analysis">
+                      <BotMessage content={summaryValue.value} />
+                    </Section>
+                    {geoJson && (
+                      <GeoJsonLayer id={id} data={geoJson} />
+                    )}
+                  </>
+                )
+              }
+            }
           }
           break
         case 'tool':

components/analysis-tool.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import React, { useState } 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() {
+  const { map } = useMap()
+  const { submit } = useActions()
+  const [, setMessages] = useUIState<typeof AI>()
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+
+  const handleResolutionSearch = async () => {
+    if (!map) {
+      toast.error('Map is not available yet. Please wait for it to load.')
+      return
+    }
+
+    setIsAnalyzing(true)
+
+    try {
+      setMessages(currentMessages => [
+        ...currentMessages,
+        {
+          id: nanoid(),
+          component: <UserMessage content={[{ type: 'text', text: 'Analyze this map view.' }]} />
+        }
+      ])
+
+      const canvas = map.getCanvas()
+      const blob = await new Promise<Blob | null>(resolve => {
+        canvas.toBlob(resolve, 'image/png')
+      })
+
+      if (!blob) {
+        throw new Error('Failed to capture map image.')
+      }
+
+      const formData = new FormData()
+      formData.append('file', blob, 'map_capture.png')
+      formData.append('action', 'resolution_search')
+
+      const responseMessage = await submit(formData)
+      setMessages(currentMessages => [...currentMessages, responseMessage as any])
+    } catch (error) {
+      console.error('Failed to perform resolution search:', error)
+      toast.error('An error occurred while analyzing the map.')
+    } finally {
+      setIsAnalyzing(false)
+    }
+  }
+
+  return (
+    <div className="absolute top-4 right-4 z-20">
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={handleResolutionSearch}
+        disabled={isAnalyzing || !map}
+        title="Analyze current map view"
+        className="bg-background/80 backdrop-blur-sm hover:bg-background"
+      >
+        {isAnalyzing ? (
+          <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-current"></div>
+        ) : (
+          <Search className="h-5 w-5" />
+        )}
+      </Button>
+    </div>
+  )
+}

components/chat.tsx

@@ -11,7 +11,13 @@ import MobileIconsBar from './mobile-icons-bar'
 import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
 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,
+})
 
 type ChatProps = {
   id?: string // This is the chatId
@@ -80,8 +86,9 @@ export function Chat({ id }: ChatProps) {
   if (isMobile) {
     return (
       <MapDataProvider> {/* Add Provider */}
-        <div className="mobile-layout-container">
-          <div className="mobile-map-section">
+        <MapProvider>
+          <div className="mobile-layout-container">
+            <div className="mobile-map-section">
             {activeView ? <SettingsView /> : <Mapbox />}
           </div>
           <div className="mobile-icons-bar">
@@ -100,17 +107,19 @@ export function Chat({ id }: ChatProps) {
             ) : (
               <ChatMessages messages={messages} />
             )}
+            </div>
           </div>
-        </div>
+        </MapProvider>
       </MapDataProvider>
     );
   }
 
   // Desktop layout
   return (
     <MapDataProvider> {/* Add Provider */}
-      <div className="flex justify-start items-start">
-        {/* This is the new div for scrolling */}
+      <MapProvider>
+        <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">
           <ChatPanel messages={messages} input={input} setInput={setInput} />
           {showEmptyScreen ? (
@@ -123,13 +132,15 @@ export function Chat({ id }: ChatProps) {
             <ChatMessages messages={messages} />
           )}
         </div>
-        <div
-          className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
-          style={{ zIndex: 10 }} // Added z-index
-        >
-          {activeView ? <SettingsView /> : <Mapbox />}
+          <div
+            className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
+            style={{ zIndex: 10 }} // Added z-index
+          >
+            {activeView ? <SettingsView /> : <Mapbox />}
+            <AnalysisTool />
+          </div>
         </div>
-      </div>
+      </MapProvider>
     </MapDataProvider>
   );
 }

components/map/geojson-layer.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { useEffect } from 'react'
+import type mapboxgl from 'mapbox-gl'
+import { useMap } from './map-context'
+import type { FeatureCollection } from 'geojson'
+
+interface GeoJsonLayerProps {
+  id: string;
+  data: FeatureCollection;
+}
+
+export function GeoJsonLayer({ id, data }: GeoJsonLayerProps) {
+  const { map } = useMap()
+
+  useEffect(() => {
+    if (!map || !data) return
+
+    const sourceId = `geojson-source-${id}`
+    const pointLayerId = `geojson-point-layer-${id}`
+    const polygonLayerId = `geojson-polygon-layer-${id}`
+    const polygonOutlineLayerId = `geojson-polygon-outline-layer-${id}`
+
+    const onMapLoad = () => {
+      // Add source if it doesn't exist
+      if (!map.getSource(sourceId)) {
+        map.addSource(sourceId, {
+          type: 'geojson',
+          data: data
+        })
+      } else {
+        // If source exists, just update the data
+        const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+        source.setData(data);
+      }
+
+      // Add polygon layer for fill
+      if (!map.getLayer(polygonLayerId)) {
+        map.addLayer({
+          id: polygonLayerId,
+          type: 'fill',
+          source: sourceId,
+          filter: ['==', '$type', 'Polygon'],
+          paint: {
+            'fill-color': '#088',
+            'fill-opacity': 0.4
+          }
+        })
+      }
+
+      // Add polygon layer for outline
+      if (!map.getLayer(polygonOutlineLayerId)) {
+        map.addLayer({
+          id: polygonOutlineLayerId,
+          type: 'line',
+          source: sourceId,
+          filter: ['==', '$type', 'Polygon'],
+          paint: {
+            'line-color': '#088',
+            'line-width': 2
+          }
+        })
+      }
+
+      // Add point layer for circles
+      if (!map.getLayer(pointLayerId)) {
+        map.addLayer({
+          id: pointLayerId,
+          type: 'circle',
+          source: sourceId,
+          filter: ['==', '$type', 'Point'],
+          paint: {
+            'circle-radius': 6,
+            'circle-color': '#B42222',
+            'circle-stroke-width': 2,
+            'circle-stroke-color': '#ffffff'
+          }
+        })
+      }
+    }
+
+    if (map.isStyleLoaded()) {
+      onMapLoad()
+    } else {
+      map.on('load', onMapLoad)
+    }
+
+    // Cleanup function
+    return () => {
+      if (map.isStyleLoaded()) {
+        if (map.getLayer(pointLayerId)) map.removeLayer(pointLayerId)
+        if (map.getLayer(polygonLayerId)) map.removeLayer(polygonLayerId)
+        if (map.getLayer(polygonOutlineLayerId)) map.removeLayer(polygonOutlineLayerId)
+        if (map.getSource(sourceId)) map.removeSource(sourceId)
+      }
+    }
+  }, [map, id, data])
+
+  return null // This component does not render any DOM elements itself
+}