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

package/lib/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/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/lib/utils/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function cn(...inputs: (string | undefined | null | false)[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/utils/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE3E"}

package/lib/utils/utils.js

@@ -0,0 +1,3 @@
+function cn(...inputs) {
+  return inputs.filter(Boolean).join(' ').trim();
+}export{cn};//# sourceMappingURL=utils.js.map

package/lib/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/utils/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAM,SAAU,EAAE,CAAC,GAAG,MAA6C,EAAA;AAC/D,EAAA,OAAA,MAAO,CAAA,MAAO,CAAA,SAAc,IAAE,CAAA,GAAK,CAAA,CAAG,IAAE,EAAI;AAChD"}

package/package.json

@@ -0,0 +1,62 @@
+{
+    "name": "@messenger-box/tailwind-ui-inbox",
+    "version": "10.0.3-alpha.100",
+    "description": "Inbox UI components built with TailwindCSS",
+    "license": "ISC",
+    "author": "CDMBase LLC",
+    "type": "module",
+    "main": "lib/index.js",
+    "module": "lib/index.js",
+    "typings": "lib/index.d.ts",
+    "scripts": {
+        "build": "npm run build:clean && npm run build:lib",
+        "build:clean": "rimraf lib",
+        "build:lib": "rollup -c rollup.config.mjs",
+        "build:lib:watch": "yarn build:lib -- --watch",
+        "jest": "./node_modules/.bin/jest",
+        "prepublish": "npm run build",
+        "test": "cross-env ENV_FILE=../../config/test/test.env jest",
+        "test:debug": "npm test -- --runInBand",
+        "test:watch": "npm test -- --watch",
+        "watch": "npm run build:lib:watch"
+    },
+    "dependencies": {
+        "@messenger-box/core": "10.0.3-alpha.100",
+        "@messenger-box/platform-client": "10.0.3-alpha.100",
+        "@monaco-editor/react": "^4.7.0",
+        "date-fns": "^4.1.0",
+        "date-fns-tz": "^3.2.0",
+        "emoji-mart": "^3.0.1",
+        "javascript-time-ago": "^2.3.13",
+        "react-markdown": "^10.1.0",
+        "remark-gfm": "^4.0.1"
+    },
+    "peerDependencies": {
+        "@adminide-stack/core": "*",
+        "@adminide-stack/user-auth0-browser": "*",
+        "@cdm-logger/client": "*",
+        "@common-stack/client-react": "*",
+        "@tailwindcss/forms": "*",
+        "@tailwindcss/typography": "*",
+        "@workbench-stack/components": "*",
+        "@xstate/react": "*",
+        "lodash": "*",
+        "moment": "*",
+        "react": ">=16.14.0",
+        "react-redux": "*",
+        "react-router": "*",
+        "react-router-dom": "*",
+        "redux": ">=4.0.1",
+        "redux-observable": "*",
+        "rxjs": "*",
+        "tailwindcss": "*",
+        "xstate": "*"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "typescript": {
+        "definition": "lib/index.d.ts"
+    },
+    "gitHead": "f229eb66b880aa2e4e0517b26e0f4ecc996e1e40"
+}

package/rollup.config.mjs

@@ -0,0 +1,35 @@
+import { createRollupConfig } from '../../../rollup.config.base.mjs';
+
+const additionalPlugins = [];
+// Use the createRollupConfig function to merge the base and specific configurations
+export default (commandLineArgs) => {
+    const isWatchMode = commandLineArgs.watch;
+    return [
+        createRollupConfig(
+            {
+                input: ['src/index.ts'],
+                plugins: [
+                    // Spread in additional plugins specific to this config
+                    ...additionalPlugins,
+                ],
+                output: [
+                    {
+                        dir: 'lib',
+                        format: 'es',
+                        name: 'tailwind-ui-inbox',
+                        compact: true,
+                        exports: 'named',
+                        sourcemap: true,
+                        preserveModules: true,
+                        chunkFileNames: '[name]-[hash].[format].js',
+                        globals: { react: 'React' },
+                    },
+                ],
+            },
+            {
+                isWatchMode,
+                generateRoutesJSON: true,
+            },
+        ),
+    ];
+};