@helpway/react 0.16.0 → 0.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.16.0",
+	"version": "0.17.1",
 	"description": "Official React SDK for Helpway — drop-in AI chat support widget with headless hooks for custom UIs.",
 	"keywords": [
 		"helpway",
@@ -43,8 +43,9 @@
 		"test": "bun test",
 		"sync:icons": "bun scripts/sync-icons.ts",
 		"prepublishOnly": "bun run build",
-		"prepack": "bun run build && bun scripts/apply-publish-config.ts",
-		"postpack": "bun scripts/apply-publish-config.ts --restore"
+		"prepack": "bun scripts/sync-icons.ts --check && bun run build && bun scripts/apply-publish-config.ts",
+		"postpack": "bun scripts/apply-publish-config.ts --restore",
+		"check:icons": "bun scripts/sync-icons.ts --check"
 	},
 	"//": "publishConfig swaps main/types/exports to the built dist on publish. Workspace consumers get raw src (fast HMR, no build step); npm consumers get compiled dist with .d.ts. Standard monorepo pattern.",
 	"dependencies": {

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;
 }
@@ -361,6 +370,48 @@
 	height: min(800px, calc(100vh - 112px));
 }
 
+/* The mobile SDK's sheet (widget.js mobile mode, #268): the native sheet IS
+   the window, at every width. An iPad's page sheet is wider than the 480px
+   phone breakpoint, and without this the floating panel would sit in a
+   corner of it. No open animation either — the sheet already slid up, and
+   a second slide inside it reads as the app stuttering. :host only matches
+   inside the embed's shadow root, so @helpway/react consumers never see it. */
+:host([data-hw-mode="mobile"]) .hw-window,
+:host([data-hw-mode="mobile"]) .hw-window--reading {
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: var(--hw-visible-height, 100%);
+	border-radius: 0;
+	box-shadow: none;
+	animation: none;
+}
+/* The bubble is the launcher, and the app's own Help row is the launcher
+   here. hideLauncher does not remove it (it only stops click-outside from
+   closing the panel), so without this a black × sat over the send button. */
+/* The hero is a gradient (background-image), so its computed
+   background-color was transparent and the SDK could not tell the native
+   sheet what colour sits under iOS's grabber. The gradient's own top-left
+   stop, as a solid underneath it: invisible here, measurable there
+   (widget-embed mobile-chrome.ts). */
+:host([data-hw-mode="mobile"]) .hw-hero {
+	background-color: color-mix(in srgb, var(--hw-primary) 60%, black);
+}
+:host([data-hw-mode="mobile"]) .hw-bubble {
+	display: none;
+}
+
+/* Keyboard open (default-widget.tsx sets data-hw-keyboard from
+   visualViewport). The home-indicator inset is under the keyboard, so
+   padding for it leaves an empty band between composer and keys; and the
+   "Powered by" line costs a row the conversation needs more. */
+.hw-window[data-hw-keyboard] .hw-composer {
+	padding-bottom: 8px;
+}
+.hw-window[data-hw-keyboard] .hw-powered {
+	display: none;
+}
+
 @keyframes hw-window-open {
 	from {
 		opacity: 0;
@@ -478,7 +529,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 +653,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 +948,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 +1050,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;
 }
@@ -2674,6 +2729,16 @@
 	.hw-powered {
 		padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
 	}
+	/* The inset belongs to whatever is LAST in the window. With "Powered by"
+	   under the composer (or the tabs), both were padding for the same home
+	   indicator — the empty band above "Powered by" in Ali's simulator run of
+	   the mobile SDK. The line carries it; what sits above it does not. */
+	.hw-window:has(.hw-powered) .hw-composer {
+		padding-bottom: 8px;
+	}
+	.hw-window:has(.hw-powered) .hw-tabs {
+		padding-bottom: 0;
+	}
 
 	/* Touch targets */
 	.hw-header-close,
@@ -2755,7 +2820,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 +2872,7 @@
 	overflow: hidden;
 }
 
-.hw-preview-avatar svg {
+.hw-preview-avatar svg:not(.hw-agent-custom svg) {
 	width: 16px;
 	height: 16px;
 }
@@ -5460,6 +5525,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;