syncfusion-flutter-chat

Syncfusion Flutter Chat と AI AssistView

このスキルでは、会話型 UI 向けの関連する 2 つの Syncfusion Flutter コンポーネント、SfChat（Chat ウィジェット）と SfAIAssistView（AI AssistView ウィジェット）を扱います。多くの外観や設定機能を共有していますが、主な用途はそれぞれ異なります。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• チャットインターフェースを実装する：複数ユーザー間の会話やメッセージングに対応します
• AI アシスタント機能を追加する：リクエストとレスポンスのパターンに対応します
• メッセージングアプリを構築する：受信メッセージと送信メッセージをサポートします
• AI チャットボットのインターフェースを作成する：AI サービスと統合します
• 会話 UI を表示する：メッセージ、アバター、タイムスタンプを表示します
• メッセージの作成を処理する：テキストエディターやアクションボタンを使用します
• メッセージの外観をカスタマイズする：ビルダー、テーマ、スタイルを使用します
• プレースホルダー画面をサポートする：会話がない状態に対応します
• サジェスチョンチップを有効にする：すばやい返信やアクションに対応します
• ツールバーアクションを統合する：返信メッセージに対する操作（いいね、コピー、再試行など）を追加します
• 読み込みインジケーターを表示する：AI のレスポンス生成中に表示します
• RTL をサポートする：右から左に記述する言語に対応します

適切なコンポーネントの選択

次のような場合は SfChat（Chat ウィジェット）を使用します。

• 複数ユーザーの会話インターフェースが必要な場合
• アプリで受信メッセージと送信メッセージを区別する必要がある場合
• 従来型のメッセージングアプリの機能（WhatsApp や Telegram のようなスタイル）が必要な場合
• チームコラボレーション、カスタマーサポート、ソーシャルメッセージング、グループチャット向けのチャットを構築する場合
• メッセージのサジェスチョンを受信メッセージと送信メッセージの両方に表示する場合
• 送信ユーザーを明示的に指定する必要がある場合

次のような場合は SfAIAssistView（AI AssistView ウィジェット）を使用します。

• AI アシスタントまたはチャットボットの機能が必要な場合
• 主な目的が、AI サービスとのリクエストとレスポンスのパターンである場合
• レスポンスメッセージに対するツールバー項目（いいね、よくないね、コピー、再試行など）が必要な場合
• AI がレスポンスを生成している間の読み込みインジケーターが必要な場合
• AI アシスタント、チャットボット、ヘルプボット、Q&A インターフェース向けの UI を構築する場合
• メッセージのサジェスチョンを AI のレスポンスメッセージだけに表示する場合
• リクエストとレスポンスのメッセージを明確に区別する必要がある場合

主な違いの概要：

機能	SfChat	SfAIAssistView
主な用途	複数ユーザーのメッセージング	AI アシスタントとの対話
メッセージの種類	受信／送信	リクエスト／レスポンス
ユーザーの識別	outgoingUser プロパティ	各メッセージの Author
サジェスチョン	任意のメッセージに表示	レスポンスメッセージのみ
ツールバー項目	❌ 非対応	✅ レスポンス用ツールバーをサポート
読み込みインジケーター	❌ 含まれない	✅ レスポンス用ローディングビルダー
用途	チャットアプリ、メッセージング	AI チャットボット、アシスタント
メッセージクラス	ChatMessage	AssistMessage
コンポーザークラス	ChatComposer	AssistComposer
アクションボタンクラス	ChatActionButton	AssistActionButton

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

はじめに

📄 参照： references/getting-started.md

• 両コンポーネントのインストールとパッケージのセットアップ
• SfChat の基本的な実装
• SfAIAssistView の基本的な実装
• パッケージの依存関係とインポート
• 簡単な比較と最初の例

コンポーネントの概要

📄 Chat： references/chat-overview.md

• SfChat ウィジェットの概要と機能
• Chat と AI AssistView の使い分け
• 複数ユーザーの会話機能
• 受信／送信メッセージのパターン
• Chat 固有の機能
• Chat の基本的な設定

📄 AI AssistView： references/aiassistview-overview.md

• SfAIAssistView ウィジェットの概要と機能
• AI AssistView と Chat の使い分け
• リクエスト／レスポンスのパターン
• AI 統合機能
• AIAssistView 固有の機能
• AIAssistView の基本的な設定

会話エリアとメッセージ

📄 読む： references/conversation-area.md

• メッセージの構造と表示
• 受信／送信メッセージ（Chat）
• リクエスト／レスポンスメッセージ（AIAssistView）
• メッセージの設定とカスタマイズ
• ヘッダーとタイムスタンプ
• フッターと追加情報
• メッセージのアバター
• コンテンツエリアのスタイル設定
• メッセージの候補（両方のコンポーネント）
• ツールバー項目（AIAssistView のみ）
• 読み込みインジケーター（AIAssistView のみ）

コンポーザーと入力

📄 読む： references/composer.md

• デフォルトのコンポーザー設定
• テキストエディターのカスタマイズ
• 最小行数と最大行数
• 装飾とスタイル設定
• ヒントテキストとプレースホルダー
• 境界線とパディング
• 前置きアイコンと後置きアイコン
• テキストスタイルのカスタマイズ
• マージンの設定
• カスタムコンポーザービルダー

アクションボタン

📄 読む： references/action-button.md

• アクションボタンの概要
• 送信ボタンの機能
• カスタム子ウィジェット
• onPressed コールバック
• ツールチップのテキスト
• 色（前景色、背景色、フォーカス時、ホバー時、スプラッシュ時）
• エレベーションの設定
• マウスカーソルのカスタマイズ
• 形状と境界線の角丸
• マージンとサイズ

プレースホルダー

📄 読む： references/placeholder.md

• プレースホルダービルダーの概要
• カスタムプレースホルダーウィジェット
• 空の会話状態のデザイン
• ウェルカムメッセージ
• 利用開始時のヒント
• 両方のコンポーネントの例

テーマ設定とカスタマイズ

📄 読む： references/theming.md

• テーマの概要（Chat と AIAssistView）
• SfChatTheme と SfAIAssistViewTheme
• アクションボタンのテーマ設定
• アバターの色とスタイル設定
• メッセージの背景色
• コンテンツのテキストスタイル
• ヘッダーのテキストスタイル
• 候補のスタイル設定
• メッセージの形状と境界線
• ツールバーのテーマ設定（AIAssistView のみ）

ローカライズとアクセシビリティ

📄 読む： references/right-to-left.md

• 右から左（RTL）へのサポート
• Directionality ウィジェットの使用方法
• すべての要素の RTL 表示
• プレースホルダーの RTL
• コンポーザーの RTL
• アクションボタンの RTL
• メッセージとコンテンツの RTL

一般的なパターン

📄 読む： references/common-patterns.md

• メッセージ設定のカスタマイズ
• 複数のアクションを備えたカスタムコンポーザー
• 空の状態に対応するカスタムプレースホルダー
• AI の応答に対する読み込みインジケーター
• 一貫したブランド体験のためのテーマ設定

クイックスタートの例

メッセージを含む基本的な Chat

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/chat.dart';

class MyChat extends StatefulWidget {
  @override
  State<MyChat> createState() => _MyChatState();
}

class _MyChatState extends State<MyChat> {
  List<ChatMessage> _messages = <ChatMessage>[];

  @override
  void initState() {
    super.initState();
    _messages = <ChatMessage>[
      ChatMessage(
        text: 'Hi! How can I help you today?',
        time: DateTime.now(),
        author: const ChatAuthor(
          id: '123-001',
          name: 'John Doe',
        ),
      ),
      ChatMessage(
        text: 'I need help with my order.',
        time: DateTime.now(),
        author: const ChatAuthor(
          id: '123-002',
          name: 'Jane Smith',
        ),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chat')),
      body: SfChat(
        messages: _messages,
        outgoingUser: '123-002',
        composer: const ChatComposer(
          decoration: InputDecoration(
            hintText: 'Type a message',
          ),
        ),
        actionButton: ChatActionButton(
          onPressed: (String newMessage) {
            setState(() {
              _messages.add(
                ChatMessage(
                  text: newMessage,
                  time: DateTime.now(),
                  author: const ChatAuthor(
                    id: '123-002',
                    name: 'Jane Smith',
                  ),
                ),
              );
            });
          },
        ),
      ),
    );
  }
}

AI を統合した基本的な AI AssistView

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';

class MyAIAssistView extends StatefulWidget {
  @override
  State<MyAIAssistView> createState() => _MyAIAssistViewState();
}

class _MyAIAssistViewState extends State<MyAIAssistView> {
  List<AssistMessage> _messages = <AssistMessage>[];

  void _generateAIResponse(String userRequest) async {
    // Call your AI service here
    final String aiResponse = await _getAIResponse(userRequest);
    setState(() {
      _messages.add(
        AssistMessage.response(
          data: aiResponse,
          time: DateTime.now(),
          author: const AssistMessageAuthor(
            id: 'ai-001',
            name: 'AI Assistant',
          ),
        ),
      );
    });
  }

  Future<String> _getAIResponse(String request) async {
    // Connect with your preferred AI service
    // Example: OpenAI, Google AI, Azure AI, etc.
    await Future.delayed(Duration(seconds: 2)); // Simulate API call
    return 'This is a response to: $request';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AI Assistant')),
      body: SfAIAssistView(
        messages: _messages,
        composer: const AssistComposer(
          decoration: InputDecoration(
            hintText: 'Ask me anything',
          ),
        ),
        actionButton: AssistActionButton(
          onPressed: (String userRequest) {
            setState(() {
              _messages.add(
                AssistMessage.request(
                  data: userRequest,
                  time: DateTime.now(),
                  author: const AssistMessageAuthor(
                    id: 'user-001',
                    name: 'User',
                  ),
                ),
              );
              _generateAIResponse(userRequest);
            });
          },
        ),
        placeholderBuilder: (BuildContext context) {
          return const Center(
            child: Text(
              'What can I help you with today?',
              style: TextStyle(fontSize: 16),
            ),
          );
        },
      ),
    );
  }
}

候補を含む Chat

SfChat(
  messages: <ChatMessage>[
    ChatMessage(
      text: 'Which programming language should I learn?',
      time: DateTime.now(),
      author: const ChatAuthor(id: '1', name: 'Alice'),
    ),
    ChatMessage(
      text: 'It depends on your goals. What interests you?',
      time: DateTime.now(),
      author: const ChatAuthor(id: '2', name: 'Bob'),
      suggestions: <ChatMessageSuggestion>[
        const ChatMessageSuggestion(data: 'Web Development'),
        const ChatMessageSuggestion(data: 'Mobile Apps'),
        const ChatMessageSuggestion(data: 'Data Science'),
        const ChatMessageSuggestion(data: 'Game Development'),
      ],
    ),
  ],
  outgoingUser: '1',
)

ツールバー項目を含む AI AssistView

void _generateResponse(String request) async {
  final String response = await _getAIResponse(request);
  setState(() {
    _messages.add(
      AssistMessage.response(
        data: response,
        time: DateTime.now(),
        author: const AssistMessageAuthor(id: 'ai', name: 'AI'),
        toolbarItems: <AssistMessageToolbarItem>[
          const AssistMessageToolbarItem(
            content: Icon(Icons.thumb_up_outlined),
            tooltip: 'Like',
          ),
          const AssistMessageToolbarItem(
            content: Icon(Icons.thumb_down_outlined),
            tooltip: 'Dislike',
          ),
          const AssistMessageToolbarItem(
            content: Icon(Icons.copy),
            tooltip: 'Copy',
          ),
          const AssistMessageToolbarItem(
            content: Icon(Icons.restart_alt),
            tooltip: 'Regenerate',
          ),
        ],
      ),
    );
  });
}

SfAIAssistView(
  messages: _messages,
  onToolbarItemSelected: (bool selected, int messageIndex,
      AssistMessageToolbarItem item, int toolbarItemIndex) {
    // Handle toolbar action (like, dislike, copy, etc.)
    print('Toolbar item selected at index $toolbarItemIndex');
  },
)

主なプロパティ

SfChat の必須プロパティ

• messages - 表示する ChatMessage オブジェクトのリスト
• outgoingUser - メッセージを送信するユーザーの ID（受信／送信を区別します）
• composer - テキスト入力用の ChatComposer
• actionButton - メッセージ送信用の ChatActionButton
• placeholderBuilder - 空の状態に表示するカスタムウィジェット
• incomingMessageSettings - 受信メッセージの設定
• outgoingMessageSettings - 送信メッセージの設定
• messageHeaderBuilder - 各メッセージのカスタムヘッダー
• messageFooterBuilder - 各メッセージのカスタムフッター
• messageContentBuilder - 各メッセージのカスタムコンテンツ
• messageAvatarBuilder - 各メッセージのカスタムアバター

SfAIAssistView の主なプロパティ

• messages - AssistMessage オブジェクト（リクエスト／レスポンス）のリスト
• composer - テキスト入力用の AssistComposer
• actionButton - リクエスト送信用の AssistActionButton
• placeholderBuilder - 空の状態に表示するカスタムウィジェット
• requestMessageSettings - リクエストメッセージの設定
• responseMessageSettings - レスポンスメッセージの設定
• messageHeaderBuilder - 各メッセージのカスタムヘッダー
• messageFooterBuilder - 各メッセージのカスタムフッター
• messageContentBuilder - 各メッセージのカスタムコンテンツ
• messageAvatarBuilder - 各メッセージのカスタムアバター
• responseLoadingBuilder - AI の応答中に表示するカスタムローディングインジケーター
• onToolbarItemSelected - ツールバー項目がタップされたときのコールバック
• onSuggestionItemSelected - 提案チップがタップされたときのコールバック

ChatMessage / AssistMessage のプロパティ

ChatMessage:

• text - メッセージの内容
• time - メッセージのタイムスタンプ
• author - id、name、avatar を含む ChatAuthor
• suggestions - ChatMessageSuggestion 項目のリスト

AssistMessage:

• data - メッセージの内容
• time - メッセージのタイムスタンプ
• author - id、name、avatar を含む AssistMessageAuthor
• suggestions - AssistMessageSuggestion 項目のリスト（レスポンスのみ）
• toolbarItems - AssistMessageToolbarItem のリスト（レスポンスのみ）

Composer のプロパティ（両コンポーネント共通）

• minLines - テキストエディターの最小行数（デフォルト：1）
• maxLines - テキストエディターの最大行数（デフォルト：6）
• decoration - スタイル設定用の InputDecoration
• margin - コンポーザーの周囲のスペース
• textStyle - 入力テキストのスタイル
• builder - カスタムコンポーザーウィジェット

アクションボタンのプロパティ（両コンポーネント共通）

• child - ボタン用のカスタムウィジェット
• onPressed - ボタンが押されたときのコールバック
• tooltip - ツールチップのテキスト
• foregroundColor - アイコン／テキストの色
• backgroundColor - ボタンの背景色
• focusColor - フォーカス時の色
• hoverColor - ホバー時の色
• splashColor - 波紋エフェクトの色
• elevation - 影の高さ
• focusElevation - フォーカス時の高さ
• hoverElevation - ホバー時の高さ
• highlightElevation - 押下時の高さ
• mouseCursor - ホバー時のカーソルスタイル
• shape - ボタンの形状と境界線
• margin - ボタンの周囲のスペース
• size - ボタンの寸法

メッセージ設定のプロパティ（両コンポーネント共通）

• showAuthorName - 投稿者名の表示／非表示
• showTimestamp - タイムスタンプの表示／非表示
• showAuthorAvatar - アバターの表示／非表示
• timestampFormat - タイムスタンプ用の DateFormat
• backgroundColor - メッセージの背景色
• textStyle - メッセージテキストのスタイル
• headerTextStyle - ヘッダーテキストのスタイル
• shape - メッセージバブルの形状
• widthFactor - 画面に対するメッセージ幅の割合（0～1）
• avatarSize - アバターの寸法
• margin - メッセージの周囲のスペース
• padding - メッセージ内のパディング
• avatarPadding - アバター周囲のパディング
• headerPadding - ヘッダー周囲のパディング
• footerPadding - フッター周囲のパディング

一般的なユースケース

SfChat の場合： カスタマーサポートチャット、チームメッセージング、ソーシャルメッセージング、複数ユーザーの会話や受信／送信メッセージのパターンに対応したライブチャットサポート。

SfAIAssistView の場合： AI チャットボット、AI アシスタント、ヘルプボット、リクエスト／レスポンスのパターン、ツールバー項目、ローディングインジケーターに対応した Q&A インターフェース。