@v0-sdk/react 0.1.0

package/dist/index.js

@@ -0,0 +1,829 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React, { useContext, createContext, useState } from 'react';
+
+/**
+ * Generic math renderer component
+ * Renders plain math content by default - consumers should provide their own math rendering
+ */ function MathPart({ content, inline = false, className = '', children }) {
+    // If children provided, use that (allows complete customization)
+    if (children) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
+    // Simple fallback - just render plain math content
+    const Element = inline ? 'span' : 'div';
+    return /*#__PURE__*/ jsx(Element, {
+        className: className,
+        "data-math-inline": inline,
+        children: content
+    });
+}
+
+/**
+ * Generic code block component
+ * Renders plain code by default - consumers should provide their own styling and highlighting
+ */ function CodeBlock({ language, code, className = '', children }) {
+    // If children provided, use that (allows complete customization)
+    if (children) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
+    // Simple fallback - just render plain code
+    return /*#__PURE__*/ jsx("pre", {
+        className: className,
+        "data-language": language,
+        children: /*#__PURE__*/ jsx("code", {
+            children: code
+        })
+    });
+}
+
+// Context for providing custom icon implementation
+const IconContext = /*#__PURE__*/ createContext(null);
+/**
+ * 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.
+ */ function Icon(props) {
+    const CustomIcon = useContext(IconContext);
+    // Use custom icon implementation if provided via context
+    if (CustomIcon) {
+        return /*#__PURE__*/ jsx(CustomIcon, {
+            ...props
+        });
+    }
+    // Fallback implementation - consumers should override this
+    return /*#__PURE__*/ jsx("span", {
+        className: props.className,
+        "data-icon": props.name,
+        suppressHydrationWarning: true,
+        "aria-label": props.name.replace('-', ' '),
+        children: getIconFallback(props.name)
+    });
+}
+function getIconFallback(name) {
+    const iconMap = {
+        'chevron-right': '▶',
+        'chevron-down': '▼',
+        search: '🔍',
+        folder: '📁',
+        settings: '⚙️',
+        'file-text': '📄',
+        brain: '🧠',
+        wrench: '🔧'
+    };
+    return iconMap[name] || '•';
+}
+
+/**
+ * Generic code project block component
+ * Renders a collapsible code project with basic structure - consumers provide styling
+ */ function CodeProjectPart({ title, filename, code, language = 'typescript', collapsed: initialCollapsed = true, className, children, iconRenderer }) {
+    const [collapsed, setCollapsed] = useState(initialCollapsed);
+    // If children provided, use that (allows complete customization)
+    if (children) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: className,
+        "data-component": "code-project-block",
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                onClick: ()=>setCollapsed(!collapsed),
+                "data-expanded": !collapsed,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        "data-header": true,
+                        children: [
+                            iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                name: 'folder'
+                            }) : /*#__PURE__*/ jsx(Icon, {
+                                name: "folder"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                "data-title": true,
+                                children: title || 'Code Project'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        "data-version": true,
+                        children: "v1"
+                    })
+                ]
+            }),
+            !collapsed && /*#__PURE__*/ jsxs("div", {
+                "data-content": true,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        "data-file-list": true,
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                "data-file": true,
+                                "data-active": true,
+                                children: [
+                                    iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                        name: 'file-text'
+                                    }) : /*#__PURE__*/ jsx(Icon, {
+                                        name: "file-text"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        "data-filename": true,
+                                        children: filename
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        "data-filepath": true,
+                                        children: "app/page.tsx"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                "data-file": true,
+                                children: [
+                                    iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                        name: 'file-text'
+                                    }) : /*#__PURE__*/ jsx(Icon, {
+                                        name: "file-text"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        "data-filename": true,
+                                        children: "layout.tsx"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        "data-filepath": true,
+                                        children: "app/layout.tsx"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                "data-file": true,
+                                children: [
+                                    iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                        name: 'file-text'
+                                    }) : /*#__PURE__*/ jsx(Icon, {
+                                        name: "file-text"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        "data-filename": true,
+                                        children: "globals.css"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        "data-filepath": true,
+                                        children: "app/globals.css"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    code && /*#__PURE__*/ jsx(CodeBlock, {
+                        language: language,
+                        code: code
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+/**
+ * Generic thinking section component
+ * Renders a collapsible section with basic structure - consumers provide styling
+ */ function ThinkingSection({ title, duration, thought, collapsed: initialCollapsed = true, onCollapse, className, children, iconRenderer, brainIcon, chevronRightIcon, chevronDownIcon }) {
+    const [internalCollapsed, setInternalCollapsed] = useState(initialCollapsed);
+    const collapsed = onCollapse ? initialCollapsed : internalCollapsed;
+    const handleCollapse = onCollapse || (()=>setInternalCollapsed(!internalCollapsed));
+    // If children provided, use that (allows complete customization)
+    if (children) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: className,
+        "data-component": "thinking-section",
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                onClick: handleCollapse,
+                "data-expanded": !collapsed,
+                "data-button": true,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        "data-icon-container": true,
+                        children: collapsed ? /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                brainIcon || (iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                    name: 'brain'
+                                }) : /*#__PURE__*/ jsx(Icon, {
+                                    name: "brain"
+                                })),
+                                chevronRightIcon || (iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                    name: 'chevron-right'
+                                }) : /*#__PURE__*/ jsx(Icon, {
+                                    name: "chevron-right"
+                                }))
+                            ]
+                        }) : chevronDownIcon || (iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                            name: 'chevron-down'
+                        }) : /*#__PURE__*/ jsx(Icon, {
+                            name: "chevron-down"
+                        }))
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        "data-title": true,
+                        children: [
+                            title || 'Thinking',
+                            duration && ` for ${Math.round(duration)}s`
+                        ]
+                    })
+                ]
+            }),
+            !collapsed && thought && /*#__PURE__*/ jsx("div", {
+                "data-content": true,
+                children: /*#__PURE__*/ jsx("div", {
+                    "data-thought-container": true,
+                    children: thought.split('\n\n').map((paragraph, index)=>/*#__PURE__*/ jsx("div", {
+                            "data-paragraph": true,
+                            children: paragraph
+                        }, index))
+                })
+            })
+        ]
+    });
+}
+
+function getTypeIcon(type, title, iconRenderer) {
+    // Check title content for specific cases
+    if (title?.includes('No issues found')) {
+        return iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+            name: 'wrench'
+        }) : /*#__PURE__*/ jsx(Icon, {
+            name: "wrench"
+        });
+    }
+    if (title?.includes('Analyzed codebase')) {
+        return iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+            name: 'search'
+        }) : /*#__PURE__*/ jsx(Icon, {
+            name: "search"
+        });
+    }
+    // Fallback to type-based icons
+    switch(type){
+        case 'task-search-web-v1':
+            return iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                name: 'search'
+            }) : /*#__PURE__*/ jsx(Icon, {
+                name: "search"
+            });
+        case 'task-search-repo-v1':
+            return iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                name: 'folder'
+            }) : /*#__PURE__*/ jsx(Icon, {
+                name: "folder"
+            });
+        case 'task-diagnostics-v1':
+            return iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                name: 'settings'
+            }) : /*#__PURE__*/ jsx(Icon, {
+                name: "settings"
+            });
+        default:
+            return iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                name: 'wrench'
+            }) : /*#__PURE__*/ jsx(Icon, {
+                name: "wrench"
+            });
+    }
+}
+function renderTaskPart(part, index, iconRenderer) {
+    if (part.type === 'search-web') {
+        if (part.status === 'searching') {
+            return /*#__PURE__*/ jsx("div", {
+                children: `Searching "${part.query}"`
+            }, index);
+        }
+        if (part.status === 'analyzing') {
+            return /*#__PURE__*/ jsx("div", {
+                children: `Analyzing ${part.count} results...`
+            }, index);
+        }
+        if (part.status === 'complete' && part.answer) {
+            return /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        children: part.answer
+                    }),
+                    part.sources && part.sources.length > 0 && /*#__PURE__*/ jsx("div", {
+                        children: part.sources.map((source, sourceIndex)=>/*#__PURE__*/ jsx("a", {
+                                href: source.url,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                children: source.title
+                            }, sourceIndex))
+                    })
+                ]
+            }, index);
+        }
+    }
+    if (part.type === 'search-repo') {
+        if (part.status === 'searching') {
+            return /*#__PURE__*/ jsx("div", {
+                children: `Searching "${part.query}"`
+            }, index);
+        }
+        if (part.status === 'reading' && part.files) {
+            return /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: "Reading files"
+                    }),
+                    part.files.map((file, fileIndex)=>/*#__PURE__*/ jsxs("span", {
+                            children: [
+                                iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                    name: 'file-text'
+                                }) : /*#__PURE__*/ jsx(Icon, {
+                                    name: "file-text"
+                                }),
+                                ' ',
+                                file
+                            ]
+                        }, fileIndex))
+                ]
+            }, index);
+        }
+    }
+    if (part.type === 'diagnostics') {
+        if (part.status === 'checking') {
+            return /*#__PURE__*/ jsx("div", {
+                children: "Checking for issues..."
+            }, index);
+        }
+        if (part.status === 'complete' && part.issues === 0) {
+            return /*#__PURE__*/ jsx("div", {
+                children: "✅ No issues found"
+            }, index);
+        }
+    }
+    return /*#__PURE__*/ jsx("div", {
+        children: JSON.stringify(part)
+    }, index);
+}
+/**
+ * Generic task section component
+ * Renders a collapsible task section with basic structure - consumers provide styling
+ */ function TaskSection({ title, type, parts = [], collapsed: initialCollapsed = true, onCollapse, className, children, iconRenderer, taskIcon, chevronRightIcon, chevronDownIcon }) {
+    const [internalCollapsed, setInternalCollapsed] = useState(initialCollapsed);
+    const collapsed = onCollapse ? initialCollapsed : internalCollapsed;
+    const handleCollapse = onCollapse || (()=>setInternalCollapsed(!internalCollapsed));
+    // If children provided, use that (allows complete customization)
+    if (children) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
+    // Count meaningful parts (parts that would render something)
+    const meaningfulParts = parts.filter((part)=>{
+        // Check if the part would render meaningful content
+        if (part.type === 'search-web') {
+            return part.status === 'searching' || part.status === 'analyzing' || part.status === 'complete' && part.answer;
+        }
+        if (part.type === 'starting-repo-search' && part.query) return true;
+        if (part.type === 'select-files' && part.filePaths?.length > 0) return true;
+        if (part.type === 'starting-web-search' && part.query) return true;
+        if (part.type === 'got-results' && part.count) return true;
+        if (part.type === 'finished-web-search' && part.answer) return true;
+        if (part.type === 'diagnostics-passed') return true;
+        if (part.type === 'fetching-diagnostics') return true;
+        // Add more meaningful part types as needed
+        return false;
+    });
+    // If there's only one meaningful part, show just the content without the collapsible wrapper
+    if (meaningfulParts.length === 1) {
+        return /*#__PURE__*/ jsx("div", {
+            className: className,
+            "data-component": "task-section-inline",
+            children: /*#__PURE__*/ jsx("div", {
+                "data-part": true,
+                children: renderTaskPart(meaningfulParts[0], 0, iconRenderer)
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: className,
+        "data-component": "task-section",
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                onClick: handleCollapse,
+                "data-expanded": !collapsed,
+                "data-button": true,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        "data-icon-container": true,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                "data-task-icon": true,
+                                children: taskIcon || getTypeIcon(type, title, iconRenderer)
+                            }),
+                            collapsed ? chevronRightIcon || (iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                name: 'chevron-right'
+                            }) : /*#__PURE__*/ jsx(Icon, {
+                                name: "chevron-right"
+                            })) : chevronDownIcon || (iconRenderer ? /*#__PURE__*/ React.createElement(iconRenderer, {
+                                name: 'chevron-down'
+                            }) : /*#__PURE__*/ jsx(Icon, {
+                                name: "chevron-down"
+                            }))
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        "data-title": true,
+                        children: title || 'Task'
+                    })
+                ]
+            }),
+            !collapsed && /*#__PURE__*/ jsx("div", {
+                "data-content": true,
+                children: /*#__PURE__*/ jsx("div", {
+                    "data-parts-container": true,
+                    children: parts.map((part, index)=>/*#__PURE__*/ jsx("div", {
+                            "data-part": true,
+                            children: renderTaskPart(part, index, iconRenderer)
+                        }, index))
+                })
+            })
+        ]
+    });
+}
+
+function ContentPartRenderer({ part, iconRenderer, thinkingSectionRenderer, taskSectionRenderer, brainIcon, chevronRightIcon, chevronDownIcon, searchIcon, folderIcon, settingsIcon, wrenchIcon }) {
+    if (!part) return null;
+    const { type, parts = [], ...metadata } = part;
+    switch(type){
+        case 'task-thinking-v1':
+            {
+                const thinkingPart = parts.find((p)=>p.type === 'thinking-end');
+                const ThinkingComponent = thinkingSectionRenderer || ThinkingSection;
+                const [collapsed, setCollapsed] = useState(true);
+                return /*#__PURE__*/ jsx(ThinkingComponent, {
+                    title: "Thought",
+                    duration: thinkingPart?.duration,
+                    thought: thinkingPart?.thought,
+                    collapsed: collapsed,
+                    onCollapse: ()=>setCollapsed(!collapsed),
+                    brainIcon: brainIcon,
+                    chevronRightIcon: chevronRightIcon,
+                    chevronDownIcon: chevronDownIcon
+                });
+            }
+        case 'task-search-web-v1':
+            {
+                const TaskComponent = taskSectionRenderer || TaskSection;
+                const [collapsed, setCollapsed] = useState(true);
+                return /*#__PURE__*/ jsx(TaskComponent, {
+                    title: metadata.taskNameComplete || metadata.taskNameActive,
+                    type: type,
+                    parts: parts,
+                    collapsed: collapsed,
+                    onCollapse: ()=>setCollapsed(!collapsed),
+                    taskIcon: searchIcon,
+                    chevronRightIcon: chevronRightIcon,
+                    chevronDownIcon: chevronDownIcon
+                });
+            }
+        case 'task-search-repo-v1':
+            {
+                const TaskComponent = taskSectionRenderer || TaskSection;
+                const [collapsed, setCollapsed] = useState(true);
+                return /*#__PURE__*/ jsx(TaskComponent, {
+                    title: metadata.taskNameComplete || metadata.taskNameActive,
+                    type: type,
+                    parts: parts,
+                    collapsed: collapsed,
+                    onCollapse: ()=>setCollapsed(!collapsed),
+                    taskIcon: folderIcon,
+                    chevronRightIcon: chevronRightIcon,
+                    chevronDownIcon: chevronDownIcon
+                });
+            }
+        case 'task-diagnostics-v1':
+            {
+                const TaskComponent = taskSectionRenderer || TaskSection;
+                const [collapsed, setCollapsed] = useState(true);
+                return /*#__PURE__*/ jsx(TaskComponent, {
+                    title: metadata.taskNameComplete || metadata.taskNameActive,
+                    type: type,
+                    parts: parts,
+                    collapsed: collapsed,
+                    onCollapse: ()=>setCollapsed(!collapsed),
+                    taskIcon: settingsIcon,
+                    chevronRightIcon: chevronRightIcon,
+                    chevronDownIcon: chevronDownIcon
+                });
+            }
+        case 'task-start-v1':
+            // Usually just indicates task start - can be hidden or show as status
+            return null;
+        default:
+            return /*#__PURE__*/ jsxs("div", {
+                "data-unknown-part-type": type,
+                children: [
+                    "Unknown part type: ",
+                    type
+                ]
+            });
+    }
+}
+
+// Utility function to merge class names
+function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+
+// Helper function to render HTML elements with component or className config
+function renderHtmlElement(tagName, key, props, children, className, componentOrConfig, components) {
+    if (typeof componentOrConfig === 'function') {
+        const Component = componentOrConfig;
+        return /*#__PURE__*/ jsx(Component, {
+            ...props,
+            className: className,
+            children: renderChildren(children, key, components)
+        }, key);
+    } else if (componentOrConfig && typeof componentOrConfig === 'object') {
+        const mergedClassName = cn(className, componentOrConfig.className);
+        return /*#__PURE__*/ React.createElement(tagName, {
+            key,
+            ...props,
+            className: mergedClassName
+        }, renderChildren(children, key, components));
+    } else {
+        return /*#__PURE__*/ React.createElement(tagName, {
+            key,
+            ...props,
+            className
+        }, renderChildren(children, key, components));
+    }
+}
+/**
+ * Core renderer component for v0 Platform API message content
+ */ function MessageImpl({ content, messageId = 'unknown', role: _role = 'assistant', streaming: _streaming = false, isLastMessage: _isLastMessage = false, className, components, renderers }) {
+    if (!Array.isArray(content)) {
+        console.warn('MessageContent: content must be an array (MessageBinaryFormat)');
+        return null;
+    }
+    // Merge components and renderers (backward compatibility)
+    const mergedComponents = {
+        ...components,
+        // Map legacy renderers to new component names
+        ...renderers?.CodeBlock && {
+            CodeBlock: renderers.CodeBlock
+        },
+        ...renderers?.MathRenderer && {
+            MathPart: renderers.MathRenderer
+        },
+        ...renderers?.MathPart && {
+            MathPart: renderers.MathPart
+        },
+        ...renderers?.Icon && {
+            Icon: renderers.Icon
+        }
+    };
+    const elements = content.map(([type, ...data], index)=>{
+        const key = `${messageId}-${index}`;
+        // Markdown/text content (type 0)
+        if (type === 0) {
+            const markdownData = data[0];
+            if (!Array.isArray(markdownData)) {
+                return null;
+            }
+            return /*#__PURE__*/ jsx("div", {
+                children: markdownData.map((item, mdIndex)=>{
+                    const mdKey = `${key}-md-${mdIndex}`;
+                    return renderMarkdownElement(item, mdKey, mergedComponents);
+                })
+            }, key);
+        }
+        // Code block (type 1)
+        if (type === 1) {
+            const [language, code] = data;
+            const CodeBlockComponent = mergedComponents?.CodeBlock || CodeBlock;
+            return /*#__PURE__*/ jsx(CodeBlockComponent, {
+                language: language || 'text',
+                code: code || ''
+            }, key);
+        }
+        // Math (type 2 for inline, type 3 for block)
+        if (type === 2 || type === 3) {
+            const mathContent = data[0] || '';
+            const MathPartComponent = mergedComponents?.MathPart || MathPart;
+            return /*#__PURE__*/ jsx(MathPartComponent, {
+                content: mathContent,
+                inline: type === 2
+            }, key);
+        }
+        // Unknown type - render as text for debugging
+        return /*#__PURE__*/ jsxs("div", {
+            children: [
+                "[Unknown content type: ",
+                type,
+                "]"
+            ]
+        }, key);
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        children: elements
+    });
+}
+function renderMarkdownElement(item, key, components) {
+    if (typeof item === 'string') {
+        return /*#__PURE__*/ jsx("span", {
+            children: item
+        }, key);
+    }
+    if (Array.isArray(item)) {
+        const [tagName, props, ...children] = item;
+        // Handle special v0 Platform API elements
+        if (tagName === 'AssistantMessageContentPart') {
+            return /*#__PURE__*/ jsx(ContentPartRenderer, {
+                part: props.part,
+                iconRenderer: components?.Icon,
+                thinkingSectionRenderer: components?.ThinkingSection,
+                taskSectionRenderer: components?.TaskSection
+            }, key);
+        }
+        if (tagName === 'Codeblock') {
+            const CustomCodeProjectPart = components?.CodeProjectPart;
+            const CodeProjectComponent = CustomCodeProjectPart || CodeProjectPart;
+            return /*#__PURE__*/ jsx(CodeProjectComponent, {
+                language: props.lang,
+                code: children[0],
+                iconRenderer: components?.Icon
+            }, key);
+        }
+        if (tagName === 'text') {
+            return /*#__PURE__*/ jsx("span", {
+                children: children[0]
+            }, key);
+        }
+        // Handle standard markdown elements
+        const className = props?.className;
+        switch(tagName){
+            case 'p':
+                {
+                    const componentOrConfig = components?.p;
+                    if (typeof componentOrConfig === 'function') {
+                        const Component = componentOrConfig;
+                        return /*#__PURE__*/ jsx(Component, {
+                            ...props,
+                            className: className,
+                            children: renderChildren(children, key, components)
+                        }, key);
+                    } else if (componentOrConfig && typeof componentOrConfig === 'object') {
+                        const mergedClassName = cn(className, componentOrConfig.className);
+                        return /*#__PURE__*/ jsx("p", {
+                            ...props,
+                            className: mergedClassName,
+                            children: renderChildren(children, key, components)
+                        }, key);
+                    } else {
+                        return /*#__PURE__*/ jsx("p", {
+                            ...props,
+                            className: className,
+                            children: renderChildren(children, key, components)
+                        }, key);
+                    }
+                }
+            case 'h1':
+                return renderHtmlElement('h1', key, props, children, className, components?.h1, components);
+            case 'h2':
+                return renderHtmlElement('h2', key, props, children, className, components?.h2, components);
+            case 'h3':
+                return renderHtmlElement('h3', key, props, children, className, components?.h3, components);
+            case 'h4':
+                return renderHtmlElement('h4', key, props, children, className, components?.h4, components);
+            case 'h5':
+                return renderHtmlElement('h5', key, props, children, className, components?.h5, components);
+            case 'h6':
+                return renderHtmlElement('h6', key, props, children, className, components?.h6, components);
+            case 'ul':
+                return renderHtmlElement('ul', key, props, children, className, components?.ul, components);
+            case 'ol':
+                return renderHtmlElement('ol', key, props, children, className, components?.ol, components);
+            case 'li':
+                return renderHtmlElement('li', key, props, children, className, components?.li, components);
+            case 'blockquote':
+                return renderHtmlElement('blockquote', key, props, children, className, components?.blockquote, components);
+            case 'code':
+                return renderHtmlElement('code', key, props, children, className, components?.code, components);
+            case 'pre':
+                return renderHtmlElement('pre', key, props, children, className, components?.pre, components);
+            case 'strong':
+                return renderHtmlElement('strong', key, props, children, className, components?.strong, components);
+            case 'em':
+                return renderHtmlElement('em', key, props, children, className, components?.em, components);
+            case 'a':
+                {
+                    const componentOrConfig = components?.a;
+                    if (typeof componentOrConfig === 'function') {
+                        const Component = componentOrConfig;
+                        return /*#__PURE__*/ jsx(Component, {
+                            ...props,
+                            className: className,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            children: renderChildren(children, key, components)
+                        }, key);
+                    } else if (componentOrConfig && typeof componentOrConfig === 'object') {
+                        const mergedClassName = cn(className, componentOrConfig.className);
+                        return /*#__PURE__*/ jsx("a", {
+                            ...props,
+                            className: mergedClassName,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            children: renderChildren(children, key, components)
+                        }, key);
+                    } else {
+                        return /*#__PURE__*/ jsx("a", {
+                            ...props,
+                            className: className,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            children: renderChildren(children, key, components)
+                        }, key);
+                    }
+                }
+            case 'br':
+                return /*#__PURE__*/ jsx("br", {}, key);
+            case 'hr':
+                {
+                    const componentOrConfig = components?.hr;
+                    if (typeof componentOrConfig === 'function') {
+                        const Component = componentOrConfig;
+                        return /*#__PURE__*/ jsx(Component, {
+                            ...props,
+                            className: className
+                        }, key);
+                    } else if (componentOrConfig && typeof componentOrConfig === 'object') {
+                        const mergedClassName = cn(className, componentOrConfig.className);
+                        return /*#__PURE__*/ jsx("hr", {
+                            ...props,
+                            className: mergedClassName
+                        }, key);
+                    } else {
+                        return /*#__PURE__*/ jsx("hr", {
+                            ...props,
+                            className: className
+                        }, key);
+                    }
+                }
+            case 'div':
+                return renderHtmlElement('div', key, props, children, className, components?.div, components);
+            case 'span':
+                return renderHtmlElement('span', key, props, children, className, components?.span, components);
+            default:
+                return /*#__PURE__*/ jsx("span", {
+                    children: renderChildren(children, key, components)
+                }, key);
+        }
+    }
+    return null;
+}
+function renderChildren(children, parentKey, components) {
+    return children.map((child, index)=>{
+        const key = `${parentKey}-child-${index}`;
+        return renderMarkdownElement(child, key, components);
+    }).filter(Boolean);
+}
+/**
+ * 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,
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ */ const Message = /*#__PURE__*/ React.memo(MessageImpl);
+
+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 };