@navikt/ds-react/esm/chat/Chat.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React, { HTMLAttributes } from "react";
import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
import { AkselColor } from "../types/index.js";
import { HeadingProps } from "../typography/index.js";
import Bubble, { type ChatBubbleProps } from "./Bubble.js";
export declare const VARIANTS: readonly ["subtle", "info", "neutral"];
export declare const POSITIONS: readonly ["left", "right"];
export declare const SIZES: readonly ["medium", "small"];
interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Children of type `<Chat.Bubble />`.
     */
    children: React.ReactNode;
    /**
     * Name/sender on first bubble.
     */
    name?: string;
    /**
     * Timestamp on first bubble.
     */
    timestamp?: string;
    /**
     * We recommend using an SVG or plain text initials as avatar.
     *
     * **Hidden for screen readers.**
     */
    avatar?: React.ReactNode;
    /**
     * @deprecated Use `data-color` prop instead.
     */
    variant?: (typeof VARIANTS)[number];
    /**
     * Positions avatar and bubbles.
     * @default "left"
     */
    position?: (typeof POSITIONS)[number];
    /**
     * Horizontal position of toptext.
     * @default Same as position
     */
    toptextPosition?: (typeof POSITIONS)[number];
    /**
     * Affects padding and font size in bubbles.
     * @default "medium"
     */
    size?: (typeof SIZES)[number];
    /**
     * The heading level for the toptext.
     * @default "3"
     */
    toptextHeadingLevel?: Exclude<HeadingProps["level"], "1">;
    /**
     * Overrides inherited color.
     *
     * We have disallowed status-colors.
     * @see 🏷️ {@link AkselColor}
     * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
     */
    "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
}
interface ChatComponent extends React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<HTMLDivElement>> {
    /**
     * @see 🏷️ {@link ChatBubbleProps}
     */
    Bubble: typeof Bubble;
}
/**
 * A component for communicating a dialog between two or more parties.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
 * @see 🏷️ {@link ChatProps}
 *
 * @example
 * ```jsx
 * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
 *   <Chat.Bubble>Hello!</Chat.Bubble>
 *   <Chat.Bubble>How can I help you?</Chat.Bubble>
 * </Chat>
 * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
 *   <Chat.Bubble>Hi there!</Chat.Bubble>
 * </Chat>
 * ```
 */
export declare const Chat: ChatComponent;
export default Chat;
export { Bubble as ChatBubble };
export type { ChatProps, ChatBubbleProps };