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>

packages/twenty-front/src/modules/ai/utils/dispatchAgentChatEnsureThreadForDraftEvent.ts

@@ -0,0 +1,7 @@
+import { AGENT_CHAT_ENSURE_THREAD_FOR_DRAFT_EVENT_NAME } from '@/ai/constants/AgentChatEnsureThreadForDraftEventName';
+
+export const dispatchAgentChatEnsureThreadForDraftEvent = () => {
+  window.dispatchEvent(
+    new CustomEvent(AGENT_CHAT_ENSURE_THREAD_FOR_DRAFT_EVENT_NAME),
+  );
+};

packages/twenty-front/src/modules/ai/utils/mergeAgentChatFetchedAndStreamingMessages.ts

@@ -0,0 +1,16 @@
+import { type ExtendedUIMessage } from 'twenty-shared/ai';
+
+export const mergeAgentChatFetchedAndStreamingMessages = (
+  fetchedMessages: ExtendedUIMessage[],
+  streamingMessages: ExtendedUIMessage[],
+): ExtendedUIMessage[] => {
+  const fetchedMessageIds = new Set(
+    fetchedMessages.map((message) => message.id),
+  );
+
+  const streamingOnlyMessages = streamingMessages.filter(
+    (message) => !fetchedMessageIds.has(message.id),
+  );
+
+  return [...fetchedMessages, ...streamingOnlyMessages];
+};

packages/twenty-front/src/modules/ai/utils/scrollAIChatToBottom.ts

@@ -0,0 +1,11 @@
+import { AI_CHAT_SCROLL_WRAPPER_ID } from '@/ai/constants/AiChatScrollWrapperId';
+
+export const scrollAIChatToBottom = () => {
+  const scrollWrapperElement = document.getElementById(
+    `scroll-wrapper-${AI_CHAT_SCROLL_WRAPPER_ID}`,
+  );
+
+  if (scrollWrapperElement) {
+    scrollWrapperElement.scrollTop = scrollWrapperElement.scrollHeight;
+  }
+};