add cost tooltip (#22)

* add cost tooltip

* add padding and style

src/components/OutputsTable/OutputCell/OutputStats.tsx

@@ -7,6 +7,7 @@ import { calculateTokenCost } from "~/utils/calculateTokenCost";
 import { evaluateOutput } from "~/server/utils/evaluateOutput";
 import { HStack, Icon, Text } from "@chakra-ui/react";
 import { BsCheck, BsClock, BsCurrencyDollar, BsX } from "react-icons/bs";
+import { CostTooltip } from "~/components/tooltip/CostTooltip";
 
 export const OutputStats = ({
   model,
@@ -48,10 +49,12 @@ export const OutputStats = ({
           );
         })}
       </HStack>
-      <HStack spacing={0}>
-        <Icon as={BsCurrencyDollar} />
-        <Text mr={1}>{cost.toFixed(3)}</Text>
-      </HStack>
+      <CostTooltip promptTokens={promptTokens} completionTokens={completionTokens} cost={cost}>
+        <HStack spacing={0}>
+          <Icon as={BsCurrencyDollar} />
+          <Text mr={1}>{cost.toFixed(3)}</Text>
+        </HStack>
+      </CostTooltip>
       <HStack spacing={0.5}>
         <Icon as={BsClock} />
         <Text>{(timeToComplete / 1000).toFixed(2)}s</Text>

src/components/OutputsTable/VariantStats.tsx

@@ -4,13 +4,23 @@ import { cellPadding } from "../constants";
 import { api } from "~/utils/api";
 import chroma from "chroma-js";
 import { BsCurrencyDollar } from "react-icons/bs";
+import { CostTooltip } from "../tooltip/CostTooltip";
 
 export default function VariantStats(props: { variant: PromptVariant }) {
   const { data } = api.promptVariants.stats.useQuery(
     {
       variantId: props.variant.id,
     },
-    { initialData: { evalResults: [], overallCost: 0, scenarioCount: 0, outputCount: 0 } }
+    {
+      initialData: {
+        evalResults: [],
+        overallCost: 0,
+        promptTokens: 0,
+        completionTokens: 0,
+        scenarioCount: 0,
+        outputCount: 0,
+      },
+    }
   );
 
   const [passColor, neutralColor, failColor] = useToken("colors", [
@@ -46,10 +56,16 @@ export default function VariantStats(props: { variant: PromptVariant }) {
         })}
       </HStack>
       {data.overallCost && (
-        <HStack spacing={0} align="center" color="gray.500" my="2">
-          <Icon as={BsCurrencyDollar} />
-          <Text mr={1}>{data.overallCost.toFixed(3)}</Text>
-        </HStack>
+        <CostTooltip
+          promptTokens={data.promptTokens}
+          completionTokens={data.completionTokens}
+          cost={data.overallCost}
+        >
+          <HStack spacing={0} align="center" color="gray.500" my="2">
+            <Icon as={BsCurrencyDollar} />
+            <Text mr={1}>{data.overallCost.toFixed(3)}</Text>
+          </HStack>
+        </CostTooltip>
       )}
     </HStack>
   );