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' ||
@@ -669,8 +743,8 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
           }
           break
         case 'assistant':
-          const answer = createStreamableValue()
-          answer.done(content)
+          const answer = createStreamableValue(content as string)
+          answer.done(content as string)
           switch (type) {
             case 'response':
               return {
@@ -682,7 +756,9 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
                 )
               }
             case 'related':
-              const relatedQueries = createStreamableValue<RelatedQueries>()
+              const relatedQueries = createStreamableValue<RelatedQueries>({
+                items: []
+              })
               relatedQueries.done(JSON.parse(content as string))
               return {
                 id,
@@ -716,12 +792,19 @@ 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':
           try {
             const toolOutput = JSON.parse(content as string)
-            const isCollapsed = createStreamableValue()
+            const isCollapsed = createStreamableValue(true)
             isCollapsed.done(true)
 
             if (
@@ -735,7 +818,9 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
               }
             }
 
-            const searchResults = createStreamableValue()
+            const searchResults = createStreamableValue(
+              JSON.stringify(toolOutput)
+            )
             searchResults.done(JSON.stringify(toolOutput))
             switch (name) {
               case 'search':
@@ -775,6 +860,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/layout.tsx

@@ -12,7 +12,10 @@ import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Toaster } from '@/components/ui/sonner'
 import { MapToggleProvider } from '@/components/map-toggle-context'
 import { ProfileToggleProvider } from '@/components/profile-toggle-context'
+import { UsageToggleProvider } from '@/components/usage-toggle-context'
 import { CalendarToggleProvider } from '@/components/calendar-toggle-context'
+import { HistoryToggleProvider } from '@/components/history-toggle-context'
+import { HistorySidebar } from '@/components/history-sidebar'
 import { MapLoadingProvider } from '@/components/map-loading-context';
 import ConditionalLottie from '@/components/conditional-lottie';
 import { MapProvider as MapContextProvider } from '@/components/map/map-context'
@@ -70,28 +73,33 @@ export default function RootLayout({
         )}
       >
         <CalendarToggleProvider>
-          <MapToggleProvider>
-            <ProfileToggleProvider>
-              <ThemeProvider
-                attribute="class"
-              defaultTheme="earth"
-              enableSystem
-              disableTransitionOnChange
-              themes={['light', 'dark', 'earth']}
-            >
-              <MapContextProvider>
-                <MapLoadingProvider>
-                  <Header />
-                  <ConditionalLottie />
-                  {children}
-                  <Sidebar />
-                  <Footer />
-                  <Toaster />
-                </MapLoadingProvider>
-              </MapContextProvider>
-            </ThemeProvider>
-          </ProfileToggleProvider>
-        </MapToggleProvider>
+          <HistoryToggleProvider>
+            <MapToggleProvider>
+              <ProfileToggleProvider>
+                <UsageToggleProvider>
+                  <ThemeProvider
+                    attribute="class"
+                    defaultTheme="earth"
+                    enableSystem
+                    disableTransitionOnChange
+                    themes={['light', 'dark', 'earth']}
+                  >
+                    <MapContextProvider>
+                      <MapLoadingProvider>
+                        <Header />
+                        <ConditionalLottie />
+                        {children}
+                        <Sidebar />
+                        <HistorySidebar />
+                        <Footer />
+                        <Toaster />
+                      </MapLoadingProvider>
+                    </MapContextProvider>
+                  </ThemeProvider>
+                </UsageToggleProvider>
+              </ProfileToggleProvider>
+            </MapToggleProvider>
+          </HistoryToggleProvider>
         </CalendarToggleProvider>
         <Analytics />
         <SpeedInsights />

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(() => {
@@ -214,7 +214,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