Conversation Handover TrailPRO

Chat28: Conversation Handover Trail

One member conversation walked through as timestamped hairline rows inside a bordered panel, each naming what happened and either the person who picked it up or the step that ran on its own.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/chat28?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/chat28?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/chat28.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports chat28Demo alongside the block: the exact props behind the preview above. Spread it to get a working trail in one line.

import { Chat28, chat28Demo } from "@/components/beste/block/chat28";

export default function HandoverPage() {
  return <Chat28 {...chat28Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Chat28 } from "@/components/beste/block/chat28";

export default function HandoverPage() {
  return (
    <Chat28
      badge={{ label: "One thread" }}
      heading="Three people, two shifts, and the member never repeated herself"
      description="This is a real conversation, shortened."
      threadLabel="Rowan Blake · moving a Wednesday appointment"
      entries={[
        {
          time: "08:12",
          action: "Member writes in",
          detail: "Asks to move Wednesday to an afternoon, mentions she is fasting.",
          system: "Arrives on her record, not in a shared inbox",
        },
        {
          time: "08:19",
          action: "Front desk picks it up",
          detail: "Sees the fasting note and does not offer a morning slot.",
          actor: {
            name: "Maya Coleman",
            role: "Reception, Bramble Health",
            avatar: { src: "/people/maya.jpg", alt: "Portrait of Maya Coleman" },
          },
        },
      ]}
      closing="The whole exchange took four messages."
      button={{ label: "See how handover works", href: "/product/handover" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Actor = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};

type HandoverEntry = {
  time: string;
  action: string;
  detail: string;
  actor?: Actor;
  system?: string;
};

Behavior notes

• actor and system are alternatives, not both. When an entry has an actor the block renders the person and ignores system entirely, so an automatic step is expressed by omitting the actor rather than by a flag.
• That is what lets the right column tell one story: every row answers "who did this", and "nobody, it just happened" is a valid answer.
• Times are plain strings, never parsed, so the block stays free of server and client locale differences. They use tabular-nums so the column stays aligned.
• The right column is flex items-start md:justify-end. The items-start is load-bearing: without it the actor block would stretch to the row height, which varies with the length of detail.
• Rows use border-b with last:border-b-0, so the trail closes flush against the panel edge rather than drawing a rule on top of the border.
• The panel's inner padding is on the rows container rather than each row, so the hairlines run the full width of the panel while the content stays inset.
• The panel is bg-background on a bg-muted section, which is how the set raises a single object off the page.
• Actor names use min-w-0 with truncate, so a long role wraps to an ellipsis rather than pushing the avatar out of alignment.