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

package/src/container/InboxWithAiLoader.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { useParams, useLocation, useNavigate } from '@remix-run/react';
+import AiLandingInput from './AiLandingInput';
+import InboxContainer from './InboxContainer';
+
+// Spinner kept if needed later
+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>
+));
+
+const TailwindOverlaySpinner = React.memo(() => (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
+        <div className="animate-spin rounded-full h-10 w-10 border-2 border-white border-t-transparent"></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 InboxWithAiLoaderProps {
+    channelFilters?: Record<string, any>;
+    channelRole?: string;
+    supportServices?: boolean;
+    pathPrefix?: string;
+    orgName?: string;
+    [key: string]: any;
+}
+
+const InboxWithAiLoader = (props: InboxWithAiLoaderProps) => {
+    const { channelRole: channelRoleProp, pathPrefix } = props;
+    const { orgName, channelRole: channelRoleParam } = useParams();
+    const location = useLocation();
+    const urlParams = location?.search ? new URLSearchParams(location.search) : null;
+    // const template = urlParams?.get('template');
+    const inboxProps = useMemo(
+        () => ({
+            ...props,
+            orgName: orgName || '',
+            pathPrefix: pathPrefix || '',
+        }),
+        [props, orgName, pathPrefix],
+    );
+
+    const { id: pathChannelId } = useParams();
+
+    // Extract channelId from query parameters (priority) or path parameters (fallback)
+    const channelId = urlParams?.get('id') || pathChannelId;
+
+    // Render the input landing experience when no channel is selected
+    if (!channelId) {
+        return <AiLandingInput />;
+    }
+
+    // No loading or error handling here; handled inside InboxContainer
+
+    return <InboxContainer {...inboxProps} channelId={channelId} />;
+};
+
+// Display name for debugging
+InboxWithAiLoader.displayName = 'InboxWithAiLoader';
+
+export default React.memo(InboxWithAiLoader);

package/src/container/InboxWithLoader.tsx

@@ -0,0 +1,341 @@
+import React, { useMemo, useCallback } from 'react';
+import { useParams, useLocation } from '@remix-run/react';
+
+// import AddGovernmentId from './AddGovernmentId';
+import Inbox from './Inbox';
+import {
+    useGetChannelsByUserQuery,
+    useGetChannelsByUserWithLastMessageQuery,
+    useMessagesQuery,
+    useViewChannelDetailQuery,
+} from 'common/graphql';
+import { RoomType } from 'common';
+import { config } from '../config';
+
+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 InboxWithLoader = (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 <Inbox data={loaderData} {...inboxProps} />;
+};
+
+// Display name for debugging
+InboxWithLoader.displayName = 'InboxWithLoader';
+
+export default React.memo(InboxWithLoader);

package/src/container/ServiceInbox.tsx

@@ -0,0 +1,190 @@
+import React, { useState, useMemo, useCallback, useLayoutEffect, useEffect } from 'react';
+import { useSupportServiceChannelsQuery } from 'common/graphql';
+import { useNavigate, useLocation, useParams } from '@remix-run/react';
+import { useDispatch, useSelector } from 'react-redux';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { push } from '@common-stack/remix-router-redux';
+import { ServiceInboxItem } from '../components';
+import { config } from '../config';
+
+const { MESSAGES_PER_PAGE, WEB_INBOX_MESSEGE_PATH } = config;
+
+type ServiceInboxProps = { role?: any; pathPrefix?: string };
+
+// Custom Skeleton component using Tailwind
+const SkeletonLoader = ({ height = 'h-10' }: { height?: string }) => (
+    <div className={`${height} bg-gray-200 rounded animate-pulse`}></div>
+);
+
+export const ServiceInboxComponent = React.memo((props: any) => {
+    const auth = useSelector(userSelector);
+    const dispatch = useDispatch();
+    const path: any = useParams();
+    const location = useLocation();
+    const { id: channelId } = path || {};
+
+    // const channels = React.useMemo(() => {
+    //     // if (!props?.serviceChannels?.length) return null;
+    //     let uChannels: any =
+    //         props?.serviceChannels?.filter((c: any) =>
+    //             c.members.some((u: any) => u.user.__typename == 'UserAccount'),
+    //         ) ?? [];
+    //     return uChannels || [];
+    // }, [props?.serviceChannels]);
+
+    const users = useMemo(() => {
+        return (
+            props?.serviceChannels?.reduce((acc, curr) => {
+                const newMembers = curr.members.filter(({ user }) => acc.findIndex(({ id }) => id === user.id));
+                return [...acc, ...newMembers?.map(({ user }) => user)];
+            }, []) || []
+        );
+    }, [props?.serviceChannels]);
+
+    const currentUser = useMemo(() => users?.find(({ alias }) => alias.includes(auth?.authUserId)), [users, auth]);
+
+    const handleSelectChannel = useCallback((channelId: any, postId: any) => {
+        if (props?.handleSelectChannel) {
+            props?.handleSelectChannel(channelId, postId);
+        }
+
+        props?.setChannelId(channelId);
+        props?.setPostId(postId);
+        props?.setSkip(0);
+        props?.clearMessages();
+    }, []);
+
+    return (
+        <div className="w-full">
+            {props?.serviceChannels?.map((channel, index) => (
+                <ServiceInboxItem
+                    key={`service_channel_${channel.id}`}
+                    filter={props?.keyword}
+                    channel={channel}
+                    currentUser={auth}
+                    handleSelectChannel={handleSelectChannel}
+                    users={users}
+                    selectedChannelId={props?.channelId ?? channelId}
+                    showBorder={props?.serviceChannels.length == 1 ? true : index != props?.serviceChannels.length - 1}
+                    role={props?.role ?? null}
+                />
+            ))}
+        </div>
+    );
+});
+
+const ServiceInbox = (props: ServiceInboxProps) => {
+    const path: any = useParams();
+    const location = useLocation();
+    const { id: channelId } = path || {};
+    const auth = useSelector(userSelector);
+    const dispatch = useDispatch();
+    const [keyword, setKeyword] = useState('');
+    // const [channels, setChannels] = useState<any>([]);
+
+    const {
+        data: serviceChannels,
+        loading: serviceChannelsLoading,
+        refetch: getServiceChannelsRefetch,
+    } = useSupportServiceChannelsQuery({
+        variables: {
+            criteria: { type: 'SERVICE' },
+        },
+        fetchPolicy: 'cache-and-network',
+        onCompleted: (data: any) => {
+            //setRefresh(false);
+        },
+    });
+
+    useEffect(() => {
+        getServiceChannelsRefetch({ criteria: { type: 'SERVICE' } });
+    }, [location?.pathname]);
+
+    // useEffect(() => {
+    //     if (serviceChannels?.supportServiceChannels?.length > 0) {
+    //         let uChannels: any =
+    //             serviceChannels?.supportServiceChannels?.filter((c: any) =>
+    //                 c.members.some((u: any) => u.user.__typename == 'UserAccount'),
+    //             ) ?? [];
+    //         const sChannels: any = uChannels || [];
+    //         setChannels(sChannels);
+    //     }
+    // }, [serviceChannels]);
+    //..........................old code .....................................//
+    // const channels = React.useMemo(() => {
+    //     if (!serviceChannels?.supportServiceChannels?.length) return null;
+    //     let uChannels: any =
+    //         serviceChannels?.supportServiceChannels?.filter((c: any) =>
+    //             c.members.some((u: any) => u.user.__typename == 'UserAccount'),
+    //         ) ?? [];
+    //     return uChannels || [];
+    // }, [serviceChannels]);
+
+    // const users = useMemo(() => {
+    //     return (
+    //         channels?.reduce((acc, curr) => {
+    //             const newMembers = curr.members.filter(({ user }) => acc.findIndex(({ id }) => id === user.id));
+    //             return [...acc, ...newMembers?.map(({ user }) => user)];
+    //         }, []) || []
+    //     );
+    // }, [channels]);
+
+    // const currentUser = useMemo(() => users?.find(({ alias }) => alias.includes(auth?.authUserId)), [users, auth]);
+
+    const handleSelectChannel = useCallback(
+        (channelId: any, postId: any) => {
+            if (postId || postId == 0)
+                dispatch(
+                    push(
+                        `${
+                            props?.pathPrefix ? props?.pathPrefix : ''
+                        }/${WEB_INBOX_MESSEGE_PATH}/${channelId}/${postId}`,
+                    ),
+                );
+            else dispatch(push(`${props?.pathPrefix ? props?.pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}`));
+        },
+        [location, path],
+    );
+
+    //..........................old code .....................................//
+
+    if (serviceChannelsLoading) {
+        return (
+            <div className="flex flex-col space-y-4">
+                {Array(10)
+                    .fill(1)
+                    .map((x, y) => (
+                        <SkeletonLoader key={y} />
+                    ))}
+            </div>
+        );
+    }
+    return (
+        <>
+            <ServiceInboxComponent
+                serviceChannels={serviceChannels?.supportServiceChannels}
+                filter={keyword}
+                channelId={channelId}
+                handleSelectChannel={handleSelectChannel}
+                {...props}
+            />
+            {/* <div className="w-full">
+            {channels?.map((channel, index) => (
+                <ServiceInboxItem
+                    key={`service_channel_${channel.id}`}
+                    filter={keyword}
+                    channel={channel}
+                    currentUser={auth}
+                    handleSelectChannel={handleSelectChannel}
+                    users={users}
+                    selectedChannelId={channelId}
+                    showBorder={channels.length == 1 ? true : index != channels.length - 1}
+                    role={props?.role ?? null}
+                />
+            ))}
+        </div> */}
+        </>
+    );
+};
+
+export default React.memo(ServiceInbox);