fix: restore bubble message metrics

src/renderer/src/pages/home/Messages/MessageMenubar.tsx

@@ -522,8 +522,10 @@ const MessageMenubar: FC<Props> = (props) => {
   }, [message])
 
   const softHoverBg = isBubbleStyle && !isLastMessage
-  const showMessageTokens = !isBubbleStyle
   const isUserBubbleStyleMessage = isBubbleStyle && isUserMessage
+  const bubbleAlignment: 'flex-start' | 'flex-end' = isAssistantMessage ? 'flex-start' : 'flex-end'
+
+  const tokensElement = <MessageTokens message={message} />
 
   const buttonContext: MessageMenubarButtonContext = {
     assistant,
@@ -558,9 +560,36 @@ const MessageMenubar: FC<Props> = (props) => {
     translateLanguages
   }
 
+  if (isBubbleStyle) {
+    return (
+      <BubbleMenubarWrapper $align={bubbleAlignment}>
+        {tokensElement}
+        <MenusBar
+          className={classNames({
+            menubar: true,
+            show: isLastMessage,
+            'user-bubble-style': isUserBubbleStyleMessage
+          })}>
+          {buttonIds.map((buttonId) => {
+            const renderFn = buttonRenderers[buttonId]
+            if (!renderFn) {
+              logger.warn(`No renderer registered for MessageMenubar button id: ${buttonId}`)
+              return null
+            }
+            const element = renderFn(buttonContext)
+            if (!element) {
+              return null
+            }
+            return <Fragment key={buttonId}>{element}</Fragment>
+          })}
+        </MenusBar>
+      </BubbleMenubarWrapper>
+    )
+  }
+
   return (
     <>
-      {showMessageTokens && <MessageTokens message={message} />}
+      {tokensElement}
       <MenusBar
         className={classNames({ menubar: true, show: isLastMessage, 'user-bubble-style': isUserBubbleStyleMessage })}>
         {buttonIds.map((buttonId) => {
@@ -580,6 +609,14 @@ const MessageMenubar: FC<Props> = (props) => {
   )
 }
 
+const BubbleMenubarWrapper = styled.div<{ $align: 'flex-start' | 'flex-end' }>`
+  display: flex;
+  flex-direction: column;
+  align-items: ${(props) => props.$align};
+  gap: 4px;
+  width: 100%;
+`
+
 const MenusBar = styled.div`
   display: flex;
   flex-direction: row;

src/renderer/src/pages/home/Messages/MessageTokens.tsx

@@ -7,7 +7,6 @@ import styled from 'styled-components'
 
 interface MessageTokensProps {
   message: Message
-  isLastMessage?: boolean
 }
 
 const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
@@ -106,7 +105,10 @@ const MessageMetadata = styled.div`
   color: var(--color-text-3);
   user-select: text;
   cursor: pointer;
-  text-align: right;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  align-self: stretch;
 
   .tokens span {
     padding: 0 2px;