livechat 0.3.5 → 0.4.0

data/lib/livechat/dashboard.js

@@ -36,8 +36,9 @@
     var url = index.getAttribute("data-poll-url");
     var searchBox = document.querySelector(".filters input[type=search]");
 
-    setInterval(function () {
+    function check() {
       if (document.hidden) return;
+      // Never reload out from under an agent who is typing a search.
       if (searchBox && searchBox.value !== searchBox.defaultValue) return;
       if (searchBox && document.activeElement === searchBox) return;
       fetch(url, { headers: { Accept: "application/json" }, credentials: "same-origin" })
@@ -46,7 +47,12 @@
           if (data && data.token !== token) window.location.reload();
         })
         .catch(function () { /* transient network error — next tick retries */ });
-    }, POLL_MS);
+    }
+
+    setInterval(check, POLL_MS);
+    // Action Cable (opt-in): a nudge runs the check at once, so the list
+    // refreshes the instant something changes. Polling stays the fallback.
+    openCable(index, check);
   }
 
   function watchThread() {
@@ -97,11 +103,39 @@
       var bubble = document.createElement("div");
       bubble.className = "msg " + message.author;
       bubble.id = "message-" + message.id;
-      bubble.textContent = message.body;
+      if (message.body) bubble.appendChild(document.createTextNode(message.body));
+      appendAttachments(bubble, message.attachments);
       thread.appendChild(bubble);
     }
 
-    setInterval(function () {
+    // Mirrors the server-rendered thread: images inline, other files as links,
+    // all pointing at the engine's gated attachment route.
+    function appendAttachments(bubble, attachments) {
+      if (!attachments || !attachments.length) return;
+      var wrap = document.createElement("div");
+      wrap.className = "atts";
+      attachments.forEach(function (att) {
+        var link = document.createElement("a");
+        link.href = att.url;
+        link.target = "_blank";
+        link.rel = "noopener";
+        if (att.image) {
+          link.className = "att-img";
+          var img = document.createElement("img");
+          img.src = att.url;
+          img.alt = att.name;
+          img.loading = "lazy";
+          link.appendChild(img);
+        } else {
+          link.className = "att-file";
+          link.textContent = att.name;
+        }
+        wrap.appendChild(link);
+      });
+      bubble.appendChild(wrap);
+    }
+
+    function refresh() {
       if (document.hidden) return;
       // Only auto-scroll if the agent is already reading the latest — don't
       // yank them down while they've scrolled up through history.
@@ -114,6 +148,40 @@
           if (atBottom) thread.scrollTop = thread.scrollHeight;
         })
         .catch(function () { /* transient network error — next tick retries */ });
-    }, POLL_MS);
+    }
+
+    setInterval(refresh, POLL_MS);
+    // Action Cable (opt-in): a nudge fetches new messages at once instead of
+    // waiting for the next tick. Polling stays the fallback.
+    openCable(thread, refresh);
+  }
+
+  // A tiny Action Cable client over the native WebSocket protocol — no
+  // @rails/actioncable dependency, no build step. It opens only when the
+  // element carries a signed stream (push turned on); otherwise polling alone
+  // carries the page. The broadcast is a nudge with no payload: on any data
+  // message we just run onNudge, which refetches through the gated endpoint.
+  function openCable(el, onNudge) {
+    var path = el.getAttribute("data-cable-url");
+    var stream = el.getAttribute("data-cable-stream");
+    if (!path || !stream || !window.WebSocket) return;
+
+    var identifier = JSON.stringify({ channel: "Livechat::StreamChannel", signed_stream: stream });
+    var socket;
+    try {
+      var proto = location.protocol === "https:" ? "wss://" : "ws://";
+      socket = new WebSocket(proto + location.host + path, ["actioncable-v1-json"]);
+    } catch (e) {
+      return; // polling still covers the page
+    }
+    socket.onmessage = function (event) {
+      var data;
+      try { data = JSON.parse(event.data); } catch (e) { return; }
+      if (data.type === "welcome") {
+        socket.send(JSON.stringify({ command: "subscribe", identifier: identifier }));
+      } else if (data.message) {
+        onNudge();
+      }
+    };
   }
 })();

data/lib/livechat/engine.rb

@@ -9,5 +9,12 @@ module Livechat
         include Livechat::WidgetHelper
       end
     end
+
+    # The channel lives under lib/ (not app/channels), required only where
+    # Action Cable exists — so eager-load in an app without it never fails on
+    # a missing ActionCable::Channel::Base.
+    initializer 'livechat.action_cable' do
+      require 'livechat/channels' if defined?(ActionCable)
+    end
   end
 end

data/lib/livechat/version.rb

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

data/lib/livechat/widget.js

@@ -32,6 +32,11 @@
   var inputEl = null;
   var emailRowEl = null;
   var errorEl = null;
+  var fileInputEl = null;
+  var filesBarEl = null;
+  // Files the visitor has picked but not yet sent. Sent as multipart; kept
+  // out of the JSON path so a text-only message stays a plain JSON POST.
+  var pendingFiles = [];
   var isOpen = false;
   var lastFocused = null;
   // On phones the panel is a full-screen modal (focus trapped, page scroll
@@ -48,6 +53,13 @@
   var sending = false;
   var pollTimer = null;
   var fetching = false;
+  // Action Cable (opt-in). The widget learns its signed stream from the poll
+  // response — a per-conversation token it never has to guess — and opens a
+  // socket that nudges it to poll the instant a reply lands. cableDisabled
+  // latches on a rejected subscription so we fall back to polling for good.
+  var cableSocket = null;
+  var cableStream = null;
+  var cableDisabled = false;
 
   function ready(fn) {
     if (document.readyState === "loading") {
@@ -207,8 +219,17 @@
     listEl.id = "lvc-list";
     listEl.setAttribute("role", "log");
     listEl.setAttribute("aria-live", "polite");
+    // The opening greeting, styled as a support message so the panel reads
+    // like a conversation that's already been warmly opened. Deliberately a
+    // generic team label — never a fake individual, avatar, or presence
+    // (livechat is honest async support). It's client-only: never stored,
+    // never shown in the agent's inbox.
+    var greetingWho = document.createElement("div");
+    greetingWho.className = "lvc-who lvc-who-agent";
+    greetingWho.textContent = config.labels.team;
+    listEl.appendChild(greetingWho);
     var greeting = document.createElement("div");
-    greeting.className = "lvc-greeting";
+    greeting.className = "lvc-msg lvc-agent";
     greeting.textContent = config.labels.greeting;
     listEl.appendChild(greeting);
     panel.appendChild(listEl);
@@ -254,11 +275,87 @@
       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);
+
+      fileInputEl = document.createElement("input");
+      fileInputEl.type = "file";
+      fileInputEl.multiple = true;
+      fileInputEl.hidden = true;
+      fileInputEl.addEventListener("change", function () {
+        addFiles(fileInputEl.files);
+        fileInputEl.value = ""; // let the same file be re-picked after removal
+      });
+
+      var attach = document.createElement("button");
+      attach.type = "button";
+      attach.id = "lvc-attach";
+      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">' +
+        '<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);
+      formEl.appendChild(fileInputEl);
+    }
+
     panel.appendChild(formEl);
 
     return panel;
   }
 
+  // --- pending attachments ----------------------------------------------------
+
+  function addFiles(fileList) {
+    var room = Math.max(0, (config.maxAttachments || 5) - pendingFiles.length);
+    for (var i = 0; i < fileList.length && i < room; i++) {
+      pendingFiles.push(fileList[i]);
+    }
+    renderFiles();
+  }
+
+  function removeFile(index) {
+    pendingFiles.splice(index, 1);
+    renderFiles();
+  }
+
+  function clearFiles() {
+    pendingFiles = [];
+    renderFiles();
+  }
+
+  function renderFiles() {
+    if (!filesBarEl) return;
+    filesBarEl.textContent = "";
+    filesBarEl.hidden = pendingFiles.length === 0;
+    pendingFiles.forEach(function (file, index) {
+      var chip = document.createElement("span");
+      chip.className = "lvc-chip";
+      var name = document.createElement("span");
+      name.className = "lvc-chip-name";
+      name.textContent = file.name;
+      var remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "lvc-chip-x";
+      remove.setAttribute("aria-label", config.labels.removeFile);
+      remove.innerHTML = "&times;";
+      remove.addEventListener("click", function () { removeFile(index); });
+      chip.appendChild(name);
+      chip.appendChild(remove);
+      filesBarEl.appendChild(chip);
+    });
+  }
+
   // Guests only: one quiet row under the thread asking for an email, shown
   // once they have written and until they save one.
   function buildEmailRow() {
@@ -406,6 +503,7 @@
 
         hasThread = data.status !== null;
         hasEmail = !!data.email;
+        if (data.cable) ensureCable(data.cable);
 
         if (isOpen) {
           // Only an open panel renders (and thereby "consumes") messages;
@@ -490,29 +588,96 @@
 
     var bubble = document.createElement("div");
     bubble.className = "lvc-msg lvc-" + message.author;
-    bubble.textContent = message.body;
+    if (message.body) bubble.appendChild(document.createTextNode(message.body));
+    renderAttachments(bubble, message.attachments);
     bubble.title = new Date(message.at).toLocaleString();
     listEl.appendChild(bubble);
     scrollToBottom();
   }
 
+  // Images show inline (a thumbnail linking to the full file); everything
+  // else is a labelled download link. Both hit the engine's gated route.
+  function renderAttachments(bubble, attachments) {
+    if (!attachments || !attachments.length) return;
+    var wrap = document.createElement("div");
+    wrap.className = "lvc-atts";
+    attachments.forEach(function (att) {
+      var link = document.createElement("a");
+      link.href = att.url;
+      link.target = "_blank";
+      link.rel = "noopener";
+      if (att.image) {
+        link.className = "lvc-att-img";
+        var img = document.createElement("img");
+        img.src = att.url;
+        img.alt = att.name;
+        img.loading = "lazy";
+        link.appendChild(img);
+      } else {
+        link.className = "lvc-att-file";
+        link.textContent = att.name;
+      }
+      wrap.appendChild(link);
+    });
+    bubble.appendChild(wrap);
+  }
+
   function scrollToBottom() {
     if (listEl) listEl.scrollTop = listEl.scrollHeight;
   }
 
+  // --- realtime (optional) ----------------------------------------------------
+
+  // A tiny Action Cable client over the native WebSocket protocol — no
+  // @rails/actioncable dependency, no build step. Opens once per conversation
+  // stream; a data message is a nudge, so we just poll() through the normal
+  // gated path. Polling keeps running regardless, so this only ever makes the
+  // widget faster, never load-bearing.
+  function ensureCable(info) {
+    if (cableDisabled || !info.stream || !window.WebSocket) return;
+    if (cableStream === info.stream && cableSocket) return; // already connected
+
+    cableStream = info.stream;
+    var identifier = JSON.stringify({
+      channel: "Livechat::StreamChannel", signed_stream: info.stream
+    });
+    try {
+      if (cableSocket) cableSocket.close();
+      var proto = window.location.protocol === "https:" ? "wss://" : "ws://";
+      cableSocket = new WebSocket(proto + window.location.host + info.url, ["actioncable-v1-json"]);
+    } catch (e) {
+      cableSocket = null;
+      return;
+    }
+
+    cableSocket.onmessage = function (event) {
+      var data;
+      try { data = JSON.parse(event.data); } catch (e) { return; }
+      if (data.type === "welcome") {
+        cableSocket.send(JSON.stringify({ command: "subscribe", identifier: identifier }));
+      } else if (data.type === "reject_subscription") {
+        cableDisabled = true; // never retry; polling carries on
+        if (cableSocket) cableSocket.close();
+      } else if (data.message) {
+        poll();
+      }
+    };
+    cableSocket.onclose = function () {
+      cableSocket = null;
+      // Allow a reconnect on the next poll unless the server rejected us.
+      if (!cableDisabled) cableStream = null;
+    };
+  }
+
   function send() {
     var body = (inputEl.value || "").trim();
-    if (!body || sending) return;
+    if ((!body && !pendingFiles.length) || sending) return;
     sending = true;
     errorEl.hidden = true;
-    var button = formEl.querySelector("button");
+    var button = formEl.querySelector("button[type=submit]");
     button.disabled = true;
 
-    request("POST", "/messages", {
-      body: body,
-      page_url: window.location.href,
-      locale: config.locale
-    })
+    request("POST", "/messages", buildMessagePayload(body))
       .then(function (response) {
         return response.json().then(function (data) {
           return { ok: response.ok, data: data };
@@ -524,6 +689,7 @@
         if (result.ok) {
           inputEl.value = "";
           autogrow();
+          clearFiles();
           hasThread = true;
           appendMessage(result.data.message);
           syncEmailRow();
@@ -539,6 +705,20 @@
       });
   }
 
+  // Multipart only when there are files to carry — otherwise a plain JSON
+  // object, so text-only sends stay exactly as they were.
+  function buildMessagePayload(body) {
+    if (!pendingFiles.length) {
+      return { body: body, page_url: window.location.href, locale: config.locale };
+    }
+    var form = new FormData();
+    form.append("body", body);
+    form.append("page_url", window.location.href);
+    form.append("locale", config.locale);
+    pendingFiles.forEach(function (file) { form.append("files[]", file); });
+    return form;
+  }
+
   function showError(text) {
     errorEl.textContent = text;
     errorEl.hidden = false;
@@ -555,8 +735,13 @@
     if (method !== "GET") {
       var token = document.querySelector('meta[name="csrf-token"]');
       if (token) options.headers["X-CSRF-Token"] = token.content;
-      options.headers["Content-Type"] = "application/json";
-      options.body = JSON.stringify(body || {});
+      if (body instanceof FormData) {
+        // Let the browser set multipart Content-Type with its boundary.
+        options.body = body;
+      } else {
+        options.headers["Content-Type"] = "application/json";
+        options.body = JSON.stringify(body || {});
+      }
     }
     return fetch(config.endpoint + path, options);
   }
@@ -611,7 +796,6 @@
       "background:var(--lvc-bg);display:flex;flex-direction:column;gap:4px}" +
       // Class rules carry the #lvc-root prefix so they outrank the
       // id-level `#lvc-root *` reset above.
-      "#lvc-root .lvc-greeting{color:var(--lvc-muted);font-size:13px;margin-bottom:8px}" +
       "#lvc-root .lvc-who{font-size:11px;color:var(--lvc-muted);margin:8px 4px 2px}" +
       "#lvc-root .lvc-who-visitor{text-align:right}" +
       "#lvc-root[dir=rtl] .lvc-who-visitor{text-align:left}" +
@@ -644,6 +828,30 @@
       "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).
+      "#lvc-attach{border:none;background:none;color:var(--lvc-muted);width:36px;min-width:36px;" +
+      "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)}" +
+      // Pending-file chips above the composer.
+      "#lvc-files{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 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;" +
+      "background:var(--lvc-bg);font-size:12px}" +
+      "#lvc-root .lvc-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}" +
+      "#lvc-root .lvc-chip-x{border:none;background:none;color:var(--lvc-muted);font-size:16px;" +
+      "line-height:1;cursor:pointer;padding:0 2px}" +
+      "#lvc-root .lvc-chip-x:hover{color:var(--lvc-text)}" +
+      // Attachments inside a message bubble: thumbnails and file links.
+      "#lvc-root .lvc-atts{display:flex;flex-direction:column;gap:6px;margin-top:6px}" +
+      "#lvc-root .lvc-att-img{display:block}" +
+      "#lvc-root .lvc-att-img img{max-width:100%;max-height:220px;border-radius:8px;display:block}" +
+      "#lvc-root .lvc-att-file{display:inline-block;padding:6px 10px;border-radius:8px;" +
+      "background:rgba(0,0,0,.06);color:inherit;text-decoration:none;font-size:13px;" +
+      "overflow-wrap:anywhere}" +
+      "#lvc-root .lvc-att-file:hover{text-decoration:underline}" +
+      "#lvc-root .lvc-visitor .lvc-att-file{background:rgba(255,255,255,.2)}" +
       // Phones get the whole screen — a chat is an app screen, not a popup.
       // Selectors repeat the id twice so they outrank the rtl/no-launcher
       // desktop rules regardless of source order.

data/lib/livechat/widget.rb

@@ -68,6 +68,8 @@ module Livechat
           launcher: config.show_launcher ? true : false,
           appName: Livechat.app_name,
           accentColor: config.accent_color,
+          attachments: Livechat.attachments_enabled?,
+          maxAttachments: config.max_attachments,
           labels: labels
         }
         # Escape "</" so a value can't close the <script> block early.
@@ -99,7 +101,10 @@ module Livechat
           eventResolved: t(:event_resolved, 'Conversation resolved'),
           eventReopened: t(:event_reopened, 'Conversation reopened'),
           errorSend: t(:error_send, 'Could not send. Please try again.'),
-          unreadAria: t(:unread_aria, 'unread messages')
+          unreadAria: t(:unread_aria, 'unread messages'),
+          attach: t(:attach, 'Attach files'),
+          removeFile: t(:remove_file, 'Remove file'),
+          attachmentError: t(:attachment_error, 'Some files could not be sent.')
         }
       end
 

data/lib/livechat.rb

@@ -32,6 +32,37 @@ module Livechat
       !!config.authorize_agent.call(request)
     end
 
+    # File attachments are on only when the host has Active Storage AND hasn't
+    # switched them off. Guards every attachment path so the widget degrades
+    # to text-only rather than erroring where Active Storage is absent.
+    def attachments_enabled?
+      config.attach_files && Message.attachments_supported?
+    end
+
+    # Realtime push is opt-in and needs Action Cable loaded. Off by default:
+    # the widget and inbox poll, and only speed up when a host turns this on.
+    def action_cable_enabled?
+      config.action_cable && defined?(ActionCable) ? true : false
+    end
+
+    # Signs the Action Cable stream names handed to clients, so a subscriber
+    # can only listen to a conversation the server already let it see — the
+    # widget receives its stream token through the gated /conversation
+    # endpoint, never guessing one. Same idea as Turbo's signed streams.
+    def stream_verifier
+      @stream_verifier ||= Rails.application.message_verifier('livechat/stream')
+    end
+
+    def sign_stream(name)
+      stream_verifier.generate(name.to_s)
+    end
+
+    def verify_stream(token)
+      stream_verifier.verify(token.to_s)
+    rescue StandardError
+      nil
+    end
+
     def app_name
       config.app_name.presence || rails_app_name
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.3.5
+  version: 0.4.0
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -43,6 +43,7 @@ files:
 - README.md
 - Rakefile
 - app/controllers/livechat/application_controller.rb
+- app/controllers/livechat/attachments_controller.rb
 - app/controllers/livechat/conversations_controller.rb
 - app/controllers/livechat/messages_controller.rb
 - app/controllers/livechat/visitor_controller.rb
@@ -89,6 +90,7 @@ files:
 - lib/generators/livechat/install/templates/create_livechat_tables.rb.tt
 - lib/generators/livechat/install/templates/initializer.rb
 - lib/livechat.rb
+- lib/livechat/channels.rb
 - lib/livechat/configuration.rb
 - lib/livechat/dashboard.js
 - lib/livechat/engine.rb