Link copied to clipboard!
Mobile navigation button - closed state

Thread

Display conversations anywhere in your product


When to use

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:


How to Use

  • 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" }}'
    ></cord-thread>
    

Properties

Attributes & Events

Properties
location required default: current URL

The location for the thread. This only affects new threads; it has no effect on existing threads.

threadId required

The ID of the thread to render. To start a new thread, provide a thread-id you have not used before.

collapsed optional default: false

Whether to render the thread in the collapsed state.

showHeader optional default: false

Whether to show a thread header with action buttons at the top of the thread.

onThreadInfoChange

Callback invoked 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.

onClose

Callback invoked when a user clicks on the close button in the thread header.

onResolved

Callback invoked when a user resolves the thread.

Attributes
location required default: current URL

The location for the thread. This only affects new threads; it 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 optional default: false

Whether to render the thread in the collapsed state.

show-header optional default: false

Whether to show a thread header with action buttons at the top of the thread.

Events
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.


CSS Variables

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

Name Default Value
--cord-thread-background-color --cord-color-base
#FFFFFF
--cord-thread-border 1px solid var(--cord-color-base-x-strong)
--cord-thread-border-radius --cord-border-radius-medium
4px
--cord-thread-send-button-background-color --cord-primary-button-background-color
#121314
--cord-thread-send-button-text-color --cord-primary-button-content-color
#FFFFFF

Next up