SystemMessage

The SystemMessage component is rendered for each system message in a conversation.

Props

The SystemMessage component receives the fields of a Message as its props.

In addition, SystemMessage receives the following prop:

Name	Type	Description
hasLinkPreviews	`boolean`	Whether this message has any link previews that can be rendered with the LinkPreviews component

Available system components

The following system components are available to the SystemMessage component:

StatusTicks

The <StatusTicks> subcomponent renders ticks to indicate the message's status.

A single status tick indicates that the server has received the message. Double status ticks, also known as read receipts, indicate that all participants have read the message. Read receipts are only shown for conversations with at most 10 participants.

Props

The <StatusTicks> system component takes no props.

Thumbnail

A thumbnail for the given file or location.

Props

Name	Type	Description
file	`File`	File to display a thumbnail for
location	`[number, number]`	Location to display a thumbnail for
gradients	`string`	Gradients can be used as a "mask" on top of the image to make UI on top of it more legible. You can specify multiple gradients, separated by semicolons ";". Each gradient should either be one of: "top-left", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", or a comma-separated list of arguments as you'd pass them to the CSS `linear-gradient()` function

Usage example

This example is taken from our default preset theme. It demonstrates how we conditionally render thumbnails for a file or location attached to the message.


1<span t:if="{{ body.type == 'location' }}" class="thumbnail location">
2  <Thumbnail
3    location="{{ body.location }}"
4    gradients="{{darkenMenuArea | then: 'top-right'}}"
5  />
6</span>
7<span
8  t:else-if="{{ body.type == 'file' and body.hasThumbnail }}"
9  class="thumbnail {{ body.file.type }} {{body.thumbnailError | then: 'has-error'}}"
10>
11  <Thumbnail
12    file="{{ body.file }}"
13    gradients="{{darkenMenuArea | then: 'top-right'}}"
14  />
15</span>

LinkPreviews

A component that renders a preview of links that were sent as part of a message.

Props

Name	Type	Description
links	`string[]`	An array of urls. You'll usually want to pass in the `body.links` field of a Message here.
compact	`boolean`	Whether to show a compact version of the link previews.

Usage example

For more info on how to use the LinkPreviews component, see the Link previews feature page.


1<span t:if="{{ body.type == 'text' }}" class="message-text">
2  {{ body.formattedText }}
3  <LinkPreviews links="{{ body.links }}" />
4</span>

LinkPreview

A component that renders a preview of single link.

Props

Name	Type	Description
link	`string`	A URL to show a preview of
compact	`boolean`	Whether to show a compact version of the link preview.

Usage example

This example shows how to use the LinkPreview component to only render the first three links that a message contains. For more info on how to use this component, see the Link previews feature page.


1<div
2  t:for="{{ link in body.links }}"
3  t:key="link"
4  t:if="{{ isSystemMessage | is_falsy }}"
5>
6  <LinkPreview link="{{ link }}" t:if="{{ forloop.index < 3 }}" />
7</div>

ActionButton

A button that emits a custom message 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 MessageAction event when clicked. The event will have an action set to "confirmAttendance", and include an inviteId taken from a custom attribute set on the message.


1<ActionButton action="confirmAttendance" data-inviteId="{{custom.inviteId}}">
2  Confirm attendance
3</ActionButton>

ActionLink

A link which, when clicked, emits a custom message event.

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 MessageAction event when clicked. The event will have an action set to "confirmAttendance", and include an inviteId taken from a custom attribute set on the message.


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