livechat 0.1.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f475396740f88ad5b62ea7f30889dd7e3b36699834f061d2a7d09cdf341b88a
-  data.tar.gz: cb58318b0d8ac30a316d59bca48e8eca3bbe63b697c0d744a2404820d9327344
+  metadata.gz: ab3b69e1c61320ea9df88571fc2fcad40c09c44e0f14f961b59a87d23ffc161e
+  data.tar.gz: b6750a5aef1f99e7a6d2a49ed2fbcd6bb9cb1fb992cefd176e552f7d281f42e8
 SHA512:
-  metadata.gz: e261a7ad6751071cafb5546af26cc27fe2191ff7425c8aa001d52dc7ce996d0a7176cce69aecae2b7f2e09dccf38b6536dabc1c71af06f790f80b536c45de37a
-  data.tar.gz: 443fe470e3d66f164a4f970ea4d0e3fdfdd41e42d98d5a05674ac9783e97f4c128ea5dfe97866ad034e4a71eb3cc412e4ec8cabfaf3449c7a727e903925328c2
+  metadata.gz: 12421cafc2a629e4d1621dea03a984bd1e88d6ae9418390bd9767533208827da379f3d858cfd1c1eb1a6b47d2bb1aebaecedce8ff810f7f4fdc1197473c276e3
+  data.tar.gz: 53b24b739628a3fdf69082ff652a1770d1acfa18c385152e61a2f9985faa82eac968f0c0be4ff36561957d9d8a3fa2bd53c7c671d2df02d0564ac10a96bc8eda

data/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.2.1
+
+- With `show_launcher = false` the panel now sits in the corner instead of
+  hovering 66px above a launcher bubble that isn't there.
+
+## 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.1'
 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 ---------------------------------------------------------------
@@ -115,6 +116,9 @@
     root = document.createElement("div");
     root.id = "lvc-root";
     if (config.rtl) root.setAttribute("dir", "rtl");
+    // No launcher bubble to clear — the panel sits in the corner instead of
+    // hovering 66px above nothing.
+    if (!config.launcher) root.className = "lvc-no-launcher";
 
     if (config.launcher) root.appendChild(buildLauncher());
     document.body.appendChild(root);
@@ -287,24 +291,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 +369,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() {
@@ -509,7 +547,9 @@
       "border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}" +
       "#lvc-panel[hidden]{display:none}" +
       "#lvc-root[dir=rtl] #lvc-panel{right:auto;left:20px}" +
-      "@media(max-width:480px){#lvc-panel{right:12px;bottom:80px}}" +
+      "#lvc-root.lvc-no-launcher #lvc-panel{bottom:20px;max-height:calc(100dvh - 40px)}" +
+      "@media(max-width:480px){#lvc-panel{right:12px;bottom:80px}" +
+      "#lvc-root.lvc-no-launcher #lvc-panel{right:12px;bottom:12px;max-height:calc(100dvh - 24px)}}" +
       "#lvc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;" +
       "padding:14px 16px;background:var(--lvc-accent);color:var(--lvc-accent-text)}" +
       "#lvc-header strong{display:block;font-size:15px}" +
@@ -553,7 +593,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.1
 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.'