@messenger-box/platform-mobile 10.0.3-alpha.34 → 10.0.3-alpha.37

package/src/screens/inbox/components/ServiceDialogsListItem.tsx

@@ -24,7 +24,6 @@ import {
 } from 'common/graphql';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
-import { serviceDialogsListItemXstate, Actions, BaseState } from './workflow/service-dialogs-list-item-xstate';
 
 // Helper function to safely create a Date object
 const safeDate = (dateValue) => {
@@ -68,292 +67,153 @@ export interface IDialogListItemProps {
     role: any;
 }
 
-// Create a safer version of useMachine to handle potential errors
-function useSafeMachine(machine) {
-    // Define the state type
-    interface SafeStateType {
-        context: {
-            channelId: string | null;
-            currentUser: any;
-            threadMessages: any[];
-            loading: boolean;
-            error: string | null;
-            title: string;
-            role: string;
-            servicePostParentId: string | null;
-            lastMessage: any;
-        };
-        value: string;
-        matches?: (stateValue: string) => boolean;
-    }
-
-    // Initialize state with default values to prevent undefined errors
-    const [state, setState] = useState<SafeStateType>({
-        context: {
-            channelId: null,
-            currentUser: null,
-            threadMessages: [],
-            loading: false,
-            error: null,
-            title: '',
-            role: '',
-            servicePostParentId: null,
-            lastMessage: null,
-        },
-        value: BaseState.Idle,
-        matches: (stateValue) => stateValue === BaseState.Idle,
-    });
-
-    // Implement a send function that updates state safely
-    const send = useCallback((event) => {
-        try {
-            // Handle specific events manually
-            if (event.type === Actions.INITIAL_CONTEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelId: event.data?.channelId || null,
-                        currentUser: event.data?.currentUser || null,
-                        role: event.data?.role || null,
-                        loading: true,
-                    },
-                    value: BaseState.FetchingThreadMessages,
-                }));
-            } else if (event.type === Actions.UPDATE_THREAD_MESSAGES) {
-                setState((prev) => {
-                    if (event.data?.threadMessages) {
-                        // Handling bulk messages (initial load)
-                        // If a direct last message was provided (from subscription), use it
-                        if (event.data?.directLastMessage) {
-                            console.log('Using direct last message from event:', {
-                                id: event.data.directLastMessage.id,
-                                message: event.data.directLastMessage.message?.substring(0, 20) + '...',
-                            });
-
-                            return {
-                                ...prev,
-                                context: {
-                                    ...prev.context,
-                                    threadMessages: event.data.threadMessages,
-                                    lastMessage: event.data.directLastMessage,
-                                    loading: false,
-                                },
-                            };
-                        }
+// Helper function to compute the last message from a list of messages
+const computeLastMessage = (threadMessages) => {
+    if (!threadMessages || !threadMessages.length) return null;
 
-                        return {
-                            ...prev,
-                            context: {
-                                ...prev.context,
-                                threadMessages: event.data.threadMessages,
-                                lastMessage: computeLastMessage(event.data.threadMessages),
-                                loading: false,
-                            },
-                        };
-                    } else if (event.data?.message) {
-                        // Handling single message (from subscription)
-                        const newMessage = event.data.message;
-                        const updatedMessages = [...prev.context.threadMessages, newMessage];
-
-                        // Use the new message directly as the last message
-                        // This ensures immediate update on subscription
-                        console.log('Setting new message as lastMessage from subscription:', {
-                            id: newMessage.id,
-                            message: newMessage.message?.substring(0, 20) + '...',
-                            date: newMessage.createdAt || newMessage.updatedAt,
-                        });
-
-                        return {
-                            ...prev,
-                            context: {
-                                ...prev.context,
-                                threadMessages: updatedMessages,
-                                lastMessage: newMessage, // Use the new message directly
-                                loading: false,
-                            },
-                        };
-                    }
-                    return prev;
-                });
-            } else if (event.type === Actions.SET_TITLE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        title: event.data?.title || '',
-                    },
-                }));
-            } else if (event.type === Actions.SET_SERVICE_POST_PARENT_ID) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        servicePostParentId: event.data?.servicePostParentId || null,
-                    },
-                }));
-            } else if (event.type === Actions.START_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                }));
-            } else if (event.type === Actions.STOP_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                    },
-                }));
-            }
-        } catch (error) {
-            console.error('Error sending event to state machine:', error);
-        }
-    }, []);
+    // Extract the post and replies from thread messages
+    let posts = [];
+    let replies = [];
 
-    // Helper function to compute the last message from a list of messages
-    const computeLastMessage = (threadMessages) => {
-        if (!threadMessages || !threadMessages.length) return null;
+    // Helper function to check if a message is an image or contains only image content
+    const isTextMessage = (msg) => {
+        if (!msg) return false;
 
-        // Extract the post and replies from thread messages
-        let posts = [];
-        let replies = [];
+        // If message is empty or only contains image-specific markers, ignore it
+        if (!msg.message || msg.message === '') return false;
 
-        // Helper function to check if a message is an image or contains only image content
-        const isTextMessage = (msg) => {
-            if (!msg) return false;
+        // Check if message looks like an image URL or reference
+        const isImageMessage =
+            msg.message.includes('<img') ||
+            msg.message.includes('[Image]') ||
+            msg.message.includes('![') ||
+            (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(msg.message) &&
+                (msg.message.includes('http') || msg.message.includes('/images/')));
+
+        // Return true only for text messages (not image messages)
+        return !isImageMessage;
+    };
 
-            // If message is empty or only contains image-specific markers, ignore it
-            if (!msg.message || msg.message === '') return false;
+    threadMessages.forEach((thread) => {
+        if (thread?.post && isTextMessage(thread.post)) {
+            posts.push(thread.post);
+        }
+        if (thread?.replies?.length) {
+            replies = [...replies, ...thread.replies.filter((r) => isTextMessage(r))];
+        }
+    });
 
-            // Check if message looks like an image URL or reference
-            const isImageMessage =
-                msg.message.includes('<img') ||
-                msg.message.includes('[Image]') ||
-                msg.message.includes('![') ||
-                (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(msg.message) &&
-                    (msg.message.includes('http') || msg.message.includes('/images/')));
-
-            // Return true only for text messages (not image messages)
-            return !isImageMessage;
-        };
+    // Combine and sort all messages
+    const allMessages = [...posts, ...replies];
+    if (!allMessages.length) return null;
 
-        threadMessages.forEach((thread) => {
-            if (thread?.post && isTextMessage(thread.post)) {
-                posts.push(thread.post);
-            }
-            if (thread?.replies?.length) {
-                replies = [...replies, ...thread.replies.filter((r) => isTextMessage(r))];
-            }
-        });
+    // Return the most recent message - use safe date comparison
+    return allMessages.reduce((a, b) => {
+        const dateA = safeDate(a?.createdAt);
+        const dateB = safeDate(b?.createdAt);
 
-        // Combine and sort all messages
-        const allMessages = [...posts, ...replies];
-        if (!allMessages.length) return null;
+        // If either date is invalid, prefer the message with valid date
+        if (!dateA) return b;
+        if (!dateB) return a;
 
-        // Return the most recent message - use safe date comparison
-        return allMessages.reduce((a, b) => {
-            const dateA = safeDate(a?.createdAt);
-            const dateB = safeDate(b?.createdAt);
+        return dateA > dateB ? a : b;
+    }, allMessages[0]);
+};
 
-            // If either date is invalid, prefer the message with valid date
-            if (!dateA) return b;
-            if (!dateB) return a;
+const ServiceChannelWithLastMessage = React.memo(
+    ({ channel, lastMessage, subscribeToNewMessages, subscribeToChatMessages }: any) => {
+        React.useEffect(() => {
+            console.log(`Setting up subscriptions for channel ${channel?.id}`);
+            // Subscribe and store the unsubscribe functions
+            let threadUnsubscribe;
+            let chatUnsubscribe;
 
-            return dateA > dateB ? a : b;
-        }, allMessages[0]);
-    };
+            try {
+                threadUnsubscribe = subscribeToNewMessages();
+                chatUnsubscribe = subscribeToChatMessages();
+            } catch (error) {
+                console.error(`Error setting up subscriptions for channel ${channel?.id}:`, error);
+            }
 
-    // Add a matches function that works with the current state value
-    const stateWithMatches = useMemo(() => {
-        return {
-            ...state,
-            matches: (stateValue) => {
-                try {
-                    return state.value === stateValue;
-                } catch (error) {
-                    console.error(`Error in matches function:`, error);
-                    return false;
+            return () => {
+                // Cleanup subscriptions on unmount
+                if (threadUnsubscribe && typeof threadUnsubscribe === 'function') {
+                    try {
+                        console.log(`Cleaning up thread subscription for channel ${channel?.id}`);
+                        threadUnsubscribe();
+                    } catch (error) {
+                        console.error(`Error cleaning up thread subscription for channel ${channel?.id}:`, error);
+                    }
                 }
-            },
-        };
-    }, [state]);
 
-    // Return as a tuple to match useMachine API
-    return [stateWithMatches, send] as const;
-}
-
-const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscribeToNewMessages }: any) => {
-    React.useEffect(() => {
-        // Subscribe and store the unsubscribe function
-        const unsubscribe = subscribeToNewMessages();
-        return () => {
-            // Cleanup subscription on unmount
-            if (unsubscribe && typeof unsubscribe === 'function') {
-                unsubscribe();
-            }
-        };
-    }, [subscribeToNewMessages]);
-
-    // Debug output for component rendering
-    React.useEffect(() => {
-        console.log(`ServiceChannelWithLastMessage rendered for channel ${channel?.id}:`, {
-            hasLastMessage: !!lastMessage,
-            messageId: lastMessage?.id,
-            messageText: lastMessage?.message?.substring(0, 20) + (lastMessage?.message?.length > 20 ? '...' : ''),
-            date: lastMessage?.createdAt ? safeDate(lastMessage.createdAt)?.toISOString() : 'none',
-        });
-    }, [lastMessage, channel?.id]);
+                if (chatUnsubscribe && typeof chatUnsubscribe === 'function') {
+                    try {
+                        console.log(`Cleaning up chat subscription for channel ${channel?.id}`);
+                        chatUnsubscribe();
+                    } catch (error) {
+                        console.error(`Error cleaning up chat subscription for channel ${channel?.id}:`, error);
+                    }
+                }
+            };
+        }, [subscribeToNewMessages, subscribeToChatMessages, channel?.id]);
+
+        // Debug output for component rendering
+        React.useEffect(() => {
+            console.log(`ServiceChannelWithLastMessage rendered for channel ${channel?.id}:`, {
+                hasLastMessage: !!lastMessage,
+                messageId: lastMessage?.id,
+                messageText: lastMessage?.message?.substring(0, 20) + (lastMessage?.message?.length > 20 ? '...' : ''),
+                date: lastMessage?.createdAt ? safeDate(lastMessage.createdAt)?.toISOString() : 'none',
+            });
+        }, [lastMessage, channel?.id]);
 
-    const count = 30;
-    const title = channel?.title.slice(0, count) + (channel?.title.length > count ? '...' : '');
+        const count = 30;
+        const title = channel?.title.slice(0, count) + (channel?.title.length > count ? '...' : '');
 
-    // Define message display text
-    let displayMessage = 'No messages yet';
+        // Define message display text
+        let displayMessage = 'No messages yet';
 
-    if (lastMessage) {
-        // Check for file attachments
-        const hasFileAttachments = lastMessage.files?.data?.length > 0;
+        if (lastMessage) {
+            // Check for file attachments
+            const hasFileAttachments = lastMessage.files?.data?.length > 0;
 
-        // Check if the message appears to be an image
-        const isImageMessage =
-            lastMessage.message?.includes('<img') ||
-            lastMessage.message?.includes('[Image]') ||
-            lastMessage.message?.includes('![') ||
-            (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(lastMessage.message || '') &&
-                ((lastMessage.message || '').includes('http') || (lastMessage.message || '').includes('/images/')));
-
-        if (hasFileAttachments) {
-            displayMessage = '📎 File attachment';
-        } else if (isImageMessage) {
-            displayMessage = '[Image]';
-        } else if (lastMessage.message && lastMessage.message.trim() !== '') {
-            displayMessage = lastMessage.message;
-        } else {
-            displayMessage = '(Empty message)';
+            // Check if the message appears to be an image
+            const isImageMessage =
+                lastMessage.message?.includes('<img') ||
+                lastMessage.message?.includes('[Image]') ||
+                lastMessage.message?.includes('![') ||
+                (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(lastMessage.message || '') &&
+                    ((lastMessage.message || '').includes('http') || (lastMessage.message || '').includes('/images/')));
+
+            if (hasFileAttachments) {
+                displayMessage = '📎 File attachment';
+            } else if (isImageMessage) {
+                displayMessage = '[Image]';
+            } else if (lastMessage.message && lastMessage.message.trim() !== '') {
+                displayMessage = lastMessage.message;
+            } else {
+                displayMessage = '(Empty message)';
+            }
         }
-    }
 
-    return (
-        <HStack space={'sm'} className="flex-1 justify-between">
-            <Box className="flex-[0.8]">
-                <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
-                    {title}
-                </Text>
-                <Text color={colors.gray[600]} numberOfLines={1}>
-                    {displayMessage}
-                </Text>
-            </Box>
-
-            <Box className="flex-[0.2]">
-                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-});
+        return (
+            <HStack space={'sm'} className="flex-1 justify-between">
+                <Box className="flex-[0.8]">
+                    <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
+                        {title}
+                    </Text>
+                    <Text color={colors.gray[600]} numberOfLines={1}>
+                        {displayMessage}
+                    </Text>
+                </Box>
+
+                <Box className="flex-[0.2]">
+                    <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+                </Box>
+            </HStack>
+        );
+    },
+);
 
 /**
  * TODO:
@@ -371,35 +231,11 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
 }) {
     // Create a ref to track if component is mounted
     const isMountedRef = useRef(true);
-    // Define safe access functions
-    const [state, send] = useSafeMachine(serviceDialogsListItemXstate);
-
-    const safeContextProperty = useCallback(
-        (property, defaultValue = null) => {
-            try {
-                return state?.context?.[property] ?? defaultValue;
-            } catch (error) {
-                console.error(`Error accessing state.context.${property}:`, error);
-                return defaultValue;
-            }
-        },
-        [state],
-    );
-
-    const safeSend = useCallback(
-        (event) => {
-            try {
-                send(event);
-            } catch (error) {
-                console.error('Error sending event to state machine:', error, event);
-            }
-        },
-        [send],
-    );
+    const [subscriptionsTimestamp, setSubscriptionsTimestamp] = useState(Date.now());
 
     // Query for thread messages
     const {
-        data: threadMessages,
+        data: threadMessagesData,
         loading: threadMessageLoading,
         error,
         refetch: refetchThreadMessages,
@@ -422,66 +258,28 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
         },
     });
 
-    // Update state when channel or currentUser changes
-    React.useEffect(() => {
-        if (channel?.id) {
-            safeSend({
-                type: Actions.INITIAL_CONTEXT,
-                data: {
-                    channelId: channel?.id?.toString(),
-                    currentUser,
-                    role,
-                },
-            });
+    // Extract threadMessages data for easier access
+    const threadMessages = threadMessagesData?.threadMessages?.data || [];
 
-            safeSend({
-                type: Actions.SET_TITLE,
-                data: {
-                    title: channel?.title || '',
-                },
-            });
-        }
+    // Calculate lastMessage directly from threadMessages
+    const lastMessage = useMemo(() => {
+        return computeLastMessage(threadMessages);
+    }, [threadMessages]);
 
+    // Calculate servicePostParentId based on lastMessage
+    const servicePostParentId = useMemo(() => {
+        if (!lastMessage) return null;
+        return lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+    }, [lastMessage]);
+
+    // Handle component unmount
+    React.useEffect(() => {
         return () => {
             isMountedRef.current = false;
         };
-    }, [channel?.id, currentUser, role, safeSend]);
-
-    // Update state when thread messages are loaded or refreshed
-    React.useEffect(() => {
-        if (threadMessages && isMountedRef.current) {
-            console.log(
-                `Updating thread messages for channel ${channel?.id}, count:`,
-                threadMessages?.threadMessages?.data?.length || 0,
-            );
-
-            safeSend({
-                type: Actions.UPDATE_THREAD_MESSAGES,
-                data: {
-                    threadMessages: threadMessages?.threadMessages?.data || [],
-                },
-            });
-        }
-    }, [threadMessages, refreshing, channel?.id, safeSend]);
-
-    // Use computed values from state
-    const lastMessage = safeContextProperty('lastMessage', null);
-    const servicePostParentId = safeContextProperty('servicePostParentId', null);
-
-    // Update servicePostParentId when lastMessage changes
-    React.useEffect(() => {
-        if (lastMessage) {
-            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
-            safeSend({
-                type: Actions.SET_SERVICE_POST_PARENT_ID,
-                data: {
-                    servicePostParentId: sParentId,
-                },
-            });
-        }
-    }, [lastMessage, safeSend]);
+    }, []);
 
-    const creatorAndMembersId = React.useMemo(() => {
+    const creatorAndMembersId = useMemo(() => {
         if (!channel?.members) return null;
         const membersIds: any =
             channel?.members
@@ -492,7 +290,7 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
         return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
     }, [channel, currentUser]);
 
-    const postParentId = React.useMemo(() => {
+    const postParentId = useMemo(() => {
         if (!creatorAndMembersId?.length) return null;
 
         return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
@@ -506,76 +304,40 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
     const refreshThreadState = useCallback(() => {
         if (channel?.id && isMountedRef.current) {
             console.log('Forcing thread state refresh for channel:', channel?.id);
-            // First ensure we're in a loading state to trigger UI updates
-            safeSend({ type: Actions.START_LOADING });
 
             // Refetch messages from server
             refetchThreadMessages({
                 channelId: channel?.id?.toString(),
                 role,
                 limit: 2,
-            })
-                .then((result) => {
-                    // Update the state with fresh data
-                    if (result.data?.threadMessages?.data && isMountedRef.current) {
-                        console.log(
-                            `Refreshed ${result.data.threadMessages.data.length} thread messages for channel ${channel?.id}`,
-                        );
-
-                        safeSend({
-                            type: Actions.UPDATE_THREAD_MESSAGES,
-                            data: { threadMessages: result.data.threadMessages.data },
-                        });
-                    }
-                    safeSend({ type: Actions.STOP_LOADING });
-                })
-                .catch((err) => {
-                    console.error('Error refreshing thread state:', err);
-                    safeSend({ type: Actions.STOP_LOADING });
-                });
+            }).catch((err) => {
+                console.error('Error refreshing thread state:', err);
+            });
         }
-    }, [channel?.id, refetchThreadMessages, safeSend, isMountedRef, role]);
+    }, [channel?.id, refetchThreadMessages, isMountedRef, role]);
 
-    // Refetch messages when screen is focused or refreshing
+    // Reset subscriptions when the component gains focus
     useFocusEffect(
         React.useCallback(() => {
+            // Force subscription refresh
+            setSubscriptionsTimestamp(Date.now());
+
+            // Existing focus effect logic...
             if (!channel?.id) return;
 
             console.log('ServiceDialogsListItem focused for channel:', channel?.id);
 
-            // Show loading state
-            safeSend({ type: Actions.START_LOADING });
-
             // Use a direct refetch with network-only policy to force fresh data
             const fetchFreshData = async () => {
                 try {
                     // Force a network-only fetch
-                    const result = await refetchThreadMessages({
+                    await refetchThreadMessages({
                         channelId: channel?.id?.toString(),
                         role,
                         limit: 2,
                     });
-
-                    // Log the refreshed data
-                    console.log(
-                        `FOCUS EFFECT: Refetched ${
-                            result?.data?.threadMessages?.data?.length || 0
-                        } messages for channel ${channel?.id}`,
-                    );
-
-                    if (result?.data?.threadMessages?.data && isMountedRef.current) {
-                        // Update state with fresh data
-                        safeSend({
-                            type: Actions.UPDATE_THREAD_MESSAGES,
-                            data: { threadMessages: result.data.threadMessages.data },
-                        });
-                    }
                 } catch (error) {
                     console.error('Error refetching thread messages on focus:', error);
-                } finally {
-                    if (isMountedRef.current) {
-                        safeSend({ type: Actions.STOP_LOADING });
-                    }
                 }
             };
 
@@ -585,12 +347,13 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
             return () => {
                 // Cleanup function when unfocused
             };
-        }, [refreshing, channel?.id, refetchThreadMessages, safeSend, role, isMountedRef]),
+        }, [refreshing, channel?.id, refetchThreadMessages, role]),
     );
 
     return (
         <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
+            // onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
+            onPress={() => onOpen(channel?.id, channel?.title, postParentId)}
             className="flex-1  rounded-md border-gray-200 dark:border-gray-600 dark:bg-gray-700"
             style={{ borderBottomWidth: 1, borderColor: '#e5e7eb', marginVertical: 0 }}
         >
@@ -613,6 +376,7 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                 </Box>
                 <Box className="flex-1">
                     <ServiceChannelWithLastMessage
+                        key={`channel-${channel?.id}-${subscriptionsTimestamp}`}
                         channel={channel}
                         lastMessage={lastMessage}
                         subscribeToNewMessages={() =>
@@ -620,52 +384,167 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                                 document: THREAD_CHAT_ADDED,
                                 variables: {
                                     channelId: channel?.id?.toString(),
-                                    postParentId: postParentId ? servicePostParentId : null,
+                                    postParentId: postParentId || servicePostParentId || null,
                                 },
                                 updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-
-                                    const newPostThreadData: any = subscriptionData?.data?.threadCreatedUpdated?.data;
-                                    const newMessage: any = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
-
-                                    console.log('New thread message subscription update:', {
-                                        channelId: channel?.id,
-                                        threadId: newPostThreadData?.id,
-                                        hasMessage: !!newMessage,
-                                        message: newMessage?.message?.substring(0, 20) + '...',
-                                    });
-
-                                    const data =
-                                        prev?.threadMessages?.data?.map((t: any) =>
-                                            t.id === newPostThreadData?.id
-                                                ? {
-                                                      ...t,
-                                                      replies: [...t?.replies, newMessage],
-                                                      replyCount: newPostThreadData?.replyCount,
-                                                      lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                      updatedAt: newPostThreadData?.updatedAt,
-                                                  }
-                                                : t,
-                                        ) ?? [];
-
-                                    // Use the safe state update function
-                                    if (isMountedRef.current) {
-                                        safeSend({
-                                            type: Actions.UPDATE_THREAD_MESSAGES,
-                                            data: {
-                                                threadMessages: data?.length > 0 ? data : [newPostThreadData],
-                                                directLastMessage: newMessage, // Directly set the new message
-                                            },
+                                    if (!subscriptionData?.data) {
+                                        console.log(`No subscription data for channel ${channel?.id}`);
+                                        return prev;
+                                    }
+
+                                    try {
+                                        const newPostThreadData: any =
+                                            subscriptionData?.data?.threadCreatedUpdated?.data;
+                                        const newMessage: any =
+                                            subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+
+                                        if (!newPostThreadData || !newMessage) {
+                                            console.log(`Missing data in subscription for channel ${channel?.id}`);
+                                            return prev;
+                                        }
+
+                                        console.log('New thread message subscription update:', {
+                                            channelId: channel?.id,
+                                            threadId: newPostThreadData?.id,
+                                            hasMessage: !!newMessage,
+                                            message: newMessage?.message?.substring(0, 20) + '...',
                                         });
+
+                                        // Create a safe copy of the previous data
+                                        const prevThreads = prev?.threadMessages?.data || [];
+
+                                        // Check if this thread already exists
+                                        const threadExists = prevThreads.some(
+                                            (t: any) => t.id === newPostThreadData?.id,
+                                        );
+
+                                        let updatedThreads;
+                                        if (threadExists) {
+                                            // Update existing thread
+                                            updatedThreads = prevThreads.map((t: any) =>
+                                                t.id === newPostThreadData?.id
+                                                    ? {
+                                                          ...t,
+                                                          replies: [...(t?.replies || []), newMessage],
+                                                          replyCount: newPostThreadData?.replyCount,
+                                                          lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                          updatedAt: newPostThreadData?.updatedAt,
+                                                      }
+                                                    : t,
+                                            );
+                                        } else {
+                                            // Add new thread
+                                            updatedThreads = [...prevThreads, newPostThreadData];
+                                        }
+
+                                        return {
+                                            ...prev,
+                                            threadMessages: {
+                                                ...prev?.threadMessages,
+                                                totalCount:
+                                                    newPostThreadData?.totalCount ??
+                                                    prev?.threadMessages?.totalCount ??
+                                                    0,
+                                                data: updatedThreads,
+                                            },
+                                        };
+                                    } catch (error) {
+                                        console.error(
+                                            `Error processing subscription data for channel ${channel?.id}:`,
+                                            error,
+                                        );
+                                        return prev;
+                                    }
+                                },
+                                onError: (error) => {
+                                    console.error(`Thread subscription error for channel ${channel?.id}:`, error);
+                                },
+                            })
+                        }
+                        subscribeToChatMessages={() =>
+                            subscribeToMore({
+                                document: CHAT_MESSAGE_ADDED,
+                                variables: {
+                                    channelId: channel?.id?.toString(),
+                                    postParentId: postParentId || servicePostParentId || null,
+                                },
+                                updateQuery: (prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData?.data) {
+                                        console.log(`No chat message subscription data for channel ${channel?.id}`);
+                                        return prev;
                                     }
 
-                                    return Object.assign({}, prev, {
-                                        threadMessages: {
-                                            ...prev?.threadMessages,
-                                            totalCount: newPostThreadData?.totalCount ?? 0,
-                                            data: data?.length > 0 ? data : [newPostThreadData],
-                                        },
-                                    });
+                                    try {
+                                        const newMessage = subscriptionData?.data?.chatMessageAdded;
+
+                                        if (!newMessage) {
+                                            console.log(
+                                                `Missing chat message data in subscription for channel ${channel?.id}`,
+                                            );
+                                            return prev;
+                                        }
+
+                                        console.log('New chat message subscription update:', {
+                                            channelId: channel?.id,
+                                            messageId: newMessage?.id,
+                                            message: newMessage?.message?.substring(0, 20) + '...',
+                                        });
+
+                                        // Find the thread this message belongs to
+                                        const prevThreads = prev?.threadMessages?.data || [];
+                                        const threadIndex = prevThreads.findIndex((t: any) => {
+                                            // Check if this message belongs to this thread
+                                            if (newMessage.parentId && t.post?.id === newMessage.parentId) {
+                                                return true;
+                                            }
+                                            // Check replies
+                                            if (t.replies && t.replies.some((r: any) => r.id === newMessage.parentId)) {
+                                                return true;
+                                            }
+                                            return false;
+                                        });
+
+                                        if (threadIndex === -1) {
+                                            console.log(
+                                                `Cannot find thread for chat message in channel ${channel?.id}`,
+                                            );
+                                            return prev;
+                                        }
+
+                                        // Update the thread with the new message
+                                        const updatedThreads = [...prevThreads];
+                                        const thread = { ...updatedThreads[threadIndex] };
+
+                                        // Add message to replies
+                                        thread.replies = [...(thread.replies || []), newMessage];
+
+                                        // Fix for arithmetic operation type error
+                                        const currentReplyCount =
+                                            typeof thread.replyCount === 'number' ? thread.replyCount : 0;
+                                        thread.replyCount = currentReplyCount + 1;
+
+                                        thread.lastReplyAt = newMessage.createdAt;
+                                        thread.updatedAt = newMessage.createdAt;
+
+                                        updatedThreads[threadIndex] = thread;
+
+                                        return {
+                                            ...prev,
+                                            threadMessages: {
+                                                ...prev?.threadMessages,
+                                                data: updatedThreads,
+                                            },
+                                        };
+                                    } catch (error) {
+                                        console.error(
+                                            `Error processing chat message subscription for channel ${channel?.id}:`,
+                                            error,
+                                        );
+                                        return prev;
+                                    }
+                                },
+                                onError: (error) => {
+                                    console.error(`Chat message subscription error for channel ${channel?.id}:`, error);
                                 },
                             })
                         }