feat(requests): add cost to request drawer

Helicone · Oct 8, 2024 · d00531e · d00531e
1 parent 92c65af
commit d00531e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/web/components/shared/utils/formatNumber.ts b/web/components/shared/utils/formatNumber.ts
@@ -0,0 +1,3 @@
+export function formatNumber(num: number): string {
+  return num.toFixed(4);
+}
diff --git a/web/components/templates/requestsV2/requestRow.tsx b/web/components/templates/requestsV2/requestRow.tsx
@@ -21,6 +21,7 @@ import StatusBadge from "./statusBadge";
 import ThemedModal from "../../shared/themed/themedModal";
 import NewDataset from "../datasets/NewDataset";
 import { convertToUSDateFormat } from "../../shared/utils/dateConvertor";
+import { formatNumber } from "../../../shared/utils/formatNumber";
 
 function getPathName(url: string) {
   try {
@@ -262,6 +263,18 @@ const RequestRow = (props: {
               <span>{Number(request.latency) / 1000}s</span>
             </p>
           </li>
+          <li className="flex flex-row justify-between items-center py-2 gap-4">
+            <p className="font-semibold text-gray-900 dark:text-gray-100">
+              Cost
+            </p>
+            <p className="text-gray-700 dark:text-gray-300 truncate">
+              {request.cost !== null && request.cost !== undefined
+                ? `$${formatNumber(request.cost)}`
+                : request.status.statusType === "success"
+                ? "Calculating..."
+                : "N/A"}
+            </p>
+          </li>
           <li className="flex flex-row justify-between items-center py-2 gap-4">
             <p className="font-semibold text-gray-900 dark:text-gray-100">
               Status