livechat 0.6.4 → 0.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +17 -0
- data/README.md +8 -0
- data/app/controllers/livechat/widgets_controller.rb +8 -4
- data/app/models/livechat/message.rb +1 -1
- data/app/views/layouts/livechat/application.html.erb +3 -235
- data/config/routes.rb +1 -0
- data/lib/generators/livechat/install/install_generator.rb +1 -1
- data/lib/generators/livechat/install/templates/initializer.rb +3 -1
- data/lib/livechat/configuration.rb +6 -0
- data/lib/livechat/dashboard.css +233 -0
- data/lib/livechat/engine.rb +9 -0
- data/lib/livechat/version.rb +1 -1
- data/lib/livechat/widget.js +2 -2
- data/lib/livechat/widget.rb +9 -0
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1a69e5d589f17c732b4c31e2573167f337953219ef85e4cada2b0bb4167e3eab
|
|
4
|
+
data.tar.gz: 574dec08ba995fb9eb316cd8d2746f37cb09183044a835e4865220d57bf73661
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2ab3f33529a53f00312ba82d2e6aeef89e7b6f29903ec124e6f931f16871b34a35bd075a723db2eb7cf78e742bb9fec6bfc19dbaf7785dfa2750584e44ab082b
|
|
7
|
+
data.tar.gz: e5c98f7e43ad6d7628e1ad2b78e5cd3fbefdcb09a4bec1b040db901ef594c17446ccfe9c920989730069e745a182bf3bc5d305da8c097e734a037de5b913378c
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.6.6
|
|
4
|
+
|
|
5
|
+
- Expanded the desktop visitor widget into a taller, wider panel with equal
|
|
6
|
+
viewport padding above and below, while preserving the existing full-screen
|
|
7
|
+
mobile chat behavior.
|
|
8
|
+
|
|
9
|
+
## 0.6.5
|
|
10
|
+
|
|
11
|
+
- Added `mount_livechat at: "/livechat"` as the install-time route helper,
|
|
12
|
+
keeping `config.mount_path` synchronized with the mounted engine path while
|
|
13
|
+
preserving manual `mount Livechat::Engine` compatibility.
|
|
14
|
+
- Extracted the dashboard stylesheet into a same-origin, fingerprinted
|
|
15
|
+
`/dashboard.css` endpoint and added CSP meta tags to the dashboard layout.
|
|
16
|
+
The public widget remains pipeline-free and controller-served.
|
|
17
|
+
- Added `config.storage_service`, so host apps can route Livechat attachments
|
|
18
|
+
to a named Active Storage service instead of the app default.
|
|
19
|
+
|
|
3
20
|
## 0.6.4
|
|
4
21
|
|
|
5
22
|
- Hardened the visitor widget composer against host app form-control styles, so
|
data/README.md
CHANGED
|
@@ -127,6 +127,7 @@ Everything is optional — a fresh install works with zero config. In
|
|
|
127
127
|
| `on_visitor_message` | no-op | Runs after a visitor writes — Slack, etc. |
|
|
128
128
|
| `on_agent_message` | no-op | Runs after an agent replies |
|
|
129
129
|
| `attach_files` | `true` | File attachments (needs Active Storage) |
|
|
130
|
+
| `storage_service` | `nil` | Named Active Storage service for chat attachments |
|
|
130
131
|
| `max_attachments` | `5` | Per message |
|
|
131
132
|
| `max_attachment_size` | `10.megabytes` | Enforced server-side |
|
|
132
133
|
| `allowed_attachment_types` | `nil` (any) | Or an allowlist, e.g. `%w[image/png application/pdf]` |
|
|
@@ -207,6 +208,13 @@ guessable or long-lived blob URL.
|
|
|
207
208
|
|
|
208
209
|
Where Active Storage isn't installed, the widget quietly stays text-only.
|
|
209
210
|
|
|
211
|
+
Set `config.storage_service` to route chat uploads to a dedicated Active
|
|
212
|
+
Storage service from your app's `config/storage.yml`:
|
|
213
|
+
|
|
214
|
+
```ruby
|
|
215
|
+
config.storage_service = :livechat_uploads
|
|
216
|
+
```
|
|
217
|
+
|
|
210
218
|
</details>
|
|
211
219
|
|
|
212
220
|
<details>
|
|
@@ -7,7 +7,7 @@ module Livechat
|
|
|
7
7
|
# Drive swaps the <body> and re-runs body scripts under the *original*
|
|
8
8
|
# page's CSP header, where a freshly minted inline nonce would be refused.
|
|
9
9
|
class WidgetsController < ApplicationController
|
|
10
|
-
#
|
|
10
|
+
# These assets are static and carry no user data; without this, Rails'
|
|
11
11
|
# cross-origin JavaScript guard refuses to serve it to a plain
|
|
12
12
|
# <script src> request.
|
|
13
13
|
skip_forgery_protection
|
|
@@ -21,16 +21,20 @@ module Livechat
|
|
|
21
21
|
end
|
|
22
22
|
|
|
23
23
|
def dashboard
|
|
24
|
-
serve(Widget.dashboard_javascript, Widget.dashboard_fingerprint)
|
|
24
|
+
serve(Widget.dashboard_javascript, Widget.dashboard_fingerprint, 'text/javascript')
|
|
25
|
+
end
|
|
26
|
+
|
|
27
|
+
def dashboard_stylesheet
|
|
28
|
+
serve(Widget.dashboard_stylesheet, Widget.dashboard_stylesheet_fingerprint, 'text/css')
|
|
25
29
|
end
|
|
26
30
|
|
|
27
31
|
private
|
|
28
32
|
|
|
29
|
-
def serve(source, fingerprint)
|
|
33
|
+
def serve(source, fingerprint, content_type = 'text/javascript')
|
|
30
34
|
expires_in 1.year, public: true if params[:v] == fingerprint
|
|
31
35
|
return unless stale?(etag: [Livechat::VERSION, fingerprint])
|
|
32
36
|
|
|
33
|
-
render plain: source, content_type:
|
|
37
|
+
render plain: source, content_type: content_type
|
|
34
38
|
end
|
|
35
39
|
end
|
|
36
40
|
end
|
|
@@ -17,7 +17,7 @@ module Livechat
|
|
|
17
17
|
def self.attachments_supported? = ATTACHMENTS_SUPPORTED
|
|
18
18
|
|
|
19
19
|
belongs_to :conversation
|
|
20
|
-
has_many_attached :files if ATTACHMENTS_SUPPORTED
|
|
20
|
+
has_many_attached :files, service: ->(_message) { Livechat.config.storage_service } if ATTACHMENTS_SUPPORTED
|
|
21
21
|
|
|
22
22
|
validates :author_type, inclusion: { in: AUTHOR_TYPES }
|
|
23
23
|
validates :body, length: { maximum: MAX_BODY_LENGTH }, allow_blank: true
|
|
@@ -4,245 +4,13 @@
|
|
|
4
4
|
<title><%= t('livechat.dashboard.title', default: 'LiveChat') %> — <%= Livechat.app_name %></title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
6
|
<%= csrf_meta_tags %>
|
|
7
|
+
<%= csp_meta_tag %>
|
|
8
|
+
<%= stylesheet_link_tag "#{dashboard_stylesheet_path}?v=#{Livechat::Widget.dashboard_stylesheet_fingerprint}",
|
|
9
|
+
'data-turbo-track': 'reload' %>
|
|
7
10
|
<%# Same-origin script instead of inline handlers, so thread polling and
|
|
8
11
|
keyboard submit work under strict script-src CSPs. %>
|
|
9
12
|
<%= javascript_include_tag "#{dashboard_script_path}?v=#{Livechat::Widget.dashboard_fingerprint}",
|
|
10
13
|
defer: true, nonce: true %>
|
|
11
|
-
<style>
|
|
12
|
-
:root {
|
|
13
|
-
color-scheme: light dark;
|
|
14
|
-
--bg: #f6f7f9; --surface: #fff; --text: #1c2024; --muted: #6b7280;
|
|
15
|
-
--border: #e5e7eb; --accent: #2563eb; --accent-text: #fff;
|
|
16
|
-
--open: #16a34a; --resolved: #6b7280; --danger: #dc2626;
|
|
17
|
-
}
|
|
18
|
-
@media (prefers-color-scheme: dark) {
|
|
19
|
-
:root {
|
|
20
|
-
--bg: #111418; --surface: #1a1f26; --text: #e6e8ea; --muted: #9aa2ab;
|
|
21
|
-
--border: #2a313a; --accent: #3b82f6;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
* { box-sizing: border-box; }
|
|
25
|
-
body { margin: 0; background: var(--bg); color: var(--text);
|
|
26
|
-
font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
|
|
27
|
-
a { color: var(--accent); text-decoration: none; }
|
|
28
|
-
a:hover { text-decoration: underline; }
|
|
29
|
-
.container { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
|
|
30
|
-
h1 { font-size: 22px; margin: 0 0 16px; }
|
|
31
|
-
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
|
|
32
|
-
.tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--muted); }
|
|
33
|
-
.tabs a.active { color: var(--text); font-weight: 600; border: 1px solid var(--border);
|
|
34
|
-
border-bottom: 2px solid var(--surface); background: var(--surface); margin-bottom: -1px; }
|
|
35
|
-
.tabs a:hover { text-decoration: none; color: var(--text); }
|
|
36
|
-
.count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
|
|
37
|
-
background: var(--border); font-size: 12px; text-align: center; }
|
|
38
|
-
.filters { margin-bottom: 16px; display: flex; gap: 8px; }
|
|
39
|
-
.filters input[type=search] { flex: 1; max-width: 320px; padding: 6px 10px; border: 1px solid var(--border);
|
|
40
|
-
border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
|
|
41
|
-
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
|
|
42
|
-
.card.pad { padding: 16px; }
|
|
43
|
-
table { width: 100%; border-collapse: collapse; }
|
|
44
|
-
th, td { padding: 10px 14px; text-align: left; vertical-align: top; }
|
|
45
|
-
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
|
|
46
|
-
border-bottom: 1px solid var(--border); }
|
|
47
|
-
tr + tr td { border-top: 1px solid var(--border); }
|
|
48
|
-
tr.unread td { font-weight: 600; }
|
|
49
|
-
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
|
|
50
|
-
color: #fff; white-space: nowrap; }
|
|
51
|
-
.badge.status-open { background: var(--open); }
|
|
52
|
-
.badge.status-resolved { background: var(--resolved); }
|
|
53
|
-
.badge.unread-count { background: var(--danger); }
|
|
54
|
-
.muted { color: var(--muted); font-size: 13px; }
|
|
55
|
-
.pager { margin-top: 16px; display: flex; gap: 16px; }
|
|
56
|
-
.empty { padding: 48px 16px; text-align: center; color: var(--muted); }
|
|
57
|
-
.breadcrumb { margin-bottom: 12px; font-size: 13px; }
|
|
58
|
-
.flash { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
|
|
59
|
-
background: var(--surface); }
|
|
60
|
-
.flash.alert { color: var(--danger); border-color: var(--danger); }
|
|
61
|
-
.head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
|
|
62
|
-
.head-row h1 { margin: 0; flex: 1; }
|
|
63
|
-
.head-row form { display: inline; }
|
|
64
|
-
.status-toggle-form { flex: 0 0 auto; }
|
|
65
|
-
.status-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 176px;
|
|
66
|
-
min-height: 36px; padding: 3px; border-radius: 999px; border: 1px solid var(--border);
|
|
67
|
-
background: var(--bg); color: var(--muted); overflow: hidden; }
|
|
68
|
-
.status-toggle::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px;
|
|
69
|
-
width: calc(50% - 3px); border-radius: 999px; background: var(--surface);
|
|
70
|
-
box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transition: left .16s ease; }
|
|
71
|
-
.status-toggle.is-open::before { left: 3px; }
|
|
72
|
-
.status-toggle.is-resolved::before { left: 50%; }
|
|
73
|
-
.status-toggle span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
|
|
74
|
-
min-width: 0; padding: 0 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
|
|
75
|
-
.status-toggle.is-open span:first-child { color: var(--open); }
|
|
76
|
-
.status-toggle.is-resolved span:last-child { color: var(--text); }
|
|
77
|
-
.status-toggle:hover { text-decoration: none; color: var(--text); }
|
|
78
|
-
button, .button { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
|
|
79
|
-
background: var(--surface); color: var(--text); font: inherit; }
|
|
80
|
-
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
|
|
81
|
-
.case-id { color: var(--muted); font-weight: 400; font-size: 15px; }
|
|
82
|
-
.avatars { display: inline-flex; }
|
|
83
|
-
.avatars .avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
|
|
84
|
-
align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
|
|
85
|
-
color: #fff; border: 2px solid var(--surface); cursor: default; }
|
|
86
|
-
.avatars .avatar + .avatar { margin-left: -8px; }
|
|
87
|
-
.avatar.color-0 { background: #2563eb; } .avatar.color-1 { background: #16a34a; }
|
|
88
|
-
.avatar.color-2 { background: #d97706; } .avatar.color-3 { background: #dc2626; }
|
|
89
|
-
.avatar.color-4 { background: #7c3aed; } .avatar.color-5 { background: #0891b2; }
|
|
90
|
-
.context-line { margin: -6px 0 16px; overflow-wrap: anywhere; }
|
|
91
|
-
.thread { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
|
|
92
|
-
.thread .who { font-size: 12px; color: var(--muted); margin: 10px 4px 2px; }
|
|
93
|
-
.thread .who.visitor { text-align: left; }
|
|
94
|
-
.thread .who.agent { text-align: right; }
|
|
95
|
-
.thread .msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap;
|
|
96
|
-
overflow-wrap: anywhere; }
|
|
97
|
-
.thread .msg.visitor { align-self: flex-start; background: var(--bg); border: 1px solid var(--border);
|
|
98
|
-
border-bottom-left-radius: 4px; }
|
|
99
|
-
.thread .msg.agent { align-self: flex-end; background: var(--accent); color: var(--accent-text);
|
|
100
|
-
border-bottom-right-radius: 4px; }
|
|
101
|
-
.thread .system { align-self: center; color: var(--muted); font-size: 12px; margin: 8px 0; }
|
|
102
|
-
.thread .typing { align-self: flex-start; color: var(--muted); font-size: 12px;
|
|
103
|
-
font-style: italic; margin: 8px 4px 2px; }
|
|
104
|
-
.thread .msg .atts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
|
|
105
|
-
.thread .msg .att-img img { max-width: 100%; max-height: 240px; border-radius: 8px; display: block; }
|
|
106
|
-
.thread .msg .att-audio { display: block; width: 280px; max-width: 100%; height: 36px; }
|
|
107
|
-
.thread .msg .att-file { display: inline-block; padding: 6px 10px; border-radius: 8px;
|
|
108
|
-
background: rgba(0,0,0,.06); color: inherit; font-size: 13px;
|
|
109
|
-
overflow-wrap: anywhere; }
|
|
110
|
-
.thread .msg.agent .att-file { background: rgba(255,255,255,.2); }
|
|
111
|
-
#new-messages { margin: 12px 0 0; }
|
|
112
|
-
#new-messages a { font-weight: 600; }
|
|
113
|
-
/* Unified composer box (matches the visitor widget): the reply on top, a
|
|
114
|
-
toolbar row below (tools left, send right), all inside one bordered box
|
|
115
|
-
that lights up on focus. */
|
|
116
|
-
.reply { display: flex; flex-direction: column; gap: 6px; margin: 10px 12px; padding: 8px 10px;
|
|
117
|
-
border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
|
|
118
|
-
.reply:focus-within { border-color: var(--accent); }
|
|
119
|
-
.reply textarea { -webkit-appearance: none; appearance: none; border: none; background: none;
|
|
120
|
-
resize: none; outline: none; font: inherit; color: var(--text);
|
|
121
|
-
padding: 4px 4px 0; min-height: 40px; max-height: 160px; overflow-y: auto; }
|
|
122
|
-
.reply input[type=file].reply-file { font-size: 12px; color: var(--muted); }
|
|
123
|
-
.reply-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
124
|
-
.reply-tools { display: flex; align-items: center; gap: 2px; }
|
|
125
|
-
.reply .attach { width: 32px; height: 32px; padding: 0; border: none; background: none;
|
|
126
|
-
color: var(--muted); border-radius: 8px; cursor: pointer;
|
|
127
|
-
display: flex; align-items: center; justify-content: center; }
|
|
128
|
-
.reply .attach:hover { background: var(--border); color: var(--text); }
|
|
129
|
-
.reply .attach.recording-on { color: var(--danger); }
|
|
130
|
-
.reply.is-recording .attach { display: none; }
|
|
131
|
-
.reply .chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
132
|
-
.reply .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
|
|
133
|
-
padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 999px;
|
|
134
|
-
background: var(--surface); font-size: 12px; }
|
|
135
|
-
.reply .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
|
|
136
|
-
.reply .chip-x { padding: 0 2px; border: none; background: none; color: var(--muted);
|
|
137
|
-
font-size: 16px; line-height: 1; cursor: pointer; }
|
|
138
|
-
.reply .chip-x:hover { color: var(--text); }
|
|
139
|
-
.reply .recording { display: inline-flex; align-items: center; gap: 8px; height: 32px;
|
|
140
|
-
padding: 0 4px 0 8px; border: 1px solid var(--border); border-radius: 999px;
|
|
141
|
-
background: var(--surface); color: var(--muted); font-size: 12px;
|
|
142
|
-
white-space: nowrap; }
|
|
143
|
-
.reply .recording[hidden] { display: none; }
|
|
144
|
-
.reply .recording-status { display: inline-grid; grid-template-columns: 8px 24px 34px;
|
|
145
|
-
align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
|
|
146
|
-
.reply .recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
|
|
147
|
-
box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
|
|
148
|
-
.reply .recording-rec { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--danger); }
|
|
149
|
-
.reply .recording-actions { display: flex; align-items: center; gap: 4px; }
|
|
150
|
-
.reply .recording-actions button { width: 24px; height: 24px; padding: 0; border: none;
|
|
151
|
-
border-radius: 50%; background: none; color: var(--muted);
|
|
152
|
-
display: flex; align-items: center; justify-content: center; }
|
|
153
|
-
.reply .recording-actions button:hover { background: var(--border); color: var(--text); }
|
|
154
|
-
.reply .recording-actions .stop-recording { background: var(--danger); color: #fff; }
|
|
155
|
-
.reply .recording-actions .stop-recording:hover { background: #b91c1c; color: #fff; }
|
|
156
|
-
.reply .send { width: 32px; min-width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%;
|
|
157
|
-
background: var(--accent); color: var(--accent-text); cursor: pointer;
|
|
158
|
-
display: flex; align-items: center; justify-content: center; }
|
|
159
|
-
/* Desktop inbox: a durable conversation list on the left and the active
|
|
160
|
-
thread on the right, with each pane owning its own scroll. */
|
|
161
|
-
.lvc-inbox, .lvc-inbox .container { height: 100vh; height: 100dvh; }
|
|
162
|
-
.lvc-inbox { overflow: hidden; }
|
|
163
|
-
.lvc-inbox .container { max-width: 1280px; display: flex; flex-direction: column; padding-bottom: 16px; }
|
|
164
|
-
.lvc-inbox .container > h1 { flex: 0 0 auto; margin-bottom: 14px; }
|
|
165
|
-
.inbox-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(320px, 380px) 1fr;
|
|
166
|
-
gap: 16px; }
|
|
167
|
-
.inbox-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column;
|
|
168
|
-
background: var(--surface); border: 1px solid var(--border);
|
|
169
|
-
border-radius: 8px; overflow: hidden; }
|
|
170
|
-
.inbox-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; padding: 0; background: transparent;
|
|
171
|
-
border: 0; border-radius: 0; gap: 6px; flex-wrap: nowrap; }
|
|
172
|
-
.inbox-sidebar .tabs a { flex: 1 1 0; position: relative; display: flex; align-items: center;
|
|
173
|
-
justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px 8px;
|
|
174
|
-
border-radius: 8px; color: var(--muted); font-weight: 600; }
|
|
175
|
-
.inbox-sidebar .tabs a.active { color: var(--text); border: 0; background: transparent; box-shadow: none; margin: 0; }
|
|
176
|
-
.inbox-sidebar .tabs a.active::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0;
|
|
177
|
-
height: 2px; border-radius: 999px; background: var(--accent); }
|
|
178
|
-
.inbox-sidebar .tabs a:not(.active):hover { text-decoration: none; color: var(--text); background: var(--bg); }
|
|
179
|
-
.inbox-sidebar .tabs .count { margin-left: 0; background: color-mix(in srgb, var(--muted) 14%, transparent); }
|
|
180
|
-
.inbox-sidebar .tabs a.active .count { background: var(--border); }
|
|
181
|
-
.inbox-sidebar .filters { flex: 0 0 auto; margin: 0; padding: 12px; border-bottom: 1px solid var(--border); }
|
|
182
|
-
.inbox-sidebar .filters input[type=search] { max-width: none; }
|
|
183
|
-
.conversation-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
184
|
-
.conversation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px;
|
|
185
|
-
color: var(--text); border-bottom: 1px solid var(--border); }
|
|
186
|
-
.conversation-row:hover { text-decoration: none; background: var(--bg); }
|
|
187
|
-
.conversation-row.active { background: color-mix(in srgb, var(--accent) 9%, var(--surface));
|
|
188
|
-
box-shadow: inset 3px 0 0 var(--accent); }
|
|
189
|
-
.conversation-row.unread .conversation-name, .conversation-row.unread .conversation-preview { font-weight: 700; }
|
|
190
|
-
.conversation-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
|
191
|
-
.conversation-topline, .conversation-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
|
|
192
|
-
.conversation-name, .conversation-preview, .conversation-meta span { overflow: hidden; text-overflow: ellipsis;
|
|
193
|
-
white-space: nowrap; }
|
|
194
|
-
.conversation-name { font-weight: 600; }
|
|
195
|
-
.conversation-time { margin-left: auto; white-space: nowrap; }
|
|
196
|
-
.conversation-preview { display: block; }
|
|
197
|
-
.conversation-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
|
|
198
|
-
gap: 8px; padding-top: 1px; }
|
|
199
|
-
.conversation-side .avatars { min-height: 26px; }
|
|
200
|
-
.inbox-sidebar .pager { flex: 0 0 auto; margin: 0; padding: 10px 12px; border-top: 1px solid var(--border); }
|
|
201
|
-
.inbox-thread { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
|
|
202
|
-
.inbox-thread .conversation-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
|
|
203
|
-
padding: 0; }
|
|
204
|
-
.conversation-panel .head-row, .conversation-panel .context-line { flex: 0 0 auto; }
|
|
205
|
-
.conversation-panel .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
|
|
206
|
-
border-radius: 8px; }
|
|
207
|
-
.conversation-panel .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
208
|
-
.conversation-panel .reply { flex: 0 0 auto; }
|
|
209
|
-
.empty-state { margin: auto; max-width: 320px; padding: 24px; text-align: center; }
|
|
210
|
-
.empty-state h2 { margin: 0 0 6px; font-size: 18px; }
|
|
211
|
-
.empty-state p { margin: 0; }
|
|
212
|
-
.mobile-back { display: none; }
|
|
213
|
-
/* Conversation page: fill the viewport and scroll the THREAD, not the
|
|
214
|
-
page — so a reply never jumps the page, and the composer stays put. */
|
|
215
|
-
.lvc-convo, .lvc-convo .container { height: 100vh; height: 100dvh; }
|
|
216
|
-
.lvc-convo { overflow: hidden; }
|
|
217
|
-
.lvc-convo .container { display: flex; flex-direction: column; padding-bottom: 16px; }
|
|
218
|
-
.lvc-convo .breadcrumb, .lvc-convo .head-row, .lvc-convo .context-line,
|
|
219
|
-
.lvc-convo .flash { flex: 0 0 auto; }
|
|
220
|
-
.lvc-convo .conversation-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
|
221
|
-
.lvc-convo .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
|
222
|
-
.lvc-convo .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
223
|
-
.lvc-convo .reply { flex: 0 0 auto; }
|
|
224
|
-
@media (max-width: 760px) {
|
|
225
|
-
body { font-size: 14px; }
|
|
226
|
-
.container { padding: 14px 10px 24px; }
|
|
227
|
-
.lvc-inbox { overflow: auto; }
|
|
228
|
-
.lvc-inbox, .lvc-inbox .container { min-height: 100vh; height: auto; }
|
|
229
|
-
.lvc-inbox .container { padding-bottom: 10px; }
|
|
230
|
-
.inbox-shell { display: block; min-height: calc(100vh - 62px); }
|
|
231
|
-
.inbox-sidebar, .inbox-thread { min-height: calc(100vh - 62px); }
|
|
232
|
-
.inbox-shell.has-selected .inbox-sidebar { display: none; }
|
|
233
|
-
.inbox-shell:not(.has-selected) .inbox-thread { display: none; }
|
|
234
|
-
.conversation-list { overflow: visible; }
|
|
235
|
-
.conversation-row { padding: 12px; }
|
|
236
|
-
.conversation-meta { display: none; }
|
|
237
|
-
.conversation-panel { min-height: calc(100vh - 64px); }
|
|
238
|
-
.inbox-thread .conversation-panel { padding: 0; }
|
|
239
|
-
.mobile-back { display: block; flex: 0 0 auto; margin: 10px 10px 0; font-size: 13px; }
|
|
240
|
-
.conversation-panel .head-row h1 { font-size: 18px; }
|
|
241
|
-
.status-toggle { width: 152px; min-height: 34px; }
|
|
242
|
-
.status-toggle span { padding: 0 7px; font-size: 12px; }
|
|
243
|
-
.thread .msg { max-width: 88%; }
|
|
244
|
-
}
|
|
245
|
-
</style>
|
|
246
14
|
</head>
|
|
247
15
|
<body class="<%= yield(:body_class) %>">
|
|
248
16
|
<div class="container">
|
data/config/routes.rb
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Livechat::Engine.routes.draw do
|
|
4
4
|
get 'widget.js', to: 'widgets#show', as: :widget
|
|
5
5
|
get 'dashboard.js', to: 'widgets#dashboard', as: :dashboard_script
|
|
6
|
+
get 'dashboard.css', to: 'widgets#dashboard_stylesheet', as: :dashboard_stylesheet
|
|
6
7
|
|
|
7
8
|
# The widget's API. Everything is scoped to the requesting visitor —
|
|
8
9
|
# signed-in id or guest cookie — never to an enumerable conversation id.
|
|
@@ -66,6 +66,7 @@ Livechat.configure do |config|
|
|
|
66
66
|
# Active Storage (run `rails active_storage:install` once). Files are served
|
|
67
67
|
# through the engine — gated the same as the chat — never a public blob URL.
|
|
68
68
|
# config.attach_files = true
|
|
69
|
+
# config.storage_service = nil # e.g. :livechat_uploads from config/storage.yml
|
|
69
70
|
# config.max_attachments = 5
|
|
70
71
|
# config.max_attachment_size = 10.megabytes
|
|
71
72
|
# config.allowed_attachment_types = nil # e.g. %w[image/png image/jpeg application/pdf]
|
|
@@ -77,6 +78,7 @@ Livechat.configure do |config|
|
|
|
77
78
|
# config.action_cable = true
|
|
78
79
|
# config.action_cable_url = "/cable"
|
|
79
80
|
|
|
80
|
-
#
|
|
81
|
+
# Default mount path used by `mount_livechat`.
|
|
82
|
+
# Override only if you mount the engine manually.
|
|
81
83
|
# config.mount_path = "/livechat"
|
|
82
84
|
end
|
|
@@ -71,6 +71,11 @@ module Livechat
|
|
|
71
71
|
# to turn attachments off even where Active Storage exists.
|
|
72
72
|
attr_accessor :attach_files
|
|
73
73
|
|
|
74
|
+
# Named Active Storage service for chat attachments. nil uses the host
|
|
75
|
+
# app's default service; set this to route files to a dedicated bucket,
|
|
76
|
+
# folder, or provider-specific service entry.
|
|
77
|
+
attr_accessor :storage_service
|
|
78
|
+
|
|
74
79
|
# Cap on attachments per message, on the size of each file (bytes), and
|
|
75
80
|
# an optional content-type allowlist (nil accepts any type). Enforced on
|
|
76
81
|
# the server; a rejected upload comes back as a validation error.
|
|
@@ -111,6 +116,7 @@ module Livechat
|
|
|
111
116
|
@rate_limit = { to: 30, within: 60 }
|
|
112
117
|
@mount_path = '/livechat'
|
|
113
118
|
@attach_files = true
|
|
119
|
+
@storage_service = nil
|
|
114
120
|
@max_attachments = 5
|
|
115
121
|
@max_attachment_size = 10 * 1024 * 1024
|
|
116
122
|
@allowed_attachment_types = nil
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
color-scheme: light dark;
|
|
3
|
+
--bg: #f6f7f9; --surface: #fff; --text: #1c2024; --muted: #6b7280;
|
|
4
|
+
--border: #e5e7eb; --accent: #2563eb; --accent-text: #fff;
|
|
5
|
+
--open: #16a34a; --resolved: #6b7280; --danger: #dc2626;
|
|
6
|
+
}
|
|
7
|
+
@media (prefers-color-scheme: dark) {
|
|
8
|
+
:root {
|
|
9
|
+
--bg: #111418; --surface: #1a1f26; --text: #e6e8ea; --muted: #9aa2ab;
|
|
10
|
+
--border: #2a313a; --accent: #3b82f6;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
* { box-sizing: border-box; }
|
|
14
|
+
body { margin: 0; background: var(--bg); color: var(--text);
|
|
15
|
+
font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
|
|
16
|
+
a { color: var(--accent); text-decoration: none; }
|
|
17
|
+
a:hover { text-decoration: underline; }
|
|
18
|
+
.container { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
|
|
19
|
+
h1 { font-size: 22px; margin: 0 0 16px; }
|
|
20
|
+
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
|
|
21
|
+
.tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--muted); }
|
|
22
|
+
.tabs a.active { color: var(--text); font-weight: 600; border: 1px solid var(--border);
|
|
23
|
+
border-bottom: 2px solid var(--surface); background: var(--surface); margin-bottom: -1px; }
|
|
24
|
+
.tabs a:hover { text-decoration: none; color: var(--text); }
|
|
25
|
+
.count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
|
|
26
|
+
background: var(--border); font-size: 12px; text-align: center; }
|
|
27
|
+
.filters { margin-bottom: 16px; display: flex; gap: 8px; }
|
|
28
|
+
.filters input[type=search] { flex: 1; max-width: 320px; padding: 6px 10px; border: 1px solid var(--border);
|
|
29
|
+
border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
|
|
30
|
+
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
|
|
31
|
+
.card.pad { padding: 16px; }
|
|
32
|
+
table { width: 100%; border-collapse: collapse; }
|
|
33
|
+
th, td { padding: 10px 14px; text-align: left; vertical-align: top; }
|
|
34
|
+
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
|
|
35
|
+
border-bottom: 1px solid var(--border); }
|
|
36
|
+
tr + tr td { border-top: 1px solid var(--border); }
|
|
37
|
+
tr.unread td { font-weight: 600; }
|
|
38
|
+
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
|
|
39
|
+
color: #fff; white-space: nowrap; }
|
|
40
|
+
.badge.status-open { background: var(--open); }
|
|
41
|
+
.badge.status-resolved { background: var(--resolved); }
|
|
42
|
+
.badge.unread-count { background: var(--danger); }
|
|
43
|
+
.muted { color: var(--muted); font-size: 13px; }
|
|
44
|
+
.pager { margin-top: 16px; display: flex; gap: 16px; }
|
|
45
|
+
.empty { padding: 48px 16px; text-align: center; color: var(--muted); }
|
|
46
|
+
.breadcrumb { margin-bottom: 12px; font-size: 13px; }
|
|
47
|
+
.flash { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
|
|
48
|
+
background: var(--surface); }
|
|
49
|
+
.flash.alert { color: var(--danger); border-color: var(--danger); }
|
|
50
|
+
.head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
|
|
51
|
+
.head-row h1 { margin: 0; flex: 1; }
|
|
52
|
+
.head-row form { display: inline; }
|
|
53
|
+
.status-toggle-form { flex: 0 0 auto; }
|
|
54
|
+
.status-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 176px;
|
|
55
|
+
min-height: 36px; padding: 3px; border-radius: 999px; border: 1px solid var(--border);
|
|
56
|
+
background: var(--bg); color: var(--muted); overflow: hidden; }
|
|
57
|
+
.status-toggle::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px;
|
|
58
|
+
width: calc(50% - 3px); border-radius: 999px; background: var(--surface);
|
|
59
|
+
box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transition: left .16s ease; }
|
|
60
|
+
.status-toggle.is-open::before { left: 3px; }
|
|
61
|
+
.status-toggle.is-resolved::before { left: 50%; }
|
|
62
|
+
.status-toggle span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
|
|
63
|
+
min-width: 0; padding: 0 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
|
|
64
|
+
.status-toggle.is-open span:first-child { color: var(--open); }
|
|
65
|
+
.status-toggle.is-resolved span:last-child { color: var(--text); }
|
|
66
|
+
.status-toggle:hover { text-decoration: none; color: var(--text); }
|
|
67
|
+
button, .button { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
|
|
68
|
+
background: var(--surface); color: var(--text); font: inherit; }
|
|
69
|
+
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
|
|
70
|
+
.case-id { color: var(--muted); font-weight: 400; font-size: 15px; }
|
|
71
|
+
.avatars { display: inline-flex; }
|
|
72
|
+
.avatars .avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
|
|
73
|
+
align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
|
|
74
|
+
color: #fff; border: 2px solid var(--surface); cursor: default; }
|
|
75
|
+
.avatars .avatar + .avatar { margin-left: -8px; }
|
|
76
|
+
.avatar.color-0 { background: #2563eb; } .avatar.color-1 { background: #16a34a; }
|
|
77
|
+
.avatar.color-2 { background: #d97706; } .avatar.color-3 { background: #dc2626; }
|
|
78
|
+
.avatar.color-4 { background: #7c3aed; } .avatar.color-5 { background: #0891b2; }
|
|
79
|
+
.context-line { margin: -6px 0 16px; overflow-wrap: anywhere; }
|
|
80
|
+
.thread { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
|
|
81
|
+
.thread .who { font-size: 12px; color: var(--muted); margin: 10px 4px 2px; }
|
|
82
|
+
.thread .who.visitor { text-align: left; }
|
|
83
|
+
.thread .who.agent { text-align: right; }
|
|
84
|
+
.thread .msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap;
|
|
85
|
+
overflow-wrap: anywhere; }
|
|
86
|
+
.thread .msg.visitor { align-self: flex-start; background: var(--bg); border: 1px solid var(--border);
|
|
87
|
+
border-bottom-left-radius: 4px; }
|
|
88
|
+
.thread .msg.agent { align-self: flex-end; background: var(--accent); color: var(--accent-text);
|
|
89
|
+
border-bottom-right-radius: 4px; }
|
|
90
|
+
.thread .system { align-self: center; color: var(--muted); font-size: 12px; margin: 8px 0; }
|
|
91
|
+
.thread .typing { align-self: flex-start; color: var(--muted); font-size: 12px;
|
|
92
|
+
font-style: italic; margin: 8px 4px 2px; }
|
|
93
|
+
.thread .msg .atts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
|
|
94
|
+
.thread .msg .att-img img { max-width: 100%; max-height: 240px; border-radius: 8px; display: block; }
|
|
95
|
+
.thread .msg .att-audio { display: block; width: 280px; max-width: 100%; height: 36px; }
|
|
96
|
+
.thread .msg .att-file { display: inline-block; padding: 6px 10px; border-radius: 8px;
|
|
97
|
+
background: rgba(0,0,0,.06); color: inherit; font-size: 13px;
|
|
98
|
+
overflow-wrap: anywhere; }
|
|
99
|
+
.thread .msg.agent .att-file { background: rgba(255,255,255,.2); }
|
|
100
|
+
#new-messages { margin: 12px 0 0; }
|
|
101
|
+
#new-messages a { font-weight: 600; }
|
|
102
|
+
/* Unified composer box (matches the visitor widget): the reply on top, a
|
|
103
|
+
toolbar row below (tools left, send right), all inside one bordered box
|
|
104
|
+
that lights up on focus. */
|
|
105
|
+
.reply { display: flex; flex-direction: column; gap: 6px; margin: 10px 12px; padding: 8px 10px;
|
|
106
|
+
border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
|
|
107
|
+
.reply:focus-within { border-color: var(--accent); }
|
|
108
|
+
.reply textarea { -webkit-appearance: none; appearance: none; border: none; background: none;
|
|
109
|
+
resize: none; outline: none; font: inherit; color: var(--text);
|
|
110
|
+
padding: 4px 4px 0; min-height: 40px; max-height: 160px; overflow-y: auto; }
|
|
111
|
+
.reply input[type=file].reply-file { font-size: 12px; color: var(--muted); }
|
|
112
|
+
.reply-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
113
|
+
.reply-tools { display: flex; align-items: center; gap: 2px; }
|
|
114
|
+
.reply .attach { width: 32px; height: 32px; padding: 0; border: none; background: none;
|
|
115
|
+
color: var(--muted); border-radius: 8px; cursor: pointer;
|
|
116
|
+
display: flex; align-items: center; justify-content: center; }
|
|
117
|
+
.reply .attach:hover { background: var(--border); color: var(--text); }
|
|
118
|
+
.reply .attach.recording-on { color: var(--danger); }
|
|
119
|
+
.reply.is-recording .attach { display: none; }
|
|
120
|
+
.reply .chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
121
|
+
.reply .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
|
|
122
|
+
padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 999px;
|
|
123
|
+
background: var(--surface); font-size: 12px; }
|
|
124
|
+
.reply .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
|
|
125
|
+
.reply .chip-x { padding: 0 2px; border: none; background: none; color: var(--muted);
|
|
126
|
+
font-size: 16px; line-height: 1; cursor: pointer; }
|
|
127
|
+
.reply .chip-x:hover { color: var(--text); }
|
|
128
|
+
.reply .recording { display: inline-flex; align-items: center; gap: 8px; height: 32px;
|
|
129
|
+
padding: 0 4px 0 8px; border: 1px solid var(--border); border-radius: 999px;
|
|
130
|
+
background: var(--surface); color: var(--muted); font-size: 12px;
|
|
131
|
+
white-space: nowrap; }
|
|
132
|
+
.reply .recording[hidden] { display: none; }
|
|
133
|
+
.reply .recording-status { display: inline-grid; grid-template-columns: 8px 24px 34px;
|
|
134
|
+
align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
|
|
135
|
+
.reply .recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
|
|
136
|
+
box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
|
|
137
|
+
.reply .recording-rec { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--danger); }
|
|
138
|
+
.reply .recording-actions { display: flex; align-items: center; gap: 4px; }
|
|
139
|
+
.reply .recording-actions button { width: 24px; height: 24px; padding: 0; border: none;
|
|
140
|
+
border-radius: 50%; background: none; color: var(--muted);
|
|
141
|
+
display: flex; align-items: center; justify-content: center; }
|
|
142
|
+
.reply .recording-actions button:hover { background: var(--border); color: var(--text); }
|
|
143
|
+
.reply .recording-actions .stop-recording { background: var(--danger); color: #fff; }
|
|
144
|
+
.reply .recording-actions .stop-recording:hover { background: #b91c1c; color: #fff; }
|
|
145
|
+
.reply .send { width: 32px; min-width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%;
|
|
146
|
+
background: var(--accent); color: var(--accent-text); cursor: pointer;
|
|
147
|
+
display: flex; align-items: center; justify-content: center; }
|
|
148
|
+
/* Desktop inbox: a durable conversation list on the left and the active
|
|
149
|
+
thread on the right, with each pane owning its own scroll. */
|
|
150
|
+
.lvc-inbox, .lvc-inbox .container { height: 100vh; height: 100dvh; }
|
|
151
|
+
.lvc-inbox { overflow: hidden; }
|
|
152
|
+
.lvc-inbox .container { max-width: 1280px; display: flex; flex-direction: column; padding-bottom: 16px; }
|
|
153
|
+
.lvc-inbox .container > h1 { flex: 0 0 auto; margin-bottom: 14px; }
|
|
154
|
+
.inbox-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(320px, 380px) 1fr;
|
|
155
|
+
gap: 16px; }
|
|
156
|
+
.inbox-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column;
|
|
157
|
+
background: var(--surface); border: 1px solid var(--border);
|
|
158
|
+
border-radius: 8px; overflow: hidden; }
|
|
159
|
+
.inbox-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; padding: 0; background: transparent;
|
|
160
|
+
border: 0; border-radius: 0; gap: 6px; flex-wrap: nowrap; }
|
|
161
|
+
.inbox-sidebar .tabs a { flex: 1 1 0; position: relative; display: flex; align-items: center;
|
|
162
|
+
justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px 8px;
|
|
163
|
+
border-radius: 8px; color: var(--muted); font-weight: 600; }
|
|
164
|
+
.inbox-sidebar .tabs a.active { color: var(--text); border: 0; background: transparent; box-shadow: none; margin: 0; }
|
|
165
|
+
.inbox-sidebar .tabs a.active::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0;
|
|
166
|
+
height: 2px; border-radius: 999px; background: var(--accent); }
|
|
167
|
+
.inbox-sidebar .tabs a:not(.active):hover { text-decoration: none; color: var(--text); background: var(--bg); }
|
|
168
|
+
.inbox-sidebar .tabs .count { margin-left: 0; background: color-mix(in srgb, var(--muted) 14%, transparent); }
|
|
169
|
+
.inbox-sidebar .tabs a.active .count { background: var(--border); }
|
|
170
|
+
.inbox-sidebar .filters { flex: 0 0 auto; margin: 0; padding: 12px; border-bottom: 1px solid var(--border); }
|
|
171
|
+
.inbox-sidebar .filters input[type=search] { max-width: none; }
|
|
172
|
+
.conversation-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
173
|
+
.conversation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px;
|
|
174
|
+
color: var(--text); border-bottom: 1px solid var(--border); }
|
|
175
|
+
.conversation-row:hover { text-decoration: none; background: var(--bg); }
|
|
176
|
+
.conversation-row.active { background: color-mix(in srgb, var(--accent) 9%, var(--surface));
|
|
177
|
+
box-shadow: inset 3px 0 0 var(--accent); }
|
|
178
|
+
.conversation-row.unread .conversation-name, .conversation-row.unread .conversation-preview { font-weight: 700; }
|
|
179
|
+
.conversation-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
|
180
|
+
.conversation-topline, .conversation-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
|
|
181
|
+
.conversation-name, .conversation-preview, .conversation-meta span { overflow: hidden; text-overflow: ellipsis;
|
|
182
|
+
white-space: nowrap; }
|
|
183
|
+
.conversation-name { font-weight: 600; }
|
|
184
|
+
.conversation-time { margin-left: auto; white-space: nowrap; }
|
|
185
|
+
.conversation-preview { display: block; }
|
|
186
|
+
.conversation-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
|
|
187
|
+
gap: 8px; padding-top: 1px; }
|
|
188
|
+
.conversation-side .avatars { min-height: 26px; }
|
|
189
|
+
.inbox-sidebar .pager { flex: 0 0 auto; margin: 0; padding: 10px 12px; border-top: 1px solid var(--border); }
|
|
190
|
+
.inbox-thread { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
|
|
191
|
+
.inbox-thread .conversation-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
|
|
192
|
+
padding: 0; }
|
|
193
|
+
.conversation-panel .head-row, .conversation-panel .context-line { flex: 0 0 auto; }
|
|
194
|
+
.conversation-panel .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
|
|
195
|
+
border-radius: 8px; }
|
|
196
|
+
.conversation-panel .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
197
|
+
.conversation-panel .reply { flex: 0 0 auto; }
|
|
198
|
+
.empty-state { margin: auto; max-width: 320px; padding: 24px; text-align: center; }
|
|
199
|
+
.empty-state h2 { margin: 0 0 6px; font-size: 18px; }
|
|
200
|
+
.empty-state p { margin: 0; }
|
|
201
|
+
.mobile-back { display: none; }
|
|
202
|
+
/* Conversation page: fill the viewport and scroll the THREAD, not the
|
|
203
|
+
page — so a reply never jumps the page, and the composer stays put. */
|
|
204
|
+
.lvc-convo, .lvc-convo .container { height: 100vh; height: 100dvh; }
|
|
205
|
+
.lvc-convo { overflow: hidden; }
|
|
206
|
+
.lvc-convo .container { display: flex; flex-direction: column; padding-bottom: 16px; }
|
|
207
|
+
.lvc-convo .breadcrumb, .lvc-convo .head-row, .lvc-convo .context-line,
|
|
208
|
+
.lvc-convo .flash { flex: 0 0 auto; }
|
|
209
|
+
.lvc-convo .conversation-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
|
210
|
+
.lvc-convo .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
|
211
|
+
.lvc-convo .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
212
|
+
.lvc-convo .reply { flex: 0 0 auto; }
|
|
213
|
+
@media (max-width: 760px) {
|
|
214
|
+
body { font-size: 14px; }
|
|
215
|
+
.container { padding: 14px 10px 24px; }
|
|
216
|
+
.lvc-inbox { overflow: auto; }
|
|
217
|
+
.lvc-inbox, .lvc-inbox .container { min-height: 100vh; height: auto; }
|
|
218
|
+
.lvc-inbox .container { padding-bottom: 10px; }
|
|
219
|
+
.inbox-shell { display: block; min-height: calc(100vh - 62px); }
|
|
220
|
+
.inbox-sidebar, .inbox-thread { min-height: calc(100vh - 62px); }
|
|
221
|
+
.inbox-shell.has-selected .inbox-sidebar { display: none; }
|
|
222
|
+
.inbox-shell:not(.has-selected) .inbox-thread { display: none; }
|
|
223
|
+
.conversation-list { overflow: visible; }
|
|
224
|
+
.conversation-row { padding: 12px; }
|
|
225
|
+
.conversation-meta { display: none; }
|
|
226
|
+
.conversation-panel { min-height: calc(100vh - 64px); }
|
|
227
|
+
.inbox-thread .conversation-panel { padding: 0; }
|
|
228
|
+
.mobile-back { display: block; flex: 0 0 auto; margin: 10px 10px 0; font-size: 13px; }
|
|
229
|
+
.conversation-panel .head-row h1 { font-size: 18px; }
|
|
230
|
+
.status-toggle { width: 152px; min-height: 34px; }
|
|
231
|
+
.status-toggle span { padding: 0 7px; font-size: 12px; }
|
|
232
|
+
.thread .msg { max-width: 88%; }
|
|
233
|
+
}
|
data/lib/livechat/engine.rb
CHANGED
|
@@ -16,5 +16,14 @@ module Livechat
|
|
|
16
16
|
initializer 'livechat.action_cable' do
|
|
17
17
|
require 'livechat/channels' if defined?(ActionCable)
|
|
18
18
|
end
|
|
19
|
+
|
|
20
|
+
initializer 'livechat.routing' do
|
|
21
|
+
ActionDispatch::Routing::Mapper.include(Module.new do
|
|
22
|
+
def mount_livechat(at: Livechat.config.mount_path, **options)
|
|
23
|
+
Livechat.config.mount_path = at
|
|
24
|
+
mount Livechat::Engine, at:, **options
|
|
25
|
+
end
|
|
26
|
+
end)
|
|
27
|
+
end
|
|
19
28
|
end
|
|
20
29
|
end
|
data/lib/livechat/version.rb
CHANGED
data/lib/livechat/widget.js
CHANGED
|
@@ -1230,8 +1230,8 @@
|
|
|
1230
1230
|
"#lvc-root #lvc-expand:hover{background:rgba(255,255,255,.15);opacity:1}" +
|
|
1231
1231
|
// Desktop only: a roomier panel for long threads and image-heavy chats.
|
|
1232
1232
|
// Guarded by min-width so it can never shrink the full-screen mobile panel.
|
|
1233
|
-
"@media(min-width:481px){#lvc-root.lvc-expanded #lvc-panel{
|
|
1234
|
-
"
|
|
1233
|
+
"@media(min-width:481px){#lvc-root.lvc-expanded #lvc-panel{top:20px;bottom:20px;" +
|
|
1234
|
+
"width:min(520px,calc(100vw - 40px));height:auto;max-height:none}}" +
|
|
1235
1235
|
// min-height:0 lets this flex child actually scroll within the panel
|
|
1236
1236
|
// instead of overflowing it (the classic flexbox scroll gotcha).
|
|
1237
1237
|
"#lvc-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px;" +
|
data/lib/livechat/widget.rb
CHANGED
|
@@ -11,6 +11,7 @@ module Livechat
|
|
|
11
11
|
module Widget
|
|
12
12
|
SOURCE = File.expand_path('widget.js', __dir__)
|
|
13
13
|
DASHBOARD_SOURCE = File.expand_path('dashboard.js', __dir__)
|
|
14
|
+
DASHBOARD_STYLESHEET_SOURCE = File.expand_path('dashboard.css', __dir__)
|
|
14
15
|
|
|
15
16
|
# Right-to-left scripts, so the chat renders mirrored for those locales.
|
|
16
17
|
# Matched on the language subtag, so region variants ("ar-EG") count too.
|
|
@@ -25,6 +26,10 @@ module Livechat
|
|
|
25
26
|
@dashboard_javascript ||= File.read(DASHBOARD_SOURCE)
|
|
26
27
|
end
|
|
27
28
|
|
|
29
|
+
def dashboard_stylesheet
|
|
30
|
+
@dashboard_stylesheet ||= File.read(DASHBOARD_STYLESHEET_SOURCE)
|
|
31
|
+
end
|
|
32
|
+
|
|
28
33
|
# Content fingerprints for cache-busting script URLs: a changed file is
|
|
29
34
|
# a changed URL, so no browser can ever run stale widget code — Safari
|
|
30
35
|
# has been caught ignoring must-revalidate on same-URL scripts.
|
|
@@ -36,6 +41,10 @@ module Livechat
|
|
|
36
41
|
@dashboard_fingerprint ||= Digest::MD5.hexdigest(dashboard_javascript)
|
|
37
42
|
end
|
|
38
43
|
|
|
44
|
+
def dashboard_stylesheet_fingerprint
|
|
45
|
+
@dashboard_stylesheet_fingerprint ||= Digest::MD5.hexdigest(dashboard_stylesheet)
|
|
46
|
+
end
|
|
47
|
+
|
|
39
48
|
# The two <script> tags the helper renders.
|
|
40
49
|
#
|
|
41
50
|
# The config rides in a `type="application/json"` block: it is *data*,
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: livechat
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.6.
|
|
4
|
+
version: 0.6.6
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Yaroslav Shmarov
|
|
@@ -93,6 +93,7 @@ files:
|
|
|
93
93
|
- lib/livechat.rb
|
|
94
94
|
- lib/livechat/channels.rb
|
|
95
95
|
- lib/livechat/configuration.rb
|
|
96
|
+
- lib/livechat/dashboard.css
|
|
96
97
|
- lib/livechat/dashboard.js
|
|
97
98
|
- lib/livechat/engine.rb
|
|
98
99
|
- lib/livechat/notifications.rb
|