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/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">