Message turn

Two turns, deliberately asymmetric. The user turn is a compact tinted container acting as a landmark; the assistant turn runs at full measure with no container and no avatar, because it is the thing being read.

npx shadcn@latest add button

Tokens this needs: --foreground, --card, --muted, --border, --chart-1

────────────────────────────────────────────────────────────────────────
// MessageTurn.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { Button } from "@/components/ui/button";

export type Turn = { role: "user" | "assistant"; text: string };

/** A user turn past this many words is a paste, and a paste collapses. Two
 *  thousand pasted words otherwise make the landmark the biggest thing on
 *  the page. */
const COLLAPSE_OVER = 120;

/**
 * The transcript is a list and every turn is an item with a speaker in the
 * markup. Tint and alignment carry none of this to a screen reader, and
 * alignment inverts under right-to-left text.
 */
export function Transcript({ turns }: { turns: Turn[] }) {
  return (
    <ol className="flex flex-col gap-4">
      {turns.map((t, i) => (
        <li key={i}><MessageTurn {...t} /></li>
      ))}
    </ol>
  );
}

export function MessageTurn({ role, text }: Turn) {
  const [open, setOpen] = useState(false);

  // The assistant turn is the content, so nothing decorates it: no container,
  // no avatar, no timestamp, the full measure. In practice this is rendered
  // markdown; the point is what wraps it, which is nothing.
  if (role === "assistant") {
    return (
      <div className="text-sm leading-relaxed text-foreground">
        <span className="sr-only">Assistant: </span>
        {text}
      </div>
    );
  }

  const words = text.trim().split(/\s+/).length;
  const collapsed = words > COLLAPSE_OVER && !open;

  // The user turn is the label on the answer and the landmark people scan
  // for, so it is compact, tinted and narrow.
  return (
    <div className="flex flex-col items-end gap-1.5">
      <div className="max-w-md rounded-xl bg-muted px-3.5 py-2 text-sm text-foreground">
        <span className="sr-only">You: </span>
        <span className={collapsed ? "line-clamp-2" : undefined}>{text}</span>
      </div>
      {collapsed && (
        <Button variant="link" size="sm" className="h-auto p-0 text-xs text-chart-1" onClick={() => setOpen(true)}>
          Show all {words.toLocaleString()} words
        </Button>
      )}
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { Transcript } from "./MessageTurn";

const PASTE =
  "Also check this against what you said. 12. BREAK CLAUSE 12.1 The Tenant may determine this Lease on the Break Date by giving the Landlord not less than six months' prior written notice. 12.2 The Lease will determine on the Break Date only if the Tenant has paid all Annual Rent due up to and including the Break Date, and gives vacant possession of the Premises on the Break Date. 12.3 If the Lease determines under this clause the Landlord shall refund to the Tenant, within 14 days, any Annual Rent paid in advance for the period after the Break Date. 13. RENT REVIEW 13.1 The Annual Rent shall be reviewed on the Review Date to the greater of the Annual Rent payable immediately before the Review Date and the Open Market Rent. 13.2 The Open Market Rent shall be agreed between the parties or, in default of agreement within two months before the Review Date, determined by an independent surveyor acting as an expert. 14. DEPOSIT 14.1 The Tenant shall on the date of this Lease pay to the Landlord the Deposit, being a sum equal to three months' Annual Rent, to be held in a separate interest-bearing account. 14.2 The Landlord may draw on the Deposit to make good any breach of the Tenant's covenants. 14.3 The Landlord shall return the balance of the Deposit to the Tenant within 30 days after the end of the Term, less any sums properly deducted under clause 14.2.";

/** Three turns: a question, the answer at full measure, and a paste that collapses. */
export default function Demo() {
  return (
    <div className="rounded-lg border bg-card p-4">
      <Transcript
        turns={[
          { role: "user", text: "Summarise the attached lease" },
          {
            role: "assistant",
            text: "The lease runs five years from 1 March 2024 at £42,000 a year, reviewed upward only at the start of year three. There is a tenant-only break at the end of year two on six months' written notice, conditional on the rent being paid up to date and vacant possession being given. The deposit is three months' rent, held in a separate account and returned within 30 days of the end of the term, less any agreed dilapidations.",
          },
          { role: "user", text: PASTE },
        ]}
      />
    </div>
  );
}