> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Assistant Chat History

> A widget that displays conversation history between users and an AI assistant

<Accordion title="AI Agent Component Spec">
  ```json theme={null}
  {
    "component": "CometChatAIAssistantChatHistory",
    "package": "cometchat_chat_uikit",
    "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
    "description": "A widget that displays the conversation history between users and an AI assistant with date separators and new chat functionality",
    "primaryOutput": {
      "prop": "onMessageClicked",
      "type": "void Function(BaseMessage? message)?"
    },
    "props": {
      "data": {
        "user": {
          "type": "User?",
          "default": "null",
          "note": "User object for user message list (one of user/group required)"
        },
        "group": {
          "type": "Group?",
          "default": "null",
          "note": "Group object for group message list (one of user/group required)"
        },
        "messagesRequestBuilder": {
          "type": "MessagesRequestBuilder?",
          "default": "null",
          "note": "Custom request builder passed to CometChat's SDK"
        }
      },
      "callbacks": {
        "onMessageClicked": "void Function(BaseMessage? message)?",
        "onNewChatButtonClicked": "VoidCallback?",
        "onError": "OnError?",
        "onLoad": "OnLoad<BaseMessage>?",
        "onEmpty": "OnEmpty?",
        "onClose": "VoidCallback?"
      },
      "visibility": {
        "hideStickyDate": {
          "type": "bool?",
          "default": "null"
        },
        "hideDateSeparator": {
          "type": "bool?",
          "default": "null"
        }
      },
      "viewSlots": {
        "loadingStateView": "WidgetBuilder?",
        "emptyStateView": "WidgetBuilder?",
        "errorStateView": "WidgetBuilder?",
        "backButton": "Widget?"
      },
      "formatting": {
        "dateSeparatorPattern": {
          "type": "String Function(DateTime)?",
          "default": "null"
        },
        "dateTimeFormatterCallback": {
          "type": "DateTimeFormatterCallback?",
          "default": "null"
        }
      }
    },
    "events": [],
    "sdkListeners": [],
    "compositionExample": {
      "description": "CometChatAIAssistantChatHistory is typically used within AI assistant features to show past conversations",
      "components": ["CometChatMessageList", "CometChatMessageComposer"],
      "flow": "User opens chat history → Past messages displayed → User clicks message or starts new chat"
    },
    "types": {}
  }
  ```
</Accordion>

## Where It Fits

CometChatAIAssistantChatHistory 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/flutter_ai_assistant_chat_history.png?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=663f91a6d7fa7853842c8e119de3aae5" width="3040" height="1760" data-path="images/flutter_ai_assistant_chat_history.png" />
</Frame>

## Minimal Render

The simplest way to render CometChatAIAssistantChatHistory:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

    CometChatAIAssistantChatHistory(
      user: user,  // Required: User or Group object
    )
    ```
  </Tab>
</Tabs>

<Warning>
  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.
</Warning>

You can also launch it using Navigator:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(
      context, 
      MaterialPageRoute(
        builder: (context) => CometChatAIAssistantChatHistory(
          user: user,  // A user or group object is required
        ),
      ),
    );
    ```
  </Tab>
</Tabs>

Or embed it as a widget:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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(
              user: user,  // A user or group object is required
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

## Filtering

You can adjust the `MessagesRequestBuilder` to customize the message list. Numerous options are available to alter the builder to meet your specific needs.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatAIAssistantChatHistory(
      user: user,
      messagesRequestBuilder: MessagesRequestBuilder()
        ..uid = user.uid,
    )
    ```
  </Tab>
</Tabs>

<Note>
  The following parameters in messageRequestBuilder will always be altered inside the list:

  1. UID
  2. GUID
  3. types
  4. categories
</Note>

For additional details on `MessagesRequestBuilder`, please visit [MessagesRequestBuilder](/sdk/flutter/additional-message-filtering).

## Actions and Events

### Callback Props

Component-level callbacks that fire on specific user interactions:

| Callback | Signature | Fires When |
| - | - | - |
| `onMessageClicked` | `void Function(BaseMessage? message)?` | User clicks a message |
| `onNewChatButtonClicked` | `VoidCallback?` | User clicks the new chat button |
| `onError` | `OnError?` | An error occurs while fetching messages |
| `onLoad` | `OnLoad<BaseMessage>?` | List is successfully loaded |
| `onEmpty` | `OnEmpty?` | List is empty |
| `onClose` | `VoidCallback?` | User clicks the back/close button |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatAIAssistantChatHistory(
      user: user,
      onNewChatButtonClicked: () {
        // Start a new chat session
        print('New chat initiated');
      },
      onMessageClicked: (message) {
        // Navigate to the message context
        print('Message clicked: ${message?.id}');
      },
      onError: (e) {
        print('Error: $e');
      },
      onLoad: (list) {
        print('Messages loaded: ${list.length}');
      },
      onEmpty: () {
        print('No messages found');
      },
      onClose: () {
        Navigator.pop(context);
      },
    )
    ```
  </Tab>
</Tabs>

### Global UI Events

The CometChatAIAssistantChatHistory component does not produce any global UI events.

## Custom View Slots

Customize the appearance of CometChatAIAssistantChatHistory by replacing default views with your own widgets.

| Slot | Signature | Replaces |
| - | - | - |
| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
| `emptyStateView` | `WidgetBuilder?` | Empty state display |
| `errorStateView` | `WidgetBuilder?` | Error state display |
| `backButton` | `Widget?` | Back/close button |

### Example: Custom Back Button

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatAIAssistantChatHistory(
      user: user,
      backButton: IconButton(
        icon: const Icon(
          Icons.arrow_back,
          color: Colors.red,
        ),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    )
    ```
  </Tab>
</Tabs>

### Example: Custom Loading State

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatAIAssistantChatHistory(
      user: user,
      loadingStateView: (context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircularProgressIndicator(),
              SizedBox(height: 16),
              Text('Fetching history...'),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Example: Custom Empty State

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatAIAssistantChatHistory(
      user: user,
      emptyStateView: (context) {
        return Center(
          child: Text('No history yet. Start a new conversation!'),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Date Separator Pattern

You can modify the date pattern of the chat history date separator using `dateSeparatorPattern`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatAIAssistantChatHistory(
      user: user,
      dateSeparatorPattern: (DateTime dateTime) {
        return DateFormat("dd/MM/yyyy").format(dateTime);
      },
    )
    ```
  </Tab>
</Tabs>

## Styling

Customize the appearance of CometChatAIAssistantChatHistory using `CometChatAIAssistantChatHistoryStyle`.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    final ccColor = CometChatThemeHelper.getColorPalette(context);

    CometChatAIAssistantChatHistory(
      user: user,
      style: CometChatAIAssistantChatHistoryStyle(
        backgroundColor: const Color(0xFFFFFAF6),
        headerBackgroundColor: const Color(0xFFFFFAF6),
        headerTitleTextColor: ccColor.textPrimary,
        headerTitleTextStyle: const TextStyle(
          fontFamily: 'TimesNewRoman',
        ),
        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,
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/flutter_ai_assistant_chat_history_style.png?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=1fa0479d2c177b5dfac643de44c7721b" width="3040" height="1760" data-path="images/flutter_ai_assistant_chat_history_style.png" />
</Frame>

### Style Properties

| Property | Type | Description |
| - | - | - |
| `backgroundColor` | `Color?` | Background color of the message list |
| `border` | `BoxBorder?` | Border of the message list |
| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message list |
| `emptyStateTextStyle` | `TextStyle?` | Style of empty state text |
| `emptyStateTextColor` | `Color?` | Color of empty state text |
| `emptyStateSubtitleStyle` | `TextStyle?` | Style of empty state subtitle |
| `emptyStateSubtitleColor` | `Color?` | Color of empty state subtitle |
| `errorStateTextStyle` | `TextStyle?` | Style of error state text |
| `errorStateTextColor` | `Color?` | Color of error state text |
| `errorStateSubtitleStyle` | `TextStyle?` | Style of error state subtitle |
| `errorStateSubtitleColor` | `Color?` | Color of error state subtitle |
| `dateSeparatorStyle` | `CometChatDateStyle?` | Style for date separator |
| `newChatIconColor` | `Color?` | Color of new chat icon |
| `newChaTitleStyle` | `TextStyle?` | Style of new chat title |
| `newChatTextColor` | `Color?` | Color of new chat text |
| `itemTextStyle` | `TextStyle?` | Style of item text |
| `itemTextColor` | `Color?` | Color of item text |
| `headerBackgroundColor` | `Color?` | Background color of header |
| `headerTitleTextStyle` | `TextStyle?` | Style of header title text |
| `headerTitleTextColor` | `Color?` | Color of header title text |
| `closeIconColor` | `Color?` | Color of close icon |
| `separatorHeight` | `double?` | Height of separator |
| `separatorColor` | `Color?` | Color of separator |
| `deleteChatHistoryDialogStyle` | `CometChatConfirmDialogStyle?` | Style for delete dialog |

## Props Reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `user` | `User?` | `null` | User object for user message list |
| `group` | `Group?` | `null` | Group object for group message list |
| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Custom request builder |
| `loadingStateView` | `WidgetBuilder?` | `null` | Custom loading view |
| `emptyStateView` | `WidgetBuilder?` | `null` | Custom empty view |
| `errorStateView` | `WidgetBuilder?` | `null` | Custom error view |
| `onMessageClicked` | `void Function(BaseMessage?)?` | `null` | Message click callback |
| `onError` | `OnError?` | `null` | Error callback |
| `onLoad` | `OnLoad<BaseMessage>?` | `null` | Load callback |
| `onEmpty` | `OnEmpty?` | `null` | Empty callback |
| `onNewChatButtonClicked` | `VoidCallback?` | `null` | New chat button callback |
| `style` | `CometChatAIAssistantChatHistoryStyle?` | `null` | Style configuration |
| `dateSeparatorPattern` | `String Function(DateTime)?` | `null` | Date separator pattern |
| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Date/time formatter |
| `emptyStateText` | `String?` | `null` | Empty state text |
| `emptyStateSubtitleText` | `String?` | `null` | Empty state subtitle |
| `errorStateText` | `String?` | `null` | Error state text |
| `errorStateSubtitleText` | `String?` | `null` | Error state subtitle |
| `onClose` | `VoidCallback?` | `null` | Close callback |
| `backButton` | `Widget?` | `null` | Custom back button |
| `width` | `double?` | `null` | Widget width |
| `height` | `double?` | `null` | Widget height |
| `hideStickyDate` | `bool?` | `null` | Hide sticky date separator |
| `hideDateSeparator` | `bool?` | `null` | Hide date separator |

<CardGroup cols={2}>
  <Card title="Message List" icon="list" href="/ui-kit/flutter/v5/message-list">
    Display messages in a conversation
  </Card>

  <Card title="Message Composer" icon="pen" href="/ui-kit/flutter/v5/message-composer">
    Compose and send messages
  </Card>

  <Card title="Theming" icon="palette" href="/ui-kit/flutter/v5/theme-introduction">
    Learn how to customize the look and feel
  </Card>

  <Card title="Localization" icon="globe" href="/ui-kit/flutter/v5/localize">
    Support multiple languages in your app
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.