@helpway/react 0.17.1 → 0.17.2
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.js +1266 -543
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/themed/styles.css +292 -81
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.2".length > 0 ? "0.17.2" : "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 useEffect16, useRef as useRef17, useState as
|
|
2358
|
+
import { createContext as createContext2, useCallback as useCallback14, useContext as useContext2, useEffect as useEffect16, useRef as useRef17, useState as useState17 } 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,10 @@ 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
|
+
}
|
|
3790
4081
|
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
4082
|
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
4083
|
function inferCodeLanguage(code, lang) {
|
|
@@ -3826,7 +4117,7 @@ function renderMarkdown(md) {
|
|
|
3826
4117
|
const className = langLabel !== "code" ? ` class="language-${langLabel}"` : "";
|
|
3827
4118
|
const trimmed = escaped.replace(/\n$/, "");
|
|
3828
4119
|
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="
|
|
4120
|
+
`<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
4121
|
);
|
|
3831
4122
|
return `
|
|
3832
4123
|
|
|
@@ -3850,7 +4141,9 @@ ${codeBlockPlaceholder(codeBlocks.length - 1)}
|
|
|
3850
4141
|
(_match, headerLine, bodyLines) => {
|
|
3851
4142
|
const cells = (line) => line.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim());
|
|
3852
4143
|
const head = cells(headerLine).map((c) => `<th>${c}</th>`).join("");
|
|
3853
|
-
const rows = bodyLines.trim().split("\n").map(
|
|
4144
|
+
const rows = bodyLines.trim().split("\n").map(
|
|
4145
|
+
(line) => `<tr>${cells(line).map((c) => `<td>${c}</td>`).join("")}</tr>`
|
|
4146
|
+
).join("");
|
|
3854
4147
|
tables.push(
|
|
3855
4148
|
`<div class="hw-table-wrap"><table class="hw-table"><thead><tr>${head}</tr></thead><tbody>${rows}</tbody></table></div>`
|
|
3856
4149
|
);
|
|
@@ -3906,9 +4199,7 @@ function MarkdownContent({
|
|
|
3906
4199
|
const root = rootRef.current;
|
|
3907
4200
|
if (!root) return;
|
|
3908
4201
|
const isWhitespaceOnly = (el) => {
|
|
3909
|
-
const hasNonBrChild = Array.from(el.children).some(
|
|
3910
|
-
(c) => c.tagName !== "BR"
|
|
3911
|
-
);
|
|
4202
|
+
const hasNonBrChild = Array.from(el.children).some((c) => c.tagName !== "BR");
|
|
3912
4203
|
if (hasNonBrChild) return false;
|
|
3913
4204
|
const text = el.textContent ?? "";
|
|
3914
4205
|
return text.replace(/[\s ]/g, "") === "";
|
|
@@ -3933,7 +4224,7 @@ function MarkdownContent({
|
|
|
3933
4224
|
};
|
|
3934
4225
|
}, []);
|
|
3935
4226
|
if (!html) return null;
|
|
3936
|
-
return /* @__PURE__ */
|
|
4227
|
+
return /* @__PURE__ */ jsx7(
|
|
3937
4228
|
"div",
|
|
3938
4229
|
{
|
|
3939
4230
|
ref: rootRef,
|
|
@@ -3945,8 +4236,8 @@ function MarkdownContent({
|
|
|
3945
4236
|
function flashCopied(btn, failed = false) {
|
|
3946
4237
|
const label = btn.querySelector(".hw-code-copy-label");
|
|
3947
4238
|
if (!label) return;
|
|
3948
|
-
const original = label.textContent ?? "
|
|
3949
|
-
label.textContent = failed ? "
|
|
4239
|
+
const original = label.textContent ?? t("widget.code_copy");
|
|
4240
|
+
label.textContent = failed ? t("widget.code_copy_failed") : t("widget.copied");
|
|
3950
4241
|
btn.classList.add(failed ? "hw-code-copy--failed" : "hw-code-copy--copied");
|
|
3951
4242
|
setTimeout(() => {
|
|
3952
4243
|
label.textContent = original;
|
|
@@ -3963,24 +4254,24 @@ function closeDanglingMarkdown(partial) {
|
|
|
3963
4254
|
}
|
|
3964
4255
|
|
|
3965
4256
|
// src/themed/content/content-detail-view.tsx
|
|
3966
|
-
import { Fragment as Fragment2, jsx as
|
|
4257
|
+
import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
3967
4258
|
function ContentDetailView({
|
|
3968
4259
|
entry,
|
|
3969
4260
|
isLoading
|
|
3970
4261
|
}) {
|
|
3971
4262
|
if (isLoading || !entry) {
|
|
3972
|
-
return /* @__PURE__ */
|
|
4263
|
+
return /* @__PURE__ */ jsx8(ArticleSkeleton, {});
|
|
3973
4264
|
}
|
|
3974
4265
|
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__ */
|
|
4266
|
+
return /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail", children: [
|
|
4267
|
+
/* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-header", children: [
|
|
4268
|
+
/* @__PURE__ */ jsx8("h1", { className: "hw-content-detail-title", children: entry.title }),
|
|
4269
|
+
(badge || entry.publishedAt) && /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-meta", children: [
|
|
4270
|
+
badge && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-badge", children: badge }),
|
|
4271
|
+
entry.publishedAt && /* @__PURE__ */ jsx8("span", { className: "hw-content-detail-date", children: formatRelativeTime(entry.publishedAt) })
|
|
3981
4272
|
] })
|
|
3982
4273
|
] }),
|
|
3983
|
-
(entry.body || entry.bodyHtml) && /* @__PURE__ */
|
|
4274
|
+
(entry.body || entry.bodyHtml) && /* @__PURE__ */ jsx8("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx8(MarkdownContent, { bodyHtml: entry.bodyHtml, bodyMarkdown: entry.body }) })
|
|
3984
4275
|
] });
|
|
3985
4276
|
}
|
|
3986
4277
|
function ArticleSkeleton() {
|
|
@@ -4001,15 +4292,15 @@ function ArticleSkeleton() {
|
|
|
4001
4292
|
]
|
|
4002
4293
|
}
|
|
4003
4294
|
];
|
|
4004
|
-
return /* @__PURE__ */
|
|
4005
|
-
/* @__PURE__ */
|
|
4006
|
-
/* @__PURE__ */
|
|
4007
|
-
/* @__PURE__ */
|
|
4008
|
-
/* @__PURE__ */
|
|
4009
|
-
/* @__PURE__ */
|
|
4295
|
+
return /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail", children: [
|
|
4296
|
+
/* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-header", children: [
|
|
4297
|
+
/* @__PURE__ */ jsx8("h1", { className: "hw-content-detail-title", children: /* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-title" }) }),
|
|
4298
|
+
/* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-meta", children: [
|
|
4299
|
+
/* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-badge" }),
|
|
4300
|
+
/* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-date" })
|
|
4010
4301
|
] })
|
|
4011
4302
|
] }),
|
|
4012
|
-
/* @__PURE__ */
|
|
4303
|
+
/* @__PURE__ */ jsx8("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx8("div", { className: "hw-markdown", children: sections.map((s, i) => /* @__PURE__ */ jsx8(
|
|
4013
4304
|
SkeletonSection,
|
|
4014
4305
|
{
|
|
4015
4306
|
headerWidth: s.headerWidth,
|
|
@@ -4023,23 +4314,23 @@ function SkeletonSection({
|
|
|
4023
4314
|
headerWidth,
|
|
4024
4315
|
items
|
|
4025
4316
|
}) {
|
|
4026
|
-
return /* @__PURE__ */
|
|
4027
|
-
/* @__PURE__ */
|
|
4317
|
+
return /* @__PURE__ */ jsxs6(Fragment2, { children: [
|
|
4318
|
+
/* @__PURE__ */ jsx8("h2", { children: /* @__PURE__ */ jsx8(
|
|
4028
4319
|
"span",
|
|
4029
4320
|
{
|
|
4030
4321
|
className: "hw-skeleton hw-skeleton-h2",
|
|
4031
4322
|
style: { display: "block", width: headerWidth }
|
|
4032
4323
|
}
|
|
4033
4324
|
) }),
|
|
4034
|
-
items.map((item, j) => /* @__PURE__ */
|
|
4035
|
-
/* @__PURE__ */
|
|
4325
|
+
items.map((item, j) => /* @__PURE__ */ jsx8("ul", { children: /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsxs6("div", { className: "hw-skeleton-bullet-lines", children: [
|
|
4326
|
+
/* @__PURE__ */ jsx8(
|
|
4036
4327
|
"span",
|
|
4037
4328
|
{
|
|
4038
4329
|
className: "hw-skeleton hw-skeleton-bullet-line",
|
|
4039
4330
|
style: { display: "block", width: item.l1 }
|
|
4040
4331
|
}
|
|
4041
4332
|
),
|
|
4042
|
-
/* @__PURE__ */
|
|
4333
|
+
/* @__PURE__ */ jsx8(
|
|
4043
4334
|
"span",
|
|
4044
4335
|
{
|
|
4045
4336
|
className: "hw-skeleton hw-skeleton-bullet-line",
|
|
@@ -4052,7 +4343,7 @@ function SkeletonSection({
|
|
|
4052
4343
|
|
|
4053
4344
|
// src/themed/content/content-list-view.tsx
|
|
4054
4345
|
import { useCallback as useCallback11, useRef as useRef11, useState as useState11 } from "react";
|
|
4055
|
-
import { jsx as
|
|
4346
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4056
4347
|
function ContentListView({
|
|
4057
4348
|
entries,
|
|
4058
4349
|
isLoading,
|
|
@@ -4076,13 +4367,13 @@ function ContentListView({
|
|
|
4076
4367
|
},
|
|
4077
4368
|
[onSearch]
|
|
4078
4369
|
);
|
|
4079
|
-
return /* @__PURE__ */
|
|
4080
|
-
onSearch && /* @__PURE__ */
|
|
4081
|
-
/* @__PURE__ */
|
|
4082
|
-
/* @__PURE__ */
|
|
4083
|
-
/* @__PURE__ */
|
|
4370
|
+
return /* @__PURE__ */ jsxs7("div", { className: "hw-content-list", children: [
|
|
4371
|
+
onSearch && /* @__PURE__ */ jsx9("div", { className: "hw-content-search", children: /* @__PURE__ */ jsxs7("div", { className: "hw-content-search-box", children: [
|
|
4372
|
+
/* @__PURE__ */ jsxs7("svg", { className: "hw-content-search-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
4373
|
+
/* @__PURE__ */ jsx9("circle", { cx: "11", cy: "11", r: "8" }),
|
|
4374
|
+
/* @__PURE__ */ jsx9("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
|
|
4084
4375
|
] }),
|
|
4085
|
-
/* @__PURE__ */
|
|
4376
|
+
/* @__PURE__ */ jsx9(
|
|
4086
4377
|
"input",
|
|
4087
4378
|
{
|
|
4088
4379
|
type: "text",
|
|
@@ -4093,18 +4384,18 @@ function ContentListView({
|
|
|
4093
4384
|
}
|
|
4094
4385
|
)
|
|
4095
4386
|
] }) }),
|
|
4096
|
-
isLoading && entries.length === 0 && /* @__PURE__ */
|
|
4097
|
-
/* @__PURE__ */
|
|
4098
|
-
/* @__PURE__ */
|
|
4099
|
-
/* @__PURE__ */
|
|
4387
|
+
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: [
|
|
4388
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "70%", height: 14 } }),
|
|
4389
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "90%", height: 12 } }),
|
|
4390
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "40%", height: 10 } })
|
|
4100
4391
|
] }, i)) }),
|
|
4101
|
-
!isLoading && entries.length === 0 && /* @__PURE__ */
|
|
4102
|
-
/* @__PURE__ */
|
|
4103
|
-
/* @__PURE__ */
|
|
4392
|
+
!isLoading && entries.length === 0 && /* @__PURE__ */ jsxs7("div", { className: "hw-content-empty", children: [
|
|
4393
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-content-empty-title", children: searchText ? t("widget.no_results") : t("widget.nothing_yet") }),
|
|
4394
|
+
/* @__PURE__ */ jsx9("div", { className: "hw-content-empty-desc", children: searchText ? t("widget.try_different") : t("widget.check_back") })
|
|
4104
4395
|
] }),
|
|
4105
|
-
entries.length > 0 && /* @__PURE__ */
|
|
4106
|
-
entries.map((entry) => /* @__PURE__ */
|
|
4107
|
-
hasMore && /* @__PURE__ */
|
|
4396
|
+
entries.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "hw-content-entries", children: [
|
|
4397
|
+
entries.map((entry) => /* @__PURE__ */ jsx9(ContentEntryCard, { entry, onSelect, display }, entry.slug)),
|
|
4398
|
+
hasMore && /* @__PURE__ */ jsx9(
|
|
4108
4399
|
"button",
|
|
4109
4400
|
{
|
|
4110
4401
|
type: "button",
|
|
@@ -4131,16 +4422,16 @@ function ContentEntryCard({
|
|
|
4131
4422
|
const badge = display?.badgeField ? customFields[display.badgeField] ?? null : customFields.version ?? customFields.priority ?? customFields.type ?? null;
|
|
4132
4423
|
const subtitleValue = display?.subtitleField ? (display.subtitleField === "body" ? entry.body : customFields[display.subtitleField]) ?? null : customFields.excerpt ?? customFields.summary ?? customFields.description ?? null;
|
|
4133
4424
|
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__ */
|
|
4425
|
+
return /* @__PURE__ */ jsx9("button", { type: "button", className: "hw-content-entry", onClick: () => onSelect(entry.slug), children: /* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-main", children: [
|
|
4426
|
+
/* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-text", children: [
|
|
4427
|
+
/* @__PURE__ */ jsx9("span", { className: "hw-content-entry-title", children: entry.title }),
|
|
4428
|
+
preview && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-desc", children: preview }),
|
|
4429
|
+
(badge || entry.publishedAt) && /* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-meta", children: [
|
|
4430
|
+
badge && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-badge", children: badge }),
|
|
4431
|
+
entry.publishedAt && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-date", children: formatRelativeTime(entry.publishedAt) })
|
|
4141
4432
|
] })
|
|
4142
4433
|
] }),
|
|
4143
|
-
/* @__PURE__ */
|
|
4434
|
+
/* @__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
4435
|
] }) });
|
|
4145
4436
|
}
|
|
4146
4437
|
|
|
@@ -4357,7 +4648,7 @@ function useGroupedContentTab(tabId) {
|
|
|
4357
4648
|
}
|
|
4358
4649
|
|
|
4359
4650
|
// src/themed/content/grouped-content-tab-view.tsx
|
|
4360
|
-
import { jsx as
|
|
4651
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
4361
4652
|
function GroupedContentTabView({
|
|
4362
4653
|
tab,
|
|
4363
4654
|
subView,
|
|
@@ -4398,10 +4689,10 @@ function GroupedContentTabView({
|
|
|
4398
4689
|
prevSubView.current = subView;
|
|
4399
4690
|
}, [subView, clearCategory]);
|
|
4400
4691
|
if (subView === "content-detail" && detailSlug) {
|
|
4401
|
-
return /* @__PURE__ */
|
|
4692
|
+
return /* @__PURE__ */ jsx10(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
|
|
4402
4693
|
}
|
|
4403
4694
|
if (subView === "content-category" && activeCategory) {
|
|
4404
|
-
return /* @__PURE__ */
|
|
4695
|
+
return /* @__PURE__ */ jsx10(
|
|
4405
4696
|
ContentListView,
|
|
4406
4697
|
{
|
|
4407
4698
|
entries: items,
|
|
@@ -4415,7 +4706,7 @@ function GroupedContentTabView({
|
|
|
4415
4706
|
}
|
|
4416
4707
|
);
|
|
4417
4708
|
}
|
|
4418
|
-
return /* @__PURE__ */
|
|
4709
|
+
return /* @__PURE__ */ jsx10(
|
|
4419
4710
|
ContentListView,
|
|
4420
4711
|
{
|
|
4421
4712
|
entries: categories,
|
|
@@ -4437,7 +4728,7 @@ function GroupedContentTabView({
|
|
|
4437
4728
|
}
|
|
4438
4729
|
|
|
4439
4730
|
// src/themed/content/content-tab-view.tsx
|
|
4440
|
-
import { jsx as
|
|
4731
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
4441
4732
|
function ContentTabView({
|
|
4442
4733
|
tab,
|
|
4443
4734
|
showDetail,
|
|
@@ -4447,7 +4738,7 @@ function ContentTabView({
|
|
|
4447
4738
|
onSelectCategory
|
|
4448
4739
|
}) {
|
|
4449
4740
|
if (tab.tabType === "grouped" && tab.itemsModelSlug) {
|
|
4450
|
-
return /* @__PURE__ */
|
|
4741
|
+
return /* @__PURE__ */ jsx11(
|
|
4451
4742
|
GroupedContentTabView,
|
|
4452
4743
|
{
|
|
4453
4744
|
tab,
|
|
@@ -4459,7 +4750,7 @@ function ContentTabView({
|
|
|
4459
4750
|
}
|
|
4460
4751
|
);
|
|
4461
4752
|
}
|
|
4462
|
-
return /* @__PURE__ */
|
|
4753
|
+
return /* @__PURE__ */ jsx11(
|
|
4463
4754
|
FlatContentTabView,
|
|
4464
4755
|
{
|
|
4465
4756
|
tab,
|
|
@@ -4495,9 +4786,9 @@ function FlatContentTabView({
|
|
|
4495
4786
|
[fetchEntries]
|
|
4496
4787
|
);
|
|
4497
4788
|
if (showDetail && detailSlug) {
|
|
4498
|
-
return /* @__PURE__ */
|
|
4789
|
+
return /* @__PURE__ */ jsx11(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
|
|
4499
4790
|
}
|
|
4500
|
-
return /* @__PURE__ */
|
|
4791
|
+
return /* @__PURE__ */ jsx11(
|
|
4501
4792
|
ContentListView,
|
|
4502
4793
|
{
|
|
4503
4794
|
entries,
|
|
@@ -4513,7 +4804,7 @@ function FlatContentTabView({
|
|
|
4513
4804
|
}
|
|
4514
4805
|
|
|
4515
4806
|
// src/themed/content/tab-icon.tsx
|
|
4516
|
-
import { jsx as
|
|
4807
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
4517
4808
|
var ICON_MAP = {
|
|
4518
4809
|
book: BookIcon,
|
|
4519
4810
|
megaphone: MegaphoneIcon,
|
|
@@ -4524,12 +4815,12 @@ var ICON_MAP = {
|
|
|
4524
4815
|
};
|
|
4525
4816
|
function ContentTabIconComponent({ icon }) {
|
|
4526
4817
|
const Icon = ICON_MAP[icon] ?? BookIcon;
|
|
4527
|
-
return /* @__PURE__ */
|
|
4818
|
+
return /* @__PURE__ */ jsx12(Icon, {});
|
|
4528
4819
|
}
|
|
4529
4820
|
|
|
4530
4821
|
// src/themed/debug-overlay.tsx
|
|
4531
4822
|
import { useEffect as useEffect12, useMemo as useMemo2, useRef as useRef14, useState as useState13 } from "react";
|
|
4532
|
-
import { jsx as
|
|
4823
|
+
import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4533
4824
|
var MAX_EVENTS = 60;
|
|
4534
4825
|
function isDebugEnabled() {
|
|
4535
4826
|
if (typeof window === "undefined") return false;
|
|
@@ -4635,10 +4926,10 @@ function WidgetDebugOverlay() {
|
|
|
4635
4926
|
if (!enabled) return null;
|
|
4636
4927
|
const isTyping = activeId ? typingUsers.get(activeId) : false;
|
|
4637
4928
|
const isAi = activeId ? aiProcessingMap.get(activeId) : false;
|
|
4638
|
-
return /* @__PURE__ */
|
|
4639
|
-
/* @__PURE__ */
|
|
4640
|
-
/* @__PURE__ */
|
|
4641
|
-
/* @__PURE__ */
|
|
4929
|
+
return /* @__PURE__ */ jsxs8("div", { style: styles.wrap, children: [
|
|
4930
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.header, children: [
|
|
4931
|
+
/* @__PURE__ */ jsx13("strong", { children: "hw debug" }),
|
|
4932
|
+
/* @__PURE__ */ jsxs8("span", { style: styles.meta, children: [
|
|
4642
4933
|
" ",
|
|
4643
4934
|
"\xB7 conv ",
|
|
4644
4935
|
activeId ? activeId.slice(0, 10) : "\u2014",
|
|
@@ -4649,29 +4940,29 @@ function WidgetDebugOverlay() {
|
|
|
4649
4940
|
" \xB7 ai ",
|
|
4650
4941
|
isAi ? "Y" : "n"
|
|
4651
4942
|
] }),
|
|
4652
|
-
/* @__PURE__ */
|
|
4653
|
-
/* @__PURE__ */
|
|
4943
|
+
/* @__PURE__ */ jsx13("button", { type: "button", style: styles.btn, onClick: () => setOpen((v) => !v), children: open ? "hide" : "show" }),
|
|
4944
|
+
/* @__PURE__ */ jsx13("button", { type: "button", style: styles.btn, onClick: () => {
|
|
4654
4945
|
eventsRef.current = [];
|
|
4655
4946
|
setEvents([]);
|
|
4656
4947
|
}, children: "clear" })
|
|
4657
4948
|
] }),
|
|
4658
|
-
open && /* @__PURE__ */
|
|
4659
|
-
/* @__PURE__ */
|
|
4660
|
-
/* @__PURE__ */
|
|
4661
|
-
activeMessages.length === 0 ? /* @__PURE__ */
|
|
4662
|
-
/* @__PURE__ */
|
|
4663
|
-
/* @__PURE__ */
|
|
4664
|
-
/* @__PURE__ */
|
|
4665
|
-
/* @__PURE__ */
|
|
4949
|
+
open && /* @__PURE__ */ jsxs8("div", { style: styles.body, children: [
|
|
4950
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.section, children: [
|
|
4951
|
+
/* @__PURE__ */ jsx13("div", { style: styles.sectionTitle, children: "messages (active)" }),
|
|
4952
|
+
activeMessages.length === 0 ? /* @__PURE__ */ jsx13("div", { style: styles.empty, children: "empty" }) : activeMessages.map((m, i) => /* @__PURE__ */ jsxs8("div", { style: styles.row, children: [
|
|
4953
|
+
/* @__PURE__ */ jsx13("span", { style: { ...styles.badge, background: colorFor(senderOf(m)) }, children: i }),
|
|
4954
|
+
/* @__PURE__ */ jsx13("span", { style: styles.sender, children: senderOf(m) }),
|
|
4955
|
+
/* @__PURE__ */ jsx13("span", { style: styles.ts, children: m.createdAt.slice(11, 23) }),
|
|
4956
|
+
/* @__PURE__ */ jsx13("span", { style: styles.text, children: (m.text ?? "").slice(0, 60) })
|
|
4666
4957
|
] }, m.id))
|
|
4667
4958
|
] }),
|
|
4668
|
-
/* @__PURE__ */
|
|
4669
|
-
/* @__PURE__ */
|
|
4670
|
-
events.length === 0 ? /* @__PURE__ */
|
|
4671
|
-
/* @__PURE__ */
|
|
4672
|
-
/* @__PURE__ */
|
|
4673
|
-
/* @__PURE__ */
|
|
4674
|
-
e.detail && /* @__PURE__ */
|
|
4959
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.section, children: [
|
|
4960
|
+
/* @__PURE__ */ jsx13("div", { style: styles.sectionTitle, children: "events" }),
|
|
4961
|
+
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: [
|
|
4962
|
+
/* @__PURE__ */ jsx13("span", { style: { ...styles.badge, background: kindColor(e.kind) }, children: e.kind }),
|
|
4963
|
+
/* @__PURE__ */ jsx13("span", { style: styles.ts, children: new Date(e.t).toISOString().slice(11, 23) }),
|
|
4964
|
+
/* @__PURE__ */ jsx13("span", { style: styles.evLabel, children: e.label }),
|
|
4965
|
+
e.detail && /* @__PURE__ */ jsx13("span", { style: styles.detail, children: e.detail })
|
|
4675
4966
|
] }, e.id))
|
|
4676
4967
|
] })
|
|
4677
4968
|
] })
|
|
@@ -4774,9 +5065,9 @@ var styles = {
|
|
|
4774
5065
|
};
|
|
4775
5066
|
|
|
4776
5067
|
// src/themed/icons-local.tsx
|
|
4777
|
-
import { jsx as
|
|
5068
|
+
import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4778
5069
|
function DotsIcon({ size = 24, ...props }) {
|
|
4779
|
-
return /* @__PURE__ */
|
|
5070
|
+
return /* @__PURE__ */ jsxs9(
|
|
4780
5071
|
"svg",
|
|
4781
5072
|
{
|
|
4782
5073
|
width: size,
|
|
@@ -4787,9 +5078,9 @@ function DotsIcon({ size = 24, ...props }) {
|
|
|
4787
5078
|
"aria-hidden": "true",
|
|
4788
5079
|
...props,
|
|
4789
5080
|
children: [
|
|
4790
|
-
/* @__PURE__ */
|
|
4791
|
-
/* @__PURE__ */
|
|
4792
|
-
/* @__PURE__ */
|
|
5081
|
+
/* @__PURE__ */ jsx14("circle", { cx: "5", cy: "12", r: "1.7", fill: "currentColor" }),
|
|
5082
|
+
/* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "1.7", fill: "currentColor" }),
|
|
5083
|
+
/* @__PURE__ */ jsx14("circle", { cx: "19", cy: "12", r: "1.7", fill: "currentColor" })
|
|
4793
5084
|
]
|
|
4794
5085
|
}
|
|
4795
5086
|
);
|
|
@@ -4797,8 +5088,379 @@ function DotsIcon({ size = 24, ...props }) {
|
|
|
4797
5088
|
|
|
4798
5089
|
// src/themed/message-bubble.tsx
|
|
4799
5090
|
import { useEffect as useEffect13, useLayoutEffect, useRef as useRef15, useState as useState14 } from "react";
|
|
5091
|
+
|
|
5092
|
+
// src/themed/image-fallback.ts
|
|
5093
|
+
function imageFileName(url) {
|
|
5094
|
+
try {
|
|
5095
|
+
const { pathname, host } = new URL(url);
|
|
5096
|
+
const last = pathname.split("/").filter(Boolean).pop();
|
|
5097
|
+
if (!last) return host;
|
|
5098
|
+
try {
|
|
5099
|
+
return decodeURIComponent(last);
|
|
5100
|
+
} catch {
|
|
5101
|
+
return last;
|
|
5102
|
+
}
|
|
5103
|
+
} catch {
|
|
5104
|
+
return url.split(/[?#]/)[0]?.split("/").filter(Boolean).pop() ?? url;
|
|
5105
|
+
}
|
|
5106
|
+
}
|
|
5107
|
+
function fileExt(name) {
|
|
5108
|
+
const dot = name.lastIndexOf(".");
|
|
5109
|
+
return dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
|
|
5110
|
+
}
|
|
5111
|
+
|
|
5112
|
+
// ../types/src/link-preview.ts
|
|
5113
|
+
var FILE_ENDINGS = /* @__PURE__ */ new Set([
|
|
5114
|
+
"js",
|
|
5115
|
+
"jsx",
|
|
5116
|
+
"ts",
|
|
5117
|
+
"tsx",
|
|
5118
|
+
"mjs",
|
|
5119
|
+
"cjs",
|
|
5120
|
+
"css",
|
|
5121
|
+
"scss",
|
|
5122
|
+
"html",
|
|
5123
|
+
"htm",
|
|
5124
|
+
"json",
|
|
5125
|
+
"yaml",
|
|
5126
|
+
"yml",
|
|
5127
|
+
"toml",
|
|
5128
|
+
"xml",
|
|
5129
|
+
"txt",
|
|
5130
|
+
"log",
|
|
5131
|
+
"csv",
|
|
5132
|
+
"pdf",
|
|
5133
|
+
"png",
|
|
5134
|
+
"jpg",
|
|
5135
|
+
"jpeg",
|
|
5136
|
+
"gif",
|
|
5137
|
+
"svg",
|
|
5138
|
+
"webp",
|
|
5139
|
+
"php",
|
|
5140
|
+
"rb",
|
|
5141
|
+
"cpp",
|
|
5142
|
+
"exe",
|
|
5143
|
+
"lock",
|
|
5144
|
+
"map",
|
|
5145
|
+
"env",
|
|
5146
|
+
"md",
|
|
5147
|
+
"gz",
|
|
5148
|
+
"tar"
|
|
5149
|
+
]);
|
|
5150
|
+
var FILE_MIDDLES = /* @__PURE__ */ new Set([
|
|
5151
|
+
"config",
|
|
5152
|
+
"spec",
|
|
5153
|
+
"test",
|
|
5154
|
+
"min",
|
|
5155
|
+
"d",
|
|
5156
|
+
"module",
|
|
5157
|
+
"stories",
|
|
5158
|
+
"setup",
|
|
5159
|
+
"types",
|
|
5160
|
+
"bundle",
|
|
5161
|
+
"schema"
|
|
5162
|
+
]);
|
|
5163
|
+
var KNOWN_NAMES = /* @__PURE__ */ new Set(["asp.net", "ado.net", "vb.net"]);
|
|
5164
|
+
var DOT_LETTERS = /* @__PURE__ */ new Set(["\uA4F8", "\uA78F"]);
|
|
5165
|
+
var make = (source, flags) => new RegExp(source, flags);
|
|
5166
|
+
var one = (set) => make(`^[${set}]$`, "u");
|
|
5167
|
+
var engine;
|
|
5168
|
+
function patterns() {
|
|
5169
|
+
if (engine !== void 0) return engine;
|
|
5170
|
+
try {
|
|
5171
|
+
const lgc = "\\p{sc=Latn}\\p{sc=Grek}\\p{sc=Cyrl}\\p{sc=Zyyy}";
|
|
5172
|
+
engine = {
|
|
5173
|
+
/* Controls, line separators and the bidi controls: a space, not
|
|
5174
|
+
nothing, because they separated something. */
|
|
5175
|
+
control: make("[\\p{Cc}\\p{Zl}\\p{Zp}\\u202a-\\u202e\\u2066-\\u2069]", "gu"),
|
|
5176
|
+
invisible: make("[\\p{Cf}\\p{Me}\\p{Default_Ignorable_Code_Point}]", "gu"),
|
|
5177
|
+
looseMark: make(`(^|[${lgc}])\\p{Mn}+`, "gu"),
|
|
5178
|
+
anyMark: make("\\p{M}", "gu"),
|
|
5179
|
+
letter: one("\\p{L}"),
|
|
5180
|
+
modifier: one("\\p{Lm}"),
|
|
5181
|
+
digit: one("\\p{Nd}"),
|
|
5182
|
+
number: one("\\p{N}"),
|
|
5183
|
+
punctOrSymbol: one("\\p{P}\\p{S}"),
|
|
5184
|
+
/* Dashes and quotation marks are not drawn as a dot. */
|
|
5185
|
+
notAJoiner: one("\\p{Pd}\\p{Pi}\\p{Pf}"),
|
|
5186
|
+
latin: one("\\p{sc=Latn}"),
|
|
5187
|
+
greek: one("\\p{sc=Grek}"),
|
|
5188
|
+
cyrillic: one("\\p{sc=Cyrl}"),
|
|
5189
|
+
noSpace: one(
|
|
5190
|
+
"\\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}"
|
|
5191
|
+
),
|
|
5192
|
+
common: one("\\p{sc=Zyyy}\\p{sc=Zinh}"),
|
|
5193
|
+
tld: make("^\\p{L}{2,}$", "u"),
|
|
5194
|
+
ipv6Bracket: make("\\[[0-9a-f:.]*:[0-9a-f:.]*\\]", "g"),
|
|
5195
|
+
ipv6Bare: make("(^|[^\\p{L}\\p{N}:.])([0-9a-f:]{3,})(?![\\p{L}\\p{N}:.])", "gu")
|
|
5196
|
+
};
|
|
5197
|
+
} catch {
|
|
5198
|
+
engine = null;
|
|
5199
|
+
}
|
|
5200
|
+
return engine;
|
|
5201
|
+
}
|
|
5202
|
+
function foldPreviewText(value) {
|
|
5203
|
+
const rx = patterns();
|
|
5204
|
+
if (!rx) throw new Error("link-preview: no Unicode property support");
|
|
5205
|
+
return value.normalize("NFKC").replace(rx.control, " ").replace(rx.invisible, "").replace(rx.looseMark, "$1").replace(/\s+/g, " ").trim();
|
|
5206
|
+
}
|
|
5207
|
+
function cleanPreviewText(value, cap) {
|
|
5208
|
+
if (typeof value !== "string") return null;
|
|
5209
|
+
let text;
|
|
5210
|
+
try {
|
|
5211
|
+
text = foldPreviewText(value);
|
|
5212
|
+
} catch {
|
|
5213
|
+
return null;
|
|
5214
|
+
}
|
|
5215
|
+
if (!text) return null;
|
|
5216
|
+
return text.length > cap ? `${text.slice(0, cap - 1).trimEnd()}\u2026` : text;
|
|
5217
|
+
}
|
|
5218
|
+
var BREAK = { kind: "break", script: "common" };
|
|
5219
|
+
var seen = /* @__PURE__ */ new Map();
|
|
5220
|
+
function scriptOf(ch, rx) {
|
|
5221
|
+
if (rx.latin.test(ch)) return "latin";
|
|
5222
|
+
if (rx.noSpace.test(ch)) return "nospace";
|
|
5223
|
+
if (rx.cyrillic.test(ch)) return "cyrillic";
|
|
5224
|
+
if (rx.greek.test(ch)) return "greek";
|
|
5225
|
+
if (rx.common.test(ch)) return "common";
|
|
5226
|
+
return "other";
|
|
5227
|
+
}
|
|
5228
|
+
function read(ch, rx) {
|
|
5229
|
+
const code = ch.codePointAt(0) ?? 0;
|
|
5230
|
+
if (code < 128) {
|
|
5231
|
+
if (ch === ".") return { kind: "dot", script: "common" };
|
|
5232
|
+
if (ch === "-" || code >= 48 && code <= 57) return { kind: "word", script: "common" };
|
|
5233
|
+
if (code >= 97 && code <= 122) return { kind: "word", script: "latin" };
|
|
5234
|
+
return BREAK;
|
|
5235
|
+
}
|
|
5236
|
+
const known = seen.get(ch);
|
|
5237
|
+
if (known) return known;
|
|
5238
|
+
let out = BREAK;
|
|
5239
|
+
if (DOT_LETTERS.has(ch) || rx.modifier.test(ch)) out = { kind: "join", script: "common" };
|
|
5240
|
+
else if (rx.letter.test(ch)) out = { kind: "word", script: scriptOf(ch, rx) };
|
|
5241
|
+
else if (rx.digit.test(ch)) out = { kind: "join", script: "common" };
|
|
5242
|
+
else if (rx.number.test(ch)) out = { kind: "word", script: "common" };
|
|
5243
|
+
else if (rx.notAJoiner.test(ch)) out = BREAK;
|
|
5244
|
+
else if (rx.punctOrSymbol.test(ch)) out = { kind: "join", script: "common" };
|
|
5245
|
+
if (seen.size < 4096) seen.set(ch, out);
|
|
5246
|
+
return out;
|
|
5247
|
+
}
|
|
5248
|
+
function shapeOf(checked, rx) {
|
|
5249
|
+
const tokens = [];
|
|
5250
|
+
let mixed = false;
|
|
5251
|
+
let run = "";
|
|
5252
|
+
let letters = 0;
|
|
5253
|
+
let noSpaceLetters = 0;
|
|
5254
|
+
let piece = /* @__PURE__ */ new Set();
|
|
5255
|
+
const endPiece = () => {
|
|
5256
|
+
piece.delete("nospace");
|
|
5257
|
+
piece.delete("common");
|
|
5258
|
+
if (piece.size > 1) mixed = true;
|
|
5259
|
+
piece = /* @__PURE__ */ new Set();
|
|
5260
|
+
};
|
|
5261
|
+
const endRun = () => {
|
|
5262
|
+
if (!run) return;
|
|
5263
|
+
endPiece();
|
|
5264
|
+
if (/[^-]/.test(run)) {
|
|
5265
|
+
tokens.push({
|
|
5266
|
+
kind: "word",
|
|
5267
|
+
text: run,
|
|
5268
|
+
noSpace: letters > 0 && noSpaceLetters === letters,
|
|
5269
|
+
hasLetter: letters > 0
|
|
5270
|
+
});
|
|
5271
|
+
} else {
|
|
5272
|
+
tokens.push({ kind: "break", text: run, noSpace: false, hasLetter: false });
|
|
5273
|
+
}
|
|
5274
|
+
run = "";
|
|
5275
|
+
letters = 0;
|
|
5276
|
+
noSpaceLetters = 0;
|
|
5277
|
+
};
|
|
5278
|
+
for (const ch of checked) {
|
|
5279
|
+
const c = read(ch, rx);
|
|
5280
|
+
if (c.kind === "word") {
|
|
5281
|
+
run += ch;
|
|
5282
|
+
if (ch === "-") endPiece();
|
|
5283
|
+
else if (c.script !== "common") {
|
|
5284
|
+
letters++;
|
|
5285
|
+
if (c.script === "nospace") noSpaceLetters++;
|
|
5286
|
+
piece.add(c.script);
|
|
5287
|
+
}
|
|
5288
|
+
continue;
|
|
5289
|
+
}
|
|
5290
|
+
endRun();
|
|
5291
|
+
tokens.push({ kind: c.kind, text: ch, noSpace: false, hasLetter: false });
|
|
5292
|
+
}
|
|
5293
|
+
endRun();
|
|
5294
|
+
return { tokens, mixed };
|
|
5295
|
+
}
|
|
5296
|
+
function hostOf(labels, rx, asAddress) {
|
|
5297
|
+
const n = labels.length;
|
|
5298
|
+
if (n === 4 && labels.every((l) => /^\d{1,3}$/.test(l))) return labels.join(".");
|
|
5299
|
+
let end = n;
|
|
5300
|
+
if (!asAddress) {
|
|
5301
|
+
let file = false;
|
|
5302
|
+
while (end > 1 && FILE_ENDINGS.has(labels[end - 1] ?? "")) {
|
|
5303
|
+
end--;
|
|
5304
|
+
file = true;
|
|
5305
|
+
}
|
|
5306
|
+
while (file && end > 1 && FILE_MIDDLES.has(labels[end - 1] ?? "")) end--;
|
|
5307
|
+
}
|
|
5308
|
+
for (let i = end - 1; i >= 1; i--) {
|
|
5309
|
+
const ending = (labels[i] ?? "").split("-", 1)[0] ?? "";
|
|
5310
|
+
if (!rx.tld.test(ending)) continue;
|
|
5311
|
+
const host = [...labels.slice(0, i), ending].join(".");
|
|
5312
|
+
return KNOWN_NAMES.has(host) ? null : host;
|
|
5313
|
+
}
|
|
5314
|
+
return null;
|
|
5315
|
+
}
|
|
5316
|
+
function hostsNamedIn(text) {
|
|
5317
|
+
const rx = patterns();
|
|
5318
|
+
if (!rx) return [""];
|
|
5319
|
+
const checked = foldPreviewText(text).replace(rx.anyMark, "").toLowerCase();
|
|
5320
|
+
const out = /* @__PURE__ */ new Set();
|
|
5321
|
+
const { tokens, mixed } = shapeOf(checked, rx);
|
|
5322
|
+
if (mixed) out.add("");
|
|
5323
|
+
for (let i = 0; i < tokens.length; i++) {
|
|
5324
|
+
const first = tokens[i];
|
|
5325
|
+
if (!first || first.kind !== "word") continue;
|
|
5326
|
+
const labels = [first.text];
|
|
5327
|
+
let anyLetter = first.hasLetter;
|
|
5328
|
+
let j = i;
|
|
5329
|
+
for (; ; ) {
|
|
5330
|
+
const sep = tokens[j + 1];
|
|
5331
|
+
const next = tokens[j + 2];
|
|
5332
|
+
const here = tokens[j];
|
|
5333
|
+
if (!sep || !next || !here || next.kind !== "word") break;
|
|
5334
|
+
if (sep.kind === "break") break;
|
|
5335
|
+
if (sep.kind === "join" && here.noSpace && next.noSpace) break;
|
|
5336
|
+
labels.push(next.text);
|
|
5337
|
+
anyLetter ||= next.hasLetter;
|
|
5338
|
+
j += 2;
|
|
5339
|
+
}
|
|
5340
|
+
const before = tokens[i - 1]?.text;
|
|
5341
|
+
const host = labels.length > 1 ? hostOf(labels, rx, before === "@") : null;
|
|
5342
|
+
if (host) out.add(host);
|
|
5343
|
+
const colon = tokens[j + 1];
|
|
5344
|
+
const port = tokens[j + 2];
|
|
5345
|
+
if (!host && anyLetter && colon?.text === ":" && port && /^\d{1,5}$/.test(port.text)) {
|
|
5346
|
+
out.add(labels.join("."));
|
|
5347
|
+
}
|
|
5348
|
+
i = j;
|
|
5349
|
+
}
|
|
5350
|
+
for (let at = checked.indexOf("://"); at !== -1; at = checked.indexOf("://", at + 3)) {
|
|
5351
|
+
const rest = checked.slice(at + 3, at + 3 + 300);
|
|
5352
|
+
const authority = (rest.split(/[\s/?#]/, 1)[0] ?? "").split("@").pop() ?? "";
|
|
5353
|
+
const literal = /^\[[^\]]*\]/.exec(authority)?.[0];
|
|
5354
|
+
out.add(literal ?? authority.replace(/:\d*$/, ""));
|
|
5355
|
+
}
|
|
5356
|
+
for (const m of checked.matchAll(rx.ipv6Bracket)) out.add(m[0]);
|
|
5357
|
+
for (const m of checked.matchAll(rx.ipv6Bare)) {
|
|
5358
|
+
const literal = m[2] ?? "";
|
|
5359
|
+
const colons = literal.split(":").length - 1;
|
|
5360
|
+
if (/[0-9a-f]/.test(literal) && (literal.includes("::") || colons === 7)) out.add(literal);
|
|
5361
|
+
}
|
|
5362
|
+
return [...out];
|
|
5363
|
+
}
|
|
5364
|
+
function bare(host) {
|
|
5365
|
+
const h = host.toLowerCase();
|
|
5366
|
+
const bracketed = /^\[(.*)\](?::\d+)?$/.exec(h);
|
|
5367
|
+
if (bracketed) return bracketed[1] ?? "";
|
|
5368
|
+
if (h.split(":").length > 2) return h;
|
|
5369
|
+
return h.replace(/:\d+$/, "").replace(/\.$/, "").replace(/^www\./, "");
|
|
5370
|
+
}
|
|
5371
|
+
function sameSite(a, b) {
|
|
5372
|
+
const x = bare(a);
|
|
5373
|
+
const y = bare(b);
|
|
5374
|
+
if (!x || !y) return false;
|
|
5375
|
+
return x === y || x.endsWith(`.${y}`) || y.endsWith(`.${x}`);
|
|
5376
|
+
}
|
|
5377
|
+
function ascii(named) {
|
|
5378
|
+
if (/^[\x00-\x7f]*$/.test(named)) return named;
|
|
5379
|
+
try {
|
|
5380
|
+
return new URL(`https://${named}`).hostname;
|
|
5381
|
+
} catch {
|
|
5382
|
+
return null;
|
|
5383
|
+
}
|
|
5384
|
+
}
|
|
5385
|
+
function namesAnotherSite(text, realHost) {
|
|
5386
|
+
let named;
|
|
5387
|
+
try {
|
|
5388
|
+
named = hostsNamedIn(text);
|
|
5389
|
+
} catch {
|
|
5390
|
+
return true;
|
|
5391
|
+
}
|
|
5392
|
+
for (const host of named) {
|
|
5393
|
+
const form = host === "" ? null : ascii(host);
|
|
5394
|
+
if (form === null || !sameSite(form, realHost)) return true;
|
|
5395
|
+
}
|
|
5396
|
+
return false;
|
|
5397
|
+
}
|
|
5398
|
+
var PREVIEW_HOST_CAP = 40;
|
|
5399
|
+
function previewHost(url) {
|
|
5400
|
+
const host = url.host.replace(/^www\./, "");
|
|
5401
|
+
return host.length > PREVIEW_HOST_CAP ? `\u2026${host.slice(host.length - (PREVIEW_HOST_CAP - 1))}` : host;
|
|
5402
|
+
}
|
|
5403
|
+
function previewWords(url, raw, caps = { title: 160, description: 280 }) {
|
|
5404
|
+
const keep = (value, cap) => {
|
|
5405
|
+
if (typeof value !== "string" || namesAnotherSite(value, url.hostname)) return null;
|
|
5406
|
+
return cleanPreviewText(value, cap);
|
|
5407
|
+
};
|
|
5408
|
+
return {
|
|
5409
|
+
title: keep(raw.title, caps.title),
|
|
5410
|
+
description: keep(raw.description, caps.description)
|
|
5411
|
+
};
|
|
5412
|
+
}
|
|
5413
|
+
var PREVIEW_ICON_MAX_BYTES = 32 * 1024;
|
|
5414
|
+
|
|
5415
|
+
// src/themed/link-preview.ts
|
|
5416
|
+
function httpsOnly(value) {
|
|
5417
|
+
if (!value) return null;
|
|
5418
|
+
try {
|
|
5419
|
+
const url = new URL(value);
|
|
5420
|
+
return url.protocol === "https:" && !url.username && !url.password ? url.href : null;
|
|
5421
|
+
} catch {
|
|
5422
|
+
return null;
|
|
5423
|
+
}
|
|
5424
|
+
}
|
|
5425
|
+
function pictureOnly(image, title) {
|
|
5426
|
+
if (!image || !title) return image;
|
|
5427
|
+
let asked;
|
|
5428
|
+
try {
|
|
5429
|
+
asked = new URL(image).searchParams.get("title");
|
|
5430
|
+
} catch {
|
|
5431
|
+
return image;
|
|
5432
|
+
}
|
|
5433
|
+
if (!asked) return image;
|
|
5434
|
+
const fold = (v) => v.toLowerCase().replace(/\s+/g, " ").trim();
|
|
5435
|
+
const a = fold(asked);
|
|
5436
|
+
const t2 = fold(title);
|
|
5437
|
+
return a.length >= 4 && (t2.includes(a) || a.includes(t2)) ? null : image;
|
|
5438
|
+
}
|
|
5439
|
+
function linkPreviewView(preview) {
|
|
5440
|
+
let url;
|
|
5441
|
+
try {
|
|
5442
|
+
url = new URL(preview.url);
|
|
5443
|
+
} catch {
|
|
5444
|
+
return null;
|
|
5445
|
+
}
|
|
5446
|
+
if (url.protocol !== "http:" && url.protocol !== "https:" || url.username || url.password) {
|
|
5447
|
+
return null;
|
|
5448
|
+
}
|
|
5449
|
+
const { title, description } = previewWords(url, preview);
|
|
5450
|
+
if (!title && !description) return null;
|
|
5451
|
+
return {
|
|
5452
|
+
href: url.href,
|
|
5453
|
+
host: previewHost(url),
|
|
5454
|
+
title,
|
|
5455
|
+
description,
|
|
5456
|
+
image: pictureOnly(httpsOnly(preview.imageUrl), title),
|
|
5457
|
+
favicon: httpsOnly(preview.favicon)
|
|
5458
|
+
};
|
|
5459
|
+
}
|
|
5460
|
+
|
|
5461
|
+
// src/themed/message-bubble.tsx
|
|
4800
5462
|
import { createPortal } from "react-dom";
|
|
4801
|
-
import { Fragment as Fragment3, jsx as
|
|
5463
|
+
import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
4802
5464
|
function MessageBubble({
|
|
4803
5465
|
text,
|
|
4804
5466
|
sender,
|
|
@@ -4832,23 +5494,23 @@ function MessageBubble({
|
|
|
4832
5494
|
bubble.removeEventListener("click", handleClick);
|
|
4833
5495
|
};
|
|
4834
5496
|
}, [sender]);
|
|
4835
|
-
return /* @__PURE__ */
|
|
4836
|
-
imageParts.length > 0 && /* @__PURE__ */
|
|
4837
|
-
hasText && /* @__PURE__ */
|
|
4838
|
-
sender === "ai" || sender === "team" ? /* @__PURE__ */
|
|
5497
|
+
return /* @__PURE__ */ jsx15("div", { className: `hw-msg ${senderClass}`, children: /* @__PURE__ */ jsxs10("div", { className: "hw-msg-body", children: [
|
|
5498
|
+
imageParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-images", children: imageParts.map((img, i) => /* @__PURE__ */ jsx15(PreviewableThumbnail, { src: img.url }, i)) }),
|
|
5499
|
+
hasText && /* @__PURE__ */ jsxs10("div", { className: "hw-msg-bubble", ref: bubbleRef, children: [
|
|
5500
|
+
sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx15(
|
|
4839
5501
|
"span",
|
|
4840
5502
|
{
|
|
4841
5503
|
dangerouslySetInnerHTML: {
|
|
4842
5504
|
__html: renderMarkdown(streaming ? closeDanglingMarkdown(text) : text)
|
|
4843
5505
|
}
|
|
4844
5506
|
}
|
|
4845
|
-
) : /* @__PURE__ */
|
|
4846
|
-
streaming && /* @__PURE__ */
|
|
5507
|
+
) : /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } }),
|
|
5508
|
+
streaming && /* @__PURE__ */ jsx15("span", { className: "hw-streaming-cursor" })
|
|
4847
5509
|
] }),
|
|
4848
|
-
fileParts.length > 0 && /* @__PURE__ */
|
|
4849
|
-
linkPreviews.length > 0 && /* @__PURE__ */
|
|
4850
|
-
sources.length > 0 && /* @__PURE__ */
|
|
4851
|
-
(src, i) => src.sourceUrl ? /* @__PURE__ */
|
|
5510
|
+
fileParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-files", children: fileParts.map((file, i) => /* @__PURE__ */ jsx15(FileCard, { file }, i)) }),
|
|
5511
|
+
linkPreviews.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-links", children: linkPreviews.map((lp, i) => /* @__PURE__ */ jsx15(LinkPreviewCard, { preview: lp }, i)) }),
|
|
5512
|
+
sources.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-sources", children: sources.map(
|
|
5513
|
+
(src, i) => src.sourceUrl ? /* @__PURE__ */ jsxs10(
|
|
4852
5514
|
"a",
|
|
4853
5515
|
{
|
|
4854
5516
|
href: src.sourceUrl,
|
|
@@ -4857,26 +5519,26 @@ function MessageBubble({
|
|
|
4857
5519
|
className: "hw-source",
|
|
4858
5520
|
onClick: (e) => e.stopPropagation(),
|
|
4859
5521
|
children: [
|
|
4860
|
-
/* @__PURE__ */
|
|
4861
|
-
/* @__PURE__ */
|
|
5522
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-source-n", children: i + 1 }),
|
|
5523
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-source-title", children: src.title })
|
|
4862
5524
|
]
|
|
4863
5525
|
},
|
|
4864
5526
|
src.knowledgeId
|
|
4865
|
-
) : /* @__PURE__ */
|
|
4866
|
-
/* @__PURE__ */
|
|
4867
|
-
/* @__PURE__ */
|
|
5527
|
+
) : /* @__PURE__ */ jsxs10("div", { className: "hw-source", children: [
|
|
5528
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-source-n", children: i + 1 }),
|
|
5529
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-source-title", children: src.title })
|
|
4868
5530
|
] }, src.knowledgeId)
|
|
4869
5531
|
) }),
|
|
4870
|
-
metadata?.kind === "quick_replies" && /* @__PURE__ */
|
|
5532
|
+
metadata?.kind === "quick_replies" && /* @__PURE__ */ jsx15(QuickReplyButtons, { metadata, onTap: onQuickReplyTap }),
|
|
4871
5533
|
(() => {
|
|
4872
5534
|
const isVisitor = sender === "visitor";
|
|
4873
5535
|
const lead = isVisitor ? null : senderName ?? null;
|
|
4874
5536
|
const withLead = (showAuthor ?? !!timestamp) && !!lead;
|
|
4875
5537
|
if (!withLead && !timestamp) return null;
|
|
4876
|
-
return /* @__PURE__ */
|
|
4877
|
-
withLead && /* @__PURE__ */
|
|
4878
|
-
withLead && timestamp && /* @__PURE__ */
|
|
4879
|
-
timestamp && /* @__PURE__ */
|
|
5538
|
+
return /* @__PURE__ */ jsxs10("div", { className: "hw-msg-meta", children: [
|
|
5539
|
+
withLead && /* @__PURE__ */ jsx15("span", { className: "hw-msg-author", children: lead }),
|
|
5540
|
+
withLead && timestamp && /* @__PURE__ */ jsx15("span", { className: "hw-msg-meta-sep", children: "\xB7" }),
|
|
5541
|
+
timestamp && /* @__PURE__ */ jsx15("span", { className: "hw-msg-time", children: timestamp })
|
|
4880
5542
|
] });
|
|
4881
5543
|
})()
|
|
4882
5544
|
] }) });
|
|
@@ -4892,14 +5554,14 @@ function QuickReplyButtons({
|
|
|
4892
5554
|
setTappedId(optionId);
|
|
4893
5555
|
onTap?.(optionId, metadata.stepId);
|
|
4894
5556
|
};
|
|
4895
|
-
return /* @__PURE__ */
|
|
5557
|
+
return /* @__PURE__ */ jsx15(
|
|
4896
5558
|
"div",
|
|
4897
5559
|
{
|
|
4898
5560
|
className: "hw-quick-replies",
|
|
4899
5561
|
"data-cancelled": metadata.cancelled ? "true" : void 0,
|
|
4900
5562
|
children: metadata.options.map((opt) => {
|
|
4901
5563
|
const isTapped = tappedId === opt.id;
|
|
4902
|
-
return /* @__PURE__ */
|
|
5564
|
+
return /* @__PURE__ */ jsx15(
|
|
4903
5565
|
"button",
|
|
4904
5566
|
{
|
|
4905
5567
|
type: "button",
|
|
@@ -4917,9 +5579,17 @@ function QuickReplyButtons({
|
|
|
4917
5579
|
}
|
|
4918
5580
|
function PreviewableThumbnail({ src }) {
|
|
4919
5581
|
const [hover, setHover] = useState14(false);
|
|
5582
|
+
const [broken, setBroken] = useState14(false);
|
|
4920
5583
|
const ref = useRef15(null);
|
|
4921
|
-
|
|
4922
|
-
|
|
5584
|
+
if (broken) {
|
|
5585
|
+
const name = imageFileName(src);
|
|
5586
|
+
return /* @__PURE__ */ jsxs10("a", { href: src, target: "_blank", rel: "noopener noreferrer", className: "hw-msg-file", children: [
|
|
5587
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext: fileExt(name) }) }),
|
|
5588
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-info", children: /* @__PURE__ */ jsx15("span", { className: "hw-msg-file-name", children: name }) })
|
|
5589
|
+
] });
|
|
5590
|
+
}
|
|
5591
|
+
return /* @__PURE__ */ jsxs10(Fragment3, { children: [
|
|
5592
|
+
/* @__PURE__ */ jsx15(
|
|
4923
5593
|
"a",
|
|
4924
5594
|
{
|
|
4925
5595
|
ref,
|
|
@@ -4930,10 +5600,10 @@ function PreviewableThumbnail({ src }) {
|
|
|
4930
5600
|
"aria-label": t("widget.aria_open_image"),
|
|
4931
5601
|
onMouseEnter: () => setHover(true),
|
|
4932
5602
|
onMouseLeave: () => setHover(false),
|
|
4933
|
-
children: /* @__PURE__ */
|
|
5603
|
+
children: /* @__PURE__ */ jsx15("img", { src, alt: "", className: "hw-msg-image", loading: "lazy", onError: () => setBroken(true) })
|
|
4934
5604
|
}
|
|
4935
5605
|
),
|
|
4936
|
-
hover && /* @__PURE__ */
|
|
5606
|
+
hover && /* @__PURE__ */ jsx15(AnchoredPreview, { src, anchorRef: ref, href: src })
|
|
4937
5607
|
] });
|
|
4938
5608
|
}
|
|
4939
5609
|
var PREVIEWABLE_EXTS = /* @__PURE__ */ new Set(["pdf", "csv", "png", "jpg", "jpeg", "gif", "webp", "svg"]);
|
|
@@ -4943,8 +5613,8 @@ function FileCard({ file }) {
|
|
|
4943
5613
|
const ext = file.fileName.split(".").pop()?.toLowerCase() ?? "";
|
|
4944
5614
|
const isPreviewable = PREVIEWABLE_EXTS.has(ext);
|
|
4945
5615
|
const isImage = file.mimeType.startsWith("image/");
|
|
4946
|
-
return /* @__PURE__ */
|
|
4947
|
-
/* @__PURE__ */
|
|
5616
|
+
return /* @__PURE__ */ jsxs10(Fragment3, { children: [
|
|
5617
|
+
/* @__PURE__ */ jsxs10(
|
|
4948
5618
|
"a",
|
|
4949
5619
|
{
|
|
4950
5620
|
ref,
|
|
@@ -4955,15 +5625,15 @@ function FileCard({ file }) {
|
|
|
4955
5625
|
onMouseEnter: () => isPreviewable && setHover(true),
|
|
4956
5626
|
onMouseLeave: () => setHover(false),
|
|
4957
5627
|
children: [
|
|
4958
|
-
/* @__PURE__ */
|
|
4959
|
-
/* @__PURE__ */
|
|
4960
|
-
/* @__PURE__ */
|
|
4961
|
-
/* @__PURE__ */
|
|
5628
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext }) }),
|
|
5629
|
+
/* @__PURE__ */ jsxs10("span", { className: "hw-msg-file-info", children: [
|
|
5630
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-name", children: file.fileName }),
|
|
5631
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-msg-file-size", children: formatFileSize(file.fileSize) })
|
|
4962
5632
|
] })
|
|
4963
5633
|
]
|
|
4964
5634
|
}
|
|
4965
5635
|
),
|
|
4966
|
-
hover && isPreviewable && (isImage ? /* @__PURE__ */
|
|
5636
|
+
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
5637
|
] });
|
|
4968
5638
|
}
|
|
4969
5639
|
function AnchoredPreview({
|
|
@@ -4997,7 +5667,7 @@ function AnchoredPreview({
|
|
|
4997
5667
|
};
|
|
4998
5668
|
if (!portalTarget) return null;
|
|
4999
5669
|
return createPortal(
|
|
5000
|
-
/* @__PURE__ */
|
|
5670
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-hover-preview", style, onClick: handleClick, children: /* @__PURE__ */ jsx15("img", { src, alt: "", className: "hw-hover-preview-img" }) }),
|
|
5001
5671
|
portalTarget
|
|
5002
5672
|
);
|
|
5003
5673
|
}
|
|
@@ -5028,17 +5698,17 @@ function AnchoredDocPreview({
|
|
|
5028
5698
|
}, [anchorRef]);
|
|
5029
5699
|
if (!portalTarget) return null;
|
|
5030
5700
|
return createPortal(
|
|
5031
|
-
/* @__PURE__ */
|
|
5701
|
+
/* @__PURE__ */ jsxs10(
|
|
5032
5702
|
"div",
|
|
5033
5703
|
{
|
|
5034
5704
|
className: "hw-hover-preview hw-hover-preview--doc",
|
|
5035
5705
|
style,
|
|
5036
5706
|
onClick: () => window.open(href, "_blank", "noopener,noreferrer"),
|
|
5037
5707
|
children: [
|
|
5038
|
-
/* @__PURE__ */
|
|
5039
|
-
/* @__PURE__ */
|
|
5040
|
-
/* @__PURE__ */
|
|
5041
|
-
/* @__PURE__ */
|
|
5708
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-hover-preview-doc-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext }) }),
|
|
5709
|
+
/* @__PURE__ */ jsxs10("div", { className: "hw-hover-preview-doc-info", children: [
|
|
5710
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-hover-preview-doc-name", children: fileName }),
|
|
5711
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-hover-preview-doc-hint", children: t("widget.click_to_open") })
|
|
5042
5712
|
] })
|
|
5043
5713
|
]
|
|
5044
5714
|
}
|
|
@@ -5063,7 +5733,7 @@ var FILE_TYPE_COLORS = {
|
|
|
5063
5733
|
};
|
|
5064
5734
|
function FileTypeIcon({ ext }) {
|
|
5065
5735
|
const color = FILE_TYPE_COLORS[ext] ?? "currentColor";
|
|
5066
|
-
return /* @__PURE__ */
|
|
5736
|
+
return /* @__PURE__ */ jsxs10(
|
|
5067
5737
|
"svg",
|
|
5068
5738
|
{
|
|
5069
5739
|
viewBox: "0 0 24 24",
|
|
@@ -5073,60 +5743,60 @@ function FileTypeIcon({ ext }) {
|
|
|
5073
5743
|
strokeLinecap: "round",
|
|
5074
5744
|
strokeLinejoin: "round",
|
|
5075
5745
|
children: [
|
|
5076
|
-
/* @__PURE__ */
|
|
5077
|
-
/* @__PURE__ */
|
|
5078
|
-
ext === "pdf" && /* @__PURE__ */
|
|
5079
|
-
ext === "csv" && /* @__PURE__ */
|
|
5746
|
+
/* @__PURE__ */ jsx15("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
|
|
5747
|
+
/* @__PURE__ */ jsx15("polyline", { points: "14 2 14 8 20 8" }),
|
|
5748
|
+
ext === "pdf" && /* @__PURE__ */ jsx15("text", { x: "8", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "PDF" }),
|
|
5749
|
+
ext === "csv" && /* @__PURE__ */ jsx15("text", { x: "7", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "CSV" })
|
|
5080
5750
|
]
|
|
5081
5751
|
}
|
|
5082
5752
|
);
|
|
5083
5753
|
}
|
|
5084
5754
|
function LinkPreviewCard({ preview }) {
|
|
5085
|
-
const
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
|
|
5089
|
-
|
|
5090
|
-
}
|
|
5091
|
-
})();
|
|
5092
|
-
return /* @__PURE__ */ jsxs9(
|
|
5755
|
+
const view = linkPreviewView(preview);
|
|
5756
|
+
const [imageFailed, setImageFailed] = useState14(false);
|
|
5757
|
+
const [faviconFailed, setFaviconFailed] = useState14(false);
|
|
5758
|
+
if (!view) return null;
|
|
5759
|
+
return /* @__PURE__ */ jsxs10(
|
|
5093
5760
|
"a",
|
|
5094
5761
|
{
|
|
5095
|
-
href:
|
|
5762
|
+
href: view.href,
|
|
5096
5763
|
target: "_blank",
|
|
5097
5764
|
rel: "noopener noreferrer",
|
|
5098
5765
|
className: "hw-link-preview",
|
|
5099
5766
|
onClick: (e) => e.stopPropagation(),
|
|
5100
5767
|
children: [
|
|
5101
|
-
|
|
5768
|
+
view.image && !imageFailed && /* @__PURE__ */ jsx15(
|
|
5102
5769
|
"img",
|
|
5103
5770
|
{
|
|
5104
|
-
src:
|
|
5771
|
+
src: view.image,
|
|
5105
5772
|
alt: "",
|
|
5106
5773
|
className: "hw-link-preview-img",
|
|
5107
5774
|
loading: "lazy",
|
|
5108
|
-
|
|
5109
|
-
|
|
5110
|
-
|
|
5775
|
+
decoding: "async",
|
|
5776
|
+
referrerPolicy: "no-referrer",
|
|
5777
|
+
onError: () => setImageFailed(true)
|
|
5111
5778
|
}
|
|
5112
5779
|
),
|
|
5113
|
-
/* @__PURE__ */
|
|
5114
|
-
|
|
5115
|
-
|
|
5116
|
-
|
|
5117
|
-
|
|
5118
|
-
|
|
5119
|
-
|
|
5120
|
-
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5780
|
+
/* @__PURE__ */ jsxs10("div", { className: "hw-link-preview-body", children: [
|
|
5781
|
+
/* @__PURE__ */ jsxs10("div", { className: "hw-link-preview-url", children: [
|
|
5782
|
+
view.favicon && !faviconFailed && /* @__PURE__ */ jsx15(
|
|
5783
|
+
"img",
|
|
5784
|
+
{
|
|
5785
|
+
src: view.favicon,
|
|
5786
|
+
alt: "",
|
|
5787
|
+
className: "hw-link-preview-favicon",
|
|
5788
|
+
width: 14,
|
|
5789
|
+
height: 14,
|
|
5790
|
+
loading: "lazy",
|
|
5791
|
+
decoding: "async",
|
|
5792
|
+
referrerPolicy: "no-referrer",
|
|
5793
|
+
onError: () => setFaviconFailed(true)
|
|
5124
5794
|
}
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
|
|
5128
|
-
|
|
5129
|
-
/* @__PURE__ */
|
|
5795
|
+
),
|
|
5796
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-link-preview-host", children: view.host })
|
|
5797
|
+
] }),
|
|
5798
|
+
view.title && /* @__PURE__ */ jsx15("div", { className: "hw-link-preview-title", dir: "auto", children: view.title }),
|
|
5799
|
+
view.description && /* @__PURE__ */ jsx15("div", { className: "hw-link-preview-desc", dir: "auto", children: view.description })
|
|
5130
5800
|
] })
|
|
5131
5801
|
]
|
|
5132
5802
|
}
|
|
@@ -5135,7 +5805,7 @@ function LinkPreviewCard({ preview }) {
|
|
|
5135
5805
|
|
|
5136
5806
|
// src/themed/message-list.tsx
|
|
5137
5807
|
import React, { useEffect as useEffect14, useRef as useRef16 } from "react";
|
|
5138
|
-
import { jsx as
|
|
5808
|
+
import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
5139
5809
|
function parseParts(raw) {
|
|
5140
5810
|
if (!raw) return null;
|
|
5141
5811
|
if (Array.isArray(raw)) return raw;
|
|
@@ -5236,16 +5906,16 @@ function MessageList({
|
|
|
5236
5906
|
return () => observer.disconnect();
|
|
5237
5907
|
}, [hasMore, onLoadMore, isLoadingMore]);
|
|
5238
5908
|
if (items.length === 0) {
|
|
5239
|
-
return /* @__PURE__ */
|
|
5909
|
+
return /* @__PURE__ */ jsx16(
|
|
5240
5910
|
"div",
|
|
5241
5911
|
{
|
|
5242
5912
|
className: "hw-messages",
|
|
5243
5913
|
role: "log",
|
|
5244
5914
|
"aria-label": t("widget.aria_messages"),
|
|
5245
5915
|
"aria-live": "polite",
|
|
5246
|
-
children: /* @__PURE__ */
|
|
5247
|
-
/* @__PURE__ */
|
|
5248
|
-
/* @__PURE__ */
|
|
5916
|
+
children: /* @__PURE__ */ jsxs11("div", { className: "hw-empty", children: [
|
|
5917
|
+
/* @__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" }) }) }),
|
|
5918
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-empty-text", children: t("widget.start_a_conversation") })
|
|
5249
5919
|
] })
|
|
5250
5920
|
}
|
|
5251
5921
|
);
|
|
@@ -5255,7 +5925,7 @@ function MessageList({
|
|
|
5255
5925
|
const yesterday = /* @__PURE__ */ new Date();
|
|
5256
5926
|
yesterday.setDate(yesterday.getDate() - 1);
|
|
5257
5927
|
const yesterdayKey = DATE_KEY_FMT.format(yesterday);
|
|
5258
|
-
return /* @__PURE__ */
|
|
5928
|
+
return /* @__PURE__ */ jsxs11(
|
|
5259
5929
|
"div",
|
|
5260
5930
|
{
|
|
5261
5931
|
ref: containerRef,
|
|
@@ -5264,15 +5934,15 @@ function MessageList({
|
|
|
5264
5934
|
"aria-label": t("widget.aria_messages"),
|
|
5265
5935
|
"aria-live": "polite",
|
|
5266
5936
|
children: [
|
|
5267
|
-
/* @__PURE__ */
|
|
5268
|
-
/* @__PURE__ */
|
|
5269
|
-
/* @__PURE__ */
|
|
5270
|
-
/* @__PURE__ */
|
|
5937
|
+
/* @__PURE__ */ jsx16("div", { ref: topRef, className: "hw-load-more-trigger", children: isLoadingMore && /* @__PURE__ */ jsxs11("div", { className: "hw-load-more-spinner", children: [
|
|
5938
|
+
/* @__PURE__ */ jsx16("div", {}),
|
|
5939
|
+
/* @__PURE__ */ jsx16("div", {}),
|
|
5940
|
+
/* @__PURE__ */ jsx16("div", {})
|
|
5271
5941
|
] }) }),
|
|
5272
5942
|
[
|
|
5273
5943
|
...items.map((item) => {
|
|
5274
5944
|
if (item.type === "event") {
|
|
5275
|
-
return /* @__PURE__ */
|
|
5945
|
+
return /* @__PURE__ */ jsx16(
|
|
5276
5946
|
EventCard,
|
|
5277
5947
|
{
|
|
5278
5948
|
text: item.text ?? ""
|
|
@@ -5287,16 +5957,16 @@ function MessageList({
|
|
|
5287
5957
|
const showDateSep = isNewBucket && dateKey !== todayKey;
|
|
5288
5958
|
const dateLabel = dateKey === yesterdayKey ? t("widget.yesterday") : displayDateFormatter(getLocale()).format(itemDate);
|
|
5289
5959
|
const sender = item.visitorId ? "visitor" : item.aiAgentId ? "ai" : "team";
|
|
5290
|
-
return /* @__PURE__ */
|
|
5960
|
+
return /* @__PURE__ */ jsxs11(
|
|
5291
5961
|
React.Fragment,
|
|
5292
5962
|
{
|
|
5293
5963
|
children: [
|
|
5294
|
-
showDateSep && /* @__PURE__ */
|
|
5295
|
-
/* @__PURE__ */
|
|
5296
|
-
/* @__PURE__ */
|
|
5297
|
-
/* @__PURE__ */
|
|
5964
|
+
showDateSep && /* @__PURE__ */ jsxs11("div", { className: "hw-date-sep", children: [
|
|
5965
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-date-sep-line" }),
|
|
5966
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-date-sep-text", children: dateLabel }),
|
|
5967
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-date-sep-line" })
|
|
5298
5968
|
] }),
|
|
5299
|
-
/* @__PURE__ */
|
|
5969
|
+
/* @__PURE__ */ jsx16(
|
|
5300
5970
|
MessageBubble,
|
|
5301
5971
|
{
|
|
5302
5972
|
text: item.text ?? "",
|
|
@@ -5328,19 +5998,19 @@ function MessageList({
|
|
|
5328
5998
|
its place, .hw-msg replayed hw-msg-appear (styles.css:1326), and the
|
|
5329
5999
|
answer visibly animated in a second time just as it finished. */
|
|
5330
6000
|
...streamingText && activeConversationId ? [
|
|
5331
|
-
/* @__PURE__ */
|
|
6001
|
+
/* @__PURE__ */ jsxs11(React.Fragment, { children: [
|
|
5332
6002
|
null,
|
|
5333
|
-
/* @__PURE__ */
|
|
6003
|
+
/* @__PURE__ */ jsx16(MessageBubble, { text: streamingText, sender: "ai", parts: null, streaming: true })
|
|
5334
6004
|
] }, streamingKeyFor(activeConversationId))
|
|
5335
6005
|
] : []
|
|
5336
6006
|
],
|
|
5337
6007
|
renderAfterMessages,
|
|
5338
|
-
(isAiProcessing || isTyping) && !streamingText && /* @__PURE__ */
|
|
5339
|
-
/* @__PURE__ */
|
|
5340
|
-
/* @__PURE__ */
|
|
5341
|
-
/* @__PURE__ */
|
|
6008
|
+
(isAiProcessing || isTyping) && !streamingText && /* @__PURE__ */ jsx16("div", { className: "hw-typing", children: /* @__PURE__ */ jsxs11("div", { className: "hw-typing-dots", children: [
|
|
6009
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" }),
|
|
6010
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" }),
|
|
6011
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" })
|
|
5342
6012
|
] }) }),
|
|
5343
|
-
/* @__PURE__ */
|
|
6013
|
+
/* @__PURE__ */ jsx16("div", { ref: bottomRef })
|
|
5344
6014
|
]
|
|
5345
6015
|
}
|
|
5346
6016
|
);
|
|
@@ -5358,8 +6028,8 @@ function EventCard({ text }) {
|
|
|
5358
6028
|
const data = parseEventData(text);
|
|
5359
6029
|
if (data) {
|
|
5360
6030
|
const message = data.action === "joined" ? t("widget.joined") : t("widget.left");
|
|
5361
|
-
return /* @__PURE__ */
|
|
5362
|
-
/* @__PURE__ */
|
|
6031
|
+
return /* @__PURE__ */ jsxs11("div", { className: "hw-event hw-event--card", children: [
|
|
6032
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-event-avatar", children: data.image ? /* @__PURE__ */ jsx16(
|
|
5363
6033
|
"img",
|
|
5364
6034
|
{
|
|
5365
6035
|
src: data.image,
|
|
@@ -5367,20 +6037,20 @@ function EventCard({ text }) {
|
|
|
5367
6037
|
className: "hw-event-avatar-img",
|
|
5368
6038
|
referrerPolicy: "no-referrer"
|
|
5369
6039
|
}
|
|
5370
|
-
) : /* @__PURE__ */
|
|
5371
|
-
/* @__PURE__ */
|
|
5372
|
-
/* @__PURE__ */
|
|
6040
|
+
) : /* @__PURE__ */ jsx16("span", { children: getInitials(data.name) }) }),
|
|
6041
|
+
/* @__PURE__ */ jsxs11("div", { className: "hw-event-body", children: [
|
|
6042
|
+
/* @__PURE__ */ jsx16("span", { className: "hw-event-name", children: data.name }),
|
|
5373
6043
|
" ",
|
|
5374
|
-
/* @__PURE__ */
|
|
6044
|
+
/* @__PURE__ */ jsx16("span", { className: "hw-event-action", children: message })
|
|
5375
6045
|
] })
|
|
5376
6046
|
] });
|
|
5377
6047
|
}
|
|
5378
|
-
return /* @__PURE__ */
|
|
6048
|
+
return /* @__PURE__ */ jsx16("div", { className: "hw-event", children: /* @__PURE__ */ jsx16("div", { className: "hw-event-text", children: text }) });
|
|
5379
6049
|
}
|
|
5380
6050
|
|
|
5381
6051
|
// src/themed/message-preview.tsx
|
|
5382
6052
|
import { useEffect as useEffect15, useState as useState15 } from "react";
|
|
5383
|
-
import { Fragment as Fragment4, jsx as
|
|
6053
|
+
import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
5384
6054
|
function MessagePreview({
|
|
5385
6055
|
onOpen,
|
|
5386
6056
|
avatar,
|
|
@@ -5437,7 +6107,7 @@ function MessagePreview({
|
|
|
5437
6107
|
);
|
|
5438
6108
|
const qr = preview.quickReplies && preview.quickReplies.options.length > 0 ? preview.quickReplies : null;
|
|
5439
6109
|
const placementClass = placement === "anchored" ? "hw-preview--anchored " : "";
|
|
5440
|
-
return /* @__PURE__ */
|
|
6110
|
+
return /* @__PURE__ */ jsxs12(
|
|
5441
6111
|
"div",
|
|
5442
6112
|
{
|
|
5443
6113
|
className: `hw-preview ${placementClass}${closing ? "hw-preview--closing" : ""}`,
|
|
@@ -5451,17 +6121,17 @@ function MessagePreview({
|
|
|
5451
6121
|
role: "button",
|
|
5452
6122
|
tabIndex: 0,
|
|
5453
6123
|
children: [
|
|
5454
|
-
/* @__PURE__ */
|
|
5455
|
-
/* @__PURE__ */
|
|
5456
|
-
/* @__PURE__ */
|
|
5457
|
-
/* @__PURE__ */
|
|
6124
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-preview-header", children: [
|
|
6125
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-preview-avatar", children: senderImage ? /* @__PURE__ */ jsx17("img", { src: senderImage, alt: "", referrerPolicy: "no-referrer" }) : avatar }),
|
|
6126
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-preview-name", children: senderName }),
|
|
6127
|
+
/* @__PURE__ */ jsx17(
|
|
5458
6128
|
"button",
|
|
5459
6129
|
{
|
|
5460
6130
|
type: "button",
|
|
5461
6131
|
className: "hw-preview-close",
|
|
5462
6132
|
onClick: handleClose,
|
|
5463
6133
|
"aria-label": t("widget.aria_dismiss"),
|
|
5464
|
-
children: /* @__PURE__ */
|
|
6134
|
+
children: /* @__PURE__ */ jsx17(XIcon, { size: 20 })
|
|
5465
6135
|
}
|
|
5466
6136
|
)
|
|
5467
6137
|
] }),
|
|
@@ -5470,11 +6140,11 @@ function MessagePreview({
|
|
|
5470
6140
|
consecutive messages, so two identical ones would already be a bug
|
|
5471
6141
|
upstream, and an index key hands React the wrong bubble to reuse the
|
|
5472
6142
|
moment a new message lands mid-animation. */
|
|
5473
|
-
/* @__PURE__ */
|
|
6143
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-preview-body", children: truncatePreviewBody(m.text) }, m.text)
|
|
5474
6144
|
)),
|
|
5475
|
-
qr && /* @__PURE__ */
|
|
5476
|
-
qr.prompt && /* @__PURE__ */
|
|
5477
|
-
/* @__PURE__ */
|
|
6145
|
+
qr && /* @__PURE__ */ jsxs12(Fragment4, { children: [
|
|
6146
|
+
qr.prompt && /* @__PURE__ */ jsx17("div", { className: "hw-preview-body", children: qr.prompt }),
|
|
6147
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-preview-quick-replies hw-quick-replies", children: qr.options.map((opt) => /* @__PURE__ */ jsx17(
|
|
5478
6148
|
"button",
|
|
5479
6149
|
{
|
|
5480
6150
|
type: "button",
|
|
@@ -5488,14 +6158,92 @@ function MessagePreview({
|
|
|
5488
6158
|
opt.id
|
|
5489
6159
|
)) })
|
|
5490
6160
|
] }),
|
|
5491
|
-
footer != null && footer !== false && /* @__PURE__ */
|
|
6161
|
+
footer != null && footer !== false && /* @__PURE__ */ jsx17("div", { className: "hw-preview-footer", children: footer })
|
|
5492
6162
|
]
|
|
5493
6163
|
}
|
|
5494
6164
|
);
|
|
5495
6165
|
}
|
|
5496
6166
|
|
|
6167
|
+
// src/themed/resolved-banner.tsx
|
|
6168
|
+
import { useId, useState as useState16 } from "react";
|
|
6169
|
+
|
|
6170
|
+
// src/themed/resolved-rating.ts
|
|
6171
|
+
function asCsatRating(value) {
|
|
6172
|
+
return value === "good" || value === "bad" ? value : null;
|
|
6173
|
+
}
|
|
6174
|
+
async function saveRating(client, store, conversationId, rating) {
|
|
6175
|
+
try {
|
|
6176
|
+
await client.widget.sendCsat.mutate({ conversationId, rating });
|
|
6177
|
+
} catch {
|
|
6178
|
+
return false;
|
|
6179
|
+
}
|
|
6180
|
+
store.setState((s) => ({
|
|
6181
|
+
conversations: s.conversations.map(
|
|
6182
|
+
(c) => c.id === conversationId ? { ...c, csatRating: rating } : c
|
|
6183
|
+
)
|
|
6184
|
+
}));
|
|
6185
|
+
return true;
|
|
6186
|
+
}
|
|
6187
|
+
|
|
6188
|
+
// src/themed/resolved-banner.tsx
|
|
6189
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
6190
|
+
var OPTIONS = [
|
|
6191
|
+
{ value: "good", labelKey: "widget.aria_good", Icon: ThumbsUpIcon },
|
|
6192
|
+
{ value: "bad", labelKey: "widget.aria_bad", Icon: ThumbsDownIcon }
|
|
6193
|
+
];
|
|
6194
|
+
function ResolvedBlock({
|
|
6195
|
+
rating,
|
|
6196
|
+
failed = false,
|
|
6197
|
+
onRate
|
|
6198
|
+
}) {
|
|
6199
|
+
const labelId = useId();
|
|
6200
|
+
return /* @__PURE__ */ jsxs13("div", { className: "hw-resolved", children: [
|
|
6201
|
+
/* @__PURE__ */ jsxs13("div", { className: "hw-resolved-status", role: "status", children: [
|
|
6202
|
+
/* @__PURE__ */ jsx18(CheckCircleIcon, { size: 16 }),
|
|
6203
|
+
/* @__PURE__ */ jsx18("span", { children: t("widget.resolved_text") })
|
|
6204
|
+
] }),
|
|
6205
|
+
/* @__PURE__ */ jsxs13("div", { className: "hw-csat", role: "group", "aria-labelledby": labelId, children: [
|
|
6206
|
+
/* @__PURE__ */ jsx18("span", { className: "hw-csat-label", id: labelId, children: rating ? t("widget.csat_thanks") : t("widget.csat_label") }),
|
|
6207
|
+
/* @__PURE__ */ jsx18("span", { className: "hw-csat-buttons", children: OPTIONS.filter((o) => !rating || o.value === rating).map(({ value, labelKey, Icon }) => /* @__PURE__ */ jsxs13(
|
|
6208
|
+
"button",
|
|
6209
|
+
{
|
|
6210
|
+
type: "button",
|
|
6211
|
+
className: "hw-csat-btn",
|
|
6212
|
+
"aria-pressed": rating === value,
|
|
6213
|
+
"aria-disabled": rating ? true : void 0,
|
|
6214
|
+
onClick: rating ? void 0 : () => onRate(value),
|
|
6215
|
+
children: [
|
|
6216
|
+
/* @__PURE__ */ jsx18(Icon, { size: 14 }),
|
|
6217
|
+
t(labelKey)
|
|
6218
|
+
]
|
|
6219
|
+
},
|
|
6220
|
+
value
|
|
6221
|
+
)) })
|
|
6222
|
+
] }),
|
|
6223
|
+
failed && !rating && /* @__PURE__ */ jsx18("div", { className: "hw-csat-error", role: "alert", children: t("widget.csat_error") })
|
|
6224
|
+
] });
|
|
6225
|
+
}
|
|
6226
|
+
function ResolvedBanner({ conversationId }) {
|
|
6227
|
+
const { client, store } = useWidgetContext();
|
|
6228
|
+
const saved = useWidgetStore(
|
|
6229
|
+
(s) => asCsatRating(s.conversations.find((c) => c.id === conversationId)?.csatRating)
|
|
6230
|
+
);
|
|
6231
|
+
const [pending, setPending] = useState16(null);
|
|
6232
|
+
const [failed, setFailed] = useState16(false);
|
|
6233
|
+
const rate = (rating) => {
|
|
6234
|
+
setPending(rating);
|
|
6235
|
+
setFailed(false);
|
|
6236
|
+
void saveRating(client, store, conversationId, rating).then((ok) => {
|
|
6237
|
+
if (ok) return;
|
|
6238
|
+
setPending(null);
|
|
6239
|
+
setFailed(true);
|
|
6240
|
+
});
|
|
6241
|
+
};
|
|
6242
|
+
return /* @__PURE__ */ jsx18(ResolvedBlock, { rating: saved ?? pending, failed, onRate: rate });
|
|
6243
|
+
}
|
|
6244
|
+
|
|
5497
6245
|
// src/themed/default-widget.tsx
|
|
5498
|
-
import { Fragment as Fragment5, jsx as
|
|
6246
|
+
import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
5499
6247
|
function resolveLabel2(label) {
|
|
5500
6248
|
if (!label.startsWith("widget.")) return label;
|
|
5501
6249
|
const resolved = t(label);
|
|
@@ -5507,7 +6255,7 @@ var EMPTY_CONTENT_TABS = [];
|
|
|
5507
6255
|
var DEFAULT_EN_WELCOME = "Hi there \u{1F44B}\nHow can we help?";
|
|
5508
6256
|
var DEFAULT_EN_SUBTITLE = "Usually replies in minutes";
|
|
5509
6257
|
function HelpwayMark({ className }) {
|
|
5510
|
-
return /* @__PURE__ */
|
|
6258
|
+
return /* @__PURE__ */ jsx19(
|
|
5511
6259
|
"svg",
|
|
5512
6260
|
{
|
|
5513
6261
|
className,
|
|
@@ -5517,7 +6265,7 @@ function HelpwayMark({ className }) {
|
|
|
5517
6265
|
fill: "none",
|
|
5518
6266
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5519
6267
|
"aria-hidden": "true",
|
|
5520
|
-
children: /* @__PURE__ */
|
|
6268
|
+
children: /* @__PURE__ */ jsx19(
|
|
5521
6269
|
"path",
|
|
5522
6270
|
{
|
|
5523
6271
|
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 +6292,7 @@ function WidgetLogo({
|
|
|
5544
6292
|
});
|
|
5545
6293
|
const logoClass = forceAgent ? "hw-agent-img--logo" : "";
|
|
5546
6294
|
if (!forceAgent && activeId && assignee?.assigneeImage) {
|
|
5547
|
-
return /* @__PURE__ */
|
|
6295
|
+
return /* @__PURE__ */ jsx19(
|
|
5548
6296
|
"img",
|
|
5549
6297
|
{
|
|
5550
6298
|
src: assignee.assigneeImage,
|
|
@@ -5555,7 +6303,7 @@ function WidgetLogo({
|
|
|
5555
6303
|
);
|
|
5556
6304
|
}
|
|
5557
6305
|
if (customAvatar) {
|
|
5558
|
-
return /* @__PURE__ */
|
|
6306
|
+
return /* @__PURE__ */ jsx19(
|
|
5559
6307
|
"span",
|
|
5560
6308
|
{
|
|
5561
6309
|
className: `hw-agent-icon hw-agent-custom ${className ?? ""}`,
|
|
@@ -5565,7 +6313,7 @@ function WidgetLogo({
|
|
|
5565
6313
|
);
|
|
5566
6314
|
}
|
|
5567
6315
|
if (agentConfig?.avatarUrl) {
|
|
5568
|
-
return /* @__PURE__ */
|
|
6316
|
+
return /* @__PURE__ */ jsx19(
|
|
5569
6317
|
"img",
|
|
5570
6318
|
{
|
|
5571
6319
|
src: agentConfig.avatarUrl,
|
|
@@ -5575,7 +6323,7 @@ function WidgetLogo({
|
|
|
5575
6323
|
);
|
|
5576
6324
|
}
|
|
5577
6325
|
if (agentConfig?.avatarPreset) {
|
|
5578
|
-
return /* @__PURE__ */
|
|
6326
|
+
return /* @__PURE__ */ jsx19(
|
|
5579
6327
|
"div",
|
|
5580
6328
|
{
|
|
5581
6329
|
className: `hw-agent-icon ${className ?? ""}`,
|
|
@@ -5586,18 +6334,18 @@ function WidgetLogo({
|
|
|
5586
6334
|
justifyContent: "center",
|
|
5587
6335
|
borderRadius: 8
|
|
5588
6336
|
},
|
|
5589
|
-
children: /* @__PURE__ */
|
|
6337
|
+
children: /* @__PURE__ */ jsx19(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
|
|
5590
6338
|
}
|
|
5591
6339
|
);
|
|
5592
6340
|
}
|
|
5593
6341
|
if (logoUrl) {
|
|
5594
|
-
return /* @__PURE__ */
|
|
6342
|
+
return /* @__PURE__ */ jsx19("img", { src: logoUrl, alt: "", className: `hw-agent-img hw-agent-img--logo ${className ?? ""}` });
|
|
5595
6343
|
}
|
|
5596
|
-
return /* @__PURE__ */
|
|
6344
|
+
return /* @__PURE__ */ jsx19(HelpwayMark, { className });
|
|
5597
6345
|
}
|
|
5598
6346
|
function LauncherIcon({ className }) {
|
|
5599
6347
|
const agentConfig = useWidgetStore((s) => s.agentConfig);
|
|
5600
|
-
const [imgLoaded, setImgLoaded] =
|
|
6348
|
+
const [imgLoaded, setImgLoaded] = useState17(false);
|
|
5601
6349
|
const imgSrc = agentConfig?.launcherIconUrl ?? null;
|
|
5602
6350
|
useEffect16(() => {
|
|
5603
6351
|
if (!imgSrc) return;
|
|
@@ -5612,7 +6360,7 @@ function LauncherIcon({ className }) {
|
|
|
5612
6360
|
img.onerror = () => setImgLoaded(true);
|
|
5613
6361
|
}, [imgSrc]);
|
|
5614
6362
|
if (imgSrc) {
|
|
5615
|
-
return /* @__PURE__ */
|
|
6363
|
+
return /* @__PURE__ */ jsx19(
|
|
5616
6364
|
"img",
|
|
5617
6365
|
{
|
|
5618
6366
|
src: imgSrc,
|
|
@@ -5622,7 +6370,7 @@ function LauncherIcon({ className }) {
|
|
|
5622
6370
|
}
|
|
5623
6371
|
);
|
|
5624
6372
|
}
|
|
5625
|
-
return /* @__PURE__ */
|
|
6373
|
+
return /* @__PURE__ */ jsx19(WidgetLogo, { className, forceAgent: true });
|
|
5626
6374
|
}
|
|
5627
6375
|
var PRESET_SVG = {
|
|
5628
6376
|
// Helpway brand mark — octagonal chamfer with stylized "W" inside.
|
|
@@ -5681,7 +6429,7 @@ function AgentPresetIcon({ presetId }) {
|
|
|
5681
6429
|
const svgContent = PRESET_SVG[presetId] ?? PRESET_SVG.sparkle;
|
|
5682
6430
|
return (
|
|
5683
6431
|
// biome-ignore lint: trusted static SVG content from our icon library
|
|
5684
|
-
/* @__PURE__ */
|
|
6432
|
+
/* @__PURE__ */ jsx19(
|
|
5685
6433
|
"svg",
|
|
5686
6434
|
{
|
|
5687
6435
|
viewBox: "0 0 24 24",
|
|
@@ -5694,8 +6442,8 @@ function AgentPresetIcon({ presetId }) {
|
|
|
5694
6442
|
);
|
|
5695
6443
|
}
|
|
5696
6444
|
function CloseGlyph({ docked }) {
|
|
5697
|
-
if (!docked) return /* @__PURE__ */
|
|
5698
|
-
return /* @__PURE__ */
|
|
6445
|
+
if (!docked) return /* @__PURE__ */ jsx19(XIcon, { size: 20 });
|
|
6446
|
+
return /* @__PURE__ */ jsx19(
|
|
5699
6447
|
"svg",
|
|
5700
6448
|
{
|
|
5701
6449
|
width: "20",
|
|
@@ -5707,7 +6455,7 @@ function CloseGlyph({ docked }) {
|
|
|
5707
6455
|
strokeLinecap: "round",
|
|
5708
6456
|
strokeLinejoin: "round",
|
|
5709
6457
|
"aria-hidden": "true",
|
|
5710
|
-
children: /* @__PURE__ */
|
|
6458
|
+
children: /* @__PURE__ */ jsx19("path", { d: "M6 9.5 12 15.5 18 9.5" })
|
|
5711
6459
|
}
|
|
5712
6460
|
);
|
|
5713
6461
|
}
|
|
@@ -5720,7 +6468,15 @@ function DefaultWidget({
|
|
|
5720
6468
|
const { isReady, website, agentConfig } = useWidget();
|
|
5721
6469
|
const customAvatar = useContext2(AgentAvatarContext);
|
|
5722
6470
|
useI18n();
|
|
5723
|
-
const {
|
|
6471
|
+
const {
|
|
6472
|
+
client,
|
|
6473
|
+
store,
|
|
6474
|
+
hasBootstrapError,
|
|
6475
|
+
wsDisconnected,
|
|
6476
|
+
wsLost,
|
|
6477
|
+
retryConnection,
|
|
6478
|
+
retryBootstrap
|
|
6479
|
+
} = useWidgetContext();
|
|
5724
6480
|
const { conversations, create, isCreating, setActiveConversation } = useConversations();
|
|
5725
6481
|
const activeId = useWidgetStore((s) => s.activeConversationId);
|
|
5726
6482
|
const isDismissed = useWidgetStore((s) => s.isDismissed);
|
|
@@ -5739,13 +6495,13 @@ function DefaultWidget({
|
|
|
5739
6495
|
});
|
|
5740
6496
|
}
|
|
5741
6497
|
const storeIsOpen = useWidgetStore((s) => s.isOpen);
|
|
5742
|
-
const [isClosing, setIsClosing] =
|
|
6498
|
+
const [isClosing, setIsClosing] = useState17(false);
|
|
5743
6499
|
const isOpen = storeIsOpen || isClosing;
|
|
5744
|
-
const [activeTab, setActiveTab] =
|
|
5745
|
-
const [subView, setSubView] =
|
|
5746
|
-
const [newText, setNewText] =
|
|
5747
|
-
const [contentDetailSlug, setContentDetailSlug] =
|
|
5748
|
-
const [contentCategoryName, setContentCategoryName] =
|
|
6500
|
+
const [activeTab, setActiveTab] = useState17("home");
|
|
6501
|
+
const [subView, setSubView] = useState17(null);
|
|
6502
|
+
const [newText, setNewText] = useState17("");
|
|
6503
|
+
const [contentDetailSlug, setContentDetailSlug] = useState17(null);
|
|
6504
|
+
const [contentCategoryName, setContentCategoryName] = useState17(null);
|
|
5749
6505
|
const prevActiveIdRef = useRef17(activeId);
|
|
5750
6506
|
useEffect16(() => {
|
|
5751
6507
|
if (activeId && activeId !== prevActiveIdRef.current && subView !== "conversation") {
|
|
@@ -5853,7 +6609,7 @@ function DefaultWidget({
|
|
|
5853
6609
|
pendingDockText.current = null;
|
|
5854
6610
|
void dockRef.current.submit({ text, conversationId: activeId });
|
|
5855
6611
|
}, [activeId]);
|
|
5856
|
-
const [menuOpen, setMenuOpen] =
|
|
6612
|
+
const [menuOpen, setMenuOpen] = useState17(false);
|
|
5857
6613
|
useEffect16(() => {
|
|
5858
6614
|
if (!menuOpen) return;
|
|
5859
6615
|
const close = () => setMenuOpen(false);
|
|
@@ -6065,7 +6821,7 @@ function DefaultWidget({
|
|
|
6065
6821
|
const launcherStyle = agentConfig?.launcherStyle ?? "icon";
|
|
6066
6822
|
const bubbleStyle = agentConfig?.bubbleStyle ?? "rounded";
|
|
6067
6823
|
const hasUploadedAvatar = !!agentConfig?.avatarUrl;
|
|
6068
|
-
return /* @__PURE__ */
|
|
6824
|
+
return /* @__PURE__ */ jsxs14(
|
|
6069
6825
|
"div",
|
|
6070
6826
|
{
|
|
6071
6827
|
className: "hw-widget",
|
|
@@ -6081,7 +6837,7 @@ function DefaultWidget({
|
|
|
6081
6837
|
"--hw-window-left": widgetPosition === "bottom-left" ? "0" : "auto"
|
|
6082
6838
|
},
|
|
6083
6839
|
children: [
|
|
6084
|
-
placement === "docked" && isReady && /* @__PURE__ */
|
|
6840
|
+
placement === "docked" && isReady && /* @__PURE__ */ jsx19(
|
|
6085
6841
|
DockedBar,
|
|
6086
6842
|
{
|
|
6087
6843
|
value: dockComposer.text,
|
|
@@ -6096,19 +6852,20 @@ function DefaultWidget({
|
|
|
6096
6852
|
onReopen: reopenFromDock,
|
|
6097
6853
|
sendError: dockComposer.sendError,
|
|
6098
6854
|
onClearSendError: dockComposer.clearSendError,
|
|
6099
|
-
leading: customAvatar
|
|
6855
|
+
leading: customAvatar,
|
|
6856
|
+
placeholder: conversations.find((c) => c.id === activeId)?.status === "resolved" ? t("widget.placeholder_resolved") : void 0
|
|
6100
6857
|
}
|
|
6101
6858
|
),
|
|
6102
|
-
isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */
|
|
6103
|
-
/* @__PURE__ */
|
|
6104
|
-
/* @__PURE__ */
|
|
6105
|
-
/* @__PURE__ */
|
|
6859
|
+
isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */ jsx19("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-loading", children: [
|
|
6860
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
|
|
6861
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } }),
|
|
6862
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } })
|
|
6106
6863
|
] }) }),
|
|
6107
|
-
isOpen && hasBootstrapError && /* @__PURE__ */
|
|
6108
|
-
/* @__PURE__ */
|
|
6109
|
-
/* @__PURE__ */
|
|
6864
|
+
isOpen && hasBootstrapError && /* @__PURE__ */ jsx19("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs14("div", { className: "hw-bootstrap-error", children: [
|
|
6865
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-bootstrap-error-text", children: t("widget.error_desc") }),
|
|
6866
|
+
/* @__PURE__ */ jsx19("button", { type: "button", className: "hw-bootstrap-error-retry", onClick: retryBootstrap, children: t("widget.retry") })
|
|
6110
6867
|
] }) }),
|
|
6111
|
-
isOpen && isReady && /* @__PURE__ */
|
|
6868
|
+
isOpen && isReady && /* @__PURE__ */ jsxs14(
|
|
6112
6869
|
"div",
|
|
6113
6870
|
{
|
|
6114
6871
|
ref: windowRef,
|
|
@@ -6120,24 +6877,28 @@ function DefaultWidget({
|
|
|
6120
6877
|
onTouchMove: handleTouchMove,
|
|
6121
6878
|
onTouchEnd: handleTouchEnd,
|
|
6122
6879
|
children: [
|
|
6123
|
-
/* @__PURE__ */
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6880
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-drag-handle", children: /* @__PURE__ */ jsx19("div", { className: "hw-drag-handle-pill" }) }),
|
|
6881
|
+
/* @__PURE__ */ jsx19(
|
|
6882
|
+
ConnectionStrip,
|
|
6883
|
+
{
|
|
6884
|
+
reconnecting: wsDisconnected,
|
|
6885
|
+
lost: wsLost,
|
|
6886
|
+
onRetry: retryConnection
|
|
6887
|
+
}
|
|
6888
|
+
),
|
|
6128
6889
|
(subView === "content-detail" || subView === "content-category") && (() => {
|
|
6129
6890
|
const tabId = activeTab.replace("content:", "");
|
|
6130
6891
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6131
6892
|
const headerTitle = subView === "content-category" && contentCategoryName ? contentCategoryName : contentTab?.label ? resolveLabel2(contentTab.label) : t("widget.content");
|
|
6132
|
-
return /* @__PURE__ */
|
|
6133
|
-
/* @__PURE__ */
|
|
6893
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
|
|
6894
|
+
/* @__PURE__ */ jsx19(
|
|
6134
6895
|
"button",
|
|
6135
6896
|
{
|
|
6136
6897
|
type: "button",
|
|
6137
6898
|
className: "hw-header-back",
|
|
6138
6899
|
onClick: goBack,
|
|
6139
6900
|
"aria-label": t("widget.aria_back"),
|
|
6140
|
-
children: /* @__PURE__ */
|
|
6901
|
+
children: /* @__PURE__ */ jsx19(
|
|
6141
6902
|
"svg",
|
|
6142
6903
|
{
|
|
6143
6904
|
viewBox: "0 0 24 24",
|
|
@@ -6146,33 +6907,33 @@ function DefaultWidget({
|
|
|
6146
6907
|
strokeWidth: 2,
|
|
6147
6908
|
strokeLinecap: "round",
|
|
6148
6909
|
strokeLinejoin: "round",
|
|
6149
|
-
children: /* @__PURE__ */
|
|
6910
|
+
children: /* @__PURE__ */ jsx19("path", { d: "M15 18l-6-6 6-6" })
|
|
6150
6911
|
}
|
|
6151
6912
|
)
|
|
6152
6913
|
}
|
|
6153
6914
|
),
|
|
6154
|
-
/* @__PURE__ */
|
|
6155
|
-
/* @__PURE__ */
|
|
6915
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: headerTitle }),
|
|
6916
|
+
/* @__PURE__ */ jsx19(
|
|
6156
6917
|
"button",
|
|
6157
6918
|
{
|
|
6158
6919
|
type: "button",
|
|
6159
6920
|
className: "hw-header-close",
|
|
6160
6921
|
onClick: handleClose,
|
|
6161
6922
|
"aria-label": t("widget.aria_close"),
|
|
6162
|
-
children: /* @__PURE__ */
|
|
6923
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6163
6924
|
}
|
|
6164
6925
|
)
|
|
6165
6926
|
] });
|
|
6166
6927
|
})(),
|
|
6167
|
-
subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */
|
|
6168
|
-
/* @__PURE__ */
|
|
6928
|
+
subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--sub", children: [
|
|
6929
|
+
/* @__PURE__ */ jsx19(
|
|
6169
6930
|
"button",
|
|
6170
6931
|
{
|
|
6171
6932
|
type: "button",
|
|
6172
6933
|
className: "hw-header-back",
|
|
6173
6934
|
onClick: goBack,
|
|
6174
6935
|
"aria-label": t("widget.aria_back"),
|
|
6175
|
-
children: /* @__PURE__ */
|
|
6936
|
+
children: /* @__PURE__ */ jsx19(
|
|
6176
6937
|
"svg",
|
|
6177
6938
|
{
|
|
6178
6939
|
viewBox: "0 0 24 24",
|
|
@@ -6181,17 +6942,17 @@ function DefaultWidget({
|
|
|
6181
6942
|
strokeWidth: 2,
|
|
6182
6943
|
strokeLinecap: "round",
|
|
6183
6944
|
strokeLinejoin: "round",
|
|
6184
|
-
children: /* @__PURE__ */
|
|
6945
|
+
children: /* @__PURE__ */ jsx19("path", { d: "M15 18l-6-6 6-6" })
|
|
6185
6946
|
}
|
|
6186
6947
|
)
|
|
6187
6948
|
}
|
|
6188
6949
|
),
|
|
6189
|
-
/* @__PURE__ */
|
|
6190
|
-
/* @__PURE__ */
|
|
6950
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-header-identity", children: [
|
|
6951
|
+
/* @__PURE__ */ jsx19(
|
|
6191
6952
|
"div",
|
|
6192
6953
|
{
|
|
6193
6954
|
className: `hw-header-bot-icon${hasTeamAgent ? " hw-header-bot-icon--team" : ""}`,
|
|
6194
|
-
children: hasTeamAgent && humanImage ? /* @__PURE__ */
|
|
6955
|
+
children: hasTeamAgent && humanImage ? /* @__PURE__ */ jsx19(
|
|
6195
6956
|
"img",
|
|
6196
6957
|
{
|
|
6197
6958
|
src: humanImage,
|
|
@@ -6199,16 +6960,16 @@ function DefaultWidget({
|
|
|
6199
6960
|
className: "hw-header-agent-img",
|
|
6200
6961
|
referrerPolicy: "no-referrer"
|
|
6201
6962
|
}
|
|
6202
|
-
) : hasTeamAgent ? /* @__PURE__ */
|
|
6963
|
+
) : 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
6964
|
}
|
|
6204
6965
|
),
|
|
6205
|
-
/* @__PURE__ */
|
|
6206
|
-
/* @__PURE__ */
|
|
6207
|
-
/* @__PURE__ */
|
|
6966
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-header-info", children: [
|
|
6967
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-name", children: headerName }),
|
|
6968
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-status", children: subtitleText })
|
|
6208
6969
|
] })
|
|
6209
6970
|
] }),
|
|
6210
|
-
/* @__PURE__ */
|
|
6211
|
-
/* @__PURE__ */
|
|
6971
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-header-actions", children: [
|
|
6972
|
+
/* @__PURE__ */ jsx19(
|
|
6212
6973
|
"button",
|
|
6213
6974
|
{
|
|
6214
6975
|
type: "button",
|
|
@@ -6220,21 +6981,21 @@ function DefaultWidget({
|
|
|
6220
6981
|
event.stopPropagation();
|
|
6221
6982
|
setMenuOpen((open) => !open);
|
|
6222
6983
|
},
|
|
6223
|
-
children: /* @__PURE__ */
|
|
6984
|
+
children: /* @__PURE__ */ jsx19(DotsIcon, { size: 18 })
|
|
6224
6985
|
}
|
|
6225
6986
|
),
|
|
6226
|
-
/* @__PURE__ */
|
|
6987
|
+
/* @__PURE__ */ jsx19(
|
|
6227
6988
|
"button",
|
|
6228
6989
|
{
|
|
6229
6990
|
type: "button",
|
|
6230
6991
|
className: "hw-header-close",
|
|
6231
6992
|
onClick: handleClose,
|
|
6232
6993
|
"aria-label": t("widget.aria_close"),
|
|
6233
|
-
children: /* @__PURE__ */
|
|
6994
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6234
6995
|
}
|
|
6235
6996
|
),
|
|
6236
|
-
menuOpen && /* @__PURE__ */
|
|
6237
|
-
conversations.length > 0 && /* @__PURE__ */
|
|
6997
|
+
menuOpen && /* @__PURE__ */ jsxs14("div", { className: "hw-header-menu", role: "menu", children: [
|
|
6998
|
+
conversations.length > 0 && /* @__PURE__ */ jsx19("div", { className: "hw-header-menu-convs", children: conversations.slice(0, 3).map((conv) => /* @__PURE__ */ jsxs14(
|
|
6238
6999
|
"button",
|
|
6239
7000
|
{
|
|
6240
7001
|
type: "button",
|
|
@@ -6246,16 +7007,16 @@ function DefaultWidget({
|
|
|
6246
7007
|
openConversation(conv.id);
|
|
6247
7008
|
},
|
|
6248
7009
|
children: [
|
|
6249
|
-
/* @__PURE__ */
|
|
6250
|
-
/* @__PURE__ */
|
|
6251
|
-
conv.lastMessageAt && /* @__PURE__ */
|
|
7010
|
+
/* @__PURE__ */ jsxs14("span", { className: "hw-header-menu-conv-top", children: [
|
|
7011
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-name", children: conversationIdentity(conv).humanName ?? companyName }),
|
|
7012
|
+
conv.lastMessageAt && /* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-time", children: formatRelativeTime(conv.lastMessageAt) })
|
|
6252
7013
|
] }),
|
|
6253
|
-
/* @__PURE__ */
|
|
7014
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-preview", children: conv.lastMessageText ?? t("widget.no_preview") })
|
|
6254
7015
|
]
|
|
6255
7016
|
},
|
|
6256
7017
|
conv.id
|
|
6257
7018
|
)) }),
|
|
6258
|
-
/* @__PURE__ */
|
|
7019
|
+
/* @__PURE__ */ jsxs14(
|
|
6259
7020
|
"button",
|
|
6260
7021
|
{
|
|
6261
7022
|
type: "button",
|
|
@@ -6265,7 +7026,7 @@ function DefaultWidget({
|
|
|
6265
7026
|
openNewConversation();
|
|
6266
7027
|
},
|
|
6267
7028
|
children: [
|
|
6268
|
-
/* @__PURE__ */
|
|
7029
|
+
/* @__PURE__ */ jsx19(NewChatIcon, { size: 16 }),
|
|
6269
7030
|
t("widget.new_conversation")
|
|
6270
7031
|
]
|
|
6271
7032
|
}
|
|
@@ -6273,43 +7034,43 @@ function DefaultWidget({
|
|
|
6273
7034
|
] })
|
|
6274
7035
|
] })
|
|
6275
7036
|
] }),
|
|
6276
|
-
subView === null && activeTab === "home" && /* @__PURE__ */
|
|
6277
|
-
/* @__PURE__ */
|
|
6278
|
-
/* @__PURE__ */
|
|
6279
|
-
/* @__PURE__ */
|
|
6280
|
-
/* @__PURE__ */
|
|
7037
|
+
subView === null && activeTab === "home" && /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
7038
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-hero", children: [
|
|
7039
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-hero-top", children: [
|
|
7040
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-hero-bot-icon", children: /* @__PURE__ */ jsx19(WidgetLogo, {}) }),
|
|
7041
|
+
/* @__PURE__ */ jsx19(
|
|
6281
7042
|
"button",
|
|
6282
7043
|
{
|
|
6283
7044
|
type: "button",
|
|
6284
7045
|
className: "hw-hero-close",
|
|
6285
7046
|
onClick: handleClose,
|
|
6286
7047
|
"aria-label": t("widget.aria_close"),
|
|
6287
|
-
children: /* @__PURE__ */
|
|
7048
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6288
7049
|
}
|
|
6289
7050
|
)
|
|
6290
7051
|
] }),
|
|
6291
|
-
/* @__PURE__ */
|
|
7052
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs14(
|
|
6292
7053
|
"span",
|
|
6293
7054
|
{
|
|
6294
7055
|
className: i === 0 ? "hw-hero-greeting-name" : "hw-hero-greeting-question",
|
|
6295
7056
|
children: [
|
|
6296
|
-
i > 0 && /* @__PURE__ */
|
|
7057
|
+
i > 0 && /* @__PURE__ */ jsx19("br", {}),
|
|
6297
7058
|
line
|
|
6298
7059
|
]
|
|
6299
7060
|
},
|
|
6300
7061
|
i
|
|
6301
7062
|
)) }),
|
|
6302
|
-
/* @__PURE__ */
|
|
7063
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-hero-subtitle", children: subtitleText })
|
|
6303
7064
|
] }),
|
|
6304
|
-
/* @__PURE__ */
|
|
6305
|
-
/* @__PURE__ */
|
|
6306
|
-
/* @__PURE__ */
|
|
6307
|
-
/* @__PURE__ */
|
|
6308
|
-
/* @__PURE__ */
|
|
7065
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-sheet", children: /* @__PURE__ */ jsxs14("div", { className: "hw-sheet-inner", children: [
|
|
7066
|
+
/* @__PURE__ */ jsxs14("button", { type: "button", className: "hw-card", onClick: openNewConversation, children: [
|
|
7067
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-card-body", children: [
|
|
7068
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-card-title", children: t("widget.send_us_message") }),
|
|
7069
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-card-meta", children: t("widget.reply_time") })
|
|
6309
7070
|
] }),
|
|
6310
|
-
/* @__PURE__ */
|
|
7071
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx19(SendIcon, {}) })
|
|
6311
7072
|
] }),
|
|
6312
|
-
announcementTabs.length > 0 && /* @__PURE__ */
|
|
7073
|
+
announcementTabs.length > 0 && /* @__PURE__ */ jsx19(
|
|
6313
7074
|
WhatsNewCard,
|
|
6314
7075
|
{
|
|
6315
7076
|
getUnseenEntries,
|
|
@@ -6325,7 +7086,7 @@ function DefaultWidget({
|
|
|
6325
7086
|
}
|
|
6326
7087
|
}
|
|
6327
7088
|
),
|
|
6328
|
-
/* @__PURE__ */
|
|
7089
|
+
/* @__PURE__ */ jsx19(
|
|
6329
7090
|
HomeView,
|
|
6330
7091
|
{
|
|
6331
7092
|
conversations,
|
|
@@ -6335,17 +7096,17 @@ function DefaultWidget({
|
|
|
6335
7096
|
)
|
|
6336
7097
|
] }) })
|
|
6337
7098
|
] }),
|
|
6338
|
-
subView === null && activeTab === "messages" && /* @__PURE__ */
|
|
6339
|
-
/* @__PURE__ */
|
|
6340
|
-
/* @__PURE__ */
|
|
6341
|
-
/* @__PURE__ */
|
|
7099
|
+
subView === null && activeTab === "messages" && /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
|
|
7100
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-spacer" }),
|
|
7101
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: t("widget.messages") }),
|
|
7102
|
+
/* @__PURE__ */ jsx19(
|
|
6342
7103
|
"button",
|
|
6343
7104
|
{
|
|
6344
7105
|
type: "button",
|
|
6345
7106
|
className: "hw-header-close",
|
|
6346
7107
|
onClick: handleClose,
|
|
6347
7108
|
"aria-label": t("widget.aria_close"),
|
|
6348
|
-
children: /* @__PURE__ */
|
|
7109
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6349
7110
|
}
|
|
6350
7111
|
)
|
|
6351
7112
|
] }),
|
|
@@ -6353,23 +7114,23 @@ function DefaultWidget({
|
|
|
6353
7114
|
const tabId = activeTab.replace("content:", "");
|
|
6354
7115
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6355
7116
|
if (!contentTab) return null;
|
|
6356
|
-
return /* @__PURE__ */
|
|
6357
|
-
/* @__PURE__ */
|
|
6358
|
-
/* @__PURE__ */
|
|
6359
|
-
/* @__PURE__ */
|
|
7117
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
|
|
7118
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-spacer" }),
|
|
7119
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: resolveLabel2(contentTab.label) }),
|
|
7120
|
+
/* @__PURE__ */ jsx19(
|
|
6360
7121
|
"button",
|
|
6361
7122
|
{
|
|
6362
7123
|
type: "button",
|
|
6363
7124
|
className: "hw-header-close",
|
|
6364
7125
|
onClick: handleClose,
|
|
6365
7126
|
"aria-label": t("widget.aria_close"),
|
|
6366
|
-
children: /* @__PURE__ */
|
|
7127
|
+
children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
|
|
6367
7128
|
}
|
|
6368
7129
|
)
|
|
6369
7130
|
] });
|
|
6370
7131
|
})(),
|
|
6371
|
-
(subView !== null || activeTab !== "home") && /* @__PURE__ */
|
|
6372
|
-
subView === null && activeTab === "messages" && /* @__PURE__ */
|
|
7132
|
+
(subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs14("div", { className: "hw-content", children: [
|
|
7133
|
+
subView === null && activeTab === "messages" && /* @__PURE__ */ jsx19(
|
|
6373
7134
|
MessagesView,
|
|
6374
7135
|
{
|
|
6375
7136
|
conversations,
|
|
@@ -6377,7 +7138,7 @@ function DefaultWidget({
|
|
|
6377
7138
|
onNewClick: openNewConversation
|
|
6378
7139
|
}
|
|
6379
7140
|
),
|
|
6380
|
-
subView === "new" && /* @__PURE__ */
|
|
7141
|
+
subView === "new" && /* @__PURE__ */ jsx19(
|
|
6381
7142
|
NewConversationView,
|
|
6382
7143
|
{
|
|
6383
7144
|
text: newText,
|
|
@@ -6387,12 +7148,12 @@ function DefaultWidget({
|
|
|
6387
7148
|
welcomeMessage
|
|
6388
7149
|
}
|
|
6389
7150
|
),
|
|
6390
|
-
subView === "conversation" && activeId && /* @__PURE__ */
|
|
7151
|
+
subView === "conversation" && activeId && /* @__PURE__ */ jsx19(ConversationView, { conversationId: activeId, starters: dockSuggestions }),
|
|
6391
7152
|
activeTab.startsWith("content:") && (() => {
|
|
6392
7153
|
const tabId = activeTab.replace("content:", "");
|
|
6393
7154
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6394
7155
|
if (!contentTab) return null;
|
|
6395
|
-
return /* @__PURE__ */
|
|
7156
|
+
return /* @__PURE__ */ jsx19(
|
|
6396
7157
|
ContentTabView,
|
|
6397
7158
|
{
|
|
6398
7159
|
tab: contentTab,
|
|
@@ -6412,7 +7173,7 @@ function DefaultWidget({
|
|
|
6412
7173
|
);
|
|
6413
7174
|
})()
|
|
6414
7175
|
] }),
|
|
6415
|
-
showTabBar && /* @__PURE__ */
|
|
7176
|
+
showTabBar && /* @__PURE__ */ jsx19(
|
|
6416
7177
|
TabBar,
|
|
6417
7178
|
{
|
|
6418
7179
|
activeTab,
|
|
@@ -6423,20 +7184,20 @@ function DefaultWidget({
|
|
|
6423
7184
|
unseenAnnouncementCount
|
|
6424
7185
|
}
|
|
6425
7186
|
),
|
|
6426
|
-
/* @__PURE__ */
|
|
7187
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-powered", children: [
|
|
6427
7188
|
t("widget.powered_by"),
|
|
6428
7189
|
" ",
|
|
6429
|
-
/* @__PURE__ */
|
|
7190
|
+
/* @__PURE__ */ jsx19("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
|
|
6430
7191
|
] })
|
|
6431
7192
|
]
|
|
6432
7193
|
}
|
|
6433
7194
|
),
|
|
6434
|
-
isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */
|
|
6435
|
-
/* @__PURE__ */
|
|
7195
|
+
isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsxs14("div", { className: "hw-preview-dock", children: [
|
|
7196
|
+
/* @__PURE__ */ jsx19(
|
|
6436
7197
|
AnnouncementPreviews,
|
|
6437
7198
|
{
|
|
6438
7199
|
maxVisible: incomingPreview ? 1 : 2,
|
|
6439
|
-
avatar: /* @__PURE__ */
|
|
7200
|
+
avatar: /* @__PURE__ */ jsx19(WidgetLogo, {}),
|
|
6440
7201
|
onOpen: (slug, tabId) => {
|
|
6441
7202
|
markEntrySeen(slug);
|
|
6442
7203
|
handleBubbleClick();
|
|
@@ -6448,10 +7209,10 @@ function DefaultWidget({
|
|
|
6448
7209
|
}
|
|
6449
7210
|
}
|
|
6450
7211
|
),
|
|
6451
|
-
/* @__PURE__ */
|
|
7212
|
+
/* @__PURE__ */ jsx19(MessagePreview, { onOpen: handleBubbleClick, avatar: /* @__PURE__ */ jsx19(WidgetLogo, {}), autoDismissMs: null })
|
|
6452
7213
|
] }),
|
|
6453
|
-
/* @__PURE__ */
|
|
6454
|
-
isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */
|
|
7214
|
+
/* @__PURE__ */ jsx19(WidgetDebugOverlay, {}),
|
|
7215
|
+
isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */ jsxs14(
|
|
6455
7216
|
"button",
|
|
6456
7217
|
{
|
|
6457
7218
|
ref: bubbleRef,
|
|
@@ -6468,24 +7229,24 @@ function DefaultWidget({
|
|
|
6468
7229
|
"aria-expanded": isOpen,
|
|
6469
7230
|
"aria-haspopup": "dialog",
|
|
6470
7231
|
children: [
|
|
6471
|
-
/* @__PURE__ */
|
|
7232
|
+
/* @__PURE__ */ jsx19(
|
|
6472
7233
|
"span",
|
|
6473
7234
|
{
|
|
6474
7235
|
className: `hw-bubble-icon hw-bubble-icon--bot ${isOpen ? "hw-bubble-icon--hidden" : ""}`,
|
|
6475
|
-
children: /* @__PURE__ */
|
|
7236
|
+
children: /* @__PURE__ */ jsx19(LauncherIcon, {})
|
|
6476
7237
|
}
|
|
6477
7238
|
),
|
|
6478
|
-
/* @__PURE__ */
|
|
7239
|
+
/* @__PURE__ */ jsx19(
|
|
6479
7240
|
"span",
|
|
6480
7241
|
{
|
|
6481
7242
|
className: `hw-bubble-icon hw-bubble-icon--close ${!isOpen ? "hw-bubble-icon--hidden" : ""}`,
|
|
6482
|
-
children: /* @__PURE__ */
|
|
7243
|
+
children: /* @__PURE__ */ jsx19(XIcon, { size: 24 })
|
|
6483
7244
|
}
|
|
6484
7245
|
),
|
|
6485
|
-
launcherStyle !== "icon" && !isOpen && /* @__PURE__ */
|
|
6486
|
-
!isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */
|
|
7246
|
+
launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx19("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
|
|
7247
|
+
!isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsxs14("div", { className: "hw-bubble-badge", children: [
|
|
6487
7248
|
totalUnread > 0 ? totalUnread : "",
|
|
6488
|
-
totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */
|
|
7249
|
+
totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsx19("span", { className: "hw-bubble-badge-dot" })
|
|
6489
7250
|
] })
|
|
6490
7251
|
]
|
|
6491
7252
|
}
|
|
@@ -6502,8 +7263,8 @@ function TabBar({
|
|
|
6502
7263
|
showMessagesTab = true,
|
|
6503
7264
|
unseenAnnouncementCount = 0
|
|
6504
7265
|
}) {
|
|
6505
|
-
return /* @__PURE__ */
|
|
6506
|
-
/* @__PURE__ */
|
|
7266
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-tabs", role: "tablist", children: [
|
|
7267
|
+
/* @__PURE__ */ jsxs14(
|
|
6507
7268
|
"button",
|
|
6508
7269
|
{
|
|
6509
7270
|
type: "button",
|
|
@@ -6512,12 +7273,12 @@ function TabBar({
|
|
|
6512
7273
|
role: "tab",
|
|
6513
7274
|
"aria-selected": activeTab === "home",
|
|
6514
7275
|
children: [
|
|
6515
|
-
/* @__PURE__ */
|
|
6516
|
-
/* @__PURE__ */
|
|
7276
|
+
/* @__PURE__ */ jsx19(HomeIcon, {}),
|
|
7277
|
+
/* @__PURE__ */ jsx19("span", { children: t("widget.home") })
|
|
6517
7278
|
]
|
|
6518
7279
|
}
|
|
6519
7280
|
),
|
|
6520
|
-
showMessagesTab && /* @__PURE__ */
|
|
7281
|
+
showMessagesTab && /* @__PURE__ */ jsxs14(
|
|
6521
7282
|
"button",
|
|
6522
7283
|
{
|
|
6523
7284
|
type: "button",
|
|
@@ -6526,15 +7287,15 @@ function TabBar({
|
|
|
6526
7287
|
role: "tab",
|
|
6527
7288
|
"aria-selected": activeTab === "messages",
|
|
6528
7289
|
children: [
|
|
6529
|
-
/* @__PURE__ */
|
|
6530
|
-
/* @__PURE__ */
|
|
6531
|
-
unreadCount > 0 && /* @__PURE__ */
|
|
7290
|
+
/* @__PURE__ */ jsxs14("span", { className: "hw-tabs-icon-wrap", children: [
|
|
7291
|
+
/* @__PURE__ */ jsx19(MessagesIcon, {}),
|
|
7292
|
+
unreadCount > 0 && /* @__PURE__ */ jsx19("span", { className: "hw-tabs-badge", children: unreadCount > 99 ? "99+" : unreadCount })
|
|
6532
7293
|
] }),
|
|
6533
|
-
/* @__PURE__ */
|
|
7294
|
+
/* @__PURE__ */ jsx19("span", { children: t("widget.messages") })
|
|
6534
7295
|
]
|
|
6535
7296
|
}
|
|
6536
7297
|
),
|
|
6537
|
-
contentTabs.map((tab) => /* @__PURE__ */
|
|
7298
|
+
contentTabs.map((tab) => /* @__PURE__ */ jsxs14(
|
|
6538
7299
|
"button",
|
|
6539
7300
|
{
|
|
6540
7301
|
type: "button",
|
|
@@ -6543,11 +7304,11 @@ function TabBar({
|
|
|
6543
7304
|
role: "tab",
|
|
6544
7305
|
"aria-selected": activeTab === `content:${tab.id}`,
|
|
6545
7306
|
children: [
|
|
6546
|
-
/* @__PURE__ */
|
|
6547
|
-
/* @__PURE__ */
|
|
6548
|
-
tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */
|
|
7307
|
+
/* @__PURE__ */ jsxs14("span", { className: "hw-tabs-icon-wrap", children: [
|
|
7308
|
+
/* @__PURE__ */ jsx19(ContentTabIconComponent, { icon: tab.icon }),
|
|
7309
|
+
tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */ jsx19("span", { className: "hw-tabs-dot" })
|
|
6549
7310
|
] }),
|
|
6550
|
-
/* @__PURE__ */
|
|
7311
|
+
/* @__PURE__ */ jsx19("span", { children: resolveLabel2(tab.label) })
|
|
6551
7312
|
]
|
|
6552
7313
|
},
|
|
6553
7314
|
tab.id
|
|
@@ -6561,9 +7322,9 @@ function HomeView({
|
|
|
6561
7322
|
}) {
|
|
6562
7323
|
const recent = conversations.slice(0, 3);
|
|
6563
7324
|
if (recent.length === 0) return null;
|
|
6564
|
-
return /* @__PURE__ */
|
|
6565
|
-
/* @__PURE__ */
|
|
6566
|
-
recent.map((conv, i) => /* @__PURE__ */
|
|
7325
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-recent-card", children: [
|
|
7326
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-recent-header", children: t("widget.recent_conversations") }),
|
|
7327
|
+
recent.map((conv, i) => /* @__PURE__ */ jsx19(
|
|
6567
7328
|
ConversationRow,
|
|
6568
7329
|
{
|
|
6569
7330
|
conversation: conv,
|
|
@@ -6572,7 +7333,7 @@ function HomeView({
|
|
|
6572
7333
|
},
|
|
6573
7334
|
conv.id
|
|
6574
7335
|
)),
|
|
6575
|
-
conversations.length > 3 && /* @__PURE__ */
|
|
7336
|
+
conversations.length > 3 && /* @__PURE__ */ jsx19("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
|
|
6576
7337
|
] });
|
|
6577
7338
|
}
|
|
6578
7339
|
function MessagesView({
|
|
@@ -6581,14 +7342,14 @@ function MessagesView({
|
|
|
6581
7342
|
onNewClick
|
|
6582
7343
|
}) {
|
|
6583
7344
|
if (conversations.length === 0) {
|
|
6584
|
-
return /* @__PURE__ */
|
|
6585
|
-
/* @__PURE__ */
|
|
6586
|
-
/* @__PURE__ */
|
|
6587
|
-
/* @__PURE__ */
|
|
6588
|
-
/* @__PURE__ */
|
|
7345
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-empty-state", children: [
|
|
7346
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-empty-icon-wrap", children: /* @__PURE__ */ jsx19(MessagesIcon, {}) }),
|
|
7347
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-empty-title", children: t("widget.no_messages") }),
|
|
7348
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-empty-desc", children: t("widget.no_messages_desc") }),
|
|
7349
|
+
/* @__PURE__ */ jsx19("button", { type: "button", className: "hw-empty-btn", onClick: onNewClick, children: t("widget.start_conversation") })
|
|
6589
7350
|
] });
|
|
6590
7351
|
}
|
|
6591
|
-
return /* @__PURE__ */
|
|
7352
|
+
return /* @__PURE__ */ jsx19("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx19(ConversationCard, { conversation: conv, onSelect }, conv.id)) });
|
|
6592
7353
|
}
|
|
6593
7354
|
function ConvCardBody({ conv }) {
|
|
6594
7355
|
const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
|
|
@@ -6596,8 +7357,8 @@ function ConvCardBody({ conv }) {
|
|
|
6596
7357
|
const isTeam = !!humanName;
|
|
6597
7358
|
const displayName = humanName ?? agentName;
|
|
6598
7359
|
const preview = conv.lastMessageText ?? t("widget.no_preview");
|
|
6599
|
-
return /* @__PURE__ */
|
|
6600
|
-
/* @__PURE__ */
|
|
7360
|
+
return /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
7361
|
+
/* @__PURE__ */ jsx19("div", { className: `hw-conv-card-avatar${isTeam ? " hw-conv-card-avatar--team" : ""}`, children: isTeam ? humanImage ? /* @__PURE__ */ jsx19(
|
|
6601
7362
|
"img",
|
|
6602
7363
|
{
|
|
6603
7364
|
src: humanImage,
|
|
@@ -6605,13 +7366,13 @@ function ConvCardBody({ conv }) {
|
|
|
6605
7366
|
className: "hw-conv-card-avatar-img",
|
|
6606
7367
|
referrerPolicy: "no-referrer"
|
|
6607
7368
|
}
|
|
6608
|
-
) : /* @__PURE__ */
|
|
6609
|
-
/* @__PURE__ */
|
|
6610
|
-
/* @__PURE__ */
|
|
6611
|
-
/* @__PURE__ */
|
|
6612
|
-
conv.lastMessageAt && /* @__PURE__ */
|
|
7369
|
+
) : /* @__PURE__ */ jsx19("span", { className: "hw-conv-card-avatar-initials", children: displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx19(WidgetLogo, {}) }),
|
|
7370
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-conv-card-content", children: [
|
|
7371
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-conv-card-top", children: [
|
|
7372
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-conv-card-name", children: displayName }),
|
|
7373
|
+
conv.lastMessageAt && /* @__PURE__ */ jsx19("span", { className: "hw-conv-card-time", children: formatRelativeTime(conv.lastMessageAt) })
|
|
6613
7374
|
] }),
|
|
6614
|
-
/* @__PURE__ */
|
|
7375
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-conv-card-preview", children: preview })
|
|
6615
7376
|
] })
|
|
6616
7377
|
] });
|
|
6617
7378
|
}
|
|
@@ -6621,16 +7382,16 @@ function ConversationCard({
|
|
|
6621
7382
|
}) {
|
|
6622
7383
|
const hasUnread = conv.unreadCount > 0;
|
|
6623
7384
|
const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
|
|
6624
|
-
return /* @__PURE__ */
|
|
7385
|
+
return /* @__PURE__ */ jsxs14(
|
|
6625
7386
|
"button",
|
|
6626
7387
|
{
|
|
6627
7388
|
type: "button",
|
|
6628
7389
|
className: `hw-conv-card ${hasUnread ? "hw-conv-card--unread" : ""}`,
|
|
6629
7390
|
onClick: () => onSelect(conv.id),
|
|
6630
7391
|
children: [
|
|
6631
|
-
/* @__PURE__ */
|
|
6632
|
-
hasUnread && /* @__PURE__ */
|
|
6633
|
-
awaiting && /* @__PURE__ */
|
|
7392
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx19(ConvCardBody, { conv }) }),
|
|
7393
|
+
hasUnread && /* @__PURE__ */ jsx19("div", { className: "hw-conv-card-badge", children: conv.unreadCount }),
|
|
7394
|
+
awaiting && /* @__PURE__ */ jsx19("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
|
|
6634
7395
|
]
|
|
6635
7396
|
}
|
|
6636
7397
|
);
|
|
@@ -6642,16 +7403,16 @@ function ConversationRow({
|
|
|
6642
7403
|
}) {
|
|
6643
7404
|
const hasUnread = conv.unreadCount > 0;
|
|
6644
7405
|
const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
|
|
6645
|
-
return /* @__PURE__ */
|
|
7406
|
+
return /* @__PURE__ */ jsxs14(
|
|
6646
7407
|
"button",
|
|
6647
7408
|
{
|
|
6648
7409
|
type: "button",
|
|
6649
7410
|
className: `hw-recent-row ${hasUnread ? "hw-recent-row--unread" : ""} ${isLast ? "hw-recent-row--last" : ""}`,
|
|
6650
7411
|
onClick: () => onSelect(conv.id),
|
|
6651
7412
|
children: [
|
|
6652
|
-
/* @__PURE__ */
|
|
6653
|
-
hasUnread && /* @__PURE__ */
|
|
6654
|
-
awaiting && /* @__PURE__ */
|
|
7413
|
+
/* @__PURE__ */ jsx19(ConvCardBody, { conv }),
|
|
7414
|
+
hasUnread && /* @__PURE__ */ jsx19("div", { className: "hw-recent-row-badge", children: conv.unreadCount }),
|
|
7415
|
+
awaiting && /* @__PURE__ */ jsx19("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
|
|
6655
7416
|
]
|
|
6656
7417
|
}
|
|
6657
7418
|
);
|
|
@@ -6659,10 +7420,10 @@ function ConversationRow({
|
|
|
6659
7420
|
function InlineEmailPrompt({ conversationId }) {
|
|
6660
7421
|
const { client, store } = useWidgetContext();
|
|
6661
7422
|
const updateContact = useWidgetStore((s) => s.updateVisitorContact);
|
|
6662
|
-
const [email, setEmail] =
|
|
6663
|
-
const [isSubmitting, setIsSubmitting] =
|
|
6664
|
-
const [isSuccess, setIsSuccess] =
|
|
6665
|
-
const [hasError, setHasError] =
|
|
7423
|
+
const [email, setEmail] = useState17("");
|
|
7424
|
+
const [isSubmitting, setIsSubmitting] = useState17(false);
|
|
7425
|
+
const [isSuccess, setIsSuccess] = useState17(false);
|
|
7426
|
+
const [hasError, setHasError] = useState17(false);
|
|
6666
7427
|
const handleSubmit = async () => {
|
|
6667
7428
|
const trimmed = email.trim();
|
|
6668
7429
|
if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
|
|
@@ -6703,8 +7464,8 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6703
7464
|
}
|
|
6704
7465
|
};
|
|
6705
7466
|
if (isSuccess) {
|
|
6706
|
-
return /* @__PURE__ */
|
|
6707
|
-
/* @__PURE__ */
|
|
7467
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-email-card hw-email-card--success", children: [
|
|
7468
|
+
/* @__PURE__ */ jsx19(
|
|
6708
7469
|
"svg",
|
|
6709
7470
|
{
|
|
6710
7471
|
width: "15",
|
|
@@ -6715,17 +7476,17 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6715
7476
|
strokeWidth: 2.5,
|
|
6716
7477
|
strokeLinecap: "round",
|
|
6717
7478
|
strokeLinejoin: "round",
|
|
6718
|
-
children: /* @__PURE__ */
|
|
7479
|
+
children: /* @__PURE__ */ jsx19("polyline", { points: "20 6 9 17 4 12" })
|
|
6719
7480
|
}
|
|
6720
7481
|
),
|
|
6721
7482
|
t("widget.email_saved")
|
|
6722
7483
|
] });
|
|
6723
7484
|
}
|
|
6724
|
-
return /* @__PURE__ */
|
|
6725
|
-
/* @__PURE__ */
|
|
6726
|
-
/* @__PURE__ */
|
|
6727
|
-
/* @__PURE__ */
|
|
6728
|
-
/* @__PURE__ */
|
|
7485
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-email-card", children: [
|
|
7486
|
+
/* @__PURE__ */ jsx19("p", { className: "hw-email-card-title", children: t("widget.email_title") }),
|
|
7487
|
+
/* @__PURE__ */ jsx19("p", { className: "hw-email-card-subtitle", children: t("widget.email_subtitle") }),
|
|
7488
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-email-card-row", children: [
|
|
7489
|
+
/* @__PURE__ */ jsx19(
|
|
6729
7490
|
"input",
|
|
6730
7491
|
{
|
|
6731
7492
|
type: "email",
|
|
@@ -6741,7 +7502,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6741
7502
|
placeholder: t("widget.email_placeholder")
|
|
6742
7503
|
}
|
|
6743
7504
|
),
|
|
6744
|
-
/* @__PURE__ */
|
|
7505
|
+
/* @__PURE__ */ jsx19(
|
|
6745
7506
|
"button",
|
|
6746
7507
|
{
|
|
6747
7508
|
type: "button",
|
|
@@ -6749,7 +7510,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6749
7510
|
onClick: handleSubmit,
|
|
6750
7511
|
disabled: isSubmitting || !email.trim(),
|
|
6751
7512
|
"aria-label": t("widget.email_continue"),
|
|
6752
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
7513
|
+
children: isSubmitting ? /* @__PURE__ */ jsx19(
|
|
6753
7514
|
"svg",
|
|
6754
7515
|
{
|
|
6755
7516
|
width: "14",
|
|
@@ -6759,7 +7520,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6759
7520
|
stroke: "currentColor",
|
|
6760
7521
|
strokeWidth: 2,
|
|
6761
7522
|
"aria-hidden": "true",
|
|
6762
|
-
children: /* @__PURE__ */
|
|
7523
|
+
children: /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx19(
|
|
6763
7524
|
"animate",
|
|
6764
7525
|
{
|
|
6765
7526
|
attributeName: "stroke-dashoffset",
|
|
@@ -6769,7 +7530,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6769
7530
|
}
|
|
6770
7531
|
) })
|
|
6771
7532
|
}
|
|
6772
|
-
) : /* @__PURE__ */
|
|
7533
|
+
) : /* @__PURE__ */ jsx19(
|
|
6773
7534
|
"svg",
|
|
6774
7535
|
{
|
|
6775
7536
|
width: "15",
|
|
@@ -6781,7 +7542,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6781
7542
|
strokeLinecap: "round",
|
|
6782
7543
|
strokeLinejoin: "round",
|
|
6783
7544
|
"aria-hidden": "true",
|
|
6784
|
-
children: /* @__PURE__ */
|
|
7545
|
+
children: /* @__PURE__ */ jsx19("path", { d: "M5 12h13M12 5l7 7-7 7" })
|
|
6785
7546
|
}
|
|
6786
7547
|
)
|
|
6787
7548
|
}
|
|
@@ -6796,9 +7557,9 @@ function NewConversationView({
|
|
|
6796
7557
|
isSubmitting,
|
|
6797
7558
|
welcomeMessage
|
|
6798
7559
|
}) {
|
|
6799
|
-
return /* @__PURE__ */
|
|
6800
|
-
/* @__PURE__ */
|
|
6801
|
-
/* @__PURE__ */
|
|
7560
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-new", children: [
|
|
7561
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx19(MessageBubble, { text: welcomeMessage, sender: "ai", parts: null }) }),
|
|
7562
|
+
/* @__PURE__ */ jsx19(
|
|
6802
7563
|
Composer,
|
|
6803
7564
|
{
|
|
6804
7565
|
text,
|
|
@@ -6847,27 +7608,27 @@ function ConversationView({
|
|
|
6847
7608
|
const needsEmailPostReply = !!agentConfig?.requireVisitorEmail && !hasEmail && visitorMessageCount >= 2 && hasAiReply;
|
|
6848
7609
|
const needsEmail = needsEmailPostReply || !!emailGateConvId;
|
|
6849
7610
|
if (isLoading && items.length === 0) {
|
|
6850
|
-
return /* @__PURE__ */
|
|
6851
|
-
/* @__PURE__ */
|
|
6852
|
-
/* @__PURE__ */
|
|
6853
|
-
/* @__PURE__ */
|
|
6854
|
-
/* @__PURE__ */
|
|
6855
|
-
/* @__PURE__ */
|
|
7611
|
+
return /* @__PURE__ */ jsx19("div", { className: "hw-messages", children: /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-messages", children: [
|
|
7612
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-msg", children: [
|
|
7613
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-avatar" }),
|
|
7614
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-bubble", children: [
|
|
7615
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 140 } }),
|
|
7616
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } })
|
|
6856
7617
|
] })
|
|
6857
7618
|
] }),
|
|
6858
|
-
/* @__PURE__ */
|
|
6859
|
-
/* @__PURE__ */
|
|
6860
|
-
/* @__PURE__ */
|
|
6861
|
-
/* @__PURE__ */
|
|
6862
|
-
/* @__PURE__ */
|
|
6863
|
-
/* @__PURE__ */
|
|
6864
|
-
/* @__PURE__ */
|
|
7619
|
+
/* @__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 } }) }) }),
|
|
7620
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-msg", children: [
|
|
7621
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-avatar" }),
|
|
7622
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-bubble", children: [
|
|
7623
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 180 } }),
|
|
7624
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
|
|
7625
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 80 } })
|
|
6865
7626
|
] })
|
|
6866
7627
|
] })
|
|
6867
7628
|
] }) });
|
|
6868
7629
|
}
|
|
6869
|
-
return /* @__PURE__ */
|
|
6870
|
-
/* @__PURE__ */
|
|
7630
|
+
return /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
7631
|
+
/* @__PURE__ */ jsx19(
|
|
6871
7632
|
MessageList,
|
|
6872
7633
|
{
|
|
6873
7634
|
items,
|
|
@@ -6877,12 +7638,12 @@ function ConversationView({
|
|
|
6877
7638
|
hasMore,
|
|
6878
7639
|
isLoadingMore: isLoading,
|
|
6879
7640
|
onLoadMore: loadMore,
|
|
6880
|
-
renderAfterMessages: needsEmail || showStarters ? /* @__PURE__ */
|
|
6881
|
-
needsEmail && /* @__PURE__ */
|
|
6882
|
-
showStarters && /* @__PURE__ */
|
|
7641
|
+
renderAfterMessages: needsEmail || showStarters ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
7642
|
+
needsEmail && /* @__PURE__ */ jsx19(InlineEmailPrompt, { conversationId: emailGateConvId ?? void 0 }),
|
|
7643
|
+
showStarters && /* @__PURE__ */ jsx19("div", { className: "hw-starters", children: starters?.map((entry, index) => {
|
|
6883
7644
|
const question = typeof entry === "string" ? entry : entry.question;
|
|
6884
7645
|
const label = typeof entry === "string" ? null : entry.label;
|
|
6885
|
-
return /* @__PURE__ */
|
|
7646
|
+
return /* @__PURE__ */ jsxs14(
|
|
6886
7647
|
"button",
|
|
6887
7648
|
{
|
|
6888
7649
|
type: "button",
|
|
@@ -6892,11 +7653,11 @@ function ConversationView({
|
|
|
6892
7653
|
void submit({ text: question });
|
|
6893
7654
|
},
|
|
6894
7655
|
children: [
|
|
6895
|
-
/* @__PURE__ */
|
|
6896
|
-
/* @__PURE__ */
|
|
6897
|
-
label && /* @__PURE__ */
|
|
7656
|
+
/* @__PURE__ */ jsxs14("span", { className: "hw-starter-text", children: [
|
|
7657
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-starter-k", children: label ?? question }),
|
|
7658
|
+
label && /* @__PURE__ */ jsx19("span", { className: "hw-starter-q", children: question })
|
|
6898
7659
|
] }),
|
|
6899
|
-
/* @__PURE__ */
|
|
7660
|
+
/* @__PURE__ */ jsx19(ChevronRightIcon, { size: 14 })
|
|
6900
7661
|
]
|
|
6901
7662
|
},
|
|
6902
7663
|
question
|
|
@@ -6905,10 +7666,10 @@ function ConversationView({
|
|
|
6905
7666
|
] }) : void 0
|
|
6906
7667
|
}
|
|
6907
7668
|
),
|
|
6908
|
-
isResolved && /* @__PURE__ */
|
|
6909
|
-
sendError && /* @__PURE__ */
|
|
7669
|
+
isResolved && /* @__PURE__ */ jsx19(ResolvedBanner, { conversationId }),
|
|
7670
|
+
sendError && /* @__PURE__ */ jsxs14("div", { className: "hw-send-error", children: [
|
|
6910
7671
|
sendError,
|
|
6911
|
-
/* @__PURE__ */
|
|
7672
|
+
/* @__PURE__ */ jsx19(
|
|
6912
7673
|
"button",
|
|
6913
7674
|
{
|
|
6914
7675
|
type: "button",
|
|
@@ -6921,7 +7682,7 @@ function ConversationView({
|
|
|
6921
7682
|
}
|
|
6922
7683
|
)
|
|
6923
7684
|
] }),
|
|
6924
|
-
/* @__PURE__ */
|
|
7685
|
+
/* @__PURE__ */ jsx19(
|
|
6925
7686
|
Composer,
|
|
6926
7687
|
{
|
|
6927
7688
|
text,
|
|
@@ -6932,50 +7693,12 @@ function ConversationView({
|
|
|
6932
7693
|
attachments,
|
|
6933
7694
|
onAddFiles: addFiles,
|
|
6934
7695
|
onRemoveAttachment: removeAttachment,
|
|
6935
|
-
disabled: needsEmail
|
|
7696
|
+
disabled: needsEmail,
|
|
7697
|
+
placeholder: isResolved ? t("widget.placeholder_resolved") : void 0
|
|
6936
7698
|
}
|
|
6937
7699
|
)
|
|
6938
7700
|
] });
|
|
6939
7701
|
}
|
|
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
7702
|
function WhatsNewCard({
|
|
6980
7703
|
getUnseenEntries,
|
|
6981
7704
|
announcementTabs,
|
|
@@ -6986,34 +7709,34 @@ function WhatsNewCard({
|
|
|
6986
7709
|
if (unseen.length === 0) return null;
|
|
6987
7710
|
const display = unseen.slice(0, 3);
|
|
6988
7711
|
const badgeFieldMap = new Map(announcementTabs.map((t2) => [t2.id, t2.display?.badgeField]));
|
|
6989
|
-
return /* @__PURE__ */
|
|
6990
|
-
/* @__PURE__ */
|
|
6991
|
-
/* @__PURE__ */
|
|
6992
|
-
/* @__PURE__ */
|
|
7712
|
+
return /* @__PURE__ */ jsxs14("div", { className: "hw-whats-new", children: [
|
|
7713
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-header", children: [
|
|
7714
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-whats-new-title", children: resolveLabel2("widget.whats_new") }),
|
|
7715
|
+
/* @__PURE__ */ jsxs14("button", { type: "button", className: "hw-whats-new-view-all", onClick: onViewAll, children: [
|
|
6993
7716
|
resolveLabel2("widget.view_all"),
|
|
6994
7717
|
" \u2192"
|
|
6995
7718
|
] })
|
|
6996
7719
|
] }),
|
|
6997
|
-
/* @__PURE__ */
|
|
7720
|
+
/* @__PURE__ */ jsx19("div", { className: "hw-whats-new-list", children: display.map((entry) => {
|
|
6998
7721
|
const badgeField = badgeFieldMap.get(entry.tabId);
|
|
6999
|
-
return /* @__PURE__ */
|
|
7722
|
+
return /* @__PURE__ */ jsxs14(
|
|
7000
7723
|
"button",
|
|
7001
7724
|
{
|
|
7002
7725
|
type: "button",
|
|
7003
7726
|
className: "hw-whats-new-item",
|
|
7004
7727
|
onClick: () => onSelect(entry.slug, entry.tabId),
|
|
7005
7728
|
children: [
|
|
7006
|
-
badgeField && entry.customFields[badgeField] && /* @__PURE__ */
|
|
7007
|
-
/* @__PURE__ */
|
|
7008
|
-
entry.publishedAt && /* @__PURE__ */
|
|
7729
|
+
badgeField && entry.customFields[badgeField] && /* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-item-top", children: [
|
|
7730
|
+
/* @__PURE__ */ jsx19("span", { className: "hw-whats-new-badge", children: entry.customFields[badgeField] }),
|
|
7731
|
+
entry.publishedAt && /* @__PURE__ */ jsx19("span", { className: "hw-whats-new-time", children: formatRelativeTime(entry.publishedAt) })
|
|
7009
7732
|
] }),
|
|
7010
|
-
/* @__PURE__ */
|
|
7733
|
+
/* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-item-title", children: [
|
|
7011
7734
|
entry.title,
|
|
7012
|
-
!badgeField && entry.publishedAt && /* @__PURE__ */
|
|
7735
|
+
!badgeField && entry.publishedAt && /* @__PURE__ */ jsx19("span", { className: "hw-whats-new-time-inline", children: formatRelativeTime(entry.publishedAt) })
|
|
7013
7736
|
] }),
|
|
7014
7737
|
entry.body && (() => {
|
|
7015
7738
|
const clean = stripMarkdown(entry.body);
|
|
7016
|
-
return /* @__PURE__ */
|
|
7739
|
+
return /* @__PURE__ */ jsx19("div", { className: "hw-whats-new-item-body", children: clean.length > 80 ? `${clean.slice(0, 80)}\u2026` : clean });
|
|
7017
7740
|
})()
|
|
7018
7741
|
]
|
|
7019
7742
|
},
|
|
@@ -7046,10 +7769,10 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
7046
7769
|
}
|
|
7047
7770
|
|
|
7048
7771
|
// 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');
|
|
7772
|
+
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-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 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
7773
|
|
|
7051
7774
|
// src/helpway-widget.tsx
|
|
7052
|
-
import { jsx as
|
|
7775
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
7053
7776
|
function HelpwayWidget({
|
|
7054
7777
|
apiKey,
|
|
7055
7778
|
apiUrl,
|
|
@@ -7071,7 +7794,7 @@ function HelpwayWidget({
|
|
|
7071
7794
|
src
|
|
7072
7795
|
}) {
|
|
7073
7796
|
const resolvedApiUrl = apiUrl ?? (src ? src.replace(/\/widget\.js$/, "") : void 0);
|
|
7074
|
-
return /* @__PURE__ */
|
|
7797
|
+
return /* @__PURE__ */ jsx20(
|
|
7075
7798
|
SupportProvider,
|
|
7076
7799
|
{
|
|
7077
7800
|
apiKey,
|
|
@@ -7085,7 +7808,7 @@ function HelpwayWidget({
|
|
|
7085
7808
|
onClose,
|
|
7086
7809
|
onUnreadChange,
|
|
7087
7810
|
theme,
|
|
7088
|
-
children: /* @__PURE__ */
|
|
7811
|
+
children: /* @__PURE__ */ jsx20(AgentAvatarProvider, { value: agentAvatar ?? null, children: /* @__PURE__ */ jsx20(
|
|
7089
7812
|
DefaultWidget,
|
|
7090
7813
|
{
|
|
7091
7814
|
hideLauncher,
|