agentgui 1.0.130 → 1.0.138

package/static/js/streaming-renderer.js

@@ -432,18 +432,24 @@ class StreamingRenderer {
 
     const code = block.code || '';
     const language = (block.language || 'plaintext').toLowerCase();
+    const lineCount = code.split('\n').length;
 
-    const header = document.createElement('div');
-    header.className = 'code-header';
-    header.innerHTML = `
-      <span class="lang-badge">${this.escapeHtml(language)}</span>
+    const details = document.createElement('details');
+    details.className = 'collapsible-code';
+
+    const summary = document.createElement('summary');
+    summary.className = 'collapsible-code-summary';
+    summary.innerHTML = `
+      <span class="collapsible-code-label">${this.escapeHtml(language)} - ${lineCount} line${lineCount !== 1 ? 's' : ''}</span>
       <button class="copy-code-btn" title="Copy code">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
       </button>
     `;
 
-    const copyBtn = header.querySelector('.copy-code-btn');
-    copyBtn.addEventListener('click', () => {
+    const copyBtn = summary.querySelector('.copy-code-btn');
+    copyBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
       navigator.clipboard.writeText(code).then(() => {
         const orig = copyBtn.innerHTML;
         copyBtn.innerHTML = '<svg viewBox="0 0 20 20" fill="#34d399"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
@@ -451,13 +457,18 @@ class StreamingRenderer {
       });
     });
 
-    // Use syntax highlighting instead of just escaping
-    const highlightedHTML = StreamingRenderer.renderCodeWithHighlight(code, this.escapeHtml.bind(this));
+    const preStyle = "background:#1e293b;padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155;border-top:none;margin:0";
     const codeContainer = document.createElement('div');
-    codeContainer.innerHTML = highlightedHTML;
+    if (typeof hljs !== 'undefined') {
+      const result = hljs.highlightAuto(code);
+      codeContainer.innerHTML = `<pre style="${preStyle}"><code class="hljs">${result.value}</code></pre>`;
+    } else {
+      codeContainer.innerHTML = `<pre style="${preStyle}"><code>${this.escapeHtml(code)}</code></pre>`;
+    }
 
-    div.appendChild(header);
-    div.appendChild(codeContainer);
+    details.appendChild(summary);
+    details.appendChild(codeContainer);
+    div.appendChild(details);
 
     return div;
   }
@@ -991,12 +1002,18 @@ class StreamingRenderer {
    * Render code with basic syntax highlighting
    */
   static renderCodeWithHighlight(code, esc) {
-    const preStyle = "background:#1e293b;padding:1rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155";
+    const preStyle = "background:#1e293b;padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155;border-top:none;margin:0";
+    const lineCount = code.split('\n').length;
+    const lang = (typeof hljs !== 'undefined') ? (hljs.highlightAuto(code).language || 'code') : 'code';
+    const summaryLabel = `${lang} - ${lineCount} line${lineCount !== 1 ? 's' : ''}`;
+    let codeHtml;
     if (typeof hljs !== 'undefined') {
       const result = hljs.highlightAuto(code);
-      return `<pre style="${preStyle}"><code class="hljs">${result.value}</code></pre>`;
+      codeHtml = `<pre style="${preStyle}"><code class="hljs">${result.value}</code></pre>`;
+    } else {
+      codeHtml = `<pre style="${preStyle}">${esc(code)}</pre>`;
     }
-    return `<pre style="${preStyle}">${esc(code)}</pre>`;
+    return `<details class="collapsible-code"><summary class="collapsible-code-summary">${summaryLabel}</summary>${codeHtml}</details>`;
   }
 
   /**
@@ -1521,16 +1538,19 @@ class StreamingRenderer {
             <div class="html-content bg-white dark:bg-gray-800 p-4 overflow-x-auto">${part.code}</div>
           </div>`;
         } else {
+          const partLineCount = part.code.split('\n').length;
           html += `<div class="mb-3 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
-            <div class="flex items-center justify-between gap-2 bg-gray-900 dark:bg-gray-950 px-4 py-2 border-b border-gray-800">
-              <span class="text-xs font-mono text-gray-400 uppercase">${this.escapeHtml(part.language)}</span>
-              <button class="copy-code-btn text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-800" title="Copy code">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
-                </svg>
-              </button>
-            </div>
-            <pre class="bg-gray-900 text-gray-100 p-4 overflow-x-auto"><code class="language-${this.escapeHtml(part.language)}">${this.escapeHtml(part.code)}</code></pre>
+            <details class="collapsible-code">
+              <summary class="collapsible-code-summary">
+                <span>${this.escapeHtml(part.language)} - ${partLineCount} line${partLineCount !== 1 ? 's' : ''}</span>
+                <button class="copy-code-btn text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-800" title="Copy code" onclick="event.preventDefault();event.stopPropagation();navigator.clipboard.writeText(this.closest('.collapsible-code').querySelector('code').textContent)">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                  </svg>
+                </button>
+              </summary>
+              <pre class="bg-gray-900 text-gray-100 p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(part.language)}">${this.escapeHtml(part.code)}</code></pre>
+            </details>
           </div>`;
         }
       }
@@ -1578,8 +1598,12 @@ class StreamingRenderer {
         </div>
       `;
     } else {
+      const codeLineCount = code.split('\n').length;
       div.innerHTML = `
-        <pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
+        <details class="collapsible-code">
+          <summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${codeLineCount} line${codeLineCount !== 1 ? 's' : ''}</summary>
+          <pre class="bg-gray-900 text-gray-100 p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
+        </details>
       `;
     }
     return div;

package/static/js/syntax-highlighter.js

@@ -6,7 +6,7 @@
 class SyntaxHighlighter {
   constructor(config = {}) {
     this.config = {
-      cdnUrl: config.cdnUrl || 'https://unpkg.com/prism@1.29.0',
+      cdnUrl: config.cdnUrl || 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0',
       lazyLoad: config.lazyLoad !== false,
       enableCache: config.enableCache !== false,
       maxCacheSize: config.maxCacheSize || 500,

package/static/js/voice.js

@@ -0,0 +1,430 @@
+import { STT, TTS } from 'webtalk-sdk';
+
+(function() {
+  const BASE = window.__BASE_URL || '';
+  let stt = null;
+  let tts = null;
+  let isRecording = false;
+  let ttsEnabled = true;
+  let voiceActive = false;
+  let lastSpokenBlockIndex = -1;
+  let currentConversationId = null;
+  let sttReady = false;
+  let ttsReady = false;
+  let speechQueue = [];
+  let isSpeaking = false;
+
+  async function init() {
+    setupTTSToggle();
+    setupUI();
+    setupStreamingListener();
+    setupAgentSelector();
+    initSTT();
+    initTTS();
+  }
+
+  var sttLoadPhase = 'starting';
+
+  async function initSTT() {
+    try {
+      stt = new STT({
+        basePath: BASE + '/webtalk',
+        onTranscript: function(text) {
+          var el = document.getElementById('voiceTranscript');
+          if (el) {
+            el.textContent = text;
+            el.setAttribute('data-final', text);
+          }
+        },
+        onPartial: function(text) {
+          var el = document.getElementById('voiceTranscript');
+          if (el) {
+            var existing = el.getAttribute('data-final') || '';
+            el.textContent = existing + text;
+          }
+        },
+        onStatus: function(status) {
+          var micBtn = document.getElementById('voiceMicBtn');
+          if (!micBtn) return;
+          if (status === 'recording') {
+            micBtn.classList.add('recording');
+          } else {
+            micBtn.classList.remove('recording');
+          }
+        }
+      });
+      var origInit = stt.init.bind(stt);
+      var initPromise = new Promise(function(resolve, reject) {
+        origInit().then(resolve).catch(reject);
+        if (stt.worker) {
+          var origHandler = stt.worker.onmessage;
+          stt.worker.onmessage = function(e) {
+            var msg = e.data;
+            if (msg && msg.status) {
+              if (msg.status === 'progress' || msg.status === 'download') {
+                if (sttLoadPhase !== 'downloading') {
+                  sttLoadPhase = 'downloading';
+                  updateMicState();
+                }
+              } else if (msg.status === 'done' && msg.file && msg.file.endsWith('.onnx')) {
+                sttLoadPhase = 'compiling';
+                updateMicState();
+              }
+            }
+            if (origHandler) origHandler.call(stt.worker, e);
+          };
+        }
+      });
+      await initPromise;
+      sttReady = true;
+      updateMicState();
+    } catch (e) {
+      console.warn('STT init failed:', e.message);
+      sttLoadPhase = 'failed';
+      updateMicState();
+    }
+  }
+
+  function updateMicState() {
+    var micBtn = document.getElementById('voiceMicBtn');
+    if (!micBtn) return;
+    if (sttReady) {
+      micBtn.removeAttribute('disabled');
+      micBtn.title = 'Click to record';
+      micBtn.classList.remove('loading');
+    } else if (sttLoadPhase === 'failed') {
+      micBtn.setAttribute('disabled', 'true');
+      micBtn.title = 'Speech recognition failed to load';
+      micBtn.classList.remove('loading');
+    } else {
+      micBtn.setAttribute('disabled', 'true');
+      micBtn.classList.add('loading');
+      if (sttLoadPhase === 'downloading') {
+        micBtn.title = 'Downloading speech models...';
+      } else if (sttLoadPhase === 'compiling') {
+        micBtn.title = 'Compiling speech models (may take a minute)...';
+      } else {
+        micBtn.title = 'Loading speech recognition...';
+      }
+    }
+  }
+
+  async function initTTS() {
+    try {
+      tts = new TTS({
+        basePath: BASE + '/webtalk',
+        apiBasePath: BASE,
+        onStatus: function() {},
+        onAudioReady: function(url) {
+          var audio = new Audio(url);
+          audio.onended = function() {
+            isSpeaking = false;
+            processQueue();
+          };
+          audio.onerror = function() {
+            isSpeaking = false;
+            processQueue();
+          };
+          audio.play().catch(function() {
+            isSpeaking = false;
+            processQueue();
+          });
+        }
+      });
+      await tts.init();
+      ttsReady = true;
+    } catch (e) {
+      console.warn('TTS init failed:', e.message);
+    }
+  }
+
+  function setupAgentSelector() {
+    var voiceSelector = document.querySelector('[data-voice-agent-selector]');
+    if (!voiceSelector) return;
+    var mainSelector = document.querySelector('[data-agent-selector]');
+    if (mainSelector) {
+      voiceSelector.innerHTML = mainSelector.innerHTML;
+      voiceSelector.value = mainSelector.value;
+      mainSelector.addEventListener('change', function() {
+        voiceSelector.value = mainSelector.value;
+      });
+      voiceSelector.addEventListener('change', function() {
+        mainSelector.value = voiceSelector.value;
+      });
+    }
+  }
+
+  function setupTTSToggle() {
+    var toggle = document.getElementById('voiceTTSToggle');
+    if (toggle) {
+      var saved = localStorage.getItem('voice-tts-enabled');
+      if (saved !== null) {
+        ttsEnabled = saved === 'true';
+        toggle.checked = ttsEnabled;
+      }
+      toggle.addEventListener('change', function() {
+        ttsEnabled = toggle.checked;
+        localStorage.setItem('voice-tts-enabled', ttsEnabled);
+        if (!ttsEnabled) stopSpeaking();
+      });
+    }
+    var stopBtn = document.getElementById('voiceStopSpeaking');
+    if (stopBtn) {
+      stopBtn.addEventListener('click', stopSpeaking);
+    }
+  }
+
+  function setupUI() {
+    var micBtn = document.getElementById('voiceMicBtn');
+    if (micBtn) {
+      micBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        if (!isRecording) {
+          startRecording();
+        } else {
+          stopRecording();
+        }
+      });
+    }
+    var sendBtn = document.getElementById('voiceSendBtn');
+    if (sendBtn) {
+      sendBtn.addEventListener('click', sendVoiceMessage);
+    }
+    updateMicState();
+  }
+
+  async function startRecording() {
+    if (isRecording) return;
+    var el = document.getElementById('voiceTranscript');
+    if (!stt || !sttReady) {
+      if (el) el.textContent = 'Speech recognition still loading, please wait...';
+      return;
+    }
+    if (el) {
+      el.textContent = '';
+      el.setAttribute('data-final', '');
+    }
+    isRecording = true;
+    try {
+      await stt.startRecording();
+    } catch (e) {
+      isRecording = false;
+      if (el) el.textContent = 'Mic access denied or unavailable: ' + e.message;
+      console.warn('Recording start failed:', e.message);
+    }
+  }
+
+  async function stopRecording() {
+    if (!stt || !isRecording) return;
+    isRecording = false;
+    try {
+      await stt.stopRecording();
+    } catch (e) {}
+  }
+
+  function sendVoiceMessage() {
+    var el = document.getElementById('voiceTranscript');
+    if (!el) return;
+    var text = el.textContent.trim();
+    if (!text) return;
+    addVoiceBlock(text, true);
+    el.textContent = '';
+    el.setAttribute('data-final', '');
+    if (typeof agentGUIClient !== 'undefined' && agentGUIClient) {
+      var input = agentGUIClient.ui.messageInput;
+      if (input) {
+        input.value = text;
+        agentGUIClient.startExecution();
+      }
+    }
+  }
+
+  function speak(text) {
+    if (!ttsEnabled || !tts || !ttsReady) return;
+    var clean = text.replace(/<[^>]*>/g, '').trim();
+    if (!clean) return;
+    speechQueue.push(clean);
+    processQueue();
+  }
+
+  function processQueue() {
+    if (isSpeaking || speechQueue.length === 0) return;
+    isSpeaking = true;
+    var text = speechQueue.shift();
+    tts.generate(text).catch(function() {
+      isSpeaking = false;
+      processQueue();
+    });
+  }
+
+  function stopSpeaking() {
+    speechQueue = [];
+    isSpeaking = false;
+    if (tts) tts.stop();
+  }
+
+  function addVoiceBlock(text, isUser) {
+    var container = document.getElementById('voiceMessages');
+    if (!container) return;
+    var emptyMsg = container.querySelector('.voice-empty');
+    if (emptyMsg) emptyMsg.remove();
+    var div = document.createElement('div');
+    div.className = 'voice-block' + (isUser ? ' voice-block-user' : '');
+    div.textContent = text;
+    container.appendChild(div);
+    scrollVoiceToBottom();
+    return div;
+  }
+
+  function addVoiceResultBlock(block) {
+    var container = document.getElementById('voiceMessages');
+    if (!container) return;
+    var emptyMsg = container.querySelector('.voice-empty');
+    if (emptyMsg) emptyMsg.remove();
+    var div = document.createElement('div');
+    div.className = 'voice-block';
+    var isError = block.is_error || false;
+    var duration = block.duration_ms ? (block.duration_ms / 1000).toFixed(1) + 's' : '';
+    var cost = block.total_cost_usd ? '$' + block.total_cost_usd.toFixed(4) : '';
+    var resultText = '';
+    if (block.result) {
+      resultText = typeof block.result === 'string' ? block.result : JSON.stringify(block.result);
+    }
+    var html = '';
+    if (resultText) {
+      html += '<div>' + escapeHtml(resultText) + '</div>';
+    }
+    if (duration || cost) {
+      html += '<div class="voice-result-stats">';
+      if (duration) html += duration;
+      if (duration && cost) html += ' | ';
+      if (cost) html += cost;
+      html += '</div>';
+    }
+    if (!html) {
+      html = isError ? 'Execution failed' : 'Execution complete';
+    }
+    div.innerHTML = html;
+    container.appendChild(div);
+    scrollVoiceToBottom();
+    if (ttsEnabled && resultText) {
+      speak(resultText);
+    }
+    return div;
+  }
+
+  function scrollVoiceToBottom() {
+    var scroll = document.getElementById('voiceScroll');
+    if (scroll) {
+      requestAnimationFrame(function() {
+        scroll.scrollTop = scroll.scrollHeight;
+      });
+    }
+  }
+
+  function setupStreamingListener() {
+    window.addEventListener('ws-message', function(e) {
+      if (!voiceActive) return;
+      var data = e.detail;
+      if (!data) return;
+      if (data.type === 'streaming_progress' && data.block) {
+        handleVoiceBlock(data.block);
+      }
+      if (data.type === 'streaming_start') {
+        lastSpokenBlockIndex = -1;
+      }
+    });
+    window.addEventListener('conversation-selected', function(e) {
+      currentConversationId = e.detail.conversationId;
+      if (voiceActive) {
+        loadVoiceBlocks(currentConversationId);
+      }
+    });
+  }
+
+  function handleVoiceBlock(block) {
+    if (!block || !block.type) return;
+    if (block.type === 'text' && block.text) {
+      var div = addVoiceBlock(block.text, false);
+      if (div && ttsEnabled) {
+        div.classList.add('speaking');
+        speak(block.text);
+        setTimeout(function() { div.classList.remove('speaking'); }, 2000);
+      }
+    } else if (block.type === 'result') {
+      addVoiceResultBlock(block);
+    }
+  }
+
+  function loadVoiceBlocks(conversationId) {
+    var container = document.getElementById('voiceMessages');
+    if (!container) return;
+    container.innerHTML = '';
+    if (!conversationId) {
+      showVoiceEmpty(container);
+      return;
+    }
+    fetch(BASE + '/api/conversations/' + conversationId + '/chunks')
+      .then(function(res) { return res.json(); })
+      .then(function(data) {
+        if (!data.ok || !Array.isArray(data.chunks) || data.chunks.length === 0) {
+          showVoiceEmpty(container);
+          return;
+        }
+        var hasContent = false;
+        data.chunks.forEach(function(chunk) {
+          var block = typeof chunk.data === 'string' ? JSON.parse(chunk.data) : chunk.data;
+          if (!block) return;
+          if (block.type === 'text' && block.text) {
+            addVoiceBlock(block.text, false);
+            hasContent = true;
+          } else if (block.type === 'result') {
+            addVoiceResultBlock(block);
+            hasContent = true;
+          }
+        });
+        if (!hasContent) showVoiceEmpty(container);
+      })
+      .catch(function() {
+        showVoiceEmpty(container);
+      });
+  }
+
+  function showVoiceEmpty(container) {
+    container.innerHTML = '<div class="voice-empty"><div class="voice-empty-icon"><svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg></div><div>Tap the microphone and speak to send a message.<br>Responses will be read aloud.</div></div>';
+  }
+
+  function activate() {
+    voiceActive = true;
+    if (currentConversationId) {
+      loadVoiceBlocks(currentConversationId);
+    } else {
+      var container = document.getElementById('voiceMessages');
+      if (container && !container.hasChildNodes()) {
+        showVoiceEmpty(container);
+      }
+    }
+  }
+
+  function deactivate() {
+    voiceActive = false;
+    stopSpeaking();
+  }
+
+  function escapeHtml(text) {
+    var map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    return text.replace(/[&<>"']/g, function(c) { return map[c]; });
+  }
+
+  window.voiceModule = {
+    activate: activate,
+    deactivate: deactivate,
+    handleBlock: handleVoiceBlock
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/static/styles.css

@@ -825,7 +825,93 @@ html, body {
   color: var(--text-secondary);
 }
 
+.collapsible-code {
+  border-radius: 0.375rem;
+  overflow: hidden;
+  margin: 0.5rem 0;
+  border: 1px solid #334155;
+  background: #1e293b;
+}
+
+.collapsible-code-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: #0f172a;
+  color: #94a3b8;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  border-bottom: 1px solid #334155;
+  transition: background 0.15s ease;
+}
+
+.collapsible-code-summary::-webkit-details-marker {
+  display: none;
+}
+
+.collapsible-code-summary::before {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 0 5px 8px;
+  border-color: transparent transparent transparent #64748b;
+  margin-right: 0.5rem;
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
 
+.collapsible-code[open] > .collapsible-code-summary::before {
+  transform: rotate(90deg);
+}
+
+.collapsible-code-summary:hover {
+  background: #1e293b;
+  color: #e2e8f0;
+}
+
+.collapsible-code-summary:hover::before {
+  border-left-color: #e2e8f0;
+}
+
+.collapsible-code-summary .copy-code-btn {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+}
+
+.collapsible-code-summary .copy-code-btn:hover {
+  color: #e2e8f0;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.collapsible-code > pre {
+  margin: 0;
+  border-radius: 0 0 0.375rem 0.375rem;
+}
+
+.collapsible-code > div > pre {
+  margin: 0;
+  border-radius: 0 0 0.375rem 0.375rem;
+}
+
+.collapsible-code .code-block {
+  margin: 0;
+  border-radius: 0 0 0.375rem 0.375rem;
+}
 
 .image-block {
   flex: 0 1 100%;