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/components/AgentChatThreadInitializationEffect.tsx

@@ -0,0 +1,103 @@
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+import { CHAT_THREADS_PAGE_SIZE } from '@/ai/constants/ChatThreads';
+import {
+  AGENT_CHAT_NEW_THREAD_DRAFT_KEY,
+  agentChatDraftsByThreadIdState,
+} from '@/ai/states/agentChatDraftsByThreadIdState';
+import { agentChatInputState } from '@/ai/states/agentChatInputState';
+import { agentChatThreadsLoadingState } from '@/ai/states/agentChatThreadsLoadingState';
+import { agentChatUsageState } from '@/ai/states/agentChatUsageState';
+import { currentAIChatThreadState } from '@/ai/states/currentAIChatThreadState';
+import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';
+import { hasTriggeredCreateForDraftState } from '@/ai/states/hasTriggeredCreateForDraftState';
+import { useQueryWithCallbacks } from '@/apollo/hooks/useQueryWithCallbacks';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
+import {
+  type GetChatThreadsQuery,
+  GetChatThreadsDocument,
+} from '~/generated-metadata/graphql';
+
+export const AgentChatThreadInitializationEffect = () => {
+  const currentAIChatThread = useAtomStateValue(currentAIChatThreadState);
+  const setCurrentAIChatThread = useSetAtomState(currentAIChatThreadState);
+  const setAgentChatInput = useSetAtomState(agentChatInputState);
+  const setAgentChatUsage = useSetAtomState(agentChatUsageState);
+  const setCurrentAIChatThreadTitle = useSetAtomState(
+    currentAIChatThreadTitleState,
+  );
+  const setAgentChatThreadsLoading = useSetAtomState(
+    agentChatThreadsLoadingState,
+  );
+  const store = useStore();
+
+  const handleFirstLoad = useCallback(
+    (data: GetChatThreadsQuery) => {
+      const threads = data.chatThreads.edges.map((edge) => edge.node);
+
+      if (threads.length > 0) {
+        const firstThread = threads[0];
+        const draftForThread =
+          store.get(agentChatDraftsByThreadIdState.atom)[firstThread.id] ?? '';
+
+        setCurrentAIChatThread(firstThread.id);
+        setAgentChatInput(draftForThread);
+        setCurrentAIChatThreadTitle(firstThread.title ?? null);
+
+        const hasUsageData =
+          (firstThread.conversationSize ?? 0) > 0 &&
+          isDefined(firstThread.contextWindowTokens);
+
+        setAgentChatUsage(
+          hasUsageData
+            ? {
+                lastMessage: null,
+                conversationSize: firstThread.conversationSize ?? 0,
+                contextWindowTokens: firstThread.contextWindowTokens ?? 0,
+                inputTokens: firstThread.totalInputTokens,
+                outputTokens: firstThread.totalOutputTokens,
+                inputCredits: firstThread.totalInputCredits,
+                outputCredits: firstThread.totalOutputCredits,
+              }
+            : null,
+        );
+      } else {
+        store.set(hasTriggeredCreateForDraftState.atom, false);
+        setCurrentAIChatThread(AGENT_CHAT_NEW_THREAD_DRAFT_KEY);
+        setAgentChatInput(
+          store.get(agentChatDraftsByThreadIdState.atom)[
+            AGENT_CHAT_NEW_THREAD_DRAFT_KEY
+          ] ?? '',
+        );
+        setCurrentAIChatThreadTitle(null);
+        setAgentChatUsage(null);
+      }
+    },
+    [
+      setCurrentAIChatThread,
+      setAgentChatInput,
+      setCurrentAIChatThreadTitle,
+      setAgentChatUsage,
+      store,
+    ],
+  );
+
+  const handleLoadingChange = useCallback(
+    (loading: boolean) => {
+      setAgentChatThreadsLoading(loading);
+    },
+    [setAgentChatThreadsLoading],
+  );
+
+  useQueryWithCallbacks(GetChatThreadsDocument, {
+    variables: { paging: { first: CHAT_THREADS_PAGE_SIZE } },
+    skip: isDefined(currentAIChatThread),
+    onFirstLoad: handleFirstLoad,
+    onLoadingChange: handleLoadingChange,
+  });
+
+  return null;
+};