Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA comment box where typing @ lists the people already in the conversation first and everyone else below, with avatars, and shows who will be notified. Use this when a thread has a few participants out of a big team.
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.
Use it in comments, tickets and chat threads, where the person you want to mention is usually already in the thread and mentioning someone new pulls them in.
Do not use it when there is no notion of participants. Use the mention input component.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
people | { id, name, avatarUrl?, inConversation? }[] | - | Everyone who can be mentioned. |
value | string | - | The text (controlled). |
defaultValue | string | "" | Initial text. |
onValueChange | (value: string, mentioned: string[]) => void | - | Runs on every change with the ids of people mentioned in the text. |
placeholder | string | - | Textarea placeholder. |
combobox (aria-expanded, aria-controls, aria-activedescendant); the popup is a listbox with two labelled groups.mentionedIds finds people by exact @Name in the text, so editing a name removes the mention.Will notify: Ada, Alan is a polite status line below the box.The pattern ships with a Testing Library test (mention-people-in-conversation.test.tsx) that covers grouping, inserting, the notify line and not opening inside a word.