@aichatkit/ui/dist/index.d.mts

Composable chat UI components for AI powered apps

import * as react from 'react';
import react__default, { ButtonHTMLAttributes, InputHTMLAttributes, FormEvent, ReactNode, HTMLAttributes } from 'react';
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
import { VariantProps } from 'class-variance-authority';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { NetworkAdapter } from '@aichatkit/network-adapter';
import { StorageAdapter } from '@aichatkit/storage-adapter';
import { Conversation, Message } from '@aichatkit/types';
export { ChatMessage, ChatResponse, Conversation, Message } from '@aichatkit/types';
import { ClassValue } from 'clsx';

declare const buttonVariants: (props?: ({
    variant?: "primary" | "secondary" | "ghost" | "warning" | "warning_outline" | "destructive" | "destructive_outline" | "input" | null | undefined;
    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
    /**
     * Whether to render button as a child slot
     */
    asChild?: boolean;
}
/**
 * Button component with variants
 */
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    /**
     * Additional class names to apply to the input
     */
    className?: string;
}
/**
 * Input component with styling
 */
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
declare const DefaultHypermodeInputArea: ({ input, setInput, loading, onSubmit, inputPlaceholder, sendButtonIcon, inputAreaClassName, }: {
    input: string;
    setInput: (value: string) => void;
    loading: boolean;
    onSubmit: (e: FormEvent) => void;
    inputPlaceholder: string;
    sendButtonIcon: ReactNode;
    inputAreaClassName?: string;
}) => react_jsx_runtime.JSX.Element;
declare const DefaultStandardInputArea: ({ input, setInput, loading, onSubmit, inputPlaceholder, sendButtonIcon, inputAreaClassName, }: {
    input: string;
    setInput: (value: string) => void;
    loading: boolean;
    onSubmit: (e: FormEvent) => void;
    inputPlaceholder: string;
    sendButtonIcon: ReactNode;
    inputAreaClassName?: string;
}) => react_jsx_runtime.JSX.Element;

interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * The content of the chat bubble
     */
    content: string;
    /**
     * The role of the message sender
     */
    role: 'user' | 'assistant';
    /**
     * Timestamp to display
     */
    timestamp?: string | Date;
    /**
     * Custom avatar component to display
     */
    avatar?: React.ReactNode;
    /**
     * Additional class names to apply to the container
     */
    className?: string;
    /**
     * Additional class names to apply to the bubble
     */
    bubbleClassName?: string;
    /**
     * Whether to use the hypermode styling
     */
    hypermodeStyle?: boolean;
}
/**
 * Chat bubble component for displaying messages
 */
declare function ChatBubble({ content, role, timestamp, avatar, className, bubbleClassName, hypermodeStyle, ...props }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
declare namespace ChatBubble {
    var displayName: string;
}

interface InputAreaContext {
    input: string;
    setInput: (value: string) => void;
    loading: boolean;
    sendMessage: (message: string) => Promise<void>;
    currentConversationId: string;
    inputPlaceholder: string;
    sendButtonIcon: ReactNode;
}
interface ChatInterfaceProps {
    networkAdapter?: NetworkAdapter;
    storageAdapter?: StorageAdapter;
    initialConversations?: Conversation[];
    showSidebar?: boolean;
    showInputArea?: boolean;
    className?: string;
    chatAreaClassName?: string;
    sidebarClassName?: string;
    inputAreaClassName?: string;
    headerClassName?: string;
    headerContent?: ReactNode;
    sidebarHeaderContent?: ReactNode;
    userProfileContent?: ReactNode;
    inputAreaContent?: ReactNode | ((context: InputAreaContext) => ReactNode);
    username?: string;
    onSendMessage?: (message: string, conversationId: string) => Promise<Message | null>;
    onCreateConversation?: () => Conversation;
    onDeleteConversation?: (id: string) => void;
    inputPlaceholder?: string;
    sendButtonIcon?: ReactNode;
    newConversationIcon?: ReactNode;
    deleteConversationIcon?: ReactNode;
    hypermodeStyle?: boolean;
    userAvatar?: ReactNode;
    assistantAvatar?: ReactNode;
}
declare function ChatInterface({ networkAdapter, storageAdapter, showSidebar, showInputArea, className, chatAreaClassName, sidebarClassName, inputAreaClassName, headerClassName, headerContent, sidebarHeaderContent, userProfileContent, inputAreaContent, username, inputPlaceholder, sendButtonIcon, newConversationIcon, deleteConversationIcon, hypermodeStyle, userAvatar, assistantAvatar, }: ChatInterfaceProps): react_jsx_runtime.JSX.Element;
declare namespace ChatInterface {
    var displayName: string;
}

interface LoadingDotProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * The delay in seconds for the animation
     */
    delay: number;
    /**
     * Additional class names to apply
     */
    className?: string;
}
/**
 * A single animated loading dot
 */
declare function LoadingDot({ delay, className, ...props }: LoadingDotProps): react_jsx_runtime.JSX.Element;
interface LoadingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Number of dots to display
     */
    dots?: number;
    /**
     * Additional class names for the container
     */
    className?: string;
    /**
     * Additional class names for each dot
     */
    dotClassName?: string;
}
/**
 * Loading indicator with animated dots
 */
declare function LoadingIndicator({ dots, className, dotClassName, ...props }: LoadingIndicatorProps): react_jsx_runtime.JSX.Element;
interface LoadingChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Additional class names for the container
     */
    className?: string;
    /**
     * Additional class names for the bubble
     */
    bubbleClassName?: string;
    /**
     * Additional class names for loading indicator
     */
    indicatorClassName?: string;
    /**
     * Whether to use the hypermode styling
     */
    hypermodeStyle?: boolean;
    /**
     * Custom avatar for the loading bubble
     */
    avatar?: React.ReactNode;
}
/**
 * Loading chat bubble with animated dots
 */
declare function LoadingChatBubble({ className, bubbleClassName, indicatorClassName, hypermodeStyle, avatar, ...props }: LoadingChatBubbleProps): react_jsx_runtime.JSX.Element;
declare namespace LoadingChatBubble {
    var displayName: string;
}

interface ChatSidebarProps {
    /**
     * The title of the sidebar
     */
    title?: string;
    /**
     * The conversations to display
     */
    conversations: {
        id: string;
        title: string;
    }[];
    /**
     * The ID of the current conversation
     */
    currentConversationId: string;
    /**
     * Function to handle creating a new conversation
     */
    onCreateConversation: () => void;
    /**
     * Function to handle deleting a conversation
     */
    onDeleteConversation: (id: string) => void;
    /**
     * Function to handle selecting a conversation
     */
    onSelectConversation: (id: string) => void;
    /**
     * The username to display in the profile section
     */
    username?: string;
    /**
     * Custom class name for the container
     */
    className?: string;
    /**
     * Custom class name for the header
     */
    headerClassName?: string;
    /**
     * Custom class name for the conversations list
     */
    conversationsClassName?: string;
    /**
     * Custom class name for the profile section
     */
    profileClassName?: string;
    /**
     * Custom header content
     */
    headerContent?: ReactNode;
    /**
     * Custom profile content
     */
    profileContent?: ReactNode;
    /**
     * Icon to use for the new conversation button
     */
    newConversationIcon?: ReactNode;
    /**
     * Icon to use for the delete conversation button
     */
    deleteConversationIcon?: ReactNode;
    /**
     * Icon to use for the settings button
     */
    settingsIcon?: ReactNode;
    /**
     * Whether to use Hypermode styling
     */
    hypermodeStyle?: boolean;
}
/**
 * Sidebar component for chat interface
 */
declare function ChatSidebar({ title, conversations, currentConversationId, onCreateConversation, onDeleteConversation, onSelectConversation, username, className, headerClassName, conversationsClassName, profileClassName, headerContent, profileContent, newConversationIcon, deleteConversationIcon, settingsIcon, hypermodeStyle, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
declare namespace ChatSidebar {
    var displayName: string;
}

interface AvatarProps {
    /**
     * The initial to display in the avatar
     */
    initial: string;
    /**
     * The role of the user ('user' or 'assistant')
     */
    role?: 'user' | 'assistant';
    /**
     * Additional class names to apply
     */
    className?: string;
    /**
     * Size of the avatar
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Whether to use hypermode styling
     */
    hypermodeStyle?: boolean;
}
/**
 * Avatar component for displaying user or assistant icons
 */
declare function Avatar({ initial, role, className, size, hypermodeStyle, ...props }: AvatarProps & react__default.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
declare namespace Avatar {
    var displayName: string;
}

/**
 * Utility for merging class names with Tailwind CSS
 * Uses clsx for conditionals and tailwind-merge for deduplication
 */
declare function cn(...inputs: ClassValue[]): string;

declare const CHATKIT_CSS_PATH = "./styles/base.css";

export { Avatar, type AvatarProps, Button, type ButtonProps, CHATKIT_CSS_PATH, ChatBubble, type ChatBubbleProps, ChatInterface, type ChatInterfaceProps, ChatSidebar, type ChatSidebarProps, DefaultHypermodeInputArea, DefaultStandardInputArea, Input, type InputAreaContext, type InputProps, LoadingChatBubble, type LoadingChatBubbleProps, LoadingDot, type LoadingDotProps, LoadingIndicator, type LoadingIndicatorProps, cn };