Allow PromptInput to contain rich text input with clickable @mentions and /slash commands

Implement a rich text input component that allows users to insert clickable command elements using @ or / prefixes. These elements should render as styled, interactive tokens within the textarea, similar to Twitter's mention functionality.

When a user types @ or /, an autocomplete dropdown appears with suggestions. Selecting an item inserts it as a visually distinct, clickable token that can be interacted with or removed.

Example Use Cases

• @mentions: Tag files, reference data sources, or link to context
• /commands: Insert slash commands to trigger e.g., tools or custom prompts

References

• https://github.com/facebook/lexical
• https://github.com/steven-tey/novel
• https://github.com/ProseMirror/prosemirror
• https://github.com/ueberdosis/tiptap
• https://github.com/signavio/react-mentions
• https://github.com/inokawa/rich-textarea
• https://github.com/draft-js-plugins/draft-js-plugins
• https://github.com/facebook/lexical/discussions/3013
• https://stackoverflow.com/questions/28820293/how-does-twitter-implement-its-tweet-box

How it works in other apps

Cursor

ChatGPT

Depending on how we decide to implement this, having a full blown WYSIWYM editor (even if headless) could likely increase bundle size by a bit for simple use cases that do not need such functionality, so tree shaking, dynamic imports would be good to consider. Likewise, we could create a custom, more lightweight solution similar to what e.g., react-mentions does.

Regardless of the approach, I think this will be a good feature to have not only for our <PromptInput /> component but also to potentially include the Canvas Editor that Chat SDK has into AI Elements: https://github.com/vercel/ai-chatbot/blob/main/components/text-editor.tsx#L164 (which uses prosemirror at the moment).

Start by locating the PromptInput component and reviewing the referenced Canvas Editor at components/text-editor.tsx, then compare the suggested Lexical, ProseMirror, Tiptap, and react-mentions approaches. Done means @mentions and /commands show autocomplete suggestions, become styled clickable tokens that can be removed, and the approach accounts for bundle-size impact.