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

package/src/container/ServiceInbox.tsx

@@ -0,0 +1,188 @@
+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 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);

package/src/container/TestInboxWithAiLoader.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import InboxWithAiLoader from './InboxWithAiLoader';
+import { useParams } from '@remix-run/react';
+import { useReCreateSandboxEnvironmentMutation } from 'common/graphql';
+import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
+import { useTemplates } from '../hooks/useTemplates';
+import type { TemplateConfig } from '../types/templates';
+
+const TestInboxWithAiLoaderOutlet = () => {
+    const params = useParams<{ orgName: string }>();
+    const orgName = params.orgName as string;
+    const { modelConfig } = usePersistentModelConfig();
+    const { marketplaceTemplates } = useTemplates();
+    const templatesForSelector = React.useMemo(() => marketplaceTemplates ?? [], [marketplaceTemplates]);
+
+    const [selectedTemplate, setSelectedTemplate] = React.useState<TemplateConfig | null>(null);
+    const [suggestedTemplate, setSuggestedTemplate] = React.useState<TemplateConfig | null>(null);
+    const [showTemplateModal, setShowTemplateModal] = React.useState(false);
+
+    const templateModalItems = React.useMemo(
+        () =>
+            templatesForSelector.map((t) => ({
+                id: t.formExtensionId ?? t.formId,
+                label: t.displayName ?? t.templateName ?? '',
+                description: t.description,
+                category: t.category,
+            })),
+        [templatesForSelector],
+    );
+    const displayTemplate = selectedTemplate ?? suggestedTemplate;
+    const templateSelectedLabel = displayTemplate?.displayName ?? displayTemplate?.templateName ?? null;
+
+    const handleSelectTemplateById = React.useCallback(
+        (id: string) => {
+            const t = templatesForSelector.find((x) => (x.formExtensionId ?? x.formId) === id);
+            if (t) setSelectedTemplate(t);
+        },
+        [templatesForSelector],
+    );
+    const handleSelectTemplate = React.useCallback((template: TemplateConfig | null) => {
+        setSelectedTemplate(template ?? null);
+    }, []);
+
+    const [reCreateSandboxEnvironment] = useReCreateSandboxEnvironmentMutation();
+
+    // Track active recreation calls to prevent duplicates
+    const activeRecreationsRef = React.useRef<Map<string, Promise<any>>>(new Map());
+    // Track last recreation time to add debounce
+    const lastRecreationTimeRef = React.useRef<Map<string, number>>(new Map());
+
+    const handleRecreateSandbox = React.useCallback(
+        async (postId: string) => {
+            console.log('🔄 handleRecreateSandbox called for postId:', postId);
+
+            // Check if we're already recreating this postId
+            const existingPromise = activeRecreationsRef.current.get(postId);
+            if (existingPromise) {
+                console.log('⏭️ Already recreating sandbox for postId:', postId, '- waiting for existing call');
+                try {
+                    return await existingPromise;
+                } catch (error) {
+                    console.log('⚠️ Existing recreation call failed, will retry:', error);
+                    activeRecreationsRef.current.delete(postId);
+                }
+            }
+
+            // Debounce: If we just recreated this postId recently (within 2 seconds), skip
+            const lastRecreationTime = lastRecreationTimeRef.current.get(postId);
+            const now = Date.now();
+            if (lastRecreationTime && now - lastRecreationTime < 2000) {
+                console.log('⏭️ Skipping recreation - too soon after last recreation:', {
+                    postId,
+                    timeSinceLastRecreation: now - lastRecreationTime,
+                });
+                return { data: { reCreateSandboxEnvironment: { success: true, message: 'Skipped - duplicate call' } } };
+            }
+
+            // Update last recreation time
+            lastRecreationTimeRef.current.set(postId, now);
+
+            // Create the mutation promise
+            const mutationPromise = (async () => {
+                try {
+                    console.log('📞 Calling reCreateSandboxEnvironment mutation for postId:', postId);
+                    const response = await reCreateSandboxEnvironment({
+                        variables: {
+                            postId: postId,
+                            metadata: modelConfig?.metadata,
+                        },
+                    });
+                    console.log('✅ reCreateSandboxEnvironment mutation completed:', response);
+                    return response;
+                } finally {
+                    // Clean up the promise reference when done
+                    activeRecreationsRef.current.delete(postId);
+                }
+            })();
+
+            // Store the promise IMMEDIATELY (synchronously) before any async work
+            activeRecreationsRef.current.set(postId, mutationPromise);
+
+            return await mutationPromise;
+        },
+        [reCreateSandboxEnvironment, modelConfig?.metadata],
+    );
+    return (
+        <InboxWithAiLoader
+            orgName={orgName}
+            handleRecreateSandbox={handleRecreateSandbox}
+            isShowAiLanding={true}
+            isShowMeta={true}
+            showContextTab={false}
+            showModeSelector={true}
+            inboxTitle="Chat"
+            showStopButton={true}
+            onStop={() => {
+                console.log('🛑 onStop called');
+            }}
+            templates={templatesForSelector}
+            selectedTemplate={selectedTemplate}
+            suggestedTemplate={suggestedTemplate}
+            onSelectTemplate={handleSelectTemplate}
+            templateSelectedLabel={templateSelectedLabel}
+            templateModalItems={templateModalItems}
+            showTemplateModal={showTemplateModal}
+            onOpenTemplateModal={() => setShowTemplateModal(true)}
+            onCloseTemplateModal={() => setShowTemplateModal(false)}
+            onSelectTemplateById={handleSelectTemplateById}
+            onClearTemplate={() => setSelectedTemplate(null)}
+            onAcceptSuggestedTemplate={() => setSelectedTemplate(suggestedTemplate)}
+            isAnalyzingQuery={false}
+            onQueryChange={() => {}}
+            leftItemsOverrides={{ template: { enabled: true }, search: { enabled: false } }}
+            rightItemsOverrides={{ projectSettings: { enabled: true } }}
+            inputToolBarProps={{
+                templateModalClassName: 'max-w-3xl',
+                classNames: {
+                    container: 'rounded-[24px]',
+                },
+            }}
+        />
+    );
+};
+
+export default React.memo(TestInboxWithAiLoaderOutlet);
+
+TestInboxWithAiLoaderOutlet.displayName = 'TestInboxWithAiLoaderOutlet';