Thread

Display conversations anywhere in your product

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.

Usage

• React.js
• JavaScript

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

Properties

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.

Events

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.

CSS Custom Properties

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

In this section