@v-office/website-chat 1.1.3 → 1.2.0

package/dist/{panel-BN_DMA4R.js → panel-CfS3SuRX.js}

@@ -1,6 +1,6 @@
 import { i as SESSION_TTL_S, r as MAX_MESSAGE_CHARS } from "./protocol-BuNqZAMt.js";
-import { a as House, c as TopicIcon, d as saveConversation, i as Cross, l as clearConversation, n as Check, o as Restart, p as sendMessage, r as Chevron, t as Arrow, u as loadConversation } from "./icons-DIqOmKoe.js";
-import { r as chatCatalog, u as statePath } from "./catalog-y3xQ2jXW.js";
+import { a as House, c as TopicIcon, d as saveConversation, i as Cross, l as clearConversation, n as Check, o as Restart, p as sendMessage, r as Chevron, t as Arrow, u as loadConversation } from "./icons-BK5Lk0cP.js";
+import { r as chatCatalog, u as statePath } from "./catalog-ClcCUjf7.js";
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { JSONUIProvider, Renderer, defineRegistry, useStateValue } from "@json-render/react";
@@ -130,26 +130,39 @@ const useStay = (stayId, rentalId) => {
 };
 const useRental = (rentalId) => useStateValue(statePath("rentals", rentalId)) ?? null;
 const day = (value) => /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+/** The locale dates are formatted in: British English ("13 May"), as the replies write dates and as
+*  European visitors read them, never the US order "5/13" that a bare "en" gives. */
+const dateLocale = (locale) => locale === "en" ? "en-GB" : "de-DE";
 /** "12.–19. Juli 2027" from two `YYYY-MM-DD` days. */
-const period = (stay, locale) => new Intl.DateTimeFormat(locale, {
+const period = (stay, locale) => new Intl.DateTimeFormat(dateLocale(locale), {
 	day: "numeric",
 	month: "short",
 	year: "numeric",
 	timeZone: "UTC"
 }).formatRange(day(stay.start), day(stay.end));
-/** "14.–21. Juli": the short form for choices next to each other. */
-const shortPeriod = (stay, locale) => new Intl.DateTimeFormat(locale, {
-	day: "numeric",
-	month: "short",
-	timeZone: "UTC"
-}).formatRange(day(stay.start), day(stay.end));
-/** "1 Kind", "2 Kinder": a count in its plural form. */
-const counted = (forms, n, locale) => (forms[new Intl.PluralRules(locale).select(n)] ?? forms.other).replace("{n}", String(n));
+/** "14.–21. Juli", "26. Dez.–2. Jan.": the short form, without years even over New Year. */
+const shortPeriod = (stay, locale) => {
+	const short = new Intl.DateTimeFormat(dateLocale(locale), {
+		day: "numeric",
+		month: "short",
+		timeZone: "UTC"
+	});
+	return stay.start.slice(0, 4) === stay.end.slice(0, 4) ? short.formatRange(day(stay.start), day(stay.end)) : `${short.format(day(stay.start))}–${short.format(day(stay.end))}`;
+};
+/** "1 Kind", "2 Kinder": a count in its plural form, its number and noun joined by a no-break space,
+*  so a narrow card never ends a line on the "2". */
+const counted = (forms, n, locale) => (forms[new Intl.PluralRules(locale).select(n)] ?? forms.other).replace("{n} ", `${n}\u00a0`).replace("{n}", String(n));
+/** "2 Schlafzimmer" from the PMS, its number and noun joined by a no-break space as in `counted`. */
+const keepCount = (fact) => fact.replace(/^(\d+) /, "$1\xA0");
 /** A review count as the PMS formats it ("36", or "1 Bewertungen" on v10), as the number it states. */
 const reviewCount = (count) => Number(count.replace(/\D/g, ""));
 const partyText = (stay, copy, locale) => {
 	const children = stay.party.children + stay.party.babies;
-	return [counted(copy.adults, stay.party.adults, locale), ...children ? [counted(copy.children, children, locale)] : []].join(", ");
+	return [
+		counted(copy.adults, stay.party.adults, locale),
+		...children ? [counted(copy.children, children, locale)] : [],
+		...stay.party.pets ? [counted(copy.pets, stay.party.pets, locale)] : []
+	].join(", ");
 };
 /** A bookable stay goes to the rental's booking page with everything chosen, where the site has one;
 *  otherwise to the rental page (or the search) with the stay filled in. */
@@ -174,12 +187,25 @@ const ReplyLink = ({ href, className, children }) => {
 		children
 	});
 };
+/** What a booking link is for, for a screen reader: in a links list, eight "Buchen" say nothing. */
+const LinkTarget = ({ rentalId, stay }) => {
+	const { locale } = useChat();
+	const rental = useRental(rentalId);
+	if (!rental) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: `, ${rental.name}${stay?.bookable ? `, ${shortPeriod(stay, locale)}` : ""}`
+	});
+};
 const BookLink = ({ rentalId, stay }) => {
 	const { copy } = useChat();
-	return /* @__PURE__ */ jsx(ReplyLink, {
+	return /* @__PURE__ */ jsxs(ReplyLink, {
 		className: "button",
 		href: useBookHref(rentalId, stay),
-		children: stay?.bookable ? copy.bookStay : copy.viewRental
+		children: [stay?.bookable ? copy.bookStay : copy.viewRental, /* @__PURE__ */ jsx(LinkTarget, {
+			rentalId,
+			stay
+		})]
 	});
 };
 /** A row that snaps item by item, with arrow buttons and "n / total"; swipe, scroll or keys move it. */
@@ -220,7 +246,7 @@ const Snapper = ({ count, className, label, children }) => {
 					"aria-label": copy.previous,
 					disabled: index === 0,
 					onClick: () => go(-1),
-					children: "‹"
+					children: /* @__PURE__ */ jsx(Chevron, { side: "prev" })
 				}),
 				/* @__PURE__ */ jsxs("span", {
 					className: "muted",
@@ -235,7 +261,7 @@ const Snapper = ({ count, className, label, children }) => {
 					"aria-label": copy.next,
 					disabled: index >= count - 1,
 					onClick: () => go(1),
-					children: "›"
+					children: /* @__PURE__ */ jsx(Chevron, { side: "next" })
 				})
 			]
 		})]
@@ -301,7 +327,6 @@ const Gallery = ({ images, name }) => {
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "sr-only",
-				"aria-live": "polite",
 				children: `${copy.photo} ${Math.min(index + 1, images.length)} / ${images.length}`
 			})
 		] })]
@@ -331,17 +356,21 @@ const Wishes = ({ wishes }) => {
 		children: wishes.map((wish) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(Check, {}), wish] }, wish))
 	});
 };
-/** "7 Nächte · 26.12.–2.1.": a stay's length and dates, short. */
+/** "7 Nächte · 6.–13. Mai": a stay's length and dates, short. */
 const stayMeta = (stay, copy, locale) => {
 	const nights = Math.round((day(stay.end).getTime() - day(stay.start).getTime()) / 864e5);
-	const short = new Intl.DateTimeFormat(locale, {
-		day: "numeric",
-		month: "numeric",
-		timeZone: "UTC"
-	});
-	return `${counted(copy.nights, nights, locale)} · ${short.format(day(stay.start))}–${short.format(day(stay.end))}`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		counted(copy.nights, nights, locale),
+		" ·",
+		" ",
+		/* @__PURE__ */ jsx("span", {
+			className: "period",
+			children: shortPeriod(stay, locale)
+		})
+	] });
 };
-/** A card's foot: the stay's total and its length, and the way to book or to the rental. */
+/** A card's foot: the stay's total, its length and dates and the party it is for, and the way to
+*  book or to the rental. */
 const CardFoot = ({ rentalId, stay }) => {
 	const { copy, locale } = useChat();
 	const href = useBookHref(rentalId, stay);
@@ -350,19 +379,29 @@ const CardFoot = ({ rentalId, stay }) => {
 		children: [stay && /* @__PURE__ */ jsx("div", {
 			className: "foot-price",
 			children: !stay.bookable ? /* @__PURE__ */ jsx("span", {
-				className: "muted",
-				children: copy.notBookable
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [stay.total && /* @__PURE__ */ jsx("span", {
-				className: "price",
-				children: stay.total
-			}), /* @__PURE__ */ jsx("span", {
 				className: "foot-meta",
-				children: stayMeta(stay, copy, locale)
-			})] })
-		}), /* @__PURE__ */ jsx(ReplyLink, {
+				children: copy.notBookable
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				stay.total && /* @__PURE__ */ jsx("span", {
+					className: "price",
+					children: stay.total
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "foot-meta",
+					children: stayMeta(stay, copy, locale)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "foot-meta",
+					children: partyText(stay, copy, locale)
+				})
+			] })
+		}), /* @__PURE__ */ jsxs(ReplyLink, {
 			className: "button compact",
 			href,
-			children: stay?.bookable ? copy.book : copy.view
+			children: [stay?.bookable ? copy.book : copy.view, /* @__PURE__ */ jsx(LinkTarget, {
+				rentalId,
+				stay
+			})]
 		})]
 	});
 };
@@ -398,7 +437,7 @@ const Card = ({ rentalId, stayId }) => {
 					}),
 					rental.highlights.length > 0 && /* @__PURE__ */ jsx("p", {
 						className: "specs",
-						children: rental.highlights.slice(0, 3).join(" · ")
+						children: rental.highlights.slice(0, 3).map(keepCount).join(" · ")
 					}),
 					/* @__PURE__ */ jsx(Wishes, { wishes })
 				]
@@ -436,17 +475,17 @@ const Calendar = ({ rentalId, stayId }) => {
 	const [shown, setShown] = useState(() => Math.max(0, stay ? months.indexOf(stay.start.slice(0, 7)) : 0));
 	if (!calendar || months.length === 0) return null;
 	const month = months[Math.min(shown, months.length - 1)];
-	const weekdays = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(locale, {
+	const weekdays = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(dateLocale(locale), {
 		weekday: "short",
 		timeZone: "UTC"
 	}).format(day(`2024-01-0${i + 1}`)));
-	const title = new Intl.DateTimeFormat(locale, {
+	const title = new Intl.DateTimeFormat(dateLocale(locale), {
 		month: "long",
 		year: "numeric",
 		timeZone: "UTC"
 	}).format(day(`${month}-01`));
 	const inStay = (date) => Boolean(stay && date >= stay.start && date <= stay.end);
-	const fullDate = new Intl.DateTimeFormat(locale, {
+	const fullDate = new Intl.DateTimeFormat(dateLocale(locale), {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
@@ -468,7 +507,7 @@ const Calendar = ({ rentalId, stayId }) => {
 						"aria-label": copy.previous,
 						disabled: shown === 0,
 						onClick: () => setShown(shown - 1),
-						children: "‹"
+						children: /* @__PURE__ */ jsx(Chevron, { side: "prev" })
 					}),
 					/* @__PURE__ */ jsxs("span", { children: [title, rental ? ` · ${rental.name}` : ""] }),
 					/* @__PURE__ */ jsx("button", {
@@ -476,7 +515,7 @@ const Calendar = ({ rentalId, stayId }) => {
 						"aria-label": copy.next,
 						disabled: shown >= months.length - 1,
 						onClick: () => setShown(shown + 1),
-						children: "›"
+						children: /* @__PURE__ */ jsx(Chevron, { side: "next" })
 					})
 				]
 			}),
@@ -523,6 +562,8 @@ const CompareColumn = ({ rentalId, stayId }) => {
 	const stay = useStay(stayId, rentalId);
 	const href = useBookHref(rentalId, stay);
 	if (!rental) return null;
+	const rooms = rental.rooms.slice(0, 3);
+	const highlights = rental.highlights.filter((highlight) => !rooms.includes(highlight));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "compare-col",
 		children: [
@@ -531,12 +572,17 @@ const CompareColumn = ({ rentalId, stayId }) => {
 				/* @__PURE__ */ jsx("dt", { children: copy.compareRating }),
 				/* @__PURE__ */ jsx("dd", { children: rental.rating ? `★ ${rental.rating.value} (${counted(copy.reviews, reviewCount(rental.rating.count), locale)})` : "–" }),
 				/* @__PURE__ */ jsx("dt", { children: copy.compareRooms }),
-				/* @__PURE__ */ jsx("dd", { children: rental.rooms.slice(0, 3).join(", ") || "–" }),
+				/* @__PURE__ */ jsx("dd", { children: rooms.map(keepCount).join(", ") || "–" }),
 				/* @__PURE__ */ jsx("dt", { children: copy.compareHighlights }),
-				/* @__PURE__ */ jsx("dd", { children: rental.highlights.slice(0, 4).join(", ") || "–" }),
+				/* @__PURE__ */ jsx("dd", { children: highlights.slice(0, 4).map(keepCount).join(", ") || "–" }),
 				stay && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: copy.compareStay }), /* @__PURE__ */ jsxs("dd", { children: [
 					shortPeriod(stay, locale),
 					/* @__PURE__ */ jsx("br", {}),
+					/* @__PURE__ */ jsx("span", {
+						className: "muted",
+						children: partyText(stay, copy, locale)
+					}),
+					/* @__PURE__ */ jsx("br", {}),
 					!stay.bookable ? /* @__PURE__ */ jsx("span", {
 						className: "muted",
 						children: copy.notBookable
@@ -546,23 +592,24 @@ const CompareColumn = ({ rentalId, stayId }) => {
 					})
 				] })] })
 			] }),
-			/* @__PURE__ */ jsx(ReplyLink, {
+			/* @__PURE__ */ jsxs(ReplyLink, {
 				className: "button",
 				href,
-				children: stay?.bookable ? copy.bookStay : copy.viewRental
+				children: [stay?.bookable ? copy.book : copy.view, /* @__PURE__ */ jsx(LinkTarget, {
+					rentalId,
+					stay
+				})]
 			})
 		]
 	});
 };
-const AlternativeChip = ({ rentalId, stayId }) => {
+const AlternativeChip = ({ stay }) => {
 	const { locale } = useChat();
-	const stay = useStay(stayId, rentalId);
-	const href = useBookHref(rentalId, stay);
-	if (!stay?.bookable) return null;
-	return /* @__PURE__ */ jsxs(ReplyLink, {
+	const href = useBookHref(stay.rentalId, stay);
+	return /* @__PURE__ */ jsx(ReplyLink, {
 		className: "chip-link",
 		href,
-		children: [/* @__PURE__ */ jsx("strong", { children: shortPeriod(stay, locale) }), stay.total ? ` · ${stay.total}` : ""]
+		children: /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("strong", { children: shortPeriod(stay, locale) }), stay.total ? ` · ${stay.total}` : ""] })
 	});
 };
 /** One arrival of a price calendar: its bar, the PMS's total, the day; tapping asks for that stay. */
@@ -571,10 +618,8 @@ const PriceColumn = ({ rentalId, option, asked, cheapest }) => {
 	const rental = useRental(rentalId);
 	const stay = useStay(option.stayId, rentalId);
 	const free = Boolean(stay?.bookable && stay.total);
-	const arrival = new Intl.DateTimeFormat(locale, {
-		weekday: "short",
-		day: "numeric",
-		month: "numeric",
+	const arrival = (options) => new Intl.DateTimeFormat(dateLocale(locale), {
+		...options,
 		timeZone: "UTC"
 	}).format(day(option.start));
 	const dates = period(option, locale);
@@ -606,18 +651,45 @@ const PriceColumn = ({ rentalId, option, asked, cheapest }) => {
 				"aria-hidden": "true",
 				children: free ? stay.total : copy.closed
 			}),
-			/* @__PURE__ */ jsx("span", {
+			/* @__PURE__ */ jsxs("span", {
 				className: "muted",
 				"aria-hidden": "true",
-				children: arrival
+				children: [
+					arrival({ weekday: "short" }),
+					/* @__PURE__ */ jsx("br", {}),
+					arrival({
+						day: "numeric",
+						month: "short"
+					})
+				]
 			})
 		]
 	}) });
 };
+/** Which ends of a scrolled row have more beyond them, for the fade there. */
+const hiddenEdges = (row) => {
+	const start = row.scrollLeft > 1;
+	const end = row.scrollLeft + row.clientWidth < row.scrollWidth - 1;
+	return start && end ? "both" : start ? "start" : end ? "end" : void 0;
+};
 const PriceCalendarView = ({ rentalId }) => {
 	const { copy, locale } = useChat();
 	const rental = useRental(rentalId);
 	const calendar = useStateValue(statePath("priceCalendars", rentalId)) ?? null;
+	const row = useRef(null);
+	const [fade, setFade] = useState();
+	useEffect(() => {
+		const element = row.current;
+		if (!element || !calendar) return;
+		const cheapest = calendar.options.findIndex((option) => option.stayId !== null && option.stayId === calendar.cheapest);
+		const asked = calendar.options.findIndex((option) => option.start === calendar.asked);
+		const column = element.children[cheapest >= 0 ? cheapest : asked];
+		if (column) {
+			const end = column.offsetLeft + column.offsetWidth;
+			if (end > element.clientWidth) element.scrollLeft = end - element.clientWidth;
+		}
+		setFade(hiddenEdges(element));
+	}, [calendar]);
 	if (!calendar || calendar.options.length === 0) return null;
 	return /* @__PURE__ */ jsx("section", {
 		className: "card price-calendar",
@@ -634,7 +706,10 @@ const PriceCalendarView = ({ rentalId }) => {
 					children: [counted(copy.priceCalendarNights, calendar.nights, locale), rental ? ` · ${rental.name}` : ""]
 				}),
 				/* @__PURE__ */ jsx("ul", {
+					ref: row,
 					className: "price-columns",
+					"data-fade": fade,
+					onScroll: (event) => setFade(hiddenEdges(event.currentTarget)),
 					children: calendar.options.map((option) => /* @__PURE__ */ jsx(PriceColumn, {
 						rentalId,
 						option,
@@ -755,7 +830,7 @@ const { registry } = defineRegistry(chatCatalog, { components: {
 		return /* @__PURE__ */ jsx(Snapper, {
 			count: props.items.length,
 			className: "carousel",
-			label: copy.title,
+			label: copy.rentalsFound,
 			children: props.items.map((item) => /* @__PURE__ */ jsx(Card, {
 				rentalId: item.rentalId,
 				stayId: item.stayId
@@ -763,21 +838,17 @@ const { registry } = defineRegistry(chatCatalog, { components: {
 		});
 	},
 	StayQuote: ({ props }) => {
-		const { copy, locale } = useChat();
 		const stay = useStay(props.stayId);
 		const rental = useRental(stay?.rentalId ?? "");
 		if (!stay) return null;
 		return /* @__PURE__ */ jsxs("article", {
 			className: "card stay-card",
-			children: [/* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsx("div", {
 				className: "card-body",
-				children: [rental && /* @__PURE__ */ jsx("h3", {
+				children: rental && /* @__PURE__ */ jsx("h3", {
 					className: "card-title",
 					children: rental.name
-				}), /* @__PURE__ */ jsx("p", {
-					className: "specs",
-					children: partyText(stay, copy, locale)
-				})]
+				})
 			}), /* @__PURE__ */ jsx(CardFoot, {
 				rentalId: stay.rentalId,
 				stay
@@ -785,18 +856,28 @@ const { registry } = defineRegistry(chatCatalog, { components: {
 		});
 	},
 	PriceBreakdown: ({ props }) => {
-		const { copy } = useChat();
+		const { copy, locale } = useChat();
 		const stay = useStay(props.stayId);
+		const rental = useRental(stay?.rentalId ?? "");
 		if (!stay?.bookable || !stay.total) return null;
+		const label = rental ? `${copy.priceBreakdown} · ${rental.name}` : copy.priceBreakdown;
 		return /* @__PURE__ */ jsx("section", {
 			className: "card breakdown",
-			"aria-label": copy.priceBreakdown,
+			"aria-label": label,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "card-body",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "muted",
-						children: copy.priceBreakdown
+						children: label
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "foot-meta",
+						children: [
+							stayMeta(stay, copy, locale),
+							" · ",
+							partyText(stay, copy, locale)
+						]
 					}),
 					stay.lines.map((line) => /* @__PURE__ */ jsxs("div", {
 						className: "line",
@@ -812,14 +893,26 @@ const { registry } = defineRegistry(chatCatalog, { components: {
 	},
 	AlternativeStays: ({ props }) => {
 		const { copy } = useChat();
-		return /* @__PURE__ */ jsx("div", {
+		const rental = useRental(props.rentalId);
+		const stays = useStateValue("/stays") ?? {};
+		const bookable = props.stayIds.flatMap((stayId) => {
+			const stay = stays[stayId];
+			return stay?.rentalId === props.rentalId && stay.bookable ? [stay] : [];
+		});
+		if (bookable.length === 0) return null;
+		const label = rental ? `${copy.otherDates} · ${rental.name}` : copy.otherDates;
+		return /* @__PURE__ */ jsxs("div", {
 			className: "alternatives",
 			role: "group",
-			"aria-label": copy.otherDates,
-			children: props.stayIds.map((stayId) => /* @__PURE__ */ jsx(AlternativeChip, {
-				rentalId: props.rentalId,
-				stayId
-			}, stayId))
+			"aria-label": label,
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "alt-caption",
+				"aria-hidden": "true",
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "alt-chips",
+				children: bookable.map((stay) => /* @__PURE__ */ jsx(AlternativeChip, { stay }, stay.id))
+			})]
 		});
 	},
 	AvailabilityCalendar: ({ props }) => /* @__PURE__ */ jsx(Calendar, {
@@ -860,12 +953,12 @@ const { registry } = defineRegistry(chatCatalog, { components: {
 		if (!send) return null;
 		return /* @__PURE__ */ jsx("div", {
 			className: "quick-replies",
-			children: props.options.map((option) => /* @__PURE__ */ jsxs("button", {
+			children: props.options.map((option) => /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "chip",
 				disabled: busy,
 				onClick: () => send(option),
-				children: [/* @__PURE__ */ jsx(TopicIcon, { text: option }), option]
+				children: option
 			}, option))
 		});
 	}
@@ -951,19 +1044,45 @@ const Consent = ({ copy, pending, onAccept, buttonRef }) => /* @__PURE__ */ jsxs
 		})
 	]
 });
+/** Shown until the reply's text: a search takes seconds, and three dots alone read as nothing.
+*  Hidden from a screen reader: inside the busy log it may go unannounced, so the panel's own status,
+*  outside the log, says it. */
 const Thinking = ({ label }) => /* @__PURE__ */ jsxs("div", {
 	className: "thinking",
-	role: "status",
+	"aria-hidden": "true",
 	children: [
 		/* @__PURE__ */ jsx("i", {}),
 		/* @__PURE__ */ jsx("i", {}),
 		/* @__PURE__ */ jsx("i", {}),
 		/* @__PURE__ */ jsx("span", {
-			className: "sr-only",
+			className: "thinking-label",
 			children: label
 		})
 	]
 });
+/** Why the chat cannot answer, as its reply to the visitor's message, and where to go instead. */
+const Fallback = ({ reason, copy, searchPath, contactPath }) => /* @__PURE__ */ jsxs("div", {
+	className: "fallback",
+	role: "status",
+	children: [/* @__PURE__ */ jsx("p", {
+		className: "message",
+		"data-role": "assistant",
+		children: reason === "busy" ? copy.busy : copy.unavailable
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "fallback-links",
+		children: [/* @__PURE__ */ jsx("a", {
+			className: "button",
+			href: searchPath,
+			children: copy.searchLink
+		}), /* @__PURE__ */ jsx("a", {
+			className: "link",
+			href: contactPath,
+			children: copy.contactLink
+		})]
+	})]
+});
+/** A refusal that a second try can get past: the message goes back into the field to send again. */
+const RETRYABLE = /* @__PURE__ */ new Set(["busy", "error"]);
 function Panel(props) {
 	const { copy, endpoint, open, pending, onSent, onStarted, onClose } = props;
 	const stored = useMemo(() => loadConversation(endpoint), [endpoint]);
@@ -974,19 +1093,39 @@ function Panel(props) {
 	const [unavailable, setUnavailable] = useState(null);
 	const session = useRef(stored?.sessionId ?? null);
 	const abort = useRef(null);
-	const end = useRef(null);
+	const list = useRef(null);
+	const following = useRef(true);
+	const lastRole = useRef(stored?.messages.at(-1)?.role);
 	const start = useRef(null);
 	const composer = useRef(null);
 	const panel = useRef(null);
 	const lastActivity = useRef(stored?.savedAt ?? Date.now());
 	const hasMessages = messages.length > 0;
+	const last = messages.at(-1);
+	const waiting = streaming && !unavailable && (last?.role === "visitor" || !last?.parts.some((part) => part.kind === "text"));
 	const expired = () => Date.now() - lastActivity.current >= SESSION_TTL_S * 1e3;
 	useEffect(() => () => abort.current?.abort(), []);
 	useEffect(() => {
-		if (open) end.current?.scrollIntoView({ block: "end" });
-	}, [messages, open]);
+		const role = messages.at(-1)?.role;
+		const replyStarts = role === "assistant" && lastRole.current === "visitor";
+		lastRole.current = role;
+		const element = list.current;
+		if (!open || !element) return;
+		const turnTop = ([...element.querySelectorAll(":scope > .turn")].at(-1)?.offsetTop ?? 0) - 12;
+		if (replyStarts) element.scrollTop = turnTop;
+		else if (role === "assistant" && following.current) element.scrollTop = Math.max(element.scrollTop, Math.min(element.scrollHeight - element.clientHeight, turnTop));
+		else if (role === "visitor" || following.current) element.scrollTop = element.scrollHeight;
+	}, [
+		messages,
+		open,
+		waiting,
+		unavailable
+	]);
 	useEffect(() => {
-		if (open) (accepted ? composer : start).current?.focus();
+		if (!open) return;
+		const touch = window.matchMedia?.("(pointer: coarse)").matches;
+		if (accepted && hasMessages && touch) panel.current?.focus();
+		else (accepted ? composer : start).current?.focus();
 	}, [accepted, open]);
 	useEffect(() => {
 		onStarted(hasMessages);
@@ -1012,16 +1151,21 @@ function Panel(props) {
 			clearConversation(endpoint);
 		}
 		setDraft("");
+		const restoreDraft = () => setDraft((current) => current || message);
 		setUnavailable(null);
 		setStreaming(true);
-		setMessages((current) => [...fresh ? [] : current, {
-			role: "visitor",
-			parts: [{
-				kind: "text",
-				text: message
-			}],
-			unconfirmed: true
-		}]);
+		setMessages((current) => {
+			const before = fresh ? [] : current;
+			const last = before.at(-1);
+			return [...last?.role === "visitor" && last.unconfirmed && last.parts[0]?.kind === "text" && last.parts[0].text === message ? before.slice(0, -1) : before, {
+				role: "visitor",
+				parts: [{
+					kind: "text",
+					text: message
+				}],
+				unconfirmed: true
+			}];
+		});
 		const sentAt = Date.now();
 		const controller = new AbortController();
 		abort.current = controller;
@@ -1042,14 +1186,19 @@ function Panel(props) {
 					kind: "ui",
 					spec: chatEvent.spec
 				}));
-				else if (chatEvent.type === "unavailable") setUnavailable(chatEvent.reason);
-				else if (chatEvent.type === "done") {
+				else if (chatEvent.type === "unavailable") {
+					setUnavailable(chatEvent.reason);
+					if (RETRYABLE.has(chatEvent.reason)) restoreDraft();
+				} else if (chatEvent.type === "done") {
 					lastActivity.current = sentAt;
 					setMessages(confirmed);
 				}
 			}, controller.signal);
 		} catch {
-			if (!controller.signal.aborted) setUnavailable("error");
+			if (!controller.signal.aborted) {
+				setUnavailable("error");
+				restoreDraft();
+			}
 		} finally {
 			if (abort.current === controller) setStreaming(false);
 		}
@@ -1094,7 +1243,8 @@ function Panel(props) {
 		const focusable = [...element.querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled])")];
 		const active = element.getRootNode().activeElement;
 		const edge = event.shiftKey ? focusable[0] : focusable.at(-1);
-		if (focusable.length === 0 || active === edge || !element.contains(active)) {
+		const outside = !element.contains(active) || event.shiftKey && active === element;
+		if (focusable.length === 0 || active === edge || outside) {
 			event.preventDefault();
 			(event.shiftKey ? focusable.at(-1) : focusable[0])?.focus();
 		}
@@ -1103,7 +1253,6 @@ function Panel(props) {
 		event.preventDefault();
 		submit(draft);
 	};
-	const waiting = streaming && messages.at(-1)?.role === "visitor";
 	return /* @__PURE__ */ jsxs(ChatContext.Provider, {
 		value: {
 			...props,
@@ -1121,6 +1270,7 @@ function Panel(props) {
 			"aria-modal": "true",
 			"aria-label": copy.title,
 			ref: panel,
+			tabIndex: -1,
 			hidden: !open,
 			inert: !open,
 			onKeyDown: (event) => {
@@ -1156,50 +1306,50 @@ function Panel(props) {
 					className: "notice",
 					children: copy.notice
 				}),
-				accepted ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-					className: "messages",
-					"aria-live": "polite",
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "message",
-							"data-role": "assistant",
-							children: copy.greeting
-						}),
-						messages.map((message, index) => /* @__PURE__ */ jsx("div", {
-							className: message.role === "assistant" ? "ui" : "turn",
-							children: message.parts.map((part, partIndex) => part.kind === "text" ? /* @__PURE__ */ jsx("div", {
+				accepted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "messages",
+						role: "log",
+						"aria-busy": streaming,
+						ref: list,
+						onScroll: (event) => {
+							const element = event.currentTarget;
+							following.current = element.scrollHeight - element.scrollTop - element.clientHeight < 80;
+						},
+						children: [
+							/* @__PURE__ */ jsx("div", {
 								className: "message",
-								"data-role": message.role,
-								children: message.role === "assistant" ? /* @__PURE__ */ jsx(RichText, { text: part.text }) : part.text
-							}, partIndex) : /* @__PURE__ */ jsx(SpecView, { spec: part.spec }, partIndex))
-						}, index)),
-						waiting && /* @__PURE__ */ jsx(Thinking, { label: copy.thinking }),
-						/* @__PURE__ */ jsx("div", { ref: end })
-					]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "dock",
-					children: [
-						unavailable && /* @__PURE__ */ jsxs("div", {
-							className: "fallback",
-							role: "status",
-							children: [
-								/* @__PURE__ */ jsx("p", {
-									className: "muted",
-									children: unavailable === "busy" ? copy.busy : copy.unavailable
-								}),
-								/* @__PURE__ */ jsx("a", {
-									className: "link",
-									href: props.searchPath,
-									children: copy.searchLink
-								}),
-								/* @__PURE__ */ jsx("a", {
-									className: "link",
-									href: props.contactPath,
-									children: copy.contactLink
-								})
-							]
-						}),
-						!hasMessages && copy.suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+								"data-role": "assistant",
+								children: copy.greeting
+							}),
+							messages.map((message, index) => /* @__PURE__ */ jsxs("div", {
+								className: message.role === "assistant" ? "ui" : "turn",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "sr-only",
+									children: [message.role === "assistant" ? copy.title : copy.yourMessage, ":"]
+								}), message.parts.map((part, partIndex) => part.kind === "text" ? /* @__PURE__ */ jsx("div", {
+									className: "message",
+									"data-role": message.role,
+									children: message.role === "assistant" ? /* @__PURE__ */ jsx(RichText, { text: part.text }) : part.text
+								}, partIndex) : /* @__PURE__ */ jsx(SpecView, { spec: part.spec }, partIndex))]
+							}, index)),
+							unavailable && /* @__PURE__ */ jsx(Fallback, {
+								reason: unavailable,
+								copy,
+								searchPath: props.searchPath,
+								contactPath: props.contactPath
+							}),
+							waiting && /* @__PURE__ */ jsx(Thinking, { label: copy.thinking })
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "sr-only",
+						role: "status",
+						children: waiting ? copy.thinking : ""
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "dock",
+						children: [!hasMessages && copy.suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
 							className: "suggestions",
 							children: copy.suggestions.map((suggestion) => /* @__PURE__ */ jsxs("button", {
 								type: "button",
@@ -1207,8 +1357,7 @@ function Panel(props) {
 								onClick: () => void submit(suggestion),
 								children: [/* @__PURE__ */ jsx(TopicIcon, { text: suggestion }), suggestion]
 							}, suggestion))
-						}),
-						/* @__PURE__ */ jsxs("form", {
+						}), /* @__PURE__ */ jsxs("form", {
 							className: "composer",
 							onSubmit: send,
 							children: [/* @__PURE__ */ jsx("textarea", {
@@ -1231,9 +1380,9 @@ function Panel(props) {
 								disabled: streaming || !draft.trim(),
 								children: /* @__PURE__ */ jsx(Arrow, {})
 							})]
-						})
-					]
-				})] }) : /* @__PURE__ */ jsx(Consent, {
+						})]
+					})
+				] }) : /* @__PURE__ */ jsx(Consent, {
 					copy,
 					pending,
 					onAccept: () => setAccepted(true),