syncfusion-vue-chat-ui

Syncfusion Vue Chat UI コンポーネント

Syncfusion Vue Chat UI コンポーネントは、会話型アプリケーションを構築するための、モダンで機能豊富なインターフェイスを提供します。リアルタイムメッセージング、ユーザーアバター、入力インジケーター、ファイル添付、メッセージへの返信、メンション、タイムスタンプ、ボット連携に対応しています。

コンポーネントの概要

Vue Chat UI コンポーネント（ejs-chatui）では、次の機能を利用できます。

• メッセージ管理：作成者、タイムスタンプ、ステータスなどの豊富なメタデータを含むメッセージの追加、更新、表示
• ユーザーシステム：現在のユーザーと他の参加者のアバター、名前、ステータスインジケーターの設定
• インタラクティブ機能：メッセージへの返信、ピン留め、転送、ツールバー操作、@メンション
• ファイル添付：ドラッグ＆ドロップに対応したファイルのアップロード、プレビュー、表示
• テンプレート：メッセージ、候補、空の状態、入力インジケーター、添付ファイル、時間区切りのカスタマイズ
• イベント：メッセージ送信、ユーザーの入力、添付ファイルのアップロード、メンションの選択、ツールバーのクリックの処理
• アクセシビリティ：WCAG への準拠、キーボードナビゲーション、RTL 対応を標準搭載
• ボット連携：Microsoft Bot Framework および Dialogflow との接続

パッケージ：@syncfusion/ej2-vue-interactive-chat
Vue のサポート：Vue 3 依存関係：Base、Inputs、Navigations、Buttons、Popups、Dropdowns、Splitbuttons

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ（@syncfusion/ej2-vue-interactive-chat）
• 基本的な Chat UI の実装
• CSS のインポートと Material3 テーマの設定
• コンポーネントの登録と最初のレンダリング
• <e-messages> および <e-message> ディレクティブを使用したメッセージの定義
• 現在のユーザーの設定

メッセージの設定

📄 参照： references/messages.md

• メッセージモデルの構造（テキスト、作成者、タイムスタンプ、ID）
• <e-message> セレクターを使用したメッセージの追加
• メッセージのプロパティ：isPinned、isForwarded、replyTo
• アイコンとツールチップを使用したメッセージのステータス
• メッセージへのファイル添付
• メッセージテキスト内でのユーザーへのメンション
• 追跡と更新に使用するメッセージ ID

ユーザーとアバター

📄 参照： references/users.md

• ユーザーモデルの設定（id、user、avatarUrl）
• 現在のユーザーと他の参加者
• アバターの表示（URL またはイニシャルへのフォールバック）
• アバターの背景色のカスタマイズ
• cssClass を使用したステータスアイコン
• 入力中のユーザーリストとインジケーター
• ユーザーの CSS クラスのカスタマイズ

外観とスタイル

📄 参照： references/appearance.md

• コンポーネントのサイズ（高さ、幅）
• cssClass プロパティを使用した CSS クラスのカスタマイズ
• RTL（右から左）への対応
• コンパクトモードのレイアウト（すべてのメッセージを左揃え）
• メッセージがない場合の空のチャットテンプレート
• ページの再読み込み後も維持される設定
• Material3、Bootstrap、Fabric によるテーマ設定

ヘッダーとフッターの設定

📄 参照： references/header-footer.md

• ヘッダーのテキストとアイコンの設定
• ヘッダーのツールバー設定と項目
• ツールバー項目の設定（テキスト、アイコン、ツールチップ、配置）
• showHeader プロパティを使用したヘッダーの表示／非表示
• showFooter プロパティを使用したフッターの表示／非表示
• フッターテンプレートのカスタマイズ
• 入力テキストエリアのプレースホルダーテキスト
• ツールバー項目のクリックイベント

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

📄 参照： references/timestamps-timebreaks.md

• showTimeStamp を使用したタイムスタンプの表示／非表示
• タイムスタンプ形式のカスタマイズ
• 日付に基づいてグループ化するための時間区切り
• 時間区切りのカスタムテンプレート
• ローカライズとカルチャ固有の形式
• メッセージごとのタイムスタンプ形式

高度な機能

📄 参照： references/advanced-features.md

• トリガー文字を使用した@メンション機能
• メンション対象ユーザーの一覧と候補ポップアップ
• ファイル添付の設定（saveUrl、許可する種類、最大サイズ）
• 添付ファイルのドラッグ＆ドロップ
• メッセージツールバー（返信、ピン留め、削除、コピー、転送）
• メッセージツールバーのカスタマイズとイベント
• メッセージ履歴の遅延読み込み
• 新しいメッセージが届いたときに自動で最下部までスクロール
• 入力テキストエリアの上に候補を表示

テンプレート

📄 参照： references/templates.md

• メッセージをカスタムレンダリングするためのメッセージテンプレート
• 候補項目用の候補テンプレート
• 入力中インジケーター用の入力中ユーザーテンプレート
• メッセージがない状態を表示する空のチャットテンプレート
• カスタムフッター用のフッターテンプレート
• フッターにファイルを表示するための添付ファイルテンプレート
• 添付ファイルのプレビュー用テンプレート
• 日付の区切り用の時間区切りテンプレート
• テンプレートのコンテキストデータ（message、index、suggestion）

イベントとメソッド

📄 参照： references/events-methods.md

• created イベント（コンポーネントの初期化）
• messageSend イベント（メッセージ送信前）
• userTyping イベント（入力中インジケーター）
• mentionSelect イベント（メンションの選択）
• 添付ファイルのイベント（beforeUpload、success、failure、removed）
• ツールバー項目のクリックイベント（ヘッダーとメッセージのツールバー）
• メッセージを追加する addMessage() メソッド
• メッセージを変更する updateMessage() メソッド
• ナビゲーション用の scrollToBottom() メソッド
• 特定のメッセージまでスクロールする scrollToMessage() メソッド
• 入力テキストエリア用の focus() メソッド

ボット連携

📄 参照： references/bot-integrations.md

• Microsoft Bot Framework との連携
• Google Dialogflow との連携
• ボットのメッセージ処理と応答
• ボットサービスへの接続
• ボットとの会話フローの例
• ボットから開始されたメッセージの処理

クイックスタート

基本的なチャット UI

<template>
  <div id="container" style="height: 400px; width: 500px;">
    <ejs-chatui :user="currentUser">
      <e-messages>
        <e-message 
          :author="currentUser" 
          text="Hello! How can I help you today?"
        ></e-message>
        <e-message 
          :author="supportUser" 
          text="Hi! I need assistance with my order."
        ></e-message>
      </e-messages>
    </ejs-chatui>
  </div>
</template>

<script setup>
import { 
  ChatUIComponent as EjsChatui, 
  MessagesDirective as EMessages, 
  MessageDirective as EMessage 
} from "@syncfusion/ej2-vue-interactive-chat";

const currentUser = {
  id: "user1",
  user: "Albert",
  avatarUrl: "./albert.png"
};

const supportUser = {
  id: "user2",
  user: "Support Agent",
  avatarUrl: "./support.png"
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/chat-ui/index.css";
</style>

よく使われるパターン

動的なメッセージ処理

<script setup>
import { ref } from 'vue';
import { ChatUIComponent as EjsChatui } from "@syncfusion/ej2-vue-interactive-chat";

const chatRef = ref(null);

// Add message dynamically
const sendMessage = (text) => {
  chatRef.value.addMessage({
    text: text,
    author: currentUser,
    timestamp: new Date()
  });
};

// Handle message send event
const onMessageSend = (args) => {
  console.log('Message sent:', args.message);
  // Send to backend or bot service
};
</script>

<template>
  <ejs-chatui 
    ref="chatRef"
    :user="currentUser"
    :messageSend="onMessageSend"
  ></ejs-chatui>
</template>

メッセージへの返信とスレッド

<e-message 
  :author="currentUser" 
  text="I've completed the review."
  :replyTo="{
    messageID: 'msg-123',
    text: 'Can you review the document?',
    user: otherUser,
    timestamp: new Date('2026-03-27T10:00:00')
  }"
></e-message>

ファイル添付

<ejs-chatui 
  :user="currentUser"
  :enableAttachments="true"
  :attachmentSettings="{
    saveUrl: 'https://api.example.com/upload',
    allowedFileTypes: '.jpg,.png,.pdf,.docx',
    maxFileSize: 5242880,
    maximumCount: 3
  }"
  :beforeAttachmentUpload="handleBeforeUpload"
  :attachmentUploadSuccess="handleUploadSuccess"
></ejs-chatui>

@メンション

<ejs-chatui 
  :user="currentUser"
  mentionTriggerChar="@"
  :mentionUsers="[
    { id: 'u1', user: 'Alice' },
    { id: 'u2', user: 'Bob' },
    { id: 'u3', user: 'Charlie' }
  ]"
  :mentionSelect="handleMentionSelect"
></ejs-chatui>