How to Use Demo Pages

Purpose

Gives a quick path to the right live demo page before diving into individual component sections.

How to implement

<BuzzList Items="@_guideDemoPageTips" Ordered="false" />

Parameters to consider and effects

• /demo: overview hub with links to all focused demos.
• /demo-inputs: form controls and field-level AI behavior.
• /demo-feedback: alerts, banners, toasts, and summaries.
• /demo-workflow: command palette, ranges, and SmartTable analysis.
• /demo-marketing: hero, pricing, carousel, and auth shell.

Example usage (actual component)

• Start at /demo to choose a focused walkthrough.
• Use /demo-inputs for text, select, date, and checkbox patterns.
• Use /demo-feedback for alert/banner/toast behavior and card summaries.
• Use /demo-workflow for command palette, date ranges, and SmartTable AI insights.
• Use /demo-marketing for hero, pricing, carousel, and auth shell examples.

Code used to display the component

<BuzzList Items="@_guideDemoPageTips" Ordered="false" />

AI Context Model (Seed + Live Memory)

Purpose

Delivers meaningful AI output from first deployment by combining baseline seed knowledge with progressively learned user memory.

How to implement

{
  "Buzz": {
    "EnableAiContextEnrichment": true,
    "EnableSeedKnowledgeBootstrap": true,
    "SeedKnowledgeFilePath": "seed/buzz-seed-knowledge.json",
    "SeedKnowledgeMaxMatchesPerRequest": 4,
    "UserMemoryMaxMatchesPerRequest": 5,
    "EnableSeedKnowledgeWarmupOnStartup": true,
    "AiMaxPromptCharacters": 1800,
    "AiMaxUserInputCharacters": 350,
    "AiMaxRequestsPerDay": 400,
    "AiBudgetExceededBehavior": "fallback-mock",
    "OpenAI": {
      "MaxOutputTokens": 220,
      "Temperature": 0.2
    }
  }
}

Parameters to consider and effects

• EnableAiContextEnrichment: composes AI prompts from developer context, seed entries, and live memory.
• EnableSeedKnowledgeBootstrap: turns on seed lookup for cold-start quality.
• SeedKnowledgeFilePath: path to shipped JSON knowledge entries.
• AiMaxPromptCharacters + AiMaxUserInputCharacters: reduce token usage by bounding prompt/input size.
• AiMaxRequestsPerDay + AiBudgetExceededBehavior: enforce daily budget with optional mock fallback.
• OpenAI:MaxOutputTokens + OpenAI:Temperature: cap completion size and control output verbosity.
• AiContextSubject (component parameter): routes each request into the right domain memory bucket.
• User/session memory naturally gains precedence over baseline defaults as usage grows.

Example usage (actual component)

{
  "subject": "sprint-planner",
  "component": "BuzzFormAssistant",
  "title": "Sprint priority policy",
  "text": "High-priority items due within 48 hours should be surfaced as top focus.",
  "tags": ["priority", "deadline", "risk"]
}

Code used to display the component

<BuzzCodeBlock Title="Seed knowledge entry" Language="json" Code="@_guideSeedKnowledgeSnippet" ShowLineNumbers="false" EnableCopyButton="true" />

BuzzButton

Purpose

Provides a consistent action button with variants, sizes, and loading state.

How to implement

<BuzzButton
    Text="Primary Action"
    Variant="primary"
    Size="md"
    ButtonType="button"
    Icon="save"
    Disabled="false"
    Loading="false"
    OnClick="OnGuideButtonClick" />

Parameters to consider and effects

• Variant: controls visual style (primary, secondary, outline, danger).
• Loading: disables click and shows spinner.
• OnClick: event callback for action handling.

Example usage (actual component)

Click count: 0

Code used to display the component

<BuzzButton Text="Guide Primary Action" Variant="primary" OnClick="OnGuideButtonClick" />

@code {
    private int _guideButtonClicks;

    private Task OnGuideButtonClick()
    {
        _guideButtonClicks++;
        return Task.CompletedTask;
    }
}

BuzzBadge

Purpose

Displays compact status labels for quick state recognition.

How to implement

<BuzzBadge Text="Open" Variant="info" />

Parameters to consider and effects

• Text: badge label content.
• Variant: state color (neutral, info, success, warning, danger).

Example usage (actual component)

Code used to display the component

<BuzzStack Direction="horizontal" Gap="0.4rem" Wrap="true">
    <BuzzBadge Text="Open" Variant="info" />
    <BuzzBadge Text="Resolved" Variant="success" />
    <BuzzBadge Text="Blocked" Variant="danger" />
</BuzzStack>

BuzzDivider

Purpose

Separates content blocks with subtle or strong visual lines.

How to implement

<BuzzDivider Variant="default" />

Parameters to consider and effects

• Variant: adjusts visual weight (default, strong, subtle).

Example usage (actual component)

Code used to display the component

<BuzzDivider Variant="default" />
<BuzzDivider Variant="strong" />

BuzzStack

Purpose

Provides a lightweight flex layout primitive for vertical or horizontal item grouping.

How to implement

<BuzzStack
    Label="Inline status group"
    Direction="horizontal"
    Align="center"
    Justify="start"
    Gap="0.5rem"
    Wrap="true">
    ...
</BuzzStack>

Parameters to consider and effects

• Direction: vertical or horizontal layout.
• Gap: spacing between items.
• Wrap: allows items to wrap to next line in horizontal mode.

Example usage (actual component)

Code used to display the component

<BuzzStack Direction="horizontal" Gap="0.45rem" Wrap="true" Align="center">
    <BuzzBadge Text="A" />
    <BuzzBadge Text="B" />
    <BuzzBadge Text="C" />
</BuzzStack>

BuzzAvatar

Purpose

Shows identity initials or profile image with optional presence status.

How to implement

<BuzzAvatar
    Name="Case Owner"
    ImageUrl=""
    Size="md"
    Shape="circle"
    Variant="accent"
    ShowStatusDot="true"
    Status="online" />

Parameters to consider and effects

• Name: drives displayed initials when no image is provided.
• Size: sm, md, lg.
• Status: status dot style (online, offline, busy).

Example usage (actual component)

Code used to display the component

<BuzzStack Direction="horizontal" Gap="0.55rem" Align="center">
    <BuzzAvatar Name="Case Owner" Variant="accent" ShowStatusDot="true" Status="online" />
    <BuzzAvatar Name="Security Reviewer" Variant="neutral" ShowStatusDot="true" Status="busy" />
    <BuzzAvatar Name="Audit" Size="sm" Shape="rounded" />
</BuzzStack>

BuzzChip

Purpose

Shows compact tags for filters, metadata, and removable states.

How to implement

<BuzzChip
    Text="Priority P2"
    Variant="accent"
    LeadingIcon="tag"
    Removable="true"
    Disabled="false"
    OnClick="OnGuideChipClick"
    OnRemove="OnGuideChipRemove" />

Parameters to consider and effects

• Variant: neutral, accent, success, warning, danger.
• Removable: enables close action for dynamic tag sets.
• OnRemove: callback used for removing the chip from state.

Example usage (actual component)

Code used to display the component

<BuzzStack Direction="horizontal" Gap="0.35rem" Wrap="true">
    @foreach (var chip in _guideChips)
    {
        <BuzzChip Text="@chip" Variant="accent" Removable="true" OnRemove="() => RemoveGuideChip(chip)" />
    }
</BuzzStack>

BuzzList

Purpose

Renders ordered or unordered lists with optional item selection callbacks.

How to implement

<BuzzList
    Items="@_guideListItems"
    Ordered="true"
    Selectable="true"
    OnItemSelected="OnGuideListItemSelected" />

Parameters to consider and effects

• Items: text entries rendered as list rows.
• Ordered: chooses ordered list numbering.
• Selectable: allows click interaction and callback.

Example usage (actual component)

1. Validate user identity
2. Check session/token freshness
3. Run MFA reset if needed
4. Confirm successful login

Selected item: None selected

Code used to display the component

<BuzzList Items="@_guideListItems" Ordered="true" Selectable="true" OnItemSelected="OnGuideListItemSelected" />
<p><strong>Selected item:</strong> @_guideSelectedListItem</p>

BuzzTextBox

Purpose

Collects free-form text and improves typing experience with history and optional AI suggestions.

How to implement

<BuzzTextBox
    Label="Issue Summary"
    @bind-InputText="_issueSummary"
    Placeholder="Type issue details..."
    InputType="text"
    SuggestionCount="6"
    AddToHistoryOnEnter="true"
    AddToHistoryOnTab="true"
    EnableAiSuggestions="true"
    AiDebounceMilliseconds="800"
    MemorySubject="support-login-cases"
    ReferenceText="" />

Parameters to consider and effects

• SuggestionCount: controls max shown suggestions.
• MemorySubject: shares context across related fields.
• InputType="password": masks input and disables suggestion behavior.

Example usage (actual component)

Code used to display the component

<BuzzTextBox
    Label="Guide Text Input"
    @bind-InputText="_guideText"
    Placeholder="Type a short issue summary..."
    SuggestionCount="5"
    AddToHistoryOnEnter="true"
    AddToHistoryOnTab="true" />

@code {
    private string _guideText = string.Empty;
}

BuzzComboBox

Purpose

Lets users select ranked options or enter custom values in one control.

How to implement

<BuzzComboBox
    Label="Resolution Category"
    Options="<>z__ReadOnlyArray`1[System.String]"
    @bind-Value="_guideCombo"
    Placeholder="Select or type..."
    MaxVisibleOptions="7"
    MemorySubject="support-login-cases"
    ReferenceText=""
    ShowRankingReasons="true"
    AllowCustomValues="true" />

Parameters to consider and effects

• AllowCustomValues: allows values outside options list.
• ShowRankingReasons: displays ranking rationale.
• MaxVisibleOptions: limits dropdown list length.

Example usage (actual component)

Code used to display the component

<BuzzComboBox
    Label="Guide Combo"
    @bind-Value="_guideCombo"
    Options="@_guideOptions"
    ShowRankingReasons="true"
    AllowCustomValues="true" />

@code {
    private string _guideCombo = string.Empty;
    private readonly IReadOnlyList<string> _guideOptions = ["Password reset", "Session refresh", "MFA reset"];
}

BuzzSelectBox

Purpose

Provides controlled single selection with validation, helper text, and recommendation hinting.

How to implement

<BuzzSelectBox
    Label="Escalation Level"
    Options="<>z__ReadOnlyArray`1[System.String]"
    @bind-Value="_guideSelect"
    Disabled="false"
    Required="true"
    ShowPlaceholderOption="true"
    PlaceholderOptionText="Select escalation..."
    MaxVisibleOptions="10"
    MemorySubject="support-login-cases"
    ReferenceText=""
    ShowRecommendationHint="true"
    HelperText="Select one level."
    ErrorText=""
    DescribedBy="custom-help-id" />

Parameters to consider and effects

• Required: adds semantic and validation requirement.
• ErrorText: displays validation failures.
• ShowRecommendationHint: shows ranked recommendation.

Example usage (actual component)

Code used to display the component

<BuzzSelectBox
    Label="Guide Select"
    @bind-Value="_guideSelect"
    Options="@_guideSelectOptions"
    Required="true"
    HelperText="Select one level."
    ErrorText="@_guideSelectError" />

BuzzCheckBox

Purpose

Captures yes/no decisions with optional recommendation guidance.

How to implement

<BuzzCheckBox
    Label="Require MFA reset"
    @bind-Value="_guideCheck"
    Disabled="false"
    Required="false"
    ShowRecommendationHint="true"
    MemorySubject="support-login-cases"
    ReferenceText=""
    HelperText="Enable for risk-based cases."
    ErrorText=""
    DescribedBy="custom-check-help" />

Parameters to consider and effects

• Required: marks field as mandatory in workflows.
• ShowRecommendationHint: shows confidence hint.

Example usage (actual component)

Code used to display the component

<BuzzCheckBox
    Label="Guide Checkbox"
    @bind-Value="_guideCheck"
    HelperText="Enable for risk-based cases."
    ShowRecommendationHint="true" />

BuzzAlert

Purpose

Displays inline contextual messages for warnings, errors, and confirmations.

How to implement

<BuzzAlert
    Title="Case needs manual verification"
    Message="Automatic checks found conflicting identity signals."
    Variant="warning"
    ShowIcon="true"
    Dismissible="true"
    @bind-IsVisible="_guideAlertVisible" />

Parameters to consider and effects

• Variant: visual and semantic tone (info, success, warning, danger).
• Dismissible: enables close button and visibility binding flow.
• IsVisible: controls whether the alert is rendered.

Example usage (actual component)

Code used to display the component

<BuzzAlert
    Title="Guide verification alert"
    Message="Manual verification is currently required for this case."
    Variant="warning"
    Dismissible="true"
    @bind-IsVisible="_guideAlertVisible" />
<BuzzButton Text="Show Alert Again" Variant="secondary" OnClick="ShowGuideAlertAgain" />

BuzzProgress

Purpose

Shows linear completion progress for forms and workflows.

How to implement

<BuzzProgress
    Label="Form completion"
    Value="@_guideProgressValue"
    Max="100"
    Variant="accent"
    ShowValueLabel="true" />

Parameters to consider and effects

• Value/Max: determines filled percentage.
• Variant: track fill color (accent, success, warning, danger).
• ShowValueLabel: displays rounded percentage text.

Example usage (actual component)

Code used to display the component

<BuzzProgress Label="Guide completion" Value="@_guideProgressValue" Max="100" Variant="accent" ShowValueLabel="true" />
<BuzzStack Direction="horizontal" Gap="0.5rem">
    <BuzzButton Text="Increase +10%" Variant="outline" OnClick="IncreaseGuideProgress" />
    <BuzzButton Text="Reset" Variant="secondary" OnClick="ResetGuideProgress" />
</BuzzStack>

BuzzSkeleton

Purpose

Displays loading placeholders while content is being fetched.

How to implement

<BuzzSkeleton Variant="text" Width="70%" Height="0.9rem" Animated="true" />

Parameters to consider and effects

• Variant: text, rect, or circle.
• Width/Height: controls placeholder dimensions.
• Animated: enables shimmer loading effect.

Example usage (actual component)

Code used to display the component

<BuzzStack Direction="vertical" Gap="0.35rem">
    <BuzzSkeleton Variant="text" Width="70%" Height="0.9rem" />
    <BuzzSkeleton Variant="text" Width="95%" Height="0.9rem" />
    <BuzzSkeleton Variant="rect" Width="100%" Height="3.5rem" Radius="10px" />
</BuzzStack>

BuzzStatCard

Purpose

Displays compact metrics with trend and context for dashboard-style summaries.

How to implement

<BuzzStatCard
    Label="Auto-Resolved"
    Value="84%"
    TrendText="+4.1%"
    Description="Resolution success this week."
    Variant="success" />

Parameters to consider and effects

• Label: metric title.
• Value: primary value text.
• TrendText: directional change indicator.

Example usage (actual component)

Code used to display the component

<BuzzStack Direction="horizontal" Gap="0.6rem" Wrap="true">
    <BuzzStatCard Label="Open Cases" Value="12" TrendText="+2 today" Description="Awaiting final review." Variant="warning" />
    <BuzzStatCard Label="Auto-Resolved" Value="84%" TrendText="+4.1%" Description="Resolution success this week." Variant="success" />
</BuzzStack>

BuzzEmptyState

Purpose

Provides a clean no-data message with a guided primary action.

How to implement

<BuzzEmptyState
    Title="No escalated items"
    Description="There are no P1/P2 escalations in this queue."
    Icon="!"
    PrimaryActionText="Create escalation"
    PrimaryAction="OnGuideCreateEscalation" />

Parameters to consider and effects

• Title/Description: primary and supporting text.
• PrimaryActionText: button label for the next step.
• PrimaryAction: callback when user triggers action.

Example usage (actual component)

Action count: 0

Code used to display the component

<BuzzEmptyState
    Title="No escalated items"
    Description="There are no P1/P2 escalations in this queue."
    Icon="!"
    PrimaryActionText="Create escalation"
    PrimaryAction="OnGuideCreateEscalation" />
<p><strong>Action count:</strong> @_guideEmptyStateActionCount</p>

BuzzDataPanel

Purpose

Presents key analytical snapshots with title, primary value, and supporting context.

How to implement

<BuzzDataPanel
    Title="Incident Resolution Throughput"
    Subtitle="Last 24 hours"
    PrimaryValue="84%"
    Description="Auto-resolution rate improved after token refresh fix deployment."
    BadgeText="Stable"
    Variant="success">
    ...
</BuzzDataPanel>

Parameters to consider and effects

• PrimaryValue: highlighted metric text.
• BadgeText: compact status marker in header.
• ChildContent: allows custom inline tags/details below the value.

Example usage (actual component)

Code used to display the component

<BuzzDataPanel Title="Guide throughput snapshot" Subtitle="Last 24 hours" PrimaryValue="84%" Description="Resolution quality trend remains stable." BadgeText="Stable" Variant="success">
    <BuzzStack Direction="horizontal" Gap="0.45rem" Wrap="true">
        <BuzzBadge Text="Resolved: 126" Variant="success" />
        <BuzzBadge Text="Escalated: 14" Variant="warning" />
    </BuzzStack>
</BuzzDataPanel>

BuzzResultBanner

Purpose

Displays operation outcomes with optional follow-up action and dismiss behavior.

How to implement

<BuzzResultBanner
    Title="Batch update completed"
    Message="11 records updated. 1 record requires manual follow-up."
    Variant="warning"
    ActionText="Review flagged item"
    Dismissible="true"
    @bind-IsVisible="_guideResultBannerVisible"
    OnAction="OnGuideResultBannerAction" />

Parameters to consider and effects

• Variant: info, success, warning, danger.
• ActionText: adds optional action button when provided.
• IsVisible: controls visibility (supports two-way binding).

Example usage (actual component)

Code used to display the component

<BuzzResultBanner
    Title="Guide batch update completed"
    Message="11 records updated. 1 requires manual follow-up."
    Variant="warning"
    ActionText="Review flagged item"
    Dismissible="true"
    @bind-IsVisible="_guideResultBannerVisible"
    OnAction="OnGuideResultBannerAction" />
<BuzzButton Text="Show Banner Again" Variant="secondary" OnClick="ShowGuideResultBannerAgain" />

BuzzConfirmDialog

Purpose

Prompts users before destructive or irreversible actions.

How to implement

<BuzzConfirmDialog
    @bind-IsOpen="_guideConfirmDialogOpen"
    Title="Delete draft?"
    Message="This action permanently removes the current draft. Continue?"
    ConfirmButtonText="Delete draft"
    CancelButtonText="Keep draft"
    ConfirmVariant="danger"
    OnConfirm="OnGuideConfirmDelete"
    OnCancel="OnGuideCancelDelete" />

Parameters to consider and effects

• IsOpen: controls dialog visibility.
• OnConfirm/OnCancel: callbacks for action outcomes.
• ConfirmVariant: visual emphasis for primary action severity.

Example usage (actual component)

Last confirm action: None

Code used to display the component

<BuzzButton Text="Open confirm dialog" Variant="danger" OnClick="OpenGuideConfirmDialog" />
<BuzzConfirmDialog @bind-IsOpen="_guideConfirmDialogOpen" Title="Delete draft?" Message="This action permanently removes the current draft. Continue?" ConfirmButtonText="Delete draft" CancelButtonText="Keep draft" ConfirmVariant="danger" OnConfirm="OnGuideConfirmDelete" OnCancel="OnGuideCancelDelete" />

BuzzToastCenter

Purpose

Centralizes toast notifications and manages multiple concurrent messages.

How to implement

<BuzzToastCenter Items="Buzz.Blazor.Models.BuzzToastItem[]" ItemsChanged="OnGuideToastItemsChanged" />

Parameters to consider and effects

• Items: list of toast payloads.
• ItemsChanged: receives active toast list after dismiss/auto-hide.

Example usage (actual component)

Active toast count: 0

Code used to display the component

<BuzzToastCenter Items="Buzz.Blazor.Models.BuzzToastItem[]" ItemsChanged="OnGuideToastItemsChanged" />

BuzzCard

Purpose

Displays grouped case content and optional AI summary/next action guidance.

How to implement

<BuzzCard
    Title="Case Summary"
    Subtitle="Generated overview"
    SourceText="Issue Summary: 
Category: 
Escalation: "
    EnableAiSummary="true"
    AutoGenerateOnChange="false"
    ShowGenerateButton="true"
    GenerateButtonText="Generate AI Summary"
    MaxInputCharacters="1400"
    UseLocalFallbackSummary="true">
    <ChildContent>...</ChildContent>
    <Actions>...</Actions>
</BuzzCard>

Parameters to consider and effects

• EnableAiSummary: toggles AI section.
• AutoGenerateOnChange: runs automatically on source updates.

Example usage (actual component)

Code used to display the component

<BuzzCard Title="Guide Card" SourceText="@_guideCardSource" EnableAiSummary="true" ShowGenerateButton="true">
    <ChildContent>
        <p>Case: @_guideText</p>
    </ChildContent>
</BuzzCard>

BuzzRadioGroup

Purpose

Captures one choice from multiple ranked alternatives.

How to implement

<BuzzRadioGroup
    Label="Resolution Path"
    Options="<>z__ReadOnlyArray`1[System.String]"
    @bind-Value="_guideRadio"
    Disabled="false"
    Required="false"
    MaxVisibleOptions="8"
    MemorySubject="support-login-cases"
    ReferenceText=""
    ShowRecommendationHint="true"
    ShowRankingReasons="true"
    HelperText="Choose one path."
    ErrorText=""
    DescribedBy="custom-radio-help" />

Parameters to consider and effects

• ShowRankingReasons: helps users understand ordering.
• Required: enforces user choice.

Example usage (actual component)

Code used to display the component

<BuzzRadioGroup
    Label="Guide Radio Group"
    @bind-Value="_guideRadio"
    Options="@_guideRadioOptions"
    ShowRankingReasons="true" />

BuzzDatePicker

Purpose

Selects dates with optional quick suggestions and ranking guidance.

How to implement

<BuzzDatePicker
    Label="Follow-up Date"
    @bind-Value="_guideDate"
    Disabled="false"
    Required="false"
    Min="2026-01-01"
    Max="2026-12-31"
    MemorySubject="support-login-cases"
    ReferenceText=""
    ShowQuickSuggestions="true"
    ShowRecommendationHint="true"
    SuggestionCount="5"
    HelperText="Choose the follow-up date."
    ErrorText=""
    DescribedBy="custom-date-help" />

Parameters to consider and effects

• ShowQuickSuggestions: shows shortcut date chips.
• Min/Max: constrains selectable range.

Example usage (actual component)

Code used to display the component

<BuzzDatePicker
    Label="Guide Date"
    @bind-Value="_guideDate"
    ShowQuickSuggestions="true"
    ShowRecommendationHint="true" />

BuzzDateRangePicker

Purpose

Selects a start/end date window with quick presets and optional AI recommendation.

How to implement

<BuzzDateRangePicker
    Label="Review date range"
    Start=""
    StartChanged="OnGuideRangeStartChanged"
    End=""
    EndChanged="OnGuideRangeEndChanged"
    RangeChanged="OnGuideRangeChanged"
    EnableAiRecommendedRange="true"
    SourceContext="Issue Summary: 
Resolution Category: 
Escalation: " />

Parameters to consider and effects

• Start/End: controlled date boundaries.
• RangeChanged: emits full range in one callback.
• EnableAiRecommendedRange: enables contextual range suggestions.

Example usage (actual component)

Range: to

Code used to display the component

<BuzzDateRangePicker Label="Guide range" Start="" StartChanged="OnGuideRangeStartChanged" End="" EndChanged="OnGuideRangeEndChanged" RangeChanged="OnGuideRangeChanged" EnableAiRecommendedRange="true" SourceContext="Issue Summary: 
Resolution Category: 
Escalation: " />
<p><strong>Range:</strong>  to </p>

BuzzFileUpload

Purpose

Handles file intake with size/count limits and optional AI-driven file quality insight.

How to implement

<BuzzFileUpload
    Label="Attach case evidence files"
    AllowMultiple="true"
    MaxFiles="5"
    MaxFileSizeMb="8"
    EnableAiInsight="true"
    SourceContext="Issue Summary: 
Resolution Category: 
Escalation: "
    FilesChanged="OnGuideFilesChanged" />

Parameters to consider and effects

• MaxFiles/MaxFileSizeMb: guardrails for uploads.
• FilesChanged: sends selected file metadata back to parent.
• EnableAiInsight: adds short AI analysis of uploaded file list.

Example usage (actual component)

Files selected: 0

Code used to display the component

<BuzzFileUpload Label="Guide upload" AllowMultiple="true" MaxFiles="5" MaxFileSizeMb="8" EnableAiInsight="true" SourceContext="Issue Summary: 
Resolution Category: 
Escalation: " FilesChanged="OnGuideFilesChanged" />
<p><strong>Files selected:</strong> 0</p>

BuzzModal

Purpose

Provides focused review flow in a dialog with optional AI insight.

How to implement

<BuzzModal
    Title="Final Review"
    @bind-IsOpen="_guideModalOpen"
    CloseOnBackdropClick="true"
    EnableAiInsight="true"
    AutoGenerateOnOpen="true"
    SourceText="Issue Summary: 
Category: 
Escalation: "
    CloseButtonText="Close">
    <ChildContent>...</ChildContent>
    <Actions>...</Actions>
</BuzzModal>

Parameters to consider and effects

• CloseOnBackdropClick: controls outside-click dismiss.
• AutoGenerateOnOpen: runs AI insight automatically.

Example usage (actual component)

Code used to display the component

<BuzzModal
    Title="Guide Modal"
    @bind-IsOpen="_guideModalOpen"
    SourceText="@_guideCardSource"
    EnableAiInsight="true"
    AutoGenerateOnOpen="true">
    <ChildContent>
        <p>Review guide data before confirming.</p>
    </ChildContent>
</BuzzModal>

BuzzToast

Purpose

Shows transient status feedback with optional AI explanation mode for raw technical messages.

How to implement

<BuzzToast
    Title="Status"
    Message=""
    @bind-IsVisible="_guideToastVisible"
    Severity="error"
    EnableAiMessageWhenEmpty="true"
    AutoGenerateAiWhenEmpty="true"
    AutoHide="true"
    AutoHideMilliseconds="4500"
    UseAdaptiveAutoHide="true"
    AdaptiveMinMilliseconds="2500"
    AdaptiveMaxMilliseconds="10000"
    AdaptiveBaseMilliseconds="1200"
    AdaptiveWordReadMilliseconds="280"
    ShowCloseButton="true"
    SourceText=""
    AiFallbackMessage="Unable to generate explanation." />

Parameters to consider and effects

• EnableAiMessageWhenEmpty: AI runs only when message is empty and this flag is true.
• UseAdaptiveAutoHide: adjusts dismiss timing based on message length.
• Severity: visual tone (success/info/warning/error).

Example usage (actual component)

Code used to display the component

<BuzzToast
    Title="@_guideToastTitle"
    Message="@_guideToastMessage"
    @bind-IsVisible="_guideToastVisible"
    Severity="@_guideToastSeverity"
    SourceText="@_guideToastSource"
    EnableAiMessageWhenEmpty="@_guideToastAiWhenEmpty"
    AutoGenerateAiWhenEmpty="true"
    UseAdaptiveAutoHide="true"
    AutoHide="true" />

BuzzTooltip

Purpose

Provides inline hover/focus help, with optional AI explanation for technical text.

How to implement

<BuzzTooltip
    Message=""
    SourceText="HTTP 200 OK indicates request success."
    Placement="right"
    EnableAiMessageWhenEmpty="true"
    AutoGenerateAiWhenEmpty="true"
    AiFallbackMessage="No explanation available."
    TabIndex="0">
    <span class="badge text-bg-info">Explain Status</span>
</BuzzTooltip>

Parameters to consider and effects

• Placement: controls direction of tooltip.
• EnableAiMessageWhenEmpty: enables explain-from-source mode.

Example usage (actual component)

Code used to display the component

<BuzzTooltip
    Message=""
    SourceText="HTTP 200 OK means request success and expected response returned."
    EnableAiMessageWhenEmpty="true"
    Placement="right">
    <span class="badge text-bg-info">Explain 200 OK</span>
</BuzzTooltip>

BuzzFormAssistant

Purpose

Reviews form completeness, highlights missing required fields, and provides AI risk/rewrite support before submit.

How to implement

<BuzzFormAssistant
    Label="Case Submit Assistant"
    Fields="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzFormFieldState]"
    ShowChecklist="true"
    ShowCompletionScore="true"
    EnableAiRiskInsight="true"
    AutoGenerateRiskInsightOnLoad="true"
    EnableAiRewriteForMessage="true"
    ShowGenerateButtons="true"
    MessageDraft="We are validating your case and will provide an update shortly."
    MessageDraftChanged="OnGuideAssistantMessageChanged"
    RewriteInstruction="Rewrite this message to be clear and user-friendly."
    AiContextSubject="sprint-planner"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: "
    MaxInputCharacters="1600" />

Parameters to consider and effects

• Fields: accepts required/optional form field states for checklist and completion score.
• EnableAiRiskInsight: generates trend/risk/next-step guidance before submit.
• MessageDraft/MessageDraftChanged: supports AI-assisted rewrite loop.
• ShowGenerateButtons: allows manual AI generation control.
• AiContextSubject: links prompts to seed knowledge and live shared memory for domain-specific output.

Example usage (actual component)

Code used to display the component

<BuzzFormAssistant
    Label="Guide Form Assistant"
    Fields="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzFormFieldState]"
    EnableAiRiskInsight="true"
    AutoGenerateRiskInsightOnLoad="true"
    EnableAiRewriteForMessage="true"
    MessageDraft="We are validating your case and will provide an update shortly."
    MessageDraftChanged="OnGuideAssistantMessageChanged"
    AiContextSubject="sprint-planner"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: " />

@code {
    private string _guideAssistantMessage = "We are validating your case and will provide an update shortly.";
    private IReadOnlyList<BuzzFormFieldState> _guideAssistantFields =>
    [
        new("issue", "Issue Summary", _guideText, true),
        new("category", "Resolution Category", _guideCombo, true),
        new("escalation", "Escalation Level", _guideSelect, true),
        new("followup", "Follow-up Message", _guideAssistantMessage, true)
    ];

    private Task OnGuideAssistantMessageChanged(string value)
    {
        _guideAssistantMessage = value;
        return Task.CompletedTask;
    }
}

BuzzHero

Purpose

Creates modern page hero sections with primary CTA and optional AI-generated tagline.

How to implement

<BuzzHero Badge="2026-ready design system" Title="Build support portals faster" Subtitle="Compose accessible and AI-assisted workflows." EnableAiTagline="true" SourceContext="Issue Summary: 
Resolution Category: 
Escalation: " />

Parameters to consider and effects

• Title/Subtitle: hero message content.
• EnableAiTagline: allows AI subtitle generation.
• OnPrimaryCta/OnSecondaryCta: CTA callbacks.

Example usage (actual component)

Code used to display the component

<BuzzHero Badge="Guide hero" Title="Build support portals faster" Subtitle="Compose accessible and AI-assisted workflows." EnableAiTagline="true" SourceContext="Issue Summary: 
Resolution Category: 
Escalation: " />

BuzzPricingTable

Purpose

Renders website pricing cards with feature lists and action CTAs.

How to implement

<BuzzPricingTable Plans="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzPricingPlan]" OnPlanSelected="OnGuidePlanSelected" />

Parameters to consider and effects

• Plans: collection of plan cards and features.
• OnPlanSelected: emits chosen plan information.

Example usage (actual component)

Selected plan: None

Code used to display the component

<BuzzPricingTable Plans="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzPricingPlan]" OnPlanSelected="OnGuidePlanSelected" />

BuzzCarousel

Purpose

Cycles through feature highlights for marketing and onboarding sections.

How to implement

<BuzzCarousel Slides="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzCarouselSlide]" ActiveIndexChanged="OnGuideCarouselIndexChanged" />

Parameters to consider and effects

• Slides: collection of title/description entries.
• ActiveIndexChanged: emits current slide index.

Example usage (actual component)

Active slide: 0

Code used to display the component

<BuzzCarousel Slides="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzCarouselSlide]" ActiveIndexChanged="OnGuideCarouselIndexChanged" />

BuzzAuthShell

Purpose

Provides a reusable authentication container for sign-in and account actions.

How to implement

<BuzzAuthShell Title="Welcome back" Subtitle="Sign in to continue.">...</BuzzAuthShell>

Parameters to consider and effects

• Title/Subtitle: auth context messaging.
• ChildContent: form fields and controls.
• Actions: action/footer area for submit links.

Example usage (actual component)

Code used to display the component

<BuzzAuthShell Title="Guide sign in" Subtitle="Use your work account.">...</BuzzAuthShell>

BuzzBreadcrumb

Purpose

Shows location trail context and allows quick navigation to previous levels.

How to implement

<BuzzBreadcrumb
    Items="<>z__ReadOnlyArray`1[System.String]"
    ShowHome="true"
    HomeText="Dashboard"
    Selectable="true"
    OnItemSelected="OnGuideBreadcrumbSelected" />

Parameters to consider and effects

• Items: breadcrumb path entries.
• ShowHome/HomeText: optional root entry.
• OnItemSelected: callback when a selectable crumb is clicked.

Example usage (actual component)

Selected breadcrumb: Dashboard

Code used to display the component

<BuzzBreadcrumb Items="<>z__ReadOnlyArray`1[System.String]" ShowHome="true" HomeText="Dashboard" Selectable="true" OnItemSelected="OnGuideBreadcrumbSelected" />
<p><strong>Selected breadcrumb:</strong> Dashboard</p>

BuzzPagination

Purpose

Provides reusable paging controls for list and table style views.

How to implement

<BuzzPagination
    CurrentPage="1"
    CurrentPageChanged="OnGuidePageChanged"
    TotalPages="12"
    MaxVisiblePages="5"
    ShowEdgeButtons="true" />

Parameters to consider and effects

• CurrentPage: current page index (1-based).
• TotalPages: max page count.
• MaxVisiblePages: controls pager density.

Example usage (actual component)

Current page: 1

Code used to display the component

<BuzzPagination CurrentPage="1" CurrentPageChanged="OnGuidePageChanged" TotalPages="12" MaxVisiblePages="5" ShowEdgeButtons="true" />
<p><strong>Current page:</strong> 1</p>

BuzzDropdownMenu

Purpose

Provides compact action menus for contextual tasks and quick commands.

How to implement

<BuzzDropdownMenu
    Label="Case actions"
    Items="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzMenuItem]"
    OnItemSelected="OnGuideMenuSelected" />

Parameters to consider and effects

• Items: menu options with text/value/disabled states.
• OnItemSelected: callback with selected menu item.

Example usage (actual component)

Selected action: None

Code used to display the component

<BuzzDropdownMenu Label="Guide actions" Items="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzMenuItem]" OnItemSelected="OnGuideMenuSelected" />
<p><strong>Selected action:</strong> None</p>

BuzzCodeBlock

Purpose

Displays readable code snippets with line numbers and one-click copy for developer workflows.

How to implement

<BuzzCodeBlock
    Title="Create a reusable card"
    Language="razor"
    Code="<BuzzCard Title="Case Summary" EnableAiSummary="true" SourceText="@CaseSummarySource">
    <ChildContent>
        <p><strong>Category:</strong> @_guideCombo</p>
        <p><strong>Escalation:</strong> @_guideSelect</p>
    </ChildContent>
</BuzzCard>"
    ShowLineNumbers="true"
    WrapLines="true"
    MaxHeight="260px"
    EnableCopyButton="true" />

Parameters to consider and effects

• Code: full snippet text to render.
• ShowLineNumbers: displays indexed rows for review.
• EnableCopyButton: allows direct clipboard copy.

Example usage (actual component)

Code used to display the component

<BuzzCodeBlock Title="Guide snippet" Language="razor" Code="<BuzzCard Title="Case Summary" EnableAiSummary="true" SourceText="@CaseSummarySource">
    <ChildContent>
        <p><strong>Category:</strong> @_guideCombo</p>
        <p><strong>Escalation:</strong> @_guideSelect</p>
    </ChildContent>
</BuzzCard>" ShowLineNumbers="true" WrapLines="true" MaxHeight="240px" />

BuzzCodeEditor

Purpose

Provides an in-app code editing surface with optional AI improvement suggestions.

How to implement

<BuzzCodeEditor
    Label="Resolution helper function"
    Language="csharp"
    @bind-Value="_guideCodeDraft"
    Height="220px"
    EnableAiAssist="true"
    SourceContext="Issue Summary: 
Resolution Category: 
Escalation: " />

Parameters to consider and effects

• Value/ValueChanged: enables controlled editing from parent state.
• EnableAiAssist: toggles AI suggestion generation.
• SourceContext: adds domain context for better AI output.

Example usage (actual component)

Draft length: 150

Code used to display the component

<BuzzCodeEditor Label="Guide code editor" Language="csharp" @bind-Value="_guideCodeDraft" Height="220px" EnableAiAssist="true" SourceContext="Issue Summary: 
Resolution Category: 
Escalation: " />
<p><strong>Draft length:</strong> 150</p>

BuzzFooter

Purpose

Provides a consistent site footer with brand, links, and legal metadata.

How to implement

<BuzzFooter
    BrandText="BuzzBlazor"
    Description="AI-ready Blazor components for modern web development."
    Links="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzNavLink]"
    Copyright="Copyright 2026 BuzzBlazor" />

Parameters to consider and effects

• BrandText/Description: footer identity and context.
• Links: list of footer navigation links.
• Copyright: legal copy section.

Example usage (actual component)

Code used to display the component

<BuzzFooter BrandText="BuzzBlazor" Description="AI-ready Blazor components for modern web development." Links="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzNavLink]" Copyright="Copyright 2026 BuzzBlazor" />

BuzzSideNav

Purpose

Provides structured sidebar navigation for dashboard and admin layouts.

How to implement

<BuzzSideNav Title="Demo Sections" Links="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzNavLink]" />

Parameters to consider and effects

• Title: sidebar heading text.
• Links: route links displayed in vertical navigation.

Example usage (actual component)

Code used to display the component

<BuzzSideNav Title="Guide sections" Links="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzNavLink]" />

BuzzDrawer

Purpose

Shows secondary task panels without full page navigation.

How to implement

<BuzzDrawer @bind-IsOpen="_guideDrawerOpen" Title="Case Inspector" Position="right">
    <ChildContent>...</ChildContent>
    <Actions>...</Actions>
</BuzzDrawer>

Parameters to consider and effects

• IsOpen: controls drawer visibility.
• Position: right or left placement.
• Actions: optional footer action area.

Example usage (actual component)

Code used to display the component

<BuzzButton Text="Open drawer" Variant="secondary" OnClick="OpenGuideDrawer" />
<BuzzDrawer @bind-IsOpen="_guideDrawerOpen" Title="Guide drawer" Position="right">...</BuzzDrawer>

BuzzAccordion

Purpose

Organizes long troubleshooting/help content into expandable sections and can optionally recommend which section to open first.

How to implement

<BuzzAccordion
    Label="Support Case Playbook"
    Sections="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzAccordionItem]"
    AllowMultipleOpen="false"
    ShowRecommendationHint="true"
    EnableAiRecommendedSection="true"
    AutoRecommendOnLoad="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: "
    MaxInputCharacters="1200" />

Parameters to consider and effects

• AllowMultipleOpen: set to false to keep only one section open and collapse all others.
• EnableAiRecommendedSection: enables AI section recommendation behavior.
• AutoRecommendOnLoad: auto-runs recommendation when component loads.
• Sections: each entry uses BuzzAccordionItem(Header, Content, IsInitiallyExpanded).

Example usage (actual component)

Code used to display the component

<BuzzAccordion
    Label="Guide Accordion"
    Sections="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzAccordionItem]"
    AllowMultipleOpen="false"
    EnableAiRecommendedSection="true"
    AutoRecommendOnLoad="true"
    ShowRecommendationHint="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: " />

@code {
    private readonly IReadOnlyList<BuzzAccordionItem> _guideAccordionSections =
    [
        new("Credential and account checks", "Validate lock state and reset flow.", true),
        new("Session and token invalidation", "Clear stale sessions and reissue token."),
        new("MFA and risk controls", "Enforce MFA reset for suspicious sign-ins."),
        new("Escalation and communication", "Escalate and notify user with timeline.")
    ];
}

BuzzTabs

Purpose

Presents multiple content views in one compact area and can optionally recommend the best tab to open first.

How to implement

<BuzzTabs
    Label="Case Resolution Views"
    Tabs="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzTabItem]"
    ActiveTab=""
    ActiveTabChanged="OnGuideTabChanged"
    ShowRecommendationHint="true"
    EnableAiRecommendedTab="true"
    AutoRecommendOnLoad="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: "
    MaxInputCharacters="1200" />

Parameters to consider and effects

• Tabs: each item uses BuzzTabItem(Header, Content, IsInitiallyActive).
• ActiveTab/ActiveTabChanged: enables controlled tab state from parent.
• EnableAiRecommendedTab: allows AI to pick likely-relevant tab from context.
• ShowRecommendationHint: displays chosen tab hint to user.

Example usage (actual component)

Code used to display the component

<BuzzTabs
    Label="Guide Tabs"
    Tabs="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzTabItem]"
    ActiveTab=""
    ActiveTabChanged="OnGuideTabChanged"
    EnableAiRecommendedTab="true"
    AutoRecommendOnLoad="true"
    ShowRecommendationHint="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: " />

@code {
    private string _guideActiveTab = string.Empty;
    private readonly IReadOnlyList<BuzzTabItem> _guideTabs =
    [
        new("Executive summary", "High-level case view.", true),
        new("Technical detail", "Authentication and token deep dive."),
        new("Customer communication", "User-facing follow-up message guidance.")
    ];

    private Task OnGuideTabChanged(string value)
    {
        _guideActiveTab = value;
        return Task.CompletedTask;
    }
}

BuzzStepper

Purpose

Guides users through ordered workflow steps with optional AI recommendation for the best current step.

How to implement

<BuzzStepper
    Label="Case Handling Workflow"
    Steps="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzStepItem]"
    ActiveStep=""
    ActiveStepChanged="OnGuideStepChanged"
    AllowStepNavigation="true"
    ShowRecommendationHint="true"
    EnableAiRecommendedStep="true"
    AutoRecommendOnLoad="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: "
    MaxInputCharacters="1200" />

Parameters to consider and effects

• Steps: each item uses BuzzStepItem(Title, Description, IsInitiallyActive).
• ActiveStep/ActiveStepChanged: lets parent control selected step state.
• AllowStepNavigation: enables/disables direct step button navigation.
• EnableAiRecommendedStep: allows AI to choose likely-relevant step first.

Example usage (actual component)

Code used to display the component

<BuzzStepper
    Label="Guide Stepper"
    Steps="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzStepItem]"
    ActiveStep=""
    ActiveStepChanged="OnGuideStepChanged"
    AllowStepNavigation="true"
    EnableAiRecommendedStep="true"
    AutoRecommendOnLoad="true"
    ShowRecommendationHint="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: " />

@code {
    private string _guideActiveStep = string.Empty;
    private readonly IReadOnlyList<BuzzStepItem> _guideSteps =
    [
        new("Triage incoming case", "Validate identity and reproduce quickly.", true),
        new("Apply first resolution", "Use the highest-confidence fix path."),
        new("Verify with user", "Confirm successful login and token health."),
        new("Close and document", "Record root cause and prevention notes.")
    ];

    private Task OnGuideStepChanged(string value)
    {
        _guideActiveStep = value;
        return Task.CompletedTask;
    }
}

BuzzTimeline

Purpose

Displays chronological activity events and can suggest the first event to investigate based on current context.

How to implement

<BuzzTimeline
    Label="Case Activity Timeline"
    Items="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzTimelineItem]"
    ShowRecommendationHint="true"
    EnableAiRecommendedEvent="true"
    AutoRecommendOnLoad="true"
    SortDescending="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: "
    MaxInputCharacters="1200" />

Parameters to consider and effects

• Items: each item uses BuzzTimelineItem(Title, Detail, Timestamp, Severity).
• SortDescending: controls latest-first versus oldest-first ordering.
• EnableAiRecommendedEvent: allows AI to mark one event as investigation focus.
• ShowRecommendationHint: displays recommendation text above timeline.

Example usage (actual component)

Code used to display the component

<BuzzTimeline
    Label="Guide Timeline"
    Items="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzTimelineItem]"
    EnableAiRecommendedEvent="true"
    AutoRecommendOnLoad="true"
    ShowRecommendationHint="true"
    SortDescending="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: " />

@code {
    private readonly IReadOnlyList<BuzzTimelineItem> _guideTimeline =
    [
        new("User reported repeated login failure", "Corporate login fails after password update.", DateTimeOffset.Now.AddMinutes(-35), "warning"),
        new("Session invalidation executed", "Stale sessions cleared and tokens revoked.", DateTimeOffset.Now.AddMinutes(-20), "info"),
        new("MFA reset applied", "Challenge reset completed for user.", DateTimeOffset.Now.AddMinutes(-10), "success")
    ];
}

BuzzCommandPalette

Purpose

Lets users quickly search and trigger predefined actions with optional AI recommendation for likely best command.

How to implement

<BuzzCommandPalette
    Label="Case Action Commands"
    Placeholder="Type action keywords..."
    Commands="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzCommandItem]"
    Query=""
    QueryChanged="OnGuidePaletteQueryChanged"
    SelectedCommand=""
    SelectedCommandChanged="OnGuideSelectedCommandChanged"
    SyncQueryWithSelection="true"
    MaxVisibleCommands="8"
    ShowRecommendationHint="true"
    EnableAiRecommendedCommand="true"
    AutoRecommendOnLoad="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: "
    MaxInputCharacters="1200" />

Parameters to consider and effects

• Commands: each item uses BuzzCommandItem(Title, Description, Value).
• Query/QueryChanged: parent can control search input state.
• SelectedCommand/SelectedCommandChanged: emits chosen command value.
• EnableAiRecommendedCommand: enables AI recommendation hinting.

Example usage (actual component)

Code used to display the component

<BuzzCommandPalette
    Label="Guide Command Palette"
    Commands="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzCommandItem]"
    Query=""
    QueryChanged="OnGuidePaletteQueryChanged"
    SelectedCommand=""
    SelectedCommandChanged="OnGuideSelectedCommandChanged"
    EnableAiRecommendedCommand="true"
    AutoRecommendOnLoad="true"
    ShowRecommendationHint="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: " />

@code {
    private string _guidePaletteQuery = string.Empty;
    private string _guideSelectedCommand = string.Empty;
    private readonly IReadOnlyList<BuzzCommandItem> _guideCommands =
    [
        new("Reset password and notify user", "Secure reset and notification flow.", "password-reset"),
        new("Invalidate all sessions", "Clear active sessions and revoke tokens.", "invalidate-sessions"),
        new("Enforce MFA reset", "Require re-enrollment on next sign in.", "mfa-reset")
    ];
}

BuzzSmartTable

Purpose

Displays structured rows and columns with optional AI-suggested initial sort to help users focus faster.

How to implement

<BuzzSmartTable
    Label="Open Case Snapshot"
    Columns="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzTableColumn]"
    Rows="<>z__ReadOnlyArray`1[System.Collections.Generic.IReadOnlyDictionary`2[System.String,System.String]]"
    Modules="BuzzSmartTableModules { EnableAiRecommendedSort = True, EnableSummaryFooter = True, EnableInsightsPanel = True, EnableAiInsightsPanel = True, EnableFilterPanel = True, EnableGlobalSearch = True, EnableGrouping = True, EnableSavedViews = True }"
    ShowSummaryFooter="true"
    ShowInsightsPanel="true"
    ShowAiInsightsPanel="true"
    ShowFilterPanel="true"
    EnableGlobalSearch="true"
    EnableGrouping="true"
    SavedViews="<>z__ReadOnlySingleElementList`1[Buzz.Blazor.Models.BuzzSmartTableViewState]"
    SavedViewsChanged="OnGuideTableSavedViewsChanged"
    ShowRowCount="true"
    HighlightFirstRow="true"
    ShowRecommendationHint="true"
    EnableAiRecommendedSort="true"
    AutoRecommendSortOnLoad="true"
    EnableAiInsights="true"
    AutoGenerateAiInsightsOnLoad="true"
    AiContextSubject="support-cases"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: "
    MaxInputCharacters="1200" />

Parameters to consider and effects

• Columns: each entry supports DataType, EnableAutoFormat, and Aggregation.
• Rows: dictionary rows keyed by column key.
• Modules: use BuzzSmartTableModules.Basic, Analytics, or a custom profile.
• EnableAiRecommendedSort: suggests initial sort column from context.
• ShowSummaryFooter: renders aggregate row (sum/avg/min/max/count/distinct count).
• ShowInsightsPanel: displays missing values, duplicates, and per-column data quality summary.
• ShowAiInsightsPanel + EnableAiInsights: shows concise AI narrative (trend, risk, next action).
• AiContextSubject: aligns AI prompts with seed baseline and learned user-memory context.
• ShowFilterPanel + EnableGlobalSearch + EnableGrouping: adds column filters, search, and group-by analysis.
• SavedViews + SavedViewsChanged: lets users save/reload table states.
• HighlightFirstRow: visually emphasizes first row after sort.

Example usage (actual component)

Code used to display the component

<BuzzSmartTable
    Label="Guide Smart Table"
    Columns="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzTableColumn]"
    Rows="<>z__ReadOnlyArray`1[System.Collections.Generic.IReadOnlyDictionary`2[System.String,System.String]]"
    Modules="BuzzSmartTableModules { EnableAiRecommendedSort = True, EnableSummaryFooter = True, EnableInsightsPanel = True, EnableAiInsightsPanel = True, EnableFilterPanel = True, EnableGlobalSearch = True, EnableGrouping = True, EnableSavedViews = True }"
    ShowSummaryFooter="true"
    ShowInsightsPanel="true"
    ShowAiInsightsPanel="true"
    ShowFilterPanel="true"
    EnableGlobalSearch="true"
    EnableGrouping="true"
    SavedViews="<>z__ReadOnlySingleElementList`1[Buzz.Blazor.Models.BuzzSmartTableViewState]"
    SavedViewsChanged="OnGuideTableSavedViewsChanged"
    EnableAiRecommendedSort="true"
    AutoRecommendSortOnLoad="true"
    EnableAiInsights="true"
    AutoGenerateAiInsightsOnLoad="true"
    AiContextSubject="support-cases"
    ShowRecommendationHint="true"
    ShowRowCount="true"
    HighlightFirstRow="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: " />

@code {
    private readonly IReadOnlyList<BuzzTableColumn> _guideTableColumns =
    [
        new("case", "Case", BuzzTableDataType.Text, false, null, null, BuzzTableAggregationType.Count),
        new("category", "Category", BuzzTableDataType.Text, false, null, null, BuzzTableAggregationType.DistinctCount),
        new("minutes", "Resolution Minutes", BuzzTableDataType.Number, true, "N1", "en-US", BuzzTableAggregationType.Average),
        new("successRate", "Success Rate", BuzzTableDataType.Percent, true, "P1", "en-US", BuzzTableAggregationType.Average),
        new("updated", "Updated", BuzzTableDataType.DateTime, true, "g", "en-US", BuzzTableAggregationType.Max)
    ];
    private readonly IReadOnlyList<IReadOnlyDictionary<string, string>> _guideTableRows =
    [
        new Dictionary<string, string> { ["case"] = "INC-2041", ["category"] = "Session/token refresh", ["minutes"] = "42.5", ["successRate"] = "0.92", ["updated"] = "2026-03-06T09:42:00" },
        new Dictionary<string, string> { ["case"] = "INC-2039", ["category"] = "MFA reset", ["minutes"] = "55.0", ["successRate"] = "0.86", ["updated"] = "2026-03-06T09:15:00" },
        new Dictionary<string, string> { ["case"] = "INC-2035", ["category"] = "Password reset flow", ["minutes"] = "21.0", ["successRate"] = "0.98", ["updated"] = "2026-03-06T08:58:00" }
    ];

    private IReadOnlyList<BuzzSmartTableViewState> _guideTableSavedViews =
    [
        new("High success focus", GroupByKey: "category", SortKey: "successRate", SortAscending: false)
    ];

    private Task OnGuideTableSavedViewsChanged(IReadOnlyList<BuzzSmartTableViewState> views)
    {
        _guideTableSavedViews = views;
        return Task.CompletedTask;
    }
}

BuzzKanbanBoard

Purpose

Organizes work items into workflow lanes and allows quick lane transitions with optional AI focus-lane recommendation.

How to implement

<BuzzKanbanBoard
    Label="Support Workflow Lanes"
    Columns="<>z__ReadOnlyArray`1[System.String]"
    Items="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzKanbanItem]"
    ItemsChanged="OnGuideKanbanItemsChanged"
    OnItemMoved="OnGuideKanbanItemMoved"
    ShowCounts="true"
    AllowMoveButtons="true"
    MoveLeftButtonText="Move backward"
    MoveRightButtonText="Move forward"
    EnableDragAndDrop="true"
    ShowRecommendationHint="true"
    EnableAiRecommendedColumn="true"
    AutoRecommendOnLoad="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: "
    MaxInputCharacters="1400" />

Parameters to consider and effects

• Columns: defines lane order and available workflow states.
• Items/ItemsChanged: keeps card state controlled from parent.
• OnItemMoved: emits movement telemetry with item id, source lane, and target lane.
• AllowMoveButtons: enables or disables lane move controls on cards.
• MoveLeftButtonText/MoveRightButtonText: customize button labels for domain-specific wording.
• EnableDragAndDrop: allows dragging cards directly between lanes.
• EnableAiRecommendedColumn: suggests which lane should be prioritized next.

Example usage (actual component)

Last move event: None yet

Code used to display the component

<BuzzKanbanBoard
    Label="Guide Kanban Board"
    Columns="<>z__ReadOnlyArray`1[System.String]"
    Items="<>z__ReadOnlyArray`1[Buzz.Blazor.Models.BuzzKanbanItem]"
    ItemsChanged="OnGuideKanbanItemsChanged"
    OnItemMoved="OnGuideKanbanItemMoved"
    ShowCounts="true"
    AllowMoveButtons="true"
    MoveLeftButtonText="Move backward"
    MoveRightButtonText="Move forward"
    EnableDragAndDrop="true"
    EnableAiRecommendedColumn="true"
    AutoRecommendOnLoad="true"
    ShowRecommendationHint="true"
    SourceText="Issue Summary: 
Resolution Category: 
Escalation: " />

@code {
    private readonly IReadOnlyList<string> _guideKanbanColumns =
    [
        "Backlog",
        "In Progress",
        "Review",
        "Done"
    ];
    private IReadOnlyList<BuzzKanbanItem> _guideKanbanItems =
    [
        new("K-1001", "Investigate token refresh failures", "Validate stale session handling.", "Backlog", "warning"),
        new("K-1002", "Run MFA reset workflow", "Apply controlled MFA reset.", "In Progress", "info"),
        new("K-1003", "Verify communication draft", "Review user-facing status message.", "Review", "success")
    ];
    private string _guideLastKanbanMove = "None yet";

    private Task OnGuideKanbanItemsChanged(IReadOnlyList<BuzzKanbanItem> items)
    {
        _guideKanbanItems = items;
        return Task.CompletedTask;
    }

    private Task OnGuideKanbanItemMoved(BuzzKanbanMoveEvent move)
    {
        _guideLastKanbanMove = $"{move.ItemId}: {move.FromColumn} -> {move.ToColumn}";
        return Task.CompletedTask;
    }
}