Chatbox

This component represents a messaging UI for a single conversation.

A Chatbox must be a descendant of Session. It doesn't need to be a direct descendant. Check out the example below.

Props

NameTypeDescription
conversationBuilder Required
ConversationBuilderThe conversation to be shown in the UI
loadingComponent
ReactNodeA component that is displayed while the UI is loading
asGuest
booleanUsed to join the conversation as a guest. Read more about guest access.
scrollToMessage
stringThe ID of the message you want to scroll to and highlight.
captureKeyboardEvents
booleanEnables capturing on("keyup") events. Setting this to true also disables any non-standard keyboard shortcuts in TalkJS. Currently, the only such shortcut is that when captureKeyboardEvents is turned off, TalkJS autofocuses the message field if the user starts typing but no input field is focused.
dir
"rtl" | "ltr"Controls the text direction to support both left-to-right languages and right-to-left languages, such as Arabic and Hebrew. TalkJS tries to determine the appropriate text direction from the parent page, but if that doesn't work or you want to explicitly control it, you can override it here. Defaults to "rtl".
disableZoom
booleanControls whether the user can pinch to zoom the UI. Defaults to false.
messageField
MessageFieldOptionsSettings that affect the behavior of the message field
messageFilter
MessagePredicateUsed to control which messages are shown in the message list, depending on the message's type, origin, sender or custom message attributes
showChatHeader
booleanUsed to control if the chat header is displayed in the UI. Defaults to true.
showTranslationToggle
boolean | "auto"Set this to true to show a translation toggle in all conversations. Set this to "auto" to show a translation toggle in conversations where there are participants with different locales. This setting defaults to false, meaning that no toggles are shown. In order to use this, you must be on the Growth plan or higher, and set a Google Translate API key on the Settings page of your dashboard.
theme
string | ThemeOptionsOverrides the theme used for this chat UI. This only works with themes created in the Theme Editor. If you omit this field, the UI uses the theme that is selected in the current user's role.
enableTranslation
booleanEnable or turn off translation for a conversation. Defaults to false.
highlightedWords
string[]This enables you to highlight certain words in messages. Remove the prop or pass an empty array to turn off highlighting. Note: this feature only works on the Growth plan or higher.
presence
PresenceOptionsSets metadata for the current session
onCustomConversationAction
ConversationActionHandlerTriggers a ConversationActionEvent when the user clicks on a given conversation action
onCustomMessageAction
MessageActionHandlerTriggers a MessageActionEvent when the user clicks on a given custom action on a message within the Chatbox
onKeyup
KeyupHandlerTriggers a KeyupEvent when the user releases a key
onLeaveConversation
LeaveConversationHandlerTriggers a LeaveConversationEvent when the user clicks the "Leave conversation" action
onSendMessage
SendMessageHandlerTriggers when the user sends a message using the TalkJS UI
onTranslationToggled
TranslationToggledHandlerTriggers when the user toggles translation in a conversation
translateConversations
boolean | "auto" | string[] | ConversationBuilderTalkJS can translate conversations to the current user's locale using Google Translate. This option specifies which conversations should be translated in this UI. You can pass a boolean to enable or turn off translation for all conversations, "auto" to enable translation on conversations where users have different locales, or you can pass an array of conversation IDs to be translated. This feature is only available on the Growth plan or higher. Make sure you add your Google Translate API key on the Settings page of your dashboard.
onBlur
Deprecated
BlurHandlerTriggers when the chat UI gets unfocused, that is, the user clicks or taps anywhere outside the chat
onFocus
Deprecated
FocusHandlerTriggers when the chat UI gets focused, that is, the user clicks or taps anywhere inside the chat
thirdparties
Deprecated
ThirdPartyOptionsTalkJS leverages iframes behind the scenes. As a result, some services that you use in your app won't work out of the box. This option adds support for a number of services to help you use them. Let us know if you're missing any.
chatSubtitleMode
Deprecated
"subject" | "participants" | nullControls what text appears in the chat subtitle, right below the chat title. No subtitle is displayed when the conversation has no subject set or when set to null. Defaults to "subject".
chatTitleMode
Deprecated
"subject" | "participants"Controls what text appears in the chat title, in the header above the messages. Defaults to "participants".

Properties

FieldTypeDescription
messageField
MessageFieldEncapsulates the message entry field tied to the currently selected conversation

Methods

sendLocation

Send the user's current location to the currently active conversation.

The behavior of this method is identical to the user clicking the location button in the message field, that is, the confirmation dialog is shown.

1sendLocation(): void;

Returns

void

getCurrentConversation

Retrieves the conversation currently shown in the UI.

The result is null when the selected conversation couldn't be found.

1getCurrentConversation(): Promise<ConversationData | null>

Returns

Promise<ConversationData | null>

onLeaveConversation

Deprecated Use the onLeaveConversation prop instead.

Triggers when the user clicks on the "Leave conversation" action.

This event only triggers when the user performs a Leave action from inside the chat UI. Notably, when a user leaves the conversation through other means (for example, they're removed from the conversation using the REST API), this event doesn't trigger.

1onLeaveConversation(handler: LeaveConversationHandler): Subscription;

Parameters

NameTypeDescription
handler RequiredLeaveConversationHandlerThe handler to be called.

Returns

Subscription

onCustomMessageAction

Deprecated Use the onCustomMessageAction prop instead.

Triggers when a user launches a custom action on a message within the TalkJS UI.

To set up a custom action, you need to create it on the Chat UI page of your dashboard. If an action is allowed on a particular message, it'll show up in that message's action menu. The name you specify when setting up the action, is also the name you should pass in here. Names are case sensitive. The event you get contains information about the message on which the action was called, including its ID, so you can look it up later via the REST API.

1onCustomMessageAction(action: string, handler: CustomMessageActionHandler): Subscription;

Parameters

NameTypeDescription
action RequiredstringThe action you want to listen for
handler RequiredCustomMessageActionHandlerThe handler to be called

Returns

Subscription

onCustomConversationAction

Deprecated Use the onCustomConversationAction prop instead.

Triggers when a user launches a custom action on a conversation within the TalkJS UI.

To set up a custom action, you need to create it on the Chat UI page of your dashboard. If an action is allowed on a particular conversation, it'll show up in that conversation's action menu. The name you specify when setting up the action, is also the name you should pass in here. Names are case sensitive. The event you get contains information about the conversation on which the action was called, including its ID, so you can look it up later via the REST API.

1onCustomConversationAction(action: string, handler: CustomConversationActionHandler): Subscription

Parameters

NameTypeDescription
action RequiredstringThe action you want to listen for
handler RequiredCustomConversationActionHandlerThe handler to be called

Returns

Subscription

off

Used to stop listening to TalkJS events.

1off(eventType: 'blur' | 'focus' | 'sendMessage' | 'translationToggled'): void;

Parameters

NameTypeDescription
eventType Required'blur' | 'focus' | 'sendMessage' | 'translationToggled'The event you want to stop listening to

Returns

void

setTranslationEnabledDefault

Enable or turn off translation by default. This setting is applied to any conversation for which you haven't set a specific value.

1setTranslationEnabledDefault(enabled: boolean | 'auto'): void

Parameters

NameTypeDescription
enabled Requiredboolean | 'auto'Whether conversations should be translated by default or not. Pass "auto" to enable translation for conversations with users with different locales. Default: false.

Returns

void


Example

TSX
1import * as React from 'react';
2import * as TalkRn from '@talkjs/react-native';
3
4export default function App() {
5 const chatboxRef = React.useRef<TalkRn.ChatboxRef>(null);
6
7 React.useEffect(() => {
8 /* Stop listening to the focus event.
9
10 A handler for this event has been set in Chatbox below. */
11 chatboxRef!.current!.off('focus');
12 });
13
14 const user: TalkRn.User = {
15 id: '123456789',
16 name: 'Alice',
17 email: '[email protected]',
18 photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
19 welcomeMessage: 'Hey there! How are you? :-)',
20 };
21
22 const other: TalkRn.User = {
23 id: '432156789',
24 name: 'Sebastian',
25 email: '[email protected]',
26 photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
27 welcomeMessage: 'Hey, how can I help? https://google.com',
28 };
29
30 const conversationId = TalkRn.oneOnOneId(user.id, other.id);
31 const conversationBuilder = TalkRn.getConversationBuilder(conversationId);
32
33 conversationBuilder.setParticipant(user);
34 conversationBuilder.setParticipant(other, { notify: false });
35
36 conversationBuilder.setAttributes({ subject: 'Random conversation' });
37
38 return (
39 <TalkRn.Session appId='<APP_ID>' me={user} enablePushNotifications={true}>
40 <TalkRn.Chatbox
41 ref={chatboxRef}
42 conversationBuilder={conversationBuilder}
43 messageField={{
44 enterSendsMessage: false,
45 placeholder: 'Type a message'
46 }}
47 highlightedWords={['me', 'you']}
48 onBlur={(event) => console.log('onBlur: ', event)}
49 onFocus={(event) => console.log('onFocus: ', event)}
50 onSendMessage={(event) => console.log('onSendMessage: ', event)}
51 >
52 </TalkRn.Session>
53 )
54}

You'll need to replace <APP_ID> with your TalkJS App ID. You can find your App ID in the Settings tab of the TalkJS dashboard.

Type Definitions

KeyupHandler

Triggers a KeyupEvent when the user releases a key.

This event is only emitted when captureKeyboardEvents is enabled. In that case, it's emitted for every keypress, including regular letters typed into text fields.

event.isInputFocused is true when a TalkJS input area is focused (such as the message field, the search box, or adjacent buttons). When this is the case, keypresses are likely to cause changes inside the chat UI. We recommend that you discard these events, except when implementing global shortcuts that should take effect regardless of whether the user is typing a message or otherwise interacting with the chat UI using the keyboard.

All other event fields are the same as the corresponding fields in the browser's KeyboardEvent.

1type KeyupHandler = (event: KeyupEvent) => void;

KeyupEvent

Emitted through on("keyup") when the user presses a key. All fields except isInputFocused precisely match the corresponding fields in the browser's KeyboardEvent.

Properties

FieldTypeDescription
isInputFocusedbooleanTrue if the event was triggered while an element was focused that can handle keyboard events
altKeyboolean
ctrlKeyboolean
metaKeyboolean
shiftKeyboolean
codestring
keystring
locationnumber

SendMessageHandler

Triggers when the user sends a message using the TalkJS UI.

1type SendMessageHandler = (event: SendMessageEvent) => void;

SendMessageEvent

This event is triggered before the message is sent to TalkJS.

Properties

FieldTypeDescription
conversationConversationDataThe current conversation object
meUserDataThe current TalkJS user. Sensitive data, such as a user's email or phone, are suppressed for privacy and security reasons.
messageSentMessageThe message that was sent

LeaveConversationHandler

Triggers when the user clicks on the "Leave conversation" action.

1type LeaveConversationHandler = (event: LeaveConversationEvent) => void;

LeaveConversationEvent

This event only triggers when the user performs an action to leave a conversation from inside the chat UI. When a user leaves the conversation through other means (for example, they're removed from the conversation using the REST API), this event doesn't trigger.

Properties

FieldTypeDescription
conversationConversationDataThe conversation that the user intends to leave

CustomMessageActionHandler

Triggers when the user clicks on a given custom action on a message within the Chatbox.

1type CustomMessageActionHandler = (event: MessageActionEvent) => void;

MessageActionEvent

This event is emitted from Chatbox.onCustomMessageAction when a user clicks on custom action defined in the dashboard.

Properties

FieldTypeDescription
actionstringThe action you were listening for
messageMessageThe message where the custom action was clicked

CustomConversationActionHandler

Triggers when the user clicks on a given Conversation Action.

1type CustomConversationActionHandler = (event: ConversationActionEvent) => void;

ConversationActionEvent

This event is emitted from Chatbox​.onCustomConversationAction when a user clicks on a custom action in a conversation within the TalkJS UI.

Properties

FieldTypeDescription
actionstringThe action you were listening for
conversationConversationDataThe conversation where the action was clicked

BlurHandler

Triggers when the chat UI gets unfocused, that is, when the user clicks or taps anywhere outside of the chat.

1type BlurHandler = (event: BlurEvent) => void;

BlurEvent is an empty object.

FocusHandler

Triggers when the chat UI gets focused, that is, when the user clicks or taps anywhere inside the chat.

1type FocusHandler = (event: FocusEvent) => void;

FocusEvent is an empty object

TranslationToggledHandler

Triggers when the user toggles translation in a conversation.

1type TranslationToggledHandler = (event: TranslationToggledEvent) => void;

TranslationToggledEvent

This event is triggered when the user toggles real-time message translation using the built-in toggle.

Properties

FieldTypeDescription
isEnabledbooleanIndicates if translation is enabled or not
conversationConversationDataThe conversation for which translation has been toggled

MessageFieldOptions

Example

1{
2 autofocus: 'smart',
3 enterSendsMessage: false,
4 placeholder: 'Send a message',
5 spellcheck: true,
6 visible: {
7 // Show the message field only if user access is set to 'ReadWrite'
8 access: ['==', 'ReadWrite']
9 }
10}

Properties

FieldTypeDescription
autofocus (optional)false | "smart"Determines whether the message field should automatically focus when the user navigates. Defaults to "smart", which means that the message field gets focused whenever a conversation is selected, if this is possible without negative side effects.
enterSendsMessage (optional)booleanIf set to true, pressing the enter key sends the message if there is text in the message field. When set to false, the only way to send a message is by clicking or touching the "Send" button. Defaults to true.
placeholder (optional)stringOverrides the "placeholder" in the message field, which displays a dimmed text when no text has yet been entered. Defaults to "Say something..." or a translation thereof.
spellcheck (optional)booleanSpecifies whether the spellcheck attribute is set on the message field. Setting this to true may also enable autocorrect on some mobile devices. Defaults to false.
visible (optional)boolean | ConversationPredicateDetermines whether the message field is visible. Using a ConversationPredicate lets you show or hide the message field based on properties of the current conversation. Defaults to true.

MessagePredicate

Lets you show only specific messages in the chat panel.

Examples

These examples demonstrate how to filter your messages.

The following filter only shows message that have no category custom field set:

1{
2 custom: {
3 category: '!exists';
4 }
5}

The following filter shows only messages that have a category of "shoes":

1{
2 custom: {
3 category: ['==', 'shoes'];
4 }
5}

The following filter shows only messages that have a topic of either "inquiry" or "reservation":

1{
2 custom: {
3 topic: ['oneOf', ['inquiry', 'reservation']];
4 }
5}

The following filter shows only messages that were not sent by the REST API:

1{
2 origin: ['!=', 'rest'];
3}

The following filter shows only messages sent by users with the role of "admin" and whose user ID is 1:

1{
2 sender: {
3 role: ['==', 'Admin'],
4 id: ['==', '1']
5 }
6}

The following filter shows only messages with a type of "SystemMessage":

1{
2 type: ['==', 'SystemMessage'];
3}

Properties

FieldTypeDescription
custom (optional)CustomPredicateOnly select messages that have particular custom fields set to particular values. It's not necessary for all messages to have these fields.
type (optional)FieldPredicate<"UserMessage" | "SystemMessage">Only show messages of a given type
origin (optional)FieldPredicate<"web" | "rest" | "email" | "import">Only show messages that were sent by users ("web"), through the REST API ("rest"), via reply-to-email ("email") or via the import REST API ("import")
sender (optional)SenderFieldPredicateOnly show messages that are sent by a sender that has all of the given properties

SenderFieldPredicate

Example

1{
2 id: ["oneOf", ["1", "5"]],
3 locale: ["==", "nl-NL"],
4 role: ["!=", "default"],
5 custom: {
6 category: ["==", "shoes"]
7 }
8}

Properties

FieldTypeDescription
id (optional)FieldPredicate<string>Only show messages sent by users with the specified ID(s)
locale (optional)FieldPredicate<string>Only show messages sent by users with the specified locale
role (optional)FieldPredicate<string>Only show messages sent by users with the specified role
custom (optional)CustomPredicateOnly show messages sent by users that have particular custom fields set to particular values

Properties

FieldTypeDescription
[key: string]CustomFieldPredicateEvery key must correspond to a key in the custom data that you have set