@helpway/react 0.7.0 → 0.8.0

package/package.json

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

@@ -122,6 +122,11 @@
    BUBBLE (FAB)
    ════════════════════════════════════════════════ */
 
+@keyframes hw-bubble-enter {
+	from { opacity: 0; transform: scale(0.6); }
+	to   { opacity: 1; transform: scale(1); }
+}
+
 .hw-bubble {
 	width: 48px;
 	height: 48px;
@@ -137,6 +142,7 @@
 	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
 	position: relative;
 	overflow: visible;
+	animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
 /* bubbleStyle variants — override border-radius */
@@ -395,6 +401,7 @@
 	.hw-window--closing,
 	.hw-content,
 	.hw-msg,
+	.hw-bubble,
 	.hw-bubble-icon,
 	.hw-bubble-badge,
 	.hw-bubble-badge::after,
@@ -577,11 +584,14 @@
 	justify-content: center;
 	border-radius: 8px;
 	overflow: hidden;
-	/* Public override hook — light SVG/PNG logos disappear on white
-	   chat-header cards. Site stylesheet sets `--hw-agent-bg` to a
-	   contrast color (e.g. brand color) and the avatar gets a tinted
-	   circle behind it. Default `transparent` preserves legacy look. */
-	background: var(--hw-agent-bg, transparent);
+	/* Two-tier fallback so site overrides still win cleanly:
+	   1. Site stylesheet → `--hw-agent-bg` (highest priority)
+	   2. Widget smart default → `--hw-agent-bg-default` (set when the
+	      org uploaded a logo as the avatar; see [data-has-avatar])
+	   3. Built-in `transparent` (face-photo legacy default)
+	   Setting --hw-agent-bg in user CSS short-circuits the entire
+	   chain — exactly the cascade behavior we want. */
+	background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));
 }
 .hw-header-bot-icon svg {
 	width: 24px;
@@ -594,15 +604,23 @@
 .hw-header-agent-img {
 	width: 100%;
 	height: 100%;
-	/* Override hooks: `--hw-agent-fit` swaps cover→contain so logos
-	   aren't cropped, `--hw-agent-pad` adds breathing room around the
-	   logo inside the circle. Defaults match legacy face-photo
-	   behavior. Padding requires border-box so it stays inside the
-	   circle rather than expanding the img. */
-	object-fit: var(--hw-agent-fit, cover);
-	padding: var(--hw-agent-pad, 0);
+	object-fit: cover;
+}
+.hw-header-bot-icon .hw-agent-img {
+	object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));
+	padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));
 	box-sizing: border-box;
 }
+
+/* Smart default: the org uploaded a logo (vs a face photo). Widget
+   sets data-has-avatar="true" on the root when agentConfig.avatarUrl
+   is non-empty. Logos look right with brand-tinted circle + contain +
+   inner padding; face photos with the legacy transparent + cover. */
+.hw-widget[data-has-avatar="true"] {
+	--hw-agent-bg-default: var(--hw-primary);
+	--hw-agent-fit-default: contain;
+	--hw-agent-pad-default: 6px;
+}
 .hw-header-agent-initials {
 	font-size: 11px;
 	font-weight: 600;
@@ -948,7 +966,11 @@
 	width: 36px;
 	height: 36px;
 	border-radius: 10px;
-	background: var(--hw-bg-subtle);
+	/* Same fallback chain as the chat-header avatar so the smart default
+	   for uploaded logos (data-has-avatar="true" → --hw-agent-bg-default)
+	   reaches conversation rows too. Falls through to --hw-bg-subtle for
+	   face-photo agents (legacy gray container). */
+	background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-subtle)));
 	color: var(--hw-text-3);
 	display: flex;
 	align-items: center;
@@ -963,8 +985,19 @@
 .hw-conv-card-avatar-img {
 	width: 100%;
 	height: 100%;
+	/* Team-member uploaded image — face photos by design, so cover-by-
+	   default is correct. We deliberately don't apply --hw-agent-fit
+	   here because that variable is for the BOT avatar (logo case). */
 	object-fit: cover;
 }
+/* Bot-side image rendered via WidgetLogo inside the conv-card-avatar.
+   Reaches the same fallback chain used in the chat header so uploaded
+   logos get contain + padding here as well. */
+.hw-conv-card-avatar .hw-agent-img {
+	object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));
+	padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));
+	box-sizing: border-box;
+}
 .hw-conv-card-avatar--team {
 	background: var(--hw-brand, #0a0a0a);
 	color: var(--hw-on-brand, #fff);
@@ -2319,7 +2352,10 @@
 	width: 32px;
 	height: 32px;
 	border-radius: 50%;
-	background: var(--hw-bg-hover, #e0e0e0);
+	/* Fallback chain mirroring chat-header / conv-list — uploaded-logo
+	   smart default reaches event rows (joined/left) when the bot
+	   avatar is the one being shown. Falls through to legacy gray. */
+	background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-hover, #e0e0e0)));
 	color: var(--hw-text-2, #555);
 	display: flex;
 	align-items: center;
@@ -2332,8 +2368,16 @@
 .hw-event-avatar-img {
 	width: 100%;
 	height: 100%;
+	/* Same reasoning as conv-card-avatar-img: this is the human/team
+	   member's photo, cover is intentional. Bot-side avatars rendered
+	   via WidgetLogo (.hw-agent-img) get the variable-driven fit below. */
 	object-fit: cover;
 }
+.hw-event-avatar .hw-agent-img {
+	object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));
+	padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));
+	box-sizing: border-box;
+}
 
 .hw-event-body {
 	font-size: 13px;