- {hasText && (
+ {(hasText || actionBarEditAction) && (
diff --git a/desktop/src/components/chat/UserMessageEditor.test.tsx b/desktop/src/components/chat/UserMessageEditor.test.tsx
new file mode 100644
index 00000000..76650c60
--- /dev/null
+++ b/desktop/src/components/chat/UserMessageEditor.test.tsx
@@ -0,0 +1,148 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { useSettingsStore } from '../../stores/settingsStore'
+import { UserMessageEditor } from './UserMessageEditor'
+import type { UserMessageEditDraft } from './userMessageEdit'
+
+const DRAFT: UserMessageEditDraft = {
+ text: 'Fix the bug',
+ attachments: [
+ { id: 'a', type: 'file', name: 'notes.md', path: '/repo/notes.md', sendable: true },
+ ],
+ sessionReferences: [],
+}
+
+function renderEditor(overrides: Partial
[0]> = {}) {
+ const props = {
+ initialDraft: DRAFT,
+ submitting: false,
+ disabled: false,
+ onDraftChange: vi.fn(),
+ onCancel: vi.fn(),
+ onSubmit: vi.fn(),
+ ...overrides,
+ }
+ render()
+ return { ...props, textbox: screen.getByRole('textbox', { name: 'Edited message' }) as HTMLTextAreaElement }
+}
+
+describe('UserMessageEditor', () => {
+ afterEach(() => {
+ useSettingsStore.setState({ locale: 'en', chatSendBehavior: 'enter' })
+ })
+
+ it('opens focused on the draft with the caret at the end', () => {
+ useSettingsStore.setState({ locale: 'en' })
+ const { textbox } = renderEditor()
+
+ expect(textbox.value).toBe('Fix the bug')
+ expect(document.activeElement).toBe(textbox)
+ expect(textbox.selectionStart).toBe('Fix the bug'.length)
+ })
+
+ it('submits the edited draft on Enter but not on Shift+Enter', () => {
+ useSettingsStore.setState({ locale: 'en', chatSendBehavior: 'enter' })
+ const { textbox, onSubmit, onDraftChange } = renderEditor()
+
+ fireEvent.change(textbox, { target: { value: 'Fix the signup bug' } })
+ expect(onDraftChange).toHaveBeenLastCalledWith({ ...DRAFT, text: 'Fix the signup bug' })
+
+ fireEvent.keyDown(textbox, { key: 'Enter', shiftKey: true })
+ expect(onSubmit).not.toHaveBeenCalled()
+
+ fireEvent.keyDown(textbox, { key: 'Enter' })
+ expect(onSubmit).toHaveBeenCalledOnce()
+ expect(onSubmit).toHaveBeenCalledWith({ ...DRAFT, text: 'Fix the signup bug' })
+ })
+
+ it('does not submit the Enter that confirms an IME composition', () => {
+ useSettingsStore.setState({ locale: 'en', chatSendBehavior: 'enter' })
+ const { textbox, onSubmit } = renderEditor()
+
+ fireEvent.compositionStart(textbox)
+ fireEvent.keyDown(textbox, { key: 'Enter' })
+ fireEvent.compositionEnd(textbox)
+ fireEvent.keyDown(textbox, { key: 'Enter', keyCode: 229 })
+
+ expect(onSubmit).not.toHaveBeenCalled()
+ })
+
+ it('follows the modifier+Enter send setting', () => {
+ useSettingsStore.setState({ locale: 'en', chatSendBehavior: 'modifierEnter' })
+ const { textbox, onSubmit } = renderEditor()
+
+ fireEvent.keyDown(textbox, { key: 'Enter' })
+ expect(onSubmit).not.toHaveBeenCalled()
+ fireEvent.keyDown(textbox, { key: 'Enter', metaKey: true })
+ expect(onSubmit).toHaveBeenCalledOnce()
+ })
+
+ it('cancels on Escape without submitting', () => {
+ useSettingsStore.setState({ locale: 'en' })
+ const { textbox, onCancel, onSubmit } = renderEditor()
+
+ fireEvent.keyDown(textbox, { key: 'Escape' })
+
+ expect(onCancel).toHaveBeenCalledOnce()
+ expect(onSubmit).not.toHaveBeenCalled()
+ })
+
+ it('keeps editor keystrokes from reaching the message list scroll handler', () => {
+ useSettingsStore.setState({ locale: 'en' })
+ const listKeyDown = vi.fn()
+ render(
+
+
+
,
+ )
+
+ fireEvent.keyDown(screen.getByRole('textbox', { name: 'Edited message' }), { key: 'ArrowUp' })
+ expect(listKeyDown).not.toHaveBeenCalled()
+ })
+
+ it('removes an attachment chip from the draft', () => {
+ useSettingsStore.setState({ locale: 'en' })
+ const { onDraftChange } = renderEditor()
+
+ fireEvent.click(screen.getByRole('button', { name: 'Remove notes.md' }))
+
+ expect(onDraftChange).toHaveBeenLastCalledWith({ ...DRAFT, attachments: [] })
+ })
+
+ it('disables send for an empty draft and while the session cannot take an edit', () => {
+ useSettingsStore.setState({ locale: 'en' })
+ const { textbox, onSubmit } = renderEditor({
+ initialDraft: { text: 'x', attachments: [], sessionReferences: [] },
+ })
+ fireEvent.change(textbox, { target: { value: ' ' } })
+ expect((screen.getByRole('button', { name: 'Send' }) as HTMLButtonElement).disabled).toBe(true)
+ fireEvent.keyDown(textbox, { key: 'Enter' })
+ expect(onSubmit).not.toHaveBeenCalled()
+ })
+
+ it('disables send when the session is busy', () => {
+ useSettingsStore.setState({ locale: 'en' })
+ renderEditor({ disabled: true })
+
+ expect((screen.getByRole('button', { name: 'Send' }) as HTMLButtonElement).disabled).toBe(true)
+ })
+
+ it('says how many attachments can no longer be resent', () => {
+ useSettingsStore.setState({ locale: 'en' })
+ renderEditor({
+ initialDraft: {
+ ...DRAFT,
+ attachments: [...DRAFT.attachments, { id: 'b', type: 'file', name: 'gone.pdf', sendable: false }],
+ },
+ })
+
+ expect(screen.getByText('1 attachment(s) can no longer be read and will be left out when resending.')).toBeTruthy()
+ })
+})
diff --git a/desktop/src/components/chat/UserMessageEditor.tsx b/desktop/src/components/chat/UserMessageEditor.tsx
new file mode 100644
index 00000000..dee7b101
--- /dev/null
+++ b/desktop/src/components/chat/UserMessageEditor.tsx
@@ -0,0 +1,118 @@
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react'
+import { Button } from '@/components/ui/Button'
+import { TextArea } from '@/components/ui/TextArea'
+import { useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../stores/settingsStore'
+import { AttachmentGallery } from './AttachmentGallery'
+import { shouldSubmitOnEnter } from './sendShortcut'
+import type { UserMessageEditDraft } from './userMessageEdit'
+
+type Props = {
+ initialDraft: UserMessageEditDraft
+ submitting: boolean
+ disabled: boolean
+ onDraftChange: (draft: UserMessageEditDraft) => void
+ onCancel: () => void
+ onSubmit: (draft: UserMessageEditDraft) => void
+}
+
+const MIN_ROWS = 2
+const MAX_ROWS = 12
+
+export function UserMessageEditor({
+ initialDraft,
+ submitting,
+ disabled,
+ onDraftChange,
+ onCancel,
+ onSubmit,
+}: Props) {
+ const t = useTranslation()
+ const chatSendBehavior = useSettingsStore((state) => state.chatSendBehavior)
+ const [draft, setDraft] = useState(initialDraft)
+ const textareaRef = useRef(null)
+ const composingRef = useRef(false)
+
+ useEffect(() => {
+ const textarea = textareaRef.current
+ if (!textarea) return
+ textarea.focus()
+ textarea.setSelectionRange(textarea.value.length, textarea.value.length)
+ }, [])
+
+ const updateDraft = (next: UserMessageEditDraft) => {
+ setDraft(next)
+ onDraftChange(next)
+ }
+
+ const unavailableCount = draft.attachments.filter((attachment) => !attachment.sendable).length
+ const hasContent = draft.text.trim().length > 0 ||
+ draft.attachments.some((attachment) => attachment.sendable)
+ const canSubmit = hasContent && !disabled && !submitting
+ const rows = Math.min(MAX_ROWS, Math.max(MIN_ROWS, draft.text.split('\n').length))
+
+ const handleKeyDown = (event: ReactKeyboardEvent) => {
+ // The message list reads arrow keys and Space as scroll intent; keystrokes
+ // typed into the editor belong to the editor alone.
+ event.stopPropagation()
+ if (composingRef.current || event.nativeEvent.isComposing || event.keyCode === 229) return
+ if (event.key === 'Escape') {
+ event.preventDefault()
+ if (!submitting) onCancel()
+ return
+ }
+ if (shouldSubmitOnEnter(event, chatSendBehavior)) {
+ event.preventDefault()
+ if (canSubmit) onSubmit(draft)
+ }
+ }
+
+ return (
+
+ {draft.attachments.length > 0 ? (
+
updateDraft({
+ ...draft,
+ attachments: draft.attachments.filter((attachment) => attachment.id !== id),
+ })}
+ />
+ ) : null}
+ {unavailableCount > 0 ? (
+
+ {t('chat.editAttachmentUnavailable', { count: unavailableCount })}
+
+ ) : null}
+