livechat 0.4.2 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f42dfde953e1643e5cc5fbfce81dc237376788709890a6254a4800bec927f51d
-  data.tar.gz: 76e741f442b6b847d3aa4edd37432ee55f2fe6ac9d8d38a356bf716023f4e146
+  metadata.gz: fd6a72ade19436355c068f67d4c036f6f84b66e32cd163e36f3022619fa1587c
+  data.tar.gz: c7936d6b60c1bdc5f509f44e186a16e21368b1b2328d54ac7dc7918ee2ab7893
 SHA512:
-  metadata.gz: 20ed071145a817ffa93933ea8db69585a64edc7bfd88931420126a2a82a5c096ff34b5b94fff2a12c3a092de20dd742e1df637355df20994f7d93c57965a0e7a
-  data.tar.gz: d77df77a8b6c6a9bf050403fb05c791fa02dd5fa350aa663e0d23b2445d1269110690321c3f8f8f9593fecba1a9e3013cb30e4b6a5f3d9327f042ecba6b80ae7
+  metadata.gz: 44f6a47b5879c17554031dc0d0f5a1e92943c180aaa08c855edc803682b3a558a3b232ab9fac16982f6bf2423505a72ca83e3173ad4e07491dc618bda43e24ef
+  data.tar.gz: 9c025865ff9824eac83660af0775e74e08a508472056ca29dffc5c129f6b69f3c291db006a31a1f8b26a43ba0dfea9f29bdfb992eb0f30ee6a91b5db4cf1d8bd

data/CHANGELOG.md

@@ -1,5 +1,25 @@
 # 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
+  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/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.2'
+  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";
@@ -245,9 +264,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 +290,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 +311,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);
 
@@ -447,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) {
@@ -785,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.
@@ -818,25 +901,31 @@
       "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)}" +
+      // 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
+      // 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;" +
@@ -861,10 +950,12 @@
       "#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-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;" +

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.2
+  version: 0.4.4
 platform: ruby
 authors:
 - Yaroslav Shmarov