{
  "name": "ReasoningDisplay",
  "category": "AI",
  "subcategory": null,
  "description": "Collapsible chain-of-thought block for AI reasoning traces.",
  "thumbnail": "/preview-cards/reasoning-display.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/ReasoningDisplay/ReasoningDisplay.razor"
  ],
  "dependencies": [
    "icon"
  ],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "ReasoningDisplay",
    "category": "AI",
    "subcategory": null,
    "description": "Collapsible chain-of-thought block for AI reasoning traces.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/ReasoningDisplay/ReasoningDisplay.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": "Summary",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "DurationMs",
        "type": "long?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "DefaultOpen",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "ReasoningSize",
        "default": "ReasoningSize.Medium",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Variant",
        "type": "ReasoningVariant",
        "default": "ReasoningVariant.Default",
        "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": [
      {
        "name": "ReasoningSize",
        "values": [
          "Small",
          "Medium",
          "Large"
        ],
        "description": null
      },
      {
        "name": "ReasoningVariant",
        "values": [
          "Default",
          "Compact",
          "Detailed"
        ],
        "description": "Default = standard expand/collapse display. Compact = summary label + collapsed body limited to 3 lines. Detailed = always shows full body text with extra padding."
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic",
        "code": "<ReasoningDisplay Text=\"@_reasoningText\" Summary=\"Reasoning\" />"
      },
      {
        "title": "With Duration",
        "code": "<ReasoningDisplay Text=\"@_reasoningText\" DurationMs=\"4200\" />"
      },
      {
        "title": "Streaming State",
        "code": "<ReasoningDisplay Text=\"@_partialText\" IsStreaming=\"@_streaming\" DefaultOpen=\"true\" />\n\n@code {\n    private string _partialText = string.Empty;\n    private bool _streaming;\n}"
      },
      {
        "title": "Open by Default",
        "code": "<ReasoningDisplay Text=\"@_reasoningText\" DefaultOpen=\"true\" Summary=\"Chain of thought\" />"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "reasoning-display",
  "docsUrl": "https://lumeo.nativ.sh/components/reasoning-display",
  "sourceUrl": [
    {
      "file": "UI/ReasoningDisplay/ReasoningDisplay.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/ReasoningDisplay/ReasoningDisplay.razor"
    }
  ],
  "source": [
    {
      "path": "UI/ReasoningDisplay/ReasoningDisplay.razor",
      "content": "@namespace Lumeo\n\n<details class=\"@RootClass\" open=\"@DefaultOpen\" @attributes=\"AdditionalAttributes\">\n    <summary class=\"@SummaryClass\">\n        <span class=\"inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-muted-foreground transition-transform duration-150 [details[open]_&]:rotate-90\">\n            <Icon Name=\"ChevronRight\" Size=\"Icon.IconSize.Sm\" />\n        </span>\n        <span class=\"italic text-muted-foreground\">@ResolvedSummary</span>\n        @if (IsStreaming)\n        {\n            <span class=\"inline-flex items-center\">\n                <span class=\"h-1 w-1 rounded-full bg-muted-foreground animate-pulse\"></span>\n            </span>\n        }\n    </summary>\n\n    <div class=\"@BodyClass\">\n        <p class=\"m-0 whitespace-pre-wrap break-words\">@Text</p>\n    </div>\n</details>\n\n@code {\n    [Parameter] public string? Text { get; set; }\n    [Parameter] public bool IsStreaming { get; set; }\n    [Parameter] public string? Summary { get; set; }\n    [Parameter] public long? DurationMs { get; set; }\n    [Parameter] public bool DefaultOpen { get; set; }\n    [Parameter] public ReasoningSize Size { get; set; } = ReasoningSize.Medium;\n    [Parameter] public ReasoningVariant Variant { get; set; } = ReasoningVariant.Default;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string RootClass => $\"w-full min-w-0 max-w-full overflow-hidden {VariantRootClass} {Class}\".Trim();\n\n    private string VariantRootClass => Variant switch\n    {\n        ReasoningVariant.Compact => \"opacity-80\",\n        ReasoningVariant.Detailed => \"space-y-1\",\n        _ => \"\"\n    };\n\n    private string SummaryClass => Size switch\n    {\n        ReasoningSize.Small =>\n            \"flex cursor-pointer list-none items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors select-none [&::-webkit-details-marker]:hidden\",\n        ReasoningSize.Large =>\n            \"flex cursor-pointer list-none items-center gap-2.5 text-sm text-muted-foreground hover:text-foreground transition-colors select-none [&::-webkit-details-marker]:hidden\",\n        _ =>\n            \"flex cursor-pointer list-none items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors select-none [&::-webkit-details-marker]:hidden\"\n    };\n\n    private string BodyClass\n    {\n        get\n        {\n            // ml-1 adds breathing room between the rotated chevron column and the rule,\n            // pl-4 puts enough gap between the rule and the reasoning text.\n            var sizeClass = Size switch\n            {\n                ReasoningSize.Small => \"mt-1.5 ml-1 border-l-2 border-border pl-3 py-0.5 text-[11px] leading-relaxed text-muted-foreground\",\n                ReasoningSize.Large => \"mt-2.5 ml-1 border-l-2 border-border pl-5 py-1.5 text-sm leading-relaxed text-muted-foreground\",\n                _ => \"mt-2 ml-1 border-l-2 border-border pl-4 py-1 text-xs leading-relaxed text-muted-foreground\"\n            };\n            // Detailed variant shows full untruncated text; compact variant limits visible lines\n            var variantExtra = Variant switch\n            {\n                ReasoningVariant.Compact => \" line-clamp-3\",\n                ReasoningVariant.Detailed => \"\",\n                _ => \"\"\n            };\n            var baseClass = $\"{sizeClass}{variantExtra}\";\n            return IsStreaming ? $\"{baseClass} animate-pulse\" : baseClass;\n        }\n    }\n\n    private string ResolvedSummary\n    {\n        get\n        {\n            if (!string.IsNullOrEmpty(Summary)) return Summary!;\n            if (DurationMs is long ms) return $\"Reasoned for {ms / 1000.0:0.#}s\";\n            return IsStreaming ? \"Thinking…\" : \"Reasoning\";\n        }\n    }\n\n    public enum ReasoningSize { Small, Medium, Large }\n    /// <summary>\n    /// Default = standard expand/collapse display.\n    /// Compact = summary label + collapsed body limited to 3 lines.\n    /// Detailed = always shows full body text with extra padding.\n    /// </summary>\n    public enum ReasoningVariant { Default, Compact, Detailed }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "Icon",
      "reason": "used internally"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/ReasoningDisplay/ReasoningDisplayTests.cs"
  ],
  "mdSummary": "# ReasoningDisplay\n\nCollapsible chain-of-thought block for AI reasoning traces.\n\n**Package:** `Lumeo` · **Category:** AI\n**Docs:** https://lumeo.nativ.sh/components/reasoning-display\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| ReasoningDisplay | Text | `string?` | `` |  |\n| ReasoningDisplay | IsStreaming | `bool` | `` |  |\n| ReasoningDisplay | Summary | `string?` | `` |  |\n| ReasoningDisplay | DurationMs | `long?` | `` |  |\n| ReasoningDisplay | DefaultOpen | `bool` | `` |  |\n| ReasoningDisplay | Size | `ReasoningSize` | `ReasoningSize.Medium` |  |\n| ReasoningDisplay | Variant | `ReasoningVariant` | `ReasoningVariant.Default` |  |\n| ReasoningDisplay | Class | `string?` | `` |  |\n| ReasoningDisplay | 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<ReasoningDisplay />\n```\n\n## CSS variables\n`--color-border`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/ReasoningDisplay/ReasoningDisplay.razor`\n"
}