Improve display of agent/tool cards in chat session#1360
Improve display of agent/tool cards in chat session#1360dobesv wants to merge 1 commit intokagent-dev:mainfrom
Conversation
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.
dobesv
force-pushed
the
feat/tool-display-improvements
branch
from
93a368a to
ea7f6f6
Compare
dobesv
force-pushed
the
feat/tool-display-improvements
branch
from
4a6c40e to
13cc185
Compare
|
@peterj can you take a look at this one? |
| tokenStats?: TokenStats; | ||
| } | ||
|
|
||
| const AGENT_TOOL_NAME_RE = /^(.+)__NS__(.+)$/; |
There was a problem hiding this comment.
There's a function to check if it's an agent tool in ui/src/lib/utils.ts isAgentToolName
| <div className="font-light">{call.id}</div> | ||
| <div className="font-light"> | ||
| {functionCallLink ? ( | ||
| <Link href={functionCallLink} className="text-blue-500 hover:underline"> |
There was a problem hiding this comment.
What is the function call link page supposed to do? I don't think the route is present in the app it always redirects to 404
There was a problem hiding this comment.
Ah it might be something from another change that snuck in here
| </div> | ||
| </div> | ||
| </div> | ||
| <button |
There was a problem hiding this comment.
IMO it would be nice if clicking on the text area just toggles the collapse state, since right now to close it I will need to click on the small button, and that's also not consistent with the expand behaviour where if you click on the text area it opens
There was a problem hiding this comment.
I wanted to be able to copy paste things from the content when expanded
dobesv
force-pushed
the
feat/tool-display-improvements
branch
from
b7b6409 to
7aabf02
Compare
- 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
7aabf02 to
5b92d7f
Compare
|
I rebased this on main, hopefully it still works OK. I did a quick test and it looked OK. |
Uh oh!
There was an error while loading. Please reload this page.