syncfusion-react-chat-ui

Syncfusion React の Syncfusion React Chat-UI

コンポーネントの概要

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

主な機能

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

• リッチメッセージのサポート： テキスト、Markdown、書式設定されたコンテンツ
• ユーザー管理： 複数ユーザーでの会話、プレゼンス状態、アバター
• ファイル添付： 制限付きのアップロード、プレビュー、ダウンロード
• イベントシステム： ライフサイクル、インタラクション、添付ファイルのイベント
• テンプレート： メッセージ、候補、フッター向けのカスタマイズ可能な UI
• 国際化： 多言語および RTL のサポート

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

はじめに

📄 参照： references/getting-started.md

• パッケージのインストール
• 基本的なコンポーネントの初期化
• CSS のテーマ設定とインポート

メッセージの管理

📄 参照： references/message-management.md

• メッセージの追加と更新
• 最新のメッセージへの自動スクロール
• メッセージの段階的な読み込み（オンデマンド）
• メッセージの設定（ピン留め、返信、転送）
• メッセージのステータス追跡
• メッセージツールバーのカスタマイズ

ユーザーの設定

📄 参照： references/user-configuration.md

• ユーザーモデルの設定
• アバターのカスタマイズ
• ユーザーのプレゼンス状態
• CSS クラスのカスタマイズ

イベントとインタラクション

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

• コンポーネントのライフサイクルイベント
• メッセージ送信イベント
• ユーザーの入力イベント（完全なイベント引数を含む）
• 添付ファイルのアップロードイベントとクリックイベント
• ツールバーのクリックイベント

テンプレートシステム

📄 参照： references/templating-system.md

• 空のチャットテンプレート
• メッセージのカスタムレンダリング
• 時刻区切りテンプレート
• 入力インジケーターのテンプレート
• 候補のテンプレート
• フッターテンプレートのカスタマイズ

ファイル添付

📄 参照： references/file-attachments.md

• 添付ファイルのサポートを有効にする
• アップロード先エンドポイントの設定
• ファイルの種類とサイズの制限
• ドラッグ＆ドロップのサポート
• 添付ファイルのテンプレート（プレビューとフッター）
• 添付ファイルのクリックイベントの処理

ヘッダーのカスタマイズ

📄 参照： references/header-customization.md

• ヘッダーの表示設定とテキスト
• ヘッダーアイコンのスタイル設定
• ツールバーの設定
• ツールバー項目の種類とイベント

外観とスタイル

📄 参照： references/appearance-styling.md

• 密度の高い会話向けのコンパクトモードのレイアウト
• プレースホルダーテキストの設定
• 幅と高さのカスタマイズ
• CSS クラスの適用
• コンポーネントレベルのスタイル設定

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

📄 参照： references/timestamp-and-timebreaks.md

• タイムスタンプの表示と非表示
• タイムスタンプ形式のカスタマイズ
• 時刻区切りのセパレーター
• 日付ごとの整理

入力インジケーター

📄 参照： references/typing-indicator.md

• 入力インジケーターの表示と非表示
• 複数ユーザーの入力状況の表示
• 入力インジケーターのテンプレートのカスタマイズ

メンションの統合

📄 参照： references/mention-integration.md

• メンション可能なユーザーの設定
• メンショントリガー文字のカスタマイズ
• メッセージ内の事前定義されたメンション
• メンション選択イベント

グローバリゼーションと RTL

📄 参照： references/globalization-rtl.md

• ローカライズと言語サポート
• 右から左（RTL）のレイアウト
• 入力インジケーターのローカライズ

クイックスタートの例

import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const currentUserModel: UserModel = {
        id: "user1",
        user: "Albert"
    };

    const otherUserModel: UserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    return (
        <ChatUIComponent user={currentUserModel} headerText="Chat Support">
            <MessagesDirective>
                <MessageDirective text="Hello, how can I help?" author={currentUserModel} />
                <MessageDirective text="I need assistance with my order." author={otherUserModel} />
            </MessagesDirective>
        </ChatUIComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

よく使われるパターン

サポートチャットインターフェースの作成

<ChatUIComponent 
  user={currentUser}
  headerText="Support Chat"
  enableAttachments={true}
  showTimeStamp={true}
  showHeader={true}
  messageToolbarSettings={{ items: ['Copy', 'Reply', 'Delete'] }}
>
  <MessagesDirective>
    {/* messages populate here */}
  </MessagesDirective>
</ChatUIComponent>

メッセージの動的な追加

const chatRef = useRef<ChatUIComponent>(null);

const addNewMessage = () => {
  chatRef.current.addMessage({
    author: userModel,
    text: "Your message here",
    timeStamp: new Date()
  });
};

複数のテンプレートを設定する

messageTemplate、emptyChatTemplate、timeBreakTemplate、suggestionTemplateを実装して、完全にカスタマイズできます。

主なプロパティ

プロパティ	型	目的
user	UserModel	現在ログインしているユーザー
messages	MessageModel[]	初期メッセージリスト
headerText	string	ヘッダーのタイトル
placeholder	string	入力フィールドのヒント
enableAttachments	boolean	ファイルのアップロードを有効化
showTimeStamp	boolean	メッセージのタイムスタンプを表示
showHeader	boolean	ヘッダーセクションを表示
showFooter	boolean	入力フッターを表示
autoScrollToBottom	boolean	最新のメッセージまで自動スクロール
loadOnDemand	boolean	メッセージを段階的に読み込む
enableCompactMode	boolean	左寄せのコンパクトなレイアウト
enableRtl	boolean	右から左へのレイアウト
locale	string	言語／カルチャーコード

一般的なユースケース

ユースケース 1：カスタマーサポートチャット

• 複数のサポートエージェントが顧客からの問い合わせに対応
• スクリーンショットのファイル添付と自動スクロール
• エージェントの対応状況を示す入力中インジケーター
• 長い会話履歴を段階的に読み込み
• エージェントの対応状況を示す入力中インジケーター

ユースケース 2：チームコラボレーション

• @を使ってチームメンバーにメンション
• グループでの会話にコンパクトモードを使用
• 重要な議論をピン留め
• 参照用にメッセージを転送
• メッセージの編集と削除

ユースケース 3：多言語チャットアプリケーション

• アラビア語／ヘブライ語のRTLに対応
• UI文字列をローカライズ
• 複数のカルチャーに対応

---

完全な例や高度なシナリオについては、上記の各リファレンスファイルをご覧ください。