@messenger-box/tailwind-ui-inbox 10.0.3-alpha.72 → 10.0.3-alpha.74

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/index.ts

@@ -1,2 +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/container/AiInbox.tsx

@@ -845,6 +845,8 @@ const MessagesComponent = React.memo((props: any) => {
     const [isLoadingOlder, setIsLoadingOlder] = React.useState(false);
     const isLoadingOlderRef = useRef(false);
     const scrollTimeoutRef = useRef(null);
+    const shouldAutoScrollRef = useRef(true);
+    const hasInitializedRef = useRef(false);
 
     const auth = useSelector(userSelector);
     const { startUpload } = useUploadFiles();
@@ -866,9 +868,21 @@ const MessagesComponent = React.memo((props: any) => {
         }
     }, []);
 
-    // Auto-scroll on new messages (but not when loading older messages)
+    // Auto-scroll rules:
+    // - Initial load: once messages arrive the first time
+    // - When user is at bottom and new messages arrive
+    // - When we explicitly set shouldAutoScrollRef (e.g., on send)
     useEffect(() => {
-        if (!isLoadingOlderRef.current) {
+        if (isLoadingOlderRef.current) return;
+
+        // Initial load: first time messages appear
+        if (!hasInitializedRef.current && messages.length > 0) {
+            hasInitializedRef.current = true;
+            const timer = setTimeout(() => scrollToBottom(), 100);
+            return () => clearTimeout(timer);
+        }
+
+        if (shouldAutoScrollRef.current) {
             const timer = setTimeout(() => scrollToBottom(), 100);
             return () => clearTimeout(timer);
         }
@@ -996,6 +1010,12 @@ const MessagesComponent = React.memo((props: any) => {
                     const isAtTop = Math.ceil(scrollTop) <= 25;
                     const hasMoreMessages = totalCount > messages.length;
 
+                    // Track bottom proximity to decide future auto-scroll behavior
+                    const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+                    const isAtBottom = distanceFromBottom <= 30;
+                    // Only auto-scroll for future incoming messages if user is at bottom
+                    shouldAutoScrollRef.current = isAtBottom;
+
                     // Additional Firefox-specific check
                     const isFirefox = navigator.userAgent.includes('Firefox');
                     const firefoxAdjustedTop = isFirefox ? Math.round(scrollTop) <= 30 : isAtTop;
@@ -1028,6 +1048,9 @@ const MessagesComponent = React.memo((props: any) => {
             if (!channelId) return;
 
             try {
+                // Ensure we auto-scroll when sending a new message
+                shouldAutoScrollRef.current = true;
+                setTimeout(() => scrollToBottom(), 0);
                 const postId = objectId();
                 const currentDate = new Date();
 
@@ -1178,7 +1201,7 @@ const MessagesComponent = React.memo((props: any) => {
                 console.error('Error sending message:', error);
             }
         },
-        [channelId, auth, startUpload, sendMsg],
+        [channelId, auth, startUpload, sendMsg, scrollToBottom],
     );
 
     // Show loading spinner for initial load

package/src/container/AiLandingInput.tsx

@@ -3,7 +3,9 @@ import { useNavigate } from '@remix-run/react';
 import { RoomType } from 'common';
 import { InputComponent } from '../components/InboxMessage';
 import { objectId } from '@messenger-box/core';
-import { useAddChannelMutation, useSendMessagesMutation } from 'common/graphql';
+import { useAddChannelMutation, useSendMessagesMutation, useCreateChannelWithProjectIdMutation } from 'common/graphql';
+import { ModelConfigPanel } from '../components/ModelConfigPanel';
+import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
 
 const TailwindOverlaySpinner = React.memo(() => (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
@@ -12,10 +14,14 @@ const TailwindOverlaySpinner = React.memo(() => (
 ));
 
 const AiLandingInput: React.FC = () => {
+    const [createChannelWithProjectId] = useCreateChannelWithProjectIdMutation();
     const [addChannel] = useAddChannelMutation();
     const [sendMessage] = useSendMessagesMutation();
     const navigate = useNavigate();
     const [isCreatingChannel, setIsCreatingChannel] = React.useState(false);
+    const { modelConfig, updateModelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    // const [showModelConfig, setShowModelConfig] = React.useState(!hasApiKey);
+    const [showModelConfig, setShowModelConfig] = React.useState(true);
 
     return (
         <div className="flex items-center justify-center min-h-screen bg-gray-50">
@@ -25,38 +31,55 @@ const AiLandingInput: React.FC = () => {
                         <h3 className="text-xl font-semibold text-gray-700 mb-2">What would you like to build?</h3>
                         <p className="text-gray-500">Describe your idea and I'll help you create it step by step.</p>
                     </div>
+                    <div className="mb-0">
+                        <div className="p-3 bg-gray-50 rounded-lg border">
+                            <div className="mb-4">
+                                <h3 className="text-sm font-medium text-gray-900 mb-2">Configuration</h3>
+                                <p className="text-xs text-gray-600 mb-3">
+                                    Choose your AI model, template, and provide your API key before creating your
+                                    project.
+                                </p>
+                            </div>
+                            <ModelConfigPanel
+                                config={modelConfig}
+                                onConfigChange={updateModelConfig}
+                                isVisible={showModelConfig}
+                                onToggleVisibility={() => setShowModelConfig(!showModelConfig)}
+                                showTemplate={true}
+                            />
+                            {!hasApiKey && (
+                                <div className="mt-2 text-xs text-amber-600">
+                                    ⚠️ Please provide an API key to create a projects
+                                </div>
+                            )}
+                        </div>
+                    </div>
                     <InputComponent
                         handleSend={async (message: string, files: File[]) => {
+                            const validated = getValidatedConfig();
+                            if (!validated && !hasApiKey) {
+                                setShowModelConfig(true);
+                                return;
+                            }
                             console.log('Message sent without channel:', message, files);
                             setIsCreatingChannel(true);
                             const id = objectId();
-                            addChannel({
+                            createChannelWithProjectId({
                                 variables: {
-                                    name: `AI-Assistant-${id}`,
-                                    type: RoomType.Aiassistant,
-                                    description: 'AI Assistant',
+                                    projectId: id,
+                                    channelInput: {
+                                        content: message,
+                                        modelConfig: modelConfig,
+                                    },
                                 },
                                 onCompleted: (data: any) => {
                                     console.log('Channel created:', data);
-                                    if (!data.createChannel) {
+                                    if (!data.createChannelWithProjectId) {
                                         setIsCreatingChannel(false);
                                         return;
                                     }
-                                    const createdId = data.createChannel.id;
-                                    sendMessage({
-                                        variables: {
-                                            channelId: createdId,
-                                            content: message,
-                                        },
-                                        onCompleted: () => {
-                                            navigate(`/ai-messenger/app?id=${createdId}`, { replace: true });
-                                            setIsCreatingChannel(false);
-                                        },
-                                        onError: (error: any) => {
-                                            console.error('Error sending message:', error);
-                                            setIsCreatingChannel(false);
-                                        },
-                                    });
+                                    navigate(`/ai-messenger/app?id=${id}`, { replace: true });
+                                    setIsCreatingChannel(false);
                                 },
                                 onError: (error: any) => {
                                     console.error('Error creating channel:', error);
@@ -66,7 +89,7 @@ const AiLandingInput: React.FC = () => {
                         }}
                         placeholder="Type your message here..."
                     />
-                    <div className="mt-2">
+                    {/* <div className="mt-2">
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                             <div className="space-y-2">
                                 <div className="relative">
@@ -155,6 +178,9 @@ const AiLandingInput: React.FC = () => {
                                 </div>
                             </div>
                         </div>
+                    </div> */}
+                    <div className="text-center text-sm text-gray-400">
+                        Each project gets its own workspace where you can iterate and refine your ideas.
                     </div>
                 </div>
             </div>

package/src/container/InboxAiMessagesLoader.tsx

@@ -1,47 +1,10 @@
 import React, { useMemo, useCallback } from 'react';
-import { useParams, useLocation } from '@remix-run/react';
-import {
-    useGetChannelsByUserQuery,
-    useGetChannelsByUserWithLastMessageQuery,
-    useMessagesQuery,
-    useViewChannelDetailQuery,
-} from 'common/graphql';
-import { RoomType } from 'common';
-import { config } from '../config';
-import Inbox from '../templates/InboxWithAi';
-import { InputComponent } from '../components/InboxMessage';
+import { useParams, useLocation, useOutletContext } from '@remix-run/react';
 import { AIAgent } from '../components/AIAgent';
 import { useSelector, shallowEqual } from 'react-redux';
 import { Store, userSelector } from '@adminide-stack/user-auth0-client';
 import { IUserState } from '@adminide-stack/core';
 
-const { MESSAGES_PER_PAGE } = config;
-
-// Enhanced query parameters generator with better typing and flexibility
-export const queryParamsGenerator = (params: {
-    role?: string;
-    criteria?: Record<string, any>;
-    supportServices?: boolean;
-    orgName?: string;
-}) => ({
-    variable1: {
-        role: params.role,
-        criteria: {
-            ...params.criteria,
-            ...(params.orgName && { orgName: params.orgName }),
-        },
-        supportServices: params.supportServices ? true : false,
-        supportServiceCriteria: params.supportServices
-            ? {
-                  type: RoomType.Service,
-              }
-            : undefined,
-        orderBy: {
-            lastPostAt: 'desc',
-        },
-    },
-});
-
 interface InboxWithAiLoaderOutletProps {
     channelFilters?: Record<string, any>;
     channelRole?: string;
@@ -52,14 +15,27 @@ interface InboxWithAiLoaderOutletProps {
 }
 
 const InboxWithAiLoaderOutlet = (props: InboxWithAiLoaderOutletProps) => {
-    const { channelFilters: channelFilterProp, channelRole: channelRoleProp, supportServices, pathPrefix } = props;
-    const { orgName, channelRole: channelRoleParam } = useParams();
     const location = useLocation();
+    const { messages, setMessages, selectedPost, setSelectedPost, setIsLoading, isLoading } = useOutletContext() as any;
     const urlParams = location?.search ? new URLSearchParams(location.search) : null;
     const channelId = urlParams?.get('id');
     const user: any = useSelector<Store.Auth, IUserState>(userSelector, shallowEqual);
 
-    return <AIAgent channelId={channelId} placeholder="Ask me anything..." className="h-full" currentUser={user} />;
+    return (
+        <AIAgent
+            channelId={channelId}
+            placeholder="Ask me anything..."
+            className="h-full"
+            currentUser={user}
+            messages={messages}
+            setMessages={setMessages}
+            selectedPost={selectedPost}
+            setSelectedPost={setSelectedPost}
+            setIsLoading={setIsLoading}
+            isLoading={isLoading}
+            {...props}
+        />
+    );
 };
 
 // Display name for debugging

package/src/container/index.ts

@@ -5,9 +5,13 @@ import ThreadMessages from './ThreadMessages';
 import ServiceInbox from './ServiceInbox';
 import { ThreadsInbox } from './ThreadsInbox';
 import { ThreadMessagesInbox } from './ThreadMessagesInbox';
-import AiInboxWithLoader from './AiInboxWithLoader';
-import AiInbox from './AiInbox';
-import InboxTemplate1 from './InboxTemplate1';
+////import AiInboxWithLoader from './AiInboxWithLoader';
+//import AiInbox from './AiInbox';
+//import InboxTemplate1 from './InboxTemplate1';
+import InboxWithAiLoader from './InboxWithAiLoader';
+import InboxAiMessagesLoader from './InboxAiMessagesLoader';
+import InboxContainer from './InboxContainer';
+import AiLandingInput from './AiLandingInput';
 
 export {
     Inbox,
@@ -17,7 +21,11 @@ export {
     ThreadMessages,
     ServiceInbox,
     InboxWithLoader,
-    AiInboxWithLoader,
-    AiInbox,
-    InboxTemplate1,
+    // AiInboxWithLoader,
+    // AiInbox,
+    // InboxTemplate1,
+    InboxWithAiLoader,
+    InboxAiMessagesLoader,
+    InboxContainer,
+    AiLandingInput,
 };

package/src/enums/messenger-slot-fill-name-enum.ts

@@ -1,3 +1,4 @@
 export enum MessengerSlotFillNameEnum {
     INBOX_RIGHT_SIDEBAR = 'inbox-right-sidebar',
+    INBOX_WITH_AI_RIGHT_SIDEBAR = 'inbox-with-ai-right-sidebar',
 }

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './usePersistentModelConfig';
+export * from './use-file-sync';