@tambo-ai/react 0.71.0 → 0.72.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"component-renderer.js","sourceRoot":"","sources":["../../../src/v1/utils/component-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\n/**\n * Component Renderer Utility for v1 API\n *\n * Provides utilities for rendering React components from component content blocks.\n * Components are looked up in the registry and wrapped with context providers.\n */\n\nimport React, {\n  createContext,\n  createElement,\n  useContext,\n  useMemo,\n  type ReactElement,\n} from \"react\";\n\n/**\n * Props that should be filtered out when rendering components.\n * These could be used for event handler injection or other security concerns.\n */\nconst DANGEROUS_PROP_PATTERNS = [\n  /^on[A-Z]/, // Event handlers (onClick, onError, etc.)\n  /^dangerouslySetInnerHTML$/,\n];\n\nconst DANGEROUS_PROP_NAMES = new Set([\"ref\", \"key\", \"children\"]);\n\n/**\n * Sanitize props by removing potentially dangerous properties.\n * Filters out event handlers, refs, and other props that could be abused.\n * @param props - Raw props from the component content\n * @returns Sanitized props safe for spreading to components\n */\nfunction sanitizeProps(\n  props: Record<string, unknown>,\n): Record<string, unknown> {\n  const sanitized: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    // Skip dangerous prop names\n    if (DANGEROUS_PROP_NAMES.has(key)) {\n      continue;\n    }\n\n    // Skip props matching dangerous patterns\n    if (DANGEROUS_PROP_PATTERNS.some((pattern) => pattern.test(key))) {\n      continue;\n    }\n\n    sanitized[key] = value;\n  }\n\n  return sanitized;\n}\nimport type { ComponentRegistry } from \"../../model/component-metadata\";\nimport type {\n  Content,\n  TamboV1Message,\n  V1ComponentContent,\n} from \"../types/message\";\n\n/**\n * Context for component content blocks.\n * Provides access to the component ID and thread ID for component state hooks.\n */\nexport interface V1ComponentContentContext {\n  /** Component instance ID */\n  componentId: string;\n  /** Thread ID the component belongs to */\n  threadId: string;\n  /** Message ID the component belongs to */\n  messageId: string;\n  /** Component name */\n  componentName: string;\n}\n\nconst ComponentContentContext = createContext<V1ComponentContentContext | null>(\n  null,\n);\n\n/**\n * Provider for component content context.\n * Wraps rendered components to provide access to component metadata.\n * @returns Provider component with memoized context value\n */\nfunction V1ComponentContentProvider({\n  children,\n  componentId,\n  threadId,\n  messageId,\n  componentName,\n}: V1ComponentContentContext & { children: React.ReactNode }) {\n  // Memoize context value to prevent unnecessary re-renders of consumers\n  const value = useMemo(\n    () => ({ componentId, threadId, messageId, componentName }),\n    [componentId, threadId, messageId, componentName],\n  );\n\n  return (\n    <ComponentContentContext.Provider value={value}>\n      {children}\n    </ComponentContentContext.Provider>\n  );\n}\n\n/**\n * Hook to access the current component content context.\n * Must be used within a rendered component.\n * @returns Component content context\n * @throws {Error} If used outside a rendered component\n */\nexport function useV1ComponentContent(): V1ComponentContentContext {\n  const context = useContext(ComponentContentContext);\n  if (!context) {\n    throw new Error(\n      \"useV1ComponentContent must be used within a rendered component\",\n    );\n  }\n  return context;\n}\n\n/**\n * Hook to optionally access the current component content context.\n * Returns null if not within a rendered component.\n * @returns Component content context or null\n */\nexport function useV1ComponentContentOptional(): V1ComponentContentContext | null {\n  return useContext(ComponentContentContext);\n}\n\n/**\n * Options for rendering a component content block.\n */\nexport interface RenderComponentOptions {\n  /** Thread ID for the component context */\n  threadId: string;\n  /** Message ID the component belongs to */\n  messageId: string;\n  /** Component registry to look up components */\n  componentList: ComponentRegistry;\n}\n\n/**\n * Check if a content block is a component.\n * @param content - Content block to check\n * @returns True if content is a V1ComponentContent\n */\nexport function isComponentContent(\n  content: Content,\n): content is V1ComponentContent {\n  return content.type === \"component\";\n}\n\n/**\n * Render a component content block into a React element.\n *\n * Looks up the component in the registry, creates a React element with props,\n * and wraps it with the component content context provider.\n * @param content - Component content block to render\n * @param options - Rendering options including registry and context info\n * @returns V1ComponentContent with the renderedComponent attached\n * @example\n * ```tsx\n * const rendered = renderComponentContent(componentContent, {\n *   threadId: 'thread_123',\n *   messageId: 'msg_456',\n *   componentList: registry.componentList,\n * });\n *\n * // Use in JSX:\n * {rendered.renderedComponent}\n * ```\n */\nexport function renderComponentContent(\n  content: V1ComponentContent,\n  options: RenderComponentOptions,\n): V1ComponentContent {\n  const { threadId, messageId, componentList } = options;\n\n  // Look up component in registry\n  const registeredComponent = componentList[content.name];\n\n  if (!registeredComponent) {\n    console.warn(`Component \"${content.name}\" not found in registry`);\n    return {\n      ...content,\n      renderedComponent: null,\n    };\n  }\n\n  const Component = registeredComponent.component;\n  const LoadingComponent = registeredComponent.loadingComponent;\n\n  // Determine if we should show loading state\n  const isStreaming = content.streamingState !== \"done\";\n\n  // Sanitize props to prevent injection of event handlers or other dangerous props\n  const props = sanitizeProps(content.props as Record<string, unknown>);\n\n  // Create the component element\n  let element: ReactElement;\n\n  if (isStreaming && LoadingComponent) {\n    // Show loading component during streaming (with props for partial data display)\n    element = createElement(LoadingComponent, props);\n  } else {\n    // Show main component - props stream in as they're filled out\n    element = createElement(Component, {\n      ...props,\n      // Pass state as initialState prop only if not already provided\n      ...(props.initialState === undefined\n        ? { initialState: content.state }\n        : {}),\n    });\n  }\n\n  // Wrap with component content context\n  const wrappedElement = (\n    <V1ComponentContentProvider\n      componentId={content.id}\n      threadId={threadId}\n      messageId={messageId}\n      componentName={content.name}\n    >\n      {element}\n    </V1ComponentContentProvider>\n  );\n\n  return {\n    ...content,\n    renderedComponent: wrappedElement,\n  };\n}\n\n/**\n * Render all component content blocks in a message.\n *\n * Renders component content blocks and attaches renderedComponent.\n * Non-component content blocks are passed through unchanged.\n * @param content - Array of content blocks\n * @param options - Rendering options including registry and context info\n * @returns Array of content with rendered components\n */\nexport function renderMessageContent(\n  content: Content[],\n  options: RenderComponentOptions,\n): Content[] {\n  return content.map((block) => {\n    if (isComponentContent(block)) {\n      return renderComponentContent(block, options);\n    }\n    // Pass through non-component content unchanged\n    return block;\n  });\n}\n\n/**\n * Render all components in a message.\n *\n * Creates a new message object with all component content blocks rendered.\n * @param message - Message to render components for\n * @param options - Rendering options (threadId is extracted from message if not provided)\n * @returns Message with rendered component content\n */\nexport function renderMessageComponents(\n  message: TamboV1Message,\n  options: Omit<RenderComponentOptions, \"messageId\"> & { threadId: string },\n): TamboV1Message {\n  const renderedContent = renderMessageContent(message.content, {\n    ...options,\n    messageId: message.id,\n  });\n\n  return {\n    ...message,\n    content: renderedContent,\n  };\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,380 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// React import needed for JSX transform (jsxImportSource is not set to react-jsx)
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const component_renderer_1 = require("./component-renderer");
+// Test component that displays its props
+function TestComponent({ title, count }) {
+    return (react_1.default.createElement("div", { "data-testid": "test-component" },
+        react_1.default.createElement("span", { "data-testid": "title" }, title),
+        react_1.default.createElement("span", { "data-testid": "count" }, count)));
+}
+// Test loading component
+function TestLoadingComponent() {
+    return react_1.default.createElement("div", { "data-testid": "loading" }, "Loading...");
+}
+// Test component that uses the content context
+function ContextAwareComponent() {
+    const context = (0, component_renderer_1.useV1ComponentContent)();
+    return (react_1.default.createElement("div", { "data-testid": "context-aware" },
+        react_1.default.createElement("span", { "data-testid": "componentId" }, context.componentId),
+        react_1.default.createElement("span", { "data-testid": "threadId" }, context.threadId),
+        react_1.default.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((0, component_renderer_1.isComponentContent)(content)).toBe(true);
+    });
+    it("returns false for text content", () => {
+        const content = { type: "text", text: "hello" };
+        expect((0, component_renderer_1.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 = (0, component_renderer_1.renderComponentContent)(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        expect(result.renderedComponent).not.toBeNull();
+        // Render and check output
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null, result.renderedComponent));
+        expect(react_2.screen.getByTestId("title")).toHaveTextContent("Hello");
+        expect(react_2.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 = (0, component_renderer_1.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 = (0, component_renderer_1.renderComponentContent)(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null, result.renderedComponent));
+        expect(react_2.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 = (0, component_renderer_1.renderComponentContent)(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null, result.renderedComponent));
+        expect(react_2.screen.getByTestId("title")).toHaveTextContent("Done Test");
+        expect(react_2.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 = (0, component_renderer_1.renderComponentContent)(content, {
+            threadId: "thread_456",
+            messageId: "msg_789",
+            componentList: mockRegistry,
+        });
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null, result.renderedComponent));
+        expect(react_2.screen.getByTestId("componentId")).toHaveTextContent("comp_123");
+        expect(react_2.screen.getByTestId("threadId")).toHaveTextContent("thread_456");
+        expect(react_2.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 = (0, component_renderer_1.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 = (0, component_renderer_1.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 = (0, component_renderer_1.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 = (0, component_renderer_1.renderComponentContent)(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        // TestComponent has no loading component, so it shows main even when streaming
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null, result.renderedComponent));
+        expect(react_2.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 = (0, component_renderer_1.renderComponentContent)(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: mockRegistry,
+        });
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null, result.renderedComponent));
+        expect(react_2.screen.getByTestId("loading")).toHaveTextContent("Loading...");
+    });
+    it("passes state as initialState prop", () => {
+        // Component that reads initialState
+        function StatefulComponent({ initialState, }) {
+            return (react_1.default.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 = (0, component_renderer_1.renderComponentContent)(content, {
+            threadId: "thread_1",
+            messageId: "msg_1",
+            componentList: registryWithStateful,
+        });
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null, result.renderedComponent));
+        expect(react_2.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 = (0, component_renderer_1.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 = (0, component_renderer_1.useV1ComponentContentOptional)();
+            return (react_1.default.createElement("div", { "data-testid": "context" }, context ? "has context" : "no context"));
+        }
+        (0, react_2.render)(react_1.default.createElement(TestConsumer, null));
+        expect(react_2.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 = (0, component_renderer_1.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 = (0, component_renderer_1.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() {
+            (0, component_renderer_1.useV1ComponentContent)();
+            return react_1.default.createElement("div", null, "Should not render");
+        }
+        // Suppress React error boundary logs
+        const consoleSpy = jest.spyOn(console, "error").mockImplementation();
+        expect(() => (0, react_2.render)(react_1.default.createElement(TestConsumer, null))).toThrow("useV1ComponentContent must be used within a rendered component");
+        consoleSpy.mockRestore();
+    });
+});
+//# sourceMappingURL=component-renderer.test.js.map

package/dist/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/dist/v1/utils/event-accumulator.js

@@ -617,7 +617,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
@@ -631,12 +631,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,
@@ -646,7 +647,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')
@@ -670,9 +671,11 @@ function handleComponentDelta(threadState, event, field) {
         : (componentContent.state ?? {});
     // Apply JSON Patch
     const updatedValue = (0, json_patch_1.applyJsonPatch)(currentValue, operations);
+    // Update field and set streaming state to 'streaming'
     const updatedContent = {
         ...componentContent,
         [field]: updatedValue,
+        streamingState: "streaming",
     };
     const updatedMessage = {
         ...message,
@@ -682,14 +685,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.