apphouse
Version:
Component library for React that uses observable state management and theme-able components.
45 lines (44 loc) • 1.57 kB
TypeScript
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>;