livechat 0.5.4 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f04a8c3aee0c2e7c9f4f3eff556bf450f4f81844750d8ebfb80d058ac49e180
-  data.tar.gz: 0f62d39bd16d1e02836fe8dbd8a777652e466db06406c60108a3ef75c3321161
+  metadata.gz: aee50137fc34157ea3fff75a2095055b4224c2d0ced2524ea13278135256b07f
+  data.tar.gz: 358aa67a9cb0a4b30ee961078cf4d8ae740da6fbbe04cbdcba987fc68c7e866f
 SHA512:
-  metadata.gz: 2c3cbfefe5b627c5e919b9306ea72509026e107d28e5a69c5e83923286d6bf7e360ee5c8bfb5b0481883267dbf61630e1cfae40819d31760e0121463602e2cc6
-  data.tar.gz: b1c8c7782956dd04291838094131f904970011cfb92ed08473a359ad02046af18c88fc04b38d3c0e917361db5e7de3b79871fcb15c49a13d1d666d94a751a248
+  metadata.gz: 45f8656ac4857d04970159bfc75052b75da1152b993d83a4c7c743589cda5e78cf5e47c2de7607c2c94d4fafdce880c50dd36b02000dcc2ec1e4a16343c4821e
+  data.tar.gz: c7e6e959cd01488ca58a8e59ed943da3233d9e9e3b6670aac19be11915a8595e8ec680bac0b4ad262a19b755be42da7bbf16af007e56815fed7f8aaffd7e5683

data/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.6.0
+
+- Improved unread notification emails. Team emails now summarize the unread
+  visitor burst with up to five messages, attachment names, visitor email,
+  locale, page URL, and a count of any additional unread messages. Visitor
+  reply emails now summarize unread agent replies the same way.
+- Added lightweight typing indicators. Visitors can see when an agent is
+  typing, and agents can see when the visitor is typing, using short-lived
+  cache hints over the existing polling endpoints. No database migration or
+  mandatory Action Cable setup required.
+
 ## 0.5.4
 
 - Balanced the recording controls visually: the stop/finish square now uses

data/app/controllers/livechat/conversations_controller.rb

@@ -58,10 +58,16 @@ module Livechat
 
       render json: {
         status: @conversation.status,
+        typing: @conversation.typing?('visitor'),
         messages: messages.map { |message| message.as_inbox_json(@conversation) }
       }
     end
 
+    def typing
+      @conversation.typing!('agent')
+      head :no_content
+    end
+
     def resolve
       @conversation.resolve_by!(current_agent_label)
       redirect_to conversation_path(@conversation)

data/app/controllers/livechat/visitor_controller.rb

@@ -29,6 +29,7 @@ module Livechat
         unread: conversation.messages.from_agent.unread.count,
         email: conversation.visitor_email.present?,
         cable: cable_payload(conversation),
+        typing: conversation.typing?('agent'),
         messages: messages.map(&:as_widget_json)
       }
     end
@@ -70,6 +71,13 @@ module Livechat
       head :no_content
     end
 
+    # POST widget/typing — a short-lived hint for agents who are watching the
+    # inbox. It never starts a thread by itself; only real messages do that.
+    def typing
+      find_conversation&.typing!('visitor')
+      head :no_content
+    end
+
     private
 
     def find_conversation
@@ -103,7 +111,7 @@ module Livechat
     end
 
     def empty_state
-      { status: nil, unread: 0, email: false, cable: nil, messages: [] }
+      { status: nil, unread: 0, email: false, cable: nil, typing: false, messages: [] }
     end
 
     # The signed stream token and cable URL the widget subscribes with, or nil

data/app/mailers/livechat/mailer.rb

@@ -6,11 +6,14 @@ module Livechat
   # config.mailer_from; the callers in Livechat::Notifications enforce the
   # rest of the conditions (recipients present, first unread message).
   class Mailer < ActionMailer::Base
+    MAX_MESSAGES = 5
+
     # To the team: a visitor wrote and nobody has read it.
     def new_visitor_message(message)
       @message = message
       @conversation = message.conversation
       @inbox_url = inbox_url(@conversation)
+      assign_unread_digest(message, @conversation.messages.from_visitor)
 
       mail from: Livechat.config.mailer_from,
            to: Livechat.config.agent_email_list,
@@ -23,6 +26,7 @@ module Livechat
     def new_agent_reply(message)
       @message = message
       @conversation = message.conversation
+      assign_unread_digest(message, @conversation.messages.from_agent)
 
       mail from: Livechat.config.mailer_from,
            to: @conversation.visitor_email,
@@ -47,5 +51,21 @@ module Livechat
     rescue StandardError
       nil
     end
+
+    def assign_unread_digest(message, side)
+      scope = side.unread.where(id: message.id..).chronological
+      unread_count = scope.count
+      @messages = scope.limit(MAX_MESSAGES).to_a
+      @messages = [message] if @messages.empty?
+      @message_count = [unread_count, @messages.size].max
+      @more_count = [@message_count - @messages.size, 0].max
+      @attachment_names = @messages.index_with { |digest_message| attachment_names(digest_message) }
+    end
+
+    def attachment_names(message)
+      return [] unless message.files_attached?
+
+      message.attached_files.map { |file| file.filename.to_s }
+    end
   end
 end

data/app/models/livechat/conversation.rb

@@ -7,6 +7,7 @@ module Livechat
   # signed-in visitors are keyed by visitor_id, guests by a cookie token.
   class Conversation < ApplicationRecord
     STATUSES = %w[open resolved].freeze
+    TYPING_TTL = 8.seconds
 
     has_many :messages, dependent: :destroy
 
@@ -100,6 +101,14 @@ module Livechat
       visitor_label.presence || visitor_email.presence || "Visitor ##{id}"
     end
 
+    def typing!(author_type)
+      Rails.cache.write(typing_cache_key(author_type), true, expires_in: TYPING_TTL)
+    end
+
+    def typing?(author_type)
+      Rails.cache.exist?(typing_cache_key(author_type))
+    end
+
     private
 
     # Attach only real uploads, and only where attachments are enabled — a
@@ -120,5 +129,9 @@ module Livechat
 
       errors.add(:base, 'needs a visitor_id or a visitor_token')
     end
+
+    def typing_cache_key(author_type)
+      "livechat/conversations/#{id}/typing/#{author_type}"
+    end
   end
 end

data/app/views/layouts/livechat/application.html.erb

@@ -85,6 +85,8 @@
     .thread .msg.agent { align-self: flex-end; background: var(--accent); color: var(--accent-text);
                          border-bottom-right-radius: 4px; }
     .thread .system { align-self: center; color: var(--muted); font-size: 12px; margin: 8px 0; }
+    .thread .typing { align-self: flex-start; color: var(--muted); font-size: 12px;
+                      font-style: italic; margin: 8px 4px 2px; }
     .thread .msg .atts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
     .thread .msg .att-img img { max-width: 100%; max-height: 240px; border-radius: 8px; display: block; }
     .thread .msg .att-audio { display: block; width: 280px; max-width: 100%; height: 36px; }

data/app/views/livechat/conversations/show.html.erb

@@ -37,6 +37,8 @@
   <% cable = livechat_cable_data("livechat:conversation:#{@conversation.id}") %>
   <div class="thread" id="thread"
        data-poll-url="<%= poll_conversation_path(@conversation) %>"
+       data-typing-url="<%= typing_conversation_path(@conversation) %>"
+       data-typing-label="<%= t('livechat.dashboard.visitor_typing', default: 'Visitor is typing...') %>"
        data-latest="<%= last&.id.to_i %>"
        data-last-author="<%= (last && !last.system?) ? "#{last.author_type}:#{last.agent_label}" : '' %>"
        <%= tag.attributes(data: cable) if cable.any? %>>

data/app/views/livechat/mailer/new_agent_reply.text.erb

@@ -1,6 +1,15 @@
-<%= @message.public_label %>:
+<%= @message.public_label %> sent <%= @message_count %> unread <%= @message_count == 1 ? 'reply' : 'replies' %>:
 
-<%= @message.body %>
+<% @messages.each do |message| %>
+- <%= message.body.presence || '(no text)' %>
+<% if @attachment_names[message].any? %>
+  Attachments: <%= @attachment_names[message].join(', ') %>
+<% end %>
+<% end %>
+
+<% if @more_count.positive? %>
+...and <%= @more_count %> more unread <%= @more_count == 1 ? 'reply' : 'replies' %>.
+<% end %>
 
 <% if @conversation.page_url.present? %>
 <%= t('livechat.mail.continue', default: 'Continue the conversation') %>: <%= @conversation.page_url %>

data/app/views/livechat/mailer/new_visitor_message.text.erb

@@ -1,6 +1,28 @@
-<%= @conversation.display_name %>:
+<%= @conversation.display_name %> sent <%= @message_count %> unread <%= @message_count == 1 ? 'message' : 'messages' %>:
 
-<%= @message.body %>
+<% @messages.each do |message| %>
+- <%= message.body.presence || '(no text)' %>
+<% if @attachment_names[message].any? %>
+  Attachments: <%= @attachment_names[message].join(', ') %>
+<% end %>
+<% end %>
+
+<% if @more_count.positive? %>
+...and <%= @more_count %> more unread <%= @more_count == 1 ? 'message' : 'messages' %>.
+<% end %>
+
+<% if @conversation.visitor_email.present? || @conversation.locale.present? || @conversation.page_url.present? %>
+Context:
+<% if @conversation.visitor_email.present? %>
+Email: <%= @conversation.visitor_email %>
+<% end %>
+<% if @conversation.locale.present? %>
+Locale: <%= @conversation.locale %>
+<% end %>
+<% if @conversation.page_url.present? %>
+Page: <%= @conversation.page_url %>
+<% end %>
+<% end %>
 
 <% if @inbox_url %>
 <%= t('livechat.mail.answer', default: 'Answer') %>: <%= @inbox_url %>

data/config/locales/livechat.ar.yml

@@ -29,6 +29,7 @@ ar:
     attachment_error: "تعذر إرسال بعض الملفات."
     expand: "تكبير"
     collapse: "تصغير"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "ملفات كثيرة جدًا (بحد أقصى %{count})."
       too_large: "%{name} كبير جدًا."
@@ -62,6 +63,7 @@ ar:
       microphone_error: "Could not start audio recording."
       newer: "الأحدث"
       older: "الأقدم"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "كتب لك %{name} على %{app}"
       reply_subject: "رد عليك %{name} على %{app}"

data/config/locales/livechat.bg.yml

@@ -29,6 +29,7 @@ bg:
     attachment_error: "Някои файлове не можаха да бъдат изпратени."
     expand: "Уголеми"
     collapse: "Смали"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Твърде много файлове (макс. %{count})."
       too_large: "%{name} е твърде голям."
@@ -62,6 +63,7 @@ bg:
       microphone_error: "Could not start audio recording."
       newer: "По-нови"
       older: "По-стари"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} ви писа в %{app}"
       reply_subject: "%{name} ви отговори в %{app}"

data/config/locales/livechat.bn.yml

@@ -29,6 +29,7 @@ bn:
     attachment_error: "কিছু ফাইল পাঠানো যায়নি।"
     expand: "বড় করুন"
     collapse: "ছোট করুন"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "অনেক বেশি ফাইল (সর্বোচ্চ %{count})।"
       too_large: "%{name} খুব বড়।"
@@ -62,6 +63,7 @@ bn:
       microphone_error: "Could not start audio recording."
       newer: "নতুনতর"
       older: "পুরনো"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} আপনাকে %{app}-এ লিখেছেন"
       reply_subject: "%{name} আপনাকে %{app}-এ উত্তর দিয়েছেন"

data/config/locales/livechat.de.yml

@@ -29,6 +29,7 @@ de:
     attachment_error: "Einige Dateien konnten nicht gesendet werden."
     expand: "Vergrößern"
     collapse: "Verkleinern"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Zu viele Dateien (max. %{count})."
       too_large: "%{name} ist zu groß."
@@ -62,6 +63,7 @@ de:
       microphone_error: "Could not start audio recording."
       newer: "Neuere"
       older: "Ältere"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} hat Ihnen auf %{app} geschrieben"
       reply_subject: "%{name} hat Ihnen auf %{app} geantwortet"

data/config/locales/livechat.el.yml

@@ -29,6 +29,7 @@ el:
     attachment_error: "Ορισμένα αρχεία δεν ήταν δυνατό να σταλούν."
     expand: "Μεγέθυνση"
     collapse: "Σμίκρυνση"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Πάρα πολλά αρχεία (έως %{count})."
       too_large: "Το %{name} είναι πολύ μεγάλο."
@@ -62,6 +63,7 @@ el:
       microphone_error: "Could not start audio recording."
       newer: "Νεότερα"
       older: "Παλαιότερα"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "Ο/Η %{name} σας έγραψε στο %{app}"
       reply_subject: "Ο/Η %{name} σας απάντησε στο %{app}"

data/config/locales/livechat.en.yml

@@ -29,6 +29,7 @@ en:
     attachment_error: "Some files could not be sent."
     expand: "Expand"
     collapse: "Collapse"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Too many files (max %{count})."
       too_large: "%{name} is too large."
@@ -62,6 +63,7 @@ en:
       microphone_error: "Could not start audio recording."
       newer: "Newer"
       older: "Older"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} wrote to you on %{app}"
       reply_subject: "%{name} replied to you on %{app}"

data/config/locales/livechat.es.yml

@@ -29,6 +29,7 @@ es:
     attachment_error: "No se pudieron enviar algunos archivos."
     expand: "Ampliar"
     collapse: "Reducir"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Demasiados archivos (máx. %{count})."
       too_large: "%{name} es demasiado grande."
@@ -62,6 +63,7 @@ es:
       microphone_error: "Could not start audio recording."
       newer: "Más recientes"
       older: "Más antiguos"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} te escribió en %{app}"
       reply_subject: "%{name} te respondió en %{app}"

data/config/locales/livechat.fr.yml

@@ -29,6 +29,7 @@ fr:
     attachment_error: "Certains fichiers n'ont pas pu être envoyés."
     expand: "Agrandir"
     collapse: "Réduire"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Trop de fichiers (max %{count})."
       too_large: "%{name} est trop volumineux."
@@ -62,6 +63,7 @@ fr:
       microphone_error: "Could not start audio recording."
       newer: "Plus récents"
       older: "Plus anciens"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} vous a écrit sur %{app}"
       reply_subject: "%{name} vous a répondu sur %{app}"

data/config/locales/livechat.hi.yml

@@ -29,6 +29,7 @@ hi:
     attachment_error: "कुछ फ़ाइलें भेजी नहीं जा सकीं।"
     expand: "बड़ा करें"
     collapse: "छोटा करें"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "बहुत सारी फ़ाइलें (अधिकतम %{count})।"
       too_large: "%{name} बहुत बड़ी है।"
@@ -62,6 +63,7 @@ hi:
       microphone_error: "Could not start audio recording."
       newer: "नए"
       older: "पुराने"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} ने आपको %{app} पर लिखा"
       reply_subject: "%{name} ने आपको %{app} पर जवाब दिया"

data/config/locales/livechat.hr.yml

@@ -29,6 +29,7 @@ hr:
     attachment_error: "Neke datoteke nije bilo moguće poslati."
     expand: "Povećaj"
     collapse: "Smanji"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Previše datoteka (najviše %{count})."
       too_large: "%{name} je prevelika."
@@ -62,6 +63,7 @@ hr:
       microphone_error: "Could not start audio recording."
       newer: "Novije"
       older: "Starije"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} vam je pisao/la na %{app}"
       reply_subject: "%{name} vam je odgovorio/la na %{app}"

data/config/locales/livechat.id.yml

@@ -29,6 +29,7 @@ id:
     attachment_error: "Beberapa file tidak dapat dikirim."
     expand: "Perbesar"
     collapse: "Perkecil"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Terlalu banyak file (maks. %{count})."
       too_large: "%{name} terlalu besar."
@@ -62,6 +63,7 @@ id:
       microphone_error: "Could not start audio recording."
       newer: "Lebih baru"
       older: "Lebih lama"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} menulis kepada Anda di %{app}"
       reply_subject: "%{name} membalas Anda di %{app}"

data/config/locales/livechat.it.yml

@@ -29,6 +29,7 @@ it:
     attachment_error: "Non è stato possibile inviare alcuni file."
     expand: "Ingrandisci"
     collapse: "Riduci"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Troppi file (max %{count})."
       too_large: "%{name} è troppo grande."
@@ -62,6 +63,7 @@ it:
       microphone_error: "Could not start audio recording."
       newer: "Più recenti"
       older: "Più vecchi"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} ti ha scritto su %{app}"
       reply_subject: "%{name} ti ha risposto su %{app}"

data/config/locales/livechat.ja.yml

@@ -29,6 +29,7 @@ ja:
     attachment_error: "一部のファイルを送信できませんでした。"
     expand: "拡大"
     collapse: "縮小"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "ファイルが多すぎます(最大%{count}件)。"
       too_large: "%{name}が大きすぎます。"
@@ -62,6 +63,7 @@ ja:
       microphone_error: "Could not start audio recording."
       newer: "新しい"
       older: "古い"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name}さんが%{app}であなたにメッセージを送りました"
       reply_subject: "%{name}さんが%{app}であなたに返信しました"

data/config/locales/livechat.ko.yml

@@ -29,6 +29,7 @@ ko:
     attachment_error: "일부 파일을 보내지 못했습니다."
     expand: "확대"
     collapse: "축소"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "파일이 너무 많습니다 (최대 %{count}개)."
       too_large: "%{name}이(가) 너무 큽니다."
@@ -62,6 +63,7 @@ ko:
       microphone_error: "Could not start audio recording."
       newer: "최신"
       older: "이전"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name}님이 %{app}에서 메시지를 보냈습니다"
       reply_subject: "%{name}님이 %{app}에서 답장했습니다"

data/config/locales/livechat.lb.yml

@@ -29,6 +29,7 @@ lb:
     attachment_error: "E puer Dateie konnten net geschéckt ginn."
     expand: "Vergréisseren"
     collapse: "Verklengeren"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Ze vill Dateien (max %{count})."
       too_large: "%{name} ass ze grouss."
@@ -62,6 +63,7 @@ lb:
       microphone_error: "Could not start audio recording."
       newer: "Méi nei"
       older: "Méi al"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} huet Iech op %{app} geschriwwen"
       reply_subject: "%{name} huet Iech op %{app} geäntwert"

data/config/locales/livechat.nl.yml

@@ -29,6 +29,7 @@ nl:
     attachment_error: "Sommige bestanden konden niet worden verzonden."
     expand: "Vergroten"
     collapse: "Verkleinen"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Te veel bestanden (max. %{count})."
       too_large: "%{name} is te groot."
@@ -62,6 +63,7 @@ nl:
       microphone_error: "Could not start audio recording."
       newer: "Nieuwer"
       older: "Ouder"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} heeft je een bericht gestuurd op %{app}"
       reply_subject: "%{name} heeft je geantwoord op %{app}"

data/config/locales/livechat.pl.yml

@@ -29,6 +29,7 @@ pl:
     attachment_error: "Nie udało się wysłać niektórych plików."
     expand: "Powiększ"
     collapse: "Zmniejsz"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Zbyt wiele plików (maks. %{count})."
       too_large: "%{name} jest za duży."
@@ -62,6 +63,7 @@ pl:
       microphone_error: "Could not start audio recording."
       newer: "Nowsze"
       older: "Starsze"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} napisał(a) do Ciebie w %{app}"
       reply_subject: "%{name} odpowiedział(a) Ci w %{app}"

data/config/locales/livechat.pt.yml

@@ -29,6 +29,7 @@ pt:
     attachment_error: "Não foi possível enviar alguns arquivos."
     expand: "Ampliar"
     collapse: "Reduzir"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Muitos arquivos (máx. %{count})."
       too_large: "%{name} é muito grande."
@@ -62,6 +63,7 @@ pt:
       microphone_error: "Could not start audio recording."
       newer: "Mais recentes"
       older: "Mais antigas"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} escreveu para você no %{app}"
       reply_subject: "%{name} respondeu a você no %{app}"

data/config/locales/livechat.ro.yml

@@ -29,6 +29,7 @@ ro:
     attachment_error: "Unele fișiere nu au putut fi trimise."
     expand: "Mărește"
     collapse: "Micșorează"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Prea multe fișiere (max. %{count})."
       too_large: "%{name} este prea mare."
@@ -62,6 +63,7 @@ ro:
       microphone_error: "Could not start audio recording."
       newer: "Mai noi"
       older: "Mai vechi"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} v-a scris pe %{app}"
       reply_subject: "%{name} v-a răspuns pe %{app}"

data/config/locales/livechat.ru.yml

@@ -29,6 +29,7 @@ ru:
     attachment_error: "Некоторые файлы не удалось отправить."
     expand: "Развернуть"
     collapse: "Свернуть"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Слишком много файлов (макс. %{count})."
       too_large: "%{name} слишком большой."
@@ -62,6 +63,7 @@ ru:
       microphone_error: "Could not start audio recording."
       newer: "Новее"
       older: "Старше"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} написал(а) вам в %{app}"
       reply_subject: "%{name} ответил(а) вам в %{app}"

data/config/locales/livechat.th.yml

@@ -29,6 +29,7 @@ th:
     attachment_error: "ไม่สามารถส่งไฟล์บางไฟล์ได้"
     expand: "ขยาย"
     collapse: "ย่อ"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "ไฟล์มากเกินไป (สูงสุด %{count})"
       too_large: "%{name} มีขนาดใหญ่เกินไป"
@@ -62,6 +63,7 @@ th:
       microphone_error: "Could not start audio recording."
       newer: "ใหม่กว่า"
       older: "เก่ากว่า"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} เขียนถึงคุณบน %{app}"
       reply_subject: "%{name} ตอบกลับคุณบน %{app}"

data/config/locales/livechat.tr.yml

@@ -29,6 +29,7 @@ tr:
     attachment_error: "Bazı dosyalar gönderilemedi."
     expand: "Büyüt"
     collapse: "Küçült"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Çok fazla dosya (en fazla %{count})."
       too_large: "%{name} çok büyük."
@@ -62,6 +63,7 @@ tr:
       microphone_error: "Could not start audio recording."
       newer: "Daha yeni"
       older: "Daha eski"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name}, %{app} üzerinden size yazdı"
       reply_subject: "%{name}, %{app} üzerinden size yanıt verdi"

data/config/locales/livechat.uk.yml

@@ -29,6 +29,7 @@ uk:
     attachment_error: "Деякі файли не вдалося надіслати."
     expand: "Розгорнути"
     collapse: "Згорнути"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Забагато файлів (максимум %{count})."
       too_large: "%{name} завеликий."
@@ -62,6 +63,7 @@ uk:
       microphone_error: "Could not start audio recording."
       newer: "Новіші"
       older: "Старіші"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} написав(ла) вам у %{app}"
       reply_subject: "%{name} відповів(ла) вам у %{app}"

data/config/locales/livechat.ur.yml

@@ -29,6 +29,7 @@ ur:
     attachment_error: "کچھ فائلیں نہیں بھیجی جا سکیں۔"
     expand: "بڑا کریں"
     collapse: "چھوٹا کریں"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "بہت زیادہ فائلیں (زیادہ سے زیادہ %{count})۔"
       too_large: "%{name} بہت بڑی ہے۔"
@@ -62,6 +63,7 @@ ur:
       microphone_error: "Could not start audio recording."
       newer: "نئے"
       older: "پرانے"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} نے آپ کو %{app} پر لکھا"
       reply_subject: "%{name} نے آپ کو %{app} پر جواب دیا"

data/config/locales/livechat.vi.yml

@@ -29,6 +29,7 @@ vi:
     attachment_error: "Không thể gửi một số tệp."
     expand: "Mở rộng"
     collapse: "Thu gọn"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "Quá nhiều tệp (tối đa %{count})."
       too_large: "%{name} quá lớn."
@@ -62,6 +63,7 @@ vi:
       microphone_error: "Could not start audio recording."
       newer: "Mới hơn"
       older: "Cũ hơn"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} đã nhắn tin cho bạn trên %{app}"
       reply_subject: "%{name} đã trả lời bạn trên %{app}"

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

@@ -29,6 +29,7 @@
     attachment_error: "部分文件无法发送。"
     expand: "放大"
     collapse: "缩小"
+    typing: "%{name} is typing..."
     attachments:
       too_many: "文件过多（最多 %{count} 个）。"
       too_large: "%{name} 太大。"
@@ -62,6 +63,7 @@
       microphone_error: "Could not start audio recording."
       newer: "较新"
       older: "较旧"
+      visitor_typing: "Visitor is typing..."
     mail:
       visitor_subject: "%{name} 在 %{app} 上给您留言"
       reply_subject: "%{name} 在 %{app} 上回复了您"

data/config/routes.rb

@@ -9,6 +9,7 @@ Livechat::Engine.routes.draw do
   scope :widget, as: :widget do
     get 'conversation', to: 'visitor#show'
     post 'messages', to: 'visitor#create'
+    post 'typing', to: 'visitor#typing'
     post 'email', to: 'visitor#email'
     post 'read', to: 'visitor#read'
   end
@@ -26,6 +27,7 @@ Livechat::Engine.routes.draw do
     end
     member do
       get :poll
+      post :typing
       post :resolve
       post :reopen
     end

data/lib/livechat/dashboard.js

@@ -345,6 +345,13 @@
     var latest = parseInt(thread.getAttribute("data-latest"), 10) || 0;
     var lastAuthorKey = thread.getAttribute("data-last-author") || null;
     var url = thread.getAttribute("data-poll-url");
+    var typingUrl = thread.getAttribute("data-typing-url");
+    var lastTypingSentAt = 0;
+    var typingEl = document.createElement("p");
+    typingEl.className = "typing";
+    typingEl.hidden = true;
+    typingEl.textContent = thread.getAttribute("data-typing-label") || "Visitor is typing...";
+    thread.appendChild(typingEl);
 
     if (replyBox) {
       replyBox.addEventListener("keydown", function (event) {
@@ -359,7 +366,10 @@
         replyBox.style.height = "auto";
         replyBox.style.height = Math.min(replyBox.scrollHeight, 160) + "px";
       };
-      replyBox.addEventListener("input", autogrow);
+      replyBox.addEventListener("input", function () {
+        autogrow();
+        noteTyping();
+      });
       autogrow();
     }
 
@@ -377,6 +387,7 @@
         line.textContent = message.text + " · " + message.at;
         thread.appendChild(line);
         lastAuthorKey = null;
+        keepTypingLast();
         return;
       }
 
@@ -386,6 +397,7 @@
         who.className = "who " + message.author;
         who.textContent = message.name + " · " + message.at;
         thread.appendChild(who);
+        keepTypingLast();
         lastAuthorKey = key;
       }
       var bubble = document.createElement("div");
@@ -394,6 +406,7 @@
       if (message.body) bubble.appendChild(document.createTextNode(message.body));
       appendAttachments(bubble, message.attachments);
       thread.appendChild(bubble);
+      keepTypingLast();
     }
 
     // Mirrors the server-rendered thread: images inline, other files as links,
@@ -441,19 +454,49 @@
       fetch(url + "?after=" + latest, { headers: { Accept: "application/json" }, credentials: "same-origin" })
         .then(function (response) { return response.ok ? response.json() : null; })
         .then(function (data) {
-          if (!data || !data.messages || !data.messages.length) return;
-          data.messages.forEach(append);
+          if (!data) return;
+          setTyping(!!data.typing);
+          if (data.messages && data.messages.length) data.messages.forEach(append);
           if (atBottom) thread.scrollTop = thread.scrollHeight;
         })
         .catch(function () { /* transient network error — next tick retries */ });
     }
 
+    function setTyping(show) {
+      typingEl.hidden = !show;
+      keepTypingLast();
+      if (show && stick) thread.scrollTop = thread.scrollHeight;
+    }
+
+    function keepTypingLast() {
+      if (thread.lastChild !== typingEl) thread.appendChild(typingEl);
+    }
+
+    function noteTyping() {
+      if (!typingUrl || !replyBox.value.trim()) return;
+      var now = Date.now();
+      if (now - lastTypingSentAt < 3000) return;
+      lastTypingSentAt = now;
+      fetch(typingUrl, {
+        method: "POST",
+        headers: csrfHeaders(),
+        credentials: "same-origin"
+      }).catch(function () { /* typing hints are best-effort */ });
+    }
+
     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);
   }
 
+  function csrfHeaders() {
+    var headers = { Accept: "application/json" };
+    var token = document.querySelector('meta[name="csrf-token"]');
+    if (token) headers["X-CSRF-Token"] = token.content;
+    return headers;
+  }
+
   // 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

data/lib/livechat/version.rb

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

data/lib/livechat/widget.js

@@ -34,6 +34,7 @@
   var errorEl = null;
   var fileInputEl = null;
   var filesBarEl = null;
+  var typingEl = null;
   var recordBtnEl = null;
   var recordingBarEl = null;
   var recordingTimeEl = null;
@@ -69,6 +70,7 @@
   var sending = false;
   var pollTimer = null;
   var fetching = false;
+  var lastTypingSentAt = 0;
   // 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
@@ -263,6 +265,11 @@
     greeting.className = "lvc-msg lvc-agent";
     greeting.textContent = config.labels.greeting;
     listEl.appendChild(greeting);
+    typingEl = document.createElement("div");
+    typingEl.className = "lvc-typing";
+    typingEl.hidden = true;
+    typingEl.textContent = config.labels.typing;
+    listEl.appendChild(typingEl);
     panel.appendChild(listEl);
 
     errorEl = document.createElement("div");
@@ -295,7 +302,10 @@
     inputEl.rows = 1;
     inputEl.placeholder = config.labels.placeholder;
     inputEl.setAttribute("aria-label", config.labels.placeholder);
-    inputEl.addEventListener("input", autogrow);
+    inputEl.addEventListener("input", function () {
+      autogrow();
+      noteTyping();
+    });
     inputEl.addEventListener("keydown", function (event) {
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
@@ -881,6 +891,7 @@
           // Only an open panel renders (and thereby "consumes") messages;
           // while closed, the poll feeds the badge and nothing else.
           (data.messages || []).forEach(appendMessage);
+          setTyping(!!data.typing);
           if (data.unread > 0) request("POST", "/read");
           setUnread(0);
           syncEmailRow();
@@ -941,6 +952,7 @@
         : config.labels.eventReopened;
       listEl.appendChild(line);
       lastAuthorKey = null;
+      keepTypingLast();
       scrollToBottom();
       return;
     }
@@ -964,9 +976,21 @@
     renderAttachments(bubble, message.attachments);
     bubble.title = new Date(message.at).toLocaleString();
     listEl.appendChild(bubble);
+    keepTypingLast();
     scrollToBottom();
   }
 
+  function setTyping(show) {
+    if (!typingEl) return;
+    typingEl.hidden = !show;
+    keepTypingLast();
+    if (show) scrollToBottom();
+  }
+
+  function keepTypingLast() {
+    if (typingEl && listEl && listEl.lastChild !== typingEl) listEl.appendChild(typingEl);
+  }
+
   // 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) {
@@ -1010,6 +1034,14 @@
     if (listEl) listEl.scrollTop = listEl.scrollHeight;
   }
 
+  function noteTyping() {
+    if (!hasThread || !inputEl || !inputEl.value.trim()) return;
+    var now = Date.now();
+    if (now - lastTypingSentAt < 3000) return;
+    lastTypingSentAt = now;
+    request("POST", "/typing").catch(function () { /* typing hints are best-effort */ });
+  }
+
   // --- realtime (optional) ----------------------------------------------------
 
   // A tiny Action Cable client over the native WebSocket protocol — no
@@ -1207,6 +1239,8 @@
       "#lvc-root[dir=rtl] .lvc-agent{align-self:flex-end;border-bottom-left-radius:14px;" +
       "border-bottom-right-radius:4px}" +
       "#lvc-root .lvc-system{align-self:center;color:var(--lvc-muted);font-size:12px;margin:8px 0}" +
+      "#lvc-root .lvc-typing{align-self:flex-start;color:var(--lvc-muted);font-size:12px;" +
+      "margin:6px 4px 2px;font-style:italic}" +
       "#lvc-error{padding:6px 14px;color:#dc2626;font-size:13px}" +
       "#lvc-email{padding:8px 14px;border-top:1px solid var(--lvc-border);font-size:12px;" +
       "color:var(--lvc-muted)}" +

data/lib/livechat/widget.rb

@@ -114,7 +114,8 @@ module Livechat
           removeFile: t(:remove_file, 'Remove file'),
           attachmentError: t(:attachment_error, 'Some files could not be sent.'),
           expand: t(:expand, 'Expand'),
-          collapse: t(:collapse, 'Collapse')
+          collapse: t(:collapse, 'Collapse'),
+          typing: t(:typing, '%{name} is typing...', name: t(:team, 'Support'))
         }
       end
 

metadata

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