Agent Transcript

Feature293: Agent Transcript

A split section that shows the product working: the case on the left, and on the right a short exchange with an agent where each message settles in on its own beat and one reply carries a page preview.

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/feature293?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/feature293.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Feature293, feature293Demo } from "@/components/beste/block/feature293";

export default function Page() {
  return <Feature293 {...feature293Demo} />;
}

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

import { Feature293 } from "@/components/beste/block/feature293";

export default function Page() {
  return (
    <Feature293
      eyebrow="A conversation, not a builder"
      heading="Say what the page needs. Watch it appear."
      description="Every request after the install is one sentence long."
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      buttons={[{ label: "See what it builds", href: "/blocks" }]}
      labels={{ you: "You", agent: "Agent" }}
      messages={[
        { role: "you", text: "Add a pricing section with three plans." },
        { role: "agent", text: "Done. I placed it under the hero.", image: { src: "/photos/bay.jpg", alt: "A long sandy beach with a boat on the horizon" } },
      ]}
    />
  );
}

Props

type Message = {
  role: "you" | "agent";
  text: string;
  image?: { src: string; alt: string };
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Messages are staggered 0.35 seconds apart, slow enough that the exchange reads as a conversation unfolding rather than a list appearing.
• Sides are set by role rather than by index: yours align right in ink, the agent's align left on the paper surface, and each is capped at 85 percent so the alignment stays visible.
• Any message can carry an image, which is how a reply shows its result without a second column. The picture drifts on scroll and fades up only once its file has loaded.
• The transcript panel is muted rather than bordered, so the two message colours read against it without a third surface tone.
• Role labels are props, so the block works for a support thread or a pair of people just as well as for an agent.
• The section holds its own scroll target, meaning the picture's parallax is measured against the whole section and not the panel.
• Messages animate on entering the viewport once, so scrolling back up does not replay the conversation.