UserMessage
The UserMessage component is rendered for each message sent by a user.
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 |
The following system components are available to the UserMessage component:
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.
The <StatusTicks> subcomponent takes no props.
A thumbnail for the given file or location.
| 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. |
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 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>
A component that renders a preview of links that were sent as part of a message.
| 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. |
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>
A component that renders a preview of single link.
| Name | Type | Description |
|---|---|---|
| link | string | A URL to show a preview of |
| **compact | boolean | Whether to show a compact version of the link preview. |
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>
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.
| Name | Type | Description |
|---|---|---|
| class | string | Class name applied to the button that opens the menu |
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>
A button that displays the number of users who reacted with a given emoji, and toggles the current user's reaction.
| Name | Type | Description |
|---|---|---|
| reaction | Reaction | The emoji of this reaction |
| class | string | The class name given to the button |
This example shows how you can render buttons for each of the reactions that a message has received.
1<EmojiReactionButton t:for="{{ reaction in reactions }}" t:key="{{ reaction.emoji }}" reaction="{{reaction}}" class="emoji-reaction {{ reaction.iReacted | then: 'i-reacted' }}">2 <span class="reaction">{{ reaction.emoji }}</span>3 <span class="num-reactions" t:if="{{ reaction.numReactions > 1 }}">{{ reaction.numReactions }}</span>4</EmojiReactionButton>
A button that lets the user add a new emoji reaction.
| Name | Type | Description |
|---|---|---|
| class | string | The class given to the button |
1<AddEmojiReaction class="add-emoji-reaction" t:if="{{ canReact }}">2 <Icon type="addEmoji" class="icon" />3</AddEmojiReaction>
A button that emits a custom message action event when clicked.
| 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. |
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 attendance3</ActionButton>
A link that emits a custom message action event when clicked.
| 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. |
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 attendance3</ActionLink>