@tambo-ai/react 0.73.0 → 0.74.0

package/esm/hooks/index.d.ts

@@ -1,9 +1,9 @@
-export * from "./react-query-hooks";
-export { useTamboComponentState } from "./use-component-state";
-export { useTamboCurrentComponent, useTamboCurrentMessage, type TamboCurrentComponent, } from "./use-current-message";
-export { useTamboStreamingProps } from "./use-streaming-props";
-export * from "./use-suggestions";
-export { useTamboStreamStatus, type PropStatus, type StreamStatus, } from "./use-tambo-stream-status";
-export { useTamboThreadList } from "./use-tambo-threads";
-export { useTamboVoice } from "./use-tambo-voice";
+export * from "./react-query-hooks.js";
+export { useTamboComponentState } from "./use-component-state.js";
+export { useTamboCurrentComponent, useTamboCurrentMessage, type TamboCurrentComponent, } from "./use-current-message.js";
+export { useTamboStreamingProps } from "./use-streaming-props.js";
+export * from "./use-suggestions.js";
+export { useTamboStreamStatus, type PropStatus, type StreamStatus, } from "./use-tambo-stream-status.js";
+export { useTamboThreadList } from "./use-tambo-threads.js";
+export { useTamboVoice } from "./use-tambo-voice.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/hooks/index.js

@@ -1,10 +1,10 @@
 // Export all hooks from this directory
-export * from "./react-query-hooks";
-export { useTamboComponentState } from "./use-component-state";
-export { useTamboCurrentComponent, useTamboCurrentMessage, } from "./use-current-message";
-export { useTamboStreamingProps } from "./use-streaming-props";
-export * from "./use-suggestions";
-export { useTamboStreamStatus, } from "./use-tambo-stream-status";
-export { useTamboThreadList } from "./use-tambo-threads";
-export { useTamboVoice } from "./use-tambo-voice";
+export * from "./react-query-hooks.js";
+export { useTamboComponentState } from "./use-component-state.js";
+export { useTamboCurrentComponent, useTamboCurrentMessage, } from "./use-current-message.js";
+export { useTamboStreamingProps } from "./use-streaming-props.js";
+export * from "./use-suggestions.js";
+export { useTamboStreamStatus, } from "./use-tambo-stream-status.js";
+export { useTamboThreadList } from "./use-tambo-threads.js";
+export { useTamboVoice } from "./use-tambo-voice.js";
 //# sourceMappingURL=index.js.map

package/esm/hooks/react-query-hooks.js

@@ -1,6 +1,6 @@
 // tamboHooks.ts
 import { useMutation, useQueries, useQuery, } from "@tanstack/react-query";
-import { useTamboQueryClient } from "../providers/tambo-client-provider";
+import { useTamboQueryClient } from "../providers/tambo-client-provider.js";
 /**
  * Wrapper around useQuery that uses the internal tambo query client.
  *

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

@@ -22,7 +22,7 @@ type StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];
  * user edits take precedence over the original prop value.
  *
  * Pair with `useTamboStreamStatus` to disable inputs while streaming.
- * @see {@link https://docs.tambo.co/concepts/streaming/streaming-best-practices}
+ * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}
  */
 export declare function useTamboComponentState<S = undefined>(keyName: string, initialValue?: S, setFromProp?: S, debounceTime?: number): StateUpdateResult<S | undefined>;
 export declare function useTamboComponentState<S>(keyName: string, initialValue: S, setFromProp?: S, debounceTime?: number): StateUpdateResult<S>;

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

@@ -2,9 +2,9 @@
 import { deepEqual } from "fast-equals";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { useTamboClient, useTamboThread } from "..";
-import { useTamboInteractable } from "../providers/tambo-interactable-provider";
-import { TamboMessageContext } from "./use-current-message";
+import { useTamboClient, useTamboThread } from "../index.js";
+import { useTamboInteractable } from "../providers/tambo-interactable-provider.js";
+import { TamboMessageContext } from "./use-current-message.js";
 export function useTamboComponentState(keyName, initialValue, setFromProp, debounceTime = 500) {
     const message = useContext(TamboMessageContext);
     const { updateThreadMessage } = useTamboThread();

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":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAsB,cAAc,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAyC5D,MAAM,UAAU,sBAAsB,CACpC,OAAe,EACf,YAAgB,EAChB,WAAe,EACf,YAAY,GAAG,GAAG;IAElB,MAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChD,MAAM,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE,CAAC;IACjD,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAChC,MAAM,WAAW,GAAG,OAAO,EAAE,oBAAoB,EAAE,EAAE,IAAI,IAAI,CAAC;IAC9D,MAAM,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,GAC3D,oBAAoB,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,OAAO,EAAE,cAAc,EAAE,CAAC,OAAO,CAAC,CAAC;IACxD,MAAM,iBAAiB,GAAG,WAAW;QACnC,CAAC,CAAC,6BAA6B,CAAC,WAAW,CAAC,EAAE,CAAC,OAAO,CAAC;QACvD,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,YAAY,GACf,iBAAuB,IAAK,YAAkB,IAAI,YAAY,CAAC;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,4BAA4B,EAAE,+BAA+B,CAAC,GACnE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAExC,kEAAkE;IAClE,MAAM,wBAAwB,GAAG,WAAW,CAC1C,KAAK,EAAE,QAAW,EAAE,eAA0C,EAAE,EAAE;QAChE,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,MAAM,cAAc,GAAG;YACrB,QAAQ,EAAE,eAAe,CAAC,QAAQ;YAClC,cAAc,EAAE;gBACd,GAAG,eAAe,CAAC,cAAc;gBACjC,CAAC,OAAO,CAAC,EAAE,QAAQ;aACpB;SACF,CAAC;QACF,MAAM,mBAAmB,CAAC,eAAe,CAAC,EAAE,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC,EACD,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAC/B,CAAC;IAEF,0EAA0E;IAC1E,MAAM,yBAAyB,GAAG,oBAAoB,CACpD,KAAK,EAAE,QAAW,EAAE,eAA0C,EAAE,EAAE;QAChE,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CACrD,eAAe,CAAC,EAAE,EAClB;YACE,EAAE,EAAE,eAAe,CAAC,QAAQ;YAC5B,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE;SAC/B,CACF,CAAC;IACJ,CAAC,EACD,YAAY,CACb,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,QAAW,EAAE,EAAE;QACd,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,IAAI,WAAW,EAAE,CAAC;YAChB,wEAAwE;YACxE,oBAAoB,CAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;QACvD,CAAC;aAAM,IAAI,OAAO,EAAE,CAAC;YACnB,8EAA8E;YAC9E,KAAK,wBAAwB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YACjD,KAAK,yBAAyB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,EACD;QACE,OAAO;QACP,wBAAwB;QACxB,yBAAyB;QACzB,oBAAoB;QACpB,WAAW;QACX,OAAO;KACR,CACF,CAAC;IAEF,MAAM,yBAAyB,GAAG,WAAW;QAC3C,CAAC,CAAC,6BAA6B,CAAC,WAAW,CAAC,EAAE,CAAC,OAAO,CAAC;QACvD,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,+BAA+B,GACnC,CAAC,CAAC,WAAW;QACb,yBAAyB,KAAK,SAAS;QACvC,YAAY,KAAK,SAAS,CAAC;IAE7B,4GAA4G;IAC5G,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,+BAA+B,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QACD,oBAAoB,CAAC,WAAW,EAAE,OAAO,EAAE,YAAa,CAAC,CAAC;IAC5D,CAAC,EAAE;QACD,+BAA+B;QAC/B,WAAW;QACX,OAAO;QACP,YAAY;QACZ,oBAAoB;KACrB,CAAC,CAAC;IAEH,MAAM,qBAAqB,GACzB,CAAC,CAAC,OAAO,IAAI,YAAY,KAAK,SAAS,IAAI,YAAY,KAAK,IAAI,CAAC;IAEnE,6FAA6F;IAC7F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,+BAA+B,CAAC,IAAI,CAAC,CAAC;QACtC,MAAM,UAAU,GAAG,YAAiB,CAAC;QACrC,aAAa,CAAC,UAAU,CAAC,CAAC;QAC1B,IAAI,WAAW,EAAE,CAAC;YAChB,oBAAoB,CAAC,WAAW,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;QACzD,CAAC;IACH,CAAC,EAAE;QACD,qBAAqB;QACrB,YAAY;QACZ,OAAO;QACP,oBAAoB;QACpB,WAAW;KACZ,CAAC,CAAC;IAEH,4GAA4G;IAC5G,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW;YAAE,OAAO;QACzB,2BAA2B;QAC3B,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE,CACrB,SAAS,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,iBAAuB,CACrE,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErC,8KAA8K;IAC9K,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,SAAS,IAAI,CAAC,4BAA4B,EAAE,CAAC;YAC/D,aAAa,CAAC,WAAgB,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAEhD,gFAAgF;IAChF,SAAS,CAAC,GAAG,EAAE;QACb,kFAAkF;QAClF,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,OAAO,GAAG,EAAE;YACV,KAAK,UAAU,YAAY;gBACzB,IAAI,CAAC;oBACH,MAAM,yBAAyB,CAAC,KAAK,EAAE,CAAC;gBAC1C,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,OAAO,CAAC,KAAK,CACX,iDAAiD,EACjD,KAAK,CACN,CAAC;gBACJ,CAAC;YACH,CAAC;YACD,kDAAkD;YAClD,KAAK,YAAY,EAAE,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7C,OAAO,CAAC,UAAe,EAAE,QAAQ,CAAC,CAAC;AACrC,CAAC","sourcesContent":["\"use client\";\nimport { deepEqual } from \"fast-equals\";\nimport { useCallback, useContext, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { TamboThreadMessage, useTamboClient, useTamboThread } from \"..\";\nimport { useTamboInteractable } from \"../providers/tambo-interactable-provider\";\nimport { TamboMessageContext } from \"./use-current-message\";\n\ntype StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];\n\n/**\n * A React hook that acts like useState, but also automatically updates the thread message's componentState.\n * If used within an interactable component (wrapped with withTamboInteractable), it updates the\n * interactable provider's global state (sent to Tambo on every request) instead of the remote thread message state.\n * For generated components, it updates both the local and remote thread message's componentState.\n *\n * Benefits: Passes user changes to AI, and when threads are returned, state is preserved.\n * Works in both generative and interactable component contexts.\n * @param keyName - The unique key to identify this state value within the message's componentState object\n * @param initialValue - Optional initial value for the state, used if no componentState value exists in the Tambo message containing this hook usage.\n * @param setFromProp - Optional value used to set the state value, only while no componentState value exists in the Tambo message containing this hook usage. Use this to allow streaming updates from a prop to the state value.\n * @param debounceTime - Optional debounce time in milliseconds (default: 500ms) to limit API calls.\n * @returns A tuple of [currentState, setState] similar to React's useState\n * @example\n * ```tsx\n * const [count, setCount] = useTamboComponentState(\"counter\", 0);\n * ```\n *\n * Use `setFromProp` to seed state from streamed props. During streaming,\n * state updates as new prop values arrive. Once streaming completes,\n * user edits take precedence over the original prop value.\n *\n * Pair with `useTamboStreamStatus` to disable inputs while streaming.\n * @see {@link https://docs.tambo.co/concepts/streaming/streaming-best-practices}\n */\nexport function useTamboComponentState<S = undefined>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S | undefined>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime = 500,\n): StateUpdateResult<S> {\n  const message = useContext(TamboMessageContext);\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const componentId = message?.interactableMetadata?.id ?? null;\n  const { setInteractableState, getInteractableComponentState } =\n    useTamboInteractable();\n  const messageState = message?.componentState?.[keyName];\n  const interactableState = componentId\n    ? getInteractableComponentState(componentId)?.[keyName]\n    : undefined;\n  const initialState =\n    (interactableState as S) ?? (messageState as S) ?? initialValue;\n  const [localState, setLocalState] = useState<S | undefined>(initialState);\n  const [initializedFromThreadMessage, setInitializedFromThreadMessage] =\n    useState(messageState ? true : false);\n\n  // Optimistically update the local thread message's componentState\n  const updateLocalThreadMessage = useCallback(\n    async (newState: S, existingMessage: TamboThreadMessage | null) => {\n      if (!existingMessage) {\n        return;\n      }\n      const updatedMessage = {\n        threadId: existingMessage.threadId,\n        componentState: {\n          ...existingMessage.componentState,\n          [keyName]: newState,\n        },\n      };\n      await updateThreadMessage(existingMessage.id, updatedMessage, false);\n    },\n    [updateThreadMessage, keyName],\n  );\n\n  // Debounced callback to update the remote thread message's componentState\n  const updateRemoteThreadMessage = useDebouncedCallback(\n    async (newState: S, existingMessage: TamboThreadMessage | null) => {\n      if (!existingMessage) {\n        return;\n      }\n      await client.beta.threads.messages.updateComponentState(\n        existingMessage.id,\n        {\n          id: existingMessage.threadId,\n          state: { [keyName]: newState },\n        },\n      );\n    },\n    debounceTime,\n  );\n\n  const setValue = useCallback(\n    (newState: S) => {\n      setLocalState(newState);\n      if (componentId) {\n        // For interactable components, update the interactable provider's state\n        setInteractableState(componentId, keyName, newState);\n      } else if (message) {\n        // For generated components, update both local and remote thread message state\n        void updateLocalThreadMessage(newState, message);\n        void updateRemoteThreadMessage(newState, message);\n      }\n    },\n    [\n      message,\n      updateLocalThreadMessage,\n      updateRemoteThreadMessage,\n      setInteractableState,\n      componentId,\n      keyName,\n    ],\n  );\n\n  const existingInteractableState = componentId\n    ? getInteractableComponentState(componentId)?.[keyName]\n    : undefined;\n  const shouldUpdateInteractableInitial =\n    !!componentId &&\n    existingInteractableState === undefined &&\n    initialValue !== undefined;\n\n  // Set initial value in interactable state if we're in an interactable context and there's no existing state\n  useEffect(() => {\n    if (!shouldUpdateInteractableInitial) {\n      return;\n    }\n    setInteractableState(componentId, keyName, initialValue!);\n  }, [\n    shouldUpdateInteractableInitial,\n    componentId,\n    keyName,\n    initialValue,\n    setInteractableState,\n  ]);\n\n  const shouldSyncFromMessage =\n    !!message && messageState !== undefined && messageState !== null;\n\n  // Mirror the thread message's componentState value to the local state and interactable state\n  useEffect(() => {\n    if (!shouldSyncFromMessage) {\n      return;\n    }\n    setInitializedFromThreadMessage(true);\n    const stateValue = messageState as S;\n    setLocalState(stateValue);\n    if (componentId) {\n      setInteractableState(componentId, keyName, stateValue);\n    }\n  }, [\n    shouldSyncFromMessage,\n    messageState,\n    keyName,\n    setInteractableState,\n    componentId,\n  ]);\n\n  // Sync from interactable provider to local state when state changes externally (e.g., from Tambo tool call)\n  useEffect(() => {\n    if (!componentId) return;\n    // only update if different\n    setLocalState((prev) =>\n      deepEqual(prev, interactableState) ? prev : (interactableState as S),\n    );\n  }, [componentId, interactableState]);\n\n  // For editable fields that are set from a prop to allow streaming updates, don't overwrite a fetched state value set from the thread message with prop value on initial load.\n  useEffect(() => {\n    if (setFromProp !== undefined && !initializedFromThreadMessage) {\n      setLocalState(setFromProp as S);\n    }\n  }, [setFromProp, initializedFromThreadMessage]);\n\n  // Ensure pending changes are flushed on unmount (only for generated components)\n  useEffect(() => {\n    // Only flush remote updates for generated components, not interactable components\n    if (componentId) {\n      return;\n    }\n    return () => {\n      async function flushUpdates() {\n        try {\n          await updateRemoteThreadMessage.flush();\n        } catch (error) {\n          console.error(\n            \"Failed to flush pending thread message updates:\",\n            error,\n          );\n        }\n      }\n      // Fire-and-forget cleanup (errors handled inside)\n      void flushUpdates();\n    };\n  }, [updateRemoteThreadMessage, componentId]);\n\n  return [localState as S, setValue];\n}\n"]}
+{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { deepEqual } from \"fast-equals\";\nimport { useCallback, useContext, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { TamboThreadMessage, useTamboClient, useTamboThread } from \"..\";\nimport { useTamboInteractable } from \"../providers/tambo-interactable-provider\";\nimport { TamboMessageContext } from \"./use-current-message\";\n\ntype StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];\n\n/**\n * A React hook that acts like useState, but also automatically updates the thread message's componentState.\n * If used within an interactable component (wrapped with withTamboInteractable), it updates the\n * interactable provider's global state (sent to Tambo on every request) instead of the remote thread message state.\n * For generated components, it updates both the local and remote thread message's componentState.\n *\n * Benefits: Passes user changes to AI, and when threads are returned, state is preserved.\n * Works in both generative and interactable component contexts.\n * @param keyName - The unique key to identify this state value within the message's componentState object\n * @param initialValue - Optional initial value for the state, used if no componentState value exists in the Tambo message containing this hook usage.\n * @param setFromProp - Optional value used to set the state value, only while no componentState value exists in the Tambo message containing this hook usage. Use this to allow streaming updates from a prop to the state value.\n * @param debounceTime - Optional debounce time in milliseconds (default: 500ms) to limit API calls.\n * @returns A tuple of [currentState, setState] similar to React's useState\n * @example\n * ```tsx\n * const [count, setCount] = useTamboComponentState(\"counter\", 0);\n * ```\n *\n * Use `setFromProp` to seed state from streamed props. During streaming,\n * state updates as new prop values arrive. Once streaming completes,\n * user edits take precedence over the original prop value.\n *\n * Pair with `useTamboStreamStatus` to disable inputs while streaming.\n * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}\n */\nexport function useTamboComponentState<S = undefined>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S | undefined>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime = 500,\n): StateUpdateResult<S> {\n  const message = useContext(TamboMessageContext);\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const componentId = message?.interactableMetadata?.id ?? null;\n  const { setInteractableState, getInteractableComponentState } =\n    useTamboInteractable();\n  const messageState = message?.componentState?.[keyName];\n  const interactableState = componentId\n    ? getInteractableComponentState(componentId)?.[keyName]\n    : undefined;\n  const initialState =\n    (interactableState as S) ?? (messageState as S) ?? initialValue;\n  const [localState, setLocalState] = useState<S | undefined>(initialState);\n  const [initializedFromThreadMessage, setInitializedFromThreadMessage] =\n    useState(messageState ? true : false);\n\n  // Optimistically update the local thread message's componentState\n  const updateLocalThreadMessage = useCallback(\n    async (newState: S, existingMessage: TamboThreadMessage | null) => {\n      if (!existingMessage) {\n        return;\n      }\n      const updatedMessage = {\n        threadId: existingMessage.threadId,\n        componentState: {\n          ...existingMessage.componentState,\n          [keyName]: newState,\n        },\n      };\n      await updateThreadMessage(existingMessage.id, updatedMessage, false);\n    },\n    [updateThreadMessage, keyName],\n  );\n\n  // Debounced callback to update the remote thread message's componentState\n  const updateRemoteThreadMessage = useDebouncedCallback(\n    async (newState: S, existingMessage: TamboThreadMessage | null) => {\n      if (!existingMessage) {\n        return;\n      }\n      await client.beta.threads.messages.updateComponentState(\n        existingMessage.id,\n        {\n          id: existingMessage.threadId,\n          state: { [keyName]: newState },\n        },\n      );\n    },\n    debounceTime,\n  );\n\n  const setValue = useCallback(\n    (newState: S) => {\n      setLocalState(newState);\n      if (componentId) {\n        // For interactable components, update the interactable provider's state\n        setInteractableState(componentId, keyName, newState);\n      } else if (message) {\n        // For generated components, update both local and remote thread message state\n        void updateLocalThreadMessage(newState, message);\n        void updateRemoteThreadMessage(newState, message);\n      }\n    },\n    [\n      message,\n      updateLocalThreadMessage,\n      updateRemoteThreadMessage,\n      setInteractableState,\n      componentId,\n      keyName,\n    ],\n  );\n\n  const existingInteractableState = componentId\n    ? getInteractableComponentState(componentId)?.[keyName]\n    : undefined;\n  const shouldUpdateInteractableInitial =\n    !!componentId &&\n    existingInteractableState === undefined &&\n    initialValue !== undefined;\n\n  // Set initial value in interactable state if we're in an interactable context and there's no existing state\n  useEffect(() => {\n    if (!shouldUpdateInteractableInitial) {\n      return;\n    }\n    setInteractableState(componentId, keyName, initialValue!);\n  }, [\n    shouldUpdateInteractableInitial,\n    componentId,\n    keyName,\n    initialValue,\n    setInteractableState,\n  ]);\n\n  const shouldSyncFromMessage =\n    !!message && messageState !== undefined && messageState !== null;\n\n  // Mirror the thread message's componentState value to the local state and interactable state\n  useEffect(() => {\n    if (!shouldSyncFromMessage) {\n      return;\n    }\n    setInitializedFromThreadMessage(true);\n    const stateValue = messageState as S;\n    setLocalState(stateValue);\n    if (componentId) {\n      setInteractableState(componentId, keyName, stateValue);\n    }\n  }, [\n    shouldSyncFromMessage,\n    messageState,\n    keyName,\n    setInteractableState,\n    componentId,\n  ]);\n\n  // Sync from interactable provider to local state when state changes externally (e.g., from Tambo tool call)\n  useEffect(() => {\n    if (!componentId) return;\n    // only update if different\n    setLocalState((prev) =>\n      deepEqual(prev, interactableState) ? prev : (interactableState as S),\n    );\n  }, [componentId, interactableState]);\n\n  // For editable fields that are set from a prop to allow streaming updates, don't overwrite a fetched state value set from the thread message with prop value on initial load.\n  useEffect(() => {\n    if (setFromProp !== undefined && !initializedFromThreadMessage) {\n      setLocalState(setFromProp as S);\n    }\n  }, [setFromProp, initializedFromThreadMessage]);\n\n  // Ensure pending changes are flushed on unmount (only for generated components)\n  useEffect(() => {\n    // Only flush remote updates for generated components, not interactable components\n    if (componentId) {\n      return;\n    }\n    return () => {\n      async function flushUpdates() {\n        try {\n          await updateRemoteThreadMessage.flush();\n        } catch (error) {\n          console.error(\n            \"Failed to flush pending thread message updates:\",\n            error,\n          );\n        }\n      }\n      // Fire-and-forget cleanup (errors handled inside)\n      void flushUpdates();\n    };\n  }, [updateRemoteThreadMessage, componentId]);\n\n  return [localState as S, setValue];\n}\n"]}

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

@@ -1,10 +1,10 @@
 import { act, renderHook } from "@testing-library/react";
 import React from "react";
-import { useTamboClient } from "../providers/tambo-client-provider";
-import { useTamboInteractable } from "../providers/tambo-interactable-provider";
-import { useTamboThread } from "../providers/tambo-thread-provider";
-import { useTamboComponentState } from "./use-component-state";
-import { TamboMessageContext, useTamboCurrentMessage, } from "./use-current-message";
+import { useTamboClient } from "../providers/tambo-client-provider.js";
+import { useTamboInteractable } from "../providers/tambo-interactable-provider.js";
+import { useTamboThread } from "../providers/tambo-thread-provider.js";
+import { useTamboComponentState } from "./use-component-state.js";
+import { TamboMessageContext, useTamboCurrentMessage, } from "./use-current-message.js";
 // Mock the required providers
 jest.mock("../providers/tambo-client-provider", () => ({
     useTamboClient: jest.fn(),

package/esm/hooks/use-current-message.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { InteractableMetadata, TamboThreadMessage } from "../model/generate-component-response";
+import { InteractableMetadata, TamboThreadMessage } from "../model/generate-component-response.js";
 export declare const TamboMessageContext: React.Context<TamboThreadMessage | null>;
 export interface TamboMessageProviderProps {
     children: React.ReactNode;

package/esm/hooks/use-current-message.test.js

@@ -1,6 +1,6 @@
 import { render, renderHook, screen } from "@testing-library/react";
 import React from "react";
-import { TamboMessageProvider, useTamboCurrentComponent, useTamboCurrentMessage, } from "./use-current-message";
+import { TamboMessageProvider, useTamboCurrentComponent, useTamboCurrentMessage, } from "./use-current-message.js";
 describe("TamboMessageProvider", () => {
     const createMockMessage = (overrides = {}) => ({
         id: "test-message-id",

package/esm/hooks/use-message-images.test.js

@@ -1,5 +1,5 @@
 import { act, renderHook } from "@testing-library/react";
-import { useMessageImages } from "./use-message-images";
+import { useMessageImages } from "./use-message-images.js";
 // Mock crypto.randomUUID
 global.crypto = {
     randomUUID: jest.fn(() => "mock-uuid-" + Math.random()),

package/esm/hooks/use-streaming-props.d.ts

@@ -2,7 +2,7 @@
  * Low-level helper that merges streamed props into state.
  * @deprecated Use `useTamboComponentState` with `setFromProp` instead.
  * This hook will be removed in 1.0.0.
- * @see {@link https://docs.tambo.co/concepts/streaming/streaming-props}
+ * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}
  * @param currentState - Current state object
  * @param setState - State setter function
  * @param streamingProps - Props to merge into state when they change

package/esm/hooks/use-streaming-props.js

@@ -4,7 +4,7 @@ import { useEffect } from "react";
  * Low-level helper that merges streamed props into state.
  * @deprecated Use `useTamboComponentState` with `setFromProp` instead.
  * This hook will be removed in 1.0.0.
- * @see {@link https://docs.tambo.co/concepts/streaming/streaming-props}
+ * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}
  * @param currentState - Current state object
  * @param setState - State setter function
  * @param streamingProps - Props to merge into state when they change

package/esm/hooks/use-streaming-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-streaming-props.js","sourceRoot":"","sources":["../../src/hooks/use-streaming-props.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,YAA2B,EAC3B,QAA4B,EAC5B,cAA0B;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,YAAY,GAAG,KAAK,CAAC;YACzB,MAAM,OAAO,GAAe,EAAE,CAAC;YAE/B,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;gBACtD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;oBACvD,YAAY,GAAG,IAAI,CAAC;oBACpB,OAAO,CAAC,GAAc,CAAC,GAAG,KAAmB,CAAC;gBAChD,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,YAAY,EAAE,CAAC;gBACjB,QAAQ,CAAC;oBACP,GAAG,YAAY;oBACf,GAAG,OAAO;iBACX,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QACD,sCAAsC;QACtC,uDAAuD;IACzD,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AACzC,CAAC","sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\n/**\n * Low-level helper that merges streamed props into state.\n * @deprecated Use `useTamboComponentState` with `setFromProp` instead.\n * This hook will be removed in 1.0.0.\n * @see {@link https://docs.tambo.co/concepts/streaming/streaming-props}\n * @param currentState - Current state object\n * @param setState - State setter function\n * @param streamingProps - Props to merge into state when they change\n */\nexport function useTamboStreamingProps<T extends Record<string, any>>(\n  currentState: T | undefined,\n  setState: (state: T) => void,\n  streamingProps: Partial<T>,\n) {\n  useEffect(() => {\n    if (currentState) {\n      let shouldUpdate = false;\n      const updates: Partial<T> = {};\n\n      Object.entries(streamingProps).forEach(([key, value]) => {\n        if (value !== undefined && value !== currentState[key]) {\n          shouldUpdate = true;\n          updates[key as keyof T] = value as T[keyof T];\n        }\n      });\n\n      if (shouldUpdate) {\n        setState({\n          ...currentState,\n          ...updates,\n        });\n      }\n    }\n    // Only run when streamingProps change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...Object.values(streamingProps)]);\n}\n"]}
+{"version":3,"file":"use-streaming-props.js","sourceRoot":"","sources":["../../src/hooks/use-streaming-props.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,YAA2B,EAC3B,QAA4B,EAC5B,cAA0B;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,YAAY,GAAG,KAAK,CAAC;YACzB,MAAM,OAAO,GAAe,EAAE,CAAC;YAE/B,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;gBACtD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;oBACvD,YAAY,GAAG,IAAI,CAAC;oBACpB,OAAO,CAAC,GAAc,CAAC,GAAG,KAAmB,CAAC;gBAChD,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,YAAY,EAAE,CAAC;gBACjB,QAAQ,CAAC;oBACP,GAAG,YAAY;oBACf,GAAG,OAAO;iBACX,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QACD,sCAAsC;QACtC,uDAAuD;IACzD,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AACzC,CAAC","sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\n/**\n * Low-level helper that merges streamed props into state.\n * @deprecated Use `useTamboComponentState` with `setFromProp` instead.\n * This hook will be removed in 1.0.0.\n * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}\n * @param currentState - Current state object\n * @param setState - State setter function\n * @param streamingProps - Props to merge into state when they change\n */\nexport function useTamboStreamingProps<T extends Record<string, any>>(\n  currentState: T | undefined,\n  setState: (state: T) => void,\n  streamingProps: Partial<T>,\n) {\n  useEffect(() => {\n    if (currentState) {\n      let shouldUpdate = false;\n      const updates: Partial<T> = {};\n\n      Object.entries(streamingProps).forEach(([key, value]) => {\n        if (value !== undefined && value !== currentState[key]) {\n          shouldUpdate = true;\n          updates[key as keyof T] = value as T[keyof T];\n        }\n      });\n\n      if (shouldUpdate) {\n        setState({\n          ...currentState,\n          ...updates,\n        });\n      }\n    }\n    // Only run when streamingProps change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...Object.values(streamingProps)]);\n}\n"]}

package/esm/hooks/use-suggestions.d.ts

@@ -1,6 +1,6 @@
 import TamboAI from "@tambo-ai/typescript-sdk";
-import { CombinedMutationResult } from "../util/query-utils";
-import { UseTamboMutationResult, UseTamboQueryResult } from "./react-query-hooks";
+import { CombinedMutationResult } from "../util/query-utils.js";
+import { UseTamboMutationResult, UseTamboQueryResult } from "./react-query-hooks.js";
 /**
  * Configuration options for the useTamboSuggestions hook
  */

package/esm/hooks/use-suggestions.js

@@ -1,15 +1,15 @@
 "use client";
 import { useEffect, useState } from "react";
-import { isIdleStage } from "../model/generate-component-response";
-import { validateInput } from "../model/validate-input";
-import { useTamboClient } from "../providers/tambo-client-provider";
-import { useTambo } from "../providers/tambo-provider";
-import { useTamboRegistry } from "../providers/tambo-registry-provider";
-import { INPUT_ERROR_MESSAGES, useTamboThreadInput, } from "../providers/tambo-thread-input-provider";
-import { useTamboThread } from "../providers/tambo-thread-provider";
-import { combineMutationResults, } from "../util/query-utils";
-import { getAvailableComponents } from "../util/registry";
-import { useTamboMutation, useTamboQuery, } from "./react-query-hooks";
+import { isIdleStage } from "../model/generate-component-response.js";
+import { validateInput } from "../model/validate-input.js";
+import { useTamboClient } from "../providers/tambo-client-provider.js";
+import { useTambo } from "../providers/tambo-provider.js";
+import { useTamboRegistry } from "../providers/tambo-registry-provider.js";
+import { INPUT_ERROR_MESSAGES, useTamboThreadInput, } from "../providers/tambo-thread-input-provider.js";
+import { useTamboThread } from "../providers/tambo-thread-provider.js";
+import { combineMutationResults, } from "../util/query-utils.js";
+import { getAvailableComponents } from "../util/registry.js";
+import { useTamboMutation, useTamboQuery, } from "./react-query-hooks.js";
 /**
  * Hook for managing Tambo AI suggestions in a thread
  * @param options - Configuration options for suggestion generation

package/esm/hooks/use-suggestions.test.js

@@ -1,12 +1,12 @@
 import { QueryClient } from "@tanstack/react-query";
 import { act, renderHook } from "@testing-library/react";
-import { GenerationStage, } from "../model/generate-component-response";
-import { useTamboClient, useTamboQueryClient, } from "../providers/tambo-client-provider";
-import { useTambo } from "../providers/tambo-provider";
-import { useTamboThreadInput, } from "../providers/tambo-thread-input-provider";
-import { useTamboThread, } from "../providers/tambo-thread-provider";
-import { useTamboMutation, useTamboQuery } from "./react-query-hooks";
-import { useTamboSuggestions } from "./use-suggestions";
+import { GenerationStage, } from "../model/generate-component-response.js";
+import { useTamboClient, useTamboQueryClient, } from "../providers/tambo-client-provider.js";
+import { useTambo } from "../providers/tambo-provider.js";
+import { useTamboThreadInput, } from "../providers/tambo-thread-input-provider.js";
+import { useTamboThread, } from "../providers/tambo-thread-provider.js";
+import { useTamboMutation, useTamboQuery } from "./react-query-hooks.js";
+import { useTamboSuggestions } from "./use-suggestions.js";
 // Mock the required providers
 jest.mock("../providers/tambo-client-provider", () => ({
     useTamboClient: jest.fn(),

package/esm/hooks/use-tambo-stream-status.d.ts

@@ -63,7 +63,7 @@ export interface PropStatus {
  * Use `propStatus.<field>?.isSuccess` before treating a prop as complete.
  *
  * Pair with `useTamboComponentState` to disable inputs while streaming.
- * @see {@link https://docs.tambo.co/concepts/streaming/streaming-best-practices}
+ * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}
  * @template Props - Component props type
  * @returns `streamStatus` (overall) and `propStatus` (per-prop) flags
  * @throws {Error} When used during SSR/SSG

package/esm/hooks/use-tambo-stream-status.js

@@ -1,8 +1,8 @@
 "use client";
 import { useEffect, useMemo, useState } from "react";
-import { GenerationStage } from "../model/generate-component-response";
-import { useTamboGenerationStage } from "../providers/tambo-thread-provider";
-import { useTamboCurrentMessage } from "./use-current-message";
+import { GenerationStage } from "../model/generate-component-response.js";
+import { useTamboGenerationStage } from "../providers/tambo-thread-provider.js";
+import { useTamboCurrentMessage } from "./use-current-message.js";
 /**
  * SSR Guard - throws during server-side rendering.
  * Ensures the hook is only used in browser contexts.
@@ -165,7 +165,7 @@ function deriveGlobalStreamStatus(generationStage, propStatus, hasComponent, gen
  * Use `propStatus.<field>?.isSuccess` before treating a prop as complete.
  *
  * Pair with `useTamboComponentState` to disable inputs while streaming.
- * @see {@link https://docs.tambo.co/concepts/streaming/streaming-best-practices}
+ * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}
  * @template Props - Component props type
  * @returns `streamStatus` (overall) and `propStatus` (per-prop) flags
  * @throws {Error} When used during SSR/SSG

package/esm/hooks/use-tambo-stream-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tambo-stream-status.js","sourceRoot":"","sources":["../../src/hooks/use-tambo-stream-status.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { GenerationStage } from \"../model/generate-component-response\";\nimport { useTamboGenerationStage } from \"../providers/tambo-thread-provider\";\nimport { useTamboCurrentMessage } from \"./use-current-message\";\n\n/**\n * Global stream status flags for a specific component in a message.\n * Represents the aggregate state across all props for this component only.\n * Once a component completes, its status remains stable regardless of other generations.\n */\nexport interface StreamStatus {\n  /**\n   * Indicates no tokens have been received for any prop and generation is not active.\n   * Useful for showing initial loading states before any data arrives.\n   */\n  isPending: boolean;\n\n  /**\n   * Indicates active streaming - either generation is streaming OR at least one prop is still streaming.\n   * Use this to show loading animations or skeleton states during data transmission.\n   */\n  isStreaming: boolean;\n\n  /**\n   * Indicates successful completion - generation is complete AND every prop finished without error.\n   * Safe to render the final component when this is true.\n   */\n  isSuccess: boolean;\n\n  /**\n   * Indicates a fatal error occurred in any prop or the stream itself.\n   * Check streamError for details about what went wrong.\n   */\n  isError: boolean;\n\n  /**\n   * The first fatal error encountered during streaming (if any).\n   * Will be undefined if no errors occurred.\n   */\n  streamError?: Error;\n}\n\n/**\n * Streaming status flags for individual component props.\n * Tracks the state of each prop as it streams from the LLM.\n */\nexport interface PropStatus {\n  /**\n   * Indicates no tokens have been received for this specific prop yet.\n   * The prop value is still undefined, null, or empty string.\n   */\n  isPending: boolean;\n\n  /**\n   * Indicates at least one token has been received but streaming is not complete.\n   * The prop has partial content that may still be updating.\n   */\n  isStreaming: boolean;\n\n  /**\n   * Indicates this prop has finished streaming successfully.\n   * The prop value is complete and stable.\n   */\n  isSuccess: boolean;\n\n  /**\n   * The error that occurred during streaming (if any).\n   * Will be undefined if no error occurred for this prop.\n   */\n  error?: Error;\n}\n\n/**\n * SSR Guard - throws during server-side rendering.\n * Ensures the hook is only used in browser contexts.\n * @throws {Error} When called during server-side rendering\n */\nfunction assertClientSide() {\n  if (typeof window === \"undefined\") {\n    throw new Error(\n      \"useTamboStreamStatus can only be used in browser contexts. \" +\n        \"This hook is not compatible with SSR/SSG. \" +\n        \"Consider wrapping it in useEffect or using dynamic imports.\",\n    );\n  }\n}\n\n/**\n * Track streaming status for individual props by monitoring their values.\n * Monitors when props receive their first token and when they complete streaming.\n * Maintains stable state per message - once props complete for a message, they stay complete.\n * @template Props - The type of the component props being tracked\n * @param props - The current component props object\n * @param generationStage - The current generation stage from the LLM\n * @param messageId - The ID of the current message to track component-specific state\n * @returns A record mapping each prop key to its PropStatus\n */\nfunction usePropsStreamingStatus<Props extends Record<string, any>>(\n  props: Props | undefined,\n  generationStage: GenerationStage,\n  messageId: string,\n): Record<keyof Props, PropStatus> {\n  const [propTracking, setPropTracking] = useState<\n    Record<\n      string,\n      {\n        hasStarted: boolean;\n        isComplete: boolean;\n        error?: Error;\n        messageId: string;\n      }\n    >\n  >({});\n\n  /** Reset tracking only when the message changes */\n  useEffect(() => {\n    setPropTracking((prev) => {\n      // If we have tracking data for a different message, reset\n      const hasOldMessageData = Object.values(prev).some(\n        (track) => track.messageId && track.messageId !== messageId,\n      );\n      return hasOldMessageData ? {} : prev;\n    });\n  }, [messageId]);\n\n  /** Track when props start streaming (receive first token) and when they complete */\n  useEffect(() => {\n    if (!props) return;\n\n    setPropTracking((prev) => {\n      const updated = { ...prev };\n      let hasChanges = false;\n\n      // First pass: identify which props are starting now\n      const propsStartingNow: string[] = [];\n      Object.entries(props).forEach(([key, value]) => {\n        const current = prev[key] || {\n          hasStarted: false,\n          isComplete: false,\n        };\n\n        /** A prop starts streaming when it has a non-empty value for the first time */\n        const hasContent =\n          value !== undefined && value !== null && value !== \"\";\n        const justStarted = hasContent && !current.hasStarted;\n\n        if (justStarted) {\n          propsStartingNow.push(key);\n        }\n      });\n\n      // Second pass: update tracking and mark previous props as complete\n      Object.entries(props).forEach(([key, value]) => {\n        const current = prev[key] || {\n          hasStarted: false,\n          isComplete: false,\n        };\n\n        /** A prop starts streaming when it has a non-empty value for the first time */\n        const hasContent =\n          value !== undefined && value !== null && value !== \"\";\n        const justStarted = hasContent && !current.hasStarted;\n\n        /**\n         * A prop is complete when it has started and either:\n         * 1. A following prop has started, OR\n         * 2. Generation is complete (for the final prop)\n         */\n        const hasFollowingPropStarted = propsStartingNow.some(\n          (startingKey) => startingKey !== key,\n        );\n        const isGenerationComplete =\n          generationStage === GenerationStage.COMPLETE;\n        const isComplete =\n          current.hasStarted &&\n          (hasFollowingPropStarted || isGenerationComplete) &&\n          !current.isComplete;\n\n        // Once a prop is complete for this message, it stays complete\n        if (current.isComplete && current.messageId === messageId) {\n          // Skip - already complete for this message\n          return;\n        }\n\n        if (justStarted || isComplete) {\n          updated[key] = {\n            ...current,\n            hasStarted: justStarted ? true : current.hasStarted,\n            isComplete: isComplete ? true : current.isComplete,\n            messageId,\n          };\n          hasChanges = true;\n        }\n      });\n\n      return hasChanges ? updated : prev;\n    });\n  }, [props, generationStage, messageId]);\n\n  /** Convert tracking state to PropStatus objects */\n  return useMemo(() => {\n    if (!props) return {} as Record<keyof Props, PropStatus>;\n\n    const result = {} as Record<keyof Props, PropStatus>;\n\n    Object.keys(props).forEach((key) => {\n      const tracking = propTracking[key] || {\n        hasStarted: false,\n        isComplete: false,\n        messageId: \"\",\n      };\n\n      // If this prop is complete for this message, it stays complete\n      const isCompleteForThisMessage =\n        tracking.isComplete && tracking.messageId === messageId;\n\n      // Only consider generation stage if this prop isn't already complete for this message\n      const isGenerationStreaming =\n        !isCompleteForThisMessage &&\n        generationStage === GenerationStage.STREAMING_RESPONSE;\n\n      result[key as keyof Props] = {\n        isPending: !tracking.hasStarted && !isCompleteForThisMessage,\n        isStreaming:\n          tracking.hasStarted &&\n          !isCompleteForThisMessage &&\n          isGenerationStreaming,\n        isSuccess: isCompleteForThisMessage,\n        error: tracking.error,\n      };\n    });\n\n    return result;\n  }, [props, propTracking, generationStage, messageId]);\n}\n\n/**\n * Derives global StreamStatus from generation stage and individual prop statuses.\n * Aggregates individual prop states into a unified stream status.\n * @template Props - The type of the component props\n * @param generationStage - The current generation stage from the LLM\n * @param propStatus - Status record for each individual prop\n * @param hasComponent - Whether a component exists in the current message\n * @param generationError - Any error from the generation process itself\n * @returns The aggregated StreamStatus for the entire component\n */\nfunction deriveGlobalStreamStatus<Props extends Record<string, any>>(\n  generationStage: GenerationStage,\n  propStatus: Record<keyof Props, PropStatus>,\n  hasComponent: boolean,\n  generationError?: Error,\n): StreamStatus {\n  const propStatuses = Object.values(propStatus);\n\n  // If all props are already successful, the component is complete regardless of generation stage\n  const allPropsSuccessful =\n    propStatuses.length > 0 && propStatuses.every((p) => p.isSuccess);\n\n  // Only consider generation stage if not all props are complete\n  const isGenerationStreaming =\n    !allPropsSuccessful &&\n    generationStage === GenerationStage.STREAMING_RESPONSE;\n  const isGenerationError = generationStage === GenerationStage.ERROR;\n\n  /** Find first error from generation or any prop */\n  const firstError =\n    generationError ?? propStatuses.find((p) => p.error)?.error;\n\n  return {\n    /** isPending: no component yet OR (has component but no props have started) */\n    isPending:\n      !hasComponent ||\n      (!isGenerationStreaming &&\n        !allPropsSuccessful &&\n        propStatuses.every((p) => p.isPending)),\n\n    /** isStreaming: any prop is streaming (generation stage doesn't matter if props are complete) */\n    isStreaming: propStatuses.some((p) => p.isStreaming),\n\n    /** isSuccess: all props successful (component is stable once all props complete) */\n    isSuccess: allPropsSuccessful,\n\n    /** isError: generation error OR any prop error */\n    isError:\n      isGenerationError ||\n      propStatuses.some((p) => p.error) ||\n      !!generationError,\n\n    streamError: firstError,\n  };\n}\n\n/**\n * Track streaming status for Tambo component props.\n *\n * **Important**: Props update repeatedly during streaming and may be partial.\n * Use `propStatus.<field>?.isSuccess` before treating a prop as complete.\n *\n * Pair with `useTamboComponentState` to disable inputs while streaming.\n * @see {@link https://docs.tambo.co/concepts/streaming/streaming-best-practices}\n * @template Props - Component props type\n * @returns `streamStatus` (overall) and `propStatus` (per-prop) flags\n * @throws {Error} When used during SSR/SSG\n * @example\n * ```tsx\n * // Wait for entire stream\n * const { streamStatus } = useTamboStreamStatus();\n * if (!streamStatus.isSuccess) return <Spinner />;\n * return <Card {...props} />;\n * ```\n * @example\n * ```tsx\n * // Highlight in-flight props\n * const { propStatus } = useTamboStreamStatus<Props>();\n * <h2 className={propStatus.title.isStreaming ? \"animate-pulse\" : \"\"}>\n *   {title}\n * </h2>\n * ```\n */\nexport function useTamboStreamStatus<\n  Props extends Record<string, any> = Record<string, any>,\n>(): {\n  streamStatus: StreamStatus;\n  propStatus: Record<keyof Props, PropStatus>;\n} {\n  /** SSR Guard - ensure client-side only execution */\n  assertClientSide();\n\n  const { generationStage } = useTamboGenerationStage();\n  const message = useTamboCurrentMessage();\n\n  /** Get the current component props from the message */\n  const componentProps = (message?.component?.props as Props) || ({} as Props);\n\n  /** Track per-prop streaming status */\n  const propStatus = usePropsStreamingStatus(\n    componentProps,\n    generationStage,\n    message?.id ?? \"\",\n  );\n\n  /** Derive global stream status from prop statuses and generation stage */\n  const streamStatus = useMemo(() => {\n    const generationError = message?.error\n      ? new Error(message.error)\n      : undefined;\n    const hasComponent = !!message?.component;\n    return deriveGlobalStreamStatus(\n      generationStage,\n      propStatus,\n      hasComponent,\n      generationError,\n    );\n  }, [generationStage, propStatus, message]);\n\n  return {\n    streamStatus,\n    propStatus,\n  };\n}\n"]}
+{"version":3,"file":"use-tambo-stream-status.js","sourceRoot":"","sources":["../../src/hooks/use-tambo-stream-status.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { GenerationStage } from \"../model/generate-component-response\";\nimport { useTamboGenerationStage } from \"../providers/tambo-thread-provider\";\nimport { useTamboCurrentMessage } from \"./use-current-message\";\n\n/**\n * Global stream status flags for a specific component in a message.\n * Represents the aggregate state across all props for this component only.\n * Once a component completes, its status remains stable regardless of other generations.\n */\nexport interface StreamStatus {\n  /**\n   * Indicates no tokens have been received for any prop and generation is not active.\n   * Useful for showing initial loading states before any data arrives.\n   */\n  isPending: boolean;\n\n  /**\n   * Indicates active streaming - either generation is streaming OR at least one prop is still streaming.\n   * Use this to show loading animations or skeleton states during data transmission.\n   */\n  isStreaming: boolean;\n\n  /**\n   * Indicates successful completion - generation is complete AND every prop finished without error.\n   * Safe to render the final component when this is true.\n   */\n  isSuccess: boolean;\n\n  /**\n   * Indicates a fatal error occurred in any prop or the stream itself.\n   * Check streamError for details about what went wrong.\n   */\n  isError: boolean;\n\n  /**\n   * The first fatal error encountered during streaming (if any).\n   * Will be undefined if no errors occurred.\n   */\n  streamError?: Error;\n}\n\n/**\n * Streaming status flags for individual component props.\n * Tracks the state of each prop as it streams from the LLM.\n */\nexport interface PropStatus {\n  /**\n   * Indicates no tokens have been received for this specific prop yet.\n   * The prop value is still undefined, null, or empty string.\n   */\n  isPending: boolean;\n\n  /**\n   * Indicates at least one token has been received but streaming is not complete.\n   * The prop has partial content that may still be updating.\n   */\n  isStreaming: boolean;\n\n  /**\n   * Indicates this prop has finished streaming successfully.\n   * The prop value is complete and stable.\n   */\n  isSuccess: boolean;\n\n  /**\n   * The error that occurred during streaming (if any).\n   * Will be undefined if no error occurred for this prop.\n   */\n  error?: Error;\n}\n\n/**\n * SSR Guard - throws during server-side rendering.\n * Ensures the hook is only used in browser contexts.\n * @throws {Error} When called during server-side rendering\n */\nfunction assertClientSide() {\n  if (typeof window === \"undefined\") {\n    throw new Error(\n      \"useTamboStreamStatus can only be used in browser contexts. \" +\n        \"This hook is not compatible with SSR/SSG. \" +\n        \"Consider wrapping it in useEffect or using dynamic imports.\",\n    );\n  }\n}\n\n/**\n * Track streaming status for individual props by monitoring their values.\n * Monitors when props receive their first token and when they complete streaming.\n * Maintains stable state per message - once props complete for a message, they stay complete.\n * @template Props - The type of the component props being tracked\n * @param props - The current component props object\n * @param generationStage - The current generation stage from the LLM\n * @param messageId - The ID of the current message to track component-specific state\n * @returns A record mapping each prop key to its PropStatus\n */\nfunction usePropsStreamingStatus<Props extends Record<string, any>>(\n  props: Props | undefined,\n  generationStage: GenerationStage,\n  messageId: string,\n): Record<keyof Props, PropStatus> {\n  const [propTracking, setPropTracking] = useState<\n    Record<\n      string,\n      {\n        hasStarted: boolean;\n        isComplete: boolean;\n        error?: Error;\n        messageId: string;\n      }\n    >\n  >({});\n\n  /** Reset tracking only when the message changes */\n  useEffect(() => {\n    setPropTracking((prev) => {\n      // If we have tracking data for a different message, reset\n      const hasOldMessageData = Object.values(prev).some(\n        (track) => track.messageId && track.messageId !== messageId,\n      );\n      return hasOldMessageData ? {} : prev;\n    });\n  }, [messageId]);\n\n  /** Track when props start streaming (receive first token) and when they complete */\n  useEffect(() => {\n    if (!props) return;\n\n    setPropTracking((prev) => {\n      const updated = { ...prev };\n      let hasChanges = false;\n\n      // First pass: identify which props are starting now\n      const propsStartingNow: string[] = [];\n      Object.entries(props).forEach(([key, value]) => {\n        const current = prev[key] || {\n          hasStarted: false,\n          isComplete: false,\n        };\n\n        /** A prop starts streaming when it has a non-empty value for the first time */\n        const hasContent =\n          value !== undefined && value !== null && value !== \"\";\n        const justStarted = hasContent && !current.hasStarted;\n\n        if (justStarted) {\n          propsStartingNow.push(key);\n        }\n      });\n\n      // Second pass: update tracking and mark previous props as complete\n      Object.entries(props).forEach(([key, value]) => {\n        const current = prev[key] || {\n          hasStarted: false,\n          isComplete: false,\n        };\n\n        /** A prop starts streaming when it has a non-empty value for the first time */\n        const hasContent =\n          value !== undefined && value !== null && value !== \"\";\n        const justStarted = hasContent && !current.hasStarted;\n\n        /**\n         * A prop is complete when it has started and either:\n         * 1. A following prop has started, OR\n         * 2. Generation is complete (for the final prop)\n         */\n        const hasFollowingPropStarted = propsStartingNow.some(\n          (startingKey) => startingKey !== key,\n        );\n        const isGenerationComplete =\n          generationStage === GenerationStage.COMPLETE;\n        const isComplete =\n          current.hasStarted &&\n          (hasFollowingPropStarted || isGenerationComplete) &&\n          !current.isComplete;\n\n        // Once a prop is complete for this message, it stays complete\n        if (current.isComplete && current.messageId === messageId) {\n          // Skip - already complete for this message\n          return;\n        }\n\n        if (justStarted || isComplete) {\n          updated[key] = {\n            ...current,\n            hasStarted: justStarted ? true : current.hasStarted,\n            isComplete: isComplete ? true : current.isComplete,\n            messageId,\n          };\n          hasChanges = true;\n        }\n      });\n\n      return hasChanges ? updated : prev;\n    });\n  }, [props, generationStage, messageId]);\n\n  /** Convert tracking state to PropStatus objects */\n  return useMemo(() => {\n    if (!props) return {} as Record<keyof Props, PropStatus>;\n\n    const result = {} as Record<keyof Props, PropStatus>;\n\n    Object.keys(props).forEach((key) => {\n      const tracking = propTracking[key] || {\n        hasStarted: false,\n        isComplete: false,\n        messageId: \"\",\n      };\n\n      // If this prop is complete for this message, it stays complete\n      const isCompleteForThisMessage =\n        tracking.isComplete && tracking.messageId === messageId;\n\n      // Only consider generation stage if this prop isn't already complete for this message\n      const isGenerationStreaming =\n        !isCompleteForThisMessage &&\n        generationStage === GenerationStage.STREAMING_RESPONSE;\n\n      result[key as keyof Props] = {\n        isPending: !tracking.hasStarted && !isCompleteForThisMessage,\n        isStreaming:\n          tracking.hasStarted &&\n          !isCompleteForThisMessage &&\n          isGenerationStreaming,\n        isSuccess: isCompleteForThisMessage,\n        error: tracking.error,\n      };\n    });\n\n    return result;\n  }, [props, propTracking, generationStage, messageId]);\n}\n\n/**\n * Derives global StreamStatus from generation stage and individual prop statuses.\n * Aggregates individual prop states into a unified stream status.\n * @template Props - The type of the component props\n * @param generationStage - The current generation stage from the LLM\n * @param propStatus - Status record for each individual prop\n * @param hasComponent - Whether a component exists in the current message\n * @param generationError - Any error from the generation process itself\n * @returns The aggregated StreamStatus for the entire component\n */\nfunction deriveGlobalStreamStatus<Props extends Record<string, any>>(\n  generationStage: GenerationStage,\n  propStatus: Record<keyof Props, PropStatus>,\n  hasComponent: boolean,\n  generationError?: Error,\n): StreamStatus {\n  const propStatuses = Object.values(propStatus);\n\n  // If all props are already successful, the component is complete regardless of generation stage\n  const allPropsSuccessful =\n    propStatuses.length > 0 && propStatuses.every((p) => p.isSuccess);\n\n  // Only consider generation stage if not all props are complete\n  const isGenerationStreaming =\n    !allPropsSuccessful &&\n    generationStage === GenerationStage.STREAMING_RESPONSE;\n  const isGenerationError = generationStage === GenerationStage.ERROR;\n\n  /** Find first error from generation or any prop */\n  const firstError =\n    generationError ?? propStatuses.find((p) => p.error)?.error;\n\n  return {\n    /** isPending: no component yet OR (has component but no props have started) */\n    isPending:\n      !hasComponent ||\n      (!isGenerationStreaming &&\n        !allPropsSuccessful &&\n        propStatuses.every((p) => p.isPending)),\n\n    /** isStreaming: any prop is streaming (generation stage doesn't matter if props are complete) */\n    isStreaming: propStatuses.some((p) => p.isStreaming),\n\n    /** isSuccess: all props successful (component is stable once all props complete) */\n    isSuccess: allPropsSuccessful,\n\n    /** isError: generation error OR any prop error */\n    isError:\n      isGenerationError ||\n      propStatuses.some((p) => p.error) ||\n      !!generationError,\n\n    streamError: firstError,\n  };\n}\n\n/**\n * Track streaming status for Tambo component props.\n *\n * **Important**: Props update repeatedly during streaming and may be partial.\n * Use `propStatus.<field>?.isSuccess` before treating a prop as complete.\n *\n * Pair with `useTamboComponentState` to disable inputs while streaming.\n * @see {@link https://docs.tambo.co/concepts/generative-interfaces/component-state}\n * @template Props - Component props type\n * @returns `streamStatus` (overall) and `propStatus` (per-prop) flags\n * @throws {Error} When used during SSR/SSG\n * @example\n * ```tsx\n * // Wait for entire stream\n * const { streamStatus } = useTamboStreamStatus();\n * if (!streamStatus.isSuccess) return <Spinner />;\n * return <Card {...props} />;\n * ```\n * @example\n * ```tsx\n * // Highlight in-flight props\n * const { propStatus } = useTamboStreamStatus<Props>();\n * <h2 className={propStatus.title.isStreaming ? \"animate-pulse\" : \"\"}>\n *   {title}\n * </h2>\n * ```\n */\nexport function useTamboStreamStatus<\n  Props extends Record<string, any> = Record<string, any>,\n>(): {\n  streamStatus: StreamStatus;\n  propStatus: Record<keyof Props, PropStatus>;\n} {\n  /** SSR Guard - ensure client-side only execution */\n  assertClientSide();\n\n  const { generationStage } = useTamboGenerationStage();\n  const message = useTamboCurrentMessage();\n\n  /** Get the current component props from the message */\n  const componentProps = (message?.component?.props as Props) || ({} as Props);\n\n  /** Track per-prop streaming status */\n  const propStatus = usePropsStreamingStatus(\n    componentProps,\n    generationStage,\n    message?.id ?? \"\",\n  );\n\n  /** Derive global stream status from prop statuses and generation stage */\n  const streamStatus = useMemo(() => {\n    const generationError = message?.error\n      ? new Error(message.error)\n      : undefined;\n    const hasComponent = !!message?.component;\n    return deriveGlobalStreamStatus(\n      generationStage,\n      propStatus,\n      hasComponent,\n      generationError,\n    );\n  }, [generationStage, propStatus, message]);\n\n  return {\n    streamStatus,\n    propStatus,\n  };\n}\n"]}

package/esm/hooks/use-tambo-stream-status.test.js

@@ -1,6 +1,6 @@
 import { renderHook } from "@testing-library/react";
-import { GenerationStage, } from "../model/generate-component-response";
-import { useTamboStreamStatus } from "./use-tambo-stream-status";
+import { GenerationStage, } from "../model/generate-component-response.js";
+import { useTamboStreamStatus } from "./use-tambo-stream-status.js";
 // Mock the required providers
 jest.mock("../providers/tambo-thread-provider", () => ({
     useTamboGenerationStage: jest.fn(),
@@ -9,8 +9,8 @@ jest.mock("./use-current-message", () => ({
     useTamboCurrentMessage: jest.fn(),
 }));
 // Import the mocked functions
-import { useTamboGenerationStage } from "../providers/tambo-thread-provider";
-import { useTamboCurrentMessage } from "./use-current-message";
+import { useTamboGenerationStage } from "../providers/tambo-thread-provider.js";
+import { useTamboCurrentMessage } from "./use-current-message.js";
 // Mock window for SSR tests
 const originalWindow = global.window;
 // Helper function to create mock ComponentDecisionV2

package/esm/hooks/use-tambo-threads.js

@@ -1,6 +1,6 @@
-import { useTamboThread } from "../providers";
-import { useTamboClient } from "../providers/tambo-client-provider";
-import { useTamboQuery } from "./react-query-hooks";
+import { useTamboThread } from "../providers/index.js";
+import { useTamboClient } from "../providers/tambo-client-provider.js";
+import { useTamboQuery } from "./react-query-hooks.js";
 /**
  * Get all the threads for the specified project.
  *

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

@@ -1,8 +1,8 @@
 import { QueryClient } from "@tanstack/react-query";
 import { renderHook, waitFor } from "@testing-library/react";
-import { useTamboThread } from "../providers";
-import { useTamboClient, useTamboQueryClient, } from "../providers/tambo-client-provider";
-import { useTamboThreadList } from "./use-tambo-threads";
+import { useTamboThread } from "../providers/index.js";
+import { useTamboClient, useTamboQueryClient, } from "../providers/tambo-client-provider.js";
+import { useTamboThreadList } from "./use-tambo-threads.js";
 jest.mock("../providers/tambo-client-provider", () => ({
     useTamboClient: jest.fn(),
     useTamboQueryClient: jest.fn(),

package/esm/hooks/use-tambo-voice.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useReactMediaRecorder } from "react-media-recorder";
-import { useTamboClient } from "../providers/tambo-client-provider";
-import { useTamboMutation } from "./react-query-hooks";
+import { useTamboClient } from "../providers/tambo-client-provider.js";
+import { useTamboMutation } from "./react-query-hooks.js";
 /**
  * Exposes functionality to record speech and transcribe it using the Tambo API.
  * @returns An object with:

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

@@ -2,8 +2,8 @@ import { act, renderHook, waitFor } from "@testing-library/react";
 import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useReactMediaRecorder } from "react-media-recorder";
-import { useTamboVoice } from "./use-tambo-voice";
-import { TamboClientContext } from "../providers/tambo-client-provider";
+import { useTamboVoice } from "./use-tambo-voice.js";
+import { TamboClientContext } from "../providers/tambo-client-provider.js";
 // Override the global mock from setupTests.ts with a controllable version
 jest.mock("react-media-recorder", () => ({
     useReactMediaRecorder: jest.fn(),
@@ -13,7 +13,7 @@ jest.mock("../providers/tambo-client-provider", () => ({
     ...jest.requireActual("../providers/tambo-client-provider"),
     useTamboClient: jest.fn(),
 }));
-import { useTamboClient } from "../providers/tambo-client-provider";
+import { useTamboClient } from "../providers/tambo-client-provider.js";
 // Mock fetch globally
 const mockFetch = jest.fn();
 describe("useTamboVoice", () => {

package/esm/index.d.ts

@@ -1,26 +1,26 @@
 /** Exports for the library. Only publically available exports are re-exported here. Anything not exported here is not supported and may change or break at any time. */
-export { useTamboComponentState } from "./hooks/use-component-state";
-export { TamboMessageProvider, useTamboCurrentComponent, useTamboCurrentMessage, type TamboCurrentComponent, } from "./hooks/use-current-message";
-export { useMessageImages, type StagedImage } from "./hooks/use-message-images";
-export { useTamboStreamingProps } from "./hooks/use-streaming-props";
-export * from "./hooks/use-suggestions";
-export { useTamboStreamStatus, type PropStatus, type StreamStatus, } from "./hooks/use-tambo-stream-status";
-export { useTamboVoice } from "./hooks/use-tambo-voice";
-export { TamboClientProvider, TamboComponentProvider, TamboContextAttachmentProvider, TamboContextHelpersProvider, TamboPropStreamProvider, TamboProvider, TamboRegistryProvider, TamboStubProvider, TamboThreadInputProvider, TamboThreadProvider, useIsTamboTokenUpdating, useTambo, useTamboClient, useTamboContextAttachment, useTamboContextHelpers, useTamboGenerationStage, useTamboMcpServerInfos, useTamboStream, useTamboThread, useTamboThreadInput, type ContextAttachment, type ContextAttachmentState, type RegisterToolFn, type RegisterToolsFn, type TamboComponent, type TamboContextAttachmentProviderProps, type TamboContextHelpersContextProps, type TamboContextHelpersProviderProps, type TamboRegistryContext, type TamboStubProviderProps, type TamboThreadInputContextProps, type TamboThreadProviderProps, } from "./providers";
+export { useTamboComponentState } from "./hooks/use-component-state.js";
+export { TamboMessageProvider, useTamboCurrentComponent, useTamboCurrentMessage, type TamboCurrentComponent, } from "./hooks/use-current-message.js";
+export { useMessageImages, type StagedImage } from "./hooks/use-message-images.js";
+export { useTamboStreamingProps } from "./hooks/use-streaming-props.js";
+export * from "./hooks/use-suggestions.js";
+export { useTamboStreamStatus, type PropStatus, type StreamStatus, } from "./hooks/use-tambo-stream-status.js";
+export { useTamboVoice } from "./hooks/use-tambo-voice.js";
+export { TamboClientProvider, TamboComponentProvider, TamboContextAttachmentProvider, TamboContextHelpersProvider, TamboPropStreamProvider, TamboProvider, TamboRegistryProvider, TamboStubProvider, TamboThreadInputProvider, TamboThreadProvider, useIsTamboTokenUpdating, useTambo, useTamboClient, useTamboContextAttachment, useTamboContextHelpers, useTamboGenerationStage, useTamboMcpServerInfos, useTamboStream, useTamboThread, useTamboThreadInput, type ContextAttachment, type ContextAttachmentState, type RegisterToolFn, type RegisterToolsFn, type TamboComponent, type TamboContextAttachmentProviderProps, type TamboContextHelpersContextProps, type TamboContextHelpersProviderProps, type TamboRegistryContext, type TamboStubProviderProps, type TamboThreadInputContextProps, type TamboThreadProviderProps, } from "./providers/index.js";
 export type { APIError, RateLimitError, TamboAIError, } from "@tambo-ai/typescript-sdk";
 export type { Suggestion, SuggestionGenerateParams, SuggestionGenerateResponse, SuggestionListResponse, } from "@tambo-ai/typescript-sdk/resources/beta/threads/suggestions";
-export { withTamboInteractable as withInteractable, type InteractableConfig, type WithTamboInteractableProps, } from "./hoc/with-tambo-interactable";
-export { useTamboThreadList } from "./hooks/use-tambo-threads";
-export { type ComponentContextToolMetadata, type ComponentRegistry, type ParameterSpec, type RegisteredComponent, type TamboTool, type ToolAnnotations, } from "./model/component-metadata";
-export { GenerationStage, type InteractableMetadata, type TamboThreadMessage, } from "./model/generate-component-response";
-export type { TamboInteractableComponent as InteractableComponent, TamboInteractableContext, } from "./model/tambo-interactable";
-export { type TamboThread } from "./model/tambo-thread";
-export { useCurrentInteractablesSnapshot, useTamboInteractable, } from "./providers/tambo-interactable-provider";
-export { type InitialTamboThreadMessage } from "./providers/tambo-thread-provider";
-export { defineTool } from "./util/registry";
-export { currentPageContextHelper, currentTimeContextHelper, } from "./context-helpers";
-export type { AdditionalContext, ContextHelperFn, ContextHelpers, } from "./context-helpers";
-export { MCPTransport } from "./model/mcp-server-info";
-export type { McpServerInfo, NormalizedMcpServerInfo, } from "./model/mcp-server-info";
-export type { ListResourceItem, ReadResourceResult, ResourceSource, } from "./model/resource-info";
+export { withTamboInteractable as withInteractable, type InteractableConfig, type WithTamboInteractableProps, } from "./hoc/with-tambo-interactable.js";
+export { useTamboThreadList } from "./hooks/use-tambo-threads.js";
+export { type ComponentContextToolMetadata, type ComponentRegistry, type ParameterSpec, type RegisteredComponent, type TamboTool, type ToolAnnotations, } from "./model/component-metadata.js";
+export { GenerationStage, type InteractableMetadata, type TamboThreadMessage, } from "./model/generate-component-response.js";
+export type { TamboInteractableComponent as InteractableComponent, TamboInteractableContext, } from "./model/tambo-interactable.js";
+export { type TamboThread } from "./model/tambo-thread.js";
+export { useCurrentInteractablesSnapshot, useTamboInteractable, } from "./providers/tambo-interactable-provider.js";
+export { type InitialTamboThreadMessage } from "./providers/tambo-thread-provider.js";
+export { defineTool } from "./util/registry.js";
+export { currentPageContextHelper, currentTimeContextHelper, } from "./context-helpers/index.js";
+export type { AdditionalContext, ContextHelperFn, ContextHelpers, } from "./context-helpers/index.js";
+export { MCPTransport } from "./model/mcp-server-info.js";
+export type { McpServerInfo, NormalizedMcpServerInfo, } from "./model/mcp-server-info.js";
+export type { ListResourceItem, ReadResourceResult, ResourceSource, } from "./model/resource-info.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/index.js

@@ -1,22 +1,22 @@
 /** Exports for the library. Only publically available exports are re-exported here. Anything not exported here is not supported and may change or break at any time. */
-export { useTamboComponentState } from "./hooks/use-component-state";
-export { TamboMessageProvider, useTamboCurrentComponent, useTamboCurrentMessage, } from "./hooks/use-current-message";
-export { useMessageImages } from "./hooks/use-message-images";
-export { useTamboStreamingProps } from "./hooks/use-streaming-props";
-export * from "./hooks/use-suggestions";
-export { useTamboStreamStatus, } from "./hooks/use-tambo-stream-status";
-export { useTamboVoice } from "./hooks/use-tambo-voice";
+export { useTamboComponentState } from "./hooks/use-component-state.js";
+export { TamboMessageProvider, useTamboCurrentComponent, useTamboCurrentMessage, } from "./hooks/use-current-message.js";
+export { useMessageImages } from "./hooks/use-message-images.js";
+export { useTamboStreamingProps } from "./hooks/use-streaming-props.js";
+export * from "./hooks/use-suggestions.js";
+export { useTamboStreamStatus, } from "./hooks/use-tambo-stream-status.js";
+export { useTamboVoice } from "./hooks/use-tambo-voice.js";
 // Re-export provider components
-export { TamboClientProvider, TamboComponentProvider, TamboContextAttachmentProvider, TamboContextHelpersProvider, TamboPropStreamProvider, TamboProvider, TamboRegistryProvider, TamboStubProvider, TamboThreadInputProvider, TamboThreadProvider, useIsTamboTokenUpdating, useTambo, useTamboClient, useTamboContextAttachment, useTamboContextHelpers, useTamboGenerationStage, useTamboMcpServerInfos, useTamboStream, useTamboThread, useTamboThreadInput, } from "./providers";
-export { withTamboInteractable as withInteractable, } from "./hoc/with-tambo-interactable";
-export { useTamboThreadList } from "./hooks/use-tambo-threads";
-export { GenerationStage, } from "./model/generate-component-response";
-export { useCurrentInteractablesSnapshot, useTamboInteractable, } from "./providers/tambo-interactable-provider";
-export { defineTool } from "./util/registry";
+export { TamboClientProvider, TamboComponentProvider, TamboContextAttachmentProvider, TamboContextHelpersProvider, TamboPropStreamProvider, TamboProvider, TamboRegistryProvider, TamboStubProvider, TamboThreadInputProvider, TamboThreadProvider, useIsTamboTokenUpdating, useTambo, useTamboClient, useTamboContextAttachment, useTamboContextHelpers, useTamboGenerationStage, useTamboMcpServerInfos, useTamboStream, useTamboThread, useTamboThreadInput, } from "./providers/index.js";
+export { withTamboInteractable as withInteractable, } from "./hoc/with-tambo-interactable.js";
+export { useTamboThreadList } from "./hooks/use-tambo-threads.js";
+export { GenerationStage, } from "./model/generate-component-response.js";
+export { useCurrentInteractablesSnapshot, useTamboInteractable, } from "./providers/tambo-interactable-provider.js";
+export { defineTool } from "./util/registry.js";
 // Context helpers exports
-export { currentPageContextHelper, currentTimeContextHelper, } from "./context-helpers";
+export { currentPageContextHelper, currentTimeContextHelper, } from "./context-helpers/index.js";
 // MCP server metadata types (used by TamboProvider / registry / MCP provider)
-export { MCPTransport } from "./model/mcp-server-info";
+export { MCPTransport } from "./model/mcp-server-info.js";
 // Note: Full MCP exports like TamboMcpProvider are available separately in the
 // @tambo-ai/react/mcp package
 //# sourceMappingURL=index.js.map

package/esm/mcp/elicitation.d.ts

@@ -1,5 +1,5 @@
 import type { ElicitRequestFormParams, PrimitiveSchemaDefinition } from "@modelcontextprotocol/sdk/spec.types.js";
-import { MCPElicitationHandler } from "./mcp-client";
+import { MCPElicitationHandler } from "./mcp-client.js";
 /**
  * Schema type for elicitation request fields
  */

package/esm/mcp/elicitation.test.js

@@ -1,5 +1,5 @@
 import { act, renderHook } from "@testing-library/react";
-import { useElicitation, } from "./elicitation";
+import { useElicitation, } from "./elicitation.js";
 // Create a mock RequestHandlerExtra for testing
 function createMockExtra() {
     return {