UserMessage

The UserMessage component is rendered for each message sent by a user.

Props

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

In addition, UserMessage receives the following props:

Name	Type	Description
showActionMenu	`boolean`	Whether the message actions menu should be shown. This is set to `true` when the user's mouse is hovering over a message, or when the user has clicked or tapped a message.
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 UserMessage 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> subcomponent 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 an overlay on top of the thumbnail image to make the UI on top of it more legible. You can specify multiple gradients, separated by semicolons (`;`). Each gradient should be either 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 demonstrates how you can 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>

ActionMenu

The <ActionMenu> system component renders a menu with actions that the user is allowed to perform. It renders its children inside a <button> that opens the dropdown. It renders nothing when the user has no available actions.

Props

Name	Type	Description
class	`string`	Class name applied to the button that opens the menu

Usage example

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


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

EmojiReactionButton

A button that displays the number of users who reacted with a given emoji, and toggles the current user's reaction.

Props

Name	Type	Description
reaction	`Reaction`	The emoji of this reaction
class	`string`	The class name given to the button

Usage example

This example shows how you can render buttons for each of the reactions that a message has received.


1<EmojiReactionButton
2  t:for="{{ reaction in reactions }}"
3  t:key="{{ reaction.emoji }}"
4  reaction="{{reaction}}"
5  class="emoji-reaction {{ reaction.iReacted | then: 'i-reacted' }}"
6>
7  <span class="reaction">{{ reaction.emoji }}</span>
8  <span class="num-reactions" t:if="{{ reaction.numReactions > 1 }}"
9    >{{ reaction.numReactions }}</span
10  >
11</EmojiReactionButton>

AddEmojiReaction

A button that lets the user add a new emoji reaction.

Props

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

Example usage


1<AddEmojiReaction class="add-emoji-reaction" t:if="{{ canReact }}">
2  <Icon type="addEmoji" class="icon" />
3</AddEmojiReaction>

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 that emits a custom message action event when clicked.

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.

Usage example

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>