fix: implement navigation in agent mode (#12238)

fix: add navigation in agentm mode

Co-authored-by: harry <harry@mock.com>

src/renderer/src/pages/home/Chat.tsx

@@ -233,6 +233,7 @@ const Chat: FC<Props> = (props) => {
                     ) : (
                       <AgentSessionMessages agentId={activeAgentId} sessionId={activeSessionId} />
                     )}
+                    {messageNavigation === 'buttons' && <ChatNavigation containerId="messages" />}
                     <AgentSessionInputbar agentId={activeAgentId} sessionId={activeSessionId} />
                   </>
                 )}

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

@@ -2,13 +2,17 @@ import { loggerService } from '@logger'
 import ContextMenu from '@renderer/components/ContextMenu'
 import { useSession } from '@renderer/hooks/agents/useSession'
 import { useTopicMessages } from '@renderer/hooks/useMessageOperations'
+import useScrollPosition from '@renderer/hooks/useScrollPosition'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { getGroupedMessages } from '@renderer/services/MessagesService'
 import { type Topic, TopicType } from '@renderer/types'
 import { buildAgentSessionTopicId } from '@renderer/utils/agentSession'
 import { Spin } from 'antd'
-import { memo, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import styled from 'styled-components'
 
+import MessageAnchorLine from './MessageAnchorLine'
 import MessageGroup from './MessageGroup'
 import NarrowLayout from './NarrowLayout'
 import PermissionModeDisplay from './PermissionModeDisplay'
@@ -26,6 +30,10 @@ const AgentSessionMessages: React.FC<Props> = ({ agentId, sessionId }) => {
   const sessionTopicId = useMemo(() => buildAgentSessionTopicId(sessionId), [sessionId])
   // Use the same hook as Messages.tsx for consistent behavior
   const messages = useTopicMessages(sessionTopicId)
+  const { messageNavigation } = useSettings()
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+  const { handleScroll: handleScrollPosition } = useScrollPosition(`agent-session-${sessionId}`)
 
   const displayMessages = useMemo(() => {
     if (!messages || messages.length === 0) return []
@@ -60,8 +68,31 @@ const AgentSessionMessages: React.FC<Props> = ({ agentId, sessionId }) => {
     messageCount: messages.length
   })
 
+  // Scroll to bottom function
+  const scrollToBottom = useCallback(() => {
+    if (scrollContainerRef.current) {
+      requestAnimationFrame(() => {
+        if (scrollContainerRef.current) {
+          scrollContainerRef.current.scrollTo({ top: 0 })
+        }
+      })
+    }
+  }, [scrollContainerRef])
+
+  // Listen for send message events to auto-scroll to bottom
+  useEffect(() => {
+    const unsubscribes = [
+      EventEmitter.on(EVENT_NAMES.SEND_MESSAGE, scrollToBottom)
+    ]
+    return () => unsubscribes.forEach((unsub) => unsub())
+  }, [scrollToBottom])
+
   return (
-    <MessagesContainer id="messages" className="messages-container">
+    <MessagesContainer
+      id="messages"
+      className="messages-container"
+      ref={scrollContainerRef}
+      onScroll={handleScrollPosition}>
       <NarrowLayout style={{ display: 'flex', flexDirection: 'column-reverse' }}>
         <ContextMenu>
           <ScrollContainer>
@@ -79,6 +110,7 @@ const AgentSessionMessages: React.FC<Props> = ({ agentId, sessionId }) => {
           </ScrollContainer>
         </ContextMenu>
       </NarrowLayout>
+      {messageNavigation === 'anchor' && <MessageAnchorLine messages={displayMessages} />}
     </MessagesContainer>
   )
 }