Display conversations anywhere in your product
The Thread
component renders a single conversation thread, or a message composer to create a new thread. Threads contain everything your users need to have a conversation.
This component pairs well with:
import { Thread } from "@cord-sdk/react";
export const Example = () => {
return (
<Thread
threadId={"<any string that is unique across your entire application>"}
location={{ "page": "index" }}
metadata={{ "foo": "bar" }}
onThreadInfoChange={({ messageCount }) => {
console.log("thread has", messageCount, "messages");
}}
onClose={() => {
console.log("User clicked close button");
}}
onResolved={() => {
console.log("User resolved the thread");
}}
style={{
maxHeight: "400px", // Recommended so that long threads scroll instead of disappearing off-screen
width: "300px" // Recommended so that threads don't stretch horizontally based on their content
}}
/>
);
};
true
, the thread will render in a smaller,
collapsed state. The header and message composer will be hidden,
and only the first message in the thread will be visible (with
a "N replies" link underneath to expand further replies in
the thread).false
.true
, the thread's message composer input
field will render with the autofocus
HTML attribute set.false
.true
, a header will be shown at the top of
the thread. The header contains some extra dropdowns and actions
relating to the thread, such as "Share via email" and
"Unsubscribe". If collapsed
is true
, this attribute is
ignored (the header is always hidden in collapsed threads). In threads with no messages the extra dropdown will not be rendered, only a close button.false
.true
, the composer of the thread will always
appear expanded. This means that it will always show the button list (such as
the mention button and emoji button) right below the editor. If it is set to
false
, the composer will start from a single-line state, but will expand
when a user clicks in the editor or starts typing. It will return to a
single-line state when it loses focus and there is no input in the editor.false
.false
, when the thread has no messages, it will show only the composer. If set to true
, it will instead show a placeholder, containing a set of users from the org and a description to prompt sending a message.true
.onRender
to determine when loading is complete.onLoading
to determine when a component begins loading.These can be used to customize the component. You can learn more about customization here.
--cord-composer-height-max:
40vh;
--cord-composer-height-tall:
200px;
--cord-composer-height-min:
var(--cord-line-height-body, var(--cord-space-l, 20px));
--cord-composer-border:
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-composer-border--focus:
1px solid var(--cord-color-content-primary, #696A6C);
--cord-composer-border-radius:
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--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-send-button-font-size:
var(--cord-font-size-body, 14px);
--cord-thread-send-button-text-color:
var(--cord-primary-button-content-color, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-text-color--hover:
var(--cord-primary-button-content-color--hover, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-text-color--active:
var(--cord-primary-button-content-color--active, var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-send-button-text-color--disabled:
var(--cord-primary-button-content-color--disabled, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-background-color:
var(--cord-primary-button-background-color, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--hover:
var(--cord-primary-button-background-color--hover, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--active:
var(--cord-primary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--disabled:
var(--cord-primary-button-background-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-thread-send-button-padding:
var(--cord-space-2xs, 8px);
--cord-thread-height:
auto;
--cord-thread-max-height:
none;
--cord-thread-width:
auto;