Genarrative/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx

/* @vitest-environment jsdom */

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

import type { EditorAgentMessage } from '@/packages/shared/src/contracts';

import { MessageBubble } from './MessageBubble.tsx';

function renderMessage(message: EditorAgentMessage) {
  return render(
    <MessageBubble
      message={message}
      busyAction={null}
      onConfirmToolCall={vi.fn()}
      onCancelToolCall={vi.fn()}
    />,
  );
}

describe('MessageBubble', () => {
  it('shows prefixed system errors as red Agent errors without the wire prefix', () => {
    renderMessage({
      id: 2,
      role: 'system',
      text: 'ERROR planning failed',
      attachments: [],
      toolCall: null,
      createdAt: '2026-07-16T00:00:00Z',
    });

    const error = screen.getByLabelText('Agent错误');
    expect(error.textContent).toContain('planning failed');
    expect(error.textContent).not.toContain('ERROR');
    expect(error.firstElementChild?.classList.contains('bg-red-50')).toBe(true);
    expect(error.firstElementChild?.classList.contains('text-red-700')).toBe(
      true,
    );
  });

  it('continues to hide internal system messages without the error prefix', () => {
    const { container } = renderMessage({
      id: 3,
      role: 'system',
      text: 'internal attachment bookkeeping',
      attachments: [],
      toolCall: null,
      createdAt: '2026-07-16T00:00:00Z',
    });

    expect(container.childElementCount).toBe(0);
  });
});