livechat 0.4.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4589546ac2f8ee66f5fab13591998a651425a7afdb8811fd9b24dd50e7baa65
-  data.tar.gz: 8e49eba0d5232f569ce96cb681ead311749247ef3eeb476d2ea4e2fe53bda2ad
+  metadata.gz: 5996e3979cd73dab0019abd50f021bdec6abcf3953794dff646c056ecc2b3e92
+  data.tar.gz: 747930bfc368d5ba79683b8ef0890065415c3489f6180204b60fe7879294b916
 SHA512:
-  metadata.gz: a5ecb5d39149403a4da90f828ddd0bad398c0ad431300237a11063d18db31f989ab4f899ab834ba9801c88085d02367541e8e88b61db0563039d475eca1febac
-  data.tar.gz: 2160a9f6928f2acd664a36267faac734bdb462311d0ad1efe2429f56687de91f22e149c483e1561e65666aec1cb6b8db457f53b6ca92bdf3c89f2d1f14699a0c
+  metadata.gz: a3158ae2981632e866fa0d7abbed03446a5f3cb64edc3d82dd0a12bb8c562b87b7804c5bf17770b10b8ce82bcd206972582c99aaf6545f8e0c35cbdd78c19ccd
+  data.tar.gz: 2a1eec1c1dc53d0a5d40ed8ac4f047132f2047e4e7ea9e8e1f103683411c9e21eb0ce38e57e4f98528927f040786f50b50ab1df4a5e9cc588cd601f5cc6ab824

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 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.1'
 end

data/lib/livechat/widget.js

@@ -829,10 +829,12 @@
       "#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[hidden]{display:none}" +

metadata

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