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.
Name | Type | Description |
---|---|---|
ConversationBuilder | Represents the conversation to be shown in the UI. | |
ReactNode | A component that will be displayed while the UI is loading. | |
boolean | It used to join the conversation as a guest, with limited functions. You can read more about this feature here. | |
boolean | Enables 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 disabled, TalkJS will auto-focus the message field if the user starts typing but no input field is focused. | |
"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" . | |
MessageFieldOptions | Settings that affect the behavior of the message field | |
MessagePredicate | Used to control which messages are shown in the message list, depending on a type, origin, sender or custom message attributes. | |
boolean | Used to control if the chat header is displayed in the UI. Defaults to true . | |
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. | |
string | ThemeOptions | Overrides 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. | |
boolean | Enable or disable translation for a conversation. Defaults to false . | |
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. | |
PresenceOptions | Sets metadata for the current session | |
KeyupHandler | Triggers a KeyupEvent when the user releases a key | |
SendMessageHandler | Triggers when the user sends a message using the TalkJS UI | |
TranslationToggledHandler | Triggers when the user toggles translation in a conversation | |
boolean | "auto" | string[] | ConversationBuilder | TalkJS 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. | |
BlurHandler | Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it) | |
FocusHandler | Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it) | |
ThirdPartyOptions | TalkJS 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. | |
"subject" | "participants" | null | Controls 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" . | |
"subject" | "participants" | Controls what text appears in the chat title, in the header above the messages. Defaults to "participants" . |
Field | Type | Description |
---|---|---|
MessageField | Encapsulates the message entry field tied to the currently selected conversation. |
Send the user's current location to the currently active conversation.
The behaviour of this method is identical to the user clicking the location button in message field i.e the confirmation dialog is shown.
sendLocation(): void;
void
Retrieves the conversation currently shown in the UI.
The result is null
when the selected conversation could not be found.
getCurrentConversation(): Promise<ConversationData | null>
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 does not trigger.
onLeaveConversation(handler: LeaveConversationHandler): Subscription;
Name | Type | Description |
---|---|---|
handler Required | LeaveConversationHandler | The handler to be called. |
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 in the role editor. 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 (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 our REST API.
onCustomMessageAction(action: string, handler: CustomMessageActionHandler): Subscription;
Name | Type | Description |
---|---|---|
action Required | string | The action you want to listen for |
handler Required | CustomMessageActionHandler | The handler to be called |
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 in the role editor. 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 (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 our REST API.
onCustomConversationAction(action: string, handler: CustomConversationActionHandler): Subscription
Name | Type | Description |
---|---|---|
action Required | string | The action you want to listen for |
handler Required | CustomConversationActionHandler | The handler to be called |
Used to stop listening to TalkJS events.
off(eventType: 'blur' | 'focus' | 'sendMessage' | 'translationToggled'): void;
Name | Type | Description |
---|---|---|
eventType Required | 'blur' | 'focus' | 'sendMessage' | 'translationToggled' | The event you want to stop listening to. |
void
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
Name | Type | Description |
---|---|---|
enabled Required | boolean | 'auto' | Whether conversations should be translated by default or not. Pass "auto" to enable translation for conversations with users with different locales. Default: false . |
void
TSXimport * 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://talkjs.com/images/avatar-1.jpg',welcomeMessage: 'Hey there! How are you? :-)',role: 'default',};const other: TalkRn.User = {id: '432156789',name: 'Sebastian',photoUrl: 'https://talkjs.com/images/avatar-5.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.Chatboxref={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>)}
Triggers a KeyupEvent
when the user releases a key.
This event is only emitted when captureKeyboardEvents
is enabled.
In that case, it is emitted for every keypress, including regular letters typed into text fields.
event.isInputFocused
is true when a TalkJS input area is focused (eg 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.
type KeyupHandler = (event: KeyupEvent) => void;
Emitted through on("keyup")
when the user presses a key. All fields except isInputFocused
precisely
match the corresponding fields in the browser's KeyboardEvent.
Field | Type | Description |
---|---|---|
isInputFocused | boolean | True if the event was triggered while an element was focused that can handle keyboard events. |
altKey | boolean | |
ctrlKey | boolean | |
metaKey | boolean | |
shiftKey | boolean | |
code | string | |
key | string | |
location | number |
Triggers when the user sends a message using the TalkJS UI
type SendMessageHandler = (event: SendMessageEvent) => void;
This event is triggered before the message is sent to TalkJS.
Field | Type | Description |
---|---|---|
conversation | ConversationData | The current conversation object |
me | UserData | The current TalkJS user. The email and phone fields are suppressed as stated here. |
message | SentMessage | The message that was sent |
Triggers when the user clicks on the "Leave conversation" action
type LeaveConversationHandler = (event: LeaveConversationEvent) => void;
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 does not trigger.
Field | Type | Description |
---|---|---|
conversation | ConversationData | The conversation that the user intends to leave |
Triggers when the user clicks on a given custom action on a message within the Chatbox.
type CustomMessageActionHandler = (event: MessageActionEvent) => void;
This event is emitted from Chatbox.onCustomMessageAction
when a user clicks on custom action defined in the dashboard.
Field | Type | Description |
---|---|---|
action | string | The action you were listening for |
message | Message | The message where the custom action was clicked. |
A TalkJS message.
Field | Type | Description |
---|---|---|
id | string | The message's ID. |
conversation | ConversationData | Contains the conversation data that the message belongs to. |
isByMe | boolean | true if the message was sent by the current user. |
senderId | string | null | The senderID (userID) for the person that sent the message. |
sender | UserData | null | The user that sent the message. |
body | string | Contains the message's content |
type | "media" | "text" | "location" | Specified if the message is media (file), text or a shared location. |
timestamp | number | UNIX timestamp specifying when the message was sent (UTC, in milliseconds) |
read | boolean | true if the message has been read, false when it has not been seen yet. |
origin | string | Determines how this message was sent: respectively, Via a web browser (or mobile WebView), via the REST API, via reply-to-email or using the import API |
custom | CustomData | Allows you to set custom metadata for the Message. Set any property to null to delete the existing value (if any). When omitted or undefined , the existing value remains unchanged. |
attachment | {url: string; size: number} | null | Only given if the message's type equals "media" . An object with the URL and filesize (in bytes) of the given file. |
location | [number, number] | null | Only given if the message's type equals "location" . An array of two numbers which represent the longitude and latitude of this location, respectively. Only given if this message is a shared location. |
Triggers when the user clicks on a given Conversation Action.
type CustomConversationActionHandler = (event: ConversationActionEvent) => void;
This event is emitted from Chatbox​.onCustomConversationAction
when a user clicks on a custom action in a conversation within the TalkJS UI.
Field | Type | Description |
---|---|---|
action | string | The action you were listening for |
conversation | ConversationData | The conversation where the action was clicked. |
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
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
Triggers when the user toggles translation in a conversation
type TranslationToggledHandler = (event: TranslationToggledEvent) => void;
This event is triggered when the user toggles real-time message translation using the built-in toggle.
Field | Type | Description |
---|---|---|
isEnabled | boolean | Indicates if translation is enabled or not |
conversation | ConversationData | The Conversation for which translation has been toggled. |
This object represents data associated with a conversation.
The subject
, photoUrl
, custom
and welcomeMessages
properties can be set
through ConversationBuilder.setAttributes
.
{id: '87d70908d90cee5d12bd',subject: 'Random conversation',photoUrl: null,topicId: null,welcomeMessages: null,custom: {}}
Field | Type | Description |
---|---|---|
id | string | The ID of the conversation |
custom | CustomData | Contains custom metadata for the conversation. |
subject | string | null | Contains the conversation subject. |
photoUrl | string | null | Contains the URL of a photo. |
welcomeMessages | string[] | null | One or more welcome messages displayed to the user as SystemMessage . |
topicId Deprecated | string | null | Deprecated |
Field | Type | Description |
---|---|---|
id | string | number | The unique ID which is used to identify the user in TalkJS. |
name | string | The user's name which will be displayed on the TalkJS UI. |
photoUrl | string | null | An optional URL to a photo which will be displayed as the user's avatar. |
welcomeMessage | string | null | The default message a user sees when starting a chat with that person. |
role | string | null | TalkJS supports multiple sets of settings, called "roles". These allow you to change the behaviour of TalkJS for different users. You have full control over which user gets which configuration. |
custom | CustomData | Allows you to set custom metadata for the User. Set any property to null to delete the existing value (if any). When omitted or undefined , the existing value remains unchanged. |
availabilityText | string | null | Availability acts similarly to welcomeMessage but appears as a System Message |
locale | string | null | The locale field expects an IETF language tag. See the localization documentation |
{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']}}
Field | Type | Description |
---|---|---|
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) | boolean | If 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) | string | Overrides 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) | boolean | Specifies 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 | ConversationPredicate | Determines 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 . |
Lets you show only specific messages in the chat panel.
// Assuming you have set a `category` custom field in your messages.// Only show messages that have no category set:{custom: {category: '!exists'}}
// Assuming you have set a `category` custom field in your messages.// Only show messages of that have the category "shoes"{custom: {category: ['==', 'shoes']}}
// Assuming you have set a `topic` custom field in your messages.// Only show messages that have the 'topic' either "inquiry" or "reservation"{custom: {topic: ['oneOf', ['inquiry', 'reservation']]}}
// Don't show messages that were sent via the REST API{origin: ['!=', 'rest']}
// Only show messages sent by users with the role of 'admin' and the user ID is 1.{sender: {role: ['==', 'Admin'],id: ['==', '1']}}
// Only show messages of the type "SystemMessage"{type: ['==', 'SystemMessage']}
Field | Type | Description |
---|---|---|
custom (optional) | CustomPredicate | Only 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) | SenderFieldPredicate | Only show messages that are sent by a sender that has all of the given properties |
{id: ["oneOf", ["1", "5"]],locale: ["==", "nl-NL"],role: ["!=", "default"],custom: {category: ["==", "shoes"]}}
Field | Type | Description |
---|---|---|
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) | CustomPredicate | Only show messages sent by users that have particular custom fields set to particular values. |
Field | Type | Description |
---|---|---|
[key: string] | CustomFieldPredicate | Every key must correspond to a key in the custom data that you have set. |