From 6996cdfbf95c962b1b177102c92b1827a3ad75c1 Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Thu, 19 Jun 2025 11:23:42 +0800
Subject: [PATCH] fix: the issue where anchor clicks in multi-model responses
 fail to redirect (#7342)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复多模型回答的锚点点击无法跳转问题

* chore(Messages): remove debug logging from MessageAnchorLine component
---
 .../pages/home/Messages/MessageAnchorLine.tsx | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx b/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx
index 258c9d264e..3e4773dcd1 100644
--- a/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx
@@ -1,4 +1,3 @@
-import { DownOutlined } from '@ant-design/icons'
 import EmojiAvatar from '@renderer/components/Avatar/EmojiAvatar'
 import { APP_NAME, AppLogo, isLocalAi } from '@renderer/config/env'
 import { getModelLogo } from '@renderer/config/models'
@@ -14,6 +13,7 @@ import type { Message } from '@renderer/types/newMessage'
 import { isEmoji, removeLeadingEmoji } from '@renderer/utils'
 import { getMainTextContent } from '@renderer/utils/messageUtils/find'
 import { Avatar } from 'antd'
+import { CircleChevronDown } from 'lucide-react'
 import { type FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -104,14 +104,18 @@ const MessageAnchorLine: FC<MessageLineProps> = ({ messages }) => {
       if (groupMessages.length > 1) {
         for (const m of groupMessages) {
           dispatch(
-            newMessagesActions.updateMessage({ topicId: m.topicId, messageId: m.id, updates: { foldSelected: true } })
+            newMessagesActions.updateMessage({
+              topicId: m.topicId,
+              messageId: m.id,
+              updates: { foldSelected: m.id === message.id }
+            })
           )
         }
 
         setTimeout(() => {
           const messageElement = document.getElementById(`message-${message.id}`)
           if (messageElement) {
-            messageElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+            messageElement.scrollIntoView({ behavior: 'auto', block: 'start' })
           }
         }, 100)
       }
@@ -183,16 +187,9 @@ const MessageAnchorLine: FC<MessageLineProps> = ({ messages }) => {
             opacity: mouseY ? 0.5 + calculateValueByDistance('bottom-anchor', 1) : 0.6
           }}
           onClick={scrollToBottom}>
-          <MessageItemContainer
-            style={{ transform: `scale(${1 + calculateValueByDistance('bottom-anchor', 1)})` }}></MessageItemContainer>
-          <Avatar
-            icon={<DownOutlined style={{ color: theme === 'dark' ? 'var(--color-text)' : 'var(--color-primary)' }} />}
+          <CircleChevronDown
             size={10 + calculateValueByDistance('bottom-anchor', 20)}
-            style={{
-              backgroundColor: theme === 'dark' ? 'var(--color-background-soft)' : 'var(--color-primary-light)',
-              border: `1px solid ${theme === 'dark' ? 'var(--color-border-soft)' : 'var(--color-primary-soft)'}`,
-              opacity: 0.9
-            }}
+            style={{ color: theme === 'dark' ? 'var(--color-text)' : 'var(--color-primary)' }}
           />
         </MessageItem>
         {messages.map((message, index) => {
@@ -203,6 +200,8 @@ const MessageAnchorLine: FC<MessageLineProps> = ({ messages }) => {
           const username = removeLeadingEmoji(getUserName(message))
           const content = getMainTextContent(message)
 
+          if (message.type === 'clear') return null
+
           return (
             <MessageItem
               key={message.id}
@@ -262,7 +261,6 @@ const MessageItemContainer = styled.div`
   justify-content: space-between;
   text-align: right;
   gap: 4px;
-  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
   opacity: 0;
   transform-origin: right center;
 `