642 lines
19 KiB
TypeScript
642 lines
19 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2025 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import React, { useCallback, useEffect, useState, useRef } from 'react';
|
|
import { Box, Text } from 'ink';
|
|
import { theme } from '../semantic-colors.js';
|
|
import { SuggestionsDisplay } from './SuggestionsDisplay.js';
|
|
import { useInputHistory } from '../hooks/useInputHistory.js';
|
|
import { TextBuffer, logicalPosToOffset } from './shared/text-buffer.js';
|
|
import { cpSlice, cpLen } from '../utils/textUtils.js';
|
|
import chalk from 'chalk';
|
|
import stringWidth from 'string-width';
|
|
import { useShellHistory } from '../hooks/useShellHistory.js';
|
|
import { useReverseSearchCompletion } from '../hooks/useReverseSearchCompletion.js';
|
|
import { useCommandCompletion } from '../hooks/useCommandCompletion.js';
|
|
import { useKeypress, Key } from '../hooks/useKeypress.js';
|
|
import { keyMatchers, Command } from '../keyMatchers.js';
|
|
import { CommandContext, SlashCommand } from '../commands/types.js';
|
|
import { Config } from '@google/gemini-cli-core';
|
|
import {
|
|
clipboardHasImage,
|
|
saveClipboardImage,
|
|
cleanupOldClipboardImages,
|
|
} from '../utils/clipboardUtils.js';
|
|
import * as path from 'path';
|
|
|
|
export interface InputPromptProps {
|
|
buffer: TextBuffer;
|
|
onSubmit: (value: string) => void;
|
|
userMessages: readonly string[];
|
|
onClearScreen: () => void;
|
|
config: Config;
|
|
slashCommands: readonly SlashCommand[];
|
|
commandContext: CommandContext;
|
|
placeholder?: string;
|
|
focus?: boolean;
|
|
inputWidth: number;
|
|
suggestionsWidth: number;
|
|
shellModeActive: boolean;
|
|
setShellModeActive: (value: boolean) => void;
|
|
onEscapePromptChange?: (showPrompt: boolean) => void;
|
|
vimHandleInput?: (key: Key) => boolean;
|
|
}
|
|
|
|
export const InputPrompt: React.FC<InputPromptProps> = ({
|
|
buffer,
|
|
onSubmit,
|
|
userMessages,
|
|
onClearScreen,
|
|
config,
|
|
slashCommands,
|
|
commandContext,
|
|
placeholder = ' Type your message or @path/to/file',
|
|
focus = true,
|
|
inputWidth,
|
|
suggestionsWidth,
|
|
shellModeActive,
|
|
setShellModeActive,
|
|
onEscapePromptChange,
|
|
vimHandleInput,
|
|
}) => {
|
|
const [justNavigatedHistory, setJustNavigatedHistory] = useState(false);
|
|
const [escPressCount, setEscPressCount] = useState(0);
|
|
const [showEscapePrompt, setShowEscapePrompt] = useState(false);
|
|
const escapeTimerRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const [dirs, setDirs] = useState<readonly string[]>(
|
|
config.getWorkspaceContext().getDirectories(),
|
|
);
|
|
const dirsChanged = config.getWorkspaceContext().getDirectories();
|
|
useEffect(() => {
|
|
if (dirs.length !== dirsChanged.length) {
|
|
setDirs(dirsChanged);
|
|
}
|
|
}, [dirs.length, dirsChanged]);
|
|
const [reverseSearchActive, setReverseSearchActive] = useState(false);
|
|
const [textBeforeReverseSearch, setTextBeforeReverseSearch] = useState('');
|
|
const [cursorPosition, setCursorPosition] = useState<[number, number]>([
|
|
0, 0,
|
|
]);
|
|
const shellHistory = useShellHistory(config.getProjectRoot(), config.storage);
|
|
const historyData = shellHistory.history;
|
|
|
|
const completion = useCommandCompletion(
|
|
buffer,
|
|
dirs,
|
|
config.getTargetDir(),
|
|
slashCommands,
|
|
commandContext,
|
|
reverseSearchActive,
|
|
config,
|
|
);
|
|
|
|
const reverseSearchCompletion = useReverseSearchCompletion(
|
|
buffer,
|
|
historyData,
|
|
reverseSearchActive,
|
|
);
|
|
const resetCompletionState = completion.resetCompletionState;
|
|
const resetReverseSearchCompletionState =
|
|
reverseSearchCompletion.resetCompletionState;
|
|
|
|
const resetEscapeState = useCallback(() => {
|
|
if (escapeTimerRef.current) {
|
|
clearTimeout(escapeTimerRef.current);
|
|
escapeTimerRef.current = null;
|
|
}
|
|
setEscPressCount(0);
|
|
setShowEscapePrompt(false);
|
|
}, []);
|
|
|
|
// Notify parent component about escape prompt state changes
|
|
useEffect(() => {
|
|
if (onEscapePromptChange) {
|
|
onEscapePromptChange(showEscapePrompt);
|
|
}
|
|
}, [showEscapePrompt, onEscapePromptChange]);
|
|
|
|
// Clear escape prompt timer on unmount
|
|
useEffect(
|
|
() => () => {
|
|
if (escapeTimerRef.current) {
|
|
clearTimeout(escapeTimerRef.current);
|
|
}
|
|
},
|
|
[],
|
|
);
|
|
|
|
const handleSubmitAndClear = useCallback(
|
|
(submittedValue: string) => {
|
|
if (shellModeActive) {
|
|
shellHistory.addCommandToHistory(submittedValue);
|
|
}
|
|
// Clear the buffer *before* calling onSubmit to prevent potential re-submission
|
|
// if onSubmit triggers a re-render while the buffer still holds the old value.
|
|
buffer.setText('');
|
|
onSubmit(submittedValue);
|
|
resetCompletionState();
|
|
resetReverseSearchCompletionState();
|
|
},
|
|
[
|
|
onSubmit,
|
|
buffer,
|
|
resetCompletionState,
|
|
shellModeActive,
|
|
shellHistory,
|
|
resetReverseSearchCompletionState,
|
|
],
|
|
);
|
|
|
|
const customSetTextAndResetCompletionSignal = useCallback(
|
|
(newText: string) => {
|
|
buffer.setText(newText);
|
|
setJustNavigatedHistory(true);
|
|
},
|
|
[buffer, setJustNavigatedHistory],
|
|
);
|
|
|
|
const inputHistory = useInputHistory({
|
|
userMessages,
|
|
onSubmit: handleSubmitAndClear,
|
|
isActive:
|
|
(!completion.showSuggestions || completion.suggestions.length === 1) &&
|
|
!shellModeActive,
|
|
currentQuery: buffer.text,
|
|
onChange: customSetTextAndResetCompletionSignal,
|
|
});
|
|
|
|
// Effect to reset completion if history navigation just occurred and set the text
|
|
useEffect(() => {
|
|
if (justNavigatedHistory) {
|
|
resetCompletionState();
|
|
resetReverseSearchCompletionState();
|
|
setJustNavigatedHistory(false);
|
|
}
|
|
}, [
|
|
justNavigatedHistory,
|
|
buffer.text,
|
|
resetCompletionState,
|
|
setJustNavigatedHistory,
|
|
resetReverseSearchCompletionState,
|
|
]);
|
|
|
|
// Handle clipboard image pasting with Ctrl+V
|
|
const handleClipboardImage = useCallback(async () => {
|
|
try {
|
|
if (await clipboardHasImage()) {
|
|
const imagePath = await saveClipboardImage(config.getTargetDir());
|
|
if (imagePath) {
|
|
// Clean up old images
|
|
cleanupOldClipboardImages(config.getTargetDir()).catch(() => {
|
|
// Ignore cleanup errors
|
|
});
|
|
|
|
// Get relative path from current directory
|
|
const relativePath = path.relative(config.getTargetDir(), imagePath);
|
|
|
|
// Insert @path reference at cursor position
|
|
const insertText = `@${relativePath}`;
|
|
const currentText = buffer.text;
|
|
const [row, col] = buffer.cursor;
|
|
|
|
// Calculate offset from row/col
|
|
let offset = 0;
|
|
for (let i = 0; i < row; i++) {
|
|
offset += buffer.lines[i].length + 1; // +1 for newline
|
|
}
|
|
offset += col;
|
|
|
|
// Add spaces around the path if needed
|
|
let textToInsert = insertText;
|
|
const charBefore = offset > 0 ? currentText[offset - 1] : '';
|
|
const charAfter =
|
|
offset < currentText.length ? currentText[offset] : '';
|
|
|
|
if (charBefore && charBefore !== ' ' && charBefore !== '\n') {
|
|
textToInsert = ' ' + textToInsert;
|
|
}
|
|
if (!charAfter || (charAfter !== ' ' && charAfter !== '\n')) {
|
|
textToInsert = textToInsert + ' ';
|
|
}
|
|
|
|
// Insert at cursor position
|
|
buffer.replaceRangeByOffset(offset, offset, textToInsert);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error handling clipboard image:', error);
|
|
}
|
|
}, [buffer, config]);
|
|
|
|
const handleInput = useCallback(
|
|
(key: Key) => {
|
|
/// We want to handle paste even when not focused to support drag and drop.
|
|
if (!focus && !key.paste) {
|
|
return;
|
|
}
|
|
|
|
if (key.paste) {
|
|
// Ensure we never accidentally interpret paste as regular input.
|
|
buffer.handleInput(key);
|
|
return;
|
|
}
|
|
|
|
if (vimHandleInput && vimHandleInput(key)) {
|
|
return;
|
|
}
|
|
|
|
// Reset ESC count and hide prompt on any non-ESC key
|
|
if (key.name !== 'escape') {
|
|
if (escPressCount > 0 || showEscapePrompt) {
|
|
resetEscapeState();
|
|
}
|
|
}
|
|
|
|
if (
|
|
key.sequence === '!' &&
|
|
buffer.text === '' &&
|
|
!completion.showSuggestions
|
|
) {
|
|
setShellModeActive(!shellModeActive);
|
|
buffer.setText(''); // Clear the '!' from input
|
|
return;
|
|
}
|
|
|
|
if (keyMatchers[Command.ESCAPE](key)) {
|
|
if (reverseSearchActive) {
|
|
setReverseSearchActive(false);
|
|
reverseSearchCompletion.resetCompletionState();
|
|
buffer.setText(textBeforeReverseSearch);
|
|
const offset = logicalPosToOffset(
|
|
buffer.lines,
|
|
cursorPosition[0],
|
|
cursorPosition[1],
|
|
);
|
|
buffer.moveToOffset(offset);
|
|
return;
|
|
}
|
|
if (shellModeActive) {
|
|
setShellModeActive(false);
|
|
resetEscapeState();
|
|
return;
|
|
}
|
|
|
|
if (completion.showSuggestions) {
|
|
completion.resetCompletionState();
|
|
resetEscapeState();
|
|
return;
|
|
}
|
|
|
|
// Handle double ESC for clearing input
|
|
if (escPressCount === 0) {
|
|
if (buffer.text === '') {
|
|
return;
|
|
}
|
|
setEscPressCount(1);
|
|
setShowEscapePrompt(true);
|
|
if (escapeTimerRef.current) {
|
|
clearTimeout(escapeTimerRef.current);
|
|
}
|
|
escapeTimerRef.current = setTimeout(() => {
|
|
resetEscapeState();
|
|
}, 500);
|
|
} else {
|
|
// clear input and immediately reset state
|
|
buffer.setText('');
|
|
resetCompletionState();
|
|
resetEscapeState();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (shellModeActive && keyMatchers[Command.REVERSE_SEARCH](key)) {
|
|
setReverseSearchActive(true);
|
|
setTextBeforeReverseSearch(buffer.text);
|
|
setCursorPosition(buffer.cursor);
|
|
return;
|
|
}
|
|
|
|
if (keyMatchers[Command.CLEAR_SCREEN](key)) {
|
|
onClearScreen();
|
|
return;
|
|
}
|
|
|
|
if (reverseSearchActive) {
|
|
const {
|
|
activeSuggestionIndex,
|
|
navigateUp,
|
|
navigateDown,
|
|
showSuggestions,
|
|
suggestions,
|
|
} = reverseSearchCompletion;
|
|
|
|
if (showSuggestions) {
|
|
if (keyMatchers[Command.NAVIGATION_UP](key)) {
|
|
navigateUp();
|
|
return;
|
|
}
|
|
if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
|
|
navigateDown();
|
|
return;
|
|
}
|
|
if (keyMatchers[Command.ACCEPT_SUGGESTION_REVERSE_SEARCH](key)) {
|
|
reverseSearchCompletion.handleAutocomplete(activeSuggestionIndex);
|
|
reverseSearchCompletion.resetCompletionState();
|
|
setReverseSearchActive(false);
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (keyMatchers[Command.SUBMIT_REVERSE_SEARCH](key)) {
|
|
const textToSubmit =
|
|
showSuggestions && activeSuggestionIndex > -1
|
|
? suggestions[activeSuggestionIndex].value
|
|
: buffer.text;
|
|
handleSubmitAndClear(textToSubmit);
|
|
reverseSearchCompletion.resetCompletionState();
|
|
setReverseSearchActive(false);
|
|
return;
|
|
}
|
|
|
|
// Prevent up/down from falling through to regular history navigation
|
|
if (
|
|
keyMatchers[Command.NAVIGATION_UP](key) ||
|
|
keyMatchers[Command.NAVIGATION_DOWN](key)
|
|
) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// If the command is a perfect match, pressing enter should execute it.
|
|
if (completion.isPerfectMatch && keyMatchers[Command.RETURN](key)) {
|
|
handleSubmitAndClear(buffer.text);
|
|
return;
|
|
}
|
|
|
|
if (completion.showSuggestions) {
|
|
if (completion.suggestions.length > 1) {
|
|
if (keyMatchers[Command.COMPLETION_UP](key)) {
|
|
completion.navigateUp();
|
|
return;
|
|
}
|
|
if (keyMatchers[Command.COMPLETION_DOWN](key)) {
|
|
completion.navigateDown();
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (keyMatchers[Command.ACCEPT_SUGGESTION](key)) {
|
|
if (completion.suggestions.length > 0) {
|
|
const targetIndex =
|
|
completion.activeSuggestionIndex === -1
|
|
? 0 // Default to the first if none is active
|
|
: completion.activeSuggestionIndex;
|
|
if (targetIndex < completion.suggestions.length) {
|
|
completion.handleAutocomplete(targetIndex);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (!shellModeActive) {
|
|
if (keyMatchers[Command.HISTORY_UP](key)) {
|
|
inputHistory.navigateUp();
|
|
return;
|
|
}
|
|
if (keyMatchers[Command.HISTORY_DOWN](key)) {
|
|
inputHistory.navigateDown();
|
|
return;
|
|
}
|
|
// Handle arrow-up/down for history on single-line or at edges
|
|
if (
|
|
keyMatchers[Command.NAVIGATION_UP](key) &&
|
|
(buffer.allVisualLines.length === 1 ||
|
|
(buffer.visualCursor[0] === 0 && buffer.visualScrollRow === 0))
|
|
) {
|
|
inputHistory.navigateUp();
|
|
return;
|
|
}
|
|
if (
|
|
keyMatchers[Command.NAVIGATION_DOWN](key) &&
|
|
(buffer.allVisualLines.length === 1 ||
|
|
buffer.visualCursor[0] === buffer.allVisualLines.length - 1)
|
|
) {
|
|
inputHistory.navigateDown();
|
|
return;
|
|
}
|
|
} else {
|
|
// Shell History Navigation
|
|
if (keyMatchers[Command.NAVIGATION_UP](key)) {
|
|
const prevCommand = shellHistory.getPreviousCommand();
|
|
if (prevCommand !== null) buffer.setText(prevCommand);
|
|
return;
|
|
}
|
|
if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
|
|
const nextCommand = shellHistory.getNextCommand();
|
|
if (nextCommand !== null) buffer.setText(nextCommand);
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (keyMatchers[Command.SUBMIT](key)) {
|
|
if (buffer.text.trim()) {
|
|
const [row, col] = buffer.cursor;
|
|
const line = buffer.lines[row];
|
|
const charBefore = col > 0 ? cpSlice(line, col - 1, col) : '';
|
|
if (charBefore === '\\') {
|
|
buffer.backspace();
|
|
buffer.newline();
|
|
} else {
|
|
handleSubmitAndClear(buffer.text);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Newline insertion
|
|
if (keyMatchers[Command.NEWLINE](key)) {
|
|
buffer.newline();
|
|
return;
|
|
}
|
|
|
|
// Ctrl+A (Home) / Ctrl+E (End)
|
|
if (keyMatchers[Command.HOME](key)) {
|
|
buffer.move('home');
|
|
return;
|
|
}
|
|
if (keyMatchers[Command.END](key)) {
|
|
buffer.move('end');
|
|
buffer.moveToOffset(cpLen(buffer.text));
|
|
return;
|
|
}
|
|
// Ctrl+C (Clear input)
|
|
if (keyMatchers[Command.CLEAR_INPUT](key)) {
|
|
if (buffer.text.length > 0) {
|
|
buffer.setText('');
|
|
resetCompletionState();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Kill line commands
|
|
if (keyMatchers[Command.KILL_LINE_RIGHT](key)) {
|
|
buffer.killLineRight();
|
|
return;
|
|
}
|
|
if (keyMatchers[Command.KILL_LINE_LEFT](key)) {
|
|
buffer.killLineLeft();
|
|
return;
|
|
}
|
|
|
|
// External editor
|
|
if (keyMatchers[Command.OPEN_EXTERNAL_EDITOR](key)) {
|
|
buffer.openInExternalEditor();
|
|
return;
|
|
}
|
|
|
|
// Ctrl+V for clipboard image paste
|
|
if (keyMatchers[Command.PASTE_CLIPBOARD_IMAGE](key)) {
|
|
handleClipboardImage();
|
|
return;
|
|
}
|
|
|
|
// Fall back to the text buffer's default input handling for all other keys
|
|
buffer.handleInput(key);
|
|
},
|
|
[
|
|
focus,
|
|
buffer,
|
|
completion,
|
|
shellModeActive,
|
|
setShellModeActive,
|
|
onClearScreen,
|
|
inputHistory,
|
|
handleSubmitAndClear,
|
|
shellHistory,
|
|
reverseSearchCompletion,
|
|
handleClipboardImage,
|
|
resetCompletionState,
|
|
escPressCount,
|
|
showEscapePrompt,
|
|
resetEscapeState,
|
|
vimHandleInput,
|
|
reverseSearchActive,
|
|
textBeforeReverseSearch,
|
|
cursorPosition,
|
|
],
|
|
);
|
|
|
|
useKeypress(handleInput, {
|
|
isActive: true,
|
|
});
|
|
|
|
const linesToRender = buffer.viewportVisualLines;
|
|
const [cursorVisualRowAbsolute, cursorVisualColAbsolute] =
|
|
buffer.visualCursor;
|
|
const scrollVisualRow = buffer.visualScrollRow;
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
borderStyle="round"
|
|
borderColor={
|
|
shellModeActive ? theme.status.warning : theme.border.focused
|
|
}
|
|
paddingX={1}
|
|
>
|
|
<Text
|
|
color={shellModeActive ? theme.status.warning : theme.text.accent}
|
|
>
|
|
{shellModeActive ? (
|
|
reverseSearchActive ? (
|
|
<Text color={theme.text.link}>(r:) </Text>
|
|
) : (
|
|
'! '
|
|
)
|
|
) : (
|
|
'> '
|
|
)}
|
|
</Text>
|
|
<Box flexGrow={1} flexDirection="column">
|
|
{buffer.text.length === 0 && placeholder ? (
|
|
focus ? (
|
|
<Text>
|
|
{chalk.inverse(placeholder.slice(0, 1))}
|
|
<Text color={theme.text.secondary}>{placeholder.slice(1)}</Text>
|
|
</Text>
|
|
) : (
|
|
<Text color={theme.text.secondary}>{placeholder}</Text>
|
|
)
|
|
) : (
|
|
linesToRender.map((lineText, visualIdxInRenderedSet) => {
|
|
const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;
|
|
let display = cpSlice(lineText, 0, inputWidth);
|
|
const currentVisualWidth = stringWidth(display);
|
|
if (currentVisualWidth < inputWidth) {
|
|
display = display + ' '.repeat(inputWidth - currentVisualWidth);
|
|
}
|
|
|
|
if (focus && visualIdxInRenderedSet === cursorVisualRow) {
|
|
const relativeVisualColForHighlight = cursorVisualColAbsolute;
|
|
|
|
if (relativeVisualColForHighlight >= 0) {
|
|
if (relativeVisualColForHighlight < cpLen(display)) {
|
|
const charToHighlight =
|
|
cpSlice(
|
|
display,
|
|
relativeVisualColForHighlight,
|
|
relativeVisualColForHighlight + 1,
|
|
) || ' ';
|
|
const highlighted = chalk.inverse(charToHighlight);
|
|
display =
|
|
cpSlice(display, 0, relativeVisualColForHighlight) +
|
|
highlighted +
|
|
cpSlice(display, relativeVisualColForHighlight + 1);
|
|
} else if (
|
|
relativeVisualColForHighlight === cpLen(display) &&
|
|
cpLen(display) === inputWidth
|
|
) {
|
|
display = display + chalk.inverse(' ');
|
|
}
|
|
}
|
|
}
|
|
return (
|
|
<Text key={`line-${visualIdxInRenderedSet}`}>{display}</Text>
|
|
);
|
|
})
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
{completion.showSuggestions && (
|
|
<Box paddingRight={2}>
|
|
<SuggestionsDisplay
|
|
suggestions={completion.suggestions}
|
|
activeIndex={completion.activeSuggestionIndex}
|
|
isLoading={completion.isLoadingSuggestions}
|
|
width={suggestionsWidth}
|
|
scrollOffset={completion.visibleStartIndex}
|
|
userInput={buffer.text}
|
|
/>
|
|
</Box>
|
|
)}
|
|
{reverseSearchActive && (
|
|
<Box paddingRight={2}>
|
|
<SuggestionsDisplay
|
|
suggestions={reverseSearchCompletion.suggestions}
|
|
activeIndex={reverseSearchCompletion.activeSuggestionIndex}
|
|
isLoading={reverseSearchCompletion.isLoadingSuggestions}
|
|
width={suggestionsWidth}
|
|
scrollOffset={reverseSearchCompletion.visibleStartIndex}
|
|
userInput={buffer.text}
|
|
/>
|
|
</Box>
|
|
)}
|
|
</>
|
|
);
|
|
};
|