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

package/lib/templates/InboxWithAi.tsx

@@ -0,0 +1,502 @@
+import React, {
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useReducer,
+    useRef,
+    createContext,
+    useContext,
+    useState,
+} from 'react';
+import { Outlet, useNavigate, useParams, useLocation } from '@remix-run/react';
+
+// Context for sharing tab state between header and sidebar
+const TabContext = createContext<{
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+}>({
+    activeTab: 'design',
+    setActiveTab: () => {},
+});
+
+export interface InboxProps {
+    channelFilters?: Record<string, unknown>;
+    channelRole?: string;
+    supportServices?: boolean;
+    pathPrefix?: string;
+    data?: any;
+    orgName?: string;
+}
+
+// Static utility hooks and components
+const useMediaQuery = (query: string) => {
+    const [matches, setMatches] = React.useState(false);
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const mediaQuery = window.matchMedia(query);
+        const updateMatches = () => setMatches(mediaQuery.matches);
+
+        updateMatches();
+        mediaQuery.addEventListener('change', updateMatches);
+        return () => mediaQuery.removeEventListener('change', updateMatches);
+    }, [query]);
+
+    return matches;
+};
+
+// Hook to get window dimensions
+const useWindowDimensions = () => {
+    const [windowDimensions, setWindowDimensions] = React.useState({
+        width: typeof window !== 'undefined' ? window.innerWidth : 1024,
+        height: typeof window !== 'undefined' ? window.innerHeight : 768,
+    });
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const handleResize = () => {
+            setWindowDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Set initial dimensions
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return windowDimensions;
+};
+
+const EmptyState = React.memo(() => (
+    <div className="h-full flex items-center justify-center bg-gray-100 p-4 sm:p-6 overflow-hidden">
+        <div className="text-center max-w-sm mx-auto">
+            <div className="text-3xl sm:text-4xl text-gray-400 mb-4">💬</div>
+            <h3 className="text-lg sm:text-xl font-semibold text-gray-600 mb-2">Welcome to Messenger</h3>
+            <p className="text-sm sm:text-base text-gray-500 leading-relaxed">
+                Select a conversation from the sidebar to start messaging
+            </p>
+        </div>
+    </div>
+));
+
+const InboxWithAi = (props: InboxProps) => {
+    const [activeTab, setActiveTab] = React.useState('design');
+
+    return (
+        <TabContext.Provider value={{ activeTab, setActiveTab }}>
+            <InboxWithAiInternal {...props} />
+        </TabContext.Provider>
+    );
+};
+
+const InboxWithAiInternal = (props: InboxProps) => {
+    // const { channelFilters: channelFilterProp, channelRole, supportServices, data, orgName, pathPrefix = null } = props;
+    const { id: pathChannelId, postId: pathPostId } = useParams();
+    const location = useLocation();
+    const urlParams = location?.search ? new URLSearchParams(location.search) : null;
+    const { activeTab, setActiveTab } = useContext(TabContext);
+
+    // Extract channelId from query parameters (priority) or path parameters (fallback)
+    const channelId = urlParams?.get('id') || pathChannelId;
+
+    // Handle refresh sandbox
+    const handleRefreshSandbox = useCallback(() => {
+        console.log('Refreshing sandbox...');
+    }, []);
+
+    // Hooks - improved responsive breakpoints with better granularity
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const isMobileView = useMediaQuery('(max-width: 640px)');
+    const isSmallTabletView = useMediaQuery('(min-width: 641px) and (max-width: 900px)');
+    const isTabletView = useMediaQuery('(min-width: 901px) and (max-width: 1024px)');
+    const isDesktopView = useMediaQuery('(min-width: 1025px)');
+    const isLargeDesktopView = useMediaQuery('(min-width: 1440px)');
+    const isSmallScreen = useMediaQuery('(max-width: 900px)');
+    // const auth = useSelector(userSelector);
+
+    const detailSidebarOptions = useMemo(
+        () => ({
+            isMobileView,
+            isSmallTabletView,
+            isTabletView,
+            isDesktopView,
+            isLargeDesktopView,
+            isSmallScreen,
+        }),
+        [isMobileView, isSmallTabletView, isTabletView, isDesktopView, isLargeDesktopView, isSmallScreen],
+    );
+
+    return (
+        <>
+            {/* Main Container */}
+            <div className="flex flex-col h-screen overflow-hidden">
+                {/* Header with Design/Interact/Code tabs - now inside main container */}
+                {channelId && (
+                    <div className="flex-shrink-0 bg-white ">
+                        <div className="flex items-center justify-between px-4 py-3">
+                            <div className="flex items-center">
+                                {/* Show tabs only on larger screens */}
+                                {!isSmallScreen && (
+                                    <div className="flex bg-gray-100 p-2" style={{ borderRadius: '10px' }}>
+                                        <button
+                                            onClick={() => setActiveTab('design')}
+                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                activeTab === 'design'
+                                                    ? 'bg-blue-500 text-white shadow-sm'
+                                                    : 'text-gray-600 hover:text-gray-900'
+                                            }`}
+                                            style={{ borderRadius: '10px' }}
+                                        >
+                                            <svg
+                                                className="w-4 h-4"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+                                                />
+                                            </svg>
+                                            <span>Design</span>
+                                        </button>
+                                        <button
+                                            onClick={() => setActiveTab('interact')}
+                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                activeTab === 'interact'
+                                                    ? 'bg-blue-500 text-white shadow-sm'
+                                                    : 'text-gray-600 hover:text-gray-900'
+                                            }`}
+                                            style={{ borderRadius: '10px' }}
+                                        >
+                                            <svg
+                                                className="w-4 h-4"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                                                />
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                                                />
+                                            </svg>
+                                            <span>Interact</span>
+                                        </button>
+                                        <button
+                                            onClick={() => setActiveTab('code')}
+                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                activeTab === 'code'
+                                                    ? 'bg-blue-500 text-white shadow-sm'
+                                                    : 'text-gray-600 hover:text-gray-900'
+                                            }`}
+                                            style={{ borderRadius: '10px' }}
+                                        >
+                                            <svg
+                                                className="w-4 h-4"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                viewBox="0 24 24"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+                                                />
+                                            </svg>
+                                            <span>Code</span>
+                                        </button>
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* Refresh icon on the right - hidden on mobile */}
+                            {isDesktopView && (
+                                <button
+                                    onClick={handleRefreshSandbox}
+                                    className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
+                                    title="Refresh Sandbox"
+                                >
+                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                                        />
+                                    </svg>
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {/* Content Grid - ContentComponent and RightSidebar */}
+                <div
+                    className="flex-1 grid overflow-hidden"
+                    style={{
+                        gridTemplateColumns: isDesktopView ? '35% 65%' : '1fr',
+                        height: 'calc(100vh - 80px)', // Subtract header height
+                    }}
+                >
+                    {/* Main Content Area - 35% width on desktop */}
+                    <div
+                        className={`
+                        ${isMobileView && !channelId ? 'hidden' : 'flex'}
+                        flex flex-col overflow-hidden transition-all duration-300 ease-in-out
+                    `}
+                        style={{ paddingTop: '15px' }}
+                    >
+                        {channelId ? <ContentComponent channelId={channelId} /> : <EmptyState />}
+                    </div>
+
+                    {/* Right Sidebar - 65% width on desktop only */}
+                    {channelId && isDesktopView && (
+                        <div
+                            className="overflow-hidden border"
+                            style={{ marginBottom: 10, marginRight: 10, borderRadius: 10 }}
+                        >
+                            <RightSidebarContent
+                                detailSidebarOptions={detailSidebarOptions}
+                                windowWidth={windowWidth}
+                                windowHeight={windowHeight}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+const ContentComponent = React.memo((props: any) => {
+    const { channelId } = props;
+
+    return (
+        <div className="flex overflow-hidden h-full">
+            {/* Main Chat Content */}
+            <div className="flex-1 flex flex-col min-w-0 overflow-hidden border-t border-gray-300">
+                {/* Content based on postId */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                    {channelId && (
+                        <>
+                            <MessagesComponent {...props} />
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+});
+
+const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
+    const { activeTab } = useContext(TabContext);
+    return (
+        <div className="h-full flex flex-col overflow-hidden bg-white">
+            {/* Content Area */}
+            <div className="flex-1 overflow-hidden">
+                {activeTab === 'design' ? (
+                    <div className="h-full flex items-center justify-center bg-gray-50">
+                        <div className="text-center">
+                            {/* Next.js Logo */}
+                            <div className="mb-8">
+                                <svg className="w-32 h-16 mx-auto text-black" viewBox="0 0 394 80" fill="currentColor">
+                                    <path d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.4zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.7h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z" />
+                                    <path d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.2 3.4 1 1.4 1.5 3 1.5 5h-5.8z" />
+                                </svg>
+                            </div>
+
+                            <div className="space-y-4 text-gray-600">
+                                <h3 className="text-lg font-semibold text-gray-900">Design View</h3>
+                                <p className="font-mono text-sm bg-gray-100 px-3 py-1 rounded">
+                                    Design components and UI
+                                </p>
+                                <p>Customize and preview your design changes.</p>
+                            </div>
+
+                            <div className="mt-8 space-y-4">
+                                <button className="bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition-colors flex items-center space-x-2 mx-auto">
+                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M12 2L2 7v10c0 5.55 3.84 9.739 9 11 5.16-1.261 9-5.45 9-11V7l-10-5z" />
+                                    </svg>
+                                    <span>Design now</span>
+                                </button>
+                                <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
+                                    View design docs
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                ) : activeTab === 'interact' ? (
+                    <div className="h-full flex items-center justify-center bg-blue-50">
+                        <div className="text-center">
+                            {/* Interact Icon */}
+                            <div className="mb-8">
+                                <svg
+                                    className="w-32 h-32 mx-auto text-blue-500"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={1}
+                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                                    />
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={1}
+                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                                    />
+                                </svg>
+                            </div>
+
+                            <div className="space-y-4 text-gray-600">
+                                <h3 className="text-lg font-semibold text-gray-900">Interactive Mode</h3>
+                                <p className="font-mono text-sm bg-blue-100 px-3 py-1 rounded">
+                                    Live interaction and testing
+                                </p>
+                                <p>Test and interact with your components in real-time.</p>
+                            </div>
+
+                            <div className="mt-8 space-y-4">
+                                <button className="bg-blue-500 text-white px-6 py-3 rounded-full hover:bg-blue-600 transition-colors flex items-center space-x-2 mx-auto">
+                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M8 5v14l11-7z" />
+                                    </svg>
+                                    <span>Start Interacting</span>
+                                </button>
+                                <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
+                                    Learn about interactions
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="h-full bg-gray-900 text-gray-300 p-4 overflow-auto">
+                        <div className="font-mono text-sm">
+                            <div className="mb-4">
+                                <div className="text-green-400">// app/page.tsx</div>
+                            </div>
+                            <div className="space-y-2">
+                                <div>
+                                    <span className="text-purple-400">export</span>{' '}
+                                    <span className="text-purple-400">default</span>{' '}
+                                    <span className="text-blue-400">function</span>{' '}
+                                    <span className="text-yellow-400">Home</span>() {'{'}
+                                </div>
+                                <div className="ml-4">
+                                    <span className="text-purple-400">return</span> (
+                                </div>
+                                <div className="ml-8">
+                                    {'<'}
+                                    <span className="text-red-400">main</span>{' '}
+                                    <span className="text-green-400">className</span>=
+                                    <span className="text-yellow-400">
+                                        "flex min-h-screen flex-col items-center justify-between p-24"
+                                    </span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-12">
+                                    {'<'}
+                                    <span className="text-red-400">div</span>{' '}
+                                    <span className="text-green-400">className</span>=
+                                    <span className="text-yellow-400">
+                                        "z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex"
+                                    </span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-16">
+                                    {'<'}
+                                    <span className="text-red-400">p</span>{' '}
+                                    <span className="text-green-400">className</span>=
+                                    <span className="text-yellow-400">
+                                        "fixed left-0 top-0 flex w-full justify-center border-b border-gray-300
+                                        bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl
+                                        dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static
+                                        lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30"
+                                    </span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-20 text-gray-400">Get started by editing&nbsp;</div>
+                                <div className="ml-20">
+                                    {'<'}
+                                    <span className="text-red-400">code</span>{' '}
+                                    <span className="text-green-400">className</span>=
+                                    <span className="text-yellow-400">"font-mono font-bold"</span>
+                                    {'>'}app/page.tsx{'</'}
+                                    <span className="text-red-400">code</span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-16">
+                                    {'</'}
+                                    <span className="text-red-400">p</span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-12">
+                                    {'</'}
+                                    <span className="text-red-400">div</span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-8">
+                                    {'</'}
+                                    <span className="text-red-400">main</span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-4">);</div>
+                                <div>{'}'}</div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+
+const RightSidebarContent = React.memo(({ detailSidebarOptions, windowWidth, windowHeight }: any) => {
+    return (
+        <div
+            className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
+            style={{
+                // width: `${windowWidth * 0.35}px`, // 35% of window width
+                height: `${windowHeight}px`,
+                maxHeight: '100vh',
+            }}
+        >
+            <RightSidebarWrapper detailSidebarOptions={detailSidebarOptions} />
+        </div>
+    );
+});
+
+const MessagesComponent = React.memo((props: any) => {
+    return <Outlet context="app" />;
+});
+
+// Display names for debugging
+InboxWithAi.displayName = 'Inbox';
+InboxWithAiInternal.displayName = 'InboxWithAiInternal';
+ContentComponent.displayName = 'ContentComponent';
+MessagesComponent.displayName = 'MessagesComponent';
+RightSidebarWrapper.displayName = 'RightSidebarWrapper';
+RightSidebarContent.displayName = 'RightSidebarContent';
+
+export default React.memo(InboxWithAi);

package/lib/templates/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InboxWithAi } from './InboxWithAi';
+//# sourceMappingURL=index.d.ts.map

package/lib/templates/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/templates/index.ts

@@ -0,0 +1 @@
+export { default as InboxWithAi } from './InboxWithAi';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/tailwind-ui-inbox",
-    "version": "10.0.3-alpha.71",
+    "version": "10.0.3-alpha.73",
     "description": "Inbox UI components built with TailwindCSS",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -21,8 +21,8 @@
         "watch": "npm run build:lib:watch"
     },
     "dependencies": {
-        "@messenger-box/core": "10.0.3-alpha.69",
-        "@messenger-box/platform-client": "10.0.3-alpha.69",
+        "@messenger-box/core": "10.0.3-alpha.72",
+        "@messenger-box/platform-client": "10.0.3-alpha.72",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
         "emoji-mart": "^3.0.1",
@@ -36,6 +36,7 @@
         "@tailwindcss/forms": "*",
         "@tailwindcss/typography": "*",
         "@workbench-stack/components": "*",
+        "@xstate/react": "*",
         "lodash": "*",
         "moment": "*",
         "react": ">=16.14.0",
@@ -45,7 +46,8 @@
         "redux": ">=4.0.1",
         "redux-observable": "*",
         "rxjs": "*",
-        "tailwindcss": "*"
+        "tailwindcss": "*",
+        "xstate": "*"
     },
     "publishConfig": {
         "access": "public"
@@ -53,5 +55,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "9eee5b288321c3a3ab5b5ae6359a19a13d93eb5b"
+    "gitHead": "984014e52eb95de9e208b81f92c92c86b9f949e3"
 }