livechat 0.4.3 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d674110938432200c4426cfe1c4bb5c551759316ac2468406fa4aeb4dcbf5919
-  data.tar.gz: 5b68f89574ab49bc74b40697f37c05137f2e2082bd91fca3ec940c126977df0c
+  metadata.gz: fd6a72ade19436355c068f67d4c036f6f84b66e32cd163e36f3022619fa1587c
+  data.tar.gz: c7936d6b60c1bdc5f509f44e186a16e21368b1b2328d54ac7dc7918ee2ab7893
 SHA512:
-  metadata.gz: f55e9b8235489c32e792dcd947195a2332fa402cb35ee2923f653d3fc318dfdf6370f8ebcf493c551ff267a8e1f8ecb48739e15c7d35df882b9c5c6d62fcb01a
-  data.tar.gz: 919af379b17dc1baaf24ad0997d8fa1a6dc6167baba7104178c0c6821ab970c0530a0ef53825ea1de773e974b28c15ce09ed732be026d1ee660272d751dd5c76
+  metadata.gz: 44f6a47b5879c17554031dc0d0f5a1e92943c180aaa08c855edc803682b3a558a3b232ab9fac16982f6bf2423505a72ca83e3173ad4e07491dc618bda43e24ef
+  data.tar.gz: 9c025865ff9824eac83660af0775e74e08a508472056ca29dffc5c129f6b69f3c291db006a31a1f8b26a43ba0dfea9f29bdfb992eb0f30ee6a91b5db4cf1d8bd

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.4.4
+
+- Expand / collapse the chat on desktop. A new header control grows the panel
+  to a roomier size (and back) for long threads and image-heavy chats; the
+  choice is remembered across Turbo visits. Hidden on phones, where the panel
+  is already full-screen. Translated across all 26 locales.
+- Composer polish: dropped the doubled focus ring (one quiet accent border
+  now), and flattened Safari's default textarea bevel that showed as a second
+  box inside the composer.
+- Fixed a message bubble bleeding over the header's bottom edge while scrolling
+  a long thread (a flexbox scroll-containment + stacking fix).
+
 ## 0.4.3
 
 - Unified composer. The message box, attach button and send button are now one

data/config/locales/livechat.ar.yml

@@ -20,6 +20,8 @@ ar:
     attach: "إرفاق ملفات"
     remove_file: "إزالة الملف"
     attachment_error: "تعذر إرسال بعض الملفات."
+    expand: "تكبير"
+    collapse: "تصغير"
     attachments:
       too_many: "ملفات كثيرة جدًا (بحد أقصى %{count})."
       too_large: "%{name} كبير جدًا."

data/config/locales/livechat.bg.yml

@@ -20,6 +20,8 @@ bg:
     attach: "Прикачване на файлове"
     remove_file: "Премахване на файла"
     attachment_error: "Някои файлове не можаха да бъдат изпратени."
+    expand: "Уголеми"
+    collapse: "Смали"
     attachments:
       too_many: "Твърде много файлове (макс. %{count})."
       too_large: "%{name} е твърде голям."

data/config/locales/livechat.bn.yml

@@ -20,6 +20,8 @@ bn:
     attach: "ফাইল সংযুক্ত করুন"
     remove_file: "ফাইল সরান"
     attachment_error: "কিছু ফাইল পাঠানো যায়নি।"
+    expand: "বড় করুন"
+    collapse: "ছোট করুন"
     attachments:
       too_many: "অনেক বেশি ফাইল (সর্বোচ্চ %{count})।"
       too_large: "%{name} খুব বড়।"

data/config/locales/livechat.de.yml

@@ -20,6 +20,8 @@ de:
     attach: "Dateien anhängen"
     remove_file: "Datei entfernen"
     attachment_error: "Einige Dateien konnten nicht gesendet werden."
+    expand: "Vergrößern"
+    collapse: "Verkleinern"
     attachments:
       too_many: "Zu viele Dateien (max. %{count})."
       too_large: "%{name} ist zu groß."

data/config/locales/livechat.el.yml

@@ -20,6 +20,8 @@ el:
     attach: "Επισύναψη αρχείων"
     remove_file: "Αφαίρεση αρχείου"
     attachment_error: "Ορισμένα αρχεία δεν ήταν δυνατό να σταλούν."
+    expand: "Μεγέθυνση"
+    collapse: "Σμίκρυνση"
     attachments:
       too_many: "Πάρα πολλά αρχεία (έως %{count})."
       too_large: "Το %{name} είναι πολύ μεγάλο."

data/config/locales/livechat.en.yml

@@ -20,6 +20,8 @@ en:
     attach: "Attach files"
     remove_file: "Remove file"
     attachment_error: "Some files could not be sent."
+    expand: "Expand"
+    collapse: "Collapse"
     attachments:
       too_many: "Too many files (max %{count})."
       too_large: "%{name} is too large."

data/config/locales/livechat.es.yml

@@ -20,6 +20,8 @@ es:
     attach: "Adjuntar archivos"
     remove_file: "Quitar archivo"
     attachment_error: "No se pudieron enviar algunos archivos."
+    expand: "Ampliar"
+    collapse: "Reducir"
     attachments:
       too_many: "Demasiados archivos (máx. %{count})."
       too_large: "%{name} es demasiado grande."

data/config/locales/livechat.fr.yml

@@ -20,6 +20,8 @@ fr:
     attach: "Joindre des fichiers"
     remove_file: "Retirer le fichier"
     attachment_error: "Certains fichiers n'ont pas pu être envoyés."
+    expand: "Agrandir"
+    collapse: "Réduire"
     attachments:
       too_many: "Trop de fichiers (max %{count})."
       too_large: "%{name} est trop volumineux."

data/config/locales/livechat.hi.yml

@@ -20,6 +20,8 @@ hi:
     attach: "फ़ाइलें संलग्न करें"
     remove_file: "फ़ाइल हटाएं"
     attachment_error: "कुछ फ़ाइलें भेजी नहीं जा सकीं।"
+    expand: "बड़ा करें"
+    collapse: "छोटा करें"
     attachments:
       too_many: "बहुत सारी फ़ाइलें (अधिकतम %{count})।"
       too_large: "%{name} बहुत बड़ी है।"

data/config/locales/livechat.hr.yml

@@ -20,6 +20,8 @@ hr:
     attach: "Priloži datoteke"
     remove_file: "Ukloni datoteku"
     attachment_error: "Neke datoteke nije bilo moguće poslati."
+    expand: "Povećaj"
+    collapse: "Smanji"
     attachments:
       too_many: "Previše datoteka (najviše %{count})."
       too_large: "%{name} je prevelika."

data/config/locales/livechat.id.yml

@@ -20,6 +20,8 @@ id:
     attach: "Lampirkan file"
     remove_file: "Hapus file"
     attachment_error: "Beberapa file tidak dapat dikirim."
+    expand: "Perbesar"
+    collapse: "Perkecil"
     attachments:
       too_many: "Terlalu banyak file (maks. %{count})."
       too_large: "%{name} terlalu besar."

data/config/locales/livechat.it.yml

@@ -20,6 +20,8 @@ it:
     attach: "Allega file"
     remove_file: "Rimuovi file"
     attachment_error: "Non è stato possibile inviare alcuni file."
+    expand: "Ingrandisci"
+    collapse: "Riduci"
     attachments:
       too_many: "Troppi file (max %{count})."
       too_large: "%{name} è troppo grande."

data/config/locales/livechat.ja.yml

@@ -20,6 +20,8 @@ ja:
     attach: "ファイルを添付"
     remove_file: "ファイルを削除"
     attachment_error: "一部のファイルを送信できませんでした。"
+    expand: "拡大"
+    collapse: "縮小"
     attachments:
       too_many: "ファイルが多すぎます(最大%{count}件)。"
       too_large: "%{name}が大きすぎます。"

data/config/locales/livechat.ko.yml

@@ -20,6 +20,8 @@ ko:
     attach: "파일 첨부"
     remove_file: "파일 제거"
     attachment_error: "일부 파일을 보내지 못했습니다."
+    expand: "확대"
+    collapse: "축소"
     attachments:
       too_many: "파일이 너무 많습니다 (최대 %{count}개)."
       too_large: "%{name}이(가) 너무 큽니다."

data/config/locales/livechat.lb.yml

@@ -20,6 +20,8 @@ lb:
     attach: "Dateien uschléissen"
     remove_file: "Datei ewechhuelen"
     attachment_error: "E puer Dateie konnten net geschéckt ginn."
+    expand: "Vergréisseren"
+    collapse: "Verklengeren"
     attachments:
       too_many: "Ze vill Dateien (max %{count})."
       too_large: "%{name} ass ze grouss."

data/config/locales/livechat.nl.yml

@@ -20,6 +20,8 @@ nl:
     attach: "Bestanden bijvoegen"
     remove_file: "Bestand verwijderen"
     attachment_error: "Sommige bestanden konden niet worden verzonden."
+    expand: "Vergroten"
+    collapse: "Verkleinen"
     attachments:
       too_many: "Te veel bestanden (max. %{count})."
       too_large: "%{name} is te groot."

data/config/locales/livechat.pl.yml

@@ -20,6 +20,8 @@ pl:
     attach: "Załącz pliki"
     remove_file: "Usuń plik"
     attachment_error: "Nie udało się wysłać niektórych plików."
+    expand: "Powiększ"
+    collapse: "Zmniejsz"
     attachments:
       too_many: "Zbyt wiele plików (maks. %{count})."
       too_large: "%{name} jest za duży."

data/config/locales/livechat.pt.yml

@@ -20,6 +20,8 @@ pt:
     attach: "Anexar arquivos"
     remove_file: "Remover arquivo"
     attachment_error: "Não foi possível enviar alguns arquivos."
+    expand: "Ampliar"
+    collapse: "Reduzir"
     attachments:
       too_many: "Muitos arquivos (máx. %{count})."
       too_large: "%{name} é muito grande."

data/config/locales/livechat.ro.yml

@@ -20,6 +20,8 @@ ro:
     attach: "Atașează fișiere"
     remove_file: "Elimină fișierul"
     attachment_error: "Unele fișiere nu au putut fi trimise."
+    expand: "Mărește"
+    collapse: "Micșorează"
     attachments:
       too_many: "Prea multe fișiere (max. %{count})."
       too_large: "%{name} este prea mare."

data/config/locales/livechat.ru.yml

@@ -20,6 +20,8 @@ ru:
     attach: "Прикрепить файлы"
     remove_file: "Удалить файл"
     attachment_error: "Некоторые файлы не удалось отправить."
+    expand: "Развернуть"
+    collapse: "Свернуть"
     attachments:
       too_many: "Слишком много файлов (макс. %{count})."
       too_large: "%{name} слишком большой."

data/config/locales/livechat.th.yml

@@ -20,6 +20,8 @@ th:
     attach: "แนบไฟล์"
     remove_file: "นำไฟล์ออก"
     attachment_error: "ไม่สามารถส่งไฟล์บางไฟล์ได้"
+    expand: "ขยาย"
+    collapse: "ย่อ"
     attachments:
       too_many: "ไฟล์มากเกินไป (สูงสุด %{count})"
       too_large: "%{name} มีขนาดใหญ่เกินไป"

data/config/locales/livechat.tr.yml

@@ -20,6 +20,8 @@ tr:
     attach: "Dosya ekle"
     remove_file: "Dosyayı kaldır"
     attachment_error: "Bazı dosyalar gönderilemedi."
+    expand: "Büyüt"
+    collapse: "Küçült"
     attachments:
       too_many: "Çok fazla dosya (en fazla %{count})."
       too_large: "%{name} çok büyük."

data/config/locales/livechat.uk.yml

@@ -20,6 +20,8 @@ uk:
     attach: "Прикріпити файли"
     remove_file: "Видалити файл"
     attachment_error: "Деякі файли не вдалося надіслати."
+    expand: "Розгорнути"
+    collapse: "Згорнути"
     attachments:
       too_many: "Забагато файлів (максимум %{count})."
       too_large: "%{name} завеликий."

data/config/locales/livechat.ur.yml

@@ -20,6 +20,8 @@ ur:
     attach: "فائلیں منسلک کریں"
     remove_file: "فائل ہٹائیں"
     attachment_error: "کچھ فائلیں نہیں بھیجی جا سکیں۔"
+    expand: "بڑا کریں"
+    collapse: "چھوٹا کریں"
     attachments:
       too_many: "بہت زیادہ فائلیں (زیادہ سے زیادہ %{count})۔"
       too_large: "%{name} بہت بڑی ہے۔"

data/config/locales/livechat.vi.yml

@@ -20,6 +20,8 @@ vi:
     attach: "Đính kèm tệp"
     remove_file: "Xóa tệp"
     attachment_error: "Không thể gửi một số tệp."
+    expand: "Mở rộng"
+    collapse: "Thu gọn"
     attachments:
       too_many: "Quá nhiều tệp (tối đa %{count})."
       too_large: "%{name} quá lớn."

data/config/locales/livechat.zh-CN.yml

@@ -20,6 +20,8 @@
     attach: "附加文件"
     remove_file: "移除文件"
     attachment_error: "部分文件无法发送。"
+    expand: "放大"
+    collapse: "缩小"
     attachments:
       too_many: "文件过多（最多 %{count} 个）。"
       too_large: "%{name} 太大。"

data/lib/livechat/version.rb

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

data/lib/livechat/widget.js

@@ -39,6 +39,10 @@
   var pendingFiles = [];
   var isOpen = false;
   var lastFocused = null;
+  var expandBtnEl = null;
+  // Desktop-only: a bigger panel, remembered across Turbo visits. Never
+  // applied on phones, where the panel is already full-screen.
+  var expanded = false;
   // On phones the panel is a full-screen modal (focus trapped, page scroll
   // locked); on desktop it stays a non-modal popover you can chat alongside.
   var mobileModal = window.matchMedia ? window.matchMedia("(max-width: 480px)") : null;
@@ -70,6 +74,7 @@
   }
 
   ready(function () {
+    expanded = sessionGet("livechat_expanded") === "1";
     document.addEventListener("keydown", function (event) {
       if (event.key === "Escape" && isOpen) closePanel();
     });
@@ -100,6 +105,7 @@
     injectStyles();
     mount();
     applyBrandColor();
+    applyExpanded(); // a Turbo swap makes a fresh root — restore the size class
     syncOpenerBadges(); // a Turbo visit brings fresh openers — restamp them
 
     if (sessionGet("livechat_open") === "1") {
@@ -206,14 +212,27 @@
     titles.appendChild(subtitle);
     header.appendChild(titles);
 
+    var actions = document.createElement("div");
+    actions.id = "lvc-actions";
+
+    // Grow/shrink the desktop panel. Hidden on phones (already full-screen).
+    expandBtnEl = document.createElement("button");
+    expandBtnEl.type = "button";
+    expandBtnEl.id = "lvc-expand";
+    expandBtnEl.addEventListener("click", toggleExpand);
+    actions.appendChild(expandBtnEl);
+
     var close = document.createElement("button");
     close.type = "button";
     close.id = "lvc-close";
     close.setAttribute("aria-label", config.labels.close);
     close.innerHTML = "×";
     close.addEventListener("click", closePanel);
-    header.appendChild(close);
+    actions.appendChild(close);
+
+    header.appendChild(actions);
     panel.appendChild(header);
+    applyExpanded(); // set the panel size + the button's icon/label
 
     listEl = document.createElement("div");
     listEl.id = "lvc-list";
@@ -465,6 +484,38 @@
     return !!(mobileModal && mobileModal.matches);
   }
 
+  // --- expand / collapse (desktop) --------------------------------------------
+
+  var EXPAND_ICON =
+    '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" ' +
+    'stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>' +
+    '<line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
+  var COLLAPSE_ICON =
+    '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" ' +
+    'stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/>' +
+    '<line x1="14" y1="10" x2="21" y2="3"/><line x1="10" y1="14" x2="3" y2="21"/></svg>';
+
+  function toggleExpand() {
+    if (isMobileModal()) return;
+    expanded = !expanded;
+    sessionSet("livechat_expanded", expanded ? "1" : "");
+    applyExpanded();
+  }
+
+  // Reflect the current state onto the panel and the header button. A no-op on
+  // phones — the class is never added there, so the full-screen panel stands.
+  function applyExpanded() {
+    var on = expanded && !isMobileModal();
+    if (root) root.classList.toggle("lvc-expanded", on);
+    if (!expandBtnEl) return;
+    var label = on ? config.labels.collapse : config.labels.expand;
+    expandBtnEl.setAttribute("aria-label", label);
+    expandBtnEl.title = label;
+    expandBtnEl.innerHTML = on ? COLLAPSE_ICON : EXPAND_ICON;
+  }
+
   // Tab cycles inside the panel only while it is the full-screen mobile
   // modal; the desktop popover deliberately lets focus reach the page.
   function trapFocus(event) {
@@ -803,14 +854,28 @@
       "#lvc-panel[hidden]{display:none}" +
       "#lvc-root[dir=rtl] #lvc-panel{right:auto;left:20px}" +
       "#lvc-root.lvc-no-launcher #lvc-panel{bottom:20px;max-height:calc(100dvh - 40px)}" +
-      "#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)}" +
+      // position/z-index keep the header above the scrolling list, and
+      // flex-shrink:0 stops it collapsing — together they stop a message
+      // bubble from bleeding over the header's rounded bottom edge.
+      "#lvc-header{position:relative;z-index:2;flex-shrink:0;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}" +
       "#lvc-header span{display:block;font-size:12px;opacity:.85;margin-top:2px}" +
+      "#lvc-actions{display:flex;align-items:center;gap:2px}" +
       "#lvc-close{border:none;background:none;color:var(--lvc-accent-text);font-size:22px;" +
       "line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}" +
       "#lvc-close:hover{background:rgba(255,255,255,.15)}" +
-      "#lvc-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px;" +
+      "#lvc-root #lvc-expand{border:none;background:none;color:var(--lvc-accent-text);cursor:pointer;" +
+      "padding:5px 6px;border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:.9}" +
+      "#lvc-root #lvc-expand:hover{background:rgba(255,255,255,.15);opacity:1}" +
+      // Desktop only: a roomier panel for long threads and image-heavy chats.
+      // Guarded by min-width so it can never shrink the full-screen mobile panel.
+      "@media(min-width:481px){#lvc-root.lvc-expanded #lvc-panel{width:min(460px,92vw);" +
+      "height:min(680px,88dvh);max-height:88dvh}}" +
+      // min-height:0 lets this flex child actually scroll within the panel
+      // instead of overflowing it (the classic flexbox scroll gotcha).
+      "#lvc-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px;" +
       "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.
@@ -841,9 +906,12 @@
       // 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}" +
+      // A single, quiet accent border on focus — no extra ring.
+      "#lvc-form:focus-within{border-color:var(--lvc-accent)}" +
+      // appearance:none flattens Safari's default textarea bevel, which would
+      // otherwise show as a second inset box inside the composer.
+      "#lvc-root #lvc-input{-webkit-appearance:none;appearance:none;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
@@ -882,6 +950,8 @@
       "#lvc-root #lvc-panel,#lvc-root[dir=rtl] #lvc-panel,#lvc-root.lvc-no-launcher #lvc-panel" +
       "{left:0;right:0;top:0;bottom:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;" +
       "border-radius:0;border:none}" +
+      // The panel is already full-screen here, so there's nothing to expand.
+      "#lvc-expand{display:none}" +
       // 16px stops iOS Safari from zoom-jumping into focused fields.
       "#lvc-root #lvc-input,#lvc-root #lvc-email input{font-size:16px}" +
       // Keep the composer box above the iPhone home indicator.

data/lib/livechat/widget.rb

@@ -104,7 +104,9 @@ module Livechat
           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.')
+          attachmentError: t(:attachment_error, 'Some files could not be sent.'),
+          expand: t(:expand, 'Expand'),
+          collapse: t(:collapse, 'Collapse')
         }
       end
 

metadata

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