import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { useTheme } from '../../../theme';
const formatFileSize = (size) => {
    if (size <= 0)
        return '0 B';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    const exponent = Math.min(Math.floor(Math.log(size) / Math.log(1024)), units.length - 1);
    const quotient = size / Math.pow(1024, exponent);
    const formatted = quotient >= 10 ? quotient.toFixed(0) : quotient.toFixed(1);
    return `${formatted} ${units[exponent]}`;
};
const PlusIcon = (props) => (_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', ...props, children: [_jsx("line", { x1: '12', y1: '5', x2: '12', y2: '19' }), _jsx("line", { x1: '5', y1: '12', x2: '19', y2: '12' })] }));
const DocumentIcon = (props) => (_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round', ...props, children: [_jsx("path", { d: 'M7 3h7l5 5v13a1 1 0 0 1-1 1H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' }), _jsx("path", { d: 'M14 3v5h5' }), _jsx("path", { d: 'M9 13h6' }), _jsx("path", { d: 'M9 17h6' })] }));
export const ChatInput = ({ inputValue, inputHistory = [], placeholder, isInputDisabled, isStreaming, isSubmissionDisabled = false, isSending = false, isCancelling = false, canCancel = true, onCancelSend, onInputChange, attachments, onAttachmentsAdd, onAttachmentRemove, slashCommandOptions = [], onSlashCommandSelect, activeSlashCommand, onSlashCommandStateChange }) => {
    const textareaRef = React.useRef(null);
    const fileInputRef = React.useRef(null);
    const theme = useTheme();
    const historyDraftRef = React.useRef('');
    const [historyIndex, setHistoryIndex] = React.useState(null);
    const effectiveIsInputDisabled = isInputDisabled || isSending;
    const adjustTextareaHeight = React.useCallback(() => {
        const textarea = textareaRef.current;
        if (!textarea)
            return;
        textarea.style.height = 'auto';
        textarea.style.height = `${textarea.scrollHeight}px`;
    }, []);
    const focusTextareaEnd = React.useCallback(() => {
        const textarea = textareaRef.current;
        if (!textarea)
            return;
        const length = textarea.value.length;
        textarea.setSelectionRange(length, length);
        textarea.focus();
    }, []);
    const applyHistoryValue = React.useCallback((value) => {
        onInputChange(value);
        if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
            window.requestAnimationFrame(() => {
                focusTextareaEnd();
            });
        }
        else {
            focusTextareaEnd();
        }
    }, [focusTextareaEnd, onInputChange]);
    const handleAddAttachmentClick = React.useCallback(() => {
        if (effectiveIsInputDisabled)
            return;
        fileInputRef.current?.click();
    }, [effectiveIsInputDisabled]);
    const handleFileInputChange = React.useCallback((event) => {
        const files = Array.from(event.target.files ?? []);
        if (files.length > 0) {
            onAttachmentsAdd(files);
        }
        event.target.value = '';
    }, [onAttachmentsAdd]);
    const handleAttachmentDelete = React.useCallback((attachmentId) => {
        onAttachmentRemove(attachmentId);
    }, [onAttachmentRemove]);
    const [isSlashCommandActive, setIsSlashCommandActive] = React.useState(false);
    const [slashQuery, setSlashQuery] = React.useState('');
    const [highlightedSlashIndex, setHighlightedSlashIndex] = React.useState(0);
    const [internalSlashCommandState, setInternalSlashCommandState] = React.useState(null);
    const [slashCommandShowErrors, setSlashCommandShowErrors] = React.useState(false);
    const slashCommandArgRefs = React.useRef({});
    const slashCommandOptionRefs = React.useRef([]);
    const isSlashCommandControlled = activeSlashCommand !== undefined;
    const slashCommandState = isSlashCommandControlled ? activeSlashCommand ?? null : internalSlashCommandState;
    const slashCommandStateRef = React.useRef(slashCommandState);
    React.useEffect(() => {
        slashCommandStateRef.current = slashCommandState;
    }, [slashCommandState]);
    const setSlashCommandState = React.useCallback((update) => {
        const current = slashCommandStateRef.current;
        const nextStateCandidate = typeof update === 'function' ? update(current) : update;
        const nextState = nextStateCandidate ?? null;
        if (!isSlashCommandControlled) {
            setInternalSlashCommandState(nextState);
        }
        onSlashCommandStateChange?.(nextState);
        slashCommandStateRef.current = nextState;
    }, [isSlashCommandControlled, onSlashCommandStateChange]);
    const handleInputValueChange = React.useCallback((value) => {
        if (historyIndex !== null) {
            setHistoryIndex(null);
            historyDraftRef.current = '';
        }
        onInputChange(value);
    }, [historyIndex, onInputChange]);
    const availableSlashCommands = React.useMemo(() => {
        if (slashCommandOptions.length <= 1) {
            return slashCommandOptions;
        }
        const seen = new Set();
        return slashCommandOptions.filter((option) => {
            if (seen.has(option.id))
                return false;
            seen.add(option.id);
            return true;
        });
    }, [slashCommandOptions]);
    const filteredSlashCommands = React.useMemo(() => {
        if (!isSlashCommandActive)
            return [];
        const normalizedQuery = slashQuery.trim().toLowerCase();
        if (!normalizedQuery) {
            return availableSlashCommands.slice(0, 20);
        }
        return availableSlashCommands
            .filter((option) => {
            const haystack = [
                option.title,
                option.description ?? '',
                option.serverName ?? ''
            ]
                .join(' ')
                .toLowerCase();
            return haystack.includes(normalizedQuery);
        })
            .slice(0, 20);
    }, [availableSlashCommands, isSlashCommandActive, slashQuery]);
    const hasSlashCommandMatches = filteredSlashCommands.length > 0;
    const noSlashCommandsAvailable = availableSlashCommands.length === 0;
    const shouldRenderSlashCommands = isSlashCommandActive && !isSending;
    const slashCommandArgumentDefinitions = slashCommandState?.option.prompt.arguments ?? [];
    const missingSlashCommandArgs = React.useMemo(() => {
        if (!slashCommandState)
            return [];
        return slashCommandArgumentDefinitions
            .filter((arg) => arg.required && (!slashCommandState.args[arg.name] || slashCommandState.args[arg.name]?.trim().length === 0))
            .map((arg) => arg.name);
    }, [slashCommandArgumentDefinitions, slashCommandState]);
    const hasSlashCommandSelection = Boolean(slashCommandState);
    const trimmedInputValue = inputValue.trim();
    const shouldPreventSubmissionForEmptyMessage = !hasSlashCommandSelection && trimmedInputValue.length === 0;
    const shouldPreventSubmissionForArgs = hasSlashCommandSelection && missingSlashCommandArgs.length > 0;
    const isSubmitDisabled = isInputDisabled || isSubmissionDisabled || shouldPreventSubmissionForEmptyMessage || shouldPreventSubmissionForArgs || isSending;
    const submitLabel = React.useMemo(() => {
        if (isSending || isStreaming)
            return 'Sending…';
        if (isSubmissionDisabled)
            return 'Processing…';
        return 'Send';
    }, [isSending, isStreaming, isSubmissionDisabled]);
    const cancelLabel = React.useMemo(() => {
        if (isCancelling)
            return 'Cancelling…';
        return 'Cancel';
    }, [isCancelling]);
    const shouldShowCancelButton = isSending || isStreaming;
    const cancelButtonDisabled = !onCancelSend || !canCancel || isCancelling;
    const cancelButtonClassName = [
        theme.chatInput.cancelButton ?? theme.chatInput.submitButton,
        cancelButtonDisabled ? (theme.chatInput.cancelButtonDisabled ?? theme.chatInput.submitButtonDisabled) : ''
    ].filter(Boolean).join(' ');
    const shouldShowSlashCommandErrors = slashCommandShowErrors && missingSlashCommandArgs.length > 0;
    React.useEffect(() => {
        const leadingWhitespaceMatch = inputValue.match(/^[\s\t\f\v]*/);
        const leadingWhitespaceLength = leadingWhitespaceMatch ? leadingWhitespaceMatch[0].length : 0;
        const trimmedLeadingWhitespace = inputValue.slice(leadingWhitespaceLength);
        if (!trimmedLeadingWhitespace.startsWith('/')) {
            if (isSlashCommandActive || slashQuery) {
                setIsSlashCommandActive(false);
                setSlashQuery('');
                setHighlightedSlashIndex(0);
            }
            return;
        }
        const commandBody = trimmedLeadingWhitespace.slice(1);
        const delimiterIndex = commandBody.search(/[\s\n]/);
        if (delimiterIndex === 0) {
            if (isSlashCommandActive || slashQuery) {
                setIsSlashCommandActive(false);
                setSlashQuery('');
                setHighlightedSlashIndex(0);
            }
            return;
        }
        if (delimiterIndex !== -1) {
            const remainder = commandBody.slice(delimiterIndex);
            if (remainder.trim().length === 0) {
                if (isSlashCommandActive || slashQuery) {
                    setIsSlashCommandActive(false);
                    setSlashQuery('');
                    setHighlightedSlashIndex(0);
                }
                return;
            }
        }
        const query = delimiterIndex === -1 ? commandBody : commandBody.slice(0, delimiterIndex);
        setIsSlashCommandActive(true);
        setSlashQuery(query);
    }, [inputValue, isSlashCommandActive, slashQuery]);
    React.useEffect(() => {
        setHighlightedSlashIndex(0);
    }, [slashQuery]);
    React.useEffect(() => {
        if (highlightedSlashIndex >= filteredSlashCommands.length && filteredSlashCommands.length > 0) {
            setHighlightedSlashIndex(filteredSlashCommands.length - 1);
        }
        if (filteredSlashCommands.length === 0 && highlightedSlashIndex !== 0) {
            setHighlightedSlashIndex(0);
        }
    }, [filteredSlashCommands.length, highlightedSlashIndex]);
    React.useEffect(() => {
        if (!slashCommandState) {
            setSlashCommandShowErrors(false);
            slashCommandArgRefs.current = {};
            slashCommandOptionRefs.current = [];
        }
    }, [slashCommandState]);
    React.useEffect(() => {
        if (slashCommandShowErrors && missingSlashCommandArgs.length === 0) {
            setSlashCommandShowErrors(false);
        }
    }, [missingSlashCommandArgs.length, slashCommandShowErrors]);
    React.useEffect(() => {
        if (!shouldRenderSlashCommands) {
            slashCommandOptionRefs.current = [];
            return;
        }
        const target = slashCommandOptionRefs.current[highlightedSlashIndex];
        target?.scrollIntoView({ block: 'nearest' });
    }, [highlightedSlashIndex, shouldRenderSlashCommands, filteredSlashCommands.length]);
    slashCommandOptionRefs.current.length = filteredSlashCommands.length;
    const focusFirstMissingSlashCommandArg = React.useCallback(() => {
        if (missingSlashCommandArgs.length === 0)
            return;
        const firstMissing = missingSlashCommandArgs[0];
        const target = slashCommandArgRefs.current[firstMissing];
        if (target) {
            target.focus();
            target.select?.();
        }
    }, [missingSlashCommandArgs]);
    const handleSlashCommandArgValueChange = React.useCallback((argName, value) => {
        setSlashCommandState((current) => {
            if (!current)
                return current;
            return {
                ...current,
                args: {
                    ...current.args,
                    [argName]: value
                }
            };
        });
    }, [setSlashCommandState]);
    const clearSlashCommandSelection = React.useCallback(() => {
        setSlashCommandState(null);
        setSlashCommandShowErrors(false);
        slashCommandArgRefs.current = {};
        setHistoryIndex(null);
        historyDraftRef.current = '';
        const focusTextarea = () => {
            textareaRef.current?.focus();
        };
        if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
            window.requestAnimationFrame(focusTextarea);
        }
        else {
            focusTextarea();
        }
    }, [setSlashCommandState]);
    const handleSlashCommandSelection = React.useCallback((option) => {
        const result = onSlashCommandSelect?.(option);
        if (result === true) {
            setIsSlashCommandActive(false);
            setSlashQuery('');
            setHighlightedSlashIndex(0);
            requestAnimationFrame(() => {
                textareaRef.current?.focus();
            });
            return;
        }
        const argumentDefinitions = option.prompt.arguments ?? [];
        const initialArgs = {};
        for (const arg of argumentDefinitions) {
            initialArgs[arg.name] = '';
        }
        setHistoryIndex(null);
        historyDraftRef.current = '';
        setSlashCommandState({ option, args: initialArgs });
        setSlashCommandShowErrors(false);
        slashCommandArgRefs.current = {};
        setIsSlashCommandActive(false);
        setSlashQuery('');
        setHighlightedSlashIndex(0);
        handleInputValueChange('');
        const focusNext = () => {
            if (argumentDefinitions.length > 0) {
                const firstArgName = argumentDefinitions[0]?.name;
                if (firstArgName) {
                    const target = slashCommandArgRefs.current[firstArgName];
                    if (target) {
                        target.focus();
                        return;
                    }
                }
            }
            textareaRef.current?.focus();
        };
        if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
            window.requestAnimationFrame(() => {
                window.requestAnimationFrame(focusNext);
            });
        }
        else {
            focusNext();
        }
    }, [handleInputValueChange, onSlashCommandSelect, setSlashCommandState]);
    React.useEffect(() => {
        setHistoryIndex(null);
        historyDraftRef.current = '';
    }, [inputHistory]);
    React.useLayoutEffect(() => {
        adjustTextareaHeight();
    }, [adjustTextareaHeight, inputValue]);
    React.useEffect(() => {
        adjustTextareaHeight();
    }, [adjustTextareaHeight]);
    return (_jsxs("div", { className: theme.chatInput.container, children: [attachments.length > 0 && (_jsx("div", { className: theme.chatInput.attachmentList, children: attachments.map((attachment) => {
                    const isImage = attachment.type.startsWith('image/');
                    const previewSrc = isImage ? (attachment.dataUrl ?? attachment.sourceUrl) : undefined;
                    return (_jsxs("div", { className: theme.chatInput.attachmentItem, children: [_jsx("div", { className: theme.chatInput.attachmentThumbnail, "aria-hidden": 'true', children: isImage && previewSrc ? (_jsx("img", { src: previewSrc, alt: '', className: theme.chatInput.attachmentImage })) : (_jsx(DocumentIcon, { className: theme.chatInput.attachmentIcon })) }), _jsxs("div", { className: theme.chatInput.attachmentMeta, children: [_jsx("span", { className: theme.chatInput.attachmentName, title: attachment.name, children: attachment.name }), _jsx("span", { className: theme.chatInput.attachmentSize, children: formatFileSize(attachment.size) })] }), _jsx("button", { type: 'button', "aria-label": `Remove ${attachment.name}`, className: theme.chatInput.attachmentRemoveButton, onClick: () => handleAttachmentDelete(attachment.id), children: _jsx("span", { "aria-hidden": 'true', children: "\u00D7" }) })] }, attachment.id));
                }) })), _jsxs("div", { className: theme.chatInput.inputRow, children: [_jsx("input", { ref: fileInputRef, type: 'file', multiple: true, className: 'sr-only', onChange: handleFileInputChange }), _jsx("button", { type: 'button', className: theme.chatInput.addAttachmentButton, onClick: handleAddAttachmentClick, disabled: effectiveIsInputDisabled, "aria-label": 'Add attachment', children: _jsx(PlusIcon, { className: theme.chatInput.addAttachmentIcon, "aria-hidden": 'true' }) }), _jsx("div", { className: 'relative flex-1', children: isSending ? (_jsxs("div", { className: theme.chatDialog.sendingToast, role: 'status', "aria-live": 'polite', children: [_jsx("span", { className: theme.chatDialog.sendingToastIcon, "aria-hidden": 'true' }), _jsx("div", { className: 'flex flex-col gap-0.5', children: _jsx("span", { className: theme.chatDialog.sendingToastTitle, children: "Sending message\u2026" }) })] })) : (_jsxs(_Fragment, { children: [slashCommandState && (_jsx("div", { className: theme.chatInput.slashCommandPillContainer, children: _jsxs("div", { className: theme.chatInput.slashCommandPill, children: [_jsxs("div", { className: theme.chatInput.slashCommandPillHeader, children: [_jsxs("div", { className: theme.chatInput.slashCommandPillTitleGroup, children: [_jsx("span", { className: theme.chatInput.slashCommandPillTitle, children: slashCommandState.option.title }), slashCommandState.option.serverName && (_jsx("span", { className: theme.chatInput.slashCommandPillMeta, children: slashCommandState.option.serverName }))] }), _jsx("button", { type: 'button', className: theme.chatInput.slashCommandPillRemoveButton, onClick: clearSlashCommandSelection, "aria-label": 'Remove slash command', children: "\u00D7" })] }), slashCommandState.option.description && (_jsx("p", { className: theme.chatInput.slashCommandPillDescription, children: slashCommandState.option.description })), slashCommandArgumentDefinitions.length > 0 && (_jsx("div", { className: theme.chatInput.slashCommandPillArgs, children: slashCommandArgumentDefinitions.map((arg) => {
                                                    const value = slashCommandState.args[arg.name] ?? '';
                                                    const isRequired = Boolean(arg.required);
                                                    const isMissing = shouldShowSlashCommandErrors && missingSlashCommandArgs.includes(arg.name);
                                                    const inputClassName = isMissing
                                                        ? `${theme.chatInput.slashCommandPillArgInput} ${theme.chatInput.slashCommandPillArgInputError}`
                                                        : theme.chatInput.slashCommandPillArgInput;
                                                    return (_jsxs("label", { className: theme.chatInput.slashCommandPillArgItem, children: [_jsxs("span", { className: theme.chatInput.slashCommandPillArgLabel, children: [arg.name, isRequired ? (_jsx("span", { className: theme.chatInput.slashCommandPillRequiredBadge, children: "Required" })) : null] }), arg.description ? (_jsx("span", { className: theme.chatInput.slashCommandPillArgDescription, children: arg.description })) : null, _jsx("input", { ref: (element) => {
                                                                    slashCommandArgRefs.current[arg.name] = element ?? null;
                                                                }, type: 'text', className: inputClassName, value: value, onChange: (event) => handleSlashCommandArgValueChange(arg.name, event.target.value), placeholder: isRequired ? 'Required argument' : 'Optional argument', autoComplete: 'off', "aria-invalid": isMissing ? 'true' : 'false' }), isMissing ? (_jsx("span", { className: theme.chatInput.slashCommandPillArgError, children: "This field is required." })) : null] }, arg.name));
                                                }) }))] }) })), _jsx("textarea", { ref: textareaRef, value: inputValue, onChange: (event) => handleInputValueChange(event.target.value), placeholder: placeholder, disabled: effectiveIsInputDisabled, rows: 1, className: theme.chatInput.textarea, onKeyDown: (event) => {
                                        const allowHistoryNavigation = !isSlashCommandActive && !hasSlashCommandSelection && !event.altKey && !event.metaKey && !event.ctrlKey && !isSending;
                                        if (allowHistoryNavigation) {
                                            const target = event.currentTarget;
                                            const selectionStart = target.selectionStart ?? 0;
                                            const selectionEnd = target.selectionEnd ?? 0;
                                            if (event.key === 'ArrowUp' &&
                                                !event.shiftKey &&
                                                selectionStart === 0 &&
                                                selectionEnd === 0 &&
                                                inputHistory.length > 0) {
                                                event.preventDefault();
                                                if (historyIndex === null) {
                                                    historyDraftRef.current = inputValue;
                                                    const nextIndex = inputHistory.length - 1;
                                                    setHistoryIndex(nextIndex);
                                                    applyHistoryValue(inputHistory[nextIndex] ?? '');
                                                }
                                                else if (historyIndex > 0) {
                                                    const nextIndex = historyIndex - 1;
                                                    setHistoryIndex(nextIndex);
                                                    applyHistoryValue(inputHistory[nextIndex] ?? '');
                                                }
                                                else {
                                                    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
                                                        window.requestAnimationFrame(() => {
                                                            focusTextareaEnd();
                                                        });
                                                    }
                                                    else {
                                                        focusTextareaEnd();
                                                    }
                                                }
                                                return;
                                            }
                                            if (event.key === 'ArrowDown' &&
                                                !event.shiftKey &&
                                                historyIndex !== null &&
                                                selectionStart === target.value.length &&
                                                selectionEnd === target.value.length) {
                                                event.preventDefault();
                                                if (historyIndex < inputHistory.length - 1) {
                                                    const nextIndex = historyIndex + 1;
                                                    setHistoryIndex(nextIndex);
                                                    applyHistoryValue(inputHistory[nextIndex] ?? '');
                                                }
                                                else {
                                                    setHistoryIndex(null);
                                                    const draft = historyDraftRef.current;
                                                    historyDraftRef.current = '';
                                                    applyHistoryValue(draft);
                                                }
                                                return;
                                            }
                                        }
                                        if (event.key === 'Backspace' &&
                                            !event.shiftKey &&
                                            hasSlashCommandSelection &&
                                            inputValue.length === 0 &&
                                            (event.currentTarget.selectionStart ?? 0) === 0 &&
                                            (event.currentTarget.selectionEnd ?? 0) === 0) {
                                            event.preventDefault();
                                            clearSlashCommandSelection();
                                            return;
                                        }
                                        if (isSlashCommandActive) {
                                            if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && filteredSlashCommands.length > 0) {
                                                event.preventDefault();
                                                setHighlightedSlashIndex((prev) => {
                                                    if (filteredSlashCommands.length === 0)
                                                        return 0;
                                                    if (event.key === 'ArrowDown') {
                                                        return (prev + 1) % filteredSlashCommands.length;
                                                    }
                                                    return (prev - 1 + filteredSlashCommands.length) % filteredSlashCommands.length;
                                                });
                                                return;
                                            }
                                            if (event.key === 'Tab') {
                                                event.preventDefault();
                                                if (!event.shiftKey && filteredSlashCommands[highlightedSlashIndex]) {
                                                    handleSlashCommandSelection(filteredSlashCommands[highlightedSlashIndex]);
                                                }
                                                return;
                                            }
                                            if (event.key === 'Escape') {
                                                event.preventDefault();
                                                setIsSlashCommandActive(false);
                                                setSlashQuery('');
                                                setHighlightedSlashIndex(0);
                                                return;
                                            }
                                            if (event.key === 'Enter' && !event.shiftKey && filteredSlashCommands[highlightedSlashIndex]) {
                                                event.preventDefault();
                                                handleSlashCommandSelection(filteredSlashCommands[highlightedSlashIndex]);
                                                return;
                                            }
                                        }
                                        if (event.key === 'Enter' && !event.shiftKey) {
                                            if (isSubmitDisabled) {
                                                event.preventDefault();
                                                if (shouldPreventSubmissionForArgs) {
                                                    setSlashCommandShowErrors(true);
                                                    focusFirstMissingSlashCommandArg();
                                                }
                                                return;
                                            }
                                            event.preventDefault();
                                            event.currentTarget.form?.requestSubmit();
                                        }
                                    } }), shouldRenderSlashCommands && (_jsxs("div", { className: theme.chatInput.slashCommandPopover, role: 'listbox', "aria-label": 'Chat slash commands', children: [_jsx("div", { className: theme.chatInput.slashCommandSectionLabel, children: "Prompts" }), hasSlashCommandMatches ? (_jsx("ul", { className: theme.chatInput.slashCommandList, children: filteredSlashCommands.map((option, index) => {
                                                const isActive = index === highlightedSlashIndex;
                                                const baseClass = theme.chatInput.slashCommandItem;
                                                const activeClass = theme.chatInput.slashCommandItemActive;
                                                const inactiveClass = theme.chatInput.slashCommandItemInactive ?? '';
                                                const itemClass = isActive
                                                    ? `${baseClass} ${activeClass}`
                                                    : `${baseClass} ${inactiveClass}`;
                                                return (_jsx("li", { className: 'list-none', children: _jsxs("button", { type: 'button', role: 'option', "aria-selected": isActive, className: itemClass, "data-state": isActive ? 'active' : 'inactive', ref: (element) => {
                                                            slashCommandOptionRefs.current[index] = element ?? null;
                                                        }, onMouseDown: (event) => event.preventDefault(), onMouseEnter: () => setHighlightedSlashIndex(index), onClick: () => handleSlashCommandSelection(option), children: [_jsx("span", { className: 'font-semibold text-current', children: option.title }), option.serverName && (_jsx("span", { className: theme.chatInput.slashCommandMeta, children: option.serverName })), option.description && (_jsx("span", { className: theme.chatInput.slashCommandItemDescription, children: option.description }))] }) }, option.id));
                                            }) })) : (_jsx("div", { className: theme.chatInput.slashCommandEmptyState, children: noSlashCommandsAvailable ? 'No prompts available. Connect an MCP server to add slash commands.' : 'No prompts match your search.' }))] }))] })) }), shouldShowCancelButton ? (_jsx("button", { type: 'button', onClick: onCancelSend, disabled: cancelButtonDisabled, className: cancelButtonClassName, children: _jsxs("span", { className: 'inline-flex items-center gap-2', children: [isCancelling && (_jsx("span", { className: theme.message.messageStatusSpinner, "aria-hidden": 'true' })), _jsx("span", { children: cancelLabel })] }) })) : (_jsx("button", { type: 'submit', disabled: isSubmitDisabled, className: `${theme.chatInput.submitButton} ${theme.chatInput.submitButtonDisabled}`, children: _jsx("span", { children: submitLabel }) }))] })] }));
};
