@tpitre/story-ui 2.2.0 → 2.3.1

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -0,0 +1,1874 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+// Simple markdown renderer for AI messages with icon marker support
+const renderMarkdown = (text) => {
+    // Split by double newlines to get paragraphs
+    const paragraphs = text.split(/\n\n+/);
+    // Parse inline formatting within text
+    const parseInline = (str, paragraphIndex) => {
+        const parts = [];
+        let remaining = str;
+        let keyIndex = 0;
+        while (remaining.length > 0) {
+            // Icon markers: [SUCCESS], [ERROR], [TIP], [WRENCH]
+            const iconMatch = remaining.match(/^\[(SUCCESS|ERROR|TIP|WRENCH)\]/);
+            if (iconMatch) {
+                const iconType = iconMatch[1].toLowerCase();
+                parts.push(_jsx("span", { children: StatusIcons[iconType] }, `icon-${paragraphIndex}-${keyIndex++}`));
+                remaining = remaining.slice(iconMatch[0].length);
+                continue;
+            }
+            // Bold: **text**
+            const boldMatch = remaining.match(/^\*\*(.+?)\*\*/);
+            if (boldMatch) {
+                parts.push(_jsx("strong", { children: boldMatch[1] }, `b-${paragraphIndex}-${keyIndex++}`));
+                remaining = remaining.slice(boldMatch[0].length);
+                continue;
+            }
+            // Italic: _text_
+            const italicMatch = remaining.match(/^_(.+?)_/);
+            if (italicMatch) {
+                parts.push(_jsx("em", { style: { opacity: 0.7, fontSize: '0.9em' }, children: italicMatch[1] }, `i-${paragraphIndex}-${keyIndex++}`));
+                remaining = remaining.slice(italicMatch[0].length);
+                continue;
+            }
+            // Code: `text`
+            const codeMatch = remaining.match(/^`([^`]+)`/);
+            if (codeMatch) {
+                parts.push(_jsx("code", { style: {
+                        background: 'rgba(0,0,0,0.08)',
+                        padding: '1px 5px',
+                        borderRadius: '3px',
+                        fontFamily: 'ui-monospace, monospace',
+                        fontSize: '0.88em'
+                    }, children: codeMatch[1] }, `c-${paragraphIndex}-${keyIndex++}`));
+                remaining = remaining.slice(codeMatch[0].length);
+                continue;
+            }
+            // Single newline within paragraph - convert to space or line break
+            if (remaining.startsWith('\n')) {
+                parts.push(' ');
+                remaining = remaining.slice(1);
+                continue;
+            }
+            // Regular text - consume until next special character or bracket
+            const nextSpecial = remaining.search(/[*_`\[\n]/);
+            if (nextSpecial === -1) {
+                parts.push(remaining);
+                remaining = '';
+            }
+            else if (nextSpecial === 0) {
+                // Special char that didn't match a pattern, treat as regular text
+                parts.push(remaining[0]);
+                remaining = remaining.slice(1);
+            }
+            else {
+                parts.push(remaining.slice(0, nextSpecial));
+                remaining = remaining.slice(nextSpecial);
+            }
+        }
+        return parts;
+    };
+    return (_jsx(_Fragment, { children: paragraphs.map((paragraph, index) => (_jsx("div", { style: { marginBottom: index < paragraphs.length - 1 ? '12px' : 0 }, children: parseInline(paragraph.trim(), index) }, `p-${index}`))) }));
+};
+// Inline SVG icons for status indicators (avoiding emojis)
+const StatusIcons = {
+    success: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: '#22c55e', verticalAlign: 'middle', marginRight: '6px' }, children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22,4 12,14.01 9,11.01" })] })),
+    error: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: '#ef4444', verticalAlign: 'middle', marginRight: '6px' }, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] })),
+    tip: (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: '#f59e0b', verticalAlign: 'middle', marginRight: '4px' }, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] })),
+    wrench: (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: '#6366f1', verticalAlign: 'middle', marginRight: '4px' }, children: _jsx("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) }))
+};
+// Determine the MCP API base URL.
+// Priority order:
+// 1. VITE_STORY_UI_EDGE_URL - Edge Worker URL for cloud deployments
+// 2. window.__STORY_UI_EDGE_URL__ - Runtime override for edge URL
+// 3. VITE_STORY_UI_PORT - Custom port for localhost
+// 4. window.__STORY_UI_PORT__ - Legacy port override
+// 5. window.STORY_UI_MCP_PORT - MCP port override
+// 6. Default to localhost:4001
+const getApiBaseUrl = () => {
+    // Check for Edge Worker URL (cloud deployment)
+    const edgeUrl = import.meta.env?.VITE_STORY_UI_EDGE_URL;
+    if (edgeUrl)
+        return edgeUrl.replace(/\/$/, ''); // Remove trailing slash
+    // Check for window override for edge URL (support both naming conventions)
+    const windowEdgeUrl = window.__STORY_UI_EDGE_URL__ || window.STORY_UI_EDGE_URL;
+    if (windowEdgeUrl)
+        return windowEdgeUrl.replace(/\/$/, '');
+    // Check for Vite port environment variable
+    const vitePort = import.meta.env?.VITE_STORY_UI_PORT;
+    if (vitePort)
+        return `http://localhost:${vitePort}`;
+    // Check for window override (legacy support)
+    const windowOverride = window.__STORY_UI_PORT__;
+    if (windowOverride)
+        return `http://localhost:${windowOverride}`;
+    // Check for MCP port override set by stories file
+    const mcpOverride = window.STORY_UI_MCP_PORT;
+    if (mcpOverride)
+        return `http://localhost:${mcpOverride}`;
+    return 'http://localhost:4001';
+};
+// Helper to check if we're using Edge mode (cloud deployment)
+const isEdgeMode = () => {
+    const baseUrl = getApiBaseUrl();
+    return baseUrl.includes('workers.dev') || baseUrl.includes('pages.dev') ||
+        baseUrl.startsWith('https://') && !baseUrl.includes('localhost');
+};
+// Legacy helper for backwards compatibility
+const getApiPort = () => {
+    const baseUrl = getApiBaseUrl();
+    const match = baseUrl.match(/:(\d+)$/);
+    return match ? match[1] : '4001';
+};
+// Get connection display text
+const getConnectionDisplayText = () => {
+    const baseUrl = getApiBaseUrl();
+    if (isEdgeMode()) {
+        // Extract domain for Edge URL
+        try {
+            const url = new URL(baseUrl);
+            return `Edge Worker (${url.hostname})`;
+        }
+        catch {
+            return 'Edge Worker';
+        }
+    }
+    return `MCP server (port ${getApiPort()})`;
+};
+const API_BASE = getApiBaseUrl();
+const MCP_API = `${API_BASE}/story-ui/generate`;
+const MCP_STREAM_API = `${API_BASE}/story-ui/generate-stream`;
+const STORIES_API = `${API_BASE}/story-ui/stories`;
+const DELETE_API_BASE = `${API_BASE}/story-ui/stories`;
+const PROVIDERS_API = `${API_BASE}/story-ui/providers`;
+// Considerations API URL - includes storybookOrigin param for Edge mode
+const getConsiderationsApiUrl = () => {
+    const baseUrl = `${API_BASE}/story-ui/considerations`;
+    if (isEdgeMode()) {
+        // In Edge mode, tell the Edge Worker where to fetch considerations from
+        // The Storybook origin is where the panel is running (window.location.origin)
+        const storybookOrigin = window.location.origin;
+        return `${baseUrl}?storybookOrigin=${encodeURIComponent(storybookOrigin)}`;
+    }
+    return baseUrl;
+};
+const CONSIDERATIONS_API = getConsiderationsApiUrl();
+const STORAGE_KEY = `story-ui-chats-${window.location.port}`;
+const MAX_RECENT_CHATS = 20;
+// Feature flag: Enable streaming mode (can be toggled for testing)
+const USE_STREAMING = true;
+// Load from localStorage
+const loadChats = () => {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (!stored)
+            return [];
+        const chats = JSON.parse(stored);
+        // Sort by lastUpdated and limit
+        return chats
+            .sort((a, b) => b.lastUpdated - a.lastUpdated)
+            .slice(0, MAX_RECENT_CHATS);
+    }
+    catch (e) {
+        console.error('Failed to load chats:', e);
+        return [];
+    }
+};
+// Save to localStorage
+const saveChats = (chats) => {
+    try {
+        // Keep only the most recent chats
+        const toSave = chats
+            .sort((a, b) => b.lastUpdated - a.lastUpdated)
+            .slice(0, MAX_RECENT_CHATS);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+    }
+    catch (e) {
+        console.error('Failed to save chats:', e);
+    }
+};
+// Sync with memory stories from backend
+const syncWithActualStories = async () => {
+    try {
+        const response = await fetch(STORIES_API);
+        if (!response.ok) {
+            console.error('Failed to fetch stories from backend');
+            return loadChats();
+        }
+        // Check if response is JSON
+        const contentType = response.headers.get('content-type');
+        if (!contentType || !contentType.includes('application/json')) {
+            console.error('Server returned non-JSON response, likely server not running or wrong port');
+            return loadChats();
+        }
+        const data = await response.json();
+        const memoryStories = data.stories || [];
+        // Load existing chats
+        const existingChats = loadChats();
+        // Create a map for quick lookup - using chat.id as the primary key
+        const chatMap = new Map();
+        existingChats.forEach(chat => {
+            chatMap.set(chat.id, chat);
+        });
+        // Update or add memory stories
+        memoryStories.forEach((story) => {
+            const storyId = story.storyId || story.fileName;
+            // Look for existing chat by ID or by matching fileName
+            let existingChat = chatMap.get(storyId);
+            // If not found by ID, search by fileName
+            if (!existingChat && story.fileName) {
+                for (const [id, chat] of chatMap.entries()) {
+                    if (chat.fileName === story.fileName) {
+                        existingChat = chat;
+                        break;
+                    }
+                }
+            }
+            if (existingChat) {
+                // Update existing chat with latest info
+                existingChat.title = story.title || existingChat.title;
+                existingChat.fileName = story.fileName || existingChat.fileName;
+                existingChat.lastUpdated = new Date(story.updatedAt || story.createdAt).getTime();
+            }
+            else {
+                // Create new chat from memory story
+                const newChat = {
+                    id: storyId,
+                    title: story.title || story.fileName,
+                    fileName: story.fileName,
+                    conversation: [{
+                            role: 'user',
+                            content: story.prompt || `Generate ${story.title}`
+                        }, {
+                            role: 'ai',
+                            content: `✅ Created story: "${story.title}"\n\nThis story was recovered from memory. You can continue updating it or view it in Storybook.`
+                        }],
+                    lastUpdated: new Date(story.updatedAt || story.createdAt).getTime()
+                };
+                chatMap.set(storyId, newChat);
+            }
+        });
+        // Convert back to array and save
+        const syncedChats = Array.from(chatMap.values());
+        saveChats(syncedChats);
+        return syncedChats;
+    }
+    catch (error) {
+        console.error('Error syncing with backend:', error);
+        return loadChats();
+    }
+};
+// Delete story and chat
+const deleteStoryAndChat = async (chatId) => {
+    try {
+        // Remove .stories.tsx extension if present to get the actual story ID
+        const storyId = chatId.replace(/\.stories\.tsx$/, '');
+        console.log(`Attempting to delete story: chatId="${chatId}", storyId="${storyId}"`);
+        let serverDeleteSucceeded = false;
+        // First try to delete from backend
+        try {
+            const response = await fetch(`${DELETE_API_BASE}/${storyId}`, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json' }
+            });
+            // 404 means story doesn't exist on server - that's OK, we can still clean up localStorage
+            if (response.ok || response.status === 404) {
+                serverDeleteSucceeded = true;
+                if (response.status === 404) {
+                    console.log('Story not found on server (may have been a failed generation), cleaning up localStorage');
+                }
+            }
+            else {
+                console.warn(`Backend delete returned ${response.status}, trying legacy endpoint`);
+            }
+        }
+        catch (fetchError) {
+            console.warn('Backend delete request failed, trying legacy endpoint:', fetchError);
+        }
+        // Try legacy endpoint as fallback only if primary didn't succeed
+        if (!serverDeleteSucceeded) {
+            try {
+                const legacyResponse = await fetch(`${API_BASE}/story-ui/delete`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        chatId: storyId,
+                        storyId: storyId
+                    })
+                });
+                // 404 is also OK for legacy endpoint
+                if (legacyResponse.ok || legacyResponse.status === 404) {
+                    serverDeleteSucceeded = true;
+                }
+                else {
+                    console.warn('Legacy delete endpoint also returned non-success status');
+                }
+            }
+            catch (legacyError) {
+                console.warn('Legacy delete request failed:', legacyError);
+            }
+        }
+        // Always clean up localStorage - the chat/story data is primarily client-side
+        // Even if server delete failed, we should allow users to clean up their chat history
+        const chats = loadChats().filter(chat => chat.id !== chatId);
+        saveChats(chats);
+        console.log('Cleaned up localStorage chat entry');
+        return true;
+    }
+    catch (error) {
+        console.error('Error deleting story:', error);
+        // Still try to clean up localStorage even on error
+        try {
+            const chats = loadChats().filter(chat => chat.id !== chatId);
+            saveChats(chats);
+            console.log('Cleaned up localStorage despite error');
+            return true;
+        }
+        catch (localError) {
+            console.error('Failed to clean up localStorage:', localError);
+            return false;
+        }
+    }
+};
+// Test connection to MCP server
+const testMCPConnection = async () => {
+    try {
+        const response = await fetch(STORIES_API, {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' },
+        });
+        if (!response.ok) {
+            return { connected: false, error: `HTTP ${response.status}: ${response.statusText}` };
+        }
+        const contentType = response.headers.get('content-type');
+        if (!contentType || !contentType.includes('application/json')) {
+            return { connected: false, error: 'Server returned non-JSON response (likely wrong port or server not running)' };
+        }
+        return { connected: true };
+    }
+    catch (error) {
+        return { connected: false, error: error instanceof Error ? error.message : 'Unknown error' };
+    }
+};
+// Component styles
+const STYLES = {
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        height: '100vh',
+        overflow: 'hidden',
+        background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
+        color: '#e2e8f0',
+    },
+    // Sidebar
+    sidebar: {
+        width: '240px',
+        background: 'rgba(255, 255, 255, 0.03)',
+        borderRight: '1px solid rgba(255, 255, 255, 0.08)',
+        display: 'flex',
+        flexDirection: 'column',
+        backdropFilter: 'blur(10px)',
+        transition: 'width 0.3s ease',
+        position: 'relative',
+    },
+    sidebarCollapsed: {
+        width: '56px',
+    },
+    sidebarToggle: {
+        width: '100%',
+        padding: '8px 12px',
+        background: '#3b82f6',
+        color: 'white',
+        border: 'none',
+        borderRadius: '6px',
+        fontSize: '13px',
+        fontWeight: '500',
+        cursor: 'pointer',
+        marginBottom: '6px',
+        transition: 'all 0.2s ease',
+        boxShadow: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '6px',
+        lineHeight: '1',
+    },
+    newChatButton: {
+        width: '100%',
+        padding: '8px 12px',
+        background: '#3b82f6',
+        color: 'white',
+        border: 'none',
+        borderRadius: '6px',
+        fontSize: '13px',
+        fontWeight: '500',
+        cursor: 'pointer',
+        marginBottom: '12px',
+        transition: 'all 0.2s ease',
+        boxShadow: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '6px',
+        lineHeight: '1',
+    },
+    chatItem: {
+        padding: '8px 10px',
+        marginBottom: '4px',
+        background: 'rgba(255, 255, 255, 0.05)',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        transition: 'all 0.15s ease',
+        position: 'relative',
+        paddingRight: '32px',
+    },
+    chatItemActive: {
+        background: 'rgba(59, 130, 246, 0.15)',
+        borderLeft: '2px solid #3b82f6',
+    },
+    chatItemTitle: {
+        fontSize: '13px',
+        fontWeight: '500',
+        marginBottom: '2px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    chatItemTime: {
+        fontSize: '11px',
+        color: '#94a3b8',
+    },
+    deleteButton: {
+        position: 'absolute',
+        right: '8px',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        background: 'rgba(239, 68, 68, 0.8)',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        padding: '4px 8px',
+        fontSize: '12px',
+        cursor: 'pointer',
+        opacity: 0,
+        transition: 'opacity 0.2s ease',
+    },
+    // Main content
+    mainContent: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+    },
+    chatHeader: {
+        padding: '12px 16px',
+        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
+        background: 'rgba(255, 255, 255, 0.03)',
+        backdropFilter: 'blur(10px)',
+    },
+    chatContainer: {
+        flex: 1,
+        padding: '16px',
+        overflowY: 'auto',
+        scrollBehavior: 'smooth',
+    },
+    emptyState: {
+        color: '#94a3b8',
+        textAlign: 'center',
+        marginTop: '60px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+    },
+    emptyStateTitle: {
+        fontSize: '16px',
+        fontWeight: '500',
+        marginBottom: '8px',
+        color: '#cbd5e1',
+    },
+    emptyStateSubtitle: {
+        fontSize: '13px',
+        color: '#64748b',
+    },
+    // Message bubbles
+    messageContainer: {
+        display: 'flex',
+        marginBottom: '10px',
+    },
+    userMessage: {
+        background: '#3b82f6',
+        color: '#ffffff',
+        borderRadius: '16px 16px 4px 16px',
+        padding: '10px 14px',
+        maxWidth: '85%',
+        marginLeft: 'auto',
+        fontSize: '14px',
+        lineHeight: '1.5',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        boxShadow: 'none',
+        wordWrap: 'break-word',
+    },
+    aiMessage: {
+        background: 'rgba(255, 255, 255, 0.95)',
+        color: '#1f2937',
+        borderRadius: '16px 16px 16px 4px',
+        padding: '10px 14px',
+        maxWidth: '85%',
+        fontSize: '14px',
+        lineHeight: '1.5',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08)',
+        wordWrap: 'break-word',
+        whiteSpace: 'pre-wrap',
+    },
+    loadingMessage: {
+        background: 'rgba(255, 255, 255, 0.9)',
+        color: '#6b7280',
+        borderRadius: '16px 16px 16px 4px',
+        padding: '10px 14px',
+        fontSize: '14px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+    },
+    // Input form
+    inputForm: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        margin: '0 16px 16px 16px',
+        padding: '10px',
+        background: 'rgba(255, 255, 255, 0.03)',
+        borderRadius: '10px',
+        border: '1px solid rgba(255, 255, 255, 0.08)',
+        backdropFilter: 'blur(10px)',
+    },
+    textInput: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        flex: 1,
+        padding: '10px 14px',
+        borderRadius: '6px',
+        border: '1px solid rgba(255, 255, 255, 0.15)',
+        fontSize: '13px',
+        color: '#1f2937',
+        background: '#ffffff',
+        outline: 'none',
+        transition: 'all 0.15s ease',
+        boxSizing: 'border-box',
+    },
+    sendButton: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        padding: '10px 16px',
+        borderRadius: '6px',
+        border: 'none',
+        background: '#10b981',
+        color: '#ffffff',
+        fontSize: '13px',
+        fontWeight: '500',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '5px',
+        transition: 'all 0.15s ease',
+        boxShadow: 'none',
+    },
+    errorMessage: {
+        background: 'rgba(248, 113, 113, 0.1)',
+        color: '#f87171',
+        padding: '8px 12px',
+        borderRadius: '6px',
+        fontSize: '13px',
+        marginBottom: '10px',
+        border: '1px solid rgba(248, 113, 113, 0.2)',
+    },
+    loadingDots: {
+        display: 'inline-block',
+        animation: 'loadingDots 1.4s infinite',
+    },
+    '@keyframes loadingDots': {
+        '0%': { content: '""' },
+        '25%': { content: '"."' },
+        '50%': { content: '".."' },
+        '75%': { content: '"..."' },
+    },
+    codeBlock: {
+        background: '#1e293b',
+        padding: '10px 12px',
+        borderRadius: '6px',
+        fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+        fontSize: '12px',
+        lineHeight: '1.5',
+        overflowX: 'auto',
+        marginTop: '6px',
+        border: '1px solid rgba(255, 255, 255, 0.08)',
+    },
+    // Streaming progress styles
+    streamingContainer: {
+        background: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '16px 16px 16px 4px',
+        padding: '12px',
+        maxWidth: '85%',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08)',
+    },
+    intentPreview: {
+        background: 'rgba(59, 130, 246, 0.08)',
+        borderRadius: '8px',
+        padding: '10px',
+        marginBottom: '10px',
+        border: '1px solid rgba(59, 130, 246, 0.15)',
+    },
+    intentTitle: {
+        fontSize: '13px',
+        fontWeight: '600',
+        color: '#1e40af',
+        marginBottom: '6px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '5px',
+    },
+    intentStrategy: {
+        fontSize: '12px',
+        color: '#4b5563',
+        marginBottom: '4px',
+    },
+    intentComponents: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '4px',
+        marginTop: '6px',
+    },
+    componentTag: {
+        background: 'rgba(59, 130, 246, 0.12)',
+        color: '#1d4ed8',
+        fontSize: '10px',
+        padding: '2px 6px',
+        borderRadius: '10px',
+        fontWeight: '500',
+    },
+    progressBar: {
+        background: 'rgba(0, 0, 0, 0.08)',
+        borderRadius: '3px',
+        height: '4px',
+        marginTop: '10px',
+        marginBottom: '6px',
+        overflow: 'hidden',
+    },
+    progressFill: {
+        background: '#3b82f6',
+        height: '100%',
+        borderRadius: '3px',
+        transition: 'width 0.3s ease',
+    },
+    progressPhase: {
+        fontSize: '11px',
+        color: '#6b7280',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '5px',
+    },
+    phaseIcon: {
+        fontSize: '12px',
+    },
+    validationBox: {
+        marginTop: '8px',
+        padding: '8px',
+        borderRadius: '6px',
+        fontSize: '11px',
+    },
+    validationSuccess: {
+        background: 'rgba(16, 185, 129, 0.08)',
+        border: '1px solid rgba(16, 185, 129, 0.15)',
+        color: '#047857',
+    },
+    validationWarning: {
+        background: 'rgba(245, 158, 11, 0.08)',
+        border: '1px solid rgba(245, 158, 11, 0.15)',
+        color: '#b45309',
+    },
+    validationError: {
+        background: 'rgba(239, 68, 68, 0.08)',
+        border: '1px solid rgba(239, 68, 68, 0.15)',
+        color: '#dc2626',
+    },
+    retryBadge: {
+        background: 'rgba(245, 158, 11, 0.12)',
+        color: '#b45309',
+        fontSize: '10px',
+        padding: '2px 8px',
+        borderRadius: '10px',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '3px',
+        marginTop: '6px',
+    },
+    completionSummary: {
+        marginTop: '10px',
+        paddingTop: '10px',
+        borderTop: '1px solid rgba(0, 0, 0, 0.08)',
+    },
+    summaryTitle: {
+        fontSize: '14px',
+        fontWeight: '600',
+        color: '#111827',
+        marginBottom: '6px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+    },
+    summaryDescription: {
+        fontSize: '12px',
+        color: '#4b5563',
+        lineHeight: '1.5',
+    },
+    metricsRow: {
+        display: 'flex',
+        gap: '12px',
+        marginTop: '8px',
+        fontSize: '10px',
+        color: '#6b7280',
+    },
+    metric: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '3px',
+    },
+    // Code viewer styles for generated stories
+    codeViewerContainer: {
+        marginTop: '12px',
+        borderTop: '1px solid rgba(0, 0, 0, 0.08)',
+        paddingTop: '12px',
+    },
+    codeViewerToggle: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '8px 12px',
+        background: 'rgba(59, 130, 246, 0.08)',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        border: '1px solid rgba(59, 130, 246, 0.15)',
+        transition: 'all 0.2s ease',
+        fontSize: '13px',
+        fontWeight: '500',
+        color: '#1e40af',
+    },
+    codeViewerToggleHover: {
+        background: 'rgba(59, 130, 246, 0.15)',
+    },
+    codeViewerContent: {
+        marginTop: '10px',
+        background: '#1e293b',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        border: '1px solid rgba(255, 255, 255, 0.08)',
+    },
+    codeViewerHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '8px 12px',
+        background: 'rgba(0, 0, 0, 0.2)',
+        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
+    },
+    codeViewerFileName: {
+        fontSize: '12px',
+        color: '#94a3b8',
+        fontFamily: 'ui-monospace, monospace',
+    },
+    copyButton: {
+        padding: '4px 10px',
+        fontSize: '11px',
+        fontWeight: '500',
+        color: '#e2e8f0',
+        background: 'rgba(59, 130, 246, 0.3)',
+        border: '1px solid rgba(59, 130, 246, 0.5)',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+    },
+    copyButtonSuccess: {
+        background: 'rgba(34, 197, 94, 0.3)',
+        borderColor: 'rgba(34, 197, 94, 0.5)',
+        color: '#86efac',
+    },
+    codeViewerPre: {
+        margin: 0,
+        padding: '12px',
+        fontSize: '11px',
+        lineHeight: '1.5',
+        fontFamily: 'ui-monospace, Consolas, Monaco, monospace',
+        color: '#e2e8f0',
+        overflowX: 'auto',
+        maxHeight: '400px',
+        overflowY: 'auto',
+    },
+    // Image upload styles
+    uploadButton: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '36px',
+        height: '36px',
+        borderRadius: '6px',
+        border: '1px solid rgba(255, 255, 255, 0.15)',
+        background: 'rgba(255, 255, 255, 0.08)',
+        color: '#e2e8f0',
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        flexShrink: 0,
+    },
+    uploadButtonHover: {
+        background: 'rgba(59, 130, 246, 0.2)',
+        borderColor: 'rgba(59, 130, 246, 0.5)',
+    },
+    imagePreviewContainer: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '6px',
+        padding: '8px 12px',
+        background: 'rgba(255, 255, 255, 0.03)',
+        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
+        margin: '0 16px',
+        borderRadius: '6px 6px 0 0',
+    },
+    imagePreviewItem: {
+        position: 'relative',
+        width: '56px',
+        height: '56px',
+        borderRadius: '6px',
+        overflow: 'hidden',
+        border: '1px solid rgba(255, 255, 255, 0.15)',
+        background: '#1e293b',
+    },
+    imagePreviewImg: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+    },
+    imageRemoveButton: {
+        position: 'absolute',
+        top: '2px',
+        right: '2px',
+        width: '18px',
+        height: '18px',
+        borderRadius: '50%',
+        background: 'rgba(239, 68, 68, 0.9)',
+        color: 'white',
+        border: 'none',
+        fontSize: '12px',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        lineHeight: 1,
+    },
+    imagePreviewLabel: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        fontSize: '12px',
+        color: '#94a3b8',
+        marginRight: 'auto',
+    },
+    userMessageImages: {
+        display: 'flex',
+        gap: '6px',
+        marginTop: '6px',
+        flexWrap: 'wrap',
+    },
+    userMessageImage: {
+        width: '40px',
+        height: '40px',
+        borderRadius: '6px',
+        objectFit: 'cover',
+        border: '1px solid rgba(255, 255, 255, 0.25)',
+    },
+    // Drag and drop overlay
+    dropOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(59, 130, 246, 0.12)',
+        border: '2px dashed rgba(59, 130, 246, 0.4)',
+        borderRadius: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 100,
+        backdropFilter: 'blur(3px)',
+    },
+    dropOverlayText: {
+        background: 'rgba(59, 130, 246, 0.85)',
+        color: 'white',
+        padding: '12px 24px',
+        borderRadius: '8px',
+        fontSize: '14px',
+        fontWeight: '500',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        boxShadow: '0 2px 8px rgba(59, 130, 246, 0.3)',
+    },
+};
+// Add custom style for loading animation
+const styleSheet = document.createElement('style');
+styleSheet.textContent = `
+  @keyframes loadingDots {
+    0%, 20% { content: "."; }
+    40% { content: ".."; }
+    60%, 100% { content: "..."; }
+  }
+
+  .loading-dots::after {
+    content: ".";
+    animation: loadingDots 1.4s infinite;
+  }
+`;
+document.head.appendChild(styleSheet);
+// Helper function to format timestamp
+const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1)
+        return 'just now';
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    if (diffDays < 7)
+        return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+};
+// Helper to get phase icon and text
+const getPhaseInfo = (phase) => {
+    const phases = {
+        config_loaded: { icon: '⚙️', text: 'Loading configuration' },
+        components_discovered: { icon: '🔍', text: 'Discovering components' },
+        prompt_built: { icon: '📝', text: 'Building prompt' },
+        llm_thinking: { icon: '🤔', text: 'AI is thinking' },
+        code_extracted: { icon: '📦', text: 'Extracting code' },
+        validating: { icon: '✅', text: 'Validating output' },
+        post_processing: { icon: '🔧', text: 'Processing' },
+        saving: { icon: '💾', text: 'Saving story' },
+    };
+    return phases[phase] || { icon: '⏳', text: 'Working' };
+};
+// Streaming Progress Message Component
+const StreamingProgressMessage = ({ streamingData }) => {
+    const { intent, progress, validation, retry, completion, error } = streamingData;
+    const [showCode, setShowCode] = useState(true); // Show code by default for better UX
+    const [copyStatus, setCopyStatus] = useState('idle');
+    // Handle copy to clipboard
+    const handleCopyCode = async (code) => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopyStatus('copied');
+            setTimeout(() => setCopyStatus('idle'), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+    // If completed, show completion summary
+    if (completion) {
+        return (_jsx("div", { style: STYLES.streamingContainer, children: _jsxs("div", { style: STYLES.completionSummary, children: [_jsxs("div", { style: STYLES.summaryTitle, children: [completion.success ? '✅' : '❌', " ", completion.title] }), _jsx("div", { style: STYLES.summaryDescription, children: completion.summary.description }), completion.componentsUsed.length > 0 && (_jsxs("div", { style: { marginTop: '10px' }, children: [_jsx("div", { style: { fontSize: '12px', color: '#6b7280', marginBottom: '6px' }, children: "Components used:" }), _jsx("div", { style: STYLES.intentComponents, children: completion.componentsUsed.map((comp, i) => (_jsx("span", { style: STYLES.componentTag, children: comp.name }, i))) })] })), completion.layoutChoices.length > 0 && (_jsxs("div", { style: { marginTop: '10px' }, children: [_jsx("div", { style: { fontSize: '12px', color: '#6b7280', marginBottom: '6px' }, children: "Layout:" }), _jsx("div", { style: { fontSize: '12px', color: '#4b5563' }, children: completion.layoutChoices.map(l => l.pattern).join(', ') })] })), completion.validation && !completion.validation.isValid && (_jsxs("div", { style: { ...STYLES.validationBox, ...STYLES.validationWarning }, children: ["\u26A0\uFE0F ", completion.validation.autoFixApplied ? 'Auto-fixed issues' : 'Minor issues detected'] })), completion.suggestions && completion.suggestions.length > 0 && (_jsxs("div", { style: { marginTop: '10px', fontSize: '12px', color: '#6b7280' }, children: ["\uD83D\uDCA1 ", completion.suggestions[0]] })), completion.metrics && (_jsxs("div", { style: STYLES.metricsRow, children: [_jsxs("span", { style: STYLES.metric, children: ["\u23F1\uFE0F ", (completion.metrics.totalTimeMs / 1000).toFixed(1), "s"] }), _jsxs("span", { style: STYLES.metric, children: ["\uD83D\uDD04 ", completion.metrics.llmCallsCount, " LLM calls"] })] })), completion.code && (_jsxs("div", { style: STYLES.codeViewerContainer, children: [_jsxs("div", { style: STYLES.codeViewerToggle, onClick: () => setShowCode(!showCode), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && setShowCode(!showCode), children: [_jsxs("span", { children: [showCode ? '▼' : '▶', " View Generated Code"] }), _jsx("span", { style: { fontSize: '11px', color: '#6366f1' }, children: completion.fileName })] }), showCode && (_jsxs("div", { style: STYLES.codeViewerContent, children: [_jsxs("div", { style: STYLES.codeViewerHeader, children: [_jsx("span", { style: STYLES.codeViewerFileName, children: completion.fileName }), _jsx("button", { style: {
+                                                    ...STYLES.copyButton,
+                                                    ...(copyStatus === 'copied' ? STYLES.copyButtonSuccess : {})
+                                                }, onClick: () => handleCopyCode(completion.code), children: copyStatus === 'copied' ? '✓ Copied!' : 'Copy Code' })] }), _jsx("pre", { style: STYLES.codeViewerPre, children: _jsx("code", { children: completion.code }) })] }))] }))] }) }));
+    }
+    // If error, show error
+    if (error) {
+        return (_jsx("div", { style: STYLES.streamingContainer, children: _jsxs("div", { style: { ...STYLES.validationBox, ...STYLES.validationError }, children: [_jsxs("strong", { children: ["\u274C ", error.message] }), error.details && _jsx("div", { style: { marginTop: '4px' }, children: error.details }), error.suggestion && _jsxs("div", { style: { marginTop: '8px' }, children: ["\uD83D\uDCA1 ", error.suggestion] })] }) }));
+    }
+    // Show progress
+    return (_jsxs("div", { style: STYLES.streamingContainer, children: [intent && (_jsxs("div", { style: STYLES.intentPreview, children: [_jsxs("div", { style: STYLES.intentTitle, children: [intent.requestType === 'modification' ? '✏️' : '✨', intent.requestType === 'modification' ? ' Modifying Story' : ' Creating New Story'] }), _jsx("div", { style: STYLES.intentStrategy, children: intent.strategy }), intent.detectedDesignSystem && (_jsxs("div", { style: { fontSize: '12px', color: '#6b7280' }, children: ["Design system: ", _jsx("strong", { children: intent.detectedDesignSystem })] })), intent.estimatedComponents.length > 0 && (_jsx("div", { style: STYLES.intentComponents, children: intent.estimatedComponents.map((comp, i) => (_jsx("span", { style: STYLES.componentTag, children: comp }, i))) }))] })), progress && (_jsxs(_Fragment, { children: [_jsx("div", { style: STYLES.progressBar, children: _jsx("div", { style: {
+                                ...STYLES.progressFill,
+                                width: `${(progress.step / progress.totalSteps) * 100}%`
+                            } }) }), _jsxs("div", { style: STYLES.progressPhase, children: [_jsx("span", { style: STYLES.phaseIcon, children: getPhaseInfo(progress.phase).icon }), _jsx("span", { children: progress.message || getPhaseInfo(progress.phase).text }), _jsxs("span", { style: { marginLeft: 'auto', color: '#9ca3af' }, children: [progress.step, "/", progress.totalSteps] })] })] })), retry && (_jsxs("div", { style: STYLES.retryBadge, children: ["\uD83D\uDD04 Retry ", retry.attempt, "/", retry.maxAttempts, ": ", retry.reason] })), validation && !validation.isValid && (_jsxs("div", { style: { ...STYLES.validationBox, ...STYLES.validationWarning }, children: [validation.autoFixApplied ? '🔧 Auto-fixing issues...' : '⚠️ Validation issues found', validation.errors.slice(0, 2).map((err, i) => (_jsxs("div", { style: { marginTop: '4px', fontSize: '11px' }, children: ["\u2022 ", err] }, i)))] })), !progress && !intent && (_jsx("div", { style: STYLES.progressPhase, children: _jsx("span", { className: "loading-dots", children: "Connecting" }) }))] }));
+};
+// Main component
+function StoryUIPanel() {
+    const [input, setInput] = useState('');
+    const [conversation, setConversation] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [recentChats, setRecentChats] = useState([]);
+    const [activeChatId, setActiveChatId] = useState(null);
+    const [activeTitle, setActiveTitle] = useState('');
+    const [sidebarOpen, setSidebarOpen] = useState(true);
+    const [connectionStatus, setConnectionStatus] = useState({ connected: false });
+    const [availableProviders, setAvailableProviders] = useState([]);
+    const [selectedProvider, setSelectedProvider] = useState('');
+    const [selectedModel, setSelectedModel] = useState('');
+    const [streamingState, setStreamingState] = useState(null);
+    const [attachedImages, setAttachedImages] = useState([]);
+    const [considerations, setConsiderations] = useState('');
+    const chatEndRef = useRef(null);
+    const inputRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const abortControllerRef = useRef(null);
+    // Maximum images allowed
+    const MAX_IMAGES = 4;
+    const MAX_IMAGE_SIZE_MB = 20;
+    // Helper to convert file to base64
+    const fileToBase64 = (file) => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const result = reader.result;
+                // Extract base64 data (remove data:image/...;base64, prefix)
+                const base64 = result.split(',')[1];
+                resolve(base64);
+            };
+            reader.onerror = error => reject(error);
+        });
+    };
+    // Handle file selection
+    const handleFileSelect = async (e) => {
+        const files = e.target.files;
+        if (!files)
+            return;
+        const newImages = [];
+        const errors = [];
+        for (let i = 0; i < files.length && (attachedImages.length + newImages.length) < MAX_IMAGES; i++) {
+            const file = files[i];
+            // Validate file type
+            if (!file.type.startsWith('image/')) {
+                errors.push(`${file.name}: Not an image file`);
+                continue;
+            }
+            // Validate file size
+            if (file.size > MAX_IMAGE_SIZE_MB * 1024 * 1024) {
+                errors.push(`${file.name}: File too large (max ${MAX_IMAGE_SIZE_MB}MB)`);
+                continue;
+            }
+            try {
+                const base64 = await fileToBase64(file);
+                const preview = URL.createObjectURL(file);
+                newImages.push({
+                    id: `${Date.now()}-${i}`,
+                    file,
+                    preview,
+                    base64,
+                });
+            }
+            catch (err) {
+                errors.push(`${file.name}: Failed to process`);
+            }
+        }
+        if (errors.length > 0) {
+            setError(errors.join('\n'));
+        }
+        setAttachedImages(prev => [...prev, ...newImages]);
+        // Reset file input
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+    // Remove attached image
+    const removeAttachedImage = (id) => {
+        setAttachedImages(prev => {
+            const removed = prev.find(img => img.id === id);
+            if (removed) {
+                URL.revokeObjectURL(removed.preview);
+            }
+            return prev.filter(img => img.id !== id);
+        });
+    };
+    // Clear all attached images
+    const clearAttachedImages = () => {
+        attachedImages.forEach(img => URL.revokeObjectURL(img.preview));
+        setAttachedImages([]);
+    };
+    // Drag and drop state
+    const [isDragging, setIsDragging] = useState(false);
+    // Handle drag events
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer.types.includes('Files')) {
+            setIsDragging(true);
+        }
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Only set to false if we're leaving the main container
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsDragging(false);
+        }
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback(async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        const files = Array.from(e.dataTransfer.files);
+        const imageFiles = files.filter(f => f.type.startsWith('image/'));
+        if (imageFiles.length === 0) {
+            setError('Please drop image files only');
+            return;
+        }
+        const newImages = [];
+        const errors = [];
+        for (let i = 0; i < imageFiles.length && (attachedImages.length + newImages.length) < MAX_IMAGES; i++) {
+            const file = imageFiles[i];
+            if (file.size > MAX_IMAGE_SIZE_MB * 1024 * 1024) {
+                errors.push(`${file.name}: File too large (max ${MAX_IMAGE_SIZE_MB}MB)`);
+                continue;
+            }
+            try {
+                const base64 = await fileToBase64(file);
+                const preview = URL.createObjectURL(file);
+                newImages.push({
+                    id: `${Date.now()}-${i}`,
+                    file,
+                    preview,
+                    base64,
+                });
+            }
+            catch (err) {
+                errors.push(`${file.name}: Failed to process`);
+            }
+        }
+        if (errors.length > 0) {
+            setError(errors.join('\n'));
+        }
+        setAttachedImages(prev => [...prev, ...newImages]);
+    }, [attachedImages.length, fileToBase64]);
+    // Handle clipboard paste for images
+    const handlePaste = useCallback(async (e) => {
+        const items = e.clipboardData?.items;
+        if (!items)
+            return;
+        const imageItems = [];
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].type.startsWith('image/')) {
+                imageItems.push(items[i]);
+            }
+        }
+        if (imageItems.length === 0)
+            return;
+        // Prevent default text paste behavior when pasting images
+        e.preventDefault();
+        if (attachedImages.length >= MAX_IMAGES) {
+            setError(`Maximum ${MAX_IMAGES} images allowed`);
+            return;
+        }
+        const newImages = [];
+        const errors = [];
+        for (let i = 0; i < imageItems.length && (attachedImages.length + newImages.length) < MAX_IMAGES; i++) {
+            const item = imageItems[i];
+            const file = item.getAsFile();
+            if (!file) {
+                errors.push('Failed to get image from clipboard');
+                continue;
+            }
+            if (file.size > MAX_IMAGE_SIZE_MB * 1024 * 1024) {
+                errors.push(`Pasted image too large (max ${MAX_IMAGE_SIZE_MB}MB)`);
+                continue;
+            }
+            try {
+                const base64 = await fileToBase64(file);
+                const preview = URL.createObjectURL(file);
+                // Create a meaningful name for pasted images
+                const timestamp = new Date().toISOString().slice(11, 19).replace(/:/g, '-');
+                const renamedFile = new File([file], `pasted-image-${timestamp}.${file.type.split('/')[1] || 'png'}`, { type: file.type });
+                newImages.push({
+                    id: `paste-${Date.now()}-${i}`,
+                    file: renamedFile,
+                    preview,
+                    base64,
+                });
+            }
+            catch (err) {
+                errors.push('Failed to process pasted image');
+            }
+        }
+        if (errors.length > 0) {
+            setError(errors.join('\n'));
+        }
+        if (newImages.length > 0) {
+            setAttachedImages(prev => [...prev, ...newImages]);
+            // Clear any existing error on successful paste
+            if (errors.length === 0) {
+                setError(null);
+            }
+        }
+    }, [attachedImages.length, fileToBase64]);
+    // Load and sync chats on mount
+    useEffect(() => {
+        const initializeChats = async () => {
+            // Test connection first
+            const connectionTest = await testMCPConnection();
+            setConnectionStatus(connectionTest);
+            if (connectionTest.connected) {
+                // Fetch available providers
+                try {
+                    const providersRes = await fetch(PROVIDERS_API);
+                    if (providersRes.ok) {
+                        const providersData = await providersRes.json();
+                        setAvailableProviders(providersData.providers.filter(p => p.configured));
+                        // Set initial selection from server defaults
+                        if (providersData.current) {
+                            setSelectedProvider(providersData.current.provider.toLowerCase());
+                            setSelectedModel(providersData.current.model);
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error('Failed to fetch providers:', e);
+                }
+                // Fetch design system considerations for environment parity
+                // This ensures production gets the same considerations as local development
+                try {
+                    const considerationsRes = await fetch(CONSIDERATIONS_API);
+                    if (considerationsRes.ok) {
+                        const considerationsData = await considerationsRes.json();
+                        if (considerationsData.hasConsiderations && considerationsData.considerations) {
+                            setConsiderations(considerationsData.considerations);
+                            console.log(`Loaded considerations from ${considerationsData.source}`);
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error('Failed to fetch considerations:', e);
+                }
+                const syncedChats = await syncWithActualStories();
+                const sortedChats = syncedChats.sort((a, b) => b.lastUpdated - a.lastUpdated).slice(0, MAX_RECENT_CHATS);
+                setRecentChats(sortedChats);
+                if (sortedChats.length > 0) {
+                    setConversation(sortedChats[0].conversation);
+                    setActiveChatId(sortedChats[0].id);
+                    setActiveTitle(sortedChats[0].title);
+                }
+            }
+            else {
+                // Load from local storage if server is not available
+                const localChats = loadChats();
+                setRecentChats(localChats);
+            }
+        };
+        initializeChats();
+    }, []);
+    // Scroll to bottom on new message
+    useEffect(() => {
+        if (chatEndRef.current) {
+            chatEndRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [conversation, loading]);
+    // Helper function for non-streaming fallback
+    const handleSendNonStreaming = async (userInput, newConversation) => {
+        const res = await fetch(MCP_API, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                prompt: userInput,
+                conversation: newConversation,
+                fileName: activeChatId || undefined,
+                provider: selectedProvider || undefined,
+                model: selectedModel || undefined,
+                considerations: considerations || undefined,
+            }),
+        });
+        const contentType = res.headers.get('content-type');
+        if (!contentType || !contentType.includes('application/json')) {
+            const text = await res.text();
+            throw new Error(`Server returned non-JSON response. Response: ${text.substring(0, 200)}...`);
+        }
+        const data = await res.json();
+        if (!res.ok || !data.success)
+            throw new Error(data.error || 'Story generation failed');
+        return data;
+    };
+    // Helper function to build a conversational response from completion data
+    // Uses special markers [SUCCESS], [ERROR], [TIP], [WRENCH] that renderMarkdown converts to icons
+    // Track whether we've shown the refresh hint in this session
+    const hasShownRefreshHint = useRef(false);
+    const buildConversationalResponse = (completion, isUpdate) => {
+        const parts = [];
+        const statusMarker = completion.success ? '[SUCCESS]' : '[ERROR]';
+        // Lead with the result - more conversational
+        if (isUpdate) {
+            parts.push(`${statusMarker} **Updated: "${completion.title}"**`);
+        }
+        else {
+            parts.push(`${statusMarker} **Created: "${completion.title}"**`);
+        }
+        // Build component insights with reasons when available
+        const componentCount = completion.componentsUsed?.length || 0;
+        if (componentCount > 0) {
+            const componentList = completion.componentsUsed.slice(0, 5);
+            // Check if we have meaningful reasons (not just "Used in composition")
+            const componentsWithReasons = componentList.filter(c => c.reason && c.reason !== 'Used in composition');
+            if (componentsWithReasons.length > 0) {
+                // Show components with their reasons
+                const insights = componentsWithReasons
+                    .slice(0, 3)
+                    .map(c => `\`${c.name}\` - ${c.reason?.toLowerCase()}`)
+                    .join(', ');
+                parts.push(`\nUsed ${insights}${componentCount > 3 ? ` and ${componentCount - 3} more` : ''}.`);
+            }
+            else {
+                // Fallback to simple list
+                const names = componentList.map(c => `\`${c.name}\``).join(', ');
+                parts.push(`\nBuilt with ${names}${componentCount > 5 ? '...' : ''}.`);
+            }
+        }
+        // Add layout decisions with educational context
+        if (completion.layoutChoices && completion.layoutChoices.length > 0) {
+            const primaryLayout = completion.layoutChoices[0];
+            parts.push(`\n\n**Layout:** ${primaryLayout.pattern} - ${primaryLayout.reason.charAt(0).toLowerCase()}${primaryLayout.reason.slice(1)}.`);
+        }
+        // Add style choices only if they add value
+        if (completion.styleChoices && completion.styleChoices.length > 0) {
+            const notableStyles = completion.styleChoices.filter(s => s.reason && s.reason !== 'Semantic color from design system');
+            if (notableStyles.length > 0) {
+                const styleInfo = notableStyles[0];
+                parts.push(` Applied \`${styleInfo.value}\` for ${styleInfo.reason?.toLowerCase() || 'visual consistency'}.`);
+            }
+        }
+        // Add validation fixes notice
+        if (completion.validation?.autoFixApplied) {
+            parts.push(`\n\n[WRENCH] **Auto-fixed:** Minor syntax issues were automatically corrected.`);
+        }
+        // Add suggestions only if meaningful
+        if (completion.suggestions && completion.suggestions.length > 0) {
+            const suggestion = completion.suggestions[0];
+            // Only show if it's not the generic "review the generated code" message
+            if (!suggestion.toLowerCase().includes('review the generated code')) {
+                parts.push(`\n\n[TIP] **Tip:** ${suggestion}`);
+            }
+        }
+        // Show refresh hint only once per session for new stories (local mode only)
+        // In Edge mode, stories are stored in Durable Objects, not on filesystem
+        if (!isUpdate && !hasShownRefreshHint.current) {
+            if (isEdgeMode()) {
+                parts.push(`\n\n_Story saved to cloud. View code in chat history above._`);
+            }
+            else {
+                parts.push(`\n\n_Refresh Storybook (Cmd/Ctrl + R) to see new stories in the sidebar._`);
+            }
+            hasShownRefreshHint.current = true;
+        }
+        // Add metrics in a subtle way (if available)
+        if (completion.metrics?.totalTimeMs) {
+            const seconds = (completion.metrics.totalTimeMs / 1000).toFixed(1);
+            parts.push(`\n\n_${seconds}s_`);
+        }
+        return parts.join('');
+    };
+    // Helper function to finalize conversation after streaming completes
+    const finalizeStreamingConversation = useCallback((newConversation, completion, userInput) => {
+        // Build conversational response using rich completion data
+        const isUpdate = completion.summary.action === 'updated';
+        const responseMessage = buildConversationalResponse(completion, isUpdate);
+        const aiMsg = { role: 'ai', content: responseMessage };
+        const updatedConversation = [...newConversation, aiMsg];
+        setConversation(updatedConversation);
+        // Update chat session
+        const isExistingSession = activeChatId && conversation.length > 0;
+        if (isExistingSession && activeChatId) {
+            const updatedSession = {
+                id: activeChatId,
+                title: activeTitle,
+                fileName: completion.fileName || activeChatId,
+                conversation: updatedConversation,
+                lastUpdated: Date.now(),
+            };
+            const chats = loadChats();
+            const chatIndex = chats.findIndex(c => c.id === activeChatId);
+            if (chatIndex !== -1) {
+                chats[chatIndex] = updatedSession;
+            }
+            saveChats(chats);
+            setRecentChats(chats);
+        }
+        else {
+            const chatId = completion.storyId || completion.fileName || Date.now().toString();
+            const chatTitle = completion.title || userInput;
+            setActiveChatId(chatId);
+            setActiveTitle(chatTitle);
+            const newSession = {
+                id: chatId,
+                title: chatTitle,
+                fileName: completion.fileName || '',
+                conversation: updatedConversation,
+                lastUpdated: Date.now(),
+            };
+            const chats = loadChats().filter(c => c.id !== chatId);
+            chats.unshift(newSession);
+            if (chats.length > MAX_RECENT_CHATS) {
+                chats.splice(MAX_RECENT_CHATS);
+            }
+            saveChats(chats);
+            setRecentChats(chats);
+        }
+    }, [activeChatId, activeTitle, conversation.length]);
+    const handleSend = async (e) => {
+        if (e)
+            e.preventDefault();
+        // Allow sending with either text or images
+        if (!input.trim() && attachedImages.length === 0)
+            return;
+        // Use input text or default vision prompt if only images
+        const userInput = input.trim() || (attachedImages.length > 0 ? 'Create a component that matches this design' : '');
+        setError(null);
+        setLoading(true);
+        setStreamingState(null);
+        // Test connection before sending
+        const connectionTest = await testMCPConnection();
+        setConnectionStatus(connectionTest);
+        if (!connectionTest.connected) {
+            setError(`Cannot connect to MCP server: ${connectionTest.error || 'Server not running'}`);
+            setLoading(false);
+            return;
+        }
+        // Capture images before clearing
+        const imagesToSend = [...attachedImages];
+        const hasImages = imagesToSend.length > 0;
+        // Create user message with images
+        const userMessage = {
+            role: 'user',
+            content: userInput,
+            attachedImages: hasImages ? imagesToSend : undefined
+        };
+        const newConversation = [...conversation, userMessage];
+        setConversation(newConversation);
+        setInput('');
+        clearAttachedImages();
+        // Use streaming if enabled
+        if (USE_STREAMING) {
+            try {
+                // Cancel any existing request
+                if (abortControllerRef.current) {
+                    abortControllerRef.current.abort();
+                }
+                abortControllerRef.current = new AbortController();
+                // Initialize streaming state
+                setStreamingState({});
+                // Prepare images for API request
+                const imagePayload = hasImages
+                    ? imagesToSend.map(img => ({
+                        type: 'base64',
+                        data: img.base64,
+                        mediaType: img.file.type,
+                    }))
+                    : undefined;
+                const response = await fetch(MCP_STREAM_API, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        prompt: userInput,
+                        conversation: newConversation,
+                        fileName: activeChatId || undefined,
+                        isUpdate: activeChatId && conversation.length > 0,
+                        originalTitle: activeTitle || undefined,
+                        storyId: activeChatId || undefined,
+                        images: imagePayload,
+                        visionMode: hasImages ? 'screenshot_to_story' : undefined,
+                        provider: selectedProvider || undefined,
+                        model: selectedModel || undefined,
+                        considerations: considerations || undefined,
+                    }),
+                    signal: abortControllerRef.current.signal,
+                });
+                if (!response.ok) {
+                    throw new Error(`Streaming request failed: ${response.status}`);
+                }
+                const reader = response.body?.getReader();
+                if (!reader) {
+                    throw new Error('No response body');
+                }
+                const decoder = new TextDecoder();
+                let buffer = '';
+                let completionData = null;
+                let errorData = null;
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                        break;
+                    buffer += decoder.decode(value, { stream: true });
+                    // Parse SSE events from buffer
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop() || ''; // Keep incomplete line in buffer
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const event = JSON.parse(line.slice(6));
+                                // Update streaming state based on event type
+                                switch (event.type) {
+                                    case 'intent':
+                                        setStreamingState(prev => ({ ...prev, intent: event.data }));
+                                        break;
+                                    case 'progress':
+                                        setStreamingState(prev => ({ ...prev, progress: event.data }));
+                                        break;
+                                    case 'validation':
+                                        setStreamingState(prev => ({ ...prev, validation: event.data }));
+                                        break;
+                                    case 'retry':
+                                        setStreamingState(prev => ({ ...prev, retry: event.data }));
+                                        break;
+                                    case 'completion':
+                                        completionData = event.data;
+                                        setStreamingState(prev => ({ ...prev, completion: event.data }));
+                                        break;
+                                    case 'error':
+                                        errorData = event.data;
+                                        setStreamingState(prev => ({ ...prev, error: event.data }));
+                                        break;
+                                }
+                            }
+                            catch (parseError) {
+                                console.warn('Failed to parse SSE event:', line, parseError);
+                            }
+                        }
+                    }
+                }
+                // Handle completion or error
+                if (completionData) {
+                    finalizeStreamingConversation(newConversation, completionData, userInput);
+                }
+                else if (errorData) {
+                    setError(errorData.message);
+                    const errorConversation = [...newConversation, { role: 'ai', content: `Error: ${errorData.message}\n\n${errorData.suggestion || ''}` }];
+                    setConversation(errorConversation);
+                }
+            }
+            catch (err) {
+                if (err.name === 'AbortError') {
+                    console.log('Request aborted');
+                    return;
+                }
+                // Fall back to non-streaming on error
+                console.warn('Streaming failed, falling back to non-streaming:', err);
+                setStreamingState(null);
+                try {
+                    const data = await handleSendNonStreaming(userInput, newConversation);
+                    // Process non-streaming response (same as before)
+                    let responseMessage;
+                    const statusIcon = data.validation?.hasWarnings ? (data.validation.errors?.length > 0 ? '🔧' : '⚠️') : '✅';
+                    // Build conversational response for fallback
+                    if (data.isUpdate) {
+                        responseMessage = `${statusIcon} **Updated: "${data.title}"**\n\nI've made the requested changes to your component. You can view the updated version in Storybook.\n\n_Check the Docs tab to see both the rendered component and its code._`;
+                    }
+                    else {
+                        responseMessage = `${statusIcon} **Created: "${data.title}"**\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup.\n\n💡 **Note**: If you don't see the story immediately, you may need to refresh your Storybook page (Cmd/Ctrl + R).`;
+                    }
+                    const aiMsg = { role: 'ai', content: responseMessage };
+                    const updatedConversation = [...newConversation, aiMsg];
+                    setConversation(updatedConversation);
+                    // Update chat session
+                    const isUpdate = activeChatId && conversation.length > 0;
+                    if (isUpdate && activeChatId) {
+                        const updatedSession = {
+                            id: activeChatId,
+                            title: activeTitle,
+                            fileName: data.fileName || activeChatId,
+                            conversation: updatedConversation,
+                            lastUpdated: Date.now(),
+                        };
+                        const chats = loadChats();
+                        const chatIndex = chats.findIndex(c => c.id === activeChatId);
+                        if (chatIndex !== -1)
+                            chats[chatIndex] = updatedSession;
+                        saveChats(chats);
+                        setRecentChats(chats);
+                    }
+                    else {
+                        const chatId = data.storyId || data.fileName || Date.now().toString();
+                        setActiveChatId(chatId);
+                        setActiveTitle(data.title || userInput);
+                        const newSession = {
+                            id: chatId,
+                            title: data.title || userInput,
+                            fileName: data.fileName || '',
+                            conversation: updatedConversation,
+                            lastUpdated: Date.now(),
+                        };
+                        const chats = loadChats().filter(c => c.id !== chatId);
+                        chats.unshift(newSession);
+                        if (chats.length > MAX_RECENT_CHATS)
+                            chats.splice(MAX_RECENT_CHATS);
+                        saveChats(chats);
+                        setRecentChats(chats);
+                    }
+                }
+                catch (fallbackErr) {
+                    const errorMessage = fallbackErr instanceof Error ? fallbackErr.message : 'Unknown error';
+                    setError(errorMessage);
+                    const errorConversation = [...newConversation, { role: 'ai', content: `Error: ${errorMessage}` }];
+                    setConversation(errorConversation);
+                }
+            }
+            finally {
+                setLoading(false);
+                setStreamingState(null);
+                abortControllerRef.current = null;
+            }
+        }
+        else {
+            // Non-streaming mode (original implementation)
+            try {
+                const data = await handleSendNonStreaming(userInput, newConversation);
+                let responseMessage;
+                const statusIcon = data.validation?.hasWarnings ? (data.validation.errors?.length > 0 ? '🔧' : '⚠️') : '✅';
+                // Build conversational response for non-streaming mode
+                if (data.isUpdate) {
+                    responseMessage = `${statusIcon} **Updated: "${data.title}"**\n\nI've made the requested changes to your component. You can view the updated version in Storybook.\n\n_Check the Docs tab to see both the rendered component and its code._`;
+                }
+                else {
+                    responseMessage = `${statusIcon} **Created: "${data.title}"**\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup.\n\n💡 **Note**: If you don't see the story immediately, you may need to refresh your Storybook page (Cmd/Ctrl + R).`;
+                }
+                const aiMsg = { role: 'ai', content: responseMessage };
+                const updatedConversation = [...newConversation, aiMsg];
+                setConversation(updatedConversation);
+                const isUpdate = activeChatId && conversation.length > 0;
+                if (isUpdate && activeChatId) {
+                    const updatedSession = {
+                        id: activeChatId,
+                        title: activeTitle,
+                        fileName: data.fileName || activeChatId,
+                        conversation: updatedConversation,
+                        lastUpdated: Date.now(),
+                    };
+                    const chats = loadChats();
+                    const chatIndex = chats.findIndex(c => c.id === activeChatId);
+                    if (chatIndex !== -1)
+                        chats[chatIndex] = updatedSession;
+                    saveChats(chats);
+                    setRecentChats(chats);
+                }
+                else {
+                    const chatId = data.storyId || data.fileName || Date.now().toString();
+                    setActiveChatId(chatId);
+                    setActiveTitle(data.title || userInput);
+                    const newSession = {
+                        id: chatId,
+                        title: data.title || userInput,
+                        fileName: data.fileName || '',
+                        conversation: updatedConversation,
+                        lastUpdated: Date.now(),
+                    };
+                    const chats = loadChats().filter(c => c.id !== chatId);
+                    chats.unshift(newSession);
+                    if (chats.length > MAX_RECENT_CHATS)
+                        chats.splice(MAX_RECENT_CHATS);
+                    saveChats(chats);
+                    setRecentChats(chats);
+                }
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+                setError(errorMessage);
+                const errorConversation = [...newConversation, { role: 'ai', content: `Error: ${errorMessage}` }];
+                setConversation(errorConversation);
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+    };
+    const handleSelectChat = (chat) => {
+        setConversation(chat.conversation);
+        setActiveChatId(chat.id);
+        setActiveTitle(chat.title);
+    };
+    const handleNewChat = () => {
+        setConversation([]);
+        setActiveChatId(null);
+        setActiveTitle('');
+    };
+    const handleDeleteChat = async (chatId, e) => {
+        e.stopPropagation(); // Prevent selecting the chat
+        if (confirm('Delete this story and chat? This action cannot be undone.')) {
+            const success = await deleteStoryAndChat(chatId);
+            if (success) {
+                // Update local state
+                const updatedChats = recentChats.filter(chat => chat.id !== chatId);
+                setRecentChats(updatedChats);
+                // If we deleted the active chat, switch to another or clear
+                if (activeChatId === chatId) {
+                    if (updatedChats.length > 0) {
+                        setConversation(updatedChats[0].conversation);
+                        setActiveChatId(updatedChats[0].id);
+                        setActiveTitle(updatedChats[0].title);
+                    }
+                    else {
+                        handleNewChat();
+                    }
+                }
+            }
+            else {
+                alert('Failed to delete story. Please try again.');
+            }
+        }
+    };
+    return (_jsxs("div", { style: STYLES.container, children: [_jsxs("div", { style: {
+                    ...STYLES.sidebar,
+                    ...(sidebarOpen ? {} : STYLES.sidebarCollapsed),
+                }, children: [sidebarOpen && (_jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '16px' }, children: [_jsxs("button", { onClick: () => setSidebarOpen(false), style: STYLES.sidebarToggle, title: "Collapse sidebar", onMouseEnter: (e) => {
+                                    e.currentTarget.style.transform = 'translateY(-1px)';
+                                    e.currentTarget.style.boxShadow = '0 4px 16px rgba(59, 130, 246, 0.4)';
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.transform = 'translateY(0)';
+                                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.3)';
+                                }, children: [_jsx("span", { style: { lineHeight: '0.5', display: 'inline-block', alignItems: 'center', width: '10px', height: '10px' }, children: "\u2630" }), _jsx("span", { children: "Chats" })] }), _jsxs("button", { onClick: handleNewChat, style: STYLES.newChatButton, onMouseEnter: (e) => {
+                                    e.currentTarget.style.transform = 'translateY(-1px)';
+                                    e.currentTarget.style.boxShadow = '0 4px 16px rgba(59, 130, 246, 0.4)';
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.transform = 'translateY(0)';
+                                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.2)';
+                                }, children: [_jsx("span", { style: { lineHeight: '0.5', display: 'inline-block', alignItems: 'center', width: '10px', height: '10px' }, children: "+" }), _jsx("span", { children: "New Chat" })] }), recentChats.length > 0 && (_jsx("div", { style: {
+                                    color: '#64748b',
+                                    fontSize: '12px',
+                                    marginBottom: '8px',
+                                    fontWeight: '500',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                }, children: "Recent Chats" })), recentChats.map(chat => (_jsxs("div", { onClick: () => handleSelectChat(chat), style: {
+                                    ...STYLES.chatItem,
+                                    ...(activeChatId === chat.id ? STYLES.chatItemActive : {}),
+                                }, onMouseEnter: (e) => {
+                                    if (activeChatId !== chat.id) {
+                                        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.12)';
+                                    }
+                                    const deleteBtn = e.currentTarget.querySelector('.delete-btn');
+                                    if (deleteBtn)
+                                        deleteBtn.style.opacity = '1';
+                                }, onMouseLeave: (e) => {
+                                    if (activeChatId !== chat.id) {
+                                        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)';
+                                    }
+                                    const deleteBtn = e.currentTarget.querySelector('.delete-btn');
+                                    if (deleteBtn)
+                                        deleteBtn.style.opacity = '0';
+                                }, children: [_jsx("div", { style: STYLES.chatItemTitle, children: chat.title }), _jsx("div", { style: STYLES.chatItemTime, children: formatTime(chat.lastUpdated) }), _jsx("button", { className: "delete-btn", onClick: (e) => handleDeleteChat(chat.id, e), style: STYLES.deleteButton, title: "Delete chat", children: "\u2715" })] }, chat.id)))] })), !sidebarOpen && (_jsx("div", { style: { padding: '8px', display: 'flex', justifyContent: 'center' }, children: _jsx("button", { onClick: () => setSidebarOpen(true), style: {
+                                ...STYLES.sidebarToggle,
+                                width: '38px',
+                                height: '38px',
+                                padding: '0',
+                                fontSize: '16px',
+                                borderRadius: '8px',
+                            }, title: "Expand sidebar", onMouseEnter: (e) => {
+                                e.currentTarget.style.transform = 'scale(1.05)';
+                                e.currentTarget.style.background = '#2563eb';
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.transform = 'scale(1)';
+                                e.currentTarget.style.background = '#3b82f6';
+                            }, children: _jsx("span", { style: { lineHeight: '0.4', display: 'inline-block', height: '10px' }, children: "\u2630" }) }) }))] }), _jsxs("div", { style: { ...STYLES.mainContent, position: 'relative' }, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && (_jsx("div", { style: STYLES.dropOverlay, children: _jsxs("div", { style: STYLES.dropOverlayText, children: [_jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }), "Drop images here"] }) })), _jsxs("div", { style: STYLES.chatHeader, children: [_jsx("h1", { style: {
+                                    fontSize: '24px',
+                                    margin: 0,
+                                    fontWeight: '600',
+                                    background: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
+                                    WebkitBackgroundClip: 'text',
+                                    WebkitTextFillColor: 'transparent',
+                                    display: 'inline-block'
+                                }, children: "Story UI" }), _jsx("p", { style: { fontSize: '14px', margin: '4px 0 0 0', color: '#94a3b8' }, children: "Generate Storybook stories with AI" }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '8px',
+                                    marginTop: '8px',
+                                    fontSize: '12px'
+                                }, children: [_jsx("div", { style: {
+                                            width: '8px',
+                                            height: '8px',
+                                            borderRadius: '50%',
+                                            backgroundColor: connectionStatus.connected ? '#10b981' : '#f87171'
+                                        } }), _jsx("span", { style: { color: connectionStatus.connected ? '#10b981' : '#f87171' }, children: connectionStatus.connected
+                                            ? `Connected to ${getConnectionDisplayText()}`
+                                            : `Disconnected: ${connectionStatus.error || 'Server not running'}` })] }), connectionStatus.connected && availableProviders.length > 0 && (_jsxs("div", { style: {
+                                    display: 'flex',
+                                    gap: '12px',
+                                    marginTop: '12px',
+                                    flexWrap: 'wrap'
+                                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx("label", { style: { fontSize: '12px', color: '#94a3b8' }, children: "Provider:" }), _jsx("select", { value: selectedProvider, onChange: (e) => {
+                                                    const newProvider = e.target.value;
+                                                    setSelectedProvider(newProvider);
+                                                    // Reset model to first available for new provider
+                                                    const provider = availableProviders.find(p => p.type === newProvider);
+                                                    if (provider && provider.models.length > 0) {
+                                                        setSelectedModel(provider.models[0]);
+                                                    }
+                                                }, style: {
+                                                    background: '#1e293b',
+                                                    border: '1px solid #334155',
+                                                    borderRadius: '6px',
+                                                    color: '#e2e8f0',
+                                                    padding: '4px 8px',
+                                                    fontSize: '12px',
+                                                    cursor: 'pointer'
+                                                }, children: availableProviders.map(p => (_jsx("option", { value: p.type, children: p.name }, p.type))) })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx("label", { style: { fontSize: '12px', color: '#94a3b8' }, children: "Model:" }), _jsx("select", { value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), style: {
+                                                    background: '#1e293b',
+                                                    border: '1px solid #334155',
+                                                    borderRadius: '6px',
+                                                    color: '#e2e8f0',
+                                                    padding: '4px 8px',
+                                                    fontSize: '12px',
+                                                    cursor: 'pointer',
+                                                    maxWidth: '200px'
+                                                }, children: availableProviders
+                                                    .find(p => p.type === selectedProvider)
+                                                    ?.models.map(model => (_jsx("option", { value: model, children: model }, model))) })] })] }))] }), _jsxs("div", { style: STYLES.chatContainer, children: [error && (_jsx("div", { style: STYLES.errorMessage, children: error })), conversation.length === 0 && !loading && (_jsxs("div", { style: STYLES.emptyState, children: [_jsx("div", { style: STYLES.emptyStateTitle, children: "Start a new conversation" }), _jsx("div", { style: STYLES.emptyStateSubtitle, children: "Describe the UI component you'd like to create" })] })), conversation.map((msg, i) => (_jsx("div", { style: STYLES.messageContainer, children: _jsxs("div", { style: msg.role === 'user' ? STYLES.userMessage : STYLES.aiMessage, children: [msg.role === 'ai' ? renderMarkdown(msg.content) : msg.content, msg.role === 'user' && msg.attachedImages && msg.attachedImages.length > 0 && (_jsx("div", { style: STYLES.userMessageImages, children: msg.attachedImages.map((img) => (_jsx("img", { src: img.preview, alt: "attached", style: STYLES.userMessageImage }, img.id))) }))] }) }, i))), loading && (_jsx("div", { style: STYLES.messageContainer, children: streamingState ? (_jsx(StreamingProgressMessage, { streamingData: streamingState })) : (_jsxs("div", { style: STYLES.loadingMessage, children: [_jsx("span", { children: "Generating story" }), _jsx("span", { className: "loading-dots" })] })) })), _jsx("div", { ref: chatEndRef })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: 'none' }, onChange: handleFileSelect }), attachedImages.length > 0 && (_jsxs("div", { style: STYLES.imagePreviewContainer, children: [_jsxs("span", { style: STYLES.imagePreviewLabel, children: [_jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }), attachedImages.length, " image", attachedImages.length > 1 ? 's' : '', " attached"] }), attachedImages.map((img) => (_jsxs("div", { style: STYLES.imagePreviewItem, children: [_jsx("img", { src: img.preview, alt: "preview", style: STYLES.imagePreviewImg }), _jsx("button", { type: "button", style: STYLES.imageRemoveButton, onClick: () => removeAttachedImage(img.id), title: "Remove image", children: "\u00D7" })] }, img.id)))] })), _jsxs("form", { onSubmit: handleSend, style: {
+                            ...STYLES.inputForm,
+                            ...(attachedImages.length > 0 ? {
+                                marginTop: 0,
+                                borderTopLeftRadius: 0,
+                                borderTopRightRadius: 0,
+                            } : {})
+                        }, children: [_jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: loading || attachedImages.length >= MAX_IMAGES, style: {
+                                    ...STYLES.uploadButton,
+                                    ...(attachedImages.length >= MAX_IMAGES ? {
+                                        opacity: 0.5,
+                                        cursor: 'not-allowed',
+                                    } : {})
+                                }, title: attachedImages.length >= MAX_IMAGES
+                                    ? `Maximum ${MAX_IMAGES} images`
+                                    : 'Attach images (screenshots, designs)', onMouseEnter: (e) => {
+                                    if (attachedImages.length < MAX_IMAGES && !loading) {
+                                        e.currentTarget.style.background = 'rgba(59, 130, 246, 0.2)';
+                                        e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)';
+                                    }
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
+                                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)';
+                                }, children: _jsx("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }) }), _jsx("input", { ref: inputRef, type: "text", value: input, onChange: e => setInput(e.target.value), onPaste: handlePaste, placeholder: attachedImages.length > 0
+                                    ? "Describe what to create from these images..."
+                                    : "Describe a UI component...", style: STYLES.textInput, onFocus: (e) => {
+                                    e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)';
+                                    e.currentTarget.style.boxShadow = '0 0 0 3px rgba(59, 130, 246, 0.1)';
+                                }, onBlur: (e) => {
+                                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)';
+                                    e.currentTarget.style.boxShadow = 'none';
+                                } }), _jsxs("button", { type: "submit", disabled: loading || (!input.trim() && attachedImages.length === 0), style: {
+                                    ...STYLES.sendButton,
+                                    ...(loading || (!input.trim() && attachedImages.length === 0) ? {
+                                        opacity: 0.5,
+                                        cursor: 'not-allowed',
+                                        background: '#6b7280',
+                                        boxShadow: 'none'
+                                    } : {})
+                                }, onMouseEnter: (e) => {
+                                    if (!loading && (input.trim() || attachedImages.length > 0)) {
+                                        e.currentTarget.style.transform = 'scale(1.05)';
+                                        e.currentTarget.style.boxShadow = '0 4px 16px rgba(16, 185, 129, 0.4)';
+                                    }
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.transform = 'scale(1)';
+                                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(16, 185, 129, 0.3)';
+                                }, children: [_jsx("span", { children: "Send" }), _jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })] })] })] })] }));
+}
+export default StoryUIPanel;
+export { StoryUIPanel };