livechat 0.4.0 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4589546ac2f8ee66f5fab13591998a651425a7afdb8811fd9b24dd50e7baa65
-  data.tar.gz: 8e49eba0d5232f569ce96cb681ead311749247ef3eeb476d2ea4e2fe53bda2ad
+  metadata.gz: f42dfde953e1643e5cc5fbfce81dc237376788709890a6254a4800bec927f51d
+  data.tar.gz: 76e741f442b6b847d3aa4edd37432ee55f2fe6ac9d8d38a356bf716023f4e146
 SHA512:
-  metadata.gz: a5ecb5d39149403a4da90f828ddd0bad398c0ad431300237a11063d18db31f989ab4f899ab834ba9801c88085d02367541e8e88b61db0563039d475eca1febac
-  data.tar.gz: 2160a9f6928f2acd664a36267faac734bdb462311d0ad1efe2429f56687de91f22e149c483e1561e65666aec1cb6b8db457f53b6ca92bdf3c89f2d1f14699a0c
+  metadata.gz: 20ed071145a817ffa93933ea8db69585a64edc7bfd88931420126a2a82a5c096ff34b5b94fff2a12c3a092de20dd742e1df637355df20994f7d93c57965a0e7a
+  data.tar.gz: d77df77a8b6c6a9bf050403fb05c791fa02dd5fa350aa663e0d23b2445d1269110690321c3f8f8f9593fecba1a9e3013cb30e4b6a5f3d9327f042ecba6b80ae7

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.4.2
+
+- Breathing room between the widget's pending-file chips and the composer —
+  the chip row now has bottom padding, so it no longer sits flush against the
+  message input.
+
+## 0.4.1
+
+- Consistent attachment UI across both sides. The inbox reply now shows the
+  same quiet paperclip + file chips (with per-file remove) as the visitor
+  widget, instead of the browser's raw "Choose Files" control — progressively
+  enhanced, so the native input still works without JavaScript. Also fixed the
+  widget's attach button rendering as a solid-blue second button (a CSS
+  specificity slip); it's now a quiet paperclip, with the accent reserved for
+  Send.
+
 ## 0.4.0
 
 - **File attachments.** Visitors and agents can attach images and documents to

data/app/views/layouts/livechat/application.html.erb

@@ -98,7 +98,19 @@
     .reply textarea { resize: vertical; min-height: 44px; max-height: 200px; padding: 8px 10px;
                       border: 1px solid var(--border); border-radius: 10px; font: inherit;
                       background: var(--bg); color: var(--text); }
-    .reply input[type=file] { font-size: 12px; color: var(--muted); }
+    .reply input[type=file].reply-file { font-size: 12px; color: var(--muted); }
+    .reply button.attach { align-self: flex-end; width: 42px; min-width: 42px; height: 42px; padding: 0;
+                           display: flex; align-items: center; justify-content: center; color: var(--muted);
+                           background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
+    .reply button.attach:hover { color: var(--text); background: var(--bg); }
+    .reply .chips { display: flex; flex-wrap: wrap; gap: 6px; }
+    .reply .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
+                   padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 999px;
+                   background: var(--bg); font-size: 12px; }
+    .reply .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
+    .reply .chip-x { padding: 0 2px; border: none; background: none; color: var(--muted);
+                     font-size: 16px; line-height: 1; cursor: pointer; }
+    .reply .chip-x:hover { color: var(--text); }
     .reply button.send { align-self: flex-end; width: 42px; min-width: 42px; height: 42px; padding: 0;
                          display: flex; align-items: center; justify-content: center;
                          background: var(--accent); border-color: var(--accent); color: var(--accent-text);

data/app/views/livechat/conversations/show.html.erb

@@ -65,8 +65,10 @@
     <div class="compose">
       <%= form.text_area :body, rows: 2, autofocus: true, required: !Livechat.attachments_enabled?,
                          placeholder: t('livechat.dashboard.reply_placeholder', default: 'Write your reply…') %>
+      <%# dashboard.js hides this and swaps in a paperclip button + file chips.
+          Left plain as a no-JS fallback so agents can still attach without it. %>
       <% if Livechat.attachments_enabled? %>
-        <%= form.file_field :files, multiple: true,
+        <%= form.file_field :files, multiple: true, class: 'reply-file',
                             aria: { label: t('livechat.dashboard.attach', default: 'Attach files') } %>
       <% end %>
     </div>

data/lib/livechat/dashboard.js

@@ -23,8 +23,78 @@
   ready(function () {
     watchIndex();
     watchThread();
+    enhanceReplyAttachments();
   });
 
+  // Progressive enhancement for the reply form's file input: hide the raw
+  // control and swap in a quiet paperclip plus file chips, matching the
+  // visitor widget. Without JS the native input stays and still works.
+  function enhanceReplyAttachments() {
+    var form = document.querySelector("form.reply");
+    if (!form) return;
+    var input = form.querySelector("input[type=file]");
+    if (!input) return;
+
+    input.hidden = true;
+    var canEdit = typeof DataTransfer !== "undefined"; // per-file removal needs it
+
+    var button = document.createElement("button");
+    button.type = "button";
+    button.className = "attach";
+    var label = input.getAttribute("aria-label") || "Attach files";
+    button.setAttribute("aria-label", label);
+    button.title = label;
+    // Paperclip (Heroicons, MIT) — same icon as the widget.
+    button.innerHTML =
+      '<svg viewBox="0 0 24 24" width="20" height="20" 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>';
+    button.addEventListener("click", function () { input.click(); });
+    form.insertBefore(button, form.firstChild);
+
+    var chips = document.createElement("div");
+    chips.className = "chips";
+    chips.hidden = true;
+    var compose = form.querySelector(".compose") || form;
+    compose.insertBefore(chips, compose.firstChild);
+
+    input.addEventListener("change", render);
+
+    function render() {
+      var files = Array.prototype.slice.call(input.files);
+      chips.textContent = "";
+      chips.hidden = files.length === 0;
+      files.forEach(function (file, index) {
+        var chip = document.createElement("span");
+        chip.className = "chip";
+        var name = document.createElement("span");
+        name.className = "chip-name";
+        name.textContent = file.name;
+        chip.appendChild(name);
+        if (canEdit) {
+          var remove = document.createElement("button");
+          remove.type = "button";
+          remove.className = "chip-x";
+          remove.setAttribute("aria-label", "Remove file");
+          remove.innerHTML = "&times;";
+          remove.addEventListener("click", function () { removeAt(index); });
+          chip.appendChild(remove);
+        }
+        chips.appendChild(chip);
+      });
+    }
+
+    function removeAt(index) {
+      var kept = new DataTransfer();
+      Array.prototype.slice.call(input.files).forEach(function (file, i) {
+        if (i !== index) kept.items.add(file);
+      });
+      input.files = kept.files;
+      render();
+    }
+  }
+
   // The conversation list keeps itself fresh: when the server's token moves
   // (new message, new thread, resolve/reopen), just reload — unless the
   // agent is mid-search, whose typing must never be eaten.

data/lib/livechat/version.rb

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

data/lib/livechat/widget.js

@@ -829,12 +829,14 @@
       "#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).
-      "#lvc-attach{border:none;background:none;color:var(--lvc-muted);width:36px;min-width:36px;" +
+      // 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-attach:hover{background:var(--lvc-bg);color:var(--lvc-text)}" +
+      "#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:8px 12px 0}" +
+      "#lvc-files{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}" +
       "#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;" +

metadata

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