GeoJSON Upload and Tool Ingestion Pipeline

app/actions.tsx

@@ -23,6 +23,7 @@ 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 { MapDataUpdater } from '@/components/map/map-data-updater'
 import { CopilotDisplay } from '@/components/copilot-display'
 import RetrieveSection from '@/components/retrieve-section'
 import { VideoSearchSection } from '@/components/video-search-section'
@@ -210,6 +211,37 @@ async function submit(formData?: FormData, skip?: boolean) {
     : ((formData?.get('related_query') as string) ||
       (formData?.get('input') as string))
 
+  let isGeoJsonInput = false
+  if (userInput) {
+    try {
+      const trimmedInput = userInput.trim()
+      if ((trimmedInput.startsWith('{') && trimmedInput.endsWith('}')) || (trimmedInput.startsWith('[') && trimmedInput.endsWith(']'))) {
+        const geoJson = JSON.parse(trimmedInput)
+        if (geoJson.type === 'FeatureCollection' || geoJson.type === 'Feature') {
+          isGeoJsonInput = true
+          const geoJsonId = nanoid()
+          aiState.update({
+            ...aiState.get(),
+            messages: [
+              ...aiState.get().messages,
+              {
+                id: geoJsonId,
+                role: 'assistant',
+                content: JSON.stringify({ data: geoJson, filename: 'Pasted GeoJSON' }),
+                type: 'geojson_upload'
+              }
+            ]
+          })
+          uiStream.append(
+            <MapDataUpdater id={geoJsonId} data={geoJson} filename="Pasted GeoJSON" />
+          )
+        }
+      }
+    } catch (e) {
+      // Not a valid JSON, ignore
+    }
+  }
+
   if (userInput.toLowerCase().trim() === 'what is a planet computer?' || userInput.toLowerCase().trim() === 'what is qcx-terra?') {
     const definition = userInput.toLowerCase().trim() === 'what is a planet computer?'
       ? `A planet computer is a proprietary environment aware system that interoperates weather forecasting, mapping and scheduling using cutting edge multi-agents to streamline automation and exploration on a planet. Available for our Pro and Enterprise customers. [QCX Pricing](https://www.queue.cx/#pricing)`
@@ -301,6 +333,8 @@ async function submit(formData?: FormData, skip?: boolean) {
   }[] = []
 
   if (userInput) {
+    // If it's a GeoJSON input, we still want to keep it in the message history for the AI to see,
+    // but we might want to truncate it if it's huge. For now, just pass it.
     messageParts.push({ type: 'text', text: userInput })
   }
 
@@ -315,8 +349,39 @@ async function submit(formData?: FormData, skip?: boolean) {
         image: dataUrl,
         mimeType: file.type
       })
-    } else if (file.type === 'text/plain') {
+    } else if (file.type === 'text/plain' || file.name.endsWith('.geojson') || file.type === 'application/geo+json') {
       const textContent = Buffer.from(buffer).toString('utf-8')
+      const isGeoJson = file.name.endsWith('.geojson') || file.type === 'application/geo+json'
+
+      if (isGeoJson) {
+        try {
+          const geoJson = JSON.parse(textContent)
+          if (geoJson.type === 'FeatureCollection' || geoJson.type === 'Feature') {
+            const geoJsonId = nanoid()
+            // Add a special message to track the GeoJSON upload
+            aiState.update({
+              ...aiState.get(),
+              messages: [
+                ...aiState.get().messages,
+                {
+                  id: geoJsonId,
+                  role: 'assistant',
+                  content: JSON.stringify({ data: geoJson, filename: file.name }),
+                  type: 'geojson_upload'
+                }
+              ]
+            })
+
+            // Immediately append the updater to the UI stream
+            uiStream.append(
+              <MapDataUpdater id={geoJsonId} data={geoJson} filename={file.name} />
+            )
+          }
+        } catch (e) {
+          console.error('Failed to parse GeoJSON:', e)
+        }
+      }
+
       const existingTextPart = messageParts.find(p => p.type === 'text')
       if (existingTextPart) {
         existingTextPart.text = `${textContent}\n\n${existingTextPart.text}`
@@ -624,10 +689,19 @@ export const AI = createAI<AIState, UIState>({
 export const getUIStateFromAIState = (aiState: AIState): UIState => {
   const chatId = aiState.chatId
   const isSharePage = aiState.isSharePage
+
+  // Filter messages to only include the last 'data' message if multiple exist
+  const lastDataMessageIndex = [...aiState.messages].reverse().findIndex(m => m.role === 'data')
+  const actualLastDataIndex = lastDataMessageIndex === -1 ? -1 : aiState.messages.length - 1 - lastDataMessageIndex
+
   return aiState.messages
     .map((message, index) => {
       const { role, content, id, type, name } = message
 
+      if (role === 'data' && index !== actualLastDataIndex) {
+        return null
+      }
+
       if (
         !type ||
         type === 'end' ||
@@ -716,6 +790,13 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
                 )
               }
             }
+            case 'geojson_upload': {
+              const { data, filename } = JSON.parse(content as string)
+              return {
+                id,
+                component: <MapDataUpdater id={id} data={data} filename={filename} />
+              }
+            }
           }
           break
         case 'tool':
@@ -775,6 +856,26 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
             }
           }
           break
+        case 'data':
+          try {
+            const contextData = JSON.parse(content as string)
+            if (contextData.uploadedGeoJson && Array.isArray(contextData.uploadedGeoJson)) {
+              return {
+                id,
+                component: (
+                  <>
+                    {contextData.uploadedGeoJson.map((item: any) => (
+                      <MapDataUpdater key={item.id} id={item.id} data={item.data} filename={item.filename} />
+                    ))}
+                  </>
+                )
+              }
+            }
+            return { id, component: null }
+          } catch (e) {
+            console.error('Error parsing data message:', e)
+            return { id, component: null }
+          }
         default:
           return {
             id,

app/search/[id]/page.tsx

@@ -48,14 +48,11 @@ export default async function SearchPage({ params }: SearchPageProps) {
   const initialMessages: AIMessage[] = dbMessages.map((dbMsg): AIMessage => {
     return {
       id: dbMsg.id,
-      role: dbMsg.role as AIMessage['role'], // Cast role, ensure AIMessage['role'] includes all dbMsg.role possibilities
+      role: dbMsg.role as AIMessage['role'],
       content: dbMsg.content,
       createdAt: dbMsg.createdAt ? new Date(dbMsg.createdAt) : undefined,
-      // 'type' and 'name' are not in the basic Drizzle 'messages' schema.
-      // These would be undefined unless specific logic is added to derive them.
-      // For instance, if a message with role 'tool' should have a 'name',
-      // or if some messages have a specific 'type' based on content or other flags.
-      // This mapping assumes standard user/assistant messages primarily.
+      type: dbMsg.type as AIMessage['type'],
+      name: dbMsg.toolName as string,
     };
   });
 

components/chat-panel.tsx

@@ -153,7 +153,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
         }
       }, 500) // 500ms debounce delay
     },
-    [mapData]
+    [mapData, setSuggestions]
   )
 
   useEffect(() => {
@@ -213,7 +213,8 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             ref={fileInputRef}
             onChange={handleFileChange}
             className="hidden"
-            accept="text/plain,image/png,image/jpeg,image/webp"
+            accept="text/plain,image/png,image/jpeg,image/webp,.geojson,application/geo+json"
+            data-testid="file-upload-input"
           />
           {!isMobile && (
             <Button

components/chat.tsx

@@ -73,14 +73,18 @@ export function Chat({ id }: ChatProps) {
   }, [id, path, messages])
 
   useEffect(() => {
-    if (aiState.messages[aiState.messages.length - 1]?.type === 'response') {
+    const lastMessage = aiState.messages[aiState.messages.length - 1];
+    if (lastMessage?.type === 'response' && lastMessage.id !== lastRefreshedMessageIdRef.current) {
       // Refresh the page to chat history updates
+      lastRefreshedMessageIdRef.current = lastMessage.id;
       router.refresh()
     }
   }, [aiState, router])
 
   // Get mapData to access drawnFeatures
   const { mapData } = useMapData();
+  const lastSyncedDataRef = useRef<string>('');
+  const lastRefreshedMessageIdRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (isSubmitting) {
@@ -89,21 +93,31 @@ export function Chat({ id }: ChatProps) {
     }
   }, [isSubmitting])
 
-  // useEffect to call the server action when drawnFeatures changes
+  // useEffect to call the server action when drawnFeatures or uploadedGeoJson changes
   useEffect(() => {
-    if (id && mapData.drawnFeatures && mapData.cameraState) {
-      console.log('Chat.tsx: drawnFeatures changed, calling updateDrawingContext', mapData.drawnFeatures);
-      updateDrawingContext(id, {
-        drawnFeatures: mapData.drawnFeatures,
+    if (id && (mapData.drawnFeatures || mapData.uploadedGeoJson) && mapData.cameraState) {
+      const currentData = JSON.stringify({
+        drawnFeatures: mapData.drawnFeatures || [],
         cameraState: mapData.cameraState,
+        uploadedGeoJson: (mapData.uploadedGeoJson || []).map(item => ({ id: item.id, visible: item.visible }))
       });
+
+      if (currentData !== lastSyncedDataRef.current) {
+        console.log('Chat.tsx: map data changed, calling updateDrawingContext');
+        lastSyncedDataRef.current = currentData;
+        updateDrawingContext(id, {
+          drawnFeatures: mapData.drawnFeatures || [],
+          cameraState: mapData.cameraState,
+          uploadedGeoJson: mapData.uploadedGeoJson || []
+        });
+      }
     }
-  }, [id, mapData.drawnFeatures, mapData.cameraState]);
+  }, [id, mapData.drawnFeatures, mapData.cameraState, mapData.uploadedGeoJson]);
 
   // Mobile layout
   if (isMobile) {
     return (
-      <MapDataProvider> {/* Add Provider */}
+      <>
         <HeaderSearchButton />
         <div className="mobile-layout-container">
           <div className="mobile-map-section">
@@ -157,13 +171,13 @@ export function Chat({ id }: ChatProps) {
           )}
         </div>
         </div>
-      </MapDataProvider>
+      </>
     );
   }
 
   // Desktop layout
   return (
-    <MapDataProvider> {/* Add Provider */}
+    <>
       <HeaderSearchButton />
       <div className="flex justify-start items-start">
         {/* This is the new div for scrolling */}
@@ -221,6 +235,6 @@ export function Chat({ id }: ChatProps) {
           {activeView ? <SettingsView /> : <MapProvider />}
         </div>
       </div>
-    </MapDataProvider>
+    </>
   );
 }

components/map/google-map.tsx

@@ -81,6 +81,9 @@ export function GoogleMapComponent() {
         mode="SATELLITE"
       />
       <GoogleGeoJsonLayer data={featureCollection} />
+      {mapData.uploadedGeoJson?.map(item => (
+        item.visible && <GoogleGeoJsonLayer key={item.id} data={item.data} />
+      ))}
     </APIProvider>
   )
 }

components/map/map-data-context.tsx

@@ -29,6 +29,12 @@ export interface MapData {
     longitude: number;
     title?: string;
   }>;
+  uploadedGeoJson?: Array<{
+    id: string;
+    filename: string;
+    data: any; // FeatureCollection
+    visible: boolean;
+  }>;
 }
 
 interface MapDataContextType {
@@ -39,7 +45,11 @@ interface MapDataContextType {
 const MapDataContext = createContext<MapDataContextType | undefined>(undefined);
 
 export const MapDataProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [mapData, setMapData] = useState<MapData>({ drawnFeatures: [], markers: [] });
+  const [mapData, setMapData] = useState<MapData>({
+    drawnFeatures: [],
+    markers: [],
+    uploadedGeoJson: []
+  });
 
   return (
     <MapDataContext.Provider value={{ mapData, setMapData }}>

components/map/map-data-updater.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useMapData } from './map-data-context';
+import { useMap } from './map-context';
+import type { FeatureCollection } from 'geojson';
+import * as turf from '@turf/turf';
+
+interface MapDataUpdaterProps {
+  id: string;
+  data: any; // FeatureCollection or Feature
+  filename: string;
+}
+
+export function MapDataUpdater({ id, data, filename }: MapDataUpdaterProps) {
+  const { setMapData } = useMapData();
+  const { map } = useMap();
+  const hasZoomedRef = useRef(false);
+
+  useEffect(() => {
+    if (!data) return;
+
+    // Ensure it's a FeatureCollection for consistency
+    const featureCollection: FeatureCollection = data.type === 'FeatureCollection'
+      ? data
+      : { type: 'FeatureCollection', features: [data] };
+
+    // Update MapData context
+    setMapData(prev => {
+      // Avoid duplicate entries
+      const alreadyExists = prev.uploadedGeoJson?.some(item => item.id === id);
+      if (alreadyExists) return prev;
+
+      return {
+        ...prev,
+        uploadedGeoJson: [
+          ...(prev.uploadedGeoJson || []),
+          {
+            id,
+            filename,
+            data: featureCollection,
+            visible: true
+          }
+        ]
+      };
+    });
+
+    // Fly to the extent of the GeoJSON
+    if (map && featureCollection.features.length > 0 && !hasZoomedRef.current) {
+      hasZoomedRef.current = true;
+      try {
+        const bbox = turf.bbox(featureCollection);
+        map.fitBounds(bbox as [number, number, number, number], {
+          padding: 50,
+          maxZoom: 15,
+          duration: 2000
+        });
+      } catch (e) {
+        console.error('Failed to fit bounds for GeoJSON:', e);
+      }
+    }
+  }, [id, data, filename, setMapData, map]);
+
+  return null; // Headless component
+}