Saved Reply Library

Chat29: Saved Reply Library

A messaging section where a hairline list of saved replies, each with what it is for and how often it is used, swaps a bordered preview card showing the message and the fields it fills in from the record.

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

Base UI flavor

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

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

Quick start

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

import { Chat29, chat29Demo } from "@/components/beste/block/chat29";

export default function RepliesPage() {
  return <Chat29 {...chat29Demo} />;
}

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

import { Chat29 } from "@/components/beste/block/chat29";

export default function RepliesPage() {
  return (
    <Chat29
      badge={{ label: "Saved replies" }}
      heading="The four things reception types forty times a week"
      description="Written once, kept where the conversation is, and filled in from the record."
      templates={[
        {
          name: "Confirming a move",
          purpose: "When a member asks to change an appointment and a slot is free",
          uses: "412 times this month",
          body: "Hello {first_name}, that is moved. You are now booked for {appointment_time}.",
          variables: ["first_name", "appointment_time"],
        },
        {
          name: "Nothing free this week",
          purpose: "When the member wants a slot the rota cannot offer",
          uses: "188 times this month",
          body: "Hello {first_name}, I have put you on the waiting list.",
          variables: ["first_name"],
        },
      ]}
      previewLabel="How it goes out"
      variablesLabel="Filled in from the record"
      button={{ label: "See the reply library", href: "/product/replies" }}
    />
  );
}

Props

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

type Template = {
  name: string;
  purpose: string;
  uses: string;
  body: string;
  variables: string[];
};

Behavior notes

• body is rendered as plain text, braces and all. The block does not parse or highlight the placeholders, so what you see in the preview is exactly the stored template.
• variables is a separate list rather than being extracted from body. That means the two can drift, so keep them in step, and it also lets you list a variable that appears more than once only once.
• Selection is one piece of local useState holding an index, starting at 0. There is no onChange prop and no controlled mode.
• The active marker is the short rule to the left of the name, which flips from bg-border to bg-primary, alongside a bg-muted fill on the row. State never depends on the accent alone.
• Rows carry px-4, so the selected fill extends past the text rather than cutting tight against it.
• The preview card is flex flex-col with the body marked flex-1, so the variable chips stay pinned to the bottom regardless of how long the message is.
• uses is free text, so it can carry a period as well as a count without the block needing to format anything.
• The rows are real button elements with aria-pressed and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.