import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useRef, useState } from "react";
import { Textarea } from "../../../../components/ui/textarea";
import { PlaceholderInput, } from "../../../../components/ui/PlaceholderInput";
import { hasPromptPlaceholders } from "../agentPromptPlaceholders";
export function AgentPromptInputArea({ activePlaceholderInput, prompt, hideBottomControls, effectiveIsFocused, readOnly, inputPlaceholder, isSubmitting, placeholderInputRef, promptPlaceholderInputRef, textareaRef, onFilledChange, onActivePlaceholderComplete, onActivePlaceholderCancel, onPromptPlaceholderComplete, onPromptPlaceholderCancel, onPromptChange, onKeyDown, onPaste, onFocus, onBlur, trayOverlay, dropHandlers, }) {
    const isDragOver = dropHandlers?.isDragOver ?? false;
    const trayRef = useRef(null);
    const [trayWidth, setTrayWidth] = useState(0);
    useLayoutEffect(() => {
        if (!trayOverlay) {
            setTrayWidth(0);
            return;
        }
        const el = trayRef.current;
        if (!el)
            return;
        setTrayWidth(el.offsetWidth);
        if (typeof ResizeObserver === "undefined")
            return;
        const ro = new ResizeObserver((entries) => {
            const entry = entries[0];
            if (entry)
                setTrayWidth(entry.contentRect.width);
        });
        ro.observe(el);
        return () => ro.disconnect();
    }, [trayOverlay]);
    if (activePlaceholderInput) {
        return (_jsx(PlaceholderInput, { ref: placeholderInputRef, text: activePlaceholderInput.text, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: onFilledChange, onComplete: onActivePlaceholderComplete, onCancel: onActivePlaceholderCancel }));
    }
    if (hasPromptPlaceholders(prompt)) {
        return (_jsx(PlaceholderInput, { ref: promptPlaceholderInputRef, text: prompt, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: onFilledChange, onComplete: onPromptPlaceholderComplete, onCancel: onPromptPlaceholderCancel }));
    }
    // Reserve only as much textarea right padding as the actual icon row takes:
    // tray width + 8px (right inset of the overlay) + 8px breathing room.
    const textareaStyle = {
        ...(effectiveIsFocused
            ? { viewTransitionName: "assistant-chat-input" }
            : {}),
        ...(trayOverlay && trayWidth > 0
            ? { paddingRight: `${trayWidth + 16}px` }
            : {}),
    };
    return (_jsx("div", { className: "flex items-stretch gap-2", children: _jsxs("div", { className: `relative flex-1 rounded-md transition-shadow ${isDragOver ? "ring-highlight-100 ring-2 ring-offset-1" : ""}`, onDragOver: dropHandlers?.onDragOver, onDragEnter: dropHandlers?.onDragEnter, onDragLeave: dropHandlers?.onDragLeave, onDrop: dropHandlers?.onDrop, children: [trayOverlay && (_jsx("div", { ref: trayRef, className: "pointer-events-auto absolute top-1.5 right-2 z-10 flex items-center gap-0.5", children: trayOverlay })), _jsx(Textarea, { ref: textareaRef, style: textareaStyle, value: prompt, onChange: (event) => onPromptChange(event.target.value), onKeyDown: onKeyDown, onPaste: onPaste, onFocus: onFocus, onBlur: onBlur, placeholder: readOnly
                        ? "Read-only access - ask the owner for Full access to chat with this agent."
                        : inputPlaceholder, className: "max-h-[250px] min-h-[80px] w-full resize-y overflow-y-auto text-[12px] lg:max-h-[450px]", "data-testid": "agent-terminal-prompt", disabled: isSubmitting || readOnly, readOnly: !effectiveIsFocused, title: !effectiveIsFocused
                        ? "Editing in another pane - click here to take over"
                        : undefined }), isDragOver && (_jsx("div", { className: "bg-highlight-10/70 text-highlight-100 pointer-events-none absolute inset-0 flex items-center justify-center rounded-md text-xs font-medium", children: "Drop to add to context or upload" }))] }) }));
}
//# sourceMappingURL=AgentPromptInputArea.js.map