- Implement RichChatInput component with visual pill rendering
- Add ActionPill component with blue circle icons for actions
- Add MentionPill component with blue diamond icons for files
- Support for /action and @filename pill creation
- Inline pill display in both input and message history
- Proper text selection, highlighting, and cursor positioning
- Backspace removal of entire pills
- Theme-aware styling for light/dark modes
- Consistent white pill backgrounds with blue accent icons
- Fixed line-breaking issues for natural text flow
Components added:
- RichChatInput.tsx: Main rich text input with pill rendering
- ActionPill.tsx: Blue circle pills for actions
- MentionPill.tsx: Blue diamond pills for file mentions
- MessageContent.tsx: Enhanced message display with pills
Features:
- Visual pills replace [Action] and @filename text
- Click and drag text selection works normally
- Double/triple click for word/all selection
- Pills flow inline with text content
- Proper cursor positioning and blinking
- Backspace removes entire pills as units
spencrmartin