Syncfusion Flutter Chat & AI AssistView

This skill covers two related Syncfusion Flutter components for conversational UI: SfChat (Chat widget) and SfAIAssistView (AI AssistView widget). While they share many visual and configuration features, they serve different primary purposes.

When to Use This Skill

Use this skill when you need to:

Implement chat interfaces with multi-user conversations and messaging
Add AI assistant functionality with request-response patterns
Build messaging apps with incoming/outgoing message support
Create AI chatbot interfaces with AI service integration
Display conversation UI with messages, avatars, and timestamps
Handle message composition with text editors and action buttons
Customize message appearance with builders, themes, and styling
Support placeholder screens for empty conversation states
Enable suggestion chips for quick responses or actions
Integrate toolbar actions for response messages (like, copy, retry)
Show loading indicators for AI response generation
Implement RTL support for right-to-left languages

Choosing the Right Component

Use SfChat (Chat Widget) when:

You need multi-user conversation interfaces
Your app requires incoming and outgoing messages differentiation
You need traditional messaging app functionality (WhatsApp, Telegram style)
Building chat for: team collaboration, customer support, social messaging, group chats
Message suggestions should appear on both incoming/outgoing messages
You need to identify the outgoing user explicitly

Use SfAIAssistView (AI AssistView Widget) when:

You need AI assistant or chatbot functionality
Your primary goal is request-response patterns with AI services
You need toolbar items on response messages (like, dislike, copy, retry)
You need loading indicators while AI generates responses
Building UI for: AI assistants, chatbots, help bots, Q&A interfaces
Message suggestions should only appear on AI response messages
You need clear request vs response message distinction

Key Differences Summary:

Feature	SfChat	SfAIAssistView
Primary Purpose	Multi-user messaging	AI assistant interaction
Message Types	Incoming/Outgoing	Request/Response
User Identification	outgoingUser property	Author in each message
Suggestions	On any message	Only on response messages
Toolbar Items	❌ Not supported	✅ Response toolbar support
Loading Indicator	❌ Not included	✅ Response loading builder
Use Case	Chat apps, messaging	AI chatbots, assistants
Message Classes	ChatMessage	AssistMessage
Composer Classes	ChatComposer	AssistComposer
Action Button Classes	ChatActionButton	AssistActionButton

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and package setup for both components
Basic SfChat implementation
Basic SfAIAssistView implementation
Package dependencies and imports
Quick comparison and first examples

Component Overview

📄 For Chat: references/chat-overview.md

SfChat widget overview and features
When to use Chat vs AI AssistView
Multi-user conversation capabilities
Incoming/outgoing message patterns
Chat-specific capabilities
Basic chat configuration

📄 For AI AssistView: references/aiassistview-overview.md

SfAIAssistView widget overview and features
When to use AI AssistView vs Chat
Request/response patterns
AI integration capabilities
AIAssistView-specific capabilities
Basic AIAssistView configuration

Conversation Area and Messages

📄 Read: references/conversation-area.md

Message structure and display
Incoming/outgoing messages (Chat)
Request/response messages (AIAssistView)
Message settings and customization
Headers and timestamps
Footers and additional info
Message avatars
Content area styling
Message suggestions (both components)
Toolbar items (AIAssistView only)
Loading indicators (AIAssistView only)

Composer and Input

📄 Read: references/composer.md

Default composer configuration
Text editor customization
Minimum and maximum lines
Decoration and styling
Hint text and placeholders
Borders and padding
Prefix and suffix icons
Text style customization
Margin configuration
Custom composer builder

Action Button

📄 Read: references/action-button.md

Action button overview
Send button functionality
Custom child widgets
onPressed callback
Tooltip text
Colors (foreground, background, focus, hover, splash)
Elevation settings
Mouse cursor customization
Shape and border radius
Margin and size

Placeholder

📄 Read: references/placeholder.md

Placeholder builder overview
Custom placeholder widgets
Empty conversation state design
Welcome messages
Getting started hints
Examples for both components

Theming and Customization

📄 Read: references/theming.md

Theme overview (Chat vs AIAssistView)
SfChatTheme and SfAIAssistViewTheme
Action button theming
Avatar colors and styling
Message background colors
Content text styles
Header text styles
Suggestion styling
Message shapes and borders
Toolbar theming (AIAssistView only)

Localization and Accessibility

📄 Read: references/right-to-left.md

Right-to-left (RTL) support
Directionality widget usage
RTL rendering for all elements
RTL for placeholder
RTL for composer
RTL for action button
RTL for messages and content

Common Patterns

📄 Read: references/common-patterns.md

Message settings customization
Custom composer with multiple actions
Custom placeholder for empty state
Loading indicator for AI responses
Theming for consistent brand experience

Quick Start Examples

Basic Chat with Messages

dart

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',
                  ),
                ),
              );
            });
          },
        ),
      ),
    );
  }
}

Basic AI AssistView with AI Integration

dart

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 with Suggestions

dart

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 with Toolbar Items

dart

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');
  },
)

Key Properties

SfChat Essential Properties

```
messages
```
- List of ChatMessage objects to display
```
outgoingUser
```
- ID of the user sending messages (distinguishes incoming/outgoing)
```
composer
```
- ChatComposer for text input
```
actionButton
```
- ChatActionButton for sending messages
```
placeholderBuilder
```
- Custom widget for empty state
```
incomingMessageSettings
```
- Settings for incoming messages
```
outgoingMessageSettings
```
- Settings for outgoing messages
```
messageHeaderBuilder
```
- Custom header for each message
```
messageFooterBuilder
```
- Custom footer for each message
```
messageContentBuilder
```
- Custom content for each message
```
messageAvatarBuilder
```
- Custom avatar for each message

SfAIAssistView Essential Properties

```
messages
```
- List of AssistMessage objects (request/response)
```
composer
```
- AssistComposer for text input
```
actionButton
```
- AssistActionButton for sending requests
```
placeholderBuilder
```
- Custom widget for empty state
```
requestMessageSettings
```
- Settings for request messages
```
responseMessageSettings
```
- Settings for response messages
```
messageHeaderBuilder
```
- Custom header for each message
```
messageFooterBuilder
```
- Custom footer for each message
```
messageContentBuilder
```
- Custom content for each message
```
messageAvatarBuilder
```
- Custom avatar for each message
```
responseLoadingBuilder
```
- Custom loading indicator while AI responds
```
onToolbarItemSelected
```
- Callback when toolbar item is tapped
```
onSuggestionItemSelected
```
- Callback when suggestion chip is tapped

ChatMessage / AssistMessage Properties

ChatMessage:

```
text
```
- Message content
```
time
```
- Timestamp of the message
```
author
```
- ChatAuthor with id, name, and avatar
```
suggestions
```
- List of ChatMessageSuggestion items

AssistMessage:

```
data
```
- Message content
```
time
```
- Timestamp of the message
```
author
```
- AssistMessageAuthor with id, name, and avatar
```
suggestions
```
- List of AssistMessageSuggestion items (response only)
```
toolbarItems
```
- List of AssistMessageToolbarItem (response only)

Composer Properties (Both Components)

```
minLines
```
- Minimum lines in text editor (default: 1)
```
maxLines
```
- Maximum lines in text editor (default: 6)
```
decoration
```
- InputDecoration for styling
```
margin
```
- Space around the composer
```
textStyle
```
- Text style for input
```
builder
```
- Custom composer widget

Action Button Properties (Both Components)

```
child
```
- Custom widget for button
```
onPressed
```
- Callback when button is pressed
```
tooltip
```
- Tooltip text
```
foregroundColor
```
- Icon/text color
```
backgroundColor
```
- Button background color
```
focusColor
```
- Color when focused
```
hoverColor
```
- Color when hovered
```
splashColor
```
- Ripple effect color
```
elevation
```
- Shadow elevation
```
focusElevation
```
- Elevation when focused
```
hoverElevation
```
- Elevation when hovered
```
highlightElevation
```
- Elevation when pressed
```
mouseCursor
```
- Cursor style on hover
```
shape
```
- Button shape and border
```
margin
```
- Space around button
```
size
```
- Button dimensions

Message Settings Properties (Both Components)

```
showAuthorName
```
- Show/hide author name
```
showTimestamp
```
- Show/hide timestamp
```
showAuthorAvatar
```
- Show/hide avatar
```
timestampFormat
```
- DateFormat for timestamp
```
backgroundColor
```
- Message background color
```
textStyle
```
- Message text style
```
headerTextStyle
```
- Header text style
```
shape
```
- Message bubble shape
```
widthFactor
```
- Message width relative to screen (0-1)
```
avatarSize
```
- Avatar dimensions
```
margin
```
- Space around message
```
padding
```
- Padding inside message
```
avatarPadding
```
- Padding around avatar
```
headerPadding
```
- Padding around header
```
footerPadding
```
- Padding around footer

Common Use Cases

For SfChat: Customer support chat, team messaging, social messaging, live chat support with multi-user conversations and incoming/outgoing message patterns.

For SfAIAssistView: AI chatbots, AI assistants, help bots, Q&A interfaces with request/response patterns, toolbar items, and loading indicators.

syncfusion-flutter-chat

NPX Install

Tags

SKILL.md Content

Syncfusion Flutter Chat & AI AssistView

When to Use This Skill

Choosing the Right Component

Use SfChat (Chat Widget) when:

Use SfAIAssistView (AI AssistView Widget) when:

Key Differences Summary:

Documentation and Navigation Guide

Getting Started

Component Overview

Conversation Area and Messages

Composer and Input

Action Button

Placeholder

Theming and Customization

Localization and Accessibility

Common Patterns

Quick Start Examples

Basic Chat with Messages

Basic AI AssistView with AI Integration

Chat with Suggestions

AI AssistView with Toolbar Items

Key Properties

SfChat Essential Properties

SfAIAssistView Essential Properties

ChatMessage / AssistMessage Properties

Composer Properties (Both Components)

Action Button Properties (Both Components)

Message Settings Properties (Both Components)

Common Use Cases