Repository navigation
fix: move copy button in the message container - #388
Conversation
📝 WalkthroughWalkthroughThe changes relocate the CopyButton from footerActions to headerActions in AnalysisAnswer. MessageContainer is extended with new headerActions and headerActionsClassName props to support header-level action rendering, with Badge positioning adjusted accordingly. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ai-core/src/components/MessageContainer.tsx`:
- Around line 57-66: The header action container in MessageContainer.tsx (the
div rendering headerActions and using headerActionsClassName) is hidden by
default which makes copy/controls undiscoverable on touch; update the tailwind
classes so the control is visible by default on small/touch screens but remains
hover/focus-revealed on larger pointer devices—replace the current 'opacity-0
... group-focus-within:opacity-100 group-hover:opacity-100' fragment with a
responsive variant like 'opacity-100 sm:opacity-0 ...
sm:group-focus-within:opacity-100 sm:group-hover:opacity-100' while preserving
headerActionsClassName and the rest of the wrapper.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/ai-core/src/components/AnalysisAnswer.tsxpackages/ai-core/src/components/MessageContainer.tsx
| {headerActions && ( | ||
| <div | ||
| className={cn( | ||
| 'absolute right-2 bottom-2 flex items-center justify-end gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100', | ||
| headerActionsClassName, | ||
| )} | ||
| > | ||
| {headerActions} | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Copy action becomes effectively undiscoverable on touch devices.
This container is hidden by default (opacity-0) and only shown on hover/focus-within. On touch screens (no hover), users may not discover or access the copy affordance reliably.
💡 Suggested fix (show by default on small/touch-centric layouts)
- 'absolute right-2 bottom-2 flex items-center justify-end gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100',
+ 'absolute right-2 bottom-2 flex items-center justify-end gap-1 opacity-100 transition-opacity sm:opacity-0 sm:group-focus-within:opacity-100 sm:group-hover:opacity-100',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {headerActions && ( | |
| <div | |
| className={cn( | |
| 'absolute right-2 bottom-2 flex items-center justify-end gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100', | |
| headerActionsClassName, | |
| )} | |
| > | |
| {headerActions} | |
| </div> | |
| )} | |
| {headerActions && ( | |
| <div | |
| className={cn( | |
| 'absolute right-2 bottom-2 flex items-center justify-end gap-1 opacity-100 transition-opacity sm:opacity-0 sm:group-focus-within:opacity-100 sm:group-hover:opacity-100', | |
| headerActionsClassName, | |
| )} | |
| > | |
| {headerActions} | |
| </div> | |
| )} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ai-core/src/components/MessageContainer.tsx` around lines 57 - 66,
The header action container in MessageContainer.tsx (the div rendering
headerActions and using headerActionsClassName) is hidden by default which makes
copy/controls undiscoverable on touch; update the tailwind classes so the
control is visible by default on small/touch screens but remains
hover/focus-revealed on larger pointer devices—replace the current 'opacity-0
... group-focus-within:opacity-100 group-hover:opacity-100' fragment with a
responsive variant like 'opacity-100 sm:opacity-0 ...
sm:group-focus-within:opacity-100 sm:group-hover:opacity-100' while preserving
headerActionsClassName and the rest of the wrapper.
There was a problem hiding this comment.
Pull request overview
This PR moves the copy button in AI assistant messages from a footer position (below content, with relative positioning) to an overlay position (absolutely positioned at bottom-right, appearing on hover). The change improves the UI by making the copy button appear within the message container on mouse hover rather than below the message content.
Changes:
- Added
headerActionsandheaderActionsClassNameprops toMessageContainercomponent for absolutely-positioned actions - Changed
AnalysisAnswerto useheaderActionsinstead offooterActionsfor the copy button - Applied border styling to the copy button for better visibility
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/ai-core/src/components/MessageContainer.tsx | Added new headerActions props that render absolutely-positioned actions at bottom-right with hover opacity; reordered CSS classes for error badge positioning |
| packages/ai-core/src/components/AnalysisAnswer.tsx | Changed copy button from footerActions to headerActions and added border styling |
Comments suppressed due to low confidence (1)
packages/ai-core/src/components/MessageContainer.tsx:42
- The ordering of positioning classes is inconsistent with the pattern used elsewhere in the same file. Line 60 uses "right-2 bottom-2" (horizontal then vertical), but this line now uses "top-[-12px] left-2" (vertical then horizontal). For consistency, consider using "left-2 top-[-12px]" to match the horizontal-then-vertical pattern used on line 60.
'absolute top-[-12px] left-2 flex items-center gap-1 border text-xs',
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| headerActions?: React.ReactNode; | ||
| headerActionsClassName?: string; |
There was a problem hiding this comment.
The naming "headerActions" is misleading since these actions are positioned at the bottom-right of the container (using "absolute right-2 bottom-2" on line 60), not in the header area. Consider renaming to something more descriptive like "overlayActions" or "inlineActions" to better reflect that these are absolutely positioned actions that overlay the content.
There was a problem hiding this comment.
This is a non-issue in my opinion.
We can keep it like headerActions
| headerActions, | ||
| headerActionsClassName, |
There was a problem hiding this comment.
The naming "headerActions" is misleading since these actions are positioned at the bottom-right of the container (line 60 uses "absolute right-2 bottom-2"), not in the header area. Consider renaming to something more descriptive like "overlayActions" or "inlineActions" to better reflect that these are absolutely positioned actions that overlay the content.
| [content], | ||
| ); | ||
| const footerActions = hasTextContent ? ( | ||
| const headerActions = hasTextContent ? ( |
There was a problem hiding this comment.
The variable name "headerActions" is misleading since these actions are positioned at the bottom-right of the container (see MessageContainer line 60 which uses "absolute right-2 bottom-2"), not in the header area. Consider renaming to something more descriptive like "overlayActions" or "inlineActions" to better reflect the actual positioning and purpose.
Move the copy button in the message container of the AI assistant
So it appears on mouse hover
Summary by CodeRabbit