@tpitre/story-ui 3.3.0 → 3.4.0

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

@@ -0,0 +1,653 @@
+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;