adds token usage note to explorer assistant and support for footer_items to ux

assistants/explorer-assistant/assistant/chat.py

@@ -297,7 +297,10 @@ async def respond_to_conversation(
             content = completion.choices[0].message.content
 
             # get the total tokens used for the completion
-            completion_total_tokens = completion.usage.total_tokens if completion.usage else None
+            completion_total_tokens = completion.usage.total_tokens if completion.usage else 0
+            footer_items = [
+                _get_token_usage_message(config.request_config.max_tokens, completion_total_tokens),
+            ]
 
             # add the completion to the metadata for debugging
             deepmerge.always_merger.merge(
@@ -312,7 +315,8 @@ async def respond_to_conversation(
                             },
                             "response": completion.model_dump() if completion else "[no response from openai]",
                         },
-                    }
+                    },
+                    "footer_items": footer_items,
                 },
             )
 
@@ -420,6 +424,32 @@ async def respond_to_conversation(
 #
 
 
+# TODO: move to a common module, such as either the openai_client or attachment module for easy re-use in other assistants
+def _get_token_usage_message(
+    max_tokens: int,
+    completion_total_tokens: int,
+) -> str:
+    """
+    Generate a display friendly message for the token usage, to be added to the footer items.
+    """
+
+    def get_display_count(tokens: int) -> str:
+        # if less than 1k, return the number of tokens
+        # if greater than or equal to 1k, return the number of tokens in k
+        # use 1 decimal place for k
+        # drop the decimal place if the number of tokens in k is a whole number
+        if tokens < 1000:
+            return str(tokens)
+        else:
+            tokens_in_k = tokens / 1000
+            if tokens_in_k.is_integer():
+                return f"{int(tokens_in_k)}k"
+            else:
+                return f"{tokens_in_k:.1f}k"
+
+    return f"Tokens used: {get_display_count(completion_total_tokens)} of {get_display_count(max_tokens)} ({int(completion_total_tokens / max_tokens * 100)}%)"
+
+
 def _format_message(message: ConversationMessage, participants: list[ConversationParticipant]) -> str:
     """
     Format a conversation message for display.

workbench-app/docs/MESSAGE_METADATA.md

@@ -8,6 +8,8 @@ The app has built-in support for a few metadata child properties, which can be u
 
 -   `debug`: A dictionary that can contain additional information that can be used for debugging purposes. If included, it will cause the app to display a button that will allow the user to see the contents of the dictionary in a popup for further inspection.
 
+-   `footer_items`: A list of strings that will be displayed in the footer of the message. The intent is to allow the sender to include additional information that is not part of the message body, but is still relevant to the message.
+
 Example:
 
 ```json
@@ -39,7 +41,10 @@ Example:
                     "content": ...
                 }
             }
-        }
+        },
+        "footer_items": [
+            "6.8k of 50k (13%) tokens used for request",
+        ]
     }
 }
 ```

workbench-app/src/components/App/AppView.tsx

@@ -8,6 +8,9 @@ import { AppFooter } from './AppFooter';
 import { AppHeader } from './AppHeader';
 
 const useClasses = makeStyles({
+    body: {
+        backgroundImage: `url('/assets/background-1.jpg')`,
+    },
     root: {
         display: 'grid',
         gridTemplateRows: 'auto 1fr auto',
@@ -48,6 +51,13 @@ export const AppView: React.FC<AppViewProps> = (props) => {
     const { completedFirstRun } = useAppSelector((state) => state.app);
     const navigate = useNavigate();
 
+    React.useLayoutEffect(() => {
+        document.body.className = classes.body;
+        return () => {
+            document.body.className = '';
+        };
+    }, [classes.body]);
+
     React.useEffect(() => {
         if (!completedFirstRun?.app && window.location.pathname !== '/terms') {
             navigate('/terms');

workbench-app/src/components/Conversations/InteractMessage.tsx

@@ -103,6 +103,14 @@ const useClasses = makeStyles({
         alignItems: 'center',
         ...shorthands.padding(tokens.spacingVerticalXXS, 0, tokens.spacingVerticalXXS, tokens.spacingHorizontalS),
     },
+    footer: {
+        display: 'flex',
+        color: tokens.colorNeutralForeground3,
+        flexDirection: 'row',
+        gap: tokens.spacingHorizontalS,
+        alignItems: 'center',
+        ...shorthands.padding(tokens.spacingVerticalXS, 0, tokens.spacingVerticalXS, tokens.spacingHorizontalS),
+    },
     userContent: {
         alignItems: 'end',
     },
@@ -296,31 +304,41 @@ export const InteractMessage: React.FC<InteractMessageProps> = (props) => {
                 </AiGeneratedDisclaimer>
             );
 
+        let footerItems: React.ReactNode | null = null;
+        if (message.metadata?.['footer_items']) {
+            // may either be a string or an array of strings
+            const footerItemsArray = Array.isArray(message.metadata['footer_items'])
+                ? message.metadata['footer_items']
+                : [message.metadata['footer_items']];
+
+            footerItems = (
+                <>
+                    {footerItemsArray.map((item) => (
+                        <AiGeneratedDisclaimer key={item} className={classes.generated}>
+                            {item}
+                        </AiGeneratedDisclaimer>
+                    ))}
+                </>
+            );
+        }
+        const footerContent = (
+            <div className={classes.footer}>
+                {aiGeneratedDisclaimer}
+                {footerItems}
+            </div>
+        );
+
         return (
             <>
                 <div className={classes.actions}>
                     {(message.messageType !== 'notice' || (message.messageType === 'notice' && !isUser)) && actions}
                 </div>
                 <div className={contentClassName}>{renderedContent}</div>
-                {aiGeneratedDisclaimer}
+                {footerContent}
                 {attachmentList}
             </>
         );
-    }, [
-        actions,
-        classes.actions,
-        classes.attachments,
-        classes.generated,
-        classes.innerContent,
-        classes.noteContent,
-        classes.noticeContent,
-        content,
-        contentClassName,
-        isUser,
-        message.filenames,
-        message.messageType,
-        message.metadata,
-    ]);
+    }, [actions, classes, content, contentClassName, isUser, message.filenames, message.messageType, message.metadata]);
 
     const renderedContent = getRenderedMessage();
 

workbench-app/src/index.css

@@ -9,7 +9,6 @@
 body {
     margin: 0;
     overscroll-behavior: none;
-    background-image: url('/assets/background-1.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;