ConversationListItem

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

Props

The ConversationLisItem component receives the following props:

Name	Type	Description
conversation	`Conversation`	The conversation being rendered
isSelected	`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>