- Update built-in command badges to use grey styling matching ActionPopover
- Add blur effect to disabled edit/copy/delete buttons for built-in commands
- Position built-in pill as overlay on top of disabled action buttons
- Center align action buttons within their container space
- Add 8px left spacing to built-in pill overlay for better visual balance
Changed keyboard selection to use the same subtle gray background as mouse hover
instead of the bright blue. This creates a unified visual experience where:
- Mouse hover: Light gray background
- Keyboard selection: Same light gray background
- Both states look identical and use the system's natural hover styling
Removed the complex text color overrides since we're now using the same
background for both hover and selection states. This creates a more
subtle and consistent user experience.
Changed hover background from subtle 'hover:bg-background-muted' to more
visible 'hover:bg-gray-100 dark:hover:bg-gray-700' so users can clearly
see which item they're hovering over with their mouse.
Now both mouse and keyboard interactions have clear visual feedback:
- Mouse hover: Light gray background (gray-100/gray-700)
- Keyboard selection: Bright blue background (blue-500)
- Both provide clear indication of what will be selected
Updated both ActionPopover and MentionPopover to use more visible selection styling:
- Changed selected background from bgProminent to bright blue-500
- Added proper text color overrides for selected state
- Icon colors change to white when selected
- Description text uses blue-100 for better contrast on blue background
- Custom badge gets blue-400 background when parent is selected
This makes it crystal clear which item is selected when navigating with arrow keys.
Users can now easily see what they're about to select with both mouse hover
and keyboard navigation.
Fixed the issue where arrow up/down keys weren't working when the ActionPopover
was open after typing '/'. The problem was in the synthetic event creation in
RichChatInput's handleTextareaKeyDown function.
Changes:
- Properly preserve all keyboard event properties (key, code, keyCode, etc.)
- Bind event methods correctly to maintain proper context
- Ensure target/currentTarget reference the display div for positioning
- Maintain all event properties needed by ChatInput's handleKeyDown
This fixes the keyboard navigation for both ActionPopover (/) and MentionPopover (@)
when using the new RichChatInput component with pills and spell checking.
- Apply consistent hover styling from settings to both popovers
- Use hover:bg-background-muted for better visual feedback
- Change border-radius from rounded-md to rounded-lg for consistency
- Update transition from transition-colors to transition-all for smoother animations
- Maintain selected state styling with bg-bgProminent
This creates a consistent hover experience across the application where users
can clearly see what they're about to select in both @ and / popovers.
- Add search functionality to ActionPopover when typing / + text
- Show starred commands first, then all commands during search
- Add 'Create Command' button in empty states with modal integration
- Implement visual action pills in both input and user messages
- Hide expanded 'what AI sees' text from UI while sending full prompts to AI
- Add dynamic action mapping from localStorage for custom commands
- Implement action pill expansion in useMessageStream before API calls
- Add proper keyboard navigation and modal state management
- Include usage tracking for custom commands
Files modified:
- ChatInput.tsx: Query passing, modal integration, keyboard navigation
- ActionPopover.tsx: Search functionality and empty state enhancements
- RichChatInput.tsx: Dynamic action mapping from localStorage
- MessageContent.tsx: Dynamic action mapping from localStorage
- useMessageStream.ts: Action pill expansion before API calls
- Add CustomCommandsSettings component with row-based design matching Mode section
- Integrate AddCustomCommandModal using proper Dialog components for consistent styling
- Remove category filtering and inline editing for cleaner UX
- Update modal to use proper Dialog background instead of dark overlay
- Remove category field from modal form for simplified command creation
- Apply subtle text colors to form helper text for better visual hierarchy
- Remove preview section from modal to reduce height and improve usability
- Add proper header styling with CardTitle and CardDescription
- Update command icons to display without background circles
- Implement proper padding and spacing throughout the interface
- Connect modal functionality to Plus button and edit actions
- Preserve existing command categories while preventing new category assignment
- Remove header and description from Custom Commands card
- Convert card-style layout to row-based design matching mode section
- Update styling to use proper text-* and background-* classes
- Remove unused onClose parameter
- Make commands display as compact rows with inline actions
- Improve empty state styling and sizing
- Add comprehensive custom slash commands system
- Users can create /command shortcuts that expand to full prompts
- ActionPopover now only shows user-created custom commands
- Add custom commands management in Settings → Chat
- Implement pill rendering: users see [Command Label], AI gets full prompt
- Add localStorage-based storage with upgrade path to API
- Include example commands: document, review, explain, optimize, test
- Add complete type system with validation and categories
- Support usage tracking, favorites, and command management
- Fix pill expansion to use proper labels instead of IDs
Components added:
- CustomCommandsSettings: Full CRUD interface for command management
- AddCustomCommandModal: Modal for creating/editing commands
- useCustomCommands: Hook for command state management
- customCommands types: Complete type system with validation
Components modified:
- ActionPopover: Filtered to show only custom commands
- ChatInput: Fixed handleActionSelect for proper pill rendering
- ChatSettingsSection: Added custom commands card
- Added UI components: label, textarea for form inputs
- Force complete height reset to 0px before measuring scrollHeight
- Add reflow trigger to ensure accurate measurements
- Prevents input from staying large when content is removed
- Update SpellCheckTooltip styling to match commit 663c921 design
- Add numbered suggestions with hover highlighting and blue selection states
- Include keyboard hints and improved action buttons with icons
- Fix tooltip positioning to appear directly above words with minimal gap
- Remove translateY(-100%) transform that was pushing tooltip too far away
- Position tooltip 5px above word with only horizontal centering
- Maintain viewport boundary detection to prevent cutoff on edges
- Improve overall tooltip UX with professional styling and close proximity
- Add back SpellCheckTooltip component with custom styling and suggestions
- Restore custom spell checking logic in RichChatInput component
- Add back IPC spell-check and spell-suggestions handlers in main process
- Re-enable custom misspelled word highlighting with red background
- Restore hover/click popover tooltips with spell suggestions
- Disable native browser spell checking (spellCheck={false}) to use custom implementation
- Add back all spell checking state management and event handlers
This provides the custom spell checking UI with highlighting and popovers as requested.
- Remove custom spell checking logic from RichChatInput component
- Remove SpellCheckTooltip and SpellCheckContextMenu components
- Remove IPC spell-check and spell-suggestions handlers from main process
- Enable native browser spell checking with spellCheck={true} on textarea
- Simplify component by removing misspelled word highlighting and tooltip state
- Users now get familiar OS-native spell check with right-click context menus
This provides better UX with system dictionary integration and familiar behavior.
- Changed cursor transform from translateY(-0.1em) to translateY(0.1em)
- Cursor now appears properly centered with text instead of floating above
- Applied fix to all cursor instances throughout RichChatInput component
- Changed cursor top position from 0px to 0.125em
- Aligns cursor with text baseline instead of sitting below it
- Improves visual consistency with placeholder text
- Position placeholder text absolutely to prevent displacement
- Position cursor absolutely at start of empty input
- Maintains visual stability when focusing empty input
- Set cursor width to 1px for minimal visual footprint
- Removed left margin to prevent text from being pushed left/right
- Applied consistent styling across all cursor instances
- Cursor now appears as thin line without displacing text
spencrmartin