@tpitre/story-ui 3.4.0 → 3.4.1

package/dist/templates/production-app/src/App.js

@@ -1,653 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Story UI Production App
- *
- * A Lovable/Bolt-style interface for generating UI components
- * using AI and a user's component library.
- */
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { LivePreviewRenderer } from './LivePreviewRenderer';
-import { availableComponents } from './componentRegistry';
-// ============================================================================
-// CONSTANTS & CONFIG
-// ============================================================================
-const getServerUrl = () => {
-    if (import.meta.env.VITE_STORY_UI_SERVER) {
-        return import.meta.env.VITE_STORY_UI_SERVER;
-    }
-    return window.location.origin;
-};
-const SERVER_URL = getServerUrl();
-const THEME = {
-    bg: '#09090b',
-    bgSurface: '#18181b',
-    bgElevated: '#27272a',
-    bgHover: '#3f3f46',
-    border: '#27272a',
-    borderSubtle: '#3f3f46',
-    text: '#fafafa',
-    textMuted: '#a1a1aa',
-    textSubtle: '#71717a',
-    accent: '#3b82f6',
-    accentHover: '#2563eb',
-    accentMuted: 'rgba(59, 130, 246, 0.15)',
-    success: '#22c55e',
-    error: '#ef4444',
-    warning: '#f59e0b',
-};
-const generateId = () => Math.random().toString(36).substring(2, 15);
-// ============================================================================
-// HOOKS
-// ============================================================================
-const useLocalStorage = (key, initialValue) => {
-    const [storedValue, setStoredValue] = useState(() => {
-        try {
-            const item = window.localStorage.getItem(key);
-            return item ? JSON.parse(item) : initialValue;
-        }
-        catch {
-            return initialValue;
-        }
-    });
-    const setValue = (value) => {
-        const valueToStore = value instanceof Function ? value(storedValue) : value;
-        setStoredValue(valueToStore);
-        window.localStorage.setItem(key, JSON.stringify(valueToStore));
-    };
-    return [storedValue, setValue];
-};
-const useResizable = (initialWidth, minWidth, maxWidth) => {
-    const [width, setWidth] = useState(initialWidth);
-    const isDragging = useRef(false);
-    const startX = useRef(0);
-    const startWidth = useRef(0);
-    const startResize = useCallback((e) => {
-        isDragging.current = true;
-        startX.current = e.clientX;
-        startWidth.current = width;
-        document.body.style.cursor = 'col-resize';
-        document.body.style.userSelect = 'none';
-    }, [width]);
-    useEffect(() => {
-        const handleMouseMove = (e) => {
-            if (!isDragging.current)
-                return;
-            const delta = e.clientX - startX.current;
-            const newWidth = Math.min(Math.max(startWidth.current + delta, minWidth), maxWidth);
-            setWidth(newWidth);
-        };
-        const handleMouseUp = () => {
-            isDragging.current = false;
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [minWidth, maxWidth]);
-    return { width, startResize };
-};
-// ============================================================================
-// ICON COMPONENTS
-// ============================================================================
-const Icons = {
-    Plus: () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M8 3v10M3 8h10" }) })),
-    Trash: () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: "M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v9a1 1 0 001 1h4a1 1 0 001-1V4" }) })),
-    Send: () => (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }) })),
-    Image: () => (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] })),
-    Code: () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M16 18l6-6-6-6M8 6l-6 6 6 6" }) })),
-    Eye: () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] })),
-    Copy: () => (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })] })),
-    Sidebar: () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M9 3v18" })] })),
-    Check: () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M20 6L9 17l-5-5" }) })),
-    X: () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })),
-};
-// ============================================================================
-// SUB-COMPONENTS
-// ============================================================================
-const LoadingDots = () => (_jsx("div", { style: { display: 'flex', gap: '4px', alignItems: 'center' }, children: [0, 1, 2].map(i => (_jsx("div", { style: {
-            width: '6px',
-            height: '6px',
-            borderRadius: '50%',
-            background: THEME.accent,
-            animation: `pulse 1.4s ease-in-out ${i * 0.2}s infinite`,
-        } }, i))) }));
-const ImageUploadArea = ({ images, onImagesChange, disabled }) => {
-    const fileInputRef = useRef(null);
-    const handleFiles = useCallback((files) => {
-        Array.from(files).forEach(file => {
-            if (file.type.startsWith('image/')) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    const newImage = {
-                        id: generateId(),
-                        data: e.target?.result,
-                        type: file.type,
-                        name: file.name,
-                    };
-                    onImagesChange([...images, newImage]);
-                };
-                reader.readAsDataURL(file);
-            }
-        });
-    }, [images, onImagesChange]);
-    const removeImage = (id) => {
-        onImagesChange(images.filter(img => img.id !== id));
-    };
-    return (_jsxs("div", { style: { marginBottom: images.length > 0 ? '12px' : 0 }, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: 'none' }, onChange: (e) => e.target.files && handleFiles(e.target.files), disabled: disabled }), images.length > 0 && (_jsx("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '8px' }, children: images.map(img => (_jsxs("div", { style: {
-                        position: 'relative',
-                        width: '64px',
-                        height: '64px',
-                        borderRadius: '8px',
-                        overflow: 'hidden',
-                        border: `1px solid ${THEME.border}`,
-                    }, children: [_jsx("img", { src: img.data, alt: img.name, style: { width: '100%', height: '100%', objectFit: 'cover' } }), _jsx("button", { onClick: () => removeImage(img.id), style: {
-                                position: 'absolute',
-                                top: '2px',
-                                right: '2px',
-                                width: '18px',
-                                height: '18px',
-                                borderRadius: '50%',
-                                background: 'rgba(0,0,0,0.7)',
-                                border: 'none',
-                                color: '#fff',
-                                cursor: 'pointer',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                fontSize: '10px',
-                            }, children: _jsx(Icons.X, {}) })] }, img.id))) })), _jsxs("button", { onClick: () => fileInputRef.current?.click(), disabled: disabled, style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px',
-                    padding: '6px 10px',
-                    background: 'transparent',
-                    border: `1px dashed ${THEME.border}`,
-                    borderRadius: '6px',
-                    color: THEME.textMuted,
-                    fontSize: '12px',
-                    cursor: disabled ? 'not-allowed' : 'pointer',
-                    transition: 'all 0.2s',
-                    opacity: disabled ? 0.5 : 1,
-                }, children: [_jsx(Icons.Image, {}), _jsx("span", { children: "Add image" })] })] }));
-};
-const CodeViewer = ({ code }) => {
-    const [copied, setCopied] = useState(false);
-    const handleCopy = async () => {
-        await navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-    };
-    return (_jsxs("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
-                    padding: '8px 12px',
-                    borderBottom: `1px solid ${THEME.border}`,
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                }, children: [_jsx("span", { style: { fontSize: '12px', color: THEME.textMuted }, children: "Generated Code" }), _jsxs("button", { onClick: handleCopy, style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '4px',
-                            padding: '4px 8px',
-                            background: copied ? 'rgba(34, 197, 94, 0.2)' : 'transparent',
-                            border: `1px solid ${copied ? THEME.success : THEME.border}`,
-                            borderRadius: '4px',
-                            color: copied ? THEME.success : THEME.textMuted,
-                            fontSize: '11px',
-                            cursor: 'pointer',
-                            transition: 'all 0.2s',
-                        }, children: [copied ? _jsx(Icons.Check, {}) : _jsx(Icons.Copy, {}), copied ? 'Copied!' : 'Copy'] })] }), _jsx("pre", { style: {
-                    flex: 1,
-                    margin: 0,
-                    padding: '16px',
-                    overflow: 'auto',
-                    fontSize: '13px',
-                    lineHeight: 1.6,
-                    fontFamily: '"Fira Code", "SF Mono", Monaco, monospace',
-                    background: '#0d1117',
-                    color: '#e6edf3',
-                }, children: code })] }));
-};
-// ============================================================================
-// MAIN APP
-// ============================================================================
-const App = () => {
-    const [conversations, setConversations] = useLocalStorage('storyui_conversations', []);
-    const [activeConversationId, setActiveConversationId] = useState(null);
-    const [inputValue, setInputValue] = useState('');
-    const [isGenerating, setIsGenerating] = useState(false);
-    const [previewCode, setPreviewCode] = useState(null);
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-    const [previewTab, setPreviewTab] = useState('preview');
-    const [images, setImages] = useState([]);
-    const messagesEndRef = useRef(null);
-    const inputRef = useRef(null);
-    const { width: chatWidth, startResize } = useResizable(400, 320, 600);
-    const activeConversation = conversations.find(c => c.id === activeConversationId);
-    // Auto-scroll messages
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [activeConversation?.messages]);
-    // Initialize first conversation
-    useEffect(() => {
-        if (conversations.length > 0 && !activeConversationId) {
-            setActiveConversationId(conversations[0].id);
-            const lastMsgWithCode = [...conversations[0].messages].reverse().find(m => m.generatedCode);
-            setPreviewCode(lastMsgWithCode?.generatedCode || null);
-        }
-        else if (conversations.length === 0) {
-            createNewConversation();
-        }
-    }, [conversations.length, activeConversationId]);
-    const createNewConversation = useCallback(() => {
-        const newConversation = {
-            id: generateId(),
-            title: 'New Conversation',
-            messages: [],
-            createdAt: Date.now(),
-            updatedAt: Date.now(),
-        };
-        setConversations(prev => [newConversation, ...prev]);
-        setActiveConversationId(newConversation.id);
-        setPreviewCode(null);
-        setImages([]);
-        inputRef.current?.focus();
-    }, [setConversations]);
-    const deleteConversation = (id) => {
-        setConversations(prev => prev.filter(c => c.id !== id));
-        if (activeConversationId === id) {
-            const remaining = conversations.filter(c => c.id !== id);
-            if (remaining.length > 0) {
-                setActiveConversationId(remaining[0].id);
-            }
-            else {
-                createNewConversation();
-            }
-        }
-    };
-    const generateComponent = async (prompt, imageAttachments) => {
-        const conversationHistory = activeConversation?.messages.map(msg => ({
-            role: msg.role,
-            content: msg.role === 'assistant' && msg.generatedCode
-                ? `Generated component:\n${msg.generatedCode}`
-                : msg.content
-        })) || [];
-        const systemPrompt = `You are a UI component generator. Generate React JSX code using ONLY these available components: ${availableComponents.join(', ')}.
-
-IMPORTANT RULES:
-1. Return ONLY the JSX code - a single JSX expression that can be rendered
-2. Use ONLY the components listed above - they are from the user's component library
-3. Do NOT include imports, exports, or component definitions
-4. Generate professional, polished UI layouts
-5. Use proper props for each component based on their typical API
-
-Example response format:
-<Card>
-  <Text>Hello World</Text>
-  <Button>Click me</Button>
-</Card>
-
-Only respond with the JSX code, nothing else.`;
-        const response = await fetch(`${SERVER_URL}/story-ui/claude`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                prompt,
-                messages: conversationHistory,
-                systemPrompt,
-                maxTokens: 4096,
-                images: imageAttachments.map(img => ({
-                    type: img.type,
-                    data: img.data.split(',')[1],
-                })),
-            }),
-        });
-        if (!response.ok) {
-            const errorData = await response.json().catch(() => ({}));
-            throw new Error(errorData.error || `Server Error: ${response.status}`);
-        }
-        const data = await response.json();
-        const content = data.content?.[0]?.text || data.content || '';
-        // Clean up the response
-        let cleanCode = content.trim();
-        if (cleanCode.startsWith('```')) {
-            cleanCode = cleanCode
-                .replace(/^```(?:jsx|tsx|javascript|js)?\n?/, '')
-                .replace(/\n?```$/, '');
-        }
-        return cleanCode;
-    };
-    const sendMessage = async () => {
-        if (!inputValue.trim() || !activeConversationId || isGenerating)
-            return;
-        const userMessage = {
-            id: generateId(),
-            role: 'user',
-            content: inputValue.trim(),
-            timestamp: Date.now(),
-            images: images.length > 0 ? [...images] : undefined,
-        };
-        setConversations(prev => prev.map(conv => {
-            if (conv.id === activeConversationId) {
-                return {
-                    ...conv,
-                    messages: [...conv.messages, userMessage],
-                    updatedAt: Date.now(),
-                    title: conv.messages.length === 0 ? inputValue.trim().substring(0, 40) : conv.title,
-                };
-            }
-            return conv;
-        }));
-        const currentImages = [...images];
-        setInputValue('');
-        setImages([]);
-        setIsGenerating(true);
-        try {
-            const generatedCode = await generateComponent(inputValue.trim(), currentImages);
-            const assistantMessage = {
-                id: generateId(),
-                role: 'assistant',
-                content: 'Component generated successfully.',
-                timestamp: Date.now(),
-                generatedCode,
-            };
-            setConversations(prev => prev.map(conv => {
-                if (conv.id === activeConversationId) {
-                    return {
-                        ...conv,
-                        messages: [...conv.messages, assistantMessage],
-                        updatedAt: Date.now(),
-                    };
-                }
-                return conv;
-            }));
-            if (generatedCode) {
-                setPreviewCode(generatedCode);
-                setPreviewTab('preview');
-            }
-        }
-        catch (error) {
-            const errorMessage = {
-                id: generateId(),
-                role: 'assistant',
-                content: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
-                timestamp: Date.now(),
-            };
-            setConversations(prev => prev.map(conv => {
-                if (conv.id === activeConversationId) {
-                    return {
-                        ...conv,
-                        messages: [...conv.messages, errorMessage],
-                        updatedAt: Date.now(),
-                    };
-                }
-                return conv;
-            }));
-        }
-        finally {
-            setIsGenerating(false);
-        }
-    };
-    const handleKeyPress = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            sendMessage();
-        }
-    };
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            height: '100vh',
-            overflow: 'hidden',
-            background: THEME.bg,
-            color: THEME.text,
-            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        }, children: [_jsx("style", { children: `
-        @keyframes pulse {
-          0%, 100% { opacity: 0.4; transform: scale(0.8); }
-          50% { opacity: 1; transform: scale(1); }
-        }
-        ::-webkit-scrollbar { width: 6px; height: 6px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: ${THEME.bgElevated}; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: ${THEME.bgHover}; }
-      ` }), _jsxs("aside", { style: {
-                    width: sidebarCollapsed ? '60px' : '240px',
-                    background: THEME.bgSurface,
-                    borderRight: `1px solid ${THEME.border}`,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    transition: 'width 0.2s ease',
-                    overflow: 'hidden',
-                }, children: [_jsxs("div", { style: {
-                            padding: '16px',
-                            borderBottom: `1px solid ${THEME.border}`,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: sidebarCollapsed ? 'center' : 'space-between',
-                        }, children: [!sidebarCollapsed && (_jsx("h1", { style: {
-                                    fontSize: '16px',
-                                    fontWeight: 600,
-                                    background: `linear-gradient(135deg, ${THEME.accent}, #8b5cf6)`,
-                                    WebkitBackgroundClip: 'text',
-                                    WebkitTextFillColor: 'transparent',
-                                    letterSpacing: '-0.5px',
-                                }, children: "Story UI" })), _jsx("button", { onClick: () => setSidebarCollapsed(!sidebarCollapsed), style: {
-                                    padding: '8px',
-                                    background: 'transparent',
-                                    border: 'none',
-                                    color: THEME.textMuted,
-                                    cursor: 'pointer',
-                                    borderRadius: '6px',
-                                }, children: _jsx(Icons.Sidebar, {}) })] }), _jsx("div", { style: { padding: sidebarCollapsed ? '8px' : '12px' }, children: _jsxs("button", { onClick: createNewConversation, style: {
-                                width: '100%',
-                                padding: sidebarCollapsed ? '10px' : '10px 14px',
-                                background: THEME.accent,
-                                border: 'none',
-                                borderRadius: '8px',
-                                color: '#fff',
-                                fontSize: '13px',
-                                fontWeight: 500,
-                                cursor: 'pointer',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                gap: '8px',
-                            }, children: [_jsx(Icons.Plus, {}), !sidebarCollapsed && 'New Chat'] }) }), !sidebarCollapsed && (_jsx("div", { style: { flex: 1, overflow: 'auto', padding: '8px 12px' }, children: conversations.map(conv => (_jsxs("div", { onClick: () => {
-                                setActiveConversationId(conv.id);
-                                const lastMsgWithCode = [...conv.messages].reverse().find(m => m.generatedCode);
-                                setPreviewCode(lastMsgWithCode?.generatedCode || null);
-                            }, style: {
-                                padding: '10px 12px',
-                                marginBottom: '4px',
-                                borderRadius: '8px',
-                                cursor: 'pointer',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                background: conv.id === activeConversationId ? THEME.bgElevated : 'transparent',
-                            }, children: [_jsx("span", { style: {
-                                        fontSize: '13px',
-                                        color: conv.id === activeConversationId ? THEME.text : THEME.textMuted,
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: 'nowrap',
-                                        flex: 1,
-                                    }, children: conv.title }), _jsx("button", { onClick: (e) => {
-                                        e.stopPropagation();
-                                        deleteConversation(conv.id);
-                                    }, style: {
-                                        padding: '4px',
-                                        background: 'transparent',
-                                        border: 'none',
-                                        color: THEME.textSubtle,
-                                        cursor: 'pointer',
-                                        opacity: 0.5,
-                                    }, children: _jsx(Icons.Trash, {}) })] }, conv.id))) })), !sidebarCollapsed && (_jsx("div", { style: {
-                            padding: '12px',
-                            borderTop: `1px solid ${THEME.border}`,
-                            fontSize: '11px',
-                            color: THEME.textSubtle,
-                        }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx("div", { style: {
-                                        width: '6px',
-                                        height: '6px',
-                                        borderRadius: '50%',
-                                        background: THEME.success,
-                                    } }), _jsxs("span", { children: [availableComponents.length, " components available"] })] }) }))] }), _jsxs("div", { style: {
-                    width: `${chatWidth}px`,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    background: THEME.bg,
-                    borderRight: `1px solid ${THEME.border}`,
-                    position: 'relative',
-                }, children: [_jsxs("div", { style: { flex: 1, overflow: 'auto', padding: '16px' }, children: [activeConversation?.messages.length === 0 && (_jsxs("div", { style: {
-                                    padding: '32px 16px',
-                                    textAlign: 'center',
-                                }, children: [_jsx("h2", { style: {
-                                            fontSize: '24px',
-                                            fontWeight: 600,
-                                            marginBottom: '8px',
-                                            background: `linear-gradient(135deg, ${THEME.text}, ${THEME.textMuted})`,
-                                            WebkitBackgroundClip: 'text',
-                                            WebkitTextFillColor: 'transparent',
-                                        }, children: "Build UI Components" }), _jsx("p", { style: {
-                                            color: THEME.textMuted,
-                                            fontSize: '14px',
-                                            marginBottom: '24px',
-                                            lineHeight: 1.6,
-                                        }, children: "Describe what you want to build using your component library." }), _jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }, children: ['Create a pricing card', 'Build a dashboard', 'Design a login form'].map(suggestion => (_jsx("button", { onClick: () => setInputValue(suggestion), style: {
-                                                padding: '8px 14px',
-                                                background: THEME.bgSurface,
-                                                border: `1px solid ${THEME.border}`,
-                                                borderRadius: '20px',
-                                                color: THEME.textMuted,
-                                                fontSize: '13px',
-                                                cursor: 'pointer',
-                                            }, children: suggestion }, suggestion))) })] })), activeConversation?.messages.map(message => (_jsxs("div", { style: {
-                                    marginBottom: '16px',
-                                    padding: '14px 16px',
-                                    borderRadius: '12px',
-                                    maxWidth: '90%',
-                                    marginLeft: message.role === 'user' ? 'auto' : '0',
-                                    marginRight: message.role === 'user' ? '0' : 'auto',
-                                    background: message.role === 'user' ? THEME.bgElevated : THEME.bgSurface,
-                                    border: `1px solid ${THEME.border}`,
-                                }, children: [message.images && message.images.length > 0 && (_jsx("div", { style: { display: 'flex', gap: '8px', marginBottom: '10px', flexWrap: 'wrap' }, children: message.images.map(img => (_jsx("img", { src: img.data, alt: img.name, style: {
-                                                width: '80px',
-                                                height: '80px',
-                                                objectFit: 'cover',
-                                                borderRadius: '8px',
-                                                border: `1px solid ${THEME.border}`,
-                                            } }, img.id))) })), _jsx("div", { style: { fontSize: '14px', lineHeight: 1.6, color: THEME.text }, children: message.content }), message.generatedCode && (_jsxs("button", { onClick: () => {
-                                            setPreviewCode(message.generatedCode);
-                                            setPreviewTab('preview');
-                                        }, style: {
-                                            marginTop: '10px',
-                                            padding: '6px 12px',
-                                            background: THEME.accentMuted,
-                                            border: `1px solid ${THEME.accent}`,
-                                            borderRadius: '6px',
-                                            color: THEME.accent,
-                                            fontSize: '12px',
-                                            cursor: 'pointer',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsx(Icons.Eye, {}), "View Component"] }))] }, message.id))), isGenerating && (_jsx("div", { style: {
-                                    marginBottom: '16px',
-                                    padding: '14px 16px',
-                                    borderRadius: '12px',
-                                    maxWidth: '90%',
-                                    background: THEME.bgSurface,
-                                    border: `1px solid ${THEME.border}`,
-                                }, children: _jsx(LoadingDots, {}) })), _jsx("div", { ref: messagesEndRef })] }), _jsxs("div", { style: {
-                            padding: '16px',
-                            borderTop: `1px solid ${THEME.border}`,
-                            background: THEME.bgSurface,
-                        }, children: [_jsx(ImageUploadArea, { images: images, onImagesChange: setImages, disabled: isGenerating }), _jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'flex-end' }, children: [_jsx("textarea", { ref: inputRef, value: inputValue, onChange: e => setInputValue(e.target.value), onKeyDown: handleKeyPress, placeholder: "Describe the component you want to create...", disabled: isGenerating, style: {
-                                            flex: 1,
-                                            padding: '12px 14px',
-                                            background: THEME.bgElevated,
-                                            border: `1px solid ${THEME.border}`,
-                                            borderRadius: '10px',
-                                            color: THEME.text,
-                                            fontSize: '14px',
-                                            resize: 'none',
-                                            outline: 'none',
-                                            fontFamily: 'inherit',
-                                            minHeight: '44px',
-                                            maxHeight: '120px',
-                                        }, rows: 1 }), _jsx("button", { onClick: sendMessage, disabled: isGenerating || !inputValue.trim(), style: {
-                                            padding: '12px',
-                                            background: (isGenerating || !inputValue.trim()) ? THEME.bgElevated : THEME.accent,
-                                            border: 'none',
-                                            borderRadius: '10px',
-                                            color: (isGenerating || !inputValue.trim()) ? THEME.textSubtle : '#fff',
-                                            cursor: (isGenerating || !inputValue.trim()) ? 'not-allowed' : 'pointer',
-                                            minWidth: '44px',
-                                            height: '44px',
-                                        }, children: _jsx(Icons.Send, {}) })] })] }), _jsx("div", { onMouseDown: startResize, style: {
-                            position: 'absolute',
-                            right: 0,
-                            top: 0,
-                            bottom: 0,
-                            width: '4px',
-                            cursor: 'col-resize',
-                            background: 'transparent',
-                        } })] }), _jsxs("div", { style: {
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    background: THEME.bg,
-                    minWidth: 0,
-                }, children: [_jsxs("div", { style: {
-                            padding: '12px 16px',
-                            borderBottom: `1px solid ${THEME.border}`,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                        }, children: [_jsxs("div", { style: { display: 'flex', gap: '4px' }, children: [_jsxs("button", { onClick: () => setPreviewTab('preview'), style: {
-                                            padding: '8px 14px',
-                                            background: previewTab === 'preview' ? THEME.bgElevated : 'transparent',
-                                            border: 'none',
-                                            borderRadius: '6px',
-                                            color: previewTab === 'preview' ? THEME.text : THEME.textMuted,
-                                            fontSize: '13px',
-                                            cursor: 'pointer',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsx(Icons.Eye, {}), "Preview"] }), _jsxs("button", { onClick: () => setPreviewTab('code'), style: {
-                                            padding: '8px 14px',
-                                            background: previewTab === 'code' ? THEME.bgElevated : 'transparent',
-                                            border: 'none',
-                                            borderRadius: '6px',
-                                            color: previewTab === 'code' ? THEME.text : THEME.textMuted,
-                                            fontSize: '13px',
-                                            cursor: 'pointer',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsx(Icons.Code, {}), "Code"] })] }), previewCode && previewTab === 'preview' && (_jsx("span", { style: { fontSize: '12px', color: THEME.textMuted }, children: "Live Preview" }))] }), _jsx("div", { style: { flex: 1, overflow: 'hidden' }, children: previewCode ? (previewTab === 'preview' ? (_jsx(LivePreviewRenderer, { code: previewCode, containerStyle: { height: '100%', background: THEME.bgSurface }, onError: (err) => console.error('Preview error:', err) })) : (_jsx(CodeViewer, { code: previewCode }))) : (_jsxs("div", { style: {
-                                height: '100%',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                color: THEME.textSubtle,
-                                padding: '40px',
-                            }, children: [_jsx("div", { style: {
-                                        width: '80px',
-                                        height: '80px',
-                                        borderRadius: '20px',
-                                        background: THEME.bgSurface,
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        marginBottom: '20px',
-                                        border: `1px solid ${THEME.border}`,
-                                    }, children: _jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M3 9h18M9 21V9" })] }) }), _jsx("p", { style: { fontSize: '16px', fontWeight: 500, marginBottom: '8px', color: THEME.textMuted }, children: "Ready to Build" }), _jsx("p", { style: { fontSize: '14px', maxWidth: '260px', textAlign: 'center', lineHeight: 1.5 }, children: "Describe a component and watch it come to life" })] })) })] })] }));
-};
-export default App;