Message field options

Message suggestions / canned messages

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.

Message field visibility

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.

Autofocusing the message field

To focus the message field, just call inbox.messageField.focus() at any time. Note that on mobile devices, this will cause the on-screen keyboard to pop up, obscuring part of the screen.

Controlling Spellcheck, Placeholders, and the Enter key

See MessageFieldOptions for more settings related to the message field.