Function QuestionInput

src/cli.tsx:169–225

({
  onSubmit,
  disabled,
  history,
}: {
  onSubmit: (q: string) => void;
  disabled: boolean;
  history: string[];
})

}

function QuestionInput({
  onSubmit,
  disabled,
  history,
}: {
  onSubmit: (q: string) => void;
  disabled: boolean;
  history: string[];
}) {
  const [value, setValue] = useState('');
  const [historyIndex, setHistoryIndex] = useState(-1);

  useInput((input, key) => {
    if (disabled) return;

    if (key.return) {
      if (value.trim()) {
        onSubmit(value.trim());
        setValue('');
        setHistoryIndex(-1);
      }
    } else if (key.upArrow) {
      // Navigate history backwards
      if (history.length > 0) {
        const newIndex = Math.min(historyIndex + 1, history.length - 1);
        setHistoryIndex(newIndex);
        setValue(history[history.length - 1 - newIndex] || '');
      }
    } else if (key.downArrow) {
      // Navigate history forwards
      if (historyIndex > 0) {
        const newIndex = historyIndex - 1;
        setHistoryIndex(newIndex);
        setValue(history[history.length - 1 - newIndex] || '');
      } else if (historyIndex === 0) {
        setHistoryIndex(-1);
        setValue('');
      }
    } else if (key.backspace || key.delete) {
      setValue((v) => v.slice(0, -1));
      setHistoryIndex(-1);
    } else if (!key.ctrl && !key.meta && input) {
      setValue((v) => v + input);
      setHistoryIndex(-1);
    }
  });

  return (
    <Box>
      <Text bold color="cyan">
        {'❯ '}
      </Text>
      <Text>{value}</Text>
      {!disabled && <Text color="cyan">▌</Text>}
    </Box>
  );
}