@page "/aichat"
@using Radzen
@using Radzen.Blazor

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor AIChat
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Blazor AI Chat component provides a conversational, streaming chat interface for building AI assistants and chatbot experiences.
</RadzenText>

<RadzenExample ComponentName="AIChat" Example="AIChatConfig">
    <AIChatConfig />
</RadzenExample>

<RadzenText Anchor="aichat#custom-styling" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Custom styling
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Customize the appearance of the <strong>AIChat</strong> component using <code>Style</code>, <code>ShowClearButton</code>, <code>Disabled</code>, and <code>ReadOnly</code> properties.
</RadzenText>
<RadzenExample ComponentName="AIChat" Example="AIChatCustomStyling">
    <AIChatCustomStyling />
</RadzenExample>

<RadzenText Anchor="aichat#compact-aichat" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Compact aichat
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Create a more compact chat interface suitable for smaller spaces or sidebar implementations.
</RadzenText>
<RadzenExample ComponentName="AIChat" Example="AIChatCompact">
    <AIChatCompact />
</RadzenExample>

<RadzenText Anchor="aichat#events" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Events and interactions
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Handle chat events like <code>MessageAdded</code>, <code>MessageSent</code>, <code>ResponseReceived</code>, and <code>ChatCleared</code> to integrate with your application logic.
</RadzenText>
<RadzenExample ComponentName="AIChat" Example="AIChatEvents">
    <AIChatEvents />
</RadzenExample>

<RadzenText Anchor="aichat#date-separator" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Date separator and timestamp format
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>TimestampFormat</code> to control how the time is rendered next to each message, and <code>ShowDateSeparator</code> (with <code>DateSeparatorFormat</code>)
    to insert a divider between messages whenever the day changes — useful when restoring long conversation history via <code>LoadMessages</code>.
</RadzenText>
<RadzenExample ComponentName="AIChat" Example="AIChatDateSeparator">
    <AIChatDateSeparator />
</RadzenExample>

<RadzenText Anchor="aichat#memory" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    AI Chat with Memory
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The <strong>AIChat</strong> component supports conversation memory that remembers previous questions and maintains context across multiple interactions. 
    Use <code>SessionId</code> to maintain conversation state and <code>SessionIdChanged</code> to track session changes.
</RadzenText>
<RadzenExample ComponentName="AIChat" Example="AIChatWithMemory">
    <AIChatWithMemory />
</RadzenExample>

<RadzenText Anchor="aichat#configuration" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Runtime AI Configuration
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Customize AI behavior at runtime by configuring the <code>Model</code>, <code>Temperature</code>, <code>MaxTokens</code>, <code>SystemPrompt</code>, <code>Endpoint</code>, <code>Proxy</code>, <code>ApiKey</code>, and <code>ApiKeyHeader</code> parameters. 
    These parameters can be set on the component or passed to the <code>SendMessage</code> method to override settings per message, enabling dynamic switching between different AI providers and models.
</RadzenText>
<RadzenExample ComponentName="AIChat" Example="AIChatModelSelection">
    <AIChatModelSelection />
</RadzenExample> 