Merge pull request #17928 from BerriAI/litellm_ui_logs_fix

[Fix] UI - Request and Response in Logs

ui/litellm-dashboard/src/components/playground/compareUI/components/ComparisonPanel.test.tsx

@@ -3,15 +3,16 @@ import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { ComparisonInstance } from "../CompareUI";
 import { ComparisonPanel } from "./ComparisonPanel";
+import { EndpointId, ENDPOINT_CONFIGS } from "../endpoint_config";
 
 vi.mock("./MessageDisplay", () => ({
   MessageDisplay: () => <div data-testid="message-display">MessageDisplay</div>,
 }));
 
-vi.mock("./ModelSelector", () => ({
-  ModelSelector: ({ value, onChange }: { value: string; onChange: (val: string) => void }) => (
-    <select data-testid="model-selector" value={value} onChange={(e) => onChange(e.target.value)}>
-      <option value="">Select model</option>
+vi.mock("./UnifiedSelector", () => ({
+  UnifiedSelector: ({ value, onChange }: { value: string; onChange: (val: string) => void }) => (
+    <select data-testid="unified-selector" value={value} onChange={(e) => onChange(e.target.value)}>
+      <option value="">Select option</option>
       <option value="gpt-4">gpt-4</option>
     </select>
   ),
@@ -48,6 +49,7 @@ beforeEach(() => {
 const mockComparison: ComparisonInstance = {
   id: "1",
   model: "gpt-4",
+  agent: "",
   messages: [],
   isLoading: false,
   tags: [],
@@ -65,15 +67,19 @@ const mockProps = {
   onUpdate: vi.fn(),
   onRemove: vi.fn(),
   canRemove: true,
-  modelOptions: ["gpt-4", "gpt-3.5-turbo"],
-  isLoadingModels: false,
+  selectorOptions: [
+    { value: "gpt-4", label: "gpt-4" },
+    { value: "gpt-3.5-turbo", label: "gpt-3.5-turbo" },
+  ],
+  isLoadingOptions: false,
+  endpointConfig: ENDPOINT_CONFIGS[EndpointId.CHAT_COMPLETIONS],
   apiKey: "test-api-key",
 };
 
 describe("ComparisonPanel", () => {
   it("should render", () => {
     const { getByTestId } = render(<ComparisonPanel {...mockProps} />);
-    expect(getByTestId("model-selector")).toBeInTheDocument();
+    expect(getByTestId("unified-selector")).toBeInTheDocument();
     expect(getByTestId("message-display")).toBeInTheDocument();
   });
 

ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.test.tsx

@@ -161,4 +161,31 @@ describe("RequestResponsePanel", () => {
     expect(mockWriteText).toHaveBeenCalledWith(JSON.stringify({ test: "response data" }, null, 2));
     expect(mockNotificationsManager.success).toHaveBeenCalledWith("Response copied to clipboard");
   });
+
+  it("should call formattedResponse for the response panel and not getRawRequest", () => {
+    const mockGetRawRequest = vi.fn().mockReturnValue({ requestData: "this should not appear in response" });
+    const mockFormattedResponse = vi.fn().mockReturnValue({ responseData: "this should appear in response" });
+
+    render(
+      <RequestResponsePanel
+        row={{ original: baseLogEntry }}
+        hasMessages={true}
+        hasResponse={true}
+        hasError={false}
+        errorInfo={null}
+        getRawRequest={mockGetRawRequest}
+        formattedResponse={mockFormattedResponse}
+      />,
+    );
+
+    expect(mockFormattedResponse).toHaveBeenCalled();
+    expect(mockGetRawRequest).toHaveBeenCalled();
+    
+    const formattedResponseCallCount = mockFormattedResponse.mock.calls.length;
+    expect(formattedResponseCallCount).toBeGreaterThanOrEqual(1);
+    
+    const responseData = mockFormattedResponse.mock.results[0].value;
+    expect(responseData).toEqual({ responseData: "this should appear in response" });
+    expect(responseData).not.toEqual({ requestData: "this should not appear in response" });
+  });
 });

ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx

@@ -134,7 +134,7 @@ export function RequestResponsePanel({
         <div className="p-4 overflow-auto max-h-96 w-full max-w-full box-border">
           {hasResponse ? (
             <div className="[&_[role='tree']]:bg-white [&_[role='tree']]:text-slate-900">
-              <JsonView data={getRawRequest()} style={defaultStyles} clickToExpandNode />
+              <JsonView data={formattedResponse()} style={defaultStyles} clickToExpandNode />
             </div>
           ) : (
             <div className="text-gray-500 text-sm italic text-center py-4">Response data not available</div>