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>