@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,135 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism } from 'react-syntax-highlighter';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
+import { useReducedMotion, motion } from 'motion/react';
+import { blockTransition, blockSlideIn } from './StreamingResponse.animations.js';
+import { StreamingCursor } from './StreamingCursor.js';
+
+/**
+ * Wrapper that optionally animates block-level elements during streaming.
+ * Once an element has animated in, it stays static (no re-animation on re-render).
+ */
+const AnimatedBlock = ({ children, animate, className, as = 'div' }) => {
+    const hasAnimatedRef = useRef(false);
+    const shouldAnimate = animate && !hasAnimatedRef.current;
+    // Mark as animated after first render
+    if (animate) {
+        hasAnimatedRef.current = true;
+    }
+    if (!shouldAnimate) {
+        const Tag = as;
+        return jsx(Tag, { className: className, children: children });
+    }
+    const MotionTag = as === 'p' ? motion.p : motion.div;
+    return (jsx(MotionTag, { variants: blockSlideIn, initial: "hidden", animate: "visible", transition: blockTransition, className: className, children: children }));
+};
+/**
+ * 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
+ */
+const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated = true, showCursor = true, }) => {
+    const { allowHtml = false, syntaxTheme = 'light', renderCodeBlock } = options;
+    const shouldReduceMotion = useReducedMotion();
+    const shouldAnimate = animated && isStreaming && !shouldReduceMotion;
+    const markdownComponents = useMemo(() => ({
+        // Code blocks with syntax highlighting
+        code({ inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '');
+            const language = match ? match[1] : '';
+            // Use custom code block renderer if provided
+            if (!inline && renderCodeBlock && language) {
+                return (jsx(AnimatedBlock, { animate: shouldAnimate, children: renderCodeBlock(String(children).replace(/\n$/, ''), language) }));
+            }
+            // Render syntax-highlighted code block
+            if (!inline && language) {
+                return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx(Prism, { style: syntaxTheme === 'dark' ? oneDark : oneLight, language: language, PreTag: "div", className: "rounded-lg my-3", ...props, children: String(children).replace(/\n$/, '') }) }));
+            }
+            // Inline code
+            return (jsx("code", { className: "bg-[var(--color-background-tertiary)] text-[var(--color-primary)] px-1.5 py-0.5 rounded text-sm font-mono", ...props, children: children }));
+        },
+        // Paragraphs
+        p({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, as: "p", className: "mb-3 last:mb-0 text-[var(--color-text-primary)] leading-relaxed", children: children }));
+        },
+        // Headings
+        h1({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h1", { className: "text-2xl font-bold mb-4 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }) }));
+        },
+        h2({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h2", { className: "text-xl font-bold mb-3 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }) }));
+        },
+        h3({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h3", { className: "text-lg font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
+        },
+        h4({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h4", { className: "text-base font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
+        },
+        h5({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h5", { className: "text-sm font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
+        },
+        h6({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h6", { className: "text-sm font-semibold mb-2 text-[var(--color-text-secondary)]", children: children }) }));
+        },
+        // Lists
+        ul({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("ul", { className: "list-disc list-inside mb-3 space-y-1 text-[var(--color-text-primary)]", children: children }) }));
+        },
+        ol({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("ol", { className: "list-decimal list-inside mb-3 space-y-1 text-[var(--color-text-primary)]", children: children }) }));
+        },
+        li({ children }) {
+            return jsx("li", { className: "ml-4", children: children });
+        },
+        // Blockquotes
+        blockquote({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("blockquote", { className: "border-l-4 border-[var(--color-primary)] pl-4 py-2 my-3 bg-[var(--color-background-secondary)] italic text-[var(--color-text-secondary)]", children: children }) }));
+        },
+        // Links
+        a({ href, children }) {
+            return (jsx("a", { href: href, className: "text-[var(--color-primary)] hover:text-[var(--color-primary-700)] underline transition-colors", target: "_blank", rel: "noopener noreferrer", children: children }));
+        },
+        // Tables (from remarkGfm)
+        table({ children }) {
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("div", { className: "overflow-x-auto my-3", children: jsx("table", { className: "min-w-full border-collapse border border-[var(--color-border)]", children: children }) }) }));
+        },
+        thead({ children }) {
+            return jsx("thead", { className: "bg-[var(--color-background-secondary)]", children: children });
+        },
+        tbody({ children }) {
+            return jsx("tbody", { children: children });
+        },
+        tr({ children }) {
+            return jsx("tr", { className: "border-b border-[var(--color-border)]", children: children });
+        },
+        th({ children }) {
+            return (jsx("th", { className: "px-4 py-2 text-left font-semibold text-[var(--color-text-primary)] border border-[var(--color-border)]", children: children }));
+        },
+        td({ children }) {
+            return (jsx("td", { className: "px-4 py-2 text-[var(--color-text-primary)] border border-[var(--color-border)]", children: children }));
+        },
+        // Horizontal rule
+        hr() {
+            return jsx("hr", { className: "my-4 border-t border-[var(--color-border)]" });
+        },
+        // Strong/Bold
+        strong({ children }) {
+            return jsx("strong", { className: "font-semibold text-[var(--color-text-primary)]", children: children });
+        },
+        // Emphasis/Italic
+        em({ children }) {
+            return jsx("em", { className: "italic", children: children });
+        },
+        // Strikethrough (from remarkGfm)
+        del({ children }) {
+            return jsx("del", { className: "line-through text-[var(--color-text-secondary)]", children: children });
+        },
+    }), [shouldAnimate, syntaxTheme, renderCodeBlock]);
+    return (jsxs(Fragment, { children: [jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: !allowHtml, components: markdownComponents, children: content }), jsx(StreamingCursor, { visible: isStreaming && showCursor, enabled: animated })] }));
+};
+MarkdownRenderer.displayName = 'MarkdownRenderer';
+
+export { MarkdownRenderer };

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

@@ -0,0 +1,21 @@
+/**
+ * StreamingCursor Component
+ * Animated blinking cursor shown at the end of streaming text
+ */
+import React from 'react';
+export interface StreamingCursorProps {
+    /** Whether the cursor is visible (typically while streaming) */
+    visible: boolean;
+    /** Whether animation is enabled */
+    enabled?: boolean;
+    /** Custom cursor character */
+    cursor?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * StreamingCursor renders an animated blinking caret
+ * that indicates active streaming. Automatically respects
+ * reduced motion preferences.
+ */
+export declare const StreamingCursor: React.FC<StreamingCursorProps>;

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useReducedMotion, motion } from 'motion/react';
+import { cursorPulse } from './StreamingResponse.animations.js';
+
+/**
+ * StreamingCursor renders an animated blinking caret
+ * that indicates active streaming. Automatically respects
+ * reduced motion preferences.
+ */
+const StreamingCursor = ({ visible, enabled = true, cursor = '▍', className, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    if (!visible)
+        return null;
+    if (!enabled || shouldReduceMotion) {
+        return (jsx("span", { className: className || 'text-[var(--color-primary)] font-light ml-0.5', "aria-hidden": "true", children: cursor }));
+    }
+    return (jsx(motion.span, { variants: cursorPulse, animate: "pulse", className: className || 'text-[var(--color-primary)] font-light ml-0.5 inline-block', "aria-hidden": "true", children: cursor }));
+};
+StreamingCursor.displayName = 'StreamingCursor';
+
+export { StreamingCursor };

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

@@ -0,0 +1,26 @@
+/**
+ * StreamingResponse Animation Variants
+ * Motion variants for streaming text animations
+ */
+import type { Variants, Transition } from 'motion/react';
+/**
+ * Token fade-in animation
+ * Each new token fades in with a slight upward movement
+ */
+export declare const tokenFadeIn: Variants;
+export declare const tokenTransition: Transition;
+/**
+ * Block slide-in animation
+ * New markdown blocks (paragraphs, code, lists) slide in from below
+ */
+export declare const blockSlideIn: Variants;
+export declare const blockTransition: Transition;
+/**
+ * Streaming cursor (caret) animation
+ * Pulses while streaming is active
+ */
+export declare const cursorPulse: Variants;
+/**
+ * Container animation for staggered children
+ */
+export declare const staggerContainer: Variants;

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

@@ -0,0 +1,68 @@
+/**
+ * StreamingResponse Animation Variants
+ * Motion variants for streaming text animations
+ */
+/**
+ * Token fade-in animation
+ * Each new token fades in with a slight upward movement
+ */
+const tokenFadeIn = {
+    hidden: {
+        opacity: 0,
+        y: 6,
+        filter: 'blur(4px)',
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        filter: 'blur(0px)',
+    },
+};
+const tokenTransition = {
+    duration: 0.35,
+    ease: [0.25, 0.4, 0.55, 1],
+};
+/**
+ * Block slide-in animation
+ * New markdown blocks (paragraphs, code, lists) slide in from below
+ */
+const blockSlideIn = {
+    hidden: {
+        opacity: 0,
+        y: 8,
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+    },
+};
+const blockTransition = {
+    duration: 0.4,
+    ease: [0.25, 0.4, 0.55, 1],
+};
+/**
+ * Streaming cursor (caret) animation
+ * Pulses while streaming is active
+ */
+const cursorPulse = {
+    pulse: {
+        opacity: [1, 0.4, 1],
+        transition: {
+            duration: 0.8,
+            repeat: Infinity,
+            ease: 'easeInOut',
+        },
+    },
+};
+/**
+ * Container animation for staggered children
+ */
+const staggerContainer = {
+    visible: {
+        transition: {
+            staggerChildren: 0.03,
+        },
+    },
+};
+
+export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition };

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

@@ -0,0 +1,25 @@
+/**
+ * StreamingResponse Component
+ * Handles Server-Sent Events (SSE) streaming for AI/LLM responses
+ * Integrates with Message component for consistent UI
+ * Supports smooth motion animations during streaming
+ */
+import React from 'react';
+import type { StreamingResponseProps } from './StreamingResponse.types';
+/**
+ * StreamingResponse component for AI/LLM streaming responses
+ *
+ * @example
+ * ```tsx
+ * <StreamingResponse
+ *   url="/api/chat"
+ *   method="POST"
+ *   body={{ message: "Hello", model: "gpt-4" }}
+ *   format="openai"
+ *   animated={true}
+ *   showCursor={true}
+ *   onComplete={(text) => console.log('Completed:', text)}
+ * />
+ * ```
+ */
+export declare const StreamingResponse: React.FC<StreamingResponseProps>;

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

@@ -0,0 +1,87 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
+import { Message } from '../../core/Message/Message.js';
+import { TypeWriter } from '../../core/Message/TypeWriter.js';
+import { ErrorDisplay } from './ErrorDisplay.js';
+import { MarkdownRenderer } from './MarkdownRenderer.js';
+import { AnimatedText } from './AnimatedText.js';
+import { StreamingCursor } from './StreamingCursor.js';
+
+/**
+ * StreamingResponse component for AI/LLM streaming responses
+ *
+ * @example
+ * ```tsx
+ * <StreamingResponse
+ *   url="/api/chat"
+ *   method="POST"
+ *   body={{ message: "Hello", model: "gpt-4" }}
+ *   format="openai"
+ *   animated={true}
+ *   showCursor={true}
+ *   onComplete={(text) => console.log('Completed:', text)}
+ * />
+ * ```
+ */
+const StreamingResponse = ({ 
+// SSE Configuration
+url, method = 'POST', headers, body, format = 'openai', autoStart = true, 
+// Callbacks
+onToken, onComplete, onError, onStart, onAbort, 
+// Display options
+typingSpeed = 100, enableTypewriter = true, enableMarkdown = true, markdownOptions, 
+// Animation
+animated = true, showCursor = true, 
+// Message component props
+role = 'assistant', avatar, showTimestamp = true, showActions = true, onCopy, onRegenerate, 
+// Error handling
+retry, timeout = 30000, showError = true, renderError, 
+// Styling
+className, }) => {
+    const startTimeRef = useRef(new Date());
+    useEffect(() => { startTimeRef.current = new Date(); }, [url]);
+    // Use streaming SSE hook
+    const { accumulatedText, isStreaming, error, isComplete, retryAttempt, retry: retryStreaming, } = useStreamingSSE({
+        url,
+        method,
+        headers,
+        body,
+        format,
+        autoStart,
+        timeout,
+        retry,
+        onToken,
+        onComplete,
+        onError,
+        onStart,
+        onAbort,
+    });
+    // Determine content to display
+    let messageContent;
+    if (error && showError) {
+        // Show error display
+        messageContent = renderError ? (renderError(error, retryStreaming)) : (jsx(ErrorDisplay, { error: error, onRetry: retryStreaming, retryAttempt: retryAttempt, maxAttempts: (retry === null || retry === void 0 ? void 0 : retry.maxAttempts) || 3 }));
+    }
+    else if (enableMarkdown) {
+        // Render markdown with block-level slide-in animations and streaming cursor
+        messageContent = (jsx(MarkdownRenderer, { content: accumulatedText, options: markdownOptions, isStreaming: isStreaming, animated: animated, showCursor: showCursor }));
+    }
+    else if (isStreaming) {
+        // During streaming without markdown: use per-token fade-in animation
+        messageContent = (jsxs(Fragment, { children: [jsx(AnimatedText, { text: accumulatedText, isStreaming: isStreaming, enabled: animated }), jsx(StreamingCursor, { visible: showCursor, enabled: animated })] }));
+    }
+    else if (enableTypewriter && isComplete && accumulatedText) {
+        // Use typewriter animation after streaming completes
+        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap break-words" }));
+    }
+    else {
+        // Show raw text (streaming complete, typewriter disabled)
+        messageContent = (jsx("p", { className: "whitespace-pre-wrap break-words", children: accumulatedText }));
+    }
+    // Render with Message component
+    return (jsx(Message, { role: role, content: messageContent, avatar: avatar, timestamp: startTimeRef.current, showTimestamp: showTimestamp, isStreaming: isStreaming, showActions: showActions && !error, onCopy: onCopy, onRegenerate: onRegenerate, className: className }));
+};
+StreamingResponse.displayName = 'StreamingResponse';
+
+export { StreamingResponse };

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

@@ -0,0 +1,2 @@
+import type { StreamingResponseTheme } from "./StreamingResponse.types";
+export declare const streamingResponseTheme: StreamingResponseTheme;

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

@@ -0,0 +1,10 @@
+const streamingResponseTheme = {
+    errorContainerStyle: "flex items-start gap-3 rounded-[var(--radius-base)] border border-[var(--color-danger-200)] bg-[var(--color-danger-50)] px-4 py-3",
+    errorTitleStyle: "text-sm font-medium text-[var(--color-danger)]",
+    errorMessageStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
+    errorRetryButtonStyle: "mt-2 text-sm font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",
+    loadingContainerStyle: "flex items-center gap-2 text-[var(--color-text-placeholder)] text-sm",
+    loadingDotStyle: "w-1.5 h-1.5 rounded-full bg-current animate-pulse",
+};
+
+export { streamingResponseTheme };

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

@@ -0,0 +1,105 @@
+/**
+ * StreamingResponse Component Types
+ * Type definitions for the StreamingResponse component
+ */
+import type { ReactNode } from 'react';
+import type { SSEFormat, SSEParser } from '../../../utils/sseFormatParsers';
+import type { StreamingError, RetryConfig } from '../../../utils';
+import type { MessageRole } from '../../core/Message';
+/**
+ * Avatar configuration for Message component
+ */
+export interface MessageAvatarProps {
+    src?: string;
+    alt: string;
+    fallback?: ReactNode;
+}
+/**
+ * Markdown rendering options
+ */
+export interface MarkdownOptions {
+    /** Allow HTML in markdown (default: false) */
+    allowHtml?: boolean;
+    /** Syntax highlighting theme (default: 'light') */
+    syntaxTheme?: 'light' | 'dark';
+    /** Custom code block renderer */
+    renderCodeBlock?: (code: string, language: string) => ReactNode;
+}
+/**
+ * Props for StreamingResponse component
+ */
+export interface StreamingResponseProps {
+    /** The SSE endpoint URL */
+    url: string;
+    /** HTTP method (default: 'POST') */
+    method?: 'GET' | 'POST';
+    /** Request headers */
+    headers?: Record<string, string>;
+    /** Request body (for POST requests) */
+    body?: Record<string, unknown> | string;
+    /** Stream format parser (default: 'openai') */
+    format?: SSEFormat | SSEParser;
+    /** Whether to auto-start streaming on mount (default: true) */
+    autoStart?: boolean;
+    /** Called when a new token arrives */
+    onToken?: (token: string, accumulatedText: string) => void;
+    /** Called when streaming completes successfully */
+    onComplete?: (fullText: string) => void;
+    /** Called when an error occurs */
+    onError?: (error: StreamingError) => void;
+    /** Called when streaming starts */
+    onStart?: () => void;
+    /** Called when streaming is aborted */
+    onAbort?: () => void;
+    /** Typewriter animation speed in ms per word (default: 100) */
+    typingSpeed?: number;
+    /** Enable typewriter animation after streaming completes (default: true) */
+    enableTypewriter?: boolean;
+    /** Enable markdown rendering (default: true) */
+    enableMarkdown?: boolean;
+    /** Markdown rendering options */
+    markdownOptions?: MarkdownOptions;
+    /** Enable smooth streaming animations (default: true) */
+    animated?: boolean;
+    /** Show blinking cursor while streaming (default: true) */
+    showCursor?: boolean;
+    /** Message role (default: 'assistant') */
+    role?: MessageRole;
+    /** Avatar configuration */
+    avatar?: MessageAvatarProps;
+    /** Show timestamp (default: true) */
+    showTimestamp?: boolean;
+    /** Show action buttons (copy, regenerate) (default: true) */
+    showActions?: boolean;
+    /** Copy button handler */
+    onCopy?: () => void;
+    /** Regenerate button handler */
+    onRegenerate?: () => void;
+    /** Retry configuration */
+    retry?: RetryConfig;
+    /** Timeout in milliseconds (default: 30000) */
+    timeout?: number;
+    /** Show error UI (default: true) */
+    showError?: boolean;
+    /** Custom error render function */
+    renderError?: (error: StreamingError, retry: () => void) => ReactNode;
+    /** Custom className for Message container */
+    className?: string;
+}
+/**
+ * Theme overrides for StreamingResponse component
+ */
+export interface StreamingResponseTheme {
+    /** Error container style */
+    errorContainerStyle?: string;
+    /** Error title style */
+    errorTitleStyle?: string;
+    /** Error message style */
+    errorMessageStyle?: string;
+    /** Error retry button style */
+    errorRetryButtonStyle?: string;
+    /** Loading indicator container style */
+    loadingContainerStyle?: string;
+    /** Loading dot style */
+    loadingDotStyle?: string;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * StreamingResponse Component
+ * Exports for StreamingResponse component and related types
+ */
+export { StreamingResponse } from './StreamingResponse';
+export { ErrorDisplay } from './ErrorDisplay';
+export { MarkdownRenderer } from './MarkdownRenderer';
+export { AnimatedText } from './AnimatedText';
+export { StreamingCursor } from './StreamingCursor';
+export { streamingResponseTheme } from './StreamingResponse.theme';
+export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from './StreamingResponse.animations';
+export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, MessageAvatarProps, } from './StreamingResponse.types';
+export type { AnimatedTextProps } from './AnimatedText';
+export type { StreamingCursorProps } from './StreamingCursor';
+export type { MarkdownRendererProps } from './MarkdownRenderer';

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.animations.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from "motion/react";
+/**
+ * Staggered bounce animation for dots
+ * Each dot animates with a slight delay creating a wave effect
+ */
+export declare const dotVariants: Variants;
+/**
+ * Container fade in/out animation
+ */
+export declare const containerVariants: Variants;

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.animations.js

@@ -0,0 +1,47 @@
+/**
+ * Staggered bounce animation for dots
+ * Each dot animates with a slight delay creating a wave effect
+ */
+const dotVariants = {
+    initial: {
+        y: 0,
+        opacity: 0.5,
+    },
+    animate: (index) => ({
+        y: [0, -2, 0],
+        opacity: [0.5, 1, 0.5],
+        transition: {
+            duration: 0.6,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: index * 0.15,
+        },
+    }),
+};
+/**
+ * Container fade in/out animation
+ */
+const containerVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0.95,
+    },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            duration: 0.2,
+            ease: "easeOut",
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.95,
+        transition: {
+            duration: 0.15,
+            ease: "easeIn",
+        },
+    },
+};
+
+export { containerVariants, dotVariants };

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { ThinkingIndicatorProps } from "./ThinkingIndicator.types";
+/**
+ * ThinkingIndicator - Animated "AI is thinking..." state indicator
+ *
+ * Shows a 3-dot pulse animation to indicate the AI is processing.
+ * Respects prefers-reduced-motion for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <ThinkingIndicator visible={isLoading} />
+ *
+ * <ThinkingIndicator
+ *   visible={isLoading}
+ *   label="Claude is thinking"
+ *   size="lg"
+ * />
+ * ```
+ */
+export declare const ThinkingIndicator: React.ForwardRefExoticComponent<ThinkingIndicatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { thinkingIndicatorTheme } from './ThinkingIndicator.theme.js';
+import { containerVariants, dotVariants } from './ThinkingIndicator.animations.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * ThinkingIndicator - Animated "AI is thinking..." state indicator
+ *
+ * Shows a 3-dot pulse animation to indicate the AI is processing.
+ * Respects prefers-reduced-motion for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <ThinkingIndicator visible={isLoading} />
+ *
+ * <ThinkingIndicator
+ *   visible={isLoading}
+ *   label="Claude is thinking"
+ *   size="lg"
+ * />
+ * ```
+ */
+const ThinkingIndicator = React__default.forwardRef(({ visible = true, label = "AI is thinking", showLabel = true, size = "md", icon, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a;
+    const shouldReduceMotion = useReducedMotion();
+    // Merge theme
+    const sizeConfig = {
+        ...thinkingIndicatorTheme.sizes[size],
+        ...(_a = customTheme.sizes) === null || _a === void 0 ? void 0 : _a[size],
+    };
+    const baseStyle = customTheme.baseStyle || thinkingIndicatorTheme.baseStyle;
+    const labelStyle = customTheme.labelStyle || thinkingIndicatorTheme.labelStyle;
+    const dotsContainerStyle = customTheme.dotsContainerStyle ||
+        thinkingIndicatorTheme.dotsContainerStyle;
+    const dotStyle = customTheme.dotStyle || thinkingIndicatorTheme.dotStyle;
+    // Simplified animation for reduced motion preference
+    const reducedMotionProps = shouldReduceMotion
+        ? {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+        }
+        : {
+            variants: containerVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+        };
+    return (jsx(AnimatePresence, { mode: "wait", children: visible && (jsxs(motion.div, { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...reducedMotionProps, ...props, children: [icon ? (jsx("span", { className: dotsContainerStyle, children: icon })) : (jsx("span", { className: dotsContainerStyle, children: [0, 1, 2].map((index) => (jsx(motion.span, { className: cn(dotStyle, sizeConfig.dot), variants: shouldReduceMotion ? undefined : dotVariants, initial: "initial", animate: "animate", custom: index, style: shouldReduceMotion ? { opacity: 0.7 } : undefined }, index))) })), showLabel && (jsx("span", { className: cn(labelStyle, sizeConfig.label), children: label }))] })) }));
+});
+ThinkingIndicator.displayName = "ThinkingIndicator";
+
+export { ThinkingIndicator };

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.theme.d.ts

@@ -0,0 +1,2 @@
+import { ThinkingIndicatorTheme } from "./ThinkingIndicator.types";
+export declare const thinkingIndicatorTheme: ThinkingIndicatorTheme;