@tambo-ai/react 0.73.1 → 0.74.1

package/dist/providers/tambo-thread-input-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"tambo-thread-input-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-thread-input-provider.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport React, {\n  createContext,\n  PropsWithChildren,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  useTamboMutation,\n  UseTamboMutationResult,\n} from \"../hooks/react-query-hooks\";\nimport { StagedImage, useMessageImages } from \"../hooks/use-message-images\";\nimport { useTamboMcpServers } from \"../mcp/tambo-mcp-provider\";\nimport { ThreadInputError } from \"../model/thread-input-error\";\nimport { validateInput } from \"../model/validate-input\";\nimport { buildMessageContent } from \"../util/message-builder\";\nimport {\n  extractResourceUris,\n  resolveResourceContents,\n} from \"../util/resource-content-resolver\";\nimport { useTamboInteractable } from \"./tambo-interactable-provider\";\nimport { useTamboRegistry } from \"./tambo-registry-provider\";\nimport { useTamboThread } from \"./tambo-thread-provider\";\n\n/**\n * Error messages for various input-related error scenarios\n * These messages are used to provide user-friendly error feedback\n * @readonly\n */\nexport const INPUT_ERROR_MESSAGES = {\n  EMPTY: \"Message cannot be empty\",\n  NETWORK: \"Network error. Please check your connection\",\n  SERVER: \"Server error. Please try again\",\n  VALIDATION: \"Invalid message format\",\n} as const;\n\nexport interface TamboThreadInputContextProps extends Omit<\n  UseTamboMutationResult<\n    void,\n    Error,\n    | {\n        contextKey?: string;\n        streamResponse?: boolean;\n        forceToolChoice?: string;\n        additionalContext?: Record<string, any>;\n      }\n    | undefined\n  >,\n  \"mutate\" | \"mutateAsync\"\n> {\n  /** Current value of the input field */\n  value: string;\n  /**\n   * Function to update the input value\n   * @param value - New value for the input field\n   */\n  setValue: (value: React.SetStateAction<string>) => void;\n  /**\n   * Function to submit the current input value\n   * @param options - Submission options\n   */\n  submit: (options?: {\n    streamResponse?: boolean;\n    forceToolChoice?: string;\n    additionalContext?: Record<string, any>;\n    resourceNames?: Record<string, string>;\n  }) => Promise<void>;\n  /** Currently staged images */\n  images: StagedImage[];\n  /** Add a single image */\n  addImage: (file: File) => Promise<void>;\n  /** Add multiple images */\n  addImages: (files: File[]) => Promise<void>;\n  /** Remove an image by id */\n  removeImage: (id: string) => void;\n  /** Clear all staged images */\n  clearImages: () => void;\n}\n\nexport const TamboThreadInputContext = createContext<\n  TamboThreadInputContextProps | undefined\n>(undefined);\n\n/**\n * Provider that manages shared thread input state across all components\n * This ensures that useTamboThreadInput, useTamboSuggestions, and components\n * all share the same input state\n * @param props - The props for the TamboThreadInputProvider\n * @param props.children - The children to render.\n * @returns The thread input context\n */\nexport const TamboThreadInputProvider: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const { thread, sendThreadMessage, contextKey } = useTamboThread();\n  const [inputValue, setInputValue] = useState(\"\");\n  const imageState = useMessageImages();\n  const mcpServers = useTamboMcpServers();\n  const { resourceSource } = useTamboRegistry();\n  const { clearInteractableSelections } = useTamboInteractable();\n  const submit = useCallback(\n    async ({\n      streamResponse,\n      forceToolChoice,\n      additionalContext,\n      resourceNames = {},\n    }: {\n      streamResponse?: boolean;\n      forceToolChoice?: string;\n      additionalContext?: Record<string, any>;\n      resourceNames?: Record<string, string>;\n    } = {}) => {\n      // Validate text input if present\n      if (inputValue?.trim()) {\n        const validation = validateInput(inputValue);\n        if (!validation.isValid) {\n          throw new ThreadInputError(\n            `Cannot submit message: ${validation.error ?? INPUT_ERROR_MESSAGES.VALIDATION}`,\n            { cause: validation.error },\n          );\n        }\n      }\n\n      // Check if we have content to send\n      if (!inputValue.trim() && imageState.images.length === 0) {\n        throw new ThreadInputError(INPUT_ERROR_MESSAGES.EMPTY, {\n          cause: \"No text or images to send\",\n        });\n      }\n\n      // Extract resource URIs from the input text and resolve content for client-side resources\n      // (registry and client-side MCP servers). Internal Tambo server resources are skipped\n      // since the backend can resolve them.\n      const resourceUris = extractResourceUris(inputValue);\n      const resolvedContent = await resolveResourceContents(\n        resourceUris,\n        mcpServers,\n        resourceSource ?? undefined,\n      );\n\n      // Build message content with text, images, resource names, and resolved content\n      const messageContent = buildMessageContent(\n        inputValue,\n        imageState.images,\n        resourceNames,\n        resolvedContent,\n      );\n\n      try {\n        await sendThreadMessage(inputValue || \"Image message\", {\n          threadId: thread.id,\n          contextKey,\n          streamResponse: streamResponse,\n          forceToolChoice: forceToolChoice,\n          additionalContext: additionalContext,\n          content: messageContent,\n        });\n        clearInteractableSelections();\n      } catch (error: unknown) {\n        // Handle image-related errors with friendly messages\n        if (imageState.images.length > 0) {\n          const errorMessage =\n            error instanceof Error ? error.message.toLowerCase() : \"\";\n\n          // Backend not yet supporting image content type\n          if (errorMessage.includes(\"unknown content part type: image\")) {\n            throw new ThreadInputError(\n              \"Image attachments are not yet supported by the backend. This feature is coming soon.\",\n              { cause: error },\n            );\n          }\n\n          // Handle specific model vision support errors\n          // OpenAI errors\n          if (\n            errorMessage.includes(\n              \"does not support image message content types\",\n            ) ||\n            (errorMessage.includes(\"invalid model\") &&\n              errorMessage.includes(\n                \"image_url is only supported by certain models\",\n              ))\n          ) {\n            throw new ThreadInputError(\n              \"This model doesn't support images. Please use GPT-4o, GPT-4 Turbo, or other vision-capable models.\",\n              { cause: error },\n            );\n          }\n\n          // Anthropic Claude errors\n          if (\n            errorMessage.includes(\"does not support image\") ||\n            errorMessage.includes(\"vision not supported\")\n          ) {\n            throw new ThreadInputError(\n              \"This Claude model doesn't support images. Please use Claude 3.5 Sonnet, Claude 3 Opus, or other vision-capable models.\",\n              { cause: error },\n            );\n          }\n\n          // Generic image/vision errors\n          if (\n            errorMessage.includes(\"image\") ||\n            errorMessage.includes(\"vision\")\n          ) {\n            throw new ThreadInputError(\n              \"This model doesn't support image attachments. Please use a vision-capable model.\",\n              { cause: error },\n            );\n          }\n        }\n\n        throw error;\n      }\n\n      // Clear text after successful submission\n      setInputValue(\"\");\n    },\n    [\n      inputValue,\n      sendThreadMessage,\n      thread.id,\n      contextKey,\n      imageState,\n      mcpServers,\n      resourceSource,\n      clearInteractableSelections,\n    ],\n  );\n\n  const {\n    mutateAsync: submitAsync,\n    mutate: _unusedSubmit,\n    ...mutationState\n  } = useTamboMutation({\n    mutationFn: submit,\n  });\n\n  const value = {\n    ...mutationState,\n    value: inputValue,\n    setValue: setInputValue,\n    submit: submitAsync,\n    images: imageState.images,\n    addImage: imageState.addImage,\n    addImages: imageState.addImages,\n    removeImage: imageState.removeImage,\n    clearImages: imageState.clearImages,\n  };\n\n  return (\n    <TamboThreadInputContext.Provider value={value}>\n      {children}\n    </TamboThreadInputContext.Provider>\n  );\n};\n\n/**\n * Hook to access the shared thread input state\n * contextKey parameter is not passed here anymore. Instead, use the contextKey prop in the TamboProvider.\n * @returns The thread input context\n */\nexport const useTamboThreadInput = () => {\n  const context = useContext(TamboThreadInputContext);\n  if (!context) {\n    throw new Error(\n      \"useTamboThreadInput must be used within a TamboThreadInputProvider\",\n    );\n  }\n\n  return context;\n};\n"]}
+{"version":3,"file":"tambo-thread-input-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-thread-input-provider.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport React, {\n  createContext,\n  PropsWithChildren,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  useTamboMutation,\n  UseTamboMutationResult,\n} from \"../hooks/react-query-hooks\";\nimport { StagedImage, useMessageImages } from \"../hooks/use-message-images\";\nimport { useTamboMcpServers } from \"../mcp/tambo-mcp-provider\";\nimport { ThreadInputError } from \"../model/thread-input-error\";\nimport { validateInput } from \"../model/validate-input\";\nimport { buildMessageContent } from \"../util/message-builder\";\nimport {\n  extractResourceUris,\n  resolveResourceContents,\n} from \"../util/resource-content-resolver\";\nimport { useTamboInteractable } from \"./tambo-interactable-provider\";\nimport { useTamboRegistry } from \"./tambo-registry-provider\";\nimport { useTamboThread } from \"./tambo-thread-provider\";\n\n/**\n * Error messages for various input-related error scenarios\n * These messages are used to provide user-friendly error feedback\n * @readonly\n */\nexport const INPUT_ERROR_MESSAGES = {\n  EMPTY: \"Message cannot be empty\",\n  NETWORK: \"Network error. Please check your connection\",\n  SERVER: \"Server error. Please try again\",\n  VALIDATION: \"Invalid message format\",\n} as const;\n\nexport interface TamboThreadInputContextProps extends Omit<\n  UseTamboMutationResult<\n    void,\n    Error,\n    | {\n        contextKey?: string;\n        streamResponse?: boolean;\n        forceToolChoice?: string;\n        additionalContext?: Record<string, any>;\n      }\n    | undefined\n  >,\n  \"mutate\" | \"mutateAsync\"\n> {\n  /** Current value of the input field */\n  value: string;\n  /**\n   * Function to update the input value\n   * @param value - New value for the input field\n   */\n  setValue: (value: React.SetStateAction<string>) => void;\n  /**\n   * Function to submit the current input value\n   * @param options - Submission options\n   */\n  submit: (options?: {\n    streamResponse?: boolean;\n    forceToolChoice?: string;\n    additionalContext?: Record<string, any>;\n    resourceNames?: Record<string, string>;\n  }) => Promise<void>;\n  /** Currently staged images */\n  images: StagedImage[];\n  /** Add a single image */\n  addImage: (file: File) => Promise<void>;\n  /** Add multiple images */\n  addImages: (files: File[]) => Promise<void>;\n  /** Remove an image by id */\n  removeImage: (id: string) => void;\n  /** Clear all staged images */\n  clearImages: () => void;\n}\n\nexport const TamboThreadInputContext = createContext<\n  TamboThreadInputContextProps | undefined\n>(undefined);\n\n/**\n * Provider that manages shared thread input state across all components\n * This ensures that useTamboThreadInput, useTamboSuggestions, and components\n * all share the same input state\n * @param props - The props for the TamboThreadInputProvider\n * @param props.children - The children to render.\n * @returns The thread input context\n */\nexport const TamboThreadInputProvider: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const { thread, sendThreadMessage, contextKey } = useTamboThread();\n  const [inputValue, setInputValue] = useState(\"\");\n  const imageState = useMessageImages();\n  const mcpServers = useTamboMcpServers();\n  const { resourceSource } = useTamboRegistry();\n  const { clearInteractableSelections } = useTamboInteractable();\n  const submit = useCallback(\n    async ({\n      streamResponse,\n      forceToolChoice,\n      additionalContext,\n      resourceNames = {},\n    }: {\n      streamResponse?: boolean;\n      forceToolChoice?: string;\n      additionalContext?: Record<string, any>;\n      resourceNames?: Record<string, string>;\n    } = {}) => {\n      // Validate text input if present\n      if (inputValue?.trim()) {\n        const validation = validateInput(inputValue);\n        if (!validation.isValid) {\n          throw new ThreadInputError(\n            `Cannot submit message: ${validation.error ?? INPUT_ERROR_MESSAGES.VALIDATION}`,\n            { cause: validation.error },\n          );\n        }\n      }\n\n      // Check if we have content to send\n      if (!inputValue.trim() && imageState.images.length === 0) {\n        throw new ThreadInputError(INPUT_ERROR_MESSAGES.EMPTY, {\n          cause: \"No text or images to send\",\n        });\n      }\n\n      // Extract resource URIs from the input text and resolve content for client-side resources\n      // (registry and client-side MCP servers). Internal Tambo server resources are skipped\n      // since the backend can resolve them.\n      const resourceUris = extractResourceUris(inputValue);\n      const resolvedContent = await resolveResourceContents(\n        resourceUris,\n        mcpServers,\n        resourceSource ?? undefined,\n      );\n\n      // Build message content with text, images, resource names, and resolved content\n      const messageContent = buildMessageContent(\n        inputValue,\n        imageState.images,\n        resourceNames,\n        resolvedContent,\n      );\n\n      try {\n        await sendThreadMessage(inputValue || \"Image message\", {\n          threadId: thread.id,\n          contextKey,\n          streamResponse: streamResponse,\n          forceToolChoice: forceToolChoice,\n          additionalContext: additionalContext,\n          content: messageContent,\n        });\n        clearInteractableSelections();\n      } catch (error: unknown) {\n        // Handle image-related errors with friendly messages\n        if (imageState.images.length > 0) {\n          const errorMessage =\n            error instanceof Error ? error.message.toLowerCase() : \"\";\n\n          // Backend not yet supporting image content type\n          if (errorMessage.includes(\"unknown content part type: image\")) {\n            throw new ThreadInputError(\n              \"Image attachments are not yet supported by the backend. This feature is coming soon.\",\n              { cause: error },\n            );\n          }\n\n          // Handle specific model vision support errors\n          // OpenAI errors\n          if (\n            errorMessage.includes(\n              \"does not support image message content types\",\n            ) ||\n            (errorMessage.includes(\"invalid model\") &&\n              errorMessage.includes(\n                \"image_url is only supported by certain models\",\n              ))\n          ) {\n            throw new ThreadInputError(\n              \"This model doesn't support images. Please use GPT-4o, GPT-4 Turbo, or other vision-capable models.\",\n              { cause: error },\n            );\n          }\n\n          // Anthropic Claude errors\n          if (\n            errorMessage.includes(\"does not support image\") ||\n            errorMessage.includes(\"vision not supported\")\n          ) {\n            throw new ThreadInputError(\n              \"This Claude model doesn't support images. Please use Claude 3.5 Sonnet, Claude 3 Opus, or other vision-capable models.\",\n              { cause: error },\n            );\n          }\n\n          // Generic image/vision errors\n          if (\n            errorMessage.includes(\"image\") ||\n            errorMessage.includes(\"vision\")\n          ) {\n            throw new ThreadInputError(\n              \"This model doesn't support image attachments. Please use a vision-capable model.\",\n              { cause: error },\n            );\n          }\n        }\n\n        throw error;\n      }\n\n      // Clear text after successful submission\n      setInputValue(\"\");\n    },\n    [\n      inputValue,\n      sendThreadMessage,\n      thread.id,\n      contextKey,\n      imageState,\n      mcpServers,\n      resourceSource,\n      clearInteractableSelections,\n    ],\n  );\n\n  const {\n    mutateAsync: submitAsync,\n    mutate: _unusedSubmit,\n    ...mutationState\n  } = useTamboMutation({\n    mutationKey: [\"thread-input\", thread.id],\n    mutationFn: submit,\n  });\n\n  const value = {\n    ...mutationState,\n    value: inputValue,\n    setValue: setInputValue,\n    submit: submitAsync,\n    images: imageState.images,\n    addImage: imageState.addImage,\n    addImages: imageState.addImages,\n    removeImage: imageState.removeImage,\n    clearImages: imageState.clearImages,\n  };\n\n  return (\n    <TamboThreadInputContext.Provider value={value}>\n      {children}\n    </TamboThreadInputContext.Provider>\n  );\n};\n\n/**\n * Hook to access the shared thread input state\n * contextKey parameter is not passed here anymore. Instead, use the contextKey prop in the TamboProvider.\n * @returns The thread input context\n */\nexport const useTamboThreadInput = () => {\n  const context = useContext(TamboThreadInputContext);\n  if (!context) {\n    throw new Error(\n      \"useTamboThreadInput must be used within a TamboThreadInputProvider\",\n    );\n  }\n\n  return context;\n};\n"]}

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

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

package/dist/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/dist/v1/__tests__/v1-interactables.test.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const react_2 = __importDefault(require("react"));
+const v3_1 = require("zod/v3");
+const with_tambo_interactable_1 = require("../../hoc/with-tambo-interactable");
+const tambo_interactable_provider_1 = require("../../providers/tambo-interactable-provider");
+const tambo_context_helpers_provider_1 = require("../../providers/tambo-context-helpers-provider");
+const tambo_registry_provider_1 = require("../../providers/tambo-registry-provider");
+const tambo_context_helpers_provider_2 = require("../../providers/tambo-context-helpers-provider");
+const tambo_interactable_provider_2 = require("../../providers/tambo-interactable-provider");
+// 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_2.default.createElement(tambo_registry_provider_1.TamboRegistryContext.Provider, { value: registry },
+        react_2.default.createElement(tambo_context_helpers_provider_2.TamboContextHelpersProvider, null,
+            react_2.default.createElement(tambo_interactable_provider_2.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 } = (0, react_1.renderHook)(() => (0, tambo_interactable_provider_1.useTamboInteractable)(), {
+            wrapper: ({ children }) => (react_2.default.createElement(V1InteractableWrapper, { registry: mockRegistry.value }, children)),
+        });
+        (0, react_1.act)(() => {
+            result.current.addInteractableComponent({
+                name: "TestWidget",
+                description: "A test widget",
+                component: () => react_2.default.createElement("div", null, "widget"),
+                props: { label: "hello" },
+                propsSchema: v3_1.z.object({ label: v3_1.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 } = (0, react_1.renderHook)(() => ({
+            interactable: (0, tambo_interactable_provider_1.useTamboInteractable)(),
+            helpers: (0, tambo_context_helpers_provider_1.useTamboContextHelpers)(),
+        }), {
+            wrapper: ({ children }) => (react_2.default.createElement(V1InteractableWrapper, { registry: mockRegistry.value }, children)),
+        });
+        // Add an interactable component
+        (0, react_1.act)(() => {
+            result.current.interactable.addInteractableComponent({
+                name: "InfoCard",
+                description: "An info card",
+                component: () => react_2.default.createElement("div", null, "card"),
+                props: { title: "Test" },
+            });
+        });
+        // Get additional context - should include interactable info
+        const contexts = await (0, react_1.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_2.default.createElement("div", { "data-testid": "card-title" }, title));
+        const InteractableCard = (0, with_tambo_interactable_1.withTamboInteractable)(Card, {
+            componentName: "Card",
+            description: "A card component",
+            propsSchema: v3_1.z.object({ title: v3_1.z.string() }),
+        });
+        (0, react_1.render)(react_2.default.createElement(V1InteractableWrapper, { registry: mockRegistry.value },
+            react_2.default.createElement(InteractableCard, { title: "Hello V1" })));
+        expect(react_1.screen.getByTestId("card-title")).toHaveTextContent("Hello V1");
+    });
+    it("updates component props via the interactable provider", () => {
+        const mockRegistry = createMockRegistry();
+        const Counter = ({ count }) => (react_2.default.createElement("div", { "data-testid": "count" }, count));
+        const InteractableCounter = (0, with_tambo_interactable_1.withTamboInteractable)(Counter, {
+            componentName: "Counter",
+            description: "A counter",
+            propsSchema: v3_1.z.object({ count: v3_1.z.number() }),
+        });
+        // Inner component that triggers prop updates
+        function TestHarness() {
+            const { interactableComponents, updateInteractableComponentProps } = (0, tambo_interactable_provider_1.useTamboInteractable)();
+            const component = interactableComponents[0];
+            return (react_2.default.createElement("div", null,
+                react_2.default.createElement(InteractableCounter, { count: 0 }),
+                component && (react_2.default.createElement("button", { "data-testid": "update-btn", onClick: () => updateInteractableComponentProps(component.id, { count: 42 }) }, "Update"))));
+        }
+        (0, react_1.render)(react_2.default.createElement(V1InteractableWrapper, { registry: mockRegistry.value },
+            react_2.default.createElement(TestHarness, null)));
+        // Initial render
+        expect(react_1.screen.getByTestId("count")).toHaveTextContent("0");
+        // Update props via the interactable provider
+        (0, react_1.act)(() => {
+            react_1.screen.getByTestId("update-btn").click();
+        });
+        // The interactable should reflect updated props
+        expect(react_1.screen.getByTestId("count")).toHaveTextContent("42");
+    });
+});
+//# sourceMappingURL=v1-interactables.test.js.map

package/dist/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/dist/v1/components/v1-component-renderer.d.ts

@@ -0,0 +1,48 @@
+import React, { type FC } from "react";
+import type { V1ComponentContent } from "../types/message";
+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/dist/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/dist/v1/components/v1-component-renderer.js

@@ -0,0 +1,137 @@
+"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.V1ComponentRenderer = void 0;
+/**
+ * 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.
+ */
+const partial_json_1 = require("partial-json");
+const react_1 = __importStar(require("react"));
+const tambo_registry_provider_1 = require("../../providers/tambo-registry-provider");
+const schema_1 = require("../../schema");
+const is_promise_1 = require("../../util/is-promise");
+const registry_1 = require("../../util/registry");
+const component_renderer_1 = require("../utils/component-renderer");
+/**
+ * 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
+ * }
+ * ```
+ */
+const V1ComponentRenderer = ({ content, threadId, messageId, fallback = null, }) => {
+    const registry = (0, react_1.useContext)(tambo_registry_provider_1.TamboRegistryContext);
+    // Memoize the rendered element - only recreates when props change
+    const element = (0, react_1.useMemo)(() => {
+        try {
+            const registeredComponent = (0, registry_1.getComponentFromRegistry)(content.name, registry.componentList);
+            // Parse props (handles partial JSON during streaming)
+            const propsJson = JSON.stringify(content.props ?? {});
+            const parsedProps = (0, partial_json_1.parse)(propsJson);
+            let validatedProps = parsedProps;
+            // Validate props if schema is present
+            if ((0, schema_1.isStandardSchema)(registeredComponent.props)) {
+                const result = registeredComponent.props["~standard"].validate(parsedProps);
+                if ((0, is_promise_1.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_1.default.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_1.default.createElement(react_1.default.Fragment, null, fallback);
+    }
+    // Wrap with provider so hooks like useTamboV1ComponentState work
+    return (react_1.default.createElement(component_renderer_1.V1ComponentContentProvider, { componentId: content.id, threadId: threadId, messageId: messageId, componentName: content.name }, element));
+};
+exports.V1ComponentRenderer = V1ComponentRenderer;
+//# sourceMappingURL=v1-component-renderer.js.map

package/dist/v1/components/v1-component-renderer.js.map

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

package/dist/v1/components/v1-component-renderer.test.d.ts

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

package/dist/v1/components/v1-component-renderer.test.d.ts.map

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