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

package/dist/components/ai/PresenceProvider/adapters/WebSocketAdapter.d.ts

@@ -0,0 +1,149 @@
+/**
+ * WebSocket Presence Adapter
+ *
+ * Generic WebSocket implementation for real-time presence.
+ * Requires a WebSocket server that implements the presence protocol.
+ *
+ * @example
+ * ```tsx
+ * const adapter = new WebSocketPresenceAdapter({
+ *   url: 'ws://localhost:3000/presence',
+ *   reconnect: {
+ *     enabled: true,
+ *     maxAttempts: 5,
+ *     delay: 1000,
+ *   },
+ * });
+ *
+ * <PresenceProvider adapter={adapter} currentUser={user} channel="room-123">
+ *   <YourApp />
+ * </PresenceProvider>
+ * ```
+ */
+import { PresenceAdapter, PresenceAdapterConfig } from './PresenceAdapter';
+import { PresenceUser, TypingUser, ConnectionStatus } from '../PresenceProvider.types';
+/**
+ * WebSocket adapter configuration
+ */
+export interface WebSocketAdapterOptions {
+    /** WebSocket server URL */
+    url: string;
+    /** Reconnection configuration */
+    reconnect?: {
+        /** Enable automatic reconnection */
+        enabled: boolean;
+        /** Maximum reconnection attempts */
+        maxAttempts?: number;
+        /** Initial delay between attempts (ms) */
+        delay?: number;
+    };
+    /** Custom message protocol names */
+    protocols?: {
+        /** Join channel message type */
+        join?: string;
+        /** Leave channel message type */
+        leave?: string;
+        /** Typing message type */
+        typing?: string;
+        /** Update user message type */
+        update?: string;
+        /** Presence update message type */
+        presenceUpdate?: string;
+        /** Typing update message type */
+        typingUpdate?: string;
+    };
+}
+/**
+ * WebSocket presence adapter
+ * Connects to a WebSocket server for real-time presence
+ */
+export declare class WebSocketPresenceAdapter implements PresenceAdapter {
+    private ws;
+    private config;
+    private options;
+    private connectionStatus;
+    private reconnectAttempts;
+    private reconnectTimeoutId?;
+    private presenceCallbacks;
+    private typingCallbacks;
+    private connectionCallbacks;
+    private errorCallbacks;
+    private readonly DEFAULT_PROTOCOLS;
+    constructor(options: WebSocketAdapterOptions);
+    /**
+     * Connect to WebSocket server
+     */
+    connect(config: PresenceAdapterConfig): Promise<void>;
+    /**
+     * Disconnect from WebSocket
+     */
+    disconnect(): Promise<void>;
+    /**
+     * Subscribe to presence changes
+     */
+    onPresenceChange(callback: (users: PresenceUser[]) => void): () => void;
+    /**
+     * Subscribe to typing changes
+     */
+    onTypingChange(callback: (users: TypingUser[]) => void): () => void;
+    /**
+     * Subscribe to connection changes
+     */
+    onConnectionChange(callback: (status: ConnectionStatus) => void): () => void;
+    /**
+     * Subscribe to errors
+     */
+    onError(callback: (error: Error) => void): () => void;
+    /**
+     * Send typing start
+     */
+    sendTypingStart(): void;
+    /**
+     * Send typing stop
+     */
+    sendTypingStop(): void;
+    /**
+     * Update user metadata
+     */
+    updateUserMetadata(metadata: Partial<PresenceUser>): void;
+    /**
+     * Send custom event
+     */
+    sendCustomEvent(event: string, data?: unknown): void;
+    /**
+     * Get connection status
+     */
+    getConnectionStatus(): ConnectionStatus;
+    /**
+     * Get current user
+     */
+    getCurrentUser(): PresenceUser;
+    /**
+     * Send message to WebSocket
+     */
+    private send;
+    /**
+     * Handle incoming WebSocket message
+     */
+    private handleMessage;
+    /**
+     * Handle reconnection logic
+     */
+    private handleReconnect;
+    /**
+     * Notify presence callbacks
+     */
+    private notifyPresenceChange;
+    /**
+     * Notify typing callbacks
+     */
+    private notifyTypingChange;
+    /**
+     * Notify connection callbacks
+     */
+    private notifyConnectionChange;
+    /**
+     * Notify error callbacks
+     */
+    private notifyError;
+}

package/dist/components/ai/PresenceProvider/adapters/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Presence Adapters
+ *
+ * Backend implementations for real-time presence tracking.
+ *
+ * @module collaboration/adapters
+ */
+export type { PresenceAdapter, PresenceAdapterConfig, } from './PresenceAdapter';
+export { MockPresenceAdapter } from './MockAdapter';
+export { WebSocketPresenceAdapter, type WebSocketAdapterOptions, } from './WebSocketAdapter';
+export { SupabasePresenceAdapter } from './SupabaseAdapter';

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

@@ -0,0 +1,10 @@
+/**
+ * PresenceProvider - Real-time collaboration provider
+ *
+ * @module collaboration/PresenceProvider
+ */
+export { PresenceProvider } from './PresenceProvider';
+export { PresenceContext, usePresenceContext } from './PresenceContext';
+export type { PresenceUser, TypingUser, ConnectionStatus, PresenceEvent, PresenceContextValue, PresenceProviderProps, PresenceProviderTheme, } from './PresenceProvider.types';
+export type { PresenceAdapter, PresenceAdapterConfig, } from './adapters/PresenceAdapter';
+export { MockPresenceAdapter } from './adapters/MockAdapter';

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { PromptInputProps } from "./PromptInput.types";
+/**
+ * AI prompt input component with integrated controls for model selection,
+ * attachments, voice input, and settings.
+ *
+ * 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 declare const PromptInput: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,481 @@
+import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { promptInputTheme } from './PromptInput.theme.js';
+import { Textarea } from '../../forms/Textarea/Textarea.js';
+import '../../forms/Textarea/Textarea.theme.js';
+import { Dropdown } from '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import { Button } from '../../core/Button/Button.js';
+
+/**
+ * Default model options for the model selector
+ */
+const DEFAULT_MODELS = [
+    { key: "sonnet", label: "Claude 3.5 Sonnet" },
+    { key: "gpt", label: "GPT-5 Turbo" },
+    { key: "gemini", label: "Gemini 2.5" },
+];
+/**
+ * AI prompt input component with integrated controls for model selection,
+ * attachments, voice input, and settings.
+ *
+ * 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}
+ * />
+ * ```
+ */
+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, 
+// State
+state = "default", disabled = false, helperText, showCharCount = false, 
+// Model selection
+selectedModel: controlledModel, defaultSelectedModel, models = DEFAULT_MODELS, onModelChange, 
+// Event handlers
+onSubmit, onAttachmentClick, onVoiceClick, onSettingsClick, onKeyDown, 
+// 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 = (React__default.createElement(ArrowRightIcon, { className: "size-4", strokeWidth: 2.5 })), submitShortcut, 
+// Styling
+className, textareaClassName, footerClassName, theme = {}, 
+// Accessibility
+"aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, id: propId, ...props }, ref) => {
+    // ========== State Management ==========
+    var _a, _b;
+    // 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) || "",
+    ]);
+    // Ref for textarea element
+    const internalTextareaRef = useRef(null);
+    const textareaRef = ref || internalTextareaRef;
+    const fileInputRef = useRef(null);
+    const uniqueId = useId();
+    // Determine if component is controlled
+    const isControlled = value !== undefined;
+    const isModelControlled = controlledModel !== undefined;
+    const isAttachmentsControlled = controlledAttachments !== undefined;
+    // Get current value
+    const currentValue = isControlled ? value : internalValue;
+    const currentModel = isModelControlled ? controlledModel : internalModel[0];
+    const currentAttachments = isAttachmentsControlled
+        ? controlledAttachments
+        : internalAttachments;
+    // Generate ID for accessibility
+    const id = propId || `prompt-input-${Math.random().toString(36).slice(2, 9)}`;
+    const helperTextId = helperText ? `${id}-helper` : undefined;
+    // ========== Derived State ==========
+    const isDisabled = state === "disabled" || disabled;
+    const isInvalid = state === "invalid";
+    const isLoading = state === "loading";
+    const canSubmit = (currentValue.trim().length > 0 || currentAttachments.length > 0) &&
+        !isDisabled;
+    // Model key to display name mapping
+    const modelMap = models.reduce((acc, model) => {
+        acc[model.key] = model.label;
+        return acc;
+    }, {});
+    // ========== Development Warnings ==========
+    useEffect(() => {
+        if (process.env.NODE_ENV !== "production") {
+            if (isControlled && !onChange) {
+                // eslint-disable-next-line no-console
+                console.warn("[PromptInput] Component is controlled (value prop provided) but missing onChange handler. The input will be read-only.");
+            }
+            if (!onSubmit) {
+                // eslint-disable-next-line no-console
+                console.warn("[PromptInput] No onSubmit handler provided. Submit button will have no effect.");
+            }
+        }
+    }, [isControlled, onChange, onSubmit]);
+    // ========== Event Handlers ==========
+    /**
+     * Handle textarea value change
+     */
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        // Enforce maxLength if provided
+        if (maxLength && newValue.length > maxLength) {
+            return;
+        }
+        // Update internal state if uncontrolled
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        // Call user's onChange handler
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, e);
+    }, [isControlled, maxLength, onChange]);
+    /**
+     * Handle model selection change
+     */
+    const handleModelChange = useCallback((keys) => {
+        if (keys === "all")
+            return;
+        const newModel = String(keys[0]);
+        // Update internal state if uncontrolled
+        if (!isModelControlled) {
+            setInternalModel([newModel]);
+        }
+        // Call user's handler
+        onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange(newModel);
+    }, [isModelControlled, onModelChange]);
+    // ========== Multimodal Handlers ==========
+    /**
+     * Validate file type
+     */
+    const isValidFileType = useCallback((file) => {
+        if (acceptedFileTypes.length === 0)
+            return true;
+        return acceptedFileTypes.some((type) => {
+            if (type.includes("/*")) {
+                const [category] = type.split("/");
+                return file.type.startsWith(`${category}/`);
+            }
+            if (type.startsWith(".")) {
+                return file.name.toLowerCase().endsWith(type.toLowerCase());
+            }
+            return file.type === type;
+        });
+    }, [acceptedFileTypes]);
+    /**
+     * Compress image using canvas
+     */
+    const compressImage = useCallback(async (file) => {
+        if (!compressImages || !file.type.startsWith("image/")) {
+            return file;
+        }
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                let { width, height } = img;
+                if (width > maxImageDimension || height > maxImageDimension) {
+                    if (width > height) {
+                        height = (height / width) * maxImageDimension;
+                        width = maxImageDimension;
+                    }
+                    else {
+                        width = (width / height) * maxImageDimension;
+                        height = maxImageDimension;
+                    }
+                }
+                const canvas = document.createElement("canvas");
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext("2d");
+                if (!ctx) {
+                    reject(new Error("Failed to get canvas context"));
+                    return;
+                }
+                ctx.drawImage(img, 0, 0, width, height);
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        resolve(new File([blob], file.name, {
+                            type: file.type,
+                            lastModified: Date.now(),
+                        }));
+                    }
+                    else {
+                        reject(new Error("Failed to compress"));
+                    }
+                }, file.type, imageQuality);
+            };
+            img.onerror = () => reject(new Error("Failed to load image"));
+            img.src = URL.createObjectURL(file);
+        });
+    }, [compressImages, maxImageDimension, imageQuality]);
+    /**
+     * Update attachments (handles controlled/uncontrolled)
+     */
+    const updateAttachments = useCallback((newAttachments) => {
+        if (!isAttachmentsControlled) {
+            setInternalAttachments(newAttachments);
+        }
+        onAttachmentsChange === null || onAttachmentsChange === void 0 ? void 0 : onAttachmentsChange(newAttachments);
+    }, [isAttachmentsControlled, onAttachmentsChange]);
+    /**
+     * Process and add files
+     */
+    const processFiles = useCallback(async (files) => {
+        const fileArray = Array.from(files);
+        for (const file of fileArray) {
+            if (currentAttachments.length >= maxAttachments) {
+                onAttachmentError === null || onAttachmentError === void 0 ? void 0 : onAttachmentError({
+                    type: "too-many-attachments",
+                    message: `Maximum ${maxAttachments} attachments allowed`,
+                });
+                return;
+            }
+            if (!isValidFileType(file)) {
+                onAttachmentError === null || onAttachmentError === void 0 ? void 0 : onAttachmentError({
+                    type: "file-invalid-type",
+                    message: `File type not accepted: ${file.name}`,
+                    file,
+                });
+                continue;
+            }
+            if (file.size > maxFileSize) {
+                const maxSizeMB = (maxFileSize / (1024 * 1024)).toFixed(1);
+                onAttachmentError === null || onAttachmentError === void 0 ? void 0 : onAttachmentError({
+                    type: "file-too-large",
+                    message: `File too large: ${file.name} (max ${maxSizeMB}MB)`,
+                    file,
+                });
+                continue;
+            }
+            const isImage = file.type.startsWith("image/");
+            const attachmentId = `${uniqueId}-${Date.now()}-${Math.random()}`;
+            const newAttachment = {
+                id: attachmentId,
+                file,
+                type: isImage ? "image" : "file",
+                isCompressing: isImage && compressImages,
+            };
+            const updated = [...currentAttachments, newAttachment];
+            updateAttachments(updated);
+            if (isImage && compressImages) {
+                try {
+                    const compressedFile = await compressImage(file);
+                    const previewUrl = URL.createObjectURL(compressedFile);
+                    updateAttachments(updated.map((a) => a.id === attachmentId
+                        ? {
+                            ...a,
+                            file: compressedFile,
+                            previewUrl,
+                            isCompressing: false,
+                        }
+                        : a));
+                }
+                catch (_a) {
+                    const previewUrl = URL.createObjectURL(file);
+                    updateAttachments(updated.map((a) => a.id === attachmentId
+                        ? { ...a, previewUrl, isCompressing: false }
+                        : a));
+                }
+            }
+            else if (isImage) {
+                const previewUrl = URL.createObjectURL(file);
+                updateAttachments(updated.map((a) => a.id === attachmentId ? { ...a, previewUrl } : a));
+            }
+        }
+    }, [
+        currentAttachments,
+        maxAttachments,
+        maxFileSize,
+        isValidFileType,
+        compressImages,
+        compressImage,
+        onAttachmentError,
+        uniqueId,
+        updateAttachments,
+    ]);
+    /**
+     * Handle paste for images
+     */
+    const handlePaste = useCallback((e) => {
+        var _a;
+        const items = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.items;
+        if (!items)
+            return;
+        const files = [];
+        for (const item of Array.from(items)) {
+            if (item.kind === "file") {
+                const file = item.getAsFile();
+                if (file)
+                    files.push(file);
+            }
+        }
+        if (files.length > 0) {
+            e.preventDefault();
+            processFiles(files);
+        }
+    }, [processFiles]);
+    /**
+     * Remove attachment
+     */
+    const removeAttachment = useCallback((attachmentId) => {
+        const attachment = currentAttachments.find((a) => a.id === attachmentId);
+        if (attachment === null || attachment === void 0 ? void 0 : attachment.previewUrl) {
+            URL.revokeObjectURL(attachment.previewUrl);
+        }
+        updateAttachments(currentAttachments.filter((a) => a.id !== attachmentId));
+    }, [currentAttachments, updateAttachments]);
+    /**
+     * Handle submit action
+     */
+    const handleSubmit = useCallback(() => {
+        const trimmedValue = currentValue.trim();
+        if (!trimmedValue && currentAttachments.length === 0) {
+            return;
+        }
+        if (isDisabled) {
+            return;
+        }
+        // Call onSubmit with trimmed value and current model
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(trimmedValue, currentModel);
+        // Clear input after submit if uncontrolled
+        if (!isControlled) {
+            setInternalValue("");
+        }
+        if (!isAttachmentsControlled) {
+            currentAttachments.forEach((a) => {
+                if (a.previewUrl)
+                    URL.revokeObjectURL(a.previewUrl);
+            });
+            setInternalAttachments([]);
+        }
+    }, [
+        currentValue,
+        currentModel,
+        currentAttachments,
+        isDisabled,
+        onSubmit,
+        isControlled,
+        isAttachmentsControlled,
+    ]);
+    /**
+     * Handle keyboard shortcuts
+     */
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        // Cmd/Ctrl+Enter to submit
+        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            e.preventDefault();
+            handleSubmit();
+            return;
+        }
+        // Escape to clear (only in uncontrolled mode)
+        if (e.key === "Escape" && !isControlled) {
+            setInternalValue("");
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            return;
+        }
+        // Call user's onKeyDown handler
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    }, [handleSubmit, isControlled, onKeyDown, textareaRef]);
+    // ========== Auto-resize Logic ==========
+    /**
+     * Auto-resize textarea based on content
+     */
+    useEffect(() => {
+        if (textareaRef.current) {
+            const minH = parseInt(minHeight, 10);
+            const maxH = parseInt(maxHeight, 10);
+            // Reset height to minimum first
+            textareaRef.current.style.height = minHeight;
+            // Calculate new height based on scroll height
+            const scrollH = textareaRef.current.scrollHeight;
+            const newHeight = Math.min(Math.max(scrollH, minH), maxH);
+            // Apply new height
+            textareaRef.current.style.height = `${newHeight}px`;
+        }
+    }, [currentValue, minHeight, maxHeight, textareaRef]);
+    // ========== Theme Merging ==========
+    const mergedTheme = {
+        baseStyle: theme.baseStyle || promptInputTheme.baseStyle,
+        textareaStyle: theme.textareaStyle || promptInputTheme.textareaStyle,
+        footerStyle: theme.footerStyle || promptInputTheme.footerStyle,
+        actionsStyle: theme.actionsStyle || promptInputTheme.actionsStyle,
+        submitButtonStyle: theme.submitButtonStyle || promptInputTheme.submitButtonStyle,
+        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;
+    // ========== Render ==========
+    return (React__default.createElement("div", { className: cn("min-w-xl mx-auto", className), ...props },
+        React__default.createElement("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" }),
+        React__default.createElement("div", { className: cn(mergedTheme.baseStyle, mergedTheme.stateStyle) },
+            React__default.createElement("div", { className: "flex items-start gap-2" },
+                React__default.createElement(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 && (React__default.createElement("div", { className: "flex flex-wrap gap-2 py-2 px-1" }, currentAttachments.map((attachment) => {
+                var _a;
+                return (React__default.createElement("div", { key: attachment.id, className: "relative group rounded-lg border border-[var(--color-border)] bg-white" },
+                    attachment.type === "image" ? (attachment.isCompressing ? (React__default.createElement("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg" },
+                        React__default.createElement("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }))) : (React__default.createElement("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (React__default.createElement("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg" },
+                        React__default.createElement(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }),
+                        React__default.createElement("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full" }, (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase()))),
+                    React__default.createElement("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}` },
+                        React__default.createElement(XMarkIcon, { className: "size-3", strokeWidth: 3 }))));
+            }))),
+            React__default.createElement("div", { className: cn(mergedTheme.footerStyle, footerClassName) },
+                React__default.createElement("div", { className: mergedTheme.actionsStyle },
+                    showAttachmentButton && (React__default.createElement(Dropdown, { selectionMode: "none" },
+                        React__default.createElement(Dropdown.Trigger, null,
+                            React__default.createElement(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", "aria-label": "Add attachment", disabled: isDisabled },
+                                React__default.createElement(PlusIcon, { className: "size-4", strokeWidth: 2 }))),
+                        React__default.createElement(Dropdown.Menu, null,
+                            React__default.createElement(Dropdown.Item, { key: "upload-image", 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();
+                                } }, "Upload Image"),
+                            React__default.createElement(Dropdown.Item, { key: "add-link", 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();
+                                } }, "Add Link"),
+                            React__default.createElement(Dropdown.Item, { key: "upload-pdf", 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();
+                                } }, "Upload PDF")))),
+                    showSettingsButton && (React__default.createElement(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled },
+                        React__default.createElement(AdjustmentsHorizontalIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2 }))),
+                    showVoiceButton && (React__default.createElement(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", onClick: onVoiceClick, "aria-label": "Voice input", disabled: isDisabled },
+                        React__default.createElement(MicrophoneIcon, { className: "size-4", strokeWidth: 2 }),
+                        " Voice")),
+                    showModelSelector && (React__default.createElement(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled ? [controlledModel] : internalModel, onSelectionChange: handleModelChange },
+                        React__default.createElement(Dropdown.Trigger, null,
+                            React__default.createElement(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", "aria-label": "Select AI model", disabled: isDisabled },
+                                modelMap[currentModel] || "Select Model",
+                                React__default.createElement(ChevronDownIcon, { className: "size-3 opacity-80", strokeWidth: 2 }))),
+                        React__default.createElement(Dropdown.Menu, null, models.map((model) => (React__default.createElement(Dropdown.Item, { key: model.key, itemKey: model.key },
+                            model.icon && (React__default.createElement("span", { className: "mr-2" }, model.icon)),
+                            model.label))))))),
+                React__default.createElement("div", null,
+                    React__default.createElement(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 }, submitButtonIcon)))),
+        displayHelperText && (React__default.createElement("div", { id: helperTextId, className: cn("mt-1 text-xs", isInvalid
+                ? "text-[var(--color-danger)]"
+                : "text-[var(--color-text-muted)]"), role: isInvalid ? "alert" : undefined, "aria-live": isInvalid ? "polite" : undefined }, displayHelperText))));
+});
+PromptInput.displayName = "PromptInput";
+
+export { PromptInput };