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

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<ReturnType<typeof setTimeout> | 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/messages-container-ui/MessagesContainerUI.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import clsx from 'clsx';
+import { PlanModeView } from './PlanModeView';
+import type { PlanMessage } from './types';
+import type { PlanModeViewInputToolbarProps } from './PlanModeView';
+
+export interface MessagesContainerUIProps {
+    messages: PlanMessage[];
+    streamingContent?: string;
+    currentUser: { id: string; name?: string; avatar?: string; [key: string]: any };
+    onSend: (text: string) => void;
+    /** Optional classes applied to the container root (useful for width/padding tweaks). */
+    className?: string;
+    /** Optional ref for the scroll container inside PlanModeView. */
+    scrollContainerRef?: React.Ref<HTMLDivElement>;
+    /** Optional className applied to PlanModeView root wrapper. */
+    planModeViewClassName?: string;
+    /** Optional className applied to PlanModeView scroll container element. */
+    planModeScrollContainerClassName?: string;
+    /** When true, hide scrollbar visuals but keep it scrollable. */
+    hideScrollbar?: boolean;
+    disabled?: boolean;
+    isLoading?: boolean;
+    onStop?: () => void;
+    showDate?: boolean;
+    showAvatar?: boolean;
+    showMessageBubbleBorder?: boolean;
+    /** When false (default), do NOT create an internal scroll container (avoids nested scroll). */
+    useInternalScroll?: boolean;
+    /** When true, the built-in input toolbar area is not rendered. */
+    hideInputToolbar?: boolean;
+    /**
+     * Where to place the input toolbar.
+     * - `bottom` (default): render toolbar in the bottom area.
+     * - `inlineWhenEmpty`: when there are no messages and no streaming/loading, render the toolbar inline
+     *   inside the empty state (matches landing UI), otherwise use bottom placement.
+     */
+    inputPlacement?: 'bottom' | 'inlineWhenEmpty';
+    /** Input component; receives value, onChange, onSend, disabled */
+    renderInputToolbar: (props: PlanModeViewInputToolbarProps) => React.ReactNode;
+    /** Optional: passed to ModernMessageGroupComponent (same as AIAgent) */
+    onOpen?: (element?: any) => void;
+    onMessageClick?: (msg: any) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+    sandboxErrors?: any[];
+    currentFiles?: Record<string, string>;
+    onFixError?: (errorMessage: string) => Promise<void>;
+    /** Optional: error message to show above messages; use with onRetry for retry button */
+    error?: string | null;
+    /** Optional: called when user clicks retry (e.g. after error) */
+    onRetry?: () => void;
+    /**
+     * Optional: custom content when there are no messages and no streaming/loading.
+     * Receives input toolbar props so you can render the composer inline (e.g. landing UI).
+     */
+    renderEmptyState?: (ctx: { inputToolbarProps: PlanModeViewInputToolbarProps }) => React.ReactNode;
+    /**
+     * Optional: when provided, scroll to bottom whenever these deps change (e.g. [streamingContent, messages.length]).
+     * Use from the parent to keep the view at bottom on each stream chunk.
+     */
+    scrollToBottomDeps?: React.DependencyList;
+    /** Optional: className applied to the content wrapper inside PlanModeView. */
+    contentClassName?: string;
+    /** Optional: className applied to the post container inside PlanModeView. */
+    postContainerClassName?: string;
+    /** When true, code blocks show copy and download actions (default: true). */
+    showCopyDownloadOnCodeBlock?: boolean;
+}
+
+/**
+ * Messages container UI for plan mode (chat / search / research).
+ * Uses ModernMessageGroupComponent for message display (same as AIAgent).
+ * Renders message list + streaming + loading state and delegates input to renderInputToolbar.
+ */
+export function MessagesContainerUI({
+    messages,
+    streamingContent,
+    currentUser,
+    onSend,
+    className,
+    scrollContainerRef,
+    planModeViewClassName,
+    planModeScrollContainerClassName,
+    hideScrollbar = false,
+    disabled = false,
+    isLoading = false,
+    onStop,
+    showDate = false,
+    showAvatar = false,
+    showMessageBubbleBorder = false,
+    useInternalScroll = false,
+    hideInputToolbar = false,
+    inputPlacement = 'bottom',
+    renderInputToolbar,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+    sandboxErrors,
+    currentFiles,
+    onFixError,
+    error = null,
+    onRetry,
+    renderEmptyState,
+    scrollToBottomDeps,
+    contentClassName,
+    postContainerClassName,
+    showCopyDownloadOnCodeBlock = true,
+}: MessagesContainerUIProps) {
+    return (
+        <div className={clsx('flex flex-col flex-1 min-h-0', className)}>
+            <PlanModeView
+                messages={messages}
+                streamingContent={streamingContent}
+                currentUser={currentUser}
+                onSend={onSend}
+                disabled={disabled}
+                isLoading={isLoading}
+                onStop={onStop}
+                showDate={showDate}
+                showAvatar={showAvatar}
+                showMessageBubbleBorder={showMessageBubbleBorder}
+                useInternalScroll={useInternalScroll}
+                scrollContainerRef={scrollContainerRef}
+                className={planModeViewClassName}
+                scrollContainerClassName={planModeScrollContainerClassName}
+                hideScrollbar={hideScrollbar}
+                hideInputToolbar={hideInputToolbar}
+                inputPlacement={inputPlacement}
+                renderInputToolbar={renderInputToolbar}
+                onOpen={onOpen}
+                onMessageClick={onMessageClick}
+                isDesktopView={isDesktopView}
+                isSmallScreen={isSmallScreen}
+                sandboxErrors={sandboxErrors}
+                currentFiles={currentFiles}
+                onFixError={onFixError}
+                error={error}
+                onRetry={onRetry}
+                renderEmptyState={renderEmptyState}
+                scrollToBottomDeps={scrollToBottomDeps}
+                contentClassName={contentClassName}
+                postContainerClassName={postContainerClassName}
+                showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+            />
+        </div>
+    );
+}
+
+export default MessagesContainerUI;