Cord LogoDocs
Sign inStart now

Thread List

Components /

Display all the threads in a given location

Live Demo

When to use #

The ThreadList component renders the list of threads created with a given location (see the location property in the Threadcomponent). It provides a quick way for users to view multiple conversations.

This component pairs well with:

How to use #

React:
import { ThreadList } from "@cord-sdk/react";

export const Example = () => {
  return (
    <ThreadList
      location={{ "page": "index" }}
      onThreadClick={(threadId, threadSummary) =>
        console.log("user clicked on thread:", threadId, threadSummary)
      }
      style={{ width: "300px" }}
    />
  );
};
Vanilla JavaScript:
<cord-thread-list location='{ "page": "index" }' style="width: 300px;"></cord-thread-list>
              
import { ThreadList } from "@cord-sdk/react";

export const Example = () => {
  return (
    <ThreadList
      location={{ "page": "index" }}
      onThreadClick={(threadId, threadSummary) =>
        console.log("user clicked on thread:", threadId, threadSummary)
      }
      style={{ width: "300px" }}
    />
  );
};
Copy

Properties #

location #

optional
string
The location of a Thread List controls which threads it should show.
If unset, this field will default to the current URL for the page.

showScreenshotPreviewInMessage #

optional
boolean
Toggles whether screenshot previews are shown in messages in the Thread List. The default setting is set to true.

showPlaceholder #

optional
boolean
If false, when the thread list has no threads, it will show a completely empty container. If set to true, it will instead show a placeholder, containing a description of the types of threads a user will see.
The default value is true.

highlightOpenFloatingThread #

optional
boolean
Toggles whether, if there is a FloatingThread component at the same location, opening a thread should highlight that thread in the ThreadList. The color of the highlight is configurable with CSS. The default setting is set to true. If highlightThreadId is passed in, it will disable highlightOpenFloatingThread.

highlightThreadId #

optional
string
Passing a thread id will highlight that thread in the ThreadList if it exists. The color of the highlight is configurable with CSS. If highlightThreadId is used, it will disable highlightOpenFloatingThread.

filter #

optional
string
A serialized JSON object that can be used to filter the threads in the ThreadList. Currently the only valid key is metadata. The value for a metadata entry should be an object representing the metadata key/value to filter on. For example, to show only threads with the metadata key of "category" set to "sales", set the filter to { metadata: { category: "sales" } }.

partialMatch #

optional
boolean
If false, only threads that exactly match the provided location are shown. If true, threads in any partially matching location are also shown.
The default value is false.

onThreadClick #

optional
function
Callback invoked when one of the threads in the list is clicked. The callback is passed two arguments: the ID of the thread which was clicked, and the summary of the thread which was clicked. For example, you could use this event to scroll the clicked thread into view.

onLoading #

optional
function
Callback invoked when the component begins loading. Use onRender to determine when loading is complete.

onRender #

optional
function
Callback invoked when the component has finished rendering. Use onLoading to determine when a component begins loading.

onThreadMouseEnter #

optional
function
Callback invoked when one of the threads fires a mouseenter event. For example, you could use this event to highlight the section of a webpage being discussed in the hovered thread.

onThreadMouseLeave #

optional
function
Callback invoked when the cursor leaves one of the threads. For example, you could use this event to terminate the special behavior initiated with onThreadMouseEnter.

Want to customize the components further?

Head to our CSS customization guide

Ask Cordy