+ {/* Header */}
+
+
+
+ Ask about your spend, models, keys, and trends
+
+
+
+ {/* Model selector */}
+
+
+
+ {/* Chat messages */}
+
+ {messages.length === 0 && !streamingContent && !isLoading && (
+
+
+
Ask a question about your usage
+
e.g. "Which model costs me the most?"
+
+ )}
+
+ {messages.map((msg, idx) => (
+
+ {msg.role === "user" ? (
+
+ ) : (
+
+ {/* Tool calls for this message */}
+ {msg.toolCalls && msg.toolCalls.length > 0 && (
+
+ {msg.toolCalls.map((tc, tcIdx) => (
+
+ ))}
+
+ )}
+ {/* Response */}
+
+
+
+
+ )}
+
+ ))}
+
+ {/* Active tool calls (in-progress) */}
+ {isLoading && activeToolCalls.length > 0 && (
+
+ {activeToolCalls.map((tc, idx) => (
+
+ ))}
+
+ )}
+
+ {/* Status / spinner */}
+ {isLoading && !streamingContent && (
+
+
+ {statusMessage || "Thinking..."}
+
+ )}
+
+ {/* Streaming response */}
+ {streamingContent && (
+
+
+
+ )}
+
+
+
+
+ {/* Input area */}
+
+
+
+
+
+
+ Enter to send
+
+
+
+
+ );
+};
+
+export default UsageAIChatPanel;
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx
index f718171d07..9a60325228 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx
@@ -100,6 +100,10 @@ vi.mock("../../EntityUsageExport", () => ({
default: () =>