ConversationListItem

Customize how each conversation appears in the list.

The ConversationListItem component is rendered for each conversation in the conversation list in the inbox widget.

Props

The ConversationListItem component receives the following props:

Name	Type	Description
conversation	`Conversation`	The conversation being rendered
isActive	`boolean`	Whether this conversation is currently selected
isUnread	`boolean`	Whether this conversation has any unread messages
unreadMessageCount	`number`	Number of unread messages in this conversation
lastMessage	`Message`	The most recent message in the conversation

The message object passed as lastMessage only has the following properties: type, sender, body, timestamp, editedAt and custom.

Available system components

The following system components are available to the ConversationListItem component:

ConversationLink

The <ConversationLink> system component renders a link which, when clicked, navigates the inbox to this conversation.

Props

Name	Type	Description
class	`string`	The class given to the link
style	`string`	CSS styles given to the link
title	`string`	The link's `title` attribute

Usage example

The conversation link is usually used as a wrapping element around all markup within the ConversationListItem component.


1<ConversationLink class="close-button" style="width: 100%" title="{{conversation.subject}}">
2    {/* Conversation list item markup */}
3</ConversationLink>

ActionButton

A button that emits a custom conversation action event when clicked.

Props

Name	Type	Description
class	`string`	The class given to the button
action Required	`string`	Name of the action that gets triggered
data-<foo>	`string`	Parameters you want to pass along with the action event. The values of any attributes starting with `data-` will be passed along.

Example usage

This example renders a button that triggers a ConversationAction event when clicked. The event will have an action set to "viewOrder", and include an orderId property taken from a custom attribute set on the conversation.


1<ActionButton action="viewOrder" data-orderId="{{conversation.custom.orderId}}">
2    Confirm attendance
3</ActionButton>

ActionLink

The <ActionLink> system component behaves the same as <ActionButton>, except that it is rendered as a link.

Props

Name	Type	Description
class	`string`	The class given to the link
action Required	`string`	Name of the action that gets triggered
data-<foo>	`string`	Parameters you want to pass along with the action event. The values of any attributes starting with `data-` will be passed along.

Example usage

This example renders a link that triggers a ConversationAction event when clicked. The event will have an action set to "viewOrder", and include an orderId taken from a custom attribute set on the conversation.


1<ActionLink action="confirmAttendance" data-orderId="{{conversation.custom.orderId}}">
2    Confirm attendance
3</ActionLink>