<t-conversation-list>

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

Properties

app-id
: string Required

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

user-id
: string Required

The ID of the current user.

selected-conversation-id
: string

Optional. The ID of the conversation currently selected in the list. Updating this property changes the selected conversation without firing a select-conversation event.

theme
: string

Optional. The name of the theme to apply to the conversation list. By default TalkJS uses a preset theme. You can customize the conversation list's look and behavior 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, optional otherwise.

Examples

The following examples show how to use the <t-conversation-list> component.

Create a conversation list with an existing user

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

1<t-conversation-list app-id="<APP_ID>" user-id="sample_user_alice" />

Create a conversation list with a new user

Install the @talkjs/core package, which lets you read, subscribe to, and update your chat data:

1npm install @talkjs/core

Import it into the component where you want to use it:

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

Then create the session and user:

1appId = '<APP_ID>';
2userId = 'sebastian';
3session: TalkSession | null = null;
4

5ngOnInit() {
6  this.session = getTalkSession({
7    appId: this.appId,
8    userId: this.userId,
9  });
10  this.session.currentUser.createIfNotExists({ name: 'Sebastian' });
11}

Pass the new user to your conversation list:

1<t-conversation-list [app-id]="appId" [user-id]="userId" />

If you're using TalkJS web components without a package manager, see the Create new users and conversations guide.

Respond to a select conversation event

Respond to a select conversation event by switching the chatbox to show the selected conversation.

When a user selects a conversation from the list, the component emits a select-conversation event with the selected conversation’s details. You can handle this event to update a chatbox or perform another action.

1// chat.component.html
2<t-conversation-list
3  app-id="<APP_ID>"
4  user-id="sample_user_alice"
5  [selected-conversation-id]="conversationId()"
6  (selectConversation)="onSelectConversation($event)"
7></t-conversation-list>
8

9<t-chatbox
10  app-id="<APP_ID>"
11  user-id="sample_user_alice"
12  [conversation-id]="conversationId()"
13></t-chatbox>
14

15// chat.component.ts
16conversationId = signal("sample_conversation");
17

18onSelectConversation(event: SelectConversationEvent): void {
19  this.conversationId.set(event.conversation.id);
20}