wwtv127 · December 30, 2025 01:55
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        :root {
            --r1-orange: #ff4e00;
            --bg-black: #050505;
            --card-bg: rgba(255, 255, 255, 0.04);
            --border: rgba(255, 255, 255, 0.12);
            --text-main: #f0f0f0;
            --text-dim: #777;
            --glass: rgba(10, 10, 10, 0.8);
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html, body {
            margin: 0;
            padding: 0;
            width: 240px;
            height: 282px;
            background-color: var(--bg-black);
            color: var(--text-main);
            font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
            overflow: hidden;
            position: fixed;
        }

        /* Subtle Scanline Effect */
        body::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                        linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
            background-size: 100% 2px, 3px 100%;
            pointer-events: none;
            z-index: 1000;
        }

        #app-container {
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 282px;
            position: relative;
            z-index: 1;
        }

        header {
            height: 40px;
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border);
            background: var(--glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .header-title {
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 1px;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .header-title::before {
            content: '';
            width: 3px;
            height: 12px;
            background: var(--r1-orange);
        }

        .header-actions {
            display: flex;
            gap: 6px;
        }

        #chat-window {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            scroll-behavior: smooth;
        }

        #chat-window::-webkit-scrollbar { display: none; }

        .msg-wrap {
            display: flex;
            flex-direction: column;
            max-width: 92%;
            animation: emerge 0.25s cubic-bezier(0.1, 0.9, 0.2, 1);
        }

        @keyframes emerge {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-wrap { align-self: flex-end; align-items: flex-end; }
        .ai-wrap { align-self: flex-start; align-items: flex-start; }

        .bubble {
            padding: 8px 10px;
            border-radius: 12px;
            font-size: 11px;
            line-height: 1.45;
            letter-spacing: -0.1px;
            word-break: break-word;
        }

        .user-bubble {
            background: var(--r1-orange);
            color: white;
            border-bottom-right-radius: 2px;
            box-shadow: 0 2px 8px rgba(255, 78, 0, 0.2);
        }

        .ai-bubble {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-bottom-left-radius: 2px;
        }

        /* HTML Preview Button */
        .preview-btn {
            margin-top: 6px;
            background: rgba(255, 78, 0, 0.1);
            border: 1px solid var(--r1-orange);
            color: var(--r1-orange);
            font-size: 9px;
            font-weight: 800;
            padding: 7px 12px;
            border-radius: 8px;
            cursor: pointer;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
            align-self: flex-start;
            transition: background 0.2s;
        }

        .preview-btn:active {
            background: rgba(255, 78, 0, 0.3);
        }

        /* Overlays */
        #history-overlay, #viewer-overlay {
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            height: calc(100% - 40px);
            background: rgba(5, 5, 5, 1);
            z-index: 100;
            display: none;
            flex-direction: column;
        }

        #viewer-overlay { 
            top: 0; 
            height: 100%; 
            z-index: 5000; 
            background: #000;
        }

        .viewer-header {
            height: 40px;
            background: #000;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .viewer-back {
            font-size: 10px;
            font-weight: 800;
            color: var(--r1-orange);
            display: flex;
            align-items: center;
            gap: 6px;
            text-transform: uppercase;
        }

        #viewer-frame {
            flex: 1;
            border: none;
            background: #fff;
            width: 100%;
        }

        .history-header {
            font-size: 9px;
            font-weight: 800;
            color: var(--text-dim);
            margin: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .history-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            margin: 0 12px 6px 12px;
            padding: 2px 10px;
            height: 34px;
        }

        .history-text {
            flex: 1;
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .delete-btn { color: #ff3b30; padding: 5px; opacity: 0.6; }

        #input-deck {
            height: 50px;
            background: #000;
            padding: 0 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-top: 1px solid var(--border);
        }

        .btn-round {
            width: 28px;
            height: 28px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
        }

        #user-input {
            flex: 1;
            height: 32px;
            background: #111;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: white;
            font-size: 12px;
            padding: 0 10px;
            outline: none;
        }

        #send-btn {
            background: var(--r1-orange);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loader {
            display: flex;
            gap: 4px;
            padding: 10px;
        }
        .loader div {
            width: 5px; height: 5px; background: var(--r1-orange); border-radius: 50%;
            animation: bounce 0.6s infinite alternate;
        }
        .loader div:nth-child(2) { animation-delay: 0.2s; }
        .loader div:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes bounce { 
            from { transform: translateY(0); opacity: 0.4; } 
            to { transform: translateY(-5px); opacity: 1; } 
        }
    </style>
 </head>
 <body>

    <div id="app-container">
        <!-- Viewer Overlay (Isolated from Chat DOM) -->
        <div id="viewer-overlay">
            <div class="viewer-header" id="close-viewer-btn">
                <div class="viewer-back">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="15 18 9 12 15 6"></polyline></svg>
                    BACK TO SYSTEM
                </div>
            </div>
            <iframe id="viewer-frame" sandbox="allow-scripts allow-popups allow-forms allow-modals"></iframe>
        </div>

        <header>
            <div class="header-title">R1 CHAT</div>
            <div class="header-actions">
                <div class="btn-round" id="new-chat-btn">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                </div>
                <div class="btn-round" id="history-toggle">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
            </div>
        </header>

        <div id="history-overlay">
            <div class="history-header">Index / Archive</div>
            <div id="history-list"></div>
        </div>

        <div id="chat-window"></div>

        <div id="input-deck">
            <input type="text" id="user-input" placeholder="Enter prompt..." autocomplete="off">
            <button id="send-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
            </button>
        </div>
    </div>

    <script>
        const chatWindow = document.getElementById('chat-window');
        const userInput = document.getElementById('user-input');
        const sendBtn = document.getElementById('send-btn');
        const historyToggle = document.getElementById('history-toggle');
        const historyOverlay = document.getElementById('history-overlay');
        const historyList = document.getElementById('history-list');
        const newChatBtn = document.getElementById('new-chat-btn');
        const viewerOverlay = document.getElementById('viewer-overlay');
        const viewerFrame = document.getElementById('viewer-frame');
        const closeViewerBtn = document.getElementById('close-viewer-btn');

        let allChats = []; 
        let currentChatId = null;
        let activeBlobUrl = null;

        function startNewChat() {
            currentChatId = Date.now();
            const newChat = { id: currentChatId, title: "New Session", messages: [] };
            allChats.unshift(newChat);
            renderCurrentChat();
            historyOverlay.style.display = 'none';
            addMessage("Neural link active. Context tracking initialized.", 'ai', false);
        }

        startNewChat();

        // New Launcher Logic: Creates a Blob URL on demand
        function launchCode(code) {
            if (activeBlobUrl) URL.revokeObjectURL(activeBlobUrl);
            
            const blob = new Blob([code], { type: 'text/html' });
            activeBlobUrl = URL.createObjectURL(blob);
            
            viewerFrame.src = activeBlobUrl;
            viewerOverlay.style.display = 'flex';
        }

        function closeViewer() {
            viewerOverlay.style.display = 'none';
            viewerFrame.src = 'about:blank';
            if (activeBlobUrl) {
                URL.revokeObjectURL(activeBlobUrl);
                activeBlobUrl = null;
            }
        }

        closeViewerBtn.onclick = closeViewer;

        historyToggle.addEventListener('click', () => {
            const isVisible = historyOverlay.style.display === 'flex';
            if (!isVisible) updateHistoryList();
            historyOverlay.style.display = isVisible ? 'none' : 'flex';
        });

        newChatBtn.addEventListener('click', startNewChat);

        async function sendMessage() {
            const text = userInput.value.trim();
            if (!text) return;

            const currentChat = allChats.find(c => c.id === currentChatId);
            if (currentChat.messages.length === 0) {
                currentChat.title = text.substring(0, 22) + (text.length > 22 ? '..' : '');
            }

            addMessage(text, 'user');
            userInput.value = '';
            
            const loader = document.createElement('div');
            loader.className = 'loader';
            loader.innerHTML = '<div></div><div></div><div></div>';
            chatWindow.appendChild(loader);
            scrollToBottom();

            const context = currentChat.messages.slice(-6).map(m => `${m.sender}: ${m.text}`).join('\n');
            const fullPrompt = context ? `History:\n${context}\n\nUser: ${text}` : text;

            try {
                const response = await fetch(`https://text.pollinations.ai/${encodeURIComponent(fullPrompt)}`);
                loader.remove();
                if (!response.ok) throw new Error();
                const aiText = await response.text();
                addMessage(aiText, 'ai');
            } catch (e) {
                loader.innerHTML = '<span style="color:var(--r1-orange); font-size:9px;">LINK_ERROR</span>';
            }
        }

        function addMessage(text, sender, save = true) {
            const wrap = document.createElement('div');
            wrap.className = `msg-wrap ${sender}-wrap`;
            
            // Regex to find HTML block
            const htmlMatch = text.match(/```html([\s\S]*?)```/);
            // Remove code block from text bubble content
            const cleanText = text.replace(/```html[\s\S]*?```/g, '').trim();
            
            if (cleanText) {
                const bubble = document.createElement('div');
                bubble.className = `${sender}-bubble bubble`;
                bubble.innerText = cleanText;
                wrap.appendChild(bubble);
            }

            if (htmlMatch && htmlMatch[1]) {
                const code = htmlMatch[1].trim();
                const btn = document.createElement('button');
                btn.className = 'preview-btn';
                btn.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>LAUNCH COMPONENT`;
                
                // Store the code in a closure, never adding it to the UI DOM
                btn.onclick = () => launchCode(code);
                wrap.appendChild(btn);
            }

            chatWindow.appendChild(wrap);
            
            if (save) {
                const chat = allChats.find(c => c.id === currentChatId);
                if (chat) chat.messages.push({ text, sender });
            }
            scrollToBottom();
        }

        function renderCurrentChat() {
            chatWindow.innerHTML = '';
            const chat = allChats.find(c => c.id === currentChatId);
            if (chat) {
                chat.messages.forEach(m => addMessage(m.text, m.sender, false));
            }
            scrollToBottom();
        }

        function deleteChat(id, event) {
            event.stopPropagation();
            allChats = allChats.filter(c => c.id !== id);
            if (currentChatId === id) {
                if (allChats.length > 0) {
                    currentChatId = allChats[0].id;
                    renderCurrentChat();
                } else {
                    startNewChat();
                }
            }
            updateHistoryList();
        }

        function updateHistoryList() {
            historyList.innerHTML = '';
            allChats.forEach(chat => {
                const item = document.createElement('div');
                item.className = 'history-item';
                const textDiv = document.createElement('div');
                textDiv.className = 'history-text';
                textDiv.innerText = chat.title || "Untitled";
                textDiv.onclick = () => {
                    currentChatId = chat.id;
                    renderCurrentChat();
                    historyOverlay.style.display = 'none';
                };
                const delBtn = document.createElement('div');
                delBtn.className = 'delete-btn';
                delBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18m-2 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>';
                delBtn.onclick = (e) => deleteChat(chat.id, e);
                item.appendChild(textDiv);
                item.appendChild(delBtn);
                historyList.appendChild(item);
            });
        }

        function scrollToBottom() { chatWindow.scrollTop = chatWindow.scrollHeight; }

        sendBtn.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') { sendMessage(); userInput.blur(); }
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<style>
	:root {
	--r1-orange: #ff4e00;
	--bg-black: #050505;
	--card-bg: rgba(255, 255, 255, 0.04);
	--border: rgba(255, 255, 255, 0.12);
	--text-main: #f0f0f0;
	--text-dim: #777;
	--glass: rgba(10, 10, 10, 0.8);
	}

	* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	}

	html, body {
	margin: 0;
	padding: 0;
	width: 240px;
	height: 282px;
	background-color: var(--bg-black);
	color: var(--text-main);
	font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
	overflow: hidden;
	position: fixed;
	}

	/* Subtle Scanline Effect */
	body::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
	linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
	background-size: 100% 2px, 3px 100%;
	pointer-events: none;
	z-index: 1000;
	}

	#app-container {
	display: flex;
	flex-direction: column;
	width: 240px;
	height: 282px;
	position: relative;
	z-index: 1;
	}

	header {
	height: 40px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--border);
	background: var(--glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	}

	.header-title {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 1px;
	color: var(--text-main);
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.header-title::before {
	content: '';
	width: 3px;
	height: 12px;
	background: var(--r1-orange);
	}

	.header-actions {
	display: flex;
	gap: 6px;
	}

	#chat-window {
	flex: 1;
	overflow-y: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
	}

	#chat-window::-webkit-scrollbar { display: none; }

	.msg-wrap {
	display: flex;
	flex-direction: column;
	max-width: 92%;
	animation: emerge 0.25s cubic-bezier(0.1, 0.9, 0.2, 1);
	}

	@keyframes emerge {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
	}

	.user-wrap { align-self: flex-end; align-items: flex-end; }
	.ai-wrap { align-self: flex-start; align-items: flex-start; }

	.bubble {
	padding: 8px 10px;
	border-radius: 12px;
	font-size: 11px;
	line-height: 1.45;
	letter-spacing: -0.1px;
	word-break: break-word;
	}

	.user-bubble {
	background: var(--r1-orange);
	color: white;
	border-bottom-right-radius: 2px;
	box-shadow: 0 2px 8px rgba(255, 78, 0, 0.2);
	}

	.ai-bubble {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-bottom-left-radius: 2px;
	}

	/* HTML Preview Button */
	.preview-btn {
	margin-top: 6px;
	background: rgba(255, 78, 0, 0.1);
	border: 1px solid var(--r1-orange);
	color: var(--r1-orange);
	font-size: 9px;
	font-weight: 800;
	padding: 7px 12px;
	border-radius: 8px;
	cursor: pointer;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	transition: background 0.2s;
	}

	.preview-btn:active {
	background: rgba(255, 78, 0, 0.3);
	}

	/* Overlays */
	#history-overlay, #viewer-overlay {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	height: calc(100% - 40px);
	background: rgba(5, 5, 5, 1);
	z-index: 100;
	display: none;
	flex-direction: column;
	}

	#viewer-overlay {
	top: 0;
	height: 100%;
	z-index: 5000;
	background: #000;
	}

	.viewer-header {
	height: 40px;
	background: #000;
	display: flex;
	align-items: center;
	padding: 0 10px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	}

	.viewer-back {
	font-size: 10px;
	font-weight: 800;
	color: var(--r1-orange);
	display: flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
	}

	#viewer-frame {
	flex: 1;
	border: none;
	background: #fff;
	width: 100%;
	}

	.history-header {
	font-size: 9px;
	font-weight: 800;
	color: var(--text-dim);
	margin: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	}

	.history-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	margin: 0 12px 6px 12px;
	padding: 2px 10px;
	height: 34px;
	}

	.history-text {
	flex: 1;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.delete-btn { color: #ff3b30; padding: 5px; opacity: 0.6; }

	#input-deck {
	height: 50px;
	background: #000;
	padding: 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-top: 1px solid var(--border);
	}

	.btn-round {
	width: 28px;
	height: 28px;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	flex-shrink: 0;
	}

	#user-input {
	flex: 1;
	height: 32px;
	background: #111;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: white;
	font-size: 12px;
	padding: 0 10px;
	outline: none;
	}

	#send-btn {
	background: var(--r1-orange);
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.loader {
	display: flex;
	gap: 4px;
	padding: 10px;
	}
	.loader div {
	width: 5px; height: 5px; background: var(--r1-orange); border-radius: 50%;
	animation: bounce 0.6s infinite alternate;
	}
	.loader div:nth-child(2) { animation-delay: 0.2s; }
	.loader div:nth-child(3) { animation-delay: 0.4s; }

	@keyframes bounce {
	from { transform: translateY(0); opacity: 0.4; }
	to { transform: translateY(-5px); opacity: 1; }
	}
	</style>
	</head>
	<body>

	<div id="app-container">
	<!-- Viewer Overlay (Isolated from Chat DOM) -->
	<div id="viewer-overlay">
	<div class="viewer-header" id="close-viewer-btn">
	<div class="viewer-back">
	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="15 18 9 12 15 6"></polyline></svg>
	BACK TO SYSTEM
	</div>
	</div>
	<iframe id="viewer-frame" sandbox="allow-scripts allow-popups allow-forms allow-modals"></iframe>
	</div>

	<header>
	<div class="header-title">R1 CHAT</div>
	<div class="header-actions">
	<div class="btn-round" id="new-chat-btn">
	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
	</div>
	<div class="btn-round" id="history-toggle">
	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
	</div>
	</div>
	</header>

	<div id="history-overlay">
	<div class="history-header">Index / Archive</div>
	<div id="history-list"></div>
	</div>

	<div id="chat-window"></div>

	<div id="input-deck">
	<input type="text" id="user-input" placeholder="Enter prompt..." autocomplete="off">
	<button id="send-btn">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
	</button>
	</div>
	</div>

	<script>
	const chatWindow = document.getElementById('chat-window');
	const userInput = document.getElementById('user-input');
	const sendBtn = document.getElementById('send-btn');
	const historyToggle = document.getElementById('history-toggle');
	const historyOverlay = document.getElementById('history-overlay');
	const historyList = document.getElementById('history-list');
	const newChatBtn = document.getElementById('new-chat-btn');
	const viewerOverlay = document.getElementById('viewer-overlay');
	const viewerFrame = document.getElementById('viewer-frame');
	const closeViewerBtn = document.getElementById('close-viewer-btn');

	let allChats = [];
	let currentChatId = null;
	let activeBlobUrl = null;

	function startNewChat() {
	currentChatId = Date.now();
	const newChat = { id: currentChatId, title: "New Session", messages: [] };
	allChats.unshift(newChat);
	renderCurrentChat();
	historyOverlay.style.display = 'none';
	addMessage("Neural link active. Context tracking initialized.", 'ai', false);
	}

	startNewChat();

	// New Launcher Logic: Creates a Blob URL on demand
	function launchCode(code) {
	if (activeBlobUrl) URL.revokeObjectURL(activeBlobUrl);

	const blob = new Blob([code], { type: 'text/html' });
	activeBlobUrl = URL.createObjectURL(blob);

	viewerFrame.src = activeBlobUrl;
	viewerOverlay.style.display = 'flex';
	}

	function closeViewer() {
	viewerOverlay.style.display = 'none';
	viewerFrame.src = 'about:blank';
	if (activeBlobUrl) {
	URL.revokeObjectURL(activeBlobUrl);
	activeBlobUrl = null;
	}
	}

	closeViewerBtn.onclick = closeViewer;

	historyToggle.addEventListener('click', () => {
	const isVisible = historyOverlay.style.display === 'flex';
	if (!isVisible) updateHistoryList();
	historyOverlay.style.display = isVisible ? 'none' : 'flex';
	});

	newChatBtn.addEventListener('click', startNewChat);

	async function sendMessage() {
	const text = userInput.value.trim();
	if (!text) return;

	const currentChat = allChats.find(c => c.id === currentChatId);
	if (currentChat.messages.length === 0) {
	currentChat.title = text.substring(0, 22) + (text.length > 22 ? '..' : '');
	}

	addMessage(text, 'user');
	userInput.value = '';

	const loader = document.createElement('div');
	loader.className = 'loader';
	loader.innerHTML = '<div></div><div></div><div></div>';
	chatWindow.appendChild(loader);
	scrollToBottom();

	const context = currentChat.messages.slice(-6).map(m => `${m.sender}: ${m.text}`).join('\n');
	const fullPrompt = context ? `History:\n${context}\n\nUser: ${text}` : text;

	try {
	const response = await fetch(`https://text.pollinations.ai/${encodeURIComponent(fullPrompt)}`);
	loader.remove();
	if (!response.ok) throw new Error();
	const aiText = await response.text();
	addMessage(aiText, 'ai');
	} catch (e) {
	loader.innerHTML = '<span style="color:var(--r1-orange); font-size:9px;">LINK_ERROR</span>';
	}
	}

	function addMessage(text, sender, save = true) {
	const wrap = document.createElement('div');
	wrap.className = `msg-wrap ${sender}-wrap`;

	// Regex to find HTML block
	const htmlMatch = text.match(/```html([\s\S]*?)```/);
	// Remove code block from text bubble content
	const cleanText = text.replace(/```html[\s\S]*?```/g, '').trim();

	if (cleanText) {
	const bubble = document.createElement('div');
	bubble.className = `${sender}-bubble bubble`;
	bubble.innerText = cleanText;
	wrap.appendChild(bubble);
	}

	if (htmlMatch && htmlMatch[1]) {
	const code = htmlMatch[1].trim();
	const btn = document.createElement('button');
	btn.className = 'preview-btn';
	btn.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>LAUNCH COMPONENT`;

	// Store the code in a closure, never adding it to the UI DOM
	btn.onclick = () => launchCode(code);
	wrap.appendChild(btn);
	}

	chatWindow.appendChild(wrap);

	if (save) {
	const chat = allChats.find(c => c.id === currentChatId);
	if (chat) chat.messages.push({ text, sender });
	}
	scrollToBottom();
	}

	function renderCurrentChat() {
	chatWindow.innerHTML = '';
	const chat = allChats.find(c => c.id === currentChatId);
	if (chat) {
	chat.messages.forEach(m => addMessage(m.text, m.sender, false));
	}
	scrollToBottom();
	}

	function deleteChat(id, event) {
	event.stopPropagation();
	allChats = allChats.filter(c => c.id !== id);
	if (currentChatId === id) {
	if (allChats.length > 0) {
	currentChatId = allChats[0].id;
	renderCurrentChat();
	} else {
	startNewChat();
	}
	}
	updateHistoryList();
	}

	function updateHistoryList() {
	historyList.innerHTML = '';
	allChats.forEach(chat => {
	const item = document.createElement('div');
	item.className = 'history-item';
	const textDiv = document.createElement('div');
	textDiv.className = 'history-text';
	textDiv.innerText = chat.title \|\| "Untitled";
	textDiv.onclick = () => {
	currentChatId = chat.id;
	renderCurrentChat();
	historyOverlay.style.display = 'none';
	};
	const delBtn = document.createElement('div');
	delBtn.className = 'delete-btn';
	delBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18m-2 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>';
	delBtn.onclick = (e) => deleteChat(chat.id, e);
	item.appendChild(textDiv);
	item.appendChild(delBtn);
	historyList.appendChild(item);
	});
	}

	function scrollToBottom() { chatWindow.scrollTop = chatWindow.scrollHeight; }

	sendBtn.addEventListener('click', sendMessage);
	userInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') { sendMessage(); userInput.blur(); }
	});
	</script>
	</body>
	</html>
No results found