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

package/src/components/InboxMessage/ServiceInboxItem.tsx

@@ -0,0 +1,223 @@
+import React, { useMemo } from 'react';
+import { useLocation } from '@remix-run/react';
+import {
+    useThreadMessagesQuery,
+    useOnThreadChatMessageAddedSubscription,
+    useOnThreadCreatedUpdatedSubscription,
+    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
+    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+} from 'common/graphql';
+import { format, isToday, isYesterday } from 'date-fns';
+
+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');
+};
+
+const ServiceInboxItemComponent = ({
+    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, pathname]);
+
+    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 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 (post) {
+                setMessages((pre: any) => [...pre, ...[post]]);
+            }
+        }
+    }, [threadMessages]);
+
+    const lastMessage = useMemo(() => {
+        if (!messages?.length) {
+            return null;
+        }
+
+        let filteredLastMessage =
+            messages && messages?.length
+                ? messages?.reduce((a, b) => {
+                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+                  }, []) ?? null
+                : null;
+        return filteredLastMessage;
+    }, [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]);
+
+    return (
+        <div
+            key={`services_channel_${channel.id}`}
+            className={`
+                cursor-pointer flex items-center p-3
+                border-b border-solid
+                ${showBorder ? 'border-gray-300' : 'border-transparent'}
+                ${channel.id == selectedChannelId ? 'bg-gray-300 dark:bg-gray-500' : ''}
+                hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors
+            `}
+            onClick={() => handleSelectChannel(channel.id, postParentId)}
+        >
+            <img
+                className="w-10 h-10 rounded-full bg-gray-400"
+                src={channel?.creator?.picture || '/default-avatar.svg'}
+                alt="Avatar"
+                onError={(e) => {
+                    if (e.currentTarget.src.includes('default-avatar.svg')) {
+                        e.currentTarget.src =
+                            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iI0U1RTdFQiIvPgogIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTYiIHI9IjYiIGZpbGw9IiM5Q0EzQUYiLz4KICA8cGF0aCBkPSJNOCAzMmMwLTYuNjI3IDUuMzczLTEyIDEyLTEyczEyIDUuMzczIDEyIDEyIiBmaWxsPSIjOUNBM0FGIi8+Cjwvc3ZnPgo=';
+                    } else {
+                        e.currentTarget.src = '/default-avatar.svg';
+                    }
+                }}
+            />
+
+            <div className="ml-2 flex-grow min-w-10 max-w-96">
+                {threadMessageLoading && (
+                    <div className="animate-pulse">
+                        <div className="h-4 bg-gray-300 rounded mb-2"></div>
+                        <div className="h-3 bg-gray-300 rounded w-3/4 mb-2"></div>
+                        <div className="h-3 bg-gray-300 rounded w-1/2"></div>
+                    </div>
+                )}
+                {!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 data = 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,
+                                            data: data,
+                                        },
+                                    });
+                                },
+                            })
+                        }
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const ServiceInboxItem = React.memo(ServiceInboxItemComponent);
+
+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>
+            <h3 className="text-sm text-gray-600 dark:text-gray-300 font-bold mt-1">{channel?.title}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 truncate w-4/5 mt-1">{lastMessage?.message}</p>
+        </div>
+    );
+};

package/src/components/InboxMessage/SubscriptionHandler.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Shared SubscriptionHandler for Apollo subscribeToMore
+ *
+ * @param subscribeToMore - Apollo subscribeToMore function
+ * @param document - GraphQL subscription document
+ * @param variables - Variables for the subscription
+ * @param updateQuery - Apollo updateQuery function
+ * @param onError - Optional error handler
+ * @param enabled - If false, disables the subscription
+ */
+export function SubscriptionHandler({
+    subscribeToMore,
+    document,
+    variables,
+    updateQuery,
+    onError,
+    enabled = true,
+}: {
+    subscribeToMore: Function;
+    document: any;
+    variables: Record<string, any>;
+    updateQuery: (prev: any, { subscriptionData }: any) => any;
+    onError?: (error: any) => void;
+    enabled?: boolean;
+}) {
+    useEffect(() => {
+        if (!enabled) return;
+
+        console.log('SubscriptionHandler: Setting up subscription with variables:', variables);
+
+        const unsubscribe = subscribeToMore({
+            document,
+            variables,
+            updateQuery,
+            onError,
+        });
+
+        console.log('SubscriptionHandler: Subscription setup successful, unsubscribe function:', unsubscribe);
+
+        return () => {
+            console.log('SubscriptionHandler: Cleaning up subscription');
+            if (unsubscribe && typeof unsubscribe === 'function') {
+                try {
+                    unsubscribe();
+                } catch (error) {
+                    console.error('Error unsubscribing:', error);
+                }
+            }
+        };
+    }, [subscribeToMore, document, variables, updateQuery, onError, enabled]);
+
+    return null;
+}

package/src/components/InboxMessage/UploadImageButton.tsx

@@ -0,0 +1,46 @@
+import React, { ChangeEventHandler, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BiImage } from '@react-icons/all-files/bi/BiImage.js';
+
+export interface IUploadImageButtonProps {
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    children?: React.ReactNode;
+}
+
+export const UploadImageButton = (props: IUploadImageButtonProps) => {
+    const fileInput = useRef<HTMLInputElement>();
+    const { t } = useTranslation('translations');
+
+    const selectFile = useCallback(() => {
+        if (fileInput?.current) {
+            fileInput?.current?.click();
+        }
+    }, [fileInput]);
+
+    return (
+        <div className="relative group">
+            <input
+                multiple={true}
+                accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp"
+                type="file"
+                style={{ display: 'none' }}
+                ref={fileInput}
+                onChange={props.onChange}
+            />
+            {/* Tooltip */}
+            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-20">
+                {t('tailwind_ui_inbox.upload_image')}
+                {/* Tooltip arrow */}
+                <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-900"></div>
+            </div>
+            <button
+                type="button"
+                className="flex items-center justify-center w-8 h-8 bg-transparent hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200 ease-in-out"
+                onClick={selectFile}
+                aria-label={t('tailwind_ui_inbox.upload_image')}
+            >
+                {props.children || <BiImage className="w-5 h-5 text-gray-500 hover:text-gray-700" />}
+            </button>
+        </div>
+    );
+};

package/src/components/InboxMessage/UserModalContent.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { AiOutlineSecurityScan } from '@react-icons/all-files/ai/AiOutlineSecurityScan.js';
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck.js';
+import { BsFillStarFill } from '@react-icons/all-files/bs/BsFillStarFill.js';
+
+export const UserModalContent = ({ username, imageUrl }: any) => {
+    const { t } = useTranslation('translations');
+
+    return (
+        <div>
+            <div>
+                <img
+                    src={imageUrl !== '' ? imageUrl : ''}
+                    alt="User avatar"
+                    className="w-50 h-50 rounded-full bg-gray-400 object-cover"
+                    style={{ width: '200px', height: '200px' }}
+                />
+                <a href="#" className="text-blue-600 hover:text-blue-800 underline">
+                    {t('tailwind_ui_inbox.update_photo')}
+                </a>
+                <AiOutlineSecurityScan className="w-6 h-6 text-black" />
+                <div>
+                    <span className="text-black font-medium">{t('tailwind_ui_inbox.identity_verification')}</span>
+                    <p className="text-black">{t('tailwind_ui_inbox.show_others_you_are_really_you')}</p>
+                    <button className="get-badge-btn text-black bg-transparent border border-gray-300 px-4 py-2 rounded hover:bg-gray-50 transition-colors">
+                        {t('tailwind_ui_inbox.get_the_badge')}
+                    </button>
+                </div>
+                <div>
+                    <span className="text-black font-medium">
+                        {t('tailwind_ui_inbox.username_confirmed', { username: username })}
+                    </span>
+                    <div className="flex items-center gap-2">
+                        <FiCheck className="text-black" />
+                        <p className="text-black">{t('tailwind_ui_inbox.email_address')}</p>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div className="flex flex-col gap-2">
+                    <span className="text-black font-medium">
+                        {t('tailwind_ui_inbox.hi_im_username', { username: username })}
+                    </span>
+                    <p className="text-gray-600">{t('tailwind_ui_inbox.joined_in_date', { date: '2021' })}</p>
+                    <a href="#" className="text-blue-600 hover:text-blue-800 underline">
+                        {t('tailwind_ui_inbox.edit_profile')}
+                    </a>
+                    <div className="flex items-center gap-1">
+                        <BsFillStarFill className="text-black text-base" />
+                        <span className="text-black">{t('tailwind_ui_inbox.reviews')}</span>
+                    </div>
+                </div>
+                <a href="" className="text-blue-600 hover:text-blue-800 underline">
+                    {t('tailwind_ui_inbox.reviews_by_you')}
+                </a>
+            </div>
+        </div>
+    );
+};

package/src/components/InboxMessage/index.ts

@@ -0,0 +1,16 @@
+export * from './CommonMessage';
+export * from './ConversationItem';
+export * from './ServiceConversationItem';
+export * from './LeftSidebar';
+export * from './MessageInput';
+export * from './Messages';
+export * from './Popover';
+export * from './UploadImageButton';
+export * from './UserModalContent';
+export * from './message-widgets';
+export * from './RightSidebar';
+export * from './ServiceInboxItem';
+export * from './MessageInputComponent';
+export * from './InputComponent';
+export * from './MessagesBuilderUi';
+export * from './RightSidebarAi';

package/src/components/InboxMessage/message-widgets/CommonMessage.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { formatDistance } from 'date-fns';
+import { BsFlag } from '@react-icons/all-files/bs/BsFlag.js';
+import { IPost, IAuthUser } from 'common';
+// import { IAuthUser } from '@pubngo-stack/core';
+import { FilesList } from '../../inbox';
+
+interface ICommonMessageProps {
+    message: IPost;
+    index: number;
+    onOpen: () => void;
+    currentUser: IAuthUser;
+}
+
+export const CommonMessage = (props: ICommonMessageProps) => {
+    const { message, index, onOpen, currentUser } = props;
+
+    // Determine if this is an AI/system message for special styling
+    const isSystemMessage =
+        message?.author?.username?.toLowerCase().includes('ai') ||
+        message?.author?.username?.toLowerCase().includes('assistant') ||
+        message?.author?.username?.toLowerCase().includes('system');
+
+    return (
+        <div className="w-full flex justify-start mb-7" key={`msgList_${index}`}>
+            <div className="flex-grow flex">
+                {/* User avatar - Only show for non-system messages */}
+                {!isSystemMessage && (
+                    <img
+                        className="w-8 h-8 bg-gray-400 rounded-full mr-4 cursor-pointer"
+                        src={message?.author?.picture}
+                        alt={message?.author?.username || 'User avatar'}
+                        onClick={onOpen}
+                    />
+                )}
+                <div className="flex-grow">
+                    {/* Author header - Only show for non-system messages */}
+                    {!isSystemMessage && (
+                        <div className="flex flex-grow mt-1.5">
+                            <p className="text-sm text-gray-600 font-bold">
+                                {message?.author?.familyName && message?.author?.givenName
+                                    ? message?.author?.givenName + ' ' + message?.author?.familyName
+                                    : message?.author?.username}
+                            </p>
+                            <p className="text-sm text-gray-500 ml-2.5">
+                                {formatDistance(new Date(message?.createdAt), new Date(), {
+                                    includeSeconds: true,
+                                    addSuffix: true,
+                                })}
+                            </p>
+                        </div>
+                    )}
+                    {/* <p className="text-sm mt-1.5 whitespace-pre-line">{message?.message}</p> */}
+                    <div
+                        className="text-sm mt-1.5 whitespace-pre-wrap prose prose-sm max-w-none"
+                        dangerouslySetInnerHTML={{ __html: message?.message || '' }}
+                    />
+                    {message.files?.totalCount ? <FilesList uploaded files={message.files?.data} /> : null}
+                </div>
+            </div>
+            {/* Flag button - Only show for non-system messages */}
+            {!isSystemMessage && currentUser?.id !== message?.author?.id && (
+                <div className="ml-2">
+                    <BsFlag className="text-gray-600 w-6 h-6" />
+                </div>
+            )}
+        </div>
+    );
+};