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

package/src/templates/InboxWithAi.tsx

@@ -0,0 +1,533 @@
+import React, {
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useReducer,
+    useRef,
+    createContext,
+    useContext,
+    useState,
+} from 'react';
+import { Outlet, useNavigate, useParams, useLocation } from '@remix-run/react';
+import { RightSidebarAi } from '../components/InboxMessage/RightSidebarAi';
+import { useRecreateSandboxMutation } from 'common/graphql';
+import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
+import { useFileSync } from '../hooks/use-file-sync';
+
+// Context for sharing tab state between header and sidebar
+const TabContext = createContext<{
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+}>({
+    activeTab: 'preview',
+    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('preview');
+
+    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);
+    const [messages, setMessages] = useState<any[]>([]);
+    const [selectedPost, setSelectedPost] = useState<any>(null);
+    const [recreateSandbox] = useRecreateSandboxMutation();
+    const { modelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    const [isLoading, setIsLoading] = useState(true);
+    const [errorData, setError] = useState<string | null>(null);
+    // Extract channelId from query parameters (priority) or path parameters (fallback)
+    const channelId = urlParams?.get('id') || pathChannelId;
+
+    const recreateSandboxForFragment = useCallback(
+        async (messageId: string) => {
+            if (!channelId) {
+                console.error('No project ID available for sandbox recreation');
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                setError(null);
+
+                const response = await recreateSandbox({
+                    variables: {
+                        projectId: channelId,
+                        messageId,
+                    },
+                });
+
+                if (response.data?.recreateSandbox?.success) {
+                    console.log('Sandbox recreation initiated successfully');
+                    // The subscription will handle updating the UI with the new sandbox URL
+                } else {
+                    const errorMsg = response.data?.recreateSandbox?.message || 'Failed to recreate sandbox';
+                    throw new Error(errorMsg);
+                }
+            } catch (err) {
+                console.error('Error recreating sandbox:', err);
+                setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
+                setIsLoading(false);
+            }
+        },
+        [recreateSandbox, channelId],
+    );
+
+    // Handle refresh sandbox
+    const handleRefreshSandbox = useCallback(() => {
+        if (selectedPost) {
+            recreateSandboxForFragment(selectedPost.id);
+        }
+    }, [activeTab, selectedPost, recreateSandboxForFragment]);
+
+    // 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('preview')}
+                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                activeTab === 'preview'
+                                                    ? '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>Preview</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}
+                                {...props}
+                                messages={messages}
+                                setMessages={setMessages}
+                                selectedPost={selectedPost}
+                                setSelectedPost={setSelectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                            />
+                        ) : (
+                            <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}
+                                activeTab={activeTab}
+                                channelId={channelId}
+                                messages={messages}
+                                selectedPost={selectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                                {...props}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+const ContentComponent = React.memo((props: any) => {
+    const { channelId, messages, setMessages, selectedPost, setSelectedPost, setIsLoading, isLoading } = 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}
+                                channelId={channelId}
+                                messages={messages}
+                                setMessages={setMessages}
+                                selectedPost={selectedPost}
+                                setSelectedPost={setSelectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                            />
+                        </>
+                    )}
+                </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 === 'preview' ? (
+                    <div className="h-full flex items-center justify-center bg-gray-50">
+                        <div className="text-center">
+                            {/* Preview 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">Preview Mode</h3>
+                                <p className="font-mono text-sm bg-blue-100 px-3 py-1 rounded">
+                                    Live preview and testing
+                                </p>
+                                <p>Preview and test 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 Preview</span>
+                                </button>
+                                <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
+                                    Learn about preview mode
+                                </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, channelId, setIsLoading, isLoading, ...props }: any) => {
+        const { activeTab } = useContext(TabContext);
+
+        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',
+                }}
+            >
+                <RightSidebarAi
+                    detailSidebarOptions={detailSidebarOptions}
+                    windowWidth={windowWidth}
+                    windowHeight={windowHeight}
+                    activeTab={activeTab}
+                    channelId={channelId}
+                    setIsLoading={setIsLoading}
+                    isLoading={isLoading}
+                    {...props}
+                />
+            </div>
+        );
+    },
+);
+
+const MessagesComponent = React.memo((props: any) => {
+    return <Outlet context={{ ...props, app: '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/src/templates/index.ts

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

package/src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...inputs: (string | undefined | null | false)[]): string {
+    return inputs.filter(Boolean).join(' ').trim();
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "lib",
+        "declarationDir": "lib",
+        "declaration": true,
+        "declarationMap": true,
+        "skipLibCheck": true,
+        "types": ["@types/node", "@types/jest", "../../../typings"]
+    },
+    "exclude": ["../../../node_modules", "node_modules", "lib", "dist", "webpack.config.js", "rollup.config.mjs"],
+    "include": ["src", "./typings/*.d.ts", "type.d.ts"]
+}

package/webpack.config.js

@@ -0,0 +1,92 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const nodeExternals = require('webpack-node-externals');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const webpack = require('webpack');
+const path = require('path');
+
+const webpackOpts = {
+    mode: 'development',
+    entry: {
+        index: './src/index.ts',
+    },
+    target: 'node',
+    output: {
+        path: path.join(__dirname, 'lib'),
+        filename: '[name].js',
+        libraryTarget: 'commonjs2',
+    },
+    resolve: {
+        extensions: [
+            '.js',
+            '.jsx',
+            '.ts',
+            '.tsx',
+            '.graphql',
+            '.graphqls',
+            '.gql',
+            '.native.tsx',
+            '.native.ts',
+            '.json',
+        ],
+    },
+    plugins: [
+        new webpack.LoaderOptionsPlugin({
+            options: {
+                test: /\.tsx?$/,
+                ts: {
+                    compiler: 'typescript',
+                    configFile: 'tsconfig.json',
+                },
+                tslint: {
+                    emitErrors: true,
+                    failOnHint: true,
+                },
+            },
+        }),
+    ],
+    devtool: 'source-map',
+    module: {
+        rules: [
+            {
+                test: /\.(tsx)?$/,
+                use: 'ts-loader',
+            },
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: 'javascript/auto',
+            },
+            {
+                test: /\.(gql)$/,
+                exclude: /node_modules/,
+                use: ['graphql-tag/loader'],
+            },
+            {
+                test: /\.graphql?/,
+                exclude: /node_modules/,
+                use: 'raw-loader',
+            },
+            {
+                test: /\.(png|jpg|gif|webp)$/i,
+                use: {
+                    loader: 'url-loader',
+                    options: {
+                        limit: 8192,
+                        name: 'static/media/[name].[hash:8].[ext]',
+                    },
+                },
+            },
+            {
+                test: /\.svg$/,
+                use: ['@svgr/webpack'],
+            },
+            {
+                test: /\.json$/,
+                loader: 'json-loader',
+            },
+        ],
+    },
+    externals: [nodeExternals({ modulesDir: '../../../node_modules' }), nodeExternals()],
+};
+
+module.exports = webpackOpts;