feat: Add reasoning token support with expandable thinking blocks

- Add reasoning field to AssistantMessage type
- Create ReasoningBlock component with truncate/expand functionality
- Add reasoning-capable models (Qwen QwQ, DeepSeek R1, Qwen 3 32B)
- Implement reasoning event handling in stream processing
- Enable reasoning format for Groq and Anthropic models
- Style reasoning blocks with grey border and reduced font size
- Display reasoning above assistant messages when available

The reasoning blocks show truncated thinking tokens by default and
expand on click to show full reasoning process from models like
Qwen3-32b that support step-by-step reasoning output.
This commit is contained in:
Glen Maddern 2025-06-24 16:41:56 +10:00
commit 62000dcdac

View file

@ -5,6 +5,7 @@ import rehypeHighlight from "rehype-highlight";
import { type Message } from "../types";
import ToolCallMessage from "./ToolCallMessage";
import ToolResultMessage from "./ToolResultMessage";
import ReasoningBlock from "./ReasoningBlock";
interface ChatMessageProps {
message: Message;
@ -37,6 +38,11 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
: " text-zinc-900 w-full"
}`}
>
{/* Show reasoning block for assistant messages with reasoning */}
{message.role === "assistant" && "reasoning" in message && message.reasoning && (
<ReasoningBlock reasoning={message.reasoning} />
)}
<div className="prose prose-zinc">
<ReactMarkdown
remarkPlugins={[remarkGfm]}