Allow PromptInput to contain rich text input with clickable @mentions and /slash commands #179
Description
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
- Insert link node in the middle of a text node facebook/lexical#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).