@helpway/react 0.5.1 → 0.7.0

package/package.json

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

@@ -241,6 +241,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;
@@ -557,6 +577,11 @@
 	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);
 }
 .hw-header-bot-icon svg {
 	width: 24px;
@@ -569,7 +594,14 @@
 .hw-header-agent-img {
 	width: 100%;
 	height: 100%;
-	object-fit: cover;
+	/* 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);
+	box-sizing: border-box;
 }
 .hw-header-agent-initials {
 	font-size: 11px;
@@ -842,7 +874,7 @@
 	color: var(--hw-text);
 }
 .hw-recent-row--unread .hw-conv-card-time {
-	color: var(--hw-accent);
+	color: var(--hw-primary);
 	font-weight: 500;
 }
 
@@ -983,7 +1015,7 @@
 	color: var(--hw-text);
 }
 .hw-conv-card--unread .hw-conv-card-time {
-	color: var(--hw-accent);
+	color: var(--hw-primary);
 	font-weight: 500;
 }
 
@@ -1322,6 +1354,55 @@
 	width: 100%;
 }
 
+/* Quick reply buttons — interactive workflow choices */
+.hw-quick-replies {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	margin-top: 8px;
+}
+
+.hw-quick-reply-btn {
+	font: inherit;
+	font-size: 13px;
+	font-weight: 500;
+	padding: 6px 14px;
+	border-radius: 18px;
+	border: 1px solid rgba(0, 0, 0, 0.12);
+	background: var(--hw-bg, #fff);
+	color: var(--hw-text-1, #1a1a1a);
+	cursor: pointer;
+	transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
+	line-height: 1.3;
+}
+
+.hw-quick-reply-btn:hover:not(:disabled) {
+	border-color: var(--hw-primary);
+	background: color-mix(in srgb, var(--hw-primary) 8%, transparent);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.hw-quick-reply-btn:active:not(:disabled) {
+	transform: scale(0.97);
+}
+
+.hw-quick-reply-btn:disabled {
+	cursor: default;
+	opacity: 0.4;
+}
+
+.hw-quick-reply-btn[data-tapped="true"] {
+	background: var(--hw-primary);
+	color: white;
+	border-color: var(--hw-primary);
+	opacity: 1;
+}
+
+.hw-quick-replies[data-cancelled="true"] .hw-quick-reply-btn {
+	border-color: rgba(0, 0, 0, 0.08);
+	color: var(--hw-text-muted, #9ca3af);
+}
+
 .hw-msg--ai .hw-code {
 	width: 100%;
 	box-sizing: border-box;
@@ -2473,10 +2554,6 @@
 	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
-.hw-preview--closing {
-	animation: hw-preview-out 0.2s ease forwards;
-}
-
 @keyframes hw-preview-in {
 	from {
 		opacity: 0;
@@ -2558,14 +2635,52 @@
 }
 
 .hw-preview-body {
-	padding: 8px 14px 14px;
+	padding: 4px 14px;
 	font-size: 14px;
 	line-height: 1.45;
 	color: var(--hw-text-2);
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
+}
+
+.hw-preview-body:first-of-type {
+	padding-top: 8px;
+}
+
+.hw-preview-body:last-child {
+	padding-bottom: 14px;
+}
+
+.hw-preview-prompt {
+	padding: 2px 14px 6px;
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--hw-text-1);
+}
+
+.hw-preview-quick-replies {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	padding: 0 14px 14px;
+}
+
+.hw-preview-qr-btn {
+	display: inline-flex;
+	align-items: center;
+	padding: 6px 14px;
+	font-size: 13px;
+	font-weight: 500;
+	line-height: 1.3;
+	color: var(--hw-brand, #000);
+	background: transparent;
+	border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.1));
+	border-radius: 18px;
+	cursor: pointer;
+	transition: background 0.15s, border-color 0.15s;
+}
+
+.hw-preview-qr-btn:hover {
+	background: var(--hw-hover, rgba(0, 0, 0, 0.04));
+	border-color: var(--hw-brand, #000);
 }
 
 /* ═══════════════════════════════════════════════════════════