Chatbox

This component represents a messaging UI for a single conversation.

A Chatbox MUST be a descendant of Session. It does not need to be a direct descendant. Check out the example below.

Props

NameTypeDescription
conversationBuilder Required
ConversationBuilderRepresents the conversation to be shown in the UI.
chatSubtitleMode
"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
"subject" | "participants"Controls what text appears in the chat title, in the header above the messages. Defaults to "participants".
dir
"rtl" | "ltr"Controls the text direction (for supporting right-to-left languages such as Arabic and Hebrew). TalkJS tries to determine the appropriate text direction from the parent page, but if that does not work or you want to explicitly control it, you can override it here. Defaults to "rtl".
messageField
MessageFieldOptionsSettings that affect the behavior of the message field
messageFilter
MessagePredicateUsed to control which messages are shown in the message list, depending on a 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 will be shown. In order to use this, you must be on the Growth plan or above, and set a Google Translate API key in the dashboard.
theme
stringOverrides 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.
thirdparties
ThirdPartyOptionsTalkJS leverages iframes behind the scenes and therefore not all services that you use in your app will 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.
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/disable 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 and above. Make sure you add your Google Translate API key in the dashboard.
enableTranslation
booleanEnable or disable 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 disable highlighting. Note: this feature only works on the Growth plan and above.
presence
PresenceOptionsSets metadata for the current session
onBlur
BlurHandlerTriggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)
onFocus
FocusHandlerTriggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)
onSendMessage
SendMessageHandlerTriggers when the user sends a message using the TalkJS UI
onTranslationToggled
TranslationToggledHandlerTriggers when the user toggles translation in a conversation

Properties

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

Methods

off

Used to stop listening to TalkJS events.

off(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/disable translation by default. This setting is applied to any conversation for which you haven't set a specific value.

setTranslationEnabledDefault(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.

Example

tsx
import * as React from 'react';
import * as TalkRn from '@talkjs/react-native';
export default function App() {
const chatboxRef = React.useRef<TalkRn.ChatboxRef>(null);
React.useEffect(() => {
/* Stop listening to the focus event.
A handler for this event has been set in Chatbox below. */
chatboxRef!.current!.off('focus');
});
const user: TalkRn.User = {
id: '123456789',
name: 'Alice',
photoUrl: 'https://demo.talkjs.com/img/alice.jpg',
welcomeMessage: 'Hey there! How are you? :-)',
role: 'default',
};
const other: TalkRn.User = {
id: '432156789',
name: 'Sebastian',
photoUrl: 'https://demo.talkjs.com/img/sebastian.jpg',
welcomeMessage: 'Hey, how can I help? https://google.com',
role: 'default',
};
const conversationId = TalkRn.oneOnOneId(user.id, other.id);
const conversationBuilder = TalkRn.getConversationBuilder(conversationId);
conversationBuilder.setParticipant(user);
conversationBuilder.setParticipant(other, { notify: false });
conversationBuilder.setAttributes({ subject: 'Random conversation' });
return (
<TalkRn.Session appId='YOUR_APP_ID' me={user} enablePushNotifications={true}>
<TalkRn.Chatbox
ref={chatboxRef}
conversationBuilder={conversationBuilder}
messageField={{
enterSendsMessage: false,
placeholder: 'Type a message'
}}
highlightedWords={['me', 'you']}
onBlur={(event) => console.log('onBlur: ', event)}
onFocus={(event) => console.log('onFocus: ', event)}
onSendMessage={(event) => console.log('onSendMessage: ', event)}
>
</TalkRn.Session>
)
}

Type Definitions

SendMessageHandler

Triggers when the user sends a message using the TalkJS UI

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

SendMessageEvent

This event is triggered before the message is sent to TalkJS, allowing you to modify the contents of the message or its metadata by using override().

override({ text, custom }: {
text?: string;
custom?: CustomData;
}) => void;

Properties

FieldTypeDescription
conversationConversationDataThe current conversation object
meUserThe current TalkJS user. The email and phone fields are suppressed as stated here.
messageSentMessageThe message that was sent
overrideoverride({ text, custom }: {text?: string; custom?: CustomData }) => voidThis function allows you to modify the contents of the message or its metadata before the message is sent

BlurHandler

Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)

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

BlurEvent is an empty object

FocusHandler

Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)

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

FocusEvent is an empty object

TranslationToggledHandler

Triggers when the user toggles translation in a conversation

type 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.

ConversationData

This object represents data associated with a conversation.

The subject, photoUrl, custom and welcomeMessages properties can be set through ConversationBuilder.setAttributes.

Example

{
id: '87d70908d90cee5d12bd',
subject: 'Random conversation',
photoUrl: null,
topicId: null,
welcomeMessages: null,
custom: {}
}

Properties

FieldTypeDescription
idstringThe ID of the conversation
customCustomDataContains custom metadata for the conversation.
subjectstring | nullContains the conversation subject.
photoUrlstring | nullContains the URL of a photo.
welcomeMessagesstring[] | nullOne or more welcome messages displayed to the user as SystemMessage.
topicId Deprecatedstring | nullDeprecated

MessageFieldOptions

Example

{
autofocus: 'smart',
enterSendsMessage: false,
placeholder: 'Send a message',
spellcheck: true,
visible: {
// Show the message field only if user access is set to 'ReadWrite'
access: ['==', 'ReadWrite']
}
}

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 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. Note that 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/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

// Assuming you have set a `category` custom field in your messages.
// Only show messages that have no category set:
{
custom: {
category: '!exists'
}
}

Properties

FieldTypeDescription
custom (optional)CustomPredicateOnly select messages that have particular custom fields set to particular values. It is 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

{
id: ["oneOf", ["1", "5"]],
locale: ["==", "nl-NL"],
role: ["!=", "default"],
custom: {
category: ["==", "shoes"]
}
}

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.