aspirechat/dist/types/index.d.ts

A highly customizable React chatbot component with extensive configuration options

import { ReactNode } from "react";
import type { ChatMessage as HookChatMessage, ChatButtonOption, ChatFlow } from "../hooks/useChat";
export type ChatMessageType = "user" | "bot" | "system";
export type { ChatMessage, ChatOptions, ChatButtonOption, ChatFlow, } from "../hooks/useChat";
export interface ChatAttachment {
    id: string;
    type: "image" | "file" | "video" | "audio" | "link";
    url: string;
    name?: string;
    previewUrl?: string;
    size?: number;
    mimeType?: string;
}
export interface ChatTheme {
    primary: string;
    secondary: string;
    background: string;
    textPrimary: string;
    textSecondary: string;
    userBubbleBackground: string;
    userBubbleText: string;
    botBubbleBackground: string;
    botBubbleText: string;
    systemMessageColor: string;
    errorColor: string;
    successColor: string;
    headerBackground: string;
    headerText: string;
    inputBackground: string;
    inputFieldBackground: string;
    inputTextColor: string;
    inputBorderColor: string;
    borderColor: string;
    timestampColor: string;
    fontFamily: string;
    fontSize: string;
    fontSizeSmall: string;
    fontSizeLarge: string;
    spacing: {
        unit: number;
        tiny: string;
        small: string;
        medium: string;
        large: string;
        extraLarge: string;
    };
    borderRadius: {
        small: string;
        medium: string;
        large: string;
        circle: string;
    };
    boxShadow: {
        light: string;
        medium: string;
        heavy: string;
    };
    animations: {
        transitionDuration: string;
        easing: string;
    };
}
export interface ChatPosition {
    placement: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "custom";
    offsetX?: string;
    offsetY?: string;
}
export interface ChatAvatar {
    src?: string;
    alt?: string;
    icon?: ReactNode;
    showFor?: "user" | "bot" | "both" | "none";
}
export interface ChatConfig {
    theme?: Partial<ChatTheme>;
    position?: ChatPosition;
    width?: string;
    height?: string;
    maxHeight?: string;
    minHeight?: string;
    fullScreenBreakpoint?: string;
    showMinimizeButton?: boolean;
    showCloseButton?: boolean;
    roundedCorners?: boolean;
    boxShadow?: boolean;
    floatingButton?: {
        backgroundColor?: string;
        iconColor?: string;
        size?: string;
        label?: string;
        showLabel?: boolean;
        icon?: ReactNode;
    };
    initialMessages?: HookChatMessage[];
    welcomeMessage?: string | HookChatMessage;
    placeholderText?: string;
    headerTitle?: string;
    loadingText?: string;
    emptyStateText?: string;
    errorStateText?: string;
    logo?: string;
    branding?: {
        show?: boolean;
        text?: string;
        link?: string;
    };
    enableTypingIndicator?: boolean;
    typingIndicatorTimeout?: number;
    autoFocus?: boolean;
    persistHistory?: boolean;
    persistKey?: string;
    showTimestamp?: boolean;
    timestampFormat?: string;
    enableAutoScroll?: boolean;
    initiallyOpen?: boolean;
    disableAnimation?: boolean;
    userDisplayName?: string;
    chatbotDisplayName?: string;
    avatar?: {
        user?: ChatAvatar;
        bot?: ChatAvatar;
    };
    a11y?: {
        labelChatbot?: string;
        labelMinimize?: string;
        labelClose?: string;
        labelToggle?: string;
        labelSendButton?: string;
    };
    customClasses?: {
        container?: string;
        header?: string;
        messageList?: string;
        message?: string;
        userMessage?: string;
        botMessage?: string;
        input?: string;
        button?: string;
    };
    mobile?: {
        fullScreen?: boolean;
        useModal?: boolean;
        bottomOffset?: string;
    };
    flows?: Record<string, ChatFlow>;
    initialFlow?: string;
    disableAutoScroll?: boolean;
}
export interface ChatHandlers {
    onMessage?: (message: HookChatMessage) => void | Promise<void>;
    onSendMessage?: (message: string) => void | Promise<void>;
    onOpen?: () => void;
    onClose?: () => void;
    onMinimize?: () => void;
    onMaximize?: () => void;
    onTypingStart?: () => void;
    onTypingEnd?: () => void;
    onFileUpload?: (file: File) => void | Promise<void>;
    onError?: (error: Error) => void;
}
export interface ChatResponse {
    pattern: RegExp | string;
    response: string | ((match: string, message: HookChatMessage) => string | HookChatMessage | Promise<string | HookChatMessage>);
    condition?: (message: HookChatMessage) => boolean;
    priority?: number;
}
export interface ChatAPI {
    endpoint?: string;
    method?: "GET" | "POST" | "PUT" | "DELETE";
    headers?: Record<string, string>;
    withCredentials?: boolean;
    timeout?: number;
    transformRequest?: (message: HookChatMessage) => any;
    transformResponse?: (response: any) => HookChatMessage | HookChatMessage[];
    onError?: (error: any) => string | HookChatMessage | void;
    pollingInterval?: number;
}
export interface ChatbotPlugin {
    id: string;
    name: string;
    initialize?: (chat: any) => void;
    destroy?: () => void;
    middleware?: (message: HookChatMessage, next: () => void) => void;
    components?: {
        header?: ReactNode;
        footer?: ReactNode;
        messageTypes?: Record<string, (props: any) => JSX.Element>;
        sidePanel?: ReactNode;
    };
}
export interface ChatContextType {
    messages: HookChatMessage[];
    isTyping: boolean;
    isOpen: boolean;
    isMinimized: boolean;
    currentFlow: string | null;
    availableOptions: ChatButtonOption[];
    config: ChatConfig;
    addMessage: (message: Omit<HookChatMessage, "id" | "timestamp">) => HookChatMessage;
    updateMessage: (id: string, updates: Partial<Omit<HookChatMessage, "id">>) => void;
    removeMessage: (id: string) => void;
    clearMessages: () => void;
    toggleChat: () => void;
    openChat: () => void;
    closeChat: () => void;
    minimizeChat: () => void;
    maximizeChat: () => void;
    startFlow: (flowId: string) => void;
    handleButtonClick: (option: ChatButtonOption) => void;
    setIsOpen: (open: boolean) => void;
    setIsMinimized: (minimized: boolean) => void;
    setIsTyping: (typing: boolean) => void;
}
export interface ChatbotProps {
    config?: ChatConfig;
    handlers?: ChatHandlers;
    responses?: ChatResponse[];
    api?: ChatAPI;
    children?: ReactNode;
    className?: string;
    plugins?: ChatbotPlugin[];
    disableDefaultStyles?: boolean;
}