Message templates

A saved-message picker with {{variable}} merge. Each row previews the body with the current variables substituted; 'Use' hands the merged text to your composer.

Hi Maria, reminder: your appointment is Thursday at 2:00 PM. Reply C to confirm or R to reschedule.

Marcus is on the way and will arrive in about 15 minutes.

Your invoice #1042 for $180 is ready: pay.co/1042

Installation

npx shadcn@latest add @handset/message-templates

Usage

import { MessageTemplates } from "@/components/handset/message-templates";

<MessageTemplates
  templates={templates}                         // from your DB or config
  variables={{ name: contact.first_name, date }}
  onSelect={(body) => setDraft(body)}
/>

Placeholders are {{name}}-style; unknown keys are left untouched so a partly filled template still previews cleanly. The mergeTemplate(body, vars) helper is exported if you want to merge without the picker.

Props

Props
Prop	Type	Default	Description
templates	MessageTemplate[]	—	{ id, name, body } — body may contain {{keys}}.
variables	Record<string, string>	—	Values substituted into each body.
onSelect	(body, template) => void	—	Receives the merged body when one is chosen.
className	string	—	Merged onto the list.