Feat : AI Assistant Options Partially Hidden or Not Visible While Scrolling down the page and Selecting Text#407
Conversation
There was a problem hiding this comment.
PR Summary
This pull request addresses the AI Assistant options visibility issue when scrolling and selecting text, implementing a Popover component for improved positioning.
- Introduced
@radix-ui/react-popoverinpackage.jsonfor enhanced UI components - Modified
src/components/Editor/HighlightExtension.tsxto adjust button positioning calculations - Refactored
src/components/WritingAssistant/WritingAssistant.tsxto use the new Popover component - Added
src/components/ui/popover.tsxto implement a custom Popover component using Radix UI primitives - Ensure to test the solution thoroughly across different screen sizes and scroll positions
4 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings
|
|
||
| // Calculate the button position below the last word | ||
| const buttonTop = top >= window.innerHeight ? 20 : top - 35 // Adjust the vertical offset as needed | ||
| const buttonTop = top >= window.innerHeight ? 50 : top - 125 // Adjust the vertical offset as needed |
There was a problem hiding this comment.
style: The hardcoded values (50 and 125) might not be flexible enough for all screen sizes and resolutions. Consider using relative values or calculating these dynamically based on the viewport size.
| // Calculate the button position below the last word | ||
| const buttonTop = top >= window.innerHeight ? 20 : top - 35 // Adjust the vertical offset as needed | ||
| const buttonTop = top >= window.innerHeight ? 50 : top - 125 // Adjust the vertical offset as needed | ||
| const buttonLeft = (left + right) / 2 - 190 // Position the button horizontally centered |
There was a problem hiding this comment.
style: The horizontal positioning (buttonLeft) remains unchanged. This might still cause issues in some cases, especially on smaller screens or with long selections.
| </Popover> | ||
| )} | ||
|
|
||
| {getLastMessage(messages, 'assistant') && ( |
There was a problem hiding this comment.
style: The positioning of this div might still cause issues in certain viewport sizes. Consider using a more dynamic positioning approach
Fixes #402
/claim #402
Now We can see the AI Assistant in all the cases as shown below in video
screen-capture.webm