import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Input, Spinner, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core";
import { Activity, PaperclipIcon, SendIcon } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { SelectDocument } from "../../../store";
export default function MessageInput({ value, onChange, onSend, disabled = false, isSending = false, isCompleted = false, activeTaskCount = 0, placeholder = "Type your message..." }) {
    const ref = useRef(null);
    const [isObjectModalOpen, setIsObjectModalOpen] = useState(false);
    useEffect(() => {
        if (!disabled && isCompleted)
            ref.current?.focus();
    }, [disabled, isCompleted]);
    const keyDown = (e) => {
        if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            onSend();
        }
    };
    const handleObjectSelect = (object) => {
        // Create a markdown link with the object title and ID
        const objectTitle = object.properties?.title || object.name || 'Object';
        const objectId = object.id;
        const markdownLink = `[${objectTitle}](store:${objectId})`;
        // Insert the link at cursor position or append to end
        const currentValue = value || '';
        const cursorPos = ref.current?.selectionStart || currentValue.length;
        const newValue = currentValue.substring(0, cursorPos) + markdownLink + currentValue.substring(cursorPos);
        // Update the input value
        onChange(newValue);
        // Close the modal
        setIsObjectModalOpen(false);
        // Focus back on the input
        setTimeout(() => {
            if (ref.current) {
                ref.current.focus();
                // Place cursor after the inserted link
                const newCursorPos = cursorPos + markdownLink.length;
                ref.current.setSelectionRange(newCursorPos, newCursorPos);
            }
        }, 100);
    };
    return (_jsxs("div", { className: "p-3 border-t border-muted flex-shrink-0", style: { minHeight: "90px" }, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs("div", { className: "flex flex-1 space-x-1", children: [_jsx(Input, { ref: ref, value: value, onKeyDown: keyDown, onChange: onChange, disabled: disabled || isSending, placeholder: placeholder, className: "pr-12 py-2.5" }), _jsx(Button, { variant: "ghost", className: "rounded-full", disabled: !isCompleted, onClick: () => setIsObjectModalOpen(true), alt: "Link Object", children: _jsx(PaperclipIcon, { className: "size-4" }) })] }), _jsxs(Button, { onClick: onSend, disabled: disabled || isSending || !value.trim(), className: "px-4 py-2.5", children: [isSending ? _jsx(Spinner, { size: "sm", className: "mr-2" }) : _jsx(SendIcon, { className: "size-4 mr-2" }), " Send"] })] }), _jsx("div", { className: "text-xs text-muted mt-2 text-center", children: activeTaskCount > 0 ? (_jsxs("div", { className: "flex items-center justify-center", children: [_jsx(Activity, { className: "h-3 w-3 mr-1 text-attention" }), _jsxs("span", { children: ["Agent has ", activeTaskCount, " active workstream", activeTaskCount !== 1 ? 's' : '', " running"] })] })) : disabled
                    ? "Agent is processing, you can continue once it completes..."
                    : "You can send a message at any time" }), _jsxs(VModal, { isOpen: isObjectModalOpen, onClose: () => setIsObjectModalOpen(false), className: 'min-w-[60vw]', children: [_jsx(VModalTitle, { children: "Link Object" }), _jsx(VModalBody, { className: "pb-6", children: _jsx(SelectDocument, { onChange: handleObjectSelect }) })] })] }));
}
//# sourceMappingURL=MessageInput.js.map