Skip to content

chore: Add copy icon to AI tool call details - #626

Merged
xpectro93 merged 2 commits into
mainfrom
chore/add_copy_button
May 14, 2026
Merged

chore: Add copy icon to AI tool call details#626
xpectro93 merged 2 commits into
mainfrom
chore/add_copy_button

Conversation

@xpectro93

@xpectro93 xpectro93 commented May 14, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Collaborator

This pull request updatesToolCallDetailHover component in the FlatAgentRenderer by adding copy-to-clipboard functionality for both tool input and output fields. This allows users to easily copy the displayed data for further use.

UI/UX Improvements:

  • Added a CopyButton next to the "Input" and "Output" labels in the tool call hover details, enabling users to quickly copy the respective values. The button handles both string and object values by stringifying objects as needed.

Before

Screenshot 2026-05-14 at 4 08 41 PM

After

Screenshot 2026-05-14 at 4 03 29 PM

Summary by CodeRabbit

  • New Features

    • Added copy button functionality to tool call hover cards, allowing quick copying of inputs and outputs with intelligent handling of text and structured data.

  • UI Improvements

    • Updated tool call detail hover cards to show labeled "Input"/"Output" headers with code-style display blocks for clearer, more readable presentation.

Review Change Stack

@xpectro93
xpectro93 requested a review from ilyabo May 14, 2026 20:12
@coderabbitai

coderabbitai Bot commented May 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2300ae8b-c9c9-43a2-9678-44c51d7f3f2f

📥 Commits

Reviewing files that changed from the base of the PR and between 8333e94 and 1cb769f.

📒 Files selected for processing (1)
  • packages/ai-core/src/components/FlatAgentRenderer.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/ai-core/src/components/FlatAgentRenderer.tsx
📝 Walkthrough

Walkthrough

The PR updates FlatAgentRenderer's tool call detail hover card: the @sqlrooms/ui import is expanded and the Input/Output sections now render a labeled header plus a preformatted code area with a positioned CopyButton that copies either the raw string or a pretty-printed JSON representation.

Changes

Tool Call Detail Copy Functionality

Layer / File(s) Summary
Import expansion and UI wiring
packages/ai-core/src/components/FlatAgentRenderer.tsx		 Refactor import from @sqlrooms/ui into multi-line form to include cn, CopyButton, and HoverCard* pieces; wire CopyButton into the hover card layout.
Input section: layout + copy behavior
packages/ai-core/src/components/FlatAgentRenderer.tsx		 Replace simple header + pre block with a labeled header row and a relative pre container that includes a positioned CopyButton. Copy payload is toolCall.input if a string, otherwise JSON.stringify(toolCall.input, null, 2).
Output section: layout + copy behavior
packages/ai-core/src/components/FlatAgentRenderer.tsx		 Mirror Input changes for toolCall.output: labeled header row, positioned CopyButton inside pre container, copying raw string or pretty-printed JSON as appropriate.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • sqlrooms/sqlrooms#368: Earlier change adding CopyButton clipboard controls to AI UI with similar string vs JSON handling.

Suggested reviewers

  • ilyabo
  • igorDykhta

Poem

🐰 A tiny button, shiny and spry,
Copies input, output—blink and it's nigh.
Strings stay raw, objects get neat,
Pretty-printed lines make sharing sweet. ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding copy functionality to AI tool call details in the component.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch chore/add_copy_button

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ilyabo

ilyabo commented May 14, 2026

Copy link
Copy Markdown
Collaborator

could you place them within the text boxes, top right as we have in other places e.g. here?

ilyabo
ilyabo approved these changes May 14, 2026
View reviewed changes

@ilyabo ilyabo left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, just a small suggestion in comments

@ilyabo ilyabo changed the title chore: Add copy icon to AI prompts chore: Add copy icon to AI tool call details May 14, 2026
@xpectro93
xpectro93 merged commit 21eed3b into main May 14, 2026
4 checks passed
@xpectro93
xpectro93 deleted the chore/add_copy_button branch May 14, 2026 21:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ilyabo ilyabo ilyabo approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@xpectro93 @ilyabo