The Thread
component renders a single conversation thread. For new threads, a message composer is rendered. Threads contain everything your users need to have a conversation.
import { Thread } from "@cord-sdk/react";
export const Example = () => {
return (
<Thread
threadId={"<id of thread>"}
location={{ "page": "index" }}
onThreadInfoChange={({ messageCount }) =>
console.log("thread has", messageCount, "messages")
}
onThreadClose={() =>
console.log("User clicked close button")
}
onThreadResolved={() =>
console.log("User resolved the thread")
}
/>
);
};
<cord-thread
thread-id="<id of thread>"
location='{{ "page": "index" }}'
/>
Name | Default | Description |
---|---|---|
location |
current URL | The location for the thread. This only affects the location that a new thread will be associated with. This has no effect on existing threads. |
thread-id |
required The id of the thread to render. To start a new thread provide a thread-id you have not used before. |
|
collapsed |
false |
When true, thread is rendered in collapsed mode. |
show-header |
false |
When true, a thread header with action buttons is shown at the top of the thread. |
Name | Description |
---|---|
cord-thread:threadinfochange |
This event is fired when the thread is first loaded and when the thread information changes. At the moment thread information contains only the number of non-deleted messages in thread. The event.detail[0] is the thread info object which has type { messageCount: number } . |
cord-thread:close |
This event is fired when a user clicks on the close button in the thread header. |
cord-thread:resolved |
This event is fired when a user resolves the thread. |
Name | Default |
---|---|
--cord-composer-height-max |
40vh |
--cord-composer-height-min |
40px |
--cord-avatar-border-radius |
4px |
--cord-avatar-text-color |
--cord-color-base |
--cord-avatar-background-color |
--cord-color-brand-primary |
--cord-facepile-background-color |
--cord-color-base |
--cord-facepile-avatar-border-width |
2px |
--cord-facepile-avatar-overlap |
4px |
--cord-tooltip-background-color |
--cord-color-brand-primary |
--cord-tooltip-content-color |
--cord-color-base |
--cord-annotation-pin-read-color |
--cord-color-base |
--cord-annotation-pin-read-outline-color |
--cord-color-content-secondary |
--cord-annotation-pin-unread-color |
--cord-color-notification |
--cord-annotation-pin-unread-outline-color |
--cord-color-base |
--cord-annotation-pin-unplaced-color |
--cord-color-brand-primary |
--cord-annotation-pin-unplaced-outline-color |
--cord-color-base |
--cord-annotation-pin-z-index |
2147483643 |
--cord-annotation-pin-rotate |
0deg |
--cord-annotation-arrow-color |
--cord-color-brand-primary |
--cord-annotation-arrow-outline-color |
--cord-color-base |
--cord-thread-background-color |
--cord-color-base |
--cord-thread-border |
1px solid var(--cord-color-base-x-strong) |
--cord-thread-border-radius |
--cord-border-radius-medium |
--cord-thread-send-button-font-size |
14px |
--cord-thread-send-button-text-color |
--cord-primary-button-content-color |
--cord-thread-send-button-text-color--hover |
--cord-primary-button-content-color--hover |
--cord-thread-send-button-text-color--active |
--cord-primary-button-content-color--active |
--cord-thread-send-button-text-color--disabled |
--cord-primary-button-content-color--disabled |
--cord-thread-send-button-background-color |
--cord-primary-button-background-color |
--cord-thread-send-button-background-color--hover |
--cord-primary-button-background-color--hover |
--cord-thread-send-button-background-color--active |
--cord-primary-button-background-color--active |
--cord-thread-send-button-background-color--disabled |
--cord-primary-button-background-color--disabled |
--cord-thread-send-button-padding |
8px |
--cord-thread-height |
auto |
--cord-thread-max-height |
none |
--cord-composer-border |
1px solid var(--cord-color-base-x-strong) |
--cord-composer-border-radius |
--cord-border-radius-medium |