ChatHeader

The ChatHeader component is rendered at the top of the chat panel.

Props

The ChatHeader component receives the following props:

Name	Type	Description
conversation	`Conversation`	The conversation being rendered
showSearchButton	`boolean`	Whether the search button should be shown
showSearchBox	`boolean`	Whether the search box should be shown
showCloseButton	`boolean`	Whether the close button in the pop-up widget should be shown
showActionMenu	`boolean`	Whether the conversation actions menu should be shown
presenceEnabled	`boolean`	Whetether the current user's role has the option enabled to show the online status of other users.

Available system components

The following system components are available to the ChatHeader component:

The <SearchBox> system component lets users search through the current conversation.

Props

Name	Type	Description
clss	`string`	The class given to the search box's outer `div`
style	`string`	CSS styles given to the search box's outder `div`

Usage example

This example renders the search button with an icon inside


1<SearchBox class="search-box" style="width: 100%;" />

SearchButton

The <SearchButton> system component makes the search box visible.

Props

Name	Type	Description
class	`string`	The class given to the button
style	`string`	CSS styles given to the button

Usage example

This example renders the search button with an icon inside.


1<SearchButton class="search-button" style="background-color: #a0a0a0;">
2    <Icon type="search" />
3</SearchButton>

CloseButton

The <CloseButton> system component closes the pop-up.

Props

Name	Type	Description
class	`string`	The class given to the button
style	`string`	CSS styles given to the button

Usage example


1<CloseButton class="close-button" style="width: 100%"">
2    <Icon type="close" />
3</CloseButton>

StatusIndicator

The <StatusIndicator> system component shows whether a user is online.

Props

Name	Type	Description
class	`string`	The class given to the status indicator
style	`string`	CSS styles given to the status indicator
user Required	`User`	User for which the online status should be displayed

Usage example

Thiks example renders a list of conversation participants, each with a status indicator.


1<ul class="users">
2    <li class="user inline-block" t:for="{{ user in conversation.others }}" t:key="{{ user.id }}">
3        <span>{{user.name}}</span>
4        <StatusIndicator class="status-indicator" user="{{user}}" />
5    </li>
6</ul>

ActionMenu

The <ActionMenu> subcsystem component renders a button that opens a menu with available conversation actions.

Props

Name	Type	Description
class	`string`	The class given to the button

Usage example

This example renders the button to open the action menu, with an icon of three horizontal dots inside.


1<ActionMenu class="action-menu">
2    <Icon type="horizontalDots" />
3</ActionMenu>

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>