@justinechang39/maki/dist/components/InputArea.js

AI-powered CLI agent for file operations, CSV manipulation, todo management, and web content fetching using OpenRouter

import React, { useState, useRef, useEffect } from 'react';
import { Box, Text, useInput } from 'ink';
export const InputArea = React.memo(({ inputKey, isProcessing, onSubmit, onInputKeyChange }) => {
    const [input, setInput] = useState('');
    const cursorRef = useRef(0);
    // Reset input when key changes
    useEffect(() => {
        setInput('');
        cursorRef.current = 0;
    }, [inputKey]);
    useInput((inputChar, key) => {
        if (isProcessing)
            return;
        if (key.return) {
            if (input.trim()) {
                onSubmit(input);
                onInputKeyChange();
            }
            return;
        }
        if (key.backspace || key.delete) {
            if (input.length > 0) {
                setInput(prev => prev.slice(0, -1));
            }
            return;
        }
        if (inputChar && !key.ctrl && !key.meta) {
            setInput(prev => prev + inputChar);
        }
    });
    const placeholder = isProcessing ? "processing..." : "ask me anything...";
    const displayText = input || placeholder;
    const showCursor = !isProcessing;
    const isPlaceholderShown = !input;
    return (React.createElement(Box, { paddingY: 1 },
        React.createElement(Box, { flexDirection: "row", alignItems: "center" },
            React.createElement(Box, { borderStyle: "single", borderColor: isProcessing ? 'yellow' : 'blue', paddingX: 1, flexGrow: 1 },
                React.createElement(Text, null,
                    React.createElement(Text, { color: isPlaceholderShown ? 'gray' : undefined }, displayText),
                    showCursor && React.createElement(Text, { color: "cyan" }, "\u258C"))),
            React.createElement(Box, { marginLeft: 1 },
                React.createElement(Text, { dimColor: true }, "\u23CE send \u2022 ^C exit")))));
});
InputArea.displayName = 'InputArea';