@helpway/react 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.1.1",
+	"version": "0.3.0",
 	"description": "Official React SDK for Helpway — drop-in AI chat support widget with headless hooks for custom UIs.",
 	"keywords": [
 		"helpway",
@@ -21,13 +21,15 @@
 		"url": "https://github.com/better-i18n/helpway/issues"
 	},
 	"type": "module",
-	"sideEffects": [
-		"**/*.css"
-	],
-	"main": "./src/index.ts",
-	"types": "./src/index.ts",
+	"//sideEffects": "tsup injectStyle bundles CSS into JS as a runtime styleInject() call. Must be true (not an array) because some bundlers — notably Vite's esbuild pre-bundler — don't honor path-scoped sideEffects entries for npm deps. Widget bundle is tiny (~240KB), cost of losing tree-shaking is negligible.",
+	"sideEffects": true,
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
 	"exports": {
-		".": "./src/index.ts",
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
 		"./styles.css": "./src/themed/styles.css"
 	},
 	"files": [
@@ -38,22 +40,11 @@
 	"scripts": {
 		"build": "tsup",
 		"typecheck": "tsc --noEmit",
-		"prepublishOnly": "bun run build"
+		"prepublishOnly": "bun run build",
+		"prepack": "bun run build && bun scripts/apply-publish-config.ts",
+		"postpack": "bun scripts/apply-publish-config.ts --restore"
 	},
 	"//": "publishConfig swaps main/types/exports to the built dist on publish. Workspace consumers get raw src (fast HMR, no build step); npm consumers get compiled dist with .d.ts. Standard monorepo pattern.",
-	"publishConfig": {
-		"access": "public",
-		"main": "./dist/index.js",
-		"module": "./dist/index.js",
-		"types": "./dist/index.d.ts",
-		"exports": {
-			".": {
-				"types": "./dist/index.d.ts",
-				"import": "./dist/index.js"
-			},
-			"./styles.css": "./src/themed/styles.css"
-		}
-	},
 	"dependencies": {
 		"@trpc/client": "^11.5.1",
 		"zustand": "^5.0.11",
@@ -70,5 +61,7 @@
 	"peerDependencies": {
 		"react": "^18.0.0 || ^19.0.0",
 		"react-dom": "^18.0.0 || ^19.0.0"
-	}
+	},
+	"access": "public",
+	"module": "./dist/index.js"
 }

package/src/themed/styles.css

@@ -1,8 +1,12 @@
 /* ═══ Helpway Widget — Premium Intercom-Style ═══
-   Vanilla CSS for Shadow DOM. Gradient hero, card-based actions,
+   Vanilla CSS. Works in both Shadow DOM (script embed) and regular
+   DOM (React native render). Gradient hero, card-based actions,
    avatar-first conversation rows, bottom tab navigation. */
 
 /* ── Reset ─────────────────────────────────────── */
+/* Shadow DOM root — matches when the widget is mounted under a
+   <helpway-widget> custom element with shadow root. Regular-DOM
+   consumers ignore :host (selector never matches). */
 :host {
 	all: initial;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
@@ -14,6 +18,21 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
+/* Regular-DOM reset — applies the same typography baseline on the
+   `.hw-widget` root when there is no shadow DOM. Scoped so the
+   consumer's host page styles can't leak in and so we don't touch
+   anything outside `.hw-widget`. Don't use `all: initial` here —
+   it would wipe out `.hw-widget { position: fixed; z-index: ... }`. */
+.hw-widget {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+		sans-serif;
+	font-size: 14px;
+	line-height: 1.5;
+	color: #1a1a1a;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
 .hw-widget *,
 .hw-widget *::before,
 .hw-widget *::after {
@@ -45,7 +64,12 @@
 	--hw-radius: 16px;
 	--hw-visitor-bubble-bg: #f0f0f0;
 	--hw-visitor-bubble-text: #1a1a1a;
-	--hw-font: inherit;
+	/* Widget font stack. Consumers can override by setting --hw-font
+	   on the `.hw-widget` element. Was `inherit` previously, which
+	   meant "use host page font" — but in non-shadow-DOM that inherits
+	   from <body>, often an unstyled fallback (Times New Roman). */
+	--hw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+		sans-serif;
 }
 
 /* ── Agent Avatar Image / Icon ────────────────── */
@@ -510,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;
@@ -862,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;
@@ -1062,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 ─────────────────────────── */
@@ -1140,6 +1230,11 @@
 	align-self: flex-start;
 }
 
+.hw-msg--ai {
+	width: 100%;
+	max-width: 100%;
+}
+
 .hw-msg-body {
 	display: flex;
 	flex-direction: column;
@@ -1182,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);
 }
 
-/* Meta (time + sender label) — hidden, show on hover */
+.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 (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-meta {
+	max-width: 0;
+	opacity: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	transition:
+		max-width 180ms ease,
+		opacity 140ms ease;
 }
 
-.hw-msg:hover .hw-msg-meta,
-.hw-msg:focus-within .hw-msg-meta {
+.hw-msg:hover .hw-msg-hover-meta,
+.hw-msg:focus-within .hw-msg-hover-meta {
+	max-width: 180px;
 	opacity: 1;
 }
 
@@ -2236,6 +2364,9 @@
 	.hw-msg {
 		max-width: 82%;
 	}
+	.hw-msg--ai {
+		max-width: 100%;
+	}
 }
 
 /* ════════════════════════════════════════════════
@@ -2611,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);
@@ -2624,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 {
@@ -2659,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 {
@@ -2683,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
@@ -2731,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);
@@ -2827,6 +3070,9 @@
 	.hw-msg-meta {
 		opacity: 1;
 	}
+	.hw-msg-copy {
+		opacity: 1;
+	}
 }
 
 /* ════════════════════════════════════════════════
@@ -2885,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);
@@ -3272,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;