@v-office/website-chat 1.0.0 → 1.1.0

package/README.md

@@ -28,16 +28,21 @@ Render `WebsiteChat` once in the layout as a client island; see `instructions/ve
 | `locale`      | yes      | `"de"` or `"en"`                                                         |
 | `searchPath`  | yes      | the site's search, for a rental without a page and when the chat is down |
 | `contactPath` | yes      | the site's contact page                                                  |
-| `theme`       | no       | `classic` (default), `soft` or `minimal`                                 |
-| `colors`      | no       | `{ primary, secondary }`, any CSS colour (buttons; visitor messages)     |
+| `theme`       | no       | `classic` (default), `soft` or `minimal`: shadows or borders, how round  |
+| `colors`      | no       | `{ primary, secondary, accent }`, any CSS colour, over the site's tokens |
 | `position`    | no       | the entry pill and the panel on the `right` (default) or `left`          |
 | `copy`        | no       | overrides of single fields of `DEFAULT_COPY` (strings, `suggestions`)    |
 
 The chat stays hidden until an agent switches it on for the website in AI Studio.
 
+It takes its colours and corners from the site's shadcn tokens (`--primary`,
+`--primary-foreground`, `--background`, `--foreground`, `--muted`, `--muted-foreground`, `--border`,
+`--radius`), dark mode included, and its own values where a site has none. A site whose corners
+are square (`--radius: 0`) gets square buttons too.
+
 A site with a sticky header sets `--chat-top` (its height) on any element around the widget, such as
 `:root`: the dimmed page and the panel start below it. `--chat-width` widens the panel on wide screens
-(default `600px`).
+(default `700px`).
 
 The service places these components in replies: `RentalCard` (photo gallery, rating, the wishes the
 search that found it applied), `RentalCarousel`, `Compare`, `StayQuote`, `PriceBreakdown`,

package/dist/{catalog-RXKmEmMW.js → catalog-y3xQ2jXW.js}

@@ -137,16 +137,23 @@ const versionOf = (version) => {
 		Number(match[3])
 	] : null;
 };
-/** See {@link ComponentsFor}. */
-const componentsFor = (clientVersion) => {
+/** Whether a widget of `clientVersion` is `since` or newer within the same major; an unreadable
+*  version is neither. */
+const isAtLeast = (clientVersion, since) => {
 	const client = versionOf(clientVersion);
-	if (!client) return [];
-	return PLACEABLE_COMPONENTS.filter((name) => {
-		const since = versionOf(COMPONENT_SINCE[name]);
-		if (since[0] !== client[0]) return false;
-		return since[1] < client[1] || since[1] === client[1] && since[2] <= client[2];
-	});
+	const from = versionOf(since);
+	if (!client || from[0] !== client[0]) return false;
+	return from[1] < client[1] || from[1] === client[1] && from[2] <= client[2];
 };
+/** See {@link ComponentsFor}. */
+const componentsFor = (clientVersion) => PLACEABLE_COMPONENTS.filter((name) => isAtLeast(clientVersion, COMPONENT_SINCE[name]));
+/** Whether the widget shows the assistant's `**bold**` as bold text (1.1.0 and later); an older
+*  one would show the asterisks, so the service asks for none there. */
+const rendersBold = (clientVersion) => isAtLeast(clientVersion, "1.1.0");
+/** Whether the widget's booking button opens the rental's booking page with the rate and extras the
+*  visitor chose in the chat (1.1.0 and later); an older one opens the rental page and loses them, so
+*  the service puts no stay together there. */
+const handsOverStays = (clientVersion) => isAtLeast(clientVersion, "1.1.0");
 /** See {@link ParseItem}. */
 const parseItem = (item, allowed) => {
 	if (typeof item !== "object" || item === null) return null;
@@ -180,4 +187,4 @@ const chatSpec = (items, state) => {
 	};
 };
 //#endregion
-export { componentsFor as a, statePath as c, chatSpec as i, PLACEABLE_COMPONENTS as n, parseItem as o, chatCatalog as r, stateKey as s, COMPONENT_SINCE as t };
+export { componentsFor as a, rendersBold as c, chatSpec as i, stateKey as l, PLACEABLE_COMPONENTS as n, handsOverStays as o, chatCatalog as r, parseItem as s, COMPONENT_SINCE as t, statePath as u };

package/dist/catalog.d.ts

@@ -51,6 +51,15 @@ interface ChatStay {
     readonly label: string;
     readonly amount: string;
   }[];
+  /** The rate the visitor chose in the chat (`?policy=` on the way to booking); absent for the
+   *  PMS's pre-selection. */
+  readonly policyId?: string | null;
+  /** The extras the visitor chose in the chat, by the PMS's service id, as the quote priced them
+   *  (`?service=<id>:<count>` on the way to booking). */
+  readonly services?: readonly {
+    readonly id: string;
+    readonly count: number;
+  }[];
 }
 /** A day of a rental's calendar: bookable, taken, or outside what can be booked (past, closed). */
 type ChatDayStatus = "free" | "booked" | "closed";
@@ -109,6 +118,9 @@ interface ChatState {
   readonly stays: Readonly<Record<string, ChatStay>>;
   /** A rental's page on this website in the visitor's language; absent without one. */
   readonly pages: Readonly<Record<string, string>>;
+  /** A rental's booking page on this website, where a stay is booked with everything the chat put
+   *  together; absent without one (the stay then goes to the rental page). */
+  readonly bookingPages?: Readonly<Record<string, string>>;
   /** A rental's calendar, by rental id; only for rentals whose calendar was asked for. */
   readonly availability: Readonly<Record<string, ChatCalendar>>;
   /** A rental's price calendar, by rental id (PriceCalendar). */
@@ -295,6 +307,13 @@ type ParseItem = (item: unknown, allowed: readonly PlaceableComponent[]) => Chat
 type ChatSpec = (items: readonly ChatItem[], state: ChatState) => Spec;
 /** See {@link ComponentsFor}. */
 export declare const componentsFor: ComponentsFor;
+/** Whether the widget shows the assistant's `**bold**` as bold text (1.1.0 and later); an older
+ *  one would show the asterisks, so the service asks for none there. */
+export declare const rendersBold: (clientVersion: string) => boolean;
+/** Whether the widget's booking button opens the rental's booking page with the rate and extras the
+ *  visitor chose in the chat (1.1.0 and later); an older one opens the rental page and loses them, so
+ *  the service puts no stay together there. */
+export declare const handsOverStays: (clientVersion: string) => boolean;
 /** See {@link ParseItem}. */
 export declare const parseItem: ParseItem;
 /** See {@link ChatSpec}. */

package/dist/catalog.js

@@ -1,3 +1,3 @@
 import { i as SESSION_TTL_S, n as CHAT_PATH, r as MAX_MESSAGE_CHARS, t as CHAT_LOCALES } from "./protocol-BuNqZAMt.js";
-import { a as componentsFor, c as statePath, i as chatSpec, n as PLACEABLE_COMPONENTS, o as parseItem, r as chatCatalog, s as stateKey, t as COMPONENT_SINCE } from "./catalog-RXKmEmMW.js";
-export { CHAT_LOCALES, CHAT_PATH, COMPONENT_SINCE, MAX_MESSAGE_CHARS, PLACEABLE_COMPONENTS, SESSION_TTL_S, chatCatalog, chatSpec, componentsFor, parseItem, stateKey, statePath };
+import { a as componentsFor, c as rendersBold, i as chatSpec, l as stateKey, n as PLACEABLE_COMPONENTS, o as handsOverStays, r as chatCatalog, s as parseItem, t as COMPONENT_SINCE, u as statePath } from "./catalog-y3xQ2jXW.js";
+export { CHAT_LOCALES, CHAT_PATH, COMPONENT_SINCE, MAX_MESSAGE_CHARS, PLACEABLE_COMPONENTS, SESSION_TTL_S, chatCatalog, chatSpec, componentsFor, handsOverStays, parseItem, rendersBold, stateKey, statePath };

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

@@ -1,5 +1,5 @@
 import { n as CHAT_PATH } from "./protocol-BuNqZAMt.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/client.ts
 const url = (endpoint) => `${endpoint.replace(/\/+$/, "")}${CHAT_PATH}`;
 /** See {@link ChatAvailable}. */
@@ -130,16 +130,109 @@ const Svg = ({ children, size = 16 }) => /* @__PURE__ */ jsx("svg", {
 	focusable: "false",
 	children
 });
-/** The chat's mark, in the primary colour's circle. */
+/** The chat's mark, two sparkles in the accent colour's circle. */
 const Spark = () => /* @__PURE__ */ jsx("span", {
 	className: "spark",
-	children: /* @__PURE__ */ jsx(Svg, {
+	children: /* @__PURE__ */ jsxs(Svg, {
 		size: 18,
-		children: /* @__PURE__ */ jsx("path", { d: "M12 3v4M12 17v4M3 12h4M17 12h4M6.3 6.3l2.5 2.5M15.2 15.2l2.5 2.5M6.3 17.7l2.5-2.5M15.2 8.8l2.5-2.5" })
+		children: [/* @__PURE__ */ jsx("path", { d: "M10 4c.5 4 2 5.5 6 6-4 .5-5.5 2-6 6-.5-4-2-5.5-6-6 4-.5 5.5-2 6-6Z" }), /* @__PURE__ */ jsx("path", { d: "M18 14c.3 2 1 2.7 3 3-2 .3-2.7 1-3 3-.3-2-1-2.7-3-3 2-.3 2.7-1 3-3Z" })]
 	})
 });
 const Arrow = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) });
 const Restart = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5" }) });
 const Cross = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) });
+const Chevron = ({ side }) => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: side === "prev" ? "M15 18l-6-6 6-6" : "M9 6l6 6-6 6" }) });
+const Check = () => /* @__PURE__ */ jsx(Svg, {
+	size: 14,
+	children: /* @__PURE__ */ jsx("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
+});
+/** What a suggestion is about, read from its words (German and English), for its icon. */
+const TOPICS = [
+	{
+		topic: "date",
+		words: /\bwann\b|termin|datum|anreise|\bwhen\b|\bdates?\b/
+	},
+	{
+		topic: "book",
+		words: /buch|\bbook/
+	},
+	{
+		topic: "price",
+		words: /preis|kost|günstig|teuer|budget|€|price|cost|cheap/
+	},
+	{
+		topic: "pet",
+		words: /hund|katze|haustier|\b(?:dogs?|cats?|pets?)\b/
+	},
+	{
+		topic: "people",
+		words: /famili|kinder|zu zweit|personen|erwachsene|gruppe|family|kids|people|adults|couple/
+	},
+	{
+		topic: "date",
+		words: /wann|termin|datum|woche|nächte|nacht|ferien|silvester|ostern|sommer|herbst|winter|frühling|januar|februar|märz|april|mai|juni|juli|august|september|oktober|november|dezember|when|date|week|night|holiday/
+	},
+	{
+		topic: "place",
+		words: /strand|lage|meer|see|wo |nähe|entfern|beach|where|sea|location/
+	}
+];
+const TOPIC_PATHS = {
+	book: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		x: "5",
+		y: "10.5",
+		width: "14",
+		height: "10",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3" })] }),
+	price: /* @__PURE__ */ jsx("path", { d: "M17 6.5A6.5 6.5 0 1 0 17 17.5M4 10.5h9M4 13.5h9" }),
+	pet: /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "10",
+			r: "1.6"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "10",
+			cy: "6",
+			r: "1.6"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "14",
+			cy: "6",
+			r: "1.6"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "18",
+			cy: "10",
+			r: "1.6"
+		}),
+		/* @__PURE__ */ jsx("path", { d: "M12 12c-3 0-5 3-5 5.2 0 1.4 1.3 2 2.6 1.6 1.5-.5 3.3-.5 4.8 0 1.3.4 2.6-.2 2.6-1.6C17 15 15 12 12 12Z" })
+	] }),
+	people: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+		cx: "9",
+		cy: "8",
+		r: "3"
+	}), /* @__PURE__ */ jsx("path", { d: "M3.5 19c.6-3 2.8-5 5.5-5s4.9 2 5.5 5M15.5 5.5a3 3 0 0 1 0 5.6M17.5 14.3c1.6.7 2.7 2.4 3 4.7" })] }),
+	date: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		x: "4",
+		y: "5.5",
+		width: "16",
+		height: "14.5",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M4 10h16M8.5 3.5v4M15.5 3.5v4" })] }),
+	place: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z" }), /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "10",
+		r: "2.3"
+	})] }),
+	other: /* @__PURE__ */ jsx("path", { d: "M5 5.5h14a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-7l-4.5 3.5v-3.5H5A1.5 1.5 0 0 1 3.5 15V7A1.5 1.5 0 0 1 5 5.5Z" })
+};
+/** A suggestion's icon: the first topic its words name, else a speech bubble. */
+const TopicIcon = ({ text }) => {
+	const words = text.toLowerCase();
+	const topic = TOPICS.find((candidate) => candidate.words.test(words))?.topic ?? "other";
+	return /* @__PURE__ */ jsx(Svg, { children: TOPIC_PATHS[topic] });
+};
 //#endregion
-export { clearConversation as a, chatAvailable as c, Spark as i, sendMessage as l, Cross as n, loadConversation as o, Restart as r, saveConversation as s, Arrow as t };
+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 };

package/dist/index.d.ts

@@ -30,6 +30,15 @@ interface ChatCopy {
   readonly contactLink: string;
   readonly bookStay: string;
   readonly viewRental: string;
+  /** 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. */
+  readonly matchBadge: string;
+  /** A stay's length on a card; `{n}` is the count. */
+  readonly nights: Readonly<Partial<Record<Intl.LDMLPluralRule, string>>> & {
+    readonly other: string;
+  };
   readonly total: string;
   readonly notBookable: string;
   readonly photo: string;
@@ -76,15 +85,20 @@ interface ChatCopy {
 export declare const DEFAULT_COPY: Readonly<Record<ChatLocale, ChatCopy>>;
 //#endregion
 //#region src/theme.d.ts
-/** The curated looks over one layout: `classic` (soft shadows, medium corners), `soft` (round corners,
- *  lighter shadows), `minimal` (borders instead of shadows, small corners). */
+/** The curated looks over one layout, each relative to the site's corner radius: `classic` (soft
+ *  shadows), `soft` (rounder corners, lighter shadows), `minimal` (borders instead of shadows, tighter
+ *  corners). */
 export declare const CHAT_THEMES: readonly ["classic", "soft", "minimal"];
 type ChatTheme = (typeof CHAT_THEMES)[number];
-/** A site's colours, any CSS colour. `primary` fills buttons, the send button and the chat's mark, and
- *  runs around the entry pill; `secondary` tints the visitor's messages and the suggestions. */
+/** Colours for the chat, any CSS colour, over the ones it takes from the site's tokens. `primary`
+ *  fills buttons, the send button and the chat's mark, and runs around the entry pill; `secondary`
+ *  tints the visitor's messages and the suggestions. */
 interface ChatColors {
   readonly primary?: string;
   readonly secondary?: string;
+  /** The small marks: the chat's name and sparkle, a card's place, the icons, the ring round the
+   *  entry pill. The primary when unset. */
+  readonly accent?: string;
 }
 //#endregion
 //#region src/WebsiteChat.d.ts