inline-chat-kit 0.54.0 → 0.54.2

package/CHANGELOG.md

@@ -1,11 +1,97 @@
 # Changelog
 
-Dates are the day the work landed on `main`.
+Dates are the day the work landed on `main`, which is not always the day it
+reached npm: `0.52.1` and `0.53.0` were written up here and never published,
+and their changes shipped in `0.54.0`. Each is marked.
 
 The versions before 1.0 follow the pre-release convention: **a breaking change
 or new public API bumps the minor**, and the patch is for fixes. Anything that would break an
 existing install is called out under **Breaking**, with what to do about it.
 
+## 0.54.2 — 2026-09-12
+
+### Fixed
+
+- **The sent message leapt off the top of the view when an answer settled.**
+  Measured on the demo at 1100×700, at the frame the turn count went from one
+  to two: `scrollTop` 0 → 175, in a single frame, and the message that had
+  just been sent went from 100px down the view to −75.
+
+  It was not the scroll logic. `Conversation` made **exactly one** correction
+  in the whole session — a smooth one, arriving after the jump had already
+  happened. The jump was `focus()`: when an answer settles the next turn is
+  appended, its composer mounts at the bottom of the conversation and focuses
+  itself, and focusing an element brings it into view. Instantly, and without
+  asking anyone.
+
+  `preventScroll` now. Where the view goes belongs to `Conversation`, which
+  knows about anchors, tails, and whether the reader has scrolled away; focus
+  is about the keyboard. The same moment is now eight frames with a largest
+  step of 48px.
+
+  Three traces to find, because every instrument pointed at the scroll logic
+  and the scroll logic was innocent. The first two also measured the wrong
+  element — during an answer the last editable belongs to the turn being
+  written, and afterwards to a different turn entirely, so the trace read a
+  change of subject as a movement.
+
+## 0.54.1 — 2026-09-12
+
+### Fixed
+
+- **Scrolling up was fought for the first 64 pixels, then let go all at
+  once.** Since 0.54.0 measured the room under the last turn, the view comes
+  to rest exactly at the end of the scroll — so every upward scroll now starts
+  inside the band that counts as "back at the end", and the scroll event
+  re-acquired a reader who was still on their way out. Measured at rest, with
+  a real wheel:
+
+  | wheeled up | wanted | ended at |
+  | --- | --- | --- |
+  | 20px | 134 | **154** |
+  | 40px | 114 | **154** |
+  | 63px | 91 | **154** |
+  | 80px | 74 | 74 |
+
+  Arriving and leaving are different questions and no longer share a number.
+  `threshold` stays what it was — how far you must go before the view accepts
+  you have left, generous so a nudge does not abandon the answer you are
+  reading. Coming back now means coming back: four pixels, a rounding
+  allowance rather than an opinion.
+
+  A test asserted the old behaviour in so many words — "inside the 64px
+  threshold" — which is the fault written down as a rule. It says the opposite
+  now, beside one that pins the fault.
+
+### Added
+
+- **[Getting started](./getting-started.md)** — one file, ten minutes, a chat
+  that runs with no backend, then one paragraph to point it at a model. The
+  README's first example was a single `<ChatInput>`, which is a text box: to
+  get the experience the page describes you also needed `useChatTurns`,
+  `Conversation` and the anchoring, and those were three sections apart with no
+  runnable file between them.
+
+  The example is `src/examples/minimal.tsx`, so `tsc -b` compiles it on every
+  build; a test asserts the page quotes it character for character; and a
+  Storybook story renders it, so the claim that it works is checked three ways
+  and none of them is a screenshot somebody took once. Nothing imports it, so
+  the library build never reaches it — verified at zero occurrences in the
+  bundle.
+
+### Fixed
+
+- **The default placeholder was `"Placeholder text..."`** — a stand-in nobody
+  replaced. A default is what every consumer who has not thought about it yet
+  ships in production, which is most of them on their first afternoon. It is
+  `"Ask anything…"` now. Found by writing the getting-started page and looking
+  at what it drew, which is the argument for having one.
+
+- **The changelog promised two versions that were never published.** The
+  registry goes `0.52.0` → `0.54.0`; this file described `0.52.1` and `0.53.0`
+  with dates, so anyone reaching for `npm i inline-chat-kit@0.53.0` got
+  nothing. Both are marked, and their changes shipped in `0.54.0`.
+
 ## 0.54.0 — 2026-09-12
 
 Everything here came out of using the kit on a phone. It is better there than
@@ -202,6 +288,10 @@ see *Where it is meant to run*.
 
 ## 0.53.0 — 2026-09-03
 
+> **Never published.** This version exists in this file and not on npm —
+> the registry goes `0.52.0` → `0.54.0`. Everything below shipped in 0.54.0,
+> which is the version to install if you came here looking for it.
+
 ### Changed
 
 - **The artifact card moves instead of changing colour.** Pointing at it lifted
@@ -272,6 +362,10 @@ see *Where it is meant to run*.
 
 ## 0.52.1 — 2026-09-03
 
+> **Never published.** This version exists in this file and not on npm —
+> the registry goes `0.52.0` → `0.54.0`. Everything below shipped in 0.54.0,
+> which is the version to install if you came here looking for it.
+
 ### Fixed
 
 - **The composer's editor was 16px wider than the box that clips it.**

package/README.md

@@ -10,6 +10,10 @@ answers you can draw on with a marker,
 syntax-highlighted code blocks, a scroll container that keeps up with an
 answer, and reply-in-thread popups.
 
+**New here?** [**Getting started**](./getting-started.md) is one file, ten
+minutes, and a chat that runs with no backend. The rest of this page is the
+reference.
+
 ## Where it is meant to run
 
 **Desktop and tablet.** That is what this is designed for, tuned for, and what

package/dist/examples/minimal.d.ts

@@ -0,0 +1 @@
+export declare function MinimalChat(): import("react").JSX.Element;

package/dist/inline-chat-kit.js

@@ -747,7 +747,7 @@ var Ue = {
 	n.deleteContents();
 	let r = document.createTextNode(e);
 	return n.insertNode(r), n.setStartAfter(r), n.collapse(!0), t.removeAllRanges(), t.addRange(n), !1;
-}, Ke = n(function({ state: e, value: t, onChange: n, onSubmit: r, onStop: i, onAdd: l, attachments: u, onAttach: p, onRemoveAttachment: C, accept: w = "image/*", multiple: T = !1, onTranscribe: E, onCopy: D, onEdit: O, onCancelEdit: k, isEditing: A = !1, placeholder: j = "Placeholder text...", animationConfig: M, style: N }, P) {
+}, Ke = n(function({ state: e, value: t, onChange: n, onSubmit: r, onStop: i, onAdd: l, attachments: u, onAttach: p, onRemoveAttachment: C, accept: w = "image/*", multiple: T = !1, onTranscribe: E, onCopy: D, onEdit: O, onCancelEdit: k, isEditing: A = !1, placeholder: j = "Ask anything…", animationConfig: M, style: N }, P) {
 	let ee = s(), F = d(null), I = d(null), te = d(null), ne = d(0), re = d(!1), ie = d(null), [ae, oe] = f(!1), [se, ce] = f(!1), [le, ue] = f(!1), [fe, pe] = f(!0), [me, he] = f(!1), [L, ge] = f(!1), [_e, z] = f(!1), ve = d(0), B = d(!1), H = d(0), ye = d(!1), U = d(null);
 	o(() => () => {
 		U.current && clearTimeout(U.current);
@@ -853,7 +853,7 @@ var Ue = {
 		Le,
 		et
 	]), o(() => {
-		(e === "idle" || e === "typing") && F.current?.focus();
+		(e === "idle" || e === "typing") && F.current?.focus({ preventScroll: !0 });
 	}, [e]), o(() => {
 		let e = F.current;
 		e && (ve.current = e.scrollHeight || 17);
@@ -4938,25 +4938,25 @@ var Xr = {
 	viewport: "ick-viewport-C3hz",
 	content: "ick-content-33lN",
 	jump: "ick-jump-nd6O"
-}, Zr = 64, Qr = 500, $r = (e, t) => e.offsetTop - t.offsetTop, ei = (e, t) => t ? e.querySelector(`[id="${CSS.escape(t)}"]`) : null, ti = (e, t, n) => {
+}, Zr = 64, Qr = 500, $r = 4, ei = (e, t) => e.offsetTop - t.offsetTop, ti = (e, t) => t ? e.querySelector(`[id="${CSS.escape(t)}"]`) : null, ni = (e, t, n) => {
 	n !== t.current && (t.current = n, e.style.setProperty("--ick-conversation-tail", `${Math.round(n)}px`));
-}, ni = n(function({ children: e, anchorId: t, anchorOffset: n = 0, endOffset: r = 0, tail: i = "auto", threshold: s = Zr, scrollButton: u = !0, scrollButtonLabel: p = "Jump to the latest", follow: m = !0, className: _, viewportClassName: v, onScroll: y, ...b }, x) {
+}, ri = n(function({ children: e, anchorId: t, anchorOffset: n = 0, endOffset: r = 0, tail: i = "auto", threshold: s = Zr, scrollButton: u = !0, scrollButtonLabel: p = "Jump to the latest", follow: m = !0, className: _, viewportClassName: v, onScroll: y, ...b }, x) {
 	let S = d(null);
 	c(x, () => S.current, []);
 	let C = d(null), [w, E] = f(!0), D = d(-1), O = d(null), k = d(!1), A = a(() => {
 		let e = S.current, t = C.current;
 		if (!e || !t) return 0;
 		if (i === "auto" && k.current) return Math.max(0, e.scrollHeight - e.clientHeight);
-		let n = t.lastElementChild, a = n ? $r(n, e) + n.offsetHeight : $r(t, e) + t.offsetHeight - D.current;
+		let n = t.lastElementChild, a = n ? ei(n, e) + n.offsetHeight : ei(t, e) + t.offsetHeight - D.current;
 		return Math.max(0, a + r - e.clientHeight);
 	}, [r, i]), j = a(() => {
 		let e = S.current, t = C.current;
 		if (!e || !t) return;
-		if (i !== "auto") return ti(t, D, Math.max(0, i));
-		let a = parseFloat(getComputedStyle(e).paddingBottom) || 0, o = Math.max(0, r - a), s = t.lastElementChild, c = ei(e, O.current);
-		if (k.current = !!s && !!c, !k.current || !s || !c) return ti(t, D, o);
-		let l = $r(s, e) + s.offsetHeight - $r(c, e);
-		ti(t, D, Math.max(o, e.clientHeight - n - l - a));
+		if (i !== "auto") return ni(t, D, Math.max(0, i));
+		let a = parseFloat(getComputedStyle(e).paddingBottom) || 0, o = Math.max(0, r - a), s = t.lastElementChild, c = ti(e, O.current);
+		if (k.current = !!s && !!c, !k.current || !s || !c) return ni(t, D, o);
+		let l = ei(s, e) + s.offsetHeight - ei(c, e);
+		ni(t, D, Math.max(o, e.clientHeight - n - l - a));
 	}, [
 		i,
 		n,
@@ -4967,7 +4967,7 @@ var Xr = {
 		if (t) {
 			let r = e.querySelector(`[id="${CSS.escape(t)}"]`);
 			if (r) {
-				let t = Math.max(0, e.scrollHeight - e.clientHeight), i = $r(r, e), a = i - n, o = i + r.offsetHeight - e.clientHeight;
+				let t = Math.max(0, e.scrollHeight - e.clientHeight), i = ei(r, e), a = i - n, o = i + r.offsetHeight - e.clientHeight;
 				return Math.max(0, Math.min(Math.max(a, o), t));
 			}
 		}
@@ -4996,12 +4996,20 @@ var Xr = {
 		let e = S.current, n = C.current;
 		if (!e || !n || typeof ResizeObserver > "u") return;
 		let r = () => {
-			let t = M();
+			let n = M();
 			if (N.current) {
-				if (performance.now() < N.current && Math.abs(e.scrollTop - t) > 1) return;
+				if (performance.now() < N.current && Math.abs(e.scrollTop - n) > 1) return;
 				N.current = 0;
 			}
-			e.scrollTop = t;
+			let r = n - e.scrollTop;
+			if (O.current && !t && Math.abs(r) > s && !K()) {
+				N.current = performance.now() + Qr, e.scrollTo({
+					top: n,
+					behavior: "smooth"
+				});
+				return;
+			}
+			e.scrollTop = n;
 		}, i = t != null && t !== P.current;
 		t && (P.current = t), i && !K() && Math.abs(e.scrollTop - M()) > s ? (N.current = performance.now() + Qr, e.scrollTo({
 			top: M(),
@@ -5052,11 +5060,10 @@ var Xr = {
 	let F = a((e) => {
 		if (y?.(e), !m) return;
 		let t = S.current;
-		t && Math.abs(t.scrollTop - M()) <= s && (N.current = 0, E(!0));
+		t && Math.abs(t.scrollTop - M()) <= $r && (N.current = 0, E(!0));
 	}, [
 		m,
 		y,
-		s,
 		M
 	]), I = m && !w;
 	return /* @__PURE__ */ g("div", {
@@ -5085,14 +5092,14 @@ var Xr = {
 			})
 		})]
 	});
-}), ri = 24, ii = 480, ai = 80, oi = 260;
-function si(e, t, n = Infinity) {
-	let r = Math.max(t - 48, 0), i = Math.min(Math.max(e.width + ai, ii), r), a = e.left + e.width / 2 - i / 2, o = Math.min(Math.max(a, ri), t - ri - i), s = Math.max(ri, n - ri - oi), c = Math.min(Math.max(e.top - ri, Math.min(ri, n)), Number.isFinite(s) ? s : Infinity);
+}), ii = 24, ai = 480, oi = 80, si = 260;
+function ci(e, t, n = Infinity) {
+	let r = Math.max(t - 48, 0), i = Math.min(Math.max(e.width + oi, ai), r), a = e.left + e.width / 2 - i / 2, o = Math.min(Math.max(a, ii), t - ii - i), s = Math.max(ii, n - ii - si), c = Math.min(Math.max(e.top - ii, Math.min(ii, n)), Number.isFinite(s) ? s : Infinity);
 	return {
 		x: o,
 		y: c,
 		width: i,
-		maxHeight: Number.isFinite(n) ? Math.max(oi, n - c - ri) : Infinity
+		maxHeight: Number.isFinite(n) ? Math.max(si, n - c - ii) : Infinity
 	};
 }
 var $ = {
@@ -5116,7 +5123,7 @@ var $ = {
 	turn: "ick-turn-ogjU",
 	turnRow: "ick-turnRow-0OuP",
 	srOnly: "ick-srOnly-LwE1"
-}, ci = 760, li = {
+}, li = 760, ui = {
 	closed: {
 		y: "100%",
 		opacity: 1,
@@ -5135,11 +5142,11 @@ var $ = {
 			bounce: .18
 		}
 	}
-}, ui = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable]:not([contenteditable=\"false\"]), [tabindex]:not([tabindex=\"-1\"])";
-function di({ activeReply: e, onClose: t, onSave: n, onSendMessage: r }) {
-	let [i, a] = f("none"), c = d(null), l = d(null), u = d(null), [p] = f(() => typeof document > "u" ? null : document.activeElement), m = s(), _ = s(), v = Ue, [b, S] = f(() => typeof window > "u" ? !1 : window.matchMedia?.(`(max-width: ${ci}px)`)?.matches ?? !1);
+}, di = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable]:not([contenteditable=\"false\"]), [tabindex]:not([tabindex=\"-1\"])";
+function fi({ activeReply: e, onClose: t, onSave: n, onSendMessage: r }) {
+	let [i, a] = f("none"), c = d(null), l = d(null), u = d(null), [p] = f(() => typeof document > "u" ? null : document.activeElement), m = s(), _ = s(), v = Ue, [b, S] = f(() => typeof window > "u" ? !1 : window.matchMedia?.(`(max-width: ${li}px)`)?.matches ?? !1);
 	o(() => {
-		let e = window.matchMedia?.(`(max-width: ${ci}px)`);
+		let e = window.matchMedia?.(`(max-width: ${li}px)`);
 		if (!e?.addEventListener) return;
 		let t = () => S(e.matches);
 		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
@@ -5155,7 +5162,7 @@ function di({ activeReply: e, onClose: t, onSave: n, onSendMessage: r }) {
 			return;
 		}
 		if (e.key !== "Tab") return;
-		let n = [...u.current?.querySelectorAll(ui) ?? []];
+		let n = [...u.current?.querySelectorAll(di) ?? []];
 		if (n.length === 0) return;
 		let r = n[0], i = n[n.length - 1], a = document.activeElement;
 		e.shiftKey && a === r ? (e.preventDefault(), i.focus()) : !e.shiftKey && a === i && (e.preventDefault(), r.focus());
@@ -5192,7 +5199,7 @@ function di({ activeReply: e, onClose: t, onSave: n, onSendMessage: r }) {
 		y: 0,
 		width: 480,
 		maxHeight: Infinity
-	} : si(e.rect, window.innerWidth, window.innerHeight);
+	} : ci(e.rect, window.innerWidth, window.innerHeight);
 	return /* @__PURE__ */ h(y, {
 		reducedMotion: "user",
 		children: /* @__PURE__ */ h("div", {
@@ -5226,7 +5233,7 @@ function di({ activeReply: e, onClose: t, onSave: n, onSendMessage: r }) {
 					scale: .95,
 					filter: "blur(4px)"
 				},
-				variants: b ? li : void 0,
+				variants: b ? ui : void 0,
 				transition: b ? void 0 : {
 					type: "spring",
 					bounce: 0,
@@ -5370,7 +5377,7 @@ function di({ activeReply: e, onClose: t, onSave: n, onSendMessage: r }) {
 }
 //#endregion
 //#region src/CustomCursor/CustomCursor.tsx
-function fi() {
+function pi() {
 	let e = C(-100), t = C(-100), [n, r] = f("default"), [i, a] = f(!1), [s, c] = f(!1);
 	return o(() => {
 		let n = (n) => {
@@ -5528,20 +5535,20 @@ function fi() {
 }
 //#endregion
 //#region src/GlassButton/GlassButton.tsx
-var pi = {
+var mi = {
 	s: "m",
 	m: "l",
 	l: "xl"
-}, mi = n(function({ size: e = "m", iconLeft: t, ...n }, r) {
+}, hi = n(function({ size: e = "m", iconLeft: t, ...n }, r) {
 	return /* @__PURE__ */ h(V, {
 		ref: r,
 		variant: "glass",
-		size: pi[e],
+		size: mi[e],
 		icon: t,
 		...n
 	});
 });
 //#endregion
-export { Oe as AddCardsOverlay, ht as AnswerActions, tn as Approval, Rn as ArtifactCard, Ir as ArtifactPane, Ce as Attachments, vt as Branch, V as Button, cn as ChainOfThought, lt as ChatHeader, Ke as ChatInput, Kr as ChatLayout, Or as ChatTurnRow, pn as Chip, Wt as CodeBlock, Pr as Context, ni as Conversation, fi as CustomCursor, Yr as EmptyState, kn as FOLDABLE_FROM, mi as GlassButton, Ee as HoverActionsRow, hr as InlineCitation, bt as Loader, Te as MorphGlyph, mn as QuestionBadge, Dn as QuestionCard, gn as QuestionFieldRow, Mn as QuestionGroup, hn as QuestionOptionRow, _n as QuestionOtherRow, vn as QuestionShell, At as Reasoning, di as ReplyThreadPopup, dn as Sources, Pn as SystemMessage, an as TaskList, Tr as TextHighlighter, Zt as Tool, G as announce, Tn as answerChips, It as canHighlight, An as defaultFoldMotion, Ue as defaultInlineAnimConfig, U as formatSize, rt as headerIconSize, Vt as loadHighlighter, qe as mergeParts, qr as useArtifacts, tt as useChatTurns, ze as useVoiceInput };
+export { Oe as AddCardsOverlay, ht as AnswerActions, tn as Approval, Rn as ArtifactCard, Ir as ArtifactPane, Ce as Attachments, vt as Branch, V as Button, cn as ChainOfThought, lt as ChatHeader, Ke as ChatInput, Kr as ChatLayout, Or as ChatTurnRow, pn as Chip, Wt as CodeBlock, Pr as Context, ri as Conversation, pi as CustomCursor, Yr as EmptyState, kn as FOLDABLE_FROM, hi as GlassButton, Ee as HoverActionsRow, hr as InlineCitation, bt as Loader, Te as MorphGlyph, mn as QuestionBadge, Dn as QuestionCard, gn as QuestionFieldRow, Mn as QuestionGroup, hn as QuestionOptionRow, _n as QuestionOtherRow, vn as QuestionShell, At as Reasoning, fi as ReplyThreadPopup, dn as Sources, Pn as SystemMessage, an as TaskList, Tr as TextHighlighter, Zt as Tool, G as announce, Tn as answerChips, It as canHighlight, An as defaultFoldMotion, Ue as defaultInlineAnimConfig, U as formatSize, rt as headerIconSize, Vt as loadHighlighter, qe as mergeParts, qr as useArtifacts, tt as useChatTurns, ze as useVoiceInput };
 
 //# sourceMappingURL=inline-chat-kit.js.map