automagik-cli/dist/ui/components/RadioButtonSelect.js

Automagik CLI - A powerful command-line interface for interacting with Automagik Hive multi-agent AI systems

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Text, Box, useInput } from 'ink';
import { Colors } from '../colors.js';
export function RadioButtonSelect({ items, initialIndex = 0, onSelect, onHighlight, isFocused, showScrollArrows = false, maxItemsToShow = 10, }) {
    const [activeIndex, setActiveIndex] = useState(initialIndex);
    const [scrollOffset, setScrollOffset] = useState(0);
    useEffect(() => {
        const newScrollOffset = Math.max(0, Math.min(activeIndex - maxItemsToShow + 1, items.length - maxItemsToShow));
        if (activeIndex < scrollOffset) {
            setScrollOffset(activeIndex);
        }
        else if (activeIndex >= scrollOffset + maxItemsToShow) {
            setScrollOffset(newScrollOffset);
        }
    }, [activeIndex, items.length, scrollOffset, maxItemsToShow]);
    useInput((input, key) => {
        if (input === 'k' || key.upArrow) {
            const newIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
            setActiveIndex(newIndex);
            onHighlight?.(items[newIndex].value);
        }
        if (input === 'j' || key.downArrow) {
            const newIndex = activeIndex < items.length - 1 ? activeIndex + 1 : 0;
            setActiveIndex(newIndex);
            onHighlight?.(items[newIndex].value);
        }
        if (key.return) {
            onSelect(items[activeIndex].value);
        }
        // Enable selection directly from number keys.
        if (/^[1-9]$/.test(input)) {
            const targetIndex = Number.parseInt(input, 10) - 1;
            if (targetIndex >= 0 && targetIndex < visibleItems.length) {
                const selectedItem = visibleItems[targetIndex];
                if (selectedItem) {
                    onSelect?.(selectedItem.value);
                }
            }
        }
    }, { isActive: isFocused && items.length > 0 });
    const visibleItems = items.slice(scrollOffset, scrollOffset + maxItemsToShow);
    return (_jsxs(Box, { flexDirection: "column", children: [showScrollArrows && (_jsx(Text, { color: scrollOffset > 0 ? Colors.Foreground : Colors.Gray, children: "\u25B2" })), visibleItems.map((item, index) => {
                const itemIndex = scrollOffset + index;
                const isSelected = activeIndex === itemIndex;
                let textColor = Colors.Foreground;
                if (isSelected) {
                    textColor = Colors.AccentPurple;
                }
                else if (item.disabled) {
                    textColor = Colors.Gray;
                }
                return (_jsxs(Box, { children: [_jsx(Box, { minWidth: 2, flexShrink: 0, children: _jsx(Text, { color: isSelected ? Colors.AccentPurple : Colors.AccentCyan, children: isSelected ? '●' : '○' }) }), _jsx(Text, { color: textColor, wrap: "truncate", children: item.label })] }, item.label));
            }), showScrollArrows && (_jsx(Text, { color: scrollOffset + maxItemsToShow < items.length
                    ? Colors.Foreground
                    : Colors.Gray, children: "\u25BC" }))] }));
}