@flikk/ui 1.0.0-beta.1

package/dist/components/ai/PromptInput/PromptInput.types.d.ts

@@ -0,0 +1,219 @@
+import React from "react";
+/**
+ * Attachment item for multimodal input
+ */
+export interface AttachmentItem {
+    /** Unique identifier for the attachment */
+    id: string;
+    /** The file object */
+    file: File;
+    /** Type of attachment */
+    type: "image" | "file";
+    /** Preview URL for images */
+    previewUrl?: string;
+    /** Whether the image is being compressed */
+    isCompressing?: boolean;
+}
+/**
+ * Attachment error types
+ */
+export interface AttachmentError {
+    type: "file-too-large" | "file-invalid-type" | "too-many-attachments" | "compression-failed";
+    message: string;
+    file?: File;
+}
+/**
+ * AI prompt input component props
+ *
+ * Supports both controlled and uncontrolled patterns for maximum flexibility.
+ *
+ * @example Uncontrolled usage
+ * ```tsx
+ * <PromptInput onSubmit={(text, model) => handlePrompt(text, model)} />
+ * ```
+ *
+ * @example Controlled usage
+ * ```tsx
+ * <PromptInput
+ *   value={prompt}
+ *   onChange={setPrompt}
+ *   selectedModel={model}
+ *   onModelChange={setModel}
+ * />
+ * ```
+ */
+export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit" | "onKeyDown"> {
+    /** Controlled value - when provided, component becomes controlled */
+    value?: string;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /**
+     * Change handler for controlled mode
+     * @param value - The new textarea value
+     * @param event - The change event
+     */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** Placeholder text for the textarea */
+    placeholder?: string;
+    /** Maximum character length */
+    maxLength?: number;
+    /** Minimum height of the textarea (CSS value, e.g., "48px") */
+    minHeight?: string;
+    /** Maximum height of the textarea (CSS value, e.g., "120px") */
+    maxHeight?: string;
+    /** Initial number of rows (only applies before auto-resize) */
+    rows?: number;
+    /** Component state */
+    state?: PromptInputState;
+    /** Whether the input is disabled (alternative to state="disabled") */
+    disabled?: boolean;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Whether to show character count in helper text */
+    showCharCount?: boolean;
+    /** Currently selected model key (controlled) */
+    selectedModel?: string;
+    /** Default selected model for uncontrolled mode */
+    defaultSelectedModel?: string;
+    /** Available models for the dropdown */
+    models?: ModelOption[];
+    /**
+     * Callback when model selection changes
+     * @param modelKey - The selected model key
+     */
+    onModelChange?: (modelKey: string) => void;
+    /**
+     * Submit callback triggered by submit button or keyboard shortcut
+     * @param text - The trimmed prompt text
+     * @param modelKey - The currently selected model key
+     */
+    onSubmit?: (text: string, modelKey: string) => void;
+    /** Callback when attachment button is clicked */
+    onAttachmentClick?: () => void;
+    /** Callback when voice button is clicked */
+    onVoiceClick?: () => void;
+    /** Callback when settings button is clicked */
+    onSettingsClick?: () => void;
+    /** Additional keyboard event handler (useful for custom shortcuts) */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Current attachments (controlled mode)
+     * Each attachment has an id, file, type, and optional preview URL
+     */
+    attachments?: AttachmentItem[];
+    /**
+     * Callback when attachments change
+     * @param attachments - Updated array of attachment items
+     */
+    onAttachmentsChange?: (attachments: AttachmentItem[]) => void;
+    /**
+     * Accepted file types for attachments
+     * @default ["image/*", "application/pdf"]
+     */
+    acceptedFileTypes?: string[];
+    /**
+     * Maximum file size in bytes
+     * @default 10 * 1024 * 1024 (10MB)
+     */
+    maxFileSize?: number;
+    /**
+     * Maximum number of attachments
+     * @default 10
+     */
+    maxAttachments?: number;
+    /**
+     * Enable image compression before upload
+     * @default true
+     */
+    compressImages?: boolean;
+    /**
+     * Maximum dimension (width or height) for compressed images
+     * @default 1024
+     */
+    maxImageDimension?: number;
+    /**
+     * Image compression quality (0-1)
+     * @default 0.8
+     */
+    imageQuality?: number;
+    /**
+     * Callback when an attachment error occurs
+     */
+    onAttachmentError?: (error: AttachmentError) => void;
+    /** Whether to show the attachment button (default: true) */
+    showAttachmentButton?: boolean;
+    /** Whether to show the voice button (default: true) */
+    showVoiceButton?: boolean;
+    /** Whether to show the settings button (default: true) */
+    showSettingsButton?: boolean;
+    /** Whether to show the model selector dropdown (default: true) */
+    showModelSelector?: boolean;
+    /** Custom label for submit button (for aria-label) */
+    submitButtonLabel?: string;
+    /** Custom icon for submit button */
+    submitButtonIcon?: React.ReactNode;
+    /** Visual indicator for keyboard shortcut (not functional) */
+    submitShortcut?: string;
+    /** Additional class name for the container (highest priority) */
+    className?: string;
+    /** Additional class name for the textarea element */
+    textareaClassName?: string;
+    /** Additional class name for the footer section */
+    footerClassName?: string;
+    /** Theme overrides for component styling */
+    theme?: PromptInputThemeOverrides;
+    /** ARIA label for the textarea (default: "Prompt input") */
+    "aria-label"?: string;
+    /** ARIA describedby for the textarea */
+    "aria-describedby"?: string;
+    /** ID for the textarea element */
+    id?: string;
+}
+/**
+ * Component state types
+ */
+export type PromptInputState = "default" | "disabled" | "invalid" | "loading";
+/**
+ * Model option for the model selector dropdown
+ */
+export interface ModelOption {
+    /** Unique key for the model */
+    key: string;
+    /** Display label for the model */
+    label: string;
+    /** Optional description for the model */
+    description?: string;
+    /** Optional icon to display with the model */
+    icon?: React.ReactNode;
+}
+/**
+ * Theme overrides for PromptInput component
+ *
+ * Allows customization of component styling while maintaining
+ * the shadcn approach where className prop takes highest priority.
+ */
+export interface PromptInputThemeOverrides {
+    /** Style for the main container */
+    baseStyle?: string;
+    /** Style for the textarea element */
+    textareaStyle?: string;
+    /** Style for the footer section */
+    footerStyle?: string;
+    /** Style for the action buttons container */
+    actionsStyle?: string;
+    /** Style for the submit button */
+    submitButtonStyle?: string;
+    /** State-specific styles */
+    states?: Partial<Record<PromptInputState, string>>;
+}
+/**
+ * Complete theme interface (internal use)
+ */
+export interface PromptInputTheme {
+    baseStyle: string;
+    textareaStyle: string;
+    footerStyle: string;
+    actionsStyle: string;
+    submitButtonStyle: string;
+    states: Record<PromptInputState, string>;
+}

package/dist/components/ai/PromptInput/index.d.ts

@@ -0,0 +1,3 @@
+export { PromptInput } from "./PromptInput";
+export type { PromptInputProps, PromptInputState, PromptInputTheme, PromptInputThemeOverrides, ModelOption, AttachmentItem, AttachmentError, } from "./PromptInput.types";
+export { promptInputTheme } from "./PromptInput.theme";

package/dist/components/ai/PromptSuggestions/PromptSuggestion.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { PromptSuggestionProps } from "./PromptSuggestion.types";
+/**
+ * PromptSuggestion - Individual clickable suggestion chip
+ *
+ * Simple, focused component for AI prompt interfaces.
+ * White background with border styling, fully customizable via className.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <div className="flex gap-2">
+ *   <PromptSuggestion onSelect={handleSelect}>Write a poem</PromptSuggestion>
+ *   <PromptSuggestion onSelect={handleSelect}>Summarize document</PromptSuggestion>
+ * </div>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain code
+ * </PromptSuggestion>
+ * ```
+ */
+export declare const PromptSuggestion: React.ForwardRefExoticComponent<PromptSuggestionProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ai/PromptSuggestions/PromptSuggestion.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useCallback } from 'react';
+import { promptSuggestionTheme } from './PromptSuggestion.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * PromptSuggestion - Individual clickable suggestion chip
+ *
+ * Simple, focused component for AI prompt interfaces.
+ * White background with border styling, fully customizable via className.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <div className="flex gap-2">
+ *   <PromptSuggestion onSelect={handleSelect}>Write a poem</PromptSuggestion>
+ *   <PromptSuggestion onSelect={handleSelect}>Summarize document</PromptSuggestion>
+ * </div>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain code
+ * </PromptSuggestion>
+ * ```
+ */
+const PromptSuggestion = React__default.forwardRef(({ children, onSelect, icon, className, onClick, ...props }, ref) => {
+    const theme = promptSuggestionTheme;
+    // Extract text content from children for onSelect callback
+    const getTextContent = useCallback(() => {
+        if (typeof children === "string") {
+            return children;
+        }
+        if (typeof children === "number") {
+            return String(children);
+        }
+        return "";
+    }, [children]);
+    // Handle click with onSelect callback
+    const handleClick = useCallback((event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (onSelect) {
+            const text = getTextContent();
+            if (text) {
+                onSelect(text);
+            }
+        }
+    }, [onClick, onSelect, getTextContent]);
+    return (jsxs("span", { ref: ref, role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleClick(e);
+            }
+        }, className: cn(theme.baseStyle, className), "aria-label": typeof children === "string" ? `Use suggestion: ${children}` : undefined, ...props, children: [icon && jsx("span", { className: theme.iconStyle, children: icon }), children] }));
+});
+PromptSuggestion.displayName = "PromptSuggestion";
+
+export { PromptSuggestion };

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.d.ts

@@ -0,0 +1,10 @@
+/**
+ * PromptSuggestion theme configuration
+ */
+export interface PromptSuggestionTheme {
+    /** Base styles for the suggestion chip */
+    baseStyle: string;
+    /** Icon container styles */
+    iconStyle: string;
+}
+export declare const promptSuggestionTheme: PromptSuggestionTheme;

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js

@@ -0,0 +1,12 @@
+const promptSuggestionTheme = {
+    baseStyle: "inline-flex items-center gap-2 py-2 px-3.5 rounded-full " +
+        "bg-white dark:bg-[var(--color-background)] " +
+        "border border-[var(--color-border)] " +
+        "text-sm font-medium text-[var(--color-text-primary)] " +
+        "cursor-pointer transition-all duration-300 " +
+        "hover:bg-[var(--color-background-secondary)] dark:hover:bg-[var(--color-background-secondary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    iconStyle: "size-4 flex-shrink-0",
+};
+
+export { promptSuggestionTheme };

package/dist/components/ai/PromptSuggestions/PromptSuggestion.types.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+/**
+ * PromptSuggestion component props
+ *
+ * Individual clickable suggestion chip for AI prompt interfaces.
+ * Simple, focused component with white background and border styling.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <PromptSuggestion onSelect={handleSelect}>
+ *   Write a poem
+ * </PromptSuggestion>
+ * ```
+ *
+ * @example With icon
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain this code
+ * </PromptSuggestion>
+ * ```
+ *
+ * @example Custom styling (shadcn approach)
+ * ```tsx
+ * <PromptSuggestion
+ *   className="bg-purple-100 border-purple-300"
+ *   onSelect={handleSelect}
+ * >
+ *   Custom styled
+ * </PromptSuggestion>
+ * ```
+ */
+export interface PromptSuggestionProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onSelect"> {
+    /**
+     * Suggestion text content
+     */
+    children: React.ReactNode;
+    /**
+     * Callback when suggestion is clicked
+     * Receives the text content as a string
+     */
+    onSelect?: (text: string) => void;
+    /**
+     * Optional icon displayed before the text
+     */
+    icon?: React.ReactNode;
+    /**
+     * Additional className for full customization (highest priority)
+     */
+    className?: string;
+}

package/dist/components/ai/PromptSuggestions/index.d.ts

@@ -0,0 +1,4 @@
+export { PromptSuggestion } from "./PromptSuggestion";
+export { promptSuggestionTheme } from "./PromptSuggestion.theme";
+export type { PromptSuggestionProps } from "./PromptSuggestion.types";
+export type { PromptSuggestionTheme } from "./PromptSuggestion.theme";

package/dist/components/ai/StreamingResponse/AnimatedText.d.ts

@@ -0,0 +1,24 @@
+/**
+ * AnimatedText Component
+ * Renders streaming text with per-token fade-in animation
+ * Only animates the most recent tokens for performance
+ */
+import React from 'react';
+export interface AnimatedTextProps {
+    /** The full accumulated text */
+    text: string;
+    /** Whether streaming is currently active */
+    isStreaming: boolean;
+    /** Number of recent tokens to animate (older ones render as plain text) */
+    animateLastN?: number;
+    /** Whether animation is enabled */
+    enabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * AnimatedText renders streaming text with smooth per-token fade-in.
+ * For performance, only the last N tokens are animated with motion.span,
+ * while older tokens are rendered as static text.
+ */
+export declare const AnimatedText: React.FC<AnimatedTextProps>;

package/dist/components/ai/StreamingResponse/AnimatedText.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { tokenTransition, tokenFadeIn } from './StreamingResponse.animations.js';
+
+/**
+ * Splits text into tokens (words) preserving whitespace
+ */
+const tokenize = (text) => {
+    if (!text)
+        return [];
+    // Split on word boundaries, preserving whitespace with each token
+    return text.match(/\S+\s*/g) || [];
+};
+/**
+ * AnimatedText renders streaming text with smooth per-token fade-in.
+ * For performance, only the last N tokens are animated with motion.span,
+ * while older tokens are rendered as static text.
+ */
+const AnimatedText = ({ text, isStreaming, animateLastN = 6, enabled = true, className, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const animate = enabled && !shouldReduceMotion;
+    // Track which tokens have already been seen/animated
+    const settledCountRef = useRef(0);
+    const tokens = useMemo(() => tokenize(text), [text]);
+    // Determine how many tokens are "settled" (already animated in)
+    // We settle tokens as they age out of the animation window
+    if (tokens.length > settledCountRef.current + animateLastN) {
+        settledCountRef.current = tokens.length - animateLastN;
+    }
+    // When streaming stops, settle all tokens
+    if (!isStreaming) {
+        settledCountRef.current = tokens.length;
+    }
+    const settledCount = settledCountRef.current;
+    const settledText = tokens.slice(0, settledCount).join('');
+    const animatedTokens = tokens.slice(settledCount);
+    if (!animate || !isStreaming) {
+        // No animation: render plain text
+        return (jsx("p", { className: className || 'whitespace-pre-wrap break-words', children: text }));
+    }
+    return (jsxs("p", { className: className || 'whitespace-pre-wrap break-words', children: [settledText, animatedTokens.map((token, i) => (jsx(motion.span, { variants: tokenFadeIn, initial: "hidden", animate: "visible", transition: tokenTransition, style: { display: 'inline' }, children: token }, `${settledCount + i}-${token}`)))] }));
+};
+AnimatedText.displayName = 'AnimatedText';
+
+export { AnimatedText };

package/dist/components/ai/StreamingResponse/ErrorDisplay.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ErrorDisplay Component
+ * Displays streaming errors with optional retry functionality
+ */
+import React from 'react';
+import type { StreamingError } from '../../../utils/streamingErrors';
+export interface ErrorDisplayProps {
+    /** The streaming error to display */
+    error: StreamingError;
+    /** Retry function */
+    onRetry: () => void;
+    /** Current retry attempt (0-indexed) */
+    retryAttempt: number;
+    /** Maximum retry attempts */
+    maxAttempts: number;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * ErrorDisplay component for showing streaming errors
+ * Displays error icon, title, message, and retry button (if retryable)
+ */
+export declare const ErrorDisplay: React.FC<ErrorDisplayProps>;

package/dist/components/ai/StreamingResponse/ErrorDisplay.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { streamingResponseTheme } from './StreamingResponse.theme.js';
+
+/**
+ * Get user-friendly title for error type
+ */
+const getErrorTitle = (type) => {
+    switch (type) {
+        case 'network':
+            return 'Connection Error';
+        case 'timeout':
+            return 'Request Timeout';
+        case 'parse':
+            return 'Invalid Response';
+        case 'server':
+            return 'Server Error';
+        case 'abort':
+            return 'Cancelled';
+        default:
+            return 'Error';
+    }
+};
+/**
+ * ErrorDisplay component for showing streaming errors
+ * Displays error icon, title, message, and retry button (if retryable)
+ */
+const ErrorDisplay = ({ error, onRetry, retryAttempt, maxAttempts, className, }) => {
+    const canRetry = error.retryable && retryAttempt < maxAttempts;
+    return (jsxs("div", { className: cn(streamingResponseTheme.errorContainerStyle, className), role: "alert", "aria-live": "assertive", children: [jsx(ExclamationCircleIcon, { className: "size-5 text-[var(--color-danger)] flex-shrink-0" }), jsxs("div", { className: "flex-1", children: [jsx("p", { className: cn(streamingResponseTheme.errorTitleStyle), children: getErrorTitle(error.type) }), jsx("p", { className: cn(streamingResponseTheme.errorMessageStyle), children: error.message }), canRetry && (jsxs("button", { onClick: onRetry, className: cn(streamingResponseTheme.errorRetryButtonStyle), type: "button", children: ["Retry (", retryAttempt + 1, "/", maxAttempts, ")"] }))] })] }));
+};
+ErrorDisplay.displayName = 'ErrorDisplay';
+
+export { ErrorDisplay };

package/dist/components/ai/StreamingResponse/MarkdownRenderer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * MarkdownRenderer Component
+ * Renders markdown content with syntax highlighting for code blocks
+ * Supports optional block-level slide-in animations during streaming
+ */
+import React from 'react';
+import type { MarkdownOptions } from './StreamingResponse.types';
+export interface MarkdownRendererProps {
+    /** Markdown content to render */
+    content: string;
+    /** Markdown rendering options */
+    options?: MarkdownOptions;
+    /** Whether streaming is currently active (enables animations) */
+    isStreaming?: boolean;
+    /** Whether block-level animations are enabled */
+    animated?: boolean;
+    /** Show a blinking cursor at end of content while streaming */
+    showCursor?: boolean;
+}
+/**
+ * MarkdownRenderer component for rendering markdown with syntax highlighting
+ * Supports GitHub Flavored Markdown (tables, task lists, strikethrough, etc.)
+ * Optionally animates block-level elements during streaming with slide-in effect
+ */
+export declare const MarkdownRenderer: React.FC<MarkdownRendererProps>;