Show Costs on Hover. #480, #341

enricoros · May 7, 2024 · 6a5d783 · 6a5d783
1 parent 0223e07
commit 6a5d783
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 25 deletions.
diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx
@@ -172,6 +172,8 @@ export function Composer(props: {
   const tokensHistory = _historyTokenCount;
   const tokensReponseMax = (props.chatLLM?.options as LLMOptionsOpenAI /* FIXME: BIG ASSUMPTION */)?.llmResponseTokens || 0;
   const tokenLimit = props.chatLLM?.contextTokens || 0;
+  const tokenPriceIn = props.chatLLM?.pricing?.chatIn;
+  const tokenPriceOut = props.chatLLM?.pricing?.chatOut;
 
 
   // Effect: load initial text if queued up (e.g. by /link/share_targe)
@@ -670,11 +672,11 @@ export function Composer(props: {
                   }} />
 
                 {!showChatReplyTo && tokenLimit > 0 && (tokensComposer > 0 || (tokensHistory + tokensReponseMax) > 0) && (
-                  <TokenProgressbarMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} />
+                  <TokenProgressbarMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} tokenPriceIn={tokenPriceIn} tokenPriceOut={tokenPriceOut} />
                 )}
 
                 {!showChatReplyTo && !!tokenLimit && (
-                  <TokenBadgeMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} showExcess absoluteBottomRight />
+                  <TokenBadgeMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} tokenPriceIn={tokenPriceIn} tokenPriceOut={tokenPriceOut} showExcess absoluteBottomRight />
                 )}
 
               </Box>

diff --git a/src/apps/chat/components/composer/TokenBadge.tsx b/src/apps/chat/components/composer/TokenBadge.tsx
@@ -3,41 +3,63 @@ import * as React from 'react';
 import { Badge, Box, ColorPaletteProp, Tooltip } from '@mui/joy';
 
 
-function alignRight(value: number, columnSize: number = 7) {
+function alignRight(value: number, columnSize: number = 8) {
   const str = value.toLocaleString();
   return str.padStart(columnSize);
 }
 
 
-export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, historyTokens?: number, responseMaxTokens?: number): {
-  color: ColorPaletteProp, message: string, remainingTokens: number
-} {
-  const usedTokens = directTokens + (historyTokens || 0) + (responseMaxTokens || 0);
-  const remainingTokens = tokenLimit - usedTokens;
+export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, historyTokens?: number, responseMaxTokens?: number, tokenPriceIn?: number, tokenPriceOut?: number): { color: ColorPaletteProp; message: string; remainingTokens: number } {
+  const usedInputTokens = directTokens + (historyTokens || 0);
+  const usedMaxTokens = usedInputTokens + (responseMaxTokens || 0);
+  const remainingTokens = tokenLimit - usedMaxTokens;
   const gteLimit = (remainingTokens <= 0 && tokenLimit > 0);
 
   // message
   let message: string = gteLimit ? '⚠️ ' : '';
 
   // no limit: show used tokens only
   if (!tokenLimit) {
-    message += `Requested: ${usedTokens.toLocaleString()} tokens`;
+    message += `Requested: ${usedMaxTokens.toLocaleString()} tokens`;
   }
   // has full information (d + i < l)
   else if (historyTokens || responseMaxTokens) {
     message +=
-      `${Math.abs(remainingTokens).toLocaleString()} ${remainingTokens >= 0 ? 'available' : 'excess'} message tokens\n\n` +
+      `▶ ${Math.abs(remainingTokens).toLocaleString()} ${remainingTokens >= 0 ? 'available' : 'excess'} message tokens\n\n` +
       ` = Model max tokens: ${alignRight(tokenLimit)}\n` +
       `     - This message: ${alignRight(directTokens)}\n` +
       `          - History: ${alignRight(historyTokens || 0)}\n` +
       `     - Max response: ${alignRight(responseMaxTokens || 0)}`;
+
+    // add the price, if available
+    if (tokenPriceIn || tokenPriceOut) {
+      const costIn = tokenPriceIn ? usedInputTokens * tokenPriceIn / 1E6 : undefined;
+      const costOutMax = (tokenPriceOut && responseMaxTokens) ? responseMaxTokens * tokenPriceOut / 1E6 : undefined;
+      if (costIn || costOutMax) {
+        message += `\n\n\n▶ Chat Turn Cost (max, approximate)\n`;
+
+        if (costIn) message += '\n' +
+          `       Input tokens: ${alignRight(usedInputTokens)}\n` +
+          `    Input Price $/M: ${tokenPriceIn!.toFixed(2).padStart(8)}\n` +
+          `         Input cost: ${('$' + costIn!.toFixed(3)).padStart(8)}\n`;
+
+        if (costOutMax) message += '\n' +
+          `  Max output tokens: ${alignRight(responseMaxTokens!)}\n` +
+          `   Output Price $/M: ${tokenPriceOut!.toFixed(2).padStart(8)}\n` +
+          `    Max output cost: ${('$' + costOutMax!.toFixed(3)).padStart(8)}\n`;
+
+        const costMax = costIn && costOutMax ? costIn + costOutMax : undefined;
+        if (costMax) message += '\n' +
+          `    = Max turn cost: ${('$' + costMax.toFixed(4)).padStart(8)}`;
+      }
+    }
   }
   // Cleaner mode: d + ? < R (total is the remaining in this case)
   else {
     message +=
-      `${(tokenLimit + usedTokens).toLocaleString()} available tokens after deleting this\n\n` +
+      `${(tokenLimit + usedMaxTokens).toLocaleString()} available tokens after deleting this\n\n` +
       ` = Currently free: ${alignRight(tokenLimit)}\n` +
-      `   + This message: ${alignRight(usedTokens)}`;
+      `   + This message: ${alignRight(usedMaxTokens)}`;
   }
 
   const color: ColorPaletteProp =
@@ -55,15 +77,13 @@ export const TokenTooltip = (props: { message: string | null, color: ColorPalett
   <Tooltip
     placement={props.placement}
     variant={props.color !== 'primary' ? 'solid' : 'soft'} color={props.color}
-    title={props.message
-      ? <Box sx={{ p: 2, whiteSpace: 'pre' }}>
-        {props.message}
-      </Box>
-      : null
-    }
+    title={props.message ? <Box sx={{ p: 2, whiteSpace: 'pre' }}>{props.message}</Box> : null}
     sx={{
       fontFamily: 'code',
-      boxShadow: 'xl',
+      // fontSize: '0.8125rem',
+      border: '1px solid',
+      borderColor: `${props.color}.outlinedColor`,
+      boxShadow: 'md',
     }}
   >
     {props.children}
@@ -76,11 +96,20 @@ export const TokenTooltip = (props: { message: string | null, color: ColorPalett
 export const TokenBadgeMemo = React.memo(TokenBadge);
 
 function TokenBadge(props: {
-  direct: number, history?: number, responseMax?: number, limit: number,
-  showExcess?: boolean, absoluteBottomRight?: boolean, inline?: boolean,
+  direct: number,
+  history?: number,
+  responseMax?: number,
+  limit: number,
+
+  tokenPriceIn?: number,
+  tokenPriceOut?: number,
+
+  showExcess?: boolean,
+  absoluteBottomRight?: boolean,
+  inline?: boolean,
 }) {
 
-  const { message, color, remainingTokens } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax);
+  const { message, color, remainingTokens } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax, props.tokenPriceIn, props.tokenPriceOut);
 
   // show the direct tokens, unless we exceed the limit and 'showExcess' is enabled
   const value = (props.showExcess && (props.limit && remainingTokens <= 0))
@@ -92,7 +121,7 @@ function TokenBadge(props: {
       variant='solid' color={color} max={100000}
       invisible={!props.direct && remainingTokens >= 0}
       badgeContent={
-        <TokenTooltip color={color} message={message}>
+        <TokenTooltip color={color} message={message} placement='top-end'>
           <span>{value.toLocaleString()}</span>
         </TokenTooltip>
       }
@@ -103,7 +132,9 @@ function TokenBadge(props: {
       slotProps={{
         badge: {
           sx: {
+            // the badge (not the tooltip)
             fontFamily: 'code',
+            fontSize: 'sm',
             ...((props.absoluteBottomRight || props.inline) && { position: 'static', transform: 'none' }),
           },
         },

diff --git a/src/apps/chat/components/composer/TokenProgressbar.tsx b/src/apps/chat/components/composer/TokenProgressbar.tsx
@@ -12,7 +12,15 @@ import { tokensPrettyMath, TokenTooltip } from './TokenBadge';
  */
 export const TokenProgressbarMemo = React.memo(TokenProgressbar);
 
-function TokenProgressbar(props: { direct: number, history: number, responseMax: number, limit: number }) {
+function TokenProgressbar(props: {
+  direct: number,
+  history: number,
+  responseMax: number,
+  limit: number,
+
+  tokenPriceIn?: number,
+  tokenPriceOut?: number,
+}) {
   // external state
   const theme = useTheme();
 
@@ -40,7 +48,7 @@ function TokenProgressbar(props: { direct: number, history: number, responseMax:
   const overflowColor = theme.palette.danger.softColor;
 
   // tooltip message/color
-  const { message, color } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax);
+  const { message, color } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax, props.tokenPriceIn, props.tokenPriceOut);
 
   // sizes
   const containerHeight = 8;