livechat 0.6.1 → 0.6.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89fb2589ac2b07d722d95c48bf0de22dcdcaa21ebcc8e691ffa4a3eb862fcd3d
-  data.tar.gz: cbb878a7a0c0794459468f3f857473ad1f29b6b92a477572be99797166eeefcf
+  metadata.gz: 73bea8a61c28ee7ab2edd008d312343e3373f1737123578fac9935bc7b639ad0
+  data.tar.gz: 75f34e42994adde044ac3bbae1325b4e1997e46c6929bd182a0ca5b87cc1f6bd
 SHA512:
-  metadata.gz: b9fc7e79282e70099732ac379632844d12601b61c438598f39551ed3fca91e635ce424c97786afd51ecdd18a814f10bab3c14d6fc53ad3f6bda54c22eeb78688
-  data.tar.gz: 14812aa4533f89bf621688036929e0d6bb9e13d2e9bef4339d59c83a62300ed3cefe5f382f928d8d91ab46cfc084a8a47e467adfa15d0ee43921c9cedf238264
+  metadata.gz: 37ffa3aa93aabfd29e2cbeefb28c1c527be13cb7744650a118209d04504388289ae79c44282414667794c756c737b234ef9dee4adac6579d6159f312aaf14847
+  data.tar.gz: 7f2b06392e757eefb86b1b7cc729aae38721a210289eebfee584c9b8727a4d7dca114390afe4eb7a7e5482b2f358241bb0246299a80a0a51fc1976b1a1913ee0

data/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.6.3
+
+- Replaced the selected thread's separate status badge and resolve/reopen
+  button with a compact Open/Resolved status toggle.
+- Refreshed the README inbox screenshots to show the new status toggle.
+
+## 0.6.2
+
+- Reworked the inbox into a two-column desktop layout: conversation list on the
+  left, selected thread on the right, with live message polling preserved.
+- Improved the conversation list with compact rows showing the visitor, last
+  message preview, unread count, relative activity time, and participating
+  agent avatars.
+- Kept mobile as a focused single-pane inbox/thread flow.
+
 ## 0.6.1
 
 - Repositioned the docs around in-app support messaging for Rails: users ask

data/README.md

@@ -90,14 +90,15 @@ fallback.
 
 ## The inbox
 
-Open and resolved tabs, unread badges, search (visitor name, email, and
-everything anyone wrote), and a column showing which teammates have worked each
-thread. Reply with Cmd/Ctrl+Enter, resolve, reopen. Both pages keep themselves
-fresh while you watch — and never reload over a half-written reply or search.
+Open and resolved filters, unread badges, search (visitor name, email, and
+everything anyone wrote), and a two-column desktop layout with the chat list on
+the left and the selected thread on the right. Reply with Cmd/Ctrl+Enter,
+resolve, reopen. The inbox keeps itself fresh while you watch — and never
+reloads over a half-written reply or search.
 
-| The list | The thread |
+| Desktop inbox | Mobile thread |
 | --- | --- |
-| ![The inbox: open and resolved tabs, search, and a table of conversations](docs/screenshots/03-inbox.png) | ![A conversation: signed replies, timestamps, resolve event and composer](docs/screenshots/04-conversation.png) |
+| ![The inbox: conversation list on the left and selected thread on the right](docs/screenshots/03-inbox.png) | ![The mobile thread view with reply composer](docs/screenshots/04-conversation.png) |
 
 Every reply carries its author and time, and resolving is recorded in the
 thread. Gated by `authorize_agent`.

data/app/controllers/livechat/conversations_controller.rb

@@ -23,6 +23,14 @@ module Livechat
       @more = page.size > PER_PAGE
       @conversations = page.first(PER_PAGE)
 
+      if params[:conversation_id].present?
+        @selected_conversation = Conversation.find_by(id: params[:conversation_id])
+        if @selected_conversation
+          @messages = @selected_conversation.messages.chronological.to_a
+          @selected_conversation.mark_read_for_agent!
+        end
+      end
+
       # Unread badges and participating agents for the whole page, one query each.
       ids = @conversations.map(&:id)
       @unread = Message.from_visitor.unread.where(conversation_id: ids)
@@ -70,12 +78,12 @@ module Livechat
 
     def resolve
       @conversation.resolve_by!(current_agent_label)
-      redirect_to conversation_path(@conversation)
+      redirect_back fallback_location: conversation_path(@conversation)
     end
 
     def reopen
       @conversation.reopen_by!(current_agent_label)
-      redirect_to conversation_path(@conversation)
+      redirect_back fallback_location: conversation_path(@conversation)
     end
 
     private

data/app/controllers/livechat/messages_controller.rb

@@ -14,9 +14,9 @@ module Livechat
       )
       Notifications.agent_message(message)
 
-      redirect_to conversation_path(conversation, anchor: "message-#{message.id}")
+      redirect_back fallback_location: conversation_path(conversation, anchor: "message-#{message.id}")
     rescue ActiveRecord::RecordInvalid => e
-      redirect_to conversation_path(conversation), alert: e.record.errors.full_messages.first
+      redirect_back fallback_location: conversation_path(conversation), alert: e.record.errors.full_messages.first
     end
   end
 end

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

@@ -61,6 +61,20 @@
     .head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
     .head-row h1 { margin: 0; flex: 1; }
     .head-row form { display: inline; }
+    .status-toggle-form { flex: 0 0 auto; }
+    .status-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 176px;
+                     min-height: 36px; padding: 3px; border-radius: 999px; border: 1px solid var(--border);
+                     background: var(--bg); color: var(--muted); overflow: hidden; }
+    .status-toggle::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px;
+                             width: calc(50% - 3px); border-radius: 999px; background: var(--surface);
+                             box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transition: left .16s ease; }
+    .status-toggle.is-open::before { left: 3px; }
+    .status-toggle.is-resolved::before { left: 50%; }
+    .status-toggle span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
+                          min-width: 0; padding: 0 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
+    .status-toggle.is-open span:first-child { color: var(--open); }
+    .status-toggle.is-resolved span:last-child { color: var(--text); }
+    .status-toggle:hover { text-decoration: none; color: var(--text); }
     button, .button { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
                       background: var(--surface); color: var(--text); font: inherit; }
     button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
@@ -142,6 +156,60 @@
     .reply .send { width: 32px; min-width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%;
                    background: var(--accent); color: var(--accent-text); cursor: pointer;
                    display: flex; align-items: center; justify-content: center; }
+    /* Desktop inbox: a durable conversation list on the left and the active
+       thread on the right, with each pane owning its own scroll. */
+    .lvc-inbox, .lvc-inbox .container { height: 100vh; height: 100dvh; }
+    .lvc-inbox { overflow: hidden; }
+    .lvc-inbox .container { max-width: 1280px; display: flex; flex-direction: column; padding-bottom: 16px; }
+    .lvc-inbox .container > h1 { flex: 0 0 auto; margin-bottom: 14px; }
+    .inbox-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(320px, 380px) 1fr;
+                   gap: 16px; }
+    .inbox-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column;
+                     background: var(--surface); border: 1px solid var(--border);
+                     border-radius: 8px; overflow: hidden; }
+    .inbox-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; padding: 0; background: transparent;
+                           border: 0; border-radius: 0; gap: 6px; flex-wrap: nowrap; }
+    .inbox-sidebar .tabs a { flex: 1 1 0; position: relative; display: flex; align-items: center;
+                             justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px 8px;
+                             border-radius: 8px; color: var(--muted); font-weight: 600; }
+    .inbox-sidebar .tabs a.active { color: var(--text); border: 0; background: transparent; box-shadow: none; margin: 0; }
+    .inbox-sidebar .tabs a.active::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0;
+                                           height: 2px; border-radius: 999px; background: var(--accent); }
+    .inbox-sidebar .tabs a:not(.active):hover { text-decoration: none; color: var(--text); background: var(--bg); }
+    .inbox-sidebar .tabs .count { margin-left: 0; background: color-mix(in srgb, var(--muted) 14%, transparent); }
+    .inbox-sidebar .tabs a.active .count { background: var(--border); }
+    .inbox-sidebar .filters { flex: 0 0 auto; margin: 0; padding: 12px; border-bottom: 1px solid var(--border); }
+    .inbox-sidebar .filters input[type=search] { max-width: none; }
+    .conversation-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+    .conversation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px;
+                        color: var(--text); border-bottom: 1px solid var(--border); }
+    .conversation-row:hover { text-decoration: none; background: var(--bg); }
+    .conversation-row.active { background: color-mix(in srgb, var(--accent) 9%, var(--surface));
+                               box-shadow: inset 3px 0 0 var(--accent); }
+    .conversation-row.unread .conversation-name, .conversation-row.unread .conversation-preview { font-weight: 700; }
+    .conversation-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+    .conversation-topline, .conversation-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+    .conversation-name, .conversation-preview, .conversation-meta span { overflow: hidden; text-overflow: ellipsis;
+                                                                         white-space: nowrap; }
+    .conversation-name { font-weight: 600; }
+    .conversation-time { margin-left: auto; white-space: nowrap; }
+    .conversation-preview { display: block; }
+    .conversation-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
+                         gap: 8px; padding-top: 1px; }
+    .conversation-side .avatars { min-height: 26px; }
+    .inbox-sidebar .pager { flex: 0 0 auto; margin: 0; padding: 10px 12px; border-top: 1px solid var(--border); }
+    .inbox-thread { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+    .inbox-thread .conversation-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
+                                        padding: 0; }
+    .conversation-panel .head-row, .conversation-panel .context-line { flex: 0 0 auto; }
+    .conversation-panel .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
+                                border-radius: 8px; }
+    .conversation-panel .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+    .conversation-panel .reply { flex: 0 0 auto; }
+    .empty-state { margin: auto; max-width: 320px; padding: 24px; text-align: center; }
+    .empty-state h2 { margin: 0 0 6px; font-size: 18px; }
+    .empty-state p { margin: 0; }
+    .mobile-back { display: none; }
     /* Conversation page: fill the viewport and scroll the THREAD, not the
        page — so a reply never jumps the page, and the composer stays put. */
     .lvc-convo, .lvc-convo .container { height: 100vh; height: 100dvh; }
@@ -152,6 +220,27 @@
     .lvc-convo .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
     .lvc-convo .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
     .lvc-convo .reply { flex: 0 0 auto; }
+    @media (max-width: 760px) {
+      body { font-size: 14px; }
+      .container { padding: 14px 10px 24px; }
+      .lvc-inbox { overflow: auto; }
+      .lvc-inbox, .lvc-inbox .container { min-height: 100vh; height: auto; }
+      .lvc-inbox .container { padding-bottom: 10px; }
+      .inbox-shell { display: block; min-height: calc(100vh - 62px); }
+      .inbox-sidebar, .inbox-thread { min-height: calc(100vh - 62px); }
+      .inbox-shell.has-selected .inbox-sidebar { display: none; }
+      .inbox-shell:not(.has-selected) .inbox-thread { display: none; }
+      .conversation-list { overflow: visible; }
+      .conversation-row { padding: 12px; }
+      .conversation-meta { display: none; }
+      .conversation-panel { min-height: calc(100vh - 64px); }
+      .inbox-thread .conversation-panel { padding: 0; }
+      .mobile-back { display: block; flex: 0 0 auto; margin: 10px 10px 0; font-size: 13px; }
+      .conversation-panel .head-row h1 { font-size: 18px; }
+      .status-toggle { width: 152px; min-height: 34px; }
+      .status-toggle span { padding: 0 7px; font-size: 12px; }
+      .thread .msg { max-width: 88%; }
+    }
   </style>
 </head>
 <body class="<%= yield(:body_class) %>">

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

@@ -0,0 +1,102 @@
+<div class="conversation-panel">
+  <div class="head-row">
+    <h1><%= conversation.display_name %> <span class="case-id">#<%= conversation.id %></span></h1>
+    <% if conversation.open? %>
+      <%= button_to resolve_conversation_path(conversation), method: :post,
+                    form_class: 'status-toggle-form',
+                    class: 'status-toggle is-open',
+                    aria: { label: t('livechat.dashboard.resolve', default: 'Resolve') } do %>
+        <span><%= t('livechat.statuses.open', default: 'Open') %></span>
+        <span><%= t('livechat.statuses.resolved', default: 'Resolved') %></span>
+      <% end %>
+    <% else %>
+      <%= button_to reopen_conversation_path(conversation), method: :post,
+                    form_class: 'status-toggle-form',
+                    class: 'status-toggle is-resolved',
+                    aria: { label: t('livechat.dashboard.reopen', default: 'Reopen') } do %>
+        <span><%= t('livechat.statuses.open', default: 'Open') %></span>
+        <span><%= t('livechat.statuses.resolved', default: 'Resolved') %></span>
+      <% end %>
+    <% end %>
+  </div>
+
+  <%# One quiet line of live context: who to email, the language to answer in,
+      and the page of their LAST message (refreshed on every visitor write). %>
+  <p class="muted context-line">
+    <% context = [] %>
+    <% context << mail_to(conversation.visitor_email) if conversation.visitor_email.present? %>
+    <% context << conversation.locale if conversation.locale.present? %>
+    <% if conversation.page_url.present? %>
+      <% context << link_to(conversation.page_url.sub(%r{\Ahttps?://}, ''), conversation.page_url,
+                            target: '_blank', rel: 'noopener') %>
+    <% end %>
+    <%= safe_join(context, ' · ') %>
+  </p>
+
+  <div class="card">
+    <% last = messages.last %>
+    <% 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? %>>
+      <% previous_author = nil %>
+      <% messages.each do |message| %>
+        <% if message.system? %>
+          <p class="system" id="message-<%= message.id %>">
+            <%= t("livechat.events.#{message.event}", agent: message.agent_label,
+                  default: "%{agent} #{message.event} the conversation") %>
+            · <%= message.created_at.to_fs(:short) %>
+          </p>
+          <% previous_author = nil %>
+        <% else %>
+          <% author_key = "#{message.author_type}:#{message.agent_label}" %>
+          <% if author_key != previous_author %>
+            <p class="who <%= message.author_type %>">
+              <%= message.agent? ? message.agent_label : conversation.display_name %>
+              · <%= message.created_at.to_fs(:short) %>
+            </p>
+            <% previous_author = author_key %>
+          <% end %>
+          <div class="msg <%= message.author_type %>" id="message-<%= message.id %>"><%= message.body %><%= livechat_message_attachments(message) %></div>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%# One bordered composer box (matches the visitor widget): the reply on top,
+        a toolbar row below with tools on the left and send on the right. %>
+    <%= form_with url: conversation_messages_path(conversation), method: :post,
+                  multipart: true, class: 'reply',
+                  data: {
+                    record_audio: t('livechat.dashboard.record_audio', default: 'Record audio'),
+                    stop_recording: t('livechat.dashboard.stop_recording', default: 'Stop recording'),
+                    cancel_recording: t('livechat.dashboard.cancel_recording', default: 'Cancel recording'),
+                    recording: t('livechat.dashboard.recording', default: 'Recording %{time}'),
+                    microphone_unsupported: t('livechat.dashboard.microphone_unsupported', default: 'Audio recording is not supported in this browser.'),
+                    microphone_denied: t('livechat.dashboard.microphone_denied', default: 'Microphone access was blocked. Allow microphone access in your browser and try again.'),
+                    microphone_error: t('livechat.dashboard.microphone_error', default: 'Could not start audio recording.')
+                  } do |form| %>
+      <%= form.text_area :body, rows: 2, autofocus: local_assigns.fetch(:autofocus, true),
+                         required: !Livechat.attachments_enabled?,
+                         placeholder: t('livechat.dashboard.reply_placeholder', default: 'Write your reply…') %>
+      <%# dashboard.js hides this and swaps in a paperclip button (into .reply-tools)
+          plus file chips at the top of the box. Left plain as a no-JS fallback. %>
+      <% if Livechat.attachments_enabled? %>
+        <%= form.file_field :files, multiple: true, class: 'reply-file',
+                            aria: { label: t('livechat.dashboard.attach', default: 'Attach files') } %>
+      <% end %>
+      <div class="reply-toolbar">
+        <div class="reply-tools"></div>
+        <button type="submit" class="send"
+                aria-label="<%= t('livechat.dashboard.send', default: 'Send') %>"
+                title="<%= t('livechat.dashboard.send', default: 'Send') %>">
+          <%# Paper airplane (Heroicons, MIT) — same icon as the widget. %>
+          <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>
+        </button>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -1,88 +1,105 @@
+<% content_for :body_class, 'lvc-inbox' %>
+
 <h1><%= t('livechat.dashboard.title', default: 'Chat') %></h1>
 
-<div class="tabs">
-  <% Livechat::Conversation::STATUSES.each do |status| %>
-    <%= link_to conversations_path(status: status, q: @query), class: ('active' if @status == status) do %>
-      <%= t("livechat.statuses.#{status}", default: status.humanize) %>
-      <span class="count"><%= @counts.fetch(status, 0) %></span>
-    <% end %>
-  <% end %>
-</div>
+<div class="inbox-shell <%= 'has-selected' if @selected_conversation %>">
+  <aside class="inbox-sidebar" aria-label="<%= t('livechat.dashboard.conversations', default: 'Conversations') %>">
+    <div class="tabs">
+      <% Livechat::Conversation::STATUSES.each do |status| %>
+        <%= link_to conversations_path(status: status, q: @query), class: ('active' if @status == status) do %>
+          <%= t("livechat.statuses.#{status}", default: status.humanize) %>
+          <span class="count"><%= @counts.fetch(status, 0) %></span>
+        <% end %>
+      <% end %>
+    </div>
 
-<%= form_with url: conversations_path, method: :get, class: 'filters' do %>
-  <input type="hidden" name="status" value="<%= @status %>">
-  <input type="search" name="q" value="<%= @query %>"
-         placeholder="<%= t('livechat.dashboard.search', default: 'Search') %>"
-         aria-label="<%= t('livechat.dashboard.search', default: 'Search') %>">
-  <button type="submit"><%= t('livechat.dashboard.search', default: 'Search') %></button>
-<% end %>
+    <%= form_with url: conversations_path, method: :get, class: 'filters' do %>
+      <input type="hidden" name="status" value="<%= @status %>">
+      <input type="search" name="q" value="<%= @query %>"
+             placeholder="<%= t('livechat.dashboard.search', default: 'Search') %>"
+             aria-label="<%= t('livechat.dashboard.search', default: 'Search') %>">
+      <button type="submit"><%= t('livechat.dashboard.search', default: 'Search') %></button>
+    <% end %>
 
-<%# The list keeps itself fresh (dashboard.js reloads when the token moves) —
-    unless the agent is mid-search, whose typing must never be eaten. %>
-<% cable = livechat_cable_data('livechat:inbox') %>
-<div id="lvc-index" data-poll-url="<%= poll_conversations_path %>"
-     data-token="<%= [Livechat::Message.maximum(:id).to_i, Livechat::Conversation.count,
-                      @counts.fetch('open', 0)].join('-') %>"
-     <%= tag.attributes(data: cable) if cable.any? %>></div>
+    <%# The list keeps itself fresh (dashboard.js reloads when the token moves) —
+        unless the agent is mid-search or mid-reply, whose typing must never be eaten. %>
+    <% cable = livechat_cable_data('livechat:inbox') %>
+    <div id="lvc-index" data-poll-url="<%= poll_conversations_path %>"
+         data-token="<%= [Livechat::Message.maximum(:id).to_i, Livechat::Conversation.count,
+                          @counts.fetch('open', 0)].join('-') %>"
+         <%= tag.attributes(data: cable) if cable.any? %>></div>
 
-<div class="card">
-  <% if @conversations.empty? %>
-    <p class="empty"><%= t('livechat.dashboard.empty',
-                           default: 'Nothing here. When a visitor writes, the conversation lands on this page.') %></p>
-  <% else %>
-    <table>
-      <thead>
-        <tr>
-          <th>#</th>
-          <th><%= t('livechat.dashboard.visitor', default: 'Visitor') %></th>
-          <th><%= t('livechat.dashboard.last_message', default: 'Last message') %></th>
-          <th><%= t('livechat.dashboard.agents', default: 'Agents') %></th>
-          <th><%= t('livechat.dashboard.updated', default: 'Updated') %></th>
-        </tr>
-      </thead>
-      <tbody>
+    <div class="conversation-list">
+      <% if @conversations.empty? %>
+        <p class="empty"><%= t('livechat.dashboard.empty',
+                               default: 'Nothing here. When a visitor writes, the conversation lands on this page.') %></p>
+      <% else %>
         <% @conversations.each do |conversation| %>
           <% unread = @unread.fetch(conversation.id, 0) %>
-          <tr class="<%= 'unread' if unread.positive? %>">
-            <td class="muted"><%= link_to "##{conversation.id}", conversation_path(conversation), class: 'case-id' %></td>
-            <td>
-              <%= link_to conversation.display_name, conversation_path(conversation) %>
+          <%= link_to conversations_path(status: @status, q: @query, offset: @offset,
+                                         conversation_id: conversation.id),
+                      class: ['conversation-row',
+                              ('active' if @selected_conversation&.id == conversation.id),
+                              ('unread' if unread.positive?)].compact do %>
+            <span class="conversation-main">
+              <span class="conversation-topline">
+                <span class="conversation-name"><%= conversation.display_name %></span>
+                <span class="muted conversation-time">
+                  <% if conversation.last_activity_at %>
+                    <%= time_ago_in_words(conversation.last_activity_at) %>
+                  <% end %>
+                </span>
+              </span>
+              <span class="muted conversation-meta">
+                <span class="case-id">#<%= conversation.id %></span>
+                <% if conversation.visitor_email.present? && conversation.visitor_email != conversation.display_name %>
+                  <span><%= conversation.visitor_email %></span>
+                <% end %>
+              </span>
+              <span class="muted conversation-preview"><%= conversation.last_message_preview %></span>
+            </span>
+            <span class="conversation-side">
               <% if unread.positive? %>
                 <span class="badge unread-count"><%= unread %></span>
               <% end %>
-              <% if conversation.visitor_email.present? && conversation.visitor_email != conversation.display_name %>
-                <div class="muted"><%= conversation.visitor_email %></div>
-              <% end %>
-            </td>
-            <td class="muted"><%= conversation.last_message_preview %></td>
-            <td>
               <span class="avatars">
                 <% @agents.fetch(conversation.id, []).each do |label| %>
                   <%= livechat_agent_avatar(label) %>
                 <% end %>
               </span>
-            </td>
-            <td class="muted">
-              <% if conversation.last_activity_at %>
-                <%= time_ago_in_words(conversation.last_activity_at) %>
-              <% end %>
-            </td>
-          </tr>
+            </span>
+          <% end %>
         <% end %>
-      </tbody>
-    </table>
-  <% end %>
-</div>
+      <% end %>
+    </div>
+
+    <div class="pager">
+      <% if @offset.positive? %>
+        <%= link_to t('livechat.dashboard.newer', default: 'Newer'),
+                    conversations_path(status: @status, q: @query,
+                                       offset: [@offset - Livechat::ConversationsController::PER_PAGE, 0].max) %>
+      <% end %>
+      <% if @more %>
+        <%= link_to t('livechat.dashboard.older', default: 'Older'),
+                    conversations_path(status: @status, q: @query,
+                                       offset: @offset + Livechat::ConversationsController::PER_PAGE) %>
+      <% end %>
+    </div>
+  </aside>
 
-<div class="pager">
-  <% if @offset.positive? %>
-    <%= link_to t('livechat.dashboard.newer', default: 'Newer'),
-                conversations_path(status: @status, q: @query,
-                                   offset: [@offset - Livechat::ConversationsController::PER_PAGE, 0].max) %>
-  <% end %>
-  <% if @more %>
-    <%= link_to t('livechat.dashboard.older', default: 'Older'),
-                conversations_path(status: @status, q: @query,
-                                   offset: @offset + Livechat::ConversationsController::PER_PAGE) %>
-  <% end %>
+  <main class="inbox-thread" aria-label="<%= t('livechat.dashboard.current_chat', default: 'Current chat') %>">
+    <% if @selected_conversation %>
+      <p class="mobile-back">
+        <%= link_to "← #{t('livechat.dashboard.back', default: 'All conversations')}",
+                    conversations_path(status: @status, q: @query, offset: @offset) %>
+      </p>
+      <%= render 'thread_panel', conversation: @selected_conversation, messages: @messages, autofocus: false %>
+    <% else %>
+      <div class="empty-state">
+        <h2><%= t('livechat.dashboard.select_conversation', default: 'Select a conversation') %></h2>
+        <p class="muted"><%= t('livechat.dashboard.select_conversation_hint',
+                               default: 'Open a chat from the list to read context and reply.') %></p>
+      </div>
+    <% end %>
+  </main>
 </div>

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

@@ -5,95 +5,4 @@
   <%= link_to "← #{t('livechat.dashboard.back', default: 'All conversations')}", conversations_path %>
 </p>
 
-<div class="head-row">
-  <h1><%= @conversation.display_name %> <span class="case-id">#<%= @conversation.id %></span></h1>
-  <span class="badge status-<%= @conversation.status %>">
-    <%= t("livechat.statuses.#{@conversation.status}", default: @conversation.status.humanize) %>
-  </span>
-  <% if @conversation.open? %>
-    <%= button_to t('livechat.dashboard.resolve', default: 'Resolve'),
-                  resolve_conversation_path(@conversation) %>
-  <% else %>
-    <%= button_to t('livechat.dashboard.reopen', default: 'Reopen'),
-                  reopen_conversation_path(@conversation) %>
-  <% end %>
-</div>
-
-<%# One quiet line of live context: who to email, the language to answer in,
-    and the page of their LAST message (refreshed on every visitor write). %>
-<p class="muted context-line">
-  <% context = [] %>
-  <% context << mail_to(@conversation.visitor_email) if @conversation.visitor_email.present? %>
-  <% context << @conversation.locale if @conversation.locale.present? %>
-  <% if @conversation.page_url.present? %>
-    <% context << link_to(@conversation.page_url.sub(%r{\Ahttps?://}, ''), @conversation.page_url,
-                          target: '_blank', rel: 'noopener') %>
-  <% end %>
-  <%= safe_join(context, ' · ') %>
-</p>
-
-<div class="card">
-  <% last = @messages.last %>
-  <% 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? %>>
-    <% previous_author = nil %>
-    <% @messages.each do |message| %>
-      <% if message.system? %>
-        <p class="system" id="message-<%= message.id %>">
-          <%= t("livechat.events.#{message.event}", agent: message.agent_label,
-                default: "%{agent} #{message.event} the conversation") %>
-          · <%= message.created_at.to_fs(:short) %>
-        </p>
-        <% previous_author = nil %>
-      <% else %>
-        <% author_key = "#{message.author_type}:#{message.agent_label}" %>
-        <% if author_key != previous_author %>
-          <p class="who <%= message.author_type %>">
-            <%= message.agent? ? message.agent_label : @conversation.display_name %>
-            · <%= message.created_at.to_fs(:short) %>
-          </p>
-          <% previous_author = author_key %>
-        <% end %>
-        <div class="msg <%= message.author_type %>" id="message-<%= message.id %>"><%= message.body %><%= livechat_message_attachments(message) %></div>
-      <% end %>
-    <% end %>
-  </div>
-
-  <%# One bordered composer box (matches the visitor widget): the reply on top,
-      a toolbar row below with tools on the left and send on the right. %>
-  <%= form_with url: conversation_messages_path(@conversation), method: :post,
-                multipart: true, class: 'reply',
-                data: {
-                  record_audio: t('livechat.dashboard.record_audio', default: 'Record audio'),
-                  stop_recording: t('livechat.dashboard.stop_recording', default: 'Stop recording'),
-                  cancel_recording: t('livechat.dashboard.cancel_recording', default: 'Cancel recording'),
-                  recording: t('livechat.dashboard.recording', default: 'Recording %{time}'),
-                  microphone_unsupported: t('livechat.dashboard.microphone_unsupported', default: 'Audio recording is not supported in this browser.'),
-                  microphone_denied: t('livechat.dashboard.microphone_denied', default: 'Microphone access was blocked. Allow microphone access in your browser and try again.'),
-                  microphone_error: t('livechat.dashboard.microphone_error', default: 'Could not start audio recording.')
-                } do |form| %>
-    <%= form.text_area :body, rows: 2, autofocus: true, required: !Livechat.attachments_enabled?,
-                       placeholder: t('livechat.dashboard.reply_placeholder', default: 'Write your reply…') %>
-    <%# dashboard.js hides this and swaps in a paperclip button (into .reply-tools)
-        plus file chips at the top of the box. Left plain as a no-JS fallback. %>
-    <% if Livechat.attachments_enabled? %>
-      <%= form.file_field :files, multiple: true, class: 'reply-file',
-                          aria: { label: t('livechat.dashboard.attach', default: 'Attach files') } %>
-    <% end %>
-    <div class="reply-toolbar">
-      <div class="reply-tools"></div>
-      <button type="submit" class="send"
-              aria-label="<%= t('livechat.dashboard.send', default: 'Send') %>"
-              title="<%= t('livechat.dashboard.send', default: 'Send') %>">
-        <%# Paper airplane (Heroicons, MIT) — same icon as the widget. %>
-        <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>
-      </button>
-    </div>
-  <% end %>
-</div>
+<%= render 'thread_panel', conversation: @conversation, messages: @messages %>

data/lib/livechat/dashboard.js

@@ -301,12 +301,17 @@
     var token = index.getAttribute("data-token");
     var url = index.getAttribute("data-poll-url");
     var searchBox = document.querySelector(".filters input[type=search]");
+    var replyBox = document.querySelector(".reply textarea");
 
     function check() {
       if (document.hidden) return;
       // Never reload out from under an agent who is typing a search.
       if (searchBox && searchBox.value !== searchBox.defaultValue) return;
       if (searchBox && document.activeElement === searchBox) return;
+      // On the two-column inbox, the selected thread lives beside the list.
+      // Let thread polling append messages while a reply draft is active.
+      if (replyBox && replyBox.value.trim()) return;
+      if (replyBox && document.activeElement === replyBox) return;
       fetch(url, { headers: { Accept: "application/json" }, credentials: "same-origin" })
         .then(function (response) { return response.ok ? response.json() : null; })
         .then(function (data) {

data/lib/livechat/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.6.3
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -55,6 +55,7 @@ files:
 - app/models/livechat/conversation.rb
 - app/models/livechat/message.rb
 - app/views/layouts/livechat/application.html.erb
+- app/views/livechat/conversations/_thread_panel.html.erb
 - app/views/livechat/conversations/index.html.erb
 - app/views/livechat/conversations/show.html.erb
 - app/views/livechat/mailer/new_agent_reply.text.erb