experimental-a2 0.18.0 → 0.19.0

package/examples/playground/app/a0/chat.test.tsx

@@ -0,0 +1,504 @@
+// @vitest-environment jsdom
+import {
+  cleanup,
+  createEvent,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
+import type { ReactElement } from 'react'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import type { AppMessage } from './model'
+import { defaultModelChoice } from './model'
+
+const push = vi.fn<(...events: unknown[]) => Promise<unknown[]>>()
+let state: Record<string, unknown>
+const appId = '6f1c2a54-9a3e-4c51-8f0e-2b7d8c9e1a00'
+const upload =
+  vi.fn<
+    (
+      pathname: string,
+      file: File,
+      options: object,
+    ) => Promise<Record<string, string>>
+  >()
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ replace: vi.fn<(href: string) => void>() }),
+  useSearchParams: () => new URLSearchParams(),
+}))
+vi.mock('./session', () => ({ useSession: () => ({ state, push }) }))
+vi.mock('@vercel/blob/client', () => ({ upload }))
+
+const { Chat } = await import('./chat')
+
+const user = (id: string, text: string): AppMessage => ({
+  id,
+  role: 'user',
+  parts: [{ type: 'text', text }],
+})
+
+const idle = () => ({
+  modelChoice: defaultModelChoice,
+  messages: [] as AppMessage[],
+  starting: false,
+  status: 'idle',
+  active: null,
+  inbox: { paused: false, items: [] as unknown[] },
+  error: null,
+})
+
+const turn = { turnId: 't1', phase: 'generating', input: {} }
+
+const generating = () => ({
+  ...idle(),
+  messages: [user('u1', 'Build a blog.')],
+  status: 'generating',
+  active: turn,
+})
+
+const chat = () =>
+  render(
+    <Chat appId={appId} harness="pi" onPrompt={() => {}} autoFocus={false} />,
+  )
+
+const write = (text: string): void => {
+  const box = screen.getByRole('textbox', { name: 'Message' })
+  fireEvent.change(box, { target: { value: text } })
+  fireEvent.keyDown(box, { key: 'Enter' })
+}
+
+const pushed = (): unknown[] => push.mock.calls.flat()
+
+const blob = (name: string): string =>
+  `https://store.public.blob.vercel-storage.com/a0/${appId}/${name}`
+
+beforeEach(() => {
+  push.mockReset().mockResolvedValue([])
+  // Blob stores each file under its path.
+  upload.mockReset().mockImplementation(async (pathname, file) => ({
+    url: blob(pathname.split('/').at(-1) ?? ''),
+    contentType: file.type,
+  }))
+  Object.assign(URL, {
+    createObjectURL: () => 'blob:thumbnail',
+    revokeObjectURL: () => {},
+  })
+  // jsdom lays nothing out, so the transcript has nothing to follow.
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe(): void {}
+      disconnect(): void {}
+    },
+  )
+})
+
+afterEach(() => {
+  cleanup()
+  vi.unstubAllGlobals()
+})
+
+it('sends a message between turns', () => {
+  state = idle()
+  chat()
+  expect(screen.queryByRole('button', { name: 'Send mode' })).toBeNull()
+  write('Build a blog.')
+  expect(pushed()).toContainEqual(
+    expect.objectContaining({
+      payload: expect.objectContaining({ action: 'send' }),
+    }),
+  )
+})
+
+it('steers the active turn by default, and queues behind it from the chevron', () => {
+  state = generating()
+  chat()
+  expect(screen.getByRole('button', { name: 'Steer' })).toBeTruthy()
+  write('Use a dark theme.')
+  expect(pushed()).toContainEqual(
+    expect.objectContaining({
+      payload: expect.objectContaining({
+        action: 'steer',
+        turnId: 't1',
+        message: expect.objectContaining({
+          parts: [{ type: 'text', text: 'Use a dark theme.' }],
+        }),
+      }),
+    }),
+  )
+
+  push.mockClear()
+  fireEvent.click(screen.getByRole('button', { name: 'Send mode' }))
+  expect(
+    screen
+      .getByRole('menuitemradio', { name: 'Steer' })
+      .getAttribute('aria-checked'),
+  ).toBe('true')
+  fireEvent.click(screen.getByRole('menuitemradio', { name: 'Queue' }))
+  expect(screen.getByRole('button', { name: 'Queue' })).toBeTruthy()
+  write('Then add an about page.')
+  expect(pushed()).toContainEqual(
+    expect.objectContaining({
+      payload: expect.objectContaining({ action: 'send' }),
+    }),
+  )
+})
+
+it('pauses, resumes, and stops the turn like a player', () => {
+  state = generating()
+  const { rerender } = chat()
+  fireEvent.click(screen.getByRole('button', { name: 'Pause' }))
+  fireEvent.click(screen.getByRole('button', { name: 'Stop' }))
+  expect(pushed()).toEqual([
+    expect.objectContaining({ payload: { action: 'pause', when: 'now' } }),
+    expect.objectContaining({ payload: { action: 'stop', turnId: 't1' } }),
+  ])
+
+  push.mockClear()
+  state = {
+    ...generating(),
+    status: 'paused',
+    active: { ...turn, phase: 'paused' },
+    inbox: { paused: true, items: [] },
+  }
+  rerender(
+    <Chat appId={appId} harness="pi" onPrompt={() => {}} autoFocus={false} />,
+  )
+  expect(screen.getByText('Paused')).toBeTruthy()
+  expect(screen.queryByText('Thinking')).toBeNull()
+  fireEvent.click(screen.getByRole('button', { name: 'Resume' }))
+  expect(pushed()).toEqual([
+    expect.objectContaining({ payload: { action: 'resume' } }),
+  ])
+})
+
+it('steers with a queued message, or removes it', () => {
+  state = {
+    ...generating(),
+    inbox: {
+      paused: false,
+      items: [{ id: 'q1', message: user('q1', 'Add tags.'), generate: true }],
+    },
+  }
+  chat()
+  const queued = screen.getByRole('list', { name: 'Queued messages' })
+  expect(queued.textContent).toContain('Add tags.')
+  fireEvent.click(screen.getByRole('button', { name: 'Steer with it now' }))
+  fireEvent.click(screen.getByRole('button', { name: 'Remove' }))
+  expect(pushed()).toEqual([
+    expect.objectContaining({
+      payload: { action: 'send-now', inputId: 'q1', turnId: 't1' },
+    }),
+    expect.objectContaining({ payload: { action: 'remove', inputId: 'q1' } }),
+  ])
+})
+
+it('shows what a tool call writes while it streams, folded once it ran', () => {
+  const writing = (part: Record<string, unknown>) => ({
+    ...generating(),
+    messages: [
+      user('u1', 'Build a blog.'),
+      { id: 'a1', role: 'assistant', parts: [part] },
+    ],
+  })
+  state = writing({
+    type: 'tool-write',
+    toolCallId: 'w1',
+    state: 'input-streaming',
+    input: { path: 'app/page.tsx', content: 'export default function' },
+  })
+  const { container, rerender } = chat()
+  const details = () => container.querySelector('.a0-tool details')
+  expect(details()?.hasAttribute('open')).toBe(true)
+  expect(container.querySelector('.a0-tool-text')?.textContent).toBe(
+    'export default function',
+  )
+
+  state = writing({
+    type: 'tool-write',
+    toolCallId: 'w1',
+    state: 'output-available',
+    input: {
+      path: 'app/page.tsx',
+      content: 'export default function Page() {}',
+    },
+    output: { content: [] },
+  })
+  rerender(
+    <Chat appId={appId} harness="pi" onPrompt={() => {}} autoFocus={false} />,
+  )
+  expect(details()?.hasAttribute('open')).toBe(false)
+
+  // A one-line command fits its step's line.
+  state = writing({
+    type: 'tool-bash',
+    toolCallId: 'b1',
+    state: 'input-available',
+    input: { command: 'ls' },
+  })
+  rerender(
+    <Chat appId={appId} harness="pi" onPrompt={() => {}} autoFocus={false} />,
+  )
+  expect(container.querySelector('.a0-tool')).toBeNull()
+  expect(screen.getByText('ls')).toBeTruthy()
+})
+
+const again = (rerender: (ui: ReactElement) => void): void =>
+  rerender(
+    <Chat appId={appId} harness="pi" onPrompt={() => {}} autoFocus={false} />,
+  )
+
+it('closes the send-mode menu from its chevron, and drops it when the turn ends', () => {
+  state = generating()
+  const { rerender } = chat()
+  const chevron = screen.getByRole('button', { name: 'Send mode' })
+  fireEvent.click(chevron)
+  // A press on the chevron is its own, not one outside the menu.
+  fireEvent.pointerDown(chevron)
+  expect(screen.getAllByRole('menuitemradio')).toHaveLength(2)
+  fireEvent.click(chevron)
+  expect(screen.queryByRole('menuitemradio')).toBeNull()
+
+  fireEvent.click(chevron)
+  state = idle()
+  again(rerender)
+  state = generating()
+  again(rerender)
+  expect(screen.queryByRole('menuitemradio')).toBeNull()
+})
+
+it('ends the pause with a stop, so the next message goes out', () => {
+  state = {
+    ...generating(),
+    status: 'paused',
+    active: { ...turn, phase: 'paused' },
+    inbox: { paused: true, items: [] },
+  }
+  chat()
+  fireEvent.click(screen.getByRole('button', { name: 'Stop' }))
+  expect(pushed()).toEqual([
+    expect.objectContaining({ payload: { action: 'stop', turnId: 't1' } }),
+    expect.objectContaining({ payload: { action: 'resume' } }),
+  ])
+})
+
+it('offers to steer with a queued message only while a turn runs', () => {
+  state = {
+    ...idle(),
+    starting: true,
+    inbox: {
+      paused: false,
+      items: [{ id: 'q1', message: user('q1', 'Add tags.'), generate: true }],
+    },
+  }
+  chat()
+  expect(screen.queryByRole('button', { name: 'Steer with it now' })).toBeNull()
+  expect(screen.getByRole('button', { name: 'Remove' })).toBeTruthy()
+})
+
+it('folds a call that waits on a paused turn, and shows edits as a diff', () => {
+  const step = (part: Record<string, unknown>, status = 'generating') => ({
+    ...generating(),
+    status,
+    messages: [
+      user('u1', 'Build a blog.'),
+      { id: 'a1', role: 'assistant', parts: [part] },
+    ],
+  })
+  const bash = {
+    type: 'tool-bash',
+    toolCallId: 'b1',
+    state: 'input-available',
+    input: { command: 'cat > a.txt <<EOF\nhi\nEOF' },
+  }
+  state = step(bash, 'paused')
+  const { container, rerender } = chat()
+  expect(
+    container.querySelector('.a0-tool details')?.hasAttribute('open'),
+  ).toBe(false)
+  expect(container.querySelector('.a0-tool .a0-spin')).toBeNull()
+
+  // Pi's older edit input: the edit's fields on the call itself.
+  state = step({
+    type: 'tool-edit',
+    toolCallId: 'e1',
+    state: 'input-streaming',
+    input: { path: 'a.txt', oldText: 'hi', newText: 'hello' },
+  })
+  again(rerender)
+  expect(container.querySelector('.a0-tool-text')?.textContent).toBe(
+    '- hi\n+ hello',
+  )
+
+  // Nothing written yet: the step's one line, with no empty box.
+  state = step({
+    type: 'tool-write',
+    toolCallId: 'w1',
+    state: 'input-streaming',
+    input: { path: 'a.txt', content: '' },
+  })
+  again(rerender)
+  expect(container.querySelector('.a0-tool')).toBeNull()
+})
+
+const dropOn = (target: Element, ...files: File[]): void => {
+  const dataTransfer = { files, types: ['Files'], dropEffect: 'none' }
+  fireEvent.dragEnter(target, { dataTransfer })
+  fireEvent.dragOver(target, { dataTransfer })
+  fireEvent.drop(target, { dataTransfer })
+}
+
+const shot = () => new File(['png'], 'shot.png', { type: 'image/png' })
+
+/** jsdom has no DragEvent, so the event carries where the files went itself. */
+const leave = (from: Element, to: Element | null): void => {
+  const event = createEvent.dragLeave(from)
+  Object.defineProperty(event, 'relatedTarget', { value: to })
+  fireEvent(from, event)
+}
+
+it('sends images dropped anywhere on the chat with the next message', async () => {
+  state = idle()
+  chat()
+  const transcript = screen.getByRole('list', { name: 'Conversation' })
+  fireEvent.dragEnter(transcript, {
+    dataTransfer: { files: [], types: ['Files'] },
+  })
+  expect(screen.getByText('Drop to attach')).toBeTruthy()
+  // Into the composer, still on the chat, then out of the window.
+  leave(transcript, screen.getByRole('textbox', { name: 'Message' }))
+  expect(screen.getByText('Drop to attach')).toBeTruthy()
+  leave(transcript, null)
+  expect(screen.queryByText('Drop to attach')).toBeNull()
+
+  dropOn(transcript, shot())
+  const attached = screen.getByRole('list', { name: 'Attachments' })
+  expect(attached.querySelector('[aria-label="Uploading"]')).toBeTruthy()
+  await waitFor(() =>
+    expect(attached.querySelector('[aria-label="Uploading"]')).toBeNull(),
+  )
+  expect(upload).toHaveBeenCalledWith(
+    `a0/${appId}/shot.png`,
+    expect.any(File),
+    expect.objectContaining({
+      access: 'public',
+      handleUploadUrl: '/a0/uploads',
+      clientPayload: appId,
+    }),
+  )
+
+  write('Make it look like this.')
+  expect(pushed()).toContainEqual(
+    expect.objectContaining({
+      payload: expect.objectContaining({
+        action: 'send',
+        message: expect.objectContaining({
+          parts: [
+            {
+              type: 'file',
+              mediaType: 'image/png',
+              filename: 'shot.png',
+              url: blob('shot.png'),
+            },
+            { type: 'text', text: 'Make it look like this.' },
+          ],
+        }),
+      }),
+    }),
+  )
+  expect(screen.queryByRole('list', { name: 'Attachments' })).toBeNull()
+})
+
+it("puts a file that isn't an image into the message as its link", async () => {
+  state = idle()
+  chat()
+  const box = screen.getByRole('textbox', {
+    name: 'Message',
+  }) as HTMLTextAreaElement
+  fireEvent.change(box, { target: { value: 'Use this copy.' } })
+  dropOn(box, new File(['%PDF'], 'copy.pdf', { type: 'application/pdf' }))
+  await waitFor(() =>
+    expect(box.value).toBe(`Use this copy.\ncopy.pdf: ${blob('copy.pdf')}`),
+  )
+  expect(screen.queryByRole('list', { name: 'Attachments' })).toBeNull()
+})
+
+it('shows a sent link as its file, and a sent image as itself', () => {
+  state = {
+    ...idle(),
+    messages: [
+      {
+        id: 'u1',
+        role: 'user',
+        parts: [
+          {
+            type: 'file',
+            mediaType: 'image/png',
+            filename: 'shot.png',
+            url: blob('shot.png'),
+          },
+          {
+            type: 'text',
+            text: `Use this copy.\ncopy.pdf: ${blob('copy.pdf')}`,
+          },
+        ],
+      },
+    ],
+  }
+  chat()
+  expect(screen.getByRole('img', { name: 'shot.png' })).toBeTruthy()
+  expect(
+    screen.getByRole('link', { name: 'copy.pdf' }).getAttribute('href'),
+  ).toBe(blob('copy.pdf'))
+})
+
+it('says which upload failed, and drops the file', async () => {
+  state = idle()
+  upload.mockRejectedValue(new Error('Vercel Blob: Failed to upload'))
+  chat()
+  dropOn(screen.getByRole('list', { name: 'Conversation' }), shot())
+  expect((await screen.findByRole('alert')).textContent).toBe(
+    "Couldn't upload shot.png: Vercel Blob: Failed to upload",
+  )
+  expect(screen.queryByRole('list', { name: 'Attachments' })).toBeNull()
+})
+
+it('attaches a pasted image instead of pasting it as text', async () => {
+  state = idle()
+  chat()
+  fireEvent.paste(screen.getByRole('textbox', { name: 'Message' }), {
+    clipboardData: { files: [shot()] },
+  })
+  expect(screen.getByRole('list', { name: 'Attachments' })).toBeTruthy()
+  await waitFor(() => expect(upload).toHaveBeenCalled())
+})
+
+/** Every attached file has finished uploading. */
+const uploaded = () =>
+  waitFor(() =>
+    expect(
+      screen
+        .getByRole('list', { name: 'Attachments' })
+        .querySelector('[aria-label="Uploading"]'),
+    ).toBeNull(),
+  )
+
+it('keeps the attachments of a send that failed, beside any attached since', async () => {
+  state = idle()
+  chat()
+  const transcript = screen.getByRole('list', { name: 'Conversation' })
+  dropOn(transcript, shot())
+  await uploaded()
+  let fail!: (cause: Error) => void
+  push.mockReturnValueOnce(new Promise((_, reject) => (fail = reject)))
+  write('Like this.')
+  dropOn(transcript, new File(['png'], 'more.png', { type: 'image/png' }))
+  await uploaded()
+  fail(new Error('offline'))
+  expect((await screen.findByRole('alert')).textContent).toBe('offline')
+  expect(
+    screen.getByRole('list', { name: 'Attachments' }).querySelectorAll('li'),
+  ).toHaveLength(2)
+})