flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -1,4 +1,27 @@
-import React from 'react';
+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
  *
@@ -19,7 +42,7 @@ import React from 'react';
  * />
  * ```
  */
-export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit' | 'onKeyDown'> {
+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 */
@@ -73,6 +96,50 @@ export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     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) */
@@ -96,16 +163,16 @@ export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     /** Theme overrides for component styling */
     theme?: PromptInputThemeOverrides;
     /** ARIA label for the textarea (default: "Prompt input") */
-    'aria-label'?: string;
+    "aria-label"?: string;
     /** ARIA describedby for the textarea */
-    'aria-describedby'?: string;
+    "aria-describedby"?: string;
     /** ID for the textarea element */
     id?: string;
 }
 /**
  * Component state types
  */
-export type PromptInputState = 'default' | 'disabled' | 'invalid' | 'loading';
+export type PromptInputState = "default" | "disabled" | "invalid" | "loading";
 /**
  * Model option for the model selector dropdown
  */

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

@@ -1,3 +1,3 @@
-export { PromptInput } from './PromptInput';
-export type { PromptInputProps, PromptInputState, PromptInputTheme, PromptInputThemeOverrides, ModelOption, } from './PromptInput.types';
-export { promptInputTheme } from './PromptInput.theme';
+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,66 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo, useCallback } from 'react';
+import { Pill } from '../../core/Pill/Pill.js';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+
+/**
+ * Layout styles for suggestion container
+ */
+var 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"
+ * />
+ * ```
+ */
+var PromptSuggestions = React__default.forwardRef(function (_a, ref) {
+    var suggestions = _a.suggestions, onSelect = _a.onSelect, _b = _a.variant, variant = _b === void 0 ? "outline" : _b, _c = _a.color, color = _c === void 0 ? "neutral" : _c, _d = _a.layout, layout = _d === void 0 ? "horizontal" : _d, maxVisible = _a.maxVisible, _e = _a.disabled, disabled = _e === void 0 ? false : _e, className = _a.className, pillClassName = _a.pillClassName, props = __rest(_a, ["suggestions", "onSelect", "variant", "color", "layout", "maxVisible", "disabled", "className", "pillClassName"]);
+    // Normalize suggestions to objects
+    var normalizedSuggestions = useMemo(function () {
+        var mapped = suggestions.map(function (s, index) {
+            if (typeof s === "string") {
+                return { key: "suggestion-".concat(index), text: s };
+            }
+            return __assign({ key: s.key || "suggestion-".concat(index) }, s);
+        });
+        return maxVisible ? mapped.slice(0, maxVisible) : mapped;
+    }, [suggestions, maxVisible]);
+    // Handle suggestion click
+    var handleClick = useCallback(function (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", __assign({ ref: ref, className: cn(layoutStyles[layout], className), role: "group", "aria-label": "Prompt suggestions" }, props), normalizedSuggestions.map(function (suggestion) { return (React__default.createElement(Pill, { key: suggestion.key, variant: variant, color: color, size: "md", iconStart: suggestion.icon, onClick: function () { return handleClick(suggestion); }, readOnly: disabled, className: cn("py-2 px-3.5 font-normal gap-2", "".concat(disabled ? "cursor-not-allowed opacity-70" : ""), pillClassName), "aria-label": "Use suggestion: ".concat(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,50 @@
+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
+ */
+var getErrorTitle = function (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)
+ */
+var ErrorDisplay = function (_a) {
+    var error = _a.error, onRetry = _a.onRetry, retryAttempt = _a.retryAttempt, maxAttempts = _a.maxAttempts, className = _a.className;
+    var 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,138 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+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.)
+ */
+var MarkdownRenderer = function (_a) {
+    var content = _a.content, _b = _a.options, options = _b === void 0 ? {} : _b;
+    var _c = options.allowHtml, allowHtml = _c === void 0 ? false : _c, _d = options.syntaxTheme, syntaxTheme = _d === void 0 ? 'light' : _d, renderCodeBlock = options.renderCodeBlock;
+    return (React__default.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: !allowHtml, components: {
+            // Code blocks with syntax highlighting
+            code: function (_a) {
+                var inline = _a.inline, className = _a.className, children = _a.children, props = __rest(_a, ["inline", "className", "children"]);
+                var match = /language-(\w+)/.exec(className || '');
+                var 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, __assign({ 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", __assign({ 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: function (_a) {
+                var children = _a.children;
+                return (React__default.createElement("p", { className: "mb-3 last:mb-0 text-[var(--color-text-primary)] leading-relaxed" }, children));
+            },
+            // Headings
+            h1: function (_a) {
+                var children = _a.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: function (_a) {
+                var children = _a.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: function (_a) {
+                var children = _a.children;
+                return (React__default.createElement("h3", { className: "text-lg font-semibold mb-2 text-[var(--color-text-primary)]" }, children));
+            },
+            h4: function (_a) {
+                var children = _a.children;
+                return (React__default.createElement("h4", { className: "text-base font-semibold mb-2 text-[var(--color-text-primary)]" }, children));
+            },
+            h5: function (_a) {
+                var children = _a.children;
+                return (React__default.createElement("h5", { className: "text-sm font-semibold mb-2 text-[var(--color-text-primary)]" }, children));
+            },
+            h6: function (_a) {
+                var children = _a.children;
+                return (React__default.createElement("h6", { className: "text-sm font-semibold mb-2 text-[var(--color-text-secondary)]" }, children));
+            },
+            // Lists
+            ul: function (_a) {
+                var children = _a.children;
+                return (React__default.createElement("ul", { className: "list-disc list-inside mb-3 space-y-1 text-[var(--color-text-primary)]" }, children));
+            },
+            ol: function (_a) {
+                var children = _a.children;
+                return (React__default.createElement("ol", { className: "list-decimal list-inside mb-3 space-y-1 text-[var(--color-text-primary)]" }, children));
+            },
+            li: function (_a) {
+                var children = _a.children;
+                return React__default.createElement("li", { className: "ml-4" }, children);
+            },
+            // Blockquotes
+            blockquote: function (_a) {
+                var children = _a.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: function (_a) {
+                var href = _a.href, children = _a.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: function (_a) {
+                var children = _a.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: function (_a) {
+                var children = _a.children;
+                return React__default.createElement("thead", { className: "bg-[var(--color-background-secondary)]" }, children);
+            },
+            tbody: function (_a) {
+                var children = _a.children;
+                return React__default.createElement("tbody", null, children);
+            },
+            tr: function (_a) {
+                var children = _a.children;
+                return React__default.createElement("tr", { className: "border-b border-[var(--color-border)]" }, children);
+            },
+            th: function (_a) {
+                var children = _a.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: function (_a) {
+                var children = _a.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: function () {
+                return React__default.createElement("hr", { className: "my-4 border-t border-[var(--color-border)]" });
+            },
+            // Strong/Bold
+            strong: function (_a) {
+                var children = _a.children;
+                return React__default.createElement("strong", { className: "font-semibold text-[var(--color-text-primary)]" }, children);
+            },
+            // Emphasis/Italic
+            em: function (_a) {
+                var children = _a.children;
+                return React__default.createElement("em", { className: "italic" }, children);
+            },
+            // Strikethrough (from remarkGfm)
+            del: function (_a) {
+                var children = _a.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>;

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

@@ -0,0 +1,84 @@
+import React__default 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';
+
+/**
+ * StreamingResponse Component
+ * Handles Server-Sent Events (SSE) streaming for AI/LLM responses
+ * Integrates with Message component for consistent UI
+ */
+/**
+ * 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)}
+ * />
+ * ```
+ */
+var StreamingResponse = function (_a) {
+    var 
+    // SSE Configuration
+    url = _a.url, _b = _a.method, method = _b === void 0 ? 'POST' : _b, headers = _a.headers, body = _a.body, _c = _a.format, format = _c === void 0 ? 'openai' : _c, _d = _a.autoStart, autoStart = _d === void 0 ? true : _d, 
+    // Callbacks
+    onToken = _a.onToken, onComplete = _a.onComplete, onError = _a.onError, onStart = _a.onStart, onAbort = _a.onAbort, 
+    // Display options
+    _e = _a.typingSpeed, 
+    // Display options
+    typingSpeed = _e === void 0 ? 100 : _e, _f = _a.enableTypewriter, enableTypewriter = _f === void 0 ? true : _f, _g = _a.enableMarkdown, enableMarkdown = _g === void 0 ? true : _g, markdownOptions = _a.markdownOptions, 
+    // Message component props
+    _h = _a.role, 
+    // Message component props
+    role = _h === void 0 ? 'assistant' : _h, avatar = _a.avatar, _j = _a.showTimestamp, showTimestamp = _j === void 0 ? true : _j, _k = _a.showActions, showActions = _k === void 0 ? true : _k, onCopy = _a.onCopy, onRegenerate = _a.onRegenerate, 
+    // Error handling
+    retry = _a.retry, _l = _a.timeout, timeout = _l === void 0 ? 30000 : _l, _m = _a.showError, showError = _m === void 0 ? true : _m, renderError = _a.renderError, 
+    // Styling
+    className = _a.className;
+    // Use streaming SSE hook
+    var _o = useStreamingSSE({
+        url: url,
+        method: method,
+        headers: headers,
+        body: body,
+        format: format,
+        autoStart: autoStart,
+        timeout: timeout,
+        retry: retry,
+        onToken: onToken,
+        onComplete: onComplete,
+        onError: onError,
+        onStart: onStart,
+        onAbort: onAbort,
+    }), accumulatedText = _o.accumulatedText, isStreaming = _o.isStreaming, error = _o.error, isComplete = _o.isComplete, retryAttempt = _o.retryAttempt, retryStreaming = _o.retry;
+    // Determine content to display
+    var messageContent;
+    if (error && showError) {
+        // Show error display
+        messageContent = renderError ? (renderError(error, retryStreaming)) : (React__default.createElement(ErrorDisplay, { error: error, onRetry: retryStreaming, retryAttempt: retryAttempt, maxAttempts: (retry === null || retry === void 0 ? void 0 : retry.maxAttempts) || 3 }));
+    }
+    else if (enableMarkdown) {
+        // Render markdown (works during streaming and after completion)
+        messageContent = (React__default.createElement(MarkdownRenderer, { content: accumulatedText, options: markdownOptions }));
+    }
+    else if (enableTypewriter && isComplete && accumulatedText) {
+        // Use typewriter animation after streaming completes
+        messageContent = (React__default.createElement(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap break-words" }));
+    }
+    else {
+        // Show raw text during streaming or if typewriter disabled
+        messageContent = (React__default.createElement("p", { className: "whitespace-pre-wrap break-words" }, accumulatedText));
+    }
+    // Render with Message component
+    return (React__default.createElement(Message, { role: role, content: messageContent, avatar: avatar, timestamp: new Date(), 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 @@
+var streamingResponseTheme = {
+    errorContainerStyle: "flex items-start gap-3 rounded-lg 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 };