@helpway/react 0.16.0 → 0.17.0

package/package.json

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

@@ -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;
 }
@@ -5460,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;