@v-office/website-chat 0.0.0 → 1.0.1

package/dist/panel-C0Bb7ln-.js

@@ -0,0 +1,1161 @@
+import { i as SESSION_TTL_S, r as MAX_MESSAGE_CHARS } from "./protocol-BuNqZAMt.js";
+import { a as clearConversation, l as sendMessage, n as Cross, o as loadConversation, r as Restart, s as saveConversation, t as Arrow } from "./icons-B5PAY3aU.js";
+import { c as statePath, r as chatCatalog } from "./catalog-RXKmEmMW.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";
+import { DEFAULT_MAP_STYLE_URL, partyPairs } from "@v-office/website-headless";
+//#region src/links.ts
+/** See {@link StayHref}. */
+const stayHref = (page, stay, searchPath) => {
+	const path = page ?? searchPath;
+	if (!stay) return path;
+	const pairs = [
+		["start", stay.start],
+		["end", stay.end],
+		...partyPairs(stay.party, "pets").map(([key, value]) => [key, value])
+	];
+	const query = new URLSearchParams(pairs);
+	return `${path}${path.includes("?") ? "&" : "?"}${query}`;
+};
+//#endregion
+//#region src/map.tsx
+/** What the style's sources ask to be credited, with their links, as MapLibre's attribution control
+*  would show it (OpenStreetMap's to its copyright page). */
+const Attribution = () => /* @__PURE__ */ jsxs("p", {
+	className: "map-attribution",
+	children: [
+		/* @__PURE__ */ jsx("a", {
+			href: "https://openfreemap.org",
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: "OpenFreeMap"
+		}),
+		" ",
+		/* @__PURE__ */ jsx("a", {
+			href: "https://www.openmaptiles.org/",
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: "© OpenMapTiles"
+		}),
+		" ",
+		"Data from",
+		" ",
+		/* @__PURE__ */ jsx("a", {
+			href: "https://www.openstreetmap.org/copyright",
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: "OpenStreetMap"
+		})
+	]
+});
+const MapCard = ({ rental, label, notice, load, children }) => {
+	const [shown, setShown] = useState(false);
+	const box = useRef(null);
+	const location = rental.location;
+	useEffect(() => {
+		const element = box.current;
+		if (!shown || !element || !location) return;
+		let removed = false;
+		let map;
+		import("maplibre-gl").then((module) => {
+			if (removed) return;
+			const library = module;
+			const { Map, Marker } = library.default ?? library;
+			const center = [location.lng, location.lat];
+			const created = new Map({
+				container: element,
+				style: DEFAULT_MAP_STYLE_URL,
+				center,
+				zoom: 13,
+				attributionControl: false,
+				scrollZoom: false
+			});
+			const pin = document.createElement("span");
+			pin.className = "map-pin";
+			new Marker({ element: pin }).setLngLat(center).addTo(created);
+			map = created;
+		}).catch(() => {
+			if (!removed) setShown(false);
+		});
+		return () => {
+			removed = true;
+			map?.remove();
+		};
+	}, [shown, location]);
+	if (!location) return null;
+	return /* @__PURE__ */ jsxs("article", {
+		className: "card map-card",
+		children: [shown ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			ref: box,
+			className: "map",
+			role: "group",
+			"aria-label": label
+		}), /* @__PURE__ */ jsx(Attribution, {})] }) : /* @__PURE__ */ jsxs("div", {
+			className: "map-gate",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "muted",
+				children: notice
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "button",
+				onClick: () => setShown(true),
+				children: load
+			})]
+		}), children]
+	});
+};
+//#endregion
+//#region src/registry.tsx
+const ChatContext = createContext(null);
+const useChat = () => {
+	const value = useContext(ChatContext);
+	if (!value) throw new Error("A chat component rendered outside the chat panel.");
+	return value;
+};
+/** A stay from the state; with a `rentalId`, only a stay of that rental, so a price never shows
+*  under another rental's name, whatever a spec pairs. */
+const useStay = (stayId, rentalId) => {
+	const stay = useStateValue(statePath("stays", stayId ?? "")) ?? null;
+	return stay && (rentalId === void 0 || stay.rentalId === rentalId) ? stay : null;
+};
+const useRental = (rentalId) => useStateValue(statePath("rentals", rentalId)) ?? null;
+const day = (value) => /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+/** "12.–19. Juli 2027" from two `YYYY-MM-DD` days. */
+const period = (stay, locale) => new Intl.DateTimeFormat(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));
+/** 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(", ");
+};
+const StayLine = ({ stay }) => {
+	const { copy, locale } = useChat();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "muted",
+		children: [
+			period(stay, locale),
+			" · ",
+			partyText(stay, copy, locale)
+		]
+	}), !stay.bookable ? /* @__PURE__ */ jsx("span", {
+		className: "muted",
+		children: copy.notBookable
+	}) : stay.total && /* @__PURE__ */ jsxs("span", { children: [
+		copy.total,
+		": ",
+		/* @__PURE__ */ jsx("span", {
+			className: "price",
+			children: stay.total
+		})
+	] })] });
+};
+const useBookHref = (rentalId, stay) => {
+	const { searchPath } = useChat();
+	const page = useStateValue(statePath("pages", rentalId)) ?? null;
+	return stayHref(page, stay?.bookable ? stay : null, searchPath);
+};
+/** A link out of the chat. It waits while a reply streams: leaving the page then aborts the turn,
+*  which neither the service nor the widget keeps, and a first conversation would be lost. */
+const ReplyLink = ({ href, className, children }) => {
+	const { busy } = useChat();
+	return busy ? /* @__PURE__ */ jsx("span", {
+		className,
+		"aria-disabled": "true",
+		children
+	}) : /* @__PURE__ */ jsx("a", {
+		className,
+		href,
+		children
+	});
+};
+const BookLink = ({ rentalId, stay }) => {
+	const { copy } = useChat();
+	return /* @__PURE__ */ jsx(ReplyLink, {
+		className: "button",
+		href: useBookHref(rentalId, stay),
+		children: stay?.bookable ? copy.bookStay : copy.viewRental
+	});
+};
+/** A row that snaps item by item, with arrow buttons and "n / total"; swipe, scroll or keys move it. */
+const Snapper = ({ count, className, label, children }) => {
+	const { copy } = useChat();
+	const row = useRef(null);
+	const [index, setIndex] = useState(0);
+	const range = (element) => Math.max(1, element.scrollWidth - element.clientWidth);
+	const go = (step) => {
+		const element = row.current;
+		if (!element) return;
+		const still = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		const target = Math.min(count - 1, Math.max(0, index + step));
+		element.scrollTo({
+			left: target / (count - 1) * range(element),
+			behavior: still ? "auto" : "smooth"
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${className}-wrap`,
+		role: "group",
+		"aria-roledescription": "carousel",
+		"aria-label": label,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: row,
+			className,
+			onScroll: (event) => {
+				const element = event.currentTarget;
+				setIndex(Math.round(element.scrollLeft / range(element) * (count - 1)));
+			},
+			children
+		}), count > 1 && /* @__PURE__ */ jsxs("div", {
+			className: "snap-nav",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": copy.previous,
+					disabled: index === 0,
+					onClick: () => go(-1),
+					children: "‹"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "muted",
+					children: [
+						Math.min(index + 1, count),
+						" / ",
+						count
+					]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": copy.next,
+					disabled: index >= count - 1,
+					onClick: () => go(1),
+					children: "›"
+				})
+			]
+		})]
+	});
+};
+const Gallery = ({ images, name }) => {
+	const { copy } = useChat();
+	if (images.length === 0) return null;
+	return /* @__PURE__ */ jsx(Snapper, {
+		count: images.length,
+		className: "gallery",
+		label: name,
+		children: images.map((image, index) => /* @__PURE__ */ jsx("img", {
+			src: image.src,
+			alt: image.alt || `${name}, ${copy.photo} ${index + 1}`,
+			loading: "lazy"
+		}, image.src))
+	});
+};
+const Rating = ({ rental }) => {
+	const { copy, locale } = useChat();
+	if (!rental.rating) return null;
+	const { value, count } = rental.rating;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "muted",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "rating",
+				children: ["★ ", value]
+			}),
+			" (",
+			counted(copy.reviews, reviewCount(count), locale),
+			")"
+		]
+	});
+};
+/** The visitor's wishes the latest search that found the rental applied, which it therefore has. */
+const useWishes = (rentalId) => useStateValue(statePath("wishes", rentalId)) ?? [];
+const Wishes = ({ wishes }) => {
+	const { copy } = useChat();
+	if (wishes.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: "wishes",
+		"aria-label": copy.matchesWishes,
+		children: wishes.map((wish) => /* @__PURE__ */ jsx("li", { children: wish }, wish))
+	});
+};
+const Card = ({ rentalId, stayId }) => {
+	const { copy } = useChat();
+	const rental = useRental(rentalId);
+	const stay = useStay(stayId, rentalId);
+	const wishes = useWishes(rentalId);
+	if (!rental) return null;
+	return /* @__PURE__ */ jsxs("article", {
+		className: "card",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "card-media",
+			children: [/* @__PURE__ */ jsx(Gallery, {
+				images: rental.images,
+				name: rental.name
+			}), wishes.length > 0 ? /* @__PURE__ */ jsx("span", {
+				className: "badge",
+				"aria-hidden": "true",
+				children: copy.matchesWishes
+			}) : null]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					className: "card-title",
+					children: rental.name
+				}),
+				/* @__PURE__ */ jsx(Wishes, { wishes }),
+				rental.place && /* @__PURE__ */ jsx("span", {
+					className: "muted",
+					children: rental.place
+				}),
+				/* @__PURE__ */ jsx(Rating, { rental }),
+				rental.highlights.length > 0 && /* @__PURE__ */ jsx("span", {
+					className: "muted",
+					children: rental.highlights.slice(0, 3).join(" · ")
+				}),
+				stay && /* @__PURE__ */ jsx(StayLine, { stay }),
+				/* @__PURE__ */ jsx(BookLink, {
+					rentalId: rental.id,
+					stay
+				})
+			]
+		})]
+	});
+};
+/** Monday-first weeks of one month, as `YYYY-MM-DD` days and `null` padding. */
+const monthGrid = (month) => {
+	const first = day(`${month}-01`);
+	const days = new Date(Date.UTC(first.getUTCFullYear(), first.getUTCMonth() + 1, 0)).getUTCDate();
+	const lead = (first.getUTCDay() + 6) % 7;
+	return [...Array.from({ length: lead }, () => null), ...Array.from({ length: days }, (_, i) => `${month}-${String(i + 1).padStart(2, "0")}`)];
+};
+const monthsOf = (calendar) => {
+	const months = [];
+	for (let month = calendar.from.slice(0, 7); month <= calendar.through.slice(0, 7);) {
+		months.push(month);
+		const next = day(`${month}-01`);
+		next.setUTCMonth(next.getUTCMonth() + 1);
+		month = next.toISOString().slice(0, 7);
+	}
+	return months;
+};
+const Calendar = ({ rentalId, stayId }) => {
+	const { copy, locale } = useChat();
+	const rental = useRental(rentalId);
+	const stay = useStay(stayId, rentalId);
+	const calendar = useStateValue(statePath("availability", rentalId)) ?? null;
+	const months = calendar ? monthsOf(calendar) : [];
+	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, {
+		weekday: "short",
+		timeZone: "UTC"
+	}).format(day(`2024-01-0${i + 1}`)));
+	const title = new Intl.DateTimeFormat(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, {
+		weekday: "long",
+		day: "numeric",
+		month: "long",
+		timeZone: "UTC"
+	});
+	const statusText = {
+		free: copy.free,
+		booked: copy.booked,
+		closed: copy.closed
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "calendar",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "calendar-head",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": copy.previous,
+						disabled: shown === 0,
+						onClick: () => setShown(shown - 1),
+						children: "‹"
+					}),
+					/* @__PURE__ */ jsxs("span", { children: [title, rental ? ` · ${rental.name}` : ""] }),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": copy.next,
+						disabled: shown >= months.length - 1,
+						onClick: () => setShown(shown + 1),
+						children: "›"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "calendar-grid",
+				children: [weekdays.map((weekday) => /* @__PURE__ */ jsx("span", {
+					className: "weekday",
+					children: weekday
+				}, weekday)), monthGrid(month).map((date, index) => {
+					if (!date) return /* @__PURE__ */ jsx("span", {}, `pad-${index}`);
+					const status = calendar.days[date] ?? "closed";
+					return /* @__PURE__ */ jsxs("span", {
+						className: "day",
+						"data-status": status,
+						"data-stay": inStay(date) || void 0,
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: Number(date.slice(8))
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: [
+								fullDate.format(day(date)),
+								statusText[status],
+								...inStay(date) ? [copy.yourStay] : []
+							].join(", ")
+						})]
+					}, date);
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "legend muted",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-status": "free" }), copy.free] }),
+					/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-status": "booked" }), copy.booked] }),
+					stay && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-stay": "true" }), copy.yourStay] })
+				]
+			})
+		]
+	});
+};
+const CompareColumn = ({ rentalId, stayId }) => {
+	const { copy, locale } = useChat();
+	const rental = useRental(rentalId);
+	const stay = useStay(stayId, rentalId);
+	const href = useBookHref(rentalId, stay);
+	if (!rental) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "compare-col",
+		children: [
+			/* @__PURE__ */ jsx("strong", { children: rental.name }),
+			/* @__PURE__ */ jsxs("dl", { children: [
+				/* @__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("dt", { children: copy.compareHighlights }),
+				/* @__PURE__ */ jsx("dd", { children: rental.highlights.slice(0, 4).join(", ") || "–" }),
+				stay && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: copy.compareStay }), /* @__PURE__ */ jsxs("dd", { children: [
+					shortPeriod(stay, locale),
+					/* @__PURE__ */ jsx("br", {}),
+					!stay.bookable ? /* @__PURE__ */ jsx("span", {
+						className: "muted",
+						children: copy.notBookable
+					}) : stay.total && /* @__PURE__ */ jsx("span", {
+						className: "price",
+						children: stay.total
+					})
+				] })] })
+			] }),
+			/* @__PURE__ */ jsx(ReplyLink, {
+				className: "button",
+				href,
+				children: stay?.bookable ? copy.bookStay : copy.viewRental
+			})
+		]
+	});
+};
+const AlternativeChip = ({ rentalId, stayId }) => {
+	const { locale } = useChat();
+	const stay = useStay(stayId, rentalId);
+	const href = useBookHref(rentalId, stay);
+	if (!stay?.bookable) return null;
+	return /* @__PURE__ */ jsxs(ReplyLink, {
+		className: "chip-link",
+		href,
+		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. */
+const PriceColumn = ({ rentalId, option, asked, cheapest }) => {
+	const { copy, locale, send, busy } = useChat();
+	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",
+		timeZone: "UTC"
+	}).format(day(option.start));
+	const dates = period(option, locale);
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "price-column",
+		"data-asked": asked || void 0,
+		"data-cheapest": cheapest || void 0,
+		"data-free": free || void 0,
+		disabled: !free || !send || busy,
+		"aria-label": [
+			dates,
+			free ? stay.total : copy.closed,
+			...cheapest ? [copy.cheapest] : [],
+			...asked ? [copy.yourStay] : []
+		].join(", "),
+		onClick: () => send?.(rental ? `${rental.name}: ${dates}` : dates),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "bar-track",
+				"aria-hidden": "true",
+				children: free && /* @__PURE__ */ jsx("span", {
+					className: "bar",
+					style: { height: `${25 + 75 * (option.level ?? 1)}%` }
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "price-text",
+				"aria-hidden": "true",
+				children: free ? stay.total : copy.closed
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "muted",
+				"aria-hidden": "true",
+				children: arrival
+			})
+		]
+	}) });
+};
+const PriceCalendarView = ({ rentalId }) => {
+	const { copy, locale } = useChat();
+	const rental = useRental(rentalId);
+	const calendar = useStateValue(statePath("priceCalendars", rentalId)) ?? null;
+	if (!calendar || calendar.options.length === 0) return null;
+	return /* @__PURE__ */ jsx("section", {
+		className: "card price-calendar",
+		"aria-label": copy.priceCalendar,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					className: "card-title",
+					children: copy.priceCalendar
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "muted",
+					children: [counted(copy.priceCalendarNights, calendar.nights, locale), rental ? ` · ${rental.name}` : ""]
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: "price-columns",
+					children: calendar.options.map((option) => /* @__PURE__ */ jsx(PriceColumn, {
+						rentalId,
+						option,
+						asked: option.start === calendar.asked,
+						cheapest: option.stayId !== null && option.stayId === calendar.cheapest
+					}, option.start))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "legend muted",
+					children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-cheapest": "true" }), copy.cheapest] }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-asked": "true" }), copy.yourStay] })]
+				})
+			]
+		})
+	});
+};
+const ReviewsView = ({ rentalId }) => {
+	const { copy, locale } = useChat();
+	const rental = useRental(rentalId);
+	const reviews = useStateValue(statePath("reviews", rentalId)) ?? null;
+	if (!reviews) return null;
+	return /* @__PURE__ */ jsx("section", {
+		className: "card reviews",
+		"aria-label": copy.reviewsTitle,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsxs("h3", {
+					className: "card-title",
+					children: [copy.reviewsTitle, rental ? ` · ${rental.name}` : ""]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "score",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "score-value",
+						children: reviews.rating
+					}), /* @__PURE__ */ jsxs("span", { children: [reviews.grade && /* @__PURE__ */ jsx("strong", { children: reviews.grade }), /* @__PURE__ */ jsxs("span", {
+						className: "muted",
+						children: [" ", counted(copy.reviews, reviewCount(reviews.count), locale)]
+					})] })]
+				}),
+				reviews.categories.length > 0 && /* @__PURE__ */ jsx("dl", {
+					className: "review-categories",
+					children: reviews.categories.map((category) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: category.label }), /* @__PURE__ */ jsx("dd", { children: category.rating })] }, category.label))
+				}),
+				reviews.excerpts.map((excerpt) => /* @__PURE__ */ jsx("blockquote", {
+					className: "excerpt",
+					children: /* @__PURE__ */ jsx("p", { children: excerpt.text })
+				}, excerpt.text))
+			]
+		})
+	});
+};
+const FactsView = ({ rentalId, groups }) => {
+	const rental = useRental(rentalId);
+	const known = useStateValue(statePath("facts", rentalId)) ?? [];
+	const shown = groups.flatMap((label) => {
+		const group = known.find((candidate) => candidate.label.toLowerCase() === label.toLowerCase());
+		return group ? [group] : [];
+	});
+	if (!rental || shown.length === 0) return null;
+	return /* @__PURE__ */ jsx("section", {
+		className: "card facts",
+		"aria-label": rental.name,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "card-title",
+				children: rental.name
+			}), shown.map((group) => /* @__PURE__ */ jsxs("div", {
+				className: "fact-group",
+				children: [/* @__PURE__ */ jsx("h4", { children: group.label }), /* @__PURE__ */ jsx("ul", { children: group.items.map((item) => /* @__PURE__ */ jsx("li", { children: item }, item)) })]
+			}, group.label))]
+		})
+	});
+};
+const RentalMapView = ({ rentalId }) => {
+	const { copy } = useChat();
+	const rental = useRental(rentalId);
+	const href = useBookHref(rentalId, null);
+	if (!rental) return null;
+	return /* @__PURE__ */ jsx(MapCard, {
+		rental,
+		label: copy.mapLabel.replace("{name}", rental.name),
+		notice: copy.mapNotice,
+		load: copy.mapLoad,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					className: "card-title",
+					children: rental.name
+				}),
+				rental.place && /* @__PURE__ */ jsx("span", {
+					className: "muted",
+					children: rental.place
+				}),
+				/* @__PURE__ */ jsx(ReplyLink, {
+					className: "button",
+					href,
+					children: copy.viewRental
+				})
+			]
+		})
+	});
+};
+/** The registry the panel renders specs with. */
+const { registry } = defineRegistry(chatCatalog, { components: {
+	Stack: ({ children }) => /* @__PURE__ */ jsx("div", {
+		className: "ui",
+		children
+	}),
+	RentalCard: ({ props }) => /* @__PURE__ */ jsx(Card, {
+		rentalId: props.rentalId,
+		stayId: props.stayId
+	}),
+	RentalCarousel: ({ props }) => {
+		const { copy } = useChat();
+		return /* @__PURE__ */ jsx(Snapper, {
+			count: props.items.length,
+			className: "carousel",
+			label: copy.title,
+			children: props.items.map((item) => /* @__PURE__ */ jsx(Card, {
+				rentalId: item.rentalId,
+				stayId: item.stayId
+			}, `${item.rentalId}:${item.stayId}`))
+		});
+	},
+	StayQuote: ({ props }) => {
+		const stay = useStay(props.stayId);
+		const rental = useRental(stay?.rentalId ?? "");
+		if (!stay) return null;
+		return /* @__PURE__ */ jsx("article", {
+			className: "card",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "card-body",
+				children: [
+					rental && /* @__PURE__ */ jsx("h3", {
+						className: "card-title",
+						children: rental.name
+					}),
+					/* @__PURE__ */ jsx(StayLine, { stay }),
+					/* @__PURE__ */ jsx(BookLink, {
+						rentalId: stay.rentalId,
+						stay
+					})
+				]
+			})
+		});
+	},
+	PriceBreakdown: ({ props }) => {
+		const { copy } = useChat();
+		const stay = useStay(props.stayId);
+		if (!stay?.bookable || !stay.total) return null;
+		return /* @__PURE__ */ jsx("section", {
+			className: "card breakdown",
+			"aria-label": copy.priceBreakdown,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "card-body",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "muted",
+						children: copy.priceBreakdown
+					}),
+					stay.lines.map((line) => /* @__PURE__ */ jsxs("div", {
+						className: "line",
+						children: [/* @__PURE__ */ jsx("span", { children: line.label }), /* @__PURE__ */ jsx("span", { children: line.amount })]
+					}, `${line.label}:${line.amount}`)),
+					/* @__PURE__ */ jsxs("div", {
+						className: "line total",
+						children: [/* @__PURE__ */ jsx("span", { children: copy.total }), /* @__PURE__ */ jsx("span", { children: stay.total })]
+					})
+				]
+			})
+		});
+	},
+	AlternativeStays: ({ props }) => {
+		const { copy } = useChat();
+		return /* @__PURE__ */ jsx("div", {
+			className: "alternatives",
+			role: "group",
+			"aria-label": copy.otherDates,
+			children: props.stayIds.map((stayId) => /* @__PURE__ */ jsx(AlternativeChip, {
+				rentalId: props.rentalId,
+				stayId
+			}, stayId))
+		});
+	},
+	AvailabilityCalendar: ({ props }) => /* @__PURE__ */ jsx(Calendar, {
+		rentalId: props.rentalId,
+		stayId: props.stayId
+	}),
+	PriceCalendar: ({ props }) => /* @__PURE__ */ jsx(PriceCalendarView, { rentalId: props.rentalId }),
+	ReviewSummary: ({ props }) => /* @__PURE__ */ jsx(ReviewsView, { rentalId: props.rentalId }),
+	RentalFacts: ({ props }) => /* @__PURE__ */ jsx(FactsView, {
+		rentalId: props.rentalId,
+		groups: props.groups
+	}),
+	RentalMap: ({ props }) => /* @__PURE__ */ jsx(RentalMapView, { rentalId: props.rentalId }),
+	Compare: ({ props }) => /* @__PURE__ */ jsx("div", {
+		className: "compare",
+		children: props.items.map((item) => /* @__PURE__ */ jsx(CompareColumn, {
+			rentalId: item.rentalId,
+			stayId: item.stayId
+		}, `${item.rentalId}:${item.stayId}`))
+	}),
+	StayLink: ({ props }) => {
+		const stay = useStay(props.stayId, props.rentalId);
+		return /* @__PURE__ */ jsx(BookLink, {
+			rentalId: props.rentalId,
+			stay
+		});
+	},
+	ContactLink: () => {
+		const { copy, contactPath } = useChat();
+		return /* @__PURE__ */ jsx(ReplyLink, {
+			className: "link",
+			href: contactPath,
+			children: copy.contactLink
+		});
+	},
+	QuickReplies: ({ props }) => {
+		const { send, busy } = useChat();
+		if (!send) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "quick-replies",
+			children: props.options.map((option) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "chip",
+				disabled: busy,
+				onClick: () => send(option),
+				children: option
+			}, option))
+		});
+	}
+} });
+//#endregion
+//#region src/panel.tsx
+/** Appends one event's content to the reply being streamed (the last message). */
+const appendToReply = (messages, part) => {
+	const last = messages.at(-1);
+	if (!last || last.role !== "assistant") return [...messages, {
+		role: "assistant",
+		parts: [part],
+		unconfirmed: true
+	}];
+	const tail = last.parts.at(-1);
+	const parts = part.kind === "text" && tail?.kind === "text" ? [...last.parts.slice(0, -1), {
+		kind: "text",
+		text: tail.text + part.text
+	}] : [...last.parts, part];
+	return [...messages.slice(0, -1), {
+		...last,
+		parts
+	}];
+};
+/** The service finished the turn: its messages, from its visitor message on, are the
+*  conversation's now. An earlier turn it refused stays unconfirmed, on this page only. */
+const confirmed = (messages) => {
+	const turn = messages.findLastIndex((message) => message.role === "visitor");
+	return messages.map((message, index) => index >= turn && message.unconfirmed ? {
+		role: message.role,
+		parts: message.parts
+	} : message);
+};
+const SCROLL_LOCK = "data-v-office-chat-open";
+/** Locks the page's scroll until the returned function runs. The rule lives in the page's head (a
+*  shadow root's styles cannot reach <html>) and is added once. */
+const lockPageScroll = () => {
+	const root = document.documentElement;
+	if (!document.getElementById(SCROLL_LOCK)) {
+		const style = document.createElement("style");
+		style.id = SCROLL_LOCK;
+		style.textContent = `html[${SCROLL_LOCK}] { overflow: hidden; }`;
+		document.head.append(style);
+	}
+	root.setAttribute(SCROLL_LOCK, "");
+	return () => root.removeAttribute(SCROLL_LOCK);
+};
+const SpecView = ({ spec }) => /* @__PURE__ */ jsx(JSONUIProvider, {
+	registry,
+	initialState: spec.state ?? {},
+	children: /* @__PURE__ */ jsx(Renderer, {
+		spec,
+		registry
+	})
+});
+const Consent = ({ copy, pending, onAccept, buttonRef }) => /* @__PURE__ */ jsxs("div", {
+	className: "consent",
+	children: [
+		pending && /* @__PURE__ */ jsxs("figure", {
+			className: "pending",
+			children: [/* @__PURE__ */ jsx("figcaption", {
+				className: "muted",
+				children: copy.yourMessage
+			}), /* @__PURE__ */ jsx("p", { children: pending })]
+		}),
+		/* @__PURE__ */ jsx("p", { children: copy.consent }),
+		/* @__PURE__ */ jsx("button", {
+			ref: buttonRef,
+			type: "button",
+			className: "button",
+			onClick: onAccept,
+			children: copy.consentAccept
+		})
+	]
+});
+const Thinking = ({ label }) => /* @__PURE__ */ jsxs("div", {
+	className: "thinking",
+	role: "status",
+	children: [
+		/* @__PURE__ */ jsx("i", {}),
+		/* @__PURE__ */ jsx("i", {}),
+		/* @__PURE__ */ jsx("i", {}),
+		/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})
+	]
+});
+function Panel(props) {
+	const { copy, endpoint, open, pending, onSent, onStarted, onClose } = props;
+	const stored = useMemo(() => loadConversation(endpoint), [endpoint]);
+	const [accepted, setAccepted] = useState(stored !== null);
+	const [messages, setMessages] = useState(stored?.messages ?? []);
+	const [draft, setDraft] = useState("");
+	const [streaming, setStreaming] = useState(false);
+	const [unavailable, setUnavailable] = useState(null);
+	const session = useRef(stored?.sessionId ?? null);
+	const abort = useRef(null);
+	const end = useRef(null);
+	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 expired = () => Date.now() - lastActivity.current >= SESSION_TTL_S * 1e3;
+	useEffect(() => () => abort.current?.abort(), []);
+	useEffect(() => {
+		if (open) end.current?.scrollIntoView({ block: "end" });
+	}, [messages, open]);
+	useEffect(() => {
+		if (open) (accepted ? composer : start).current?.focus();
+	}, [accepted, open]);
+	useEffect(() => {
+		onStarted(hasMessages);
+		if (messages.at(-1)?.unconfirmed) return;
+		const kept = messages.filter((message) => !message.unconfirmed);
+		if (kept.length > 0) saveConversation(endpoint, {
+			sessionId: session.current,
+			messages: kept
+		}, lastActivity.current);
+	}, [
+		endpoint,
+		hasMessages,
+		messages,
+		onStarted
+	]);
+	/** Sends one visitor message, typed or tapped (QuickReplies); nothing while a reply streams. */
+	const submit = async (text) => {
+		const message = text.trim().slice(0, MAX_MESSAGE_CHARS);
+		if (!message || streaming) return;
+		const fresh = expired();
+		if (fresh) {
+			session.current = null;
+			clearConversation(endpoint);
+		}
+		setDraft("");
+		setUnavailable(null);
+		setStreaming(true);
+		setMessages((current) => [...fresh ? [] : current, {
+			role: "visitor",
+			parts: [{
+				kind: "text",
+				text: message
+			}],
+			unconfirmed: true
+		}]);
+		const sentAt = Date.now();
+		const controller = new AbortController();
+		abort.current = controller;
+		try {
+			await sendMessage(endpoint, {
+				sessionId: session.current,
+				message,
+				locale: props.locale,
+				clientVersion: props.clientVersion
+			}, (chatEvent) => {
+				if (controller.signal.aborted) return;
+				if (chatEvent.type === "session") session.current = chatEvent.sessionId;
+				else if (chatEvent.type === "text") setMessages((current) => appendToReply(current, {
+					kind: "text",
+					text: chatEvent.delta
+				}));
+				else if (chatEvent.type === "ui") setMessages((current) => appendToReply(current, {
+					kind: "ui",
+					spec: chatEvent.spec
+				}));
+				else if (chatEvent.type === "unavailable") setUnavailable(chatEvent.reason);
+				else if (chatEvent.type === "done") {
+					lastActivity.current = sentAt;
+					setMessages(confirmed);
+				}
+			}, controller.signal);
+		} catch {
+			if (!controller.signal.aborted) setUnavailable("error");
+		} finally {
+			if (abort.current === controller) setStreaming(false);
+		}
+	};
+	useEffect(() => {
+		if (!open || !accepted || pending === null) return;
+		onSent();
+		submit(pending);
+	}, [
+		open,
+		accepted,
+		pending,
+		onSent
+	]);
+	/** A new conversation: the service starts a new session at the next message. */
+	const restart = () => {
+		abort.current?.abort();
+		abort.current = null;
+		setStreaming(false);
+		setMessages([]);
+		setUnavailable(null);
+		session.current = null;
+		clearConversation(endpoint);
+		composer.current?.focus();
+	};
+	useEffect(() => {
+		if (!open) return;
+		return lockPageScroll();
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		document.addEventListener("astro:before-swap", onClose);
+		return () => document.removeEventListener("astro:before-swap", onClose);
+	}, [open, onClose]);
+	useEffect(() => {
+		if (open && hasMessages && !streaming && expired()) restart();
+	}, [open]);
+	/** Tab stays in the panel while it is open: the page behind the scrim is out of reach. */
+	const trapTab = (event) => {
+		const element = panel.current;
+		if (event.key !== "Tab" || !element) return;
+		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)) {
+			event.preventDefault();
+			(event.shiftKey ? focusable.at(-1) : focusable[0])?.focus();
+		}
+	};
+	const send = (event) => {
+		event.preventDefault();
+		submit(draft);
+	};
+	const waiting = streaming && messages.at(-1)?.role === "visitor";
+	return /* @__PURE__ */ jsxs(ChatContext.Provider, {
+		value: {
+			...props,
+			send: (text) => void submit(text),
+			busy: streaming
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "scrim",
+			hidden: !open,
+			"aria-hidden": "true",
+			onClick: onClose
+		}), /* @__PURE__ */ jsxs("section", {
+			className: "panel",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": copy.title,
+			ref: panel,
+			hidden: !open,
+			inert: !open,
+			onKeyDown: (event) => {
+				if (event.key === "Escape") onClose();
+				trapTab(event);
+			},
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: "header",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: "title",
+							children: copy.title
+						}),
+						hasMessages && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "icon-button restart",
+							"aria-label": copy.newConversation,
+							title: copy.newConversation,
+							onClick: restart,
+							children: /* @__PURE__ */ jsx(Restart, {})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "icon-button close",
+							"aria-label": copy.close,
+							onClick: onClose,
+							children: /* @__PURE__ */ jsx(Cross, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					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", {
+								className: "message",
+								"data-role": message.role,
+								children: 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", {
+							className: "suggestions",
+							children: copy.suggestions.map((suggestion) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "suggestion",
+								onClick: () => void submit(suggestion),
+								children: suggestion
+							}, suggestion))
+						}),
+						/* @__PURE__ */ jsxs("form", {
+							className: "composer",
+							onSubmit: send,
+							children: [/* @__PURE__ */ jsx("textarea", {
+								ref: composer,
+								rows: 1,
+								value: draft,
+								maxLength: MAX_MESSAGE_CHARS,
+								placeholder: copy.placeholder,
+								"aria-label": copy.placeholder,
+								onChange: (event) => setDraft(event.target.value),
+								onKeyDown: (event) => {
+									if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+									event.preventDefault();
+									event.currentTarget.form?.requestSubmit();
+								}
+							}), /* @__PURE__ */ jsx("button", {
+								type: "submit",
+								className: "send",
+								"aria-label": copy.send,
+								disabled: streaming || !draft.trim(),
+								children: /* @__PURE__ */ jsx(Arrow, {})
+							})]
+						})
+					]
+				})] }) : /* @__PURE__ */ jsx(Consent, {
+					copy,
+					pending,
+					onAccept: () => setAccepted(true),
+					buttonRef: start
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { Panel as default };