Message Automation RulesPRO

Chat30: Message Automation Rules

An automation section listing each trigger against the message it sends on hairline rows with live switches, striking through the volume of any rule turned off and totalling the rest in a soft summary panel.

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

Base UI flavor

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

This installs the block to components/beste/block/chat30.tsx, the shadcn/ui switch component it depends on, and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Chat30, chat30Demo } from "@/components/beste/block/chat30";

export default function AutomationsPage() {
  return <Chat30 {...chat30Demo} />;
}

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

import { Chat30 } from "@/components/beste/block/chat30";

export default function AutomationsPage() {
  return (
    <Chat30
      badge={{ label: "What sends itself" }}
      heading="Four messages nobody has to remember to write"
      description="Turn each one on or off. Everything else stays manual."
      triggerLabel="When this happens"
      actionLabel="This goes out"
      rules={[
        {
          trigger: "An appointment is booked",
          action: "Confirmation with room, clinician, and what to bring",
          detail: "Sent immediately, with a calendar file attached.",
          sent: "1,284 last month",
          defaultOn: true,
        },
        {
          trigger: "An invoice passes thirty days",
          action: "A single polite chase, then it stops",
          detail: "One message, then it goes to a human list.",
          sent: "38 last month",
          defaultOn: false,
        },
      ]}
      summaryLabel="messages a month at this setting"
      note="Nothing here can be scheduled outside your opening hours."
      button={{ label: "See every automation", href: "/product/automations" }}
    />
  );
}

Props

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

type Rule = {
  trigger: string;
  action: string;
  detail: string;
  sent: string;
  defaultOn?: boolean;
};

Behavior notes

• Switch state is an array of booleans initialised once from defaultOn with a lazy initialiser. Changing rules after mount will not re-seed it, so the block owns that state from first render.
• The total is derived rather than stored: sent is stripped to digits with replace(/[^\d]/g, "") and summed for every enabled rule. That means sent can be free text like "1,284 last month" and still count correctly, but any other number inside that string would be absorbed into the digits too.
• The total is formatted with a regular expression rather than toLocaleString, which keeps the server and client output identical and avoids a hydration mismatch.
• A rule that is switched off has its volume struck through rather than hidden, so the cost of turning it off stays visible.
• Each switch is bound to the action text through htmlFor and a generated id, so clicking the message label toggles the rule.
• The column header row is hidden md:grid and includes two empty aria-hidden spans to keep the four tracks aligned with the rows beneath.
• Because that header is hidden on mobile, its margin would collapse there. The rows container carries mt-12 md:mt-0 to compensate.
• Nothing is persisted. The switches demonstrate the shape of the settings, so wiring them to real preferences is yours.