syncfusion-blazor-chat-ui

Syncfusion Blazor Chat UI

Syncfusion Blazor Chat UI コンポーネントを使って、豊富な機能を備えた会話型チャットインターフェイスを構築できます。このスキルでは、Blazor Server、WebAssembly、Web App プロジェクトで、複数ユーザーのメッセージングアプリケーション、チャットパネル、インタラクティブな会話 UI を作成するための包括的なガイダンスを提供します。

コンポーネントの概要

SfChatUI コンポーネントは、会話型チャットアプリケーションを構築するための専用 UI コントロールです。次の機能を備えたチャットインターフェイス全体を管理します。

• メッセージ管理： メッセージのライフサイクル全体を管理するチャットメッセージのコレクション
• ユーザー管理： プロファイル、アバター、ステータスに対応した複数ユーザーのサポート
• プレゼンス機能： 入力中インジケーター、オンラインステータス、ユーザー識別
• リッチなレンダリング： メッセージ、タイムスタンプ、入力中インジケーター、候補のテンプレート
• ファイルのサポート： ファイル添付のアップロードと統合
• イベントシステム： ライフサイクルイベントとユーザー操作のコールバック
• カスタマイズ： スタイルとテーマを完全に制御

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• 基本的なコンポーネント構造と初期化
• ユーザーとメッセージの設定
• 会話を含む最小限の動作例

メッセージとユーザーの管理

📄 参照： references/messages-and-users.md

• ChatMessage の設定とプロパティ
• UserModel のセットアップとプロパティ
• メッセージのテキストコンテンツ管理
• 作成者の識別とユーザーの割り当て
• メッセージコレクションと会話履歴の構築

ユーザープロファイルとアバター

📄 参照： references/user-profiles-avatars.md

• 画像を使ったアバター URL の設定
• アバターの背景色のカスタマイズ
• ユーザーステータスインジケーター（オンライン、オフライン、取り込み中、離席中）
• ユーザー向けのカスタム CSS スタイル
• ユーザーの識別と表示名

入力中インジケーター

📄 参照： references/typing-indicators.md

• TypingUsers プロパティの設定
• 入力中ステータスインジケーターの表示／非表示
• 複数の入力中ユーザーの管理
• 入力中ステータスの動的な更新
• 入力中インジケーターのテンプレートのカスタマイズ

タイムスタンプと書式設定

📄 参照： references/timestamps-and-formatting.md

• ShowTimestamp プロパティによるタイムスタンプの有効化／無効化
• メッセージのタイムスタンプ設定
• TimestampFormat のカスタマイズ
• TimeBreak 区切り（今日、昨日、特定の日付）
• TimeBreak テンプレートのスタイル設定

テンプレートとカスタマイズ

📄 参照： references/templates-and-customization.md

• 初期状態の表示に使う EmptyChatTemplate
• メッセージをカスタム描画する MessageTemplate
• 日付区切りに使う TimeBreakTemplate
• 入力中の表示に使う TypingUsersTemplate
• クイック返信ボタンに使う SuggestionTemplate
• CSS スタイルとテーマの統合

添付ファイルとイベント

📄 参照： references/attachments-and-events.md

• ファイル添付の設定（Enable）
• SaveUrl と RemoveUrl エンドポイントのセットアップ
• AllowedFileTypes によるフィルタリング
• MaxFileSize の制限と制約
• SaveFormat のオプション（Blob と Base64）
• イベント処理：Created、MessageSend、UserTyping
• 添付ファイルのイベント：OnAttachmentUploadReady、UploadSuccess、UploadFailed

プログラム API とメソッド 🆕

📄 参照： references/programmatic-api.md

• 最新のメッセージへ移動する ScrollToBottomAsync()
• 特定のメッセージへ移動する ScrollToMessageAsync()
• 既存のメッセージを編集する UpdateMessageAsync()
• 入力フィールドを制御する FocusAsync()
• エラー処理を含む完全な例

高度な機能 🆕

📄 参照： references/advanced-features.md

• AutoScrollToBottom の設定
• グループチャット向けの EnableCompactMode
• ヘッダーとフッターのカスタマイズ
• メンションシステム（@mention）の設定
• クイック返信の候補
• パフォーマンス向上のための LoadOnDemand
• RTL（右から左）のサポート
• CssClass によるスタイルのカスタマイズ

クイックスタート

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 500px; width: 600px;">
    <SfChatUI ID="chatUser" User="CurrentUser" Messages="Messages"></SfChatUI>
</div>

@code {
    private UserModel CurrentUser = new UserModel 
    { 
        ID = "user1", 
        User = "Albert",
        AvatarBgColor = "#4a90e2"
    };

    private UserModel OtherUser = new UserModel 
    { 
        ID = "user2", 
        User = "Michale Suyama",
        AvatarBgColor = "#7cb342"
    };

    private List<ChatMessage> Messages = new()
    {
        new ChatMessage 
        { 
            Text = "Hi, how are you?", 
            Author = new UserModel { ID = "user1", User = "Albert" }
        },
        new ChatMessage 
        { 
            Text = "I'm doing great! How about you?", 
            Author = new UserModel { ID = "user2", User = "Michale Suyama" }
        }
    };
}

一般的なパターン

パターン 1：ステータス付きの複数ユーザーの会話

オンライン／オフラインのステータスインジケーターとともに複数のユーザーを表示します。

<SfChatUI ID="chat" User="CurrentUser" Messages="Messages">
</SfChatUI>

@code {
    private UserModel CurrentUser = new UserModel 
    { 
        ID = "user1", 
        User = "Albert",
        StatusIconCss = "e-icons e-user-online"
    };

    private List<ChatMessage> Messages = new();
}

パターン 2：入力中インジケーター付きのチャット

ユーザーが入力中であることを表示します。

<SfChatUI 
    ID="chat" 
    User="CurrentUser" 
    Messages="Messages"
    TypingUsers="TypingUsers">
</SfChatUI>

@code {
    private List<UserModel> TypingUsers = new();
    
    private void UserStartTyping(UserModel user)
    {
        TypingUsers.Add(user);
        StateHasChanged();
    }
}

パターン 3：カスタムメッセージテンプレート

メッセージの見た目をカスタマイズします。

<SfChatUI ID="chat" User="CurrentUser" Messages="Messages">
    <MessageTemplate>
        <div class="custom-message">
            <strong>@context.Message.Author.User</strong>
            <p>@((MarkupString)context.Message.Text)</p>
        </div>
    </MessageTemplate>
</SfChatUI>

パターン 4：ファイル添付付きのチャット

ユーザーがファイルを共有できるようにします。

<SfChatUI ID="chat" User="CurrentUser" Messages="Messages">
    <ChatUIAttachment 
        Enable 
        SaveUrl="@SaveUrl" 
        RemoveUrl="@RemoveUrl"
        AllowedFileTypes=".pdf,.docx,.jpg,.png">
    </ChatUIAttachment>
</SfChatUI>

@code {
    private string SaveUrl = "api/upload/save";
    private string RemoveUrl = "api/upload/remove";
}

パターン 5：プログラムによる制御を伴う自動スクロール

自動的に最下部までスクロールし、特定のメッセージに移動します。

<SfChatUI 
    @ref="chatRef"
    ID="chat" 
    User="CurrentUser" 
    Messages="Messages"
    AutoScrollToBottom="true">
</SfChatUI>

<button @onclick="ScrollToBottom">Go to Latest</button>
<button @onclick="FocusInput">Focus Input</button>

@code {
    private SfChatUI chatRef;
    
    private async Task ScrollToBottom()
    {
        await chatRef.ScrollToBottomAsync();
    }
    
    private async Task FocusInput()
    {
        await chatRef.FocusAsync();
    }
}

パターン 6：UpdateMessageAsync によるメッセージ編集

既存のメッセージをプログラムから編集します。

<SfChatUI @ref="chatRef" ID="chat" User="CurrentUser" Messages="Messages">
</SfChatUI>

@code {
    private SfChatUI chatRef;
    
    private async Task EditMessage(string messageId, string newText)
    {
        var message = Messages.FirstOrDefault(m => m.ID == messageId);
        if (message != null)
        {
            message.Text = newText;
            await chatRef.UpdateMessageAsync(message, messageId);
        }
    }
}

パターン 7：ユーザーをタグ付けするメンションシステム

ユーザーがメッセージ内で他のユーザーにメンションできるようにします。

<SfChatUI 
    ID="chat" 
    User="CurrentUser" 
    Messages="Messages"
    MentionChar="@"
    MentionUsers="AllUsers"
    ValueSelecting="@OnMentionSelected">
</SfChatUI>

@code {
    private List<UserModel> AllUsers = new()
    {
        new UserModel { ID = "user1", User = "Albert" },
        new UserModel { ID = "user2", User = "Michale" },
        new UserModel { ID = "user3", User = "Reena" }
    };
    
    private void OnMentionSelected(MentionValueSelectingEventArgs<UserModel> args)
    {
        Console.WriteLine($"User mentioned: {args.ItemData.User}");
    }
}

パターン 8：グループチャット向けのコンパクトモード

グループチャット形式で、すべてのメッセージを左揃えで表示します。

<SfChatUI 
    ID="chat" 
    User="CurrentUser" 
    Messages="Messages"
    EnableCompactMode="true">
</SfChatUI>

@code {
    // In compact mode, all messages appear on left side
    // Useful for group chat or support ticket interfaces
}

主要なプロパティ

プロパティ	型	目的
ID	string	コンポーネントを一意に識別する ID
User	UserModel	現在ログインしているユーザー
Messages	List<ChatMessage>	会話メッセージのコレクション
ShowTimestamp	bool	メッセージのタイムスタンプを表示します（デフォルト：true）
TimestampFormat	string	日時の形式（デフォルト："dd/MM/yyyy hh:mm tt"）
ShowTimeBreak	bool	メッセージ間に日付区切りを表示します
TypingUsers	List<UserModel>	現在入力中のユーザー
AutoScrollToBottom	bool	新しいメッセージが届いたときに最下部まで自動スクロールします（デフォルト：false）
EnableCompactMode	bool	すべてのメッセージを左側に揃えます（デフォルト：false）
Height	string	コンポーネントの高さ（デフォルト："100%"）
Width	string	コンポーネントの幅（デフォルト："100%"）
HeaderText	string	ヘッダーに表示するテキスト（デフォルト："Chat"）
ShowHeader	bool	ヘッダーを表示／非表示にします（デフォルト：true）
ShowFooter	bool	フッターを表示／非表示にします（デフォルト：true）
Placeholder	string	入力欄のプレースホルダーテキスト（デフォルト："Type your message…"）
Suggestions	List<string>	クイック返信の候補
MentionChar	char	メンションのトリガー文字（デフォルト：'@'）
MentionUsers	List<UserModel>	メンション可能なユーザー
LoadOnDemand	bool	必要に応じてメッセージを読み込みます（デフォルト：false）
CssClass	string	カスタム CSS スタイル
EnableRtl	bool	右から左への表示方向をサポートします（デフォルト：false）
EmptyChatTemplate	RenderFragment	空の状態に表示するカスタムコンテンツ
MessageTemplate	RenderFragment<MessageTemplateContext>	メッセージのカスタムレンダリング
TimeBreakTemplate	RenderFragment<TimeBreakTemplateContext>	日付区切りのカスタマイズ
TypingUsersTemplate	RenderFragment<TypingUsersTemplateContext>	入力中インジケーターのカスタマイズ
SuggestionTemplate	RenderFragment<SuggestionTemplateContext>	候補表示のカスタマイズ
FooterTemplate	RenderFragment	カスタムフッター領域
PreviewTemplate	RenderFragment<PreviewTemplateContext>	添付ファイルプレビューのカスタマイズ

プログラムによるメソッド

Chat UI コンポーネントには、プログラムから制御するための非同期メソッドが用意されています。

ScrollToBottomAsync()

チャットを最下部までスクロールします。最新のメッセージを表示する場合に便利です。

@ref="chatRef"

private SfChatUI chatRef;

private async Task ShowLatestMessages()
{
    await chatRef.ScrollToBottomAsync();
}

ScrollToMessageAsync(string messageId)

ID を指定して特定のメッセージに移動します。

private async Task NavigateToMessage(string targetMessageId)
{
    await chatRef.ScrollToMessageAsync(targetMessageId);
}

UpdateMessageAsync(ChatMessage message, string msgId)

既存のメッセージ内容を更新します。

private async Task EditMessage(string messageId, string newText)
{
    var message = Messages.FirstOrDefault(m => m.ID == messageId);
    if (message != null)
    {
        message.Text = newText;
        await chatRef.UpdateMessageAsync(message, messageId);
    }
}

FocusAsync()

チャットの入力欄にフォーカスを設定します。

private async Task FocusChatInput()
{
    await chatRef.FocusAsync();
}

一般的なユースケース

1. カスタマーサポートチャット - エージェントがオンラインで対応するライブサポートウィジェット
2. チームメッセージング - 社内コミュニケーションプラットフォーム
3. ボット連携 - ユーザーインターフェースを備えたAIチャットボット
4. コミュニティチャット - 複数ユーザーが参加する会話ルーム
5. ヘルプデスク - チケット管理とメッセージングのインターフェース
6. ソーシャル機能 - アプリ内メッセージングと通知
7. リアルタイムコラボレーション - 共同作業中のライブチャット