@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/chat-layout.js

@@ -2,11 +2,14 @@
 import { cn } from "./lib/cn.js";
 import { SkinAdornment } from "./skin-provider.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { ScrollArea } from "./ui/scroll-area.js";
+import { ChatThreadAnnounceContext } from "./hooks/use-chat-message.js";
 import { useChatThreadScroll } from "./hooks/use-chat-thread-scroll.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/chat-layout.tsx
 const chromeSizing = {
 	panel: "mx-auto min-h-[640px] max-w-3xl",
@@ -28,47 +31,95 @@ function ChatLayout({ children, chrome = "panel", className, ...props }) {
 		}) : null, children]
 	});
 }
+function ChatLayoutHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-control-ui": "chat-layout",
+		"data-control-family": "chat-layout",
+		"data-slot": "header",
+		className: cn("grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center", className),
+		...props
+	});
+}
+/** Renders a `div`; pass `render={(props) => <h2 {...props} />}` for the heading level the page needs. */
+function ChatLayoutTitle({ render, className, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			className: cn("col-start-2 min-w-0 truncate", className),
+			"data-control-ui": "chat-layout",
+			"data-control-family": "chat-layout",
+			"data-slot": "title"
+		}
+	});
+}
+function ChatLayoutDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "chat-layout",
+		"data-control-family": "chat-layout",
+		"data-slot": "description",
+		className: cn("col-start-2 truncate", className),
+		...props
+	});
+}
+function ChatLayoutActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-layout",
+		"data-control-family": "chat-layout",
+		"data-slot": "actions",
+		className: cn("col-start-3 row-span-2 row-start-1 flex items-center", className),
+		...props
+	});
+}
 const ChatThreadScrollContext = createContext(null);
 function ChatThread({ children, composer, className, ...props }) {
 	const { viewportRef, contentRef, atBottom, scrollToBottom } = useChatThreadScroll();
-	return /* @__PURE__ */ jsx(ChatThreadScrollContext.Provider, {
-		value: {
-			atBottom,
-			scrollToBottom
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			"data-control-ui": "chat-thread",
-			"data-control-family": "chat-layout",
-			"data-chat-layout-kind": "thread",
-			"data-slot": "root",
-			"data-at-bottom": atBottom ? "" : void 0,
-			className: cn("flex min-h-0 min-w-0 flex-1 flex-col", className),
-			...props,
-			children: /* @__PURE__ */ jsx(ScrollArea, {
-				className: "flex min-h-0 flex-1 flex-col",
-				viewportClassName: "min-h-0 flex-1",
-				contentClassName: "flex min-h-full flex-col",
-				viewportRef,
-				lockAxis: "x",
-				mask: false,
-				blur: false,
-				children: /* @__PURE__ */ jsxs("div", {
-					ref: contentRef,
-					className: "relative flex min-w-0 flex-1 flex-col",
-					children: [/* @__PURE__ */ jsx("div", {
-						"data-control-ui": "chat-thread",
-						"data-control-family": "chat-layout",
-						"data-slot": "thread-content",
-						className: "flex min-w-0 flex-1 flex-col",
-						children
-					}), composer ? /* @__PURE__ */ jsx("div", {
-						"data-control-ui": "chat-thread",
-						"data-control-family": "chat-layout",
-						"data-slot": "dock",
-						className: "sticky bottom-0 z-10 shrink-0",
-						children: composer
-					}) : null]
-				})
+	const [announcement, setAnnouncement] = useState("");
+	const [announce] = useState(() => (message) => {
+		setAnnouncement((current) => current === message ? `${message}\u00a0` : message);
+	});
+	return /* @__PURE__ */ jsx(ChatThreadAnnounceContext.Provider, {
+		value: announce,
+		children: /* @__PURE__ */ jsx(ChatThreadScrollContext.Provider, {
+			value: {
+				atBottom,
+				scrollToBottom
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-control-ui": "chat-thread",
+				"data-control-family": "chat-layout",
+				"data-chat-layout-kind": "thread",
+				"data-slot": "root",
+				"data-at-bottom": atBottom ? "" : void 0,
+				className: cn("flex min-h-0 min-w-0 flex-1 flex-col", className),
+				...props,
+				children: [/* @__PURE__ */ jsx(ScrollArea, {
+					className: "flex min-h-0 flex-1 flex-col",
+					viewportClassName: "min-h-0 flex-1",
+					contentClassName: "flex min-h-full flex-col",
+					viewportRef,
+					lockAxis: "x",
+					mask: false,
+					blur: false,
+					children: /* @__PURE__ */ jsxs("div", {
+						ref: contentRef,
+						className: "relative flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("div", {
+							"data-control-ui": "chat-thread",
+							"data-control-family": "chat-layout",
+							"data-slot": "thread-content",
+							className: "flex min-w-0 flex-1 flex-col",
+							children
+						}), composer ? /* @__PURE__ */ jsx("div", {
+							"data-control-ui": "chat-thread",
+							"data-control-family": "chat-layout",
+							"data-slot": "dock",
+							className: "sticky bottom-0 z-10 shrink-0",
+							children: composer
+						}) : null]
+					})
+				}), /* @__PURE__ */ jsx(LiveStatus, { message: announcement })]
 			})
 		})
 	});
@@ -110,4 +161,4 @@ function ChatTurn({ from, children, className, ...props }) {
 	});
 }
 //#endregion
-export { ChatLayout, ChatThread, ChatThreadScrollButton, ChatTurn };
+export { ChatLayout, ChatLayoutActions, ChatLayoutDescription, ChatLayoutHeader, ChatLayoutTitle, ChatThread, ChatThreadScrollButton, ChatTurn };

package/dist/chat-message/social.d.ts

@@ -0,0 +1,26 @@
+import { ChatMessagePartProps } from "../chat-message.js";
+//#region src/chat-message/social.d.ts
+export type ChatMessageReactionsProps = ChatMessagePartProps<"div">;
+export declare function ChatMessageReactions({ className, "aria-label": ariaLabel, ...props }: ChatMessageReactionsProps): import("react").JSX.Element;
+type ChatMessageReactionChip = {
+  emoji: string;
+  count: number;
+  pressed?: boolean;
+  label?: string;
+};
+export type ChatMessageReactionProps = (Omit<ChatMessagePartProps<"button">, "children" | "onClick"> & ChatMessageReactionChip & {
+  onPressedChange: (pressed: boolean) => void;
+}) | (Omit<ChatMessagePartProps<"span">, "children"> & ChatMessageReactionChip & {
+  /** Omitted for viewers who can see reactions but not add them: the chip renders as static text. */
+  onPressedChange?: undefined;
+});
+export declare function ChatMessageReaction(props: ChatMessageReactionProps): import("react").JSX.Element;
+export type ChatMessageReplySummaryProps = ChatMessagePartProps<"button">;
+export declare function ChatMessageReplySummary({ className, type, ...props }: ChatMessageReplySummaryProps): import("react").JSX.Element;
+export type ChatMessageRepliesProps = ChatMessagePartProps<"div">;
+/** Replies shown in place, nested under the message they answer, as in comment discussions. */
+export declare function ChatMessageReplies({ className, ...props }: ChatMessageRepliesProps): import("react").JSX.Element;
+export type ChatTypingIndicatorProps = ChatMessagePartProps<"div">;
+/** A polite status region that stays mounted; pass children only while someone is typing so the change is announced. */
+export declare function ChatTypingIndicator({ className, children, ...props }: ChatTypingIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/chat-message/social.js

@@ -0,0 +1,122 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useChatMessageContext } from "../hooks/use-chat-message.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat-message/social.tsx
+function ChatMessageReactions({ className, "aria-label": ariaLabel = "Reactions", ...props }) {
+	const message = useChatMessageContext();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": ariaLabel,
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "reactions",
+		"data-layout": message.layout,
+		"data-role": message.from,
+		className: cn("flex flex-wrap items-center", className),
+		...props
+	});
+}
+function reactionAttributes(pressed, className) {
+	return {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "reaction",
+		"data-pressed": pressed ? "" : void 0,
+		className: cn("inline-flex items-center", className)
+	};
+}
+function ReactionChipContent({ emoji, count, label }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-control-ui": "chat-message",
+			"data-control-family": "chat-message",
+			"data-slot": "reaction-emoji",
+			children: emoji
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "tabular-nums",
+			children: count
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})
+	] });
+}
+function ChatMessageReaction(props) {
+	const chip = /* @__PURE__ */ jsx(ReactionChipContent, {
+		emoji: props.emoji,
+		count: props.count,
+		label: props.label ?? `${props.emoji} ${props.count}`
+	});
+	if (props.onPressedChange === void 0) {
+		const { emoji, count, pressed = false, label, onPressedChange, className, ...spanProps } = props;
+		return /* @__PURE__ */ jsx("span", {
+			...reactionAttributes(pressed, className),
+			...spanProps,
+			children: chip
+		});
+	}
+	const { emoji, count, pressed = false, label, onPressedChange, className, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-pressed": pressed,
+		onClick: () => onPressedChange(!pressed),
+		...reactionAttributes(pressed, className),
+		...buttonProps,
+		children: chip
+	});
+}
+function ChatMessageReplySummary({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "reply-summary",
+		className: cn("inline-flex max-w-full items-center self-start text-start", className),
+		...props
+	});
+}
+/** Replies shown in place, nested under the message they answer, as in comment discussions. */
+function ChatMessageReplies({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "replies",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+/** A polite status region that stays mounted; pass children only while someone is typing so the change is announced. */
+function ChatTypingIndicator({ className, children, ...props }) {
+	const someoneIsTyping = children !== null && children !== void 0 && children !== false && children !== "";
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "root",
+		"data-kind": "typing",
+		className: cn("flex min-w-0 items-center", className),
+		...props,
+		children: someoneIsTyping ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			"data-control-ui": "chat-message",
+			"data-control-family": "chat-message",
+			"data-slot": "typing-dots",
+			className: "inline-flex items-center",
+			children: [
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsx("span", {})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		})] }) : null
+	});
+}
+//#endregion
+export { ChatMessageReaction, ChatMessageReactions, ChatMessageReplies, ChatMessageReplySummary, ChatTypingIndicator };

package/dist/chat-message.d.ts

@@ -1,35 +1,34 @@
 import { ChatMessageKnobStyle } from "./knob-contracts/chat-message-knobs.js";
 import { ChatMessageProps } from "./hooks/use-chat-message.js";
-import { CSSProperties, ComponentProps } from "react";
+import { ChatMessageReaction, ChatMessageReactionProps, ChatMessageReactions, ChatMessageReactionsProps, ChatMessageReplies, ChatMessageRepliesProps, ChatMessageReplySummary, ChatMessageReplySummaryProps, ChatTypingIndicator, ChatTypingIndicatorProps } from "./chat-message/social.js";
+import { CSSProperties, ComponentProps, JSX } from "react";
 //#region src/chat-message.d.ts
-export declare function ChatMessage({ from, state, density, className, children, ...props }: ChatMessageProps): import("react").JSX.Element;
-export type ChatMessageRowProps = ComponentProps<"div"> & {
+export type ChatMessagePartProps<Element extends keyof JSX.IntrinsicElements> = Omit<ComponentProps<Element>, "style"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
-export declare function ChatMessageRow({ className, children, ...props }: ChatMessageRowProps): import("react").JSX.Element;
-export type ChatMessageAvatarProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & ChatMessageKnobStyle;
-};
-export declare function ChatMessageAvatar({ className, ...props }: ChatMessageAvatarProps): import("react").JSX.Element;
-export type ChatMessageBodyProps = ComponentProps<"div"> & {
-  style?: CSSProperties & ChatMessageKnobStyle;
-};
-export declare function ChatMessageBody({ className, ...props }: ChatMessageBodyProps): import("react").JSX.Element;
-export type ChatMessageHeaderProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & ChatMessageKnobStyle;
-};
-export declare function ChatMessageHeader({ className, ...props }: ChatMessageHeaderProps): import("react").JSX.Element;
-export type ChatMessageContentProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & ChatMessageKnobStyle;
-};
-export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): import("react").JSX.Element;
-export type ChatMessagePendingProps = Omit<ComponentProps<"div">, "style" | "children"> & {
-  label?: string;
-  style?: CSSProperties & ChatMessageKnobStyle;
-};
-export declare function ChatMessagePending({ label, className, ...props }: ChatMessagePendingProps): import("react").JSX.Element | null;
-export type ChatMessageActionsProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & ChatMessageKnobStyle;
+export declare function ChatMessage({ from, state, density, layout, continuation, authorLabel, statusLabels, className, children, ...props }: ChatMessageProps): JSX.Element;
+export type ChatMessageRowProps = ChatMessagePartProps<"div">;
+export declare function ChatMessageRow({ className, children, ...props }: ChatMessageRowProps): JSX.Element;
+export type ChatMessageAvatarProps = ChatMessagePartProps<"div">;
+export declare function ChatMessageAvatar({ className, ...props }: ChatMessageAvatarProps): JSX.Element;
+export type ChatMessageBodyProps = ChatMessagePartProps<"div">;
+export declare function ChatMessageBody({ className, ...props }: ChatMessageBodyProps): JSX.Element;
+export type ChatMessageHeaderProps = ChatMessagePartProps<"div">;
+export declare function ChatMessageHeader({ className, ...props }: ChatMessageHeaderProps): JSX.Element;
+export type ChatMessageAuthorProps = ChatMessagePartProps<"span">;
+export declare function ChatMessageAuthor({ className, ...props }: ChatMessageAuthorProps): JSX.Element;
+export type ChatMessageTimeProps = ChatMessagePartProps<"time"> & {
+  dateTime: string;
 };
-export declare function ChatMessageActions({ className, ...props }: ChatMessageActionsProps): import("react").JSX.Element;
-//#endregion
+export declare function ChatMessageTime({ className, ...props }: ChatMessageTimeProps): JSX.Element;
+export type ChatMessageContentProps = ChatMessagePartProps<"div">;
+export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): JSX.Element;
+export type ChatMessagePendingProps = Omit<ChatMessagePartProps<"div">, "children">;
+/** Visual only: the pending transition is announced by `ChatMessage` through the thread's status region. */
+export declare function ChatMessagePending({ className, ...props }: ChatMessagePendingProps): JSX.Element | null;
+export type ChatMessageFooterProps = ChatMessagePartProps<"div">;
+export declare function ChatMessageFooter({ className, ...props }: ChatMessageFooterProps): JSX.Element;
+export type ChatMessageActionsProps = ChatMessagePartProps<"div">;
+export declare function ChatMessageActions({ className, children, ...props }: ChatMessageActionsProps): JSX.Element;
+//#endregion
+export { ChatMessageReaction, type ChatMessageReactionProps, ChatMessageReactions, type ChatMessageReactionsProps, ChatMessageReplies, type ChatMessageRepliesProps, ChatMessageReplySummary, type ChatMessageReplySummaryProps, ChatTypingIndicator, type ChatTypingIndicatorProps };

package/dist/chat-message.js

@@ -1,22 +1,42 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { useChatMessage } from "./hooks/use-chat-message.js";
-import { createContext, useContext } from "react";
+import { ChatMessageStateProvider, chatAuthorLabels, chatMessageStatusLabels, chatMessageTransition, useChatMessage, useChatMessageContext, useChatThreadAnnounce } from "./hooks/use-chat-message.js";
+import { ChatMessageReaction, ChatMessageReactions, ChatMessageReplies, ChatMessageReplySummary, ChatTypingIndicator } from "./chat-message/social.js";
+import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat-message.tsx
-const ChatMessageContext = createContext(null);
-function useChatMessageContext() {
-	const context = useContext(ChatMessageContext);
-	if (!context) throw new Error("ChatMessage compound components must be rendered inside <ChatMessage>.");
-	return context;
-}
-function ChatMessage({ from, state = "idle", density = "comfortable", className, children, ...props }) {
+function ChatMessage({ from, state = "idle", density = "comfortable", layout = "bubble", continuation = false, authorLabel = chatAuthorLabels[from], statusLabels, className, children, ...props }) {
 	const message = useChatMessage({
 		from,
 		state,
-		density
+		density,
+		layout,
+		continuation
 	});
-	return /* @__PURE__ */ jsx(ChatMessageContext.Provider, {
+	const announce = useChatThreadAnnounce();
+	const previousState = useRef(state);
+	const pendingLabel = statusLabels?.pending ?? chatMessageStatusLabels.pending;
+	const repliedLabel = statusLabels?.replied ?? chatMessageStatusLabels.replied;
+	const errorLabel = statusLabels?.error ?? chatMessageStatusLabels.error;
+	useEffect(() => {
+		const previous = previousState.current;
+		previousState.current = state;
+		if (from === "user" || from === "participant") return;
+		const announcement = chatMessageTransition(previous, state, {
+			pending: pendingLabel,
+			replied: repliedLabel,
+			error: errorLabel
+		});
+		if (announcement !== null) announce(announcement);
+	}, [
+		announce,
+		from,
+		state,
+		pendingLabel,
+		repliedLabel,
+		errorLabel
+	]);
+	return /* @__PURE__ */ jsx(ChatMessageStateProvider, {
 		value: message,
 		children: /* @__PURE__ */ jsx("article", {
 			"data-control-ui": "chat-message",
@@ -25,6 +45,9 @@ function ChatMessage({ from, state = "idle", density = "comfortable", className,
 			"data-role": from,
 			"data-state": state,
 			"data-density": density,
+			"data-layout": layout,
+			"data-continuation": continuation ? "" : void 0,
+			"aria-label": authorLabel,
 			className: cn("w-full", className),
 			...props,
 			children
@@ -37,36 +60,68 @@ function ChatMessageRow({ className, children, ...props }) {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "row",
-		className: cn("flex w-full", message.isUser ? "justify-end" : "justify-start", className),
+		"data-layout": message.layout,
+		"data-density": message.density,
+		"data-continuation": message.continuation ? "" : void 0,
+		className: cn("relative flex w-full", message.isEndAligned ? "justify-end" : "justify-start", className),
 		...props,
 		children
 	});
 }
 function ChatMessageAvatar({ className, ...props }) {
+	const message = useChatMessageContext();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "avatar",
+		"data-layout": message.layout,
+		"data-continuation": message.continuation ? "" : void 0,
 		className: cn("flex shrink-0 items-center justify-center", className),
 		...props
 	});
 }
 function ChatMessageBody({ className, ...props }) {
-	useChatMessageContext();
+	const message = useChatMessageContext();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "body",
-		className: cn("min-w-0", className),
+		"data-layout": message.layout,
+		"data-role": message.from,
+		className: cn("flex min-w-0 flex-col", className),
 		...props
 	});
 }
 function ChatMessageHeader({ className, ...props }) {
+	const message = useChatMessageContext();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "header",
-		className: cn("flex items-center", className),
+		"data-layout": message.layout,
+		"data-role": message.from,
+		"data-state": message.state,
+		className: cn("flex min-w-0 flex-wrap items-baseline", className),
+		...props
+	});
+}
+function ChatMessageAuthor({ className, ...props }) {
+	const message = useChatMessageContext();
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "author",
+		"data-layout": message.layout,
+		className: cn("truncate", className),
+		...props
+	});
+}
+function ChatMessageTime({ className, ...props }) {
+	return /* @__PURE__ */ jsx("time", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "time",
+		className: cn("whitespace-nowrap tabular-nums", className),
 		...props
 	});
 }
@@ -78,35 +133,61 @@ function ChatMessageContent({ className, ...props }) {
 		"data-slot": "content",
 		"data-role": message.from,
 		"data-streaming": message.isStreaming ? "" : void 0,
-		className: cn(message.isUser && "px-[var(--padding-x)] py-[var(--padding-y)]", className),
+		className: cn(message.isBubble && "px-[var(--padding-x)] py-[var(--padding-y)]", className),
 		...props
 	});
 }
-function ChatMessagePending({ label = "Assistant is replying", className, ...props }) {
+/** Visual only: the pending transition is announced by `ChatMessage` through the thread's status region. */
+function ChatMessagePending({ className, ...props }) {
 	if (!useChatMessageContext().isPending) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		role: "status",
-		"aria-label": label,
+		"aria-hidden": "true",
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "pending",
 		className: cn("inline-flex items-center", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
-			/* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
-			/* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+			/* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx("span", {})
 		]
 	});
 }
-function ChatMessageActions({ className, ...props }) {
+function ChatMessageFooter({ className, ...props }) {
+	const message = useChatMessageContext();
 	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "footer",
+		"data-layout": message.layout,
+		"data-role": message.from,
+		"data-state": message.state,
+		className: cn("flex flex-wrap items-center", className),
+		...props
+	});
+}
+function ChatMessageActions({ className, children, ...props }) {
+	const { layout } = useChatMessageContext();
+	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "actions",
+		"data-layout": layout,
 		className: cn("flex items-center", className),
-		...props
+		...props,
+		children: [layout === "flat" ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			"data-control-ui": "chat-message",
+			"data-control-family": "popup",
+			"data-popup-kind": "toolbar",
+			"data-popup-part": "surface",
+			"data-popup-static": "",
+			"data-surface": "floating",
+			"data-slot": "actions-surface",
+			className: "pointer-events-none absolute inset-0 -z-1"
+		}) : null, children]
 	});
 }
 //#endregion
-export { ChatMessage, ChatMessageActions, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageHeader, ChatMessagePending, ChatMessageRow };
+export { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessagePending, ChatMessageReaction, ChatMessageReactions, ChatMessageReplies, ChatMessageReplySummary, ChatMessageRow, ChatMessageTime, ChatTypingIndicator };

package/dist/context.d.ts

@@ -24,7 +24,7 @@ type ContextStyleProps<Props, Style> = Omit<Props, "style"> & {
 };
 export declare function Context({ segments, maxTokens, model: modelName, locale, open, defaultOpen, onOpenChange, className, children, ...props }: ContextProps): import("react").JSX.Element;
 export type ContextTriggerProps = ContextStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & ContextKnobStyle>;
-export declare function ContextTrigger({ "aria-label": ariaLabel, variant, size, className, children, ...props }: ContextTriggerProps): import("react").JSX.Element;
+export declare function ContextTrigger({ "aria-describedby": describedBy, variant, size, className, children, ...props }: ContextTriggerProps): import("react").JSX.Element;
 export type ContextContentProps = ContextStyleProps<ComponentProps<typeof PopoverContent>, PopupKnobStyle & ContextKnobStyle>;
 export declare function ContextContent({ "aria-label": ariaLabel, side, align, sideOffset, collisionPadding, padding, className, children, ...props }: ContextContentProps): import("react").JSX.Element;
 export type ContextHeaderProps = ComponentProps<"div"> & {
@@ -38,7 +38,7 @@ export declare function ContextDescription({ className, children, ...props }: Co
 export type ContextSummaryProps = ContextStyleProps<ComponentProps<"div">, ContextKnobStyle>;
 export declare function ContextSummary({ className, children, ...props }: ContextSummaryProps): import("react").JSX.Element;
 export type ContextGraphProps = ContextStyleProps<Omit<ComponentProps<"svg">, "children">, ContextKnobStyle>;
-export declare function ContextGraph({ className, ...props }: ContextGraphProps): import("react").JSX.Element;
+export declare function ContextGraph({ "aria-label": ariaLabel, className, ...props }: ContextGraphProps): import("react").JSX.Element;
 export type ContextLegendProps = ContextStyleProps<ComponentProps<"ul">, ContextKnobStyle>;
 export declare function ContextLegend({ className, children, ...props }: ContextLegendProps): import("react").JSX.Element;
 export type ContextCloseProps = ComponentProps<typeof Button>;