Add dismiss button to JUST-OS chatbot widget (#746)

The jellyfish mascot widget can obscure page content. This adds a small
close button (visible on hover) that hides the widget for the current
browser session via sessionStorage.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Richard Dushime <45734838+richarddushime@users.noreply.github.com>

Author: 3 people

layouts/partials/chatbot.html

@@ -23,6 +23,35 @@
     z-index: 2;
   }
 
+  #just-os-dismiss {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    background: white;
+    color: #999;
+    font-size: 14px;
+    line-height: 18px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 3;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    padding: 0;
+  }
+
+  #just-os-widget:hover #just-os-dismiss {
+    opacity: 1;
+  }
+
+  #just-os-dismiss:hover {
+    background: #eee;
+    color: #333;
+  }
+
   #just-os-btn:hover {
     transform: scale(1.05);
   }
@@ -388,6 +417,9 @@
 {{ if ne .RelPermalink "/just_os_chatbot/" }}
 <div id="just-os-widget">
 
+  <!-- Dismiss Button -->
+  <button id="just-os-dismiss" onclick="dismissJustOS()" aria-label="Dismiss chatbot" title="Dismiss">&times;</button>
+
   <!-- Toggle Button -->
   <button id="just-os-btn" onclick="toggleJustOS()" aria-label="Open Chatbot">
     <img id="just-os-img" src="/img/just_os_icon.webp" alt="Chat with us">

static/js/just-os-chat.js

@@ -450,6 +450,12 @@
 
   window.newJustOSChat = newChat;
 
+  window.dismissJustOS = function () {
+    var widget = document.getElementById('just-os-widget');
+    if (widget) widget.style.display = 'none';
+    sessionStorage.setItem('just-os-dismissed', '1');
+  };
+
   /* -------------------------------------------------- */
   /*  Custom drag-resize (bottom-left handle)            */
   /* -------------------------------------------------- */
@@ -509,6 +515,13 @@
   /* -------------------------------------------------- */
 
   function init() {
+    // Hide widget if dismissed this session
+    if (sessionStorage.getItem('just-os-dismissed')) {
+      var widget = document.getElementById('just-os-widget');
+      if (widget) widget.style.display = 'none';
+      return;
+    }
+
     const container = getContainer();
     if (!container) return;
 
@@ -529,7 +542,11 @@
   window.addEventListener('beforeunload', saveState);
 
   // Auto-toggle helper bubble every 10 seconds (widget only)
-  setInterval(function () {
+  var bubbleInterval = setInterval(function () {
+    if (sessionStorage.getItem('just-os-dismissed')) {
+      clearInterval(bubbleInterval);
+      return;
+    }
     const bubble = document.getElementById('just-os-bubble');
     const win = document.getElementById('just-os-window');
     if (bubble && win && win.style.display !== 'flex') {