@tambo-ai/react 0.73.0 → 0.74.0

package/esm/v1/hooks/use-tambo-v1.test.js

@@ -1,16 +1,28 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook, act } from "@testing-library/react";
-import React from "react";
-import { useTamboClient } from "../../providers/tambo-client-provider";
-import { TamboRegistryContext, } from "../../providers/tambo-registry-provider";
-import { TamboV1StreamProvider } from "../providers/tambo-v1-stream-context";
-import { useTamboV1 } from "./use-tambo-v1";
+import React, { useReducer } from "react";
+import { useTamboClient } from "../../providers/tambo-client-provider.js";
+import { TamboRegistryContext, } from "../../providers/tambo-registry-provider.js";
+import { TamboV1StreamProvider } from "../providers/tambo-v1-stream-context.js";
+import { streamReducer, } from "../utils/event-accumulator.js";
+import { useTamboV1 } from "./use-tambo-v1.js";
 jest.mock("../../providers/tambo-client-provider", () => ({
     useTamboClient: jest.fn(),
+    useTamboQueryClient: jest.fn(),
 }));
+import { useTamboQueryClient } from "../../providers/tambo-client-provider.js";
 describe("useTamboV1", () => {
+    let queryClient;
     const mockTamboClient = {
         apiKey: "",
-        threads: {},
+        threads: {
+            messages: {
+                list: jest.fn().mockResolvedValue({ messages: [], hasMore: false }),
+            },
+            runs: {
+                delete: jest.fn().mockResolvedValue({}),
+            },
+        },
     };
     const mockRegistry = {
         componentList: {},
@@ -30,11 +42,35 @@ describe("useTamboV1", () => {
         registerResourceSource: jest.fn(),
     };
     function TestWrapper({ children }) {
-        return (React.createElement(TamboRegistryContext.Provider, { value: mockRegistry },
-            React.createElement(TamboV1StreamProvider, null, children)));
+        return (React.createElement(QueryClientProvider, { client: queryClient },
+            React.createElement(TamboRegistryContext.Provider, { value: mockRegistry },
+                React.createElement(TamboV1StreamProvider, null, children))));
+    }
+    function createWrapperWithState(state, registry = mockRegistry) {
+        const noopDispatch = () => { };
+        return function WrapperWithState({ children, }) {
+            return (React.createElement(QueryClientProvider, { client: queryClient },
+                React.createElement(TamboRegistryContext.Provider, { value: registry },
+                    React.createElement(TamboV1StreamProvider, { state: state, dispatch: noopDispatch }, children))));
+        };
+    }
+    // Wrapper that uses the real reducer so state updates properly
+    function createWrapperWithRealReducer(initialState) {
+        return function WrapperWithRealReducer({ children, }) {
+            const [state, dispatch] = useReducer(streamReducer, initialState);
+            return (React.createElement(QueryClientProvider, { client: queryClient },
+                React.createElement(TamboRegistryContext.Provider, { value: mockRegistry },
+                    React.createElement(TamboV1StreamProvider, { state: state, dispatch: dispatch }, children))));
+        };
     }
     beforeEach(() => {
+        queryClient = new QueryClient({
+            defaultOptions: {
+                queries: { retry: false },
+            },
+        });
         jest.mocked(useTamboClient).mockReturnValue(mockTamboClient);
+        jest.mocked(useTamboQueryClient).mockReturnValue(queryClient);
         jest.clearAllMocks();
     });
     it("returns client from useTamboClient", () => {
@@ -53,20 +89,23 @@ describe("useTamboV1", () => {
         expect(result.current.componentList).toBe(mockRegistry.componentList);
         expect(result.current.toolRegistry).toBe(mockRegistry.toolRegistry);
     });
-    it("returns undefined thread when no threadId provided", () => {
+    it("returns placeholder thread when no threadId provided", () => {
         const { result } = renderHook(() => useTamboV1(), {
             wrapper: TestWrapper,
         });
-        expect(result.current.thread).toBeUndefined();
+        // Default state has placeholder thread for optimistic UI
+        expect(result.current.thread).toBeDefined();
+        expect(result.current.thread?.thread.id).toBe("placeholder");
         expect(result.current.messages).toEqual([]);
     });
-    it("returns thread state when threadId provided", () => {
-        const { result } = renderHook(() => useTamboV1("thread_123"), {
+    it("returns thread state when switched to a thread", () => {
+        const { result } = renderHook(() => useTamboV1(), {
             wrapper: TestWrapper,
         });
-        // Initialize thread first
+        // Initialize and switch to thread
         act(() => {
             result.current.initThread("thread_123");
+            result.current.switchThread("thread_123");
         });
         expect(result.current.thread).toBeDefined();
         expect(result.current.thread?.thread.id).toBe("thread_123");
@@ -82,12 +121,13 @@ describe("useTamboV1", () => {
         expect(result.current.isWaiting).toBe(false);
     });
     it("returns thread streaming state when thread loaded", () => {
-        const { result } = renderHook(() => useTamboV1("thread_123"), {
+        const { result } = renderHook(() => useTamboV1(), {
             wrapper: TestWrapper,
         });
-        // Initialize thread first
+        // Initialize and switch to thread
         act(() => {
             result.current.initThread("thread_123");
+            result.current.switchThread("thread_123");
         });
         expect(result.current.streamingState.status).toBe("idle");
         expect(result.current.isIdle).toBe(true);
@@ -112,9 +152,10 @@ describe("useTamboV1", () => {
         const { result } = renderHook(() => useTamboV1(), {
             wrapper: TestWrapper,
         });
-        // Initially no current thread
-        expect(result.current.currentThreadId).toBeNull();
-        expect(result.current.thread).toBeUndefined();
+        // Initially has placeholder thread for optimistic UI
+        expect(result.current.currentThreadId).toBe("placeholder");
+        expect(result.current.thread).toBeDefined();
+        expect(result.current.thread?.thread.id).toBe("placeholder");
         // Initialize a new thread
         act(() => {
             result.current.initThread("new_thread_1");
@@ -133,7 +174,7 @@ describe("useTamboV1", () => {
         act(() => {
             newThreadId = result.current.startNewThread();
         });
-        expect(newThreadId).toMatch(/^temp_/);
+        expect(newThreadId).toBe("placeholder");
         expect(result.current.currentThreadId).toBe(newThreadId);
         expect(result.current.thread).toBeDefined();
     });
@@ -150,5 +191,807 @@ describe("useTamboV1", () => {
         expect(result.current.currentThreadId).toBe("thread_123");
         expect(result.current.thread?.thread.id).toBe("thread_123");
     });
+    describe("component content transformation", () => {
+        const createComponentContent = (id, name, props) => ({
+            type: "component",
+            id,
+            name,
+            props,
+            streamingState: "done",
+        });
+        it("adds renderedComponent to component content blocks", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        createComponentContent("comp_1", "TestComponent", {
+                                            title: "Hello",
+                                        }),
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            expect(result.current.messages).toHaveLength(1);
+            const content = result.current.messages[0].content[0];
+            expect(content.type).toBe("component");
+            expect(content.renderedComponent).toBeDefined();
+        });
+        it("preserves non-component content blocks unchanged", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        { type: "text", text: "Hello world" },
+                                        createComponentContent("comp_1", "TestComponent", {
+                                            title: "Hi",
+                                        }),
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            expect(result.current.messages).toHaveLength(1);
+            const textContent = result.current.messages[0].content[0];
+            expect(textContent.type).toBe("text");
+            expect(textContent).toEqual({ type: "text", text: "Hello world" });
+            const componentContent = result.current.messages[0].content[1];
+            expect(componentContent.type).toBe("component");
+            expect(componentContent.renderedComponent).toBeDefined();
+        });
+        it("caches rendered components and returns same reference when props unchanged", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        createComponentContent("comp_1", "TestComponent", {
+                                            title: "Hello",
+                                        }),
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result, rerender } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const firstRender = result.current.messages[0].content[0].renderedComponent;
+            // Re-render with same state
+            rerender();
+            const secondRender = result.current.messages[0].content[0].renderedComponent;
+            // Should return the same cached element reference
+            expect(secondRender).toBe(firstRender);
+        });
+        it("handles empty props on components", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        createComponentContent("comp_1", "TestComponent", {}),
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            expect(content.type).toBe("component");
+            expect(content.renderedComponent).toBeDefined();
+        });
+        it("handles undefined props on components", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "component",
+                                            id: "comp_1",
+                                            name: "TestComponent",
+                                            props: undefined,
+                                            streamingState: "done",
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            expect(content.type).toBe("component");
+            expect(content.renderedComponent).toBeDefined();
+        });
+        it("handles multiple component content blocks in same message", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        createComponentContent("comp_1", "ComponentA", {
+                                            value: 1,
+                                        }),
+                                        createComponentContent("comp_2", "ComponentB", {
+                                            value: 2,
+                                        }),
+                                        createComponentContent("comp_3", "ComponentC", {
+                                            value: 3,
+                                        }),
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            expect(result.current.messages[0].content).toHaveLength(3);
+            result.current.messages[0].content.forEach((content) => {
+                expect(content.type).toBe("component");
+                expect(content.renderedComponent).toBeDefined();
+            });
+        });
+        it("uses currentThreadId from stream state", () => {
+            const state = {
+                threadMap: {
+                    placeholder: {
+                        thread: {
+                            id: "placeholder",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        createComponentContent("comp_1", "TestComponent", {
+                                            title: "Hello",
+                                        }),
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "placeholder",
+            };
+            // No explicit threadId - uses currentThreadId from state
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            // Component should render using the placeholder thread
+            const content = result.current.messages[0].content[0];
+            expect(content.type).toBe("component");
+            expect(content.renderedComponent).toBeDefined();
+        });
+    });
+    describe("tool_use content transformation", () => {
+        it("adds computed properties to tool_use content", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_1",
+                                            name: "getWeather",
+                                            input: { location: "NYC" },
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            expect(content.type).toBe("tool_use");
+            expect(content.hasCompleted).toBe(false);
+            expect(content.statusMessage).toBe("Calling getWeather");
+            expect(content.tamboDisplayProps).toBeDefined();
+        });
+        it("sets hasCompleted to true when matching tool_result exists", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_1",
+                                            name: "getWeather",
+                                            input: { location: "NYC" },
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                                {
+                                    id: "msg_2",
+                                    role: "user",
+                                    content: [
+                                        {
+                                            type: "tool_result",
+                                            toolUseId: "tool_1",
+                                            content: [{ type: "text", text: "Sunny" }],
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            expect(content.hasCompleted).toBe(true);
+            expect(content.statusMessage).toBe("Called getWeather");
+        });
+        it("uses _tambo_statusMessage when tool is in progress", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_1",
+                                            name: "getWeather",
+                                            input: {
+                                                location: "NYC",
+                                                _tambo_statusMessage: "Fetching weather for NYC...",
+                                            },
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            expect(content.statusMessage).toBe("Fetching weather for NYC...");
+            expect(content.tamboDisplayProps?._tambo_statusMessage).toBe("Fetching weather for NYC...");
+        });
+        it("uses _tambo_completionStatusMessage when tool is completed", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_1",
+                                            name: "getWeather",
+                                            input: {
+                                                location: "NYC",
+                                                _tambo_statusMessage: "Fetching weather...",
+                                                _tambo_completionStatusMessage: "Got weather for NYC",
+                                            },
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                                {
+                                    id: "msg_2",
+                                    role: "user",
+                                    content: [
+                                        {
+                                            type: "tool_result",
+                                            toolUseId: "tool_1",
+                                            content: [{ type: "text", text: "Sunny" }],
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            expect(content.hasCompleted).toBe(true);
+            expect(content.statusMessage).toBe("Got weather for NYC");
+        });
+        it("filters _tambo_* properties from input", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_1",
+                                            name: "getWeather",
+                                            input: {
+                                                location: "NYC",
+                                                units: "celsius",
+                                                _tambo_statusMessage: "Fetching...",
+                                                _tambo_completionStatusMessage: "Done",
+                                                _tambo_displayMessage: "Weather lookup",
+                                            },
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            // Input should only have non-_tambo_ properties
+            expect(content.input).toEqual({ location: "NYC", units: "celsius" });
+            expect(content.input._tambo_statusMessage).toBeUndefined();
+            expect(content.input._tambo_completionStatusMessage).toBeUndefined();
+            expect(content.input._tambo_displayMessage).toBeUndefined();
+        });
+        it("handles tool_use with empty input", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_1",
+                                            name: "getCurrentTime",
+                                            input: {},
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            expect(content.input).toEqual({});
+            expect(content.hasCompleted).toBe(false);
+            expect(content.statusMessage).toBe("Calling getCurrentTime");
+        });
+        it("handles tool_use with undefined input", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_1",
+                                            name: "getCurrentTime",
+                                            input: undefined,
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const content = result.current.messages[0].content[0];
+            expect(content.input).toEqual({});
+            expect(content.hasCompleted).toBe(false);
+        });
+        it("handles multiple tool_use blocks with different completion states", () => {
+            const state = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [
+                                {
+                                    id: "msg_1",
+                                    role: "assistant",
+                                    content: [
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_1",
+                                            name: "getWeather",
+                                            input: { location: "NYC" },
+                                        },
+                                        {
+                                            type: "tool_use",
+                                            id: "tool_2",
+                                            name: "getTime",
+                                            input: { timezone: "EST" },
+                                        },
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                                {
+                                    id: "msg_2",
+                                    role: "user",
+                                    content: [
+                                        {
+                                            type: "tool_result",
+                                            toolUseId: "tool_1",
+                                            content: [{ type: "text", text: "Sunny" }],
+                                        },
+                                        // tool_2 has no result yet
+                                    ],
+                                    createdAt: new Date().toISOString(),
+                                },
+                            ],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithState(state),
+            });
+            const tool1 = result.current.messages[0].content[0];
+            const tool2 = result.current.messages[0].content[1];
+            expect(tool1.hasCompleted).toBe(true);
+            expect(tool1.statusMessage).toBe("Called getWeather");
+            expect(tool2.hasCompleted).toBe(false);
+            expect(tool2.statusMessage).toBe("Calling getTime");
+        });
+    });
+    describe("cancelRun", () => {
+        it("sets thread to idle and lastRunCancelled to true when cancelled", async () => {
+            const initialState = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [],
+                            status: "streaming",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "streaming", runId: "run_456" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithRealReducer(initialState),
+            });
+            // Before cancel: streaming and lastRunCancelled is false
+            expect(result.current.isStreaming).toBe(true);
+            expect(result.current.isIdle).toBe(false);
+            expect(result.current.thread?.thread.lastRunCancelled).toBe(false);
+            await act(async () => {
+                await result.current.cancelRun();
+            });
+            // After cancel: idle and lastRunCancelled is true
+            expect(result.current.isStreaming).toBe(false);
+            expect(result.current.isIdle).toBe(true);
+            expect(result.current.thread?.thread.lastRunCancelled).toBe(true);
+            // Verify API was called to cancel the run
+            expect(mockTamboClient.threads.runs.delete).toHaveBeenCalledWith("run_456", { threadId: "thread_123" });
+        });
+        it("is a no-op when there is no active run", async () => {
+            const initialState = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [],
+                            status: "idle",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "idle" }, // No runId
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithRealReducer(initialState),
+            });
+            // Idle before
+            expect(result.current.isIdle).toBe(true);
+            expect(result.current.thread?.thread.lastRunCancelled).toBe(false);
+            await act(async () => {
+                await result.current.cancelRun();
+            });
+            // Still idle, lastRunCancelled unchanged
+            expect(result.current.isIdle).toBe(true);
+            expect(result.current.thread?.thread.lastRunCancelled).toBe(false);
+            // API should not have been called
+            expect(mockTamboClient.threads.runs.delete).not.toHaveBeenCalled();
+        });
+        it("is a no-op when on a placeholder thread", async () => {
+            const initialState = {
+                threadMap: {
+                    placeholder: {
+                        thread: {
+                            id: "placeholder",
+                            messages: [],
+                            status: "streaming",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "streaming", runId: "run_123" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "placeholder",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithRealReducer(initialState),
+            });
+            // Before: streaming on placeholder
+            expect(result.current.isStreaming).toBe(true);
+            expect(result.current.thread?.thread.lastRunCancelled).toBe(false);
+            await act(async () => {
+                await result.current.cancelRun();
+            });
+            // After: state should be unchanged (placeholder threads are skipped)
+            expect(result.current.isStreaming).toBe(true);
+            expect(result.current.thread?.thread.lastRunCancelled).toBe(false);
+            // API should not have been called for placeholder threads
+            expect(mockTamboClient.threads.runs.delete).not.toHaveBeenCalled();
+        });
+        it("still updates local state even if API call fails", async () => {
+            const consoleWarnSpy = jest
+                .spyOn(console, "warn")
+                .mockImplementation(() => { });
+            // Make the API call fail
+            jest
+                .mocked(mockTamboClient.threads.runs.delete)
+                .mockRejectedValueOnce(new Error("Network error"));
+            const initialState = {
+                threadMap: {
+                    thread_123: {
+                        thread: {
+                            id: "thread_123",
+                            messages: [],
+                            status: "streaming",
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            lastRunCancelled: false,
+                        },
+                        streaming: { status: "streaming", runId: "run_456" },
+                        accumulatingToolArgs: new Map(),
+                    },
+                },
+                currentThreadId: "thread_123",
+            };
+            const { result } = renderHook(() => useTamboV1(), {
+                wrapper: createWrapperWithRealReducer(initialState),
+            });
+            await act(async () => {
+                await result.current.cancelRun();
+            });
+            // Local state should still be updated (optimistic update)
+            expect(result.current.isIdle).toBe(true);
+            expect(result.current.thread?.thread.lastRunCancelled).toBe(true);
+            // Warning should have been logged
+            expect(consoleWarnSpy).toHaveBeenCalledWith("Failed to cancel run on server:", expect.any(Error));
+            consoleWarnSpy.mockRestore();
+        });
+    });
 });
 //# sourceMappingURL=use-tambo-v1.test.js.map