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.
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 |
The following system components are available to the MessageField component:
The <EmojiPicker> system component shows emojis that the user can pick from to insert into the message.
This component takes no props.
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.
| Name | Type | Description |
|---|---|---|
| class | string | The class given to the suggestion bar |
1<EmojiSuggestionBar class="emoji-suggestions" />
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.
| Name | Type | Description |
|---|---|---|
| class | string | The class given to the list |
1<MentionSuggestList class="mention-suggestions" />
The <ReferencedMessageLink> system component renders a div which, when clicked, will scroll the message that is being replied to into view.
| Name | Type | Description |
|---|---|---|
| class | string | The class given to the link |
1<ReferencedMessageLink class="referenced-message-link">2 <div class="sender-name">{{ messageData.sender.name }}</div>34 <div class="message">5 <!-- message markup -->6 </div>7</ReferencedMessageLink>
The <Editor> system component renders a text editor.
| 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 |
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" />
The <LocationButton> system component renders a button that, when clicked, will attempt to share the user's current location.
| 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 |
1<LocationButton class="location-button" ariaLabel="share location" title="Share your location">2 <Icon type="locationPin" />3</LocationButton>
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.
| 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 |
1<AttachmentButton class="attachment-button" ariaLabel="share file" title="Share a file">2 <Icon type="attach" />3</AttachmentButton />
The <EmojiButton> system component renders a button that, when clicked, will show the emoji picker.
| 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 |
1<EmojiButton class="emoji-button" ariaLabel="add emoji" title="Add emoji">2 <Icon type="emoji" />3</EmojiButton>
The <VoiceMessageButton> system component renders a button that, when clicked, will start recording the user's microphone.
| 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 |
1<VoiceMessageButton class="voice-button" ariaLabel="record a voice message" title="Record a voice message">2 <Icon type="mic" />3</VoiceMessageButton>
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.
| 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 |
1<CloseButton class="close-button" ariaLabel="cancel" title="Cancel">2 <Icon type="close" />3</CloseButton>
The <PlayButton> system component renders a button that will play or pause the audio that the user has just recorded.
| 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 |
1<PlayButton class="play-button" ariaLabel="play recording" title="Play">2 <Icon3 class="play-pause"4 type="{{ isPlayingAudio | then: 'pause' | else: 'play' }}"5 alt="{{ isPlayingAudio | then: 'pause audio' | else: 'play audio'}}"6 />7</PlayButton>
The <PlaybackMenu> system component renders a menu where the user can select the rate at which the audio is played back.
| Name | Type | Description |
|---|---|---|
| speeds | string | The supported playback speeds, as a string of comma-separated numbers |
1<PlaybackMenu speeds="0.5, 0.75, 1.25, 1.5, 1.75, 2" />
The <Waveform> system component renders an audio waveform.
| 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. |
1<Waveform2 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/>
The <SendButton> system component renders a button that, when clicked, will send a text message or voice message.
| 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 |
1<SendButton class="send-button" ariaLabel="send" title="Send message">2 <Icon type="send" />3</SendButton>
The <CancelButton> system component renders a button that, when clicked, will cancel editing a message.
| 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 |
1<CancelButton class="cancel-button-full" title="{{ strings.CANCEL }}">{{ strings.CANCEL }}</CancelButton>
The <TextForm> system component renders a form element that enables the sending of messages and files.
| Name | Type | Description |
|---|---|---|
| class | string | The class given to the form |
1<TextForm class="cancel-button-full">2 <!-- message field markup, including Editor -->3</TextForm>
A button that, when clicked, emits a conversation action event.
| 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 |
A link that, when clicked, emits a conversation action event.
| 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 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 request3</ActionButton>