orca/mobile/src/session/MobileNativeChatMessage.android.test.ts

import { createElement, type ReactNode } from 'react'
import { act, create, type ReactTestInstance, type ReactTestRenderer } from 'react-test-renderer'
import { afterEach, describe, expect, it, vi } from 'vitest'
import type { NativeChatMessage } from '../../../src/shared/native-chat-types'

// Why a separate file: the sibling suite runs as iOS, where the row has no long press at all.
// This one runs as Android and pins the wiring from the bubble's long press to the actions sheet.
vi.mock('react-native', async () => {
  const React = await import('react')
  const Text = ({ children, ...props }: { children?: ReactNode }): ReactNode =>
    React.createElement('Text', props, children)
  return {
    ActivityIndicator: 'ActivityIndicator',
    Animated: {
      Text,
      Value: class {
        setValue(): void {}
      },
      loop: (animation: unknown) => animation,
      sequence: () => ({ start: vi.fn(), stop: vi.fn() }),
      timing: () => ({ start: vi.fn(), stop: vi.fn() })
    },
    Image: 'Image',
    Platform: { OS: 'android' },
    Pressable: 'Pressable',
    ScrollView: ({ children, ...props }: { children?: ReactNode }) =>
      React.createElement('ScrollView', props, children),
    Text,
    View: ({ children, ...props }: { children?: ReactNode }) =>
      React.createElement('View', props, children),
    StyleSheet: { create: (styles: unknown) => styles, hairlineWidth: 1 }
  }
})
vi.mock('expo-clipboard', () => ({ setStringAsync: vi.fn() }))
vi.mock('lucide-react-native', () => ({
  ArrowUp: 'ArrowUp',
  Bot: 'Bot',
  Brain: 'Brain',
  Check: 'Check',
  ChevronDown: 'ChevronDown',
  ChevronRight: 'ChevronRight',
  Copy: 'Copy',
  Eye: 'Eye',
  FileMinus2: 'FileMinus2',
  FilePen: 'FilePen',
  FilePlus2: 'FilePlus2',
  Folder: 'Folder',
  Globe: 'Globe',
  ListChecks: 'ListChecks',
  MessageSquareMore: 'MessageSquareMore',
  Pencil: 'Pencil',
  Plug: 'Plug',
  Search: 'Search',
  SquareChevronRight: 'SquareChevronRight',
  SquareTerminal: 'SquareTerminal',
  Wrench: 'Wrench'
}))
vi.mock('../components/MobileMarkdown', () => ({ MobileMarkdown: 'MobileMarkdown' }))
vi.mock('./MobileNativeChatMessageActionsSheet', () => ({
  MobileNativeChatMessageActionsSheet: 'MessageActionsSheet'
}))
vi.mock('./MobileNativeChatImageViewer', () => ({ MobileNativeChatImageViewer: 'ImageViewer' }))

import { MobileNativeChatMessage } from './MobileNativeChatMessage'
import { MobileNativeChatRowOverlaysHost } from './MobileNativeChatRowOverlaysHost'

/** Rows inside the chat's overlay host, keyed by id as the list keys them. */
const inChat = (...rows: NativeChatMessage[]) =>
  createElement(
    MobileNativeChatRowOverlaysHost,
    { conversation: { surfaceId: 'chat', sessionId: null } },
    rows.map((row) => createElement(MobileNativeChatMessage, { key: row.id, message: row }))
  )

const message: NativeChatMessage = {
  id: 'a1',
  role: 'assistant',
  blocks: [{ type: 'text', text: 'Read https://example.com then reply.' }],
  timestamp: null,
  source: 'transcript'
}

describe('MobileNativeChatMessage on Android', () => {
  let renderer: ReactTestRenderer | null = null

  afterEach(() => {
    act(() => renderer?.unmount())
    renderer = null
  })

  function byType(type: string): ReactTestInstance[] {
    return renderer!.root.findAll((node) => String(node.type) === type)
  }

  it('opens the actions sheet from a long press on the bubble, and closes it again', () => {
    act(() => {
      renderer = create(inChat(message))
    })
    expect(byType('MessageActionsSheet')).toHaveLength(0)
    expect(
      byType('Pressable').filter((node) => node.props.accessibilityLabel === 'Copy message')
    ).toHaveLength(1)

    const [bubble] = byType('Pressable')
    expect(typeof bubble!.props.onLongPress).toBe('function')
    // The markdown gets the same handler, so a link span or image under the finger opens the sheet.
    const [markdown] = byType('MobileMarkdown')
    expect(markdown!.props.onLongPress).toBe(bubble!.props.onLongPress)
    expect(markdown!.props.rangeSelectable).toBe(true)

    act(() => bubble!.props.onLongPress())
    const [sheet] = byType('MessageActionsSheet')
    expect(sheet!.props.message).toBe(message)

    act(() => sheet!.props.onClose())
    expect(byType('MessageActionsSheet')).toHaveLength(0)
  })

  it('opens the actions sheet from a long press on an attached picture, not the viewer', () => {
    act(() => {
      renderer = create(
        inChat({
          ...message,
          role: 'user',
          blocks: [
            { type: 'text', text: 'Here is the screen.' },
            { type: 'image-ref', url: 'file:///a.jpg', alt: 'a photo' }
          ]
        })
      )
    })
    const [bubble] = byType('Pressable')
    const picture = renderer!.root.findByProps({ accessibilityRole: 'imagebutton' })
    expect(picture.props.onLongPress).toBe(bubble!.props.onLongPress)
    act(() => picture.props.onLongPress())
    expect(byType('MessageActionsSheet')).toHaveLength(1)
  })

  it('disables inline selection for host notices too', () => {
    act(() => {
      renderer = create(
        inChat({
          ...message,
          role: 'system',
          blocks: [{ type: 'text', text: 'fallback', presentation: 'history-item-too-large' }]
        })
      )
    })
    const texts = byType('Text').filter((node) => node.props.selectable !== undefined)
    expect(texts).toHaveLength(1)
    expect(texts[0]!.props.selectable).toBe(false)
    act(() => byType('Pressable')[0]!.props.onLongPress())
    expect(byType('MessageActionsSheet')).toHaveLength(1)
  })

  it("opens the actions sheet from a long press on a plan's link", () => {
    act(() => {
      renderer = create(
        inChat({
          ...message,
          role: 'system',
          blocks: [
            {
              type: 'text',
              text: '1. Read [the guide](https://example.com)',
              presentation: 'plan-document'
            }
          ]
        })
      )
    })
    const [bubble] = byType('Pressable')
    const [plan] = byType('MobileMarkdown')
    expect(plan!.props.onLongPress).toBe(bubble!.props.onLongPress)
    act(() => plan!.props.onLongPress())
    expect(byType('MessageActionsSheet')).toHaveLength(1)
  })

  it('opens the actions sheet from a long press on an expanded reasoning row, not on its headline', () => {
    const reasoning: NativeChatMessage = {
      ...message,
      id: 'r1',
      role: 'reasoning',
      blocks: [{ type: 'text', text: 'Weighing two approaches' }],
      timestamp: 1_000,
      state: 'completed',
      completedAt: 4_000
    }
    act(() => {
      renderer = create(inChat(reasoning))
    })
    const [toggle] = byType('Pressable')
    // A long press on the headline stays a plain toggle tap.
    expect(toggle!.props.onLongPress).toBeUndefined()
    act(() => toggle!.props.onPress())

    const body = byType('Pressable').find((node) => node.props.onLongPress !== undefined)
    expect(typeof body?.props.onLongPress).toBe('function')
    const [markdown] = byType('MobileMarkdown')
    expect(markdown!.props.onLongPress).toBe(body!.props.onLongPress)

    act(() => body!.props.onLongPress())
    const [sheet] = byType('MessageActionsSheet')
    expect(sheet!.props.message).toBe(reasoning)
    act(() => sheet!.props.onClose())
    expect(byType('MessageActionsSheet')).toHaveLength(0)
  })

  it('keeps the actions sheet open while the transcript row replaces the sent message under it', () => {
    // A sent message is drawn as its echo until the transcript catches up with a row of its own id.
    const echo: NativeChatMessage = {
      ...message,
      id: 'pending-1',
      role: 'user',
      blocks: [{ type: 'text', text: 'Follow-up for the sheet test.' }]
    }
    act(() => {
      renderer = create(inChat(message, echo))
    })
    const bodies = byType('Pressable').filter((node) => node.props.onLongPress !== undefined)
    act(() => bodies.at(-1)!.props.onLongPress())
    expect(byType('MessageActionsSheet').map((sheet) => sheet.props.message.id)).toEqual([
      'pending-1'
    ])

    act(() => renderer!.update(inChat(message, { ...echo, id: 'transcript-7' })))
    expect(byType('MessageActionsSheet').map((sheet) => sheet.props.message.id)).toEqual([
      'pending-1'
    ])
  })

  it('renders the user bubble without inline selection', () => {
    act(() => {
      renderer = create(inChat({ ...message, id: 'u1', role: 'user' }))
    })
    // Markdown owns the bubble's text; on Android a long press on a link span opens the sheet.
    const [markdown, ...others] = byType('MobileMarkdown')
    expect(others).toHaveLength(0)
    expect(markdown?.props).toMatchObject({ rangeSelectable: true, tone: 'onBright' })
    expect(markdown?.props.onLongPress).toEqual(expect.any(Function))
    expect(
      byType('Pressable').filter((node) => node.props.accessibilityLabel === 'Copy message')
    ).toHaveLength(1)
    act(() => byType('Pressable')[0]!.props.onLongPress())
    expect(byType('MessageActionsSheet')).toHaveLength(1)
  })
})