livechat 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f475396740f88ad5b62ea7f30889dd7e3b36699834f061d2a7d09cdf341b88a
-  data.tar.gz: cb58318b0d8ac30a316d59bca48e8eca3bbe63b697c0d744a2404820d9327344
+  metadata.gz: b796f38ce15d2bbedc3b49cceeb0bfc8c5ee26610a6841d956aa3711c18da550
+  data.tar.gz: d163445e0442f0f155227210a12a2bdd3f87ec01523a96f29bb898de0550a079
 SHA512:
-  metadata.gz: e261a7ad6751071cafb5546af26cc27fe2191ff7425c8aa001d52dc7ce996d0a7176cce69aecae2b7f2e09dccf38b6536dabc1c71af06f790f80b536c45de37a
-  data.tar.gz: 443fe470e3d66f164a4f970ea4d0e3fdfdd41e42d98d5a05674ac9783e97f4c128ea5dfe97866ad034e4a71eb3cc412e4ec8cabfaf3449c7a727e903925328c2
+  metadata.gz: 3a0947576d889216cf1b1330093baa73c5dcae8b55f10b682f19953a02d8e1ac071d02d38bc51ae23cd11352bec7dbba9f77520d199167b1553d9ccf75598894
+  data.tar.gz: 59c6ad9b5a10cc2b2a2c13ce50693e4d9c492982e098c6ec42edb84c3b343c96154c988a4dc356d8e259bebc433295c10571a216cc5f451d102a653a26c81f2d

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.2.0
+
+- Unread count badges on `data-livechat-open` elements, so launcher-less
+  setups (`show_launcher = false`) still surface waiting replies.
+- Message prefill: `data-livechat-message="…"` on any opener, or
+  `window.Livechat.open("…")` — seeds the message box for contextual asks,
+  never overwriting a visitor's draft.
+
 ## 0.1.0
 
 - Initial release: floating chat widget (guests + signed-in visitors, one

data/README.md

@@ -134,8 +134,14 @@ reply. Gated by `config.authorize_agent` (development-only until you set it).
 
 ## Widget API
 
-- `window.Livechat.open()` / `window.Livechat.close()`
-- Any element with `data-livechat-open` opens the panel on click
+- `window.Livechat.open()` / `window.Livechat.close()` —
+  `open("Hi, I need help with…")` prefills the message box (never over a
+  visitor's draft)
+- Any element with `data-livechat-open` opens the panel on click; add
+  `data-livechat-message="…"` to prefill — great for contextual buttons
+  ("Request verification", "Ask about billing")
+- While replies are unread, every `data-livechat-open` element carries a
+  small count badge — so hiding the launcher doesn't hide the answer
 - `<%= livechat_button %>` renders a plain, unstyled opener button
 - `config.show_launcher = false` hides the bubble entirely — bring your own
   entry point

data/lib/livechat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Livechat
-  VERSION = '0.1.0'
+  VERSION = '0.2.0'
 end

data/lib/livechat/widget.js

@@ -83,6 +83,7 @@
     injectStyles();
     mount();
     applyBrandColor();
+    syncOpenerBadges(); // a Turbo visit brings fresh openers — restamp them
 
     if (sessionGet("livechat_open") === "1") {
       openPanel();
@@ -100,7 +101,7 @@
     if (!opener) return;
     event.preventDefault();
     event.stopPropagation();
-    openPanel();
+    openPanel(opener.getAttribute("data-livechat-message"));
   }
 
   // --- mounting ---------------------------------------------------------------
@@ -287,24 +288,33 @@
 
   // --- open / close -----------------------------------------------------------
 
-  function openPanel() {
+  // prefill (optional string, from data-livechat-message or
+  // Livechat.open("…")) seeds the input — but never over a visitor's draft.
+  function openPanel(prefill) {
     mount();
-    if (isOpen) return;
-    isOpen = true;
-    sessionSet("livechat_open", "1");
-
-    // The panel is built once and then hidden/shown — closing must never
-    // throw away the rendered thread or a half-written message.
-    var panel = document.getElementById("lvc-panel");
-    if (!panel) {
-      panel = buildPanel();
-      root.appendChild(panel);
+    if (!isOpen) {
+      isOpen = true;
+      sessionSet("livechat_open", "1");
+
+      // The panel is built once and then hidden/shown — closing must never
+      // throw away the rendered thread or a half-written message.
+      var panel = document.getElementById("lvc-panel");
+      if (!panel) {
+        panel = buildPanel();
+        root.appendChild(panel);
+      }
+      panel.hidden = false;
+      setUnread(0);
+      poll();
+      schedulePoll();
+    }
+    if (inputEl) {
+      if (typeof prefill === "string" && prefill && !inputEl.value.trim()) {
+        inputEl.value = prefill;
+        autogrow();
+      }
+      inputEl.focus();
     }
-    panel.hidden = false;
-    setUnread(0);
-    poll();
-    schedulePoll();
-    if (inputEl) inputEl.focus();
   }
 
   function closePanel() {
@@ -356,10 +366,35 @@
       .catch(function () { fetching = false; });
   }
 
+  var unreadCount = 0;
+
   function setUnread(count) {
-    if (!badgeEl) return;
-    badgeEl.hidden = !(count > 0);
-    badgeEl.textContent = count > 9 ? "9+" : String(count);
+    unreadCount = count;
+    if (badgeEl) {
+      badgeEl.hidden = !(count > 0);
+      badgeEl.textContent = count > 9 ? "9+" : String(count);
+    }
+    syncOpenerBadges();
+  }
+
+  // Hosts that hide the launcher still get an unread indicator: every
+  // data-livechat-open element carries a small count badge while replies
+  // are waiting, and loses it the moment the panel opens.
+  function syncOpenerBadges() {
+    var openers = document.querySelectorAll("[data-livechat-open]");
+    for (var i = 0; i < openers.length; i++) {
+      var badge = openers[i].querySelector(".lvc-opener-badge");
+      if (unreadCount > 0) {
+        if (!badge) {
+          badge = document.createElement("span");
+          badge.className = "lvc-opener-badge";
+          openers[i].appendChild(badge);
+        }
+        badge.textContent = unreadCount > 9 ? "9+" : String(unreadCount);
+      } else if (badge) {
+        badge.remove();
+      }
+    }
   }
 
   function syncEmailRow() {
@@ -553,7 +588,12 @@
       "color:var(--lvc-accent-text);width:40px;min-width:40px;height:40px;align-self:flex-end;" +
       "display:flex;align-items:center;justify-content:center;cursor:pointer}" +
       "#lvc-form button:disabled{opacity:.6;cursor:default}" +
-      "#lvc-root[dir=rtl] #lvc-form button svg{transform:scaleX(-1)}";
+      "#lvc-root[dir=rtl] #lvc-form button svg{transform:scaleX(-1)}" +
+      // Lives in host DOM (on data-livechat-open elements), so no #lvc-root prefix.
+      ".lvc-opener-badge{display:inline-flex;min-width:18px;height:18px;padding:0 5px;" +
+      "margin-inline-start:6px;border-radius:999px;background:#dc2626;color:#fff;" +
+      "font-size:11px;font-weight:700;line-height:18px;align-items:center;" +
+      "justify-content:center;vertical-align:middle}";
 
     var style = document.createElement("style");
     style.id = "lvc-styles";

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -118,7 +118,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.6
+rubygems_version: 3.6.9
 specification_version: 4
 summary: 'Open-source live chat for Rails: a drop-in support widget plus a team inbox,
   in your own database.'