@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/components/ai/ApprovalCard/ApprovalCard.js

@@ -6,10 +6,10 @@ import { Badge } from '../../core/Badge/Badge.js';
 import { Button } from '../../core/Button/Button.js';
 import { cn } from '../../../utils/cn.js';
 
-const ApprovalCard = ({ title, description, variant = "default", riskLevel = "medium", onApprove, onDeny, children, isApproving = false, className, }) => {
+const ApprovalCard = ({ title, subtitle, variant = "default", riskLevel = "medium", onApprove, onDeny, children, isApproving = false, className, }) => {
     const riskColor = approvalCardTheme.badgeColors[riskLevel];
     const riskIcon = riskLevel === "critical" || riskLevel === "high" ? (jsx(ExclamationTriangleIcon, { className: "" })) : (jsx(CheckCircleIcon, { className: "" }));
-    return (jsxs(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.variants[variant], className), children: [jsx(Card.Header, { children: jsx("div", { className: "flex flex-col items-start", children: jsxs(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow", children: [riskLevel.toUpperCase(), " RISK"] }) }) }), jsxs(Card.Content, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "text-base", children: title }), description && (jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: description }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-xs font-mono border border-[var(--color-border)] overflow-x-auto", children: children }))] }), jsxs(Card.Footer, { className: "justify-end gap-2 mt-3", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: onDeny, children: "Deny" }), jsx(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove, children: "Approve" })] })] }));
+    return (jsxs(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.variants[variant], className), children: [jsx(Card.Header, { children: jsx("div", { className: "flex flex-col items-start", children: jsxs(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow", children: [riskLevel.toUpperCase(), " RISK"] }) }) }), jsxs(Card.Content, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "", children: title }), subtitle && (jsx("p", { className: "text-sm md:text-base text-[var(--color-text-secondary)]/80", children: subtitle }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-sm font-mono border border-[var(--color-border)] overflow-x-auto", children: children }))] }), jsxs(Card.Footer, { className: "justify-end gap-2 mt-3", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: onDeny, children: "Deny" }), jsx(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove, children: "Approve" })] })] }));
 };
 
 export { ApprovalCard };

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

@@ -7,9 +7,9 @@ export interface ApprovalCardProps {
      */
     title: string;
     /**
-     * Description or context for the user
+     * Subtitle or context for the user
      */
-    description?: string;
+    subtitle?: string;
     /**
      * Risk level determining visual severity
      * @default "medium"

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

@@ -3,8 +3,8 @@ const codeBlockTheme = {
     header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
     headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",
-    filename: "text-sm font-medium text-[var(--color-text-secondary)] truncate",
-    languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
+    filename: "text-base font-medium text-[var(--color-text-secondary)] truncate",
+    languageLabel: "text-sm uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
     lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
     highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-neutral-400/5 dark:border-l-neutral-200",

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

@@ -0,0 +1,25 @@
+import type { Variants } from "motion/react";
+/**
+ * Voice recorder enter/exit animation (replaces textarea area)
+ */
+export declare const voiceRecorderVariants: Variants;
+/**
+ * Textarea enter/exit animation (when swapping with voice recorder)
+ */
+export declare const textareaSwapVariants: Variants;
+/**
+ * Submit/Stop icon swap animation
+ */
+export declare const iconSwapVariants: Variants;
+/**
+ * Enhanced dropzone container animation
+ */
+export declare const dropzoneContainerVariants: Variants;
+/**
+ * Dropzone child elements stagger animation
+ */
+export declare const dropzoneChildVariants: Variants;
+/**
+ * Dropzone action icons stagger animation
+ */
+export declare const dropzoneActionIconVariants: Variants;

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

@@ -0,0 +1,61 @@
+/**
+ * Voice recorder enter/exit animation (replaces textarea area)
+ */
+/**
+ * Textarea enter/exit animation (when swapping with voice recorder)
+ */
+const textareaSwapVariants = {
+    initial: { opacity: 0, y: -8 },
+    animate: { opacity: 1, y: 0, transition: { duration: 0.2, ease: "easeOut" } },
+    exit: { opacity: 0, y: 8, transition: { duration: 0.15, ease: "easeIn" } },
+};
+/**
+ * Submit/Stop icon swap animation
+ */
+const iconSwapVariants = {
+    initial: { opacity: 0, scale: 0.5, rotate: -90 },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        rotate: 0,
+        transition: { duration: 0.2, ease: "easeOut" },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.5,
+        rotate: 90,
+        transition: { duration: 0.15, ease: "easeIn" },
+    },
+};
+/**
+ * Enhanced dropzone container animation
+ */
+const dropzoneContainerVariants = {
+    initial: { opacity: 0 },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.2,
+            staggerChildren: 0.05,
+        },
+    },
+    exit: { opacity: 0, transition: { duration: 0.15 } },
+};
+/**
+ * Dropzone child elements stagger animation
+ */
+const dropzoneChildVariants = {
+    initial: { opacity: 0, y: 8 },
+    animate: { opacity: 1, y: 0, transition: { duration: 0.2, ease: "easeOut" } },
+    exit: { opacity: 0, transition: { duration: 0.1 } },
+};
+/**
+ * Dropzone action icons stagger animation
+ */
+const dropzoneActionIconVariants = {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1, transition: { duration: 0.15 } },
+    exit: { opacity: 0, scale: 0.8, transition: { duration: 0.1 } },
+};
+
+export { dropzoneActionIconVariants, dropzoneChildVariants, dropzoneContainerVariants, iconSwapVariants, textareaSwapVariants };

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

@@ -1,8 +1,12 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { StopIcon } from '@heroicons/react/24/solid';
 import { promptInputTheme } from './PromptInput.theme.js';
+import { VoiceRecorder } from './VoiceRecorder.js';
+import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
 import { Textarea } from '../../forms/Textarea/Textarea.js';
 import '../../forms/Textarea/Textarea.theme.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
@@ -47,35 +51,48 @@ const PromptInput = React__default.forwardRef(({
 // Value control
 value, defaultValue = "", onChange, 
 // Textarea props
-placeholder = "How may I assist you today?", maxLength, minHeight = "48px", maxHeight = "120px", rows, 
+placeholder = "How may I assist you today?", maxLength, minHeight: minHeightProp, maxHeight = "120px", rows, 
 // State
 state = "default", disabled = false, helperText, showCharCount = false, 
 // Model selection
 selectedModel: controlledModel, defaultSelectedModel, models = DEFAULT_MODELS, onModelChange, 
 // Event handlers
 onSubmit, onAttachmentClick, onVoiceClick, onSettingsClick, onKeyDown, 
+// Stop generation
+onStop, 
+// Voice recording
+enableVoiceRecording = false, onRecordingComplete, onRecordingCancel, maxRecordingDuration = 120, 
+// Dropzone
+enableDropzone = true, dropzoneText = "Drop files here to add to chat", dropzoneTitle, dropzoneSubtitle, 
 // Multimodal attachments
 attachments: controlledAttachments, onAttachmentsChange, acceptedFileTypes = ["image/*", "application/pdf"], maxFileSize = 10 * 1024 * 1024, maxAttachments = 10, compressImages = true, maxImageDimension = 1024, imageQuality = 0.8, onAttachmentError, 
 // Button visibility
 showAttachmentButton = true, showVoiceButton = true, showSettingsButton = true, showModelSelector = true, 
 // Submit button
 submitButtonLabel = "Submit prompt", submitButtonIcon = (jsx(ArrowRightIcon, { className: "size-4", strokeWidth: 2.5 })), submitShortcut, 
+// Variant
+variant = "default", 
 // Styling
 className, textareaClassName, footerClassName, theme = {}, 
 // Accessibility
 "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, id: propId, ...props }, ref) => {
-    // ========== State Management ==========
     var _a, _b;
+    // Derive minHeight: simple variant defaults to a compact single-line height
+    const minHeight = minHeightProp !== null && minHeightProp !== void 0 ? minHeightProp : (variant === "simple" ? "32px" : "48px");
+    // ========== State Management ==========
     // Internal state for uncontrolled mode
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [internalAttachments, setInternalAttachments] = useState([]);
     const [internalModel, setInternalModel] = useState([
         defaultSelectedModel || ((_a = models[0]) === null || _a === void 0 ? void 0 : _a.key) || "",
     ]);
+    const [isRecording, setIsRecording] = useState(false);
     // Ref for textarea element
     const internalTextareaRef = useRef(null);
     const textareaRef = ref || internalTextareaRef;
     const fileInputRef = useRef(null);
+    const dragCounterRef = useRef(0);
+    const [isDragOver, setIsDragOver] = useState(false);
     const uniqueId = useId();
     // Determine if component is controlled
     const isControlled = value !== undefined;
@@ -94,6 +111,7 @@ className, textareaClassName, footerClassName, theme = {},
     const isDisabled = state === "disabled" || disabled;
     const isInvalid = state === "invalid";
     const isLoading = state === "loading";
+    const showStopButton = isLoading && onStop !== undefined;
     const canSubmit = (currentValue.trim().length > 0 || currentAttachments.length > 0) &&
         !isDisabled;
     // Model key to display name mapping
@@ -145,6 +163,32 @@ className, textareaClassName, footerClassName, theme = {},
         // Call user's handler
         onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange(newModel);
     }, [isModelControlled, onModelChange]);
+    // ========== Voice Recording Handlers ==========
+    /**
+     * Handle voice button click — either start inline recording or call onVoiceClick
+     */
+    const handleVoiceClick = useCallback(() => {
+        if (enableVoiceRecording) {
+            setIsRecording(true);
+        }
+        else {
+            onVoiceClick === null || onVoiceClick === void 0 ? void 0 : onVoiceClick();
+        }
+    }, [enableVoiceRecording, onVoiceClick]);
+    /**
+     * Handle recording complete
+     */
+    const handleRecordingComplete = useCallback((audioBlob) => {
+        setIsRecording(false);
+        onRecordingComplete === null || onRecordingComplete === void 0 ? void 0 : onRecordingComplete(audioBlob);
+    }, [onRecordingComplete]);
+    /**
+     * Handle recording cancel
+     */
+    const handleRecordingCancel = useCallback(() => {
+        setIsRecording(false);
+        onRecordingCancel === null || onRecordingCancel === void 0 ? void 0 : onRecordingCancel();
+    }, [onRecordingCancel]);
     // ========== Multimodal Handlers ==========
     /**
      * Validate file type
@@ -315,6 +359,36 @@ className, textareaClassName, footerClassName, theme = {},
             processFiles(files);
         }
     }, [processFiles]);
+    // ========== Drag & Drop Handlers ==========
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current++;
+        if (dragCounterRef.current === 1 && !isDisabled && enableDropzone) {
+            setIsDragOver(true);
+        }
+    }, [isDisabled, enableDropzone]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current--;
+        if (dragCounterRef.current === 0) {
+            setIsDragOver(false);
+        }
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        setIsDragOver(false);
+        if (!isDisabled && e.dataTransfer.files.length > 0) {
+            processFiles(e.dataTransfer.files);
+        }
+    }, [isDisabled, processFiles]);
     /**
      * Remove attachment
      */
@@ -402,42 +476,83 @@ className, textareaClassName, footerClassName, theme = {},
         footerStyle: theme.footerStyle || promptInputTheme.footerStyle,
         actionsStyle: theme.actionsStyle || promptInputTheme.actionsStyle,
         submitButtonStyle: theme.submitButtonStyle || promptInputTheme.submitButtonStyle,
+        dropzoneStyle: theme.dropzoneStyle || promptInputTheme.dropzoneStyle,
+        dropzoneTitleStyle: theme.dropzoneTitleStyle || promptInputTheme.dropzoneTitleStyle,
+        dropzoneSubtitleStyle: theme.dropzoneSubtitleStyle || promptInputTheme.dropzoneSubtitleStyle,
+        dropzoneActionsStyle: theme.dropzoneActionsStyle || promptInputTheme.dropzoneActionsStyle,
+        voiceRecorderStyle: theme.voiceRecorderStyle || promptInputTheme.voiceRecorderStyle,
         stateStyle: ((_b = theme.states) === null || _b === void 0 ? void 0 : _b[state]) || promptInputTheme.states[state],
     };
     // ========== Character Count ==========
     const displayHelperText = showCharCount
         ? `${currentValue.length}${maxLength ? `/${maxLength}` : ""} characters${helperText ? ` • ${helperText}` : ""}`
         : helperText;
+    // ========== Dropzone Helpers ==========
+    const resolvedDropzoneTitle = dropzoneTitle || dropzoneText;
+    /**
+     * Handle "browse" click within the dropzone overlay
+     */
+    const handleDropzoneBrowse = useCallback(() => {
+        setIsDragOver(false);
+        dragCounterRef.current = 0;
+        if (fileInputRef.current) {
+            fileInputRef.current.accept = acceptedFileTypes.join(",");
+            fileInputRef.current.click();
+        }
+    }, [acceptedFileTypes]);
+    // ========== Submit/Stop Button Renderer ==========
+    /**
+     * Renders the submit or stop button with animated icon swap.
+     * Used by both default and simple variants.
+     */
+    const renderSubmitButton = (buttonSize, buttonVariant, buttonColor, extraClassName) => {
+        if (showStopButton) {
+            return (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, extraClassName), size: buttonSize, variant: buttonVariant, color: "danger", onClick: onStop, "aria-label": "Stop generation", title: "Stop generation", showReflection: false, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.span, { variants: iconSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex items-center justify-center", children: jsx(StopIcon, { className: "size-4" }) }, "stop") }) }));
+        }
+        return (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, extraClassName), size: buttonSize, variant: buttonVariant, color: buttonColor, onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, showReflection: buttonVariant === "filled" ? false : undefined, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.span, { variants: iconSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex items-center justify-center", children: submitButtonIcon }, "submit") }) }));
+    };
     // ========== Render ==========
     return (jsxs("div", { className: cn("min-w-xl mx-auto", className), ...props, children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes.join(","), multiple: true, onChange: (e) => {
                     if (e.target.files)
                         processFiles(e.target.files);
                     e.target.value = "";
-                }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn(mergedTheme.baseStyle, mergedTheme.stateStyle), children: [jsx("div", { className: "flex items-start gap-2", children: jsx(Textarea, { ref: textareaRef, id: id, unstyled: true, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: isDisabled, maxLength: maxLength, rows: rows, "aria-label": ariaLabel || "Prompt input", "aria-describedby": helperTextId, "aria-invalid": isInvalid, "aria-disabled": isDisabled, className: cn(mergedTheme.textareaStyle, textareaClassName), style: {
-                                minHeight,
-                                maxHeight,
-                            } }) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
+                }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { variants: dropzoneContainerVariants, initial: "initial", animate: "animate", exit: "exit", className: mergedTheme.dropzoneStyle, children: [jsx(motion.div, { variants: dropzoneChildVariants, children: jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)] mx-auto" }) }), jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneTitleStyle, children: dropzoneTitle ? (
+                                    // Parse **browse** as clickable button
+                                    jsx(Fragment, { children: resolvedDropzoneTitle.split(/\*\*(.*?)\*\*/).map((part, i) => i % 2 === 1 ? (jsx("button", { type: "button", onClick: handleDropzoneBrowse, className: "font-bold underline underline-offset-2 cursor-pointer hover:opacity-80", children: part }, i)) : (jsx("span", { children: part }, i))) })) : (resolvedDropzoneTitle) }), dropzoneSubtitle && (jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneSubtitleStyle, children: dropzoneSubtitle })), dropzoneTitle && (jsx(motion.div, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneActionsStyle, children: [
+                                        CloudArrowUpIcon,
+                                        MicrophoneIcon,
+                                        PaperClipIcon,
+                                        LinkIcon,
+                                    ].map((Icon, i) => (jsx(motion.div, { variants: dropzoneActionIconVariants, className: "size-8 rounded-full bg-white/30 dark:bg-white/10 flex items-center justify-center", children: jsx(Icon, { className: "size-4 text-[var(--color-primary)]" }) }, i))) }))] })) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
                             var _a;
-                            return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-white flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
-                        }) })), jsxs("div", { className: cn(mergedTheme.footerStyle, footerClassName), children: [jsxs("div", { className: mergedTheme.actionsStyle, children: [showAttachmentButton && (jsxs(Dropdown, { selectionMode: "none", children: [jsx(Dropdown.Trigger, { children: jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", "aria-label": "Add attachment", disabled: isDisabled, children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) }) }), jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { itemKey: "upload-image", onAction: () => {
-                                                            // Set accept to images only and trigger file input
-                                                            if (fileInputRef.current) {
-                                                                fileInputRef.current.accept = "image/*";
-                                                                fileInputRef.current.click();
-                                                            }
-                                                            onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
-                                                        }, children: "Upload Image" }, "upload-image"), jsx(Dropdown.Item, { itemKey: "add-link", onAction: () => {
-                                                            // For now, just call the attachment callback
-                                                            // A link input modal could be added later
-                                                            onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
-                                                        }, children: "Add Link" }, "add-link"), jsx(Dropdown.Item, { itemKey: "upload-pdf", onAction: () => {
-                                                            // Set accept to PDF and trigger file input
-                                                            if (fileInputRef.current) {
-                                                                fileInputRef.current.accept = "application/pdf,.pdf";
-                                                                fileInputRef.current.click();
-                                                            }
-                                                            onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
-                                                        }, children: "Upload PDF" }, "upload-pdf")] })] })), showSettingsButton && (jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled, children: jsx(AdjustmentsHorizontalIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2 }) })), showVoiceButton && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", onClick: onVoiceClick, "aria-label": "Voice input", disabled: isDisabled, children: [jsx(MicrophoneIcon, { className: "size-4", strokeWidth: 2 }), " Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled ? [controlledModel] : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", "aria-label": "Select AI model", disabled: isDisabled, children: [modelMap[currentModel] || "Select Model", jsx(ChevronDownIcon, { className: "size-3 opacity-80", strokeWidth: 2 })] }) }), jsx(Dropdown.Menu, { children: models.map((model) => (jsxs(Dropdown.Item, { itemKey: model.key, children: [model.icon && (jsx("span", { className: "mr-2", children: model.icon })), model.label] }, model.key))) })] }))] }), jsx("div", { children: jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle), size: "sm", variant: "outline", color: "neutral", onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, children: submitButtonIcon }) })] })] }), displayHelperText && (jsx("div", { id: helperTextId, className: cn("mt-1 text-xs", isInvalid
+                            return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
+                        }) })), jsxs("div", { className: cn("flex gap-2", variant === "simple" ? "items-end" : "items-start"), children: [jsx(AnimatePresence, { mode: "wait", initial: false, children: isRecording && enableVoiceRecording ? (jsx(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex-1 min-w-0", children: jsx("p", { className: "text-center text-sm text-[var(--color-text-placeholder)]", children: placeholder }) }, "voice-recorder")) : (jsx(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: cn("flex-1 min-w-0", variant === "simple" && "flex items-end"), children: jsx(Textarea, { ref: textareaRef, id: id, unstyled: true, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: isDisabled, maxLength: maxLength, rows: rows, "aria-label": ariaLabel || "Prompt input", "aria-describedby": helperTextId, "aria-invalid": isInvalid, "aria-disabled": isDisabled, className: cn(mergedTheme.textareaStyle, variant === "simple" &&
+                                            "!w-auto flex-1 min-w-0 justify-center", textareaClassName), style: {
+                                            minHeight,
+                                            maxHeight,
+                                        } }) }, "textarea")) }), variant === "simple" &&
+                                renderSubmitButton("md", "filled", "neutral", "shrink-0")] }), variant !== "simple" && (jsx("div", { className: cn(mergedTheme.footerStyle, footerClassName), children: jsx(AnimatePresence, { mode: "wait", initial: false, children: isRecording && enableVoiceRecording ? (jsx(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "w-full", children: jsx(VoiceRecorder, { onComplete: handleRecordingComplete, onCancel: handleRecordingCancel, maxDuration: maxRecordingDuration, className: mergedTheme.voiceRecorderStyle }) }, "recorder-controls")) : (jsxs(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex justify-between items-end w-full", children: [jsxs("div", { className: mergedTheme.actionsStyle, children: [showAttachmentButton && (jsxs(Dropdown, { selectionMode: "none", children: [jsx(Dropdown.Trigger, { children: jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", "aria-label": "Add attachment", disabled: isDisabled, children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) }) }), jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { itemKey: "upload-image", onAction: () => {
+                                                                    // Set accept to images only and trigger file input
+                                                                    if (fileInputRef.current) {
+                                                                        fileInputRef.current.accept = "image/*";
+                                                                        fileInputRef.current.click();
+                                                                    }
+                                                                    onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
+                                                                }, children: "Upload Image" }, "upload-image"), jsx(Dropdown.Item, { itemKey: "add-link", onAction: () => {
+                                                                    // For now, just call the attachment callback
+                                                                    // A link input modal could be added later
+                                                                    onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
+                                                                }, children: "Add Link" }, "add-link"), jsx(Dropdown.Item, { itemKey: "upload-pdf", onAction: () => {
+                                                                    // Set accept to PDF and trigger file input
+                                                                    if (fileInputRef.current) {
+                                                                        fileInputRef.current.accept =
+                                                                            "application/pdf,.pdf";
+                                                                        fileInputRef.current.click();
+                                                                    }
+                                                                    onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
+                                                                }, children: "Upload PDF" }, "upload-pdf")] })] })), showSettingsButton && (jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled, children: jsx(AdjustmentsHorizontalIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2 }) })), showVoiceButton && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "bg-transparent rounded-full border-0 font-medium text-[var(--color-text-secondary)]", onClick: handleVoiceClick, "aria-label": "Voice input", disabled: isDisabled || isRecording, children: [jsx(MicrophoneIcon, { className: "size-4", strokeWidth: 2 }), " ", "Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled
+                                                    ? [controlledModel]
+                                                    : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "bg-transparent rounded-full border-0 font-medium text-[var(--color-text-secondary)]", "aria-label": "Select AI model", disabled: isDisabled, children: [modelMap[currentModel] || "Select Model", jsx(ChevronDownIcon, { className: "size-3 opacity-80", strokeWidth: 2 })] }) }), jsx(Dropdown.Menu, { children: models.map((model) => (jsxs(Dropdown.Item, { itemKey: model.key, children: [model.icon && (jsx("span", { className: "mr-2", children: model.icon })), model.label] }, model.key))) })] }))] }), jsx("div", { children: renderSubmitButton("sm", "outline", "neutral") })] }, "footer-controls")) }) }))] }), displayHelperText && (jsx("div", { id: helperTextId, className: cn("mt-1 text-sm", isInvalid
                     ? "text-[var(--color-danger)]"
                     : "text-[var(--color-text-muted)]"), role: isInvalid ? "alert" : undefined, "aria-live": isInvalid ? "polite" : undefined, children: displayHelperText }))] }));
 });

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

@@ -1,9 +1,14 @@
 const promptInputTheme = {
     baseStyle: "rounded-[var(--card-radius)] border-[1px] border-[var(--color-border)] flex flex-col gap-2 shadow-real-md p-4 outline-2 outline-[var(--color-border)]/30 bg-white dark: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",
+    textareaStyle: "w-full bg-transparent text-base 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",
+    dropzoneStyle: "absolute inset-0 z-20 flex flex-col items-center justify-center gap-3 rounded-[var(--card-radius)] border-2 border-dashed border-[var(--color-primary)] bg-[var(--color-primary-200)]/80 backdrop-blur-sm dark:bg-[var(--color-primary-900)]/80",
+    dropzoneTitleStyle: "text-base font-medium text-[var(--color-primary)]",
+    dropzoneSubtitleStyle: "text-sm text-[var(--color-primary)]/70",
+    dropzoneActionsStyle: "flex items-center gap-3 mt-1",
+    voiceRecorderStyle: "",
     states: {
         default: "",
         disabled: "opacity-50 cursor-not-allowed",

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

@@ -154,6 +154,59 @@ export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     submitButtonIcon?: React.ReactNode;
     /** Visual indicator for keyboard shortcut (not functional) */
     submitShortcut?: string;
+    /**
+     * Callback when stop button is clicked during loading state.
+     * When provided AND state="loading", the submit button becomes a stop button.
+     */
+    onStop?: () => void;
+    /**
+     * Enable inline voice recording mode.
+     * When true, clicking the voice button starts an inline recording UI
+     * instead of calling onVoiceClick.
+     * @default false
+     */
+    enableVoiceRecording?: boolean;
+    /**
+     * Called when the user confirms a voice recording
+     * @param audioBlob - The recorded audio as a Blob
+     */
+    onRecordingComplete?: (audioBlob: Blob) => void;
+    /**
+     * Called when the user cancels a voice recording
+     */
+    onRecordingCancel?: () => void;
+    /**
+     * Maximum recording duration in seconds (auto-stops at limit)
+     * @default 120
+     */
+    maxRecordingDuration?: number;
+    /**
+     * Enable drag-and-drop file attachment
+     * @default true
+     */
+    enableDropzone?: boolean;
+    /**
+     * Text displayed in the dropzone overlay (legacy, used as fallback for dropzoneTitle)
+     * @default "Drop files here to add to chat"
+     */
+    dropzoneText?: string;
+    /**
+     * Title text for the enhanced dropzone overlay.
+     * Supports **bold** markdown for the "browse" action word.
+     * Falls back to dropzoneText if not provided.
+     */
+    dropzoneTitle?: string;
+    /**
+     * Subtitle text for the enhanced dropzone overlay
+     */
+    dropzoneSubtitle?: string;
+    /**
+     * Layout variant
+     * - "default": stacked layout with footer toolbar below textarea
+     * - "simple": inline layout with submit button next to textarea, no footer
+     * @default "default"
+     */
+    variant?: "default" | "simple";
     /** Additional class name for the container (highest priority) */
     className?: string;
     /** Additional class name for the textarea element */
@@ -203,6 +256,16 @@ export interface PromptInputThemeOverrides {
     actionsStyle?: string;
     /** Style for the submit button */
     submitButtonStyle?: string;
+    /** Style for the dropzone overlay */
+    dropzoneStyle?: string;
+    /** Style for the dropzone title text */
+    dropzoneTitleStyle?: string;
+    /** Style for the dropzone subtitle text */
+    dropzoneSubtitleStyle?: string;
+    /** Style for the dropzone action icons row */
+    dropzoneActionsStyle?: string;
+    /** Style for the voice recorder container */
+    voiceRecorderStyle?: string;
     /** State-specific styles */
     states?: Partial<Record<PromptInputState, string>>;
 }
@@ -215,5 +278,10 @@ export interface PromptInputTheme {
     footerStyle: string;
     actionsStyle: string;
     submitButtonStyle: string;
+    dropzoneStyle: string;
+    dropzoneTitleStyle: string;
+    dropzoneSubtitleStyle: string;
+    dropzoneActionsStyle: string;
+    voiceRecorderStyle: string;
     states: Record<PromptInputState, string>;
 }

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { VoiceRecorderProps } from "./VoiceRecorder.types";
+/**
+ * Internal voice recorder sub-component.
+ * Handles MediaRecorder lifecycle, timer display, and recording controls.
+ *
+ * Recording starts immediately on mount.
+ * Not exported from the library's public API.
+ */
+export declare const VoiceRecorder: React.FC<VoiceRecorderProps>;