@helpway/react 0.2.0 → 0.3.0

package/package.json

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

@@ -534,6 +534,20 @@
 	width: 24px;
 	height: 24px;
 }
+.hw-header-bot-icon--team {
+	background: var(--hw-brand, #0a0a0a);
+	color: #fff;
+}
+.hw-header-agent-img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.hw-header-agent-initials {
+	font-size: 11px;
+	font-weight: 600;
+	line-height: 1;
+}
 
 .hw-header-info {
 	flex: 1;
@@ -886,6 +900,21 @@
 	width: 20px;
 	height: 20px;
 }
+.hw-conv-card-avatar-img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.hw-conv-card-avatar--team {
+	background: var(--hw-brand, #0a0a0a);
+	color: #fff;
+}
+.hw-conv-card-avatar-initials {
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 1;
+	letter-spacing: 0.02em;
+}
 
 .hw-conv-card-content {
 	flex: 1;
@@ -1086,6 +1115,43 @@
 	/* Flex column with constrained children — min-width:0 allows children to
      honor their own max-width rather than inflating to content width. */
 	min-width: 0;
+	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+	scrollbar-width: thin;
+}
+
+.hw-messages::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+.hw-messages::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.hw-messages::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.16);
+	background-clip: content-box;
+	border: 3px solid transparent;
+	border-radius: 999px;
+}
+
+.hw-messages::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.28);
+	background-clip: content-box;
+}
+
+.hw-widget[data-theme="dark"] .hw-messages {
+	scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
+}
+
+.hw-widget[data-theme="dark"] .hw-messages::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.2);
+	background-clip: content-box;
+}
+
+.hw-widget[data-theme="dark"] .hw-messages::-webkit-scrollbar-thumb:hover {
+	background: rgba(255, 255, 255, 0.32);
+	background-clip: content-box;
 }
 
 /* ── Empty Messages ─────────────────────────── */
@@ -1164,6 +1230,11 @@
 	align-self: flex-start;
 }
 
+.hw-msg--ai {
+	width: 100%;
+	max-width: 100%;
+}
+
 .hw-msg-body {
 	display: flex;
 	flex-direction: column;
@@ -1206,21 +1277,54 @@
 	color: var(--hw-text);
 	border-bottom-left-radius: 4px;
 	white-space: normal; /* AI messages use HTML rendering (markdown), not pre-wrap */
+	max-width: min(100%, 640px);
+}
+
+.hw-msg--ai .hw-msg-body {
+	width: 100%;
+}
+
+.hw-msg--ai .hw-msg-bubble:has(.hw-code),
+.hw-msg--ai .hw-msg-bubble:has(pre) {
+	width: 100%;
+}
+
+.hw-msg--ai .hw-code {
+	width: 100%;
+	box-sizing: border-box;
 }
 
-/* Meta (time + sender label) — hidden, show on hover */
+/* Meta (clock always visible; sender/copy reveal on hover) */
 .hw-msg-meta {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
 	font-size: 11px;
 	color: var(--hw-text-3);
 	margin-top: 3px;
 	padding: 0 4px;
-	opacity: 0;
-	transition: opacity 0.15s;
+	opacity: 1;
 	font-variant-numeric: tabular-nums;
+	min-height: 20px;
+}
+
+.hw-msg-time {
+	opacity: 0.72;
 }
 
-.hw-msg:hover .hw-msg-meta,
-.hw-msg:focus-within .hw-msg-meta {
+.hw-msg-hover-meta {
+	max-width: 0;
+	opacity: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	transition:
+		max-width 180ms ease,
+		opacity 140ms ease;
+}
+
+.hw-msg:hover .hw-msg-hover-meta,
+.hw-msg:focus-within .hw-msg-hover-meta {
+	max-width: 180px;
 	opacity: 1;
 }
 
@@ -2260,6 +2364,9 @@
 	.hw-msg {
 		max-width: 82%;
 	}
+	.hw-msg--ai {
+		max-width: 100%;
+	}
 }
 
 /* ════════════════════════════════════════════════
@@ -2635,7 +2742,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 6px 12px;
+	gap: 10px;
+	padding: 7px 8px 7px 12px;
 	font-size: 11px;
 	color: var(--hw-text-2, #6b7280);
 	background: rgba(0, 0, 0, 0.03);
@@ -2648,24 +2756,85 @@
 	font-weight: 500;
 }
 
-.hw-code-copy {
+.hw-code-actions {
 	display: inline-flex;
 	align-items: center;
-	gap: 4px;
-	padding: 2px 8px;
-	font-size: 11px;
+	gap: 1px;
+}
+
+.hw-code-action {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	padding: 0;
 	font-family: inherit;
 	color: var(--hw-text-2, #6b7280);
 	background: transparent;
 	border: 1px solid transparent;
-	border-radius: 5px;
+	border-radius: 6px;
 	cursor: pointer;
-	transition: background 120ms ease, color 120ms ease;
+	opacity: 0.62;
+	transition:
+		background 120ms ease,
+		color 120ms ease,
+		opacity 120ms ease,
+		scale 120ms ease;
 }
 
-.hw-code-copy:hover {
+.hw-code-action:hover {
 	color: var(--hw-text, #111);
 	background: rgba(0, 0, 0, 0.06);
+	opacity: 1;
+}
+
+.hw-code-action:active {
+	scale: 0.96;
+}
+
+.hw-code-action svg {
+	width: 13px;
+	height: 13px;
+}
+
+.hw-code-copy-icon,
+.hw-code-check-icon {
+	position: absolute;
+	inset: 50% auto auto 50%;
+	transition:
+		opacity 180ms cubic-bezier(0.2, 0, 0, 1),
+		scale 180ms cubic-bezier(0.2, 0, 0, 1),
+		filter 180ms cubic-bezier(0.2, 0, 0, 1);
+	translate: -50% -50%;
+}
+
+.hw-code-check-icon {
+	filter: blur(4px);
+	opacity: 0;
+	scale: 0.25;
+}
+
+.hw-code-copy--copied .hw-code-copy-icon {
+	filter: blur(4px);
+	opacity: 0;
+	scale: 0.25;
+}
+
+.hw-code-copy--copied .hw-code-check-icon {
+	filter: blur(0);
+	opacity: 1;
+	scale: 1;
+}
+
+.hw-code-copy-label {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
 }
 
 .hw-code-copy--copied {
@@ -2683,6 +2852,30 @@
 	border-radius: 0;
 	overflow-x: auto;
 	max-width: 100%;
+	max-height: 320px;
+	scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
+	scrollbar-width: thin;
+}
+
+.hw-code pre::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+.hw-code pre::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.hw-code pre::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.18);
+	background-clip: content-box;
+	border: 3px solid transparent;
+	border-radius: 999px;
+}
+
+.hw-code pre::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.28);
+	background-clip: content-box;
 }
 
 .hw-code pre code {
@@ -2707,9 +2900,21 @@
 		background: rgba(255, 255, 255, 0.03);
 		border-bottom-color: rgba(255, 255, 255, 0.06);
 	}
-	.hw-code-copy:hover {
+	.hw-code-action:hover,
+	.hw-code-action:focus-visible {
 		background: rgba(255, 255, 255, 0.08);
 	}
+	.hw-code pre {
+		scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
+	}
+	.hw-code pre::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.22);
+		background-clip: content-box;
+	}
+	.hw-code pre::-webkit-scrollbar-thumb:hover {
+		background: rgba(255, 255, 255, 0.32);
+		background-clip: content-box;
+	}
 }
 
 /* Legacy bare <pre> fallback (rendered by old CMS bodyHtml content that may
@@ -2755,6 +2960,20 @@
 	white-space: pre;
 }
 
+.hw-msg-bubble .hw-code pre {
+	margin: 0;
+	padding: 10px 12px;
+	background: transparent;
+	border-radius: 0;
+}
+
+.hw-msg-bubble .hw-code pre code {
+	background: transparent;
+	padding: 0;
+	font-size: 12px;
+	line-height: 1.55;
+}
+
 .hw-msg--team .hw-msg-bubble pre,
 .hw-msg--visitor .hw-msg-bubble pre {
 	background: rgba(255, 255, 255, 0.12);
@@ -2851,6 +3070,9 @@
 	.hw-msg-meta {
 		opacity: 1;
 	}
+	.hw-msg-copy {
+		opacity: 1;
+	}
 }
 
 /* ════════════════════════════════════════════════
@@ -2909,11 +3131,20 @@
 	color: var(--hw-text-4);
 	cursor: pointer;
 	vertical-align: middle;
-	transition: color 0.15s, background 0.15s;
+	opacity: 0;
+	transition:
+		color 0.15s,
+		background 0.15s,
+		opacity 0.15s;
 	padding: 0;
 	flex-shrink: 0;
 }
 
+.hw-msg:hover .hw-msg-copy,
+.hw-msg:focus-within .hw-msg-copy {
+	opacity: 1;
+}
+
 .hw-msg-copy:hover {
 	background: var(--hw-bg-hover);
 	color: var(--hw-text-2);
@@ -3296,6 +3527,20 @@
 }
 
 @media (prefers-color-scheme: dark) {
+	.hw-widget:not([data-theme="light"]) .hw-messages {
+		scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
+	}
+
+	.hw-widget:not([data-theme="light"]) .hw-messages::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.2);
+		background-clip: content-box;
+	}
+
+	.hw-widget:not([data-theme="light"]) .hw-messages::-webkit-scrollbar-thumb:hover {
+		background: rgba(255, 255, 255, 0.32);
+		background-clip: content-box;
+	}
+
 	.hw-widget:not([data-theme="light"]) {
 		--hw-bg: #1c1c1e;
 		--hw-bg-subtle: #161618;