Share thread

Pro

Share a thread: who can open it, and where the shared copy ends (so later messages aren't shared by accident). The audiences and what each one sees come from the service; the first is "not shared".

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/share-thread

Brings in: button, locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { ShareThread, type ShareAudience } from "@/components/share-thread"

const audiences: ShareAudience[] = [
  { id: "private", label: "Only me", detail: "Nobody else can open it" },
  { id: "team", label: "Acme’s software team", detail: "Members can read it and reply" },
  { id: "link", label: "Anyone at Acme with the link", detail: "Read only; tool output is hidden" },
]

export default function Example() {
  return <ShareThread className="max-w-md" audiences={audiences} messageCount={14} onShare={() => {}} />
}

<ShareThread>

Prop	Type	Default	Description
audiencesrequired	`ShareAudience[]`	—	The first audience means "not shared".
initial	`string \| undefined`	—	The audience selected when it opens. Defaults to the first, not shared.
messageCountrequired	`number`	—	How many messages the thread has; the share point can be set anywhere up to it.
onSharerequired	`(audienceId: string, upTo: number) => void`	—	Called with the chosen audience and the last message number to share (1-based). The first audience's id means stop sharing.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under shareThread in <LocaleProvider strings={{ … }}>; the table is exported as shareThreadStrings.

Key	English
shareThread	Share thread
whoCanOpen	Who can open it
shareUpTo	Share up to
messageOf	message {upTo} of {count}
laterShared	Later messages are shared as they arrive.
afterPrivate	Messages after this one stay private.
stopSharing	Stop sharing
copyLink	Copy link

Types

ShareAudience: { id: string; label: string; detail: string }