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

package/src/container/InboxAiMessagesLoader.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo, useCallback } from 'react';
+import { useParams, useLocation, useOutletContext } from '@remix-run/react';
+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';
+
+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 location = useLocation();
+    const { messages, setMessages, selectedPost, setSelectedPost, setIsLoading, isLoading } = useOutletContext() as any;
+    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}
+            messages={messages}
+            setMessages={setMessages}
+            selectedPost={selectedPost}
+            setSelectedPost={setSelectedPost}
+            setIsLoading={setIsLoading}
+            isLoading={isLoading}
+            {...props}
+        />
+    );
+};
+
+// 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);