@helpway/react 0.2.0 → 0.3.1

package/src/themed/styles.css

@@ -45,6 +45,15 @@
 .hw-widget {
 	--hw-primary: #171717;
 	--hw-primary-hover: #2a2a2a;
+	/* Brand surface used by team-avatar fallbacks and primary CTAs.
+	   In light mode this is the host brand color (default near-black).
+	   Dark overrides redefine to a high-contrast value so the brand tile
+	   stays visible on dark surfaces. Customers override --hw-brand to
+	   theme team avatars + primary CTAs in one shot. */
+	--hw-brand: #171717;
+	/* Foreground (text/svg) that sits on --hw-brand. Inverts in dark so
+	   light-on-light never happens after the brand-token flip. */
+	--hw-on-brand: #ffffff;
 	/* Focus ring tokens — used by composer + content search + any future
 	   input. Kept as variables so the dark override gets a proper contrast
 	   pair instead of a one-off per-component tweak. */
@@ -304,6 +313,20 @@
 	flex-direction: column;
 	overflow: hidden;
 	animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+	/* Smooth size transition for reading-mode expansion. The open animation
+	   is one-shot (transform/opacity) so it doesn't conflict with this. */
+	transition:
+		width 280ms cubic-bezier(0.4, 0, 0.2, 1),
+		height 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Reading mode — applied when the visitor enters a content detail view
+   (help article, changelog entry). Wider + taller for comfortable long-form
+   reading. Mobile (<480px) ignores this — the @media block forces 100% +
+   beats this rule by source order. */
+.hw-window--reading {
+	width: min(720px, calc(100vw - 40px));
+	height: min(800px, calc(100vh - 100px));
 }
 
 @keyframes hw-window-open {
@@ -534,6 +557,20 @@
 	width: 24px;
 	height: 24px;
 }
+.hw-header-bot-icon--team {
+	background: var(--hw-brand, #0a0a0a);
+	color: var(--hw-on-brand, #fff);
+}
+.hw-header-agent-img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.hw-header-agent-initials {
+	font-size: 11px;
+	font-weight: 600;
+	line-height: 1;
+}
 
 .hw-header-info {
 	flex: 1;
@@ -886,6 +923,21 @@
 	width: 20px;
 	height: 20px;
 }
+.hw-conv-card-avatar-img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.hw-conv-card-avatar--team {
+	background: var(--hw-brand, #0a0a0a);
+	color: var(--hw-on-brand, #fff);
+}
+.hw-conv-card-avatar-initials {
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 1;
+	letter-spacing: 0.02em;
+}
 
 .hw-conv-card-content {
 	flex: 1;
@@ -1086,6 +1138,43 @@
 	/* Flex column with constrained children — min-width:0 allows children to
      honor their own max-width rather than inflating to content width. */
 	min-width: 0;
+	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+	scrollbar-width: thin;
+}
+
+.hw-messages::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+.hw-messages::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.hw-messages::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.16);
+	background-clip: content-box;
+	border: 3px solid transparent;
+	border-radius: 999px;
+}
+
+.hw-messages::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.28);
+	background-clip: content-box;
+}
+
+.hw-widget[data-theme="dark"] .hw-messages {
+	scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
+}
+
+.hw-widget[data-theme="dark"] .hw-messages::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.2);
+	background-clip: content-box;
+}
+
+.hw-widget[data-theme="dark"] .hw-messages::-webkit-scrollbar-thumb:hover {
+	background: rgba(255, 255, 255, 0.32);
+	background-clip: content-box;
 }
 
 /* ── Empty Messages ─────────────────────────── */
@@ -1107,6 +1196,11 @@
 	opacity: 0.3;
 }
 
+.hw-empty-text {
+	font-size: 13px;
+	/* color inherited from .hw-empty (--hw-text-3) — adapts in dark */
+}
+
 /* ── Date Separator ──────────────────────────── */
 .hw-date-sep {
 	display: flex;
@@ -1164,6 +1258,11 @@
 	align-self: flex-start;
 }
 
+.hw-msg--ai {
+	width: 100%;
+	max-width: 100%;
+}
+
 .hw-msg-body {
 	display: flex;
 	flex-direction: column;
@@ -1206,22 +1305,51 @@
 	color: var(--hw-text);
 	border-bottom-left-radius: 4px;
 	white-space: normal; /* AI messages use HTML rendering (markdown), not pre-wrap */
+	max-width: min(100%, 640px);
 }
 
-/* Meta (time + sender label) — hidden, show on hover */
+.hw-msg--ai .hw-msg-body {
+	width: 100%;
+}
+
+.hw-msg--ai .hw-msg-bubble:has(.hw-code),
+.hw-msg--ai .hw-msg-bubble:has(pre) {
+	width: 100%;
+}
+
+.hw-msg--ai .hw-code {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+/* Meta (fully hidden; sender label + copy icon reveal on hover) */
 .hw-msg-meta {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
 	font-size: 11px;
 	color: var(--hw-text-3);
 	margin-top: 3px;
 	padding: 0 4px;
 	opacity: 0;
-	transition: opacity 0.15s;
 	font-variant-numeric: tabular-nums;
+	min-height: 0;
+	height: 0;
+	overflow: hidden;
+	transition:
+		opacity 140ms ease,
+		height 140ms ease;
 }
 
 .hw-msg:hover .hw-msg-meta,
 .hw-msg:focus-within .hw-msg-meta {
 	opacity: 1;
+	height: 20px;
+	min-height: 20px;
+}
+
+.hw-msg-sender-label {
+	white-space: nowrap;
 }
 
 .hw-msg--visitor .hw-msg-meta {
@@ -1452,6 +1580,59 @@
 	background: var(--hw-bg);
 }
 
+/* ── Skeleton: Article detail ──────────────────
+   Designed to be PIXEL-EQUIVALENT to the rendered article so content can land
+   without reflow. Maps 1:1 to:
+     <div class="hw-content-detail">
+       <div class="hw-content-detail-header">  ← title (22px line) + meta row
+       <div class="hw-content-detail-body">
+         <div class="hw-markdown">
+           <h2>...</h2>                        ← section header (~16px line)
+           <ul><li>**Bold:** desc...</li></ul> ← bullet item, 2 visible lines
+           <ul><li>...</li></ul>
+   The skeleton uses the SAME outer classes for padding/spacing, then injects
+   shimmer bars where text would render. */
+
+.hw-skeleton-title {
+	height: 22px;
+	width: 65%;
+	border-radius: 6px;
+}
+
+.hw-skeleton-badge {
+	width: 42px;
+	height: 18px;
+	border-radius: 9px;
+}
+
+.hw-skeleton-date {
+	width: 60px;
+	height: 12px;
+	border-radius: 6px;
+}
+
+.hw-skeleton-h2 {
+	height: 16px;
+	border-radius: 6px;
+}
+
+/* Bullet wrapper — emulates <ul> padding-left: 20px so the skeleton bullet
+   text starts at the same x-coordinate as the real <li>'s text content. */
+.hw-skeleton-bullet {
+	padding-left: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+/* Each "line" inside a bullet — line-height: 14 matches the visible text mass
+   of body text (font-size 14 × line-height 1.6 = 22.4 visible bbox, but skeleton
+   bar is the visible-character thickness only). */
+.hw-skeleton-bullet-line {
+	height: 14px;
+	border-radius: 7px;
+}
+
 /* ════════════════════════════════════════════════
    EMAIL COLLECTION CARD (fixed above composer)
    ════════════════════════════════════════════════ */
@@ -1461,7 +1642,7 @@
 	padding: 14px 16px 10px;
 	border: 1px solid var(--hw-border, rgba(0,0,0,0.08));
 	border-radius: 14px;
-	background: var(--hw-surface, #fff);
+	background: var(--hw-bg, #fff);
 	box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03);
 	animation: hw-email-slide-in 0.25s ease-out;
 }
@@ -1483,11 +1664,11 @@
 	width: 32px;
 	height: 32px;
 	border-radius: 8px;
-	background: var(--hw-brand, #0a0a0a);
+	background: var(--hw-bg-hover, #f5f5f5);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: #fff;
+	color: var(--hw-text, #1a1a1a);
 }
 
 .hw-email-card-title {
@@ -1500,7 +1681,7 @@
 
 .hw-email-card-subtitle {
 	font-size: 12px;
-	color: var(--hw-text-muted, #888);
+	color: var(--hw-text-2, #888);
 	line-height: 1.4;
 	margin: 0;
 }
@@ -1510,18 +1691,22 @@
 	padding: 9px 12px;
 	border-radius: 10px;
 	border: 1px solid var(--hw-border, rgba(0,0,0,0.1));
-	background: var(--hw-bg, #fafafa);
+	background: var(--hw-bg-subtle, #fafafa);
 	color: var(--hw-text, #1a1a1a);
 	font-size: 13px;
 	outline: none;
 	margin-bottom: 8px;
 	box-sizing: border-box;
-	transition: border-color 0.15s;
+	transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.hw-email-card-input::placeholder {
+	color: var(--hw-text-3, #999);
 }
 
 .hw-email-card-input:focus {
-	border-color: var(--hw-brand, #0a0a0a);
-	box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
+	border-color: var(--hw-focus-border, rgba(0,0,0,0.2));
+	box-shadow: 0 0 0 2px var(--hw-focus-ring, rgba(0,0,0,0.06));
 }
 
 .hw-email-card-input--error {
@@ -1534,7 +1719,7 @@
 	border-radius: 10px;
 	border: none;
 	background: var(--hw-brand, #0a0a0a);
-	color: #fff;
+	color: var(--hw-on-brand, #fff);
 	font-size: 13px;
 	font-weight: 500;
 	cursor: pointer;
@@ -1561,7 +1746,7 @@
 	gap: 6px;
 	padding: 10px 16px;
 	font-size: 13px;
-	color: var(--hw-text-muted, #888);
+	color: var(--hw-text-2, #888);
 	animation: hw-email-slide-in 0.2s ease-out;
 }
 
@@ -2055,8 +2240,8 @@
 	width: 32px;
 	height: 32px;
 	border-radius: 50%;
-	background: #e0e0e0;
-	color: #555;
+	background: var(--hw-bg-hover, #e0e0e0);
+	color: var(--hw-text-2, #555);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -2260,6 +2445,9 @@
 	.hw-msg {
 		max-width: 82%;
 	}
+	.hw-msg--ai {
+		max-width: 100%;
+	}
 }
 
 /* ════════════════════════════════════════════════
@@ -2578,31 +2766,92 @@
 	color: var(--hw-text-1);
 }
 
-/* ── Markdown Rendering ────────────────────────────────── */
+/* ── Markdown Rendering ──────────────────────────────────
+   Heading vertical spacing is governed by the adjacency rules further
+   down (.hw-markdown > * + h2, etc.). Keeping margin: 0 here prevents
+   the heading's own bottom margin from compounding with the sibling's
+   top margin (e.g. h2 8px + p 12px = 20px instead of 12px). */
 .hw-markdown h1 {
 	font-size: 17px;
 	font-weight: 700;
-	margin: 20px 0 8px;
+	margin: 0;
 }
 
 .hw-markdown h2 {
 	font-size: 15px;
 	font-weight: 600;
-	margin: 16px 0 6px;
+	margin: 0;
 }
 
 .hw-markdown h3 {
 	font-size: 14px;
 	font-weight: 600;
-	margin: 12px 0 4px;
+	margin: 0;
 }
 
 .hw-markdown p {
-	margin: 0 0 12px;
+	margin: 0;
+}
+
+/* Rich-text editors (PlateJS, Slate, ProseMirror) emit any of:
+     <p><br></p>           ← visual line break paragraph
+     <p></p>               ← empty paragraph
+     <div><br></div>       ← editor block element (PlateJS default)
+     <div></div>           ← empty block
+   Each contributes line-height + margin twice → 50-70px gap between items.
+   Hide them all so spacing is governed by the adjacency rules below. */
+.hw-markdown p:empty,
+.hw-markdown div:empty,
+.hw-markdown p:has(> br:only-child),
+.hw-markdown div:has(> br:only-child) {
+	display: none;
+}
+
+/* Adjacency-based spacing — works for any block element type the CMS emits
+   (<p>, <div>, custom). Combined with the JS post-render cleanup in
+   simple-markdown.tsx (which strips whitespace-only blocks like <p>&nbsp;</p>
+   that CSS :empty can't match), this gives consistent spacing regardless of
+   editor format. */
+.hw-markdown > * + * {
+	margin-top: 12px;
+}
+
+.hw-markdown > * + h1,
+.hw-markdown > * + h2 {
+	margin-top: 20px;
+}
+
+.hw-markdown > * + h3 {
+	margin-top: 16px;
+}
+
+.hw-markdown > h1 + *,
+.hw-markdown > h2 + *,
+.hw-markdown > h3 + * {
+	margin-top: 8px;
+}
+
+/* First/last child margin reset so the body's outer padding is the only
+   spacing that surrounds the article. */
+.hw-markdown > *:first-child {
+	margin-top: 0;
+}
+
+.hw-markdown > *:last-child {
+	margin-bottom: 0;
+}
+
+/* Better i18n CMS emits standalone <br> elements at the markdown root as
+   visual separators between consecutive <ul> bullet groups. Each <br>
+   contributed ~22px line-height + adjacency margins on both sides, creating
+   the 40-50px gap between items. Hide them — the adjacency rule alone gives
+   the 12px gap we want. */
+.hw-markdown > br {
+	display: none;
 }
 
 .hw-markdown ul {
-	margin: 0 0 12px;
+	margin: 0;
 	padding-left: 20px;
 }
 
@@ -2635,7 +2884,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 6px 12px;
+	gap: 10px;
+	padding: 7px 8px 7px 12px;
 	font-size: 11px;
 	color: var(--hw-text-2, #6b7280);
 	background: rgba(0, 0, 0, 0.03);
@@ -2648,24 +2898,85 @@
 	font-weight: 500;
 }
 
-.hw-code-copy {
+.hw-code-actions {
 	display: inline-flex;
 	align-items: center;
-	gap: 4px;
-	padding: 2px 8px;
-	font-size: 11px;
+	gap: 1px;
+}
+
+.hw-code-action {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	padding: 0;
 	font-family: inherit;
 	color: var(--hw-text-2, #6b7280);
 	background: transparent;
 	border: 1px solid transparent;
-	border-radius: 5px;
+	border-radius: 6px;
 	cursor: pointer;
-	transition: background 120ms ease, color 120ms ease;
+	opacity: 0.62;
+	transition:
+		background 120ms ease,
+		color 120ms ease,
+		opacity 120ms ease,
+		scale 120ms ease;
 }
 
-.hw-code-copy:hover {
+.hw-code-action:hover {
 	color: var(--hw-text, #111);
 	background: rgba(0, 0, 0, 0.06);
+	opacity: 1;
+}
+
+.hw-code-action:active {
+	scale: 0.96;
+}
+
+.hw-code-action svg {
+	width: 13px;
+	height: 13px;
+}
+
+.hw-code-copy-icon,
+.hw-code-check-icon {
+	position: absolute;
+	inset: 50% auto auto 50%;
+	transition:
+		opacity 180ms cubic-bezier(0.2, 0, 0, 1),
+		scale 180ms cubic-bezier(0.2, 0, 0, 1),
+		filter 180ms cubic-bezier(0.2, 0, 0, 1);
+	translate: -50% -50%;
+}
+
+.hw-code-check-icon {
+	filter: blur(4px);
+	opacity: 0;
+	scale: 0.25;
+}
+
+.hw-code-copy--copied .hw-code-copy-icon {
+	filter: blur(4px);
+	opacity: 0;
+	scale: 0.25;
+}
+
+.hw-code-copy--copied .hw-code-check-icon {
+	filter: blur(0);
+	opacity: 1;
+	scale: 1;
+}
+
+.hw-code-copy-label {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
 }
 
 .hw-code-copy--copied {
@@ -2683,6 +2994,30 @@
 	border-radius: 0;
 	overflow-x: auto;
 	max-width: 100%;
+	max-height: 320px;
+	scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
+	scrollbar-width: thin;
+}
+
+.hw-code pre::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+.hw-code pre::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.hw-code pre::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.18);
+	background-clip: content-box;
+	border: 3px solid transparent;
+	border-radius: 999px;
+}
+
+.hw-code pre::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.28);
+	background-clip: content-box;
 }
 
 .hw-code pre code {
@@ -2707,9 +3042,21 @@
 		background: rgba(255, 255, 255, 0.03);
 		border-bottom-color: rgba(255, 255, 255, 0.06);
 	}
-	.hw-code-copy:hover {
+	.hw-code-action:hover,
+	.hw-code-action:focus-visible {
 		background: rgba(255, 255, 255, 0.08);
 	}
+	.hw-code pre {
+		scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
+	}
+	.hw-code pre::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.22);
+		background-clip: content-box;
+	}
+	.hw-code pre::-webkit-scrollbar-thumb:hover {
+		background: rgba(255, 255, 255, 0.32);
+		background-clip: content-box;
+	}
 }
 
 /* Legacy bare <pre> fallback (rendered by old CMS bodyHtml content that may
@@ -2755,6 +3102,20 @@
 	white-space: pre;
 }
 
+.hw-msg-bubble .hw-code pre {
+	margin: 0;
+	padding: 10px 12px;
+	background: transparent;
+	border-radius: 0;
+}
+
+.hw-msg-bubble .hw-code pre code {
+	background: transparent;
+	padding: 0;
+	font-size: 12px;
+	line-height: 1.55;
+}
+
 .hw-msg--team .hw-msg-bubble pre,
 .hw-msg--visitor .hw-msg-bubble pre {
 	background: rgba(255, 255, 255, 0.12);
@@ -2850,6 +3211,12 @@
 	}
 	.hw-msg-meta {
 		opacity: 1;
+		height: auto;
+		min-height: 20px;
+		overflow: visible;
+	}
+	.hw-msg-copy {
+		opacity: 1;
 	}
 }
 
@@ -2909,11 +3276,20 @@
 	color: var(--hw-text-4);
 	cursor: pointer;
 	vertical-align: middle;
-	transition: color 0.15s, background 0.15s;
+	opacity: 0;
+	transition:
+		color 0.15s,
+		background 0.15s,
+		opacity 0.15s;
 	padding: 0;
 	flex-shrink: 0;
 }
 
+.hw-msg:hover .hw-msg-copy,
+.hw-msg:focus-within .hw-msg-copy {
+	opacity: 1;
+}
+
 .hw-msg-copy:hover {
 	background: var(--hw-bg-hover);
 	color: var(--hw-text-2);
@@ -3293,9 +3669,27 @@
 	--hw-visitor-bubble-text: #f5f5f5;
 	--hw-focus-border: rgba(255, 255, 255, 0.28);
 	--hw-focus-ring: rgba(255, 255, 255, 0.08);
+	/* Brand inverts in dark — light tile on dark surface keeps team avatars
+	   and primary CTAs readable. Same pattern as iOS dark mode tints. */
+	--hw-brand: #f5f5f5;
+	--hw-on-brand: #1c1c1e;
 }
 
 @media (prefers-color-scheme: dark) {
+	.hw-widget:not([data-theme="light"]) .hw-messages {
+		scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
+	}
+
+	.hw-widget:not([data-theme="light"]) .hw-messages::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.2);
+		background-clip: content-box;
+	}
+
+	.hw-widget:not([data-theme="light"]) .hw-messages::-webkit-scrollbar-thumb:hover {
+		background: rgba(255, 255, 255, 0.32);
+		background-clip: content-box;
+	}
+
 	.hw-widget:not([data-theme="light"]) {
 		--hw-bg: #1c1c1e;
 		--hw-bg-subtle: #161618;
@@ -3315,6 +3709,9 @@
 		/* Focus ring in dark needs lighter border + subtle halo. */
 		--hw-focus-border: rgba(255, 255, 255, 0.28);
 		--hw-focus-ring: rgba(255, 255, 255, 0.08);
+		/* See --hw-brand comment in [data-theme="dark"] block. */
+		--hw-brand: #f5f5f5;
+		--hw-on-brand: #1c1c1e;
 	}
 }