@messenger-box/platform-mobile 0.0.1-alpha.362 → 0.0.1-alpha.365

package/lib/index.js

@@ -90,6 +90,8 @@ exports.inboxFeature = void 0;
 const React = __importStar(__webpack_require__(/*! react */ "react"));
 const client_react_1 = __webpack_require__(/*! @common-stack/client-react */ "@common-stack/client-react");
 const DialogMessages_1 = __webpack_require__(/*! ../screens/inbox/DialogMessages */ "./src/screens/inbox/DialogMessages.tsx");
+const DialogThreads_1 = __webpack_require__(/*! ../screens/inbox/DialogThreads */ "./src/screens/inbox/DialogThreads.tsx");
+const DialogThreadMessages_1 = __webpack_require__(/*! ../screens/inbox/DialogThreadMessages */ "./src/screens/inbox/DialogThreadMessages.tsx");
 const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
 const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
 const inboxConfig = {
@@ -111,6 +113,48 @@ const inboxConfig = {
             },
         },
     },
+    ['//thread']: {
+        exact: true,
+        name: 'Thread',
+        props: {
+            initialParams: { channelId: null, postParentId: null, role: null },
+            component: (props) => {
+                var _a, _b, _c, _d, _e, _f;
+                return (React.createElement(DialogThreads_1.DialogThreads, Object.assign({}, props, { channelId: (_b = (_a = props === null || props === void 0 ? void 0 : props.route) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.channelId, postParentId: (_d = (_c = props === null || props === void 0 ? void 0 : props.route) === null || _c === void 0 ? void 0 : _c.params) === null || _d === void 0 ? void 0 : _d.postParentId, role: (_f = (_e = props === null || props === void 0 ? void 0 : props.route) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.role })));
+            },
+            options: ({ navigation }) => {
+                return {
+                    headerShown: true,
+                    title: 'Thread',
+                    headerBackTitleVisible: false,
+                    gestureEnabled: false,
+                    swipeEnabled: false,
+                    headerLeft: (props) => (React.createElement(native_base_1.IconButton, { onPress: () => navigation.goBack(), icon: React.createElement(native_base_1.Icon, { size: 'lg', as: vector_icons_1.MaterialIcons, name: "arrow-back-ios", color: 'black' }) })),
+                };
+            },
+        },
+    },
+    ['//threadmessage']: {
+        exact: true,
+        name: 'ThreadMessage',
+        props: {
+            initialParams: { channelId: null, postParentId: null, isPostParentIdThread: null, role: null },
+            component: (props) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                return (React.createElement(DialogThreadMessages_1.DialogThreadMessages, Object.assign({}, props, { channelId: (_b = (_a = props === null || props === void 0 ? void 0 : props.route) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.channelId, postParentId: (_d = (_c = props === null || props === void 0 ? void 0 : props.route) === null || _c === void 0 ? void 0 : _c.params) === null || _d === void 0 ? void 0 : _d.postParentId, isPostParentIdThread: (_f = (_e = props === null || props === void 0 ? void 0 : props.route) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.isPostParentIdThread, role: (_h = (_g = props === null || props === void 0 ? void 0 : props.route) === null || _g === void 0 ? void 0 : _g.params) === null || _h === void 0 ? void 0 : _h.role })));
+            },
+            options: ({ navigation }) => {
+                return {
+                    headerShown: true,
+                    title: 'Inbox',
+                    headerBackTitleVisible: false,
+                    gestureEnabled: false,
+                    swipeEnabled: false,
+                    headerLeft: (props) => (React.createElement(native_base_1.IconButton, { onPress: () => navigation.goBack(), icon: React.createElement(native_base_1.Icon, { size: 'lg', as: vector_icons_1.MaterialIcons, name: "arrow-back-ios", color: 'black' }) })),
+                };
+            },
+        },
+    },
 };
 exports.inboxFeature = new client_react_1.Feature({
     routeConfig: inboxConfig,
@@ -190,6 +234,214 @@ function DialogMessages({ channelId }) {
 exports.DialogMessages = DialogMessages;
 
 
+/***/ }),
+
+/***/ "./src/screens/inbox/DialogThreadMessages.tsx":
+/*!****************************************************!*\
+  !*** ./src/screens/inbox/DialogThreadMessages.tsx ***!
+  \****************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.DialogThreadMessages = void 0;
+const React = __importStar(__webpack_require__(/*! react */ "react"));
+const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+const ThreadConversationView_1 = __webpack_require__(/*! ./containers/ThreadConversationView */ "./src/screens/inbox/containers/ThreadConversationView.tsx");
+const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
+function DialogThreadMessages({ channelId, postParentId, isPostParentIdThread, role }) {
+    const { data, loading: channelLoading, refetch, } = (0, platform_client_1.useViewChannelDetailQuery)({
+        variables: {
+            id: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+        },
+    });
+    const [sendThreadMessage] = (0, platform_client_1.useSendThreadMessageMutation)();
+    const [loading, setLoading] = React.useState(true);
+    const [channel, setChannel] = React.useState(null);
+    const [parentId, setParentId] = React.useState(postParentId);
+    const refetchChannelDetail = React.useCallback((id) => {
+        return refetch({ id: id === null || id === void 0 ? void 0 : id.toString() });
+    }, [channelId]);
+    (0, native_1.useFocusEffect)(React.useCallback(() => {
+        // Do something when the screen is focused
+        refetchChannelDetail(channelId);
+        return () => { };
+    }, []));
+    React.useEffect(() => {
+        setParentId(postParentId);
+    }, [postParentId]);
+    React.useEffect(() => {
+        if (data === null || data === void 0 ? void 0 : data.viewChannelDetail)
+            setChannel(data === null || data === void 0 ? void 0 : data.viewChannelDetail);
+    }, [data]);
+    React.useEffect(() => {
+        async function sendInitialMessage(channel) {
+            var _a;
+            const content = `Welcome to ${channel === null || channel === void 0 ? void 0 : channel.title}`;
+            const createdBy = (_a = channel === null || channel === void 0 ? void 0 : channel.creator) === null || _a === void 0 ? void 0 : _a.id;
+            await sendThreadMessage({
+                variables: {
+                    channelId,
+                    threadMessageInput: {
+                        content,
+                        role,
+                    },
+                    responderId: createdBy,
+                },
+                update: (cache, { data, errors }) => {
+                    var _a, _b;
+                    if (!data) {
+                        return;
+                    }
+                    setParentId((_b = (_a = data === null || data === void 0 ? void 0 : data.sendThreadMessage) === null || _a === void 0 ? void 0 : _a.lastMessage) === null || _b === void 0 ? void 0 : _b.id);
+                },
+            });
+        }
+        if ((!parentId || parentId == 0) && channel) {
+            sendInitialMessage(channel);
+        }
+        if (parentId)
+            setLoading(false);
+    }, [parentId, channel]);
+    return (React.createElement(native_base_1.Box, { bg: 'white', flex: 1 }, loading && !parentId ? (React.createElement(native_base_1.Spinner, null)) : (React.createElement(ThreadConversationView_1.ThreadConversationView, { channelId: channelId, postParentId: parentId, isPostParentIdThread: isPostParentIdThread, role: role }))));
+}
+exports.DialogThreadMessages = DialogThreadMessages;
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/DialogThreads.tsx":
+/*!*********************************************!*\
+  !*** ./src/screens/inbox/DialogThreads.tsx ***!
+  \*********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.DialogThreads = void 0;
+const React = __importStar(__webpack_require__(/*! react */ "react"));
+const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+const ThreadsView_1 = __webpack_require__(/*! ./containers/ThreadsView */ "./src/screens/inbox/containers/ThreadsView.tsx");
+const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
+function DialogThreads({ channelId, postParentId, role }) {
+    const { data, loading: channelLoading, refetch, } = (0, platform_client_1.useViewChannelDetailQuery)({
+        variables: {
+            id: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+        },
+    });
+    const channelsDetail = React.useMemo(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.viewChannelDetail))
+            return null;
+        return data === null || data === void 0 ? void 0 : data.viewChannelDetail;
+    }, [data]);
+    const refetchChannelDetail = React.useCallback((id) => {
+        return refetch({ id: id === null || id === void 0 ? void 0 : id.toString() });
+    }, [channelId]);
+    (0, native_1.useFocusEffect)(React.useCallback(() => {
+        // Do something when the screen is focused
+        refetchChannelDetail(channelId);
+        return () => { };
+    }, []));
+    return (
+    // <Box bg={'white'} flex={1} pt={5}>
+    React.createElement(React.Fragment, null, channelLoading ? (React.createElement(native_base_1.Spinner, null)) : (React.createElement(React.Fragment, null,
+        React.createElement(native_base_1.Box, { flex: 1, _dark: {
+                borderColor: 'coolGray.600',
+                backgroundColor: 'gray.700',
+            }, _light: {
+                backgroundColor: 'gray.50',
+            } },
+            React.createElement(ThreadsView_1.ThreadsView, { channelId: channelId, role: role, channelsDetail: channelsDetail, refetchChannelDetail: refetchChannelDetail }))))));
+    // return (
+    //     // <Box bg={'white'} flex={1} pt={5}>
+    //     <>
+    //         {channelLoading ? (
+    //             <Spinner />
+    //         ) : (
+    //             <>
+    //                 {postParentId || postParentId == 0 ? (
+    //                     <Box bg={'white'} flex={1}>
+    //                         <ThreadConversationView
+    //                             channelId={channelId}
+    //                             postParentId={postParentId}
+    //                             channelsDetail={channelsDetail}
+    //                             refetchChannelDetail={refetchChannelDetail}
+    //                         />
+    //                     </Box>
+    //                 ) : (
+    //                     <Box
+    //                         flex={1}
+    //                         _dark={{
+    //                             borderColor: 'coolGray.600',
+    //                             backgroundColor: 'gray.700',
+    //                         }}
+    //                         _light={{
+    //                             backgroundColor: 'gray.50',
+    //                         }}
+    //                     >
+    //                         <ThreadsView
+    //                             channelId={channelId}
+    //                             channelsDetail={channelsDetail}
+    //                             refetchChannelDetail={refetchChannelDetail}
+    //                         />
+    //                     </Box>
+    //                 )}
+    //             </>
+    //         )}
+    //     </>
+    // );
+}
+exports.DialogThreads = DialogThreads;
+
+
 /***/ }),
 
 /***/ "./src/screens/inbox/Inbox.tsx":
@@ -227,9 +479,11 @@ exports.Inbox = void 0;
 const React = __importStar(__webpack_require__(/*! react */ "react"));
 const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
 const Dialogs_1 = __webpack_require__(/*! ./containers/Dialogs */ "./src/screens/inbox/containers/Dialogs.tsx");
+const SupportServiceDialogs_1 = __webpack_require__(/*! ./containers/SupportServiceDialogs */ "./src/screens/inbox/containers/SupportServiceDialogs.tsx");
 const Inbox = (props) => {
-    const { channelFilters, channelRole } = props;
+    const { channelFilters, channelRole, supportServices } = props;
     return (React.createElement(native_base_1.Box, { bg: 'white', flex: 1 },
+        supportServices && React.createElement(SupportServiceDialogs_1.SupportServiceDialogs, Object.assign({ channelFilters: channelFilters, channelRole: channelRole }, props)),
         React.createElement(Dialogs_1.Dialogs, Object.assign({ channelFilters: channelFilters, channelRole: channelRole }, props))));
 };
 exports.Inbox = Inbox;
@@ -452,17 +706,19 @@ const DialogsListItemComponent = function DialogsListItem({ currentUser,
 // users,
 selectedChannelId, channel, onOpen, }) {
     var _a, _b, _c;
+    const parentId = null;
     const { data: messagesQuery, loading: messageLoading, refetch: refetchMessages, } = (0, platform_client_1.useMessagesQuery)({
         variables: {
             channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
-            limit: 1,
+            parentId: parentId,
+            limit: 25,
         },
         fetchPolicy: 'cache-and-network',
     });
     (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
         var _a;
         // Do something when the screen is focused
-        refetchMessages({ channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(), limit: 1 });
+        refetchMessages({ channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(), parentId: parentId, limit: 25 });
         return () => {
             // Do something when the screen is unfocused
             // Useful for cleanup functions
@@ -474,7 +730,9 @@ selectedChannelId, channel, onOpen, }) {
             return null;
         }
         const { data } = messagesQuery.messages;
-        return data[data.length - 1];
+        const filteredData = data === null || data === void 0 ? void 0 : data.filter((p) => (p === null || p === void 0 ? void 0 : p.message) !== '');
+        return filteredData[0];
+        //return data[data.length - 1];
     }, [messagesQuery]);
     const channelMembers = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
@@ -691,7 +949,7 @@ class Bubble extends react_1.default.Component {
                 return this.props.renderMessageImage(messageImageProps);
             }
             const { image, _id } = messageImageProps === null || messageImageProps === void 0 ? void 0 : messageImageProps.currentMessage;
-            return (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: () => this.props.setImageViewer(messageImageProps === null || messageImageProps === void 0 ? void 0 : messageImageProps.currentMessage, true) },
+            return (react_1.default.createElement(react_native_1.TouchableHighlight, { underlayColor: '#c0c0c0', style: { width: '100%' }, onPress: () => this.props.setImageViewer(messageImageProps === null || messageImageProps === void 0 ? void 0 : messageImageProps.currentMessage, true) },
                 react_1.default.createElement(react_native_1.View, { style: {
                         width: windowWidth - (windowWidth - 150),
                         height: windowHeight - (windowHeight - 100),
@@ -756,7 +1014,7 @@ class Bubble extends react_1.default.Component {
             this.renderTime(),
             this.renderTicks()));
         return (react_1.default.createElement(react_native_1.View, { style: [styles.container, this.props.containerStyle] },
-            react_1.default.createElement(react_native_1.TouchableOpacity, Object.assign({ disabled: true, accessibilityTraits: "text" }, this.props.touchableProps),
+            react_1.default.createElement(react_native_1.TouchableHighlight, Object.assign({ style: { width: '100%' }, underlayColor: '#c0c0c0', disabled: true, accessibilityTraits: "text" }, this.props.touchableProps),
                 react_1.default.createElement(react_native_1.View, { style: [styles.wrapper, this.props.wrapperStyle] },
                     react_1.default.createElement(react_native_1.View, null,
                         this.renderCustomView(),
@@ -978,48 +1236,10 @@ exports.ImageViewerModal = ImageViewerModal_1.default;
 
 /***/ }),
 
-/***/ "./src/screens/inbox/config/config.ts":
-/*!********************************************!*\
-  !*** ./src/screens/inbox/config/config.ts ***!
-  \********************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.config = void 0;
-const envalid_1 = __webpack_require__(/*! envalid */ "envalid");
-exports.config = (0, envalid_1.cleanEnv)(process['APP_ENV'] || process.env, {
-    MESSAGES_PER_PAGE: (0, envalid_1.num)({ devDefault: 10, default: 20 }),
-    FILES_PER_MESSAGE: (0, envalid_1.num)({ default: 10 }),
-    INBOX_MESSEGE_PATH: (0, envalid_1.str)({ default: 'MainStack.Message' }),
-    CALL_TO_ACTION_PATH: (0, envalid_1.str)({ default: 'MainStack.MyReservationDetails' }),
-    CALL_TO_ACTION_BOX_BGCOLOR: (0, envalid_1.str)({ default: '#0084ff' }),
-    CALL_TO_ACTION_BUTTON_BORDERCOLOR: (0, envalid_1.str)({ default: '#fff' }),
-    CALL_TO_ACTION_TEXT_COLOR: (0, envalid_1.str)({ default: '#fff' }),
-});
-
-
-/***/ }),
-
-/***/ "./src/screens/inbox/config/index.ts":
-/*!*******************************************!*\
-  !*** ./src/screens/inbox/config/index.ts ***!
-  \*******************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.config = void 0;
-var config_1 = __webpack_require__(/*! ./config */ "./src/screens/inbox/config/config.ts");
-Object.defineProperty(exports, "config", ({ enumerable: true, get: function () { return config_1.config; } }));
-
-
-/***/ }),
-
-/***/ "./src/screens/inbox/containers/ConversationView.tsx":
-/*!***********************************************************!*\
-  !*** ./src/screens/inbox/containers/ConversationView.tsx ***!
-  \***********************************************************/
+/***/ "./src/screens/inbox/components/SupportServiceDialogsListItem.tsx":
+/*!************************************************************************!*\
+  !*** ./src/screens/inbox/components/SupportServiceDialogsListItem.tsx ***!
+  \************************************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -1046,214 +1266,1757 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ConversationView = void 0;
+exports.SupportServiceDialogsListItem = exports.SupportServiceDialogsListItemComponent = void 0;
 const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
-const react_native_1 = __webpack_require__(/*! react-native */ "react-native");
+const date_fns_1 = __webpack_require__(/*! date-fns */ "date-fns");
 const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
-const react_redux_1 = __webpack_require__(/*! react-redux */ "react-redux");
-const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
-const ImagePicker = __importStar(__webpack_require__(/*! expo-image-picker */ "expo-image-picker"));
-const base_64_1 = __webpack_require__(/*! base-64 */ "base-64");
-const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
-const react_native_gifted_chat_1 = __webpack_require__(/*! react-native-gifted-chat */ "react-native-gifted-chat");
 const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
-const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
-const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
-const SlackMessageContainer_1 = __webpack_require__(/*! ../components/SlackMessageContainer */ "./src/screens/inbox/components/SlackMessageContainer/index.ts");
-const CachedImage_1 = __importDefault(__webpack_require__(/*! ../components/CachedImage */ "./src/screens/inbox/components/CachedImage/index.tsx"));
-const { MESSAGES_PER_PAGE, CALL_TO_ACTION_BOX_BGCOLOR, CALL_TO_ACTION_PATH, CALL_TO_ACTION_BUTTON_BORDERCOLOR, CALL_TO_ACTION_TEXT_COLOR, } = config_1.config;
-const ConversationViewComponent = ({ channelId }) => {
-    var _a;
-    const [channelToTop, setChannelToTop] = (0, react_1.useState)(0);
-    const [channelMessages, setChannelMessages] = (0, react_1.useState)([]);
-    const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
-    const [totalCount, setTotalCount] = (0, react_1.useState)(0);
-    const [selectedImage, setImage] = (0, react_1.useState)('');
-    const [loadingOldMessages, setLoadingOldMessages] = (0, react_1.useState)(false);
-    const color = (0, native_base_1.useColorModeValue)('white', 'black');
-    // const color = useColorModeValue('black', 'white');
-    const navigation = (0, native_1.useNavigation)();
-    const [files, setFiles] = (0, react_1.useState)([]);
-    const [images, setImages] = (0, react_1.useState)([]);
-    const [msg, setMsg] = (0, react_1.useState)('');
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [imageLoading, setImageLoading] = (0, react_1.useState)(false);
-    const [expoTokens, setExpoTokens] = (0, react_1.useState)([]);
-    const [isShowImageViewer, setImageViewer] = (0, react_1.useState)(false);
-    const [imageObject, setImageObject] = (0, react_1.useState)({});
-    const { startUpload } = (0, platform_client_1.useUploadFilesNative)();
-    const [sendMsg] = (0, platform_client_1.useSendMessagesMutation)();
-    const { data, loading: messageLoading, refetch, } = (0, platform_client_1.useMessagesQuery)({
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+const createdAtText = (value) => {
+    if (!value)
+        return '';
+    let date = new Date(value);
+    if ((0, date_fns_1.isToday)(date))
+        return 'Today';
+    if ((0, date_fns_1.isYesterday)(date))
+        return 'Yesterday';
+    return (0, date_fns_1.format)(new Date(value), 'MMM dd, yyyy');
+};
+/**
+ * TODO:
+ * - Get Reservation info: reservation date, status
+ * - Add ability to get property information: name, logo
+ */
+const SupportServiceDialogsListItemComponent = function DialogsListItem({ currentUser, 
+// users,
+selectedChannelId, channel, onOpen, refreshing, role, }) {
+    var _a, _b, _c, _d, _e;
+    const { data: threadMessages, loading: threadMessageLoading, error, refetch: refetchThreadMessages, } = (0, platform_client_1.useThreadMessagesQuery)({
         variables: {
-            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
-            limit: MESSAGES_PER_PAGE,
+            channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
+            role,
+            limit: 25,
         },
-        skip: !channelId,
         fetchPolicy: 'cache-and-network',
     });
-    const { data: channelsDetail, loading: channelLoading, refetch: refetchChannelDetail, } = (0, platform_client_1.useViewChannelDetailQuery)({
-        variables: {
-            id: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
-        },
-    });
-    // const { data: users } = useGetAllUsersQuery();
-    const { data: checkForMessages } = (0, platform_client_1.useCheckForNewMessagesQuery)({
-        variables: {
-            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
-        },
-        skip: !channelId,
-        fetchPolicy: 'network-only',
-        pollInterval: 5000,
-    });
+    // const {
+    //     data: messagesQuery,
+    //     loading: messageLoading,
+    //     refetch: refetchMessages,
+    // } = useMessagesQuery({
+    //     variables: {
+    //         channelId: channel?.id?.toString(),
+    //         limit: 25,
+    //     },
+    //     fetchPolicy: 'cache-and-network',
+    // });
     (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        var _a;
         // Do something when the screen is focused
-        refetchChannelDetail({ id: channelId === null || channelId === void 0 ? void 0 : channelId.toString() });
-        refetch({
-            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
-            limit: MESSAGES_PER_PAGE,
-        }).then(({ data }) => {
-            if (!(data === null || data === void 0 ? void 0 : data.messages)) {
-                return;
-            }
-            const { data: messages, totalCount } = data.messages;
+        //  refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
+        refetchThreadMessages({ channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(), limit: 25 });
+        return () => {
+            // Do something when the screen is unfocused
+            // Useful for cleanup functions
+        };
+    }, [refreshing]));
+    react_1.default.useEffect(() => {
+        var _a;
+        if (refreshing) {
+            //  refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
+            refetchThreadMessages({ channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(), limit: 25 });
+        }
+    }, [refreshing]);
+    // const lastMessageCreatorAndMembers = useMemo(() => {
+    //     const replyCount = threadMessages?.threadMessages?.data?.reduce((rc: any, t: any) => rc + t?.replyCount, 0);
+    //     if (!messagesQuery?.messages?.data?.length || threadMessages?.threadMessages?.totalCount == 0) {
+    //         return null;
+    //     }
+    //     const { data } = messagesQuery.messages;
+    //     const filteredData = data?.filter((p: any) => p?.message !== '');
+    //     if (replyCount == 0) {
+    //         const post: any =
+    //             threadMessages?.threadMessages?.data?.find((t: any) => {
+    //                 return t?.post?.message !== '';
+    //             }) ??
+    //             threadMessages?.threadMessages?.data?.find((t: any) => {
+    //                 return t?.post;
+    //             }) ??
+    //             null;
+    //         return post ? post?.post : null;
+    //     } else {
+    //         return filteredData[0];
+    //     }
+    //     // return data[data.length - 1];
+    // }, [threadMessages, messagesQuery]);
+    // const lastMessage = useMemo(() => {
+    //     if (!threadMessages?.threadMessages?.data?.length) {
+    //         return null;
+    //     }
+    //     const { data }: any = threadMessages.threadMessages;
+    //     const replies =
+    //         data
+    //             ?.map((t: any) => t?.replies)
+    //             ?.flat(1)
+    //             ?.filter((p: any) => p?.message !== '') ?? [];
+    //     if (replies?.length) {
+    //         return replies[0];
+    //         // return replies[replies.length - 1];
+    //     } else {
+    //         const post =
+    //             data?.find((t: any) => {
+    //                 return t?.post?.message !== '';
+    //             }) ??
+    //             data?.find((t: any) => {
+    //                 return t?.post;
+    //             }) ??
+    //             null;
+    //         return post ? post?.post : null;
+    //     }
+    // }, [threadMessages]);
+    const lastMessage = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_b = (_a = threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.threadMessages) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) {
+            return null;
+        }
+        const { data } = threadMessages.threadMessages;
+        const replies = (_e = (_d = (_c = data === null || data === void 0 ? void 0 : data.map((t) => t === null || t === void 0 ? void 0 : t.replies)) === null || _c === void 0 ? void 0 : _c.flat(1)) === null || _d === void 0 ? void 0 : _d.filter((p) => (p === null || p === void 0 ? void 0 : p.message) !== '')) !== null && _e !== void 0 ? _e : [];
+        if (replies === null || replies === void 0 ? void 0 : replies.length) {
+            return replies[0];
+            // return replies[replies.length - 1];
+        }
+        else {
+            const post = (_g = (_f = data === null || data === void 0 ? void 0 : data.find((t) => {
+                var _a;
+                return ((_a = t === null || t === void 0 ? void 0 : t.post) === null || _a === void 0 ? void 0 : _a.message) !== '';
+            })) !== null && _f !== void 0 ? _f : data === null || data === void 0 ? void 0 : data.find((t) => {
+                return t === null || t === void 0 ? void 0 : t.post;
+            })) !== null && _g !== void 0 ? _g : null;
+            return post ? post === null || post === void 0 ? void 0 : post.post : null;
+        }
+    }, [threadMessages]);
+    const creatorAndMembersId = react_1.default.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!(channel === null || channel === void 0 ? void 0 : channel.members))
+            return null;
+        const membersIds = (_c = (_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.filter((m) => { var _a; return ((_a = m === null || m === void 0 ? void 0 : m.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); })) === null || _b === void 0 ? void 0 : _b.map((mu) => { var _a; return (_a = mu === null || mu === void 0 ? void 0 : mu.user) === null || _a === void 0 ? void 0 : _a.id; })) !== null && _c !== void 0 ? _c : [];
+        const creatorId = (_d = channel === null || channel === void 0 ? void 0 : channel.creator) === null || _d === void 0 ? void 0 : _d.id;
+        const mergedIds = (_e = [].concat(membersIds, creatorId)) !== null && _e !== void 0 ? _e : [];
+        return (_f = mergedIds === null || mergedIds === void 0 ? void 0 : mergedIds.filter((m, pos) => (mergedIds === null || mergedIds === void 0 ? void 0 : mergedIds.indexOf(m)) === pos)) !== null && _f !== void 0 ? _f : [];
+    }, [channel]);
+    const postParentId = react_1.default.useMemo(() => {
+        var _a;
+        if (!(creatorAndMembersId === null || creatorAndMembersId === void 0 ? void 0 : creatorAndMembersId.length))
+            return null;
+        return (creatorAndMembersId === null || creatorAndMembersId === void 0 ? void 0 : creatorAndMembersId.length) && (creatorAndMembersId === null || creatorAndMembersId === void 0 ? void 0 : creatorAndMembersId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser.id))
+            ? null
+            : (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parentId)
+                ? lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parentId
+                : (_a = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.id) !== null && _a !== void 0 ? _a : 0;
+    }, [creatorAndMembersId, lastMessage]);
+    return (react_1.default.createElement(native_base_1.Pressable, { onPress: () => (channel === null || channel === void 0 ? void 0 : channel.id) !== selectedChannelId && onOpen(channel === null || channel === void 0 ? void 0 : channel.id, channel === null || channel === void 0 ? void 0 : channel.title, postParentId), borderWidth: '1', borderRadius: 10, borderColor: 'gray.200', flex: 1, _dark: {
+            borderColor: 'coolGray.600',
+            backgroundColor: 'gray.700',
+        }, _web: {
+            shadow: 2,
+            borderWidth: 0,
+        }, _light: {
+            backgroundColor: 'gray.50',
+        } },
+        react_1.default.createElement(native_base_1.HStack
+        // px={2}
+        // pl={3}
+        , { 
+            // px={2}
+            // pl={3}
+            py: 3, space: 2, w: '100%', flex: 1, direction: 'row', justifyContent: 'space-between', alignItems: 'center' },
+            react_1.default.createElement(native_base_1.Box, { flex: 0.1, alignItems: 'flex-start', pl: 3 },
+                react_1.default.createElement(native_base_1.Avatar.Group, { _avatar: {
+                        size: 'sm',
+                        bg: 'transparent',
+                    } },
+                    react_1.default.createElement(native_base_1.Avatar, { key: 'service-channels-key', bg: 'transparent', size: 9, top: 0, right: 0, zIndex: 1, _image: { borderRadius: 6, borderWidth: 2, borderColor: '#fff' }, source: {
+                            uri: (_b = channel === null || channel === void 0 ? void 0 : channel.creator) === null || _b === void 0 ? void 0 : _b.picture,
+                        } }, (0, lodash_1.startCase)((_d = (_c = channel === null || channel === void 0 ? void 0 : channel.creator) === null || _c === void 0 ? void 0 : _c.username) === null || _d === void 0 ? void 0 : _d.charAt(0))))),
+            react_1.default.createElement(native_base_1.Box, { flex: 0.9 },
+                react_1.default.createElement(native_base_1.HStack, { space: 1, flex: 1, direction: 'row', justifyContent: 'center', alignItems: 'center' },
+                    react_1.default.createElement(native_base_1.Box, { flex: 0.8 },
+                        react_1.default.createElement(native_base_1.Text, { color: "gray.600", fontSize: "lg", flexWrap: 'wrap', fontWeight: "semibold" }, channel === null || channel === void 0 ? void 0 : channel.title),
+                        react_1.default.createElement(native_base_1.Text, { color: "gray.600", noOfLines: 1 }, (_e = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message) !== null && _e !== void 0 ? _e : '')),
+                    react_1.default.createElement(native_base_1.Box, { flex: 0.2 },
+                        react_1.default.createElement(native_base_1.Text, { color: "gray.500" }, lastMessage ? createdAtText(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.createdAt) : '')))))));
+};
+exports.SupportServiceDialogsListItemComponent = SupportServiceDialogsListItemComponent;
+exports.SupportServiceDialogsListItem = react_1.default.memo(exports.SupportServiceDialogsListItemComponent);
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/components/ThreadsViewItem.tsx":
+/*!**********************************************************!*\
+  !*** ./src/screens/inbox/components/ThreadsViewItem.tsx ***!
+  \**********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ThreadViewItem = exports.ThreadViewItemComponent = void 0;
+const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+const date_fns_1 = __webpack_require__(/*! date-fns */ "date-fns");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+const createdAtText = (value) => {
+    if (!value)
+        return '';
+    let date = new Date(value);
+    if ((0, date_fns_1.isToday)(date))
+        return 'Today';
+    if ((0, date_fns_1.isYesterday)(date))
+        return 'Yesterday';
+    return (0, date_fns_1.format)(new Date(value), 'MMM dd, yyyy');
+};
+/**
+ * TODO:
+ * - Get Reservation info: reservation date, status
+ * - Add ability to get property information: name, logo
+ */
+const ThreadViewItemComponent = function DialogsListItem({ currentUser, 
+// users,
+thread, onOpen, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        // Do something when the screen is focused
+        return () => {
+            // Do something when the screen is unfocused
+            // Useful for cleanup functions
+        };
+    }, []));
+    const lastMessage = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        if (!thread) {
+            return null;
+        }
+        const replies = (_b = (_a = thread === null || thread === void 0 ? void 0 : thread.replies) === null || _a === void 0 ? void 0 : _a.filter((p) => (p === null || p === void 0 ? void 0 : p.message) !== '')) !== null && _b !== void 0 ? _b : [];
+        if (replies === null || replies === void 0 ? void 0 : replies.length) {
+            return replies[0];
+            // return replies[replies.length - 1];
+        }
+        else {
+            const post = (_c = thread === null || thread === void 0 ? void 0 : thread.post) !== null && _c !== void 0 ? _c : null;
+            return post ? post === null || post === void 0 ? void 0 : post.post : null;
+        }
+    }, [thread]);
+    const participants = react_1.default.useMemo(() => {
+        var _a, _b, _c;
+        if (!((_a = thread === null || thread === void 0 ? void 0 : thread.participants) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        return (_c = (_b = thread === null || thread === void 0 ? void 0 : thread.participants) === null || _b === void 0 ? void 0 : _b.filter((u) => { var _a; return ((_a = u === null || u === void 0 ? void 0 : u.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); })) !== null && _c !== void 0 ? _c : [];
+    }, [thread]);
+    const allParticipantsNames = react_1.default.useMemo(() => {
+        var _a, _b;
+        if (!(participants === null || participants === void 0 ? void 0 : participants.length))
+            return null;
+        return ((_b = (_a = participants === null || participants === void 0 ? void 0 : participants.map((p) => {
+            var _a, _b, _c;
+            return (_c = ((_a = p === null || p === void 0 ? void 0 : p.user) === null || _a === void 0 ? void 0 : _a.givenName) + ' ' + ((_b = p === null || p === void 0 ? void 0 : p.user) === null || _b === void 0 ? void 0 : _b.familyName)) !== null && _c !== void 0 ? _c : '';
+        })) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '');
+    }, [participants]);
+    return (react_1.default.createElement(native_base_1.VStack, { space: 1, py: 2, px: 2, borderWidth: '1', borderRadius: 10, borderColor: 'gray.200', flex: 1, _dark: {
+            borderColor: 'white',
+            backgroundColor: 'white',
+        }, _web: {
+            shadow: 2,
+            borderWidth: 0,
+        }, _light: {
+            backgroundColor: 'white',
+        } },
+        react_1.default.createElement(native_base_1.HStack
+        // px={2}
+        // pl={3}
+        , { 
+            // px={2}
+            // pl={3}
+            py: 2, space: 2, w: '100%', flex: 1, direction: 'row', justifyContent: 'space-between', alignItems: 'center' },
+            react_1.default.createElement(native_base_1.Box, { flex: 1 },
+                react_1.default.createElement(native_base_1.HStack, { flex: 1, space: 5, py: 2, alignItems: 'baseline' },
+                    react_1.default.createElement(native_base_1.Box, null,
+                        react_1.default.createElement(native_base_1.Avatar.Badge, { size: 4, left: 0, zIndex: 1, bg: "green.800" })),
+                    react_1.default.createElement(native_base_1.Box, null,
+                        react_1.default.createElement(native_base_1.Text, { color: "gray.600", fontSize: "lg", flexWrap: 'wrap', fontWeight: "semibold" }, allParticipantsNames || ''))),
+                react_1.default.createElement(native_base_1.HStack, { space: 1, flex: 1, direction: 'row', justifyContent: 'center', alignItems: 'center' },
+                    react_1.default.createElement(native_base_1.Box, { flex: 1 },
+                        react_1.default.createElement(native_base_1.HStack, { space: 2, py: 2 },
+                            react_1.default.createElement(native_base_1.Box, null,
+                                react_1.default.createElement(native_base_1.Avatar, { bg: 'transparent', size: 8, _image: { borderRadius: 6, borderWidth: 2, borderColor: '#fff' }, source: {
+                                        uri: (_b = (_a = thread === null || thread === void 0 ? void 0 : thread.post) === null || _a === void 0 ? void 0 : _a.author) === null || _b === void 0 ? void 0 : _b.picture,
+                                    } }, (0, lodash_1.startCase)((_e = (_d = (_c = thread === null || thread === void 0 ? void 0 : thread.post) === null || _c === void 0 ? void 0 : _c.author) === null || _d === void 0 ? void 0 : _d.username) === null || _e === void 0 ? void 0 : _e.charAt(0)))),
+                            react_1.default.createElement(native_base_1.Box, null,
+                                react_1.default.createElement(native_base_1.HStack, { space: 4 },
+                                    react_1.default.createElement(native_base_1.Text, null, (_k = ((_g = (_f = thread === null || thread === void 0 ? void 0 : thread.post) === null || _f === void 0 ? void 0 : _f.author) === null || _g === void 0 ? void 0 : _g.givenName) + ' ' + ((_j = (_h = thread === null || thread === void 0 ? void 0 : thread.post) === null || _h === void 0 ? void 0 : _h.author) === null || _j === void 0 ? void 0 : _j.familyName)) !== null && _k !== void 0 ? _k : ''),
+                                    react_1.default.createElement(native_base_1.Text, { color: "gray.500" }, (thread === null || thread === void 0 ? void 0 : thread.post) ? createdAtText((_l = thread === null || thread === void 0 ? void 0 : thread.post) === null || _l === void 0 ? void 0 : _l.createdAt) : '')),
+                                react_1.default.createElement(native_base_1.Text, { color: "gray.600", noOfLines: 2 }, (_o = (_m = thread === null || thread === void 0 ? void 0 : thread.post) === null || _m === void 0 ? void 0 : _m.message) !== null && _o !== void 0 ? _o : ''),
+                                !((_p = thread === null || thread === void 0 ? void 0 : thread.replies) === null || _p === void 0 ? void 0 : _p.length) && (react_1.default.createElement(native_base_1.Button, { size: 'xs', w: 150, variant: 'outline', _text: { fontSize: 12, color: '#000' }, onPress: () => { var _a, _b, _c; return onOpen((_a = thread === null || thread === void 0 ? void 0 : thread.channel) === null || _a === void 0 ? void 0 : _a.id, (_b = thread === null || thread === void 0 ? void 0 : thread.channel) === null || _b === void 0 ? void 0 : _b.title, (_c = thread === null || thread === void 0 ? void 0 : thread.post) === null || _c === void 0 ? void 0 : _c.id); } }, "Reply")))),
+                        ((_q = thread === null || thread === void 0 ? void 0 : thread.replies) === null || _q === void 0 ? void 0 : _q.length) > 0 && (react_1.default.createElement(native_base_1.HStack, { space: 2, pb: 2, pt: 1 },
+                            react_1.default.createElement(native_base_1.Box, null,
+                                react_1.default.createElement(native_base_1.Avatar, { bg: 'transparent', size: 8, _image: { borderRadius: 6, borderWidth: 2, borderColor: '#fff' }, source: {
+                                        uri: (_r = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.author) === null || _r === void 0 ? void 0 : _r.picture,
+                                    } }, (0, lodash_1.startCase)((_t = (_s = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.author) === null || _s === void 0 ? void 0 : _s.username) === null || _t === void 0 ? void 0 : _t.charAt(0)))),
+                            react_1.default.createElement(native_base_1.Box, null,
+                                react_1.default.createElement(native_base_1.HStack, { space: 4 },
+                                    react_1.default.createElement(native_base_1.Text, null, (_w = ((_u = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.author) === null || _u === void 0 ? void 0 : _u.givenName) +
+                                        ' ' +
+                                        ((_v = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.author) === null || _v === void 0 ? void 0 : _v.familyName)) !== null && _w !== void 0 ? _w : ''),
+                                    react_1.default.createElement(native_base_1.Text, { color: "gray.500" }, lastMessage ? createdAtText(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.createdAt) : '')),
+                                react_1.default.createElement(native_base_1.Text, { color: "gray.600", noOfLines: 2 }, (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message)
+                                    ? (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message.length) < 70
+                                        ? `${lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message}`
+                                        : `${lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message.substring(0, 68)}....`
+                                    : ''),
+                                react_1.default.createElement(native_base_1.Button, { size: 'xs', w: 150, variant: 'outline', _text: { fontSize: 12, color: '#000' }, onPress: () => { var _a, _b, _c; return onOpen((_a = thread === null || thread === void 0 ? void 0 : thread.channel) === null || _a === void 0 ? void 0 : _a.id, (_b = thread === null || thread === void 0 ? void 0 : thread.channel) === null || _b === void 0 ? void 0 : _b.title, (_c = thread === null || thread === void 0 ? void 0 : thread.post) === null || _c === void 0 ? void 0 : _c.id); } }, "Reply"))))))))));
+};
+exports.ThreadViewItemComponent = ThreadViewItemComponent;
+exports.ThreadViewItem = react_1.default.memo(exports.ThreadViewItemComponent);
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/config/config.ts":
+/*!********************************************!*\
+  !*** ./src/screens/inbox/config/config.ts ***!
+  \********************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.config = void 0;
+const envalid_1 = __webpack_require__(/*! envalid */ "envalid");
+exports.config = (0, envalid_1.cleanEnv)(process['APP_ENV'] || process.env, {
+    MESSAGES_PER_PAGE: (0, envalid_1.num)({ devDefault: 10, default: 20 }),
+    FILES_PER_MESSAGE: (0, envalid_1.num)({ default: 10 }),
+    INBOX_MESSEGE_PATH: (0, envalid_1.str)({ default: 'MainStack.Message' }),
+    // THREAD_MESSEGE_PATH: str({ default: 'MainStack.Thread' }),
+    // THREADS_PATH: str({ default: 'MainStack.ThreadMessage' }),
+    THREAD_MESSEGE_PATH: (0, envalid_1.str)({ default: 'MainStack.ThreadMessage' }),
+    THREADS_PATH: (0, envalid_1.str)({ default: 'MainStack.Thread' }),
+    CALL_TO_ACTION_PATH: (0, envalid_1.str)({ default: 'MainStack.MyReservationDetails' }),
+    CALL_TO_ACTION_BOX_BGCOLOR: (0, envalid_1.str)({ default: '#0084ff' }),
+    CALL_TO_ACTION_BUTTON_BORDERCOLOR: (0, envalid_1.str)({ default: '#fff' }),
+    CALL_TO_ACTION_TEXT_COLOR: (0, envalid_1.str)({ default: '#fff' }),
+});
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/config/index.ts":
+/*!*******************************************!*\
+  !*** ./src/screens/inbox/config/index.ts ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.config = void 0;
+var config_1 = __webpack_require__(/*! ./config */ "./src/screens/inbox/config/config.ts");
+Object.defineProperty(exports, "config", ({ enumerable: true, get: function () { return config_1.config; } }));
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/containers/ConversationView.tsx":
+/*!***********************************************************!*\
+  !*** ./src/screens/inbox/containers/ConversationView.tsx ***!
+  \***********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ConversationView = void 0;
+const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+const react_native_1 = __webpack_require__(/*! react-native */ "react-native");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
+const react_redux_1 = __webpack_require__(/*! react-redux */ "react-redux");
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+const ImagePicker = __importStar(__webpack_require__(/*! expo-image-picker */ "expo-image-picker"));
+const base_64_1 = __webpack_require__(/*! base-64 */ "base-64");
+const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
+const react_native_gifted_chat_1 = __webpack_require__(/*! react-native-gifted-chat */ "react-native-gifted-chat");
+const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
+const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
+const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
+const SlackMessageContainer_1 = __webpack_require__(/*! ../components/SlackMessageContainer */ "./src/screens/inbox/components/SlackMessageContainer/index.ts");
+const CachedImage_1 = __importDefault(__webpack_require__(/*! ../components/CachedImage */ "./src/screens/inbox/components/CachedImage/index.tsx"));
+const date_fns_1 = __webpack_require__(/*! date-fns */ "date-fns");
+const { MESSAGES_PER_PAGE, CALL_TO_ACTION_BOX_BGCOLOR, CALL_TO_ACTION_PATH, CALL_TO_ACTION_BUTTON_BORDERCOLOR, CALL_TO_ACTION_TEXT_COLOR, } = config_1.config;
+const createdAtText = (value) => {
+    if (!value)
+        return '';
+    let date = new Date(value);
+    if ((0, date_fns_1.isToday)(date))
+        return 'Today';
+    if ((0, date_fns_1.isYesterday)(date))
+        return 'Yesterday';
+    return (0, date_fns_1.format)(new Date(value), 'MMM dd, yyyy');
+};
+const ConversationViewComponent = ({ channelId }) => {
+    var _a;
+    const [channelToTop, setChannelToTop] = (0, react_1.useState)(0);
+    const [channelMessages, setChannelMessages] = (0, react_1.useState)([]);
+    const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
+    const [totalCount, setTotalCount] = (0, react_1.useState)(0);
+    const [selectedImage, setImage] = (0, react_1.useState)('');
+    const [loadingOldMessages, setLoadingOldMessages] = (0, react_1.useState)(false);
+    const color = (0, native_base_1.useColorModeValue)('white', 'black');
+    // const color = useColorModeValue('black', 'white');
+    const navigation = (0, native_1.useNavigation)();
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [images, setImages] = (0, react_1.useState)([]);
+    const [msg, setMsg] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [loadEarlierMsg, setLoadEarlierMsg] = (0, react_1.useState)(false);
+    const [imageLoading, setImageLoading] = (0, react_1.useState)(false);
+    const [expoTokens, setExpoTokens] = (0, react_1.useState)([]);
+    const [isShowImageViewer, setImageViewer] = (0, react_1.useState)(false);
+    const [imageObject, setImageObject] = (0, react_1.useState)({});
+    const isFocused = (0, native_1.useIsFocused)();
+    const { data: mongooseObjectId } = (0, platform_client_1.useGetNewMongooseObjectIdQuery)({
+        fetchPolicy: 'network-only',
+        pollInterval: 5000,
+    });
+    const { data: newMessage, loading: newMsgLoading, error: newMsgError, } = (0, platform_client_1.useOnChatMessageAddedSubscription)({
+        variables: {
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+        },
+    });
+    const { startUpload } = (0, platform_client_1.useUploadFilesNative)();
+    const [sendMsg] = (0, platform_client_1.useSendMessagesMutation)();
+    const { data, loading: messageLoading, refetch, } = (0, platform_client_1.useMessagesQuery)({
+        variables: {
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            parentId: null,
+            limit: MESSAGES_PER_PAGE,
+        },
+        skip: !channelId,
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
+    const { data: channelsDetail, loading: channelLoading, refetch: refetchChannelDetail, } = (0, platform_client_1.useViewChannelDetailQuery)({
+        variables: {
+            id: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+        },
+    });
+    // const { data: users } = useGetAllUsersQuery();
+    // const { data: checkForMessages }: any = useCheckForNewMessagesQuery({
+    //     variables: {
+    //         channelId: channelId?.toString(),
+    //     },
+    //     skip: !channelId,
+    //     fetchPolicy: 'network-only',
+    //     pollInterval: 5000,
+    // });
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        // Do something when the screen is focused
+        refetchChannelDetail({ id: channelId === null || channelId === void 0 ? void 0 : channelId.toString() });
+        refetch({
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            parentId: null,
+            limit: MESSAGES_PER_PAGE,
+        }).then(({ data }) => {
+            if (!(data === null || data === void 0 ? void 0 : data.messages)) {
+                return;
+            }
+            const { data: messages, totalCount } = data.messages;
+            setTotalCount(totalCount);
+            setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...oldMessages, ...messages], ({ id }) => id));
+        });
+        return () => {
+            // Do something when the screen is unfocused
+            // Useful for cleanup functions
+            setTotalCount(0);
+            setChannelMessages([]);
+        };
+    }, [isFocused]));
+    react_1.default.useEffect(() => {
+        if (selectedImage)
+            setImageLoading(false);
+    }, [selectedImage]);
+    // const currentUser = useMemo(
+    //     () => users?.getUsers?.find(({ alias }: any) => alias?.includes(auth?.auth0UserId)),
+    //     [users, auth],
+    // );
+    // useEffect(() => {
+    //     if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
+    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
+    //         if (messages && messages.length > 0) {
+    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+    //         }
+    //         if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
+    //     }
+    // }, [data, loadingOldMessages, channelMessages]);
+    // useEffect(() => {
+    //     if (data?.messages?.data) {
+    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
+    //         if (
+    //             messages &&
+    //             messages.length > 0 &&
+    //             totalCount !== messeageTotalCount &&
+    //             (loadingOldMessages || channelMessages.length === 0)
+    //         ) {
+    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+    //             setLoadingOldMessages(false);
+    //             setTotalCount(messeageTotalCount);
+    //         }
+    //         // if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
+    //     }
+    // }, [data, loadingOldMessages, channelMessages]);///
+    ////......... initiate messages ......................////
+    // useEffect(() => {
+    //     if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
+    //         console.log('loading msg')
+    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
+    //         if (messages && messages.length > 0) {
+    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+    //             setLoadingOldMessages(false);
+    //         }
+    //         if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
+    //     }
+    // }, [data, loadingOldMessages, channelMessages, totalCount]);
+    ////.... initiate messages end................................////
+    // useEffect(() => {
+    //     if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
+    //         console.log('initiate msg')
+    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
+    //         if (messages && messages.length > 0) {
+    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+    //             setTotalCount(messeageTotalCount);
+    //         }
+    //         if(loadingOldMessages) setLoadingOldMessages(false);
+    //     }
+    // }, [data, channelMessages,loadingOldMessages]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if ((((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) && channelMessages.length === 0) || (((_b = data === null || data === void 0 ? void 0 : data.messages) === null || _b === void 0 ? void 0 : _b.data) && loadingOldMessages)) {
+            const { data: messages, totalCount: messeageTotalCount } = data.messages;
+            if (messages && messages.length > 0) {
+                setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...messages, ...oldMessages], ({ id }) => id));
+                setTotalCount(messeageTotalCount);
+            }
+            setLoadEarlierMsg(false);
+            if (loadingOldMessages)
+                setLoadingOldMessages(false);
+        }
+    }, [data, loadingOldMessages, channelMessages]);
+    react_1.default.useEffect(() => {
+        if (newMessage) {
+            const msg = newMessage === null || newMessage === void 0 ? void 0 : newMessage.chatMessageAdded;
+            setTotalCount((preCount) => preCount + 1);
+            setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...oldMessages, msg], ({ id }) => id));
+        }
+    }, [newMessage]);
+    // useEffect(() => {
+    //     if (data?.messages?.data) {
+    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
+    //        console.log('messeageTotalCount',messeageTotalCount)
+    //        console.log('totalCount',totalCount)
+    //         if (messages && messages.length > 0) {
+    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+    //         }
+    //         if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
+    //     }
+    // }, [data]);
+    // useEffect(() => {
+    //     if (checkForMessages?.messages?.totalCount > totalCount) {
+    //         const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
+    //         refetch({
+    //             limit: numberOfNewMessages,
+    //         }).then(({ data }) => {
+    //             if (!data?.messages) {
+    //                 return;
+    //             }
+    //             const { data: messages, totalCount }:any = data.messages;
+    //             setTotalCount(totalCount);
+    //             setChannelMessages((oldMessages:any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
+    //         });
+    //     }
+    // }, [checkForMessages, totalCount]);
+    ////////...............New msg check...........////
+    // useEffect(() => {
+    //     if (
+    //         !messageLoading &&
+    //         checkForMessages?.messages?.totalCount &&
+    //         checkForMessages?.messages?.totalCount > totalCount
+    //     ) {
+    //         const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
+    //         console.log('new msg check');
+    //         refetch({
+    //             channelId: channelId?.toString(),
+    //             parentId: null,
+    //             limit: numberOfNewMessages,
+    //         }).then(({ data }) => {
+    //             if (!data?.messages) {
+    //                 return;
+    //             }
+    //             const { data: messages, totalCount }: any = data.messages;
+    //             setTotalCount(totalCount);
+    //             setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
+    //         });
+    //     }
+    // }, [checkForMessages, totalCount]);
+    ////////////....new msg check end.........//
+    // const onFetchOld = useCallback(() => {
+    //    // if (data?.messages?.totalCount > channelMessages.length) {
+    //     //if(channelMessages.length !== data?.messages?.totalCount){
+    //     if(totalCount > channelMessages.length){
+    //         setLoadingOldMessages(true);
+    //         refetch({ skip: channelMessages.length });
+    //     }
+    // }, [data, channelMessages]);
+    // const onFetchOld = () => {
+    //     // if (data?.messages?.totalCount > channelMessages.length) {
+    //      //if(channelMessages.length !== data?.messages?.totalCount){
+    //      if(totalCount > channelMessages.length){
+    //          setLoadingOldMessages(true);
+    //          refetch({ skip: channelMessages.length });
+    //      }
+    //  };
+    // const onFetchOld = useCallback(() => {
+    //     if (data?.messages?.totalCount > channelMessages.length) {
+    //         console.log('fetchmore')
+    //         refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then((res:any)=>{
+    //             setLoadingOldMessages(true);
+    //         });
+    //     }
+    // }, [data, channelMessages]);
+    const onFetchOld = (0, react_1.useCallback)((data, channelMessages) => {
+        var _a, _b;
+        if (((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.totalCount) > channelMessages.length) {
+            setLoadEarlierMsg(true);
+            (_b = refetch({ channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(), parentId: null, skip: channelMessages.length })) === null || _b === void 0 ? void 0 : _b.then((res) => setLoadingOldMessages(true));
+        }
+    }, []);
+    // const onFetchOld = () => {
+    //      if(totalCount > channelMessages.length){
+    //         console.log('totalCount',totalCount)
+    //     console.log('channelMessages.length',channelMessages.length)
+    //          setLoadingOldMessages(true);
+    //          refetch({
+    //             skip: channelMessages.length
+    //          });
+    //      }
+    //  };
+    // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
+    //     return contentOffset.y <= 100; // 100px from top
+    // };
+    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
+        const paddingToTop = 60;
+        return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
+    };
+    const dataURLtoFile = (dataurl, filename) => {
+        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = (0, base_64_1.encode)(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], filename, { type: mime });
+    };
+    const onSelectImages = async () => {
+        setImageLoading(true);
+        let imageSource = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ImagePicker.MediaTypeOptions.Images,
+            allowsEditing: true,
+            aspect: [4, 3],
+            quality: 1,
+            base64: true,
+        });
+        if (!imageSource.cancelled) {
+            const image = 'data:image/jpeg;base64,' + (imageSource === null || imageSource === void 0 ? void 0 : imageSource.base64);
+            setImage(image);
+            const file = dataURLtoFile(image, 'inputImage.jpg');
+            setFiles((files) => files.concat(file));
+            setImages((images) => images.concat(imageSource));
+        }
+        if (imageSource.cancelled)
+            setLoading(false);
+    };
+    const sendPushNotification = async (title, body, data, to) => {
+        try {
+            const response = await fetch('https://exp.host/--/api/v2/push/send/', {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Accept-Encoding': 'gzip, deflate',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    to: to,
+                    data: data,
+                    title: title,
+                    body: body,
+                    sound: react_native_1.Platform.OS === 'android' ?  false || null : 'default',
+                }),
+            });
+            const result = await response.json();
+            console.log('expo api response', result);
+        }
+        catch (error) {
+            console.error('Error:', error);
+        }
+        // fetch('https://exp.host/--/api/v2/push/send/', {
+        //     method: 'POST',
+        //     headers: {
+        //         Accept: 'application/json',
+        //         'Accept-Encoding': 'gzip, deflate',
+        //         'Content-Type': 'application/json',
+        //     },
+        //     body: JSON.stringify({
+        //         to: to,
+        //         data: data,
+        //         title: title,
+        //         body: body,
+        //         sound: Platform.OS === 'android' ? null : 'default',
+        //     }),
+        // });
+    };
+    // const handleSend = useCallback(
+    //     async (message: string) => {
+    //         // if (!(message && channelId)) {
+    //         //     return;
+    //         // }
+    //         if (!channelId) return;
+    //         if (!message && message != ' ' && images.length == 0) return;
+    //         setLoading(true);
+    //         const { data } = await sendMsg({
+    //             variables: {
+    //                 channelId,
+    //                 content: message,
+    //             },
+    //             update: (cache, { data, errors }) => {
+    //                 if (!data || errors) {
+    //                     setLoading(false);
+    //                     return;
+    //                 }
+    //                 setChannelMessages((messages) => [...messages, data?.sendMessage]);
+    //                 setTotalCount((t) => t + 1);
+    //                 setChannelToTop(channelToTop + 1);
+    //                 setLoading(false);
+    //                 const title: String = currentUser?.givenName+' '+currentUser?.familyName+' in Followup Chat';
+    //                 const body: String = message;
+    //                 const notificationData: any = {
+    //                     url: config.INBOX_MESSEGE_PATH,
+    //                     params: { channelId, hideTabBar: true },
+    //                     screen: 'DialogMessages',
+    //                 };
+    //                 console.log('expo to',JSON.stringify(expoTokens));
+    //                 if (expoTokens?.length > 0) {
+    //                     const to: any = expoTokens?.length > 0 ? expoTokens : [];
+    //                     sendPushNotification(title, body, notificationData, to);
+    //                 }
+    //                 setMsg('');
+    //             },
+    //         });
+    //         if (images && images.length > 0 && data?.sendMessage?.id) {
+    //             const { id: postId } = data.sendMessage;
+    //             setLoading(true);
+    //             const uploadResponse = await startUpload({
+    //                 file: images,
+    //                 saveUploadedFile: {
+    //                     variables: {
+    //                         postId,
+    //                     },
+    //                 },
+    //                 createUploadLink: {
+    //                     variables: {
+    //                         postId,
+    //                     },
+    //                 },
+    //             });
+    //             if (uploadResponse?.error) setLoading(false);
+    //             const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+    //             if (uploadResponse.data) {
+    //                 setImage('');
+    //                 setFiles([]);
+    //                 setImages([]);
+    //                 setLoading(false);
+    //             }
+    //             setChannelMessages((messages) =>
+    //                 messages.map((message) => {
+    //                     if (message.id === postId) {
+    //                         return {
+    //                             ...message,
+    //                             files: {
+    //                                 totalCount: uploadedFiles.length,
+    //                                 data: uploadedFiles,
+    //                             },
+    //                         };
+    //                     }
+    //                     return message;
+    //                 }),
+    //             );
+    //         }
+    //     },
+    //     [setChannelMessages, currentUser, channelId, images,expoTokens],
+    // );
+    const handleSend = (0, react_1.useCallback)(async (message) => {
+        var _a;
+        if (!channelId)
+            return;
+        if (!message && message != ' ' && images.length == 0)
+            return;
+        if (images && images.length > 0) {
+            const postId = mongooseObjectId === null || mongooseObjectId === void 0 ? void 0 : mongooseObjectId.getNewMongooseObjectId;
+            setLoading(true);
+            const uploadResponse = await startUpload({
+                file: images,
+                saveUploadedFile: {
+                    variables: {
+                        postId,
+                    },
+                },
+                createUploadLink: {
+                    variables: {
+                        postId,
+                    },
+                },
+            });
+            if (uploadResponse === null || uploadResponse === void 0 ? void 0 : uploadResponse.error)
+                setLoading(false);
+            const uploadedFiles = uploadResponse.data;
+            if (uploadResponse.data) {
+                setImage('');
+                setFiles([]);
+                setImages([]);
+                //setLoading(false);
+                const files = (_a = uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.map((f) => f.id)) !== null && _a !== void 0 ? _a : null;
+                await sendMsg({
+                    variables: {
+                        postId,
+                        channelId,
+                        content: message,
+                        files,
+                    },
+                    update: (cache, { data, errors }) => {
+                        if (!data || errors) {
+                            setLoading(false);
+                            return;
+                        }
+                        // setChannelMessages((messages: any) => [
+                        //     ...messages,
+                        //     {
+                        //         ...data?.sendMessage,
+                        //         files: {
+                        //             totalCount: uploadedFiles.length,
+                        //             data: uploadedFiles,
+                        //         },
+                        //     },
+                        // ]);
+                        // setTotalCount((t: any) => t + 1);
+                        setChannelToTop(channelToTop + 1);
+                        setLoading(false);
+                        setMsg('');
+                        const msg = message == '' ? 'Send a file' : message;
+                        fetchTokenAndSendPushNotification(msg, channelId);
+                    },
+                });
+            }
+        }
+        else {
+            setLoading(true);
+            await sendMsg({
+                variables: {
+                    channelId,
+                    content: message,
+                },
+                update: (cache, { data, errors }) => {
+                    if (!data || errors) {
+                        setLoading(false);
+                        return;
+                    }
+                    // setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
+                    // setTotalCount((t: any) => t + 1);
+                    setChannelToTop(channelToTop + 1);
+                    setLoading(false);
+                    setMsg('');
+                    fetchTokenAndSendPushNotification(message, channelId);
+                },
+            });
+        }
+    }, [mongooseObjectId, setChannelMessages, channelId, images, channelToTop, expoTokens]);
+    const fetchTokenAndSendPushNotification = (message, channelId) => {
+        var _a, _b, _c, _d, _e;
+        const givenName = (_b = (_a = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _a === void 0 ? void 0 : _a.given_name) !== null && _b !== void 0 ? _b : '';
+        const familyName = (_d = (_c = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _c === void 0 ? void 0 : _c.family_name) !== null && _d !== void 0 ? _d : '';
+        const fullName = givenName ? givenName + ' ' + familyName : '';
+        const title = fullName ? fullName : 'Message';
+        const body = message;
+        const notificationData = {
+            url: config_1.config.INBOX_MESSEGE_PATH,
+            params: { channelId, hideTabBar: true },
+            screen: 'DialogMessages',
+        };
+        (_e = refetchChannelDetail({ id: channelId === null || channelId === void 0 ? void 0 : channelId.toString() })) === null || _e === void 0 ? void 0 : _e.then((res) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            if ((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewChannelDetail) === null || _b === void 0 ? void 0 : _b.members) === null || _c === void 0 ? void 0 : _c.length) {
+                const channelData = (_g = (_f = (_e = (_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.viewChannelDetail) === null || _e === void 0 ? void 0 : _e.members) === null || _f === void 0 ? void 0 : _f.filter((mu) => { var _a; return ((_a = mu === null || mu === void 0 ? void 0 : mu.user) === null || _a === void 0 ? void 0 : _a.id) != (auth === null || auth === void 0 ? void 0 : auth.id); })) !== null && _g !== void 0 ? _g : [];
+                const tokens = (_l = (_k = (_j = (_h = channelData === null || channelData === void 0 ? void 0 : channelData.map((u) => {
+                    var _a, _b, _c, _d;
+                    return (_d = (_c = (_b = (_a = u === null || u === void 0 ? void 0 : u.user) === null || _a === void 0 ? void 0 : _a.tokens) === null || _b === void 0 ? void 0 : _b.filter((t) => (t === null || t === void 0 ? void 0 : t.type) == 'EXPO_NOTIFICATION_TOKEN')) === null || _c === void 0 ? void 0 : _c.map((et) => et === null || et === void 0 ? void 0 : et.token)) !== null && _d !== void 0 ? _d : [];
+                })) === null || _h === void 0 ? void 0 : _h.flat(1)) === null || _j === void 0 ? void 0 : _j.filter((t) => t)) === null || _k === void 0 ? void 0 : _k.filter((value, index, array) => array.indexOf(value) === index)) !== null && _l !== void 0 ? _l : [];
+                console.log('expo to', JSON.stringify(tokens));
+                if ((tokens === null || tokens === void 0 ? void 0 : tokens.length) > 0) {
+                    const to = (tokens === null || tokens === void 0 ? void 0 : tokens.length) > 0 ? tokens : [];
+                    sendPushNotification(title, body, notificationData, to);
+                }
+            }
+        });
+    };
+    // const handleSend1 = async (message: string) => {
+    //     if (!channelId) return;
+    //     if (!message && message != ' ' && images.length == 0) return;
+    //     setLoading(true);
+    //     const { data } = await sendMsg({
+    //         variables: {
+    //             channelId,
+    //             content: message,
+    //         },
+    //         update: (cache, { data, errors }: any) => {
+    //             if (!data || errors) {
+    //                 setLoading(false);
+    //                 return;
+    //             }
+    //             setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
+    //             setTotalCount((t: any) => t + 1);
+    //             setChannelToTop(channelToTop + 1);
+    //             setLoading(false);
+    //             setMsg('');
+    //             const givenName = auth?.profile?.given_name ?? '';
+    //             const familyName = auth?.profile?.family_name ?? '';
+    //             const fullName = givenName ? givenName + ' ' + familyName : '';
+    //             const title: String = fullName ? fullName : 'Message';
+    //             const body: String = message;
+    //             const notificationData: any = {
+    //                 url: config.INBOX_MESSEGE_PATH,
+    //                 params: { channelId, hideTabBar: true },
+    //                 screen: 'DialogMessages',
+    //             };
+    //             refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
+    //                 if (res?.data?.viewChannelDetail?.members?.length) {
+    //                     const channelData: any =
+    //                         res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
+    //                     const tokens: any =
+    //                         channelData
+    //                             ?.map(
+    //                                 (u: any) =>
+    //                                     u?.user?.tokens
+    //                                         ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
+    //                                         ?.map((et: any) => et?.token) ?? [],
+    //                             )
+    //                             ?.flat(1)
+    //                             ?.filter((t: any) => t)
+    //                             ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
+    //                     console.log('expo to', JSON.stringify(tokens));
+    //                     if (tokens?.length > 0) {
+    //                         const to: any = tokens?.length > 0 ? tokens : [];
+    //                         sendPushNotification(title, body, notificationData, to);
+    //                     }
+    //                 }
+    //             });
+    //         },
+    //     });
+    //     if (images && images.length > 0 && data?.sendMessage?.id) {
+    //         const { id: postId } = data.sendMessage;
+    //         setLoading(true);
+    //         const uploadResponse = await startUpload({
+    //             file: images,
+    //             saveUploadedFile: {
+    //                 variables: {
+    //                     postId,
+    //                 },
+    //             },
+    //             createUploadLink: {
+    //                 variables: {
+    //                     postId,
+    //                 },
+    //             },
+    //         });
+    //         if (uploadResponse?.error) setLoading(false);
+    //         const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+    //         if (uploadResponse.data) {
+    //             setImage('');
+    //             setFiles([]);
+    //             setImages([]);
+    //             setLoading(false);
+    //         }
+    //         setChannelMessages((messages: any) =>
+    //             messages.map((message: any) => {
+    //                 if (message.id === postId) {
+    //                     return {
+    //                         ...message,
+    //                         files: {
+    //                             totalCount: uploadedFiles.length,
+    //                             data: uploadedFiles,
+    //                         },
+    //                     };
+    //                 }
+    //                 return message;
+    //             }),
+    //         );
+    //     }
+    // };
+    const messageList = (0, react_1.useMemo)(() => {
+        let currentDate = '';
+        let res = [];
+        if (channelMessages.length) {
+            (0, lodash_1.orderBy)(channelMessages, ['createdAt'], ['desc']).map((msg) => {
+                var _a, _b, _c, _d;
+                let message = {
+                    _id: '',
+                    text: '',
+                    createdAt: 0,
+                    user: {
+                        _id: '',
+                        name: '',
+                        avatar: '',
+                    },
+                    type: '',
+                };
+                const date = new Date(msg.createdAt);
+                message._id = msg.id;
+                message.text = msg.message;
+                message.createdAt = date;
+                (message.user = {
+                    _id: msg.author.id,
+                    name: msg.author.givenName + ' ' + msg.author.familyName,
+                    avatar: (_a = msg.author) === null || _a === void 0 ? void 0 : _a.picture,
+                }),
+                    (message.image = (_c = (_b = msg.files) === null || _b === void 0 ? void 0 : _b.data[0]) === null || _c === void 0 ? void 0 : _c.url),
+                    (message.sent = msg === null || msg === void 0 ? void 0 : msg.isDelivered),
+                    (message.received = msg === null || msg === void 0 ? void 0 : msg.isRead);
+                message.type = msg === null || msg === void 0 ? void 0 : msg.type;
+                message.propsConfiguration = msg === null || msg === void 0 ? void 0 : msg.propsConfiguration;
+                message.replies = (_d = msg === null || msg === void 0 ? void 0 : msg.replies) !== null && _d !== void 0 ? _d : [];
+                res.push(message);
+            });
+        }
+        return res;
+    }, [channelMessages]);
+    const renderSend = (props) => {
+        return (react_1.default.createElement(react_native_gifted_chat_1.Send, Object.assign({}, props),
+            react_1.default.createElement(native_base_1.Box, null,
+                react_1.default.createElement(vector_icons_1.MaterialCommunityIcons, { name: "send-circle", style: { marginBottom: 5, marginRight: 5 }, size: 32, color: "#2e64e5" }))));
+    };
+    const renderMessageText = (props) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        const { currentMessage } = props;
+        const lastReply = ((_b = (_a = currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.replies) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (_d = (_c = currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.replies) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0] : null;
+        if (currentMessage.type === 'ALERT') {
+            const attachment = (_f = (_e = currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.propsConfiguration) === null || _e === void 0 ? void 0 : _e.contents) === null || _f === void 0 ? void 0 : _f.attachment;
+            let action = '';
+            let actionId = '';
+            if ((_h = (_g = attachment === null || attachment === void 0 ? void 0 : attachment.callToAction) === null || _g === void 0 ? void 0 : _g.link) === null || _h === void 0 ? void 0 : _h.includes('my-reservation-details')) {
+                action = CALL_TO_ACTION_PATH;
+                actionId = (_j = attachment === null || attachment === void 0 ? void 0 : attachment.callToAction) === null || _j === void 0 ? void 0 : _j.link.split('/').pop();
+            }
+            // if (attachment?.callToAction?.link?.includes('my-reservation-details')) {
+            //     action = 'm-reservation-detail';
+            //     actionId = attachment?.callToAction?.link.split('/').pop();
+            // }
+            return (react_1.default.createElement(native_base_1.Box, { bg: CALL_TO_ACTION_BOX_BGCOLOR, borderRadius: 15, pb: 2 },
+                (attachment === null || attachment === void 0 ? void 0 : attachment.callToAction) ? (react_1.default.createElement(native_base_1.Button, { variant: 'outline', size: 'sm', borderColor: CALL_TO_ACTION_BUTTON_BORDERCOLOR, onPress: () => navigation.navigate(action, { reservationId: actionId }) },
+                    react_1.default.createElement(native_base_1.Text, { color: CALL_TO_ACTION_TEXT_COLOR }, attachment.callToAction.title))) : null,
+                react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, props, { textStyle: { left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 } } }))));
+        }
+        else {
+            return (react_1.default.createElement(react_native_1.TouchableHighlight, { underlayColor: '#c0c0c0', style: { width: '100%' }, onPress: () => navigation.navigate(config_1.config.THREAD_MESSEGE_PATH, {
+                    channelId: channelId,
+                    title: 'Message',
+                    postParentId: currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage._id,
+                    isPostParentIdThread: true,
+                }) },
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, props, { textStyle: { left: { marginLeft: 5 } } })),
+                    ((_l = (_k = currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.replies) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.length) > 0 && (react_1.default.createElement(native_base_1.HStack, { space: 1, px: 1, alignItems: 'center' },
+                        react_1.default.createElement(native_base_1.HStack, null, (_r = (_q = (_p = (_o = (_m = currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.replies) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.filter((v, i, a) => a.findIndex((t) => { var _a, _b; return ((_a = t === null || t === void 0 ? void 0 : t.author) === null || _a === void 0 ? void 0 : _a.id) === ((_b = v === null || v === void 0 ? void 0 : v.author) === null || _b === void 0 ? void 0 : _b.id); }) === i)) === null || _p === void 0 ? void 0 : _p.slice(0, 2)) === null || _q === void 0 ? void 0 : _q.reverse()) === null || _r === void 0 ? void 0 : _r.map((p, i) => {
+                            var _a, _b, _c;
+                            return (react_1.default.createElement(native_base_1.Avatar, { key: 'key' + i, bg: 'transparent', size: 6, 
+                                // top={i == 1 ? 4 : 0}
+                                // right={i == 1 ? -2 : 0}
+                                // zIndex={i == 1 ? 5 : 1}
+                                _image: { borderRadius: 6, borderWidth: 2, borderColor: '#fff' }, source: {
+                                    uri: (_a = p === null || p === void 0 ? void 0 : p.author) === null || _a === void 0 ? void 0 : _a.picture,
+                                } }, (0, lodash_1.startCase)((_c = (_b = p === null || p === void 0 ? void 0 : p.author) === null || _b === void 0 ? void 0 : _b.username) === null || _c === void 0 ? void 0 : _c.charAt(0))));
+                        })),
+                        react_1.default.createElement(native_base_1.Text, { fontSize: 12, fontWeight: 'bold', color: 'blue.800' }, (_s = currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.replies) === null || _s === void 0 ? void 0 :
+                            _s.totalCount,
+                            ' ',
+                            ((_t = currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.replies) === null || _t === void 0 ? void 0 : _t.totalCount) == 1 ? 'reply' : 'replies'),
+                        react_1.default.createElement(native_base_1.Text, { fontSize: 12, fontWeight: 'bold', color: 'gray.500' }, lastReply ? createdAtText(lastReply === null || lastReply === void 0 ? void 0 : lastReply.createdAt) : ''))))));
+        }
+    };
+    const renderActions = (props) => {
+        return (react_1.default.createElement(react_native_gifted_chat_1.Actions, Object.assign({}, props, { icon: () => react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: 'image', size: 'lg', color: 'black', onPress: onSelectImages }) })));
+    };
+    const renderAccessory = (props) => {
+        return (react_1.default.createElement(native_base_1.Box, null, selectedImage !== '' ? (react_1.default.createElement(native_base_1.HStack, { alignItems: 'center' },
+            react_1.default.createElement(native_base_1.Image, { ml: 3, key: selectedImage, alt: 'image', source: { uri: selectedImage }, size: 'xs' }),
+            react_1.default.createElement(native_base_1.Button, { variant: 'ghost', colorScheme: 'secondary', onPress: () => {
+                    setFiles([]);
+                    setImage('');
+                    setImages([]);
+                } }, "Cancel"))) : null));
+    };
+    const setImageViewerObject = (obj, v) => {
+        setImageObject(obj);
+        setImageViewer(v);
+    };
+    const modalContent = react_1.default.useMemo(() => {
+        if (!imageObject)
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        const { image, _id } = imageObject;
+        return (react_1.default.createElement(CachedImage_1.default, { style: { width: '100%', height: '100%' }, resizeMode: 'cover', 
+            // cacheKey={`${_id}-conversation-modal-image-key`}
+            cacheKey: `${_id}-slack-bubble-imageKey`, source: {
+                uri: image,
+                //headers: `Authorization: Bearer ${token}`,
+                expiresIn: 86400,
+            }, alt: 'image' }));
+    }, [imageObject]);
+    const renderMessage = (props) => {
+        // const {
+        //     currentMessage: { text: currText },
+        // } = props;
+        //let messageTextStyle: any;
+        // Make "pure emoji" messages much bigger than plain text.
+        // if (currText && emojiUtils.isPureEmojiString(currText)) {
+        //   messageTextStyle = {
+        //     fontSize: 28,
+        //     // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
+        //     lineHeight: Platform.OS === 'android' ? 34 : 30,
+        //   }
+        // }
+        // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
+        return react_1.default.createElement(SlackMessageContainer_1.SlackMessage, Object.assign({}, props, { isShowImageViewer: isShowImageViewer, setImageViewer: setImageViewerObject }));
+    };
+    let onScroll = false;
+    // const onEndReached = () => {
+    //     console.log('on end reached');
+    //     if (!onScroll) return;
+    //     // load messages, show ActivityIndicator
+    //     onScroll = false;
+    //     // setLoadingOldMessages(true);
+    // };
+    // const onMomentumScrollBegin = useCallback(
+    //     ({ nativeEvent }: any) => {
+    //         onScroll = true;
+    //         console.log('scroll top');
+    //         if (!loadingOldMessages && channelMessages?.length <= 10 && channelMessages?.length != totalCount) {
+    //             onFetchOld();
+    //         } else if (!loadingOldMessages && isCloseToTop(nativeEvent) && channelMessages?.length != totalCount) {
+    //             onFetchOld();
+    //         }
+    //     },
+    //     [loadingOldMessages, channelMessages],
+    // );
+    // const onMomentumScrollBegin = ({ nativeEvent }: any) => {
+    //     onScroll = true;
+    //     console.log('scroll top');
+    //     if (
+    //         !loadingOldMessages &&
+    //         (channelMessages?.length <= 10 || isCloseToTop(nativeEvent)) &&
+    //         channelMessages?.length != totalCount
+    //     ) {
+    //         onFetchOld();
+    //     }
+    // };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        loadEarlierMsg && react_1.default.createElement(native_base_1.Spinner, null),
+        react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList, 
+            // listViewProps={{
+            //     onEndReached: onEndReached,
+            //     onEndReachedThreshold: 0.5,
+            //     onMomentumScrollBegin: onMomentumScrollBegin,
+            // }}
+            // listViewProps={{
+            //     scrollEventThrottle: 400,
+            //     onScroll: ({ nativeEvent }) => { console.log('scroll')
+            //       if (!loadingOldMessages  && isCloseToTop(nativeEvent)) {
+            //         onFetchOld();
+            //       }
+            //     }
+            //   }}
+            onSend: (messages) => { var _a, _b; return handleSend((_b = (_a = messages[0]) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : ' '); }, text: msg ? msg : ' ', onInputTextChanged: (text) => setMsg(text), renderFooter: () => (loading ? react_1.default.createElement(native_base_1.Spinner, null) : imageLoading ? react_1.default.createElement(native_base_1.Spinner, null) : ''), scrollToBottom: true, user: {
+                // _id: currentUser?.id || '',
+                _id: (auth === null || auth === void 0 ? void 0 : auth.id) || '',
+            }, isTyping: true, alwaysShowSend: loading ? false : true, 
+            //onLoadEarlier={onFetchOld}
+            //infiniteScroll={true}
+            renderSend: renderSend, loadEarlier: ((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.totalCount) > channelMessages.length, isLoadingEarlier: loadEarlierMsg, 
+            //extraData={{ isLoadingEarlier: loadingOldMessages }}
+            renderLoadEarlier: () => !loadEarlierMsg && (react_1.default.createElement(native_base_1.Center, { py: 2 },
+                react_1.default.createElement(native_base_1.Button, { onPress: () => onFetchOld(data, channelMessages), variant: 'outline', _text: { color: 'black', fontSize: 15, fontWeight: 'bold' } }, "Load earlier messages"))), renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory, renderMessage: renderMessage, renderChatFooter: () => (react_1.default.createElement(SlackMessageContainer_1.ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent: modalContent })), lightboxProps: {
+                underlayColor: 'transparent',
+                springConfig: { tension: 90000, friction: 90000 },
+                disabled: true,
+            } })));
+};
+exports.ConversationView = react_1.default.memo(ConversationViewComponent);
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/containers/Dialogs.tsx":
+/*!**************************************************!*\
+  !*** ./src/screens/inbox/containers/Dialogs.tsx ***!
+  \**************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.Dialogs = void 0;
+const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
+const react_redux_1 = __webpack_require__(/*! react-redux */ "react-redux");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
+const DialogsListItem_1 = __webpack_require__(/*! ../components/DialogsListItem */ "./src/screens/inbox/components/DialogsListItem.tsx");
+const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
+const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
+const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
+const DialogsComponent = (props) => {
+    const { channelFilters, channelRole } = props;
+    const { params } = (0, native_1.useRoute)();
+    const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const navigation = (0, native_1.useNavigation)();
+    const isFocused = (0, native_1.useIsFocused)();
+    const [refreshing, setRefresh] = (0, react_1.useState)(false);
+    // const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
+    const { data: userChannels, loading: userChannelsLoading, refetch: getChannelsRefetch, } = (0, platform_client_1.useGetChannelsByUserQuery)({
+        variables: {
+            role: channelRole,
+            criteria: channelFilters,
+        },
+        onCompleted: (data) => {
+            setRefresh(false);
+        }
+    });
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        // Do something when the screen is focused
+        setRefresh(false);
+        getChannelsRefetch({ role: channelRole, criteria: channelFilters });
+        return () => {
+            // Do something when the screen is unfocused
+            // Useful for cleanup functions
+        };
+    }, [channelFilters]));
+    const channels = react_1.default.useMemo(() => {
+        var _a, _b, _c;
+        if (!((_a = userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        let uChannels = (_c = (_b = userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) === null || _b === void 0 ? void 0 : _b.filter((c) => c.members.some((u) => { var _a; return ((_a = u === null || u === void 0 ? void 0 : u.user) === null || _a === void 0 ? void 0 : _a.id) != (auth === null || auth === void 0 ? void 0 : auth.id) && u.user.__typename == 'UserAccount'; }))) !== null && _c !== void 0 ? _c : [];
+        return uChannels || [];
+    }, [userChannels]);
+    // useEffect(() => {
+    //     setTimeout(() => {
+    //         dispatch({
+    //             type: CHANGE_SETTINGS_ACTION,
+    //             payload: {
+    //                 footerRender: false,
+    //             },
+    //         } as any);
+    //     }, 0);
+    //     return () => {
+    //         dispatch({
+    //             type: CHANGE_SETTINGS_ACTION,
+    //             payload: {
+    //                 footerRender: true,
+    //             },
+    //         } as any);
+    //     };
+    // }, []);
+    // useEffect(() => {
+    //     if (userChannels?.channelsByUser) {
+    //         if (userChannels?.channelsByUser?.length == 0) {
+    //             setUserDirectChannel([]);
+    //         }
+    //         //Direct channel
+    //         let userDirectChannels: any =
+    //             userChannels?.channelsByUser
+    //                 ?.filter((i: any) => i.type == 'DIRECT')
+    //                 ?.filter((c: any) =>
+    //                     c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
+    //                 ) ?? [];
+    //         if (userDirectChannels?.length > 0) setUserDirectChannel(userDirectChannels);
+    //     }
+    // }, [userChannels?.channelsByUser]);
+    const handleSelectChannel = (0, react_1.useCallback)((id, title) => {
+        var _a;
+        if (params === null || params === void 0 ? void 0 : params.channelId) {
+            navigation.navigate(config_1.config.INBOX_MESSEGE_PATH, {
+                channelId: params === null || params === void 0 ? void 0 : params.channelId,
+                title: (_a = params === null || params === void 0 ? void 0 : params.title) !== null && _a !== void 0 ? _a : null,
+                hideTabBar: true,
+            });
+        }
+        else {
+            navigation.navigate(config_1.config.INBOX_MESSEGE_PATH, {
+                channelId: id,
+                title: title,
+                hideTabBar: true,
+            });
+        }
+    }, []);
+    const handleRefresh = (0, react_1.useCallback)(() => {
+        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
+        getChannelsRefetch({ role: channelRole, criteria: channelFilters });
+    }, []);
+    return (react_1.default.createElement(native_base_1.Box, { p: 2, pt: (props === null || props === void 0 ? void 0 : props.supportServices) ? 0 : 2 },
+        react_1.default.createElement(native_base_1.FlatList, { data: channels && (channels === null || channels === void 0 ? void 0 : channels.length) > 0 ? channels : [], onRefresh: handleRefresh, refreshing: userChannelsLoading, contentContainerStyle: { minHeight: '100%' }, ItemSeparatorComponent: () => react_1.default.createElement(native_base_1.Box, { height: "0.5", backgroundColor: "gray.200" }), renderItem: ({ item: channel }) => (react_1.default.createElement(DialogsListItem_1.DialogsListItem, { onOpen: handleSelectChannel, currentUser: auth, channel: channel, selectedChannelId: params === null || params === void 0 ? void 0 : params.channelId })), ListEmptyComponent: () => (react_1.default.createElement(react_1.default.Fragment, null, userChannelsLoading ? (react_1.default.createElement(native_base_1.Spinner, null)) : (react_1.default.createElement(native_base_1.Box, { p: 5 },
+                react_1.default.createElement(native_base_1.Heading, null, "Chat"),
+                react_1.default.createElement(native_base_1.Input, { height: 50, mt: 3, placeholder: "Search", borderRadius: 50, borderColor: 'gray.200', borderWidth: 2 }),
+                react_1.default.createElement(native_base_1.Center, { mt: 6 },
+                    react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: "chatbubbles", size: 'xl' }),
+                    react_1.default.createElement(native_base_1.Text, null, "You don't have any messages yet!")))))), keyExtractor: (item, index) => 'key' + index })));
+};
+exports.Dialogs = react_1.default.memo(DialogsComponent);
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/containers/SupportServiceDialogs.tsx":
+/*!****************************************************************!*\
+  !*** ./src/screens/inbox/containers/SupportServiceDialogs.tsx ***!
+  \****************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.SupportServiceDialogs = void 0;
+const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+const react_redux_1 = __webpack_require__(/*! react-redux */ "react-redux");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
+const SupportServiceDialogsListItem_1 = __webpack_require__(/*! ../components/SupportServiceDialogsListItem */ "./src/screens/inbox/components/SupportServiceDialogsListItem.tsx");
+const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
+const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
+const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
+const SupportServiceDialogsComponent = (props) => {
+    const { channelFilters, channelRole } = props;
+    const { params } = (0, native_1.useRoute)();
+    const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const navigation = (0, native_1.useNavigation)();
+    const isFocused = (0, native_1.useIsFocused)();
+    const [refreshing, setRefresh] = (0, react_1.useState)(false);
+    // const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
+    const { data: serviceChannels, loading: serviceChannelsLoading, refetch: getServiceChannelsRefetch, } = (0, platform_client_1.useSupportServiceChannelsQuery)({
+        variables: {
+            criteria: { type: 'SERVICE' },
+        },
+        onCompleted: (data) => {
+            //setRefresh(false);
+        },
+    });
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        // Do something when the screen is focused
+        setRefresh(false);
+        getServiceChannelsRefetch({ criteria: { type: 'SERVICE' } });
+        return () => {
+            // Do something when the screen is unfocused
+            // Useful for cleanup functions
+        };
+    }, []));
+    const channels = react_1.default.useMemo(() => {
+        var _a, _b, _c;
+        if (!((_a = serviceChannels === null || serviceChannels === void 0 ? void 0 : serviceChannels.supportServiceChannels) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        let uChannels = (_c = (_b = serviceChannels === null || serviceChannels === void 0 ? void 0 : serviceChannels.supportServiceChannels) === null || _b === void 0 ? void 0 : _b.filter((c) => c.members.some((u) => u.user.__typename == 'UserAccount'))) !== null && _c !== void 0 ? _c : [];
+        return uChannels || [];
+    }, [serviceChannels]);
+    const handleSelectChannel = (0, react_1.useCallback)((id, title, postParentId) => {
+        var _a;
+        if (params === null || params === void 0 ? void 0 : params.channelId) {
+            navigation.navigate((params === null || params === void 0 ? void 0 : params.postParentId) || (params === null || params === void 0 ? void 0 : params.postParentId) == 0 ? config_1.config.THREAD_MESSEGE_PATH : config_1.config.THREADS_PATH, {
+                channelId: params === null || params === void 0 ? void 0 : params.channelId,
+                role: params === null || params === void 0 ? void 0 : params.role,
+                title: (_a = params === null || params === void 0 ? void 0 : params.title) !== null && _a !== void 0 ? _a : null,
+                postParentId: params === null || params === void 0 ? void 0 : params.postParentId,
+                hideTabBar: true,
+            });
+        }
+        else {
+            navigation.navigate(postParentId || postParentId == 0 ? config_1.config.THREAD_MESSEGE_PATH : config_1.config.THREADS_PATH, {
+                channelId: id,
+                role: channelRole,
+                title: title,
+                postParentId: postParentId,
+                hideTabBar: true,
+            });
+        }
+    }, []);
+    const handleRefresh = (0, react_1.useCallback)(() => {
+        var _a;
+        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
+        setRefresh(true);
+        (_a = getServiceChannelsRefetch({ criteria: { type: 'SERVICE' } })) === null || _a === void 0 ? void 0 : _a.then((res) => setRefresh(false));
+    }, []);
+    return (react_1.default.createElement(native_base_1.Box, { p: 2, pb: 0 },
+        react_1.default.createElement(native_base_1.FlatList, { data: channels && (channels === null || channels === void 0 ? void 0 : channels.length) > 0 ? channels : [], onRefresh: handleRefresh, refreshing: serviceChannelsLoading, contentContainerStyle: {}, ItemSeparatorComponent: () => react_1.default.createElement(native_base_1.Box, { height: "0.5", backgroundColor: "gray.200" }), renderItem: ({ item: channel }) => (react_1.default.createElement(SupportServiceDialogsListItem_1.SupportServiceDialogsListItem, { onOpen: handleSelectChannel, currentUser: auth, channel: channel, refreshing: refreshing, selectedChannelId: params === null || params === void 0 ? void 0 : params.channelId, role: channelRole })), keyExtractor: (item, index) => 'support-service-key' + index })));
+};
+exports.SupportServiceDialogs = react_1.default.memo(SupportServiceDialogsComponent);
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/containers/ThreadConversationView.tsx":
+/*!*****************************************************************!*\
+  !*** ./src/screens/inbox/containers/ThreadConversationView.tsx ***!
+  \*****************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ThreadConversationView = void 0;
+const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+const react_native_1 = __webpack_require__(/*! react-native */ "react-native");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
+const react_redux_1 = __webpack_require__(/*! react-redux */ "react-redux");
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+const ImagePicker = __importStar(__webpack_require__(/*! expo-image-picker */ "expo-image-picker"));
+const base_64_1 = __webpack_require__(/*! base-64 */ "base-64");
+const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
+const react_native_gifted_chat_1 = __webpack_require__(/*! react-native-gifted-chat */ "react-native-gifted-chat");
+const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
+const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
+const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
+const SlackMessageContainer_1 = __webpack_require__(/*! ../components/SlackMessageContainer */ "./src/screens/inbox/components/SlackMessageContainer/index.ts");
+const CachedImage_1 = __importDefault(__webpack_require__(/*! ../components/CachedImage */ "./src/screens/inbox/components/CachedImage/index.tsx"));
+const date_fns_1 = __webpack_require__(/*! date-fns */ "date-fns");
+const { MESSAGES_PER_PAGE, CALL_TO_ACTION_BOX_BGCOLOR, CALL_TO_ACTION_PATH, CALL_TO_ACTION_BUTTON_BORDERCOLOR, CALL_TO_ACTION_TEXT_COLOR, } = config_1.config;
+const createdAtText = (value) => {
+    if (!value)
+        return '';
+    let date = new Date(value);
+    if ((0, date_fns_1.isToday)(date))
+        return 'Today';
+    if ((0, date_fns_1.isYesterday)(date))
+        return 'Yesterday';
+    return (0, date_fns_1.format)(new Date(value), 'MMM dd, yyyy');
+};
+const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const { params } = (0, native_1.useRoute)();
+    const [channelToTop, setChannelToTop] = (0, react_1.useState)(0);
+    const [channelMessages, setChannelMessages] = (0, react_1.useState)([]);
+    const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
+    const [totalCount, setTotalCount] = (0, react_1.useState)(0);
+    const [selectedImage, setImage] = (0, react_1.useState)('');
+    const [loadingOldMessages, setLoadingOldMessages] = (0, react_1.useState)(false);
+    const [loadEarlierMsg, setLoadEarlierMsg] = (0, react_1.useState)(false);
+    const color = (0, native_base_1.useColorModeValue)('white', 'black');
+    // const color = useColorModeValue('black', 'white');
+    const navigation = (0, native_1.useNavigation)();
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [images, setImages] = (0, react_1.useState)([]);
+    const [msg, setMsg] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [imageLoading, setImageLoading] = (0, react_1.useState)(false);
+    const [expoTokens, setExpoTokens] = (0, react_1.useState)([]);
+    const [isShowImageViewer, setImageViewer] = (0, react_1.useState)(false);
+    const [imageObject, setImageObject] = (0, react_1.useState)({});
+    const [parentId, setParentId] = (0, react_1.useState)(postParentId);
+    const { startUpload } = (0, platform_client_1.useUploadFilesNative)();
+    const [threadPost, setThreadPost] = (0, react_1.useState)([]);
+    const { data: mongooseObjectId } = (0, platform_client_1.useGetNewMongooseObjectIdQuery)({
+        fetchPolicy: 'network-only',
+        pollInterval: 5000,
+    });
+    const { data: newThreadMsg, loading: newThreadMsgLoading, error: newThreadMsgError, } = (0, platform_client_1.useOnThreadChatMessageAddedSubscription)({
+        variables: {
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            postParentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
+        },
+    });
+    const [sendThreadMessage] = (0, platform_client_1.useSendThreadMessageMutation)();
+    const [getThreadMessages, { data: threadMessagesData, loading: threadLoading, refetch: refetchThreadMessages }] = (0, platform_client_1.useThreadMessagesLazyQuery)({
+        variables: {
+            channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            role: role === null || role === void 0 ? void 0 : role.toString(),
+            postParentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
+        },
+        fetchPolicy: 'cache-and-network',
+    });
+    const { data, loading: messageLoading, refetch, } = (0, platform_client_1.useMessagesQuery)({
+        variables: {
+            channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            parentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
+            limit: MESSAGES_PER_PAGE,
+        },
+        skip: !channelId,
+        fetchPolicy: 'cache-and-network',
+    });
+    // const { data: checkForMessages }: any = useCheckForNewMessagesQuery({
+    //     variables: {
+    //         channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+    //         parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+    //     },
+    //     skip: !channelId,
+    //     fetchPolicy: 'network-only',
+    //     pollInterval: 5000,
+    // });
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        var _a;
+        navigation === null || navigation === void 0 ? void 0 : navigation.setOptions({ title: (_a = params === null || params === void 0 ? void 0 : params.title) !== null && _a !== void 0 ? _a : 'Thread' });
+        if (parentId || parentId == 0) {
+            refetchThreadMessages({
+                channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+                role: role === null || role === void 0 ? void 0 : role.toString(),
+                postParentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
+            });
+        }
+        refetch({
+            channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            parentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
+            limit: MESSAGES_PER_PAGE,
+        }).then(({ data }) => {
+            if (!(data === null || data === void 0 ? void 0 : data.messages)) {
+                return;
+            }
+            const { data: messages, totalCount } = data.messages;
             setTotalCount(totalCount);
             setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...oldMessages, ...messages], ({ id }) => id));
         });
         return () => {
-            // Do something when the screen is unfocused
-            // Useful for cleanup functions
             setTotalCount(0);
             setChannelMessages([]);
         };
     }, []));
+    (0, react_1.useEffect)(() => {
+        setParentId(postParentId);
+    }, [postParentId]);
+    (0, react_1.useEffect)(() => {
+        if (parentId && parentId == 0) {
+            getThreadMessages({
+                variables: {
+                    channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+                    role: role === null || role === void 0 ? void 0 : role.toString(),
+                    postParentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
+                },
+            });
+        }
+    }, [parentId]);
+    (0, react_1.useEffect)(() => {
+        if (threadMessagesData === null || threadMessagesData === void 0 ? void 0 : threadMessagesData.threadMessages) {
+            const { data: threads, totalCount: threadTotalCount } = threadMessagesData === null || threadMessagesData === void 0 ? void 0 : threadMessagesData.threadMessages;
+            const threadMessage = threads === null || threads === void 0 ? void 0 : threads.map((t) => t === null || t === void 0 ? void 0 : t.post);
+            setThreadPost(threadMessage);
+            if (!isPostParentIdThread) {
+                // setTotalCount((pc: any) => pc + threadTotalCount);
+                setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...threadMessage, ...oldMessages], ({ id }) => id));
+            }
+        }
+    }, [threadMessagesData, isPostParentIdThread]);
     react_1.default.useEffect(() => {
-        if (selectedImage)
-            setImageLoading(false);
-    }, [selectedImage]);
-    // const currentUser = useMemo(
-    //     () => users?.getUsers?.find(({ alias }: any) => alias?.includes(auth?.auth0UserId)),
-    //     [users, auth],
-    // );
+        if (newThreadMsg) {
+            console.log('newThreadMsg');
+            const msg = newThreadMsg === null || newThreadMsg === void 0 ? void 0 : newThreadMsg.threadChatMessageAdded;
+            setTotalCount((preCount) => preCount + 1);
+            setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...oldMessages, msg], ({ id }) => id));
+        }
+    }, [newThreadMsg]);
     // useEffect(() => {
     //     if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
     //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
     //         if (messages && messages.length > 0) {
     //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
-    //         }
-    //         if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
-    //     }
-    // }, [data, loadingOldMessages, channelMessages]);
-    // useEffect(() => {
-    //     if (data?.messages?.data) {
-    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
-    //         if (
-    //             messages &&
-    //             messages.length > 0 &&
-    //             totalCount !== messeageTotalCount &&
-    //             (loadingOldMessages || channelMessages.length === 0)
-    //         ) {
-    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
     //             setLoadingOldMessages(false);
-    //             setTotalCount(messeageTotalCount);
     //         }
-    //         // if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
+    //         if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
     //     }
-    // }, [data, loadingOldMessages, channelMessages]);///
+    // }, [data, loadingOldMessages, channelMessages, totalCount]);
     (0, react_1.useEffect)(() => {
-        var _a;
-        if (((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) && (loadingOldMessages || channelMessages.length === 0)) {
+        var _a, _b;
+        if ((((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) && channelMessages.length === 0) || (((_b = data === null || data === void 0 ? void 0 : data.messages) === null || _b === void 0 ? void 0 : _b.data) && loadingOldMessages)) {
             const { data: messages, totalCount: messeageTotalCount } = data.messages;
             if (messages && messages.length > 0) {
                 setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...messages, ...oldMessages], ({ id }) => id));
-                setLoadingOldMessages(false);
-            }
-            if (totalCount !== messeageTotalCount)
                 setTotalCount(messeageTotalCount);
+            }
+            setLoadEarlierMsg(false);
+            if (loadingOldMessages)
+                setLoadingOldMessages(false);
         }
-    }, [data, loadingOldMessages, channelMessages, totalCount]);
-    // useEffect(() => {
-    //     if (data?.messages?.data) {
-    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
-    //        console.log('messeageTotalCount',messeageTotalCount)
-    //        console.log('totalCount',totalCount)
-    //         if (messages && messages.length > 0) {
-    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
-    //         }
-    //         if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
-    //     }
-    // }, [data]);
+    }, [data, loadingOldMessages, channelMessages]);
     // useEffect(() => {
-    //     if (checkForMessages?.messages?.totalCount > totalCount) {
+    //     if (
+    //         !messageLoading &&
+    //         checkForMessages?.messages?.totalCount &&
+    //         checkForMessages?.messages?.totalCount > totalCount
+    //     ) {
     //         const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
+    //         console.log('new msg check');
     //         refetch({
+    //             channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+    //             parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
     //             limit: numberOfNewMessages,
     //         }).then(({ data }) => {
     //             if (!data?.messages) {
     //                 return;
     //             }
-    //             const { data: messages, totalCount }:any = data.messages;
+    //             const { data: messages, totalCount }: any = data.messages;
     //             setTotalCount(totalCount);
-    //             setChannelMessages((oldMessages:any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
+    //             setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
     //         });
     //     }
-    // }, [checkForMessages, totalCount]);
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        if (!messageLoading &&
-            ((_a = checkForMessages === null || checkForMessages === void 0 ? void 0 : checkForMessages.messages) === null || _a === void 0 ? void 0 : _a.totalCount) &&
-            ((_b = checkForMessages === null || checkForMessages === void 0 ? void 0 : checkForMessages.messages) === null || _b === void 0 ? void 0 : _b.totalCount) > totalCount) {
-            const numberOfNewMessages = ((_c = checkForMessages === null || checkForMessages === void 0 ? void 0 : checkForMessages.messages) === null || _c === void 0 ? void 0 : _c.totalCount) - totalCount;
-            console.log('new msg check');
-            refetch({
-                limit: numberOfNewMessages,
-            }).then(({ data }) => {
-                if (!(data === null || data === void 0 ? void 0 : data.messages)) {
-                    return;
-                }
-                const { data: messages, totalCount } = data.messages;
-                setTotalCount(totalCount);
-                setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...oldMessages, ...messages], ({ id }) => id));
-            });
-        }
-    }, [checkForMessages, totalCount]);
+    // }, [checkForMessages, totalCount, parentId]);
+    react_1.default.useEffect(() => {
+        if (selectedImage)
+            setImageLoading(false);
+    }, [selectedImage]);
     // const onFetchOld = useCallback(() => {
-    //    // if (data?.messages?.totalCount > channelMessages.length) {
-    //     //if(channelMessages.length !== data?.messages?.totalCount){
-    //     if(totalCount > channelMessages.length){
-    //         setLoadingOldMessages(true);
-    //         refetch({ skip: channelMessages.length });
+    //     if (data?.messages?.totalCount > channelMessages.length) {
+    //         setLoadEarlierMsg(true);
+    //         refetch({
+    //             channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+    //             parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+    //             skip: channelMessages.length,
+    //         })?.then((res: any) => setLoadingOldMessages(true));
     //     }
     // }, [data, channelMessages]);
-    // const onFetchOld = () => {
-    //     // if (data?.messages?.totalCount > channelMessages.length) {
-    //      //if(channelMessages.length !== data?.messages?.totalCount){
-    //      if(totalCount > channelMessages.length){
-    //          setLoadingOldMessages(true);
-    //          refetch({ skip: channelMessages.length });
-    //      }
-    //  };
-    const onFetchOld = (0, react_1.useCallback)(() => {
-        var _a;
+    const onFetchOld = (0, react_1.useCallback)((data, channelMessages) => {
+        var _a, _b;
         if (((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.totalCount) > channelMessages.length) {
-            setLoadingOldMessages(true);
-            refetch({ skip: channelMessages.length });
+            setLoadEarlierMsg(true);
+            (_b = refetch({
+                channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+                parentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
+                skip: channelMessages.length,
+            })) === null || _b === void 0 ? void 0 : _b.then((res) => setLoadingOldMessages(true));
         }
-    }, [data, channelMessages]);
-    // const onFetchOld = () => {
-    //      if(totalCount > channelMessages.length){
-    //         console.log('totalCount',totalCount)
-    //     console.log('channelMessages.length',channelMessages.length)
-    //          setLoadingOldMessages(true);
-    //          refetch({
-    //             skip: channelMessages.length
-    //          });
-    //      }
-    //  };
+    }, []);
     // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
     //     return contentOffset.y <= 100; // 100px from top
     // };
@@ -1271,192 +3034,56 @@ const ConversationViewComponent = ({ channelId }) => {
     const onSelectImages = async () => {
         setImageLoading(true);
         let imageSource = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ImagePicker.MediaTypeOptions.Images,
-            allowsEditing: true,
-            aspect: [4, 3],
-            quality: 1,
-            base64: true,
-        });
-        if (!imageSource.cancelled) {
-            const image = 'data:image/jpeg;base64,' + (imageSource === null || imageSource === void 0 ? void 0 : imageSource.base64);
-            setImage(image);
-            const file = dataURLtoFile(image, 'inputImage.jpg');
-            setFiles((files) => files.concat(file));
-            setImages((images) => images.concat(imageSource));
-        }
-        if (imageSource.cancelled)
-            setLoading(false);
-    };
-    const sendPushNotification = async (title, body, data, to) => {
-        try {
-            const response = await fetch('https://exp.host/--/api/v2/push/send/', {
-                method: 'POST',
-                headers: {
-                    Accept: 'application/json',
-                    'Accept-Encoding': 'gzip, deflate',
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    to: to,
-                    data: data,
-                    title: title,
-                    body: body,
-                    sound: react_native_1.Platform.OS === 'android' ?  false || null : 'default',
-                }),
-            });
-            const result = await response.json();
-            console.log('expo api response', result);
-        }
-        catch (error) {
-            console.error('Error:', error);
-        }
-        // fetch('https://exp.host/--/api/v2/push/send/', {
-        //     method: 'POST',
-        //     headers: {
-        //         Accept: 'application/json',
-        //         'Accept-Encoding': 'gzip, deflate',
-        //         'Content-Type': 'application/json',
-        //     },
-        //     body: JSON.stringify({
-        //         to: to,
-        //         data: data,
-        //         title: title,
-        //         body: body,
-        //         sound: Platform.OS === 'android' ? null : 'default',
-        //     }),
-        // });
-    };
-    // const handleSend = useCallback(
-    //     async (message: string) => {
-    //         // if (!(message && channelId)) {
-    //         //     return;
-    //         // }
-    //         if (!channelId) return;
-    //         if (!message && message != ' ' && images.length == 0) return;
-    //         setLoading(true);
-    //         const { data } = await sendMsg({
-    //             variables: {
-    //                 channelId,
-    //                 content: message,
-    //             },
-    //             update: (cache, { data, errors }) => {
-    //                 if (!data || errors) {
-    //                     setLoading(false);
-    //                     return;
-    //                 }
-    //                 setChannelMessages((messages) => [...messages, data?.sendMessage]);
-    //                 setTotalCount((t) => t + 1);
-    //                 setChannelToTop(channelToTop + 1);
-    //                 setLoading(false);
-    //                 const title: String = currentUser?.givenName+' '+currentUser?.familyName+' in Followup Chat';
-    //                 const body: String = message;
-    //                 const notificationData: any = {
-    //                     url: config.INBOX_MESSEGE_PATH,
-    //                     params: { channelId, hideTabBar: true },
-    //                     screen: 'DialogMessages',
-    //                 };
-    //                 console.log('expo to',JSON.stringify(expoTokens));
-    //                 if (expoTokens?.length > 0) {
-    //                     const to: any = expoTokens?.length > 0 ? expoTokens : [];
-    //                     sendPushNotification(title, body, notificationData, to);
-    //                 }
-    //                 setMsg('');
-    //             },
-    //         });
-    //         if (images && images.length > 0 && data?.sendMessage?.id) {
-    //             const { id: postId } = data.sendMessage;
-    //             setLoading(true);
-    //             const uploadResponse = await startUpload({
-    //                 file: images,
-    //                 saveUploadedFile: {
-    //                     variables: {
-    //                         postId,
-    //                     },
-    //                 },
-    //                 createUploadLink: {
-    //                     variables: {
-    //                         postId,
-    //                     },
-    //                 },
-    //             });
-    //             if (uploadResponse?.error) setLoading(false);
-    //             const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-    //             if (uploadResponse.data) {
-    //                 setImage('');
-    //                 setFiles([]);
-    //                 setImages([]);
-    //                 setLoading(false);
-    //             }
-    //             setChannelMessages((messages) =>
-    //                 messages.map((message) => {
-    //                     if (message.id === postId) {
-    //                         return {
-    //                             ...message,
-    //                             files: {
-    //                                 totalCount: uploadedFiles.length,
-    //                                 data: uploadedFiles,
-    //                             },
-    //                         };
-    //                     }
-    //                     return message;
-    //                 }),
-    //             );
-    //         }
-    //     },
-    //     [setChannelMessages, currentUser, channelId, images,expoTokens],
-    // );
-    const handleSend = async (message) => {
+            mediaTypes: ImagePicker.MediaTypeOptions.Images,
+            allowsEditing: true,
+            aspect: [4, 3],
+            quality: 1,
+            base64: true,
+        });
+        if (!imageSource.cancelled) {
+            const image = 'data:image/jpeg;base64,' + (imageSource === null || imageSource === void 0 ? void 0 : imageSource.base64);
+            setImage(image);
+            const file = dataURLtoFile(image, 'inputImage.jpg');
+            setFiles((files) => files.concat(file));
+            setImages((images) => images.concat(imageSource));
+        }
+        if (imageSource.cancelled)
+            setLoading(false);
+    };
+    const sendPushNotification = async (title, body, data, to) => {
+        try {
+            const response = await fetch('https://exp.host/--/api/v2/push/send/', {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Accept-Encoding': 'gzip, deflate',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    to: to,
+                    data: data,
+                    title: title,
+                    body: body,
+                    sound: react_native_1.Platform.OS === 'android' ?  false || null : 'default',
+                }),
+            });
+            const result = await response.json();
+            console.log('expo api response', result);
+        }
+        catch (error) {
+            console.error('Error:', error);
+        }
+    };
+    // const ObjectId = (m = Math, d = Date, h = 16, s = (s:any) => m.floor(s).toString(h)) =>
+    // s(d.now() / 1000) + ' '.repeat(h).replace(/./g, () => s(m.random() * h))
+    const handleSend = (0, react_1.useCallback)(async (message) => {
         var _a;
         if (!channelId)
             return;
         if (!message && message != ' ' && images.length == 0)
             return;
-        setLoading(true);
-        const { data } = await sendMsg({
-            variables: {
-                channelId,
-                content: message,
-            },
-            update: (cache, { data, errors }) => {
-                var _a, _b, _c, _d, _e;
-                if (!data || errors) {
-                    setLoading(false);
-                    return;
-                }
-                setChannelMessages((messages) => [...messages, data === null || data === void 0 ? void 0 : data.sendMessage]);
-                setTotalCount((t) => t + 1);
-                setChannelToTop(channelToTop + 1);
-                setLoading(false);
-                setMsg('');
-                const givenName = (_b = (_a = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _a === void 0 ? void 0 : _a.given_name) !== null && _b !== void 0 ? _b : '';
-                const familyName = (_d = (_c = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _c === void 0 ? void 0 : _c.family_name) !== null && _d !== void 0 ? _d : '';
-                const fullName = givenName ? givenName + ' ' + familyName : '';
-                const title = fullName ? fullName : 'Message';
-                const body = message;
-                const notificationData = {
-                    url: config_1.config.INBOX_MESSEGE_PATH,
-                    params: { channelId, hideTabBar: true },
-                    screen: 'DialogMessages',
-                };
-                (_e = refetchChannelDetail({ id: channelId === null || channelId === void 0 ? void 0 : channelId.toString() })) === null || _e === void 0 ? void 0 : _e.then((res) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-                    if ((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewChannelDetail) === null || _b === void 0 ? void 0 : _b.members) === null || _c === void 0 ? void 0 : _c.length) {
-                        const channelData = (_g = (_f = (_e = (_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.viewChannelDetail) === null || _e === void 0 ? void 0 : _e.members) === null || _f === void 0 ? void 0 : _f.filter((mu) => { var _a; return ((_a = mu === null || mu === void 0 ? void 0 : mu.user) === null || _a === void 0 ? void 0 : _a.id) != (auth === null || auth === void 0 ? void 0 : auth.id); })) !== null && _g !== void 0 ? _g : [];
-                        const tokens = (_l = (_k = (_j = (_h = channelData === null || channelData === void 0 ? void 0 : channelData.map((u) => {
-                            var _a, _b, _c, _d;
-                            return (_d = (_c = (_b = (_a = u === null || u === void 0 ? void 0 : u.user) === null || _a === void 0 ? void 0 : _a.tokens) === null || _b === void 0 ? void 0 : _b.filter((t) => (t === null || t === void 0 ? void 0 : t.type) == 'EXPO_NOTIFICATION_TOKEN')) === null || _c === void 0 ? void 0 : _c.map((et) => et === null || et === void 0 ? void 0 : et.token)) !== null && _d !== void 0 ? _d : [];
-                        })) === null || _h === void 0 ? void 0 : _h.flat(1)) === null || _j === void 0 ? void 0 : _j.filter((t) => t)) === null || _k === void 0 ? void 0 : _k.filter((value, index, array) => array.indexOf(value) === index)) !== null && _l !== void 0 ? _l : [];
-                        console.log('expo to', JSON.stringify(tokens));
-                        if ((tokens === null || tokens === void 0 ? void 0 : tokens.length) > 0) {
-                            const to = (tokens === null || tokens === void 0 ? void 0 : tokens.length) > 0 ? tokens : [];
-                            sendPushNotification(title, body, notificationData, to);
-                        }
-                    }
-                });
-            },
-        });
-        if (images && images.length > 0 && ((_a = data === null || data === void 0 ? void 0 : data.sendMessage) === null || _a === void 0 ? void 0 : _a.id)) {
-            const { id: postId } = data.sendMessage;
+        if (images && images.length > 0) {
+            const postId = mongooseObjectId === null || mongooseObjectId === void 0 ? void 0 : mongooseObjectId.getNewMongooseObjectId;
             setLoading(true);
             const uploadResponse = await startUpload({
                 file: images,
@@ -1478,25 +3105,122 @@ const ConversationViewComponent = ({ channelId }) => {
                 setImage('');
                 setFiles([]);
                 setImages([]);
-                setLoading(false);
+                //setLoading(false);
+                const files = (_a = uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.map((f) => f.id)) !== null && _a !== void 0 ? _a : null;
+                await sendThreadMessage({
+                    variables: {
+                        postId,
+                        channelId,
+                        postParentId: !parentId || parentId == 0 ? null : parentId,
+                        threadMessageInput: {
+                            content: message,
+                            files,
+                            role,
+                        },
+                    },
+                    update: (cache, { data, errors }) => {
+                        var _a;
+                        if (!data || errors) {
+                            setLoading(false);
+                            return;
+                        }
+                        const responseMessage = (_a = data === null || data === void 0 ? void 0 : data.sendThreadMessage) === null || _a === void 0 ? void 0 : _a.lastMessage;
+                        if (!parentId || parentId == 0) {
+                            setChannelMessages((messages) => [
+                                ...messages,
+                                Object.assign(Object.assign({}, responseMessage), { files: {
+                                        totalCount: uploadedFiles.length,
+                                        data: uploadedFiles,
+                                    } }),
+                            ]);
+                        }
+                        setTotalCount((t) => t + 1);
+                        setChannelToTop(channelToTop + 1);
+                        setLoading(false);
+                        setMsg('');
+                        if (!parentId || parentId == 0) {
+                            setParentId(responseMessage === null || responseMessage === void 0 ? void 0 : responseMessage.id);
+                        }
+                        const msg = message == '' ? 'Send a file' : message;
+                        fetchTokenAndSendPushNotification(msg, channelId, parentId);
+                    },
+                });
             }
-            setChannelMessages((messages) => messages.map((message) => {
-                if (message.id === postId) {
-                    return Object.assign(Object.assign({}, message), { files: {
-                            totalCount: uploadedFiles.length,
-                            data: uploadedFiles,
-                        } });
+        }
+        else {
+            setLoading(true);
+            await sendThreadMessage({
+                variables: {
+                    channelId,
+                    postParentId: !parentId || parentId == 0 ? null : parentId,
+                    threadMessageInput: {
+                        content: message,
+                        role,
+                    },
+                },
+                update: (cache, { data, errors }) => {
+                    var _a;
+                    if (!data || errors) {
+                        setLoading(false);
+                        return;
+                    }
+                    const responseMessage = (_a = data === null || data === void 0 ? void 0 : data.sendThreadMessage) === null || _a === void 0 ? void 0 : _a.lastMessage;
+                    if (!parentId || parentId == 0) {
+                        setChannelMessages((messages) => [...messages, responseMessage]);
+                        setTotalCount((t) => t + 1);
+                    }
+                    setChannelToTop(channelToTop + 1);
+                    setLoading(false);
+                    setMsg('');
+                    if (!parentId || parentId == 0) {
+                        setParentId(responseMessage === null || responseMessage === void 0 ? void 0 : responseMessage.id);
+                    }
+                    fetchTokenAndSendPushNotification(message, channelId, parentId);
+                },
+            });
+        }
+    }, [mongooseObjectId, setChannelMessages, channelId, images, parentId, expoTokens]);
+    const fetchTokenAndSendPushNotification = (message, channelId, parentId) => {
+        var _a, _b, _c, _d, _e, _f;
+        const givenName = (_b = (_a = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _a === void 0 ? void 0 : _a.given_name) !== null && _b !== void 0 ? _b : '';
+        const familyName = (_d = (_c = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _c === void 0 ? void 0 : _c.family_name) !== null && _d !== void 0 ? _d : '';
+        const fullName = givenName ? givenName + ' ' + familyName : '';
+        const title = fullName ? fullName : 'Message';
+        const body = message;
+        const notificationData = {
+            url: config_1.config.THREAD_MESSEGE_PATH,
+            params: { channelId, title: (_e = params === null || params === void 0 ? void 0 : params.title) !== null && _e !== void 0 ? _e : 'Thread', postParentId: parentId, hideTabBar: true },
+            screen: 'DialogThreadMessages',
+        };
+        if (parentId || parentId == 0) {
+            (_f = refetchThreadMessages({
+                channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+                role: role === null || role === void 0 ? void 0 : role.toString(),
+                postParentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
+            })) === null || _f === void 0 ? void 0 : _f.then((res) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                if (((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.threadMessages) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                    const participants = (_h = (_g = (_f = (_e = (_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.threadMessages) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.map((t) => t === null || t === void 0 ? void 0 : t.participants)) === null || _g === void 0 ? void 0 : _g.flat(1)) !== null && _h !== void 0 ? _h : [];
+                    const participantsTokens = (participants === null || participants === void 0 ? void 0 : participants.length) > 0
+                        ? (_k = (_j = participants === null || participants === void 0 ? void 0 : participants.filter((u) => (u === null || u === void 0 ? void 0 : u.id) != (auth === null || auth === void 0 ? void 0 : auth.id))) === null || _j === void 0 ? void 0 : _j.map((p) => p.tokens)) === null || _k === void 0 ? void 0 : _k.flat(1)
+                        : [];
+                    const expoTokens = (participantsTokens === null || participantsTokens === void 0 ? void 0 : participantsTokens.length) > 0
+                        ? (_l = participantsTokens === null || participantsTokens === void 0 ? void 0 : participantsTokens.filter((t) => (t === null || t === void 0 ? void 0 : t.type) == 'EXPO_NOTIFICATION_TOKEN')) === null || _l === void 0 ? void 0 : _l.map((et) => et === null || et === void 0 ? void 0 : et.token)
+                        : [];
+                    if ((expoTokens === null || expoTokens === void 0 ? void 0 : expoTokens.length) > 0) {
+                        const to = expoTokens;
+                        sendPushNotification(title, body, notificationData, to);
+                    }
                 }
-                return message;
-            }));
+            });
         }
     };
     const messageList = (0, react_1.useMemo)(() => {
         let currentDate = '';
         let res = [];
-        if (channelMessages.length) {
+        if (channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length) {
             (0, lodash_1.orderBy)(channelMessages, ['createdAt'], ['desc']).map((msg) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
                 let message = {
                     _id: '',
                     text: '',
@@ -1513,11 +3237,11 @@ const ConversationViewComponent = ({ channelId }) => {
                 message.text = msg.message;
                 message.createdAt = date;
                 (message.user = {
-                    _id: msg.author.id,
-                    name: msg.author.givenName + ' ' + msg.author.familyName,
-                    avatar: (_a = msg.author) === null || _a === void 0 ? void 0 : _a.picture,
+                    _id: (_b = (_a = msg === null || msg === void 0 ? void 0 : msg.author) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : (_c = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _c === void 0 ? void 0 : _c.id,
+                    name: (_h = (_e = (_d = msg === null || msg === void 0 ? void 0 : msg.author) === null || _d === void 0 ? void 0 : _d.givenName) !== null && _e !== void 0 ? _e : ((_f = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _f === void 0 ? void 0 : _f.given_name) + ' ' + ((_g = msg === null || msg === void 0 ? void 0 : msg.author) === null || _g === void 0 ? void 0 : _g.familyName)) !== null && _h !== void 0 ? _h : (_j = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _j === void 0 ? void 0 : _j.family_name,
+                    avatar: (_l = (_k = msg === null || msg === void 0 ? void 0 : msg.author) === null || _k === void 0 ? void 0 : _k.picture) !== null && _l !== void 0 ? _l : (_m = auth === null || auth === void 0 ? void 0 : auth.profile) === null || _m === void 0 ? void 0 : _m.picture,
                 }),
-                    (message.image = (_c = (_b = msg.files) === null || _b === void 0 ? void 0 : _b.data[0]) === null || _c === void 0 ? void 0 : _c.url),
+                    (message.image = (_p = (_o = msg.files) === null || _o === void 0 ? void 0 : _o.data[0]) === null || _p === void 0 ? void 0 : _p.url),
                     (message.sent = msg === null || msg === void 0 ? void 0 : msg.isDelivered),
                     (message.received = msg === null || msg === void 0 ? void 0 : msg.isRead);
                 message.type = msg === null || msg === void 0 ? void 0 : msg.type;
@@ -1543,10 +3267,6 @@ const ConversationViewComponent = ({ channelId }) => {
                 action = CALL_TO_ACTION_PATH;
                 actionId = (_e = attachment === null || attachment === void 0 ? void 0 : attachment.callToAction) === null || _e === void 0 ? void 0 : _e.link.split('/').pop();
             }
-            // if (attachment?.callToAction?.link?.includes('my-reservation-details')) {
-            //     action = 'm-reservation-detail';
-            //     actionId = attachment?.callToAction?.link.split('/').pop();
-            // }
             return (react_1.default.createElement(native_base_1.Box, { bg: CALL_TO_ACTION_BOX_BGCOLOR, borderRadius: 15, pb: 2 },
                 (attachment === null || attachment === void 0 ? void 0 : attachment.callToAction) ? (react_1.default.createElement(native_base_1.Button, { variant: 'outline', size: 'sm', borderColor: CALL_TO_ACTION_BUTTON_BORDERCOLOR, onPress: () => navigation.navigate(action, { reservationId: actionId }) },
                     react_1.default.createElement(native_base_1.Text, { color: CALL_TO_ACTION_TEXT_COLOR }, attachment.callToAction.title))) : null,
@@ -1585,89 +3305,55 @@ const ConversationViewComponent = ({ channelId }) => {
             }, alt: 'image' }));
     }, [imageObject]);
     const renderMessage = (props) => {
-        // const {
-        //     currentMessage: { text: currText },
-        // } = props;
-        //let messageTextStyle: any;
-        // Make "pure emoji" messages much bigger than plain text.
-        // if (currText && emojiUtils.isPureEmojiString(currText)) {
-        //   messageTextStyle = {
-        //     fontSize: 28,
-        //     // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
-        //     lineHeight: Platform.OS === 'android' ? 34 : 30,
-        //   }
-        // }
-        // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
         return react_1.default.createElement(SlackMessageContainer_1.SlackMessage, Object.assign({}, props, { isShowImageViewer: isShowImageViewer, setImageViewer: setImageViewerObject }));
     };
-    let onScroll = false;
-    const onEndReached = () => {
-        console.log('on end reached');
-        if (!onScroll)
-            return;
-        // load messages, show ActivityIndicator
-        onScroll = false;
-        // setLoadingOldMessages(true);
-    };
-    // const onMomentumScrollBegin = useCallback(
-    //     ({ nativeEvent }: any) => {
-    //         onScroll = true;
-    //         console.log('scroll top');
-    //         if (!loadingOldMessages && channelMessages?.length <= 10 && channelMessages?.length != totalCount) {
-    //             onFetchOld();
-    //         } else if (!loadingOldMessages && isCloseToTop(nativeEvent) && channelMessages?.length != totalCount) {
-    //             onFetchOld();
-    //         }
-    //     },
-    //     [loadingOldMessages, channelMessages],
-    // );
-    const onMomentumScrollBegin = ({ nativeEvent }) => {
-        onScroll = true;
-        console.log('scroll top');
-        if (!loadingOldMessages &&
-            ((channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length) <= 10 || isCloseToTop(nativeEvent)) &&
-            (channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length) != totalCount) {
-            onFetchOld();
-        }
-    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        loadingOldMessages && react_1.default.createElement(native_base_1.Spinner, null),
-        react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList, 
-            // listViewProps={{
-            //     onEndReached: onEndReached,
-            //     onEndReachedThreshold: 0.5,
-            //     onMomentumScrollBegin: onMomentumScrollBegin,
-            // }}////
-            // listViewProps={{
-            //     scrollEventThrottle: 400,
-            //     onScroll: ({ nativeEvent }) => { console.log('scroll')
-            //       if (!loadingOldMessages  && isCloseToTop(nativeEvent)) {
-            //         onFetchOld();
-            //       }
-            //     }
-            //   }}
-            onSend: (messages) => { var _a, _b; return handleSend((_b = (_a = messages[0]) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : ' '); }, text: msg ? msg : ' ', onInputTextChanged: (text) => setMsg(text), renderFooter: () => (loading ? react_1.default.createElement(native_base_1.Spinner, null) : imageLoading ? react_1.default.createElement(native_base_1.Spinner, null) : ''), scrollToBottom: true, user: {
-                // _id: currentUser?.id || '',
+        loadEarlierMsg && react_1.default.createElement(native_base_1.Spinner, null),
+        isPostParentIdThread && (react_1.default.createElement(react_1.default.Fragment, null, (threadPost === null || threadPost === void 0 ? void 0 : threadPost.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(native_base_1.VStack, { px: 2, pt: 2, pb: 0, space: 2 },
+                react_1.default.createElement(native_base_1.HStack, { space: 2, alignItems: 'center' },
+                    react_1.default.createElement(native_base_1.Avatar, { bg: 'transparent', size: 10, _image: { borderRadius: 6, borderWidth: 2, borderColor: '#fff' }, source: {
+                            uri: (_b = (_a = threadPost[0]) === null || _a === void 0 ? void 0 : _a.author) === null || _b === void 0 ? void 0 : _b.picture,
+                        } }, (0, lodash_1.startCase)((_e = (_d = (_c = threadPost[0]) === null || _c === void 0 ? void 0 : _c.author) === null || _d === void 0 ? void 0 : _d.username) === null || _e === void 0 ? void 0 : _e.charAt(0))),
+                    react_1.default.createElement(native_base_1.Box, null,
+                        react_1.default.createElement(native_base_1.Text, { color: 'black', fontWeight: 'bold' }, (_h = (_g = (_f = threadPost[0]) === null || _f === void 0 ? void 0 : _f.author) === null || _g === void 0 ? void 0 : _g.givenName) !== null && _h !== void 0 ? _h : '',
+                            ' ', (_l = (_k = (_j = threadPost[0]) === null || _j === void 0 ? void 0 : _j.author) === null || _k === void 0 ? void 0 : _k.familyName) !== null && _l !== void 0 ? _l : ''),
+                        react_1.default.createElement(native_base_1.Text, { color: 'gray.500', pl: 0 },
+                            createdAtText((_m = threadPost[0]) === null || _m === void 0 ? void 0 : _m.createdAt),
+                            " at",
+                            ' ',
+                            (0, date_fns_1.format)(new Date((_o = threadPost[0]) === null || _o === void 0 ? void 0 : _o.createdAt), 'hh:ss:a')))),
+                react_1.default.createElement(native_base_1.HStack, { px: 2, space: 2, alignItems: 'center' },
+                    react_1.default.createElement(native_base_1.Text, null, (_q = (_p = threadPost[0]) === null || _p === void 0 ? void 0 : _p.message) !== null && _q !== void 0 ? _q : ''))),
+            react_1.default.createElement(native_base_1.Box, { py: 4 },
+                react_1.default.createElement(native_base_1.Box, { px: 4, borderTopWidth: 1, borderBottomWidth: 1, py: 2, borderColor: 'gray.200' },
+                    react_1.default.createElement(native_base_1.Text, { color: 'gray.600', fontWeight: 'bold' }, (_s = (_r = threadPost[0]) === null || _r === void 0 ? void 0 : _r.replies) === null || _s === void 0 ? void 0 :
+                        _s.totalCount,
+                        ' ',
+                        ((_u = (_t = threadPost[0]) === null || _t === void 0 ? void 0 : _t.replies) === null || _u === void 0 ? void 0 : _u.totalCount) > 0 ? 'replies' : 'reply'))))))),
+        react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList, onSend: (messages) => { var _a, _b; return handleSend((_b = (_a = messages[0]) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : ' '); }, text: msg ? msg : ' ', onInputTextChanged: (text) => setMsg(text), renderFooter: () => (loading ? react_1.default.createElement(native_base_1.Spinner, null) : imageLoading ? react_1.default.createElement(native_base_1.Spinner, null) : ''), scrollToBottom: true, user: {
                 _id: (auth === null || auth === void 0 ? void 0 : auth.id) || '',
-            }, isTyping: true, alwaysShowSend: loading ? false : true, onLoadEarlier: onFetchOld, infiniteScroll: true, renderSend: renderSend, loadEarlier: ((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.totalCount) > channelMessages.length, 
-            //isLoadingEarlier={isLoadingEarlier}
-            //extraData={{ isLoadingEarlier: loadingOldMessages }}
-            //renderLoadEarlier={() => <Spinner />}}
-            renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory, renderMessage: renderMessage, renderChatFooter: () => (react_1.default.createElement(SlackMessageContainer_1.ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent: modalContent })), lightboxProps: {
+            }, isTyping: true, alwaysShowSend: loading ? false : true, 
+            // onLoadEarlier={onFetchOld}
+            infiniteScroll: true, renderSend: renderSend, loadEarlier: ((_v = data === null || data === void 0 ? void 0 : data.messages) === null || _v === void 0 ? void 0 : _v.totalCount) > channelMessages.length, isLoadingEarlier: loadEarlierMsg, renderLoadEarlier: () => !loadEarlierMsg && (react_1.default.createElement(native_base_1.Center, { py: 2 },
+                react_1.default.createElement(native_base_1.Button, { onPress: () => onFetchOld(data, channelMessages), variant: 'outline', _text: { color: 'black', fontSize: 15, fontWeight: 'bold' } }, "Load earlier messages"))), renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory, renderMessage: renderMessage, renderChatFooter: () => (react_1.default.createElement(SlackMessageContainer_1.ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent: modalContent })), messagesContainerStyle: (messageList === null || messageList === void 0 ? void 0 : messageList.length) == 0 && { transform: [{ scaleY: -1 }] }, renderChatEmpty: () => (react_1.default.createElement(react_1.default.Fragment, null, !threadLoading && !messageLoading && messageList && (messageList === null || messageList === void 0 ? void 0 : messageList.length) == 0 && (react_1.default.createElement(native_base_1.Box, { p: 5 },
+                react_1.default.createElement(native_base_1.Center, { mt: 6 },
+                    react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: "chatbubbles", size: 'xl' }),
+                    react_1.default.createElement(native_base_1.Text, null, "You don't have any message yet!")))))), lightboxProps: {
                 underlayColor: 'transparent',
                 springConfig: { tension: 90000, friction: 90000 },
                 disabled: true,
             } })));
 };
-exports.ConversationView = react_1.default.memo(ConversationViewComponent);
+exports.ThreadConversationView = react_1.default.memo(ThreadConversationViewComponent);
 
 
 /***/ }),
 
-/***/ "./src/screens/inbox/containers/Dialogs.tsx":
-/*!**************************************************!*\
-  !*** ./src/screens/inbox/containers/Dialogs.tsx ***!
-  \**************************************************/
+/***/ "./src/screens/inbox/containers/ThreadsView.tsx":
+/*!******************************************************!*\
+  !*** ./src/screens/inbox/containers/ThreadsView.tsx ***!
+  \******************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -1695,113 +3381,153 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Dialogs = void 0;
+exports.ThreadsView = void 0;
 const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
 const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
 const react_redux_1 = __webpack_require__(/*! react-redux */ "react-redux");
 const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
-const DialogsListItem_1 = __webpack_require__(/*! ../components/DialogsListItem */ "./src/screens/inbox/components/DialogsListItem.tsx");
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+const ThreadsViewItem_1 = __webpack_require__(/*! ../components/ThreadsViewItem */ "./src/screens/inbox/components/ThreadsViewItem.tsx");
 const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
 const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
 const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
-const DialogsComponent = (props) => {
-    const { channelFilters, channelRole } = props;
+const { MESSAGES_PER_PAGE } = config_1.config;
+const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelDetail }) => {
     const { params } = (0, native_1.useRoute)();
     const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
     const dispatch = (0, react_redux_1.useDispatch)();
     const navigation = (0, native_1.useNavigation)();
     const isFocused = (0, native_1.useIsFocused)();
     const [refreshing, setRefresh] = (0, react_1.useState)(false);
-    // const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
-    const { data: userChannels, loading: userChannelsLoading, refetch: getChannelsRefetch, } = (0, platform_client_1.useGetChannelsByUserQuery)({
+    const [threadData, setThreadsData] = (0, react_1.useState)([]);
+    const { data, loading: threadLoading, error, refetch, } = (0, platform_client_1.useThreadMessagesQuery)({
         variables: {
-            role: channelRole,
-            criteria: channelFilters,
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            role: role === null || role === void 0 ? void 0 : role.toString(),
+            limit: MESSAGES_PER_PAGE,
         },
-        onCompleted: (data) => {
-            setRefresh(false);
-        }
+        fetchPolicy: 'cache-and-network',
     });
+    const { data: threadCreatedUpdated } = (0, platform_client_1.useOnThreadCreatedUpdatedSubscription)();
     (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        var _a;
         // Do something when the screen is focused
-        setRefresh(false);
-        getChannelsRefetch({ role: channelRole, criteria: channelFilters });
+        navigation === null || navigation === void 0 ? void 0 : navigation.setOptions({ title: (_a = params === null || params === void 0 ? void 0 : params.title) !== null && _a !== void 0 ? _a : 'Thread' });
+        refetch({
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            role: role === null || role === void 0 ? void 0 : role.toString(),
+            limit: MESSAGES_PER_PAGE,
+        }).then(({ data }) => {
+            var _a, _b, _c;
+            if (!((_a = data === null || data === void 0 ? void 0 : data.threadMessages) === null || _a === void 0 ? void 0 : _a.data)) {
+                return;
+            }
+            if ((_c = (_b = data === null || data === void 0 ? void 0 : data.threadMessages) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.length) {
+                const { data: newThreads } = data === null || data === void 0 ? void 0 : data.threadMessages;
+                setThreadsData((oldThreads) => (0, lodash_1.uniqBy)([...oldThreads, ...newThreads], ({ id }) => id));
+            }
+        });
         return () => {
             // Do something when the screen is unfocused
             // Useful for cleanup functions
         };
-    }, [channelFilters]));
-    const channels = react_1.default.useMemo(() => {
-        var _a, _b, _c;
-        if (!((_a = userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) === null || _a === void 0 ? void 0 : _a.length))
-            return null;
-        let uChannels = (_c = (_b = userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) === null || _b === void 0 ? void 0 : _b.filter((c) => c.members.some((u) => { var _a; return ((_a = u === null || u === void 0 ? void 0 : u.user) === null || _a === void 0 ? void 0 : _a.id) != (auth === null || auth === void 0 ? void 0 : auth.id) && u.user.__typename == 'UserAccount'; }))) !== null && _c !== void 0 ? _c : [];
-        return uChannels || [];
-    }, [userChannels]);
-    // useEffect(() => {
-    //     setTimeout(() => {
-    //         dispatch({
-    //             type: CHANGE_SETTINGS_ACTION,
-    //             payload: {
-    //                 footerRender: false,
-    //             },
-    //         } as any);
-    //     }, 0);
-    //     return () => {
-    //         dispatch({
-    //             type: CHANGE_SETTINGS_ACTION,
-    //             payload: {
-    //                 footerRender: true,
-    //             },
-    //         } as any);
-    //     };
-    // }, []);
-    // useEffect(() => {
-    //     if (userChannels?.channelsByUser) {
-    //         if (userChannels?.channelsByUser?.length == 0) {
-    //             setUserDirectChannel([]);
-    //         }
-    //         //Direct channel
-    //         let userDirectChannels: any =
-    //             userChannels?.channelsByUser
-    //                 ?.filter((i: any) => i.type == 'DIRECT')
-    //                 ?.filter((c: any) =>
-    //                     c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
-    //                 ) ?? [];
-    //         if (userDirectChannels?.length > 0) setUserDirectChannel(userDirectChannels);
-    //     }
-    // }, [userChannels?.channelsByUser]);
-    const handleSelectChannel = (0, react_1.useCallback)((id, title) => {
-        var _a;
-        if (params === null || params === void 0 ? void 0 : params.channelId) {
-            navigation.navigate(config_1.config.INBOX_MESSEGE_PATH, {
-                channelId: params === null || params === void 0 ? void 0 : params.channelId,
-                title: (_a = params === null || params === void 0 ? void 0 : params.title) !== null && _a !== void 0 ? _a : null,
-                hideTabBar: true,
-            });
+    }, []));
+    react_1.default.useEffect(() => {
+        var _a, _b;
+        if ((_b = (_a = data === null || data === void 0 ? void 0 : data.threadMessages) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) {
+            const { data: newThreads } = data === null || data === void 0 ? void 0 : data.threadMessages;
+            setThreadsData((oldThreads) => (0, lodash_1.uniqBy)([...oldThreads, ...newThreads], ({ id }) => id));
         }
-        else {
-            navigation.navigate(config_1.config.INBOX_MESSEGE_PATH, {
-                channelId: id,
-                title: title,
-                hideTabBar: true,
+    }, [data]);
+    react_1.default.useEffect(() => {
+        var _a;
+        if ((_a = threadCreatedUpdated === null || threadCreatedUpdated === void 0 ? void 0 : threadCreatedUpdated.threadCreatedUpdated) === null || _a === void 0 ? void 0 : _a.data) {
+            const { data: newThreads } = threadCreatedUpdated === null || threadCreatedUpdated === void 0 ? void 0 : threadCreatedUpdated.threadCreatedUpdated;
+            setThreadsData((oldThreads) => {
+                const i = oldThreads.findIndex((el) => el.id === (newThreads === null || newThreads === void 0 ? void 0 : newThreads.id));
+                if (i > -1)
+                    oldThreads[i] = newThreads; // (2)
+                else
+                    oldThreads.push(newThreads);
+                return oldThreads;
             });
+            // setThreadsData((oldThreads: any) => uniqBy([...oldThreads, newThreads], ({ id }) => id));
         }
+    }, [threadCreatedUpdated]);
+    const threads = react_1.default.useMemo(() => {
+        if (!(threadData === null || threadData === void 0 ? void 0 : threadData.length))
+            return null;
+        return threadData || [];
+    }, [threadData]);
+    // const threads = React.useMemo(() => {
+    //     if (!data?.threadMessages?.data?.length) return null;
+    //     return data?.threadMessages?.data || [];
+    // }, [data]);
+    const handleSelectThread = (0, react_1.useCallback)((id, title, postParentId) => {
+        navigation.navigate(config_1.config.THREAD_MESSEGE_PATH, {
+            channelId: id,
+            role: role === null || role === void 0 ? void 0 : role.toString(),
+            title: title,
+            postParentId: postParentId,
+            hideTabBar: true,
+        });
+        // if (params?.channelId) {
+        //     navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
+        //         channelId: params?.channelId,
+        //         title: params?.title ?? null,
+        //         postParentId: postParentId,
+        //         hideTabBar: true,
+        //     });
+        // } else {
+        //     navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
+        //         channelId: id,
+        //         title: title,
+        //         postParentId: postParentId,
+        //         hideTabBar: true,
+        //     });
+        // }
     }, []);
     const handleRefresh = (0, react_1.useCallback)(() => {
-        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
-        getChannelsRefetch({ role: channelRole, criteria: channelFilters });
+        refetch({
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            role: role === null || role === void 0 ? void 0 : role.toString(),
+            limit: MESSAGES_PER_PAGE,
+        }).then(({ data }) => {
+            var _a, _b, _c;
+            if (!((_a = data === null || data === void 0 ? void 0 : data.threadMessages) === null || _a === void 0 ? void 0 : _a.data)) {
+                return;
+            }
+            if ((_c = (_b = data === null || data === void 0 ? void 0 : data.threadMessages) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.length) {
+                const { data: newThreads } = data === null || data === void 0 ? void 0 : data.threadMessages;
+                setThreadsData((oldThreads) => (0, lodash_1.uniqBy)([...oldThreads, ...newThreads], ({ id }) => id));
+            }
+        });
     }, []);
-    return (react_1.default.createElement(native_base_1.Box, { p: 2 },
-        react_1.default.createElement(native_base_1.FlatList, { data: channels && (channels === null || channels === void 0 ? void 0 : channels.length) > 0 ? channels : [], onRefresh: handleRefresh, refreshing: userChannelsLoading, contentContainerStyle: { minHeight: '100%' }, ItemSeparatorComponent: () => react_1.default.createElement(native_base_1.Box, { height: "0.5", backgroundColor: "gray.200" }), renderItem: ({ item: channel }) => (react_1.default.createElement(DialogsListItem_1.DialogsListItem, { onOpen: handleSelectChannel, currentUser: auth, channel: channel, selectedChannelId: params === null || params === void 0 ? void 0 : params.channelId })), ListEmptyComponent: () => (react_1.default.createElement(react_1.default.Fragment, null, userChannelsLoading ? (react_1.default.createElement(native_base_1.Spinner, null)) : (react_1.default.createElement(native_base_1.Box, { p: 5 },
-                react_1.default.createElement(native_base_1.Heading, null, "Chat"),
-                react_1.default.createElement(native_base_1.Input, { height: 50, mt: 3, placeholder: "Search", borderRadius: 50, borderColor: 'gray.200', borderWidth: 2 }),
-                react_1.default.createElement(native_base_1.Center, { mt: 6 },
-                    react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: "chatbubbles", size: 'xl' }),
-                    react_1.default.createElement(native_base_1.Text, null, "You don't have any messages yet!")))))), keyExtractor: (item, index) => 'key' + index })));
+    const fetchMoreThreads = (0, react_1.useCallback)(() => {
+        refetch({
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+            role: role === null || role === void 0 ? void 0 : role.toString(),
+            skip: threads === null || threads === void 0 ? void 0 : threads.length,
+        });
+    }, []);
+    return (react_1.default.createElement(native_base_1.Box, { flex: 1, p: 2, pb: 0, _dark: {
+            borderColor: 'coolGray.600',
+            backgroundColor: 'gray.700',
+        }, _web: {
+            shadow: 2,
+            borderWidth: 0,
+        }, _light: {
+            backgroundColor: 'gray.50',
+        } },
+        react_1.default.createElement(native_base_1.FlatList, { style: { flex: 1 }, data: threads && (threads === null || threads === void 0 ? void 0 : threads.length) > 0 ? threads : [], onRefresh: handleRefresh, refreshing: threadLoading, contentContainerStyle: { paddingBottom: 60 }, ItemSeparatorComponent: () => react_1.default.createElement(native_base_1.Box, { height: "0.5", backgroundColor: "gray.200" }), renderItem: ({ item: thread }) => (react_1.default.createElement(ThreadsViewItem_1.ThreadViewItem, { onOpen: handleSelectThread, currentUser: auth, thread: thread })), ListEmptyComponent: () => (react_1.default.createElement(react_1.default.Fragment, null,
+                !threadLoading || (threads === null || threads === void 0 ? void 0 : threads.length) == 0,
+                react_1.default.createElement(native_base_1.Box, { p: 5 },
+                    react_1.default.createElement(native_base_1.Center, { mt: 6 },
+                        react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: "chatbubbles", size: 'xl' }),
+                        react_1.default.createElement(native_base_1.Text, null, "You don't have any message yet!"))))), keyExtractor: (item, index) => 'threads-view-key' + index, onEndReached: fetchMoreThreads, onEndReachedThreshold: 0.1 })));
 };
-exports.Dialogs = react_1.default.memo(DialogsComponent);
+exports.ThreadsView = react_1.default.memo(ThreadsViewComponent);
 
 
 /***/ }),
@@ -1830,6 +3556,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 __exportStar(__webpack_require__(/*! ./inbox/Inbox */ "./src/screens/inbox/Inbox.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./inbox/DialogMessages */ "./src/screens/inbox/DialogMessages.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./inbox/DialogThreads */ "./src/screens/inbox/DialogThreads.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./inbox/DialogThreadMessages */ "./src/screens/inbox/DialogThreadMessages.tsx"), exports);
 
 
 /***/ }),