import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useThread } from "@openuidev/react-headless";
import clsx from "clsx";
import { ArrowUp, Square } from "lucide-react";
import { useCallback, useLayoutEffect, useRef, useState } from "react";
import { useComposerState } from "../../../hooks/useComposerState";
import { IconButton } from "../../IconButton";
export const Composer = ({ className, placeholder = "Type your query here" }) => {
    const { textContent, setTextContent } = useComposerState();
    const processMessage = useThread((s) => s.processMessage);
    const cancelMessage = useThread((s) => s.cancelMessage);
    const isRunning = useThread((s) => s.isRunning);
    const isLoadingMessages = useThread((s) => s.isLoadingMessages);
    const inputRef = useRef(null);
    const [hasInputOverflowTop, setHasInputOverflowTop] = useState(false);
    const [hasInputOverflowBottom, setHasInputOverflowBottom] = useState(false);
    const updateInputOverflow = useCallback(() => {
        const input = inputRef.current;
        if (!input)
            return;
        const maxScrollTop = input.scrollHeight - input.clientHeight;
        setHasInputOverflowTop(maxScrollTop > 0 && input.scrollTop > 0);
        setHasInputOverflowBottom(maxScrollTop > 0 && input.scrollTop < maxScrollTop - 1);
    }, []);
    const handleSubmit = () => {
        if (!textContent.trim() || isRunning || isLoadingMessages) {
            return;
        }
        processMessage({
            role: "user",
            content: textContent,
        });
        setTextContent("");
    };
    useLayoutEffect(() => {
        const input = inputRef.current;
        if (!input)
            return;
        // Reset to 0 (not "auto") so scrollHeight reflects content, not container
        input.style.height = "0px";
        input.style.height = `${Math.max(input.scrollHeight, 24)}px`;
        updateInputOverflow();
    }, [textContent, updateInputOverflow]);
    return (_jsx("div", { className: clsx("openui-agent-thread-composer", className), "data-drafting": textContent.length > 0 || undefined, onClick: (e) => {
            if (!e.target.closest("button, a, [role='button']")) {
                inputRef.current?.focus();
            }
        }, children: _jsxs("div", { className: "openui-agent-thread-composer__input-wrapper", "data-overflow-top": hasInputOverflowTop || undefined, "data-overflow-bottom": hasInputOverflowBottom || undefined, children: [_jsx("textarea", { ref: inputRef, value: textContent, onChange: (e) => setTextContent(e.target.value), onScroll: updateInputOverflow, className: "openui-agent-thread-composer__input", placeholder: placeholder, rows: 1, onKeyDown: (e) => {
                        if (e.key === "Enter" && !e.shiftKey) {
                            e.preventDefault();
                            handleSubmit();
                        }
                    } }), _jsx("div", { className: "openui-agent-thread-composer__action-bar", children: _jsx(IconButton, { onClick: isRunning ? cancelMessage : handleSubmit, icon: isRunning ? _jsx(Square, { size: "1em", fill: "currentColor" }) : _jsx(ArrowUp, { size: "1em" }), size: "extra-small", variant: "primary", "aria-label": isRunning ? "Cancel message" : "Send message", className: "openui-agent-thread-composer__submit-button" }) })] }) }));
};
export default Composer;
//# sourceMappingURL=Composer.js.map