automagik-cli/dist/ui/components/BasicInputPrompt.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 { useState, useCallback } from 'react';
import { Box, Text, useInput } from 'ink';
export const BasicInputPrompt = ({ onSubmit, disabled = false, placeholder = 'Type your message...', }) => {
    const [input, setInput] = useState('');
    const [cursorPosition, setCursorPosition] = useState(0);
    const handleSubmit = useCallback(() => {
        if (input.trim() && !disabled) {
            onSubmit(input.trim());
            setInput('');
            setCursorPosition(0);
        }
    }, [input, onSubmit, disabled]);
    useInput((inputChar, key) => {
        if (disabled) {
            return;
        }
        if (key.return) {
            if (key.shift) {
                // Shift+Enter adds newline
                const newInput = input.slice(0, cursorPosition) + '\n' + input.slice(cursorPosition);
                setInput(newInput);
                setCursorPosition(cursorPosition + 1);
            }
            else {
                // Regular Enter submits
                handleSubmit();
            }
        }
        else if (key.backspace) {
            if (cursorPosition > 0) {
                const newInput = input.slice(0, cursorPosition - 1) + input.slice(cursorPosition);
                setInput(newInput);
                setCursorPosition(cursorPosition - 1);
            }
        }
        else if (key.delete) {
            if (cursorPosition < input.length) {
                const newInput = input.slice(0, cursorPosition) + input.slice(cursorPosition + 1);
                setInput(newInput);
            }
        }
        else if (key.leftArrow) {
            if (cursorPosition > 0) {
                setCursorPosition(cursorPosition - 1);
            }
        }
        else if (key.rightArrow) {
            if (cursorPosition < input.length) {
                setCursorPosition(cursorPosition + 1);
            }
        }
        else if (key.ctrl && inputChar === 'u') {
            setInput('');
            setCursorPosition(0);
        }
        else if (key.ctrl && inputChar === 'a') {
            setCursorPosition(0);
        }
        else if (key.ctrl && inputChar === 'e') {
            setCursorPosition(input.length);
        }
        else if (inputChar && !key.ctrl && !key.meta) {
            // Regular character input
            const newInput = input.slice(0, cursorPosition) + inputChar + input.slice(cursorPosition);
            setInput(newInput);
            setCursorPosition(cursorPosition + 1);
        }
    });
    // Split input into lines for display
    const lines = input.split('\n');
    const isMultiline = lines.length > 1;
    // Calculate which line the cursor is on
    let charsBeforeCursor = 0;
    let cursorLine = 0;
    let cursorCol = cursorPosition;
    for (let i = 0; i < lines.length; i++) {
        if (charsBeforeCursor + lines[i].length >= cursorPosition) {
            cursorLine = i;
            cursorCol = cursorPosition - charsBeforeCursor;
            break;
        }
        charsBeforeCursor += lines[i].length + 1; // +1 for newline
    }
    const renderSingleLine = () => {
        const displayText = input || placeholder;
        const isPlaceholder = !input;
        if (disabled) {
            return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: '> ' }), _jsx(Text, { color: "gray", children: placeholder })] }));
        }
        if (isPlaceholder) {
            return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: '> ' }), _jsx(Text, { color: "gray", children: placeholder })] }));
        }
        const beforeCursor = input.slice(0, cursorPosition);
        const atCursor = input[cursorPosition] || ' ';
        const afterCursor = input.slice(cursorPosition + 1);
        return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: '> ' }), _jsx(Text, { children: beforeCursor }), _jsx(Text, { inverse: true, children: atCursor }), _jsx(Text, { children: afterCursor })] }));
    };
    const renderMultiline = () => {
        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "\u250C\u2500 multiline \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510" }), lines.map((line, lineIndex) => {
                    const isCurrentLine = lineIndex === cursorLine;
                    if (isCurrentLine && !disabled) {
                        const beforeCursor = line.slice(0, cursorCol);
                        const atCursor = line[cursorCol] || ' ';
                        const afterCursor = line.slice(cursorCol + 1);
                        return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "\u2502 " }), _jsx(Text, { children: beforeCursor }), _jsx(Text, { inverse: true, children: atCursor }), _jsx(Text, { children: afterCursor })] }, lineIndex));
                    }
                    else {
                        return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "\u2502 " }), _jsx(Text, { color: disabled ? 'gray' : 'white', children: line || (lineIndex === 0 && !input ? placeholder : '') })] }, lineIndex));
                    }
                }), _jsx(Text, { color: "cyan", children: "\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518" })] }));
    };
    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [isMultiline ? renderMultiline() : renderSingleLine(), !disabled && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: [isMultiline
                            ? 'Enter: Send • Shift+Enter: New line • Ctrl+U: Clear'
                            : 'Enter: Send • Shift+Enter: New line • Ctrl+U: Clear', " \u2022 ", input.length, " chars"] }) }))] }));
};