Fix AI chat re-renders and refactored code (#18585)
This PR: - Breaks useAgentChatData into focused effect components (streaming, fetch, init, auto-scroll, diff sync) - Splits message list into non-last (stable) + last (streaming/error) to prevent full re-renders on each stream chunk - Adds scroll-to-bottom button and MutationObserver-based auto-scroll on thread switch - Lifts loading state from context to atoms - Adds areEqual to selector factories We could improve further but this sets up a robust architecture for further refactoring. ## Messages flow The flow of messages loading and streaming is now more solid. Everything goes out from `AgentChatAiSdkStreamEffect`, whether loaded from the DB or streaming directly, and every consumers is using only one atom `agentChatMessagesComponentFamilyState` ## Data sync effect with callbacks new hook See `packages/twenty-front/src/modules/apollo/hooks/useQueryWithCallbacks.ts` which allows to fix Apollo v4 migration leftovers and is an implementation of the pattern we talked about with @charlesBochet We could refine this pattern in another PR. # Before https://github.com/user-attachments/assets/84e7a96f-6790-405d-8a73-2dacbf783be5 # After https://github.com/user-attachments/assets/4c692e3a-2413-4513-abcc-44d0da311203 Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
import { useProcessUIToolCallMessage } from '@/ai/hooks/useProcessUIToolCallMessage';
|
||||
import { agentChatUISessionStartTimeState } from '@/ai/states/agentChatUISessionStartTimeState';
|
||||
import { isUIToolCallMessage } from '@/ai/utils/isUIToolCallMessage';
|
||||
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
|
||||
import { isNonEmptyString } from '@sniptt/guards';
|
||||
import { Temporal } from 'temporal-polyfill';
|
||||
import { type ExtendedUIMessage } from 'twenty-shared/ai';
|
||||
|
||||
export const useProcessStreamingMessageUpdate = () => {
|
||||
const agentChatUISessionStartTime = useAtomStateValue(
|
||||
agentChatUISessionStartTimeState,
|
||||
);
|
||||
|
||||
const { processUIToolCallMessage } = useProcessUIToolCallMessage();
|
||||
|
||||
const processStreamingMessageUpdate = (
|
||||
streamingMessage: ExtendedUIMessage,
|
||||
) => {
|
||||
if (agentChatUISessionStartTime === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const messageCreatedAt = streamingMessage.metadata?.createdAt;
|
||||
|
||||
if (isNonEmptyString(messageCreatedAt)) {
|
||||
const messageCreatedAtInstant = Temporal.Instant.from(messageCreatedAt);
|
||||
|
||||
const messageIsAfterChatSessionStart =
|
||||
messageCreatedAtInstant.epochNanoseconds >=
|
||||
agentChatUISessionStartTime.epochNanoseconds;
|
||||
|
||||
if (!messageIsAfterChatSessionStart) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const messageIsUIToolCall = isUIToolCallMessage(streamingMessage);
|
||||
|
||||
if (messageIsUIToolCall) {
|
||||
processUIToolCallMessage(streamingMessage);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
processStreamingMessageUpdate,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user