ChatHeader

Customize the header shown at the top of the chat panel.

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`	Whether 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
class	`string`	The class given to the search box's outer `div`
placeholder	`string`	The text that's shown when there user hasn't typed anything yet. If not given, it's a localized version of the string "Search..."
style	`string`	CSS styles given to the search box's outer `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
label	`string`	A label that's made available to assistive software like screen readers, and set as a title so that it shows up when the user hovers over the button with the mouse.

Usage example

This example renders the search button with an icon inside.


1<SearchButton label="Search in this conversation" 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
label	`string`	A label that's made available to assistive software like screen readers, and set as a title so that it shows up when the user hovers over the button with the mouse.

Usage example


1<CloseButton class="close-button" label="Close chat" 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

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


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

ActionMenu

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

Props

Name	Type	Description
class	`string`	The class given to the button
label	`string`	A label that's made available to assistive software like screen readers, and set as a title so that it shows up when the user hovers over the button with the mouse.

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" label="More actions">
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
2  action="confirmAttendance"
3  data-orderId="{{conversation.custom.orderId}}"
4>
5  Confirm attendance
6</ActionLink>