{
- if (onToggleCollapse) {
- e.currentTarget.style.background = "#f5f5f5";
- }
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.background = "#fafafa";
- }}
+ className={cn(
+ "flex items-center justify-between bg-muted px-4 py-2.5 transition-colors",
+ isCollapsed ? "border-b-0" : "border-b border-border",
+ onToggleCollapse ? "cursor-pointer hover:bg-accent" : "cursor-default",
+ )}
>
-
- {/* Collapse Arrow */}
- {onToggleCollapse && (
-
- {isCollapsed ? (
-
- ) : (
-
- )}
-
- )}
-
- {/* Icon + Label */}
-
- {type === "input" ? (
-
+
+ {onToggleCollapse &&
+ (isCollapsed ? (
+
) : (
-
✨
+
+ ))}
+
+
+ {type === "input" ? (
+
+ ) : (
+ ✨
)}
- {type === "input" ? "Input" : "Output"}
+ {type === "input" ? "Input" : "Output"}
- {/* Tokens */}
{tokens !== undefined && (
-
- Tokens: {tokens.toLocaleString()}
-
+
Tokens: {tokens.toLocaleString()}
)}
- {/* Cost */}
- {cost !== undefined && (
-
- Cost: ${cost.toFixed(6)}
-
- )}
+ {cost !== undefined &&
Cost: ${cost.toFixed(6)}}
- {/* Turn count */}
{turnCount !== undefined && turnCount > 0 && (
-
- Turns: {turnCount}
-
+
Turns: {turnCount}
)}
- {/* Copy Button */}
-
- }
- onClick={(e) => {
- e.stopPropagation(); // Prevent triggering collapse
- onCopy();
- }}
- />
+
+ {
+ e.stopPropagation();
+ onCopy();
+ }}
+ />
+ }
+ >
+
+
+ Copy
);
diff --git a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.test.tsx b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.test.tsx
index 753a552b6db..e146f38b42b 100644
--- a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.test.tsx
@@ -2,10 +2,46 @@
* Core tests for Tools section
*/
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import { describe, it, expect } from "vitest";
import { parseToolsFromLog } from "./utils";
+import { ToolsSection } from "./ToolsSection";
import { LogEntry } from "../columns";
+const logWithTools = (toolNames: string[], calledName?: string): LogEntry => ({
+ request_id: "render-1",
+ api_key: "key",
+ team_id: "team",
+ model: "gpt-4",
+ model_id: "gpt-4",
+ call_type: "completion",
+ spend: 0.01,
+ total_tokens: 100,
+ prompt_tokens: 50,
+ completion_tokens: 50,
+ startTime: "2024-01-01T00:00:00Z",
+ endTime: "2024-01-01T00:00:01Z",
+ cache_hit: "none",
+ messages: JSON.stringify({
+ model: "gpt-4",
+ messages: [{ role: "user", content: "hi" }],
+ tools: toolNames.map((name) => ({
+ type: "function",
+ function: { name, description: `${name} description`, parameters: { type: "object", properties: {} } },
+ })),
+ }),
+ response: JSON.stringify({
+ choices: [
+ {
+ message: calledName
+ ? { tool_calls: [{ id: "call_1", type: "function", function: { name: calledName, arguments: "{}" } }] }
+ : { content: "done" },
+ },
+ ],
+ }),
+});
+
describe("ToolsSection", () => {
it("should parse tools from request and match with response tool calls", () => {
const mockLog: LogEntry = {
@@ -115,3 +151,51 @@ describe("ToolsSection", () => {
expect(tools).toHaveLength(0);
});
});
+
+const isShown = (text: string) => screen.queryAllByText(text).some((el) => el.closest("[hidden]") === null);
+
+describe("ToolsSection rendering", () => {
+ it("summarises how many tools were provided and called", () => {
+ render(
);
+
+ expect(screen.getByText("Tools")).toBeInTheDocument();
+ expect(screen.getByText("2 provided, 1 called")).toBeInTheDocument();
+ });
+
+ it("previews the first two tool names", () => {
+ render(
);
+
+ expect(screen.getByText(/alpha, beta/)).toBeInTheDocument();
+ });
+
+ it("renders nothing when the log has no tools", () => {
+ const { container } = render(
);
+
+ expect(container).toBeEmptyDOMElement();
+ });
+
+ it("reveals the tool list only after the section is expanded", async () => {
+ render(
);
+
+ expect(isShown("called")).toBe(false);
+ expect(isShown("not called")).toBe(false);
+
+ await userEvent.click(screen.getByText("Tools"));
+
+ await waitFor(() => expect(isShown("called")).toBe(true));
+ expect(isShown("not called")).toBe(true);
+ });
+
+ it("keeps a tool's expanded detail across a close and reopen", async () => {
+ render(
);
+
+ await userEvent.click(screen.getByText("Tools"));
+ await userEvent.click(await screen.findByText(/1\. get_weather/));
+ expect(isShown("Description")).toBe(true);
+
+ await userEvent.click(screen.getByText("Tools"));
+ await userEvent.click(screen.getByText("Tools"));
+
+ await waitFor(() => expect(isShown("Description")).toBe(true));
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.tsx b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.tsx
index 2a8cdd6a1ce..e3965f182fd 100644
--- a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.tsx
@@ -3,18 +3,19 @@
* and indicates which ones were actually called in the response
*/
-import { Collapse, Typography } from "antd";
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { LogEntry } from "../columns";
import { parseToolsFromLog } from "./utils";
import { ToolItem } from "./ToolItem";
-const { Text } = Typography;
-
interface ToolsSectionProps {
log: LogEntry;
}
export function ToolsSection({ log }: ToolsSectionProps) {
+ const [open, setOpen] = useState(false);
const tools = parseToolsFromLog(log);
// Don't render if no tools
@@ -32,34 +33,33 @@ export function ToolsSection({ log }: ToolsSectionProps) {
const hasMoreTools = tools.length > 2;
return (
-
-
- Tools
-
- {totalTools} provided, {calledTools} called
-
-
- • {toolNamePreview}
- {hasMoreTools && "..."}
-
-
- ),
- children: (
-
- {tools.map((tool) => (
-
- ))}
-
- ),
- },
- ]}
- />
+
+
+
+ {open ? (
+
+ ) : (
+
+ )}
+
+
Tools
+
+ {totalTools} provided, {calledTools} called
+
+
+ • {toolNamePreview}
+ {hasMoreTools && "..."}
+
+
+
+
+
+ {tools.map((tool) => (
+
+ ))}
+
+
+
);
}