@tambo-ai/react 0.73.0 → 0.74.0

package/esm/v1/utils/event-accumulator.js

@@ -5,8 +5,9 @@
  * Used with useReducer to accumulate events into thread state.
  */
 import { EventType } from "@ag-ui/core";
-import { asTamboCustomEvent, } from "../types/event";
-import { applyJsonPatch } from "./json-patch";
+import { asTamboCustomEvent, } from "../types/event.js";
+import { parse as parsePartialJson } from "partial-json";
+import { applyJsonPatch } from "./json-patch.js";
 /**
  * Error thrown when an unreachable case is reached in a switch statement.
  * This indicates a programming error where not all cases were handled.
@@ -37,19 +38,36 @@ export function createInitialThreadState(threadId) {
             status: "idle",
             createdAt: now,
             updatedAt: now,
+            lastRunCancelled: false,
         },
         streaming: initialStreamingState,
         accumulatingToolArgs: new Map(),
     };
 }
 /**
- * Create initial stream state with empty threadMap.
+ * Placeholder thread ID used for new threads before they get a real ID from the server.
+ * This allows optimistic UI updates (showing user messages immediately) before the
+ * server responds with the actual thread ID.
+ */
+export const PLACEHOLDER_THREAD_ID = "placeholder";
+/**
+ * Check if a thread ID is a placeholder (not a real API thread ID).
+ * @param threadId - Thread ID to check
+ * @returns True if this is a placeholder thread ID
+ */
+export function isPlaceholderThreadId(threadId) {
+    return threadId === PLACEHOLDER_THREAD_ID;
+}
+/**
+ * Create initial stream state with placeholder thread.
  * @returns Initial stream state
  */
 export function createInitialState() {
     return {
-        threadMap: {},
-        currentThreadId: null,
+        threadMap: {
+            [PLACEHOLDER_THREAD_ID]: createInitialThreadState(PLACEHOLDER_THREAD_ID),
+        },
+        currentThreadId: PLACEHOLDER_THREAD_ID,
     };
 }
 /**
@@ -193,28 +211,85 @@ export function streamReducer(state, action) {
                 currentThreadId: threadId,
             };
         }
+        case "LOAD_THREAD_MESSAGES": {
+            return handleLoadThreadMessages(state, action);
+        }
+        case "UPDATE_THREAD_TITLE": {
+            const threadState = state.threadMap[action.threadId];
+            if (!threadState) {
+                return state;
+            }
+            return {
+                ...state,
+                threadMap: {
+                    ...state.threadMap,
+                    [action.threadId]: {
+                        ...threadState,
+                        thread: {
+                            ...threadState.thread,
+                            title: action.title,
+                        },
+                    },
+                },
+            };
+        }
         case "EVENT":
             // Fall through to event handling below
             break;
     }
     // Handle EVENT action
     const { event, threadId } = action;
+    const effectiveThreadId = event.type === EventType.RUN_STARTED ? event.threadId : threadId;
     // Get the current thread state, auto-initializing if needed
     // Auto-initialization handles the case where events arrive before explicit thread init
     // (e.g., when creating a new thread and RUN_STARTED is the first event)
-    let threadState = state.threadMap[threadId];
+    let threadState = state.threadMap[effectiveThreadId];
     let updatedState = state;
     if (!threadState) {
         // Auto-initialize the thread to avoid dropping events
-        threadState = createInitialThreadState(threadId);
+        threadState = createInitialThreadState(effectiveThreadId);
         updatedState = {
             ...state,
             threadMap: {
                 ...state.threadMap,
-                [threadId]: threadState,
+                [effectiveThreadId]: threadState,
             },
         };
     }
+    // Handle placeholder thread migration for RUN_STARTED events
+    // When a new thread is created, messages may have been added to the placeholder thread
+    // for immediate UI feedback. Now that we have the real threadId, migrate those messages.
+    if (event.type === EventType.RUN_STARTED &&
+        effectiveThreadId !== PLACEHOLDER_THREAD_ID) {
+        const placeholderState = updatedState.threadMap[PLACEHOLDER_THREAD_ID];
+        if (placeholderState?.thread.messages.length) {
+            // Prepend placeholder thread messages to the real thread
+            threadState = {
+                ...threadState,
+                thread: {
+                    ...threadState.thread,
+                    messages: [
+                        ...placeholderState.thread.messages,
+                        ...threadState.thread.messages,
+                    ],
+                },
+            };
+            // Reset placeholder thread to empty state
+            const resetPlaceholder = createInitialThreadState(PLACEHOLDER_THREAD_ID);
+            updatedState = {
+                ...updatedState,
+                threadMap: {
+                    ...updatedState.threadMap,
+                    [PLACEHOLDER_THREAD_ID]: resetPlaceholder,
+                    [effectiveThreadId]: threadState,
+                },
+                // Only switch selection if the user is currently on the placeholder thread
+                currentThreadId: isPlaceholderThreadId(updatedState.currentThreadId)
+                    ? effectiveThreadId
+                    : updatedState.currentThreadId,
+            };
+        }
+    }
     // Process the event for this specific thread
     let updatedThreadState;
     // Switch on event.type - AGUIEvent is a discriminated union so TypeScript
@@ -253,11 +328,17 @@ export function streamReducer(state, action) {
         case EventType.CUSTOM:
             updatedThreadState = handleCustomEvent(threadState, event);
             break;
-        // Unsupported AG-UI event types - may be added in future phases
-        case EventType.TEXT_MESSAGE_CHUNK:
         case EventType.THINKING_TEXT_MESSAGE_START:
+            updatedThreadState = handleThinkingTextMessageStart(threadState, event);
+            break;
         case EventType.THINKING_TEXT_MESSAGE_CONTENT:
+            updatedThreadState = handleThinkingTextMessageContent(threadState, event);
+            break;
         case EventType.THINKING_TEXT_MESSAGE_END:
+            updatedThreadState = handleThinkingTextMessageEnd(threadState, event);
+            break;
+        // Unsupported AG-UI event types - may be added in future phases
+        case EventType.TEXT_MESSAGE_CHUNK:
         case EventType.TOOL_CALL_CHUNK:
         case EventType.THINKING_START:
         case EventType.THINKING_END:
@@ -285,7 +366,7 @@ export function streamReducer(state, action) {
         ...updatedState,
         threadMap: {
             ...updatedState.threadMap,
-            [threadId]: updatedThreadState,
+            [effectiveThreadId]: updatedThreadState,
         },
     };
 }
@@ -302,6 +383,8 @@ function handleRunStarted(threadState, event) {
             ...threadState.thread,
             status: "streaming",
             updatedAt: new Date().toISOString(),
+            // Reset lastRunCancelled when a new run starts
+            lastRunCancelled: false,
         },
         streaming: {
             status: "streaming",
@@ -332,39 +415,78 @@ function handleRunFinished(threadState, _event) {
 }
 /**
  * Handle RUN_ERROR event.
+ * Sets lastRunCancelled if the error code is "CANCELLED".
  * @param threadState - Current thread state
  * @param event - Run error event
  * @returns Updated thread state
  */
 function handleRunError(threadState, event) {
+    const isCancelled = event.code === "CANCELLED";
     return {
         ...threadState,
         thread: {
             ...threadState.thread,
-            status: "error",
+            // Use "idle" status for cancelled runs (not a real error from user perspective)
+            status: isCancelled ? "idle" : "error",
             updatedAt: new Date().toISOString(),
+            lastRunCancelled: isCancelled,
         },
         streaming: {
             ...threadState.streaming,
-            status: "error",
-            error: {
-                message: event.message,
-                code: event.code,
-            },
+            // Use "idle" status for cancelled runs so UI shows as not streaming
+            status: isCancelled ? "idle" : "error",
+            error: isCancelled
+                ? undefined
+                : {
+                    message: event.message,
+                    code: event.code,
+                },
         },
     };
 }
 /**
  * Handle TEXT_MESSAGE_START event.
- * Creates a new message in the thread.
+ * Creates a new message or reuses an ephemeral reasoning message.
  * @param threadState - Current thread state
  * @param event - Text message start event
  * @returns Updated thread state
  */
 function handleTextMessageStart(threadState, event) {
+    const isAssistant = event.role !== "user";
+    const messages = threadState.thread.messages;
+    // For assistant messages, check if there's an ephemeral message with reasoning
+    // that we should merge into instead of creating a new message.
+    if (isAssistant) {
+        const ephemeralIndex = messages.findIndex((m) => m.role === "assistant" &&
+            m.id.startsWith("ephemeral_") &&
+            m.reasoning &&
+            m.reasoning.length > 0);
+        if (ephemeralIndex !== -1) {
+            // Update the ephemeral message with the real ID
+            const ephemeralMessage = messages[ephemeralIndex];
+            const updatedMessages = [...messages];
+            updatedMessages[ephemeralIndex] = {
+                ...ephemeralMessage,
+                id: event.messageId,
+            };
+            return {
+                ...threadState,
+                thread: {
+                    ...threadState.thread,
+                    messages: updatedMessages,
+                    updatedAt: new Date().toISOString(),
+                },
+                streaming: {
+                    ...threadState.streaming,
+                    messageId: event.messageId,
+                },
+            };
+        }
+    }
+    // No ephemeral message to reuse - create a new message
     const newMessage = {
         id: event.messageId,
-        role: event.role === "user" ? "user" : "assistant",
+        role: isAssistant ? "assistant" : "user",
         content: [],
         createdAt: new Date().toISOString(),
     };
@@ -372,7 +494,7 @@ function handleTextMessageStart(threadState, event) {
         ...threadState,
         thread: {
             ...threadState.thread,
-            messages: [...threadState.thread.messages, newMessage],
+            messages: [...messages, newMessage],
             updatedAt: new Date().toISOString(),
         },
         streaming: {
@@ -445,6 +567,7 @@ function handleTextMessageEnd(threadState, event) {
 /**
  * Handle TOOL_CALL_START event.
  * Adds a tool use content block to the current message.
+ * If no message exists, creates a synthetic assistant message to hold the tool call.
  * @param threadState - Current thread state
  * @param event - Tool call start event
  * @returns Updated thread state
@@ -456,18 +579,35 @@ function handleToolCallStart(threadState, event) {
     const messageIndex = messageId
         ? messages.findIndex((m) => m.id === messageId)
         : messages.length - 1;
-    if (messageIndex === -1) {
-        throw new Error(messageId
-            ? `Message ${messageId} not found for TOOL_CALL_START event`
-            : `No messages exist for TOOL_CALL_START event`);
-    }
-    const message = messages[messageIndex];
     const newContent = {
         type: "tool_use",
         id: event.toolCallId,
         name: event.toolCallName,
         input: {},
     };
+    // If no message found, create a synthetic assistant message for the tool call
+    if (messageIndex === -1) {
+        const syntheticMessageId = messageId ?? `msg_tool_${event.toolCallId}`;
+        const syntheticMessage = {
+            id: syntheticMessageId,
+            role: "assistant",
+            content: [newContent],
+            createdAt: new Date().toISOString(),
+        };
+        return {
+            ...threadState,
+            thread: {
+                ...threadState.thread,
+                messages: [...messages, syntheticMessage],
+                updatedAt: new Date().toISOString(),
+            },
+            streaming: {
+                ...threadState.streaming,
+                messageId: syntheticMessageId,
+            },
+        };
+    }
+    const message = messages[messageIndex];
     const updatedMessage = {
         ...message,
         content: [...message.content, newContent],
@@ -476,8 +616,9 @@ function handleToolCallStart(threadState, event) {
 }
 /**
  * Handle TOOL_CALL_ARGS event.
- * Accumulates JSON string deltas for tool call arguments.
- * The accumulated string will be parsed at TOOL_CALL_END.
+ * Accumulates JSON string deltas for tool call arguments and optimistically
+ * parses the partial JSON to update the tool_use content block in real-time.
+ * The final authoritative parse still happens at TOOL_CALL_END.
  * @param threadState - Current thread state
  * @param event - Tool call args event
  * @returns Updated thread state
@@ -487,10 +628,46 @@ function handleToolCallArgs(threadState, event) {
     // Accumulate the JSON string delta
     const accumulatedArgs = threadState.accumulatingToolArgs;
     const existingArgs = accumulatedArgs.get(toolCallId) ?? "";
+    const newAccumulatedJson = existingArgs + event.delta;
     const newAccumulatedArgs = new Map(accumulatedArgs);
-    newAccumulatedArgs.set(toolCallId, existingArgs + event.delta);
+    newAccumulatedArgs.set(toolCallId, newAccumulatedJson);
+    // Optimistically parse partial JSON to update the tool_use content block
+    let parsedInput;
+    try {
+        const parsed = parsePartialJson(newAccumulatedJson);
+        if (typeof parsed === "object" &&
+            parsed !== null &&
+            !Array.isArray(parsed)) {
+            parsedInput = parsed;
+        }
+    }
+    catch {
+        // Partial JSON not parseable yet — leave input unchanged
+    }
+    if (!parsedInput) {
+        return {
+            ...threadState,
+            accumulatingToolArgs: newAccumulatedArgs,
+        };
+    }
+    // Update the tool_use content block with partially parsed input
+    const messages = threadState.thread.messages;
+    const { messageIndex, contentIndex } = findContentById(messages, "tool_use", toolCallId, "TOOL_CALL_ARGS event");
+    const message = messages[messageIndex];
+    const toolUseContent = message.content[contentIndex];
+    if (toolUseContent.type !== "tool_use") {
+        throw new Error(`Content at index ${contentIndex} is not a tool_use block for TOOL_CALL_ARGS event`);
+    }
+    const updatedContent = {
+        ...toolUseContent,
+        input: parsedInput,
+    };
+    const updatedMessage = {
+        ...message,
+        content: updateContentAtIndex(message.content, contentIndex, updatedContent),
+    };
     return {
-        ...threadState,
+        ...updateThreadMessages(threadState, updateMessageAtIndex(messages, messageIndex, updatedMessage)),
         accumulatingToolArgs: newAccumulatedArgs,
     };
 }
@@ -510,7 +687,7 @@ function handleToolCallEnd(threadState, event) {
         // No args accumulated - tool call has empty input
         return threadState;
     }
-    // Parse the accumulated JSON
+    // Parse the accumulated JSON - tool inputs are always objects
     let parsedInput;
     try {
         parsedInput = JSON.parse(accumulatedJson);
@@ -544,7 +721,7 @@ function handleToolCallEnd(threadState, event) {
 }
 /**
  * Handle TOOL_CALL_RESULT event.
- * Adds tool result to the message.
+ * Adds tool result to the specified message.
  * @param threadState - Current thread state
  * @param event - Tool call result event
  * @returns Updated thread state
@@ -617,11 +794,23 @@ function handleCustomEvent(threadState, event) {
  */
 function handleComponentStart(threadState, event) {
     const messageId = event.value.messageId;
-    const messages = threadState.thread.messages;
-    // Find the message
-    const messageIndex = messages.findIndex((m) => m.id === messageId);
+    let messages = threadState.thread.messages;
+    // Find the message, or create it if it doesn't exist.
+    // The backend may emit component events before TEXT_MESSAGE_START when
+    // the LLM outputs a component tool call without preceding text.
+    let messageIndex = messages.findIndex((m) => m.id === messageId);
     if (messageIndex === -1) {
-        throw new Error(`Message ${messageId} not found for tambo.component.start event`);
+        // Create a new assistant message for this component
+        const newMessage = {
+            id: messageId,
+            role: "assistant",
+            content: [],
+            createdAt: new Date().toISOString(),
+        };
+        messages = [...messages, newMessage];
+        messageIndex = messages.length - 1;
+        // Update thread state with the new message before adding the component
+        threadState = updateThreadMessages(threadState, messages);
     }
     const message = messages[messageIndex];
     // Add component content block with 'started' streaming state
@@ -725,4 +914,223 @@ function handleRunAwaitingInput(threadState, _event) {
         },
     };
 }
+// ============================================================================
+// Reasoning Event Handlers (currently mapped from THINKING_TEXT_MESSAGE_* events)
+// ============================================================================
+/**
+ * Generate an ephemeral message ID for reasoning messages that arrive before TEXT_MESSAGE_START.
+ * Uses crypto.randomUUID() which is available in Node.js 19+ and modern browsers.
+ */
+function generateEphemeralMessageId() {
+    return `ephemeral_${crypto.randomUUID()}`;
+}
+/**
+ * Find or create an assistant message for reasoning events.
+ * Reasoning should only be attached to assistant messages.
+ * If no suitable assistant message exists, creates an ephemeral one.
+ * @param threadState - Current thread state
+ * @returns Object with messageIndex, messages array, and updated threadState
+ */
+function findOrCreateMessageForReasoning(threadState) {
+    const messageId = threadState.streaming.messageId;
+    let messages = threadState.thread.messages;
+    // If we have an active streaming messageId, try to find it
+    if (messageId) {
+        const messageIndex = messages.findIndex((m) => m.id === messageId);
+        if (messageIndex !== -1 && messages[messageIndex].role === "assistant") {
+            return { messageIndex, messages, threadState };
+        }
+    }
+    // Look for the last assistant message
+    const lastAssistantIndex = messages.findLastIndex((m) => m.role === "assistant");
+    // If there's an assistant message and it's the most recent message, use it
+    // (Don't attach reasoning to an old assistant message if user message came after)
+    if (lastAssistantIndex !== -1 && lastAssistantIndex === messages.length - 1) {
+        return { messageIndex: lastAssistantIndex, messages, threadState };
+    }
+    // No suitable assistant message - create an ephemeral one
+    const ephemeralId = generateEphemeralMessageId();
+    const newMessage = {
+        id: ephemeralId,
+        role: "assistant",
+        content: [],
+        createdAt: new Date().toISOString(),
+    };
+    messages = [...messages, newMessage];
+    const messageIndex = messages.length - 1;
+    // Update thread state with new message
+    threadState = {
+        ...threadState,
+        thread: {
+            ...threadState.thread,
+            messages,
+            updatedAt: new Date().toISOString(),
+        },
+        streaming: {
+            ...threadState.streaming,
+            messageId: ephemeralId,
+        },
+    };
+    return { messageIndex, messages, threadState };
+}
+/**
+ * Handle THINKING_TEXT_MESSAGE_START event (will become REASONING_MESSAGE_START).
+ * Starts a new reasoning chunk by appending an empty string to the message's reasoning array.
+ * Records the start time for duration calculation.
+ * @param threadState - Current thread state
+ * @param event - Thinking text message start event
+ * @returns Updated thread state
+ */
+function handleThinkingTextMessageStart(threadState, event) {
+    const { messageIndex, messages, threadState: updatedThreadState, } = findOrCreateMessageForReasoning(threadState);
+    threadState = updatedThreadState;
+    const message = messages[messageIndex];
+    const existingReasoning = message.reasoning ?? [];
+    const updatedMessage = {
+        ...message,
+        reasoning: [...existingReasoning, ""],
+    };
+    // Record reasoning start time if this is the first reasoning chunk
+    const reasoningStartTime = threadState.streaming.reasoningStartTime ?? event.timestamp ?? Date.now();
+    return {
+        ...updateThreadMessages(threadState, updateMessageAtIndex(messages, messageIndex, updatedMessage)),
+        streaming: {
+            ...threadState.streaming,
+            reasoningStartTime,
+        },
+    };
+}
+/**
+ * Handle THINKING_TEXT_MESSAGE_CONTENT event (will become REASONING_MESSAGE_CONTENT).
+ * Appends delta text to the last reasoning chunk.
+ * @param threadState - Current thread state
+ * @param event - Thinking text message content event
+ * @returns Updated thread state
+ */
+function handleThinkingTextMessageContent(threadState, event) {
+    const { messageIndex, messages, threadState: updatedThreadState, } = findOrCreateMessageForReasoning(threadState);
+    threadState = updatedThreadState;
+    const message = messages[messageIndex];
+    const existingReasoning = message.reasoning ?? [];
+    if (existingReasoning.length === 0) {
+        // No reasoning chunk started - start one implicitly
+        const updatedMessage = {
+            ...message,
+            reasoning: [event.delta],
+        };
+        return {
+            ...updateThreadMessages(threadState, updateMessageAtIndex(messages, messageIndex, updatedMessage)),
+            streaming: {
+                ...threadState.streaming,
+                reasoningStartTime: threadState.streaming.reasoningStartTime ??
+                    event.timestamp ??
+                    Date.now(),
+            },
+        };
+    }
+    // Append to the last reasoning chunk
+    const updatedReasoning = [
+        ...existingReasoning.slice(0, -1),
+        existingReasoning[existingReasoning.length - 1] + event.delta,
+    ];
+    const updatedMessage = {
+        ...message,
+        reasoning: updatedReasoning,
+    };
+    return updateThreadMessages(threadState, updateMessageAtIndex(messages, messageIndex, updatedMessage));
+}
+/**
+ * Handle THINKING_TEXT_MESSAGE_END event (will become REASONING_MESSAGE_END).
+ * Calculates and stores the reasoning duration.
+ * @param threadState - Current thread state
+ * @param event - Thinking text message end event
+ * @returns Updated thread state
+ */
+function handleThinkingTextMessageEnd(threadState, event) {
+    const { messageIndex, messages, threadState: updatedThreadState, } = findOrCreateMessageForReasoning(threadState);
+    threadState = updatedThreadState;
+    const message = messages[messageIndex];
+    // Calculate duration if we have a start time
+    const reasoningStartTime = threadState.streaming.reasoningStartTime;
+    const endTime = event.timestamp ?? Date.now();
+    const reasoningDurationMS = reasoningStartTime
+        ? endTime - reasoningStartTime
+        : undefined;
+    const updatedMessage = {
+        ...message,
+        reasoningDurationMS: reasoningDurationMS ?? message.reasoningDurationMS ?? undefined,
+    };
+    return updateThreadMessages(threadState, updateMessageAtIndex(messages, messageIndex, updatedMessage));
+}
+/**
+ * Handle LOAD_THREAD_MESSAGES action.
+ * Loads messages from API into stream state for an existing thread.
+ * Deduplicates by message ID, keeping existing messages (they may have in-flight updates).
+ * Sorts merged messages by createdAt to ensure chronological order.
+ * @param state - Current stream state
+ * @param action - Load thread messages action
+ * @returns Updated stream state
+ */
+function handleLoadThreadMessages(state, action) {
+    const { threadId, messages, skipIfStreaming } = action;
+    // Get or create thread state
+    let threadState = state.threadMap[threadId];
+    if (!threadState) {
+        threadState = createInitialThreadState(threadId);
+    }
+    // Skip if streaming and skipIfStreaming is true
+    if (skipIfStreaming && threadState.streaming.status === "streaming") {
+        return state;
+    }
+    const existingMessages = threadState.thread.messages;
+    // Build a set of existing message IDs for fast lookup
+    const existingIds = new Set(existingMessages.map((m) => m.id));
+    // Filter out messages that already exist (keep existing, add new).
+    // API-loaded messages are by definition fully complete, so stamp
+    // streamingState: "done" on all component content blocks. This is
+    // required by downstream hooks (usePropsStreamingStatus) which check
+    // streamingState === "done" to report isSuccess: true.
+    const newMessages = messages
+        .filter((m) => !existingIds.has(m.id))
+        .map((m) => ({
+        ...m,
+        content: m.content.map((block) => {
+            if (block.type !== "component")
+                return block;
+            if (block.streamingState !== undefined &&
+                block.streamingState !== "done") {
+                console.warn(`LOAD_THREAD_MESSAGES: component "${block.id}" has unexpected ` +
+                    `streamingState "${block.streamingState}". API-loaded messages ` +
+                    `should not have in-flight streaming state.`);
+            }
+            return { ...block, streamingState: "done" };
+        }),
+    }));
+    // Merge and sort by createdAt
+    const mergedMessages = [...existingMessages, ...newMessages].toSorted((a, b) => {
+        // Messages without createdAt go to the end
+        if (!a.createdAt && !b.createdAt)
+            return 0;
+        if (!a.createdAt)
+            return 1;
+        if (!b.createdAt)
+            return -1;
+        return a.createdAt.localeCompare(b.createdAt);
+    });
+    const updatedThreadState = {
+        ...threadState,
+        thread: {
+            ...threadState.thread,
+            messages: mergedMessages,
+            updatedAt: new Date().toISOString(),
+        },
+    };
+    return {
+        ...state,
+        threadMap: {
+            ...state.threadMap,
+            [threadId]: updatedThreadState,
+        },
+    };
+}
 //# sourceMappingURL=event-accumulator.js.map