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/ui/utilities/state/jotai/utils/createAtomComponentFamilySelector.ts

@@ -1,4 +1,5 @@
 import { atom, type Atom } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 
 import { type ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
@@ -12,12 +13,14 @@ export const createAtomComponentFamilySelector = <ValueType, FamilyKey>({
   key,
   get,
   componentInstanceContext,
+  areEqual,
 }: {
   key: string;
   get: (
     key: ComponentFamilyStateKey<FamilyKey>,
   ) => (callbacks: SelectorGetter) => ValueType;
   componentInstanceContext: ComponentInstanceStateContext<any> | null;
+  areEqual?: (previous: ValueType, next: ValueType) => boolean;
 }): ComponentFamilySelector<ValueType, FamilyKey> => {
   if (isDefined(componentInstanceContext)) {
     globalComponentInstanceContextMap.set(key, componentInstanceContext);
@@ -47,10 +50,14 @@ export const createAtomComponentFamilySelector = <ValueType, FamilyKey>({
       return getForKey({ get: getHelper });
     });
 
-    derivedAtom.debugLabel = `${key}__${cacheKey}`;
-    atomCache.set(cacheKey, derivedAtom);
+    const finalAtom = isDefined(areEqual)
+      ? selectAtom(derivedAtom, (value) => value, areEqual)
+      : derivedAtom;
 
-    return derivedAtom;
+    finalAtom.debugLabel = `${key}__${cacheKey}`;
+    atomCache.set(cacheKey, finalAtom);
+
+    return finalAtom;
   };
 
   return {

packages/twenty-front/src/modules/ui/utilities/state/jotai/utils/createAtomComponentSelector.ts

@@ -1,4 +1,5 @@
 import { atom, type Atom } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 
 import { type ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
 import { type ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
@@ -12,10 +13,12 @@ export const createAtomComponentSelector = <ValueType>({
   key,
   get,
   componentInstanceContext,
+  areEqual,
 }: {
   key: string;
   get: (key: ComponentStateKey) => (callbacks: SelectorGetter) => ValueType;
   componentInstanceContext: ComponentInstanceStateContext<any> | null;
+  areEqual?: (previous: ValueType, next: ValueType) => boolean;
 }): ComponentSelector<ValueType> => {
   if (isDefined(componentInstanceContext)) {
     globalComponentInstanceContextMap.set(key, componentInstanceContext);
@@ -40,10 +43,14 @@ export const createAtomComponentSelector = <ValueType>({
       return getForKey({ get: getHelper });
     });
 
-    derivedAtom.debugLabel = `${key}__${componentStateKey.instanceId}`;
-    atomCache.set(componentStateKey.instanceId, derivedAtom);
+    const finalAtom = isDefined(areEqual)
+      ? selectAtom(derivedAtom, (value) => value, areEqual)
+      : derivedAtom;
 
-    return derivedAtom;
+    finalAtom.debugLabel = `${key}__${componentStateKey.instanceId}`;
+    atomCache.set(componentStateKey.instanceId, finalAtom);
+
+    return finalAtom;
   };
 
   return {

packages/twenty-front/src/modules/ui/utilities/state/jotai/utils/createAtomFamilySelector.ts

@@ -1,15 +1,19 @@
 import { atom, type Atom } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 
 import { type FamilySelector } from '@/ui/utilities/state/jotai/types/FamilySelector';
 import { type SelectorGetter } from '@/ui/utilities/state/jotai/types/SelectorCallbacks';
 import { buildGetHelper } from '@/ui/utilities/state/jotai/utils/buildGetHelper';
+import { isDefined } from 'twenty-shared/utils';
 
 export const createAtomFamilySelector = <ValueType, FamilyKey>({
   key,
   get,
+  areEqual,
 }: {
   key: string;
   get: (familyKey: FamilyKey) => (callbacks: SelectorGetter) => ValueType;
+  areEqual?: (previous: ValueType, next: ValueType) => boolean;
 }): FamilySelector<ValueType, FamilyKey> => {
   const atomCache = new Map<string, Atom<ValueType>>();
 
@@ -31,10 +35,14 @@ export const createAtomFamilySelector = <ValueType, FamilyKey>({
       return getForKey({ get: getHelper });
     });
 
-    derivedAtom.debugLabel = `${key}__${cacheKey}`;
-    atomCache.set(cacheKey, derivedAtom);
+    const finalAtom = isDefined(areEqual)
+      ? selectAtom(derivedAtom, (value) => value, areEqual)
+      : derivedAtom;
 
-    return derivedAtom;
+    finalAtom.debugLabel = `${key}__${cacheKey}`;
+    atomCache.set(cacheKey, finalAtom);
+
+    return finalAtom;
   };
 
   return {

packages/twenty-front/src/modules/ui/utilities/state/jotai/utils/createAtomSelector.ts

@@ -1,15 +1,19 @@
 import { atom } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 
 import { type SelectorGetter } from '@/ui/utilities/state/jotai/types/SelectorCallbacks';
 import { type Selector } from '@/ui/utilities/state/jotai/types/Selector';
 import { buildGetHelper } from '@/ui/utilities/state/jotai/utils/buildGetHelper';
+import { isDefined } from 'twenty-shared/utils';
 
 export const createAtomSelector = <ValueType>({
   key,
   get,
+  areEqual,
 }: {
   key: string;
   get: (callbacks: SelectorGetter) => ValueType;
+  areEqual?: (previous: ValueType, next: ValueType) => boolean;
 }): Selector<ValueType> => {
   const derivedAtom = atom((jotaiGet) => {
     const getHelper = buildGetHelper(jotaiGet);
@@ -17,11 +21,15 @@ export const createAtomSelector = <ValueType>({
     return get({ get: getHelper });
   });
 
-  derivedAtom.debugLabel = key;
+  const finalAtom = isDefined(areEqual)
+    ? selectAtom(derivedAtom, (value) => value, areEqual)
+    : derivedAtom;
+
+  finalAtom.debugLabel = key;
 
   return {
     type: 'Selector',
     key,
-    atom: derivedAtom,
+    atom: finalAtom,
   };
 };