livechat 0.6.3 → 0.6.5
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 +25 -0
- data/README.md +8 -0
- data/app/controllers/livechat/widgets_controller.rb +8 -4
- data/app/models/livechat/conversation.rb +6 -0
- data/app/models/livechat/message.rb +1 -1
- data/app/views/layouts/livechat/application.html.erb +4 -235
- data/app/views/livechat/conversations/_thread_panel.html.erb +2 -7
- data/app/views/livechat/conversations/index.html.erb +1 -1
- data/config/locales/livechat.ar.yml +1 -1
- data/config/locales/livechat.bg.yml +1 -1
- data/config/locales/livechat.bn.yml +1 -1
- data/config/locales/livechat.de.yml +1 -1
- data/config/locales/livechat.el.yml +1 -1
- data/config/locales/livechat.en.yml +1 -1
- data/config/locales/livechat.es.yml +1 -1
- data/config/locales/livechat.fr.yml +1 -1
- data/config/locales/livechat.hi.yml +1 -1
- data/config/locales/livechat.hr.yml +1 -1
- data/config/locales/livechat.id.yml +1 -1
- data/config/locales/livechat.it.yml +1 -1
- data/config/locales/livechat.ja.yml +1 -1
- data/config/locales/livechat.ko.yml +1 -1
- data/config/locales/livechat.lb.yml +1 -1
- data/config/locales/livechat.nl.yml +1 -1
- data/config/locales/livechat.pl.yml +1 -1
- data/config/locales/livechat.pt.yml +1 -1
- data/config/locales/livechat.ro.yml +1 -1
- data/config/locales/livechat.ru.yml +1 -1
- data/config/locales/livechat.th.yml +1 -1
- data/config/locales/livechat.tr.yml +1 -1
- data/config/locales/livechat.uk.yml +1 -1
- data/config/locales/livechat.ur.yml +1 -1
- data/config/locales/livechat.vi.yml +1 -1
- data/config/locales/livechat.zh-CN.yml +1 -1
- 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/dashboard.js +3 -2
- data/lib/livechat/engine.rb +9 -0
- data/lib/livechat/version.rb +1 -1
- data/lib/livechat/widget.js +22 -8
- 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: 5bcd5b886e8241ac0969dfe00c979bf0f8c8b375bdac9776f20173fae827d737
|
|
4
|
+
data.tar.gz: e3df3bd597b8d94b86099071fefcfa33e7a961df125bb0f5fc202efec608c457
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e1d5122996fc4e272fa4a902638b079999c75022465d0ff67db7d628f01cf730187097050bcc2c4c74fe5e2d9e42cdc2707686d811f862e482b18a8ffcac08fa
|
|
7
|
+
data.tar.gz: 5ccc1ee55482383f9e9b3c8b81bfad53f2aac99fdf85cb457e0883c457de208178087abd3d08b1c8736f52c7465464dba5e79e88811acb9344578029d260b935
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.6.5
|
|
4
|
+
|
|
5
|
+
- Added `mount_livechat at: "/livechat"` as the install-time route helper,
|
|
6
|
+
keeping `config.mount_path` synchronized with the mounted engine path while
|
|
7
|
+
preserving manual `mount Livechat::Engine` compatibility.
|
|
8
|
+
- Extracted the dashboard stylesheet into a same-origin, fingerprinted
|
|
9
|
+
`/dashboard.css` endpoint and added CSP meta tags to the dashboard layout.
|
|
10
|
+
The public widget remains pipeline-free and controller-served.
|
|
11
|
+
- Added `config.storage_service`, so host apps can route Livechat attachments
|
|
12
|
+
to a named Active Storage service instead of the app default.
|
|
13
|
+
|
|
14
|
+
## 0.6.4
|
|
15
|
+
|
|
16
|
+
- Hardened the visitor widget composer against host app form-control styles, so
|
|
17
|
+
embedded textareas no longer pick up an extra border or shadow.
|
|
18
|
+
- Matched the visitor widget's chat surface to the inbox pattern: white thread
|
|
19
|
+
background, gray support bubbles, and visible timestamps.
|
|
20
|
+
- Fixed stale typing indicators by clearing each side's typing hint when they
|
|
21
|
+
send and suppressing the hint when a new message arrives.
|
|
22
|
+
- Renamed the default inbox title to `LiveChat` across shipped locales while
|
|
23
|
+
keeping it overridable through `livechat.dashboard.title`.
|
|
24
|
+
- Simplified inbox conversation context by showing visitor email as plain text,
|
|
25
|
+
removing the page URL from the thread header, and keeping direct
|
|
26
|
+
`/livechat/:id` pages scrollable after the two-column inbox layout.
|
|
27
|
+
|
|
3
28
|
## 0.6.3
|
|
4
29
|
|
|
5
30
|
- Replaced the selected thread's separate status badge and resolve/reopen
|
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
|
|
@@ -49,6 +49,7 @@ module Livechat
|
|
|
49
49
|
message = messages.new(author_type: 'visitor', body: body)
|
|
50
50
|
attach(message, files)
|
|
51
51
|
message.save!
|
|
52
|
+
clear_typing!('visitor')
|
|
52
53
|
message
|
|
53
54
|
end
|
|
54
55
|
end
|
|
@@ -58,6 +59,7 @@ module Livechat
|
|
|
58
59
|
agent_id: agent_id.to_s, agent_label: agent_label)
|
|
59
60
|
attach(message, files)
|
|
60
61
|
message.save!
|
|
62
|
+
clear_typing!('agent')
|
|
61
63
|
message
|
|
62
64
|
end
|
|
63
65
|
|
|
@@ -109,6 +111,10 @@ module Livechat
|
|
|
109
111
|
Rails.cache.exist?(typing_cache_key(author_type))
|
|
110
112
|
end
|
|
111
113
|
|
|
114
|
+
def clear_typing!(author_type)
|
|
115
|
+
Rails.cache.delete(typing_cache_key(author_type))
|
|
116
|
+
end
|
|
117
|
+
|
|
112
118
|
private
|
|
113
119
|
|
|
114
120
|
# Attach only real uploads, and only where attachments are enabled — a
|
|
@@ -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
|
|
@@ -1,247 +1,16 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
|
-
<title><%= t('livechat.dashboard.title', default: '
|
|
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 .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
|
221
|
-
.lvc-convo .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
222
|
-
.lvc-convo .reply { flex: 0 0 auto; }
|
|
223
|
-
@media (max-width: 760px) {
|
|
224
|
-
body { font-size: 14px; }
|
|
225
|
-
.container { padding: 14px 10px 24px; }
|
|
226
|
-
.lvc-inbox { overflow: auto; }
|
|
227
|
-
.lvc-inbox, .lvc-inbox .container { min-height: 100vh; height: auto; }
|
|
228
|
-
.lvc-inbox .container { padding-bottom: 10px; }
|
|
229
|
-
.inbox-shell { display: block; min-height: calc(100vh - 62px); }
|
|
230
|
-
.inbox-sidebar, .inbox-thread { min-height: calc(100vh - 62px); }
|
|
231
|
-
.inbox-shell.has-selected .inbox-sidebar { display: none; }
|
|
232
|
-
.inbox-shell:not(.has-selected) .inbox-thread { display: none; }
|
|
233
|
-
.conversation-list { overflow: visible; }
|
|
234
|
-
.conversation-row { padding: 12px; }
|
|
235
|
-
.conversation-meta { display: none; }
|
|
236
|
-
.conversation-panel { min-height: calc(100vh - 64px); }
|
|
237
|
-
.inbox-thread .conversation-panel { padding: 0; }
|
|
238
|
-
.mobile-back { display: block; flex: 0 0 auto; margin: 10px 10px 0; font-size: 13px; }
|
|
239
|
-
.conversation-panel .head-row h1 { font-size: 18px; }
|
|
240
|
-
.status-toggle { width: 152px; min-height: 34px; }
|
|
241
|
-
.status-toggle span { padding: 0 7px; font-size: 12px; }
|
|
242
|
-
.thread .msg { max-width: 88%; }
|
|
243
|
-
}
|
|
244
|
-
</style>
|
|
245
14
|
</head>
|
|
246
15
|
<body class="<%= yield(:body_class) %>">
|
|
247
16
|
<div class="container">
|
|
@@ -20,16 +20,11 @@
|
|
|
20
20
|
<% end %>
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
|
-
<%# One quiet line of live context: who
|
|
24
|
-
and the page of their LAST message (refreshed on every visitor write). %>
|
|
23
|
+
<%# One quiet line of live context: who the visitor is and the language to answer in. %>
|
|
25
24
|
<p class="muted context-line">
|
|
26
25
|
<% context = [] %>
|
|
27
|
-
<% context <<
|
|
26
|
+
<% context << conversation.visitor_email if conversation.visitor_email.present? %>
|
|
28
27
|
<% context << conversation.locale if conversation.locale.present? %>
|
|
29
|
-
<% if conversation.page_url.present? %>
|
|
30
|
-
<% context << link_to(conversation.page_url.sub(%r{\Ahttps?://}, ''), conversation.page_url,
|
|
31
|
-
target: '_blank', rel: 'noopener') %>
|
|
32
|
-
<% end %>
|
|
33
28
|
<%= safe_join(context, ' · ') %>
|
|
34
29
|
</p>
|
|
35
30
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<% content_for :body_class, 'lvc-inbox' %>
|
|
2
2
|
|
|
3
|
-
<h1><%= t('livechat.dashboard.title', default: '
|
|
3
|
+
<h1><%= t('livechat.dashboard.title', default: 'LiveChat') %></h1>
|
|
4
4
|
|
|
5
5
|
<div class="inbox-shell <%= 'has-selected' if @selected_conversation %>">
|
|
6
6
|
<aside class="inbox-sidebar" aria-label="<%= t('livechat.dashboard.conversations', default: 'Conversations') %>">
|
|
@@ -41,7 +41,7 @@ ar:
|
|
|
41
41
|
resolved: "قام %{agent} بحل المحادثة"
|
|
42
42
|
reopened: "قام %{agent} بإعادة فتح المحادثة"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "لا يوجد شيء هنا. عندما يكتب زائر، تظهر المحادثة في هذه الصفحة."
|
|
46
46
|
visitor: "الزائر"
|
|
47
47
|
last_message: "آخر رسالة"
|
|
@@ -41,7 +41,7 @@ bg:
|
|
|
41
41
|
resolved: "%{agent} разреши разговора"
|
|
42
42
|
reopened: "%{agent} отвори отново разговора"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Тук няма нищо. Когато посетител напише съобщение, разговорът се появява на тази страница."
|
|
46
46
|
visitor: "Посетител"
|
|
47
47
|
last_message: "Последно съобщение"
|
|
@@ -41,7 +41,7 @@ bn:
|
|
|
41
41
|
resolved: "%{agent} কথোপকথনটি সমাধান করেছেন"
|
|
42
42
|
reopened: "%{agent} কথোপকথনটি আবার খুলেছেন"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "এখানে এখনও কিছু নেই। কোনো দর্শনার্থী লিখলে কথোপকথনটি এই পৃষ্ঠায় দেখা যাবে।"
|
|
46
46
|
visitor: "দর্শনার্থী"
|
|
47
47
|
last_message: "শেষ বার্তা"
|
|
@@ -41,7 +41,7 @@ de:
|
|
|
41
41
|
resolved: "%{agent} hat die Unterhaltung gelöst"
|
|
42
42
|
reopened: "%{agent} hat die Unterhaltung wieder geöffnet"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Hier ist noch nichts. Wenn ein Besucher schreibt, erscheint die Unterhaltung auf dieser Seite."
|
|
46
46
|
visitor: "Besucher"
|
|
47
47
|
last_message: "Letzte Nachricht"
|
|
@@ -41,7 +41,7 @@ el:
|
|
|
41
41
|
resolved: "%{agent} επέλυσε τη συνομιλία"
|
|
42
42
|
reopened: "%{agent} άνοιξε ξανά τη συνομιλία"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Δεν υπάρχει τίποτα εδώ ακόμα. Όταν ένας επισκέπτης γράψει, η συνομιλία εμφανίζεται σε αυτήν τη σελίδα."
|
|
46
46
|
visitor: "Επισκέπτης"
|
|
47
47
|
last_message: "Τελευταίο μήνυμα"
|
|
@@ -41,7 +41,7 @@ en:
|
|
|
41
41
|
resolved: "%{agent} resolved the conversation"
|
|
42
42
|
reopened: "%{agent} reopened the conversation"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Nothing here. When a visitor writes, the conversation lands on this page."
|
|
46
46
|
visitor: "Visitor"
|
|
47
47
|
last_message: "Last message"
|
|
@@ -41,7 +41,7 @@ es:
|
|
|
41
41
|
resolved: "%{agent} resolvió la conversación"
|
|
42
42
|
reopened: "%{agent} reabrió la conversación"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Nada por aquí todavía. Cuando un visitante escriba, la conversación aparecerá en esta página."
|
|
46
46
|
visitor: "Visitante"
|
|
47
47
|
last_message: "Último mensaje"
|
|
@@ -41,7 +41,7 @@ fr:
|
|
|
41
41
|
resolved: "%{agent} a résolu la conversation"
|
|
42
42
|
reopened: "%{agent} a rouvert la conversation"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Rien ici pour l'instant. Lorsqu'un visiteur écrit, la conversation apparaît sur cette page."
|
|
46
46
|
visitor: "Visiteur"
|
|
47
47
|
last_message: "Dernier message"
|
|
@@ -41,7 +41,7 @@ hi:
|
|
|
41
41
|
resolved: "%{agent} ने बातचीत सुलझा दी"
|
|
42
42
|
reopened: "%{agent} ने बातचीत फिर से खोली"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "यहाँ अभी कुछ नहीं है। जब कोई विज़िटर लिखेगा, तो बातचीत इस पेज पर दिखाई देगी।"
|
|
46
46
|
visitor: "विज़िटर"
|
|
47
47
|
last_message: "आख़िरी संदेश"
|
|
@@ -41,7 +41,7 @@ hr:
|
|
|
41
41
|
resolved: "%{agent} je riješio/la razgovor"
|
|
42
42
|
reopened: "%{agent} je ponovno otvorio/la razgovor"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Ovdje još nema ničega. Kad posjetitelj napiše poruku, razgovor se pojavljuje na ovoj stranici."
|
|
46
46
|
visitor: "Posjetitelj"
|
|
47
47
|
last_message: "Zadnja poruka"
|
|
@@ -41,7 +41,7 @@ id:
|
|
|
41
41
|
resolved: "%{agent} menyelesaikan percakapan"
|
|
42
42
|
reopened: "%{agent} membuka kembali percakapan"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Belum ada apa-apa di sini. Saat pengunjung menulis, percakapan akan muncul di halaman ini."
|
|
46
46
|
visitor: "Pengunjung"
|
|
47
47
|
last_message: "Pesan terakhir"
|
|
@@ -41,7 +41,7 @@ it:
|
|
|
41
41
|
resolved: "%{agent} ha risolto la conversazione"
|
|
42
42
|
reopened: "%{agent} ha riaperto la conversazione"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Ancora niente qui. Quando un visitatore scrive, la conversazione compare in questa pagina."
|
|
46
46
|
visitor: "Visitatore"
|
|
47
47
|
last_message: "Ultimo messaggio"
|
|
@@ -41,7 +41,7 @@ lb:
|
|
|
41
41
|
resolved: "%{agent} huet d'Gespréich geléist"
|
|
42
42
|
reopened: "%{agent} huet d'Gespréich nees opgemaach"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Hei ass nach näischt. Wann e Besucher schreift, erschéngt d'Gespréich op dëser Säit."
|
|
46
46
|
visitor: "Besucher"
|
|
47
47
|
last_message: "Lescht Noriicht"
|
|
@@ -41,7 +41,7 @@ nl:
|
|
|
41
41
|
resolved: "%{agent} heeft het gesprek opgelost"
|
|
42
42
|
reopened: "%{agent} heeft het gesprek heropend"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Nog niets hier. Zodra een bezoeker schrijft, verschijnt het gesprek op deze pagina."
|
|
46
46
|
visitor: "Bezoeker"
|
|
47
47
|
last_message: "Laatste bericht"
|
|
@@ -41,7 +41,7 @@ pl:
|
|
|
41
41
|
resolved: "%{agent} rozwiązał(a) rozmowę"
|
|
42
42
|
reopened: "%{agent} wznowił(a) rozmowę"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Nic tu jeszcze nie ma. Gdy odwiedzający napisze, rozmowa pojawi się na tej stronie."
|
|
46
46
|
visitor: "Odwiedzający"
|
|
47
47
|
last_message: "Ostatnia wiadomość"
|
|
@@ -41,7 +41,7 @@ pt:
|
|
|
41
41
|
resolved: "%{agent} resolveu a conversa"
|
|
42
42
|
reopened: "%{agent} reabriu a conversa"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Nada por aqui ainda. Quando um visitante escrever, a conversa aparecerá nesta página."
|
|
46
46
|
visitor: "Visitante"
|
|
47
47
|
last_message: "Última mensagem"
|
|
@@ -41,7 +41,7 @@ ro:
|
|
|
41
41
|
resolved: "%{agent} a rezolvat conversația"
|
|
42
42
|
reopened: "%{agent} a redeschis conversația"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Nimic aici deocamdată. Când un vizitator scrie, conversația apare pe această pagină."
|
|
46
46
|
visitor: "Vizitator"
|
|
47
47
|
last_message: "Ultimul mesaj"
|
|
@@ -41,7 +41,7 @@ ru:
|
|
|
41
41
|
resolved: "%{agent} завершил(а) диалог"
|
|
42
42
|
reopened: "%{agent} возобновил(а) диалог"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Пока здесь пусто. Когда посетитель напишет, диалог появится на этой странице."
|
|
46
46
|
visitor: "Посетитель"
|
|
47
47
|
last_message: "Последнее сообщение"
|
|
@@ -41,7 +41,7 @@ th:
|
|
|
41
41
|
resolved: "%{agent} แก้ไขการสนทนาแล้ว"
|
|
42
42
|
reopened: "%{agent} เปิดการสนทนาอีกครั้ง"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "ยังไม่มีอะไรที่นี่ เมื่อผู้เยี่ยมชมส่งข้อความ การสนทนาจะปรากฏบนหน้านี้"
|
|
46
46
|
visitor: "ผู้เยี่ยมชม"
|
|
47
47
|
last_message: "ข้อความล่าสุด"
|
|
@@ -41,7 +41,7 @@ tr:
|
|
|
41
41
|
resolved: "%{agent} görüşmeyi çözdü"
|
|
42
42
|
reopened: "%{agent} görüşmeyi yeniden açtı"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Henüz burada bir şey yok. Bir ziyaretçi yazdığında görüşme bu sayfada görünür."
|
|
46
46
|
visitor: "Ziyaretçi"
|
|
47
47
|
last_message: "Son mesaj"
|
|
@@ -41,7 +41,7 @@ uk:
|
|
|
41
41
|
resolved: "%{agent} завершив(ла) розмову"
|
|
42
42
|
reopened: "%{agent} відновив(ла) розмову"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Поки що тут порожньо. Коли відвідувач напише, розмова з'явиться на цій сторінці."
|
|
46
46
|
visitor: "Відвідувач"
|
|
47
47
|
last_message: "Останнє повідомлення"
|
|
@@ -41,7 +41,7 @@ ur:
|
|
|
41
41
|
resolved: "%{agent} نے گفتگو حل کر دی"
|
|
42
42
|
reopened: "%{agent} نے گفتگو دوبارہ کھول دی"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "یہاں ابھی کچھ نہیں ہے۔ جب کوئی وزیٹر لکھے گا تو گفتگو اس صفحے پر نظر آئے گی۔"
|
|
46
46
|
visitor: "وزیٹر"
|
|
47
47
|
last_message: "آخری پیغام"
|
|
@@ -41,7 +41,7 @@ vi:
|
|
|
41
41
|
resolved: "%{agent} đã giải quyết cuộc trò chuyện"
|
|
42
42
|
reopened: "%{agent} đã mở lại cuộc trò chuyện"
|
|
43
43
|
dashboard:
|
|
44
|
-
title: "
|
|
44
|
+
title: "LiveChat"
|
|
45
45
|
empty: "Chưa có gì ở đây. Khi khách truy cập nhắn tin, cuộc trò chuyện sẽ xuất hiện trên trang này."
|
|
46
46
|
visitor: "Khách truy cập"
|
|
47
47
|
last_message: "Tin nhắn cuối"
|
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/dashboard.js
CHANGED
|
@@ -460,8 +460,9 @@
|
|
|
460
460
|
.then(function (response) { return response.ok ? response.json() : null; })
|
|
461
461
|
.then(function (data) {
|
|
462
462
|
if (!data) return;
|
|
463
|
-
|
|
464
|
-
if (
|
|
463
|
+
var messages = data.messages || [];
|
|
464
|
+
if (messages.length) messages.forEach(append);
|
|
465
|
+
setTyping(!!data.typing && !messages.some(function (message) { return message.author === "visitor"; }));
|
|
465
466
|
if (atBottom) thread.scrollTop = thread.scrollHeight;
|
|
466
467
|
})
|
|
467
468
|
.catch(function () { /* transient network error — next tick retries */ });
|
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
|
@@ -890,8 +890,9 @@
|
|
|
890
890
|
if (isOpen) {
|
|
891
891
|
// Only an open panel renders (and thereby "consumes") messages;
|
|
892
892
|
// while closed, the poll feeds the badge and nothing else.
|
|
893
|
-
|
|
894
|
-
|
|
893
|
+
var messages = data.messages || [];
|
|
894
|
+
messages.forEach(appendMessage);
|
|
895
|
+
setTyping(!!data.typing && !messages.some(function (message) { return message.author === "agent"; }));
|
|
895
896
|
if (data.unread > 0) request("POST", "/read");
|
|
896
897
|
setUnread(0);
|
|
897
898
|
syncEmailRow();
|
|
@@ -947,9 +948,10 @@
|
|
|
947
948
|
if (message.author === "system") {
|
|
948
949
|
var line = document.createElement("div");
|
|
949
950
|
line.className = "lvc-system";
|
|
950
|
-
|
|
951
|
+
var text = message.event === "resolved"
|
|
951
952
|
? config.labels.eventResolved
|
|
952
953
|
: config.labels.eventReopened;
|
|
954
|
+
line.textContent = text + " · " + formatMessageTime(message.at);
|
|
953
955
|
listEl.appendChild(line);
|
|
954
956
|
lastAuthorKey = null;
|
|
955
957
|
keepTypingLast();
|
|
@@ -963,9 +965,10 @@
|
|
|
963
965
|
if (authorKey !== lastAuthorKey) {
|
|
964
966
|
var who = document.createElement("div");
|
|
965
967
|
who.className = "lvc-who lvc-who-" + message.author;
|
|
966
|
-
|
|
968
|
+
var name = message.author === "visitor"
|
|
967
969
|
? config.labels.you
|
|
968
970
|
: (message.label || config.labels.team);
|
|
971
|
+
who.textContent = name + " · " + formatMessageTime(message.at);
|
|
969
972
|
listEl.appendChild(who);
|
|
970
973
|
lastAuthorKey = authorKey;
|
|
971
974
|
}
|
|
@@ -1034,6 +1037,15 @@
|
|
|
1034
1037
|
if (listEl) listEl.scrollTop = listEl.scrollHeight;
|
|
1035
1038
|
}
|
|
1036
1039
|
|
|
1040
|
+
function formatMessageTime(value) {
|
|
1041
|
+
if (!value) return "";
|
|
1042
|
+
var date = new Date(value);
|
|
1043
|
+
if (isNaN(date.getTime())) return "";
|
|
1044
|
+
return date.toLocaleString(undefined, {
|
|
1045
|
+
day: "numeric", month: "short", hour: "2-digit", minute: "2-digit"
|
|
1046
|
+
});
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1037
1049
|
function noteTyping() {
|
|
1038
1050
|
if (!hasThread || !inputEl || !inputEl.value.trim()) return;
|
|
1039
1051
|
var now = Date.now();
|
|
@@ -1105,6 +1117,7 @@
|
|
|
1105
1117
|
if (result.ok) {
|
|
1106
1118
|
inputEl.value = "";
|
|
1107
1119
|
autogrow();
|
|
1120
|
+
lastTypingSentAt = 0;
|
|
1108
1121
|
clearFiles();
|
|
1109
1122
|
hasThread = true;
|
|
1110
1123
|
appendMessage(result.data.message);
|
|
@@ -1222,7 +1235,7 @@
|
|
|
1222
1235
|
// min-height:0 lets this flex child actually scroll within the panel
|
|
1223
1236
|
// instead of overflowing it (the classic flexbox scroll gotcha).
|
|
1224
1237
|
"#lvc-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px;" +
|
|
1225
|
-
"background:var(--lvc-
|
|
1238
|
+
"background:var(--lvc-surface);display:flex;flex-direction:column;gap:4px}" +
|
|
1226
1239
|
// Class rules carry the #lvc-root prefix so they outrank the
|
|
1227
1240
|
// id-level `#lvc-root *` reset above.
|
|
1228
1241
|
"#lvc-root .lvc-who{font-size:11px;color:var(--lvc-muted);margin:8px 4px 2px}" +
|
|
@@ -1234,7 +1247,7 @@
|
|
|
1234
1247
|
"border-bottom-right-radius:4px}" +
|
|
1235
1248
|
"#lvc-root[dir=rtl] .lvc-visitor{align-self:flex-start;border-bottom-right-radius:14px;" +
|
|
1236
1249
|
"border-bottom-left-radius:4px}" +
|
|
1237
|
-
"#lvc-root .lvc-agent{align-self:flex-start;background:var(--lvc-
|
|
1250
|
+
"#lvc-root .lvc-agent{align-self:flex-start;background:var(--lvc-bg);border:1px solid var(--lvc-border);" +
|
|
1238
1251
|
"border-bottom-left-radius:4px}" +
|
|
1239
1252
|
"#lvc-root[dir=rtl] .lvc-agent{align-self:flex-end;border-bottom-left-radius:14px;" +
|
|
1240
1253
|
"border-bottom-right-radius:4px}" +
|
|
@@ -1258,8 +1271,9 @@
|
|
|
1258
1271
|
"#lvc-form:focus-within{border-color:var(--lvc-accent)}" +
|
|
1259
1272
|
// appearance:none flattens Safari's default textarea bevel, which would
|
|
1260
1273
|
// otherwise show as a second inset box inside the composer.
|
|
1261
|
-
"#lvc-root #lvc-input{-webkit-appearance:none;appearance:none;border:none;
|
|
1262
|
-
"resize:none;font:inherit;color:var(--lvc-text);
|
|
1274
|
+
"#lvc-root #lvc-input{-webkit-appearance:none!important;appearance:none!important;border:none!important;" +
|
|
1275
|
+
"box-shadow:none!important;background:transparent!important;resize:none;font:inherit;color:var(--lvc-text);" +
|
|
1276
|
+
"padding:4px 4px 0;max-height:120px;outline:none!important}" +
|
|
1263
1277
|
"#lvc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}" +
|
|
1264
1278
|
"#lvc-tools{display:flex;align-items:center;gap:2px}" +
|
|
1265
1279
|
// Tool buttons (attach, and room for more) are quiet — the accent is the
|
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.5
|
|
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
|