MessageField

The MessageField component is rendered at the bottom of the chat panel. It includes the text area to write messages, as well as buttons, for example for sending attachments or voice messages.

Props

The MessageField component receives the following props:

Name	Type	Description
conversation	`Conversation`	The current conversation
canSend	`boolean`	Whether the messageField has contents that can be sent (within length limits etc.)
canWrite	`boolean`	Whether the current user has write access in the current conversation
canDelete	`boolean`	Whether the current user is allowed to delete their own messages in the current conversation
canRecord	`boolean`	Whether the current user can record and send voice messages
canShareFile	`boolean`	Whether the current user is allowed to share a file
canShareLocation	`boolean`	Whether the current user is allowed to share their location
placeholder	`string`	Text to be used as placeholder text when the user doesn't have rights to send messages
atTextLimit	`boolean`	Whether the character limit has been reached. Default limit: 10,000 characters.
characterCount	`number`	The length of the text that has been entered into the message field
isPlayingAudio	`boolean`	Whether the user is currently playing the audio they have just recorded
audioProgress	`number`	The current time in seconds of the audio being played back.
recordingDuration	`number`	The length of time in seconds of the audio the user is currently recording
isFocused	`boolean`	Whether the MessageField has been focused by the current user
isEditing	`boolean`	Whether the MessageField is being used as part of editing a message
isEmojiPickerOpen	`boolean`	Whether the emoji picker has been opened by the current user
enableEmojiPicker	`boolean`	Whether the emoji picker should be shown (False when the UI is shown on mobile devices)
characterCount	`number`	The number of text characters in the editor
atTextLimit	`boolean`	Whether the character limit has been reached. Default limit: 10,000 characters.
uploadError	`boolean`	Whether there was an error uploading the voice message
uploadErrorMessage	`string \| nil`	Message describing an error that occurred while uploading a voice message
uploadState	`"pending" \| "done" \| nil`	Current state of uploading a voice message
recordingState	`"not_recording" \| "recording" \| "previewing"`	State of recording a voice message

Available system components

The following system components are available to the MessageField component:

EmojiPicker

The <EmojiPicker> system component shows emojis that the user can pick from to insert into the message.

Props

This component takes no props.

EmojiSuggestionBar

The <EmojiSuggestionBar> renders a horizontal bar when the user uses the : character to choose an emoji. For example :face to begin to select the 🙂 emoji.

Props

Name	Type	Description
class	`string`	The class given to the suggestion bar

Usage example


1<EmojiSuggestionBar class="emoji-suggestions" />

MentionSuggestList

The <MentionSuggestionBar> system component renders a list of participants that the user can mention when they enter the @ character in the MessageField. This list is anchored right above the position of the @ in the MessageField.

Props

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

Usage example


1<MentionSuggestList class="mention-suggestions" />

ReferencedMessageLink

The <ReferencedMessageLink> system component renders a div which, when clicked, will scroll the message that is being replied to into view.

Props

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

Usage example


1<ReferencedMessageLink class="referenced-message-link">
2    <div class="sender-name">{{ messageData.sender.name }}</div>
3
4    <div class="message">
5        <!-- message markup -->
6    </div>
7</ReferencedMessageLink>

Editor

The <Editor> system component renders a text editor.

Props

Name	Type	Description
class	`string`	The class given to the editor
characterLimit	`number`	The maximum number of characters the user is able to send in a single message
placeholder	`string`	The placeholder text to show the user when the editor is empty
disabled	`boolean`	Disables the editor. The value passed is irrelevant. If this prop is present, the editor is disabled

Usage example


1<Editor class="emoji-suggestions" characterLimit="{{140}}" placeholder="Your message..." />

To disable the message field, set the disabled attribute to any value.


1<Editor class="emoji-suggestions" disabled="yes" />

LocationButton

The <LocationButton> system component renders a button that, when clicked, will attempt to share the user's current location.

Props

Name	Type	Description
class	`string`	The class given to the button
ariaLabel	`string`	`aria-label` attribute for the button
title	`string`	`title` attribute for the button

Usage example


1<LocationButton class="location-button" ariaLabel="share location" title="Share your location">
2    <Icon type="locationPin" />
3</LocationButton>

AtachmentButton

The <AttachmentButton> system component renders a button that, when clicked, will bring up the file browser for the user to select and share a file.

Props

Name	Type	Description
class	`string`	The class given to the button
ariaLabel	`string`	`aria-label` attribute for the button
title	`string`	`title` attribute for the button

Usage example


1<AttachmentButton class="attachment-button" ariaLabel="share file" title="Share a file">
2    <Icon type="attach" />
3</AttachmentButton />

EmojiButton

The <EmojiButton> system component renders a button that, when clicked, will show the emoji picker.

Props

Name	Type	Description
class	`string`	The class given to the button
ariaLabel	`string`	`aria-label` attribute for the button
title	`string`	`title` attribute for the button

Usage example


1<EmojiButton class="emoji-button" ariaLabel="add emoji" title="Add emoji">
2    <Icon type="emoji" />
3</EmojiButton>

VoiceMessageButton

The <VoiceMessageButton> system component renders a button that, when clicked, will start recording the user's microphone.

Props

Name	Type	Description
class	`string`	The class given to the button
ariaLabel	`string`	`aria-label` attribute for the button
title	`string`	`title` attribute for the button

Usage example


1<VoiceMessageButton class="voice-button" ariaLabel="record a voice message" title="Record a voice message">
2    <Icon type="mic" />
3</VoiceMessageButton>

CloseButton

The <CloseButton> system component renders a button that, when clicked, will close the ReplyBar, stop the voice recording, or both, depending on the current state of the MessageField.

Props

Name	Type	Description
class	`string`	The class given to the button
ariaLabel	`string`	`aria-label` attribute for the button
title	`string`	`title` attribute for the button

Usage example


1<CloseButton class="close-button" ariaLabel="cancel" title="Cancel">
2    <Icon type="close" />
3</CloseButton>

PlayButton

The <PlayButton> system component renders a button that will play or pause the audio that the user has just recorded.

Props

Name	Type	Description
class	`string`	The class given to the button
ariaLabel	`string`	`aria-label` attribute for the button
title	`string`	`title` attribute for the button

Usage example


1<PlayButton class="play-button" ariaLabel="play recording" title="Play">
2    <Icon
3        class="play-pause"
4        type="{{ isPlayingAudio | then: 'pause' | else: 'play' }}"
5        alt="{{ isPlayingAudio | then: 'pause audio' | else: 'play audio'}}"
6    />
7</PlayButton>

PlaybackMenu

The <PlaybackMenu> system component renders a menu where the user can select the rate at which the audio is played back.

Props

Name	Type	Description
speeds	`string`	The supported playback speeds, as a string of comma-separated numbers

Usage example


1<PlaybackMenu speeds="0.5, 0.75, 1.25, 1.5, 1.75, 2" />

Waveform

The <Waveform> system component renders an audio waveform.

Props

Name	Type	Description
class	`string`	The class given to the waveform container
height	`number`	Height of the waveform in pixels
barHeight	`number`	Height of the waveform bars in pixels
barRadius	`number`	The radius that makes bars rounded
barGap	`number`	Width of the gap between bars
barWidth	`number`	Width of the bars of the waveform
cursorWidth	`number`	Width of the playback cursor
cursorColor	`string`	Color of the cursor indicating the playback position
progressColor	`string`	Color of the part of the waveform that has already been played
waveColor	`string`	Color of the part of the waveform that has not yet been played. When progressColor and waveColor are the same, the progress wave is not rendered at all.

Usage example


1<Waveform 
2    class="location-button"
3    height="200"
4    barHeight="180"
5    barRadius="2"
6    barGap="2"
7    barWidth="4"
8    cursorWidth="4"
9    cursorColor="#4545ff"
10    progressColor="#a3a3e3"
11    waveColor="5e5e5e"
12/>

SendButton

The <SendButton> system component renders a button that, when clicked, will send a text message or voice message.

Props

Name	Type	Description
class	`string`	The class given to the button
ariaLabel	`string`	`aria-label` attribute for the button
title	`string`	`title` attribute for the button

Usage example


1<SendButton class="send-button" ariaLabel="send" title="Send message">
2    <Icon type="send" />
3</SendButton>

CancelButton

The <CancelButton> system component renders a button that, when clicked, will cancel editing a message.

Props

Name	Type	Description
class	`string`	The class given to the button
ariaLabel	`string`	`aria-label` attribute for the button
title	`string`	`title` attribute for the button

Usage example


1<CancelButton class="cancel-button-full" title="{{ strings.CANCEL }}">{{ strings.CANCEL }}</CancelButton>

TextForm

The <TextForm> system component renders a form element that enables the sending of messages and files.

Props

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

Usage example


1<TextForm class="cancel-button-full">
2    <!-- message field markup, including Editor -->
3</TextForm>

ActionButton

A button that, when clicked, emits a conversation action event.

Props

Name	Type	Description
class	`string`	The class given to the button
action	`string`	Name of the action that gets triggered
data-<foo&tg;	`string`	Parameters you want to pass along with the action event. The values of any attributes starting with `data-` will be passed along

ActionLink

A link that, when clicked, emits a conversation action 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

Usage example

This example renders an action button that triggers a conversationAction with "requestPayment" as the action, and a transactionId parameter taken from a custom attribute on the conversation.


1<ActionButton class="action-bittp," action="requestPayment" data-transactionId="{{conversation.custom.transactionId}}">
2    Send payment request
3</ActionButton>