@helpway/react 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.14.0",
+	"version": "0.15.0",
 	"description": "Official React SDK for Helpway — drop-in AI chat support widget with headless hooks for custom UIs.",
 	"keywords": [
 		"helpway",

package/src/themed/styles.css

@@ -1451,8 +1451,11 @@
 }
 
 .hw-quick-replies[data-cancelled="true"] .hw-quick-reply-btn {
-	border-color: rgba(0, 0, 0, 0.08);
-	color: var(--hw-text-muted, #9ca3af);
+	/* Same undefined-token trap as the link preview's url line: --hw-text-muted
+	   does not exist, so a cancelled quick reply was painted a fixed grey on a
+	   fixed near-black border, on dark glass included. */
+	border-color: var(--hw-border);
+	color: var(--hw-text-3);
 }
 
 .hw-msg--ai .hw-code {
@@ -1466,7 +1469,11 @@
 	align-items: center;
 	gap: 4px;
 	font-size: 11px;
-	color: var(--hw-text-3);
+	/* text-2, measured: text-3 at this size is 3.39:1 on the light surface and
+	   2.88:1 on the dark one, both under the 4.5:1 floor. A timestamp is
+	   information, not decoration, so it has to clear the floor — the row stays
+	   quiet through size and weight instead of through low contrast. */
+	color: var(--hw-text-2);
 	margin-top: 2px;
 	padding: 0 4px;
 	font-variant-numeric: tabular-nums;
@@ -1489,14 +1496,10 @@
 	align-items: flex-end;
 }
 
-/* Sender label above bubble */
-.hw-msg-sender {
-	font-size: 11px;
-	font-weight: 500;
-	color: var(--hw-text-3);
-	margin-bottom: 3px;
-	padding: 0 4px;
-}
+/* .hw-msg-sender is gone. The label above the bubble repeated on every message
+   of a run and named whoever the header already named; .hw-msg-meta below the
+   bubble now signs a run once, by role. Removed rather than left behind, so the
+   next reader does not find a style for an element nothing renders. */
 
 /* ════════════════════════════════════════════════
    TYPING INDICATOR
@@ -1565,10 +1568,18 @@
 
 /* ── Link preview card ───────────────────── */
 
+/* A row, not a poster. The card used to lead with a full-width 140px hero image,
+   which for a docs link is an OG banner — a generated picture of the very title
+   printed underneath it. It cost the tallest element in the thread to repeat one
+   line of text, and in a 320px panel that pushed the answer it belonged to off
+   screen. Thumbnail beside the text is the shape a link takes in a conversation
+   (Slack, iMessage, Linear all land here); the picture becomes a hint that a
+   destination exists rather than the destination's billboard. */
 .hw-link-preview {
 	display: flex;
-	flex-direction: column;
-	border: 1px solid rgba(0, 0, 0, 0.08);
+	align-items: stretch;
+	gap: 0;
+	border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));
 	border-radius: 10px;
 	overflow: hidden;
 	text-decoration: none;
@@ -1578,20 +1589,31 @@
 }
 
 .hw-link-preview:hover {
-	background: rgba(0, 0, 0, 0.02);
+	background: var(--hw-bg-hover, rgba(0, 0, 0, 0.02));
 }
 
 .hw-link-preview-img {
-	width: 100%;
-	max-height: 140px;
+	width: 64px;
+	/* Square and self-stretching: a fixed height would letterbox a 1200x630 OG
+	   image, and `stretch` keeps the thumbnail flush with however tall the text
+	   beside it turns out to be. */
+	min-height: 100%;
+	flex: 0 0 64px;
 	object-fit: cover;
+	/* The border-radius lives on the card; without this the image's own corner
+	   pokes through the rounded edge on Safari. */
+	border-radius: 0;
 }
 
 .hw-link-preview-body {
-	padding: 10px 12px;
+	padding: 8px 10px;
 	display: flex;
 	flex-direction: column;
-	gap: 3px;
+	gap: 2px;
+	/* min-width:0 or a long unbroken title refuses to shrink and blows the card
+	   past its container. */
+	min-width: 0;
+	justify-content: center;
 }
 
 .hw-link-preview-favicon {
@@ -1601,21 +1623,37 @@
 }
 
 .hw-link-preview-title {
-	font-size: 13px;
+	font-size: 12.5px;
 	font-weight: 600;
 	line-height: 1.3;
 	color: var(--hw-text, #1a1a1a);
+	/* Two lines, then ellipsis. Docs titles arrive as "What is Better i18n? |
+	   Getting Started | Better i18n" — the site's whole breadcrumb, written for a
+	   search result, not for a chat bubble. Unclamped it was three lines of
+	   pipe-separated SEO. */
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
 }
 
 .hw-link-preview-desc {
-	font-size: 12px;
+	font-size: 11.5px;
 	line-height: 1.4;
-	color: var(--hw-text-muted, #6b7280);
+	color: var(--hw-text-2, #6b7280);
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
 }
 
 .hw-link-preview-url {
 	font-size: 11px;
-	color: var(--hw-text-muted, #9ca3af);
+	/* --hw-text-muted is referenced in seven rules and defined in none, so every
+	   one of them silently falls back to a hardcoded grey and stops following
+	   dark mode or the docked glass theme. Fixed here; the other six are listed
+	   in the commit. */
+	color: var(--hw-text-2);
 }
 
 .hw-msg-links {
@@ -3797,26 +3835,88 @@
    DISCONNECT BANNER
    ════════════════════════════════════════════════ */
 
+/* A socket that is still retrying is not a warning. Amber said "something is
+   wrong, act on it" about a state the visitor cannot act on and that heals
+   itself — and it said it in the loudest slot the panel has, a full-width band
+   above the agent's own name. The dot made it worse: the docked variant already
+   quieted the band to a neutral surface but left the amber dot on it, so the row
+   argued with itself about how alarmed to be.
+
+   This now speaks the vocabulary the panel already uses for "wait a moment" —
+   the typing indicator's neutral dot on the panel's own hover surface. Both
+   colours are tokens, so dark mode follows without a second rule. */
 .hw-disconnect {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	gap: 6px;
-	padding: 6px 12px;
-	background: #fef3c7;
-	color: #92400e;
-	font-size: 12px;
+	gap: 7px;
+	padding: 7px 14px;
+	background: var(--hw-bg-hover);
+	/* text-2, not text-3. Measured, because "quieter" is the easy way to make
+	   11.5px unreadable: text-3 on bg-hover is 3.39:1 light and 2.88:1 dark,
+	   under the 4.5:1 floor — and under what the amber it replaced managed
+	   (6.37:1). text-2 comes in at 5.26:1 and 5.44:1. On docked glass both are
+	   translucent over a blurred page, so no static number applies there; the
+	   opaque themes are the ones that can be held to a figure. */
+	color: var(--hw-text-2);
+	font-size: 11.5px;
 	font-weight: 500;
+	letter-spacing: -0.01em;
+	/* Turkish ships "Yeniden bağlanılıyor…" against English's "Reconnecting…" —
+	   22 characters where the layout was measured at 14. One line, clipped at the
+	   edge rather than wrapping the band to double height in a 320px panel. */
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 	flex-shrink: 0;
-	animation: hw-msg-appear 0.25s ease-out;
+	animation: hw-disconnect-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.hw-disconnect-dot {
-	width: 6px;
-	height: 6px;
+/* Slides out of its own height rather than fading in place: the band displaces
+   the panel when it appears, and matching the motion to the displacement is what
+   keeps that from reading as a jump. */
+@keyframes hw-disconnect-in {
+	from {
+		opacity: 0;
+		transform: translateY(-100%);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+/* An arc, not a pulsing dot. A dot that fades in and out only says "something is
+   happening"; a rotating arc says a retry is in flight and going somewhere,
+   which is what a reconnect is. It also speaks the widget's own loader
+   vocabulary — .hw-composer-preview-loader builds its spinner the same way — so
+   it reads as this product's spinner rather than a new invention.
+
+   currentColor, so it inherits the row's measured ink instead of carrying a
+   second colour decision. The 3/4 arc uses `transparent` rather than color-mix:
+   this bundle runs on whatever browser a customer's visitor brought. */
+.hw-disconnect-spinner {
+	width: 9px;
+	height: 9px;
+	border: 1.5px solid currentColor;
+	border-top-color: transparent;
 	border-radius: 50%;
-	background: #f59e0b;
-	animation: hw-loading-pulse 1.4s infinite;
+	opacity: 0.75;
+	flex-shrink: 0;
+	animation: hw-spin 0.7s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.hw-disconnect {
+		animation: none;
+	}
+	.hw-disconnect-spinner {
+		animation: none;
+		/* Close the ring. A frozen 3/4 arc reads as a broken glyph, not as a
+		   paused one — the gap only makes sense while it is turning. */
+		border-top-color: currentColor;
+		opacity: 0.5;
+	}
 }
 
 /* ════════════════════════════════════════════════
@@ -4335,10 +4435,9 @@
 		background: var(--hw-bg-hover);
 	}
 
-	.hw-disconnect {
-		background: #422006;
-		color: #fcd34d;
-	}
+	/* .hw-disconnect needs no dark override any more — it is built from
+	   --hw-bg-hover and --hw-text-3, which this block already redefines. A
+	   hard-coded amber pair here was the other half of the same mixed signal. */
 
 	.hw-send-error {
 		background: #450a0a;
@@ -4936,9 +5035,12 @@
    answer restated them three times in a row, which is how the meta line stopped
    being read at all. A human agent keeps their line: their name is news (someone
    took over) in a way the AI's is not. */
-.hw-widget[data-hw-placement="docked"] .hw-msg--ai .hw-msg-meta {
-	display: none;
-}
+/* The AI's meta row used to be hidden here while the team's stayed visible, so
+   in this placement an AI answer was unsigned and a human answer carried a naked
+   clock — the asymmetry is what made the clock look arbitrary. Now both sign the
+   same way, with role + time, which is the row Fin prints on an AI answer too.
+   (To go back to hiding it, restore `display: none` for .hw-msg--ai .hw-msg-meta
+   — it is one rule, not a rewrite.) */
 .hw-widget[data-hw-placement="docked"] .hw-msg--visitor .hw-msg-bubble {
 	background: rgba(255, 255, 255, 0.16);
 	color: #ffffff;
@@ -5349,11 +5451,11 @@
 /* Reconnecting. A socket blip is not an error — it resolves itself in a
    second or two — so it sits quietly at the top of the panel instead of
    shouting in amber across the full width. */
+/* The base rule now carries the padding, surface, ink and size this variant used
+   to restate — the quiet treatment stopped being the docked exception and became
+   how the band looks everywhere. Only the corners are placement-specific: docked
+   is the one case where this band is the panel's actual top edge. */
 .hw-widget[data-hw-placement="docked"] .hw-disconnect {
-	padding: 7px 14px;
-	background: var(--hw-bg-hover);
-	color: var(--hw-text-3, var(--hw-text-muted));
-	font-size: 11.5px;
 	border-radius: 20px 20px 0 0;
 }