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

package/src/components/InboxMessage/MessagesBuilderUi.tsx

@@ -0,0 +1,205 @@
+import { format, isToday, isYesterday } from 'date-fns';
+import React, { useMemo, useRef, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UserModalContent } from './UserModalContent';
+import { MessageSliceRenderer } from './message-widgets';
+import { ModernMessageGroupComponent } from './message-widgets/ModernMessageGroup';
+
+interface MessagesProps {
+    channelId: number;
+    currentUser: any;
+    channelMessages: any[];
+    totalCount: number;
+    innerRef?: any;
+    refetchMessages?: () => void;
+    subscribeToNewMessages?: () => any;
+    subscribeToNewServiceMessages?: () => any;
+    onMessageClick: (msg) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}
+
+export const MessagesBuilderUi = ({
+    currentUser,
+    channelMessages,
+    refetchMessages,
+    innerRef,
+    channelId,
+    subscribeToNewMessages,
+    subscribeToNewServiceMessages,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+}: MessagesProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedElement, setSelectedElement] = useState(null);
+    const { t } = useTranslation('translations');
+
+    const onOpen = (element?: any) => {
+        setSelectedElement(element);
+        setIsOpen(true);
+    };
+
+    const onClose = () => {
+        setIsOpen(false);
+        setSelectedElement(null);
+    };
+
+    useEffect(() => {
+        subscribeToNewMessages?.();
+        subscribeToNewServiceMessages?.();
+    }, [channelId]);
+
+    const messageListRef = useRef(null);
+    const scrollToBottom = React.useCallback(() => {
+        if (innerRef.current)
+            innerRef.current?.querySelector(':scope > :last-child')?.scrollIntoView({
+                behavior: 'smooth',
+                inline: 'start',
+            });
+    }, [innerRef]);
+
+    React.useEffect(() => {
+        if (channelMessages?.length) {
+            // scrollToBottom();
+        }
+    }, [channelMessages]);
+
+    const messageListWithDates = useMemo(() => {
+        let currentDate = '';
+        let res = [];
+
+        // Add original messages
+        channelMessages?.map((msg) => {
+            const date = new Date(msg.createdAt);
+            let msgDate;
+            if (isToday(date)) msgDate = t('tailwind_ui_inbox.today');
+            else if (isYesterday(date)) msgDate = t('tailwind_ui_inbox.yesterday');
+            else msgDate = format(new Date(msg.createdAt), 'eee, do MMMM');
+
+            if (msgDate !== currentDate) {
+                res.push({ type: 'date', content: msgDate });
+                currentDate = msgDate;
+            }
+            res.push(msg);
+        });
+
+        // Add dummy messages at the end if we have existing messages
+        if (channelMessages && channelMessages.length > 0) {
+            // Add today's date if not already added
+            const todayLabel = t('tailwind_ui_inbox.today');
+            if (currentDate !== todayLabel) {
+                res.push({ type: 'date', content: todayLabel });
+            }
+
+            // dummyMessages.forEach(msg => res.push(msg));
+        }
+
+        return res;
+    }, [channelMessages, t]);
+
+    // Group messages by date sections for Slack-like rendering
+    const messagesByDate = useMemo(() => {
+        const sections = [];
+        let currentSection = { date: null, messages: [] };
+
+        messageListWithDates.forEach((item) => {
+            if (item?.type === 'date') {
+                if (currentSection.messages.length > 0) {
+                    sections.push(currentSection);
+                }
+                currentSection = { date: item.content, messages: [] };
+            } else {
+                currentSection.messages.push(item);
+            }
+        });
+
+        if (currentSection.messages.length > 0) {
+            sections.push(currentSection);
+        }
+
+        return sections;
+    }, [messageListWithDates]);
+
+    return (
+        <>
+            <div
+                className={`w-full pb-4 pt-2 ${
+                    isDesktopView ? 'space-y-3 max-w-full mx-auto' : isSmallScreen ? 'space-y-2' : 'space-y-2'
+                }`}
+                ref={innerRef}
+            >
+                {messagesByDate?.map((section, sectionIndex) => (
+                    <div key={`section-${sectionIndex}`} className="w-full">
+                        {/* Date separator */}
+                        {section.date && (
+                            <div className="flex items-center justify-center my-3">
+                                <div className="flex-grow border-t border-gray-200"></div>
+                                <div className="mx-4 px-3 py-1 bg-white border border-gray-200 rounded-full text-xs font-medium text-gray-600">
+                                    {section.date}
+                                </div>
+                                <div className="flex-grow border-t border-gray-200"></div>
+                            </div>
+                        )}
+
+                        {/* Messages grouped by user and time */}
+                        <div className={`${isDesktopView ? 'mb-2' : 'mb-1'}`}>
+                            <ModernMessageGroupComponent
+                                messages={section.messages}
+                                currentUser={currentUser}
+                                onOpen={onOpen}
+                                onMessageClick={onMessageClick}
+                                isDesktopView={isDesktopView}
+                                isSmallScreen={isSmallScreen}
+                            />
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <ChatModal element={selectedElement} isOpen={isOpen} onClose={onClose} />
+        </>
+    );
+};
+
+const ChatModal = ({ element, isOpen, onClose }) => {
+    if (!isOpen) return null;
+
+    return (
+        <>
+            {/* Modal Overlay */}
+            <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={onClose} />
+
+            {/* Modal Content */}
+            <div className="fixed z-50 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                <div
+                    className="bg-white w-[1036px] h-[700px] rounded-lg shadow-xl"
+                    style={{
+                        boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+                    }}
+                >
+                    {/* Modal Header */}
+                    <div className="flex justify-between border-b border-gray-300 pb-4 pt-4">
+                        <button onClick={onClose} className="w-8 ml-3 text-black hover:text-black focus:outline-none">
+                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+
+                    {/* Modal Body */}
+                    <div className="p-4">
+                        <UserModalContent
+                            username={element?.author?.username}
+                            image={element?.imageUrl ? element.imageUrl : ''}
+                        />
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};

package/src/components/InboxMessage/Popover.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const Popover = () => {
+    const { t } = useTranslation('translations');
+    const content = [
+        {
+            name: t('tailwind_ui_inbox.all_conversations'),
+        },
+        {
+            name: t('tailwind_ui_inbox.archived_conversations'),
+            total: '0',
+        },
+        {
+            name: t('tailwind_ui_inbox.unread_conversations'),
+            total: '0',
+        },
+    ];
+    return (
+        <div>
+            {content?.map((item, index) => {
+                if (!item.total) {
+                    return (
+                        <div className="popover-style hover:bg-gray-200" key={index}>
+                            <button className="border-none text-base text-gray-800 bg-transparent h-7 p-0 cursor-pointer hover:underline">
+                                {item.name}
+                            </button>
+                        </div>
+                    );
+                } else {
+                    return (
+                        <div className="popover-style hover:bg-gray-200" key={index}>
+                            <button className="border-none text-base text-gray-800 bg-transparent h-7 p-0 cursor-pointer hover:underline">
+                                {item.name + `(${item.total})`}
+                            </button>
+                        </div>
+                    );
+                }
+            })}
+        </div>
+    );
+};

package/src/components/InboxMessage/RightSidebar.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Slot } from '@common-stack/components-pro';
+import { MessengerSlotFillNameEnum } from '../../enums';
+import { IPost } from 'common';
+
+export interface IRightSidebar extends React.HTMLAttributes<HTMLDivElement> {
+    channelMessages: IPost[];
+    isMobileView: boolean;
+    selectedPost: string;
+}
+
+export const RightSidebar = (props: IRightSidebar) => {
+    return (
+        <Slot
+            name={MessengerSlotFillNameEnum.INBOX_RIGHT_SIDEBAR}
+            fillProps={{
+                active: true,
+                ...props,
+            }}
+        />
+    );
+};

package/src/components/InboxMessage/RightSidebarAi.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Slot } from '@common-stack/components-pro';
+import { IPost } from 'common';
+import { MessengerSlotFillNameEnum } from '../../enums';
+
+export interface IRightSidebarAi extends React.HTMLAttributes<HTMLDivElement> {
+    channelId: string;
+    detailSidebarOptions: {
+        isMobileView: boolean;
+        isSmallTabletView: boolean;
+        isTabletView: boolean;
+        isDesktopView: boolean;
+        isLargeDesktopView: boolean;
+        isSmallScreen: boolean;
+        [key: string]: any;
+    };
+    windowWidth: number;
+    windowHeight: number;
+    activeTab?: string;
+    setIsLoading?: (isLoading: boolean) => void;
+    isLoading?: boolean;
+    messages?: any[];
+    selectedPost?: any;
+    [key: string]: any;
+}
+
+export const RightSidebarAi = (props: IRightSidebarAi) => {
+    return (
+        <Slot
+            name={MessengerSlotFillNameEnum.INBOX_WITH_AI_RIGHT_SIDEBAR}
+            fillProps={{
+                active: true,
+                ...props,
+            }}
+        />
+    );
+};

package/src/components/InboxMessage/ServiceConversationItem.tsx

@@ -0,0 +1,234 @@
+import React, { useMemo } from 'react';
+import {
+    useMessagesQuery,
+    useThreadMessagesQuery,
+    useGetPostThreadQuery,
+    useOnThreadChatMessageAddedSubscription,
+    useOnThreadCreatedUpdatedSubscription,
+    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
+    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+} from 'common/graphql';
+import { format, isToday, isYesterday } from 'date-fns';
+import { useLocation } from '@remix-run/react';
+
+const createdAtText = (value) => {
+    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');
+};
+
+// Custom Skeleton component using Tailwind
+const Skeleton = () => (
+    <div className="animate-pulse">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
+    </div>
+);
+
+const ServiceLastMessageComponent = ({ subscribeToNewMessages, channel, channelType, lastMessage }) => {
+    React.useEffect(() => subscribeToNewMessages(), []);
+    return (
+        <div className="flex flex-col w-full">
+            <div className="w-full flex justify-between items-center">
+                <span className="text-xs text-green-500 truncate">{channelType}</span>
+                <span className="text-xs text-gray-500">
+                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
+                </span>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-300 font-bold mt-1">{channel?.title}</p>
+            <p className="text-sm text-gray-600 dark:text-gray-400 truncate w-4/5 mt-1">{lastMessage?.message}</p>
+        </div>
+    );
+};
+
+const ServiceConversationItemComponent = ({
+    showBorder,
+    currentUser,
+    filter,
+    channel,
+    handleSelectChannel,
+    users,
+    selectedChannelId,
+    role,
+}) => {
+    const [parentId, setParentId] = React.useState<any>(null);
+    const [messages, setMessages] = React.useState([]);
+    const [servicePostParentId, setServicePostParentId] = React.useState(null);
+    const { pathname } = useLocation();
+    const {
+        data: threadMessages,
+        loading: threadMessageLoading,
+        fetchMore: fetchMoreMessages,
+        refetch: refetchThreadMessages,
+        subscribeToMore,
+    } = useThreadMessagesQuery({
+        variables: {
+            channelId: channel?.id?.toString(),
+            role,
+            limit: 10,
+        },
+        fetchPolicy: 'cache-and-network',
+    });
+
+    React.useEffect(() => {
+        if (channel) refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 10 });
+    }, [channel]);
+    // }, [selectedChannelId, channel, role]);
+
+    React.useEffect(() => {
+        if (threadMessages?.threadMessages?.data?.length) {
+            const { data }: any = threadMessages.threadMessages;
+            const replies =
+                data
+                    ?.map((t: any) => t?.replies)
+                    ?.flat(1)
+                    ?.filter((p: any) => p?.message !== '') ?? [];
+
+            const posts =
+                data
+                    ?.map((t: any) => t?.post)
+                    ?.flat(1)
+                    ?.filter((p: any) => p?.message !== '') ?? [];
+            // const post =
+            //     data?.find((t: any) => {
+            //         return t?.post?.message !== '';
+            //     }) ??
+            //     data?.find((t: any) => {
+            //         return t?.post;
+            //     }) ??
+            //     null;
+
+            if (replies?.length) {
+                setMessages((pre: any) => [...pre, ...replies]);
+            } else if (posts?.length) {
+                setMessages((pre: any) => [...pre, ...posts]);
+            }
+        }
+    }, [threadMessages]);
+
+    const lastMessage = useMemo(() => {
+        const threadMessagesData = messages?.flat(1);
+        if (!threadMessagesData?.length) {
+            return null;
+        }
+
+        let filteredLastMessage =
+            threadMessagesData && threadMessagesData?.length > 1
+                ? threadMessagesData?.reduce((a, b) => {
+                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+                  }, []) ?? null
+                : threadMessagesData?.length <= 1
+                ? threadMessagesData?.[0] ?? []
+                : null;
+
+        return filteredLastMessage;
+        // //return data[data.length - 1];
+    }, [messages]);
+
+    React.useEffect(() => {
+        if (lastMessage) {
+            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+            setServicePostParentId(sParentId);
+        }
+    }, [lastMessage]);
+
+    const creatorAndMembersId = React.useMemo(() => {
+        if (!channel?.members) return null;
+        const membersIds: any =
+            channel?.members?.filter((m: any) => m?.user?.id !== currentUser?.id)?.map((mu: any) => mu?.user?.id) ?? [];
+        const creatorId: any = channel?.creator?.id;
+        const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
+        return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
+    }, [channel]);
+
+    const postParentId = React.useMemo(() => {
+        if (!creatorAndMembersId?.length) return null;
+
+        return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
+            ? 1
+            : lastMessage?.parentId
+            ? lastMessage?.parentId
+            : lastMessage?.id ?? 0;
+    }, [creatorAndMembersId, lastMessage]);
+
+    React.useEffect(() => {
+        if (postParentId) {
+            setParentId(postParentId);
+        }
+    }, [postParentId]);
+
+    const channelType = useMemo(() => {
+        return channel?.type;
+    }, [channel]);
+
+    // const servicePostParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+
+    return (
+        <div
+            key={`services_channel_${channel.id}`}
+            className={`cursor-pointer flex items-center border-b p-3 ${
+                showBorder ? 'border-gray-300' : 'border-transparent'
+            } ${channel.id == selectedChannelId ? 'bg-gray-300 dark:bg-gray-500' : ''}`}
+            onClick={() => handleSelectChannel(channel.id, postParentId)}
+        >
+            <div className="w-10 h-10 rounded-full bg-gray-400 flex-shrink-0 overflow-hidden">
+                {channel?.creator?.picture ? (
+                    <img src={channel.creator.picture} alt="Creator avatar" className="w-full h-full object-cover" />
+                ) : (
+                    <div className="w-full h-full bg-gray-400"></div>
+                )}
+            </div>
+            <div className="ml-2 flex-grow min-w-10 max-w-96">
+                {threadMessageLoading && <Skeleton />}
+                {!threadMessageLoading && (
+                    <ServiceLastMessageComponent
+                        channel={channel}
+                        channelType={channelType}
+                        lastMessage={lastMessage}
+                        subscribeToNewMessages={() =>
+                            subscribeToMore({
+                                document: THREAD_CHAT_ADDED,
+                                variables: {
+                                    channelId: channel?.id?.toString(),
+                                    postParentId: postParentId && postParentId == 1 ? null : servicePostParentId,
+                                },
+                                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,
+                                        ) ?? [];
+
+                                    return Object.assign({}, prev, {
+                                        threadMessages: {
+                                            ...prev?.threadMessages,
+                                            totalCount: newPostThreadData?.totalCount ?? 0,
+                                            //  totalCount: prev?.threadMessages?.totalCount + 1,
+                                            data: updatedData?.length > 0 ? updatedData : [newPostThreadData],
+                                        },
+                                    });
+                                },
+                            })
+                        }
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const ServiceConversationItem = React.memo(ServiceConversationItemComponent);