@tambo-ai/react 0.65.2 → 0.66.0

package/dist/hoc/with-tambo-interactable.test.js

@@ -0,0 +1,192 @@
+"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 use_current_message_1 = require("../hooks/use-current-message");
+const tambo_interactable_provider_1 = require("../providers/tambo-interactable-provider");
+const with_tambo_interactable_1 = require("./with-tambo-interactable");
+// Create a consistent mock implementation
+const mockAddInteractableComponent = jest.fn(() => "mock-id-123");
+const mockUpdateInteractableComponentProps = jest.fn();
+const mockGetInteractableComponent = jest.fn(() => null);
+const mockRemoveInteractableComponent = jest.fn();
+const mockGetInteractableComponentsByName = jest.fn(() => []);
+const mockClearAllInteractableComponents = jest.fn();
+// Mock the interactable provider
+jest.mock("../providers/tambo-interactable-provider", () => ({
+    TamboInteractableProvider: ({ children }) => (react_2.default.createElement("div", { "data-testid": "interactable-provider" }, children)),
+    useTamboInteractable: () => ({
+        addInteractableComponent: mockAddInteractableComponent,
+        updateInteractableComponentProps: mockUpdateInteractableComponentProps,
+        getInteractableComponent: mockGetInteractableComponent,
+        removeInteractableComponent: mockRemoveInteractableComponent,
+        getInteractableComponentsByName: mockGetInteractableComponentsByName,
+        clearAllInteractableComponents: mockClearAllInteractableComponents,
+        interactableComponents: [],
+    }),
+}));
+describe("withTamboInteractable", () => {
+    const TestComponent = ({ title, count }) => (react_2.default.createElement("div", null,
+        react_2.default.createElement("h1", { "data-testid": "title" }, title),
+        count !== undefined && react_2.default.createElement("span", { "data-testid": "count" }, count)));
+    const testSchema = v3_1.z.object({
+        title: v3_1.z.string(),
+        count: v3_1.z.number().optional(),
+    });
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Reset mock implementations
+        mockAddInteractableComponent.mockReturnValue("mock-id-123");
+        mockGetInteractableComponent.mockReturnValue(null);
+        mockGetInteractableComponentsByName.mockReturnValue([]);
+    });
+    it("should render the wrapped component with provided props", () => {
+        const InteractableComponent = (0, with_tambo_interactable_1.withTamboInteractable)(TestComponent, {
+            componentName: "TestComponent",
+            description: "A test component",
+            propsSchema: testSchema,
+        });
+        (0, react_1.render)(react_2.default.createElement(tambo_interactable_provider_1.TamboInteractableProvider, null,
+            react_2.default.createElement(InteractableComponent, { title: "Hello", count: 42 })));
+        expect(react_1.screen.getByTestId("title")).toHaveTextContent("Hello");
+        expect(react_1.screen.getByTestId("count")).toHaveTextContent("42");
+    });
+    it("should set displayName correctly", () => {
+        const InteractableComponent = (0, with_tambo_interactable_1.withTamboInteractable)(TestComponent, {
+            componentName: "TestComponent",
+            description: "A test component",
+        });
+        expect(InteractableComponent.displayName).toBe("withTamboInteractable(TestComponent)");
+    });
+    it("should handle components without displayName", () => {
+        const AnonymousComponent = () => react_2.default.createElement("div", null, "Anonymous");
+        const InteractableComponent = (0, with_tambo_interactable_1.withTamboInteractable)(AnonymousComponent, {
+            componentName: "AnonymousComponent",
+            description: "An anonymous component",
+        });
+        // Anonymous components get their name from the function name
+        expect(InteractableComponent.displayName).toBe("withTamboInteractable(AnonymousComponent)");
+    });
+    it("should provide TamboMessageProvider with interactable metadata", async () => {
+        // Child component that uses the context
+        const ContextConsumer = () => {
+            const component = (0, use_current_message_1.useTamboCurrentComponent)();
+            return (react_2.default.createElement("div", null,
+                react_2.default.createElement("span", { "data-testid": "interactable-id" }, component?.interactableId),
+                react_2.default.createElement("span", { "data-testid": "component-name" }, component?.componentName),
+                react_2.default.createElement("span", { "data-testid": "description" }, component?.description)));
+        };
+        // Wrap TestComponent to include ContextConsumer
+        const TestComponentWithConsumer = (props) => (react_2.default.createElement("div", null,
+            react_2.default.createElement(TestComponent, { ...props }),
+            react_2.default.createElement(ContextConsumer, null)));
+        const InteractableWithConsumer = (0, with_tambo_interactable_1.withTamboInteractable)(TestComponentWithConsumer, {
+            componentName: "TestComponent",
+            description: "A test component",
+            propsSchema: testSchema,
+        });
+        (0, react_1.render)(react_2.default.createElement(tambo_interactable_provider_1.TamboInteractableProvider, null,
+            react_2.default.createElement(InteractableWithConsumer, { title: "Hello" })));
+        // Wait for the component to register and render
+        await (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByTestId("interactable-id")).toHaveTextContent("mock-id-123");
+        });
+        expect(react_1.screen.getByTestId("component-name")).toHaveTextContent("TestComponent");
+        expect(react_1.screen.getByTestId("description")).toHaveTextContent("A test component");
+    });
+    it("should create minimal message with correct structure", async () => {
+        // Child component that checks the message structure
+        const MessageChecker = () => {
+            const component = (0, use_current_message_1.useTamboCurrentComponent)();
+            return (react_2.default.createElement("div", null,
+                react_2.default.createElement("span", { "data-testid": "has-component-name" }, component?.componentName ? "yes" : "no"),
+                react_2.default.createElement("span", { "data-testid": "has-props" }, component?.props ? "yes" : "no"),
+                react_2.default.createElement("span", { "data-testid": "has-interactable-id" }, component?.interactableId ? "yes" : "no"),
+                react_2.default.createElement("span", { "data-testid": "has-description" }, component?.description ? "yes" : "no")));
+        };
+        const TestComponentWithChecker = (props) => (react_2.default.createElement("div", null,
+            react_2.default.createElement(TestComponent, { ...props }),
+            react_2.default.createElement(MessageChecker, null)));
+        const InteractableWithChecker = (0, with_tambo_interactable_1.withTamboInteractable)(TestComponentWithChecker, {
+            componentName: "TestComponent",
+            description: "A test component",
+            propsSchema: testSchema,
+        });
+        (0, react_1.render)(react_2.default.createElement(tambo_interactable_provider_1.TamboInteractableProvider, null,
+            react_2.default.createElement(InteractableWithChecker, { title: "Hello", count: 42 })));
+        await (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByTestId("has-component-name")).toHaveTextContent("yes");
+        });
+        expect(react_1.screen.getByTestId("has-props")).toHaveTextContent("yes");
+        expect(react_1.screen.getByTestId("has-interactable-id")).toHaveTextContent("yes");
+        expect(react_1.screen.getByTestId("has-description")).toHaveTextContent("yes");
+    });
+    it("should pass through all component props correctly", () => {
+        const InteractableComponent = (0, with_tambo_interactable_1.withTamboInteractable)(TestComponent, {
+            componentName: "TestComponent",
+            description: "A test component",
+            propsSchema: testSchema,
+        });
+        (0, react_1.render)(react_2.default.createElement(tambo_interactable_provider_1.TamboInteractableProvider, null,
+            react_2.default.createElement(InteractableComponent, { title: "Test Title", count: 100 })));
+        expect(react_1.screen.getByTestId("title")).toHaveTextContent("Test Title");
+        expect(react_1.screen.getByTestId("count")).toHaveTextContent("100");
+    });
+    it("should filter out interactable-specific props from component props", () => {
+        const ExtendedComponent = ({ title, onInteractableReady, onPropsUpdate, }) => (react_2.default.createElement("div", null,
+            react_2.default.createElement("span", { "data-testid": "title" }, title),
+            react_2.default.createElement("span", { "data-testid": "has-ready" }, onInteractableReady ? "yes" : "no"),
+            react_2.default.createElement("span", { "data-testid": "has-update" }, onPropsUpdate ? "yes" : "no")));
+        const InteractableComponent = (0, with_tambo_interactable_1.withTamboInteractable)(ExtendedComponent, {
+            componentName: "ExtendedComponent",
+            description: "An extended component",
+        });
+        const mockReady = jest.fn();
+        const mockUpdate = jest.fn();
+        (0, react_1.render)(react_2.default.createElement(tambo_interactable_provider_1.TamboInteractableProvider, null,
+            react_2.default.createElement(InteractableComponent, { title: "Test", onInteractableReady: mockReady, onPropsUpdate: mockUpdate })));
+        expect(react_1.screen.getByTestId("title")).toHaveTextContent("Test");
+        // These props should be filtered out
+        expect(react_1.screen.getByTestId("has-ready")).toHaveTextContent("no");
+        expect(react_1.screen.getByTestId("has-update")).toHaveTextContent("no");
+    });
+    it("should work without propsSchema", () => {
+        const InteractableComponent = (0, with_tambo_interactable_1.withTamboInteractable)(TestComponent, {
+            componentName: "TestComponent",
+            description: "A test component",
+        });
+        (0, react_1.render)(react_2.default.createElement(tambo_interactable_provider_1.TamboInteractableProvider, null,
+            react_2.default.createElement(InteractableComponent, { title: "No Schema" })));
+        expect(react_1.screen.getByTestId("title")).toHaveTextContent("No Schema");
+    });
+    it("should render before interactable ID is set", () => {
+        const InteractableComponent = (0, with_tambo_interactable_1.withTamboInteractable)(TestComponent, {
+            componentName: "TestComponent",
+            description: "A test component",
+        });
+        const { container } = (0, react_1.render)(react_2.default.createElement(tambo_interactable_provider_1.TamboInteractableProvider, null,
+            react_2.default.createElement(InteractableComponent, { title: "Early Render" })));
+        // Component should render even before ID is available
+        expect(container.querySelector('[data-testid="title"]')).toBeInTheDocument();
+    });
+    it("should handle null/undefined values in props", () => {
+        const NullableComponent = ({ title, optional, nullable, }) => (react_2.default.createElement("div", null,
+            react_2.default.createElement("span", { "data-testid": "title" }, title),
+            react_2.default.createElement("span", { "data-testid": "optional" }, optional ?? "undefined"),
+            react_2.default.createElement("span", { "data-testid": "nullable" }, nullable ?? "null")));
+        const InteractableComponent = (0, with_tambo_interactable_1.withTamboInteractable)(NullableComponent, {
+            componentName: "NullableComponent",
+            description: "A component with nullable props",
+        });
+        (0, react_1.render)(react_2.default.createElement(tambo_interactable_provider_1.TamboInteractableProvider, null,
+            react_2.default.createElement(InteractableComponent, { title: "Test", nullable: null })));
+        expect(react_1.screen.getByTestId("title")).toHaveTextContent("Test");
+        expect(react_1.screen.getByTestId("optional")).toHaveTextContent("undefined");
+        expect(react_1.screen.getByTestId("nullable")).toHaveTextContent("null");
+    });
+});
+//# sourceMappingURL=with-tambo-interactable.test.js.map

package/dist/hoc/with-tambo-interactable.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-tambo-interactable.test.js","sourceRoot":"","sources":["../../src/hoc/with-tambo-interactable.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { render, screen, waitFor } from \"@testing-library/react\";\nimport React from \"react\";\nimport { z } from \"zod/v3\";\nimport { useTamboCurrentComponent } from \"../hooks/use-current-message\";\nimport { TamboInteractableProvider } from \"../providers/tambo-interactable-provider\";\nimport { withTamboInteractable } from \"./with-tambo-interactable\";\n\n// Create a consistent mock implementation\nconst mockAddInteractableComponent = jest.fn(() => \"mock-id-123\");\nconst mockUpdateInteractableComponentProps = jest.fn();\nconst mockGetInteractableComponent = jest.fn(() => null);\nconst mockRemoveInteractableComponent = jest.fn();\nconst mockGetInteractableComponentsByName = jest.fn(() => []);\nconst mockClearAllInteractableComponents = jest.fn();\n\n// Mock the interactable provider\njest.mock(\"../providers/tambo-interactable-provider\", () => ({\n  TamboInteractableProvider: ({ children }: { children: React.ReactNode }) => (\n    <div data-testid=\"interactable-provider\">{children}</div>\n  ),\n  useTamboInteractable: () => ({\n    addInteractableComponent: mockAddInteractableComponent,\n    updateInteractableComponentProps: mockUpdateInteractableComponentProps,\n    getInteractableComponent: mockGetInteractableComponent,\n    removeInteractableComponent: mockRemoveInteractableComponent,\n    getInteractableComponentsByName: mockGetInteractableComponentsByName,\n    clearAllInteractableComponents: mockClearAllInteractableComponents,\n    interactableComponents: [],\n  }),\n}));\n\ndescribe(\"withTamboInteractable\", () => {\n  // Simple test component\n  interface TestComponentProps {\n    title: string;\n    count?: number;\n  }\n\n  const TestComponent: React.FC<TestComponentProps> = ({ title, count }) => (\n    <div>\n      <h1 data-testid=\"title\">{title}</h1>\n      {count !== undefined && <span data-testid=\"count\">{count}</span>}\n    </div>\n  );\n\n  const testSchema = z.object({\n    title: z.string(),\n    count: z.number().optional(),\n  });\n\n  beforeEach(() => {\n    jest.clearAllMocks();\n    // Reset mock implementations\n    mockAddInteractableComponent.mockReturnValue(\"mock-id-123\");\n    mockGetInteractableComponent.mockReturnValue(null);\n    mockGetInteractableComponentsByName.mockReturnValue([]);\n  });\n\n  it(\"should render the wrapped component with provided props\", () => {\n    const InteractableComponent = withTamboInteractable(TestComponent, {\n      componentName: \"TestComponent\",\n      description: \"A test component\",\n      propsSchema: testSchema,\n    });\n\n    render(\n      <TamboInteractableProvider>\n        <InteractableComponent title=\"Hello\" count={42} />\n      </TamboInteractableProvider>,\n    );\n\n    expect(screen.getByTestId(\"title\")).toHaveTextContent(\"Hello\");\n    expect(screen.getByTestId(\"count\")).toHaveTextContent(\"42\");\n  });\n\n  it(\"should set displayName correctly\", () => {\n    const InteractableComponent = withTamboInteractable(TestComponent, {\n      componentName: \"TestComponent\",\n      description: \"A test component\",\n    });\n\n    expect(InteractableComponent.displayName).toBe(\n      \"withTamboInteractable(TestComponent)\",\n    );\n  });\n\n  it(\"should handle components without displayName\", () => {\n    const AnonymousComponent = () => <div>Anonymous</div>;\n\n    const InteractableComponent = withTamboInteractable(AnonymousComponent, {\n      componentName: \"AnonymousComponent\",\n      description: \"An anonymous component\",\n    });\n\n    // Anonymous components get their name from the function name\n    expect(InteractableComponent.displayName).toBe(\n      \"withTamboInteractable(AnonymousComponent)\",\n    );\n  });\n\n  it(\"should provide TamboMessageProvider with interactable metadata\", async () => {\n    // Child component that uses the context\n    const ContextConsumer = () => {\n      const component = useTamboCurrentComponent();\n      return (\n        <div>\n          <span data-testid=\"interactable-id\">{component?.interactableId}</span>\n          <span data-testid=\"component-name\">{component?.componentName}</span>\n          <span data-testid=\"description\">{component?.description}</span>\n        </div>\n      );\n    };\n\n    // Wrap TestComponent to include ContextConsumer\n    const TestComponentWithConsumer: React.FC<TestComponentProps> = (props) => (\n      <div>\n        <TestComponent {...props} />\n        <ContextConsumer />\n      </div>\n    );\n\n    const InteractableWithConsumer = withTamboInteractable(\n      TestComponentWithConsumer,\n      {\n        componentName: \"TestComponent\",\n        description: \"A test component\",\n        propsSchema: testSchema,\n      },\n    );\n\n    render(\n      <TamboInteractableProvider>\n        <InteractableWithConsumer title=\"Hello\" />\n      </TamboInteractableProvider>,\n    );\n\n    // Wait for the component to register and render\n    await waitFor(() => {\n      expect(screen.getByTestId(\"interactable-id\")).toHaveTextContent(\n        \"mock-id-123\",\n      );\n    });\n\n    expect(screen.getByTestId(\"component-name\")).toHaveTextContent(\n      \"TestComponent\",\n    );\n    expect(screen.getByTestId(\"description\")).toHaveTextContent(\n      \"A test component\",\n    );\n  });\n\n  it(\"should create minimal message with correct structure\", async () => {\n    // Child component that checks the message structure\n    const MessageChecker = () => {\n      const component = useTamboCurrentComponent();\n      return (\n        <div>\n          <span data-testid=\"has-component-name\">\n            {component?.componentName ? \"yes\" : \"no\"}\n          </span>\n          <span data-testid=\"has-props\">{component?.props ? \"yes\" : \"no\"}</span>\n          <span data-testid=\"has-interactable-id\">\n            {component?.interactableId ? \"yes\" : \"no\"}\n          </span>\n          <span data-testid=\"has-description\">\n            {component?.description ? \"yes\" : \"no\"}\n          </span>\n        </div>\n      );\n    };\n\n    const TestComponentWithChecker: React.FC<TestComponentProps> = (props) => (\n      <div>\n        <TestComponent {...props} />\n        <MessageChecker />\n      </div>\n    );\n\n    const InteractableWithChecker = withTamboInteractable(\n      TestComponentWithChecker,\n      {\n        componentName: \"TestComponent\",\n        description: \"A test component\",\n        propsSchema: testSchema,\n      },\n    );\n\n    render(\n      <TamboInteractableProvider>\n        <InteractableWithChecker title=\"Hello\" count={42} />\n      </TamboInteractableProvider>,\n    );\n\n    await waitFor(() => {\n      expect(screen.getByTestId(\"has-component-name\")).toHaveTextContent(\"yes\");\n    });\n\n    expect(screen.getByTestId(\"has-props\")).toHaveTextContent(\"yes\");\n    expect(screen.getByTestId(\"has-interactable-id\")).toHaveTextContent(\"yes\");\n    expect(screen.getByTestId(\"has-description\")).toHaveTextContent(\"yes\");\n  });\n\n  it(\"should pass through all component props correctly\", () => {\n    const InteractableComponent = withTamboInteractable(TestComponent, {\n      componentName: \"TestComponent\",\n      description: \"A test component\",\n      propsSchema: testSchema,\n    });\n\n    render(\n      <TamboInteractableProvider>\n        <InteractableComponent title=\"Test Title\" count={100} />\n      </TamboInteractableProvider>,\n    );\n\n    expect(screen.getByTestId(\"title\")).toHaveTextContent(\"Test Title\");\n    expect(screen.getByTestId(\"count\")).toHaveTextContent(\"100\");\n  });\n\n  it(\"should filter out interactable-specific props from component props\", () => {\n    interface ExtendedProps extends TestComponentProps {\n      onInteractableReady?: (id: string) => void;\n      onPropsUpdate?: (props: Record<string, any>) => void;\n    }\n\n    const ExtendedComponent: React.FC<ExtendedProps> = ({\n      title,\n      onInteractableReady,\n      onPropsUpdate,\n    }) => (\n      <div>\n        <span data-testid=\"title\">{title}</span>\n        <span data-testid=\"has-ready\">\n          {onInteractableReady ? \"yes\" : \"no\"}\n        </span>\n        <span data-testid=\"has-update\">{onPropsUpdate ? \"yes\" : \"no\"}</span>\n      </div>\n    );\n\n    const InteractableComponent = withTamboInteractable(ExtendedComponent, {\n      componentName: \"ExtendedComponent\",\n      description: \"An extended component\",\n    });\n\n    const mockReady = jest.fn();\n    const mockUpdate = jest.fn();\n\n    render(\n      <TamboInteractableProvider>\n        <InteractableComponent\n          title=\"Test\"\n          onInteractableReady={mockReady}\n          onPropsUpdate={mockUpdate}\n        />\n      </TamboInteractableProvider>,\n    );\n\n    expect(screen.getByTestId(\"title\")).toHaveTextContent(\"Test\");\n    // These props should be filtered out\n    expect(screen.getByTestId(\"has-ready\")).toHaveTextContent(\"no\");\n    expect(screen.getByTestId(\"has-update\")).toHaveTextContent(\"no\");\n  });\n\n  it(\"should work without propsSchema\", () => {\n    const InteractableComponent = withTamboInteractable(TestComponent, {\n      componentName: \"TestComponent\",\n      description: \"A test component\",\n    });\n\n    render(\n      <TamboInteractableProvider>\n        <InteractableComponent title=\"No Schema\" />\n      </TamboInteractableProvider>,\n    );\n\n    expect(screen.getByTestId(\"title\")).toHaveTextContent(\"No Schema\");\n  });\n\n  it(\"should render before interactable ID is set\", () => {\n    const InteractableComponent = withTamboInteractable(TestComponent, {\n      componentName: \"TestComponent\",\n      description: \"A test component\",\n    });\n\n    const { container } = render(\n      <TamboInteractableProvider>\n        <InteractableComponent title=\"Early Render\" />\n      </TamboInteractableProvider>,\n    );\n\n    // Component should render even before ID is available\n    expect(\n      container.querySelector('[data-testid=\"title\"]'),\n    ).toBeInTheDocument();\n  });\n\n  it(\"should handle null/undefined values in props\", () => {\n    interface NullableProps {\n      title: string;\n      optional?: string;\n      nullable: string | null;\n    }\n\n    const NullableComponent: React.FC<NullableProps> = ({\n      title,\n      optional,\n      nullable,\n    }) => (\n      <div>\n        <span data-testid=\"title\">{title}</span>\n        <span data-testid=\"optional\">{optional ?? \"undefined\"}</span>\n        <span data-testid=\"nullable\">{nullable ?? \"null\"}</span>\n      </div>\n    );\n\n    const InteractableComponent = withTamboInteractable(NullableComponent, {\n      componentName: \"NullableComponent\",\n      description: \"A component with nullable props\",\n    });\n\n    render(\n      <TamboInteractableProvider>\n        <InteractableComponent title=\"Test\" nullable={null} />\n      </TamboInteractableProvider>,\n    );\n\n    expect(screen.getByTestId(\"title\")).toHaveTextContent(\"Test\");\n    expect(screen.getByTestId(\"optional\")).toHaveTextContent(\"undefined\");\n    expect(screen.getByTestId(\"nullable\")).toHaveTextContent(\"null\");\n  });\n});\n"]}

package/dist/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./react-query-hooks";
 export { useTamboComponentState } from "./use-component-state";
-export { useTamboCurrentMessage } from "./use-current-message";
+export { useTamboCurrentComponent, useTamboCurrentMessage, type TamboCurrentComponent, } from "./use-current-message";
 export { useTamboStreamingProps } from "./use-streaming-props";
 export * from "./use-suggestions";
 export { useTamboStreamStatus, type PropStatus, type StreamStatus, } from "./use-tambo-stream-status";

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,cAAc,mBAAmB,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,KAAK,UAAU,EACf,KAAK,YAAY,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EACL,wBAAwB,EACxB,sBAAsB,EACtB,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,cAAc,mBAAmB,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,KAAK,UAAU,EACf,KAAK,YAAY,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/hooks/index.js

@@ -14,12 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTamboVoice = exports.useTamboThreadList = exports.useTamboStreamStatus = exports.useTamboStreamingProps = exports.useTamboCurrentMessage = exports.useTamboComponentState = void 0;
+exports.useTamboVoice = exports.useTamboThreadList = exports.useTamboStreamStatus = exports.useTamboStreamingProps = exports.useTamboCurrentMessage = exports.useTamboCurrentComponent = exports.useTamboComponentState = void 0;
 // Export all hooks from this directory
 __exportStar(require("./react-query-hooks"), exports);
 var use_component_state_1 = require("./use-component-state");
 Object.defineProperty(exports, "useTamboComponentState", { enumerable: true, get: function () { return use_component_state_1.useTamboComponentState; } });
 var use_current_message_1 = require("./use-current-message");
+Object.defineProperty(exports, "useTamboCurrentComponent", { enumerable: true, get: function () { return use_current_message_1.useTamboCurrentComponent; } });
 Object.defineProperty(exports, "useTamboCurrentMessage", { enumerable: true, get: function () { return use_current_message_1.useTamboCurrentMessage; } });
 var use_streaming_props_1 = require("./use-streaming-props");
 Object.defineProperty(exports, "useTamboStreamingProps", { enumerable: true, get: function () { return use_streaming_props_1.useTamboStreamingProps; } });

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,uCAAuC;AACvC,sDAAoC;AACpC,6DAA+D;AAAtD,6HAAA,sBAAsB,OAAA;AAC/B,6DAA+D;AAAtD,6HAAA,sBAAsB,OAAA;AAC/B,6DAA+D;AAAtD,6HAAA,sBAAsB,OAAA;AAC/B,oDAAkC;AAClC,qEAImC;AAHjC,+HAAA,oBAAoB,OAAA;AAItB,yDAAyD;AAAhD,uHAAA,kBAAkB,OAAA;AAC3B,qDAAkD;AAAzC,gHAAA,aAAa,OAAA","sourcesContent":["// Export all hooks from this directory\nexport * from \"./react-query-hooks\";\nexport { useTamboComponentState } from \"./use-component-state\";\nexport { useTamboCurrentMessage } from \"./use-current-message\";\nexport { useTamboStreamingProps } from \"./use-streaming-props\";\nexport * from \"./use-suggestions\";\nexport {\n  useTamboStreamStatus,\n  type PropStatus,\n  type StreamStatus,\n} from \"./use-tambo-stream-status\";\nexport { useTamboThreadList } from \"./use-tambo-threads\";\nexport { useTamboVoice } from \"./use-tambo-voice\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,uCAAuC;AACvC,sDAAoC;AACpC,6DAA+D;AAAtD,6HAAA,sBAAsB,OAAA;AAC/B,6DAI+B;AAH7B,+HAAA,wBAAwB,OAAA;AACxB,6HAAA,sBAAsB,OAAA;AAGxB,6DAA+D;AAAtD,6HAAA,sBAAsB,OAAA;AAC/B,oDAAkC;AAClC,qEAImC;AAHjC,+HAAA,oBAAoB,OAAA;AAItB,yDAAyD;AAAhD,uHAAA,kBAAkB,OAAA;AAC3B,qDAAkD;AAAzC,gHAAA,aAAa,OAAA","sourcesContent":["// Export all hooks from this directory\nexport * from \"./react-query-hooks\";\nexport { useTamboComponentState } from \"./use-component-state\";\nexport {\n  useTamboCurrentComponent,\n  useTamboCurrentMessage,\n  type TamboCurrentComponent,\n} from \"./use-current-message\";\nexport { useTamboStreamingProps } from \"./use-streaming-props\";\nexport * from \"./use-suggestions\";\nexport {\n  useTamboStreamStatus,\n  type PropStatus,\n  type StreamStatus,\n} from \"./use-tambo-stream-status\";\nexport { useTamboThreadList } from \"./use-tambo-threads\";\nexport { useTamboVoice } from \"./use-tambo-voice\";\n"]}

package/dist/hooks/use-component-state.d.ts

@@ -1,31 +1,18 @@
 type StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];
 /**
- * A React hook that acts like useState, but also automatically updates the thread message's componentState.
- * Benefits: Passes user changes to AI, and when threads are returned, state is preserved.
- * @param keyName - The unique key to identify this state value within the message's componentState object
- * @param initialValue - Optional initial value for the state, used if no componentState value exists in the Tambo message containing this hook usage.
- * @param setFromProp - Optional value used to set the state value, only while no componentState value exists in the Tambo message containing this hook usage. Use this to allow streaming updates from a prop to the state value.
- * @param debounceTime - Optional debounce time in milliseconds (default: 500ms) to limit API calls.
- * @returns A tuple containing:
- *   - The current state value
- *   - A setter function to update the state (updates UI immediately, debounces server sync)
- * @example
- * const [count, setCount] = useTamboComponentState("counter", 0);
+ * Like useState, but syncs to the thread message's `componentState`.
  *
- * // Usage with object state
- * const [formState, setFormState] = useTamboComponentState("myForm", {
- *   name: "",
- *   email: "",
- *   message: ""
- * });
+ * Use `setFromProp` to seed state from streamed props. During streaming,
+ * state updates as new prop values arrive. Once streaming completes,
+ * user edits take precedence over the original prop value.
  *
- * // Handling form input
- * const handleChange = (e) => {
- *   setFormState({
- *     ...formState,
- *     [e.target.name]: e.target.value
- *   });
- * };
+ * Pair with `useTamboStreamStatus` to disable inputs while streaming.
+ * @see {@link https://docs.tambo.co/concepts/streaming/streaming-best-practices}
+ * @param keyName - Unique key within the message's componentState
+ * @param initialValue - Default value if no componentState exists
+ * @param setFromProp - Seeds state from props (updates during streaming, then user edits take over)
+ * @param debounceTime - Server sync debounce in ms (default: 500)
+ * @returns A tuple of [currentState, setState] similar to React's useState
  */
 export declare function useTamboComponentState<S = undefined>(keyName: string, initialValue?: S, setFromProp?: S, debounceTime?: number): StateUpdateResult<S | undefined>;
 export declare function useTamboComponentState<S>(keyName: string, initialValue: S, setFromProp?: S, debounceTime?: number): StateUpdateResult<S>;

package/dist/hooks/use-component-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-component-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"AAMA,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,GAAG,SAAS,EAClD,OAAO,EAAE,MAAM,EACf,YAAY,CAAC,EAAE,CAAC,EAChB,WAAW,CAAC,EAAE,CAAC,EACf,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;AACpC,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,CAAC,EACf,WAAW,CAAC,EAAE,CAAC,EACf,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"use-component-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"AAMA,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAE/E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,GAAG,SAAS,EAClD,OAAO,EAAE,MAAM,EACf,YAAY,CAAC,EAAE,CAAC,EAChB,WAAW,CAAC,EAAE,CAAC,EACf,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;AACpC,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,CAAC,EACf,WAAW,CAAC,EAAE,CAAC,EACf,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAAC,CAAC,CAAC,CAAC"}

package/dist/hooks/use-component-state.js

@@ -14,7 +14,7 @@ function useTamboComponentState(keyName, initialValue, setFromProp, debounceTime
     const [localState, setLocalState] = (0, react_1.useState)(messageState ?? initialValue);
     const [initializedFromThreadMessage, setInitializedFromThreadMessage] = (0, react_1.useState)(messageState ? true : false);
     // Optimistically update the local thread message's componentState
-    const updateLocalThreadMessage = (0, react_1.useCallback)((newState, existingMessage) => {
+    const updateLocalThreadMessage = (0, react_1.useCallback)(async (newState, existingMessage) => {
         const updatedMessage = {
             threadId: existingMessage.threadId,
             componentState: {
@@ -22,7 +22,7 @@ function useTamboComponentState(keyName, initialValue, setFromProp, debounceTime
                 [keyName]: newState,
             },
         };
-        updateThreadMessage(existingMessage.id, updatedMessage, false);
+        await updateThreadMessage(existingMessage.id, updatedMessage, false);
     }, [updateThreadMessage, keyName]);
     // Debounced callback to update the remote thread message's componentState
     const updateRemoteThreadMessage = (0, use_debounce_1.useDebouncedCallback)(async (newState, existingMessage) => {
@@ -33,8 +33,8 @@ function useTamboComponentState(keyName, initialValue, setFromProp, debounceTime
     }, debounceTime);
     const setValue = (0, react_1.useCallback)((newState) => {
         setLocalState(newState);
-        updateLocalThreadMessage(newState, message);
-        updateRemoteThreadMessage(newState, message);
+        void updateLocalThreadMessage(newState, message);
+        void updateRemoteThreadMessage(newState, message);
     }, [message, updateLocalThreadMessage, updateRemoteThreadMessage]);
     // Mirror the thread message's componentState value to the local state
     (0, react_1.useEffect)(() => {
@@ -54,7 +54,16 @@ function useTamboComponentState(keyName, initialValue, setFromProp, debounceTime
     // Ensure pending changes are flushed on unmount
     (0, react_1.useEffect)(() => {
         return () => {
-            updateRemoteThreadMessage.flush();
+            async function flushUpdates() {
+                try {
+                    await updateRemoteThreadMessage.flush();
+                }
+                catch (error) {
+                    console.error("Failed to flush pending thread message updates:", error);
+                }
+            }
+            // Fire-and-forget cleanup (errors handled inside)
+            void flushUpdates();
         };
     }, [updateRemoteThreadMessage]);
     return [localState, setValue];

package/dist/hooks/use-component-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { TamboThreadMessage, useTamboClient, useTamboThread } from \"..\";\nimport { useTamboCurrentMessage } from \"./use-current-message\";\n\ntype StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];\n\n/**\n * A React hook that acts like useState, but also automatically updates the thread message's componentState.\n * Benefits: Passes user changes to AI, and when threads are returned, state is preserved.\n * @param keyName - The unique key to identify this state value within the message's componentState object\n * @param initialValue - Optional initial value for the state, used if no componentState value exists in the Tambo message containing this hook usage.\n * @param setFromProp - Optional value used to set the state value, only while no componentState value exists in the Tambo message containing this hook usage. Use this to allow streaming updates from a prop to the state value.\n * @param debounceTime - Optional debounce time in milliseconds (default: 500ms) to limit API calls.\n * @returns A tuple containing:\n *   - The current state value\n *   - A setter function to update the state (updates UI immediately, debounces server sync)\n * @example\n * const [count, setCount] = useTamboComponentState(\"counter\", 0);\n *\n * // Usage with object state\n * const [formState, setFormState] = useTamboComponentState(\"myForm\", {\n *   name: \"\",\n *   email: \"\",\n *   message: \"\"\n * });\n *\n * // Handling form input\n * const handleChange = (e) => {\n *   setFormState({\n *     ...formState,\n *     [e.target.name]: e.target.value\n *   });\n * };\n */\nexport function useTamboComponentState<S = undefined>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S | undefined>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime = 500,\n): StateUpdateResult<S> {\n  const message = useTamboCurrentMessage();\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const messageState = message?.componentState?.[keyName];\n  const [localState, setLocalState] = useState<S | undefined>(\n    (messageState as S) ?? initialValue,\n  );\n  const [initializedFromThreadMessage, setInitializedFromThreadMessage] =\n    useState(messageState ? true : false);\n\n  // Optimistically update the local thread message's componentState\n  const updateLocalThreadMessage = useCallback(\n    (newState: S, existingMessage: TamboThreadMessage) => {\n      const updatedMessage = {\n        threadId: existingMessage.threadId,\n        componentState: {\n          ...existingMessage.componentState,\n          [keyName]: newState,\n        },\n      };\n      updateThreadMessage(existingMessage.id, updatedMessage, false);\n    },\n    [updateThreadMessage, keyName],\n  );\n\n  // Debounced callback to update the remote thread message's componentState\n  const updateRemoteThreadMessage = useDebouncedCallback(\n    async (newState: S, existingMessage: TamboThreadMessage) => {\n      await client.beta.threads.messages.updateComponentState(\n        existingMessage.id,\n        {\n          id: existingMessage.threadId,\n          state: { [keyName]: newState },\n        },\n      );\n    },\n    debounceTime,\n  );\n\n  const setValue = useCallback(\n    (newState: S) => {\n      setLocalState(newState);\n      updateLocalThreadMessage(newState, message);\n      updateRemoteThreadMessage(newState, message);\n    },\n    [message, updateLocalThreadMessage, updateRemoteThreadMessage],\n  );\n\n  // Mirror the thread message's componentState value to the local state\n  useEffect(() => {\n    const messageState = message?.componentState?.[keyName];\n    if (!messageState) {\n      return;\n    }\n    setInitializedFromThreadMessage(true);\n    setLocalState(message.componentState?.[keyName] as S);\n  }, [message?.componentState?.[keyName], message, keyName]);\n\n  // For editable fields that are set from a prop to allow streaming updates, don't overwrite a fetched state value set from the thread message with prop value on initial load.\n  useEffect(() => {\n    if (setFromProp !== undefined && !initializedFromThreadMessage) {\n      setLocalState(setFromProp as S);\n    }\n  }, [setFromProp, initializedFromThreadMessage]);\n\n  // Ensure pending changes are flushed on unmount\n  useEffect(() => {\n    return () => {\n      updateRemoteThreadMessage.flush();\n    };\n  }, [updateRemoteThreadMessage]);\n\n  return [localState as S, setValue];\n}\n"]}
+{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { TamboThreadMessage, useTamboClient, useTamboThread } from \"..\";\nimport { useTamboCurrentMessage } from \"./use-current-message\";\n\ntype StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];\n\n/**\n * Like useState, but syncs to the thread message's `componentState`.\n *\n * Use `setFromProp` to seed state from streamed props. During streaming,\n * state updates as new prop values arrive. Once streaming completes,\n * user edits take precedence over the original prop value.\n *\n * Pair with `useTamboStreamStatus` to disable inputs while streaming.\n * @see {@link https://docs.tambo.co/concepts/streaming/streaming-best-practices}\n * @param keyName - Unique key within the message's componentState\n * @param initialValue - Default value if no componentState exists\n * @param setFromProp - Seeds state from props (updates during streaming, then user edits take over)\n * @param debounceTime - Server sync debounce in ms (default: 500)\n * @returns A tuple of [currentState, setState] similar to React's useState\n */\nexport function useTamboComponentState<S = undefined>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S | undefined>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue: S,\n  setFromProp?: S,\n  debounceTime?: number,\n): StateUpdateResult<S>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue?: S,\n  setFromProp?: S,\n  debounceTime = 500,\n): StateUpdateResult<S> {\n  const message = useTamboCurrentMessage();\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n  const messageState = message?.componentState?.[keyName];\n  const [localState, setLocalState] = useState<S | undefined>(\n    (messageState as S) ?? initialValue,\n  );\n  const [initializedFromThreadMessage, setInitializedFromThreadMessage] =\n    useState(messageState ? true : false);\n\n  // Optimistically update the local thread message's componentState\n  const updateLocalThreadMessage = useCallback(\n    async (newState: S, existingMessage: TamboThreadMessage) => {\n      const updatedMessage = {\n        threadId: existingMessage.threadId,\n        componentState: {\n          ...existingMessage.componentState,\n          [keyName]: newState,\n        },\n      };\n      await updateThreadMessage(existingMessage.id, updatedMessage, false);\n    },\n    [updateThreadMessage, keyName],\n  );\n\n  // Debounced callback to update the remote thread message's componentState\n  const updateRemoteThreadMessage = useDebouncedCallback(\n    async (newState: S, existingMessage: TamboThreadMessage) => {\n      await client.beta.threads.messages.updateComponentState(\n        existingMessage.id,\n        {\n          id: existingMessage.threadId,\n          state: { [keyName]: newState },\n        },\n      );\n    },\n    debounceTime,\n  );\n\n  const setValue = useCallback(\n    (newState: S) => {\n      setLocalState(newState);\n      void updateLocalThreadMessage(newState, message);\n      void updateRemoteThreadMessage(newState, message);\n    },\n    [message, updateLocalThreadMessage, updateRemoteThreadMessage],\n  );\n\n  // Mirror the thread message's componentState value to the local state\n  useEffect(() => {\n    const messageState = message?.componentState?.[keyName];\n    if (!messageState) {\n      return;\n    }\n    setInitializedFromThreadMessage(true);\n    setLocalState(message.componentState?.[keyName] as S);\n  }, [message?.componentState?.[keyName], message, keyName]);\n\n  // For editable fields that are set from a prop to allow streaming updates, don't overwrite a fetched state value set from the thread message with prop value on initial load.\n  useEffect(() => {\n    if (setFromProp !== undefined && !initializedFromThreadMessage) {\n      setLocalState(setFromProp as S);\n    }\n  }, [setFromProp, initializedFromThreadMessage]);\n\n  // Ensure pending changes are flushed on unmount\n  useEffect(() => {\n    return () => {\n      async function flushUpdates() {\n        try {\n          await updateRemoteThreadMessage.flush();\n        } catch (error) {\n          console.error(\n            \"Failed to flush pending thread message updates:\",\n            error,\n          );\n        }\n      }\n      // Fire-and-forget cleanup (errors handled inside)\n      void flushUpdates();\n    };\n  }, [updateRemoteThreadMessage]);\n\n  return [localState as S, setValue];\n}\n"]}

package/dist/hooks/use-component-state.test.d.ts.map

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

package/dist/hooks/{__tests__/use-component-state.test.js → use-component-state.test.js}

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@testing-library/react");
-const tambo_client_provider_1 = require("../../providers/tambo-client-provider");
-const tambo_thread_provider_1 = require("../../providers/tambo-thread-provider");
-const use_component_state_1 = require("../use-component-state");
-const use_current_message_1 = require("../use-current-message");
+const tambo_client_provider_1 = require("../providers/tambo-client-provider");
+const tambo_thread_provider_1 = require("../providers/tambo-thread-provider");
+const use_component_state_1 = require("./use-component-state");
+const use_current_message_1 = require("./use-current-message");
 // Mock the required providers
-jest.mock("../../providers/tambo-client-provider", () => ({
+jest.mock("../providers/tambo-client-provider", () => ({
     useTamboClient: jest.fn(),
 }));
-jest.mock("../../providers/tambo-thread-provider", () => ({
+jest.mock("../providers/tambo-thread-provider", () => ({
     useTamboThread: jest.fn(),
 }));
-jest.mock("../use-current-message", () => ({
+jest.mock("./use-current-message", () => ({
     useTamboCurrentMessage: jest.fn(),
 }));
 // Create a mock debounced function with flush method

package/dist/hooks/use-component-state.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-component-state.test.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { act, renderHook } from \"@testing-library/react\";\nimport { TamboThreadMessage } from \"../model/generate-component-response\";\nimport { useTamboClient } from \"../providers/tambo-client-provider\";\nimport { useTamboThread } from \"../providers/tambo-thread-provider\";\nimport { PartialTamboAI } from \"../testing/types\";\nimport { useTamboComponentState } from \"./use-component-state\";\nimport { useTamboCurrentMessage } from \"./use-current-message\";\n\n// Mock the required providers\njest.mock(\"../providers/tambo-client-provider\", () => ({\n  useTamboClient: jest.fn(),\n}));\n\njest.mock(\"../providers/tambo-thread-provider\", () => ({\n  useTamboThread: jest.fn(),\n}));\n\njest.mock(\"./use-current-message\", () => ({\n  useTamboCurrentMessage: jest.fn(),\n}));\n\n// Create a mock debounced function with flush method\nconst createMockDebouncedFunction = (fn: any) => {\n  const debouncedFn = jest.fn((...args: any[]) => fn(...args)) as jest.Mock & {\n    flush: jest.Mock;\n    cancel: jest.Mock;\n    isPending: () => boolean;\n  };\n  debouncedFn.flush = jest.fn();\n  debouncedFn.cancel = jest.fn();\n  debouncedFn.isPending = jest.fn(() => false);\n  return debouncedFn;\n};\n\n// Mock use-debounce\njest.mock(\"use-debounce\", () => ({\n  useDebouncedCallback: jest.fn(),\n}));\n\n// Import the mocked useDebouncedCallback\nimport { useDebouncedCallback } from \"use-debounce\";\n\ndescribe(\"useTamboComponentState\", () => {\n  // Helper function to create mock TamboThreadMessage\n  const createMockMessage = (\n    overrides: Partial<TamboThreadMessage> = {},\n  ): TamboThreadMessage => ({\n    id: \"test-message-id\",\n    threadId: \"test-thread-id\",\n    componentState: {},\n    content: [{ type: \"text\", text: \"Test message\" }],\n    createdAt: new Date().toISOString(),\n    role: \"assistant\",\n    ...overrides,\n  });\n\n  const mockUpdateThreadMessage = jest.fn();\n  const mockUpdateComponentState = jest.fn();\n\n  beforeEach(() => {\n    jest.clearAllMocks();\n\n    // Setup default mock for useDebouncedCallback\n    jest\n      .mocked(useDebouncedCallback)\n      .mockImplementation((fn) => createMockDebouncedFunction(fn));\n\n    // Setup default mocks\n    jest.mocked(useTamboClient).mockReturnValue({\n      beta: {\n        threads: {\n          messages: {\n            updateComponentState: mockUpdateComponentState,\n          },\n        },\n      },\n    } satisfies PartialTamboAI as any);\n\n    jest.mocked(useTamboThread).mockReturnValue({\n      updateThreadMessage: mockUpdateThreadMessage,\n    } as any);\n\n    jest.mocked(useTamboCurrentMessage).mockReturnValue(createMockMessage());\n  });\n\n  describe(\"Initial State Management\", () => {\n    it(\"should initialize with initialValue when no componentState exists\", () => {\n      const initialValue = \"test-initial\";\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", initialValue),\n      );\n\n      expect(result.current[0]).toBe(initialValue);\n    });\n\n    it(\"should use existing componentState value over initialValue\", () => {\n      const initialValue = \"initial\";\n      const existingValue = \"existing\";\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(\n        createMockMessage({\n          componentState: { testKey: existingValue },\n        }),\n      );\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", initialValue),\n      );\n\n      expect(result.current[0]).toBe(existingValue);\n    });\n\n    it(\"should handle undefined initialValue gracefully\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const { result } = renderHook(() => useTamboComponentState(\"testKey\"));\n\n      expect(result.current[0]).toBeUndefined();\n    });\n\n    it(\"should handle different data types correctly\", () => {\n      const testCases = [\n        { value: \"string\" },\n        { value: 42 },\n        { value: true },\n        { value: { name: \"test\" } },\n        { value: [1, 2, 3] },\n      ];\n\n      testCases.forEach(({ value }) => {\n        jest.mocked(useTamboCurrentMessage).mockReturnValue(\n          createMockMessage({\n            componentState: { testKey: value },\n          }),\n        );\n\n        const { result } = renderHook(() =>\n          useTamboComponentState(\"testKey\", value),\n        );\n\n        expect(result.current[0]).toEqual(value);\n      });\n    });\n  });\n\n  describe(\"State Updates\", () => {\n    it(\"should update local state immediately when setValue is called\", () => {\n      const initialValue = \"initial\";\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(\n          createMockMessage({ componentState: { testKey: initialValue } }),\n        );\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", initialValue),\n      );\n\n      const newValue = \"updated\";\n      act(() => {\n        result.current[1](newValue);\n      });\n\n      expect(result.current[0]).toBe(newValue);\n    });\n\n    it(\"should trigger local thread message update when setValue is called\", () => {\n      const message = createMockMessage({\n        componentState: { testKey: \"initial\" },\n      });\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      const newValue = \"updated\";\n      act(() => {\n        result.current[1](newValue);\n      });\n\n      expect(mockUpdateThreadMessage).toHaveBeenCalledWith(\n        message.id,\n        {\n          threadId: message.threadId,\n          componentState: {\n            testKey: newValue,\n          },\n        },\n        false,\n      );\n    });\n\n    it(\"should trigger debounced remote API call when setValue is called\", () => {\n      const message = createMockMessage({\n        componentState: { testKey: \"initial\" },\n      });\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      const newValue = \"updated\";\n      act(() => {\n        result.current[1](newValue);\n      });\n\n      // The debounced function should be called\n      expect(mockUpdateComponentState).toHaveBeenCalledWith(message.id, {\n        id: message.threadId,\n        state: { testKey: newValue },\n      });\n    });\n\n    it(\"should work with complex objects and arrays\", () => {\n      const initialValue = { name: \"test\", items: [1, 2, 3] };\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(\n          createMockMessage({ componentState: { testKey: initialValue } }),\n        );\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", initialValue),\n      );\n\n      const newValue = { name: \"updated\", items: [4, 5, 6] };\n      act(() => {\n        result.current[1](newValue);\n      });\n\n      expect(result.current[0]).toEqual(newValue);\n      expect(mockUpdateThreadMessage).toHaveBeenCalledWith(\n        expect.any(String),\n        expect.objectContaining({\n          componentState: {\n            testKey: newValue,\n          },\n        }),\n        false,\n      );\n    });\n  });\n\n  describe(\"Debouncing Behavior\", () => {\n    it(\"should use default debounce time of 500ms\", () => {\n      renderHook(() => useTamboComponentState(\"testKey\", \"initial\"));\n\n      expect(useDebouncedCallback).toHaveBeenCalledWith(\n        expect.any(Function),\n        500,\n      );\n    });\n\n    it(\"should use custom debounce time when provided\", () => {\n      const customDebounceTime = 1000;\n\n      renderHook(() =>\n        useTamboComponentState(\n          \"testKey\",\n          \"initial\",\n          undefined,\n          customDebounceTime,\n        ),\n      );\n\n      expect(useDebouncedCallback).toHaveBeenCalledWith(\n        expect.any(Function),\n        customDebounceTime,\n      );\n    });\n\n    it(\"should flush debounced callback on unmount\", () => {\n      const mockFlush = jest.fn();\n      const mockDebouncedFn = createMockDebouncedFunction(jest.fn());\n      mockDebouncedFn.flush = mockFlush;\n\n      // Mock the debounced callback to return our specific mock\n      jest.mocked(useDebouncedCallback).mockReturnValue(mockDebouncedFn);\n\n      const { unmount } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      unmount();\n\n      expect(mockFlush).toHaveBeenCalled();\n    });\n  });\n\n  describe(\"Multi-Hook Scenarios\", () => {\n    it(\"should handle multiple hooks with different keyNames independently\", () => {\n      const message = createMockMessage({\n        componentState: {\n          key1: \"value1\",\n          key2: \"value2\",\n        },\n      });\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n\n      const { result: result1 } = renderHook(() =>\n        useTamboComponentState(\"key1\", \"default1\"),\n      );\n      const { result: result2 } = renderHook(() =>\n        useTamboComponentState(\"key2\", \"default2\"),\n      );\n\n      expect(result1.current[0]).toBe(\"value1\");\n      expect(result2.current[0]).toBe(\"value2\");\n\n      // Update first hook\n      act(() => {\n        result1.current[1](\"updated1\");\n      });\n\n      expect(result1.current[0]).toBe(\"updated1\");\n      expect(result2.current[0]).toBe(\"value2\"); // Should remain unchanged\n    });\n\n    it(\"should preserve existing componentState when updating another key\", () => {\n      const message = createMockMessage({\n        componentState: {\n          existingKey: \"existing\",\n          testKey: \"initial\",\n        },\n      });\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      act(() => {\n        result.current[1](\"updated\");\n      });\n\n      expect(mockUpdateThreadMessage).toHaveBeenCalledWith(\n        message.id,\n        {\n          threadId: message.threadId,\n          componentState: {\n            existingKey: \"existing\", // Should preserve existing keys\n            testKey: \"updated\",\n          },\n        },\n        false,\n      );\n    });\n  });\n\n  describe(\"SetFromProp Feature\", () => {\n    it(\"should set value from prop when hasSetFromMessage is false\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const propValue = \"from-prop\";\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\", propValue),\n      );\n\n      // Initially, hasSetFromMessage should be false, so prop value should be used\n      expect(result.current[0]).toBe(propValue);\n    });\n\n    it(\"should ignore setFromProp when initialized from message state\", async () => {\n      const existingValue = \"existing\";\n      jest.mocked(useTamboCurrentMessage).mockReturnValue(\n        createMockMessage({\n          componentState: { testKey: existingValue },\n        }),\n      );\n\n      const propValue = \"from-prop\";\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\", propValue),\n      );\n\n      // Should use existing value from message, not prop value\n      await act(async () => {\n        await new Promise((resolve) => setTimeout(resolve, 0));\n      });\n\n      expect(result.current[0]).toBe(existingValue);\n    });\n\n    it(\"should update state from setFromProp changes when no message state exists\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const { result, rerender } = renderHook(\n        ({ propValue }) =>\n          useTamboComponentState(\"testKey\", \"initial\", propValue),\n        { initialProps: { propValue: \"prop1\" } },\n      );\n\n      expect(result.current[0]).toBe(\"prop1\");\n\n      // Change prop value\n      rerender({ propValue: \"prop2\" });\n\n      // Since hasSetFromMessage is still false (no message state),\n      // it should update to new prop value\n      expect(result.current[0]).toBe(\"prop2\");\n    });\n\n    it(\"should handle undefined setFromProp gracefully\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(createMockMessage({ componentState: {} }));\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\", undefined),\n      );\n\n      expect(result.current[0]).toBe(\"initial\");\n    });\n  });\n\n  describe(\"Message State Sync\", () => {\n    it(\"should sync with message.componentState changes\", () => {\n      const { result, rerender } = renderHook(\n        ({ message }) => {\n          jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n          return useTamboComponentState(\"testKey\", \"initial\");\n        },\n        {\n          initialProps: {\n            message: createMockMessage({\n              componentState: { testKey: \"value1\" },\n            }),\n          },\n        },\n      );\n\n      // Change the message\n      const newMessage = createMockMessage({\n        componentState: { testKey: \"value2\" },\n      });\n\n      rerender({ message: newMessage });\n\n      // The hook should sync with the new message state\n      expect(result.current[0]).toBe(\"value2\");\n      expect(mockUpdateThreadMessage).not.toHaveBeenCalled();\n    });\n\n    it(\"should handle message without componentState gracefully\", () => {\n      jest\n        .mocked(useTamboCurrentMessage)\n        .mockReturnValue(\n          createMockMessage({ componentState: undefined as any }),\n        );\n\n      const { result } = renderHook(() =>\n        useTamboComponentState(\"testKey\", \"initial\"),\n      );\n\n      expect(result.current[0]).toBe(\"initial\");\n    });\n\n    it(\"should preserve state when message updates but componentState[keyName] unchanged\", () => {\n      const message1 = createMockMessage({\n        id: \"message1\",\n        componentState: { testKey: \"unchanged\" },\n      });\n      const message2 = createMockMessage({\n        id: \"message2\",\n        componentState: { testKey: \"unchanged\" },\n      });\n\n      const { result, rerender } = renderHook(\n        ({ message }) => {\n          jest.mocked(useTamboCurrentMessage).mockReturnValue(message);\n          return useTamboComponentState(\"testKey\", \"initial\");\n        },\n        { initialProps: { message: message1 } },\n      );\n\n      // Clear previous calls\n      mockUpdateThreadMessage.mockClear();\n\n      // Change message but keep same componentState value\n      rerender({ message: message2 });\n\n      // Should preserve the \"unchanged\" value\n      expect(result.current[0]).toBe(\"unchanged\");\n    });\n  });\n});\n"]}

package/dist/hooks/use-current-message.d.ts

@@ -1,27 +1,71 @@
-import React, { PropsWithChildren } from "react";
-import { TamboThreadMessage } from "../model/generate-component-response";
+import React from "react";
+import { InteractableMetadata, TamboThreadMessage } from "../model/generate-component-response";
+export interface TamboMessageProviderProps {
+    children: React.ReactNode;
+    message: TamboThreadMessage;
+    /** Optional interactable metadata for components wrapped with withInteractable */
+    interactableMetadata?: InteractableMetadata;
+}
 /**
- * Wraps all components, so that they can find what message they are in
+ * Wraps all components, so that they can find what message they are in.
+ * Also supports optional interactable metadata for components wrapped with withInteractable.
  * @param props - props for the TamboMessageProvider
  * @param props.children - The children to wrap
  * @param props.message - The message object
+ * @param props.interactableMetadata - Optional interactable component metadata
  * @returns The wrapped component
  */
-export declare const TamboMessageProvider: React.FC<PropsWithChildren<{
-    message: TamboThreadMessage;
-}>>;
+export declare const TamboMessageProvider: React.FC<TamboMessageProviderProps>;
 /**
  * Wraps a component with a TamboMessageProvider - this allows the provider
  * to be used outside of a TSX file
  * @param children - The children to wrap
  * @param message - The message object
+ * @param interactableMetadata - Optional interactable metadata
  * @returns The wrapped component
  */
-export declare function wrapWithTamboMessageProvider(children: React.ReactNode, message: TamboThreadMessage): React.JSX.Element;
+export declare function wrapWithTamboMessageProvider(children: React.ReactNode, message: TamboThreadMessage, interactableMetadata?: InteractableMetadata): React.JSX.Element;
 /**
  * Hook used inside a component wrapped with TamboMessageProvider, to get
  * the current message.
  * @returns The current message that is used to render the component
  */
 export declare const useTamboCurrentMessage: () => TamboThreadMessage;
+/**
+ * Component info extracted from the current message and interactable context.
+ * Provides a unified interface for accessing component metadata.
+ */
+export interface TamboCurrentComponent {
+    /** Component name from the message */
+    componentName?: string;
+    /** Component props from the message */
+    props?: Record<string, any>;
+    /** Interactable ID (only present for components wrapped with withInteractable) */
+    interactableId?: string;
+    /** Description (only present for components wrapped with withInteractable) */
+    description?: string;
+}
+/**
+ * Hook to access the current component information from the message context.
+ * Provides a unified interface for both AI-generated and interactable components.
+ *
+ * **Use this hook when you need component metadata regardless of the context.**
+ * @returns Component info including name, props, and interactable metadata if available, or null if used outside TamboMessageProvider
+ * @example
+ * ```tsx
+ * function MyInlineEditor() {
+ *   const component = useTamboCurrentComponent();
+ *
+ *   if (!component) return null; // Not inside a component
+ *
+ *   return (
+ *     <div>
+ *       Editing: {component.componentName}
+ *       {component.interactableId && <span>ID: {component.interactableId}</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const useTamboCurrentComponent: () => TamboCurrentComponent | null;
 //# sourceMappingURL=use-current-message.d.ts.map

package/dist/hooks/use-current-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-current-message.d.ts","sourceRoot":"","sources":["../../src/hooks/use-current-message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI1E;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CACzC,iBAAiB,CAAC;IAAE,OAAO,EAAE,kBAAkB,CAAA;CAAE,CAAC,CAUnD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,4BAA4B,CAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,OAAO,EAAE,kBAAkB,qBAK5B;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,0BAQlC,CAAC"}
+{"version":3,"file":"use-current-message.d.ts","sourceRoot":"","sources":["../../src/hooks/use-current-message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,kBAAkB,CAAC;IAC5B,kFAAkF;IAClF,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;CAC7C;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAkBpE,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,OAAO,EAAE,kBAAkB,EAC3B,oBAAoB,CAAC,EAAE,oBAAoB,qBAU5C;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,0BAQlC,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,wBAAwB,QAAO,qBAAqB,GAAG,IAgBnE,CAAC"}