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

package/src/container/Inbox.tsx

@@ -63,6 +63,32 @@ const useMediaQuery = (query: string) => {
     return matches;
 };
 
+// Hook to get window dimensions
+const useWindowDimensions = () => {
+    const [windowDimensions, setWindowDimensions] = React.useState({
+        width: typeof window !== 'undefined' ? window.innerWidth : 1024,
+        height: typeof window !== 'undefined' ? window.innerHeight : 768,
+    });
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const handleResize = () => {
+            setWindowDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Set initial dimensions
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return windowDimensions;
+};
+
 // Static components
 const Spinner = React.memo(({ className = '' }: { className?: string }) => (
     <div className={`animate-spin rounded-full border-4 border-gray-200 border-t-blue-500 ${className}`}>
@@ -76,10 +102,13 @@ const Drawer = React.memo(({ isOpen, onClose, children, title }: DrawerProps) =>
     return (
         <div className="fixed inset-0 z-50 overflow-hidden">
             <div className="absolute inset-0 bg-black bg-opacity-50" onClick={onClose} />
-            <div className="absolute bottom-0 left-0 right-0 bg-white rounded-t-lg shadow-lg max-h-[80vh] overflow-hidden">
-                <div className="flex items-center justify-between p-4 border-b border-gray-200">
-                    <h2 className="text-lg font-semibold">{title}</h2>
-                    <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-full transition-colors">
+            <div className="absolute bottom-0 left-0 right-0 bg-white rounded-t-lg shadow-lg max-h-[80vh] flex flex-col overflow-hidden">
+                <div className="flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0">
+                    <h2 className="text-lg font-semibold truncate">{title}</h2>
+                    <button
+                        onClick={onClose}
+                        className="p-1 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0 ml-2"
+                    >
                         <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path
                                 strokeLinecap="round"
@@ -90,15 +119,17 @@ const Drawer = React.memo(({ isOpen, onClose, children, title }: DrawerProps) =>
                         </svg>
                     </button>
                 </div>
-                <div className="p-4 overflow-y-auto">{children}</div>
+                <div className="flex-1 p-4 overflow-y-auto" style={{ minHeight: 0 }}>
+                    {children}
+                </div>
             </div>
         </div>
     );
 });
 
 const EmptyState = React.memo(() => (
-    <div className="h-full flex items-center justify-center bg-gray-100 p-4 sm:p-6">
-        <div className="text-center max-w-sm">
+    <div className="h-full flex items-center justify-center bg-gray-100 p-4 sm:p-6 overflow-hidden">
+        <div className="text-center max-w-sm mx-auto">
             <div className="text-3xl sm:text-4xl text-gray-400 mb-4">💬</div>
             <h3 className="text-lg sm:text-xl font-semibold text-gray-600 mb-2">Welcome to Messenger</h3>
             <p className="text-sm sm:text-base text-gray-500 leading-relaxed">
@@ -133,8 +164,14 @@ const Inbox = (props: InboxProps) => {
         mobilePreviewCTAText: false,
     });
 
-    // Hooks
-    const isMobileView = useMediaQuery('(max-width: 767px)');
+    // Hooks - improved responsive breakpoints with better granularity
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const isMobileView = useMediaQuery('(max-width: 640px)');
+    const isSmallTabletView = useMediaQuery('(min-width: 641px) and (max-width: 900px)');
+    const isTabletView = useMediaQuery('(min-width: 901px) and (max-width: 1024px)');
+    const isDesktopView = useMediaQuery('(min-width: 1025px)');
+    const isLargeDesktopView = useMediaQuery('(min-width: 1440px)');
+    const isSmallScreen = useMediaQuery('(max-width: 900px)');
     const auth = useSelector(userSelector);
 
     // Data destructuring from Apollo queries
@@ -198,6 +235,13 @@ const Inbox = (props: InboxProps) => {
             return title || 'Direct Message';
         }
 
+        if (members.length === 1 && members[0].user.id === currentUser?.id) {
+            if (members[0].user?.givenName && members[0].user?.familyName) {
+                return `${members[0].user?.givenName} ${members[0].user?.familyName}`;
+            }
+            return members[0].user?.givenName || members[0].user?.familyName || 'Direct Message';
+        }
+
         return title || 'Channel';
     }, [channels, pathChannelId, currentUser]);
 
@@ -268,6 +312,11 @@ const Inbox = (props: InboxProps) => {
     const detailSidebarOptions = useMemo(
         () => ({
             isMobileView,
+            isSmallTabletView,
+            isTabletView,
+            isDesktopView,
+            isLargeDesktopView,
+            isSmallScreen,
             setMobilePreviewCTAText: (v: string | ReactNode) =>
                 localDispatch({ payload: { mobilePreviewCTAText: v }, type: 'update' }),
             setMobilePreviewText: (v: string | ReactNode) =>
@@ -275,17 +324,39 @@ const Inbox = (props: InboxProps) => {
             setMobilePreviewVisibility: (v: boolean) =>
                 localDispatch({ payload: { mobilePreviewVisibility: v }, type: 'update' }),
         }),
-        [isMobileView],
+        [isMobileView, isSmallTabletView, isTabletView, isDesktopView, isLargeDesktopView, isSmallScreen],
     );
 
     return (
-        <div className="h-[100vh] border-t border-gray-300 flex overflow-hidden" style={{ height: '100vh ' }}>
+        <div
+            className="border-t border-gray-300 flex overflow-hidden"
+            style={{
+                height: `${windowHeight}px`,
+                maxHeight: '100vh',
+            }}
+        >
             {/* Left Sidebar - Responsive Design */}
             <div
                 className={`
                 flex-shrink-0 bg-gray-50 border-r border-gray-300 overflow-hidden transition-all duration-300 ease-in-out
-                ${isMobileView && pathChannelId ? 'hidden' : 'w-80 lg:w-96 xl:w-[420px]'}
+                ${isMobileView && pathChannelId ? 'hidden' : ''}
             `}
+                style={{
+                    width:
+                        isMobileView && !pathChannelId
+                            ? '100%'
+                            : isMobileView && pathChannelId
+                            ? '0px'
+                            : isSmallTabletView
+                            ? `${Math.min(288, windowWidth * 0.35)}px` // w-72 or 35% of window
+                            : isTabletView
+                            ? `${Math.min(320, windowWidth * 0.3)}px` // w-80 or 30% of window
+                            : isLargeDesktopView
+                            ? `${Math.min(384, windowWidth * 0.25)}px` // w-96 or 25% of window
+                            : `${Math.min(320, windowWidth * 0.28)}px`, // w-80 or 28% of window
+                    height: `${windowHeight}px`,
+                    maxHeight: '100vh',
+                }}
             >
                 <LeftSidebar
                     currentUser={currentUser}
@@ -298,15 +369,23 @@ const Inbox = (props: InboxProps) => {
                     getChannelsRefetch={getChannelsRefetch}
                     role={channelRole}
                     messagesQuery={data?.[1]}
+                    windowHeight={windowHeight}
+                    windowWidth={windowWidth}
                 />
             </div>
 
             {/* Main Content Area - Responsive */}
             <div
                 className={`
-                flex-1 min-w-0 overflow-hidden transition-all duration-300 ease-in-out
-                ${isMobileView && !pathChannelId ? 'hidden' : 'block'}
+                flex-1 min-w-0 flex flex-col overflow-hidden transition-all duration-300 ease-in-out
+                ${isMobileView && !pathChannelId ? 'hidden' : 'flex'}
             `}
+                style={{
+                    minWidth: isSmallScreen ? '300px' : isDesktopView ? '500px' : '400px',
+                    width: 'auto',
+                    height: `${windowHeight}px`,
+                    maxHeight: '100vh',
+                }}
             >
                 {pathChannelId ? (
                     <ContentComponent
@@ -315,6 +394,13 @@ const Inbox = (props: InboxProps) => {
                         channelRole={channelRole}
                         pathPrefix={props.pathPrefix}
                         isMobileView={isMobileView}
+                        isSmallTabletView={isSmallTabletView}
+                        isTabletView={isTabletView}
+                        isDesktopView={isDesktopView}
+                        isLargeDesktopView={isLargeDesktopView}
+                        isSmallScreen={isSmallScreen}
+                        windowWidth={windowWidth}
+                        windowHeight={windowHeight}
                         mobilePreviewState={mobilePreviewState}
                         detailSidebarOptions={detailSidebarOptions}
                         isBottomDrawerOpen={isBottomDrawerOpen}
@@ -328,8 +414,17 @@ const Inbox = (props: InboxProps) => {
             </div>
 
             {/* 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">
+            {pathChannelId && data?.[1] && isDesktopView && (
+                // <div
+                //     className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
+                //     style={{
+                //         width: isLargeDesktopView
+                //             ? `${Math.min(384, windowWidth * 0.25)}px` // w-96 or 25% of window
+                //             : `${Math.min(320, windowWidth * 0.22)}px`, // w-80 or 22% of window
+                //         height: `${windowHeight}px`,
+                //         maxHeight: '100vh'
+                //     }}
+                // >
                 <RightSidebarWrapper
                     MessagesLoaderQuery={data?.[1]}
                     selectedPost={null}
@@ -348,6 +443,13 @@ const ContentComponent = React.memo((props: any) => {
         pathPrefix,
         postId,
         isMobileView,
+        isSmallTabletView,
+        isTabletView,
+        isDesktopView,
+        isLargeDesktopView,
+        isSmallScreen,
+        windowWidth,
+        windowHeight,
         mobilePreviewState,
         detailSidebarOptions,
         isBottomDrawerOpen,
@@ -371,18 +473,22 @@ const ContentComponent = React.memo((props: any) => {
     }, [channelData]);
 
     return (
-        <div className="flex h-full">
+        <div className="flex overflow-hidden" style={{ height: `${windowHeight}px`, maxHeight: '100vh' }}>
             {/* Main Chat Content */}
-            <div className="flex-1 flex flex-col">
+            <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
                 {/* Channel Header */}
                 {channelId && (
-                    <div className="px-4 sm:px-6 py-4 border-b border-gray-200 bg-white flex-shrink-0">
+                    <div
+                        className={`border-b border-gray-200 bg-white flex-shrink-0 z-10 ${
+                            isSmallScreen ? 'px-3 py-3' : 'px-4 sm:px-6 py-4'
+                        }`}
+                    >
                         <div className="flex items-center justify-between">
-                            <div className="flex items-center space-x-3">
-                                {/* Mobile Back Button */}
-                                {isMobileView && (
+                            <div className="flex items-center space-x-2 min-w-0 flex-1">
+                                {/* Mobile/Small Screen Back Button */}
+                                {(isMobileView || isSmallTabletView) && (
                                     <button
-                                        className="p-2 hover:bg-gray-100 rounded-full transition-colors lg:hidden"
+                                        className="p-2 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0"
                                         onClick={() => window.history.back()}
                                         aria-label="Go back"
                                     >
@@ -401,11 +507,17 @@ const ContentComponent = React.memo((props: any) => {
                                         </svg>
                                     </button>
                                 )}
-                                <h2 className="text-lg font-semibold text-gray-800 truncate">{channelName}</h2>
+                                <h2
+                                    className={`font-semibold text-gray-800 truncate ${
+                                        isSmallScreen ? 'text-base' : 'text-lg'
+                                    }`}
+                                >
+                                    {channelName}
+                                </h2>
                             </div>
-                            {isMobileView && mobilePreviewState?.mobilePreviewVisibility && (
+                            {(isMobileView || isSmallTabletView) && mobilePreviewState?.mobilePreviewVisibility && (
                                 <button
-                                    className="text-sm px-3 py-1 bg-teal-500 hover:bg-teal-600 text-white rounded-md transition-colors"
+                                    className="text-sm px-3 py-1 bg-teal-500 hover:bg-teal-600 text-white rounded-md transition-colors flex-shrink-0"
                                     onClick={() => setBottomDrawer(true)}
                                 >
                                     {mobilePreviewState?.mobilePreviewCTAText}
@@ -416,13 +528,13 @@ const ContentComponent = React.memo((props: any) => {
                 )}
 
                 {/* Mobile Preview */}
-                {isMobileView && channelId && mobilePreviewState?.mobilePreviewVisibility && (
-                    <div className="mx-4 mt-4">
+                {(isMobileView || isSmallTabletView) && channelId && mobilePreviewState?.mobilePreviewVisibility && (
+                    <div className={`mt-4 ${isSmallScreen ? 'mx-3' : 'mx-4'}`}>
                         <div className="mb-2">
-                            <div className="w-full flex justify-between mb-[5px]">
-                                <span>{mobilePreviewState?.mobilePreviewText}</span>
+                            <div className="w-full flex justify-between items-center gap-2 mb-[5px]">
+                                <span className="truncate flex-1 text-sm">{mobilePreviewState?.mobilePreviewText}</span>
                                 <button
-                                    className="text-base px-4 py-2 bg-teal-500 hover:bg-teal-600 text-white rounded-md transition-colors"
+                                    className="text-sm px-3 py-2 bg-teal-500 hover:bg-teal-600 text-white rounded-md transition-colors flex-shrink-0"
                                     onClick={() => setBottomDrawer(true)}
                                 >
                                     {mobilePreviewState?.mobilePreviewCTAText}
@@ -434,45 +546,51 @@ const ContentComponent = React.memo((props: any) => {
                 )}
 
                 {/* Content based on postId */}
-                {channelId && (
-                    <>
-                        {postId ? (
-                            postId === '1' ? (
-                                <ThreadsInbox
-                                    channelId={channelId}
-                                    role={channelRole}
-                                    pathPrefix={pathPrefix}
-                                    setChannelId={() => {}}
-                                    setPostId={() => {}}
-                                    setGoBack={() => {}}
-                                />
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                    {channelId && (
+                        <>
+                            {postId ? (
+                                postId === '1' ? (
+                                    <ThreadsInbox
+                                        channelId={channelId}
+                                        role={channelRole}
+                                        pathPrefix={pathPrefix}
+                                        setChannelId={() => {}}
+                                        setPostId={() => {}}
+                                        setGoBack={() => {}}
+                                    />
+                                ) : (
+                                    <ThreadMessagesInbox
+                                        channelId={channelId}
+                                        postId={postId}
+                                        role={channelRole}
+                                        goBack={false}
+                                        pathPrefix={pathPrefix}
+                                        setPostId={() => {}}
+                                        setChannelId={() => {}}
+                                        onMessageClick={onMessageClick}
+                                    />
+                                )
                             ) : (
-                                <ThreadMessagesInbox
+                                <MessagesComponent
                                     channelId={channelId}
-                                    postId={postId}
-                                    role={channelRole}
-                                    goBack={false}
-                                    pathPrefix={pathPrefix}
-                                    setPostId={() => {}}
-                                    setChannelId={() => {}}
+                                    MessagesLoaderQuery={MessagesLoaderQuery}
+                                    channelsDetail={channelsDetail}
+                                    channelLoading={channelLoading}
                                     onMessageClick={onMessageClick}
+                                    isSmallScreen={isSmallScreen}
+                                    isDesktopView={isDesktopView}
+                                    windowHeight={windowHeight}
+                                    windowWidth={windowWidth}
                                 />
-                            )
-                        ) : (
-                            <MessagesComponent
-                                channelId={channelId}
-                                MessagesLoaderQuery={MessagesLoaderQuery}
-                                channelsDetail={channelsDetail}
-                                channelLoading={channelLoading}
-                                onMessageClick={onMessageClick}
-                            />
-                        )}
-                    </>
-                )}
+                            )}
+                        </>
+                    )}
+                </div>
             </div>
 
-            {/* Mobile Drawer */}
-            {isMobileView && (
+            {/* Mobile/Small Screen Drawer */}
+            {(isMobileView || isSmallTabletView) && (
                 <Drawer
                     isOpen={isBottomDrawerOpen}
                     onClose={() => setBottomDrawer(false)}
@@ -500,19 +618,29 @@ 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="h-full flex flex-col overflow-hidden">
+            <RightSidebar
+                channelMessages={sortedMessages}
+                visibility="visible"
+                selectedPost={selectedPost}
+                {...detailSidebarOptions}
+            />
+        </div>
     );
 });
 
 const MessagesComponent = React.memo((props: any) => {
-    const { channelId, MessagesLoaderQuery, channelsDetail, channelLoading, onMessageClick } = props;
+    const {
+        channelId,
+        MessagesLoaderQuery,
+        channelsDetail,
+        channelLoading,
+        onMessageClick,
+        isSmallScreen,
+        isDesktopView,
+        windowHeight = 768,
+        windowWidth = 1024,
+    } = props;
 
     const messageRootListRef = useRef(null);
     const messageListRef = useRef(null);
@@ -869,66 +997,85 @@ const MessagesComponent = React.memo((props: any) => {
         <>
             <div
                 ref={messageRootListRef}
-                className="flex flex-col flex-grow flex-shrink overflow-y-auto p-4 px-4 md:px-8 lg:px-12 bg-gray-50"
+                className={`overflow-y-scroll bg-gray-50 ${
+                    isSmallScreen ? 'p-2 px-3' : isDesktopView ? 'p-6 px-8' : 'p-4 px-6'
+                }`}
                 onScroll={onMessagesScroll}
+                style={{
+                    height: `${windowHeight - 140}px`, // Subtract header + input height
+                    maxHeight: '100vh',
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: '#cbd5e0 #f7fafc',
+                    overflowY: 'scroll',
+                    WebkitOverflowScrolling: 'touch',
+                }}
             >
-                {messages.length > 0 ? (
-                    <>
-                        {/* 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 className="min-h-full">
+                    {messages.length > 0 ? (
+                        <>
+                            {/* 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}
+                                isDesktopView={isDesktopView || false}
+                                isSmallScreen={isSmallScreen || false}
+                            />
+                            <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 items-center justify-center text-gray-500 min-h-96">
+                            <div className="text-center max-w-sm mx-auto px-4">
+                                <div className="text-6xl mb-4 opacity-50">💬</div>
+                                <h3 className="text-lg font-semibold text-gray-600 mb-2">No messages yet</h3>
+                                <p className="text-sm text-gray-500">
+                                    Start the conversation by sending a message below!
+                                </p>
                             </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">
-                            <div className="text-4xl mb-4">💬</div>
-                            <p>No messages yet. Start the conversation!</p>
                         </div>
-                    </div>
-                )}
+                    )}
+                </div>
+            </div>
+            <div className="flex-shrink-0 border-t border-gray-200 bg-white">
+                <MessageInput channelId={channelId} handleSend={handleSend} placeholder="Message" />
             </div>
-            <MessageInput channelId={channelId} handleSend={handleSend} placeholder="Message" />
         </>
     );
 });