refactor(MessageGroup): optimize selected message handling with useMe… (#6124)

* refactor(MessageGroup): optimize selected message handling with useMemo and clean up unused code

* refactor(MainTextBlock): optimize citation handling with useMemo and improve code clarity

* fix:del console

src/renderer/src/pages/home/Messages/Blocks/MainTextBlock.tsx

@@ -38,13 +38,14 @@ const MainTextBlock: React.FC<Props> = ({ block, citationBlockId, role, mentions
   // Use the passed citationBlockId directly in the selector
   const { renderInputMessageAsMarkdown } = useSettings()
 
-  const formattedCitations = useSelector((state: RootState) => {
+  const rawCitations = useSelector((state: RootState) => selectFormattedCitationsByBlockId(state, citationBlockId))
-    const citations = selectFormattedCitationsByBlockId(state, citationBlockId)
+
-    return citations.map((citation) => ({
+  const formattedCitations = useMemo(() => {
+    return rawCitations.map((citation) => ({
       ...citation,
       content: citation.content ? cleanMarkdownContent(citation.content) : citation.content
     }))
-  })
+  }, [rawCitations])
 
   const processedContent = useMemo(() => {
     let content = block.content

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

@@ -7,7 +7,7 @@ import type { Topic } from '@renderer/types'
 import type { Message } from '@renderer/types/newMessage'
 import { classNames } from '@renderer/utils'
 import { Popover } from 'antd'
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 
 import MessageItem from './Message'
@@ -31,7 +31,8 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
   const prevMessageLengthRef = useRef(messageLength)
   const [selectedIndex, setSelectedIndex] = useState(messageLength - 1)
 
-  const getSelectedMessageId = useCallback(() => {
+  const selectedMessageId = useMemo(() => {
+    if (messages.length === 1) return messages[0]?.id
     const selectedMessage = messages.find((message) => message.foldSelected)
     if (selectedMessage) {
       return selectedMessage.id
@@ -41,9 +42,10 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
 
   const setSelectedMessage = useCallback(
     (message: Message) => {
-      messages.forEach(async (m) => {
+      // 前一个
-        await editMessage(m.id, { foldSelected: m.id === message.id })
+      editMessage(selectedMessageId, { foldSelected: false })
-      })
+      // 当前选中的消息
+      editMessage(message.id, { foldSelected: true })
 
       setTimeout(() => {
         const messageElement = document.getElementById(`message-${message.id}`)
@@ -52,7 +54,7 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
         }
       }, 200)
     },
-    [editMessage, messages]
+    [editMessage, selectedMessageId]
   )
 
   const isGrouped = messageLength > 1 && messages.every((m) => m.role === 'assistant')
@@ -67,8 +69,7 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
         setSelectedMessage(lastMessage)
       }
     } else {
-      const selectedId = getSelectedMessageId()
+      const newIndex = messages.findIndex((msg) => msg.id === selectedMessageId)
-      const newIndex = messages.findIndex((msg) => msg.id === selectedId)
       if (newIndex !== -1) {
         setSelectedIndex(newIndex)
       }
@@ -147,7 +148,7 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
   }, [messages, setSelectedMessage])
 
   const renderMessage = useCallback(
-    (message: Message & { index: number }, index: number) => {
+    (message: Message & { index: number }) => {
       const isGridGroupMessage = isGrid && message.role === 'assistant' && isGrouped
       const messageProps = {
         isGrouped,
@@ -164,15 +165,15 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
         <MessageWrapper
           id={`message-${message.id}`}
           $layout={multiModelMessageStyle}
-          $selected={index === selectedIndex}
+          // $selected={index === selectedIndex}
           $isGrouped={isGrouped}
           key={message.id}
           className={classNames({
             'group-message-wrapper': message.role === 'assistant' && isHorizontal && isGrouped,
             [multiModelMessageStyle]: isGrouped,
-            selected: message.id === getSelectedMessageId()
+            selected: message.id === selectedMessageId
           })}>
-          <MessageItem {...messageProps} />
+          {message.id === selectedMessageId && <MessageItem {...messageProps} />}
         </MessageWrapper>
       )
 
@@ -183,7 +184,7 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
             content={
               <MessageWrapper
                 $layout={multiModelMessageStyle}
-                $selected={index === selectedIndex}
+                // $selected={index === selectedIndex}
                 $isGrouped={isGrouped}
                 $isInPopover={true}>
                 <MessageItem {...messageProps} />
@@ -204,11 +205,10 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
       isGrouped,
       isHorizontal,
       multiModelMessageStyle,
-      selectedIndex,
       topic,
       hidePresetMessages,
       gridPopoverTrigger,
-      getSelectedMessageId
+      selectedMessageId
     ]
   )
 
@@ -235,7 +235,7 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
             })
           }}
           messages={messages}
-          selectMessageId={getSelectedMessageId()}
+          selectMessageId={selectedMessageId}
           setSelectedMessage={setSelectedMessage}
           topic={topic}
         />
@@ -297,7 +297,7 @@ const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageSty
 
 interface MessageWrapperProps {
   $layout: 'fold' | 'horizontal' | 'vertical' | 'grid'
-  $selected: boolean
+  // $selected: boolean
   $isGrouped: boolean
   $isInPopover?: boolean
 }