@tambo-ai/react 0.37.2 → 0.38.0

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

@@ -0,0 +1,243 @@
+"use strict";
+// react-sdk/src/providers/tambo-interactable-provider.tsx
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTamboInteractable = exports.TamboInteractableProvider = void 0;
+const react_1 = __importStar(require("react"));
+const zod_1 = require("zod");
+const tambo_component_provider_1 = require("./tambo-component-provider");
+const TamboInteractableContext = (0, react_1.createContext)({
+    interactableComponents: [],
+    addInteractableComponent: () => "",
+    removeInteractableComponent: () => { },
+    updateInteractableComponentProps: () => { },
+    getInteractableComponent: () => undefined,
+    getInteractableComponentsByName: () => [],
+    clearAllInteractableComponents: () => { },
+});
+/**
+ * The TamboInteractableProvider manages a list of components that are currently
+ * interactable, allowing tambo to interact with them by updating their props. It also registers tools
+ * for Tambo to perform CRUD operations on the components list.
+ * @param props - The props for the TamboInteractableProvider
+ * @param props.children - The children to wrap
+ * @returns The TamboInteractableProvider component
+ */
+const TamboInteractableProvider = ({ children, }) => {
+    const [interactableComponents, setInteractableComponents] = (0, react_1.useState)([]);
+    const { registerTool } = (0, tambo_component_provider_1.useTamboComponent)();
+    (0, react_1.useEffect)(() => {
+        registerTool({
+            name: "get_all_interactable_components",
+            description: "Get all currently interactable components with their details including their current props. These are components that you can interact with on behalf of the user.",
+            tool: () => {
+                return {
+                    components: interactableComponents,
+                };
+            },
+            toolSchema: zod_1.z.function().returns(zod_1.z.object({
+                components: zod_1.z.array(zod_1.z.object({
+                    id: zod_1.z.string(),
+                    componentName: zod_1.z.string(),
+                    props: zod_1.z.record(zod_1.z.any()),
+                    propsSchema: zod_1.z.object({}).optional(),
+                })),
+            })),
+        });
+        registerTool({
+            name: "get_interactable_component_by_id",
+            description: "Get a specific interactable component by its ID",
+            tool: (componentId) => {
+                const component = interactableComponents.find((c) => c.id === componentId);
+                if (!component) {
+                    return {
+                        success: false,
+                        error: `Component with ID ${componentId} not found`,
+                    };
+                }
+                return {
+                    success: true,
+                    component: {
+                        id: component.id,
+                        componentName: component.name,
+                        props: component.props,
+                    },
+                };
+            },
+            toolSchema: zod_1.z
+                .function()
+                .args(zod_1.z.string())
+                .returns(zod_1.z.object({
+                success: zod_1.z.boolean(),
+                component: zod_1.z
+                    .object({
+                    id: zod_1.z.string(),
+                    componentName: zod_1.z.string(),
+                    props: zod_1.z.record(zod_1.z.any()),
+                })
+                    .optional(),
+                error: zod_1.z.string().optional(),
+            })),
+        });
+        registerTool({
+            name: "remove_interactable_component",
+            description: "Remove an interactable component from the system",
+            tool: (componentId) => {
+                const component = interactableComponents.find((c) => c.id === componentId);
+                if (!component) {
+                    return {
+                        success: false,
+                        error: `Component with ID ${componentId} not found`,
+                    };
+                }
+                setInteractableComponents((prev) => prev.filter((c) => c.id !== componentId));
+                return {
+                    success: true,
+                    componentId,
+                    removedComponent: {
+                        id: component.id,
+                        componentName: component.name,
+                        props: component.props,
+                    },
+                };
+            },
+            toolSchema: zod_1.z
+                .function()
+                .args(zod_1.z.string())
+                .returns(zod_1.z.object({
+                success: zod_1.z.boolean(),
+                componentId: zod_1.z.string(),
+                removedComponent: zod_1.z.object({
+                    id: zod_1.z.string(),
+                    componentName: zod_1.z.string(),
+                    props: zod_1.z.record(zod_1.z.any()),
+                }),
+                error: zod_1.z.string().optional(),
+            })),
+        });
+    }, [interactableComponents, registerTool]);
+    const updateInteractableComponentProps = (0, react_1.useCallback)((id, newProps) => {
+        let updateResult = "Updated successfully";
+        setInteractableComponents((prev) => {
+            const componentExists = prev.some((c) => c.id === id);
+            if (!componentExists) {
+                updateResult = `Error: Component with ID ${id} not found`;
+                return prev;
+            }
+            const updatedComponents = prev.map((c) => c.id === id ? { ...c, props: { ...c.props, ...newProps } } : c);
+            // Check if the update actually changed anything
+            const originalComponent = prev.find((c) => c.id === id);
+            const updatedComponent = updatedComponents.find((c) => c.id === id);
+            if (!originalComponent || !updatedComponent) {
+                updateResult = `Error: Failed to update component with ID ${id}`;
+                return prev;
+            }
+            // Check if props actually changed
+            const propsChanged = JSON.stringify(originalComponent.props) !==
+                JSON.stringify(updatedComponent.props);
+            if (!propsChanged) {
+                updateResult = `Warning: No changes detected for component with ID ${id}. The update might not have worked.`;
+                return prev;
+            }
+            return updatedComponents;
+        });
+        return updateResult;
+    }, []);
+    const registerInteractableComponentUpdateTool = (0, react_1.useCallback)((component) => {
+        const schemaForArgs = typeof component.propsSchema === "object" &&
+            "describe" in component.propsSchema
+            ? component.propsSchema
+            : zod_1.z.object({});
+        registerTool({
+            name: `update_interactable_component_${component.id}`,
+            description: `Update the props of interactable component ${component.id} (${component.name})`,
+            tool: (componentId, newProps) => {
+                return updateInteractableComponentProps(componentId, newProps);
+            },
+            toolSchema: zod_1.z
+                .function()
+                .args(zod_1.z
+                .string()
+                .describe("The ID of the interactable component to update"), schemaForArgs.describe("The new props to update the component with"))
+                .returns(zod_1.z.string()),
+        });
+    }, [registerTool, updateInteractableComponentProps]);
+    const addInteractableComponent = (0, react_1.useCallback)((component) => {
+        const id = `${component.name}-${Math.random().toString(36).substr(2, 9)}`;
+        const newComponent = {
+            ...component,
+            id,
+        };
+        registerInteractableComponentUpdateTool(newComponent);
+        setInteractableComponents((prev) => {
+            return [...prev, newComponent];
+        });
+        return id;
+    }, [registerInteractableComponentUpdateTool]);
+    const removeInteractableComponent = (0, react_1.useCallback)((id) => {
+        setInteractableComponents((prev) => prev.filter((c) => c.id !== id));
+    }, []);
+    const getInteractableComponent = (0, react_1.useCallback)((id) => {
+        return interactableComponents.find((c) => c.id === id);
+    }, [interactableComponents]);
+    const getInteractableComponentsByName = (0, react_1.useCallback)((componentName) => {
+        return interactableComponents.filter((c) => c.name === componentName);
+    }, [interactableComponents]);
+    const clearAllInteractableComponents = (0, react_1.useCallback)(() => {
+        setInteractableComponents([]);
+    }, []);
+    const value = {
+        interactableComponents,
+        addInteractableComponent,
+        removeInteractableComponent,
+        updateInteractableComponentProps,
+        getInteractableComponent,
+        getInteractableComponentsByName,
+        clearAllInteractableComponents,
+    };
+    return (react_1.default.createElement(TamboInteractableContext.Provider, { value: value }, children));
+};
+exports.TamboInteractableProvider = TamboInteractableProvider;
+/**
+ * The useTamboInteractable hook provides access to the interactable component
+ * management functions.
+ * @returns The interactable component management functions
+ */
+const useTamboInteractable = () => {
+    return (0, react_1.useContext)(TamboInteractableContext);
+};
+exports.useTamboInteractable = useTamboInteractable;
+//# sourceMappingURL=tambo-interactable-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tambo-interactable-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-interactable-provider.tsx"],"names":[],"mappings":"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","sourcesContent":["// react-sdk/src/providers/tambo-interactable-provider.tsx\n\"use client\";\nimport React, {\n  createContext,\n  PropsWithChildren,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport { z } from \"zod\";\nimport {\n  TamboInteractableComponent,\n  type TamboInteractableContext,\n} from \"../model/tambo-interactable\";\nimport { useTamboComponent } from \"./tambo-component-provider\";\n\nconst TamboInteractableContext = createContext<TamboInteractableContext>({\n  interactableComponents: [],\n  addInteractableComponent: () => \"\",\n  removeInteractableComponent: () => {},\n  updateInteractableComponentProps: () => {},\n  getInteractableComponent: () => undefined,\n  getInteractableComponentsByName: () => [],\n  clearAllInteractableComponents: () => {},\n});\n\n/**\n * The TamboInteractableProvider manages a list of components that are currently\n * interactable, allowing tambo to interact with them by updating their props. It also registers tools\n * for Tambo to perform CRUD operations on the components list.\n * @param props - The props for the TamboInteractableProvider\n * @param props.children - The children to wrap\n * @returns The TamboInteractableProvider component\n */\nexport const TamboInteractableProvider: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const [interactableComponents, setInteractableComponents] = useState<\n    TamboInteractableComponent[]\n  >([]);\n  const { registerTool } = useTamboComponent();\n\n  useEffect(() => {\n    registerTool({\n      name: \"get_all_interactable_components\",\n      description:\n        \"Get all currently interactable components with their details including their current props. These are components that you can interact with on behalf of the user.\",\n      tool: () => {\n        return {\n          components: interactableComponents,\n        };\n      },\n      toolSchema: z.function().returns(\n        z.object({\n          components: z.array(\n            z.object({\n              id: z.string(),\n              componentName: z.string(),\n              props: z.record(z.any()),\n              propsSchema: z.object({}).optional(),\n            }),\n          ),\n        }),\n      ),\n    });\n\n    registerTool({\n      name: \"get_interactable_component_by_id\",\n      description: \"Get a specific interactable component by its ID\",\n      tool: (componentId: string) => {\n        const component = interactableComponents.find(\n          (c) => c.id === componentId,\n        );\n\n        if (!component) {\n          return {\n            success: false,\n            error: `Component with ID ${componentId} not found`,\n          };\n        }\n\n        return {\n          success: true,\n          component: {\n            id: component.id,\n            componentName: component.name,\n            props: component.props,\n          },\n        };\n      },\n      toolSchema: z\n        .function()\n        .args(z.string())\n        .returns(\n          z.object({\n            success: z.boolean(),\n            component: z\n              .object({\n                id: z.string(),\n                componentName: z.string(),\n                props: z.record(z.any()),\n              })\n              .optional(),\n            error: z.string().optional(),\n          }),\n        ),\n    });\n\n    registerTool({\n      name: \"remove_interactable_component\",\n      description: \"Remove an interactable component from the system\",\n      tool: (componentId: string) => {\n        const component = interactableComponents.find(\n          (c) => c.id === componentId,\n        );\n\n        if (!component) {\n          return {\n            success: false,\n            error: `Component with ID ${componentId} not found`,\n          };\n        }\n\n        setInteractableComponents((prev) =>\n          prev.filter((c) => c.id !== componentId),\n        );\n\n        return {\n          success: true,\n          componentId,\n          removedComponent: {\n            id: component.id,\n            componentName: component.name,\n            props: component.props,\n          },\n        };\n      },\n      toolSchema: z\n        .function()\n        .args(z.string())\n        .returns(\n          z.object({\n            success: z.boolean(),\n            componentId: z.string(),\n            removedComponent: z.object({\n              id: z.string(),\n              componentName: z.string(),\n              props: z.record(z.any()),\n            }),\n            error: z.string().optional(),\n          }),\n        ),\n    });\n  }, [interactableComponents, registerTool]);\n\n  const updateInteractableComponentProps = useCallback(\n    (id: string, newProps: Record<string, any>) => {\n      let updateResult = \"Updated successfully\";\n\n      setInteractableComponents((prev) => {\n        const componentExists = prev.some((c) => c.id === id);\n\n        if (!componentExists) {\n          updateResult = `Error: Component with ID ${id} not found`;\n          return prev;\n        }\n\n        const updatedComponents = prev.map((c) =>\n          c.id === id ? { ...c, props: { ...c.props, ...newProps } } : c,\n        );\n\n        // Check if the update actually changed anything\n        const originalComponent = prev.find((c) => c.id === id);\n        const updatedComponent = updatedComponents.find((c) => c.id === id);\n\n        if (!originalComponent || !updatedComponent) {\n          updateResult = `Error: Failed to update component with ID ${id}`;\n          return prev;\n        }\n\n        // Check if props actually changed\n        const propsChanged =\n          JSON.stringify(originalComponent.props) !==\n          JSON.stringify(updatedComponent.props);\n\n        if (!propsChanged) {\n          updateResult = `Warning: No changes detected for component with ID ${id}. The update might not have worked.`;\n          return prev;\n        }\n\n        return updatedComponents;\n      });\n\n      return updateResult;\n    },\n    [],\n  );\n\n  const registerInteractableComponentUpdateTool = useCallback(\n    (component: TamboInteractableComponent) => {\n      const schemaForArgs =\n        typeof component.propsSchema === \"object\" &&\n        \"describe\" in component.propsSchema\n          ? component.propsSchema\n          : z.object({});\n\n      registerTool({\n        name: `update_interactable_component_${component.id}`,\n        description: `Update the props of interactable component ${component.id} (${component.name})`,\n        tool: (componentId: string, newProps: any) => {\n          return updateInteractableComponentProps(componentId, newProps);\n        },\n        toolSchema: z\n          .function()\n          .args(\n            z\n              .string()\n              .describe(\"The ID of the interactable component to update\"),\n            schemaForArgs.describe(\n              \"The new props to update the component with\",\n            ),\n          )\n          .returns(z.string()),\n      });\n    },\n    [registerTool, updateInteractableComponentProps],\n  );\n\n  const addInteractableComponent = useCallback(\n    (\n      component: Omit<TamboInteractableComponent, \"id\" | \"createdAt\">,\n    ): string => {\n      const id = `${component.name}-${Math.random().toString(36).substr(2, 9)}`;\n      const newComponent: TamboInteractableComponent = {\n        ...component,\n        id,\n      };\n\n      registerInteractableComponentUpdateTool(newComponent);\n\n      setInteractableComponents((prev) => {\n        return [...prev, newComponent];\n      });\n\n      return id;\n    },\n    [registerInteractableComponentUpdateTool],\n  );\n\n  const removeInteractableComponent = useCallback((id: string) => {\n    setInteractableComponents((prev) => prev.filter((c) => c.id !== id));\n  }, []);\n\n  const getInteractableComponent = useCallback(\n    (id: string) => {\n      return interactableComponents.find((c) => c.id === id);\n    },\n    [interactableComponents],\n  );\n\n  const getInteractableComponentsByName = useCallback(\n    (componentName: string) => {\n      return interactableComponents.filter((c) => c.name === componentName);\n    },\n    [interactableComponents],\n  );\n\n  const clearAllInteractableComponents = useCallback(() => {\n    setInteractableComponents([]);\n  }, []);\n\n  const value: TamboInteractableContext = {\n    interactableComponents,\n    addInteractableComponent,\n    removeInteractableComponent,\n    updateInteractableComponentProps,\n    getInteractableComponent,\n    getInteractableComponentsByName,\n    clearAllInteractableComponents,\n  };\n\n  return (\n    <TamboInteractableContext.Provider value={value}>\n      {children}\n    </TamboInteractableContext.Provider>\n  );\n};\n\n/**\n * The useTamboInteractable hook provides access to the interactable component\n * management functions.\n * @returns The interactable component management functions\n */\nexport const useTamboInteractable = () => {\n  return useContext(TamboInteractableContext);\n};\n"]}

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

@@ -0,0 +1,96 @@
+import React, { PropsWithChildren } from "react";
+import { StreamStatus } from "../hooks/use-tambo-stream-status";
+interface TamboPropStreamContextValue {
+    /** The stream data */
+    data: any;
+    /** The stream status */
+    streamStatus: StreamStatus;
+    /** Get the status for a specific key */
+    getStatusForKey: (key: string) => {
+        isPending: boolean;
+        isStreaming: boolean;
+        isSuccess: boolean;
+        isError: boolean;
+        error?: Error;
+    };
+}
+export interface TamboPropStreamProviderProps {
+    /** The stream data */
+    data: any;
+    /** Optional stream status for more granular control */
+    streamStatus?: StreamStatus;
+}
+export interface LoadingProps {
+    /** The key to identify this loading state */
+    streamKey?: string;
+    /** The children to render when loading */
+    children: React.ReactNode;
+    /** Optional className for styling */
+    className?: string;
+}
+export interface EmptyProps {
+    /** The key to identify this empty state */
+    streamKey?: string;
+    /** The children to render when empty */
+    children: React.ReactNode;
+    /** Optional className for styling */
+    className?: string;
+}
+export interface CompleteProps {
+    /** The key to identify this complete state */
+    streamKey?: string;
+    /** The children to render when complete */
+    children: React.ReactNode;
+    /** Optional className for styling */
+    className?: string;
+}
+/**
+ * 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
+ */
+declare const Loading: React.FC<LoadingProps>;
+/**
+ * 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
+ */
+declare const Empty: React.FC<EmptyProps>;
+/**
+ * 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
+ */
+declare const Complete: React.FC<CompleteProps>;
+/**
+ * Hook to use the TamboStream context
+ * @returns The TamboStream context
+ */
+export declare const useTamboStream: () => TamboPropStreamContextValue;
+/**
+ * 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
+ */
+declare const TamboPropStreamProviderComponent: React.FC<PropsWithChildren<TamboPropStreamProviderProps>>;
+type TamboPropStreamProviderCompound = typeof TamboPropStreamProviderComponent & {
+    Loading: typeof Loading;
+    Empty: typeof Empty;
+    Complete: typeof Complete;
+};
+export declare const TamboPropStreamProvider: TamboPropStreamProviderCompound;
+export {};
+//# sourceMappingURL=tambo-prop-stream-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tambo-prop-stream-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-prop-stream-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,UAAU,2BAA2B;IACnC,sBAAsB;IACtB,IAAI,EAAE,GAAG,CAAC;IACV,wBAAwB;IACxB,YAAY,EAAE,YAAY,CAAC;IAC3B,wCAAwC;IACxC,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK;QAChC,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,OAAO,CAAC;QACrB,SAAS,EAAE,OAAO,CAAC;QACnB,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;CACH;AAKD,MAAM,WAAW,4BAA4B;IAC3C,sBAAsB;IACtB,IAAI,EAAE,GAAG,CAAC;IACV,uDAAuD;IACvD,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqBnC,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAmC/B,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+BrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,mCAQ1B,CAAC;AAEF;;;;;;;;GAQG;AACH,QAAA,MAAM,gCAAgC,EAAE,KAAK,CAAC,EAAE,CAC9C,iBAAiB,CAAC,4BAA4B,CAAC,CA2FhD,CAAC;AAGF,KAAK,+BAA+B,GAClC,OAAO,gCAAgC,GAAG;IACxC,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,QAAQ,EAAE,OAAO,QAAQ,CAAC;CAC3B,CAAC;AAEJ,eAAO,MAAM,uBAAuB,EACE,+BAA+B,CAAC"}

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

@@ -0,0 +1,185 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TamboPropStreamProvider = exports.useTamboStream = void 0;
+const react_1 = __importStar(require("react"));
+const TamboPropStreamContext = (0, react_1.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 } = (0, exports.useTamboStream)();
+    const status = getStatusForKey(streamKey);
+    if (!status.isPending && !status.isStreaming) {
+        return null;
+    }
+    return (react_1.default.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 } = (0, exports.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_1.default.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 } = (0, exports.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_1.default.createElement("div", { className: className, "data-stream-key": streamKey, "data-stream-state": "complete" }, children));
+};
+/**
+ * Hook to use the TamboStream context
+ * @returns The TamboStream context
+ */
+const useTamboStream = () => {
+    const context = (0, react_1.useContext)(TamboPropStreamContext);
+    if (!context) {
+        throw new Error("useTamboStream must be used within a TamboPropStreamProvider");
+    }
+    return context;
+};
+exports.useTamboStream = useTamboStream;
+/**
+ * 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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => (key) => {
+        return (keyStatusMap.get(key) ??
+            keyStatusMap.get("default") ?? {
+            isPending: false,
+            isStreaming: false,
+            isSuccess: false,
+            isError: false,
+        });
+    }, [keyStatusMap]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        data,
+        streamStatus: finalStreamStatus,
+        getStatusForKey,
+    }), [data, finalStreamStatus, getStatusForKey]);
+    return (react_1.default.createElement(TamboPropStreamContext.Provider, { value: contextValue }, children));
+};
+exports.TamboPropStreamProvider = TamboPropStreamProviderComponent;
+exports.TamboPropStreamProvider.Loading = Loading;
+exports.TamboPropStreamProvider.Empty = Empty;
+exports.TamboPropStreamProvider.Complete = Complete;
+//# sourceMappingURL=tambo-prop-stream-provider.js.map

package/dist/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":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAKe;AAkBf,MAAM,sBAAsB,GAC1B,IAAA,qBAAa,EAAqC,IAAI,CAAC,CAAC;AAoC1D;;;;;;;GAOG;AACH,MAAM,OAAO,GAA2B,CAAC,EACvC,SAAS,GAAG,SAAS,EACrB,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAE,eAAe,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC7C,MAAM,MAAM,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE1C,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;QAC7C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uCACE,SAAS,EAAE,SAAS,qBACH,SAAS,uBACR,SAAS,IAE1B,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,KAAK,GAAyB,CAAC,EACnC,SAAS,GAAG,SAAS,EACrB,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IACnD,MAAM,MAAM,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE1C,qCAAqC;IACrC,MAAM,OAAO,GACX,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QACjB,CAAC,CAAC,IAAI,CAAC;IAEX,6FAA6F;IAC7F,MAAM,eAAe,GACnB,CAAC,MAAM,CAAC,SAAS;QACjB,CAAC,MAAM,CAAC,WAAW;QACnB,CAAC,MAAM,CAAC,SAAS;QACjB,CAAC,MAAM,CAAC,OAAO;QACf,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,EAAE,CAAC,CAAC;IAEhE,IAAI,CAAC,eAAe,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uCACE,SAAS,EAAE,SAAS,qBACH,SAAS,uBACR,OAAO,IAExB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,QAAQ,GAA4B,CAAC,EACzC,SAAS,GAAG,SAAS,EACrB,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IACnD,MAAM,MAAM,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE1C,qCAAqC;IACrC,MAAM,OAAO,GACX,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QACjB,CAAC,CAAC,IAAI,CAAC;IAEX,4EAA4E;IAC5E,MAAM,kBAAkB,GACtB,MAAM,CAAC,SAAS,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,CAAC;IAEhE,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uCACE,SAAS,EAAE,SAAS,qBACH,SAAS,uBACR,UAAU,IAE3B,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACI,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,sBAAsB,CAAC,CAAC;IACnD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,8DAA8D,CAC/D,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,cAAc,kBAQzB;AAEF;;;;;;;;GAQG;AACH,MAAM,gCAAgC,GAElC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE;IACvC,kDAAkD;IAClD,MAAM,mBAAmB,GAAiB,IAAA,eAAO,EAC/C,GAAG,EAAE,CAAC,CAAC;QACL,SAAS,EAAE,KAAK,EAAE,qCAAqC;QACvD,WAAW,EAAE,KAAK,EAAE,uCAAuC;QAC3D,SAAS,EAAE,IAAI,EAAE,+CAA+C;QAChE,OAAO,EAAE,KAAK;QACd,WAAW,EAAE,SAAS;KACvB,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,iBAAiB,GAAG,YAAY,IAAI,mBAAmB,CAAC;IAE9D,8CAA8C;IAC9C,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAChC,MAAM,GAAG,GAAG,IAAI,GAAG,EAShB,CAAC;QAEJ,+CAA+C;QAC/C,6DAA6D;QAC7D,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAChC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC1B,MAAM,OAAO,GACX,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,EAAE,CAAC;gBAE9D,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE;oBACX,2DAA2D;oBAC3D,SAAS,EACP,iBAAiB,CAAC,SAAS;wBAC3B,CAAC,CAAC,iBAAiB,CAAC,WAAW,IAAI,CAAC,OAAO,CAAC;oBAC9C,WAAW,EAAE,iBAAiB,CAAC,WAAW,IAAI,CAAC,OAAO;oBACtD,SAAS,EAAE,iBAAiB,CAAC,SAAS,IAAI,OAAO;oBACjD,OAAO,EAAE,iBAAiB,CAAC,OAAO;oBAClC,KAAK,EAAE,iBAAiB,CAAC,WAAW;iBACrC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;QAED,yCAAyC;QACzC,GAAG,CAAC,GAAG,CAAC,SAAS,EAAE;YACjB,SAAS,EAAE,iBAAiB,CAAC,SAAS;YACtC,WAAW,EAAE,iBAAiB,CAAC,WAAW;YAC1C,SAAS,EAAE,iBAAiB,CAAC,SAAS;YACtC,OAAO,EAAE,iBAAiB,CAAC,OAAO;YAClC,KAAK,EAAE,iBAAiB,CAAC,WAAW;SACrC,CAAC,CAAC;QAEH,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE9B,MAAM,eAAe,GAAG,IAAA,eAAO,EAC7B,GAAG,EAAE,CAAC,CAAC,GAAW,EAAE,EAAE;QACpB,OAAO,CACL,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC;YACrB,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI;YAC7B,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,KAAK;SACf,CACF,CAAC;IACJ,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,eAAO,EAC1B,GAAG,EAAE,CAAC,CAAC;QACL,IAAI;QACJ,YAAY,EAAE,iBAAiB;QAC/B,eAAe;KAChB,CAAC,EACF,CAAC,IAAI,EAAE,iBAAiB,EAAE,eAAe,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,8BAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IACjD,QAAQ,CACuB,CACnC,CAAC;AACJ,CAAC,CAAC;AAUW,QAAA,uBAAuB,GAClC,gCAAmE,CAAC;AAEtE,+BAAuB,CAAC,OAAO,GAAG,OAAO,CAAC;AAC1C,+BAAuB,CAAC,KAAK,GAAG,KAAK,CAAC;AACtC,+BAAuB,CAAC,QAAQ,GAAG,QAAQ,CAAC","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/dist/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/dist/providers/tambo-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAC5E,OAAO,EACL,uBAAuB,EAEvB,wBAAwB,EAGzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,0BAA0B,EAG3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,uBAAuB,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"}