@messenger-box/platform-mobile 10.0.3-alpha.18 → 10.0.3-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.3-alpha.20](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.19...v10.0.3-alpha.20) (2025-04-12)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
+## [10.0.3-alpha.19](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.18...v10.0.3-alpha.19) (2025-04-10)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
 ## [10.0.3-alpha.18](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.17...v10.0.3-alpha.18) (2025-04-10)
 
 **Note:** Version bump only for package @messenger-box/platform-mobile

package/lib/screens/inbox/components/DialogsListItem.js

@@ -1,4 +1,4 @@
-import React__default,{useState,useMemo}from'react';import {Pressable,HStack,Box,AvatarGroup,Avatar,AvatarFallbackText,AvatarBadge,Text,AvatarImage}from'@admin-layout/gluestack-ui-mobile';import {isToday,isYesterday,format}from'date-fns';import {useFocusEffect}from'@react-navigation/native';import {useMessagesQuery,useOnChatMessageAddedSubscription,OnChatMessageAddedDocument}from'common/graphql';import {startCase}from'lodash-es';import colors from'tailwindcss/colors';var __defProp = Object.defineProperty;
+import React__default,{useRef,useCallback,useEffect,useMemo,useState}from'react';import {Pressable,HStack,Box,AvatarGroup,Avatar,AvatarFallbackText,AvatarBadge,Text,AvatarImage}from'@admin-layout/gluestack-ui-mobile';import {isToday,isYesterday,format}from'date-fns';import {useFocusEffect}from'@react-navigation/native';import {useMessagesQuery,useOnChatMessageAddedSubscription,OnChatMessageAddedDocument}from'common/graphql';import {startCase}from'lodash-es';import colors from'tailwindcss/colors';import {Actions,BaseState}from'./workflow/dialogs-list-item-xstate.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -27,15 +27,202 @@ const createdAtText = (value) => {
     return "Yesterday";
   return format(new Date(value), "MMM dd, yyyy");
 };
+function useSafeMachine(machine) {
+  const [state, setState] = useState({
+    context: {
+      channelId: null,
+      currentUser: null,
+      messages: [],
+      loading: false,
+      error: null,
+      title: "",
+      channelMembers: [],
+      lastMessage: null
+    },
+    value: BaseState.Idle,
+    matches: (stateValue) => stateValue === BaseState.Idle
+  });
+  const send = useCallback((event) => {
+    try {
+      if (event.type === Actions.INITIAL_CONTEXT) {
+        setState((prev) => {
+          var _a, _b;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              channelId: ((_a = event.data) == null ? void 0 : _a.channelId) || null,
+              currentUser: ((_b = event.data) == null ? void 0 : _b.currentUser) || null,
+              loading: true
+            }),
+            value: BaseState.FetchingMessages
+          });
+        });
+      } else if (event.type === Actions.UPDATE_MESSAGES) {
+        setState((prev) => {
+          var _a, _b, _c, _d, _e, _f;
+          if ((_a = event.data) == null ? void 0 : _a.messages) {
+            const messages = event.data.messages;
+            if ((_b = event.data) == null ? void 0 : _b.directLastMessage) {
+              console.log("Using direct last message from event:", {
+                id: event.data.directLastMessage.id,
+                message: ((_c = event.data.directLastMessage.message) == null ? void 0 : _c.substring(0, 20)) + "..."
+              });
+              return __spreadProps(__spreadValues({}, prev), {
+                context: __spreadProps(__spreadValues({}, prev.context), {
+                  messages,
+                  lastMessage: event.data.directLastMessage,
+                  loading: false
+                })
+              });
+            }
+            const sortedMessages = [...messages].sort((a, b) => new Date((b == null ? void 0 : b.updatedAt) || (b == null ? void 0 : b.createdAt)).getTime() - new Date((a == null ? void 0 : a.updatedAt) || (a == null ? void 0 : a.createdAt)).getTime());
+            const newLastMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
+            if (newLastMessage) {
+              console.log("Setting last message from bulk update:", {
+                id: newLastMessage.id,
+                message: ((_d = newLastMessage.message) == null ? void 0 : _d.substring(0, 20)) + "...",
+                date: newLastMessage.updatedAt || newLastMessage.createdAt
+              });
+            }
+            return __spreadProps(__spreadValues({}, prev), {
+              context: __spreadProps(__spreadValues({}, prev.context), {
+                messages,
+                lastMessage: newLastMessage,
+                loading: false
+              })
+            });
+          } else if ((_e = event.data) == null ? void 0 : _e.message) {
+            const newMessage = event.data.message;
+            const updatedMessages = [...prev.context.messages, newMessage];
+            console.log("Setting new message as lastMessage from subscription:", {
+              id: newMessage.id,
+              message: ((_f = newMessage.message) == null ? void 0 : _f.substring(0, 20)) + "...",
+              date: newMessage.createdAt || newMessage.updatedAt
+            });
+            return __spreadProps(__spreadValues({}, prev), {
+              context: __spreadProps(__spreadValues({}, prev.context), {
+                messages: updatedMessages,
+                lastMessage: newMessage,
+                loading: false
+              })
+            });
+          }
+          return prev;
+        });
+      } else if (event.type === Actions.SET_TITLE) {
+        setState((prev) => {
+          var _a;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              title: ((_a = event.data) == null ? void 0 : _a.title) || ""
+            })
+          });
+        });
+      } else if (event.type === Actions.START_LOADING) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            loading: true
+          })
+        }));
+      } else if (event.type === Actions.STOP_LOADING) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            loading: false
+          })
+        }));
+      }
+    } catch (error) {
+      console.error("Error sending event to state machine:", error);
+    }
+  }, []);
+  const stateWithMatches = useMemo(() => {
+    return __spreadProps(__spreadValues({}, state), {
+      matches: (stateValue) => {
+        try {
+          return state.value === stateValue;
+        } catch (error) {
+          console.error(`Error in matches function:`, error);
+          return false;
+        }
+      }
+    });
+  }, [state]);
+  return [stateWithMatches, send];
+}
+const LastMessageComponent = ({
+  subscribeToNewMessages,
+  title,
+  lastMessage,
+  channelId
+}) => {
+  var _a, _b;
+  React__default.useEffect(() => {
+    const unsubscribe = subscribeToNewMessages();
+    return () => {
+      if (unsubscribe && typeof unsubscribe === "function") {
+        unsubscribe();
+      }
+    };
+  }, [channelId, subscribeToNewMessages]);
+  React__default.useEffect(() => {
+    var _a2, _b2, _c, _d;
+    console.log(`LastMessageComponent rendered for channel ${channelId}:`, {
+      hasLastMessage: !!lastMessage,
+      messageId: lastMessage == null ? void 0 : lastMessage.id,
+      messageText: ((_a2 = lastMessage == null ? void 0 : lastMessage.message) == null ? void 0 : _a2.substring(0, 20)) + (((_b2 = lastMessage == null ? void 0 : lastMessage.message) == null ? void 0 : _b2.length) > 20 ? "..." : ""),
+      date: (lastMessage == null ? void 0 : lastMessage.createdAt) ? new Date(lastMessage.createdAt).toISOString() : "none",
+      hasFiles: ((_d = (_c = lastMessage == null ? void 0 : lastMessage.files) == null ? void 0 : _c.data) == null ? void 0 : _d.length) > 0
+    });
+  }, [lastMessage, channelId]);
+  const count = 30;
+  const channelTitle = (title == null ? void 0 : title.slice(0, count)) + ((title == null ? void 0 : title.length) > count ? "..." : "") || "";
+  let displayMessage = "No messages yet";
+  if (lastMessage) {
+    if (lastMessage.message && lastMessage.message.trim() !== "") {
+      displayMessage = lastMessage.message;
+    } else if (((_b = (_a = lastMessage.files) == null ? void 0 : _a.data) == null ? void 0 : _b.length) > 0) {
+      displayMessage = "\u{1F4CE} File attachment";
+    } else {
+      displayMessage = "(Empty message)";
+    }
+  }
+  const displayDate = (lastMessage == null ? void 0 : lastMessage.createdAt) ? createdAtText(lastMessage.createdAt) : (lastMessage == null ? void 0 : lastMessage.updatedAt) ? createdAtText(lastMessage.updatedAt) : "";
+  return /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "flex-1 justify-between" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.8]" }, /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600], className: "text-base text-wrap flex-wrap font-semibold" }, channelTitle), /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600], numberOfLines: 1 }, displayMessage)), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.2]" }, /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[500] }, displayDate)));
+};
 const DialogsListItemComponent = function DialogsListItem2({
   currentUser,
   selectedChannelId,
   channel,
-  onOpen
+  onOpen,
+  forceRefresh
 }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
+  const isMountedRef = useRef(true);
   const parentId = null;
-  const [messages, setMessages] = useState([]);
+  const [state, send] = useSafeMachine();
+  useCallback(() => {
+    try {
+      return (state == null ? void 0 : state.context) || {};
+    } catch (error) {
+      console.error("Error accessing state.context:", error);
+      return {};
+    }
+  }, [state]);
+  const safeContextProperty = useCallback((property, defaultValue = null) => {
+    var _a2, _b2;
+    try {
+      return (_b2 = (_a2 = state == null ? void 0 : state.context) == null ? void 0 : _a2[property]) != null ? _b2 : 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 {
     data: messagesQuery,
     loading: messageLoading,
@@ -48,7 +235,15 @@ const DialogsListItemComponent = function DialogsListItem2({
       limit: 10
     },
     fetchPolicy: "cache-and-network",
-    refetchWritePolicy: "merge"
+    refetchWritePolicy: "overwrite",
+    nextFetchPolicy: "network-only",
+    onCompleted: (data) => {
+      var _a2, _b2;
+      console.log(`Completed message query for channel ${channel == null ? void 0 : channel.id}:`, ((_b2 = (_a2 = data == null ? void 0 : data.messages) == null ? void 0 : _a2.data) == null ? void 0 : _b2.length) ? "Has messages" : "No messages");
+    },
+    onError: (error) => {
+      console.error(`Error fetching messages for channel ${channel == null ? void 0 : channel.id}:`, error);
+    }
   });
   const {
     data: newMessage,
@@ -59,37 +254,184 @@ const DialogsListItemComponent = function DialogsListItem2({
       channelId: (_b = channel == null ? void 0 : channel.id) == null ? void 0 : _b.toString()
     }
   });
-  useFocusEffect(React__default.useCallback(() => {
+  useEffect(() => {
+    if (channel == null ? void 0 : channel.id) {
+      safeSend({
+        type: Actions.INITIAL_CONTEXT,
+        data: {
+          channelId: channel.id,
+          currentUser
+        }
+      });
+    }
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [channel == null ? void 0 : channel.id, currentUser, safeSend]);
+  const refreshDialogState = useCallback(() => {
     var _a2;
-    refetchMessages({
-      channelId: (_a2 = channel == null ? void 0 : channel.id) == null ? void 0 : _a2.toString(),
-      parentId,
-      limit: 10
+    if ((channel == null ? void 0 : channel.id) && isMountedRef.current) {
+      console.log("Forcing dialog state refresh for channel:", channel == null ? void 0 : channel.id);
+      safeSend({
+        type: Actions.START_LOADING
+      });
+      const options = {
+        channelId: (_a2 = channel == null ? void 0 : channel.id) == null ? void 0 : _a2.toString(),
+        parentId,
+        limit: 10
+      };
+      refetchMessages(options).then((result) => {
+        var _a3, _b2, _c2;
+        if (((_b2 = (_a3 = result.data) == null ? void 0 : _a3.messages) == null ? void 0 : _b2.data) && isMountedRef.current) {
+          console.log(`Refreshed ${result.data.messages.data.length} messages for channel ${channel == null ? void 0 : channel.id}`);
+          const sortedMessages = [...result.data.messages.data].sort((a, b) => new Date((b == null ? void 0 : b.updatedAt) || (b == null ? void 0 : b.createdAt)).getTime() - new Date((a == null ? void 0 : a.updatedAt) || (a == null ? void 0 : a.createdAt)).getTime());
+          const latestMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
+          if (latestMessage) {
+            console.log("Latest message after refresh:", {
+              id: latestMessage.id,
+              message: ((_c2 = latestMessage.message) == null ? void 0 : _c2.substring(0, 20)) + "...",
+              date: latestMessage.createdAt || latestMessage.updatedAt
+            });
+          }
+          safeSend({
+            type: Actions.UPDATE_MESSAGES,
+            data: {
+              messages: result.data.messages.data
+            }
+          });
+        }
+        safeSend({
+          type: Actions.STOP_LOADING
+        });
+      }).catch((err) => {
+        console.error("Error refreshing dialog state:", err);
+        safeSend({
+          type: Actions.STOP_LOADING
+        });
+      });
+    }
+  }, [channel == null ? void 0 : channel.id, refetchMessages, safeSend, isMountedRef, parentId]);
+  const firstRenderRef = useRef(true);
+  useRef(0);
+  useFocusEffect(React__default.useCallback(() => {
+    if (!(channel == null ? void 0 : channel.id))
+      return;
+    console.log("DialogsListItem focused for channel:", channel == null ? void 0 : channel.id);
+    if (firstRenderRef.current) {
+      console.log("Skipping initial focus refresh for channel:", channel == null ? void 0 : channel.id);
+      firstRenderRef.current = false;
+      return;
+    }
+    console.log("FOCUS EFFECT: Force refetching messages on navigation back for channel:", channel == null ? void 0 : channel.id);
+    safeSend({
+      type: Actions.START_LOADING
     });
+    const fetchFreshData = async () => {
+      var _a2, _b2, _c2, _d2, _e2, _f;
+      try {
+        const options = {
+          channelId: (_a2 = channel == null ? void 0 : channel.id) == null ? void 0 : _a2.toString(),
+          parentId,
+          limit: 10
+        };
+        const result = await refetchMessages(options);
+        console.log(`FOCUS EFFECT: Refetched ${((_d2 = (_c2 = (_b2 = result == null ? void 0 : result.data) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.data) == null ? void 0 : _d2.length) || 0} messages for channel ${channel == null ? void 0 : channel.id}`);
+        if (((_f = (_e2 = result == null ? void 0 : result.data) == null ? void 0 : _e2.messages) == null ? void 0 : _f.data) && isMountedRef.current) {
+          const currentMessages = safeContextProperty("messages", []);
+          const fetchedMessages = result.data.messages.data;
+          console.log("Data comparison:", {
+            currentCount: currentMessages.length,
+            fetchedCount: fetchedMessages.length,
+            isDifferent: JSON.stringify(currentMessages) !== JSON.stringify(fetchedMessages)
+          });
+          safeSend({
+            type: Actions.UPDATE_MESSAGES,
+            data: {
+              messages: fetchedMessages
+            }
+          });
+        }
+      } catch (error) {
+        console.error("Error refetching messages on focus:", error);
+      } finally {
+        if (isMountedRef.current) {
+          safeSend({
+            type: Actions.STOP_LOADING
+          });
+        }
+      }
+    };
+    fetchFreshData();
     return () => {
     };
-  }, []));
+  }, [channel == null ? void 0 : channel.id, refetchMessages, safeSend, parentId, isMountedRef]));
   React__default.useEffect(() => {
-    var _a2, _b2, _c2;
-    if (messagesQuery) {
-      if ((_b2 = (_a2 = messagesQuery == null ? void 0 : messagesQuery.messages) == null ? void 0 : _a2.data) == null ? void 0 : _b2.length) {
-        const msg = (_c2 = messagesQuery == null ? void 0 : messagesQuery.messages) == null ? void 0 : _c2.data;
-        setMessages((pre) => [...pre, ...msg]);
+    var _a2, _b2, _c2, _d2, _e2;
+    if (((_a2 = messagesQuery == null ? void 0 : messagesQuery.messages) == null ? void 0 : _a2.data) && isMountedRef.current) {
+      const messages = messagesQuery.messages.data;
+      const messagesWithFiles = messages.filter((msg) => {
+        var _a3, _b3;
+        return ((_b3 = (_a3 = msg == null ? void 0 : msg.files) == null ? void 0 : _a3.data) == null ? void 0 : _b3.length) > 0;
+      });
+      console.log(`Updating messages for channel ${channel == null ? void 0 : channel.id}, count:`, messages.length, `(${messagesWithFiles.length} with files)`);
+      if (messages.length > 0) {
+        console.log("First message sample:", {
+          id: messages[0].id,
+          message: ((_b2 = messages[0].message) == null ? void 0 : _b2.substring(0, 20)) + "...",
+          createdAt: messages[0].createdAt,
+          hasFiles: ((_e2 = (_d2 = (_c2 = messages[0]) == null ? void 0 : _c2.files) == null ? void 0 : _d2.data) == null ? void 0 : _e2.length) > 0
+        });
       }
+      safeSend({
+        type: Actions.UPDATE_MESSAGES,
+        data: {
+          messages
+        }
+      });
     }
-  }, [messagesQuery]);
-  const lastMessage = useMemo(() => {
-    var _a2;
-    if (!(messages == null ? void 0 : messages.length)) {
-      return null;
+  }, [messagesQuery, safeSend, channel == null ? void 0 : channel.id, isMountedRef]);
+  useEffect(() => {
+    if ((channel == null ? void 0 : channel.id) && isMountedRef.current) {
+      const timer = setTimeout(() => {
+        if (isMountedRef.current) {
+          console.log("Initial data refresh for channel:", channel.id);
+          refreshDialogState();
+        }
+      }, 100);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [channel == null ? void 0 : channel.id, refreshDialogState, isMountedRef]);
+  useEffect(() => {
+    if (forceRefresh && (channel == null ? void 0 : channel.id) && isMountedRef.current) {
+      console.log(`Force refreshing messages for channel ${channel == null ? void 0 : channel.id} due to forceRefresh prop`);
+      const timer = setTimeout(() => {
+        var _a2;
+        if (isMountedRef.current && refetchMessages) {
+          refetchMessages({
+            channelId: (_a2 = channel == null ? void 0 : channel.id) == null ? void 0 : _a2.toString(),
+            parentId,
+            limit: 10
+          }).then((result) => {
+            var _a3, _b2;
+            if (((_b2 = (_a3 = result == null ? void 0 : result.data) == null ? void 0 : _a3.messages) == null ? void 0 : _b2.data) && isMountedRef.current) {
+              console.log(`Force refresh completed for channel ${channel == null ? void 0 : channel.id} with ${result.data.messages.data.length} messages`);
+              safeSend({
+                type: Actions.UPDATE_MESSAGES,
+                data: {
+                  messages: result.data.messages.data
+                }
+              });
+            }
+          }).catch((error) => {
+            console.error(`Error force refreshing channel ${channel == null ? void 0 : channel.id}:`, error);
+          });
+        }
+      }, 50);
+      return () => clearTimeout(timer);
     }
-    const data = messages;
-    const filteredData = data == null ? void 0 : data.filter((p) => (p == null ? void 0 : p.message) !== "");
-    let filteredLastMessage = filteredData && (filteredData == null ? void 0 : filteredData.length) ? (_a2 = filteredData == null ? void 0 : filteredData.reduce((a, b) => {
-      return new Date(a == null ? void 0 : a.updatedAt) > new Date(b == null ? void 0 : b.updatedAt) ? a : b;
-    }, [])) != null ? _a2 : null : null;
-    return filteredLastMessage;
-  }, [messages]);
+  }, [channel == null ? void 0 : channel.id, forceRefresh, isMountedRef, refetchMessages, safeSend, parentId]);
   const channelMembers = useMemo(() => {
     var _a2, _b2, _c2;
     return (_c2 = (_b2 = (_a2 = channel == null ? void 0 : channel.members) == null ? void 0 : _a2.filter((ch) => {
@@ -97,21 +439,44 @@ const DialogsListItemComponent = function DialogsListItem2({
       return ((_a3 = ch == null ? void 0 : ch.user) == null ? void 0 : _a3.id) != (currentUser == null ? void 0 : currentUser.id) && ((_b3 = ch == null ? void 0 : ch.user) == null ? void 0 : _b3.__typename) == "UserAccount";
     })) == null ? void 0 : _b2.map((m) => m == null ? void 0 : m.user)) != null ? _c2 : null;
   }, [currentUser, channel]);
-  const title = useMemo(() => {
+  useEffect(() => {
     var _a2, _b2, _c2;
-    const titleString = (_c2 = (_b2 = (_a2 = channelMembers == null ? void 0 : channelMembers.map((u) => {
-      var _a3;
-      return (u == null ? void 0 : u.givenName) + " " + ((_a3 = u == null ? void 0 : u.familyName) != null ? _a3 : "");
-    })) == null ? void 0 : _a2.filter((mu) => mu)) == null ? void 0 : _b2.join(", ")) != null ? _c2 : "";
+    if (channelMembers && isMountedRef.current) {
+      const titleString = (_c2 = (_b2 = (_a2 = channelMembers == null ? void 0 : channelMembers.map((u) => {
+        var _a3;
+        return (u == null ? void 0 : u.givenName) + " " + ((_a3 = u == null ? void 0 : u.familyName) != null ? _a3 : "");
+      })) == null ? void 0 : _a2.filter((mu) => mu)) == null ? void 0 : _b2.join(", ")) != null ? _c2 : "";
+      safeSend({
+        type: Actions.SET_TITLE,
+        data: {
+          title: titleString
+        }
+      });
+    }
+  }, [channelMembers, safeSend, isMountedRef]);
+  const title = useMemo(() => {
+    const titleString = safeContextProperty("title", "");
     const length = 30;
     return titleString.length > length ? titleString.substring(0, length - 3) + "..." : titleString;
-  }, [channelMembers]);
-  return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: () => (channel == null ? void 0 : channel.id) !== selectedChannelId && onOpen(channel == null ? void 0 : channel.id, title), className: "flex-1 border-gray-200 rounded-md  dark:border-gray-600 dark:bg-gray-700", style: {
+  }, [safeContextProperty]);
+  const lastMessage = useMemo(() => {
+    const message = safeContextProperty("lastMessage", null);
+    return message;
+  }, [safeContextProperty, (_d = (_c = state.context) == null ? void 0 : _c.messages) == null ? void 0 : _d.length]);
+  useEffect(() => {
+    var _a2, _b2;
+    console.log(`DialogsListItem for channel ${channel == null ? void 0 : channel.id}: `, {
+      hasLastMessage: !!lastMessage,
+      message: ((_a2 = lastMessage == null ? void 0 : lastMessage.message) == null ? void 0 : _a2.substring(0, 20)) + (((_b2 = lastMessage == null ? void 0 : lastMessage.message) == null ? void 0 : _b2.length) > 20 ? "..." : ""),
+      messagesCount: safeContextProperty("messages", []).length
+    });
+  }, [channel == null ? void 0 : channel.id, lastMessage, safeContextProperty]);
+  return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: () => onOpen(channel == null ? void 0 : channel.id, title), className: "flex-1 border-gray-200 rounded-md dark:border-gray-600 dark:bg-gray-700", style: {
     borderBottomWidth: 1,
     borderColor: "#e5e7eb",
     marginVertical: 0,
     paddingHorizontal: 10
-  } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "flex-1 w-[100%]  py-3  items-center" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.1] items-start pl-3" }, /* @__PURE__ */ React__default.createElement(AvatarGroup, null, channelMembers && (channelMembers == null ? void 0 : channelMembers.length) > 0 && ((_c = channelMembers == null ? void 0 : channelMembers.slice(0, 1)) == null ? void 0 : _c.map((ch, i) => {
+  } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "flex-1 w-[100%]  py-3  items-center" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.1] items-start pl-3" }, /* @__PURE__ */ React__default.createElement(AvatarGroup, null, channelMembers && (channelMembers == null ? void 0 : channelMembers.length) > 0 && ((_e = channelMembers == null ? void 0 : channelMembers.slice(0, 1)) == null ? void 0 : _e.map((ch, i) => {
     var _a2;
     return /* @__PURE__ */ React__default.createElement(Avatar, { key: "dialogs-list-" + i, size: "sm", className: `bg-transparent top-[${i == 1 ? "4" : "0"}] right-[${i == 1 ? "-2" : "0"}] z-[${i == 1 ? 5 : 1}]` }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_a2 = ch == null ? void 0 : ch.username) == null ? void 0 : _a2.charAt(0))), (channelMembers == null ? void 0 : channelMembers.length) > 1 && /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
       width: "100%",
@@ -132,7 +497,7 @@ const DialogsListItemComponent = function DialogsListItem2({
       width: 10,
       height: 10
     } })));
-  })))), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1 bg-gray-400" }, /* @__PURE__ */ React__default.createElement(LastMessageComponent, { title, lastMessage, channelId: channel == null ? void 0 : channel.id, subscribeToNewMessages: () => {
+  })))), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1" }, /* @__PURE__ */ React__default.createElement(LastMessageComponent, { key: `last-msg-${(lastMessage == null ? void 0 : lastMessage.id) || "none"}-${safeContextProperty("messages", []).length}`, title, lastMessage, channelId: channel == null ? void 0 : channel.id, subscribeToNewMessages: () => {
     var _a2;
     return subscribeToMore({
       document: OnChatMessageAddedDocument,
@@ -142,10 +507,30 @@ const DialogsListItemComponent = function DialogsListItem2({
       updateQuery: (prev, {
         subscriptionData
       }) => {
-        var _a3;
+        var _a3, _b2, _c2, _d2, _e2, _f;
         if (!subscriptionData.data)
           return prev;
         const newMessage2 = (_a3 = subscriptionData == null ? void 0 : subscriptionData.data) == null ? void 0 : _a3.chatMessageAdded;
+        console.log("New message added (subscription):", {
+          channelId: channel.id,
+          messageId: newMessage2.id,
+          message: ((_b2 = newMessage2.message) == null ? void 0 : _b2.substring(0, 20)) + "...",
+          hasFiles: ((_d2 = (_c2 = newMessage2 == null ? void 0 : newMessage2.files) == null ? void 0 : _c2.data) == null ? void 0 : _d2.length) > 0,
+          filesCount: ((_f = (_e2 = newMessage2 == null ? void 0 : newMessage2.files) == null ? void 0 : _e2.data) == null ? void 0 : _f.length) || 0,
+          timestamp: newMessage2.createdAt || newMessage2.updatedAt
+        });
+        if (isMountedRef.current) {
+          console.log("Updating messages with new subscription message");
+          const currentMessages = safeContextProperty("messages", []);
+          const updatedMessages = [...currentMessages, newMessage2];
+          safeSend({
+            type: Actions.UPDATE_MESSAGES,
+            data: {
+              messages: updatedMessages,
+              directLastMessage: newMessage2
+            }
+          });
+        }
         const existingMessages = prev == null ? void 0 : prev.messages;
         const previousData = (existingMessages == null ? void 0 : existingMessages.data) ? [...existingMessages.data, newMessage2] : [];
         const totalMsgCount = (existingMessages == null ? void 0 : existingMessages.totalCount) + 1;
@@ -160,16 +545,4 @@ const DialogsListItemComponent = function DialogsListItem2({
     });
   } }))));
 };
-const LastMessageComponent = ({
-  subscribeToNewMessages,
-  title,
-  lastMessage,
-  channelId
-}) => {
-  var _a;
-  React__default.useEffect(() => subscribeToNewMessages(), [channelId]);
-  const count = 30;
-  const channelTitle = title.slice(0, count) + (title.length > count ? "..." : "");
-  return /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "flex-1 justify-between" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.8]" }, /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600], className: "text-base text-wrap flex-wrap font-semibold" }, channelTitle), /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600], numberOfLines: 1 }, (_a = lastMessage == null ? void 0 : lastMessage.message) != null ? _a : "")), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.2]" }, /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[500] }, lastMessage ? createdAtText(lastMessage == null ? void 0 : lastMessage.createdAt) : "")));
-};
 const DialogsListItem = React__default.memo(DialogsListItemComponent);export{DialogsListItem,DialogsListItemComponent};//# sourceMappingURL=DialogsListItem.js.map