@helpway/react 0.17.1 → 0.17.3
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.
- package/dist/index.d.ts +18 -2
- package/dist/index.js +1462 -611
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/themed/styles.css +315 -87
package/dist/index.js
CHANGED
|
@@ -70,6 +70,14 @@ function createWidgetClient(config) {
|
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
+
// ../types/src/enums.ts
|
|
74
|
+
var MemberRole = {
|
|
75
|
+
Owner: "owner",
|
|
76
|
+
Admin: "admin",
|
|
77
|
+
Agent: "agent",
|
|
78
|
+
Member: "member"
|
|
79
|
+
};
|
|
80
|
+
|
|
73
81
|
// ../types/src/visitor.ts
|
|
74
82
|
var ONLINE_WINDOW_MS = 5 * 6e4;
|
|
75
83
|
|
|
@@ -381,11 +389,30 @@ var DOC_NAV_ICON_MAP = Object.fromEntries(
|
|
|
381
389
|
);
|
|
382
390
|
|
|
383
391
|
// ../types/src/upload.ts
|
|
392
|
+
var ALLOWED_MIME_TYPES = /* @__PURE__ */ new Set([
|
|
393
|
+
// Images — the only kind anyone has sent in volume.
|
|
394
|
+
"image/png",
|
|
395
|
+
"image/jpeg",
|
|
396
|
+
"image/gif",
|
|
397
|
+
"image/webp",
|
|
398
|
+
// Documents
|
|
399
|
+
"application/pdf",
|
|
400
|
+
// Text — inert by definition.
|
|
401
|
+
"text/plain",
|
|
402
|
+
"text/csv"
|
|
403
|
+
]);
|
|
384
404
|
var MAX_FILE_SIZE = 10 * 1024 * 1024;
|
|
385
405
|
var MAX_BASE64_LENGTH = Math.ceil(MAX_FILE_SIZE * 1.37);
|
|
406
|
+
function acceptAttribute() {
|
|
407
|
+
return [...ALLOWED_MIME_TYPES].sort().join(",");
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
// ../types/src/member-roles.ts
|
|
411
|
+
var MEMBER_ROLES = [MemberRole.Owner, MemberRole.Admin, MemberRole.Member];
|
|
412
|
+
var ASSIGNABLE_ROLES = [MemberRole.Admin, MemberRole.Member];
|
|
386
413
|
|
|
387
414
|
// ../widget-core/src/version.ts
|
|
388
|
-
var SDK_VERSION = "0.17.
|
|
415
|
+
var SDK_VERSION = "0.17.3".length > 0 ? "0.17.3" : "dev";
|
|
389
416
|
|
|
390
417
|
// ../widget-core/src/ws.ts
|
|
391
418
|
var WebSocketManager = class {
|
|
@@ -397,7 +424,17 @@ var WebSocketManager = class {
|
|
|
397
424
|
reconnectTimer = null;
|
|
398
425
|
pingTimer = null;
|
|
399
426
|
isDestroyed = false;
|
|
427
|
+
/* What the "Reconnecting…" notice needs and `isConnected` cannot say: a
|
|
428
|
+
socket that has never been open is CONNECTING, not reconnecting, and one
|
|
429
|
+
nobody has asked to connect yet is neither (connection-notice.ts). */
|
|
430
|
+
openedOnce = false;
|
|
431
|
+
firstConnectAt = null;
|
|
400
432
|
visibilityHandler = null;
|
|
433
|
+
/* The retry budget is spent and nothing is scheduled. Until this existed the
|
|
434
|
+
manager simply went quiet after its tenth attempt, and the widget kept
|
|
435
|
+
saying "Reconnecting…" about a socket nobody was reconnecting. */
|
|
436
|
+
gaveUp = false;
|
|
437
|
+
onlineHandler = null;
|
|
401
438
|
constructor(config) {
|
|
402
439
|
this.config = config;
|
|
403
440
|
this.setupVisibilityListener();
|
|
@@ -414,6 +451,15 @@ var WebSocketManager = class {
|
|
|
414
451
|
};
|
|
415
452
|
document.addEventListener("visibilitychange", this.visibilityHandler);
|
|
416
453
|
}
|
|
454
|
+
/* The browser saying the network is back is the best moment to try again,
|
|
455
|
+
and after giving up it is the only automatic one. */
|
|
456
|
+
setupOnlineListener() {
|
|
457
|
+
if (typeof window === "undefined" || this.onlineHandler) return;
|
|
458
|
+
this.onlineHandler = () => {
|
|
459
|
+
if (!this.isDestroyed && !this.isConnected) this.retryNow();
|
|
460
|
+
};
|
|
461
|
+
window.addEventListener("online", this.onlineHandler);
|
|
462
|
+
}
|
|
417
463
|
/** Update connection parameters (call before connect) */
|
|
418
464
|
configure(params) {
|
|
419
465
|
Object.assign(this.config, params);
|
|
@@ -422,6 +468,8 @@ var WebSocketManager = class {
|
|
|
422
468
|
connect() {
|
|
423
469
|
if (this.ws?.readyState === WebSocket.OPEN) return;
|
|
424
470
|
this.isDestroyed = false;
|
|
471
|
+
if (this.firstConnectAt === null) this.firstConnectAt = Date.now();
|
|
472
|
+
this.setupOnlineListener();
|
|
425
473
|
const protocol = this.config.apiUrl.startsWith("https") ? "wss" : "ws";
|
|
426
474
|
const base = this.config.apiUrl.replace(/^https?/, protocol);
|
|
427
475
|
const params = new URLSearchParams({
|
|
@@ -435,6 +483,8 @@ var WebSocketManager = class {
|
|
|
435
483
|
const ws = new WebSocket(`${base}/ws?${params}`);
|
|
436
484
|
ws.onopen = () => {
|
|
437
485
|
this.reconnectAttempts = 0;
|
|
486
|
+
this.openedOnce = true;
|
|
487
|
+
this.gaveUp = false;
|
|
438
488
|
if (typeof document === "undefined" || document.visibilityState === "visible") {
|
|
439
489
|
this.startPing();
|
|
440
490
|
}
|
|
@@ -474,6 +524,10 @@ var WebSocketManager = class {
|
|
|
474
524
|
document.removeEventListener("visibilitychange", this.visibilityHandler);
|
|
475
525
|
this.visibilityHandler = null;
|
|
476
526
|
}
|
|
527
|
+
if (this.onlineHandler && typeof window !== "undefined") {
|
|
528
|
+
window.removeEventListener("online", this.onlineHandler);
|
|
529
|
+
this.onlineHandler = null;
|
|
530
|
+
}
|
|
477
531
|
if (this.ws) {
|
|
478
532
|
this.ws.close(1e3, "Client disconnect");
|
|
479
533
|
this.ws = null;
|
|
@@ -500,9 +554,39 @@ var WebSocketManager = class {
|
|
|
500
554
|
get isConnected() {
|
|
501
555
|
return this.ws?.readyState === WebSocket.OPEN;
|
|
502
556
|
}
|
|
557
|
+
/** True once the socket has been open at least once. */
|
|
558
|
+
get hasOpened() {
|
|
559
|
+
return this.openedOnce;
|
|
560
|
+
}
|
|
561
|
+
/** When `connect()` was first called (ms epoch); null before that. */
|
|
562
|
+
get connectStartedAt() {
|
|
563
|
+
return this.firstConnectAt;
|
|
564
|
+
}
|
|
565
|
+
/** True once every automatic retry has failed and none is scheduled. */
|
|
566
|
+
get hasGivenUp() {
|
|
567
|
+
return this.gaveUp;
|
|
568
|
+
}
|
|
569
|
+
/**
|
|
570
|
+
* Start over with a full retry budget: the visitor pressed "Retry", or the
|
|
571
|
+
* browser came back online. Safe to call at any time; a no-op while
|
|
572
|
+
* connected or after `disconnect()`.
|
|
573
|
+
*/
|
|
574
|
+
retryNow() {
|
|
575
|
+
if (this.isDestroyed || this.isConnected) return;
|
|
576
|
+
if (this.reconnectTimer) {
|
|
577
|
+
clearTimeout(this.reconnectTimer);
|
|
578
|
+
this.reconnectTimer = null;
|
|
579
|
+
}
|
|
580
|
+
this.reconnectAttempts = 0;
|
|
581
|
+
this.gaveUp = false;
|
|
582
|
+
this.connect();
|
|
583
|
+
}
|
|
503
584
|
// ── Private ──────────────────────────────────────────
|
|
504
585
|
scheduleReconnect() {
|
|
505
|
-
if (this.reconnectAttempts >= this.maxReconnectAttempts)
|
|
586
|
+
if (this.reconnectAttempts >= this.maxReconnectAttempts) {
|
|
587
|
+
this.gaveUp = true;
|
|
588
|
+
return;
|
|
589
|
+
}
|
|
506
590
|
const delay = Math.min(1e3 * 2 ** this.reconnectAttempts, 3e4);
|
|
507
591
|
this.reconnectAttempts++;
|
|
508
592
|
this.reconnectTimer = setTimeout(() => {
|
|
@@ -523,6 +607,100 @@ var WebSocketManager = class {
|
|
|
523
607
|
}
|
|
524
608
|
};
|
|
525
609
|
|
|
610
|
+
// ../widget-core/src/dock-ink.ts
|
|
611
|
+
var WHITE = [255, 255, 255];
|
|
612
|
+
var NEAR_BLACK = [5, 5, 7];
|
|
613
|
+
var BLACK = [0, 0, 0];
|
|
614
|
+
var clamp = (n) => Math.min(255, Math.max(0, Math.round(n)));
|
|
615
|
+
function fromHsl(h, s, l) {
|
|
616
|
+
const a = s * Math.min(l, 1 - l);
|
|
617
|
+
const f = (n) => {
|
|
618
|
+
const k = (n + h / 30) % 12;
|
|
619
|
+
return clamp(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
|
|
620
|
+
};
|
|
621
|
+
return [f(0), f(8), f(4)];
|
|
622
|
+
}
|
|
623
|
+
function parseColor(input) {
|
|
624
|
+
if (!input) return null;
|
|
625
|
+
const v = input.trim().toLowerCase();
|
|
626
|
+
if (v.startsWith("#")) {
|
|
627
|
+
const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])[0-9a-f]?$/.exec(v);
|
|
628
|
+
const long = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})(?:[0-9a-f]{2})?$/.exec(v);
|
|
629
|
+
const [, r, g, b] = short ?? long ?? [];
|
|
630
|
+
if (r === void 0 || g === void 0 || b === void 0) return null;
|
|
631
|
+
const channel = (digits) => Number.parseInt(short ? digits + digits : digits, 16);
|
|
632
|
+
return [channel(r), channel(g), channel(b)];
|
|
633
|
+
}
|
|
634
|
+
const [, kind, body] = /^(rgb|hsl)a?\(([^)]+)\)$/.exec(v) ?? [];
|
|
635
|
+
if (kind === void 0 || body === void 0) return null;
|
|
636
|
+
const [p0, p1, p2] = body.split(/[\s,/]+/).filter(Boolean);
|
|
637
|
+
if (p0 === void 0 || p1 === void 0 || p2 === void 0) return null;
|
|
638
|
+
const n0 = Number.parseFloat(p0);
|
|
639
|
+
const n1 = Number.parseFloat(p1);
|
|
640
|
+
const n2 = Number.parseFloat(p2);
|
|
641
|
+
if (Number.isNaN(n0) || Number.isNaN(n1) || Number.isNaN(n2)) return null;
|
|
642
|
+
if (kind === "rgb") {
|
|
643
|
+
const channel = (part, n) => clamp(part.endsWith("%") ? n * 2.55 : n);
|
|
644
|
+
return [channel(p0, n0), channel(p1, n1), channel(p2, n2)];
|
|
645
|
+
}
|
|
646
|
+
return fromHsl((n0 % 360 + 360) % 360, n1 / 100, n2 / 100);
|
|
647
|
+
}
|
|
648
|
+
function luminance([r, g, b]) {
|
|
649
|
+
const f = (c) => {
|
|
650
|
+
const s = c / 255;
|
|
651
|
+
return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
|
|
652
|
+
};
|
|
653
|
+
return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
|
|
654
|
+
}
|
|
655
|
+
function contrast(a, b) {
|
|
656
|
+
const la = luminance(a);
|
|
657
|
+
const lb = luminance(b);
|
|
658
|
+
return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
|
|
659
|
+
}
|
|
660
|
+
function mix(a, b, amount) {
|
|
661
|
+
const channel = (x, y) => clamp(x * amount + y * (1 - amount));
|
|
662
|
+
return [channel(a[0], b[0]), channel(a[1], b[1]), channel(a[2], b[2])];
|
|
663
|
+
}
|
|
664
|
+
var toHex = (c) => `#${c.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
|
|
665
|
+
function quiet(ink, tint, from, floor) {
|
|
666
|
+
for (let amount = from; amount < 1; amount += 0.02) {
|
|
667
|
+
const c = mix(ink, tint, amount);
|
|
668
|
+
if (contrast(c, tint) >= floor) return c;
|
|
669
|
+
}
|
|
670
|
+
return ink;
|
|
671
|
+
}
|
|
672
|
+
function dockInk(primaryColor) {
|
|
673
|
+
const tint = parseColor(primaryColor);
|
|
674
|
+
if (!tint) return null;
|
|
675
|
+
const onLight = contrast(WHITE, tint);
|
|
676
|
+
const useLight = onLight >= 4.5 || onLight >= contrast(NEAR_BLACK, tint);
|
|
677
|
+
const ink = useLight ? WHITE : NEAR_BLACK;
|
|
678
|
+
const shade = useLight ? BLACK : WHITE;
|
|
679
|
+
return {
|
|
680
|
+
tint: toHex(tint),
|
|
681
|
+
ink: toHex(ink),
|
|
682
|
+
shade: toHex(shade),
|
|
683
|
+
wash: toHex(contrast(ink, tint) >= 7 ? ink : shade),
|
|
684
|
+
ink2: toHex(quiet(ink, tint, 0.8, 4.5)),
|
|
685
|
+
ink3: toHex(quiet(ink, tint, 0.68, 4.5)),
|
|
686
|
+
ink4: toHex(quiet(ink, tint, 0.5, 3))
|
|
687
|
+
};
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
// ../widget-core/src/connection-notice.ts
|
|
691
|
+
var RECONNECT_GRACE_MS = 2e3;
|
|
692
|
+
var FIRST_CONNECT_GRACE_MS = 8e3;
|
|
693
|
+
function connectionNotice(s) {
|
|
694
|
+
if (s.connected) return "none";
|
|
695
|
+
if (s.gaveUp) return "lost";
|
|
696
|
+
return showReconnecting(s) ? "reconnecting" : "none";
|
|
697
|
+
}
|
|
698
|
+
function showReconnecting(s) {
|
|
699
|
+
if (s.connected || s.startedAt === null) return false;
|
|
700
|
+
if (!s.hasOpened) return s.now - s.startedAt >= FIRST_CONNECT_GRACE_MS;
|
|
701
|
+
return s.downSince !== null && s.now - s.downSince >= RECONNECT_GRACE_MS;
|
|
702
|
+
}
|
|
703
|
+
|
|
526
704
|
// ../widget-core/src/store.ts
|
|
527
705
|
import { createStore } from "zustand/vanilla";
|
|
528
706
|
|
|
@@ -555,10 +733,12 @@ var en = {
|
|
|
555
733
|
// Composer
|
|
556
734
|
"widget.placeholder": "Send a message...",
|
|
557
735
|
"widget.placeholder_new": "How can we help?",
|
|
736
|
+
"widget.placeholder_resolved": "Reply to reopen this conversation\u2026",
|
|
558
737
|
"widget.drop_files": "Drop files here",
|
|
559
738
|
// CSAT
|
|
560
739
|
"widget.csat_label": "How was your experience?",
|
|
561
740
|
"widget.csat_thanks": "Thanks for your feedback!",
|
|
741
|
+
"widget.csat_error": "Couldn't save your rating. Please try again.",
|
|
562
742
|
// Inline email collection (after AI reply)
|
|
563
743
|
"widget.email_title": "Don't miss our reply",
|
|
564
744
|
"widget.email_subtitle": "We'll email you when we respond",
|
|
@@ -571,6 +751,7 @@ var en = {
|
|
|
571
751
|
"widget.error_desc": "Failed to load. Please try again.",
|
|
572
752
|
"widget.retry": "Retry",
|
|
573
753
|
"widget.reconnecting": "Reconnecting...",
|
|
754
|
+
"widget.connection_lost": "Connection lost",
|
|
574
755
|
"widget.send_error": "Message not sent",
|
|
575
756
|
// Date separators (today is implicit — never rendered)
|
|
576
757
|
"widget.yesterday": "Yesterday",
|
|
@@ -592,6 +773,13 @@ var en = {
|
|
|
592
773
|
// Copy
|
|
593
774
|
"widget.copy": "Copy message",
|
|
594
775
|
"widget.copied": "Copied",
|
|
776
|
+
/* The code-block button is its own three strings, not a reuse of the pair
|
|
777
|
+
above: that one copies a whole message and reads "Copy message", this one
|
|
778
|
+
sits inside a fenced block where the label has to stay one short word
|
|
779
|
+
(helpway#88). */
|
|
780
|
+
"widget.code_copy": "Copy",
|
|
781
|
+
"widget.code_copy_aria": "Copy code",
|
|
782
|
+
"widget.code_copy_failed": "Failed",
|
|
595
783
|
// File upload
|
|
596
784
|
"widget.file_too_large": "File too large (max 10 MB)",
|
|
597
785
|
"widget.click_to_open": "Click to open",
|
|
@@ -1065,12 +1253,12 @@ function createWidgetStore() {
|
|
|
1065
1253
|
const existingItems = nextMessages.get(newId) ?? [];
|
|
1066
1254
|
const tempRewritten = tempItems.map((m) => ({ ...m, conversationId: newId }));
|
|
1067
1255
|
const isAgentMsg = (m) => !!m.aiAgentId && !m.visitorId && !m.userId;
|
|
1068
|
-
const
|
|
1256
|
+
const seen2 = /* @__PURE__ */ new Set();
|
|
1069
1257
|
const merged = [];
|
|
1070
1258
|
let keptAgentWelcome = false;
|
|
1071
1259
|
for (const m of tempRewritten) {
|
|
1072
|
-
if (
|
|
1073
|
-
|
|
1260
|
+
if (seen2.has(m.id)) continue;
|
|
1261
|
+
seen2.add(m.id);
|
|
1074
1262
|
merged.push(m);
|
|
1075
1263
|
if (isAgentMsg(m) && merged.length === 1) keptAgentWelcome = true;
|
|
1076
1264
|
}
|
|
@@ -1084,7 +1272,7 @@ function createWidgetStore() {
|
|
|
1084
1272
|
});
|
|
1085
1273
|
let graftedWelcome = false;
|
|
1086
1274
|
for (const m of existingItems) {
|
|
1087
|
-
if (
|
|
1275
|
+
if (seen2.has(m.id)) continue;
|
|
1088
1276
|
if (isVisitorMsg(m) && typeof m.text === "string" && pendingVisitor.has(m.text)) {
|
|
1089
1277
|
const idx = pendingVisitor.get(m.text);
|
|
1090
1278
|
pendingVisitor.delete(m.text);
|
|
@@ -1093,7 +1281,7 @@ function createWidgetStore() {
|
|
|
1093
1281
|
...m,
|
|
1094
1282
|
_stableKey: optimistic ? optimistic._stableKey ?? optimistic.id : m.id
|
|
1095
1283
|
};
|
|
1096
|
-
|
|
1284
|
+
seen2.add(m.id);
|
|
1097
1285
|
continue;
|
|
1098
1286
|
}
|
|
1099
1287
|
const isWelcomeEcho = isAgentMsg(m) && keptAgentWelcome && !graftedWelcome && (!serverVisitorTs || m.createdAt <= serverVisitorTs);
|
|
@@ -1103,11 +1291,11 @@ function createWidgetStore() {
|
|
|
1103
1291
|
...m,
|
|
1104
1292
|
_stableKey: seed ? seed._stableKey ?? seed.id : m.id
|
|
1105
1293
|
};
|
|
1106
|
-
|
|
1294
|
+
seen2.add(m.id);
|
|
1107
1295
|
graftedWelcome = true;
|
|
1108
1296
|
continue;
|
|
1109
1297
|
}
|
|
1110
|
-
|
|
1298
|
+
seen2.add(m.id);
|
|
1111
1299
|
merged.push(m);
|
|
1112
1300
|
}
|
|
1113
1301
|
nextMessages.delete(oldId);
|
|
@@ -1541,6 +1729,21 @@ function applyTheme(host, theme) {
|
|
|
1541
1729
|
host.style.removeProperty("--hw-window-left");
|
|
1542
1730
|
}
|
|
1543
1731
|
if (theme.placement) host.dataset.hwPlacement = theme.placement;
|
|
1732
|
+
if (theme.dockSurface === "brand") {
|
|
1733
|
+
host.dataset.hwDockSurface = "brand";
|
|
1734
|
+
const ink = dockInk(theme.primaryColor);
|
|
1735
|
+
if (ink) {
|
|
1736
|
+
setVar(host, "--hw-dock-tint", ink.tint);
|
|
1737
|
+
setVar(host, "--hw-dock-ink", ink.ink);
|
|
1738
|
+
setVar(host, "--hw-dock-shade", ink.shade);
|
|
1739
|
+
setVar(host, "--hw-dock-wash", ink.wash);
|
|
1740
|
+
setVar(host, "--hw-dock-ink-2", ink.ink2);
|
|
1741
|
+
setVar(host, "--hw-dock-ink-3", ink.ink3);
|
|
1742
|
+
setVar(host, "--hw-dock-ink-4", ink.ink4);
|
|
1743
|
+
}
|
|
1744
|
+
} else if (theme.dockSurface === "glass") {
|
|
1745
|
+
delete host.dataset.hwDockSurface;
|
|
1746
|
+
}
|
|
1544
1747
|
if (theme.colorScheme === "light" || theme.colorScheme === "dark") {
|
|
1545
1748
|
host.dataset.theme = theme.colorScheme;
|
|
1546
1749
|
} else if (theme.colorScheme === "system") {
|
|
@@ -1664,6 +1867,43 @@ import {
|
|
|
1664
1867
|
useState
|
|
1665
1868
|
} from "react";
|
|
1666
1869
|
import { useStore } from "zustand";
|
|
1870
|
+
|
|
1871
|
+
// src/map-conversation.ts
|
|
1872
|
+
function mapConversation(c) {
|
|
1873
|
+
return {
|
|
1874
|
+
id: c.id,
|
|
1875
|
+
title: c.title,
|
|
1876
|
+
status: c.status,
|
|
1877
|
+
lastMessageText: c.lastMessageText,
|
|
1878
|
+
lastMessageAt: c.lastMessageAt,
|
|
1879
|
+
lastMessageSenderType: c.lastMessageSenderType,
|
|
1880
|
+
lastMessageSenderName: c.lastMessageSenderName,
|
|
1881
|
+
lastMessageSenderImage: c.lastMessageSenderImage,
|
|
1882
|
+
/* The server's count, not a zero.
|
|
1883
|
+
|
|
1884
|
+
This was the literal `0`, which meant `useUnread()` answered 0 on every
|
|
1885
|
+
page load however many replies were waiting — the value described
|
|
1886
|
+
"messages that arrived while this tab has been open", not "unread". A
|
|
1887
|
+
badge shipped against the hook downstream never rendered once, with an
|
|
1888
|
+
unanswered agent message on screen.
|
|
1889
|
+
|
|
1890
|
+
Still defaulted, because a widget on an older API build gets a payload
|
|
1891
|
+
without the field, and 0 is the honest answer there — the socket path
|
|
1892
|
+
raises it from there as messages land. */
|
|
1893
|
+
unreadCount: c.unreadCount ?? 0,
|
|
1894
|
+
/* `?? null`, not left undefined: the store type says `string | null`, and
|
|
1895
|
+
undefined would satisfy it structurally while meaning something else to
|
|
1896
|
+
every reader downstream. */
|
|
1897
|
+
assigneeName: c.assigneeName ?? null,
|
|
1898
|
+
assigneeImage: c.assigneeImage ?? null,
|
|
1899
|
+
/* The visitor's own answer. Without it the resolved block asked "How was
|
|
1900
|
+
your experience?" again on every page load, to someone who had already
|
|
1901
|
+
said, and the server then refused the second answer. */
|
|
1902
|
+
csatRating: c.csatRating ?? null
|
|
1903
|
+
};
|
|
1904
|
+
}
|
|
1905
|
+
|
|
1906
|
+
// src/provider.tsx
|
|
1667
1907
|
import { jsx } from "react/jsx-runtime";
|
|
1668
1908
|
var WidgetContext = createContext(null);
|
|
1669
1909
|
function useWidgetContext() {
|
|
@@ -1703,6 +1943,7 @@ function SupportProvider({
|
|
|
1703
1943
|
const initRef = useRef(null);
|
|
1704
1944
|
const [hasBootstrapError, setHasBootstrapError] = useState(false);
|
|
1705
1945
|
const [wsDisconnected, setWsDisconnected] = useState(false);
|
|
1946
|
+
const [wsLost, setWsLost] = useState(false);
|
|
1706
1947
|
const [bootstrapAttempt, setBootstrapAttempt] = useState(0);
|
|
1707
1948
|
const sourceLocaleRef = useRef(locale);
|
|
1708
1949
|
const getSourceLocale = useCallback(() => sourceLocaleRef.current, []);
|
|
@@ -1766,28 +2007,6 @@ function SupportProvider({
|
|
|
1766
2007
|
}
|
|
1767
2008
|
const convData = await client.widget.listConversations.query();
|
|
1768
2009
|
if (cancelled) return;
|
|
1769
|
-
const mapConversation = (c) => ({
|
|
1770
|
-
id: c.id,
|
|
1771
|
-
title: c.title,
|
|
1772
|
-
status: c.status,
|
|
1773
|
-
lastMessageText: c.lastMessageText,
|
|
1774
|
-
lastMessageAt: c.lastMessageAt,
|
|
1775
|
-
lastMessageSenderType: c.lastMessageSenderType,
|
|
1776
|
-
lastMessageSenderName: c.lastMessageSenderName,
|
|
1777
|
-
lastMessageSenderImage: c.lastMessageSenderImage,
|
|
1778
|
-
/* The server's count, not a zero.
|
|
1779
|
-
|
|
1780
|
-
This was the literal `0`, which meant `useUnread()` answered 0 on
|
|
1781
|
-
every page load however many replies were waiting — the value
|
|
1782
|
-
described "messages that arrived while this tab has been open",
|
|
1783
|
-
not "unread". A badge shipped against the hook downstream never
|
|
1784
|
-
rendered once, with an unanswered agent message on screen.
|
|
1785
|
-
|
|
1786
|
-
Still defaulted, because a widget on an older API build gets a
|
|
1787
|
-
payload without the field, and 0 is the honest answer there — the
|
|
1788
|
-
socket path raises it from there as messages land. */
|
|
1789
|
-
unreadCount: c.unreadCount ?? 0
|
|
1790
|
-
});
|
|
1791
2010
|
store.getState().setConversations(convData.conversations.map(mapConversation));
|
|
1792
2011
|
if (data.website?.id && data.visitor?.id) {
|
|
1793
2012
|
ws.configure({ websiteId: data.website.id, visitorId: data.visitor.id });
|
|
@@ -1922,16 +2141,21 @@ function SupportProvider({
|
|
|
1922
2141
|
if (isViewing) scheduleMarkSeen(event.conversationId);
|
|
1923
2142
|
}
|
|
1924
2143
|
});
|
|
1925
|
-
const DOWN_GRACE_MS = 2e3;
|
|
1926
2144
|
let downSince = null;
|
|
1927
2145
|
const wsCheck = setInterval(() => {
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
2146
|
+
const connected = ws.isConnected;
|
|
2147
|
+
if (connected) downSince = null;
|
|
2148
|
+
else if (downSince === null) downSince = Date.now();
|
|
2149
|
+
const notice = connectionNotice({
|
|
2150
|
+
connected,
|
|
2151
|
+
hasOpened: ws.hasOpened ?? false,
|
|
2152
|
+
startedAt: ws.connectStartedAt ?? null,
|
|
2153
|
+
downSince,
|
|
2154
|
+
now: Date.now(),
|
|
2155
|
+
gaveUp: ws.hasGivenUp ?? false
|
|
2156
|
+
});
|
|
2157
|
+
setWsDisconnected(notice === "reconnecting");
|
|
2158
|
+
setWsLost(notice === "lost");
|
|
1935
2159
|
}, 1e3);
|
|
1936
2160
|
return () => {
|
|
1937
2161
|
cancelled = true;
|
|
@@ -2022,6 +2246,14 @@ function SupportProvider({
|
|
|
2022
2246
|
emitter,
|
|
2023
2247
|
hasBootstrapError,
|
|
2024
2248
|
wsDisconnected,
|
|
2249
|
+
wsLost,
|
|
2250
|
+
/* Answer the press on screen at once: the strip goes back to
|
|
2251
|
+
"Reconnecting…" now, not at the next one-second sample. */
|
|
2252
|
+
retryConnection: () => {
|
|
2253
|
+
ws.retryNow?.();
|
|
2254
|
+
setWsLost(false);
|
|
2255
|
+
setWsDisconnected(true);
|
|
2256
|
+
},
|
|
2025
2257
|
retryBootstrap,
|
|
2026
2258
|
getSourceLocale
|
|
2027
2259
|
};
|
|
@@ -2123,7 +2355,7 @@ function inferApiUrl() {
|
|
|
2123
2355
|
}
|
|
2124
2356
|
|
|
2125
2357
|
// src/themed/default-widget.tsx
|
|
2126
|
-
import { createContext as createContext2, useCallback as useCallback14, useContext as useContext2, useEffect as
|
|
2358
|
+
import { createContext as createContext2, useCallback as useCallback14, useContext as useContext2, useEffect as useEffect17, useRef as useRef18, useState as useState18 } from "react";
|
|
2127
2359
|
|
|
2128
2360
|
// src/hooks/use-announcements.ts
|
|
2129
2361
|
import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
|
|
@@ -2148,22 +2380,22 @@ function getSeenSlugs(websiteId, visitorId) {
|
|
|
2148
2380
|
}
|
|
2149
2381
|
function addSeenSlug(websiteId, visitorId, slug) {
|
|
2150
2382
|
try {
|
|
2151
|
-
const
|
|
2152
|
-
|
|
2153
|
-
localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...
|
|
2383
|
+
const seen2 = getSeenSlugs(websiteId, visitorId);
|
|
2384
|
+
seen2.add(slug);
|
|
2385
|
+
localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...seen2]));
|
|
2154
2386
|
} catch {
|
|
2155
2387
|
}
|
|
2156
2388
|
}
|
|
2157
2389
|
function addSeenSlugs(websiteId, visitorId, slugs) {
|
|
2158
2390
|
try {
|
|
2159
|
-
const
|
|
2160
|
-
for (const s of slugs)
|
|
2161
|
-
localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...
|
|
2391
|
+
const seen2 = getSeenSlugs(websiteId, visitorId);
|
|
2392
|
+
for (const s of slugs) seen2.add(s);
|
|
2393
|
+
localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...seen2]));
|
|
2162
2394
|
} catch {
|
|
2163
2395
|
}
|
|
2164
2396
|
}
|
|
2165
|
-
function filterUnseen(entries,
|
|
2166
|
-
return entries.filter((e) => !
|
|
2397
|
+
function filterUnseen(entries, seen2) {
|
|
2398
|
+
return entries.filter((e) => !seen2.has(e.slug));
|
|
2167
2399
|
}
|
|
2168
2400
|
var EMPTY_TABS = [];
|
|
2169
2401
|
function useAnnouncements() {
|
|
@@ -2189,8 +2421,8 @@ function useAnnouncements() {
|
|
|
2189
2421
|
function onTabDone(entries, tab) {
|
|
2190
2422
|
allSlugs.push(...entries.map((e) => e.slug));
|
|
2191
2423
|
if (!(isFirstVisit && !isAnonymous) && entries.length > 0) {
|
|
2192
|
-
const
|
|
2193
|
-
const unseen = filterUnseen(entries,
|
|
2424
|
+
const seen2 = getSeenSlugs(websiteId, visitorId);
|
|
2425
|
+
const unseen = filterUnseen(entries, seen2);
|
|
2194
2426
|
totalUnseen += unseen.length;
|
|
2195
2427
|
const newest = unseen[0];
|
|
2196
2428
|
if (newest && !store.getState().isOpen) {
|
|
@@ -2236,13 +2468,13 @@ function useAnnouncements() {
|
|
|
2236
2468
|
(slug) => {
|
|
2237
2469
|
if (!websiteId || !visitorId || announcementTabs.length === 0) return;
|
|
2238
2470
|
addSeenSlug(websiteId, visitorId, slug);
|
|
2239
|
-
const
|
|
2471
|
+
const seen2 = getSeenSlugs(websiteId, visitorId);
|
|
2240
2472
|
let total = 0;
|
|
2241
2473
|
for (const tab of announcementTabs) {
|
|
2242
2474
|
const cacheKey = `announcements:${tab.id}:${getLocale()}`;
|
|
2243
2475
|
const cached = store.getState().contentCache.get(cacheKey);
|
|
2244
2476
|
if (cached) {
|
|
2245
|
-
total += filterUnseen(cached.data,
|
|
2477
|
+
total += filterUnseen(cached.data, seen2).length;
|
|
2246
2478
|
}
|
|
2247
2479
|
}
|
|
2248
2480
|
store.getState().setUnseenAnnouncementCount(total);
|
|
@@ -2265,13 +2497,13 @@ function useAnnouncements() {
|
|
|
2265
2497
|
}, [websiteId, visitorId, announcementTabs, store]);
|
|
2266
2498
|
const getUnseenEntries = useCallback2(() => {
|
|
2267
2499
|
if (announcementTabs.length === 0 || !websiteId || !visitorId) return [];
|
|
2268
|
-
const
|
|
2500
|
+
const seen2 = getSeenSlugs(websiteId, visitorId);
|
|
2269
2501
|
const result = [];
|
|
2270
2502
|
for (const tab of announcementTabs) {
|
|
2271
2503
|
const cacheKey = `announcements:${tab.id}:${getLocale()}`;
|
|
2272
2504
|
const cached = store.getState().contentCache.get(cacheKey);
|
|
2273
2505
|
if (cached) {
|
|
2274
|
-
for (const entry of filterUnseen(cached.data,
|
|
2506
|
+
for (const entry of filterUnseen(cached.data, seen2)) {
|
|
2275
2507
|
result.push({ ...entry, tabId: tab.id });
|
|
2276
2508
|
}
|
|
2277
2509
|
}
|
|
@@ -2301,21 +2533,7 @@ function currentPagePayload() {
|
|
|
2301
2533
|
}
|
|
2302
2534
|
var MAX_ATTACHMENTS = 10;
|
|
2303
2535
|
var MAX_FILE_SIZE2 = 10 * 1024 * 1024;
|
|
2304
|
-
var ACCEPTED_TYPES =
|
|
2305
|
-
"image/png",
|
|
2306
|
-
"image/jpeg",
|
|
2307
|
-
"image/gif",
|
|
2308
|
-
"image/webp",
|
|
2309
|
-
"image/svg+xml",
|
|
2310
|
-
"application/pdf",
|
|
2311
|
-
"text/plain",
|
|
2312
|
-
"text/csv",
|
|
2313
|
-
"application/zip",
|
|
2314
|
-
"application/msword",
|
|
2315
|
-
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
2316
|
-
"application/vnd.ms-excel",
|
|
2317
|
-
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
2318
|
-
].join(",");
|
|
2536
|
+
var ACCEPTED_TYPES = acceptAttribute();
|
|
2319
2537
|
function useComposer(boundConversationId) {
|
|
2320
2538
|
const { client, ws, store, getSourceLocale } = useWidgetContext();
|
|
2321
2539
|
const conversationId = boundConversationId;
|
|
@@ -3020,6 +3238,51 @@ function StarIcon({ size = 24, ...props }) {
|
|
|
3020
3238
|
}
|
|
3021
3239
|
);
|
|
3022
3240
|
}
|
|
3241
|
+
function CheckCircleIcon({ size = 24, ...props }) {
|
|
3242
|
+
return /* @__PURE__ */ jsx2(
|
|
3243
|
+
"svg",
|
|
3244
|
+
{
|
|
3245
|
+
width: typeof size === "number" ? `${size}px` : size,
|
|
3246
|
+
height: typeof size === "number" ? `${size}px` : size,
|
|
3247
|
+
viewBox: "0 0 24 24",
|
|
3248
|
+
fill: "none",
|
|
3249
|
+
"aria-hidden": true,
|
|
3250
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
3251
|
+
...props,
|
|
3252
|
+
children: /* @__PURE__ */ jsx2("path", { d: "M15 9.5L10.5 15L8.5 13M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
3253
|
+
}
|
|
3254
|
+
);
|
|
3255
|
+
}
|
|
3256
|
+
function ThumbsUpIcon({ size = 24, ...props }) {
|
|
3257
|
+
return /* @__PURE__ */ jsx2(
|
|
3258
|
+
"svg",
|
|
3259
|
+
{
|
|
3260
|
+
width: typeof size === "number" ? `${size}px` : size,
|
|
3261
|
+
height: typeof size === "number" ? `${size}px` : size,
|
|
3262
|
+
viewBox: "0 0 24 24",
|
|
3263
|
+
fill: "none",
|
|
3264
|
+
"aria-hidden": true,
|
|
3265
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
3266
|
+
...props,
|
|
3267
|
+
children: /* @__PURE__ */ jsx2("path", { d: "M7 11H4C3.44772 11 3 11.4477 3 12V19C3 19.5523 3.44772 20 4 20H7M7 11V20M7 11L11 3H11.6156C12.843 3 13.7808 4.09535 13.5917 5.3081L13.0161 9H18.0631C19.8811 9 21.2813 10.6041 21.0356 12.4053L20.3538 17.4053C20.1511 18.8918 18.8815 20 17.3813 20H7", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
|
|
3268
|
+
}
|
|
3269
|
+
);
|
|
3270
|
+
}
|
|
3271
|
+
function ThumbsDownIcon({ size = 24, ...props }) {
|
|
3272
|
+
return /* @__PURE__ */ jsx2(
|
|
3273
|
+
"svg",
|
|
3274
|
+
{
|
|
3275
|
+
width: typeof size === "number" ? `${size}px` : size,
|
|
3276
|
+
height: typeof size === "number" ? `${size}px` : size,
|
|
3277
|
+
viewBox: "0 0 24 24",
|
|
3278
|
+
fill: "none",
|
|
3279
|
+
"aria-hidden": true,
|
|
3280
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
3281
|
+
...props,
|
|
3282
|
+
children: /* @__PURE__ */ jsx2("path", { d: "M17 13H20C20.5523 13 21 12.5523 21 12L21 5C21 4.44772 20.5523 4 20 4H17M17 13L17 4M17 13L13.301 20.4505C13.1339 20.7871 12.7905 21 12.4147 21V21C11.1917 21 10.2572 19.9046 10.4456 18.6919L11.0192 15L5.98994 15C4.17839 15 2.78316 13.3959 3.02793 11.5947L3.70735 6.59466C3.90933 5.1082 5.17443 4 6.66936 4H17", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
|
|
3283
|
+
}
|
|
3284
|
+
);
|
|
3285
|
+
}
|
|
3023
3286
|
|
|
3024
3287
|
// src/themed/composer.tsx
|
|
3025
3288
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
@@ -3636,6 +3899,31 @@ function AnnouncementPreviewItem({
|
|
|
3636
3899
|
);
|
|
3637
3900
|
}
|
|
3638
3901
|
|
|
3902
|
+
// src/themed/connection-strip.tsx
|
|
3903
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
3904
|
+
function ConnectionStrip({
|
|
3905
|
+
reconnecting,
|
|
3906
|
+
lost,
|
|
3907
|
+
onRetry
|
|
3908
|
+
}) {
|
|
3909
|
+
if (lost) {
|
|
3910
|
+
return (
|
|
3911
|
+
// biome-ignore lint/a11y/useSemanticElements: <output> is a form element and is styled by host pages; a div with the role is announced the same
|
|
3912
|
+
/* @__PURE__ */ jsxs5("div", { className: "hw-disconnect", role: "status", children: [
|
|
3913
|
+
/* @__PURE__ */ jsx6("span", { children: t("widget.connection_lost") }),
|
|
3914
|
+
/* @__PURE__ */ jsx6("button", { type: "button", className: "hw-disconnect-retry", onClick: onRetry, children: t("widget.retry") })
|
|
3915
|
+
] })
|
|
3916
|
+
);
|
|
3917
|
+
}
|
|
3918
|
+
if (reconnecting) {
|
|
3919
|
+
return /* @__PURE__ */ jsxs5("div", { className: "hw-disconnect", children: [
|
|
3920
|
+
/* @__PURE__ */ jsx6("div", { className: "hw-disconnect-spinner" }),
|
|
3921
|
+
t("widget.reconnecting")
|
|
3922
|
+
] });
|
|
3923
|
+
}
|
|
3924
|
+
return null;
|
|
3925
|
+
}
|
|
3926
|
+
|
|
3639
3927
|
// src/themed/content/content-tab-view.tsx
|
|
3640
3928
|
import { useCallback as useCallback13, useEffect as useEffect11 } from "react";
|
|
3641
3929
|
|
|
@@ -3786,7 +4074,21 @@ function useContentTab(tabId) {
|
|
|
3786
4074
|
|
|
3787
4075
|
// src/themed/content/simple-markdown.tsx
|
|
3788
4076
|
import { useEffect as useEffect9, useRef as useRef10 } from "react";
|
|
3789
|
-
import { jsx as
|
|
4077
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
4078
|
+
function esc(value) {
|
|
4079
|
+
return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
4080
|
+
}
|
|
4081
|
+
function safeUrl(raw) {
|
|
4082
|
+
const url = raw.trim();
|
|
4083
|
+
if (url.length === 0) return null;
|
|
4084
|
+
for (let i = 0; i < url.length; i++) {
|
|
4085
|
+
const code = url.charCodeAt(i);
|
|
4086
|
+
if (code <= 32 || code === 127) return null;
|
|
4087
|
+
}
|
|
4088
|
+
const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(url)?.[1]?.toLowerCase();
|
|
4089
|
+
if (scheme === void 0) return url;
|
|
4090
|
+
return scheme === "http" || scheme === "https" || scheme === "mailto" || scheme === "tel" ? url : null;
|
|
4091
|
+
}
|
|
3790
4092
|
var COPY_ICON = `<svg class="hw-code-copy-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M15 9V4.25C15 3.55964 14.4404 3 13.75 3H4.25C3.55964 3 3 3.55964 3 4.25V13.75C3 14.4404 3.55964 15 4.25 15H9M10.25 9H19.75C20.4404 9 21 9.55964 21 10.25V19.75C21 20.4404 20.4404 21 19.75 21H10.25C9.55964 21 9 20.4404 9 19.75V10.25C9 9.55964 9.55964 9 10.25 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
|
|
3791
4093
|
var CHECK_ICON = `<svg class="hw-code-check-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 13L11 16L16 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
|
|
3792
4094
|
function inferCodeLanguage(code, lang) {
|
|
@@ -3811,7 +4113,15 @@ function handleCodeBlockClick(e, root) {
|
|
|
3811
4113
|
() => flashCopied(btn, true)
|
|
3812
4114
|
);
|
|
3813
4115
|
}
|
|
3814
|
-
function renderMarkdown(
|
|
4116
|
+
function renderMarkdown(source, options = {}) {
|
|
4117
|
+
const md = source.replace(/\u0000/g, "");
|
|
4118
|
+
const inlines = [];
|
|
4119
|
+
const putAway = (html2) => {
|
|
4120
|
+
inlines.push(html2);
|
|
4121
|
+
return `\0INLINE${inlines.length - 1}\0`;
|
|
4122
|
+
};
|
|
4123
|
+
const plainAttr = (value) => value.replace(/\u0000[A-Z]*\d*\u0000?/g, "");
|
|
4124
|
+
const link = (url, label) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${label}</a>`;
|
|
3815
4125
|
const codeBlocks = [];
|
|
3816
4126
|
const codeBlockPlaceholder = (i) => `\0CODEBLOCK${i}\0`;
|
|
3817
4127
|
const body = md.replace(
|
|
@@ -3826,7 +4136,7 @@ function renderMarkdown(md) {
|
|
|
3826
4136
|
const className = langLabel !== "code" ? ` class="language-${langLabel}"` : "";
|
|
3827
4137
|
const trimmed = escaped.replace(/\n$/, "");
|
|
3828
4138
|
codeBlocks.push(
|
|
3829
|
-
`<div class="hw-code" data-hw-code="1"><div class="hw-code-header"><span class="hw-code-lang">${langLabel}</span><div class="hw-code-actions"><button type="button" class="hw-code-action hw-code-copy" aria-label="
|
|
4139
|
+
`<div class="hw-code" data-hw-code="1"><div class="hw-code-header"><span class="hw-code-lang">${langLabel}</span><div class="hw-code-actions"><button type="button" class="hw-code-action hw-code-copy" aria-label="${esc(t("widget.code_copy_aria"))}" title="${esc(t("widget.code_copy_aria"))}">${COPY_ICON}${CHECK_ICON}<span class="hw-code-copy-label">${esc(t("widget.code_copy"))}</span></button></div></div><pre><code${className}>${trimmed}</code></pre></div>`
|
|
3830
4140
|
);
|
|
3831
4141
|
return `
|
|
3832
4142
|
|
|
@@ -3835,12 +4145,18 @@ ${codeBlockPlaceholder(codeBlocks.length - 1)}
|
|
|
3835
4145
|
`;
|
|
3836
4146
|
}
|
|
3837
4147
|
);
|
|
3838
|
-
let html = body.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/^---$/gm, "<hr />").replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/`([^`]+)`/g, "<code>$1</code>").replace(/!\[([^\]]*)\]\(([^)]+)\)/g,
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
4148
|
+
let html = body.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/^---$/gm, "<hr />").replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/`([^`]+)`/g, "<code>$1</code>").replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, src) => {
|
|
4149
|
+
const url = safeUrl(src);
|
|
4150
|
+
if (url === null) return alt;
|
|
4151
|
+
return putAway(
|
|
4152
|
+
options.images === "link" ? link(url, alt.length > 0 ? alt : url) : `<img src="${url}" alt="${plainAttr(alt)}" />`
|
|
4153
|
+
);
|
|
4154
|
+
}).replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label, href) => {
|
|
4155
|
+
const url = safeUrl(href);
|
|
4156
|
+
return url === null ? label : putAway(link(url, label));
|
|
4157
|
+
}).replace(
|
|
4158
|
+
/(?<!")(https?:\/\/(?:(?!")[^\s<)\u0000])+)/g,
|
|
4159
|
+
(_match, url) => putAway(link(url, url))
|
|
3844
4160
|
).replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>").replace(/^[*-] (.+)$/gm, "<li>$1</li>").replace(/^\d+\. (.+)$/gm, "<oli>$1</oli>");
|
|
3845
4161
|
const tables = [];
|
|
3846
4162
|
const tablePlaceholder = (i) => `\0TABLE${i}\0`;
|
|
@@ -3850,7 +4166,9 @@ ${codeBlockPlaceholder(codeBlocks.length - 1)}
|
|
|
3850
4166
|
(_match, headerLine, bodyLines) => {
|
|
3851
4167
|
const cells = (line) => line.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim());
|
|
3852
4168
|
const head = cells(headerLine).map((c) => `<th>${c}</th>`).join("");
|
|
3853
|
-
const rows = bodyLines.trim().split("\n").map(
|
|
4169
|
+
const rows = bodyLines.trim().split("\n").map(
|
|
4170
|
+
(line) => `<tr>${cells(line).map((c) => `<td>${c}</td>`).join("")}</tr>`
|
|
4171
|
+
).join("");
|
|
3854
4172
|
tables.push(
|
|
3855
4173
|
`<div class="hw-table-wrap"><table class="hw-table"><thead><tr>${head}</tr></thead><tbody>${rows}</tbody></table></div>`
|
|
3856
4174
|
);
|
|
@@ -3887,11 +4205,16 @@ ${tablePlaceholder(tables.length - 1)}
|
|
|
3887
4205
|
});
|
|
3888
4206
|
html = html.replace(/<p>(\s*<div class="hw-code"[\s\S]*?<\/div>\s*)<\/p>/g, "$1");
|
|
3889
4207
|
}
|
|
4208
|
+
for (let depth = 0; depth < 4 && html.includes("\0INLINE"); depth++) {
|
|
4209
|
+
html = html.replace(/\u0000INLINE(\d+)\u0000/g, (_m, idx) => {
|
|
4210
|
+
return inlines[Number.parseInt(idx, 10)] ?? "";
|
|
4211
|
+
});
|
|
4212
|
+
}
|
|
3890
4213
|
return html;
|
|
3891
4214
|
}
|
|
3892
4215
|
function linkifyText(text) {
|
|
3893
|
-
return text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(
|
|
3894
|
-
/(https?:\/\/[^\s<]+)/g,
|
|
4216
|
+
return text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(
|
|
4217
|
+
/(https?:\/\/(?:(?!")[^\s<])+)/g,
|
|
3895
4218
|
'<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
|
|
3896
4219
|
).replace(/\n/g, "<br />");
|
|
3897
4220
|
}
|
|
@@ -3906,9 +4229,7 @@ function MarkdownContent({
|
|
|
3906
4229
|
const root = rootRef.current;
|
|
3907
4230
|
if (!root) return;
|
|
3908
4231
|
const isWhitespaceOnly = (el) => {
|
|
3909
|
-
const hasNonBrChild = Array.from(el.children).some(
|
|
3910
|
-
(c) => c.tagName !== "BR"
|
|
3911
|
-
);
|
|
4232
|
+
const hasNonBrChild = Array.from(el.children).some((c) => c.tagName !== "BR");
|
|
3912
4233
|
if (hasNonBrChild) return false;
|
|
3913
4234
|
const text = el.textContent ?? "";
|
|
3914
4235
|
return text.replace(/[\s ]/g, "") === "";
|
|
@@ -3933,7 +4254,7 @@ function MarkdownContent({
|
|
|
3933
4254
|
};
|
|
3934
4255
|
}, []);
|
|
3935
4256
|
if (!html) return null;
|
|
3936
|
-
return /* @__PURE__ */
|
|
4257
|
+
return /* @__PURE__ */ jsx7(
|
|
3937
4258
|
"div",
|
|
3938
4259
|
{
|
|
3939
4260
|
ref: rootRef,
|
|
@@ -3945,8 +4266,8 @@ function MarkdownContent({
|
|
|
3945
4266
|
function flashCopied(btn, failed = false) {
|
|
3946
4267
|
const label = btn.querySelector(".hw-code-copy-label");
|
|
3947
4268
|
if (!label) return;
|
|
3948
|
-
const original = label.textContent ?? "
|
|
3949
|
-
label.textContent = failed ? "
|
|
4269
|
+
const original = label.textContent ?? t("widget.code_copy");
|
|
4270
|
+
label.textContent = failed ? t("widget.code_copy_failed") : t("widget.copied");
|
|
3950
4271
|
btn.classList.add(failed ? "hw-code-copy--failed" : "hw-code-copy--copied");
|
|
3951
4272
|
setTimeout(() => {
|
|
3952
4273
|
label.textContent = original;
|
|
@@ -3963,24 +4284,24 @@ function closeDanglingMarkdown(partial) {
|
|
|
3963
4284
|
}
|
|
3964
4285
|
|
|
3965
4286
|
// src/themed/content/content-detail-view.tsx
|
|
3966
|
-
import { Fragment as Fragment2, jsx as
|
|
4287
|
+
import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
3967
4288
|
function ContentDetailView({
|
|
3968
4289
|
entry,
|
|
3969
4290
|
isLoading
|
|
3970
4291
|
}) {
|
|
3971
4292
|
if (isLoading || !entry) {
|
|
3972
|
-
return /* @__PURE__ */
|
|
4293
|
+
return /* @__PURE__ */ jsx8(ArticleSkeleton, {});
|
|
3973
4294
|
}
|
|
3974
4295
|
const badge = entry.customFields.version ?? entry.customFields.priority ?? entry.customFields.type ?? null;
|
|
3975
|
-
return /* @__PURE__ */
|
|
3976
|
-
/* @__PURE__ */
|
|
3977
|
-
/* @__PURE__ */
|
|
3978
|
-
(badge || entry.publishedAt) && /* @__PURE__ */
|
|
3979
|
-
badge && /* @__PURE__ */
|
|
3980
|
-
entry.publishedAt && /* @__PURE__ */
|
|
4296
|
+
return /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail", children: [
|
|
4297
|
+
/* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-header", children: [
|
|
4298
|
+
/* @__PURE__ */ jsx8("h1", { className: "hw-content-detail-title", children: entry.title }),
|
|
4299
|
+
(badge || entry.publishedAt) && /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-meta", children: [
|
|
4300
|
+
badge && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-badge", children: badge }),
|
|
4301
|
+
entry.publishedAt && /* @__PURE__ */ jsx8("span", { className: "hw-content-detail-date", children: formatRelativeTime(entry.publishedAt) })
|
|
3981
4302
|
] })
|
|
3982
4303
|
] }),
|
|
3983
|
-
(entry.body || entry.bodyHtml) && /* @__PURE__ */
|
|
4304
|
+
(entry.body || entry.bodyHtml) && /* @__PURE__ */ jsx8("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx8(MarkdownContent, { bodyHtml: entry.bodyHtml, bodyMarkdown: entry.body }) })
|
|
3984
4305
|
] });
|
|
3985
4306
|
}
|
|
3986
4307
|
function ArticleSkeleton() {
|
|
@@ -4001,15 +4322,15 @@ function ArticleSkeleton() {
|
|
|
4001
4322
|
]
|
|
4002
4323
|
}
|
|
4003
4324
|
];
|
|
4004
|
-
return /* @__PURE__ */
|
|
4005
|
-
/* @__PURE__ */
|
|
4006
|
-
/* @__PURE__ */
|
|
4007
|
-
/* @__PURE__ */
|
|
4008
|
-
/* @__PURE__ */
|
|
4009
|
-
/* @__PURE__ */
|
|
4325
|
+
return /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail", children: [
|
|
4326
|
+
/* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-header", children: [
|
|
4327
|
+
/* @__PURE__ */ jsx8("h1", { className: "hw-content-detail-title", children: /* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-title" }) }),
|
|
4328
|
+
/* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-meta", children: [
|
|
4329
|
+
/* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-badge" }),
|
|
4330
|
+
/* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-date" })
|
|
4010
4331
|
] })
|
|
4011
4332
|
] }),
|
|
4012
|
-
/* @__PURE__ */
|
|
4333
|
+
/* @__PURE__ */ jsx8("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx8("div", { className: "hw-markdown", children: sections.map((s, i) => /* @__PURE__ */ jsx8(
|
|
4013
4334
|
SkeletonSection,
|
|
4014
4335
|
{
|
|
4015
4336
|
headerWidth: s.headerWidth,
|
|
@@ -4023,23 +4344,23 @@ function SkeletonSection({
|
|
|
4023
4344
|
headerWidth,
|
|
4024
4345
|
items
|
|
4025
4346
|
}) {
|
|
4026
|
-
return /* @__PURE__ */
|
|
4027
|
-
/* @__PURE__ */
|
|
4347
|
+
return /* @__PURE__ */ jsxs6(Fragment2, { children: [
|
|
4348
|
+
/* @__PURE__ */ jsx8("h2", { children: /* @__PURE__ */ jsx8(
|
|
4028
4349
|
"span",
|
|
4029
4350
|
{
|
|
4030
4351
|
className: "hw-skeleton hw-skeleton-h2",
|
|
4031
4352
|
style: { display: "block", width: headerWidth }
|
|
4032
4353
|
}
|
|
4033
4354
|
) }),
|
|
4034
|
-
items.map((item, j) => /* @__PURE__ */
|
|
4035
|
-
/* @__PURE__ */
|
|
4355
|
+
items.map((item, j) => /* @__PURE__ */ jsx8("ul", { children: /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsxs6("div", { className: "hw-skeleton-bullet-lines", children: [
|
|
4356
|
+
/* @__PURE__ */ jsx8(
|
|
4036
4357
|
"span",
|
|
4037
4358
|
{
|
|
4038
4359
|
className: "hw-skeleton hw-skeleton-bullet-line",
|
|
4039
4360
|
style: { display: "block", width: item.l1 }
|
|
4040
4361
|
}
|
|
4041
4362
|
),
|
|
4042
|
-
/* @__PURE__ */
|
|
4363
|
+
/* @__PURE__ */ jsx8(
|
|
4043
4364
|
"span",
|
|
4044
4365
|
{
|
|
4045
4366
|
className: "hw-skeleton hw-skeleton-bullet-line",
|
|
@@ -4052,7 +4373,7 @@ function SkeletonSection({
|
|
|
4052
4373
|
|
|
4053
4374
|
// src/themed/content/content-list-view.tsx
|
|
4054
4375
|
import { useCallback as useCallback11, useRef as useRef11, useState as useState11 } from "react";
|
|
4055
|
-
import { jsx as
|
|
4376
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4056
4377
|
function ContentListView({
|
|
4057
4378
|
entries,
|
|
4058
4379
|
isLoading,
|
|
@@ -4076,13 +4397,13 @@ function ContentListView({
|
|
|
4076
4397
|
},
|
|
4077
4398
|
[onSearch]
|
|
4078
4399
|
);
|
|
4079
|
-
return /* @__PURE__ */
|
|
4080
|
-
onSearch && /* @__PURE__ */
|
|
4081
|
-
/* @__PURE__ */
|
|
4082
|
-
/* @__PURE__ */
|
|
4083
|
-
/* @__PURE__ */
|
|
4400
|
+
return /* @__PURE__ */ jsxs7("div", { className: "hw-content-list", children: [
|
|
4401
|
+
onSearch && /* @__PURE__ */ jsx9("div", { className: "hw-content-search", children: /* @__PURE__ */ jsxs7("div", { className: "hw-content-search-box", children: [
|
|
4402
|
+
/* @__PURE__ */ jsxs7("svg", { className: "hw-content-search-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
4403
|
+
/* @__PURE__ */ jsx9("circle", { cx: "11", cy: "11", r: "8" }),
|
|
4404
|
+
/* @__PURE__ */ jsx9("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
|
|
4084
4405
|
] }),
|
|
4085
|
-
/* @__PURE__ */
|
|
4406
|
+
/* @__PURE__ */ jsx9(
|
|
4086
4407
|
"input",
|
|
4087
4408
|
{
|
|
4088
4409
|
type: "text",
|
|
@@ -4093,18 +4414,18 @@ function ContentListView({
|
|
|
4093
4414
|
}
|
|
4094
4415
|
)
|
|
4095
4416
|
] }) }),
|
|
4096
|
-
isLoading && entries.length === 0 && /* @__PURE__ */
|
|
4097
|
-
/* @__PURE__ */
|
|
4098
|
-
/* @__PURE__ */
|
|
4099
|
-
/* @__PURE__ */
|
|
4417
|
+
isLoading && entries.length === 0 && /* @__PURE__ */ jsx9("div", { className: "hw-skeleton-content", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs7("div", { className: "hw-skeleton-content-item", children: [
|
|
4418
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "70%", height: 14 } }),
|
|
4419
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "90%", height: 12 } }),
|
|
4420
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "40%", height: 10 } })
|
|
4100
4421
|
] }, i)) }),
|
|
4101
|
-
!isLoading && entries.length === 0 && /* @__PURE__ */
|
|
4102
|
-
/* @__PURE__ */
|
|
4103
|
-
/* @__PURE__ */
|
|
4422
|
+
!isLoading && entries.length === 0 && /* @__PURE__ */ jsxs7("div", { className: "hw-content-empty", children: [
|
|
4423
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-content-empty-title", children: searchText ? t("widget.no_results") : t("widget.nothing_yet") }),
|
|
4424
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-content-empty-desc", children: searchText ? t("widget.try_different") : t("widget.check_back") })
|
|
4104
4425
|
] }),
|
|
4105
|
-
entries.length > 0 && /* @__PURE__ */
|
|
4106
|
-
entries.map((entry) => /* @__PURE__ */
|
|
4107
|
-
hasMore && /* @__PURE__ */
|
|
4426
|
+
entries.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "hw-content-entries", children: [
|
|
4427
|
+
entries.map((entry) => /* @__PURE__ */ jsx9(ContentEntryCard, { entry, onSelect, display }, entry.slug)),
|
|
4428
|
+
hasMore && /* @__PURE__ */ jsx9(
|
|
4108
4429
|
"button",
|
|
4109
4430
|
{
|
|
4110
4431
|
type: "button",
|
|
@@ -4131,16 +4452,16 @@ function ContentEntryCard({
|
|
|
4131
4452
|
const badge = display?.badgeField ? customFields[display.badgeField] ?? null : customFields.version ?? customFields.priority ?? customFields.type ?? null;
|
|
4132
4453
|
const subtitleValue = display?.subtitleField ? (display.subtitleField === "body" ? entry.body : customFields[display.subtitleField]) ?? null : customFields.excerpt ?? customFields.summary ?? customFields.description ?? null;
|
|
4133
4454
|
const preview = subtitleValue ? truncateText(subtitleValue) : truncateText(entry.body);
|
|
4134
|
-
return /* @__PURE__ */
|
|
4135
|
-
/* @__PURE__ */
|
|
4136
|
-
/* @__PURE__ */
|
|
4137
|
-
preview && /* @__PURE__ */
|
|
4138
|
-
(badge || entry.publishedAt) && /* @__PURE__ */
|
|
4139
|
-
badge && /* @__PURE__ */
|
|
4140
|
-
entry.publishedAt && /* @__PURE__ */
|
|
4455
|
+
return /* @__PURE__ */ jsx9("button", { type: "button", className: "hw-content-entry", onClick: () => onSelect(entry.slug), children: /* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-main", children: [
|
|
4456
|
+
/* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-text", children: [
|
|
4457
|
+
/* @__PURE__ */ jsx9("span", { className: "hw-content-entry-title", children: entry.title }),
|
|
4458
|
+
preview && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-desc", children: preview }),
|
|
4459
|
+
(badge || entry.publishedAt) && /* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-meta", children: [
|
|
4460
|
+
badge && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-badge", children: badge }),
|
|
4461
|
+
entry.publishedAt && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-date", children: formatRelativeTime(entry.publishedAt) })
|
|
4141
4462
|
] })
|
|
4142
4463
|
] }),
|
|
4143
|
-
/* @__PURE__ */
|
|
4464
|
+
/* @__PURE__ */ jsx9("svg", { className: "hw-content-entry-chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("polyline", { points: "9 18 15 12 9 6" }) })
|
|
4144
4465
|
] }) });
|
|
4145
4466
|
}
|
|
4146
4467
|
|
|
@@ -4357,7 +4678,7 @@ function useGroupedContentTab(tabId) {
|
|
|
4357
4678
|
}
|
|
4358
4679
|
|
|
4359
4680
|
// src/themed/content/grouped-content-tab-view.tsx
|
|
4360
|
-
import { jsx as
|
|
4681
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
4361
4682
|
function GroupedContentTabView({
|
|
4362
4683
|
tab,
|
|
4363
4684
|
subView,
|
|
@@ -4398,10 +4719,10 @@ function GroupedContentTabView({
|
|
|
4398
4719
|
prevSubView.current = subView;
|
|
4399
4720
|
}, [subView, clearCategory]);
|
|
4400
4721
|
if (subView === "content-detail" && detailSlug) {
|
|
4401
|
-
return /* @__PURE__ */
|
|
4722
|
+
return /* @__PURE__ */ jsx10(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
|
|
4402
4723
|
}
|
|
4403
4724
|
if (subView === "content-category" && activeCategory) {
|
|
4404
|
-
return /* @__PURE__ */
|
|
4725
|
+
return /* @__PURE__ */ jsx10(
|
|
4405
4726
|
ContentListView,
|
|
4406
4727
|
{
|
|
4407
4728
|
entries: items,
|
|
@@ -4415,7 +4736,7 @@ function GroupedContentTabView({
|
|
|
4415
4736
|
}
|
|
4416
4737
|
);
|
|
4417
4738
|
}
|
|
4418
|
-
return /* @__PURE__ */
|
|
4739
|
+
return /* @__PURE__ */ jsx10(
|
|
4419
4740
|
ContentListView,
|
|
4420
4741
|
{
|
|
4421
4742
|
entries: categories,
|
|
@@ -4437,7 +4758,7 @@ function GroupedContentTabView({
|
|
|
4437
4758
|
}
|
|
4438
4759
|
|
|
4439
4760
|
// src/themed/content/content-tab-view.tsx
|
|
4440
|
-
import { jsx as
|
|
4761
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
4441
4762
|
function ContentTabView({
|
|
4442
4763
|
tab,
|
|
4443
4764
|
showDetail,
|
|
@@ -4447,7 +4768,7 @@ function ContentTabView({
|
|
|
4447
4768
|
onSelectCategory
|
|
4448
4769
|
}) {
|
|
4449
4770
|
if (tab.tabType === "grouped" && tab.itemsModelSlug) {
|
|
4450
|
-
return /* @__PURE__ */
|
|
4771
|
+
return /* @__PURE__ */ jsx11(
|
|
4451
4772
|
GroupedContentTabView,
|
|
4452
4773
|
{
|
|
4453
4774
|
tab,
|
|
@@ -4459,7 +4780,7 @@ function ContentTabView({
|
|
|
4459
4780
|
}
|
|
4460
4781
|
);
|
|
4461
4782
|
}
|
|
4462
|
-
return /* @__PURE__ */
|
|
4783
|
+
return /* @__PURE__ */ jsx11(
|
|
4463
4784
|
FlatContentTabView,
|
|
4464
4785
|
{
|
|
4465
4786
|
tab,
|
|
@@ -4495,9 +4816,9 @@ function FlatContentTabView({
|
|
|
4495
4816
|
[fetchEntries]
|
|
4496
4817
|
);
|
|
4497
4818
|
if (showDetail && detailSlug) {
|
|
4498
|
-
return /* @__PURE__ */
|
|
4819
|
+
return /* @__PURE__ */ jsx11(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
|
|
4499
4820
|
}
|
|
4500
|
-
return /* @__PURE__ */
|
|
4821
|
+
return /* @__PURE__ */ jsx11(
|
|
4501
4822
|
ContentListView,
|
|
4502
4823
|
{
|
|
4503
4824
|
entries,
|
|
@@ -4513,7 +4834,7 @@ function FlatContentTabView({
|
|
|
4513
4834
|
}
|
|
4514
4835
|
|
|
4515
4836
|
// src/themed/content/tab-icon.tsx
|
|
4516
|
-
import { jsx as
|
|
4837
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
4517
4838
|
var ICON_MAP = {
|
|
4518
4839
|
book: BookIcon,
|
|
4519
4840
|
megaphone: MegaphoneIcon,
|
|
@@ -4524,12 +4845,12 @@ var ICON_MAP = {
|
|
|
4524
4845
|
};
|
|
4525
4846
|
function ContentTabIconComponent({ icon }) {
|
|
4526
4847
|
const Icon = ICON_MAP[icon] ?? BookIcon;
|
|
4527
|
-
return /* @__PURE__ */
|
|
4848
|
+
return /* @__PURE__ */ jsx12(Icon, {});
|
|
4528
4849
|
}
|
|
4529
4850
|
|
|
4530
4851
|
// src/themed/debug-overlay.tsx
|
|
4531
4852
|
import { useEffect as useEffect12, useMemo as useMemo2, useRef as useRef14, useState as useState13 } from "react";
|
|
4532
|
-
import { jsx as
|
|
4853
|
+
import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4533
4854
|
var MAX_EVENTS = 60;
|
|
4534
4855
|
function isDebugEnabled() {
|
|
4535
4856
|
if (typeof window === "undefined") return false;
|
|
@@ -4635,10 +4956,10 @@ function WidgetDebugOverlay() {
|
|
|
4635
4956
|
if (!enabled) return null;
|
|
4636
4957
|
const isTyping = activeId ? typingUsers.get(activeId) : false;
|
|
4637
4958
|
const isAi = activeId ? aiProcessingMap.get(activeId) : false;
|
|
4638
|
-
return /* @__PURE__ */
|
|
4639
|
-
/* @__PURE__ */
|
|
4640
|
-
/* @__PURE__ */
|
|
4641
|
-
/* @__PURE__ */
|
|
4959
|
+
return /* @__PURE__ */ jsxs8("div", { style: styles.wrap, children: [
|
|
4960
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.header, children: [
|
|
4961
|
+
/* @__PURE__ */ jsx13("strong", { children: "hw debug" }),
|
|
4962
|
+
/* @__PURE__ */ jsxs8("span", { style: styles.meta, children: [
|
|
4642
4963
|
" ",
|
|
4643
4964
|
"\xB7 conv ",
|
|
4644
4965
|
activeId ? activeId.slice(0, 10) : "\u2014",
|
|
@@ -4649,29 +4970,29 @@ function WidgetDebugOverlay() {
|
|
|
4649
4970
|
" \xB7 ai ",
|
|
4650
4971
|
isAi ? "Y" : "n"
|
|
4651
4972
|
] }),
|
|
4652
|
-
/* @__PURE__ */
|
|
4653
|
-
/* @__PURE__ */
|
|
4973
|
+
/* @__PURE__ */ jsx13("button", { type: "button", style: styles.btn, onClick: () => setOpen((v) => !v), children: open ? "hide" : "show" }),
|
|
4974
|
+
/* @__PURE__ */ jsx13("button", { type: "button", style: styles.btn, onClick: () => {
|
|
4654
4975
|
eventsRef.current = [];
|
|
4655
4976
|
setEvents([]);
|
|
4656
4977
|
}, children: "clear" })
|
|
4657
4978
|
] }),
|
|
4658
|
-
open && /* @__PURE__ */
|
|
4659
|
-
/* @__PURE__ */
|
|
4660
|
-
/* @__PURE__ */
|
|
4661
|
-
activeMessages.length === 0 ? /* @__PURE__ */
|
|
4662
|
-
/* @__PURE__ */
|
|
4663
|
-
/* @__PURE__ */
|
|
4664
|
-
/* @__PURE__ */
|
|
4665
|
-
/* @__PURE__ */
|
|
4979
|
+
open && /* @__PURE__ */ jsxs8("div", { style: styles.body, children: [
|
|
4980
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.section, children: [
|
|
4981
|
+
/* @__PURE__ */ jsx13("div", { style: styles.sectionTitle, children: "messages (active)" }),
|
|
4982
|
+
activeMessages.length === 0 ? /* @__PURE__ */ jsx13("div", { style: styles.empty, children: "empty" }) : activeMessages.map((m, i) => /* @__PURE__ */ jsxs8("div", { style: styles.row, children: [
|
|
4983
|
+
/* @__PURE__ */ jsx13("span", { style: { ...styles.badge, background: colorFor(senderOf(m)) }, children: i }),
|
|
4984
|
+
/* @__PURE__ */ jsx13("span", { style: styles.sender, children: senderOf(m) }),
|
|
4985
|
+
/* @__PURE__ */ jsx13("span", { style: styles.ts, children: m.createdAt.slice(11, 23) }),
|
|
4986
|
+
/* @__PURE__ */ jsx13("span", { style: styles.text, children: (m.text ?? "").slice(0, 60) })
|
|
4666
4987
|
] }, m.id))
|
|
4667
4988
|
] }),
|
|
4668
|
-
/* @__PURE__ */
|
|
4669
|
-
/* @__PURE__ */
|
|
4670
|
-
events.length === 0 ? /* @__PURE__ */
|
|
4671
|
-
/* @__PURE__ */
|
|
4672
|
-
/* @__PURE__ */
|
|
4673
|
-
/* @__PURE__ */
|
|
4674
|
-
e.detail && /* @__PURE__ */
|
|
4989
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.section, children: [
|
|
4990
|
+
/* @__PURE__ */ jsx13("div", { style: styles.sectionTitle, children: "events" }),
|
|
4991
|
+
events.length === 0 ? /* @__PURE__ */ jsx13("div", { style: styles.empty, children: "no events yet \u2014 send a message" }) : events.map((e) => /* @__PURE__ */ jsxs8("div", { style: styles.row, children: [
|
|
4992
|
+
/* @__PURE__ */ jsx13("span", { style: { ...styles.badge, background: kindColor(e.kind) }, children: e.kind }),
|
|
4993
|
+
/* @__PURE__ */ jsx13("span", { style: styles.ts, children: new Date(e.t).toISOString().slice(11, 23) }),
|
|
4994
|
+
/* @__PURE__ */ jsx13("span", { style: styles.evLabel, children: e.label }),
|
|
4995
|
+
e.detail && /* @__PURE__ */ jsx13("span", { style: styles.detail, children: e.detail })
|
|
4675
4996
|
] }, e.id))
|
|
4676
4997
|
] })
|
|
4677
4998
|
] })
|
|
@@ -4774,9 +5095,9 @@ var styles = {
|
|
|
4774
5095
|
};
|
|
4775
5096
|
|
|
4776
5097
|
// src/themed/icons-local.tsx
|
|
4777
|
-
import { jsx as
|
|
5098
|
+
import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4778
5099
|
function DotsIcon({ size = 24, ...props }) {
|
|
4779
|
-
return /* @__PURE__ */
|
|
5100
|
+
return /* @__PURE__ */ jsxs9(
|
|
4780
5101
|
"svg",
|
|
4781
5102
|
{
|
|
4782
5103
|
width: size,
|
|
@@ -4787,18 +5108,459 @@ function DotsIcon({ size = 24, ...props }) {
|
|
|
4787
5108
|
"aria-hidden": "true",
|
|
4788
5109
|
...props,
|
|
4789
5110
|
children: [
|
|
4790
|
-
/* @__PURE__ */
|
|
4791
|
-
/* @__PURE__ */
|
|
4792
|
-
/* @__PURE__ */
|
|
5111
|
+
/* @__PURE__ */ jsx14("circle", { cx: "5", cy: "12", r: "1.7", fill: "currentColor" }),
|
|
5112
|
+
/* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "1.7", fill: "currentColor" }),
|
|
5113
|
+
/* @__PURE__ */ jsx14("circle", { cx: "19", cy: "12", r: "1.7", fill: "currentColor" })
|
|
4793
5114
|
]
|
|
4794
5115
|
}
|
|
4795
5116
|
);
|
|
4796
5117
|
}
|
|
4797
5118
|
|
|
4798
5119
|
// src/themed/message-bubble.tsx
|
|
4799
|
-
import { useEffect as
|
|
5120
|
+
import { useEffect as useEffect14, useLayoutEffect, useRef as useRef16, useState as useState15 } from "react";
|
|
5121
|
+
|
|
5122
|
+
// src/themed/image-fallback.ts
|
|
5123
|
+
function imageFileName(url) {
|
|
5124
|
+
try {
|
|
5125
|
+
const { pathname, host } = new URL(url);
|
|
5126
|
+
const last = pathname.split("/").filter(Boolean).pop();
|
|
5127
|
+
if (!last) return host;
|
|
5128
|
+
try {
|
|
5129
|
+
return decodeURIComponent(last);
|
|
5130
|
+
} catch {
|
|
5131
|
+
return last;
|
|
5132
|
+
}
|
|
5133
|
+
} catch {
|
|
5134
|
+
return url.split(/[?#]/)[0]?.split("/").filter(Boolean).pop() ?? url;
|
|
5135
|
+
}
|
|
5136
|
+
}
|
|
5137
|
+
function fileExt(name) {
|
|
5138
|
+
const dot = name.lastIndexOf(".");
|
|
5139
|
+
return dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
|
|
5140
|
+
}
|
|
5141
|
+
|
|
5142
|
+
// ../types/src/link-preview.ts
|
|
5143
|
+
var FILE_ENDINGS = /* @__PURE__ */ new Set([
|
|
5144
|
+
"js",
|
|
5145
|
+
"jsx",
|
|
5146
|
+
"ts",
|
|
5147
|
+
"tsx",
|
|
5148
|
+
"mjs",
|
|
5149
|
+
"cjs",
|
|
5150
|
+
"css",
|
|
5151
|
+
"scss",
|
|
5152
|
+
"html",
|
|
5153
|
+
"htm",
|
|
5154
|
+
"json",
|
|
5155
|
+
"yaml",
|
|
5156
|
+
"yml",
|
|
5157
|
+
"toml",
|
|
5158
|
+
"xml",
|
|
5159
|
+
"txt",
|
|
5160
|
+
"log",
|
|
5161
|
+
"csv",
|
|
5162
|
+
"pdf",
|
|
5163
|
+
"png",
|
|
5164
|
+
"jpg",
|
|
5165
|
+
"jpeg",
|
|
5166
|
+
"gif",
|
|
5167
|
+
"svg",
|
|
5168
|
+
"webp",
|
|
5169
|
+
"php",
|
|
5170
|
+
"rb",
|
|
5171
|
+
"cpp",
|
|
5172
|
+
"exe",
|
|
5173
|
+
"lock",
|
|
5174
|
+
"map",
|
|
5175
|
+
"env",
|
|
5176
|
+
"md",
|
|
5177
|
+
"gz",
|
|
5178
|
+
"tar"
|
|
5179
|
+
]);
|
|
5180
|
+
var FILE_MIDDLES = /* @__PURE__ */ new Set([
|
|
5181
|
+
"config",
|
|
5182
|
+
"spec",
|
|
5183
|
+
"test",
|
|
5184
|
+
"min",
|
|
5185
|
+
"d",
|
|
5186
|
+
"module",
|
|
5187
|
+
"stories",
|
|
5188
|
+
"setup",
|
|
5189
|
+
"types",
|
|
5190
|
+
"bundle",
|
|
5191
|
+
"schema"
|
|
5192
|
+
]);
|
|
5193
|
+
var KNOWN_NAMES = /* @__PURE__ */ new Set(["asp.net", "ado.net", "vb.net"]);
|
|
5194
|
+
var DOT_LETTERS = /* @__PURE__ */ new Set(["\uA4F8", "\uA78F"]);
|
|
5195
|
+
var make = (source, flags) => new RegExp(source, flags);
|
|
5196
|
+
var one = (set) => make(`^[${set}]$`, "u");
|
|
5197
|
+
var engine;
|
|
5198
|
+
function patterns() {
|
|
5199
|
+
if (engine !== void 0) return engine;
|
|
5200
|
+
try {
|
|
5201
|
+
const lgc = "\\p{sc=Latn}\\p{sc=Grek}\\p{sc=Cyrl}\\p{sc=Zyyy}";
|
|
5202
|
+
engine = {
|
|
5203
|
+
/* Controls, line separators and the bidi controls: a space, not
|
|
5204
|
+
nothing, because they separated something. */
|
|
5205
|
+
control: make("[\\p{Cc}\\p{Zl}\\p{Zp}\\u202a-\\u202e\\u2066-\\u2069]", "gu"),
|
|
5206
|
+
invisible: make("[\\p{Cf}\\p{Me}\\p{Default_Ignorable_Code_Point}]", "gu"),
|
|
5207
|
+
looseMark: make(`(^|[${lgc}])\\p{Mn}+`, "gu"),
|
|
5208
|
+
anyMark: make("\\p{M}", "gu"),
|
|
5209
|
+
letter: one("\\p{L}"),
|
|
5210
|
+
modifier: one("\\p{Lm}"),
|
|
5211
|
+
digit: one("\\p{Nd}"),
|
|
5212
|
+
number: one("\\p{N}"),
|
|
5213
|
+
punctOrSymbol: one("\\p{P}\\p{S}"),
|
|
5214
|
+
/* Dashes and quotation marks are not drawn as a dot. */
|
|
5215
|
+
notAJoiner: one("\\p{Pd}\\p{Pi}\\p{Pf}"),
|
|
5216
|
+
latin: one("\\p{sc=Latn}"),
|
|
5217
|
+
greek: one("\\p{sc=Grek}"),
|
|
5218
|
+
cyrillic: one("\\p{sc=Cyrl}"),
|
|
5219
|
+
noSpace: one(
|
|
5220
|
+
"\\p{sc=Hani}\\p{sc=Hira}\\p{sc=Kana}\\p{sc=Hang}\\p{sc=Bopo}\\p{sc=Thai}\\p{sc=Laoo}\\p{sc=Khmr}\\p{sc=Mymr}\\p{sc=Tibt}"
|
|
5221
|
+
),
|
|
5222
|
+
common: one("\\p{sc=Zyyy}\\p{sc=Zinh}"),
|
|
5223
|
+
tld: make("^\\p{L}{2,}$", "u"),
|
|
5224
|
+
ipv6Bracket: make("\\[[0-9a-f:.]*:[0-9a-f:.]*\\]", "g"),
|
|
5225
|
+
ipv6Bare: make("(^|[^\\p{L}\\p{N}:.])([0-9a-f:]{3,})(?![\\p{L}\\p{N}:.])", "gu")
|
|
5226
|
+
};
|
|
5227
|
+
} catch {
|
|
5228
|
+
engine = null;
|
|
5229
|
+
}
|
|
5230
|
+
return engine;
|
|
5231
|
+
}
|
|
5232
|
+
function foldPreviewText(value) {
|
|
5233
|
+
const rx = patterns();
|
|
5234
|
+
if (!rx) throw new Error("link-preview: no Unicode property support");
|
|
5235
|
+
return value.normalize("NFKC").replace(rx.control, " ").replace(rx.invisible, "").replace(rx.looseMark, "$1").replace(/\s+/g, " ").trim();
|
|
5236
|
+
}
|
|
5237
|
+
function cleanPreviewText(value, cap) {
|
|
5238
|
+
if (typeof value !== "string") return null;
|
|
5239
|
+
let text;
|
|
5240
|
+
try {
|
|
5241
|
+
text = foldPreviewText(value);
|
|
5242
|
+
} catch {
|
|
5243
|
+
return null;
|
|
5244
|
+
}
|
|
5245
|
+
if (!text) return null;
|
|
5246
|
+
return text.length > cap ? `${text.slice(0, cap - 1).trimEnd()}\u2026` : text;
|
|
5247
|
+
}
|
|
5248
|
+
var BREAK = { kind: "break", script: "common" };
|
|
5249
|
+
var seen = /* @__PURE__ */ new Map();
|
|
5250
|
+
function scriptOf(ch, rx) {
|
|
5251
|
+
if (rx.latin.test(ch)) return "latin";
|
|
5252
|
+
if (rx.noSpace.test(ch)) return "nospace";
|
|
5253
|
+
if (rx.cyrillic.test(ch)) return "cyrillic";
|
|
5254
|
+
if (rx.greek.test(ch)) return "greek";
|
|
5255
|
+
if (rx.common.test(ch)) return "common";
|
|
5256
|
+
return "other";
|
|
5257
|
+
}
|
|
5258
|
+
function read(ch, rx) {
|
|
5259
|
+
const code = ch.codePointAt(0) ?? 0;
|
|
5260
|
+
if (code < 128) {
|
|
5261
|
+
if (ch === ".") return { kind: "dot", script: "common" };
|
|
5262
|
+
if (ch === "-" || code >= 48 && code <= 57) return { kind: "word", script: "common" };
|
|
5263
|
+
if (code >= 97 && code <= 122) return { kind: "word", script: "latin" };
|
|
5264
|
+
return BREAK;
|
|
5265
|
+
}
|
|
5266
|
+
const known = seen.get(ch);
|
|
5267
|
+
if (known) return known;
|
|
5268
|
+
let out = BREAK;
|
|
5269
|
+
if (DOT_LETTERS.has(ch) || rx.modifier.test(ch)) out = { kind: "join", script: "common" };
|
|
5270
|
+
else if (rx.letter.test(ch)) out = { kind: "word", script: scriptOf(ch, rx) };
|
|
5271
|
+
else if (rx.digit.test(ch)) out = { kind: "join", script: "common" };
|
|
5272
|
+
else if (rx.number.test(ch)) out = { kind: "word", script: "common" };
|
|
5273
|
+
else if (rx.notAJoiner.test(ch)) out = BREAK;
|
|
5274
|
+
else if (rx.punctOrSymbol.test(ch)) out = { kind: "join", script: "common" };
|
|
5275
|
+
if (seen.size < 4096) seen.set(ch, out);
|
|
5276
|
+
return out;
|
|
5277
|
+
}
|
|
5278
|
+
function shapeOf(checked, rx) {
|
|
5279
|
+
const tokens = [];
|
|
5280
|
+
let mixed = false;
|
|
5281
|
+
let run = "";
|
|
5282
|
+
let letters = 0;
|
|
5283
|
+
let noSpaceLetters = 0;
|
|
5284
|
+
let piece = /* @__PURE__ */ new Set();
|
|
5285
|
+
const endPiece = () => {
|
|
5286
|
+
piece.delete("nospace");
|
|
5287
|
+
piece.delete("common");
|
|
5288
|
+
if (piece.size > 1) mixed = true;
|
|
5289
|
+
piece = /* @__PURE__ */ new Set();
|
|
5290
|
+
};
|
|
5291
|
+
const endRun = () => {
|
|
5292
|
+
if (!run) return;
|
|
5293
|
+
endPiece();
|
|
5294
|
+
if (/[^-]/.test(run)) {
|
|
5295
|
+
tokens.push({
|
|
5296
|
+
kind: "word",
|
|
5297
|
+
text: run,
|
|
5298
|
+
noSpace: letters > 0 && noSpaceLetters === letters,
|
|
5299
|
+
hasLetter: letters > 0
|
|
5300
|
+
});
|
|
5301
|
+
} else {
|
|
5302
|
+
tokens.push({ kind: "break", text: run, noSpace: false, hasLetter: false });
|
|
5303
|
+
}
|
|
5304
|
+
run = "";
|
|
5305
|
+
letters = 0;
|
|
5306
|
+
noSpaceLetters = 0;
|
|
5307
|
+
};
|
|
5308
|
+
for (const ch of checked) {
|
|
5309
|
+
const c = read(ch, rx);
|
|
5310
|
+
if (c.kind === "word") {
|
|
5311
|
+
run += ch;
|
|
5312
|
+
if (ch === "-") endPiece();
|
|
5313
|
+
else if (c.script !== "common") {
|
|
5314
|
+
letters++;
|
|
5315
|
+
if (c.script === "nospace") noSpaceLetters++;
|
|
5316
|
+
piece.add(c.script);
|
|
5317
|
+
}
|
|
5318
|
+
continue;
|
|
5319
|
+
}
|
|
5320
|
+
endRun();
|
|
5321
|
+
tokens.push({ kind: c.kind, text: ch, noSpace: false, hasLetter: false });
|
|
5322
|
+
}
|
|
5323
|
+
endRun();
|
|
5324
|
+
return { tokens, mixed };
|
|
5325
|
+
}
|
|
5326
|
+
function hostOf(labels, rx, asAddress) {
|
|
5327
|
+
const n = labels.length;
|
|
5328
|
+
if (n === 4 && labels.every((l) => /^\d{1,3}$/.test(l))) return labels.join(".");
|
|
5329
|
+
let end = n;
|
|
5330
|
+
if (!asAddress) {
|
|
5331
|
+
let file = false;
|
|
5332
|
+
while (end > 1 && FILE_ENDINGS.has(labels[end - 1] ?? "")) {
|
|
5333
|
+
end--;
|
|
5334
|
+
file = true;
|
|
5335
|
+
}
|
|
5336
|
+
while (file && end > 1 && FILE_MIDDLES.has(labels[end - 1] ?? "")) end--;
|
|
5337
|
+
}
|
|
5338
|
+
for (let i = end - 1; i >= 1; i--) {
|
|
5339
|
+
const ending = (labels[i] ?? "").split("-", 1)[0] ?? "";
|
|
5340
|
+
if (!rx.tld.test(ending)) continue;
|
|
5341
|
+
const host = [...labels.slice(0, i), ending].join(".");
|
|
5342
|
+
return KNOWN_NAMES.has(host) ? null : host;
|
|
5343
|
+
}
|
|
5344
|
+
return null;
|
|
5345
|
+
}
|
|
5346
|
+
function hostsNamedIn(text) {
|
|
5347
|
+
const rx = patterns();
|
|
5348
|
+
if (!rx) return [""];
|
|
5349
|
+
const checked = foldPreviewText(text).replace(rx.anyMark, "").toLowerCase();
|
|
5350
|
+
const out = /* @__PURE__ */ new Set();
|
|
5351
|
+
const { tokens, mixed } = shapeOf(checked, rx);
|
|
5352
|
+
if (mixed) out.add("");
|
|
5353
|
+
for (let i = 0; i < tokens.length; i++) {
|
|
5354
|
+
const first = tokens[i];
|
|
5355
|
+
if (!first || first.kind !== "word") continue;
|
|
5356
|
+
const labels = [first.text];
|
|
5357
|
+
let anyLetter = first.hasLetter;
|
|
5358
|
+
let j = i;
|
|
5359
|
+
for (; ; ) {
|
|
5360
|
+
const sep = tokens[j + 1];
|
|
5361
|
+
const next = tokens[j + 2];
|
|
5362
|
+
const here = tokens[j];
|
|
5363
|
+
if (!sep || !next || !here || next.kind !== "word") break;
|
|
5364
|
+
if (sep.kind === "break") break;
|
|
5365
|
+
if (sep.kind === "join" && here.noSpace && next.noSpace) break;
|
|
5366
|
+
labels.push(next.text);
|
|
5367
|
+
anyLetter ||= next.hasLetter;
|
|
5368
|
+
j += 2;
|
|
5369
|
+
}
|
|
5370
|
+
const before = tokens[i - 1]?.text;
|
|
5371
|
+
const host = labels.length > 1 ? hostOf(labels, rx, before === "@") : null;
|
|
5372
|
+
if (host) out.add(host);
|
|
5373
|
+
const colon = tokens[j + 1];
|
|
5374
|
+
const port = tokens[j + 2];
|
|
5375
|
+
if (!host && anyLetter && colon?.text === ":" && port && /^\d{1,5}$/.test(port.text)) {
|
|
5376
|
+
out.add(labels.join("."));
|
|
5377
|
+
}
|
|
5378
|
+
i = j;
|
|
5379
|
+
}
|
|
5380
|
+
for (let at = checked.indexOf("://"); at !== -1; at = checked.indexOf("://", at + 3)) {
|
|
5381
|
+
const rest = checked.slice(at + 3, at + 3 + 300);
|
|
5382
|
+
const authority = (rest.split(/[\s/?#]/, 1)[0] ?? "").split("@").pop() ?? "";
|
|
5383
|
+
const literal = /^\[[^\]]*\]/.exec(authority)?.[0];
|
|
5384
|
+
out.add(literal ?? authority.replace(/:\d*$/, ""));
|
|
5385
|
+
}
|
|
5386
|
+
for (const m of checked.matchAll(rx.ipv6Bracket)) out.add(m[0]);
|
|
5387
|
+
for (const m of checked.matchAll(rx.ipv6Bare)) {
|
|
5388
|
+
const literal = m[2] ?? "";
|
|
5389
|
+
const colons = literal.split(":").length - 1;
|
|
5390
|
+
if (/[0-9a-f]/.test(literal) && (literal.includes("::") || colons === 7)) out.add(literal);
|
|
5391
|
+
}
|
|
5392
|
+
return [...out];
|
|
5393
|
+
}
|
|
5394
|
+
function bare(host) {
|
|
5395
|
+
const h = host.toLowerCase();
|
|
5396
|
+
const bracketed = /^\[(.*)\](?::\d+)?$/.exec(h);
|
|
5397
|
+
if (bracketed) return bracketed[1] ?? "";
|
|
5398
|
+
if (h.split(":").length > 2) return h;
|
|
5399
|
+
return h.replace(/:\d+$/, "").replace(/\.$/, "").replace(/^www\./, "");
|
|
5400
|
+
}
|
|
5401
|
+
function sameSite(a, b) {
|
|
5402
|
+
const x = bare(a);
|
|
5403
|
+
const y = bare(b);
|
|
5404
|
+
if (!x || !y) return false;
|
|
5405
|
+
return x === y || x.endsWith(`.${y}`) || y.endsWith(`.${x}`);
|
|
5406
|
+
}
|
|
5407
|
+
function ascii(named) {
|
|
5408
|
+
if (/^[\x00-\x7f]*$/.test(named)) return named;
|
|
5409
|
+
try {
|
|
5410
|
+
return new URL(`https://${named}`).hostname;
|
|
5411
|
+
} catch {
|
|
5412
|
+
return null;
|
|
5413
|
+
}
|
|
5414
|
+
}
|
|
5415
|
+
function namesAnotherSite(text, realHost) {
|
|
5416
|
+
let named;
|
|
5417
|
+
try {
|
|
5418
|
+
named = hostsNamedIn(text);
|
|
5419
|
+
} catch {
|
|
5420
|
+
return true;
|
|
5421
|
+
}
|
|
5422
|
+
for (const host of named) {
|
|
5423
|
+
const form = host === "" ? null : ascii(host);
|
|
5424
|
+
if (form === null || !sameSite(form, realHost)) return true;
|
|
5425
|
+
}
|
|
5426
|
+
return false;
|
|
5427
|
+
}
|
|
5428
|
+
var PREVIEW_HOST_CAP = 40;
|
|
5429
|
+
function previewHost(url) {
|
|
5430
|
+
const host = url.host.replace(/^www\./, "");
|
|
5431
|
+
return host.length > PREVIEW_HOST_CAP ? `\u2026${host.slice(host.length - (PREVIEW_HOST_CAP - 1))}` : host;
|
|
5432
|
+
}
|
|
5433
|
+
function previewWords(url, raw, caps = { title: 160, description: 280 }) {
|
|
5434
|
+
const keep = (value, cap) => {
|
|
5435
|
+
if (typeof value !== "string" || namesAnotherSite(value, url.hostname)) return null;
|
|
5436
|
+
return cleanPreviewText(value, cap);
|
|
5437
|
+
};
|
|
5438
|
+
return {
|
|
5439
|
+
title: keep(raw.title, caps.title),
|
|
5440
|
+
description: keep(raw.description, caps.description)
|
|
5441
|
+
};
|
|
5442
|
+
}
|
|
5443
|
+
var PREVIEW_ICON_MAX_BYTES = 32 * 1024;
|
|
5444
|
+
|
|
5445
|
+
// src/themed/link-preview.ts
|
|
5446
|
+
function httpsOnly(value) {
|
|
5447
|
+
if (!value) return null;
|
|
5448
|
+
try {
|
|
5449
|
+
const url = new URL(value);
|
|
5450
|
+
return url.protocol === "https:" && !url.username && !url.password ? url.href : null;
|
|
5451
|
+
} catch {
|
|
5452
|
+
return null;
|
|
5453
|
+
}
|
|
5454
|
+
}
|
|
5455
|
+
function pictureOnly(image, title) {
|
|
5456
|
+
if (!image || !title) return image;
|
|
5457
|
+
let asked;
|
|
5458
|
+
try {
|
|
5459
|
+
asked = new URL(image).searchParams.get("title");
|
|
5460
|
+
} catch {
|
|
5461
|
+
return image;
|
|
5462
|
+
}
|
|
5463
|
+
if (!asked) return image;
|
|
5464
|
+
const fold = (v) => v.toLowerCase().replace(/\s+/g, " ").trim();
|
|
5465
|
+
const a = fold(asked);
|
|
5466
|
+
const t2 = fold(title);
|
|
5467
|
+
return a.length >= 4 && (t2.includes(a) || a.includes(t2)) ? null : image;
|
|
5468
|
+
}
|
|
5469
|
+
function linkPreviewView(preview) {
|
|
5470
|
+
let url;
|
|
5471
|
+
try {
|
|
5472
|
+
url = new URL(preview.url);
|
|
5473
|
+
} catch {
|
|
5474
|
+
return null;
|
|
5475
|
+
}
|
|
5476
|
+
if (url.protocol !== "http:" && url.protocol !== "https:" || url.username || url.password) {
|
|
5477
|
+
return null;
|
|
5478
|
+
}
|
|
5479
|
+
const { title, description } = previewWords(url, preview);
|
|
5480
|
+
if (!title && !description) return null;
|
|
5481
|
+
return {
|
|
5482
|
+
href: url.href,
|
|
5483
|
+
host: previewHost(url),
|
|
5484
|
+
title,
|
|
5485
|
+
description,
|
|
5486
|
+
image: pictureOnly(httpsOnly(preview.imageUrl), title),
|
|
5487
|
+
favicon: httpsOnly(preview.favicon)
|
|
5488
|
+
};
|
|
5489
|
+
}
|
|
5490
|
+
|
|
5491
|
+
// src/themed/message-bubble.tsx
|
|
4800
5492
|
import { createPortal } from "react-dom";
|
|
4801
|
-
|
|
5493
|
+
|
|
5494
|
+
// src/themed/stream-reveal.ts
|
|
5495
|
+
import { useEffect as useEffect13, useRef as useRef15, useState as useState14 } from "react";
|
|
5496
|
+
var DRAIN_MS = 300;
|
|
5497
|
+
var MAX_CHAR_INTERVAL_MS = 5;
|
|
5498
|
+
var MAX_WORD_BACKUP = 24;
|
|
5499
|
+
var BARE_MARKER = /(?:^|\n)[ \t]*(?:\d+[.)]|[-*+]|#{1,6})$/;
|
|
5500
|
+
function whileArriving(text) {
|
|
5501
|
+
const trimmed = text.trimEnd();
|
|
5502
|
+
const marker = BARE_MARKER.exec(trimmed);
|
|
5503
|
+
return marker ? trimmed.slice(0, marker.index).trimEnd() : trimmed;
|
|
5504
|
+
}
|
|
5505
|
+
function advanceReveal(cursor, total, dtMs) {
|
|
5506
|
+
const backlog = total - cursor;
|
|
5507
|
+
if (backlog <= 0) return total;
|
|
5508
|
+
const interval = Math.min(MAX_CHAR_INTERVAL_MS, DRAIN_MS / backlog);
|
|
5509
|
+
return Math.min(total, cursor + dtMs / interval);
|
|
5510
|
+
}
|
|
5511
|
+
function wholeWords(text, cursor) {
|
|
5512
|
+
const end = Math.floor(cursor);
|
|
5513
|
+
if (end >= text.length) return text;
|
|
5514
|
+
if (end <= 0) return "";
|
|
5515
|
+
for (let i = end; i > 0 && end - i <= MAX_WORD_BACKUP; i--) {
|
|
5516
|
+
if (/\s/.test(text.charAt(i))) return text.slice(0, i);
|
|
5517
|
+
}
|
|
5518
|
+
if (end <= MAX_WORD_BACKUP) return "";
|
|
5519
|
+
const code = text.charCodeAt(end - 1);
|
|
5520
|
+
const splitsPair = code >= 55296 && code <= 56319;
|
|
5521
|
+
return text.slice(0, splitsPair ? end - 1 : end);
|
|
5522
|
+
}
|
|
5523
|
+
function prefersReducedMotion() {
|
|
5524
|
+
return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
5525
|
+
}
|
|
5526
|
+
function useStreamReveal(text, streaming) {
|
|
5527
|
+
const [paced, setPaced] = useState14(streaming);
|
|
5528
|
+
if (streaming && !paced) setPaced(true);
|
|
5529
|
+
const [shown, setShown] = useState14(streaming ? "" : text);
|
|
5530
|
+
const cursorRef = useRef15(shown.length);
|
|
5531
|
+
const shownRef = useRef15(shown);
|
|
5532
|
+
useEffect13(() => {
|
|
5533
|
+
if (!paced) return;
|
|
5534
|
+
const show = (next) => {
|
|
5535
|
+
if (next === shownRef.current) return;
|
|
5536
|
+
shownRef.current = next;
|
|
5537
|
+
setShown(next);
|
|
5538
|
+
};
|
|
5539
|
+
if (!text.startsWith(shownRef.current) || prefersReducedMotion()) {
|
|
5540
|
+
cursorRef.current = text.length;
|
|
5541
|
+
show(text);
|
|
5542
|
+
return;
|
|
5543
|
+
}
|
|
5544
|
+
if (cursorRef.current >= text.length) return;
|
|
5545
|
+
let frame = 0;
|
|
5546
|
+
let last = null;
|
|
5547
|
+
const step = (now) => {
|
|
5548
|
+
const dt = last === null ? 16 : now - last;
|
|
5549
|
+
last = now;
|
|
5550
|
+
cursorRef.current = advanceReveal(cursorRef.current, text.length, dt);
|
|
5551
|
+
show(wholeWords(text, cursorRef.current));
|
|
5552
|
+
if (cursorRef.current < text.length) frame = requestAnimationFrame(step);
|
|
5553
|
+
};
|
|
5554
|
+
frame = requestAnimationFrame(step);
|
|
5555
|
+
return () => cancelAnimationFrame(frame);
|
|
5556
|
+
}, [text, paced]);
|
|
5557
|
+
if (!paced) return { text, revealing: false, paced };
|
|
5558
|
+
const visible = text.startsWith(shown) ? shown : text;
|
|
5559
|
+
return { text: visible, revealing: visible.length < text.length, paced };
|
|
5560
|
+
}
|
|
5561
|
+
|
|
5562
|
+
// src/themed/message-bubble.tsx
|
|
5563
|
+
import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
4802
5564
|
function MessageBubble({
|
|
4803
5565
|
text,
|
|
4804
5566
|
sender,
|
|
@@ -4808,10 +5570,16 @@ function MessageBubble({
|
|
|
4808
5570
|
showAuthor,
|
|
4809
5571
|
metadata,
|
|
4810
5572
|
onQuickReplyTap,
|
|
4811
|
-
streaming
|
|
5573
|
+
streaming,
|
|
5574
|
+
onReveal
|
|
4812
5575
|
}) {
|
|
4813
5576
|
const senderClass = `hw-msg--${sender}`;
|
|
4814
|
-
const bubbleRef =
|
|
5577
|
+
const bubbleRef = useRef16(null);
|
|
5578
|
+
const reveal = useStreamReveal(text, !!streaming);
|
|
5579
|
+
const live = !!streaming || reveal.revealing;
|
|
5580
|
+
useLayoutEffect(() => {
|
|
5581
|
+
if (reveal.paced && reveal.text.length > 0) onReveal?.();
|
|
5582
|
+
}, [reveal.text, reveal.paced, onReveal]);
|
|
4815
5583
|
const imageParts = parts?.filter((p) => p.type === "image") ?? [];
|
|
4816
5584
|
const fileParts = parts?.filter((p) => p.type === "file") ?? [];
|
|
4817
5585
|
const linkPreviews = parts?.filter(
|
|
@@ -4821,7 +5589,7 @@ function MessageBubble({
|
|
|
4821
5589
|
(p) => p.type === "source"
|
|
4822
5590
|
) ?? [];
|
|
4823
5591
|
const hasText = text.length > 0;
|
|
4824
|
-
|
|
5592
|
+
useEffect14(() => {
|
|
4825
5593
|
const bubble = bubbleRef.current;
|
|
4826
5594
|
if (!bubble || sender !== "ai" && sender !== "team") return;
|
|
4827
5595
|
const handleClick = (event) => {
|
|
@@ -4832,23 +5600,32 @@ function MessageBubble({
|
|
|
4832
5600
|
bubble.removeEventListener("click", handleClick);
|
|
4833
5601
|
};
|
|
4834
5602
|
}, [sender]);
|
|
4835
|
-
return /* @__PURE__ */
|
|
4836
|
-
imageParts.length > 0 && /* @__PURE__ */
|
|
4837
|
-
hasText && /* @__PURE__ */
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4842
|
-
|
|
5603
|
+
return /* @__PURE__ */ jsx15("div", { className: `hw-msg ${senderClass}`, children: /* @__PURE__ */ jsxs10("div", { className: "hw-msg-body", children: [
|
|
5604
|
+
imageParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-images", children: imageParts.map((img, i) => /* @__PURE__ */ jsx15(PreviewableThumbnail, { src: img.url }, i)) }),
|
|
5605
|
+
hasText && /* @__PURE__ */ jsx15(
|
|
5606
|
+
"div",
|
|
5607
|
+
{
|
|
5608
|
+
className: live ? "hw-msg-bubble hw-msg-bubble--live" : "hw-msg-bubble",
|
|
5609
|
+
ref: bubbleRef,
|
|
5610
|
+
children: sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx15(
|
|
5611
|
+
"span",
|
|
5612
|
+
{
|
|
5613
|
+
dangerouslySetInnerHTML: {
|
|
5614
|
+
__html: renderMarkdown(
|
|
5615
|
+
live ? closeDanglingMarkdown(whileArriving(reveal.text)) : reveal.text,
|
|
5616
|
+
/* A message does not get to make the browser fetch an
|
|
5617
|
+
address of its choosing. See RenderMarkdownOptions. */
|
|
5618
|
+
{ images: "link" }
|
|
5619
|
+
)
|
|
5620
|
+
}
|
|
4843
5621
|
}
|
|
4844
|
-
}
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
(src, i) => src.sourceUrl ? /* @__PURE__ */ jsxs9(
|
|
5622
|
+
) : /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } })
|
|
5623
|
+
}
|
|
5624
|
+
),
|
|
5625
|
+
fileParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-files", children: fileParts.map((file, i) => /* @__PURE__ */ jsx15(FileCard, { file }, i)) }),
|
|
5626
|
+
linkPreviews.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-links", children: linkPreviews.map((lp, i) => /* @__PURE__ */ jsx15(LinkPreviewCard, { preview: lp }, i)) }),
|
|
5627
|
+
sources.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-sources", children: sources.map(
|
|
5628
|
+
(src, i) => src.sourceUrl ? /* @__PURE__ */ jsxs10(
|
|
4852
5629
|
"a",
|
|
4853
5630
|
{
|
|
4854
5631
|
href: src.sourceUrl,
|
|
@@ -4857,26 +5634,26 @@ function MessageBubble({
|
|
|
4857
5634
|
className: "hw-source",
|
|
4858
5635
|
onClick: (e) => e.stopPropagation(),
|
|
4859
5636
|
children: [
|
|
4860
|
-
/* @__PURE__ */
|
|
4861
|
-
/* @__PURE__ */
|
|
5637
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-source-n", children: i + 1 }),
|
|
5638
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-source-title", children: src.title })
|
|
4862
5639
|
]
|
|
4863
5640
|
},
|
|
4864
5641
|
src.knowledgeId
|
|
4865
|
-
) : /* @__PURE__ */
|
|
4866
|
-
/* @__PURE__ */
|
|
4867
|
-
/* @__PURE__ */
|
|
5642
|
+
) : /* @__PURE__ */ jsxs10("div", { className: "hw-source", children: [
|
|
5643
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-source-n", children: i + 1 }),
|
|
5644
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-source-title", children: src.title })
|
|
4868
5645
|
] }, src.knowledgeId)
|
|
4869
5646
|
) }),
|
|
4870
|
-
metadata?.kind === "quick_replies" && /* @__PURE__ */
|
|
5647
|
+
metadata?.kind === "quick_replies" && /* @__PURE__ */ jsx15(QuickReplyButtons, { metadata, onTap: onQuickReplyTap }),
|
|
4871
5648
|
(() => {
|
|
4872
5649
|
const isVisitor = sender === "visitor";
|
|
4873
5650
|
const lead = isVisitor ? null : senderName ?? null;
|
|
4874
5651
|
const withLead = (showAuthor ?? !!timestamp) && !!lead;
|
|
4875
5652
|
if (!withLead && !timestamp) return null;
|
|
4876
|
-
return /* @__PURE__ */
|
|
4877
|
-
withLead && /* @__PURE__ */
|
|
4878
|
-
withLead && timestamp && /* @__PURE__ */
|
|
4879
|
-
timestamp && /* @__PURE__ */
|
|
5653
|
+
return /* @__PURE__ */ jsxs10("div", { className: "hw-msg-meta", children: [
|
|
5654
|
+
withLead && /* @__PURE__ */ jsx15("span", { className: "hw-msg-author", children: lead }),
|
|
5655
|
+
withLead && timestamp && /* @__PURE__ */ jsx15("span", { className: "hw-msg-meta-sep", children: "\xB7" }),
|
|
5656
|
+
timestamp && /* @__PURE__ */ jsx15("span", { className: "hw-msg-time", children: timestamp })
|
|
4880
5657
|
] });
|
|
4881
5658
|
})()
|
|
4882
5659
|
] }) });
|
|
@@ -4885,21 +5662,21 @@ function QuickReplyButtons({
|
|
|
4885
5662
|
metadata,
|
|
4886
5663
|
onTap
|
|
4887
5664
|
}) {
|
|
4888
|
-
const [tappedId, setTappedId] =
|
|
5665
|
+
const [tappedId, setTappedId] = useState15(null);
|
|
4889
5666
|
const isLocked = metadata.cancelled || tappedId !== null;
|
|
4890
5667
|
const handleTap = (optionId) => {
|
|
4891
5668
|
if (isLocked) return;
|
|
4892
5669
|
setTappedId(optionId);
|
|
4893
5670
|
onTap?.(optionId, metadata.stepId);
|
|
4894
5671
|
};
|
|
4895
|
-
return /* @__PURE__ */
|
|
5672
|
+
return /* @__PURE__ */ jsx15(
|
|
4896
5673
|
"div",
|
|
4897
5674
|
{
|
|
4898
5675
|
className: "hw-quick-replies",
|
|
4899
5676
|
"data-cancelled": metadata.cancelled ? "true" : void 0,
|
|
4900
5677
|
children: metadata.options.map((opt) => {
|
|
4901
5678
|
const isTapped = tappedId === opt.id;
|
|
4902
|
-
return /* @__PURE__ */
|
|
5679
|
+
return /* @__PURE__ */ jsx15(
|
|
4903
5680
|
"button",
|
|
4904
5681
|
{
|
|
4905
5682
|
type: "button",
|
|
@@ -4916,10 +5693,18 @@ function QuickReplyButtons({
|
|
|
4916
5693
|
);
|
|
4917
5694
|
}
|
|
4918
5695
|
function PreviewableThumbnail({ src }) {
|
|
4919
|
-
const [hover, setHover] =
|
|
4920
|
-
const
|
|
4921
|
-
|
|
4922
|
-
|
|
5696
|
+
const [hover, setHover] = useState15(false);
|
|
5697
|
+
const [broken, setBroken] = useState15(false);
|
|
5698
|
+
const ref = useRef16(null);
|
|
5699
|
+
if (broken) {
|
|
5700
|
+
const name = imageFileName(src);
|
|
5701
|
+
return /* @__PURE__ */ jsxs10("a", { href: src, target: "_blank", rel: "noopener noreferrer", className: "hw-msg-file", children: [
|
|
5702
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext: fileExt(name) }) }),
|
|
5703
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-info", children: /* @__PURE__ */ jsx15("span", { className: "hw-msg-file-name", children: name }) })
|
|
5704
|
+
] });
|
|
5705
|
+
}
|
|
5706
|
+
return /* @__PURE__ */ jsxs10(Fragment3, { children: [
|
|
5707
|
+
/* @__PURE__ */ jsx15(
|
|
4923
5708
|
"a",
|
|
4924
5709
|
{
|
|
4925
5710
|
ref,
|
|
@@ -4930,21 +5715,21 @@ function PreviewableThumbnail({ src }) {
|
|
|
4930
5715
|
"aria-label": t("widget.aria_open_image"),
|
|
4931
5716
|
onMouseEnter: () => setHover(true),
|
|
4932
5717
|
onMouseLeave: () => setHover(false),
|
|
4933
|
-
children: /* @__PURE__ */
|
|
5718
|
+
children: /* @__PURE__ */ jsx15("img", { src, alt: "", className: "hw-msg-image", loading: "lazy", onError: () => setBroken(true) })
|
|
4934
5719
|
}
|
|
4935
5720
|
),
|
|
4936
|
-
hover && /* @__PURE__ */
|
|
5721
|
+
hover && /* @__PURE__ */ jsx15(AnchoredPreview, { src, anchorRef: ref, href: src })
|
|
4937
5722
|
] });
|
|
4938
5723
|
}
|
|
4939
5724
|
var PREVIEWABLE_EXTS = /* @__PURE__ */ new Set(["pdf", "csv", "png", "jpg", "jpeg", "gif", "webp", "svg"]);
|
|
4940
5725
|
function FileCard({ file }) {
|
|
4941
|
-
const [hover, setHover] =
|
|
4942
|
-
const ref =
|
|
5726
|
+
const [hover, setHover] = useState15(false);
|
|
5727
|
+
const ref = useRef16(null);
|
|
4943
5728
|
const ext = file.fileName.split(".").pop()?.toLowerCase() ?? "";
|
|
4944
5729
|
const isPreviewable = PREVIEWABLE_EXTS.has(ext);
|
|
4945
5730
|
const isImage = file.mimeType.startsWith("image/");
|
|
4946
|
-
return /* @__PURE__ */
|
|
4947
|
-
/* @__PURE__ */
|
|
5731
|
+
return /* @__PURE__ */ jsxs10(Fragment3, { children: [
|
|
5732
|
+
/* @__PURE__ */ jsxs10(
|
|
4948
5733
|
"a",
|
|
4949
5734
|
{
|
|
4950
5735
|
ref,
|
|
@@ -4955,15 +5740,15 @@ function FileCard({ file }) {
|
|
|
4955
5740
|
onMouseEnter: () => isPreviewable && setHover(true),
|
|
4956
5741
|
onMouseLeave: () => setHover(false),
|
|
4957
5742
|
children: [
|
|
4958
|
-
/* @__PURE__ */
|
|
4959
|
-
/* @__PURE__ */
|
|
4960
|
-
/* @__PURE__ */
|
|
4961
|
-
/* @__PURE__ */
|
|
5743
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext }) }),
|
|
5744
|
+
/* @__PURE__ */ jsxs10("span", { className: "hw-msg-file-info", children: [
|
|
5745
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-name", children: file.fileName }),
|
|
5746
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-size", children: formatFileSize(file.fileSize) })
|
|
4962
5747
|
] })
|
|
4963
5748
|
]
|
|
4964
5749
|
}
|
|
4965
5750
|
),
|
|
4966
|
-
hover && isPreviewable && (isImage ? /* @__PURE__ */
|
|
5751
|
+
hover && isPreviewable && (isImage ? /* @__PURE__ */ jsx15(AnchoredPreview, { src: file.url, anchorRef: ref, href: file.url }) : /* @__PURE__ */ jsx15(AnchoredDocPreview, { fileName: file.fileName, ext, anchorRef: ref, href: file.url }))
|
|
4967
5752
|
] });
|
|
4968
5753
|
}
|
|
4969
5754
|
function AnchoredPreview({
|
|
@@ -4972,8 +5757,8 @@ function AnchoredPreview({
|
|
|
4972
5757
|
href,
|
|
4973
5758
|
onOpen
|
|
4974
5759
|
}) {
|
|
4975
|
-
const [style, setStyle] =
|
|
4976
|
-
const [portalTarget, setPortalTarget] =
|
|
5760
|
+
const [style, setStyle] = useState15({ opacity: 0 });
|
|
5761
|
+
const [portalTarget, setPortalTarget] = useState15(null);
|
|
4977
5762
|
useLayoutEffect(() => {
|
|
4978
5763
|
const anchor = anchorRef.current;
|
|
4979
5764
|
if (!anchor) return;
|
|
@@ -4997,7 +5782,7 @@ function AnchoredPreview({
|
|
|
4997
5782
|
};
|
|
4998
5783
|
if (!portalTarget) return null;
|
|
4999
5784
|
return createPortal(
|
|
5000
|
-
/* @__PURE__ */
|
|
5785
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-hover-preview", style, onClick: handleClick, children: /* @__PURE__ */ jsx15("img", { src, alt: "", className: "hw-hover-preview-img" }) }),
|
|
5001
5786
|
portalTarget
|
|
5002
5787
|
);
|
|
5003
5788
|
}
|
|
@@ -5007,8 +5792,8 @@ function AnchoredDocPreview({
|
|
|
5007
5792
|
anchorRef,
|
|
5008
5793
|
href
|
|
5009
5794
|
}) {
|
|
5010
|
-
const [style, setStyle] =
|
|
5011
|
-
const [portalTarget, setPortalTarget] =
|
|
5795
|
+
const [style, setStyle] = useState15({ opacity: 0 });
|
|
5796
|
+
const [portalTarget, setPortalTarget] = useState15(null);
|
|
5012
5797
|
useLayoutEffect(() => {
|
|
5013
5798
|
const anchor = anchorRef.current;
|
|
5014
5799
|
if (!anchor) return;
|
|
@@ -5028,17 +5813,17 @@ function AnchoredDocPreview({
|
|
|
5028
5813
|
}, [anchorRef]);
|
|
5029
5814
|
if (!portalTarget) return null;
|
|
5030
5815
|
return createPortal(
|
|
5031
|
-
/* @__PURE__ */
|
|
5816
|
+
/* @__PURE__ */ jsxs10(
|
|
5032
5817
|
"div",
|
|
5033
5818
|
{
|
|
5034
5819
|
className: "hw-hover-preview hw-hover-preview--doc",
|
|
5035
5820
|
style,
|
|
5036
5821
|
onClick: () => window.open(href, "_blank", "noopener,noreferrer"),
|
|
5037
5822
|
children: [
|
|
5038
|
-
/* @__PURE__ */
|
|
5039
|
-
/* @__PURE__ */
|
|
5040
|
-
/* @__PURE__ */
|
|
5041
|
-
/* @__PURE__ */
|
|
5823
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-hover-preview-doc-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext }) }),
|
|
5824
|
+
/* @__PURE__ */ jsxs10("div", { className: "hw-hover-preview-doc-info", children: [
|
|
5825
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-hover-preview-doc-name", children: fileName }),
|
|
5826
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-hover-preview-doc-hint", children: t("widget.click_to_open") })
|
|
5042
5827
|
] })
|
|
5043
5828
|
]
|
|
5044
5829
|
}
|
|
@@ -5063,7 +5848,7 @@ var FILE_TYPE_COLORS = {
|
|
|
5063
5848
|
};
|
|
5064
5849
|
function FileTypeIcon({ ext }) {
|
|
5065
5850
|
const color = FILE_TYPE_COLORS[ext] ?? "currentColor";
|
|
5066
|
-
return /* @__PURE__ */
|
|
5851
|
+
return /* @__PURE__ */ jsxs10(
|
|
5067
5852
|
"svg",
|
|
5068
5853
|
{
|
|
5069
5854
|
viewBox: "0 0 24 24",
|
|
@@ -5073,60 +5858,60 @@ function FileTypeIcon({ ext }) {
|
|
|
5073
5858
|
strokeLinecap: "round",
|
|
5074
5859
|
strokeLinejoin: "round",
|
|
5075
5860
|
children: [
|
|
5076
|
-
/* @__PURE__ */
|
|
5077
|
-
/* @__PURE__ */
|
|
5078
|
-
ext === "pdf" && /* @__PURE__ */
|
|
5079
|
-
ext === "csv" && /* @__PURE__ */
|
|
5861
|
+
/* @__PURE__ */ jsx15("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
|
|
5862
|
+
/* @__PURE__ */ jsx15("polyline", { points: "14 2 14 8 20 8" }),
|
|
5863
|
+
ext === "pdf" && /* @__PURE__ */ jsx15("text", { x: "8", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "PDF" }),
|
|
5864
|
+
ext === "csv" && /* @__PURE__ */ jsx15("text", { x: "7", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "CSV" })
|
|
5080
5865
|
]
|
|
5081
5866
|
}
|
|
5082
5867
|
);
|
|
5083
5868
|
}
|
|
5084
5869
|
function LinkPreviewCard({ preview }) {
|
|
5085
|
-
const
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
|
|
5089
|
-
|
|
5090
|
-
}
|
|
5091
|
-
})();
|
|
5092
|
-
return /* @__PURE__ */ jsxs9(
|
|
5870
|
+
const view = linkPreviewView(preview);
|
|
5871
|
+
const [imageFailed, setImageFailed] = useState15(false);
|
|
5872
|
+
const [faviconFailed, setFaviconFailed] = useState15(false);
|
|
5873
|
+
if (!view) return null;
|
|
5874
|
+
return /* @__PURE__ */ jsxs10(
|
|
5093
5875
|
"a",
|
|
5094
5876
|
{
|
|
5095
|
-
href:
|
|
5877
|
+
href: view.href,
|
|
5096
5878
|
target: "_blank",
|
|
5097
5879
|
rel: "noopener noreferrer",
|
|
5098
5880
|
className: "hw-link-preview",
|
|
5099
5881
|
onClick: (e) => e.stopPropagation(),
|
|
5100
5882
|
children: [
|
|
5101
|
-
|
|
5883
|
+
view.image && !imageFailed && /* @__PURE__ */ jsx15(
|
|
5102
5884
|
"img",
|
|
5103
5885
|
{
|
|
5104
|
-
src:
|
|
5886
|
+
src: view.image,
|
|
5105
5887
|
alt: "",
|
|
5106
5888
|
className: "hw-link-preview-img",
|
|
5107
5889
|
loading: "lazy",
|
|
5108
|
-
|
|
5109
|
-
|
|
5110
|
-
|
|
5890
|
+
decoding: "async",
|
|
5891
|
+
referrerPolicy: "no-referrer",
|
|
5892
|
+
onError: () => setImageFailed(true)
|
|
5111
5893
|
}
|
|
5112
5894
|
),
|
|
5113
|
-
/* @__PURE__ */
|
|
5114
|
-
|
|
5115
|
-
|
|
5116
|
-
|
|
5117
|
-
|
|
5118
|
-
|
|
5119
|
-
|
|
5120
|
-
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5895
|
+
/* @__PURE__ */ jsxs10("div", { className: "hw-link-preview-body", children: [
|
|
5896
|
+
/* @__PURE__ */ jsxs10("div", { className: "hw-link-preview-url", children: [
|
|
5897
|
+
view.favicon && !faviconFailed && /* @__PURE__ */ jsx15(
|
|
5898
|
+
"img",
|
|
5899
|
+
{
|
|
5900
|
+
src: view.favicon,
|
|
5901
|
+
alt: "",
|
|
5902
|
+
className: "hw-link-preview-favicon",
|
|
5903
|
+
width: 14,
|
|
5904
|
+
height: 14,
|
|
5905
|
+
loading: "lazy",
|
|
5906
|
+
decoding: "async",
|
|
5907
|
+
referrerPolicy: "no-referrer",
|
|
5908
|
+
onError: () => setFaviconFailed(true)
|
|
5124
5909
|
}
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
|
|
5128
|
-
|
|
5129
|
-
/* @__PURE__ */
|
|
5910
|
+
),
|
|
5911
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-link-preview-host", children: view.host })
|
|
5912
|
+
] }),
|
|
5913
|
+
view.title && /* @__PURE__ */ jsx15("div", { className: "hw-link-preview-title", dir: "auto", children: view.title }),
|
|
5914
|
+
view.description && /* @__PURE__ */ jsx15("div", { className: "hw-link-preview-desc", dir: "auto", children: view.description })
|
|
5130
5915
|
] })
|
|
5131
5916
|
]
|
|
5132
5917
|
}
|
|
@@ -5134,8 +5919,8 @@ function LinkPreviewCard({ preview }) {
|
|
|
5134
5919
|
}
|
|
5135
5920
|
|
|
5136
5921
|
// src/themed/message-list.tsx
|
|
5137
|
-
import React, { useEffect as
|
|
5138
|
-
import { jsx as
|
|
5922
|
+
import React, { useEffect as useEffect15, useRef as useRef17 } from "react";
|
|
5923
|
+
import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
5139
5924
|
function parseParts(raw) {
|
|
5140
5925
|
if (!raw) return null;
|
|
5141
5926
|
if (Array.isArray(raw)) return raw;
|
|
@@ -5169,12 +5954,12 @@ function MessageList({
|
|
|
5169
5954
|
onLoadMore,
|
|
5170
5955
|
renderAfterMessages
|
|
5171
5956
|
}) {
|
|
5172
|
-
const bottomRef =
|
|
5173
|
-
const topRef =
|
|
5174
|
-
const containerRef =
|
|
5175
|
-
const prevItemCountRef =
|
|
5176
|
-
const isInitialLoadRef =
|
|
5177
|
-
const hadStreamRef =
|
|
5957
|
+
const bottomRef = useRef17(null);
|
|
5958
|
+
const topRef = useRef17(null);
|
|
5959
|
+
const containerRef = useRef17(null);
|
|
5960
|
+
const prevItemCountRef = useRef17(items.length);
|
|
5961
|
+
const isInitialLoadRef = useRef17(true);
|
|
5962
|
+
const hadStreamRef = useRef17(false);
|
|
5178
5963
|
const client = useWidgetClient();
|
|
5179
5964
|
const activeConversationId = useWidgetStore((s) => s.activeConversationId);
|
|
5180
5965
|
const handleQuickReplyTap = React.useCallback(
|
|
@@ -5186,7 +5971,7 @@ function MessageList({
|
|
|
5186
5971
|
},
|
|
5187
5972
|
[client, activeConversationId]
|
|
5188
5973
|
);
|
|
5189
|
-
|
|
5974
|
+
useEffect15(() => {
|
|
5190
5975
|
const prevCount = prevItemCountRef.current;
|
|
5191
5976
|
const newCount = items.length;
|
|
5192
5977
|
prevItemCountRef.current = newCount;
|
|
@@ -5202,18 +5987,21 @@ function MessageList({
|
|
|
5202
5987
|
isInitialLoadRef.current = false;
|
|
5203
5988
|
}
|
|
5204
5989
|
}, [items]);
|
|
5205
|
-
|
|
5990
|
+
useEffect15(() => {
|
|
5206
5991
|
if (streamingText) {
|
|
5207
5992
|
bottomRef.current?.scrollIntoView({ behavior: "instant" });
|
|
5208
5993
|
}
|
|
5209
5994
|
hadStreamRef.current = !!streamingText;
|
|
5210
5995
|
}, [streamingText]);
|
|
5211
|
-
|
|
5996
|
+
const followReveal = React.useCallback(() => {
|
|
5997
|
+
bottomRef.current?.scrollIntoView({ behavior: "instant" });
|
|
5998
|
+
}, []);
|
|
5999
|
+
useEffect15(() => {
|
|
5212
6000
|
if (isTyping || isAiProcessing) {
|
|
5213
6001
|
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
5214
6002
|
}
|
|
5215
6003
|
}, [isTyping, isAiProcessing]);
|
|
5216
|
-
|
|
6004
|
+
useEffect15(() => {
|
|
5217
6005
|
if (!hasMore || !onLoadMore || !topRef.current) return;
|
|
5218
6006
|
const observer = new IntersectionObserver(
|
|
5219
6007
|
(entries) => {
|
|
@@ -5236,16 +6024,16 @@ function MessageList({
|
|
|
5236
6024
|
return () => observer.disconnect();
|
|
5237
6025
|
}, [hasMore, onLoadMore, isLoadingMore]);
|
|
5238
6026
|
if (items.length === 0) {
|
|
5239
|
-
return /* @__PURE__ */
|
|
6027
|
+
return /* @__PURE__ */ jsx16(
|
|
5240
6028
|
"div",
|
|
5241
6029
|
{
|
|
5242
6030
|
className: "hw-messages",
|
|
5243
6031
|
role: "log",
|
|
5244
6032
|
"aria-label": t("widget.aria_messages"),
|
|
5245
6033
|
"aria-live": "polite",
|
|
5246
|
-
children: /* @__PURE__ */
|
|
5247
|
-
/* @__PURE__ */
|
|
5248
|
-
/* @__PURE__ */
|
|
6034
|
+
children: /* @__PURE__ */ jsxs11("div", { className: "hw-empty", children: [
|
|
6035
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-empty-icon", children: /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx16("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) }),
|
|
6036
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-empty-text", children: t("widget.start_a_conversation") })
|
|
5249
6037
|
] })
|
|
5250
6038
|
}
|
|
5251
6039
|
);
|
|
@@ -5255,7 +6043,7 @@ function MessageList({
|
|
|
5255
6043
|
const yesterday = /* @__PURE__ */ new Date();
|
|
5256
6044
|
yesterday.setDate(yesterday.getDate() - 1);
|
|
5257
6045
|
const yesterdayKey = DATE_KEY_FMT.format(yesterday);
|
|
5258
|
-
return /* @__PURE__ */
|
|
6046
|
+
return /* @__PURE__ */ jsxs11(
|
|
5259
6047
|
"div",
|
|
5260
6048
|
{
|
|
5261
6049
|
ref: containerRef,
|
|
@@ -5264,15 +6052,15 @@ function MessageList({
|
|
|
5264
6052
|
"aria-label": t("widget.aria_messages"),
|
|
5265
6053
|
"aria-live": "polite",
|
|
5266
6054
|
children: [
|
|
5267
|
-
/* @__PURE__ */
|
|
5268
|
-
/* @__PURE__ */
|
|
5269
|
-
/* @__PURE__ */
|
|
5270
|
-
/* @__PURE__ */
|
|
6055
|
+
/* @__PURE__ */ jsx16("div", { ref: topRef, className: "hw-load-more-trigger", children: isLoadingMore && /* @__PURE__ */ jsxs11("div", { className: "hw-load-more-spinner", children: [
|
|
6056
|
+
/* @__PURE__ */ jsx16("div", {}),
|
|
6057
|
+
/* @__PURE__ */ jsx16("div", {}),
|
|
6058
|
+
/* @__PURE__ */ jsx16("div", {})
|
|
5271
6059
|
] }) }),
|
|
5272
6060
|
[
|
|
5273
6061
|
...items.map((item) => {
|
|
5274
6062
|
if (item.type === "event") {
|
|
5275
|
-
return /* @__PURE__ */
|
|
6063
|
+
return /* @__PURE__ */ jsx16(
|
|
5276
6064
|
EventCard,
|
|
5277
6065
|
{
|
|
5278
6066
|
text: item.text ?? ""
|
|
@@ -5287,16 +6075,16 @@ function MessageList({
|
|
|
5287
6075
|
const showDateSep = isNewBucket && dateKey !== todayKey;
|
|
5288
6076
|
const dateLabel = dateKey === yesterdayKey ? t("widget.yesterday") : displayDateFormatter(getLocale()).format(itemDate);
|
|
5289
6077
|
const sender = item.visitorId ? "visitor" : item.aiAgentId ? "ai" : "team";
|
|
5290
|
-
return /* @__PURE__ */
|
|
6078
|
+
return /* @__PURE__ */ jsxs11(
|
|
5291
6079
|
React.Fragment,
|
|
5292
6080
|
{
|
|
5293
6081
|
children: [
|
|
5294
|
-
showDateSep && /* @__PURE__ */
|
|
5295
|
-
/* @__PURE__ */
|
|
5296
|
-
/* @__PURE__ */
|
|
5297
|
-
/* @__PURE__ */
|
|
6082
|
+
showDateSep && /* @__PURE__ */ jsxs11("div", { className: "hw-date-sep", children: [
|
|
6083
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-date-sep-line" }),
|
|
6084
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-date-sep-text", children: dateLabel }),
|
|
6085
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-date-sep-line" })
|
|
5298
6086
|
] }),
|
|
5299
|
-
/* @__PURE__ */
|
|
6087
|
+
/* @__PURE__ */ jsx16(
|
|
5300
6088
|
MessageBubble,
|
|
5301
6089
|
{
|
|
5302
6090
|
text: item.text ?? "",
|
|
@@ -5305,7 +6093,8 @@ function MessageList({
|
|
|
5305
6093
|
metadata: parseTimelineItemMetadata(
|
|
5306
6094
|
item.metadata
|
|
5307
6095
|
),
|
|
5308
|
-
onQuickReplyTap: handleQuickReplyTap
|
|
6096
|
+
onQuickReplyTap: handleQuickReplyTap,
|
|
6097
|
+
onReveal: followReveal
|
|
5309
6098
|
}
|
|
5310
6099
|
)
|
|
5311
6100
|
]
|
|
@@ -5328,19 +6117,28 @@ function MessageList({
|
|
|
5328
6117
|
its place, .hw-msg replayed hw-msg-appear (styles.css:1326), and the
|
|
5329
6118
|
answer visibly animated in a second time just as it finished. */
|
|
5330
6119
|
...streamingText && activeConversationId ? [
|
|
5331
|
-
/* @__PURE__ */
|
|
6120
|
+
/* @__PURE__ */ jsxs11(React.Fragment, { children: [
|
|
5332
6121
|
null,
|
|
5333
|
-
/* @__PURE__ */
|
|
6122
|
+
/* @__PURE__ */ jsx16(
|
|
6123
|
+
MessageBubble,
|
|
6124
|
+
{
|
|
6125
|
+
text: streamingText,
|
|
6126
|
+
sender: "ai",
|
|
6127
|
+
parts: null,
|
|
6128
|
+
streaming: true,
|
|
6129
|
+
onReveal: followReveal
|
|
6130
|
+
}
|
|
6131
|
+
)
|
|
5334
6132
|
] }, streamingKeyFor(activeConversationId))
|
|
5335
6133
|
] : []
|
|
5336
6134
|
],
|
|
5337
6135
|
renderAfterMessages,
|
|
5338
|
-
(isAiProcessing || isTyping) && !streamingText && /* @__PURE__ */
|
|
5339
|
-
/* @__PURE__ */
|
|
5340
|
-
/* @__PURE__ */
|
|
5341
|
-
/* @__PURE__ */
|
|
6136
|
+
(isAiProcessing || isTyping) && !streamingText && /* @__PURE__ */ jsx16("div", { className: "hw-typing", children: /* @__PURE__ */ jsxs11("div", { className: "hw-typing-dots", children: [
|
|
6137
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" }),
|
|
6138
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" }),
|
|
6139
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" })
|
|
5342
6140
|
] }) }),
|
|
5343
|
-
/* @__PURE__ */
|
|
6141
|
+
/* @__PURE__ */ jsx16("div", { ref: bottomRef })
|
|
5344
6142
|
]
|
|
5345
6143
|
}
|
|
5346
6144
|
);
|
|
@@ -5358,8 +6156,8 @@ function EventCard({ text }) {
|
|
|
5358
6156
|
const data = parseEventData(text);
|
|
5359
6157
|
if (data) {
|
|
5360
6158
|
const message = data.action === "joined" ? t("widget.joined") : t("widget.left");
|
|
5361
|
-
return /* @__PURE__ */
|
|
5362
|
-
/* @__PURE__ */
|
|
6159
|
+
return /* @__PURE__ */ jsxs11("div", { className: "hw-event hw-event--card", children: [
|
|
6160
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-event-avatar", children: data.image ? /* @__PURE__ */ jsx16(
|
|
5363
6161
|
"img",
|
|
5364
6162
|
{
|
|
5365
6163
|
src: data.image,
|
|
@@ -5367,20 +6165,20 @@ function EventCard({ text }) {
|
|
|
5367
6165
|
className: "hw-event-avatar-img",
|
|
5368
6166
|
referrerPolicy: "no-referrer"
|
|
5369
6167
|
}
|
|
5370
|
-
) : /* @__PURE__ */
|
|
5371
|
-
/* @__PURE__ */
|
|
5372
|
-
/* @__PURE__ */
|
|
6168
|
+
) : /* @__PURE__ */ jsx16("span", { children: getInitials(data.name) }) }),
|
|
6169
|
+
/* @__PURE__ */ jsxs11("div", { className: "hw-event-body", children: [
|
|
6170
|
+
/* @__PURE__ */ jsx16("span", { className: "hw-event-name", children: data.name }),
|
|
5373
6171
|
" ",
|
|
5374
|
-
/* @__PURE__ */
|
|
6172
|
+
/* @__PURE__ */ jsx16("span", { className: "hw-event-action", children: message })
|
|
5375
6173
|
] })
|
|
5376
6174
|
] });
|
|
5377
6175
|
}
|
|
5378
|
-
return /* @__PURE__ */
|
|
6176
|
+
return /* @__PURE__ */ jsx16("div", { className: "hw-event", children: /* @__PURE__ */ jsx16("div", { className: "hw-event-text", children: text }) });
|
|
5379
6177
|
}
|
|
5380
6178
|
|
|
5381
6179
|
// src/themed/message-preview.tsx
|
|
5382
|
-
import { useEffect as
|
|
5383
|
-
import { Fragment as Fragment4, jsx as
|
|
6180
|
+
import { useEffect as useEffect16, useState as useState16 } from "react";
|
|
6181
|
+
import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
5384
6182
|
function MessagePreview({
|
|
5385
6183
|
onOpen,
|
|
5386
6184
|
avatar,
|
|
@@ -5395,8 +6193,8 @@ function MessagePreview({
|
|
|
5395
6193
|
const client = useWidgetClient();
|
|
5396
6194
|
const senderName = preview?.senderName || agentName;
|
|
5397
6195
|
const senderImage = preview?.senderImage || null;
|
|
5398
|
-
const [closing, setClosing] =
|
|
5399
|
-
|
|
6196
|
+
const [closing, setClosing] = useState16(false);
|
|
6197
|
+
useEffect16(() => {
|
|
5400
6198
|
if (!preview || preview.quickReplies) return;
|
|
5401
6199
|
if (autoDismissMs == null || autoDismissMs <= 0) return;
|
|
5402
6200
|
const timer = setTimeout(() => {
|
|
@@ -5437,7 +6235,7 @@ function MessagePreview({
|
|
|
5437
6235
|
);
|
|
5438
6236
|
const qr = preview.quickReplies && preview.quickReplies.options.length > 0 ? preview.quickReplies : null;
|
|
5439
6237
|
const placementClass = placement === "anchored" ? "hw-preview--anchored " : "";
|
|
5440
|
-
return /* @__PURE__ */
|
|
6238
|
+
return /* @__PURE__ */ jsxs12(
|
|
5441
6239
|
"div",
|
|
5442
6240
|
{
|
|
5443
6241
|
className: `hw-preview ${placementClass}${closing ? "hw-preview--closing" : ""}`,
|
|
@@ -5451,17 +6249,17 @@ function MessagePreview({
|
|
|
5451
6249
|
role: "button",
|
|
5452
6250
|
tabIndex: 0,
|
|
5453
6251
|
children: [
|
|
5454
|
-
/* @__PURE__ */
|
|
5455
|
-
/* @__PURE__ */
|
|
5456
|
-
/* @__PURE__ */
|
|
5457
|
-
/* @__PURE__ */
|
|
6252
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-preview-header", children: [
|
|
6253
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-preview-avatar", children: senderImage ? /* @__PURE__ */ jsx17("img", { src: senderImage, alt: "", referrerPolicy: "no-referrer" }) : avatar }),
|
|
6254
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-preview-name", children: senderName }),
|
|
6255
|
+
/* @__PURE__ */ jsx17(
|
|
5458
6256
|
"button",
|
|
5459
6257
|
{
|
|
5460
6258
|
type: "button",
|
|
5461
6259
|
className: "hw-preview-close",
|
|
5462
6260
|
onClick: handleClose,
|
|
5463
6261
|
"aria-label": t("widget.aria_dismiss"),
|
|
5464
|
-
children: /* @__PURE__ */
|
|
6262
|
+
children: /* @__PURE__ */ jsx17(XIcon, { size: 20 })
|
|
5465
6263
|
}
|
|
5466
6264
|
)
|
|
5467
6265
|
] }),
|
|
@@ -5470,11 +6268,11 @@ function MessagePreview({
|
|
|
5470
6268
|
consecutive messages, so two identical ones would already be a bug
|
|
5471
6269
|
upstream, and an index key hands React the wrong bubble to reuse the
|
|
5472
6270
|
moment a new message lands mid-animation. */
|
|
5473
|
-
/* @__PURE__ */
|
|
6271
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-preview-body", children: truncatePreviewBody(m.text) }, m.text)
|
|
5474
6272
|
)),
|
|
5475
|
-
qr && /* @__PURE__ */
|
|
5476
|
-
qr.prompt && /* @__PURE__ */
|
|
5477
|
-
/* @__PURE__ */
|
|
6273
|
+
qr && /* @__PURE__ */ jsxs12(Fragment4, { children: [
|
|
6274
|
+
qr.prompt && /* @__PURE__ */ jsx17("div", { className: "hw-preview-body", children: qr.prompt }),
|
|
6275
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-preview-quick-replies hw-quick-replies", children: qr.options.map((opt) => /* @__PURE__ */ jsx17(
|
|
5478
6276
|
"button",
|
|
5479
6277
|
{
|
|
5480
6278
|
type: "button",
|
|
@@ -5488,14 +6286,92 @@ function MessagePreview({
|
|
|
5488
6286
|
opt.id
|
|
5489
6287
|
)) })
|
|
5490
6288
|
] }),
|
|
5491
|
-
footer != null && footer !== false && /* @__PURE__ */
|
|
6289
|
+
footer != null && footer !== false && /* @__PURE__ */ jsx17("div", { className: "hw-preview-footer", children: footer })
|
|
5492
6290
|
]
|
|
5493
6291
|
}
|
|
5494
6292
|
);
|
|
5495
6293
|
}
|
|
5496
6294
|
|
|
6295
|
+
// src/themed/resolved-banner.tsx
|
|
6296
|
+
import { useId, useState as useState17 } from "react";
|
|
6297
|
+
|
|
6298
|
+
// src/themed/resolved-rating.ts
|
|
6299
|
+
function asCsatRating(value) {
|
|
6300
|
+
return value === "good" || value === "bad" ? value : null;
|
|
6301
|
+
}
|
|
6302
|
+
async function saveRating(client, store, conversationId, rating) {
|
|
6303
|
+
try {
|
|
6304
|
+
await client.widget.sendCsat.mutate({ conversationId, rating });
|
|
6305
|
+
} catch {
|
|
6306
|
+
return false;
|
|
6307
|
+
}
|
|
6308
|
+
store.setState((s) => ({
|
|
6309
|
+
conversations: s.conversations.map(
|
|
6310
|
+
(c) => c.id === conversationId ? { ...c, csatRating: rating } : c
|
|
6311
|
+
)
|
|
6312
|
+
}));
|
|
6313
|
+
return true;
|
|
6314
|
+
}
|
|
6315
|
+
|
|
6316
|
+
// src/themed/resolved-banner.tsx
|
|
6317
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
6318
|
+
var OPTIONS = [
|
|
6319
|
+
{ value: "good", labelKey: "widget.aria_good", Icon: ThumbsUpIcon },
|
|
6320
|
+
{ value: "bad", labelKey: "widget.aria_bad", Icon: ThumbsDownIcon }
|
|
6321
|
+
];
|
|
6322
|
+
function ResolvedBlock({
|
|
6323
|
+
rating,
|
|
6324
|
+
failed = false,
|
|
6325
|
+
onRate
|
|
6326
|
+
}) {
|
|
6327
|
+
const labelId = useId();
|
|
6328
|
+
return /* @__PURE__ */ jsxs13("div", { className: "hw-resolved", children: [
|
|
6329
|
+
/* @__PURE__ */ jsxs13("div", { className: "hw-resolved-status", role: "status", children: [
|
|
6330
|
+
/* @__PURE__ */ jsx18(CheckCircleIcon, { size: 16 }),
|
|
6331
|
+
/* @__PURE__ */ jsx18("span", { children: t("widget.resolved_text") })
|
|
6332
|
+
] }),
|
|
6333
|
+
/* @__PURE__ */ jsxs13("div", { className: "hw-csat", role: "group", "aria-labelledby": labelId, children: [
|
|
6334
|
+
/* @__PURE__ */ jsx18("span", { className: "hw-csat-label", id: labelId, children: rating ? t("widget.csat_thanks") : t("widget.csat_label") }),
|
|
6335
|
+
/* @__PURE__ */ jsx18("span", { className: "hw-csat-buttons", children: OPTIONS.filter((o) => !rating || o.value === rating).map(({ value, labelKey, Icon }) => /* @__PURE__ */ jsxs13(
|
|
6336
|
+
"button",
|
|
6337
|
+
{
|
|
6338
|
+
type: "button",
|
|
6339
|
+
className: "hw-csat-btn",
|
|
6340
|
+
"aria-pressed": rating === value,
|
|
6341
|
+
"aria-disabled": rating ? true : void 0,
|
|
6342
|
+
onClick: rating ? void 0 : () => onRate(value),
|
|
6343
|
+
children: [
|
|
6344
|
+
/* @__PURE__ */ jsx18(Icon, { size: 14 }),
|
|
6345
|
+
t(labelKey)
|
|
6346
|
+
]
|
|
6347
|
+
},
|
|
6348
|
+
value
|
|
6349
|
+
)) })
|
|
6350
|
+
] }),
|
|
6351
|
+
failed && !rating && /* @__PURE__ */ jsx18("div", { className: "hw-csat-error", role: "alert", children: t("widget.csat_error") })
|
|
6352
|
+
] });
|
|
6353
|
+
}
|
|
6354
|
+
function ResolvedBanner({ conversationId }) {
|
|
6355
|
+
const { client, store } = useWidgetContext();
|
|
6356
|
+
const saved = useWidgetStore(
|
|
6357
|
+
(s) => asCsatRating(s.conversations.find((c) => c.id === conversationId)?.csatRating)
|
|
6358
|
+
);
|
|
6359
|
+
const [pending, setPending] = useState17(null);
|
|
6360
|
+
const [failed, setFailed] = useState17(false);
|
|
6361
|
+
const rate = (rating) => {
|
|
6362
|
+
setPending(rating);
|
|
6363
|
+
setFailed(false);
|
|
6364
|
+
void saveRating(client, store, conversationId, rating).then((ok) => {
|
|
6365
|
+
if (ok) return;
|
|
6366
|
+
setPending(null);
|
|
6367
|
+
setFailed(true);
|
|
6368
|
+
});
|
|
6369
|
+
};
|
|
6370
|
+
return /* @__PURE__ */ jsx18(ResolvedBlock, { rating: saved ?? pending, failed, onRate: rate });
|
|
6371
|
+
}
|
|
6372
|
+
|
|
5497
6373
|
// src/themed/default-widget.tsx
|
|
5498
|
-
import { Fragment as Fragment5, jsx as
|
|
6374
|
+
import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
5499
6375
|
function resolveLabel2(label) {
|
|
5500
6376
|
if (!label.startsWith("widget.")) return label;
|
|
5501
6377
|
const resolved = t(label);
|
|
@@ -5507,7 +6383,7 @@ var EMPTY_CONTENT_TABS = [];
|
|
|
5507
6383
|
var DEFAULT_EN_WELCOME = "Hi there \u{1F44B}\nHow can we help?";
|
|
5508
6384
|
var DEFAULT_EN_SUBTITLE = "Usually replies in minutes";
|
|
5509
6385
|
function HelpwayMark({ className }) {
|
|
5510
|
-
return /* @__PURE__ */
|
|
6386
|
+
return /* @__PURE__ */ jsx19(
|
|
5511
6387
|
"svg",
|
|
5512
6388
|
{
|
|
5513
6389
|
className,
|
|
@@ -5517,7 +6393,7 @@ function HelpwayMark({ className }) {
|
|
|
5517
6393
|
fill: "none",
|
|
5518
6394
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5519
6395
|
"aria-hidden": "true",
|
|
5520
|
-
children: /* @__PURE__ */
|
|
6396
|
+
children: /* @__PURE__ */ jsx19(
|
|
5521
6397
|
"path",
|
|
5522
6398
|
{
|
|
5523
6399
|
d: "M28.7 0H12.8L0 12.8V28.7L12.8 41.5H28.7L41.5 28.7V12.8L28.7 0ZM15 28.9L6.80002 20.7L15 12.5C18.1 9.4 23.2 9.4 26.3 12.5L34.5 20.7L26.3 28.9C23.2 32 18.2 32 15 28.9Z",
|
|
@@ -5544,7 +6420,7 @@ function WidgetLogo({
|
|
|
5544
6420
|
});
|
|
5545
6421
|
const logoClass = forceAgent ? "hw-agent-img--logo" : "";
|
|
5546
6422
|
if (!forceAgent && activeId && assignee?.assigneeImage) {
|
|
5547
|
-
return /* @__PURE__ */
|
|
6423
|
+
return /* @__PURE__ */ jsx19(
|
|
5548
6424
|
"img",
|
|
5549
6425
|
{
|
|
5550
6426
|
src: assignee.assigneeImage,
|
|
@@ -5555,7 +6431,7 @@ function WidgetLogo({
|
|
|
5555
6431
|
);
|
|
5556
6432
|
}
|
|
5557
6433
|
if (customAvatar) {
|
|
5558
|
-
return /* @__PURE__ */
|
|
6434
|
+
return /* @__PURE__ */ jsx19(
|
|
5559
6435
|
"span",
|
|
5560
6436
|
{
|
|
5561
6437
|
className: `hw-agent-icon hw-agent-custom ${className ?? ""}`,
|
|
@@ -5565,7 +6441,7 @@ function WidgetLogo({
|
|
|
5565
6441
|
);
|
|
5566
6442
|
}
|
|
5567
6443
|
if (agentConfig?.avatarUrl) {
|
|
5568
|
-
return /* @__PURE__ */
|
|
6444
|
+
return /* @__PURE__ */ jsx19(
|
|
5569
6445
|
"img",
|
|
5570
6446
|
{
|
|
5571
6447
|
src: agentConfig.avatarUrl,
|
|
@@ -5575,7 +6451,7 @@ function WidgetLogo({
|
|
|
5575
6451
|
);
|
|
5576
6452
|
}
|
|
5577
6453
|
if (agentConfig?.avatarPreset) {
|
|
5578
|
-
return /* @__PURE__ */
|
|
6454
|
+
return /* @__PURE__ */ jsx19(
|
|
5579
6455
|
"div",
|
|
5580
6456
|
{
|
|
5581
6457
|
className: `hw-agent-icon ${className ?? ""}`,
|
|
@@ -5586,20 +6462,20 @@ function WidgetLogo({
|
|
|
5586
6462
|
justifyContent: "center",
|
|
5587
6463
|
borderRadius: 8
|
|
5588
6464
|
},
|
|
5589
|
-
children: /* @__PURE__ */
|
|
6465
|
+
children: /* @__PURE__ */ jsx19(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
|
|
5590
6466
|
}
|
|
5591
6467
|
);
|
|
5592
6468
|
}
|
|
5593
6469
|
if (logoUrl) {
|
|
5594
|
-
return /* @__PURE__ */
|
|
6470
|
+
return /* @__PURE__ */ jsx19("img", { src: logoUrl, alt: "", className: `hw-agent-img hw-agent-img--logo ${className ?? ""}` });
|
|
5595
6471
|
}
|
|
5596
|
-
return /* @__PURE__ */
|
|
6472
|
+
return /* @__PURE__ */ jsx19(HelpwayMark, { className });
|
|
5597
6473
|
}
|
|
5598
6474
|
function LauncherIcon({ className }) {
|
|
5599
6475
|
const agentConfig = useWidgetStore((s) => s.agentConfig);
|
|
5600
|
-
const [imgLoaded, setImgLoaded] =
|
|
6476
|
+
const [imgLoaded, setImgLoaded] = useState18(false);
|
|
5601
6477
|
const imgSrc = agentConfig?.launcherIconUrl ?? null;
|
|
5602
|
-
|
|
6478
|
+
useEffect17(() => {
|
|
5603
6479
|
if (!imgSrc) return;
|
|
5604
6480
|
setImgLoaded(false);
|
|
5605
6481
|
const img = new Image();
|
|
@@ -5612,7 +6488,7 @@ function LauncherIcon({ className }) {
|
|
|
5612
6488
|
img.onerror = () => setImgLoaded(true);
|
|
5613
6489
|
}, [imgSrc]);
|
|
5614
6490
|
if (imgSrc) {
|
|
5615
|
-
return /* @__PURE__ */
|
|
6491
|
+
return /* @__PURE__ */ jsx19(
|
|
5616
6492
|
"img",
|
|
5617
6493
|
{
|
|
5618
6494
|
src: imgSrc,
|
|
@@ -5622,7 +6498,7 @@ function LauncherIcon({ className }) {
|
|
|
5622
6498
|
}
|
|
5623
6499
|
);
|
|
5624
6500
|
}
|
|
5625
|
-
return /* @__PURE__ */
|
|
6501
|
+
return /* @__PURE__ */ jsx19(WidgetLogo, { className, forceAgent: true });
|
|
5626
6502
|
}
|
|
5627
6503
|
var PRESET_SVG = {
|
|
5628
6504
|
// Helpway brand mark — octagonal chamfer with stylized "W" inside.
|
|
@@ -5681,7 +6557,7 @@ function AgentPresetIcon({ presetId }) {
|
|
|
5681
6557
|
const svgContent = PRESET_SVG[presetId] ?? PRESET_SVG.sparkle;
|
|
5682
6558
|
return (
|
|
5683
6559
|
// biome-ignore lint: trusted static SVG content from our icon library
|
|
5684
|
-
/* @__PURE__ */
|
|
6560
|
+
/* @__PURE__ */ jsx19(
|
|
5685
6561
|
"svg",
|
|
5686
6562
|
{
|
|
5687
6563
|
viewBox: "0 0 24 24",
|
|
@@ -5694,8 +6570,8 @@ function AgentPresetIcon({ presetId }) {
|
|
|
5694
6570
|
);
|
|
5695
6571
|
}
|
|
5696
6572
|
function CloseGlyph({ docked }) {
|
|
5697
|
-
if (!docked) return /* @__PURE__ */
|
|
5698
|
-
return /* @__PURE__ */
|
|
6573
|
+
if (!docked) return /* @__PURE__ */ jsx19(XIcon, { size: 20 });
|
|
6574
|
+
return /* @__PURE__ */ jsx19(
|
|
5699
6575
|
"svg",
|
|
5700
6576
|
{
|
|
5701
6577
|
width: "20",
|
|
@@ -5707,7 +6583,7 @@ function CloseGlyph({ docked }) {
|
|
|
5707
6583
|
strokeLinecap: "round",
|
|
5708
6584
|
strokeLinejoin: "round",
|
|
5709
6585
|
"aria-hidden": "true",
|
|
5710
|
-
children: /* @__PURE__ */
|
|
6586
|
+
children: /* @__PURE__ */ jsx19("path", { d: "M6 9.5 12 15.5 18 9.5" })
|
|
5711
6587
|
}
|
|
5712
6588
|
);
|
|
5713
6589
|
}
|
|
@@ -5720,7 +6596,15 @@ function DefaultWidget({
|
|
|
5720
6596
|
const { isReady, website, agentConfig } = useWidget();
|
|
5721
6597
|
const customAvatar = useContext2(AgentAvatarContext);
|
|
5722
6598
|
useI18n();
|
|
5723
|
-
const {
|
|
6599
|
+
const {
|
|
6600
|
+
client,
|
|
6601
|
+
store,
|
|
6602
|
+
hasBootstrapError,
|
|
6603
|
+
wsDisconnected,
|
|
6604
|
+
wsLost,
|
|
6605
|
+
retryConnection,
|
|
6606
|
+
retryBootstrap
|
|
6607
|
+
} = useWidgetContext();
|
|
5724
6608
|
const { conversations, create, isCreating, setActiveConversation } = useConversations();
|
|
5725
6609
|
const activeId = useWidgetStore((s) => s.activeConversationId);
|
|
5726
6610
|
const isDismissed = useWidgetStore((s) => s.isDismissed);
|
|
@@ -5739,22 +6623,22 @@ function DefaultWidget({
|
|
|
5739
6623
|
});
|
|
5740
6624
|
}
|
|
5741
6625
|
const storeIsOpen = useWidgetStore((s) => s.isOpen);
|
|
5742
|
-
const [isClosing, setIsClosing] =
|
|
6626
|
+
const [isClosing, setIsClosing] = useState18(false);
|
|
5743
6627
|
const isOpen = storeIsOpen || isClosing;
|
|
5744
|
-
const [activeTab, setActiveTab] =
|
|
5745
|
-
const [subView, setSubView] =
|
|
5746
|
-
const [newText, setNewText] =
|
|
5747
|
-
const [contentDetailSlug, setContentDetailSlug] =
|
|
5748
|
-
const [contentCategoryName, setContentCategoryName] =
|
|
5749
|
-
const prevActiveIdRef =
|
|
5750
|
-
|
|
6628
|
+
const [activeTab, setActiveTab] = useState18("home");
|
|
6629
|
+
const [subView, setSubView] = useState18(null);
|
|
6630
|
+
const [newText, setNewText] = useState18("");
|
|
6631
|
+
const [contentDetailSlug, setContentDetailSlug] = useState18(null);
|
|
6632
|
+
const [contentCategoryName, setContentCategoryName] = useState18(null);
|
|
6633
|
+
const prevActiveIdRef = useRef18(activeId);
|
|
6634
|
+
useEffect17(() => {
|
|
5751
6635
|
if (activeId && activeId !== prevActiveIdRef.current && subView !== "conversation") {
|
|
5752
6636
|
setSubView("conversation");
|
|
5753
6637
|
}
|
|
5754
6638
|
prevActiveIdRef.current = activeId;
|
|
5755
6639
|
}, [activeId, subView]);
|
|
5756
6640
|
const prefill = useWidgetStore((s) => s.newConversationPrefill);
|
|
5757
|
-
|
|
6641
|
+
useEffect17(() => {
|
|
5758
6642
|
if (prefill !== null) {
|
|
5759
6643
|
if (prefill.length > 0) setNewText(prefill);
|
|
5760
6644
|
setSubView("new");
|
|
@@ -5762,7 +6646,7 @@ function DefaultWidget({
|
|
|
5762
6646
|
store.getState().setNewConversationPrefill(null);
|
|
5763
6647
|
}
|
|
5764
6648
|
}, [prefill, store]);
|
|
5765
|
-
const closeTimerRef =
|
|
6649
|
+
const closeTimerRef = useRef18(void 0);
|
|
5766
6650
|
const welcomeMsgRaw = agentConfig?.welcomeMessage;
|
|
5767
6651
|
const welcomeIsFactoryDefault = !welcomeMsgRaw || welcomeMsgRaw === DEFAULT_EN_WELCOME;
|
|
5768
6652
|
const welcomeMessage = welcomeMsgRaw?.startsWith("widget.") ? t(welcomeMsgRaw) : welcomeIsFactoryDefault ? t("widget.welcome_message") : welcomeMsgRaw;
|
|
@@ -5799,8 +6683,8 @@ function DefaultWidget({
|
|
|
5799
6683
|
setActiveConversation(tempId);
|
|
5800
6684
|
setSubView("conversation");
|
|
5801
6685
|
}, [agentConfig?.id, store, setActiveConversation, welcomeMessage]);
|
|
5802
|
-
const didAutoOpenRef =
|
|
5803
|
-
|
|
6686
|
+
const didAutoOpenRef = useRef18(false);
|
|
6687
|
+
useEffect17(() => {
|
|
5804
6688
|
if (!isOpen) {
|
|
5805
6689
|
didAutoOpenRef.current = false;
|
|
5806
6690
|
return;
|
|
@@ -5813,11 +6697,11 @@ function DefaultWidget({
|
|
|
5813
6697
|
else openNewConversation();
|
|
5814
6698
|
}, [isOpen, isReady, subView, conversations, openConversation, openNewConversation]);
|
|
5815
6699
|
const dockComposer = useComposer(activeId);
|
|
5816
|
-
const dockRef =
|
|
5817
|
-
|
|
6700
|
+
const dockRef = useRef18(dockComposer);
|
|
6701
|
+
useEffect17(() => {
|
|
5818
6702
|
dockRef.current = dockComposer;
|
|
5819
6703
|
});
|
|
5820
|
-
const pendingDockText =
|
|
6704
|
+
const pendingDockText = useRef18(null);
|
|
5821
6705
|
const reopenFromDock = useCallback14(() => {
|
|
5822
6706
|
const state = store.getState();
|
|
5823
6707
|
if (state.isOpen) return;
|
|
@@ -5847,14 +6731,14 @@ function DefaultWidget({
|
|
|
5847
6731
|
},
|
|
5848
6732
|
[activeId, openNewConversation, store]
|
|
5849
6733
|
);
|
|
5850
|
-
|
|
6734
|
+
useEffect17(() => {
|
|
5851
6735
|
if (!activeId || pendingDockText.current == null) return;
|
|
5852
6736
|
const text = pendingDockText.current;
|
|
5853
6737
|
pendingDockText.current = null;
|
|
5854
6738
|
void dockRef.current.submit({ text, conversationId: activeId });
|
|
5855
6739
|
}, [activeId]);
|
|
5856
|
-
const [menuOpen, setMenuOpen] =
|
|
5857
|
-
|
|
6740
|
+
const [menuOpen, setMenuOpen] = useState18(false);
|
|
6741
|
+
useEffect17(() => {
|
|
5858
6742
|
if (!menuOpen) return;
|
|
5859
6743
|
const close = () => setMenuOpen(false);
|
|
5860
6744
|
const onKey = (event) => {
|
|
@@ -5909,7 +6793,7 @@ function DefaultWidget({
|
|
|
5909
6793
|
[activeTab, subView, activeId, setActiveConversation]
|
|
5910
6794
|
);
|
|
5911
6795
|
const pendingContentDetail = useWidgetStore((s) => s.pendingContentDetail);
|
|
5912
|
-
|
|
6796
|
+
useEffect17(() => {
|
|
5913
6797
|
if (!pendingContentDetail) return;
|
|
5914
6798
|
const { slug, tabId } = pendingContentDetail;
|
|
5915
6799
|
markEntrySeen(slug);
|
|
@@ -5961,11 +6845,11 @@ function DefaultWidget({
|
|
|
5961
6845
|
setSubView("conversation");
|
|
5962
6846
|
}
|
|
5963
6847
|
}, [newText, isCreating, create]);
|
|
5964
|
-
const windowRef =
|
|
5965
|
-
const bubbleRef =
|
|
5966
|
-
const tabStateRef =
|
|
5967
|
-
const touchStartY =
|
|
5968
|
-
const touchDeltaY =
|
|
6848
|
+
const windowRef = useRef18(null);
|
|
6849
|
+
const bubbleRef = useRef18(null);
|
|
6850
|
+
const tabStateRef = useRef18({});
|
|
6851
|
+
const touchStartY = useRef18(0);
|
|
6852
|
+
const touchDeltaY = useRef18(0);
|
|
5969
6853
|
const handleTouchStart = useCallback14((e) => {
|
|
5970
6854
|
touchStartY.current = e.touches[0]?.clientY ?? 0;
|
|
5971
6855
|
touchDeltaY.current = 0;
|
|
@@ -5987,7 +6871,7 @@ function DefaultWidget({
|
|
|
5987
6871
|
handleClose();
|
|
5988
6872
|
}
|
|
5989
6873
|
}, [handleClose]);
|
|
5990
|
-
|
|
6874
|
+
useEffect17(() => {
|
|
5991
6875
|
if (!isOpen || !windowRef.current) return;
|
|
5992
6876
|
const vv = window.visualViewport;
|
|
5993
6877
|
if (!vv) return;
|
|
@@ -6006,7 +6890,7 @@ function DefaultWidget({
|
|
|
6006
6890
|
win.removeAttribute("data-hw-keyboard");
|
|
6007
6891
|
};
|
|
6008
6892
|
}, [isOpen]);
|
|
6009
|
-
|
|
6893
|
+
useEffect17(() => {
|
|
6010
6894
|
if (!isOpen || !windowRef.current) return;
|
|
6011
6895
|
const win = windowRef.current;
|
|
6012
6896
|
const handleKeyDown = (e) => {
|
|
@@ -6022,7 +6906,7 @@ function DefaultWidget({
|
|
|
6022
6906
|
win.addEventListener("keydown", handleKeyDown);
|
|
6023
6907
|
return () => win.removeEventListener("keydown", handleKeyDown);
|
|
6024
6908
|
}, [isOpen, subView, handleClose, goBack]);
|
|
6025
|
-
|
|
6909
|
+
useEffect17(() => {
|
|
6026
6910
|
if (!isOpen || !windowRef.current || hideLauncher) return;
|
|
6027
6911
|
const win = windowRef.current;
|
|
6028
6912
|
const getFocusable = () => win.querySelectorAll(
|
|
@@ -6065,7 +6949,7 @@ function DefaultWidget({
|
|
|
6065
6949
|
const launcherStyle = agentConfig?.launcherStyle ?? "icon";
|
|
6066
6950
|
const bubbleStyle = agentConfig?.bubbleStyle ?? "rounded";
|
|
6067
6951
|
const hasUploadedAvatar = !!agentConfig?.avatarUrl;
|
|
6068
|
-
return /* @__PURE__ */
|
|
6952
|
+
return /* @__PURE__ */ jsxs14(
|
|
6069
6953
|
"div",
|
|
6070
6954
|
{
|
|
6071
6955
|
className: "hw-widget",
|
|
@@ -6081,7 +6965,7 @@ function DefaultWidget({
|
|
|
6081
6965
|
"--hw-window-left": widgetPosition === "bottom-left" ? "0" : "auto"
|
|
6082
6966
|
},
|
|
6083
6967
|
children: [
|
|
6084
|
-
placement === "docked" && isReady && /* @__PURE__ */
|
|
6968
|
+
placement === "docked" && isReady && /* @__PURE__ */ jsx19(
|
|
6085
6969
|
DockedBar,
|
|
6086
6970
|
{
|
|
6087
6971
|
value: dockComposer.text,
|
|
@@ -6096,19 +6980,20 @@ function DefaultWidget({
|
|
|
6096
6980
|
onReopen: reopenFromDock,
|
|
6097
6981
|
sendError: dockComposer.sendError,
|
|
6098
6982
|
onClearSendError: dockComposer.clearSendError,
|
|
6099
|
-
leading: customAvatar
|
|
6983
|
+
leading: customAvatar,
|
|
6984
|
+
placeholder: conversations.find((c) => c.id === activeId)?.status === "resolved" ? t("widget.placeholder_resolved") : void 0
|
|
6100
6985
|
}
|
|
6101
6986
|
),
|
|
6102
|
-
isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */
|
|
6103
|
-
/* @__PURE__ */
|
|
6104
|
-
/* @__PURE__ */
|
|
6105
|
-
/* @__PURE__ */
|
|
6987
|
+
isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */ jsx19("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-loading", children: [
|
|
6988
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
|
|
6989
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } }),
|
|
6990
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } })
|
|
6106
6991
|
] }) }),
|
|
6107
|
-
isOpen && hasBootstrapError && /* @__PURE__ */
|
|
6108
|
-
/* @__PURE__ */
|
|
6109
|
-
/* @__PURE__ */
|
|
6992
|
+
isOpen && hasBootstrapError && /* @__PURE__ */ jsx19("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs14("div", { className: "hw-bootstrap-error", children: [
|
|
6993
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-bootstrap-error-text", children: t("widget.error_desc") }),
|
|
6994
|
+
/* @__PURE__ */ jsx19("button", { type: "button", className: "hw-bootstrap-error-retry", onClick: retryBootstrap, children: t("widget.retry") })
|
|
6110
6995
|
] }) }),
|
|
6111
|
-
isOpen && isReady && /* @__PURE__ */
|
|
6996
|
+
isOpen && isReady && /* @__PURE__ */ jsxs14(
|
|
6112
6997
|
"div",
|
|
6113
6998
|
{
|
|
6114
6999
|
ref: windowRef,
|
|
@@ -6120,24 +7005,28 @@ function DefaultWidget({
|
|
|
6120
7005
|
onTouchMove: handleTouchMove,
|
|
6121
7006
|
onTouchEnd: handleTouchEnd,
|
|
6122
7007
|
children: [
|
|
6123
|
-
/* @__PURE__ */
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
7008
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-drag-handle", children: /* @__PURE__ */ jsx19("div", { className: "hw-drag-handle-pill" }) }),
|
|
7009
|
+
/* @__PURE__ */ jsx19(
|
|
7010
|
+
ConnectionStrip,
|
|
7011
|
+
{
|
|
7012
|
+
reconnecting: wsDisconnected,
|
|
7013
|
+
lost: wsLost,
|
|
7014
|
+
onRetry: retryConnection
|
|
7015
|
+
}
|
|
7016
|
+
),
|
|
6128
7017
|
(subView === "content-detail" || subView === "content-category") && (() => {
|
|
6129
7018
|
const tabId = activeTab.replace("content:", "");
|
|
6130
7019
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6131
7020
|
const headerTitle = subView === "content-category" && contentCategoryName ? contentCategoryName : contentTab?.label ? resolveLabel2(contentTab.label) : t("widget.content");
|
|
6132
|
-
return /* @__PURE__ */
|
|
6133
|
-
/* @__PURE__ */
|
|
7021
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
|
|
7022
|
+
/* @__PURE__ */ jsx19(
|
|
6134
7023
|
"button",
|
|
6135
7024
|
{
|
|
6136
7025
|
type: "button",
|
|
6137
7026
|
className: "hw-header-back",
|
|
6138
7027
|
onClick: goBack,
|
|
6139
7028
|
"aria-label": t("widget.aria_back"),
|
|
6140
|
-
children: /* @__PURE__ */
|
|
7029
|
+
children: /* @__PURE__ */ jsx19(
|
|
6141
7030
|
"svg",
|
|
6142
7031
|
{
|
|
6143
7032
|
viewBox: "0 0 24 24",
|
|
@@ -6146,33 +7035,33 @@ function DefaultWidget({
|
|
|
6146
7035
|
strokeWidth: 2,
|
|
6147
7036
|
strokeLinecap: "round",
|
|
6148
7037
|
strokeLinejoin: "round",
|
|
6149
|
-
children: /* @__PURE__ */
|
|
7038
|
+
children: /* @__PURE__ */ jsx19("path", { d: "M15 18l-6-6 6-6" })
|
|
6150
7039
|
}
|
|
6151
7040
|
)
|
|
6152
7041
|
}
|
|
6153
7042
|
),
|
|
6154
|
-
/* @__PURE__ */
|
|
6155
|
-
/* @__PURE__ */
|
|
7043
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: headerTitle }),
|
|
7044
|
+
/* @__PURE__ */ jsx19(
|
|
6156
7045
|
"button",
|
|
6157
7046
|
{
|
|
6158
7047
|
type: "button",
|
|
6159
7048
|
className: "hw-header-close",
|
|
6160
7049
|
onClick: handleClose,
|
|
6161
7050
|
"aria-label": t("widget.aria_close"),
|
|
6162
|
-
children: /* @__PURE__ */
|
|
7051
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6163
7052
|
}
|
|
6164
7053
|
)
|
|
6165
7054
|
] });
|
|
6166
7055
|
})(),
|
|
6167
|
-
subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */
|
|
6168
|
-
/* @__PURE__ */
|
|
7056
|
+
subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--sub", children: [
|
|
7057
|
+
/* @__PURE__ */ jsx19(
|
|
6169
7058
|
"button",
|
|
6170
7059
|
{
|
|
6171
7060
|
type: "button",
|
|
6172
7061
|
className: "hw-header-back",
|
|
6173
7062
|
onClick: goBack,
|
|
6174
7063
|
"aria-label": t("widget.aria_back"),
|
|
6175
|
-
children: /* @__PURE__ */
|
|
7064
|
+
children: /* @__PURE__ */ jsx19(
|
|
6176
7065
|
"svg",
|
|
6177
7066
|
{
|
|
6178
7067
|
viewBox: "0 0 24 24",
|
|
@@ -6181,17 +7070,17 @@ function DefaultWidget({
|
|
|
6181
7070
|
strokeWidth: 2,
|
|
6182
7071
|
strokeLinecap: "round",
|
|
6183
7072
|
strokeLinejoin: "round",
|
|
6184
|
-
children: /* @__PURE__ */
|
|
7073
|
+
children: /* @__PURE__ */ jsx19("path", { d: "M15 18l-6-6 6-6" })
|
|
6185
7074
|
}
|
|
6186
7075
|
)
|
|
6187
7076
|
}
|
|
6188
7077
|
),
|
|
6189
|
-
/* @__PURE__ */
|
|
6190
|
-
/* @__PURE__ */
|
|
7078
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-header-identity", children: [
|
|
7079
|
+
/* @__PURE__ */ jsx19(
|
|
6191
7080
|
"div",
|
|
6192
7081
|
{
|
|
6193
7082
|
className: `hw-header-bot-icon${hasTeamAgent ? " hw-header-bot-icon--team" : ""}`,
|
|
6194
|
-
children: hasTeamAgent && humanImage ? /* @__PURE__ */
|
|
7083
|
+
children: hasTeamAgent && humanImage ? /* @__PURE__ */ jsx19(
|
|
6195
7084
|
"img",
|
|
6196
7085
|
{
|
|
6197
7086
|
src: humanImage,
|
|
@@ -6199,16 +7088,16 @@ function DefaultWidget({
|
|
|
6199
7088
|
className: "hw-header-agent-img",
|
|
6200
7089
|
referrerPolicy: "no-referrer"
|
|
6201
7090
|
}
|
|
6202
|
-
) : hasTeamAgent ? /* @__PURE__ */
|
|
7091
|
+
) : hasTeamAgent ? /* @__PURE__ */ jsx19("span", { className: "hw-header-agent-initials", children: headerName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx19(WidgetLogo, {})
|
|
6203
7092
|
}
|
|
6204
7093
|
),
|
|
6205
|
-
/* @__PURE__ */
|
|
6206
|
-
/* @__PURE__ */
|
|
6207
|
-
/* @__PURE__ */
|
|
7094
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-header-info", children: [
|
|
7095
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-name", children: headerName }),
|
|
7096
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-status", children: subtitleText })
|
|
6208
7097
|
] })
|
|
6209
7098
|
] }),
|
|
6210
|
-
/* @__PURE__ */
|
|
6211
|
-
/* @__PURE__ */
|
|
7099
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-header-actions", children: [
|
|
7100
|
+
/* @__PURE__ */ jsx19(
|
|
6212
7101
|
"button",
|
|
6213
7102
|
{
|
|
6214
7103
|
type: "button",
|
|
@@ -6220,21 +7109,21 @@ function DefaultWidget({
|
|
|
6220
7109
|
event.stopPropagation();
|
|
6221
7110
|
setMenuOpen((open) => !open);
|
|
6222
7111
|
},
|
|
6223
|
-
children: /* @__PURE__ */
|
|
7112
|
+
children: /* @__PURE__ */ jsx19(DotsIcon, { size: 18 })
|
|
6224
7113
|
}
|
|
6225
7114
|
),
|
|
6226
|
-
/* @__PURE__ */
|
|
7115
|
+
/* @__PURE__ */ jsx19(
|
|
6227
7116
|
"button",
|
|
6228
7117
|
{
|
|
6229
7118
|
type: "button",
|
|
6230
7119
|
className: "hw-header-close",
|
|
6231
7120
|
onClick: handleClose,
|
|
6232
7121
|
"aria-label": t("widget.aria_close"),
|
|
6233
|
-
children: /* @__PURE__ */
|
|
7122
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6234
7123
|
}
|
|
6235
7124
|
),
|
|
6236
|
-
menuOpen && /* @__PURE__ */
|
|
6237
|
-
conversations.length > 0 && /* @__PURE__ */
|
|
7125
|
+
menuOpen && /* @__PURE__ */ jsxs14("div", { className: "hw-header-menu", role: "menu", children: [
|
|
7126
|
+
conversations.length > 0 && /* @__PURE__ */ jsx19("div", { className: "hw-header-menu-convs", children: conversations.slice(0, 3).map((conv) => /* @__PURE__ */ jsxs14(
|
|
6238
7127
|
"button",
|
|
6239
7128
|
{
|
|
6240
7129
|
type: "button",
|
|
@@ -6246,16 +7135,16 @@ function DefaultWidget({
|
|
|
6246
7135
|
openConversation(conv.id);
|
|
6247
7136
|
},
|
|
6248
7137
|
children: [
|
|
6249
|
-
/* @__PURE__ */
|
|
6250
|
-
/* @__PURE__ */
|
|
6251
|
-
conv.lastMessageAt && /* @__PURE__ */
|
|
7138
|
+
/* @__PURE__ */ jsxs14("span", { className: "hw-header-menu-conv-top", children: [
|
|
7139
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-name", children: conversationIdentity(conv).humanName ?? companyName }),
|
|
7140
|
+
conv.lastMessageAt && /* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-time", children: formatRelativeTime(conv.lastMessageAt) })
|
|
6252
7141
|
] }),
|
|
6253
|
-
/* @__PURE__ */
|
|
7142
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-preview", children: conv.lastMessageText ?? t("widget.no_preview") })
|
|
6254
7143
|
]
|
|
6255
7144
|
},
|
|
6256
7145
|
conv.id
|
|
6257
7146
|
)) }),
|
|
6258
|
-
/* @__PURE__ */
|
|
7147
|
+
/* @__PURE__ */ jsxs14(
|
|
6259
7148
|
"button",
|
|
6260
7149
|
{
|
|
6261
7150
|
type: "button",
|
|
@@ -6265,7 +7154,7 @@ function DefaultWidget({
|
|
|
6265
7154
|
openNewConversation();
|
|
6266
7155
|
},
|
|
6267
7156
|
children: [
|
|
6268
|
-
/* @__PURE__ */
|
|
7157
|
+
/* @__PURE__ */ jsx19(NewChatIcon, { size: 16 }),
|
|
6269
7158
|
t("widget.new_conversation")
|
|
6270
7159
|
]
|
|
6271
7160
|
}
|
|
@@ -6273,43 +7162,43 @@ function DefaultWidget({
|
|
|
6273
7162
|
] })
|
|
6274
7163
|
] })
|
|
6275
7164
|
] }),
|
|
6276
|
-
subView === null && activeTab === "home" && /* @__PURE__ */
|
|
6277
|
-
/* @__PURE__ */
|
|
6278
|
-
/* @__PURE__ */
|
|
6279
|
-
/* @__PURE__ */
|
|
6280
|
-
/* @__PURE__ */
|
|
7165
|
+
subView === null && activeTab === "home" && /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
7166
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-hero", children: [
|
|
7167
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-hero-top", children: [
|
|
7168
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-hero-bot-icon", children: /* @__PURE__ */ jsx19(WidgetLogo, {}) }),
|
|
7169
|
+
/* @__PURE__ */ jsx19(
|
|
6281
7170
|
"button",
|
|
6282
7171
|
{
|
|
6283
7172
|
type: "button",
|
|
6284
7173
|
className: "hw-hero-close",
|
|
6285
7174
|
onClick: handleClose,
|
|
6286
7175
|
"aria-label": t("widget.aria_close"),
|
|
6287
|
-
children: /* @__PURE__ */
|
|
7176
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6288
7177
|
}
|
|
6289
7178
|
)
|
|
6290
7179
|
] }),
|
|
6291
|
-
/* @__PURE__ */
|
|
7180
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs14(
|
|
6292
7181
|
"span",
|
|
6293
7182
|
{
|
|
6294
7183
|
className: i === 0 ? "hw-hero-greeting-name" : "hw-hero-greeting-question",
|
|
6295
7184
|
children: [
|
|
6296
|
-
i > 0 && /* @__PURE__ */
|
|
7185
|
+
i > 0 && /* @__PURE__ */ jsx19("br", {}),
|
|
6297
7186
|
line
|
|
6298
7187
|
]
|
|
6299
7188
|
},
|
|
6300
7189
|
i
|
|
6301
7190
|
)) }),
|
|
6302
|
-
/* @__PURE__ */
|
|
7191
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-hero-subtitle", children: subtitleText })
|
|
6303
7192
|
] }),
|
|
6304
|
-
/* @__PURE__ */
|
|
6305
|
-
/* @__PURE__ */
|
|
6306
|
-
/* @__PURE__ */
|
|
6307
|
-
/* @__PURE__ */
|
|
6308
|
-
/* @__PURE__ */
|
|
7193
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-sheet", children: /* @__PURE__ */ jsxs14("div", { className: "hw-sheet-inner", children: [
|
|
7194
|
+
/* @__PURE__ */ jsxs14("button", { type: "button", className: "hw-card", onClick: openNewConversation, children: [
|
|
7195
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-card-body", children: [
|
|
7196
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-card-title", children: t("widget.send_us_message") }),
|
|
7197
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-card-meta", children: t("widget.reply_time") })
|
|
6309
7198
|
] }),
|
|
6310
|
-
/* @__PURE__ */
|
|
7199
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx19(SendIcon, {}) })
|
|
6311
7200
|
] }),
|
|
6312
|
-
announcementTabs.length > 0 && /* @__PURE__ */
|
|
7201
|
+
announcementTabs.length > 0 && /* @__PURE__ */ jsx19(
|
|
6313
7202
|
WhatsNewCard,
|
|
6314
7203
|
{
|
|
6315
7204
|
getUnseenEntries,
|
|
@@ -6325,7 +7214,7 @@ function DefaultWidget({
|
|
|
6325
7214
|
}
|
|
6326
7215
|
}
|
|
6327
7216
|
),
|
|
6328
|
-
/* @__PURE__ */
|
|
7217
|
+
/* @__PURE__ */ jsx19(
|
|
6329
7218
|
HomeView,
|
|
6330
7219
|
{
|
|
6331
7220
|
conversations,
|
|
@@ -6335,17 +7224,17 @@ function DefaultWidget({
|
|
|
6335
7224
|
)
|
|
6336
7225
|
] }) })
|
|
6337
7226
|
] }),
|
|
6338
|
-
subView === null && activeTab === "messages" && /* @__PURE__ */
|
|
6339
|
-
/* @__PURE__ */
|
|
6340
|
-
/* @__PURE__ */
|
|
6341
|
-
/* @__PURE__ */
|
|
7227
|
+
subView === null && activeTab === "messages" && /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
|
|
7228
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-spacer" }),
|
|
7229
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: t("widget.messages") }),
|
|
7230
|
+
/* @__PURE__ */ jsx19(
|
|
6342
7231
|
"button",
|
|
6343
7232
|
{
|
|
6344
7233
|
type: "button",
|
|
6345
7234
|
className: "hw-header-close",
|
|
6346
7235
|
onClick: handleClose,
|
|
6347
7236
|
"aria-label": t("widget.aria_close"),
|
|
6348
|
-
children: /* @__PURE__ */
|
|
7237
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6349
7238
|
}
|
|
6350
7239
|
)
|
|
6351
7240
|
] }),
|
|
@@ -6353,23 +7242,23 @@ function DefaultWidget({
|
|
|
6353
7242
|
const tabId = activeTab.replace("content:", "");
|
|
6354
7243
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6355
7244
|
if (!contentTab) return null;
|
|
6356
|
-
return /* @__PURE__ */
|
|
6357
|
-
/* @__PURE__ */
|
|
6358
|
-
/* @__PURE__ */
|
|
6359
|
-
/* @__PURE__ */
|
|
7245
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
|
|
7246
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-spacer" }),
|
|
7247
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: resolveLabel2(contentTab.label) }),
|
|
7248
|
+
/* @__PURE__ */ jsx19(
|
|
6360
7249
|
"button",
|
|
6361
7250
|
{
|
|
6362
7251
|
type: "button",
|
|
6363
7252
|
className: "hw-header-close",
|
|
6364
7253
|
onClick: handleClose,
|
|
6365
7254
|
"aria-label": t("widget.aria_close"),
|
|
6366
|
-
children: /* @__PURE__ */
|
|
7255
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6367
7256
|
}
|
|
6368
7257
|
)
|
|
6369
7258
|
] });
|
|
6370
7259
|
})(),
|
|
6371
|
-
(subView !== null || activeTab !== "home") && /* @__PURE__ */
|
|
6372
|
-
subView === null && activeTab === "messages" && /* @__PURE__ */
|
|
7260
|
+
(subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs14("div", { className: "hw-content", children: [
|
|
7261
|
+
subView === null && activeTab === "messages" && /* @__PURE__ */ jsx19(
|
|
6373
7262
|
MessagesView,
|
|
6374
7263
|
{
|
|
6375
7264
|
conversations,
|
|
@@ -6377,7 +7266,7 @@ function DefaultWidget({
|
|
|
6377
7266
|
onNewClick: openNewConversation
|
|
6378
7267
|
}
|
|
6379
7268
|
),
|
|
6380
|
-
subView === "new" && /* @__PURE__ */
|
|
7269
|
+
subView === "new" && /* @__PURE__ */ jsx19(
|
|
6381
7270
|
NewConversationView,
|
|
6382
7271
|
{
|
|
6383
7272
|
text: newText,
|
|
@@ -6387,12 +7276,12 @@ function DefaultWidget({
|
|
|
6387
7276
|
welcomeMessage
|
|
6388
7277
|
}
|
|
6389
7278
|
),
|
|
6390
|
-
subView === "conversation" && activeId && /* @__PURE__ */
|
|
7279
|
+
subView === "conversation" && activeId && /* @__PURE__ */ jsx19(ConversationView, { conversationId: activeId, starters: dockSuggestions }),
|
|
6391
7280
|
activeTab.startsWith("content:") && (() => {
|
|
6392
7281
|
const tabId = activeTab.replace("content:", "");
|
|
6393
7282
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6394
7283
|
if (!contentTab) return null;
|
|
6395
|
-
return /* @__PURE__ */
|
|
7284
|
+
return /* @__PURE__ */ jsx19(
|
|
6396
7285
|
ContentTabView,
|
|
6397
7286
|
{
|
|
6398
7287
|
tab: contentTab,
|
|
@@ -6412,7 +7301,7 @@ function DefaultWidget({
|
|
|
6412
7301
|
);
|
|
6413
7302
|
})()
|
|
6414
7303
|
] }),
|
|
6415
|
-
showTabBar && /* @__PURE__ */
|
|
7304
|
+
showTabBar && /* @__PURE__ */ jsx19(
|
|
6416
7305
|
TabBar,
|
|
6417
7306
|
{
|
|
6418
7307
|
activeTab,
|
|
@@ -6423,20 +7312,20 @@ function DefaultWidget({
|
|
|
6423
7312
|
unseenAnnouncementCount
|
|
6424
7313
|
}
|
|
6425
7314
|
),
|
|
6426
|
-
/* @__PURE__ */
|
|
7315
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-powered", children: [
|
|
6427
7316
|
t("widget.powered_by"),
|
|
6428
7317
|
" ",
|
|
6429
|
-
/* @__PURE__ */
|
|
7318
|
+
/* @__PURE__ */ jsx19("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
|
|
6430
7319
|
] })
|
|
6431
7320
|
]
|
|
6432
7321
|
}
|
|
6433
7322
|
),
|
|
6434
|
-
isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */
|
|
6435
|
-
/* @__PURE__ */
|
|
7323
|
+
isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsxs14("div", { className: "hw-preview-dock", children: [
|
|
7324
|
+
/* @__PURE__ */ jsx19(
|
|
6436
7325
|
AnnouncementPreviews,
|
|
6437
7326
|
{
|
|
6438
7327
|
maxVisible: incomingPreview ? 1 : 2,
|
|
6439
|
-
avatar: /* @__PURE__ */
|
|
7328
|
+
avatar: /* @__PURE__ */ jsx19(WidgetLogo, {}),
|
|
6440
7329
|
onOpen: (slug, tabId) => {
|
|
6441
7330
|
markEntrySeen(slug);
|
|
6442
7331
|
handleBubbleClick();
|
|
@@ -6448,10 +7337,10 @@ function DefaultWidget({
|
|
|
6448
7337
|
}
|
|
6449
7338
|
}
|
|
6450
7339
|
),
|
|
6451
|
-
/* @__PURE__ */
|
|
7340
|
+
/* @__PURE__ */ jsx19(MessagePreview, { onOpen: handleBubbleClick, avatar: /* @__PURE__ */ jsx19(WidgetLogo, {}), autoDismissMs: null })
|
|
6452
7341
|
] }),
|
|
6453
|
-
/* @__PURE__ */
|
|
6454
|
-
isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */
|
|
7342
|
+
/* @__PURE__ */ jsx19(WidgetDebugOverlay, {}),
|
|
7343
|
+
isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */ jsxs14(
|
|
6455
7344
|
"button",
|
|
6456
7345
|
{
|
|
6457
7346
|
ref: bubbleRef,
|
|
@@ -6468,24 +7357,24 @@ function DefaultWidget({
|
|
|
6468
7357
|
"aria-expanded": isOpen,
|
|
6469
7358
|
"aria-haspopup": "dialog",
|
|
6470
7359
|
children: [
|
|
6471
|
-
/* @__PURE__ */
|
|
7360
|
+
/* @__PURE__ */ jsx19(
|
|
6472
7361
|
"span",
|
|
6473
7362
|
{
|
|
6474
7363
|
className: `hw-bubble-icon hw-bubble-icon--bot ${isOpen ? "hw-bubble-icon--hidden" : ""}`,
|
|
6475
|
-
children: /* @__PURE__ */
|
|
7364
|
+
children: /* @__PURE__ */ jsx19(LauncherIcon, {})
|
|
6476
7365
|
}
|
|
6477
7366
|
),
|
|
6478
|
-
/* @__PURE__ */
|
|
7367
|
+
/* @__PURE__ */ jsx19(
|
|
6479
7368
|
"span",
|
|
6480
7369
|
{
|
|
6481
7370
|
className: `hw-bubble-icon hw-bubble-icon--close ${!isOpen ? "hw-bubble-icon--hidden" : ""}`,
|
|
6482
|
-
children: /* @__PURE__ */
|
|
7371
|
+
children: /* @__PURE__ */ jsx19(XIcon, { size: 24 })
|
|
6483
7372
|
}
|
|
6484
7373
|
),
|
|
6485
|
-
launcherStyle !== "icon" && !isOpen && /* @__PURE__ */
|
|
6486
|
-
!isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */
|
|
7374
|
+
launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx19("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
|
|
7375
|
+
!isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsxs14("div", { className: "hw-bubble-badge", children: [
|
|
6487
7376
|
totalUnread > 0 ? totalUnread : "",
|
|
6488
|
-
totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */
|
|
7377
|
+
totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsx19("span", { className: "hw-bubble-badge-dot" })
|
|
6489
7378
|
] })
|
|
6490
7379
|
]
|
|
6491
7380
|
}
|
|
@@ -6502,8 +7391,8 @@ function TabBar({
|
|
|
6502
7391
|
showMessagesTab = true,
|
|
6503
7392
|
unseenAnnouncementCount = 0
|
|
6504
7393
|
}) {
|
|
6505
|
-
return /* @__PURE__ */
|
|
6506
|
-
/* @__PURE__ */
|
|
7394
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-tabs", role: "tablist", children: [
|
|
7395
|
+
/* @__PURE__ */ jsxs14(
|
|
6507
7396
|
"button",
|
|
6508
7397
|
{
|
|
6509
7398
|
type: "button",
|
|
@@ -6512,12 +7401,12 @@ function TabBar({
|
|
|
6512
7401
|
role: "tab",
|
|
6513
7402
|
"aria-selected": activeTab === "home",
|
|
6514
7403
|
children: [
|
|
6515
|
-
/* @__PURE__ */
|
|
6516
|
-
/* @__PURE__ */
|
|
7404
|
+
/* @__PURE__ */ jsx19(HomeIcon, {}),
|
|
7405
|
+
/* @__PURE__ */ jsx19("span", { children: t("widget.home") })
|
|
6517
7406
|
]
|
|
6518
7407
|
}
|
|
6519
7408
|
),
|
|
6520
|
-
showMessagesTab && /* @__PURE__ */
|
|
7409
|
+
showMessagesTab && /* @__PURE__ */ jsxs14(
|
|
6521
7410
|
"button",
|
|
6522
7411
|
{
|
|
6523
7412
|
type: "button",
|
|
@@ -6526,15 +7415,15 @@ function TabBar({
|
|
|
6526
7415
|
role: "tab",
|
|
6527
7416
|
"aria-selected": activeTab === "messages",
|
|
6528
7417
|
children: [
|
|
6529
|
-
/* @__PURE__ */
|
|
6530
|
-
/* @__PURE__ */
|
|
6531
|
-
unreadCount > 0 && /* @__PURE__ */
|
|
7418
|
+
/* @__PURE__ */ jsxs14("span", { className: "hw-tabs-icon-wrap", children: [
|
|
7419
|
+
/* @__PURE__ */ jsx19(MessagesIcon, {}),
|
|
7420
|
+
unreadCount > 0 && /* @__PURE__ */ jsx19("span", { className: "hw-tabs-badge", children: unreadCount > 99 ? "99+" : unreadCount })
|
|
6532
7421
|
] }),
|
|
6533
|
-
/* @__PURE__ */
|
|
7422
|
+
/* @__PURE__ */ jsx19("span", { children: t("widget.messages") })
|
|
6534
7423
|
]
|
|
6535
7424
|
}
|
|
6536
7425
|
),
|
|
6537
|
-
contentTabs.map((tab) => /* @__PURE__ */
|
|
7426
|
+
contentTabs.map((tab) => /* @__PURE__ */ jsxs14(
|
|
6538
7427
|
"button",
|
|
6539
7428
|
{
|
|
6540
7429
|
type: "button",
|
|
@@ -6543,11 +7432,11 @@ function TabBar({
|
|
|
6543
7432
|
role: "tab",
|
|
6544
7433
|
"aria-selected": activeTab === `content:${tab.id}`,
|
|
6545
7434
|
children: [
|
|
6546
|
-
/* @__PURE__ */
|
|
6547
|
-
/* @__PURE__ */
|
|
6548
|
-
tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */
|
|
7435
|
+
/* @__PURE__ */ jsxs14("span", { className: "hw-tabs-icon-wrap", children: [
|
|
7436
|
+
/* @__PURE__ */ jsx19(ContentTabIconComponent, { icon: tab.icon }),
|
|
7437
|
+
tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */ jsx19("span", { className: "hw-tabs-dot" })
|
|
6549
7438
|
] }),
|
|
6550
|
-
/* @__PURE__ */
|
|
7439
|
+
/* @__PURE__ */ jsx19("span", { children: resolveLabel2(tab.label) })
|
|
6551
7440
|
]
|
|
6552
7441
|
},
|
|
6553
7442
|
tab.id
|
|
@@ -6561,9 +7450,9 @@ function HomeView({
|
|
|
6561
7450
|
}) {
|
|
6562
7451
|
const recent = conversations.slice(0, 3);
|
|
6563
7452
|
if (recent.length === 0) return null;
|
|
6564
|
-
return /* @__PURE__ */
|
|
6565
|
-
/* @__PURE__ */
|
|
6566
|
-
recent.map((conv, i) => /* @__PURE__ */
|
|
7453
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-recent-card", children: [
|
|
7454
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-recent-header", children: t("widget.recent_conversations") }),
|
|
7455
|
+
recent.map((conv, i) => /* @__PURE__ */ jsx19(
|
|
6567
7456
|
ConversationRow,
|
|
6568
7457
|
{
|
|
6569
7458
|
conversation: conv,
|
|
@@ -6572,7 +7461,7 @@ function HomeView({
|
|
|
6572
7461
|
},
|
|
6573
7462
|
conv.id
|
|
6574
7463
|
)),
|
|
6575
|
-
conversations.length > 3 && /* @__PURE__ */
|
|
7464
|
+
conversations.length > 3 && /* @__PURE__ */ jsx19("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
|
|
6576
7465
|
] });
|
|
6577
7466
|
}
|
|
6578
7467
|
function MessagesView({
|
|
@@ -6581,14 +7470,14 @@ function MessagesView({
|
|
|
6581
7470
|
onNewClick
|
|
6582
7471
|
}) {
|
|
6583
7472
|
if (conversations.length === 0) {
|
|
6584
|
-
return /* @__PURE__ */
|
|
6585
|
-
/* @__PURE__ */
|
|
6586
|
-
/* @__PURE__ */
|
|
6587
|
-
/* @__PURE__ */
|
|
6588
|
-
/* @__PURE__ */
|
|
7473
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-empty-state", children: [
|
|
7474
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-empty-icon-wrap", children: /* @__PURE__ */ jsx19(MessagesIcon, {}) }),
|
|
7475
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-empty-title", children: t("widget.no_messages") }),
|
|
7476
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-empty-desc", children: t("widget.no_messages_desc") }),
|
|
7477
|
+
/* @__PURE__ */ jsx19("button", { type: "button", className: "hw-empty-btn", onClick: onNewClick, children: t("widget.start_conversation") })
|
|
6589
7478
|
] });
|
|
6590
7479
|
}
|
|
6591
|
-
return /* @__PURE__ */
|
|
7480
|
+
return /* @__PURE__ */ jsx19("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx19(ConversationCard, { conversation: conv, onSelect }, conv.id)) });
|
|
6592
7481
|
}
|
|
6593
7482
|
function ConvCardBody({ conv }) {
|
|
6594
7483
|
const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
|
|
@@ -6596,8 +7485,8 @@ function ConvCardBody({ conv }) {
|
|
|
6596
7485
|
const isTeam = !!humanName;
|
|
6597
7486
|
const displayName = humanName ?? agentName;
|
|
6598
7487
|
const preview = conv.lastMessageText ?? t("widget.no_preview");
|
|
6599
|
-
return /* @__PURE__ */
|
|
6600
|
-
/* @__PURE__ */
|
|
7488
|
+
return /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
7489
|
+
/* @__PURE__ */ jsx19("div", { className: `hw-conv-card-avatar${isTeam ? " hw-conv-card-avatar--team" : ""}`, children: isTeam ? humanImage ? /* @__PURE__ */ jsx19(
|
|
6601
7490
|
"img",
|
|
6602
7491
|
{
|
|
6603
7492
|
src: humanImage,
|
|
@@ -6605,13 +7494,13 @@ function ConvCardBody({ conv }) {
|
|
|
6605
7494
|
className: "hw-conv-card-avatar-img",
|
|
6606
7495
|
referrerPolicy: "no-referrer"
|
|
6607
7496
|
}
|
|
6608
|
-
) : /* @__PURE__ */
|
|
6609
|
-
/* @__PURE__ */
|
|
6610
|
-
/* @__PURE__ */
|
|
6611
|
-
/* @__PURE__ */
|
|
6612
|
-
conv.lastMessageAt && /* @__PURE__ */
|
|
7497
|
+
) : /* @__PURE__ */ jsx19("span", { className: "hw-conv-card-avatar-initials", children: displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx19(WidgetLogo, {}) }),
|
|
7498
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-conv-card-content", children: [
|
|
7499
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-conv-card-top", children: [
|
|
7500
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-conv-card-name", children: displayName }),
|
|
7501
|
+
conv.lastMessageAt && /* @__PURE__ */ jsx19("span", { className: "hw-conv-card-time", children: formatRelativeTime(conv.lastMessageAt) })
|
|
6613
7502
|
] }),
|
|
6614
|
-
/* @__PURE__ */
|
|
7503
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-conv-card-preview", children: preview })
|
|
6615
7504
|
] })
|
|
6616
7505
|
] });
|
|
6617
7506
|
}
|
|
@@ -6621,16 +7510,16 @@ function ConversationCard({
|
|
|
6621
7510
|
}) {
|
|
6622
7511
|
const hasUnread = conv.unreadCount > 0;
|
|
6623
7512
|
const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
|
|
6624
|
-
return /* @__PURE__ */
|
|
7513
|
+
return /* @__PURE__ */ jsxs14(
|
|
6625
7514
|
"button",
|
|
6626
7515
|
{
|
|
6627
7516
|
type: "button",
|
|
6628
7517
|
className: `hw-conv-card ${hasUnread ? "hw-conv-card--unread" : ""}`,
|
|
6629
7518
|
onClick: () => onSelect(conv.id),
|
|
6630
7519
|
children: [
|
|
6631
|
-
/* @__PURE__ */
|
|
6632
|
-
hasUnread && /* @__PURE__ */
|
|
6633
|
-
awaiting && /* @__PURE__ */
|
|
7520
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx19(ConvCardBody, { conv }) }),
|
|
7521
|
+
hasUnread && /* @__PURE__ */ jsx19("div", { className: "hw-conv-card-badge", children: conv.unreadCount }),
|
|
7522
|
+
awaiting && /* @__PURE__ */ jsx19("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
|
|
6634
7523
|
]
|
|
6635
7524
|
}
|
|
6636
7525
|
);
|
|
@@ -6642,16 +7531,16 @@ function ConversationRow({
|
|
|
6642
7531
|
}) {
|
|
6643
7532
|
const hasUnread = conv.unreadCount > 0;
|
|
6644
7533
|
const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
|
|
6645
|
-
return /* @__PURE__ */
|
|
7534
|
+
return /* @__PURE__ */ jsxs14(
|
|
6646
7535
|
"button",
|
|
6647
7536
|
{
|
|
6648
7537
|
type: "button",
|
|
6649
7538
|
className: `hw-recent-row ${hasUnread ? "hw-recent-row--unread" : ""} ${isLast ? "hw-recent-row--last" : ""}`,
|
|
6650
7539
|
onClick: () => onSelect(conv.id),
|
|
6651
7540
|
children: [
|
|
6652
|
-
/* @__PURE__ */
|
|
6653
|
-
hasUnread && /* @__PURE__ */
|
|
6654
|
-
awaiting && /* @__PURE__ */
|
|
7541
|
+
/* @__PURE__ */ jsx19(ConvCardBody, { conv }),
|
|
7542
|
+
hasUnread && /* @__PURE__ */ jsx19("div", { className: "hw-recent-row-badge", children: conv.unreadCount }),
|
|
7543
|
+
awaiting && /* @__PURE__ */ jsx19("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
|
|
6655
7544
|
]
|
|
6656
7545
|
}
|
|
6657
7546
|
);
|
|
@@ -6659,10 +7548,10 @@ function ConversationRow({
|
|
|
6659
7548
|
function InlineEmailPrompt({ conversationId }) {
|
|
6660
7549
|
const { client, store } = useWidgetContext();
|
|
6661
7550
|
const updateContact = useWidgetStore((s) => s.updateVisitorContact);
|
|
6662
|
-
const [email, setEmail] =
|
|
6663
|
-
const [isSubmitting, setIsSubmitting] =
|
|
6664
|
-
const [isSuccess, setIsSuccess] =
|
|
6665
|
-
const [hasError, setHasError] =
|
|
7551
|
+
const [email, setEmail] = useState18("");
|
|
7552
|
+
const [isSubmitting, setIsSubmitting] = useState18(false);
|
|
7553
|
+
const [isSuccess, setIsSuccess] = useState18(false);
|
|
7554
|
+
const [hasError, setHasError] = useState18(false);
|
|
6666
7555
|
const handleSubmit = async () => {
|
|
6667
7556
|
const trimmed = email.trim();
|
|
6668
7557
|
if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
|
|
@@ -6703,8 +7592,8 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6703
7592
|
}
|
|
6704
7593
|
};
|
|
6705
7594
|
if (isSuccess) {
|
|
6706
|
-
return /* @__PURE__ */
|
|
6707
|
-
/* @__PURE__ */
|
|
7595
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-email-card hw-email-card--success", children: [
|
|
7596
|
+
/* @__PURE__ */ jsx19(
|
|
6708
7597
|
"svg",
|
|
6709
7598
|
{
|
|
6710
7599
|
width: "15",
|
|
@@ -6715,17 +7604,17 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6715
7604
|
strokeWidth: 2.5,
|
|
6716
7605
|
strokeLinecap: "round",
|
|
6717
7606
|
strokeLinejoin: "round",
|
|
6718
|
-
children: /* @__PURE__ */
|
|
7607
|
+
children: /* @__PURE__ */ jsx19("polyline", { points: "20 6 9 17 4 12" })
|
|
6719
7608
|
}
|
|
6720
7609
|
),
|
|
6721
7610
|
t("widget.email_saved")
|
|
6722
7611
|
] });
|
|
6723
7612
|
}
|
|
6724
|
-
return /* @__PURE__ */
|
|
6725
|
-
/* @__PURE__ */
|
|
6726
|
-
/* @__PURE__ */
|
|
6727
|
-
/* @__PURE__ */
|
|
6728
|
-
/* @__PURE__ */
|
|
7613
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-email-card", children: [
|
|
7614
|
+
/* @__PURE__ */ jsx19("p", { className: "hw-email-card-title", children: t("widget.email_title") }),
|
|
7615
|
+
/* @__PURE__ */ jsx19("p", { className: "hw-email-card-subtitle", children: t("widget.email_subtitle") }),
|
|
7616
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-email-card-row", children: [
|
|
7617
|
+
/* @__PURE__ */ jsx19(
|
|
6729
7618
|
"input",
|
|
6730
7619
|
{
|
|
6731
7620
|
type: "email",
|
|
@@ -6741,7 +7630,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6741
7630
|
placeholder: t("widget.email_placeholder")
|
|
6742
7631
|
}
|
|
6743
7632
|
),
|
|
6744
|
-
/* @__PURE__ */
|
|
7633
|
+
/* @__PURE__ */ jsx19(
|
|
6745
7634
|
"button",
|
|
6746
7635
|
{
|
|
6747
7636
|
type: "button",
|
|
@@ -6749,7 +7638,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6749
7638
|
onClick: handleSubmit,
|
|
6750
7639
|
disabled: isSubmitting || !email.trim(),
|
|
6751
7640
|
"aria-label": t("widget.email_continue"),
|
|
6752
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
7641
|
+
children: isSubmitting ? /* @__PURE__ */ jsx19(
|
|
6753
7642
|
"svg",
|
|
6754
7643
|
{
|
|
6755
7644
|
width: "14",
|
|
@@ -6759,7 +7648,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6759
7648
|
stroke: "currentColor",
|
|
6760
7649
|
strokeWidth: 2,
|
|
6761
7650
|
"aria-hidden": "true",
|
|
6762
|
-
children: /* @__PURE__ */
|
|
7651
|
+
children: /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx19(
|
|
6763
7652
|
"animate",
|
|
6764
7653
|
{
|
|
6765
7654
|
attributeName: "stroke-dashoffset",
|
|
@@ -6769,7 +7658,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6769
7658
|
}
|
|
6770
7659
|
) })
|
|
6771
7660
|
}
|
|
6772
|
-
) : /* @__PURE__ */
|
|
7661
|
+
) : /* @__PURE__ */ jsx19(
|
|
6773
7662
|
"svg",
|
|
6774
7663
|
{
|
|
6775
7664
|
width: "15",
|
|
@@ -6781,7 +7670,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6781
7670
|
strokeLinecap: "round",
|
|
6782
7671
|
strokeLinejoin: "round",
|
|
6783
7672
|
"aria-hidden": "true",
|
|
6784
|
-
children: /* @__PURE__ */
|
|
7673
|
+
children: /* @__PURE__ */ jsx19("path", { d: "M5 12h13M12 5l7 7-7 7" })
|
|
6785
7674
|
}
|
|
6786
7675
|
)
|
|
6787
7676
|
}
|
|
@@ -6796,9 +7685,9 @@ function NewConversationView({
|
|
|
6796
7685
|
isSubmitting,
|
|
6797
7686
|
welcomeMessage
|
|
6798
7687
|
}) {
|
|
6799
|
-
return /* @__PURE__ */
|
|
6800
|
-
/* @__PURE__ */
|
|
6801
|
-
/* @__PURE__ */
|
|
7688
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-new", children: [
|
|
7689
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx19(MessageBubble, { text: welcomeMessage, sender: "ai", parts: null }) }),
|
|
7690
|
+
/* @__PURE__ */ jsx19(
|
|
6802
7691
|
Composer,
|
|
6803
7692
|
{
|
|
6804
7693
|
text,
|
|
@@ -6847,27 +7736,27 @@ function ConversationView({
|
|
|
6847
7736
|
const needsEmailPostReply = !!agentConfig?.requireVisitorEmail && !hasEmail && visitorMessageCount >= 2 && hasAiReply;
|
|
6848
7737
|
const needsEmail = needsEmailPostReply || !!emailGateConvId;
|
|
6849
7738
|
if (isLoading && items.length === 0) {
|
|
6850
|
-
return /* @__PURE__ */
|
|
6851
|
-
/* @__PURE__ */
|
|
6852
|
-
/* @__PURE__ */
|
|
6853
|
-
/* @__PURE__ */
|
|
6854
|
-
/* @__PURE__ */
|
|
6855
|
-
/* @__PURE__ */
|
|
7739
|
+
return /* @__PURE__ */ jsx19("div", { className: "hw-messages", children: /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-messages", children: [
|
|
7740
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-msg", children: [
|
|
7741
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-avatar" }),
|
|
7742
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-bubble", children: [
|
|
7743
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 140 } }),
|
|
7744
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } })
|
|
6856
7745
|
] })
|
|
6857
7746
|
] }),
|
|
6858
|
-
/* @__PURE__ */
|
|
6859
|
-
/* @__PURE__ */
|
|
6860
|
-
/* @__PURE__ */
|
|
6861
|
-
/* @__PURE__ */
|
|
6862
|
-
/* @__PURE__ */
|
|
6863
|
-
/* @__PURE__ */
|
|
6864
|
-
/* @__PURE__ */
|
|
7747
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton-msg hw-skeleton-msg--right", children: /* @__PURE__ */ jsx19("div", { className: "hw-skeleton-bubble", style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } }) }) }),
|
|
7748
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-msg", children: [
|
|
7749
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-avatar" }),
|
|
7750
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-bubble", children: [
|
|
7751
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 180 } }),
|
|
7752
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
|
|
7753
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 80 } })
|
|
6865
7754
|
] })
|
|
6866
7755
|
] })
|
|
6867
7756
|
] }) });
|
|
6868
7757
|
}
|
|
6869
|
-
return /* @__PURE__ */
|
|
6870
|
-
/* @__PURE__ */
|
|
7758
|
+
return /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
7759
|
+
/* @__PURE__ */ jsx19(
|
|
6871
7760
|
MessageList,
|
|
6872
7761
|
{
|
|
6873
7762
|
items,
|
|
@@ -6877,12 +7766,12 @@ function ConversationView({
|
|
|
6877
7766
|
hasMore,
|
|
6878
7767
|
isLoadingMore: isLoading,
|
|
6879
7768
|
onLoadMore: loadMore,
|
|
6880
|
-
renderAfterMessages: needsEmail || showStarters ? /* @__PURE__ */
|
|
6881
|
-
needsEmail && /* @__PURE__ */
|
|
6882
|
-
showStarters && /* @__PURE__ */
|
|
7769
|
+
renderAfterMessages: needsEmail || showStarters ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
7770
|
+
needsEmail && /* @__PURE__ */ jsx19(InlineEmailPrompt, { conversationId: emailGateConvId ?? void 0 }),
|
|
7771
|
+
showStarters && /* @__PURE__ */ jsx19("div", { className: "hw-starters", children: starters?.map((entry, index) => {
|
|
6883
7772
|
const question = typeof entry === "string" ? entry : entry.question;
|
|
6884
7773
|
const label = typeof entry === "string" ? null : entry.label;
|
|
6885
|
-
return /* @__PURE__ */
|
|
7774
|
+
return /* @__PURE__ */ jsxs14(
|
|
6886
7775
|
"button",
|
|
6887
7776
|
{
|
|
6888
7777
|
type: "button",
|
|
@@ -6892,11 +7781,11 @@ function ConversationView({
|
|
|
6892
7781
|
void submit({ text: question });
|
|
6893
7782
|
},
|
|
6894
7783
|
children: [
|
|
6895
|
-
/* @__PURE__ */
|
|
6896
|
-
/* @__PURE__ */
|
|
6897
|
-
label && /* @__PURE__ */
|
|
7784
|
+
/* @__PURE__ */ jsxs14("span", { className: "hw-starter-text", children: [
|
|
7785
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-starter-k", children: label ?? question }),
|
|
7786
|
+
label && /* @__PURE__ */ jsx19("span", { className: "hw-starter-q", children: question })
|
|
6898
7787
|
] }),
|
|
6899
|
-
/* @__PURE__ */
|
|
7788
|
+
/* @__PURE__ */ jsx19(ChevronRightIcon, { size: 14 })
|
|
6900
7789
|
]
|
|
6901
7790
|
},
|
|
6902
7791
|
question
|
|
@@ -6905,10 +7794,10 @@ function ConversationView({
|
|
|
6905
7794
|
] }) : void 0
|
|
6906
7795
|
}
|
|
6907
7796
|
),
|
|
6908
|
-
isResolved && /* @__PURE__ */
|
|
6909
|
-
sendError && /* @__PURE__ */
|
|
7797
|
+
isResolved && /* @__PURE__ */ jsx19(ResolvedBanner, { conversationId }),
|
|
7798
|
+
sendError && /* @__PURE__ */ jsxs14("div", { className: "hw-send-error", children: [
|
|
6910
7799
|
sendError,
|
|
6911
|
-
/* @__PURE__ */
|
|
7800
|
+
/* @__PURE__ */ jsx19(
|
|
6912
7801
|
"button",
|
|
6913
7802
|
{
|
|
6914
7803
|
type: "button",
|
|
@@ -6921,7 +7810,7 @@ function ConversationView({
|
|
|
6921
7810
|
}
|
|
6922
7811
|
)
|
|
6923
7812
|
] }),
|
|
6924
|
-
/* @__PURE__ */
|
|
7813
|
+
/* @__PURE__ */ jsx19(
|
|
6925
7814
|
Composer,
|
|
6926
7815
|
{
|
|
6927
7816
|
text,
|
|
@@ -6932,50 +7821,12 @@ function ConversationView({
|
|
|
6932
7821
|
attachments,
|
|
6933
7822
|
onAddFiles: addFiles,
|
|
6934
7823
|
onRemoveAttachment: removeAttachment,
|
|
6935
|
-
disabled: needsEmail
|
|
7824
|
+
disabled: needsEmail,
|
|
7825
|
+
placeholder: isResolved ? t("widget.placeholder_resolved") : void 0
|
|
6936
7826
|
}
|
|
6937
7827
|
)
|
|
6938
7828
|
] });
|
|
6939
7829
|
}
|
|
6940
|
-
function ResolvedBanner({ conversationId }) {
|
|
6941
|
-
const { client } = useWidgetContext();
|
|
6942
|
-
const [csatRating, setCsatRating] = useState16(null);
|
|
6943
|
-
const [csatSubmitted, setCsatSubmitted] = useState16(false);
|
|
6944
|
-
const handleCsat = (rating) => {
|
|
6945
|
-
setCsatRating(rating);
|
|
6946
|
-
setCsatSubmitted(true);
|
|
6947
|
-
client.widget.sendCsat.mutate({ conversationId, rating }).catch(() => {
|
|
6948
|
-
});
|
|
6949
|
-
};
|
|
6950
|
-
return /* @__PURE__ */ jsxs12("div", { className: "hw-resolved", children: [
|
|
6951
|
-
/* @__PURE__ */ jsx17("div", { className: "hw-resolved-text", children: t("widget.resolved_text") }),
|
|
6952
|
-
!csatSubmitted ? /* @__PURE__ */ jsxs12("div", { className: "hw-csat", children: [
|
|
6953
|
-
/* @__PURE__ */ jsx17("div", { className: "hw-csat-label", children: t("widget.csat_label") }),
|
|
6954
|
-
/* @__PURE__ */ jsxs12("div", { className: "hw-csat-buttons", children: [
|
|
6955
|
-
/* @__PURE__ */ jsx17(
|
|
6956
|
-
"button",
|
|
6957
|
-
{
|
|
6958
|
-
type: "button",
|
|
6959
|
-
className: `hw-csat-btn ${csatRating === "good" ? "hw-csat-btn--selected" : ""}`,
|
|
6960
|
-
onClick: () => handleCsat("good"),
|
|
6961
|
-
"aria-label": t("widget.aria_good"),
|
|
6962
|
-
children: "\u{1F44D}"
|
|
6963
|
-
}
|
|
6964
|
-
),
|
|
6965
|
-
/* @__PURE__ */ jsx17(
|
|
6966
|
-
"button",
|
|
6967
|
-
{
|
|
6968
|
-
type: "button",
|
|
6969
|
-
className: `hw-csat-btn ${csatRating === "bad" ? "hw-csat-btn--selected" : ""}`,
|
|
6970
|
-
onClick: () => handleCsat("bad"),
|
|
6971
|
-
"aria-label": t("widget.aria_bad"),
|
|
6972
|
-
children: "\u{1F44E}"
|
|
6973
|
-
}
|
|
6974
|
-
)
|
|
6975
|
-
] })
|
|
6976
|
-
] }) : /* @__PURE__ */ jsx17("div", { className: "hw-csat-thanks", children: t("widget.csat_thanks") })
|
|
6977
|
-
] });
|
|
6978
|
-
}
|
|
6979
7830
|
function WhatsNewCard({
|
|
6980
7831
|
getUnseenEntries,
|
|
6981
7832
|
announcementTabs,
|
|
@@ -6986,34 +7837,34 @@ function WhatsNewCard({
|
|
|
6986
7837
|
if (unseen.length === 0) return null;
|
|
6987
7838
|
const display = unseen.slice(0, 3);
|
|
6988
7839
|
const badgeFieldMap = new Map(announcementTabs.map((t2) => [t2.id, t2.display?.badgeField]));
|
|
6989
|
-
return /* @__PURE__ */
|
|
6990
|
-
/* @__PURE__ */
|
|
6991
|
-
/* @__PURE__ */
|
|
6992
|
-
/* @__PURE__ */
|
|
7840
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-whats-new", children: [
|
|
7841
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-header", children: [
|
|
7842
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-whats-new-title", children: resolveLabel2("widget.whats_new") }),
|
|
7843
|
+
/* @__PURE__ */ jsxs14("button", { type: "button", className: "hw-whats-new-view-all", onClick: onViewAll, children: [
|
|
6993
7844
|
resolveLabel2("widget.view_all"),
|
|
6994
7845
|
" \u2192"
|
|
6995
7846
|
] })
|
|
6996
7847
|
] }),
|
|
6997
|
-
/* @__PURE__ */
|
|
7848
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-whats-new-list", children: display.map((entry) => {
|
|
6998
7849
|
const badgeField = badgeFieldMap.get(entry.tabId);
|
|
6999
|
-
return /* @__PURE__ */
|
|
7850
|
+
return /* @__PURE__ */ jsxs14(
|
|
7000
7851
|
"button",
|
|
7001
7852
|
{
|
|
7002
7853
|
type: "button",
|
|
7003
7854
|
className: "hw-whats-new-item",
|
|
7004
7855
|
onClick: () => onSelect(entry.slug, entry.tabId),
|
|
7005
7856
|
children: [
|
|
7006
|
-
badgeField && entry.customFields[badgeField] && /* @__PURE__ */
|
|
7007
|
-
/* @__PURE__ */
|
|
7008
|
-
entry.publishedAt && /* @__PURE__ */
|
|
7857
|
+
badgeField && entry.customFields[badgeField] && /* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-item-top", children: [
|
|
7858
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-whats-new-badge", children: entry.customFields[badgeField] }),
|
|
7859
|
+
entry.publishedAt && /* @__PURE__ */ jsx19("span", { className: "hw-whats-new-time", children: formatRelativeTime(entry.publishedAt) })
|
|
7009
7860
|
] }),
|
|
7010
|
-
/* @__PURE__ */
|
|
7861
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-item-title", children: [
|
|
7011
7862
|
entry.title,
|
|
7012
|
-
!badgeField && entry.publishedAt && /* @__PURE__ */
|
|
7863
|
+
!badgeField && entry.publishedAt && /* @__PURE__ */ jsx19("span", { className: "hw-whats-new-time-inline", children: formatRelativeTime(entry.publishedAt) })
|
|
7013
7864
|
] }),
|
|
7014
7865
|
entry.body && (() => {
|
|
7015
7866
|
const clean = stripMarkdown(entry.body);
|
|
7016
|
-
return /* @__PURE__ */
|
|
7867
|
+
return /* @__PURE__ */ jsx19("div", { className: "hw-whats-new-item-body", children: clean.length > 80 ? `${clean.slice(0, 80)}\u2026` : clean });
|
|
7017
7868
|
})()
|
|
7018
7869
|
]
|
|
7019
7870
|
},
|
|
@@ -7046,10 +7897,10 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
7046
7897
|
}
|
|
7047
7898
|
|
|
7048
7899
|
// src/themed/styles.css
|
|
7049
|
-
styleInject(':host {\n all: initial;\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n font-size: 14px;\n line-height: 1.5;\n color: #1a1a1a;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget {\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n font-size: 14px;\n line-height: 1.5;\n color: #1a1a1a;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget *,\n.hw-widget *::before,\n.hw-widget *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n:where(.hw-widget) {\n --hw-primary: #171717;\n --hw-primary-hover: #2a2a2a;\n --hw-brand: #171717;\n --hw-on-brand: #ffffff;\n --hw-focus-border: #9ca3af;\n --hw-focus-ring: rgba(0, 0, 0, 0.06);\n --hw-accent: #6366f1;\n --hw-bg: #ffffff;\n --hw-bg-subtle: #fafaf9;\n --hw-bg-hover: #f5f5f4;\n --hw-border: #ebe9e5;\n --hw-border-md: #e5e5e5;\n --hw-text: #1c1b19;\n --hw-text-1: #111;\n --hw-text-2: #666;\n --hw-text-3: #8a847c;\n --hw-text-4: #a8a29a;\n --hw-radius: 20px;\n --hw-visitor-bubble-bg: #f5f5f4;\n --hw-visitor-bubble-text: #1a1a1a;\n --hw-font:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n}\n.hw-agent-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-agent-icon {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n.hw-widget :is(.hw-header-bot-icon, .hw-hero-bot-icon, .hw-conv-card-avatar, .hw-event-avatar, .hw-bubble-icon--bot):has(> .hw-agent-custom) {\n border-radius: 50%;\n background: transparent;\n padding: 0;\n}\n.hw-widget :focus-visible {\n outline: 2px solid var(--hw-primary);\n outline-offset: 2px;\n}\n.hw-widget :focus:not(:focus-visible) {\n outline: none;\n}\n.hw-widget {\n position: fixed;\n bottom: 20px;\n right: var(--hw-position-right, 20px);\n left: var(--hw-position-left, auto);\n z-index: 999999;\n font-family: var(--hw-font);\n}\n@keyframes hw-bubble-enter {\n from {\n opacity: 0;\n transform: scale(0.6);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n.hw-bubble {\n width: 48px;\n height: 48px;\n border-radius: 14px;\n background: var(--hw-primary);\n color: white;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;\n position: relative;\n overflow: visible;\n animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n}\n.hw-bubble--rounded {\n border-radius: 14px;\n}\n.hw-bubble--square {\n border-radius: 8px;\n}\n.hw-bubble--pill {\n border-radius: 24px;\n}\n.hw-bubble--launcher-bubble,\n.hw-bubble--launcher-help {\n width: auto;\n padding: 0 16px 0 12px;\n gap: 8px;\n border-radius: 24px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--square,\n.hw-bubble--launcher-help.hw-bubble--square {\n border-radius: 8px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--rounded,\n.hw-bubble--launcher-help.hw-bubble--rounded {\n border-radius: 14px;\n}\n.hw-bubble-label {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n line-height: 1;\n position: static;\n opacity: 1;\n transform: none;\n}\n.hw-bubble--launcher-bubble .hw-bubble-icon,\n.hw-bubble--launcher-help .hw-bubble-icon {\n position: static;\n}\n.hw-bubble:hover {\n transform: scale(1.05);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.hw-bubble:active {\n transform: scale(0.95);\n}\n.hw-bubble--open {\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n}\n.hw-bubble:focus-visible {\n outline: 2px solid white;\n outline-offset: 2px;\n}\n.hw-bubble-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;\n}\n.hw-bubble-icon svg:not(.hw-agent-custom svg) {\n width: 22px;\n height: 22px;\n}\n.hw-bubble-icon--hidden {\n transform: scale(0.3) rotate(90deg);\n opacity: 0;\n}\n.hw-bubble-icon--bot {\n}\n.hw-bubble--avatar .hw-bubble-icon--bot {\n width: 100%;\n height: 100%;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img {\n width: 100%;\n height: 100%;\n border-radius: 0;\n}\n.hw-agent-img.hw-agent-img--logo {\n object-fit: contain;\n padding: 10px;\n box-sizing: border-box;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {\n padding: 10px;\n box-sizing: border-box;\n object-fit: contain;\n}\n.hw-bubble-icon--close svg {\n width: 22px;\n height: 22px;\n}\n.hw-bubble-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n border-radius: 10px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n border: 2px solid white;\n animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-badge-pop {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n.hw-bubble-badge::after {\n content: "";\n position: absolute;\n inset: -2px;\n border-radius: inherit;\n background: var(--hw-primary);\n opacity: 0;\n animation: hw-badge-pulse 2s ease-out infinite;\n}\n@keyframes hw-badge-pulse {\n 0% {\n opacity: 0.5;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(1.8);\n }\n}\n.hw-window {\n position: absolute;\n bottom: 72px;\n right: var(--hw-window-right, 0);\n left: var(--hw-window-left, auto);\n width: 440px;\n height: 640px;\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n border-radius: var(--hw-radius);\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hw-window--reading {\n width: min(720px, calc(100vw - 40px));\n height: min(800px, calc(100vh - 112px));\n}\n:host([data-hw-mode="mobile"]) .hw-window,\n:host([data-hw-mode="mobile"]) .hw-window--reading {\n position: fixed;\n inset: 0;\n width: 100%;\n height: var(--hw-visible-height, 100%);\n border-radius: 0;\n box-shadow: none;\n animation: none;\n}\n:host([data-hw-mode="mobile"]) .hw-hero {\n background-color: color-mix(in srgb, var(--hw-primary) 60%, black);\n}\n:host([data-hw-mode="mobile"]) .hw-bubble {\n display: none;\n}\n.hw-window[data-hw-keyboard] .hw-composer {\n padding-bottom: 8px;\n}\n.hw-window[data-hw-keyboard] .hw-powered {\n display: none;\n}\n@keyframes hw-window-open {\n from {\n opacity: 0;\n transform: translateY(12px) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n.hw-window--closing {\n animation: hw-window-close 0.2s ease forwards;\n}\n@keyframes hw-window-close {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.98);\n }\n}\n.hw-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-window,\n .hw-window--closing,\n .hw-content,\n .hw-msg,\n .hw-bubble,\n .hw-bubble-icon,\n .hw-bubble-badge,\n .hw-bubble-badge::after,\n .hw-typing-dot,\n .hw-loading-dot {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n}\n.hw-hero {\n flex-shrink: 0;\n background:\n linear-gradient(\n 160deg,\n color-mix(in srgb, var(--hw-primary) 60%, black) 0%,\n var(--hw-primary) 50%,\n color-mix(in srgb, var(--hw-primary) 40%, black) 100%);\n color: white;\n padding: 20px 22px 40px;\n}\n.hw-hero-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 16px;\n}\n.hw-hero-close {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.6);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s, color 0.15s;\n}\n.hw-hero-close:hover {\n background: rgba(255, 255, 255, 0.2);\n color: white;\n}\n.hw-hero-close:active {\n transform: scale(0.92);\n transition:\n transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.15s,\n color 0.15s;\n}\n.hw-hero-close svg {\n width: 20px;\n height: 20px;\n}\n.hw-hero-bot-icon {\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n}\n.hw-hero-bot-icon > svg,\n.hw-hero-bot-icon > .hw-agent-icon > svg {\n width: 32px;\n height: 32px;\n}\n.hw-hero-bot-icon .hw-agent-img,\n.hw-hero-bot-icon .hw-agent-icon {\n border-radius: inherit;\n overflow: hidden;\n object-fit: contain;\n}\n.hw-hero-greeting {\n font-size: 26px;\n font-weight: 700;\n line-height: 1.15;\n margin-bottom: 6px;\n}\n.hw-hero-greeting-name {\n font-weight: 300;\n}\n.hw-hero-greeting-question {\n font-weight: 700;\n}\n.hw-hero-subtitle {\n font-size: 15px;\n color: rgba(255, 255, 255, 0.5);\n line-height: 1.35;\n}\n.hw-sheet {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n background: #ffffff;\n border-radius: 20px 20px 0 0;\n margin-top: -24px;\n box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);\n position: relative;\n z-index: 1;\n}\n.hw-sheet-inner {\n padding: 20px 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.hw-header {\n display: flex;\n align-items: center;\n padding: 14px 12px 14px 16px;\n background: var(--hw-primary);\n color: white;\n flex-shrink: 0;\n gap: 10px;\n}\n.hw-header--sub {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header-back {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.15s, background 0.15s;\n flex-shrink: 0;\n}\n.hw-header-back svg {\n width: 18px;\n height: 18px;\n}\n.hw-header-back:hover {\n color: var(--hw-text);\n background: var(--hw-bg-subtle);\n}\n.hw-header-identity {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n}\n.hw-header-bot-icon {\n width: 32px;\n height: 32px;\n flex-shrink: 0;\n color: var(--hw-text);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9px;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));\n}\n.hw-header-bot-icon > svg,\n.hw-header-bot-icon > .hw-agent-icon > svg {\n width: 24px;\n height: 24px;\n}\n.hw-header-bot-icon--team {\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n}\n.hw-header-agent-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n.hw-header-bot-icon .hw-agent-img,\n.hw-header-bot-icon .hw-agent-icon {\n border-radius: inherit;\n overflow: hidden;\n}\n.hw-header-bot-icon .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-widget[data-has-avatar=true] {\n --hw-agent-bg-default: var(--hw-primary);\n --hw-agent-fit-default: contain;\n --hw-agent-pad-default: 6px;\n}\n.hw-header-agent-initials {\n font-size: 11px;\n font-weight: 600;\n line-height: 1;\n}\n.hw-header-info {\n flex: 1;\n min-width: 0;\n}\n.hw-header-name {\n font-size: 15px;\n font-weight: 600;\n line-height: 1.3;\n}\n.hw-header-status {\n font-size: 11px;\n color: var(--hw-text-3);\n line-height: 1.3;\n}\n.hw-header-close {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n flex-shrink: 0;\n}\n.hw-header-close svg {\n width: 20px;\n height: 20px;\n}\n.hw-header-close:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n}\n.hw-header-close:active {\n transform: scale(0.92);\n}\n.hw-header--centered {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header--centered .hw-header-title {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n max-width: calc(100% - 88px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n}\n.hw-header-spacer {\n width: 28px;\n flex-shrink: 0;\n}\n.hw-header--messages {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header-title {\n font-size: 16px;\n font-weight: 600;\n}\n.hw-header-actions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.hw-header-action {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-header-action svg {\n width: 16px;\n height: 16px;\n}\n.hw-header-action:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n}\n.hw-header-action:active {\n transform: scale(0.94);\n}\n.hw-card {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 14px 16px;\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n cursor: pointer;\n transition: box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n text-align: left;\n color: var(--hw-text);\n font-family: inherit;\n}\n.hw-card:hover {\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);\n transform: translateY(-1px);\n}\n.hw-card:active {\n transform: translateY(0) scale(0.99);\n transition-duration: 120ms;\n}\n.hw-card-body {\n flex: 1;\n min-width: 0;\n}\n.hw-card-title {\n font-size: 14px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hw-text);\n}\n.hw-card-meta {\n font-size: 12px;\n color: var(--hw-text-3);\n line-height: 1.3;\n margin-top: 1px;\n}\n.hw-card-arrow {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--hw-primary);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.hw-card-arrow svg {\n width: 14px;\n height: 14px;\n}\n.hw-msgs-tab {\n flex: 1;\n overflow-y: auto;\n padding: 12px 16px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-recent-card {\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n overflow: hidden;\n}\n.hw-recent-header {\n font-size: 12px;\n font-weight: 600;\n color: var(--hw-text-2);\n padding: 12px 14px 0;\n}\n.hw-recent-row {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n position: relative;\n}\n.hw-recent-row:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n.hw-recent-row:active {\n transform: scale(0.995);\n}\n.hw-recent-row--last {\n border-bottom: none;\n}\n.hw-recent-row .hw-conv-card-avatar {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n}\n.hw-recent-row .hw-conv-card-avatar svg:not(.hw-agent-custom svg) {\n width: 18px;\n height: 18px;\n}\n.hw-recent-row .hw-conv-card-name {\n font-size: 13px;\n}\n.hw-recent-row .hw-conv-card-preview {\n font-size: 12px;\n}\n.hw-recent-row--unread .hw-conv-card-name {\n color: var(--hw-text);\n}\n.hw-recent-row--unread .hw-conv-card-time {\n color: var(--hw-primary);\n font-weight: 500;\n}\n.hw-recent-row-badge {\n min-width: 18px;\n height: 18px;\n border-radius: 9px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.hw-recent-see-all {\n display: block;\n width: 100%;\n padding: 10px 14px;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-text);\n background: none;\n border: none;\n border-top: 1px solid var(--hw-border);\n cursor: pointer;\n font-family: inherit;\n transition: background 0.1s;\n}\n.hw-recent-see-all:hover {\n background: rgba(0, 0, 0, 0.02);\n}\n.hw-conv-card {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 14px 16px;\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n cursor: pointer;\n transition: box-shadow 0.15s, transform 0.1s;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n}\n.hw-conv-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.hw-conv-card:active {\n transform: scale(0.99);\n}\n.hw-conv-card-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hw-conv-card-avatar {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-subtle)));\n color: var(--hw-text-3);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-conv-card-avatar svg:not(.hw-agent-custom svg) {\n width: 20px;\n height: 20px;\n}\n.hw-conv-card-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-conv-card-avatar .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-conv-card-avatar--team {\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n}\n.hw-conv-card-avatar-initials {\n font-size: 12px;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 0.02em;\n}\n.hw-conv-card-content {\n flex: 1;\n min-width: 0;\n}\n.hw-conv-card-top {\n display: flex;\n align-items: baseline;\n gap: 8px;\n}\n.hw-conv-card-name {\n flex: 1;\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-conv-card-time {\n font-size: 11px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.hw-conv-card-preview {\n font-size: 13px;\n color: var(--hw-text-2);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 1.4;\n margin-top: 1px;\n}\n.hw-conv-card--unread .hw-conv-card-name {\n color: var(--hw-text);\n}\n.hw-conv-card--unread .hw-conv-card-time {\n color: var(--hw-primary);\n font-weight: 500;\n}\n.hw-conv-card-badge {\n position: absolute;\n top: 12px;\n right: 12px;\n min-width: 18px;\n height: 18px;\n border-radius: 9px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n font-variant-numeric: tabular-nums;\n}\n.hw-empty-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n text-align: center;\n}\n.hw-empty-icon-wrap {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--hw-bg-subtle);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n color: var(--hw-text-3);\n}\n.hw-empty-icon-wrap svg {\n width: 24px;\n height: 24px;\n}\n.hw-empty-title {\n font-size: 15px;\n font-weight: 600;\n color: var(--hw-text);\n margin-bottom: 4px;\n}\n.hw-empty-desc {\n font-size: 13px;\n color: var(--hw-text-3);\n margin-bottom: 20px;\n}\n.hw-empty-btn {\n padding: 8px 20px;\n border-radius: 10px;\n background: var(--hw-primary);\n color: white;\n border: none;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n font-family: inherit;\n transition: background 0.15s;\n}\n.hw-empty-btn:hover {\n background: var(--hw-primary-hover);\n}\n.hw-tabs {\n display: flex;\n border-top: 1px solid var(--hw-border);\n flex-shrink: 0;\n background: var(--hw-bg-subtle);\n}\n.hw-tabs-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n padding: 8px 0;\n border: none;\n background: none;\n cursor: pointer;\n font-family: inherit;\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-text-3);\n transition: color 0.15s;\n}\n.hw-tabs-item svg {\n width: 22px;\n height: 22px;\n overflow: visible;\n}\n.hw-tabs-item--active {\n color: var(--hw-text);\n}\n.hw-tabs-item:hover {\n color: var(--hw-text-2);\n}\n.hw-tabs-item:active {\n transform: scale(0.94);\n transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), color 0.15s;\n}\n.hw-tabs-icon-wrap {\n position: relative;\n display: inline-flex;\n}\n.hw-tabs-badge {\n position: absolute;\n top: -6px;\n right: -10px;\n min-width: 16px;\n height: 16px;\n border-radius: 8px;\n background: var(--hw-primary);\n color: white;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n font-variant-numeric: tabular-nums;\n}\n.hw-messages {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px 14px 8px;\n background: var(--hw-bg-subtle);\n display: flex;\n flex-direction: column;\n gap: 14px;\n overscroll-behavior: contain;\n min-width: 0;\n scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n scrollbar-width: thin;\n}\n.hw-messages::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n.hw-messages::-webkit-scrollbar-track {\n background: transparent;\n}\n.hw-messages::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.16);\n background-clip: content-box;\n border: 3px solid transparent;\n border-radius: 999px;\n}\n.hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.28);\n background-clip: content-box;\n}\n.hw-widget[data-theme=dark] .hw-messages {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n}\n.hw-widget[data-theme=dark] .hw-messages::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n background-clip: content-box;\n}\n.hw-widget[data-theme=dark] .hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n}\n.hw-empty {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n color: var(--hw-text-3);\n text-align: center;\n}\n.hw-empty-icon {\n width: 40px;\n height: 40px;\n margin-bottom: 12px;\n opacity: 0.3;\n}\n.hw-empty-text {\n font-size: 13px;\n}\n.hw-date-sep {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 0;\n}\n.hw-date-sep-line {\n flex: 1;\n height: 1px;\n background: var(--hw-border-md);\n}\n.hw-date-sep-text {\n font-size: 11px;\n color: var(--hw-text-3);\n font-weight: 500;\n white-space: nowrap;\n}\n.hw-msg {\n display: flex;\n padding: 4px 0;\n max-width: 75%;\n min-width: 0;\n animation: hw-msg-appear 0.25s ease-out;\n}\n@keyframes hw-msg-appear {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-msg--visitor {\n align-self: flex-end;\n}\n.hw-msg--team,\n.hw-msg--ai {\n align-self: flex-start;\n}\n.hw-msg--ai {\n width: 100%;\n max-width: 100%;\n}\n.hw-msg-body {\n display: flex;\n flex-direction: column;\n min-width: 0;\n max-width: 100%;\n}\n.hw-msg-bubble {\n padding: 10px 14px;\n border-radius: 16px;\n font-size: 14px;\n line-height: 1.45;\n white-space: pre-wrap;\n word-break: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n}\n.hw-msg--visitor .hw-msg-bubble {\n background: var(--hw-primary);\n color: white;\n border-bottom-right-radius: 4px;\n}\n.hw-msg--team .hw-msg-bubble {\n background: var(--hw-visitor-bubble-bg);\n color: var(--hw-visitor-bubble-text);\n border-bottom-left-radius: 4px;\n}\n.hw-msg--ai .hw-msg-bubble {\n background: var(--hw-visitor-bubble-bg);\n color: var(--hw-text);\n border-bottom-left-radius: 4px;\n white-space: normal;\n max-width: min(100%, 640px);\n}\n.hw-msg--ai .hw-msg-body {\n width: 100%;\n}\n.hw-msg--ai .hw-msg-bubble:has(.hw-code),\n.hw-msg--ai .hw-msg-bubble:has(pre) {\n width: 100%;\n}\n.hw-quick-replies {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 8px;\n}\n.hw-quick-reply-btn {\n font: inherit;\n font-size: 13px;\n font-weight: 500;\n padding: 6px 14px;\n border-radius: 18px;\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n background: var(--hw-bg, #fff);\n color: var(--hw-text-1, #1a1a1a);\n cursor: pointer;\n transition:\n background 120ms ease,\n border-color 120ms ease,\n box-shadow 120ms ease,\n transform 80ms ease;\n line-height: 1.3;\n}\n.hw-quick-reply-btn:hover:not(:disabled) {\n border-color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 8%, transparent);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n.hw-quick-reply-btn:active:not(:disabled) {\n transform: scale(0.97);\n}\n.hw-quick-reply-btn:disabled {\n cursor: default;\n opacity: 0.4;\n}\n.hw-quick-reply-btn[data-tapped=true] {\n background: var(--hw-primary);\n color: white;\n border-color: var(--hw-primary);\n opacity: 1;\n}\n.hw-quick-replies[data-cancelled=true] .hw-quick-reply-btn {\n border-color: var(--hw-border);\n color: var(--hw-text-3);\n}\n.hw-msg--ai .hw-code {\n width: 100%;\n box-sizing: border-box;\n}\n.hw-msg-meta {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n color: var(--hw-text-2);\n margin-top: 2px;\n padding: 0 4px;\n font-variant-numeric: tabular-nums;\n}\n.hw-msg-time {\n white-space: nowrap;\n}\n.hw-msg--visitor .hw-msg-meta {\n text-align: right;\n}\n.hw-msg--team .hw-msg-body,\n.hw-msg--ai .hw-msg-body {\n align-items: flex-start;\n}\n.hw-msg--visitor .hw-msg-body {\n align-items: flex-end;\n}\n.hw-typing {\n display: flex;\n flex-direction: column;\n gap: 3px;\n padding: 8px 0;\n width: fit-content;\n animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-typing-dots {\n display: flex;\n gap: 3px;\n padding: 6px 2px;\n width: fit-content;\n}\n.hw-typing-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--hw-text-3);\n animation: hw-typing-bounce 1.4s infinite;\n}\n.hw-typing-dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-typing-dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n@keyframes hw-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-4px);\n }\n}\n.hw-streaming-cursor {\n display: inline-block;\n width: 2px;\n height: 1em;\n background: currentColor;\n opacity: 0.6;\n margin-left: 1px;\n vertical-align: text-bottom;\n animation: hw-cursor-blink 0.8s step-end infinite;\n}\n@keyframes hw-cursor-blink {\n 50% {\n opacity: 0;\n }\n}\n.hw-link-preview {\n display: flex;\n flex-direction: column;\n gap: 0;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n border-radius: 10px;\n overflow: hidden;\n text-decoration: none;\n color: inherit;\n margin-top: 6px;\n transition: background 0.15s;\n}\n.hw-link-preview:hover {\n background: var(--hw-bg-hover, rgba(0, 0, 0, 0.02));\n}\n.hw-link-preview-img {\n width: 100%;\n height: 56px;\n flex: 0 0 56px;\n object-fit: cover;\n object-position: top;\n border-radius: 0;\n}\n.hw-link-preview-body {\n padding: 8px 10px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n justify-content: center;\n}\n.hw-link-preview-favicon {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n}\n.hw-link-preview-title {\n font-size: 12.5px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hw-text, #1a1a1a);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.hw-link-preview-desc {\n font-size: 11.5px;\n line-height: 1.4;\n color: var(--hw-text-2, #6b7280);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.hw-link-preview-url {\n font-size: 11px;\n color: var(--hw-text-2);\n}\n.hw-msg-links {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-width: 240px;\n}\n.hw-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-loading-dots {\n display: flex;\n gap: 4px;\n}\n.hw-loading-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--hw-text-4);\n animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-loading-dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-loading-dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n@keyframes hw-loading-pulse {\n 0%, 60%, 100% {\n opacity: 0.3;\n transform: scale(0.8);\n }\n 30% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes hw-skeleton-shimmer {\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n}\n.hw-skeleton {\n background:\n linear-gradient(\n 90deg,\n var(--hw-bg-subtle) 25%,\n rgba(0, 0, 0, 0.04) 50%,\n var(--hw-bg-subtle) 75%);\n background-size: 200px 100%;\n animation: hw-skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 6px;\n}\n.hw-skeleton-messages {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 16px;\n gap: 16px;\n}\n.hw-skeleton-msg {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n}\n.hw-skeleton-msg--right {\n flex-direction: row-reverse;\n}\n.hw-skeleton-avatar {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n flex-shrink: 0;\n}\n.hw-skeleton-bubble {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.hw-skeleton-line {\n height: 12px;\n border-radius: 6px;\n}\n.hw-skeleton-convs {\n display: flex;\n flex-direction: column;\n padding: 8px 0;\n}\n.hw-skeleton-conv {\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 10px 16px;\n}\n.hw-skeleton-conv-avatar {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n flex-shrink: 0;\n}\n.hw-skeleton-conv-lines {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.hw-skeleton-content {\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n gap: 12px;\n}\n.hw-skeleton-content-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px;\n border-radius: 10px;\n background: var(--hw-bg);\n}\n.hw-skeleton-title {\n height: 22px;\n width: 65%;\n border-radius: 6px;\n}\n.hw-skeleton-badge {\n width: 42px;\n height: 18px;\n border-radius: 9px;\n}\n.hw-skeleton-date {\n width: 60px;\n height: 12px;\n border-radius: 6px;\n}\n.hw-skeleton-h2 {\n height: 16px;\n border-radius: 6px;\n}\n.hw-skeleton-bullet {\n padding-left: 20px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-skeleton-bullet-line {\n height: 14px;\n border-radius: 7px;\n}\n.hw-email-card {\n max-width: min(100%, 340px);\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: none;\n box-shadow: none;\n animation: hw-email-slide-in 0.25s ease-out;\n}\n@keyframes hw-email-slide-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-email-card-title {\n font-size: 14px;\n font-weight: 550;\n color: var(--hw-text, #1a1a1a);\n line-height: 1.3;\n margin: 0 0 2px;\n}\n.hw-email-card-subtitle {\n font-size: 12px;\n color: var(--hw-text-2, #888);\n line-height: 1.4;\n margin: 0;\n}\n.hw-email-card-row {\n max-width: 300px;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 9px;\n padding: 3px 3px 3px 12px;\n border-radius: 999px;\n border: 1px solid var(--hw-border, rgba(0,0,0,0.1));\n background: var(--hw-bg-subtle, #fafafa);\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-email-card-row:focus-within {\n border-color: var(--hw-focus-border, rgba(0,0,0,0.2));\n box-shadow: 0 0 0 2px var(--hw-focus-ring, rgba(0,0,0,0.06));\n}\n.hw-email-card-input {\n flex: 1;\n min-width: 0;\n padding: 6px 0;\n border: 0;\n background: transparent;\n color: var(--hw-text, #1a1a1a);\n font: inherit;\n font-size: 13px;\n outline: none;\n}\n.hw-email-card-input::placeholder {\n color: var(--hw-text-3, #999);\n}\n.hw-email-card-row:has(.hw-email-card-input--error) {\n border-color: #ef4444;\n}\n.hw-email-card-submit {\n flex: none;\n display: grid;\n place-items: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 50%;\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n}\n.hw-email-card-submit:hover:not(:disabled) {\n transform: scale(1.06);\n}\n.hw-email-card-submit:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.hw-email-card--success {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n font-size: 13px;\n color: var(--hw-text-2, #888);\n animation: hw-email-slide-in 0.2s ease-out;\n}\n.hw-email-card--success svg {\n flex-shrink: 0;\n}\n.hw-composer {\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n background: transparent;\n flex-shrink: 0;\n}\n.hw-composer--compact {\n padding: 8px 12px;\n}\n.hw-composer-box {\n display: flex;\n flex-direction: column;\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n border-radius: 16px;\n overflow: hidden;\n transition: border-color 0.2s;\n background: var(--hw-bg);\n}\n.hw-composer-box:focus-within {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-composer-input {\n resize: none;\n border: none;\n padding: 12px 16px 4px;\n font-size: 14px;\n font-family: inherit;\n line-height: 1.4;\n outline: none;\n min-height: 40px;\n max-height: 220px;\n background: transparent;\n color: var(--hw-text);\n field-sizing: content;\n}\n.hw-composer-input:focus {\n outline: none;\n}\n.hw-composer-input:focus-visible {\n outline: none;\n}\n.hw-composer-input::placeholder {\n color: var(--hw-text-4);\n}\n.hw-composer-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 10px 10px;\n}\n.hw-composer-toolbar-left {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.hw-composer-send {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-composer-send:active:not(:disabled) {\n transform: scale(0.9);\n}\n.hw-composer-send--active {\n background: var(--hw-primary);\n color: white;\n}\n.hw-composer-send--inactive {\n background: var(--hw-border);\n color: var(--hw-text-4);\n cursor: default;\n}\n.hw-composer-send svg {\n width: 14px;\n height: 14px;\n}\n.hw-composer-charcount {\n font-size: 11px;\n color: var(--hw-text-3);\n font-variant-numeric: tabular-nums;\n opacity: 1;\n transform: translateY(0);\n transition:\n color 180ms cubic-bezier(0.23, 1, 0.32, 1),\n opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n@starting-style {\n .hw-composer-charcount {\n opacity: 0;\n transform: translateY(3px);\n }\n}\n.hw-composer-charcount--over {\n color: #ef4444;\n font-weight: 600;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-composer-charcount {\n transform: none;\n transition: color 160ms ease, opacity 160ms ease;\n }\n @starting-style {\n .hw-composer-charcount {\n transform: none;\n }\n }\n}\n.hw-composer-previews {\n display: flex;\n gap: 6px;\n padding: 8px 10px 0;\n overflow-x: auto;\n scrollbar-width: none;\n}\n.hw-composer-previews::-webkit-scrollbar {\n display: none;\n}\n.hw-composer-preview {\n position: relative;\n width: 48px;\n height: 48px;\n border-radius: 8px;\n overflow: hidden;\n flex-shrink: 0;\n background: var(--hw-border);\n cursor: pointer;\n}\n.hw-composer-preview--error {\n outline: 2px solid #ef4444;\n outline-offset: -2px;\n}\n.hw-composer-preview-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-composer-preview-file {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--hw-bg-subtle);\n}\n.hw-composer-preview-ext {\n font-size: 10px;\n font-weight: 700;\n color: var(--hw-text-3);\n text-transform: uppercase;\n}\n.hw-composer-preview-loader {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.35);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-composer-preview-loader::after {\n content: "";\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: hw-spin 0.6s linear infinite;\n}\n@keyframes hw-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.hw-composer-preview-badge {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #ef4444;\n color: white;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-composer-preview-remove {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: none;\n background: rgba(0, 0, 0, 0.55);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.15s;\n}\n.hw-composer-preview-remove svg {\n width: 10px;\n height: 10px;\n}\n.hw-composer-preview:hover .hw-composer-preview-remove {\n opacity: 1;\n}\n.hw-composer-attach {\n width: 28px;\n height: 28px;\n border: none;\n background: none;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n opacity: 0.7;\n transition: opacity 0.15s;\n}\n.hw-composer-attach:hover {\n opacity: 1;\n}\n.hw-composer-attach svg {\n width: 16px;\n height: 16px;\n}\n.hw-msg-images {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-bottom: 4px;\n}\n.hw-msg-image-link {\n display: block;\n border-radius: 14px;\n overflow: hidden;\n line-height: 0;\n}\n.hw-msg-image {\n max-width: 140px;\n max-height: 80px;\n object-fit: cover;\n border-radius: 8px;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-msg-files {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 4px;\n}\n.hw-msg-file {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 10px;\n background: var(--hw-bg-subtle);\n text-decoration: none;\n color: var(--hw-text);\n transition: background 0.15s;\n}\n.hw-msg-file:hover {\n background: var(--hw-border);\n}\n.hw-msg-file-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n color: var(--hw-text-3);\n}\n.hw-msg-file-icon svg {\n width: 100%;\n height: 100%;\n}\n.hw-msg-file-info {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.hw-msg-file-name {\n font-size: 13px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.hw-msg-file-size {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-msg-image-link {\n cursor: pointer;\n border: none;\n padding: 0;\n background: none;\n display: block;\n line-height: 0;\n}\n.hw-hover-preview {\n position: fixed;\n z-index: 2147483001;\n padding: 6px;\n border-radius: 14px;\n background: white;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);\n cursor: pointer;\n animation: hw-hover-in 0.15s ease-out;\n}\n@media (prefers-color-scheme: dark) {\n .hw-hover-preview {\n background: #1c1c1e;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n}\n@keyframes hw-hover-in {\n from {\n opacity: 0;\n transform: scale(0.96) translateY(4px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n.hw-hover-preview-img {\n width: 100%;\n max-height: 200px;\n object-fit: contain;\n border-radius: 10px;\n display: block;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-hover-preview--doc {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n}\n.hw-hover-preview-doc-icon {\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n}\n.hw-hover-preview-doc-icon svg {\n width: 100%;\n height: 100%;\n}\n.hw-hover-preview-doc-info {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.hw-hover-preview-doc-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.hw-hover-preview-doc-hint {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-event {\n display: flex;\n justify-content: center;\n padding: 8px 16px;\n}\n.hw-event-text {\n font-size: 12px;\n color: var(--hw-text-3);\n text-align: center;\n}\n.hw-event--card {\n justify-content: flex-start;\n align-items: center;\n gap: 10px;\n background: var(--hw-bg-subtle);\n padding: 10px 14px;\n border-radius: 12px;\n margin: 4px 16px;\n}\n.hw-event-avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-hover, #e0e0e0)));\n color: var(--hw-text-2, #555);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 600;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-event-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-event-avatar .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-event-body {\n font-size: 13px;\n line-height: 1.3;\n}\n.hw-event-name {\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-event-action {\n color: var(--hw-text-2);\n}\n.hw-resolved-banner {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 16px;\n border-top: 1px solid var(--hw-border);\n background: var(--hw-bg-subtle);\n color: var(--hw-text-2);\n font-size: 13px;\n flex-shrink: 0;\n}\n.hw-new {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--hw-bg-subtle);\n}\n.hw-new-body {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 24px;\n text-align: center;\n}\n.hw-new-welcome {\n flex: 1;\n padding: 16px 20px;\n overflow-y: auto;\n}\n.hw-new-heading {\n font-size: 17px;\n font-weight: 600;\n color: var(--hw-text);\n margin-bottom: 6px;\n}\n.hw-new-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n margin-bottom: 24px;\n}\n.hw-powered {\n text-align: center;\n padding: 8px;\n font-size: 11px;\n color: var(--hw-text-4);\n flex-shrink: 0;\n}\n.hw-powered a {\n color: var(--hw-text-2);\n text-decoration: none;\n font-weight: 500;\n}\n.hw-powered a:hover {\n color: var(--hw-text);\n}\n@media (max-width: 479px) {\n .hw-widget {\n bottom: 16px;\n right: 16px;\n left: auto;\n }\n .hw-window {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: var(--hw-visible-height, 100%);\n border-radius: 0;\n animation: hw-mob-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n }\n .hw-window--closing {\n animation: hw-mob-down 0.2s ease forwards;\n }\n @keyframes hw-mob-up {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes hw-mob-down {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n }\n .hw-hero {\n padding-top: calc(20px + env(safe-area-inset-top, 0px));\n }\n .hw-header {\n padding-top: env(safe-area-inset-top, 0px);\n }\n .hw-tabs {\n padding-bottom: env(safe-area-inset-bottom, 0px);\n }\n .hw-composer {\n padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n }\n .hw-powered {\n padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));\n }\n .hw-window:has(.hw-powered) .hw-composer {\n padding-bottom: 8px;\n }\n .hw-window:has(.hw-powered) .hw-tabs {\n padding-bottom: 0;\n }\n .hw-header-close,\n .hw-header-back,\n .hw-header-action {\n width: 34px;\n height: 34px;\n }\n .hw-composer-send {\n width: 40px;\n height: 40px;\n }\n .hw-window ~ .hw-bubble {\n display: none;\n }\n .hw-messages {\n padding: 12px 14px;\n }\n .hw-msg {\n max-width: 82%;\n }\n .hw-msg--ai {\n max-width: 100%;\n }\n}\n.hw-preview {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n width: 300px;\n max-width: calc(100vw - 40px);\n background: var(--hw-bg);\n border: 1px solid var(--hw-border);\n border-radius: 16px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n animation: hw-preview-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n}\n.hw-preview.hw-preview--anchored {\n position: static;\n bottom: auto;\n right: auto;\n width: 100%;\n max-width: 100%;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar {\n background: none;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar img,\n.hw-preview.hw-preview--anchored .hw-preview-avatar svg:not(.hw-agent-custom svg) {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.hw-preview:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n@keyframes hw-preview-in {\n from {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n@keyframes hw-preview-out {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n}\n.hw-preview-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px 0;\n}\n.hw-preview-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background:\n linear-gradient(\n 135deg,\n var(--hw-primary),\n color-mix(in srgb, var(--hw-primary) 50%, black));\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-preview-avatar svg:not(.hw-agent-custom svg) {\n width: 16px;\n height: 16px;\n}\n.hw-preview-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.hw-preview-name {\n font-size: 13px;\n font-weight: 600;\n color: var(--hw-text);\n flex: 1;\n}\n.hw-preview-close {\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: background 0.15s, color 0.15s;\n flex-shrink: 0;\n}\n.hw-preview-close:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text-2);\n}\n.hw-preview-close:active {\n transform: scale(0.90);\n transition:\n transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.15s,\n color 0.15s;\n}\n.hw-preview-close svg {\n width: 12px;\n height: 12px;\n}\n.hw-preview-body {\n padding: 4px 14px;\n font-size: 14px;\n line-height: 1.45;\n color: var(--hw-text-2);\n}\n.hw-preview-body:first-of-type {\n padding-top: 8px;\n}\n.hw-preview-body:last-child {\n padding-bottom: 14px;\n}\n.hw-preview-footer {\n margin-top: 2px;\n padding: 8px 14px 12px;\n border-top: 1px solid var(--hw-border);\n font-size: 11px;\n line-height: 1.3;\n color: var(--hw-text-2);\n opacity: 0.65;\n}\n.hw-preview-prompt {\n padding: 2px 14px 6px;\n font-size: 14px;\n font-weight: 500;\n color: var(--hw-text-1);\n}\n.hw-preview-quick-replies {\n padding: 0 14px 14px;\n margin-top: 0;\n}\n.hw-awaiting {\n margin-top: 2px;\n padding-left: 44px;\n font-size: 11px;\n line-height: 1.4;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-preview-dock {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 8px;\n pointer-events: none;\n}\n.hw-preview-dock > .hw-preview,\n.hw-preview-dock > .hw-preview-stack {\n position: relative;\n bottom: auto;\n right: auto;\n pointer-events: auto;\n}\n.hw-preview--closing {\n animation: hw-preview-out 0.2s ease-in forwards;\n}\n.hw-preview-stack {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-preview-stack .hw-preview {\n position: relative;\n bottom: auto;\n right: auto;\n}\n.hw-preview-stack.hw-preview-stack--anchored {\n position: static;\n bottom: auto;\n right: auto;\n width: 100%;\n}\n.hw-preview-more {\n align-self: flex-end;\n padding: 4px 10px;\n border: 0;\n border-radius: 999px;\n background: var(--hw-bg);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--hw-border);\n color: var(--hw-text-2);\n font: inherit;\n font-size: 12px;\n line-height: 1.4;\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n}\n.hw-preview-more:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n}\n.hw-preview--announcement {\n width: 340px;\n}\n.hw-preview--announcement .hw-preview-body--title {\n font-weight: 600;\n color: var(--hw-text);\n font-size: 15px;\n line-height: 1.3;\n padding-top: 10px;\n}\n.hw-preview--announcement .hw-preview-body--desc {\n font-size: 13px;\n color: var(--hw-text-2);\n line-height: 1.5;\n padding-bottom: 16px;\n}\n.hw-announcement-badge {\n display: inline-block;\n margin: 8px 14px 0;\n padding: 2px 8px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 10%, transparent);\n border-radius: 4px;\n}\n.hw-whats-new {\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n overflow: hidden;\n}\n.hw-whats-new-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 14px 0;\n}\n.hw-whats-new-title {\n font-size: 12px;\n font-weight: 600;\n color: var(--hw-text-2);\n}\n.hw-whats-new-view-all {\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-primary);\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-family: inherit;\n}\n.hw-whats-new-view-all:hover {\n opacity: 0.8;\n}\n.hw-whats-new-list {\n display: flex;\n flex-direction: column;\n}\n.hw-whats-new-item {\n display: flex;\n flex-direction: column;\n gap: 2px;\n width: 100%;\n padding: 10px 14px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n transition: background-color 140ms ease;\n}\n.hw-whats-new-item:last-child {\n border-bottom: none;\n}\n.hw-whats-new-item:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n.hw-whats-new-item-top {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.hw-whats-new-badge {\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--hw-primary);\n}\n.hw-whats-new-time {\n font-size: 11px;\n color: var(--hw-text-3);\n margin-left: auto;\n}\n.hw-whats-new-item-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--hw-text);\n line-height: 1.3;\n display: flex;\n align-items: baseline;\n gap: 8px;\n}\n.hw-whats-new-time-inline {\n font-size: 11px;\n font-weight: 400;\n color: var(--hw-text-3);\n margin-left: auto;\n flex-shrink: 0;\n}\n.hw-whats-new-item-body {\n font-size: 12px;\n color: var(--hw-text-2);\n line-height: 1.4;\n}\n.hw-tabs-dot {\n position: absolute;\n top: -2px;\n right: -6px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--hw-primary);\n animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.hw-bubble-badge-dot {\n display: block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: white;\n}\n.hw-content-search {\n padding: 10px 16px;\n}\n.hw-content-search-box {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--hw-bg);\n border: 1px solid var(--hw-border-md);\n border-radius: 10px;\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-content-search-box:focus-within {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-content-search-input {\n flex: 1;\n border: none !important;\n outline: none !important;\n box-shadow: none !important;\n background: none;\n font-size: 13px;\n color: var(--hw-text-1);\n font-family: inherit;\n line-height: 1;\n -webkit-appearance: none;\n}\n.hw-content-search-input:focus,\n.hw-content-search-input:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n}\n.hw-content-search-input::placeholder {\n color: var(--hw-text-3);\n}\n.hw-content-search-icon {\n width: 15px;\n height: 15px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n}\n.hw-content-list {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.hw-content-entries {\n flex: 1;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.hw-content-entry {\n display: block;\n width: 100%;\n padding: 14px 16px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n transition: background-color 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n}\n.hw-content-entry:hover {\n background: var(--hw-bg-hover);\n}\n.hw-content-entry:active {\n background: var(--hw-border);\n}\n.hw-content-entry:last-child {\n border-bottom: none;\n}\n.hw-content-entry-main {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hw-content-entry-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n.hw-content-entry-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text-1);\n line-height: 1.3;\n}\n.hw-content-entry-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.hw-content-entry-meta {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 2px;\n}\n.hw-content-entry-badge {\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-text-3);\n background: var(--hw-bg-hover);\n padding: 1px 6px;\n border-radius: 4px;\n}\n.hw-content-entry-date {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-content-entry-chevron {\n width: 16px;\n height: 16px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n opacity: 0.5;\n}\n.hw-content-detail {\n padding: 16px;\n overflow-y: auto;\n overscroll-behavior: contain;\n flex: 1;\n min-height: 0;\n}\n.hw-content-detail-header {\n margin-bottom: 16px;\n}\n.hw-content-detail-title {\n font-size: 17px;\n font-weight: 700;\n color: var(--hw-text-1);\n margin: 0 0 6px;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.hw-content-detail-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n.hw-content-detail-date {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-content-detail-body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--hw-text-1);\n}\n.hw-markdown h1 {\n font-size: 17px;\n font-weight: 700;\n margin: 0;\n}\n.hw-markdown h2 {\n font-size: 15px;\n font-weight: 600;\n margin: 0;\n}\n.hw-markdown h3 {\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n}\n.hw-markdown p {\n margin: 0;\n}\n.hw-markdown p:empty,\n.hw-markdown div:empty,\n.hw-markdown p:has(> br:only-child),\n.hw-markdown div:has(> br:only-child) {\n display: none;\n}\n.hw-markdown > * + * {\n margin-top: 12px;\n}\n.hw-markdown > * + h1,\n.hw-markdown > * + h2 {\n margin-top: 20px;\n}\n.hw-markdown > * + h3 {\n margin-top: 16px;\n}\n.hw-markdown > h1 + *,\n.hw-markdown > h2 + *,\n.hw-markdown > h3 + * {\n margin-top: 8px;\n}\n.hw-markdown > *:first-child {\n margin-top: 0;\n}\n.hw-markdown > *:last-child {\n margin-bottom: 0;\n}\n.hw-markdown > br {\n display: none;\n}\n.hw-markdown ul,\n.hw-markdown ol {\n margin: 0;\n padding-left: 20px;\n}\n.hw-markdown li {\n margin: 4px 0;\n}\n.hw-markdown code {\n font-family:\n ui-monospace,\n "SF Mono",\n monospace;\n font-size: 12px;\n background: var(--hw-bg-hover);\n padding: 1px 5px;\n border-radius: 4px;\n}\n.hw-table-wrap {\n margin: 10px 0;\n overflow-x: auto;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n border-radius: 10px;\n}\n.hw-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n.hw-table th {\n text-align: left;\n font-weight: 600;\n font-size: 12px;\n padding: 8px 12px;\n background: var(--hw-bg-hover, #f5f5f4);\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n}\n.hw-table td {\n padding: 8px 12px;\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n vertical-align: top;\n}\n.hw-table tbody tr:last-child td {\n border-bottom: none;\n}\n.hw-code {\n margin: 10px 0;\n border-radius: 10px;\n overflow: hidden;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n background: var(--hw-bg-hover, #f5f5f4);\n font-family:\n ui-monospace,\n "SF Mono",\n "Menlo",\n monospace;\n}\n.hw-code-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n padding: 7px 8px 7px 12px;\n font-size: 11px;\n color: var(--hw-text-2, #6b7280);\n background: rgba(0, 0, 0, 0.03);\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n}\n.hw-code-lang {\n text-transform: lowercase;\n letter-spacing: 0.02em;\n font-weight: 500;\n}\n.hw-code-actions {\n display: inline-flex;\n align-items: center;\n gap: 1px;\n}\n.hw-code-action {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n font-family: inherit;\n color: var(--hw-text-2, #6b7280);\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n cursor: pointer;\n opacity: 0.62;\n transition:\n background 120ms ease,\n color 120ms ease,\n opacity 120ms ease,\n scale 120ms ease;\n}\n.hw-code-action:hover {\n color: var(--hw-text, #111);\n background: rgba(0, 0, 0, 0.06);\n opacity: 1;\n}\n.hw-code-action:active {\n scale: 0.96;\n}\n.hw-code-action svg {\n width: 13px;\n height: 13px;\n}\n.hw-code-copy-icon,\n.hw-code-check-icon {\n position: absolute;\n inset: 50% auto auto 50%;\n transition:\n opacity 180ms cubic-bezier(0.2, 0, 0, 1),\n scale 180ms cubic-bezier(0.2, 0, 0, 1),\n filter 180ms cubic-bezier(0.2, 0, 0, 1);\n translate: -50% -50%;\n}\n.hw-code-check-icon {\n filter: blur(4px);\n opacity: 0;\n scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-copy-icon {\n filter: blur(4px);\n opacity: 0;\n scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-check-icon {\n filter: blur(0);\n opacity: 1;\n scale: 1;\n}\n.hw-code-copy-label {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n.hw-code-copy--copied {\n color: #16a34a;\n}\n.hw-code-copy--failed {\n color: #dc2626;\n}\n.hw-code pre {\n margin: 0;\n padding: 10px 12px;\n background: transparent;\n border-radius: 0;\n overflow-x: auto;\n max-width: 100%;\n max-height: 320px;\n scrollbar-color: rgba(0, 0, 0, 0.22) transparent;\n scrollbar-width: thin;\n}\n.hw-code pre::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n.hw-code pre::-webkit-scrollbar-track {\n background: transparent;\n}\n.hw-code pre::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.18);\n background-clip: content-box;\n border: 3px solid transparent;\n border-radius: 999px;\n}\n.hw-code pre::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.28);\n background-clip: content-box;\n}\n.hw-code pre code {\n display: block;\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.55;\n white-space: pre;\n color: var(--hw-text, #111);\n}\n@media (prefers-color-scheme: dark) {\n .hw-code {\n background: rgba(255, 255, 255, 0.04);\n border-color: rgba(255, 255, 255, 0.08);\n }\n .hw-code-header {\n background: rgba(255, 255, 255, 0.03);\n border-bottom-color: rgba(255, 255, 255, 0.06);\n }\n .hw-code-action:hover,\n .hw-code-action:focus-visible {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-code pre {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n }\n .hw-code pre::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.22);\n background-clip: content-box;\n }\n .hw-code pre::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n }\n}\n.hw-markdown pre {\n margin: 8px 0;\n padding: 10px 12px;\n background: var(--hw-bg-hover);\n border-radius: 8px;\n overflow-x: auto;\n max-width: 100%;\n}\n.hw-markdown pre code {\n display: block;\n background: transparent;\n padding: 0;\n border-radius: 0;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n word-break: normal;\n color: inherit;\n}\n.hw-msg-bubble pre {\n margin: 6px 0;\n padding: 8px 10px;\n background: rgba(0, 0, 0, 0.06);\n border-radius: 6px;\n overflow-x: auto;\n max-width: 100%;\n}\n.hw-msg-bubble pre code {\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n}\n.hw-msg-bubble .hw-code pre {\n margin: 0;\n padding: 10px 12px;\n background: transparent;\n border-radius: 0;\n}\n.hw-msg-bubble .hw-code pre code {\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.55;\n}\n.hw-msg--team .hw-msg-bubble pre,\n.hw-msg--visitor .hw-msg-bubble pre {\n background: rgba(255, 255, 255, 0.12);\n}\n.hw-markdown blockquote {\n margin: 0 0 12px;\n padding: 8px 12px;\n border-left: 3px solid var(--hw-border);\n color: var(--hw-text-2);\n font-style: italic;\n}\n.hw-markdown a {\n color: var(--hw-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.hw-markdown img {\n max-width: 100%;\n border-radius: 8px;\n margin: 8px 0;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-markdown hr {\n border: none;\n border-top: 1px solid var(--hw-border);\n margin: 16px 0;\n}\n.hw-content-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n.hw-content-empty-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text-1);\n margin-bottom: 4px;\n}\n.hw-content-empty-desc {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-content-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n.hw-content-load-more {\n display: block;\n width: 100%;\n padding: 10px;\n border: none;\n background: none;\n color: var(--hw-primary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n text-align: center;\n}\n.hw-content-load-more:hover {\n background: var(--hw-bg-hover);\n}\n.hw-content-load-more:disabled {\n opacity: 0.5;\n cursor: default;\n}\n@media (hover: none) {\n .hw-composer-preview-remove {\n opacity: 0.7;\n }\n}\n.hw-composer--dragging .hw-composer-box {\n border-color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 4%, transparent);\n}\n.hw-composer-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--hw-bg) 90%, transparent);\n border: 2px dashed var(--hw-primary);\n border-radius: 12px;\n z-index: 10;\n pointer-events: none;\n animation: hw-drop-pulse 1.5s ease-in-out infinite;\n}\n.hw-composer-drop-text {\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-primary);\n}\n@keyframes hw-drop-pulse {\n 0%, 100% {\n opacity: 0.8;\n }\n 50% {\n opacity: 1;\n }\n}\n.hw-disconnect {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n padding: 7px 14px;\n background: var(--hw-bg-hover);\n color: var(--hw-text-2);\n font-size: 11.5px;\n font-weight: 500;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 0;\n animation: hw-disconnect-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);\n}\n@keyframes hw-disconnect-in {\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-disconnect-spinner {\n width: 9px;\n height: 9px;\n border: 1.5px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n opacity: 0.75;\n flex-shrink: 0;\n animation: hw-spin 0.7s linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-disconnect {\n animation: none;\n }\n .hw-disconnect-spinner {\n animation: none;\n border-top-color: currentColor;\n opacity: 0.5;\n }\n}\n.hw-error-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 24px;\n text-align: center;\n gap: 12px;\n}\n.hw-error-icon {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: #fef2f2;\n color: #ef4444;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-error-icon svg {\n width: 24px;\n height: 24px;\n}\n.hw-error-title {\n font-size: 15px;\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-error-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n}\n.hw-error-btn {\n padding: 8px 20px;\n border: 1px solid var(--hw-border-md);\n border-radius: 8px;\n background: var(--hw-bg);\n color: var(--hw-text);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n.hw-error-btn:hover {\n background: var(--hw-bg-hover);\n}\n.hw-send-error {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #fef2f2;\n color: #dc2626;\n font-size: 12px;\n font-weight: 500;\n flex-shrink: 0;\n animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-send-error-retry {\n margin-left: auto;\n padding: 2px 8px;\n border: 1px solid #fca5a5;\n border-radius: 4px;\n background: none;\n color: #dc2626;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n}\n.hw-send-error-retry:hover {\n background: #fee2e2;\n}\n.hw-resolved {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--hw-border);\n flex-shrink: 0;\n}\n.hw-resolved-text {\n font-size: 13px;\n color: var(--hw-text-3);\n font-weight: 500;\n}\n.hw-resolved-actions {\n display: flex;\n gap: 8px;\n}\n.hw-resolved-reopen {\n padding: 6px 16px;\n border: 1px solid var(--hw-border-md);\n border-radius: 8px;\n background: var(--hw-bg);\n color: var(--hw-text);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n.hw-resolved-reopen:hover {\n background: var(--hw-bg-hover);\n}\n.hw-csat {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n.hw-csat-label {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-csat-buttons {\n display: flex;\n gap: 8px;\n}\n.hw-csat-btn {\n width: 36px;\n height: 36px;\n border: 1px solid var(--hw-border-md);\n border-radius: 8px;\n background: var(--hw-bg);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n transition:\n transform 0.15s,\n border-color 0.15s,\n background 0.15s;\n}\n.hw-csat-btn:hover {\n transform: scale(1.1);\n border-color: var(--hw-text-3);\n}\n.hw-csat-btn--selected {\n border-color: var(--hw-primary);\n background: var(--hw-bg-hover);\n transform: scale(1.15);\n}\n.hw-csat-thanks {\n font-size: 12px;\n color: #22c55e;\n font-weight: 500;\n animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-load-more-trigger {\n display: flex;\n justify-content: center;\n min-height: 1px;\n}\n.hw-load-more-trigger:has(.hw-load-more-spinner) {\n padding: 8px 0;\n}\n.hw-load-more-spinner {\n display: flex;\n gap: 3px;\n}\n.hw-load-more-spinner > div {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--hw-text-4);\n animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-load-more-spinner > div:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-load-more-spinner > div:nth-child(3) {\n animation-delay: 0.4s;\n}\n.hw-drag-handle {\n display: none;\n}\n@media (max-width: 479px) {\n .hw-drag-handle {\n display: flex;\n justify-content: center;\n padding: 8px 0 4px;\n flex-shrink: 0;\n }\n .hw-drag-handle-pill {\n width: 32px;\n height: 4px;\n border-radius: 2px;\n background: var(--hw-text-4);\n }\n}\n.hw-msg-bubble p {\n margin: 0 0 8px;\n}\n.hw-msg-bubble p:last-child {\n margin-bottom: 0;\n}\n.hw-msg-bubble strong {\n font-weight: 600;\n}\n.hw-msg-bubble em {\n font-style: italic;\n}\n.hw-msg-bubble a {\n color: inherit;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);\n word-break: normal;\n overflow-wrap: anywhere;\n}\n.hw-msg-bubble a:hover {\n opacity: 0.8;\n}\n.hw-msg--visitor .hw-msg-bubble a {\n color: rgba(255, 255, 255, 0.9);\n}\n.hw-msg--visitor .hw-msg-bubble a:hover {\n color: white;\n}\n.hw-msg-bubble ul,\n.hw-msg-bubble ol {\n margin: 4px 0 8px;\n padding-left: 20px;\n}\n.hw-msg-bubble li {\n margin: 2px 0;\n}\n.hw-msg-bubble code {\n padding: 1px 4px;\n border-radius: 3px;\n background: rgba(0, 0, 0, 0.06);\n font-size: 0.9em;\n font-family:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n monospace;\n}\n.hw-msg-bubble pre {\n margin: 4px 0 8px;\n padding: 8px 10px;\n border-radius: 6px;\n background: rgba(0, 0, 0, 0.06);\n overflow-x: auto;\n font-size: 0.85em;\n}\n.hw-msg-bubble pre code {\n padding: 0;\n background: none;\n}\n.hw-msg-bubble blockquote {\n margin: 4px 0 8px;\n padding: 4px 0 4px 12px;\n border-left: 3px solid var(--hw-border-md);\n color: var(--hw-text-2);\n}\n.hw-widget[data-theme=dark] {\n --hw-bg: #1c1c1e;\n --hw-bg-subtle: #161618;\n --hw-bg-hover: #2c2c2e;\n --hw-border: rgba(255, 255, 255, 0.08);\n --hw-border-md: rgba(255, 255, 255, 0.14);\n --hw-text: #f5f5f5;\n --hw-text-1: #f5f5f5;\n --hw-text-2: #a1a1aa;\n --hw-text-3: #71717a;\n --hw-text-4: #52525b;\n --hw-visitor-bubble-bg: #2c2c2e;\n --hw-visitor-bubble-text: #f5f5f5;\n --hw-focus-border: rgba(255, 255, 255, 0.28);\n --hw-focus-ring: rgba(255, 255, 255, 0.08);\n --hw-brand: #f5f5f5;\n --hw-on-brand: #1c1c1e;\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light]) .hw-messages {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n }\n .hw-widget:not([data-theme=light]) .hw-messages::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n background-clip: content-box;\n }\n .hw-widget:not([data-theme=light]) .hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n }\n .hw-widget:not([data-theme=light]) {\n --hw-bg: #1c1c1e;\n --hw-bg-subtle: #161618;\n --hw-bg-hover: #2c2c2e;\n --hw-border: rgba(255, 255, 255, 0.08);\n --hw-border-md: rgba(255, 255, 255, 0.14);\n --hw-text: #f5f5f5;\n --hw-text-1: #f5f5f5;\n --hw-text-2: #a1a1aa;\n --hw-text-3: #71717a;\n --hw-text-4: #52525b;\n --hw-visitor-bubble-bg: #2c2c2e;\n --hw-visitor-bubble-text: #f5f5f5;\n --hw-focus-border: rgba(255, 255, 255, 0.28);\n --hw-focus-ring: rgba(255, 255, 255, 0.08);\n --hw-brand: #f5f5f5;\n --hw-on-brand: #1c1c1e;\n }\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light]) .hw-header {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-header-bot-icon {\n background: var(--hw-bg-hover);\n }\n .hw-header-name,\n .hw-header-title {\n color: var(--hw-text);\n }\n .hw-header-status {\n color: var(--hw-text-2);\n }\n .hw-header-close,\n .hw-header-back {\n color: var(--hw-text-2);\n }\n .hw-header-close:hover,\n .hw-header-back:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n }\n .hw-content-entry {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-content-entry:hover {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border-md);\n }\n .hw-content-empty,\n .hw-empty {\n color: var(--hw-text-3);\n }\n .hw-conv-card {\n border-color: var(--hw-border);\n }\n .hw-recent-row {\n border-color: var(--hw-border);\n }\n .hw-composer-drop-overlay {\n background: rgba(0, 0, 0, 0.6);\n color: var(--hw-text);\n }\n .hw-composer--dragging .hw-composer-box {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n }\n .hw-hero {\n background:\n linear-gradient(\n 160deg,\n color-mix(in srgb, var(--hw-primary) 40%, black) 0%,\n var(--hw-primary) 50%,\n color-mix(in srgb, var(--hw-primary) 25%, black) 100%);\n }\n .hw-sheet {\n background: var(--hw-bg);\n }\n .hw-card {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border);\n }\n .hw-card:hover {\n background: #333;\n }\n .hw-window {\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);\n }\n .hw-bubble:focus-visible {\n outline-color: var(--hw-text-3);\n }\n .hw-msg--visitor .hw-msg-bubble {\n background: var(--hw-primary);\n color: white;\n }\n .hw-msg-bubble code {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-msg-bubble pre {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-composer-box {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-composer-input {\n color: var(--hw-text);\n }\n .hw-tabs {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-conv-card:hover,\n .hw-recent-row:hover {\n background: var(--hw-bg-hover);\n }\n .hw-send-error {\n background: #450a0a;\n color: #fca5a5;\n }\n .hw-error-icon {\n background: #450a0a;\n color: #f87171;\n }\n .hw-resolved {\n border-color: var(--hw-border);\n }\n .hw-resolved-reopen,\n .hw-csat-btn {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border-md);\n color: var(--hw-text);\n }\n .hw-hover-preview {\n background: #1c1c1e;\n border-color: var(--hw-border);\n }\n .hw-content-search-box {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border-md);\n }\n .hw-preview {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n}\n.hw-widget[data-hw-placement=docked] {\n --hw-dock-width: 600px;\n --hw-dock-bar-width: 480px;\n --hw-dock-inset: 24px;\n --hw-bar-max-height: 148px;\n --hw-dock-surface: #ffffff;\n --hw-dock-on-surface: #111111;\n --hw-dock-pill-bg: rgba(44, 44, 48, 0.66);\n --hw-dock-pill-fg: rgba(255, 255, 255, 0.94);\n --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] {\n z-index: 2147483000;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock {\n position: fixed;\n left: 0;\n right: 0;\n bottom: var(--hw-dock-inset);\n z-index: 2147483000;\n display: flex;\n flex-direction: column;\n align-items: center;\n pointer-events: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock > * {\n pointer-events: auto;\n}\n.hw-dock-suggestions {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 9px;\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n margin-bottom: 14px;\n}\n.hw-dock-pill-row {\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n animation: hw-dock-pill-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;\n}\n.hw-dock-pill-dismiss {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n padding: 0;\n border: 0;\n background: none;\n color: var(--hw-dock-pill-fg);\n cursor: pointer;\n align-self: flex-start;\n margin-top: 8px;\n opacity: 0;\n transform: scale(0.85);\n transition:\n opacity 0.12s linear,\n transform 0.12s cubic-bezier(0.25, 1, 0.5, 1),\n color 0.12s linear;\n}\n.hw-dock-pill-dismiss svg {\n width: 11px;\n height: 11px;\n}\n.hw-dock-suggestions:hover .hw-dock-pill-dismiss,\n.hw-dock-suggestions:focus-within .hw-dock-pill-dismiss {\n opacity: 1;\n transform: none;\n}\n.hw-dock-pill-dismiss:hover {\n color: var(--hw-dock-on-surface);\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-pill-dismiss {\n transition: none;\n }\n}\n@media (hover: none) {\n .hw-dock-pill-dismiss {\n opacity: 1;\n transform: none;\n }\n}\n.hw-dock-pill {\n align-self: flex-start;\n padding: 10px 18px;\n border: 1px solid var(--hw-dock-pill-border, transparent);\n border-radius: 999px;\n cursor: pointer;\n font: inherit;\n font-size: 14px;\n font-weight: 500;\n text-align: left;\n background: var(--hw-dock-pill-bg);\n color: var(--hw-dock-pill-fg);\n backdrop-filter: blur(10px) saturate(1.2);\n -webkit-backdrop-filter: blur(10px) saturate(1.2);\n box-shadow: 0 4px 14px -8px rgba(12, 11, 10, 0.28);\n transition:\n background 0.16s,\n border-color 0.16s,\n transform 0.16s;\n}\n.hw-dock-pill {\n backdrop-filter: blur(18px);\n -webkit-backdrop-filter: blur(18px);\n}\n.hw-dock-pill:hover {\n background: color-mix(in srgb, var(--hw-dock-pill-bg) 100%, var(--hw-dock-on-surface) 8%);\n border-color: color-mix(in srgb, var(--hw-dock-pill-border) 100%, var(--hw-dock-on-surface) 10%);\n transform: translateX(3px);\n}\n@keyframes hw-dock-pill-in {\n from {\n opacity: 0;\n transform: translateY(10px) scale(0.97);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-dock-bar {\n display: flex;\n align-items: flex-end;\n gap: 10px;\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n min-height: 52px;\n padding: 10px 10px 10px 18px;\n border: 0;\n border-radius: 26px;\n background: var(--hw-dock-surface);\n color: var(--hw-dock-on-surface);\n box-shadow:\n inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n 0 0 0 1px color-mix(in srgb, var(--hw-dock-on-surface) 7%, transparent),\n 0 2px 6px rgba(12, 11, 10, 0.18),\n 0 20px 48px -14px rgba(12, 11, 10, 0.45);\n transition:\n border-radius 0.18s ease,\n box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),\n width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.hw-dock-bar:focus-within {\n box-shadow:\n inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n 0 0 0 1px color-mix(in srgb, var(--hw-primary, #fb923c) 60%, transparent),\n 0 2px 6px rgba(12, 11, 10, 0.18),\n 0 20px 48px -14px rgba(12, 11, 10, 0.45);\n}\n.hw-dock-bar[data-grown=true] {\n border-radius: 20px;\n}\n.hw-dock-input {\n flex: 1;\n min-width: 0;\n min-height: 20px;\n max-height: var(--hw-bar-max-height);\n padding: 6px 0;\n border: 0;\n outline: none;\n resize: none;\n overflow-y: auto;\n background: transparent;\n color: var(--hw-dock-on-surface);\n font: inherit;\n font-size: 14px;\n line-height: 1.45;\n transition: height 0.12s ease;\n}\n.hw-dock-input::placeholder {\n color: color-mix(in srgb, var(--hw-dock-on-surface) 45%, transparent);\n}\n.hw-dock-send {\n flex: none;\n width: 32px;\n height: 32px;\n margin-bottom: 1px;\n border: 0;\n border-radius: 50%;\n display: grid;\n place-items: center;\n cursor: pointer;\n background: var(--hw-primary, #fb923c);\n color: var(--hw-on-brand, #fff);\n transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s;\n}\n.hw-dock-send:hover:not(:disabled) {\n transform: scale(1.06);\n}\n.hw-dock-send:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n position: fixed;\n left: 50%;\n right: auto;\n margin-left: calc(var(--hw-dock-width) / -2);\n bottom: calc(var(--hw-dock-inset) + 66px);\n width: var(--hw-dock-width);\n max-width: calc(100vw - 32px);\n height: 420px;\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n left: 16px;\n right: 16px;\n margin-left: 0;\n width: auto;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-bubble {\n display: none;\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-window {\n bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-suggestions {\n display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-pill,\n .hw-dock-bar,\n .hw-dock-input,\n .hw-dock-send {\n animation: none;\n transition: none;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-composer,\n.hw-widget[data-hw-placement=docked] .hw-tabs,\n.hw-widget[data-hw-placement=docked] .hw-footer-tabs {\n display: none;\n}\n.hw-starters {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n border-radius: 14px;\n overflow: hidden;\n background: var(--hw-bg);\n box-shadow: inset 0 0 0 1px var(--hw-border);\n}\n.hw-starter {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 11px 14px;\n border: 0;\n border-radius: 0;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text);\n font: inherit;\n text-align: left;\n animation: hw-starter-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n transition: background 0.12s;\n}\n.hw-starter + .hw-starter {\n box-shadow: inset 0 1px 0 var(--hw-border);\n}\n.hw-starter:hover {\n background: var(--hw-bg-hover);\n}\n.hw-starter-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n.hw-starter-k {\n font-size: 13px;\n font-weight: 550;\n line-height: 1.35;\n color: var(--hw-text);\n}\n.hw-starter-q {\n font-size: 12px;\n line-height: 1.35;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-starter svg {\n flex: none;\n color: var(--hw-text-3, var(--hw-text-muted));\n opacity: 0.45;\n transition: opacity 0.15s, transform 0.15s;\n}\n.hw-starter:hover svg {\n opacity: 0.9;\n transform: translateX(2px);\n}\n@keyframes hw-starter-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-header-back {\n display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-starter {\n animation: none;\n }\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light])[data-hw-placement=docked] {\n --hw-dock-surface: #1f1f23;\n --hw-dock-on-surface: #f4f4f6;\n --hw-dock-pill-bg: rgba(255, 255, 255, 0.1);\n --hw-dock-pill-fg: #e4e4e7;\n --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n }\n}\n.hw-widget[data-theme=dark][data-hw-placement=docked] {\n --hw-dock-surface: #1f1f23;\n --hw-dock-on-surface: #f4f4f6;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n --hw-bg: rgba(255, 255, 255, 0.08);\n --hw-bg-subtle: transparent;\n --hw-bg-hover: rgba(255, 255, 255, 0.1);\n --hw-border: rgba(255, 255, 255, 0.14);\n --hw-border-md: rgba(255, 255, 255, 0.22);\n --hw-text: rgba(255, 255, 255, 0.94);\n --hw-text-1: #ffffff;\n --hw-text-2: rgba(255, 255, 255, 0.72);\n --hw-text-3: rgba(255, 255, 255, 0.62);\n --hw-text-4: rgba(255, 255, 255, 0.46);\n --hw-visitor-bubble-bg: rgba(255, 255, 255, 0.16);\n --hw-visitor-bubble-text: #ffffff;\n --hw-brand: rgba(255, 255, 255, 0.92);\n --hw-on-brand: #17161a;\n --hw-focus-border: rgba(255, 255, 255, 0.34);\n --hw-focus-ring: rgba(255, 255, 255, 0.1);\n height: 500px;\n max-height: calc(100vh - 180px);\n border-radius: 24px;\n color: var(--hw-text);\n background:\n linear-gradient(\n 180deg,\n rgba(40, 40, 44, 0.72) 0%,\n rgba(46, 46, 50, 0.7) 55%,\n rgba(52, 52, 56, 0.68) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n background: #2c2c2e;\n }\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n height: min(60vh, 460px);\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-header--sub {\n padding: 14px 12px 8px 16px;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-status {\n display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-name {\n font-size: 15.5px;\n font-weight: 560;\n letter-spacing: -0.006em;\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-conv-name,\n.hw-widget[data-hw-placement=docked] .hw-event-name {\n font-weight: 545;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-bot-icon {\n border-radius: 50%;\n overflow: hidden;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-close:hover,\n.hw-widget[data-hw-placement=docked] .hw-header-menu-btn:hover {\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-messages {\n padding: 4px 22px 16px;\n gap: 18px;\n -webkit-mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 16px);\n mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 16px);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--ai .hw-msg-bubble,\n.hw-widget[data-hw-placement=docked] .hw-msg--team .hw-msg-bubble {\n padding: 0;\n background: transparent;\n border-radius: 0;\n font-size: 15px;\n line-height: 1.55;\n color: var(--hw-text);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--visitor .hw-msg-bubble {\n background: rgba(255, 255, 255, 0.16);\n color: #ffffff;\n font-size: 14.5px;\n line-height: 1.5;\n}\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble pre,\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble code {\n background: rgba(0, 0, 0, 0.28);\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row {\n background: rgba(0, 0, 0, 0.26);\n border-color: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] .hw-window :focus-visible {\n outline-color: rgba(255, 255, 255, 0.55);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus,\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus-visible {\n outline: none;\n box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row:focus-within {\n border-color: rgba(255, 255, 255, 0.42);\n box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-submit {\n background: #ffffff;\n color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n position: relative;\n z-index: 3;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu {\n background: #3a3a3f;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 44px -12px rgba(12, 11, 10, 0.62);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button:hover {\n background: rgba(255, 255, 255, 0.11);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button.hw-header-menu-conv[data-active=true] {\n background: rgba(255, 255, 255, 0.09);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-convs {\n border-bottom-color: rgba(255, 255, 255, 0.12);\n}\n.hw-widget[data-hw-placement=docked] .hw-event--card {\n margin: 0;\n background: rgba(255, 255, 255, 0.08);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-event-avatar {\n background: rgba(255, 255, 255, 0.14);\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview {\n position: fixed;\n left: 50%;\n right: auto;\n margin-left: calc(var(--hw-dock-bar-width, var(--hw-dock-width)) / -2);\n bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n border: 0;\n border-radius: 24px;\n color: rgba(255, 255, 255, 0.94);\n background:\n linear-gradient(\n 180deg,\n rgba(40, 40, 44, 0.74) 0%,\n rgba(52, 52, 56, 0.7) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-name,\n.hw-widget[data-hw-placement=docked] .hw-preview-body {\n color: rgba(255, 255, 255, 0.94);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close {\n color: rgba(255, 255, 255, 0.6);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close:hover {\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-footer {\n color: rgba(255, 255, 255, 0.55);\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-preview {\n left: 16px;\n right: 16px;\n margin-left: 0;\n width: auto;\n }\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-preview {\n background: #2c2c2e;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn {\n padding: 7px 14px;\n font-size: 13px;\n font-weight: 550;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.94);\n box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn:hover:not(:disabled) {\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn[data-tapped=true] {\n background: rgba(255, 255, 255, 0.22);\n color: #ffffff;\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n transform: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn svg {\n opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer {\n padding: 7px 14px;\n font-size: 13px;\n background: rgba(255, 255, 255, 0.94);\n color: #17161a;\n box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n transition:\n background 0.15s,\n box-shadow 0.15s,\n transform 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer:hover {\n background: #ffffff;\n color: #17161a;\n box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-offer svg {\n opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar {\n --hw-dock-on-surface: rgba(255, 255, 255, 0.94);\n color: rgba(255, 255, 255, 0.94);\n background:\n linear-gradient(\n 180deg,\n rgba(44, 44, 48, 0.74) 0%,\n rgba(52, 52, 56, 0.72) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -16px rgba(12, 11, 10, 0.45);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n width: var(--hw-dock-width);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar:focus-within {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 18px 40px -16px rgba(12, 11, 10, 0.5);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 22px 52px -18px rgba(12, 11, 10, 0.52);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-send:not(:disabled) {\n background: #ffffff;\n color: #17161a;\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-dock-bar {\n background: #2c2c2e;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n transform-origin: 50% 100%;\n animation: hw-dock-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing {\n animation: hw-dock-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n@keyframes hw-dock-panel-in {\n from {\n opacity: 0;\n transform: translateY(14px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n@keyframes hw-dock-panel-out {\n from {\n opacity: 1;\n transform: none;\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.99);\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n animation: hw-dock-settle 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n animation: hw-dock-settle 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.11s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-header--sub,\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-messages {\n animation: none;\n}\n@keyframes hw-dock-settle {\n from {\n opacity: 0;\n transform: translateY(7px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-widget[data-hw-placement=docked] .hw-window,\n .hw-widget[data-hw-placement=docked] .hw-window--closing,\n .hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub,\n .hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n animation: none;\n }\n}\n.hw-dock-bar {\n flex-wrap: wrap;\n padding-left: 18px;\n padding-right: 8px;\n}\n.hw-dock-error {\n width: var(--hw-dock-width);\n max-width: calc(100vw - 32px);\n margin-bottom: 8px;\n padding: 8px 14px;\n border-radius: 14px;\n background: rgba(190, 24, 40, 0.92);\n color: #ffffff;\n font-size: 12.5px;\n line-height: 1.35;\n box-shadow: 0 10px 26px -12px rgba(12, 11, 10, 0.5);\n animation: hw-dock-settle 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-error {\n animation: none;\n }\n}\n.hw-dock-previews {\n flex: 0 0 100%;\n order: -1;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 2px 0 8px;\n}\n.hw-dock-lead {\n flex: none;\n display: grid;\n place-items: center;\n width: 32px;\n height: 32px;\n margin-left: -8px;\n}\n.hw-dock-actions {\n flex: none;\n display: flex;\n align-items: center;\n gap: 2px;\n margin-bottom: 1px;\n}\n.hw-dock-tool {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n border: 0;\n border-radius: 50%;\n background: transparent;\n color: color-mix(in srgb, var(--hw-dock-on-surface) 52%, transparent);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n.hw-dock-tool:hover:not(:disabled) {\n background: color-mix(in srgb, var(--hw-dock-on-surface) 8%, transparent);\n color: var(--hw-dock-on-surface);\n}\n.hw-dock-tool:disabled {\n opacity: 0.4;\n cursor: default;\n}\n.hw-dock-tool[data-active=true] {\n color: #e11d48;\n background: rgba(225, 29, 72, 0.12);\n animation: hw-dock-listening 1.4s ease-in-out infinite;\n}\n@keyframes hw-dock-listening {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(225, 29, 72, 0);\n }\n}\n.hw-dock-send:disabled {\n opacity: 1;\n background: color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent);\n color: color-mix(in srgb, var(--hw-dock-on-surface) 38%, transparent);\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-tool[data-active=true] {\n animation: none;\n }\n .hw-dock-bar {\n transition: none;\n }\n}\n.hw-dock-input:focus,\n.hw-dock-input:focus-visible {\n outline: none;\n box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-powered {\n display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-disconnect {\n border-radius: 20px 20px 0 0;\n}\n.hw-msg-meta {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.hw-msg-author {\n font-weight: 550;\n}\n.hw-msg-meta-sep {\n opacity: 0.55;\n}\n.hw-header-actions {\n position: relative;\n display: flex;\n align-items: center;\n gap: 2px;\n}\n.hw-header-menu-btn {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n border: 0;\n border-radius: 8px;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text-2, var(--hw-text-muted));\n transition: background 0.15s, color 0.15s;\n}\n.hw-header-menu-btn:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n}\n.hw-header-menu {\n position: absolute;\n top: 36px;\n right: 0;\n z-index: 6;\n min-width: 236px;\n max-width: 288px;\n padding: 5px;\n border-radius: 14px;\n background: var(--hw-bg);\n color: var(--hw-text);\n box-shadow: 0 0 0 1px var(--hw-border), 0 12px 32px -10px rgba(0, 0, 0, 0.32);\n animation: hw-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n}\n@keyframes hw-menu-in {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-header-menu button {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 9px 10px;\n border: 0;\n border-radius: 9px;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text);\n font: inherit;\n font-size: 13px;\n text-align: left;\n transition: background 0.14s;\n}\n.hw-header-menu button:hover {\n background: var(--hw-bg-hover);\n}\n.hw-header-menu button svg {\n flex: none;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu button:hover svg {\n color: var(--hw-brand, var(--hw-primary));\n}\n.hw-header-menu-convs {\n display: flex;\n flex-direction: column;\n max-height: 168px;\n overflow-y: auto;\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-menu button.hw-header-menu-conv {\n flex-direction: column;\n align-items: stretch;\n gap: 2px;\n padding: 8px 10px;\n}\n.hw-header-menu button.hw-header-menu-conv[data-active=true] {\n background: var(--hw-bg-hover);\n}\n.hw-header-menu-conv-top {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n}\n.hw-header-menu-conv-name {\n overflow: hidden;\n font-size: 12.5px;\n font-weight: 600;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-header-menu-conv-time {\n flex: none;\n font-size: 11px;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu-conv-preview {\n overflow: hidden;\n font-size: 12px;\n color: var(--hw-text-2);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-offers {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n}\n.hw-offer {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n border: 0;\n border-radius: 999px;\n cursor: pointer;\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n font: inherit;\n font-size: 12.5px;\n font-weight: 550;\n transition: background 0.15s, color 0.15s;\n}\n.hw-offer:hover {\n background: var(--hw-brand, var(--hw-primary));\n color: var(--hw-on-brand, #fff);\n}\n.hw-offer svg {\n flex: none;\n}\n.hw-sources {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 8px;\n}\n.hw-source {\n display: flex;\n align-items: center;\n gap: 9px;\n padding: 7px 10px;\n border-radius: 9px;\n background: transparent;\n color: var(--hw-text);\n text-decoration: none;\n transition: background 0.15s;\n}\na.hw-source {\n cursor: pointer;\n}\na.hw-source:hover {\n background: var(--hw-bg-hover);\n}\n.hw-source-n {\n display: grid;\n place-items: center;\n flex: none;\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background: var(--hw-brand, var(--hw-primary));\n color: var(--hw-on-brand, #fff);\n font-size: 10px;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n}\n.hw-source-title {\n flex: 1;\n min-width: 0;\n font-size: 12px;\n font-weight: 550;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n');
|
|
7900
|
+
styleInject(':host {\n all: initial;\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n font-size: 14px;\n line-height: 1.5;\n color: #1a1a1a;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget {\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n font-size: 14px;\n line-height: 1.5;\n color: #1a1a1a;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget *,\n.hw-widget *::before,\n.hw-widget *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n.hw-widget :where(p, li, strong, b, em, i, u, s, small, a, code, pre, blockquote, h1, h2, h3, h4, h5, h6) {\n color: inherit;\n}\n:where(.hw-widget) {\n --hw-primary: #171717;\n --hw-primary-hover: #2a2a2a;\n --hw-brand: #171717;\n --hw-on-brand: #ffffff;\n --hw-focus-border: #9ca3af;\n --hw-focus-ring: rgba(0, 0, 0, 0.06);\n --hw-accent: #6366f1;\n --hw-bg: #ffffff;\n --hw-bg-subtle: #fafaf9;\n --hw-bg-hover: #f5f5f4;\n --hw-border: #ebe9e5;\n --hw-border-md: #e5e5e5;\n --hw-text: #1c1b19;\n --hw-text-1: #111;\n --hw-text-2: #666;\n --hw-text-3: #8a847c;\n --hw-text-4: #a8a29a;\n --hw-radius: 20px;\n --hw-visitor-bubble-bg: #f5f5f4;\n --hw-visitor-bubble-text: #1a1a1a;\n --hw-font:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n}\n.hw-agent-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-agent-icon {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n.hw-widget :is(.hw-header-bot-icon, .hw-hero-bot-icon, .hw-conv-card-avatar, .hw-event-avatar, .hw-bubble-icon--bot):has(> .hw-agent-custom) {\n border-radius: 50%;\n background: transparent;\n padding: 0;\n}\n.hw-widget :focus-visible {\n outline: 2px solid var(--hw-primary);\n outline-offset: 2px;\n}\n.hw-widget :focus:not(:focus-visible) {\n outline: none;\n}\n.hw-widget {\n position: fixed;\n bottom: 20px;\n right: var(--hw-position-right, 20px);\n left: var(--hw-position-left, auto);\n z-index: 999999;\n font-family: var(--hw-font);\n}\n@keyframes hw-bubble-enter {\n from {\n opacity: 0;\n transform: scale(0.6);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n.hw-bubble {\n width: 48px;\n height: 48px;\n border-radius: 14px;\n background: var(--hw-primary);\n color: white;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;\n position: relative;\n overflow: visible;\n animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n}\n.hw-bubble--rounded {\n border-radius: 14px;\n}\n.hw-bubble--square {\n border-radius: 8px;\n}\n.hw-bubble--pill {\n border-radius: 24px;\n}\n.hw-bubble--launcher-bubble,\n.hw-bubble--launcher-help {\n width: auto;\n padding: 0 16px 0 12px;\n gap: 8px;\n border-radius: 24px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--square,\n.hw-bubble--launcher-help.hw-bubble--square {\n border-radius: 8px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--rounded,\n.hw-bubble--launcher-help.hw-bubble--rounded {\n border-radius: 14px;\n}\n.hw-bubble-label {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n line-height: 1;\n position: static;\n opacity: 1;\n transform: none;\n}\n.hw-bubble--launcher-bubble .hw-bubble-icon,\n.hw-bubble--launcher-help .hw-bubble-icon {\n position: static;\n}\n.hw-bubble:hover {\n transform: scale(1.05);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.hw-bubble:active {\n transform: scale(0.95);\n}\n.hw-bubble--open {\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n}\n.hw-bubble:focus-visible {\n outline: 2px solid white;\n outline-offset: 2px;\n}\n.hw-bubble-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;\n}\n.hw-bubble-icon svg:not(.hw-agent-custom svg) {\n width: 22px;\n height: 22px;\n}\n.hw-bubble-icon--hidden {\n transform: scale(0.3) rotate(90deg);\n opacity: 0;\n}\n.hw-bubble-icon--bot {\n}\n.hw-bubble--avatar .hw-bubble-icon--bot {\n width: 100%;\n height: 100%;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img {\n width: 100%;\n height: 100%;\n border-radius: 0;\n}\n.hw-agent-img.hw-agent-img--logo {\n object-fit: contain;\n padding: 10px;\n box-sizing: border-box;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {\n padding: 10px;\n box-sizing: border-box;\n object-fit: contain;\n}\n.hw-bubble-icon--close svg {\n width: 22px;\n height: 22px;\n}\n.hw-bubble-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n border-radius: 10px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n border: 2px solid white;\n animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-badge-pop {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n.hw-bubble-badge::after {\n content: "";\n position: absolute;\n inset: -2px;\n border-radius: inherit;\n background: var(--hw-primary);\n opacity: 0;\n animation: hw-badge-pulse 2s ease-out infinite;\n}\n@keyframes hw-badge-pulse {\n 0% {\n opacity: 0.5;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(1.8);\n }\n}\n.hw-window {\n position: absolute;\n bottom: 72px;\n right: var(--hw-window-right, 0);\n left: var(--hw-window-left, auto);\n width: 440px;\n height: 640px;\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n border-radius: var(--hw-radius);\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hw-window--reading {\n width: min(720px, calc(100vw - 40px));\n height: min(800px, calc(100vh - 112px));\n}\n:host([data-hw-mode="mobile"]) .hw-window,\n:host([data-hw-mode="mobile"]) .hw-window--reading {\n position: fixed;\n inset: 0;\n width: 100%;\n height: var(--hw-visible-height, 100%);\n border-radius: 0;\n box-shadow: none;\n animation: none;\n}\n:host([data-hw-mode="mobile"]) .hw-hero {\n background-color: color-mix(in srgb, var(--hw-primary) 60%, black);\n}\n:host([data-hw-mode="mobile"]) .hw-bubble {\n display: none;\n}\n.hw-window[data-hw-keyboard] .hw-composer {\n padding-bottom: 8px;\n}\n.hw-window[data-hw-keyboard] .hw-powered {\n display: none;\n}\n@keyframes hw-window-open {\n from {\n opacity: 0;\n transform: translateY(12px) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n.hw-window--closing {\n animation: hw-window-close 0.2s ease forwards;\n}\n@keyframes hw-window-close {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.98);\n }\n}\n.hw-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-window,\n .hw-window--closing,\n .hw-content,\n .hw-msg,\n .hw-bubble,\n .hw-bubble-icon,\n .hw-bubble-badge,\n .hw-bubble-badge::after,\n .hw-typing-dot,\n .hw-loading-dot {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n}\n.hw-hero {\n flex-shrink: 0;\n background:\n linear-gradient(\n 160deg,\n color-mix(in srgb, var(--hw-primary) 60%, black) 0%,\n var(--hw-primary) 50%,\n color-mix(in srgb, var(--hw-primary) 40%, black) 100%);\n color: white;\n padding: 20px 22px 40px;\n}\n.hw-hero-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 16px;\n}\n.hw-hero-close {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.6);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s, color 0.15s;\n}\n.hw-hero-close:hover {\n background: rgba(255, 255, 255, 0.2);\n color: white;\n}\n.hw-hero-close:active {\n transform: scale(0.92);\n transition:\n transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.15s,\n color 0.15s;\n}\n.hw-hero-close svg {\n width: 20px;\n height: 20px;\n}\n.hw-hero-bot-icon {\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n}\n.hw-hero-bot-icon > svg,\n.hw-hero-bot-icon > .hw-agent-icon > svg {\n width: 32px;\n height: 32px;\n}\n.hw-hero-bot-icon .hw-agent-img,\n.hw-hero-bot-icon .hw-agent-icon {\n border-radius: inherit;\n overflow: hidden;\n object-fit: contain;\n}\n.hw-hero-greeting {\n font-size: 26px;\n font-weight: 700;\n line-height: 1.15;\n margin-bottom: 6px;\n}\n.hw-hero-greeting-name {\n font-weight: 300;\n}\n.hw-hero-greeting-question {\n font-weight: 700;\n}\n.hw-hero-subtitle {\n font-size: 15px;\n color: rgba(255, 255, 255, 0.5);\n line-height: 1.35;\n}\n.hw-sheet {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n background: #ffffff;\n border-radius: 20px 20px 0 0;\n margin-top: -24px;\n box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);\n position: relative;\n z-index: 1;\n}\n.hw-sheet-inner {\n padding: 20px 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.hw-header {\n display: flex;\n align-items: center;\n padding: 14px 12px 14px 16px;\n background: var(--hw-primary);\n color: white;\n flex-shrink: 0;\n gap: 10px;\n}\n.hw-header--sub {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header-back {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.15s, background 0.15s;\n flex-shrink: 0;\n}\n.hw-header-back svg {\n width: 18px;\n height: 18px;\n}\n.hw-header-back:hover {\n color: var(--hw-text);\n background: var(--hw-bg-subtle);\n}\n.hw-header-identity {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n}\n.hw-header-bot-icon {\n width: 32px;\n height: 32px;\n flex-shrink: 0;\n color: var(--hw-text);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9px;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));\n}\n.hw-header-bot-icon > svg,\n.hw-header-bot-icon > .hw-agent-icon > svg {\n width: 24px;\n height: 24px;\n}\n.hw-header-bot-icon--team {\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n}\n.hw-header-agent-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n.hw-header-bot-icon .hw-agent-img,\n.hw-header-bot-icon .hw-agent-icon {\n border-radius: inherit;\n overflow: hidden;\n}\n.hw-header-bot-icon .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-widget[data-has-avatar=true] {\n --hw-agent-bg-default: var(--hw-primary);\n --hw-agent-fit-default: contain;\n --hw-agent-pad-default: 6px;\n}\n.hw-header-agent-initials {\n font-size: 11px;\n font-weight: 600;\n line-height: 1;\n}\n.hw-header-info {\n flex: 1;\n min-width: 0;\n}\n.hw-header-name {\n font-size: 15px;\n font-weight: 600;\n line-height: 1.3;\n}\n.hw-header-status {\n font-size: 11px;\n color: var(--hw-text-3);\n line-height: 1.3;\n}\n.hw-header-close {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n flex-shrink: 0;\n}\n.hw-header-close svg {\n width: 20px;\n height: 20px;\n}\n.hw-header-close:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n}\n.hw-header-close:active {\n transform: scale(0.92);\n}\n.hw-header--centered {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header--centered .hw-header-title {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n max-width: calc(100% - 88px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n}\n.hw-header-spacer {\n width: 28px;\n flex-shrink: 0;\n}\n.hw-header--messages {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header-title {\n font-size: 16px;\n font-weight: 600;\n}\n.hw-header-actions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.hw-header-action {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-header-action svg {\n width: 16px;\n height: 16px;\n}\n.hw-header-action:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n}\n.hw-header-action:active {\n transform: scale(0.94);\n}\n.hw-card {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 14px 16px;\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n cursor: pointer;\n transition: box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n text-align: left;\n color: var(--hw-text);\n font-family: inherit;\n}\n.hw-card:hover {\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);\n transform: translateY(-1px);\n}\n.hw-card:active {\n transform: translateY(0) scale(0.99);\n transition-duration: 120ms;\n}\n.hw-card-body {\n flex: 1;\n min-width: 0;\n}\n.hw-card-title {\n font-size: 14px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hw-text);\n}\n.hw-card-meta {\n font-size: 12px;\n color: var(--hw-text-3);\n line-height: 1.3;\n margin-top: 1px;\n}\n.hw-card-arrow {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--hw-primary);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.hw-card-arrow svg {\n width: 14px;\n height: 14px;\n}\n.hw-msgs-tab {\n flex: 1;\n overflow-y: auto;\n padding: 12px 16px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-recent-card {\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n overflow: hidden;\n}\n.hw-recent-header {\n font-size: 12px;\n font-weight: 600;\n color: var(--hw-text-2);\n padding: 12px 14px 0;\n}\n.hw-recent-row {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n position: relative;\n}\n.hw-recent-row:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n.hw-recent-row:active {\n transform: scale(0.995);\n}\n.hw-recent-row--last {\n border-bottom: none;\n}\n.hw-recent-row .hw-conv-card-avatar {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n}\n.hw-recent-row .hw-conv-card-avatar svg:not(.hw-agent-custom svg) {\n width: 18px;\n height: 18px;\n}\n.hw-recent-row .hw-conv-card-name {\n font-size: 13px;\n}\n.hw-recent-row .hw-conv-card-preview {\n font-size: 12px;\n}\n.hw-recent-row--unread .hw-conv-card-name {\n color: var(--hw-text);\n}\n.hw-recent-row--unread .hw-conv-card-time {\n color: var(--hw-primary);\n font-weight: 500;\n}\n.hw-recent-row-badge {\n min-width: 18px;\n height: 18px;\n border-radius: 9px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.hw-recent-see-all {\n display: block;\n width: 100%;\n padding: 10px 14px;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-text);\n background: none;\n border: none;\n border-top: 1px solid var(--hw-border);\n cursor: pointer;\n font-family: inherit;\n transition: background 0.1s;\n}\n.hw-recent-see-all:hover {\n background: rgba(0, 0, 0, 0.02);\n}\n.hw-conv-card {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 14px 16px;\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n cursor: pointer;\n transition: box-shadow 0.15s, transform 0.1s;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n}\n.hw-conv-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.hw-conv-card:active {\n transform: scale(0.99);\n}\n.hw-conv-card-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hw-conv-card-avatar {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-subtle)));\n color: var(--hw-text-3);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-conv-card-avatar svg:not(.hw-agent-custom svg) {\n width: 20px;\n height: 20px;\n}\n.hw-conv-card-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-conv-card-avatar .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-conv-card-avatar--team {\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n}\n.hw-conv-card-avatar-initials {\n font-size: 12px;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 0.02em;\n}\n.hw-conv-card-content {\n flex: 1;\n min-width: 0;\n}\n.hw-conv-card-top {\n display: flex;\n align-items: baseline;\n gap: 8px;\n}\n.hw-conv-card-name {\n flex: 1;\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-conv-card-time {\n font-size: 11px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.hw-conv-card-preview {\n font-size: 13px;\n color: var(--hw-text-2);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 1.4;\n margin-top: 1px;\n}\n.hw-conv-card--unread .hw-conv-card-name {\n color: var(--hw-text);\n}\n.hw-conv-card--unread .hw-conv-card-time {\n color: var(--hw-primary);\n font-weight: 500;\n}\n.hw-conv-card-badge {\n position: absolute;\n top: 12px;\n right: 12px;\n min-width: 18px;\n height: 18px;\n border-radius: 9px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n font-variant-numeric: tabular-nums;\n}\n.hw-empty-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n text-align: center;\n}\n.hw-empty-icon-wrap {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--hw-bg-subtle);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n color: var(--hw-text-3);\n}\n.hw-empty-icon-wrap svg {\n width: 24px;\n height: 24px;\n}\n.hw-empty-title {\n font-size: 15px;\n font-weight: 600;\n color: var(--hw-text);\n margin-bottom: 4px;\n}\n.hw-empty-desc {\n font-size: 13px;\n color: var(--hw-text-3);\n margin-bottom: 20px;\n}\n.hw-empty-btn {\n padding: 8px 20px;\n border-radius: 10px;\n background: var(--hw-primary);\n color: white;\n border: none;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n font-family: inherit;\n transition: background 0.15s;\n}\n.hw-empty-btn:hover {\n background: var(--hw-primary-hover);\n}\n.hw-tabs {\n display: flex;\n border-top: 1px solid var(--hw-border);\n flex-shrink: 0;\n background: var(--hw-bg-subtle);\n}\n.hw-tabs-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n padding: 8px 0;\n border: none;\n background: none;\n cursor: pointer;\n font-family: inherit;\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-text-3);\n transition: color 0.15s;\n}\n.hw-tabs-item svg {\n width: 22px;\n height: 22px;\n overflow: visible;\n}\n.hw-tabs-item--active {\n color: var(--hw-text);\n}\n.hw-tabs-item:hover {\n color: var(--hw-text-2);\n}\n.hw-tabs-item:active {\n transform: scale(0.94);\n transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), color 0.15s;\n}\n.hw-tabs-icon-wrap {\n position: relative;\n display: inline-flex;\n}\n.hw-tabs-badge {\n position: absolute;\n top: -6px;\n right: -10px;\n min-width: 16px;\n height: 16px;\n border-radius: 8px;\n background: var(--hw-primary);\n color: white;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n font-variant-numeric: tabular-nums;\n}\n.hw-messages {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px 14px 8px;\n background: var(--hw-bg-subtle);\n display: flex;\n flex-direction: column;\n gap: 14px;\n overscroll-behavior: contain;\n min-width: 0;\n scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n scrollbar-width: thin;\n -webkit-mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 12px);\n mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 12px);\n}\n.hw-messages::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n.hw-messages::-webkit-scrollbar-track {\n background: transparent;\n}\n.hw-messages::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.16);\n background-clip: content-box;\n border: 3px solid transparent;\n border-radius: 999px;\n}\n.hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.28);\n background-clip: content-box;\n}\n.hw-widget[data-theme=dark] .hw-messages {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n}\n.hw-widget[data-theme=dark] .hw-messages::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n background-clip: content-box;\n}\n.hw-widget[data-theme=dark] .hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n}\n.hw-empty {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n color: var(--hw-text-3);\n text-align: center;\n}\n.hw-empty-icon {\n width: 40px;\n height: 40px;\n margin-bottom: 12px;\n opacity: 0.3;\n}\n.hw-empty-text {\n font-size: 13px;\n}\n.hw-date-sep {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 0;\n}\n.hw-date-sep-line {\n flex: 1;\n height: 1px;\n background: var(--hw-border-md);\n}\n.hw-date-sep-text {\n font-size: 11px;\n color: var(--hw-text-3);\n font-weight: 500;\n white-space: nowrap;\n}\n.hw-msg {\n display: flex;\n padding: 4px 0;\n max-width: 75%;\n min-width: 0;\n animation: hw-msg-appear 0.25s ease-out;\n}\n@keyframes hw-msg-appear {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-msg--visitor {\n align-self: flex-end;\n}\n.hw-msg--team,\n.hw-msg--ai {\n align-self: flex-start;\n}\n.hw-msg--ai {\n width: 100%;\n max-width: 100%;\n}\n.hw-msg-body {\n display: flex;\n flex-direction: column;\n min-width: 0;\n max-width: 100%;\n}\n.hw-msg-bubble {\n padding: 10px 14px;\n border-radius: 16px;\n font-size: 14px;\n line-height: 1.45;\n white-space: pre-wrap;\n word-break: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n}\n.hw-msg--visitor .hw-msg-bubble {\n background: var(--hw-primary);\n color: white;\n border-bottom-right-radius: 4px;\n}\n.hw-msg--team .hw-msg-bubble {\n background: var(--hw-visitor-bubble-bg);\n color: var(--hw-visitor-bubble-text);\n border-bottom-left-radius: 4px;\n}\n.hw-msg--ai .hw-msg-bubble {\n background: var(--hw-visitor-bubble-bg);\n color: var(--hw-text);\n border-bottom-left-radius: 4px;\n white-space: normal;\n max-width: min(100%, 640px);\n}\n.hw-msg--ai .hw-msg-body {\n width: 100%;\n}\n.hw-msg--ai .hw-msg-bubble:has(.hw-code),\n.hw-msg--ai .hw-msg-bubble:has(pre) {\n width: 100%;\n}\n.hw-quick-replies {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 8px;\n}\n.hw-quick-reply-btn {\n font: inherit;\n font-size: 13px;\n font-weight: 500;\n padding: 6px 14px;\n border-radius: 18px;\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n background: var(--hw-bg, #fff);\n color: var(--hw-text-1, #1a1a1a);\n cursor: pointer;\n transition:\n background 120ms ease,\n border-color 120ms ease,\n box-shadow 120ms ease,\n transform 80ms ease;\n line-height: 1.3;\n}\n.hw-quick-reply-btn:hover:not(:disabled) {\n border-color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 8%, transparent);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n.hw-quick-reply-btn:active:not(:disabled) {\n transform: scale(0.97);\n}\n.hw-quick-reply-btn:disabled {\n cursor: default;\n opacity: 0.4;\n}\n.hw-quick-reply-btn[data-tapped=true] {\n background: var(--hw-primary);\n color: white;\n border-color: var(--hw-primary);\n opacity: 1;\n}\n.hw-quick-replies[data-cancelled=true] .hw-quick-reply-btn {\n border-color: var(--hw-border);\n color: var(--hw-text-3);\n}\n.hw-msg--ai .hw-code {\n width: 100%;\n box-sizing: border-box;\n}\n.hw-msg-meta {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n color: var(--hw-text-2);\n margin-top: 2px;\n padding: 0 4px;\n font-variant-numeric: tabular-nums;\n}\n.hw-msg-time {\n white-space: nowrap;\n}\n.hw-msg--visitor .hw-msg-meta {\n text-align: right;\n}\n.hw-msg--team .hw-msg-body,\n.hw-msg--ai .hw-msg-body {\n align-items: flex-start;\n}\n.hw-msg--visitor .hw-msg-body {\n align-items: flex-end;\n}\n.hw-typing {\n display: flex;\n flex-direction: column;\n gap: 3px;\n padding: 8px 0;\n width: fit-content;\n animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-typing-dots {\n display: flex;\n gap: 3px;\n padding: 6px 2px;\n width: fit-content;\n}\n.hw-typing-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--hw-text-3);\n animation: hw-typing-bounce 1.4s infinite;\n}\n.hw-typing-dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-typing-dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n@keyframes hw-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-4px);\n }\n}\n.hw-msg-bubble--live > span > :last-child:not(ol, ul, pre)::after,\n.hw-msg-bubble--live > span > :is(ol, ul):last-child > li:last-child::after {\n content: "";\n display: inline-block;\n width: 2px;\n height: 1em;\n border-radius: 1px;\n background: currentColor;\n opacity: 0.5;\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: hw-cursor-breathe 1.1s ease-in-out infinite;\n}\n@keyframes hw-cursor-breathe {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 0.12;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-msg-bubble--live > span > :last-child:not(ol, ul, pre)::after,\n .hw-msg-bubble--live > span > :is(ol, ul):last-child > li:last-child::after {\n animation: none;\n }\n}\n.hw-link-preview {\n display: flex;\n flex-direction: column;\n gap: 0;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n border-radius: 10px;\n overflow: hidden;\n text-decoration: none;\n color: inherit;\n margin-top: 6px;\n transition: background 0.15s;\n min-height: 44px;\n max-width: 100%;\n text-align: start;\n}\n.hw-link-preview:hover {\n background: var(--hw-bg-hover, rgba(0, 0, 0, 0.02));\n}\n.hw-link-preview-img {\n width: 100%;\n height: 56px;\n flex: 0 0 56px;\n object-fit: cover;\n object-position: top;\n border-radius: 0;\n}\n.hw-link-preview-body {\n padding: 8px 10px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n justify-content: center;\n}\n.hw-link-preview-favicon {\n width: 14px;\n height: 14px;\n flex: 0 0 14px;\n border-radius: 3px;\n}\n.hw-widget[data-hw-placement=docked] .hw-link-preview-favicon {\n box-sizing: content-box;\n padding: 2px;\n background: #ffffff;\n}\n.hw-link-preview-host {\n direction: ltr;\n min-width: 0;\n overflow-wrap: anywhere;\n word-break: break-all;\n}\n.hw-link-preview-title {\n font-size: 12.5px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hw-text, #1a1a1a);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: anywhere;\n}\n.hw-link-preview-desc {\n font-size: 11.5px;\n line-height: 1.4;\n color: var(--hw-text-2, #6b7280);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: anywhere;\n}\n.hw-link-preview-url {\n display: flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n font-size: 11px;\n color: var(--hw-text-2);\n}\n.hw-msg-links {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-width: 240px;\n}\n.hw-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-loading-dots {\n display: flex;\n gap: 4px;\n}\n.hw-loading-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--hw-text-4);\n animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-loading-dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-loading-dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n@keyframes hw-loading-pulse {\n 0%, 60%, 100% {\n opacity: 0.3;\n transform: scale(0.8);\n }\n 30% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes hw-skeleton-shimmer {\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n}\n.hw-skeleton {\n background:\n linear-gradient(\n 90deg,\n var(--hw-bg-subtle) 25%,\n rgba(0, 0, 0, 0.04) 50%,\n var(--hw-bg-subtle) 75%);\n background-size: 200px 100%;\n animation: hw-skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 6px;\n}\n.hw-skeleton-messages {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 16px;\n gap: 16px;\n}\n.hw-skeleton-msg {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n}\n.hw-skeleton-msg--right {\n flex-direction: row-reverse;\n}\n.hw-skeleton-avatar {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n flex-shrink: 0;\n}\n.hw-skeleton-bubble {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.hw-skeleton-line {\n height: 12px;\n border-radius: 6px;\n}\n.hw-skeleton-convs {\n display: flex;\n flex-direction: column;\n padding: 8px 0;\n}\n.hw-skeleton-conv {\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 10px 16px;\n}\n.hw-skeleton-conv-avatar {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n flex-shrink: 0;\n}\n.hw-skeleton-conv-lines {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.hw-skeleton-content {\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n gap: 12px;\n}\n.hw-skeleton-content-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px;\n border-radius: 10px;\n background: var(--hw-bg);\n}\n.hw-skeleton-title {\n height: 22px;\n width: 65%;\n border-radius: 6px;\n}\n.hw-skeleton-badge {\n width: 42px;\n height: 18px;\n border-radius: 9px;\n}\n.hw-skeleton-date {\n width: 60px;\n height: 12px;\n border-radius: 6px;\n}\n.hw-skeleton-h2 {\n height: 16px;\n border-radius: 6px;\n}\n.hw-skeleton-bullet {\n padding-left: 20px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-skeleton-bullet-line {\n height: 14px;\n border-radius: 7px;\n}\n.hw-email-card {\n max-width: min(100%, 340px);\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: none;\n box-shadow: none;\n animation: hw-email-slide-in 0.25s ease-out;\n}\n@keyframes hw-email-slide-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-email-card-title {\n font-size: 14px;\n font-weight: 550;\n color: var(--hw-text, #1a1a1a);\n line-height: 1.3;\n margin: 0 0 2px;\n}\n.hw-email-card-subtitle {\n font-size: 12px;\n color: var(--hw-text-2, #888);\n line-height: 1.4;\n margin: 0;\n}\n.hw-email-card-row {\n max-width: 300px;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 9px;\n padding: 3px 3px 3px 12px;\n border-radius: 999px;\n border: 1px solid var(--hw-border, rgba(0,0,0,0.1));\n background: var(--hw-bg-subtle, #fafafa);\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-email-card-row:focus-within {\n border-color: var(--hw-focus-border, rgba(0,0,0,0.2));\n box-shadow: 0 0 0 2px var(--hw-focus-ring, rgba(0,0,0,0.06));\n}\n.hw-email-card-input {\n flex: 1;\n min-width: 0;\n padding: 6px 0;\n border: 0;\n background: transparent;\n color: var(--hw-text, #1a1a1a);\n font: inherit;\n font-size: 13px;\n outline: none;\n}\n.hw-email-card-input::placeholder {\n color: var(--hw-text-3, #999);\n}\n.hw-email-card-row:has(.hw-email-card-input--error) {\n border-color: #ef4444;\n}\n.hw-email-card-submit {\n flex: none;\n display: grid;\n place-items: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 50%;\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n}\n.hw-email-card-submit:hover:not(:disabled) {\n transform: scale(1.06);\n}\n.hw-email-card-submit:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.hw-email-card--success {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n font-size: 13px;\n color: var(--hw-text-2, #888);\n animation: hw-email-slide-in 0.2s ease-out;\n}\n.hw-email-card--success svg {\n flex-shrink: 0;\n}\n.hw-composer {\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n background: transparent;\n flex-shrink: 0;\n}\n.hw-composer--compact {\n padding: 8px 12px;\n}\n.hw-composer-box {\n display: flex;\n flex-direction: column;\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n border-radius: 16px;\n overflow: hidden;\n transition: border-color 0.2s;\n background: var(--hw-bg);\n}\n.hw-composer-box:focus-within {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-composer-input {\n resize: none;\n border: none;\n padding: 12px 16px 4px;\n font-size: 14px;\n font-family: inherit;\n line-height: 1.4;\n outline: none;\n min-height: 40px;\n max-height: 220px;\n background: transparent;\n color: var(--hw-text);\n field-sizing: content;\n}\n.hw-composer-input:focus {\n outline: none;\n}\n.hw-composer-input:focus-visible {\n outline: none;\n}\n.hw-composer-input::placeholder {\n color: var(--hw-text-4);\n}\n.hw-composer-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 10px 10px;\n}\n.hw-composer-toolbar-left {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.hw-composer-send {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-composer-send:active:not(:disabled) {\n transform: scale(0.9);\n}\n.hw-composer-send--active {\n background: var(--hw-primary);\n color: white;\n}\n.hw-composer-send--inactive {\n background: var(--hw-border);\n color: var(--hw-text-4);\n cursor: default;\n}\n.hw-composer-send svg {\n width: 14px;\n height: 14px;\n}\n.hw-composer-charcount {\n font-size: 11px;\n color: var(--hw-text-3);\n font-variant-numeric: tabular-nums;\n opacity: 1;\n transform: translateY(0);\n transition:\n color 180ms cubic-bezier(0.23, 1, 0.32, 1),\n opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n@starting-style {\n .hw-composer-charcount {\n opacity: 0;\n transform: translateY(3px);\n }\n}\n.hw-composer-charcount--over {\n color: #ef4444;\n font-weight: 600;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-composer-charcount {\n transform: none;\n transition: color 160ms ease, opacity 160ms ease;\n }\n @starting-style {\n .hw-composer-charcount {\n transform: none;\n }\n }\n}\n.hw-composer-previews {\n display: flex;\n gap: 6px;\n padding: 8px 10px 0;\n overflow-x: auto;\n scrollbar-width: none;\n}\n.hw-composer-previews::-webkit-scrollbar {\n display: none;\n}\n.hw-composer-preview {\n position: relative;\n width: 48px;\n height: 48px;\n border-radius: 8px;\n overflow: hidden;\n flex-shrink: 0;\n background: var(--hw-border);\n cursor: pointer;\n}\n.hw-composer-preview--error {\n outline: 2px solid #ef4444;\n outline-offset: -2px;\n}\n.hw-composer-preview-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-composer-preview-file {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--hw-bg-subtle);\n}\n.hw-composer-preview-ext {\n font-size: 10px;\n font-weight: 700;\n color: var(--hw-text-3);\n text-transform: uppercase;\n}\n.hw-composer-preview-loader {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.35);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-composer-preview-loader::after {\n content: "";\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: hw-spin 0.6s linear infinite;\n}\n@keyframes hw-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.hw-composer-preview-badge {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #ef4444;\n color: white;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-composer-preview-remove {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: none;\n background: rgba(0, 0, 0, 0.55);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.15s;\n}\n.hw-composer-preview-remove svg {\n width: 10px;\n height: 10px;\n}\n.hw-composer-preview:hover .hw-composer-preview-remove {\n opacity: 1;\n}\n.hw-composer-attach {\n width: 28px;\n height: 28px;\n border: none;\n background: none;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n opacity: 0.7;\n transition: opacity 0.15s;\n}\n.hw-composer-attach:hover {\n opacity: 1;\n}\n.hw-composer-attach svg {\n width: 16px;\n height: 16px;\n}\n.hw-msg-images {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-bottom: 4px;\n}\n.hw-msg-image-link {\n display: block;\n border-radius: 14px;\n overflow: hidden;\n line-height: 0;\n}\n.hw-msg-image {\n max-width: 140px;\n max-height: 80px;\n object-fit: cover;\n border-radius: 8px;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-msg-files {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 4px;\n}\n.hw-msg-file {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 10px;\n background: var(--hw-bg-subtle);\n text-decoration: none;\n color: var(--hw-text);\n transition: background 0.15s;\n}\n.hw-msg-file:hover {\n background: var(--hw-border);\n}\n.hw-msg-file-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n color: var(--hw-text-3);\n}\n.hw-msg-file-icon svg {\n width: 100%;\n height: 100%;\n}\n.hw-msg-file-info {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.hw-msg-file-name {\n font-size: 13px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.hw-msg-file-size {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-msg-image-link {\n cursor: pointer;\n border: none;\n padding: 0;\n background: none;\n display: block;\n line-height: 0;\n}\n.hw-hover-preview {\n position: fixed;\n z-index: 2147483001;\n padding: 6px;\n border-radius: 14px;\n background: white;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);\n cursor: pointer;\n animation: hw-hover-in 0.15s ease-out;\n}\n@media (prefers-color-scheme: dark) {\n .hw-hover-preview {\n background: #1c1c1e;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n}\n@keyframes hw-hover-in {\n from {\n opacity: 0;\n transform: scale(0.96) translateY(4px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n.hw-hover-preview-img {\n width: 100%;\n max-height: 200px;\n object-fit: contain;\n border-radius: 10px;\n display: block;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-hover-preview--doc {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n}\n.hw-hover-preview-doc-icon {\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n}\n.hw-hover-preview-doc-icon svg {\n width: 100%;\n height: 100%;\n}\n.hw-hover-preview-doc-info {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.hw-hover-preview-doc-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.hw-hover-preview-doc-hint {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-event {\n display: flex;\n justify-content: center;\n padding: 8px 16px;\n}\n.hw-event-text {\n font-size: 12px;\n color: var(--hw-text-3);\n text-align: center;\n}\n.hw-event--card {\n justify-content: flex-start;\n align-items: center;\n gap: 10px;\n background: var(--hw-bg-subtle);\n padding: 10px 14px;\n border-radius: 12px;\n margin: 4px 16px;\n}\n.hw-event-avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-hover, #e0e0e0)));\n color: var(--hw-text-2, #555);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 600;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-event-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-event-avatar .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-event-body {\n font-size: 13px;\n line-height: 1.3;\n}\n.hw-event-name {\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-event-action {\n color: var(--hw-text-2);\n}\n.hw-new {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--hw-bg-subtle);\n}\n.hw-new-body {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 24px;\n text-align: center;\n}\n.hw-new-welcome {\n flex: 1;\n padding: 16px 20px;\n overflow-y: auto;\n}\n.hw-new-heading {\n font-size: 17px;\n font-weight: 600;\n color: var(--hw-text);\n margin-bottom: 6px;\n}\n.hw-new-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n margin-bottom: 24px;\n}\n.hw-powered {\n text-align: center;\n padding: 8px;\n font-size: 11px;\n color: var(--hw-text-4);\n flex-shrink: 0;\n}\n.hw-powered a {\n color: var(--hw-text-2);\n text-decoration: none;\n font-weight: 500;\n}\n.hw-powered a:hover {\n color: var(--hw-text);\n}\n@media (max-width: 479px) {\n .hw-widget {\n bottom: 16px;\n right: 16px;\n left: auto;\n }\n .hw-window {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: var(--hw-visible-height, 100%);\n border-radius: 0;\n animation: hw-mob-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n }\n .hw-window--closing {\n animation: hw-mob-down 0.2s ease forwards;\n }\n @keyframes hw-mob-up {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes hw-mob-down {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n }\n .hw-hero {\n padding-top: calc(20px + env(safe-area-inset-top, 0px));\n }\n .hw-header {\n padding-top: env(safe-area-inset-top, 0px);\n }\n .hw-tabs {\n padding-bottom: env(safe-area-inset-bottom, 0px);\n }\n .hw-composer {\n padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n }\n .hw-powered {\n padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));\n }\n .hw-window:has(.hw-powered) .hw-composer {\n padding-bottom: 8px;\n }\n .hw-window:has(.hw-powered) .hw-tabs {\n padding-bottom: 0;\n }\n .hw-header-close,\n .hw-header-back,\n .hw-header-action {\n width: 34px;\n height: 34px;\n }\n .hw-composer-send {\n width: 40px;\n height: 40px;\n }\n .hw-window ~ .hw-bubble {\n display: none;\n }\n .hw-messages {\n padding: 12px 14px;\n }\n .hw-msg {\n max-width: 82%;\n }\n .hw-msg--ai {\n max-width: 100%;\n }\n}\n.hw-preview {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n width: 300px;\n max-width: calc(100vw - 40px);\n background: var(--hw-bg);\n border: 1px solid var(--hw-border);\n border-radius: 16px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n animation: hw-preview-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n}\n.hw-preview.hw-preview--anchored {\n position: static;\n bottom: auto;\n right: auto;\n width: 100%;\n max-width: 100%;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar {\n background: none;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar img,\n.hw-preview.hw-preview--anchored .hw-preview-avatar svg:not(.hw-agent-custom svg) {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.hw-preview:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n@keyframes hw-preview-in {\n from {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n@keyframes hw-preview-out {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n}\n.hw-preview-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px 0;\n}\n.hw-preview-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background:\n linear-gradient(\n 135deg,\n var(--hw-primary),\n color-mix(in srgb, var(--hw-primary) 50%, black));\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-preview-avatar svg:not(.hw-agent-custom svg) {\n width: 16px;\n height: 16px;\n}\n.hw-preview-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.hw-preview-name {\n font-size: 13px;\n font-weight: 600;\n color: var(--hw-text);\n flex: 1;\n}\n.hw-preview-close {\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: background 0.15s, color 0.15s;\n flex-shrink: 0;\n}\n.hw-preview-close:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text-2);\n}\n.hw-preview-close:active {\n transform: scale(0.90);\n transition:\n transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.15s,\n color 0.15s;\n}\n.hw-preview-close svg {\n width: 12px;\n height: 12px;\n}\n.hw-preview-body {\n padding: 4px 14px;\n font-size: 14px;\n line-height: 1.45;\n color: var(--hw-text-2);\n}\n.hw-preview-body:first-of-type {\n padding-top: 8px;\n}\n.hw-preview-body:last-child {\n padding-bottom: 14px;\n}\n.hw-preview-footer {\n margin-top: 2px;\n padding: 8px 14px 12px;\n border-top: 1px solid var(--hw-border);\n font-size: 11px;\n line-height: 1.3;\n color: var(--hw-text-2);\n opacity: 0.65;\n}\n.hw-preview-prompt {\n padding: 2px 14px 6px;\n font-size: 14px;\n font-weight: 500;\n color: var(--hw-text-1);\n}\n.hw-preview-quick-replies {\n padding: 0 14px 14px;\n margin-top: 0;\n}\n.hw-awaiting {\n margin-top: 2px;\n padding-left: 44px;\n font-size: 11px;\n line-height: 1.4;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-preview-dock {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 8px;\n pointer-events: none;\n}\n.hw-preview-dock > .hw-preview,\n.hw-preview-dock > .hw-preview-stack {\n position: relative;\n bottom: auto;\n right: auto;\n pointer-events: auto;\n}\n.hw-preview--closing {\n animation: hw-preview-out 0.2s ease-in forwards;\n}\n.hw-preview-stack {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-preview-stack .hw-preview {\n position: relative;\n bottom: auto;\n right: auto;\n}\n.hw-preview-stack.hw-preview-stack--anchored {\n position: static;\n bottom: auto;\n right: auto;\n width: 100%;\n}\n.hw-preview-more {\n align-self: flex-end;\n padding: 4px 10px;\n border: 0;\n border-radius: 999px;\n background: var(--hw-bg);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--hw-border);\n color: var(--hw-text-2);\n font: inherit;\n font-size: 12px;\n line-height: 1.4;\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n}\n.hw-preview-more:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n}\n.hw-preview--announcement {\n width: 340px;\n}\n.hw-preview--announcement .hw-preview-body--title {\n font-weight: 600;\n color: var(--hw-text);\n font-size: 15px;\n line-height: 1.3;\n padding-top: 10px;\n}\n.hw-preview--announcement .hw-preview-body--desc {\n font-size: 13px;\n color: var(--hw-text-2);\n line-height: 1.5;\n padding-bottom: 16px;\n}\n.hw-announcement-badge {\n display: inline-block;\n margin: 8px 14px 0;\n padding: 2px 8px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 10%, transparent);\n border-radius: 4px;\n}\n.hw-whats-new {\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n overflow: hidden;\n}\n.hw-whats-new-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 14px 0;\n}\n.hw-whats-new-title {\n font-size: 12px;\n font-weight: 600;\n color: var(--hw-text-2);\n}\n.hw-whats-new-view-all {\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-primary);\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-family: inherit;\n}\n.hw-whats-new-view-all:hover {\n opacity: 0.8;\n}\n.hw-whats-new-list {\n display: flex;\n flex-direction: column;\n}\n.hw-whats-new-item {\n display: flex;\n flex-direction: column;\n gap: 2px;\n width: 100%;\n padding: 10px 14px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n transition: background-color 140ms ease;\n}\n.hw-whats-new-item:last-child {\n border-bottom: none;\n}\n.hw-whats-new-item:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n.hw-whats-new-item-top {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.hw-whats-new-badge {\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--hw-primary);\n}\n.hw-whats-new-time {\n font-size: 11px;\n color: var(--hw-text-3);\n margin-left: auto;\n}\n.hw-whats-new-item-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--hw-text);\n line-height: 1.3;\n display: flex;\n align-items: baseline;\n gap: 8px;\n}\n.hw-whats-new-time-inline {\n font-size: 11px;\n font-weight: 400;\n color: var(--hw-text-3);\n margin-left: auto;\n flex-shrink: 0;\n}\n.hw-whats-new-item-body {\n font-size: 12px;\n color: var(--hw-text-2);\n line-height: 1.4;\n}\n.hw-tabs-dot {\n position: absolute;\n top: -2px;\n right: -6px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--hw-primary);\n animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.hw-bubble-badge-dot {\n display: block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: white;\n}\n.hw-content-search {\n padding: 10px 16px;\n}\n.hw-content-search-box {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--hw-bg);\n border: 1px solid var(--hw-border-md);\n border-radius: 10px;\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-content-search-box:focus-within {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-content-search-input {\n flex: 1;\n border: none !important;\n outline: none !important;\n box-shadow: none !important;\n background: none;\n font-size: 13px;\n color: var(--hw-text-1);\n font-family: inherit;\n line-height: 1;\n -webkit-appearance: none;\n}\n.hw-content-search-input:focus,\n.hw-content-search-input:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n}\n.hw-content-search-input::placeholder {\n color: var(--hw-text-3);\n}\n.hw-content-search-icon {\n width: 15px;\n height: 15px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n}\n.hw-content-list {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.hw-content-entries {\n flex: 1;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.hw-content-entry {\n display: block;\n width: 100%;\n padding: 14px 16px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n transition: background-color 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n}\n.hw-content-entry:hover {\n background: var(--hw-bg-hover);\n}\n.hw-content-entry:active {\n background: var(--hw-border);\n}\n.hw-content-entry:last-child {\n border-bottom: none;\n}\n.hw-content-entry-main {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hw-content-entry-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n.hw-content-entry-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text-1);\n line-height: 1.3;\n}\n.hw-content-entry-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.hw-content-entry-meta {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 2px;\n}\n.hw-content-entry-badge {\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-text-3);\n background: var(--hw-bg-hover);\n padding: 1px 6px;\n border-radius: 4px;\n}\n.hw-content-entry-date {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-content-entry-chevron {\n width: 16px;\n height: 16px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n opacity: 0.5;\n}\n.hw-content-detail {\n padding: 16px;\n overflow-y: auto;\n overscroll-behavior: contain;\n flex: 1;\n min-height: 0;\n}\n.hw-content-detail-header {\n margin-bottom: 16px;\n}\n.hw-content-detail-title {\n font-size: 17px;\n font-weight: 700;\n color: var(--hw-text-1);\n margin: 0 0 6px;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.hw-content-detail-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n.hw-content-detail-date {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-content-detail-body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--hw-text-1);\n}\n.hw-markdown h1 {\n font-size: 17px;\n font-weight: 700;\n margin: 0;\n}\n.hw-markdown h2 {\n font-size: 15px;\n font-weight: 600;\n margin: 0;\n}\n.hw-markdown h3 {\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n}\n.hw-markdown p {\n margin: 0;\n}\n.hw-markdown p:empty,\n.hw-markdown div:empty,\n.hw-markdown p:has(> br:only-child),\n.hw-markdown div:has(> br:only-child) {\n display: none;\n}\n.hw-markdown > * + * {\n margin-top: 12px;\n}\n.hw-markdown > * + h1,\n.hw-markdown > * + h2 {\n margin-top: 20px;\n}\n.hw-markdown > * + h3 {\n margin-top: 16px;\n}\n.hw-markdown > h1 + *,\n.hw-markdown > h2 + *,\n.hw-markdown > h3 + * {\n margin-top: 8px;\n}\n.hw-markdown > *:first-child {\n margin-top: 0;\n}\n.hw-markdown > *:last-child {\n margin-bottom: 0;\n}\n.hw-markdown > br {\n display: none;\n}\n.hw-markdown ul,\n.hw-markdown ol {\n margin: 0;\n padding-left: 20px;\n}\n.hw-markdown li {\n margin: 4px 0;\n}\n.hw-markdown code {\n font-family:\n ui-monospace,\n "SF Mono",\n monospace;\n font-size: 12px;\n background: var(--hw-bg-hover);\n padding: 1px 5px;\n border-radius: 4px;\n}\n.hw-table-wrap {\n margin: 10px 0;\n overflow-x: auto;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n border-radius: 10px;\n}\n.hw-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n.hw-table th {\n text-align: left;\n font-weight: 600;\n font-size: 12px;\n padding: 8px 12px;\n background: var(--hw-bg-hover, #f5f5f4);\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n}\n.hw-table td {\n padding: 8px 12px;\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n vertical-align: top;\n}\n.hw-table tbody tr:last-child td {\n border-bottom: none;\n}\n.hw-code {\n margin: 10px 0;\n border-radius: 10px;\n overflow: hidden;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n background: var(--hw-bg-hover, #f5f5f4);\n font-family:\n ui-monospace,\n "SF Mono",\n "Menlo",\n monospace;\n}\n.hw-code-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n padding: 7px 8px 7px 12px;\n font-size: 11px;\n color: var(--hw-text-2, #6b7280);\n background: rgba(0, 0, 0, 0.03);\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n}\n.hw-code-lang {\n text-transform: lowercase;\n letter-spacing: 0.02em;\n font-weight: 500;\n}\n.hw-code-actions {\n display: inline-flex;\n align-items: center;\n gap: 1px;\n}\n.hw-code-action {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n font-family: inherit;\n color: var(--hw-text-2, #6b7280);\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n cursor: pointer;\n opacity: 0.62;\n transition:\n background 120ms ease,\n color 120ms ease,\n opacity 120ms ease,\n scale 120ms ease;\n}\n.hw-code-action:hover {\n color: var(--hw-text, #111);\n background: rgba(0, 0, 0, 0.06);\n opacity: 1;\n}\n.hw-code-action:active {\n scale: 0.96;\n}\n.hw-code-action svg {\n width: 13px;\n height: 13px;\n}\n.hw-code-copy-icon,\n.hw-code-check-icon {\n position: absolute;\n inset: 50% auto auto 50%;\n transition:\n opacity 180ms cubic-bezier(0.2, 0, 0, 1),\n scale 180ms cubic-bezier(0.2, 0, 0, 1),\n filter 180ms cubic-bezier(0.2, 0, 0, 1);\n translate: -50% -50%;\n}\n.hw-code-check-icon {\n filter: blur(4px);\n opacity: 0;\n scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-copy-icon {\n filter: blur(4px);\n opacity: 0;\n scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-check-icon {\n filter: blur(0);\n opacity: 1;\n scale: 1;\n}\n.hw-code-copy-label {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n.hw-code-copy--copied {\n color: #16a34a;\n}\n.hw-code-copy--failed {\n color: #dc2626;\n}\n.hw-code pre {\n margin: 0;\n padding: 10px 12px;\n background: transparent;\n border-radius: 0;\n overflow-x: auto;\n max-width: 100%;\n max-height: 320px;\n scrollbar-color: rgba(0, 0, 0, 0.22) transparent;\n scrollbar-width: thin;\n}\n.hw-code pre::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n.hw-code pre::-webkit-scrollbar-track {\n background: transparent;\n}\n.hw-code pre::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.18);\n background-clip: content-box;\n border: 3px solid transparent;\n border-radius: 999px;\n}\n.hw-code pre::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.28);\n background-clip: content-box;\n}\n.hw-code pre code {\n display: block;\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.55;\n white-space: pre;\n color: var(--hw-text, #111);\n}\n@media (prefers-color-scheme: dark) {\n .hw-code {\n background: rgba(255, 255, 255, 0.04);\n border-color: rgba(255, 255, 255, 0.08);\n }\n .hw-code-header {\n background: rgba(255, 255, 255, 0.03);\n border-bottom-color: rgba(255, 255, 255, 0.06);\n }\n .hw-code-action:hover,\n .hw-code-action:focus-visible {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-code pre {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n }\n .hw-code pre::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.22);\n background-clip: content-box;\n }\n .hw-code pre::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n }\n}\n.hw-markdown pre {\n margin: 8px 0;\n padding: 10px 12px;\n background: var(--hw-bg-hover);\n border-radius: 8px;\n overflow-x: auto;\n max-width: 100%;\n}\n.hw-markdown pre code {\n display: block;\n background: transparent;\n padding: 0;\n border-radius: 0;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n word-break: normal;\n color: inherit;\n}\n.hw-msg-bubble pre {\n margin: 6px 0;\n padding: 8px 10px;\n background: rgba(0, 0, 0, 0.06);\n border-radius: 6px;\n overflow-x: auto;\n max-width: 100%;\n}\n.hw-msg-bubble pre code {\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n}\n.hw-msg-bubble .hw-code pre {\n margin: 0;\n padding: 10px 12px;\n background: transparent;\n border-radius: 0;\n}\n.hw-msg-bubble .hw-code pre code {\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.55;\n}\n.hw-msg--team .hw-msg-bubble pre,\n.hw-msg--visitor .hw-msg-bubble pre {\n background: rgba(255, 255, 255, 0.12);\n}\n.hw-markdown blockquote {\n margin: 0 0 12px;\n padding: 8px 12px;\n border-left: 3px solid var(--hw-border);\n color: var(--hw-text-2);\n font-style: italic;\n}\n.hw-markdown a {\n color: var(--hw-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.hw-markdown img {\n max-width: 100%;\n border-radius: 8px;\n margin: 8px 0;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-markdown hr {\n border: none;\n border-top: 1px solid var(--hw-border);\n margin: 16px 0;\n}\n.hw-content-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n.hw-content-empty-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text-1);\n margin-bottom: 4px;\n}\n.hw-content-empty-desc {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-content-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n.hw-content-load-more {\n display: block;\n width: 100%;\n padding: 10px;\n border: none;\n background: none;\n color: var(--hw-primary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n text-align: center;\n}\n.hw-content-load-more:hover {\n background: var(--hw-bg-hover);\n}\n.hw-content-load-more:disabled {\n opacity: 0.5;\n cursor: default;\n}\n@media (hover: none) {\n .hw-composer-preview-remove {\n opacity: 0.7;\n }\n}\n.hw-composer--dragging .hw-composer-box {\n border-color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 4%, transparent);\n}\n.hw-composer-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--hw-bg) 90%, transparent);\n border: 2px dashed var(--hw-primary);\n border-radius: 12px;\n z-index: 10;\n pointer-events: none;\n animation: hw-drop-pulse 1.5s ease-in-out infinite;\n}\n.hw-composer-drop-text {\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-primary);\n}\n@keyframes hw-drop-pulse {\n 0%, 100% {\n opacity: 0.8;\n }\n 50% {\n opacity: 1;\n }\n}\n.hw-disconnect {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n padding: 7px 14px;\n background: var(--hw-bg-hover);\n color: var(--hw-text-2);\n font-size: 11.5px;\n font-weight: 500;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 0;\n animation: hw-disconnect-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);\n}\n@keyframes hw-disconnect-in {\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-disconnect-retry {\n flex: none;\n padding: 2px 4px;\n margin: -2px 0;\n border: 0;\n border-radius: 4px;\n background: none;\n color: var(--hw-text);\n font: inherit;\n font-weight: 600;\n text-decoration: underline;\n text-underline-offset: 2px;\n cursor: pointer;\n}\n.hw-disconnect-retry:hover {\n text-decoration-thickness: 2px;\n}\n.hw-disconnect-retry:focus-visible {\n outline: 2px solid var(--hw-text);\n outline-offset: 1px;\n}\n.hw-disconnect-spinner {\n width: 9px;\n height: 9px;\n border: 1.5px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n opacity: 0.75;\n flex-shrink: 0;\n animation: hw-spin 0.7s linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-disconnect {\n animation: none;\n }\n .hw-disconnect-spinner {\n animation: none;\n border-top-color: currentColor;\n opacity: 0.5;\n }\n}\n.hw-error-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 24px;\n text-align: center;\n gap: 12px;\n}\n.hw-error-icon {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: #fef2f2;\n color: #ef4444;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-error-icon svg {\n width: 24px;\n height: 24px;\n}\n.hw-error-title {\n font-size: 15px;\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-error-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n}\n.hw-error-btn {\n padding: 8px 20px;\n border: 1px solid var(--hw-border-md);\n border-radius: 8px;\n background: var(--hw-bg);\n color: var(--hw-text);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n.hw-error-btn:hover {\n background: var(--hw-bg-hover);\n}\n.hw-send-error {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #fef2f2;\n color: #dc2626;\n font-size: 12px;\n font-weight: 500;\n flex-shrink: 0;\n animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-send-error-retry {\n margin-left: auto;\n padding: 2px 8px;\n border: 1px solid #fca5a5;\n border-radius: 4px;\n background: none;\n color: #dc2626;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n}\n.hw-send-error-retry:hover {\n background: #fee2e2;\n}\n.hw-resolved {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 10px 14px;\n border-top: 1px solid var(--hw-border);\n flex-shrink: 0;\n}\n.hw-resolved-status {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12.5px;\n font-weight: 550;\n color: var(--hw-text);\n}\n.hw-resolved-status svg {\n flex: none;\n color: var(--hw-text-2);\n}\n.hw-csat {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 6px 10px;\n}\n.hw-csat-label,\n.hw-csat-error {\n font-size: 12px;\n color: var(--hw-text-2);\n}\n.hw-csat-error {\n color: var(--hw-text);\n}\n.hw-csat-buttons {\n display: flex;\n gap: 6px;\n}\n.hw-csat-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n height: 30px;\n padding: 0 11px;\n border: 1px solid var(--hw-border-md);\n border-radius: 999px;\n background: var(--hw-bg);\n color: var(--hw-text);\n font: inherit;\n font-size: 12px;\n font-weight: 550;\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n}\n.hw-csat-btn svg {\n flex: none;\n}\n.hw-csat-btn:hover {\n background: var(--hw-bg-hover);\n}\n.hw-csat-btn:focus-visible {\n outline: 2px solid var(--hw-text);\n outline-offset: 2px;\n}\n.hw-csat-btn[aria-pressed=true] {\n background: var(--hw-bg-hover);\n border-color: var(--hw-brand, var(--hw-primary));\n box-shadow: inset 0 0 0 1px var(--hw-brand, var(--hw-primary));\n cursor: default;\n}\n.hw-load-more-trigger {\n display: flex;\n justify-content: center;\n min-height: 1px;\n}\n.hw-load-more-trigger:has(.hw-load-more-spinner) {\n padding: 8px 0;\n}\n.hw-load-more-spinner {\n display: flex;\n gap: 3px;\n}\n.hw-load-more-spinner > div {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--hw-text-4);\n animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-load-more-spinner > div:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-load-more-spinner > div:nth-child(3) {\n animation-delay: 0.4s;\n}\n.hw-drag-handle {\n display: none;\n}\n@media (max-width: 479px) {\n .hw-drag-handle {\n display: flex;\n justify-content: center;\n padding: 8px 0 4px;\n flex-shrink: 0;\n }\n .hw-drag-handle-pill {\n width: 32px;\n height: 4px;\n border-radius: 2px;\n background: var(--hw-text-4);\n }\n}\n.hw-msg-bubble p {\n margin: 0 0 8px;\n}\n.hw-msg-bubble p:last-child {\n margin-bottom: 0;\n}\n.hw-msg-bubble strong {\n font-weight: 600;\n}\n.hw-msg-bubble em {\n font-style: italic;\n}\n.hw-msg-bubble a {\n color: inherit;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);\n word-break: normal;\n overflow-wrap: anywhere;\n}\n.hw-msg-bubble a:hover {\n opacity: 0.8;\n}\n.hw-msg--visitor .hw-msg-bubble a {\n color: rgba(255, 255, 255, 0.9);\n}\n.hw-msg--visitor .hw-msg-bubble a:hover {\n color: white;\n}\n.hw-msg-bubble ul,\n.hw-msg-bubble ol {\n margin: 4px 0 8px;\n padding-left: 20px;\n}\n.hw-msg-bubble li {\n margin: 2px 0;\n}\n.hw-msg-bubble code {\n padding: 1px 4px;\n border-radius: 3px;\n background: rgba(0, 0, 0, 0.06);\n font-size: 0.9em;\n font-family:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n monospace;\n}\n.hw-msg-bubble pre {\n margin: 4px 0 8px;\n padding: 8px 10px;\n border-radius: 6px;\n background: rgba(0, 0, 0, 0.06);\n overflow-x: auto;\n font-size: 0.85em;\n}\n.hw-msg-bubble pre code {\n padding: 0;\n background: none;\n}\n.hw-msg-bubble blockquote {\n margin: 4px 0 8px;\n padding: 4px 0 4px 12px;\n border-left: 3px solid var(--hw-border-md);\n color: var(--hw-text-2);\n}\n.hw-widget[data-theme=dark] {\n --hw-bg: #1c1c1e;\n --hw-bg-subtle: #161618;\n --hw-bg-hover: #2c2c2e;\n --hw-border: rgba(255, 255, 255, 0.08);\n --hw-border-md: rgba(255, 255, 255, 0.14);\n --hw-text: #f5f5f5;\n --hw-text-1: #f5f5f5;\n --hw-text-2: #a1a1aa;\n --hw-text-3: #71717a;\n --hw-text-4: #52525b;\n --hw-visitor-bubble-bg: #2c2c2e;\n --hw-visitor-bubble-text: #f5f5f5;\n --hw-focus-border: rgba(255, 255, 255, 0.28);\n --hw-focus-ring: rgba(255, 255, 255, 0.08);\n --hw-brand: #f5f5f5;\n --hw-on-brand: #1c1c1e;\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light]) .hw-messages {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n }\n .hw-widget:not([data-theme=light]) .hw-messages::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n background-clip: content-box;\n }\n .hw-widget:not([data-theme=light]) .hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n }\n .hw-widget:not([data-theme=light]) {\n --hw-bg: #1c1c1e;\n --hw-bg-subtle: #161618;\n --hw-bg-hover: #2c2c2e;\n --hw-border: rgba(255, 255, 255, 0.08);\n --hw-border-md: rgba(255, 255, 255, 0.14);\n --hw-text: #f5f5f5;\n --hw-text-1: #f5f5f5;\n --hw-text-2: #a1a1aa;\n --hw-text-3: #71717a;\n --hw-text-4: #52525b;\n --hw-visitor-bubble-bg: #2c2c2e;\n --hw-visitor-bubble-text: #f5f5f5;\n --hw-focus-border: rgba(255, 255, 255, 0.28);\n --hw-focus-ring: rgba(255, 255, 255, 0.08);\n --hw-brand: #f5f5f5;\n --hw-on-brand: #1c1c1e;\n }\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light]) .hw-header {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-header-bot-icon {\n background: var(--hw-bg-hover);\n }\n .hw-header-name,\n .hw-header-title {\n color: var(--hw-text);\n }\n .hw-header-status {\n color: var(--hw-text-2);\n }\n .hw-header-close,\n .hw-header-back {\n color: var(--hw-text-2);\n }\n .hw-header-close:hover,\n .hw-header-back:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n }\n .hw-content-entry {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-content-entry:hover {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border-md);\n }\n .hw-content-empty,\n .hw-empty {\n color: var(--hw-text-3);\n }\n .hw-conv-card {\n border-color: var(--hw-border);\n }\n .hw-recent-row {\n border-color: var(--hw-border);\n }\n .hw-composer-drop-overlay {\n background: rgba(0, 0, 0, 0.6);\n color: var(--hw-text);\n }\n .hw-composer--dragging .hw-composer-box {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n }\n .hw-hero {\n background:\n linear-gradient(\n 160deg,\n color-mix(in srgb, var(--hw-primary) 40%, black) 0%,\n var(--hw-primary) 50%,\n color-mix(in srgb, var(--hw-primary) 25%, black) 100%);\n }\n .hw-sheet {\n background: var(--hw-bg);\n }\n .hw-card {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border);\n }\n .hw-card:hover {\n background: #333;\n }\n .hw-window {\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);\n }\n .hw-bubble:focus-visible {\n outline-color: var(--hw-text-3);\n }\n .hw-msg--visitor .hw-msg-bubble {\n background: var(--hw-primary);\n color: white;\n }\n .hw-msg-bubble code {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-msg-bubble pre {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-composer-box {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-composer-input {\n color: var(--hw-text);\n }\n .hw-tabs {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-conv-card:hover,\n .hw-recent-row:hover {\n background: var(--hw-bg-hover);\n }\n .hw-send-error {\n background: #450a0a;\n color: #fca5a5;\n }\n .hw-error-icon {\n background: #450a0a;\n color: #f87171;\n }\n .hw-hover-preview {\n background: #1c1c1e;\n border-color: var(--hw-border);\n }\n .hw-content-search-box {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border-md);\n }\n .hw-preview {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n}\n.hw-widget[data-hw-placement=docked] {\n --hw-dock-width: 600px;\n --hw-dock-bar-width: 480px;\n --hw-dock-inset: 24px;\n --hw-bar-max-height: 148px;\n --hw-dock-surface: #ffffff;\n --hw-dock-on-surface: #111111;\n --hw-dock-pill-bg: rgba(44, 44, 48, 0.66);\n --hw-dock-pill-fg: rgba(255, 255, 255, 0.94);\n --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] {\n z-index: 2147483000;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock {\n position: fixed;\n left: 0;\n right: 0;\n bottom: var(--hw-dock-inset);\n z-index: 2147483000;\n display: flex;\n flex-direction: column;\n align-items: center;\n pointer-events: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock > * {\n pointer-events: auto;\n}\n.hw-dock-suggestions {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 9px;\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n margin-bottom: 14px;\n}\n.hw-dock-pill-row {\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n animation: hw-dock-pill-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;\n}\n.hw-dock-pill-dismiss {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n padding: 0;\n border: 0;\n background: none;\n color: var(--hw-dock-pill-fg);\n cursor: pointer;\n align-self: flex-start;\n margin-top: 8px;\n opacity: 0;\n transform: scale(0.85);\n transition:\n opacity 0.12s linear,\n transform 0.12s cubic-bezier(0.25, 1, 0.5, 1),\n color 0.12s linear;\n}\n.hw-dock-pill-dismiss svg {\n width: 11px;\n height: 11px;\n}\n.hw-dock-suggestions:hover .hw-dock-pill-dismiss,\n.hw-dock-suggestions:focus-within .hw-dock-pill-dismiss {\n opacity: 1;\n transform: none;\n}\n.hw-dock-pill-dismiss:hover {\n color: var(--hw-dock-on-surface);\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-pill-dismiss {\n transition: none;\n }\n}\n@media (hover: none) {\n .hw-dock-pill-dismiss {\n opacity: 1;\n transform: none;\n }\n}\n.hw-dock-pill {\n align-self: flex-start;\n padding: 10px 18px;\n border: 1px solid var(--hw-dock-pill-border, transparent);\n border-radius: 999px;\n cursor: pointer;\n font: inherit;\n font-size: 14px;\n font-weight: 500;\n text-align: left;\n background: var(--hw-dock-pill-bg);\n color: var(--hw-dock-pill-fg);\n backdrop-filter: blur(10px) saturate(1.2);\n -webkit-backdrop-filter: blur(10px) saturate(1.2);\n box-shadow: 0 4px 14px -8px rgba(12, 11, 10, 0.28);\n transition:\n background 0.16s,\n border-color 0.16s,\n transform 0.16s;\n}\n.hw-dock-pill {\n backdrop-filter: blur(18px);\n -webkit-backdrop-filter: blur(18px);\n}\n.hw-dock-pill:hover {\n background: color-mix(in srgb, var(--hw-dock-pill-bg) 100%, var(--hw-dock-on-surface) 8%);\n border-color: color-mix(in srgb, var(--hw-dock-pill-border) 100%, var(--hw-dock-on-surface) 10%);\n transform: translateX(3px);\n}\n@keyframes hw-dock-pill-in {\n from {\n opacity: 0;\n transform: translateY(10px) scale(0.97);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-dock-bar {\n display: flex;\n align-items: flex-end;\n gap: 10px;\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n min-height: 52px;\n padding: 10px 10px 10px 18px;\n border: 0;\n border-radius: 26px;\n background: var(--hw-dock-surface);\n color: var(--hw-dock-on-surface);\n box-shadow:\n inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n 0 0 0 1px color-mix(in srgb, var(--hw-dock-on-surface) 7%, transparent),\n 0 2px 6px rgba(12, 11, 10, 0.18),\n 0 20px 48px -14px rgba(12, 11, 10, 0.45);\n transition:\n border-radius 0.18s ease,\n box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),\n width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.hw-dock-bar:focus-within {\n box-shadow:\n inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n 0 0 0 1px color-mix(in srgb, var(--hw-primary, #fb923c) 60%, transparent),\n 0 2px 6px rgba(12, 11, 10, 0.18),\n 0 20px 48px -14px rgba(12, 11, 10, 0.45);\n}\n.hw-dock-bar[data-grown=true] {\n border-radius: 20px;\n}\n.hw-dock-input {\n flex: 1;\n min-width: 0;\n min-height: 20px;\n max-height: var(--hw-bar-max-height);\n padding: 6px 0;\n border: 0;\n outline: none;\n resize: none;\n overflow-y: auto;\n background: transparent;\n color: var(--hw-dock-on-surface);\n font: inherit;\n font-size: 14px;\n line-height: 1.45;\n transition: height 0.12s ease;\n}\n.hw-dock-input::placeholder {\n color: color-mix(in srgb, var(--hw-dock-on-surface) 45%, transparent);\n}\n.hw-dock-send {\n flex: none;\n width: 32px;\n height: 32px;\n margin-bottom: 1px;\n border: 0;\n border-radius: 50%;\n display: grid;\n place-items: center;\n cursor: pointer;\n background: var(--hw-primary, #fb923c);\n color: var(--hw-on-brand, #fff);\n transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s;\n}\n.hw-dock-send:hover:not(:disabled) {\n transform: scale(1.06);\n}\n.hw-dock-send:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n position: fixed;\n left: 50%;\n right: auto;\n margin-left: calc(var(--hw-dock-width) / -2);\n bottom: calc(var(--hw-dock-inset) + 66px);\n width: var(--hw-dock-width);\n max-width: calc(100vw - 32px);\n height: 420px;\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n left: 16px;\n right: 16px;\n margin-left: 0;\n width: auto;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-bubble {\n display: none;\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-window {\n bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-suggestions {\n display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-pill,\n .hw-dock-bar,\n .hw-dock-input,\n .hw-dock-send {\n animation: none;\n transition: none;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-composer,\n.hw-widget[data-hw-placement=docked] .hw-tabs,\n.hw-widget[data-hw-placement=docked] .hw-footer-tabs {\n display: none;\n}\n.hw-starters {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n border-radius: 14px;\n overflow: hidden;\n background: var(--hw-bg);\n box-shadow: inset 0 0 0 1px var(--hw-border);\n}\n.hw-starter {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 11px 14px;\n border: 0;\n border-radius: 0;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text);\n font: inherit;\n text-align: left;\n animation: hw-starter-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n transition: background 0.12s;\n}\n.hw-starter + .hw-starter {\n box-shadow: inset 0 1px 0 var(--hw-border);\n}\n.hw-starter:hover {\n background: var(--hw-bg-hover);\n}\n.hw-starter-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n.hw-starter-k {\n font-size: 13px;\n font-weight: 550;\n line-height: 1.35;\n color: var(--hw-text);\n}\n.hw-starter-q {\n font-size: 12px;\n line-height: 1.35;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-starter svg {\n flex: none;\n color: var(--hw-text-3, var(--hw-text-muted));\n opacity: 0.45;\n transition: opacity 0.15s, transform 0.15s;\n}\n.hw-starter:hover svg {\n opacity: 0.9;\n transform: translateX(2px);\n}\n@keyframes hw-starter-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-header-back {\n display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-starter {\n animation: none;\n }\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light])[data-hw-placement=docked] {\n --hw-dock-surface: #1f1f23;\n --hw-dock-on-surface: #f4f4f6;\n --hw-dock-pill-bg: rgba(255, 255, 255, 0.1);\n --hw-dock-pill-fg: #e4e4e7;\n --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n }\n}\n.hw-widget[data-theme=dark][data-hw-placement=docked] {\n --hw-dock-surface: #1f1f23;\n --hw-dock-on-surface: #f4f4f6;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n --hw-bg: rgba(255, 255, 255, 0.08);\n --hw-bg-subtle: transparent;\n --hw-bg-hover: rgba(255, 255, 255, 0.1);\n --hw-border: rgba(255, 255, 255, 0.14);\n --hw-border-md: rgba(255, 255, 255, 0.22);\n --hw-text: rgba(255, 255, 255, 0.94);\n --hw-text-1: #ffffff;\n --hw-text-2: rgba(255, 255, 255, 0.72);\n --hw-text-3: rgba(255, 255, 255, 0.62);\n --hw-text-4: rgba(255, 255, 255, 0.46);\n --hw-visitor-bubble-bg: rgba(255, 255, 255, 0.16);\n --hw-visitor-bubble-text: #ffffff;\n --hw-brand: rgba(255, 255, 255, 0.92);\n --hw-on-brand: #17161a;\n --hw-focus-border: rgba(255, 255, 255, 0.34);\n --hw-focus-ring: rgba(255, 255, 255, 0.1);\n height: 500px;\n max-height: calc(100vh - 180px);\n border-radius: 24px;\n color: var(--hw-text);\n background:\n linear-gradient(\n 180deg,\n rgba(40, 40, 44, 0.72) 0%,\n rgba(46, 46, 50, 0.7) 55%,\n rgba(52, 52, 56, 0.68) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n background: #2c2c2e;\n }\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n height: min(60vh, 460px);\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-header--sub {\n padding: 14px 12px 8px 16px;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-status {\n display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-name {\n font-size: 15.5px;\n font-weight: 560;\n letter-spacing: -0.006em;\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-conv-name,\n.hw-widget[data-hw-placement=docked] .hw-event-name {\n font-weight: 545;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-bot-icon {\n border-radius: 50%;\n overflow: hidden;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-close:hover,\n.hw-widget[data-hw-placement=docked] .hw-header-menu-btn:hover {\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-messages {\n padding: 4px 22px 16px;\n gap: 18px;\n -webkit-mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 16px);\n mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 16px);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--ai .hw-msg-bubble,\n.hw-widget[data-hw-placement=docked] .hw-msg--team .hw-msg-bubble {\n padding: 0;\n background: transparent;\n border-radius: 0;\n font-size: 15px;\n line-height: 1.55;\n color: var(--hw-text);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--visitor .hw-msg-bubble {\n background: rgba(255, 255, 255, 0.16);\n color: #ffffff;\n font-size: 14.5px;\n line-height: 1.5;\n}\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble pre,\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble code {\n background: rgba(0, 0, 0, 0.28);\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row {\n background: rgba(0, 0, 0, 0.26);\n border-color: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] .hw-window :focus-visible {\n outline-color: rgba(255, 255, 255, 0.55);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus,\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus-visible {\n outline: none;\n box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row:focus-within {\n border-color: rgba(255, 255, 255, 0.42);\n box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-submit {\n background: #ffffff;\n color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n position: relative;\n z-index: 3;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu {\n background: #3a3a3f;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 44px -12px rgba(12, 11, 10, 0.62);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button:hover {\n background: rgba(255, 255, 255, 0.11);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button.hw-header-menu-conv[data-active=true] {\n background: rgba(255, 255, 255, 0.09);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-convs {\n border-bottom-color: rgba(255, 255, 255, 0.12);\n}\n.hw-widget[data-hw-placement=docked] .hw-event--card {\n margin: 0;\n background: rgba(255, 255, 255, 0.08);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-event-avatar {\n background: rgba(255, 255, 255, 0.14);\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview {\n position: fixed;\n left: 50%;\n right: auto;\n margin-left: calc(var(--hw-dock-bar-width, var(--hw-dock-width)) / -2);\n bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n border: 0;\n border-radius: 24px;\n color: rgba(255, 255, 255, 0.94);\n background:\n linear-gradient(\n 180deg,\n rgba(40, 40, 44, 0.74) 0%,\n rgba(52, 52, 56, 0.7) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-name,\n.hw-widget[data-hw-placement=docked] .hw-preview-body {\n color: rgba(255, 255, 255, 0.94);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close {\n color: rgba(255, 255, 255, 0.6);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close:hover {\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-footer {\n color: rgba(255, 255, 255, 0.55);\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-preview {\n left: 16px;\n right: 16px;\n margin-left: 0;\n width: auto;\n }\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-preview {\n background: #2c2c2e;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn {\n padding: 7px 14px;\n font-size: 13px;\n font-weight: 550;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.94);\n box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn:hover:not(:disabled) {\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn[data-tapped=true] {\n background: rgba(255, 255, 255, 0.22);\n color: #ffffff;\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n transform: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn svg {\n opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer {\n padding: 7px 14px;\n font-size: 13px;\n background: rgba(255, 255, 255, 0.94);\n color: #17161a;\n box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n transition:\n background 0.15s,\n box-shadow 0.15s,\n transform 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer:hover {\n background: #ffffff;\n color: #17161a;\n box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-offer svg {\n opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar {\n --hw-dock-on-surface: rgba(255, 255, 255, 0.94);\n color: rgba(255, 255, 255, 0.94);\n background:\n linear-gradient(\n 180deg,\n rgba(44, 44, 48, 0.74) 0%,\n rgba(52, 52, 56, 0.72) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -16px rgba(12, 11, 10, 0.45);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n width: var(--hw-dock-width);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar:focus-within {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 18px 40px -16px rgba(12, 11, 10, 0.5);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 22px 52px -18px rgba(12, 11, 10, 0.52);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-send:not(:disabled) {\n background: #ffffff;\n color: #17161a;\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-dock-bar {\n background: #2c2c2e;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n transform-origin: 50% 100%;\n animation: hw-dock-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing {\n animation: hw-dock-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n@keyframes hw-dock-panel-in {\n from {\n opacity: 0;\n transform: translateY(14px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n@keyframes hw-dock-panel-out {\n from {\n opacity: 1;\n transform: none;\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.99);\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n animation: hw-dock-settle 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n animation: hw-dock-settle 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.11s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-header--sub,\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-messages {\n animation: none;\n}\n@keyframes hw-dock-settle {\n from {\n opacity: 0;\n transform: translateY(7px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-widget[data-hw-placement=docked] .hw-window,\n .hw-widget[data-hw-placement=docked] .hw-window--closing,\n .hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub,\n .hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n animation: none;\n }\n}\n.hw-dock-bar {\n flex-wrap: wrap;\n padding-left: 18px;\n padding-right: 8px;\n}\n.hw-dock-error {\n width: var(--hw-dock-width);\n max-width: calc(100vw - 32px);\n margin-bottom: 8px;\n padding: 8px 14px;\n border-radius: 14px;\n background: rgba(190, 24, 40, 0.92);\n color: #ffffff;\n font-size: 12.5px;\n line-height: 1.35;\n box-shadow: 0 10px 26px -12px rgba(12, 11, 10, 0.5);\n animation: hw-dock-settle 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-error {\n animation: none;\n }\n}\n.hw-dock-previews {\n flex: 0 0 100%;\n order: -1;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 2px 0 8px;\n}\n.hw-dock-lead {\n flex: none;\n display: grid;\n place-items: center;\n width: 32px;\n height: 32px;\n margin-left: -8px;\n}\n.hw-dock-actions {\n flex: none;\n display: flex;\n align-items: center;\n gap: 2px;\n margin-bottom: 1px;\n}\n.hw-dock-tool {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n border: 0;\n border-radius: 50%;\n background: transparent;\n color: color-mix(in srgb, var(--hw-dock-on-surface) 52%, transparent);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n.hw-dock-tool:hover:not(:disabled) {\n background: color-mix(in srgb, var(--hw-dock-on-surface) 8%, transparent);\n color: var(--hw-dock-on-surface);\n}\n.hw-dock-tool:disabled {\n opacity: 0.4;\n cursor: default;\n}\n.hw-dock-tool[data-active=true] {\n color: #e11d48;\n background: rgba(225, 29, 72, 0.12);\n animation: hw-dock-listening 1.4s ease-in-out infinite;\n}\n@keyframes hw-dock-listening {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(225, 29, 72, 0);\n }\n}\n.hw-dock-send:disabled {\n opacity: 1;\n background: color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent);\n color: color-mix(in srgb, var(--hw-dock-on-surface) 38%, transparent);\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-tool[data-active=true] {\n animation: none;\n }\n .hw-dock-bar {\n transition: none;\n }\n}\n.hw-dock-input:focus,\n.hw-dock-input:focus-visible {\n outline: none;\n box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-powered {\n display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-disconnect {\n border-radius: 20px 20px 0 0;\n}\n.hw-msg-meta {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.hw-msg-author {\n font-weight: 550;\n}\n.hw-msg-meta-sep {\n opacity: 0.55;\n}\n.hw-header-actions {\n position: relative;\n display: flex;\n align-items: center;\n gap: 2px;\n}\n.hw-header-menu-btn {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n border: 0;\n border-radius: 8px;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text-2, var(--hw-text-muted));\n transition: background 0.15s, color 0.15s;\n}\n.hw-header-menu-btn:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n}\n.hw-header-menu {\n position: absolute;\n top: 36px;\n right: 0;\n z-index: 6;\n min-width: 236px;\n max-width: 288px;\n padding: 5px;\n border-radius: 14px;\n background: var(--hw-bg);\n color: var(--hw-text);\n box-shadow: 0 0 0 1px var(--hw-border), 0 12px 32px -10px rgba(0, 0, 0, 0.32);\n animation: hw-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n}\n@keyframes hw-menu-in {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-header-menu button {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 9px 10px;\n border: 0;\n border-radius: 9px;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text);\n font: inherit;\n font-size: 13px;\n text-align: left;\n transition: background 0.14s;\n}\n.hw-header-menu button:hover {\n background: var(--hw-bg-hover);\n}\n.hw-header-menu button svg {\n flex: none;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu button:hover svg {\n color: var(--hw-brand, var(--hw-primary));\n}\n.hw-header-menu-convs {\n display: flex;\n flex-direction: column;\n max-height: 168px;\n overflow-y: auto;\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-menu button.hw-header-menu-conv {\n flex-direction: column;\n align-items: stretch;\n gap: 2px;\n padding: 8px 10px;\n}\n.hw-header-menu button.hw-header-menu-conv[data-active=true] {\n background: var(--hw-bg-hover);\n}\n.hw-header-menu-conv-top {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n}\n.hw-header-menu-conv-name {\n overflow: hidden;\n font-size: 12.5px;\n font-weight: 600;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-header-menu-conv-time {\n flex: none;\n font-size: 11px;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu-conv-preview {\n overflow: hidden;\n font-size: 12px;\n color: var(--hw-text-2);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-offers {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n}\n.hw-offer {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n border: 0;\n border-radius: 999px;\n cursor: pointer;\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n font: inherit;\n font-size: 12.5px;\n font-weight: 550;\n transition: background 0.15s, color 0.15s;\n}\n.hw-offer:hover {\n background: var(--hw-brand, var(--hw-primary));\n color: var(--hw-on-brand, #fff);\n}\n.hw-offer svg {\n flex: none;\n}\n.hw-sources {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 4px;\n}\n.hw-source {\n display: flex;\n align-items: center;\n gap: 9px;\n padding: 5px 14px;\n border-radius: 9px;\n background: transparent;\n color: var(--hw-text);\n text-decoration: none;\n transition: background 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-source {\n margin-inline: -8px;\n padding-inline: 8px;\n}\na.hw-source {\n cursor: pointer;\n}\na.hw-source:hover {\n background: var(--hw-bg-hover);\n}\n.hw-source-n {\n display: grid;\n place-items: center;\n flex: none;\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background: var(--hw-brand, var(--hw-primary));\n color: var(--hw-on-brand, #fff);\n font-size: 10px;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n}\n.hw-source-title {\n flex: 1;\n min-width: 0;\n font-size: 12px;\n font-weight: 550;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] {\n --hw-dock-tint: var(--hw-primary);\n --hw-dock-ink: #ffffff;\n --hw-dock-shade: #000000;\n --hw-dock-wash: var(--hw-dock-shade);\n --hw-dock-ink-2: color-mix(in srgb, var(--hw-dock-ink) 86%, var(--hw-dock-tint));\n --hw-dock-ink-3: color-mix(in srgb, var(--hw-dock-ink) 78%, var(--hw-dock-tint));\n --hw-dock-ink-4: color-mix(in srgb, var(--hw-dock-ink) 60%, var(--hw-dock-tint));\n --hw-dock-pill-bg: var(--hw-dock-tint);\n --hw-dock-pill-fg: var(--hw-dock-ink);\n --hw-dock-pill-border: color-mix(in srgb, var(--hw-dock-ink) 30%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-window, .hw-dock-bar, .hw-preview) {\n --hw-text: var(--hw-dock-ink);\n --hw-text-1: var(--hw-dock-ink);\n --hw-text-2: var(--hw-dock-ink-2);\n --hw-text-3: var(--hw-dock-ink-3);\n --hw-text-4: var(--hw-dock-ink-4);\n --hw-text-muted: var(--hw-dock-ink-2);\n --hw-bg: color-mix(in srgb, var(--hw-dock-wash) 12%, transparent);\n --hw-bg-subtle: transparent;\n --hw-bg-hover: color-mix(in srgb, var(--hw-dock-wash) 18%, transparent);\n --hw-border: color-mix(in srgb, var(--hw-dock-ink) 22%, transparent);\n --hw-border-md: color-mix(in srgb, var(--hw-dock-ink) 34%, transparent);\n --hw-focus-border: color-mix(in srgb, var(--hw-dock-ink) 60%, transparent);\n --hw-focus-ring: color-mix(in srgb, var(--hw-dock-ink) 18%, transparent);\n --hw-visitor-bubble-bg: color-mix(in srgb, var(--hw-dock-wash) 14%, transparent);\n --hw-visitor-bubble-text: var(--hw-dock-ink);\n --hw-primary: var(--hw-dock-ink);\n --hw-primary-hover: var(--hw-dock-ink);\n --hw-brand: var(--hw-dock-ink);\n --hw-on-brand: var(--hw-dock-tint);\n --hw-dock-surface: transparent;\n --hw-dock-on-surface: var(--hw-dock-ink);\n color: var(--hw-dock-ink);\n background:\n radial-gradient(\n 70% 60% at 86% 8%,\n var(--hw-dock-tint),\n transparent 64%),\n linear-gradient(\n 165deg,\n color-mix(in srgb, var(--hw-dock-shade) 12%, var(--hw-dock-tint)) 0%,\n color-mix(in srgb, var(--hw-dock-shade) 30%, var(--hw-dock-tint)) 100%);\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px color-mix(in srgb, var(--hw-dock-ink) 16%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble {\n background: var(--hw-dock-ink);\n color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble a,\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble a:hover {\n color: inherit;\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-dock-send:not(:disabled), .hw-quick-reply-btn, .hw-quick-reply-btn:hover:not(:disabled), .hw-email-card-submit, .hw-offer, .hw-offer:hover) {\n background: var(--hw-dock-ink);\n color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-preview-body, .hw-header-close:hover, .hw-header-menu-btn:hover, .hw-preview-close:hover, .hw-quick-reply-btn[data-tapped=true]) {\n color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-preview-close, .hw-preview-footer) {\n color: var(--hw-dock-ink-2);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-quick-reply-btn[data-tapped=true] {\n background: color-mix(in srgb, var(--hw-dock-wash) 22%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-window :focus-visible {\n outline-color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg-bubble :is(pre, code),\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-email-card-row {\n background: color-mix(in srgb, var(--hw-dock-shade) 26%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-header-menu {\n background: color-mix(in srgb, var(--hw-dock-shade) 34%, var(--hw-dock-tint));\n color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-header-bot-icon--team, .hw-event-avatar) {\n background: var(--hw-dock-ink);\n color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-dock-input::placeholder {\n color: var(--hw-dock-ink-3);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-typing-dot {\n background: var(--hw-dock-ink-2);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-disconnect {\n background: color-mix(in srgb, var(--hw-dock-shade) 16%, transparent);\n color: var(--hw-dock-ink-2);\n}\n');
|
|
7050
7901
|
|
|
7051
7902
|
// src/helpway-widget.tsx
|
|
7052
|
-
import { jsx as
|
|
7903
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
7053
7904
|
function HelpwayWidget({
|
|
7054
7905
|
apiKey,
|
|
7055
7906
|
apiUrl,
|
|
@@ -7071,7 +7922,7 @@ function HelpwayWidget({
|
|
|
7071
7922
|
src
|
|
7072
7923
|
}) {
|
|
7073
7924
|
const resolvedApiUrl = apiUrl ?? (src ? src.replace(/\/widget\.js$/, "") : void 0);
|
|
7074
|
-
return /* @__PURE__ */
|
|
7925
|
+
return /* @__PURE__ */ jsx20(
|
|
7075
7926
|
SupportProvider,
|
|
7076
7927
|
{
|
|
7077
7928
|
apiKey,
|
|
@@ -7085,7 +7936,7 @@ function HelpwayWidget({
|
|
|
7085
7936
|
onClose,
|
|
7086
7937
|
onUnreadChange,
|
|
7087
7938
|
theme,
|
|
7088
|
-
children: /* @__PURE__ */
|
|
7939
|
+
children: /* @__PURE__ */ jsx20(AgentAvatarProvider, { value: agentAvatar ?? null, children: /* @__PURE__ */ jsx20(
|
|
7089
7940
|
DefaultWidget,
|
|
7090
7941
|
{
|
|
7091
7942
|
hideLauncher,
|
|
@@ -7099,14 +7950,14 @@ function HelpwayWidget({
|
|
|
7099
7950
|
}
|
|
7100
7951
|
|
|
7101
7952
|
// src/hooks/use-realtime.ts
|
|
7102
|
-
import { useEffect as
|
|
7953
|
+
import { useEffect as useEffect18, useRef as useRef19 } from "react";
|
|
7103
7954
|
function useRealtime(handler) {
|
|
7104
7955
|
const { ws } = useWidgetContext();
|
|
7105
|
-
const handlerRef =
|
|
7106
|
-
|
|
7956
|
+
const handlerRef = useRef19(handler);
|
|
7957
|
+
useEffect18(() => {
|
|
7107
7958
|
handlerRef.current = handler;
|
|
7108
7959
|
});
|
|
7109
|
-
|
|
7960
|
+
useEffect18(() => {
|
|
7110
7961
|
return ws.onEvent((event) => handlerRef.current(event));
|
|
7111
7962
|
}, [ws]);
|
|
7112
7963
|
}
|