feat: Display AI reasoning/thinking blocks in chat interface (#152)

* feat: Add reasoning/thinking blocks display in chat interface

* feat: add multi-provider options support and replace custom reasoning UI with AI Elements

* resolve conflicting reasoning configs and correct provider-specific reasoning parameters

* try to solve conflict

* fix: simplify reasoning display and remove unnecessary dependencies

- Remove Streamdown dependency (~5MB) - reasoning is plain text only
- Fix Bedrock providerOptions merging for Claude reasoning configs
- Remove unsupported DeepSeek reasoning configuration
- Clean up unused environment variables (REASONING_BUDGET_TOKENS, REASONING_EFFORT, DEEPSEEK_REASONING_*)
- Remove dead commented code from route.ts

Reasoning blocks contain plain thinking text and don't need markdown/diagram/code rendering.

* feat: comprehensive reasoning support improvements

Major improvements:
- Auto-enable reasoning display for all supported models
- Fix provider-specific reasoning configurations
- Remove unnecessary Streamdown dependency (~5MB)
- Clean up debug logging

Provider changes:
- OpenAI: Auto-enable reasoningSummary for o1/o3/gpt-5 models
- Google: Auto-enable includeThoughts for Gemini 2.5/3 models
- Bedrock: Restrict reasoningConfig to only Claude/Nova (fixes MiniMax error)
- Ollama: Add thinking support for qwen3-like models

Other improvements:
- Remove ENABLE_REASONING toggle (always enabled)
- Fix Bedrock providerOptions merging for Claude
- Simplify reasoning component (plain text rendering)
- Clean up unused environment variables

* fix: critical bugs and documentation gaps in reasoning support

Critical fixes:
- Fix Bedrock shallow merge bug (deep merge preserves anthropicBeta + reasoningConfig)
- Add parseInt validation with parseIntSafe helper (prevents NaN errors)
- Validate all numeric env vars with min/max ranges

Documentation improvements:
- Add BEDROCK_REASONING_BUDGET_TOKENS and BEDROCK_REASONING_EFFORT to env.example
- Add OLLAMA_ENABLE_THINKING to env.example
- Update JSDoc with accurate env var list and ranges

Code cleanup:
- Remove debug console.log statements from route.ts
- Refactor duplicate providerOptions assignments

---------

Co-authored-by: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
Co-authored-by: Dayuan Jiang <jdy.toh@gmail.com>

components/ai-elements/reasoning.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state"
+import { BrainIcon, ChevronDownIcon } from "lucide-react"
+import type { ComponentProps, ReactNode } from "react"
+import { createContext, memo, useContext, useEffect, useState } from "react"
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { cn } from "@/lib/utils"
+import { Shimmer } from "./shimmer"
+
+type ReasoningContextValue = {
+    isStreaming: boolean
+    isOpen: boolean
+    setIsOpen: (open: boolean) => void
+    duration: number | undefined
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null)
+
+export 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: undefined,
+        })
+
+        const [hasAutoClosed, setHasAutoClosed] = 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 && !hasAutoClosed) {
+                // Add a small delay before closing to allow user to see the content
+                const timer = setTimeout(() => {
+                    setIsOpen(false)
+                    setHasAutoClosed(true)
+                }, AUTO_CLOSE_DELAY)
+
+                return () => clearTimeout(timer)
+            }
+        }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed])
+
+        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
+> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode
+}
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+    if (isStreaming || duration === 0) {
+        return <Shimmer duration={1}>Thinking...</Shimmer>
+    }
+    if (duration === undefined) {
+        return <p>Thought for a few seconds</p>
+    }
+    return <p>Thought for {duration} seconds</p>
+}
+
+export const ReasoningTrigger = memo(
+    ({
+        className,
+        children,
+        getThinkingMessage = defaultGetThinkingMessage,
+        ...props
+    }: ReasoningTriggerProps) => {
+        const { isStreaming, isOpen, duration } = useReasoning()
+
+        return (
+            <CollapsibleTrigger
+                className={cn(
+                    "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+                    className,
+                )}
+                {...props}
+            >
+                {children ?? (
+                    <>
+                        <BrainIcon className="size-4" />
+                        {getThinkingMessage(isStreaming, duration)}
+                        <ChevronDownIcon
+                            className={cn(
+                                "size-4 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-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+                className,
+            )}
+            {...props}
+        >
+            <div className="whitespace-pre-wrap">{children}</div>
+        </CollapsibleContent>
+    ),
+)
+
+Reasoning.displayName = "Reasoning"
+ReasoningTrigger.displayName = "ReasoningTrigger"
+ReasoningContent.displayName = "ReasoningContent"

components/ai-elements/shimmer.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { motion } from "motion/react"
+import {
+    type CSSProperties,
+    type ElementType,
+    type JSX,
+    memo,
+    useMemo,
+} from "react"
+import { cn } from "@/lib/utils"
+
+export type TextShimmerProps = {
+    children: string
+    as?: ElementType
+    className?: string
+    duration?: number
+    spread?: number
+}
+
+const ShimmerComponent = ({
+    children,
+    as: Component = "p",
+    className,
+    duration = 2,
+    spread = 2,
+}: TextShimmerProps) => {
+    const MotionComponent = motion.create(
+        Component as keyof JSX.IntrinsicElements,
+    )
+
+    const dynamicSpread = useMemo(
+        () => (children?.length ?? 0) * spread,
+        [children, spread],
+    )
+
+    return (
+        <MotionComponent
+            animate={{ backgroundPosition: "0% center" }}
+            className={cn(
+                "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+                "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+                className,
+            )}
+            initial={{ backgroundPosition: "100% center" }}
+            style={
+                {
+                    "--spread": `${dynamicSpread}px`,
+                    backgroundImage:
+                        "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+                } as CSSProperties
+            }
+            transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration,
+                ease: "linear",
+            }}
+        >
+            {children}
+        </MotionComponent>
+    )
+}
+
+export const Shimmer = memo(ShimmerComponent)

components/chat-message-display.tsx

@@ -21,6 +21,11 @@ import {
 import Image from "next/image"
 import { useCallback, useEffect, useRef, useState } from "react"
 import ReactMarkdown from "react-markdown"
+import {
+    Reasoning,
+    ReasoningContent,
+    ReasoningTrigger,
+} from "@/components/ai-elements/reasoning"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import {
     convertToLegalXml,
@@ -167,6 +172,7 @@ interface ChatMessageDisplayProps {
     sessionId?: string
     onRegenerate?: (messageIndex: number) => void
     onEditMessage?: (messageIndex: number, newText: string) => void
+    status?: "streaming" | "submitted" | "idle" | "error" | "ready"
 }
 
 export function ChatMessageDisplay({
@@ -176,6 +182,7 @@ export function ChatMessageDisplay({
     sessionId,
     onRegenerate,
     onEditMessage,
+    status = "idle",
 }: ChatMessageDisplayProps) {
     const { chartXML, loadDiagram: onDisplayChart } = useDiagram()
     const messagesEndRef = useRef<HTMLDivElement>(null)
@@ -501,6 +508,52 @@ export function ChatMessageDisplay({
                                         </div>
                                     )}
                                 <div className="max-w-[85%] min-w-0">
+                                    {/* Reasoning blocks - displayed first for assistant messages */}
+                                    {message.role === "assistant" &&
+                                        message.parts?.map(
+                                            (part, partIndex) => {
+                                                if (part.type === "reasoning") {
+                                                    const reasoningPart =
+                                                        part as {
+                                                            type: "reasoning"
+                                                            text: string
+                                                        }
+                                                    const isLastPart =
+                                                        partIndex ===
+                                                        (message.parts
+                                                            ?.length ?? 0) -
+                                                            1
+                                                    const isLastMessage =
+                                                        message.id ===
+                                                        messages[
+                                                            messages.length - 1
+                                                        ]?.id
+                                                    const isStreamingReasoning =
+                                                        status ===
+                                                            "streaming" &&
+                                                        isLastPart &&
+                                                        isLastMessage
+
+                                                    return (
+                                                        <Reasoning
+                                                            key={`${message.id}-reasoning-${partIndex}`}
+                                                            className="w-full"
+                                                            isStreaming={
+                                                                isStreamingReasoning
+                                                            }
+                                                        >
+                                                            <ReasoningTrigger />
+                                                            <ReasoningContent>
+                                                                {
+                                                                    reasoningPart.text
+                                                                }
+                                                            </ReasoningContent>
+                                                        </Reasoning>
+                                                    )
+                                                }
+                                                return null
+                                            },
+                                        )}
                                     {/* Edit mode for user messages */}
                                     {isEditing && message.role === "user" ? (
                                         <div className="flex flex-col gap-2">

components/chat-panel.tsx

@@ -1320,6 +1320,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     setFiles={handleFileChange}
                     sessionId={sessionId}
                     onRegenerate={handleRegenerate}
+                    status={status}
                     onEditMessage={handleEditMessage}
                 />
             </main>

components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }