@fluentui/react-northstar/dist/es/components/Chat/ChatMessage.d.ts

A themable React component library.

import { Accessibility, ChatMessageBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ComponentEventHandler, ComponentKeyboardEventHandler, FluentComponentStaticProps, ShorthandCollection, ShorthandValue } from '../../types';
import { ChildrenComponentProps, ContentComponentProps, UIComponentProps } from '../../utils';
import { PopperShorthandProps } from '../../utils/positioner';
import { BoxProps } from '../Box/Box';
import { LabelProps } from '../Label/Label';
import { MenuProps } from '../Menu/Menu';
import { MenuItemProps } from '../Menu/MenuItem';
import { ReactionProps } from '../Reaction/Reaction';
import { ReactionGroupProps } from '../Reaction/ReactionGroup';
import { TextProps } from '../Text/Text';
import { ChatDensity } from './chatDensity';
import { ChatMessageDetailsProps } from './ChatMessageDetails';
import { ChatMessageHeaderProps } from './ChatMessageHeader';
import { ChatMessageReadStatusProps } from './ChatMessageReadStatus';
export interface ChatMessageSlotClassNames {
    actionMenu: string;
    author: string;
    badge: string;
    bar: string;
    bubble: string;
    bubbleInset: string;
    body: string;
    compactBody: string;
    reactionGroup: string;
    timestamp: string;
}
export declare type ChatMessageLayout = 'default' | 'refresh';
export interface ChatMessageProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps<ShorthandValue<BoxProps>> {
    /** Accessibility behavior if overridden by the user. */
    accessibility?: Accessibility<ChatMessageBehaviorProps>;
    /**
     * Menu with actions of the message.
     * popper: alters the action menu positioning.
     * inline: whether the action menu should be rendered inline with the chat message, or in the body. It's true by default.
     * showActionMenu: controls if the action menu is visible or not.
     */
    actionMenu?: ShorthandValue<MenuProps & {
        popper?: PopperShorthandProps;
        inline?: boolean;
        showActionMenu?: boolean;
    }> | ShorthandCollection<MenuItemProps & {
        inline?: boolean;
        showActionMenu?: boolean;
    }>;
    /** Controls messages's relation to other chat messages. Is automatically set by the ChatItem. */
    attached?: boolean | 'top' | 'bottom';
    /** Author of the message. */
    author?: ShorthandValue<TextProps>;
    /** Badge attached to the message. */
    badge?: ShorthandValue<LabelProps>;
    /** A message can format the badge to appear at the start or the end of the message. */
    badgePosition?: 'start' | 'end';
    /** A message can have a custom body. Only rendered in compact density. */
    compactBody?: ShorthandValue<BoxProps>;
    /** Chat density. Is automatically set by the Chat. */
    density?: ChatDensity;
    /** Message details info slot. Displayed in the header or body in comfy and compact density respectively. */
    details?: ShorthandValue<ChatMessageDetailsProps>;
    /** A message can have a custom header. */
    header?: ShorthandValue<ChatMessageHeaderProps>;
    /** Optional slot for inserting content into the default header. */
    headerContent?: React.ReactNode;
    /** Indicates whether message belongs to the current user. */
    mine?: boolean;
    /**
     * Called after user's blur.
     * @param event - React's original SyntheticEvent.
     * @param data - All props.
     */
    onBlur?: ComponentEventHandler<ChatMessageProps>;
    /**
     * Called after user's focus.
     * @param event - React's original SyntheticEvent.
     * @param data - All props.
     */
    onFocus?: ComponentEventHandler<ChatMessageProps>;
    /**
     * Called on chat message item key down.
     * @param event - React's original SyntheticEvent.
     * @param data - All props and proposed value.
     */
    onKeyDown?: ComponentKeyboardEventHandler<ChatMessageProps>;
    /**
     * Called after user enters by mouse.
     * @param event - React's original SyntheticEvent.
     * @param data - All props.
     */
    onMouseEnter?: ComponentEventHandler<ChatMessageProps>;
    /**
     * Called after user leaves by mouse.
     * @param event - React's original SyntheticEvent.
     * @param data - All props.
     */
    onMouseLeave?: ComponentEventHandler<ChatMessageProps>;
    /** Allows suppression of action menu positioning for performance reasons. */
    positionActionMenu?: boolean;
    /** Reaction group applied to the message. */
    reactionGroup?: ShorthandValue<ReactionGroupProps> | ShorthandCollection<ReactionProps>;
    /** A message can format the reactions group to appear at the start or the end of the message. */
    reactionGroupPosition?: 'start' | 'end';
    /** Message read status indicator. */
    readStatus?: ShorthandValue<ChatMessageReadStatusProps>;
    /** Timestamp of the message. */
    timestamp?: ShorthandValue<TextProps>;
    /** Positions an actionMenu slot in "fixed" mode. */
    unstable_overflow?: boolean;
    /** A message can render with different layouts. */
    unstable_layout?: ChatMessageLayout;
    /** Indicates whether the message is in a failed state. */
    failed?: boolean;
    /** A message can have a custom body element (only applicable to "refresh" layout). */
    body?: ShorthandValue<BoxProps>;
    /** A message can have a custom bubble element (only applicable to "refresh" layout). */
    bubble?: ShorthandValue<BoxProps>;
    /** A message can have a custom bubble inset element which sits next to the bubble (only applicable to "refresh" layout). */
    bubbleInset?: ShorthandValue<BoxProps>;
    /** Optional override for the content in the default bubble inset (only applicable to "refresh" layout). */
    bubbleInsetContent?: React.ReactNode;
}
export declare type ChatMessageStylesProps = Pick<ChatMessageProps, 'attached' | 'badgePosition' | 'density' | 'mine'> & {
    hasBadge: boolean;
    hasHeaderReactionGroup: boolean;
    hasReactions: boolean;
    layout: ChatMessageLayout;
    failed: boolean;
    focused: boolean;
    hasActionMenu: boolean;
    showActionMenu: boolean;
};
export declare const chatMessageClassName = "ui-chat__message";
export declare const chatMessageSlotClassNames: ChatMessageSlotClassNames;
/**
 * A ChatMessage represents a single message in chat.
 */
export declare const ChatMessage: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof ChatMessageProps> & {
    as?: TExtendedElementType;
} & ChatMessageProps) => JSX.Element) & {
    propTypes?: React.WeakValidationMap<ChatMessageProps> & {
        as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
    };
    contextTypes?: PropTypes.ValidationMap<any>;
    defaultProps?: Partial<ChatMessageProps & {
        as: "div";
    }>;
    displayName?: string;
    readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
        ref?: React.Ref<HTMLDivElement>;
    }, "as" | keyof ChatMessageProps> & {
        as?: "div";
    } & ChatMessageProps;
} & FluentComponentStaticProps<ChatMessageProps>;