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;
