Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Mar 21, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a8b33de
display cost in frontend
AutoLTX Mar 16, 2025
4c2ea94
Merge branch 'main' into tilin/costFrontEnd
AutoLTX Mar 16, 2025
f8b1052
fix lint
AutoLTX Mar 16, 2025
528d25c
fix and add test
AutoLTX Mar 16, 2025
9d932a7
Merge branch 'main' into tilin/costFrontEnd
AutoLTX Mar 16, 2025
d91f8ee
update test and use base modal
AutoLTX Mar 17, 2025
b351ff9
Merge branch 'main' into tilin/costFrontEnd
AutoLTX Mar 17, 2025
b2a651e
update
AutoLTX Mar 17, 2025
7ac1f30
Replace onDisplayCost with variable instead
amanape Mar 21, 2025
1263598
Merge
amanape Mar 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 98 additions & 21 deletions frontend/__tests__/components/features/conversation-panel/conversation-card.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { render, screen, within } from "@testing-library/react";
import { screen, within } from "@testing-library/react";
import {
afterAll,
afterEach,
Expand All @@ -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";
Expand All @@ -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(() => {
Expand All @@ -32,7 +37,7 @@ describe("ConversationCard", () => {
});

it("should render the conversation card", () => {
render(
renderWithProviders(
<ConversationCard
onDelete={onDelete}
onChangeTitle={onChangeTitle}
Expand All @@ -51,7 +56,7 @@ describe("ConversationCard", () => {
});

it("should render the selectedRepository if available", () => {
const { rerender } = render(
const { rerender } = renderWithProviders(
<ConversationCard
onDelete={onDelete}
onChangeTitle={onChangeTitle}
Expand Down Expand Up @@ -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}
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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}
Expand All @@ -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);
Expand All @@ -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}
Expand Down Expand Up @@ -347,7 +424,7 @@ describe("ConversationCard", () => {

describe("state indicator", () => {
it("should render the 'STOPPED' indicator by default", () => {
render(
renderWithProviders(
<ConversationCard
onDelete={onDelete}
isActive
Expand All @@ -362,7 +439,7 @@ describe("ConversationCard", () => {
});

it("should render the other indicators when provided", () => {
render(
renderWithProviders(
<ConversationCard
onDelete={onDelete}
isActive
Expand Down
Loading