@tambo-ai/react 0.72.0 → 0.73.1

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

@@ -2,47 +2,17 @@
 /**
  * Component Renderer Utility for v1 API
  *
- * Provides utilities for rendering React components from component content blocks.
- * Components are looked up in the registry and wrapped with context providers.
+ * Provides the component content context for rendered components.
+ * Components can use useV1ComponentContent() to access their context.
  */
-import React, { createContext, createElement, useContext, useMemo, } from "react";
-/**
- * Props that should be filtered out when rendering components.
- * These could be used for event handler injection or other security concerns.
- */
-const DANGEROUS_PROP_PATTERNS = [
-    /^on[A-Z]/, // Event handlers (onClick, onError, etc.)
-    /^dangerouslySetInnerHTML$/,
-];
-const DANGEROUS_PROP_NAMES = new Set(["ref", "key", "children"]);
-/**
- * Sanitize props by removing potentially dangerous properties.
- * Filters out event handlers, refs, and other props that could be abused.
- * @param props - Raw props from the component content
- * @returns Sanitized props safe for spreading to components
- */
-function sanitizeProps(props) {
-    const sanitized = {};
-    for (const [key, value] of Object.entries(props)) {
-        // Skip dangerous prop names
-        if (DANGEROUS_PROP_NAMES.has(key)) {
-            continue;
-        }
-        // Skip props matching dangerous patterns
-        if (DANGEROUS_PROP_PATTERNS.some((pattern) => pattern.test(key))) {
-            continue;
-        }
-        sanitized[key] = value;
-    }
-    return sanitized;
-}
+import React, { createContext, useContext, useMemo } from "react";
 const ComponentContentContext = createContext(null);
 /**
  * Provider for component content context.
  * Wraps rendered components to provide access to component metadata.
  * @returns Provider component with memoized context value
  */
-function V1ComponentContentProvider({ children, componentId, threadId, messageId, componentName, }) {
+export function V1ComponentContentProvider({ children, componentId, threadId, messageId, componentName, }) {
     // Memoize context value to prevent unnecessary re-renders of consumers
     const value = useMemo(() => ({ componentId, threadId, messageId, componentName }), [componentId, threadId, messageId, componentName]);
     return (React.createElement(ComponentContentContext.Provider, { value: value }, children));
@@ -60,116 +30,4 @@ export function useV1ComponentContent() {
     }
     return context;
 }
-/**
- * Hook to optionally access the current component content context.
- * Returns null if not within a rendered component.
- * @returns Component content context or null
- */
-export function useV1ComponentContentOptional() {
-    return useContext(ComponentContentContext);
-}
-/**
- * Check if a content block is a component.
- * @param content - Content block to check
- * @returns True if content is a V1ComponentContent
- */
-export function isComponentContent(content) {
-    return content.type === "component";
-}
-/**
- * Render a component content block into a React element.
- *
- * Looks up the component in the registry, creates a React element with props,
- * and wraps it with the component content context provider.
- * @param content - Component content block to render
- * @param options - Rendering options including registry and context info
- * @returns V1ComponentContent with the renderedComponent attached
- * @example
- * ```tsx
- * const rendered = renderComponentContent(componentContent, {
- *   threadId: 'thread_123',
- *   messageId: 'msg_456',
- *   componentList: registry.componentList,
- * });
- *
- * // Use in JSX:
- * {rendered.renderedComponent}
- * ```
- */
-export function renderComponentContent(content, options) {
-    const { threadId, messageId, componentList } = options;
-    // Look up component in registry
-    const registeredComponent = componentList[content.name];
-    if (!registeredComponent) {
-        console.warn(`Component "${content.name}" not found in registry`);
-        return {
-            ...content,
-            renderedComponent: null,
-        };
-    }
-    const Component = registeredComponent.component;
-    const LoadingComponent = registeredComponent.loadingComponent;
-    // Determine if we should show loading state
-    const isStreaming = content.streamingState !== "done";
-    // Sanitize props to prevent injection of event handlers or other dangerous props
-    const props = sanitizeProps(content.props);
-    // Create the component element
-    let element;
-    if (isStreaming && LoadingComponent) {
-        // Show loading component during streaming (with props for partial data display)
-        element = createElement(LoadingComponent, props);
-    }
-    else {
-        // Show main component - props stream in as they're filled out
-        element = createElement(Component, {
-            ...props,
-            // Pass state as initialState prop only if not already provided
-            ...(props.initialState === undefined
-                ? { initialState: content.state }
-                : {}),
-        });
-    }
-    // Wrap with component content context
-    const wrappedElement = (React.createElement(V1ComponentContentProvider, { componentId: content.id, threadId: threadId, messageId: messageId, componentName: content.name }, element));
-    return {
-        ...content,
-        renderedComponent: wrappedElement,
-    };
-}
-/**
- * Render all component content blocks in a message.
- *
- * Renders component content blocks and attaches renderedComponent.
- * Non-component content blocks are passed through unchanged.
- * @param content - Array of content blocks
- * @param options - Rendering options including registry and context info
- * @returns Array of content with rendered components
- */
-export function renderMessageContent(content, options) {
-    return content.map((block) => {
-        if (isComponentContent(block)) {
-            return renderComponentContent(block, options);
-        }
-        // Pass through non-component content unchanged
-        return block;
-    });
-}
-/**
- * Render all components in a message.
- *
- * Creates a new message object with all component content blocks rendered.
- * @param message - Message to render components for
- * @param options - Rendering options (threadId is extracted from message if not provided)
- * @returns Message with rendered component content
- */
-export function renderMessageComponents(message, options) {
-    const renderedContent = renderMessageContent(message.content, {
-        ...options,
-        messageId: message.id,
-    });
-    return {
-        ...message,
-        content: renderedContent,
-    };
-}
 //# sourceMappingURL=component-renderer.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"component-renderer.js","sourceRoot":"","sources":["../../../src/v1/utils/component-renderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAiBlE,MAAM,uBAAuB,GAAG,aAAa,CAC3C,IAAI,CACL,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAAC,EACzC,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,aAAa,GAC6C;IAC1D,uEAAuE;IACvE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,EAC3D,CAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAC,CAClD,CAAC;IAEF,OAAO,CACL,oBAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC3C,QAAQ,CACwB,CACpC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IACpD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["\"use client\";\n\n/**\n * Component Renderer Utility for v1 API\n *\n * Provides the component content context for rendered components.\n * Components can use useV1ComponentContent() to access their context.\n */\n\nimport React, { createContext, useContext, useMemo } from \"react\";\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 */\nexport function 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"]}

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

@@ -1,367 +1,27 @@
-// 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...");
-}
+import { useV1ComponentContent, V1ComponentContentProvider, } from "./component-renderer";
 // Test component that uses the content context
-function ContextAwareComponent() {
+const 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: [],
-    },
+        React.createElement("span", { "data-testid": "messageId" }, context.messageId),
+        React.createElement("span", { "data-testid": "componentName" }, context.componentName)));
 };
-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));
+describe("V1ComponentContentProvider", () => {
+    it("provides context to child components", () => {
+        render(React.createElement(V1ComponentContentProvider, { componentId: "comp_123", threadId: "thread_456", messageId: "msg_789", componentName: "TestComponent" },
+            React.createElement(ContextAwareComponent, null)));
         expect(screen.getByTestId("componentId")).toHaveTextContent("comp_123");
         expect(screen.getByTestId("threadId")).toHaveTextContent("thread_456");
         expect(screen.getByTestId("messageId")).toHaveTextContent("msg_789");
+        expect(screen.getByTestId("componentName")).toHaveTextContent("TestComponent");
     });
 });
-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", () => {
+describe("useV1ComponentContent", () => {
+    it("throws when used outside provider", () => {
         function TestConsumer() {
             useV1ComponentContent();
             return React.createElement("div", null, "Should not render");
@@ -371,5 +31,10 @@ describe("useV1ComponentContent error handling", () => {
         expect(() => render(React.createElement(TestConsumer, null))).toThrow("useV1ComponentContent must be used within a rendered component");
         consoleSpy.mockRestore();
     });
+    it("returns context when used within provider", () => {
+        render(React.createElement(V1ComponentContentProvider, { componentId: "comp_test", threadId: "thread_test", messageId: "msg_test", componentName: "TestComp" },
+            React.createElement(ContextAwareComponent, null)));
+        expect(screen.getByTestId("componentId")).toHaveTextContent("comp_test");
+    });
 });
 //# sourceMappingURL=component-renderer.test.js.map