feat: Phase 1 Chat Improvements - Markdown, Copy, Keyboard Shortcuts, Accessibility #10
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…shortcuts, accessibility - Add rich markdown rendering with react-markdown, remark-gfm, and rehype-highlight - Implement copy message functionality with toast notifications - Add keyboard shortcuts (Cmd+K to focus composer, Cmd+/ for help, Cmd+↑/↓ for scroll) - Improve error handling with retry buttons - Add ARIA labels and accessibility improvements throughout - Update all message rendering to use new MarkdownRenderer component - Add MessageActions component for copy functionality on hover
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
This PR implements Phase 1 improvements from the Chat Experience Improvement Plan, focusing on core enhancements to the chat interface.
Changes
✅ Rich Markdown Rendering
react-markdownwithremark-gfmfor GitHub Flavored Markdownrehype-highlight✅ Copy Message Functionality
✅ Keyboard Shortcuts
Cmd/Ctrl+K- Focus composerCmd/Ctrl+/- Show shortcuts helpCmd/Ctrl+↑- Scroll to topCmd/Ctrl+↓- Scroll to bottom✅ Improved Error Handling
✅ Accessibility Improvements
role="article",role="log",aria-liveregions)Technical Details
New Components
MarkdownRenderer- Handles markdown parsing and rendering with custom componentsMessageActions- Copy button component for messagesuseKeyboardShortcuts- Hook for global keyboard shortcutsUpdated Components
ConversationView- Now uses MarkdownRenderer for all message typesComposerDrawer- Added ref forwarding for keyboard shortcut focuspage.tsx- Integrated keyboard shortcutsTesting
Dependencies Added
react-markdown- Markdown renderingremark-gfm- GitHub Flavored Markdown supportrehype-highlight- Syntax highlighting for code blocks