RAGbot Assistant Widget

The RAGbot widget is a custom floating UI component included in the global footer (docs/_includes/footer_custom.html). It provides real-time chat search grounded in site content.

---

🎨 UI & Layout Behaviors

• Contextual Toggle Display: When the chat window (#chat-window) opens, the floating toggle pill (#chat-toggle) automatically hides to prevent visual overlap.
• Keyboard Accessibility: The input field supports submission via the Enter key in addition to the explicit Send button click handler.
• Fixed Stacking: Positioned with a fixed viewport offset (bottom: 20px; right: 20px) and high z-index (99999) to remain above site navigation components.

---

💻 Event Handling Implementation

```javascript document.addEventListener(“DOMContentLoaded”, function () { const chatToggle = document.getElementById(“chat-toggle”); const chatCloseBtn = document.getElementById(“chat-close-btn”); const chatWindow = document.getElementById(“chat-window”); const chatInput = document.getElementById(“chat-widget-input”); const chatSendBtn = document.getElementById(“chat-send-btn”);

// Open Chat if (chatToggle && chatWindow) { chatToggle.addEventListener(“click”, function (e) { e.stopPropagation(); chatWindow.style.display = “flex”; chatToggle.style.display = “none”; }); }

// Close Chat if (chatCloseBtn && chatWindow && chatToggle) { chatCloseBtn.addEventListener(“click”, function (e) { e.stopPropagation(); chatWindow.style.display = “none”; chatToggle.style.display = “flex”; }); } });