Mention picker
A composer field that opens a filtered people list after @ and inserts a stable handle.
Reply to Maya
Type @ and choose a person.
Last mention: No mention selected
Implementation
1"use client";2 3import { useEffect, useId, useRef, useState } from "react";4 5export type MentionPerson = {6 id: string;7 name: string;8 handle: string;9 role?: string;10};11 12export type MentionPickerProps = {13 label: string;14 people: MentionPerson[];15 name?: string;16 defaultValue?: string;17 placeholder?: string;18 description?: string;19 maxSuggestions?: number;20 onChange?: (value: string) => void;21 onMention?: (person: MentionPerson) => void;22 className?: string;23};24 25/**26 * A single-line composer field that opens a people list after `@`. The input27 * keeps the combobox semantics while the list stays a real listbox.28 */