Add expandable tool call details to chat UI

[ranilmukesh]

Tool Call Visualization Fix in agent-ui

Overview

This update resolves Issue #118, which requested full tool call support in the local agent-ui frontend. Previously, only tool call names were shown, and parameter details were not visible. Now, all tool call parameters—including nested objects—are displayed in an expandable UI section for each call.

Changes Made

• Expandable Tool Call UI:
  • Each tool call now shows only its name by default.
  • An expand/collapse button (arrow icon) lets users toggle visibility of full parameters.
  • Parameters are rendered as a readable list, with objects/arrays formatted as JSON blocks.
• Consistent Experience:
  • The local UI now matches the hosted playground (https://app.agno.com/playground/agents).
  • No color changes; layout and accessibility are improved.
• Code Location:
  • Main changes are in src/components/chat/ChatArea/Messages/Messages.tsx.
  • The ToolComponent was refactored to support expand/collapse and better parameter rendering.

How It Works

1. Tool Call Streaming:
   • Backend streams tool call metadata (tool_calls, tool_args, etc.)
   • Frontend updates the agent message's tool_calls array in real time.
2. UI Rendering:
   • Each tool call is rendered with a button to expand/collapse details.
   • Parameters are shown as a list; nested objects/arrays are formatted for readability.

Example

LOAD_DATAFRAME
Params:
- dataframe_name: predictions_data
- create_using_function: read_csv
- function_parameters:
    {
      "filepath_or_buffer": "C:\\Users\\lenovo\\Downloads\\stack_ridge_predictions_mae_0694_20250929_0650.csv"
    }

How to Test

1. Run the app locally (npm run dev)
2. Trigger a tool call in chat
3. Click the arrow next to the tool name to view full details

Why This Matters

• Users can now inspect all tool call arguments, including nested data, directly in the chat UI.
• The feature parity between local and hosted playground is restored.
• Improves debugging, transparency, and user experience for agent tool calls.

---

Related Issue: #118
PR: See related PR for code changes and review.