/**
 * @file ChatMessage.tsx
 * @input Uses React, StyleX, ChatContext, theme tokens
 * @output Exports ChatMessage component and ChatMessageProps
 * @position Sender context wrapper — handles avatar, name, alignment by sender role
 *
 * Layout (with avatar):
 *   [Avatar] [Name              ]
 *            [Content/Bubbles   ]
 *            [Metadata          ]
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Chat/index.ts (exports)
 * - /apps/storybook/stories/Chat.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/ChatMessage/ (block examples)
 */
import { type ReactNode } from 'react';
import { type ChatMessageSender, type ChatDensity } from './ChatContext';
import type { BaseProps } from '../BaseProps';
export interface ChatMessageProps extends BaseProps<HTMLElement> {
    ref?: React.Ref<HTMLElement>;
    sender: ChatMessageSender;
    /**
     * Message body — bubbles, tool calls, images, or any free-form content.
     * Custom (non-bubble) children render flush with the message edge; wrap
     * them in a ghost bubble (`<ChatMessageBubble variant="ghost">`) to align
     * them with the bubble's text column, and add `width="100%"` when they
     * should span the full message column.
     */
    children: ReactNode;
    avatar?: ReactNode;
    /**
     * Sender name rendered above the message body.
     * Use when the first child is raw content (not a bubble).
     * If the first child is a ChatMessageBubble, put the name on the
     * bubble's `name` prop instead — it aligns with the bubble's padding.
     */
    name?: ReactNode;
    /**
     * Metadata rendered below the message body.
     * Use when the last child is raw content (not a bubble).
     * If the last child is a ChatMessageBubble, put metadata on the
     * bubble's `metadata` prop instead — it aligns with the bubble's padding.
     */
    metadata?: ReactNode;
    density?: ChatDensity;
}
/**
 * Sender context wrapper for chat messages.
 *
 * Provides sender and density context to child components.
 * Use ChatMessageMetadata as a child for timestamp, status, and footer.
 *
 * @example
 * ```
 * <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="md" />}>
 *   <ChatMessageBubble>Hello!</ChatMessageBubble>
 *   <ChatMessageMetadata timestamp="2:30 PM" />
 * </ChatMessage>
 * ```
 */
export declare function ChatMessage({ sender, children, avatar, name, metadata, density: densityProp, xstyle, className, style: styleProp, 'data-testid': testId, ref, ...rest }: ChatMessageProps): import("react").JSX.Element;
export declare namespace ChatMessage {
    var displayName: string;
}
//# sourceMappingURL=ChatMessage.d.ts.map