@v-office/website-chat 1.1.0 → 1.1.1

package/dist/{icons-B4hI9ipR.js → icons-DIqOmKoe.js}

@@ -146,6 +146,11 @@ const Check = () => /* @__PURE__ */ jsx(Svg, {
 	size: 14,
 	children: /* @__PURE__ */ jsx("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
 });
+/** In a photo's place on a card without photos. */
+const House = () => /* @__PURE__ */ jsx(Svg, {
+	size: 32,
+	children: /* @__PURE__ */ jsx("path", { d: "M3 10.5 12 3l9 7.5M5 9v11h14V9M10 20v-6h4v6" })
+});
 /** What a suggestion is about, read from its words (German and English), for its icon. */
 const TOPICS = [
 	{
@@ -235,4 +240,4 @@ const TopicIcon = ({ text }) => {
 	return /* @__PURE__ */ jsx(Svg, { children: TOPIC_PATHS[topic] });
 };
 //#endregion
-export { Restart as a, clearConversation as c, chatAvailable as d, sendMessage as f, Cross as i, loadConversation as l, Check as n, Spark as o, Chevron as r, TopicIcon as s, Arrow as t, saveConversation as u };
+export { House as a, TopicIcon as c, saveConversation as d, chatAvailable as f, Cross as i, clearConversation as l, Check as n, Restart as o, sendMessage as p, Chevron as r, Spark as s, Arrow as t, loadConversation as u };

package/dist/index.d.ts

@@ -33,7 +33,8 @@ interface ChatCopy {
   /** A card's short button: book its stay, or see the rental without one. */
   readonly book: string;
   readonly view: string;
-  /** On a card's photo, when the rental has the visitor's wishes. */
+  /** @deprecated Not shown since 1.1.1: a card lists the wishes it matches instead. Kept so a site's
+   *  `copy` that sets it still type-checks. */
   readonly matchBadge: string;
   /** A stay's length on a card; `{n}` is the count. */
   readonly nights: Readonly<Partial<Record<Intl.LDMLPluralRule, string>>> & {

package/dist/index.js

@@ -1,5 +1,5 @@
 import { r as MAX_MESSAGE_CHARS, t as CHAT_LOCALES } from "./protocol-BuNqZAMt.js";
-import { d as chatAvailable, l as loadConversation, o as Spark, t as Arrow } from "./icons-B4hI9ipR.js";
+import { f as chatAvailable, s as Spark, t as Arrow, u as loadConversation } from "./icons-DIqOmKoe.js";
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -333,7 +333,7 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 .ui { align-self: stretch; display: flex; flex-direction: column; gap: 12px; }
 .thinking { display: flex; gap: 5px; padding: 4px 2px; }
 .thinking i { width: 7px; height: 7px; border-radius: 999px; background: var(--chat-accent); opacity: 0.5; }
-.dock { position: relative; padding: 10px 20px 16px; background: var(--chat-surface); }
+.dock { position: relative; padding: 10px 20px 16px; background: var(--chat-surface-soft); }
 .dock::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px;
   pointer-events: none; background: linear-gradient(to top, var(--chat-surface-soft), transparent); }
 .suggestions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 10px;
@@ -399,12 +399,17 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 .gallery-arrow[data-side="next"] { right: 10px; }
 .gallery-wrap:hover .gallery-arrow:not(:disabled), .gallery-arrow:focus-visible { opacity: 1; }
 @media (hover: none) { .gallery-arrow:not(:focus-visible) { pointer-events: none; } }
-.carousel { gap: 12px; padding: 2px 2px 6px; }
+/* The row scrolls, so it clips: room below for the cards' shadow, taken back from the gap under it. */
+.carousel { gap: 12px; padding: 2px 2px 16px; margin-bottom: -10px; }
 .carousel > .card { flex: 0 0 86%; scroll-snap-align: start; }
-/* Room for two: results side by side, all of them, instead of a row to swipe. */
+/* Room for two: two cards side by side and the next one peeking in, still one row to swipe; two
+   results fill the row exactly, with nothing to swipe to. */
 @container (min-width: 520px) {
-  .carousel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
-  .carousel-wrap > .snap-nav { display: none; }
+  .carousel > .card { flex-basis: calc((100% - 24px) / 2.15); }
+  .carousel:has(> .card:nth-child(2):last-child) > .card { flex-basis: calc((100% - 12px) / 2); }
+  .carousel-wrap:has(> .carousel > .card:nth-child(2):last-child) > .snap-nav { display: none; }
+  /* "n / total" counts one card per step, which a row of two no longer takes: the arrows stay. */
+  .carousel-wrap > .snap-nav > span { visibility: hidden; }
 }
 .snap-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
 .snap-nav button, .calendar-head button { border: 1px solid var(--chat-border); background: var(--chat-surface);
@@ -474,11 +479,12 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 /* A link out of the chat while a reply still streams (ReplyLink). */
 [aria-disabled="true"] { opacity: 0.5; cursor: progress; }
 
-/* Wishes a found stay matches: a badge on the photo, the wishes ticked under the name. */
-.card-media { position: relative; }
-.badge { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 12px; border-radius: var(--chat-round);
-  background: var(--chat-surface); color: var(--chat-accent); font-size: 12px; font-weight: 600;
-  box-shadow: var(--chat-card-shadow); }
+/* A card without photos: in a carousel a quiet block holds the photo's place, so the row lines up;
+   on its own the card simply starts with its text. */
+.no-photo { display: none; aspect-ratio: 5 / 3; place-items: center; background: var(--chat-surface-soft);
+  color: var(--chat-muted); }
+.carousel .no-photo { display: grid; }
+/* Wishes a found stay matches, ticked under the name. */
 .wishes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
 .wishes li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px;
   border: 1px solid var(--chat-border); border-radius: var(--chat-round); font-size: 13px; font-weight: 600; }
@@ -566,7 +572,7 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 `;
 //#endregion
 //#region src/WebsiteChat.tsx
-const Panel = lazy(() => import("./panel-hLRBoh8t.js"));
+const Panel = lazy(() => import("./panel-BsocDe9I.js"));
 /** See {@link WebsiteChatComponent}. */
 const WebsiteChat = function WebsiteChat(props) {
 	const { endpoint, locale, theme = "classic", position = "right" } = props;
@@ -638,7 +644,7 @@ const WebsiteChat = function WebsiteChat(props) {
 				fallback: null,
 				children: /* @__PURE__ */ jsx(Panel, {
 					endpoint,
-					clientVersion: "1.1.0",
+					clientVersion: "1.1.1",
 					locale,
 					copy,
 					searchPath: props.searchPath,

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

@@ -1,5 +1,5 @@
 import { i as SESSION_TTL_S, r as MAX_MESSAGE_CHARS } from "./protocol-BuNqZAMt.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 { 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 { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -186,9 +186,10 @@ const Snapper = ({ count, className, label, children }) => {
 		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),
+		const [first, second] = element.children;
+		const card = first && second ? second.offsetLeft - first.offsetLeft : element.clientWidth;
+		element.scrollBy({
+			left: step * card,
 			behavior: still ? "auto" : "smooth"
 		});
 	};
@@ -340,18 +341,18 @@ const CardFoot = ({ rentalId, stay }) => {
 	const href = useBookHref(rentalId, stay);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "card-foot",
-		children: [stay && /* @__PURE__ */ jsxs("div", {
+		children: [stay && /* @__PURE__ */ jsx("div", {
 			className: "foot-price",
-			children: [!stay.bookable ? /* @__PURE__ */ jsx("span", {
+			children: !stay.bookable ? /* @__PURE__ */ jsx("span", {
 				className: "muted",
 				children: copy.notBookable
-			}) : stay.total && /* @__PURE__ */ jsx("span", {
+			}) : /* @__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, {
 			className: "button compact",
 			href,
@@ -360,7 +361,6 @@ const CardFoot = ({ rentalId, stay }) => {
 	});
 };
 const Card = ({ rentalId, stayId }) => {
-	const { copy } = useChat();
 	const rental = useRental(rentalId);
 	const stay = useStay(stayId, rentalId);
 	const wishes = useWishes(rentalId);
@@ -368,16 +368,13 @@ const Card = ({ rentalId, stayId }) => {
 	return /* @__PURE__ */ jsxs("article", {
 		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]
+			rental.images.length > 0 ? /* @__PURE__ */ jsx(Gallery, {
+				images: rental.images,
+				name: rental.name
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "no-photo",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(House, {})
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "card-body",

package/instructions/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 Release notes of `@v-office/website-chat`, newest first. Each version has its own directory.
 
+- `versions/1.1.1/CHANGELOG.md`: release notes for 1.1.1
 - `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,6 +4,7 @@
 
 Migration guides of `@v-office/website-chat`, newest first. Apply them in order when skipping versions.
 
+- `versions/1.1.1/MIGRATION.md`: Migration: 1.1.0 to 1.1.1
 - `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.1/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog: 1.1.1
+
+Calmer search results and one surface around the message field. Nothing to change on a site.
+
+## Changed
+
+- Search results (`RentalCarousel`) are one row on wide screens too: two cards side by side and
+  the next one peeking in, with arrows that move one card at a time. Two results fill the row and
+  have no arrows. On a phone the row shows one card with "1 / 4" as before.
+- The area around the message field has the message area's background, so the conversation and
+  the field sit on one surface.
+- A card no longer carries the "Passt genau" badge on its photo: the wishes it matches are ticked
+  under its name, as before.
+- A card whose stay cannot be booked says only that ("Für diesen Zeitraum nicht buchbar"),
+  without the nights and dates of the stay asked for.
+
+## Fixed
+
+- In the row of search results, a card without photos holds the photo's place, so its text lines
+  up with the cards next to it. On its own it still starts with its text.
+- The cards' shadows are no longer cut off under the row of search results.
+
+## Unchanged
+
+- Props, themes and colours are as before. `copy.matchBadge` is still accepted, so a site that
+  sets it keeps compiling; it is no longer shown.

package/instructions/versions/1.1.1/MIGRATION.md

@@ -0,0 +1,13 @@
+# Migration: 1.1.0 to 1.1.1
+
+No changes required.
+
+## 1. Upgrade
+
+```sh
+pnpm add --save-exact @v-office/website-chat@1.1.1
+```
+
+## 2. `copy.matchBadge` (optional)
+
+A site that sets `copy={{ matchBadge: … }}` can drop it: the badge is no longer shown.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@v-office/website-chat",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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,8 +34,8 @@
     "@types/node": "26.5.1",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@v-office/website-headless": "1.2.0",
-    "@v-office/website-sdk": "2.34.0",
+    "@v-office/website-headless": "1.5.0",
+    "@v-office/website-sdk": "3.2.0",
     "jsdom": "30.0.1",
     "oxfmt": "0.67.0",
     "oxlint": "1.82.0",