> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.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-angular-v5-docs-update/2IblOTiSDtb-DzS7/images/flutter_ai_assistant_chat_history.png?fit=max&auto=format&n=2IblOTiSDtb-DzS7&q=85&s=191a4ae4035f2b74a46b47c40fcc90c5" 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-angular-v5-docs-update/2IblOTiSDtb-DzS7/images/flutter_ai_assistant_chat_history_style.png?fit=max&auto=format&n=2IblOTiSDtb-DzS7&q=85&s=122471cb2f9e151dd707662bbabb92ce" 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>