@tambo-ai/react 0.37.3 → 0.38.0

package/esm/providers/tambo-prop-stream-provider.js

@@ -0,0 +1,148 @@
+"use client";
+import React, { createContext, useContext, useMemo, } from "react";
+const TamboPropStreamContext = createContext(null);
+/**
+ * Loading component that renders children when the stream is in a loading state
+ * @param props - The props for the Loading component
+ * @param props.key - The key to identify this loading state
+ * @param props.children - The children to render when loading
+ * @param props.className - Optional className for styling
+ * @returns The Loading component
+ */
+const Loading = ({ streamKey = "default", children, className, }) => {
+    const { getStatusForKey } = useTamboStream();
+    const status = getStatusForKey(streamKey);
+    if (!status.isPending && !status.isStreaming) {
+        return null;
+    }
+    return (React.createElement("div", { className: className, "data-stream-key": streamKey, "data-stream-state": "loading" }, children));
+};
+/**
+ * Empty component that renders children when the stream has no data
+ * @param props - The props for the Empty component
+ * @param props.key - The key to identify this empty state
+ * @param props.children - The children to render when empty
+ * @param props.className - Optional className for styling
+ * @returns The Empty component
+ */
+const Empty = ({ streamKey = "default", children, className, }) => {
+    const { data, getStatusForKey } = useTamboStream();
+    const status = getStatusForKey(streamKey);
+    // Get the specific data for this key
+    const keyData = data && typeof data === "object" && !Array.isArray(data)
+        ? data[streamKey]
+        : data;
+    // Show empty state when not loading, not streaming, not successful, and no data for this key
+    const shouldShowEmpty = !status.isPending &&
+        !status.isStreaming &&
+        !status.isSuccess &&
+        !status.isError &&
+        (keyData === undefined || keyData === null || keyData === "");
+    if (!shouldShowEmpty) {
+        return null;
+    }
+    return (React.createElement("div", { className: className, "data-stream-key": streamKey, "data-stream-state": "empty" }, children));
+};
+/**
+ * Complete component that renders children when the stream has data
+ * @param props - The props for the Complete component
+ * @param props.key - The key to identify this complete state
+ * @param props.children - The children to render when complete
+ * @param props.className - Optional className for styling
+ * @returns The Complete component
+ */
+const Complete = ({ streamKey = "default", children, className, }) => {
+    const { data, getStatusForKey } = useTamboStream();
+    const status = getStatusForKey(streamKey);
+    // Get the specific data for this key
+    const keyData = data && typeof data === "object" && !Array.isArray(data)
+        ? data[streamKey]
+        : data;
+    // Show complete when we have data for this key and the stream is successful
+    const shouldShowComplete = status.isSuccess && keyData !== undefined && keyData !== null;
+    if (!shouldShowComplete) {
+        return null;
+    }
+    return (React.createElement("div", { className: className, "data-stream-key": streamKey, "data-stream-state": "complete" }, children));
+};
+/**
+ * Hook to use the TamboStream context
+ * @returns The TamboStream context
+ */
+export const useTamboStream = () => {
+    const context = useContext(TamboPropStreamContext);
+    if (!context) {
+        throw new Error("useTamboStream must be used within a TamboPropStreamProvider");
+    }
+    return context;
+};
+/**
+ * The TamboStreamProvider provides a context for managing stream states
+ * with compound components for Loading, Empty, and Complete states.
+ * @param props - The props for the TamboStreamProvider
+ * @param props.children - The children to wrap
+ * @param props.data - The stream data
+ * @param props.streamStatus - Optional stream status for more granular control
+ * @returns The TamboStreamProvider component
+ */
+const TamboPropStreamProviderComponent = ({ children, data, streamStatus }) => {
+    // Create a default stream status if none provided
+    const defaultStreamStatus = useMemo(() => ({
+        isPending: false, // No external stream, so not pending
+        isStreaming: false, // No external stream, so not streaming
+        isSuccess: true, // If no stream status provided, assume success
+        isError: false,
+        streamError: undefined,
+    }), []);
+    const finalStreamStatus = streamStatus ?? defaultStreamStatus;
+    // Track status by key for compound components
+    const keyStatusMap = useMemo(() => {
+        const map = new Map();
+        // Track per-key status based on data structure
+        // If data is an object with keys, create status for each key
+        if (data && typeof data === "object" && !Array.isArray(data)) {
+            Object.keys(data).forEach((key) => {
+                const keyData = data[key];
+                const hasData = keyData !== undefined && keyData !== null && keyData !== "";
+                map.set(key, {
+                    // If no external stream, show loading when key has no data
+                    isPending: finalStreamStatus.isPending ||
+                        (!finalStreamStatus.isStreaming && !hasData),
+                    isStreaming: finalStreamStatus.isStreaming && !hasData,
+                    isSuccess: finalStreamStatus.isSuccess && hasData,
+                    isError: finalStreamStatus.isError,
+                    error: finalStreamStatus.streamError,
+                });
+            });
+        }
+        // Always set default status for fallback
+        map.set("default", {
+            isPending: finalStreamStatus.isPending,
+            isStreaming: finalStreamStatus.isStreaming,
+            isSuccess: finalStreamStatus.isSuccess,
+            isError: finalStreamStatus.isError,
+            error: finalStreamStatus.streamError,
+        });
+        return map;
+    }, [finalStreamStatus, data]);
+    const getStatusForKey = useMemo(() => (key) => {
+        return (keyStatusMap.get(key) ??
+            keyStatusMap.get("default") ?? {
+            isPending: false,
+            isStreaming: false,
+            isSuccess: false,
+            isError: false,
+        });
+    }, [keyStatusMap]);
+    const contextValue = useMemo(() => ({
+        data,
+        streamStatus: finalStreamStatus,
+        getStatusForKey,
+    }), [data, finalStreamStatus, getStatusForKey]);
+    return (React.createElement(TamboPropStreamContext.Provider, { value: contextValue }, children));
+};
+export const TamboPropStreamProvider = TamboPropStreamProviderComponent;
+TamboPropStreamProvider.Loading = Loading;
+TamboPropStreamProvider.Empty = Empty;
+TamboPropStreamProvider.Complete = Complete;
+//# sourceMappingURL=tambo-prop-stream-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tambo-prop-stream-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-prop-stream-provider.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport React, {\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { StreamStatus } from \"../hooks/use-tambo-stream-status\";\n\ninterface TamboPropStreamContextValue {\n  /** The stream data */\n  data: any;\n  /** The stream status */\n  streamStatus: StreamStatus;\n  /** Get the status for a specific key */\n  getStatusForKey: (key: string) => {\n    isPending: boolean;\n    isStreaming: boolean;\n    isSuccess: boolean;\n    isError: boolean;\n    error?: Error;\n  };\n}\n\nconst TamboPropStreamContext =\n  createContext<TamboPropStreamContextValue | null>(null);\n\nexport interface TamboPropStreamProviderProps {\n  /** The stream data */\n  data: any;\n  /** Optional stream status for more granular control */\n  streamStatus?: StreamStatus;\n}\n\nexport interface LoadingProps {\n  /** The key to identify this loading state */\n  streamKey?: string;\n  /** The children to render when loading */\n  children: React.ReactNode;\n  /** Optional className for styling */\n  className?: string;\n}\n\nexport interface EmptyProps {\n  /** The key to identify this empty state */\n  streamKey?: string;\n  /** The children to render when empty */\n  children: React.ReactNode;\n  /** Optional className for styling */\n  className?: string;\n}\n\nexport interface CompleteProps {\n  /** The key to identify this complete state */\n  streamKey?: string;\n  /** The children to render when complete */\n  children: React.ReactNode;\n  /** Optional className for styling */\n  className?: string;\n}\n\n/**\n * Loading component that renders children when the stream is in a loading state\n * @param props - The props for the Loading component\n * @param props.key - The key to identify this loading state\n * @param props.children - The children to render when loading\n * @param props.className - Optional className for styling\n * @returns The Loading component\n */\nconst Loading: React.FC<LoadingProps> = ({\n  streamKey = \"default\",\n  children,\n  className,\n}) => {\n  const { getStatusForKey } = useTamboStream();\n  const status = getStatusForKey(streamKey);\n\n  if (!status.isPending && !status.isStreaming) {\n    return null;\n  }\n\n  return (\n    <div\n      className={className}\n      data-stream-key={streamKey}\n      data-stream-state=\"loading\"\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Empty component that renders children when the stream has no data\n * @param props - The props for the Empty component\n * @param props.key - The key to identify this empty state\n * @param props.children - The children to render when empty\n * @param props.className - Optional className for styling\n * @returns The Empty component\n */\nconst Empty: React.FC<EmptyProps> = ({\n  streamKey = \"default\",\n  children,\n  className,\n}) => {\n  const { data, getStatusForKey } = useTamboStream();\n  const status = getStatusForKey(streamKey);\n\n  // Get the specific data for this key\n  const keyData =\n    data && typeof data === \"object\" && !Array.isArray(data)\n      ? data[streamKey]\n      : data;\n\n  // Show empty state when not loading, not streaming, not successful, and no data for this key\n  const shouldShowEmpty =\n    !status.isPending &&\n    !status.isStreaming &&\n    !status.isSuccess &&\n    !status.isError &&\n    (keyData === undefined || keyData === null || keyData === \"\");\n\n  if (!shouldShowEmpty) {\n    return null;\n  }\n\n  return (\n    <div\n      className={className}\n      data-stream-key={streamKey}\n      data-stream-state=\"empty\"\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Complete component that renders children when the stream has data\n * @param props - The props for the Complete component\n * @param props.key - The key to identify this complete state\n * @param props.children - The children to render when complete\n * @param props.className - Optional className for styling\n * @returns The Complete component\n */\nconst Complete: React.FC<CompleteProps> = ({\n  streamKey = \"default\",\n  children,\n  className,\n}) => {\n  const { data, getStatusForKey } = useTamboStream();\n  const status = getStatusForKey(streamKey);\n\n  // Get the specific data for this key\n  const keyData =\n    data && typeof data === \"object\" && !Array.isArray(data)\n      ? data[streamKey]\n      : data;\n\n  // Show complete when we have data for this key and the stream is successful\n  const shouldShowComplete =\n    status.isSuccess && keyData !== undefined && keyData !== null;\n\n  if (!shouldShowComplete) {\n    return null;\n  }\n\n  return (\n    <div\n      className={className}\n      data-stream-key={streamKey}\n      data-stream-state=\"complete\"\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Hook to use the TamboStream context\n * @returns The TamboStream context\n */\nexport const useTamboStream = () => {\n  const context = useContext(TamboPropStreamContext);\n  if (!context) {\n    throw new Error(\n      \"useTamboStream must be used within a TamboPropStreamProvider\",\n    );\n  }\n  return context;\n};\n\n/**\n * The TamboStreamProvider provides a context for managing stream states\n * with compound components for Loading, Empty, and Complete states.\n * @param props - The props for the TamboStreamProvider\n * @param props.children - The children to wrap\n * @param props.data - The stream data\n * @param props.streamStatus - Optional stream status for more granular control\n * @returns The TamboStreamProvider component\n */\nconst TamboPropStreamProviderComponent: React.FC<\n  PropsWithChildren<TamboPropStreamProviderProps>\n> = ({ children, data, streamStatus }) => {\n  // Create a default stream status if none provided\n  const defaultStreamStatus: StreamStatus = useMemo(\n    () => ({\n      isPending: false, // No external stream, so not pending\n      isStreaming: false, // No external stream, so not streaming\n      isSuccess: true, // If no stream status provided, assume success\n      isError: false,\n      streamError: undefined,\n    }),\n    [],\n  );\n\n  const finalStreamStatus = streamStatus ?? defaultStreamStatus;\n\n  // Track status by key for compound components\n  const keyStatusMap = useMemo(() => {\n    const map = new Map<\n      string,\n      {\n        isPending: boolean;\n        isStreaming: boolean;\n        isSuccess: boolean;\n        isError: boolean;\n        error?: Error;\n      }\n    >();\n\n    // Track per-key status based on data structure\n    // If data is an object with keys, create status for each key\n    if (data && typeof data === \"object\" && !Array.isArray(data)) {\n      Object.keys(data).forEach((key) => {\n        const keyData = data[key];\n        const hasData =\n          keyData !== undefined && keyData !== null && keyData !== \"\";\n\n        map.set(key, {\n          // If no external stream, show loading when key has no data\n          isPending:\n            finalStreamStatus.isPending ||\n            (!finalStreamStatus.isStreaming && !hasData),\n          isStreaming: finalStreamStatus.isStreaming && !hasData,\n          isSuccess: finalStreamStatus.isSuccess && hasData,\n          isError: finalStreamStatus.isError,\n          error: finalStreamStatus.streamError,\n        });\n      });\n    }\n\n    // Always set default status for fallback\n    map.set(\"default\", {\n      isPending: finalStreamStatus.isPending,\n      isStreaming: finalStreamStatus.isStreaming,\n      isSuccess: finalStreamStatus.isSuccess,\n      isError: finalStreamStatus.isError,\n      error: finalStreamStatus.streamError,\n    });\n\n    return map;\n  }, [finalStreamStatus, data]);\n\n  const getStatusForKey = useMemo(\n    () => (key: string) => {\n      return (\n        keyStatusMap.get(key) ??\n        keyStatusMap.get(\"default\") ?? {\n          isPending: false,\n          isStreaming: false,\n          isSuccess: false,\n          isError: false,\n        }\n      );\n    },\n    [keyStatusMap],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      data,\n      streamStatus: finalStreamStatus,\n      getStatusForKey,\n    }),\n    [data, finalStreamStatus, getStatusForKey],\n  );\n\n  return (\n    <TamboPropStreamContext.Provider value={contextValue}>\n      {children}\n    </TamboPropStreamContext.Provider>\n  );\n};\n\n// Create the compound component type\ntype TamboPropStreamProviderCompound =\n  typeof TamboPropStreamProviderComponent & {\n    Loading: typeof Loading;\n    Empty: typeof Empty;\n    Complete: typeof Complete;\n  };\n\nexport const TamboPropStreamProvider =\n  TamboPropStreamProviderComponent as TamboPropStreamProviderCompound;\n\nTamboPropStreamProvider.Loading = Loading;\nTamboPropStreamProvider.Empty = Empty;\nTamboPropStreamProvider.Complete = Complete;\n"]}

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

@@ -1,11 +1,12 @@
 import React, { PropsWithChildren } from "react";
+import { TamboInteractableContext } from "../model/tambo-interactable";
 import { TamboClientContextProps, TamboClientProviderProps } from "./tambo-client-provider";
 import { TamboComponentContextProps } from "./tambo-component-provider";
 import { TamboRegistryProviderProps } from "./tambo-registry-provider";
 import { TamboThreadContextProps, TamboThreadProviderProps } from "./tambo-thread-provider";
 /**
  * The TamboProvider gives full access to the whole Tambo API. This includes the
- * TamboAI client, the component registry, and the current thread context.
+ * TamboAI client, the component registry, the current thread context, and interactable components.
  * @param props - The props for the TamboProvider
  * @param props.children - The children to wrap
  * @param props.tamboUrl - The URL of the Tambo API
@@ -17,11 +18,11 @@ import { TamboThreadContextProps, TamboThreadProviderProps } from "./tambo-threa
  * @returns The TamboProvider component
  */
 export declare const TamboProvider: React.FC<PropsWithChildren<TamboClientProviderProps & TamboRegistryProviderProps & TamboThreadProviderProps>>;
-export type TamboContextProps = TamboClientContextProps & TamboThreadContextProps & TamboComponentContextProps;
+export type TamboContextProps = TamboClientContextProps & TamboThreadContextProps & TamboComponentContextProps & TamboInteractableContext;
 export declare const TamboContext: React.Context<TamboContextProps>;
 /**
  * TamboCompositeProvider is a provider that combines the TamboClient,
- * TamboThread, and TamboComponent providers
+ * TamboThread, TamboComponent, and TamboInteractable providers
  * @param props - The props for the TamboCompositeProvider
  * @param props.children - The children to wrap
  * @returns The wrapped component
@@ -31,7 +32,8 @@ export declare const TamboCompositeProvider: React.FC<PropsWithChildren>;
  * The useTambo hook provides access to the Tambo API. This is the primary entrypoint
  * for the Tambo React SDK.
  *
- * This includes the TamboAI client, the component registry, and the current thread context.
+ * This includes the TamboAI client, the component registry, the current thread context,
+ * and interactable component management.
  * @returns The Tambo API
  */
 export declare const useTambo: () => TamboContextProps;

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,EAEvB,wBAAwB,EAEzB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,iBAAiB,CACf,wBAAwB,GACtB,0BAA0B,GAC1B,wBAAwB,CAC3B,CAgCF,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GACrD,uBAAuB,GACvB,0BAA0B,CAAC;AAE7B,eAAO,MAAM,YAAY,kCAExB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoB9D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,yBAEpB,CAAC"}
+{"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,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EACL,uBAAuB,EAEvB,wBAAwB,EAGzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,0BAA0B,EAG3B,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,uBAAuB,EAEvB,wBAAwB,EAEzB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,iBAAiB,CACf,wBAAwB,GACtB,0BAA0B,GAC1B,wBAAwB,CAC3B,CAkCF,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GACrD,uBAAuB,GACvB,0BAA0B,GAC1B,wBAAwB,CAAC;AAE3B,eAAO,MAAM,YAAY,kCAExB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsB9D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,yBAEpB,CAAC"}

package/esm/providers/tambo-provider.js

@@ -2,11 +2,12 @@
 import React, { createContext, useContext } from "react";
 import { TamboClientProvider, useTamboClient, useTamboQueryClient, } from "./tambo-client-provider";
 import { TamboComponentProvider, useTamboComponent, } from "./tambo-component-provider";
+import { TamboInteractableProvider, useTamboInteractable, } from "./tambo-interactable-provider";
 import { TamboRegistryProvider, } from "./tambo-registry-provider";
 import { TamboThreadProvider, useTamboThread, } from "./tambo-thread-provider";
 /**
  * The TamboProvider gives full access to the whole Tambo API. This includes the
- * TamboAI client, the component registry, and the current thread context.
+ * TamboAI client, the component registry, the current thread context, and interactable components.
  * @param props - The props for the TamboProvider
  * @param props.children - The children to wrap
  * @param props.tamboUrl - The URL of the Tambo API
@@ -26,12 +27,13 @@ export const TamboProvider = ({ children, tamboUrl, apiKey, userToken, component
         React.createElement(TamboRegistryProvider, { components: components, tools: tools },
             React.createElement(TamboThreadProvider, { streaming: streaming },
                 React.createElement(TamboComponentProvider, null,
-                    React.createElement(TamboCompositeProvider, null, children))))));
+                    React.createElement(TamboInteractableProvider, null,
+                        React.createElement(TamboCompositeProvider, null, children)))))));
 };
 export const TamboContext = createContext({});
 /**
  * TamboCompositeProvider is a provider that combines the TamboClient,
- * TamboThread, and TamboComponent providers
+ * TamboThread, TamboComponent, and TamboInteractable providers
  * @param props - The props for the TamboCompositeProvider
  * @param props.children - The children to wrap
  * @returns The wrapped component
@@ -41,18 +43,21 @@ export const TamboCompositeProvider = ({ children, }) => {
     const client = useTamboClient();
     const queryClient = useTamboQueryClient();
     const componentRegistry = useTamboComponent();
+    const interactableComponents = useTamboInteractable();
     return (React.createElement(TamboContext.Provider, { value: {
             client,
             queryClient,
             ...componentRegistry,
             ...threads,
+            ...interactableComponents,
         } }, children));
 };
 /**
  * The useTambo hook provides access to the Tambo API. This is the primary entrypoint
  * for the Tambo React SDK.
  *
- * This includes the TamboAI client, the component registry, and the current thread context.
+ * This includes the TamboAI client, the component registry, the current thread context,
+ * and interactable component management.
  * @returns The Tambo API
  */
 export const useTambo = () => {

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,EAEnB,cAAc,GACf,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,aAAa,GAMtB,CAAC,EACH,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,SAAS,GACV,EAAE,EAAE;IACH,iCAAiC;IACjC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,CAAC,KAAK,CAAC,6CAA6C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,CACL,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS;QAEpB,oBAAC,qBAAqB,IAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK;YACzD,oBAAC,mBAAmB,IAAC,SAAS,EAAE,SAAS;gBACvC,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,CAAC,MAAM,sBAAsB,GAAgC,CAAC,EAClE,QAAQ,GACT,EAAE,EAAE;IACH,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  TamboThreadProviderProps,\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 * @param props.tools - The tools to register\n * @param props.streaming - Whether to stream the response by default. Defaults to true.\n * @returns The TamboProvider component\n */\nexport const TamboProvider: React.FC<\n  PropsWithChildren<\n    TamboClientProviderProps &\n      TamboRegistryProviderProps &\n      TamboThreadProviderProps\n  >\n> = ({\n  children,\n  tamboUrl,\n  apiKey,\n  userToken,\n  components,\n  environment,\n  tools,\n  streaming,\n}) => {\n  // Should only be used in browser\n  if (typeof window === \"undefined\") {\n    console.error(\"TamboProvider must be used within a browser\");\n  }\n\n  return (\n    <TamboClientProvider\n      tamboUrl={tamboUrl}\n      apiKey={apiKey}\n      environment={environment}\n      userToken={userToken}\n    >\n      <TamboRegistryProvider components={components} tools={tools}>\n        <TamboThreadProvider streaming={streaming}>\n          <TamboComponentProvider>\n            <TamboCompositeProvider>{children}</TamboCompositeProvider>\n          </TamboComponentProvider>\n        </TamboThreadProvider>\n      </TamboRegistryProvider>\n    </TamboClientProvider>\n  );\n};\nexport type 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 */\nexport const TamboCompositeProvider: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\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,OAAO,KAAK,EAAE,EAAqB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAEL,mBAAmB,EAEnB,cAAc,EACd,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,qBAAqB,GAEtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,mBAAmB,EAEnB,cAAc,GACf,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,aAAa,GAMtB,CAAC,EACH,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,SAAS,GACV,EAAE,EAAE;IACH,iCAAiC;IACjC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,CAAC,KAAK,CAAC,6CAA6C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,CACL,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS;QAEpB,oBAAC,qBAAqB,IAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK;YACzD,oBAAC,mBAAmB,IAAC,SAAS,EAAE,SAAS;gBACvC,oBAAC,sBAAsB;oBACrB,oBAAC,yBAAyB;wBACxB,oBAAC,sBAAsB,QAAE,QAAQ,CAA0B,CACjC,CACL,CACL,CACA,CACJ,CACvB,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CACvC,EAAuB,CACxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAgC,CAAC,EAClE,QAAQ,GACT,EAAE,EAAE;IACH,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;IAC9C,MAAM,sBAAsB,GAAG,oBAAoB,EAAE,CAAC;IAEtD,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,MAAM;YACN,WAAW;YACX,GAAG,iBAAiB;YACpB,GAAG,OAAO;YACV,GAAG,sBAAsB;SAC1B,IAEA,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;GAOG;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 { TamboInteractableContext } from \"../model/tambo-interactable\";\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  TamboInteractableProvider,\n  useTamboInteractable,\n} from \"./tambo-interactable-provider\";\nimport {\n  TamboRegistryProvider,\n  TamboRegistryProviderProps,\n} from \"./tambo-registry-provider\";\nimport {\n  TamboThreadContextProps,\n  TamboThreadProvider,\n  TamboThreadProviderProps,\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, the current thread context, and interactable components.\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 * @param props.tools - The tools to register\n * @param props.streaming - Whether to stream the response by default. Defaults to true.\n * @returns The TamboProvider component\n */\nexport const TamboProvider: React.FC<\n  PropsWithChildren<\n    TamboClientProviderProps &\n      TamboRegistryProviderProps &\n      TamboThreadProviderProps\n  >\n> = ({\n  children,\n  tamboUrl,\n  apiKey,\n  userToken,\n  components,\n  environment,\n  tools,\n  streaming,\n}) => {\n  // Should only be used in browser\n  if (typeof window === \"undefined\") {\n    console.error(\"TamboProvider must be used within a browser\");\n  }\n\n  return (\n    <TamboClientProvider\n      tamboUrl={tamboUrl}\n      apiKey={apiKey}\n      environment={environment}\n      userToken={userToken}\n    >\n      <TamboRegistryProvider components={components} tools={tools}>\n        <TamboThreadProvider streaming={streaming}>\n          <TamboComponentProvider>\n            <TamboInteractableProvider>\n              <TamboCompositeProvider>{children}</TamboCompositeProvider>\n            </TamboInteractableProvider>\n          </TamboComponentProvider>\n        </TamboThreadProvider>\n      </TamboRegistryProvider>\n    </TamboClientProvider>\n  );\n};\n\nexport type TamboContextProps = TamboClientContextProps &\n  TamboThreadContextProps &\n  TamboComponentContextProps &\n  TamboInteractableContext;\n\nexport const TamboContext = createContext<TamboContextProps>(\n  {} as TamboContextProps,\n);\n\n/**\n * TamboCompositeProvider is a provider that combines the TamboClient,\n * TamboThread, TamboComponent, and TamboInteractable providers\n * @param props - The props for the TamboCompositeProvider\n * @param props.children - The children to wrap\n * @returns The wrapped component\n */\nexport const TamboCompositeProvider: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const threads = useTamboThread();\n  const client = useTamboClient();\n  const queryClient = useTamboQueryClient();\n  const componentRegistry = useTamboComponent();\n  const interactableComponents = useTamboInteractable();\n\n  return (\n    <TamboContext.Provider\n      value={{\n        client,\n        queryClient,\n        ...componentRegistry,\n        ...threads,\n        ...interactableComponents,\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, the current thread context,\n * and interactable component management.\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.37.3",
+  "version": "0.38.0",
   "description": "React client package for Tambo AI",
   "repository": {
     "type": "git",