@v-office/website-chat 1.0.1 → 1.1.0

package/dist/{panel-C0Bb7ln-.js → panel-hLRBoh8t.js}

@@ -1,23 +1,26 @@
 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 { a as Restart, c as clearConversation, f as sendMessage, i as Cross, l as loadConversation, n as Check, r as Chevron, s as TopicIcon, t as Arrow, u as saveConversation } from "./icons-B4hI9ipR.js";
+import { r as chatCatalog, u as statePath } from "./catalog-y3xQ2jXW.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
+const withQuery = (path, pairs) => `${path}${path.includes("?") ? "&" : "?"}${new URLSearchParams(pairs)}`;
+/** The stay's dates, party and chosen rate, as the rental page and the checkout both read them. */
+const stayPairs = (stay) => [
+	["start", stay.start],
+	["end", stay.end],
+	...partyPairs(stay.party, "pets").map(([key, value]) => [key, value]),
+	...stay.policyId ? [["policy", stay.policyId]] : []
+];
 /** 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}`;
+	return stay ? withQuery(path, stayPairs(stay)) : path;
 };
+/** See {@link BookingHref}. */
+const bookingHref = (bookingPage, stay) => withQuery(bookingPage, [...stayPairs(stay), ...(stay.services ?? []).filter((service) => service.count > 0).map((service) => ["service", `${service.id}:${service.count}`])]);
 //#endregion
 //#region src/map.tsx
 /** What the style's sources ask to be credited, with their links, as MapLibre's attribution control
@@ -142,30 +145,13 @@ 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
-		})
-	] })] });
-};
+/** 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. */
 const useBookHref = (rentalId, stay) => {
 	const { searchPath } = useChat();
 	const page = useStateValue(statePath("pages", rentalId)) ?? null;
+	const booking = useStateValue(statePath("bookingPages", rentalId)) ?? null;
+	if (stay?.bookable && booking) return bookingHref(booking, stay);
 	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,
@@ -248,35 +234,83 @@ const Snapper = ({ count, className, label, children }) => {
 		})]
 	});
 };
+/** A rental's photos, swiped or stepped through with the arrows a pointer brings up; the dots say
+*  which one shows. */
 const Gallery = ({ images, name }) => {
 	const { copy } = useChat();
+	const row = useRef(null);
+	const [index, setIndex] = useState(0);
 	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 go = (to) => {
+		const element = row.current;
+		if (!element) return;
+		const still = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		element.scrollTo({
+			left: to * element.clientWidth,
+			behavior: still ? "auto" : "smooth"
+		});
+	};
+	const many = images.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gallery-wrap",
+		role: "group",
+		"aria-roledescription": "carousel",
+		"aria-label": name,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: row,
+			className: "gallery",
+			onScroll: (event) => {
+				const element = event.currentTarget;
+				setIndex(Math.round(element.scrollLeft / Math.max(1, element.clientWidth)));
+			},
+			children: images.map((image, imageIndex) => /* @__PURE__ */ jsx("img", {
+				src: image.src,
+				alt: image.alt || `${name}, ${copy.photo} ${imageIndex + 1}`,
+				loading: "lazy"
+			}, image.src))
+		}), many && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gallery-arrow",
+				"data-side": "prev",
+				"aria-label": copy.previous,
+				disabled: index === 0,
+				onClick: () => go(index - 1),
+				children: /* @__PURE__ */ jsx(Chevron, { side: "prev" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gallery-arrow",
+				"data-side": "next",
+				"aria-label": copy.next,
+				disabled: index >= images.length - 1,
+				onClick: () => go(index + 1),
+				children: /* @__PURE__ */ jsx(Chevron, { side: "next" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "dots",
+				"aria-hidden": "true",
+				children: images.map((image, imageIndex) => /* @__PURE__ */ jsx("i", { "data-current": imageIndex === index || void 0 }, image.src))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: `${copy.photo} ${Math.min(index + 1, images.length)} / ${images.length}`
+			})
+		] })]
 	});
 };
+/** The PMS's score as a chip; its number of reviews is read out, not shown. */
 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),
-			")"
-		]
+	return /* @__PURE__ */ jsx("span", {
+		className: "score-chip",
+		role: "img",
+		title: counted(copy.reviews, reviewCount(count), locale),
+		"aria-label": `${value}, ${counted(copy.reviews, reviewCount(count), locale)}`,
+		children: value
 	});
 };
 /** The visitor's wishes the latest search that found the rental applied, which it therefore has. */
@@ -287,7 +321,42 @@ const Wishes = ({ wishes }) => {
 	return /* @__PURE__ */ jsx("ul", {
 		className: "wishes",
 		"aria-label": copy.matchesWishes,
-		children: wishes.map((wish) => /* @__PURE__ */ jsx("li", { children: wish }, wish))
+		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. */
+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))}`;
+};
+/** A card's foot: the stay's total and its length, and the way to book or to the rental. */
+const CardFoot = ({ rentalId, stay }) => {
+	const { copy, locale } = useChat();
+	const href = useBookHref(rentalId, stay);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "card-foot",
+		children: [stay && /* @__PURE__ */ jsxs("div", {
+			className: "foot-price",
+			children: [!stay.bookable ? /* @__PURE__ */ jsx("span", {
+				className: "muted",
+				children: copy.notBookable
+			}) : stay.total && /* @__PURE__ */ jsx("span", {
+				className: "price",
+				children: stay.total
+			}), /* @__PURE__ */ jsx("span", {
+				className: "foot-meta",
+				children: stayMeta(stay, copy, locale)
+			})]
+		}), /* @__PURE__ */ jsx(ReplyLink, {
+			className: "button compact",
+			href,
+			children: stay?.bookable ? copy.book : copy.view
+		})]
 	});
 };
 const Card = ({ rentalId, stayId }) => {
@@ -297,41 +366,45 @@ const Card = ({ rentalId, stayId }) => {
 	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
-				})
-			]
-		})]
+		className: "card rental-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.matchBadge
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "card-body",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "card-meta",
+						children: [rental.place && /* @__PURE__ */ jsx("span", {
+							className: "place",
+							children: rental.place
+						}), /* @__PURE__ */ jsx(Rating, { rental })]
+					}),
+					/* @__PURE__ */ jsx("h3", {
+						className: "card-title",
+						children: rental.name
+					}),
+					rental.highlights.length > 0 && /* @__PURE__ */ jsx("p", {
+						className: "specs",
+						children: rental.highlights.slice(0, 3).join(" · ")
+					}),
+					/* @__PURE__ */ jsx(Wishes, { wishes })
+				]
+			}),
+			/* @__PURE__ */ jsx(CardFoot, {
+				rentalId: rental.id,
+				stay
+			})
+		]
 	});
 };
 /** Monday-first weeks of one month, as `YYYY-MM-DD` days and `null` padding. */
@@ -687,25 +760,25 @@ 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__ */ jsx("article", {
-			className: "card",
-			children: /* @__PURE__ */ jsxs("div", {
+		return /* @__PURE__ */ jsxs("article", {
+			className: "card stay-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
-					})
-				]
-			})
+				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
+			})]
 		});
 	},
 	PriceBreakdown: ({ props }) => {
@@ -784,12 +857,12 @@ const { registry } = defineRegistry(chatCatalog, { components: {
 		if (!send) return null;
 		return /* @__PURE__ */ jsx("div", {
 			className: "quick-replies",
-			children: props.options.map((option) => /* @__PURE__ */ jsx("button", {
+			children: props.options.map((option) => /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: "chip",
 				disabled: busy,
 				onClick: () => send(option),
-				children: option
+				children: [/* @__PURE__ */ jsx(TopicIcon, { text: option }), option]
 			}, option))
 		});
 	}
@@ -837,6 +910,9 @@ const lockPageScroll = () => {
 	root.setAttribute(SCROLL_LOCK, "");
 	return () => root.removeAttribute(SCROLL_LOCK);
 };
+/** The assistant's text, its `**bold**` (a rental's name, the dates) as strong text: nothing else
+*  is read as markup, so the model's text never becomes HTML. */
+const RichText = ({ text }) => /* @__PURE__ */ jsx(Fragment, { children: text.split(/\*\*(.+?)\*\*/g).map((piece, index) => index % 2 === 1 ? /* @__PURE__ */ jsx("strong", { children: piece }, index) : piece) });
 const SpecView = ({ spec }) => /* @__PURE__ */ jsx(JSONUIProvider, {
 	registry,
 	initialState: spec.state ?? {},
@@ -848,6 +924,11 @@ const SpecView = ({ spec }) => /* @__PURE__ */ jsx(JSONUIProvider, {
 const Consent = ({ copy, pending, onAccept, buttonRef }) => /* @__PURE__ */ jsxs("div", {
 	className: "consent",
 	children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "message",
+			"data-role": "assistant",
+			children: copy.greeting
+		}),
 		pending && /* @__PURE__ */ jsxs("figure", {
 			className: "pending",
 			children: [/* @__PURE__ */ jsx("figcaption", {
@@ -855,13 +936,15 @@ const Consent = ({ copy, pending, onAccept, buttonRef }) => /* @__PURE__ */ jsxs
 				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
+		/* @__PURE__ */ jsxs("div", {
+			className: "consent-card",
+			children: [/* @__PURE__ */ jsx("p", { children: copy.consent }), /* @__PURE__ */ jsx("button", {
+				ref: buttonRef,
+				type: "button",
+				className: "button compact",
+				onClick: onAccept,
+				children: copy.consentAccept
+			})]
 		})
 	]
 });
@@ -1084,7 +1167,7 @@ function Panel(props) {
 							children: message.parts.map((part, partIndex) => part.kind === "text" ? /* @__PURE__ */ jsx("div", {
 								className: "message",
 								"data-role": message.role,
-								children: part.text
+								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 }),
@@ -1115,11 +1198,11 @@ function Panel(props) {
 						}),
 						!hasMessages && copy.suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
 							className: "suggestions",
-							children: copy.suggestions.map((suggestion) => /* @__PURE__ */ jsx("button", {
+							children: copy.suggestions.map((suggestion) => /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								className: "suggestion",
 								onClick: () => void submit(suggestion),
-								children: suggestion
+								children: [/* @__PURE__ */ jsx(TopicIcon, { text: suggestion }), suggestion]
 							}, suggestion))
 						}),
 						/* @__PURE__ */ jsxs("form", {

package/instructions/CHANGELOG.md

@@ -4,5 +4,6 @@
 
 Release notes of `@v-office/website-chat`, newest first. Each version has its own directory.
 
+- `versions/1.1.0/CHANGELOG.md`: release notes for 1.1.0
 - `versions/1.0.1/CHANGELOG.md`: release notes for 1.0.1
 - `versions/1.0.0/CHANGELOG.md`: release notes for 1.0.0

package/instructions/MIGRATION.md

@@ -4,5 +4,6 @@
 
 Migration guides of `@v-office/website-chat`, newest first. Apply them in order when skipping versions.
 
+- `versions/1.1.0/MIGRATION.md`: Migration: 1.0.1 to 1.1.0
 - `versions/1.0.1/MIGRATION.md`: Migration: 1.0.0 to 1.0.1
 - `versions/1.0.0/MIGRATION.md`: Migration: 1.0.0

package/instructions/versions/1.1.0/CHANGELOG.md

@@ -0,0 +1,52 @@
+# Changelog: 1.1.0
+
+The chat looks like the site it is on and like AI Studio's booking assistant prototype. It takes
+its colours and corners from the site's shadcn tokens, which every AI Studio template defines,
+instead of its own blue, and has calmer cards, a two-tone brand and a friendlier start. Nothing to
+change on a site.
+
+## Added
+
+- `colors.accent`: the colour of the small marks (the chat's name and sparkle, a card's place, the
+  icons, the ring round the entry pill). The site's primary when unset; a site with a second brand
+  colour sets it here.
+- Suggestions and quick replies carry an icon for their topic (dates, prices, pets, people,
+  places, booking).
+- The assistant's **bold** (a rental's name, the dates) shows as bold text; nothing else in its
+  text is read as markup.
+- A stay can carry the rate and extras the visitor chose in the chat (`ChatStay.policyId`,
+  `ChatStay.services`), and the state the rental's booking page (`ChatState.bookingPages`). A
+  bookable stay's booking button then opens the booking page with the dates, the party, the rate
+  and the extras (`?policy=`, `?service=<id>:<count>`); the visitor enters their details there.
+  Without a booking page the button opens the rental page as before.
+
+## Changed
+
+- Colours come from the site: `--primary` and `--primary-foreground` for buttons and the chat's
+  mark, `--background`, `--foreground`, `--muted`, `--muted-foreground` and `--border` for the
+  panel and its text. The visitor's messages, suggestions and chips are the site's primary,
+  lightened. A site in dark mode gets a dark chat.
+- Corners come from the site's `--radius`; the themes scale it (`classic` 1.6×, `soft` 2.4×,
+  `minimal` 0.6×). Buttons and chips stay pills unless the site's corners are square
+  (`--radius: 0`); `minimal` has no pills.
+- The calendar's free days, the price bars and the map pin use the site's colours.
+- Without the tokens the chat looks as in 1.0.
+- Rental cards: the place and the rating on top, the name larger, the facts and the wishes as
+  chips, then the stay's total with "7 Nächte · 26.12.–2.1." and a short "Buchen" button below a
+  line. Photos show dots, and arrows under a pointer, instead of "1 / 3".
+- A stay quote has the same foot as a card.
+- The panel's head has no line under it and a filled close button; the AI notice is one quiet line.
+- A warmer greeting, and the start step as a card under it with a compact "Chat starten".
+- The panel is 700px wide on wide screens (`--chat-width` still sets it), the assistant's text a
+  little larger.
+
+## Fixed
+
+- A site whose tokens are HSL triples (`221 83% 53%`, an older shadcn setup) keeps the chat's own
+  colours for them instead of getting colourless buttons.
+
+## Unchanged
+
+- `colors={{ primary, secondary }}` still overrides, with white text on `primary` and dark text on
+  `secondary` as before (not the site's foregrounds, which suit the site's own colours). `theme`
+  takes the same values, and every other prop is as before.

package/instructions/versions/1.1.0/MIGRATION.md

@@ -0,0 +1,22 @@
+# Migration: 1.0.1 to 1.1.0
+
+No changes required: the chat takes the site's design tokens by itself.
+
+## 1. Upgrade
+
+```sh
+pnpm add --save-exact @v-office/website-chat@1.1.0
+```
+
+## 2. Check `colors` (optional)
+
+A site that passed `colors` to match its brand can drop it: the chat now reads the same colour from
+`--primary`. Keep it only where the chat should differ from the site's buttons.
+
+## 3. A second brand colour (optional)
+
+A site whose design has a second colour for small accents (labels, icons) passes it:
+
+```astro
+<WebsiteChat client:idle ... colors={{ accent: "var(--color-accent)" }} />
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@v-office/website-chat",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "The AI chat of v-office websites: a launcher and a lazily loaded chat panel in a Shadow DOM, talking to the AI Studio chat service, and the json-render catalog (./catalog) the service places its rental cards, stays and links from. Styled through CSS custom properties and curated template themes; consumers need no Tailwind",
   "license": "UNLICENSED",
   "repository": {
@@ -34,7 +34,7 @@
     "@types/node": "26.5.1",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@v-office/website-headless": "1.1.1",
+    "@v-office/website-headless": "1.2.0",
     "@v-office/website-sdk": "2.34.0",
     "jsdom": "30.0.1",
     "oxfmt": "0.67.0",