syncfusion-flutter-chat

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Syncfusion Flutter Chat & AI AssistView

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.
本技能介绍Syncfusion Flutter中用于对话UI的两个相关组件:SfChat(聊天组件)和SfAIAssistView(AI助手视图组件)。二者共享许多视觉和配置特性,但核心用途不同。

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
当你需要完成以下需求时可使用本技能:
  • 实现聊天界面,支持多用户对话和消息收发
  • 添加AI助手功能,适配请求-响应交互模式
  • 构建消息类应用,支持接收/发送消息
  • 创建AI聊天机器人界面,可对接AI服务
  • 展示对话UI,包含消息、头像和时间戳
  • 处理消息输入,支持文本编辑器和操作按钮
  • 自定义消息外观,通过构建器、主题和样式实现
  • 支持占位屏,适配空对话状态
  • 启用建议芯片,实现快捷回复或操作
  • 集成工具栏操作,支持对回复消息点赞、复制、重试等
  • 展示加载指示器,标识AI响应正在生成中
  • 实现RTL支持,适配从右到左书写的语言

Choosing the Right Component

选择合适的组件

Use SfChat (Chat Widget) when:

以下场景使用 SfChat(聊天组件):

  • 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
  • 需要多用户对话界面
  • 应用需要区分接收和发送的消息
  • 需要实现传统消息类应用功能(类似WhatsApp、Telegram风格)
  • 构建以下场景的聊天功能:团队协作、客户支持、社交消息、群聊
  • 消息建议需要同时出现在接收/发送消息上
  • 需要明确标识发送消息的用户

Use SfAIAssistView (AI AssistView Widget) when:

以下场景使用 SfAIAssistView(AI助手视图组件):

  • 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
  • 需要实现AI助手聊天机器人功能
  • 核心需求是对接AI服务的请求-响应模式
  • 需要在回复消息上添加工具栏项(点赞、点踩、复制、重试)
  • 需要在AI生成回复时展示加载指示器
  • 构建以下场景的UI:AI助手、聊天机器人、帮助机器人、问答界面
  • 消息建议仅需要出现在AI回复消息上
  • 需要明确区分请求和响应消息

Key Differences Summary:

核心差异汇总:

FeatureSfChatSfAIAssistView
Primary PurposeMulti-user messagingAI assistant interaction
Message TypesIncoming/OutgoingRequest/Response
User IdentificationoutgoingUser propertyAuthor in each message
SuggestionsOn any messageOnly on response messages
Toolbar Items❌ Not supported✅ Response toolbar support
Loading Indicator❌ Not included✅ Response loading builder
Use CaseChat apps, messagingAI chatbots, assistants
Message ClassesChatMessageAssistMessage
Composer ClassesChatComposerAssistComposer
Action Button ClassesChatActionButtonAssistActionButton
特性SfChatSfAIAssistView
核心用途多用户消息收发AI助手交互
消息类型接收/发送请求/响应
用户标识outgoingUser属性每条消息的作者字段
建议展示任意消息上仅响应消息上
工具栏项❌ 不支持✅ 支持响应工具栏
加载指示器❌ 未内置✅ 支持响应加载构建器
适用场景聊天应用、消息功能AI聊天机器人、助手
消息类ChatMessageAssistMessage
输入框类ChatComposerAssistComposer
操作按钮类ChatActionButtonAssistActionButton

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
📄 阅读: references/getting-started.md
  • 两个组件的安装和包配置
  • SfChat基础实现
  • SfAIAssistView基础实现
  • 包依赖和导入
  • 快速对比和入门示例

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
📄 Chat组件相关: references/chat-overview.md
  • SfChat组件概述和特性
  • 何时使用Chat vs AI AssistView
  • 多用户对话能力
  • 接收/发送消息模式
  • Chat专属能力
  • Chat基础配置
📄 AI AssistView组件相关: references/aiassistview-overview.md
  • SfAIAssistView组件概述和特性
  • 何时使用AI AssistView vs Chat
  • 请求/响应模式
  • AI集成能力
  • AIAssistView专属能力
  • AIAssistView基础配置

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)
📄 阅读: references/conversation-area.md
  • 消息结构和展示
  • 接收/发送消息(Chat组件)
  • 请求/响应消息(AIAssistView组件)
  • 消息设置和自定义
  • 头部和时间戳
  • 底部和附加信息
  • 消息头像
  • 内容区域样式
  • 消息建议(两个组件均支持)
  • 工具栏项(仅AIAssistView支持)
  • 加载指示器(仅AIAssistView支持)

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
📄 阅读: references/composer.md
  • 默认输入框配置
  • 文本编辑器自定义
  • 最小/最大行数
  • 装饰和样式
  • 提示文本和占位符
  • 边框和内边距
  • 前后缀图标
  • 文本样式自定义
  • 外边距配置
  • 自定义输入框构建器

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
📄 阅读: references/action-button.md
  • 操作按钮概述
  • 发送按钮功能
  • 自定义子组件
  • onPressed回调
  • 提示文本
  • 颜色配置(前景、背景、聚焦、悬浮、水波纹)
  • 阴影设置
  • 鼠标指针自定义
  • 形状和圆角
  • 外边距和尺寸

Placeholder

占位符

📄 Read: references/placeholder.md
  • Placeholder builder overview
  • Custom placeholder widgets
  • Empty conversation state design
  • Welcome messages
  • Getting started hints
  • Examples for both components
📄 阅读: references/placeholder.md
  • 占位符构建器概述
  • 自定义占位符组件
  • 空对话状态设计
  • 欢迎消息
  • 入门提示
  • 两个组件的示例

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)
📄 阅读: references/theming.md
  • 主题概述(Chat vs AIAssistView)
  • SfChatTheme和SfAIAssistViewTheme
  • 操作按钮主题
  • 头像颜色和样式
  • 消息背景色
  • 内容文本样式
  • 头部文本样式
  • 建议项样式
  • 消息形状和边框
  • 工具栏主题(仅AIAssistView支持)

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
📄 阅读: references/right-to-left.md
  • RTL(从右到左)支持
  • Directionality组件使用
  • 所有元素的RTL渲染
  • 占位符的RTL适配
  • 输入框的RTL适配
  • 操作按钮的RTL适配
  • 消息和内容的RTL适配

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
📄 阅读: references/common-patterns.md
  • 消息设置自定义
  • 带多操作的自定义输入框
  • 空状态的自定义占位符
  • AI响应的加载指示器
  • 统一品牌体验的主题设置

Quick Start Examples

快速入门示例

Basic Chat with Messages

基础带消息的Chat

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

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

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

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

  
  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',
                  ),
                ),
              );
            });
          },
        ),
      ),
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/chat.dart';

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

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

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

  
  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

基础带AI集成的AI AssistView

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

class MyAIAssistView extends StatefulWidget {
  
  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';
  }

  
  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),
            ),
          );
        },
      ),
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';

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

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

  void _generateAIResponse(String userRequest) async {
    // 在此处调用你的AI服务
    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 {
    // 对接你选择的AI服务
    // 示例:OpenAI、Google AI、Azure AI等
    await Future.delayed(Duration(seconds: 2)); // 模拟API调用
    return 'This is a response to: $request';
  }

  
  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

带建议项的Chat

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

带工具栏项的AI AssistView

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');
  },
)
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) {
    // 处理工具栏操作(点赞、点踩、复制等)
    print('Toolbar item selected at index $toolbarItemIndex');
  },
)

Key Properties

核心属性

SfChat Essential Properties

SfChat核心属性

  • 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
  • messages
    - 要展示的ChatMessage对象列表
  • outgoingUser
    - 发送消息的用户ID(用于区分接收/发送消息)
  • composer
    - 用于文本输入的ChatComposer
  • actionButton
    - 用于发送消息的ChatActionButton
  • placeholderBuilder
    - 空状态的自定义组件
  • incomingMessageSettings
    - 接收消息的设置
  • outgoingMessageSettings
    - 发送消息的设置
  • messageHeaderBuilder
    - 每条消息的自定义头部
  • messageFooterBuilder
    - 每条消息的自定义底部
  • messageContentBuilder
    - 每条消息的自定义内容
  • messageAvatarBuilder
    - 每条消息的自定义头像

SfAIAssistView Essential Properties

SfAIAssistView核心属性

  • 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
  • messages
    - AssistMessage对象列表(请求/响应)
  • composer
    - 用于文本输入的AssistComposer
  • actionButton
    - 用于发送请求的AssistActionButton
  • placeholderBuilder
    - 空状态的自定义组件
  • requestMessageSettings
    - 请求消息的设置
  • responseMessageSettings
    - 响应消息的设置
  • messageHeaderBuilder
    - 每条消息的自定义头部
  • messageFooterBuilder
    - 每条消息的自定义底部
  • messageContentBuilder
    - 每条消息的自定义内容
  • messageAvatarBuilder
    - 每条消息的自定义头像
  • responseLoadingBuilder
    - AI响应过程中的自定义加载指示器
  • onToolbarItemSelected
    - 工具栏项被点击时的回调
  • onSuggestionItemSelected
    - 建议芯片被点击时的回调

ChatMessage / AssistMessage Properties

ChatMessage / AssistMessage属性

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)
ChatMessage:
  • text
    - 消息内容
  • time
    - 消息时间戳
  • author
    - 包含id、名称和头像的ChatAuthor对象
  • suggestions
    - ChatMessageSuggestion项列表
AssistMessage:
  • data
    - 消息内容
  • time
    - 消息时间戳
  • author
    - 包含id、名称和头像的AssistMessageAuthor对象
  • suggestions
    - AssistMessageSuggestion项列表(仅响应消息支持)
  • toolbarItems
    - AssistMessageToolbarItem列表(仅响应消息支持)

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
  • minLines
    - 文本编辑器最小行数(默认:1)
  • maxLines
    - 文本编辑器最大行数(默认:6)
  • decoration
    - 用于样式设置的InputDecoration
  • margin
    - 输入框的外边距
  • textStyle
    - 输入文本的样式
  • builder
    - 自定义输入框组件

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
  • child
    - 按钮的自定义子组件
  • onPressed
    - 按钮被点击时的回调
  • tooltip
    - 提示文本
  • foregroundColor
    - 图标/文本颜色
  • backgroundColor
    - 按钮背景色
  • focusColor
    - 聚焦时的颜色
  • hoverColor
    - 悬浮时的颜色
  • splashColor
    - 水波纹效果颜色
  • elevation
    - 阴影高度
  • focusElevation
    - 聚焦时的阴影高度
  • hoverElevation
    - 悬浮时的阴影高度
  • highlightElevation
    - 按下时的阴影高度
  • mouseCursor
    - 悬浮时的指针样式
  • shape
    - 按钮形状和边框
  • margin
    - 按钮的外边距
  • size
    - 按钮尺寸

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
  • showAuthorName
    - 显示/隐藏作者名称
  • showTimestamp
    - 显示/隐藏时间戳
  • showAuthorAvatar
    - 显示/隐藏头像
  • timestampFormat
    - 时间戳的DateFormat格式
  • backgroundColor
    - 消息背景色
  • textStyle
    - 消息文本样式
  • headerTextStyle
    - 头部文本样式
  • shape
    - 消息气泡形状
  • widthFactor
    - 消息宽度占屏幕的比例(0-1)
  • avatarSize
    - 头像尺寸
  • margin
    - 消息的外边距
  • padding
    - 消息的内边距
  • avatarPadding
    - 头像的内边距
  • headerPadding
    - 头部的内边距
  • footerPadding
    - 底部的内边距

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.
SfChat适用场景: 客户支持聊天、团队消息、社交消息、支持多用户对话和接收/发送消息模式的实时聊天支持。
SfAIAssistView适用场景: AI聊天机器人、AI助手、帮助机器人、支持请求/响应模式、工具栏项和加载指示器的问答界面。