@clubmed/trident-ui 2.1.0-beta.2 → 2.1.0-beta.4

package/ui/chat/ChatMessageActions.d.ts

@@ -0,0 +1,23 @@
+export interface ChatMessageLabels {
+    replay: string;
+    edit: string;
+    copy: string;
+    /** Replaces the copy label while the copy confirmation is shown */
+    copied: string;
+    /** Cancels the in-place edition of a message */
+    cancel: string;
+    /** Submits the edited message */
+    send: string;
+}
+export interface ChatMessageActionsProps {
+    onReplay?: () => void;
+    onEdit?: () => void;
+    /** May be async: the confirmation is shown once the returned promise is resolved */
+    onCopy?: () => void | Promise<void>;
+    labels?: Partial<ChatMessageLabels>;
+}
+/**
+ * Actions of a user message. They are revealed when the message is hovered or focused (the parent
+ * must be a `group/message`), and always visible on devices without hover.
+ */
+export declare function ChatMessageActions({ onReplay, onEdit, onCopy, labels, }: Readonly<ChatMessageActionsProps>): import("react/jsx-runtime").JSX.Element;

package/ui/chat/ChatMessageActions.js

@@ -0,0 +1,69 @@
+"use client";
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Icon as a } from "@clubmed/trident-icons";
+//#region lib/ui/chat/ChatMessageActions.tsx
+var o = 2e3, s = "flex size-32 items-center justify-center rounded-full text-darkGrey outline-none hover:bg-lightSand hover:text-black focus-visible:ring-4 focus-visible:ring-black";
+function c(r) {
+	let [i, a] = n(!1), s = t(void 0);
+	e(() => () => clearTimeout(s.current), []);
+	async function c() {
+		try {
+			await r?.();
+		} catch {
+			return;
+		}
+		a(!0), clearTimeout(s.current), s.current = setTimeout(() => a(!1), o);
+	}
+	return {
+		copied: i,
+		copy: c
+	};
+}
+function l({ onReplay: e, onEdit: t, onCopy: n, labels: o }) {
+	let { replay: l = "Replay", edit: u = "Edit", copy: d = "Copy", copied: f = "Copied" } = o ?? {}, { copied: p, copy: m } = c(n);
+	return /* @__PURE__ */ i("div", {
+		role: "toolbar",
+		"aria-label": "Message actions",
+		className: "flex gap-4 opacity-0 transition-opacity duration-250 group-focus-within/message:opacity-100 group-hover/message:opacity-100 [@media(hover:none)]:opacity-100",
+		children: [
+			e && /* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": l,
+				title: l,
+				onClick: e,
+				className: s,
+				children: /* @__PURE__ */ r(a, {
+					name: "Reload",
+					width: "16px"
+				})
+			}),
+			t && /* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": u,
+				title: u,
+				onClick: t,
+				className: s,
+				children: /* @__PURE__ */ r(a, {
+					name: "Edit",
+					width: "16px"
+				})
+			}),
+			n && /* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": p ? f : d,
+				title: p ? f : d,
+				onClick: m,
+				className: s,
+				children: /* @__PURE__ */ r(a, {
+					name: p ? "CheckDefault" : "Clipboard",
+					width: "16px"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { l as ChatMessageActions };
+
+//# sourceMappingURL=ChatMessageActions.js.map

package/ui/chat/ChatMessageActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageActions.js","names":[],"sources":["../../../lib/ui/chat/ChatMessageActions.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { useEffect, useRef, useState } from 'react';\n\nexport interface ChatMessageLabels {\n  replay: string;\n  edit: string;\n  copy: string;\n  /** Replaces the copy label while the copy confirmation is shown */\n  copied: string;\n  /** Cancels the in-place edition of a message */\n  cancel: string;\n  /** Submits the edited message */\n  send: string;\n}\n\nexport interface ChatMessageActionsProps {\n  onReplay?: () => void;\n  onEdit?: () => void;\n  /** May be async: the confirmation is shown once the returned promise is resolved */\n  onCopy?: () => void | Promise<void>;\n  labels?: Partial<ChatMessageLabels>;\n}\n\nconst COPIED_DURATION_MS = 2000;\n\nconst BUTTON_CLASSES =\n  'flex size-32 items-center justify-center rounded-full text-darkGrey outline-none hover:bg-lightSand hover:text-black focus-visible:ring-4 focus-visible:ring-black';\n\n/** Shows a confirmation for a short time once the copy succeeded. */\nfunction useCopyConfirmation(onCopy?: () => void | Promise<void>) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  async function copy() {\n    try {\n      await onCopy?.();\n    } catch {\n      return;\n    }\n\n    setCopied(true);\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopied(false), COPIED_DURATION_MS);\n  }\n\n  return { copied, copy };\n}\n\n/**\n * Actions of a user message. They are revealed when the message is hovered or focused (the parent\n * must be a `group/message`), and always visible on devices without hover.\n */\nexport function ChatMessageActions({\n  onReplay,\n  onEdit,\n  onCopy,\n  labels,\n}: Readonly<ChatMessageActionsProps>) {\n  const {\n    replay = 'Replay',\n    edit = 'Edit',\n    copy = 'Copy',\n    copied: copiedLabel = 'Copied',\n  } = labels ?? {};\n  const { copied, copy: handleCopy } = useCopyConfirmation(onCopy);\n\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label=\"Message actions\"\n      className=\"flex gap-4 opacity-0 transition-opacity duration-250 group-focus-within/message:opacity-100 group-hover/message:opacity-100 [@media(hover:none)]:opacity-100\"\n    >\n      {onReplay && (\n        <button\n          type=\"button\"\n          aria-label={replay}\n          title={replay}\n          onClick={onReplay}\n          className={BUTTON_CLASSES}\n        >\n          <Icon name=\"Reload\" width=\"16px\" />\n        </button>\n      )}\n      {onEdit && (\n        <button\n          type=\"button\"\n          aria-label={edit}\n          title={edit}\n          onClick={onEdit}\n          className={BUTTON_CLASSES}\n        >\n          <Icon name=\"Edit\" width=\"16px\" />\n        </button>\n      )}\n      {onCopy && (\n        <button\n          type=\"button\"\n          aria-label={copied ? copiedLabel : copy}\n          title={copied ? copiedLabel : copy}\n          onClick={handleCopy}\n          className={BUTTON_CLASSES}\n        >\n          <Icon name={copied ? 'CheckDefault' : 'Clipboard'} width=\"16px\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAyBA,IAAM,IAAqB,KAErB,IACJ;AAGF,SAAS,EAAoB,GAAqC;CAChE,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAQ,EAAsC,KAAA,EAAU;AAE9D,eAAsB,aAAa,EAAM,QAAQ,EAAE,EAAE,CAAC;CAEtD,eAAe,IAAO;AACpB,MAAI;AACF,SAAM,KAAU;UACV;AACN;;AAKF,EAFA,EAAU,GAAK,EACf,aAAa,EAAM,QAAQ,EAC3B,EAAM,UAAU,iBAAiB,EAAU,GAAM,EAAE,EAAmB;;AAGxE,QAAO;EAAE;EAAQ;EAAM;;AAOzB,SAAgB,EAAmB,EACjC,aACA,WACA,WACA,aACoC;CACpC,IAAM,EACJ,YAAS,UACT,UAAO,QACP,UAAO,QACP,QAAQ,IAAc,aACpB,KAAU,EAAE,EACV,EAAE,WAAQ,MAAM,MAAe,EAAoB,EAAO;AAEhE,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,WAAU;YAHZ;GAKG,KACC,kBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,OAAO;IACP,SAAS;IACT,WAAW;cAEX,kBAAC,GAAD;KAAM,MAAK;KAAS,OAAM;KAAS,CAAA;IAC5B,CAAA;GAEV,KACC,kBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,OAAO;IACP,SAAS;IACT,WAAW;cAEX,kBAAC,GAAD;KAAM,MAAK;KAAO,OAAM;KAAS,CAAA;IAC1B,CAAA;GAEV,KACC,kBAAC,UAAD;IACE,MAAK;IACL,cAAY,IAAS,IAAc;IACnC,OAAO,IAAS,IAAc;IAC9B,SAAS;IACT,WAAW;cAEX,kBAAC,GAAD;KAAM,MAAM,IAAS,iBAAiB;KAAa,OAAM;KAAS,CAAA;IAC3D,CAAA"}

package/ui/chat/ChatMessageEditor.d.ts

@@ -0,0 +1,9 @@
+import { ChatMessageLabels } from './ChatMessageActions';
+export interface ChatMessageEditorProps {
+    value: string;
+    labels?: Partial<ChatMessageLabels>;
+    onCancel: () => void;
+    onSubmit: (value: string) => void;
+}
+/** In-place editor of a user message: edit the text, then cancel or send it again. */
+export declare function ChatMessageEditor({ value, labels, onCancel, onSubmit, }: Readonly<ChatMessageEditorProps>): import("react/jsx-runtime").JSX.Element;

package/ui/chat/ChatMessageEditor.js

@@ -0,0 +1,57 @@
+"use client";
+import { Button as e } from "../buttons/Button.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/ui/chat/ChatMessageEditor.tsx
+function o({ value: o, labels: s, onCancel: c, onSubmit: l }) {
+	let { cancel: u = "Cancel", send: d = "Send" } = s ?? {}, [f, p] = r(o), m = n(null), h = f.trim(), g = h.length > 0 && h !== o.trim();
+	t(() => {
+		let e = m.current;
+		e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
+	}, [f]), t(() => {
+		let e = m.current;
+		e?.focus(), e?.setSelectionRange(e.value.length, e.value.length);
+	}, []);
+	function _() {
+		g && l(h);
+	}
+	function v(e) {
+		e.preventDefault(), _();
+	}
+	function y(e) {
+		e.key === "Escape" ? (e.preventDefault(), c()) : e.key === "Enter" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), _());
+	}
+	return /* @__PURE__ */ a("form", {
+		onSubmit: v,
+		className: "bg-lightSand flex w-full flex-col gap-12 rounded-32 px-24 py-16",
+		children: [/* @__PURE__ */ i("textarea", {
+			ref: m,
+			value: f,
+			onChange: (e) => p(e.target.value),
+			onKeyDown: y,
+			"aria-label": "Edit message",
+			rows: 1,
+			className: "text-b3 scrollbar-hidden max-h-[40vh] w-full resize-none bg-transparent text-black outline-none"
+		}), /* @__PURE__ */ a("div", {
+			className: "flex justify-end gap-8",
+			children: [/* @__PURE__ */ i(e, {
+				type: "button",
+				size: "small",
+				theme: "outline",
+				color: "black",
+				onClick: c,
+				children: u
+			}), /* @__PURE__ */ i(e, {
+				type: "submit",
+				size: "small",
+				color: "black",
+				disabled: !g,
+				children: d
+			})]
+		})]
+	});
+}
+//#endregion
+export { o as ChatMessageEditor };
+
+//# sourceMappingURL=ChatMessageEditor.js.map

package/ui/chat/ChatMessageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageEditor.js","names":[],"sources":["../../../lib/ui/chat/ChatMessageEditor.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport type { FormEvent, KeyboardEvent } from 'react';\nimport { Button } from '../buttons/Button';\nimport type { ChatMessageLabels } from './ChatMessageActions';\n\nexport interface ChatMessageEditorProps {\n  value: string;\n  labels?: Partial<ChatMessageLabels>;\n  onCancel: () => void;\n  onSubmit: (value: string) => void;\n}\n\n/** In-place editor of a user message: edit the text, then cancel or send it again. */\nexport function ChatMessageEditor({\n  value,\n  labels,\n  onCancel,\n  onSubmit,\n}: Readonly<ChatMessageEditorProps>) {\n  const { cancel = 'Cancel', send = 'Send' } = labels ?? {};\n  const [draft, setDraft] = useState(value);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const trimmed = draft.trim();\n  const canSubmit = trimmed.length > 0 && trimmed !== value.trim();\n\n  useEffect(() => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n\n    textarea.style.height = 'auto';\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  }, [draft]);\n\n  useEffect(() => {\n    const textarea = textareaRef.current;\n    textarea?.focus();\n    textarea?.setSelectionRange(textarea.value.length, textarea.value.length);\n  }, []);\n\n  function submit() {\n    if (canSubmit) onSubmit(trimmed);\n  }\n\n  function handleSubmit(e: FormEvent) {\n    e.preventDefault();\n    submit();\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      onCancel();\n    } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      submit();\n    }\n  }\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className=\"bg-lightSand flex w-full flex-col gap-12 rounded-32 px-24 py-16\"\n    >\n      <textarea\n        ref={textareaRef}\n        value={draft}\n        onChange={(e) => setDraft(e.target.value)}\n        onKeyDown={handleKeyDown}\n        aria-label=\"Edit message\"\n        rows={1}\n        className=\"text-b3 scrollbar-hidden max-h-[40vh] w-full resize-none bg-transparent text-black outline-none\"\n      />\n      <div className=\"flex justify-end gap-8\">\n        <Button type=\"button\" size=\"small\" theme=\"outline\" color=\"black\" onClick={onCancel}>\n          {cancel}\n        </Button>\n        <Button type=\"submit\" size=\"small\" color=\"black\" disabled={!canSubmit}>\n          {send}\n        </Button>\n      </div>\n    </form>\n  );\n}\n"],"mappings":";;;;;AAeA,SAAgB,EAAkB,EAChC,UACA,WACA,aACA,eACmC;CACnC,IAAM,EAAE,YAAS,UAAU,UAAO,WAAW,KAAU,EAAE,EACnD,CAAC,GAAO,KAAY,EAAS,EAAM,EACnC,IAAc,EAA4B,KAAK,EAC/C,IAAU,EAAM,MAAM,EACtB,IAAY,EAAQ,SAAS,KAAK,MAAY,EAAM,MAAM;AAUhE,CARA,QAAgB;EACd,IAAM,IAAW,EAAY;AACxB,QAEL,EAAS,MAAM,SAAS,QACxB,EAAS,MAAM,SAAS,GAAG,EAAS,aAAa;IAChD,CAAC,EAAM,CAAC,EAEX,QAAgB;EACd,IAAM,IAAW,EAAY;AAE7B,EADA,GAAU,OAAO,EACjB,GAAU,kBAAkB,EAAS,MAAM,QAAQ,EAAS,MAAM,OAAO;IACxE,EAAE,CAAC;CAEN,SAAS,IAAS;AAChB,EAAI,KAAW,EAAS,EAAQ;;CAGlC,SAAS,EAAa,GAAc;AAElC,EADA,EAAE,gBAAgB,EAClB,GAAQ;;CAGV,SAAS,EAAc,GAAuC;AAC5D,EAAI,EAAE,QAAQ,YACZ,EAAE,gBAAgB,EAClB,GAAU,IACD,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,aAC9C,EAAE,gBAAgB,EAClB,GAAQ;;AAIZ,QACE,kBAAC,QAAD;EACE,UAAU;EACV,WAAU;YAFZ,CAIE,kBAAC,YAAD;GACE,KAAK;GACL,OAAO;GACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;GACzC,WAAW;GACX,cAAW;GACX,MAAM;GACN,WAAU;GACV,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAQ,OAAM;IAAU,OAAM;IAAQ,SAAS;cACvE;IACM,CAAA,EACT,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAQ,OAAM;IAAQ,UAAU,CAAC;cACzD;IACM,CAAA,CAAA"}

package/ui/chat/ChatTypingIndicator.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const ChatTypingIndicator: import('react').NamedExoticComponent<HTMLAttributes<HTMLDivElement>>;

package/ui/chat/ChatTypingIndicator.js

@@ -0,0 +1,30 @@
+import { twMerge as e } from "../helpers/twMerge.js";
+import { memo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/ui/chat/ChatTypingIndicator.tsx
+var i = t(function({ className: t, ...i }) {
+	return /* @__PURE__ */ r("div", {
+		role: "status",
+		"aria-label": "Typing",
+		...i,
+		className: e("flex items-center gap-4 h-34 w-66 overflow-hidden rounded-pill bg-pearl px-20", t),
+		children: [
+			/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "size-6 rounded-full bg-black animate-bounce [animation-delay:-300ms]"
+			}),
+			/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "size-6 rounded-full bg-black animate-bounce [animation-delay:-150ms]"
+			}),
+			/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "size-6 rounded-full bg-black animate-bounce"
+			})
+		]
+	});
+});
+//#endregion
+export { i as ChatTypingIndicator };
+
+//# sourceMappingURL=ChatTypingIndicator.js.map

package/ui/chat/ChatTypingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTypingIndicator.js","names":[],"sources":["../../../lib/ui/chat/ChatTypingIndicator.tsx"],"sourcesContent":["import { memo, type HTMLAttributes } from 'react';\nimport { twMerge } from '../helpers/twMerge';\n\nexport const ChatTypingIndicator = memo(function ChatTypingIndicator({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Typing\"\n      {...props}\n      className={twMerge(\n        'flex items-center gap-4 h-34 w-66 overflow-hidden rounded-pill bg-pearl px-20',\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className=\"size-6 rounded-full bg-black animate-bounce [animation-delay:-300ms]\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className=\"size-6 rounded-full bg-black animate-bounce [animation-delay:-150ms]\"\n      />\n      <span aria-hidden=\"true\" className=\"size-6 rounded-full bg-black animate-bounce\" />\n    </div>\n  );\n});\n"],"mappings":";;;;AAGA,IAAa,IAAsB,EAAK,SAA6B,EACnE,cACA,GAAG,KAC8B;AACjC,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,GAAI;EACJ,WAAW,EACT,iFACA,EACD;YAPH;GASE,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACV,CAAA;GACF,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACV,CAAA;GACF,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IAAgD,CAAA;GAC/E;;EAER"}

package/ui/chat/ChatWindow.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { ChatMessageSender } from './ChatMessage';
+import { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';
+import { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';
+import { ChatWindowQuoteItem } from './ChatWindowQuote';
+import { ChatHeaderProps } from './ChatHeader';
+import { ChatBodyProps } from './ChatBody';
+import { ChatInputProps } from './ChatInput';
+export type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels, ChatWindowQuoteItem };
+export interface ChatWindowMessage {
+    id: string;
+    sender: ChatMessageSender;
+    content: ReactNode;
+}
+interface ChatWindowInputProps {
+    inputValue: ChatInputProps['value'];
+    inputPlaceholder?: ChatInputProps['placeholder'];
+    onInputChange: ChatInputProps['onValueChange'];
+    onSubmit: ChatInputProps['onSubmit'];
+    onAudioClick?: ChatInputProps['onAudioClick'];
+    submitKey?: ChatInputProps['submitKey'];
+    isStreaming?: ChatInputProps['isStreaming'];
+    onStop?: ChatInputProps['onStop'];
+}
+interface ChatWindowBaseProps extends ChatHeaderProps {
+    onClose?: () => void;
+}
+export type ChatWindowProps = ChatWindowBaseProps & (({
+    children: ReactNode;
+} & Partial<ChatBodyProps> & Partial<ChatWindowInputProps>) | (ChatBodyProps & ChatWindowInputProps & {
+    children?: undefined;
+}));
+export interface ChatWindowHandle {
+    askForFeedback: () => void;
+    showQuotes: (quotes: ChatWindowQuoteItem[]) => void;
+}
+export declare const ChatWindow: import('react').ForwardRefExoticComponent<ChatWindowProps & import('react').RefAttributes<ChatWindowHandle>>;

package/ui/chat/ChatWindow.js

@@ -0,0 +1,65 @@
+"use client";
+import { twMerge as e } from "../helpers/twMerge.js";
+import { ChatBody as t } from "./ChatBody.js";
+import { ChatInput as n } from "./ChatInput.js";
+import { ChatHeader as r } from "./ChatHeader.js";
+import { forwardRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Icon as c } from "@clubmed/trident-icons";
+//#region lib/ui/chat/ChatWindow.tsx
+var l = i(function({ title: i, onClose: l, logo: u, className: d, children: f, inputValue: p, inputPlaceholder: m, onInputChange: h, onSubmit: g, onAudioClick: _, submitKey: v, isStreaming: y, onStop: b, onMessageReplay: x, onMessageEdit: S, onMessageCopy: C, messageActionLabels: w, greeting: T, messages: E, isTyping: D, onFeedbackRate: O, csatLabels: k, csatRenderRatingLabel: A, csatThankYouLabels: j, onQuoteCtaClick: M, ...N }, P) {
+	return /* @__PURE__ */ s("div", {
+		...N,
+		className: e("flex flex-col gap-20 items-center", d),
+		children: [/* @__PURE__ */ o("div", {
+			className: "chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden",
+			children: f ?? /* @__PURE__ */ s(a, { children: [
+				/* @__PURE__ */ o(r, {
+					title: i,
+					logo: u
+				}),
+				/* @__PURE__ */ o(t, {
+					greeting: T,
+					messages: E,
+					isTyping: D,
+					onMessageReplay: x,
+					onMessageEdit: S,
+					onMessageCopy: C,
+					messageActionLabels: w,
+					onFeedbackRate: O,
+					csatLabels: k,
+					csatRenderRatingLabel: A,
+					csatThankYouLabels: j,
+					onQuoteCtaClick: M,
+					ref: P
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "shrink-0 px-8 pb-8 pt-12",
+					children: /* @__PURE__ */ o(n, {
+						value: p,
+						placeholder: m,
+						onValueChange: h,
+						onSubmit: g,
+						onAudioClick: _,
+						submitKey: v,
+						isStreaming: y,
+						onStop: b
+					})
+				})
+			] })
+		}), l && /* @__PURE__ */ o("button", {
+			type: "button",
+			"aria-label": "Close chat",
+			onClick: l,
+			className: "flex items-center justify-center size-48 rounded-full bg-black border border-black text-white shrink-0 hover:opacity-80 transition-opacity outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
+			children: /* @__PURE__ */ o(c, {
+				name: "CrossDefault",
+				width: "24px"
+			})
+		})]
+	});
+});
+//#endregion
+export { l as ChatWindow };
+
+//# sourceMappingURL=ChatWindow.js.map

package/ui/chat/ChatWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.js","names":[],"sources":["../../../lib/ui/chat/ChatWindow.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { forwardRef, type ReactNode } from 'react';\nimport { twMerge } from '../helpers/twMerge';\nimport type { ChatMessageSender } from './ChatMessage';\nimport type { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';\nimport type { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';\nimport type { ChatWindowQuoteItem } from './ChatWindowQuote';\nimport { ChatHeader, type ChatHeaderProps } from './ChatHeader';\nimport { ChatBody, type ChatBodyProps } from './ChatBody';\nimport { ChatInput, type ChatInputProps } from './ChatInput';\n\nexport type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels, ChatWindowQuoteItem };\n\nexport interface ChatWindowMessage {\n  id: string;\n  sender: ChatMessageSender;\n  content: ReactNode;\n}\n\ninterface ChatWindowInputProps {\n  inputValue: ChatInputProps['value'];\n  inputPlaceholder?: ChatInputProps['placeholder'];\n  onInputChange: ChatInputProps['onValueChange'];\n  onSubmit: ChatInputProps['onSubmit'];\n  onAudioClick?: ChatInputProps['onAudioClick'];\n  submitKey?: ChatInputProps['submitKey'];\n  isStreaming?: ChatInputProps['isStreaming'];\n  onStop?: ChatInputProps['onStop'];\n}\n\ninterface ChatWindowBaseProps extends ChatHeaderProps {\n  onClose?: () => void;\n}\n\n// Either compose the panel from `ChatHeader`/`ChatBody`/`ChatInput` children,\n// or fall back to the opaque props-only form — in which case the message-log\n// and input props become required.\nexport type ChatWindowProps = ChatWindowBaseProps &\n  (\n    | ({ children: ReactNode } & Partial<ChatBodyProps> & Partial<ChatWindowInputProps>)\n    | (ChatBodyProps & ChatWindowInputProps & { children?: undefined })\n  );\n\nexport interface ChatWindowHandle {\n  askForFeedback: () => void;\n  showQuotes: (quotes: ChatWindowQuoteItem[]) => void;\n}\n\nexport const ChatWindow = forwardRef<ChatWindowHandle, ChatWindowProps>(function ChatWindow(\n  {\n    title,\n    onClose,\n    logo,\n    className,\n    children,\n    inputValue,\n    inputPlaceholder,\n    onInputChange,\n    onSubmit,\n    onAudioClick,\n    submitKey,\n    isStreaming,\n    onStop,\n    onMessageReplay,\n    onMessageEdit,\n    onMessageCopy,\n    messageActionLabels,\n    greeting,\n    messages,\n    isTyping,\n    onFeedbackRate,\n    csatLabels,\n    csatRenderRatingLabel,\n    csatThankYouLabels,\n    onQuoteCtaClick,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div {...props} className={twMerge('flex flex-col gap-20 items-center', className)}>\n      <div className=\"chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden\">\n        {children ?? (\n          <>\n            <ChatHeader title={title} logo={logo} />\n            <ChatBody\n              greeting={greeting}\n              messages={messages!}\n              isTyping={isTyping}\n              onMessageReplay={onMessageReplay}\n              onMessageEdit={onMessageEdit}\n              onMessageCopy={onMessageCopy}\n              messageActionLabels={messageActionLabels}\n              onFeedbackRate={onFeedbackRate}\n              csatLabels={csatLabels}\n              csatRenderRatingLabel={csatRenderRatingLabel}\n              csatThankYouLabels={csatThankYouLabels}\n              onQuoteCtaClick={onQuoteCtaClick}\n              ref={ref}\n            />\n            <div className=\"shrink-0 px-8 pb-8 pt-12\">\n              <ChatInput\n                value={inputValue!}\n                placeholder={inputPlaceholder}\n                onValueChange={onInputChange!}\n                onSubmit={onSubmit!}\n                onAudioClick={onAudioClick}\n                submitKey={submitKey}\n                isStreaming={isStreaming}\n                onStop={onStop}\n              />\n            </div>\n          </>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label=\"Close chat\"\n          onClick={onClose}\n          className=\"flex items-center justify-center size-48 rounded-full bg-black border border-black text-white shrink-0 hover:opacity-80 transition-opacity outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;AAkDA,IAAa,IAAa,EAA8C,SACtE,EACE,UACA,YACA,SACA,cACA,aACA,eACA,qBACA,kBACA,aACA,iBACA,cACA,gBACA,WACA,oBACA,kBACA,kBACA,wBACA,aACA,aACA,aACA,mBACA,eACA,0BACA,uBACA,oBACA,GAAG,KAEL,GACA;AACA,QACE,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAQ,qCAAqC,EAAU;YAAlF,CACE,kBAAC,OAAD;GAAK,WAAU;aACZ,KACC,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,GAAD;KAAmB;KAAa;KAAQ,CAAA;IACxC,kBAAC,GAAD;KACY;KACA;KACA;KACO;KACF;KACA;KACM;KACL;KACJ;KACW;KACH;KACH;KACZ;KACL,CAAA;IACF,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,OAAO;MACP,aAAa;MACb,eAAe;MACL;MACI;MACH;MACE;MACL;MACR,CAAA;KACE,CAAA;IACL,EAAA,CAAA;GAED,CAAA,EAEL,KACC,kBAAC,UAAD;GACE,MAAK;GACL,cAAW;GACX,SAAS;GACT,WAAU;aAEV,kBAAC,GAAD;IAAM,MAAK;IAAe,OAAM;IAAS,CAAA;GAClC,CAAA,CAAA;;EAIf"}

package/ui/chat/ChatWindowCsatPrompt.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface ChatWindowCsatPromptLabels {
+    intro: string;
+    question: string;
+    questionNote: string;
+    groupAriaLabel: string;
+    starLabels: [string, string, string, string, string];
+}
+export interface ChatWindowCsatPromptProps {
+    onRate: (rating: number) => void;
+    labels: ChatWindowCsatPromptLabels;
+    renderRatingLabel: (rating: number) => ReactNode;
+    className?: string;
+}
+export declare function ChatWindowCsatPrompt({ onRate, labels, renderRatingLabel, className, }: ChatWindowCsatPromptProps): import("react/jsx-runtime").JSX.Element;

package/ui/chat/ChatWindowCsatPrompt.js

@@ -0,0 +1,71 @@
+"use client";
+import { twMerge as e } from "../helpers/twMerge.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@clubmed/trident-icons";
+//#region lib/ui/chat/ChatWindowCsatPrompt.tsx
+function a({ onRate: a, labels: o, renderRatingLabel: s, className: c }) {
+	let [l, u] = t(0), [d, f] = t(0);
+	function p(e) {
+		d > 0 || (f(e), a(e));
+	}
+	let m = l || d, h = d > 0;
+	return /* @__PURE__ */ r("div", {
+		className: e("flex flex-col gap-20 px-20", c),
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ n("p", {
+					className: "text-b3 text-black",
+					children: o.intro
+				}), /* @__PURE__ */ r("p", {
+					className: "text-b3 text-black",
+					children: [
+						o.question,
+						" ",
+						/* @__PURE__ */ n("span", {
+							className: "text-b4 text-black",
+							children: o.questionNote
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ n("div", {
+				role: "group",
+				"aria-label": o.groupAriaLabel,
+				className: "flex items-center gap-0",
+				children: o.starLabels.map((t, r) => {
+					let a = r + 1, o = a <= m;
+					return /* @__PURE__ */ n("button", {
+						type: "button",
+						"aria-label": `${a} star${a > 1 ? "s" : ""} — ${t}`,
+						"aria-pressed": d === a,
+						"aria-disabled": h,
+						onClick: () => p(a),
+						onMouseEnter: () => {
+							h || u(a);
+						},
+						onMouseLeave: () => {
+							h || u(0);
+						},
+						className: e("flex items-center justify-center size-48 rounded-full transition-colors outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", h ? "cursor-default" : "hover:bg-lightSand"),
+						children: /* @__PURE__ */ n(i, {
+							name: o ? "StarFilled" : "StarOutlined",
+							width: "24px",
+							className: "text-black"
+						})
+					}, a);
+				})
+			}),
+			m > 0 && /* @__PURE__ */ n("p", {
+				className: "text-b4 text-darkGrey",
+				"aria-live": "polite",
+				children: s(m)
+			})
+		]
+	});
+}
+//#endregion
+export { a as ChatWindowCsatPrompt };
+
+//# sourceMappingURL=ChatWindowCsatPrompt.js.map

package/ui/chat/ChatWindowCsatPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindowCsatPrompt.js","names":[],"sources":["../../../lib/ui/chat/ChatWindowCsatPrompt.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { twMerge } from '../helpers/twMerge';\n\nexport interface ChatWindowCsatPromptLabels {\n  intro: string;\n  question: string;\n  questionNote: string;\n  groupAriaLabel: string;\n  starLabels: [string, string, string, string, string];\n}\n\nexport interface ChatWindowCsatPromptProps {\n  onRate: (rating: number) => void;\n  labels: ChatWindowCsatPromptLabels;\n  renderRatingLabel: (rating: number) => ReactNode;\n  className?: string;\n}\n\nexport function ChatWindowCsatPrompt({\n  onRate,\n  labels,\n  renderRatingLabel,\n  className,\n}: ChatWindowCsatPromptProps) {\n  const [hovered, setHovered] = useState(0);\n  const [selected, setSelected] = useState(0);\n\n  function handleSelect(rating: number) {\n    if (selected > 0) return;\n    setSelected(rating);\n    onRate(rating);\n  }\n\n  const activeRating = hovered || selected;\n  const isLocked = selected > 0;\n\n  return (\n    <div className={twMerge('flex flex-col gap-20 px-20', className)}>\n      <div className=\"flex flex-col gap-4\">\n        <p className=\"text-b3 text-black\">{labels.intro}</p>\n        <p className=\"text-b3 text-black\">\n          {labels.question} <span className=\"text-b4 text-black\">{labels.questionNote}</span>\n        </p>\n      </div>\n\n      <div role=\"group\" aria-label={labels.groupAriaLabel} className=\"flex items-center gap-0\">\n        {labels.starLabels.map((label, i) => {\n          const rating = i + 1;\n          const isFilled = rating <= activeRating;\n          return (\n            <button\n              key={rating}\n              type=\"button\"\n              aria-label={`${rating} star${rating > 1 ? 's' : ''} — ${label}`}\n              aria-pressed={selected === rating}\n              aria-disabled={isLocked}\n              onClick={() => handleSelect(rating)}\n              onMouseEnter={() => {\n                if (!isLocked) setHovered(rating);\n              }}\n              onMouseLeave={() => {\n                if (!isLocked) setHovered(0);\n              }}\n              className={twMerge(\n                'flex items-center justify-center size-48 rounded-full transition-colors outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n                isLocked ? 'cursor-default' : 'hover:bg-lightSand',\n              )}\n            >\n              <Icon\n                name={isFilled ? 'StarFilled' : 'StarOutlined'}\n                width=\"24px\"\n                className=\"text-black\"\n              />\n            </button>\n          );\n        })}\n      </div>\n\n      {activeRating > 0 && (\n        <p className=\"text-b4 text-darkGrey\" aria-live=\"polite\">\n          {renderRatingLabel(activeRating)}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,EAAqB,EACnC,WACA,WACA,sBACA,gBAC4B;CAC5B,IAAM,CAAC,GAAS,KAAc,EAAS,EAAE,EACnC,CAAC,GAAU,KAAe,EAAS,EAAE;CAE3C,SAAS,EAAa,GAAgB;AAChC,MAAW,MACf,EAAY,EAAO,EACnB,EAAO,EAAO;;CAGhB,IAAM,IAAe,KAAW,GAC1B,IAAW,IAAW;AAE5B,QACE,kBAAC,OAAD;EAAK,WAAW,EAAQ,8BAA8B,EAAU;YAAhE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAAsB,EAAO;KAAU,CAAA,EACpD,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAO;MAAS;MAAC,kBAAC,QAAD;OAAM,WAAU;iBAAsB,EAAO;OAAoB,CAAA;;;;GAIvF,kBAAC,OAAD;IAAK,MAAK;IAAQ,cAAY,EAAO;IAAgB,WAAU;cAC5D,EAAO,WAAW,KAAK,GAAO,MAAM;KACnC,IAAM,IAAS,IAAI,GACb,IAAW,KAAU;AAC3B,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,cAAY,GAAG,EAAO,OAAO,IAAS,IAAI,MAAM,GAAG,KAAK;MACxD,gBAAc,MAAa;MAC3B,iBAAe;MACf,eAAe,EAAa,EAAO;MACnC,oBAAoB;AAClB,OAAK,KAAU,EAAW,EAAO;;MAEnC,oBAAoB;AAClB,OAAK,KAAU,EAAW,EAAE;;MAE9B,WAAW,EACT,kKACA,IAAW,mBAAmB,qBAC/B;gBAED,kBAAC,GAAD;OACE,MAAM,IAAW,eAAe;OAChC,OAAM;OACN,WAAU;OACV,CAAA;MACK,EAtBF,EAsBE;;IAGT,CAAA;GAEL,IAAe,KACd,kBAAC,KAAD;IAAG,WAAU;IAAwB,aAAU;cAC5C,EAAkB,EAAA;IACjB,CAAA"}

package/ui/chat/ChatWindowCsatThankYou.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export interface ChatWindowCsatThankYouLabels {
+    title: string;
+    body: string;
+}
+export interface ChatWindowCsatThankYouProps extends HTMLAttributes<HTMLDivElement> {
+    labels: ChatWindowCsatThankYouLabels;
+}
+export declare function ChatWindowCsatThankYou({ labels, className, ...props }: ChatWindowCsatThankYouProps): import("react/jsx-runtime").JSX.Element;

package/ui/chat/ChatWindowCsatThankYou.js

@@ -0,0 +1,29 @@
+"use client";
+import { twMerge as e } from "../helpers/twMerge.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Icon as r } from "@clubmed/trident-icons";
+//#region lib/ui/chat/ChatWindowCsatThankYou.tsx
+function i({ labels: i, className: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		...o,
+		className: e("flex flex-col gap-20 px-20", a),
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex items-center gap-4 text-green",
+			children: [/* @__PURE__ */ t(r, {
+				name: "CheckFilled",
+				width: "24px",
+				className: "shrink-0"
+			}), /* @__PURE__ */ t("p", {
+				className: "text-b3 font-semibold text-black",
+				children: i.title
+			})]
+		}), /* @__PURE__ */ t("p", {
+			className: "text-b3 text-black",
+			children: i.body
+		})]
+	});
+}
+//#endregion
+export { i as ChatWindowCsatThankYou };
+
+//# sourceMappingURL=ChatWindowCsatThankYou.js.map

package/ui/chat/ChatWindowCsatThankYou.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindowCsatThankYou.js","names":[],"sources":["../../../lib/ui/chat/ChatWindowCsatThankYou.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes } from 'react';\nimport { twMerge } from '../helpers/twMerge';\n\nexport interface ChatWindowCsatThankYouLabels {\n  title: string;\n  body: string;\n}\n\nexport interface ChatWindowCsatThankYouProps extends HTMLAttributes<HTMLDivElement> {\n  labels: ChatWindowCsatThankYouLabels;\n}\n\nexport function ChatWindowCsatThankYou({\n  labels,\n  className,\n  ...props\n}: ChatWindowCsatThankYouProps) {\n  return (\n    <div {...props} className={twMerge('flex flex-col gap-20 px-20', className)}>\n      <div className=\"flex items-center gap-4 text-green\">\n        <Icon name=\"CheckFilled\" width=\"24px\" className=\"shrink-0\" />\n        <p className=\"text-b3 font-semibold text-black\">{labels.title}</p>\n      </div>\n      <p className=\"text-b3 text-black\">{labels.body}</p>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAeA,SAAgB,EAAuB,EACrC,WACA,cACA,GAAG,KAC2B;AAC9B,QACE,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAQ,8BAA8B,EAAU;YAA3E,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAM,MAAK;IAAc,OAAM;IAAO,WAAU;IAAa,CAAA,EAC7D,kBAAC,KAAD;IAAG,WAAU;cAAoC,EAAO;IAAU,CAAA,CAAA;MAEpE,kBAAC,KAAD;GAAG,WAAU;aAAsB,EAAO;GAAS,CAAA,CAAA"}

package/ui/chat/ChatWindowQuote.d.ts

@@ -0,0 +1,22 @@
+export interface ChatWindowQuoteItem {
+    id: string;
+    resortName: string;
+    country: string;
+    imageUrl: string;
+    /** Date range, e.g. "15 June 2026 to 24 June 2026" */
+    dateRange: string;
+    /** Pax info, e.g. "for 2 adults 2 children" */
+    pax: string;
+    /** CTA button label. Defaults to "See prices" */
+    ctaLabel?: string;
+    /** Bullet-point package items. Shown in single-quote inline mode only */
+    packageIncludes?: string[];
+    /** Free-text paragraph shown in single-quote inline mode only */
+    additionalInfo?: string;
+}
+export interface ChatWindowQuoteProps {
+    quotes: ChatWindowQuoteItem[];
+    onCtaClick?: (quote: ChatWindowQuoteItem) => void;
+    className?: string;
+}
+export declare function ChatWindowQuote({ quotes, onCtaClick, className }: ChatWindowQuoteProps): import("react/jsx-runtime").JSX.Element | null;

package/ui/chat/ChatWindowQuote.js

@@ -0,0 +1,141 @@
+"use client";
+import { Button as e } from "../buttons/Button.js";
+import { twMerge as t } from "../helpers/twMerge.js";
+import { Scrollbar as n } from "../Scrollbar.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/chat/ChatWindowQuote.tsx
+function a({ quote: t, onCtaClick: n }) {
+	return /* @__PURE__ */ i("article", {
+		"aria-label": t.resortName,
+		className: "flex flex-col bg-white border border-lightGrey rounded-32 shadow-[0px_2px_14px_0px_rgba(0,0,0,0.25)] overflow-hidden p-24 gap-16",
+		children: [/* @__PURE__ */ i("div", {
+			className: "relative h-210 w-full overflow-hidden rounded-16",
+			children: [
+				/* @__PURE__ */ r("img", {
+					src: t.imageUrl,
+					alt: "",
+					className: "absolute inset-0 size-full object-cover"
+				}),
+				/* @__PURE__ */ r("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]" }),
+				/* @__PURE__ */ i("div", {
+					className: "absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-20",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b2 font-semibold",
+						children: t.resortName
+					}), /* @__PURE__ */ r("p", {
+						className: "text-b3",
+						children: t.country
+					})]
+				})
+			]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col gap-16 items-center",
+			children: [
+				/* @__PURE__ */ i("p", {
+					className: "text-b4 font-semibold text-black text-center",
+					children: [
+						t.resortName,
+						", ",
+						t.dateRange,
+						", ",
+						t.pax
+					]
+				}),
+				/* @__PURE__ */ r(e, {
+					color: "saffron",
+					onClick: () => n?.(t),
+					children: t.ctaLabel ?? "See prices"
+				}),
+				t.packageIncludes && t.packageIncludes.length > 0 && /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-4 w-full",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b3 font-semibold text-black",
+						children: "Your All-Inclusive package includes:"
+					}), /* @__PURE__ */ r("ul", {
+						className: "flex flex-col gap-2",
+						children: t.packageIncludes.map((e) => /* @__PURE__ */ i("li", {
+							className: "text-b3 text-black",
+							children: ["• ", e]
+						}, e))
+					})]
+				}),
+				t.additionalInfo && /* @__PURE__ */ r("p", {
+					className: "text-b3 text-black",
+					children: t.additionalInfo
+				})
+			]
+		})]
+	});
+}
+function o({ quote: t, onCtaClick: n }) {
+	return /* @__PURE__ */ i("article", {
+		"aria-label": t.resortName,
+		className: "flex flex-col gap-12 items-center shrink-0 w-200",
+		children: [/* @__PURE__ */ i("div", {
+			className: "relative size-200 rounded-16 overflow-hidden",
+			children: [
+				/* @__PURE__ */ r("img", {
+					src: t.imageUrl,
+					alt: "",
+					className: "absolute inset-0 size-full object-cover"
+				}),
+				/* @__PURE__ */ r("div", { className: "absolute inset-0 rounded-16 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]" }),
+				/* @__PURE__ */ i("div", {
+					className: "absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-8",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b4 font-semibold",
+						children: t.resortName
+					}), /* @__PURE__ */ r("p", {
+						className: "text-b5",
+						children: t.country
+					})]
+				})
+			]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col gap-8 items-center",
+			children: [/* @__PURE__ */ i("p", {
+				className: "text-b5 font-semibold text-black text-center",
+				children: [
+					t.resortName,
+					/* @__PURE__ */ r("br", {}),
+					t.dateRange,
+					",",
+					/* @__PURE__ */ r("br", {}),
+					t.pax
+				]
+			}), /* @__PURE__ */ r(e, {
+				color: "black",
+				onClick: () => n?.(t),
+				children: t.ctaLabel ?? "See prices"
+			})]
+		})]
+	});
+}
+function s({ quotes: e, onCtaClick: i, className: s }) {
+	return e.length === 0 ? null : e.length === 1 ? /* @__PURE__ */ r("div", {
+		className: t(s),
+		children: /* @__PURE__ */ r(a, {
+			quote: e[0],
+			onCtaClick: i
+		})
+	}) : /* @__PURE__ */ r("div", {
+		className: t("flex flex-col gap-8", s),
+		children: /* @__PURE__ */ r(n, {
+			timelineName: "--chat-quote-scroller",
+			scrollerClassName: "pb-24",
+			scrollbarWidth: "60%",
+			"aria-label": "Quote options",
+			children: /* @__PURE__ */ r("div", {
+				className: "flex gap-12",
+				children: e.map((e) => /* @__PURE__ */ r(o, {
+					quote: e,
+					onCtaClick: i
+				}, e.id))
+			})
+		})
+	});
+}
+//#endregion
+export { s as ChatWindowQuote };
+
+//# sourceMappingURL=ChatWindowQuote.js.map