From 5c633d5322a470c2c110e720b5b6483a1d095790 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 23 Apr 2026 16:26:59 +0000 Subject: [PATCH] feat(ui): playground/MCPEventsDisplay to shadcn Accordion - antd Typography/Collapse+Panel \u2192 shadcn Accordion/AccordionItem/ AccordionTrigger/AccordionContent + lucide Check. - Large inline styled-jsx block replaced with semantic Tailwind (bg-muted/border-border/text-muted-foreground). - Vertical guide line uses bg-border; 'Approved' checkmark uses text-emerald-500 (categorical but limited to a single inline token). Gates: TS \u2713 | Build \u2713. Co-authored-by: yuneng-jiang --- .../playground/chat_ui/MCPEventsDisplay.tsx | 282 ++++++------------ 1 file changed, 97 insertions(+), 185 deletions(-) diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx index cd7ecbf266f..2cb494fa911 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx +++ b/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx @@ -1,20 +1,23 @@ import React from "react"; -import { Typography, Collapse } from "antd"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { Check } from "lucide-react"; import type { MCPEvent } from "../../mcp_tools/types"; -const { Text } = Typography; -const { Panel } = Collapse; - interface MCPEventsDisplayProps { events: MCPEvent[]; className?: string; } -const MCPEventsDisplay: React.FC = ({ events, className }) => { - console.log("MCPEventsDisplay: Received events:", events); - +const MCPEventsDisplay: React.FC = ({ + events, + className, +}) => { if (!events || events.length === 0) { - console.log("MCPEventsDisplay: No events, returning null"); return null; } @@ -29,201 +32,110 @@ const MCPEventsDisplay: React.FC = ({ events, className } // Find MCP call events const mcpCallEvents = events.filter( - (event) => event.type === "response.output_item.done" && event.item?.type === "mcp_call", + (event) => + event.type === "response.output_item.done" && + event.item?.type === "mcp_call", ); - console.log("MCPEventsDisplay: toolsEvent:", toolsEvent); - console.log("MCPEventsDisplay: mcpCallEvents:", mcpCallEvents); - if (!toolsEvent && mcpCallEvents.length === 0) { - console.log("MCPEventsDisplay: No valid events found, returning null"); return null; } + const defaultValue = toolsEvent + ? ["list-tools"] + : mcpCallEvents.map((_, index) => `mcp-call-${index}`); + return (
- -
-
- `mcp-call-${index}`)} +
+ {/* Vertical guide line */} +
+ + - {/* List Tools Panel */} {toolsEvent && ( - -
- {toolsEvent.item?.tools?.map((tool, index) => ( -
- {tool.name} -
- ))} -
- + + + List tools + + +
+ {toolsEvent.item?.tools?.map((tool, index) => ( +
+ {tool.name} +
+ ))} +
+ + )} - {/* MCP Call Panels */} {mcpCallEvents.map((callEvent, index) => ( - -
- {/* Request section */} -
-
Request
-
- {callEvent.item?.arguments && ( - 
-                        {(() => {
-                          try {
-                            return JSON.stringify(JSON.parse(callEvent.item.arguments), null, 2);
-                          } catch (e) {
-                            return callEvent.item.arguments;
-                          }
-                        })()}
-
- )} + + + {callEvent.item?.name || "Tool call"} + + +
+ {/* Request section */} +
+
+ Request +
+
+ {callEvent.item?.arguments && ( + 
+                          {(() => {
+                            try {
+                              return JSON.stringify(
+                                JSON.parse(callEvent.item.arguments),
+                                null,
+                                2,
+                              );
+                              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            } catch (_e) {
+                              return callEvent.item.arguments;
+                            }
+                          })()}
+
+ )} +
-
- {/* Approved section */} -
-
- ✓ Approved + {/* Approved section */} +
+
+ + Approved +
-
- {/* Response section */} - {callEvent.item?.output && ( -
-
Response
-
{callEvent.item.output}
-
- )} -
- + {/* Response section */} + {callEvent.item?.output && ( +
+
+ Response +
+
+ {callEvent.item.output} +
+
+ )} +
+ + ))} - +
);