Improve display of agent/tool cards in chat session#1360
Improve display of agent/tool cards in chat session#1360dobesv wants to merge 2 commits intokagent-dev:mainfrom
Conversation
dobesv
commented
Feb 23, 2026
dobesv
commented
- Parse JSON payloads and render basic tree view
- Render strings as markdown
- Copy to clipboard button copies original text
- Add view source button in case of render/parse issues
- Prevent ScrollArea from overflow horizontally
There was a problem hiding this comment.
Pull request overview
This PR improves the display of agent and tool call cards in chat sessions by introducing smart content rendering with JSON parsing, markdown support, and better UI controls.
Changes:
- Added SmartContent component that intelligently renders content as JSON tree view, markdown, or plain text
- Added CollapsibleSection component to provide consistent expand/collapse behavior with preview
- Modified ScrollArea to prevent horizontal overflow with CSS override
- Added copy-to-clipboard functionality to chat messages and improved display of tool/agent call arguments and results
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/components/chat/SmartContent.tsx | New component for intelligent content rendering with JSON parsing, markdown support, type icons, and copy/view source controls |
| ui/src/components/chat/CollapsibleSection.tsx | New reusable component for collapsible content sections with preview and scroll support |
| ui/src/components/ui/scroll-area.tsx | Added CSS override to force block display on direct child divs to prevent horizontal overflow |
| ui/src/components/chat/ChatMessage.tsx | Added copy-to-clipboard button for chat messages and refactored feedback button visibility |
| ui/src/components/chat/AgentCallDisplay.tsx | Integrated SmartContent for rendering args/results, added clickable link for function calls, replaced custom collapse logic with CollapsibleSection |
| ui/src/components/ToolDisplay.tsx | Integrated SmartContent for rendering args/results, removed custom copy button, replaced custom collapse logic with CollapsibleSection |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,65 @@ | |||
| import React from "react"; | |||
| import { ChevronUp, ChevronDown } from "lucide-react"; | |||
| import { ScrollArea } from "@radix-ui/react-scroll-area"; | |||
There was a problem hiding this comment.
The ScrollArea import is inconsistent with the rest of the codebase. All other components import ScrollArea from "@/components/ui/scroll-area" (the local wrapper component), not from "@radix-ui/react-scroll-area" directly. This should be updated to match the pattern used in ChatInterface.tsx, LLMCallModal.tsx, SelectToolsDialog.tsx, and other components.
| import { ScrollArea } from "@radix-ui/react-scroll-area"; | |
| import { ScrollArea } from "@/components/ui/scroll-area"; |
| const handleCopy = () => { | ||
| navigator.clipboard.writeText(String(content)).then(() => { | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
The handleCopy function doesn't handle promise rejection. While there's a .then() call, there's no .catch() to handle clipboard write failures. This could lead to unhandled promise rejections in browsers where clipboard access is denied or unavailable. Other clipboard implementations in the codebase (e.g., SmartContent.tsx line 189-193 and CodeBlock.tsx line 31-37) use try-catch with async/await for proper error handling.
- Parse JSON payloads and render basic tree view - Render strings as markdown - Copy to clipboard button copies original text - Add view source button in case of render/parse issues - Prevent ScrollArea from overflow horizontally Signed-off-by: Dobes Vandermeer <dobes.vandermeer@newsela.com>
dobesv
force-pushed
the
feat/tool-display-improvements
branch
from
93a368a to
ea7f6f6
Compare
