feat(ui): add infinite scroll pagination to chat completions/responses logs table (#2466)

## Summary:

This commit adds infinite scroll pagination to the chat completions and
responses tables.


## Test Plan:
  1. Run unit tests: npm run test
  2. Manual testing: Navigate to chat
  completions/responses pages
  3. Verify infinite scroll triggers when approaching
  bottom
  4. Added playwright tests: npm run test:e2e

llama_stack/ui/components/chat-completions/chat-completion-table.test.tsx

@@ -16,6 +16,29 @@ jest.mock("next/navigation", () => ({
 jest.mock("@/lib/truncate-text");
 jest.mock("@/lib/format-message-content");
 
+// Mock the client
+jest.mock("@/lib/client", () => ({
+  client: {
+    chat: {
+      completions: {
+        list: jest.fn(),
+      },
+    },
+  },
+}));
+
+// Mock the usePagination hook
+const mockLoadMore = jest.fn();
+jest.mock("@/hooks/usePagination", () => ({
+  usePagination: jest.fn(() => ({
+    data: [],
+    status: "idle",
+    hasMore: false,
+    error: null,
+    loadMore: mockLoadMore,
+  })),
+}));
+
 // Import the mocked functions to set up default or specific implementations
 import { truncateText as originalTruncateText } from "@/lib/truncate-text";
 import {
@@ -23,6 +46,12 @@ import {
   extractDisplayableText as originalExtractDisplayableText,
 } from "@/lib/format-message-content";
 
+// Import the mocked hook
+import { usePagination } from "@/hooks/usePagination";
+const mockedUsePagination = usePagination as jest.MockedFunction<
+  typeof usePagination
+>;
+
 // Cast to jest.Mock for typings
 const truncateText = originalTruncateText as jest.Mock;
 const extractTextFromContentPart =
@@ -30,11 +59,7 @@ const extractTextFromContentPart =
 const extractDisplayableText = originalExtractDisplayableText as jest.Mock;
 
 describe("ChatCompletionsTable", () => {
-  const defaultProps = {
-    data: [] as ChatCompletion[],
-    isLoading: false,
-    error: null,
-  };
+  const defaultProps = {};
 
   beforeEach(() => {
     // Reset all mocks before each test
@@ -42,16 +67,27 @@ describe("ChatCompletionsTable", () => {
     truncateText.mockClear();
     extractTextFromContentPart.mockClear();
     extractDisplayableText.mockClear();
+    mockLoadMore.mockClear();
+    jest.clearAllMocks();
 
     // Default pass-through implementations
     truncateText.mockImplementation((text: string | undefined) => text);
     extractTextFromContentPart.mockImplementation((content: unknown) =>
       typeof content === "string" ? content : "extracted text",
     );
-    extractDisplayableText.mockImplementation(
-      (message: unknown) =>
-        (message as { content?: string })?.content || "extracted output",
-    );
+    extractDisplayableText.mockImplementation((message: unknown) => {
+      const msg = message as { content?: string };
+      return msg?.content || "extracted output";
+    });
+
+    // Default hook return value
+    mockedUsePagination.mockReturnValue({
+      data: [],
+      status: "idle",
+      hasMore: false,
+      error: null,
+      loadMore: mockLoadMore,
+    });
   });
 
   test("renders without crashing with default props", () => {
@@ -60,41 +96,56 @@ describe("ChatCompletionsTable", () => {
   });
 
   test("click on a row navigates to the correct URL", () => {
-    const mockCompletion: ChatCompletion = {
-      id: "comp_123",
-      object: "chat.completion",
-      created: Math.floor(Date.now() / 1000),
-      model: "llama-test-model",
-      choices: [
-        {
-          index: 0,
-          message: { role: "assistant", content: "Test output" },
-          finish_reason: "stop",
-        },
-      ],
-      input_messages: [{ role: "user", content: "Test input" }],
-    };
+    const mockData: ChatCompletion[] = [
+      {
+        id: "completion_123",
+        choices: [
+          {
+            message: { role: "assistant", content: "Test response" },
+            finish_reason: "stop",
+            index: 0,
+          },
+        ],
+        object: "chat.completion",
+        created: 1234567890,
+        model: "test-model",
+        input_messages: [{ role: "user", content: "Test prompt" }],
+      },
+    ];
 
-    // Set up mocks to return expected values
-    extractTextFromContentPart.mockReturnValue("Test input");
-    extractDisplayableText.mockReturnValue("Test output");
+    // Configure the mock to return our test data
+    mockedUsePagination.mockReturnValue({
+      data: mockData,
+      status: "idle",
+      hasMore: false,
+      error: null,
+      loadMore: mockLoadMore,
+    });
 
-    render(<ChatCompletionsTable {...defaultProps} data={[mockCompletion]} />);
+    render(<ChatCompletionsTable {...defaultProps} />);
 
-    const row = screen.getByText("Test input").closest("tr");
+    const row = screen.getByText("Test prompt").closest("tr");
     if (row) {
       fireEvent.click(row);
-      expect(mockPush).toHaveBeenCalledWith("/logs/chat-completions/comp_123");
+      expect(mockPush).toHaveBeenCalledWith(
+        "/logs/chat-completions/completion_123",
+      );
     } else {
-      throw new Error('Row with "Test input" not found for router mock test.');
+      throw new Error('Row with "Test prompt" not found for router mock test.');
     }
   });
 
   describe("Loading State", () => {
     test("renders skeleton UI when isLoading is true", () => {
-      const { container } = render(
-        <ChatCompletionsTable {...defaultProps} isLoading={true} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [],
+        status: "loading",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      const { container } = render(<ChatCompletionsTable {...defaultProps} />);
 
       // Check for skeleton in the table caption
       const tableCaption = container.querySelector("caption");
@@ -121,40 +172,48 @@ describe("ChatCompletionsTable", () => {
   describe("Error State", () => {
     test("renders error message when error prop is provided", () => {
       const errorMessage = "Network Error";
-      render(
-        <ChatCompletionsTable
-          {...defaultProps}
-          error={{ name: "Error", message: errorMessage }}
-        />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [],
+        status: "error",
+        hasMore: false,
+        error: { name: "Error", message: errorMessage } as Error,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ChatCompletionsTable {...defaultProps} />);
       expect(
-        screen.getByText(`Error fetching data: ${errorMessage}`),
+        screen.getByText("Unable to load chat completions"),
       ).toBeInTheDocument();
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
     });
 
-    test("renders default error message when error.message is not available", () => {
-      render(
-        <ChatCompletionsTable
-          {...defaultProps}
-          error={{ name: "Error", message: "" }}
-        />,
-      );
-      expect(
-        screen.getByText("Error fetching data: An unknown error occurred"),
-      ).toBeInTheDocument();
-    });
+    test.each([{ name: "Error", message: "" }, {}])(
+      "renders default error message when error has no message",
+      (errorObject) => {
+        mockedUsePagination.mockReturnValue({
+          data: [],
+          status: "error",
+          hasMore: false,
+          error: errorObject as Error,
+          loadMore: mockLoadMore,
+        });
 
-    test("renders default error message when error prop is an object without message", () => {
-      render(<ChatCompletionsTable {...defaultProps} error={{} as Error} />);
-      expect(
-        screen.getByText("Error fetching data: An unknown error occurred"),
-      ).toBeInTheDocument();
-    });
+        render(<ChatCompletionsTable {...defaultProps} />);
+        expect(
+          screen.getByText("Unable to load chat completions"),
+        ).toBeInTheDocument();
+        expect(
+          screen.getByText(
+            "An unexpected error occurred while loading the data.",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
   });
 
   describe("Empty State", () => {
     test('renders "No chat completions found." and no table when data array is empty', () => {
-      render(<ChatCompletionsTable data={[]} isLoading={false} error={null} />);
+      render(<ChatCompletionsTable {...defaultProps} />);
       expect(
         screen.getByText("No chat completions found."),
       ).toBeInTheDocument();
@@ -167,7 +226,7 @@ describe("ChatCompletionsTable", () => {
 
   describe("Data Rendering", () => {
     test("renders table caption, headers, and completion data correctly", () => {
-      const mockCompletions = [
+      const mockCompletions: ChatCompletion[] = [
         {
           id: "comp_1",
           object: "chat.completion",
@@ -211,13 +270,15 @@ describe("ChatCompletionsTable", () => {
         return "extracted output";
       });
 
-      render(
-        <ChatCompletionsTable
-          data={mockCompletions}
-          isLoading={false}
-          error={null}
-        />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: mockCompletions,
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ChatCompletionsTable {...defaultProps} />);
 
       // Table caption
       expect(
@@ -268,7 +329,7 @@ describe("ChatCompletionsTable", () => {
       extractTextFromContentPart.mockReturnValue(longInput);
       extractDisplayableText.mockReturnValue(longOutput);
 
-      const mockCompletions = [
+      const mockCompletions: ChatCompletion[] = [
         {
           id: "comp_trunc",
           object: "chat.completion",
@@ -285,63 +346,72 @@ describe("ChatCompletionsTable", () => {
         },
       ];
 
-      render(
-        <ChatCompletionsTable
-          data={mockCompletions}
-          isLoading={false}
-          error={null}
-        />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: mockCompletions,
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ChatCompletionsTable {...defaultProps} />);
 
       // The truncated text should be present for both input and output
       const truncatedTexts = screen.getAllByText(
         longInput.slice(0, 10) + "...",
       );
       expect(truncatedTexts.length).toBe(2); // one for input, one for output
-      truncatedTexts.forEach((textElement) =>
-        expect(textElement).toBeInTheDocument(),
-      );
     });
 
     test("uses content extraction functions correctly", () => {
-      const mockCompletion = {
-        id: "comp_extract",
-        object: "chat.completion",
-        created: 1710003000,
-        model: "llama-extract-model",
-        choices: [
-          {
-            index: 0,
-            message: { role: "assistant", content: "Extracted output" },
-            finish_reason: "stop",
-          },
-        ],
-        input_messages: [{ role: "user", content: "Extracted input" }],
+      const complexMessage = [
+        { type: "text", text: "Extracted input" },
+        { type: "image", url: "http://example.com/image.png" },
+      ];
+      const assistantMessage = {
+        role: "assistant",
+        content: "Extracted output from assistant",
       };
 
+      const mockCompletions: ChatCompletion[] = [
+        {
+          id: "comp_extract",
+          object: "chat.completion",
+          created: 1710003000,
+          model: "llama-extract-model",
+          choices: [
+            {
+              index: 0,
+              message: assistantMessage,
+              finish_reason: "stop",
+            },
+          ],
+          input_messages: [{ role: "user", content: complexMessage }],
+        },
+      ];
+
       extractTextFromContentPart.mockReturnValue("Extracted input");
-      extractDisplayableText.mockReturnValue("Extracted output");
+      extractDisplayableText.mockReturnValue("Extracted output from assistant");
 
-      render(
-        <ChatCompletionsTable
-          data={[mockCompletion]}
-          isLoading={false}
-          error={null}
-        />,
-      );
-
-      // Verify the extraction functions were called
-      expect(extractTextFromContentPart).toHaveBeenCalledWith(
-        "Extracted input",
-      );
-      expect(extractDisplayableText).toHaveBeenCalledWith({
-        role: "assistant",
-        content: "Extracted output",
+      mockedUsePagination.mockReturnValue({
+        data: mockCompletions,
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
       });
 
-      // Verify the extracted content is displayed
+      render(<ChatCompletionsTable {...defaultProps} />);
+
+      // Verify the extraction functions were called
+      expect(extractTextFromContentPart).toHaveBeenCalledWith(complexMessage);
+      expect(extractDisplayableText).toHaveBeenCalledWith(assistantMessage);
+
+      // Verify the extracted text appears in the table
       expect(screen.getByText("Extracted input")).toBeInTheDocument();
-      expect(screen.getByText("Extracted output")).toBeInTheDocument();
+      expect(
+        screen.getByText("Extracted output from assistant"),
+      ).toBeInTheDocument();
     });
   });
 });