) => {
- const value = event.target.value
+ const handleComposerChange = (text: string, nextMentions: ComposerMention[]) => {
+ setComposerInput(text, nextMentions)
if (isMemberSession) {
- setComposerInput(value)
return
}
- const cursorPos = event.target.selectionStart ?? value.length
- setComposerInput(value)
- detectSlashTrigger(value, cursorPos)
- detectAtTrigger(value, cursorPos)
+ const cursorPos = composerRef.current?.getSelectionOffsets().start ?? text.length
+ detectSlashTrigger(text, cursorPos)
+ detectAtTrigger(text, cursorPos, nextMentions)
}
const selectSlashCommand = useCallback((command: string) => {
- const el = textareaRef.current
- if (!el) return
- const cursorPos = el.selectionStart ?? input.length
+ const cursorPos = composerRef.current?.getSelectionOffsets().start ?? input.length
const replacement = replaceSlashToken(input, cursorPos, command)
setComposerInput(replacement.value)
setSlashMenuOpen(false)
requestAnimationFrame(() => {
- el.focus()
- el.setSelectionRange(replacement.cursorPos, replacement.cursorPos)
+ composerRef.current?.focus()
+ composerRef.current?.setSelectionOffsets(replacement.cursorPos)
})
}, [input])
@@ -660,7 +670,7 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
if (pendingSlashUiAction?.type === 'panel') {
setLocalSlashPanel(pendingSlashUiAction.command as LocalSlashCommandName)
- setComposerInput('')
+ setComposerInput('', [])
setSlashMenuOpen(false)
setFileSearchOpen(false)
setPlusMenuOpen(false)
@@ -670,7 +680,7 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
if (pendingSlashUiAction?.type === 'settings') {
useUIStore.getState().setPendingSettingsTab(pendingSlashUiAction.tab)
useTabStore.getState().openTab(SETTINGS_TAB_ID, 'Settings', 'settings')
- setComposerInput('')
+ setComposerInput('', [])
setSlashMenuOpen(false)
setFileSearchOpen(false)
setPlusMenuOpen(false)
@@ -679,7 +689,7 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
if (pendingSlashUiAction?.type === 'model') {
modelSelectorRef.current?.open()
- setComposerInput('')
+ setComposerInput('', [])
setSlashMenuOpen(false)
setFileSearchOpen(false)
setPlusMenuOpen(false)
@@ -691,7 +701,11 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
const workspaceReferencePrompt = !isMemberSession
? formatWorkspaceReferencePrompt(workspaceReferences)
: ''
- const contentForModel = [workspaceReferencePrompt, text].filter(Boolean).join('\n\n')
+ // Inline @-mentions travel as the `@"absolute path"` text the CLI already
+ // parses. Serialized from the live document — only the doc knows which
+ // `@label` is a pill and which is literal text the user typed.
+ const serializedText = (composerRef.current?.getModelContent() ?? input).trim()
+ const contentForModel = [workspaceReferencePrompt, serializedText].filter(Boolean).join('\n\n')
const displayContent = text || (
workspaceReferences.length > 0
? t('chat.contextReferencesOnly', { count: workspaceReferences.length })
@@ -777,7 +791,7 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
})
}
invalidatePendingPastes()
- setComposerInput('')
+ setComposerInput('', [])
setComposerAttachments([])
useChatStore.getState().clearComposerDraft(activeTabId!)
if (targetSessionId !== activeTabId) useChatStore.getState().clearComposerDraft(targetSessionId)
@@ -791,9 +805,9 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
setLocalSlashPanel(null)
}
- const handleKeyDown = (event: React.KeyboardEvent) => {
+ const handleComposerKeyDown = (event: KeyboardEvent): boolean => {
// Ignore key events during IME composition (e.g. Chinese input method)
- if (composingRef.current || event.nativeEvent.isComposing || event.keyCode === 229) return
+ if (composingRef.current || event.isComposing || event.keyCode === 229) return false
// Route file search navigation keys to FileSearchMenu
if (fileSearchOpen) {
@@ -804,20 +818,20 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
setFileSearchOpen(false)
setAtFilter('')
setAtCursorPos(-1)
- return
+ return true
}
- fileSearchRef.current?.handleKeyDown(event.nativeEvent)
- return
+ fileSearchRef.current?.handleKeyDown(event)
+ return true
}
- // Other keys (typing) should go to the textarea - let it propagate
- return
+ // Other keys (typing) should go to the editor - let ProseMirror handle them
+ return false
}
if (localSlashPanel) {
if (event.key === 'Escape') {
event.preventDefault()
setLocalSlashPanel(null)
- return
+ return true
}
}
@@ -825,12 +839,12 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
if (event.key === 'ArrowDown') {
event.preventDefault()
setSlashSelectedIndex((prev) => (prev + 1) % filteredCommands.length)
- return
+ return true
}
if (event.key === 'ArrowUp') {
event.preventDefault()
setSlashSelectedIndex((prev) => (prev - 1 + filteredCommands.length) % filteredCommands.length)
- return
+ return true
}
if (event.key === 'Enter') {
const selected = filteredCommands[slashSelectedIndex]
@@ -841,36 +855,38 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
shouldSubmitOnEnter(event, chatSendBehavior)
) {
event.preventDefault()
- handleSubmit()
- return
+ void handleSubmit()
+ return true
}
event.preventDefault()
if (selected) selectSlashCommand(selected.name)
- return
+ return true
}
if (event.key === 'Tab') {
event.preventDefault()
const selected = filteredCommands[slashSelectedIndex]
if (selected) selectSlashCommand(selected.name)
- return
+ return true
}
if (event.key === 'Escape') {
event.preventDefault()
setSlashMenuOpen(false)
- return
+ return true
}
}
if (shouldSubmitOnEnter(event, chatSendBehavior)) {
event.preventDefault()
- handleSubmit()
+ void handleSubmit()
+ return true
}
+ return false
}
- const handlePaste = (event: React.ClipboardEvent) => {
- if (isMemberSession) return
- const files = getDataTransferFiles(event.clipboardData)
- if (files.length === 0) return
+ const handleComposerPaste = (event: ClipboardEvent): boolean => {
+ if (isMemberSession) return false
+ const files = event.clipboardData ? getDataTransferFiles(event.clipboardData) : []
+ if (files.length === 0) return false
event.preventDefault()
const pasteGeneration = pasteGenerationRef.current
@@ -885,6 +901,7 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
.catch((error) => {
console.warn('[attachments] Failed to read pasted files', error)
})
+ return true
}
const appendFiles = useCallback((files: FileList | File[]) => {
@@ -966,16 +983,15 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
const insertSlashCommand = () => {
if (isMemberSession) return
- const el = textareaRef.current
- const cursorPos = el?.selectionStart ?? input.length
+ const cursorPos = composerRef.current?.getSelectionOffsets().start ?? input.length
const replacement = replaceSlashToken(input, cursorPos, '', { trailingSpace: false })
setComposerInput(replacement.value)
setPlusMenuOpen(false)
setSlashFilter('')
setSlashMenuOpen(true)
requestAnimationFrame(() => {
- textareaRef.current?.focus()
- textareaRef.current?.setSelectionRange(replacement.cursorPos, replacement.cursorPos)
+ composerRef.current?.focus()
+ composerRef.current?.setSelectionOffsets(replacement.cursorPos)
})
}
@@ -1058,37 +1074,27 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
setComposerInput(newValue)
setAtFilter(relativePath)
requestAnimationFrame(() => {
- textareaRef.current?.focus()
- textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos)
+ composerRef.current?.focus()
+ composerRef.current?.setSelectionOffsets(newCursorPos)
})
}}
onSelect={(path, name, isDirectory) => {
- if (atCursorPos >= 0) {
- const referenceName = name.split('/').filter(Boolean).pop() ?? name
- const tokenEnd = atCursorPos + 1 + atFilter.length
- const beforeToken = input.slice(0, atCursorPos)
- const afterToken = beforeToken ? input.slice(tokenEnd) : input.slice(tokenEnd).replace(/^\s+/, '')
- const spacer = beforeToken && afterToken && !/\s$/.test(beforeToken) && !/^\s/.test(afterToken) ? ' ' : ''
- const newValue = `${beforeToken}${spacer}${afterToken}`
- const newCursorPos = atCursorPos + spacer.length
- if (activeTabId) {
- addWorkspaceReference(activeTabId, {
- kind: 'file',
- path,
- absolutePath: path,
- name: isDirectory ? `${referenceName}/` : referenceName,
- isDirectory,
- })
- }
- setComposerInput(newValue)
- setFileSearchOpen(false)
- setAtFilter('')
- setAtCursorPos(-1)
- void textareaRef.current?.focus()
- requestAnimationFrame(() => {
- textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos)
- })
- }
+ if (atCursorPos < 0) return
+ const referenceName = name.split('/').filter(Boolean).pop() ?? name
+ const tokenEnd = atCursorPos + 1 + atFilter.length
+ const inserted = insertMentionIntoText(input, mentions, atCursorPos, tokenEnd, {
+ label: isDirectory ? `${referenceName}/` : referenceName,
+ path,
+ isDirectory,
+ })
+ setComposerInput(inserted.text, inserted.mentions)
+ setFileSearchOpen(false)
+ setAtFilter('')
+ setAtCursorPos(-1)
+ void composerRef.current?.focus()
+ requestAnimationFrame(() => {
+ composerRef.current?.setSelectionOffsets(inserted.cursorPos)
+ })
}}
/>
)}
@@ -1236,53 +1242,56 @@ export function ChatInput({ variant = 'default', compact = false }: ChatInputPro
{isHeroComposer ? (
-