@v0-sdk/react 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -2,30 +2,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var jsondiffpatch = require('jsondiffpatch');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(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__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-            children: children
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    // Simple fallback - just render plain math content
-    const Element = inline ? 'span' : 'div';
-    return /*#__PURE__*/ jsxRuntime.jsx(Element, {
-        className: className,
-        "data-math-inline": inline,
-        children: content
+      }
     });
+  }
+  n.default = e;
+  return n;
 }
 
+var React__default = /*#__PURE__*/_interopDefault(React);
+var jsondiffpatch__namespace = /*#__PURE__*/_interopNamespace(jsondiffpatch);
+
 /**
  * Generic code block component
  * Renders plain code by default - consumers should provide their own styling and highlighting
@@ -530,6 +531,36 @@ function ContentPartRenderer({ part, iconRenderer, thinkingSectionRenderer, task
                     chevronDownIcon: chevronDownIcon
                 });
             }
+        case 'task-read-file-v1':
+            {
+                const TaskComponent = taskSectionRenderer || TaskSection;
+                const [collapsed, setCollapsed] = React.useState(true);
+                return /*#__PURE__*/ jsxRuntime.jsx(TaskComponent, {
+                    title: metadata.taskNameComplete || metadata.taskNameActive || 'Reading file',
+                    type: type,
+                    parts: parts,
+                    collapsed: collapsed,
+                    onCollapse: ()=>setCollapsed(!collapsed),
+                    taskIcon: folderIcon,
+                    chevronRightIcon: chevronRightIcon,
+                    chevronDownIcon: chevronDownIcon
+                });
+            }
+        case 'task-coding-v1':
+            {
+                const TaskComponent = taskSectionRenderer || TaskSection;
+                const [collapsed, setCollapsed] = React.useState(true);
+                return /*#__PURE__*/ jsxRuntime.jsx(TaskComponent, {
+                    title: metadata.taskNameComplete || metadata.taskNameActive || 'Coding',
+                    type: type,
+                    parts: parts,
+                    collapsed: collapsed,
+                    onCollapse: ()=>setCollapsed(!collapsed),
+                    taskIcon: wrenchIcon,
+                    chevronRightIcon: chevronRightIcon,
+                    chevronDownIcon: chevronDownIcon
+                });
+            }
         case 'task-start-v1':
             // Usually just indicates task start - can be hidden or show as status
             return null;
@@ -549,33 +580,8 @@ 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__*/ jsxRuntime.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__default.default.createElement(tagName, {
-            key,
-            ...props,
-            className: mergedClassName
-        }, renderChildren(children, key, components));
-    } else {
-        return /*#__PURE__*/ React__default.default.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 }) {
+// Simplified renderer that matches v0's exact approach
+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;
@@ -597,240 +603,434 @@ function renderHtmlElement(tagName, key, props, children, className, componentOr
             Icon: renderers.Icon
         }
     };
-    const elements = content.map(([type, ...data], index)=>{
+    // Process content exactly like v0's Renderer component
+    const elements = content.map(([type, data], index)=>{
         const key = `${messageId}-${index}`;
-        // Markdown/text content (type 0)
+        // Markdown data (type 0) - this is the main content
         if (type === 0) {
-            const markdownData = data[0];
-            if (!Array.isArray(markdownData)) {
-                return null;
-            }
-            return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                children: markdownData.map((item, mdIndex)=>{
-                    const mdKey = `${key}-md-${mdIndex}`;
-                    return renderMarkdownElement(item, mdKey, mergedComponents);
-                })
+            return /*#__PURE__*/ jsxRuntime.jsx(Elements, {
+                data: data,
+                components: mergedComponents
             }, key);
         }
-        // Code block (type 1)
+        // Metadata (type 1) - extract context but don't render
         if (type === 1) {
-            const [language, code] = data;
-            const CodeBlockComponent = mergedComponents?.CodeBlock || CodeBlock;
-            return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(MathPartComponent, {
-                content: mathContent,
-                inline: type === 2
-            }, key);
+            // In the future, we could extract sources/context here like v0 does
+            // For now, just return null like v0's renderer
+            return null;
         }
-        // Unknown type - render as text for debugging
-        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-            children: [
-                "[Unknown content type: ",
-                type,
-                "]"
-            ]
-        }, key);
+        // Other types - v0 doesn't handle these in the main renderer
+        return null;
     });
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: className,
         children: elements
     });
 }
-function renderMarkdownElement(item, key, components) {
-    if (typeof item === 'string') {
+// This component handles the markdown data array (equivalent to v0's Elements component)
+function Elements({ data, components }) {
+    // Handle case where data might not be an array due to streaming/patching
+    if (!Array.isArray(data)) {
+        return null;
+    }
+    const renderedElements = data.map((item, index)=>{
+        const key = `element-${index}`;
+        return renderElement(item, key, components);
+    }).filter(Boolean) // Filter out null/undefined elements
+    ;
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: renderedElements
+    });
+}
+// Render individual elements (equivalent to v0's element rendering logic)
+function renderElement(element, key, components) {
+    if (typeof element === 'string') {
         return /*#__PURE__*/ jsxRuntime.jsx("span", {
-            children: item
+            children: element
         }, key);
     }
-    if (Array.isArray(item)) {
-        const [tagName, props, ...children] = item;
-        // Handle special v0 Platform API elements
-        if (tagName === 'AssistantMessageContentPart') {
-            return /*#__PURE__*/ jsxRuntime.jsx(ContentPartRenderer, {
-                part: props.part,
-                iconRenderer: components?.Icon,
-                thinkingSectionRenderer: components?.ThinkingSection,
-                taskSectionRenderer: components?.TaskSection
-            }, key);
+    if (!Array.isArray(element)) {
+        return null;
+    }
+    const [tagName, props, ...children] = element;
+    if (!tagName) {
+        return null;
+    }
+    // Handle special v0 Platform API elements
+    if (tagName === 'AssistantMessageContentPart') {
+        return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(CodeProjectComponent, {
+            language: props.lang,
+            code: children[0],
+            iconRenderer: components?.Icon
+        }, key);
+    }
+    if (tagName === 'text') {
+        return /*#__PURE__*/ jsxRuntime.jsx("span", {
+            children: children[0] || ''
+        }, key);
+    }
+    // Render children
+    const renderedChildren = children.map((child, childIndex)=>{
+        const childKey = `${key}-child-${childIndex}`;
+        return renderElement(child, childKey, components);
+    }).filter(Boolean);
+    // Handle standard HTML elements
+    const className = props?.className;
+    const componentOrConfig = components?.[tagName];
+    if (typeof componentOrConfig === 'function') {
+        const Component = componentOrConfig;
+        return /*#__PURE__*/ jsxRuntime.jsx(Component, {
+            ...props,
+            className: className,
+            children: renderedChildren
+        }, key);
+    } else if (componentOrConfig && typeof componentOrConfig === 'object') {
+        const mergedClassName = cn(className, componentOrConfig.className);
+        return /*#__PURE__*/ React__default.default.createElement(tagName, {
+            key,
+            ...props,
+            className: mergedClassName
+        }, renderedChildren);
+    } else {
+        // Default HTML element rendering
+        const elementProps = {
+            key,
+            ...props
+        };
+        if (className) {
+            elementProps.className = className;
         }
-        if (tagName === 'Codeblock') {
-            const CustomCodeProjectPart = components?.CodeProjectPart;
-            const CodeProjectComponent = CustomCodeProjectPart || CodeProjectPart;
-            return /*#__PURE__*/ jsxRuntime.jsx(CodeProjectComponent, {
-                language: props.lang,
-                code: children[0],
-                iconRenderer: components?.Icon
-            }, key);
+        // Special handling for links
+        if (tagName === 'a') {
+            elementProps.target = '_blank';
+            elementProps.rel = 'noopener noreferrer';
         }
-        if (tagName === 'text') {
-            return /*#__PURE__*/ jsxRuntime.jsx("span", {
-                children: children[0]
-            }, key);
+        return /*#__PURE__*/ React__default.default.createElement(tagName, elementProps, renderedChildren);
+    }
+}
+/**
+ * Main component for rendering v0 Platform API message content
+ */ const Message = /*#__PURE__*/ React__default.default.memo(MessageImpl);
+
+const jdf = jsondiffpatch__namespace.create({});
+// Exact copy of the patch function from v0/chat/lib/diffpatch.ts
+function patch(original, delta) {
+    const newObj = jdf.clone(original);
+    // Check for our customized delta
+    if (Array.isArray(delta) && delta[1] === 9 && delta[2] === 9) {
+        // Get the path to the modified element
+        const indexes = delta[0].slice(0, -1);
+        // Get the string to be appended
+        const value = delta[0].slice(-1);
+        let obj = newObj;
+        for (const index of indexes){
+            if (typeof obj[index] === 'string') {
+                obj[index] += value;
+                return newObj;
+            }
+            obj = obj[index];
         }
-        // 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__*/ jsxRuntime.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__*/ jsxRuntime.jsx("p", {
-                            ...props,
-                            className: mergedClassName,
-                            children: renderChildren(children, key, components)
-                        }, key);
-                    } else {
-                        return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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__*/ jsxRuntime.jsx("a", {
-                            ...props,
-                            className: mergedClassName,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            children: renderChildren(children, key, components)
-                        }, key);
-                    } else {
-                        return /*#__PURE__*/ jsxRuntime.jsx("a", {
-                            ...props,
-                            className: className,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            children: renderChildren(children, key, components)
-                        }, key);
+    }
+    // If not custom delta, apply standard jsondiffpatch-ing
+    jdf.patch(newObj, delta);
+    return newObj;
+}
+// Stream state manager - isolated from React lifecycle
+class StreamStateManager {
+    constructor(){
+        this.content = [];
+        this.isStreaming = false;
+        this.isComplete = false;
+        this.callbacks = new Set();
+        this.processedStreams = new WeakSet();
+        this.cachedState = null;
+        this.subscribe = (callback)=>{
+            this.callbacks.add(callback);
+            return ()=>{
+                this.callbacks.delete(callback);
+            };
+        };
+        this.notifySubscribers = ()=>{
+            // Invalidate cached state when state changes
+            this.cachedState = null;
+            this.callbacks.forEach((callback)=>callback());
+        };
+        this.getState = ()=>{
+            // Return cached state to prevent infinite re-renders
+            if (this.cachedState === null) {
+                this.cachedState = {
+                    content: this.content,
+                    isStreaming: this.isStreaming,
+                    error: this.error,
+                    isComplete: this.isComplete
+                };
+            }
+            return this.cachedState;
+        };
+        this.processStream = async (stream, options = {})=>{
+            // Prevent processing the same stream multiple times
+            if (this.processedStreams.has(stream)) {
+                console.log('Stream already processed, skipping');
+                return;
+            }
+            // Handle locked streams gracefully
+            if (stream.locked) {
+                console.warn('Stream is locked, cannot process');
+                return;
+            }
+            this.processedStreams.add(stream);
+            this.reset();
+            this.setStreaming(true);
+            try {
+                await this.readStream(stream, options);
+            } catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Unknown streaming error';
+                this.setError(errorMessage);
+                options.onError?.(errorMessage);
+            } finally{
+                this.setStreaming(false);
+            }
+        };
+        this.reset = ()=>{
+            this.content = [];
+            this.isStreaming = false;
+            this.error = undefined;
+            this.isComplete = false;
+            this.notifySubscribers();
+        };
+        this.setStreaming = (streaming)=>{
+            this.isStreaming = streaming;
+            this.notifySubscribers();
+        };
+        this.setError = (error)=>{
+            this.error = error;
+            this.notifySubscribers();
+        };
+        this.setComplete = (complete)=>{
+            this.isComplete = complete;
+            this.notifySubscribers();
+        };
+        this.updateContent = (newContent)=>{
+            this.content = [
+                ...newContent
+            ];
+            this.notifySubscribers();
+        };
+        this.readStream = async (stream, options)=>{
+            const reader = stream.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            let currentContent = [];
+            try {
+                while(true){
+                    const { done, value } = await reader.read();
+                    if (done) {
+                        console.log('Stream reading completed');
+                        break;
                     }
-                }
-            case 'br':
-                return /*#__PURE__*/ jsxRuntime.jsx("br", {}, key);
-            case 'hr':
-                {
-                    const componentOrConfig = components?.hr;
-                    if (typeof componentOrConfig === 'function') {
-                        const Component = componentOrConfig;
-                        return /*#__PURE__*/ jsxRuntime.jsx(Component, {
-                            ...props,
-                            className: className
-                        }, key);
-                    } else if (componentOrConfig && typeof componentOrConfig === 'object') {
-                        const mergedClassName = cn(className, componentOrConfig.className);
-                        return /*#__PURE__*/ jsxRuntime.jsx("hr", {
-                            ...props,
-                            className: mergedClassName
-                        }, key);
-                    } else {
-                        return /*#__PURE__*/ jsxRuntime.jsx("hr", {
-                            ...props,
-                            className: className
-                        }, key);
+                    const chunk = decoder.decode(value, {
+                        stream: true
+                    });
+                    console.log('Received raw chunk:', chunk);
+                    buffer += chunk;
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop() || '';
+                    for (const line of lines){
+                        if (line.trim() === '') {
+                            continue;
+                        }
+                        console.log('Processing line:', line);
+                        // Handle SSE format (data: ...)
+                        let jsonData;
+                        if (line.startsWith('data: ')) {
+                            jsonData = line.slice(6); // Remove "data: " prefix
+                            if (jsonData === '[DONE]') {
+                                console.log('Stream marked as done via SSE');
+                                this.setComplete(true);
+                                options.onComplete?.(currentContent);
+                                return;
+                            }
+                        } else {
+                            // Handle raw JSON lines (fallback)
+                            jsonData = line;
+                        }
+                        try {
+                            // Parse the JSON data
+                            const parsedData = JSON.parse(jsonData);
+                            console.log('Parsed data:', JSON.stringify(parsedData, null, 2));
+                            // Handle v0 streaming format
+                            if (parsedData.type === 'connected') {
+                                console.log('Stream connected');
+                                continue;
+                            } else if (parsedData.type === 'done') {
+                                console.log('Stream marked as done');
+                                this.setComplete(true);
+                                options.onComplete?.(currentContent);
+                                return;
+                            } else if (parsedData.object === 'chat' && parsedData.id) {
+                                // Handle the initial chat data message
+                                console.log('Received chat data:', parsedData.id);
+                                options.onChatData?.(parsedData);
+                                continue;
+                            } else if (parsedData.delta) {
+                                // Apply the delta using jsondiffpatch
+                                console.log('Applying delta to content:', JSON.stringify(currentContent, null, 2));
+                                console.log('Delta:', JSON.stringify(parsedData.delta, null, 2));
+                                const patchedContent = patch(currentContent, parsedData.delta);
+                                currentContent = Array.isArray(patchedContent) ? patchedContent : [];
+                                console.log('Patched content result:', JSON.stringify(currentContent, null, 2));
+                                this.updateContent(currentContent);
+                                options.onChunk?.(currentContent);
+                            }
+                        } catch (e) {
+                            console.warn('Failed to parse streaming data:', line, e);
+                        }
                     }
                 }
-            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__*/ jsxRuntime.jsx("span", {
-                    children: renderChildren(children, key, components)
-                }, key);
-        }
+                this.setComplete(true);
+                options.onComplete?.(currentContent);
+            } finally{
+                reader.releaseLock();
+            }
+        };
     }
-    return null;
 }
-function renderChildren(children, parentKey, components) {
-    return children.map((child, index)=>{
-        const key = `${parentKey}-child-${index}`;
-        return renderMarkdownElement(child, key, components);
-    }).filter(Boolean);
+/**
+ * Hook for handling streaming message content from v0 API using useSyncExternalStore
+ */ function useStreamingMessage(stream, options = {}) {
+    // Create a stable stream manager instance
+    const managerRef = React.useRef(null);
+    if (!managerRef.current) {
+        managerRef.current = new StreamStateManager();
+    }
+    const manager = managerRef.current;
+    // Subscribe to state changes using useSyncExternalStore
+    const state = React.useSyncExternalStore(manager.subscribe, manager.getState, manager.getState);
+    // Process stream when it changes
+    const lastStreamRef = React.useRef(null);
+    if (stream !== lastStreamRef.current) {
+        lastStreamRef.current = stream;
+        if (stream) {
+            console.log('New stream detected, starting processing');
+            manager.processStream(stream, options);
+        }
+    }
+    return state;
 }
+
 /**
- * Main component for rendering v0 Platform API message content
+ * Component for rendering streaming message content from v0 API
  *
  * @example
  * ```tsx
- * import { Message } from '@v0-sdk/react'
+ * import { v0 } from 'v0-sdk'
+ * import { StreamingMessage } from '@v0-sdk/react'
+ *
+ * function ChatDemo() {
+ *   const [stream, setStream] = useState<ReadableStream<Uint8Array> | null>(null)
  *
- * function MyComponent({ apiResponse }) {
- *   const content = JSON.parse(apiResponse.content)
+ *   const handleSubmit = async () => {
+ *     const response = await v0.chats.create({
+ *       message: 'Create a button component',
+ *       responseMode: 'experimental_stream'
+ *     })
+ *     setStream(response)
+ *   }
  *
  *   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,
- *       }}
- *     />
+ *     <div>
+ *       <button onClick={handleSubmit}>Send Message</button>
+ *       {stream && (
+ *         <StreamingMessage
+ *           stream={stream}
+ *           messageId="demo-message"
+ *           role="assistant"
+ *           onComplete={(content) => console.log('Stream complete:', content)}
+ *           onChatData={(chatData) => console.log('Chat created:', chatData.id)}
+ *         />
+ *       )}
+ *     </div>
  *   )
  * }
  * ```
- */ const Message = /*#__PURE__*/ React__default.default.memo(MessageImpl);
+ */ function StreamingMessage({ stream, showLoadingIndicator = true, loadingComponent, errorComponent, onChunk, onComplete, onError, onChatData, ...messageProps }) {
+    const { content, isStreaming, error, isComplete } = useStreamingMessage(stream, {
+        onChunk,
+        onComplete,
+        onError,
+        onChatData
+    });
+    // Handle error state
+    if (error) {
+        if (errorComponent) {
+            return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+                children: errorComponent(error)
+            });
+        }
+        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "text-red-500 p-4 border border-red-200 rounded",
+            children: [
+                "Error: ",
+                error
+            ]
+        });
+    }
+    // Handle loading state
+    if (showLoadingIndicator && isStreaming && content.length === 0) {
+        if (loadingComponent) {
+            return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+                children: loadingComponent
+            });
+        }
+        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "flex items-center space-x-2 text-gray-500",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "animate-spin h-4 w-4 border-2 border-gray-300 border-t-gray-600 rounded-full"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                    children: "Loading..."
+                })
+            ]
+        });
+    }
+    // Render the message content
+    return /*#__PURE__*/ jsxRuntime.jsx(Message, {
+        ...messageProps,
+        content: content,
+        streaming: isStreaming,
+        isLastMessage: true
+    });
+}
+
+/**
+ * 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__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: children
+        });
+    }
+    // Simple fallback - just render plain math content
+    const Element = inline ? 'span' : 'div';
+    return /*#__PURE__*/ jsxRuntime.jsx(Element, {
+        className: className,
+        "data-math-inline": inline,
+        children: content
+    });
+}
 
 exports.AssistantMessageContentPart = ContentPartRenderer;
 exports.CodeBlock = CodeBlock;
@@ -843,6 +1043,8 @@ exports.MathRenderer = MathPart;
 exports.Message = Message;
 exports.MessageContent = Message;
 exports.MessageRenderer = Message;
+exports.StreamingMessage = StreamingMessage;
 exports.TaskSection = TaskSection;
 exports.ThinkingSection = ThinkingSection;
 exports.V0MessageRenderer = Message;
+exports.useStreamingMessage = useStreamingMessage;