Thread

Display conversations anywhere in your product

Live Demo

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={"<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
      }}
    />
  );
};

Copy

Properties

threadId

required

string

An arbitrary string that uniquely identifies a thread. When your page loads, the Cord client SDK will load the thread associated with this thread identifier and display the messages. If the thread doesn't exist yet, Cord's backend will create it on the fly.

Warning! An important restriction of working with thread identifiers is that they must be unique across your entire application. You can't use the same thread identifier in two separate organizations. This is an intentional limitation imposed by Cord.

location

optional

string

The location concept for the thread component.

If unset, this field will default to the current URL for the page.

threadName

optional

string

Sets the name of the thread. The thread name is used in a small number of places where a short name or header is useful to distinguish the thread; the default value is nearly always fine. A newly-created thread will have its title set to this value, and an existing thread will have its title updated to this value.

The default setting is the current page's title.

metadata

optional

object

A JSON object that can be used to store metadata about a thread. Keys are strings, and values can be strings, numbers or booleans.

A newly-created thread will have its metadata set to this value, and an existing thread will have its metadata updated to this value. If the metadata property is unset, the thread's existing metadata is preserved.

collapsed

optional

boolean

If 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).

The default value is false.

autofocus

optional

boolean

If true, the thread's message composer input field will render with the autofocus HTML attribute set.

The default value is false.

showHeader

optional

boolean

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

The default value is false.

composerExpanded

optional

boolean

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

This value defaults to false.

showPlaceholder

optional

boolean

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

The default value is true.

onLoading

optional

function

Callback invoked when the component begins loading. Use onRender to determine when loading is complete.

onRender

optional

function

Callback invoked when the component has finished rendering. Use onLoading to determine when a component begins loading.

onThreadInfoChange

optional

function

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

optional

function

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

onResolved

optional

function

Callback invoked when a user resolves the thread.

onFocusComposer

optional

function

Callback invoked when a user focuses the composer.

onBlurComposer

optional

function

Callback invoked when the composer loses focus.

CSS Variables

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

Name Default Value

--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;

Want to customize the components further?

Head to the full list of CSS Variables

Next up

Docs

Go to the Cord Console