@tambo-ai/react 0.37.2 → 0.38.0

package/esm/providers/hoc/with-tambo-interactable.js

@@ -0,0 +1,83 @@
+// react-sdk/src/providers/with-interactable.tsx
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useTamboInteractable } from "../tambo-interactable-provider";
+/**
+ * Higher-Order Component that makes any component interactable by tambo.
+ * @param WrappedComponent - The component to make interactable
+ * @param config - Configuration for the interactable component
+ * @returns A new component that is automatically registered as interactable
+ * @example
+ * ```tsx
+ * const MyInteractableNote = withTamboInteractable(MyNote, {
+ *   componentName: "MyNote",
+ *   description: "A note component",
+ *   propsSchema: z.object({
+ *     title: z.string(),
+ *     content: z.string(),
+ *   }),
+ * });
+ *
+ * // Usage
+ * <MyInteractableNote title="My Note" content="This is my note" />
+ * ```
+ */
+export function withTamboInteractable(WrappedComponent, config) {
+    const displayName = WrappedComponent.displayName ?? WrappedComponent.name ?? "Component";
+    const TamboInteractableWrapper = (props) => {
+        const { addInteractableComponent, updateInteractableComponentProps, getInteractableComponent, } = useTamboInteractable();
+        const [interactableId, setInteractableId] = useState(null);
+        const isInitialized = useRef(false);
+        const lastParentProps = useRef({});
+        // Extract interactable-specific props
+        const { onInteractableReady, onPropsUpdate, ...componentProps } = props;
+        // Get the current interactable component to track prop updates
+        const currentInteractable = interactableId
+            ? getInteractableComponent(interactableId)
+            : null;
+        // Use the props from the interactable component if available, otherwise use the passed props
+        // We need to be careful not to create a loop, so we only use stored props if they're different from passed props
+        const effectiveProps = currentInteractable?.props ?? componentProps;
+        // Memoize the registration function
+        const registerComponent = useCallback(() => {
+            if (!isInitialized.current) {
+                const id = addInteractableComponent({
+                    name: config.componentName,
+                    description: config.description,
+                    component: WrappedComponent,
+                    props: componentProps,
+                    propsSchema: config.propsSchema,
+                });
+                setInteractableId(id);
+                onInteractableReady?.(id);
+                isInitialized.current = true;
+            }
+        }, [addInteractableComponent, componentProps, onInteractableReady]);
+        // Register the component as interactable on mount (only once)
+        useEffect(() => {
+            registerComponent();
+        }, [registerComponent]);
+        // Update the interactable component when props change from parent
+        useEffect(() => {
+            if (interactableId && isInitialized.current) {
+                // Only update if the props are different from what we last sent
+                const lastPropsString = JSON.stringify(lastParentProps.current);
+                const currentPropsString = JSON.stringify(componentProps);
+                if (lastPropsString !== currentPropsString) {
+                    updateInteractableComponentProps(interactableId, componentProps);
+                    onPropsUpdate?.(componentProps);
+                    lastParentProps.current = componentProps;
+                }
+            }
+        }, [
+            interactableId,
+            componentProps,
+            updateInteractableComponentProps,
+            onPropsUpdate,
+        ]);
+        return React.createElement(WrappedComponent, { ...effectiveProps });
+    };
+    TamboInteractableWrapper.displayName = `withTamboInteractable(${displayName})`;
+    return TamboInteractableWrapper;
+}
+//# sourceMappingURL=with-tambo-interactable.js.map

package/esm/providers/hoc/with-tambo-interactable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-tambo-interactable.js","sourceRoot":"","sources":["../../../src/providers/hoc/with-tambo-interactable.tsx"],"names":[],"mappings":"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","sourcesContent":["// react-sdk/src/providers/with-interactable.tsx\n\"use client\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport { useTamboInteractable } from \"../tambo-interactable-provider\";\n\nexport interface InteractableConfig {\n  componentName: string;\n  description: string;\n  propsSchema?: z.ZodTypeAny;\n}\n\nexport interface WithTamboInteractableProps {\n  interactableId?: string;\n  onInteractableReady?: (id: string) => void;\n  onPropsUpdate?: (newProps: Record<string, any>) => void;\n}\n\n/**\n * Higher-Order Component that makes any component interactable by tambo.\n * @param WrappedComponent - The component to make interactable\n * @param config - Configuration for the interactable component\n * @returns A new component that is automatically registered as interactable\n * @example\n * ```tsx\n * const MyInteractableNote = withTamboInteractable(MyNote, {\n *   componentName: \"MyNote\",\n *   description: \"A note component\",\n *   propsSchema: z.object({\n *     title: z.string(),\n *     content: z.string(),\n *   }),\n * });\n *\n * // Usage\n * <MyInteractableNote title=\"My Note\" content=\"This is my note\" />\n * ```\n */\nexport function withTamboInteractable<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  config: InteractableConfig,\n) {\n  const displayName =\n    WrappedComponent.displayName ?? WrappedComponent.name ?? \"Component\";\n\n  const TamboInteractableWrapper: React.FC<P & WithTamboInteractableProps> = (\n    props,\n  ) => {\n    const {\n      addInteractableComponent,\n      updateInteractableComponentProps,\n      getInteractableComponent,\n    } = useTamboInteractable();\n\n    const [interactableId, setInteractableId] = useState<string | null>(null);\n    const isInitialized = useRef(false);\n    const lastParentProps = useRef<Record<string, any>>({});\n\n    // Extract interactable-specific props\n    const { onInteractableReady, onPropsUpdate, ...componentProps } =\n      props as P & WithTamboInteractableProps;\n\n    // Get the current interactable component to track prop updates\n    const currentInteractable = interactableId\n      ? getInteractableComponent(interactableId)\n      : null;\n\n    // Use the props from the interactable component if available, otherwise use the passed props\n    // We need to be careful not to create a loop, so we only use stored props if they're different from passed props\n    const effectiveProps = currentInteractable?.props ?? componentProps;\n\n    // Memoize the registration function\n    const registerComponent = useCallback(() => {\n      if (!isInitialized.current) {\n        const id = addInteractableComponent({\n          name: config.componentName,\n          description: config.description,\n          component: WrappedComponent,\n          props: componentProps,\n          propsSchema: config.propsSchema,\n        });\n\n        setInteractableId(id);\n        onInteractableReady?.(id);\n        isInitialized.current = true;\n      }\n    }, [addInteractableComponent, componentProps, onInteractableReady]);\n\n    // Register the component as interactable on mount (only once)\n    useEffect(() => {\n      registerComponent();\n    }, [registerComponent]);\n\n    // Update the interactable component when props change from parent\n    useEffect(() => {\n      if (interactableId && isInitialized.current) {\n        // Only update if the props are different from what we last sent\n        const lastPropsString = JSON.stringify(lastParentProps.current);\n        const currentPropsString = JSON.stringify(componentProps);\n\n        if (lastPropsString !== currentPropsString) {\n          updateInteractableComponentProps(interactableId, componentProps);\n          onPropsUpdate?.(componentProps);\n          lastParentProps.current = componentProps;\n        }\n      }\n    }, [\n      interactableId,\n      componentProps,\n      updateInteractableComponentProps,\n      onPropsUpdate,\n    ]);\n\n    return <WrappedComponent {...(effectiveProps as P)} />;\n  };\n\n  TamboInteractableWrapper.displayName = `withTamboInteractable(${displayName})`;\n\n  return TamboInteractableWrapper;\n}\n"]}

package/esm/providers/index.d.ts

@@ -1,6 +1,7 @@
 export type { TamboComponent, TamboTool } from "../model/component-metadata";
 export { TamboClientProvider, useTamboClient } from "./tambo-client-provider";
 export { TamboComponentProvider, useTamboComponent, } from "./tambo-component-provider";
+export { TamboPropStreamProvider } from "./tambo-prop-stream-provider";
 export { TamboContext, TamboProvider, useTambo } from "./tambo-provider";
 export { TamboRegistryProvider, useTamboRegistry, type TamboRegistryContext, } from "./tambo-registry-provider";
 export { TamboStubProvider, type TamboStubProviderProps } from "./tambo-stubs";

package/esm/providers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EACL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,oBAAoB,GAC1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,cAAc,GACf,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EACL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,oBAAoB,GAC1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,cAAc,GACf,MAAM,yBAAyB,CAAC"}

package/esm/providers/index.js

@@ -1,5 +1,6 @@
 export { TamboClientProvider, useTamboClient } from "./tambo-client-provider";
 export { TamboComponentProvider, useTamboComponent, } from "./tambo-component-provider";
+export { TamboPropStreamProvider } from "./tambo-prop-stream-provider";
 export { TamboContext, TamboProvider, useTambo } from "./tambo-provider";
 export { TamboRegistryProvider, useTamboRegistry, } from "./tambo-registry-provider";
 export { TamboStubProvider } from "./tambo-stubs";

package/esm/providers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EACL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EACL,qBAAqB,EACrB,gBAAgB,GAEjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,iBAAiB,EAA+B,MAAM,eAAe,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,cAAc,GACf,MAAM,yBAAyB,CAAC","sourcesContent":["export type { TamboComponent, TamboTool } from \"../model/component-metadata\";\nexport { TamboClientProvider, useTamboClient } from \"./tambo-client-provider\";\nexport {\n  TamboComponentProvider,\n  useTamboComponent,\n} from \"./tambo-component-provider\";\nexport { TamboContext, TamboProvider, useTambo } from \"./tambo-provider\";\nexport {\n  TamboRegistryProvider,\n  useTamboRegistry,\n  type TamboRegistryContext,\n} from \"./tambo-registry-provider\";\nexport { TamboStubProvider, type TamboStubProviderProps } from \"./tambo-stubs\";\nexport {\n  TamboThreadContext,\n  TamboThreadProvider,\n  useTamboThread,\n} from \"./tambo-thread-provider\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EACL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EACL,qBAAqB,EACrB,gBAAgB,GAEjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,iBAAiB,EAA+B,MAAM,eAAe,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,cAAc,GACf,MAAM,yBAAyB,CAAC","sourcesContent":["export type { TamboComponent, TamboTool } from \"../model/component-metadata\";\nexport { TamboClientProvider, useTamboClient } from \"./tambo-client-provider\";\nexport {\n  TamboComponentProvider,\n  useTamboComponent,\n} from \"./tambo-component-provider\";\nexport { TamboPropStreamProvider } from \"./tambo-prop-stream-provider\";\nexport { TamboContext, TamboProvider, useTambo } from \"./tambo-provider\";\nexport {\n  TamboRegistryProvider,\n  useTamboRegistry,\n  type TamboRegistryContext,\n} from \"./tambo-registry-provider\";\nexport { TamboStubProvider, type TamboStubProviderProps } from \"./tambo-stubs\";\nexport {\n  TamboThreadContext,\n  TamboThreadProvider,\n  useTamboThread,\n} from \"./tambo-thread-provider\";\n"]}

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

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from "react";
+import { type TamboInteractableContext } from "../model/tambo-interactable";
+declare const TamboInteractableContext: React.Context<TamboInteractableContext>;
+/**
+ * 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
+ */
+export declare const TamboInteractableProvider: React.FC<PropsWithChildren>;
+/**
+ * The useTamboInteractable hook provides access to the interactable component
+ * management functions.
+ * @returns The interactable component management functions
+ */
+export declare const useTamboInteractable: () => TamboInteractableContext;
+export {};
+//# sourceMappingURL=tambo-interactable-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tambo-interactable-provider.d.ts","sourceRoot":"","sources":["../../src/providers/tambo-interactable-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,6BAA6B,CAAC;AAGrC,QAAA,MAAM,wBAAwB,yCAQ5B,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4PjE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gCAEhC,CAAC"}

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

@@ -0,0 +1,205 @@
+// react-sdk/src/providers/tambo-interactable-provider.tsx
+"use client";
+import React, { createContext, useCallback, useContext, useEffect, useState, } from "react";
+import { z } from "zod";
+import { useTamboComponent } from "./tambo-component-provider";
+const TamboInteractableContext = 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
+ */
+export const TamboInteractableProvider = ({ children, }) => {
+    const [interactableComponents, setInteractableComponents] = useState([]);
+    const { registerTool } = useTamboComponent();
+    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: z.function().returns(z.object({
+                components: z.array(z.object({
+                    id: z.string(),
+                    componentName: z.string(),
+                    props: z.record(z.any()),
+                    propsSchema: 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: z
+                .function()
+                .args(z.string())
+                .returns(z.object({
+                success: z.boolean(),
+                component: z
+                    .object({
+                    id: z.string(),
+                    componentName: z.string(),
+                    props: z.record(z.any()),
+                })
+                    .optional(),
+                error: 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: z
+                .function()
+                .args(z.string())
+                .returns(z.object({
+                success: z.boolean(),
+                componentId: z.string(),
+                removedComponent: z.object({
+                    id: z.string(),
+                    componentName: z.string(),
+                    props: z.record(z.any()),
+                }),
+                error: z.string().optional(),
+            })),
+        });
+    }, [interactableComponents, registerTool]);
+    const updateInteractableComponentProps = 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 = useCallback((component) => {
+        const schemaForArgs = typeof component.propsSchema === "object" &&
+            "describe" in component.propsSchema
+            ? component.propsSchema
+            : 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: z
+                .function()
+                .args(z
+                .string()
+                .describe("The ID of the interactable component to update"), schemaForArgs.describe("The new props to update the component with"))
+                .returns(z.string()),
+        });
+    }, [registerTool, updateInteractableComponentProps]);
+    const addInteractableComponent = 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 = useCallback((id) => {
+        setInteractableComponents((prev) => prev.filter((c) => c.id !== id));
+    }, []);
+    const getInteractableComponent = useCallback((id) => {
+        return interactableComponents.find((c) => c.id === id);
+    }, [interactableComponents]);
+    const getInteractableComponentsByName = useCallback((componentName) => {
+        return interactableComponents.filter((c) => c.name === componentName);
+    }, [interactableComponents]);
+    const clearAllInteractableComponents = useCallback(() => {
+        setInteractableComponents([]);
+    }, []);
+    const value = {
+        interactableComponents,
+        addInteractableComponent,
+        removeInteractableComponent,
+        updateInteractableComponentProps,
+        getInteractableComponent,
+        getInteractableComponentsByName,
+        clearAllInteractableComponents,
+    };
+    return (React.createElement(TamboInteractableContext.Provider, { value: value }, children));
+};
+/**
+ * The useTamboInteractable hook provides access to the interactable component
+ * management functions.
+ * @returns The interactable component management functions
+ */
+export const useTamboInteractable = () => {
+    return useContext(TamboInteractableContext);
+};
+//# sourceMappingURL=tambo-interactable-provider.js.map

package/esm/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/esm/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/esm/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/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