feat: Add reasoning UI and refactor to useChat

app/api/chat/route.ts

@@ -1,68 +1,12 @@
-import { NextResponse, NextRequest } from 'next/server';
-import { saveChat, createMessage, NewChat, NewMessage } from '@/lib/actions/chat-db';
-import { getCurrentUserIdOnServer } from '@/lib/auth/get-current-user';
-// import { generateUUID } from '@/lib/utils'; // Assuming generateUUID is in lib/utils as per PR context - not needed for PKs
+import { CoreMessage, streamText } from 'ai';
+import { researcher } from '@/lib/agents/researcher';
 
-// This is a simplified POST handler. PR #533's version might be more complex,
-// potentially handling streaming AI responses and then saving.
-// For now, this focuses on the database interaction part.
-export async function POST(request: NextRequest) {
-  try {
-    const userId = await getCurrentUserIdOnServer();
-    if (!userId) {
-      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
-    }
+export const maxDuration = 30;
 
-    const body = await request.json();
+export async function POST(req: Request) {
+  const { messages }: { messages: CoreMessage[] } = await req.json();
 
-    // Example: Distinguish between creating a new chat vs. adding a message to existing chat
-    // The actual structure of `body` would depend on client-side implementation.
-    // Let's assume a simple case: creating a new chat with an initial message.
-    const { title, initialMessageContent, role = 'user' } = body;
+  const result = await researcher(messages);
 
-    if (!initialMessageContent) {
-        return NextResponse.json({ error: 'Initial message content is required' }, { status: 400 });
-    }
-
-    const newChatData: NewChat = {
-      // id: generateUUID(), // Drizzle schema now has defaultRandom for UUIDs
-      userId: userId,
-      title: title || 'New Chat', // Default title if not provided
-      // createdAt: new Date(), // Handled by defaultNow() in schema
-      visibility: 'private', // Default visibility
-    };
-
-    // Use a transaction if creating chat and first message together
-    // For simplicity here, let's assume saveChat handles chat creation and returns ID, then we create a message.
-    // A more robust `saveChat` might create the chat and first message in one go.
-    // The `saveChat` in chat-db.ts is designed to handle this.
-
-    const firstMessage: Omit<NewMessage, 'chatId'> = {
-        // id: generateUUID(), // Drizzle schema now has defaultRandom for UUIDs
-        // chatId is omitted as it will be set by saveChat
-        userId: userId,
-        role: role as NewMessage['role'], // Ensure role type matches schema expectation
-        content: initialMessageContent,
-        // createdAt: new Date(), // Handled by defaultNow() in schema, not strictly needed here
-    };
-
-    // The saveChat in chat-db.ts is designed to take initial messages.
-    const savedChatId = await saveChat(newChatData, [firstMessage]);
-
-    if (!savedChatId) {
-         return NextResponse.json({ error: 'Failed to save chat' }, { status: 500 });
-    }
-
-    // Fetch the newly created chat and message to return (optional, but good for client)
-    // For now, just return success and the new chat ID.
-    return NextResponse.json({ message: 'Chat created successfully', chatId: savedChatId }, { status: 201 });
-
-  } catch (error) {
-    console.error('Error in POST /api/chat:', error);
-    let errorMessage = 'Internal Server Error';
-    if (error instanceof Error) {
-        errorMessage = error.message;
-    }
-    return NextResponse.json({ error: errorMessage }, { status: 500 });
-  }
+  return new Response(result.textStream);
 }

app/page.tsx

@@ -1,6 +1,5 @@
 import { Chat } from '@/components/chat'
 import {nanoid } from 'nanoid'
-import { AI } from './actions'
 
 export const maxDuration = 60
 
@@ -9,10 +8,8 @@ import { MapDataProvider } from '@/components/map/map-data-context'
 export default function Page() {
   const id = nanoid()
   return (
-    <AI initialAIState={{ chatId: id, messages: [] }}>
-      <MapDataProvider>
-        <Chat id={id} />
-      </MapDataProvider>
-    </AI>
+    <MapDataProvider>
+      <Chat id={id} />
+    </MapDataProvider>
   )
 }

app/search/[id]/page.tsx

@@ -1,7 +1,6 @@
 import { notFound, redirect } from 'next/navigation';
 import { Chat } from '@/components/chat';
 import { getChat, getChatMessages } from '@/lib/actions/chat'; // Added getChatMessages
-import { AI } from '@/app/actions';
 import { MapDataProvider } from '@/components/map/map-data-context';
 import { getCurrentUserIdOnServer } from '@/lib/auth/get-current-user'; // For server-side auth
 import type { AIMessage } from '@/lib/types'; // For AIMessage type
@@ -41,36 +40,9 @@ export default async function SearchPage({ params }: SearchPageProps) {
     notFound();
   }
 
-  // Fetch messages for the chat
-  const dbMessages: DrizzleMessage[] = await getChatMessages(chat.id);
-
-  // Transform DrizzleMessages to AIMessages
-  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
-      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.
-    };
-  });
-
   return (
-    <AI
-      initialAIState={{
-        chatId: chat.id,
-        messages: initialMessages, // Use the transformed messages from the database
-        // isSharePage: true, // This was in PR#533, but share functionality is removed.
-                             // If needed for styling or other logic, it can be set.
-      }}
-    >
-      <MapDataProvider>
-        <Chat id={id} />
-      </MapDataProvider>
-    </AI>
+    <MapDataProvider>
+      <Chat id={id} />
+    </MapDataProvider>
   );
 }

build.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+env $(cat .env.local | xargs) ./node_modules/.bin/next build

components/ai-elements/reasoning.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils/index';
+import { BrainIcon, ChevronDownIcon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+import { createContext, memo, useContext, useEffect, useState } from 'react';
+import { Response } from './response';
+
+type ReasoningContextValue = {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number;
+};
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error('Reasoning components must be used within Reasoning');
+  }
+  return context;
+};
+
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export const Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }: ReasoningProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const [duration, setDuration] = useControllableState({
+      prop: durationProp,
+      defaultProp: 0,
+    });
+
+    const [hasAutoClosedRef, setHasAutoClosedRef] = useState(false);
+    const [startTime, setStartTime] = useState<number | null>(null);
+
+    // Track duration when streaming starts and ends
+    useEffect(() => {
+      if (isStreaming) {
+        if (startTime === null) {
+          setStartTime(Date.now());
+        }
+      } else if (startTime !== null) {
+        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+        setStartTime(null);
+      }
+    }, [isStreaming, startTime, setDuration]);
+
+    // Auto-open when streaming starts, auto-close when streaming ends (once only)
+    useEffect(() => {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosedRef) {
+        // Add a small delay before closing to allow user to see the content
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosedRef(true);
+        }, AUTO_CLOSE_DELAY);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosedRef]);
+
+    const handleOpenChange = (newOpen: boolean) => {
+      setIsOpen(newOpen);
+    };
+
+    return (
+      <ReasoningContext.Provider
+        value={{ isStreaming, isOpen, setIsOpen, duration }}
+      >
+        <Collapsible
+          className={cn('not-prose mb-4', className)}
+          onOpenChange={handleOpenChange}
+          open={isOpen}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  }
+);
+
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+
+export const ReasoningTrigger = memo(
+  ({ className, children, ...props }: ReasoningTriggerProps) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className={cn(
+          'flex items-center gap-2 text-muted-foreground text-sm',
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="size-4" />
+            {isStreaming || duration === 0 ? (
+              <p>Thinking...</p>
+            ) : (
+              <p>
+                Thought for {duration} {duration === 1 ? 'second' : 'seconds'}
+              </p>
+            )}
+            <ChevronDownIcon
+              className={cn(
+                'size-4 text-muted-foreground transition-transform',
+                isOpen ? 'rotate-180' : 'rotate-0'
+              )}
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  }
+);
+
+export type ReasoningContentProps = ComponentProps<
+  typeof CollapsibleContent
+> & {
+  children: string;
+};
+
+export const ReasoningContent = memo(
+  ({ className, children, ...props }: ReasoningContentProps) => (
+    <CollapsibleContent
+      className={cn(
+        'mt-4 text-sm',
+        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+        className
+      )}
+      {...props}
+    >
+      <Response className="grid gap-2">{children}</Response>
+    </CollapsibleContent>
+  )
+);
+
+Reasoning.displayName = 'Reasoning';
+ReasoningTrigger.displayName = 'ReasoningTrigger';
+ReasoningContent.displayName = 'ReasoningContent';

components/ai-elements/response.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { cn } from '@/lib/utils/index';
+import { type ComponentProps, memo } from 'react';
+import { Streamdown } from 'streamdown';
+
+type ResponseProps = ComponentProps<typeof Streamdown>;
+
+export const Response = memo(
+  ({ className, ...props }: ResponseProps) => (
+    <Streamdown
+      className={cn(
+        'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+
+Response.displayName = 'Response';