refactor(Messages): enhance message rendering and navigation exclusions

- Updated styles for message content and group containers to improve layout.
- Added new selectors to exclude additional elements from navigation.
- Implemented conditional rendering for mentions in message content.
- Simplified token display logic in message tokens component.

src/renderer/src/assets/styles/index.scss

@@ -147,11 +147,16 @@ ul {
       background-color: var(--color-white-soft);
     }
   }
+  .group-grid-container.horizontal,
+  .group-grid-container.grid {
+    .message-content-container-assistant {
+      padding: 0;
+    }
+  }
   .group-message-wrapper {
     background-color: var(--color-background);
     .message-content-container {
       width: 100%;
-      border: 1px solid var(--color-background-mute);
     }
   }
   .group-menu-bar {
@@ -170,6 +175,7 @@ span.highlight {
   background-color: var(--color-background-highlight);
   color: var(--color-highlight);
 }
+
 span.highlight.selected {
   background-color: var(--color-background-highlight-accent);
 }

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

@@ -18,7 +18,7 @@ import styled from 'styled-components'
 import ChatFlowHistory from './ChatFlowHistory'
 
 // Exclude some areas from the navigation
-const EXCLUDED_SELECTORS = ['.MessageFooter', '.code-toolbar', '.ant-collapse-header']
+const EXCLUDED_SELECTORS = ['.MessageFooter', '.code-toolbar', '.ant-collapse-header', '.group-menu-bar', '.code-block']
 
 interface ChatNavigationProps {
   containerId: string

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

@@ -1,6 +1,7 @@
 import { getModelUniqId } from '@renderer/services/ModelService'
 import type { Message } from '@renderer/types/newMessage'
 import { Flex } from 'antd'
+import { isEmpty } from 'lodash'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -12,9 +13,11 @@ interface Props {
 const MessageContent: React.FC<Props> = ({ message }) => {
   return (
     <>
-      <Flex gap="8px" wrap style={{ marginBottom: 10 }}>
+      {!isEmpty(message.mentions) && (
-        {message.mentions?.map((model) => <MentionTag key={getModelUniqId(model)}>{'@' + model.name}</MentionTag>)}
+        <Flex gap="8px" wrap style={{ marginBottom: 10 }}>
-      </Flex>
+          {message.mentions?.map((model) => <MentionTag key={getModelUniqId(model)}>{'@' + model.name}</MentionTag>)}
+        </Flex>
+      )}
       <MessageBlockRenderer blocks={message.blocks} message={message} />
     </>
   )

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

@@ -204,8 +204,7 @@ const MessageGroup = ({ messages, topic, hidePresetMessages, registerMessageElem
               </MessageWrapper>
             }
             trigger={gridPopoverTrigger}
-            styles={{ root: { maxWidth: '60vw', minWidth: '550px', overflowY: 'auto', zIndex: 1000 } }}
+            styles={{ root: { maxWidth: '60vw', minWidth: '550px', overflowY: 'auto', zIndex: 1000 } }}>
-            getPopupContainer={(triggerNode) => triggerNode.parentNode as HTMLElement}>
             <div style={{ cursor: 'pointer' }}>{messageContent}</div>
           </Popover>
         )

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

@@ -1,6 +1,7 @@
 // import { useRuntime } from '@renderer/hooks/useRuntime'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import type { Message } from '@renderer/types/newMessage'
+import { Popover } from 'antd'
 import { t } from 'i18next'
 import styled from 'styled-components'
 
@@ -40,15 +41,24 @@ const MessgeTokens: React.FC<MessageTokensProps> = ({ message }) => {
       })
     }
 
+    const tokensInfo = (
+      <span className="tokens">
+        Tokens:
+        <span>{message?.usage?.total_tokens}</span>
+        <span>↑{message?.usage?.prompt_tokens}</span>
+        <span>↓{message?.usage?.completion_tokens}</span>
+      </span>
+    )
+
     return (
-      <MessageMetadata className={`message-tokens ${hasMetrics ? 'has-metrics' : ''}`} onClick={locateMessage}>
+      <MessageMetadata className="message-tokens" onClick={locateMessage}>
-        <span className="metrics">{metrixs}</span>
+        {hasMetrics ? (
-        <span className="tokens">
+          <Popover content={metrixs} placement="top" trigger="hover" styles={{ root: { fontSize: 11 } }}>
-          Tokens:
+            {tokensInfo}
-          <span>{message?.usage?.total_tokens}</span>
+          </Popover>
-          <span>↑{message?.usage?.prompt_tokens}</span>
+        ) : (
-          <span>↓{message?.usage?.completion_tokens}</span>
+          tokensInfo
-        </span>
+        )}
       </MessageMetadata>
     )
   }
@@ -64,10 +74,6 @@ const MessageMetadata = styled.div`
   cursor: pointer;
   text-align: right;
 
-  .metrics {
-    display: none;
-  }
-
   .tokens {
     display: block;
 
@@ -75,16 +81,6 @@ const MessageMetadata = styled.div`
       padding: 0 2px;
     }
   }
-
-  &.has-metrics:hover {
-    .metrics {
-      display: block;
-    }
-
-    .tokens {
-      display: none;
-    }
-  }
 `
 
 export default MessgeTokens