@tambo-ai/react 0.19.3 → 0.19.5

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

@@ -49,26 +49,12 @@ function useTamboComponentState(keyName, initialValue, debounceTime = 500) {
     ]);
     // Create debounced save function for efficient server synchronization
     const debouncedServerWrite = (0, use_debounce_1.useDebouncedCallback)(async (newValue) => {
-        if (!message) {
-            console.warn(`Cannot update missing message ${messageId} for state key "${keyName}"`);
-            return;
-        }
         setIsPending(true);
         try {
-            const messageUpdate = {
-                ...message,
-                componentState: {
-                    ...message.componentState,
-                    [keyName]: newValue,
-                },
-            };
             const componentStateUpdate = {
                 state: { [keyName]: newValue },
             };
-            await Promise.all([
-                updateThreadMessage(messageId, messageUpdate, false),
-                client.beta.threads.messages.updateComponentState(threadId, messageId, componentStateUpdate),
-            ]);
+            await client.beta.threads.messages.updateComponentState(threadId, messageId, componentStateUpdate);
         }
         catch (err) {
             console.error(`Failed to save component state for key "${keyName}":`, err);
@@ -127,11 +113,19 @@ function useTamboComponentState(keyName, initialValue, debounceTime = 500) {
         // 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}"`);
         }
-    }, [debouncedServerWrite, message, messageId, keyName]);
+    }, [message, debouncedServerWrite, keyName, updateThreadMessage, messageId]);
     // Ensure pending changes are flushed on unmount
     (0, react_1.useEffect)(() => {
         return () => {

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

@@ -1 +1 @@
-{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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 { threadId, messageId } = useTamboMessageContext();\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const message = useTamboCurrentMessage();\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    if (!message) {\n      console.warn(\n        `Cannot update missing message ${messageId} for state key \"${keyName}\"`,\n      );\n      return;\n    }\n\n    setIsPending(true);\n    try {\n      const messageUpdate = {\n        ...message,\n        componentState: {\n          ...message.componentState,\n          [keyName]: newValue,\n        },\n      };\n\n      const componentStateUpdate = {\n        state: { [keyName]: newValue },\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.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      } else {\n        console.warn(\n          `Cannot update server for missing message ${messageId} with key \"${keyName}\"`,\n        );\n      }\n    },\n    [debouncedServerWrite, message, messageId, keyName],\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"]}
+{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":";;AA0DA,wDA0KC;AApOD,iCAAyD;AACzD,+CAAoD;AACpD,4CAA8D;AAC9D,+DAG+B;AAmD/B,+CAA+C;AAC/C,SAAgB,sBAAsB,CACpC,OAAe,EACf,YAAgB,EAChB,YAAY,GAAG,GAAG;IAElB,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,4CAAsB,GAAE,CAAC;IACzD,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAA,0BAAc,GAAE,CAAC;IACjD,MAAM,MAAM,GAAG,IAAA,0BAAc,GAAE,CAAC;IAChC,MAAM,OAAO,GAAG,IAAA,4CAAsB,GAAE,CAAC;IAEzC,2BAA2B;IAC3B,MAAM,CAAC,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC1D,sBAAsB;IACtB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAC1C,kBAAkB,CACnB,CAAC;IACF,wBAAwB;IACxB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,uEAAuE;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAW,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9D,2CAA2C;IAC3C,MAAM,gBAAgB,GACpB,CAAC,eAAe;QAChB,OAAO;QACP,kBAAkB,KAAK,SAAS;QAChC,CAAC,CAAC,OAAO,CAAC,cAAc,IAAI,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;IAEpE,+EAA+E;IAC/E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,cAAc,IAAI,OAAO,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;YACjE,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,CAAC,OAAO,CAAM,CAAC;YAE1D,iEAAiE;YACjE,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;gBAC3B,aAAa,CAAC,YAAY,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;QACD,0EAA0E;aACrE,IACH,kBAAkB,KAAK,SAAS;YAChC,CAAC,UAAU;YACX,aAAa,KAAK,IAAI,EACtB,CAAC;YACD,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EAAE;QACD,OAAO;QACP,OAAO,EAAE,cAAc;QACvB,kBAAkB;QAClB,aAAa;QACb,UAAU;KACX,CAAC,CAAC;IAEH,sEAAsE;IACtE,MAAM,oBAAoB,GAAG,IAAA,mCAAoB,EAAC,KAAK,EAAE,QAAW,EAAE,EAAE;QACtE,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC;YACH,MAAM,oBAAoB,GAAG;gBAC3B,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE;aAC/B,CAAC;YAEF,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CACrD,QAAQ,EACR,SAAS,EACT,oBAAoB,CACrB,CAAC;QACJ,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CACX,2CAA2C,OAAO,IAAI,EACtD,GAAG,CACJ,CAAC;QACJ,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,6CAA6C;IAC7C,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC7C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CACV,+CAA+C,SAAS,cAAc,OAAO,GAAG,CACjF,CAAC;YACF,OAAO;QACT,CAAC;QAED,IAAI,CAAC;YACH,MAAM,aAAa,GAAG;gBACpB,GAAG,OAAO;gBACV,cAAc,EAAE;oBACd,GAAG,OAAO,CAAC,cAAc;oBACzB,CAAC,OAAO,CAAC,EAAE,kBAAkB;iBAC9B;aACF,CAAC;YAEF,MAAM,oBAAoB,GAAG;gBAC3B,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,kBAAkB,EAAE;aACzC,CAAC;YAEF,MAAM,OAAO,CAAC,GAAG,CAAC;gBAChB,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,CAAC;gBACpD,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAC/C,QAAQ,EACR,SAAS,EACT,oBAAoB,CACrB;aACF,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CACV,iDAAiD,OAAO,IAAI,EAC5D,GAAG,CACJ,CAAC;QACJ,CAAC;IACH,CAAC,EAAE;QACD,kBAAkB;QAClB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ;QAC5B,OAAO;QACP,OAAO;QACP,SAAS;QACT,QAAQ;QACR,mBAAmB;KACpB,CAAC,CAAC;IAEH,2CAA2C;IAC3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,EAAE,CAAC;YACrB,eAAe,EAAE,CAAC;YAClB,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAExC,uCAAuC;IACvC,sEAAsE;IACtE,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,QAAW,EAAE,EAAE;QACd,wCAAwC;QACxC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,aAAa,CAAC,QAAQ,CAAC,CAAC;QAExB,mDAAmD;QACnD,IAAI,OAAO,EAAE,CAAC;YACZ,oBAAoB,CAAC,QAAQ,CAAC,CAAC;YAC/B,MAAM,aAAa,GAAG;gBACpB,GAAG,OAAO;gBACV,cAAc,EAAE;oBACd,GAAG,OAAO,CAAC,cAAc;oBACzB,CAAC,OAAO,CAAC,EAAE,QAAQ;iBACpB;aACF,CAAC;YAEF,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC;QACvD,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CACV,4CAA4C,SAAS,cAAc,OAAO,GAAG,CAC9E,CAAC;QACJ,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,mBAAmB,EAAE,SAAS,CAAC,CACzE,CAAC;IAEF,gDAAgD;IAChD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,oDAAoD;IACpD,OAAO,CAAC,UAAe,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;AACpD,CAAC","sourcesContent":["import { 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 { threadId, messageId } = useTamboMessageContext();\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const message = useTamboCurrentMessage();\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/providers/tambo-client-provider.d.ts

@@ -3,11 +3,12 @@ import { QueryClient } from "@tanstack/react-query";
 import React, { PropsWithChildren } from "react";
 export interface TamboClientProviderProps {
     /**
-     * The URL of the Tambo API (used for local development and debugging)
+     * The URL of the Tambo API (only used for local development and debugging)
      */
     tamboUrl?: string;
     /**
-     * The API key for the Tambo API
+     * The API key for the Tambo API. This typically comes from a variable like
+     * `process.env.NEXT_PUBLIC_TAMBO_API_KEY`
      */
     apiKey: string;
     /**

package/dist/providers/tambo-client-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-client-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,OAA0B,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACxC;AAED,MAAM,WAAW,uBAAuB;IACtC,yBAAyB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CACxC,iBAAiB,CAAC,wBAAwB,CAAC,CAgB5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,eAM1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,mBAQ/B,CAAC"}
+{"version":3,"file":"tambo-client-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,OAA0B,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACxC;AAED,MAAM,WAAW,uBAAuB;IACtC,yBAAyB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CACxC,iBAAiB,CAAC,wBAAwB,CAAC,CAgB5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,eAM1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,mBAQ/B,CAAC"}

package/dist/providers/tambo-client-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-client-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-client-provider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8EAAkE;AAClE,uDAAoD;AACpD,+CAA0E;AAwB1E,MAAM,kBAAkB,GAAG,IAAA,qBAAa,EACtC,SAAS,CACV,CAAC;AAEF;;;;;;;;;GASG;AACI,MAAM,mBAAmB,GAE5B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;IAClD,MAAM,WAAW,GAAkB,EAAE,MAAM,EAAE,CAAC;IAC9C,IAAI,QAAQ,EAAE,CAAC;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC;IACD,IAAI,WAAW,EAAE,CAAC;QAChB,WAAW,CAAC,WAAW,GAAG,WAAW,CAAC;IACxC,CAAC;IACD,MAAM,CAAC,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,IAAI,wBAAO,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,IAAI,yBAAW,EAAE,CAAC,CAAC;IACxD,OAAO,CACL,8BAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,IACxD,QAAQ,CACmB,CAC/B,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,mBAAmB,uBAiB9B;AAEF;;;;GAIG;AACI,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IACD,OAAO,OAAO,CAAC,MAAM,CAAC;AACxB,CAAC,CAAC;AANW,QAAA,cAAc,kBAMzB;AAEF;;;;;GAKG;AACI,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC,WAAW,CAAC;AAC7B,CAAC,CAAC;AARW,QAAA,mBAAmB,uBAQ9B","sourcesContent":["import TamboAI, { ClientOptions } from \"@tambo-ai/typescript-sdk\";\nimport { QueryClient } from \"@tanstack/react-query\";\nimport React, { createContext, PropsWithChildren, useState } from \"react\";\n\nexport interface TamboClientProviderProps {\n  /**\n   * The URL of the Tambo API (used for local development and debugging)\n   */\n  tamboUrl?: string;\n  /**\n   * The API key for the Tambo API\n   */\n  apiKey: string;\n  /**\n   * The environment to use for the Tambo API\n   */\n  environment?: \"production\" | \"staging\";\n}\n\nexport interface TamboClientContextProps {\n  /** The TamboAI client */\n  client: TamboAI;\n  /** The tambo-specific query client */\n  queryClient: QueryClient;\n}\n\nconst TamboClientContext = createContext<TamboClientContextProps | undefined>(\n  undefined,\n);\n\n/**\n * The TamboClientProvider is a React provider that provides a TamboAI client\n * and a query client to the descendants of the provider.\n * @param props - The props for the TamboClientProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboClientProvider component\n */\nexport const TamboClientProvider: React.FC<\n  PropsWithChildren<TamboClientProviderProps>\n> = ({ children, tamboUrl, apiKey, environment }) => {\n  const tamboConfig: ClientOptions = { apiKey };\n  if (tamboUrl) {\n    tamboConfig.baseURL = tamboUrl;\n  }\n  if (environment) {\n    tamboConfig.environment = environment;\n  }\n  const [client] = useState(() => new TamboAI(tamboConfig));\n  const [queryClient] = useState(() => new QueryClient());\n  return (\n    <TamboClientContext.Provider value={{ client, queryClient }}>\n      {children}\n    </TamboClientContext.Provider>\n  );\n};\n\n/**\n * The useTamboClient hook provides access to the TamboAI client\n * to the descendants of the TamboClientProvider.\n * @returns The TamboAI client\n */\nexport const useTamboClient = () => {\n  const context = React.useContext(TamboClientContext);\n  if (context === undefined) {\n    throw new Error(\"useTamboClient must be used within a TamboClientProvider\");\n  }\n  return context.client;\n};\n\n/**\n * The useTamboQueryClient hook provides access to the tambo-specific query client\n * to the descendants of the TamboClientProvider.\n * @returns The tambo-specific query client\n * @private\n */\nexport const useTamboQueryClient = () => {\n  const context = React.useContext(TamboClientContext);\n  if (context === undefined) {\n    throw new Error(\n      \"useTamboQueryClient must be used within a TamboClientProvider\",\n    );\n  }\n  return context.queryClient;\n};\n"]}
+{"version":3,"file":"tambo-client-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-client-provider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8EAAkE;AAClE,uDAAoD;AACpD,+CAA0E;AAyB1E,MAAM,kBAAkB,GAAG,IAAA,qBAAa,EACtC,SAAS,CACV,CAAC;AAEF;;;;;;;;;GASG;AACI,MAAM,mBAAmB,GAE5B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;IAClD,MAAM,WAAW,GAAkB,EAAE,MAAM,EAAE,CAAC;IAC9C,IAAI,QAAQ,EAAE,CAAC;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC;IACD,IAAI,WAAW,EAAE,CAAC;QAChB,WAAW,CAAC,WAAW,GAAG,WAAW,CAAC;IACxC,CAAC;IACD,MAAM,CAAC,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,IAAI,wBAAO,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,IAAI,yBAAW,EAAE,CAAC,CAAC;IACxD,OAAO,CACL,8BAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,IACxD,QAAQ,CACmB,CAC/B,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,mBAAmB,uBAiB9B;AAEF;;;;GAIG;AACI,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IACD,OAAO,OAAO,CAAC,MAAM,CAAC;AACxB,CAAC,CAAC;AANW,QAAA,cAAc,kBAMzB;AAEF;;;;;GAKG;AACI,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC,WAAW,CAAC;AAC7B,CAAC,CAAC;AARW,QAAA,mBAAmB,uBAQ9B","sourcesContent":["import TamboAI, { ClientOptions } from \"@tambo-ai/typescript-sdk\";\nimport { QueryClient } from \"@tanstack/react-query\";\nimport React, { createContext, PropsWithChildren, useState } from \"react\";\n\nexport interface TamboClientProviderProps {\n  /**\n   * The URL of the Tambo API (only used for local development and debugging)\n   */\n  tamboUrl?: string;\n  /**\n   * The API key for the Tambo API. This typically comes from a variable like\n   * `process.env.NEXT_PUBLIC_TAMBO_API_KEY`\n   */\n  apiKey: string;\n  /**\n   * The environment to use for the Tambo API\n   */\n  environment?: \"production\" | \"staging\";\n}\n\nexport interface TamboClientContextProps {\n  /** The TamboAI client */\n  client: TamboAI;\n  /** The tambo-specific query client */\n  queryClient: QueryClient;\n}\n\nconst TamboClientContext = createContext<TamboClientContextProps | undefined>(\n  undefined,\n);\n\n/**\n * The TamboClientProvider is a React provider that provides a TamboAI client\n * and a query client to the descendants of the provider.\n * @param props - The props for the TamboClientProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboClientProvider component\n */\nexport const TamboClientProvider: React.FC<\n  PropsWithChildren<TamboClientProviderProps>\n> = ({ children, tamboUrl, apiKey, environment }) => {\n  const tamboConfig: ClientOptions = { apiKey };\n  if (tamboUrl) {\n    tamboConfig.baseURL = tamboUrl;\n  }\n  if (environment) {\n    tamboConfig.environment = environment;\n  }\n  const [client] = useState(() => new TamboAI(tamboConfig));\n  const [queryClient] = useState(() => new QueryClient());\n  return (\n    <TamboClientContext.Provider value={{ client, queryClient }}>\n      {children}\n    </TamboClientContext.Provider>\n  );\n};\n\n/**\n * The useTamboClient hook provides access to the TamboAI client\n * to the descendants of the TamboClientProvider.\n * @returns The TamboAI client\n */\nexport const useTamboClient = () => {\n  const context = React.useContext(TamboClientContext);\n  if (context === undefined) {\n    throw new Error(\"useTamboClient must be used within a TamboClientProvider\");\n  }\n  return context.client;\n};\n\n/**\n * The useTamboQueryClient hook provides access to the tambo-specific query client\n * to the descendants of the TamboClientProvider.\n * @returns The tambo-specific query client\n * @private\n */\nexport const useTamboQueryClient = () => {\n  const context = React.useContext(TamboClientContext);\n  if (context === undefined) {\n    throw new Error(\n      \"useTamboQueryClient must be used within a TamboClientProvider\",\n    );\n  }\n  return context.queryClient;\n};\n"]}

package/dist/providers/tambo-provider.d.ts

@@ -1,3 +1,4 @@
+import "@tambo-ai/typescript-sdk/shims/web";
 import React, { PropsWithChildren } from "react";
 import { TamboClientContextProps, TamboClientProviderProps } from "./tambo-client-provider";
 import { TamboComponentContextProps } from "./tambo-component-provider";

package/dist/providers/tambo-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAC5E,OAAO,EACL,uBAAuB,EAEvB,wBAAwB,EAGzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,0BAA0B,EAG3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,uBAAuB,EAGxB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,iBAAiB,CAAC,wBAAwB,GAAG,0BAA0B,CAAC,CAiBzE,CAAC;AACF,KAAK,iBAAiB,GAAG,uBAAuB,GAC9C,uBAAuB,GACvB,0BAA0B,CAAC;AAE7B,eAAO,MAAM,YAAY,kCAExB,CAAC;AA6BF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,yBAEpB,CAAC"}
+{"version":3,"file":"tambo-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAC5E,OAAO,EACL,uBAAuB,EAEvB,wBAAwB,EAGzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,0BAA0B,EAG3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,uBAAuB,EAGxB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,iBAAiB,CAAC,wBAAwB,GAAG,0BAA0B,CAAC,CAsBzE,CAAC;AACF,KAAK,iBAAiB,GAAG,uBAAuB,GAC9C,uBAAuB,GACvB,0BAA0B,CAAC;AAE7B,eAAO,MAAM,YAAY,kCAExB,CAAC;AA6BF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,yBAEpB,CAAC"}

package/dist/providers/tambo-provider.js

@@ -35,6 +35,8 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTambo = exports.TamboContext = exports.TamboProvider = void 0;
+// Use to workaround some TurboPack issues. Normally this is auto-detected.
+require("@tambo-ai/typescript-sdk/shims/web");
 const react_1 = __importStar(require("react"));
 const tambo_client_provider_1 = require("./tambo-client-provider");
 const tambo_component_provider_1 = require("./tambo-component-provider");
@@ -52,6 +54,10 @@ const tambo_thread_provider_1 = require("./tambo-thread-provider");
  * @returns The TamboProvider component
  */
 const TamboProvider = ({ children, tamboUrl, apiKey, components, environment }) => {
+    // explode if we're not in a browser
+    if (typeof window === "undefined") {
+        throw new Error("TamboProvider must be used within a browser");
+    }
     return (react_1.default.createElement(tambo_client_provider_1.TamboClientProvider, { tamboUrl: tamboUrl, apiKey: apiKey, environment: environment },
         react_1.default.createElement(tambo_registry_provider_1.TamboRegistryProvider, { components: components },
             react_1.default.createElement(tambo_thread_provider_1.TamboThreadProvider, null,

package/dist/providers/tambo-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACb,+CAA4E;AAC5E,mEAMiC;AACjC,yEAIoC;AACpC,uEAGmC;AACnC,mEAIiC;AAEjC;;;;;;;;;;GAUG;AACI,MAAM,aAAa,GAEtB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9D,OAAO,CACL,8BAAC,2CAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW;QAExB,8BAAC,+CAAqB,IAAC,UAAU,EAAE,UAAU;YAC3C,8BAAC,2CAAmB;gBAClB,8BAAC,iDAAsB;oBACrB,8BAAC,sBAAsB,QAAE,QAAQ,CAA0B,CACpC,CACL,CACA,CACJ,CACvB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,aAAa,iBAkBxB;AAKW,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,EAAuB,CACxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,IAAA,sCAAc,GAAE,CAAC;IACjC,MAAM,MAAM,GAAG,IAAA,sCAAc,GAAE,CAAC;IAChC,MAAM,WAAW,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAC1C,MAAM,iBAAiB,GAAG,IAAA,4CAAiB,GAAE,CAAC;IAE9C,OAAO,CACL,8BAAC,oBAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,MAAM;YACN,WAAW;YACX,GAAG,iBAAiB;YACpB,GAAG,OAAO;SACX,IAEA,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACI,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;AAClC,CAAC,CAAC;AAFW,QAAA,QAAQ,YAEnB","sourcesContent":["\"use client\";\nimport React, { PropsWithChildren, createContext, useContext } from \"react\";\nimport {\n  TamboClientContextProps,\n  TamboClientProvider,\n  TamboClientProviderProps,\n  useTamboClient,\n  useTamboQueryClient,\n} from \"./tambo-client-provider\";\nimport {\n  TamboComponentContextProps,\n  TamboComponentProvider,\n  useTamboComponent,\n} from \"./tambo-component-provider\";\nimport {\n  TamboRegistryProvider,\n  TamboRegistryProviderProps,\n} from \"./tambo-registry-provider\";\nimport {\n  TamboThreadContextProps,\n  TamboThreadProvider,\n  useTamboThread,\n} from \"./tambo-thread-provider\";\n\n/**\n * The TamboProvider gives full access to the whole Tambo API. This includes the\n * TamboAI client, the component registry, and the current thread context.\n * @param props - The props for the TamboProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.components - The components to register\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboProvider component\n */\nexport const TamboProvider: React.FC<\n  PropsWithChildren<TamboClientProviderProps & TamboRegistryProviderProps>\n> = ({ children, tamboUrl, apiKey, components, environment }) => {\n  return (\n    <TamboClientProvider\n      tamboUrl={tamboUrl}\n      apiKey={apiKey}\n      environment={environment}\n    >\n      <TamboRegistryProvider components={components}>\n        <TamboThreadProvider>\n          <TamboComponentProvider>\n            <TamboCompositeProvider>{children}</TamboCompositeProvider>\n          </TamboComponentProvider>\n        </TamboThreadProvider>\n      </TamboRegistryProvider>\n    </TamboClientProvider>\n  );\n};\ntype TamboContextProps = TamboClientContextProps &\n  TamboThreadContextProps &\n  TamboComponentContextProps;\n\nexport const TamboContext = createContext<TamboContextProps>(\n  {} as TamboContextProps,\n);\n\n/**\n * TamboCompositeProvider is a provider that combines the TamboClient,\n * TamboThread, and TamboComponent providers\n * @param props - The props for the TamboCompositeProvider\n * @param props.children - The children to wrap\n * @returns The wrapped component\n */\nconst TamboCompositeProvider: React.FC<PropsWithChildren> = ({ children }) => {\n  const threads = useTamboThread();\n  const client = useTamboClient();\n  const queryClient = useTamboQueryClient();\n  const componentRegistry = useTamboComponent();\n\n  return (\n    <TamboContext.Provider\n      value={{\n        client,\n        queryClient,\n        ...componentRegistry,\n        ...threads,\n      }}\n    >\n      {children}\n    </TamboContext.Provider>\n  );\n};\n\n/**\n * The useTambo hook provides access to the Tambo API. This is the primary entrypoint\n * for the Tambo React SDK.\n *\n * This includes the TamboAI client, the component registry, and the current thread context.\n * @returns The Tambo API\n */\nexport const useTambo = () => {\n  return useContext(TamboContext);\n};\n"]}
+{"version":3,"file":"tambo-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACb,2EAA2E;AAC3E,8CAA4C;AAC5C,+CAA4E;AAC5E,mEAMiC;AACjC,yEAIoC;AACpC,uEAGmC;AACnC,mEAIiC;AAEjC;;;;;;;;;;GAUG;AACI,MAAM,aAAa,GAEtB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9D,oCAAoC;IACpC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IAED,OAAO,CACL,8BAAC,2CAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW;QAExB,8BAAC,+CAAqB,IAAC,UAAU,EAAE,UAAU;YAC3C,8BAAC,2CAAmB;gBAClB,8BAAC,iDAAsB;oBACrB,8BAAC,sBAAsB,QAAE,QAAQ,CAA0B,CACpC,CACL,CACA,CACJ,CACvB,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,aAAa,iBAuBxB;AAKW,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,EAAuB,CACxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,IAAA,sCAAc,GAAE,CAAC;IACjC,MAAM,MAAM,GAAG,IAAA,sCAAc,GAAE,CAAC;IAChC,MAAM,WAAW,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAC1C,MAAM,iBAAiB,GAAG,IAAA,4CAAiB,GAAE,CAAC;IAE9C,OAAO,CACL,8BAAC,oBAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,MAAM;YACN,WAAW;YACX,GAAG,iBAAiB;YACpB,GAAG,OAAO;SACX,IAEA,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACI,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;AAClC,CAAC,CAAC;AAFW,QAAA,QAAQ,YAEnB","sourcesContent":["\"use client\";\n// Use to workaround some TurboPack issues. Normally this is auto-detected.\nimport \"@tambo-ai/typescript-sdk/shims/web\";\nimport React, { PropsWithChildren, createContext, useContext } from \"react\";\nimport {\n  TamboClientContextProps,\n  TamboClientProvider,\n  TamboClientProviderProps,\n  useTamboClient,\n  useTamboQueryClient,\n} from \"./tambo-client-provider\";\nimport {\n  TamboComponentContextProps,\n  TamboComponentProvider,\n  useTamboComponent,\n} from \"./tambo-component-provider\";\nimport {\n  TamboRegistryProvider,\n  TamboRegistryProviderProps,\n} from \"./tambo-registry-provider\";\nimport {\n  TamboThreadContextProps,\n  TamboThreadProvider,\n  useTamboThread,\n} from \"./tambo-thread-provider\";\n\n/**\n * The TamboProvider gives full access to the whole Tambo API. This includes the\n * TamboAI client, the component registry, and the current thread context.\n * @param props - The props for the TamboProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.components - The components to register\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboProvider component\n */\nexport const TamboProvider: React.FC<\n  PropsWithChildren<TamboClientProviderProps & TamboRegistryProviderProps>\n> = ({ children, tamboUrl, apiKey, components, environment }) => {\n  // explode if we're not in a browser\n  if (typeof window === \"undefined\") {\n    throw new Error(\"TamboProvider must be used within a browser\");\n  }\n\n  return (\n    <TamboClientProvider\n      tamboUrl={tamboUrl}\n      apiKey={apiKey}\n      environment={environment}\n    >\n      <TamboRegistryProvider components={components}>\n        <TamboThreadProvider>\n          <TamboComponentProvider>\n            <TamboCompositeProvider>{children}</TamboCompositeProvider>\n          </TamboComponentProvider>\n        </TamboThreadProvider>\n      </TamboRegistryProvider>\n    </TamboClientProvider>\n  );\n};\ntype TamboContextProps = TamboClientContextProps &\n  TamboThreadContextProps &\n  TamboComponentContextProps;\n\nexport const TamboContext = createContext<TamboContextProps>(\n  {} as TamboContextProps,\n);\n\n/**\n * TamboCompositeProvider is a provider that combines the TamboClient,\n * TamboThread, and TamboComponent providers\n * @param props - The props for the TamboCompositeProvider\n * @param props.children - The children to wrap\n * @returns The wrapped component\n */\nconst TamboCompositeProvider: React.FC<PropsWithChildren> = ({ children }) => {\n  const threads = useTamboThread();\n  const client = useTamboClient();\n  const queryClient = useTamboQueryClient();\n  const componentRegistry = useTamboComponent();\n\n  return (\n    <TamboContext.Provider\n      value={{\n        client,\n        queryClient,\n        ...componentRegistry,\n        ...threads,\n      }}\n    >\n      {children}\n    </TamboContext.Provider>\n  );\n};\n\n/**\n * The useTambo hook provides access to the Tambo API. This is the primary entrypoint\n * for the Tambo React SDK.\n *\n * This includes the TamboAI client, the component registry, and the current thread context.\n * @returns The Tambo API\n */\nexport const useTambo = () => {\n  return useContext(TamboContext);\n};\n"]}

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

@@ -46,26 +46,12 @@ export function useTamboComponentState(keyName, initialValue, debounceTime = 500
     ]);
     // Create debounced save function for efficient server synchronization
     const debouncedServerWrite = useDebouncedCallback(async (newValue) => {
-        if (!message) {
-            console.warn(`Cannot update missing message ${messageId} for state key "${keyName}"`);
-            return;
-        }
         setIsPending(true);
         try {
-            const messageUpdate = {
-                ...message,
-                componentState: {
-                    ...message.componentState,
-                    [keyName]: newValue,
-                },
-            };
             const componentStateUpdate = {
                 state: { [keyName]: newValue },
             };
-            await Promise.all([
-                updateThreadMessage(messageId, messageUpdate, false),
-                client.beta.threads.messages.updateComponentState(threadId, messageId, componentStateUpdate),
-            ]);
+            await client.beta.threads.messages.updateComponentState(threadId, messageId, componentStateUpdate);
         }
         catch (err) {
             console.error(`Failed to save component state for key "${keyName}":`, err);
@@ -124,11 +110,19 @@ export function useTamboComponentState(keyName, initialValue, debounceTime = 500
         // 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}"`);
         }
-    }, [debouncedServerWrite, message, messageId, keyName]);
+    }, [message, debouncedServerWrite, keyName, updateThreadMessage, messageId]);
     // Ensure pending changes are flushed on unmount
     useEffect(() => {
         return () => {

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

@@ -1 +1 @@
-{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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 { threadId, messageId } = useTamboMessageContext();\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const message = useTamboCurrentMessage();\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    if (!message) {\n      console.warn(\n        `Cannot update missing message ${messageId} for state key \"${keyName}\"`,\n      );\n      return;\n    }\n\n    setIsPending(true);\n    try {\n      const messageUpdate = {\n        ...message,\n        componentState: {\n          ...message.componentState,\n          [keyName]: newValue,\n        },\n      };\n\n      const componentStateUpdate = {\n        state: { [keyName]: newValue },\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.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      } else {\n        console.warn(\n          `Cannot update server for missing message ${messageId} with key \"${keyName}\"`,\n        );\n      }\n    },\n    [debouncedServerWrite, message, messageId, keyName],\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"]}
+{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAmD/B,+CAA+C;AAC/C,MAAM,UAAU,sBAAsB,CACpC,OAAe,EACf,YAAgB,EAChB,YAAY,GAAG,GAAG;IAElB,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,sBAAsB,EAAE,CAAC;IACzD,MAAM,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE,CAAC;IACjD,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAChC,MAAM,OAAO,GAAG,sBAAsB,EAAE,CAAC;IAEzC,2BAA2B;IAC3B,MAAM,CAAC,kBAAkB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC1D,sBAAsB;IACtB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,kBAAkB,CACnB,CAAC;IACF,wBAAwB;IACxB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,uEAAuE;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,2CAA2C;IAC3C,MAAM,gBAAgB,GACpB,CAAC,eAAe;QAChB,OAAO;QACP,kBAAkB,KAAK,SAAS;QAChC,CAAC,CAAC,OAAO,CAAC,cAAc,IAAI,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;IAEpE,+EAA+E;IAC/E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,cAAc,IAAI,OAAO,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;YACjE,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,CAAC,OAAO,CAAM,CAAC;YAE1D,iEAAiE;YACjE,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;gBAC3B,aAAa,CAAC,YAAY,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;QACD,0EAA0E;aACrE,IACH,kBAAkB,KAAK,SAAS;YAChC,CAAC,UAAU;YACX,aAAa,KAAK,IAAI,EACtB,CAAC;YACD,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EAAE;QACD,OAAO;QACP,OAAO,EAAE,cAAc;QACvB,kBAAkB;QAClB,aAAa;QACb,UAAU;KACX,CAAC,CAAC;IAEH,sEAAsE;IACtE,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,KAAK,EAAE,QAAW,EAAE,EAAE;QACtE,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC;YACH,MAAM,oBAAoB,GAAG;gBAC3B,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE;aAC/B,CAAC;YAEF,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CACrD,QAAQ,EACR,SAAS,EACT,oBAAoB,CACrB,CAAC;QACJ,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CACX,2CAA2C,OAAO,IAAI,EACtD,GAAG,CACJ,CAAC;QACJ,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,6CAA6C;IAC7C,MAAM,eAAe,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAC7C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CACV,+CAA+C,SAAS,cAAc,OAAO,GAAG,CACjF,CAAC;YACF,OAAO;QACT,CAAC;QAED,IAAI,CAAC;YACH,MAAM,aAAa,GAAG;gBACpB,GAAG,OAAO;gBACV,cAAc,EAAE;oBACd,GAAG,OAAO,CAAC,cAAc;oBACzB,CAAC,OAAO,CAAC,EAAE,kBAAkB;iBAC9B;aACF,CAAC;YAEF,MAAM,oBAAoB,GAAG;gBAC3B,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,kBAAkB,EAAE;aACzC,CAAC;YAEF,MAAM,OAAO,CAAC,GAAG,CAAC;gBAChB,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,CAAC;gBACpD,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAC/C,QAAQ,EACR,SAAS,EACT,oBAAoB,CACrB;aACF,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CACV,iDAAiD,OAAO,IAAI,EAC5D,GAAG,CACJ,CAAC;QACJ,CAAC;IACH,CAAC,EAAE;QACD,kBAAkB;QAClB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ;QAC5B,OAAO;QACP,OAAO;QACP,SAAS;QACT,QAAQ;QACR,mBAAmB;KACpB,CAAC,CAAC;IAEH,2CAA2C;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,EAAE,CAAC;YACrB,eAAe,EAAE,CAAC;YAClB,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAExC,uCAAuC;IACvC,sEAAsE;IACtE,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,QAAW,EAAE,EAAE;QACd,wCAAwC;QACxC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,aAAa,CAAC,QAAQ,CAAC,CAAC;QAExB,mDAAmD;QACnD,IAAI,OAAO,EAAE,CAAC;YACZ,oBAAoB,CAAC,QAAQ,CAAC,CAAC;YAC/B,MAAM,aAAa,GAAG;gBACpB,GAAG,OAAO;gBACV,cAAc,EAAE;oBACd,GAAG,OAAO,CAAC,cAAc;oBACzB,CAAC,OAAO,CAAC,EAAE,QAAQ;iBACpB;aACF,CAAC;YAEF,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC;QACvD,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CACV,4CAA4C,SAAS,cAAc,OAAO,GAAG,CAC9E,CAAC;QACJ,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,mBAAmB,EAAE,SAAS,CAAC,CACzE,CAAC;IAEF,gDAAgD;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,oDAAoD;IACpD,OAAO,CAAC,UAAe,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;AACpD,CAAC","sourcesContent":["import { 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 { threadId, messageId } = useTamboMessageContext();\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const message = useTamboCurrentMessage();\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/esm/providers/tambo-client-provider.d.ts

@@ -3,11 +3,12 @@ import { QueryClient } from "@tanstack/react-query";
 import React, { PropsWithChildren } from "react";
 export interface TamboClientProviderProps {
     /**
-     * The URL of the Tambo API (used for local development and debugging)
+     * The URL of the Tambo API (only used for local development and debugging)
      */
     tamboUrl?: string;
     /**
-     * The API key for the Tambo API
+     * The API key for the Tambo API. This typically comes from a variable like
+     * `process.env.NEXT_PUBLIC_TAMBO_API_KEY`
      */
     apiKey: string;
     /**

package/esm/providers/tambo-client-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-client-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,OAA0B,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACxC;AAED,MAAM,WAAW,uBAAuB;IACtC,yBAAyB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CACxC,iBAAiB,CAAC,wBAAwB,CAAC,CAgB5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,eAM1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,mBAQ/B,CAAC"}
+{"version":3,"file":"tambo-client-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,OAA0B,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACxC;AAED,MAAM,WAAW,uBAAuB;IACtC,yBAAyB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CACxC,iBAAiB,CAAC,wBAAwB,CAAC,CAgB5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,eAM1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,mBAQ/B,CAAC"}

package/esm/providers/tambo-client-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-client-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,OAA0B,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,aAAa,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAwB1E,MAAM,kBAAkB,GAAG,aAAa,CACtC,SAAS,CACV,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAE5B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;IAClD,MAAM,WAAW,GAAkB,EAAE,MAAM,EAAE,CAAC;IAC9C,IAAI,QAAQ,EAAE,CAAC;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC;IACD,IAAI,WAAW,EAAE,CAAC;QAChB,WAAW,CAAC,WAAW,GAAG,WAAW,CAAC;IACxC,CAAC;IACD,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,CAAC;IACxD,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,IACxD,QAAQ,CACmB,CAC/B,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IACD,OAAO,OAAO,CAAC,MAAM,CAAC;AACxB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC,WAAW,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["import TamboAI, { ClientOptions } from \"@tambo-ai/typescript-sdk\";\nimport { QueryClient } from \"@tanstack/react-query\";\nimport React, { createContext, PropsWithChildren, useState } from \"react\";\n\nexport interface TamboClientProviderProps {\n  /**\n   * The URL of the Tambo API (used for local development and debugging)\n   */\n  tamboUrl?: string;\n  /**\n   * The API key for the Tambo API\n   */\n  apiKey: string;\n  /**\n   * The environment to use for the Tambo API\n   */\n  environment?: \"production\" | \"staging\";\n}\n\nexport interface TamboClientContextProps {\n  /** The TamboAI client */\n  client: TamboAI;\n  /** The tambo-specific query client */\n  queryClient: QueryClient;\n}\n\nconst TamboClientContext = createContext<TamboClientContextProps | undefined>(\n  undefined,\n);\n\n/**\n * The TamboClientProvider is a React provider that provides a TamboAI client\n * and a query client to the descendants of the provider.\n * @param props - The props for the TamboClientProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboClientProvider component\n */\nexport const TamboClientProvider: React.FC<\n  PropsWithChildren<TamboClientProviderProps>\n> = ({ children, tamboUrl, apiKey, environment }) => {\n  const tamboConfig: ClientOptions = { apiKey };\n  if (tamboUrl) {\n    tamboConfig.baseURL = tamboUrl;\n  }\n  if (environment) {\n    tamboConfig.environment = environment;\n  }\n  const [client] = useState(() => new TamboAI(tamboConfig));\n  const [queryClient] = useState(() => new QueryClient());\n  return (\n    <TamboClientContext.Provider value={{ client, queryClient }}>\n      {children}\n    </TamboClientContext.Provider>\n  );\n};\n\n/**\n * The useTamboClient hook provides access to the TamboAI client\n * to the descendants of the TamboClientProvider.\n * @returns The TamboAI client\n */\nexport const useTamboClient = () => {\n  const context = React.useContext(TamboClientContext);\n  if (context === undefined) {\n    throw new Error(\"useTamboClient must be used within a TamboClientProvider\");\n  }\n  return context.client;\n};\n\n/**\n * The useTamboQueryClient hook provides access to the tambo-specific query client\n * to the descendants of the TamboClientProvider.\n * @returns The tambo-specific query client\n * @private\n */\nexport const useTamboQueryClient = () => {\n  const context = React.useContext(TamboClientContext);\n  if (context === undefined) {\n    throw new Error(\n      \"useTamboQueryClient must be used within a TamboClientProvider\",\n    );\n  }\n  return context.queryClient;\n};\n"]}
+{"version":3,"file":"tambo-client-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,OAA0B,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,aAAa,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAyB1E,MAAM,kBAAkB,GAAG,aAAa,CACtC,SAAS,CACV,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAE5B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;IAClD,MAAM,WAAW,GAAkB,EAAE,MAAM,EAAE,CAAC;IAC9C,IAAI,QAAQ,EAAE,CAAC;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC;IACD,IAAI,WAAW,EAAE,CAAC;QAChB,WAAW,CAAC,WAAW,GAAG,WAAW,CAAC;IACxC,CAAC;IACD,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,CAAC;IACxD,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,IACxD,QAAQ,CACmB,CAC/B,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IACD,OAAO,OAAO,CAAC,MAAM,CAAC;AACxB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC,WAAW,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["import TamboAI, { ClientOptions } from \"@tambo-ai/typescript-sdk\";\nimport { QueryClient } from \"@tanstack/react-query\";\nimport React, { createContext, PropsWithChildren, useState } from \"react\";\n\nexport interface TamboClientProviderProps {\n  /**\n   * The URL of the Tambo API (only used for local development and debugging)\n   */\n  tamboUrl?: string;\n  /**\n   * The API key for the Tambo API. This typically comes from a variable like\n   * `process.env.NEXT_PUBLIC_TAMBO_API_KEY`\n   */\n  apiKey: string;\n  /**\n   * The environment to use for the Tambo API\n   */\n  environment?: \"production\" | \"staging\";\n}\n\nexport interface TamboClientContextProps {\n  /** The TamboAI client */\n  client: TamboAI;\n  /** The tambo-specific query client */\n  queryClient: QueryClient;\n}\n\nconst TamboClientContext = createContext<TamboClientContextProps | undefined>(\n  undefined,\n);\n\n/**\n * The TamboClientProvider is a React provider that provides a TamboAI client\n * and a query client to the descendants of the provider.\n * @param props - The props for the TamboClientProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboClientProvider component\n */\nexport const TamboClientProvider: React.FC<\n  PropsWithChildren<TamboClientProviderProps>\n> = ({ children, tamboUrl, apiKey, environment }) => {\n  const tamboConfig: ClientOptions = { apiKey };\n  if (tamboUrl) {\n    tamboConfig.baseURL = tamboUrl;\n  }\n  if (environment) {\n    tamboConfig.environment = environment;\n  }\n  const [client] = useState(() => new TamboAI(tamboConfig));\n  const [queryClient] = useState(() => new QueryClient());\n  return (\n    <TamboClientContext.Provider value={{ client, queryClient }}>\n      {children}\n    </TamboClientContext.Provider>\n  );\n};\n\n/**\n * The useTamboClient hook provides access to the TamboAI client\n * to the descendants of the TamboClientProvider.\n * @returns The TamboAI client\n */\nexport const useTamboClient = () => {\n  const context = React.useContext(TamboClientContext);\n  if (context === undefined) {\n    throw new Error(\"useTamboClient must be used within a TamboClientProvider\");\n  }\n  return context.client;\n};\n\n/**\n * The useTamboQueryClient hook provides access to the tambo-specific query client\n * to the descendants of the TamboClientProvider.\n * @returns The tambo-specific query client\n * @private\n */\nexport const useTamboQueryClient = () => {\n  const context = React.useContext(TamboClientContext);\n  if (context === undefined) {\n    throw new Error(\n      \"useTamboQueryClient must be used within a TamboClientProvider\",\n    );\n  }\n  return context.queryClient;\n};\n"]}

package/esm/providers/tambo-provider.d.ts

@@ -1,3 +1,4 @@
+import "@tambo-ai/typescript-sdk/shims/web";
 import React, { PropsWithChildren } from "react";
 import { TamboClientContextProps, TamboClientProviderProps } from "./tambo-client-provider";
 import { TamboComponentContextProps } from "./tambo-component-provider";

package/esm/providers/tambo-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAC5E,OAAO,EACL,uBAAuB,EAEvB,wBAAwB,EAGzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,0BAA0B,EAG3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,uBAAuB,EAGxB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,iBAAiB,CAAC,wBAAwB,GAAG,0BAA0B,CAAC,CAiBzE,CAAC;AACF,KAAK,iBAAiB,GAAG,uBAAuB,GAC9C,uBAAuB,GACvB,0BAA0B,CAAC;AAE7B,eAAO,MAAM,YAAY,kCAExB,CAAC;AA6BF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,yBAEpB,CAAC"}
+{"version":3,"file":"tambo-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAC5E,OAAO,EACL,uBAAuB,EAEvB,wBAAwB,EAGzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,0BAA0B,EAG3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,uBAAuB,EAGxB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,iBAAiB,CAAC,wBAAwB,GAAG,0BAA0B,CAAC,CAsBzE,CAAC;AACF,KAAK,iBAAiB,GAAG,uBAAuB,GAC9C,uBAAuB,GACvB,0BAA0B,CAAC;AAE7B,eAAO,MAAM,YAAY,kCAExB,CAAC;AA6BF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,yBAEpB,CAAC"}

package/esm/providers/tambo-provider.js

@@ -1,4 +1,6 @@
 "use client";
+// Use to workaround some TurboPack issues. Normally this is auto-detected.
+import "@tambo-ai/typescript-sdk/shims/web";
 import React, { createContext, useContext } from "react";
 import { TamboClientProvider, useTamboClient, useTamboQueryClient, } from "./tambo-client-provider";
 import { TamboComponentProvider, useTamboComponent, } from "./tambo-component-provider";
@@ -16,6 +18,10 @@ import { TamboThreadProvider, useTamboThread, } from "./tambo-thread-provider";
  * @returns The TamboProvider component
  */
 export const TamboProvider = ({ children, tamboUrl, apiKey, components, environment }) => {
+    // explode if we're not in a browser
+    if (typeof window === "undefined") {
+        throw new Error("TamboProvider must be used within a browser");
+    }
     return (React.createElement(TamboClientProvider, { tamboUrl: tamboUrl, apiKey: apiKey, environment: environment },
         React.createElement(TamboRegistryProvider, { components: components },
             React.createElement(TamboThreadProvider, null,

package/esm/providers/tambo-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,KAAK,EAAE,EAAqB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAEL,mBAAmB,EAEnB,cAAc,EACd,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,qBAAqB,GAEtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,mBAAmB,EACnB,cAAc,GACf,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,aAAa,GAEtB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9D,OAAO,CACL,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW;QAExB,oBAAC,qBAAqB,IAAC,UAAU,EAAE,UAAU;YAC3C,oBAAC,mBAAmB;gBAClB,oBAAC,sBAAsB;oBACrB,oBAAC,sBAAsB,QAAE,QAAQ,CAA0B,CACpC,CACL,CACA,CACJ,CACvB,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CACvC,EAAuB,CACxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAChC,MAAM,WAAW,GAAG,mBAAmB,EAAE,CAAC;IAC1C,MAAM,iBAAiB,GAAG,iBAAiB,EAAE,CAAC;IAE9C,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,MAAM;YACN,WAAW;YACX,GAAG,iBAAiB;YACpB,GAAG,OAAO;SACX,IAEA,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AAClC,CAAC,CAAC","sourcesContent":["\"use client\";\nimport React, { PropsWithChildren, createContext, useContext } from \"react\";\nimport {\n  TamboClientContextProps,\n  TamboClientProvider,\n  TamboClientProviderProps,\n  useTamboClient,\n  useTamboQueryClient,\n} from \"./tambo-client-provider\";\nimport {\n  TamboComponentContextProps,\n  TamboComponentProvider,\n  useTamboComponent,\n} from \"./tambo-component-provider\";\nimport {\n  TamboRegistryProvider,\n  TamboRegistryProviderProps,\n} from \"./tambo-registry-provider\";\nimport {\n  TamboThreadContextProps,\n  TamboThreadProvider,\n  useTamboThread,\n} from \"./tambo-thread-provider\";\n\n/**\n * The TamboProvider gives full access to the whole Tambo API. This includes the\n * TamboAI client, the component registry, and the current thread context.\n * @param props - The props for the TamboProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.components - The components to register\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboProvider component\n */\nexport const TamboProvider: React.FC<\n  PropsWithChildren<TamboClientProviderProps & TamboRegistryProviderProps>\n> = ({ children, tamboUrl, apiKey, components, environment }) => {\n  return (\n    <TamboClientProvider\n      tamboUrl={tamboUrl}\n      apiKey={apiKey}\n      environment={environment}\n    >\n      <TamboRegistryProvider components={components}>\n        <TamboThreadProvider>\n          <TamboComponentProvider>\n            <TamboCompositeProvider>{children}</TamboCompositeProvider>\n          </TamboComponentProvider>\n        </TamboThreadProvider>\n      </TamboRegistryProvider>\n    </TamboClientProvider>\n  );\n};\ntype TamboContextProps = TamboClientContextProps &\n  TamboThreadContextProps &\n  TamboComponentContextProps;\n\nexport const TamboContext = createContext<TamboContextProps>(\n  {} as TamboContextProps,\n);\n\n/**\n * TamboCompositeProvider is a provider that combines the TamboClient,\n * TamboThread, and TamboComponent providers\n * @param props - The props for the TamboCompositeProvider\n * @param props.children - The children to wrap\n * @returns The wrapped component\n */\nconst TamboCompositeProvider: React.FC<PropsWithChildren> = ({ children }) => {\n  const threads = useTamboThread();\n  const client = useTamboClient();\n  const queryClient = useTamboQueryClient();\n  const componentRegistry = useTamboComponent();\n\n  return (\n    <TamboContext.Provider\n      value={{\n        client,\n        queryClient,\n        ...componentRegistry,\n        ...threads,\n      }}\n    >\n      {children}\n    </TamboContext.Provider>\n  );\n};\n\n/**\n * The useTambo hook provides access to the Tambo API. This is the primary entrypoint\n * for the Tambo React SDK.\n *\n * This includes the TamboAI client, the component registry, and the current thread context.\n * @returns The Tambo API\n */\nexport const useTambo = () => {\n  return useContext(TamboContext);\n};\n"]}
+{"version":3,"file":"tambo-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,2EAA2E;AAC3E,OAAO,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAqB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAEL,mBAAmB,EAEnB,cAAc,EACd,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,qBAAqB,GAEtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,mBAAmB,EACnB,cAAc,GACf,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,aAAa,GAEtB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9D,oCAAoC;IACpC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IAED,OAAO,CACL,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW;QAExB,oBAAC,qBAAqB,IAAC,UAAU,EAAE,UAAU;YAC3C,oBAAC,mBAAmB;gBAClB,oBAAC,sBAAsB;oBACrB,oBAAC,sBAAsB,QAAE,QAAQ,CAA0B,CACpC,CACL,CACA,CACJ,CACvB,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CACvC,EAAuB,CACxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAChC,MAAM,WAAW,GAAG,mBAAmB,EAAE,CAAC;IAC1C,MAAM,iBAAiB,GAAG,iBAAiB,EAAE,CAAC;IAE9C,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,MAAM;YACN,WAAW;YACX,GAAG,iBAAiB;YACpB,GAAG,OAAO;SACX,IAEA,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AAClC,CAAC,CAAC","sourcesContent":["\"use client\";\n// Use to workaround some TurboPack issues. Normally this is auto-detected.\nimport \"@tambo-ai/typescript-sdk/shims/web\";\nimport React, { PropsWithChildren, createContext, useContext } from \"react\";\nimport {\n  TamboClientContextProps,\n  TamboClientProvider,\n  TamboClientProviderProps,\n  useTamboClient,\n  useTamboQueryClient,\n} from \"./tambo-client-provider\";\nimport {\n  TamboComponentContextProps,\n  TamboComponentProvider,\n  useTamboComponent,\n} from \"./tambo-component-provider\";\nimport {\n  TamboRegistryProvider,\n  TamboRegistryProviderProps,\n} from \"./tambo-registry-provider\";\nimport {\n  TamboThreadContextProps,\n  TamboThreadProvider,\n  useTamboThread,\n} from \"./tambo-thread-provider\";\n\n/**\n * The TamboProvider gives full access to the whole Tambo API. This includes the\n * TamboAI client, the component registry, and the current thread context.\n * @param props - The props for the TamboProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.components - The components to register\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboProvider component\n */\nexport const TamboProvider: React.FC<\n  PropsWithChildren<TamboClientProviderProps & TamboRegistryProviderProps>\n> = ({ children, tamboUrl, apiKey, components, environment }) => {\n  // explode if we're not in a browser\n  if (typeof window === \"undefined\") {\n    throw new Error(\"TamboProvider must be used within a browser\");\n  }\n\n  return (\n    <TamboClientProvider\n      tamboUrl={tamboUrl}\n      apiKey={apiKey}\n      environment={environment}\n    >\n      <TamboRegistryProvider components={components}>\n        <TamboThreadProvider>\n          <TamboComponentProvider>\n            <TamboCompositeProvider>{children}</TamboCompositeProvider>\n          </TamboComponentProvider>\n        </TamboThreadProvider>\n      </TamboRegistryProvider>\n    </TamboClientProvider>\n  );\n};\ntype TamboContextProps = TamboClientContextProps &\n  TamboThreadContextProps &\n  TamboComponentContextProps;\n\nexport const TamboContext = createContext<TamboContextProps>(\n  {} as TamboContextProps,\n);\n\n/**\n * TamboCompositeProvider is a provider that combines the TamboClient,\n * TamboThread, and TamboComponent providers\n * @param props - The props for the TamboCompositeProvider\n * @param props.children - The children to wrap\n * @returns The wrapped component\n */\nconst TamboCompositeProvider: React.FC<PropsWithChildren> = ({ children }) => {\n  const threads = useTamboThread();\n  const client = useTamboClient();\n  const queryClient = useTamboQueryClient();\n  const componentRegistry = useTamboComponent();\n\n  return (\n    <TamboContext.Provider\n      value={{\n        client,\n        queryClient,\n        ...componentRegistry,\n        ...threads,\n      }}\n    >\n      {children}\n    </TamboContext.Provider>\n  );\n};\n\n/**\n * The useTambo hook provides access to the Tambo API. This is the primary entrypoint\n * for the Tambo React SDK.\n *\n * This includes the TamboAI client, the component registry, and the current thread context.\n * @returns The Tambo API\n */\nexport const useTambo = () => {\n  return useContext(TamboContext);\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tambo-ai/react",
-  "version": "0.19.3",
+  "version": "0.19.5",
   "description": "React client package for Tambo AI",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@tambo-ai/typescript-sdk": "^0.42.0",
-    "@tanstack/react-query": "^5.69.0",
+    "@tanstack/react-query": "^5.71.1",
     "partial-json": "^0.1.7",
     "react-fast-compare": "^3.2.2",
     "use-debounce": "^10.0.4",
@@ -78,7 +78,7 @@
     "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.12",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^20.17.27",
+    "@types/node": "^20.17.28",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.5",
     "concurrently": "^9.1.2",
@@ -92,8 +92,8 @@
     "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.3.1",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.28.0"
+    "typescript-eslint": "^8.29.0"
   }
 }