<ConversationList>

Displays a list of conversations that the current user is a participant of.

Props

appId
: string Required

Your app's unique TalkJS ID. You can find it on the Settings page of the TalkJS dashboard.

userId
: string Required

The ID of the current user.

selectedConversationId
: string

Optional. The ID of the conversation currently selected in the list. Updating this property changes the selected conversation without triggering the SelectConversationEvent callback.

theme
: Theme

Optional. The name of the theme to apply to the conversation list. A theme is a collection of React components and styles that allow you to customize the appearance and behavior of your chat. By default, a preset theme is provided, which you can override by using a custom theme. See Customize your theme.

token
: string

A token to authenticate the session with. See the Authentication guide and Token reference for details and examples.

Required when authentication is enabled, otherwise optional.

tokenFetcher
: () => string | Promise<string>

Optional. A function that fetches and returns a new authentication token from your server. TalkJS calls this function whenever the current token is about to expire. This callback is designed to work with any backend setup. See Refreshable tokens for details and examples.

onSelectConversation
: (e: SelectConversationEvent) => void

Optional. Function that triggers when the user selects a conversation from the conversation list. It receives a SelectConversationEvent as an argument.

Use this function to have an adjacent chatbox show the correct conversation. See Respond to a select conversation event.

themeCustom
: any

Optional. Whatever value you pass here is available for you to use in your theme components as the themeCustom prop.

Examples

This section gives some examples that demonstrate how to use the <ConversationList> component.

Create a conversation list with an existing user

To create a conversation list and pass it an existing user, use the following:

1<ConversationList appId="<APP_ID>" userId="sample_user_alice" />

Create a conversation list with a new user

To create a conversation list with a new user, first install the @talkjs/core package. The @talkjs/core package lets you read, subscribe to, and update your chat data:

1npm install @talkjs/core

Import the @talkjs/core package into the component where you want to use it:

1import { getTalkSession } from '@talkjs/core';

Then create the session and user:

1const appId = '<APP_ID>';
2const userId = 'sebastian';
3const session = getTalkSession({ appId, userId });
4

5useEffect(() => {
6  session.currentUser.createIfNotExists({ name: 'Sebastian' });
7}, [session]);

Pass the new user to your conversation list:

1<ConversationList appId={appId} userId={userId} />

Respond to a "select conversation" event

Respond to a conversation selection event by switching the chatbox to show the selected conversation:

1function App() {
2  const [me, setMe] = useState('sample_user_sebastian');
3  const [conversationId, setConversationId] = useState('sample_conversation');
4

5  return (
6    <div className="app">
7      <ConversationList
8        appId="<APP_ID>"
9        userId="sample_user_alice"
10        selectedConversationId={conversationId}
11        onSelectConversation={(event) => {
12          setConversationId(event.conversation.id);
13        }}
14      />
15

16      <Chatbox
17        appId="<APP_ID>"
18        userId="sample_user_alice"
19        conversationId={conversationId}
20      />
21    </div>
22  );
23}

Event interfaces

The following interfaces define the event objects that are passed to conversation list properties.

SelectConversationEvent

Event object passed to the onSelectConversation callback. Contains a UserSnapshot, and a ConversationSnapshot.

1export interface SelectConversationEvent {
2  currentUser: UserSnapshot;
3  conversation: ConversationSnapshot;
4}