@helpway/react 0.8.3 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.8.3",
+	"version": "0.10.0",
 	"description": "Official React SDK for Helpway — drop-in AI chat support widget with headless hooks for custom UIs.",
 	"keywords": [
 		"helpway",
@@ -51,8 +51,6 @@
 		"zustand": "^5.0.11"
 	},
 	"devDependencies": {
-		"@helpway/types": "workspace:*",
-		"@helpway/widget-core": "workspace:*",
 		"@types/react": "^19.1.6",
 		"@types/react-dom": "^19.1.6",
 		"@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.213",

package/src/themed/styles.css

@@ -354,10 +354,11 @@
 /* Reading mode — applied when the visitor enters a content detail view
    (help article, changelog entry). Wider + taller for comfortable long-form
    reading. Mobile (<480px) ignores this — the @media block forces 100% +
-   beats this rule by source order. */
+   beats this rule by source order. Bottom offset (72px bubble + 20px gap)
+   is subtracted so the window never clips above the viewport. */
 .hw-window--reading {
 	width: min(720px, calc(100vw - 40px));
-	height: min(800px, calc(100vh - 100px));
+	height: min(800px, calc(100vh - 112px));
 }
 
 @keyframes hw-window-open {
@@ -476,12 +477,17 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: 10px;
-	overflow: hidden;
 }
 .hw-hero-bot-icon svg {
 	width: 32px;
 	height: 32px;
 }
+.hw-hero-bot-icon .hw-agent-img,
+.hw-hero-bot-icon .hw-agent-icon {
+	border-radius: inherit;
+	overflow: hidden;
+	object-fit: contain;
+}
 
 .hw-hero-greeting {
 	font-size: 26px;
@@ -583,7 +589,6 @@
 	align-items: center;
 	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
@@ -605,6 +610,12 @@
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
+	border-radius: inherit;
+}
+.hw-header-bot-icon .hw-agent-img,
+.hw-header-bot-icon .hw-agent-icon {
+	border-radius: inherit;
+	overflow: hidden;
 }
 .hw-header-bot-icon .hw-agent-img {
 	object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));
@@ -1156,6 +1167,7 @@
 .hw-tabs-item svg {
 	width: 22px;
 	height: 22px;
+	overflow: visible;
 }
 .hw-tabs-item--active {
 	color: var(--hw-text);
@@ -1535,6 +1547,85 @@
 	}
 }
 
+/* ── Streaming cursor ────────────────────── */
+
+.hw-streaming-cursor {
+	display: inline-block;
+	width: 2px;
+	height: 1em;
+	background: currentColor;
+	opacity: 0.6;
+	margin-left: 1px;
+	vertical-align: text-bottom;
+	animation: hw-cursor-blink 0.8s step-end infinite;
+}
+
+@keyframes hw-cursor-blink {
+	50% { opacity: 0; }
+}
+
+/* ── Link preview card ───────────────────── */
+
+.hw-link-preview {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid rgba(0, 0, 0, 0.08);
+	border-radius: 10px;
+	overflow: hidden;
+	text-decoration: none;
+	color: inherit;
+	margin-top: 6px;
+	transition: background 0.15s;
+}
+
+.hw-link-preview:hover {
+	background: rgba(0, 0, 0, 0.02);
+}
+
+.hw-link-preview-img {
+	width: 100%;
+	max-height: 140px;
+	object-fit: cover;
+}
+
+.hw-link-preview-body {
+	padding: 10px 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+}
+
+.hw-link-preview-favicon {
+	width: 16px;
+	height: 16px;
+	border-radius: 2px;
+}
+
+.hw-link-preview-title {
+	font-size: 13px;
+	font-weight: 600;
+	line-height: 1.3;
+	color: var(--hw-text, #1a1a1a);
+}
+
+.hw-link-preview-desc {
+	font-size: 12px;
+	line-height: 1.4;
+	color: var(--hw-text-muted, #6b7280);
+}
+
+.hw-link-preview-url {
+	font-size: 11px;
+	color: var(--hw-text-muted, #9ca3af);
+}
+
+.hw-msg-links {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	max-width: 280px;
+}
+
 /* ════════════════════════════════════════════════
    LOADING STATE
    ════════════════════════════════════════════════ */
@@ -1891,7 +1982,10 @@
 }
 
 .hw-composer-input {
-	flex: 1;
+	/* No `flex: 1` — column flex with `flex-basis: 0%` makes the browser
+	   ignore both `style.height` (JS resize) AND `field-sizing: content`,
+	   clamping the textarea to `min-height` after 2 lines. Cross-axis
+	   stretch still gives full width via the parent's `align-items` default. */
 	resize: none;
 	border: none;
 	padding: 12px 16px 4px;
@@ -2593,6 +2687,38 @@
 	transition: transform 0.15s, box-shadow 0.15s;
 }
 
+/* Anchored placement — used when the preview is rendered next to a
+   custom trigger (e.g. a sidebar item) instead of the floating
+   launcher. Drops the launcher-bound absolute pin AND the fixed 300px
+   so the consumer's own positioned + sized wrapper fully controls it
+   (e.g. fit within a narrow sidebar instead of overflowing into page
+   content). Shadow, radius, animation, hover stay identical. Double-
+   class so it always beats the single-class `.hw-preview` regardless
+   of source order. */
+.hw-preview.hw-preview--anchored {
+	position: static;
+	bottom: auto;
+	right: auto;
+	width: 100%;
+	max-width: 100%;
+}
+
+/* Anchored avatar — dekorasyonsuz: the launcher's gradient puck makes
+   sense above a floating bubble, but in a sidebar it competes with
+   surrounding chrome. Consumers want the bare agent mark and apply
+   their own framing (e.g. dark-mode inversion). SDK only drops the
+   gradient bg here; size and radius inherit from the base. The
+   img/svg sizing stays so an uploaded logo doesn't get cropped. */
+.hw-preview.hw-preview--anchored .hw-preview-avatar {
+	background: none;
+}
+.hw-preview.hw-preview--anchored .hw-preview-avatar img,
+.hw-preview.hw-preview--anchored .hw-preview-avatar svg {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
 .hw-preview:hover {
 	transform: translateY(-2px);
 	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
@@ -2693,6 +2819,20 @@
 	padding-bottom: 14px;
 }
 
+/* Optional source caption (e.g. "via Helpway"). Thin separated footer
+   so it reads as provenance metadata, not message content. Only
+   rendered when the consumer passes a `footer` — launcher omits it,
+   keeping the original visual byte-identical. */
+.hw-preview-footer {
+	margin-top: 2px;
+	padding: 8px 14px 12px;
+	border-top: 1px solid var(--hw-border);
+	font-size: 11px;
+	line-height: 1.3;
+	color: var(--hw-text-2);
+	opacity: 0.65;
+}
+
 .hw-preview-prompt {
 	padding: 2px 14px 6px;
 	font-size: 14px;
@@ -2727,6 +2867,187 @@
 	border-color: var(--hw-brand, #000);
 }
 
+/* ── Preview closing animation ──────────────────────────── */
+.hw-preview--closing {
+	animation: hw-preview-out 0.2s ease-in forwards;
+}
+
+/* ── Announcement preview stack (multiple tabs) ──────── */
+.hw-preview-stack {
+	position: absolute;
+	bottom: calc(100% + 12px);
+	right: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.hw-preview-stack .hw-preview {
+	position: relative;
+	bottom: auto;
+	right: auto;
+}
+
+/* ── Announcement preview modifier ─────────────────────── */
+.hw-preview--announcement {
+	width: 340px;
+}
+
+.hw-preview--announcement .hw-preview-body--title {
+	font-weight: 600;
+	color: var(--hw-text);
+	font-size: 15px;
+	line-height: 1.3;
+	padding-top: 10px;
+}
+
+.hw-preview--announcement .hw-preview-body--desc {
+	font-size: 13px;
+	color: var(--hw-text-2);
+	line-height: 1.5;
+	padding-bottom: 16px;
+}
+
+.hw-announcement-badge {
+	display: inline-block;
+	margin: 8px 14px 0;
+	padding: 2px 8px;
+	font-size: 10px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--hw-primary);
+	background: color-mix(in srgb, var(--hw-primary) 10%, transparent);
+	border-radius: 4px;
+}
+
+/* ── What's New card (Home tab) ────────────────────────── */
+.hw-whats-new {
+	border-radius: 14px;
+	background: var(--hw-bg);
+	border: 1px solid rgba(0, 0, 0, 0.06);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
+	overflow: hidden;
+}
+
+.hw-whats-new-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 14px 0;
+}
+
+.hw-whats-new-title {
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--hw-text-2);
+}
+
+.hw-whats-new-view-all {
+	font-size: 11px;
+	font-weight: 500;
+	color: var(--hw-primary);
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	font-family: inherit;
+}
+.hw-whats-new-view-all:hover {
+	opacity: 0.8;
+}
+
+.hw-whats-new-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.hw-whats-new-item {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	width: 100%;
+	padding: 10px 14px;
+	border: none;
+	border-bottom: 1px solid var(--hw-border);
+	background: none;
+	cursor: pointer;
+	text-align: left;
+	font-family: inherit;
+	color: var(--hw-text);
+	transition: background-color 140ms ease;
+}
+.hw-whats-new-item:last-child {
+	border-bottom: none;
+}
+.hw-whats-new-item:hover {
+	background: rgba(0, 0, 0, 0.03);
+}
+
+.hw-whats-new-item-top {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.hw-whats-new-badge {
+	font-size: 10px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--hw-primary);
+}
+
+.hw-whats-new-time {
+	font-size: 11px;
+	color: var(--hw-text-3);
+	margin-left: auto;
+}
+
+.hw-whats-new-item-title {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--hw-text);
+	line-height: 1.3;
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+}
+
+.hw-whats-new-time-inline {
+	font-size: 11px;
+	font-weight: 400;
+	color: var(--hw-text-3);
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+.hw-whats-new-item-body {
+	font-size: 12px;
+	color: var(--hw-text-2);
+	line-height: 1.4;
+}
+
+/* ── Announcement dot (tabs + launcher) ────────────────── */
+.hw-tabs-dot {
+	position: absolute;
+	top: -2px;
+	right: -6px;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--hw-primary);
+	animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.hw-bubble-badge-dot {
+	display: block;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: white;
+}
+
 /* ═══════════════════════════════════════════════════════════
    Content Tabs — Better i18n Content CMS integration
    Generic list → detail pattern for all content types
@@ -2887,7 +3208,8 @@
 	padding: 16px;
 	overflow-y: auto;
 	overscroll-behavior: contain;
-	height: 100%;
+	flex: 1;
+	min-height: 0;
 }
 
 .hw-content-detail-header {