@v0-sdk/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,341 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+/**
+ * Binary format for message content as returned by the v0 Platform API
+ * Each row is a tuple where the first element is the type and the rest are data
+ */
+type MessageBinaryFormat = [number, ...any[]][];
+/**
+ * Individual row in the message binary format
+ */
+type MessageBinaryFormatRow = MessageBinaryFormat[number];
+/**
+ * Props for the Message component
+ */
+interface MessageProps {
+    /**
+     * The parsed content from the v0 Platform API
+     * This should be the JSON.parsed value of the 'content' field from API responses
+     */
+    content: MessageBinaryFormat;
+    /**
+     * Optional message ID for tracking purposes
+     */
+    messageId?: string;
+    /**
+     * Role of the message sender
+     */
+    role?: 'user' | 'assistant' | 'system' | 'tool';
+    /**
+     * Whether the message is currently being streamed
+     */
+    streaming?: boolean;
+    /**
+     * Whether this is the last message in the conversation
+     */
+    isLastMessage?: boolean;
+    /**
+     * Custom className for styling the root container
+     */
+    className?: string;
+    /**
+     * Custom component renderers (react-markdown style)
+     * Override specific components by name
+     * Can be either a React component or an object with className for simple styling
+     */
+    components?: {
+        CodeBlock?: React.ComponentType<{
+            language: string;
+            code: string;
+            className?: string;
+        }>;
+        MathPart?: React.ComponentType<{
+            content: string;
+            inline?: boolean;
+            className?: string;
+        }>;
+        CodeProjectPart?: React.ComponentType<{
+            title?: string;
+            filename?: string;
+            code?: string;
+            language?: string;
+            collapsed?: boolean;
+            className?: string;
+        }>;
+        ThinkingSection?: React.ComponentType<{
+            title?: string;
+            duration?: number;
+            thought?: string;
+            collapsed?: boolean;
+            onCollapse?: () => void;
+            className?: string;
+            children?: React.ReactNode;
+            brainIcon?: React.ReactNode;
+            chevronRightIcon?: React.ReactNode;
+            chevronDownIcon?: React.ReactNode;
+        }>;
+        TaskSection?: React.ComponentType<{
+            title?: string;
+            type?: string;
+            parts?: any[];
+            collapsed?: boolean;
+            onCollapse?: () => void;
+            className?: string;
+            children?: React.ReactNode;
+            taskIcon?: React.ReactNode;
+            chevronRightIcon?: React.ReactNode;
+            chevronDownIcon?: React.ReactNode;
+        }>;
+        Icon?: React.ComponentType<{
+            name: 'chevron-right' | 'chevron-down' | 'search' | 'folder' | 'settings' | 'file-text' | 'brain' | 'wrench';
+            className?: string;
+        }>;
+        p?: React.ComponentType<React.HTMLAttributes<HTMLParagraphElement>> | {
+            className?: string;
+        };
+        h1?: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>> | {
+            className?: string;
+        };
+        h2?: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>> | {
+            className?: string;
+        };
+        h3?: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>> | {
+            className?: string;
+        };
+        h4?: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>> | {
+            className?: string;
+        };
+        h5?: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>> | {
+            className?: string;
+        };
+        h6?: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>> | {
+            className?: string;
+        };
+        ul?: React.ComponentType<React.HTMLAttributes<HTMLUListElement>> | {
+            className?: string;
+        };
+        ol?: React.ComponentType<React.HTMLAttributes<HTMLOListElement>> | {
+            className?: string;
+        };
+        li?: React.ComponentType<React.HTMLAttributes<HTMLLIElement>> | {
+            className?: string;
+        };
+        blockquote?: React.ComponentType<React.HTMLAttributes<HTMLQuoteElement>> | {
+            className?: string;
+        };
+        code?: React.ComponentType<React.HTMLAttributes<HTMLElement>> | {
+            className?: string;
+        };
+        pre?: React.ComponentType<React.HTMLAttributes<HTMLPreElement>> | {
+            className?: string;
+        };
+        strong?: React.ComponentType<React.HTMLAttributes<HTMLElement>> | {
+            className?: string;
+        };
+        em?: React.ComponentType<React.HTMLAttributes<HTMLElement>> | {
+            className?: string;
+        };
+        a?: React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>> | {
+            className?: string;
+        };
+        hr?: React.ComponentType<React.HTMLAttributes<HTMLHRElement>> | {
+            className?: string;
+        };
+        div?: React.ComponentType<React.HTMLAttributes<HTMLDivElement>> | {
+            className?: string;
+        };
+        span?: React.ComponentType<React.HTMLAttributes<HTMLSpanElement>> | {
+            className?: string;
+        };
+    };
+    /**
+     * @deprecated Use `components` instead. Will be removed in next major version.
+     */
+    renderers?: {
+        CodeBlock?: React.ComponentType<{
+            language: string;
+            code: string;
+            className?: string;
+        }>;
+        MathRenderer?: React.ComponentType<{
+            content: string;
+            inline?: boolean;
+            className?: string;
+        }>;
+        MathPart?: React.ComponentType<{
+            content: string;
+            inline?: boolean;
+            className?: string;
+        }>;
+        Icon?: React.ComponentType<{
+            name: 'chevron-right' | 'chevron-down' | 'search' | 'folder' | 'settings' | 'file-text' | 'brain' | 'wrench';
+            className?: string;
+        }>;
+    };
+}
+type MessageRendererProps = MessageProps;
+type V0MessageRendererProps = MessageProps;
+
+/**
+ * Core renderer component for v0 Platform API message content
+ */
+declare function MessageImpl({ content, messageId, role: _role, streaming: _streaming, isLastMessage: _isLastMessage, className, components, renderers, }: MessageProps): react_jsx_runtime.JSX.Element;
+/**
+ * Main component for rendering v0 Platform API message content
+ *
+ * @example
+ * ```tsx
+ * import { Message } from '@v0-sdk/react'
+ *
+ * function MyComponent({ apiResponse }) {
+ *   const content = JSON.parse(apiResponse.content)
+ *
+ *   return (
+ *     <Message
+ *       content={content}
+ *       messageId={apiResponse.id}
+ *       role={apiResponse.role}
+ *       className="space-y-4"
+ *       components={{
+ *         p: ({ children, ...props }) => <p className="mb-4" {...props}>{children}</p>,
+ *         h1: ({ children, ...props }) => <h1 className="mb-4 text-2xl font-bold" {...props}>{children}</h1>,
+ *         CodeBlock: MyCustomCodeBlock,
+ *         MathPart: MyCustomMathRenderer,
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare const Message: React$1.MemoExoticComponent<typeof MessageImpl>;
+
+interface IconProps {
+    name: 'chevron-right' | 'chevron-down' | 'search' | 'folder' | 'settings' | 'file-text' | 'brain' | 'wrench';
+    className?: string;
+}
+/**
+ * Generic icon component that can be customized by consumers.
+ * By default, renders a simple fallback. Consumers should provide
+ * their own icon implementation via context or props.
+ */
+declare function Icon(props: IconProps): react_jsx_runtime.JSX.Element;
+
+interface ThinkingSectionProps {
+    title?: string;
+    duration?: number;
+    thought?: string;
+    collapsed?: boolean;
+    onCollapse?: () => void;
+    className?: string;
+    children?: React$1.ReactNode;
+    iconRenderer?: React$1.ComponentType<IconProps>;
+    brainIcon?: React$1.ReactNode;
+    chevronRightIcon?: React$1.ReactNode;
+    chevronDownIcon?: React$1.ReactNode;
+}
+/**
+ * Generic thinking section component
+ * Renders a collapsible section with basic structure - consumers provide styling
+ */
+declare function ThinkingSection({ title, duration, thought, collapsed: initialCollapsed, onCollapse, className, children, iconRenderer, brainIcon, chevronRightIcon, chevronDownIcon, }: ThinkingSectionProps): react_jsx_runtime.JSX.Element;
+
+interface TaskSectionProps {
+    title?: string;
+    type?: string;
+    parts?: any[];
+    collapsed?: boolean;
+    onCollapse?: () => void;
+    className?: string;
+    children?: React$1.ReactNode;
+    iconRenderer?: React$1.ComponentType<IconProps>;
+    taskIcon?: React$1.ReactNode;
+    chevronRightIcon?: React$1.ReactNode;
+    chevronDownIcon?: React$1.ReactNode;
+}
+/**
+ * Generic task section component
+ * Renders a collapsible task section with basic structure - consumers provide styling
+ */
+declare function TaskSection({ title, type, parts, collapsed: initialCollapsed, onCollapse, className, children, iconRenderer, taskIcon, chevronRightIcon, chevronDownIcon, }: TaskSectionProps): react_jsx_runtime.JSX.Element;
+
+interface CodeProjectPartProps {
+    title?: string;
+    filename?: string;
+    code?: string;
+    language?: string;
+    collapsed?: boolean;
+    className?: string;
+    children?: React$1.ReactNode;
+    iconRenderer?: React$1.ComponentType<IconProps>;
+}
+/**
+ * Generic code project block component
+ * Renders a collapsible code project with basic structure - consumers provide styling
+ */
+declare function CodeProjectPart({ title, filename, code, language, collapsed: initialCollapsed, className, children, iconRenderer, }: CodeProjectPartProps): react_jsx_runtime.JSX.Element;
+
+interface ContentPartRendererProps {
+    part: any;
+    iconRenderer?: React$1.ComponentType<IconProps>;
+    thinkingSectionRenderer?: React$1.ComponentType<{
+        title?: string;
+        duration?: number;
+        thought?: string;
+        collapsed?: boolean;
+        className?: string;
+        children?: React$1.ReactNode;
+        brainIcon?: React$1.ReactNode;
+        chevronRightIcon?: React$1.ReactNode;
+        chevronDownIcon?: React$1.ReactNode;
+    }>;
+    taskSectionRenderer?: React$1.ComponentType<{
+        title?: string;
+        type?: string;
+        parts?: any[];
+        collapsed?: boolean;
+        className?: string;
+        children?: React$1.ReactNode;
+        taskIcon?: React$1.ReactNode;
+        chevronRightIcon?: React$1.ReactNode;
+        chevronDownIcon?: React$1.ReactNode;
+    }>;
+    brainIcon?: React$1.ReactNode;
+    chevronRightIcon?: React$1.ReactNode;
+    chevronDownIcon?: React$1.ReactNode;
+    searchIcon?: React$1.ReactNode;
+    folderIcon?: React$1.ReactNode;
+    settingsIcon?: React$1.ReactNode;
+    wrenchIcon?: React$1.ReactNode;
+}
+declare function ContentPartRenderer({ part, iconRenderer, thinkingSectionRenderer, taskSectionRenderer, brainIcon, chevronRightIcon, chevronDownIcon, searchIcon, folderIcon, settingsIcon, wrenchIcon, }: ContentPartRendererProps): react_jsx_runtime.JSX.Element;
+
+interface MathPartProps {
+    content: string;
+    inline?: boolean;
+    className?: string;
+    children?: React$1.ReactNode;
+    displayMode?: boolean;
+}
+/**
+ * Generic math renderer component
+ * Renders plain math content by default - consumers should provide their own math rendering
+ */
+declare function MathPart({ content, inline, className, children, }: MathPartProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    language: string;
+    code: string;
+    className?: string;
+    children?: React$1.ReactNode;
+    filename?: string;
+}
+/**
+ * Generic code block component
+ * Renders plain code by default - consumers should provide their own styling and highlighting
+ */
+declare function CodeBlock({ language, code, className, children, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+export { ContentPartRenderer as AssistantMessageContentPart, CodeBlock, CodeProjectPart as CodeProjectBlock, CodeProjectPart, ContentPartRenderer, Icon, MathPart, MathPart as MathRenderer, Message, Message as MessageContent, Message as MessageRenderer, TaskSection, ThinkingSection, Message as V0MessageRenderer };
+export type { CodeBlockProps, CodeProjectPartProps as CodeProjectBlockProps, CodeProjectPartProps, ContentPartRendererProps, IconProps, MathPartProps, MathPartProps as MathRendererProps, MessageBinaryFormat, MessageBinaryFormatRow, MessageProps, MessageRendererProps, TaskSectionProps, ThinkingSectionProps, V0MessageRendererProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":["../src/types.ts","../src/components/message.tsx","../src/components/icon.tsx","../src/components/thinking-section.tsx","../src/components/task-section.tsx","../src/components/code-project-part.tsx","../src/components/content-part-renderer.tsx","../src/components/math-part.tsx","../src/components/code-block.tsx"],"sourcesContent":["/**\n * Binary format for message content as returned by the v0 Platform API\n * Each row is a tuple where the first element is the type and the rest are data\n */\nexport type MessageBinaryFormat = [number, ...any[]][]\n\n/**\n * Individual row in the message binary format\n */\nexport type MessageBinaryFormatRow = MessageBinaryFormat[number]\n\n/**\n * Props for the Message component\n */\nexport interface MessageProps {\n  /**\n   * The parsed content from the v0 Platform API\n   * This should be the JSON.parsed value of the 'content' field from API responses\n   */\n  content: MessageBinaryFormat\n\n  /**\n   * Optional message ID for tracking purposes\n   */\n  messageId?: string\n\n  /**\n   * Role of the message sender\n   */\n  role?: 'user' | 'assistant' | 'system' | 'tool'\n\n  /**\n   * Whether the message is currently being streamed\n   */\n  streaming?: boolean\n\n  /**\n   * Whether this is the last message in the conversation\n   */\n  isLastMessage?: boolean\n\n  /**\n   * Custom className for styling the root container\n   */\n  className?: string\n\n  /**\n   * Custom component renderers (react-markdown style)\n   * Override specific components by name\n   * Can be either a React component or an object with className for simple styling\n   */\n  components?: {\n    // Content components\n    CodeBlock?: React.ComponentType<{\n      language: string\n      code: string\n      className?: string\n    }>\n    MathPart?: React.ComponentType<{\n      content: string\n      inline?: boolean\n      className?: string\n    }>\n    CodeProjectPart?: React.ComponentType<{\n      title?: string\n      filename?: string\n      code?: string\n      language?: string\n      collapsed?: boolean\n      className?: string\n    }>\n    ThinkingSection?: React.ComponentType<{\n      title?: string\n      duration?: number\n      thought?: string\n      collapsed?: boolean\n      onCollapse?: () => void\n      className?: string\n      children?: React.ReactNode\n      brainIcon?: React.ReactNode\n      chevronRightIcon?: React.ReactNode\n      chevronDownIcon?: React.ReactNode\n    }>\n    TaskSection?: React.ComponentType<{\n      title?: string\n      type?: string\n      parts?: any[]\n      collapsed?: boolean\n      onCollapse?: () => void\n      className?: string\n      children?: React.ReactNode\n      taskIcon?: React.ReactNode\n      chevronRightIcon?: React.ReactNode\n      chevronDownIcon?: React.ReactNode\n    }>\n    Icon?: React.ComponentType<{\n      name:\n        | 'chevron-right'\n        | 'chevron-down'\n        | 'search'\n        | 'folder'\n        | 'settings'\n        | 'file-text'\n        | 'brain'\n        | 'wrench'\n      className?: string\n    }>\n\n    // HTML elements (react-markdown style)\n    // Can be either a React component or an object with className\n    p?:\n      | React.ComponentType<React.HTMLAttributes<HTMLParagraphElement>>\n      | { className?: string }\n    h1?:\n      | React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>\n      | { className?: string }\n    h2?:\n      | React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>\n      | { className?: string }\n    h3?:\n      | React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>\n      | { className?: string }\n    h4?:\n      | React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>\n      | { className?: string }\n    h5?:\n      | React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>\n      | { className?: string }\n    h6?:\n      | React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>\n      | { className?: string }\n    ul?:\n      | React.ComponentType<React.HTMLAttributes<HTMLUListElement>>\n      | { className?: string }\n    ol?:\n      | React.ComponentType<React.HTMLAttributes<HTMLOListElement>>\n      | { className?: string }\n    li?:\n      | React.ComponentType<React.HTMLAttributes<HTMLLIElement>>\n      | { className?: string }\n    blockquote?:\n      | React.ComponentType<React.HTMLAttributes<HTMLQuoteElement>>\n      | { className?: string }\n    code?:\n      | React.ComponentType<React.HTMLAttributes<HTMLElement>>\n      | { className?: string }\n    pre?:\n      | React.ComponentType<React.HTMLAttributes<HTMLPreElement>>\n      | { className?: string }\n    strong?:\n      | React.ComponentType<React.HTMLAttributes<HTMLElement>>\n      | { className?: string }\n    em?:\n      | React.ComponentType<React.HTMLAttributes<HTMLElement>>\n      | { className?: string }\n    a?:\n      | React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>>\n      | { className?: string }\n    hr?:\n      | React.ComponentType<React.HTMLAttributes<HTMLHRElement>>\n      | { className?: string }\n    div?:\n      | React.ComponentType<React.HTMLAttributes<HTMLDivElement>>\n      | { className?: string }\n    span?:\n      | React.ComponentType<React.HTMLAttributes<HTMLSpanElement>>\n      | { className?: string }\n  }\n\n  /**\n   * @deprecated Use `components` instead. Will be removed in next major version.\n   */\n  renderers?: {\n    CodeBlock?: React.ComponentType<{\n      language: string\n      code: string\n      className?: string\n    }>\n    MathRenderer?: React.ComponentType<{\n      content: string\n      inline?: boolean\n      className?: string\n    }>\n    MathPart?: React.ComponentType<{\n      content: string\n      inline?: boolean\n      className?: string\n    }>\n    Icon?: React.ComponentType<{\n      name:\n        | 'chevron-right'\n        | 'chevron-down'\n        | 'search'\n        | 'folder'\n        | 'settings'\n        | 'file-text'\n        | 'brain'\n        | 'wrench'\n      className?: string\n    }>\n  }\n}\n\n// Backward compatibility exports\nexport type MessageRendererProps = MessageProps\nexport type V0MessageRendererProps = MessageProps\n// Note: MessageStyles/MessageRendererStyles/V0MessageRendererStyles removed as styles prop is no longer supported\n","import React from 'react'\nimport { MessageProps } from '../types'\nimport { MathPart } from './math-part'\nimport { CodeBlock } from './code-block'\nimport { CodeProjectPart } from './code-project-part'\nimport { ContentPartRenderer } from './content-part-renderer'\nimport { cn } from '../utils/cn'\n\n// Helper function to render HTML elements with component or className config\nfunction renderHtmlElement(\n  tagName: string,\n  key: string,\n  props: any,\n  children: any[],\n  className: string | undefined,\n  componentOrConfig: any,\n  components: MessageProps['components'],\n): React.ReactNode {\n  if (typeof componentOrConfig === 'function') {\n    const Component = componentOrConfig\n    return (\n      <Component key={key} {...props} className={className}>\n        {renderChildren(children, key, components)}\n      </Component>\n    )\n  } else if (componentOrConfig && typeof componentOrConfig === 'object') {\n    const mergedClassName = cn(className, componentOrConfig.className)\n    return React.createElement(\n      tagName,\n      { key, ...props, className: mergedClassName },\n      renderChildren(children, key, components),\n    )\n  } else {\n    return React.createElement(\n      tagName,\n      { key, ...props, className },\n      renderChildren(children, key, components),\n    )\n  }\n}\n\n/**\n * Core renderer component for v0 Platform API message content\n */\nfunction MessageImpl({\n  content,\n  messageId = 'unknown',\n  role: _role = 'assistant',\n  streaming: _streaming = false,\n  isLastMessage: _isLastMessage = false,\n  className,\n  components,\n  renderers, // deprecated\n}: MessageProps) {\n  if (!Array.isArray(content)) {\n    console.warn(\n      'MessageContent: content must be an array (MessageBinaryFormat)',\n    )\n    return null\n  }\n\n  // Merge components and renderers (backward compatibility)\n  const mergedComponents = {\n    ...components,\n    // Map legacy renderers to new component names\n    ...(renderers?.CodeBlock && { CodeBlock: renderers.CodeBlock }),\n    ...(renderers?.MathRenderer && { MathPart: renderers.MathRenderer }),\n    ...(renderers?.MathPart && { MathPart: renderers.MathPart }),\n    ...(renderers?.Icon && { Icon: renderers.Icon }),\n  }\n\n  const elements = content.map(([type, ...data], index) => {\n    const key = `${messageId}-${index}`\n\n    // Markdown/text content (type 0)\n    if (type === 0) {\n      const markdownData = data[0]\n      if (!Array.isArray(markdownData)) {\n        return null\n      }\n\n      return (\n        <div key={key}>\n          {markdownData.map((item: any, mdIndex: number) => {\n            const mdKey = `${key}-md-${mdIndex}`\n            return renderMarkdownElement(item, mdKey, mergedComponents)\n          })}\n        </div>\n      )\n    }\n\n    // Code block (type 1)\n    if (type === 1) {\n      const [language, code] = data\n      const CodeBlockComponent = mergedComponents?.CodeBlock || CodeBlock\n      return (\n        <CodeBlockComponent\n          key={key}\n          language={language || 'text'}\n          code={code || ''}\n        />\n      )\n    }\n\n    // Math (type 2 for inline, type 3 for block)\n    if (type === 2 || type === 3) {\n      const mathContent = data[0] || ''\n      const MathPartComponent = mergedComponents?.MathPart || MathPart\n      return (\n        <MathPartComponent\n          key={key}\n          content={mathContent}\n          inline={type === 2}\n        />\n      )\n    }\n\n    // Unknown type - render as text for debugging\n    return <div key={key}>[Unknown content type: {type}]</div>\n  })\n\n  return <div className={className}>{elements}</div>\n}\n\nfunction renderMarkdownElement(\n  item: any,\n  key: string,\n  components?: MessageProps['components'],\n): React.ReactNode {\n  if (typeof item === 'string') {\n    return <span key={key}>{item}</span>\n  }\n\n  if (Array.isArray(item)) {\n    const [tagName, props, ...children] = item\n\n    // Handle special v0 Platform API elements\n    if (tagName === 'AssistantMessageContentPart') {\n      return (\n        <ContentPartRenderer\n          key={key}\n          part={props.part}\n          iconRenderer={components?.Icon}\n          thinkingSectionRenderer={components?.ThinkingSection}\n          taskSectionRenderer={components?.TaskSection}\n        />\n      )\n    }\n\n    if (tagName === 'Codeblock') {\n      const CustomCodeProjectPart = components?.CodeProjectPart\n      const CodeProjectComponent = CustomCodeProjectPart || CodeProjectPart\n      return (\n        <CodeProjectComponent\n          key={key}\n          language={props.lang}\n          code={children[0]}\n          iconRenderer={components?.Icon}\n        />\n      )\n    }\n\n    if (tagName === 'text') {\n      return <span key={key}>{children[0]}</span>\n    }\n\n    // Handle standard markdown elements\n    const className = props?.className\n\n    switch (tagName) {\n      case 'p': {\n        const componentOrConfig = components?.p\n        if (typeof componentOrConfig === 'function') {\n          const Component = componentOrConfig\n          return (\n            <Component key={key} {...props} className={className}>\n              {renderChildren(children, key, components)}\n            </Component>\n          )\n        } else if (componentOrConfig && typeof componentOrConfig === 'object') {\n          const mergedClassName = cn(className, componentOrConfig.className)\n          return (\n            <p key={key} {...props} className={mergedClassName}>\n              {renderChildren(children, key, components)}\n            </p>\n          )\n        } else {\n          return (\n            <p key={key} {...props} className={className}>\n              {renderChildren(children, key, components)}\n            </p>\n          )\n        }\n      }\n      case 'h1':\n        return renderHtmlElement(\n          'h1',\n          key,\n          props,\n          children,\n          className,\n          components?.h1,\n          components,\n        )\n      case 'h2':\n        return renderHtmlElement(\n          'h2',\n          key,\n          props,\n          children,\n          className,\n          components?.h2,\n          components,\n        )\n      case 'h3':\n        return renderHtmlElement(\n          'h3',\n          key,\n          props,\n          children,\n          className,\n          components?.h3,\n          components,\n        )\n      case 'h4':\n        return renderHtmlElement(\n          'h4',\n          key,\n          props,\n          children,\n          className,\n          components?.h4,\n          components,\n        )\n      case 'h5':\n        return renderHtmlElement(\n          'h5',\n          key,\n          props,\n          children,\n          className,\n          components?.h5,\n          components,\n        )\n      case 'h6':\n        return renderHtmlElement(\n          'h6',\n          key,\n          props,\n          children,\n          className,\n          components?.h6,\n          components,\n        )\n      case 'ul':\n        return renderHtmlElement(\n          'ul',\n          key,\n          props,\n          children,\n          className,\n          components?.ul,\n          components,\n        )\n      case 'ol':\n        return renderHtmlElement(\n          'ol',\n          key,\n          props,\n          children,\n          className,\n          components?.ol,\n          components,\n        )\n      case 'li':\n        return renderHtmlElement(\n          'li',\n          key,\n          props,\n          children,\n          className,\n          components?.li,\n          components,\n        )\n      case 'blockquote':\n        return renderHtmlElement(\n          'blockquote',\n          key,\n          props,\n          children,\n          className,\n          components?.blockquote,\n          components,\n        )\n      case 'code':\n        return renderHtmlElement(\n          'code',\n          key,\n          props,\n          children,\n          className,\n          components?.code,\n          components,\n        )\n      case 'pre':\n        return renderHtmlElement(\n          'pre',\n          key,\n          props,\n          children,\n          className,\n          components?.pre,\n          components,\n        )\n      case 'strong':\n        return renderHtmlElement(\n          'strong',\n          key,\n          props,\n          children,\n          className,\n          components?.strong,\n          components,\n        )\n      case 'em':\n        return renderHtmlElement(\n          'em',\n          key,\n          props,\n          children,\n          className,\n          components?.em,\n          components,\n        )\n      case 'a': {\n        const componentOrConfig = components?.a\n        if (typeof componentOrConfig === 'function') {\n          const Component = componentOrConfig\n          return (\n            <Component\n              key={key}\n              {...props}\n              className={className}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {renderChildren(children, key, components)}\n            </Component>\n          )\n        } else if (componentOrConfig && typeof componentOrConfig === 'object') {\n          const mergedClassName = cn(className, componentOrConfig.className)\n          return (\n            <a\n              key={key}\n              {...props}\n              className={mergedClassName}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {renderChildren(children, key, components)}\n            </a>\n          )\n        } else {\n          return (\n            <a\n              key={key}\n              {...props}\n              className={className}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {renderChildren(children, key, components)}\n            </a>\n          )\n        }\n      }\n      case 'br':\n        return <br key={key} />\n      case 'hr': {\n        const componentOrConfig = components?.hr\n        if (typeof componentOrConfig === 'function') {\n          const Component = componentOrConfig\n          return <Component key={key} {...props} className={className} />\n        } else if (componentOrConfig && typeof componentOrConfig === 'object') {\n          const mergedClassName = cn(className, componentOrConfig.className)\n          return <hr key={key} {...props} className={mergedClassName} />\n        } else {\n          return <hr key={key} {...props} className={className} />\n        }\n      }\n      case 'div':\n        return renderHtmlElement(\n          'div',\n          key,\n          props,\n          children,\n          className,\n          components?.div,\n          components,\n        )\n      case 'span':\n        return renderHtmlElement(\n          'span',\n          key,\n          props,\n          children,\n          className,\n          components?.span,\n          components,\n        )\n      default:\n        return (\n          <span key={key}>{renderChildren(children, key, components)}</span>\n        )\n    }\n  }\n\n  return null\n}\n\nfunction renderChildren(\n  children: any[],\n  parentKey: string,\n  components?: MessageProps['components'],\n): React.ReactNode[] {\n  return children\n    .map((child, index) => {\n      const key = `${parentKey}-child-${index}`\n      return renderMarkdownElement(child, key, components)\n    })\n    .filter(Boolean)\n}\n\n/**\n * Main component for rendering v0 Platform API message content\n *\n * @example\n * ```tsx\n * import { Message } from '@v0-sdk/react'\n *\n * function MyComponent({ apiResponse }) {\n *   const content = JSON.parse(apiResponse.content)\n *\n *   return (\n *     <Message\n *       content={content}\n *       messageId={apiResponse.id}\n *       role={apiResponse.role}\n *       className=\"space-y-4\"\n *       components={{\n *         p: ({ children, ...props }) => <p className=\"mb-4\" {...props}>{children}</p>,\n *         h1: ({ children, ...props }) => <h1 className=\"mb-4 text-2xl font-bold\" {...props}>{children}</h1>,\n *         CodeBlock: MyCustomCodeBlock,\n *         MathPart: MyCustomMathRenderer,\n *       }}\n *     />\n *   )\n * }\n * ```\n */\nexport const Message = React.memo(MessageImpl)\n","import React, { createContext, useContext } from 'react'\n\n// Context for providing custom icon implementation\nconst IconContext = createContext<React.ComponentType<IconProps> | null>(null)\n\nexport interface IconProps {\n  name:\n    | 'chevron-right'\n    | 'chevron-down'\n    | 'search'\n    | 'folder'\n    | 'settings'\n    | 'file-text'\n    | 'brain'\n    | 'wrench'\n  className?: string\n}\n\n/**\n * Generic icon component that can be customized by consumers.\n * By default, renders a simple fallback. Consumers should provide\n * their own icon implementation via context or props.\n */\nexport function Icon(props: IconProps) {\n  const CustomIcon = useContext(IconContext)\n\n  // Use custom icon implementation if provided via context\n  if (CustomIcon) {\n    return <CustomIcon {...props} />\n  }\n\n  // Fallback implementation - consumers should override this\n  return (\n    <span\n      className={props.className}\n      data-icon={props.name}\n      suppressHydrationWarning\n      aria-label={props.name.replace('-', ' ')}\n    >\n      {getIconFallback(props.name)}\n    </span>\n  )\n}\n\n/**\n * Provider for custom icon implementation\n */\nexport function IconProvider({\n  children,\n  component,\n}: {\n  children: React.ReactNode\n  component: React.ComponentType<IconProps>\n}) {\n  return (\n    <IconContext.Provider value={component}>{children}</IconContext.Provider>\n  )\n}\n\nfunction getIconFallback(name: string): string {\n  const iconMap: Record<string, string> = {\n    'chevron-right': '▶',\n    'chevron-down': '▼',\n    search: '🔍',\n    folder: '📁',\n    settings: '⚙️',\n    'file-text': '📄',\n    brain: '🧠',\n    wrench: '🔧',\n  }\n  return iconMap[name] || '•'\n}\n","import React, { useState } from 'react'\nimport { Icon, IconProps } from './icon'\n\nexport interface ThinkingSectionProps {\n  title?: string\n  duration?: number\n  thought?: string\n  collapsed?: boolean\n  onCollapse?: () => void\n  className?: string\n  children?: React.ReactNode\n  iconRenderer?: React.ComponentType<IconProps>\n  brainIcon?: React.ReactNode\n  chevronRightIcon?: React.ReactNode\n  chevronDownIcon?: React.ReactNode\n}\n\n/**\n * Generic thinking section component\n * Renders a collapsible section with basic structure - consumers provide styling\n */\nexport function ThinkingSection({\n  title,\n  duration,\n  thought,\n  collapsed: initialCollapsed = true,\n  onCollapse,\n  className,\n  children,\n  iconRenderer,\n  brainIcon,\n  chevronRightIcon,\n  chevronDownIcon,\n}: ThinkingSectionProps) {\n  const [internalCollapsed, setInternalCollapsed] = useState(initialCollapsed)\n  const collapsed = onCollapse ? initialCollapsed : internalCollapsed\n  const handleCollapse =\n    onCollapse || (() => setInternalCollapsed(!internalCollapsed))\n\n  // If children provided, use that (allows complete customization)\n  if (children) {\n    return <>{children}</>\n  }\n\n  return (\n    <div className={className} data-component=\"thinking-section\">\n      <button onClick={handleCollapse} data-expanded={!collapsed} data-button>\n        <div data-icon-container>\n          {collapsed ? (\n            <>\n              {brainIcon ||\n                (iconRenderer ? (\n                  React.createElement(iconRenderer, { name: 'brain' })\n                ) : (\n                  <Icon name=\"brain\" />\n                ))}\n              {chevronRightIcon ||\n                (iconRenderer ? (\n                  React.createElement(iconRenderer, { name: 'chevron-right' })\n                ) : (\n                  <Icon name=\"chevron-right\" />\n                ))}\n            </>\n          ) : (\n            chevronDownIcon ||\n            (iconRenderer ? (\n              React.createElement(iconRenderer, { name: 'chevron-down' })\n            ) : (\n              <Icon name=\"chevron-down\" />\n            ))\n          )}\n        </div>\n        <span data-title>\n          {title || 'Thinking'}\n          {duration && ` for ${Math.round(duration)}s`}\n        </span>\n      </button>\n      {!collapsed && thought && (\n        <div data-content>\n          <div data-thought-container>\n            {thought.split('\\n\\n').map((paragraph, index) => (\n              <div key={index} data-paragraph>\n                {paragraph}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n","import React, { useState } from 'react'\nimport { Icon, IconProps } from './icon'\n\nexport interface TaskSectionProps {\n  title?: string\n  type?: string\n  parts?: any[]\n  collapsed?: boolean\n  onCollapse?: () => void\n  className?: string\n  children?: React.ReactNode\n  iconRenderer?: React.ComponentType<IconProps>\n  taskIcon?: React.ReactNode\n  chevronRightIcon?: React.ReactNode\n  chevronDownIcon?: React.ReactNode\n}\n\nfunction getTypeIcon(\n  type?: string,\n  title?: string,\n  iconRenderer?: React.ComponentType<IconProps>,\n) {\n  // Check title content for specific cases\n  if (title?.includes('No issues found')) {\n    return iconRenderer ? (\n      React.createElement(iconRenderer, { name: 'wrench' })\n    ) : (\n      <Icon name=\"wrench\" />\n    )\n  }\n  if (title?.includes('Analyzed codebase')) {\n    return iconRenderer ? (\n      React.createElement(iconRenderer, { name: 'search' })\n    ) : (\n      <Icon name=\"search\" />\n    )\n  }\n\n  // Fallback to type-based icons\n  switch (type) {\n    case 'task-search-web-v1':\n      return iconRenderer ? (\n        React.createElement(iconRenderer, { name: 'search' })\n      ) : (\n        <Icon name=\"search\" />\n      )\n    case 'task-search-repo-v1':\n      return iconRenderer ? (\n        React.createElement(iconRenderer, { name: 'folder' })\n      ) : (\n        <Icon name=\"folder\" />\n      )\n    case 'task-diagnostics-v1':\n      return iconRenderer ? (\n        React.createElement(iconRenderer, { name: 'settings' })\n      ) : (\n        <Icon name=\"settings\" />\n      )\n    default:\n      return iconRenderer ? (\n        React.createElement(iconRenderer, { name: 'wrench' })\n      ) : (\n        <Icon name=\"wrench\" />\n      )\n  }\n}\n\nfunction renderTaskPart(\n  part: any,\n  index: number,\n  iconRenderer?: React.ComponentType<IconProps>,\n) {\n  if (part.type === 'search-web') {\n    if (part.status === 'searching') {\n      return <div key={index}>{`Searching \"${part.query}\"`}</div>\n    }\n    if (part.status === 'analyzing') {\n      return <div key={index}>{`Analyzing ${part.count} results...`}</div>\n    }\n    if (part.status === 'complete' && part.answer) {\n      return (\n        <div key={index}>\n          <p>{part.answer}</p>\n          {part.sources && part.sources.length > 0 && (\n            <div>\n              {part.sources.map((source: any, sourceIndex: number) => (\n                <a\n                  key={sourceIndex}\n                  href={source.url}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  {source.title}\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n      )\n    }\n  }\n\n  if (part.type === 'search-repo') {\n    if (part.status === 'searching') {\n      return <div key={index}>{`Searching \"${part.query}\"`}</div>\n    }\n    if (part.status === 'reading' && part.files) {\n      return (\n        <div key={index}>\n          <span>Reading files</span>\n          {part.files.map((file: string, fileIndex: number) => (\n            <span key={fileIndex}>\n              {iconRenderer ? (\n                React.createElement(iconRenderer, { name: 'file-text' })\n              ) : (\n                <Icon name=\"file-text\" />\n              )}{' '}\n              {file}\n            </span>\n          ))}\n        </div>\n      )\n    }\n  }\n\n  if (part.type === 'diagnostics') {\n    if (part.status === 'checking') {\n      return <div key={index}>Checking for issues...</div>\n    }\n    if (part.status === 'complete' && part.issues === 0) {\n      return <div key={index}>✅ No issues found</div>\n    }\n  }\n\n  return <div key={index}>{JSON.stringify(part)}</div>\n}\n\n/**\n * Generic task section component\n * Renders a collapsible task section with basic structure - consumers provide styling\n */\nexport function TaskSection({\n  title,\n  type,\n  parts = [],\n  collapsed: initialCollapsed = true,\n  onCollapse,\n  className,\n  children,\n  iconRenderer,\n  taskIcon,\n  chevronRightIcon,\n  chevronDownIcon,\n}: TaskSectionProps) {\n  const [internalCollapsed, setInternalCollapsed] = useState(initialCollapsed)\n  const collapsed = onCollapse ? initialCollapsed : internalCollapsed\n  const handleCollapse =\n    onCollapse || (() => setInternalCollapsed(!internalCollapsed))\n\n  // If children provided, use that (allows complete customization)\n  if (children) {\n    return <>{children}</>\n  }\n\n  // Count meaningful parts (parts that would render something)\n  const meaningfulParts = parts.filter((part) => {\n    // Check if the part would render meaningful content\n    if (part.type === 'search-web') {\n      return (\n        part.status === 'searching' ||\n        part.status === 'analyzing' ||\n        (part.status === 'complete' && part.answer)\n      )\n    }\n    if (part.type === 'starting-repo-search' && part.query) return true\n    if (part.type === 'select-files' && part.filePaths?.length > 0) return true\n    if (part.type === 'starting-web-search' && part.query) return true\n    if (part.type === 'got-results' && part.count) return true\n    if (part.type === 'finished-web-search' && part.answer) return true\n    if (part.type === 'diagnostics-passed') return true\n    if (part.type === 'fetching-diagnostics') return true\n    // Add more meaningful part types as needed\n    return false\n  })\n\n  // If there's only one meaningful part, show just the content without the collapsible wrapper\n  if (meaningfulParts.length === 1) {\n    return (\n      <div className={className} data-component=\"task-section-inline\">\n        <div data-part>\n          {renderTaskPart(meaningfulParts[0], 0, iconRenderer)}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={className} data-component=\"task-section\">\n      <button onClick={handleCollapse} data-expanded={!collapsed} data-button>\n        <div data-icon-container>\n          <div data-task-icon>\n            {taskIcon || getTypeIcon(type, title, iconRenderer)}\n          </div>\n          {collapsed\n            ? chevronRightIcon ||\n              (iconRenderer ? (\n                React.createElement(iconRenderer, { name: 'chevron-right' })\n              ) : (\n                <Icon name=\"chevron-right\" />\n              ))\n            : chevronDownIcon ||\n              (iconRenderer ? (\n                React.createElement(iconRenderer, { name: 'chevron-down' })\n              ) : (\n                <Icon name=\"chevron-down\" />\n              ))}\n        </div>\n        <span data-title>{title || 'Task'}</span>\n      </button>\n      {!collapsed && (\n        <div data-content>\n          <div data-parts-container>\n            {parts.map((part, index) => (\n              <div key={index} data-part>\n                {renderTaskPart(part, index, iconRenderer)}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n","import React, { useState } from 'react'\nimport { CodeBlock } from './code-block'\nimport { Icon, IconProps } from './icon'\n\nexport interface CodeProjectPartProps {\n  title?: string\n  filename?: string\n  code?: string\n  language?: string\n  collapsed?: boolean\n  className?: string\n  children?: React.ReactNode\n  iconRenderer?: React.ComponentType<IconProps>\n}\n\n/**\n * Generic code project block component\n * Renders a collapsible code project with basic structure - consumers provide styling\n */\nexport function CodeProjectPart({\n  title,\n  filename,\n  code,\n  language = 'typescript',\n  collapsed: initialCollapsed = true,\n  className,\n  children,\n  iconRenderer,\n}: CodeProjectPartProps) {\n  const [collapsed, setCollapsed] = useState(initialCollapsed)\n\n  // If children provided, use that (allows complete customization)\n  if (children) {\n    return <>{children}</>\n  }\n\n  return (\n    <div className={className} data-component=\"code-project-block\">\n      <button\n        onClick={() => setCollapsed(!collapsed)}\n        data-expanded={!collapsed}\n      >\n        <div data-header>\n          {iconRenderer ? (\n            React.createElement(iconRenderer, { name: 'folder' })\n          ) : (\n            <Icon name=\"folder\" />\n          )}\n          <span data-title>{title || 'Code Project'}</span>\n        </div>\n        <span data-version>v1</span>\n      </button>\n      {!collapsed && (\n        <div data-content>\n          <div data-file-list>\n            <div data-file data-active>\n              {iconRenderer ? (\n                React.createElement(iconRenderer, { name: 'file-text' })\n              ) : (\n                <Icon name=\"file-text\" />\n              )}\n              <span data-filename>{filename}</span>\n              <span data-filepath>app/page.tsx</span>\n            </div>\n            {/* Additional files could be added here */}\n            <div data-file>\n              {iconRenderer ? (\n                React.createElement(iconRenderer, { name: 'file-text' })\n              ) : (\n                <Icon name=\"file-text\" />\n              )}\n              <span data-filename>layout.tsx</span>\n              <span data-filepath>app/layout.tsx</span>\n            </div>\n            <div data-file>\n              {iconRenderer ? (\n                React.createElement(iconRenderer, { name: 'file-text' })\n              ) : (\n                <Icon name=\"file-text\" />\n              )}\n              <span data-filename>globals.css</span>\n              <span data-filepath>app/globals.css</span>\n            </div>\n          </div>\n          {code && <CodeBlock language={language} code={code} />}\n        </div>\n      )}\n    </div>\n  )\n}\n","import React, { useState } from 'react'\nimport { ThinkingSection } from './thinking-section'\nimport { TaskSection } from './task-section'\nimport { IconProps } from './icon'\n\nexport interface ContentPartRendererProps {\n  part: any\n  iconRenderer?: React.ComponentType<IconProps>\n  thinkingSectionRenderer?: React.ComponentType<{\n    title?: string\n    duration?: number\n    thought?: string\n    collapsed?: boolean\n    className?: string\n    children?: React.ReactNode\n    brainIcon?: React.ReactNode\n    chevronRightIcon?: React.ReactNode\n    chevronDownIcon?: React.ReactNode\n  }>\n  taskSectionRenderer?: React.ComponentType<{\n    title?: string\n    type?: string\n    parts?: any[]\n    collapsed?: boolean\n    className?: string\n    children?: React.ReactNode\n    taskIcon?: React.ReactNode\n    chevronRightIcon?: React.ReactNode\n    chevronDownIcon?: React.ReactNode\n  }>\n  // Individual icon props for direct icon usage\n  brainIcon?: React.ReactNode\n  chevronRightIcon?: React.ReactNode\n  chevronDownIcon?: React.ReactNode\n  searchIcon?: React.ReactNode\n  folderIcon?: React.ReactNode\n  settingsIcon?: React.ReactNode\n  wrenchIcon?: React.ReactNode\n}\n\nexport function ContentPartRenderer({\n  part,\n  iconRenderer,\n  thinkingSectionRenderer,\n  taskSectionRenderer,\n  brainIcon,\n  chevronRightIcon,\n  chevronDownIcon,\n  searchIcon,\n  folderIcon,\n  settingsIcon,\n  wrenchIcon,\n}: ContentPartRendererProps) {\n  if (!part) return null\n\n  const { type, parts = [], ...metadata } = part\n\n  switch (type) {\n    case 'task-thinking-v1': {\n      const thinkingPart = parts.find((p: any) => p.type === 'thinking-end')\n      const ThinkingComponent = thinkingSectionRenderer || ThinkingSection\n      const [collapsed, setCollapsed] = useState(true)\n\n      return (\n        <ThinkingComponent\n          title=\"Thought\"\n          duration={thinkingPart?.duration}\n          thought={thinkingPart?.thought}\n          collapsed={collapsed}\n          onCollapse={() => setCollapsed(!collapsed)}\n          brainIcon={brainIcon}\n          chevronRightIcon={chevronRightIcon}\n          chevronDownIcon={chevronDownIcon}\n        />\n      )\n    }\n\n    case 'task-search-web-v1': {\n      const TaskComponent = taskSectionRenderer || TaskSection\n      const [collapsed, setCollapsed] = useState(true)\n\n      return (\n        <TaskComponent\n          title={metadata.taskNameComplete || metadata.taskNameActive}\n          type={type}\n          parts={parts}\n          collapsed={collapsed}\n          onCollapse={() => setCollapsed(!collapsed)}\n          taskIcon={searchIcon}\n          chevronRightIcon={chevronRightIcon}\n          chevronDownIcon={chevronDownIcon}\n        />\n      )\n    }\n\n    case 'task-search-repo-v1': {\n      const TaskComponent = taskSectionRenderer || TaskSection\n      const [collapsed, setCollapsed] = useState(true)\n\n      return (\n        <TaskComponent\n          title={metadata.taskNameComplete || metadata.taskNameActive}\n          type={type}\n          parts={parts}\n          collapsed={collapsed}\n          onCollapse={() => setCollapsed(!collapsed)}\n          taskIcon={folderIcon}\n          chevronRightIcon={chevronRightIcon}\n          chevronDownIcon={chevronDownIcon}\n        />\n      )\n    }\n\n    case 'task-diagnostics-v1': {\n      const TaskComponent = taskSectionRenderer || TaskSection\n      const [collapsed, setCollapsed] = useState(true)\n\n      return (\n        <TaskComponent\n          title={metadata.taskNameComplete || metadata.taskNameActive}\n          type={type}\n          parts={parts}\n          collapsed={collapsed}\n          onCollapse={() => setCollapsed(!collapsed)}\n          taskIcon={settingsIcon}\n          chevronRightIcon={chevronRightIcon}\n          chevronDownIcon={chevronDownIcon}\n        />\n      )\n    }\n\n    case 'task-start-v1':\n      // Usually just indicates task start - can be hidden or show as status\n      return null\n\n    default:\n      return <div data-unknown-part-type={type}>Unknown part type: {type}</div>\n  }\n}\n","import React from 'react'\n\nexport interface MathPartProps {\n  content: string\n  inline?: boolean\n  className?: string\n  children?: React.ReactNode\n  displayMode?: boolean\n}\n\n/**\n * Generic math renderer component\n * Renders plain math content by default - consumers should provide their own math rendering\n */\nexport function MathPart({\n  content,\n  inline = false,\n  className = '',\n  children,\n}: MathPartProps) {\n  // If children provided, use that (allows complete customization)\n  if (children) {\n    return <>{children}</>\n  }\n\n  // Simple fallback - just render plain math content\n  const Element = inline ? 'span' : 'div'\n\n  return (\n    <Element className={className} data-math-inline={inline}>\n      {content}\n    </Element>\n  )\n}\n","import React from 'react'\n\nexport interface CodeBlockProps {\n  language: string\n  code: string\n  className?: string\n  children?: React.ReactNode\n  filename?: string\n}\n\n/**\n * Generic code block component\n * Renders plain code by default - consumers should provide their own styling and highlighting\n */\nexport function CodeBlock({\n  language,\n  code,\n  className = '',\n  children,\n}: CodeBlockProps) {\n  // If children provided, use that (allows complete customization)\n  if (children) {\n    return <>{children}</>\n  }\n\n  // Simple fallback - just render plain code\n  return (\n    <pre className={className} data-language={language}>\n      <code>{code}</code>\n    </pre>\n  )\n}\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACO;AACP;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACA;;AC5KP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;AChCA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;ACRA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;ACjBA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;ACjBA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;ACdA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;AClCA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;ACXA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;;"}