@tambo-ai/react 0.73.1 → 0.74.0

package/esm/schema/schema.test.js

@@ -1,8 +1,8 @@
 import * as z3 from "zod/v3";
 import * as z4 from "zod/v4";
-import { looksLikeJSONSchema } from "./json-schema";
-import { getParametersFromToolSchema, safeSchemaToJsonSchema, schemaToJsonSchema, } from "./schema";
-import { isStandardSchema } from "./standard-schema";
+import { looksLikeJSONSchema } from "./json-schema.js";
+import { getParametersFromToolSchema, safeSchemaToJsonSchema, schemaToJsonSchema, } from "./schema.js";
+import { isStandardSchema } from "./standard-schema.js";
 describe("schema utilities", () => {
     describe("looksLikeJSONSchema", () => {
         it("returns true for a basic JSON Schema object", () => {

package/esm/schema/standard-schema.test.js

@@ -1,6 +1,6 @@
 import * as z3 from "zod/v3";
 import * as z4 from "zod/v4";
-import { isStandardSchema } from "./standard-schema";
+import { isStandardSchema } from "./standard-schema.js";
 describe("isStandardSchema", () => {
     describe("returns true for valid Standard Schema implementations", () => {
         it("recognizes Zod 4 object schema", () => {

package/esm/schema/validate.js

@@ -1,5 +1,5 @@
-import { schemaToJsonSchema } from "./schema";
-import { isStandardSchema } from "./standard-schema";
+import { schemaToJsonSchema } from "./schema.js";
+import { isStandardSchema } from "./standard-schema.js";
 /*
  * Check if a JSON Schema represents a record type (map with dynamic keys).
  *

package/esm/schema/validate.test.js

@@ -1,5 +1,5 @@
 import { z } from "zod/v4";
-import { assertNoRecordSchema } from "./validate";
+import { assertNoRecordSchema } from "./validate.js";
 describe("assertNoRecordSchema", () => {
     describe("falsy inputs", () => {
         it("should return early for null", () => {

package/esm/testing/tools.d.ts

@@ -1,4 +1,4 @@
-import { TamboComponent, TamboTool } from "../providers";
+import { TamboComponent, TamboTool } from "../providers/index.js";
 /**
  * Serializes the registry for testing purposes.
  * Converts Standard Schema validators to JSON Schema format.
@@ -8,12 +8,12 @@ import { TamboComponent, TamboTool } from "../providers";
  */
 export declare function serializeRegistry(mockRegistry: TamboComponent[]): {
     props: import("json-schema").JSONSchema7 | undefined;
-    contextTools: import("..").ComponentContextToolMetadata[] | undefined;
+    contextTools: import("../index.js").ComponentContextToolMetadata[] | undefined;
     name: string;
     description: string;
     propsDefinition?: any;
     loadingComponent?: import("react").ComponentType<any>;
-    annotations?: import("..").ToolAnnotations;
+    annotations?: import("../index.js").ToolAnnotations;
 }[];
 interface CreateMockToolOptions {
     inputSchema: TamboTool["inputSchema"];

package/esm/testing/tools.js

@@ -1,5 +1,5 @@
-import { isStandardSchema, safeSchemaToJsonSchema } from "../schema";
-import { mapTamboToolToContextTool } from "../util/registry";
+import { isStandardSchema, safeSchemaToJsonSchema } from "../schema/index.js";
+import { mapTamboToolToContextTool } from "../util/registry.js";
 /**
  * Serializes the registry for testing purposes.
  * Converts Standard Schema validators to JSON Schema format.

package/esm/util/content-parts.test.js

@@ -1,4 +1,4 @@
-import { isContentPartArray, isContentPart, toText } from "./content-parts";
+import { isContentPartArray, isContentPart, toText } from "./content-parts.js";
 describe("content-parts type guards", () => {
     it("returns true for a valid text content part array", () => {
         const parts = [{ type: "text", text: "hello" }];

package/esm/util/generate-component.d.ts

@@ -1,6 +1,6 @@
 import TamboAI from "@tambo-ai/typescript-sdk";
-import { ComponentRegistry } from "../model/component-metadata";
-import { TamboThreadMessage } from "../model/generate-component-response";
+import { ComponentRegistry } from "../model/component-metadata.js";
+import { TamboThreadMessage } from "../model/generate-component-response.js";
 /**
  * Generate a message that has a component rendered into it, if the message
  * came with one.

package/esm/util/generate-component.js

@@ -1,9 +1,9 @@
 import { parse } from "partial-json";
 import React from "react";
-import { wrapWithTamboMessageProvider } from "../hooks/use-current-message";
-import { isStandardSchema } from "../schema";
-import { isPromise } from "../util/is-promise";
-import { getComponentFromRegistry } from "../util/registry";
+import { wrapWithTamboMessageProvider } from "../hooks/use-current-message.js";
+import { isStandardSchema } from "../schema/index.js";
+import { isPromise } from "../util/is-promise.js";
+import { getComponentFromRegistry } from "../util/registry.js";
 /**
  * Generate a message that has a component rendered into it, if the message
  * came with one.

package/esm/util/generate-component.test.js

@@ -1,6 +1,6 @@
 import React from "react";
-import * as useCurrentMessage from "../hooks/use-current-message";
-import { renderComponentIntoMessage } from "./generate-component";
+import * as useCurrentMessage from "../hooks/use-current-message.js";
+import { renderComponentIntoMessage } from "./generate-component.js";
 // Track calls to wrapWithTamboMessageProvider
 let wrapWithTamboMessageProviderSpy;
 beforeEach(() => {

package/esm/util/is-promise.test.js

@@ -1,4 +1,4 @@
-import { isPromise } from "../util/is-promise";
+import { isPromise } from "../util/is-promise.js";
 describe("isPromise", () => {
     it("should return true for real Promise instances", () => {
         expect(isPromise(Promise.resolve(1))).toBe(true);

package/esm/util/mcp-server-utils.d.ts

@@ -1,4 +1,4 @@
-import type { McpServerInfo, NormalizedMcpServerInfo } from "../model/mcp-server-info";
+import type { McpServerInfo, NormalizedMcpServerInfo } from "../model/mcp-server-info.js";
 /**
  * Derives a short, meaningful key from a server URL.
  * Strips TLDs and common prefixes to get a human-readable identifier.

package/esm/util/mcp-server-utils.js

@@ -1,4 +1,4 @@
-import { getMcpServerUniqueKey, MCPTransport } from "../model/mcp-server-info";
+import { getMcpServerUniqueKey, MCPTransport } from "../model/mcp-server-info.js";
 /**
  * Derives a short, meaningful key from a server URL.
  * Strips TLDs and common prefixes to get a human-readable identifier.

package/esm/util/mcp-server-utils.test.js

@@ -1,5 +1,5 @@
-import { MCPTransport } from "../model/mcp-server-info";
-import { deduplicateMcpServers, deriveServerKey, normalizeServerInfo, } from "./mcp-server-utils";
+import { MCPTransport } from "../model/mcp-server-info.js";
+import { deduplicateMcpServers, deriveServerKey, normalizeServerInfo, } from "./mcp-server-utils.js";
 describe("deriveServerKey", () => {
     it("should extract key from simple domain", () => {
         expect(deriveServerKey("https://linear.app/mcp")).toBe("linear");

package/esm/util/message-builder.d.ts

@@ -1,6 +1,6 @@
 import type { ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
 import type TamboAI from "@tambo-ai/typescript-sdk";
-import { StagedImage } from "../hooks/use-message-images";
+import { StagedImage } from "../hooks/use-message-images.js";
 /**
  * Builds message content with text, MCP resource references, and images
  * @param text - The text content, may include \@serverKey:uri resource references

package/esm/util/message-builder.test.js

@@ -1,4 +1,4 @@
-import { buildMessageContent } from "./message-builder";
+import { buildMessageContent } from "./message-builder.js";
 describe("buildMessageContent", () => {
     const createMockStagedImage = (overrides = {}) => ({
         id: "test-id",

package/esm/util/query-utils.test.js

@@ -1,4 +1,4 @@
-import { combineMutationResults, combineQueryResults } from "./query-utils";
+import { combineMutationResults, combineQueryResults } from "./query-utils.js";
 function createMutationResult(status, overrides = {}) {
     const base = {
         data: undefined,

package/esm/util/registry-validators.d.ts

@@ -1,4 +1,4 @@
-import type { TamboComponent, TamboTool } from "../model/component-metadata";
+import type { TamboComponent, TamboTool } from "../model/component-metadata.js";
 /**
  * Validates a tool before registration.
  * Throws an error if the tool is invalid.

package/esm/util/registry-validators.js

@@ -1,5 +1,5 @@
-import { assertNoRecordSchema, isStandardSchema, looksLikeJSONSchema, schemaToJsonSchema, } from "../schema";
-import { assertValidName } from "./validate-component-name";
+import { assertNoRecordSchema, isStandardSchema, looksLikeJSONSchema, schemaToJsonSchema, } from "../schema/index.js";
+import { assertValidName } from "./validate-component-name.js";
 /**
  * Checks if a JSON Schema represents an object type.
  * @param schema - The JSON Schema to check

package/esm/util/registry-validators.test.js

@@ -1,5 +1,5 @@
 import { z } from "zod/v3";
-import { validateAndPrepareComponent, validateTool, validateToolAssociation, } from "./registry-validators";
+import { validateAndPrepareComponent, validateTool, validateToolAssociation, } from "./registry-validators.js";
 describe("validateTool", () => {
     it("should validate tool with valid name", () => {
         const tool = {

package/esm/util/registry.d.ts

@@ -1,5 +1,5 @@
 import TamboAI from "@tambo-ai/typescript-sdk";
-import { ComponentContextToolMetadata, ComponentRegistry, DefineToolFn, RegisteredComponent, TamboTool, TamboToolAssociations, TamboToolRegistry } from "../model/component-metadata";
+import { ComponentContextToolMetadata, ComponentRegistry, DefineToolFn, RegisteredComponent, TamboTool, TamboToolAssociations, TamboToolRegistry } from "../model/component-metadata.js";
 /**
  * Get all the available components from the component registry
  * @param componentRegistry - The component registry

package/esm/util/registry.js

@@ -1,4 +1,4 @@
-import { getParametersFromToolSchema, isStandardSchema, schemaToJsonSchema, } from "../schema";
+import { getParametersFromToolSchema, isStandardSchema, schemaToJsonSchema, } from "../schema/index.js";
 /**
  * Get all the available components from the component registry
  * @param componentRegistry - The component registry

package/esm/util/registry.test.js

@@ -1,7 +1,7 @@
 import * as z3 from "zod/v3";
 import * as z4 from "zod/v4";
-import { createMockTool } from "../testing/tools";
-import { convertPropsToJsonSchema, getAvailableComponents, getComponentFromRegistry, getUnassociatedTools, mapTamboToolToContextTool, } from "./registry";
+import { createMockTool } from "../testing/tools.js";
+import { convertPropsToJsonSchema, getAvailableComponents, getComponentFromRegistry, getUnassociatedTools, mapTamboToolToContextTool, } from "./registry.js";
 describe("getParametersFromToolSchema (via mapTamboToolToContextTool)", () => {
     describe("inputSchema interface (object schemas)", () => {
         describe("Zod 4 object schemas", () => {

package/esm/util/resource-content-resolver.d.ts

@@ -1,6 +1,6 @@
 import type { ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
-import type { McpServer } from "../mcp/tambo-mcp-provider";
-import type { ResourceSource } from "../model/resource-info";
+import type { McpServer } from "../mcp/tambo-mcp-provider.js";
+import type { ResourceSource } from "../model/resource-info.js";
 /**
  * Resolves content for client-side resources (MCP and registry).
  * Server-side (internal Tambo) resources are skipped - the backend can resolve them.

package/esm/util/resource-content-resolver.js

@@ -1,4 +1,4 @@
-import { REGISTRY_SERVER_KEY, ServerType } from "../mcp/mcp-constants";
+import { REGISTRY_SERVER_KEY, ServerType } from "../mcp/mcp-constants.js";
 /**
  * Type guard for narrowing McpServer to a connected server.
  * A connected server has a non-null client.

package/esm/util/resource-content-resolver.test.js

@@ -1,6 +1,6 @@
-import { ServerType } from "../mcp/mcp-constants";
-import { MCPTransport } from "../mcp/mcp-client";
-import { resolveResourceContents, extractResourceUris, } from "./resource-content-resolver";
+import { ServerType } from "../mcp/mcp-constants.js";
+import { MCPTransport } from "../mcp/mcp-client.js";
+import { resolveResourceContents, extractResourceUris, } from "./resource-content-resolver.js";
 describe("extractResourceUris", () => {
     it("should extract a single resource URI", () => {
         const text = "Check @registry:file:///path/to/doc.txt";

package/esm/util/resource-validators.d.ts

@@ -1,4 +1,4 @@
-import type { ListResourceItem, ResourceSource } from "../model/resource-info";
+import type { ListResourceItem, ResourceSource } from "../model/resource-info.js";
 /**
  * Validates that a ResourceSource has both listResources and getResource defined,
  * or neither defined. You cannot provide one without the other.

package/esm/util/resource-validators.test.js

@@ -1,4 +1,4 @@
-import { validateResource, validateResourceSource, } from "./resource-validators";
+import { validateResource, validateResourceSource, } from "./resource-validators.js";
 describe("validateResourceSource", () => {
     it("should throw when has listResources but not getResource", () => {
         const listResources = async () => [];

package/esm/util/tool-caller.d.ts

@@ -1,5 +1,5 @@
 import TamboAI from "@tambo-ai/typescript-sdk";
-import { TamboTool, TamboToolRegistry } from "../model/component-metadata";
+import { TamboTool, TamboToolRegistry } from "../model/component-metadata.js";
 /**
  * Process a message from the thread, invoking the appropriate tool and returning the result.
  * @param toolCallRequest - The message to handle

package/esm/util/tool-caller.js

@@ -1,4 +1,4 @@
-import { mapTamboToolToContextTool } from "./registry";
+import { mapTamboToolToContextTool } from "./registry.js";
 /**
  * Process a message from the thread, invoking the appropriate tool and returning the result.
  * @param toolCallRequest - The message to handle

package/esm/util/validate-component-name.test.js

@@ -1,4 +1,4 @@
-import { assertValidName } from "./validate-component-name";
+import { assertValidName } from "./validate-component-name.js";
 describe("assertValidName", () => {
     // Valid names
     it("should not throw an error for a valid name with letters only", () => {

package/esm/v1/__tests__/v1-interactables.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=v1-interactables.test.d.ts.map

package/esm/v1/__tests__/v1-interactables.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"v1-interactables.test.d.ts","sourceRoot":"","sources":["../../../src/v1/__tests__/v1-interactables.test.tsx"],"names":[],"mappings":""}

package/esm/v1/__tests__/v1-interactables.test.js

@@ -0,0 +1,130 @@
+import { act, render, renderHook, screen } from "@testing-library/react";
+import React from "react";
+import { z } from "zod/v3";
+import { withTamboInteractable } from "../../hoc/with-tambo-interactable.js";
+import { useTamboInteractable } from "../../providers/tambo-interactable-provider.js";
+import { useTamboContextHelpers } from "../../providers/tambo-context-helpers-provider.js";
+import { TamboRegistryContext, } from "../../providers/tambo-registry-provider.js";
+import { TamboContextHelpersProvider } from "../../providers/tambo-context-helpers-provider.js";
+import { TamboInteractableProvider } from "../../providers/tambo-interactable-provider.js";
+// Minimal registry mock that captures registered tools
+function createMockRegistry() {
+    const toolRegistry = {};
+    return {
+        value: {
+            componentList: {},
+            toolRegistry,
+            componentToolAssociations: {},
+            mcpServerInfos: [],
+            resources: [],
+            resourceSource: null,
+            onCallUnregisteredTool: undefined,
+            registerComponent: jest.fn(),
+            registerTool: jest.fn((tool) => {
+                toolRegistry[tool.name] = tool;
+            }),
+            registerTools: jest.fn(),
+            addToolAssociation: jest.fn(),
+            registerMcpServer: jest.fn(),
+            registerMcpServers: jest.fn(),
+            registerResource: jest.fn(),
+            registerResources: jest.fn(),
+            registerResourceSource: jest.fn(),
+        },
+        getRegisteredToolNames: () => Object.keys(toolRegistry),
+    };
+}
+/**
+ * Wrapper that provides the minimal V1-compatible provider tree for interactables:
+ * TamboRegistryContext > TamboContextHelpersProvider > TamboInteractableProvider
+ */
+function V1InteractableWrapper({ children, registry, }) {
+    return (React.createElement(TamboRegistryContext.Provider, { value: registry },
+        React.createElement(TamboContextHelpersProvider, null,
+            React.createElement(TamboInteractableProvider, null, children))));
+}
+describe("V1 Interactables Integration", () => {
+    it("registers update_component_props and update_component_state tools when an interactable is added", () => {
+        const mockRegistry = createMockRegistry();
+        const { result } = renderHook(() => useTamboInteractable(), {
+            wrapper: ({ children }) => (React.createElement(V1InteractableWrapper, { registry: mockRegistry.value }, children)),
+        });
+        act(() => {
+            result.current.addInteractableComponent({
+                name: "TestWidget",
+                description: "A test widget",
+                component: () => React.createElement("div", null, "widget"),
+                props: { label: "hello" },
+                propsSchema: z.object({ label: z.string() }),
+            });
+        });
+        const toolNames = mockRegistry.getRegisteredToolNames();
+        expect(toolNames.some((n) => n.startsWith("update_component_props_TestWidget"))).toBe(true);
+        expect(toolNames.some((n) => n.startsWith("update_component_state_TestWidget"))).toBe(true);
+    });
+    it("registers interactables context helper that includes component info", async () => {
+        const mockRegistry = createMockRegistry();
+        const { result } = renderHook(() => ({
+            interactable: useTamboInteractable(),
+            helpers: useTamboContextHelpers(),
+        }), {
+            wrapper: ({ children }) => (React.createElement(V1InteractableWrapper, { registry: mockRegistry.value }, children)),
+        });
+        // Add an interactable component
+        act(() => {
+            result.current.interactable.addInteractableComponent({
+                name: "InfoCard",
+                description: "An info card",
+                component: () => React.createElement("div", null, "card"),
+                props: { title: "Test" },
+            });
+        });
+        // Get additional context - should include interactable info
+        const contexts = await act(async () => {
+            return await result.current.helpers.getAdditionalContext();
+        });
+        const interactablesContext = contexts.find((c) => c.name === "interactables");
+        expect(interactablesContext).toBeDefined();
+        expect(interactablesContext?.context).toBeDefined();
+    });
+    it("renders an interactable component via withTamboInteractable HOC", () => {
+        const mockRegistry = createMockRegistry();
+        const Card = ({ title }) => (React.createElement("div", { "data-testid": "card-title" }, title));
+        const InteractableCard = withTamboInteractable(Card, {
+            componentName: "Card",
+            description: "A card component",
+            propsSchema: z.object({ title: z.string() }),
+        });
+        render(React.createElement(V1InteractableWrapper, { registry: mockRegistry.value },
+            React.createElement(InteractableCard, { title: "Hello V1" })));
+        expect(screen.getByTestId("card-title")).toHaveTextContent("Hello V1");
+    });
+    it("updates component props via the interactable provider", () => {
+        const mockRegistry = createMockRegistry();
+        const Counter = ({ count }) => (React.createElement("div", { "data-testid": "count" }, count));
+        const InteractableCounter = withTamboInteractable(Counter, {
+            componentName: "Counter",
+            description: "A counter",
+            propsSchema: z.object({ count: z.number() }),
+        });
+        // Inner component that triggers prop updates
+        function TestHarness() {
+            const { interactableComponents, updateInteractableComponentProps } = useTamboInteractable();
+            const component = interactableComponents[0];
+            return (React.createElement("div", null,
+                React.createElement(InteractableCounter, { count: 0 }),
+                component && (React.createElement("button", { "data-testid": "update-btn", onClick: () => updateInteractableComponentProps(component.id, { count: 42 }) }, "Update"))));
+        }
+        render(React.createElement(V1InteractableWrapper, { registry: mockRegistry.value },
+            React.createElement(TestHarness, null)));
+        // Initial render
+        expect(screen.getByTestId("count")).toHaveTextContent("0");
+        // Update props via the interactable provider
+        act(() => {
+            screen.getByTestId("update-btn").click();
+        });
+        // The interactable should reflect updated props
+        expect(screen.getByTestId("count")).toHaveTextContent("42");
+    });
+});
+//# sourceMappingURL=v1-interactables.test.js.map

package/esm/v1/__tests__/v1-interactables.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"v1-interactables.test.js","sourceRoot":"","sources":["../../../src/v1/__tests__/v1-interactables.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { act, render, renderHook, screen } from \"@testing-library/react\";\nimport React from \"react\";\nimport { z } from \"zod/v3\";\nimport { withTamboInteractable } from \"../../hoc/with-tambo-interactable\";\nimport { useTamboInteractable } from \"../../providers/tambo-interactable-provider\";\nimport { useTamboContextHelpers } from \"../../providers/tambo-context-helpers-provider\";\nimport {\n  TamboRegistryContext,\n  type TamboRegistryContext as TamboRegistryContextType,\n} from \"../../providers/tambo-registry-provider\";\nimport { TamboContextHelpersProvider } from \"../../providers/tambo-context-helpers-provider\";\nimport { TamboInteractableProvider } from \"../../providers/tambo-interactable-provider\";\n\n// Minimal registry mock that captures registered tools\nfunction createMockRegistry() {\n  const toolRegistry: Record<string, unknown> = {};\n  return {\n    value: {\n      componentList: {},\n      toolRegistry,\n      componentToolAssociations: {},\n      mcpServerInfos: [],\n      resources: [],\n      resourceSource: null,\n      onCallUnregisteredTool: undefined,\n      registerComponent: jest.fn(),\n      registerTool: jest.fn((tool: { name: string }) => {\n        toolRegistry[tool.name] = tool;\n      }),\n      registerTools: jest.fn(),\n      addToolAssociation: jest.fn(),\n      registerMcpServer: jest.fn(),\n      registerMcpServers: jest.fn(),\n      registerResource: jest.fn(),\n      registerResources: jest.fn(),\n      registerResourceSource: jest.fn(),\n    } as unknown as TamboRegistryContextType,\n    getRegisteredToolNames: () => Object.keys(toolRegistry),\n  };\n}\n\n/**\n * Wrapper that provides the minimal V1-compatible provider tree for interactables:\n * TamboRegistryContext > TamboContextHelpersProvider > TamboInteractableProvider\n */\nfunction V1InteractableWrapper({\n  children,\n  registry,\n}: {\n  children: React.ReactNode;\n  registry: TamboRegistryContextType;\n}) {\n  return (\n    <TamboRegistryContext.Provider value={registry}>\n      <TamboContextHelpersProvider>\n        <TamboInteractableProvider>{children}</TamboInteractableProvider>\n      </TamboContextHelpersProvider>\n    </TamboRegistryContext.Provider>\n  );\n}\n\ndescribe(\"V1 Interactables Integration\", () => {\n  it(\"registers update_component_props and update_component_state tools when an interactable is added\", () => {\n    const mockRegistry = createMockRegistry();\n\n    const { result } = renderHook(() => useTamboInteractable(), {\n      wrapper: ({ children }) => (\n        <V1InteractableWrapper registry={mockRegistry.value}>\n          {children}\n        </V1InteractableWrapper>\n      ),\n    });\n\n    act(() => {\n      result.current.addInteractableComponent({\n        name: \"TestWidget\",\n        description: \"A test widget\",\n        component: () => <div>widget</div>,\n        props: { label: \"hello\" },\n        propsSchema: z.object({ label: z.string() }),\n      });\n    });\n\n    const toolNames = mockRegistry.getRegisteredToolNames();\n    expect(\n      toolNames.some((n) => n.startsWith(\"update_component_props_TestWidget\")),\n    ).toBe(true);\n    expect(\n      toolNames.some((n) => n.startsWith(\"update_component_state_TestWidget\")),\n    ).toBe(true);\n  });\n\n  it(\"registers interactables context helper that includes component info\", async () => {\n    const mockRegistry = createMockRegistry();\n\n    const { result } = renderHook(\n      () => ({\n        interactable: useTamboInteractable(),\n        helpers: useTamboContextHelpers(),\n      }),\n      {\n        wrapper: ({ children }) => (\n          <V1InteractableWrapper registry={mockRegistry.value}>\n            {children}\n          </V1InteractableWrapper>\n        ),\n      },\n    );\n\n    // Add an interactable component\n    act(() => {\n      result.current.interactable.addInteractableComponent({\n        name: \"InfoCard\",\n        description: \"An info card\",\n        component: () => <div>card</div>,\n        props: { title: \"Test\" },\n      });\n    });\n\n    // Get additional context - should include interactable info\n    const contexts = await act(async () => {\n      return await result.current.helpers.getAdditionalContext();\n    });\n\n    const interactablesContext = contexts.find(\n      (c) => c.name === \"interactables\",\n    );\n    expect(interactablesContext).toBeDefined();\n    expect(interactablesContext?.context).toBeDefined();\n  });\n\n  it(\"renders an interactable component via withTamboInteractable HOC\", () => {\n    const mockRegistry = createMockRegistry();\n\n    interface CardProps {\n      title: string;\n    }\n\n    const Card: React.FC<CardProps> = ({ title }) => (\n      <div data-testid=\"card-title\">{title}</div>\n    );\n\n    const InteractableCard = withTamboInteractable(Card, {\n      componentName: \"Card\",\n      description: \"A card component\",\n      propsSchema: z.object({ title: z.string() }),\n    });\n\n    render(\n      <V1InteractableWrapper registry={mockRegistry.value}>\n        <InteractableCard title=\"Hello V1\" />\n      </V1InteractableWrapper>,\n    );\n\n    expect(screen.getByTestId(\"card-title\")).toHaveTextContent(\"Hello V1\");\n  });\n\n  it(\"updates component props via the interactable provider\", () => {\n    const mockRegistry = createMockRegistry();\n\n    interface CounterProps {\n      count: number;\n    }\n\n    const Counter: React.FC<CounterProps> = ({ count }) => (\n      <div data-testid=\"count\">{count}</div>\n    );\n\n    const InteractableCounter = withTamboInteractable(Counter, {\n      componentName: \"Counter\",\n      description: \"A counter\",\n      propsSchema: z.object({ count: z.number() }),\n    });\n\n    // Inner component that triggers prop updates\n    function TestHarness() {\n      const { interactableComponents, updateInteractableComponentProps } =\n        useTamboInteractable();\n      const component = interactableComponents[0];\n\n      return (\n        <div>\n          <InteractableCounter count={0} />\n          {component && (\n            <button\n              data-testid=\"update-btn\"\n              onClick={() =>\n                updateInteractableComponentProps(component.id, { count: 42 })\n              }\n            >\n              Update\n            </button>\n          )}\n        </div>\n      );\n    }\n\n    render(\n      <V1InteractableWrapper registry={mockRegistry.value}>\n        <TestHarness />\n      </V1InteractableWrapper>,\n    );\n\n    // Initial render\n    expect(screen.getByTestId(\"count\")).toHaveTextContent(\"0\");\n\n    // Update props via the interactable provider\n    act(() => {\n      screen.getByTestId(\"update-btn\").click();\n    });\n\n    // The interactable should reflect updated props\n    expect(screen.getByTestId(\"count\")).toHaveTextContent(\"42\");\n  });\n});\n"]}

package/esm/v1/components/v1-component-renderer.d.ts

@@ -0,0 +1,48 @@
+import React, { type FC } from "react";
+import type { V1ComponentContent } from "../types/message.js";
+export interface V1ComponentRendererProps {
+    /**
+     * The component content block from a v1 message
+     */
+    content: V1ComponentContent;
+    /**
+     * The thread ID the component belongs to
+     */
+    threadId: string;
+    /**
+     * The message ID the component belongs to
+     */
+    messageId: string;
+    /**
+     * Optional fallback to render if component is not found in registry
+     */
+    fallback?: React.ReactNode;
+}
+/**
+ * Renders a component from the registry based on component content block data.
+ *
+ * Use this component in your message renderer to display AI-generated components.
+ * The component instance is preserved across re-renders as long as React's
+ * reconciliation keeps this wrapper mounted (use content.id as key).
+ *
+ * Wraps the rendered component with V1ComponentContentProvider so that hooks
+ * like useTamboV1ComponentState can access component context.
+ * @returns The rendered component wrapped in V1ComponentContentProvider, or fallback if not found
+ * @example
+ * ```tsx
+ * function MessageContent({ content }: { content: Content }) {
+ *   if (content.type === 'component') {
+ *     return (
+ *       <V1ComponentRenderer
+ *         key={content.id}
+ *         content={content}
+ *         fallback={<div>Unknown component: {content.name}</div>}
+ *       />
+ *     );
+ *   }
+ *   // ... handle other content types
+ * }
+ * ```
+ */
+export declare const V1ComponentRenderer: FC<V1ComponentRendererProps>;
+//# sourceMappingURL=v1-component-renderer.d.ts.map

package/esm/v1/components/v1-component-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"v1-component-renderer.d.ts","sourceRoot":"","sources":["../../../src/v1/components/v1-component-renderer.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAK5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG3D,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,OAAO,EAAE,kBAAkB,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAoF5D,CAAC"}

package/esm/v1/components/v1-component-renderer.js

@@ -0,0 +1,100 @@
+"use client";
+/**
+ * V1 Component Renderer
+ *
+ * A wrapper component that renders a component from the registry based on
+ * component content block data. Uses React's normal reconciliation to maintain
+ * component identity - as long as the key stays stable, the component instance
+ * is preserved.
+ *
+ * Wraps the component with V1ComponentContentProvider so that hooks like
+ * useTamboV1ComponentState can access component context.
+ */
+import { parse } from "partial-json";
+import React, { useMemo, useContext } from "react";
+import { TamboRegistryContext } from "../../providers/tambo-registry-provider.js";
+import { isStandardSchema } from "../../schema/index.js";
+import { isPromise } from "../../util/is-promise.js";
+import { getComponentFromRegistry } from "../../util/registry.js";
+import { V1ComponentContentProvider } from "../utils/component-renderer.js";
+/**
+ * Renders a component from the registry based on component content block data.
+ *
+ * Use this component in your message renderer to display AI-generated components.
+ * The component instance is preserved across re-renders as long as React's
+ * reconciliation keeps this wrapper mounted (use content.id as key).
+ *
+ * Wraps the rendered component with V1ComponentContentProvider so that hooks
+ * like useTamboV1ComponentState can access component context.
+ * @returns The rendered component wrapped in V1ComponentContentProvider, or fallback if not found
+ * @example
+ * ```tsx
+ * function MessageContent({ content }: { content: Content }) {
+ *   if (content.type === 'component') {
+ *     return (
+ *       <V1ComponentRenderer
+ *         key={content.id}
+ *         content={content}
+ *         fallback={<div>Unknown component: {content.name}</div>}
+ *       />
+ *     );
+ *   }
+ *   // ... handle other content types
+ * }
+ * ```
+ */
+export const V1ComponentRenderer = ({ content, threadId, messageId, fallback = null, }) => {
+    const registry = useContext(TamboRegistryContext);
+    // Memoize the rendered element - only recreates when props change
+    const element = useMemo(() => {
+        try {
+            const registeredComponent = getComponentFromRegistry(content.name, registry.componentList);
+            // Parse props (handles partial JSON during streaming)
+            const propsJson = JSON.stringify(content.props ?? {});
+            const parsedProps = parse(propsJson);
+            let validatedProps = parsedProps;
+            // Validate props if schema is present
+            if (isStandardSchema(registeredComponent.props)) {
+                const result = registeredComponent.props["~standard"].validate(parsedProps);
+                if (isPromise(result)) {
+                    // Async validation not supported - skip validation
+                    console.warn(`Async schema validation not supported for component ${content.name}`);
+                }
+                else if ("value" in result) {
+                    validatedProps = result.value;
+                }
+                else {
+                    // Validation failed - log warning but still render with raw props
+                    console.warn(`Props validation failed for component ${content.name}:`, result.issues?.[0]?.message);
+                }
+            }
+            return React.createElement(registeredComponent.component, validatedProps);
+        }
+        catch (error) {
+            console.error("[V1ComponentRenderer] Failed to render component", {
+                threadId,
+                messageId,
+                componentId: content.id,
+                componentName: content.name,
+                streamingState: content.streamingState,
+                props: content.props,
+                error,
+            });
+            return null;
+        }
+    }, [
+        content.id,
+        content.name,
+        content.props,
+        content.streamingState,
+        messageId,
+        threadId,
+        registry.componentList,
+    ]);
+    if (element === null) {
+        return React.createElement(React.Fragment, null, fallback);
+    }
+    // Wrap with provider so hooks like useTamboV1ComponentState work
+    return (React.createElement(V1ComponentContentProvider, { componentId: content.id, threadId: threadId, messageId: messageId, componentName: content.name }, element));
+};
+//# sourceMappingURL=v1-component-renderer.js.map