Canned Response Shortcut

ProNew

A reply box where typing a semicolon and a shortcut such as ;thanks lists saved replies with a preview and expands the chosen one in place, and Backspace right after puts the shortcut back. Use this when support or sales people reuse the same answers.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

trigger

Guide and examples

When to use it

Use it in help desks, inboxes and CRMs, where agents send the same dozen replies and want to expand them from the keyboard without leaving the reply box.

Do not use it when replies need review before use, or are chosen from a long library. Use a template picker with search.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`responses`	`{ shortcut, title, body }[]`	-	Saved replies. A `$0` in `body` marks where the caret lands.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on every change.
`trigger`	`string`	`;`	Character that opens the list.

Accessibility

The textarea is a combobox; options read thanks, Thank the customer and show the first 80 characters of the reply as a description.
Expanded ;thanks is announced; Backspace immediately after puts back ;thanks and announces Restored ;thanks.
The restore only works until the next edit or caret move, so ordinary Backspace is never hijacked later.
Matching covers the shortcut and the title.

Testing

The pattern ships with a Testing Library test (canned-response-shortcut.test.tsx) that covers opening on the trigger, expansion with the caret marker, the Backspace restore and its limits.