import React from 'react';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from '../components/component.interfaces';
import { ChatMessage } from '../models/Chat';
import { ChatBubbleStyles } from '../components/chat/ChatBubble';
/**
 * Interface for styles to be applied to the ChatHistory component.
 */
export interface ChatHistoryStyles {
    container?: CSSProperties;
    chatBubble?: ChatBubbleStyles;
}
/**
 * Interface for the ChatHistory component.
 */
export interface ChatHistoryProps extends ApphouseComponent<ChatHistoryStyles> {
    /**
     * The chat history.
     */
    history?: ChatMessage[];
    /**
     * The id of the user that is using the chat.
     * It will be used to determine if the message goes to the left or right.
     * @example 'user' the message will be displayed on the right
     */
    selfUserId: string;
    /**
     * The background color of the surface where the input is.
     * this is used to make the bubble background of the chat, match the background of where it is placed.
     * @optional
     * @default 'surface'
     */
    surfaceBackground?: string;
    /**
     * The id of the component. If provided, 'chat-history-${id}' will be id of the container.
     * This is important for scroll to view. If clashing ids, scroll might be triggered on the wrong component.
     * @optional if not provided, a random id will be generated.
     */
    id?: string;
}
/**
 * It displays a chat history decorated with message bubbles.
 */
export declare const ChatHistory: React.FC<ChatHistoryProps>;