<ConversationList>

The <ConversationList> React component represents a conversation list UI, which displays a list of conversations that the current user is a participant of.

interface ConversationListProps

Properties

appId
: string

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

userId
: string

The ID of the current user.

If the given user ID doesn't exist, a "Something went wrong" message will be displayed.

onSelectConversation (optional)
: (event: SelectConversationEvent) => void

Callback that triggers when the user selects a conversation from the list.

Note that updating the selected conversation through the prop **will not** trigger this callback.

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

selectedConversationId (optional)
: string

The ID of the conversation currently selected in the list.

Changing the value of this prop will cause the ConversationList UI to update.

Note that updating the selected conversation through this prop **will not** trigger the callback.

theme (optional)
: Partial<Theme>

Lets you override theme components with your own implementations to customize them.

See Custom theme components for more info.

themeCustom (optional)
: any

Arbitrary custom data passed down to the theme.

Whatever data you pass here will be made available for use in theme components through for Chatbox theme components and through for ConversationList theme components.

token (optional)
: 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 (optional)
: () => string | Promise<string>

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.

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}