From 5d605606f41e11510f71bde2351604832b5ce44e Mon Sep 17 00:00:00 2001
From: scientia <wangdenghui@xiaomi.com>
Date: Fri, 31 Oct 2025 03:10:31 +0800
Subject: [PATCH] fix: restore bubble message metrics

---
 .../pages/home/Messages/MessageMenubar.tsx    | 41 ++++++++++++++++++-
 .../src/pages/home/Messages/MessageTokens.tsx |  6 ++-
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
index bb7a17e051..09f6f0b441 100644
--- a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
+++ b/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;
diff --git a/src/renderer/src/pages/home/Messages/MessageTokens.tsx b/src/renderer/src/pages/home/Messages/MessageTokens.tsx
index 8fc370ab94..6f44575cb9 100644
--- a/src/renderer/src/pages/home/Messages/MessageTokens.tsx
+++ b/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;