alihan/OpenPipe-llm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show cost tooltip on mobile, modify styles (#23)

Browse Source 
* Show tooltip on mobile, modify styles

* Tokens -> Token Usage
This commit is contained in:
arcticfly
2023-07-08 10:29:30 -07:00
committed by GitHub
parent a51bab3591
commit 9e26035ff4
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/tooltip/CostTooltip.tsx
View File

@@ -19,26 +19,28 @@ export const CostTooltip = ({
borderRadius="8" borderRadius="8"
color="gray.800" color="gray.800"
bgColor="gray.50" bgColor="gray.50"
borderWidth={1}
py={2} py={2}
hasArrow hasArrow
shouldWrapChildren
label={ label={
<VStack fontSize="sm" w="200"> <VStack fontSize="sm" w="200" spacing={4}>
<VStack> <VStack spacing={0}>
<Text fontWeight="bold">Cost</Text> <Text fontWeight="bold">Cost</Text>
<HStack spacing={0}> <HStack spacing={0}>
<Icon as={BsCurrencyDollar} /> <Icon as={BsCurrencyDollar} />
<Text>{cost.toFixed(6)}</Text> <Text>{cost.toFixed(6)}</Text>
</HStack> </HStack>
</VStack> </VStack>
<VStack> <VStack spacing={1}>
<Text fontWeight="bold">Tokens</Text> <Text fontWeight="bold">Token Usage</Text>
<HStack> <HStack>
<VStack w="28"> <VStack w="28" spacing={1}>
<Text>Prompt</Text> <Text>Prompt</Text>
<Text>{promptTokens ?? 0}</Text> <Text>{promptTokens ?? 0}</Text>
</VStack> </VStack>
<Divider borderColor="gray.200" h={12} orientation="vertical" /> <Divider borderColor="gray.200" h={8} orientation="vertical" />
<VStack w="28"> <VStack w="28" spacing={1}>
<Text whiteSpace="nowrap">Completion</Text> <Text whiteSpace="nowrap">Completion</Text>
<Text>{completionTokens ?? 0}</Text> <Text>{completionTokens ?? 0}</Text>
</VStack> </VStack>