Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-10 15:49:29 +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 softHoverBg = isBubbleStyle && !isLastMessage
const isUserBubbleStyleMessage = isBubbleStyle && isUserMessage const isUserBubbleStyleMessage = isBubbleStyle && isUserMessage
const bubbleAlignment: 'flex-start' | 'flex-end' = isAssistantMessage ? 'flex-start' : 'flex-end' 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 = { const buttonContext: MessageMenubarButtonContext = {
assistant, assistant,
@ -563,7 +564,6 @@ const MessageMenubar: FC<Props> = (props) => {
if (isBubbleStyle) { if (isBubbleStyle) {
return ( return (
<BubbleMenubarWrapper $align={bubbleAlignment}> <BubbleMenubarWrapper $align={bubbleAlignment}>
{tokensElement}
<MenusBar <MenusBar
className={classNames({ className={classNames({
menubar: true, menubar: true,
@ -583,6 +583,7 @@ const MessageMenubar: FC<Props> = (props) => {
return <Fragment key={buttonId}>{element}</Fragment> return <Fragment key={buttonId}>{element}</Fragment>
})} })}
</MenusBar> </MenusBar>
<BubbleTokens>{tokensElement}</BubbleTokens>
</BubbleMenubarWrapper> </BubbleMenubarWrapper>
) )
} }
@ -611,12 +612,21 @@ const MessageMenubar: FC<Props> = (props) => {
const BubbleMenubarWrapper = styled.div<{ $align: 'flex-start' | 'flex-end' }>` const BubbleMenubarWrapper = styled.div<{ $align: 'flex-start' | 'flex-end' }>`
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: ${(props) => props.$align}; align-items: center;
gap: 4px; justify-content: ${(props) => props.$align};
gap: 8px;
width: 100%; 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` const MenusBar = styled.div`
display: flex; display: flex;
flex-direction: row; 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 { interface MessageTokensProps {
message: Message message: Message
align?: 'left' | 'right'
} }
const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => { const MessageTokens: React.FC<MessageTokensProps> = ({ message, align = 'left' }) => {
// const { generating } = useRuntime() // const { generating } = useRuntime()
const locateMessage = () => { const locateMessage = () => {
EventEmitter.emit(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, false) EventEmitter.emit(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, false)
@ -55,7 +56,7 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
if (message.role === 'user') { if (message.role === 'user') {
return ( return (
<MessageMetadata className="message-tokens" onClick={locateMessage}> <MessageMetadata className="message-tokens" onClick={locateMessage} $align={align}>
{`Tokens: ${message?.usage?.total_tokens}`} {`Tokens: ${message?.usage?.total_tokens}`}
</MessageMetadata> </MessageMetadata>
) )
@ -85,7 +86,7 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
) )
return ( return (
<MessageMetadata className="message-tokens" onClick={locateMessage}> <MessageMetadata className="message-tokens" onClick={locateMessage} $align={align}>
{hasMetrics ? ( {hasMetrics ? (
<Popover content={metrixs} placement="top" trigger="hover" styles={{ root: { fontSize: 11 } }}> <Popover content={metrixs} placement="top" trigger="hover" styles={{ root: { fontSize: 11 } }}>
{tokensInfo} {tokensInfo}
@ -100,15 +101,17 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
return null return null
} }
const MessageMetadata = styled.div` const MessageMetadata = styled.div<{ $align: 'left' | 'right' }>`
font-size: 10px; font-size: 10px;
color: var(--color-text-3); color: var(--color-text-3);
user-select: text; user-select: text;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: flex-end; flex: 0 1 auto;
width: 100%; min-width: 0;
align-self: stretch; 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 { .tokens span {
padding: 0 2px; padding: 0 2px;