Refactor message loading in useSession hook to use centralized thunk

- Replace manual message loading logic with loadTopicMessagesThunk for better caching
- Remove unused imports and local state management
- Simplify useEffect dependencies and loading flow
This commit is contained in:
suyao 2025-09-22 23:05:33 +08:00
parent 035001f841
commit a0cab3341e
No known key found for this signature in database

View File

@ -1,9 +1,8 @@
import { useAppDispatch, useAppSelector } from '@renderer/store'
import { upsertManyBlocks } from '@renderer/store/messageBlock'
import { newMessagesActions, selectMessagesForTopic } from '@renderer/store/newMessage'
import { AgentPersistedMessage, UpdateSessionForm } from '@renderer/types'
import { useAppDispatch } from '@renderer/store'
import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk'
import { UpdateSessionForm } from '@renderer/types'
import { buildAgentSessionTopicId } from '@renderer/utils/agentSession'
import { useCallback, useEffect, useMemo, useRef } from 'react'
import { useCallback, useEffect, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
@ -15,10 +14,6 @@ export const useSession = (agentId: string, sessionId: string) => {
const key = client.getSessionPaths(agentId).withId(sessionId)
const dispatch = useAppDispatch()
const sessionTopicId = useMemo(() => buildAgentSessionTopicId(sessionId), [sessionId])
const blockIdsRef = useRef<string[]>([])
// Check if messages are already in Redux
const messagesInRedux = useAppSelector((state) => selectMessagesForTopic(state, sessionTopicId))
const fetcher = async () => {
const data = await client.getSession(agentId, sessionId)
@ -26,50 +21,15 @@ export const useSession = (agentId: string, sessionId: string) => {
}
const { data, error, isLoading, mutate } = useSWR(key, fetcher)
// Use loadTopicMessagesThunk to load messages (with caching mechanism)
// This ensures messages are preserved when switching between sessions/tabs
useEffect(() => {
const messages = data?.messages ?? []
// Always reload messages to Redux when data is available
// This ensures messages are restored when switching back to a session
if (!messages.length) {
dispatch(newMessagesActions.messagesReceived({ topicId: sessionTopicId, messages: [] }))
blockIdsRef.current = []
return
if (sessionId) {
// loadTopicMessagesThunk will check if messages already exist in Redux
// and skip loading if they do (unless forceReload is true)
dispatch(loadTopicMessagesThunk(sessionTopicId))
}
const persistedEntries = messages
.map((entity) => entity.content as AgentPersistedMessage | undefined)
.filter((entry): entry is AgentPersistedMessage => Boolean(entry))
const allBlocks = persistedEntries.flatMap((entry) => entry.blocks)
if (allBlocks.length > 0) {
dispatch(upsertManyBlocks(allBlocks))
}
blockIdsRef.current = allBlocks.map((block) => block.id)
const messageRecords = persistedEntries.map((entry) => entry.message)
dispatch(newMessagesActions.messagesReceived({ topicId: sessionTopicId, messages: messageRecords }))
}, [data?.messages, dispatch, sessionTopicId])
// Also ensure messages are reloaded when component mounts if they're missing from Redux
useEffect(() => {
// If we have data but no messages in Redux, reload them
if (data?.messages && data.messages.length > 0 && messagesInRedux.length === 0) {
const messages = data.messages
const persistedEntries = messages
.map((entity) => entity.content as AgentPersistedMessage | undefined)
.filter((entry): entry is AgentPersistedMessage => Boolean(entry))
const allBlocks = persistedEntries.flatMap((entry) => entry.blocks)
if (allBlocks.length > 0) {
dispatch(upsertManyBlocks(allBlocks))
}
const messageRecords = persistedEntries.map((entry) => entry.message)
dispatch(newMessagesActions.messagesReceived({ topicId: sessionTopicId, messages: messageRecords }))
}
}, [data?.messages, dispatch, messagesInRedux.length, sessionTopicId])
}, [dispatch, sessionId, sessionTopicId])
const updateSession = useCallback(
async (form: UpdateSessionForm) => {