fireworks-ai 0.3.0 → 0.4.0

package/README.md

@@ -71,6 +71,21 @@ app.route("/", createAgentRouter({ sessions, translator }));
 serve({ fetch: app.fetch, port: 3000 });
 ```
 
+### Extended thinking
+
+Enable Claude's chain-of-thought reasoning by setting `thinking` in your session config:
+
+```typescript
+const sessions = new SessionManager(() => ({
+  context: {},
+  model: "claude-sonnet-4-5-20250929",
+  systemPrompt: "You are a helpful assistant.",
+  thinking: { type: "enabled", budgetTokens: 10000 },
+}));
+```
+
+When enabled, thinking blocks stream to the client as `thinking_delta` SSE events and render as collapsible cards in `MessageList`. Set `{ type: "disabled" }` to explicitly turn thinking off (it's off by default).
+
 This gives you four endpoints:
 
 | Method | Path | Description |
@@ -338,6 +353,7 @@ Drop the `fireworks-ai/theme.css` import and add `@source` — your shadcn theme
 | `PendingPermissions` | Renders pending tool approval and user question cards |
 | `ToolApprovalCard` | Tool approval card with Allow/Deny buttons |
 | `UserQuestionCard` | Structured question card with option selection |
+| `ThinkingBlock` | Collapsible card displaying extended thinking text |
 | `ThinkingIndicator` | Animated dots shown while agent is generating |
 | `CollapsibleCard` | Expandable card wrapper |
 | `StatusDot` | Phase-colored status indicator |
@@ -351,7 +367,7 @@ Drop the `fireworks-ai/theme.css` import and add `@source` — your shadcn theme
 | Type | Description |
 |------|-------------|
 | `SSEEvent` | `{ event: string, data: string }` |
-| `ChatMessage` | `{ id, role, content, toolCalls? }` |
+| `ChatMessage` | `{ id, role, content, thinking?, toolCalls? }` |
 | `ToolCallInfo` | `{ id, name, input, partialInput?, result?, error?, status }` |
 | `ToolCallPhase` | `"pending" \| "streaming_input" \| "running" \| "complete" \| "error"` |
 | `WidgetProps<TResult>` | Props passed to widget components |
@@ -374,6 +390,8 @@ Events emitted by the server, handled automatically by `useAgent`:
 | Event | Payload | Description |
 |-------|---------|-------------|
 | `message_start` | `{}` | Agent began generating a response |
+| `thinking_start` | `{}` | Extended thinking block began |
+| `thinking_delta` | `{ text }` | Streaming thinking text chunk |
 | `text_delta` | `{ text }` | Streaming text chunk |
 | `tool_start` | `{ id, name }` | Agent began calling a tool |
 | `tool_input_delta` | `{ id, partialJson }` | Streaming tool input JSON |

package/dist/react/ChatInput.js

@@ -1,15 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { cn } from "./cn.js";
 export function ChatInput({ onSend, placeholder = "Type a message...", disabled, className, }) {
     const [text, setText] = useState("");
+    const textareaRef = useRef(null);
     const isDisabled = disabled ?? false;
+    const MAX_H = 160; // matches max-h-40 (10rem)
+    const autoResize = useCallback(() => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+        el.style.overflowY = el.scrollHeight > MAX_H ? "auto" : "hidden";
+    }, []);
     function handleSend() {
         const trimmed = text.trim();
         if (!trimmed || isDisabled)
             return;
         onSend(trimmed);
         setText("");
+        requestAnimationFrame(() => {
+            const el = textareaRef.current;
+            if (el) {
+                el.style.height = "auto";
+            }
+        });
     }
     function handleKeyDown(e) {
         if (e.key === "Enter" && !e.shiftKey) {
@@ -17,5 +33,8 @@ export function ChatInput({ onSend, placeholder = "Type a message...", disabled,
             handleSend();
         }
     }
-    return (_jsxs("div", { className: cn("flex items-end gap-2 p-3", className), children: [_jsx("textarea", { value: text, onChange: (e) => setText(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, rows: 1, className: "flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" }), _jsx("button", { type: "button", onClick: handleSend, disabled: !text.trim() || isDisabled, className: "inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", "aria-hidden": "true", children: [_jsx("path", { d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" }), _jsx("path", { d: "m21.854 2.147-10.94 10.939" })] }) })] }));
+    return (_jsxs("div", { className: cn("flex items-end gap-2 p-3", className), children: [_jsx("textarea", { ref: textareaRef, value: text, onChange: (e) => {
+                    setText(e.target.value);
+                    autoResize();
+                }, onKeyDown: handleKeyDown, placeholder: placeholder, rows: 1, className: "flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring max-h-40 overflow-y-hidden" }), _jsx("button", { type: "button", onClick: handleSend, disabled: !text.trim() || isDisabled, className: "inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", "aria-hidden": "true", children: [_jsx("path", { d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" }), _jsx("path", { d: "m21.854 2.147-10.94 10.939" })] }) })] }));
 }

package/dist/react/MessageList.js

@@ -4,17 +4,19 @@ import { useChatStore } from "./AgentProvider.js";
 import { cn } from "./cn.js";
 import { PendingPermissions } from "./PendingPermissions.js";
 import { TextMessage } from "./TextMessage.js";
+import { ThinkingBlock } from "./ThinkingBlock.js";
 import { ThinkingIndicator } from "./ThinkingIndicator.js";
 import { ToolCallCard } from "./ToolCallCard.js";
 export function MessageList({ className }) {
     const messages = useChatStore((s) => s.messages);
     const streamingText = useChatStore((s) => s.streamingText);
+    const streamingThinking = useChatStore((s) => s.streamingThinking);
     const isThinking = useChatStore((s) => s.isThinking);
     const bottomRef = useRef(null);
     // biome-ignore lint/correctness/useExhaustiveDependencies: scroll on content changes
     useEffect(() => {
         bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, [messages, streamingText, isThinking]);
+    }, [messages, streamingText, streamingThinking, isThinking]);
     return (_jsx("div", { className: cn("flex-1 overflow-y-auto", className), children: _jsxs("div", { className: "flex flex-col gap-3 p-4 text-sm", children: [messages.map((msg) => {
                     if (msg.toolCalls?.length) {
                         return (_jsx("div", { className: "flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => (_jsx(ToolCallCard, { toolCall: tc }, tc.id))) }, msg.id));
@@ -22,9 +24,9 @@ export function MessageList({ className }) {
                     if (msg.role === "system") {
                         return (_jsx("div", { className: "text-center text-xs text-destructive", children: msg.content }, msg.id));
                     }
-                    if (msg.content) {
-                        return (_jsx(TextMessage, { role: msg.role, content: msg.content }, msg.id));
+                    if (msg.content || msg.thinking) {
+                        return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [msg.thinking && _jsx(ThinkingBlock, { thinking: msg.thinking }), msg.content && (_jsx(TextMessage, { role: msg.role, content: msg.content }))] }, msg.id));
                     }
                     return null;
-                }), streamingText && _jsx(TextMessage, { role: "assistant", content: streamingText }), _jsx(PendingPermissions, {}), isThinking && _jsx(ThinkingIndicator, {}), _jsx("div", { ref: bottomRef })] }) }));
+                }), streamingThinking && _jsx(ThinkingBlock, { thinking: streamingThinking, streaming: true }), streamingText && _jsx(TextMessage, { role: "assistant", content: streamingText }), _jsx(PendingPermissions, {}), isThinking && _jsx(ThinkingIndicator, {}), _jsx("div", { ref: bottomRef })] }) }));
 }

package/dist/react/ThinkingBlock.d.ts

@@ -0,0 +1,5 @@
+export declare function ThinkingBlock({ thinking, streaming, className, }: {
+    thinking: string;
+    streaming?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/ThinkingBlock.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import Markdown from "react-markdown";
+import { cn } from "./cn.js";
+const STORAGE_KEY = "fireworks-thinking-open";
+function readPref() {
+    try {
+        return localStorage.getItem(STORAGE_KEY) === "true";
+    }
+    catch {
+        return false;
+    }
+}
+function writePref(open) {
+    try {
+        localStorage.setItem(STORAGE_KEY, String(open));
+    }
+    catch {
+        /* SSR / restricted env */
+    }
+}
+export function ThinkingBlock({ thinking, streaming = false, className, }) {
+    const [open, setOpen] = useState(readPref);
+    const toggle = useCallback(() => {
+        setOpen((prev) => {
+            const next = !prev;
+            writePref(next);
+            return next;
+        });
+    }, []);
+    return (_jsx("div", { className: cn("flex justify-start", className), children: _jsxs("div", { className: "rounded-md border border-border/40 bg-accent/20 overflow-hidden", children: [_jsxs("button", { type: "button", onClick: toggle, className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-muted-foreground/60 hover:bg-accent/30 transition-colors", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: cn("h-3 w-3 transition-transform", open && "rotate-90"), "aria-hidden": "true", children: _jsx("path", { d: "m9 18 6-6-6-6" }) }), streaming && !open && (_jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-yellow-500 animate-pulse" })), _jsx("span", { className: "truncate min-w-0", children: "Thinking" })] }), open && (_jsx("div", { className: "px-2.5 pt-1 pb-2", children: _jsx(ThinkingContent, { children: thinking }) }))] }) }));
+}
+function ThinkingContent({ children }) {
+    return (_jsx("div", { className: "text-xs text-muted-foreground/70 italic [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children: _jsx(Markdown, { components: {
+                p: ({ children }) => _jsx("p", { className: "mb-2 last:mb-0", children: children }),
+                ul: ({ children }) => _jsx("ul", { className: "mb-2 ml-4 list-disc last:mb-0", children: children }),
+                ol: ({ children }) => _jsx("ol", { className: "mb-2 ml-4 list-decimal last:mb-0", children: children }),
+                li: ({ children }) => _jsx("li", { className: "mb-0.5", children: children }),
+                strong: ({ children }) => _jsx("strong", { className: "font-semibold", children: children }),
+            }, children: children }) }));
+}

package/dist/react/index.d.ts

@@ -11,6 +11,7 @@ export { getWidget, registerWidget, stripMcpPrefix } from "./registry.js";
 export { StatusDot } from "./StatusDot.js";
 export { type ChatStore, type ChatStoreShape, createChatStore } from "./store.js";
 export { TextMessage } from "./TextMessage.js";
+export { ThinkingBlock } from "./ThinkingBlock.js";
 export { ThinkingIndicator } from "./ThinkingIndicator.js";
 export { ToolApprovalCard } from "./ToolApprovalCard.js";
 export { ToolCallCard } from "./ToolCallCard.js";

package/dist/react/index.js

@@ -11,6 +11,7 @@ export { getWidget, registerWidget, stripMcpPrefix } from "./registry.js";
 export { StatusDot } from "./StatusDot.js";
 export { createChatStore } from "./store.js";
 export { TextMessage } from "./TextMessage.js";
+export { ThinkingBlock } from "./ThinkingBlock.js";
 export { ThinkingIndicator } from "./ThinkingIndicator.js";
 export { ToolApprovalCard } from "./ToolApprovalCard.js";
 export { ToolCallCard } from "./ToolCallCard.js";

package/dist/react/store.d.ts

@@ -6,13 +6,16 @@ interface ChatStoreState {
     isStreaming: boolean;
     isThinking: boolean;
     streamingText: string;
+    streamingThinking: string;
     pendingPermissions: PermissionRequest[];
 }
 interface ChatStoreActions {
     setSessionId: (id: string) => void;
     addUserMessage: (text: string) => void;
     appendStreamingText: (text: string) => void;
+    appendStreamingThinking: (text: string) => void;
     flushStreamingText: () => void;
+    flushStreamingThinking: () => void;
     addSystemMessage: (text: string) => void;
     startToolCall: (toolUseId: string, name: string) => void;
     appendToolInput: (toolUseId: string, partialJson: string) => void;

package/dist/react/store.js

@@ -19,6 +19,7 @@ export function createChatStore() {
         isStreaming: false,
         isThinking: false,
         streamingText: "",
+        streamingThinking: "",
         pendingPermissions: [],
         setSessionId: (id) => set((s) => {
             s.sessionId = id;
@@ -40,6 +41,26 @@ export function createChatStore() {
         appendStreamingText: (text) => set((s) => {
             s.streamingText += text;
         }),
+        appendStreamingThinking: (text) => set((s) => {
+            s.streamingThinking += text;
+        }),
+        flushStreamingThinking: () => set((s) => {
+            if (s.streamingThinking) {
+                const last = s.messages[s.messages.length - 1];
+                if (last?.role === "assistant" && !last.toolCalls?.length) {
+                    last.thinking = (last.thinking ?? "") + s.streamingThinking;
+                }
+                else {
+                    s.messages.push({
+                        id: `msg-${++nextId}`,
+                        role: "assistant",
+                        content: "",
+                        thinking: s.streamingThinking,
+                    });
+                }
+                s.streamingThinking = "";
+            }
+        }),
         flushStreamingText: () => set((s) => {
             if (s.streamingText) {
                 const last = s.messages[s.messages.length - 1];
@@ -113,6 +134,7 @@ export function createChatStore() {
             s.isStreaming = false;
             s.isThinking = false;
             s.streamingText = "";
+            s.streamingThinking = "";
             s.pendingPermissions = [];
         }),
     })));

package/dist/react/use-agent.js

@@ -25,13 +25,19 @@ export function useAgent(store, config) {
         es.addEventListener("message_start", () => {
             store.getState().setThinking(true);
         });
+        es.addEventListener("thinking_delta", (e) => {
+            const { text } = JSON.parse(e.data);
+            store.getState().appendStreamingThinking(text);
+        });
         es.addEventListener("text_delta", (e) => {
             store.getState().setThinking(false);
+            store.getState().flushStreamingThinking();
             const { text } = JSON.parse(e.data);
             store.getState().appendStreamingText(text);
         });
         es.addEventListener("tool_start", (e) => {
             store.getState().setThinking(false);
+            store.getState().flushStreamingThinking();
             store.getState().flushStreamingText();
             const { id, name } = JSON.parse(e.data);
             store.getState().startToolCall(id, name);
@@ -57,6 +63,7 @@ export function useAgent(store, config) {
             store.getState().addPermissionRequest(request);
         });
         es.addEventListener("session_error", (e) => {
+            store.getState().flushStreamingThinking();
             store.getState().flushStreamingText();
             store.getState().setThinking(false);
             const { subtype } = JSON.parse(e.data);
@@ -64,12 +71,14 @@ export function useAgent(store, config) {
             store.getState().setStreaming(false);
         });
         es.addEventListener("turn_complete", () => {
+            store.getState().flushStreamingThinking();
             store.getState().flushStreamingText();
             store.getState().setThinking(false);
             store.getState().setStreaming(false);
         });
         es.addEventListener("error", () => {
             if (es.readyState === EventSource.CLOSED) {
+                store.getState().flushStreamingThinking();
                 store.getState().flushStreamingText();
                 store.getState().setStreaming(false);
             }

package/dist/server/session.d.ts

@@ -10,6 +10,12 @@ export interface SessionInit<TCtx> {
     allowedTools?: string[];
     maxTurns?: number;
     permissionMode?: "default" | "acceptEdits" | "plan" | "bypassPermissions";
+    thinking?: {
+        type: "enabled";
+        budgetTokens: number;
+    } | {
+        type: "disabled";
+    };
 }
 export interface Session<TCtx> {
     id: string;

package/dist/server/session.js

@@ -72,6 +72,7 @@ export class SessionManager {
                 includePartialMessages: true,
                 abortController,
                 ...(canUseTool ? { canUseTool } : {}),
+                ...(init.thinking ? { thinking: init.thinking } : {}),
             },
         });
         const session = {

package/dist/server/translator.d.ts

@@ -6,6 +6,7 @@ export interface TranslatorConfig<TCtx> {
 export declare class MessageTranslator<TCtx> {
     private config;
     private toolNames;
+    private hadStreamThinking;
     constructor(config?: TranslatorConfig<TCtx>);
     translate(message: Record<string, unknown>, session: Session<TCtx>): SSEEvent[];
     private lastToolId;

package/dist/server/translator.js

@@ -2,6 +2,7 @@ import { PushChannel } from "./push-channel.js";
 export class MessageTranslator {
     config;
     toolNames = new Map();
+    hadStreamThinking = false;
     constructor(config) {
         this.config = config ?? {};
     }
@@ -15,6 +16,7 @@ export class MessageTranslator {
                 const event = message.event;
                 switch (event.type) {
                     case "message_start": {
+                        this.hadStreamThinking = false;
                         events.push({ event: "message_start", data: "{}" });
                         break;
                     }
@@ -32,6 +34,10 @@ export class MessageTranslator {
                                 });
                                 break;
                             }
+                            case "thinking": {
+                                events.push({ event: "thinking_start", data: "{}" });
+                                break;
+                            }
                             case "web_search_tool_result": {
                                 const toolUseId = block.tool_use_id;
                                 const toolName = this.toolNames.get(toolUseId);
@@ -52,7 +58,14 @@ export class MessageTranslator {
                     }
                     case "content_block_delta": {
                         const delta = event.delta;
-                        if (delta.type === "text_delta" && typeof delta.text === "string") {
+                        if (delta.type === "thinking_delta" && typeof delta.thinking === "string") {
+                            this.hadStreamThinking = true;
+                            events.push({
+                                event: "thinking_delta",
+                                data: JSON.stringify({ text: delta.thinking }),
+                            });
+                        }
+                        else if (delta.type === "text_delta" && typeof delta.text === "string") {
                             events.push({
                                 event: "text_delta",
                                 data: JSON.stringify({ text: delta.text }),
@@ -78,6 +91,15 @@ export class MessageTranslator {
                 if (msg?.content) {
                     for (const block of msg.content) {
                         switch (block.type) {
+                            case "thinking": {
+                                if (!this.hadStreamThinking && typeof block.thinking === "string") {
+                                    events.push({
+                                        event: "thinking_delta",
+                                        data: JSON.stringify({ text: block.thinking }),
+                                    });
+                                }
+                                break;
+                            }
                             case "tool_use":
                             case "server_tool_use": {
                                 const name = block.name;

package/dist/types.d.ts

@@ -21,6 +21,7 @@ export interface ChatMessage {
     id: string;
     role: "user" | "assistant" | "system";
     content: string;
+    thinking?: string;
     toolCalls?: ToolCallInfo[];
 }
 export interface WidgetProps<TResult = unknown> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fireworks-ai",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React + Hono toolkit for building chat UIs on top of the Claude Agent SDK",
   "license": "MIT",
   "author": "Dan Leeper",