Add Prism.js syntax highlighting and copy button with improved styling

app.js

@@ -1,45 +1,58 @@
-const form = document.getElementById('chat-form');
-const input = document.getElementById('chat-input');
-const output = document.getElementById('chat-output');
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('chat-form');
+  const input = document.getElementById('chat-input');
+  const output = document.getElementById('chat-output');
 
-form.addEventListener('submit', async (e) => {
-  e.preventDefault();
-  const command = input.value.trim();
-  if (!command) return;
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const command = input.value.trim();
+    if (!command) return;
 
-  appendMessage('User', command);
-  input.value = '';
-  try {
-  const response = await fetch('/run-agent', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({ prompt: command }),
-});
-	if (!response.ok) {
-      appendMessage('Error', `Server error: ${response.statusText}`);
-      return;
+    appendMessage('User', command);
+    input.value = '';
+    try {
+      const response = await fetch('/run-agent', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: command }),
+      });
+      if (!response.ok) {
+        appendMessage('Error', `Server error: ${response.statusText}`);
+        return;
+      }
+      const data = await response.json();
+      appendMessage('Deepshell', data.output || 'No response');
+      Prism.highlightAll(); // Highlight newly added code blocks
+    } catch (err) {
+      appendMessage('Error', `Network error: ${err.message}`);
     }
-    const data = await response.json();
-    appendMessage('Deepshell', data.output || 'No response');
-  } catch (err) {
-    appendMessage('Error', `Network error: ${err.message}`);
-  }
-});
+  });
 
-function appendMessage(sender, message) {
-  const msgDiv = document.createElement('div');
-  msgDiv.classList.add('message');
-  msgDiv.innerHTML = `<strong>${sender}:</strong> <pre>${escapeHtml(message)}</pre>`;
-  output.appendChild(msgDiv);
-  output.scrollTop = output.scrollHeight;
-}
+  function appendMessage(sender, message) {
+    const msgDiv = document.createElement('div');
+    msgDiv.classList.add('message');
+
+    // Detect code block markdown ```lang ... ```
+    const codeBlockMatch = message.match(/```(\w+)?\n([\s\S]*?)```/);
+    if (codeBlockMatch) {
+      const lang = codeBlockMatch[1] || 'bash';
+      const code = codeBlockMatch[2];
+      msgDiv.innerHTML = `<strong>${sender}:</strong><pre><code class="language-${lang}">${escapeHtml(code)}</code></pre>`;
+    } else {
+      msgDiv.innerHTML = `<strong>${sender}:</strong> <pre>${escapeHtml(message)}</pre>`;
+    }
 
-function escapeHtml(text) {
-  return text.replace(/[&<>"']/g, (m) => ({
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#39;',
-  })[m]);
-}
+    output.appendChild(msgDiv);
+    output.scrollTop = output.scrollHeight;
+  }
+
+  function escapeHtml(text) {
+    return text.replace(/[&<>"']/g, (m) => ({
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;',
+    })[m]);
+  }
+});

index.html

@@ -4,10 +4,13 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Deepshell Chat UI</title>
-  <!-- Updated CSS path -->
   <link rel="stylesheet" href="/static/services.css" />
+
+  <!-- Prism CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" />
+
   <style>
-    /* Minimal inline styles in case services.css is missing */
     body {
       font-family: Arial, sans-serif;
       background: #f5f5f5;
@@ -60,6 +63,38 @@
     button:hover {
       background: #0056b3;
     }
+
+    /* Prism copy button styling - always visible */
+    .prism-toolbar {
+      background: #007bff !important;
+      border-radius: 4px;
+      padding: 4px 8px;
+      top: 8px !important;
+      right: 8px !important;
+      opacity: 1 !important;
+      transition: none !important;
+      z-index: 10;
+    }
+
+    .prism-toolbar:hover {
+      opacity: 1 !important;
+    }
+
+    .prism-toolbar > button {
+      color: white !important;
+      font-weight: bold;
+      font-size: 0.9rem;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      padding: 0;
+      margin: 0;
+    }
+
+    .prism-toolbar > button:focus {
+      outline: 2px solid #fff;
+      outline-offset: 2px;
+    }
   </style>
 </head>
 <body>
@@ -71,7 +106,12 @@
       <button type="submit">Send</button>
     </form>
   </div>
-  <!-- Updated JS path -->
+
   <script src="/static/app.js"></script>
+
+  <!-- Prism JS -->
+  <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
 </body>
 </html>