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

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor Chat
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Blazor Chat component supports multi-participant conversations with distinct user identities and real-time messaging - for team chats, group discussions, and messaging apps.
</RadzenText>

<RadzenExample ComponentName="Chat" Example="ChatBasic">
    <ChatBasic />
</RadzenExample>

<RadzenText Anchor="chat#users" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Multi-participant support
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The <strong>Chat</strong> component supports multiple users with distinct identities, avatars, and online status indicators.
    Use <code>Users</code> to manage the chat users and <code>CurrentUserId</code> to identify the current user.
</RadzenText>
<RadzenExample ComponentName="Chat" Example="ChatUsers">
    <ChatUsers />
</RadzenExample>

<RadzenText Anchor="chat#customization" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Customization options
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Customize the appearance and behavior of the <strong>Chat</strong> component using various properties like <code>ShowUsers</code>, 
    <code>ShowUserNames</code>, <code>MaxVisibleUsers</code>, and <code>ShowClearButton</code>.
</RadzenText>
<RadzenExample ComponentName="Chat" Example="ChatCustomization">
    <ChatCustomization />
</RadzenExample>

<RadzenText Anchor="chat#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>UserAdded</code>, and <code>ChatCleared</code> 
    to integrate with your application logic and provide real-time updates.
</RadzenText>
<RadzenExample ComponentName="Chat" Example="ChatEvents">
    <ChatEvents />
</RadzenExample>

<RadzenText Anchor="chat#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 for chats that span multiple days.
</RadzenText>
<RadzenExample ComponentName="Chat" Example="ChatDateSeparator">
    <ChatDateSeparator />
</RadzenExample>

<RadzenText Anchor="chat#compact" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Compact chat
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Create a more compact chat interface suitable for smaller spaces or sidebar implementations by adjusting the height and hiding optional elements.
</RadzenText>
<RadzenExample ComponentName="Chat" Example="ChatCompact">
    <ChatCompact />
</RadzenExample>

<RadzenText Anchor="chat#title" TextStyle="TextStyle.DisplayH5" TagName="TagName.H2" class="rt-pt-12">
    RenderFragment as Title
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use a RenderFragment to display more complex content in the title of the chat component.
</RadzenText>
<RadzenExample ComponentName="Chat" Example="ChatTitle">
    <ChatTitle />
</RadzenExample>
