import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { StopCircle } from 'lucide-react';
import { useState } from 'react';
import { apiClient } from '../../lib/api-client';
export function StopButton({ sessionId, onStop, disabled }) {
    const [isAborting, setIsAborting] = useState(false);
    const handleStop = async () => {
        if (isAborting)
            return;
        setIsAborting(true);
        try {
            await apiClient.abortSession(sessionId);
            onStop?.();
        }
        catch (error) {
            console.error('Failed to abort stream:', error);
        }
        finally {
            // Keep button disabled for a bit to prevent double-clicks
            setTimeout(() => setIsAborting(false), 1000);
        }
    };
    return (_jsxs("button", { type: "button", onClick: handleStop, disabled: disabled || isAborting, className: "flex items-center gap-1.5 text-sm text-destructive hover:text-destructive/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", title: "Stop generation", children: [_jsx(StopCircle, { className: "w-4 h-4" }), _jsx("span", { className: "font-medium", children: isAborting ? 'Stopping...' : 'Stop' })] }));
}
//# sourceMappingURL=StopButton.js.map