npm - @tambo-ai/react - Versions diffs - 0.39.0 → 0.41.0 - Mend

@tambo-ai/react 0.39.0 → 0.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

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

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const use_debounce_1 = require("use-debounce");
 const providers_1 = require("../providers");
 const use_current_message_1 = require("./use-current-message");
-// eslint-disable-next-line jsdoc/require-jsdoc
 function useTamboComponentState(keyName, initialValue, debounceTime = 500) {
     const { messageId } = (0, use_current_message_1.useTamboMessageContext)();
     const { updateThreadMessage, thread } = (0, providers_1.useTamboThread)();

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

	@@ -1 +1 @@
1	- {"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 { useCallback, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { useTamboClient, useTamboThread } from \"../providers\";\nimport {\n useTamboCurrentMessage,\n useTamboMessageContext,\n} from \"./use-current-message\";\n// Define metadata interface for better extensibility\ninterface ComponentStateMeta {\n isPending: boolean;\n}\n\ntype StateUpdateResult<T> = [\n currentState: T,\n setState: (newState: T) => void,\n meta: ComponentStateMeta,\n];\n\n/*\n A React hook that provides state management and passes user updates to Tambo.\n * Benefits: Passes user changes to AI, and when threads are returned, state is preserved.\n * @param keyName - The unique key to identify this state within the message's componentState object\n * @param initialValue - Optional initial value for the state, used if no value exists in the message\n * @param debounceTime - Optional debounce time in milliseconds (default: 300ms) to limit API calls\n * @returns A tuple containing:\n * - The current state value\n * - A setter function to update the state (updates UI immediately, debounces server sync)\n * - A metadata object with properties like isPending to track sync status\n * @example\n * // Basic usage\n * const [count, setCount, { isPending }] = useTamboComponentState(\"counter\", 0);\n \n // Usage with object state\n * const [formState, setFormState] = useTamboComponentState(\"myForm\", {\n * name: \"\",\n * email: \"\",\n * message: \"\"\n * });\n \n // Handling form input\n * const handleChange = (e) => {\n * setFormState({\n * ...formState,\n * [e.target.name]: e.target.value\n * });\n * };\n */\nexport function useTamboComponentState<S = undefined>(\n keyName: string,\n initialValue?: S,\n debounceTime?: number,\n): StateUpdateResult<S \| undefined>;\nexport function useTamboComponentState<S>(\n keyName: string,\n initialValue: S,\n debounceTime?: number,\n): StateUpdateResult<S>;\n// eslint-disable-next-line jsdoc/require-jsdoc\nexport function useTamboComponentState<S>(\n keyName: string,\n initialValue?: S,\n debounceTime = 500,\n): StateUpdateResult<S> {\n const { messageId } = useTamboMessageContext();\n const { updateThreadMessage, thread } = useTamboThread();\n const client = useTamboClient();\n const message = useTamboCurrentMessage();\n const threadId = thread.id;\n\n // Initial value management\n const [cachedInitialValue] = useState(() => initialValue);\n // UI state management\n const [localState, setLocalState] = useState<S \| undefined>(\n cachedInitialValue,\n );\n // Synchronization state\n const [isPending, setIsPending] = useState(false);\n // Track the last user-initiated value instead of a simple boolean flag\n const [lastUserValue, setLastUserValue] = useState<S \| null>(null);\n const [haveInitialized, setHaveInitialized] = useState(false);\n\n // Determine if we need to initialize state\n const shouldInitialize =\n !haveInitialized &&\n message &&\n cachedInitialValue !== undefined &&\n (!message.componentState \|\| !(keyName in message.componentState));\n\n // Sync local state with message state on initial load and when message changes\n useEffect(() => {\n if (message?.componentState && keyName in message.componentState) {\n const messageState = message.componentState[keyName] as S;\n\n // Only update local state if we haven't had any user changes yet\n if (lastUserValue === null) {\n setLocalState(messageState);\n }\n }\n // Otherwise fall back to initial value if we have one and no user changes\n else if (\n cachedInitialValue !== undefined &&\n !localState &&\n lastUserValue === null\n ) {\n setLocalState(cachedInitialValue);\n }\n }, [\n keyName,\n message?.componentState,\n cachedInitialValue,\n lastUserValue,\n localState,\n ]);\n\n // Create debounced save function for efficient server synchronization\n const debouncedServerWrite = useDebouncedCallback(async (newValue: S) => {\n setIsPending(true);\n try {\n const componentStateUpdate = {\n state: { [keyName]: newValue },\n };\n\n await client.beta.threads.messages.updateComponentState(\n threadId,\n messageId,\n componentStateUpdate,\n );\n } catch (err) {\n console.error(\n `Failed to save component state for key \"${keyName}\":`,\n err,\n );\n } finally {\n setIsPending(false);\n }\n }, debounceTime);\n\n // Initialize state on first render if needed\n const initializeState = useCallback(async () => {\n if (!message) {\n console.warn(\n `Cannot initialize state for missing message ${messageId} with key \"${keyName}\"`,\n );\n return;\n }\n\n try {\n const messageUpdate = {\n ...message,\n componentState: {\n ...message.componentState,\n [keyName]: cachedInitialValue,\n },\n };\n\n const componentStateUpdate = {\n state: { [keyName]: cachedInitialValue },\n };\n\n await Promise.all([\n updateThreadMessage(messageId, messageUpdate, false),\n client.beta.threads.messages.updateComponentState(\n threadId,\n messageId,\n componentStateUpdate,\n ),\n ]);\n } catch (err) {\n console.warn(\n `Failed to initialize component state for key \"${keyName}\":`,\n err,\n );\n }\n }, [\n cachedInitialValue,\n client.beta.threads.messages,\n keyName,\n message,\n messageId,\n threadId,\n updateThreadMessage,\n ]);\n\n // Send initial state when component mounts\n useEffect(() => {\n if (shouldInitialize) {\n initializeState();\n setHaveInitialized(true);\n }\n }, [initializeState, shouldInitialize]);\n\n // setValue function for updating state\n // Updates local state immediately and schedules debounced server sync\n const setValue = useCallback(\n (newValue: S) => {\n // Track this as a user-initiated update\n setLastUserValue(newValue);\n setLocalState(newValue);\n\n // Only trigger server updates if we have a message\n if (message) {\n debouncedServerWrite(newValue);\n const messageUpdate = {\n ...message,\n componentState: {\n ...message.componentState,\n [keyName]: newValue,\n },\n };\n\n updateThreadMessage(messageId, messageUpdate, false);\n } else {\n console.warn(\n `Cannot update server for missing message ${messageId} with key \"${keyName}\"`,\n );\n }\n },\n [message, debouncedServerWrite, keyName, updateThreadMessage, messageId],\n );\n\n // Ensure pending changes are flushed on unmount\n useEffect(() => {\n return () => {\n debouncedServerWrite.flush();\n };\n }, [debouncedServerWrite]);\n\n // Return the local state for immediate UI rendering\n return [localState as S, setValue, { isPending }];\n}\n"]}
1	+ {"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 { useCallback, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { useTamboClient, useTamboThread } from \"../providers\";\nimport {\n useTamboCurrentMessage,\n useTamboMessageContext,\n} from \"./use-current-message\";\n// Define metadata interface for better extensibility\ninterface ComponentStateMeta {\n isPending: boolean;\n}\n\ntype StateUpdateResult<T> = [\n currentState: T,\n setState: (newState: T) => void,\n meta: ComponentStateMeta,\n];\n\n/*\n A React hook that provides state management and passes user updates to Tambo.\n * Benefits: Passes user changes to AI, and when threads are returned, state is preserved.\n * @param keyName - The unique key to identify this state within the message's componentState object\n * @param initialValue - Optional initial value for the state, used if no value exists in the message\n * @param debounceTime - Optional debounce time in milliseconds (default: 300ms) to limit API calls\n * @returns A tuple containing:\n * - The current state value\n * - A setter function to update the state (updates UI immediately, debounces server sync)\n * - A metadata object with properties like isPending to track sync status\n * @example\n * // Basic usage\n * const [count, setCount, { isPending }] = useTamboComponentState(\"counter\", 0);\n \n // Usage with object state\n * const [formState, setFormState] = useTamboComponentState(\"myForm\", {\n * name: \"\",\n * email: \"\",\n * message: \"\"\n * });\n \n // Handling form input\n * const handleChange = (e) => {\n * setFormState({\n * ...formState,\n * [e.target.name]: e.target.value\n * });\n * };\n */\nexport function useTamboComponentState<S = undefined>(\n keyName: string,\n initialValue?: S,\n debounceTime?: number,\n): StateUpdateResult<S \| undefined>;\nexport function useTamboComponentState<S>(\n keyName: string,\n initialValue: S,\n debounceTime?: number,\n): StateUpdateResult<S>;\n\nexport function useTamboComponentState<S>(\n keyName: string,\n initialValue?: S,\n debounceTime = 500,\n): StateUpdateResult<S> {\n const { messageId } = useTamboMessageContext();\n const { updateThreadMessage, thread } = useTamboThread();\n const client = useTamboClient();\n const message = useTamboCurrentMessage();\n const threadId = thread.id;\n\n // Initial value management\n const [cachedInitialValue] = useState(() => initialValue);\n // UI state management\n const [localState, setLocalState] = useState<S \| undefined>(\n cachedInitialValue,\n );\n // Synchronization state\n const [isPending, setIsPending] = useState(false);\n // Track the last user-initiated value instead of a simple boolean flag\n const [lastUserValue, setLastUserValue] = useState<S \| null>(null);\n const [haveInitialized, setHaveInitialized] = useState(false);\n\n // Determine if we need to initialize state\n const shouldInitialize =\n !haveInitialized &&\n message &&\n cachedInitialValue !== undefined &&\n (!message.componentState \|\| !(keyName in message.componentState));\n\n // Sync local state with message state on initial load and when message changes\n useEffect(() => {\n if (message?.componentState && keyName in message.componentState) {\n const messageState = message.componentState[keyName] as S;\n\n // Only update local state if we haven't had any user changes yet\n if (lastUserValue === null) {\n setLocalState(messageState);\n }\n }\n // Otherwise fall back to initial value if we have one and no user changes\n else if (\n cachedInitialValue !== undefined &&\n !localState &&\n lastUserValue === null\n ) {\n setLocalState(cachedInitialValue);\n }\n }, [\n keyName,\n message?.componentState,\n cachedInitialValue,\n lastUserValue,\n localState,\n ]);\n\n // Create debounced save function for efficient server synchronization\n const debouncedServerWrite = useDebouncedCallback(async (newValue: S) => {\n setIsPending(true);\n try {\n const componentStateUpdate = {\n state: { [keyName]: newValue },\n };\n\n await client.beta.threads.messages.updateComponentState(\n threadId,\n messageId,\n componentStateUpdate,\n );\n } catch (err) {\n console.error(\n `Failed to save component state for key \"${keyName}\":`,\n err,\n );\n } finally {\n setIsPending(false);\n }\n }, debounceTime);\n\n // Initialize state on first render if needed\n const initializeState = useCallback(async () => {\n if (!message) {\n console.warn(\n `Cannot initialize state for missing message ${messageId} with key \"${keyName}\"`,\n );\n return;\n }\n\n try {\n const messageUpdate = {\n ...message,\n componentState: {\n ...message.componentState,\n [keyName]: cachedInitialValue,\n },\n };\n\n const componentStateUpdate = {\n state: { [keyName]: cachedInitialValue },\n };\n\n await Promise.all([\n updateThreadMessage(messageId, messageUpdate, false),\n client.beta.threads.messages.updateComponentState(\n threadId,\n messageId,\n componentStateUpdate,\n ),\n ]);\n } catch (err) {\n console.warn(\n `Failed to initialize component state for key \"${keyName}\":`,\n err,\n );\n }\n }, [\n cachedInitialValue,\n client.beta.threads.messages,\n keyName,\n message,\n messageId,\n threadId,\n updateThreadMessage,\n ]);\n\n // Send initial state when component mounts\n useEffect(() => {\n if (shouldInitialize) {\n initializeState();\n setHaveInitialized(true);\n }\n }, [initializeState, shouldInitialize]);\n\n // setValue function for updating state\n // Updates local state immediately and schedules debounced server sync\n const setValue = useCallback(\n (newValue: S) => {\n // Track this as a user-initiated update\n setLastUserValue(newValue);\n setLocalState(newValue);\n\n // Only trigger server updates if we have a message\n if (message) {\n debouncedServerWrite(newValue);\n const messageUpdate = {\n ...message,\n componentState: {\n ...message.componentState,\n [keyName]: newValue,\n },\n };\n\n updateThreadMessage(messageId, messageUpdate, false);\n } else {\n console.warn(\n `Cannot update server for missing message ${messageId} with key \"${keyName}\"`,\n );\n }\n },\n [message, debouncedServerWrite, keyName, updateThreadMessage, messageId],\n );\n\n // Ensure pending changes are flushed on unmount\n useEffect(() => {\n return () => {\n debouncedServerWrite.flush();\n };\n }, [debouncedServerWrite]);\n\n // Return the local state for immediate UI rendering\n return [localState as S, setValue, { isPending }];\n}\n"]}

package/dist/mcp/mcp-client.d.ts CHANGED Viewed

@@ -65,32 +65,32 @@ export declare class MCPClient {
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, import("zod").ZodTypeAny, "passthrough">>, import("zod").ZodObject<{
             type: import("zod").ZodLiteral<"image">;
-            data: import("zod").ZodString;
+            data: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             mimeType: import("zod").ZodString;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
             type: import("zod").ZodLiteral<"image">;
-            data: import("zod").ZodString;
+            data: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             mimeType: import("zod").ZodString;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
             type: import("zod").ZodLiteral<"image">;
-            data: import("zod").ZodString;
+            data: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             mimeType: import("zod").ZodString;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, import("zod").ZodTypeAny, "passthrough">>, import("zod").ZodObject<{
             type: import("zod").ZodLiteral<"audio">;
-            data: import("zod").ZodString;
+            data: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             mimeType: import("zod").ZodString;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
             type: import("zod").ZodLiteral<"audio">;
-            data: import("zod").ZodString;
+            data: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             mimeType: import("zod").ZodString;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
             type: import("zod").ZodLiteral<"audio">;
-            data: import("zod").ZodString;
+            data: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             mimeType: import("zod").ZodString;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, import("zod").ZodTypeAny, "passthrough">>, import("zod").ZodObject<import("zod").objectUtil.extendShape<import("zod").objectUtil.extendShape<{
@@ -148,19 +148,19 @@ export declare class MCPClient {
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<import("zod").objectUtil.extendShape<{
                 uri: import("zod").ZodString;
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<import("zod").objectUtil.extendShape<{
                 uri: import("zod").ZodString;
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, import("zod").ZodTypeAny, "passthrough">>]>;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
@@ -188,19 +188,19 @@ export declare class MCPClient {
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<import("zod").objectUtil.extendShape<{
                 uri: import("zod").ZodString;
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<import("zod").objectUtil.extendShape<{
                 uri: import("zod").ZodString;
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, import("zod").ZodTypeAny, "passthrough">>]>;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
@@ -228,19 +228,19 @@ export declare class MCPClient {
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<import("zod").objectUtil.extendShape<{
                 uri: import("zod").ZodString;
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<import("zod").objectUtil.extendShape<{
                 uri: import("zod").ZodString;
                 mimeType: import("zod").ZodOptional<import("zod").ZodString>;
                 _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
             }, {
-                blob: import("zod").ZodString;
+                blob: import("zod").ZodEffects<import("zod").ZodString, string, string>;
             }>, import("zod").ZodTypeAny, "passthrough">>]>;
             _meta: import("zod").ZodOptional<import("zod").ZodObject<{}, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{}, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{}, import("zod").ZodTypeAny, "passthrough">>>;
         }, import("zod").ZodTypeAny, "passthrough">>]>, "many">>;

package/dist/providers/__tests__/tambo-prop-stream-provider.test.js CHANGED Viewed

@@ -5,17 +5,63 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@testing-library/react");
 const react_2 = __importDefault(require("react"));
+const use_current_message_1 = require("../../hooks/use-current-message");
+const generate_component_response_1 = require("../../model/generate-component-response");
+const tambo_thread_provider_1 = require("../../providers/tambo-thread-provider");
 const tambo_prop_stream_provider_1 = require("../tambo-prop-stream-provider");
+// Mock the required providers
+jest.mock("../../providers/tambo-thread-provider", () => ({
+    useTamboThread: jest.fn(),
+}));
+jest.mock("../../hooks/use-current-message", () => ({
+    useTamboCurrentMessage: jest.fn(),
+}));
+// Mock window for SSR tests
+const originalWindow = global.window;
+// Helper function to create mock ComponentDecisionV2
+const createMockComponent = (props = {}) => ({
+    componentName: "TestComponent",
+    componentState: {},
+    message: "Component generated",
+    props,
+    reasoning: "Test reasoning",
+});
+// Helper function to create mock TamboThreadMessage
+const createMockMessage = (overrides = {}) => ({
+    id: "test-message",
+    componentState: {},
+    content: [{ type: "text", text: "test content" }],
+    createdAt: new Date().toISOString(),
+    role: "assistant",
+    threadId: "test-thread",
+    ...overrides,
+});
 // Helper component to test hook usage
 const TestHookComponent = ({ testKey = "default", }) => {
-    const { data, streamStatus, getStatusForKey } = (0, tambo_prop_stream_provider_1.useTamboStream)();
+    const { streamStatus, getStatusForKey } = (0, tambo_prop_stream_provider_1.useTamboStream)();
     const status = getStatusForKey(testKey);
     return (react_2.default.createElement("div", null,
-        react_2.default.createElement("div", { "data-testid": "data" }, JSON.stringify(data)),
         react_2.default.createElement("div", { "data-testid": "stream-status" }, JSON.stringify(streamStatus)),
         react_2.default.createElement("div", { "data-testid": "key-status" }, JSON.stringify(status))));
 };
 describe("TamboPropStreamProvider", () => {
+    beforeEach(() => {
+        // Restore window for client-side tests
+        global.window = originalWindow;
+        // Default mock implementations
+        jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+            generationStage: generate_component_response_1.GenerationStage.IDLE,
+        });
+        jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue({
+            id: "test-message",
+            component: {
+                props: {},
+            },
+        });
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
     describe("Hook Error Handling", () => {
         it("should throw error when useTamboStream is used outside provider", () => {
             // Suppress console.error for this test
@@ -27,250 +73,124 @@ describe("TamboPropStreamProvider", () => {
             console.error = originalError;
         });
     });
-    describe("Basic Functionality", () => {
-        it("should provide data and stream status through context", () => {
-            const testData = { message: "Hello World" };
-            const testStreamStatus = {
-                isPending: false,
-                isStreaming: false,
-                isSuccess: true,
-                isError: false,
-                streamError: undefined,
-            };
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: testData, streamStatus: testStreamStatus },
-                react_2.default.createElement(TestHookComponent, null)));
-            expect(react_1.screen.getByTestId("data")).toHaveTextContent(JSON.stringify(testData));
-            expect(react_1.screen.getByTestId("stream-status")).toHaveTextContent(JSON.stringify(testStreamStatus));
-        });
-        it("should use default stream status when none provided", () => {
-            const testData = { message: "Hello World" };
-            const expectedDefaultStatus = {
-                isPending: false,
-                isStreaming: false,
-                isSuccess: true,
-                isError: false,
-                streamError: undefined,
-            };
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: testData },
-                react_2.default.createElement(TestHookComponent, null)));
-            expect(react_1.screen.getByTestId("stream-status")).toHaveTextContent(JSON.stringify(expectedDefaultStatus));
-        });
-    });
     describe("Compound Components", () => {
-        describe("Loading Component", () => {
-            it("should render loading when isPending is true", () => {
-                const streamStatus = {
-                    isPending: true,
-                    isStreaming: false,
-                    isSuccess: false,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: null, streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Loading, null,
+        describe("Streaming Component", () => {
+            it("should render streaming when isPending is true", () => {
+                jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+                    generationStage: generate_component_response_1.GenerationStage.IDLE,
+                });
+                jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                    component: createMockComponent({ title: "" }),
+                }));
+                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, null,
+                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Streaming, null,
                         react_2.default.createElement("div", { "data-testid": "loading" }, "Loading..."))));
                 expect(react_1.screen.getByTestId("loading")).toBeInTheDocument();
             });
-            it("should render loading when isStreaming is true", () => {
-                const streamStatus = {
-                    isPending: false,
-                    isStreaming: true,
-                    isSuccess: false,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: null, streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Loading, null,
+            it("should render streaming when isStreaming is true", () => {
+                jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+                    generationStage: generate_component_response_1.GenerationStage.STREAMING_RESPONSE,
+                });
+                jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                    component: createMockComponent({ title: "Partial" }),
+                }));
+                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, null,
+                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Streaming, null,
                         react_2.default.createElement("div", { "data-testid": "loading" }, "Loading..."))));
                 expect(react_1.screen.getByTestId("loading")).toBeInTheDocument();
             });
-            it("should not render loading when not pending or streaming", () => {
-                const streamStatus = {
-                    isPending: false,
-                    isStreaming: false,
-                    isSuccess: true,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: "test", streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Loading, null,
-                        react_2.default.createElement("div", { "data-testid": "loading" }, "Loading..."))));
-                expect(react_1.screen.queryByTestId("loading")).not.toBeInTheDocument();
-            });
         });
-        describe("Complete Component", () => {
-            it("should render complete when isSuccess is true and data exists", () => {
-                const streamStatus = {
-                    isPending: false,
-                    isStreaming: false,
-                    isSuccess: true,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: "test data", streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Complete, null,
-                        react_2.default.createElement("div", { "data-testid": "complete" }, "Complete!"))));
-                expect(react_1.screen.getByTestId("complete")).toBeInTheDocument();
-            });
-            it("should not render complete when data is null", () => {
-                const streamStatus = {
-                    isPending: false,
-                    isStreaming: false,
-                    isSuccess: true,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: null, streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Complete, null,
-                        react_2.default.createElement("div", { "data-testid": "complete" }, "Complete!"))));
-                expect(react_1.screen.queryByTestId("complete")).not.toBeInTheDocument();
-            });
-            it("should not render complete when data is undefined", () => {
-                const streamStatus = {
-                    isPending: false,
-                    isStreaming: false,
-                    isSuccess: true,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: undefined, streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Complete, null,
+        describe("Success Component", () => {
+            it("should not render success when isSuccess is false", () => {
+                jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+                    generationStage: generate_component_response_1.GenerationStage.IDLE,
+                });
+                jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                    component: createMockComponent({ title: "" }),
+                }));
+                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, null,
+                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Success, null,
                         react_2.default.createElement("div", { "data-testid": "complete" }, "Complete!"))));
                 expect(react_1.screen.queryByTestId("complete")).not.toBeInTheDocument();
             });
         });
-        describe("Empty Component", () => {
-            it("should render empty when no data and not loading/streaming/success/error", () => {
-                const streamStatus = {
-                    isPending: false,
-                    isStreaming: false,
-                    isSuccess: false,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: null, streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Empty, null,
-                        react_2.default.createElement("div", { "data-testid": "empty" }, "No data"))));
+        describe("Pending Component", () => {
+            it("should render pending when no active status", () => {
+                jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+                    generationStage: generate_component_response_1.GenerationStage.IDLE,
+                });
+                jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                    component: createMockComponent({ title: "" }),
+                }));
+                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, null,
+                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Pending, null,
+                        react_2.default.createElement("div", { "data-testid": "empty" }, "Empty!"))));
                 expect(react_1.screen.getByTestId("empty")).toBeInTheDocument();
             });
-            it("should render empty when data is empty string", () => {
-                const streamStatus = {
-                    isPending: false,
-                    isStreaming: false,
-                    isSuccess: false,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: "", streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Empty, null,
-                        react_2.default.createElement("div", { "data-testid": "empty" }, "No data"))));
-                expect(react_1.screen.getByTestId("empty")).toBeInTheDocument();
-            });
-            it("should not render empty when loading", () => {
-                const streamStatus = {
-                    isPending: true,
-                    isStreaming: false,
-                    isSuccess: false,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: null, streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Empty, null,
-                        react_2.default.createElement("div", { "data-testid": "empty" }, "No data"))));
-                expect(react_1.screen.queryByTestId("empty")).not.toBeInTheDocument();
-            });
-            it("should not render empty when successful", () => {
-                const streamStatus = {
-                    isPending: false,
-                    isStreaming: false,
-                    isSuccess: true,
-                    isError: false,
-                };
-                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: null, streamStatus: streamStatus },
-                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Empty, null,
-                        react_2.default.createElement("div", { "data-testid": "empty" }, "No data"))));
+            it("should not render pending when isPending is true", () => {
+                jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+                    generationStage: generate_component_response_1.GenerationStage.STREAMING_RESPONSE,
+                });
+                jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                    component: createMockComponent({ title: "Partial" }),
+                }));
+                (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, null,
+                    react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Pending, null,
+                        react_2.default.createElement("div", { "data-testid": "empty" }, "Empty!"))));
                 expect(react_1.screen.queryByTestId("empty")).not.toBeInTheDocument();
             });
         });
     });
-    describe("Per-Key Status Tracking", () => {
-        it("should track status for object keys", () => {
-            const testData = { name: "John", age: null };
-            const streamStatus = {
-                isPending: false,
-                isStreaming: false,
-                isSuccess: true,
-                isError: false,
-            };
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: testData, streamStatus: streamStatus },
-                react_2.default.createElement(TestHookComponent, { testKey: "name" })));
-            const keyStatus = JSON.parse(react_1.screen.getByTestId("key-status").textContent ?? "{}");
-            expect(keyStatus.isSuccess).toBe(true); // name has data
-        });
-        it("should show loading for keys without data", () => {
-            const testData = { name: "John", age: null };
-            const streamStatus = {
-                isPending: false,
-                isStreaming: false,
-                isSuccess: true,
-                isError: false,
-            };
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: testData, streamStatus: streamStatus },
-                react_2.default.createElement(TestHookComponent, { testKey: "age" })));
-            const keyStatus = JSON.parse(react_1.screen.getByTestId("key-status").textContent ?? "{}");
-            expect(keyStatus.isPending).toBe(true); // age has no data
-        });
-        it("should handle per-key loading states", () => {
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: { name: "John", age: null } },
-                react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Loading, { streamKey: "name" },
-                    react_2.default.createElement("div", { "data-testid": "name-loading" }, "Name loading...")),
-                react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Loading, { streamKey: "age" },
-                    react_2.default.createElement("div", { "data-testid": "age-loading" }, "Age loading...")),
-                react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Complete, { streamKey: "name" },
-                    react_2.default.createElement("div", { "data-testid": "name-complete" }, "Name: John"))));
-            // Name should be complete (has data)
-            expect(react_1.screen.getByTestId("name-complete")).toBeInTheDocument();
-            expect(react_1.screen.queryByTestId("name-loading")).not.toBeInTheDocument();
-            // Age should be loading (no data)
-            expect(react_1.screen.getByTestId("age-loading")).toBeInTheDocument();
+    describe("Key-based Status", () => {
+        it("should provide status for keys not in propStatus", () => {
+            jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+                generationStage: generate_component_response_1.GenerationStage.COMPLETE,
+            });
+            jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                component: createMockComponent({ name: "John" }),
+            }));
+            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, null,
+                react_2.default.createElement(TestHookComponent, { testKey: "nonexistent" })));
+            const keyStatus = JSON.parse(react_1.screen.getByTestId("key-status").textContent);
+            expect(keyStatus.isPending).toBe(true);
         });
     });
-    describe("Edge Cases", () => {
-        it("should handle null data gracefully", () => {
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: null },
-                react_2.default.createElement(TestHookComponent, null)));
-            expect(react_1.screen.getByTestId("data")).toHaveTextContent("null");
-        });
-        it("should handle undefined data gracefully", () => {
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: undefined },
-                react_2.default.createElement(TestHookComponent, null)));
-            expect(react_1.screen.getByTestId("data")).toHaveTextContent("");
-        });
-        it("should handle array data", () => {
-            const arrayData = ["item1", "item2"];
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: arrayData },
-                react_2.default.createElement(TestHookComponent, null)));
-            expect(react_1.screen.getByTestId("data")).toHaveTextContent(JSON.stringify(arrayData));
-        });
-        it("should handle primitive data types", () => {
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: "string data" },
-                react_2.default.createElement(TestHookComponent, null)));
-            expect(react_1.screen.getByTestId("data")).toHaveTextContent('"string data"');
-        });
-        it("should fallback to default status for unknown keys", () => {
-            const testData = { name: "John" };
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: testData },
-                react_2.default.createElement(TestHookComponent, { testKey: "unknown-key" })));
-            const keyStatus = JSON.parse(react_1.screen.getByTestId("key-status").textContent ?? "{}");
-            // Should fallback to default status
-            expect(keyStatus.isSuccess).toBe(true);
+    describe("Compound Components with Keys", () => {
+        it("should render loading for specific key when pending", () => {
+            jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+                generationStage: generate_component_response_1.GenerationStage.STREAMING_RESPONSE,
+            });
+            jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                component: createMockComponent({
+                    name: "Partial",
+                    age: 25,
+                }),
+            }));
+            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, null,
+                react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Streaming, { streamKey: "name" },
+                    react_2.default.createElement("div", { "data-testid": "name-loading" }, "Name Loading...")),
+                react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Streaming, { streamKey: "age" },
+                    react_2.default.createElement("div", { "data-testid": "age-loading" }, "Age Loading...")),
+                react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Success, { streamKey: "name" },
+                    react_2.default.createElement("div", { "data-testid": "name-complete" }, "Name Complete!"))));
+            // Both props should be loading since they're in streaming stage
+            expect(react_1.screen.getByTestId("name-loading")).toBeInTheDocument();
+            expect(react_1.screen.getByTestId("age-loading")).toBeInTheDocument();
+            expect(react_1.screen.queryByTestId("name-complete")).not.toBeInTheDocument();
         });
     });
-    describe("Component Attributes", () => {
-        it("should add correct data attributes to components", () => {
-            const streamStatus = {
-                isPending: true,
-                isStreaming: false,
-                isSuccess: false,
-                isError: false,
-            };
-            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, { data: null, streamStatus: streamStatus },
-                react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Loading, { className: "loading-class" },
-                    react_2.default.createElement("div", null, "Loading..."))));
-            const loadingElement = react_1.screen.getByText("Loading...").parentElement;
-            expect(loadingElement).toHaveAttribute("data-stream-key", "default");
-            expect(loadingElement).toHaveAttribute("data-stream-state", "loading");
+    describe("Styling", () => {
+        it("should apply className to loading component", () => {
+            jest.mocked(tambo_thread_provider_1.useTamboThread).mockReturnValue({
+                generationStage: generate_component_response_1.GenerationStage.STREAMING_RESPONSE,
+            });
+            jest.mocked(use_current_message_1.useTamboCurrentMessage).mockReturnValue(createMockMessage({
+                component: createMockComponent({ title: "Partial" }),
+            }));
+            (0, react_1.render)(react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider, null,
+                react_2.default.createElement(tambo_prop_stream_provider_1.TamboPropStreamProvider.Streaming, { className: "loading-class" },
+                    react_2.default.createElement("div", { "data-testid": "loading" }, "Loading..."))));
+            const loadingElement = react_1.screen.getByTestId("loading").parentElement;
             expect(loadingElement).toHaveClass("loading-class");
         });
     });