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:
parent
ace85a6c69
commit
62000dcdac
1 changed files with 384 additions and 300 deletions
|
|
@ -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]}
|
||||
|
|
|
|||
Loading…
Reference in a new issue