@dust-tt/sparkle 0.2.638-rc-1 → 0.2.638

package/dist/esm/stories/StreamingMarkdown.stories.js

@@ -1,620 +0,0 @@
-import { __assign, __read } from "tslib";
-import React from "react";
-import { visit } from "unist-util-visit";
-import { Markdown, StreamingMarkdown } from "../index_with_tw_base";
-var CitationsContext = React.createContext({
-    references: {},
-    updateActiveReferences: function () { return null; },
-});
-function CiteBlock(props) {
-    var _a = React.useContext(CitationsContext), references = _a.references, updateActiveReferences = _a.updateActiveReferences;
-    var refs = props.references
-        ? JSON.parse(props.references).filter(function (r) { return r.ref in references; })
-        : undefined;
-    React.useEffect(function () {
-        if (refs) {
-            refs.forEach(function (r) {
-                var document = references[r.ref];
-                updateActiveReferences(document, r.counter);
-            });
-        }
-    }, [refs, references, updateActiveReferences]);
-    if (!refs || refs.length === 0) {
-        return null;
-    }
-    return (React.createElement("sup", null, refs.map(function (r, idx) {
-        var _a;
-        return (React.createElement("span", { key: r.ref },
-            React.createElement("span", { className: "s-inline-flex s-h-4 s-w-4 s-cursor-pointer s-items-center s-justify-center s-rounded-full s-bg-primary-600 s-text-xs s-font-medium s-text-primary-200 dark:s-bg-primary-600-night dark:s-text-primary-200-night", title: (_a = references[r.ref]) === null || _a === void 0 ? void 0 : _a.title }, r.counter),
-            idx < refs.length - 1 && ","));
-    })));
-}
-// Mock MentionBlock component for Storybook
-function MentionBlock(_a) {
-    var agentName = _a.agentName, agentSId = _a.agentSId, onClick = _a.onClick;
-    return (React.createElement("span", { className: "s-inline-block s-cursor-pointer s-font-medium s-text-highlight dark:s-text-highlight-night", onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(agentSId); } },
-        "@",
-        agentName));
-}
-// Mock directive functions for Storybook
-function getCiteDirective() {
-    return function () {
-        var refCounter = 1;
-        var refSeen = {};
-        return function (tree) {
-            visit(tree, ["textDirective"], function (node) {
-                var _a, _b;
-                if (node.name === "cite" && ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.value)) {
-                    var references = (_b = node.children[0]) === null || _b === void 0 ? void 0 : _b.value.split(",").map(function (ref) { return ({
-                        counter: refSeen[ref] || (refSeen[ref] = refCounter++),
-                        ref: ref,
-                    }); });
-                    node.data = node.data || {};
-                    node.data.hName = "sup";
-                    node.data.hProperties = { references: JSON.stringify(references) };
-                }
-            });
-        };
-    };
-}
-function getMentionDirective() {
-    return function () { return function (tree) {
-        visit(tree, ["textDirective"], function (node) {
-            var _a, _b;
-            if (node.name === "mention" && ((_a = node.children) === null || _a === void 0 ? void 0 : _a[0])) {
-                node.data = node.data || {};
-                node.data.hName = "mention";
-                node.data.hProperties = {
-                    agentSId: (_b = node.attributes) === null || _b === void 0 ? void 0 : _b.sId,
-                    agentName: node.children[0].value,
-                };
-            }
-        });
-    }; };
-}
-var meta = {
-    title: "Components/StreamingMarkdown",
-    component: StreamingMarkdown,
-    parameters: {
-        layout: "padded",
-        docs: {
-            description: {
-                component: "Streaming-aware Markdown that animates only newly appended text.",
-            },
-        },
-    },
-    argTypes: {
-        animationName: { control: "text" },
-        animationDuration: { control: "text" },
-        animationTimingFunction: { control: "text" },
-        animationCurve: {
-            control: "select",
-            options: ["linear", "accelerate", "accelerate-fast", "custom"],
-            description: "Animation curve type for opacity transition",
-        },
-    },
-    args: {
-        animationDuration: "600ms",
-        animationTimingFunction: "ease-out",
-        animationCurve: "linear",
-    },
-};
-export default meta;
-export var AnimationCurveComparison = {
-    parameters: {
-        docs: {
-            description: {
-                story: "Compare different animation curves for the fade-in effect. Accelerate curves start slower and speed up, reducing the time spent at low opacity.",
-            },
-        },
-    },
-    render: function (args) {
-        var testContent = "This text demonstrates different animation curves. Notice how the **accelerate** curve starts slowly then speeds up, spending less time at low opacity levels. The *accelerate-fast* option is even more aggressive, quickly jumping to higher opacity values.";
-        var _a = __read(React.useState(0), 2), restart = _a[0], setRestart = _a[1];
-        return (React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 24 } },
-            React.createElement("button", { onClick: function () { return setRestart(function (r) { return r + 1; }); }, style: {
-                    width: "fit-content",
-                    padding: "8px 16px",
-                    borderRadius: 6,
-                    border: "1px solid #ddd",
-                    background: "#f7f7f7",
-                    cursor: "pointer",
-                } }, "\uD83D\uDD04 Restart Animations"),
-            React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 } },
-                React.createElement("div", { style: { border: "1px solid #ddd", padding: 16, borderRadius: 8 } },
-                    React.createElement("h3", { style: { marginTop: 0, color: "#666" } }, "Linear (Default)"),
-                    React.createElement(StreamingMarkdown, __assign({ key: "linear-".concat(restart) }, args, { content: testContent, animationCurve: "linear", animationDuration: "4000ms" }))),
-                React.createElement("div", { style: { border: "1px solid #ddd", padding: 16, borderRadius: 8 } },
-                    React.createElement("h3", { style: { marginTop: 0, color: "#666" } }, "Accelerate (Slow start)"),
-                    React.createElement(StreamingMarkdown, __assign({ key: "accelerate-".concat(restart) }, args, { content: testContent, animationCurve: "accelerate", animationDuration: "4000ms" }))),
-                React.createElement("div", { style: { border: "1px solid #ddd", padding: 16, borderRadius: 8 } },
-                    React.createElement("h3", { style: { marginTop: 0, color: "#666" } }, "Accelerate Fast"),
-                    React.createElement(StreamingMarkdown, __assign({ key: "accelerate-fast-".concat(restart) }, args, { content: testContent, animationCurve: "accelerate-fast", animationDuration: "4000ms" }))),
-                React.createElement("div", { style: { border: "1px solid #ddd", padding: 16, borderRadius: 8 } },
-                    React.createElement("h3", { style: { marginTop: 0, color: "#666" } }, "Short Duration (600ms)"),
-                    React.createElement(StreamingMarkdown, __assign({ key: "short-".concat(restart) }, args, { content: testContent, animationCurve: "accelerate", animationDuration: "600ms" }))))));
-    },
-};
-export var MathStreamingTest = {
-    parameters: {
-        docs: {
-            description: {
-                story: "Test that block math does not block streaming of subsequent content.",
-            },
-        },
-    },
-    render: function (args) {
-        var testContent = "# Math Streaming Test\n\nThis text should appear and animate immediately.\n\n## Block Math Below\n\nThe following block math should not prevent the text after it from streaming:\n\n$$\n\\begin{align}\nE &= mc^2 \\\\\nF &= ma \\\\\n\\nabla \\cdot \\vec{E} &= \\frac{\\rho}{\\epsilon_0}\n\\end{align}\n$$\n\n## Text After Math\n\nThis text should stream in smoothly even while the math block above is incomplete.\n\nHere's some inline math too: $a^2 + b^2 = c^2$ which should also stream properly.\n\n### More Content\n\n- List item 1\n- List item 2 with **bold**\n- List item 3 with `code`\n\nThe streaming should work continuously throughout.";
-        var _a = __read(React.useState(""), 2), content = _a[0], setContent = _a[1];
-        var _b = __read(React.useState(false), 2), isStreaming = _b[0], setIsStreaming = _b[1];
-        var startStreaming = function () {
-            setContent("");
-            setIsStreaming(true);
-            var i = 0;
-            var chunkSize = 5; // Small chunks to see the effect clearly
-            var interval = setInterval(function () {
-                if (i >= testContent.length) {
-                    clearInterval(interval);
-                    setIsStreaming(false);
-                    return;
-                }
-                var next = testContent.slice(i, i + chunkSize);
-                i += chunkSize;
-                setContent(function (prev) { return prev + next; });
-            }, 50);
-        };
-        return (React.createElement("div", null,
-            React.createElement("div", { style: { marginBottom: 20 } },
-                React.createElement("button", { onClick: startStreaming, style: {
-                        padding: "8px 16px",
-                        borderRadius: 4,
-                        border: "1px solid #ccc",
-                        cursor: "pointer",
-                    } }, "Start Streaming"),
-                React.createElement("span", { style: { marginLeft: 10 } }, isStreaming ? "🔴 Streaming..." : "⭐ Ready")),
-            React.createElement("div", { style: { border: "1px solid #ddd", padding: 20, borderRadius: 8 } },
-                React.createElement(StreamingMarkdown, __assign({}, args, { content: content }))),
-            React.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "#666" } },
-                "Content length: ",
-                content.length,
-                " / ",
-                testContent.length)));
-    },
-};
-export var StaticVsStreaming = {
-    parameters: {
-        docs: {
-            description: {
-                story: "Compare static and streaming rendering side by side.",
-            },
-        },
-    },
-    render: function (args) {
-        var sampleContent = "\n## Comparison Demo\n\n### Math Example\nEinstein's famous equation: $E = mc^2$\n\n### Citations\nThis is referenced material :cite[r1] with multiple sources :cite[r2,r3].\n\n### Task List\n- [x] Completed task\n- [ ] Pending task\n- [ ] Another pending task\n\n### Mentions\nPing :mention[assistant]{sId:bot-1} for help.\n";
-        return (React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 } },
-            React.createElement("div", null,
-                React.createElement("h3", null, "Static (isStreaming=false)"),
-                React.createElement(CitationsContext.Provider, { value: {
-                        references: mockReferences,
-                        updateActiveReferences: function () { },
-                    } },
-                    React.createElement(StreamingMarkdown, __assign({}, args, { content: sampleContent, isStreaming: false, additionalMarkdownComponents: {
-                            sup: CiteBlock,
-                            mention: MentionBlock,
-                        }, additionalMarkdownPlugins: [
-                            getCiteDirective(),
-                            getMentionDirective(),
-                        ] })))),
-            React.createElement("div", null,
-                React.createElement("h3", null, "Streaming (isStreaming=true)"),
-                React.createElement(CitationsContext.Provider, { value: {
-                        references: mockReferences,
-                        updateActiveReferences: function () { },
-                    } },
-                    React.createElement(StreamingMarkdown, __assign({}, args, { content: sampleContent, isStreaming: true, additionalMarkdownComponents: {
-                            sup: CiteBlock,
-                            mention: MentionBlock,
-                        }, additionalMarkdownPlugins: [
-                            getCiteDirective(),
-                            getMentionDirective(),
-                        ] }))))));
-    },
-};
-// Utility: simple seeded RNG for reproducible chunk sizes
-function makeRng(seed) {
-    var s = seed >>> 0;
-    return function () {
-        // xorshift32
-        s ^= s << 13;
-        s ^= s >>> 17;
-        s ^= s << 5;
-        return ((s >>> 0) % 10000) / 10000;
-    };
-}
-var ADVANCED_MD = "# \uD83D\uDE80 Enhanced Streaming Markdown Demo\n\nThis document demonstrates **all new features** including directives, math, and citations.\n\n## \uD83D\uDD22 Math Support\n\n### Inline Math\n\nThe quadratic formula is $ax^2 + bx + c = 0$ and its solution is $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$.\n\n### Block Math\n\n$$\n\\begin{align}\n\\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac{1}{c}\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} &= \\frac{4\\pi}{c}\\vec{\\mathbf{j}} \\\\\n\\nabla \\cdot \\vec{\\mathbf{E}} &= 4 \\pi \\rho \\\\\n\\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac{1}{c}\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} &= \\vec{\\mathbf{0}} \\\\\n\\nabla \\cdot \\vec{\\mathbf{B}} &= 0\n\\end{align}\n$$\n\n## \uD83D\uDCDA Citations and References\n\nAccording to recent research :cite[r1], streaming markdown improves user experience. Further studies :cite[r2,r3] confirm these findings.\n\nThe implementation details :cite[r1] show significant performance gains, especially when combined with modern React patterns :cite[r2].\n\n## \uD83D\uDCAC Mentions\n\nYou can mention agents like :mention[assistant]{sId:assistant-123} or :mention[helper]{sId:helper-456} directly in the text.\n\n## \u2705 Task Lists\n\n- [ ] Implement streaming support\n- [x] Add directive system\n- [x] Support math rendering\n- [ ] Add custom visualizations\n  - [x] Basic charts\n  - [ ] Interactive graphs\n- [x] Test all features\n";
-var LONG_MD = "# \uD83D\uDE80 Comprehensive Streaming Markdown Demo\n\nWelcome to the **complete showcase** of our streaming markdown renderer! This document demonstrates *every* supported feature with rich examples.\n\n## \uD83D\uDCD6 Long Form Content\n\nThe streaming markdown renderer excels at displaying long-form content with smooth, progressive animation. As you read this paragraph, notice how the text appears naturally, character by character, creating a dynamic reading experience. This first paragraph contains **bold text**, *italicized content*, and even `inline code` to demonstrate that formatting is preserved throughout the streaming process. The animation maintains readability while adding visual interest, making it perfect for displaying AI-generated responses, real-time documentation, or any content that benefits from a progressive reveal. Whether you're building a chatbot interface, a documentation system, or an interactive tutorial, the streaming effect helps guide the reader's attention and creates a sense of immediacy and engagement with the content.\n\nFurthermore, the streaming system handles complex markdown structures with ease. This second lengthy paragraph showcases how the renderer maintains performance even with dense content that includes multiple formatting styles. Consider how ***combined bold and italic text*** flows seamlessly alongside regular prose, and how [links to external resources](https://example.com) appear without interrupting the animation flow. The system is intelligent enough to handle edge cases like `multiple` instances of `inline code` within the same sentence, or even ~~strikethrough text that has been deprecated~~. The streaming animation respects word boundaries, ensuring that text remains readable throughout the animation process. This is particularly important for accessibility, as users can still read and comprehend the content even while it's being streamed in, without experiencing jarring visual artifacts or layout shifts that might disturb the reading experience.\n\nFinally, this third substantial paragraph demonstrates the renderer's ability to handle technical content with precision. When dealing with mathematical expressions like $E = mc^2$ or more complex formulas such as $\\int_{0}^{\\infty} e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$, the streaming animation gracefully incorporates these elements without breaking the flow. The renderer also excels at presenting mixed content types within a single paragraph, seamlessly transitioning between regular text, **formatted sections**, [hyperlinks with descriptive text](https://github.com), and technical notations. This capability makes it ideal for educational content, technical documentation, or any scenario where rich, formatted text needs to be presented progressively. The underlying architecture ensures that even as content streams in, all interactive elements remain functional, links remain clickable, and the overall document structure remains intact and navigable throughout the entire streaming process.\n\n## \uD83D\uDCDD Text Formatting\n\nThis paragraph demonstrates basic text with **bold emphasis**, *italic text*, ***bold italic combination***, and `inline code snippets`. We can also use ~~strikethrough text~~ and combine multiple styles for ***`formatted code`*** within emphasis.\n\n## \uD83E\uDDEE Mathematical Expressions\n\n### Inline Math\n\nThe quadratic formula is $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$, which gives us the roots of a quadratic equation. We can also write simple expressions like $e^{i\\pi} + 1 = 0$ (Euler's identity) or $\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$ inline with text.\n\n### Block Math\n\nHere's the famous Gaussian integral:\n\n$$\n\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}\n$$\n\nAnd Maxwell's equations in differential form:\n\n$$\n\\begin{align}\n\\nabla \\cdot \\vec{E} &= \\frac{\\rho}{\\epsilon_0} \\\\\n\\nabla \\cdot \\vec{B} &= 0 \\\\\n\\nabla \\times \\vec{E} &= -\\frac{\\partial \\vec{B}}{\\partial t} \\\\\n\\nabla \\times \\vec{B} &= \\mu_0 \\vec{J} + \\mu_0 \\epsilon_0 \\frac{\\partial \\vec{E}}{\\partial t}\n\\end{align}\n$$\n\nMatrix multiplication example:\n\n$$\n\\begin{bmatrix}\na & b \\\\\nc & d\n\\end{bmatrix}\n\\begin{bmatrix}\nx \\\\\ny\n\\end{bmatrix}\n=\n\\begin{bmatrix}\nax + by \\\\\ncx + dy\n\\end{bmatrix}\n$$\n\n## \uD83C\uDFAF Custom Directives\n\n### Citations\n\nHere's a statement with a citation :cite[r1], and another with multiple citations :cite[r2,r3]. These custom directives demonstrate how we can extend the markdown syntax with domain-specific features :cite[r1].\n\n### Mentions\n\nYou can mention agents like :mention[dust]{sId=\"assistant\"} or :mention[gpt4]{sId=\"gpt4-helper\"} in your text. These mentions are interactive and can trigger actions when clicked.\n\n### Links and References\n\nHere are different types of links:\n- [External link to Dust](https://dust.tt)\n- [Link with title](https://github.com \"Visit GitHub\")\n- Direct URL: https://example.com\n- Reference-style link: [Dust Platform][dust-ref]\n\n[dust-ref]: https://dust.tt \"Dust - AI Platform\"\n\n## \uD83D\uDCCB Lists Showcase\n\n### Unordered Lists with Nesting\n\n- First level item with regular text\n- Second item with **bold** and *italic* formatting\n  - Nested item 2.1 with `inline code`\n  - Nested item 2.2 with a [link](https://example.com)\n    - Deep nesting level 3.1\n    - Deep nesting level 3.2 with ***combined formatting***\n  - Back to level 2\n- Back to first level\n- Another first level item with multiple lines of text that demonstrates how longer content wraps properly in list items\n\n### Ordered Lists\n\n1. First ordered item\n2. Second item with **emphasis**\n   1. Nested ordered 2.1\n   2. Nested ordered 2.2\n      1. Deep nested 2.2.1\n      2. Deep nested 2.2.2\n   3. Nested ordered 2.3\n3. Third item with mixed content\n4. Fourth item\n\n### Mixed Lists\n\n1. Ordered at top level\n   - Unordered nested under ordered\n   - Another unordered item\n     1. Ordered under unordered\n     2. Second ordered item\n2. Back to top level ordered\n   - Another mixed nested list\n     - Deeper unordered\n       1. Even deeper ordered\n\n### Task Lists\n\n- [ ] Unchecked task item\n- [x] Completed task item\n- [ ] Task with **formatted text**\n  - [x] Nested completed task\n  - [ ] Nested incomplete task\n\n## \uD83D\uDCBB Code Blocks\n\n### Inline Code\n\nHere's some `inline code` in the middle of a sentence, and `const x = 42` with actual code.\n\n### JavaScript/TypeScript\n\n```javascript\n// Fibonacci sequence generator\nfunction* fibonacci() {\n  let [a, b] = [0, 1];\n  while (true) {\n    yield a;\n    [a, b] = [b, a + b];\n  }\n}\n\n// Usage example\nconst fib = fibonacci();\nfor (let i = 0; i < 10; i++) {\n  console.log(`F(${i}) = ${fib.next().value}`);\n}\n```\n\n### Python\n\n```python\n# Python example with classes\nclass DataProcessor:\n    def __init__(self, data):\n        self.data = data\n        self.processed = False\n\n    def process(self):\n        \"\"\"Process the data with transformations\"\"\"\n        if not self.processed:\n            self.data = [x * 2 for x in self.data if x > 0]\n            self.processed = True\n        return self.data\n\n# Usage\nprocessor = DataProcessor([1, -2, 3, 4, -5])\nresult = processor.process()\nprint(f\"Processed: {result}\")\n```\n\n### React Component (JSX)\n\n```jsx\nimport React, { useState, useEffect } from 'react';\n\nconst StreamingDemo = ({ content }) => {\n  const [displayText, setDisplayText] = useState('');\n\n  useEffect(() => {\n    let index = 0;\n    const timer = setInterval(() => {\n      if (index < content.length) {\n        setDisplayText(content.slice(0, ++index));\n      } else {\n        clearInterval(timer);\n      }\n    }, 50);\n\n    return () => clearInterval(timer);\n  }, [content]);\n\n  return (\n    <div className=\"streaming-text\">\n      {displayText}\n    </div>\n  );\n};\n\nexport default StreamingDemo;\n```\n\n### Shell/Bash\n\n```bash\n#!/bin/bash\n\n# System information script\necho \"System Information\"\necho \"==================\"\necho \"Hostname: $(hostname)\"\necho \"OS: $(uname -s)\"\necho \"Kernel: $(uname -r)\"\necho \"CPU: $(sysctl -n machdep.cpu.brand_string 2>/dev/null || lscpu | grep 'Model name')\"\necho \"Memory: $(free -h 2>/dev/null || vm_stat | grep 'Pages free')\"\necho \"Disk Usage:\"\ndf -h | head -5\n```\n\n### JSON\n\n```json\n{\n  \"name\": \"streaming-markdown\",\n  \"version\": \"1.0.0\",\n  \"features\": {\n    \"streaming\": true,\n    \"syntaxHighlight\": true,\n    \"animations\": {\n      \"fadeIn\": \"600ms\",\n      \"timing\": \"ease-out\"\n    }\n  },\n  \"supported\": [\"lists\", \"code\", \"tables\", \"images\", \"math\", \"directives\"]\n}\n```\n\n### Mermaid Diagram\n\n```mermaid\ngraph TD\n    A[Start] --> B{Is Streaming?}\n    B -->|Yes| C[Stream Characters]\n    B -->|No| D[Render Static]\n    C --> E[Apply Animation]\n    E --> F[Display Content]\n    D --> F\n    F --> G[End]\n\n    style A fill:#f9f,stroke:#333,stroke-width:2px\n    style G fill:#9f9,stroke:#333,stroke-width:2px\n    style C fill:#bbf,stroke:#333,stroke-width:2px\n```\n\n### CSV Data (Downloadable)\n\n```csv\nName,Department,Score,Status\nAlice Johnson,Engineering,95,Active\nBob Smith,Marketing,87,Active\nCharlie Brown,Sales,92,Active\nDiana Prince,HR,88,Active\nEve Adams,Engineering,91,Active\n```\n\n## \uD83D\uDCCA Tables\n\n### Basic Table\n\n| Feature | Status | Priority | Notes |\n|---------|--------|----------|-------|\n| Streaming | \u2705 Done | High | Core functionality |\n| Lists | \u2705 Done | High | With nesting support |\n| Code blocks | \u2705 Done | Medium | With syntax highlighting |\n| Tables | \u2705 Done | Low | Basic support |\n| Images | \u2705 Done | Low | With loading animation |\n\n### Complex Table with Formatting\n\n| Language | **Typing** | *Performance* | `hello()` | Rating |\n|----------|------------|---------------|-------------|--------|\n| TypeScript | Static | \u26A1 Fast | `console.log` | \u2B50\u2B50\u2B50\u2B50\u2B50 |\n| Python | Dynamic | \uD83D\uDC22 Moderate | `print()` | \u2B50\u2B50\u2B50\u2B50 |\n| Rust | Static | \uD83D\uDE80 Very Fast | `println!` | \u2B50\u2B50\u2B50\u2B50\u2B50 |\n| Ruby | Dynamic | \uD83D\uDC0C Slow | `puts` | \u2B50\u2B50\u2B50 |\n\n## \uD83C\uDFA8 Blockquotes\n\n> This is a simple blockquote with a single paragraph.\n\n> ### Blockquote with Heading\n>\n> This blockquote contains multiple elements:\n> - A list item\n> - Another item with **bold text**\n>\n> And even a code block:\n> ```js\n> const quote = \"Nested code in quote\";\n> ```\n\n> > Nested blockquotes are also supported\n> > > And can go multiple levels deep\n> > > > Even deeper if needed\n\n## \uD83D\uDDBC\uFE0F Images\n\n### Single Image\n\n![Sample Image](https://via.placeholder.com/600x300/4A90E2/FFFFFF?text=Streaming+Markdown)\n\n### Multiple Images\n\n![Small Image 1](https://via.placeholder.com/200x150/E94B3C/FFFFFF?text=Image+1)\n![Small Image 2](https://via.placeholder.com/200x150/6DBD28/FFFFFF?text=Image+2)\n![Small Image 3](https://via.placeholder.com/200x150/F39C12/FFFFFF?text=Image+3)\n\n## \uD83D\uDD24 Special Characters & Emojis\n\nSpecial characters: & < > \" ' \u00A9 \u00AE \u2122 \u20AC \u00A3 \u00A5 \u00B0 \u00B1 \u00D7 \u00F7 \u2264 \u2265 \u2260\n\nMath symbols: \u2211 \u220F \u222B \u221A \u221E \u03B1 \u03B2 \u03B3 \u03B4 \u03B5 \u03B8 \u03BB \u03BC \u03C0 \u03C3 \u03C6 \u03C9\n\nEmojis: \uD83D\uDE00 \uD83C\uDF89 \uD83D\uDE80 \uD83D\uDCBB \uD83D\uDCF1 \uD83C\uDF1F \u26A1 \uD83D\uDD25 \uD83D\uDCA1 \uD83C\uDFA8 \uD83C\uDFC6 \u2705 \u274C \u26A0\uFE0F \uD83D\uDCDD\n\n## \u2796 Horizontal Rules\n\nAbove this line\n\n---\n\nBetween these lines\n\n***\n\nAnother separator\n\n___\n\nBelow this line\n\n## \uD83D\uDD04 Escaping & Special Cases\n\nEscaping special characters: \\*not italic\\*, \\**not bold\\**, \\[not a link\\](url)\n\nHTML entities: &lt;tag&gt; &amp; &quot;quotes&quot; &apos;apostrophe&apos;\n\nPreserving spacing:    Multiple    spaces    between    words\n\n## \uD83C\uDFAF Advanced Combinations\n\n### List with Everything\n\n1. **First item** with [a link](https://example.com) and `code`\n   - Nested with *italic* and ~~strikethrough~~\n   - Another with emoji \uD83C\uDF89 and **bold**\n     1. Deep ordered with `code block`:\n        ```js\n        const nested = true;\n        ```\n     2. And an image:\n        ![Tiny](https://via.placeholder.com/100x50)\n   - Back to unordered\n2. Second main item with a table:\n\n   | Col1 | Col2 |\n   |------|------|\n   | A    | B    |\n\n3. Third item with blockquote:\n   > Quoted text in a list\n\n## \uD83D\uDCDA Long Prose Section\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. **Sed do eiusmod** tempor incididunt ut labore et dolore magna aliqua. *Ut enim ad minim veniam*, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\nDuis aute irure dolor in ***reprehenderit in voluptate*** velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. This demonstrates how longer paragraphs stream in naturally, maintaining readability while the content appears progressively.\n\n### Technical Documentation Style\n\nThe `StreamingMarkdown` component accepts the following props:\n\n- `content` (string, required): The markdown content to render\n- `animationName` (string, optional): CSS animation name for streaming effect\n- `animationDuration` (string, optional): Duration of the fade-in animation\n- `animationTimingFunction` (string, optional): CSS timing function\n- `codeStyle` (object, optional): Syntax highlighting theme\n\n## \uD83C\uDFAC Conclusion\n\nThis comprehensive demo showcases **all supported markdown features** in our streaming renderer:\n\n1. \u2705 Text formatting and emphasis\n2. \u2705 Multiple list types with deep nesting\n3. \u2705 Code blocks with syntax highlighting\n4. \u2705 Tables with complex content\n5. \u2705 Blockquotes with nesting\n6. \u2705 Images with loading animations\n7. \u2705 Links and references\n8. \u2705 Special characters and emojis\n9. \u2705 Horizontal rules\n10. \u2705 Mixed and nested content\n\nThe streaming animation ensures a smooth, progressive reveal of content while maintaining full markdown compatibility.\n\n---\n\n*Thank you for exploring our streaming markdown renderer!* \uD83C\uDF89";
-var mockReferences = {
-    r1: {
-        title: "Streaming Markdown Performance Study",
-        href: "https://example.com/study1",
-        authors: ["John Doe", "Jane Smith"],
-        year: 2024,
-    },
-    r2: {
-        title: "React Patterns for Real-time UIs",
-        href: "https://example.com/study2",
-        authors: ["Alice Johnson"],
-        year: 2023,
-    },
-    r3: {
-        title: "User Experience in AI Interfaces",
-        href: "https://example.com/study3",
-        authors: ["Bob Wilson", "Carol White"],
-        year: 2024,
-    },
-};
-export var EnhancedFeaturesDemo = {
-    parameters: {
-        docs: {
-            description: {
-                story: "Demonstrates new features: math rendering, citations, mentions, task lists, and custom directives.",
-            },
-        },
-    },
-    render: function (args) {
-        var _a = __read(React.useState(""), 2), content = _a[0], setContent = _a[1];
-        var _b = __read(React.useState(0), 2), restart = _b[0], setRestart = _b[1];
-        var _c = args, _d = _c.streamingSpeedMs, streamingSpeedMs = _d === void 0 ? 30 : _d, _e = _c.chunkMin, chunkMin = _e === void 0 ? 10 : _e, _f = _c.chunkMax, chunkMax = _f === void 0 ? 50 : _f, _g = _c.seed, seed = _g === void 0 ? 42 : _g;
-        React.useEffect(function () {
-            var full = ADVANCED_MD.trim();
-            setContent("");
-            var i = 0;
-            var rand = makeRng(Number(seed) || 42);
-            var min = Math.max(1, Number(chunkMin) || 1);
-            var max = Math.max(min, Number(chunkMax) || min);
-            var step = Math.max(10, Number(streamingSpeedMs) || 30);
-            var id = setInterval(function () {
-                if (i >= full.length) {
-                    clearInterval(id);
-                    return;
-                }
-                var r = rand();
-                var size = Math.floor(min + r * (max - min));
-                var next = full.slice(i, i + size);
-                i += size;
-                setContent(function (c) { return c + next; });
-            }, step);
-            return function () { return clearInterval(id); };
-        }, [streamingSpeedMs, chunkMin, chunkMax, seed, restart]);
-        var handleMentionClick = React.useCallback(function (agentSId) {
-            console.log("Mention clicked:", agentSId);
-            alert("Clicked mention: ".concat(agentSId));
-        }, []);
-        var citationsContextValue = React.useMemo(function () { return ({
-            references: mockReferences,
-            updateActiveReferences: function (doc, index) {
-                console.log("Citation active:", doc.title, index);
-            },
-        }); }, []);
-        var additionalComponents = React.useMemo(function () { return ({
-            sup: CiteBlock,
-            mention: function (props) { return (React.createElement(MentionBlock, { agentName: props.agentName, agentSId: props.agentSId, onClick: handleMentionClick })); },
-        }); }, [handleMentionClick]);
-        var additionalPlugins = React.useMemo(function () { return [getCiteDirective(), getMentionDirective()]; }, []);
-        return (React.createElement("div", { style: { display: "grid", gap: 12 } },
-            React.createElement("div", null,
-                React.createElement("button", { type: "button", onClick: function () { return setRestart(function (r) { return r + 1; }); }, style: {
-                        padding: "6px 10px",
-                        borderRadius: 6,
-                        border: "1px solid var(--sb-border, #ddd)",
-                        background: "var(--sb-bg, #f7f7f7)",
-                        cursor: "pointer",
-                    } }, "Restart Streaming")),
-            React.createElement(CitationsContext.Provider, { value: citationsContextValue },
-                React.createElement(StreamingMarkdown, __assign({ key: restart }, args, { content: content, isStreaming: true, additionalMarkdownComponents: additionalComponents, additionalMarkdownPlugins: additionalPlugins })))));
-    },
-    args: {
-        streamingSpeedMs: 30,
-        chunkMin: 10,
-        chunkMax: 50,
-        seed: 42,
-    },
-    argTypes: {
-        streamingSpeedMs: {
-            control: { type: "range", min: 10, max: 500, step: 10 },
-            description: "Speed of streaming (ms between chunks)",
-        },
-        chunkMin: {
-            control: { type: "range", min: 1, max: 50, step: 1 },
-            description: "Minimum chunk size",
-        },
-        chunkMax: {
-            control: { type: "range", min: 10, max: 200, step: 5 },
-            description: "Maximum chunk size",
-        },
-        seed: {
-            control: { type: "number" },
-            description: "Random seed",
-        },
-        isStreaming: {
-            control: "boolean",
-            description: "Enable streaming animations",
-        },
-    },
-};
-export var ComprehensiveDemo = {
-    parameters: {
-        docs: {
-            description: {
-                story: "Complete demonstration of all supported markdown features with streaming animation. Includes text formatting, lists (nested, ordered, unordered), code blocks with syntax highlighting, tables, blockquotes, images, links, special characters, emojis, and more.",
-            },
-        },
-    },
-    render: function (args) {
-        var _a = __read(React.useState(""), 2), content = _a[0], setContent = _a[1];
-        var _b = __read(React.useState(0), 2), restart = _b[0], setRestart = _b[1];
-        var _c = args, _d = _c.streamingSpeedMs, streamingSpeedMs = _d === void 0 ? 50 : _d, _e = _c.chunkMin, chunkMin = _e === void 0 ? 15 : _e, _f = _c.chunkMax, chunkMax = _f === void 0 ? 80 : _f, _g = _c.seed, seed = _g === void 0 ? 42 : _g;
-        React.useEffect(function () {
-            var full = LONG_MD.trim();
-            setContent("");
-            var i = 0;
-            var rand = makeRng(Number(seed) || 42);
-            var min = Math.max(1, Number(chunkMin) || 1);
-            var max = Math.max(min, Number(chunkMax) || min);
-            var step = Math.max(10, Number(streamingSpeedMs) || 120);
-            var id = setInterval(function () {
-                if (i >= full.length) {
-                    clearInterval(id);
-                    return;
-                }
-                // Pick a variable chunk size between [min, max]
-                var r = rand();
-                var size = Math.floor(min + r * (max - min));
-                var next = full.slice(i, i + size);
-                i += size;
-                setContent(function (c) { return c + next; });
-            }, step);
-            return function () { return clearInterval(id); };
-        }, [streamingSpeedMs, chunkMin, chunkMax, seed, restart]);
-        return (React.createElement("div", { style: { display: "grid", gap: 12 } },
-            React.createElement("div", null,
-                React.createElement("button", { type: "button", onClick: function () {
-                        setRestart(function (r) { return r + 1; });
-                    }, style: {
-                        padding: "6px 10px",
-                        borderRadius: 6,
-                        border: "1px solid var(--sb-border, #ddd)",
-                        background: "var(--sb-bg, #f7f7f7)",
-                        cursor: "pointer",
-                    } }, "Restart Streaming")),
-            React.createElement(StreamingMarkdown, __assign({ key: restart }, args, { content: content }))));
-    },
-    args: {
-        streamingSpeedMs: 50,
-        chunkMin: 15,
-        chunkMax: 80,
-        seed: 42,
-    },
-    argTypes: {
-        streamingSpeedMs: {
-            control: { type: "range", min: 10, max: 500, step: 10 },
-            description: "Speed of streaming (ms between chunks)",
-        },
-        chunkMin: {
-            control: { type: "range", min: 1, max: 50, step: 1 },
-            description: "Minimum chunk size",
-        },
-        chunkMax: {
-            control: { type: "range", min: 10, max: 200, step: 5 },
-            description: "Maximum chunk size",
-        },
-        seed: {
-            control: { type: "number" },
-            description: "Random seed",
-        },
-    },
-};
-export var StreamingVsProductionComparison = {
-    parameters: {
-        docs: {
-            description: {
-                story: "Side-by-side comparison of the new StreamingMarkdown component with the current production Markdown component, showing the same comprehensive content with streaming animation.",
-            },
-        },
-    },
-    render: function (args) {
-        var _a = __read(React.useState(""), 2), content = _a[0], setContent = _a[1];
-        var _b = __read(React.useState(0), 2), restart = _b[0], setRestart = _b[1];
-        var _c = args, _d = _c.streamingSpeedMs, streamingSpeedMs = _d === void 0 ? 30 : _d, _e = _c.chunkMin, chunkMin = _e === void 0 ? 10 : _e, _f = _c.chunkMax, chunkMax = _f === void 0 ? 50 : _f, _g = _c.seed, seed = _g === void 0 ? 42 : _g;
-        React.useEffect(function () {
-            var full = LONG_MD.trim();
-            setContent("");
-            var i = 0;
-            var rand = makeRng(Number(seed) || 42);
-            var min = Math.max(1, Number(chunkMin) || 1);
-            var max = Math.max(min, Number(chunkMax) || min);
-            var step = Math.max(10, Number(streamingSpeedMs) || 120);
-            var id = setInterval(function () {
-                if (i >= full.length) {
-                    clearInterval(id);
-                    return;
-                }
-                // Pick a variable chunk size between [min, max]
-                var r = rand();
-                var size = Math.floor(min + r * (max - min));
-                var next = full.slice(i, i + size);
-                i += size;
-                setContent(function (c) { return c + next; });
-            }, step);
-            return function () { return clearInterval(id); };
-        }, [streamingSpeedMs, chunkMin, chunkMax, seed, restart]);
-        var handleMentionClick = React.useCallback(function (agentSId) {
-            console.log("Mention clicked:", agentSId);
-            alert("Clicked mention: ".concat(agentSId));
-        }, []);
-        var citationsContextValue = React.useMemo(function () { return ({
-            references: mockReferences,
-            updateActiveReferences: function (doc, index) {
-                console.log("Citation active:", doc.title, index);
-            },
-        }); }, []);
-        var additionalComponents = React.useMemo(function () { return ({
-            sup: CiteBlock,
-            mention: function (props) { return (React.createElement(MentionBlock, { agentName: props.agentName, agentSId: props.agentSId, onClick: handleMentionClick })); },
-        }); }, [handleMentionClick]);
-        var additionalPlugins = React.useMemo(function () { return [getCiteDirective(), getMentionDirective()]; }, []);
-        // Determine if content is still streaming
-        var isStillStreaming = content.length < LONG_MD.trim().length;
-        return (React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 20 } },
-            React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
-                React.createElement("button", { type: "button", onClick: function () { return setRestart(function (r) { return r + 1; }); }, style: {
-                        padding: "8px 16px",
-                        borderRadius: 6,
-                        border: "1px solid var(--sb-border, #ddd)",
-                        background: "var(--sb-bg, #f7f7f7)",
-                        cursor: "pointer",
-                        fontWeight: 500,
-                    } }, "\uD83D\uDD04 Restart Streaming"),
-                React.createElement("span", { style: {
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: 6,
-                        padding: "4px 10px",
-                        borderRadius: 20,
-                        background: isStillStreaming ? "#fef3c7" : "#d1fae5",
-                        color: isStillStreaming ? "#92400e" : "#065f46",
-                        fontSize: 14,
-                        fontWeight: 500,
-                    } }, isStillStreaming ? (React.createElement(React.Fragment, null,
-                    React.createElement("span", { style: {
-                            display: "inline-block",
-                            width: 8,
-                            height: 8,
-                            borderRadius: "50%",
-                            background: "#f59e0b",
-                            animation: "pulse 1.5s infinite",
-                        } }),
-                    "Streaming...",
-                    " ",
-                    Math.round((content.length / LONG_MD.trim().length) * 100),
-                    "%")) : (React.createElement(React.Fragment, null,
-                    React.createElement("span", { style: {
-                            display: "inline-block",
-                            width: 8,
-                            height: 8,
-                            borderRadius: "50%",
-                            background: "#10b981",
-                        } }),
-                    "Complete")))),
-            React.createElement("div", { style: {
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr",
-                    gap: 20,
-                    minHeight: 600,
-                } },
-                React.createElement("div", { style: {
-                        border: "2px solid #3b82f6",
-                        borderRadius: 8,
-                        padding: 16,
-                        background: "var(--sb-bg-secondary, #fafafa)",
-                        position: "relative",
-                        overflow: "auto",
-                    } },
-                    React.createElement("div", { style: {
-                            position: "sticky",
-                            top: -16,
-                            background: "var(--sb-bg-secondary, #fafafa)",
-                            padding: "8px 0 12px",
-                            marginTop: -8,
-                            marginBottom: 16,
-                            borderBottom: "1px solid #e5e7eb",
-                            zIndex: 10,
-                        } },
-                        React.createElement("h3", { style: {
-                                margin: 0,
-                                color: "#3b82f6",
-                                fontSize: 16,
-                                fontWeight: 600,
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 8,
-                            } },
-                            "\u2728 NEW: StreamingMarkdown",
-                            isStillStreaming && (React.createElement("span", { style: {
-                                    fontSize: 12,
-                                    background: "#3b82f6",
-                                    color: "white",
-                                    padding: "2px 8px",
-                                    borderRadius: 12,
-                                } }, "with animation"))),
-                        React.createElement("p", { style: { margin: "4px 0 0", fontSize: 12, color: "#6b7280" } }, "Token-based streaming with character animation")),
-                    React.createElement(CitationsContext.Provider, { value: citationsContextValue },
-                        React.createElement(StreamingMarkdown, __assign({ key: "streaming-".concat(restart) }, args, { content: content, isStreaming: isStillStreaming, additionalMarkdownComponents: additionalComponents, additionalMarkdownPlugins: additionalPlugins })))),
-                React.createElement("div", { style: {
-                        border: "2px solid #6b7280",
-                        borderRadius: 8,
-                        padding: 16,
-                        background: "var(--sb-bg-secondary, #fafafa)",
-                        position: "relative",
-                        overflow: "auto",
-                    } },
-                    React.createElement("div", { style: {
-                            position: "sticky",
-                            top: -16,
-                            background: "var(--sb-bg-secondary, #fafafa)",
-                            padding: "8px 0 12px",
-                            marginTop: -8,
-                            marginBottom: 16,
-                            borderBottom: "1px solid #e5e7eb",
-                            zIndex: 10,
-                        } },
-                        React.createElement("h3", { style: {
-                                margin: 0,
-                                color: "#6b7280",
-                                fontSize: 16,
-                                fontWeight: 600,
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 8,
-                            } },
-                            "\uD83D\uDCCB CURRENT: Production Markdown",
-                            isStillStreaming && (React.createElement("span", { style: {
-                                    fontSize: 12,
-                                    background: "#6b7280",
-                                    color: "white",
-                                    padding: "2px 8px",
-                                    borderRadius: 12,
-                                } },
-                                "isStreaming=",
-                                isStillStreaming))),
-                        React.createElement("p", { style: { margin: "4px 0 0", fontSize: 12, color: "#6b7280" } }, "Currently used in production for agent messages")),
-                    React.createElement(CitationsContext.Provider, { value: citationsContextValue },
-                        React.createElement(Markdown, { key: "production-".concat(restart), content: content, isStreaming: isStillStreaming, additionalMarkdownComponents: additionalComponents, additionalMarkdownPlugins: additionalPlugins })))),
-            React.createElement("style", null, "\n          @keyframes pulse {\n            0%, 100% { opacity: 1; }\n            50% { opacity: 0.5; }\n          }\n        ")));
-    },
-    args: {
-        streamingSpeedMs: 30,
-        chunkMin: 10,
-        chunkMax: 50,
-        seed: 42,
-    },
-    argTypes: {
-        streamingSpeedMs: {
-            control: { type: "range", min: 10, max: 500, step: 10 },
-            description: "Speed of streaming (ms between chunks)",
-        },
-        chunkMin: {
-            control: { type: "range", min: 1, max: 50, step: 1 },
-            description: "Minimum chunk size",
-        },
-        chunkMax: {
-            control: { type: "range", min: 10, max: 200, step: 5 },
-            description: "Maximum chunk size",
-        },
-        seed: {
-            control: { type: "number" },
-            description: "Random seed for chunk sizes",
-        },
-    },
-};
-//# sourceMappingURL=StreamingMarkdown.stories.js.map