Genarrative/src/components/image-editor/EditorAgentConversationPanelView.test.tsx

/* @vitest-environment jsdom */

import {
  act,
  fireEvent,
  render,
  screen,
  waitFor,
  within,
} from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';

import { EditorAgentConversationPanelView } from './EditorAgentConversationPanelView';
import type { EditorAgentConversationClient } from './useEditorAgentConversation';

function createClient(): EditorAgentConversationClient {
  return {
    listConversations: vi.fn().mockResolvedValue([
      {
        conversationId: 'conversation-1',
        projectId: 'project-1',
        title: '角色参考',
        createdAt: '2026-07-03T00:00:00.000Z',
        updatedAt: '2026-07-03T00:00:00.000Z',
      },
    ]),
    createConversation: vi.fn().mockResolvedValue({
      conversationId: 'conversation-2',
      projectId: 'project-1',
      title: '新对话',
      messages: [],
      createdAt: '2026-07-03T00:01:00.000Z',
      updatedAt: '2026-07-03T00:01:00.000Z',
    }),
    getConversation: vi.fn().mockResolvedValue({
      conversationId: 'conversation-1',
      projectId: 'project-1',
      title: '角色参考',
      messages: [
        {
          id: 'assistant-old',
          role: 'assistant',
          kind: 'chat',
          text: '已经看到画布内容',
          attachments: [],
          generations: [],
          status: 'completed',
          createdAt: '2026-07-03T00:00:10.000Z',
        },
      ],
      createdAt: '2026-07-03T00:00:00.000Z',
      updatedAt: '2026-07-03T00:00:10.000Z',
    }),
    deleteConversation: vi.fn().mockResolvedValue({
      conversationId: 'conversation-1',
      projectId: 'project-1',
      title: '角色参考',
      messages: [],
      createdAt: '2026-07-03T00:00:00.000Z',
      updatedAt: '2026-07-03T00:00:00.000Z',
    }),
    streamMessage: vi
      .fn()
      .mockImplementation(async (_conversationId, _payload, options) => {
        options.onEvent?.({
          event: 'stage',
          data: { conversationId: _conversationId, stage: 'responding' },
        });
        options.onEvent?.({
          event: 'message_delta',
          data: {
            conversationId: _conversationId,
            messageId: 'assistant-stream',
            role: 'assistant',
            kind: 'chat',
            textDelta: '收到，我会参考这张图。',
          },
        });
        options.onEvent?.({
          event: 'done',
          data: { conversationId: _conversationId, title: null },
        });
      }),
  };
}

describe('EditorAgentConversationPanelView', () => {
  it('manages conversations, attachments and message sending inside the panel', async () => {
    const client = createClient();

    render(
      <EditorAgentConversationPanelView
        projectId="project-1"
        open
        onToggleOpen={vi.fn()}
        client={client}
        layers={[
          {
            id: 'layer-1',
            resourceId: 'resource-1',
            title: '角色图层',
            src: '/generated/role.png',
            x: 0,
            y: 0,
            width: 512,
            height: 512,
            originalWidth: 512,
            originalHeight: 512,
            zIndex: 1,
            sourceType: 'generated',
          },
          {
            id: 'layer-local-only',
            resourceId: '',
            title: '未入库图层',
            src: '/local-only.png',
            x: 0,
            y: 0,
            width: 256,
            height: 256,
            originalWidth: 256,
            originalHeight: 256,
            zIndex: 2,
            sourceType: 'uploaded',
          },
        ]}
        assets={[
          {
            id: 'asset-1',
            label: '素材库角色',
            src: '/assets/role.png',
            width: 512,
            height: 512,
            folderId: 'project',
            sourceKind: 'uploaded',
            sourceType: 'uploaded',
            persisted: true,
          },
        ]}
      />,
    );

    await waitFor(() => {
      expect(screen.getByText('已经看到画布内容')).toBeTruthy();
    });

    fireEvent.click(screen.getByRole('button', { name: '新建对话' }));
    await waitFor(() => {
      expect(client.createConversation).toHaveBeenCalledWith('project-1', {});
    });

    fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
    const attachmentDialog = screen.getByRole('dialog', {
      name: '选择图片附件',
    });
    expect(
      within(attachmentDialog).queryByRole('checkbox', {
        name: '选择画布图片 未入库图层',
      }),
    ).toBeNull();
    fireEvent.click(
      within(attachmentDialog).getByRole('checkbox', {
        name: '选择画布图片 角色图层',
      }),
    );
    fireEvent.click(
      within(attachmentDialog).getByRole('button', { name: '应用' }),
    );
    expect(screen.getByText('角色图层')).toBeTruthy();

    fireEvent.change(screen.getByLabelText('发送给画布 Agent'), {
      target: { value: '参考附件做像素风' },
    });
    fireEvent.click(screen.getByRole('button', { name: '发送' }));

    await waitFor(() => {
      expect(screen.getByText('收到，我会参考这张图。')).toBeTruthy();
    });
    expect(client.streamMessage).toHaveBeenCalledWith(
      'conversation-2',
      expect.objectContaining({
        text: '参考附件做像素风',
        attachments: [
          expect.objectContaining({
            source: 'canvas_resource',
            referenceId: 'resource-1',
          }),
        ],
      }),
      expect.any(Object),
    );
  });

  it('sends selected attachments even when the text input is empty', async () => {
    const client = createClient();

    render(
      <EditorAgentConversationPanelView
        projectId="project-1"
        open
        onToggleOpen={vi.fn()}
        client={client}
        layers={[
          {
            id: 'layer-1',
            resourceId: 'resource-1',
            title: '角色图层',
            src: '/generated/role.png',
            x: 0,
            y: 0,
            width: 512,
            height: 512,
            originalWidth: 512,
            originalHeight: 512,
            zIndex: 1,
            sourceType: 'generated',
          },
        ]}
      />,
    );

    await waitFor(() => {
      expect(screen.getByText('已经看到画布内容')).toBeTruthy();
    });

    fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
    const attachmentDialog = screen.getByRole('dialog', {
      name: '选择图片附件',
    });
    fireEvent.click(
      within(attachmentDialog).getByRole('checkbox', {
        name: '选择画布图片 角色图层',
      }),
    );
    fireEvent.click(
      within(attachmentDialog).getByRole('button', { name: '应用' }),
    );
    fireEvent.click(screen.getByRole('button', { name: '发送' }));

    await waitFor(() => {
      expect(client.streamMessage).toHaveBeenCalledWith(
        'conversation-1',
        expect.objectContaining({
          text: '',
          attachments: [
            expect.objectContaining({
              source: 'canvas_resource',
              referenceId: 'resource-1',
            }),
          ],
        }),
        expect.any(Object),
      );
    });
  });

  it('keeps streamed reply and generating state when the panel is collapsed and reopened', async () => {
    const client = createClient();
    let finishStream = () => {};
    vi.mocked(client.streamMessage).mockImplementation(
      async (conversationId, _payload, options) => {
        options.onEvent?.({
          event: 'message_delta',
          data: {
            conversationId,
            messageId: 'assistant-stream',
            role: 'assistant',
            kind: 'chat',
            textDelta: '我来生成图片。',
          },
        });
        options.onEvent?.({
          event: 'stage',
          data: { conversationId, stage: 'generating' },
        });
        options.onEvent?.({
          event: 'tool_started',
          data: {
            conversationId,
            messageId: 'assistant-stream',
            toolCallId: 'tool-call-generating',
            toolName: 'generate_image',
            taskId: 'task-generating',
            model: 'gpt-image-2',
          },
        });
        await new Promise<void>((resolve) => {
          finishStream = resolve;
        });
      },
    );

    const { rerender } = render(
      <EditorAgentConversationPanelView
        projectId="project-1"
        open
        onToggleOpen={vi.fn()}
        client={client}
      />,
    );

    await waitFor(() => {
      expect(screen.getByText('已经看到画布内容')).toBeTruthy();
    });

    fireEvent.change(screen.getByLabelText('发送给画布 Agent'), {
      target: { value: '生成一张图片' },
    });
    fireEvent.click(screen.getByRole('button', { name: '发送' }));

    await waitFor(() => {
      expect(screen.getByText('我来生成图片。')).toBeTruthy();
    });
    expect(screen.getByText('生成中')).toBeTruthy();
    expect(screen.getByRole('button', { name: '停止' })).toBeTruthy();

    rerender(
      <EditorAgentConversationPanelView
        projectId="project-1"
        open={false}
        onToggleOpen={vi.fn()}
        client={client}
      />,
    );
    expect(screen.getByRole('button', { name: '打开画布 Agent' })).toBeTruthy();

    rerender(
      <EditorAgentConversationPanelView
        projectId="project-1"
        open
        onToggleOpen={vi.fn()}
        client={client}
      />,
    );

    expect(screen.getByText('我来生成图片。')).toBeTruthy();
    expect(screen.getByText('生成中')).toBeTruthy();
    expect(screen.getByRole('button', { name: '停止' })).toBeTruthy();

    await act(async () => {
      finishStream();
    });
  });

  it('keeps wheel scrolling inside the message history and input', async () => {
    const client = createClient();
    const parentWheel = vi.fn();

    render(
      <div onWheel={parentWheel}>
        <EditorAgentConversationPanelView
          projectId="project-1"
          open
          onToggleOpen={vi.fn()}
          client={client}
        />
      </div>,
    );

    await waitFor(() => {
      expect(screen.getByText('已经看到画布内容')).toBeTruthy();
    });

    const messageWheel = new WheelEvent('wheel', {
      bubbles: true,
      cancelable: true,
      deltaY: 120,
    });
    fireEvent(
      screen.getByRole('log', { name: '画布 Agent 消息流' }),
      messageWheel,
    );
    expect(parentWheel).not.toHaveBeenCalled();
    expect(messageWheel.defaultPrevented).toBe(false);

    const inputWheel = new WheelEvent('wheel', {
      bubbles: true,
      cancelable: true,
      deltaY: 120,
    });
    fireEvent(screen.getByLabelText('发送给画布 Agent'), inputWheel);
    expect(parentWheel).not.toHaveBeenCalled();
    expect(inputWheel.defaultPrevented).toBe(false);
  });

  it('confirms conversation deletion from an independent dialog', async () => {
    const client = createClient();
    render(
      <EditorAgentConversationPanelView
        projectId="project-1"
        open
        onToggleOpen={vi.fn()}
        client={client}
      />,
    );

    await waitFor(() => {
      expect(screen.getByText('已经看到画布内容')).toBeTruthy();
    });

    fireEvent.click(screen.getByRole('button', { name: '删除当前对话' }));
    const confirmDialog = screen.getByRole('dialog', { name: '删除对话' });
    fireEvent.click(
      within(confirmDialog).getByRole('button', { name: '确认删除' }),
    );

    await waitFor(() => {
      expect(client.deleteConversation).toHaveBeenCalledWith('conversation-1');
    });
  });
});