@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/chat-composer.js

@@ -3,10 +3,11 @@ import { cn } from "./lib/cn.js";
 import { hasSkinAdornment, skinAdornment } from "./skin.js";
 import { useSkin } from "./skin-provider.js";
 import { Button } from "./ui/button.js";
+import { Spinner } from "./ui/spinner.js";
 import { useChatComposer } from "./hooks/use-chat-composer.js";
-import { useKeyboardNavigation } from "./hooks/use-keyboard-navigation.js";
-import { createContext, useContext } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Square } from "lucide-react";
 //#region src/chat-composer.tsx
 const ChatComposerContext = createContext(null);
 function useChatComposerContext() {
@@ -14,7 +15,7 @@ function useChatComposerContext() {
 	if (!context) throw new Error("ChatComposer compound components must be rendered inside <ChatComposer>.");
 	return context;
 }
-function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, className, children, ...props }) {
+function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, allowEmptySubmit = false, submitKey = "enter", className, children, ...props }) {
 	const skin = useSkin();
 	const input = useChatComposer({
 		value,
@@ -24,6 +25,8 @@ function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "i
 		state,
 		density,
 		disabled,
+		allowEmptySubmit,
+		submitKey,
 		trackSends: hasSkinAdornment(skin, "chat-composer", "send-layer")
 	});
 	const sendLayer = skinAdornment(skin, "chat-composer", "send-layer", { sendCount: input.sendCount });
@@ -48,9 +51,7 @@ function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "i
 }
 function ChatComposerShell({ className, ...props }) {
 	const input = useChatComposerContext();
-	const keyboardNavigation = useKeyboardNavigation();
 	return /* @__PURE__ */ jsx("div", {
-		"data-keyboard-navigation": keyboardNavigation ? "" : void 0,
 		"data-control-ui": "chat-composer",
 		"data-control-family": "chat-composer",
 		"data-slot": "shell",
@@ -70,8 +71,17 @@ function ChatComposerAccent({ className, ...props }) {
 		...props
 	});
 }
-function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown, ...props }) {
+function ChatComposerTextarea({ className, rows, disabled, readOnly, onChange, onKeyDown, ref, ...props }) {
 	const input = useChatComposerContext();
+	const textareaRef = useRef(null);
+	const { registerInsertionTarget } = input;
+	useEffect(() => registerInsertionTarget((text) => {
+		const textarea = textareaRef.current;
+		if (!textarea) return;
+		textarea.focus();
+		textarea.setRangeText(text, textarea.selectionStart, textarea.selectionEnd, "end");
+		textarea.dispatchEvent(new Event("input", { bubbles: true }));
+	}), [registerInsertionTarget]);
 	function handleChange(event) {
 		onChange?.(event);
 		if (!event.defaultPrevented) input.setValue(event.currentTarget.value);
@@ -80,7 +90,12 @@ function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown,
 		onKeyDown?.(event);
 		input.handleKeyDown(event);
 	}
+	function attachTextarea(node) {
+		textareaRef.current = node;
+		assignRef(ref, node);
+	}
 	return /* @__PURE__ */ jsx("textarea", {
+		ref: attachTextarea,
 		"data-control-ui": "chat-composer",
 		"data-control-family": "chat-composer",
 		"data-slot": "textarea",
@@ -90,8 +105,10 @@ function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown,
 		onChange: handleChange,
 		onKeyDown: handleKeyDown,
 		disabled: disabled || input.isDisabled,
+		readOnly: readOnly || input.isLocked,
+		"aria-busy": input.isLocked || void 0,
 		rows: rows ?? input.rows,
-		className: cn("field-sizing-content min-h-16 max-h-[40dvh] w-full resize-none outline-none px-[var(--padding-x)] py-[var(--padding-y)] disabled:cursor-not-allowed", className)
+		className: cn("field-sizing-content min-h-16 max-h-[40dvh] w-full resize-none px-[var(--padding-x)] py-[var(--padding-y)] disabled:cursor-not-allowed", className)
 	});
 }
 function ChatComposerToolbar({ className, ...props }) {
@@ -117,24 +134,48 @@ function ChatComposerFooter({ className, ...props }) {
 		"data-control-ui": "chat-composer",
 		"data-control-family": "chat-composer",
 		"data-slot": "footer",
-		className: cn(className),
+		className,
 		...props
 	});
 }
-function ChatComposerSubmit({ className, disabled, children = "Send", ...props }) {
+function ChatComposerSubmit({ className, disabled, iconOnly = false, children = "Send", onStop, stopLabel = "Stop response", stopIcon = /* @__PURE__ */ jsx(Square, {
+	"aria-hidden": "true",
+	className: "fill-current"
+}), onClick, "aria-label": ariaLabel, ...props }) {
 	const input = useChatComposerContext();
+	const isStop = input.isLocked && onStop !== void 0;
+	const isBusy = input.isLocked && !isStop;
+	function handleClick(event) {
+		onClick?.(event);
+		if (isStop && !event.defaultPrevented) onStop();
+	}
+	function content() {
+		if (isStop) return iconOnly ? stopIcon : stopLabel;
+		if (!isBusy) return children;
+		if (iconOnly) return /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true" });
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true" }), children] });
+	}
 	return /* @__PURE__ */ jsx(Button, {
 		"data-control-ui": "chat-composer",
 		"data-slot": "submit",
-		type: "submit",
+		"data-stop": isStop ? "true" : void 0,
+		type: isStop ? "button" : "submit",
 		variant: "solid",
 		tone: "primary",
 		size: "xs",
-		disabled: disabled || !input.canSubmit,
+		iconOnly,
+		disabled: isStop ? disabled : disabled || !input.canSubmit,
+		"aria-busy": isBusy || void 0,
+		"aria-label": isStop && iconOnly ? stopLabel : ariaLabel,
+		onClick: handleClick,
 		className,
 		...props,
-		children
+		children: content()
 	});
 }
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
 //#endregion
 export { ChatComposer, ChatComposerAccent, ChatComposerFooter, ChatComposerShell, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar, ChatComposerTools, useChatComposerContext };

package/dist/chat-layout.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "./control-props.js";
 import { Button } from "./ui/button.js";
 import { ChatLayoutKnobStyle } from "./knob-contracts/chat-layout-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
@@ -8,6 +9,24 @@ export type ChatLayoutProps = Omit<ComponentProps<"section">, "style"> & {
   style?: CSSProperties & ChatLayoutKnobStyle;
 };
 export declare function ChatLayout({ children, chrome, className, ...props }: ChatLayoutProps): import("react").JSX.Element;
+export type ChatLayoutHeaderProps = Omit<ComponentProps<"header">, "style"> & {
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+export declare function ChatLayoutHeader({ className, ...props }: ChatLayoutHeaderProps): import("react").JSX.Element;
+export type ChatLayoutTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+/** Renders a `div`; pass `render={(props) => <h2 {...props} />}` for the heading level the page needs. */
+export declare function ChatLayoutTitle({ render, className, ...props }: ChatLayoutTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ChatLayoutDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+export declare function ChatLayoutDescription({ className, ...props }: ChatLayoutDescriptionProps): import("react").JSX.Element;
+export type ChatLayoutActionsProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+export declare function ChatLayoutActions({ className, ...props }: ChatLayoutActionsProps): import("react").JSX.Element;
 export type ChatThreadProps = ComponentProps<"div"> & {
   composer?: ReactNode;
 };

package/dist/chat-layout.js

@@ -2,11 +2,19 @@
 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 { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown } from "lucide-react";
 //#region src/chat-layout.tsx
+const chromeSizing = {
+	panel: "mx-auto min-h-[640px] max-w-3xl",
+	embedded: "h-full min-h-0 flex-1"
+};
 function ChatLayout({ children, chrome = "panel", className, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
 		"data-control-ui": "chat-layout",
@@ -14,7 +22,7 @@ function ChatLayout({ children, chrome = "panel", className, ...props }) {
 		"data-slot": "root",
 		"data-chrome": chrome,
 		"data-surface": chrome === "panel" ? "panel" : void 0,
-		className: cn("relative mx-auto flex min-h-[640px] w-full max-w-3xl flex-col overflow-hidden", className),
+		className: cn("relative flex w-full flex-col overflow-hidden", chromeSizing[chrome], className),
 		...props,
 		children: [chrome === "panel" ? /* @__PURE__ */ jsx(SkinAdornment, {
 			scope: "chat-layout",
@@ -23,39 +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", {
-			ref: viewportRef,
-			"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("min-h-0 min-w-0 flex-1 overflow-y-auto", className),
-			...props,
+	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", {
-				ref: contentRef,
-				className: "relative flex min-h-full min-w-0 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]
+				"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 })]
 			})
 		})
 	});
@@ -97,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 };