@messenger-box/tailwind-ui-inbox 10.0.3-alpha.0

package/src/container/ThreadMessages.tsx

@@ -0,0 +1,378 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { MessageInput, Messages } from '../components';
+import { BiChevronLeftSquare } from '@react-icons/all-files/bi/BiChevronLeftSquare.js';
+import { IFileInfo, IPostThread } from 'common';
+import {
+    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+    useCreatePostThreadMutation,
+    useThreadMessagesLazyQuery,
+    useGetPostThreadLazyQuery,
+    useViewChannelDetailQuery,
+} from 'common/graphql';
+import { useUploadFiles } from '@messenger-box/platform-client';
+import { config } from '../config';
+import { orderBy, uniqBy } from 'lodash-es';
+import { useDispatch, useSelector } from 'react-redux';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { useNavigate } from '@remix-run/react';
+import { objectId } from '@messenger-box/core';
+
+const { MESSAGES_PER_PAGE, WEB_INBOX_MESSEGE_PATH } = config;
+
+interface ThreadMessagesProps {
+    channelId: any;
+    postParentId: any;
+    isPostParentIdThread?: any;
+    role: string;
+    goBack?: boolean;
+    pathPrefix?: string;
+    setPostId?: (id: any) => void;
+}
+
+// Custom Skeleton component using Tailwind
+const Skeleton = ({ height = '40px' }: { height?: string }) => (
+    <div className="animate-pulse bg-gray-200 rounded" style={{ height }} />
+);
+
+const ThreadMessages = ({
+    channelId,
+    postParentId,
+    role,
+    isPostParentIdThread,
+    goBack = false,
+    pathPrefix,
+    setPostId,
+}: ThreadMessagesProps) => {
+    const navigate = useNavigate();
+    const currentUser: any = useSelector(userSelector);
+    const [parentId, setParentId] = React.useState<any>(postParentId);
+    const [channelMessages, setChannelMessages] = React.useState<any>([]);
+    const [totalCount, setTotalCount] = React.useState<any>(0);
+    const [loadingOldMessages, setLoadingOldMessages] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const dispatch = useDispatch();
+    const threadMessageRootRef = React.useRef(null);
+    const threadMessageListRef = React.useRef(null);
+    const [postThread, setPostThread] = useState<IPostThread>();
+    const messageListRef = useRef(null);
+    const [channelToTop, setChannelToTop] = React.useState(0);
+    const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+    const { startUpload } = useUploadFiles();
+    const { refetch: refetchChannel } = useViewChannelDetailQuery({
+        variables: {
+            id: channelId?.toString(),
+        },
+    });
+    const [sendThreadMessage] = useCreatePostThreadMutation();
+    const [
+        getThreadMessages,
+        { data, loading: threadLoading, fetchMore: fetchMoreMessages, refetch: refetchThreadMessages, subscribeToMore },
+    ] = useGetPostThreadLazyQuery({ fetchPolicy: 'cache-and-network' });
+
+    const [selectedPost, setSelectedPost] = useState(null);
+
+    const onMessageClick = (msg) => {
+        setSelectedPost(msg);
+    };
+
+    React.useEffect(() => {
+        refetchChannel({ id: channelId?.toString() });
+        if (postParentId) {
+            refetchThreadMessages({
+                channelId: channelId?.toString(),
+                role: role?.toString(),
+                postParentId: postParentId?.toString(),
+                selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                limit: MESSAGES_PER_PAGE,
+            });
+        }
+        setParentId(postParentId);
+    }, [postParentId]);
+
+    React.useEffect(() => {
+        // if (parentId && parentId == 0) {
+        setLoading(false);
+        if (channelId && parentId) {
+            getThreadMessages({
+                variables: {
+                    channelId: channelId?.toString(),
+                    role: role?.toString(),
+                    postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                    selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                    limit: MESSAGES_PER_PAGE,
+                },
+            });
+        }
+    }, [channelId, parentId]);
+
+    React.useEffect(() => {
+        if (data?.getPostThread) {
+            const threads: any = data.getPostThread;
+            const threadPost = threads?.post ?? [];
+            const threadReplies = threads?.replies ?? [];
+            const messeageTotalCount = threads?.replyCount ?? 0;
+            const messages = [threadPost, ...threadReplies];
+            if (
+                (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
+                (messages && messages.length > 0 && channelMessages.length === 0)
+            ) {
+                setThreadMessages(messages, messeageTotalCount);
+            }
+        }
+        if (isScrollToBottom && channelMessages) scrollToBottom();
+    }, [data, channelMessages, loadingOldMessages, totalCount, isPostParentIdThread, isScrollToBottom]);
+
+    const setThreadMessages = (messages: any, messagesTotalCount: number) => {
+        setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+        setTotalCount(messagesTotalCount);
+    };
+
+    const sortedMessages = useMemo(
+        () => channelMessages && orderBy(channelMessages, ['createdAt'], ['asc']),
+        [channelMessages],
+    );
+
+    const scrollToBottom = React.useCallback(() => {
+        if (threadMessageListRef?.current) {
+            setIsScrollToBottom(false);
+            threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
+        }
+    }, [threadMessageListRef]);
+
+    const handleSend = useCallback(
+        async (message: string, files: []) => {
+            if (!(message && channelId)) {
+                return;
+            }
+            const postId = objectId();
+
+            if (files && files?.length > 0) {
+                const uploadResponse = await startUpload({
+                    file: files,
+                    saveUploadedFile: {
+                        variables: {
+                            postId,
+                        },
+                    },
+                    createUploadLink: {
+                        variables: {
+                            postId,
+                        },
+                    },
+                });
+                if (!uploadResponse || uploadResponse?.error) {
+                    const errorMsg =
+                        uploadResponse?.error?.message || 'File upload failed. Please check your S3 configuration.';
+                    console.error('Upload failed:', errorMsg);
+                    alert(`Upload failed: ${errorMsg}`);
+                    setLoading(false);
+                    return;
+                }
+                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+                if (uploadResponse.data) {
+                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
+                    await sendThreadMessage({
+                        variables: {
+                            postId,
+                            channelId,
+                            postThreadId: postThread && postThread?.id,
+                            postParentId: !parentId || parentId == 0 ? null : parentId,
+                            threadMessageInput: {
+                                content: message,
+                                files,
+                                role,
+                            },
+                        },
+                        update: (cache, { data, errors }) => {
+                            if (!data || errors) {
+                                setLoading(false);
+                                return;
+                            }
+                            const responseMessage = data?.createPostThread?.lastMessage;
+                            setPostThread(data?.createPostThread?.data);
+                            if (!parentId || parentId == 0) {
+                                setParentId(data?.createPostThread?.lastMessage?.id);
+                                setPostId(data?.createPostThread?.lastMessage?.id);
+                                // dispatch(
+                                //     push(
+                                //         `${pathPrefix ? pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}/${
+                                //             data?.createPostThread?.lastMessage?.id
+                                //         }`,
+                                //     ),
+                                // );
+                            }
+
+                            setChannelToTop(channelToTop + 1);
+                            setLoading(false);
+
+                            // scrollToBottom();
+                        },
+                    });
+                }
+            } else {
+                await sendThreadMessage({
+                    variables: {
+                        channelId,
+                        postParentId: !parentId || parentId == 0 ? null : parentId,
+                        postThreadId: postThread && postThread?.id,
+                        threadMessageInput: {
+                            content: message,
+                            role,
+                        },
+                    },
+                    update: (cache, { data, errors }) => {
+                        if (!data || errors) {
+                            return;
+                        }
+                        setPostThread(data?.createPostThread.data);
+                        if (!parentId || parentId == 0) {
+                            setParentId(data?.createPostThread?.lastMessage?.id);
+                            setPostId(data?.createPostThread?.lastMessage?.id);
+                            // dispatch(
+                            //     push(
+                            //         `${pathPrefix ? pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}/${
+                            //             data?.createPostThread?.lastMessage?.id
+                            //         }`,
+                            //     ),
+                            // );
+                        }
+                        setChannelToTop(channelToTop + 1);
+                        //scrollToBottom();
+                    },
+                });
+            }
+        },
+        [setChannelMessages, channelId, parentId, channelToTop, postThread],
+    );
+
+    const onFetchOld = useCallback(
+        async (skip: number) => {
+            if (channelId && parentId) {
+                setLoadingOldMessages(true);
+                fetchMoreMessages({
+                    variables: {
+                        channelId: channelId?.toString(),
+                        role: role?.toString(),
+                        postParentId: parentId?.toString(),
+                        selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                        limit: MESSAGES_PER_PAGE,
+                        skip: skip - 1,
+                    },
+                })
+                    .then((res: any) => {
+                        if (res?.data?.getPostThread) {
+                            const threads: any = res?.data?.getPostThread;
+                            const threadReplies = threads?.replies ?? [];
+                            const messeageTotalCount = threads?.replyCount ?? 0;
+                            setThreadMessages(threadReplies, messeageTotalCount);
+                            if (threadMessageRootRef?.current) {
+                                threadMessageRootRef.current.scrollTop =
+                                    threadMessageRootRef.current.scrollTop +
+                                    threadMessageRootRef.current.clientHeight / 2;
+                            }
+                        }
+                    })
+                    .finally(() => {
+                        setLoadingOldMessages(false);
+                    })
+                    .catch((error: any) => {
+                        setLoadingOldMessages(false);
+                    });
+            }
+        },
+        [parentId, channelId, threadMessageRootRef, channelMessages],
+    );
+
+    const onMessagesScroll = useCallback(
+        async (e) => {
+            if (threadMessageRootRef.current) {
+                const {
+                    clientHeight: messageContainerClientHeight,
+                    scrollHeight: messageContainerScrollHeight,
+                    scrollTop: messageContainerScrollTop,
+                    offsetTop: messageContainerOffsetTop,
+                } = threadMessageRootRef?.current;
+                if (
+                    messageContainerClientHeight - messageContainerScrollTop == messageContainerScrollHeight &&
+                    !loadingOldMessages &&
+                    totalCount > channelMessages.length
+                ) {
+                    await onFetchOld(channelMessages?.length);
+                }
+            }
+        },
+        [threadMessageRootRef, loadingOldMessages, channelMessages, totalCount],
+    );
+
+    const handleGoBack = useCallback(() => {
+        if (channelId) navigate(`${pathPrefix ? pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}/1`);
+    }, [channelId]);
+
+    if ((loading || loadingOldMessages) && !parentId) {
+        return (
+            <div className="flex flex-col space-y-4">
+                {Array(10)
+                    .fill(1)
+                    .map((x, y) => (
+                        <Skeleton height="40px" key={y} />
+                    ))}
+            </div>
+        );
+    }
+
+    return (
+        <>
+            {goBack && (
+                <button
+                    className="absolute z-10 m-1.5 w-10 bg-transparent text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-0 transition-colors duration-200"
+                    onClick={() => navigate(-1)}
+                >
+                    <BiChevronLeftSquare className="text-3xl" />
+                </button>
+            )}
+
+            <div
+                ref={threadMessageRootRef}
+                className="flex flex-col-reverse overflow-y-auto flex-grow flex-shrink p-4 px-2.5 md:px-12 lg:px-20"
+                onScroll={onMessagesScroll}
+            >
+                <Messages
+                    innerRef={messageListRef}
+                    channelId={channelId}
+                    currentUser={currentUser}
+                    channelMessages={sortedMessages}
+                    totalCount={totalCount}
+                    onMessageClick={onMessageClick}
+                    subscribeToNewMessages={() =>
+                        subscribeToMore({
+                            document: CHAT_MESSAGE_ADDED,
+                            variables: {
+                                channelId: channelId?.toString(),
+                                postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                            },
+                            updateQuery: (prev, { subscriptionData }: any) => {
+                                if (!subscriptionData.data) return prev;
+                                const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
+                                const prevReplyCount = prev?.getPostThread?.replyCount;
+                                const newReplyCount = prevReplyCount + 1;
+
+                                return Object.assign({}, prev, {
+                                    getPostThread: {
+                                        ...prev?.getPostThread,
+                                        lastReplyAt: newMessage.createdAt,
+                                        replies: [newMessage, ...prev?.getPostThread?.replies],
+                                        replyCount: newReplyCount,
+                                        updatedAt: newMessage.createdAt,
+                                    },
+                                });
+                            },
+                        })
+                    }
+                />
+            </div>
+            <MessageInput channelId={channelId} handleSend={handleSend} placeholder="Message" />
+        </>
+    );
+};
+
+export default React.memo(ThreadMessages);