@tambo-ai/react 0.37.3 → 0.38.0

package/dist/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/dist/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/dist/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/dist/providers/index.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTamboThread = exports.TamboThreadProvider = exports.TamboThreadContext = exports.TamboStubProvider = exports.useTamboRegistry = exports.TamboRegistryProvider = exports.useTambo = exports.TamboProvider = exports.TamboContext = exports.useTamboComponent = exports.TamboComponentProvider = exports.useTamboClient = exports.TamboClientProvider = void 0;
+exports.useTamboThread = exports.TamboThreadProvider = exports.TamboThreadContext = exports.TamboStubProvider = exports.useTamboRegistry = exports.TamboRegistryProvider = exports.useTambo = exports.TamboProvider = exports.TamboContext = exports.TamboPropStreamProvider = exports.useTamboComponent = exports.TamboComponentProvider = exports.useTamboClient = exports.TamboClientProvider = void 0;
 var tambo_client_provider_1 = require("./tambo-client-provider");
 Object.defineProperty(exports, "TamboClientProvider", { enumerable: true, get: function () { return tambo_client_provider_1.TamboClientProvider; } });
 Object.defineProperty(exports, "useTamboClient", { enumerable: true, get: function () { return tambo_client_provider_1.useTamboClient; } });
 var tambo_component_provider_1 = require("./tambo-component-provider");
 Object.defineProperty(exports, "TamboComponentProvider", { enumerable: true, get: function () { return tambo_component_provider_1.TamboComponentProvider; } });
 Object.defineProperty(exports, "useTamboComponent", { enumerable: true, get: function () { return tambo_component_provider_1.useTamboComponent; } });
+var tambo_prop_stream_provider_1 = require("./tambo-prop-stream-provider");
+Object.defineProperty(exports, "TamboPropStreamProvider", { enumerable: true, get: function () { return tambo_prop_stream_provider_1.TamboPropStreamProvider; } });
 var tambo_provider_1 = require("./tambo-provider");
 Object.defineProperty(exports, "TamboContext", { enumerable: true, get: function () { return tambo_provider_1.TamboContext; } });
 Object.defineProperty(exports, "TamboProvider", { enumerable: true, get: function () { return tambo_provider_1.TamboProvider; } });

package/dist/providers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":";;;AACA,iEAA8E;AAArE,4HAAA,mBAAmB,OAAA;AAAE,uHAAA,cAAc,OAAA;AAC5C,uEAGoC;AAFlC,kIAAA,sBAAsB,OAAA;AACtB,6HAAA,iBAAiB,OAAA;AAEnB,mDAAyE;AAAhE,8GAAA,YAAY,OAAA;AAAE,+GAAA,aAAa,OAAA;AAAE,0GAAA,QAAQ,OAAA;AAC9C,qEAImC;AAHjC,gIAAA,qBAAqB,OAAA;AACrB,2HAAA,gBAAgB,OAAA;AAGlB,6CAA+E;AAAtE,gHAAA,iBAAiB,OAAA;AAC1B,iEAIiC;AAH/B,2HAAA,kBAAkB,OAAA;AAClB,4HAAA,mBAAmB,OAAA;AACnB,uHAAA,cAAc,OAAA","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,iEAA8E;AAArE,4HAAA,mBAAmB,OAAA;AAAE,uHAAA,cAAc,OAAA;AAC5C,uEAGoC;AAFlC,kIAAA,sBAAsB,OAAA;AACtB,6HAAA,iBAAiB,OAAA;AAEnB,2EAAuE;AAA9D,qIAAA,uBAAuB,OAAA;AAChC,mDAAyE;AAAhE,8GAAA,YAAY,OAAA;AAAE,+GAAA,aAAa,OAAA;AAAE,0GAAA,QAAQ,OAAA;AAC9C,qEAImC;AAHjC,gIAAA,qBAAqB,OAAA;AACrB,2HAAA,gBAAgB,OAAA;AAGlB,6CAA+E;AAAtE,gHAAA,iBAAiB,OAAA;AAC1B,iEAIiC;AAH/B,2HAAA,kBAAkB,OAAA;AAClB,4HAAA,mBAAmB,OAAA;AACnB,uHAAA,cAAc,OAAA","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/dist/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/dist/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/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