AI Assistant Chat History - CometChat Docs

Overview

The AI Assistant Chat History widget is a pre-built user interface widget designed to display the conversation history between users and an AI assistant within a chat application. It provides a structured and visually appealing way to present past interactions, making it easy for users to review previous messages and context.

Usage

Integration

You can launch CometChatAIAssistantChatHistory directly using Navigator.push, or you can define it as a widget within the build method of your State class.

1. Using Navigator to Launch `CometChatAIAssistantChatHistory`

Dart

Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatAIAssistantChatHistory())); // A user or group object is required to launch this widget.

Simply adding the CometChatAIAssistantChatHistory component to the layout will only display the loading indicator. To fetch messages for a specific entity, you need to supplement it with User or Group Object.

2. Embedding `ChatHistory` as a Widget in the build Method

Dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

class ChatHistory extends StatefulWidget {
  const ChatHistory({super.key});

  @override
  State<ChatHistory> createState() => _ChatHistoryState();
}

class _ChatHistoryState extends State<ChatHistory> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: CometChatAIAssistantChatHistory() // A user or group object is required to launch this widget.
        )
    );
  }
}

Actions

Actions dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

onNewChatButtonClicked

onNewChatButtonClicked is triggered when you click on the new chat button. The onNewChatButtonClicked action doesn’t have a predefined behavior. You can override this action using the following code snippet.

Dart

CometChatAIAssistantChatHistory(
  user: user, // A user or group object is required to launch this widget.
  onNewChatButtonClicked: () {
    // TODO("Not yet implemented")
  },
)

onMessageClicked

You can customize this behavior by using the provided code snippet to override the onMessageClicked.

Dart

CometChatAIAssistantChatHistory(
  user: user, // A user or group object is required to launch this widget.
  onMessageClicked: (message) {
    // TODO("Not yet implemented")
  },
)

onError

You can customize this behavior by using the provided code snippet to override the onError and improve error handling.

Dart

CometChatAIAssistantChatHistory(
  user: user, // A user or group object is required to launch this widget.
  onError: (e) {
    // TODO("Not yet implemented")
  },
)

onLoad

Invoked when the list is successfully fetched and loaded, helping track component readiness.

Dart

CometChatAIAssistantChatHistory(
     onLoad: (list) {
          // print("messages loaded: ${list.length}");
        },
)

onEmpty

Called when the list is empty, enabling custom handling such as showing a placeholder message.

Dart

CometChatAIAssistantChatHistory(
      onEmpty: () {
          // print("Groups empty");
        },
)

Filters

You can adjust the MessagesRequestBuilder in the CometChatAIAssistantChatHistory Widget to customize your list. Numerous options are available to alter the builder to meet your specific needs. For additional details on MessagesRequestBuilder, please visit MessagesRequestBuilder. In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed

Dart

CometChatAIAssistantChatHistory(
  user: user, // A user or group object is required to launch this widget.
  messagesRequestBuilder: MessagesRequestBuilder()
    ..uid = user.uid
)

The following parameters in messageRequestBuilder will always be altered inside the list

UID
GUID
types
categories

Events

Events are emitted by a Widget. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The CometChatAIAssistantChatHistory Widget does not emit any events of its own.

Customization

To fit your app’s design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style

Using Style you can customize the look and feel of the widget in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the widget.

1. CometChatAIAssistantChatHistoryStyle

You can set the style to the CometChatAIAssistantChatHistory Widget to customize the styling.

Dart

final ccColor = CometChatThemeHelper.getColorPalette(context);
CometChatAIAssistantChatHistory(
  user: user, // A user or group object is required to launch this widget.
  style: CometChatAIAssistantChatHistoryStyle(
    backgroundColor: const Color(0xFFFFFAF6),
    headerBackgroundColor: const Color(0xFFFFFAF6),
    headerTitleTextColor: ccColor.textPrimary,
    headerTitleTextStyle: const TextStyle(
      fontFamily: 'TimesNewRoman', // Add this in pubspec.yaml under fonts
    ),
    newChatIconColor: ccColor.iconSecondary,
    newChatTextColor: ccColor.textPrimary,
    newChaTitleStyle: const TextStyle(
      fontFamily: 'TimesNewRoman',
    ),
    dateSeparatorStyle: CometChatDateStyle(
      textStyle: const TextStyle(
        fontFamily: 'TimesNewRoman',
      ),
      textColor: ccColor.textTertiary,
      backgroundColor: const Color(0xFFFFFAF6),
    ),
    itemTextStyle: const TextStyle(
      fontFamily: 'TimesNewRoman',
    ),
    itemTextColor: ccColor.textPrimary,
  ),
),

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

Dart

CometChatAIAssistantChatHistory(
  user: user, // A user or group object is required to launch this widget.
  backButton: IconButton(
    icon: const Icon(
      Icons.ac_unit,
      color: Colors.red,
    ),
    onPressed: () {
      // TODO: Implement back button action
    },
  ),
),

CometChatMessageList Properties

Below is a list of customizations along with corresponding code snippets:

Property	Data Type	Description
`user`	`User?`	User object for the user message list.
`group`	`Group?`	Group object for the group message list.
`messagesRequestBuilder`	`MessagesRequestBuilder?`	Custom request builder passed to CometChat’s SDK.
`loadingStateView`	`WidgetBuilder?`	View for the loading state.
`emptyStateView`	`WidgetBuilder?`	View for the empty state.
`errorStateView`	`WidgetBuilder?`	View for the error state behind the dialog.
`onMessageClicked`	`void Function(BaseMessage? message)?`	Callback triggered when a message is clicked.
`onError`	`OnError?`	Callback triggered when an error occurs while fetching users.
`onLoad`	`OnLoad<BaseMessage>?`	Callback triggered when the list is loaded.
`onEmpty`	`OnEmpty?`	Callback triggered when the list is empty.
`onNewChatButtonClicked`	`VoidCallback?`	Callback triggered when the new chat button is clicked.
`style`	`CometChatAIAssistantChatHistoryStyle?`	Sets the style for the AI Assistant chat history.
`dateSeparatorPattern`	`String Function(DateTime dateTime)?`	Custom pattern for the date separator.
`dateTimeFormatterCallback`	`DateTimeFormatterCallback?`	Callback to format the date and time.
`emptyStateText`	`String?`	Text to display when the list is empty.
`emptyStateSubtitleText`	`String?`	Subtitle text to display when the list is empty.
`errorStateText`	`String?`	Text to display when an error occurs.
`errorStateSubtitleText`	`String?`	Subtitle text to display when an error occurs.
`onClose`	`VoidCallback?`	Callback triggered when the back button is pressed.
`backButton`	`Widget?`	Custom widget for the back button.
`width`	`double?`	Sets the width of the list.
`height`	`double?`	Sets the height of the list.
`hideStickyDate`	`bool?`	Hide the sticky date separator.
`hideDateSeparator`	`bool?`	Hide the date separator.

Advance

For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.

DateSeparatorPattern

You can modify the date pattern of the chat history date separator to your requirement using dateSeparatorPattern. This method accepts a function with a return type String. Inside the function, you can create your own pattern and return it as a String. Example Here is the complete example for reference:

Dart

CometChatAIAssistantChatHistory(
  user: user, // A user or group object is required to launch this widget.
  dateSeparatorPattern: (DateTime dateTime) {
    return DateFormat("dd/MM/yyyy").format(dateTime);
  },
)

loadingStateView

Customizes the loading indicator when messages are being fetched. Use Cases:

Show a spinner or skeleton loader for smooth UX.
Display a “Fetching history…” text.

Dart

CometChatAIAssistantChatHistory(
    loadingStateView: (context) {
       // return leading view
    },
)

emptyStateView

Defines a custom view to be displayed when no messages are available. Use Cases:

Show a friendly message like “No history yet.”.

Dart

CometChatAIAssistantChatHistory(
    emptyStateView: (context) {
       // return empty view
    },
)

errorStateView

Custom error state view displayed when fetching history fails. Use Cases:

Show a retry button when an error occurs.
Display a friendly message like “Couldn’t load history. Check your connection.”.

Dart

CometChatAIAssistantChatHistory(
    errorStateView: (context) {
       // return error view
    },
)

​Overview

​Usage

​Integration

1. Using Navigator to Launch CometChatAIAssistantChatHistory

2. Embedding ChatHistory as a Widget in the build Method

​Actions

onNewChatButtonClicked

onMessageClicked

onError

onLoad

onEmpty

​Filters

​Events

​Customization

​Style

1. CometChatAIAssistantChatHistoryStyle

​Functionality

​CometChatMessageList Properties

​Advance

​DateSeparatorPattern

​loadingStateView

​emptyStateView

​errorStateView

Overview

Usage

Integration

1. Using Navigator to Launch `CometChatAIAssistantChatHistory`

2. Embedding `ChatHistory` as a Widget in the build Method

Actions

Filters

Events

Customization

Style

Functionality

CometChatMessageList Properties

Advance

DateSeparatorPattern

loadingStateView

emptyStateView

errorStateView