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, showing whether it's been received by the server, and read by all recipients.

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 location="{{ body.location }}" gradients="{{darkenMenuArea | then: 'top-right'}}"/>
3</span>
4<span t:else-if="{{ body.type == 'file' and body.hasThumbnail }}" class="thumbnail {{ body.file.type }} {{body.thumbnailError | then: 'has-error'}}">
5    <Thumbnail file="{{ body.file }}" gradients="{{darkenMenuArea | then: 'top-right'}}"/>
6</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 t:for="{{ link in body.links }}" t:key="link" t:if="{{ isSystemMessage | is_falsy }}">
2    <LinkPreview link="{{ link }}" t:if="{{ forloop.index < 3 }}" />
3</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>