Implement Reasoning UI

.gitignore

@@ -28,10 +28,6 @@ yarn-error.log*
 # local env files
 .env*.local
 
-# log files
-dev_server.log
-server.log
-
 # vercel
 .vercel
 
@@ -56,4 +52,4 @@ aef_index.csv
 # Environment variables with GCP credentials
 .env.local
 .env.production.local
-*.log
+dev_server.log

app/actions.tsx

@@ -20,6 +20,7 @@ import { saveChat, getSystemPrompt } from '@/lib/actions/chat' // Added getSyste
 import { Chat, AIMessage } from '@/lib/types'
 import { UserMessage } from '@/components/user-message'
 import { BotMessage } from '@/components/message'
+import { ReasoningDisplay } from '@/components/reasoning-display'
 import { SearchSection } from '@/components/search-section'
 import SearchRelated from '@/components/search-related'
 import { GeoJsonLayer } from '@/components/map/geojson-layer'
@@ -92,58 +93,17 @@ async function submit(formData?: FormData, skip?: boolean) {
       <BotMessage content={summaryStream.value} />
     );
 
-    messages.push({ role: 'assistant', content: analysisResult.summary || 'Analysis complete.' });
-
-    const sanitizedMessages: CoreMessage[] = messages.map(m => {
-      if (Array.isArray(m.content)) {
-        return {
-          ...m,
-          content: m.content.filter(part => part.type !== 'image')
-        } as CoreMessage
-      }
-      return m
-    })
-
-    const relatedQueries = await querySuggestor(uiStream, sanitizedMessages);
-    uiStream.append(
-        <Section title="Follow-up">
-            <FollowupPanel />
-        </Section>
-    );
-
-    await new Promise(resolve => setTimeout(resolve, 500));
-
-    const groupeId = nanoid();
-
     aiState.done({
-        ...aiState.get(),
-        messages: [
-            ...aiState.get().messages,
-            {
-                id: groupeId,
-                role: 'assistant',
-                content: analysisResult.summary || 'Analysis complete.',
-                type: 'response'
-            },
-            {
-                id: groupeId,
-                role: 'assistant',
-                content: JSON.stringify(analysisResult),
-                type: 'resolution_search_result'
-            },
-            {
-                id: groupeId,
-                role: 'assistant',
-                content: JSON.stringify(relatedQueries),
-                type: 'related'
-            },
-            {
-                id: groupeId,
-                role: 'assistant',
-                content: 'followup',
-                type: 'followup'
-            }
-        ]
+      ...aiState.get(),
+      messages: [
+        ...aiState.get().messages,
+        {
+          id: nanoid(),
+          role: 'assistant',
+          content: JSON.stringify(analysisResult),
+          type: 'resolution_search_result'
+        }
+      ]
     });
 
     isGenerating.done(false);
@@ -361,24 +321,41 @@ async function submit(formData?: FormData, skip?: boolean) {
     let toolOutputs: ToolResultPart[] = []
     let errorOccurred = false
     const streamText = createStreamableValue<string>()
-    uiStream.update(<Spinner />)
+    const reasoningStream = createStreamableValue<string>()
+    const actionsStream = createStreamableValue<string>()
+    console.log('Updating uiStream with Thinking section');
+    uiStream.update(
+      <Section title="Thinking">
+        <ReasoningDisplay
+          content={reasoningStream.value}
+          actions={actionsStream.value}
+        />
+      </Section>
+    )
 
     while (
       useSpecificAPI
         ? answer.length === 0
         : answer.length === 0 && !errorOccurred
     ) {
-      const { fullResponse, hasError, toolResponses } = await researcher(
-        currentSystemPrompt,
-        uiStream,
-        streamText,
-        messages,
-        mapProvider,
-        useSpecificAPI
-      )
+      const { fullResponse, hasError, toolResponses, reasoningResponse } =
+        await researcher(
+          currentSystemPrompt,
+          uiStream,
+          streamText,
+          reasoningStream,
+          actionsStream,
+          messages,
+          mapProvider,
+          useSpecificAPI
+        )
       answer = fullResponse
       toolOutputs = toolResponses
       errorOccurred = hasError
+      if (reasoningResponse) {
+        console.log('Reasoning response received, marking reasoningStream as done');
+        reasoningStream.done(reasoningResponse)
+      }
 
       if (toolOutputs.length > 0) {
         toolOutputs.map(output => {
@@ -636,6 +613,15 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
           const answer = createStreamableValue()
           answer.done(content)
           switch (type) {
+            case 'reasoning':
+              return {
+                id,
+                component: (
+                  <Section title="Thinking">
+                    <ReasoningDisplay content={answer.value} />
+                  </Section>
+                )
+              }
             case 'response':
               return {
                 id,
@@ -667,12 +653,17 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
               }
             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} />
                     )}

app/globals.css

@@ -188,7 +188,7 @@
   }
 
   .mobile-chat-input-area {
-    height: auto;
+    height: 70px;
     padding: 10px;
     background-color: hsl(var(--background));
     /* border-top: 1px solid hsl(var(--border)); */ /* Removed for cleaner separation */

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata, Viewport } from 'next'
-import { Inter as FontSans, Poppins } from 'next/font/google'
+import { Inter as FontSans } from 'next/font/google'
 import './globals.css'
 import 'katex/dist/katex.min.css';
 import { cn } from '@/lib/utils'
@@ -22,12 +22,6 @@ const fontSans = FontSans({
   variable: '--font-sans'
 })
 
-const fontPoppins = Poppins({
-  subsets: ['latin'],
-  variable: '--font-poppins',
-  weight: ['400', '500', '600', '700']
-})
-
 const title = ''
 const description =
   'language to Maps'
@@ -62,13 +56,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={cn(
-          'font-sans antialiased',
-          fontSans.variable,
-          fontPoppins.variable
-        )}
-      >
+      <body className={cn('font-sans antialiased', fontSans.variable)}>
         <CalendarToggleProvider>
           <MapToggleProvider>
             <ProfileToggleProvider>