widget: switch-channel back button fix

app/static/widget.js

@@ -59,6 +59,7 @@
       listening: "Escuchando\u2026",
       micDenied: "Permiso de micr\u00f3fono denegado",
       homeTitle: "\u00bfC\u00f3mo prefieres escribirnos?",
+      switchChannel: "Cambiar canal",
       homeChat: "Chatear aqu\u00ed", homeWa: "Seguir por WhatsApp",
       starters: ["\u00bfQu\u00e9 ofrec\u00e9is?", "Quiero m\u00e1s informaci\u00f3n", "Hablar con una persona"]
     },
@@ -92,6 +93,7 @@
       listening: "Listening\u2026",
       micDenied: "Microphone permission denied",
       homeTitle: "How would you like to talk to us?",
+      switchChannel: "Switch channel",
       homeChat: "Chat here", homeWa: "Continue on WhatsApp",
       starters: ["What do you offer?", "I want more information", "Talk to a person"]
     },
@@ -125,6 +127,7 @@
       listening: "\u00c9coute\u2026",
       micDenied: "Acc\u00e8s au microphone refus\u00e9",
       homeTitle: "Comment pr\u00e9f\u00e9rez-vous nous \u00e9crire ?",
+      switchChannel: "Changer de canal",
       homeChat: "Discuter ici", homeWa: "Continuer sur WhatsApp",
       starters: ["Que proposez-vous ?", "Je souhaite plus d'informations", "Parler \u00e0 une personne"]
     },
@@ -158,6 +161,7 @@
       listening: "H\u00f6re zu\u2026",
       micDenied: "Mikrofonzugriff verweigert",
       homeTitle: "Wie m\u00f6chten Sie uns schreiben?",
+      switchChannel: "Kanal wechseln",
       homeChat: "Hier chatten", homeWa: "Weiter auf WhatsApp",
       starters: ["Was bieten Sie an?", "Ich m\u00f6chte mehr Informationen", "Mit einer Person sprechen"]
     },
@@ -191,6 +195,7 @@
       listening: "In ascolto\u2026",
       micDenied: "Accesso al microfono negato",
       homeTitle: "Come preferisci scriverci?",
+      switchChannel: "Cambia canale",
       homeChat: "Chatta qui", homeWa: "Continua su WhatsApp",
       starters: ["Cosa offrite?", "Vorrei maggiori informazioni", "Parlare con una persona"]
     },
@@ -224,6 +229,7 @@
       listening: "A ouvir\u2026",
       micDenied: "Permiss\u00e3o de microfone negada",
       homeTitle: "Como prefere falar connosco?",
+      switchChannel: "Mudar de canal",
       homeChat: "Conversar aqui", homeWa: "Continuar no WhatsApp",
       starters: ["O que oferecem?", "Quero mais informa\u00e7\u00f5es", "Falar com uma pessoa"]
     }
@@ -263,6 +269,7 @@
 
   // Paperclip (attach a PDF/photo to the conversation).
   var ICON_CLIP = '<svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg>';
+  var ICON_BACK = '<svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>';
   var ICON_MIC = '<svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.49 6-3.31 6-6.72h-1.7z"/></svg>';
 
   // Voice input: browser-native speech recognition (free, no external service).
@@ -347,6 +354,8 @@
       "#ssb-head .ssb-x{margin-left:auto;background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer;opacity:.85;line-height:1}" +
       "#ssb-mute{margin-left:auto;width:32px;height:32px;background:transparent;border:0;cursor:pointer;opacity:.85;display:flex;align-items:center;justify-content:center;padding:0;flex:none}" +
       "#ssb-mute:hover{opacity:1}#ssb-mute svg{width:20px;height:20px;fill:#fff}" +
+      "#ssb-switch{margin-left:auto;width:32px;height:32px;background:transparent;border:0;cursor:pointer;opacity:.85;align-items:center;justify-content:center;padding:0;flex:none}" +
+      "#ssb-switch:hover{opacity:1}#ssb-switch svg{width:19px;height:19px;fill:#fff}" +
       "#ssb-head .ssb-x{margin-left:6px}" +
       "#ssb-launch .ssb-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;box-sizing:border-box;padding:0 5px;border-radius:10px;background:#e11d48;border:2px solid #fff;color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:11px;font-weight:700;line-height:16px;text-align:center;display:none}" +
       "#ssb-msgs{flex:1;overflow-y:auto;padding:16px 14px;background:#f4f5f7;display:flex;flex-direction:column;gap:10px}" +
@@ -460,6 +469,8 @@
       '<div id="ssb-head"><div class="ssb-av"></div><div>' +
       '<div class="ssb-name">' + esc(name) + '</div>' +
       '<div class="ssb-status"><i></i>' + T.status + '</div></div>' +
+      (showHome ? '<button id="ssb-switch" type="button" aria-label="' + T.switchChannel +
+        '" title="' + T.switchChannel + '" style="display:none">' + ICON_BACK + '</button>' : '') +
       '<button id="ssb-mute" type="button"></button>' +
       '<button class="ssb-x" aria-label="' + T.close + '">&times;</button></div>' +
       homeHtml +
@@ -484,22 +495,33 @@
     var greeted = false;
     var homeEl = panel.querySelector("#ssb-home");
     var chatarea = panel.querySelector("#ssb-chatarea");
+    var switchBtn = panel.querySelector("#ssb-switch");
 
     // "both" mode: visitor picks a channel on open. Chat -> reveal the normal
     // chat area (and greet, same as chat-only mode). WhatsApp -> open wa.me;
-    // the panel stays open behind it so they can still switch to chat.
+    // the panel stays open behind it so they can still switch to chat. A small
+    // back button in the header (once chat is showing) lets them return to the
+    // picker at any time -- reopening the panel later must NOT strand them on
+    // whichever channel they picked first with no way back.
     function chooseChat() {
       if (homeEl) homeEl.style.display = "none";
       if (chatarea) chatarea.style.display = "flex";
+      if (switchBtn) switchBtn.style.display = "flex";
       if (!greeted) { botMsg(cfg.welcome); renderStarters(); greeted = true; }
       input.focus();
     }
     function chooseWa() {
       window.open("https://wa.me/" + waDigits, "_blank", "noopener");
     }
+    function backToHome() {
+      if (chatarea) chatarea.style.display = "none";
+      if (switchBtn) switchBtn.style.display = "none";
+      if (homeEl) homeEl.style.display = "flex";
+    }
     if (homeEl) {
       panel.querySelector("#ssb-home-chat").addEventListener("click", chooseChat);
       panel.querySelector("#ssb-home-wa").addEventListener("click", chooseWa);
+      if (switchBtn) switchBtn.addEventListener("click", backToHome);
     }
 
     // ---- Visitor uploads (Phase 3): paperclip -> chip -> ids on next send ----
@@ -801,8 +823,10 @@
       if (panel.classList.contains("open")) {
         setBadge(0); stopFlash();
         // With a home screen, wait for the visitor to pick a channel before
-        // greeting/focusing the input (avoids a wasted bot turn pre-choice).
-        if (!homeEl) {
+        // greeting/focusing the input (avoids a wasted bot turn pre-choice). Once
+        // they've already chosen chat (chatarea visible), reopening later still
+        // focuses the input like the chat-only mode does.
+        if (!homeEl || (chatarea && chatarea.style.display !== "none")) {
           if (!greeted) { botMsg(cfg.welcome); renderStarters(); greeted = true; }
           input.focus();
         }

tests/test_widget_assets.py

@@ -35,6 +35,16 @@ def test_widget_both_mode_shows_a_single_bubble_with_channel_picker():
         assert js.count(key + ":") == 6, f"{key} must be defined in all 6 languages"
 
 
+def test_widget_both_mode_can_switch_back_to_the_channel_picker():
+    """Regression (reported live): once a visitor picked a channel, closing and
+    reopening the panel left them stuck with no way back to the picker. A header
+    button must let them return to it at any point, even after a re-open."""
+    js = WIDGET.read_text(encoding="utf-8")
+    assert 'id="ssb-switch"' in js
+    assert "backToHome" in js
+    assert js.count("switchChannel:") == 6, "switchChannel label must be defined in all 6 languages"
+
+
 def test_block_is_app_embed_loading_widget_in_proxy_mode():
     liquid = BLOCK.read_text(encoding="utf-8")
     assert "{% schema %}" in liquid