Payload

Free · MIT

A block of code or query text from the agent: a query it ran, code it wrote, a config file. Rendered as text in a sunken well, with its language and a copy control that only says "Copied" once the clipboard took it. bare drops the frame and the caption, for a card or panel that already has its own.

Code is split into tokens (keywords, strings, comments…) rendered as spans of text, never as HTML. They're coloured when highlight is set, or anywhere under data-syntax="highlight" (set it on <html> for the whole app).

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/payload

Brings in: chat, highlight, locale, use-copy, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { Payload } from "@/components/payload"

const query = "SELECT status, COUNT(*)\nFROM orders\nWHERE created_at > now() - interval '7 days'\nGROUP BY status"

const fix = 'export async function refund(orderId: string) {\n  // Only settled orders can be refunded\n  const order = await db.orders.find(orderId)\n  if (order.status !== "settled") return { ok: false, reason: "not settled" }\n  return payments.refund(order.chargeId, 4200)\n}'

export default function Example() {
  return (
    <div className="flex max-w-lg flex-col gap-4">
      <Payload language="sql" title="The query I ran" text={query} />
      {/* highlight: coloured by syntax, as text spans. data-syntax="highlight" on <html> turns it on everywhere. */}
      <Payload highlight language="ts" title="The fix" text={fix} />
      {/* bare: inside a card that already has a title and its own actions. */}
      <section aria-labelledby="payload-card" className="rounded-lg border p-3">
        <h4 id="payload-card" className="mb-2 text-sm font-medium">
          Orders by status, last 7 days
        </h4>
        <Payload bare language="sql" text={query} />
      </section>
    </div>
  )
}

<Payload>

Prop	Type	Default	Description
languagerequired	`PayloadLanguage`	—	Shown as the label, e.g. json, sql, python. Never executed or highlighted as HTML.
textrequired	`string`	—	The code or query, shown as text.
title	`string \| undefined`	—	What it is, e.g. "The query I ran". Not shown when `bare`.
bare	`boolean \| undefined`	false	Just the code: no border, language label or copy button, for inside something that has them.
highlight	`boolean \| undefined`	—	Colour the code by its syntax. Left out, it follows the nearest `data-syntax` attribute (off by default).
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

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

Key	English
copy	Copy
copied	Copied
copyFailed	Couldn’t copy
shell	Shell
text	Text