@eccenca/gui-elements/dist/types/components/Chat/ChatContent.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import { TestableComponent } from "../../components/interfaces";
import { MarkdownProps } from "./../../cmem/markdown/Markdown";
import { ContextMenuProps } from "./../ContextOverlay/ContextMenu";
import { DepictionProps } from "./../Depiction/Depiction";
import { IconButtonProps } from "./../Icon/IconButton";
import { OverflowTextProps } from "./../Typography";
export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
    /**
     * Should be a line of text, e.g. username, timestamp, ...
     */
    statusLine?: React.ReactElement<OverflowTextProps>;
    /**
     * How the chat content box is displayed.
     */
    displayType?: "free" | "simple" | "bubble";
    /**
     * A depiction used as avatar next to the content box.
     */
    avatar?: React.ReactElement<DepictionProps>;
    /**
     * If indented then the content box has some white space on the opposite side to the alignment
     */
    indentationSize?: "small" | "medium" | "large";
    /**
     * How the content box and avatar is aligned.
     * If `left` is set then the avatar is on the left side, and the indentation on the right side.
     */
    alignment?: "left" | "right";
    /**
     * If set then the chat bubble only grows to a height of 50% of the viewport.
     * In case you need to set other maximum heights then use the `style` property directly.
     */
    limitHeight?: boolean;
    /**
     * If given then the content is automatically parsed and displayed by our `<Markdown />` component.
     * `children` need to a `string` then, otherwise it cannot be parsed.
     */
    markdownProps?: Omit<MarkdownProps, "children">;
    /**
     * Could be used to add some type of toggle button or to include a context menu.
     */
    actionButton?: React.ReactElement<IconButtonProps> | React.ReactElement<ContextMenuProps>;
}
/**
 * Component to display single chat contents, including avatar and status line.
 */
export declare const ChatContent: ({ className, children, statusLine, avatar, displayType, indentationSize, alignment, limitHeight, markdownProps, actionButton, ...otherDivProps }: ChatContentProps) => React.JSX.Element;
export default ChatContent;