Skip to content
Display

CommentThread

People's conversation pinned to something, resolvable.

import { CommentThread } from "@flinbu/seed";

On a component in Dark

button/secondary · Dark
  1. Ana RuizDesign lead
    The hover state on secondary feels too close to rest in Dark. One step lighter?
  2. Mei Chen
    Agreed. bg-secondary-hover is 1.1:1 against bg-secondary.
⌘Enter to send
import { Button, CommentThread, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@flinbu/seed";
import { Ellipsis, Trash2 } from "lucide-react";

const now = new Date();
const [c, setC] = React.useState<ThreadComment[]>([
  { id: 1, author: { name: "Ana Ruiz", role: "Design lead" }, body: "The hover state on secondary feels too close to rest in Dark. One step lighter?", time: new Date(now.getTime() - 3 * 36e5) },
  { id: 2, author: { name: "Mei Chen" }, body: "Agreed. bg-secondary-hover is 1.1:1 against bg-secondary.", time: new Date(now.getTime() - 2 * 36e5) },
]);

<CommentThread className="w-full max-w-md" anchor="button/secondary · Dark" comments={c}
  commentActions={() => (
    <DropdownMenu>
      <DropdownMenuTrigger asChild><Button variant="ghost" size="sm" icon={<Ellipsis />} aria-label="More actions" /></DropdownMenuTrigger>
      <DropdownMenuContent align="end"><DropdownMenuItem icon={<Trash2 />} destructive>Delete</DropdownMenuItem></DropdownMenuContent>
    </DropdownMenu>
  )}
  onReply={(t) => setC([...c, { id: Date.now(), author: { name: "Felipe Linares" }, body: t, time: new Date() }])} />

Use it for

  • Comments on tokens, components, proposals.

Use something else for

  • The AI assistant: it answers in its own panel.

Props

PropTypeDefaultDescription
comments{ author: { name, src?, role? }, body, time?, edited? }[]–Oldest first.
anchorReactNode–What it's about.
onReply(text) => void–Shows the reply box.
resolved / onResolvedChangeboolean–Resolving collapses it.
commentActions(comment) => ReactNode–A menu per comment.

Accessibility

  • A labelled section; times are time elements; the reply box sends with ⌘ or Ctrl + Enter.