feat: now reasoning output is rendered in the UI

Author: nickytonline

src/components/Chat.tsx

@@ -7,6 +7,7 @@ import type { Message } from 'ai'
 import { useLocalStorage } from '../hooks/useLocalStorage'
 import { type Servers } from '../lib/schemas'
 import { ToolCallMessage } from './ToolCallMessage'
+import { ReasoningMessage } from './ReasoningMessage'
 import { useModel } from '../contexts/ModelContext'
 
 // Streamed event type
@@ -22,6 +23,15 @@ type StreamEvent =
       arguments?: unknown
     }
   | { type: 'user'; id: string; content: string }
+  | {
+      type: 'reasoning'
+      effort: string
+      summary: string | null
+      model?: string
+      serviceTier?: string
+      temperature?: number
+      topP?: number
+    }
 
 export function Chat() {
   const messagesEndRef = useRef<HTMLDivElement>(null)
@@ -61,6 +71,22 @@ export function Chat() {
             try {
               const toolState = JSON.parse(line.slice(2))
 
+              if (toolState.type === 'reasoning') {
+                setStreamBuffer((prev) => [
+                  ...prev,
+                  {
+                    type: 'reasoning',
+                    effort: toolState.effort,
+                    summary: toolState.summary,
+                    model: toolState.model,
+                    serviceTier: toolState.serviceTier,
+                    temperature: toolState.temperature,
+                    topP: toolState.topP,
+                  },
+                ])
+                return
+              }
+
               if ('delta' in toolState) {
                 try {
                   toolState.delta =
@@ -191,6 +217,19 @@ export function Chat() {
                     args={event}
                   />
                 )
+              } else if ('type' in event && event.type === 'reasoning') {
+                return (
+                  <ReasoningMessage
+                    key={`reasoning-${event.effort}-${event.summary || ''}`}
+                    effort={event.effort}
+                    summary={event.summary}
+                    model={event.model}
+                    serviceTier={event.serviceTier}
+                    temperature={event.temperature}
+                    topP={event.topP}
+                    isLoading={streaming && idx === renderEvents.length - 1}
+                  />
+                )
               } else if ('type' in event && event.type === 'assistant') {
                 const assistantEvent = event as Extract<
                   StreamEvent,

src/components/ChatMessage.tsx

@@ -2,7 +2,7 @@ import { cn } from '../lib/utils'
 import type { Message } from '../mcp/client'
 import { formatTimestamp } from '../lib/utils'
 import { Bot, User, CheckCircle2, Clock, AlertCircle } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
+import { MarkdownContent } from './MarkdownContent'
 
 type ChatMessageProps = {
   message: Message
@@ -52,35 +52,7 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
           )}
         >
           <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
-            <ReactMarkdown
-              components={{
-                pre: ({ node, ...props }) => (
-                  <pre
-                    className="overflow-x-auto whitespace-pre-wrap break-words break-all"
-                    {...props}
-                  />
-                ),
-                code: ({ node, ...props }) => (
-                  <code
-                    className="break-words break-all whitespace-pre-wrap"
-                    {...props}
-                  />
-                ),
-                a: ({ href, children, ...props }) => (
-                  <a
-                    href={href}
-                    className="break-words break-all"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    {...props}
-                  >
-                    {children}
-                  </a>
-                ),
-              }}
-            >
-              {message.content}
-            </ReactMarkdown>
+            <MarkdownContent content={message.content} />
           </div>
         </div>
 

src/components/MarkdownContent.tsx

@@ -0,0 +1,41 @@
+import ReactMarkdown from 'react-markdown'
+
+type MarkdownContentProps = {
+  content: string
+}
+
+export function MarkdownContent({ content }: MarkdownContentProps) {
+  return (
+    <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
+      <ReactMarkdown
+        components={{
+          pre: ({ node, ...props }) => (
+            <pre
+              className="overflow-x-auto whitespace-pre-wrap break-words break-all"
+              {...props}
+            />
+          ),
+          code: ({ node, ...props }) => (
+            <code
+              className="break-words break-all whitespace-pre-wrap"
+              {...props}
+            />
+          ),
+          a: ({ href, children, ...props }) => (
+            <a
+              href={href}
+              className="break-words break-all"
+              target="_blank"
+              rel="noopener noreferrer"
+              {...props}
+            >
+              {children}
+            </a>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

src/components/ReasoningMessage.tsx

@@ -0,0 +1,58 @@
+import { Brain } from 'lucide-react'
+import { cn } from '../lib/utils'
+import { MarkdownContent } from './MarkdownContent'
+
+type ReasoningMessageProps = {
+  effort: string
+  summary: string | null
+  model?: string
+  serviceTier?: string
+  temperature?: number
+  topP?: number
+  isLoading?: boolean
+}
+
+export function ReasoningMessage({
+  effort,
+  summary,
+  model,
+  serviceTier,
+  temperature,
+  topP,
+  isLoading,
+}: ReasoningMessageProps) {
+  return (
+    <div className="flex w-full max-w-full gap-2 py-2 animate-in fade-in justify-start">
+      <div
+        className={cn(
+          'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-300',
+          isLoading && 'animate-[pulse_1.5s_ease-in-out_infinite] opacity-80',
+        )}
+      >
+        <Brain className="h-5 w-5" />
+      </div>
+
+      <div className="flex flex-col space-y-1 items-start w-full sm:w-[85%] md:w-[75%] lg:w-[65%]">
+        <div className="rounded-2xl px-4 py-2 text-sm w-full bg-purple-50 text-purple-900 dark:bg-purple-950 dark:text-purple-100">
+          <div className="font-medium mb-1">Reasoning</div>
+          <div className="text-xs space-y-1">
+            {effort && <div>Effort: {effort}</div>}
+            {summary && (
+              <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
+                <MarkdownContent content={summary} />
+              </div>
+            )}
+            {model && <div>Model: {model}</div>}
+            {serviceTier && <div>Service Tier: {serviceTier}</div>}
+            <div className="flex gap-4">
+              {temperature !== undefined && (
+                <div>Temperature: {temperature}</div>
+              )}
+              {topP !== undefined && <div>Top P: {topP}</div>}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/lib/streaming.ts

@@ -21,6 +21,7 @@ export function streamText(
       }
 
       let buffer = ''
+      let reasoningSummaryBuffer = ''
 
       const flush = () => {
         if (buffer) {
@@ -75,6 +76,48 @@ export function streamText(
               }
             }
             break
+
+          case 'response.content_part.added':
+          case 'response.content_part.done':
+            if (chunk.part?.type === 'output_text' && chunk.part.text) {
+              buffer += chunk.part.text
+              flush()
+            }
+            break
+
+          case 'response.reasoning.delta':
+            if (typeof chunk.delta === 'string') {
+              controller.enqueue(
+                encoder.encode(
+                  `t:${JSON.stringify({
+                    type: 'reasoning',
+                    effort: chunk.effort,
+                    summary: chunk.delta,
+                    model: chunk.model,
+                    serviceTier: chunk.service_tier,
+                    temperature: chunk.temperature,
+                    topP: chunk.top_p,
+                  })}\n`,
+                ),
+              )
+            }
+            break
+
+          case 'response.created':
+          case 'response.in_progress':
+            if (chunk.response?.reasoning) {
+              controller.enqueue(
+                encoder.encode(
+                  `t:${JSON.stringify({
+                    type: 'reasoning',
+                    effort: chunk.response.reasoning.effort,
+                    summary: chunk.response.reasoning.summary,
+                  })}\n`,
+                ),
+              )
+            }
+            break
+
           case 'response.mcp_call.failed':
             console.error('[TOOL CALL FAILED]', chunk)
 
@@ -163,6 +206,31 @@ export function streamText(
             }
             break
 
+          case 'response.reasoning_summary_text.delta':
+            if (typeof chunk.delta === 'string') {
+              reasoningSummaryBuffer += chunk.delta
+            }
+            break
+
+          case 'response.reasoning_summary_text.done':
+            if (reasoningSummaryBuffer) {
+              controller.enqueue(
+                encoder.encode(
+                  `t:${JSON.stringify({
+                    type: 'reasoning',
+                    effort: chunk.effort,
+                    summary: reasoningSummaryBuffer,
+                    model: chunk.model,
+                    serviceTier: chunk.service_tier,
+                    temperature: chunk.temperature,
+                    topP: chunk.top_p,
+                  })}\n`,
+                ),
+              )
+              reasoningSummaryBuffer = ''
+            }
+            break
+
           default:
             break
         }

src/routes/api/chat.ts

@@ -79,6 +79,13 @@ export const APIRoute = createAPIFileRoute('/api/chat')({
         tools,
         input,
         stream: true,
+        ...(model.startsWith('o3') || model.startsWith('o4')
+          ? {
+              reasoning: {
+                summary: 'detailed',
+              },
+            }
+          : {}),
       })
 
       return streamText(answer)