{
  "name": "StreamingText",
  "category": "AI",
  "subcategory": null,
  "description": "Token-by-token streaming text renderer for AI responses.",
  "thumbnail": "/preview-cards/streaming-text.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/StreamingText/StreamingText.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "StreamingText",
    "category": "AI",
    "subcategory": null,
    "description": "Token-by-token streaming text renderer for AI responses.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/StreamingText/StreamingText.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Text",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "IsStreaming",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Prose",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-foreground"
    ],
    "examples": [
      {
        "title": "Static Text",
        "code": "<StreamingText Text=\"Blazor is a framework for building interactive web UIs using C# instead of JavaScript.\" IsStreaming=\"false\" />"
      },
      {
        "title": "Streaming Simulation",
        "code": "<StreamingText Text=\"@_text\" IsStreaming=\"@_streaming\" />\n\n@code {\n    private string _text = string.Empty;\n    private bool _streaming;\n\n    // Update _text incrementally as tokens arrive from your AI API\n}"
      },
      {
        "title": "With Blinking Cursor While Streaming",
        "code": "<StreamingText Text=\"@_text\" IsStreaming=\"@_streaming\" />\n<!-- IsStreaming=true shows a blinking cursor at the end -->\n<!-- Set IsStreaming=false when the response is complete -->"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "streaming-text",
  "docsUrl": "https://lumeo.nativ.sh/components/streaming-text",
  "sourceUrl": [
    {
      "file": "UI/StreamingText/StreamingText.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/StreamingText/StreamingText.razor"
    }
  ],
  "source": [
    {
      "path": "UI/StreamingText/StreamingText.razor",
      "content": "@namespace Lumeo\n\n<span class=\"@RootClass\" @attributes=\"AdditionalAttributes\">\n    @if (!string.IsNullOrEmpty(_alreadyRendered))\n    {\n        <span>@_alreadyRendered</span>\n    }\n    @if (!string.IsNullOrEmpty(_newSuffix))\n    {\n        <span class=\"animate-in fade-in duration-200\">@_newSuffix</span>\n    }\n    @if (IsStreaming)\n    {\n        <span class=\"ml-0.5 inline-block align-baseline bg-current animate-pulse\" style=\"width: 2px; height: 1em;\">&nbsp;</span>\n    }\n</span>\n\n@code {\n    [Parameter] public string? Text { get; set; }\n    [Parameter] public bool IsStreaming { get; set; }\n    [Parameter] public bool Prose { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string _alreadyRendered = string.Empty;\n    private string _newSuffix = string.Empty;\n    private int _previousLength;\n\n    private string RootClass =>\n        $\"{(Prose ? \"prose prose-sm max-w-none \" : string.Empty)}whitespace-pre-wrap break-words text-foreground {Class}\".Trim();\n\n    protected override void OnParametersSet()\n    {\n        var text = Text ?? string.Empty;\n        if (text.Length >= _previousLength)\n        {\n            _alreadyRendered = text.Substring(0, _previousLength);\n            _newSuffix = text.Substring(_previousLength);\n        }\n        else\n        {\n            // Text shrank or was replaced — reset the diff window entirely.\n            _alreadyRendered = text;\n            _newSuffix = string.Empty;\n        }\n        _previousLength = text.Length;\n    }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/StreamingText/StreamingTextTests.cs"
  ],
  "mdSummary": "# StreamingText\n\nToken-by-token streaming text renderer for AI responses.\n\n**Package:** `Lumeo` · **Category:** AI\n**Docs:** https://lumeo.nativ.sh/components/streaming-text\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| StreamingText | Text | `string?` | `` |  |\n| StreamingText | IsStreaming | `bool` | `` |  |\n| StreamingText | Prose | `bool` | `` |  |\n| StreamingText | Class | `string?` | `` |  |\n| StreamingText | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<StreamingText />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/StreamingText/StreamingText.razor`\n"
}