syncfusion-aspnetcore-chat-ui

Syncfusion ASP.NET Core Chat-UI コントロール

概要

Chat-UI コンポーネントは、リアルタイムメッセージ、ファイル添付、ユーザーのプレゼンス、豊富なカスタマイズオプションを備えた、完全な会話型インターフェイスを提供します。このスキルでは、ASP.NET Core タグヘルパーと Razor ページを使用して、カスタマーサポート、チームコラボレーション、インタラクティブなアプリケーション向けのチャットインターフェイスを実装する方法を説明します。

Chat-UI コンポーネントは、次の機能を備えたインタラクティブなメッセージインターフェイスです。

• 豊富なメッセージ機能： テキストコンテンツ、ピン留めされたメッセージ、スレッド形式の返信、メッセージの転送
• ユーザー管理： 複数ユーザーでの会話、プレゼンス状態、ユーザー設定
• ファイル添付： ファイル形式とサイズの制限付きで、アップロード、プレビュー、ダウンロード
• イベントシステム： 作成、メッセージ送信、ユーザーの入力中、添付ファイルのイベント
• テンプレート： 空のチャット、メッセージ、入力中インジケーター、候補、フッターの UI をカスタマイズ可能
• 外観： プレースホルダー、幅、高さ、CSS クラスを設定可能
• タイムスタンプ： 表示形式をカスタマイズして、タイムスタンプの表示・非表示を切り替え
• 高度な機能： コンパクトモード、グローバル化、RTL サポート、音声からテキストへの変換

クイックスタートの例

@using Syncfusion.EJ2.InteractiveChat;

<div style="height:400px; width:450px">
    <ejs-chatui id="chatUI">
        <e-chatui-user id="user1" user="Albert"></e-chatui-user>
        <e-chatui-messages>
            @foreach (var message in ViewBag.ChatMessagesData)
            {
                <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
            }
        </e-chatui-messages>
    </ejs-chatui>
</div>

対応する C# コントローラー：

using Syncfusion.EJ2.InteractiveChat;

public ActionResult Default()
{
    var currentUser = new ChatUIUser() { Id = "user1", User = "Albert" };
    var otherUser = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
    
    var messages = new List<ChatUIMessage>()
    {
        new ChatUIMessage() { Text = "Hi Michale, are we on track?", Author = currentUser },
        new ChatUIMessage() { Text = "Yes, all set!", Author = otherUser }
    };
    
    ViewBag.ChatMessagesData = messages;
    return View();
}

ドキュメントのナビゲーション

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストールと依存関係
• Razor ページを使用した ASP.NET Core プロジェクトの設定
• タグヘルパーの登録と設定
• CDN スタイルシートとスクリプトの設定
• スクリプトマネージャーの登録
• 基本的な Chat-UI の実装
• 初期ユーザーとメッセージの設定

メッセージの設定

📄 参照： references/messages-configuration.md

• メッセージモデルの設定とプロパティ
• テキストメッセージの追加と管理
• メッセージの設定（ID、テキスト、作成者、タイムスタンプ）
• 重要な会話のためのメッセージのピン留め
• スレッド形式の会話のための返信先
• 転送されたメッセージとメッセージの追跡
• シンプルなレイアウトのためのコンパクトモード

ユーザーの設定

📄 参照： references/user-configuration.md

• ChatUIUser モデルの設定とプロパティ
• ユーザー ID の設定
• 現在のユーザーコンテキストの設定
• 複数ユーザーのサポートと管理
• ユーザーのプレゼンスとステータスインジケーター
• アバターの設定とスタイル設定

外観とスタイル設定

📄 参照： references/appearance-styling.md

• プレースホルダーテキストのカスタマイズ
• 幅と高さの設定
• CSS クラスの適用とカスタマイズ
• コンポーネントレベルのスタイル設定
• テーマのカスタマイズ方法
• レスポンシブデザインのパターン

イベントと操作

📄 参照： references/events-interactions.md

• 初期化のための作成イベント
• メッセージ送信イベントの処理
• ユーザーの入力中イベントの検出
• 添付ファイルのアップロードイベント（開始前、成功、失敗）
• 添付ファイルの削除イベントとクリックイベント
• イベントのバインドパターンとベストプラクティス

メソッドと API

📄 参照： references/methods-api.md

• プログラムからメッセージを追加する addMessage メソッド
• 既存のメッセージを編集する updateMessage メソッド
• 表示位置を移動する scrollToBottom メソッド
• SignalR とのリアルタイム連携
• パフォーマンスとエラー処理のベストプラクティス

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

📄 参照： references/templates-customization.md

• 初期状態のための空のチャットテンプレート
• jsrender を使用したカスタムメッセージテンプレート
• メッセージを整理するための時間区切りテンプレート
• 入力中インジケーターテンプレートのカスタマイズ
• オートコンプリート用の候補テンプレート
• カスタム入力領域用のフッターテンプレート
• 高度なテンプレートパターンとスタイル設定

ファイル添付

📄 参照： references/file-attachments.md

• enableAttachments で添付機能を有効にする
• 添付設定を構成する
• URL エンドポイントを保存および削除する
• ファイル形式の制限（allowedFileTypes）
• ファイルサイズの上限（maxFileSize）
• 保存形式のオプション（Blob と Base64）
• ドラッグ＆ドロップのサポートを構成する
• サーバーパスとアップロード処理

ヘッダーとフッター

📄 参照： references/header-footer.md

• showHeader プロパティでヘッダーを表示／非表示にする
• ヘッダーテキストの設定と表示
• headerIconCss でヘッダーアイコンをスタイリングする
• showFooter プロパティでフッターを表示／非表示にする
• フッターテンプレートのカスタマイズ
• 入力エリアの設定

タイムスタンプと時間区切り

📄 参照： references/timestamps-timebreaks.md

• showTimeStamp でタイムスタンプを表示／非表示にする
• タイムスタンプ形式のカスタマイズ（timeStampFormat）
• メッセージを整理するための時間区切りセパレーター
• 日付ごとのメッセージグループ化
• タイムスタンプのテンプレートパターン

入力中インジケーター

📄 参照： references/typing-indicator.md

• 入力中インジケーターを表示／非表示にする
• 複数ユーザーの入力状況を表示する
• 入力中インジケーターのテンプレートをカスタマイズする
• ユーザーのプレゼンスを検出する
• 入力中インジケーターの UI をスタイリングする

メンションとユーザー参照

📄 参照： references/mentions-integration.md

• メンション可能なユーザーを設定する
• メンショントリガー文字をカスタマイズする
• メッセージ内に事前定義済みのメンションを設定する
• メンションの選択とイベント
• メンション項目のテンプレートとスタイリング

グローバル化と RTL

📄 参照： references/globalization-rtl.md

• ローカライズと多言語サポート
• カルチャとロケールの設定
• RTL（右から左）レイアウトのサポート
• 言語別テンプレート
• 音声テキスト変換のローカライズ

ツールバーの設定

📄 参照： references/toolbar-configuration.md

• ヘッダーツールバーの設定と項目
• メッセージツールバーの設定とカスタマイズ
• ツールバー項目の設定とイベント
• カスタムツールバーのアクションとハンドラー
• ツールバーの表示とスタイリング

高度な機能

📄 参照： references/advanced-features.md

• スクロール処理を伴うオンデマンド読み込み
• 最下部への自動スクロール動作
• 状態管理のための永続化を有効にする
• パフォーマンス最適化の手法
• サーバー側のデータ読み込み戦略

提案機能

📄 参照： references/suggestions-feature.md

• suggestions プロパティで提案を有効にする
• 提案テンプレートのカスタマイズ
• コンテキストに基づく提案のフィルタリング
• 提案の選択と処理
• カスタム提案 UI とスタイリング

よくあるパターン

基本的なチャットインターフェイスを作成する

<div style="height:400px; width:500px">
    <ejs-chatui id="chatUI" 
                 placeholder="Type a message..."
                 showHeader="true"
                 headerText="Support Chat">
        <e-chatui-user id="user1" user="Support Agent"></e-chatui-user>
    </ejs-chatui>
</div>

イベントを使ってメッセージを追加する

<ejs-chatui id="chatUI" messageSend="onMessageSend">
    <e-chatui-user id="user1" user="Albert"></e-chatui-user>
    <e-chatui-messages>
        @foreach (var message in ViewBag.ChatMessagesData)
        {
            <e-chatui-message text="@message.Text" 
                            author="@message.Author"
                            timeStamp="@message.TimeStamp"></e-chatui-message>
        }
    </e-chatui-messages>
</ejs-chatui>

<script>
    function onMessageSend(args) {
        // Handle message send event
        console.log("Message sent:", args);
    }
</script>

ファイル添付を有効にする

<ejs-chatui id="chatUI" enableAttachments="true">
    <e-chatui-user id="user1" user="Albert"></e-chatui-user>
    <e-chatui-attachmentsettings 
        [email protected]("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save")
        [email protected]("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove")
        maxFileSize="5000000"
        allowedFileTypes=".pdf,.docx,.xlsx">
    </e-chatui-attachmentsettings>
</ejs-chatui>

主なプロパティ

プロパティ	型	目的
id	string	ChatUI コンポーネントの一意の識別子
placeholder	string	入力欄のヒントテキスト（デフォルト："Type your message…"）
width	string	チャット UI の幅（デフォルト：100%）
height	string	チャット UI の高さ（デフォルト：100%）
showHeader	boolean	ヘッダーセクションを表示します（デフォルト：true）
headerText	string	ヘッダーのタイトル／名前を表示します
headerToolbar	object	ヘッダーのツールバー項目を設定します
showFooter	boolean	入力フッターを表示します（デフォルト：true）
showTimeStamp	boolean	メッセージのタイムスタンプを表示します（デフォルト：true）
timeStampFormat	string	タイムスタンプの書式パターン（デフォルト："dd/MM/yyyy hh:mm a"）
cssClass	string	スタイリング用の CSS クラス
enableAttachments	boolean	ファイルアップロードを有効にします（デフォルト：false）
enableCompactMode	boolean	すべてのメッセージを左揃えにします（デフォルト：false）
loadOnDemand	boolean	メッセージの遅延読み込みを有効にします（デフォルト：false）
autoScrollToBottom	boolean	最新のメッセージまで自動的にスクロールします（デフォルト：true）
enablePersistence	boolean	セッションをまたいでチャットの状態を保持します（デフォルト：false）
suggestions	array	ユーザー向けのクイック返信候補
messageToolbarSettings	object	メッセージごとのツールバー操作を設定します

よくある使用例

使用例 1：カスタマーサポートチャット

• 複数のサポートエージェントが顧客からの問い合わせに対応
• スクリーンショットやドキュメントをファイル添付
• タイムスタンプ付きのメッセージ履歴
• エージェントの対応状況を示す入力中インジケーター
• サポートエージェントの名前とステータスを表示するヘッダー

使用例 2：チームコラボレーション

• @ メンションでチームメンバーに言及
• 重要な議論の要点をピン留め
• 参照用にメッセージを転送
• メッセージの編集と削除
• 複数ユーザーの在席状況インジケーター

使用例 3：多言語サポート

• アラビア語／ヘブライ語向けの RTL サポート
• グローバリゼーションによる UI 文字列のローカライズ
• 地域設定に応じたタイムスタンプ形式
• 複数の文字セットをサポート