document.addEventListener('click', function(e) { // Handle code block copy button clicks if (e.target.closest('.copy-button')) { const button = e.target.closest('.copy-button'); const pre = button.closest('.code-block-wrapper').querySelector('pre'); const code = pre.textContent; navigator.clipboard.writeText(code).then(() => { // Show copied feedback const originalHTML = button.innerHTML; button.innerHTML = ''; button.classList.add('text-green-400'); setTimeout(() => { button.innerHTML = originalHTML; button.classList.remove('text-green-400'); }, 2000); }); } // Handle code block expand button clicks if (e.target.closest('.expand-button')) { const wrapper = e.target.closest('.code-block-wrapper'); wrapper.classList.toggle('expanded'); if (wrapper.classList.contains('expanded')) { wrapper.style.position = 'fixed'; wrapper.style.top = '50%'; wrapper.style.left = '50%'; wrapper.style.transform = 'translate(-50%, -50%)'; wrapper.style.width = '90%'; wrapper.style.height = '80%'; wrapper.style.maxWidth = '1000px'; wrapper.style.zIndex = '9999'; wrapper.querySelector('.code-pre').style.maxHeight = '70vh'; // Add backdrop const backdrop = document.createElement('div'); backdrop.className = 'fixed inset-0 bg-black/70 z-[9998]'; backdrop.id = 'code-backdrop'; backdrop.onclick = () => { wrapper.classList.remove('expanded'); wrapper.style = ''; wrapper.querySelector('.code-pre').style = ''; backdrop.remove(); }; document.body.appendChild(backdrop); // Change expand icon to collapse const button = e.target.closest('.expand-button'); button.innerHTML = ''; } else { wrapper.style = ''; wrapper.querySelector('.code-pre').style = ''; document.getElementById('code-backdrop')?.remove(); // Change collapse icon back to expand const button = e.target.closest('.expand-button'); button.innerHTML = ''; } } });

Connect with OmniAI