Fix autocomplete popover stability and workspace file suggestion ranking

This commit is contained in:
Mohamed Boudra
2026-02-18 20:32:19 +07:00
parent cbdf8ea0bc
commit e22f183bb2
5 changed files with 119 additions and 52 deletions
@@ -642,50 +642,54 @@ export function AgentInputArea({
</View>
)}
{/* Command autocomplete dropdown */}
{autocomplete.isVisible && (
<Autocomplete
options={autocomplete.options}
selectedIndex={autocomplete.selectedIndex}
isLoading={autocomplete.isLoading}
errorMessage={autocomplete.errorMessage}
loadingText={autocomplete.loadingText}
emptyText={autocomplete.emptyText}
onSelect={autocomplete.onSelectOption}
/>
)}
{sendError && <Text style={styles.sendErrorText}>{sendError}</Text>}
{/* MessageInput handles everything: text, dictation, attachments, all buttons */}
<MessageInput
ref={messageInputRef}
value={userInput}
onChangeText={setUserInput}
onSubmit={handleSubmit}
isSubmitDisabled={isProcessing || isSubmitLoading}
isSubmitLoading={isProcessing || isSubmitLoading}
images={selectedImages}
onPickImages={handlePickImage}
onAddImages={addImages}
onRemoveImage={handleRemoveImage}
client={client}
placeholder="Message agent..."
autoFocus={autoFocus}
disabled={isSubmitLoading}
isScreenFocused={isScreenFocused}
leftContent={leftContent}
rightContent={rightContent}
voiceServerId={serverId}
voiceAgentId={agentId}
isAgentRunning={isAgentRunning}
onQueue={handleQueue}
onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
onKeyPress={handleCommandKeyPress}
onSelectionChange={(selection) => {
setCursorIndex(selection.start)
}}
/>
<View style={styles.messageInputContainer}>
{/* Command + file mention autocomplete rendered as a true popover */}
{autocomplete.isVisible && (
<View style={styles.autocompletePopover} pointerEvents="box-none">
<Autocomplete
options={autocomplete.options}
selectedIndex={autocomplete.selectedIndex}
isLoading={autocomplete.isLoading}
errorMessage={autocomplete.errorMessage}
loadingText={autocomplete.loadingText}
emptyText={autocomplete.emptyText}
onSelect={autocomplete.onSelectOption}
/>
</View>
)}
{/* MessageInput handles everything: text, dictation, attachments, all buttons */}
<MessageInput
ref={messageInputRef}
value={userInput}
onChangeText={setUserInput}
onSubmit={handleSubmit}
isSubmitDisabled={isProcessing || isSubmitLoading}
isSubmitLoading={isProcessing || isSubmitLoading}
images={selectedImages}
onPickImages={handlePickImage}
onAddImages={addImages}
onRemoveImage={handleRemoveImage}
client={client}
placeholder="Message agent..."
autoFocus={autoFocus}
disabled={isSubmitLoading}
isScreenFocused={isScreenFocused}
leftContent={leftContent}
rightContent={rightContent}
voiceServerId={serverId}
voiceAgentId={agentId}
isAgentRunning={isAgentRunning}
onQueue={handleQueue}
onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
onKeyPress={handleCommandKeyPress}
onSelectionChange={(selection) => {
setCursorIndex(selection.start)
}}
/>
</View>
</View>
</View>
</Animated.View>
@@ -709,7 +713,7 @@ const styles = StyleSheet.create(((theme: Theme) => ({
marginHorizontal: 'auto',
alignItems: 'center',
width: '100%',
overflow: 'hidden',
overflow: 'visible',
padding: theme.spacing[4],
},
inputAreaContent: {
@@ -717,6 +721,18 @@ const styles = StyleSheet.create(((theme: Theme) => ({
maxWidth: MAX_CONTENT_WIDTH,
gap: theme.spacing[3],
},
messageInputContainer: {
position: 'relative',
width: '100%',
},
autocompletePopover: {
position: 'absolute',
left: 0,
right: 0,
bottom: '100%',
marginBottom: theme.spacing[3],
zIndex: 30,
},
cancelButton: {
width: 34,
height: 34,
@@ -24,6 +24,16 @@ interface AutocompleteProps {
maxHeight?: number
}
const BOLT_GLYPH_PATTERN = /[\u26A1\uFE0F]/g
function removeBoltGlyphs(value?: string): string | undefined {
if (!value) {
return value
}
const cleaned = value.replace(BOLT_GLYPH_PATTERN, '').trim()
return cleaned.length > 0 ? cleaned : undefined
}
export function Autocomplete({
options,
selectedIndex,
@@ -156,6 +166,9 @@ export function Autocomplete({
>
{options.map((option, index) => {
const isSelected = index === selectedIndex
const optionLabel = removeBoltGlyphs(option.label) ?? option.label
const optionDetail = removeBoltGlyphs(option.detail)
const optionDescription = removeBoltGlyphs(option.description)
return (
<Pressable
key={option.id}
@@ -177,12 +190,12 @@ export function Autocomplete({
) : null}
<View style={styles.itemMain}>
<View style={styles.itemHeader}>
<Text style={styles.itemLabel}>{option.label}</Text>
{option.detail ? <Text style={styles.itemDetail}>{option.detail}</Text> : null}
<Text style={styles.itemLabel}>{optionLabel}</Text>
{optionDetail ? <Text style={styles.itemDetail}>{optionDetail}</Text> : null}
</View>
{option.description ? (
{optionDescription ? (
<Text style={styles.itemDescription} numberOfLines={1}>
{option.description}
{optionDescription}
</Text>
) : null}
</View>
@@ -237,7 +250,7 @@ const styles = StyleSheet.create(((theme: Theme) => ({
itemLabel: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.medium,
fontWeight: theme.fontWeight.normal,
},
itemDetail: {
color: theme.colors.foregroundMuted,
@@ -1,5 +1,5 @@
import { useCallback, useMemo } from 'react'
import { useQuery } from '@tanstack/react-query'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
import type { AutocompleteOption } from '@/components/ui/autocomplete'
import { useAgentCommandsQuery, type DraftCommandConfig } from './use-agent-commands-query'
import { orderAutocompleteOptions } from '@/components/ui/autocomplete-utils'
@@ -192,6 +192,7 @@ export function useAgentAutocomplete(input: UseAgentAutocompleteInput): AgentAut
isConnected,
retry: false,
staleTime: 15_000,
placeholderData: keepPreviousData,
})
const options = useMemo<AgentAutocompleteOption[]>(() => {
@@ -214,11 +215,11 @@ export function useAgentAutocomplete(input: UseAgentAutocompleteInput): AgentAut
}
if (mode === 'file' && activeFileMention) {
return (fileSuggestionsQuery.data ?? []).map((entry) => ({
const orderedEntries = orderAutocompleteOptions(fileSuggestionsQuery.data ?? [])
return orderedEntries.map((entry) => ({
type: 'workspace_entry' as const,
id: `${entry.kind}:${entry.path}`,
label: entry.path,
detail: entry.kind === 'directory' ? 'Directory' : 'File',
kind: entry.kind,
entryPath: entry.path,
mention: activeFileMention,
@@ -260,7 +261,7 @@ export function useAgentAutocomplete(input: UseAgentAutocompleteInput): AgentAut
mode === 'command'
? isCommandsLoading
: mode === 'file'
? fileSuggestionsQuery.isPending || fileSuggestionsQuery.isLoading
? fileSuggestionsQuery.isPending || (fileSuggestionsQuery.isLoading && options.length === 0)
: false
const errorMessage =
mode === 'command'
@@ -234,4 +234,33 @@ describe('searchWorkspaceEntries', () => {
})
expect(escapedResults.some((entry) => entry.path.includes('escaped-link'))).toBe(false)
})
it('ignores node_modules entries so deep workspace files still resolve under scan limits', async () => {
mkdirSync(path.join(workspaceDir, 'packages', 'app', 'src', 'app'), { recursive: true })
writeFileSync(path.join(workspaceDir, 'packages', 'app', 'src', 'app', '_layout.tsx'), '')
for (let index = 0; index < 120; index += 1) {
mkdirSync(path.join(workspaceDir, 'node_modules', `pkg-${index}`), { recursive: true })
writeFileSync(
path.join(workspaceDir, 'node_modules', `pkg-${index}`, 'index.js'),
'module.exports = {};\n'
)
}
writeFileSync(path.join(workspaceDir, 'node_modules', '_layout.tsx'), '')
const results = await searchWorkspaceEntries({
cwd: workspaceDir,
query: '_layout.tsx',
limit: 20,
includeFiles: true,
includeDirectories: true,
maxEntriesScanned: 60,
})
expect(results).toContainEqual({
path: 'packages/app/src/app/_layout.tsx',
kind: 'file',
})
expect(results.some((entry) => entry.path.startsWith('node_modules/'))).toBe(false)
})
})
@@ -73,6 +73,7 @@ const directoryListCache = new Map<string, DirectoryListCacheEntry>()
const workspaceEntryListCache = new Map<string, WorkspaceEntryListCacheEntry>()
const NO_SEGMENT_INDEX = Number.MAX_SAFE_INTEGER
const NO_MATCH_OFFSET = Number.MAX_SAFE_INTEGER
const WORKSPACE_IGNORED_DIRECTORY_NAMES = new Set(['node_modules'])
export async function searchHomeDirectories(
options: SearchHomeDirectoriesOptions
@@ -750,6 +751,9 @@ async function listWorkspaceChildEntries(input: {
if (isHiddenDirectoryName(dirent.name)) {
continue
}
if (isIgnoredWorkspaceDirectoryName(dirent.name)) {
continue
}
const candidatePath = path.join(input.directory, dirent.name)
const entry = await resolveWorkspaceCandidate({
@@ -839,6 +843,10 @@ function isHiddenDirectoryName(name: string): boolean {
return name.startsWith('.')
}
function isIgnoredWorkspaceDirectoryName(name: string): boolean {
return WORKSPACE_IGNORED_DIRECTORY_NAMES.has(name)
}
function setDirectoryListCache(cacheKey: string, entry: DirectoryListCacheEntry): void {
directoryListCache.set(cacheKey, entry)
pruneDirectoryListCache()