Message field options

MessageField.setText lets you build a "message suggestion" or "canned responses" type of mechanism by pre-filling the text in the message field. This way, users have two options: they can send the suggested message to save time or they can change it to fit their specific questions.

You can pre-populate the message field immediately when creating the UI:

1const inbox = session.createInbox({ ... });
2inbox.messageField.setText("Hey, is this item still available?")
3inbox.mount(document.getElementById("inbox-container"));

Or, at any time, modify it in an already-mounted Inbox:

1inbox.messageField.setText('Hey, this works too? Great!');

It's done similarly with the Chatbox and the Popup.

By default, the message field is always visible. The messageField.visible option, together with MessageField.setVisible let you programmatically show or hide the message field:

1const inbox = session.createInbox({ messageField: { visible: false } });
2inbox.mount(document.getElementById('inbox-container'));
3
4// ... later:
5inbox.messageField.setVisible(true);

Additionally, you can configure the message field to be visible depending on the current conversation's properties, using a conversation predicate. For example, to hide the message field on every conversation in which the current user can not write, you could do:

1const predicate = {
2  access: ['==', 'ReadWrite'],
3};
4const inbox = session.createInbox({ messageField: { visible: predicate } });

This will automatically show or hide the message field as the user switches between conversations that they do and do not have write access to.

You can use custom fields too: for example, to temporarily mute all users, you could set a "muted" custom field on the conversation, and use a predicate like this:

1const predicate = {
2  custom: {
3    muted: '!exists',
4  },
5};
6const inbox = window.talkSession.createInbox({
7  messageField: { visible: predicate },
8});

If you then use the REST API to add or remove the muted custom field, the message field will disappear and reappear in real-time.

Use the autofocus property to specify whether the message field should automatically focus when the user navigates:

1const chatbox = session.createChatbox({
2  messageField: { autofocus: 'smart' },
3});

The available options are 'smart' or false. The default option is 'smart', which means that focus is switched to the message field whenever a conversation is selected, if it is possible to do this without negative side effects. This is possible when:

• The message field is inside the browser viewport (so focusing will not unexpectedly cause the page to scroll)
• The user is likely to be on a desktop or laptop computer (so focusing will not unexpectedly expand a mobile on-screen keyboard).

If you need more control over when you focus the message field, set autofocus to false and call the messageField.focus() method when you need it:

1chatbox.messageField.focus();

Note that on mobile devices, this will cause the on-screen keyboard to pop up, obscuring part of the screen.

Use the enterSendsMessage property to select whether pressing the Enter key sends a message, if there is text in the message field:

1const chatbox = session.createChatbox({
2  messageField: { enterSendsMessage: true },
3});

When set to false, the only way to send a message is by clicking or touching the Send button.

By default, enterSendsMessage is set to true.

Use the placeholder property to override the placeholder text that is displayed in the message field when no text has yet been entered.

1const chatbox = session.createChatbox({
2  messageField: { placeholder: 'Write a message' },
3});

The default placeholder text is "Say something...", or a translation.

Use the spellcheck property to specify whether the message field is subject to spell-checking by the underlying browser or OS, by setting the spellcheck HTML attribute.

1const chatbox = session.createChatbox({
2  messageField: { spellcheck: true },
3});

Note that setting spellcheck to true may also enable autocorrect on some mobile devices.

By default, spellcheck is set to false.