@helpway/react 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.6.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 */
@@ -241,6 +247,26 @@
 	border-radius: 0; /* bubble itself handles rounding */
 }
 
+/* Logo variant (admin-uploaded launcherIconUrl OR website.logoUrl) —
+   logos carry their own padding rules and shouldn't be cropped. Use
+   `contain` + inner padding so SVG/PNG marks render at intended
+   proportion inside the rounded bubble. `object-fit: cover` is correct
+   only for face avatars. Padding is applied directly on the img so it
+   works regardless of whether the parent has --logo / --avatar class. */
+.hw-agent-img.hw-agent-img--logo {
+	object-fit: contain;
+	padding: 10px;
+	box-sizing: border-box;
+}
+/* Higher-specificity override: .hw-bubble--avatar's inner img rule sets
+   width/height + border-radius:0 with 3-class specificity. Match that
+   so logo padding actually applies inside the bubble. */
+.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {
+	padding: 10px;
+	box-sizing: border-box;
+	object-fit: contain;
+}
+
 .hw-bubble-icon--close svg {
 	width: 22px;
 	height: 22px;
@@ -375,6 +401,7 @@
 	.hw-window--closing,
 	.hw-content,
 	.hw-msg,
+	.hw-bubble,
 	.hw-bubble-icon,
 	.hw-bubble-badge,
 	.hw-bubble-badge::after,
@@ -557,6 +584,14 @@
 	justify-content: center;
 	border-radius: 8px;
 	overflow: hidden;
+	/* 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;
@@ -571,6 +606,21 @@
 	height: 100%;
 	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;
@@ -916,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;
@@ -931,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);
@@ -2287,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;
@@ -2300,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;