@helpway/react 0.15.3 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.15.3",
+	"version": "0.17.0",
 	"description": "Official React SDK for Helpway — drop-in AI chat support widget with headless hooks for custom UIs.",
 	"keywords": [
 		"helpway",
@@ -40,6 +40,7 @@
 	"scripts": {
 		"build": "tsup",
 		"typecheck": "tsc --noEmit",
+		"test": "bun test",
 		"sync:icons": "bun scripts/sync-icons.ts",
 		"prepublishOnly": "bun run build",
 		"prepack": "bun run build && bun scripts/apply-publish-config.ts",
@@ -51,9 +52,10 @@
 		"zustand": "^5.0.11"
 	},
 	"devDependencies": {
+		"@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.213",
+		"@happy-dom/global-registrator": "^20.14.0",
 		"@types/react": "^19.1.6",
 		"@types/react-dom": "^19.1.6",
-		"@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.213",
 		"react-dom": "^19.1.6",
 		"tsup": "^8.3.5",
 		"typescript": "~5.9.3"

package/src/themed/styles.css

@@ -98,6 +98,15 @@
 	border-radius: inherit;
 }
 
+/* A host `agentAvatar` brings its own shape and colour: every box that holds
+   one drops its tile radius and fill so the host's mark is not framed by a
+   rounded square it did not ask for. */
+.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) {
+	border-radius: 50%;
+	background: transparent;
+	padding: 0;
+}
+
 /* ── Focus Styles ──────────────────────────────── */
 .hw-widget :focus-visible {
 	outline: 2px solid var(--hw-primary);
@@ -219,7 +228,7 @@
 	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
 }
 
-.hw-bubble-icon svg {
+.hw-bubble-icon svg:not(.hw-agent-custom svg) {
 	width: 22px;
 	height: 22px;
 }
@@ -478,7 +487,10 @@
 	justify-content: center;
 	border-radius: 10px;
 }
-.hw-hero-bot-icon svg {
+/* Direct children only (the Helpway mark, a preset icon): a host `agentAvatar`
+   brings its own SVG and sizing, which this must not resize. */
+.hw-hero-bot-icon > svg,
+.hw-hero-bot-icon > .hw-agent-icon > svg {
 	width: 32px;
 	height: 32px;
 }
@@ -599,7 +611,8 @@
 	   chain — exactly the cascade behavior we want. */
 	background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));
 }
-.hw-header-bot-icon svg {
+.hw-header-bot-icon > svg,
+.hw-header-bot-icon > .hw-agent-icon > svg {
 	width: 24px;
 	height: 24px;
 }
@@ -893,7 +906,7 @@
 	height: 32px;
 	border-radius: 8px;
 }
-.hw-recent-row .hw-conv-card-avatar svg {
+.hw-recent-row .hw-conv-card-avatar svg:not(.hw-agent-custom svg) {
 	width: 18px;
 	height: 18px;
 }
@@ -995,7 +1008,7 @@
 	flex-shrink: 0;
 	overflow: hidden;
 }
-.hw-conv-card-avatar svg {
+.hw-conv-card-avatar svg:not(.hw-agent-custom svg) {
 	width: 20px;
 	height: 20px;
 }
@@ -2755,7 +2768,7 @@
 	background: none;
 }
 .hw-preview.hw-preview--anchored .hw-preview-avatar img,
-.hw-preview.hw-preview--anchored .hw-preview-avatar svg {
+.hw-preview.hw-preview--anchored .hw-preview-avatar svg:not(.hw-agent-custom svg) {
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
@@ -2807,7 +2820,7 @@
 	overflow: hidden;
 }
 
-.hw-preview-avatar svg {
+.hw-preview-avatar svg:not(.hw-agent-custom svg) {
 	width: 16px;
 	height: 16px;
 }
@@ -2903,6 +2916,62 @@
 	margin-top: 0;
 }
 
+/* ── Awaiting-reply marker ───────────────────────────────
+   A state, not an alert. It sits on a row next to product chrome and must not
+   compete with the primary action, so: muted ink, no accent colour, no pill.
+   Labelled rather than counted — a bare number in a coloured badge reads as
+   "unread" and says nothing about what it counts, while these three words say
+   the thing that decides whether the visitor comes back. */
+.hw-awaiting {
+	margin-top: 2px;
+	padding-left: 44px;
+	font-size: 11px;
+	line-height: 1.4;
+	color: var(--hw-text-3, var(--hw-text-muted));
+}
+
+/* ── Closed-state dock ───────────────────────────────────
+   One owner for the strip above the launcher.
+
+   The incoming-reply card and the announcement stack were two independent
+   absolute pins on the same anchor — both `bottom: calc(100% + 12px); right: 0`
+   — so whenever a visitor had an unread reply AND unseen announced content,
+   the two cards drew on top of each other. Neither was readable and the one
+   underneath was unclickable. Nothing in either component could detect the
+   other, which is the tell: the bug is that the region had no owner, not that
+   one of the cards was positioned wrong.
+
+   The dock pins once; its children lay out in flow. Order in the markup is the
+   priority order and it is deliberate — an actual reply from a person sits
+   nearest the launcher, where the thumb already is, and announcements stack
+   above it. Right-aligned rather than stretched because the two cards are
+   different widths (300px vs 340px) and a shared left edge would read as one
+   ragged surface instead of two cards. */
+.hw-preview-dock {
+	position: absolute;
+	bottom: calc(100% + 12px);
+	right: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 8px;
+	/* Empty dock must not sit over the page. With no children it has zero size,
+	   but the gaps between cards are dead space either way — the cards take
+	   their own events back below. */
+	pointer-events: none;
+}
+
+/* Docked children give up their own pin — two classes, so this wins over the
+   single-class `.hw-preview` / `.hw-preview-stack` rules whatever the source
+   order. */
+.hw-preview-dock > .hw-preview,
+.hw-preview-dock > .hw-preview-stack {
+	position: relative;
+	bottom: auto;
+	right: auto;
+	pointer-events: auto;
+}
+
 /* ── Preview closing animation ──────────────────────────── */
 .hw-preview--closing {
 	animation: hw-preview-out 0.2s ease-in forwards;
@@ -2936,6 +3005,30 @@
 	width: 100%;
 }
 
+/* ── Overflow row ────────────────────────────────────────
+   What is left when the announcement stack is clipped. Deliberately not a
+   card: a fourth bordered box would be the volume problem it exists to
+   solve. A single quiet line, right-aligned with the cards above it, that
+   opens the next unread update. */
+.hw-preview-more {
+	align-self: flex-end;
+	padding: 4px 10px;
+	border: 0;
+	border-radius: 999px;
+	background: var(--hw-bg);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--hw-border);
+	color: var(--hw-text-2);
+	font: inherit;
+	font-size: 12px;
+	line-height: 1.4;
+	cursor: pointer;
+	transition: background 0.12s, color 0.12s;
+}
+.hw-preview-more:hover {
+	background: var(--hw-bg-hover);
+	color: var(--hw-text);
+}
+
 /* ── Announcement preview modifier ─────────────────────── */
 .hw-preview--announcement {
 	width: 340px;
@@ -5380,6 +5473,16 @@
 	gap: 8px;
 	padding: 2px 0 8px;
 }
+/* Host agent avatar at the bar's start; bottom-aligned with the actions so it
+   stays on the first line's baseline row when the field grows. */
+.hw-dock-lead {
+	flex: none;
+	display: grid;
+	place-items: center;
+	width: 32px;
+	height: 32px;
+	margin-left: -8px;
+}
 .hw-dock-actions {
 	flex: none;
 	display: flex;