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

package/src/container/Threads.tsx

@@ -0,0 +1,270 @@
+import * as React from 'react';
+import { ThreadItem } from '../components';
+import {
+    useViewChannelDetailQuery,
+    useThreadMessagesQuery,
+    useOnThreadCreatedUpdatedSubscription,
+    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
+} from 'common/graphql';
+import { useSelector, useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { useNavigate, useLocation, useParams } from '@remix-run/react';
+import { orderBy, uniqBy, startCase } from 'lodash-es';
+import { push } from '@common-stack/remix-router-redux';
+import { config } from '../config';
+const { MESSAGES_PER_PAGE, WEB_INBOX_MESSEGE_PATH } = config;
+
+// Skeleton component for loading state
+const Skeleton = ({ className = '' }: { className?: string }) => (
+    <div className={`animate-pulse bg-gray-300 rounded ${className}`}></div>
+);
+
+const Threads = ({ channelId, role, pathPrefix = null }) => {
+    const path: any = useParams();
+    const location = useLocation();
+    const dispatch = useDispatch();
+    const threadsListRootRef = React.useRef(null);
+    const threadsListRef = React.useRef(null);
+    const auth = useSelector(userSelector);
+    const [threadData, setThreadsData] = React.useState<any>([]);
+    const { t } = useTranslation('translations');
+    const {
+        data: channelData,
+        loading: channelLoading,
+        refetch: channelDetailRefetch,
+    } = useViewChannelDetailQuery({
+        variables: {
+            id: channelId?.toString(),
+        },
+    });
+
+    const {
+        data,
+        loading: threadLoading,
+        error,
+        refetch,
+        subscribeToMore,
+    } = useThreadMessagesQuery({
+        variables: {
+            channelId: channelId?.toString(),
+            role: role?.toString(),
+            limit: MESSAGES_PER_PAGE,
+            repliesLimit2: 5,
+        },
+        fetchPolicy: 'cache-and-network',
+    });
+
+    React.useEffect(() => {
+        // Do something when the screen is focused
+        channelDetailRefetch({ id: channelId?.toString() });
+
+        refetch({
+            channelId: channelId?.toString(),
+            role: role?.toString(),
+            limit: MESSAGES_PER_PAGE,
+        });
+        // .then(({ data }) => {
+        //     if (!data?.threadMessages?.data) {
+        //         return;
+        //     }
+
+        //     if (data?.threadMessages?.data?.length) {
+        //         const { data: newThreads } = data?.threadMessages;
+        //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+        //     }
+        // });
+        return () => {};
+    }, []);
+
+    // React.useEffect(() => {
+    //     if (data?.threadMessages?.data?.length) {
+    //         const { data: newThreads } = data?.threadMessages;
+    //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+    //     }
+    // }, [data]);
+
+    // React.useEffect(() => {
+    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
+    //         const { data: newThreads } = threadCreatedUpdated?.threadCreatedUpdated;
+
+    //         setData(newThreads);
+    //         // setThreadsData((oldThreads: any) => {
+    //         //     const i = oldThreads.findIndex((el: any) => el.id === newThreads?.id);
+    //         //     if (i > -1) oldThreads[i] = newThreads; // (2)
+    //         //     else oldThreads.push(newThreads);
+    //         //     return oldThreads;
+    //         // });
+    //     }
+    // }, [threadCreatedUpdated]);
+
+    const setData = React.useCallback((newThreads: any) => {
+        setThreadsData((oldThreads: any) => {
+            const i = oldThreads.findIndex((el: any) => el.id === newThreads?.id);
+            if (i > -1) oldThreads[i] = newThreads; // (2)
+            else oldThreads.push(newThreads);
+            return oldThreads;
+        });
+    }, []);
+
+    const channelsDetail = React.useMemo(() => {
+        if (!channelData?.viewChannelDetail) return null;
+        return channelData?.viewChannelDetail;
+    }, [channelData]);
+
+    const threads = React.useMemo(() => {
+        if (!data?.threadMessages?.data?.length) return null;
+        const { data: newThreads } = data?.threadMessages;
+        const threadsFiltered = uniqBy([...newThreads], ({ id }) => id);
+        return orderBy(threadsFiltered, ['updatedAt'], ['desc']) || [];
+    }, [data]);
+
+    // const threads = React.useMemo(() => {
+    //     if (!threadData?.length) return null;
+    //     return orderBy(threadData, ['updatedAt'], ['desc']) || [];
+    // }, [threadData]);
+
+    // const handleRefresh = React.useCallback(() => {
+    //     refetch({
+    //         channelId: channelId?.toString(),
+    //         role: role?.toString(),
+    //         limit: MESSAGES_PER_PAGE,
+    //     }).then(({ data }) => {
+    //         if (!data?.threadMessages?.data) {
+    //             return;
+    //         }
+
+    //         if (data?.threadMessages?.data?.length) {
+    //             const { data: newThreads } = data?.threadMessages;
+    //             setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+    //         }
+    //     });
+    // }, []);
+
+    const fetchMoreThreads = React.useCallback(() => {
+        refetch({
+            channelId: channelId?.toString(),
+            role: role?.toString(),
+            skip: threads?.length,
+        });
+    }, []);
+
+    const onMessagesScroll = React.useCallback(
+        (e) => {
+            if (threadsListRootRef.current) {
+                const { scrollTop, scrollHeight, clientHeight } = threadsListRootRef.current;
+                if (clientHeight - scrollTop > scrollHeight - 50 && !threadLoading) {
+                    fetchMoreThreads();
+                }
+            }
+        },
+        [fetchMoreThreads],
+    );
+
+    const handleSelectThread = React.useCallback(
+        (channelId: any, postId: any) => {
+            dispatch(
+                push(`${pathPrefix ? pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}/${postId}?reply=true`),
+            );
+        },
+        [location, path],
+    );
+
+    if (threadLoading) {
+        return (
+            <div className="flex flex-col space-y-4">
+                {Array(10)
+                    .fill(1)
+                    .map((x, y) => (
+                        <Skeleton key={y} className="h-10" />
+                    ))}
+            </div>
+        );
+    }
+
+    if (!threads || threads?.length == 0) {
+        return (
+            <div className="w-full bg-gray-100 h-full flex items-center justify-center">
+                <p className="text-gray-600">{t('tailwind_ui_inbox.you_dont_have_any_message_yet')}</p>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <div
+                ref={threadsListRootRef}
+                className="flex flex-grow flex-shrink overflow-y-auto px-5 md:px-5 lg:px-5 bg-gray-100"
+                onScroll={onMessagesScroll}
+            >
+                <div className="w-full" ref={threadsListRef}>
+                    <ThreadsList
+                        handleSelectThread={handleSelectThread}
+                        auth={auth}
+                        threads={threads}
+                        setData={setData}
+                        role={role}
+                        subscribeToNewMessages={() =>
+                            subscribeToMore({
+                                document: THREAD_CHAT_ADDED,
+                                variables: {
+                                    channelId: channelId?.toString(),
+                                    postParentId: null,
+                                },
+                                updateQuery: (prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData.data) return prev;
+
+                                    const newPostThreadData: any = subscriptionData?.data?.threadCreatedUpdated?.data;
+                                    const newMessage: any = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+                                    const data = prev?.threadMessages?.data?.map((t: any) =>
+                                        t.id === newPostThreadData?.id
+                                            ? {
+                                                  ...t,
+                                                  replies: [newMessage, ...t?.replies],
+                                                  replyCount: newPostThreadData?.replyCount,
+                                                  lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                  updatedAt: newPostThreadData?.updatedAt,
+                                              }
+                                            : t,
+                                    );
+
+                                    return Object.assign({}, prev, {
+                                        threadMessages: {
+                                            ...prev?.threadMessages,
+                                            // totalCount: prev?.threadMessages?.totalCount + 1,
+                                            data: data,
+                                        },
+                                    });
+                                },
+                            })
+                        }
+                    />
+                </div>
+            </div>
+        </>
+    );
+};
+
+const ThreadsList = React.memo(({ threads, handleSelectThread, auth, setData, role, subscribeToNewMessages }: any) => {
+    React.useEffect(() => subscribeToNewMessages(), []);
+    return (
+        <>
+            {threads?.length > 0 &&
+                threads?.map((thread: any, index: any) => {
+                    return (
+                        <div key={'thread-key-' + index}>
+                            <ThreadItem
+                                onOpen={handleSelectThread}
+                                currentUser={auth}
+                                thread={thread}
+                                setData={setData}
+                                role={role}
+                            />
+                        </div>
+                    );
+                })}
+        </>
+    );
+});
+
+export default React.memo(Threads);

package/src/container/ThreadsInbox.tsx

@@ -0,0 +1,354 @@
+import React, { useEffect } from 'react';
+import { format, isToday, isYesterday } from 'date-fns';
+import { orderBy, uniqBy, startCase } from 'lodash-es';
+import { OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED, useThreadMessagesQuery } from 'common/graphql';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { config } from '../config';
+
+const { MESSAGES_PER_PAGE, WEB_INBOX_MESSEGE_PATH } = config;
+
+export interface ThreadsInboxProps {
+    channelId: any;
+    role?: string;
+    pathPrefix?: string;
+    setChannelId?: (channelId: any) => void;
+    setPostId?: (postId?: any) => void;
+    setGoBack?: (goBack: boolean) => void;
+}
+
+export interface IThreadItemProps {
+    thread: any;
+    onOpen: (channelId: any, postId: any) => void;
+}
+
+export interface IThreadListProps {
+    threads: any;
+    handleSelectThread: (channelId: any, postId: any) => void;
+    threadsListRef: any;
+    subscribeToNewThreads: () => void;
+}
+
+// Skeleton component replacement
+const SkeletonLoader = () => (
+    <div className="animate-pulse">
+        <div className="h-10 bg-gray-200 rounded"></div>
+    </div>
+);
+
+export const ThreadsInbox = React.memo(
+    ({ channelId, role, setChannelId, setPostId, setGoBack, pathPrefix = null }: ThreadsInboxProps) => {
+        const threadsListRootRef = React.useRef(null);
+        const threadsListRef = React.useRef(null);
+        const auth = useSelector(userSelector);
+        const { t } = useTranslation('translations');
+        const {
+            data,
+            loading: threadLoading,
+            error,
+            refetch,
+            subscribeToMore,
+        } = useThreadMessagesQuery({
+            variables: {
+                channelId: channelId?.toString(),
+                role: role?.toString(),
+                limit: MESSAGES_PER_PAGE,
+                repliesLimit2: 5,
+            },
+            fetchPolicy: 'cache-and-network',
+        });
+
+        useEffect(() => {
+            if (channelId) {
+                setGoBack?.(false);
+                refetch({
+                    channelId: channelId?.toString(),
+                    role: role?.toString(),
+                    limit: MESSAGES_PER_PAGE,
+                    repliesLimit2: 5,
+                });
+            }
+        }, [channelId]);
+
+        const threads = React.useMemo(() => {
+            if (!data?.threadMessages?.data?.length) return null;
+            const { data: newThreads } = data?.threadMessages;
+            const threadsFiltered = uniqBy([...newThreads], ({ id }) => id);
+            return orderBy(threadsFiltered, ['updatedAt'], ['desc']) || [];
+        }, [data?.threadMessages]);
+
+        const fetchMoreThreads = React.useCallback(() => {
+            refetch({
+                channelId: channelId?.toString(),
+                role: role?.toString(),
+                skip: threads?.length,
+                repliesLimit2: 5,
+            });
+        }, []);
+
+        const onMessagesScroll = React.useCallback(
+            (e) => {
+                if (threadsListRootRef.current) {
+                    const { scrollTop, scrollHeight, clientHeight } = threadsListRootRef.current;
+                    if (clientHeight - scrollTop > scrollHeight - 50 && !threadLoading) {
+                        fetchMoreThreads();
+                    }
+                }
+            },
+            [fetchMoreThreads],
+        );
+
+        const handleSelectThread = React.useCallback((channelId: any, postId: any) => {
+            setChannelId?.(channelId);
+            setPostId?.(postId);
+            setGoBack?.(true);
+        }, []);
+
+        if (threadLoading) {
+            return (
+                <div className="space-y-4">
+                    {Array(10)
+                        .fill(1)
+                        .map((_x, _y) => (
+                            <SkeletonLoader key={_y} />
+                        ))}
+                </div>
+            );
+        }
+
+        if (!threads || threads?.length == 0) {
+            return (
+                <div className="w-full bg-gray-100 h-full flex items-center justify-center">
+                    <span className="text-gray-500">{t('tailwind_ui_inbox.you_dont_have_any_message_yet')}</span>
+                </div>
+            );
+        }
+
+        return (
+            <div
+                ref={threadsListRootRef}
+                className="flex flex-grow flex-shrink overflow-y-auto px-5 bg-gray-100"
+                onScroll={onMessagesScroll}
+            >
+                <ThreadsList
+                    threads={threads}
+                    handleSelectThread={handleSelectThread}
+                    threadsListRef={threadsListRef}
+                    subscribeToNewThreads={() =>
+                        subscribeToMore({
+                            document: THREAD_CHAT_ADDED,
+                            variables: {
+                                channelId: channelId?.toString(),
+                                postParentId: null,
+                            },
+                            updateQuery: (prev, { subscriptionData }: any) => {
+                                if (!subscriptionData.data) return prev;
+
+                                const newPostThreadData: any = subscriptionData?.data?.threadCreatedUpdated?.data;
+                                const newMessage: any = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+
+                                const updatedData =
+                                    prev?.threadMessages?.data?.map((t: any) =>
+                                        t.id === newPostThreadData?.id
+                                            ? {
+                                                  ...t,
+                                                  replies: [...t?.replies, newMessage],
+                                                  replyCount: newPostThreadData?.replyCount,
+                                                  lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                  updatedAt: newPostThreadData?.updatedAt,
+                                              }
+                                            : t,
+                                    ) ?? [];
+
+                                const threadsData = updatedData?.length
+                                    ? orderBy(updatedData, ['updatedAt'], ['desc'])
+                                    : [];
+
+                                return Object.assign({}, prev, {
+                                    threadMessages: {
+                                        ...prev?.threadMessages,
+                                        totalCount: newPostThreadData?.totalCount ?? 0,
+                                        data: threadsData?.length > 0 ? threadsData : [newPostThreadData],
+                                    },
+                                });
+                            },
+                        })
+                    }
+                />
+            </div>
+        );
+    },
+);
+
+const ThreadsList = React.memo(
+    ({ threads, handleSelectThread, threadsListRef, subscribeToNewThreads }: IThreadListProps) => {
+        React.useEffect(() => subscribeToNewThreads(), []);
+        return (
+            <div className="w-full" ref={threadsListRef}>
+                {threads?.length > 0 &&
+                    threads?.map((thread: any, index: any) => {
+                        return (
+                            <div key={'thread-key-' + index}>
+                                <ThreadItem onOpen={handleSelectThread} thread={thread} />
+                            </div>
+                        );
+                    })}
+            </div>
+        );
+    },
+);
+
+const ThreadItem = React.memo(({ thread, onOpen }: IThreadItemProps) => {
+    const { t } = useTranslation('translations');
+    const threadPostReply = React.useMemo(() => {
+        if (!thread?.replies) return null;
+        return orderBy(thread?.replies, ['updatedAt'], ['desc']) || [];
+    }, [thread]);
+
+    const createdAtText = (value: string) => {
+        if (!value) return '';
+        let date = new Date(value);
+        if (isToday(date)) return t('tailwind_ui_inbox.today');
+        if (isYesterday(date)) return t('tailwind_ui_inbox.yesterday');
+        return format(new Date(value), 'MMM dd, yyyy');
+    };
+
+    return (
+        <div className="flex-1 py-2 my-2 space-y-4">
+            <div className="flex space-x-6">
+                <div className="w-full">
+                    <div className="flex flex-col items-start pt-5 pb-5 pl-5 pr-2 space-y-5 bg-white rounded-md shadow-sm p-6">
+                        {!threadPostReply ||
+                            ((threadPostReply?.length == 0 || threadPostReply?.length == 1) && (
+                                <div className="flex w-full items-start space-x-4">
+                                    <div>
+                                        <img
+                                            className="w-9 h-9 object-cover rounded"
+                                            src={thread?.post?.author?.picture}
+                                            alt={startCase(thread?.post?.author?.username?.charAt(0))}
+                                        />
+                                    </div>
+                                    <div className="leading-3">
+                                        <div className="flex flex-col flex-1 items-start space-y-3">
+                                            <div className="flex space-x-2">
+                                                <span className="text-lg text-gray-900 font-semibold flex-wrap">
+                                                    {thread?.post?.author?.givenName ?? ''}{' '}
+                                                    {thread?.post?.author?.familyName ?? ''}
+                                                </span>
+                                                <span className="text-sm text-gray-500 font-semibold flex-wrap">
+                                                    {thread?.post ? createdAtText(thread?.post?.createdAt) : ''}
+                                                </span>
+                                            </div>
+                                            <div className="space-y-2">
+                                                <p className="text-sm text-gray-500 font-semibold flex-wrap">
+                                                    {thread?.post?.message
+                                                        ? thread?.post?.message.length < 70
+                                                            ? `${thread?.post?.message}`
+                                                            : `${thread?.post?.message.substring(0, 68)}....`
+                                                        : ''}
+                                                </p>
+
+                                                {thread?.post?.files?.data?.length > 0 &&
+                                                    thread?.post?.files?.data?.map((f: any, idx: number) => (
+                                                        <div key={idx}>
+                                                            <img
+                                                                className="w-12 h-12 object-cover"
+                                                                src={f?.url}
+                                                                alt={'Image'}
+                                                            />
+                                                        </div>
+                                                    ))}
+                                            </div>
+                                            {threadPostReply?.length == 0 && (
+                                                <button
+                                                    onClick={() =>
+                                                        onOpen(
+                                                            thread?.channel?.id?.toString(),
+                                                            thread?.post?.id?.toString(),
+                                                        )
+                                                    }
+                                                    className="py-2 px-4 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 rounded-md text-sm font-medium w-37 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                                                >
+                                                    Reply
+                                                </button>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+
+                        {threadPostReply?.length > 0 && (
+                            <>
+                                {threadPostReply
+                                    ?.slice(0, 2)
+                                    ?.reverse()
+                                    ?.map((reply: any, index: any) => (
+                                        <div
+                                            key={'thread-post-reply-item-' + index}
+                                            className="flex w-full items-start space-x-4"
+                                        >
+                                            <div>
+                                                <img
+                                                    className="w-9 h-9 object-cover rounded"
+                                                    src={reply?.author?.picture}
+                                                    alt={startCase(reply?.author?.username?.charAt(0))}
+                                                />
+                                            </div>
+
+                                            <div className="leading-3">
+                                                <div className="flex flex-col flex-1 items-start space-y-3">
+                                                    <div className="flex space-x-2">
+                                                        <span className="text-lg text-gray-900 font-semibold flex-wrap">
+                                                            {reply?.author?.givenName ?? ''}{' '}
+                                                            {reply?.author?.familyName ?? ''}
+                                                        </span>
+                                                        <span className="text-sm text-gray-500 font-semibold flex-wrap">
+                                                            {reply?.createdAt ? createdAtText(reply?.createdAt) : ''}
+                                                        </span>
+                                                    </div>
+                                                    <div className="space-y-2">
+                                                        <p className="text-sm text-gray-500 font-semibold flex-wrap">
+                                                            {reply?.message
+                                                                ? reply?.message.length < 70
+                                                                    ? `${reply?.message}`
+                                                                    : `${reply?.message.substring(0, 68)}....`
+                                                                : ''}
+                                                        </p>
+
+                                                        {reply?.files?.data?.length > 0 &&
+                                                            reply?.files?.data?.map((f: any, idx: number) => (
+                                                                <div key={idx}>
+                                                                    <img
+                                                                        className="w-12 h-12 object-cover"
+                                                                        src={f?.url}
+                                                                        alt={'Image'}
+                                                                    />
+                                                                </div>
+                                                            ))}
+                                                    </div>
+                                                    {(threadPostReply?.length == 1 || index !== 0) && (
+                                                        <button
+                                                            onClick={() =>
+                                                                onOpen(
+                                                                    thread?.channel?.id?.toString(),
+                                                                    thread?.post?.id?.toString(),
+                                                                )
+                                                            }
+                                                            className="py-2 px-4 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 rounded-md text-sm font-medium w-37 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                                                        >
+                                                            Reply
+                                                        </button>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+});

package/src/container/apply-footer-styles.ts

@@ -0,0 +1,17 @@
+export const applyFooterStyles = () => {
+    const footerElement: any = document.querySelector('#nav-footer');
+    if (footerElement) {
+        footerElement.style.display = 'none';
+    }
+    const nkqmc7: any = document.querySelector('.css-nkqmc7'); // temp, check paddingBottom needed
+    if (nkqmc7) {
+        nkqmc7.style.paddingBottom = '0px';
+        nkqmc7.style.minHeight = '0px';
+    }
+
+    return () => {
+        if (footerElement?.style) {
+            footerElement.style.display = 'block';
+        }
+    };
+};

package/src/container/index.ts

@@ -0,0 +1,31 @@
+import Inbox from './Inbox';
+import InboxWithLoader from './InboxWithLoader';
+import Threads from './Threads';
+import ThreadMessages from './ThreadMessages';
+import ServiceInbox from './ServiceInbox';
+import { ThreadsInbox } from './ThreadsInbox';
+import { ThreadMessagesInbox } from './ThreadMessagesInbox';
+////import AiInboxWithLoader from './AiInboxWithLoader';
+//import AiInbox from './AiInbox';
+//import InboxTemplate1 from './InboxTemplate1';
+import InboxWithAiLoader from './InboxWithAiLoader';
+import InboxAiMessagesLoader from './InboxAiMessagesLoader';
+import InboxContainer from './InboxContainer';
+import AiLandingInput from './AiLandingInput';
+
+export {
+    Inbox,
+    ThreadsInbox,
+    ThreadMessagesInbox,
+    Threads,
+    ThreadMessages,
+    ServiceInbox,
+    InboxWithLoader,
+    // AiInboxWithLoader,
+    // AiInbox,
+    // InboxTemplate1,
+    InboxWithAiLoader,
+    InboxAiMessagesLoader,
+    InboxContainer,
+    AiLandingInput,
+};

package/src/enums/index.ts

@@ -0,0 +1 @@
+export { MessengerSlotFillNameEnum } from './messenger-slot-fill-name-enum';

package/src/enums/messenger-slot-fill-name-enum.ts

@@ -0,0 +1,4 @@
+export enum MessengerSlotFillNameEnum {
+    INBOX_RIGHT_SIDEBAR = 'inbox-right-sidebar',
+    INBOX_WITH_AI_RIGHT_SIDEBAR = 'inbox-with-ai-right-sidebar',
+}