First four independent files for @ commands. (#205)
This commit is contained in:
Allen Hutchison
GitHub
parent
df44ffbcff
commit
e0de69f384
|
|
@ -0,0 +1,77 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2025 Google LLC
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Box, Text } from 'ink';
|
||||||
|
|
||||||
|
interface SuggestionsDisplayProps {
|
||||||
|
suggestions: string[];
|
||||||
|
activeIndex: number;
|
||||||
|
isLoading: boolean;
|
||||||
|
width: number;
|
||||||
|
scrollOffset: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MAX_SUGGESTIONS_TO_SHOW = 8;
|
||||||
|
|
||||||
|
export function SuggestionsDisplay({
|
||||||
|
suggestions,
|
||||||
|
activeIndex,
|
||||||
|
isLoading,
|
||||||
|
width,
|
||||||
|
scrollOffset,
|
||||||
|
}: SuggestionsDisplayProps) {
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<Box borderStyle="round" paddingX={1} width={width}>
|
||||||
|
<Text color="gray">Loading suggestions...</Text>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (suggestions.length === 0) {
|
||||||
|
return null; // Don't render anything if there are no suggestions
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate the visible slice based on scrollOffset
|
||||||
|
const startIndex = scrollOffset;
|
||||||
|
const endIndex = Math.min(
|
||||||
|
scrollOffset + MAX_SUGGESTIONS_TO_SHOW,
|
||||||
|
suggestions.length,
|
||||||
|
);
|
||||||
|
const visibleSuggestions = suggestions.slice(startIndex, endIndex);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
borderStyle="round"
|
||||||
|
flexDirection="column"
|
||||||
|
paddingX={1}
|
||||||
|
width={width} // Use the passed width
|
||||||
|
>
|
||||||
|
{scrollOffset > 0 && <Text color="gray">▲</Text>}
|
||||||
|
|
||||||
|
{visibleSuggestions.map((suggestion, index) => {
|
||||||
|
const originalIndex = startIndex + index;
|
||||||
|
const isActive = originalIndex === activeIndex;
|
||||||
|
return (
|
||||||
|
<Text
|
||||||
|
key={`${suggestion}-${originalIndex}`}
|
||||||
|
color={isActive ? 'black' : 'white'}
|
||||||
|
backgroundColor={isActive ? 'blue' : undefined}
|
||||||
|
>
|
||||||
|
{suggestion}
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{endIndex < suggestions.length && <Text color="gray">▼</Text>}
|
||||||
|
{suggestions.length > MAX_SUGGESTIONS_TO_SHOW && (
|
||||||
|
<Text color="gray">
|
||||||
|
({activeIndex + 1}/{suggestions.length})
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2025 Google LLC
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { PartListUnion } from '@google/genai';
|
||||||
|
import { Config, getErrorMessage } from '@gemini-code/server';
|
||||||
|
import {
|
||||||
|
HistoryItem,
|
||||||
|
IndividualToolCallDisplay,
|
||||||
|
ToolCallStatus,
|
||||||
|
} from '../types.js';
|
||||||
|
|
||||||
|
// Helper function to add history items (could be moved to a shared util if needed elsewhere)
|
||||||
|
const addHistoryItem = (
|
||||||
|
setHistory: React.Dispatch<React.SetStateAction<HistoryItem[]>>,
|
||||||
|
itemData: Omit<HistoryItem, 'id'>,
|
||||||
|
id: number,
|
||||||
|
) => {
|
||||||
|
setHistory((prevHistory) => [
|
||||||
|
...prevHistory,
|
||||||
|
{ ...itemData, id } as HistoryItem,
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface HandleAtCommandParams {
|
||||||
|
query: string; // Raw user input
|
||||||
|
config: Config;
|
||||||
|
setHistory: React.Dispatch<React.SetStateAction<HistoryItem[]>>;
|
||||||
|
setDebugMessage: React.Dispatch<React.SetStateAction<string>>;
|
||||||
|
getNextMessageId: (baseTimestamp: number) => number;
|
||||||
|
userMessageTimestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HandleAtCommandResult {
|
||||||
|
processedQuery: PartListUnion; // Query to potentially send to Gemini
|
||||||
|
shouldProceed: boolean; // Whether the main hook should continue processing
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Processes user input that might start with the '@' command to read files/directories.
|
||||||
|
* If it's an '@' command, it attempts to read the specified path, updates the UI
|
||||||
|
* with the tool call status, and prepares the query to be sent to the LLM.
|
||||||
|
*
|
||||||
|
* @returns An object containing the potentially modified query and a flag
|
||||||
|
* indicating if the main hook should proceed with the Gemini API call.
|
||||||
|
*/
|
||||||
|
export async function handleAtCommand({
|
||||||
|
query,
|
||||||
|
config,
|
||||||
|
setHistory,
|
||||||
|
setDebugMessage,
|
||||||
|
getNextMessageId,
|
||||||
|
userMessageTimestamp,
|
||||||
|
}: HandleAtCommandParams): Promise<HandleAtCommandResult> {
|
||||||
|
const trimmedQuery = query.trim();
|
||||||
|
|
||||||
|
if (!trimmedQuery.startsWith('@')) {
|
||||||
|
// Not an '@' command, proceed as normal
|
||||||
|
// Add the user message here before returning
|
||||||
|
addHistoryItem(
|
||||||
|
setHistory,
|
||||||
|
{ type: 'user', text: query },
|
||||||
|
userMessageTimestamp,
|
||||||
|
);
|
||||||
|
// Use property shorthand for processedQuery
|
||||||
|
return { processedQuery: query, shouldProceed: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- It is an '@' command ---
|
||||||
|
const filePath = trimmedQuery.substring(1);
|
||||||
|
|
||||||
|
if (!filePath) {
|
||||||
|
// Handle case where it's just "@" - treat as normal input
|
||||||
|
addHistoryItem(
|
||||||
|
setHistory,
|
||||||
|
{ type: 'user', text: query },
|
||||||
|
userMessageTimestamp,
|
||||||
|
);
|
||||||
|
// Use property shorthand for processedQuery
|
||||||
|
return { processedQuery: query, shouldProceed: true }; // Send the "@" to the model
|
||||||
|
}
|
||||||
|
|
||||||
|
const toolRegistry = config.getToolRegistry();
|
||||||
|
const readManyFilesTool = toolRegistry.getTool('read_many_files');
|
||||||
|
|
||||||
|
// Add user message first, so it appears before potential errors/tool UI
|
||||||
|
addHistoryItem(
|
||||||
|
setHistory,
|
||||||
|
{ type: 'user', text: query },
|
||||||
|
userMessageTimestamp,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!readManyFilesTool) {
|
||||||
|
const errorTimestamp = getNextMessageId(userMessageTimestamp);
|
||||||
|
addHistoryItem(
|
||||||
|
setHistory,
|
||||||
|
{ type: 'error', text: 'Error: read_many_files tool not found.' },
|
||||||
|
errorTimestamp,
|
||||||
|
);
|
||||||
|
// Use property shorthand for processedQuery
|
||||||
|
return { processedQuery: query, shouldProceed: false }; // Don't proceed if tool is missing
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Path Handling for @ command ---
|
||||||
|
let pathSpec = filePath;
|
||||||
|
// Basic check: If no extension or ends with '/', assume directory and add globstar.
|
||||||
|
if (!filePath.includes('.') || filePath.endsWith('/')) {
|
||||||
|
pathSpec = filePath.endsWith('/') ? `${filePath}**` : `${filePath}/**`;
|
||||||
|
}
|
||||||
|
const toolArgs = { paths: [pathSpec] };
|
||||||
|
const contentLabel =
|
||||||
|
pathSpec === filePath ? filePath : `directory ${filePath}`; // Adjust label
|
||||||
|
// --- End Path Handling ---
|
||||||
|
|
||||||
|
let toolCallDisplay: IndividualToolCallDisplay;
|
||||||
|
let processedQuery: PartListUnion = query; // Default to original query
|
||||||
|
|
||||||
|
try {
|
||||||
|
setDebugMessage(`Reading via @ command: ${pathSpec}`);
|
||||||
|
const result = await readManyFilesTool.execute(toolArgs);
|
||||||
|
const fileContent = result.llmContent || '';
|
||||||
|
|
||||||
|
// Construct success UI
|
||||||
|
toolCallDisplay = {
|
||||||
|
callId: `client-read-${userMessageTimestamp}`,
|
||||||
|
name: readManyFilesTool.displayName,
|
||||||
|
description: readManyFilesTool.getDescription(toolArgs),
|
||||||
|
status: ToolCallStatus.Success,
|
||||||
|
resultDisplay: result.returnDisplay,
|
||||||
|
confirmationDetails: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Prepend file content to the query sent to the model
|
||||||
|
processedQuery = [
|
||||||
|
{
|
||||||
|
text: `--- Content from: ${contentLabel} ---
|
||||||
|
${fileContent}
|
||||||
|
--- End Content ---`,
|
||||||
|
},
|
||||||
|
// TODO: Handle cases like "@README.md explain this" by appending the rest of the query
|
||||||
|
];
|
||||||
|
|
||||||
|
// Add the tool group UI
|
||||||
|
const toolGroupId = getNextMessageId(userMessageTimestamp);
|
||||||
|
addHistoryItem(
|
||||||
|
setHistory,
|
||||||
|
{ type: 'tool_group', tools: [toolCallDisplay] } as Omit<
|
||||||
|
HistoryItem,
|
||||||
|
'id'
|
||||||
|
>,
|
||||||
|
toolGroupId,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Use property shorthand for processedQuery
|
||||||
|
return { processedQuery, shouldProceed: true }; // Proceed to Gemini
|
||||||
|
} catch (error) {
|
||||||
|
// Construct error UI
|
||||||
|
toolCallDisplay = {
|
||||||
|
callId: `client-read-${userMessageTimestamp}`,
|
||||||
|
name: readManyFilesTool.displayName,
|
||||||
|
description: readManyFilesTool.getDescription(toolArgs),
|
||||||
|
status: ToolCallStatus.Error,
|
||||||
|
resultDisplay: `Error reading ${contentLabel}: ${getErrorMessage(error)}`,
|
||||||
|
confirmationDetails: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the tool group UI and signal not to proceed
|
||||||
|
const toolGroupId = getNextMessageId(userMessageTimestamp);
|
||||||
|
addHistoryItem(
|
||||||
|
setHistory,
|
||||||
|
{ type: 'tool_group', tools: [toolCallDisplay] } as Omit<
|
||||||
|
HistoryItem,
|
||||||
|
'id'
|
||||||
|
>,
|
||||||
|
toolGroupId,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Use property shorthand for processedQuery
|
||||||
|
return { processedQuery: query, shouldProceed: false }; // Don't proceed on error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2025 Google LLC
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import * as fs from 'fs/promises';
|
||||||
|
import * as path from 'path';
|
||||||
|
import { isNodeError } from '@gemini-code/server';
|
||||||
|
|
||||||
|
const MAX_SUGGESTIONS_TO_SHOW = 8;
|
||||||
|
|
||||||
|
export interface UseCompletionReturn {
|
||||||
|
suggestions: string[];
|
||||||
|
activeSuggestionIndex: number;
|
||||||
|
visibleStartIndex: number;
|
||||||
|
showSuggestions: boolean;
|
||||||
|
isLoadingSuggestions: boolean;
|
||||||
|
setActiveSuggestionIndex: React.Dispatch<React.SetStateAction<number>>;
|
||||||
|
setShowSuggestions: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
|
resetCompletionState: () => void;
|
||||||
|
navigateUp: () => void;
|
||||||
|
navigateDown: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useCompletion(
|
||||||
|
query: string,
|
||||||
|
cwd: string,
|
||||||
|
isActive: boolean,
|
||||||
|
): UseCompletionReturn {
|
||||||
|
const [suggestions, setSuggestions] = useState<string[]>([]);
|
||||||
|
const [activeSuggestionIndex, setActiveSuggestionIndex] =
|
||||||
|
useState<number>(-1);
|
||||||
|
const [visibleStartIndex, setVisibleStartIndex] = useState<number>(0);
|
||||||
|
const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
|
||||||
|
const [isLoadingSuggestions, setIsLoadingSuggestions] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
|
||||||
|
const resetCompletionState = useCallback(() => {
|
||||||
|
setSuggestions([]);
|
||||||
|
setActiveSuggestionIndex(-1);
|
||||||
|
setVisibleStartIndex(0);
|
||||||
|
setShowSuggestions(false);
|
||||||
|
setIsLoadingSuggestions(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// --- Navigation Logic ---
|
||||||
|
const navigateUp = useCallback(() => {
|
||||||
|
if (suggestions.length === 0) return;
|
||||||
|
|
||||||
|
setActiveSuggestionIndex((prevIndex) => {
|
||||||
|
const newIndex = prevIndex <= 0 ? suggestions.length - 1 : prevIndex - 1;
|
||||||
|
|
||||||
|
// Adjust visible window if needed (scrolling up)
|
||||||
|
if (newIndex < visibleStartIndex) {
|
||||||
|
setVisibleStartIndex(newIndex);
|
||||||
|
} else if (
|
||||||
|
newIndex === suggestions.length - 1 &&
|
||||||
|
suggestions.length > MAX_SUGGESTIONS_TO_SHOW
|
||||||
|
) {
|
||||||
|
// Handle wrapping from first to last item
|
||||||
|
setVisibleStartIndex(
|
||||||
|
Math.max(0, suggestions.length - MAX_SUGGESTIONS_TO_SHOW),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return newIndex;
|
||||||
|
});
|
||||||
|
}, [suggestions.length, visibleStartIndex]);
|
||||||
|
|
||||||
|
const navigateDown = useCallback(() => {
|
||||||
|
if (suggestions.length === 0) return;
|
||||||
|
|
||||||
|
setActiveSuggestionIndex((prevIndex) => {
|
||||||
|
const newIndex = prevIndex >= suggestions.length - 1 ? 0 : prevIndex + 1;
|
||||||
|
|
||||||
|
// Adjust visible window if needed (scrolling down)
|
||||||
|
if (newIndex >= visibleStartIndex + MAX_SUGGESTIONS_TO_SHOW) {
|
||||||
|
setVisibleStartIndex(visibleStartIndex + 1);
|
||||||
|
} else if (
|
||||||
|
newIndex === 0 &&
|
||||||
|
suggestions.length > MAX_SUGGESTIONS_TO_SHOW
|
||||||
|
) {
|
||||||
|
// Handle wrapping from last to first item
|
||||||
|
setVisibleStartIndex(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return newIndex;
|
||||||
|
});
|
||||||
|
}, [suggestions.length, visibleStartIndex]);
|
||||||
|
// --- End Navigation Logic ---
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isActive) {
|
||||||
|
resetCompletionState();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const atIndex = query.lastIndexOf('@');
|
||||||
|
if (atIndex === -1) {
|
||||||
|
resetCompletionState();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const partialPath = query.substring(atIndex + 1);
|
||||||
|
const lastSlashIndex = partialPath.lastIndexOf('/');
|
||||||
|
const baseDirRelative =
|
||||||
|
lastSlashIndex === -1
|
||||||
|
? '.'
|
||||||
|
: partialPath.substring(0, lastSlashIndex + 1);
|
||||||
|
const prefix =
|
||||||
|
lastSlashIndex === -1
|
||||||
|
? partialPath
|
||||||
|
: partialPath.substring(lastSlashIndex + 1);
|
||||||
|
const baseDirAbsolute = path.resolve(cwd, baseDirRelative);
|
||||||
|
|
||||||
|
let isMounted = true;
|
||||||
|
const fetchSuggestions = async () => {
|
||||||
|
setIsLoadingSuggestions(true);
|
||||||
|
try {
|
||||||
|
const entries = await fs.readdir(baseDirAbsolute, {
|
||||||
|
withFileTypes: true,
|
||||||
|
});
|
||||||
|
const filteredSuggestions = entries
|
||||||
|
.filter((entry) => entry.name.startsWith(prefix))
|
||||||
|
.map((entry) => (entry.isDirectory() ? entry.name + '/' : entry.name))
|
||||||
|
.sort((a, b) => {
|
||||||
|
// Sort directories first, then alphabetically
|
||||||
|
const aIsDir = a.endsWith('/');
|
||||||
|
const bIsDir = b.endsWith('/');
|
||||||
|
if (aIsDir && !bIsDir) return -1;
|
||||||
|
if (!aIsDir && bIsDir) return 1;
|
||||||
|
return a.localeCompare(b);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isMounted) {
|
||||||
|
setSuggestions(filteredSuggestions);
|
||||||
|
setShowSuggestions(filteredSuggestions.length > 0);
|
||||||
|
setActiveSuggestionIndex(-1); // Reset selection on new suggestions
|
||||||
|
setVisibleStartIndex(0); // Reset scroll on new suggestions
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (isNodeError(error) && error.code === 'ENOENT') {
|
||||||
|
// Directory doesn't exist, likely mid-typing, clear suggestions
|
||||||
|
if (isMounted) {
|
||||||
|
setSuggestions([]);
|
||||||
|
setShowSuggestions(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error(
|
||||||
|
`Error fetching completion suggestions for ${baseDirAbsolute}:`,
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
if (isMounted) {
|
||||||
|
resetCompletionState();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isMounted) {
|
||||||
|
setIsLoadingSuggestions(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Debounce the fetch slightly
|
||||||
|
const debounceTimeout = setTimeout(fetchSuggestions, 100);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isMounted = false;
|
||||||
|
clearTimeout(debounceTimeout);
|
||||||
|
// Don't reset loading state here, let the next effect handle it or resetCompletionState
|
||||||
|
};
|
||||||
|
}, [query, cwd, isActive, resetCompletionState]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
suggestions,
|
||||||
|
activeSuggestionIndex,
|
||||||
|
visibleStartIndex,
|
||||||
|
showSuggestions,
|
||||||
|
isLoadingSuggestions,
|
||||||
|
setActiveSuggestionIndex,
|
||||||
|
setShowSuggestions,
|
||||||
|
resetCompletionState,
|
||||||
|
navigateUp,
|
||||||
|
navigateDown,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2025 Google LLC
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if a query string potentially represents an '@' command.
|
||||||
|
* It triggers if the query starts with '@' or contains '@' preceded by whitespace
|
||||||
|
* and followed by a non-whitespace character.
|
||||||
|
*
|
||||||
|
* @param query The input query string.
|
||||||
|
* @returns True if the query looks like an '@' command, false otherwise.
|
||||||
|
*/
|
||||||
|
export const isPotentiallyAtCommand = (query: string): boolean =>
|
||||||
|
// Check if starts with @ OR has a space, then @, then a non-space character.
|
||||||
|
query.startsWith('@') || /\s@\S/.test(query);
|
||||||
Loading…
Reference in New Issue