@tambo-ai/react 0.71.0 → 0.72.0

package/esm/v1/utils/component-renderer.test.js

@@ -0,0 +1,375 @@
+// React import needed for JSX transform (jsxImportSource is not set to react-jsx)
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { isComponentContent, renderComponentContent, renderMessageContent, renderMessageComponents, useV1ComponentContent, useV1ComponentContentOptional, } from "./component-renderer";
+// Test component that displays its props
+function TestComponent({ title, count }) {
+    return (React.createElement("div", { "data-testid": "test-component" },
+        React.createElement("span", { "data-testid": "title" }, title),
+        React.createElement("span", { "data-testid": "count" }, count)));
+}
+// Test loading component
+function TestLoadingComponent() {
+    return React.createElement("div", { "data-testid": "loading" }, "Loading...");
+}
+// Test component that uses the content context
+function ContextAwareComponent() {
+    const context = useV1ComponentContent();
+    return (React.createElement("div", { "data-testid": "context-aware" },
+        React.createElement("span", { "data-testid": "componentId" }, context.componentId),
+        React.createElement("span", { "data-testid": "threadId" }, context.threadId),
+        React.createElement("span", { "data-testid": "messageId" }, context.messageId)));
+}
+const mockRegistry = {
+    TestComponent: {
+        component: TestComponent,
+        name: "TestComponent",
+        description: "A test component",
+        props: {},
+        contextTools: [],
+    },
+    TestWithLoading: {
+        component: TestComponent,
+        loadingComponent: TestLoadingComponent,
+        name: "TestWithLoading",
+        description: "A test component with loading state",
+        props: {},
+        contextTools: [],
+    },
+    ContextAware: {
+        component: ContextAwareComponent,
+        name: "ContextAware",
+        description: "A context-aware component",
+        props: {},
+        contextTools: [],
+    },
+};
+describe("isComponentContent", () => {
+    it("returns true for component content", () => {
+        const content = {
+            type: "component",
+            id: "comp_1",
+            name: "Test",
+            props: {},
+            streamingState: "done",
+        };
+        expect(isComponentContent(content)).toBe(true);
+    });
+    it("returns false for text content", () => {
+        const content = { type: "text", text: "hello" };
+        expect(isComponentContent(content)).toBe(false);
+    });
+});
+describe("renderComponentContent", () => {
+    it("renders a component from registry", () => {
+        const content = {
+            type: "component",
+            id: "comp_1",
+            name: "TestComponent",
+            props: { title: "Hello", count: 42 },
+            streamingState: "done",
+        };
+        const result = renderComponentContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        expect(result.renderedComponent).not.toBeNull();
+        // Render and check output
+        render(React.createElement(React.Fragment, null, result.renderedComponent));
+        expect(screen.getByTestId("title")).toHaveTextContent("Hello");
+        expect(screen.getByTestId("count")).toHaveTextContent("42");
+    });
+    it("returns null renderedComponent for unknown component", () => {
+        const content = {
+            type: "component",
+            id: "comp_1",
+            name: "UnknownComponent",
+            props: {},
+            streamingState: "done",
+        };
+        const consoleWarn = jest.spyOn(console, "warn").mockImplementation();
+        const result = renderComponentContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        expect(result.renderedComponent).toBeNull();
+        expect(consoleWarn).toHaveBeenCalledWith('Component "UnknownComponent" not found in registry');
+        consoleWarn.mockRestore();
+    });
+    it("shows loading component when streaming", () => {
+        const content = {
+            type: "component",
+            id: "comp_1",
+            name: "TestWithLoading",
+            props: { title: "Loading Test", count: 0 },
+            streamingState: "streaming",
+        };
+        const result = renderComponentContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        render(React.createElement(React.Fragment, null, result.renderedComponent));
+        expect(screen.getByTestId("loading")).toHaveTextContent("Loading...");
+    });
+    it("shows main component when done streaming", () => {
+        const content = {
+            type: "component",
+            id: "comp_1",
+            name: "TestWithLoading",
+            props: { title: "Done Test", count: 99 },
+            streamingState: "done",
+        };
+        const result = renderComponentContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        render(React.createElement(React.Fragment, null, result.renderedComponent));
+        expect(screen.getByTestId("title")).toHaveTextContent("Done Test");
+        expect(screen.getByTestId("count")).toHaveTextContent("99");
+    });
+    it("provides component context to rendered components", () => {
+        const content = {
+            type: "component",
+            id: "comp_123",
+            name: "ContextAware",
+            props: {},
+            streamingState: "done",
+        };
+        const result = renderComponentContent(content, {
+            threadId: "thread_456",
+            messageId: "msg_789",
+            componentList: mockRegistry,
+        });
+        render(React.createElement(React.Fragment, null, result.renderedComponent));
+        expect(screen.getByTestId("componentId")).toHaveTextContent("comp_123");
+        expect(screen.getByTestId("threadId")).toHaveTextContent("thread_456");
+        expect(screen.getByTestId("messageId")).toHaveTextContent("msg_789");
+    });
+});
+describe("renderMessageContent", () => {
+    it("renders component content blocks and passes through others", () => {
+        const content = [
+            { type: "text", text: "Hello" },
+            {
+                type: "component",
+                id: "comp_1",
+                name: "TestComponent",
+                props: { title: "Test", count: 1 },
+                streamingState: "done",
+            },
+            { type: "text", text: "World" },
+        ];
+        const result = renderMessageContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        expect(result).toHaveLength(3);
+        expect(result[0]).toEqual({ type: "text", text: "Hello" });
+        expect(result[1].renderedComponent).not.toBeNull();
+        expect(result[2]).toEqual({ type: "text", text: "World" });
+    });
+    it("handles multiple component blocks in a message", () => {
+        const content = [
+            {
+                type: "component",
+                id: "comp_1",
+                name: "TestComponent",
+                props: { title: "First", count: 1 },
+                streamingState: "done",
+            },
+            {
+                type: "component",
+                id: "comp_2",
+                name: "TestComponent",
+                props: { title: "Second", count: 2 },
+                streamingState: "done",
+            },
+        ];
+        const result = renderMessageContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        expect(result).toHaveLength(2);
+        expect(result[0].renderedComponent).not.toBeNull();
+        expect(result[1].renderedComponent).not.toBeNull();
+    });
+    it("handles tool_use content blocks unchanged", () => {
+        const content = [
+            {
+                type: "tool_use",
+                id: "tool_1",
+                name: "search",
+                input: { query: "test" },
+            },
+        ];
+        const result = renderMessageContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual(content[0]);
+    });
+});
+describe("renderComponentContent edge cases", () => {
+    it("shows main component when streamingState is 'started' (no loading component)", () => {
+        const content = {
+            type: "component",
+            id: "comp_1",
+            name: "TestComponent",
+            props: { title: "Started", count: 0 },
+            streamingState: "started",
+        };
+        const result = renderComponentContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        // TestComponent has no loading component, so it shows main even when streaming
+        render(React.createElement(React.Fragment, null, result.renderedComponent));
+        expect(screen.getByTestId("title")).toHaveTextContent("Started");
+    });
+    it("shows loading component when streamingState is 'started' and loading exists", () => {
+        const content = {
+            type: "component",
+            id: "comp_1",
+            name: "TestWithLoading",
+            props: { title: "Started", count: 0 },
+            streamingState: "started",
+        };
+        const result = renderComponentContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        render(React.createElement(React.Fragment, null, result.renderedComponent));
+        expect(screen.getByTestId("loading")).toHaveTextContent("Loading...");
+    });
+    it("passes state as initialState prop", () => {
+        // Component that reads initialState
+        function StatefulComponent({ initialState, }) {
+            return (React.createElement("div", { "data-testid": "initial-count" }, initialState?.count ?? "none"));
+        }
+        const registryWithStateful = {
+            StatefulComponent: {
+                component: StatefulComponent,
+                name: "StatefulComponent",
+                description: "A stateful component",
+                props: {},
+                contextTools: [],
+            },
+        };
+        const content = {
+            type: "component",
+            id: "comp_1",
+            name: "StatefulComponent",
+            props: {},
+            state: { count: 42 },
+            streamingState: "done",
+        };
+        const result = renderComponentContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: registryWithStateful,
+        });
+        render(React.createElement(React.Fragment, null, result.renderedComponent));
+        expect(screen.getByTestId("initial-count")).toHaveTextContent("42");
+    });
+    it("preserves original content properties in returned object", () => {
+        const content = {
+            type: "component",
+            id: "comp_custom",
+            name: "TestComponent",
+            props: { title: "Test", count: 5 },
+            state: { value: "preserved" },
+            streamingState: "done",
+        };
+        const result = renderComponentContent(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        expect(result.id).toBe("comp_custom");
+        expect(result.name).toBe("TestComponent");
+        expect(result.props).toEqual({ title: "Test", count: 5 });
+        expect(result.state).toEqual({ value: "preserved" });
+        expect(result.streamingState).toBe("done");
+    });
+});
+describe("useV1ComponentContentOptional", () => {
+    it("returns null when used outside rendered component", () => {
+        function TestConsumer() {
+            const context = useV1ComponentContentOptional();
+            return (React.createElement("div", { "data-testid": "context" }, context ? "has context" : "no context"));
+        }
+        render(React.createElement(TestConsumer, null));
+        expect(screen.getByTestId("context")).toHaveTextContent("no context");
+    });
+});
+describe("renderMessageComponents", () => {
+    it("renders all components in a message", () => {
+        const message = {
+            id: "msg_1",
+            role: "assistant",
+            content: [
+                { type: "text", text: "Here is the weather:" },
+                {
+                    type: "component",
+                    id: "comp_1",
+                    name: "TestComponent",
+                    props: { title: "Weather", count: 72 },
+                    streamingState: "done",
+                },
+            ],
+            createdAt: "2024-01-01T00:00:00.000Z",
+        };
+        const result = renderMessageComponents(message, {
+            threadId: "thread_1",
+            componentList: mockRegistry,
+        });
+        expect(result.id).toBe("msg_1");
+        expect(result.content).toHaveLength(2);
+        expect(result.content[0]).toEqual({
+            type: "text",
+            text: "Here is the weather:",
+        });
+        expect(result.content[1].renderedComponent).not.toBeNull();
+    });
+    it("preserves message metadata", () => {
+        const message = {
+            id: "msg_123",
+            role: "assistant",
+            content: [],
+            createdAt: "2024-01-01T00:00:00.000Z",
+            metadata: { custom: "value" },
+        };
+        const result = renderMessageComponents(message, {
+            threadId: "thread_1",
+            componentList: mockRegistry,
+        });
+        expect(result.id).toBe("msg_123");
+        expect(result.role).toBe("assistant");
+        expect(result.createdAt).toBe("2024-01-01T00:00:00.000Z");
+        expect(result.metadata).toEqual({ custom: "value" });
+    });
+});
+describe("useV1ComponentContent error handling", () => {
+    it("throws when used outside rendered component", () => {
+        function TestConsumer() {
+            useV1ComponentContent();
+            return React.createElement("div", null, "Should not render");
+        }
+        // Suppress React error boundary logs
+        const consoleSpy = jest.spyOn(console, "error").mockImplementation();
+        expect(() => render(React.createElement(TestConsumer, null))).toThrow("useV1ComponentContent must be used within a rendered component");
+        consoleSpy.mockRestore();
+    });
+});
+//# sourceMappingURL=component-renderer.test.js.map

package/esm/v1/utils/component-renderer.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-renderer.test.js","sourceRoot":"","sources":["../../../src/v1/utils/component-renderer.test.tsx"],"names":[],"mappings":"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","sourcesContent":["// React import needed for JSX transform (jsxImportSource is not set to react-jsx)\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport type { ComponentRegistry } from \"../../model/component-metadata\";\nimport type { V1ComponentContent } from \"../types/message\";\nimport {\n  isComponentContent,\n  renderComponentContent,\n  renderMessageContent,\n  renderMessageComponents,\n  useV1ComponentContent,\n  useV1ComponentContentOptional,\n} from \"./component-renderer\";\n\n// Test component that displays its props\nfunction TestComponent({ title, count }: { title: string; count: number }) {\n  return (\n    <div data-testid=\"test-component\">\n      <span data-testid=\"title\">{title}</span>\n      <span data-testid=\"count\">{count}</span>\n    </div>\n  );\n}\n\n// Test loading component\nfunction TestLoadingComponent() {\n  return <div data-testid=\"loading\">Loading...</div>;\n}\n\n// Test component that uses the content context\nfunction ContextAwareComponent() {\n  const context = useV1ComponentContent();\n  return (\n    <div data-testid=\"context-aware\">\n      <span data-testid=\"componentId\">{context.componentId}</span>\n      <span data-testid=\"threadId\">{context.threadId}</span>\n      <span data-testid=\"messageId\">{context.messageId}</span>\n    </div>\n  );\n}\n\nconst mockRegistry: ComponentRegistry = {\n  TestComponent: {\n    component: TestComponent,\n    name: \"TestComponent\",\n    description: \"A test component\",\n    props: {},\n    contextTools: [],\n  },\n  TestWithLoading: {\n    component: TestComponent,\n    loadingComponent: TestLoadingComponent,\n    name: \"TestWithLoading\",\n    description: \"A test component with loading state\",\n    props: {},\n    contextTools: [],\n  },\n  ContextAware: {\n    component: ContextAwareComponent,\n    name: \"ContextAware\",\n    description: \"A context-aware component\",\n    props: {},\n    contextTools: [],\n  },\n};\n\ndescribe(\"isComponentContent\", () => {\n  it(\"returns true for component content\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_1\",\n      name: \"Test\",\n      props: {},\n      streamingState: \"done\",\n    };\n    expect(isComponentContent(content)).toBe(true);\n  });\n\n  it(\"returns false for text content\", () => {\n    const content = { type: \"text\", text: \"hello\" };\n    expect(isComponentContent(content as any)).toBe(false);\n  });\n});\n\ndescribe(\"renderComponentContent\", () => {\n  it(\"renders a component from registry\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_1\",\n      name: \"TestComponent\",\n      props: { title: \"Hello\", count: 42 },\n      streamingState: \"done\",\n    };\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    expect(result.renderedComponent).not.toBeNull();\n\n    // Render and check output\n    render(<>{result.renderedComponent}</>);\n    expect(screen.getByTestId(\"title\")).toHaveTextContent(\"Hello\");\n    expect(screen.getByTestId(\"count\")).toHaveTextContent(\"42\");\n  });\n\n  it(\"returns null renderedComponent for unknown component\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_1\",\n      name: \"UnknownComponent\",\n      props: {},\n      streamingState: \"done\",\n    };\n\n    const consoleWarn = jest.spyOn(console, \"warn\").mockImplementation();\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    expect(result.renderedComponent).toBeNull();\n    expect(consoleWarn).toHaveBeenCalledWith(\n      'Component \"UnknownComponent\" not found in registry',\n    );\n\n    consoleWarn.mockRestore();\n  });\n\n  it(\"shows loading component when streaming\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_1\",\n      name: \"TestWithLoading\",\n      props: { title: \"Loading Test\", count: 0 },\n      streamingState: \"streaming\",\n    };\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    render(<>{result.renderedComponent}</>);\n    expect(screen.getByTestId(\"loading\")).toHaveTextContent(\"Loading...\");\n  });\n\n  it(\"shows main component when done streaming\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_1\",\n      name: \"TestWithLoading\",\n      props: { title: \"Done Test\", count: 99 },\n      streamingState: \"done\",\n    };\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    render(<>{result.renderedComponent}</>);\n    expect(screen.getByTestId(\"title\")).toHaveTextContent(\"Done Test\");\n    expect(screen.getByTestId(\"count\")).toHaveTextContent(\"99\");\n  });\n\n  it(\"provides component context to rendered components\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_123\",\n      name: \"ContextAware\",\n      props: {},\n      streamingState: \"done\",\n    };\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_456\",\n      messageId: \"msg_789\",\n      componentList: mockRegistry,\n    });\n\n    render(<>{result.renderedComponent}</>);\n    expect(screen.getByTestId(\"componentId\")).toHaveTextContent(\"comp_123\");\n    expect(screen.getByTestId(\"threadId\")).toHaveTextContent(\"thread_456\");\n    expect(screen.getByTestId(\"messageId\")).toHaveTextContent(\"msg_789\");\n  });\n});\n\ndescribe(\"renderMessageContent\", () => {\n  it(\"renders component content blocks and passes through others\", () => {\n    const content = [\n      { type: \"text\", text: \"Hello\" },\n      {\n        type: \"component\",\n        id: \"comp_1\",\n        name: \"TestComponent\",\n        props: { title: \"Test\", count: 1 },\n        streamingState: \"done\",\n      } as V1ComponentContent,\n      { type: \"text\", text: \"World\" },\n    ];\n\n    const result = renderMessageContent(content as any, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    expect(result).toHaveLength(3);\n    expect(result[0]).toEqual({ type: \"text\", text: \"Hello\" });\n    expect((result[1] as any).renderedComponent).not.toBeNull();\n    expect(result[2]).toEqual({ type: \"text\", text: \"World\" });\n  });\n\n  it(\"handles multiple component blocks in a message\", () => {\n    const content = [\n      {\n        type: \"component\",\n        id: \"comp_1\",\n        name: \"TestComponent\",\n        props: { title: \"First\", count: 1 },\n        streamingState: \"done\",\n      } as V1ComponentContent,\n      {\n        type: \"component\",\n        id: \"comp_2\",\n        name: \"TestComponent\",\n        props: { title: \"Second\", count: 2 },\n        streamingState: \"done\",\n      } as V1ComponentContent,\n    ];\n\n    const result = renderMessageContent(content as any, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    expect(result).toHaveLength(2);\n    expect((result[0] as V1ComponentContent).renderedComponent).not.toBeNull();\n    expect((result[1] as V1ComponentContent).renderedComponent).not.toBeNull();\n  });\n\n  it(\"handles tool_use content blocks unchanged\", () => {\n    const content = [\n      {\n        type: \"tool_use\",\n        id: \"tool_1\",\n        name: \"search\",\n        input: { query: \"test\" },\n      },\n    ];\n\n    const result = renderMessageContent(content as any, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    expect(result).toHaveLength(1);\n    expect(result[0]).toEqual(content[0]);\n  });\n});\n\ndescribe(\"renderComponentContent edge cases\", () => {\n  it(\"shows main component when streamingState is 'started' (no loading component)\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_1\",\n      name: \"TestComponent\",\n      props: { title: \"Started\", count: 0 },\n      streamingState: \"started\",\n    };\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    // TestComponent has no loading component, so it shows main even when streaming\n    render(<>{result.renderedComponent}</>);\n    expect(screen.getByTestId(\"title\")).toHaveTextContent(\"Started\");\n  });\n\n  it(\"shows loading component when streamingState is 'started' and loading exists\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_1\",\n      name: \"TestWithLoading\",\n      props: { title: \"Started\", count: 0 },\n      streamingState: \"started\",\n    };\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    render(<>{result.renderedComponent}</>);\n    expect(screen.getByTestId(\"loading\")).toHaveTextContent(\"Loading...\");\n  });\n\n  it(\"passes state as initialState prop\", () => {\n    // Component that reads initialState\n    function StatefulComponent({\n      initialState,\n    }: {\n      initialState?: { count: number };\n    }) {\n      return (\n        <div data-testid=\"initial-count\">{initialState?.count ?? \"none\"}</div>\n      );\n    }\n\n    const registryWithStateful: ComponentRegistry = {\n      StatefulComponent: {\n        component: StatefulComponent,\n        name: \"StatefulComponent\",\n        description: \"A stateful component\",\n        props: {},\n        contextTools: [],\n      },\n    };\n\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_1\",\n      name: \"StatefulComponent\",\n      props: {},\n      state: { count: 42 },\n      streamingState: \"done\",\n    };\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: registryWithStateful,\n    });\n\n    render(<>{result.renderedComponent}</>);\n    expect(screen.getByTestId(\"initial-count\")).toHaveTextContent(\"42\");\n  });\n\n  it(\"preserves original content properties in returned object\", () => {\n    const content: V1ComponentContent = {\n      type: \"component\",\n      id: \"comp_custom\",\n      name: \"TestComponent\",\n      props: { title: \"Test\", count: 5 },\n      state: { value: \"preserved\" },\n      streamingState: \"done\",\n    };\n\n    const result = renderComponentContent(content, {\n      threadId: \"thread_1\",\n      messageId: \"msg_1\",\n      componentList: mockRegistry,\n    });\n\n    expect(result.id).toBe(\"comp_custom\");\n    expect(result.name).toBe(\"TestComponent\");\n    expect(result.props).toEqual({ title: \"Test\", count: 5 });\n    expect(result.state).toEqual({ value: \"preserved\" });\n    expect(result.streamingState).toBe(\"done\");\n  });\n});\n\ndescribe(\"useV1ComponentContentOptional\", () => {\n  it(\"returns null when used outside rendered component\", () => {\n    function TestConsumer() {\n      const context = useV1ComponentContentOptional();\n      return (\n        <div data-testid=\"context\">\n          {context ? \"has context\" : \"no context\"}\n        </div>\n      );\n    }\n\n    render(<TestConsumer />);\n    expect(screen.getByTestId(\"context\")).toHaveTextContent(\"no context\");\n  });\n});\n\ndescribe(\"renderMessageComponents\", () => {\n  it(\"renders all components in a message\", () => {\n    const message = {\n      id: \"msg_1\",\n      role: \"assistant\" as const,\n      content: [\n        { type: \"text\" as const, text: \"Here is the weather:\" },\n        {\n          type: \"component\",\n          id: \"comp_1\",\n          name: \"TestComponent\",\n          props: { title: \"Weather\", count: 72 },\n          streamingState: \"done\",\n        } as V1ComponentContent,\n      ],\n      createdAt: \"2024-01-01T00:00:00.000Z\",\n    };\n\n    const result = renderMessageComponents(message, {\n      threadId: \"thread_1\",\n      componentList: mockRegistry,\n    });\n\n    expect(result.id).toBe(\"msg_1\");\n    expect(result.content).toHaveLength(2);\n    expect(result.content[0]).toEqual({\n      type: \"text\",\n      text: \"Here is the weather:\",\n    });\n    expect(\n      (result.content[1] as V1ComponentContent).renderedComponent,\n    ).not.toBeNull();\n  });\n\n  it(\"preserves message metadata\", () => {\n    const message = {\n      id: \"msg_123\",\n      role: \"assistant\" as const,\n      content: [],\n      createdAt: \"2024-01-01T00:00:00.000Z\",\n      metadata: { custom: \"value\" },\n    };\n\n    const result = renderMessageComponents(message, {\n      threadId: \"thread_1\",\n      componentList: mockRegistry,\n    });\n\n    expect(result.id).toBe(\"msg_123\");\n    expect(result.role).toBe(\"assistant\");\n    expect(result.createdAt).toBe(\"2024-01-01T00:00:00.000Z\");\n    expect(result.metadata).toEqual({ custom: \"value\" });\n  });\n});\n\ndescribe(\"useV1ComponentContent error handling\", () => {\n  it(\"throws when used outside rendered component\", () => {\n    function TestConsumer() {\n      useV1ComponentContent();\n      return <div>Should not render</div>;\n    }\n\n    // Suppress React error boundary logs\n    const consoleSpy = jest.spyOn(console, \"error\").mockImplementation();\n\n    expect(() => render(<TestConsumer />)).toThrow(\n      \"useV1ComponentContent must be used within a rendered component\",\n    );\n\n    consoleSpy.mockRestore();\n  });\n});\n"]}

package/esm/v1/utils/event-accumulator.js

@@ -610,7 +610,7 @@ function handleCustomEvent(threadState, event) {
 }
 /**
  * Handle tambo.component.start event.
- * Adds a component content block to the message.
+ * Adds a component content block to the message with 'started' streaming state.
  * @param threadState - Current thread state
  * @param event - Component start event
  * @returns Updated thread state
@@ -624,12 +624,13 @@ function handleComponentStart(threadState, event) {
         throw new Error(`Message ${messageId} not found for tambo.component.start event`);
     }
     const message = messages[messageIndex];
-    // Add component content block
+    // Add component content block with 'started' streaming state
     const newContent = {
         type: "component",
         id: event.value.componentId,
         name: event.value.componentName,
         props: {},
+        streamingState: "started",
     };
     const updatedMessage = {
         ...message,
@@ -639,7 +640,7 @@ function handleComponentStart(threadState, event) {
 }
 /**
  * Handle component delta events (both props_delta and state_delta).
- * Applies JSON Patch to the specified field.
+ * Applies JSON Patch to the specified field and sets streamingState to 'streaming'.
  * @param threadState - Current thread state
  * @param event - Component delta event (props or state)
  * @param field - Which field to update ('props' or 'state')
@@ -663,9 +664,11 @@ function handleComponentDelta(threadState, event, field) {
         : (componentContent.state ?? {});
     // Apply JSON Patch
     const updatedValue = applyJsonPatch(currentValue, operations);
+    // Update field and set streaming state to 'streaming'
     const updatedContent = {
         ...componentContent,
         [field]: updatedValue,
+        streamingState: "streaming",
     };
     const updatedMessage = {
         ...message,
@@ -675,14 +678,31 @@ function handleComponentDelta(threadState, event, field) {
 }
 /**
  * Handle tambo.component.end event.
- * Marks component as complete.
+ * Sets component streaming state to 'done'.
  * @param threadState - Current thread state
- * @param _event - Component end event (unused)
+ * @param event - Component end event
  * @returns Updated thread state
  */
-function handleComponentEnd(threadState, _event) {
-    // For now, this doesn't change state
-    return threadState;
+function handleComponentEnd(threadState, event) {
+    const componentId = event.value.componentId;
+    const messages = threadState.thread.messages;
+    // Find the component content block
+    const { messageIndex, contentIndex } = findContentById(messages, "component", componentId, "tambo.component.end event");
+    const message = messages[messageIndex];
+    const componentContent = message.content[contentIndex];
+    if (componentContent.type !== "component") {
+        throw new Error(`Content at index ${contentIndex} is not a component block for tambo.component.end event`);
+    }
+    // Set streaming state to 'done'
+    const updatedContent = {
+        ...componentContent,
+        streamingState: "done",
+    };
+    const updatedMessage = {
+        ...message,
+        content: updateContentAtIndex(message.content, contentIndex, updatedContent),
+    };
+    return updateThreadMessages(threadState, updateMessageAtIndex(messages, messageIndex, updatedMessage));
 }
 /**
  * Handle tambo.run.awaiting_input event.