import { CSSResultArray, TemplateResult } from 'lit'; import { LuzmoElement } from '../../utils/base'; export type ChatMessagePosition = 'left' | 'right' | 'middle'; export type ChatMessageVariant = 'default' | 'primary' | 'secondary'; export type ChatMessageTreatment = 'fill' | 'outline'; export type ChatMessageMeta = 'inside' | 'outside'; export type ChatMessageActions = 'inside' | 'outside'; export type ChatMessageAvatarPlacement = 'top' | 'middle' | 'bottom'; declare const LuzmoChatMessage_base: typeof LuzmoElement & { new (...args: any[]): import("../..").SizedElementInterface; prototype: import("../..").SizedElementInterface; }; /** * A chat message component for displaying conversation messages. * * @element luzmo-chat-message * * @slot - Default slot for message content * @slot message - Alternative slot for message content (may include custom elements) * @slot avatar - Slot for avatar element (use luzmo-avatar) * @slot actions - Slot for message actions * @slot extra-actions - Slot for extra actions that appear on hover/click/longclick (absolute positioned) */ export declare class LuzmoChatMessage extends LuzmoChatMessage_base { private defaultSlotObserver; constructor(); connectedCallback(): void; disconnectedCallback(): void; static get styles(): CSSResultArray; /** * The horizontal position of the message. * @attr position */ position: ChatMessagePosition; /** * The semantic variant of the message. * - `default`: Standard neutral message * - `primary`: Primary color theme * - `secondary`: Secondary color theme * @attr variant */ variant: ChatMessageVariant; /** * The visual treatment of the message. * - `fill`: Full background color (default) * - `outline`: Border only with transparent background * @attr treatment */ treatment: ChatMessageTreatment; /** * Whether the message should have reduced visual emphasis. * When quiet is true, removes border, background, and uses normal font color. * @attr quiet */ quiet: boolean; /** * The name of the user who sent the message. * @attr name */ name?: string; /** * The datetime when the message was sent (ISO 8601 string). * @attr datetime */ datetime?: string; /** * Intl.DateTimeFormatOptions object for formatting the datetime. * @attr datetime-format-options */ datetimeFormatOptions?: Intl.DateTimeFormatOptions; /** * The language to use for formatting the datetime. * @attr datetime-language */ datetimeLanguage?: string; /** * Controls whether name and datetime render inside the message header or outside. * @attr meta */ meta: ChatMessageMeta; /** * Controls whether the actions slot renders inside or outside the message. * @attr actions */ actionsPosition: ChatMessageActions; /** * The vertical placement of the avatar relative to the message. * @attr avatar-placement */ avatarPlacement: ChatMessageAvatarPlacement; /** * Whether the component has an avatar slot. * @private */ private _hasAvatar; /** * Whether the component has an actions slot. * @private */ private _hasActions; /** * Whether the component has an extra-actions slot. * @private */ private _hasExtraActions; /** * Language resolution controller for internationalization. * @private */ private languageResolver; private _handleAvatarSlotChange; private _handleActionsSlotChange; private _handleExtraActionsSlotChange; private shouldUpdateForDefaultSlotMutation; private get defaultSlotMarkdown(); private renderDefaultSlotFallback; /** * Formats the message datetime using Intl.DateTimeFormat. * @private */ private get formattedDatetime(); /** * Determines which corners should be squared based on position and avatar placement. * @private */ private get squaredCorners(); /** * Renders the meta information (user name and datetime) inside the message header. * @private */ private renderMeta; /** * Renders the actions slot inside or outside the message. * @private */ private renderActions; protected render(): TemplateResult; } export {};