@helpway/react 0.15.0 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.15.0",
+	"version": "0.15.2",
 	"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

@@ -1576,8 +1576,12 @@
    (Slack, iMessage, Linear all land here); the picture becomes a hint that a
    destination exists rather than the destination's billboard. */
 .hw-link-preview {
+	/* Column, not row. A 64px square crop of a documentation page is a square of
+	   white with two grey lines in it — it showed nothing and read as unrelated to
+	   the answer above it. A short wide strip anchored to the TOP of the capture
+	   shows the part that identifies the page: its heading. */
 	display: flex;
-	align-items: stretch;
+	flex-direction: column;
 	gap: 0;
 	border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));
 	border-radius: 10px;
@@ -1593,13 +1597,13 @@
 }
 
 .hw-link-preview-img {
-	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;
+	width: 100%;
+	/* Wide and short. `object-position: top` is the load-bearing half: centred,
+	   a tall page capture crops to its blank middle. */
+	height: 56px;
+	flex: 0 0 56px;
 	object-fit: cover;
+	object-position: top;
 	/* The border-radius lives on the card; without this the image's own corner
 	   pokes through the rounded edge on Safari. */
 	border-radius: 0;
@@ -1660,7 +1664,9 @@
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
-	max-width: 280px;
+	/* Narrower than the bubble on purpose: the card is a pointer to somewhere
+	   else, not a second paragraph, and at 280px it competed with the answer. */
+	max-width: 240px;
 }
 
 /* ════════════════════════════════════════════════
@@ -2886,31 +2892,15 @@
 	color: var(--hw-text-1);
 }
 
+/* Layout only. The buttons themselves are .hw-quick-reply-btn — the same control
+   the message list renders — so this class contributes the card's padding and
+   nothing else. It used to carry a full second copy of the button styling, which
+   is how the two versions ended up disagreeing about ground, ink and hover. */
 .hw-preview-quick-replies {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 6px;
 	padding: 0 14px 14px;
-}
-
-.hw-preview-qr-btn {
-	display: inline-flex;
-	align-items: center;
-	padding: 6px 14px;
-	font-size: 13px;
-	font-weight: 500;
-	line-height: 1.3;
-	color: var(--hw-brand, #000);
-	background: transparent;
-	border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.1));
-	border-radius: 18px;
-	cursor: pointer;
-	transition: background 0.15s, border-color 0.15s;
-}
-
-.hw-preview-qr-btn:hover {
-	background: var(--hw-hover, rgba(0, 0, 0, 0.04));
-	border-color: var(--hw-brand, #000);
+	/* .hw-quick-replies brings display/flex-wrap/gap and a top margin meant for
+	   sitting under a bubble; inside the card the padding above is the spacing. */
+	margin-top: 0;
 }
 
 /* ── Preview closing animation ──────────────────────────── */
@@ -4181,10 +4171,20 @@
 	font-style: italic;
 }
 .hw-msg-bubble a {
-	color: var(--hw-primary);
+	/* --hw-primary is #171717 and the docked glass block never redefines it, so a
+	   link in an answer rendered near-black on a dark translucent panel. Links
+	   take the surrounding ink instead and earn their affordance from the
+	   underline, which works on every ground this panel can sit on. */
+	color: inherit;
 	text-decoration: underline;
+	text-decoration-thickness: 1px;
 	text-underline-offset: 2px;
-	word-break: break-all;
+	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
+	/* `break-all` cut URLs mid-word — "framew | orks". `anywhere` breaks only
+	   when a line genuinely cannot fit, and prefers the slashes and dots a URL
+	   already offers. */
+	word-break: normal;
+	overflow-wrap: anywhere;
 }
 .hw-msg-bubble a:hover {
 	opacity: 0.8;