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

package/ui/ChatWindowQuote.js

@@ -1,141 +1,3 @@
 "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/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
+import { ChatWindowQuote as e } from "./chat/ChatWindowQuote.js";
+export { e as ChatWindowQuote };

package/ui/chat/ChatBody.d.ts

@@ -0,0 +1,31 @@
+import { ChatMessageSender } from './ChatMessage';
+import { ChatMessageLabels } from './ChatMessageActions';
+import { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';
+import { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';
+import { ChatWindowQuoteItem } from './ChatWindowQuote';
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ChatMessage {
+    id: string;
+    sender: ChatMessageSender;
+    content: ReactNode;
+}
+export interface ChatBodyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    greeting?: string;
+    messages: ChatMessage[];
+    isTyping?: boolean;
+    /** Actions of the user messages (replay, edit, copy), shown when a message is hovered or focused */
+    onMessageReplay?: (message: ChatMessage) => void;
+    onMessageEdit?: (message: ChatMessage, content: string) => void;
+    onMessageCopy?: (message: ChatMessage) => void | Promise<void>;
+    messageActionLabels?: Partial<ChatMessageLabels>;
+    onFeedbackRate?: (rating: number) => void;
+    csatLabels?: ChatWindowCsatPromptLabels;
+    csatRenderRatingLabel?: (rating: number) => ReactNode;
+    csatThankYouLabels?: ChatWindowCsatThankYouLabels;
+    onQuoteCtaClick?: (quote: ChatWindowQuoteItem) => void;
+}
+export interface ChatHandle {
+    askForFeedback: () => void;
+    showQuotes: (quotes: ChatWindowQuoteItem[]) => void;
+}
+export declare const ChatBody: import('react').ForwardRefExoticComponent<ChatBodyProps & import('react').RefAttributes<ChatHandle>>;

package/ui/chat/ChatBody.js

@@ -0,0 +1,92 @@
+import { twMerge as e } from "../helpers/twMerge.js";
+import { t } from "../../chunks/ChatMessage.js";
+import { ChatTypingIndicator as n } from "./ChatTypingIndicator.js";
+import { ChatWindowCsatPrompt as r } from "./ChatWindowCsatPrompt.js";
+import { ChatWindowCsatThankYou as i } from "./ChatWindowCsatThankYou.js";
+import { ChatWindowQuote as a } from "./ChatWindowQuote.js";
+import { forwardRef as o, useEffect as s, useImperativeHandle as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region lib/ui/chat/ChatBody.tsx
+function p({ messages: e, isTyping: t, csatRenderRatingLabel: n, onFeedbackRate: r, csatLabels: i }, a) {
+	let o = l(null), [d, f] = u(!1), [p, m] = u(null), [h, g] = u([]);
+	c(a, () => ({
+		askForFeedback() {
+			f(!0);
+		},
+		showQuotes(e) {
+			g((t) => [...t, e]);
+		}
+	})), s(() => {
+		let e = o.current;
+		e && e.scrollTo({
+			top: e.scrollHeight,
+			behavior: "smooth"
+		});
+	}, [
+		e,
+		t,
+		d,
+		p,
+		h
+	]);
+	function _(e) {
+		m(String(n ? n(e) : e)), r?.(e);
+	}
+	return {
+		logRef: o,
+		csatRatingMessage: p,
+		quoteGroups: h,
+		handleRate: _,
+		csatReady: d && i && n
+	};
+}
+var m = o(function(o, s) {
+	let { logRef: c, csatRatingMessage: l, quoteGroups: u, handleRate: m, csatReady: h } = p(o, s), { greeting: g, messages: _, isTyping: v = !1, onMessageReplay: y, onMessageEdit: b, onMessageCopy: x, messageActionLabels: S, csatLabels: C, csatRenderRatingLabel: w, csatThankYouLabels: T, onQuoteCtaClick: E, className: D, ...O } = o;
+	return /* @__PURE__ */ f("div", {
+		...O,
+		ref: c,
+		role: "log",
+		"aria-label": "Chat messages",
+		"aria-live": "polite",
+		className: e("chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20", D),
+		children: [
+			g ? /* @__PURE__ */ d("div", {
+				className: "px-20",
+				children: /* @__PURE__ */ d("p", {
+					className: "text-b3 text-black",
+					children: g
+				})
+			}) : null,
+			_.map((e) => /* @__PURE__ */ d(t, {
+				sender: e.sender,
+				onReplay: y && (() => y(e)),
+				onEdit: b && ((t) => b(e, t)),
+				onCopy: x && (() => x(e)),
+				labels: S,
+				children: e.content
+			}, e.id)),
+			v && /* @__PURE__ */ d("div", {
+				className: "px-12",
+				children: /* @__PURE__ */ d(n, {})
+			}),
+			h && /* @__PURE__ */ d(r, {
+				onRate: m,
+				labels: C,
+				renderRatingLabel: w
+			}),
+			l && /* @__PURE__ */ d(t, {
+				sender: "user",
+				children: l
+			}),
+			l && T && /* @__PURE__ */ d(i, { labels: T }),
+			u.map((e, t) => /* @__PURE__ */ d(a, {
+				quotes: e,
+				onCtaClick: E
+			}, t))
+		]
+	});
+});
+//#endregion
+export { m as ChatBody };
+
+//# sourceMappingURL=ChatBody.js.map

package/ui/chat/ChatBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBody.js","names":[],"sources":["../../../lib/ui/chat/ChatBody.tsx"],"sourcesContent":["import { ChatMessage, type ChatMessageSender } from './ChatMessage';\nimport type { ChatMessageLabels } from './ChatMessageActions';\nimport { ChatTypingIndicator } from './ChatTypingIndicator';\nimport type { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';\nimport { ChatWindowCsatPrompt } from './ChatWindowCsatPrompt';\nimport {\n  ChatWindowCsatThankYou,\n  type ChatWindowCsatThankYouLabels,\n} from './ChatWindowCsatThankYou';\nimport { ChatWindowQuote, type ChatWindowQuoteItem } from './ChatWindowQuote';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from '../helpers/twMerge';\n\nexport interface ChatMessage {\n  id: string;\n  sender: ChatMessageSender;\n  content: ReactNode;\n}\n\nexport interface ChatBodyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  greeting?: string;\n  messages: ChatMessage[];\n  isTyping?: boolean;\n  /** Actions of the user messages (replay, edit, copy), shown when a message is hovered or focused */\n  onMessageReplay?: (message: ChatMessage) => void;\n  onMessageEdit?: (message: ChatMessage, content: string) => void;\n  onMessageCopy?: (message: ChatMessage) => void | Promise<void>;\n  messageActionLabels?: Partial<ChatMessageLabels>;\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 ChatHandle {\n  askForFeedback: () => void;\n  showQuotes: (quotes: ChatWindowQuoteItem[]) => void;\n}\n\nfunction useChat(\n  { messages, isTyping, csatRenderRatingLabel, onFeedbackRate, csatLabels }: ChatBodyProps,\n  ref: Ref<ChatHandle>,\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 { logRef, csatRatingMessage, quoteGroups, handleRate, csatReady };\n}\n\nexport const ChatBody = forwardRef<ChatHandle, ChatBodyProps>(function Chat(props, ref) {\n  const { logRef, csatRatingMessage, quoteGroups, handleRate, csatReady } = useChat(props, ref);\n\n  const {\n    greeting,\n    messages,\n    isTyping = false,\n    onMessageReplay,\n    onMessageEdit,\n    onMessageCopy,\n    messageActionLabels,\n    csatLabels,\n    csatRenderRatingLabel,\n    csatThankYouLabels,\n    onQuoteCtaClick,\n    className,\n    ...extraProps\n  } = props;\n\n  return (\n    <div\n      {...extraProps}\n      ref={logRef}\n      role=\"log\"\n      aria-label=\"Chat messages\"\n      aria-live=\"polite\"\n      className={twMerge(\n        'chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20',\n        className,\n      )}\n    >\n      {greeting ? (\n        <div className=\"px-20\">\n          <p className=\"text-b3 text-black\">{greeting}</p>\n        </div>\n      ) : null}\n\n      {messages.map((msg) => (\n        <ChatMessage\n          key={msg.id}\n          sender={msg.sender}\n          onReplay={onMessageReplay && (() => onMessageReplay(msg))}\n          onEdit={onMessageEdit && ((content) => onMessageEdit(msg, content))}\n          onCopy={onMessageCopy && (() => onMessageCopy(msg))}\n          labels={messageActionLabels}\n        >\n          {msg.content}\n        </ChatMessage>\n      ))}\n\n      {isTyping && (\n        <div className=\"px-12\">\n          <ChatTypingIndicator />\n        </div>\n      )}\n\n      {csatReady && (\n        <ChatWindowCsatPrompt\n          onRate={handleRate}\n          labels={csatLabels!}\n          renderRatingLabel={csatRenderRatingLabel!}\n        />\n      )}\n\n      {csatRatingMessage && <ChatMessage sender=\"user\">{csatRatingMessage}</ChatMessage>}\n\n      {csatRatingMessage && csatThankYouLabels && (\n        <ChatWindowCsatThankYou labels={csatThankYouLabels} />\n      )}\n\n      {quoteGroups.map((quotes, idx) => (\n        <ChatWindowQuote key={idx} quotes={quotes} onCtaClick={onQuoteCtaClick} />\n      ))}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;AAiDA,SAAS,EACP,EAAE,aAAU,aAAU,0BAAuB,mBAAgB,iBAC7D,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;;AAK1B,QAAO;EAAE;EAAQ;EAAmB;EAAa;EAAY,WAF3C,KAAY,KAAc;EAE4B;;AAG1E,IAAa,IAAW,EAAsC,SAAc,GAAO,GAAK;CACtF,IAAM,EAAE,WAAQ,sBAAmB,gBAAa,eAAY,iBAAc,EAAQ,GAAO,EAAI,EAEvF,EACJ,aACA,aACA,cAAW,IACX,oBACA,kBACA,kBACA,wBACA,eACA,0BACA,uBACA,oBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,KAAK;EACL,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,EACT,sEACA,EACD;YATH;GAWG,IACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KAAG,WAAU;eAAsB;KAAa,CAAA;IAC5C,CAAA,GACJ;GAEH,EAAS,KAAK,MACb,kBAAC,GAAD;IAEE,QAAQ,EAAI;IACZ,UAAU,YAA0B,EAAgB,EAAI;IACxD,QAAQ,OAAmB,MAAY,EAAc,GAAK,EAAQ;IAClE,QAAQ,YAAwB,EAAc,EAAI;IAClD,QAAQ;cAEP,EAAI;IACO,EARP,EAAI,GAQG,CACd;GAED,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAuB,CAAA;IACnB,CAAA;GAGP,KACC,kBAAC,GAAD;IACE,QAAQ;IACR,QAAQ;IACR,mBAAmB;IACnB,CAAA;GAGH,KAAqB,kBAAC,GAAD;IAAa,QAAO;cAAQ;IAAgC,CAAA;GAEjF,KAAqB,KACpB,kBAAC,GAAD,EAAwB,QAAQ,GAAsB,CAAA;GAGvD,EAAY,KAAK,GAAQ,MACxB,kBAAC,GAAD;IAAmC;IAAQ,YAAY;IAAmB,EAApD,EAAoD,CAC1E;GACE;;EAER"}

package/ui/chat/ChatButton.d.ts

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from 'react';
+export type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    offset?: boolean;
+    unfoldOn?: 'hover' | 'active';
+};
+export declare function ChatButton({ children, className, type, 'aria-label': ariaLabel, tabIndex, offset, unfoldOn, ...rest }: ChatButtonProps): import("react/jsx-runtime").JSX.Element;

package/ui/chat/ChatButton.js

@@ -0,0 +1,33 @@
+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/ChatButton.tsx
+var i = "AI Agent: Have you got a question?", a = "Chat with your assistant";
+function o({ children: o = i, className: s, type: c = "button", "aria-label": l, tabIndex: u, offset: d, unfoldOn: f = "hover", ...p }) {
+	let m = l ?? (typeof o == "string" && o.trim().length > 0 ? o.trim() : a);
+	return /* @__PURE__ */ n("button", {
+		type: c,
+		"aria-label": m,
+		tabIndex: u ?? 0,
+		...p,
+		className: e("chat-border grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]", d && "md:translate-x-[40px] focus-visible:translate-x-0", f === "hover" && "group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0", f === "active" && "group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0", "focus-visible:grid-cols-[24px_1fr]", s),
+		children: [/* @__PURE__ */ t(r, {
+			name: "Sparkles",
+			className: e("chat-button-icon w-24 transition-all", d && "relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0")
+		}), /* @__PURE__ */ t("div", {
+			className: "grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500",
+			children: /* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black",
+				children: [o, /* @__PURE__ */ t(r, {
+					name: "ArrowTailRight",
+					width: "24px"
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { o as ChatButton };
+
+//# sourceMappingURL=ChatButton.js.map

package/ui/chat/ChatButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatButton.js","names":[],"sources":["../../../lib/ui/chat/ChatButton.tsx"],"sourcesContent":["import { Icon } from '@clubmed/trident-icons';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { twMerge } from '../helpers/twMerge';\n\nconst DEFAULT_TEASER_COPY = 'AI Agent: Have you got a question?';\nconst FALLBACK_ARIA_LABEL = 'Chat with your assistant';\n\nexport type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  offset?: boolean;\n  unfoldOn?: 'hover' | 'active';\n};\n\nexport function ChatButton({\n  children = DEFAULT_TEASER_COPY,\n  className,\n  type = 'button',\n  'aria-label': ariaLabel,\n  tabIndex,\n  offset,\n  unfoldOn = 'hover',\n  ...rest\n}: ChatButtonProps) {\n  const label =\n    ariaLabel ??\n    (typeof children === 'string' && children.trim().length > 0\n      ? children.trim()\n      : FALLBACK_ARIA_LABEL);\n\n  return (\n    <button\n      type={type}\n      aria-label={label}\n      tabIndex={tabIndex ?? 0}\n      {...rest}\n      className={twMerge(\n        'chat-border grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]',\n        offset && 'md:translate-x-[40px] focus-visible:translate-x-0',\n        unfoldOn === 'hover' &&\n          'group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0',\n        unfoldOn === 'active' &&\n          'group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0',\n        'focus-visible:grid-cols-[24px_1fr]',\n        className,\n      )}\n    >\n      <Icon\n        name=\"Sparkles\"\n        className={twMerge(\n          'chat-button-icon w-24 transition-all',\n          offset &&\n            'relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0',\n        )}\n      />\n      <div className=\"grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500\">\n        <span\n          aria-hidden=\"true\"\n          className=\"chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black\"\n        >\n          {children}\n          <Icon name=\"ArrowTailRight\" width=\"24px\" />\n        </span>\n      </div>\n    </button>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAsB,sCACtB,IAAsB;AAO5B,SAAgB,EAAW,EACzB,cAAW,GACX,cACA,UAAO,UACP,cAAc,GACd,aACA,WACA,cAAW,SACX,GAAG,KACe;CAClB,IAAM,IACJ,MACC,OAAO,KAAa,YAAY,EAAS,MAAM,CAAC,SAAS,IACtD,EAAS,MAAM,GACf;AAEN,QACE,kBAAC,UAAD;EACQ;EACN,cAAY;EACZ,UAAU,KAAY;EACtB,GAAI;EACJ,WAAW,EACT,mWACA,KAAU,qDACV,MAAa,WACX,wEACF,MAAa,YACX,2EACF,sCACA,EACD;YAdH,CAgBE,kBAAC,GAAD;GACE,MAAK;GACL,WAAW,EACT,wCACA,KACE,mJACH;GACD,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cAFZ,CAIG,GACD,kBAAC,GAAD;KAAM,MAAK;KAAiB,OAAM;KAAS,CAAA,CACtC;;GACH,CAAA,CACC"}

package/ui/chat/ChatHeader.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface ChatHeaderProps {
+    title?: string;
+    logo?: ReactNode;
+}
+export declare function ChatHeader({ title, logo }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;

package/ui/chat/ChatHeader.js

@@ -0,0 +1,43 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Icon as n } from "@clubmed/trident-icons";
+//#region lib/ui/chat/ChatHeader.tsx
+var r = /* @__PURE__ */ e("svg", {
+	className: "absolute top-full inset-x-[50%] -translate-x-1/2",
+	width: "118",
+	height: "27",
+	viewBox: "0 0 118 27",
+	children: /* @__PURE__ */ e("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"
+	})
+});
+function i({ title: i = "Ask me a question", logo: a }) {
+	return /* @__PURE__ */ t("div", {
+		className: "relative flex flex-col items-center shrink-0 pt-4 px-4 h-118 overflow-hidden",
+		children: [/* @__PURE__ */ e("div", {
+			className: "absolute inset-x-4 top-4 h-87 bg-lightSand rounded-[24px]",
+			children: r
+		}), /* @__PURE__ */ t("div", {
+			className: "relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10",
+			children: [/* @__PURE__ */ e("div", {
+				className: "flex items-center justify-center px-12 py-8 w-full",
+				children: /* @__PURE__ */ e("p", {
+					className: "font-serif font-bold italic text-h5 text-center text-black line-clamp-2",
+					children: i
+				})
+			}), a ?? /* @__PURE__ */ e("button", {
+				type: "button",
+				"aria-label": "AI assistant",
+				className: "chat-border flex items-center justify-center size-48 rounded-full bg-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
+				children: /* @__PURE__ */ e(n, {
+					name: "Sparkles",
+					width: "24px"
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { i as ChatHeader };
+
+//# sourceMappingURL=ChatHeader.js.map

package/ui/chat/ChatHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.js","names":[],"sources":["../../../lib/ui/chat/ChatHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface ChatHeaderProps {\n  title?: string;\n  logo?: ReactNode;\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 function ChatHeader({ title = 'Ask me a question', logo }: ChatHeaderProps) {\n  return (\n    <div className=\"relative flex flex-col items-center shrink-0 pt-4 px-4 h-118 overflow-hidden\">\n      <div className=\"absolute inset-x-4 top-4 h-87 bg-lightSand rounded-[24px]\">{headerCurve}</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 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n          >\n            <Icon name=\"Sparkles\" width=\"24px\" />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAQA,IAAM,IACJ,kBAAC,OAAD;CACE,WAAU;CACV,OAAM;CACN,QAAO;CACP,SAAQ;WAER,kBAAC,QAAD;EACE,GAAE;EACF,MAAK;EACL,CAAA;CACE,CAAA;AAGR,SAAgB,EAAW,EAAE,WAAQ,qBAAqB,WAAyB;AACjF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAA6D;GAAkB,CAAA,EAC9F,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA;IACA,CAAA,EACL,KACC,kBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,WAAU;cAEV,kBAAC,GAAD;KAAM,MAAK;KAAW,OAAM;KAAS,CAAA;IAC9B,CAAA,CAEP;KACF"}

package/ui/chat/ChatInput.d.ts

@@ -0,0 +1,28 @@
+import { FormHTMLAttributes } from 'react';
+/**
+ * Keyboard shortcut that submits the message:
+ * - `mod+enter`: Ctrl/Cmd+Enter submits, Enter adds a line break
+ * - `enter`: Enter submits, Shift+Enter adds a line break (Ctrl/Cmd+Enter submits too)
+ */
+export type ChatInputSubmitKey = 'mod+enter' | 'enter';
+export interface ChatInputProps extends FormHTMLAttributes<HTMLFormElement> {
+    value: string;
+    placeholder?: string;
+    onValueChange: (value: string) => void;
+    onSubmit: () => void;
+    /**
+     * Keyboard shortcut that submits the message.
+     * @default 'mod+enter'
+     */
+    submitKey?: ChatInputSubmitKey;
+    /** While `true`, submitting is disabled and the send button becomes a stop button */
+    isStreaming?: boolean;
+    /**
+     * Enables the microphone button. The browser speech recognition is used when available, this
+     * callback is the fallback for when the browser does not support the Web Speech API.
+     */
+    onAudioClick?: () => void;
+    /** Called when the stop button, shown in place of the send button while `isStreaming`, is clicked */
+    onStop?: () => void;
+}
+export declare function ChatInput({ value, placeholder, onValueChange, onSubmit, onAudioClick, onStop, isStreaming, submitKey, className, ...props }: ChatInputProps): import("react/jsx-runtime").JSX.Element;

package/ui/chat/ChatInput.js

@@ -0,0 +1,165 @@
+"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/chat/ChatInput.tsx
+function s(e, t) {
+	return e.key !== "Enter" || e.nativeEvent.isComposing ? !1 : e.metaKey || e.ctrlKey ? !0 : t === "enter" && !e.shiftKey;
+}
+var c = 12, l = 48, u = 8;
+function d(e) {
+	let t = r(e);
+	return n(() => {
+		t.current = e;
+	}), t;
+}
+var f = 3e3;
+function p({ enabled: e, onValueChange: t }) {
+	let [a, o] = i(!1), [s, c] = i(!1), l = r(null), u = r(null), p = r(!1), m = d(t);
+	function h() {
+		u.current && clearTimeout(u.current);
+	}
+	function g() {
+		h(), u.current = setTimeout(() => {
+			p.current = !1, c(!1), l.current?.stop();
+		}, f);
+	}
+	n(() => {
+		let t = window.webkitSpeechRecognition ?? window.SpeechRecognition;
+		if (!e || !t) return;
+		o(!0);
+		let n = new t();
+		return n.continuous = !0, n.interimResults = !0, n.lang = navigator.language, n.onresult = (e) => {
+			let t = Array.from(e.results).map((e) => e[0].transcript).join("");
+			m.current(t), g();
+		}, n.onend = () => {
+			if (h(), p.current) try {
+				n.start();
+			} catch {}
+			else c(!1);
+		}, n.onerror = (e) => {
+			(e.error === "not-allowed" || e.error === "aborted") && (p.current = !1, c(!1), h());
+		}, l.current = n, () => {
+			n.abort(), h();
+		};
+	}, [e]);
+	function _() {
+		let e = l.current;
+		e && (p.current ? (p.current = !1, e.stop()) : (p.current = !0, c(!0), e.start(), g()));
+	}
+	return {
+		isSupported: a,
+		isListening: s,
+		toggle: _
+	};
+}
+function m(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 h({ value: n, placeholder: r = "Ask a question?", onValueChange: d, onSubmit: f, onAudioClick: h, onStop: g, isStreaming: _, submitKey: v = "mod+enter", className: y, ...b }) {
+	let { isSupported: x, isListening: S, toggle: C } = p({
+		enabled: !!h,
+		onValueChange: d
+	}), w = m(S), [T, E] = i(!1), D = n.trim(), O = T || D.length > 0, k = h ? l + u + l : l;
+	function A() {
+		x ? C() : h?.();
+	}
+	function j(e) {
+		e.preventDefault(), D && !_ && f();
+	}
+	function M(e) {
+		s(e, v) && (e.preventDefault(), D && !_ && f());
+	}
+	function N(e) {
+		e.target.tagName !== "TEXTAREA" && e.preventDefault();
+	}
+	return /* @__PURE__ */ o("form", {
+		onSubmit: j,
+		onMouseDown: N,
+		...b,
+		style: { paddingBottom: O ? c + u + l : c },
+		className: t("relative flex items-start overflow-hidden bg-white border border-lightGrey p-12 w-full", "transition-[padding-bottom,border-radius] duration-250 ease-out rounded-b-[24px]", O ? "rounded-32" : "rounded-[40px]", y),
+		children: [/* @__PURE__ */ a("textarea", {
+			rows: O ? 3 : 1,
+			value: n,
+			onChange: (e) => d(e.target.value),
+			onKeyDown: M,
+			onFocus: () => E(!0),
+			onBlur: () => E(!1),
+			placeholder: r,
+			"aria-label": r,
+			style: { marginInlineEnd: O ? 0 : k + u },
+			className: t("scrollbar-hidden bg-transparent text-b3 py-12 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 resize-none w-full px-20 border border-middleGrey", "transition-[margin-inline-end,border-radius] duration-250 ease-out", O ? "text-black rounded-[20px]" : "text-darkGrey placeholder:text-darkGrey rounded-[40px]")
+		}), /* @__PURE__ */ o("div", {
+			style: {
+				insetInlineStart: O ? `calc(50% - ${k / 2}px)` : `calc(100% - ${c + k}px)`,
+				bottom: c
+			},
+			className: "absolute flex gap-8 items-center transition-[inset-inline-start] duration-250 ease-out",
+			children: [_ ? /* @__PURE__ */ a(e, {
+				type: "button",
+				"aria-label": "Stop generating",
+				onClick: g,
+				variant: "circle",
+				color: "black",
+				icon: "CrossDefault",
+				iconWidth: "24px"
+			}) : /* @__PURE__ */ a(e, {
+				type: "submit",
+				"aria-label": "Send message",
+				disabled: !D,
+				variant: "circle",
+				color: "saffron",
+				icon: "ArrowTailRight",
+				iconWidth: "24px"
+			}), !!h && /* @__PURE__ */ a(e, {
+				type: "button",
+				"aria-label": S ? "Stop recording" : "Use microphone",
+				"aria-pressed": S,
+				onClick: A,
+				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 { h as ChatInput };
+
+//# sourceMappingURL=ChatInput.js.map

package/ui/chat/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","names":[],"sources":["../../../lib/ui/chat/ChatInput.tsx"],"sourcesContent":["/// <reference types=\"@types/dom-speech-recognition\" />\n'use client';\n\nimport type { FormHTMLAttributes, KeyboardEvent, MouseEvent, SubmitEvent } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from '../buttons/Button';\nimport { twMerge } from '../helpers/twMerge';\n\n/**\n * Keyboard shortcut that submits the message:\n * - `mod+enter`: Ctrl/Cmd+Enter submits, Enter adds a line break\n * - `enter`: Enter submits, Shift+Enter adds a line break (Ctrl/Cmd+Enter submits too)\n */\nexport type ChatInputSubmitKey = 'mod+enter' | 'enter';\n\nexport interface ChatInputProps extends FormHTMLAttributes<HTMLFormElement> {\n  value: string;\n  placeholder?: string;\n  onValueChange: (value: string) => void;\n  onSubmit: () => void;\n  /**\n   * Keyboard shortcut that submits the message.\n   * @default 'mod+enter'\n   */\n  submitKey?: ChatInputSubmitKey;\n  /** While `true`, submitting is disabled and the send button becomes a stop button */\n  isStreaming?: boolean;\n  /**\n   * Enables the microphone button. The browser speech recognition is used when available, this\n   * callback is the fallback for when the browser does not support the Web Speech API.\n   */\n  onAudioClick?: () => void;\n  /** Called when the stop button, shown in place of the send button while `isStreaming`, is clicked */\n  onStop?: () => void;\n}\n\nfunction isSubmitKey(e: KeyboardEvent<HTMLTextAreaElement>, submitKey: ChatInputSubmitKey) {\n  // Enter validates the text being composed with an IME: it must not submit\n  if (e.key !== 'Enter' || e.nativeEvent.isComposing) return false;\n  if (e.metaKey || e.ctrlKey) return true;\n\n  return submitKey === 'enter' && !e.shiftKey;\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({\n  enabled,\n  onValueChange,\n}: {\n  enabled: boolean;\n  onValueChange: (v: string) => void;\n}) {\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 (!enabled || !SR) {\n      return;\n    }\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 when the capability changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled]);\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\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  onStop,\n  isStreaming,\n  submitKey = 'mod+enter',\n  className,\n  ...props\n}: ChatInputProps) {\n  const { isSupported, isListening, toggle } = useSpeechRecognition({\n    enabled: !!onAudioClick,\n    onValueChange: onValueChange,\n  });\n  const audioIndicatorRef = useAudioLevel(isListening);\n  const [isFocused, setIsFocused] = useState(false);\n  const trimmed = value.trim();\n  const isOpen = isFocused || trimmed.length > 0;\n  const btnW = onAudioClick ? 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: SubmitEvent) {\n    e.preventDefault();\n    if (trimmed && !isStreaming) onSubmit();\n  }\n\n  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {\n    if (!isSubmitKey(e, submitKey)) return;\n\n    e.preventDefault();\n    if (trimmed && !isStreaming) onSubmit();\n  }\n\n  function onMouseDown(e: MouseEvent) {\n    if ((e.target as HTMLElement).tagName !== 'TEXTAREA') {\n      e.preventDefault();\n    }\n  }\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      onMouseDown={onMouseDown}\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-lightGrey p-12 w-full',\n        'transition-[padding-bottom,border-radius] duration-250 ease-out rounded-b-[24px]',\n        isOpen ? 'rounded-32' : 'rounded-[40px]',\n        className,\n      )}\n    >\n      <textarea\n        rows={isOpen ? 3 : 1}\n        value={value}\n        onChange={(e) => onValueChange(e.target.value)}\n        onKeyDown={onKeyDown}\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 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 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-[20px]'\n            : 'text-darkGrey placeholder:text-darkGrey rounded-[40px]',\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        {isStreaming ? (\n          <Button\n            type=\"button\"\n            aria-label=\"Stop generating\"\n            onClick={onStop}\n            variant=\"circle\"\n            color=\"black\"\n            icon=\"CrossDefault\"\n            iconWidth=\"24px\"\n          />\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        )}\n\n        {!!onAudioClick && (\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/chat/ChatMessage.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { ChatMessageLabels } from './ChatMessageActions';
+export type ChatMessageSender = 'assistant' | 'user';
+export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
+    sender: ChatMessageSender;
+    /** Actions of a user message, shown when it is hovered or focused. Ignored for assistant messages. */
+    onReplay?: () => void;
+    /**
+     * Enables the in-place edition of a text message: the bubble turns into an editor, and this is
+     * called with the new text when the user sends it. Ignored when the content is not a string.
+     */
+    onEdit?: (content: string) => void;
+    /** May be async: a confirmation is shown once the returned promise is resolved */
+    onCopy?: () => void | Promise<void>;
+    labels?: Partial<ChatMessageLabels>;
+}
+export declare const ChatMessage: import('react').NamedExoticComponent<PropsWithChildren<ChatMessageProps>>;

package/ui/chat/ChatMessage.js

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