@helpway/react 0.15.1 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.15.1",
+	"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;
 }
 
 /* ════════════════════════════════════════════════
@@ -4165,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;