Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-02 10:29:02 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: align bubble metrics with actions

Browse Source
This commit is contained in:
scientia 2025-10-31 23:14:04 +08:00
parent 5d605606f4
commit f1a2e15dac
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/renderer/src/pages/home/Messages/MessageMenubar.tsx
View File

@ -524,8 +524,9 @@ const MessageMenubar: FC<Props> = (props) => {
const softHoverBg = isBubbleStyle && !isLastMessage
const isUserBubbleStyleMessage = isBubbleStyle && isUserMessage
const bubbleAlignment: 'flex-start' | 'flex-end' = isAssistantMessage ? 'flex-start' : 'flex-end'
const messageTokensAlignment: 'left' | 'right' = isBubbleStyle ? 'right' : 'left'
const tokensElement = <MessageTokens message={message} />
const tokensElement = <MessageTokens message={message} align={messageTokensAlignment} />
const buttonContext: MessageMenubarButtonContext = {
assistant,
@ -563,7 +564,6 @@ const MessageMenubar: FC<Props> = (props) => {
if (isBubbleStyle) {
return (
<BubbleMenubarWrapper $align={bubbleAlignment}>
{tokensElement}
<MenusBar
className={classNames({
menubar: true,
@ -583,6 +583,7 @@ const MessageMenubar: FC<Props> = (props) => {
return <Fragment key={buttonId}>{element}</Fragment>
})}
</MenusBar>
<BubbleTokens>{tokensElement}</BubbleTokens>
</BubbleMenubarWrapper>
)
}
@ -611,12 +612,21 @@ 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;
flex-direction: row;
align-items: center;
justify-content: ${(props) => props.$align};
gap: 8px;
width: 100%;
`
const BubbleTokens = styled.div`
margin-left: auto;
flex: 0 0 auto;
min-width: 0;
display: flex;
justify-content: flex-end;
`
const MenusBar = styled.div`
display: flex;
flex-direction: row;

17
src/renderer/src/pages/home/Messages/MessageTokens.tsx
View File

@ -7,9 +7,10 @@ import styled from 'styled-components'
interface MessageTokensProps {
message: Message
align?: 'left' | 'right'
}
const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
const MessageTokens: React.FC<MessageTokensProps> = ({ message, align = 'left' }) => {
// const { generating } = useRuntime()
const locateMessage = () => {
EventEmitter.emit(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, false)
@ -55,7 +56,7 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
if (message.role === 'user') {
return (
<MessageMetadata className="message-tokens" onClick={locateMessage}>
<MessageMetadata className="message-tokens" onClick={locateMessage} $align={align}>
{`Tokens: ${message?.usage?.total_tokens}`}
</MessageMetadata>
)
@ -85,7 +86,7 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
)
return (
<MessageMetadata className="message-tokens" onClick={locateMessage}>
<MessageMetadata className="message-tokens" onClick={locateMessage} $align={align}>
{hasMetrics ? (
<Popover content={metrixs} placement="top" trigger="hover" styles={{ root: { fontSize: 11 } }}>
{tokensInfo}
@ -100,15 +101,17 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
return null
}
const MessageMetadata = styled.div`
const MessageMetadata = styled.div<{ $align: 'left' | 'right' }>`
font-size: 10px;
color: var(--color-text-3);
user-select: text;
cursor: pointer;
display: flex;
justify-content: flex-end;
width: 100%;
align-self: stretch;
flex: 0 1 auto;
min-width: 0;
justify-content: ${(props) => (props.$align === 'right' ? 'flex-end' : 'flex-start')};
margin-left: ${(props) => (props.$align === 'right' ? 'auto' : '0')};
margin-right: ${(props) => (props.$align === 'left' ? 'auto' : '0')};
.tokens span {
padding: 0 2px;