automagik-cli
Version:
Automagik CLI - A powerful command-line interface for interacting with Automagik Hive multi-agent AI systems
43 lines (42 loc) • 3.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Gemini-style input component that combines gemini's visual design
* with our working automagik backend functionality
*/
import { useState, useCallback, useEffect } from 'react';
import { Box, Text, useInput } from 'ink';
import TextInput from 'ink-text-input';
import { Colors } from '../colors.js';
export const GeminiStyleInput = ({ onSubmit, disabled = false, placeholder = ' Type your message...', focus = true, }) => {
const [input, setInput] = useState('');
const [isMultiline, setIsMultiline] = useState(false);
// Auto-detect multiline content
useEffect(() => {
setIsMultiline(input.includes('\n') || input.length > 100);
}, [input]);
const handleSubmit = useCallback((value) => {
if (value.trim() && !disabled) {
onSubmit(value.trim());
setInput('');
setIsMultiline(false);
}
}, [onSubmit, disabled]);
const handleChange = useCallback((value) => {
setInput(value);
}, []);
// Handle Escape key to clear input
useInput((inputChar, key) => {
if (key.escape && focus && !disabled) {
setInput('');
setIsMultiline(false);
}
}, { isActive: focus && !disabled });
const lines = input.split('\n');
const displayLines = lines.slice(0, 8); // Max 8 lines visible
// Show multiline view when content has newlines or is long
if (isMultiline && lines.length > 1) {
return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { borderStyle: "round", borderColor: Colors.AccentPurple, paddingX: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "magenta", children: '> ' }), _jsxs(Text, { color: "gray", children: ["Multiline input (", lines.length, " lines, ", input.length, " chars)"] })] }), displayLines.map((line, index) => (_jsx(Text, { color: "white", children: line || ' ' }, index))), lines.length > 8 && (_jsxs(Text, { color: "gray", children: ["... ", lines.length - 8, " more lines"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Enter: Send \u2022 Esc: Clear text \u2022 Paste content works automatically" }) })] }));
}
// Single line input with gemini styling
return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { borderStyle: "round", borderColor: Colors.AccentPurple, paddingX: 1, children: [_jsx(Text, { color: "magenta", children: '> ' }), _jsx(Box, { flexGrow: 1, children: _jsx(TextInput, { value: input, placeholder: placeholder, onChange: handleChange, onSubmit: handleSubmit, focus: focus && !disabled, showCursor: focus && !disabled, highlightPastedText: true }) })] }), focus && !disabled && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Enter: Send \u2022 Esc: Clear text \u2022 Paste works \u2022 Large content becomes multiline automatically" }) }))] }));
};