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

package/src/container/InboxTemplate1WithLoader.tsx

@@ -0,0 +1,338 @@
+import React, { useMemo, useCallback } from 'react';
+import { useParams, useLocation } from '@remix-run/react';
+import {
+    useGetChannelsByUserQuery,
+    useGetChannelsByUserWithLastMessageQuery,
+    useMessagesQuery,
+    useViewChannelDetailQuery,
+} from 'common/graphql';
+import { RoomType } from 'common';
+import { config } from '../config';
+import AiInbox from './AiInbox';
+const { MESSAGES_PER_PAGE } = config;
+
+// Enhanced query parameters generator with better typing and flexibility
+export const queryParamsGenerator = (params: {
+    role?: string;
+    criteria?: Record<string, any>;
+    supportServices?: boolean;
+    orgName?: string;
+}) => ({
+    variable1: {
+        role: params.role,
+        criteria: {
+            ...params.criteria,
+            ...(params.orgName && { orgName: params.orgName }),
+        },
+        supportServices: params.supportServices ? true : false,
+        supportServiceCriteria: params.supportServices
+            ? {
+                  type: RoomType.Service,
+              }
+            : undefined,
+        orderBy: {
+            lastPostAt: 'desc',
+        },
+    },
+});
+
+// Enhanced Skeleton Components
+const InboxSkeleton = React.memo(({ showRightSidebar = false }: { showRightSidebar?: boolean }) => (
+    <div
+        className="h-full border-t border-gray-300 flex overflow-hidden animate-pulse"
+        style={{ height: '100vh !important' }}
+    >
+        {/* Left Sidebar Skeleton */}
+        <div className="flex-shrink-0 w-full md:w-80 lg:w-96 xl:w-[420px] bg-gray-50 border-r border-gray-300 overflow-hidden">
+            {/* Header skeleton */}
+            <div className="p-4 border-b border-gray-200">
+                <div className="flex items-center justify-between mb-4">
+                    <div className="h-6 bg-gray-300 rounded w-24"></div>
+                    <div className="h-8 w-8 bg-gray-300 rounded-full"></div>
+                </div>
+                {/* Search bar skeleton */}
+                <div className="h-10 bg-gray-300 rounded-lg w-full"></div>
+            </div>
+
+            {/* Conversation list skeleton */}
+            <div className="p-4 space-y-3">
+                {Array.from({ length: 8 }).map((_, index) => (
+                    <div key={index} className="flex items-center space-x-3 p-3 rounded-lg">
+                        {/* Avatar skeleton */}
+                        <div className="h-12 w-12 bg-gray-300 rounded-full flex-shrink-0"></div>
+                        <div className="flex-1 min-w-0">
+                            {/* Name skeleton */}
+                            <div className="h-4 bg-gray-300 rounded w-3/4 mb-2"></div>
+                            {/* Message preview skeleton */}
+                            <div className="h-3 bg-gray-200 rounded w-full"></div>
+                        </div>
+                        <div className="flex flex-col items-end space-y-1">
+                            {/* Time skeleton */}
+                            <div className="h-3 bg-gray-200 rounded w-12"></div>
+                            {/* Badge skeleton */}
+                            <div className="h-4 w-4 bg-gray-300 rounded-full"></div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+
+        {/* Main Content Area Skeleton */}
+        <div className="flex-1 min-w-0 overflow-hidden">
+            <div className="flex h-full">
+                {/* Chat content skeleton */}
+                <div className="flex-1 flex flex-col">
+                    {/* Header skeleton */}
+                    <div className="px-6 py-4 border-b border-gray-200 bg-white flex-shrink-0">
+                        <div className="flex items-center justify-between">
+                            <div className="h-6 bg-gray-300 rounded w-32"></div>
+                            <div className="h-8 bg-gray-300 rounded w-20"></div>
+                        </div>
+                    </div>
+
+                    {/* Messages area skeleton */}
+                    <div className="flex-1 p-4 space-y-4 overflow-hidden">
+                        {Array.from({ length: 6 }).map((_, index) => (
+                            <div key={index} className={`flex ${index % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
+                                <div
+                                    className={`flex items-start space-x-2 max-w-xs lg:max-w-md ${
+                                        index % 2 === 0 ? '' : 'flex-row-reverse space-x-reverse'
+                                    }`}
+                                >
+                                    {index % 2 === 0 && (
+                                        <div className="h-8 w-8 bg-gray-300 rounded-full flex-shrink-0"></div>
+                                    )}
+                                    <div
+                                        className={`px-4 py-2 rounded-lg ${
+                                            index % 2 === 0 ? 'bg-gray-200' : 'bg-gray-300'
+                                        }`}
+                                    >
+                                        <div className="h-4 bg-gray-400 rounded w-32 mb-1"></div>
+                                        <div className="h-3 bg-gray-400 rounded w-20"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Message input skeleton */}
+                    <div className="p-4 border-t border-gray-200 bg-white">
+                        <div className="flex items-center space-x-2">
+                            <div className="h-10 bg-gray-300 rounded-full w-10"></div>
+                            <div className="flex-1 h-10 bg-gray-300 rounded-lg"></div>
+                            <div className="h-10 w-10 bg-gray-300 rounded-full"></div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right Sidebar Skeleton - Desktop only, conditionally rendered */}
+                {showRightSidebar && (
+                    <div className="hidden xl:block w-72 lg:w-80 xl:w-96 border-l border-gray-200 bg-white flex-shrink-0">
+                        <div className="p-4">
+                            {/* Right sidebar header */}
+                            <div className="h-6 bg-gray-300 rounded w-24 mb-4"></div>
+
+                            {/* Right sidebar content */}
+                            <div className="space-y-3">
+                                {Array.from({ length: 4 }).map((_, index) => (
+                                    <div key={index} className="p-3 border border-gray-200 rounded-lg">
+                                        <div className="h-4 bg-gray-300 rounded w-3/4 mb-2"></div>
+                                        <div className="h-3 bg-gray-200 rounded w-full mb-1"></div>
+                                        <div className="h-3 bg-gray-200 rounded w-2/3"></div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    </div>
+));
+
+const TailwindSpinner = React.memo(() => (
+    <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+    </div>
+));
+
+interface TailwindAlertProps {
+    children: React.ReactNode;
+}
+
+const TailwindAlert = React.memo(({ children }: TailwindAlertProps) => (
+    <div className="flex items-center justify-center min-h-screen">
+        <div
+            className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative max-w-md mx-auto"
+            role="alert"
+        >
+            <span className="block sm:inline">{children}</span>
+        </div>
+    </div>
+));
+
+interface InboxWithLoaderProps {
+    channelFilters?: Record<string, any>;
+    channelRole?: string;
+    supportServices?: boolean;
+    pathPrefix?: string;
+    orgName?: string;
+    [key: string]: any; // Allow other props to be passed through to Inbox
+}
+
+const InboxTemplate1WithLoader = (props: InboxWithLoaderProps) => {
+    const { channelFilters: channelFilterProp, channelRole: channelRoleProp, supportServices, pathPrefix } = props;
+    const { orgName, channelRole: channelRoleParam } = useParams();
+    const channelRole = channelRoleParam || channelRoleProp;
+
+    // Create new props object with orgName instead of mutating original props
+    const inboxProps = useMemo(
+        () => ({
+            ...props,
+            orgName: orgName || '',
+            pathPrefix: pathPrefix || '',
+        }),
+        [props, orgName, pathPrefix],
+    );
+
+    const { id: pathChannelId } = useParams();
+
+    // Enhanced query variables with better filtering and stable references
+    const channelsQueryVariables = useMemo(() => {
+        const channelFilters = { ...channelFilterProp };
+        const channelType = channelFilters?.type ?? RoomType.Direct;
+        const baseFilters = {
+            ...channelFilters,
+            type: supportServices ? [channelType, RoomType.Service] : channelType,
+        };
+
+        return queryParamsGenerator({
+            role: channelRole,
+            criteria: baseFilters,
+            supportServices,
+            orgName: orgName || '',
+        }).variable1;
+    }, [channelRole, channelFilterProp, supportServices, orgName]);
+
+    const messagesQueryVariables = useMemo(
+        () => ({
+            channelId: pathChannelId?.toString(),
+            parentId: null,
+            limit: MESSAGES_PER_PAGE,
+        }),
+        [pathChannelId],
+    );
+
+    const channelDetailQueryVariables = useMemo(
+        () => ({
+            id: pathChannelId?.toString(),
+        }),
+        [pathChannelId],
+    );
+
+    // Enhanced Apollo queries with better cache policies and error handling
+    const channelsQuery = useGetChannelsByUserQuery({
+        variables: channelsQueryVariables,
+        fetchPolicy: 'cache-and-network', // Better for real-time updates
+        errorPolicy: 'all',
+        notifyOnNetworkStatusChange: false,
+        returnPartialData: true,
+        // Add context for better cache management
+        context: {
+            cacheKey: 'channels-list',
+        },
+    });
+
+    const messagesQuery = useMessagesQuery({
+        variables: messagesQueryVariables,
+        skip: !pathChannelId,
+        fetchPolicy: 'cache-and-network', // Better for real-time messaging
+        errorPolicy: 'all',
+        notifyOnNetworkStatusChange: true,
+        returnPartialData: true,
+        // Disable polling to allow subscriptions to work properly
+        pollInterval: 0,
+        // Add context for better cache management
+        context: {
+            cacheKey: 'messages-list',
+        },
+    });
+
+    const channelDetailQuery = useViewChannelDetailQuery({
+        variables: channelDetailQueryVariables,
+        skip: !pathChannelId,
+        fetchPolicy: 'cache-first', // Channel details don't change often
+        errorPolicy: 'all',
+        notifyOnNetworkStatusChange: false, // No need for real-time updates
+        returnPartialData: true,
+        // Add context for better cache management
+        context: {
+            cacheKey: 'channel-detail',
+        },
+    });
+
+    // Enhanced error handling with retry logic
+    const handleRetry = useCallback(() => {
+        if (channelsQuery.error) {
+            channelsQuery.refetch();
+        }
+        if (messagesQuery.error) {
+            messagesQuery.refetch();
+        }
+        if (channelDetailQuery.error) {
+            channelDetailQuery.refetch();
+        }
+    }, [channelsQuery, messagesQuery, channelDetailQuery]);
+
+    // Create loader data array for Inbox component with better error handling
+    const loaderData = useMemo(
+        () => [channelsQuery, messagesQuery, channelDetailQuery],
+        [channelsQuery, messagesQuery, channelDetailQuery],
+    );
+
+    // Enhanced loading states with better UX
+    if (channelsQuery.loading && !pathChannelId && !channelsQuery.data) {
+        return <InboxSkeleton showRightSidebar={false} />;
+    }
+
+    // Show skeleton during initial channel loading
+    if (
+        pathChannelId &&
+        (messagesQuery.loading || channelDetailQuery.loading) &&
+        !messagesQuery.data &&
+        !channelDetailQuery.data
+    ) {
+        return <InboxSkeleton showRightSidebar={true} />;
+    }
+
+    // Enhanced error handling with retry option
+    if (channelsQuery.error && !channelsQuery.data) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-screen space-y-4">
+                <TailwindAlert>Error loading channels: {channelsQuery.error.message}</TailwindAlert>
+                <button
+                    onClick={handleRetry}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                    Retry
+                </button>
+            </div>
+        );
+    }
+
+    // Handle individual query errors gracefully
+    if (messagesQuery.error && !messagesQuery.data && pathChannelId) {
+        console.warn('Messages query error:', messagesQuery.error);
+    }
+
+    if (channelDetailQuery.error && !channelDetailQuery.data && pathChannelId) {
+        console.warn('Channel detail query error:', channelDetailQuery.error);
+    }
+
+    return <AiInbox data={loaderData} {...inboxProps} />;
+};
+
+// Display name for debugging
+InboxTemplate1WithLoader.displayName = 'InboxTemplate1WithLoader';
+
+export default React.memo(InboxTemplate1WithLoader);