livechat 0.4.2 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f42dfde953e1643e5cc5fbfce81dc237376788709890a6254a4800bec927f51d
-  data.tar.gz: 76e741f442b6b847d3aa4edd37432ee55f2fe6ac9d8d38a356bf716023f4e146
+  metadata.gz: d674110938432200c4426cfe1c4bb5c551759316ac2468406fa4aeb4dcbf5919
+  data.tar.gz: 5b68f89574ab49bc74b40697f37c05137f2e2082bd91fca3ec940c126977df0c
 SHA512:
-  metadata.gz: 20ed071145a817ffa93933ea8db69585a64edc7bfd88931420126a2a82a5c096ff34b5b94fff2a12c3a092de20dd742e1df637355df20994f7d93c57965a0e7a
-  data.tar.gz: d77df77a8b6c6a9bf050403fb05c791fa02dd5fa350aa663e0d23b2445d1269110690321c3f8f8f9593fecba1a9e3013cb30e4b6a5f3d9327f042ecba6b80ae7
+  metadata.gz: f55e9b8235489c32e792dcd947195a2332fa402cb35ee2923f653d3fc318dfdf6370f8ebcf493c551ff267a8e1f8ecb48739e15c7d35df882b9c5c6d62fcb01a
+  data.tar.gz: 919af379b17dc1baaf24ad0997d8fa1a6dc6167baba7104178c0c6821ab970c0530a0ef53825ea1de773e974b28c15ce09ed732be026d1ee660272d751dd5c76

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.4.3
+
+- Unified composer. The message box, attach button and send button are now one
+  bordered container (the textarea on top, a toolbar row with the tools on the
+  left and a circular send on the right) that lights up on focus — instead of a
+  textarea flanked by loose buttons. Reads as a single control, closer to what
+  people expect from a chat composer. Pending-file chips ride inside the box.
+
 ## 0.4.2
 
 - Breathing room between the widget's pending-file chips and the composer —

data/lib/livechat/version.rb

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

data/lib/livechat/widget.js

@@ -245,9 +245,22 @@
     emailRowEl = buildEmailRow();
     panel.appendChild(emailRowEl);
 
+    // The composer is one bordered box: the textarea on top, a toolbar row
+    // (tools on the left, send on the right) below — so it reads as a single
+    // control, not a textarea flanked by loose buttons.
     formEl = document.createElement("form");
     formEl.id = "lvc-form";
+
+    // Pending-file chips sit at the top of the box, inside the border.
+    if (config.attachments) {
+      filesBarEl = document.createElement("div");
+      filesBarEl.id = "lvc-files";
+      filesBarEl.hidden = true;
+      formEl.appendChild(filesBarEl);
+    }
+
     inputEl = document.createElement("textarea");
+    inputEl.id = "lvc-input";
     inputEl.rows = 1;
     inputEl.placeholder = config.labels.placeholder;
     inputEl.setAttribute("aria-label", config.labels.placeholder);
@@ -258,32 +271,15 @@
         send();
       }
     });
-    var sendButton = document.createElement("button");
-    sendButton.type = "submit";
-    sendButton.setAttribute("aria-label", config.labels.send);
-    sendButton.title = config.labels.send;
-    // Paper airplane (Heroicons, MIT). CSS mirrors it for RTL.
-    sendButton.innerHTML =
-      '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">' +
-      '<path fill="currentColor" d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 ' +
-      "7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 " +
-      "60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 " +
-      '0 3.478 2.404Z"/></svg>';
     formEl.appendChild(inputEl);
-    formEl.appendChild(sendButton);
-    formEl.addEventListener("submit", function (event) {
-      event.preventDefault();
-      send();
-    });
 
-    // Attachments: a paperclip that opens the file picker, plus a bar of
-    // chips for the files waiting to be sent. Only when the host has them on.
-    if (config.attachments) {
-      filesBarEl = document.createElement("div");
-      filesBarEl.id = "lvc-files";
-      filesBarEl.hidden = true;
-      panel.appendChild(filesBarEl);
+    var toolbar = document.createElement("div");
+    toolbar.id = "lvc-toolbar";
+    var tools = document.createElement("div");
+    tools.id = "lvc-tools";
 
+    // Attachments: a paperclip in the toolbar that opens the file picker.
+    if (config.attachments) {
       fileInputEl = document.createElement("input");
       fileInputEl.type = "file";
       fileInputEl.multiple = true;
@@ -296,18 +292,40 @@
       var attach = document.createElement("button");
       attach.type = "button";
       attach.id = "lvc-attach";
+      attach.className = "lvc-tool";
       attach.setAttribute("aria-label", config.labels.attach);
       attach.title = config.labels.attach;
       // Paperclip (Heroicons, MIT).
       attach.innerHTML =
-        '<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">' +
+        '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">' +
         '<path fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" ' +
         'stroke-linejoin="round" d="M18.4 8.6 9.9 17a3.5 3.5 0 0 1-5-5l8.5-8.4a2.3 2.3 0 0 1 ' +
         '3.3 3.3l-8.5 8.4a1.1 1.1 0 0 1-1.6-1.6l7.8-7.8"/></svg>';
       attach.addEventListener("click", function () { fileInputEl.click(); });
-      formEl.insertBefore(attach, inputEl);
+      tools.appendChild(attach);
       formEl.appendChild(fileInputEl);
     }
+    toolbar.appendChild(tools);
+
+    var sendButton = document.createElement("button");
+    sendButton.type = "submit";
+    sendButton.id = "lvc-send";
+    sendButton.setAttribute("aria-label", config.labels.send);
+    sendButton.title = config.labels.send;
+    // Paper airplane (Heroicons, MIT). CSS mirrors it for RTL.
+    sendButton.innerHTML =
+      '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">' +
+      '<path fill="currentColor" d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 ' +
+      "7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 " +
+      "60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 " +
+      '0 3.478 2.404Z"/></svg>';
+    toolbar.appendChild(sendButton);
+
+    formEl.appendChild(toolbar);
+    formEl.addEventListener("submit", function (event) {
+      event.preventDefault();
+      send();
+    });
 
     panel.appendChild(formEl);
 
@@ -818,25 +836,28 @@
       "background:var(--lvc-bg);color:var(--lvc-text);font:inherit}" +
       "#lvc-email button{padding:6px 10px;border:1px solid var(--lvc-border);border-radius:8px;" +
       "background:var(--lvc-surface);color:var(--lvc-text);font:inherit;cursor:pointer}" +
-      "#lvc-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--lvc-border);" +
-      "background:var(--lvc-surface)}" +
-      "#lvc-form textarea{flex:1;resize:none;border:1px solid var(--lvc-border);border-radius:10px;" +
-      "padding:8px 10px;font:inherit;background:var(--lvc-bg);color:var(--lvc-text);max-height:120px}" +
-      "#lvc-form textarea:focus{outline:2px solid var(--lvc-accent);outline-offset:-1px}" +
-      "#lvc-form button{border:none;border-radius:10px;background:var(--lvc-accent);" +
-      "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)}" +
-      // Attach button sits alongside the send button, quieter (it's secondary).
-      // Selector repeats the id twice so the quiet look outranks the shared
-      // `#lvc-form button` accent-fill rule (else the paperclip goes solid blue).
-      "#lvc-root #lvc-attach{border:none;background:none;color:var(--lvc-muted);width:38px;min-width:38px;" +
-      "height:40px;align-self:flex-end;display:flex;align-items:center;justify-content:center;" +
-      "cursor:pointer;border-radius:10px}" +
-      "#lvc-root #lvc-attach:hover{background:var(--lvc-bg);color:var(--lvc-text)}" +
-      // Pending-file chips above the composer.
-      "#lvc-files{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}" +
+      // The composer is one bordered box (Intercom-style): textarea on top, a
+      // toolbar row below. focus-within lights the whole box, so it reads as a
+      // single control.
+      "#lvc-form{display:flex;flex-direction:column;gap:6px;margin:10px 12px;padding:8px 10px;" +
+      "border:1px solid var(--lvc-border);border-radius:16px;background:var(--lvc-bg)}" +
+      "#lvc-form:focus-within{border-color:var(--lvc-accent);box-shadow:0 0 0 1px var(--lvc-accent)}" +
+      "#lvc-root #lvc-input{border:none;background:none;resize:none;font:inherit;color:var(--lvc-text);" +
+      "padding:4px 4px 0;max-height:120px;outline:none}" +
+      "#lvc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}" +
+      "#lvc-tools{display:flex;align-items:center;gap:2px}" +
+      // Tool buttons (attach, and room for more) are quiet — the accent is the
+      // send button's alone.
+      "#lvc-root .lvc-tool{border:none;background:none;color:var(--lvc-muted);width:32px;height:32px;" +
+      "display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;padding:0}" +
+      "#lvc-root .lvc-tool:hover{background:var(--lvc-border);color:var(--lvc-text)}" +
+      "#lvc-send{border:none;border-radius:50%;background:var(--lvc-accent);color:var(--lvc-accent-text);" +
+      "width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;" +
+      "cursor:pointer;padding:0}" +
+      "#lvc-send:disabled{opacity:.5;cursor:default}" +
+      "#lvc-root[dir=rtl] #lvc-send svg{transform:scaleX(-1)}" +
+      // Pending-file chips ride at the top of the composer box.
+      "#lvc-files{display:flex;flex-wrap:wrap;gap:6px;padding:2px 2px 0}" +
       "#lvc-files[hidden]{display:none}" +
       "#lvc-root .lvc-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;" +
       "padding:4px 6px 4px 10px;border:1px solid var(--lvc-border);border-radius:999px;" +
@@ -862,9 +883,9 @@
       "{left:0;right:0;top:0;bottom:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;" +
       "border-radius:0;border:none}" +
       // 16px stops iOS Safari from zoom-jumping into focused fields.
-      "#lvc-root #lvc-form textarea,#lvc-root #lvc-email input{font-size:16px}" +
-      // Keep the composer above the iPhone home indicator.
-      "#lvc-root #lvc-form{padding-bottom:calc(10px + env(safe-area-inset-bottom))}" +
+      "#lvc-root #lvc-input,#lvc-root #lvc-email input{font-size:16px}" +
+      // Keep the composer box above the iPhone home indicator.
+      "#lvc-root #lvc-form{margin-bottom:calc(10px + env(safe-area-inset-bottom))}" +
       "}" +
       // 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;" +

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.4.3
 platform: ruby
 authors:
 - Yaroslav Shmarov