@clubmed/trident-ui 2.0.0-beta.6 → 2.0.0-beta.60

package/ui/ChatInput.js

@@ -0,0 +1,149 @@
+"use client";
+import { Button as e } from "./buttons/Button.js";
+import { twMerge as t } from "./helpers/twMerge.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/ui/ChatInput.tsx
+var s = 12, c = 48, l = 8;
+function u(e) {
+	let t = r(e);
+	return n(() => {
+		t.current = e;
+	}), t;
+}
+var d = 3e3;
+function f(e) {
+	let [t, a] = i(!1), [o, s] = i(!1), c = r(null), l = r(null), f = r(!1), p = u(e);
+	function m() {
+		l.current && clearTimeout(l.current);
+	}
+	function h() {
+		m(), l.current = setTimeout(() => {
+			f.current = !1, s(!1), c.current?.stop();
+		}, d);
+	}
+	n(() => {
+		let e = window.webkitSpeechRecognition ?? window.SpeechRecognition;
+		if (!e) return;
+		a(!0);
+		let t = new e();
+		return t.continuous = !0, t.interimResults = !0, t.lang = navigator.language, t.onresult = (e) => {
+			let t = Array.from(e.results).map((e) => e[0].transcript).join("");
+			p.current(t), h();
+		}, t.onend = () => {
+			if (m(), f.current) try {
+				t.start();
+			} catch {}
+			else s(!1);
+		}, t.onerror = (e) => {
+			(e.error === "not-allowed" || e.error === "aborted") && (f.current = !1, s(!1), m());
+		}, c.current = t, () => {
+			t.abort(), m();
+		};
+	}, []);
+	function g() {
+		let e = c.current;
+		e && (f.current ? (f.current = !1, e.stop()) : (f.current = !0, s(!0), e.start(), h()));
+	}
+	return {
+		isSupported: t,
+		isListening: o,
+		toggle: g
+	};
+}
+function p(e) {
+	let t = r(null);
+	return n(() => {
+		let n = t.current;
+		if (!e) {
+			n && (n.style.height = "0px");
+			return;
+		}
+		let r, i = null, a = null;
+		return navigator.mediaDevices.getUserMedia({
+			audio: !0,
+			video: !1
+		}).then((e) => {
+			i = e, a = new AudioContext();
+			let n = a.createMediaStreamSource(i), o = a.createAnalyser();
+			o.fftSize = 256, n.connect(o);
+			let s = new Uint8Array(o.frequencyBinCount);
+			function c() {
+				o.getByteFrequencyData(s);
+				let e = s.reduce((e, t) => e + t, 0) / s.length, n = t.current;
+				n && (n.style.height = `${Math.sqrt(e / 255) * 10}px`), r = requestAnimationFrame(c);
+			}
+			r = requestAnimationFrame(c);
+		}), () => {
+			cancelAnimationFrame(r), i?.getTracks().forEach((e) => e.stop()), a?.close();
+		};
+	}, [e]), t;
+}
+function m({ value: n, placeholder: r = "Ask a question?", onValueChange: u, onSubmit: d, onAudioClick: m, className: h, ...g }) {
+	let [_, v] = i(!1), y = n.trim(), b = _ || y.length > 0, { isSupported: x, isListening: S, toggle: C } = f(u), w = p(S), T = x || !!m, E = T ? c + l + c : c;
+	function D() {
+		x ? C() : m?.();
+	}
+	function O(e) {
+		e.preventDefault(), y && d();
+	}
+	return /* @__PURE__ */ o("form", {
+		onSubmit: O,
+		onMouseDown: (e) => {
+			e.target.tagName !== "TEXTAREA" && e.preventDefault();
+		},
+		...g,
+		style: { paddingBottom: b ? s + l + c : s },
+		className: t("relative flex items-start overflow-hidden bg-white border border-light-grey p-12 w-full", "transition-[padding-bottom,border-radius] duration-250 ease-out rounded-b-[24]", b ? "rounded-32" : "rounded-[40]", h),
+		children: [/* @__PURE__ */ a("textarea", {
+			rows: b ? 3 : 1,
+			value: n,
+			onChange: (e) => u(e.target.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" && (e.metaKey || e.ctrlKey) && y && (e.preventDefault(), d());
+			},
+			onFocus: () => v(!0),
+			onBlur: () => v(!1),
+			placeholder: r,
+			"aria-label": r,
+			style: { marginInlineEnd: b ? 0 : E + l },
+			className: t("scrollbar-hidden bg-transparent text-b3 py-12 outline-none resize-none w-full px-20 border border-middleGrey", "transition-[margin-inline-end,border-radius] duration-250 ease-out", b ? "text-black rounded-[20]" : "text-darkGrey placeholder:text-darkGrey rounded-[40]")
+		}), /* @__PURE__ */ o("div", {
+			style: {
+				insetInlineStart: b ? `calc(50% - ${E / 2}px)` : `calc(100% - ${s + E}px)`,
+				bottom: s
+			},
+			className: "absolute flex gap-8 items-center transition-[inset-inline-start] duration-250 ease-out",
+			children: [/* @__PURE__ */ a(e, {
+				type: "submit",
+				"aria-label": "Send message",
+				disabled: !y,
+				variant: "circle",
+				color: "saffron",
+				icon: "ArrowTailRight",
+				iconWidth: "24px"
+			}), T && /* @__PURE__ */ a(e, {
+				type: "button",
+				"aria-label": S ? "Stop recording" : "Use microphone",
+				"aria-pressed": S,
+				onClick: D,
+				variant: "circle",
+				theme: S ? "solid" : "outline",
+				color: S ? "sienna" : "black",
+				icon: "Audio",
+				iconWidth: "24px",
+				className: t("relative", S && "animate-pulse", !S && "border-lightGrey"),
+				children: /* @__PURE__ */ a("span", {
+					ref: w,
+					"aria-hidden": "true",
+					className: "bg-current absolute w-5 bottom-21",
+					style: { height: "0px" }
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { m as ChatInput };
+
+//# sourceMappingURL=ChatInput.js.map

package/ui/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","names":[],"sources":["../../lib/ui/ChatInput.tsx"],"sourcesContent":["/// <reference types=\"@types/dom-speech-recognition\" />\n'use client';\n\nimport type { FormHTMLAttributes } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from './buttons/Button';\nimport { twMerge } from './helpers/twMerge';\n\nexport interface ChatInputProps extends FormHTMLAttributes<HTMLFormElement> {\n  value: string;\n  placeholder?: string;\n  onValueChange: (value: string) => void;\n  onSubmit: () => void;\n  /** Fallback for when the browser does not support the Web Speech API */\n  onAudioClick?: () => void;\n}\n\nconst FORM_PAD = 12; // matches p-12\nconst BTN_SIZE = 48; // matches size-48\nconst BTN_GAP = 8; // matches gap-8\n\n// Keep onValueChange stable inside the recognition handler without re-creating the SR instance\nfunction useCallbackRef<T extends (...args: never[]) => unknown>(fn: T) {\n  const ref = useRef(fn);\n  useEffect(() => {\n    ref.current = fn;\n  });\n  return ref;\n}\n\nconst SILENCE_TIMEOUT_MS = 3_000;\n\nfunction useSpeechRecognition(onValueChange: (v: string) => void) {\n  const [isSupported, setIsSupported] = useState(false);\n  const [isListening, setIsListening] = useState(false);\n  const recognitionRef = useRef<SpeechRecognition | null>(null);\n  const silenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isListeningRef = useRef(false);\n  const onValueChangeRef = useCallbackRef(onValueChange);\n\n  function clearSilenceTimer() {\n    if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);\n  }\n\n  function resetSilenceTimer() {\n    clearSilenceTimer();\n    silenceTimerRef.current = setTimeout(() => {\n      isListeningRef.current = false;\n      setIsListening(false);\n      recognitionRef.current?.stop();\n    }, SILENCE_TIMEOUT_MS);\n  }\n\n  useEffect(() => {\n    const SR: typeof SpeechRecognition | undefined =\n      (window as Window & { webkitSpeechRecognition?: typeof SpeechRecognition })\n        .webkitSpeechRecognition ?? window.SpeechRecognition;\n    if (!SR) return;\n\n    setIsSupported(true);\n\n    const recognition = new SR();\n    recognition.continuous = true;\n    recognition.interimResults = true;\n    recognition.lang = navigator.language;\n\n    recognition.onresult = (event: SpeechRecognitionEvent) => {\n      const transcript = Array.from(event.results)\n        .map((r: SpeechRecognitionResult) => r[0].transcript)\n        .join('');\n      onValueChangeRef.current(transcript);\n      resetSilenceTimer();\n    };\n\n    recognition.onend = () => {\n      clearSilenceTimer();\n      // Restart automatically if the user hasn't manually stopped (browser cut us off)\n      if (isListeningRef.current) {\n        try {\n          recognition.start();\n        } catch {\n          /* already starting */\n        }\n      } else {\n        setIsListening(false);\n      }\n    };\n\n    recognition.onerror = (e: SpeechRecognitionErrorEvent) => {\n      if (e.error === 'not-allowed' || e.error === 'aborted') {\n        isListeningRef.current = false;\n        setIsListening(false);\n        clearSilenceTimer();\n      }\n    };\n\n    recognitionRef.current = recognition;\n    return () => {\n      recognition.abort();\n      clearSilenceTimer();\n    };\n    // SR detection and instance creation only needs to run once on mount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function toggle() {\n    const recognition = recognitionRef.current;\n    if (!recognition) return;\n    if (isListeningRef.current) {\n      isListeningRef.current = false;\n      recognition.stop();\n    } else {\n      isListeningRef.current = true;\n      setIsListening(true);\n      recognition.start();\n      resetSilenceTimer();\n    }\n  }\n\n  return { isSupported, isListening, toggle };\n}\n\n/**\n * Drives the audio-level indicator by writing directly to the DOM element's\n * style — avoids triggering a React re-render on every animation frame\n * (rule: rerender-use-ref-transient-values).\n *\n * Returns a ref to attach to the indicator <span>.\n */\nfunction useAudioLevel(isListening: boolean) {\n  const indicatorRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const el = indicatorRef.current;\n\n    if (!isListening) {\n      if (el) el.style.height = '0px';\n      return;\n    }\n\n    let animId: number;\n    let stream: MediaStream | null = null;\n    let ctx: AudioContext | null = null;\n\n    navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then((s) => {\n      stream = s;\n      ctx = new AudioContext();\n      const source = ctx.createMediaStreamSource(stream);\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 256;\n      source.connect(analyser);\n      const data = new Uint8Array(analyser.frequencyBinCount);\n\n      function tick() {\n        analyser.getByteFrequencyData(data);\n        const avg = data.reduce((sum, v) => sum + v, 0) / data.length;\n        // Square-root curve so quiet sounds register more visibly\n        const node = indicatorRef.current;\n        if (node) node.style.height = `${Math.sqrt(avg / 255) * 10}px`;\n        animId = requestAnimationFrame(tick);\n      }\n      animId = requestAnimationFrame(tick);\n    });\n\n    return () => {\n      cancelAnimationFrame(animId);\n      stream?.getTracks().forEach((t) => t.stop());\n      ctx?.close();\n    };\n  }, [isListening]);\n\n  return indicatorRef;\n}\n\nexport function ChatInput({\n  value,\n  placeholder = 'Ask a question?',\n  onValueChange,\n  onSubmit,\n  onAudioClick,\n  className,\n  ...props\n}: ChatInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const trimmed = value.trim();\n  const isOpen = isFocused || trimmed.length > 0;\n  const { isSupported, isListening, toggle } = useSpeechRecognition(onValueChange);\n  const audioIndicatorRef = useAudioLevel(isListening);\n\n  const showAudio = isSupported || !!onAudioClick;\n  const btnW = showAudio ? BTN_SIZE + BTN_GAP + BTN_SIZE : BTN_SIZE;\n\n  function handleAudioClick() {\n    if (isSupported) {\n      toggle();\n    } else {\n      onAudioClick?.();\n    }\n  }\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    if (trimmed) onSubmit();\n  }\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      onMouseDown={(e) => {\n        if ((e.target as HTMLElement).tagName !== 'TEXTAREA') e.preventDefault();\n      }}\n      {...props}\n      style={{\n        paddingBottom: isOpen ? FORM_PAD + BTN_GAP + BTN_SIZE : FORM_PAD,\n      }}\n      className={twMerge(\n        'relative flex items-start overflow-hidden bg-white border border-light-grey p-12 w-full',\n        'transition-[padding-bottom,border-radius] duration-250 ease-out rounded-b-[24]',\n        isOpen ? 'rounded-32' : 'rounded-[40]',\n        className,\n      )}\n    >\n      <textarea\n        rows={isOpen ? 3 : 1}\n        value={value}\n        onChange={(e) => onValueChange(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && trimmed) {\n            e.preventDefault();\n            onSubmit();\n          }\n        }}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        placeholder={placeholder}\n        aria-label={placeholder}\n        style={{\n          marginInlineEnd: isOpen ? 0 : btnW + BTN_GAP,\n        }}\n        className={twMerge(\n          'scrollbar-hidden bg-transparent text-b3 py-12 outline-none resize-none w-full px-20 border border-middleGrey',\n          'transition-[margin-inline-end,border-radius] duration-250 ease-out',\n          isOpen\n            ? 'text-black rounded-[20]'\n            : 'text-darkGrey placeholder:text-darkGrey rounded-[40]',\n        )}\n      />\n\n      <div\n        style={{\n          insetInlineStart: isOpen\n            ? `calc(50% - ${btnW / 2}px)`\n            : `calc(100% - ${FORM_PAD + btnW}px)`,\n          bottom: FORM_PAD,\n        }}\n        className=\"absolute flex gap-8 items-center transition-[inset-inline-start] duration-250 ease-out\"\n      >\n        <Button\n          type=\"submit\"\n          aria-label=\"Send message\"\n          disabled={!trimmed}\n          variant=\"circle\"\n          color=\"saffron\"\n          icon=\"ArrowTailRight\"\n          iconWidth=\"24px\"\n        />\n        {showAudio && (\n          <Button\n            type=\"button\"\n            aria-label={isListening ? 'Stop recording' : 'Use microphone'}\n            aria-pressed={isListening}\n            onClick={handleAudioClick}\n            variant=\"circle\"\n            theme={isListening ? 'solid' : 'outline'}\n            color={isListening ? 'sienna' : 'black'}\n            icon=\"Audio\"\n            iconWidth=\"24px\"\n            className={twMerge(\n              'relative',\n              isListening && 'animate-pulse',\n              !isListening && 'border-lightGrey',\n            )}\n          >\n            <span\n              ref={audioIndicatorRef}\n              aria-hidden=\"true\"\n              className=\"bg-current absolute w-5 bottom-21\"\n              style={{ height: '0px' }}\n            />\n          </Button>\n        )}\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/ui/ChatMessage.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type ChatMessageSender = 'assistant' | 'user';
+export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
+    sender: ChatMessageSender;
+}
+export declare const ChatMessage: import('react').NamedExoticComponent<PropsWithChildren<ChatMessageProps>>;

package/ui/ChatMessage.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/ChatMessage.js";
+export { e as ChatMessage };

package/ui/ChatTypingIndicator.d.ts

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

package/ui/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/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/ChatTypingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTypingIndicator.js","names":[],"sources":["../../lib/ui/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/ChatWindow.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ChatMessageSender } from './ChatMessage';
+import { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';
+import { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';
+import { ChatWindowQuoteItem } from './ChatWindowQuote';
+export type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels, ChatWindowQuoteItem };
+export interface ChatWindowMessage {
+    id: string;
+    sender: ChatMessageSender;
+    content: string;
+}
+export interface ChatWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    title?: string;
+    greeting?: string;
+    messages: ChatWindowMessage[];
+    inputValue: string;
+    inputPlaceholder?: string;
+    isTyping?: boolean;
+    onInputChange: (value: string) => void;
+    onSubmit: () => void;
+    onClose?: () => void;
+    onAudioClick?: () => void;
+    logo?: ReactNode;
+    onFeedbackRate?: (rating: number) => void;
+    csatLabels?: ChatWindowCsatPromptLabels;
+    csatRenderRatingLabel?: (rating: number) => ReactNode;
+    csatThankYouLabels?: ChatWindowCsatThankYouLabels;
+    onQuoteCtaClick?: (quote: ChatWindowQuoteItem) => void;
+}
+export interface ChatWindowHandle {
+    askForFeedback: () => void;
+    showQuotes: (quotes: ChatWindowQuoteItem[]) => void;
+}
+export declare const ChatWindow: import('react').ForwardRefExoticComponent<ChatWindowProps & import('react').RefAttributes<ChatWindowHandle>>;

package/ui/ChatWindow.js

@@ -0,0 +1,142 @@
+"use client";
+import { twMerge as e } from "./helpers/twMerge.js";
+import { ChatInput as t } from "./ChatInput.js";
+import { t as n } from "../chunks/ChatMessage.js";
+import { ChatTypingIndicator as r } from "./ChatTypingIndicator.js";
+import { ChatWindowCsatPrompt as i } from "./ChatWindowCsatPrompt.js";
+import { ChatWindowCsatThankYou as a } from "./ChatWindowCsatThankYou.js";
+import { ChatWindowQuote as o } from "./ChatWindowQuote.js";
+import { forwardRef as s, useEffect as c, useImperativeHandle as l, useRef as u, useState as d } from "react";
+import { Icon as f } from "@clubmed/trident-icons";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region lib/ui/ChatWindow.tsx
+var h = /* @__PURE__ */ p("svg", {
+	className: "absolute top-full inset-x-[50%] -translate-x-1/2",
+	width: "118",
+	height: "27",
+	viewBox: "0 0 118 27",
+	children: /* @__PURE__ */ p("path", {
+		d: "M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z",
+		fill: "#F6EFE7"
+	})
+}), g = s(function({ title: s = "Ask me a question", greeting: g, messages: _, inputValue: v, inputPlaceholder: y, isTyping: b = !1, onInputChange: x, onSubmit: S, onClose: C, onAudioClick: w, logo: T, onFeedbackRate: E, csatLabels: D, csatRenderRatingLabel: O, csatThankYouLabels: k, onQuoteCtaClick: A, className: j, ...M }, N) {
+	let P = u(null), [F, I] = d(!1), [L, R] = d(null), [z, B] = d([]);
+	l(N, () => ({
+		askForFeedback() {
+			I(!0);
+		},
+		showQuotes(e) {
+			B((t) => [...t, e]);
+		}
+	})), c(() => {
+		let e = P.current;
+		e && e.scrollTo({
+			top: e.scrollHeight,
+			behavior: "smooth"
+		});
+	}, [
+		_,
+		b,
+		F,
+		L,
+		z
+	]);
+	function V(e) {
+		R(String(O ? O(e) : e)), E?.(e);
+	}
+	let H = F && D && O;
+	return /* @__PURE__ */ m("div", {
+		...M,
+		className: e("flex flex-col gap-20 items-center", j),
+		children: [/* @__PURE__ */ m("div", {
+			className: "chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden",
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "relative flex flex-col items-center shrink-0 pt-4 px-4 h-133 overflow-hidden",
+					children: [/* @__PURE__ */ p("div", {
+						className: "absolute inset-x-4 top-4 h-102 bg-lightSand rounded-[24]",
+						children: h
+					}), /* @__PURE__ */ m("div", {
+						className: "relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex items-center justify-center px-12 py-8 w-full",
+							children: /* @__PURE__ */ p("p", {
+								className: "font-serif font-bold italic text-h5 text-center text-black line-clamp-2",
+								children: s
+							})
+						}), T ?? /* @__PURE__ */ p("button", {
+							type: "button",
+							"aria-label": "AI assistant",
+							className: "chat-border flex items-center justify-center size-48 rounded-full bg-white",
+							children: /* @__PURE__ */ p(f, {
+								name: "Sparkles",
+								width: "24px"
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ m("div", {
+					ref: P,
+					role: "log",
+					"aria-label": "Chat messages",
+					"aria-live": "polite",
+					className: "chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20",
+					children: [
+						g ? /* @__PURE__ */ p("div", {
+							className: "px-20",
+							children: /* @__PURE__ */ p("p", {
+								className: "text-b3 text-black",
+								children: g
+							})
+						}) : null,
+						_.map((e) => /* @__PURE__ */ p(n, {
+							sender: e.sender,
+							children: e.content
+						}, e.id)),
+						b && /* @__PURE__ */ p("div", {
+							className: "px-12",
+							children: /* @__PURE__ */ p(r, {})
+						}),
+						H && /* @__PURE__ */ p(i, {
+							onRate: V,
+							labels: D,
+							renderRatingLabel: O
+						}),
+						L && /* @__PURE__ */ p(n, {
+							sender: "user",
+							children: L
+						}),
+						L && k && /* @__PURE__ */ p(a, { labels: k }),
+						z.map((e, t) => /* @__PURE__ */ p(o, {
+							quotes: e,
+							onCtaClick: A
+						}, t))
+					]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "shrink-0 px-8 pb-8 pt-12",
+					children: /* @__PURE__ */ p(t, {
+						value: v,
+						placeholder: y,
+						onValueChange: x,
+						onSubmit: S,
+						onAudioClick: w
+					})
+				})
+			]
+		}), C && /* @__PURE__ */ p("button", {
+			type: "button",
+			"aria-label": "Close chat",
+			onClick: C,
+			className: "flex items-center justify-center size-48 rounded-full bg-black border border-black text-white shrink-0 hover:opacity-80 transition-opacity",
+			children: /* @__PURE__ */ p(f, {
+				name: "CrossDefault",
+				width: "24px"
+			})
+		})]
+	});
+});
+//#endregion
+export { g as ChatWindow };
+
+//# sourceMappingURL=ChatWindow.js.map

package/ui/ChatWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.js","names":[],"sources":["../../lib/ui/ChatWindow.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { twMerge } from './helpers/twMerge';\nimport { ChatInput } from './ChatInput';\nimport { ChatMessage } from './ChatMessage';\nimport type { ChatMessageSender } from './ChatMessage';\nimport { ChatTypingIndicator } from './ChatTypingIndicator';\nimport { ChatWindowCsatPrompt } from './ChatWindowCsatPrompt';\nimport type { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';\nimport { ChatWindowCsatThankYou } from './ChatWindowCsatThankYou';\nimport type { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';\nimport { ChatWindowQuote } from './ChatWindowQuote';\nimport type { ChatWindowQuoteItem } from './ChatWindowQuote';\n\nexport type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels, ChatWindowQuoteItem };\n\nexport interface ChatWindowMessage {\n  id: string;\n  sender: ChatMessageSender;\n  content: string;\n}\n\nexport interface ChatWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  title?: string;\n  greeting?: string;\n  messages: ChatWindowMessage[];\n  inputValue: string;\n  inputPlaceholder?: string;\n  isTyping?: boolean;\n  onInputChange: (value: string) => void;\n  onSubmit: () => void;\n  onClose?: () => void;\n  onAudioClick?: () => void;\n  logo?: ReactNode;\n  onFeedbackRate?: (rating: number) => void;\n  csatLabels?: ChatWindowCsatPromptLabels;\n  csatRenderRatingLabel?: (rating: number) => ReactNode;\n  csatThankYouLabels?: ChatWindowCsatThankYouLabels;\n  onQuoteCtaClick?: (quote: ChatWindowQuoteItem) => void;\n}\n\nexport interface ChatWindowHandle {\n  askForFeedback: () => void;\n  showQuotes: (quotes: ChatWindowQuoteItem[]) => void;\n}\n\nconst headerCurve = (\n  <svg\n    className=\"absolute top-full inset-x-[50%] -translate-x-1/2\"\n    width=\"118\"\n    height=\"27\"\n    viewBox=\"0 0 118 27\"\n  >\n    <path\n      d=\"M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z\"\n      fill=\"#F6EFE7\"\n    />\n  </svg>\n);\n\nexport const ChatWindow = forwardRef<ChatWindowHandle, ChatWindowProps>(function ChatWindow(\n  {\n    title = 'Ask me a question',\n    greeting,\n    messages,\n    inputValue,\n    inputPlaceholder,\n    isTyping = false,\n    onInputChange,\n    onSubmit,\n    onClose,\n    onAudioClick,\n    logo,\n    onFeedbackRate,\n    csatLabels,\n    csatRenderRatingLabel,\n    csatThankYouLabels,\n    onQuoteCtaClick,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const logRef = useRef<HTMLDivElement>(null);\n  const [showCsat, setShowCsat] = useState(false);\n  const [csatRatingMessage, setCsatRatingMessage] = useState<string | null>(null);\n  const [quoteGroups, setQuoteGroups] = useState<ChatWindowQuoteItem[][]>([]);\n\n  useImperativeHandle(ref, () => ({\n    askForFeedback() {\n      setShowCsat(true);\n    },\n    showQuotes(quotes: ChatWindowQuoteItem[]) {\n      setQuoteGroups((prev) => [...prev, quotes]);\n    },\n  }));\n\n  useEffect(() => {\n    const el = logRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });\n  }, [messages, isTyping, showCsat, csatRatingMessage, quoteGroups]);\n\n  function handleRate(rating: number) {\n    const label = csatRenderRatingLabel ? String(csatRenderRatingLabel(rating)) : String(rating);\n    setCsatRatingMessage(label);\n    onFeedbackRate?.(rating);\n  }\n\n  const csatReady = showCsat && csatLabels && csatRenderRatingLabel;\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        <div className=\"relative flex flex-col items-center shrink-0 pt-4 px-4 h-133 overflow-hidden\">\n          <div className=\"absolute inset-x-4 top-4 h-102 bg-lightSand rounded-[24]\">\n            {headerCurve}\n          </div>\n          <div className=\"relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10\">\n            <div className=\"flex items-center justify-center px-12 py-8 w-full\">\n              <p className=\"font-serif font-bold italic text-h5 text-center text-black line-clamp-2\">\n                {title}\n              </p>\n            </div>\n            {logo ?? (\n              <button\n                type=\"button\"\n                aria-label=\"AI assistant\"\n                className=\"chat-border flex items-center justify-center size-48 rounded-full bg-white\"\n              >\n                <Icon name=\"Sparkles\" width=\"24px\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        <div\n          ref={logRef}\n          role=\"log\"\n          aria-label=\"Chat messages\"\n          aria-live=\"polite\"\n          className=\"chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20\"\n        >\n          {greeting ? (\n            <div className=\"px-20\">\n              <p className=\"text-b3 text-black\">{greeting}</p>\n            </div>\n          ) : null}\n          {messages.map((msg) => (\n            <ChatMessage key={msg.id} sender={msg.sender}>\n              {msg.content}\n            </ChatMessage>\n          ))}\n          {isTyping && (\n            <div className=\"px-12\">\n              <ChatTypingIndicator />\n            </div>\n          )}\n          {csatReady && (\n            <ChatWindowCsatPrompt\n              onRate={handleRate}\n              labels={csatLabels}\n              renderRatingLabel={csatRenderRatingLabel}\n            />\n          )}\n          {csatRatingMessage && <ChatMessage sender=\"user\">{csatRatingMessage}</ChatMessage>}\n          {csatRatingMessage && csatThankYouLabels && (\n            <ChatWindowCsatThankYou labels={csatThankYouLabels} />\n          )}\n          {quoteGroups.map((quotes, idx) => (\n            <ChatWindowQuote key={idx} quotes={quotes} onCtaClick={onQuoteCtaClick} />\n          ))}\n        </div>\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          />\n        </div>\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\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAiDA,IAAM,IACJ,kBAAC,OAAD;CACE,WAAU;CACV,OAAM;CACN,QAAO;CACP,SAAQ;WAER,kBAAC,QAAD;EACE,GAAE;EACF,MAAK;EACL,CAAA;CACE,CAAA,EAGK,IAAa,EAA8C,SACtE,EACE,WAAQ,qBACR,aACA,aACA,eACA,qBACA,cAAW,IACX,kBACA,aACA,YACA,iBACA,SACA,mBACA,eACA,0BACA,uBACA,oBACA,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAS,EAAuB,KAAK,EACrC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAmB,KAAwB,EAAwB,KAAK,EACzE,CAAC,GAAa,KAAkB,EAAkC,EAAE,CAAC;AAW3E,CATA,EAAoB,UAAY;EAC9B,iBAAiB;AACf,KAAY,GAAK;;EAEnB,WAAW,GAA+B;AACxC,MAAgB,MAAS,CAAC,GAAG,GAAM,EAAO,CAAC;;EAE9C,EAAE,EAEH,QAAgB;EACd,IAAM,IAAK,EAAO;AAClB,EAAI,KAAI,EAAG,SAAS;GAAE,KAAK,EAAG;GAAc,UAAU;GAAU,CAAC;IAChE;EAAC;EAAU;EAAU;EAAU;EAAmB;EAAY,CAAC;CAElE,SAAS,EAAW,GAAgB;AAGlC,EADA,EADsC,OAAxB,IAA+B,EAAsB,EAAO,GAAW,EAAO,CACjE,EAC3B,IAAiB,EAAO;;CAG1B,IAAM,IAAY,KAAY,KAAc;AAE5C,QACE,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAQ,qCAAqC,EAAU;YAAlF,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBACV;QACC,CAAA;OACA,CAAA,EACL,KACC,kBAAC,UAAD;OACE,MAAK;OACL,cAAW;OACX,WAAU;iBAEV,kBAAC,GAAD;QAAM,MAAK;QAAW,OAAM;QAAS,CAAA;OAC9B,CAAA,CAAA;;;IAKf,kBAAC,OAAD;KACE,KAAK;KACL,MAAK;KACL,cAAW;KACX,aAAU;KACV,WAAU;eALZ;MAOG,IACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAsB;QAAa,CAAA;OAC5C,CAAA,GACJ;MACH,EAAS,KAAK,MACb,kBAAC,GAAD;OAA0B,QAAQ,EAAI;iBACnC,EAAI;OACO,EAFI,EAAI,GAER,CACd;MACD,KACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAuB,CAAA;OACnB,CAAA;MAEP,KACC,kBAAC,GAAD;OACE,QAAQ;OACR,QAAQ;OACR,mBAAmB;OACnB,CAAA;MAEH,KAAqB,kBAAC,GAAD;OAAa,QAAO;iBAAQ;OAAgC,CAAA;MACjF,KAAqB,KACpB,kBAAC,GAAD,EAAwB,QAAQ,GAAsB,CAAA;MAEvD,EAAY,KAAK,GAAQ,MACxB,kBAAC,GAAD;OAAmC;OAAQ,YAAY;OAAmB,EAApD,EAAoD,CAAA;;;IAI9E,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,OAAO;MACP,aAAa;MACb,eAAe;MACL;MACI;MACd,CAAA;KACE,CAAA;;MAGP,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/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/ChatWindowCsatPrompt.js

@@ -0,0 +1,71 @@
+"use client";
+import { twMerge as e } from "./helpers/twMerge.js";
+import { useState as t } from "react";
+import { Icon as n } from "@clubmed/trident-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/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__ */ i("div", {
+		className: e("flex flex-col gap-20 px-20", c),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ r("p", {
+					className: "text-b3 text-black",
+					children: o.intro
+				}), /* @__PURE__ */ i("p", {
+					className: "text-b3 text-black",
+					children: [
+						o.question,
+						" ",
+						/* @__PURE__ */ r("span", {
+							className: "text-b4 text-black",
+							children: o.questionNote
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				role: "group",
+				"aria-label": o.groupAriaLabel,
+				className: "flex items-center gap-0",
+				children: o.starLabels.map((t, i) => {
+					let a = i + 1, o = a <= m;
+					return /* @__PURE__ */ r("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", h ? "cursor-default" : "hover:bg-lightSand"),
+						children: /* @__PURE__ */ r(n, {
+							name: o ? "StarFilled" : "StarOutlined",
+							width: "24px",
+							className: "text-black"
+						})
+					}, a);
+				})
+			}),
+			m > 0 && /* @__PURE__ */ r("p", {
+				className: "text-b4 text-darkGrey",
+				"aria-live": "polite",
+				children: s(m)
+			})
+		]
+	});
+}
+//#endregion
+export { a as ChatWindowCsatPrompt };
+
+//# sourceMappingURL=ChatWindowCsatPrompt.js.map

package/ui/ChatWindowCsatPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindowCsatPrompt.js","names":[],"sources":["../../lib/ui/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',\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,2EACA,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/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/ChatWindowCsatThankYou.js

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

package/ui/ChatWindowCsatThankYou.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindowCsatThankYou.js","names":[],"sources":["../../lib/ui/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/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;