[FrontEnd] Display API cost and token usage in frontend (#7099)

Co-authored-by: amanape <[email protected]>

Author: AutoLTX

frontend/__tests__/components/features/conversation-panel/conversation-card.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, within } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import {
   afterAll,
   afterEach,
@@ -10,6 +10,7 @@ import {
   vi,
 } from "vitest";
 import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "test-utils";
 import { formatTimeDelta } from "#/utils/format-time-delta";
 import { ConversationCard } from "#/components/features/conversation-panel/conversation-card";
 import { clickOnEditButton } from "./utils";
@@ -20,7 +21,11 @@ describe("ConversationCard", () => {
   const onChangeTitle = vi.fn();
 
   beforeAll(() => {
-    vi.stubGlobal("window", { open: vi.fn() });
+    vi.stubGlobal("window", {
+      open: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
   });
 
   afterEach(() => {
@@ -32,7 +37,7 @@ describe("ConversationCard", () => {
   });
 
   it("should render the conversation card", () => {
-    render(
+    renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
@@ -51,7 +56,7 @@ describe("ConversationCard", () => {
   });
 
   it("should render the selectedRepository if available", () => {
-    const { rerender } = render(
+    const { rerender } = renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
@@ -82,7 +87,7 @@ describe("ConversationCard", () => {
 
   it("should toggle a context menu when clicking the ellipsis button", async () => {
     const user = userEvent.setup();
-    render(
+    renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
@@ -107,7 +112,7 @@ describe("ConversationCard", () => {
 
   it("should call onDelete when the delete button is clicked", async () => {
     const user = userEvent.setup();
-    render(
+    renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         isActive
@@ -131,7 +136,7 @@ describe("ConversationCard", () => {
 
   test("clicking the selectedRepository should not trigger the onClick handler", async () => {
     const user = userEvent.setup();
-    render(
+    renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         isActive
@@ -152,7 +157,7 @@ describe("ConversationCard", () => {
 
   test("conversation title should call onChangeTitle when changed and blurred", async () => {
     const user = userEvent.setup();
-    render(
+    renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         isActive
@@ -181,7 +186,7 @@ describe("ConversationCard", () => {
 
   it("should reset title and not call onChangeTitle when the title is empty", async () => {
     const user = userEvent.setup();
-    render(
+    renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         isActive
@@ -205,7 +210,7 @@ describe("ConversationCard", () => {
 
   test("clicking the title should trigger the onClick handler", async () => {
     const user = userEvent.setup();
-    render(
+    renderWithProviders(
       <ConversationCard
         onClick={onClick}
         onDelete={onDelete}
@@ -225,7 +230,7 @@ describe("ConversationCard", () => {
 
   test("clicking the title should not trigger the onClick handler if edit mode", async () => {
     const user = userEvent.setup();
-    render(
+    renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         isActive
@@ -246,7 +251,7 @@ describe("ConversationCard", () => {
 
   test("clicking the delete button should not trigger the onClick handler", async () => {
     const user = userEvent.setup();
-    render(
+    renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
         isActive
@@ -268,11 +273,80 @@ describe("ConversationCard", () => {
     expect(onClick).not.toHaveBeenCalled();
   });
 
+  it("should show display cost button only when showDisplayCostOption is true", async () => {
+    const user = userEvent.setup();
+    const { rerender } = renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        isActive
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    const ellipsisButton = screen.getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+
+    // Wait for context menu to appear
+    const menu = await screen.findByTestId("context-menu");
+    expect(
+      within(menu).queryByTestId("display-cost-button"),
+    ).not.toBeInTheDocument();
 
+    // Close menu
+    await user.click(ellipsisButton);
+
+    rerender(
+      <ConversationCard
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        showDisplayCostOption
+        isActive
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    // Open menu again
+    await user.click(ellipsisButton);
+
+    // Wait for context menu to appear and check for display cost button
+    const newMenu = await screen.findByTestId("context-menu");
+    within(newMenu).getByTestId("display-cost-button");
+  });
+
+  it("should show metrics modal when clicking the display cost button", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        isActive
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+        showDisplayCostOption
+      />,
+    );
+
+    const ellipsisButton = screen.getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+
+    const menu = screen.getByTestId("context-menu");
+    const displayCostButton = within(menu).getByTestId("display-cost-button");
+
+    await user.click(displayCostButton);
+
+    // Verify if metrics modal is displayed by checking for the modal content
+    expect(screen.getByText("Metrics Information")).toBeInTheDocument();
+  });
 
   it("should not display the edit or delete options if the handler is not provided", async () => {
     const user = userEvent.setup();
-    const { rerender } = render(
+    const { rerender } = renderWithProviders(
       <ConversationCard
         onClick={onClick}
         onChangeTitle={onChangeTitle}
@@ -285,8 +359,9 @@ describe("ConversationCard", () => {
     const ellipsisButton = screen.getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    expect(screen.queryByTestId("edit-button")).toBeInTheDocument();
-    expect(screen.queryByTestId("delete-button")).not.toBeInTheDocument();
+    const menu = await screen.findByTestId("context-menu");
+    expect(within(menu).queryByTestId("edit-button")).toBeInTheDocument();
+    expect(within(menu).queryByTestId("delete-button")).not.toBeInTheDocument();
 
     // toggle to hide the context menu
     await user.click(ellipsisButton);
@@ -302,13 +377,15 @@ describe("ConversationCard", () => {
     );
 
     await user.click(ellipsisButton);
-
-    expect(screen.queryByTestId("edit-button")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("delete-button")).toBeInTheDocument();
+    const newMenu = await screen.findByTestId("context-menu");
+    expect(
+      within(newMenu).queryByTestId("edit-button"),
+    ).not.toBeInTheDocument();
+    expect(within(newMenu).queryByTestId("delete-button")).toBeInTheDocument();
   });
 
   it("should not render the ellipsis button if there are no actions", () => {
-    const { rerender } = render(
+    const { rerender } = renderWithProviders(
       <ConversationCard
         onClick={onClick}
         onDelete={onDelete}
@@ -347,7 +424,7 @@ describe("ConversationCard", () => {
 
   describe("state indicator", () => {
     it("should render the 'STOPPED' indicator by default", () => {
-      render(
+      renderWithProviders(
         <ConversationCard
           onDelete={onDelete}
           isActive
@@ -362,7 +439,7 @@ describe("ConversationCard", () => {
     });
 
     it("should render the other indicators when provided", () => {
-      render(
+      renderWithProviders(
         <ConversationCard
           onDelete={onDelete}
           isActive