flikkui 0.1.0-beta.8 → 0.2.0-beta.1

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

@@ -0,0 +1,2 @@
+import { PromptInputTheme } from "./PromptInput.types";
+export declare const promptInputTheme: PromptInputTheme;

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

@@ -0,0 +1,15 @@
+const promptInputTheme = {
+    baseStyle: "rounded-2xl border-[1px] border-[var(--color-border)] flex flex-col gap-2 shadow-real-md p-4 outline-2 outline-[var(--color-border)]/30 bg-[var(--color-background-secondary)] ",
+    textareaStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none resize-none overflow-y-auto transition-[height] duration-200 ease-in-out",
+    footerStyle: "flex justify-between items-end",
+    actionsStyle: "flex gap-1",
+    submitButtonStyle: "rounded-full",
+    states: {
+        default: "",
+        disabled: "opacity-50 cursor-not-allowed",
+        invalid: "border-[var(--color-danger)] border-b border-b-[var(--color-danger)]",
+        loading: "opacity-75",
+    },
+};
+
+export { promptInputTheme };

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/PromptSuggestions.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { PromptSuggestionsProps } from "./PromptSuggestions.types";
+/**
+ * PromptSuggestions - Smart prompt starter chips
+ *
+ * Displays a list of clickable Pill components that users can select
+ * to quickly populate the prompt input.
+ *
+ * @example
+ * ```tsx
+ * <PromptSuggestions
+ *   suggestions={["Summarize this document", "Write a poem"]}
+ *   onSelect={(text) => setPrompt(text)}
+ * />
+ *
+ * <PromptSuggestions
+ *   suggestions={[
+ *     { text: "Help me write", icon: <PencilIcon className="size-4" /> },
+ *     { text: "Explain this code", icon: <CodeIcon className="size-4" /> },
+ *   ]}
+ *   onSelect={handleSelect}
+ *   layout="grid"
+ *   color="primary"
+ * />
+ * ```
+ */
+export declare const PromptSuggestions: React.ForwardRefExoticComponent<PromptSuggestionsProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,61 @@
+import React__default, { useMemo, useCallback } from 'react';
+import { Pill } from '../../core/Pill/Pill.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Layout styles for suggestion container
+ */
+const layoutStyles = {
+    horizontal: "flex flex-wrap gap-2",
+    vertical: "flex flex-col gap-2",
+    grid: "grid grid-cols-2 gap-2",
+};
+/**
+ * PromptSuggestions - Smart prompt starter chips
+ *
+ * Displays a list of clickable Pill components that users can select
+ * to quickly populate the prompt input.
+ *
+ * @example
+ * ```tsx
+ * <PromptSuggestions
+ *   suggestions={["Summarize this document", "Write a poem"]}
+ *   onSelect={(text) => setPrompt(text)}
+ * />
+ *
+ * <PromptSuggestions
+ *   suggestions={[
+ *     { text: "Help me write", icon: <PencilIcon className="size-4" /> },
+ *     { text: "Explain this code", icon: <CodeIcon className="size-4" /> },
+ *   ]}
+ *   onSelect={handleSelect}
+ *   layout="grid"
+ *   color="primary"
+ * />
+ * ```
+ */
+const PromptSuggestions = React__default.forwardRef(({ suggestions, onSelect, variant = "outline", color = "neutral", layout = "horizontal", maxVisible, disabled = false, className, pillClassName, ...props }, ref) => {
+    // Normalize suggestions to objects
+    const normalizedSuggestions = useMemo(() => {
+        const mapped = suggestions.map((s, index) => {
+            if (typeof s === "string") {
+                return { key: `suggestion-${index}`, text: s };
+            }
+            return { key: s.key || `suggestion-${index}`, ...s };
+        });
+        return maxVisible ? mapped.slice(0, maxVisible) : mapped;
+    }, [suggestions, maxVisible]);
+    // Handle suggestion click
+    const handleClick = useCallback((suggestion) => {
+        if (disabled)
+            return;
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(suggestion.text);
+    }, [disabled, onSelect]);
+    if (normalizedSuggestions.length === 0) {
+        return null;
+    }
+    return (React__default.createElement("div", { ref: ref, className: cn(layoutStyles[layout], className), role: "group", "aria-label": "Prompt suggestions", ...props }, normalizedSuggestions.map((suggestion) => (React__default.createElement(Pill, { key: suggestion.key, variant: variant, color: color, size: "md", iconStart: suggestion.icon, onClick: () => handleClick(suggestion), readOnly: disabled, className: cn(`py-2 px-3.5 font-normal gap-2`, `${disabled ? "cursor-not-allowed opacity-70" : ""}`, pillClassName), "aria-label": `Use suggestion: ${suggestion.text}` }, suggestion.text)))));
+});
+PromptSuggestions.displayName = "PromptSuggestions";
+
+export { PromptSuggestions };

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

@@ -0,0 +1,65 @@
+import { ReactNode } from "react";
+import { PillVariant, PillColor } from "../../core/Pill/Pill.types";
+/**
+ * Suggestion item
+ */
+export interface PromptSuggestion {
+    /**
+     * Unique key for the suggestion
+     */
+    key?: string;
+    /**
+     * Display text for the suggestion
+     */
+    text: string;
+    /**
+     * Optional icon
+     */
+    icon?: ReactNode;
+}
+/**
+ * PromptSuggestions component props
+ */
+export interface PromptSuggestionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /**
+     * Array of suggestions to display
+     */
+    suggestions: (string | PromptSuggestion)[];
+    /**
+     * Callback when a suggestion is clicked
+     */
+    onSelect?: (suggestion: string) => void;
+    /**
+     * Pill variant
+     * @default "outline"
+     */
+    variant?: PillVariant;
+    /**
+     * Pill color
+     * @default "neutral"
+     */
+    color?: PillColor;
+    /**
+     * Layout variant
+     * @default "horizontal"
+     */
+    layout?: "horizontal" | "vertical" | "grid";
+    /**
+     * Maximum number of suggestions to show
+     */
+    maxVisible?: number;
+    /**
+     * Whether suggestions are disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional className for container
+     */
+    className?: string;
+    /**
+     * Additional className applied to each Pill
+     */
+    pillClassName?: string;
+}
+export type { PillVariant, PillColor };

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

@@ -0,0 +1,2 @@
+export { PromptSuggestions } from "./PromptSuggestions";
+export type { PromptSuggestionsProps, PromptSuggestion, PillVariant, PillColor, } from "./PromptSuggestions.types";

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,49 @@
+import React__default from 'react';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { streamingResponseTheme } from './StreamingResponse.theme.js';
+
+/**
+ * ErrorDisplay Component
+ * Displays streaming errors with optional retry functionality
+ */
+/**
+ * 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 (React__default.createElement("div", { className: cn(streamingResponseTheme.errorContainerStyle, className), role: "alert", "aria-live": "assertive" },
+        React__default.createElement(ExclamationCircleIcon, { className: "size-5 text-[var(--color-danger)] flex-shrink-0" }),
+        React__default.createElement("div", { className: "flex-1" },
+            React__default.createElement("p", { className: cn(streamingResponseTheme.errorTitleStyle) }, getErrorTitle(error.type)),
+            React__default.createElement("p", { className: cn(streamingResponseTheme.errorMessageStyle) }, error.message),
+            canRetry && (React__default.createElement("button", { onClick: onRetry, className: cn(streamingResponseTheme.errorRetryButtonStyle), type: "button" },
+                "Retry (",
+                retryAttempt + 1,
+                "/",
+                maxAttempts,
+                ")")))));
+};
+ErrorDisplay.displayName = 'ErrorDisplay';
+
+export { ErrorDisplay };

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

@@ -0,0 +1,17 @@
+/**
+ * MarkdownRenderer Component
+ * Renders markdown content with syntax highlighting for code blocks
+ */
+import React from 'react';
+import type { MarkdownOptions } from './StreamingResponse.types';
+export interface MarkdownRendererProps {
+    /** Markdown content to render */
+    content: string;
+    /** Markdown rendering options */
+    options?: MarkdownOptions;
+}
+/**
+ * MarkdownRenderer component for rendering markdown with syntax highlighting
+ * Supports GitHub Flavored Markdown (tables, task lists, strikethrough, etc.)
+ */
+export declare const MarkdownRenderer: React.FC<MarkdownRendererProps>;

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

@@ -0,0 +1,114 @@
+import React__default 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';
+
+/**
+ * MarkdownRenderer Component
+ * Renders markdown content with syntax highlighting for code blocks
+ */
+/**
+ * MarkdownRenderer component for rendering markdown with syntax highlighting
+ * Supports GitHub Flavored Markdown (tables, task lists, strikethrough, etc.)
+ */
+const MarkdownRenderer = ({ content, options = {}, }) => {
+    const { allowHtml = false, syntaxTheme = 'light', renderCodeBlock } = options;
+    return (React__default.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: !allowHtml, components: {
+            // 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 React__default.createElement(React__default.Fragment, null, renderCodeBlock(String(children).replace(/\n$/, ''), language));
+                }
+                // Render syntax-highlighted code block
+                if (!inline && language) {
+                    return (React__default.createElement(Prism, { style: syntaxTheme === 'dark' ? oneDark : oneLight, language: language, PreTag: "div", className: "rounded-lg my-3", ...props }, String(children).replace(/\n$/, '')));
+                }
+                // Inline code
+                return (React__default.createElement("code", { className: "bg-[var(--color-background-tertiary)] text-[var(--color-primary)] px-1.5 py-0.5 rounded text-sm font-mono", ...props }, children));
+            },
+            // Paragraphs
+            p({ children }) {
+                return (React__default.createElement("p", { className: "mb-3 last:mb-0 text-[var(--color-text-primary)] leading-relaxed" }, children));
+            },
+            // Headings
+            h1({ children }) {
+                return (React__default.createElement("h1", { className: "text-2xl font-bold mb-4 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2" }, children));
+            },
+            h2({ children }) {
+                return (React__default.createElement("h2", { className: "text-xl font-bold mb-3 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2" }, children));
+            },
+            h3({ children }) {
+                return (React__default.createElement("h3", { className: "text-lg font-semibold mb-2 text-[var(--color-text-primary)]" }, children));
+            },
+            h4({ children }) {
+                return (React__default.createElement("h4", { className: "text-base font-semibold mb-2 text-[var(--color-text-primary)]" }, children));
+            },
+            h5({ children }) {
+                return (React__default.createElement("h5", { className: "text-sm font-semibold mb-2 text-[var(--color-text-primary)]" }, children));
+            },
+            h6({ children }) {
+                return (React__default.createElement("h6", { className: "text-sm font-semibold mb-2 text-[var(--color-text-secondary)]" }, children));
+            },
+            // Lists
+            ul({ children }) {
+                return (React__default.createElement("ul", { className: "list-disc list-inside mb-3 space-y-1 text-[var(--color-text-primary)]" }, children));
+            },
+            ol({ children }) {
+                return (React__default.createElement("ol", { className: "list-decimal list-inside mb-3 space-y-1 text-[var(--color-text-primary)]" }, children));
+            },
+            li({ children }) {
+                return React__default.createElement("li", { className: "ml-4" }, children);
+            },
+            // Blockquotes
+            blockquote({ children }) {
+                return (React__default.createElement("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));
+            },
+            // Links
+            a({ href, children }) {
+                return (React__default.createElement("a", { href: href, className: "text-[var(--color-primary)] hover:text-[var(--color-primary-700)] underline transition-colors", target: "_blank", rel: "noopener noreferrer" }, children));
+            },
+            // Tables (from remarkGfm)
+            table({ children }) {
+                return (React__default.createElement("div", { className: "overflow-x-auto my-3" },
+                    React__default.createElement("table", { className: "min-w-full border-collapse border border-[var(--color-border)]" }, children)));
+            },
+            thead({ children }) {
+                return React__default.createElement("thead", { className: "bg-[var(--color-background-secondary)]" }, children);
+            },
+            tbody({ children }) {
+                return React__default.createElement("tbody", null, children);
+            },
+            tr({ children }) {
+                return React__default.createElement("tr", { className: "border-b border-[var(--color-border)]" }, children);
+            },
+            th({ children }) {
+                return (React__default.createElement("th", { className: "px-4 py-2 text-left font-semibold text-[var(--color-text-primary)] border border-[var(--color-border)]" }, children));
+            },
+            td({ children }) {
+                return (React__default.createElement("td", { className: "px-4 py-2 text-[var(--color-text-primary)] border border-[var(--color-border)]" }, children));
+            },
+            // Horizontal rule
+            hr() {
+                return React__default.createElement("hr", { className: "my-4 border-t border-[var(--color-border)]" });
+            },
+            // Strong/Bold
+            strong({ children }) {
+                return React__default.createElement("strong", { className: "font-semibold text-[var(--color-text-primary)]" }, children);
+            },
+            // Emphasis/Italic
+            em({ children }) {
+                return React__default.createElement("em", { className: "italic" }, children);
+            },
+            // Strikethrough (from remarkGfm)
+            del({ children }) {
+                return React__default.createElement("del", { className: "line-through text-[var(--color-text-secondary)]" }, children);
+            },
+        } }, content));
+};
+MarkdownRenderer.displayName = 'MarkdownRenderer';
+
+export { MarkdownRenderer };

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

@@ -0,0 +1,22 @@
+/**
+ * StreamingResponse Component
+ * Handles Server-Sent Events (SSE) streaming for AI/LLM responses
+ * Integrates with Message component for consistent UI
+ */
+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"
+ *   onComplete={(text) => console.log('Completed:', text)}
+ * />
+ * ```
+ */
+export declare const StreamingResponse: React.FC<StreamingResponseProps>;