livechat 0.5.0 → 0.5.2

data/config/locales/livechat.pt.yml

@@ -18,6 +18,13 @@ pt:
     error_rate_limited: "Muitas mensagens. Aguarde um momento e tente novamente."
     unread_aria: "mensagens não lidas"
     attach: "Anexar arquivos"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "Remover arquivo"
     attachment_error: "Não foi possível enviar alguns arquivos."
     expand: "Ampliar"
@@ -46,6 +53,13 @@ pt:
       reply_placeholder: "Escreva sua resposta…"
       send: "Enviar"
       attach: "Anexar arquivos"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "Mais recentes"
       older: "Mais antigas"
     mail:

data/config/locales/livechat.ro.yml

@@ -18,6 +18,13 @@ ro:
     error_rate_limited: "Prea multe mesaje. Așteptați puțin și încercați din nou."
     unread_aria: "mesaje necitite"
     attach: "Atașează fișiere"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "Elimină fișierul"
     attachment_error: "Unele fișiere nu au putut fi trimise."
     expand: "Mărește"
@@ -46,6 +53,13 @@ ro:
       reply_placeholder: "Scrieți răspunsul…"
       send: "Trimite"
       attach: "Atașează fișiere"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "Mai noi"
       older: "Mai vechi"
     mail:

data/config/locales/livechat.ru.yml

@@ -18,6 +18,13 @@ ru:
     error_rate_limited: "Слишком много сообщений. Подождите немного и попробуйте ещё раз."
     unread_aria: "непрочитанные сообщения"
     attach: "Прикрепить файлы"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "Удалить файл"
     attachment_error: "Некоторые файлы не удалось отправить."
     expand: "Развернуть"
@@ -46,6 +53,13 @@ ru:
       reply_placeholder: "Напишите ответ…"
       send: "Отправить"
       attach: "Прикрепить файлы"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "Новее"
       older: "Старше"
     mail:

data/config/locales/livechat.th.yml

@@ -18,6 +18,13 @@ th:
     error_rate_limited: "ข้อความมากเกินไป โปรดรอสักครู่แล้วลองอีกครั้ง"
     unread_aria: "ข้อความที่ยังไม่ได้อ่าน"
     attach: "แนบไฟล์"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "นำไฟล์ออก"
     attachment_error: "ไม่สามารถส่งไฟล์บางไฟล์ได้"
     expand: "ขยาย"
@@ -46,6 +53,13 @@ th:
       reply_placeholder: "เขียนคำตอบของคุณ…"
       send: "ส่ง"
       attach: "แนบไฟล์"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "ใหม่กว่า"
       older: "เก่ากว่า"
     mail:

data/config/locales/livechat.tr.yml

@@ -18,6 +18,13 @@ tr:
     error_rate_limited: "Çok fazla mesaj. Lütfen biraz bekleyip tekrar deneyin."
     unread_aria: "okunmamış mesaj"
     attach: "Dosya ekle"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "Dosyayı kaldır"
     attachment_error: "Bazı dosyalar gönderilemedi."
     expand: "Büyüt"
@@ -46,6 +53,13 @@ tr:
       reply_placeholder: "Yanıtınızı yazın…"
       send: "Gönder"
       attach: "Dosya ekle"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "Daha yeni"
       older: "Daha eski"
     mail:

data/config/locales/livechat.uk.yml

@@ -18,6 +18,13 @@ uk:
     error_rate_limited: "Забагато повідомлень. Зачекайте трохи та спробуйте ще раз."
     unread_aria: "непрочитані повідомлення"
     attach: "Прикріпити файли"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "Видалити файл"
     attachment_error: "Деякі файли не вдалося надіслати."
     expand: "Розгорнути"
@@ -46,6 +53,13 @@ uk:
       reply_placeholder: "Напишіть відповідь…"
       send: "Надіслати"
       attach: "Прикріпити файли"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "Новіші"
       older: "Старіші"
     mail:

data/config/locales/livechat.ur.yml

@@ -18,6 +18,13 @@ ur:
     error_rate_limited: "بہت زیادہ پیغامات۔ براہ کرم تھوڑا انتظار کریں اور دوبارہ کوشش کریں۔"
     unread_aria: "غیر پڑھے گئے پیغامات"
     attach: "فائلیں منسلک کریں"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "فائل ہٹائیں"
     attachment_error: "کچھ فائلیں نہیں بھیجی جا سکیں۔"
     expand: "بڑا کریں"
@@ -46,6 +53,13 @@ ur:
       reply_placeholder: "اپنا جواب لکھیں…"
       send: "بھیجیں"
       attach: "فائلیں منسلک کریں"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "نئے"
       older: "پرانے"
     mail:

data/config/locales/livechat.vi.yml

@@ -18,6 +18,13 @@ vi:
     error_rate_limited: "Quá nhiều tin nhắn. Vui lòng đợi một lát rồi thử lại."
     unread_aria: "tin nhắn chưa đọc"
     attach: "Đính kèm tệp"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "Xóa tệp"
     attachment_error: "Không thể gửi một số tệp."
     expand: "Mở rộng"
@@ -46,6 +53,13 @@ vi:
       reply_placeholder: "Viết câu trả lời của bạn…"
       send: "Gửi"
       attach: "Đính kèm tệp"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "Mới hơn"
       older: "Cũ hơn"
     mail:

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

@@ -18,6 +18,13 @@
     error_rate_limited: "消息过多，请稍等片刻再重试。"
     unread_aria: "条未读消息"
     attach: "附加文件"
+    record_audio: "Record audio"
+    stop_recording: "Stop recording"
+    cancel_recording: "Cancel recording"
+    recording: "Recording %{time}"
+    microphone_unsupported: "Audio recording is not supported in this browser."
+    microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+    microphone_error: "Could not start audio recording."
     remove_file: "移除文件"
     attachment_error: "部分文件无法发送。"
     expand: "放大"
@@ -46,6 +53,13 @@
       reply_placeholder: "输入您的回复…"
       send: "发送"
       attach: "附加文件"
+      record_audio: "Record audio"
+      stop_recording: "Stop recording"
+      cancel_recording: "Cancel recording"
+      recording: "Recording %{time}"
+      microphone_unsupported: "Audio recording is not supported in this browser."
+      microphone_denied: "Microphone access was blocked. Allow microphone access in your browser and try again."
+      microphone_error: "Could not start audio recording."
       newer: "较新"
       older: "较旧"
     mail:

data/lib/livechat/dashboard.js

@@ -37,6 +37,15 @@
 
     input.hidden = true;
     var canEdit = typeof DataTransfer !== "undefined"; // per-file removal needs it
+    var labels = {
+      recordAudio: form.dataset.recordAudio || "Record audio",
+      stopRecording: form.dataset.stopRecording || "Stop recording",
+      cancelRecording: form.dataset.cancelRecording || "Cancel recording",
+      recording: form.dataset.recording || "Recording %{time}",
+      microphoneUnsupported: form.dataset.microphoneUnsupported || "Audio recording is not supported in this browser.",
+      microphoneDenied: form.dataset.microphoneDenied || "Microphone access was blocked. Allow microphone access in your browser and try again.",
+      microphoneError: form.dataset.microphoneError || "Could not start audio recording."
+    };
 
     var button = document.createElement("button");
     button.type = "button";
@@ -53,7 +62,23 @@
     button.addEventListener("click", function () { input.click(); });
     // The paperclip lives in the toolbar (left of send); chips sit at the top
     // of the box — so it reads as one composer, like the visitor widget.
-    (form.querySelector(".reply-tools") || form).appendChild(button);
+    var tools = form.querySelector(".reply-tools") || form;
+    tools.appendChild(button);
+
+    var recordButton = null;
+    if (canEdit) {
+      recordButton = document.createElement("button");
+      recordButton.type = "button";
+      recordButton.className = "attach record";
+      recordButton.setAttribute("aria-label", labels.recordAudio);
+      recordButton.title = labels.recordAudio;
+      recordButton.innerHTML =
+        '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">' +
+        '<path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" ' +
+        'stroke-linejoin="round" d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z' +
+        'M5 11a7 7 0 0 0 14 0M12 18v3M8.5 21h7"/></svg>';
+      tools.appendChild(recordButton);
+    }
 
     var chips = document.createElement("div");
     chips.className = "chips";
@@ -61,6 +86,7 @@
     form.insertBefore(chips, form.firstChild);
 
     input.addEventListener("change", render);
+    if (recordButton) enhanceAudioRecorder();
 
     function render() {
       var files = Array.prototype.slice.call(input.files);
@@ -71,7 +97,7 @@
         chip.className = "chip";
         var name = document.createElement("span");
         name.className = "chip-name";
-        name.textContent = file.name;
+        name.textContent = file.name || "voice-message.webm";
         chip.appendChild(name);
         if (canEdit) {
           var remove = document.createElement("button");
@@ -94,6 +120,154 @@
       input.files = kept.files;
       render();
     }
+
+    function enhanceAudioRecorder() {
+      var recorder = null;
+      var stream = null;
+      var chunks = [];
+      var startedAt = 0;
+      var timer = null;
+      var cancelled = false;
+
+      var bar = document.createElement("div");
+      bar.className = "recording";
+      bar.hidden = true;
+      var status = document.createElement("span");
+      status.className = "recording-status";
+      var dot = document.createElement("span");
+      dot.className = "recording-dot";
+      var time = document.createElement("span");
+      status.appendChild(dot);
+      status.appendChild(time);
+      bar.appendChild(status);
+      var actions = document.createElement("div");
+      actions.className = "recording-actions";
+      var cancel = document.createElement("button");
+      cancel.type = "button";
+      cancel.textContent = labels.cancelRecording;
+      var stop = document.createElement("button");
+      stop.type = "button";
+      stop.className = "stop-recording";
+      stop.textContent = labels.stopRecording;
+      actions.appendChild(cancel);
+      actions.appendChild(stop);
+      bar.appendChild(actions);
+      form.appendChild(bar);
+
+      recordButton.addEventListener("click", start);
+      stop.addEventListener("click", function () {
+        if (recorder && recorder.state !== "inactive") recorder.stop();
+      });
+      cancel.addEventListener("click", function () {
+        cancelled = true;
+        if (recorder && recorder.state !== "inactive") recorder.stop();
+      });
+
+      function start() {
+        if (recorder) return;
+        if (!recordingSupported()) {
+          alert(labels.microphoneUnsupported);
+          return;
+        }
+
+        recordButton.disabled = true;
+        navigator.mediaDevices.getUserMedia({ audio: true })
+          .then(function (mediaStream) {
+            var options = preferredAudioOptions();
+            chunks = [];
+            cancelled = false;
+            stream = mediaStream;
+            try {
+              recorder = options ? new MediaRecorder(mediaStream, options) : new MediaRecorder(mediaStream);
+            } catch (e) {
+              stopTracks();
+              throw e;
+            }
+            recorder.addEventListener("dataavailable", function (event) {
+              if (event.data && event.data.size) chunks.push(event.data);
+            });
+            recorder.addEventListener("stop", finish);
+            recorder.start();
+            startedAt = Date.now();
+            recordButton.classList.add("recording-on");
+            bar.hidden = false;
+            tick();
+            timer = setInterval(tick, 500);
+          })
+          .catch(function (error) {
+            recordButton.disabled = false;
+            var denied = error && (error.name === "NotAllowedError" || error.name === "SecurityError");
+            alert(denied ? labels.microphoneDenied : labels.microphoneError);
+          });
+      }
+
+      function finish() {
+        var mimeType = (recorder && recorder.mimeType) || "audio/webm";
+        stopTracks();
+        clearInterval(timer);
+        timer = null;
+        bar.hidden = true;
+        recordButton.disabled = false;
+        recordButton.classList.remove("recording-on");
+
+        if (!cancelled && chunks.length && typeof DataTransfer !== "undefined") {
+          var kept = new DataTransfer();
+          Array.prototype.slice.call(input.files).forEach(function (file) { kept.items.add(file); });
+          kept.items.add(audioFile(chunks, mimeType));
+          input.files = kept.files;
+          render();
+        }
+        recorder = null;
+        chunks = [];
+      }
+
+      function tick() {
+        time.textContent = labels.recording.replace("%{time}", formatDuration(Date.now() - startedAt));
+      }
+
+      function stopTracks() {
+        if (!stream) return;
+        stream.getTracks().forEach(function (track) { track.stop(); });
+        stream = null;
+      }
+    }
+  }
+
+  function recordingSupported() {
+    return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia && window.MediaRecorder);
+  }
+
+  function preferredAudioOptions() {
+    var types = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4", "audio/ogg;codecs=opus"];
+    if (!window.MediaRecorder || !MediaRecorder.isTypeSupported) return null;
+    for (var i = 0; i < types.length; i++) {
+      if (MediaRecorder.isTypeSupported(types[i])) return { mimeType: types[i] };
+    }
+    return null;
+  }
+
+  function audioFile(chunks, mimeType) {
+    var blob = new Blob(chunks, { type: mimeType });
+    var name = "voice-message-" + new Date().toISOString().replace(/[:.]/g, "-") + "." + audioExtension(mimeType);
+    try {
+      return new File([blob], name, { type: mimeType });
+    } catch (e) {
+      blob.name = name;
+      return blob;
+    }
+  }
+
+  function audioExtension(mimeType) {
+    if (/mp4|mpeg|m4a/.test(mimeType)) return "m4a";
+    if (/ogg/.test(mimeType)) return "ogg";
+    return "webm";
+  }
+
+  function formatDuration(ms) {
+    var seconds = Math.max(0, Math.floor(ms / 1000));
+    var minutes = Math.floor(seconds / 60);
+    seconds = seconds % 60;
+    return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
   }
 
   // The conversation list keeps itself fresh: when the server's token moves
@@ -220,6 +394,15 @@
           img.loading = "lazy";
           img.addEventListener("load", keepBottom); // a live image grows the thread
           link.appendChild(img);
+        } else if (att.audio) {
+          var audio = document.createElement("audio");
+          audio.className = "att-audio";
+          audio.controls = true;
+          audio.preload = "metadata";
+          audio.src = att.url;
+          audio.setAttribute("aria-label", att.name);
+          wrap.appendChild(audio);
+          return;
         } else {
           link.className = "att-file";
           link.textContent = att.name;

data/lib/livechat/version.rb

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