@ctrl-ui/react 0.8.0

package/dist/chat-composer-editor/types.d.ts

@@ -0,0 +1,29 @@
+import { ChatComposerSubmitPayload } from "../hooks/use-chat-composer.js";
+import { ReactNode } from "react";
+import { Command, Plugin } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { Node, NodeSpec, Schema } from "prosemirror-model";
+//#region src/chat-composer-editor/types.d.ts
+type ChatComposerEditorApi = {
+  getView: () => EditorView | null;
+  subscribe: (listener: () => void) => () => void;
+  registerKeyHandler: (handler: (event: KeyboardEvent) => boolean) => () => void;
+};
+type ChatComposerEditorOverlayProps = {
+  editor: ChatComposerEditorApi;
+};
+type ChatComposerEditorExtension = {
+  name: string;
+  nodes?: Record<string, NodeSpec>;
+  plugins?: (schema: Schema, editor: ChatComposerEditorApi) => Plugin[];
+  keymap?: (schema: Schema) => Record<string, Command>;
+  submitPayload?: (doc: Node) => Partial<ChatComposerSubmitPayload>;
+  Overlay?: (props: ChatComposerEditorOverlayProps) => ReactNode;
+};
+type ChatComposerEditorProps = {
+  className?: string;
+  placeholder?: string;
+  extensions?: readonly ChatComposerEditorExtension[];
+};
+//#endregion
+export { ChatComposerEditorApi, ChatComposerEditorExtension, ChatComposerEditorOverlayProps, ChatComposerEditorProps };

package/dist/chat-composer-editor.d.ts

@@ -0,0 +1,9 @@
+import { ChatComposerKnobStyle } from "./knob-contracts/chat-composer-knobs.js";
+import { ChatComposerEditorProps } from "./chat-composer-editor/types.js";
+import { CSSProperties } from "react";
+//#region src/chat-composer-editor.d.ts
+declare function ChatComposerEditor({ className, placeholder, extensions }: ChatComposerEditorProps & {
+  style?: CSSProperties & ChatComposerKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { ChatComposerEditor };

package/dist/chat-composer-editor.js

@@ -0,0 +1,154 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { useChatComposerContext } from "./chat-composer.js";
+import { MESSAGE_GHOST_INHERIT, spawnExitGhost } from "./chat-composer-editor/ghost.js";
+import { createEditorSchema } from "./chat-composer-editor/schema.js";
+import { docFromText, serializeDoc } from "./chat-composer-editor/serialize.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { baseKeymap, splitBlock } from "prosemirror-commands";
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+import { EditorState, Plugin } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+//#region src/chat-composer-editor.tsx
+const SUBMIT_KEY = "Enter";
+function ChatComposerEditor({ className, placeholder, extensions = [] }) {
+	const input = useChatComposerContext();
+	const mountRef = useRef(null);
+	const viewRef = useRef(null);
+	const inputRef = useRef(input);
+	useEffect(() => {
+		inputRef.current = input;
+	}, [input]);
+	const lastSerialized = useRef(input.value);
+	const [mounted, setMounted] = useState(false);
+	const listenersRef = useRef(/* @__PURE__ */ new Set());
+	const keyHandlersRef = useRef(/* @__PURE__ */ new Set());
+	const [api] = useState(() => ({
+		getView: () => viewRef.current,
+		subscribe: (listener) => {
+			listenersRef.current.add(listener);
+			return () => {
+				listenersRef.current.delete(listener);
+			};
+		},
+		registerKeyHandler: (handler) => {
+			keyHandlersRef.current.add(handler);
+			return () => {
+				keyHandlersRef.current.delete(handler);
+			};
+		}
+	}));
+	const [initialExtensions] = useState(extensions);
+	useEffect(() => {
+		const mount = mountRef.current;
+		if (!mount) return;
+		const exts = initialExtensions;
+		const schema = createEditorSchema(exts);
+		const extensionKeymap = {};
+		for (const extension of exts) Object.assign(extensionKeymap, extension.keymap?.(schema) ?? {});
+		const extensionPlugins = exts.flatMap((extension) => extension.plugins?.(schema, api) ?? []);
+		const submitMessage = (editorState) => {
+			const extra = {};
+			for (const extension of exts) Object.assign(extra, extension.submitPayload?.(editorState.doc) ?? {});
+			inputRef.current.submit(extra);
+			return true;
+		};
+		const state = EditorState.create({
+			schema,
+			doc: docFromText(schema, inputRef.current.value),
+			plugins: [
+				new Plugin({ props: { handleKeyDown: (_view, event) => {
+					for (const handler of keyHandlersRef.current) if (handler(event)) return true;
+					return false;
+				} } }),
+				...extensionPlugins,
+				history(),
+				keymap(extensionKeymap),
+				keymap({
+					"Mod-z": undo,
+					"Mod-y": redo,
+					"Shift-Mod-z": redo,
+					"Shift-Enter": splitBlock,
+					[SUBMIT_KEY]: submitMessage
+				}),
+				keymap(baseKeymap)
+			]
+		});
+		const view = new EditorView(mount, {
+			state,
+			attributes: {
+				"aria-label": "Message",
+				"aria-multiline": "true",
+				role: "textbox"
+			},
+			dispatchTransaction(transaction) {
+				const next = view.state.apply(transaction);
+				view.updateState(next);
+				if (transaction.docChanged) {
+					const text = serializeDoc(next.doc);
+					lastSerialized.current = text;
+					inputRef.current.setValue(text);
+				}
+				for (const listener of listenersRef.current) listener();
+			}
+		});
+		viewRef.current = view;
+		setMounted(true);
+		return () => {
+			view.destroy();
+			viewRef.current = null;
+		};
+	}, [api, initialExtensions]);
+	useEffect(() => {
+		const view = viewRef.current;
+		if (!view) return;
+		if (input.value === lastSerialized.current) return;
+		if (input.value === "" && lastSerialized.current !== "" && view.dom instanceof HTMLElement) spawnExitGhost(view.dom, MESSAGE_GHOST_INHERIT);
+		lastSerialized.current = input.value;
+		const { schema } = view.state;
+		view.updateState(EditorState.create({
+			schema,
+			doc: docFromText(schema, input.value),
+			plugins: view.state.plugins
+		}));
+	}, [input.value]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "chat-composer-editor",
+		"data-control-family": "chat-composer",
+		"data-slot": "root",
+		className: cn("relative", className),
+		children: [
+			input.value === "" && placeholder ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				"data-control-ui": "chat-composer-editor",
+				"data-control-family": "chat-composer",
+				"data-slot": "placeholder",
+				className: "pointer-events-none absolute left-[var(--padding-x)] top-[var(--padding-y)]",
+				children: placeholder
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: mountRef,
+				"data-control-ui": "chat-composer-editor",
+				"data-control-family": "chat-composer",
+				"data-slot": "editor",
+				className: cn("[&_.ProseMirror]:max-h-[40dvh] [&_.ProseMirror]:min-h-16 [&_.ProseMirror]:w-full [&_.ProseMirror]:overflow-y-auto [&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words [&_.ProseMirror]:px-[var(--padding-x)] [&_.ProseMirror]:py-[var(--padding-y)]", mounted ? "" : "hidden")
+			}),
+			mounted ? null : /* @__PURE__ */ jsx("textarea", {
+				"data-control-ui": "chat-composer-editor",
+				"data-control-family": "chat-composer",
+				"data-slot": "fallback",
+				"aria-label": "Message",
+				defaultValue: input.value,
+				readOnly: true,
+				rows: 2,
+				placeholder,
+				className: "min-h-16 w-full resize-none px-[var(--padding-x)] py-[var(--padding-y)]"
+			}),
+			mounted ? initialExtensions.map((extension) => extension.Overlay ? /* @__PURE__ */ jsx(extension.Overlay, { editor: api }, extension.name) : null) : null
+		]
+	});
+}
+//#endregion
+export { ChatComposerEditor };

package/dist/chat-composer.d.ts

@@ -0,0 +1,60 @@
+import { FormSubmitEvent } from "./control-props.js";
+import { Button } from "./ui/button.js";
+import { ChatComposerKnobStyle } from "./knob-contracts/chat-composer-knobs.js";
+import { ChatDensity } from "./hooks/use-chat-message.js";
+import { ChatComposerProps, ChatComposerSubmitPayload } from "./hooks/use-chat-composer.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/chat-composer.d.ts
+declare function useChatComposerContext(): {
+  value: string;
+  setValue: (nextValue: string) => void;
+  normalizedValue: string;
+  state: "disabled" | "idle" | "submitting";
+  density: ChatDensity;
+  isCompact: boolean;
+  isDisabled: boolean;
+  canSubmit: boolean;
+  rows: number;
+  sendCount: number;
+  clear: () => void;
+  submit: (extra?: Partial<ChatComposerSubmitPayload>) => void;
+  handleSubmit: (event: FormSubmitEvent) => void;
+  handleKeyDown: (event: {
+    key: string;
+    shiftKey: boolean;
+    defaultPrevented: boolean;
+    nativeEvent: {
+      isComposing: boolean;
+    };
+    preventDefault: () => void;
+  }) => void;
+};
+declare function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, className, children, ...props }: ChatComposerProps): import("react").JSX.Element;
+type ChatComposerShellProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatComposerKnobStyle;
+};
+declare function ChatComposerShell({ className, ...props }: ChatComposerShellProps): import("react").JSX.Element;
+type ChatComposerAccentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatComposerKnobStyle;
+};
+declare function ChatComposerAccent({ className, ...props }: ChatComposerAccentProps): import("react").JSX.Element;
+type ChatComposerTextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
+  style?: CSSProperties & ChatComposerKnobStyle;
+};
+declare function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown, ...props }: ChatComposerTextareaProps): import("react").JSX.Element;
+type ChatComposerToolbarProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ChatComposerKnobStyle;
+};
+declare function ChatComposerToolbar({ className, ...props }: ChatComposerToolbarProps): import("react").JSX.Element;
+type ChatComposerToolsProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatComposerKnobStyle;
+};
+declare function ChatComposerTools({ className, ...props }: ChatComposerToolsProps): import("react").JSX.Element;
+type ChatComposerFooterProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatComposerKnobStyle;
+};
+declare function ChatComposerFooter({ className, ...props }: ChatComposerFooterProps): import("react").JSX.Element;
+type ChatComposerSubmitProps = ComponentProps<typeof Button>;
+declare function ChatComposerSubmit({ className, disabled, children, ...props }: ChatComposerSubmitProps): import("react").JSX.Element;
+//#endregion
+export { ChatComposer, ChatComposerAccent, ChatComposerAccentProps, ChatComposerFooter, ChatComposerFooterProps, ChatComposerShell, ChatComposerShellProps, ChatComposerSubmit, ChatComposerSubmitProps, ChatComposerTextarea, ChatComposerTextareaProps, ChatComposerToolbar, ChatComposerToolbarProps, ChatComposerTools, ChatComposerToolsProps, useChatComposerContext };

package/dist/chat-composer.js

@@ -0,0 +1,134 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { hasSkinAdornment, skinAdornment } from "./skin.js";
+import { Button } from "./ui/button.js";
+import { useChatComposer } from "./hooks/use-chat-composer.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat-composer.tsx
+const ChatComposerContext = createContext(null);
+function useChatComposerContext() {
+	const context = useContext(ChatComposerContext);
+	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 }) {
+	const input = useChatComposer({
+		value,
+		defaultValue,
+		onValueChange,
+		onSubmit,
+		state,
+		density,
+		disabled,
+		trackSends: hasSkinAdornment("chat-composer", "send-layer")
+	});
+	const sendLayer = skinAdornment("chat-composer", "send-layer", { sendCount: input.sendCount });
+	return /* @__PURE__ */ jsx(ChatComposerContext.Provider, {
+		value: input,
+		children: /* @__PURE__ */ jsxs("form", {
+			"data-control-ui": "chat-composer",
+			"data-control-family": "chat-composer",
+			"data-slot": "root",
+			"data-state": state,
+			"data-density": density,
+			onSubmit: input.handleSubmit,
+			className: cn("sticky bottom-0 w-full", className),
+			...props,
+			children: [sendLayer !== void 0 && sendLayer !== null ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-0 -z-10 overflow-clip contain-paint",
+				children: sendLayer
+			}) : null, children]
+		})
+	});
+}
+function ChatComposerShell({ className, ...props }) {
+	const input = useChatComposerContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-composer",
+		"data-control-family": "chat-composer",
+		"data-slot": "shell",
+		"data-state": input.state,
+		className: cn("relative overflow-hidden", className),
+		...props
+	});
+}
+function ChatComposerAccent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-composer",
+		"data-control-family": "chat-composer",
+		"data-slot": "accent",
+		"aria-hidden": "true",
+		className: cn("pointer-events-none absolute inset-x-5 top-0", className),
+		...props
+	});
+}
+function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown, ...props }) {
+	const input = useChatComposerContext();
+	function handleChange(event) {
+		onChange?.(event);
+		if (!event.defaultPrevented) input.setValue(event.currentTarget.value);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		input.handleKeyDown(event);
+	}
+	return /* @__PURE__ */ jsx("textarea", {
+		...props,
+		"data-control-ui": "chat-composer",
+		"data-control-family": "chat-composer",
+		"data-slot": "textarea",
+		"aria-label": "Message",
+		value: input.value,
+		onChange: handleChange,
+		onKeyDown: handleKeyDown,
+		disabled: disabled ?? input.isDisabled,
+		rows: rows ?? input.rows,
+		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 }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-composer",
+		"data-control-family": "chat-composer",
+		"data-slot": "toolbar",
+		className: cn("flex items-center justify-between", className),
+		...props
+	});
+}
+function ChatComposerTools({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-composer",
+		"data-control-family": "chat-composer",
+		"data-slot": "tools",
+		className: cn("flex min-w-0 items-center", className),
+		...props
+	});
+}
+function ChatComposerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-composer",
+		"data-control-family": "chat-composer",
+		"data-slot": "footer",
+		className: cn(className),
+		...props
+	});
+}
+function ChatComposerSubmit({ className, disabled, children = "Send", ...props }) {
+	const input = useChatComposerContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "chat-composer",
+		"data-slot": "submit",
+		type: "submit",
+		variant: "solid",
+		tone: "primary",
+		size: "xs",
+		disabled: disabled ?? !input.canSubmit,
+		className,
+		...props,
+		children
+	});
+}
+//#endregion
+export { ChatComposer, ChatComposerAccent, ChatComposerFooter, ChatComposerShell, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar, ChatComposerTools, useChatComposerContext };

package/dist/chat-layout.d.ts

@@ -0,0 +1,27 @@
+import { ChatLayoutKnobStyle } from "./knob-contracts/chat-layout-knobs.js";
+import { CSSProperties, ComponentProps, ElementType, ReactNode } from "react";
+//#region src/chat-layout.d.ts
+type ChatThoughtCollapsible = {
+  Root: ElementType;
+  Trigger: ElementType;
+  Content: ElementType;
+};
+type ChatLayoutProps = Omit<ComponentProps<"section">, "style"> & {
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+declare function ChatLayout({ children, className, ...props }: ChatLayoutProps): import("react").JSX.Element;
+type ChatThreadProps = ComponentProps<"div">;
+declare function ChatThread({ children, className, ...props }: ChatThreadProps): import("react").JSX.Element;
+type ChatTurnProps = ComponentProps<"section"> & {
+  from: "user" | "assistant";
+};
+declare function ChatTurn({ from, children, className, ...props }: ChatTurnProps): import("react").JSX.Element;
+type ChatThoughtProps = Omit<ComponentProps<"div">, "style"> & {
+  details?: ReactNode;
+  defaultOpen?: boolean;
+  collapsible?: ChatThoughtCollapsible;
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+declare function ChatThought({ children, details, defaultOpen, collapsible, className, style, ...props }: ChatThoughtProps): import("react").JSX.Element;
+//#endregion
+export { ChatLayout, ChatLayoutProps, ChatThought, ChatThoughtProps, ChatThread, ChatThreadProps, ChatTurn, ChatTurnProps };

package/dist/chat-layout.js

@@ -0,0 +1,114 @@
+import { cn } from "./lib/cn.js";
+import { skinAdornment } from "./skin.js";
+import { ScrollArea } from "./ui/scroll-area.js";
+import { Activity, ActivityContent, ActivityTitle, ActivityTrigger } from "./activity.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat-layout.tsx
+function ChatLayout({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"data-control-ui": "chat-layout",
+		"data-control-family": "chat-layout",
+		"data-slot": "root",
+		"data-surface": "panel",
+		className: cn("relative mx-auto flex min-h-[640px] w-full max-w-3xl flex-col overflow-hidden", className),
+		...props,
+		children: [skinAdornment("chat-layout", "titlebar", {}), children]
+	});
+}
+function ChatThread({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-thread",
+		"data-control-family": "chat-layout",
+		"data-chat-layout-kind": "thread",
+		"data-slot": "root",
+		className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", className),
+		...props,
+		children
+	});
+}
+function ChatTurn({ from, children, className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-control-ui": "chat-turn",
+		"data-control-family": "chat-layout",
+		"data-slot": "turn",
+		"data-from": from,
+		className: cn("flex w-full flex-col", from === "user" && "items-end", className),
+		...props,
+		children
+	});
+}
+function ChatThought({ children = "Thought for a couple of seconds", details = "Read the attachment, grouped the notes by intent, and kept the final markdown compact enough to scan.", defaultOpen = false, collapsible, className, style, ...props }) {
+	if (collapsible) {
+		const Root = collapsible.Root;
+		const Trigger = collapsible.Trigger;
+		const Content = collapsible.Content;
+		return /* @__PURE__ */ jsxs(Root, {
+			defaultOpen,
+			"data-control-ui": "chat-thought",
+			"data-control-family": "chat-layout",
+			"data-chat-layout-kind": "thought",
+			"data-slot": "root",
+			className: cn("self-start", className),
+			style,
+			...props,
+			children: [/* @__PURE__ */ jsxs(Trigger, {
+				type: "button",
+				"data-control-ui": "chat-thought",
+				"data-control-family": "chat-layout",
+				"data-slot": "trigger",
+				className: "inline-flex items-center",
+				children: [children, /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-control-ui": "chat-thought",
+					"data-control-family": "chat-layout",
+					"data-slot": "chevron",
+					children: "›"
+				})]
+			}), /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(ScrollArea, {
+				maxHeight: "min(24rem, 50dvh)",
+				lockAxis: "x",
+				viewportProps: {
+					"data-control-ui": "activity",
+					"data-control-family": "activity",
+					"data-slot": "content-viewport"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					"data-control-ui": "chat-thought",
+					"data-control-family": "chat-layout",
+					"data-slot": "details",
+					className: "min-w-0 px-1 pb-2 pt-1",
+					children: [skinAdornment("chat-thought", "details", {}), details]
+				})
+			}) })]
+		});
+	}
+	return /* @__PURE__ */ jsxs(Activity, {
+		state: "success",
+		defaultOpen,
+		"data-control-ui": "chat-thought",
+		"data-control-family": "chat-layout",
+		"data-chat-layout-kind": "thought",
+		"data-slot": "root",
+		className: cn("self-start", className),
+		style,
+		...props,
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+			"data-control-ui": "chat-thought",
+			"data-control-family": "chat-layout",
+			"data-slot": "trigger",
+			children: /* @__PURE__ */ jsx(ActivityTitle, {
+				"data-control-ui": "chat-thought",
+				"data-control-family": "chat-layout",
+				"data-slot": "title",
+				children
+			})
+		}), /* @__PURE__ */ jsxs(ActivityContent, {
+			"data-control-ui": "chat-thought",
+			"data-control-family": "chat-layout",
+			"data-slot": "details",
+			children: [skinAdornment("chat-thought", "details", {}), details]
+		})]
+	});
+}
+//#endregion
+export { ChatLayout, ChatThought, ChatThread, ChatTurn };

package/dist/chat-message.d.ts

@@ -0,0 +1,31 @@
+import { ChatMessageKnobStyle } from "./knob-contracts/chat-message-knobs.js";
+import { ChatMessageProps } from "./hooks/use-chat-message.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/chat-message.d.ts
+declare function ChatMessage({ from, state, density, className, children, ...props }: ChatMessageProps): import("react").JSX.Element;
+type ChatMessageRowProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ChatMessageKnobStyle;
+};
+declare function ChatMessageRow({ className, children, ...props }: ChatMessageRowProps): import("react").JSX.Element;
+type ChatMessageAvatarProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatMessageKnobStyle;
+};
+declare function ChatMessageAvatar({ className, ...props }: ChatMessageAvatarProps): import("react").JSX.Element;
+type ChatMessageBodyProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ChatMessageKnobStyle;
+};
+declare function ChatMessageBody({ className, ...props }: ChatMessageBodyProps): import("react").JSX.Element;
+type ChatMessageHeaderProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatMessageKnobStyle;
+};
+declare function ChatMessageHeader({ className, ...props }: ChatMessageHeaderProps): import("react").JSX.Element;
+type ChatMessageContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatMessageKnobStyle;
+};
+declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): import("react").JSX.Element;
+type ChatMessageActionsProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatMessageKnobStyle;
+};
+declare function ChatMessageActions({ className, ...props }: ChatMessageActionsProps): import("react").JSX.Element;
+//#endregion
+export { ChatMessage, ChatMessageActions, ChatMessageActionsProps, ChatMessageAvatar, ChatMessageAvatarProps, ChatMessageBody, ChatMessageBodyProps, ChatMessageContent, ChatMessageContentProps, ChatMessageHeader, ChatMessageHeaderProps, ChatMessageRow, ChatMessageRowProps };

package/dist/chat-message.js

@@ -0,0 +1,95 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { useChatMessage } from "./hooks/use-chat-message.js";
+import { createContext, useContext } from "react";
+import { jsx } 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 }) {
+	const message = useChatMessage({
+		from,
+		state,
+		density
+	});
+	return /* @__PURE__ */ jsx(ChatMessageContext.Provider, {
+		value: message,
+		children: /* @__PURE__ */ jsx("article", {
+			"data-control-ui": "chat-message",
+			"data-control-family": "chat-message",
+			"data-slot": "root",
+			"data-role": from,
+			"data-state": state,
+			"data-density": density,
+			className: cn("w-full", className),
+			...props,
+			children
+		})
+	});
+}
+function ChatMessageRow({ className, children, ...props }) {
+	const message = useChatMessageContext();
+	return /* @__PURE__ */ jsx("div", {
+		"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),
+		...props,
+		children
+	});
+}
+function ChatMessageAvatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "avatar",
+		className: cn("flex shrink-0 items-center justify-center", className),
+		...props
+	});
+}
+function ChatMessageBody({ className, ...props }) {
+	useChatMessageContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "body",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function ChatMessageHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "header",
+		className: cn("flex items-center", className),
+		...props
+	});
+}
+function ChatMessageContent({ className, ...props }) {
+	const message = useChatMessageContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"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),
+		...props
+	});
+}
+function ChatMessageActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "actions",
+		className: cn("flex items-center", className),
+		...props
+	});
+}
+//#endregion
+export { ChatMessage, ChatMessageActions, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageHeader, ChatMessageRow };