@helpway/react 0.5.0 → 0.6.0

package/package.json

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

@@ -41,8 +41,13 @@
 	padding: 0;
 }
 
-/* ── Tokens ────────────────────────────────────── */
-.hw-widget {
+/* ── Tokens ──────────────────────────────────────
+   Wrapped in :where() so the default token block has zero specificity.
+   That way `applyTheme()` (which writes inline styles onto the host
+   element and onto documentElement as a fallback) always wins, and
+   anyone setting --hw-* via their own stylesheet doesn't need
+   `!important` to override us. */
+:where(.hw-widget) {
 	--hw-primary: #171717;
 	--hw-primary-hover: #2a2a2a;
 	/* Brand surface used by team-avatar fallbacks and primary CTAs.
@@ -837,7 +842,7 @@
 	color: var(--hw-text);
 }
 .hw-recent-row--unread .hw-conv-card-time {
-	color: var(--hw-accent);
+	color: var(--hw-primary);
 	font-weight: 500;
 }
 
@@ -978,7 +983,7 @@
 	color: var(--hw-text);
 }
 .hw-conv-card--unread .hw-conv-card-time {
-	color: var(--hw-accent);
+	color: var(--hw-primary);
 	font-weight: 500;
 }
 
@@ -1317,6 +1322,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;
@@ -2468,10 +2522,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;
@@ -2553,14 +2603,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);
 }
 
 /* ═══════════════════════════════════════════════════════════