fix: Load highlight.js browser bundle and resolve template suggestion card string syntax error

index.html

@@ -13,13 +13,7 @@
     <!-- Markdown Parser & Code Syntax Highlighter CDNs -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/core.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/python.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/javascript.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/bash.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/css.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/json.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/markdown.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/highlight.min.js"></script>
     
     <!-- Lucide Icons -->
     <script src="https://unpkg.com/lucide@latest"></script>
@@ -1026,6 +1020,29 @@
         let isConfigTokenAvailable = false;
         let gradioClient = null;
 
+        const suggestions = [
+            {
+                title: "Explain AI Concepts",
+                desc: "SFT vs RLHF...",
+                prompt: "Explain the difference between supervised fine-tuning (SFT) and reinforcement learning from human feedback (RLHF)."
+            },
+            {
+                title: "Code Generation",
+                desc: "Parallel image loading in Python...",
+                prompt: "Write a fast Python script to parallelize image loading using threads."
+            },
+            {
+                title: "Design a Plan",
+                desc: "Marketing strategy for a SaaS tool...",
+                prompt: "Outline a comprehensive marketing strategy to launch a new SaaS developer tool."
+            },
+            {
+                title: "Code Review",
+                desc: "Find optimization bottlenecks...",
+                prompt: "Review this code snippet for potential performance bottlenecks:\n\n```python\nfor i in range(len(list)):\n   if list[i] in other_list: pass\n```"
+            }
+        ];
+
         // Dom elements
         const chatInput = document.getElementById("chat-input");
         const sendBtn = document.getElementById("send-btn");
@@ -1304,6 +1321,18 @@
         // Render Empty state when there are no messages
         function renderEmptyState() {
             if (!messagesViewport) return;
+            
+            // Build suggestions cards HTML dynamically to avoid nested quotes or escaping bugs
+            let cardsHtml = "";
+            suggestions.forEach((item, index) => {
+                cardsHtml += `
+                    <div class="suggestion-card" data-index="${index}">
+                        <div class="suggestion-card-title">${escapeHtml(item.title)}</div>
+                        <div class="suggestion-card-desc">${escapeHtml(item.desc)}</div>
+                    </div>
+                `;
+            });
+
             messagesViewport.innerHTML = `
                 <div class="empty-chat-state">
                     <div class="empty-icon-box">
@@ -1314,22 +1343,7 @@
                         <p>Ask anything! This model is highly tuned for complex instructions, coding help, and deep reasoning. Powered by NVIDIA's 550B Ultra architecture.</p>
                     </div>
                     <div class="suggestions-grid">
-                        <div class="suggestion-card" data-prompt="Explain the difference between supervised fine-tuning (SFT) and reinforcement learning from human feedback (RLHF).">
-                            <div class="suggestion-card-title">Explain AI Concepts</div>
-                            <div class="suggestion-card-desc">"SFT vs RLHF..."</div>
-                        </div>
-                        <div class="suggestion-card" data-prompt="Write a fast Python script to parallelize image loading using threads.">
-                            <div class="suggestion-card-title">Code Generation</div>
-                            <div class="suggestion-card-desc">"Parallel image loading in Python..."</div>
-                        </div>
-                        <div class="suggestion-card" data-prompt="Outline a comprehensive marketing strategy to launch a new SaaS developer tool.">
-                            <div class="suggestion-card-title">Design a Plan</div>
-                            <div class="suggestion-card-desc">"Marketing strategy for a SaaS tool..."</div>
-                        </div>
-                        <div class="suggestion-card" data-prompt="Review this code snippet for potential performance bottlenecks: \n\n```python\nfor i in range(len(list)):\n   if list[i] in other_list: pass\n```">
-                            <div class="suggestion-card-title">Code Review</div>
-                            <div class="suggestion-card-desc">"Find optimization bottlenecks..."</div>
-                        </div>
+                        ${cardsHtml}
                     </div>
                 </div>
             `;
@@ -1337,7 +1351,8 @@
             // Suggestion click listeners
             document.querySelectorAll(".suggestion-card").forEach(card => {
                 card.addEventListener("click", () => {
-                    const prompt = card.dataset.prompt;
+                    const idx = parseInt(card.dataset.index);
+                    const prompt = suggestions[idx].prompt;
                     if (chatInput) {
                         chatInput.value = prompt;
                         adjustTextareaHeight();