ConversationList

This component displays a list of conversations that the current user is a part of.

It makes available a prop, onSelectConversation, through which you can pass a handler that gets triggered when the user clicks on one of the conversations.

In most cases, you will just want this handler to navigate to a screen that contains a Chatbox showing the conversation that has just been selected. We have made available examples that show you how to do this using: React Navigation and React Native Navigation.

A ConversationList MUST be a descendant of Session. It does not need to be a direct descendant.

Props

NameTypeDescription
onSelectConversation
SelectConversationHandlerTriggers when a user clicks a conversation in the list
feedConversationTitleMode
"subject" | "participants" | "auto"Controls how a chat is displayed in the feed of chats.
Note: when set to "subject" but a conversation has no subject set, then TalkJS falls back to "participants".
When not set, defaults to "auto", which means that in group conversations that have a subject set, the subject is displayed and otherwise the participants.
feedFilter
ConversationPredicateUsed to control which conversations are shown depending on access level, custom conversation attributes or message read status.
showFeedHeader
booleanControls if the feed header is shown. Defaults to true.
presence
PresenceOptionsSets metadata for the current session
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.
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)

Methods

off

Used to stop listening to TalkJS events.

off(eventType: 'selectConversation' | 'blur' | 'focus') => void;

Parameters

NameTypeDescription
eventType Required'selectConversation' | 'blur' | 'focus'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.

Type Definitions

SelectConversationHandler

Triggers when a user clicks a conversation in the list.

type SelectConversationHandler = (event: SelectConversationEvent) => void;

SelectConversationEvent

Event data passed to onSelectConversation handler when it is triggered.

Properties

FieldTypeDescription
meUserThe current TalkJS User
othersArray<User>The other participants in the conversation that are not the current user
conversationConversationBuilderConversation object representing the conversation selected by the user

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