Display all the threads in a given location
The ThreadList
component renders the list of threads created with a given location (see the location
property in the Thread
component). It provides a quick way for users to view multiple conversations.
This component pairs well with:
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" }}
/>
);
};
true
.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.true
.true
.
If highlightThreadId
is passed in, it will disable
highlightOpenFloatingThread
.highlightThreadId
is used,
it will disable highlightOpenFloatingThread
.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" } }
.false
, only threads that exactly match the provided location are shown. If true
, threads in any partially matching location are also shown.false
.onRender
to determine when loading is complete.onLoading
to determine when a component begins loading.mouseenter
event. For example, you could use this event to highlight the section of a webpage being discussed in the hovered thread.onThreadMouseEnter
.These can be used to customize the component. You can learn more about customization here.
--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;