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

Composable chat UI components for AI powered apps

import * as React$1 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, ChatResponseItem, CardAction, ToolCall, Card } from '@aichatkit/types';
export { ChatMessage, ChatResponse, ChatResponseItem, 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$1.ForwardRefExoticComponent<ButtonProps & React$1.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$1.ForwardRefExoticComponent<InputProps & React$1.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<ChatResponseItem[] | null>;
    onCreateConversation?: () => Conversation;
    onDeleteConversation?: (id: string) => void;
    onCardAction?: (action: CardAction) => 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, onCardAction, 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 ResponseItemProps {
    item: ChatResponseItem;
    userAvatar?: React__default.ReactNode;
    assistantAvatar?: React__default.ReactNode;
    hypermodeStyle?: boolean;
    className?: string;
    onCardAction?: (action: CardAction) => void;
}
declare function ResponseItem({ item, userAvatar, assistantAvatar, hypermodeStyle, className, onCardAction, }: ResponseItemProps): react_jsx_runtime.JSX.Element | null;
interface ResponseItemListProps {
    items: ChatResponseItem[];
    userAvatar?: React__default.ReactNode;
    assistantAvatar?: React__default.ReactNode;
    hypermodeStyle?: boolean;
    className?: string;
    onCardAction?: (action: CardAction) => void;
}
declare function ResponseItemList({ items, userAvatar, assistantAvatar, hypermodeStyle, className, onCardAction, }: ResponseItemListProps): react_jsx_runtime.JSX.Element;

interface ToolCallDisplayProps {
    toolCall: ToolCall;
    className?: string;
    hypermodeStyle?: boolean;
}
declare function ToolCallDisplay({ toolCall, className, hypermodeStyle, }: ToolCallDisplayProps): react_jsx_runtime.JSX.Element;
interface CardDisplayProps {
    card: Card;
    onAction?: (action: CardAction) => void;
    className?: string;
    hypermodeStyle?: boolean;
}
declare function CardDisplay({ card, onAction, className, hypermodeStyle, }: CardDisplayProps): react_jsx_runtime.JSX.Element;

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, CardDisplay, type CardDisplayProps, 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, ResponseItem, ResponseItemList, type ResponseItemListProps, type ResponseItemProps, ToolCallDisplay, type ToolCallDisplayProps, cn };