Add live web preview: code bars with copy + sandboxed iframe preview for HTML/CSS/JS

index.html

@@ -327,10 +327,11 @@
             background: #050505 !important;
             border: 1px solid var(--border) !important;
             border-left: 2px solid var(--green) !important;
-            border-radius: 6px !important;
+            border-radius: 6px 6px 0 0 !important;
             padding: 14px 16px !important;
             overflow-x: auto;
-            margin: 12px 0 !important;
+            margin: 12px 0 0 !important;
+            position: relative;
         }
 
         .msg-body pre code {
@@ -342,6 +343,115 @@
             line-height: 1.7 !important;
         }
 
+        /* Code block action bar */
+        .code-bar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: #080808;
+            border: 1px solid var(--border);
+            border-top: none;
+            border-radius: 0 0 6px 6px;
+            padding: 5px 12px;
+            margin: 0 0 12px;
+            gap: 8px;
+        }
+
+        .code-lang {
+            font-size: 10px;
+            color: var(--text-muted);
+            letter-spacing: 0.06em;
+            text-transform: uppercase;
+            font-family: var(--mono);
+        }
+
+        .code-actions { display: flex; gap: 6px; }
+
+        .code-btn {
+            background: transparent;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            color: var(--text-dim);
+            font-family: var(--mono);
+            font-size: 10px;
+            padding: 3px 9px;
+            cursor: pointer;
+            transition: all 0.15s;
+            letter-spacing: 0.04em;
+        }
+        .code-btn:hover {
+            border-color: var(--border-hi);
+            color: var(--green);
+            background: var(--green-dim);
+        }
+        .code-btn.active {
+            border-color: var(--green);
+            color: var(--green);
+            background: var(--green-dim);
+        }
+
+        /* Live preview iframe panel */
+        .preview-panel {
+            display: none;
+            border: 1px solid var(--border-hi);
+            border-top: 2px solid var(--green);
+            border-radius: 0 0 8px 8px;
+            margin: -12px 0 12px;
+            overflow: hidden;
+            background: #fff;
+            position: relative;
+        }
+        .preview-panel.open { display: block; }
+
+        .preview-topbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 5px 12px;
+            background: #0d0d0d;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .preview-url {
+            font-size: 10px;
+            color: var(--text-muted);
+            font-family: var(--mono);
+            letter-spacing: 0.03em;
+        }
+
+        .preview-resize {
+            display: flex;
+            gap: 4px;
+        }
+
+        .resize-btn {
+            background: transparent;
+            border: 1px solid var(--border);
+            border-radius: 3px;
+            color: var(--text-muted);
+            font-family: var(--mono);
+            font-size: 9px;
+            padding: 2px 7px;
+            cursor: pointer;
+            transition: all 0.15s;
+        }
+        .resize-btn:hover { color: var(--green); border-color: var(--border-hi); }
+        .resize-btn.active { color: var(--green); border-color: var(--green); background: var(--green-dim); }
+
+        .preview-frame-wrap {
+            width: 100%;
+            overflow: hidden;
+            transition: height 0.3s ease;
+        }
+
+        .preview-iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            display: block;
+            background: #fff;
+        }
+
         .msg-body blockquote {
             border-left: 2px solid var(--green);
             padding-left: 14px;
@@ -911,12 +1021,123 @@ function makeRenderer(el) {
         finish() {
             el.id = "";
             el.innerHTML = marked.parse(buf);
+            injectCodeBars(el);
             scrollBot();
             return buf;
         }
     };
 }
 
+/* ── Code bar + live preview injector ── */
+function injectCodeBars(container) {
+    const pres = container.querySelectorAll("pre");
+    pres.forEach(pre => {
+        // Avoid double-processing
+        if (pre.nextElementSibling && pre.nextElementSibling.classList.contains("code-bar")) return;
+
+        const codeEl = pre.querySelector("code");
+        const rawCode = codeEl ? codeEl.textContent : pre.textContent;
+
+        // Detect language from class (e.g. language-html)
+        const cls = codeEl ? codeEl.className : "";
+        const langMatch = cls.match(/language-(\w+)/);
+        const lang = langMatch ? langMatch[1].toLowerCase() : "";
+
+        // Determine if this is a web-previewable block
+        const isHtml = lang === "html" || lang === "svg";
+        const isPreviewable = isHtml ||
+            (!lang && rawCode.trim().startsWith("<") && rawCode.includes("</"));
+
+        // Build action bar
+        const bar = document.createElement("div");
+        bar.className = "code-bar";
+
+        let previewBtn = "";
+        if (isPreviewable || lang === "css" || lang === "js" || lang === "javascript") {
+            previewBtn = `<button class="code-btn preview-toggle" title="Render preview">▶ Preview</button>`;
+        }
+
+        bar.innerHTML = `
+            <span class="code-lang">${lang || "code"}</span>
+            <div class="code-actions">
+                ${previewBtn}
+                <button class="code-btn copy-btn" title="Copy">Copy</button>
+            </div>
+        `;
+
+        pre.after(bar);
+
+        // Copy button
+        const copyBtn = bar.querySelector(".copy-btn");
+        copyBtn.addEventListener("click", () => {
+            navigator.clipboard.writeText(rawCode).then(() => {
+                copyBtn.textContent = "Copied!";
+                copyBtn.classList.add("active");
+                setTimeout(() => { copyBtn.textContent = "Copy"; copyBtn.classList.remove("active"); }, 1800);
+            });
+        });
+
+        // Preview toggle
+        const pvBtn = bar.querySelector(".preview-toggle");
+        if (!pvBtn) return;
+
+        // Build preview panel (hidden by default)
+        const panel = document.createElement("div");
+        panel.className = "preview-panel";
+
+        // Compose the HTML to render
+        let renderSrc = rawCode;
+        if (lang === "css") {
+            renderSrc = `<!DOCTYPE html><html><head><style>${rawCode}</style></head><body><p style='font-family:sans-serif;padding:20px;color:#333'>CSS preview — add HTML to see layout</p></body></html>`;
+        } else if (lang === "js" || lang === "javascript") {
+            renderSrc = `<!DOCTYPE html><html><body><script>${rawCode}<\/script></body></html>`;
+        }
+
+        panel.innerHTML = `
+            <div class="preview-topbar">
+                <span class="preview-url">▣ live preview — sandbox</span>
+                <div class="preview-resize">
+                    <button class="resize-btn" data-h="260">S</button>
+                    <button class="resize-btn active" data-h="420">M</button>
+                    <button class="resize-btn" data-h="620">L</button>
+                    <button class="resize-btn" data-h="900">XL</button>
+                </div>
+            </div>
+            <div class="preview-frame-wrap" style="height:420px">
+                <iframe class="preview-iframe"
+                    sandbox="allow-scripts allow-forms allow-modals"
+                    srcdoc=""
+                ></iframe>
+            </div>
+        `;
+
+        bar.after(panel);
+
+        // Resize buttons
+        panel.querySelectorAll(".resize-btn").forEach(rb => {
+            rb.addEventListener("click", () => {
+                panel.querySelectorAll(".resize-btn").forEach(b => b.classList.remove("active"));
+                rb.classList.add("active");
+                panel.querySelector(".preview-frame-wrap").style.height = rb.dataset.h + "px";
+            });
+        });
+
+        let loaded = false;
+        pvBtn.addEventListener("click", () => {
+            const isOpen = panel.classList.toggle("open");
+            pvBtn.textContent = isOpen ? "▼ Hide" : "▶ Preview";
+            pvBtn.classList.toggle("active", isOpen);
+
+            if (isOpen && !loaded) {
+                loaded = true;
+                const iframe = panel.querySelector(".preview-iframe");
+                iframe.srcdoc = renderSrc;
+            }
+            scrollBot();
+        });
+    });
+}
+
 /* ── Send ── */
 window.handleSend = async function() {
     if (isGenerating) return;