@helpway/react 0.17.0 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +9 -1
- package/dist/index.js +646 -567
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
- package/src/themed/styles.css +52 -0
package/dist/index.js
CHANGED
|
@@ -55,7 +55,11 @@ function createWidgetClient(config) {
|
|
|
55
55
|
headers() {
|
|
56
56
|
return {
|
|
57
57
|
"X-Public-Key": config.apiKey,
|
|
58
|
-
"X-Visitor-Id": getOrCreateVisitorId(config.apiKey)
|
|
58
|
+
"X-Visitor-Id": getOrCreateVisitorId(config.apiKey),
|
|
59
|
+
/* Only when it is not the default. A header on every web
|
|
60
|
+
request to say "web" is a byte per call to tell the server
|
|
61
|
+
what it already assumes. */
|
|
62
|
+
...config.surface === "mobile" ? { "X-Visitor-Surface": "mobile" } : {}
|
|
59
63
|
};
|
|
60
64
|
},
|
|
61
65
|
fetch(url, options) {
|
|
@@ -66,6 +70,9 @@ function createWidgetClient(config) {
|
|
|
66
70
|
});
|
|
67
71
|
}
|
|
68
72
|
|
|
73
|
+
// ../types/src/visitor.ts
|
|
74
|
+
var ONLINE_WINDOW_MS = 5 * 6e4;
|
|
75
|
+
|
|
69
76
|
// ../types/src/model-registry.ts
|
|
70
77
|
var AI_MODELS = {
|
|
71
78
|
"openai/gpt-5.5": {
|
|
@@ -373,8 +380,12 @@ var DOC_NAV_ICON_MAP = Object.fromEntries(
|
|
|
373
380
|
DOC_NAV_ICONS.map((i) => [i.name, i])
|
|
374
381
|
);
|
|
375
382
|
|
|
383
|
+
// ../types/src/upload.ts
|
|
384
|
+
var MAX_FILE_SIZE = 10 * 1024 * 1024;
|
|
385
|
+
var MAX_BASE64_LENGTH = Math.ceil(MAX_FILE_SIZE * 1.37);
|
|
386
|
+
|
|
376
387
|
// ../widget-core/src/version.ts
|
|
377
|
-
var SDK_VERSION = "0.17.
|
|
388
|
+
var SDK_VERSION = "0.17.1".length > 0 ? "0.17.1" : "dev";
|
|
378
389
|
|
|
379
390
|
// ../widget-core/src/ws.ts
|
|
380
391
|
var WebSocketManager = class {
|
|
@@ -859,6 +870,7 @@ function latestAssignee(items) {
|
|
|
859
870
|
return null;
|
|
860
871
|
}
|
|
861
872
|
var AI_INDICATOR_MAX_MS = 45e3;
|
|
873
|
+
var TYPING_IDLE_MS = 5e3;
|
|
862
874
|
function createWidgetStore() {
|
|
863
875
|
const indicatorWatchdogs = /* @__PURE__ */ new Map();
|
|
864
876
|
const clearWatchdog = (conversationId) => {
|
|
@@ -868,6 +880,14 @@ function createWidgetStore() {
|
|
|
868
880
|
indicatorWatchdogs.delete(conversationId);
|
|
869
881
|
}
|
|
870
882
|
};
|
|
883
|
+
const typingTimers = /* @__PURE__ */ new Map();
|
|
884
|
+
const clearTypingTimer = (conversationId) => {
|
|
885
|
+
const timer = typingTimers.get(conversationId);
|
|
886
|
+
if (timer !== void 0) {
|
|
887
|
+
clearTimeout(timer);
|
|
888
|
+
typingTimers.delete(conversationId);
|
|
889
|
+
}
|
|
890
|
+
};
|
|
871
891
|
const store = createStore((set, get) => ({
|
|
872
892
|
// Initial state
|
|
873
893
|
isReady: false,
|
|
@@ -1027,6 +1047,7 @@ function createWidgetStore() {
|
|
|
1027
1047
|
});
|
|
1028
1048
|
},
|
|
1029
1049
|
remapConversationId(oldId, newId) {
|
|
1050
|
+
clearTypingTimer(oldId);
|
|
1030
1051
|
if (indicatorWatchdogs.has(oldId)) {
|
|
1031
1052
|
clearWatchdog(oldId);
|
|
1032
1053
|
indicatorWatchdogs.set(
|
|
@@ -1233,7 +1254,11 @@ function createWidgetStore() {
|
|
|
1233
1254
|
},
|
|
1234
1255
|
// ── Content Cache ────────────────────────────────
|
|
1235
1256
|
setContentCache(key, data) {
|
|
1236
|
-
|
|
1257
|
+
set((s) => {
|
|
1258
|
+
const next = new Map(s.contentCache);
|
|
1259
|
+
next.set(key, { data, ts: Date.now() });
|
|
1260
|
+
return { contentCache: next };
|
|
1261
|
+
});
|
|
1237
1262
|
},
|
|
1238
1263
|
// ── Realtime Event Handler ───────────────────────
|
|
1239
1264
|
handleRealtimeEvent(event) {
|
|
@@ -1309,10 +1334,15 @@ function createWidgetStore() {
|
|
|
1309
1334
|
case WsEventType.ConversationTyping: {
|
|
1310
1335
|
if (!event.visitorId) {
|
|
1311
1336
|
state.setTyping(event.conversationId, event.isTyping);
|
|
1337
|
+
clearTypingTimer(event.conversationId);
|
|
1312
1338
|
if (event.isTyping) {
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1339
|
+
typingTimers.set(
|
|
1340
|
+
event.conversationId,
|
|
1341
|
+
setTimeout(() => {
|
|
1342
|
+
typingTimers.delete(event.conversationId);
|
|
1343
|
+
state.setTyping(event.conversationId, false);
|
|
1344
|
+
}, TYPING_IDLE_MS)
|
|
1345
|
+
);
|
|
1316
1346
|
}
|
|
1317
1347
|
}
|
|
1318
1348
|
break;
|
|
@@ -1396,7 +1426,7 @@ function installCallable(methods) {
|
|
|
1396
1426
|
return callable;
|
|
1397
1427
|
}
|
|
1398
1428
|
function createHelpwayAPI(deps) {
|
|
1399
|
-
const { store, emitter, identify, apiKey } = deps;
|
|
1429
|
+
const { store, emitter, identify, apiKey, apiUrl } = deps;
|
|
1400
1430
|
return {
|
|
1401
1431
|
open() {
|
|
1402
1432
|
store.getState().setOpen(true);
|
|
@@ -1431,6 +1461,14 @@ function createHelpwayAPI(deps) {
|
|
|
1431
1461
|
if (typeof document !== "undefined") {
|
|
1432
1462
|
document.cookie = "hw_visitor=; Path=/; Max-Age=0";
|
|
1433
1463
|
}
|
|
1464
|
+
if (apiUrl && typeof fetch !== "undefined") {
|
|
1465
|
+
void fetch(`${apiUrl.replace(/\/+$/, "")}/widget/reset-visitor`, {
|
|
1466
|
+
method: "POST",
|
|
1467
|
+
credentials: "include",
|
|
1468
|
+
headers: { "x-public-key": apiKey }
|
|
1469
|
+
}).catch(() => {
|
|
1470
|
+
});
|
|
1471
|
+
}
|
|
1434
1472
|
},
|
|
1435
1473
|
identify,
|
|
1436
1474
|
newConversation(prefill) {
|
|
@@ -1650,6 +1688,7 @@ function useWidgetClient() {
|
|
|
1650
1688
|
function SupportProvider({
|
|
1651
1689
|
apiKey,
|
|
1652
1690
|
apiUrl,
|
|
1691
|
+
surface,
|
|
1653
1692
|
locale,
|
|
1654
1693
|
initialConversationId,
|
|
1655
1694
|
deepLinkToken,
|
|
@@ -1671,7 +1710,8 @@ function SupportProvider({
|
|
|
1671
1710
|
const resolvedApiUrl = apiUrl ?? inferApiUrl();
|
|
1672
1711
|
const client2 = createWidgetClient({
|
|
1673
1712
|
apiUrl: resolvedApiUrl,
|
|
1674
|
-
apiKey
|
|
1713
|
+
apiKey,
|
|
1714
|
+
surface
|
|
1675
1715
|
});
|
|
1676
1716
|
const store2 = createWidgetStore();
|
|
1677
1717
|
const emitter2 = new WidgetEventEmitter();
|
|
@@ -1700,7 +1740,7 @@ function SupportProvider({
|
|
|
1700
1740
|
console.error("[Helpway] identify failed:", err);
|
|
1701
1741
|
}
|
|
1702
1742
|
};
|
|
1703
|
-
const api2 = createHelpwayAPI({ store: store2, emitter: emitter2, identify: identify2, apiKey });
|
|
1743
|
+
const api2 = createHelpwayAPI({ store: store2, emitter: emitter2, identify: identify2, apiKey, apiUrl: resolvedApiUrl });
|
|
1704
1744
|
initRef.current = { client: client2, store: store2, ws: ws2, identify: identify2, api: api2, emitter: emitter2 };
|
|
1705
1745
|
}
|
|
1706
1746
|
const { client, store, ws, identify, api, emitter } = initRef.current;
|
|
@@ -2083,7 +2123,7 @@ function inferApiUrl() {
|
|
|
2083
2123
|
}
|
|
2084
2124
|
|
|
2085
2125
|
// src/themed/default-widget.tsx
|
|
2086
|
-
import { createContext as createContext2, useCallback as
|
|
2126
|
+
import { createContext as createContext2, useCallback as useCallback14, useContext as useContext2, useEffect as useEffect16, useRef as useRef17, useState as useState16 } from "react";
|
|
2087
2127
|
|
|
2088
2128
|
// src/hooks/use-announcements.ts
|
|
2089
2129
|
import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
|
|
@@ -2252,7 +2292,7 @@ function useAwaitingReply() {
|
|
|
2252
2292
|
}
|
|
2253
2293
|
|
|
2254
2294
|
// src/hooks/use-composer.ts
|
|
2255
|
-
import { useCallback as useCallback3, useState as useState2 } from "react";
|
|
2295
|
+
import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
|
|
2256
2296
|
function currentPagePayload() {
|
|
2257
2297
|
if (typeof window === "undefined") return {};
|
|
2258
2298
|
const url = window.location.href;
|
|
@@ -2260,7 +2300,7 @@ function currentPagePayload() {
|
|
|
2260
2300
|
return { page: { url, title: document.title || window.location.pathname } };
|
|
2261
2301
|
}
|
|
2262
2302
|
var MAX_ATTACHMENTS = 10;
|
|
2263
|
-
var
|
|
2303
|
+
var MAX_FILE_SIZE2 = 10 * 1024 * 1024;
|
|
2264
2304
|
var ACCEPTED_TYPES = [
|
|
2265
2305
|
"image/png",
|
|
2266
2306
|
"image/jpeg",
|
|
@@ -2282,6 +2322,19 @@ function useComposer(boundConversationId) {
|
|
|
2282
2322
|
const [text, setText] = useState2("");
|
|
2283
2323
|
const [isSubmitting, setIsSubmitting] = useState2(false);
|
|
2284
2324
|
const [attachments, setAttachments] = useState2([]);
|
|
2325
|
+
const liveUrls = useRef3(/* @__PURE__ */ new Set());
|
|
2326
|
+
useEffect3(() => {
|
|
2327
|
+
const urls = liveUrls.current;
|
|
2328
|
+
return () => {
|
|
2329
|
+
for (const url of urls) URL.revokeObjectURL(url);
|
|
2330
|
+
urls.clear();
|
|
2331
|
+
};
|
|
2332
|
+
}, []);
|
|
2333
|
+
const revoke = useCallback3((url) => {
|
|
2334
|
+
if (!url) return;
|
|
2335
|
+
URL.revokeObjectURL(url);
|
|
2336
|
+
liveUrls.current.delete(url);
|
|
2337
|
+
}, []);
|
|
2285
2338
|
const [sendError, setSendError] = useState2(null);
|
|
2286
2339
|
const [emailGateConvId, setEmailGateConvId] = useState2(null);
|
|
2287
2340
|
const addFiles = useCallback3(
|
|
@@ -2290,10 +2343,15 @@ function useComposer(boundConversationId) {
|
|
|
2290
2343
|
const remaining = MAX_ATTACHMENTS - attachments.length;
|
|
2291
2344
|
const toAdd = files.slice(0, remaining);
|
|
2292
2345
|
if (toAdd.length === 0) return;
|
|
2346
|
+
const makePreviewUrl = (file) => {
|
|
2347
|
+
const url = URL.createObjectURL(file);
|
|
2348
|
+
liveUrls.current.add(url);
|
|
2349
|
+
return url;
|
|
2350
|
+
};
|
|
2293
2351
|
const pending = toAdd.map((file) => ({
|
|
2294
2352
|
id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
|
2295
2353
|
file,
|
|
2296
|
-
previewUrl: file.type.startsWith("image/") ?
|
|
2354
|
+
previewUrl: file.type.startsWith("image/") ? makePreviewUrl(file) : null,
|
|
2297
2355
|
isUploading: true,
|
|
2298
2356
|
error: null,
|
|
2299
2357
|
part: null
|
|
@@ -2301,7 +2359,7 @@ function useComposer(boundConversationId) {
|
|
|
2301
2359
|
setAttachments((prev) => [...prev, ...pending]);
|
|
2302
2360
|
for (const item of pending) {
|
|
2303
2361
|
try {
|
|
2304
|
-
if (item.file.size >
|
|
2362
|
+
if (item.file.size > MAX_FILE_SIZE2) {
|
|
2305
2363
|
throw new Error(t("widget.file_too_large"));
|
|
2306
2364
|
}
|
|
2307
2365
|
const base64 = await fileToBase64(item.file);
|
|
@@ -2327,13 +2385,13 @@ function useComposer(boundConversationId) {
|
|
|
2327
2385
|
},
|
|
2328
2386
|
[conversationId, attachments.length, client]
|
|
2329
2387
|
);
|
|
2330
|
-
const removeAttachment = useCallback3(
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2388
|
+
const removeAttachment = useCallback3(
|
|
2389
|
+
(id) => {
|
|
2390
|
+
revoke(attachments.find((a) => a.id === id)?.previewUrl);
|
|
2391
|
+
setAttachments((prev) => prev.filter((a) => a.id !== id));
|
|
2392
|
+
},
|
|
2393
|
+
[attachments, revoke]
|
|
2394
|
+
);
|
|
2337
2395
|
const submit = useCallback3(
|
|
2338
2396
|
async (override) => {
|
|
2339
2397
|
const conversationId2 = override?.conversationId ?? boundConversationId;
|
|
@@ -2432,9 +2490,7 @@ function useComposer(boundConversationId) {
|
|
|
2432
2490
|
});
|
|
2433
2491
|
store.getState().replaceMessage(conversationId2, optimisticId, result.item);
|
|
2434
2492
|
}
|
|
2435
|
-
for (const a of attachmentsSnapshot)
|
|
2436
|
-
if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
|
|
2437
|
-
}
|
|
2493
|
+
for (const a of attachmentsSnapshot) revoke(a.previewUrl);
|
|
2438
2494
|
} catch (err) {
|
|
2439
2495
|
console.error("[useComposer] Send failed:", err);
|
|
2440
2496
|
store.getState().removeMessage(conversationId2, optimisticId);
|
|
@@ -2478,16 +2534,16 @@ function fileToBase64(file) {
|
|
|
2478
2534
|
}
|
|
2479
2535
|
|
|
2480
2536
|
// src/hooks/use-conversations.ts
|
|
2481
|
-
import { useCallback as useCallback4, useEffect as
|
|
2537
|
+
import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
|
|
2482
2538
|
function useConversations() {
|
|
2483
2539
|
const { client, store, getSourceLocale } = useWidgetContext();
|
|
2484
2540
|
const conversations = useWidgetStore((s) => s.conversations);
|
|
2485
2541
|
const setActiveConversation = useWidgetStore((s) => s.setActiveConversation);
|
|
2486
2542
|
const [isCreating, setIsCreating] = useState3(false);
|
|
2487
|
-
const clientRef =
|
|
2488
|
-
const storeRef =
|
|
2489
|
-
const getSourceLocaleRef =
|
|
2490
|
-
|
|
2543
|
+
const clientRef = useRef4(client);
|
|
2544
|
+
const storeRef = useRef4(store);
|
|
2545
|
+
const getSourceLocaleRef = useRef4(getSourceLocale);
|
|
2546
|
+
useEffect4(() => {
|
|
2491
2547
|
clientRef.current = client;
|
|
2492
2548
|
storeRef.current = store;
|
|
2493
2549
|
getSourceLocaleRef.current = getSourceLocale;
|
|
@@ -2588,10 +2644,10 @@ function useHeaderIdentity() {
|
|
|
2588
2644
|
}
|
|
2589
2645
|
|
|
2590
2646
|
// src/hooks/use-i18n.ts
|
|
2591
|
-
import { useEffect as
|
|
2647
|
+
import { useEffect as useEffect5, useState as useState4 } from "react";
|
|
2592
2648
|
function useI18n() {
|
|
2593
2649
|
const [rev, setRev] = useState4(() => getI18nRevision());
|
|
2594
|
-
|
|
2650
|
+
useEffect5(() => {
|
|
2595
2651
|
return onLocaleChange(() => {
|
|
2596
2652
|
setRev(getI18nRevision());
|
|
2597
2653
|
});
|
|
@@ -2600,7 +2656,7 @@ function useI18n() {
|
|
|
2600
2656
|
}
|
|
2601
2657
|
|
|
2602
2658
|
// src/hooks/use-presence.ts
|
|
2603
|
-
import { useCallback as useCallback5, useRef as
|
|
2659
|
+
import { useCallback as useCallback5, useRef as useRef5 } from "react";
|
|
2604
2660
|
function usePresence(conversationId) {
|
|
2605
2661
|
const { ws } = useWidgetContext();
|
|
2606
2662
|
const isTyping = useWidgetStore(
|
|
@@ -2609,8 +2665,8 @@ function usePresence(conversationId) {
|
|
|
2609
2665
|
const isAiProcessing = useWidgetStore(
|
|
2610
2666
|
(s) => conversationId ? s.aiProcessing.get(conversationId) ?? false : false
|
|
2611
2667
|
);
|
|
2612
|
-
const typingTimer =
|
|
2613
|
-
const isSendingTyping =
|
|
2668
|
+
const typingTimer = useRef5(null);
|
|
2669
|
+
const isSendingTyping = useRef5(false);
|
|
2614
2670
|
const setTyping = useCallback5(
|
|
2615
2671
|
(typing) => {
|
|
2616
2672
|
if (!conversationId) return;
|
|
@@ -2637,7 +2693,7 @@ function usePresence(conversationId) {
|
|
|
2637
2693
|
}
|
|
2638
2694
|
|
|
2639
2695
|
// src/hooks/use-timeline.ts
|
|
2640
|
-
import { useCallback as useCallback6, useEffect as
|
|
2696
|
+
import { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef6, useState as useState5 } from "react";
|
|
2641
2697
|
var EMPTY_ITEMS = [];
|
|
2642
2698
|
function useTimeline(conversationId) {
|
|
2643
2699
|
const { client, store } = useWidgetContext();
|
|
@@ -2646,14 +2702,14 @@ function useTimeline(conversationId) {
|
|
|
2646
2702
|
);
|
|
2647
2703
|
const [isLoading, setIsLoading] = useState5(false);
|
|
2648
2704
|
const [hasMore, setHasMore] = useState5(false);
|
|
2649
|
-
const cursorRef =
|
|
2650
|
-
const clientRef =
|
|
2651
|
-
const storeRef =
|
|
2652
|
-
|
|
2705
|
+
const cursorRef = useRef6(void 0);
|
|
2706
|
+
const clientRef = useRef6(client);
|
|
2707
|
+
const storeRef = useRef6(store);
|
|
2708
|
+
useEffect6(() => {
|
|
2653
2709
|
clientRef.current = client;
|
|
2654
2710
|
storeRef.current = store;
|
|
2655
2711
|
});
|
|
2656
|
-
|
|
2712
|
+
useEffect6(() => {
|
|
2657
2713
|
if (!conversationId) return;
|
|
2658
2714
|
if (conversationId.startsWith("temp-")) return;
|
|
2659
2715
|
let cancelled = false;
|
|
@@ -2737,10 +2793,10 @@ function useWidget() {
|
|
|
2737
2793
|
}
|
|
2738
2794
|
|
|
2739
2795
|
// src/shell/docked-bar.tsx
|
|
2740
|
-
import { useCallback as useCallback8, useEffect as
|
|
2796
|
+
import { useCallback as useCallback8, useEffect as useEffect7, useRef as useRef8, useState as useState7 } from "react";
|
|
2741
2797
|
|
|
2742
2798
|
// src/themed/composer.tsx
|
|
2743
|
-
import { useCallback as useCallback7, useRef as
|
|
2799
|
+
import { useCallback as useCallback7, useRef as useRef7, useState as useState6 } from "react";
|
|
2744
2800
|
|
|
2745
2801
|
// src/themed/icons.tsx
|
|
2746
2802
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
@@ -2964,25 +3020,6 @@ function StarIcon({ size = 24, ...props }) {
|
|
|
2964
3020
|
}
|
|
2965
3021
|
);
|
|
2966
3022
|
}
|
|
2967
|
-
function DotsIcon({ size = 24, ...props }) {
|
|
2968
|
-
return /* @__PURE__ */ jsxs(
|
|
2969
|
-
"svg",
|
|
2970
|
-
{
|
|
2971
|
-
width: size,
|
|
2972
|
-
height: size,
|
|
2973
|
-
viewBox: "0 0 24 24",
|
|
2974
|
-
fill: "none",
|
|
2975
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2976
|
-
"aria-hidden": "true",
|
|
2977
|
-
...props,
|
|
2978
|
-
children: [
|
|
2979
|
-
/* @__PURE__ */ jsx2("circle", { cx: "5", cy: "12", r: "1.7", fill: "currentColor" }),
|
|
2980
|
-
/* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "1.7", fill: "currentColor" }),
|
|
2981
|
-
/* @__PURE__ */ jsx2("circle", { cx: "19", cy: "12", r: "1.7", fill: "currentColor" })
|
|
2982
|
-
]
|
|
2983
|
-
}
|
|
2984
|
-
);
|
|
2985
|
-
}
|
|
2986
3023
|
|
|
2987
3024
|
// src/themed/composer.tsx
|
|
2988
3025
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
@@ -3001,9 +3038,9 @@ function Composer({
|
|
|
3001
3038
|
onRemoveAttachment,
|
|
3002
3039
|
disabled
|
|
3003
3040
|
}) {
|
|
3004
|
-
const ref =
|
|
3005
|
-
const fileInputRef =
|
|
3006
|
-
const supportsFieldSizing =
|
|
3041
|
+
const ref = useRef7(null);
|
|
3042
|
+
const fileInputRef = useRef7(null);
|
|
3043
|
+
const supportsFieldSizing = useRef7(
|
|
3007
3044
|
typeof CSS !== "undefined" && CSS.supports?.("field-sizing", "content")
|
|
3008
3045
|
);
|
|
3009
3046
|
const handleKeyDown = useCallback7(
|
|
@@ -3043,7 +3080,7 @@ function Composer({
|
|
|
3043
3080
|
[onAddFiles]
|
|
3044
3081
|
);
|
|
3045
3082
|
const [isDragging, setIsDragging] = useState6(false);
|
|
3046
|
-
const dragCountRef =
|
|
3083
|
+
const dragCountRef = useRef7(0);
|
|
3047
3084
|
const handleDragEnter = useCallback7((e) => {
|
|
3048
3085
|
e.preventDefault();
|
|
3049
3086
|
dragCountRef.current++;
|
|
@@ -3209,13 +3246,13 @@ function recognitionCtor() {
|
|
|
3209
3246
|
}
|
|
3210
3247
|
function useDictation(onText) {
|
|
3211
3248
|
const [listening, setListening] = useState7(false);
|
|
3212
|
-
const recRef =
|
|
3213
|
-
const onTextRef =
|
|
3214
|
-
|
|
3249
|
+
const recRef = useRef8(null);
|
|
3250
|
+
const onTextRef = useRef8(onText);
|
|
3251
|
+
useEffect7(() => {
|
|
3215
3252
|
onTextRef.current = onText;
|
|
3216
3253
|
}, [onText]);
|
|
3217
3254
|
const [supported] = useState7(() => recognitionCtor() !== null);
|
|
3218
|
-
|
|
3255
|
+
useEffect7(
|
|
3219
3256
|
() => () => {
|
|
3220
3257
|
recRef.current?.stop();
|
|
3221
3258
|
recRef.current = null;
|
|
@@ -3284,9 +3321,9 @@ function DockedBar({
|
|
|
3284
3321
|
leading
|
|
3285
3322
|
}) {
|
|
3286
3323
|
const [focused, setFocused] = useState7(false);
|
|
3287
|
-
const inputRef =
|
|
3288
|
-
const boxRef =
|
|
3289
|
-
const fileInputRef =
|
|
3324
|
+
const inputRef = useRef8(null);
|
|
3325
|
+
const boxRef = useRef8(null);
|
|
3326
|
+
const fileInputRef = useRef8(null);
|
|
3290
3327
|
const { questions: visibleQuestions, dismiss: dismissOffer } = useDismissableOffer(suggestions);
|
|
3291
3328
|
const dictation = useDictation((chunk) => {
|
|
3292
3329
|
const current = inputRef.current?.value ?? value;
|
|
@@ -3302,7 +3339,7 @@ function DockedBar({
|
|
|
3302
3339
|
el.style.height = `${next}px`;
|
|
3303
3340
|
box.dataset.grown = next > GROWN_AT ? "true" : "false";
|
|
3304
3341
|
}, []);
|
|
3305
|
-
|
|
3342
|
+
useEffect7(grow, [grow, value]);
|
|
3306
3343
|
const handleKeyDown = useCallback8(
|
|
3307
3344
|
(event) => {
|
|
3308
3345
|
if (event.key !== "Enter" || event.shiftKey) return;
|
|
@@ -3600,10 +3637,24 @@ function AnnouncementPreviewItem({
|
|
|
3600
3637
|
}
|
|
3601
3638
|
|
|
3602
3639
|
// src/themed/content/content-tab-view.tsx
|
|
3603
|
-
import { useCallback as
|
|
3640
|
+
import { useCallback as useCallback13, useEffect as useEffect11 } from "react";
|
|
3641
|
+
|
|
3642
|
+
// src/hooks/use-content-tab.ts
|
|
3643
|
+
import { useCallback as useCallback10, useEffect as useEffect8, useState as useState10 } from "react";
|
|
3644
|
+
|
|
3645
|
+
// src/hooks/use-mirrored-state.ts
|
|
3646
|
+
import { useCallback as useCallback9, useRef as useRef9, useState as useState9 } from "react";
|
|
3647
|
+
function useMirroredState(initial) {
|
|
3648
|
+
const [value, setValue] = useState9(initial);
|
|
3649
|
+
const ref = useRef9(value);
|
|
3650
|
+
const set = useCallback9((next) => {
|
|
3651
|
+
ref.current = next;
|
|
3652
|
+
setValue(next);
|
|
3653
|
+
}, []);
|
|
3654
|
+
return [value, set, ref];
|
|
3655
|
+
}
|
|
3604
3656
|
|
|
3605
3657
|
// src/hooks/use-content-tab.ts
|
|
3606
|
-
import { useCallback as useCallback9, useEffect as useEffect7, useState as useState9 } from "react";
|
|
3607
3658
|
var EMPTY_TABS2 = [];
|
|
3608
3659
|
function listKey(tabId, lang) {
|
|
3609
3660
|
return `flat:${tabId}:${lang}:list`;
|
|
@@ -3623,22 +3674,22 @@ function useContentTab(tabId) {
|
|
|
3623
3674
|
const tab = contentTabs.find((t2) => t2.id === tabId) ?? null;
|
|
3624
3675
|
const lang = getLocale();
|
|
3625
3676
|
const cache = store.getState().contentCache;
|
|
3626
|
-
const [entries, setEntries] =
|
|
3677
|
+
const [entries, setEntries, entriesRef] = useMirroredState(
|
|
3627
3678
|
() => readCache(cache, listKey(tabId, lang))?.items ?? []
|
|
3628
3679
|
);
|
|
3629
|
-
const [detail, setDetail] =
|
|
3630
|
-
const [isLoading, setIsLoading] =
|
|
3631
|
-
const [isLoadingDetail, setIsLoadingDetail] =
|
|
3632
|
-
const [hasMore, setHasMore] =
|
|
3680
|
+
const [detail, setDetail] = useState10(null);
|
|
3681
|
+
const [isLoading, setIsLoading] = useState10(false);
|
|
3682
|
+
const [isLoadingDetail, setIsLoadingDetail] = useState10(false);
|
|
3683
|
+
const [hasMore, setHasMore] = useState10(
|
|
3633
3684
|
() => readCache(cache, listKey(tabId, lang))?.hasMore ?? false
|
|
3634
3685
|
);
|
|
3635
|
-
const [total, setTotal] =
|
|
3686
|
+
const [total, setTotal] = useState10(
|
|
3636
3687
|
() => readCache(cache, listKey(tabId, lang))?.total ?? 0
|
|
3637
3688
|
);
|
|
3638
|
-
const [page, setPage] =
|
|
3689
|
+
const [page, setPage] = useState10(
|
|
3639
3690
|
() => readCache(cache, listKey(tabId, lang))?.page ?? 1
|
|
3640
3691
|
);
|
|
3641
|
-
const fetchEntries =
|
|
3692
|
+
const fetchEntries = useCallback10(
|
|
3642
3693
|
async (opts) => {
|
|
3643
3694
|
if (!tab) return;
|
|
3644
3695
|
const p = opts?.page ?? 1;
|
|
@@ -3653,18 +3704,16 @@ function useContentTab(tabId) {
|
|
|
3653
3704
|
language: getLocale()
|
|
3654
3705
|
});
|
|
3655
3706
|
if (result.items) {
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
return nextItems;
|
|
3667
|
-
});
|
|
3707
|
+
const nextItems = reset ? result.items : [...entriesRef.current, ...result.items];
|
|
3708
|
+
setEntries(nextItems);
|
|
3709
|
+
if (!opts?.search) {
|
|
3710
|
+
store.getState().setContentCache(listKey(tabId, getLocale()), {
|
|
3711
|
+
items: nextItems,
|
|
3712
|
+
total: result.total,
|
|
3713
|
+
hasMore: result.hasMore,
|
|
3714
|
+
page: p
|
|
3715
|
+
});
|
|
3716
|
+
}
|
|
3668
3717
|
setHasMore(result.hasMore);
|
|
3669
3718
|
setTotal(result.total);
|
|
3670
3719
|
setPage(p);
|
|
@@ -3675,13 +3724,13 @@ function useContentTab(tabId) {
|
|
|
3675
3724
|
setIsLoading(false);
|
|
3676
3725
|
}
|
|
3677
3726
|
},
|
|
3678
|
-
[client, tabId, tab, store]
|
|
3727
|
+
[client, tabId, tab, store, setEntries, entriesRef]
|
|
3679
3728
|
);
|
|
3680
|
-
const loadMore =
|
|
3729
|
+
const loadMore = useCallback10(() => {
|
|
3681
3730
|
if (!hasMore || isLoading) return;
|
|
3682
3731
|
fetchEntries({ page: page + 1 });
|
|
3683
3732
|
}, [fetchEntries, hasMore, isLoading, page]);
|
|
3684
|
-
const fetchDetail =
|
|
3733
|
+
const fetchDetail = useCallback10(
|
|
3685
3734
|
async (slug) => {
|
|
3686
3735
|
if (!tab) return;
|
|
3687
3736
|
const cached = readCache(
|
|
@@ -3702,10 +3751,7 @@ function useContentTab(tabId) {
|
|
|
3702
3751
|
if (result.entry) {
|
|
3703
3752
|
const entry = result.entry;
|
|
3704
3753
|
setDetail(entry);
|
|
3705
|
-
store.getState().setContentCache(
|
|
3706
|
-
detailKey(tabId, getLocale(), slug),
|
|
3707
|
-
entry
|
|
3708
|
-
);
|
|
3754
|
+
store.getState().setContentCache(detailKey(tabId, getLocale(), slug), entry);
|
|
3709
3755
|
}
|
|
3710
3756
|
} catch (err) {
|
|
3711
3757
|
console.error("[useContentTab] detail error:", err);
|
|
@@ -3715,10 +3761,10 @@ function useContentTab(tabId) {
|
|
|
3715
3761
|
},
|
|
3716
3762
|
[client, tabId, tab, store]
|
|
3717
3763
|
);
|
|
3718
|
-
const clearDetail =
|
|
3764
|
+
const clearDetail = useCallback10(() => {
|
|
3719
3765
|
setDetail(null);
|
|
3720
3766
|
}, []);
|
|
3721
|
-
|
|
3767
|
+
useEffect8(() => {
|
|
3722
3768
|
if (tab && entries.length === 0) {
|
|
3723
3769
|
fetchEntries({ page: 1, reset: true });
|
|
3724
3770
|
}
|
|
@@ -3739,7 +3785,7 @@ function useContentTab(tabId) {
|
|
|
3739
3785
|
}
|
|
3740
3786
|
|
|
3741
3787
|
// src/themed/content/simple-markdown.tsx
|
|
3742
|
-
import { useEffect as
|
|
3788
|
+
import { useEffect as useEffect9, useRef as useRef10 } from "react";
|
|
3743
3789
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
3744
3790
|
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>`;
|
|
3745
3791
|
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>`;
|
|
@@ -3854,9 +3900,9 @@ function MarkdownContent({
|
|
|
3854
3900
|
bodyMarkdown,
|
|
3855
3901
|
className
|
|
3856
3902
|
}) {
|
|
3857
|
-
const rootRef =
|
|
3903
|
+
const rootRef = useRef10(null);
|
|
3858
3904
|
const html = bodyHtml ?? (bodyMarkdown ? renderMarkdown(bodyMarkdown) : "");
|
|
3859
|
-
|
|
3905
|
+
useEffect9(() => {
|
|
3860
3906
|
const root = rootRef.current;
|
|
3861
3907
|
if (!root) return;
|
|
3862
3908
|
const isWhitespaceOnly = (el) => {
|
|
@@ -3875,7 +3921,7 @@ function MarkdownContent({
|
|
|
3875
3921
|
};
|
|
3876
3922
|
removeEmpties();
|
|
3877
3923
|
}, [html]);
|
|
3878
|
-
|
|
3924
|
+
useEffect9(() => {
|
|
3879
3925
|
const root = rootRef.current;
|
|
3880
3926
|
if (!root) return;
|
|
3881
3927
|
const handler = (e) => {
|
|
@@ -4005,7 +4051,7 @@ function SkeletonSection({
|
|
|
4005
4051
|
}
|
|
4006
4052
|
|
|
4007
4053
|
// src/themed/content/content-list-view.tsx
|
|
4008
|
-
import { useCallback as
|
|
4054
|
+
import { useCallback as useCallback11, useRef as useRef11, useState as useState11 } from "react";
|
|
4009
4055
|
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
4010
4056
|
function ContentListView({
|
|
4011
4057
|
entries,
|
|
@@ -4017,9 +4063,9 @@ function ContentListView({
|
|
|
4017
4063
|
searchPlaceholder,
|
|
4018
4064
|
display
|
|
4019
4065
|
}) {
|
|
4020
|
-
const [searchText, setSearchText] =
|
|
4021
|
-
const debounceRef =
|
|
4022
|
-
const handleSearch =
|
|
4066
|
+
const [searchText, setSearchText] = useState11("");
|
|
4067
|
+
const debounceRef = useRef11(void 0);
|
|
4068
|
+
const handleSearch = useCallback11(
|
|
4023
4069
|
(value) => {
|
|
4024
4070
|
setSearchText(value);
|
|
4025
4071
|
if (!onSearch) return;
|
|
@@ -4099,10 +4145,10 @@ function ContentEntryCard({
|
|
|
4099
4145
|
}
|
|
4100
4146
|
|
|
4101
4147
|
// src/themed/content/grouped-content-tab-view.tsx
|
|
4102
|
-
import { useEffect as
|
|
4148
|
+
import { useEffect as useEffect10, useRef as useRef13 } from "react";
|
|
4103
4149
|
|
|
4104
4150
|
// src/hooks/use-grouped-content-tab.ts
|
|
4105
|
-
import { useCallback as
|
|
4151
|
+
import { useCallback as useCallback12, useRef as useRef12, useState as useState12 } from "react";
|
|
4106
4152
|
var EMPTY_TABS3 = [];
|
|
4107
4153
|
function categoriesKey(tabId, lang) {
|
|
4108
4154
|
return `grouped:${tabId}:${lang}:categories`;
|
|
@@ -4126,17 +4172,17 @@ function useGroupedContentTab(tabId) {
|
|
|
4126
4172
|
const lang = getLocale();
|
|
4127
4173
|
const cache = store.getState().contentCache;
|
|
4128
4174
|
const cachedCategories = readCache2(cache, categoriesKey(tabId, lang));
|
|
4129
|
-
const [categories, setCategories] =
|
|
4130
|
-
const [isCategoriesLoading, setIsCategoriesLoading] =
|
|
4131
|
-
const [items, setItems] =
|
|
4132
|
-
const [isItemsLoading, setIsItemsLoading] =
|
|
4133
|
-
const [itemsHasMore, setItemsHasMore] =
|
|
4134
|
-
const itemsPageRef =
|
|
4135
|
-
const [detail, setDetail] =
|
|
4136
|
-
const [isLoadingDetail, setIsLoadingDetail] =
|
|
4137
|
-
const [activeCategory, setActiveCategory] =
|
|
4138
|
-
const allCategoriesRef =
|
|
4139
|
-
const fetchCategories =
|
|
4175
|
+
const [categories, setCategories] = useState12(cachedCategories ?? []);
|
|
4176
|
+
const [isCategoriesLoading, setIsCategoriesLoading] = useState12(false);
|
|
4177
|
+
const [items, setItems, itemsRef] = useMirroredState([]);
|
|
4178
|
+
const [isItemsLoading, setIsItemsLoading] = useState12(false);
|
|
4179
|
+
const [itemsHasMore, setItemsHasMore] = useState12(false);
|
|
4180
|
+
const itemsPageRef = useRef12(1);
|
|
4181
|
+
const [detail, setDetail] = useState12(null);
|
|
4182
|
+
const [isLoadingDetail, setIsLoadingDetail] = useState12(false);
|
|
4183
|
+
const [activeCategory, setActiveCategory] = useState12(null);
|
|
4184
|
+
const allCategoriesRef = useRef12(cachedCategories ?? []);
|
|
4185
|
+
const fetchCategories = useCallback12(async () => {
|
|
4140
4186
|
if (!tab) return;
|
|
4141
4187
|
setIsCategoriesLoading(true);
|
|
4142
4188
|
try {
|
|
@@ -4157,12 +4203,12 @@ function useGroupedContentTab(tabId) {
|
|
|
4157
4203
|
setIsCategoriesLoading(false);
|
|
4158
4204
|
}
|
|
4159
4205
|
}, [client, tabId, tab, store]);
|
|
4160
|
-
const initFetch =
|
|
4206
|
+
const initFetch = useCallback12(() => {
|
|
4161
4207
|
if (tab && categories.length === 0) {
|
|
4162
4208
|
fetchCategories();
|
|
4163
4209
|
}
|
|
4164
4210
|
}, [fetchCategories, tab, categories.length]);
|
|
4165
|
-
const fetchItems =
|
|
4211
|
+
const fetchItems = useCallback12(
|
|
4166
4212
|
async (opts) => {
|
|
4167
4213
|
if (!tab?.itemsModelSlug) return;
|
|
4168
4214
|
const p = opts?.page ?? 1;
|
|
@@ -4179,16 +4225,15 @@ function useGroupedContentTab(tabId) {
|
|
|
4179
4225
|
language: getLocale()
|
|
4180
4226
|
});
|
|
4181
4227
|
if (result.items) {
|
|
4182
|
-
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
}
|
|
4190
|
-
|
|
4191
|
-
});
|
|
4228
|
+
const nextItems = reset ? result.items : [...itemsRef.current, ...result.items];
|
|
4229
|
+
setItems(nextItems);
|
|
4230
|
+
if (!opts?.search && opts?.groupSlug) {
|
|
4231
|
+
store.getState().setContentCache(itemsKey(tabId, getLocale(), opts.groupSlug), {
|
|
4232
|
+
items: nextItems,
|
|
4233
|
+
hasMore: result.hasMore,
|
|
4234
|
+
page: p
|
|
4235
|
+
});
|
|
4236
|
+
}
|
|
4192
4237
|
setItemsHasMore(result.hasMore);
|
|
4193
4238
|
itemsPageRef.current = p;
|
|
4194
4239
|
}
|
|
@@ -4198,9 +4243,9 @@ function useGroupedContentTab(tabId) {
|
|
|
4198
4243
|
setIsItemsLoading(false);
|
|
4199
4244
|
}
|
|
4200
4245
|
},
|
|
4201
|
-
[client, tabId, tab, store]
|
|
4246
|
+
[client, tabId, tab, store, setItems, itemsRef]
|
|
4202
4247
|
);
|
|
4203
|
-
const selectCategory =
|
|
4248
|
+
const selectCategory = useCallback12(
|
|
4204
4249
|
(category) => {
|
|
4205
4250
|
setActiveCategory(category);
|
|
4206
4251
|
setDetail(null);
|
|
@@ -4217,16 +4262,16 @@ function useGroupedContentTab(tabId) {
|
|
|
4217
4262
|
setItems([]);
|
|
4218
4263
|
fetchItems({ page: 1, reset: true, groupSlug: category.slug });
|
|
4219
4264
|
},
|
|
4220
|
-
[fetchItems, store, tabId]
|
|
4265
|
+
[fetchItems, store, tabId, setItems]
|
|
4221
4266
|
);
|
|
4222
|
-
const loadMoreItems =
|
|
4267
|
+
const loadMoreItems = useCallback12(() => {
|
|
4223
4268
|
if (!itemsHasMore || isItemsLoading || !activeCategory) return;
|
|
4224
4269
|
fetchItems({
|
|
4225
4270
|
page: itemsPageRef.current + 1,
|
|
4226
4271
|
groupSlug: activeCategory.slug
|
|
4227
4272
|
});
|
|
4228
4273
|
}, [fetchItems, itemsHasMore, isItemsLoading, activeCategory]);
|
|
4229
|
-
const searchItems =
|
|
4274
|
+
const searchItems = useCallback12(
|
|
4230
4275
|
(query) => {
|
|
4231
4276
|
setItems([]);
|
|
4232
4277
|
fetchItems({
|
|
@@ -4236,9 +4281,9 @@ function useGroupedContentTab(tabId) {
|
|
|
4236
4281
|
groupSlug: query ? void 0 : activeCategory?.slug
|
|
4237
4282
|
});
|
|
4238
4283
|
},
|
|
4239
|
-
[fetchItems, activeCategory]
|
|
4284
|
+
[fetchItems, activeCategory, setItems]
|
|
4240
4285
|
);
|
|
4241
|
-
const fetchDetail =
|
|
4286
|
+
const fetchDetail = useCallback12(
|
|
4242
4287
|
async (slug) => {
|
|
4243
4288
|
if (!tab?.itemsModelSlug) return;
|
|
4244
4289
|
const cached = readCache2(
|
|
@@ -4260,10 +4305,7 @@ function useGroupedContentTab(tabId) {
|
|
|
4260
4305
|
if (result.entry) {
|
|
4261
4306
|
const entry = result.entry;
|
|
4262
4307
|
setDetail(entry);
|
|
4263
|
-
store.getState().setContentCache(
|
|
4264
|
-
detailKey2(tabId, getLocale(), slug),
|
|
4265
|
-
entry
|
|
4266
|
-
);
|
|
4308
|
+
store.getState().setContentCache(detailKey2(tabId, getLocale(), slug), entry);
|
|
4267
4309
|
}
|
|
4268
4310
|
} catch (err) {
|
|
4269
4311
|
console.error("[useGroupedContentTab] detail error:", err);
|
|
@@ -4273,29 +4315,26 @@ function useGroupedContentTab(tabId) {
|
|
|
4273
4315
|
},
|
|
4274
4316
|
[client, tabId, tab, store]
|
|
4275
4317
|
);
|
|
4276
|
-
const searchCategories =
|
|
4277
|
-
(query)
|
|
4278
|
-
|
|
4279
|
-
|
|
4280
|
-
|
|
4281
|
-
|
|
4282
|
-
|
|
4283
|
-
|
|
4284
|
-
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
|
|
4288
|
-
|
|
4289
|
-
[]
|
|
4290
|
-
);
|
|
4291
|
-
const clearDetail = useCallback11(() => {
|
|
4318
|
+
const searchCategories = useCallback12((query) => {
|
|
4319
|
+
if (!query.trim()) {
|
|
4320
|
+
setCategories(allCategoriesRef.current);
|
|
4321
|
+
return;
|
|
4322
|
+
}
|
|
4323
|
+
const q = query.toLowerCase();
|
|
4324
|
+
setCategories(
|
|
4325
|
+
allCategoriesRef.current.filter(
|
|
4326
|
+
(cat) => cat.title.toLowerCase().includes(q) || (cat.customFields.description ?? "").toLowerCase().includes(q)
|
|
4327
|
+
)
|
|
4328
|
+
);
|
|
4329
|
+
}, []);
|
|
4330
|
+
const clearDetail = useCallback12(() => {
|
|
4292
4331
|
setDetail(null);
|
|
4293
4332
|
}, []);
|
|
4294
|
-
const clearCategory =
|
|
4333
|
+
const clearCategory = useCallback12(() => {
|
|
4295
4334
|
setActiveCategory(null);
|
|
4296
4335
|
setItems([]);
|
|
4297
4336
|
setDetail(null);
|
|
4298
|
-
}, []);
|
|
4337
|
+
}, [setItems]);
|
|
4299
4338
|
return {
|
|
4300
4339
|
tab,
|
|
4301
4340
|
categories,
|
|
@@ -4343,16 +4382,16 @@ function GroupedContentTabView({
|
|
|
4343
4382
|
fetchDetail,
|
|
4344
4383
|
clearCategory
|
|
4345
4384
|
} = useGroupedContentTab(tab.id);
|
|
4346
|
-
|
|
4385
|
+
useEffect10(() => {
|
|
4347
4386
|
initFetch();
|
|
4348
4387
|
}, [initFetch]);
|
|
4349
|
-
|
|
4388
|
+
useEffect10(() => {
|
|
4350
4389
|
if (detailSlug && subView === "content-detail") {
|
|
4351
4390
|
fetchDetail(detailSlug);
|
|
4352
4391
|
}
|
|
4353
4392
|
}, [detailSlug, subView, fetchDetail]);
|
|
4354
|
-
const prevSubView =
|
|
4355
|
-
|
|
4393
|
+
const prevSubView = useRef13(subView);
|
|
4394
|
+
useEffect10(() => {
|
|
4356
4395
|
if (prevSubView.current === "content-category" && subView === null) {
|
|
4357
4396
|
clearCategory();
|
|
4358
4397
|
}
|
|
@@ -4446,10 +4485,10 @@ function FlatContentTabView({
|
|
|
4446
4485
|
loadMore,
|
|
4447
4486
|
fetchDetail
|
|
4448
4487
|
} = useContentTab(tab.id);
|
|
4449
|
-
|
|
4488
|
+
useEffect11(() => {
|
|
4450
4489
|
if (detailSlug) fetchDetail(detailSlug);
|
|
4451
4490
|
}, [detailSlug, fetchDetail]);
|
|
4452
|
-
const handleSearch =
|
|
4491
|
+
const handleSearch = useCallback13(
|
|
4453
4492
|
(query) => {
|
|
4454
4493
|
fetchEntries({ page: 1, search: query || void 0, reset: true });
|
|
4455
4494
|
},
|
|
@@ -4489,7 +4528,7 @@ function ContentTabIconComponent({ icon }) {
|
|
|
4489
4528
|
}
|
|
4490
4529
|
|
|
4491
4530
|
// src/themed/debug-overlay.tsx
|
|
4492
|
-
import { useEffect as
|
|
4531
|
+
import { useEffect as useEffect12, useMemo as useMemo2, useRef as useRef14, useState as useState13 } from "react";
|
|
4493
4532
|
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4494
4533
|
var MAX_EVENTS = 60;
|
|
4495
4534
|
function isDebugEnabled() {
|
|
@@ -4507,16 +4546,16 @@ function senderOf(item) {
|
|
|
4507
4546
|
return item.type;
|
|
4508
4547
|
}
|
|
4509
4548
|
function WidgetDebugOverlay() {
|
|
4510
|
-
const [enabled, setEnabled] =
|
|
4511
|
-
const [open, setOpen] =
|
|
4512
|
-
const [events, setEvents] =
|
|
4513
|
-
const eventsRef =
|
|
4549
|
+
const [enabled, setEnabled] = useState13(false);
|
|
4550
|
+
const [open, setOpen] = useState13(true);
|
|
4551
|
+
const [events, setEvents] = useState13([]);
|
|
4552
|
+
const eventsRef = useRef14([]);
|
|
4514
4553
|
const activeId = useWidgetStore((s) => s.activeConversationId);
|
|
4515
4554
|
const messagesMap = useWidgetStore((s) => s.messages);
|
|
4516
4555
|
const typingUsers = useWidgetStore((s) => s.typingUsers);
|
|
4517
4556
|
const aiProcessingMap = useWidgetStore((s) => s.aiProcessing);
|
|
4518
4557
|
const { store } = useWidgetContext();
|
|
4519
|
-
|
|
4558
|
+
useEffect12(() => {
|
|
4520
4559
|
setEnabled(isDebugEnabled());
|
|
4521
4560
|
}, []);
|
|
4522
4561
|
const pushEvent = useMemo2(
|
|
@@ -4531,7 +4570,7 @@ function WidgetDebugOverlay() {
|
|
|
4531
4570
|
},
|
|
4532
4571
|
[]
|
|
4533
4572
|
);
|
|
4534
|
-
|
|
4573
|
+
useEffect12(() => {
|
|
4535
4574
|
if (!enabled) return;
|
|
4536
4575
|
if (typeof window === "undefined" || typeof window.fetch !== "function") return;
|
|
4537
4576
|
const originalFetch = window.fetch.bind(window);
|
|
@@ -4563,7 +4602,7 @@ function WidgetDebugOverlay() {
|
|
|
4563
4602
|
window.fetch = originalFetch;
|
|
4564
4603
|
};
|
|
4565
4604
|
}, [enabled, pushEvent]);
|
|
4566
|
-
|
|
4605
|
+
useEffect12(() => {
|
|
4567
4606
|
if (!enabled) return;
|
|
4568
4607
|
const original = store.getState().handleRealtimeEvent;
|
|
4569
4608
|
store.setState({
|
|
@@ -4581,8 +4620,8 @@ function WidgetDebugOverlay() {
|
|
|
4581
4620
|
() => activeMessages.map((m) => `${m.id}:${senderOf(m)}:${m.createdAt}`).join("|"),
|
|
4582
4621
|
[activeMessages]
|
|
4583
4622
|
);
|
|
4584
|
-
const prevSigRef =
|
|
4585
|
-
|
|
4623
|
+
const prevSigRef = useRef14(lastMsgSignature);
|
|
4624
|
+
useEffect12(() => {
|
|
4586
4625
|
if (!enabled) return;
|
|
4587
4626
|
if (prevSigRef.current !== lastMsgSignature) {
|
|
4588
4627
|
prevSigRef.current = lastMsgSignature;
|
|
@@ -4734,10 +4773,32 @@ var styles = {
|
|
|
4734
4773
|
empty: { color: "#52525b", fontStyle: "italic", fontSize: 10 }
|
|
4735
4774
|
};
|
|
4736
4775
|
|
|
4776
|
+
// src/themed/icons-local.tsx
|
|
4777
|
+
import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4778
|
+
function DotsIcon({ size = 24, ...props }) {
|
|
4779
|
+
return /* @__PURE__ */ jsxs8(
|
|
4780
|
+
"svg",
|
|
4781
|
+
{
|
|
4782
|
+
width: size,
|
|
4783
|
+
height: size,
|
|
4784
|
+
viewBox: "0 0 24 24",
|
|
4785
|
+
fill: "none",
|
|
4786
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
4787
|
+
"aria-hidden": "true",
|
|
4788
|
+
...props,
|
|
4789
|
+
children: [
|
|
4790
|
+
/* @__PURE__ */ jsx13("circle", { cx: "5", cy: "12", r: "1.7", fill: "currentColor" }),
|
|
4791
|
+
/* @__PURE__ */ jsx13("circle", { cx: "12", cy: "12", r: "1.7", fill: "currentColor" }),
|
|
4792
|
+
/* @__PURE__ */ jsx13("circle", { cx: "19", cy: "12", r: "1.7", fill: "currentColor" })
|
|
4793
|
+
]
|
|
4794
|
+
}
|
|
4795
|
+
);
|
|
4796
|
+
}
|
|
4797
|
+
|
|
4737
4798
|
// src/themed/message-bubble.tsx
|
|
4738
|
-
import { useEffect as
|
|
4799
|
+
import { useEffect as useEffect13, useLayoutEffect, useRef as useRef15, useState as useState14 } from "react";
|
|
4739
4800
|
import { createPortal } from "react-dom";
|
|
4740
|
-
import { Fragment as Fragment3, jsx as
|
|
4801
|
+
import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4741
4802
|
function MessageBubble({
|
|
4742
4803
|
text,
|
|
4743
4804
|
sender,
|
|
@@ -4750,7 +4811,7 @@ function MessageBubble({
|
|
|
4750
4811
|
streaming
|
|
4751
4812
|
}) {
|
|
4752
4813
|
const senderClass = `hw-msg--${sender}`;
|
|
4753
|
-
const bubbleRef =
|
|
4814
|
+
const bubbleRef = useRef15(null);
|
|
4754
4815
|
const imageParts = parts?.filter((p) => p.type === "image") ?? [];
|
|
4755
4816
|
const fileParts = parts?.filter((p) => p.type === "file") ?? [];
|
|
4756
4817
|
const linkPreviews = parts?.filter(
|
|
@@ -4760,7 +4821,7 @@ function MessageBubble({
|
|
|
4760
4821
|
(p) => p.type === "source"
|
|
4761
4822
|
) ?? [];
|
|
4762
4823
|
const hasText = text.length > 0;
|
|
4763
|
-
|
|
4824
|
+
useEffect13(() => {
|
|
4764
4825
|
const bubble = bubbleRef.current;
|
|
4765
4826
|
if (!bubble || sender !== "ai" && sender !== "team") return;
|
|
4766
4827
|
const handleClick = (event) => {
|
|
@@ -4771,23 +4832,23 @@ function MessageBubble({
|
|
|
4771
4832
|
bubble.removeEventListener("click", handleClick);
|
|
4772
4833
|
};
|
|
4773
4834
|
}, [sender]);
|
|
4774
|
-
return /* @__PURE__ */
|
|
4775
|
-
imageParts.length > 0 && /* @__PURE__ */
|
|
4776
|
-
hasText && /* @__PURE__ */
|
|
4777
|
-
sender === "ai" || sender === "team" ? /* @__PURE__ */
|
|
4835
|
+
return /* @__PURE__ */ jsx14("div", { className: `hw-msg ${senderClass}`, children: /* @__PURE__ */ jsxs9("div", { className: "hw-msg-body", children: [
|
|
4836
|
+
imageParts.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hw-msg-images", children: imageParts.map((img, i) => /* @__PURE__ */ jsx14(PreviewableThumbnail, { src: img.url }, i)) }),
|
|
4837
|
+
hasText && /* @__PURE__ */ jsxs9("div", { className: "hw-msg-bubble", ref: bubbleRef, children: [
|
|
4838
|
+
sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx14(
|
|
4778
4839
|
"span",
|
|
4779
4840
|
{
|
|
4780
4841
|
dangerouslySetInnerHTML: {
|
|
4781
4842
|
__html: renderMarkdown(streaming ? closeDanglingMarkdown(text) : text)
|
|
4782
4843
|
}
|
|
4783
4844
|
}
|
|
4784
|
-
) : /* @__PURE__ */
|
|
4785
|
-
streaming && /* @__PURE__ */
|
|
4845
|
+
) : /* @__PURE__ */ jsx14("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } }),
|
|
4846
|
+
streaming && /* @__PURE__ */ jsx14("span", { className: "hw-streaming-cursor" })
|
|
4786
4847
|
] }),
|
|
4787
|
-
fileParts.length > 0 && /* @__PURE__ */
|
|
4788
|
-
linkPreviews.length > 0 && /* @__PURE__ */
|
|
4789
|
-
sources.length > 0 && /* @__PURE__ */
|
|
4790
|
-
(src, i) => src.sourceUrl ? /* @__PURE__ */
|
|
4848
|
+
fileParts.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hw-msg-files", children: fileParts.map((file, i) => /* @__PURE__ */ jsx14(FileCard, { file }, i)) }),
|
|
4849
|
+
linkPreviews.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hw-msg-links", children: linkPreviews.map((lp, i) => /* @__PURE__ */ jsx14(LinkPreviewCard, { preview: lp }, i)) }),
|
|
4850
|
+
sources.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hw-sources", children: sources.map(
|
|
4851
|
+
(src, i) => src.sourceUrl ? /* @__PURE__ */ jsxs9(
|
|
4791
4852
|
"a",
|
|
4792
4853
|
{
|
|
4793
4854
|
href: src.sourceUrl,
|
|
@@ -4796,26 +4857,26 @@ function MessageBubble({
|
|
|
4796
4857
|
className: "hw-source",
|
|
4797
4858
|
onClick: (e) => e.stopPropagation(),
|
|
4798
4859
|
children: [
|
|
4799
|
-
/* @__PURE__ */
|
|
4800
|
-
/* @__PURE__ */
|
|
4860
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-source-n", children: i + 1 }),
|
|
4861
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-source-title", children: src.title })
|
|
4801
4862
|
]
|
|
4802
4863
|
},
|
|
4803
4864
|
src.knowledgeId
|
|
4804
|
-
) : /* @__PURE__ */
|
|
4805
|
-
/* @__PURE__ */
|
|
4806
|
-
/* @__PURE__ */
|
|
4865
|
+
) : /* @__PURE__ */ jsxs9("div", { className: "hw-source", children: [
|
|
4866
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-source-n", children: i + 1 }),
|
|
4867
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-source-title", children: src.title })
|
|
4807
4868
|
] }, src.knowledgeId)
|
|
4808
4869
|
) }),
|
|
4809
|
-
metadata?.kind === "quick_replies" && /* @__PURE__ */
|
|
4870
|
+
metadata?.kind === "quick_replies" && /* @__PURE__ */ jsx14(QuickReplyButtons, { metadata, onTap: onQuickReplyTap }),
|
|
4810
4871
|
(() => {
|
|
4811
4872
|
const isVisitor = sender === "visitor";
|
|
4812
4873
|
const lead = isVisitor ? null : senderName ?? null;
|
|
4813
4874
|
const withLead = (showAuthor ?? !!timestamp) && !!lead;
|
|
4814
4875
|
if (!withLead && !timestamp) return null;
|
|
4815
|
-
return /* @__PURE__ */
|
|
4816
|
-
withLead && /* @__PURE__ */
|
|
4817
|
-
withLead && timestamp && /* @__PURE__ */
|
|
4818
|
-
timestamp && /* @__PURE__ */
|
|
4876
|
+
return /* @__PURE__ */ jsxs9("div", { className: "hw-msg-meta", children: [
|
|
4877
|
+
withLead && /* @__PURE__ */ jsx14("span", { className: "hw-msg-author", children: lead }),
|
|
4878
|
+
withLead && timestamp && /* @__PURE__ */ jsx14("span", { className: "hw-msg-meta-sep", children: "\xB7" }),
|
|
4879
|
+
timestamp && /* @__PURE__ */ jsx14("span", { className: "hw-msg-time", children: timestamp })
|
|
4819
4880
|
] });
|
|
4820
4881
|
})()
|
|
4821
4882
|
] }) });
|
|
@@ -4824,21 +4885,21 @@ function QuickReplyButtons({
|
|
|
4824
4885
|
metadata,
|
|
4825
4886
|
onTap
|
|
4826
4887
|
}) {
|
|
4827
|
-
const [tappedId, setTappedId] =
|
|
4888
|
+
const [tappedId, setTappedId] = useState14(null);
|
|
4828
4889
|
const isLocked = metadata.cancelled || tappedId !== null;
|
|
4829
4890
|
const handleTap = (optionId) => {
|
|
4830
4891
|
if (isLocked) return;
|
|
4831
4892
|
setTappedId(optionId);
|
|
4832
4893
|
onTap?.(optionId, metadata.stepId);
|
|
4833
4894
|
};
|
|
4834
|
-
return /* @__PURE__ */
|
|
4895
|
+
return /* @__PURE__ */ jsx14(
|
|
4835
4896
|
"div",
|
|
4836
4897
|
{
|
|
4837
4898
|
className: "hw-quick-replies",
|
|
4838
4899
|
"data-cancelled": metadata.cancelled ? "true" : void 0,
|
|
4839
4900
|
children: metadata.options.map((opt) => {
|
|
4840
4901
|
const isTapped = tappedId === opt.id;
|
|
4841
|
-
return /* @__PURE__ */
|
|
4902
|
+
return /* @__PURE__ */ jsx14(
|
|
4842
4903
|
"button",
|
|
4843
4904
|
{
|
|
4844
4905
|
type: "button",
|
|
@@ -4855,10 +4916,10 @@ function QuickReplyButtons({
|
|
|
4855
4916
|
);
|
|
4856
4917
|
}
|
|
4857
4918
|
function PreviewableThumbnail({ src }) {
|
|
4858
|
-
const [hover, setHover] =
|
|
4859
|
-
const ref =
|
|
4860
|
-
return /* @__PURE__ */
|
|
4861
|
-
/* @__PURE__ */
|
|
4919
|
+
const [hover, setHover] = useState14(false);
|
|
4920
|
+
const ref = useRef15(null);
|
|
4921
|
+
return /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
4922
|
+
/* @__PURE__ */ jsx14(
|
|
4862
4923
|
"a",
|
|
4863
4924
|
{
|
|
4864
4925
|
ref,
|
|
@@ -4869,21 +4930,21 @@ function PreviewableThumbnail({ src }) {
|
|
|
4869
4930
|
"aria-label": t("widget.aria_open_image"),
|
|
4870
4931
|
onMouseEnter: () => setHover(true),
|
|
4871
4932
|
onMouseLeave: () => setHover(false),
|
|
4872
|
-
children: /* @__PURE__ */
|
|
4933
|
+
children: /* @__PURE__ */ jsx14("img", { src, alt: "", className: "hw-msg-image", loading: "lazy" })
|
|
4873
4934
|
}
|
|
4874
4935
|
),
|
|
4875
|
-
hover && /* @__PURE__ */
|
|
4936
|
+
hover && /* @__PURE__ */ jsx14(AnchoredPreview, { src, anchorRef: ref, href: src })
|
|
4876
4937
|
] });
|
|
4877
4938
|
}
|
|
4878
4939
|
var PREVIEWABLE_EXTS = /* @__PURE__ */ new Set(["pdf", "csv", "png", "jpg", "jpeg", "gif", "webp", "svg"]);
|
|
4879
4940
|
function FileCard({ file }) {
|
|
4880
|
-
const [hover, setHover] =
|
|
4881
|
-
const ref =
|
|
4941
|
+
const [hover, setHover] = useState14(false);
|
|
4942
|
+
const ref = useRef15(null);
|
|
4882
4943
|
const ext = file.fileName.split(".").pop()?.toLowerCase() ?? "";
|
|
4883
4944
|
const isPreviewable = PREVIEWABLE_EXTS.has(ext);
|
|
4884
4945
|
const isImage = file.mimeType.startsWith("image/");
|
|
4885
|
-
return /* @__PURE__ */
|
|
4886
|
-
/* @__PURE__ */
|
|
4946
|
+
return /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
4947
|
+
/* @__PURE__ */ jsxs9(
|
|
4887
4948
|
"a",
|
|
4888
4949
|
{
|
|
4889
4950
|
ref,
|
|
@@ -4894,15 +4955,15 @@ function FileCard({ file }) {
|
|
|
4894
4955
|
onMouseEnter: () => isPreviewable && setHover(true),
|
|
4895
4956
|
onMouseLeave: () => setHover(false),
|
|
4896
4957
|
children: [
|
|
4897
|
-
/* @__PURE__ */
|
|
4898
|
-
/* @__PURE__ */
|
|
4899
|
-
/* @__PURE__ */
|
|
4900
|
-
/* @__PURE__ */
|
|
4958
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx14(FileTypeIcon, { ext }) }),
|
|
4959
|
+
/* @__PURE__ */ jsxs9("span", { className: "hw-msg-file-info", children: [
|
|
4960
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-msg-file-name", children: file.fileName }),
|
|
4961
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-msg-file-size", children: formatFileSize(file.fileSize) })
|
|
4901
4962
|
] })
|
|
4902
4963
|
]
|
|
4903
4964
|
}
|
|
4904
4965
|
),
|
|
4905
|
-
hover && isPreviewable && (isImage ? /* @__PURE__ */
|
|
4966
|
+
hover && isPreviewable && (isImage ? /* @__PURE__ */ jsx14(AnchoredPreview, { src: file.url, anchorRef: ref, href: file.url }) : /* @__PURE__ */ jsx14(AnchoredDocPreview, { fileName: file.fileName, ext, anchorRef: ref, href: file.url }))
|
|
4906
4967
|
] });
|
|
4907
4968
|
}
|
|
4908
4969
|
function AnchoredPreview({
|
|
@@ -4911,8 +4972,8 @@ function AnchoredPreview({
|
|
|
4911
4972
|
href,
|
|
4912
4973
|
onOpen
|
|
4913
4974
|
}) {
|
|
4914
|
-
const [style, setStyle] =
|
|
4915
|
-
const [portalTarget, setPortalTarget] =
|
|
4975
|
+
const [style, setStyle] = useState14({ opacity: 0 });
|
|
4976
|
+
const [portalTarget, setPortalTarget] = useState14(null);
|
|
4916
4977
|
useLayoutEffect(() => {
|
|
4917
4978
|
const anchor = anchorRef.current;
|
|
4918
4979
|
if (!anchor) return;
|
|
@@ -4936,7 +4997,7 @@ function AnchoredPreview({
|
|
|
4936
4997
|
};
|
|
4937
4998
|
if (!portalTarget) return null;
|
|
4938
4999
|
return createPortal(
|
|
4939
|
-
/* @__PURE__ */
|
|
5000
|
+
/* @__PURE__ */ jsx14("div", { className: "hw-hover-preview", style, onClick: handleClick, children: /* @__PURE__ */ jsx14("img", { src, alt: "", className: "hw-hover-preview-img" }) }),
|
|
4940
5001
|
portalTarget
|
|
4941
5002
|
);
|
|
4942
5003
|
}
|
|
@@ -4946,8 +5007,8 @@ function AnchoredDocPreview({
|
|
|
4946
5007
|
anchorRef,
|
|
4947
5008
|
href
|
|
4948
5009
|
}) {
|
|
4949
|
-
const [style, setStyle] =
|
|
4950
|
-
const [portalTarget, setPortalTarget] =
|
|
5010
|
+
const [style, setStyle] = useState14({ opacity: 0 });
|
|
5011
|
+
const [portalTarget, setPortalTarget] = useState14(null);
|
|
4951
5012
|
useLayoutEffect(() => {
|
|
4952
5013
|
const anchor = anchorRef.current;
|
|
4953
5014
|
if (!anchor) return;
|
|
@@ -4967,17 +5028,17 @@ function AnchoredDocPreview({
|
|
|
4967
5028
|
}, [anchorRef]);
|
|
4968
5029
|
if (!portalTarget) return null;
|
|
4969
5030
|
return createPortal(
|
|
4970
|
-
/* @__PURE__ */
|
|
5031
|
+
/* @__PURE__ */ jsxs9(
|
|
4971
5032
|
"div",
|
|
4972
5033
|
{
|
|
4973
5034
|
className: "hw-hover-preview hw-hover-preview--doc",
|
|
4974
5035
|
style,
|
|
4975
5036
|
onClick: () => window.open(href, "_blank", "noopener,noreferrer"),
|
|
4976
5037
|
children: [
|
|
4977
|
-
/* @__PURE__ */
|
|
4978
|
-
/* @__PURE__ */
|
|
4979
|
-
/* @__PURE__ */
|
|
4980
|
-
/* @__PURE__ */
|
|
5038
|
+
/* @__PURE__ */ jsx14("div", { className: "hw-hover-preview-doc-icon", children: /* @__PURE__ */ jsx14(FileTypeIcon, { ext }) }),
|
|
5039
|
+
/* @__PURE__ */ jsxs9("div", { className: "hw-hover-preview-doc-info", children: [
|
|
5040
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-hover-preview-doc-name", children: fileName }),
|
|
5041
|
+
/* @__PURE__ */ jsx14("span", { className: "hw-hover-preview-doc-hint", children: t("widget.click_to_open") })
|
|
4981
5042
|
] })
|
|
4982
5043
|
]
|
|
4983
5044
|
}
|
|
@@ -5002,7 +5063,7 @@ var FILE_TYPE_COLORS = {
|
|
|
5002
5063
|
};
|
|
5003
5064
|
function FileTypeIcon({ ext }) {
|
|
5004
5065
|
const color = FILE_TYPE_COLORS[ext] ?? "currentColor";
|
|
5005
|
-
return /* @__PURE__ */
|
|
5066
|
+
return /* @__PURE__ */ jsxs9(
|
|
5006
5067
|
"svg",
|
|
5007
5068
|
{
|
|
5008
5069
|
viewBox: "0 0 24 24",
|
|
@@ -5012,10 +5073,10 @@ function FileTypeIcon({ ext }) {
|
|
|
5012
5073
|
strokeLinecap: "round",
|
|
5013
5074
|
strokeLinejoin: "round",
|
|
5014
5075
|
children: [
|
|
5015
|
-
/* @__PURE__ */
|
|
5016
|
-
/* @__PURE__ */
|
|
5017
|
-
ext === "pdf" && /* @__PURE__ */
|
|
5018
|
-
ext === "csv" && /* @__PURE__ */
|
|
5076
|
+
/* @__PURE__ */ jsx14("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
|
|
5077
|
+
/* @__PURE__ */ jsx14("polyline", { points: "14 2 14 8 20 8" }),
|
|
5078
|
+
ext === "pdf" && /* @__PURE__ */ jsx14("text", { x: "8", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "PDF" }),
|
|
5079
|
+
ext === "csv" && /* @__PURE__ */ jsx14("text", { x: "7", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "CSV" })
|
|
5019
5080
|
]
|
|
5020
5081
|
}
|
|
5021
5082
|
);
|
|
@@ -5028,7 +5089,7 @@ function LinkPreviewCard({ preview }) {
|
|
|
5028
5089
|
return preview.url;
|
|
5029
5090
|
}
|
|
5030
5091
|
})();
|
|
5031
|
-
return /* @__PURE__ */
|
|
5092
|
+
return /* @__PURE__ */ jsxs9(
|
|
5032
5093
|
"a",
|
|
5033
5094
|
{
|
|
5034
5095
|
href: preview.url,
|
|
@@ -5037,7 +5098,7 @@ function LinkPreviewCard({ preview }) {
|
|
|
5037
5098
|
className: "hw-link-preview",
|
|
5038
5099
|
onClick: (e) => e.stopPropagation(),
|
|
5039
5100
|
children: [
|
|
5040
|
-
preview.imageUrl && /* @__PURE__ */
|
|
5101
|
+
preview.imageUrl && /* @__PURE__ */ jsx14(
|
|
5041
5102
|
"img",
|
|
5042
5103
|
{
|
|
5043
5104
|
src: preview.imageUrl,
|
|
@@ -5049,8 +5110,8 @@ function LinkPreviewCard({ preview }) {
|
|
|
5049
5110
|
}
|
|
5050
5111
|
}
|
|
5051
5112
|
),
|
|
5052
|
-
/* @__PURE__ */
|
|
5053
|
-
preview.favicon && /* @__PURE__ */
|
|
5113
|
+
/* @__PURE__ */ jsxs9("div", { className: "hw-link-preview-body", children: [
|
|
5114
|
+
preview.favicon && /* @__PURE__ */ jsx14(
|
|
5054
5115
|
"img",
|
|
5055
5116
|
{
|
|
5056
5117
|
src: preview.favicon,
|
|
@@ -5063,9 +5124,9 @@ function LinkPreviewCard({ preview }) {
|
|
|
5063
5124
|
}
|
|
5064
5125
|
}
|
|
5065
5126
|
),
|
|
5066
|
-
preview.title && /* @__PURE__ */
|
|
5067
|
-
preview.description && /* @__PURE__ */
|
|
5068
|
-
/* @__PURE__ */
|
|
5127
|
+
preview.title && /* @__PURE__ */ jsx14("div", { className: "hw-link-preview-title", children: preview.title }),
|
|
5128
|
+
preview.description && /* @__PURE__ */ jsx14("div", { className: "hw-link-preview-desc", children: preview.description.slice(0, 120) }),
|
|
5129
|
+
/* @__PURE__ */ jsx14("div", { className: "hw-link-preview-url", children: hostname })
|
|
5069
5130
|
] })
|
|
5070
5131
|
]
|
|
5071
5132
|
}
|
|
@@ -5073,8 +5134,8 @@ function LinkPreviewCard({ preview }) {
|
|
|
5073
5134
|
}
|
|
5074
5135
|
|
|
5075
5136
|
// src/themed/message-list.tsx
|
|
5076
|
-
import React, { useEffect as
|
|
5077
|
-
import { jsx as
|
|
5137
|
+
import React, { useEffect as useEffect14, useRef as useRef16 } from "react";
|
|
5138
|
+
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
5078
5139
|
function parseParts(raw) {
|
|
5079
5140
|
if (!raw) return null;
|
|
5080
5141
|
if (Array.isArray(raw)) return raw;
|
|
@@ -5108,12 +5169,12 @@ function MessageList({
|
|
|
5108
5169
|
onLoadMore,
|
|
5109
5170
|
renderAfterMessages
|
|
5110
5171
|
}) {
|
|
5111
|
-
const bottomRef =
|
|
5112
|
-
const topRef =
|
|
5113
|
-
const containerRef =
|
|
5114
|
-
const prevItemCountRef =
|
|
5115
|
-
const isInitialLoadRef =
|
|
5116
|
-
const hadStreamRef =
|
|
5172
|
+
const bottomRef = useRef16(null);
|
|
5173
|
+
const topRef = useRef16(null);
|
|
5174
|
+
const containerRef = useRef16(null);
|
|
5175
|
+
const prevItemCountRef = useRef16(items.length);
|
|
5176
|
+
const isInitialLoadRef = useRef16(true);
|
|
5177
|
+
const hadStreamRef = useRef16(false);
|
|
5117
5178
|
const client = useWidgetClient();
|
|
5118
5179
|
const activeConversationId = useWidgetStore((s) => s.activeConversationId);
|
|
5119
5180
|
const handleQuickReplyTap = React.useCallback(
|
|
@@ -5125,7 +5186,7 @@ function MessageList({
|
|
|
5125
5186
|
},
|
|
5126
5187
|
[client, activeConversationId]
|
|
5127
5188
|
);
|
|
5128
|
-
|
|
5189
|
+
useEffect14(() => {
|
|
5129
5190
|
const prevCount = prevItemCountRef.current;
|
|
5130
5191
|
const newCount = items.length;
|
|
5131
5192
|
prevItemCountRef.current = newCount;
|
|
@@ -5141,18 +5202,18 @@ function MessageList({
|
|
|
5141
5202
|
isInitialLoadRef.current = false;
|
|
5142
5203
|
}
|
|
5143
5204
|
}, [items]);
|
|
5144
|
-
|
|
5205
|
+
useEffect14(() => {
|
|
5145
5206
|
if (streamingText) {
|
|
5146
5207
|
bottomRef.current?.scrollIntoView({ behavior: "instant" });
|
|
5147
5208
|
}
|
|
5148
5209
|
hadStreamRef.current = !!streamingText;
|
|
5149
5210
|
}, [streamingText]);
|
|
5150
|
-
|
|
5211
|
+
useEffect14(() => {
|
|
5151
5212
|
if (isTyping || isAiProcessing) {
|
|
5152
5213
|
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
5153
5214
|
}
|
|
5154
5215
|
}, [isTyping, isAiProcessing]);
|
|
5155
|
-
|
|
5216
|
+
useEffect14(() => {
|
|
5156
5217
|
if (!hasMore || !onLoadMore || !topRef.current) return;
|
|
5157
5218
|
const observer = new IntersectionObserver(
|
|
5158
5219
|
(entries) => {
|
|
@@ -5175,16 +5236,16 @@ function MessageList({
|
|
|
5175
5236
|
return () => observer.disconnect();
|
|
5176
5237
|
}, [hasMore, onLoadMore, isLoadingMore]);
|
|
5177
5238
|
if (items.length === 0) {
|
|
5178
|
-
return /* @__PURE__ */
|
|
5239
|
+
return /* @__PURE__ */ jsx15(
|
|
5179
5240
|
"div",
|
|
5180
5241
|
{
|
|
5181
5242
|
className: "hw-messages",
|
|
5182
5243
|
role: "log",
|
|
5183
5244
|
"aria-label": t("widget.aria_messages"),
|
|
5184
5245
|
"aria-live": "polite",
|
|
5185
|
-
children: /* @__PURE__ */
|
|
5186
|
-
/* @__PURE__ */
|
|
5187
|
-
/* @__PURE__ */
|
|
5246
|
+
children: /* @__PURE__ */ jsxs10("div", { className: "hw-empty", children: [
|
|
5247
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-empty-icon", children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx15("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) }),
|
|
5248
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-empty-text", children: t("widget.start_a_conversation") })
|
|
5188
5249
|
] })
|
|
5189
5250
|
}
|
|
5190
5251
|
);
|
|
@@ -5194,7 +5255,7 @@ function MessageList({
|
|
|
5194
5255
|
const yesterday = /* @__PURE__ */ new Date();
|
|
5195
5256
|
yesterday.setDate(yesterday.getDate() - 1);
|
|
5196
5257
|
const yesterdayKey = DATE_KEY_FMT.format(yesterday);
|
|
5197
|
-
return /* @__PURE__ */
|
|
5258
|
+
return /* @__PURE__ */ jsxs10(
|
|
5198
5259
|
"div",
|
|
5199
5260
|
{
|
|
5200
5261
|
ref: containerRef,
|
|
@@ -5203,15 +5264,15 @@ function MessageList({
|
|
|
5203
5264
|
"aria-label": t("widget.aria_messages"),
|
|
5204
5265
|
"aria-live": "polite",
|
|
5205
5266
|
children: [
|
|
5206
|
-
/* @__PURE__ */
|
|
5207
|
-
/* @__PURE__ */
|
|
5208
|
-
/* @__PURE__ */
|
|
5209
|
-
/* @__PURE__ */
|
|
5267
|
+
/* @__PURE__ */ jsx15("div", { ref: topRef, className: "hw-load-more-trigger", children: isLoadingMore && /* @__PURE__ */ jsxs10("div", { className: "hw-load-more-spinner", children: [
|
|
5268
|
+
/* @__PURE__ */ jsx15("div", {}),
|
|
5269
|
+
/* @__PURE__ */ jsx15("div", {}),
|
|
5270
|
+
/* @__PURE__ */ jsx15("div", {})
|
|
5210
5271
|
] }) }),
|
|
5211
5272
|
[
|
|
5212
5273
|
...items.map((item) => {
|
|
5213
5274
|
if (item.type === "event") {
|
|
5214
|
-
return /* @__PURE__ */
|
|
5275
|
+
return /* @__PURE__ */ jsx15(
|
|
5215
5276
|
EventCard,
|
|
5216
5277
|
{
|
|
5217
5278
|
text: item.text ?? ""
|
|
@@ -5226,16 +5287,16 @@ function MessageList({
|
|
|
5226
5287
|
const showDateSep = isNewBucket && dateKey !== todayKey;
|
|
5227
5288
|
const dateLabel = dateKey === yesterdayKey ? t("widget.yesterday") : displayDateFormatter(getLocale()).format(itemDate);
|
|
5228
5289
|
const sender = item.visitorId ? "visitor" : item.aiAgentId ? "ai" : "team";
|
|
5229
|
-
return /* @__PURE__ */
|
|
5290
|
+
return /* @__PURE__ */ jsxs10(
|
|
5230
5291
|
React.Fragment,
|
|
5231
5292
|
{
|
|
5232
5293
|
children: [
|
|
5233
|
-
showDateSep && /* @__PURE__ */
|
|
5234
|
-
/* @__PURE__ */
|
|
5235
|
-
/* @__PURE__ */
|
|
5236
|
-
/* @__PURE__ */
|
|
5294
|
+
showDateSep && /* @__PURE__ */ jsxs10("div", { className: "hw-date-sep", children: [
|
|
5295
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-date-sep-line" }),
|
|
5296
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-date-sep-text", children: dateLabel }),
|
|
5297
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-date-sep-line" })
|
|
5237
5298
|
] }),
|
|
5238
|
-
/* @__PURE__ */
|
|
5299
|
+
/* @__PURE__ */ jsx15(
|
|
5239
5300
|
MessageBubble,
|
|
5240
5301
|
{
|
|
5241
5302
|
text: item.text ?? "",
|
|
@@ -5267,19 +5328,19 @@ function MessageList({
|
|
|
5267
5328
|
its place, .hw-msg replayed hw-msg-appear (styles.css:1326), and the
|
|
5268
5329
|
answer visibly animated in a second time just as it finished. */
|
|
5269
5330
|
...streamingText && activeConversationId ? [
|
|
5270
|
-
/* @__PURE__ */
|
|
5331
|
+
/* @__PURE__ */ jsxs10(React.Fragment, { children: [
|
|
5271
5332
|
null,
|
|
5272
|
-
/* @__PURE__ */
|
|
5333
|
+
/* @__PURE__ */ jsx15(MessageBubble, { text: streamingText, sender: "ai", parts: null, streaming: true })
|
|
5273
5334
|
] }, streamingKeyFor(activeConversationId))
|
|
5274
5335
|
] : []
|
|
5275
5336
|
],
|
|
5276
5337
|
renderAfterMessages,
|
|
5277
|
-
(isAiProcessing || isTyping) && !streamingText && /* @__PURE__ */
|
|
5278
|
-
/* @__PURE__ */
|
|
5279
|
-
/* @__PURE__ */
|
|
5280
|
-
/* @__PURE__ */
|
|
5338
|
+
(isAiProcessing || isTyping) && !streamingText && /* @__PURE__ */ jsx15("div", { className: "hw-typing", children: /* @__PURE__ */ jsxs10("div", { className: "hw-typing-dots", children: [
|
|
5339
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-typing-dot" }),
|
|
5340
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-typing-dot" }),
|
|
5341
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-typing-dot" })
|
|
5281
5342
|
] }) }),
|
|
5282
|
-
/* @__PURE__ */
|
|
5343
|
+
/* @__PURE__ */ jsx15("div", { ref: bottomRef })
|
|
5283
5344
|
]
|
|
5284
5345
|
}
|
|
5285
5346
|
);
|
|
@@ -5297,8 +5358,8 @@ function EventCard({ text }) {
|
|
|
5297
5358
|
const data = parseEventData(text);
|
|
5298
5359
|
if (data) {
|
|
5299
5360
|
const message = data.action === "joined" ? t("widget.joined") : t("widget.left");
|
|
5300
|
-
return /* @__PURE__ */
|
|
5301
|
-
/* @__PURE__ */
|
|
5361
|
+
return /* @__PURE__ */ jsxs10("div", { className: "hw-event hw-event--card", children: [
|
|
5362
|
+
/* @__PURE__ */ jsx15("div", { className: "hw-event-avatar", children: data.image ? /* @__PURE__ */ jsx15(
|
|
5302
5363
|
"img",
|
|
5303
5364
|
{
|
|
5304
5365
|
src: data.image,
|
|
@@ -5306,20 +5367,20 @@ function EventCard({ text }) {
|
|
|
5306
5367
|
className: "hw-event-avatar-img",
|
|
5307
5368
|
referrerPolicy: "no-referrer"
|
|
5308
5369
|
}
|
|
5309
|
-
) : /* @__PURE__ */
|
|
5310
|
-
/* @__PURE__ */
|
|
5311
|
-
/* @__PURE__ */
|
|
5370
|
+
) : /* @__PURE__ */ jsx15("span", { children: getInitials(data.name) }) }),
|
|
5371
|
+
/* @__PURE__ */ jsxs10("div", { className: "hw-event-body", children: [
|
|
5372
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-event-name", children: data.name }),
|
|
5312
5373
|
" ",
|
|
5313
|
-
/* @__PURE__ */
|
|
5374
|
+
/* @__PURE__ */ jsx15("span", { className: "hw-event-action", children: message })
|
|
5314
5375
|
] })
|
|
5315
5376
|
] });
|
|
5316
5377
|
}
|
|
5317
|
-
return /* @__PURE__ */
|
|
5378
|
+
return /* @__PURE__ */ jsx15("div", { className: "hw-event", children: /* @__PURE__ */ jsx15("div", { className: "hw-event-text", children: text }) });
|
|
5318
5379
|
}
|
|
5319
5380
|
|
|
5320
5381
|
// src/themed/message-preview.tsx
|
|
5321
|
-
import { useEffect as
|
|
5322
|
-
import { Fragment as Fragment4, jsx as
|
|
5382
|
+
import { useEffect as useEffect15, useState as useState15 } from "react";
|
|
5383
|
+
import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
5323
5384
|
function MessagePreview({
|
|
5324
5385
|
onOpen,
|
|
5325
5386
|
avatar,
|
|
@@ -5334,8 +5395,8 @@ function MessagePreview({
|
|
|
5334
5395
|
const client = useWidgetClient();
|
|
5335
5396
|
const senderName = preview?.senderName || agentName;
|
|
5336
5397
|
const senderImage = preview?.senderImage || null;
|
|
5337
|
-
const [closing, setClosing] =
|
|
5338
|
-
|
|
5398
|
+
const [closing, setClosing] = useState15(false);
|
|
5399
|
+
useEffect15(() => {
|
|
5339
5400
|
if (!preview || preview.quickReplies) return;
|
|
5340
5401
|
if (autoDismissMs == null || autoDismissMs <= 0) return;
|
|
5341
5402
|
const timer = setTimeout(() => {
|
|
@@ -5376,7 +5437,7 @@ function MessagePreview({
|
|
|
5376
5437
|
);
|
|
5377
5438
|
const qr = preview.quickReplies && preview.quickReplies.options.length > 0 ? preview.quickReplies : null;
|
|
5378
5439
|
const placementClass = placement === "anchored" ? "hw-preview--anchored " : "";
|
|
5379
|
-
return /* @__PURE__ */
|
|
5440
|
+
return /* @__PURE__ */ jsxs11(
|
|
5380
5441
|
"div",
|
|
5381
5442
|
{
|
|
5382
5443
|
className: `hw-preview ${placementClass}${closing ? "hw-preview--closing" : ""}`,
|
|
@@ -5390,17 +5451,17 @@ function MessagePreview({
|
|
|
5390
5451
|
role: "button",
|
|
5391
5452
|
tabIndex: 0,
|
|
5392
5453
|
children: [
|
|
5393
|
-
/* @__PURE__ */
|
|
5394
|
-
/* @__PURE__ */
|
|
5395
|
-
/* @__PURE__ */
|
|
5396
|
-
/* @__PURE__ */
|
|
5454
|
+
/* @__PURE__ */ jsxs11("div", { className: "hw-preview-header", children: [
|
|
5455
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-preview-avatar", children: senderImage ? /* @__PURE__ */ jsx16("img", { src: senderImage, alt: "", referrerPolicy: "no-referrer" }) : avatar }),
|
|
5456
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-preview-name", children: senderName }),
|
|
5457
|
+
/* @__PURE__ */ jsx16(
|
|
5397
5458
|
"button",
|
|
5398
5459
|
{
|
|
5399
5460
|
type: "button",
|
|
5400
5461
|
className: "hw-preview-close",
|
|
5401
5462
|
onClick: handleClose,
|
|
5402
5463
|
"aria-label": t("widget.aria_dismiss"),
|
|
5403
|
-
children: /* @__PURE__ */
|
|
5464
|
+
children: /* @__PURE__ */ jsx16(XIcon, { size: 20 })
|
|
5404
5465
|
}
|
|
5405
5466
|
)
|
|
5406
5467
|
] }),
|
|
@@ -5409,11 +5470,11 @@ function MessagePreview({
|
|
|
5409
5470
|
consecutive messages, so two identical ones would already be a bug
|
|
5410
5471
|
upstream, and an index key hands React the wrong bubble to reuse the
|
|
5411
5472
|
moment a new message lands mid-animation. */
|
|
5412
|
-
/* @__PURE__ */
|
|
5473
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-preview-body", children: truncatePreviewBody(m.text) }, m.text)
|
|
5413
5474
|
)),
|
|
5414
|
-
qr && /* @__PURE__ */
|
|
5415
|
-
qr.prompt && /* @__PURE__ */
|
|
5416
|
-
/* @__PURE__ */
|
|
5475
|
+
qr && /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
5476
|
+
qr.prompt && /* @__PURE__ */ jsx16("div", { className: "hw-preview-body", children: qr.prompt }),
|
|
5477
|
+
/* @__PURE__ */ jsx16("div", { className: "hw-preview-quick-replies hw-quick-replies", children: qr.options.map((opt) => /* @__PURE__ */ jsx16(
|
|
5417
5478
|
"button",
|
|
5418
5479
|
{
|
|
5419
5480
|
type: "button",
|
|
@@ -5427,14 +5488,14 @@ function MessagePreview({
|
|
|
5427
5488
|
opt.id
|
|
5428
5489
|
)) })
|
|
5429
5490
|
] }),
|
|
5430
|
-
footer != null && footer !== false && /* @__PURE__ */
|
|
5491
|
+
footer != null && footer !== false && /* @__PURE__ */ jsx16("div", { className: "hw-preview-footer", children: footer })
|
|
5431
5492
|
]
|
|
5432
5493
|
}
|
|
5433
5494
|
);
|
|
5434
5495
|
}
|
|
5435
5496
|
|
|
5436
5497
|
// src/themed/default-widget.tsx
|
|
5437
|
-
import { Fragment as Fragment5, jsx as
|
|
5498
|
+
import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
5438
5499
|
function resolveLabel2(label) {
|
|
5439
5500
|
if (!label.startsWith("widget.")) return label;
|
|
5440
5501
|
const resolved = t(label);
|
|
@@ -5446,7 +5507,7 @@ var EMPTY_CONTENT_TABS = [];
|
|
|
5446
5507
|
var DEFAULT_EN_WELCOME = "Hi there \u{1F44B}\nHow can we help?";
|
|
5447
5508
|
var DEFAULT_EN_SUBTITLE = "Usually replies in minutes";
|
|
5448
5509
|
function HelpwayMark({ className }) {
|
|
5449
|
-
return /* @__PURE__ */
|
|
5510
|
+
return /* @__PURE__ */ jsx17(
|
|
5450
5511
|
"svg",
|
|
5451
5512
|
{
|
|
5452
5513
|
className,
|
|
@@ -5456,7 +5517,7 @@ function HelpwayMark({ className }) {
|
|
|
5456
5517
|
fill: "none",
|
|
5457
5518
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5458
5519
|
"aria-hidden": "true",
|
|
5459
|
-
children: /* @__PURE__ */
|
|
5520
|
+
children: /* @__PURE__ */ jsx17(
|
|
5460
5521
|
"path",
|
|
5461
5522
|
{
|
|
5462
5523
|
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",
|
|
@@ -5483,7 +5544,7 @@ function WidgetLogo({
|
|
|
5483
5544
|
});
|
|
5484
5545
|
const logoClass = forceAgent ? "hw-agent-img--logo" : "";
|
|
5485
5546
|
if (!forceAgent && activeId && assignee?.assigneeImage) {
|
|
5486
|
-
return /* @__PURE__ */
|
|
5547
|
+
return /* @__PURE__ */ jsx17(
|
|
5487
5548
|
"img",
|
|
5488
5549
|
{
|
|
5489
5550
|
src: assignee.assigneeImage,
|
|
@@ -5494,7 +5555,7 @@ function WidgetLogo({
|
|
|
5494
5555
|
);
|
|
5495
5556
|
}
|
|
5496
5557
|
if (customAvatar) {
|
|
5497
|
-
return /* @__PURE__ */
|
|
5558
|
+
return /* @__PURE__ */ jsx17(
|
|
5498
5559
|
"span",
|
|
5499
5560
|
{
|
|
5500
5561
|
className: `hw-agent-icon hw-agent-custom ${className ?? ""}`,
|
|
@@ -5504,7 +5565,7 @@ function WidgetLogo({
|
|
|
5504
5565
|
);
|
|
5505
5566
|
}
|
|
5506
5567
|
if (agentConfig?.avatarUrl) {
|
|
5507
|
-
return /* @__PURE__ */
|
|
5568
|
+
return /* @__PURE__ */ jsx17(
|
|
5508
5569
|
"img",
|
|
5509
5570
|
{
|
|
5510
5571
|
src: agentConfig.avatarUrl,
|
|
@@ -5514,7 +5575,7 @@ function WidgetLogo({
|
|
|
5514
5575
|
);
|
|
5515
5576
|
}
|
|
5516
5577
|
if (agentConfig?.avatarPreset) {
|
|
5517
|
-
return /* @__PURE__ */
|
|
5578
|
+
return /* @__PURE__ */ jsx17(
|
|
5518
5579
|
"div",
|
|
5519
5580
|
{
|
|
5520
5581
|
className: `hw-agent-icon ${className ?? ""}`,
|
|
@@ -5525,20 +5586,20 @@ function WidgetLogo({
|
|
|
5525
5586
|
justifyContent: "center",
|
|
5526
5587
|
borderRadius: 8
|
|
5527
5588
|
},
|
|
5528
|
-
children: /* @__PURE__ */
|
|
5589
|
+
children: /* @__PURE__ */ jsx17(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
|
|
5529
5590
|
}
|
|
5530
5591
|
);
|
|
5531
5592
|
}
|
|
5532
5593
|
if (logoUrl) {
|
|
5533
|
-
return /* @__PURE__ */
|
|
5594
|
+
return /* @__PURE__ */ jsx17("img", { src: logoUrl, alt: "", className: `hw-agent-img hw-agent-img--logo ${className ?? ""}` });
|
|
5534
5595
|
}
|
|
5535
|
-
return /* @__PURE__ */
|
|
5596
|
+
return /* @__PURE__ */ jsx17(HelpwayMark, { className });
|
|
5536
5597
|
}
|
|
5537
5598
|
function LauncherIcon({ className }) {
|
|
5538
5599
|
const agentConfig = useWidgetStore((s) => s.agentConfig);
|
|
5539
|
-
const [imgLoaded, setImgLoaded] =
|
|
5600
|
+
const [imgLoaded, setImgLoaded] = useState16(false);
|
|
5540
5601
|
const imgSrc = agentConfig?.launcherIconUrl ?? null;
|
|
5541
|
-
|
|
5602
|
+
useEffect16(() => {
|
|
5542
5603
|
if (!imgSrc) return;
|
|
5543
5604
|
setImgLoaded(false);
|
|
5544
5605
|
const img = new Image();
|
|
@@ -5551,7 +5612,7 @@ function LauncherIcon({ className }) {
|
|
|
5551
5612
|
img.onerror = () => setImgLoaded(true);
|
|
5552
5613
|
}, [imgSrc]);
|
|
5553
5614
|
if (imgSrc) {
|
|
5554
|
-
return /* @__PURE__ */
|
|
5615
|
+
return /* @__PURE__ */ jsx17(
|
|
5555
5616
|
"img",
|
|
5556
5617
|
{
|
|
5557
5618
|
src: imgSrc,
|
|
@@ -5561,7 +5622,7 @@ function LauncherIcon({ className }) {
|
|
|
5561
5622
|
}
|
|
5562
5623
|
);
|
|
5563
5624
|
}
|
|
5564
|
-
return /* @__PURE__ */
|
|
5625
|
+
return /* @__PURE__ */ jsx17(WidgetLogo, { className, forceAgent: true });
|
|
5565
5626
|
}
|
|
5566
5627
|
var PRESET_SVG = {
|
|
5567
5628
|
// Helpway brand mark — octagonal chamfer with stylized "W" inside.
|
|
@@ -5620,7 +5681,7 @@ function AgentPresetIcon({ presetId }) {
|
|
|
5620
5681
|
const svgContent = PRESET_SVG[presetId] ?? PRESET_SVG.sparkle;
|
|
5621
5682
|
return (
|
|
5622
5683
|
// biome-ignore lint: trusted static SVG content from our icon library
|
|
5623
|
-
/* @__PURE__ */
|
|
5684
|
+
/* @__PURE__ */ jsx17(
|
|
5624
5685
|
"svg",
|
|
5625
5686
|
{
|
|
5626
5687
|
viewBox: "0 0 24 24",
|
|
@@ -5633,8 +5694,8 @@ function AgentPresetIcon({ presetId }) {
|
|
|
5633
5694
|
);
|
|
5634
5695
|
}
|
|
5635
5696
|
function CloseGlyph({ docked }) {
|
|
5636
|
-
if (!docked) return /* @__PURE__ */
|
|
5637
|
-
return /* @__PURE__ */
|
|
5697
|
+
if (!docked) return /* @__PURE__ */ jsx17(XIcon, { size: 20 });
|
|
5698
|
+
return /* @__PURE__ */ jsx17(
|
|
5638
5699
|
"svg",
|
|
5639
5700
|
{
|
|
5640
5701
|
width: "20",
|
|
@@ -5646,7 +5707,7 @@ function CloseGlyph({ docked }) {
|
|
|
5646
5707
|
strokeLinecap: "round",
|
|
5647
5708
|
strokeLinejoin: "round",
|
|
5648
5709
|
"aria-hidden": "true",
|
|
5649
|
-
children: /* @__PURE__ */
|
|
5710
|
+
children: /* @__PURE__ */ jsx17("path", { d: "M6 9.5 12 15.5 18 9.5" })
|
|
5650
5711
|
}
|
|
5651
5712
|
);
|
|
5652
5713
|
}
|
|
@@ -5678,22 +5739,22 @@ function DefaultWidget({
|
|
|
5678
5739
|
});
|
|
5679
5740
|
}
|
|
5680
5741
|
const storeIsOpen = useWidgetStore((s) => s.isOpen);
|
|
5681
|
-
const [isClosing, setIsClosing] =
|
|
5742
|
+
const [isClosing, setIsClosing] = useState16(false);
|
|
5682
5743
|
const isOpen = storeIsOpen || isClosing;
|
|
5683
|
-
const [activeTab, setActiveTab] =
|
|
5684
|
-
const [subView, setSubView] =
|
|
5685
|
-
const [newText, setNewText] =
|
|
5686
|
-
const [contentDetailSlug, setContentDetailSlug] =
|
|
5687
|
-
const [contentCategoryName, setContentCategoryName] =
|
|
5688
|
-
const prevActiveIdRef =
|
|
5689
|
-
|
|
5744
|
+
const [activeTab, setActiveTab] = useState16("home");
|
|
5745
|
+
const [subView, setSubView] = useState16(null);
|
|
5746
|
+
const [newText, setNewText] = useState16("");
|
|
5747
|
+
const [contentDetailSlug, setContentDetailSlug] = useState16(null);
|
|
5748
|
+
const [contentCategoryName, setContentCategoryName] = useState16(null);
|
|
5749
|
+
const prevActiveIdRef = useRef17(activeId);
|
|
5750
|
+
useEffect16(() => {
|
|
5690
5751
|
if (activeId && activeId !== prevActiveIdRef.current && subView !== "conversation") {
|
|
5691
5752
|
setSubView("conversation");
|
|
5692
5753
|
}
|
|
5693
5754
|
prevActiveIdRef.current = activeId;
|
|
5694
5755
|
}, [activeId, subView]);
|
|
5695
5756
|
const prefill = useWidgetStore((s) => s.newConversationPrefill);
|
|
5696
|
-
|
|
5757
|
+
useEffect16(() => {
|
|
5697
5758
|
if (prefill !== null) {
|
|
5698
5759
|
if (prefill.length > 0) setNewText(prefill);
|
|
5699
5760
|
setSubView("new");
|
|
@@ -5701,18 +5762,18 @@ function DefaultWidget({
|
|
|
5701
5762
|
store.getState().setNewConversationPrefill(null);
|
|
5702
5763
|
}
|
|
5703
5764
|
}, [prefill, store]);
|
|
5704
|
-
const closeTimerRef =
|
|
5765
|
+
const closeTimerRef = useRef17(void 0);
|
|
5705
5766
|
const welcomeMsgRaw = agentConfig?.welcomeMessage;
|
|
5706
5767
|
const welcomeIsFactoryDefault = !welcomeMsgRaw || welcomeMsgRaw === DEFAULT_EN_WELCOME;
|
|
5707
5768
|
const welcomeMessage = welcomeMsgRaw?.startsWith("widget.") ? t(welcomeMsgRaw) : welcomeIsFactoryDefault ? t("widget.welcome_message") : welcomeMsgRaw;
|
|
5708
|
-
const openConversation =
|
|
5769
|
+
const openConversation = useCallback14(
|
|
5709
5770
|
(id) => {
|
|
5710
5771
|
setActiveConversation(id);
|
|
5711
5772
|
setSubView("conversation");
|
|
5712
5773
|
},
|
|
5713
5774
|
[setActiveConversation]
|
|
5714
5775
|
);
|
|
5715
|
-
const openNewConversation =
|
|
5776
|
+
const openNewConversation = useCallback14(() => {
|
|
5716
5777
|
const agentId = agentConfig?.id;
|
|
5717
5778
|
if (!agentId) {
|
|
5718
5779
|
setSubView("new");
|
|
@@ -5738,8 +5799,8 @@ function DefaultWidget({
|
|
|
5738
5799
|
setActiveConversation(tempId);
|
|
5739
5800
|
setSubView("conversation");
|
|
5740
5801
|
}, [agentConfig?.id, store, setActiveConversation, welcomeMessage]);
|
|
5741
|
-
const didAutoOpenRef =
|
|
5742
|
-
|
|
5802
|
+
const didAutoOpenRef = useRef17(false);
|
|
5803
|
+
useEffect16(() => {
|
|
5743
5804
|
if (!isOpen) {
|
|
5744
5805
|
didAutoOpenRef.current = false;
|
|
5745
5806
|
return;
|
|
@@ -5752,19 +5813,19 @@ function DefaultWidget({
|
|
|
5752
5813
|
else openNewConversation();
|
|
5753
5814
|
}, [isOpen, isReady, subView, conversations, openConversation, openNewConversation]);
|
|
5754
5815
|
const dockComposer = useComposer(activeId);
|
|
5755
|
-
const dockRef =
|
|
5756
|
-
|
|
5816
|
+
const dockRef = useRef17(dockComposer);
|
|
5817
|
+
useEffect16(() => {
|
|
5757
5818
|
dockRef.current = dockComposer;
|
|
5758
5819
|
});
|
|
5759
|
-
const pendingDockText =
|
|
5760
|
-
const reopenFromDock =
|
|
5820
|
+
const pendingDockText = useRef17(null);
|
|
5821
|
+
const reopenFromDock = useCallback14(() => {
|
|
5761
5822
|
const state = store.getState();
|
|
5762
5823
|
if (state.isOpen) return;
|
|
5763
5824
|
const resumable = state.conversations.some((conv) => !conv.id.startsWith("temp-"));
|
|
5764
5825
|
if (!resumable) return;
|
|
5765
5826
|
state.setOpen(true);
|
|
5766
5827
|
}, [store]);
|
|
5767
|
-
const submitFromDock =
|
|
5828
|
+
const submitFromDock = useCallback14(
|
|
5768
5829
|
(override) => {
|
|
5769
5830
|
const text = (override ?? dockRef.current.text).trim();
|
|
5770
5831
|
const stagedAttachment = dockRef.current.attachments.some((a) => a.part !== null);
|
|
@@ -5786,14 +5847,14 @@ function DefaultWidget({
|
|
|
5786
5847
|
},
|
|
5787
5848
|
[activeId, openNewConversation, store]
|
|
5788
5849
|
);
|
|
5789
|
-
|
|
5850
|
+
useEffect16(() => {
|
|
5790
5851
|
if (!activeId || pendingDockText.current == null) return;
|
|
5791
5852
|
const text = pendingDockText.current;
|
|
5792
5853
|
pendingDockText.current = null;
|
|
5793
5854
|
void dockRef.current.submit({ text, conversationId: activeId });
|
|
5794
5855
|
}, [activeId]);
|
|
5795
|
-
const [menuOpen, setMenuOpen] =
|
|
5796
|
-
|
|
5856
|
+
const [menuOpen, setMenuOpen] = useState16(false);
|
|
5857
|
+
useEffect16(() => {
|
|
5797
5858
|
if (!menuOpen) return;
|
|
5798
5859
|
const close = () => setMenuOpen(false);
|
|
5799
5860
|
const onKey = (event) => {
|
|
@@ -5806,7 +5867,7 @@ function DefaultWidget({
|
|
|
5806
5867
|
document.removeEventListener("keydown", onKey);
|
|
5807
5868
|
};
|
|
5808
5869
|
}, [menuOpen]);
|
|
5809
|
-
const goBack =
|
|
5870
|
+
const goBack = useCallback14(() => {
|
|
5810
5871
|
if (subView === "content-detail") {
|
|
5811
5872
|
const tabId = activeTab.startsWith("content:") ? activeTab.slice(8) : null;
|
|
5812
5873
|
const activeContentTab = tabId ? contentTabs.find((t2) => t2.id === tabId) : null;
|
|
@@ -5833,7 +5894,7 @@ function DefaultWidget({
|
|
|
5833
5894
|
setActiveConversation(null);
|
|
5834
5895
|
setSubView(null);
|
|
5835
5896
|
}, [setActiveConversation, subView, activeTab, contentTabs, contentCategoryName, client, store]);
|
|
5836
|
-
const switchTab =
|
|
5897
|
+
const switchTab = useCallback14(
|
|
5837
5898
|
(tab) => {
|
|
5838
5899
|
tabStateRef.current[activeTab] = { subView, activeId };
|
|
5839
5900
|
const saved = tabStateRef.current[tab];
|
|
@@ -5848,7 +5909,7 @@ function DefaultWidget({
|
|
|
5848
5909
|
[activeTab, subView, activeId, setActiveConversation]
|
|
5849
5910
|
);
|
|
5850
5911
|
const pendingContentDetail = useWidgetStore((s) => s.pendingContentDetail);
|
|
5851
|
-
|
|
5912
|
+
useEffect16(() => {
|
|
5852
5913
|
if (!pendingContentDetail) return;
|
|
5853
5914
|
const { slug, tabId } = pendingContentDetail;
|
|
5854
5915
|
markEntrySeen(slug);
|
|
@@ -5858,7 +5919,7 @@ function DefaultWidget({
|
|
|
5858
5919
|
store.getState().setPendingContentDetail(null);
|
|
5859
5920
|
}, [pendingContentDetail, markEntrySeen, switchTab, store]);
|
|
5860
5921
|
const setStoreOpen = useWidgetStore((s) => s.setOpen);
|
|
5861
|
-
const handleBubbleClick =
|
|
5922
|
+
const handleBubbleClick = useCallback14(() => {
|
|
5862
5923
|
if (storeIsOpen) {
|
|
5863
5924
|
const leavingId = store.getState().activeConversationId;
|
|
5864
5925
|
if (leavingId && !leavingId.startsWith("temp-")) {
|
|
@@ -5878,7 +5939,7 @@ function DefaultWidget({
|
|
|
5878
5939
|
setStoreOpen(true);
|
|
5879
5940
|
}
|
|
5880
5941
|
}, [storeIsOpen, setStoreOpen, client, store]);
|
|
5881
|
-
const handleClose =
|
|
5942
|
+
const handleClose = useCallback14(() => {
|
|
5882
5943
|
const leavingId = store.getState().activeConversationId;
|
|
5883
5944
|
if (leavingId && !leavingId.startsWith("temp-")) {
|
|
5884
5945
|
store.getState().clearUnread(leavingId);
|
|
@@ -5891,7 +5952,7 @@ function DefaultWidget({
|
|
|
5891
5952
|
setStoreOpen(false);
|
|
5892
5953
|
}, 200);
|
|
5893
5954
|
}, [setStoreOpen, client, store]);
|
|
5894
|
-
const handleNewConversation =
|
|
5955
|
+
const handleNewConversation = useCallback14(async () => {
|
|
5895
5956
|
const trimmed = newText.trim();
|
|
5896
5957
|
if (!trimmed || isCreating) return;
|
|
5897
5958
|
const conv = await create(trimmed);
|
|
@@ -5900,16 +5961,16 @@ function DefaultWidget({
|
|
|
5900
5961
|
setSubView("conversation");
|
|
5901
5962
|
}
|
|
5902
5963
|
}, [newText, isCreating, create]);
|
|
5903
|
-
const windowRef =
|
|
5904
|
-
const bubbleRef =
|
|
5905
|
-
const tabStateRef =
|
|
5906
|
-
const touchStartY =
|
|
5907
|
-
const touchDeltaY =
|
|
5908
|
-
const handleTouchStart =
|
|
5964
|
+
const windowRef = useRef17(null);
|
|
5965
|
+
const bubbleRef = useRef17(null);
|
|
5966
|
+
const tabStateRef = useRef17({});
|
|
5967
|
+
const touchStartY = useRef17(0);
|
|
5968
|
+
const touchDeltaY = useRef17(0);
|
|
5969
|
+
const handleTouchStart = useCallback14((e) => {
|
|
5909
5970
|
touchStartY.current = e.touches[0]?.clientY ?? 0;
|
|
5910
5971
|
touchDeltaY.current = 0;
|
|
5911
5972
|
}, []);
|
|
5912
|
-
const handleTouchMove =
|
|
5973
|
+
const handleTouchMove = useCallback14((e) => {
|
|
5913
5974
|
const delta = (e.touches[0]?.clientY ?? 0) - touchStartY.current;
|
|
5914
5975
|
touchDeltaY.current = delta;
|
|
5915
5976
|
if (delta > 0 && windowRef.current) {
|
|
@@ -5917,7 +5978,7 @@ function DefaultWidget({
|
|
|
5917
5978
|
windowRef.current.style.opacity = `${Math.max(1 - delta / 400, 0.5)}`;
|
|
5918
5979
|
}
|
|
5919
5980
|
}, []);
|
|
5920
|
-
const handleTouchEnd =
|
|
5981
|
+
const handleTouchEnd = useCallback14(() => {
|
|
5921
5982
|
if (windowRef.current) {
|
|
5922
5983
|
windowRef.current.style.transform = "";
|
|
5923
5984
|
windowRef.current.style.opacity = "";
|
|
@@ -5926,13 +5987,14 @@ function DefaultWidget({
|
|
|
5926
5987
|
handleClose();
|
|
5927
5988
|
}
|
|
5928
5989
|
}, [handleClose]);
|
|
5929
|
-
|
|
5990
|
+
useEffect16(() => {
|
|
5930
5991
|
if (!isOpen || !windowRef.current) return;
|
|
5931
5992
|
const vv = window.visualViewport;
|
|
5932
5993
|
if (!vv) return;
|
|
5933
5994
|
const win = windowRef.current;
|
|
5934
5995
|
const applyHeight = () => {
|
|
5935
5996
|
win.style.setProperty("--hw-visible-height", `${vv.height}px`);
|
|
5997
|
+
win.toggleAttribute("data-hw-keyboard", window.innerHeight - vv.height > 120);
|
|
5936
5998
|
};
|
|
5937
5999
|
applyHeight();
|
|
5938
6000
|
vv.addEventListener("resize", applyHeight);
|
|
@@ -5941,9 +6003,10 @@ function DefaultWidget({
|
|
|
5941
6003
|
vv.removeEventListener("resize", applyHeight);
|
|
5942
6004
|
vv.removeEventListener("scroll", applyHeight);
|
|
5943
6005
|
win.style.removeProperty("--hw-visible-height");
|
|
6006
|
+
win.removeAttribute("data-hw-keyboard");
|
|
5944
6007
|
};
|
|
5945
6008
|
}, [isOpen]);
|
|
5946
|
-
|
|
6009
|
+
useEffect16(() => {
|
|
5947
6010
|
if (!isOpen || !windowRef.current) return;
|
|
5948
6011
|
const win = windowRef.current;
|
|
5949
6012
|
const handleKeyDown = (e) => {
|
|
@@ -5959,7 +6022,7 @@ function DefaultWidget({
|
|
|
5959
6022
|
win.addEventListener("keydown", handleKeyDown);
|
|
5960
6023
|
return () => win.removeEventListener("keydown", handleKeyDown);
|
|
5961
6024
|
}, [isOpen, subView, handleClose, goBack]);
|
|
5962
|
-
|
|
6025
|
+
useEffect16(() => {
|
|
5963
6026
|
if (!isOpen || !windowRef.current || hideLauncher) return;
|
|
5964
6027
|
const win = windowRef.current;
|
|
5965
6028
|
const getFocusable = () => win.querySelectorAll(
|
|
@@ -6002,7 +6065,7 @@ function DefaultWidget({
|
|
|
6002
6065
|
const launcherStyle = agentConfig?.launcherStyle ?? "icon";
|
|
6003
6066
|
const bubbleStyle = agentConfig?.bubbleStyle ?? "rounded";
|
|
6004
6067
|
const hasUploadedAvatar = !!agentConfig?.avatarUrl;
|
|
6005
|
-
return /* @__PURE__ */
|
|
6068
|
+
return /* @__PURE__ */ jsxs12(
|
|
6006
6069
|
"div",
|
|
6007
6070
|
{
|
|
6008
6071
|
className: "hw-widget",
|
|
@@ -6018,7 +6081,7 @@ function DefaultWidget({
|
|
|
6018
6081
|
"--hw-window-left": widgetPosition === "bottom-left" ? "0" : "auto"
|
|
6019
6082
|
},
|
|
6020
6083
|
children: [
|
|
6021
|
-
placement === "docked" && isReady && /* @__PURE__ */
|
|
6084
|
+
placement === "docked" && isReady && /* @__PURE__ */ jsx17(
|
|
6022
6085
|
DockedBar,
|
|
6023
6086
|
{
|
|
6024
6087
|
value: dockComposer.text,
|
|
@@ -6036,16 +6099,16 @@ function DefaultWidget({
|
|
|
6036
6099
|
leading: customAvatar
|
|
6037
6100
|
}
|
|
6038
6101
|
),
|
|
6039
|
-
isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */
|
|
6040
|
-
/* @__PURE__ */
|
|
6041
|
-
/* @__PURE__ */
|
|
6042
|
-
/* @__PURE__ */
|
|
6102
|
+
isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */ jsx17("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-loading", children: [
|
|
6103
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
|
|
6104
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } }),
|
|
6105
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } })
|
|
6043
6106
|
] }) }),
|
|
6044
|
-
isOpen && hasBootstrapError && /* @__PURE__ */
|
|
6045
|
-
/* @__PURE__ */
|
|
6046
|
-
/* @__PURE__ */
|
|
6107
|
+
isOpen && hasBootstrapError && /* @__PURE__ */ jsx17("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs12("div", { className: "hw-bootstrap-error", children: [
|
|
6108
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-bootstrap-error-text", children: t("widget.error_desc") }),
|
|
6109
|
+
/* @__PURE__ */ jsx17("button", { type: "button", className: "hw-bootstrap-error-retry", onClick: retryBootstrap, children: t("widget.retry") })
|
|
6047
6110
|
] }) }),
|
|
6048
|
-
isOpen && isReady && /* @__PURE__ */
|
|
6111
|
+
isOpen && isReady && /* @__PURE__ */ jsxs12(
|
|
6049
6112
|
"div",
|
|
6050
6113
|
{
|
|
6051
6114
|
ref: windowRef,
|
|
@@ -6057,24 +6120,24 @@ function DefaultWidget({
|
|
|
6057
6120
|
onTouchMove: handleTouchMove,
|
|
6058
6121
|
onTouchEnd: handleTouchEnd,
|
|
6059
6122
|
children: [
|
|
6060
|
-
/* @__PURE__ */
|
|
6061
|
-
wsDisconnected && /* @__PURE__ */
|
|
6062
|
-
/* @__PURE__ */
|
|
6123
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-drag-handle", children: /* @__PURE__ */ jsx17("div", { className: "hw-drag-handle-pill" }) }),
|
|
6124
|
+
wsDisconnected && /* @__PURE__ */ jsxs12("div", { className: "hw-disconnect", children: [
|
|
6125
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-disconnect-spinner" }),
|
|
6063
6126
|
t("widget.reconnecting")
|
|
6064
6127
|
] }),
|
|
6065
6128
|
(subView === "content-detail" || subView === "content-category") && (() => {
|
|
6066
6129
|
const tabId = activeTab.replace("content:", "");
|
|
6067
6130
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6068
6131
|
const headerTitle = subView === "content-category" && contentCategoryName ? contentCategoryName : contentTab?.label ? resolveLabel2(contentTab.label) : t("widget.content");
|
|
6069
|
-
return /* @__PURE__ */
|
|
6070
|
-
/* @__PURE__ */
|
|
6132
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-header hw-header--centered", children: [
|
|
6133
|
+
/* @__PURE__ */ jsx17(
|
|
6071
6134
|
"button",
|
|
6072
6135
|
{
|
|
6073
6136
|
type: "button",
|
|
6074
6137
|
className: "hw-header-back",
|
|
6075
6138
|
onClick: goBack,
|
|
6076
6139
|
"aria-label": t("widget.aria_back"),
|
|
6077
|
-
children: /* @__PURE__ */
|
|
6140
|
+
children: /* @__PURE__ */ jsx17(
|
|
6078
6141
|
"svg",
|
|
6079
6142
|
{
|
|
6080
6143
|
viewBox: "0 0 24 24",
|
|
@@ -6083,33 +6146,33 @@ function DefaultWidget({
|
|
|
6083
6146
|
strokeWidth: 2,
|
|
6084
6147
|
strokeLinecap: "round",
|
|
6085
6148
|
strokeLinejoin: "round",
|
|
6086
|
-
children: /* @__PURE__ */
|
|
6149
|
+
children: /* @__PURE__ */ jsx17("path", { d: "M15 18l-6-6 6-6" })
|
|
6087
6150
|
}
|
|
6088
6151
|
)
|
|
6089
6152
|
}
|
|
6090
6153
|
),
|
|
6091
|
-
/* @__PURE__ */
|
|
6092
|
-
/* @__PURE__ */
|
|
6154
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-header-title", children: headerTitle }),
|
|
6155
|
+
/* @__PURE__ */ jsx17(
|
|
6093
6156
|
"button",
|
|
6094
6157
|
{
|
|
6095
6158
|
type: "button",
|
|
6096
6159
|
className: "hw-header-close",
|
|
6097
6160
|
onClick: handleClose,
|
|
6098
6161
|
"aria-label": t("widget.aria_close"),
|
|
6099
|
-
children: /* @__PURE__ */
|
|
6162
|
+
children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
|
|
6100
6163
|
}
|
|
6101
6164
|
)
|
|
6102
6165
|
] });
|
|
6103
6166
|
})(),
|
|
6104
|
-
subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */
|
|
6105
|
-
/* @__PURE__ */
|
|
6167
|
+
subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs12("div", { className: "hw-header hw-header--sub", children: [
|
|
6168
|
+
/* @__PURE__ */ jsx17(
|
|
6106
6169
|
"button",
|
|
6107
6170
|
{
|
|
6108
6171
|
type: "button",
|
|
6109
6172
|
className: "hw-header-back",
|
|
6110
6173
|
onClick: goBack,
|
|
6111
6174
|
"aria-label": t("widget.aria_back"),
|
|
6112
|
-
children: /* @__PURE__ */
|
|
6175
|
+
children: /* @__PURE__ */ jsx17(
|
|
6113
6176
|
"svg",
|
|
6114
6177
|
{
|
|
6115
6178
|
viewBox: "0 0 24 24",
|
|
@@ -6118,26 +6181,34 @@ function DefaultWidget({
|
|
|
6118
6181
|
strokeWidth: 2,
|
|
6119
6182
|
strokeLinecap: "round",
|
|
6120
6183
|
strokeLinejoin: "round",
|
|
6121
|
-
children: /* @__PURE__ */
|
|
6184
|
+
children: /* @__PURE__ */ jsx17("path", { d: "M15 18l-6-6 6-6" })
|
|
6122
6185
|
}
|
|
6123
6186
|
)
|
|
6124
6187
|
}
|
|
6125
6188
|
),
|
|
6126
|
-
/* @__PURE__ */
|
|
6127
|
-
/* @__PURE__ */
|
|
6189
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-header-identity", children: [
|
|
6190
|
+
/* @__PURE__ */ jsx17(
|
|
6128
6191
|
"div",
|
|
6129
6192
|
{
|
|
6130
6193
|
className: `hw-header-bot-icon${hasTeamAgent ? " hw-header-bot-icon--team" : ""}`,
|
|
6131
|
-
children: hasTeamAgent && humanImage ? /* @__PURE__ */
|
|
6194
|
+
children: hasTeamAgent && humanImage ? /* @__PURE__ */ jsx17(
|
|
6195
|
+
"img",
|
|
6196
|
+
{
|
|
6197
|
+
src: humanImage,
|
|
6198
|
+
alt: headerName,
|
|
6199
|
+
className: "hw-header-agent-img",
|
|
6200
|
+
referrerPolicy: "no-referrer"
|
|
6201
|
+
}
|
|
6202
|
+
) : hasTeamAgent ? /* @__PURE__ */ jsx17("span", { className: "hw-header-agent-initials", children: headerName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx17(WidgetLogo, {})
|
|
6132
6203
|
}
|
|
6133
6204
|
),
|
|
6134
|
-
/* @__PURE__ */
|
|
6135
|
-
/* @__PURE__ */
|
|
6136
|
-
/* @__PURE__ */
|
|
6205
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-header-info", children: [
|
|
6206
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-header-name", children: headerName }),
|
|
6207
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-header-status", children: subtitleText })
|
|
6137
6208
|
] })
|
|
6138
6209
|
] }),
|
|
6139
|
-
/* @__PURE__ */
|
|
6140
|
-
/* @__PURE__ */
|
|
6210
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-header-actions", children: [
|
|
6211
|
+
/* @__PURE__ */ jsx17(
|
|
6141
6212
|
"button",
|
|
6142
6213
|
{
|
|
6143
6214
|
type: "button",
|
|
@@ -6149,21 +6220,21 @@ function DefaultWidget({
|
|
|
6149
6220
|
event.stopPropagation();
|
|
6150
6221
|
setMenuOpen((open) => !open);
|
|
6151
6222
|
},
|
|
6152
|
-
children: /* @__PURE__ */
|
|
6223
|
+
children: /* @__PURE__ */ jsx17(DotsIcon, { size: 18 })
|
|
6153
6224
|
}
|
|
6154
6225
|
),
|
|
6155
|
-
/* @__PURE__ */
|
|
6226
|
+
/* @__PURE__ */ jsx17(
|
|
6156
6227
|
"button",
|
|
6157
6228
|
{
|
|
6158
6229
|
type: "button",
|
|
6159
6230
|
className: "hw-header-close",
|
|
6160
6231
|
onClick: handleClose,
|
|
6161
6232
|
"aria-label": t("widget.aria_close"),
|
|
6162
|
-
children: /* @__PURE__ */
|
|
6233
|
+
children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
|
|
6163
6234
|
}
|
|
6164
6235
|
),
|
|
6165
|
-
menuOpen && /* @__PURE__ */
|
|
6166
|
-
conversations.length > 0 && /* @__PURE__ */
|
|
6236
|
+
menuOpen && /* @__PURE__ */ jsxs12("div", { className: "hw-header-menu", role: "menu", children: [
|
|
6237
|
+
conversations.length > 0 && /* @__PURE__ */ jsx17("div", { className: "hw-header-menu-convs", children: conversations.slice(0, 3).map((conv) => /* @__PURE__ */ jsxs12(
|
|
6167
6238
|
"button",
|
|
6168
6239
|
{
|
|
6169
6240
|
type: "button",
|
|
@@ -6175,16 +6246,16 @@ function DefaultWidget({
|
|
|
6175
6246
|
openConversation(conv.id);
|
|
6176
6247
|
},
|
|
6177
6248
|
children: [
|
|
6178
|
-
/* @__PURE__ */
|
|
6179
|
-
/* @__PURE__ */
|
|
6180
|
-
conv.lastMessageAt && /* @__PURE__ */
|
|
6249
|
+
/* @__PURE__ */ jsxs12("span", { className: "hw-header-menu-conv-top", children: [
|
|
6250
|
+
/* @__PURE__ */ jsx17("span", { className: "hw-header-menu-conv-name", children: conversationIdentity(conv).humanName ?? companyName }),
|
|
6251
|
+
conv.lastMessageAt && /* @__PURE__ */ jsx17("span", { className: "hw-header-menu-conv-time", children: formatRelativeTime(conv.lastMessageAt) })
|
|
6181
6252
|
] }),
|
|
6182
|
-
/* @__PURE__ */
|
|
6253
|
+
/* @__PURE__ */ jsx17("span", { className: "hw-header-menu-conv-preview", children: conv.lastMessageText ?? t("widget.no_preview") })
|
|
6183
6254
|
]
|
|
6184
6255
|
},
|
|
6185
6256
|
conv.id
|
|
6186
6257
|
)) }),
|
|
6187
|
-
/* @__PURE__ */
|
|
6258
|
+
/* @__PURE__ */ jsxs12(
|
|
6188
6259
|
"button",
|
|
6189
6260
|
{
|
|
6190
6261
|
type: "button",
|
|
@@ -6194,7 +6265,7 @@ function DefaultWidget({
|
|
|
6194
6265
|
openNewConversation();
|
|
6195
6266
|
},
|
|
6196
6267
|
children: [
|
|
6197
|
-
/* @__PURE__ */
|
|
6268
|
+
/* @__PURE__ */ jsx17(NewChatIcon, { size: 16 }),
|
|
6198
6269
|
t("widget.new_conversation")
|
|
6199
6270
|
]
|
|
6200
6271
|
}
|
|
@@ -6202,43 +6273,43 @@ function DefaultWidget({
|
|
|
6202
6273
|
] })
|
|
6203
6274
|
] })
|
|
6204
6275
|
] }),
|
|
6205
|
-
subView === null && activeTab === "home" && /* @__PURE__ */
|
|
6206
|
-
/* @__PURE__ */
|
|
6207
|
-
/* @__PURE__ */
|
|
6208
|
-
/* @__PURE__ */
|
|
6209
|
-
/* @__PURE__ */
|
|
6276
|
+
subView === null && activeTab === "home" && /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6277
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-hero", children: [
|
|
6278
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-hero-top", children: [
|
|
6279
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-hero-bot-icon", children: /* @__PURE__ */ jsx17(WidgetLogo, {}) }),
|
|
6280
|
+
/* @__PURE__ */ jsx17(
|
|
6210
6281
|
"button",
|
|
6211
6282
|
{
|
|
6212
6283
|
type: "button",
|
|
6213
6284
|
className: "hw-hero-close",
|
|
6214
6285
|
onClick: handleClose,
|
|
6215
6286
|
"aria-label": t("widget.aria_close"),
|
|
6216
|
-
children: /* @__PURE__ */
|
|
6287
|
+
children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
|
|
6217
6288
|
}
|
|
6218
6289
|
)
|
|
6219
6290
|
] }),
|
|
6220
|
-
/* @__PURE__ */
|
|
6291
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs12(
|
|
6221
6292
|
"span",
|
|
6222
6293
|
{
|
|
6223
6294
|
className: i === 0 ? "hw-hero-greeting-name" : "hw-hero-greeting-question",
|
|
6224
6295
|
children: [
|
|
6225
|
-
i > 0 && /* @__PURE__ */
|
|
6296
|
+
i > 0 && /* @__PURE__ */ jsx17("br", {}),
|
|
6226
6297
|
line
|
|
6227
6298
|
]
|
|
6228
6299
|
},
|
|
6229
6300
|
i
|
|
6230
6301
|
)) }),
|
|
6231
|
-
/* @__PURE__ */
|
|
6302
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-hero-subtitle", children: subtitleText })
|
|
6232
6303
|
] }),
|
|
6233
|
-
/* @__PURE__ */
|
|
6234
|
-
/* @__PURE__ */
|
|
6235
|
-
/* @__PURE__ */
|
|
6236
|
-
/* @__PURE__ */
|
|
6237
|
-
/* @__PURE__ */
|
|
6304
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-sheet", children: /* @__PURE__ */ jsxs12("div", { className: "hw-sheet-inner", children: [
|
|
6305
|
+
/* @__PURE__ */ jsxs12("button", { type: "button", className: "hw-card", onClick: openNewConversation, children: [
|
|
6306
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-card-body", children: [
|
|
6307
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-card-title", children: t("widget.send_us_message") }),
|
|
6308
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-card-meta", children: t("widget.reply_time") })
|
|
6238
6309
|
] }),
|
|
6239
|
-
/* @__PURE__ */
|
|
6310
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx17(SendIcon, {}) })
|
|
6240
6311
|
] }),
|
|
6241
|
-
announcementTabs.length > 0 && /* @__PURE__ */
|
|
6312
|
+
announcementTabs.length > 0 && /* @__PURE__ */ jsx17(
|
|
6242
6313
|
WhatsNewCard,
|
|
6243
6314
|
{
|
|
6244
6315
|
getUnseenEntries,
|
|
@@ -6254,7 +6325,7 @@ function DefaultWidget({
|
|
|
6254
6325
|
}
|
|
6255
6326
|
}
|
|
6256
6327
|
),
|
|
6257
|
-
/* @__PURE__ */
|
|
6328
|
+
/* @__PURE__ */ jsx17(
|
|
6258
6329
|
HomeView,
|
|
6259
6330
|
{
|
|
6260
6331
|
conversations,
|
|
@@ -6264,17 +6335,17 @@ function DefaultWidget({
|
|
|
6264
6335
|
)
|
|
6265
6336
|
] }) })
|
|
6266
6337
|
] }),
|
|
6267
|
-
subView === null && activeTab === "messages" && /* @__PURE__ */
|
|
6268
|
-
/* @__PURE__ */
|
|
6269
|
-
/* @__PURE__ */
|
|
6270
|
-
/* @__PURE__ */
|
|
6338
|
+
subView === null && activeTab === "messages" && /* @__PURE__ */ jsxs12("div", { className: "hw-header hw-header--centered", children: [
|
|
6339
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-header-spacer" }),
|
|
6340
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-header-title", children: t("widget.messages") }),
|
|
6341
|
+
/* @__PURE__ */ jsx17(
|
|
6271
6342
|
"button",
|
|
6272
6343
|
{
|
|
6273
6344
|
type: "button",
|
|
6274
6345
|
className: "hw-header-close",
|
|
6275
6346
|
onClick: handleClose,
|
|
6276
6347
|
"aria-label": t("widget.aria_close"),
|
|
6277
|
-
children: /* @__PURE__ */
|
|
6348
|
+
children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
|
|
6278
6349
|
}
|
|
6279
6350
|
)
|
|
6280
6351
|
] }),
|
|
@@ -6282,23 +6353,23 @@ function DefaultWidget({
|
|
|
6282
6353
|
const tabId = activeTab.replace("content:", "");
|
|
6283
6354
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6284
6355
|
if (!contentTab) return null;
|
|
6285
|
-
return /* @__PURE__ */
|
|
6286
|
-
/* @__PURE__ */
|
|
6287
|
-
/* @__PURE__ */
|
|
6288
|
-
/* @__PURE__ */
|
|
6356
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-header hw-header--centered", children: [
|
|
6357
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-header-spacer" }),
|
|
6358
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-header-title", children: resolveLabel2(contentTab.label) }),
|
|
6359
|
+
/* @__PURE__ */ jsx17(
|
|
6289
6360
|
"button",
|
|
6290
6361
|
{
|
|
6291
6362
|
type: "button",
|
|
6292
6363
|
className: "hw-header-close",
|
|
6293
6364
|
onClick: handleClose,
|
|
6294
6365
|
"aria-label": t("widget.aria_close"),
|
|
6295
|
-
children: /* @__PURE__ */
|
|
6366
|
+
children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
|
|
6296
6367
|
}
|
|
6297
6368
|
)
|
|
6298
6369
|
] });
|
|
6299
6370
|
})(),
|
|
6300
|
-
(subView !== null || activeTab !== "home") && /* @__PURE__ */
|
|
6301
|
-
subView === null && activeTab === "messages" && /* @__PURE__ */
|
|
6371
|
+
(subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs12("div", { className: "hw-content", children: [
|
|
6372
|
+
subView === null && activeTab === "messages" && /* @__PURE__ */ jsx17(
|
|
6302
6373
|
MessagesView,
|
|
6303
6374
|
{
|
|
6304
6375
|
conversations,
|
|
@@ -6306,7 +6377,7 @@ function DefaultWidget({
|
|
|
6306
6377
|
onNewClick: openNewConversation
|
|
6307
6378
|
}
|
|
6308
6379
|
),
|
|
6309
|
-
subView === "new" && /* @__PURE__ */
|
|
6380
|
+
subView === "new" && /* @__PURE__ */ jsx17(
|
|
6310
6381
|
NewConversationView,
|
|
6311
6382
|
{
|
|
6312
6383
|
text: newText,
|
|
@@ -6316,12 +6387,12 @@ function DefaultWidget({
|
|
|
6316
6387
|
welcomeMessage
|
|
6317
6388
|
}
|
|
6318
6389
|
),
|
|
6319
|
-
subView === "conversation" && activeId && /* @__PURE__ */
|
|
6390
|
+
subView === "conversation" && activeId && /* @__PURE__ */ jsx17(ConversationView, { conversationId: activeId, starters: dockSuggestions }),
|
|
6320
6391
|
activeTab.startsWith("content:") && (() => {
|
|
6321
6392
|
const tabId = activeTab.replace("content:", "");
|
|
6322
6393
|
const contentTab = contentTabs.find((t2) => t2.id === tabId);
|
|
6323
6394
|
if (!contentTab) return null;
|
|
6324
|
-
return /* @__PURE__ */
|
|
6395
|
+
return /* @__PURE__ */ jsx17(
|
|
6325
6396
|
ContentTabView,
|
|
6326
6397
|
{
|
|
6327
6398
|
tab: contentTab,
|
|
@@ -6341,7 +6412,7 @@ function DefaultWidget({
|
|
|
6341
6412
|
);
|
|
6342
6413
|
})()
|
|
6343
6414
|
] }),
|
|
6344
|
-
showTabBar && /* @__PURE__ */
|
|
6415
|
+
showTabBar && /* @__PURE__ */ jsx17(
|
|
6345
6416
|
TabBar,
|
|
6346
6417
|
{
|
|
6347
6418
|
activeTab,
|
|
@@ -6352,20 +6423,20 @@ function DefaultWidget({
|
|
|
6352
6423
|
unseenAnnouncementCount
|
|
6353
6424
|
}
|
|
6354
6425
|
),
|
|
6355
|
-
/* @__PURE__ */
|
|
6426
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-powered", children: [
|
|
6356
6427
|
t("widget.powered_by"),
|
|
6357
6428
|
" ",
|
|
6358
|
-
/* @__PURE__ */
|
|
6429
|
+
/* @__PURE__ */ jsx17("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
|
|
6359
6430
|
] })
|
|
6360
6431
|
]
|
|
6361
6432
|
}
|
|
6362
6433
|
),
|
|
6363
|
-
isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */
|
|
6364
|
-
/* @__PURE__ */
|
|
6434
|
+
isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsxs12("div", { className: "hw-preview-dock", children: [
|
|
6435
|
+
/* @__PURE__ */ jsx17(
|
|
6365
6436
|
AnnouncementPreviews,
|
|
6366
6437
|
{
|
|
6367
6438
|
maxVisible: incomingPreview ? 1 : 2,
|
|
6368
|
-
avatar: /* @__PURE__ */
|
|
6439
|
+
avatar: /* @__PURE__ */ jsx17(WidgetLogo, {}),
|
|
6369
6440
|
onOpen: (slug, tabId) => {
|
|
6370
6441
|
markEntrySeen(slug);
|
|
6371
6442
|
handleBubbleClick();
|
|
@@ -6377,10 +6448,10 @@ function DefaultWidget({
|
|
|
6377
6448
|
}
|
|
6378
6449
|
}
|
|
6379
6450
|
),
|
|
6380
|
-
/* @__PURE__ */
|
|
6451
|
+
/* @__PURE__ */ jsx17(MessagePreview, { onOpen: handleBubbleClick, avatar: /* @__PURE__ */ jsx17(WidgetLogo, {}), autoDismissMs: null })
|
|
6381
6452
|
] }),
|
|
6382
|
-
/* @__PURE__ */
|
|
6383
|
-
isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */
|
|
6453
|
+
/* @__PURE__ */ jsx17(WidgetDebugOverlay, {}),
|
|
6454
|
+
isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */ jsxs12(
|
|
6384
6455
|
"button",
|
|
6385
6456
|
{
|
|
6386
6457
|
ref: bubbleRef,
|
|
@@ -6397,24 +6468,24 @@ function DefaultWidget({
|
|
|
6397
6468
|
"aria-expanded": isOpen,
|
|
6398
6469
|
"aria-haspopup": "dialog",
|
|
6399
6470
|
children: [
|
|
6400
|
-
/* @__PURE__ */
|
|
6471
|
+
/* @__PURE__ */ jsx17(
|
|
6401
6472
|
"span",
|
|
6402
6473
|
{
|
|
6403
6474
|
className: `hw-bubble-icon hw-bubble-icon--bot ${isOpen ? "hw-bubble-icon--hidden" : ""}`,
|
|
6404
|
-
children: /* @__PURE__ */
|
|
6475
|
+
children: /* @__PURE__ */ jsx17(LauncherIcon, {})
|
|
6405
6476
|
}
|
|
6406
6477
|
),
|
|
6407
|
-
/* @__PURE__ */
|
|
6478
|
+
/* @__PURE__ */ jsx17(
|
|
6408
6479
|
"span",
|
|
6409
6480
|
{
|
|
6410
6481
|
className: `hw-bubble-icon hw-bubble-icon--close ${!isOpen ? "hw-bubble-icon--hidden" : ""}`,
|
|
6411
|
-
children: /* @__PURE__ */
|
|
6482
|
+
children: /* @__PURE__ */ jsx17(XIcon, { size: 24 })
|
|
6412
6483
|
}
|
|
6413
6484
|
),
|
|
6414
|
-
launcherStyle !== "icon" && !isOpen && /* @__PURE__ */
|
|
6415
|
-
!isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */
|
|
6485
|
+
launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx17("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
|
|
6486
|
+
!isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsxs12("div", { className: "hw-bubble-badge", children: [
|
|
6416
6487
|
totalUnread > 0 ? totalUnread : "",
|
|
6417
|
-
totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */
|
|
6488
|
+
totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsx17("span", { className: "hw-bubble-badge-dot" })
|
|
6418
6489
|
] })
|
|
6419
6490
|
]
|
|
6420
6491
|
}
|
|
@@ -6431,8 +6502,8 @@ function TabBar({
|
|
|
6431
6502
|
showMessagesTab = true,
|
|
6432
6503
|
unseenAnnouncementCount = 0
|
|
6433
6504
|
}) {
|
|
6434
|
-
return /* @__PURE__ */
|
|
6435
|
-
/* @__PURE__ */
|
|
6505
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-tabs", role: "tablist", children: [
|
|
6506
|
+
/* @__PURE__ */ jsxs12(
|
|
6436
6507
|
"button",
|
|
6437
6508
|
{
|
|
6438
6509
|
type: "button",
|
|
@@ -6441,12 +6512,12 @@ function TabBar({
|
|
|
6441
6512
|
role: "tab",
|
|
6442
6513
|
"aria-selected": activeTab === "home",
|
|
6443
6514
|
children: [
|
|
6444
|
-
/* @__PURE__ */
|
|
6445
|
-
/* @__PURE__ */
|
|
6515
|
+
/* @__PURE__ */ jsx17(HomeIcon, {}),
|
|
6516
|
+
/* @__PURE__ */ jsx17("span", { children: t("widget.home") })
|
|
6446
6517
|
]
|
|
6447
6518
|
}
|
|
6448
6519
|
),
|
|
6449
|
-
showMessagesTab && /* @__PURE__ */
|
|
6520
|
+
showMessagesTab && /* @__PURE__ */ jsxs12(
|
|
6450
6521
|
"button",
|
|
6451
6522
|
{
|
|
6452
6523
|
type: "button",
|
|
@@ -6455,15 +6526,15 @@ function TabBar({
|
|
|
6455
6526
|
role: "tab",
|
|
6456
6527
|
"aria-selected": activeTab === "messages",
|
|
6457
6528
|
children: [
|
|
6458
|
-
/* @__PURE__ */
|
|
6459
|
-
/* @__PURE__ */
|
|
6460
|
-
unreadCount > 0 && /* @__PURE__ */
|
|
6529
|
+
/* @__PURE__ */ jsxs12("span", { className: "hw-tabs-icon-wrap", children: [
|
|
6530
|
+
/* @__PURE__ */ jsx17(MessagesIcon, {}),
|
|
6531
|
+
unreadCount > 0 && /* @__PURE__ */ jsx17("span", { className: "hw-tabs-badge", children: unreadCount > 99 ? "99+" : unreadCount })
|
|
6461
6532
|
] }),
|
|
6462
|
-
/* @__PURE__ */
|
|
6533
|
+
/* @__PURE__ */ jsx17("span", { children: t("widget.messages") })
|
|
6463
6534
|
]
|
|
6464
6535
|
}
|
|
6465
6536
|
),
|
|
6466
|
-
contentTabs.map((tab) => /* @__PURE__ */
|
|
6537
|
+
contentTabs.map((tab) => /* @__PURE__ */ jsxs12(
|
|
6467
6538
|
"button",
|
|
6468
6539
|
{
|
|
6469
6540
|
type: "button",
|
|
@@ -6472,11 +6543,11 @@ function TabBar({
|
|
|
6472
6543
|
role: "tab",
|
|
6473
6544
|
"aria-selected": activeTab === `content:${tab.id}`,
|
|
6474
6545
|
children: [
|
|
6475
|
-
/* @__PURE__ */
|
|
6476
|
-
/* @__PURE__ */
|
|
6477
|
-
tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */
|
|
6546
|
+
/* @__PURE__ */ jsxs12("span", { className: "hw-tabs-icon-wrap", children: [
|
|
6547
|
+
/* @__PURE__ */ jsx17(ContentTabIconComponent, { icon: tab.icon }),
|
|
6548
|
+
tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */ jsx17("span", { className: "hw-tabs-dot" })
|
|
6478
6549
|
] }),
|
|
6479
|
-
/* @__PURE__ */
|
|
6550
|
+
/* @__PURE__ */ jsx17("span", { children: resolveLabel2(tab.label) })
|
|
6480
6551
|
]
|
|
6481
6552
|
},
|
|
6482
6553
|
tab.id
|
|
@@ -6490,9 +6561,9 @@ function HomeView({
|
|
|
6490
6561
|
}) {
|
|
6491
6562
|
const recent = conversations.slice(0, 3);
|
|
6492
6563
|
if (recent.length === 0) return null;
|
|
6493
|
-
return /* @__PURE__ */
|
|
6494
|
-
/* @__PURE__ */
|
|
6495
|
-
recent.map((conv, i) => /* @__PURE__ */
|
|
6564
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-recent-card", children: [
|
|
6565
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-recent-header", children: t("widget.recent_conversations") }),
|
|
6566
|
+
recent.map((conv, i) => /* @__PURE__ */ jsx17(
|
|
6496
6567
|
ConversationRow,
|
|
6497
6568
|
{
|
|
6498
6569
|
conversation: conv,
|
|
@@ -6501,7 +6572,7 @@ function HomeView({
|
|
|
6501
6572
|
},
|
|
6502
6573
|
conv.id
|
|
6503
6574
|
)),
|
|
6504
|
-
conversations.length > 3 && /* @__PURE__ */
|
|
6575
|
+
conversations.length > 3 && /* @__PURE__ */ jsx17("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
|
|
6505
6576
|
] });
|
|
6506
6577
|
}
|
|
6507
6578
|
function MessagesView({
|
|
@@ -6510,14 +6581,14 @@ function MessagesView({
|
|
|
6510
6581
|
onNewClick
|
|
6511
6582
|
}) {
|
|
6512
6583
|
if (conversations.length === 0) {
|
|
6513
|
-
return /* @__PURE__ */
|
|
6514
|
-
/* @__PURE__ */
|
|
6515
|
-
/* @__PURE__ */
|
|
6516
|
-
/* @__PURE__ */
|
|
6517
|
-
/* @__PURE__ */
|
|
6584
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-empty-state", children: [
|
|
6585
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-empty-icon-wrap", children: /* @__PURE__ */ jsx17(MessagesIcon, {}) }),
|
|
6586
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-empty-title", children: t("widget.no_messages") }),
|
|
6587
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-empty-desc", children: t("widget.no_messages_desc") }),
|
|
6588
|
+
/* @__PURE__ */ jsx17("button", { type: "button", className: "hw-empty-btn", onClick: onNewClick, children: t("widget.start_conversation") })
|
|
6518
6589
|
] });
|
|
6519
6590
|
}
|
|
6520
|
-
return /* @__PURE__ */
|
|
6591
|
+
return /* @__PURE__ */ jsx17("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx17(ConversationCard, { conversation: conv, onSelect }, conv.id)) });
|
|
6521
6592
|
}
|
|
6522
6593
|
function ConvCardBody({ conv }) {
|
|
6523
6594
|
const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
|
|
@@ -6525,14 +6596,22 @@ function ConvCardBody({ conv }) {
|
|
|
6525
6596
|
const isTeam = !!humanName;
|
|
6526
6597
|
const displayName = humanName ?? agentName;
|
|
6527
6598
|
const preview = conv.lastMessageText ?? t("widget.no_preview");
|
|
6528
|
-
return /* @__PURE__ */
|
|
6529
|
-
/* @__PURE__ */
|
|
6530
|
-
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6599
|
+
return /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6600
|
+
/* @__PURE__ */ jsx17("div", { className: `hw-conv-card-avatar${isTeam ? " hw-conv-card-avatar--team" : ""}`, children: isTeam ? humanImage ? /* @__PURE__ */ jsx17(
|
|
6601
|
+
"img",
|
|
6602
|
+
{
|
|
6603
|
+
src: humanImage,
|
|
6604
|
+
alt: displayName,
|
|
6605
|
+
className: "hw-conv-card-avatar-img",
|
|
6606
|
+
referrerPolicy: "no-referrer"
|
|
6607
|
+
}
|
|
6608
|
+
) : /* @__PURE__ */ jsx17("span", { className: "hw-conv-card-avatar-initials", children: displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx17(WidgetLogo, {}) }),
|
|
6609
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-conv-card-content", children: [
|
|
6610
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-conv-card-top", children: [
|
|
6611
|
+
/* @__PURE__ */ jsx17("span", { className: "hw-conv-card-name", children: displayName }),
|
|
6612
|
+
conv.lastMessageAt && /* @__PURE__ */ jsx17("span", { className: "hw-conv-card-time", children: formatRelativeTime(conv.lastMessageAt) })
|
|
6534
6613
|
] }),
|
|
6535
|
-
/* @__PURE__ */
|
|
6614
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-conv-card-preview", children: preview })
|
|
6536
6615
|
] })
|
|
6537
6616
|
] });
|
|
6538
6617
|
}
|
|
@@ -6542,16 +6621,16 @@ function ConversationCard({
|
|
|
6542
6621
|
}) {
|
|
6543
6622
|
const hasUnread = conv.unreadCount > 0;
|
|
6544
6623
|
const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
|
|
6545
|
-
return /* @__PURE__ */
|
|
6624
|
+
return /* @__PURE__ */ jsxs12(
|
|
6546
6625
|
"button",
|
|
6547
6626
|
{
|
|
6548
6627
|
type: "button",
|
|
6549
6628
|
className: `hw-conv-card ${hasUnread ? "hw-conv-card--unread" : ""}`,
|
|
6550
6629
|
onClick: () => onSelect(conv.id),
|
|
6551
6630
|
children: [
|
|
6552
|
-
/* @__PURE__ */
|
|
6553
|
-
hasUnread && /* @__PURE__ */
|
|
6554
|
-
awaiting && /* @__PURE__ */
|
|
6631
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx17(ConvCardBody, { conv }) }),
|
|
6632
|
+
hasUnread && /* @__PURE__ */ jsx17("div", { className: "hw-conv-card-badge", children: conv.unreadCount }),
|
|
6633
|
+
awaiting && /* @__PURE__ */ jsx17("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
|
|
6555
6634
|
]
|
|
6556
6635
|
}
|
|
6557
6636
|
);
|
|
@@ -6563,16 +6642,16 @@ function ConversationRow({
|
|
|
6563
6642
|
}) {
|
|
6564
6643
|
const hasUnread = conv.unreadCount > 0;
|
|
6565
6644
|
const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
|
|
6566
|
-
return /* @__PURE__ */
|
|
6645
|
+
return /* @__PURE__ */ jsxs12(
|
|
6567
6646
|
"button",
|
|
6568
6647
|
{
|
|
6569
6648
|
type: "button",
|
|
6570
6649
|
className: `hw-recent-row ${hasUnread ? "hw-recent-row--unread" : ""} ${isLast ? "hw-recent-row--last" : ""}`,
|
|
6571
6650
|
onClick: () => onSelect(conv.id),
|
|
6572
6651
|
children: [
|
|
6573
|
-
/* @__PURE__ */
|
|
6574
|
-
hasUnread && /* @__PURE__ */
|
|
6575
|
-
awaiting && /* @__PURE__ */
|
|
6652
|
+
/* @__PURE__ */ jsx17(ConvCardBody, { conv }),
|
|
6653
|
+
hasUnread && /* @__PURE__ */ jsx17("div", { className: "hw-recent-row-badge", children: conv.unreadCount }),
|
|
6654
|
+
awaiting && /* @__PURE__ */ jsx17("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
|
|
6576
6655
|
]
|
|
6577
6656
|
}
|
|
6578
6657
|
);
|
|
@@ -6580,10 +6659,10 @@ function ConversationRow({
|
|
|
6580
6659
|
function InlineEmailPrompt({ conversationId }) {
|
|
6581
6660
|
const { client, store } = useWidgetContext();
|
|
6582
6661
|
const updateContact = useWidgetStore((s) => s.updateVisitorContact);
|
|
6583
|
-
const [email, setEmail] =
|
|
6584
|
-
const [isSubmitting, setIsSubmitting] =
|
|
6585
|
-
const [isSuccess, setIsSuccess] =
|
|
6586
|
-
const [hasError, setHasError] =
|
|
6662
|
+
const [email, setEmail] = useState16("");
|
|
6663
|
+
const [isSubmitting, setIsSubmitting] = useState16(false);
|
|
6664
|
+
const [isSuccess, setIsSuccess] = useState16(false);
|
|
6665
|
+
const [hasError, setHasError] = useState16(false);
|
|
6587
6666
|
const handleSubmit = async () => {
|
|
6588
6667
|
const trimmed = email.trim();
|
|
6589
6668
|
if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
|
|
@@ -6624,8 +6703,8 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6624
6703
|
}
|
|
6625
6704
|
};
|
|
6626
6705
|
if (isSuccess) {
|
|
6627
|
-
return /* @__PURE__ */
|
|
6628
|
-
/* @__PURE__ */
|
|
6706
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-email-card hw-email-card--success", children: [
|
|
6707
|
+
/* @__PURE__ */ jsx17(
|
|
6629
6708
|
"svg",
|
|
6630
6709
|
{
|
|
6631
6710
|
width: "15",
|
|
@@ -6636,17 +6715,17 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6636
6715
|
strokeWidth: 2.5,
|
|
6637
6716
|
strokeLinecap: "round",
|
|
6638
6717
|
strokeLinejoin: "round",
|
|
6639
|
-
children: /* @__PURE__ */
|
|
6718
|
+
children: /* @__PURE__ */ jsx17("polyline", { points: "20 6 9 17 4 12" })
|
|
6640
6719
|
}
|
|
6641
6720
|
),
|
|
6642
6721
|
t("widget.email_saved")
|
|
6643
6722
|
] });
|
|
6644
6723
|
}
|
|
6645
|
-
return /* @__PURE__ */
|
|
6646
|
-
/* @__PURE__ */
|
|
6647
|
-
/* @__PURE__ */
|
|
6648
|
-
/* @__PURE__ */
|
|
6649
|
-
/* @__PURE__ */
|
|
6724
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-email-card", children: [
|
|
6725
|
+
/* @__PURE__ */ jsx17("p", { className: "hw-email-card-title", children: t("widget.email_title") }),
|
|
6726
|
+
/* @__PURE__ */ jsx17("p", { className: "hw-email-card-subtitle", children: t("widget.email_subtitle") }),
|
|
6727
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-email-card-row", children: [
|
|
6728
|
+
/* @__PURE__ */ jsx17(
|
|
6650
6729
|
"input",
|
|
6651
6730
|
{
|
|
6652
6731
|
type: "email",
|
|
@@ -6662,7 +6741,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6662
6741
|
placeholder: t("widget.email_placeholder")
|
|
6663
6742
|
}
|
|
6664
6743
|
),
|
|
6665
|
-
/* @__PURE__ */
|
|
6744
|
+
/* @__PURE__ */ jsx17(
|
|
6666
6745
|
"button",
|
|
6667
6746
|
{
|
|
6668
6747
|
type: "button",
|
|
@@ -6670,7 +6749,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6670
6749
|
onClick: handleSubmit,
|
|
6671
6750
|
disabled: isSubmitting || !email.trim(),
|
|
6672
6751
|
"aria-label": t("widget.email_continue"),
|
|
6673
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
6752
|
+
children: isSubmitting ? /* @__PURE__ */ jsx17(
|
|
6674
6753
|
"svg",
|
|
6675
6754
|
{
|
|
6676
6755
|
width: "14",
|
|
@@ -6680,7 +6759,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6680
6759
|
stroke: "currentColor",
|
|
6681
6760
|
strokeWidth: 2,
|
|
6682
6761
|
"aria-hidden": "true",
|
|
6683
|
-
children: /* @__PURE__ */
|
|
6762
|
+
children: /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx17(
|
|
6684
6763
|
"animate",
|
|
6685
6764
|
{
|
|
6686
6765
|
attributeName: "stroke-dashoffset",
|
|
@@ -6690,7 +6769,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6690
6769
|
}
|
|
6691
6770
|
) })
|
|
6692
6771
|
}
|
|
6693
|
-
) : /* @__PURE__ */
|
|
6772
|
+
) : /* @__PURE__ */ jsx17(
|
|
6694
6773
|
"svg",
|
|
6695
6774
|
{
|
|
6696
6775
|
width: "15",
|
|
@@ -6702,7 +6781,7 @@ function InlineEmailPrompt({ conversationId }) {
|
|
|
6702
6781
|
strokeLinecap: "round",
|
|
6703
6782
|
strokeLinejoin: "round",
|
|
6704
6783
|
"aria-hidden": "true",
|
|
6705
|
-
children: /* @__PURE__ */
|
|
6784
|
+
children: /* @__PURE__ */ jsx17("path", { d: "M5 12h13M12 5l7 7-7 7" })
|
|
6706
6785
|
}
|
|
6707
6786
|
)
|
|
6708
6787
|
}
|
|
@@ -6717,9 +6796,9 @@ function NewConversationView({
|
|
|
6717
6796
|
isSubmitting,
|
|
6718
6797
|
welcomeMessage
|
|
6719
6798
|
}) {
|
|
6720
|
-
return /* @__PURE__ */
|
|
6721
|
-
/* @__PURE__ */
|
|
6722
|
-
/* @__PURE__ */
|
|
6799
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-new", children: [
|
|
6800
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx17(MessageBubble, { text: welcomeMessage, sender: "ai", parts: null }) }),
|
|
6801
|
+
/* @__PURE__ */ jsx17(
|
|
6723
6802
|
Composer,
|
|
6724
6803
|
{
|
|
6725
6804
|
text,
|
|
@@ -6768,27 +6847,27 @@ function ConversationView({
|
|
|
6768
6847
|
const needsEmailPostReply = !!agentConfig?.requireVisitorEmail && !hasEmail && visitorMessageCount >= 2 && hasAiReply;
|
|
6769
6848
|
const needsEmail = needsEmailPostReply || !!emailGateConvId;
|
|
6770
6849
|
if (isLoading && items.length === 0) {
|
|
6771
|
-
return /* @__PURE__ */
|
|
6772
|
-
/* @__PURE__ */
|
|
6773
|
-
/* @__PURE__ */
|
|
6774
|
-
/* @__PURE__ */
|
|
6775
|
-
/* @__PURE__ */
|
|
6776
|
-
/* @__PURE__ */
|
|
6850
|
+
return /* @__PURE__ */ jsx17("div", { className: "hw-messages", children: /* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-messages", children: [
|
|
6851
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-msg", children: [
|
|
6852
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-avatar" }),
|
|
6853
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-bubble", children: [
|
|
6854
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 140 } }),
|
|
6855
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } })
|
|
6777
6856
|
] })
|
|
6778
6857
|
] }),
|
|
6779
|
-
/* @__PURE__ */
|
|
6780
|
-
/* @__PURE__ */
|
|
6781
|
-
/* @__PURE__ */
|
|
6782
|
-
/* @__PURE__ */
|
|
6783
|
-
/* @__PURE__ */
|
|
6784
|
-
/* @__PURE__ */
|
|
6785
|
-
/* @__PURE__ */
|
|
6858
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton-msg hw-skeleton-msg--right", children: /* @__PURE__ */ jsx17("div", { className: "hw-skeleton-bubble", style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } }) }) }),
|
|
6859
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-msg", children: [
|
|
6860
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-avatar" }),
|
|
6861
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-bubble", children: [
|
|
6862
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 180 } }),
|
|
6863
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
|
|
6864
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 80 } })
|
|
6786
6865
|
] })
|
|
6787
6866
|
] })
|
|
6788
6867
|
] }) });
|
|
6789
6868
|
}
|
|
6790
|
-
return /* @__PURE__ */
|
|
6791
|
-
/* @__PURE__ */
|
|
6869
|
+
return /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6870
|
+
/* @__PURE__ */ jsx17(
|
|
6792
6871
|
MessageList,
|
|
6793
6872
|
{
|
|
6794
6873
|
items,
|
|
@@ -6798,12 +6877,12 @@ function ConversationView({
|
|
|
6798
6877
|
hasMore,
|
|
6799
6878
|
isLoadingMore: isLoading,
|
|
6800
6879
|
onLoadMore: loadMore,
|
|
6801
|
-
renderAfterMessages: needsEmail || showStarters ? /* @__PURE__ */
|
|
6802
|
-
needsEmail && /* @__PURE__ */
|
|
6803
|
-
showStarters && /* @__PURE__ */
|
|
6880
|
+
renderAfterMessages: needsEmail || showStarters ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6881
|
+
needsEmail && /* @__PURE__ */ jsx17(InlineEmailPrompt, { conversationId: emailGateConvId ?? void 0 }),
|
|
6882
|
+
showStarters && /* @__PURE__ */ jsx17("div", { className: "hw-starters", children: starters?.map((entry, index) => {
|
|
6804
6883
|
const question = typeof entry === "string" ? entry : entry.question;
|
|
6805
6884
|
const label = typeof entry === "string" ? null : entry.label;
|
|
6806
|
-
return /* @__PURE__ */
|
|
6885
|
+
return /* @__PURE__ */ jsxs12(
|
|
6807
6886
|
"button",
|
|
6808
6887
|
{
|
|
6809
6888
|
type: "button",
|
|
@@ -6813,11 +6892,11 @@ function ConversationView({
|
|
|
6813
6892
|
void submit({ text: question });
|
|
6814
6893
|
},
|
|
6815
6894
|
children: [
|
|
6816
|
-
/* @__PURE__ */
|
|
6817
|
-
/* @__PURE__ */
|
|
6818
|
-
label && /* @__PURE__ */
|
|
6895
|
+
/* @__PURE__ */ jsxs12("span", { className: "hw-starter-text", children: [
|
|
6896
|
+
/* @__PURE__ */ jsx17("span", { className: "hw-starter-k", children: label ?? question }),
|
|
6897
|
+
label && /* @__PURE__ */ jsx17("span", { className: "hw-starter-q", children: question })
|
|
6819
6898
|
] }),
|
|
6820
|
-
/* @__PURE__ */
|
|
6899
|
+
/* @__PURE__ */ jsx17(ChevronRightIcon, { size: 14 })
|
|
6821
6900
|
]
|
|
6822
6901
|
},
|
|
6823
6902
|
question
|
|
@@ -6826,10 +6905,10 @@ function ConversationView({
|
|
|
6826
6905
|
] }) : void 0
|
|
6827
6906
|
}
|
|
6828
6907
|
),
|
|
6829
|
-
isResolved && /* @__PURE__ */
|
|
6830
|
-
sendError && /* @__PURE__ */
|
|
6908
|
+
isResolved && /* @__PURE__ */ jsx17(ResolvedBanner, { conversationId }),
|
|
6909
|
+
sendError && /* @__PURE__ */ jsxs12("div", { className: "hw-send-error", children: [
|
|
6831
6910
|
sendError,
|
|
6832
|
-
/* @__PURE__ */
|
|
6911
|
+
/* @__PURE__ */ jsx17(
|
|
6833
6912
|
"button",
|
|
6834
6913
|
{
|
|
6835
6914
|
type: "button",
|
|
@@ -6842,7 +6921,7 @@ function ConversationView({
|
|
|
6842
6921
|
}
|
|
6843
6922
|
)
|
|
6844
6923
|
] }),
|
|
6845
|
-
/* @__PURE__ */
|
|
6924
|
+
/* @__PURE__ */ jsx17(
|
|
6846
6925
|
Composer,
|
|
6847
6926
|
{
|
|
6848
6927
|
text,
|
|
@@ -6860,20 +6939,20 @@ function ConversationView({
|
|
|
6860
6939
|
}
|
|
6861
6940
|
function ResolvedBanner({ conversationId }) {
|
|
6862
6941
|
const { client } = useWidgetContext();
|
|
6863
|
-
const [csatRating, setCsatRating] =
|
|
6864
|
-
const [csatSubmitted, setCsatSubmitted] =
|
|
6942
|
+
const [csatRating, setCsatRating] = useState16(null);
|
|
6943
|
+
const [csatSubmitted, setCsatSubmitted] = useState16(false);
|
|
6865
6944
|
const handleCsat = (rating) => {
|
|
6866
6945
|
setCsatRating(rating);
|
|
6867
6946
|
setCsatSubmitted(true);
|
|
6868
6947
|
client.widget.sendCsat.mutate({ conversationId, rating }).catch(() => {
|
|
6869
6948
|
});
|
|
6870
6949
|
};
|
|
6871
|
-
return /* @__PURE__ */
|
|
6872
|
-
/* @__PURE__ */
|
|
6873
|
-
!csatSubmitted ? /* @__PURE__ */
|
|
6874
|
-
/* @__PURE__ */
|
|
6875
|
-
/* @__PURE__ */
|
|
6876
|
-
/* @__PURE__ */
|
|
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(
|
|
6877
6956
|
"button",
|
|
6878
6957
|
{
|
|
6879
6958
|
type: "button",
|
|
@@ -6883,7 +6962,7 @@ function ResolvedBanner({ conversationId }) {
|
|
|
6883
6962
|
children: "\u{1F44D}"
|
|
6884
6963
|
}
|
|
6885
6964
|
),
|
|
6886
|
-
/* @__PURE__ */
|
|
6965
|
+
/* @__PURE__ */ jsx17(
|
|
6887
6966
|
"button",
|
|
6888
6967
|
{
|
|
6889
6968
|
type: "button",
|
|
@@ -6894,7 +6973,7 @@ function ResolvedBanner({ conversationId }) {
|
|
|
6894
6973
|
}
|
|
6895
6974
|
)
|
|
6896
6975
|
] })
|
|
6897
|
-
] }) : /* @__PURE__ */
|
|
6976
|
+
] }) : /* @__PURE__ */ jsx17("div", { className: "hw-csat-thanks", children: t("widget.csat_thanks") })
|
|
6898
6977
|
] });
|
|
6899
6978
|
}
|
|
6900
6979
|
function WhatsNewCard({
|
|
@@ -6907,34 +6986,34 @@ function WhatsNewCard({
|
|
|
6907
6986
|
if (unseen.length === 0) return null;
|
|
6908
6987
|
const display = unseen.slice(0, 3);
|
|
6909
6988
|
const badgeFieldMap = new Map(announcementTabs.map((t2) => [t2.id, t2.display?.badgeField]));
|
|
6910
|
-
return /* @__PURE__ */
|
|
6911
|
-
/* @__PURE__ */
|
|
6912
|
-
/* @__PURE__ */
|
|
6913
|
-
/* @__PURE__ */
|
|
6989
|
+
return /* @__PURE__ */ jsxs12("div", { className: "hw-whats-new", children: [
|
|
6990
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-whats-new-header", children: [
|
|
6991
|
+
/* @__PURE__ */ jsx17("span", { className: "hw-whats-new-title", children: resolveLabel2("widget.whats_new") }),
|
|
6992
|
+
/* @__PURE__ */ jsxs12("button", { type: "button", className: "hw-whats-new-view-all", onClick: onViewAll, children: [
|
|
6914
6993
|
resolveLabel2("widget.view_all"),
|
|
6915
6994
|
" \u2192"
|
|
6916
6995
|
] })
|
|
6917
6996
|
] }),
|
|
6918
|
-
/* @__PURE__ */
|
|
6997
|
+
/* @__PURE__ */ jsx17("div", { className: "hw-whats-new-list", children: display.map((entry) => {
|
|
6919
6998
|
const badgeField = badgeFieldMap.get(entry.tabId);
|
|
6920
|
-
return /* @__PURE__ */
|
|
6999
|
+
return /* @__PURE__ */ jsxs12(
|
|
6921
7000
|
"button",
|
|
6922
7001
|
{
|
|
6923
7002
|
type: "button",
|
|
6924
7003
|
className: "hw-whats-new-item",
|
|
6925
7004
|
onClick: () => onSelect(entry.slug, entry.tabId),
|
|
6926
7005
|
children: [
|
|
6927
|
-
badgeField && entry.customFields[badgeField] && /* @__PURE__ */
|
|
6928
|
-
/* @__PURE__ */
|
|
6929
|
-
entry.publishedAt && /* @__PURE__ */
|
|
7006
|
+
badgeField && entry.customFields[badgeField] && /* @__PURE__ */ jsxs12("div", { className: "hw-whats-new-item-top", children: [
|
|
7007
|
+
/* @__PURE__ */ jsx17("span", { className: "hw-whats-new-badge", children: entry.customFields[badgeField] }),
|
|
7008
|
+
entry.publishedAt && /* @__PURE__ */ jsx17("span", { className: "hw-whats-new-time", children: formatRelativeTime(entry.publishedAt) })
|
|
6930
7009
|
] }),
|
|
6931
|
-
/* @__PURE__ */
|
|
7010
|
+
/* @__PURE__ */ jsxs12("div", { className: "hw-whats-new-item-title", children: [
|
|
6932
7011
|
entry.title,
|
|
6933
|
-
!badgeField && entry.publishedAt && /* @__PURE__ */
|
|
7012
|
+
!badgeField && entry.publishedAt && /* @__PURE__ */ jsx17("span", { className: "hw-whats-new-time-inline", children: formatRelativeTime(entry.publishedAt) })
|
|
6934
7013
|
] }),
|
|
6935
7014
|
entry.body && (() => {
|
|
6936
7015
|
const clean = stripMarkdown(entry.body);
|
|
6937
|
-
return /* @__PURE__ */
|
|
7016
|
+
return /* @__PURE__ */ jsx17("div", { className: "hw-whats-new-item-body", children: clean.length > 80 ? `${clean.slice(0, 80)}\u2026` : clean });
|
|
6938
7017
|
})()
|
|
6939
7018
|
]
|
|
6940
7019
|
},
|
|
@@ -6967,10 +7046,10 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
6967
7046
|
}
|
|
6968
7047
|
|
|
6969
7048
|
// src/themed/styles.css
|
|
6970
|
-
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@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-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');
|
|
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');
|
|
6971
7050
|
|
|
6972
7051
|
// src/helpway-widget.tsx
|
|
6973
|
-
import { jsx as
|
|
7052
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
6974
7053
|
function HelpwayWidget({
|
|
6975
7054
|
apiKey,
|
|
6976
7055
|
apiUrl,
|
|
@@ -6992,7 +7071,7 @@ function HelpwayWidget({
|
|
|
6992
7071
|
src
|
|
6993
7072
|
}) {
|
|
6994
7073
|
const resolvedApiUrl = apiUrl ?? (src ? src.replace(/\/widget\.js$/, "") : void 0);
|
|
6995
|
-
return /* @__PURE__ */
|
|
7074
|
+
return /* @__PURE__ */ jsx18(
|
|
6996
7075
|
SupportProvider,
|
|
6997
7076
|
{
|
|
6998
7077
|
apiKey,
|
|
@@ -7006,7 +7085,7 @@ function HelpwayWidget({
|
|
|
7006
7085
|
onClose,
|
|
7007
7086
|
onUnreadChange,
|
|
7008
7087
|
theme,
|
|
7009
|
-
children: /* @__PURE__ */
|
|
7088
|
+
children: /* @__PURE__ */ jsx18(AgentAvatarProvider, { value: agentAvatar ?? null, children: /* @__PURE__ */ jsx18(
|
|
7010
7089
|
DefaultWidget,
|
|
7011
7090
|
{
|
|
7012
7091
|
hideLauncher,
|
|
@@ -7020,14 +7099,14 @@ function HelpwayWidget({
|
|
|
7020
7099
|
}
|
|
7021
7100
|
|
|
7022
7101
|
// src/hooks/use-realtime.ts
|
|
7023
|
-
import { useEffect as
|
|
7102
|
+
import { useEffect as useEffect17, useRef as useRef18 } from "react";
|
|
7024
7103
|
function useRealtime(handler) {
|
|
7025
7104
|
const { ws } = useWidgetContext();
|
|
7026
|
-
const handlerRef =
|
|
7027
|
-
|
|
7105
|
+
const handlerRef = useRef18(handler);
|
|
7106
|
+
useEffect17(() => {
|
|
7028
7107
|
handlerRef.current = handler;
|
|
7029
7108
|
});
|
|
7030
|
-
|
|
7109
|
+
useEffect17(() => {
|
|
7031
7110
|
return ws.onEvent((event) => handlerRef.current(event));
|
|
7032
7111
|
}, [ws]);
|
|
7033
7112
|
}
|