apphouse/dist/templates/ChatInput.d.ts

Component library for React that uses observable state management and theme-able components.

import { CSSProperties } from 'glamor';
import React from 'react';
import { BoxSizeStyles } from '../styles/defaults/themes.interface';
import { ApphouseComponent } from '../components/component.interfaces';
import { ButtonStyles } from '../components/Button';
import { ButtonGetFileStyle } from '../components/fileDropper/ButtonGetFile';
export type KeyDownEvent = React.KeyboardEvent<HTMLTextAreaElement>;
export interface BaseChatInputProps {
    /**
     * Unique id for the input.
     */
    id: string;
    /**
     * If true, the file upload button will be shown.
     * @default false
     */
    showFileUpload?: boolean;
    /**
     * The current value in the input.
     * @default ''
     */
    value?: string;
    /**
     * Callback for when the value changes.
     * @param value
     * @returns
     */
    onChange?: (value: string) => void;
    /**
     * Callback for when the user clicks the send button.
     * @param value
     * @returns
     */
    onSendMessage?: (value: string) => void;
    /**
     * If true, a message will be shown in the footer.
     * @default none
     */
    footerMessage?: string;
    /**
     * Maximum number of characters allowed in the chat input.
     * @default 4097
     */
    maxCharactersAllowed?: number;
    /**
     * Disables all inputs and buttons for the chat box
     * @default false
     */
    disabled?: boolean;
    /**
     * Callback for when the user presses enter.
     * if provided, it will be called when the user presses enter.
     * @returns
     */
    onInputEnter?: (e: KeyDownEvent, value: string) => void;
    /**
     * If provided, it will be called when the user presses escape.
     * @returns
     */
    onInputEscape?: (e: KeyDownEvent, value: string) => void;
    /**
     * If provided, it will be called when the user presses arrow up.
     * @returns
     */
    onInputArrowUp?: (e: KeyDownEvent, value: string) => void;
    /**
     * If provided, it will be called when the user presses arrow down.
     * @returns
     */
    onInputArrowDown?: (e: KeyDownEvent, value: string) => void;
    /**
     * if true, it will show the loading indicator in the send button.
     * @default false
     */
    loading?: boolean;
    /**
     * The variant of input
     * @default 'm'
     */
    variant?: keyof BoxSizeStyles;
    /**
     * If provided, this will be the max height of the input
     * @default undefined
     * @optional
     */
    maxInputHeight?: number;
}
interface ChatInputWithUploadProps extends BaseChatInputProps, BaseChatInputProps, ApphouseComponent<ChatInputStyles> {
    /**
     * If true, the file upload button will be shown.
     * @default false
     */
    showFileUpload: true;
    /**
     * 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 ChatInputWithoutUploadProps extends BaseChatInputProps, ApphouseComponent<ChatInputStyles> {
    showFileUpload?: false;
    sendMessageOnEnter?: never;
    handleFileUploadError?: never;
    onFileUpload?: never;
    acceptedFileTypes?: never;
}
export type ChatInputProps = ChatInputWithUploadProps | ChatInputWithoutUploadProps;
export interface ChatInputStyles {
    container?: CSSProperties;
    wrapper?: CSSProperties;
    inputWrapper?: CSSProperties;
    input?: CSSProperties;
    fileUploadWrapper?: CSSProperties;
    footer?: CSSProperties;
    footerMessage?: CSSProperties;
    footerMessageText?: CSSProperties;
    fileIcon?: CSSProperties;
    sendButtonWrapper?: CSSProperties;
    sendButton?: ButtonStyles;
    buttonGetFile?: ButtonGetFileStyle;
}
/**
 * ChatInput, controlled component for a chat input.
 * @beta
 */
export declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
export {};