@agentiffai/design 0.1.1 → 0.1.3

package/dist/Window-CukhSS8T.d.cts

@@ -0,0 +1,431 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactNode } from 'react';
+import { AriaButtonProps } from '@react-aria/button';
+import { AriaTextFieldProps } from '@react-aria/textfield';
+import { AriaButtonProps as AriaButtonProps$1 } from '@react-types/button';
+import * as styled_components from 'styled-components';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+
+type ActionVariant = 'primary' | 'secondary' | 'icon';
+type ActionsLayout = 'horizontal' | 'vertical';
+interface Action {
+    id: string;
+    label: string;
+    onClick: () => void;
+    variant?: ActionVariant;
+    disabled?: boolean;
+    icon?: React__default.ReactNode;
+}
+
+interface ActionsProps {
+    actions: Action[];
+    layout?: ActionsLayout;
+    className?: string;
+}
+declare function Actions({ actions, layout, className }: ActionsProps): react_jsx_runtime.JSX.Element;
+declare namespace Actions {
+    var displayName: string;
+}
+
+interface AgentStateProps {
+    /** Current agent state */
+    state: 'idle' | 'thinking' | 'responding' | 'error';
+    /** Optional message to display */
+    message?: string;
+    /** Optional progress percentage (0-100) */
+    progress?: number;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * AgentState component for displaying agent status
+ * Styled to match AssistantThinking and Response components with dark theme
+ */
+declare const AgentState: ({ state, message, progress, className }: AgentStateProps) => react_jsx_runtime.JSX.Element | null;
+
+type ButtonVariant = 'primary' | 'secondary' | 'icon';
+type ButtonSize = 'small' | 'medium' | 'large';
+
+interface ButtonProps extends AriaButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+}
+declare function Button({ variant, size, children, className, disabled, isLoading, ...ariaProps }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+interface FooterProps {
+    /**
+     * Branding text to display (e.g., "Powered by CopilotKit")
+     */
+    branding?: string;
+    /**
+     * Optional status text (e.g., "Connected", "Typing...", "3 tokens remaining")
+     */
+    status?: string;
+    /**
+     * Optional link URL for the branding text
+     */
+    brandingUrl?: string;
+    /**
+     * Callback when branding link is clicked
+     */
+    onBrandingClick?: () => void;
+    /**
+     * Additional CSS class name for custom styling
+     */
+    className?: string;
+}
+/**
+ * Footer Component
+ *
+ * A chat footer component that displays branding, status information, and optional links.
+ * Typically used at the bottom of a chat interface to show provider information or connection status.
+ *
+ * @example
+ * ```tsx
+ * <Footer
+ *   branding="Powered by CopilotKit"
+ *   status="Connected"
+ *   brandingUrl="https://copilotkit.ai"
+ * />
+ * ```
+ */
+declare const Footer: React__default.FC<FooterProps>;
+
+interface HeaderProps {
+    /**
+     * The main title text displayed in the header
+     */
+    title: string;
+    /**
+     * Optional subtitle text displayed below the title
+     */
+    subtitle?: string;
+    /**
+     * Callback function triggered when the close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Callback function triggered when the minimize button is clicked
+     */
+    onMinimize?: () => void;
+    /**
+     * Additional CSS class name for custom styling
+     */
+    className?: string;
+}
+/**
+ * Header Component
+ *
+ * A chat header component that displays a title, optional subtitle, and action buttons.
+ * Built with React ARIA for accessibility and Styled Components for theming.
+ *
+ * @example
+ * ```tsx
+ * <Header
+ *   title="AI Assistant"
+ *   subtitle="How can I help you today?"
+ *   onClose={() => console.log('Close clicked')}
+ *   onMinimize={() => console.log('Minimize clicked')}
+ * />
+ * ```
+ */
+declare const Header: React__default.FC<HeaderProps>;
+
+interface InputProps extends Omit<AriaTextFieldProps, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp'> {
+    /** Current message value */
+    value?: string;
+    /** Callback when message value changes */
+    onChange?: (value: string) => void;
+    /** Callback when message is submitted */
+    onSubmit?: (message: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    isDisabled?: boolean;
+    /** Whether the input is read-only */
+    isReadOnly?: boolean;
+    /** Maximum number of rows before scrolling */
+    maxRows?: number;
+    /** Whether to auto-focus the input */
+    autoFocus?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** ARIA label for the input */
+    'aria-label'?: string;
+}
+/**
+ * Input component for chat interfaces
+ * Features:
+ * - Multi-line text support
+ * - Submit on Enter, Shift+Enter for new line
+ * - React ARIA for accessibility
+ * - Auto-growing textarea
+ * - Integrated send button
+ */
+declare const Input: React__default.FC<InputProps>;
+
+interface FileAttachmentProps extends Omit<AriaButtonProps$1, 'children'> {
+    /** File name/title */
+    title: string;
+    /** File subtitle/category (e.g., "Downloads", "Documents") */
+    subtitle?: string;
+    /** File size in human-readable format (e.g., "500 KB", "2.5 MB") */
+    size?: string;
+    /** File icon emoji or Unicode character */
+    icon?: string;
+    /** Click handler for file interaction */
+    onClick?: () => void;
+    /** Custom className for styling */
+    className?: string;
+}
+/**
+ * FileAttachment component displays file information in assistant messages
+ *
+ * Features:
+ * - File icon display (emoji or Unicode)
+ * - File metadata (title, subtitle, size)
+ * - Accessible keyboard navigation via React ARIA
+ * - Clean, minimal card-based design
+ * - WCAG 2.1 AA compliant
+ *
+ * @example
+ * ```tsx
+ * <FileAttachment
+ *   title="Example File"
+ *   subtitle="Downloads"
+ *   size="500 KB"
+ *   icon="📄"
+ *   onPress={() => console.log('File clicked')}
+ * />
+ * ```
+ */
+declare const FileAttachment: React__default.FC<FileAttachmentProps>;
+
+interface AssistantMessageProps {
+    /** Message content to display */
+    content?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Avatar initials when no image is provided */
+    avatarInitials?: string;
+    /** Whether to show loading state */
+    isLoading?: boolean;
+    /** Custom className for styling */
+    className?: string;
+    /** Support for markdown rendering (future enhancement) */
+    enableMarkdown?: boolean;
+    /** File attachments to display below the message */
+    attachments?: FileAttachmentProps[];
+}
+/**
+ * AssistantMessage component displays AI assistant messages with avatar
+ *
+ * Features:
+ * - Avatar with image or initials fallback
+ * - Loading state with animated dots
+ * - Markdown support (optional)
+ * - Clean, modern design
+ */
+declare const AssistantMessage: React__default.FC<AssistantMessageProps>;
+
+interface MessagesProps {
+    /**
+     * Children elements to be rendered inside the messages container
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+}
+/**
+ * Messages component - Container for message list
+ *
+ * This component serves as a wrapper for the messages area,
+ * providing consistent spacing and layout for chat messages.
+ *
+ * @example
+ * ```tsx
+ * <Messages ariaLabel="Chat messages">
+ *   <MessagesList messages={messages} />
+ * </Messages>
+ * ```
+ */
+declare const Messages: React__default.FC<MessagesProps>;
+
+interface Message {
+    id: string;
+    content: ReactNode;
+    role: 'user' | 'assistant' | 'system';
+    timestamp?: Date;
+}
+interface MessagesListProps {
+    /** Array of messages to display */
+    messages: Message[];
+    /** Whether to automatically scroll to the bottom when new messages arrive */
+    autoScroll?: boolean;
+    /** Custom class name for the container */
+    className?: string;
+    /** Custom render function for individual messages */
+    renderMessage?: (message: Message) => ReactNode;
+    /** Callback when scroll reaches the top (for loading more messages) */
+    onScrollTop?: () => void;
+    /** Maximum height of the messages list */
+    maxHeight?: string;
+}
+/**
+ * MessagesList Component
+ *
+ * A scrollable message list component with auto-scroll functionality.
+ * Designed for chat interfaces where messages need to be displayed
+ * in a scrollable container with automatic scrolling to the latest message.
+ *
+ * Features:
+ * - Auto-scroll to bottom on new messages
+ * - Overflow handling with custom scrollbar
+ * - Flexible message rendering
+ * - Scroll event handling for pagination
+ */
+declare const MessagesList: ({ messages, autoScroll, className, renderMessage, onScrollTop, maxHeight, }: MessagesListProps) => react_jsx_runtime.JSX.Element;
+
+declare const MessagesListContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxHeight: string;
+}>> & string;
+declare const MessagesListContent: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+
+interface UserMessageProps {
+    /** The message content to display */
+    content: string;
+    /** Optional timestamp for the message */
+    timestamp?: string;
+    /** Optional CSS class name */
+    className?: string;
+    /** Optional avatar URL */
+    avatarUrl?: string;
+    /** Optional username */
+    username?: string;
+}
+/**
+ * UserMessage component displays a user's message in a chat interface.
+ * Styled with right alignment and distinct styling from assistant messages.
+ */
+declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
+
+interface ResponseProps {
+    /** Loading state - shows animated dots */
+    isLoading?: boolean;
+    /** Typing state - shows typing indicator */
+    isTyping?: boolean;
+    /** Streaming state - shows text being typed */
+    isStreaming?: boolean;
+    /** Content to display when streaming */
+    streamingContent?: string;
+    /** Message to display with loading/typing state */
+    message?: string;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Response component for displaying loading and streaming states
+ * Shows animated loading dots, typing indicators, and streaming text
+ */
+declare const Response: ({ isLoading, isTyping, isStreaming, streamingContent, message, className, }: ResponseProps) => react_jsx_runtime.JSX.Element | null;
+
+interface SuggestionsProps {
+    suggestions: string[];
+    onSelect: (suggestion: string) => void;
+    className?: string;
+}
+declare function Suggestions({ suggestions, onSelect, className }: SuggestionsProps): react_jsx_runtime.JSX.Element | null;
+declare namespace Suggestions {
+    var displayName: string;
+}
+
+interface WindowProps {
+    /**
+     * Whether the window is minimized to a small bar
+     */
+    isMinimized?: boolean;
+    /**
+     * Whether the window is fullscreen (100vw x 100vh)
+     */
+    isFullscreen?: boolean;
+    /**
+     * Custom width for the window (e.g., "400px", "50vw")
+     * @default "400px"
+     */
+    width?: string;
+    /**
+     * Custom height for the window (e.g., "600px", "80vh")
+     * @default "600px"
+     */
+    height?: string;
+    /**
+     * Children elements to be rendered inside the window
+     */
+    children: React__default.ReactNode;
+    /**
+     * Additional CSS class name for custom styling
+     */
+    className?: string;
+    /**
+     * ARIA label for the window
+     */
+    ariaLabel?: string;
+}
+/**
+ * Window Component
+ *
+ * Main container/window wrapper for the CopilotKit chat interface.
+ * This component holds the Header, Messages, Input, and Footer components.
+ *
+ * Features:
+ * - Default: 400px width x 600px height with rounded corners and shadow
+ * - Minimized: Collapsed to a small bar
+ * - Fullscreen: Takes full viewport (100vw x 100vh)
+ * - Smooth transitions between states
+ * - Customizable dimensions via width/height props
+ *
+ * @example
+ * ```tsx
+ * // Default window
+ * <Window>
+ *   <Header title="AI Assistant" />
+ *   <Messages>...</Messages>
+ *   <MessageInput />
+ *   <Footer />
+ * </Window>
+ *
+ * // Minimized window
+ * <Window isMinimized>
+ *   <Header title="AI Assistant" />
+ * </Window>
+ *
+ * // Fullscreen window
+ * <Window isFullscreen>
+ *   <Header title="AI Assistant" />
+ *   <Messages>...</Messages>
+ *   <MessageInput />
+ * </Window>
+ *
+ * // Custom dimensions
+ * <Window width="500px" height="700px">
+ *   ...
+ * </Window>
+ * ```
+ */
+declare const Window: React__default.FC<WindowProps>;
+
+export { type Action as A, type ButtonProps as B, type FooterProps as F, type HeaderProps as H, type InputProps as I, type Message as M, type ResponseProps as R, type SuggestionsProps as S, type UserMessageProps as U, type WindowProps as W, type ActionsLayout as a, type ActionsProps as b, type ActionVariant as c, Actions as d, type AgentStateProps as e, AgentState as f, type ButtonSize as g, type ButtonVariant as h, Button as i, Footer as j, Header as k, Input as l, type AssistantMessageProps as m, type FileAttachmentProps as n, type MessagesListProps as o, type MessagesProps as p, AssistantMessage as q, FileAttachment as r, Messages as s, MessagesList as t, MessagesListContainer as u, MessagesListContent as v, UserMessage as w, Response as x, Suggestions as y, Window as z };