@tambo-ai/react 0.75.0 → 1.0.0-rc.4

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

@@ -1,139 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTamboComponentState = useTamboComponentState;
-const fast_equals_1 = require("fast-equals");
-const react_1 = require("react");
-const use_debounce_1 = require("use-debounce");
-const __1 = require("..");
-const tambo_interactable_provider_1 = require("../providers/tambo-interactable-provider");
-const use_current_message_1 = require("./use-current-message");
-function useTamboComponentState(keyName, initialValue, setFromProp, debounceTime = 500) {
-    const message = (0, react_1.useContext)(use_current_message_1.TamboMessageContext);
-    const { updateThreadMessage } = (0, __1.useTamboThread)();
-    const client = (0, __1.useTamboClient)();
-    const componentId = message?.interactableMetadata?.id ?? null;
-    const { setInteractableState, getInteractableComponentState } = (0, tambo_interactable_provider_1.useTamboInteractable)();
-    const messageState = message?.componentState?.[keyName];
-    const interactableState = componentId
-        ? getInteractableComponentState(componentId)?.[keyName]
-        : undefined;
-    const initialState = interactableState ?? messageState ?? initialValue;
-    const [localState, setLocalState] = (0, react_1.useState)(initialState);
-    const [initializedFromThreadMessage, setInitializedFromThreadMessage] = (0, react_1.useState)(messageState ? true : false);
-    // Optimistically update the local thread message's componentState
-    const updateLocalThreadMessage = (0, react_1.useCallback)(async (newState, existingMessage) => {
-        if (!existingMessage) {
-            return;
-        }
-        const updatedMessage = {
-            threadId: existingMessage.threadId,
-            componentState: {
-                ...existingMessage.componentState,
-                [keyName]: newState,
-            },
-        };
-        await updateThreadMessage(existingMessage.id, updatedMessage, false);
-    }, [updateThreadMessage, keyName]);
-    // Debounced callback to update the remote thread message's componentState
-    const updateRemoteThreadMessage = (0, use_debounce_1.useDebouncedCallback)(async (newState, existingMessage) => {
-        if (!existingMessage) {
-            return;
-        }
-        await client.beta.threads.messages.updateComponentState(existingMessage.id, {
-            id: existingMessage.threadId,
-            state: { [keyName]: newState },
-        });
-    }, debounceTime);
-    const setValue = (0, react_1.useCallback)((newState) => {
-        setLocalState(newState);
-        if (componentId) {
-            // For interactable components, update the interactable provider's state
-            setInteractableState(componentId, keyName, newState);
-        }
-        else if (message) {
-            // For generated components, update both local and remote thread message state
-            void updateLocalThreadMessage(newState, message);
-            void updateRemoteThreadMessage(newState, message);
-        }
-    }, [
-        message,
-        updateLocalThreadMessage,
-        updateRemoteThreadMessage,
-        setInteractableState,
-        componentId,
-        keyName,
-    ]);
-    const existingInteractableState = componentId
-        ? getInteractableComponentState(componentId)?.[keyName]
-        : undefined;
-    const shouldUpdateInteractableInitial = !!componentId &&
-        existingInteractableState === undefined &&
-        initialValue !== undefined;
-    // Set initial value in interactable state if we're in an interactable context and there's no existing state
-    (0, react_1.useEffect)(() => {
-        if (!shouldUpdateInteractableInitial) {
-            return;
-        }
-        setInteractableState(componentId, keyName, initialValue);
-    }, [
-        shouldUpdateInteractableInitial,
-        componentId,
-        keyName,
-        initialValue,
-        setInteractableState,
-    ]);
-    const shouldSyncFromMessage = !!message && messageState !== undefined && messageState !== null;
-    // Mirror the thread message's componentState value to the local state and interactable state
-    (0, react_1.useEffect)(() => {
-        if (!shouldSyncFromMessage) {
-            return;
-        }
-        setInitializedFromThreadMessage(true);
-        const stateValue = messageState;
-        setLocalState(stateValue);
-        if (componentId) {
-            setInteractableState(componentId, keyName, stateValue);
-        }
-    }, [
-        shouldSyncFromMessage,
-        messageState,
-        keyName,
-        setInteractableState,
-        componentId,
-    ]);
-    // Sync from interactable provider to local state when state changes externally (e.g., from Tambo tool call)
-    (0, react_1.useEffect)(() => {
-        if (!componentId)
-            return;
-        // only update if different
-        setLocalState((prev) => (0, fast_equals_1.deepEqual)(prev, interactableState) ? prev : interactableState);
-    }, [componentId, interactableState]);
-    // 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.
-    (0, react_1.useEffect)(() => {
-        if (setFromProp !== undefined && !initializedFromThreadMessage) {
-            setLocalState(setFromProp);
-        }
-    }, [setFromProp, initializedFromThreadMessage]);
-    // Ensure pending changes are flushed on unmount (only for generated components)
-    (0, react_1.useEffect)(() => {
-        // Only flush remote updates for generated components, not interactable components
-        if (componentId) {
-            return;
-        }
-        return () => {
-            async function flushUpdates() {
-                try {
-                    await updateRemoteThreadMessage.flush();
-                }
-                catch (error) {
-                    console.error("Failed to flush pending thread message updates:", error);
-                }
-            }
-            // Fire-and-forget cleanup (errors handled inside)
-            void flushUpdates();
-        };
-    }, [updateRemoteThreadMessage, componentId]);
-    return [localState, setValue];
-}
-//# sourceMappingURL=use-component-state.js.map

package/dist/hooks/use-component-state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { deepEqual } from \"fast-equals\";\nimport { useCallback, useContext, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { TamboThreadMessage, useTamboClient, useTamboThread } from \"..\";\nimport { useTamboInteractable } from \"../providers/tambo-interactable-provider\";\nimport { TamboMessageContext } from \"./use-current-message\";\n\ntype StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];\n\n/**\n * A React hook that acts like useState, but also automatically updates the thread message's componentState.\n * If used within an interactable component (wrapped with withTamboInteractable), it updates the\n * interactable provider's global state (sent to Tambo on every request) instead of the remote thread message state.\n * For generated components, it updates both the local and remote thread message's componentState.\n *\n * Benefits: Passes user changes to AI, and when threads are returned, state is preserved.\n * Works in both generative and interactable component contexts.\n * @param keyName - The unique key to identify this state value within the message's componentState object\n * @param initialValue - Optional initial value for the state, used if no componentState value exists in the Tambo message containing this hook usage.\n * @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.\n * @param debounceTime - Optional debounce time in milliseconds (default: 500ms) to limit API calls.\n * @returns A tuple of [currentState, setState] similar to React's useState\n * @example\n * ```tsx\n * const [count, setCount] = useTamboComponentState(\"counter\", 0);\n * ```\n *\n * Use `setFromProp` to seed state from streamed props. During streaming,\n * state updates as new prop values arrive. Once streaming completes,\n * user edits take precedence over the original prop value.\n *\n * Pair with `useTamboStreamStatus` to disable inputs while streaming.\n * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}\n */\nexport function useTamboComponentState<S = undefined>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S | undefined>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime = 500,\n): StateUpdateResult<S> {\n  const message = useContext(TamboMessageContext);\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const componentId = message?.interactableMetadata?.id ?? null;\n  const { setInteractableState, getInteractableComponentState } =\n    useTamboInteractable();\n  const messageState = message?.componentState?.[keyName];\n  const interactableState = componentId\n    ? getInteractableComponentState(componentId)?.[keyName]\n    : undefined;\n  const initialState =\n    (interactableState as S) ?? (messageState as S) ?? initialValue;\n  const [localState, setLocalState] = useState<S | undefined>(initialState);\n  const [initializedFromThreadMessage, setInitializedFromThreadMessage] =\n    useState(messageState ? true : false);\n\n  // Optimistically update the local thread message's componentState\n  const updateLocalThreadMessage = useCallback(\n    async (newState: S, existingMessage: TamboThreadMessage | null) => {\n      if (!existingMessage) {\n        return;\n      }\n      const updatedMessage = {\n        threadId: existingMessage.threadId,\n        componentState: {\n          ...existingMessage.componentState,\n          [keyName]: newState,\n        },\n      };\n      await updateThreadMessage(existingMessage.id, updatedMessage, false);\n    },\n    [updateThreadMessage, keyName],\n  );\n\n  // Debounced callback to update the remote thread message's componentState\n  const updateRemoteThreadMessage = useDebouncedCallback(\n    async (newState: S, existingMessage: TamboThreadMessage | null) => {\n      if (!existingMessage) {\n        return;\n      }\n      await client.beta.threads.messages.updateComponentState(\n        existingMessage.id,\n        {\n          id: existingMessage.threadId,\n          state: { [keyName]: newState },\n        },\n      );\n    },\n    debounceTime,\n  );\n\n  const setValue = useCallback(\n    (newState: S) => {\n      setLocalState(newState);\n      if (componentId) {\n        // For interactable components, update the interactable provider's state\n        setInteractableState(componentId, keyName, newState);\n      } else if (message) {\n        // For generated components, update both local and remote thread message state\n        void updateLocalThreadMessage(newState, message);\n        void updateRemoteThreadMessage(newState, message);\n      }\n    },\n    [\n      message,\n      updateLocalThreadMessage,\n      updateRemoteThreadMessage,\n      setInteractableState,\n      componentId,\n      keyName,\n    ],\n  );\n\n  const existingInteractableState = componentId\n    ? getInteractableComponentState(componentId)?.[keyName]\n    : undefined;\n  const shouldUpdateInteractableInitial =\n    !!componentId &&\n    existingInteractableState === undefined &&\n    initialValue !== undefined;\n\n  // Set initial value in interactable state if we're in an interactable context and there's no existing state\n  useEffect(() => {\n    if (!shouldUpdateInteractableInitial) {\n      return;\n    }\n    setInteractableState(componentId, keyName, initialValue!);\n  }, [\n    shouldUpdateInteractableInitial,\n    componentId,\n    keyName,\n    initialValue,\n    setInteractableState,\n  ]);\n\n  const shouldSyncFromMessage =\n    !!message && messageState !== undefined && messageState !== null;\n\n  // Mirror the thread message's componentState value to the local state and interactable state\n  useEffect(() => {\n    if (!shouldSyncFromMessage) {\n      return;\n    }\n    setInitializedFromThreadMessage(true);\n    const stateValue = messageState as S;\n    setLocalState(stateValue);\n    if (componentId) {\n      setInteractableState(componentId, keyName, stateValue);\n    }\n  }, [\n    shouldSyncFromMessage,\n    messageState,\n    keyName,\n    setInteractableState,\n    componentId,\n  ]);\n\n  // Sync from interactable provider to local state when state changes externally (e.g., from Tambo tool call)\n  useEffect(() => {\n    if (!componentId) return;\n    // only update if different\n    setLocalState((prev) =>\n      deepEqual(prev, interactableState) ? prev : (interactableState as S),\n    );\n  }, [componentId, interactableState]);\n\n  // 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.\n  useEffect(() => {\n    if (setFromProp !== undefined && !initializedFromThreadMessage) {\n      setLocalState(setFromProp as S);\n    }\n  }, [setFromProp, initializedFromThreadMessage]);\n\n  // Ensure pending changes are flushed on unmount (only for generated components)\n  useEffect(() => {\n    // Only flush remote updates for generated components, not interactable components\n    if (componentId) {\n      return;\n    }\n    return () => {\n      async function flushUpdates() {\n        try {\n          await updateRemoteThreadMessage.flush();\n        } catch (error) {\n          console.error(\n            \"Failed to flush pending thread message updates:\",\n            error,\n          );\n        }\n      }\n      // Fire-and-forget cleanup (errors handled inside)\n      void flushUpdates();\n    };\n  }, [updateRemoteThreadMessage, componentId]);\n\n  return [localState as S, setValue];\n}\n"]}

package/dist/hooks/use-component-state.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=use-component-state.test.d.ts.map

package/dist/hooks/use-component-state.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-component-state.test.d.ts","sourceRoot":"","sources":["../../src/hooks/use-component-state.test.tsx"],"names":[],"mappings":""}

package/dist/hooks/use-component-state.test.js

@@ -1,406 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("@testing-library/react");
-const react_2 = __importDefault(require("react"));
-const tambo_client_provider_1 = require("../providers/tambo-client-provider");
-const tambo_interactable_provider_1 = require("../providers/tambo-interactable-provider");
-const tambo_thread_provider_1 = require("../providers/tambo-thread-provider");
-const use_component_state_1 = require("./use-component-state");
-const use_current_message_1 = require("./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(),
-    TamboMessageContext: react_2.default.createContext(null),
-}));
-jest.mock("../providers/tambo-interactable-provider", () => ({
-    useTamboInteractable: 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
-const use_debounce_1 = require("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();
-    const mockSetInteractableState = jest.fn();
-    const mockGetInteractableComponentState = jest.fn();
-    // Track context values for mocking
-    let mockMessage = null;
-    beforeEach(() => {
-        jest.clearAllMocks();
-        // Reset context values
-        mockMessage = createMockMessage();
-        // Mock useContext to return appropriate values based on context
-        const originalUseContext = react_2.default.useContext;
-        jest.spyOn(react_2.default, "useContext").mockImplementation((context) => {
-            if (context === use_current_message_1.TamboMessageContext) {
-                // Return the message from useTamboCurrentMessage mock if available
-                try {
-                    const currentMessageMock = jest.mocked(use_current_message_1.useTamboCurrentMessage);
-                    const mockImpl = currentMessageMock.getMockImplementation();
-                    if (mockImpl) {
-                        return mockImpl();
-                    }
-                }
-                catch {
-                    // Fallback to mockMessage
-                }
-                return mockMessage;
-            }
-            // For other contexts, use the original implementation
-            return originalUseContext(context);
-        });
-        // Setup default mock for useDebouncedCallback
-        jest
-            .mocked(use_debounce_1.useDebouncedCallback)
-            .mockImplementation((fn) => createMockDebouncedFunction(fn));
-        // Setup default mocks
-        jest.mocked(tambo_client_provider_1.useTamboClient).mockReturnValue({
-            beta: {
-                threads: {
-                    messages: {
-                        updateComponentState: mockUpdateComponentState,
-                    },
-                },
-            },
-        });
-        jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
-            updateThreadMessage: mockUpdateThreadMessage,
-        });
-        jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage());
-        jest.mocked(tambo_interactable_provider_1.useTamboInteractable).mockReturnValue({
-            setInteractableState: mockSetInteractableState,
-            getInteractableComponentState: mockGetInteractableComponentState,
-        });
-    });
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-    describe("Initial State Management", () => {
-        it("should initialize with initialValue when no componentState exists", () => {
-            const initialValue = "test-initial";
-            jest
-                .mocked(use_current_message_1.useTamboCurrentMessage)
-                .mockReturnValue(createMockMessage({ componentState: {} }));
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.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(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
-                componentState: { testKey: existingValue },
-            }));
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", initialValue));
-            expect(result.current[0]).toBe(existingValue);
-        });
-        it("should handle undefined initialValue gracefully", () => {
-            jest
-                .mocked(use_current_message_1.useTamboCurrentMessage)
-                .mockReturnValue(createMockMessage({ componentState: {} }));
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.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(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
-                    componentState: { testKey: value },
-                }));
-                const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.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(use_current_message_1.useTamboCurrentMessage)
-                .mockReturnValue(createMockMessage({ componentState: { testKey: initialValue } }));
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", initialValue));
-            const newValue = "updated";
-            (0, react_1.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(use_current_message_1.useTamboCurrentMessage).mockReturnValue(message);
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial"));
-            const newValue = "updated";
-            (0, react_1.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(use_current_message_1.useTamboCurrentMessage).mockReturnValue(message);
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial"));
-            const newValue = "updated";
-            (0, react_1.act)(() => {
-                result.current[1](newValue);
-            });
-            // The debounced function should be called
-            expect(mockUpdateComponentState).toHaveBeenCalledWith(message.id, {
-                id: message.threadId,
-                state: { testKey: newValue },
-            });
-        });
-        it("should work with complex objects and arrays", () => {
-            const initialValue = { name: "test", items: [1, 2, 3] };
-            jest
-                .mocked(use_current_message_1.useTamboCurrentMessage)
-                .mockReturnValue(createMockMessage({ componentState: { testKey: initialValue } }));
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", initialValue));
-            const newValue = { name: "updated", items: [4, 5, 6] };
-            (0, react_1.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", () => {
-            (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial"));
-            expect(use_debounce_1.useDebouncedCallback).toHaveBeenCalledWith(expect.any(Function), 500);
-        });
-        it("should use custom debounce time when provided", () => {
-            const customDebounceTime = 1000;
-            (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial", undefined, customDebounceTime));
-            expect(use_debounce_1.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(use_debounce_1.useDebouncedCallback).mockReturnValue(mockDebouncedFn);
-            const { unmount } = (0, react_1.renderHook)(() => (0, use_component_state_1.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(use_current_message_1.useTamboCurrentMessage).mockReturnValue(message);
-            const { result: result1 } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("key1", "default1"));
-            const { result: result2 } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("key2", "default2"));
-            expect(result1.current[0]).toBe("value1");
-            expect(result2.current[0]).toBe("value2");
-            // Update first hook
-            (0, react_1.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(use_current_message_1.useTamboCurrentMessage).mockReturnValue(message);
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial"));
-            (0, react_1.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(use_current_message_1.useTamboCurrentMessage)
-                .mockReturnValue(createMockMessage({ componentState: {} }));
-            const propValue = "from-prop";
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.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(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
-                componentState: { testKey: existingValue },
-            }));
-            const propValue = "from-prop";
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial", propValue));
-            // Should use existing value from message, not prop value
-            await (0, react_1.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(use_current_message_1.useTamboCurrentMessage)
-                .mockReturnValue(createMockMessage({ componentState: {} }));
-            const { result, rerender } = (0, react_1.renderHook)(({ propValue }) => (0, use_component_state_1.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(use_current_message_1.useTamboCurrentMessage)
-                .mockReturnValue(createMockMessage({ componentState: {} }));
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial", undefined));
-            expect(result.current[0]).toBe("initial");
-        });
-    });
-    describe("Interactable State Sync", () => {
-        it("should sync local state when interactable state changes externally", () => {
-            // Setup: Component is in interactable context with an ID
-            const message = createMockMessage({
-                componentState: {},
-                interactableMetadata: {
-                    id: "test-interactable-id",
-                    componentName: "TestComponent",
-                    description: "Test",
-                },
-            });
-            jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(message);
-            // Start with initial state
-            mockGetInteractableComponentState.mockReturnValue({ testKey: "initial" });
-            const { result, rerender } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial"));
-            expect(result.current[0]).toBe("initial");
-            // Simulate external state update (e.g., from Tambo tool call)
-            mockGetInteractableComponentState.mockReturnValue({
-                testKey: "updated-by-tambo",
-            });
-            // Trigger rerender to pick up new interactable state
-            rerender();
-            // Local state should sync with the external update
-            expect(result.current[0]).toBe("updated-by-tambo");
-        });
-        it("should not sync when not in interactable context", () => {
-            // Setup: Component is NOT in interactable context (no interactableMetadata.id)
-            const message = createMockMessage({
-                componentState: { testKey: "initial" },
-            });
-            jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(message);
-            mockGetInteractableComponentState.mockReturnValue({ testKey: "ignored" });
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.useTamboComponentState)("testKey", "initial"));
-            // Should use message state, not interactable state
-            expect(result.current[0]).toBe("initial");
-        });
-    });
-    describe("Message State Sync", () => {
-        it("should sync with message.componentState changes", () => {
-            const { result, rerender } = (0, react_1.renderHook)(({ message }) => {
-                jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(message);
-                return (0, use_component_state_1.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(use_current_message_1.useTamboCurrentMessage)
-                .mockReturnValue(createMockMessage({ componentState: undefined }));
-            const { result } = (0, react_1.renderHook)(() => (0, use_component_state_1.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 } = (0, react_1.renderHook)(({ message }) => {
-                jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(message);
-                return (0, use_component_state_1.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