Repository navigation
fix: add copy to ai assistant prompt - #411
Conversation
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdded a hover/focus-revealed CopyButton next to the prompt text in AnalysisResult; the button copies Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
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)
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/AnalysisResult.tsx`:
- Around line 104-114: The floating CopyButton is absolutely positioned over
long prompt text and remains clickable when hidden; update the prompt container
(the div containing analysisResult.prompt — currently class "flex-1") to reserve
horizontal space for the control (e.g., add a right padding like pr-8/pr-10) and
change the CopyButton wrapper (the absolute div) to disable pointer events when
hidden and enable them when visible by adding pointer-events-none plus the
focus/hover variants (e.g., group-focus-within/prompt:pointer-events-auto and
group-hover/prompt:pointer-events-auto) so the hidden hit-area is inert and the
control only receives pointer events when visible.
| <div className="group/prompt bg-muted relative flex w-full items-center gap-2 rounded-md border p-2 text-sm"> | ||
| <SquareTerminalIcon className="h-4 w-4" /> | ||
| {/** render prompt */} | ||
| <div className="flex-1">{analysisResult.prompt}</div> | ||
| <div className="absolute right-2 opacity-0 transition-opacity group-focus-within/prompt:opacity-100 group-hover/prompt:opacity-100"> | ||
| <CopyButton | ||
| text={analysisResult.prompt} | ||
| tooltipLabel="Copy question" | ||
| className="h-6 w-6" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
Reserve space for the floating copy control and disable hidden hit-area.
At Line 104 and Line 108, the absolute copy button can overlap long prompt text, and opacity-only hiding keeps an invisible clickable zone active.
Suggested patch
- <div className="group/prompt bg-muted relative flex w-full items-center gap-2 rounded-md border p-2 text-sm">
+ <div className="group/prompt bg-muted relative flex w-full items-center gap-2 rounded-md border p-2 pr-10 text-sm">
...
- <div className="absolute right-2 opacity-0 transition-opacity group-focus-within/prompt:opacity-100 group-hover/prompt:opacity-100">
+ <div className="pointer-events-none absolute right-2 opacity-0 transition-opacity group-focus-within/prompt:pointer-events-auto group-focus-within/prompt:opacity-100 group-hover/prompt:pointer-events-auto group-hover/prompt: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.
| <div className="group/prompt bg-muted relative flex w-full items-center gap-2 rounded-md border p-2 text-sm"> | |
| <SquareTerminalIcon className="h-4 w-4" /> | |
| {/** render prompt */} | |
| <div className="flex-1">{analysisResult.prompt}</div> | |
| <div className="absolute right-2 opacity-0 transition-opacity group-focus-within/prompt:opacity-100 group-hover/prompt:opacity-100"> | |
| <CopyButton | |
| text={analysisResult.prompt} | |
| tooltipLabel="Copy question" | |
| className="h-6 w-6" | |
| /> | |
| </div> | |
| <div className="group/prompt bg-muted relative flex w-full items-center gap-2 rounded-md border p-2 pr-10 text-sm"> | |
| <SquareTerminalIcon className="h-4 w-4" /> | |
| {/** render prompt */} | |
| <div className="flex-1">{analysisResult.prompt}</div> | |
| <div className="pointer-events-none absolute right-2 opacity-0 transition-opacity group-focus-within/prompt:pointer-events-auto group-focus-within/prompt:opacity-100 group-hover/prompt:pointer-events-auto group-hover/prompt:opacity-100"> | |
| <CopyButton | |
| text={analysisResult.prompt} | |
| tooltipLabel="Copy question" | |
| className="h-6 w-6" | |
| /> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ai-core/src/components/AnalysisResult.tsx` around lines 104 - 114,
The floating CopyButton is absolutely positioned over long prompt text and
remains clickable when hidden; update the prompt container (the div containing
analysisResult.prompt — currently class "flex-1") to reserve horizontal space
for the control (e.g., add a right padding like pr-8/pr-10) and change the
CopyButton wrapper (the absolute div) to disable pointer events when hidden and
enable them when visible by adding pointer-events-none plus the focus/hover
variants (e.g., group-focus-within/prompt:pointer-events-auto and
group-hover/prompt:pointer-events-auto) so the hidden hit-area is inert and the
control only receives pointer events when visible.
There was a problem hiding this comment.
I agree, it'd be good to avoid absolute here
There was a problem hiding this comment.
@ilyabo Got it! Here's a cleaner approach using flexbox instead of absolute positioning:
<div className="group/prompt bg-muted flex w-full items-center gap-2 rounded-md border p-2 text-sm">
<SquareTerminalIcon className="h-4 w-4" />
{/** render prompt */}
<div className="flex-1">{analysisResult.prompt}</div>
<div className="opacity-0 transition-opacity group-focus-within/prompt:opacity-100 group-hover/prompt:opacity-100">
<CopyButton
text={analysisResult.prompt}
tooltipLabel="Copy question"
className="h-6 w-6"
/>
</div>
</div>Changes:
- Remove
relativefrom the parent container (no longer needed) - Remove
absolute right-2from the button wrapper - The button stays in the flex flow, so space is automatically reserved
- No text overlap issues
- The opacity transitions still work as expected
This way the button is always part of the layout and naturally positioned at the end, avoiding any potential overlap with long prompts.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
There was a problem hiding this comment.
Pull request overview
Adds a hover-revealed copy affordance to the “prompt” header within the AI analysis result UI, aligning it with existing “copy” interactions elsewhere in the app.
Changes:
- Added a
CopyButtonnext toanalysisResult.promptthat appears on hover/focus. - Uses Tailwind
group-*/hover/focus variants to control visibility.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| <div className="group/prompt bg-muted flex w-full items-center gap-2 rounded-md border p-2 text-sm"> | ||
| <SquareTerminalIcon className="h-4 w-4" /> | ||
| {/** render prompt */} | ||
| <div className="flex-1">{analysisResult.prompt}</div> | ||
| <div className="opacity-0 transition-opacity group-focus-within/prompt:opacity-100 group-hover/prompt:opacity-100"> | ||
| <CopyButton | ||
| text={analysisResult.prompt} | ||
| tooltipLabel="Copy question" | ||
| className="h-6 w-6" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
The copy button container is part of the flex layout (not absolutely positioned), so it reserves horizontal space even when hidden (opacity-0). This can cause the prompt text to wrap earlier / truncate sooner and makes the layout inconsistent with other hover-copy UIs (e.g. QueryToolResult uses a relative container with an absolute top-* right-* copy button). Consider making the prompt row relative, positioning the CopyButton wrapper absolute in the top-right, and adding right padding on the prompt text so the button doesn’t overlap it.
There was a problem hiding this comment.
we agreed not to use absolute positioning for this
There was a problem hiding this comment.
Evidently, the two agents don't talk to each other (yet) :)
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]> Signed-off-by: bdjulbic <[email protected]>
Add back copy button to the user prompt when user hover mouse over the prompt
Summary by CodeRabbit
New Features
Style