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

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,200 @@
+import React, { useMemo } from 'react';
+import { useNavigate, useParams } from '@remix-run/react';
+import { AiAgentMessageRole, PostTypeEnum, RoomType } from 'common';
+import { InputComponent } from '../components/AIAgent/InputComponent';
+import { objectId } from '@messenger-box/core';
+import { useAddChannelMutation, useSendMessagesMutation, useCreateChannelWorkflowJobMutation } from 'common/graphql';
+import { ModelConfigPanel } from '../components/ModelConfigPanel';
+import { config } from '../config/env-config';
+import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
+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>
+));
+
+type AiLandingInputProps = {
+    isShowMeta?: boolean;
+    showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
+    leftItemsOverrides?: any;
+    rightItemsOverrides?: any;
+    inputToolBarProps?: any;
+    projectId?: string;
+    suggestedTemplate?: any;
+    onSelectTemplate?: (template: any) => void;
+    templateSelectedLabel?: string | null;
+    templateModalItems?: any[];
+    showTemplateModal?: boolean;
+    onOpenTemplateModal?: () => void;
+    onCloseTemplateModal?: () => void;
+    onSelectTemplateById?: (id: string) => void;
+    onClearTemplate?: () => void;
+    onAcceptSuggestedTemplate?: () => void;
+    isAnalyzingQuery?: boolean;
+    onQueryChange?: (query: string) => void;
+    [key: string]: any;
+};
+
+const AiLandingInput: React.FC<AiLandingInputProps> = ({
+    isShowMeta = false,
+    showModeSelector = false,
+    showStopButton = false,
+    onStop = () => {},
+    inputToolBarProps,
+    ...props
+}) => {
+    const { orgName } = useParams();
+    const [createChannelWorkflowJob] = useCreateChannelWorkflowJobMutation();
+    const [addChannel] = useAddChannelMutation();
+    const [sendMessage] = useSendMessagesMutation();
+    const navigate = useNavigate();
+    const [isCreatingChannel, setIsCreatingChannel] = React.useState(false);
+    const { modelConfig, updateModelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    const projectId = useMemo(() => {
+        return props?.projectId;
+    }, [props?.projectId]);
+    // const [showModelConfig, setShowModelConfig] = React.useState(!hasApiKey);
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-white shadow-lg">
+            <div className="w-full max-w-2xl mx-4">
+                <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-4xl overflow-hidden rounded-[28px] border border-gray-200 bg-card ">
+                    <div className="text-center mb-6">
+                        <h3 className="text-xl font-semibold text-gray-700 mb-2">{`${
+                            (config?.LAYOUT_SETTINGS as any)?.title ?? '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>
+                    <div className="mb-0">
+                        <div className={`   ${!hasApiKey ? 'p-3 bg-white rounded-lg border' : ''}`}>
+                            {!hasApiKey && (
+                                <>
+                                    <p className="text-xs text-gray-600 mb-3">
+                                        Choose your AI model, template, and provide your API key before creating your
+                                        project.
+                                    </p>
+                                    <div className="mt-2 text-xs text-amber-600">
+                                        ⚠️ Please provide an API key to create a projects from settings
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                    <InputComponent
+                        inputToolBarParentClass="shadow-none"
+                        //  textareaClassName="border-none focus:border-none active:border-none focus:outline-none focus:ring-0"
+                        // toolBarParentClassName="border-t border-gray-200 focus:border-t-gray-400"
+                        handleSend={async (message: string, files: File[]) => {
+                            const validated = getValidatedConfig();
+                            if (!validated && !hasApiKey && !modelConfig?.extensionId && !modelConfig?.formId) {
+                                return;
+                            }
+                            console.log('Message sent without channel:', message, files);
+                            setIsCreatingChannel(true);
+                            const id = projectId || objectId();
+                            // const postId = objectId();
+                            const channelId = objectId();
+                            // Do not include extensionId inside modelConfig when sending additionalProperties
+                            const {
+                                extensionId: _omitExtensionId,
+                                formId: _omitFormId,
+                                functionId: _omitFunctionId,
+                                stepName: _omitStepName,
+                                ...modelConfigWithoutExtensionId
+                            } = modelConfig || ({} as any);
+                            createChannelWorkflowJob({
+                                variables: {
+                                    createChannelInput: {
+                                        channelId,
+                                        title: 'AI Assistant',
+                                        description: 'AI Assistant',
+                                        displayName: 'AI Assistant',
+                                        topic: 'AI Assistant',
+                                        projectId: id,
+                                        type: RoomType.Aiassistant,
+                                        postData: {
+                                            // postId: postId,
+                                            type: PostTypeEnum.Aiassistant,
+                                            content: message,
+                                            props: {
+                                                //  generateAiCode: true,
+                                                template: modelConfig?.template || 'vite-react',
+                                                projectId: id,
+                                                role: AiAgentMessageRole.User,
+                                                fragment: {},
+                                                // sendNotificationWithProjectId: true,
+                                            },
+                                        },
+                                        additionalProperties: {
+                                            modelConfig: modelConfigWithoutExtensionId,
+                                        },
+                                    },
+                                    extensionInput: {
+                                        extensionId:
+                                            modelConfig?.extensionId || config?.MESSENGER_BOX_FORM_EXTENSION_ID,
+                                        stepName:
+                                            modelConfig?.stepName ||
+                                            config?.MESSENGER_BOX_FORM_EXTENSION_STEP_NAME ||
+                                            'extractCodeFromExtension',
+                                        formId:
+                                            modelConfig?.formId ||
+                                            config?.MESSENGER_BOX_FORM_EXTENSION_FORM_ID ||
+                                            'form-builder-proxy',
+                                        functionId:
+                                            modelConfig?.functionId ||
+                                            config?.MESSENGER_BOX_FORM_EXTENSION_FUNCTION_ID ||
+                                            'create-channel-function',
+                                        metadata: modelConfig?.metadata || {},
+                                        source: 'final-submission',
+                                    },
+                                },
+                                onCompleted: (data: any) => {
+                                    console.log('Channel created:', data);
+                                    if (!data.createChannelWorkflowJob) {
+                                        setIsCreatingChannel(false);
+                                        return;
+                                    }
+
+                                    const basePath = orgName
+                                        ? config.AI_MESSENGER_PATH.replace(':orgName', orgName)
+                                        : config.AI_MESSENGER_PATH;
+
+                                    const targetPath = basePath.includes(':id')
+                                        ? basePath.replace(':id', channelId)
+                                        : `${basePath.replace(/\/+$/, '')}/${channelId}`;
+
+                                    navigate(targetPath, { replace: true });
+                                    setIsCreatingChannel(false);
+                                },
+                                onError: (error: any) => {
+                                    console.error('Error creating channel:', error);
+                                    setIsCreatingChannel(false);
+                                },
+                            });
+                        }}
+                        placeholder="Type your message here..."
+                        modelConfig={modelConfig}
+                        onModelConfigChange={updateModelConfig}
+                        isShowMeta={isShowMeta}
+                        showModeSelector={showModeSelector}
+                        showStopButton={showStopButton}
+                        onStop={onStop}
+                        inputToolBarProps={inputToolBarProps}
+                        {...props}
+                        leftItemsOverrides={{ template: { enabled: true }, search: { enabled: true } }}
+                    />
+                    {/* <div className="text-center text-sm text-gray-400">
+                        Each project gets its own workspace where you can iterate and refine your ideas.
+                    </div> */}
+                </div>
+            </div>
+            {isCreatingChannel && <TailwindOverlaySpinner />}
+        </div>
+    );
+};
+
+AiLandingInput.displayName = 'AiLandingInput';
+
+export default React.memo(AiLandingInput);