AI Assistant Chat History

Overview

The AI Assistant Chat History component is a pre-built user interface component 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

Using Navigation Controller to Present CometChatAIAssistantChatHistory

The CometChatAIAssistanceChatHistory component can be launched using a navigation controller. This approach is ideal when you want to present the chat history as a standalone screen within your app’s navigation flow

swift

let chatHistory = CometChatAIAssistanceChatHistory() 
chatHistory.user = user // A User or Group object is required to launch this component. 
self.navigationController?.pushViewController(chatHistory, animated: true)

Simply adding the CometChatAIAssistanceChatHistory component to your view hierarchy without providing a User or Group object will only display a loading indicator. To fetch and display actual messages, you must assign either a User or a Group object to the component.

---

Actions

Actions define how a component behaves and responds to user interactions.

onNewChatButtonClicked

onNewChatButtonClicked The onNewChatButtonClicked action is triggered when the user taps on the “New Chat” button.
You can override it to define custom functionality, such as navigating to a new chat creation screen or initiating a new AI chat session.

swift

let chatHistory = CometChatAIAssistanceChatHistory()
chatHistory.user = user // A User or Group object is required to launch this component.

chatHistory.onNewChatButtonClicked = {
    // TODO: Implement custom behavior here
}

---

onMessageClicked

You can customize this behavior by using the provided code snippet to override the onMessageClicked callback. This allows you to define custom actions when a user taps on a message inside the AI Assistant Chat History component.

swift

let chatHistory = CometChatAIAssistanceChatHistory() 
chatHistory.user = user // A User or Group object is required to launch this component.
chatHistory.onMessageClicked = { message in
// TODO: Implement custom behavior when a message is clicked
}

---

onError

You can customize this behavior by overriding the onError callback to improve error handling within the component.
This is useful for displaying custom error messages or performing recovery actions when data fetching fails.

swift

let chatHistory = CometChatAIAssistanceChatHistory()
chatHistory.user = user // A User or Group object is required to launch this component.

chatHistory.set(onError: { error in
    // Override on error
})

onLoad

The onLoad callback is invoked when the message list is successfully fetched and loaded. This can be used to track component readiness or perform actions once messages are displayed.

swift

let chatHistory = CometChatAIAssistanceChatHistory() 
chatHistory.user = user // A User or Group object is required to launch this component.

chatHistory.set(onLoad: { history in
    // Handle loaded ai chat history
})

---

onEmpty

The onEmpty callback is triggered when no messages are available. You can use this to show placeholder content, such as an empty state message or an illustration.

swift

let chatHistory = CometChatAIAssistanceChatHistory()
chatHistory.user = user // A User or Group object is required to launch this component.

chatHistory.set(onEmpty: { 
    // Handle empty state
})

---

Filters

You can customize the message list displayed in the CometChatAIAssistanceChatHistory component by modifying the MessagesRequestBuilder. This allows you to filter messages according to your app’s needs — for example, fetching messages that match a search term or belong to a specific user or group.

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

swift

swift let builder = MessagesRequest.MessageRequestBuilder() 
      .set(uid: user.uid) // Example: filter messages by user UID

let chatHistory = CometChatAIAssistanceChatHistory()
chatHistory.user = user // A User or Group object is required to launch this component.
chatHistory.set(messagesRequestBuilder: builder)

The following parameters in messagesRequestBuilder will always be modified internally by the component:

1. uid
2. guid
3. types
4. categories

---

Events

Events are emitted by a Component.

By using events, you can extend existing functionality. Since events are global in nature, they can be added or removed from multiple locations within the app. The CometChatAIAssistanceChatHistory component does not emit any events of its own.

---

Customization

To meet your app’s design and UX requirements, you can customize the appearance and functionality of the CometChatAIAssistanceChatHistory component. We provide multiple exposed properties and methods that allow you to modify both the visual style and interactive behavior according to your needs.

Style

The style property allows you to customize the look and feel of the component in your app. These parameters control key design aspects such as colors, fonts, text styles, and background appearance for various subviews like headers, date separators, and message items

1. AiAssistantChatHistoryStyle

You can assign a custom AiAssistantChatHistoryStyle to the component to override the default visual theme.

Global level styling

Swift

CometChatAIAssistanceChatHistory.style.backgroundColor = 
CometChatAIAssistanceChatHistory.style.itemTextFont = 
CometChatAIAssistanceChatHistory.style.newChatTitleFont = 

Instance level styling

Swift

let aiAssistantChatHistoryStyle = AiAssistantChatHistoryStyle()
aiAssistantChatHistoryStyle.backgroundColor = 
aiAssistantChatHistoryStyle.itemTextFont =
aiAssistantChatHistoryStyle.newChatTitleFont = 

let aIAssistanceChatHistory = CometChatAIAssistanceChatHistory()
aIAssistanceChatHistory.style = aiAssistantChatHistoryStyle

---

Functionality

These functional customizations allow you to fine-tune the overall behavior and user experience of the component. With these options, you can modify text, customize icons, and toggle visibility for specific UI elements within the CometChatAIAssistanceChatHistory component.

swift

swift let chatHistory = CometChatAIAssistanceChatHistory() 
chatHistory.user = user // A User or Group object is required to launch this component.

// Example: Adding a custom back button
let backButton = UIButton(type: .system)
backButton.setImage(UIImage(systemName: "snowflake"), for: .normal)
backButton.tintColor = .systemRed
backButton.addTarget(self, action: #selector(didTapBackButton), for: .touchUpInside)
chatHistory.backButton = backButton

CometChatMessageList Properties

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

Property	Description	Code
User	Used to set the user for displaying their AI chat history.	CometChatAIAssistantChatHistory.set(user: user)
Group	Used to set the group for displaying its AI chat history.	CometChatAIAssistantChatHistory.set(group: group)
Messages Request Builder	Used to pass a custom message request builder to fetch AI chat history.	CometChatAIAssistantChatHistory.set(messagesRequestBuilder: customBuilder)
Loading State View	Used to set a custom loading view when fetching AI chat history.	CometChatAIAssistantChatHistory.set(loadingStateView: customLoadingView)
Empty State View	Used to set a custom view when no messages are available.	CometChatAIAssistantChatHistory.set(emptyStateView: customEmptyView)
Error State View	Used to set a custom error view when message fetching fails.	CometChatAIAssistantChatHistory.set(errorStateView: customErrorView)
On Message Clicked	Used to handle actions when a message is clicked.	CometChatAIAssistantChatHistory.set(onMessageClicked: { message in })
On Error	Used to handle actions when an error occurs while fetching data.	CometChatAIAssistantChatHistory.set(onError: { })
On Load	Used to handle actions when chat history is successfully loaded.	CometChatAIAssistantChatHistory.set(onLoad: { })
On Empty	Used to handle actions when chat history is empty.	CometChatAIAssistantChatHistory.set(onEmpty: { })
On New Chat Button Clicked	Used to handle actions when the “New Chat” button is clicked.	CometChatAIAssistantChatHistory.set(onNewChatButtonClicked: { user in })
On Close	Used to handle actions when the back button is pressed.	CometChatAIAssistantChatHistory.set(onClose: { })
Empty State Text	Used to set the text when the chat history list is empty.	CometChatAIAssistantChatHistory.emptyStateText = "No conversations yet"
Empty State Subtitle Text	Used to set a subtitle when the chat history list is empty.	CometChatAIAssistantChatHistory.emptyStateSubtitleText = "Start a new chat to begin"
Error State Text	Used to set the text when an error occurs.	CometChatAIAssistantChatHistory.errorStateText = "Failed to load history"
Error State Subtitle Text	Used to set a subtitle when an error occurs.	CometChatAIAssistantChatHistory.errorStateSubtitleText = "Please try again later"
Hide Date Separator	Used to hide or show the date separator in the chat history list.	CometChatAIAssistantChatHistory.hideDateSeparator = true

---

Advance

For advanced-level customization, you can inject custom views or functions into the component. This allows you to tailor the CometChatAIAssistanceChatHistory experience to align perfectly with your app’s interface and logic.

dateSeparatorPattern

You can modify the format of the date separator displayed between messages using the dateSeparatorPattern property. This closure accepts a Date object and returns a formatted String.

Example

Here is the complete example for reference:

swift

let chatHistory = CometChatAIAssistanceChatHistory() 
chatHistory.user = user // A User or Group object is required to launch this component. 
chatHistory.dateTimeFormatter.time = { timestamp in
    return "at " + DateFormatter.localizedString(from: Date(timeIntervalSince1970: TimeInterval(timestamp)), dateStyle: .none, timeStyle: .short)
}
chatHistory.dateTimeFormatter.today = { timestamp in
    return "Today • \(formattedTime(from: timestamp))"
}

// for global level
CometChatAIAssistanceChatHistory.dateTimeFormatter.otherDay = { timestamp in // This will display older dates as "24 Apr 2025" instead of the default relative format.
    let formatter = DateFormatter()
    formatter.dateFormat = "dd MMM yyyy"
    return formatter.string(from: Date(timeIntervalSince1970: TimeInterval(timestamp)))
}

---

loadingStateView

Customize the loading view displayed when messages are being fetched. Use this property to show a spinner, skeleton loader, or a custom loading message for better UX.

Use Cases:

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

swift

let loadingView = UIActivityIndicatorView(style: .large) 
loadingView.startAnimating()

let chatHistory = CometChatAIAssistanceChatHistory()
chatHistory.set(loadingView: loadingView)

---

emptyStateView

Customize the view displayed when there are no messages in the chat history.
This is typically used to show a friendly placeholder or an illustration..

Use Cases:

• Display “No chat history yet” text.
• Add a button prompting users to start a new chat.

swift

let emptyView = UILabel()
emptyView.text = "No chat history yet."
emptyView.textAlignment = .center
emptyView.textColor = .gray

let chatHistory = CometChatAIAssistanceChatHistory()
chatHistory.set(emptyView: emptyView)  

---

errorStateView

You can define a custom view to display when an error occurs during message loading. This could include a retry button or a helpful error message for better recovery..

Use Cases:

• Show a retry option on network failure.
• Display “Unable to load messages. Check your connection.”.

swift

let errorView = UIView() 
let errorLabel = UILabel() 
errorLabel.text = "Couldn't load history. Check your connection." 
errorLabel.textAlignment = .center 
errorLabel.textColor = .systemRed
errorView.addSubview(errorLabel)
errorLabel.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
errorLabel.centerXAnchor.constraint(equalTo: errorView.centerXAnchor),
errorLabel.centerYAnchor.constraint(equalTo: errorView.centerYAnchor)
])

let chatHistory = CometChatAIAssistanceChatHistory()
chatHistory.set(errorView: errorView)  

---