@messenger-box/platform-mobile 10.0.3-alpha.40 → 10.0.3-alpha.46

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.46](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.45...v10.0.3-alpha.46) (2025-05-19)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
+## [10.0.3-alpha.43](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.42...v10.0.3-alpha.43) (2025-05-15)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
 ## [10.0.3-alpha.40](https://github.com/cdmbase/messenger-box/compare/v10.0.3-alpha.39...v10.0.3-alpha.40) (2025-05-14)
 
 **Note:** Version bump only for package @messenger-box/platform-mobile

package/lib/compute.js

@@ -42,8 +42,7 @@ const inboxPageStore = [{
   componentPath: "@messenger-box/platform-mobile/lib/screens/inbox/DialogThreads.js",
   hasComponent: true,
   queries: {
-    ViewChannelDetailDocument: "{id: params.id}",
-    ThreadMessagesDocument: "{channelId: params.channelId,role: params.role,limit: params.limit,repliesLimit2: 5}"
+    ChannelDetailDocument: "{}"
   }
 }, {
   key: "threadmessage",
@@ -68,7 +67,7 @@ const inboxPageStore = [{
   componentPath: "@messenger-box/platform-mobile/lib/screens/inbox/DialogThreadMessages.js",
   hasComponent: true,
   queries: {
-    ViewChannelDetailDocument: "{id: params.id}"
+    ChannelDetailDocument: "{}"
   }
 }];
 const selectedRoutes = ["message", "thread", "threadmessage"];

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import PlatformModule from './module';\n\nimport { Feature } from '@common-stack/client-react';\n\nexport default new Feature(PlatformModule);\n// export * from './navigation';\nexport * from './screens';\n"],"names":[],"mappings":"yUAEA,YAAe,IAAI,QAAQ,cAAc,CAAA"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import PlatformModule from './module';\n\nimport { Feature } from '@common-stack/client-react';\n// import * as inboxQueries from './queries/inboxQueries';\n\nexport default new Feature(PlatformModule);\n// export * from './navigation';\nexport * from './screens';\n// export { inboxQueries };\n"],"names":[],"mappings":"yUAIA,YAAe,IAAI,QAAQ,cAAc,CAAA"}

package/lib/queries/inboxQueries.js

@@ -0,0 +1,77 @@
+import {useViewChannelDetailQuery,useThreadMessagesQuery,OnThreadCreatedUpdatedDocument,useSendThreadMessageMutation,OnChatMessageAddedDocument,MessagesDocument,useOnThreadCreatedUpdatedSubscription,useCreatePostThreadMutation,useSendExpoNotificationOnPostMutation,useGetPostThreadLazyQuery,useAddDirectChannelMutation,useSendMessagesMutation,useMessagesQuery,useOnChatMessageAddedSubscription,useGetChannelsByUserWithServiceChannelsQuery}from'common/graphql';export{useMessagesQuery,useThreadMessagesQuery}from'common/graphql';import'react';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const useChannelsQuery = (options = {}) => {
+  return useGetChannelsByUserWithServiceChannelsQuery(__spreadProps(__spreadValues({}, options), {
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "network-only"
+  }));
+};
+const useChannelDetailQuery = (channelId, options = {}) => {
+  return useViewChannelDetailQuery(__spreadValues({
+    variables: {
+      channelId
+    }
+  }, options));
+};
+const useThreadMessagesQueryWithOptions = (variables, options = {}) => {
+  return useThreadMessagesQuery(__spreadValues({
+    variables,
+    fetchPolicy: "cache-and-network",
+    refetchWritePolicy: "overwrite",
+    nextFetchPolicy: "network-only"
+  }, options));
+};
+const useChannelMessagesQuery = (variables = {}, options = {}) => {
+  return useMessagesQuery(__spreadValues({
+    variables,
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-first",
+    refetchWritePolicy: "merge"
+  }, options));
+};
+const useSendChannelMessage = () => {
+  return useSendMessagesMutation();
+};
+const useAddDirectChannel = () => {
+  return useAddDirectChannelMutation();
+};
+const MESSAGES_DOCUMENT = MessagesDocument;
+const useSendThreadMessage = () => {
+  return useSendThreadMessageMutation();
+};
+const useSendExpoNotification = () => {
+  return useSendExpoNotificationOnPostMutation();
+};
+const useCreatePostThread = (options = {}) => {
+  return useCreatePostThreadMutation(options);
+};
+const CHAT_MESSAGE_ADDED = OnChatMessageAddedDocument;
+const THREAD_CREATED_UPDATED = OnThreadCreatedUpdatedDocument;
+const useThreadCreatedUpdatedSubscription = (options = {}) => {
+  return useOnThreadCreatedUpdatedSubscription(__spreadValues({}, options));
+};
+const useChatMessageAddedSubscription = (options = {}) => {
+  return useOnChatMessageAddedSubscription(__spreadValues({}, options));
+};
+const useGetPostThreadLazy = (options = {}) => {
+  return useGetPostThreadLazyQuery(__spreadValues({
+    fetchPolicy: "cache-and-network"
+  }, options));
+};export{CHAT_MESSAGE_ADDED,MESSAGES_DOCUMENT,THREAD_CREATED_UPDATED,useAddDirectChannel,useChannelDetailQuery,useChannelMessagesQuery,useChannelsQuery,useChatMessageAddedSubscription,useCreatePostThread,useGetPostThreadLazy,useSendChannelMessage,useSendExpoNotification,useSendThreadMessage,useThreadCreatedUpdatedSubscription,useThreadMessagesQueryWithOptions};//# sourceMappingURL=inboxQueries.js.map

package/lib/queries/inboxQueries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inboxQueries.js","sources":["../../src/queries/inboxQueries.ts"],"sourcesContent":["// Imports from common/graphql\nimport {\n    useGetChannelsByUserWithServiceChannelsQuery,\n    OnChatMessageAddedDocument,\n    OnThreadCreatedUpdatedDocument,\n    useViewChannelDetailQuery,\n    useThreadMessagesQuery,\n    useSupportServiceChannelsQuery,\n    useSendThreadMessageMutation,\n    useMessagesQuery,\n    useSendMessagesMutation,\n    useAddDirectChannelMutation,\n    MessagesDocument,\n    useSendExpoNotificationOnPostMutation,\n    useOnThreadCreatedUpdatedSubscription,\n    useOnChatMessageAddedSubscription,\n    useOnThreadChatMessageAddedSubscription,\n    useCreatePostThreadMutation,\n    useGetPostThreadLazyQuery,\n} from 'common/graphql';\nimport { useCallback } from 'react';\n\n// ====== CHANNEL QUERIES ======\n\n/**\n * Hook for fetching channels by user including service channels\n * @param options - Query options\n * @returns Query result with data, loading state, refetch and fetchMore functions\n */\nexport const useChannelsQuery = (options: any = {}) => {\n    return useGetChannelsByUserWithServiceChannelsQuery({\n        ...options,\n        fetchPolicy: 'cache-and-network',\n        nextFetchPolicy: 'network-only',\n    });\n};\n\n/**\n * Hook for fetching service channels\n * @param options - Query options\n * @returns Query result with data, loading state and refetch function\n */\nexport const useServiceChannelsQuery = (options: any = {}) => {\n    return useSupportServiceChannelsQuery({\n        ...options,\n        fetchPolicy: 'cache-and-network',\n    });\n};\n\n/**\n * Hook for fetching channel details\n * @param channelId - ID of the channel to fetch\n * @param options - Additional query options\n * @returns Query result with channel details\n */\nexport const useChannelDetailQuery = (channelId: string, options: any = {}) => {\n    return useViewChannelDetailQuery({\n        variables: { channelId },\n        ...options,\n    });\n};\n\n// ====== THREAD QUERIES ======\n\n/**\n * Direct export of the thread messages query hook\n */\nexport { useThreadMessagesQuery };\n\n/**\n * Direct export of the messages query hook\n */\nexport { useMessagesQuery };\n\n/**\n * Hook for fetching thread messages with default options\n * @param variables - Query variables including channelId, role, and limit\n * @param options - Additional query options\n * @returns Query result with thread messages data\n */\nexport const useThreadMessagesQueryWithOptions = (variables: any, options: any = {}) => {\n    return useThreadMessagesQuery({\n        variables,\n        fetchPolicy: 'cache-and-network',\n        refetchWritePolicy: 'overwrite',\n        nextFetchPolicy: 'network-only',\n        ...options,\n    });\n};\n\n// ====== MESSAGE QUERIES ======\n\n/**\n * Hook for fetching channel messages\n * @param variables - Query variables including channelId, parentId, and pagination params\n * @param options - Additional query options\n * @returns Query result for messages\n */\nexport const useChannelMessagesQuery = (variables: any = {}, options: any = {}) => {\n    return useMessagesQuery({\n        variables,\n        fetchPolicy: 'cache-and-network',\n        nextFetchPolicy: 'cache-first',\n        refetchWritePolicy: 'merge',\n        ...options,\n    });\n};\n\n/**\n * Hook for sending messages in a channel\n * @returns Mutation function and result\n */\nexport const useSendChannelMessage = () => {\n    return useSendMessagesMutation();\n};\n\n/**\n * Hook for adding a direct channel\n * @returns Mutation function and result\n */\nexport const useAddDirectChannel = () => {\n    return useAddDirectChannelMutation();\n};\n\n/**\n * Messages document for queries\n */\nexport const MESSAGES_DOCUMENT = MessagesDocument;\n\n// ====== MUTATIONS ======\n\n/**\n * Hook for sending thread messages\n * @returns Mutation function and result\n */\nexport const useSendThreadMessage = () => {\n    return useSendThreadMessageMutation();\n};\n\n/**\n * Hook for sending expo notifications\n * @returns Mutation function and result\n */\nexport const useSendExpoNotification = () => {\n    return useSendExpoNotificationOnPostMutation();\n};\n\n/**\n * Hook for creating a post thread\n * @param options - Mutation options\n * @returns Mutation function and result\n */\nexport const useCreatePostThread = (options: any = {}) => {\n    return useCreatePostThreadMutation(options);\n};\n\n// ====== SUBSCRIPTION DOCUMENTS ======\n\n/**\n * Document for chat message added subscription\n */\nexport const CHAT_MESSAGE_ADDED = OnChatMessageAddedDocument;\n\n/**\n * Document for thread created/updated subscription\n */\nexport const THREAD_CREATED_UPDATED = OnThreadCreatedUpdatedDocument;\n\n/**\n * Hook for subscribing to thread creation and updates\n * @returns Subscription result for thread creation/update events\n */\nexport const useThreadCreatedUpdatedSubscription = (options: any = {}) => {\n    return useOnThreadCreatedUpdatedSubscription({\n        ...options,\n    });\n};\n\n/**\n * Hook for subscribing to chat message additions\n * @param options - Subscription options including variables like channelId\n * @returns Subscription result for new chat messages\n */\nexport const useChatMessageAddedSubscription = (options: any = {}) => {\n    return useOnChatMessageAddedSubscription({\n        ...options,\n    });\n};\n\n/**\n * Hook for subscribing to thread chat message additions\n * @param options - Subscription options including variables like channelId and threadId\n * @returns Subscription result for new thread chat messages\n */\nexport const useThreadChatMessageAddedSubscription = (options: any = {}) => {\n    return useOnThreadChatMessageAddedSubscription({\n        ...options,\n    });\n};\n\n// ====== LAZY QUERIES ======\n\n/**\n * Hook for lazily fetching a post thread\n * @param options - Lazy query options\n * @returns Lazy query function and result\n */\nexport const useGetPostThreadLazy = (options: any = {}) => {\n    return useGetPostThreadLazyQuery({\n        fetchPolicy: 'cache-and-network',\n        ...options,\n    });\n};\n\n// ====== CUSTOM QUERY HOOKS ======\n\n/**\n * Custom hook that combines channels and provides refresh functionality\n */\nexport const useInboxChannels = () => {\n    const queryResult = useChannelsQuery();\n\n    const refresh = useCallback(() => {\n        return queryResult.refetch();\n    }, [queryResult.refetch]);\n\n    const loadMore = useCallback(\n        (page: number) => {\n            if (queryResult.loading || !queryResult.data) return;\n\n            return queryResult.fetchMore({\n                variables: { page },\n                updateQuery: (prev, { fetchMoreResult }) => {\n                    if (!fetchMoreResult) return prev;\n\n                    return {\n                        ...fetchMoreResult,\n                        channelsByUser: [...(prev.channelsByUser || []), ...(fetchMoreResult.channelsByUser || [])],\n                        supportServiceChannels: [\n                            ...(prev.supportServiceChannels || []),\n                            ...(fetchMoreResult.supportServiceChannels || []),\n                        ],\n                    };\n                },\n            });\n        },\n        [queryResult.fetchMore, queryResult.loading, queryResult.data],\n    );\n\n    return {\n        ...queryResult,\n        refresh,\n        loadMore,\n    };\n};\n\n/**\n * Custom hook for thread message operations\n */\nexport const useThreadOperations = (channelId: string, options: any = {}) => {\n    const queryResult = useThreadMessagesQueryWithOptions({ channelId, ...options.variables }, options.queryOptions);\n\n    const [sendMessage, sendMessageResult] = useSendThreadMessage();\n\n    const refresh = useCallback(() => {\n        return queryResult.refetch();\n    }, [queryResult.refetch]);\n\n    const fetchMoreMessages = useCallback(\n        (variables: any) => {\n            return queryResult.fetchMore({\n                variables,\n                updateQuery: (prev, { fetchMoreResult }) => {\n                    if (!fetchMoreResult?.threadMessages?.data) return prev;\n\n                    return {\n                        ...prev,\n                        threadMessages: {\n                            ...prev.threadMessages,\n                            data: [...fetchMoreResult.threadMessages.data, ...(prev.threadMessages?.data || [])],\n                        },\n                    };\n                },\n            });\n        },\n        [queryResult.fetchMore],\n    );\n\n    return {\n        data: queryResult.data,\n        loading: queryResult.loading,\n        error: queryResult.error,\n        refresh,\n        fetchMoreMessages,\n        sendMessage,\n        sendMessageResult,\n    };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAmB,GAAA,CAAC,OAAe,GAAA,EAAO,KAAA;AACrD,EAAO,OAAA,4CAAA,CAA6C,iCAC/C,OAD+C,CAAA,EAAA;AAAA,IAElD,WAAa,EAAA,mBAAA;AAAA,IACb,eAAiB,EAAA;AAAA,GAClB,CAAA,CAAA;AACH;AAoBO,MAAM,qBAAwB,GAAA,CAAC,SAAmB,EAAA,OAAA,GAAe,EAAO,KAAA;AAC7E,EAAA,OAAO,yBAA0B,CAAA,cAAA,CAAA;AAAA,IAC/B,SAAW,EAAA;AAAA,MACT;AAAA;AACF,GAAA,EACG,OACJ,CAAA,CAAA;AACH;AAoBO,MAAM,iCAAoC,GAAA,CAAC,SAAgB,EAAA,OAAA,GAAe,EAAO,KAAA;AACtF,EAAA,OAAO,sBAAuB,CAAA,cAAA,CAAA;AAAA,IAC5B,SAAA;AAAA,IACA,WAAa,EAAA,mBAAA;AAAA,IACb,kBAAoB,EAAA,WAAA;AAAA,IACpB,eAAiB,EAAA;AAAA,GAAA,EACd,OACJ,CAAA,CAAA;AACH;AAUO,MAAM,0BAA0B,CAAC,SAAA,GAAiB,EAAI,EAAA,OAAA,GAAe,EAAO,KAAA;AACjF,EAAA,OAAO,gBAAiB,CAAA,cAAA,CAAA;AAAA,IACtB,SAAA;AAAA,IACA,WAAa,EAAA,mBAAA;AAAA,IACb,eAAiB,EAAA,aAAA;AAAA,IACjB,kBAAoB,EAAA;AAAA,GAAA,EACjB,OACJ,CAAA,CAAA;AACH;AAMO,MAAM,wBAAwB,MAAM;AACzC,EAAA,OAAO,uBAAwB,EAAA;AACjC;AAMO,MAAM,sBAAsB,MAAM;AACvC,EAAA,OAAO,2BAA4B,EAAA;AACrC;AAKO,MAAM,iBAAoB,GAAA;AAQ1B,MAAM,uBAAuB,MAAM;AACxC,EAAA,OAAO,4BAA6B,EAAA;AACtC;AAMO,MAAM,0BAA0B,MAAM;AAC3C,EAAA,OAAO,qCAAsC,EAAA;AAC/C;AAOO,MAAM,mBAAsB,GAAA,CAAC,OAAe,GAAA,EAAO,KAAA;AACxD,EAAA,OAAO,4BAA4B,OAAO,CAAA;AAC5C;AAOO,MAAM,kBAAqB,GAAA;AAK3B,MAAM,sBAAyB,GAAA;AAM/B,MAAM,mCAAsC,GAAA,CAAC,OAAe,GAAA,EAAO,KAAA;AACxE,EAAO,OAAA,qCAAA,CAAsC,mBACxC,OACJ,CAAA,CAAA;AACH;AAOO,MAAM,+BAAkC,GAAA,CAAC,OAAe,GAAA,EAAO,KAAA;AACpE,EAAO,OAAA,iCAAA,CAAkC,mBACpC,OACJ,CAAA,CAAA;AACH;AAoBO,MAAM,oBAAuB,GAAA,CAAC,OAAe,GAAA,EAAO,KAAA;AACzD,EAAA,OAAO,yBAA0B,CAAA,cAAA,CAAA;AAAA,IAC/B,WAAa,EAAA;AAAA,GAAA,EACV,OACJ,CAAA,CAAA;AACH"}

package/lib/routes.json

@@ -46,8 +46,7 @@
       "componentPath": "@messenger-box/platform-mobile/lib/screens/inbox/DialogThreads.js",
       "hasComponent": true,
       "queries": {
-        "ViewChannelDetailDocument": "{id: params.id}",
-        "ThreadMessagesDocument": "{channelId: params.channelId,role: params.role,limit: params.limit,repliesLimit2: 5}"
+        "ChannelDetailDocument": "{}"
       }
     }
   },
@@ -75,7 +74,7 @@
       "componentPath": "@messenger-box/platform-mobile/lib/screens/inbox/DialogThreadMessages.js",
       "hasComponent": true,
       "queries": {
-        "ViewChannelDetailDocument": "{id: params.id}"
+        "ChannelDetailDocument": "{}"
       }
     }
   }

package/lib/screens/inbox/DialogThreadMessages.js

@@ -1,4 +1,4 @@
-import*as React from'react';import {Box,Spinner}from'@admin-layout/gluestack-ui-mobile';import {ThreadConversationView}from'./containers/ThreadConversationView.js';import {useViewChannelDetailQuery,useSendThreadMessageMutation}from'common/graphql';import {useFocusEffect}from'@react-navigation/native';import colors from'tailwindcss/colors';function DialogThreadMessages({
+import*as React from'react';import {Box,Spinner}from'@admin-layout/gluestack-ui-mobile';import {ThreadConversationView}from'./containers/ThreadConversationView.js';import {useChannelDetailQuery,useSendThreadMessage}from'../../queries/inboxQueries.js';import {useFocusEffect}from'@react-navigation/native';import colors from'tailwindcss/colors';function DialogThreadMessages({
   channelId,
   postParentId,
   isPostParentIdThread,
@@ -8,12 +8,8 @@ import*as React from'react';import {Box,Spinner}from'@admin-layout/gluestack-ui-
     data,
     loading: channelLoading,
     refetch
-  } = useViewChannelDetailQuery({
-    variables: {
-      id: channelId == null ? void 0 : channelId.toString()
-    }
-  });
-  const [sendThreadMessage] = useSendThreadMessageMutation();
+  } = useChannelDetailQuery(channelId == null ? void 0 : channelId.toString(), {});
+  const [sendThreadMessage] = useSendThreadMessage();
   const [loading, setLoading] = React.useState(true);
   const [channel, setChannel] = React.useState(null);
   const [parentId, setParentId] = React.useState(postParentId);

package/lib/screens/inbox/DialogThreadMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogThreadMessages.js","sources":["../../../src/screens/inbox/DialogThreadMessages.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';\nimport { ThreadConversationView } from './containers/ThreadConversationView';\nimport { ThreadsView } from './containers/ThreadsView';\nimport { useViewChannelDetailQuery, useSendThreadMessageMutation } from 'common/graphql';\nimport { useFocusEffect } from '@react-navigation/native';\n// import { useSelector } from 'react-redux';\nimport colors from 'tailwindcss/colors';\n\nexport function DialogThreadMessages({ channelId, postParentId, isPostParentIdThread, role }) {\n    const {\n        data,\n        loading: channelLoading,\n        refetch,\n    } = useViewChannelDetailQuery({\n        variables: {\n            id: channelId?.toString(),\n        },\n    });\n\n    const [sendThreadMessage] = useSendThreadMessageMutation();\n    const [loading, setLoading] = React.useState<boolean>(true);\n    const [channel, setChannel] = React.useState<any>(null);\n    const [parentId, setParentId] = React.useState<any>(postParentId);\n\n    const refetchChannelDetail = React.useCallback(\n        (id: string) => {\n            return refetch({ id: id?.toString() });\n        },\n        [channelId],\n    );\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            if (channelId) refetch({ id: channelId?.toString() });\n            return () => {};\n        }, [channelId]),\n    );\n\n    React.useEffect(() => {\n        setParentId(postParentId);\n    }, [postParentId]);\n\n    React.useEffect(() => {\n        if (data?.viewChannelDetail) {\n            setChannel(data?.viewChannelDetail);\n            setLoading(false);\n        }\n    }, [data]);\n\n    // React.useEffect(() => {\n    //     async function sendInitialMessage(channel: any) {\n    //         const content = `Welcome to ${channel?.title}`;\n    //         const createdBy = channel?.creator?.id;\n    //         await sendThreadMessage({\n    //             variables: {\n    //                 channelId,\n    //                 threadMessageInput: {\n    //                     content,\n    //                     role,\n    //                 },\n    //                 responderId: createdBy,\n    //             },\n    //             update: (cache, { data, errors }: any) => {\n    //                 if (!data) {\n    //                     return;\n    //                 }\n    //                 setParentId(data?.sendThreadMessage?.lastMessage?.id);\n    //             },\n    //         });\n    //     }\n    //     if ((!parentId || parentId == 0) && channel) {\n    //         sendInitialMessage(channel);\n    //     }\n\n    //     if (parentId) setLoading(false);\n    // }, [parentId, channel]);\n\n    return (\n        <Box className=\"bg-white flex-1\">\n            {/* {loading && !parentId ? ( */}\n            {loading ? (\n                <Spinner color={colors.blue[500]} />\n            ) : (\n                <ThreadConversationView\n                    channelId={channelId}\n                    postParentId={parentId}\n                    isPostParentIdThread={isPostParentIdThread}\n                    role={role}\n                />\n            )}\n        </Box>\n    );\n}\n\nexport default DialogThreadMessages;\n"],"names":[],"mappings":"qVAQO,SAAS,oBAAqB,CAAA;AAAA,EACnC,SAAA;AAAA,EACA,YAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAG,EAAA;AACD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,OAAS,EAAA,cAAA;AAAA,IACT;AAAA,MACE,yBAA0B,CAAA;AAAA,IAC5B,SAAW,EAAA;AAAA,MACT,IAAI,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA;AAAA;AACjB,GACD,CAAA;AACD,EAAM,MAAA,CAAC,iBAAiB,CAAA,GAAI,4BAA6B,EAAA;AACzD,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAkB,IAAI,CAAA;AAC1D,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAc,IAAI,CAAA;AACtD,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,KAAA,CAAM,SAAc,YAAY,CAAA;AAChE,EAA6B,KAAA,CAAM,WAAY,CAAA,CAAC,EAAe,KAAA;AAC7D,IAAA,OAAO,OAAQ,CAAA;AAAA,MACb,IAAI,EAAI,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAA;AAAA,KACT,CAAA;AAAA,GACH,EAAG,CAAC,SAAS,CAAC;AACd,EAAe,cAAA,CAAA,KAAA,CAAM,YAAY,MAAM;AAErC,IAAI,IAAA,SAAA;AAAW,MAAQ,OAAA,CAAA;AAAA,QACrB,IAAI,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA;AAAA,OAChB,CAAA;AACD,IAAA,OAAO,MAAM;AAAA,KAAC;AAAA,GACb,EAAA,CAAC,SAAS,CAAC,CAAC,CAAA;AACf,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,WAAA,CAAY,YAAY,CAAA;AAAA,GAC1B,EAAG,CAAC,YAAY,CAAC,CAAA;AACjB,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,6BAAM,iBAAmB,EAAA;AAC3B,MAAA,UAAA,CAAW,6BAAM,iBAAiB,CAAA;AAClC,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,GACF,EAAG,CAAC,IAAI,CAAC,CAAA;AA8BT,EAAA,2CAAQ,GAAI,EAAA,EAAA,SAAA,EAAU,qBAEX,OAAU,mBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAO,EAAA,MAAA,CAAO,KAAK,GAAM,CAAA,EAAA,CAAA,uCAAM,sBAAuB,EAAA,EAAA,SAAA,EAAsB,cAAc,QAAU,EAAA,oBAAA,EAA4C,MAAY,CACpL,CAAA;AACR"}
+{"version":3,"file":"DialogThreadMessages.js","sources":["../../../src/screens/inbox/DialogThreadMessages.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';\nimport { ThreadConversationView } from './containers/ThreadConversationView';\nimport { ThreadsView } from './containers/ThreadsView';\nimport { useChannelDetailQuery, useSendThreadMessage } from '../../queries/inboxQueries';\nimport { useFocusEffect } from '@react-navigation/native';\n// import { useSelector } from 'react-redux';\nimport colors from 'tailwindcss/colors';\n\nexport function DialogThreadMessages({ channelId, postParentId, isPostParentIdThread, role }) {\n    const { data, loading: channelLoading, refetch } = useChannelDetailQuery(channelId?.toString(), {});\n\n    const [sendThreadMessage] = useSendThreadMessage();\n    const [loading, setLoading] = React.useState<boolean>(true);\n    const [channel, setChannel] = React.useState<any>(null);\n    const [parentId, setParentId] = React.useState<any>(postParentId);\n\n    const refetchChannelDetail = React.useCallback(\n        (id: string) => {\n            return refetch({ id: id?.toString() });\n        },\n        [channelId],\n    );\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            if (channelId) refetch({ id: channelId?.toString() });\n            return () => {};\n        }, [channelId]),\n    );\n\n    React.useEffect(() => {\n        setParentId(postParentId);\n    }, [postParentId]);\n\n    React.useEffect(() => {\n        if (data?.viewChannelDetail) {\n            setChannel(data?.viewChannelDetail);\n            setLoading(false);\n        }\n    }, [data]);\n\n    // React.useEffect(() => {\n    //     async function sendInitialMessage(channel: any) {\n    //         const content = `Welcome to ${channel?.title}`;\n    //         const createdBy = channel?.creator?.id;\n    //         await sendThreadMessage({\n    //             variables: {\n    //                 channelId,\n    //                 threadMessageInput: {\n    //                     content,\n    //                     role,\n    //                 },\n    //                 responderId: createdBy,\n    //             },\n    //             update: (cache, { data, errors }: any) => {\n    //                 if (!data) {\n    //                     return;\n    //                 }\n    //                 setParentId(data?.sendThreadMessage?.lastMessage?.id);\n    //             },\n    //         });\n    //     }\n    //     if ((!parentId || parentId == 0) && channel) {\n    //         sendInitialMessage(channel);\n    //     }\n\n    //     if (parentId) setLoading(false);\n    // }, [parentId, channel]);\n\n    return (\n        <Box className=\"bg-white flex-1\">\n            {/* {loading && !parentId ? ( */}\n            {loading ? (\n                <Spinner color={colors.blue[500]} />\n            ) : (\n                <ThreadConversationView\n                    channelId={channelId}\n                    postParentId={parentId}\n                    isPostParentIdThread={isPostParentIdThread}\n                    role={role}\n                />\n            )}\n        </Box>\n    );\n}\n\nexport default DialogThreadMessages;\n"],"names":[],"mappings":"wVAQO,SAAS,oBAAqB,CAAA;AAAA,EACnC,SAAA;AAAA,EACA,YAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAG,EAAA;AACD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,OAAS,EAAA,cAAA;AAAA,IACT;AAAA,GACE,GAAA,qBAAA,CAAsB,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA,EAAA,EAAY,EAAE,CAAA;AACnD,EAAM,MAAA,CAAC,iBAAiB,CAAA,GAAI,oBAAqB,EAAA;AACjD,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAkB,IAAI,CAAA;AAC1D,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAc,IAAI,CAAA;AACtD,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,KAAA,CAAM,SAAc,YAAY,CAAA;AAChE,EAA6B,KAAA,CAAM,WAAY,CAAA,CAAC,EAAe,KAAA;AAC7D,IAAA,OAAO,OAAQ,CAAA;AAAA,MACb,IAAI,EAAI,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAA;AAAA,KACT,CAAA;AAAA,GACH,EAAG,CAAC,SAAS,CAAC;AACd,EAAe,cAAA,CAAA,KAAA,CAAM,YAAY,MAAM;AAErC,IAAI,IAAA,SAAA;AAAW,MAAQ,OAAA,CAAA;AAAA,QACrB,IAAI,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA;AAAA,OAChB,CAAA;AACD,IAAA,OAAO,MAAM;AAAA,KAAC;AAAA,GACb,EAAA,CAAC,SAAS,CAAC,CAAC,CAAA;AACf,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,WAAA,CAAY,YAAY,CAAA;AAAA,GAC1B,EAAG,CAAC,YAAY,CAAC,CAAA;AACjB,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,6BAAM,iBAAmB,EAAA;AAC3B,MAAA,UAAA,CAAW,6BAAM,iBAAiB,CAAA;AAClC,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,GACF,EAAG,CAAC,IAAI,CAAC,CAAA;AA8BT,EAAA,2CAAQ,GAAI,EAAA,EAAA,SAAA,EAAU,qBAEX,OAAU,mBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAO,EAAA,MAAA,CAAO,KAAK,GAAM,CAAA,EAAA,CAAA,uCAAM,sBAAuB,EAAA,EAAA,SAAA,EAAsB,cAAc,QAAU,EAAA,oBAAA,EAA4C,MAAY,CACpL,CAAA;AACR"}

package/lib/screens/inbox/DialogThreads.js

@@ -1,4 +1,4 @@
-import*as React from'react';import {Spinner,Box}from'@admin-layout/gluestack-ui-mobile';import {ThreadsView}from'./containers/ThreadsView.js';import {useViewChannelDetailQuery,useThreadMessagesQuery}from'common/graphql';import {useFocusEffect}from'@react-navigation/native';import {config}from'./config/config.js';import colors from'tailwindcss/colors';import {useSafeDialogThreadsMachine}from'./hooks/useSafeDialogThreadsMachine.js';import {Actions,BaseState}from'./workflow/dialog-threads-xstate.js';const {
+import*as React from'react';import {Spinner,Box}from'@admin-layout/gluestack-ui-mobile';import {ThreadsView}from'./containers/ThreadsView.js';import {useChannelDetailQuery,useThreadMessagesQueryWithOptions}from'../../queries/inboxQueries.js';import {useFocusEffect}from'@react-navigation/native';import {config}from'./config/config.js';import colors from'tailwindcss/colors';import {useSafeDialogThreadsMachine}from'./hooks/useSafeDialogThreadsMachine.js';import {Actions,BaseState}from'./workflow/dialog-threads-xstate.js';const {
   MESSAGES_PER_PAGE
 } = config;
 function DialogThreads({
@@ -20,18 +20,14 @@ function DialogThreads({
     data: channelData,
     loading: channelLoading,
     refetch: channelRefetch
-  } = useViewChannelDetailQuery({
-    variables: {
-      id: channelId == null ? void 0 : channelId.toString()
-    }
-  });
+  } = useChannelDetailQuery(channelId == null ? void 0 : channelId.toString(), {});
   const {
     data: threadsData,
     loading: threadLoading,
     error: threadsError,
     refetch: threadsRefetch,
     subscribeToMore: threadsSubscribeToMore
-  } = useThreadMessagesQuery({
+  } = useThreadMessagesQueryWithOptions({
     variables: {
       channelId: channelId == null ? void 0 : channelId.toString(),
       role: role == null ? void 0 : role.toString(),

package/lib/screens/inbox/DialogThreads.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogThreads.js","sources":["../../../src/screens/inbox/DialogThreads.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';\nimport { ThreadConversationView } from './containers/ThreadConversationView';\nimport { ThreadsView } from './containers/ThreadsView';\nimport { useViewChannelDetailQuery, useThreadMessagesQuery } from 'common/graphql';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { useSelector } from 'react-redux';\nimport { config } from './config';\nimport colors from 'tailwindcss/colors';\nimport { useSafeDialogThreadsMachine } from './hooks/useSafeDialogThreadsMachine';\nimport { Actions, BaseState } from './workflow/dialog-threads-xstate';\nconst { MESSAGES_PER_PAGE } = config;\n\nexport function DialogThreads({ channelId, postParentId, role }) {\n    // Use the XState machine for state management\n    const [state, send] = useSafeDialogThreadsMachine();\n    const { context, value } = state;\n    const { channelsDetail, loading, error } = context;\n\n    // Fetch channel details\n    const {\n        data: channelData,\n        loading: channelLoading,\n        refetch: channelRefetch,\n    } = useViewChannelDetailQuery({\n        variables: {\n            id: channelId?.toString(),\n        },\n    });\n\n    // Fetch thread messages\n    const {\n        data: threadsData,\n        loading: threadLoading,\n        error: threadsError,\n        refetch: threadsRefetch,\n        subscribeToMore: threadsSubscribeToMore,\n    } = useThreadMessagesQuery({\n        variables: {\n            channelId: channelId?.toString(),\n            role: role?.toString(),\n            limit: MESSAGES_PER_PAGE,\n            repliesLimit2: 5,\n        },\n    });\n\n    // Initialize the machine with props\n    React.useEffect(() => {\n        send({\n            type: Actions.INITIALIZE,\n            data: { channelId, postParentId, role },\n        });\n    }, [channelId, postParentId, role]);\n\n    // Update channel detail in state when data changes\n    React.useEffect(() => {\n        if (channelData?.viewChannelDetail) {\n            send({\n                type: Actions.SET_CHANNEL_DETAIL,\n                data: { channelsDetail: channelData.viewChannelDetail },\n            });\n        }\n    }, [channelData]);\n\n    // Update thread data in state when data changes\n    React.useEffect(() => {\n        if (threadsData) {\n            send({\n                type: Actions.SET_THREADS,\n                data: { threadData: threadsData?.threadMessages?.data || [] },\n            });\n        }\n    }, [threadsData]);\n\n    // Handle errors\n    React.useEffect(() => {\n        if (threadsError) {\n            send({\n                type: Actions.ERROR,\n                data: { error: threadsError },\n            });\n        }\n    }, [threadsError]);\n\n    const refetchChannelDetail = React.useCallback(\n        (id: string) => {\n            return channelRefetch({ id: id?.toString() });\n        },\n        [channelId],\n    );\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            if (channelId) refetchChannelDetail(channelId);\n            return () => {};\n        }, []),\n    );\n\n    return (\n        <>\n            {state.matches(BaseState.LoadingChannel) || channelLoading ? (\n                <Spinner color={colors.blue[500]} />\n            ) : (\n                <>\n                    <Box className=\"flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500\">\n                        <ThreadsView\n                            data={threadsData}\n                            loading={threadLoading || state.matches(BaseState.LoadingThreads)}\n                            refetch={threadsRefetch}\n                            subscribeToMore={threadsSubscribeToMore}\n                            error={error || threadsError}\n                            channelId={channelId}\n                            role={role}\n                            channelsDetail={channelsDetail}\n                            refetchChannelDetail={refetchChannelDetail}\n                        />\n                    </Box>\n                </>\n            )}\n        </>\n    );\n}\n\nexport default DialogThreads;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DialogThreads.js","sources":["../../../src/screens/inbox/DialogThreads.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';\nimport { ThreadConversationView } from './containers/ThreadConversationView';\nimport { ThreadsView } from './containers/ThreadsView';\nimport { useChannelDetailQuery, useThreadMessagesQueryWithOptions } from '../../queries/inboxQueries';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { useSelector } from 'react-redux';\nimport { config } from './config';\nimport colors from 'tailwindcss/colors';\nimport { useSafeDialogThreadsMachine } from './hooks/useSafeDialogThreadsMachine';\nimport { Actions, BaseState } from './workflow/dialog-threads-xstate';\nconst { MESSAGES_PER_PAGE } = config;\n\nexport function DialogThreads({ channelId, postParentId, role }) {\n    // Use the XState machine for state management\n    const [state, send] = useSafeDialogThreadsMachine();\n    const { context, value } = state;\n    const { channelsDetail, loading, error } = context;\n\n    // Fetch channel details\n    const {\n        data: channelData,\n        loading: channelLoading,\n        refetch: channelRefetch,\n    } = useChannelDetailQuery(channelId?.toString(), {});\n\n    // Fetch thread messages\n    const {\n        data: threadsData,\n        loading: threadLoading,\n        error: threadsError,\n        refetch: threadsRefetch,\n        subscribeToMore: threadsSubscribeToMore,\n    } = useThreadMessagesQueryWithOptions({\n        variables: {\n            channelId: channelId?.toString(),\n            role: role?.toString(),\n            limit: MESSAGES_PER_PAGE,\n            repliesLimit2: 5,\n        },\n    });\n\n    // Initialize the machine with props\n    React.useEffect(() => {\n        send({\n            type: Actions.INITIALIZE,\n            data: { channelId, postParentId, role },\n        });\n    }, [channelId, postParentId, role]);\n\n    // Update channel detail in state when data changes\n    React.useEffect(() => {\n        if (channelData?.viewChannelDetail) {\n            send({\n                type: Actions.SET_CHANNEL_DETAIL,\n                data: { channelsDetail: channelData.viewChannelDetail },\n            });\n        }\n    }, [channelData]);\n\n    // Update thread data in state when data changes\n    React.useEffect(() => {\n        if (threadsData) {\n            send({\n                type: Actions.SET_THREADS,\n                data: { threadData: threadsData?.threadMessages?.data || [] },\n            });\n        }\n    }, [threadsData]);\n\n    // Handle errors\n    React.useEffect(() => {\n        if (threadsError) {\n            send({\n                type: Actions.ERROR,\n                data: { error: threadsError },\n            });\n        }\n    }, [threadsError]);\n\n    const refetchChannelDetail = React.useCallback(\n        (id: string) => {\n            return channelRefetch({ id: id?.toString() });\n        },\n        [channelId],\n    );\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            if (channelId) refetchChannelDetail(channelId);\n            return () => {};\n        }, []),\n    );\n\n    return (\n        <>\n            {state.matches(BaseState.LoadingChannel) || channelLoading ? (\n                <Spinner color={colors.blue[500]} />\n            ) : (\n                <>\n                    <Box className=\"flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500\">\n                        <ThreadsView\n                            data={threadsData}\n                            loading={threadLoading || state.matches(BaseState.LoadingThreads)}\n                            refetch={threadsRefetch}\n                            subscribeToMore={threadsSubscribeToMore}\n                            error={error || threadsError}\n                            channelId={channelId}\n                            role={role}\n                            channelsDetail={channelsDetail}\n                            refetchChannelDetail={refetchChannelDetail}\n                        />\n                    </Box>\n                </>\n            )}\n        </>\n    );\n}\n\nexport default DialogThreads;\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React__default,{useRef,useState,useEffect,useCallback,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,useState,useEffect,useCallback,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 {useChatMessageAddedSubscription,CHAT_MESSAGE_ADDED}from'../../../queries/inboxQueries.js';import {startCase}from'lodash-es';import colors from'tailwindcss/colors';import {SubscriptionHandler}from'./SubscriptionHandler.js';import {useMessagesQuery}from'common/graphql';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -31,7 +31,8 @@ const LastMessageComponent = ({
   subscribeToNewMessages,
   title,
   lastMessage,
-  channelId
+  channelId,
+  subscribeToMore
 }) => {
   var _a, _b;
   React__default.useEffect(() => {
@@ -55,14 +56,25 @@ const LastMessageComponent = ({
     }
   }
   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)));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    SubscriptionHandler,
+    {
+      subscribeToMore,
+      document: CHAT_MESSAGE_ADDED,
+      variables: {
+        channelId: channelId == null ? void 0 : channelId.toString()
+      },
+      updateQuery: void 0
+    }
+  ), /* @__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,
-  forceRefresh
+  forceRefresh,
+  visible = true
 }) {
   var _a, _b, _c, _d;
   const isMountedRef = useRef(true);
@@ -71,6 +83,7 @@ const DialogsListItemComponent = function DialogsListItem2({
   const [title, setTitle] = useState("");
   const [messages, setMessages] = useState([]);
   const [lastMessage, setLastMessage] = useState(null);
+  const shouldQuery = !!(channel == null ? void 0 : channel.id) && visible;
   const {
     data: messagesQuery,
     loading: messageLoading,
@@ -82,13 +95,15 @@ const DialogsListItemComponent = function DialogsListItem2({
       parentId,
       limit: 10
     },
+    skip: !shouldQuery,
     fetchPolicy: "cache-and-network",
     refetchWritePolicy: "overwrite",
     nextFetchPolicy: "network-only",
     onCompleted: (data) => {
-      var _a2, _b2, _c2;
-      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");
-      if ((_c2 = data == null ? void 0 : data.messages) == null ? void 0 : _c2.data) {
+      var _a2;
+      if (!shouldQuery)
+        return;
+      if ((_a2 = data == null ? void 0 : data.messages) == null ? void 0 : _a2.data) {
         setMessages(data.messages.data);
         const sortedMessages = [...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());
         if (sortedMessages.length > 0) {
@@ -97,17 +112,18 @@ const DialogsListItemComponent = function DialogsListItem2({
       }
     },
     onError: (error) => {
+      if (!shouldQuery)
+        return;
       console.error(`Error fetching messages for channel ${channel == null ? void 0 : channel.id}:`, error);
     }
   });
   const {
-    data: newMessage,
-    loading: newMsgLoading,
-    error: newMsgError
-  } = useOnChatMessageAddedSubscription({
+    data: newMessage
+  } = useChatMessageAddedSubscription({
     variables: {
       channelId: (_b = channel == null ? void 0 : channel.id) == null ? void 0 : _b.toString()
-    }
+    },
+    skip: !shouldQuery
   });
   useEffect(() => {
     isMountedRef.current = true;
@@ -117,8 +133,7 @@ const DialogsListItemComponent = function DialogsListItem2({
   }, []);
   const refreshDialogState = useCallback(() => {
     var _a2;
-    if ((channel == null ? void 0 : channel.id) && isMountedRef.current) {
-      console.log("Forcing dialog state refresh for channel:", channel == null ? void 0 : channel.id);
+    if (shouldQuery && isMountedRef.current) {
       setLoading(true);
       const options = {
         channelId: (_a2 = channel == null ? void 0 : channel.id) == null ? void 0 : _a2.toString(),
@@ -126,18 +141,10 @@ const DialogsListItemComponent = function DialogsListItem2({
         limit: 10
       };
       refetchMessages(options).then((result) => {
-        var _a3, _b2, _c2;
+        var _a3, _b2;
         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
-            });
-          }
           setMessages(result.data.messages.data);
           setLastMessage(latestMessage);
         }
@@ -147,7 +154,7 @@ const DialogsListItemComponent = function DialogsListItem2({
         setLoading(false);
       });
     }
-  }, [channel == null ? void 0 : channel.id, refetchMessages, isMountedRef, parentId]);
+  }, [shouldQuery, channel == null ? void 0 : channel.id, refetchMessages, parentId]);
   const firstRenderRef = useRef(true);
   useFocusEffect(React__default.useCallback(() => {
     if (!(channel == null ? void 0 : channel.id))
@@ -196,10 +203,11 @@ const DialogsListItemComponent = function DialogsListItem2({
     };
   }, [channel == null ? void 0 : channel.id, refetchMessages, messages, isMountedRef, parentId]));
   useEffect(() => {
+    if (!shouldQuery)
+      return;
     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);
@@ -207,10 +215,9 @@ const DialogsListItemComponent = function DialogsListItem2({
         clearTimeout(timer);
       };
     }
-  }, [channel == null ? void 0 : channel.id, refreshDialogState, isMountedRef]);
+  }, [shouldQuery, channel == null ? void 0 : channel.id, refreshDialogState]);
   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`);
+    if (forceRefresh && shouldQuery && (channel == null ? void 0 : channel.id) && isMountedRef.current) {
       const timer = setTimeout(() => {
         var _a2;
         if (isMountedRef.current && refetchMessages) {
@@ -221,7 +228,6 @@ const DialogsListItemComponent = function DialogsListItem2({
           }).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`);
               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;
               setMessages(result.data.messages.data);
@@ -234,7 +240,7 @@ const DialogsListItemComponent = function DialogsListItem2({
       }, 50);
       return () => clearTimeout(timer);
     }
-  }, [channel == null ? void 0 : channel.id, forceRefresh, isMountedRef, refetchMessages, parentId]);
+  }, [shouldQuery, channel == null ? void 0 : channel.id, forceRefresh, refetchMessages, parentId]);
   const channelMembers = useMemo(() => {
     var _a2, _b2, _c2;
     return (_c2 = (_b2 = (_a2 = channel == null ? void 0 : channel.members) == null ? void 0 : _a2.filter((ch) => {
@@ -251,7 +257,7 @@ const DialogsListItemComponent = function DialogsListItem2({
       })) == null ? void 0 : _a2.filter((mu) => mu)) == null ? void 0 : _b2.join(", ")) != null ? _c2 : "";
       setTitle(titleString);
     }
-  }, [channelMembers, isMountedRef]);
+  }, [channelMembers]);
   const displayTitle = useMemo(() => {
     const length = 30;
     return title.length > length ? title.substring(0, length - 3) + "..." : title;
@@ -265,32 +271,27 @@ const DialogsListItemComponent = function DialogsListItem2({
     });
   }, [channel == null ? void 0 : channel.id, lastMessage, messages.length]);
   useEffect(() => {
-    var _a2;
+    if (!shouldQuery)
+      return;
     if ((newMessage == null ? void 0 : newMessage.chatMessageAdded) && (channel == null ? void 0 : channel.id)) {
       const incomingMessage = newMessage.chatMessageAdded;
       if (messages.some((msg) => msg.id === incomingMessage.id)) {
-        console.log("Message already in local state, skipping update:", incomingMessage.id);
         return;
       }
-      console.log("New message received from subscription:", {
-        channelId: channel.id,
-        messageId: incomingMessage.id,
-        message: ((_a2 = incomingMessage.message) == null ? void 0 : _a2.substring(0, 20)) + "...",
-        timestamp: incomingMessage.createdAt
-      });
       setMessages((prevMessages) => [...prevMessages, incomingMessage]);
       setLastMessage(incomingMessage);
     }
-  }, [newMessage, channel == null ? void 0 : channel.id, messages]);
+  }, [shouldQuery, newMessage, channel == null ? void 0 : channel.id, messages]);
   useEffect(() => {
+    if (!shouldQuery)
+      return;
     if ((channel == null ? void 0 : channel.lastMessage) && channel.lastMessage.id) {
-      console.log("Channel has lastMessage property:", channel.lastMessage.id);
       if (!messages.some((msg) => msg.id === channel.lastMessage.id)) {
         setMessages((prevMessages) => [...prevMessages, channel.lastMessage]);
         setLastMessage(channel.lastMessage);
       }
     }
-  }, [(_c = channel == null ? void 0 : channel.lastMessage) == null ? void 0 : _c.id, messages]);
+  }, [shouldQuery, (_c = channel == null ? void 0 : channel.lastMessage) == null ? void 0 : _c.id, messages]);
   return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: () => onOpen(channel == null ? void 0 : channel.id, displayTitle), className: "flex-1 border-gray-200 rounded-md dark:border-gray-600 dark:bg-gray-700", style: {
     borderBottomWidth: 1,
     borderColor: "#e5e7eb",
@@ -319,8 +320,8 @@ const DialogsListItemComponent = function DialogsListItem2({
     } })));
   })))), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1" }, /* @__PURE__ */ React__default.createElement(LastMessageComponent, { key: `last-msg-${(lastMessage == null ? void 0 : lastMessage.id) || "none"}-${messages.length}`, title: displayTitle, lastMessage, channelId: channel == null ? void 0 : channel.id, subscribeToNewMessages: () => {
     var _a2;
-    return subscribeToMore({
-      document: OnChatMessageAddedDocument,
+    return shouldQuery ? subscribeToMore({
+      document: CHAT_MESSAGE_ADDED,
       variables: {
         channelId: (_a2 = channel.id) == null ? void 0 : _a2.toString()
       },
@@ -348,7 +349,7 @@ const DialogsListItemComponent = function DialogsListItem2({
         });
         return merged;
       }
-    });
-  } }))));
+    }) : void 0;
+  }, subscribeToMore }))));
 };
 const DialogsListItem = React__default.memo(DialogsListItemComponent);export{DialogsListItem,DialogsListItemComponent};//# sourceMappingURL=DialogsListItem.js.map