@tambo-ai/react 0.46.3 → 0.46.4

package/esm/hooks/__tests__/use-component-state.test.js

@@ -0,0 +1,322 @@
+import { act, renderHook } from "@testing-library/react";
+import { useTamboClient } from "../../providers/tambo-client-provider";
+import { useTamboThread } from "../../providers/tambo-thread-provider";
+import { useTamboComponentState } from "../use-component-state";
+import { useTamboCurrentMessage } from "../use-current-message";
+// Mock the required providers
+jest.mock("../../providers/tambo-client-provider", () => ({
+    useTamboClient: jest.fn(),
+}));
+jest.mock("../../providers/tambo-thread-provider", () => ({
+    useTamboThread: jest.fn(),
+}));
+jest.mock("../use-current-message", () => ({
+    useTamboCurrentMessage: jest.fn(),
+}));
+// Create a mock debounced function with flush method
+const createMockDebouncedFunction = (fn) => {
+    const debouncedFn = jest.fn((...args) => fn(...args));
+    debouncedFn.flush = jest.fn();
+    debouncedFn.cancel = jest.fn();
+    debouncedFn.isPending = jest.fn(() => false);
+    return debouncedFn;
+};
+// Mock use-debounce
+jest.mock("use-debounce", () => ({
+    useDebouncedCallback: jest.fn(),
+}));
+// Import the mocked useDebouncedCallback
+import { useDebouncedCallback } from "use-debounce";
+describe("useTamboComponentState", () => {
+    // Helper function to create mock TamboThreadMessage
+    const createMockMessage = (overrides = {}) => ({
+        id: "test-message-id",
+        threadId: "test-thread-id",
+        componentState: {},
+        content: [{ type: "text", text: "Test message" }],
+        createdAt: new Date().toISOString(),
+        role: "assistant",
+        ...overrides,
+    });
+    const mockUpdateThreadMessage = jest.fn();
+    const mockUpdateComponentState = jest.fn();
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Setup default mock for useDebouncedCallback
+        jest
+            .mocked(useDebouncedCallback)
+            .mockImplementation((fn) => createMockDebouncedFunction(fn));
+        // Setup default mocks
+        jest.mocked(useTamboClient).mockReturnValue({
+            beta: {
+                threads: {
+                    messages: {
+                        updateComponentState: mockUpdateComponentState,
+                    },
+                },
+            },
+        });
+        jest.mocked(useTamboThread).mockReturnValue({
+            updateThreadMessage: mockUpdateThreadMessage,
+        });
+        jest.mocked(useTamboCurrentMessage).mockReturnValue(createMockMessage());
+    });
+    describe("Initial State Management", () => {
+        it("should initialize with initialValue when no componentState exists", () => {
+            const initialValue = "test-initial";
+            jest
+                .mocked(useTamboCurrentMessage)
+                .mockReturnValue(createMockMessage({ componentState: {} }));
+            const { result } = renderHook(() => useTamboComponentState("testKey", initialValue));
+            expect(result.current[0]).toBe(initialValue);
+        });
+        it("should use existing componentState value over initialValue", () => {
+            const initialValue = "initial";
+            const existingValue = "existing";
+            jest.mocked(useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                componentState: { testKey: existingValue },
+            }));
+            const { result } = renderHook(() => useTamboComponentState("testKey", initialValue));
+            expect(result.current[0]).toBe(existingValue);
+        });
+        it("should handle undefined initialValue gracefully", () => {
+            jest
+                .mocked(useTamboCurrentMessage)
+                .mockReturnValue(createMockMessage({ componentState: {} }));
+            const { result } = renderHook(() => useTamboComponentState("testKey"));
+            expect(result.current[0]).toBeUndefined();
+        });
+        it("should handle different data types correctly", () => {
+            const testCases = [
+                { value: "string" },
+                { value: 42 },
+                { value: true },
+                { value: { name: "test" } },
+                { value: [1, 2, 3] },
+            ];
+            testCases.forEach(({ value }) => {
+                jest.mocked(useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                    componentState: { testKey: value },
+                }));
+                const { result } = renderHook(() => useTamboComponentState("testKey", value));
+                expect(result.current[0]).toEqual(value);
+            });
+        });
+    });
+    describe("State Updates", () => {
+        it("should update local state immediately when setValue is called", () => {
+            const initialValue = "initial";
+            jest
+                .mocked(useTamboCurrentMessage)
+                .mockReturnValue(createMockMessage({ componentState: { testKey: initialValue } }));
+            const { result } = renderHook(() => useTamboComponentState("testKey", initialValue));
+            const newValue = "updated";
+            act(() => {
+                result.current[1](newValue);
+            });
+            expect(result.current[0]).toBe(newValue);
+        });
+        it("should trigger local thread message update when setValue is called", () => {
+            const message = createMockMessage({
+                componentState: { testKey: "initial" },
+            });
+            jest.mocked(useTamboCurrentMessage).mockReturnValue(message);
+            const { result } = renderHook(() => useTamboComponentState("testKey", "initial"));
+            const newValue = "updated";
+            act(() => {
+                result.current[1](newValue);
+            });
+            expect(mockUpdateThreadMessage).toHaveBeenCalledWith(message.id, {
+                threadId: message.threadId,
+                componentState: {
+                    testKey: newValue,
+                },
+            }, false);
+        });
+        it("should trigger debounced remote API call when setValue is called", () => {
+            const message = createMockMessage({
+                componentState: { testKey: "initial" },
+            });
+            jest.mocked(useTamboCurrentMessage).mockReturnValue(message);
+            const { result } = renderHook(() => useTamboComponentState("testKey", "initial"));
+            const newValue = "updated";
+            act(() => {
+                result.current[1](newValue);
+            });
+            // The debounced function should be called
+            expect(mockUpdateComponentState).toHaveBeenCalledWith(message.threadId, message.id, { state: { testKey: newValue } });
+        });
+        it("should work with complex objects and arrays", () => {
+            const initialValue = { name: "test", items: [1, 2, 3] };
+            jest
+                .mocked(useTamboCurrentMessage)
+                .mockReturnValue(createMockMessage({ componentState: { testKey: initialValue } }));
+            const { result } = renderHook(() => useTamboComponentState("testKey", initialValue));
+            const newValue = { name: "updated", items: [4, 5, 6] };
+            act(() => {
+                result.current[1](newValue);
+            });
+            expect(result.current[0]).toEqual(newValue);
+            expect(mockUpdateThreadMessage).toHaveBeenCalledWith(expect.any(String), expect.objectContaining({
+                componentState: {
+                    testKey: newValue,
+                },
+            }), false);
+        });
+    });
+    describe("Debouncing Behavior", () => {
+        it("should use default debounce time of 500ms", () => {
+            renderHook(() => useTamboComponentState("testKey", "initial"));
+            expect(useDebouncedCallback).toHaveBeenCalledWith(expect.any(Function), 500);
+        });
+        it("should use custom debounce time when provided", () => {
+            const customDebounceTime = 1000;
+            renderHook(() => useTamboComponentState("testKey", "initial", undefined, customDebounceTime));
+            expect(useDebouncedCallback).toHaveBeenCalledWith(expect.any(Function), customDebounceTime);
+        });
+        it("should flush debounced callback on unmount", () => {
+            const mockFlush = jest.fn();
+            const mockDebouncedFn = createMockDebouncedFunction(jest.fn());
+            mockDebouncedFn.flush = mockFlush;
+            // Mock the debounced callback to return our specific mock
+            jest.mocked(useDebouncedCallback).mockReturnValue(mockDebouncedFn);
+            const { unmount } = renderHook(() => useTamboComponentState("testKey", "initial"));
+            unmount();
+            expect(mockFlush).toHaveBeenCalled();
+        });
+    });
+    describe("Multi-Hook Scenarios", () => {
+        it("should handle multiple hooks with different keyNames independently", () => {
+            const message = createMockMessage({
+                componentState: {
+                    key1: "value1",
+                    key2: "value2",
+                },
+            });
+            jest.mocked(useTamboCurrentMessage).mockReturnValue(message);
+            const { result: result1 } = renderHook(() => useTamboComponentState("key1", "default1"));
+            const { result: result2 } = renderHook(() => useTamboComponentState("key2", "default2"));
+            expect(result1.current[0]).toBe("value1");
+            expect(result2.current[0]).toBe("value2");
+            // Update first hook
+            act(() => {
+                result1.current[1]("updated1");
+            });
+            expect(result1.current[0]).toBe("updated1");
+            expect(result2.current[0]).toBe("value2"); // Should remain unchanged
+        });
+        it("should preserve existing componentState when updating another key", () => {
+            const message = createMockMessage({
+                componentState: {
+                    existingKey: "existing",
+                    testKey: "initial",
+                },
+            });
+            jest.mocked(useTamboCurrentMessage).mockReturnValue(message);
+            const { result } = renderHook(() => useTamboComponentState("testKey", "initial"));
+            act(() => {
+                result.current[1]("updated");
+            });
+            expect(mockUpdateThreadMessage).toHaveBeenCalledWith(message.id, {
+                threadId: message.threadId,
+                componentState: {
+                    existingKey: "existing", // Should preserve existing keys
+                    testKey: "updated",
+                },
+            }, false);
+        });
+    });
+    describe("SetFromProp Feature", () => {
+        it("should set value from prop when hasSetFromMessage is false", () => {
+            jest
+                .mocked(useTamboCurrentMessage)
+                .mockReturnValue(createMockMessage({ componentState: {} }));
+            const propValue = "from-prop";
+            const { result } = renderHook(() => useTamboComponentState("testKey", "initial", propValue));
+            // Initially, hasSetFromMessage should be false, so prop value should be used
+            expect(result.current[0]).toBe(propValue);
+        });
+        it("should ignore setFromProp when initialized from message state", async () => {
+            const existingValue = "existing";
+            jest.mocked(useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                componentState: { testKey: existingValue },
+            }));
+            const propValue = "from-prop";
+            const { result } = renderHook(() => useTamboComponentState("testKey", "initial", propValue));
+            // Should use existing value from message, not prop value
+            await act(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+            expect(result.current[0]).toBe(existingValue);
+        });
+        it("should update state from setFromProp changes when no message state exists", () => {
+            jest
+                .mocked(useTamboCurrentMessage)
+                .mockReturnValue(createMockMessage({ componentState: {} }));
+            const { result, rerender } = renderHook(({ propValue }) => useTamboComponentState("testKey", "initial", propValue), { initialProps: { propValue: "prop1" } });
+            expect(result.current[0]).toBe("prop1");
+            // Change prop value
+            rerender({ propValue: "prop2" });
+            // Since hasSetFromMessage is still false (no message state),
+            // it should update to new prop value
+            expect(result.current[0]).toBe("prop2");
+        });
+        it("should handle undefined setFromProp gracefully", () => {
+            jest
+                .mocked(useTamboCurrentMessage)
+                .mockReturnValue(createMockMessage({ componentState: {} }));
+            const { result } = renderHook(() => useTamboComponentState("testKey", "initial", undefined));
+            expect(result.current[0]).toBe("initial");
+        });
+    });
+    describe("Message State Sync", () => {
+        it("should sync with message.componentState changes", () => {
+            const { result, rerender } = renderHook(({ message }) => {
+                jest.mocked(useTamboCurrentMessage).mockReturnValue(message);
+                return useTamboComponentState("testKey", "initial");
+            }, {
+                initialProps: {
+                    message: createMockMessage({
+                        componentState: { testKey: "value1" },
+                    }),
+                },
+            });
+            // Change the message
+            const newMessage = createMockMessage({
+                componentState: { testKey: "value2" },
+            });
+            rerender({ message: newMessage });
+            // The hook should sync with the new message state
+            expect(result.current[0]).toBe("value2");
+            expect(mockUpdateThreadMessage).not.toHaveBeenCalled();
+        });
+        it("should handle message without componentState gracefully", () => {
+            jest
+                .mocked(useTamboCurrentMessage)
+                .mockReturnValue(createMockMessage({ componentState: undefined }));
+            const { result } = renderHook(() => useTamboComponentState("testKey", "initial"));
+            expect(result.current[0]).toBe("initial");
+        });
+        it("should preserve state when message updates but componentState[keyName] unchanged", () => {
+            const message1 = createMockMessage({
+                id: "message1",
+                componentState: { testKey: "unchanged" },
+            });
+            const message2 = createMockMessage({
+                id: "message2",
+                componentState: { testKey: "unchanged" },
+            });
+            const { result, rerender } = renderHook(({ message }) => {
+                jest.mocked(useTamboCurrentMessage).mockReturnValue(message);
+                return useTamboComponentState("testKey", "initial");
+            }, { initialProps: { message: message1 } });
+            // Clear previous calls
+            mockUpdateThreadMessage.mockClear();
+            // Change message but keep same componentState value
+            rerender({ message: message2 });
+            // Should preserve the "unchanged" value
+            expect(result.current[0]).toBe("unchanged");
+        });
+    });
+});
+//# sourceMappingURL=use-component-state.test.js.map

package/esm/hooks/__tests__/use-component-state.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-component-state.test.js","sourceRoot":"","sources":["../../../src/hooks/__tests__/use-component-state.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { act, renderHook } from \"@testing-library/react\";\nimport { TamboThreadMessage } from \"../../model/generate-component-response\";\nimport { useTamboClient } from \"../../providers/tambo-client-provider\";\nimport { useTamboThread } from \"../../providers/tambo-thread-provider\";\nimport { PartialTamboAI } from \"../../testing/types\";\nimport { useTamboComponentState } from \"../use-component-state\";\nimport { useTamboCurrentMessage } from \"../use-current-message\";\n\n// Mock the required providers\njest.mock(\"../../providers/tambo-client-provider\", () => ({\n  useTamboClient: jest.fn(),\n}));\n\njest.mock(\"../../providers/tambo-thread-provider\", () => ({\n  useTamboThread: jest.fn(),\n}));\n\njest.mock(\"../use-current-message\", () => ({\n  useTamboCurrentMessage: jest.fn(),\n}));\n\n// Create a mock debounced function with flush method\nconst createMockDebouncedFunction = (fn: any) => {\n  const debouncedFn = jest.fn((...args: any[]) => fn(...args)) as jest.Mock & {\n    flush: jest.Mock;\n    cancel: jest.Mock;\n    isPending: () => boolean;\n  };\n  debouncedFn.flush = jest.fn();\n  debouncedFn.cancel = jest.fn();\n  debouncedFn.isPending = jest.fn(() => false);\n  return debouncedFn;\n};\n\n// Mock use-debounce\njest.mock(\"use-debounce\", () => ({\n  useDebouncedCallback: jest.fn(),\n}));\n\n// Import the mocked useDebouncedCallback\nimport { useDebouncedCallback } from \"use-debounce\";\n\ndescribe(\"useTamboComponentState\", () => {\n  // Helper function to create mock TamboThreadMessage\n  const createMockMessage = (\n    overrides: Partial<TamboThreadMessage> = {},\n  ): TamboThreadMessage => ({\n    id: \"test-message-id\",\n    threadId: \"test-thread-id\",\n    componentState: {},\n    content: [{ type: \"text\", text: \"Test message\" }],\n    createdAt: new Date().toISOString(),\n    role: \"assistant\",\n    ...overrides,\n  });\n\n  const mockUpdateThreadMessage = jest.fn();\n  const mockUpdateComponentState = jest.fn();\n\n  beforeEach(() => {\n    jest.clearAllMocks();\n\n    // Setup default mock for useDebouncedCallback\n    jest\n      .mocked(useDebouncedCallback)\n      .mockImplementation((fn) => createMockDebouncedFunction(fn));\n\n    // Setup default mocks\n    jest.mocked(useTamboClient).mockReturnValue({\n      beta: {\n        threads: {\n          messages: {\n            updateComponentState: mockUpdateComponentState,\n          },\n        },\n      },\n    } satisfies PartialTamboAI as any);\n\n    jest.mocked(useTamboThread).mockReturnValue({\n      updateThreadMessage: mockUpdateThreadMessage,\n    } as any);\n\n    jest.mocked(useTamboCurrentMessage).mockReturnValue(createMockMessage());\n  });\n\n  describe(\"Initial State Management\", () => {\n    it(\"should initialize with initialValue when no componentState exists\", () => {\n      const initialValue = \"test-initial\";\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", initialValue),\n      );\n\n      expect(result.current[0]).toBe(initialValue);\n    });\n\n    it(\"should use existing componentState value over initialValue\", () => {\n      const initialValue = \"initial\";\n      const existingValue = \"existing\";\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(\n        createMockMessage({\n          componentState: { testKey: existingValue },\n        }),\n      );\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", initialValue),\n      );\n\n      expect(result.current[0]).toBe(existingValue);\n    });\n\n    it(\"should handle undefined initialValue gracefully\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const { result } = renderHook(() => useTamboComponentState(\"testKey\"));\n\n      expect(result.current[0]).toBeUndefined();\n    });\n\n    it(\"should handle different data types correctly\", () => {\n      const testCases = [\n        { value: \"string\" },\n        { value: 42 },\n        { value: true },\n        { value: { name: \"test\" } },\n        { value: [1, 2, 3] },\n      ];\n\n      testCases.forEach(({ value }) => {\n        jest.mocked(useTamboCurrentMessage).mockReturnValue(\n          createMockMessage({\n            componentState: { testKey: value },\n          }),\n        );\n\n        const { result } = renderHook(() =>\n          useTamboComponentState(\"testKey\", value),\n        );\n\n        expect(result.current[0]).toEqual(value);\n      });\n    });\n  });\n\n  describe(\"State Updates\", () => {\n    it(\"should update local state immediately when setValue is called\", () => {\n      const initialValue = \"initial\";\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(\n          createMockMessage({ componentState: { testKey: initialValue } }),\n        );\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", initialValue),\n      );\n\n      const newValue = \"updated\";\n      act(() => {\n        result.current[1](newValue);\n      });\n\n      expect(result.current[0]).toBe(newValue);\n    });\n\n    it(\"should trigger local thread message update when setValue is called\", () => {\n      const message = createMockMessage({\n        componentState: { testKey: \"initial\" },\n      });\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      const newValue = \"updated\";\n      act(() => {\n        result.current[1](newValue);\n      });\n\n      expect(mockUpdateThreadMessage).toHaveBeenCalledWith(\n        message.id,\n        {\n          threadId: message.threadId,\n          componentState: {\n            testKey: newValue,\n          },\n        },\n        false,\n      );\n    });\n\n    it(\"should trigger debounced remote API call when setValue is called\", () => {\n      const message = createMockMessage({\n        componentState: { testKey: \"initial\" },\n      });\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      const newValue = \"updated\";\n      act(() => {\n        result.current[1](newValue);\n      });\n\n      // The debounced function should be called\n      expect(mockUpdateComponentState).toHaveBeenCalledWith(\n        message.threadId,\n        message.id,\n        { state: { testKey: newValue } },\n      );\n    });\n\n    it(\"should work with complex objects and arrays\", () => {\n      const initialValue = { name: \"test\", items: [1, 2, 3] };\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(\n          createMockMessage({ componentState: { testKey: initialValue } }),\n        );\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", initialValue),\n      );\n\n      const newValue = { name: \"updated\", items: [4, 5, 6] };\n      act(() => {\n        result.current[1](newValue);\n      });\n\n      expect(result.current[0]).toEqual(newValue);\n      expect(mockUpdateThreadMessage).toHaveBeenCalledWith(\n        expect.any(String),\n        expect.objectContaining({\n          componentState: {\n            testKey: newValue,\n          },\n        }),\n        false,\n      );\n    });\n  });\n\n  describe(\"Debouncing Behavior\", () => {\n    it(\"should use default debounce time of 500ms\", () => {\n      renderHook(() => useTamboComponentState(\"testKey\", \"initial\"));\n\n      expect(useDebouncedCallback).toHaveBeenCalledWith(\n        expect.any(Function),\n        500,\n      );\n    });\n\n    it(\"should use custom debounce time when provided\", () => {\n      const customDebounceTime = 1000;\n\n      renderHook(() =>\n        useTamboComponentState(\n          \"testKey\",\n          \"initial\",\n          undefined,\n          customDebounceTime,\n        ),\n      );\n\n      expect(useDebouncedCallback).toHaveBeenCalledWith(\n        expect.any(Function),\n        customDebounceTime,\n      );\n    });\n\n    it(\"should flush debounced callback on unmount\", () => {\n      const mockFlush = jest.fn();\n      const mockDebouncedFn = createMockDebouncedFunction(jest.fn());\n      mockDebouncedFn.flush = mockFlush;\n\n      // Mock the debounced callback to return our specific mock\n      jest.mocked(useDebouncedCallback).mockReturnValue(mockDebouncedFn);\n\n      const { unmount } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      unmount();\n\n      expect(mockFlush).toHaveBeenCalled();\n    });\n  });\n\n  describe(\"Multi-Hook Scenarios\", () => {\n    it(\"should handle multiple hooks with different keyNames independently\", () => {\n      const message = createMockMessage({\n        componentState: {\n          key1: \"value1\",\n          key2: \"value2\",\n        },\n      });\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n\n      const { result: result1 } = renderHook(() =>\n        useTamboComponentState(\"key1\", \"default1\"),\n      );\n      const { result: result2 } = renderHook(() =>\n        useTamboComponentState(\"key2\", \"default2\"),\n      );\n\n      expect(result1.current[0]).toBe(\"value1\");\n      expect(result2.current[0]).toBe(\"value2\");\n\n      // Update first hook\n      act(() => {\n        result1.current[1](\"updated1\");\n      });\n\n      expect(result1.current[0]).toBe(\"updated1\");\n      expect(result2.current[0]).toBe(\"value2\"); // Should remain unchanged\n    });\n\n    it(\"should preserve existing componentState when updating another key\", () => {\n      const message = createMockMessage({\n        componentState: {\n          existingKey: \"existing\",\n          testKey: \"initial\",\n        },\n      });\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      act(() => {\n        result.current[1](\"updated\");\n      });\n\n      expect(mockUpdateThreadMessage).toHaveBeenCalledWith(\n        message.id,\n        {\n          threadId: message.threadId,\n          componentState: {\n            existingKey: \"existing\", // Should preserve existing keys\n            testKey: \"updated\",\n          },\n        },\n        false,\n      );\n    });\n  });\n\n  describe(\"SetFromProp Feature\", () => {\n    it(\"should set value from prop when hasSetFromMessage is false\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const propValue = \"from-prop\";\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\", propValue),\n      );\n\n      // Initially, hasSetFromMessage should be false, so prop value should be used\n      expect(result.current[0]).toBe(propValue);\n    });\n\n    it(\"should ignore setFromProp when initialized from message state\", async () => {\n      const existingValue = \"existing\";\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(\n        createMockMessage({\n          componentState: { testKey: existingValue },\n        }),\n      );\n\n      const propValue = \"from-prop\";\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\", propValue),\n      );\n\n      // Should use existing value from message, not prop value\n      await act(async () => {\n        await new Promise((resolve) => setTimeout(resolve, 0));\n      });\n\n      expect(result.current[0]).toBe(existingValue);\n    });\n\n    it(\"should update state from setFromProp changes when no message state exists\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const { result, rerender } = renderHook(\n        ({ propValue }) =>\n          useTamboComponentState(\"testKey\", \"initial\", propValue),\n        { initialProps: { propValue: \"prop1\" } },\n      );\n\n      expect(result.current[0]).toBe(\"prop1\");\n\n      // Change prop value\n      rerender({ propValue: \"prop2\" });\n\n      // Since hasSetFromMessage is still false (no message state),\n      // it should update to new prop value\n      expect(result.current[0]).toBe(\"prop2\");\n    });\n\n    it(\"should handle undefined setFromProp gracefully\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\", undefined),\n      );\n\n      expect(result.current[0]).toBe(\"initial\");\n    });\n  });\n\n  describe(\"Message State Sync\", () => {\n    it(\"should sync with message.componentState changes\", () => {\n      const { result, rerender } = renderHook(\n        ({ message }) => {\n          jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n          return useTamboComponentState(\"testKey\", \"initial\");\n        },\n        {\n          initialProps: {\n            message: createMockMessage({\n              componentState: { testKey: \"value1\" },\n            }),\n          },\n        },\n      );\n\n      // Change the message\n      const newMessage = createMockMessage({\n        componentState: { testKey: \"value2\" },\n      });\n\n      rerender({ message: newMessage });\n\n      // The hook should sync with the new message state\n      expect(result.current[0]).toBe(\"value2\");\n      expect(mockUpdateThreadMessage).not.toHaveBeenCalled();\n    });\n\n    it(\"should handle message without componentState gracefully\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(\n          createMockMessage({ componentState: undefined as any }),\n        );\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      expect(result.current[0]).toBe(\"initial\");\n    });\n\n    it(\"should preserve state when message updates but componentState[keyName] unchanged\", () => {\n      const message1 = createMockMessage({\n        id: \"message1\",\n        componentState: { testKey: \"unchanged\" },\n      });\n      const message2 = createMockMessage({\n        id: \"message2\",\n        componentState: { testKey: \"unchanged\" },\n      });\n\n      const { result, rerender } = renderHook(\n        ({ message }) => {\n          jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n          return useTamboComponentState(\"testKey\", \"initial\");\n        },\n        { initialProps: { message: message1 } },\n      );\n\n      // Clear previous calls\n      mockUpdateThreadMessage.mockClear();\n\n      // Change message but keep same componentState value\n      rerender({ message: message2 });\n\n      // Should preserve the \"unchanged\" value\n      expect(result.current[0]).toBe(\"unchanged\");\n    });\n  });\n});\n"]}

package/esm/hooks/use-component-state.d.ts

@@ -1,24 +1,16 @@
-interface ComponentStateMeta {
-    isPending: boolean;
-}
-type StateUpdateResult<T> = [
-    currentState: T,
-    setState: (newState: T) => void,
-    meta: ComponentStateMeta
-];
+type StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];
 /**
- * A React hook that provides state management and passes user updates to Tambo.
+ * A React hook that acts like useState, but also automatically updates the thread message's componentState.
  * Benefits: Passes user changes to AI, and when threads are returned, state is preserved.
- * @param keyName - The unique key to identify this state within the message's componentState object
- * @param initialValue - Optional initial value for the state, used if no value exists in the message
- * @param debounceTime - Optional debounce time in milliseconds (default: 300ms) to limit API calls
+ * @param keyName - The unique key to identify this state value within the message's componentState object
+ * @param initialValue - Optional initial value for the state, used if no componentState value exists in the Tambo message containing this hook usage.
+ * @param setFromProp - Optional value used to set the state value, only while no componentState value exists in the Tambo message containing this hook usage. Use this to allow streaming updates from a prop to the state value.
+ * @param debounceTime - Optional debounce time in milliseconds (default: 500ms) to limit API calls.
  * @returns A tuple containing:
  *   - The current state value
  *   - A setter function to update the state (updates UI immediately, debounces server sync)
- *   - A metadata object with properties like isPending to track sync status
  * @example
- * // Basic usage
- * const [count, setCount, { isPending }] = useTamboComponentState("counter", 0);
+ * const [count, setCount] = useTamboComponentState("counter", 0);
  *
  * // Usage with object state
  * const [formState, setFormState] = useTamboComponentState("myForm", {
@@ -35,7 +27,7 @@ type StateUpdateResult<T> = [
  *   });
  * };
  */
-export declare function useTamboComponentState<S = undefined>(keyName: string, initialValue?: S, debounceTime?: number): StateUpdateResult<S | undefined>;
-export declare function useTamboComponentState<S>(keyName: string, initialValue: S, debounceTime?: number): StateUpdateResult<S>;
+export declare function useTamboComponentState<S = undefined>(keyName: string, initialValue?: S, setFromProp?: S, debounceTime?: number): StateUpdateResult<S | undefined>;
+export declare function useTamboComponentState<S>(keyName: string, initialValue: S, setFromProp?: S, debounceTime?: number): StateUpdateResult<S>;
 export {};
 //# sourceMappingURL=use-component-state.d.ts.map

package/esm/hooks/use-component-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-component-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,iBAAiB,CAAC,CAAC,IAAI;IAC1B,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI;IAC/B,IAAI,EAAE,kBAAkB;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,GAAG,SAAS,EAClD,OAAO,EAAE,MAAM,EACf,YAAY,CAAC,EAAE,CAAC,EAChB,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;AACpC,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,CAAC,EACf,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"use-component-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"AAMA,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,GAAG,SAAS,EAClD,OAAO,EAAE,MAAM,EACf,YAAY,CAAC,EAAE,CAAC,EAChB,WAAW,CAAC,EAAE,CAAC,EACf,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;AACpC,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,CAAC,EACf,WAAW,CAAC,EAAE,CAAC,EACf,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAAC,CAAC,CAAC,CAAC"}

package/esm/hooks/use-component-state.js

@@ -1,136 +1,59 @@
 "use client";
 import { useCallback, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { useTamboClient, useTamboThread } from "../providers";
+import { useTamboClient, useTamboThread } from "..";
 import { useTamboCurrentMessage } from "./use-current-message";
-export function useTamboComponentState(keyName, initialValue, debounceTime = 500) {
+export function useTamboComponentState(keyName, initialValue, setFromProp, debounceTime = 500) {
     const message = useTamboCurrentMessage();
-    const { updateThreadMessage, thread } = useTamboThread();
+    const { updateThreadMessage } = useTamboThread();
     const client = useTamboClient();
-    const messageId = message.id;
-    const threadId = thread.id;
-    // Initial value management
-    const [cachedInitialValue] = useState(() => initialValue);
-    // UI state management
-    const [localState, setLocalState] = useState(cachedInitialValue);
-    // Synchronization state
-    const [isPending, setIsPending] = useState(false);
-    // Track the last user-initiated value instead of a simple boolean flag
-    const [lastUserValue, setLastUserValue] = useState(null);
-    const [haveInitialized, setHaveInitialized] = useState(false);
-    // Determine if we need to initialize state
-    const shouldInitialize = !haveInitialized &&
-        message &&
-        cachedInitialValue !== undefined &&
-        (!message.componentState || !(keyName in message.componentState));
-    // Sync local state with message state on initial load and when message changes
-    useEffect(() => {
-        if (message?.componentState && keyName in message.componentState) {
-            const messageState = message.componentState[keyName];
-            // Only update local state if we haven't had any user changes yet
-            if (lastUserValue === null) {
-                setLocalState(messageState);
-            }
-        }
-        // Otherwise fall back to initial value if we have one and no user changes
-        else if (cachedInitialValue !== undefined &&
-            !localState &&
-            lastUserValue === null) {
-            setLocalState(cachedInitialValue);
-        }
-    }, [
-        keyName,
-        message?.componentState,
-        cachedInitialValue,
-        lastUserValue,
-        localState,
-    ]);
-    // Create debounced save function for efficient server synchronization
-    const debouncedServerWrite = useDebouncedCallback(async (newValue) => {
-        setIsPending(true);
-        try {
-            const componentStateUpdate = {
-                state: { [keyName]: newValue },
-            };
-            await client.beta.threads.messages.updateComponentState(threadId, messageId, componentStateUpdate);
-        }
-        catch (err) {
-            console.error(`Failed to save component state for key "${keyName}":`, err);
-        }
-        finally {
-            setIsPending(false);
-        }
+    const messageState = message?.componentState?.[keyName];
+    const [localState, setLocalState] = useState(messageState ?? initialValue);
+    const [initializedFromThreadMessage, setInitializedFromThreadMessage] = useState(messageState ? true : false);
+    // Optimistically update the local thread message's componentState
+    const updateLocalThreadMessage = useCallback((newState, existingMessage) => {
+        const updatedMessage = {
+            threadId: existingMessage.threadId,
+            componentState: {
+                ...existingMessage.componentState,
+                [keyName]: newState,
+            },
+        };
+        updateThreadMessage(existingMessage.id, updatedMessage, false);
+    }, [updateThreadMessage, keyName]);
+    // Debounced callback to update the remote thread message's componentState
+    const updateRemoteThreadMessage = useDebouncedCallback(async (newState, existingMessage) => {
+        const componentStateUpdate = {
+            state: { [keyName]: newState },
+        };
+        await client.beta.threads.messages.updateComponentState(existingMessage.threadId, existingMessage.id, componentStateUpdate);
     }, debounceTime);
-    // Initialize state on first render if needed
-    const initializeState = useCallback(async () => {
-        if (!message) {
-            console.warn(`Cannot initialize state for missing message ${messageId} with key "${keyName}"`);
+    const setValue = useCallback((newState) => {
+        setLocalState(newState);
+        updateLocalThreadMessage(newState, message);
+        updateRemoteThreadMessage(newState, message);
+    }, [message, updateLocalThreadMessage, updateRemoteThreadMessage]);
+    // Mirror the thread message's componentState value to the local state
+    useEffect(() => {
+        const messageState = message?.componentState?.[keyName];
+        if (!messageState) {
             return;
         }
-        try {
-            const messageUpdate = {
-                ...message,
-                componentState: {
-                    ...message.componentState,
-                    [keyName]: cachedInitialValue,
-                },
-            };
-            const componentStateUpdate = {
-                state: { [keyName]: cachedInitialValue },
-            };
-            await Promise.all([
-                updateThreadMessage(messageId, messageUpdate, false),
-                client.beta.threads.messages.updateComponentState(threadId, messageId, componentStateUpdate),
-            ]);
-        }
-        catch (err) {
-            console.warn(`Failed to initialize component state for key "${keyName}":`, err);
-        }
-    }, [
-        cachedInitialValue,
-        client.beta.threads.messages,
-        keyName,
-        message,
-        messageId,
-        threadId,
-        updateThreadMessage,
-    ]);
-    // Send initial state when component mounts
+        setInitializedFromThreadMessage(true);
+        setLocalState(message.componentState?.[keyName]);
+    }, [message?.componentState?.[keyName], message, keyName]);
+    // For editable fields that are set from a prop to allow streaming updates, don't overwrite a fetched state value set from the thread message with prop value on initial load.
     useEffect(() => {
-        if (shouldInitialize) {
-            initializeState();
-            setHaveInitialized(true);
-        }
-    }, [initializeState, shouldInitialize]);
-    // setValue function for updating state
-    // Updates local state immediately and schedules debounced server sync
-    const setValue = useCallback((newValue) => {
-        // Track this as a user-initiated update
-        setLastUserValue(newValue);
-        setLocalState(newValue);
-        // Only trigger server updates if we have a message
-        if (message) {
-            debouncedServerWrite(newValue);
-            const messageUpdate = {
-                ...message,
-                componentState: {
-                    ...message.componentState,
-                    [keyName]: newValue,
-                },
-            };
-            updateThreadMessage(messageId, messageUpdate, false);
-        }
-        else {
-            console.warn(`Cannot update server for missing message ${messageId} with key "${keyName}"`);
+        if (setFromProp !== undefined && !initializedFromThreadMessage) {
+            setLocalState(setFromProp);
         }
-    }, [message, debouncedServerWrite, keyName, updateThreadMessage, messageId]);
+    }, [setFromProp, initializedFromThreadMessage]);
     // Ensure pending changes are flushed on unmount
     useEffect(() => {
         return () => {
-            debouncedServerWrite.flush();
+            updateRemoteThreadMessage.flush();
         };
-    }, [debouncedServerWrite]);
-    // Return the local state for immediate UI rendering
-    return [localState, setValue, { isPending }];
+    }, [updateRemoteThreadMessage]);
+    return [localState, setValue];
 }
 //# sourceMappingURL=use-component-state.js.map