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

package/src/components/live-code-editor/live-code-editor.tsx

@@ -0,0 +1,257 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Editor } from '@monaco-editor/react';
+import { BsFileText } from '@react-icons/all-files/bs/BsFileText.js';
+import { BsFolder } from '@react-icons/all-files/bs/BsFolder.js';
+import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight.js';
+import { BsChevronDown } from '@react-icons/all-files/bs/BsChevronDown.js';
+
+interface LiveCodeEditorProps {
+    files?: Record<string, string>;
+    className?: string;
+    onCopyToClipboard?: (text: string) => void;
+    onFileUpdate?: (filePath: string, content: string) => Promise<void>;
+    readOnly?: boolean;
+    autoSave?: boolean;
+    debounceMs?: number;
+    showFileExplorer?: boolean;
+}
+
+interface FileNode {
+    name: string;
+    type: 'file' | 'folder';
+    children?: FileNode[];
+    path: string;
+}
+
+// File Explorer Component
+const FileExplorer: React.FC<{
+    files: Record<string, string>;
+    currentFile: string;
+    onFileSelect: (filePath: string) => void;
+}> = ({ files, currentFile, onFileSelect }) => {
+    // Simple file list without folder structure
+    const fileList = Object.keys(files);
+
+    return (
+        <div className="w-48 bg-gray-50 border-l border-gray-200 flex flex-col">
+            <div className="p-3 border-b border-gray-200 bg-white">
+                <h3 className="text-sm font-semibold text-gray-700">Files</h3>
+            </div>
+            <div className="flex-1 overflow-y-auto">
+                {fileList.map((filePath) => {
+                    const fileName = filePath.split('/').pop() || filePath;
+                    const isSelected = currentFile === filePath;
+
+                    return (
+                        <div
+                            key={filePath}
+                            className={`flex items-center py-2 px-3 cursor-pointer hover:bg-gray-100 ${
+                                isSelected ? 'bg-blue-50 text-blue-600' : 'text-gray-700'
+                            }`}
+                            onClick={() => onFileSelect(filePath)}
+                        >
+                            <BsFileText className="w-4 h-4 mr-2 text-gray-500" />
+                            <span className="text-sm">{fileName}</span>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export const LiveCodeEditor: React.FC<LiveCodeEditorProps> = ({
+    files = {},
+    className = '',
+    onCopyToClipboard,
+    onFileUpdate,
+    readOnly = false,
+    autoSave = true,
+    debounceMs = 500,
+    showFileExplorer = true,
+}) => {
+    const [currentFile, setCurrentFile] = useState<string>(Object.keys(files)[0] || '');
+    const [fileContent, setFileContent] = useState<string>(files[currentFile] || '');
+    const editorRef = useRef<any>(null);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Update file content when files prop changes
+    useEffect(() => {
+        if (files && Object.keys(files).length > 0) {
+            const firstFile = Object.keys(files)[0];
+            setCurrentFile(firstFile);
+            setFileContent(files[firstFile] || '');
+        }
+    }, [files]);
+
+    const handleEditorDidMount = useCallback(
+        (editor: any, monaco: any) => {
+            editorRef.current = editor;
+
+            // Configure editor options
+            editor.updateOptions({
+                readOnly,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                wordWrap: 'on',
+                lineNumbers: 'on',
+                folding: true,
+                lineDecorationsWidth: 0,
+                lineNumbersMinChars: 0,
+                renderLineHighlight: 'none',
+                cursorStyle: 'line',
+                cursorWidth: 1,
+                fontSize: 14,
+                fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+            });
+
+            // Add keyboard shortcuts
+            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyC, () => {
+                const selection = editor.getSelection();
+                const selectedText = editor.getModel()?.getValueInRange(selection) || '';
+                if (selectedText && onCopyToClipboard) {
+                    onCopyToClipboard(selectedText);
+                }
+            });
+        },
+        [readOnly, onCopyToClipboard],
+    );
+
+    const handleEditorChange = useCallback(
+        (value: string | undefined) => {
+            if (value !== undefined) {
+                setFileContent(value);
+
+                // Debounced auto-save
+                if (autoSave && onFileUpdate && currentFile) {
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                    }
+
+                    timeoutRef.current = setTimeout(() => {
+                        onFileUpdate(currentFile, value);
+                    }, debounceMs);
+                }
+            }
+        },
+        [autoSave, onFileUpdate, currentFile, debounceMs],
+    );
+
+    const getLanguageFromFileName = (fileName: string): string => {
+        const extension = fileName.split('.').pop()?.toLowerCase();
+        const languageMap: Record<string, string> = {
+            js: 'javascript',
+            jsx: 'javascript',
+            ts: 'typescript',
+            tsx: 'typescript',
+            py: 'python',
+            java: 'java',
+            cpp: 'cpp',
+            c: 'c',
+            cs: 'csharp',
+            php: 'php',
+            rb: 'ruby',
+            go: 'go',
+            rs: 'rust',
+            html: 'html',
+            css: 'css',
+            scss: 'scss',
+            sass: 'sass',
+            less: 'less',
+            json: 'json',
+            xml: 'xml',
+            yaml: 'yaml',
+            yml: 'yaml',
+            md: 'markdown',
+            sql: 'sql',
+            sh: 'shell',
+            bash: 'shell',
+            dockerfile: 'dockerfile',
+        };
+        return languageMap[extension || ''] || 'plaintext';
+    };
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    const handleFileSelect = useCallback(
+        (filePath: string) => {
+            setCurrentFile(filePath);
+            setFileContent(files[filePath] || '');
+        },
+        [files],
+    );
+
+    return (
+        <div className={`flex h-full w-full ${className}`}>
+            {/* Editor Area - Left Side */}
+            <div className="flex-1 flex flex-col">
+                {/* File Name Header */}
+                <div className="flex items-center justify-between px-4 py-2 bg-gray-100 border-b border-gray-200">
+                    <div className="flex items-center">
+                        <BsFileText className="w-4 h-4 mr-2 text-gray-500" />
+                        <span className="text-sm font-medium text-gray-700">
+                            {currentFile.split('/').pop() || currentFile}
+                        </span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                        <button className="text-gray-400 hover:text-gray-600">
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                {/* Monaco Editor */}
+                <div className="flex-1" style={{ height: '100%', minHeight: '400px' }}>
+                    <Editor
+                        height="100%"
+                        language={getLanguageFromFileName(currentFile)}
+                        value={fileContent}
+                        onMount={handleEditorDidMount}
+                        onChange={handleEditorChange}
+                        options={{
+                            readOnly,
+                            minimap: { enabled: false },
+                            scrollBeyondLastLine: true,
+                            wordWrap: 'on',
+                            lineNumbers: 'on',
+                            folding: true,
+                            lineDecorationsWidth: 0,
+                            lineNumbersMinChars: 0,
+                            renderLineHighlight: 'none',
+                            cursorStyle: 'line',
+                            cursorWidth: 1,
+                            fontSize: 14,
+                            fontFamily:
+                                "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+                            scrollbar: {
+                                vertical: 'auto',
+                                horizontal: 'auto',
+                                verticalScrollbarSize: 8,
+                                horizontalScrollbarSize: 8,
+                            },
+                        }}
+                    />
+                </div>
+            </div>
+
+            {/* File Explorer - Right Side */}
+            {showFileExplorer && Object.keys(files).length > 0 && (
+                <FileExplorer files={files} currentFile={currentFile} onFileSelect={handleFileSelect} />
+            )}
+        </div>
+    );
+};

package/src/components/slot-fill/chat-message-filler.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ChatMessageFiller } from './chat-message-slot';
+import { MessageSliceRenderer } from '../InboxMessage/message-widgets';
+
+export const ChatMessageFill = () => {
+    return <ChatMessageFiller>{(props) => <MessageSliceRenderer {...props} />}</ChatMessageFiller>;
+};
+
+export const ChatMessageFill2 = () => {
+    return (
+        <ChatMessageFiller>
+            {(props) => {
+                const { message, index, onOpen, currentUser } = props;
+                return <div>{message.message}</div>;
+            }}
+        </ChatMessageFiller>
+    );
+};

package/src/components/slot-fill/chat-message-slot.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent } from 'react';
+import { Slot, Fill } from '@common-stack/components-pro';
+import { MESSAGE_SLOT_FILL_NAME } from '@messenger-box/core';
+
+type ChatMessageProps = {
+    index: number;
+    message: any;
+    onOpen: any;
+    currentUser: any;
+};
+
+export const ChatMessageSlot: FunctionComponent<ChatMessageProps> = (props) => {
+    return <Slot name={MESSAGE_SLOT_FILL_NAME} fillProps={{ active: true, ...props }} />;
+};
+
+export const ChatMessageFiller = (props: any) => {
+    return <Fill {...props} name={MESSAGE_SLOT_FILL_NAME} />;
+};

package/src/components/slot-fill/index.ts

@@ -0,0 +1,3 @@
+export { ChatMessageFiller } from './chat-message-slot';
+export { ChatMessageFill2 } from './chat-message-filler';
+export { RightSidebarFill as RightSidebarFillDefault } from './right-sidebar-filler';

package/src/components/slot-fill/right-sidebar-filler.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Fill } from '@common-stack/components-pro';
+import { MessengerSlotFillNameEnum } from '../../enums';
+import { RightSidebarFillComponent } from '../filler-components/RightSiderBar';
+
+type RightSidebarProps = {
+    channelId: string;
+    detailSidebarOptions: {
+        isMobileView: boolean;
+        isSmallTabletView: boolean;
+        isTabletView: boolean;
+        isDesktopView: boolean;
+        isLargeDesktopView: boolean;
+        isSmallScreen: boolean;
+        [key: string]: any;
+    };
+    windowWidth: number;
+    windowHeight: number;
+    activeTab?: string;
+    selectedPost?: any;
+    messages?: any[];
+    setIsLoading?: (isLoading: boolean) => void;
+    isLoading?: boolean;
+    [key: string]: any;
+};
+
+export const RightSidebarFiller = (props: any) => {
+    return <Fill {...props} name={MessengerSlotFillNameEnum.INBOX_WITH_AI_RIGHT_SIDEBAR} />;
+};
+
+export const RightSidebarFill = () => {
+    return (
+        <RightSidebarFiller>
+            {(props: RightSidebarProps) => {
+                return <RightSidebarFillComponent {...props} />;
+            }}
+        </RightSidebarFiller>
+    );
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { cn } from '../../utils/utils';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'default' | 'outline' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg';
+    children: React.ReactNode;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant = 'default', size = 'default', ...props }, ref) => {
+        const baseClasses =
+            'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background';
+
+        const variants = {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'underline-offset-4 hover:underline text-primary',
+        };
+
+        const sizes = {
+            default: 'h-10 py-2 px-4',
+            sm: 'h-9 px-3 rounded-md',
+            lg: 'h-11 px-8 rounded-md',
+        };
+
+        return <button className={cn(baseClasses, variants[variant], sizes[size], className)} ref={ref} {...props} />;
+    },
+);
+
+Button.displayName = 'Button';

package/src/compute.ts

@@ -0,0 +1,134 @@
+import 'reflect-metadata';
+import * as React from 'react';
+import { PreDefineAccountPermissions } from '@adminide-stack/core';
+import { IMenuPosition } from '@common-stack/client-react';
+import type { IRouteModule } from '@common-stack/core';
+import { getFilteredRoutes, IPageStore } from '@adminide-stack/core';
+
+export const messengerPageStore: IRouteModule[] | { [key: string]: any } = [
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'inbox',
+        component: () => import('./container/InboxWithLoader'),
+        tab: 'Chat App',
+        position: IMenuPosition.Middle,
+        // authority: [PreDefineAccountPermissions.secureUser],
+        name: 'Inbox',
+        path: '//inbox/:id?/:postId?',
+        // path: '/o/:orgName/inbox',
+    },
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'inbox',
+        component: () => import('./container/InboxWithLoader'),
+        tab: 'Chat App',
+        position: IMenuPosition.Middle,
+        //authority: [PreDefineAccountPermissions.secureUser],
+        name: 'Inbox',
+        path: '/o/:orgName/inbox',
+    },
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'direct-message',
+        component: () => import('./container/InboxWithLoader'),
+        tab: 'DM',
+        position: IMenuPosition.Middle,
+        // authority: [PreDefineAccountPermissions.secureUser],
+        name: 'DirectMessage',
+        path: '//o/:orgName/direct-message/:id?/:postId?',
+        // path: '/o/:orgName/inbox',
+    },
+    // {
+    //     exact: false,
+    //     icon: 'AiOutlineInbox',
+    //     key: 'ai-messenger',
+    //     component: () => import('./container/AiInboxWithLoader'),
+    //     tab: 'DM',
+    //     position: IMenuPosition.Middle,
+    //     // authority: [PreDefineAccountPermissions.secureUser],
+    //     name: 'AiMessenger',
+    //     path: '//o/:orgName/ai-messenger/:id?/:postId?',
+    //     // path: '/o/:orgName/inbox',
+    // },
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'ai-messenger',
+        component: () => import('./container/InboxWithAiLoader'),
+        tab: 'Ai Messenger',
+        position: IMenuPosition.Middle,
+        name: 'AiMessenger',
+        path: '/ai-messenger',
+    },
+
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'ai-messenger-with-message-app',
+        component: () => import('./container/InboxAiMessagesLoader'),
+        tab: 'Ai Messenger',
+        position: IMenuPosition.Middle,
+        name: 'AiMessengerWithMessageApp',
+        path: '/ai-messenger/app',
+    },
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'ai-messenger-with-org-name',
+        component: () => import('./container/InboxWithAiLoader'),
+        tab: 'Ai Messenger',
+        position: IMenuPosition.Middle,
+        name: 'AiMessengerWithOrgName',
+        path: '//o/:orgName/ai-messenger',
+    },
+    // {
+    //     exact: false,
+    //     icon: 'AiOutlineInbox',
+    //     key: 'ai-messenger-with-channel-id',
+    //     component: () => import('./templates/InboxWithAi'),
+    //     tab: 'Ai Messenger',
+    //     position: IMenuPosition.Middle,
+    //     name: 'AiMessengerWithChannelId',
+    //     path: '//o?/:orgName?/ai-messenger/:id',
+    // },
+
+    //  {
+    //     exact: false,
+    //     icon: 'AiOutlineInbox',
+    //     key: 'messenger-ai',
+    //     component: () => import('./container/InboxAiLoader'),
+    //     tab: 'Ai Messenger',
+    //     position: IMenuPosition.Middle,
+    //     name: 'MessengerAi',
+    //     path: '/messenger-ai',
+    // },
+
+    // {
+    //     exact: false,
+    //     icon: 'AiOutlineInbox',
+    //     key: 'ai-messenger-with-preview',
+    //     component: () => import('./container/InboxWithAiLoader'),
+    //     tab: 'Ai Messenger',
+    //     position: IMenuPosition.Middle,
+    //     name: 'AiMessengerWithPreview',
+    //     path: '//o?/:orgName?/ai-messenger/app/:id/preview',
+    // },
+];
+
+// get only selected Routes to work
+const selectedRoutes = [
+    'inbox',
+    'direct-message',
+    'ai-messenger',
+    'ai-messenger-with-org-name',
+    'ai-messenger-with-channel-id',
+    'ai-messenger-with-message-app',
+    'ai-messenger-with-preview',
+];
+
+const filteredRoutes = getFilteredRoutes(messengerPageStore, selectedRoutes);
+
+export { filteredRoutes };

package/src/config/env-config.ts

@@ -0,0 +1,17 @@
+import { cleanEnv, num, str } from 'envalid';
+import { getEnvironment } from '@common-stack/core';
+
+const env = getEnvironment();
+
+export const config = cleanEnv(env, {
+    CLIENT_URL: str({ default: 'http://localhost:3011' }),
+    WEB_INBOX_MESSEGE_PATH: str({ default: 'inbox' }),
+    WEB_THREAD_MESSEGE_PATH: str({ default: 'thread' }),
+    MESSAGES_PER_PAGE: num({ devDefault: 10, default: 10 }),
+    FILES_PER_MESSAGE: num({ default: 10 }),
+    VITE_OPENAI_API_KEY: str({ default: '' }),
+    VITE_ANTHROPIC_API_KEY: str({ default: '' }),
+    ANTHROPIC_API_KEY: str({ default: '' }),
+    NEWS_API_KEY: str({ default: '' }),
+    OPENAI_API_KEY: str({ default: '' }),
+});

package/src/config/index.ts

@@ -0,0 +1 @@
+export { config } from './env-config';

package/src/constants/breakpoints.ts

@@ -0,0 +1,7 @@
+export const breakpoints = {
+    sm: '30em', // 480px
+    md: '48em', // 768px
+    lg: '62em', // 992px
+    xl: '80em', // 1280px
+    '2xl': '96em', // 1536px
+};

package/src/constants/index.ts

@@ -0,0 +1,5 @@
+export const logoURL = 'https://cdmbase.s3.ca-central-1.amazonaws.com/favicon-new-128.svg';
+// export default {
+//     logoURL: 'https://cdmbase.s3.ca-central-1.amazonaws.com/favicon-new-128.svg',
+// };
+export * from './breakpoints';