apphouse
Version:
Component library for React that uses observable state management and theme-able components.
232 lines (231 loc) • 6.83 kB
TypeScript
import React from 'react';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from '../components/component.interfaces';
import { BaseChatInputProps, ChatInputStyles } from './ChatInput';
import { InputComponentStyles } from '../components/input/input.styles.interface';
import { ChatMessage } from '../models/Chat';
import { InputStyles } from '../styles/defaults/themes.interface';
/**
* Interface for styles to be applied to the chat box.
*/
export interface ChatBoxStyles {
/**
* Styles to be applied to the submit button.
*/
button?: CSSProperties;
/**
* Styles to be applied to the container of the chat box.
*/
container?: CSSProperties;
/**
* Styles to be applied to the wrapper of the history.
*/
history?: CSSProperties;
/**
* Styles to be applied to the input.
*/
input?: InputComponentStyles;
/**
* Styles to be applied to the compact input when using the compact mode.
*/
compactInput?: ChatInputStyles;
/**
* Styles to be applied to the prompt when using the prompt mode.
*/
prompt?: CSSProperties;
/**
* Styles to be applied to the compact input wrapper.
*/
compactInputWrapper?: CSSProperties;
/**
* Styles to be applied to the title.
*/
title?: CSSProperties;
/**
* Styles to be applied to the message text in the history.
* If children is passed, this will be ignored
*/
messageText?: CSSProperties;
}
/**
* A Chat bot component that can be used for a Chat.
*/
export interface BaseChatBoxProps {
/**
* The variant of the chat box. It will be applied to the history.
* This prop will be ignored if you pass children. The children prop will be used instead.
* @default 'default' the history will be shown as plain text
* @optional
* @example 'chatBubble' the history will be shown as chat bubbles
*/
historyVariant?: 'default' | 'chatBubble';
/**
* The message history of the chat box.
* @default []
* @optional
*/
history?: ChatMessage[];
/**
* The function that will be called when the user submits a message.
* @param message string
* @returns
*/
onSubmit: (message: string) => void;
/**
* if true, the chatbot will show a loading indicator in the submit button.
* @default false
* @optional
*/
loading?: boolean;
/**
* The title of the chat box, it will display on top.
* @optional
* @default "none"
*/
title?: string;
/**
* The text that will be displayed on the submit button.
* @default 'Send'
* @optional
*/
submitButtonText?: string;
/**
* The label of the input.
* @default none
*/
label?: string;
/**
* The description of the input.
* @default none
*/
description?: string;
/**
* If true, the submit button will be disabled.
* @default false
*/
disabled?: boolean;
/**
* The max height of the chat box.
* @default 400px
*/
maxHeight?: string;
/**
* If provided, it will replace the history with this component.
* @default none
*/
children?: React.ReactNode;
/**
* If true, the chat box input will be compact with the send button.
*/
compact?: boolean;
/**
* The initial value of the input.
*/
value?: string;
/**
* If provided, the chat will be augmented with a prompt.
* @default none
*/
prompt?: React.ReactNode;
/**
* If provided, it will set the width of the chat box.
* @default -webkit-fill-available
*/
width?: number;
/**
* If provided, the input will not be cleared when the user submits a message.
* @default false the input will not be cleared and the message will persist
* @optional
*/
persistMessageOnSend?: boolean;
/**
* If true, the message will be submitted when the user presses enter.
* @default false (the message will not be submitted when the user presses enter)
* @optional
*/
sendMessageOnEnter?: boolean;
/**
* If provided, it will be applied to the size of the input.
* @default false
*/
inputVariant?: keyof InputStyles;
/**
* The max height of the input.
* @default undefined (it will fit the content based on the space available)
*/
maxInputHeight?: number;
}
/**
* Interface for the chat box with compact input with upload
*/
interface ChatBoxWithCompactInputWithUpload extends BaseChatBoxProps, BaseChatInputProps, ApphouseComponent<ChatBoxStyles> {
/**
* If true, the chat box input will be compact with the send button.
*/
compact?: true;
/**
* If true, the file upload button will be shown.
* @default false
*/
showFileUpload?: boolean;
/**
* Callback for when the file upload fails.
* It will be ignored if `showFileUpload` is false.
* @param error
* @returns
*/
handleFileUploadError?: (error: Error) => void;
/**
* Callback for when the file upload succeeds.
* It will be ignored if `showFileUpload` is false.
* @param file
* @returns
*/
onFileUpload?: (file: File) => void;
/**
* The accepted file types for the file upload.
* It will be ignored if `showFileUpload` is false.
* @default ['m4a', 'mp3', 'mp4', 'wav', 'webm']
* @optional
*/
acceptedFileTypes?: string[];
}
/**
* Interface for the chat box with compact input without upload
*/
interface ChatBoxWithCompactInputWithoutUpload extends BaseChatBoxProps, BaseChatInputProps, ApphouseComponent<ChatBoxStyles> {
compact?: false;
showFileUpload?: never;
sendMessageOnEnter?: never;
handleFileUploadError?: never;
onFileUpload?: never;
acceptedFileTypes?: never;
}
/**
* Interface for the chat box with input
*/
interface ChatBoxWithInput extends BaseChatBoxProps, ApphouseComponent<ChatBoxStyles> {
compact?: false;
id?: never;
onChange?: never;
onFileUpload?: never;
onInputArrowDown?: never;
onInputArrowUp?: never;
onInputEnter?: never;
onInputEscape?: never;
showFileUpload?: never;
}
/**
* The ChatBox Component interface.
*/
export type ChatBoxProps = ChatBoxWithCompactInputWithUpload | ChatBoxWithCompactInputWithoutUpload | ChatBoxWithInput;
/**
* Renders a chat box component with an input field and a submit button.
* This component can be used to create a chat bot.
* It provides built-in views for displaying chat history and user input.
* History view can be replaced with a custom component, the children prop.
*
* @returns React.ReactNode
*/
export declare const ChatBox: React.FC<ChatBoxProps>;
export {};