Thread List

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

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 variables - see below. 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 variables - see below. 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.

CSS Variables

These can be used to customize the component. You can learn more about customization here.

Name Default Value
--cord-thread-list-gap
var(--cord-space-xl, 24px);
--cord-thread-list-padding
var(--cord-space-2xs, 8px);
--cord-thread-list-height
auto;
--cord-thread-list-message-truncate-lines
none;
--cord-thread-list-thread-highlight-background-color
var(--cord-message-highlight-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-thread-list-thread-highlight-pill-background-color
var(--cord-message-highlight-pill-background-color, var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-background-color
var(--cord-color-base, #FFFFFF);
--cord-thread-border
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-thread-border-top
var(--cord-thread-border, 1px solid var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-border-right
var(--cord-thread-border, 1px solid var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-border-bottom
var(--cord-thread-border, 1px solid var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-border-left
var(--cord-thread-border, 1px solid var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-border-radius
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-thread-padding
0px;
--cord-thread-height
auto;
--cord-thread-max-height
none;
--cord-thread-width
auto;