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

package/src/screens/inbox/containers/ThreadConversationView.tsx

@@ -0,0 +1,764 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    Box,
+    Button,
+    HStack,
+    VStack,
+    Icon,
+    Image,
+    Spinner,
+    Text,
+    useColorModeValue,
+    ScrollView,
+    Center,
+    Avatar,
+} from 'native-base';
+import { Platform, TouchableOpacity } from 'react-native';
+import { useNavigation, useFocusEffect, useRoute } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
+import { orderBy, uniqBy, startCase } from 'lodash';
+import * as ImagePicker from 'expo-image-picker';
+import { encode as atob } from 'base-64';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { Actions, GiftedChat, IMessage, MessageText, Send } from 'react-native-gifted-chat';
+import {
+    useCheckForNewMessagesQuery,
+    useGetAllUsersQuery,
+    useThreadMessagesLazyQuery,
+    useSendThreadMessageMutation,
+    useMessagesQuery,
+    useSendMessagesMutation,
+    useViewChannelDetailQuery,
+    useUploadFilesNative,
+    useGetNewMongooseObjectIdQuery,
+    useOnThreadChatMessageAddedSubscription,
+} from '@messenger-box/platform-client';
+import { IFileInfo } from '@messenger-box/core';
+import { config } from '../config';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { SlackMessage, ImageViewerModal } from '../components/SlackMessageContainer';
+import CachedImage from '../components/CachedImage';
+import { format, isToday, isYesterday } from '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;
+
+const createdAtText = (value: string) => {
+    if (!value) return '';
+    let date = new Date(value);
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(new Date(value), 'MMM dd, yyyy');
+};
+
+interface IMessageProps extends IMessage {
+    type: string;
+    propsConfiguration?: any;
+}
+
+export interface AlertMessageAttachmentsInterface {
+    title: string;
+    isTitleHtml: boolean;
+    icon: string;
+    callToAction: {
+        title: string;
+        link: string;
+    };
+}
+
+const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any) => {
+    const { params } = useRoute<any>();
+    const [channelToTop, setChannelToTop] = useState(0);
+    const [channelMessages, setChannelMessages] = useState<any>([]);
+    const auth: any = useSelector(userSelector);
+    const [totalCount, setTotalCount] = useState<any>(0);
+    const [selectedImage, setImage] = useState<string>('');
+    const [loadingOldMessages, setLoadingOldMessages] = useState<boolean>(false);
+    const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
+    const color = useColorModeValue('white', 'black');
+    // const color = useColorModeValue('black', 'white');
+    const navigation = useNavigation<any>();
+    const [files, setFiles] = useState<File[]>([]);
+    const [images, setImages] = useState<ImagePicker.ImageInfo[]>([]);
+    const [msg, setMsg] = useState<string>('');
+    const [loading, setLoading] = useState(false);
+    const [imageLoading, setImageLoading] = useState(false);
+    const [expoTokens, setExpoTokens] = useState<any[]>([]);
+    const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
+    const [imageObject, setImageObject] = useState<any>({});
+    const [parentId, setParentId] = useState<any>(postParentId);
+    const { startUpload } = useUploadFilesNative();
+    const [threadPost, setThreadPost] = useState<any[]>([]);
+    const { data: mongooseObjectId } = useGetNewMongooseObjectIdQuery({
+        fetchPolicy: 'network-only',
+        pollInterval: 5000,
+    });
+
+    const {
+        data: newThreadMsg,
+        loading: newThreadMsgLoading,
+        error: newThreadMsgError,
+    } = useOnThreadChatMessageAddedSubscription({
+        variables: {
+            channelId: channelId?.toString(),
+            postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+        },
+    });
+
+    const [sendThreadMessage] = useSendThreadMessageMutation();
+
+    const [getThreadMessages, { data: threadMessagesData, loading: threadLoading, refetch: refetchThreadMessages }] =
+        useThreadMessagesLazyQuery({
+            variables: {
+                channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+                role: role?.toString(),
+                postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+            },
+            fetchPolicy: 'cache-and-network',
+        });
+
+    const {
+        data,
+        loading: messageLoading,
+        refetch,
+    }: any = useMessagesQuery({
+        variables: {
+            channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+            parentId: !parentId || parentId == 0 ? null : 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,
+    // });
+
+    useFocusEffect(
+        React.useCallback(() => {
+            navigation?.setOptions({ title: params?.title ?? 'Thread' });
+            if (parentId || parentId == 0) {
+                refetchThreadMessages({
+                    channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+                    role: role?.toString(),
+                    postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                });
+            }
+            refetch({
+                channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+                parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                limit: MESSAGES_PER_PAGE,
+            }).then(({ data }) => {
+                if (!data?.messages) {
+                    return;
+                }
+                const { data: messages, totalCount }: any = data.messages;
+                setTotalCount(totalCount);
+                setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
+            });
+            return () => {
+                setTotalCount(0);
+                setChannelMessages([]);
+            };
+        }, []),
+    );
+
+    useEffect(() => {
+        setParentId(postParentId);
+    }, [postParentId]);
+
+    useEffect(() => {
+        if (parentId && parentId == 0) {
+            getThreadMessages({
+                variables: {
+                    channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+                    role: role?.toString(),
+                    postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                },
+            });
+        }
+    }, [parentId]);
+
+    useEffect(() => {
+        if (threadMessagesData?.threadMessages) {
+            const { data: threads, totalCount: threadTotalCount }: any = threadMessagesData?.threadMessages;
+            const threadMessage = threads?.map((t: any) => t?.post);
+            setThreadPost(threadMessage);
+            if (!isPostParentIdThread) {
+                // setTotalCount((pc: any) => pc + threadTotalCount);
+                setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
+            }
+        }
+    }, [threadMessagesData, isPostParentIdThread]);
+
+    React.useEffect(() => {
+        if (newThreadMsg) {
+            console.log('newThreadMsg');
+            const msg = newThreadMsg?.threadChatMessageAdded;
+            setTotalCount((preCount: any) => preCount + 1);
+            setChannelMessages((oldMessages: any) => 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));
+    //             setLoadingOldMessages(false);
+    //         }
+    //         if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
+    //     }
+    // }, [data, loadingOldMessages, channelMessages, totalCount]);
+
+    useEffect(() => {
+        if ((data?.messages?.data && channelMessages.length === 0) || (data?.messages?.data && loadingOldMessages)) {
+            const { data: messages, totalCount: messeageTotalCount } = data.messages;
+            if (messages && messages.length > 0) {
+                setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+                setTotalCount(messeageTotalCount);
+            }
+            setLoadEarlierMsg(false);
+            if (loadingOldMessages) setLoadingOldMessages(false);
+        }
+    }, [data, loadingOldMessages, channelMessages]);
+
+    // useEffect(() => {
+    //     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;
+    //             setTotalCount(totalCount);
+    //             setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
+    //         });
+    //     }
+    // }, [checkForMessages, totalCount, parentId]);
+
+    React.useEffect(() => {
+        if (selectedImage) setImageLoading(false);
+    }, [selectedImage]);
+
+    // const onFetchOld = useCallback(() => {
+    //     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 = useCallback((data: any, channelMessages: any) => {
+        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));
+        }
+    }, []);
+
+    // 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: any, filename: any) => {
+        var arr = dataurl.split(','),
+            mime = arr[0].match(/:(.*?);/)[1],
+            bstr = atob(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: any = 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?.base64;
+            setImage(image);
+            const file = dataURLtoFile(image, 'inputImage.jpg');
+            setFiles((files) => files.concat(file));
+            setImages((images) => images.concat(imageSource as ImagePicker.ImageInfo));
+        }
+        if (imageSource.cancelled) setLoading(false);
+    };
+
+    const sendPushNotification = async (title: String, body: String, data: any, to: any) => {
+        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: Platform.OS === 'android' ? undefined || null : 'default',
+                }),
+            });
+            const result: any = 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 = useCallback(
+        async (message: string) => {
+            if (!channelId) return;
+            if (!message && message != ' ' && images.length == 0) return;
+
+            if (images && images.length > 0) {
+                const postId: any = mongooseObjectId?.getNewMongooseObjectId;
+                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);
+                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
+                    await sendThreadMessage({
+                        variables: {
+                            postId,
+                            channelId,
+                            postParentId: !parentId || parentId == 0 ? null : parentId,
+                            threadMessageInput: {
+                                content: message,
+                                files,
+                                role,
+                            },
+                        },
+                        update: (cache, { data, errors }: any) => {
+                            if (!data || errors) {
+                                setLoading(false);
+                                return;
+                            }
+                            const responseMessage = data?.sendThreadMessage?.lastMessage;
+                            if (!parentId || parentId == 0) {
+                                setChannelMessages((messages: any) => [
+                                    ...messages,
+                                    {
+                                        ...responseMessage,
+                                        files: {
+                                            totalCount: uploadedFiles.length,
+                                            data: uploadedFiles,
+                                        },
+                                    },
+                                ]);
+                            }
+                            setTotalCount((t: any) => t + 1);
+                            setChannelToTop(channelToTop + 1);
+                            setLoading(false);
+                            setMsg('');
+
+                            if (!parentId || parentId == 0) {
+                                setParentId(responseMessage?.id);
+                            }
+                            const msg = message == '' ? 'Send a file' : message;
+                            fetchTokenAndSendPushNotification(msg, channelId, parentId);
+                        },
+                    });
+                }
+            } else {
+                setLoading(true);
+                await sendThreadMessage({
+                    variables: {
+                        channelId,
+                        postParentId: !parentId || parentId == 0 ? null : parentId,
+                        threadMessageInput: {
+                            content: message,
+                            role,
+                        },
+                    },
+                    update: (cache, { data, errors }: any) => {
+                        if (!data || errors) {
+                            setLoading(false);
+                            return;
+                        }
+                        const responseMessage = data?.sendThreadMessage?.lastMessage;
+                        if (!parentId || parentId == 0) {
+                            setChannelMessages((messages: any) => [...messages, responseMessage]);
+                            setTotalCount((t: any) => t + 1);
+                        }
+                        setChannelToTop(channelToTop + 1);
+                        setLoading(false);
+                        setMsg('');
+                        if (!parentId || parentId == 0) {
+                            setParentId(responseMessage?.id);
+                        }
+                        fetchTokenAndSendPushNotification(message, channelId, parentId);
+                    },
+                });
+            }
+        },
+        [mongooseObjectId, setChannelMessages, channelId, images, parentId, expoTokens],
+    );
+
+    const fetchTokenAndSendPushNotification = (message: any, channelId: any, parentId: any) => {
+        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.THREAD_MESSEGE_PATH,
+            params: { channelId, title: params?.title ?? 'Thread', postParentId: parentId, hideTabBar: true },
+            screen: 'DialogThreadMessages',
+        };
+        if (parentId || parentId == 0) {
+            refetchThreadMessages({
+                channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+                role: role?.toString(),
+                postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+            })?.then((res: any) => {
+                if (res?.data?.threadMessages?.data?.length > 0) {
+                    const participants =
+                        res?.data?.threadMessages?.data?.map((t: any) => t?.participants)?.flat(1) ?? [];
+                    const participantsTokens =
+                        participants?.length > 0
+                            ? participants
+                                  ?.filter((u: any) => u?.id != auth?.id)
+                                  ?.map((p: any) => p.tokens)
+                                  ?.flat(1)
+                            : [];
+                    const expoTokens =
+                        participantsTokens?.length > 0
+                            ? participantsTokens
+                                  ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
+                                  ?.map((et: any) => et?.token)
+                            : [];
+                    if (expoTokens?.length > 0) {
+                        const to: any = expoTokens;
+                        sendPushNotification(title, body, notificationData, to);
+                    }
+                }
+            });
+        }
+    };
+
+    const messageList = useMemo(() => {
+        let currentDate = '';
+        let res: any = [];
+        if (channelMessages?.length) {
+            orderBy(channelMessages, ['createdAt'], ['desc']).map((msg) => {
+                let message: IMessageProps = {
+                    _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 ?? auth?.profile?.id,
+                    name:
+                        msg?.author?.givenName ??
+                        auth?.profile?.given_name + ' ' + msg?.author?.familyName ??
+                        auth?.profile?.family_name,
+                    avatar: msg?.author?.picture ?? auth?.profile?.picture,
+                }),
+                    (message.image = msg.files?.data[0]?.url),
+                    (message.sent = msg?.isDelivered),
+                    (message.received = msg?.isRead);
+                message.type = msg?.type;
+                message.propsConfiguration = msg?.propsConfiguration;
+                res.push(message);
+            });
+        }
+        return res;
+    }, [channelMessages]);
+
+    const renderSend = (props) => {
+        return (
+            <Send {...props}>
+                <Box>
+                    <MaterialCommunityIcons
+                        name="send-circle"
+                        style={{ marginBottom: 5, marginRight: 5 }}
+                        size={32}
+                        color="#2e64e5"
+                    />
+                </Box>
+            </Send>
+        );
+    };
+
+    const renderMessageText = (props: any) => {
+        const { currentMessage } = props;
+        if (currentMessage.type === 'ALERT') {
+            const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
+            let action: string = '';
+            let actionId: any = '';
+            if (attachment?.callToAction?.link?.includes('my-reservation-details')) {
+                action = CALL_TO_ACTION_PATH;
+                actionId = attachment?.callToAction?.link.split('/').pop();
+            }
+
+            return (
+                <Box bg={CALL_TO_ACTION_BOX_BGCOLOR} borderRadius={15} pb={2}>
+                    {attachment?.callToAction ? (
+                        <Button
+                            variant={'outline'}
+                            size={'sm'}
+                            borderColor={CALL_TO_ACTION_BUTTON_BORDERCOLOR}
+                            onPress={() => navigation.navigate(action, { reservationId: actionId })}
+                        >
+                            <Text color={CALL_TO_ACTION_TEXT_COLOR}>{attachment.callToAction.title}</Text>
+                        </Button>
+                    ) : null}
+                    <MessageText
+                        {...props}
+                        textStyle={{ left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 } }}
+                    />
+                </Box>
+            );
+        } else {
+            return <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />;
+        }
+    };
+
+    const renderActions = (props) => {
+        return (
+            <Actions
+                {...props}
+                icon={() => <Icon as={Ionicons} name={'image'} size={'lg'} color={'black'} onPress={onSelectImages} />}
+            />
+        );
+    };
+
+    const renderAccessory = (props) => {
+        return (
+            <Box>
+                {selectedImage !== '' ? (
+                    <HStack alignItems={'center'}>
+                        <Image ml={3} key={selectedImage} alt={'image'} source={{ uri: selectedImage }} size={'xs'} />
+                        <Button
+                            variant={'ghost'}
+                            colorScheme={'secondary'}
+                            onPress={() => {
+                                setFiles([]);
+                                setImage('');
+                                setImages([]);
+                            }}
+                        >
+                            Cancel
+                        </Button>
+                    </HStack>
+                ) : null}
+            </Box>
+        );
+    };
+
+    const setImageViewerObject = (obj: any, v: boolean) => {
+        setImageObject(obj);
+        setImageViewer(v);
+    };
+
+    const modalContent = React.useMemo(() => {
+        if (!imageObject) return <></>;
+        const { image, _id } = imageObject;
+        return (
+            <CachedImage
+                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: any) => {
+        return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
+    };
+
+    return (
+        <>
+            {/* {loadingOldMessages && <Spinner />} */}
+            {loadEarlierMsg && <Spinner />}
+            {isPostParentIdThread && (
+                <>
+                    {threadPost?.length > 0 && (
+                        <>
+                            <VStack px={2} pt={2} pb={0} space={2}>
+                                <HStack space={2} alignItems={'center'}>
+                                    <Avatar
+                                        bg={'transparent'}
+                                        size={10}
+                                        _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                        source={{
+                                            uri: threadPost[0]?.author?.picture,
+                                        }}
+                                    >
+                                        {startCase(threadPost[0]?.author?.username?.charAt(0))}
+                                    </Avatar>
+                                    <Box>
+                                        <Text color={'black'} fontWeight={'bold'}>
+                                            {threadPost[0]?.author?.givenName ?? ''}{' '}
+                                            {threadPost[0]?.author?.familyName ?? ''}
+                                        </Text>
+                                        <Text color={'gray.500'} pl={0}>
+                                            {createdAtText(threadPost[0]?.createdAt)} at{' '}
+                                            {format(new Date(threadPost[0]?.createdAt), 'hh:ss:a')}
+                                        </Text>
+                                    </Box>
+                                </HStack>
+                                <HStack px={2} space={2} alignItems={'center'}>
+                                    <Text>{threadPost[0]?.message ?? ''}</Text>
+                                </HStack>
+                            </VStack>
+
+                            <Box py={4}>
+                                <Box px={4} borderTopWidth={1} borderBottomWidth={1} py={2} borderColor={'gray.200'}>
+                                    <Text color={'gray.600'} fontWeight={'bold'}>
+                                        {threadPost[0]?.replies?.totalCount}{' '}
+                                        {threadPost[0]?.replies?.totalCount > 0 ? 'replies' : 'reply'}
+                                    </Text>
+                                </Box>
+                            </Box>
+                        </>
+                    )}
+                </>
+            )}
+            <GiftedChat
+                wrapInSafeArea={false}
+                renderLoading={() => <Spinner />}
+                messages={messageList}
+                onSend={(messages) => handleSend(messages[0]?.text ?? ' ')}
+                text={msg ? msg : ' '}
+                onInputTextChanged={(text) => setMsg(text)}
+                renderFooter={() => (loading ? <Spinner /> : imageLoading ? <Spinner /> : '')}
+                scrollToBottom
+                user={{
+                    _id: auth?.id || '',
+                }}
+                isTyping={true}
+                alwaysShowSend={loading ? false : true}
+                // onLoadEarlier={onFetchOld}
+                infiniteScroll={true}
+                renderSend={renderSend}
+                loadEarlier={data?.messages?.totalCount > channelMessages.length}
+                isLoadingEarlier={loadEarlierMsg}
+                renderLoadEarlier={() =>
+                    !loadEarlierMsg && (
+                        <Center py={2}>
+                            <Button
+                                onPress={() => onFetchOld(data, channelMessages)}
+                                variant={'outline'}
+                                _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
+                            >
+                                Load earlier messages
+                            </Button>
+                        </Center>
+                    )
+                }
+                renderMessageText={renderMessageText}
+                minInputToolbarHeight={50}
+                renderActions={renderActions}
+                renderAccessory={renderAccessory}
+                renderMessage={renderMessage}
+                renderChatFooter={() => (
+                    <ImageViewerModal
+                        isVisible={isShowImageViewer}
+                        setVisible={setImageViewer}
+                        modalContent={modalContent}
+                    />
+                )}
+                messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
+                renderChatEmpty={() => (
+                    <>
+                        {!threadLoading && !messageLoading && messageList && messageList?.length == 0 && (
+                            <Box p={5}>
+                                <Center mt={6}>
+                                    <Icon as={Ionicons} name="chatbubbles" size={'xl'} />
+                                    <Text>You don't have any message yet!</Text>
+                                </Center>
+                            </Box>
+                        )}
+                    </>
+                )}
+                lightboxProps={{
+                    underlayColor: 'transparent',
+                    springConfig: { tension: 90000, friction: 90000 },
+                    disabled: true,
+                }}
+            />
+        </>
+    );
+};
+
+export const ThreadConversationView = React.memo(ThreadConversationViewComponent);