- 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
- Changed selection background to #BBD6FB for softer, more pleasant highlighting
- Provides excellent visibility while being gentle on the eyes
- Custom blue tone as requested by user
- Changed selection background from #3b82f6 (blue-500) to #60a5fa (blue-400)
- Provides lighter, more subtle selection highlighting
- Maintains clear selection feedback while being easier on the eyes
- Changed selection text color from white to transparent
- Maintains blue selection background while eliminating white text artifacts
- Fixes holographic effect caused by visible selected text
- Changed from rgba(0,0,0,0) back to transparent for cleaner text hiding
- Added WebkitTextFillColor: transparent to eliminate text visibility artifacts
- Should maintain blue selection highlighting while removing ghost text effect
- Changed opacity from 0.01 to 1 to allow selection highlighting
- Used rgba(0,0,0,0) for transparent text while keeping element visible
- Added explicit user-select CSS properties
- Made selection text fully opaque white for better visibility
- Increased textarea opacity to 0.01 to allow selection highlighting
- Added CSS rules for blue selection background with white text
- Removed conflicting Tailwind selection classes
- Used !important to ensure selection styles override defaults
- Reset height constraints on both textarea and display layers
- Force reflow on both elements to ensure accurate measurement
- Reset display content constraints to prevent stale minHeight values
- Enhanced logging to track height synchronization behavior
- Reset all height constraints before measuring content height
- Force browser reflow to ensure accurate scrollHeight measurement
- Input now properly shrinks back to base size when text is deleted
- Remove onMouseMove handler from textarea to prevent cursor jumping
- Add activity tracking to prevent hover tooltips while actively typing
- Only show hover tooltips after 500ms of inactivity
- Maintain click functionality for spell check suggestions
- Prevent tooltip interference with normal text input flow
- Added focus preservation after clicking misspelled words to maintain typing ability
- Improved stale result detection by checking current textarea value instead of closure value
- Removed problematic value dependency from performSpellCheck to prevent callback recreation
- Ensures textarea stays focused and responsive during spell check interactions
- Remove value dependency from performSpellCheck useCallback to prevent recreation
- Use direct DOM access via hiddenTextareaRef for current value comparison
- Prevent stale spell check results from interfering with active typing
- Fixes issue where input would clear or stop recording when spell check highlights mid-word
- Added context-aware spell check delays: 150ms after word completion, 300ms while typing
- Implemented stale result detection to prevent late spell check updates from shifting text
- Added duplicate check prevention to avoid unnecessary re-processing of same text
- Detects word boundaries (space, punctuation, newlines) for immediate spell checking
- Prevents visual disruption during active typing while maintaining responsiveness
- Changed placeholder container from flex items-center to match content structure
- Applied same whitespace-pre-wrap, min-h-[1.5em], and leading-relaxed classes
- Standardized cursor styling with align-baseline and consistent margins
- Ensures empty state and content state have identical vertical positioning
- Eliminates awkward upward shift when transitioning from empty to content state
- Enhanced multi-line text positioning for spell check hover detection
- Improved line-by-line character positioning calculation using computed styles
- Fixed textarea and display layer height synchronization by removing fixed height
- Added proper scrollbar hiding for rich-text-display while maintaining scroll functionality
- Standardized padding between textarea and display layers (12px top/bottom)
- Better handling of newlines and multi-line content in spell check positioning
- Use getComputedStyle for accurate font and dimension measurements
- Increase padding to Math.max(40, lineHeight * 2) for better visibility
- Add auto-scroll on cursor movement and selection changes
- Add detailed logging for scroll debugging
- Force display layer sync after scrolling
- Ensure cursor is always visible with generous padding buffer
- Implement scrollToCursor function to calculate cursor position
- Auto-scroll when typing to keep cursor visible
- Add 20px padding for comfortable viewing
- Trigger scroll on text changes with setTimeout for DOM updates
- Maintain smooth scrolling behavior
- Ensure cursor is always visible when typing at bottom of content
- Change textarea opacity from 0.15 to 0 (completely invisible)
- Change text color from faint blue to transparent
- Eliminate ghosting/holographic text overlay effect
- Maintain all functionality while providing clean visual appearance
- Add overflow-y-auto to both textarea and visual display layers
- Implement scroll synchronization between layers
- Maintain spell checking functionality during scrolling
- Enable writing and editing of long text content
- Preserve all interactive features (selection, spell check, tooltips)
- Increase visual display layer z-index from 1 to 3 (above textarea)
- Increase misspelled word z-index from z-10 to z-50 for proper layering
- Ensure misspelled words receive mouse events even in multi-line content
- Maintain proper event handling hierarchy for text selection and spell checking
- Implement intelligent tooltip positioning to avoid window edges
- Automatically adjust horizontal alignment (left, center, right) based on available space
- Switch to below-word positioning when insufficient vertical space above
- Add 10px margin from window edges for better visibility
- Use timeout to ensure tooltip renders before calculating position
- Maintain proper transform origins for different alignment modes
- Replace hardcoded colors with Tailwind CSS semantic color classes
- Add proper dark mode support with dark: variants
- Maintain text selection capability (userSelect: 'text')
- Use consistent design system colors for borders, backgrounds, and text
- Ensure accessibility across light and dark themes
- Add click support for misspelled words to show tooltip
- Implement keyboard navigation (arrow keys, numbers 1-5, Enter, Escape)
- Improve visual styling with hover effects and transitions
- Add proper click detection to prevent tooltip from closing when interacting
- Enhanced tooltip positioning and visual feedback
- Add keyboard shortcuts hints at bottom of tooltip
- Replace hardcoded dictionary with native OS spell checkers
- Use aspell on macOS/Linux and hunspell on Windows
- Add IPC handlers for spell-check and spell-suggestions
- Integrate spell checking into RichChatInput component
- Add proper error handling and fallbacks for missing utilities
- Implement inline spell checking with pattern-based detection for keyboard mashing, excessive consonants, and very long words
- Add hover tooltips positioned 1px above misspelled words with suggestions
- Include tooltip hover persistence to allow user interaction
- Add visual highlighting with bright red background for clear visibility
- Use textarea-based hover detection for cross-platform compatibility
- Integrate spell checking into dual-layer rich text input architecture
- Calculate static X position based on word start character position
- Position tooltip just 2px above the input component (y: rect.top - 2)
- Use character width estimation to align tooltip with word start
- Remove floating behavior - tooltip now stays in fixed position
- Account for textarea padding in position calculations
- Replace visual layer hover with textarea onMouseMove detection
- Map mouse coordinates to character positions in text
- Check if mouse position overlaps with misspelled word boundaries
- Show tooltip when hovering over misspelled words via textarea
- Bypasses CSS pointer-events issues with dual-layer architecture
- Uses caretRangeFromPoint API for precise character position detection
- Create SpellCheckTooltip component with hover-based interaction
- Replace right-click context menu with more intuitive hover tooltip
- Position tooltip above misspelled words for better UX
- Add smooth hover enter/leave interactions with delay
- More uniform across platforms (no right-click issues on Mac)
- Compact design showing up to 5 suggestions with numbers
- Maintains all functionality: suggestion selection, add to dictionary, ignore
- Replace hardcoded word list with intelligent pattern detection
- Detect keyboard mashing patterns (qwerty, asdf, zxcv)
- Catch very long words (>15 chars) as likely gibberish
- Identify words with excessive consonant clusters
- Skip common correct words to reduce false positives
- Should now catch words like 'dasfasg' and 'saddsdafhaoihsodiahsdoahd'
- Maintains specific suggestions for known misspellings
- Create SpellCheckContextMenu component with professional styling
- Add right-click handler to misspelled words
- Implement suggestion selection with automatic word replacement
- Add 'Add to dictionary' and 'Ignore' functionality (ready for implementation)
- Include smart suggestions for common misspellings (hellwo->hello, recieve->receive, etc.)
- Support keyboard navigation (Escape to close)
- Proper click-outside-to-close behavior
- Prevent default browser context menu on misspelled words
- Add 'hellwo' to test misspellings list
- Use proper regex for word boundary detection
- Add detailed logging for each word checked
- Show whether each word is marked as correct or misspelling
- This should definitely catch 'hellwo' and show detailed debug info
- Replace Typo.js integration with simple hardcoded spell checker
- Should catch 'gasdd2', 'recieve', 'seperate', 'definately', etc.
- Add detailed logging to debug spell check process
- This will help identify if issue is with Typo.js or the highlighting system
- If this works, we know the highlighting is fine and can fix Typo.js separately
- Fix import conflicts between local and imported checkSpelling functions
- Add @ts-ignore for typo-js import compatibility
- Add extensive console logging throughout spell check process
- Add fallback spell checker for testing if Typo.js fails
- Install @types/typo-js for better TypeScript support
- This should help identify why spell check highlighting isn't working
spencrmartin