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

package/src/container/AiInboxWithLoader.tsx

@@ -0,0 +1,356 @@
+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 Inbox from './Inbox';
+import Inbox from './AiInbox';
+import AiInbox from './AiInbox';
+import InboxTemplate1 from './InboxTemplate1';
+import InboxTemplate2 from './InboxTemplate2';
+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 location = useLocation();
+    const urlParams = location?.search ? new URLSearchParams(location.search) : null;
+    const template = urlParams?.get('template');
+    const channelRole = channelRoleParam || channelRoleProp;
+    console.log('template', template);
+
+    // 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);
+    }
+
+    // Conditional rendering based on template parameter
+    if (template === '1') {
+        return <AiInbox data={loaderData} {...inboxProps} />;
+    } else if (template === '2') {
+        return <InboxTemplate1 data={loaderData} {...inboxProps} />;
+    } else if (template === '3') {
+        return <InboxTemplate2 data={loaderData} {...inboxProps} />;
+    } else {
+        // Default fallback to Inbox
+        return <Inbox data={loaderData} {...inboxProps} />;
+    }
+};
+
+// Display name for debugging
+InboxWithLoader.displayName = 'InboxWithLoader';
+
+export default React.memo(InboxWithLoader);

package/src/container/AiLandingInput.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { useNavigate } from '@remix-run/react';
+import { RoomType } from 'common';
+import { InputComponent } from '../components/InboxMessage';
+import { objectId } from '@messenger-box/core';
+import { useAddChannelMutation, useSendMessagesMutation } from 'common/graphql';
+
+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>
+));
+
+const AiLandingInput: React.FC = () => {
+    const [addChannel] = useAddChannelMutation();
+    const [sendMessage] = useSendMessagesMutation();
+    const navigate = useNavigate();
+    const [isCreatingChannel, setIsCreatingChannel] = React.useState(false);
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gray-50">
+            <div className="w-full max-w-2xl mx-4">
+                <div className="bg-white rounded-lg shadow-lg p-6">
+                    <div className="text-center mb-6">
+                        <h3 className="text-xl font-semibold text-gray-700 mb-2">What would you like to build?</h3>
+                        <p className="text-gray-500">Describe your idea and I'll help you create it step by step.</p>
+                    </div>
+                    <InputComponent
+                        handleSend={async (message: string, files: File[]) => {
+                            console.log('Message sent without channel:', message, files);
+                            setIsCreatingChannel(true);
+                            const id = objectId();
+                            addChannel({
+                                variables: {
+                                    name: `AI-Assistant-${id}`,
+                                    type: RoomType.Aiassistant,
+                                    description: 'AI Assistant',
+                                },
+                                onCompleted: (data: any) => {
+                                    console.log('Channel created:', data);
+                                    if (!data.createChannel) {
+                                        setIsCreatingChannel(false);
+                                        return;
+                                    }
+                                    const createdId = data.createChannel.id;
+                                    sendMessage({
+                                        variables: {
+                                            channelId: createdId,
+                                            content: message,
+                                        },
+                                        onCompleted: () => {
+                                            navigate(`/ai-messenger/app?id=${createdId}`, { replace: true });
+                                            setIsCreatingChannel(false);
+                                        },
+                                        onError: (error: any) => {
+                                            console.error('Error sending message:', error);
+                                            setIsCreatingChannel(false);
+                                        },
+                                    });
+                                },
+                                onError: (error: any) => {
+                                    console.error('Error creating channel:', error);
+                                    setIsCreatingChannel(false);
+                                },
+                            });
+                        }}
+                        placeholder="Type your message here..."
+                    />
+                    <div className="mt-2">
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            <div className="space-y-2">
+                                <div className="relative">
+                                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <div className="w-5 h-5 bg-purple-500 rounded-full flex items-center justify-center">
+                                            <span className="text-white text-xs font-bold">N</span>
+                                        </div>
+                                    </div>
+                                    <select className="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white">
+                                        <option value="nextjs">Next.js</option>
+                                        <option value="vuejs">Vue.js</option>
+                                        <option value="vite-remix">Vite with Remix</option>
+                                    </select>
+                                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                                        <svg
+                                            className="h-5 w-5 text-gray-400"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                        >
+                                            <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth={2}
+                                                d="M19 9l-7 7-7-7"
+                                            />
+                                        </svg>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="space-y-2">
+                                <div className="relative">
+                                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <div className="w-5 h-5 bg-pink-500 rounded-full flex items-center justify-center">
+                                            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                    <select className="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 bg-white">
+                                        <option value="claude-3-5-sonnet">Claude 3.5 Sonnet</option>
+                                        <option value="claude-3-5-haiku">Claude 3.5 Haiku</option>
+                                        <option value="claude-3-opus">Claude 3 Opus</option>
+                                        <option value="claude-3-sonnet">Claude 3 Sonnet</option>
+                                        <option value="claude-3-haiku">Claude 3 Haiku</option>
+                                    </select>
+                                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                                        <svg
+                                            className="h-5 w-5 text-gray-400"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                        >
+                                            <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth={2}
+                                                d="M19 9l-7 7-7-7"
+                                            />
+                                        </svg>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="space-y-2">
+                                <div className="relative">
+                                    <select className="block w-full pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white">
+                                        <option value="">API Key</option>
+                                        <option value="saved-key-1">••••••••••••</option>
+                                        <option value="saved-key-2">••••••••••••</option>
+                                    </select>
+                                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                                        <svg
+                                            className="h-5 w-5 text-gray-400"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                        >
+                                            <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth={2}
+                                                d="M19 9l-7 7-7-7"
+                                            />
+                                        </svg>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {isCreatingChannel && <TailwindOverlaySpinner />}
+        </div>
+    );
+};
+
+AiLandingInput.displayName = 'AiLandingInput';
+
+export default React.memo(AiLandingInput);

package/src/container/Inbox.tsx

@@ -8,10 +8,11 @@ import {
 } from 'common/graphql';
 import { useUploadFiles } from '@messenger-box/platform-client';
 import { IFileInfo, RoomType, PostTypeEnum } from 'common';
-import { useSelector } from 'react-redux';
+import { useSelector, shallowEqual } from 'react-redux';
 import { useNavigate, useParams } from '@remix-run/react';
 import { LeftSidebar, MessageInput, Messages, RightSidebar } from '../components';
-import { userSelector } from '@adminide-stack/user-auth0-client';
+import { Store, userSelector } from '@adminide-stack/user-auth0-client';
+import { IUserState } from '@adminide-stack/core';
 import { config } from '../config';
 import { applyFooterStyles } from './apply-footer-styles';
 import { objectId } from '@messenger-box/core';
@@ -172,7 +173,9 @@ const Inbox = (props: InboxProps) => {
     const isDesktopView = useMediaQuery('(min-width: 1025px)');
     const isLargeDesktopView = useMediaQuery('(min-width: 1440px)');
     const isSmallScreen = useMediaQuery('(max-width: 900px)');
-    const auth = useSelector(userSelector);
+    // const auth = useSelector(userSelector);
+    const auth: any = useSelector<Store.Auth, IUserState>(userSelector, shallowEqual);
+    // const user = useSelector((state: any) => state.user, shallowEqual);
 
     // Data destructuring from Apollo queries
     const GetChannelsByUserQuery = data?.[0];
@@ -235,8 +238,8 @@ 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) {
+        if (type === RoomType.Direct && members?.length === 1) {
+            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';

package/src/container/InboxAiMessagesLoader.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo, useCallback } from 'react';
+import { useParams, useLocation } from '@remix-run/react';
+import { RoomType } from 'common';
+import { config } from '../config';
+import { AIAgent } from '../components/AIAgent';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Store, userSelector } from '@adminide-stack/user-auth0-client';
+import { IUserState } from '@adminide-stack/core';
+
+// 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',
+        },
+    },
+});
+
+interface InboxWithAiLoaderOutletProps {
+    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 InboxWithAiLoaderOutlet = (props: InboxWithAiLoaderOutletProps) => {
+    const { channelFilters: channelFilterProp, channelRole: channelRoleProp, supportServices, pathPrefix } = props;
+    const { orgName, channelRole: channelRoleParam } = useParams();
+    const location = useLocation();
+    const urlParams = location?.search ? new URLSearchParams(location.search) : null;
+    const channelId = urlParams?.get('id');
+    const user: any = useSelector<Store.Auth, IUserState>(userSelector, shallowEqual);
+
+    return <AIAgent channelId={channelId} placeholder="Ask me anything..." className="h-full" currentUser={user} />;
+};
+
+// Display name for debugging
+InboxWithAiLoaderOutlet.displayName = 'InboxWithAiLoaderOutlet';
+
+export default React.memo(InboxWithAiLoaderOutlet);

package/src/container/InboxContainer.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo, useCallback } from 'react';
+import Inbox from '../templates/InboxWithAi';
+
+interface InboxContainerProps {
+    channelId: string;
+    channelFilters?: Record<string, any>;
+    channelRole?: string;
+    supportServices?: boolean;
+    orgName?: string;
+    [key: string]: any;
+}
+
+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' }}
+    >
+        <div className="flex-1 min-w-0 bg-white border-r border-gray-300"></div>
+        {showRightSidebar && <div className="w-80 border-l border-gray-200 bg-white flex-shrink-0"></div>}
+    </div>
+));
+
+const InboxContainer: React.FC<InboxContainerProps> = (props) => {
+    const { channelId, channelFilters: channelFilterProp, channelRole, supportServices, orgName } = props;
+
+    if (!channelId) {
+        return <InboxSkeleton showRightSidebar={true} />;
+    }
+
+    return <Inbox {...props} />;
+};
+
+InboxContainer.displayName = 'InboxContainer';
+
+export default React.memo(InboxContainer);