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.
| Name | Type | Description |
|---|---|---|
SelectConversationHandler | Triggers when a user clicks a conversation in the list | |
ReactNode | A component that will be displayed while the UI is loading. | |
ConversationPredicate | Used to control which conversations are shown depending on access level, custom conversation attributes or message read status. | |
boolean | Controls if the feed header is shown. Defaults to false. | |
boolean | Controls whether the user can pinch to zoom the UI. Defaults to false. | |
PresenceOptions | Sets metadata for the current session | |
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 | "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 on the Settings page of your 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) | |
"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. | |
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. |
Used to stop listening to TalkJS events.
1off(eventType: 'selectConversation' | 'blur' | 'focus') => void;
| Name | Type | Description |
|---|---|---|
| eventType Required | 'selectConversation' | 'blur' | 'focus' | 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.
1setTranslationEnabledDefault(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. |
Triggers when a user clicks a conversation in the list.
1type SelectConversationHandler = (event: SelectConversationEvent) => void;
Event data passed to onSelectConversation handler
when it is triggered.
| Field | Type | Description |
|---|---|---|
| me | UserData | The current TalkJS User |
| others | Array[<UserData>] | The other participants in the conversation that are not the current user |
| conversation | ConversationData | Conversation object representing the conversation selected by the user |
Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)
1type 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)
1type FocusHandler = (event: FocusEvent) => void;
FocusEvent is an empty object