7242 error when displaying message threads with a large number of participants (#7251)

Closes #7242

packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts

@@ -6,6 +6,8 @@ import { EmailThread } from '@/activities/emails/types/EmailThread';
 import { EmailThreadMessage } from '@/activities/emails/types/EmailThreadMessage';
 
 import { MessageChannel } from '@/accounts/types/MessageChannel';
+import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+import { EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender';
 import { MessageChannelMessageAssociation } from '@/activities/emails/types/MessageChannelMessageAssociation';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@@ -13,6 +15,7 @@ import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { isDefined } from 'twenty-ui';
 
 export const useRightDrawerEmailThread = () => {
   const viewableRecordId = useRecoilValue(viewableRecordIdState);
@@ -74,6 +77,30 @@ export const useRightDrawerEmailThread = () => {
     }
   }, [messages, isMessagesFetchComplete]);
 
+  // TODO: introduce nested filters so we can retrieve the message sender directly from the message query
+  const { records: messageSenders } =
+    useFindManyRecords<EmailThreadMessageParticipant>({
+      filter: {
+        messageId: {
+          in: messages.map(({ id }) => id),
+        },
+        role: {
+          eq: 'from',
+        },
+      },
+      objectNameSingular: CoreObjectNameSingular.MessageParticipant,
+      recordGqlFields: {
+        id: true,
+        role: true,
+        displayName: true,
+        messageId: true,
+        handle: true,
+        person: true,
+        workspaceMember: true,
+      },
+      skip: messages.length === 0,
+    });
+
   const { records: messageChannelMessageAssociationData } =
     useFindManyRecords<MessageChannelMessageAssociation>({
       filter: {
@@ -123,9 +150,24 @@ export const useRightDrawerEmailThread = () => {
   const connectedAccountHandle =
     messageChannelData.length > 0 ? messageChannelData[0].handle : null;
 
+  const messagesWithSender: EmailThreadMessageWithSender[] = messages
+    .map((message) => {
+      const sender = messageSenders.find(
+        (messageSender) => messageSender.messageId === message.id,
+      );
+      if (!sender) {
+        return null;
+      }
+      return {
+        ...message,
+        sender,
+      };
+    })
+    .filter(isDefined);
+
   return {
     thread,
-    messages,
+    messages: messagesWithSender,
     messageThreadExternalId,
     connectedAccountHandle,
     threadLoading: messagesLoading,