This commit properly configures Monaco Editor to work reliably in the
Electron/Vite environment by using direct module imports instead of
relying on problematic plugin configurations.
Changes:
- Add monaco-editor as direct dependency (v0.52.2)
- Configure @monaco-editor/react loader to use bundled Monaco instance
- Update vite.renderer.config.mts with proper worker and bundling config
- Replace lazy loading with direct import in RichChatInput
- Add Monaco-specific CSS for consistent theming
- Improve loading state UI with better feedback
Technical approach:
Instead of using vite-plugin-monaco-editor (which has ESM compatibility
issues), we import monaco-editor directly and configure the loader to
use that instance. Vite handles worker bundling via the 'worker.format'
config, and we manually chunk Monaco for optimal loading.
This ensures Monaco loads instantly and reliably when entering code mode
(e.g., typing #python in the chat input), with full IDE features like
syntax highlighting, autocomplete, and error detection.
Fixes: Monaco Editor infinite spinner and loading failures
Related: PR #5502
- Added lazy and Suspense to React imports
- Created lazy-loaded MonacoCodeInput component reference
- Ready for final SyntaxHighlighter replacement
Next: Replace SyntaxHighlighter block (lines 674-740) with Monaco
See INTEGRATION_COMPLETE_STATUS.md for exact code to use.
Comprehensive overview of Monaco integration status:
- What's been completed (40%)
- What's remaining (60%, ~3 hours)
- How to complete the integration
- Code review points
- Next action items
All planning and initial implementation complete.
Ready for npm install and final integration.
Created components and updated configuration:
- MonacoCodeInput.tsx: Full Monaco wrapper with IDE features
- package.json: Added @monaco-editor/react dependency
- MONACO_IMPLEMENTATION_STATUS.md: Detailed status and next steps
Ready for npm install and final integration into RichChatInput.
Estimated 2-3 hours to complete after dependencies installed.
Master index document providing:
- Overview of all 7 planning documents
- Recommended reading paths for different audiences
- Document statistics and status
- Quick navigation guide
Complete planning phase with 18,200 words across 7 comprehensive documents.
Master document covering:
- Overview and goals
- Documentation index
- Architecture overview
- Implementation status
- Testing strategy
- Timeline and checklist
- Resources and contact info
All planning documentation is now complete and ready for implementation.
Comprehensive overview document covering:
- Current state and limitations
- Proposed solution and benefits
- Architecture and implementation plan
- Risk analysis and mitigation
- Success metrics and timeline
- Decision rationale
Ready to begin implementation.
- MONACO_INTEGRATION_PLAN.md: Complete implementation roadmap
- MONACO_VS_SYNTAXHIGHLIGHTER.md: Feature comparison and analysis
- MONACO_ARCHITECTURE.md: Technical architecture and data flow
These docs outline the strategy for replacing react-syntax-highlighter
with Monaco Editor to provide a full IDE experience in the chat input.
- Detect presence of code blocks using regex
- Trigger display-based height measurement for both live IDE and permanent code blocks
- Measure display layer scrollHeight when code blocks are present
- Prevents code blocks from being cut off or drifting
- Ensures proper container height even after exiting code mode
- Fixes height sync for backtick code blocks
- When exiting code mode with double-Enter, convert to triple-backtick format
- Format: ```language\ncode\n```
- Code block remains visible and styled after exit
- User can continue typing in normal mode below the code block
- Preserves syntax highlighting in the final message
- Fixes issue where code block disappeared after exiting
- Detect when code content ends with double newline (\n\n)
- Exit code mode automatically when double newline detected
- Remove the #language trigger from the value
- Keep the code content as normal text
- Move cursor to end of text after exiting
- Allows user to continue typing in normal mode after code
- Press Enter twice in code mode to exit
- Calculate cursor position within code content
- Split code at cursor position for rendering
- Render code before cursor, cursor, then code after cursor
- Use inline span elements for proper cursor placement
- Cursor now appears at current typing position, not at end
- Fixes confusing cursor placement issue in code mode
- Changed regex from (\s|$) to (?![a-z]) negative lookahead
- Now matches #python immediately without requiring space
- Prevents #pythonprint from breaking the trigger
- Auto-inserts newline as soon as full language name is typed
- Updated both detection and rendering regex to match
- Fixes issue where typing continued on trigger line
- When #language is typed, automatically insert a newline after it
- Move cursor to the new line (inside the code block)
- Prevents typing from continuing on the trigger line
- Only inserts newline if one doesn't already exist
- Updates codeMode.startPos to account for the inserted newline
- Fixes issue where typing after #python would break the code box
- Add useEffect that triggers when codeMode changes
- Measure display layer's actual scrollHeight instead of textarea's
- Textarea doesn't know about styled code block height
- Use 50ms delay to ensure SyntaxHighlighter has rendered
- This fixes initial load where code block was below the fold
- Ensures containerHeight is properly set for code mode
- Changed regex from ^# to # (removed start-of-line anchor)
- Code mode now activates when #language appears anywhere
- Text before the trigger is preserved and displayed
- Example: 'Here is some code #python print(hello)' works!
- Maintains all existing functionality
- Type #python, #javascript, #typescript, etc. to activate code mode
- Live syntax highlighting as you type
- Enter key inserts newlines (doesn't send message)
- Cmd/Ctrl+Enter to send message
- Language badge displayed
- IDE-style visual appearance
- Supports 30+ programming languages
- Detect code blocks with triple backtick syntax ()
- Render using react-syntax-highlighter with VS Code dark theme
- Display language badge in top-right corner
- Support all common programming languages
- Maintain cursor positioning and height synchronization
- Code blocks excluded from spell checking
- Remove syncDisplayHeight and ensureStyleConsistency calls from resetHeight
- These were recalculating height based on scrollHeight, preventing shrinking
- Now resetHeight just sets to minHeight directly
- Add console logs for debugging
- Ensures syncDisplayHeight runs whenever value prop changes
- Fixes issue where height wasn't recalculating on text deletion
- Complements existing ResizeObserver with direct value monitoring
- Added value dependency to syncDisplayHeight callback
- Ensures height recalculation triggers when content changes
- Fixes issue where input stayed large after deleting text
Fixed the rendering layer having slightly larger line spacing than the input
layer by eliminating CSS class interference and enforcing exact line height:
1. Removed conflicting CSS classes:
- Removed 'leading-relaxed' class from content divs
- This class was applying Tailwind's line height that conflicted with computed values
- Removed 'min-h-[1.5em]' that could interfere with line height calculations
2. Enforced exact line height matching:
- Use setProperty() with '!important' to override any CSS inheritance
- Calculate minHeight using the same computed line height values
- Ensure display layer uses identical line height as textarea
3. Child element line height inheritance:
- Force all child elements to inherit the parent's exact line height
- Prevents individual spans/divs from having different line spacing
- Uses '!important' to override any Tailwind or other CSS classes
This should eliminate the line spacing discrepancy that was causing
highlights to gradually drift away from the text alignment.
Fixed the gradual highlight misalignment that gets worse with each line
by ensuring perfect style synchronization between layers:
1. Comprehensive style synchronization:
- Replaced simple line height sync with full style consistency
- Copies all computed styles that affect text layout from textarea
- Includes fontSize, fontFamily, letterSpacing, wordSpacing
- Ensures identical padding values to prevent cumulative drift
2. Box model consistency:
- Added explicit boxSizing: 'border-box' to display layer
- Matches textarea box model to prevent layout differences
- Eliminates padding/border calculation discrepancies
3. Rounded line height calculations:
- Uses Math.round() to prevent fractional pixel accumulation
- Eliminates subpixel differences that compound over multiple lines
- Ensures consistent line spacing throughout the text
4. Text rendering consistency:
- Copies textRendering, webkitFontSmoothing, mozOsxFontSmoothing
- Prevents browser-specific text rendering differences
- Eliminates subpixel positioning variations
This should eliminate the gradual 'walking away' of highlights and
fix the bottom text cutoff issue by ensuring perfect layer alignment.
Fixed the issue where highlights (spell check, selection) were offset from
text due to inconsistent line height calculations between layers:
1. Dynamic line height calculation:
- Replaced hardcoded 21px with computed line height from actual textarea
- Uses window.getComputedStyle() to get real rendered line height
- Handles both 'normal' and explicit line height values properly
2. Explicit line height synchronization:
- Sets both textarea and display layers to use identical pixel line heights
- Added ensureLineHeightConsistency() function for ongoing sync
- Called after every height sync to maintain consistency
3. Consistent cursor positioning:
- Updated resetHeight method to use calculated line height
- All line-based calculations now use the same computed value
- Eliminates discrepancies between layers
This ensures that spell check highlights, selection highlights, and cursor
positioning are perfectly aligned with the actual rendered text, regardless
of font size, browser differences, or CSS inheritance.
- 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
spencrmartin