/**
 * @file ChatMessageBubble.tsx
 * @input Uses React, StyleX, ChatMessageContext, theme tokens
 * @output Exports ChatMessageBubble component and ChatMessageBubbleProps
 * @position Styled content container — the actual "chat bubble" with sender-aware styling
 *
 * Reads sender from parent ChatMessage context to auto-style background.
 * Optional — not all message content needs bubble treatment.
 *
 * Usage guidance:
 * - If you use bubbles on one side (e.g. assistant), use them consistently
 *   for all messages on that side. Use `ghost` variant for content that
 *   needs alignment without a visual boundary.
 * - For custom content (cards, attachments, citations) that should span
 *   the full message column instead of the default width cap, combine
 *   `ghost` with `width="100%"` (#2574).
 * - Put `name` on the first bubble in a message, `metadata` on the last.
 * - For unbubbled messages, use ChatMessage's `name` and `metadata`
 *   props instead.
 *
 * 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/ChatMessageBubble/ (block examples)
 */
import type { ReactNode } from 'react';
import type { SizeValue } from '../utils/types';
import type { BaseProps } from '../BaseProps';
export type ChatMessageBubbleVariant = 'filled' | 'ghost';
export interface ChatMessageBubbleProps extends BaseProps<HTMLDivElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Bubble content — text, Markdown, or any ReactNode.
     */
    children: ReactNode;
    /**
     * Visual variant.
     * - 'filled': background color based on sender (default)
     * - 'ghost': no background, but keeps padding for consistent alignment
     * @default 'filled'
     */
    variant?: ChatMessageBubbleVariant;
    /**
     * Sender name rendered above the bubble, aligned with bubble text padding.
     * Use when the first content in a message is a bubble.
     * If the first content is raw (no bubble), use ChatMessage's `name`
     * prop instead.
     */
    name?: ReactNode;
    /**
     * Metadata content rendered below the bubble, aligned with bubble text padding.
     * Use when the last content in a message is a bubble.
     * If the last content is raw (no bubble), use ChatMessage's `metadata`
     * prop instead.
     */
    metadata?: ReactNode;
    /**
     * Position within a multi-bubble group.
     * Controls corner radius reduction on the sender side.
     * - 'first': bottom sender-side corner tightened
     * - 'middle': both sender-side corners tightened
     * - 'last': top sender-side corner tightened
     * Leave unset for standalone bubbles (full radius).
     */
    group?: 'first' | 'middle' | 'last';
    /**
     * Width of the bubble.
     * Numbers are treated as pixels, strings are used as-is (e.g. "100%").
     * When set, replaces the default `max(80%, 280px)` width cap; leave unset
     * to keep the cap. Combine with `variant="ghost"` to let custom content
     * (an artifact card, attachments) span the full message column.
     */
    width?: SizeValue;
}
/**
 * Styled content container — the chat "bubble."
 *
 * Reads sender from parent ChatMessage context to auto-style background.
 * Use `group` prop for multi-bubble corner grouping.
 *
 * @example
 * ```
 * <ChatMessage sender="user">
 *   <ChatMessageBubble
 *     name="Cindy"
 *     metadata={<ChatMessageMetadata timestamp="2:30 PM" status="read" />}>
 *     Hey, how's it going?
 *   </ChatMessageBubble>
 * </ChatMessage>
 * ```
 */
export declare function ChatMessageBubble({ children, variant, name, metadata, group, width, xstyle, className, style: styleProp, 'data-testid': testId, ref, ...rest }: ChatMessageBubbleProps): import("react").JSX.Element;
export declare namespace ChatMessageBubble {
    var displayName: string;
}
//# sourceMappingURL=ChatMessageBubble.d.ts.map