Skip to content
5 changes: 5 additions & 0 deletions .changeset/fix-chat-autocomplete-focus.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"kilo-code": patch
---

Fix chat autocomplete to only show suggestions when textarea has focus, text hasn't changed, and clear suggestions on paste
25 changes: 21 additions & 4 deletions webview-ui/src/components/chat/ChatTextArea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -413,12 +413,16 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const [intendedCursorPosition, setIntendedCursorPosition] = useState<number | null>(null)
const contextMenuContainerRef = useRef<HTMLDivElement>(null)
const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false)
// const [isFocused, setIsFocused] = useState(false) // kilocode_change - not needed
const [isFocused, setIsFocused] = useState(false)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the other thing which was there from Roo which actually listened to this is still commented out

// kilocode_change start: FIM autocomplete ghost text
const {
ghostText,
handleKeyDown: handleGhostTextKeyDown,
handleInputChange: handleGhostTextInputChange,
handleFocus: handleGhostTextFocus,
handleBlur: handleGhostTextBlur,
handleSelect: handleGhostTextSelect,
clearGhostText,
} = useChatGhostText({
textAreaRef,
enableChatAutocomplete: ghostServiceSettings?.enableChatAutocomplete ?? false,
Expand Down Expand Up @@ -1012,9 +1016,19 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
setShowSlashCommandsMenu(false)
} // kilocode_change

// setIsFocused(false) // kilocode_change - not needed
setIsFocused(false)
}, [isMouseDownOnMenu])

// kilocode_change start: FIM autocomplete - track focus for ghost text
useEffect(() => {
if (isFocused) {
handleGhostTextFocus()
} else {
handleGhostTextBlur()
}
}, [isFocused, handleGhostTextFocus, handleGhostTextBlur])
// kilocode_change end: FIM autocomplete

const handlePaste = useCallback(
async (e: React.ClipboardEvent) => {
const items = e.clipboardData.items
Expand All @@ -1025,6 +1039,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const urlRegex = /^\S+:\/\/\S+$/
if (urlRegex.test(pastedText.trim())) {
e.preventDefault()
clearGhostText() // kilocode_change: Clear ghost text on paste of URL as well
const trimmedUrl = pastedText.trim()
const newValue =
inputValue.slice(0, cursorPosition) + trimmedUrl + " " + inputValue.slice(cursorPosition)
Expand Down Expand Up @@ -1109,6 +1124,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
t,
selectedImages.length,
showImageWarning, // kilocode_change
clearGhostText, // kilocode_change: Clear ghost text on paste
],
)

Expand Down Expand Up @@ -1207,7 +1223,8 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
if (textAreaRef.current) {
setCursorPosition(textAreaRef.current.selectionStart)
}
}, [])
handleGhostTextSelect() // kilocode_change: Clear ghost text if cursor moved away from end
}, [handleGhostTextSelect])

const handleKeyUp = useCallback(
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
Expand Down Expand Up @@ -1548,7 +1565,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
updateHighlights()
}
}}
// onFocus={() => setIsFocused(true)} // kilocode_change - not needed
onFocus={() => setIsFocused(true)}
onKeyDown={(e) => {
// Handle ESC to cancel in edit mode
if (isEditMode && e.key === "Escape" && !e.nativeEvent?.isComposing) {
Expand Down
Loading