livechat 0.9.1 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77c8f578ea3bb8e56ae6e93c3ffc3194bbec65a1952d7e7f3e2152986bc12388
-  data.tar.gz: bb5e62c493d8aef5e20a82884ed43213f2671543bee6e06d2aa1a352a55f9d25
+  metadata.gz: 5f7868af4ac547374ec04ba6aac09d12db7f9ae53776cceb7967cc32c7bf56ef
+  data.tar.gz: 40faba066cf75b325672728f1317a9dd1e56771cb2436c1e3a621ad36a560516
 SHA512:
-  metadata.gz: f77110e02430ef730ac85ad64be4a05f4fd588035c384284e14374ebebbb40b3c5537df63e3d6128d20db2f1891836f54c90f223a087f123fa946893b8ea63d1
-  data.tar.gz: da4da0a2cfa71838e93434cdf3d0d88fd5a6fc15a24754369977d7e3064d5052b28cf6d29055db044b3132acbaf50d832f97a4eb6ef2a565d58edd37e27bbd84
+  metadata.gz: 429aaa62a6b365b2314c2193faa3377879aee0b0c564c935065cc4df798e5471a5571c7e2f8b229fec2490b6ca382dfe8e50c2d88d809c063b5bf83b8d9183c3
+  data.tar.gz: 8658bd68fe0bfd233f3ddddd30079bd71f6443394650c306171ecc7db2184602e93bff51622d049b1e0d33b6e355676e077eab8177f9c3c833a13f924cbd71d8

data/AGENTS.md

@@ -176,6 +176,6 @@ Conventions this codebase holds to — follow them rather than the first thing t
 - **The widget is plain ES5-style JS served by the engine**, no build step, no framework, config read from a JSON block so a Turbo visit re-reads the current page's settings.
 - **Visitor scoping is never by conversation id.** The widget's endpoints resolve the thread from the signed-in id or the guest cookie, so no id in a request can address someone else's conversation. Keep it that way.
 - **The dummy app pins `config.active_job.queue_adapter = :test`.** Do not remove it or let it drift back to the `:async` default. Attaching a file enqueues Active Storage's analysis job, and `:async` runs it on a background thread that checks out its own connection — writes no test transaction covers, landing in the middle of whatever runs next. That is a suite that fails order-dependently in a test which never created a row, and it is miserable to trace back.
-- **`lib/livechat/dashboard.css` is half shared.** Everything above the `GEM-SPECIFIC` banner is the design system all five gems in the family ship — the same tokens, the same `.page-head`/`.tabs`/`.filters`/`.card`/`.badge`/`button`, the same `.dashboard-shell` + `.record-row` + `.detail-panel` two-pane dashboard — identical in every repo apart from the `lvc` prefix. Diff it against a sibling before changing it, and carry the change to the other four. Anything only this gem has goes below the banner. New dashboard markup reuses the shared class names rather than inventing a domain-specific one.
+- **`lib/livechat/dashboard.css` is half shared.** Everything above the `GEM-SPECIFIC` banner is the design system all five gems in the family ship — the same tokens, the same `.page-head`/`.tabs`/`.filters`/`.card`/`.badge`/`button`/`.status-switch`, the same `.dashboard-shell` + `.record-row` + `.detail-panel` two-pane dashboard — identical in every repo apart from the `lvc` prefix. Diff it against a sibling before changing it, and carry the change to the other four. Anything only this gem has goes below the banner. New dashboard markup reuses the shared class names rather than inventing a domain-specific one.
 - Every user-facing change bumps `lib/livechat/version.rb` and adds a `CHANGELOG.md` entry that says what it costs, not only what it adds.
 - Commit messages are prose that explains the tradeoff — read `git log` before writing one.

data/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.10.1
+
+- **The demo inbox is now a live setup walkthrough.** The open conversation
+  teaches the visitor-to-agent reply loop, captured page and identity context,
+  and unread state. The resolved conversation records the production checklist:
+  render the tag, protect the staff inbox, and configure signed-in visitors.
+- `livechat:seed_demo` still rebuilds messages inside its two demo conversations
+  on every run, so replies or edits made in those threads are discarded. It
+  does not change real conversations.
+
+## 0.10.0
+
+- **The open/resolved switch is now the family's shared component.** It looks the
+  same and sits where it sat, but it is `.status-switch` in the shared core of
+  `dashboard.css` rather than this gem's own `.status-toggle`, so ideasbugs could
+  adopt it for its three statuses instead of growing a second near-identical
+  control. `.status-toggle`, `.status-toggle-form`, `.is-open` and `.is-resolved`
+  are gone — that is the breaking change if you styled them.
+- Each half is now its own target: `Open` reopens, `Resolved` resolves, via
+  `formaction` on two submit buttons in one form. Before, the whole pill was one
+  button that flipped whichever way it was not. The half that is already current
+  is inert, so clicking it can no longer log a reopen of an open chat. The
+  sliding highlight went with the rewrite — it never animated anyway, since
+  resolving reloads the page and the pill arrives already in its new position.
+  `POST /:id/resolve` and `POST /:id/reopen` are unchanged.
+
 ## 0.9.1
 
 - **The conversation heading reads as one block.** The visitor's email and locale

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

@@ -12,21 +12,24 @@
         <%= safe_join(context, ' · ') %>
       </p>
     </div>
-    <% 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>
+    <%# The shared status switch: the state it is in is lit and inert, the other
+        one submits to its own route via `formaction`. One form, no JS, and
+        clicking the lit half cannot log a reopen of an already-open chat. %>
+    <%= form_with url: resolve_conversation_path(conversation), method: :post, class: 'status-switch' do %>
+      <% if conversation.open? %>
+        <button type="button" class="status-open current" aria-current="true">
+          <%= t('livechat.statuses.open', default: 'Open') %>
+        </button>
+        <button formaction="<%= resolve_conversation_path(conversation) %>" class="status-resolved">
+          <%= t('livechat.statuses.resolved', default: 'Resolved') %>
+        </button>
+      <% else %>
+        <button formaction="<%= reopen_conversation_path(conversation) %>" class="status-open">
+          <%= t('livechat.statuses.open', default: 'Open') %>
+        </button>
+        <button type="button" class="status-resolved current" aria-current="true">
+          <%= t('livechat.statuses.resolved', default: 'Resolved') %>
+        </button>
       <% end %>
     <% end %>
   </div>

data/lib/livechat/dashboard.css

@@ -144,6 +144,19 @@
   & .actions form { display: inline; }
   & .form-actions { padding-top: 12px; }
 
+  /* Status switch: one pill holding every state a record can be in, the state it
+     is in now lit. Each other segment is a submit button, so moving a record
+     takes one click and no JavaScript; the current segment is a `type="button"`
+     so clicking it cannot re-file the record it is already filed under. Two
+     states or five, the pill sizes itself. A gem tints the lit segment with its
+     own status colour — see the `GEM-SPECIFIC` section. */
+  & .status-switch { display: inline-flex; flex: 0 0 auto; margin: 0; padding: 3px; border: 1px solid var(--lvc-border); border-radius: 999px; background: var(--lvc-bg); }
+  & .status-switch button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--lvc-muted); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .16s ease, color .16s ease; }
+  & .status-switch button:hover { border: 0; background: color-mix(in srgb, var(--lvc-muted) 12%, transparent); color: var(--lvc-text); }
+  & .status-switch button.current { background: var(--lvc-surface); color: var(--lvc-text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); cursor: default; }
+  & .status-switch button.current:hover { background: var(--lvc-surface); }
+  & .panel-head .status-switch { margin-left: auto; }
+
   & .card { overflow: hidden; border: 1px solid var(--lvc-border); border-radius: 12px; background: var(--lvc-surface); }
   & .card.pad { padding: 16px; overflow: visible; }
   & table { width: 100%; border-collapse: collapse; }
@@ -266,6 +279,7 @@
     & .dashboard-detail .detail-panel { min-height: calc(100vh - 64px); }
     & .mobile-back { display: block; flex: 0 0 auto; margin: 4px 0 10px; font-size: 13px; }
     & .panel-head h1 { font-size: 18px; }
+    & .status-switch button { padding: 0 9px; font-size: 12px; }
     & dl { grid-template-columns: 1fr; gap: 3px; }
     & dd { margin-bottom: 8px; }
   }
@@ -291,22 +305,12 @@
   & .record-side .avatars { min-height: 26px; }
 
   /* The panel heading: the name with the visitor's context directly under it,
-     and the switch pushed to the far right of the row whatever the name's
-     length. `margin-left: auto` rather than the row's `space-between`, so a
-     third element in the row could never pull the switch back in. */
+     and the shared status switch pushed to the far right of the row whatever the
+     name's length. */
   & .panel-titles { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
   & .context-line { margin: 0; overflow-wrap: anywhere; }
-
-  /* One switch reading open|resolved, sliding to the side it is on. */
-  & .status-toggle-form { flex: 0 0 auto; margin-left: 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(--lvc-border); background: var(--lvc-bg); color: var(--lvc-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(--lvc-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(--lvc-open); }
-  & .status-toggle.is-resolved span:last-child { color: var(--lvc-text); }
-  & .status-toggle:hover { text-decoration: none; color: var(--lvc-text); }
+  /* An open conversation is the one that wants an answer, so say so in green. */
+  & .status-switch button.current.status-open { color: var(--lvc-open); }
 
   & .avatars { display: inline-flex; }
   & .avatars .avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--lvc-surface); cursor: default; }
@@ -387,8 +391,6 @@
 @media (max-width: 760px) {
   .lvc-dashboard {
     & .detail-panel .panel-head 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%; }
   }
 }

data/lib/livechat/seeds.rb

@@ -5,46 +5,52 @@ module Livechat
     THREADS = [
       {
         visitor_token: 'livechat-demo-checkout',
-        visitor_label: 'Demo Customer',
+        visitor_label: 'Demo visitor · reply to this thread',
         visitor_email: 'customer@example.com',
-        page_url: '/checkout',
+        page_url: '/checkout?demo=livechat',
         locale: 'en',
         status: 'open',
         messages: [
           {
             author_type: 'visitor',
-            body: 'I am trying to finish checkout, but the payment button keeps spinning.',
+            body: 'I installed Livechat. What should I test first?',
             read_at: true
           },
           {
             author_type: 'agent',
             agent_id: 'livechat-demo-agent',
-            agent_label: 'Demo Support',
-            body: 'Thanks for the details. I am checking the payment logs now.',
+            agent_label: 'Demo support guide',
+            body: 'Open the chat widget in your app, send a message, then reply from this inbox. The page URL, ' \
+                  'locale, and configured visitor identity stay attached to the conversation.',
             read_at: true
           },
-          { author_type: 'visitor', body: 'The order number is #DEMO-1042.' }
+          {
+            author_type: 'visitor',
+            body: 'This last message is intentionally unread. Reply from the composer to complete the ' \
+                  'visitor-to-agent loop.'
+          }
         ]
       },
       {
         visitor_token: 'livechat-demo-resolved',
-        visitor_label: 'Demo Admin',
+        visitor_label: 'Demo admin · production checklist',
         visitor_email: 'admin@example.com',
-        page_url: '/settings/billing',
+        page_url: '/settings?demo=livechat',
         locale: 'en',
         status: 'resolved',
         messages: [
-          { author_type: 'visitor', body: 'Where can I download last month\'s invoice?' },
+          { author_type: 'visitor', body: 'What must I configure before this chat goes to production?' },
           {
             author_type: 'agent',
             agent_id: 'livechat-demo-agent',
-            agent_label: 'Demo Support',
-            body: 'Open Settings, then Billing, then click Download next to the invoice.',
+            agent_label: 'Demo support guide',
+            body: 'Render livechat_tag in the layout, set authorize_admin so only staff can read the inbox, ' \
+                  'and configure current_user when signed-in visitors should keep their identity across pages.',
             read_at: true
           },
           {
             author_type: 'system',
-            agent_label: 'Demo Support',
+            agent_label: 'Demo support guide',
             event: 'resolved'
           }
         ]

data/lib/livechat/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.10.1
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -130,7 +130,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.10
 specification_version: 4
 summary: 'Open-source live chat for Rails: a drop-in support widget plus a team inbox,
   in your own database.'