@messenger-box/tailwind-ui-inbox 10.0.3-alpha.67 → 10.0.3-alpha.70

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/message-widgets/SlackLikeMessageGroup.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { format, formatDistanceToNow, differenceInMinutes } from 'date-fns';
+import { IAuthUser, IPost } from 'common';
+import { FilesList } from '../../inbox';
+
+interface SlackLikeMessageGroupProps {
+    messages: IPost[];
+    currentUser: IAuthUser;
+    onOpen: (element?: any) => void;
+    onMessageClick: (msg: IPost) => void;
+}
+
+interface MessageGroupProps {
+    author: any;
+    messages: IPost[];
+    currentUser: IAuthUser;
+    onOpen: (element?: any) => void;
+    onMessageClick: (msg: IPost) => void;
+}
+
+// Utility function to group messages by user and time
+export const groupMessagesByUserAndTime = (messages: IPost[], timeThresholdMinutes = 5): IPost[][] => {
+    if (!messages || messages.length === 0) return [];
+
+    const groups: IPost[][] = [];
+    let currentGroup: IPost[] = [];
+    let lastMessage: IPost | null = null;
+
+    for (const message of messages) {
+        if (typeof message === 'string') continue; // Skip date separators
+
+        const shouldStartNewGroup =
+            !lastMessage ||
+            lastMessage.author?.id !== message.author?.id ||
+            differenceInMinutes(new Date(message.createdAt), new Date(lastMessage.createdAt)) > timeThresholdMinutes;
+
+        if (shouldStartNewGroup) {
+            if (currentGroup.length > 0) {
+                groups.push(currentGroup);
+            }
+            currentGroup = [message];
+        } else {
+            currentGroup.push(message);
+        }
+
+        lastMessage = message;
+    }
+
+    if (currentGroup.length > 0) {
+        groups.push(currentGroup);
+    }
+
+    return groups;
+};
+
+const MessageGroup: React.FC<MessageGroupProps> = ({ author, messages, currentUser, onOpen, onMessageClick }) => {
+    const isOwnMessage = author?.id === currentUser?.id;
+    const authorName =
+        author?.givenName && author?.familyName
+            ? `${author.givenName} ${author.familyName}`
+            : author?.username || 'Unknown User';
+
+    const firstMessage = messages[0];
+    const formatTime = (timestamp: string) => {
+        const date = new Date(timestamp);
+        return format(date, 'h:mm a');
+    };
+
+    return (
+        <div className="mb-1 group hover:bg-white hover:bg-opacity-60 -mx-4 px-4 py-1 rounded transition-colors">
+            <div className="flex items-start space-x-2">
+                {/* Avatar - show for all messages */}
+                <div className="flex-shrink-0 mt-0.5">
+                    <img
+                        className="w-9 h-9 rounded-lg cursor-pointer hover:opacity-80 transition-opacity"
+                        src={author?.picture || '/default-avatar.svg'}
+                        alt={authorName}
+                        onClick={() => onOpen(firstMessage)}
+                        onError={(e) => {
+                            e.currentTarget.src = '/default-avatar.svg';
+                        }}
+                    />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                    {/* Author name and timestamp - show for all messages */}
+                    <div className="flex items-center space-x-2 mb-1">
+                        <span className="text-sm font-bold text-gray-900">{authorName}</span>
+                        <span className="text-xs text-gray-500">{formatTime(firstMessage.createdAt)}</span>
+                        {isOwnMessage && <span className="text-xs text-gray-400 italic">(you)</span>}
+                    </div>
+
+                    {/* Messages in the group - single line for each message */}
+                    <div className="space-y-1">
+                        {messages.map((message, index) => (
+                            <MessageBubble
+                                key={message.id}
+                                message={message}
+                                isOwnMessage={isOwnMessage}
+                                isFirstInGroup={index === 0}
+                                isLastInGroup={index === messages.length - 1}
+                                showTimestamp={isOwnMessage && index === 0}
+                                onMessageClick={onMessageClick}
+                                totalInGroup={messages.length}
+                                authorName={authorName}
+                                formatTime={formatTime}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+interface MessageBubbleProps {
+    message: IPost;
+    isOwnMessage: boolean;
+    isFirstInGroup: boolean;
+    isLastInGroup: boolean;
+    showTimestamp: boolean;
+    onMessageClick: (msg: IPost) => void;
+    totalInGroup: number;
+    authorName: string;
+    formatTime: (timestamp: string) => string;
+}
+
+const MessageBubble: React.FC<MessageBubbleProps> = ({
+    message,
+    isOwnMessage,
+    isFirstInGroup,
+    isLastInGroup,
+    showTimestamp,
+    onMessageClick,
+    totalInGroup,
+    authorName,
+    formatTime,
+}) => {
+    const handleClick = () => {
+        onMessageClick?.(message);
+    };
+
+    // All messages use the same format (Slack style - left aligned)
+    return (
+        <div className="py-0.5 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 -mx-1 group">
+            <div className="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-1  rounded" onClick={handleClick}>
+                {/* Show timestamp on hover */}
+                <span className="text-xs text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity float-right ml-2">
+                    {formatTime(message.createdAt)}
+                </span>
+
+                {message.message && (
+                    <span className="whitespace-pre-wrap break-words leading-relaxed">{message.message}</span>
+                )}
+
+                {message.files?.totalCount > 0 && (
+                    <div className="mt-1 clear-both">
+                        <FilesList uploaded files={message.files.data} />
+                    </div>
+                )}
+                <div className={`${navigator.userAgent.includes('Firefox') ? 'mt-1' : ''} clear-both`}></div>
+
+                {/* Show delivery status for own messages */}
+                {/* {isOwnMessage && message.isDelivered !== undefined && (
+                    <div className="text-xs text-gray-400 mt-1 clear-both">
+                        {message.isDelivered 
+                            ? message.isRead 
+                                ? '✓✓ Read' 
+                                : '✓✓ Delivered'
+                            : '✓ Sent'
+                        }
+                    </div>
+                )} */}
+            </div>
+        </div>
+    );
+};
+
+export const SlackLikeMessageGroup: React.FC<SlackLikeMessageGroupProps> = ({
+    messages,
+    currentUser,
+    onOpen,
+    onMessageClick,
+}) => {
+    // Filter out non-message items (like date strings)
+    const actualMessages = messages.filter((msg) => typeof msg !== 'string') as IPost[];
+
+    // Group messages by user and time
+    const messageGroups = groupMessagesByUserAndTime(actualMessages);
+
+    return (
+        <div className="space-y-2">
+            {messageGroups.map((group, groupIndex) => {
+                const author = group[0]?.author;
+                return (
+                    <MessageGroup
+                        key={`group-${groupIndex}-${group[0]?.id}`}
+                        author={author}
+                        messages={group}
+                        currentUser={currentUser}
+                        onOpen={onOpen}
+                        onMessageClick={onMessageClick}
+                    />
+                );
+            })}
+        </div>
+    );
+};

package/src/components/InboxMessage/message-widgets/index.ts

@@ -1 +1,2 @@
 export { MessageSliceRenderer } from './MessageSliceRenderer';
+export { SlackLikeMessageGroup } from './SlackLikeMessageGroup';

package/src/container/Inbox.tsx

@@ -18,6 +18,7 @@ import { objectId } from '@messenger-box/core';
 import { ThreadsInbox } from './ThreadsInbox';
 import { ThreadMessagesInbox } from './ThreadMessagesInbox';
 import { useApolloClient } from '@apollo/client';
+import { SubscriptionHandler } from '../components/InboxMessage/SubscriptionHandler';
 
 const { MESSAGES_PER_PAGE } = config;
 
@@ -151,11 +152,16 @@ const Inbox = (props: InboxProps) => {
         return uniqBy([...(userChannels?.supportServiceChannels ?? []), ...(userChannels?.channelsByUser ?? [])], 'id');
     }, [userChannels]);
 
+    // Memoize stable channel array to prevent unnecessary re-renders
+    const stableChannels = useMemo(() => {
+        return channels || [];
+    }, [channels]);
+
     // Memoized values derived from Apollo cache data
     const channelFilters = useMemo(() => {
         const filters = { ...channelFilterProp };
         const channelType = filters?.type ?? RoomType.Direct;
-        filters.type = supportServices ? [channelType, RoomType.Service] : RoomType.Direct;
+        filters.type = supportServices ? [channelType, RoomType.Service] : channelType;
         return filters;
     }, [channelFilterProp, supportServices]);
 
@@ -168,10 +174,11 @@ const Inbox = (props: InboxProps) => {
         );
     }, [channels]);
 
-    const currentUser = useMemo(
-        () => users?.find((user) => user && user.alias?.includes(auth?.authUserId)),
-        [users, auth?.authUserId],
-    );
+    // const currentUser = useMemo(
+    //     () => users?.find((user) => user && user.alias?.includes(auth?.authUserId)),
+    //     [users, auth?.authUserId],
+    // );
+    const currentUser = auth;
 
     const channelName = useMemo(() => {
         if (!channels || !pathChannelId) return '';
@@ -226,8 +233,8 @@ const Inbox = (props: InboxProps) => {
             const basePath = pathPrefix ? `${pathPrefix}${mainPath}` : mainPath;
 
             const searchParams = new URLSearchParams();
-            if (channelRole) searchParams.set('channelRole', channelRole);
-            if (orgName) searchParams.set('orgName', orgName);
+            // if (channelRole) searchParams.set('channelRole', channelRole);
+            // if (orgName) searchParams.set('orgName', orgName);
 
             const newPath = searchParams.toString() ? `${basePath}?${searchParams.toString()}` : basePath;
             navigate(newPath, { replace: true });
@@ -282,7 +289,7 @@ const Inbox = (props: InboxProps) => {
             >
                 <LeftSidebar
                     currentUser={currentUser}
-                    userChannels={channels || []}
+                    userChannels={stableChannels}
                     userChannelsLoading={userChannelsLoading}
                     users={users}
                     handleSelectChannel={handleSelectChannel}
@@ -290,6 +297,7 @@ const Inbox = (props: InboxProps) => {
                     channelToTop={0}
                     getChannelsRefetch={getChannelsRefetch}
                     role={channelRole}
+                    messagesQuery={data?.[1]}
                 />
             </div>
 
@@ -321,13 +329,13 @@ const Inbox = (props: InboxProps) => {
 
             {/* Right Sidebar - Desktop Only */}
             {pathChannelId && data?.[1] && !isMobileView && (
-                <div className="w-80 xl:w-96 border-l border-gray-200 bg-white flex-shrink-0">
-                    <RightSidebarWrapper
-                        MessagesLoaderQuery={data?.[1]}
-                        selectedPost={null}
-                        detailSidebarOptions={detailSidebarOptions}
-                    />
-                </div>
+                // <div className="w-80 xl:w-96 border-l border-gray-200 bg-white flex-shrink-0">
+                <RightSidebarWrapper
+                    MessagesLoaderQuery={data?.[1]}
+                    selectedPost={null}
+                    detailSidebarOptions={detailSidebarOptions}
+                />
+                // </div>
             )}
         </div>
     );
@@ -492,14 +500,14 @@ const RightSidebarWrapper = React.memo(({ MessagesLoaderQuery, selectedPost, det
     if (!sortedMessages.length) return null;
 
     return (
-        <div className="w-80 xl:w-96 border-l border-gray-200 bg-white flex-shrink-0">
-            <RightSidebar
-                channelMessages={sortedMessages}
-                visibility="visible"
-                selectedPost={selectedPost}
-                {...detailSidebarOptions}
-            />
-        </div>
+        // <div className="w-80 xl:w-96 border-l border-gray-200 bg-white flex-shrink-0">
+        <RightSidebar
+            channelMessages={sortedMessages}
+            visibility="visible"
+            selectedPost={selectedPost}
+            {...detailSidebarOptions}
+        />
+        // </div>
     );
 });
 
@@ -509,6 +517,9 @@ const MessagesComponent = React.memo((props: any) => {
     const messageRootListRef = useRef(null);
     const messageListRef = useRef(null);
     const apolloClient = useApolloClient();
+    const [isLoadingOlder, setIsLoadingOlder] = React.useState(false);
+    const isLoadingOlderRef = useRef(false);
+    const scrollTimeoutRef = useRef(null);
 
     const auth = useSelector(userSelector);
     const { startUpload } = useUploadFiles();
@@ -525,21 +536,28 @@ const MessagesComponent = React.memo((props: any) => {
     const totalCount = data?.messages?.totalCount || 0;
 
     const scrollToBottom = useCallback(() => {
-        if (messageListRef?.current && messageRootListRef?.current) {
+        if (messageRootListRef?.current) {
             messageRootListRef.current.scrollTop = messageRootListRef.current.scrollHeight;
         }
     }, []);
 
-    // Auto-scroll on new messages
+    // Auto-scroll on new messages (but not when loading older messages)
     useEffect(() => {
-        const timer = setTimeout(() => scrollToBottom(), 100);
-        return () => clearTimeout(timer);
+        if (!isLoadingOlderRef.current) {
+            const timer = setTimeout(() => scrollToBottom(), 100);
+            return () => clearTimeout(timer);
+        }
     }, [messages.length, scrollToBottom]);
 
     const onFetchOld = useCallback(
         async (skip: number) => {
-            if (channelId && fetchMoreMessages) {
+            if (channelId && fetchMoreMessages && !isLoadingOlder) {
                 try {
+                    setIsLoadingOlder(true);
+                    isLoadingOlderRef.current = true;
+                    // Capture current scroll height before fetching
+                    const oldScrollHeight = messageRootListRef?.current?.scrollHeight || 0;
+
                     await fetchMoreMessages({
                         variables: {
                             channelId: channelId.toString(),
@@ -562,28 +580,119 @@ const MessagesComponent = React.memo((props: any) => {
                         },
                     });
 
-                    if (messageRootListRef?.current) {
-                        messageRootListRef.current.scrollTop += messageRootListRef.current.clientHeight;
-                    }
+                    // Maintain scroll position after loading older messages
+                    setTimeout(() => {
+                        if (messageRootListRef?.current) {
+                            const newScrollHeight = messageRootListRef.current.scrollHeight;
+                            const scrollDiff = newScrollHeight - oldScrollHeight;
+                            // For normal flex layout, maintain position by adjusting scroll offset
+                            messageRootListRef.current.scrollTop = scrollDiff;
+                        }
+                        // Reset the loading flag after position is maintained
+                        setTimeout(() => {
+                            isLoadingOlderRef.current = false;
+                        }, 50);
+                    }, 100);
                 } catch (error) {
                     console.error('Error fetching older messages:', error);
+                    isLoadingOlderRef.current = false;
+                } finally {
+                    setIsLoadingOlder(false);
                 }
             }
         },
-        [channelId, fetchMoreMessages],
+        [channelId, fetchMoreMessages, isLoadingOlder],
     );
 
+    // Scroll to bottom when channel changes
+    useEffect(() => {
+        if (channelId && messages.length > 0) {
+            isLoadingOlderRef.current = false; // Reset flag on channel change
+            const timer = setTimeout(() => scrollToBottom(), 200);
+            return () => clearTimeout(timer);
+        }
+    }, [channelId, scrollToBottom]);
+
+    // Alternative scroll detection for Firefox
+    useEffect(() => {
+        const element = messageRootListRef.current;
+        if (!element) return;
+
+        // Firefox-specific scroll detection using passive listeners
+        const handleScrollEnd = () => {
+            if (!isLoadingOlder && element) {
+                const { scrollTop } = element;
+                const isAtTop = Math.round(scrollTop) <= 30;
+                const hasMoreMessages = totalCount > messages.length;
+
+                if (isAtTop && hasMoreMessages) {
+                    console.log('ScrollEnd triggered load more (Firefox):', {
+                        scrollTop: Math.round(scrollTop),
+                        totalCount,
+                        messagesLength: messages.length,
+                    });
+                    onFetchOld(messages.length);
+                }
+            }
+        };
+
+        // Use scrollend event if available (modern Firefox/Chrome)
+        if ('onscrollend' in element) {
+            element.addEventListener('scrollend', handleScrollEnd, { passive: true });
+            return () => {
+                element.removeEventListener('scrollend', handleScrollEnd);
+            };
+        }
+    }, [totalCount, messages.length, onFetchOld, isLoadingOlder]);
+
+    // Cleanup scroll timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
+        };
+    }, []);
+
     const onMessagesScroll = useCallback(
         async (e: any) => {
-            if (messageRootListRef.current) {
-                const { clientHeight, scrollHeight, scrollTop } = messageRootListRef.current;
+            // Throttle scroll events for better performance, especially in Firefox
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
 
-                if (clientHeight - scrollTop === scrollHeight && totalCount > messages.length) {
-                    await onFetchOld(messages.length);
+            scrollTimeoutRef.current = setTimeout(async () => {
+                if (messageRootListRef.current && !isLoadingOlder) {
+                    const element = messageRootListRef.current;
+                    const { clientHeight, scrollHeight, scrollTop } = element;
+
+                    // Firefox-compatible scroll detection
+                    // Use Math.ceil to handle Firefox's fractional scrollTop values
+                    const isAtTop = Math.ceil(scrollTop) <= 25;
+                    const hasMoreMessages = totalCount > messages.length;
+
+                    // Additional Firefox-specific check
+                    const isFirefox = navigator.userAgent.includes('Firefox');
+                    const firefoxAdjustedTop = isFirefox ? Math.round(scrollTop) <= 30 : isAtTop;
+
+                    if ((isAtTop || firefoxAdjustedTop) && hasMoreMessages) {
+                        console.log('Triggering load more:', {
+                            scrollTop: Math.ceil(scrollTop),
+                            originalScrollTop: scrollTop,
+                            totalCount,
+                            messagesLength: messages.length,
+                            scrollHeight,
+                            clientHeight,
+                            browser: isFirefox ? 'Firefox' : 'Other',
+                            isAtTop,
+                            firefoxAdjustedTop,
+                        });
+                        await onFetchOld(messages.length);
+                    }
                 }
-            }
+            }, 100);
         },
-        [totalCount, messages.length, onFetchOld],
+        [totalCount, messages.length, onFetchOld, isLoadingOlder],
     );
 
     // Optimistic message sending with Apollo cache updates
@@ -760,37 +869,56 @@ const MessagesComponent = React.memo((props: any) => {
         <>
             <div
                 ref={messageRootListRef}
-                className="flex flex-col-reverse flex-grow flex-shrink overflow-y-auto p-4 px-[10px] md:px-[50px] lg:px-[80px]"
+                className="flex flex-col flex-grow flex-shrink overflow-y-auto p-4 px-4 md:px-8 lg:px-12 bg-gray-50"
                 onScroll={onMessagesScroll}
             >
                 {messages.length > 0 ? (
-                    <Messages
-                        innerRef={messageListRef}
-                        channelId={channelId}
-                        currentUser={auth}
-                        channelMessages={messages}
-                        totalCount={totalCount}
-                        onMessageClick={onMessageClick}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore?.({
-                                document: CHAT_MESSAGE_ADDED,
-                                variables: { channelId: channelId.toString() },
-                                updateQuery: (prev: any, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-                                    const newMessage = subscriptionData.data.chatMessageAdded;
-
-                                    return {
-                                        ...prev,
-                                        messages: {
-                                            ...prev?.messages,
-                                            data: uniqBy([...(prev?.messages?.data || []), newMessage], 'id'),
-                                            totalCount: (prev?.messages?.totalCount || 0) + 1,
-                                        },
-                                    };
-                                },
-                            })
-                        }
-                    />
+                    <>
+                        {/* Loading indicator for older messages at the top */}
+                        {isLoadingOlder && (
+                            <div className="flex justify-center py-4">
+                                <div className="flex items-center space-x-2 text-gray-500">
+                                    <Spinner className="w-4 h-4" />
+                                    <span className="text-sm">Loading older messages...</span>
+                                </div>
+                            </div>
+                        )}
+                        <Messages
+                            innerRef={messageListRef}
+                            channelId={channelId}
+                            currentUser={auth}
+                            channelMessages={messages}
+                            totalCount={totalCount}
+                            onMessageClick={onMessageClick}
+                        />
+                        <SubscriptionHandler
+                            subscribeToMore={subscribeToMore}
+                            document={CHAT_MESSAGE_ADDED}
+                            variables={{ channelId: channelId.toString() }}
+                            enabled={!!channelId && !!subscribeToMore}
+                            updateQuery={(prev: any, { subscriptionData }: any) => {
+                                console.log('Subscription updateQuery called:', { prev, subscriptionData });
+                                if (!subscriptionData.data) {
+                                    console.log('No subscription data, returning prev');
+                                    return prev;
+                                }
+                                const newMessage = subscriptionData.data.chatMessageAdded;
+                                console.log('New message received via subscription:', newMessage);
+
+                                return {
+                                    ...prev,
+                                    messages: {
+                                        ...prev?.messages,
+                                        data: uniqBy([...(prev?.messages?.data || []), newMessage], 'id'),
+                                        totalCount: (prev?.messages?.totalCount || 0) + 1,
+                                    },
+                                };
+                            }}
+                            onError={(error) => {
+                                console.error('Subscription error:', error);
+                            }}
+                        />
+                    </>
                 ) : (
                     <div className="flex-1 flex items-center justify-center text-gray-500">
                         <div className="text-center">