+
{
+ const field = event.target.closest('[data-native-chat-composer-scope]')
+ if (field) {
+ setActiveScope(field.dataset.nativeChatComposerScope ?? null)
+ }
+ }}
+ onPointerDownCapture={(event) => {
+ const field =
+ event.target instanceof Element
+ ? event.target.closest('[data-native-chat-composer-scope]')
+ : null
+ if (field) {
+ setActiveScope(field.dataset.nativeChatComposerScope ?? null)
+ }
+ }}
+ >
{children}
{isDragActive ? : null}
diff --git a/src/renderer/src/components/native-chat/NativeChatQueuedMessageCard.tsx b/src/renderer/src/components/native-chat/NativeChatQueuedMessageCard.tsx
index 87e7859dae0c..99c23ed84090 100644
--- a/src/renderer/src/components/native-chat/NativeChatQueuedMessageCard.tsx
+++ b/src/renderer/src/components/native-chat/NativeChatQueuedMessageCard.tsx
@@ -37,8 +37,8 @@ import { NativeChatPendingIcon } from './NativeChatPendingIcon'
import type { QueuedMessagesPendingAction } from './use-structured-agent-session-queued-messages'
import { useNativeChatClippedLine } from './use-native-chat-clipped-line'
import type { AgentSessionFailureFact } from '../../../../shared/agent-session-failure'
-import { NativeChatQueuedMessageEditor } from './NativeChatQueuedMessageEditor'
-import type { QueuedEditAttachTarget } from './use-native-chat-queued-edit-image-intake'
+import { NativeChatQueuedMessageComposer } from './NativeChatQueuedMessageComposer'
+import type { QueuedEditAttachTarget } from './NativeChatQueuedMessageComposer'
import type { QueuedMessageInlineEditor } from './use-structured-agent-session-queued-edit'
import { nativeChatImageLabelCopy } from './native-chat-image-label'
@@ -171,7 +171,7 @@ export function NativeChatQueuedMessageCard({
return (
// The editor fills the row, so a drop anywhere on the card reaches it.
- (null)
+ const row = useRef(null)
+ useLayoutEffect(() => {
+ if (editor.acquiring) {
+ return
+ }
+ composer.current?.focus()
+ }, [editor.acquiring])
+ useLayoutEffect(() => {
+ const element = row.current
+ const list = element?.closest('ul')
+ if (!element || !list) {
+ return
+ }
+ const reveal = (): void => {
+ const bounds = list.getBoundingClientRect()
+ const viewportTop = bounds.top + list.clientTop
+ const viewportBottom = viewportTop + list.clientHeight
+ if (!list.clientHeight) {
+ return
+ }
+ const content = element.getBoundingClientRect()
+ const delta =
+ content.height > list.clientHeight
+ ? content.bottom - viewportBottom
+ : content.top < viewportTop
+ ? content.top - viewportTop
+ : Math.max(0, content.bottom - viewportBottom)
+ if (delta) {
+ list.scrollTop += delta
+ }
+ }
+ reveal()
+ const observer = new ResizeObserver(reveal)
+ observer.observe(element)
+ observer.observe(list)
+ return () => observer.disconnect()
+ }, [])
+ return (
+
+
+
+
+ {translate('components.native-chat.queuedMessages.editingMessage', 'Editing message')}
+
+ {sender}
+ {!editor.imagesCapable ? images : null}
+
+ {attachTo ? (
+
+ ) : null}
+
-
- {prompt === 'approval' ? (
-
- ) : null}
- {prompt === 'question' ? (
-
- ) : null}
-
-
-
- )
- const field = screen.getByRole('textbox')
- fireEvent.keyDown(field, { key: 'Enter' })
- expect(edit.save).toHaveBeenCalledOnce()
- expect(parent).not.toHaveBeenCalled()
- fireEvent.keyDown(field, { key: 'Enter', shiftKey: true })
- expect(edit.save).toHaveBeenCalledOnce()
- for (const [platform, modifier] of [
- ['Macintosh', { metaKey: true }],
- ['Linux', { ctrlKey: true }],
- ['Windows', { ctrlKey: true }]
- ] as const) {
- vi.spyOn(navigator, 'userAgent', 'get').mockReturnValue(platform)
- fireEvent.keyDown(field, { key: 'Enter', ...modifier })
- }
- expect(edit.save).toHaveBeenCalledTimes(4)
- vi.restoreAllMocks()
- })
- it('IME confirmation and Escape never commit/cancel or reach the prompt', () => {
- const edit = editor()
- const parent = vi.fn()
- render(
-
-
-
- )
- const field = screen.getByRole('textbox')
- fireEvent.compositionStart(field)
- fireEvent.keyDown(field, { key: 'Enter', isComposing: true })
- fireEvent.keyDown(field, { key: 'Escape', isComposing: true })
- fireEvent.compositionEnd(field)
- fireEvent.keyDown(field, { key: 'Enter', keyCode: 229 })
- expect(edit.save).not.toHaveBeenCalled()
- expect(edit.cancel).not.toHaveBeenCalled()
- expect(parent).not.toHaveBeenCalled()
- })
- it('acquisition seeds a read-only field with the X always usable', () => {
- const edit = { ...editor(), acquiring: true }
- render()
- expect(screen.getByRole('textbox').getAttribute('readonly')).not.toBeNull()
- expect(screen.getByRole('button', { name: 'Save' }).hasAttribute('disabled')).toBe(true)
- fireEvent.click(screen.getByRole('button', { name: 'Cancel editing' }))
- expect(edit.cancel).toHaveBeenCalledOnce()
- })
- it('the header X cancels and saves nothing; Save is the only footer action', () => {
- const edit = editor()
- render()
- expect(screen.getByText('Editing message')).toBeTruthy()
- fireEvent.click(screen.getByRole('button', { name: 'Cancel editing' }))
- expect(edit.cancel).toHaveBeenCalledOnce()
- expect(edit.save).not.toHaveBeenCalled()
- expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull()
- expect(
- screen
- .getAllByRole('button')
- .map((button) => button.getAttribute('aria-label') ?? button.textContent)
- ).toEqual(['Cancel editing', 'Save'])
- })
- it.each([
- { state: 'saving', edit: { saving: true } },
- { state: 'unchanged', edit: { canSave: false } }
- ])('Save is disabled while $state and enabled otherwise', ({ edit: overrides }) => {
- const edit = { ...editor(), ...overrides }
- const { rerender } = render()
- const save = screen.getByRole('button', { name: 'Save' })
- expect(save.hasAttribute('disabled')).toBe(true)
- fireEvent.click(save)
- expect(edit.save).not.toHaveBeenCalled()
- rerender()
- fireEvent.click(screen.getByRole('button', { name: 'Save' }))
- expect(edit.save).toHaveBeenCalledOnce()
- })
- it('Save carries a decorative Enter badge and no key hint text', () => {
- for (const platform of ['Macintosh', 'Windows']) {
- vi.spyOn(navigator, 'userAgent', 'get').mockReturnValue(platform)
- const { container, unmount } = render()
- const save = screen.getByRole('button', { name: 'Save' })
- const badge = save.querySelector('[aria-hidden="true"]')
- expect(badge?.querySelector('svg')).toBeTruthy()
- expect(badge?.textContent).toBe('')
- expect(container.textContent).not.toMatch(/Shift|⇧|new line/)
- unmount()
- }
- vi.restoreAllMocks()
- })
-})
-
-const card: AgentSessionQueuedMessage = {
- messageId: 'card',
- position: 1,
- state: 'waiting',
- body: {
- kind: 'message',
- role: 'user',
- blocks: [
- { type: 'text', text: 'replace WORD please [Image #1] and [Image #2]' },
- { type: 'image-ref', path: '/host/old.png' },
- { type: 'image-ref', path: '/host/kept.png' }
- ]
- }
-}
-const writeSpy = vi.fn(async (..._args: unknown[]) => ({
- kind: 'done',
- value: { status: 'updated', messageId: 'card', fingerprint: 'a'.repeat(64) }
-}))
-// oxlint-disable-next-line typescript/consistent-type-assertions -- SAFETY: answers only queuedMessageUpdate, with that method's result.
-const write = writeSpy as StructuredAgentSessionWrite
-
-function EditedCard({
- imagesCapable,
- acceptsImages = true,
- runtimeEnvironmentId = null
-}: {
- imagesCapable: boolean
- acceptsImages?: boolean
- runtimeEnvironmentId?: string | null
-}): React.JSX.Element | null {
- const messages = [card]
- const { editor, begin } = useStructuredAgentSessionQueuedEdit({
- transport: { target: { kind: 'local' }, sessionId: 's', capable: true, imagesCapable, write },
- messages,
- cards: projectQueuedMessageCards(messages, [], {}),
- submissions: [],
- composerScopeKey: 'draft',
- promptOpen: false
- })
- useEffect(() => void begin('card'), [begin])
- const attachTo = {
- terminalTabId: 'tab',
- transport: { sessionId: 's', worktreeId: 'wt', runtimeEnvironmentId, acceptsImages }
- }
- return editor ? (
-
-
-
- ) : null
-}
-
-function savedParams(): unknown {
- return writeSpy.mock.calls.at(-1)?.[2]
-}
-
-function PastePane({
- composer,
- children
-}: {
- composer: NativeChatComposerHandle
- children: ReactNode
-}): React.JSX.Element {
- const rootRef = useRef(null)
- const composerRef = useRef(composer)
- useNativeChatPasteBridge({ rootRef, composerRef })
- return (
- routeNativeChatRootKeyToInput(event, composer, null)}
- >
- {children}
-
- )
-}
-
-describe('queued card image edit', () => {
- it.each([null, 'paired'])(
- 'prepares for the captured queued owner %s',
- async (runtimeEnvironmentId) => {
- const owner = vi.spyOn(OsFileDropOwner, 'useOsFileDropOwner')
- try {
- replaceRuntimeEnvironmentRevisions([{ id: 'paired', createdAt: 1, pairingRevision: 7 }])
- render()
- await waitFor(() => expect(screen.getByRole('textbox')).toHaveProperty('readOnly', false))
- const options = owner.mock.calls.at(-1)![1]
- const destination = options.captureDestination?.(new DragEvent('drop'))
- const consumer =
- typeof options.consumer === 'function' ? options.consumer(destination) : options.consumer
- expect(consumer).toBe(runtimeEnvironmentId ? 'agent' : 'local-chat')
- } finally {
- replaceRuntimeEnvironmentRevisions([])
- owner.mockRestore()
- }
- }
- )
-
- it('pastes into the owning queued edit through native key and menu delivery', async () => {
- let field: HTMLElement
- const ui = {
- readClipboardText: vi.fn(),
- performNativePaste: vi.fn(() => {
- expect(document.activeElement).toBe(field)
- })
- }
- vi.stubGlobal('api', { ui, fs: { getPathForFile: () => '' } })
- vi.stubGlobal('navigator', { userAgent: 'Windows', clipboard: undefined })
- const composer: NativeChatComposerHandle = {
- focus: vi.fn(() => true),
- insertTypedText: () => true,
- acceptsText: () => true,
- appendText: vi.fn(),
- handlePasteEvent: vi.fn(),
- pasteFromClipboard: vi.fn(),
- contains: () => false
- }
- try {
- render(
-
-
-
- )
- const attach = await screen.findByRole('button', { name: 'Attach file' })
- field = screen.getByRole('textbox', { name: 'Edit message' })
- await waitFor(() => expect(field).toHaveProperty('readOnly', false))
- attach.focus()
- expect(fireEvent.keyDown(attach, { key: 'v', ctrlKey: true })).toBe(true)
- expect(document.activeElement).toBe(field)
- const data = new DataTransfer()
- data.setData('text/plain', 'pasted text')
- data.items.add(new File(['png'], 'pasted.png', { type: 'image/png' }))
- fireEvent.paste(field, { clipboardData: data })
- await waitFor(() =>
- expect(screen.getAllByRole('button', { name: 'Remove attachment' })).toHaveLength(3)
- )
- expect(field).toHaveProperty('value', expect.stringContaining('pasted text'))
- attach.focus()
- await act(
- async () =>
- void (await handleAppMenuPasteRequest({
- readClipboardText: ui.readClipboardText,
- performNativePaste: ui.performNativePaste
- }))
- )
- expect(ui.performNativePaste).toHaveBeenCalledExactlyOnceWith({ mode: 'paste' })
- expect(ui.readClipboardText).not.toHaveBeenCalled()
- expect(composer.pasteFromClipboard).not.toHaveBeenCalled()
- expect(composer.handlePasteEvent).not.toHaveBeenCalled()
- expect(composer.focus).not.toHaveBeenCalled()
- } finally {
- vi.restoreAllMocks()
- vi.unstubAllGlobals()
- }
- })
-
- it('keeps image intake text-neutral, saves suffixes and hands off only surviving changes', async () => {
- writeSpy.mockClear()
- render()
- const field = await screen.findByRole('textbox', { name: 'Edit message' })
- await waitFor(() => expect(field.getAttribute('readonly')).toBeNull())
- fireEvent.click(screen.getAllByRole('button', { name: 'Remove attachment' })[0]!)
- // The field shows what the agent will read: the removed image's marker goes, #2 becomes #1.
- expect(field).toHaveProperty('value', 'replace WORD please and [Image #1]')
- const data = new DataTransfer()
- data.setData('text/plain', 'X')
- data.items.add(new File(['png'], 'new.png', { type: 'image/png' }))
- if (!(field instanceof HTMLTextAreaElement)) {
- throw new Error('Expected the edit textarea')
- }
- field.focus()
- field.setSelectionRange(8, 12)
- act(() => {
- const [first, second] = reserve(chips, ['/tmp/first.png', '/tmp/second.png'])
- chips.resolve(second!.chipId, second!.path)
- chips.resolve(first!.chipId, first!.path)
- })
- expect(field.value).toBe('replace WORD please and [Image #1]')
- expect([field.selectionStart, field.selectionEnd]).toEqual([8, 12])
- act(() => {
- field.dispatchEvent(new ClipboardEvent('paste', { clipboardData: data, bubbles: true }))
- })
- await waitFor(() => expect(field.value).toBe('replace X please and [Image #1]'))
- await waitFor(() =>
- expect(screen.getByRole('button', { name: 'Save' })).toHaveProperty('disabled', false)
- )
- fireEvent.change(field, { target: { value: 'abc def' } })
- field.setSelectionRange(4, 4)
- act(() => {
- const [file, image] = reserve(chips, ['/repo/notes.txt', '/tmp/file.png'])
- chips.resolve(image!.chipId, image!.path)
- chips.attachReferences([{ id: file!.chipId, path: file!.path }])
- })
- fireEvent.click(screen.getAllByRole('button', { name: 'Remove attachment' })[3]!)
- expect(field.value).toBe('abc @/repo/notes.txt def')
- fireEvent.click(screen.getByRole('button', { name: 'Save' }))
- await waitFor(() => expect(writeSpy).toHaveBeenCalledOnce())
- expect(savedParams()).toMatchObject({
- text: 'abc @/repo/notes.txt def [Image #2] [Image #3] [Image #4] ',
- images: [
- { type: 'image-ref', path: '/host/kept.png' },
- { type: 'image-ref', path: '/tmp/first.png' },
- { type: 'image-ref', path: '/tmp/second.png' },
- { type: 'image-ref', path: '/tmp/file.png' }
- ]
- })
- const edit: QueuedEditImageState = {
- draftKey: 'r6-handoff',
- body: card.body,
- text: ' original wording\n[Image #1] \n',
- ...queuedEditImageFields(
- card.body,
- () => edit,
- () => true,
- () => {}
- )
- }
- edit.body = { ...card.body, blocks: [{ type: 'text', text: edit.text }] }
- edit.kept = []
- const original = edit.text
- for (const exit of ['pending', 'drop', 'remove'] as const) {
- const pending = edit.intake.begin()!
- if (exit === 'remove') {
- edit.intake.resolve(pending, '/tmp/new.png')
- }
- if (exit !== 'pending') {
- edit.intake[exit](pending)
- }
- expect(edit.text).toBe(original)
- expect(handOffQueuedEdit(edit)).toBe(false)
- expect(readNativeChatDraftCache(edit.draftKey)).toBe('')
- edit.intake.drop(pending)
- expect(queuedEditDirty(edit.body, edit)).toBe(false)
- }
- edit.intake.append(['/tmp/new.png'])
- const moved = edit.added[0]!
- expect(queuedEditInput(edit.body, edit, true)).toEqual(queuedEditInput(edit.body, edit, true))
- expect(edit.text).toBe(original)
- expect(handOffQueuedEdit(edit)).toBe(true)
- expect(readNativeChatAttachmentCache(edit.draftKey)).toEqual([
- { id: moved.id, path: moved.path }
- ])
- expect(readNativeChatDraftCache(edit.draftKey)).toBe(`${imageReferenceToken(moved.id)} `)
- edit.draftKey += '-typed'
- appendNativeChatAttachmentCache(edit.draftKey, [{ id: 'destination', path: '/tmp/dest.png' }])
- edit.kept = [{ id: 'kept', block: { type: 'image-ref', path: '/host/kept.png' } }]
- edit.text = 'typed [Image #1] not [Image #2]'
- expect(handOffQueuedEdit(edit)).toBe(true)
- expect(readNativeChatDraftCache(edit.draftKey)).toBe(
- `typed not [Image #2] ${imageReferenceToken(moved.id)} `
- )
- expect(readNativeChatAttachmentCache(edit.draftKey).map(({ id }) => id)).toEqual([
- 'destination',
- moved.id
- ])
- })
-
- it('never saves an image change as text alone once the host stops reading as taking images', async () => {
- writeSpy.mockClear()
- const { rerender } = render()
- const field = await screen.findByRole('textbox', { name: 'Edit message' })
- await waitFor(() => expect(field.getAttribute('readonly')).toBeNull())
- fireEvent.click(screen.getAllByRole('button', { name: 'Remove attachment' })[0]!)
- rerender()
- const save = screen.getByRole('button', { name: 'Save' })
- expect(save).toHaveProperty('disabled', true)
- fireEvent.keyDown(field, { key: 'Enter' })
- expect(writeSpy).not.toHaveBeenCalled()
- })
-
- it('against a host that edits text only, shows the count and saves text alone', async () => {
- writeSpy.mockClear()
- render()
- const field = await screen.findByRole('textbox', { name: 'Edit message' })
- await waitFor(() => expect(field.getAttribute('readonly')).toBeNull())
- expect(screen.getByText('1 image')).toBeTruthy()
- expect(screen.queryByRole('button', { name: 'Remove attachment' })).toBeNull()
- expect(screen.queryByRole('button', { name: 'Attach file' })).toBeNull()
- fireEvent.change(field, { target: { value: 'see that' } })
- fireEvent.click(screen.getByRole('button', { name: 'Save' }))
- await waitFor(() => expect(writeSpy).toHaveBeenCalledOnce())
- expect(savedParams()).toEqual({
- messageId: 'card',
- expectedBodyFingerprint: expect.any(String),
- text: 'see that'
- })
- })
-})
diff --git a/src/renderer/src/components/native-chat/NativeChatQueuedMessageEditor.tsx b/src/renderer/src/components/native-chat/NativeChatQueuedMessageEditor.tsx
deleted file mode 100644
index 3eb86fb32fa8..000000000000
--- a/src/renderer/src/components/native-chat/NativeChatQueuedMessageEditor.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { useLayoutEffect, useRef, type ReactNode } from 'react'
-import { Pencil, Plus, X } from 'lucide-react'
-import { Textarea } from '@/components/ui/textarea'
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { translate } from '@/i18n/i18n'
-import { ButtonKeyHint } from '@/components/ButtonKeyHint'
-import { isMacPlatform } from './native-chat-shortcut'
-import { NativeChatImageAttachmentPreview } from './NativeChatImageAttachmentPreview'
-import { NativeChatPaneFileDropOverlay } from './NativeChatPaneFileDropSurface'
-import type { QueuedMessageInlineEditor } from './use-structured-agent-session-queued-edit'
-import {
- useNativeChatQueuedEditImageIntake,
- type QueuedEditAttachTarget
-} from './use-native-chat-queued-edit-image-intake'
-
-/** Edit inside the card so questions and approvals occupying the composer do not block queued-draft editing. */
-export function NativeChatQueuedMessageEditor({
- editor,
- sender,
- images,
- attachTo
-}: {
- editor: QueuedMessageInlineEditor
- /** The card's "From " line, kept beside the label. */
- sender?: ReactNode
- /** The card's image count, shown where the host edits text only and so keeps the images. */
- images?: ReactNode
- /** The chat this card's added files attach to, as its chat box attaches them. */
- attachTo?: QueuedEditAttachTarget
-}): React.JSX.Element {
- const field = useRef(null)
- const intake = useNativeChatQueuedEditImageIntake(editor, attachTo, field)
- const chips = editor.images?.chips ?? []
- const empty = editor.images?.empty === true
- useLayoutEffect(() => {
- if (editor.acquiring) {
- return
- }
- const textarea = field.current
- textarea?.focus({ preventScroll: true })
- const list = textarea?.closest('ul')
- const row = textarea?.closest('li')
- if (list && row) {
- const rowBounds = row.getBoundingClientRect()
- const listBounds = list.getBoundingClientRect()
- if (rowBounds.top < listBounds.top) {
- list.scrollTop += rowBounds.top - listBounds.top
- } else if (rowBounds.bottom > listBounds.bottom) {
- list.scrollTop += rowBounds.bottom - listBounds.bottom
- }
- }
- }, [editor.acquiring])
- return (
-
- {intake.isDragActive ?
: null}
-
-
-
- {translate('components.native-chat.queuedMessages.editingMessage', 'Editing message')}
-
- {sender ? (
- <>
-
·
-
{sender}
-
- ) : null}
-
{editor.images ? null : images}
-
-
- {chips.length > 0 ? (
-
- {chips.map((chip) => (
- editor.images?.intake.remove(id)}
- />
- ))}
-
- ) : null}
-