MessageInput.test.tsx

// Import the package barrel first so it evaluates in its natural order (components
// then context). MessageComposer's send/update hooks import `useChannel` from this
// root barrel; importing a deep component path first would trigger a partial circular
// re-entry that leaves `useChannel` undefined under Vitest.
import '../../..';
import React from 'react';
import type {
  Channel as ChannelType,
  Command,
  CooldownTimerState,
  LinkPreview,
  LinkPreviewsManagerState,
  LocalAttachment,
  LocalMessage,
  SearchSourceState,
  StreamChat,
  TextComposerSuggestion,
  UserResponse,
} from 'stream-chat';
import { LinkPreviewStatus, SearchController } from 'stream-chat';
import {
  act,
  cleanup,
  fireEvent,
  render,
  type RenderResult,
  screen,
  waitFor,
} from '@testing-library/react';
import { axe } from '../../../../axe-helper';
import { nanoid } from 'nanoid';
import { fromPartial } from '@total-typescript/shoehorn';

import type { MessageComposerProps } from '../MessageComposer';
import { MessageComposer } from '../MessageComposer';
import { AriaLiveAnnouncerProvider, AriaLiveOutlet } from '../../Accessibility';
import { Channel } from '../../Channel/Channel';
import type { MessageActionsProps } from '../../MessageActions';
import { MessageActions } from '../../MessageActions';

import type {
  ChatContextValue,
  ComponentContextValue,
  MessageContextValue,
} from '../../../context';
import { DialogManagerProvider, MessageProvider, WithComponents } from '../../../context';
import { ChatProvider } from '../../../context/ChatContext';
import {
  dispatchMessageDeletedEvent,
  dispatchMessageUpdatedEvent,
  generateChannel,
  generateLocalAttachmentData,
  generateMember,
  generateMessage,
  generateScrapedDataAttachment,
  generateUser,
  initClientWithChannels,
} from '../../../mock-builders';
import { QuotedMessagePreview } from '../QuotedMessagePreview';
import type { ChannelProps } from '../../Channel';
import type { GenerateChannelOptions } from '../../../mock-builders/generator/channel';

const IMAGE_PREVIEW_TEST_ID = 'attachment-preview-media';
const FILE_PREVIEW_TEST_ID = 'attachment-preview-file';
const FILE_INPUT_TEST_ID = 'file-input';
const FILE_UPLOAD_RETRY_BTN_TEST_ID = 'file-preview-item-retry-button';
const SEND_BTN_TEST_ID = 'send-button';
const ATTACHMENT_PREVIEW_LIST_TEST_ID = 'attachment-preview-list';
const UNKNOWN_ATTACHMENT_PREVIEW_TEST_ID = 'attachment-preview-unsupported';

const cid = 'messaging:general';
const inputPlaceholder = 'Send a message';
const userId = 'userId';
const username = 'username';
const mentionId = 'mention-id';
const mentionName = 'mention-name';
const user = generateUser({ id: userId, name: username });
const mentionUser = generateUser({
  id: mentionId,
  name: mentionName,
});
const mainListMessage = generateMessage({ cid, user });
const threadMessage = generateMessage({
  parent_id: mainListMessage.id,
  type: 'reply',
  user,
});
const mockedChannelData = generateChannel(
  fromPartial<GenerateChannelOptions>({
    channel: {
      id: 'general',
      own_capabilities: [
        'notify-channel',
        'notify-group',
        'notify-here',
        'notify-role',
        'send-poll',
        'upload-file',
      ],
      type: 'messaging',
    },
    members: [generateMember({ user }), generateMember({ user: mentionUser })],
    messages: [mainListMessage],
    threads: [threadMessage] as unknown as GenerateChannelOptions['threads'],
  }),
);

const defaultChatContext = fromPartial<ChatContextValue>({
  channelsQueryState: { queryInProgress: 'uninitialized' },
  getAppSettings: vi.fn(),
  latestMessageDatesByChannels: {},
  searchController: new SearchController(),
});

const cooldown = 30;
const filename = 'some.txt';
const fileUploadUrl = 'http://www.getstream.io'; // real url, because ImageAttachmentPreview will try to load the image

const getImage = () => new File(['SectionContent'], filename, { type: 'image/png' });
const getFile = (name = filename): File =>
  new File(['SectionContent'], name, { type: 'text/plain' });

// Polyfill DOMRect for jsdom
if (typeof globalThis.DOMRect === 'undefined') {
  // @ts-expect-error -- partial DOMRect polyfill for jsdom
  globalThis.DOMRect = class DOMRect {
    x: number;
    y: number;
    width: number;
    height: number;
    top: number;
    right: number;
    bottom: number;
    left: number;
    constructor(x = 0, y = 0, width = 0, height = 0) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.top = y;
      this.right = x + width;
      this.bottom = y + height;
      this.left = x;
    }
    toJSON() {
      return JSON.stringify(this);
    }
  };
}

// Patch getComputedStyle to return an iterable CSSStyleDeclaration (jsdom lacks Symbol.iterator)
const origGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = function (element: Element, pseudoElt?: string | null) {
  // jsdom does not implement pseudo-element computed styles.
  const style = pseudoElt
    ? origGetComputedStyle.call(this, element)
    : origGetComputedStyle.call(this, element, pseudoElt);
  if (!style[Symbol.iterator]) {
    style[Symbol.iterator] = function* () {
      for (let i = 0; i < this.length; i++) {
        yield this[i];
      }
    };
  }
  return style;
};

const sendMessageMock = vi.fn();
const mockAddNotification = vi.fn();

vi.mock('../../Channel/utils', async (importOriginal) => ({
  ...(await importOriginal<typeof import('../../Channel/utils')>()),
  makeAddNotifications: () => mockAddNotification,
}));

const defaultMessageContextValue = fromPartial<MessageContextValue>({
  getMessageActions: () => ['delete', 'edit', 'quote'],
  handleDelete: () => {},
  handleFlag: () => {},
  handleMute: () => {},
  handleOpenThread: () => {},
  handlePin: () => {},
  isMyMessage: () => true,
  message: mainListMessage,
});

function dropFile(file: File, formElement: Element) {
  fireEvent.drop(formElement, {
    dataTransfer: {
      files: [file],
      types: ['Files'],
    },
  });
}

const initQuotedMessagePreview = async (message: { text?: string }) => {
  await waitFor(() => expect(screen.queryByText(message.text)).not.toBeInTheDocument());

  // Open the message actions dropdown
  const actionsButton = await screen.findByTestId('message-actions-toggle-button');
  await act(() => {
    fireEvent.click(actionsButton);
  });

  // Click the Quote button in the dropdown
  const quoteButton = await screen.findByText(/^Quote Reply$/i);
  await waitFor(() => expect(quoteButton).toBeInTheDocument());

  act(() => {
    fireEvent.click(quoteButton);
  });
};

const quotedMessagePreviewIsDisplayedCorrectly = async (message: { text?: string }) => {
  await waitFor(() =>
    expect(screen.queryByTestId('quoted-message-preview')).toBeInTheDocument(),
  );
  await waitFor(() => expect(screen.getByText(message.text)).toBeInTheDocument());
};

const quotedMessagePreviewIsNotDisplayed = (message: { text?: string }) => {
  expect(screen.queryByText(/reply to message/i)).not.toBeInTheDocument();
  expect(screen.queryByText(message.text)).not.toBeInTheDocument();
};

const renderComponent = async ({
  channelData = [],
  channelProps = {},
  chatContextOverrides = {},
  components = {},
  customChannel,
  customClient,
  customUser,
  messageActionsProps = {},
  messageContextOverrides = {},
  messageInputProps = {},
}: {
  channelData?: GenerateChannelOptions | GenerateChannelOptions[];
  channelProps?: Partial<ChannelProps>;
  chatContextOverrides?: Partial<ChatContextValue>;
  components?: Partial<ComponentContextValue> & Record<string, unknown>;
  customChannel?: ChannelType;
  customClient?: StreamChat;
  customUser?: UserResponse;
  messageActionsProps?: Partial<MessageActionsProps>;
  messageContextOverrides?: Partial<MessageContextValue>;
  messageInputProps?: Partial<MessageComposerProps>;
  [key: string]: unknown;
} = {}) => {
  let channel = customChannel;
  let client = customClient;
  if (!(channel || client)) {
    const result = await initClientWithChannels({
      channelsData: [{ ...mockedChannelData, ...channelData }],
      customUser: customUser || user,
    });
    channel = result.channels[0];
    client = result.client;
  }
  let renderResult: RenderResult;

  await act(() => {
    renderResult = render(
      <WithComponents overrides={components}>
        <ChatProvider
          value={fromPartial<ChatContextValue>({
            ...defaultChatContext,
            channel,
            client,
            ...chatContextOverrides,
          })}
        >
          <AriaLiveAnnouncerProvider>
            {/* Mirrors what the <Chat> component provides; this harness uses raw ChatProvider. */}
            <AriaLiveOutlet />
            <DialogManagerProvider id='message-input-test-dialog-manager'>
              <Channel
                channel={channel}
                doSendMessageRequest={sendMessageMock}
                {...channelProps}
              >
                <MessageProvider
                  value={fromPartial<MessageContextValue>({
                    ...defaultMessageContextValue,
                    ...messageContextOverrides,
                  })}
                >
                  <MessageActions
                    disableBaseMessageActionSetFilter
                    {...messageActionsProps}
                  />
                </MessageProvider>
                <MessageComposer {...messageInputProps} />
              </Channel>
            </DialogManagerProvider>
          </AriaLiveAnnouncerProvider>
        </ChatProvider>
      </WithComponents>,
    );
  });

  const submit = async () => {
    const submitButton = renderResult.findByTestId('send-button');
    fireEvent.click(await submitButton);
  };

  return { channel, client, submit, ...renderResult };
};

const tearDown = () => {
  cleanup();
  vi.clearAllMocks();
};

function axeNoViolations(container: Element) {
  return async () => {
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  };
}

const setup = async ({ channelData }: { channelData?: GenerateChannelOptions } = {}) => {
  const {
    channels: [customChannel],
    client: customClient,
  } = await initClientWithChannels({
    channelsData: [channelData ?? mockedChannelData],
    customUser: user,
  });
  const sendImageSpy = vi.spyOn(customChannel, 'uploadImage').mockResolvedValueOnce(
    fromPartial<Awaited<ReturnType<ChannelType['uploadImage']>>>({
      file: fileUploadUrl,
    }),
  );
  const sendFileSpy = vi.spyOn(customChannel, 'uploadFile').mockResolvedValueOnce(
    fromPartial<Awaited<ReturnType<ChannelType['uploadFile']>>>({
      file: fileUploadUrl,
    }),
  );
  customChannel.initialized = true;
  customClient.activeChannels[customChannel.cid] = customChannel;
  return { customChannel, customClient, sendFileSpy, sendImageSpy };
};

const setupUploadRejected = async (error: unknown) => {
  const {
    channels: [customChannel],
    client: customClient,
  } = await initClientWithChannels({
    channelsData: [mockedChannelData],
    customUser: user,
  });
  const sendImageSpy = vi
    .spyOn(customChannel, 'uploadImage')
    .mockRejectedValueOnce(error);
  const sendFileSpy = vi.spyOn(customChannel, 'uploadFile').mockRejectedValueOnce(error);
  customClient.activeChannels[customChannel.cid] = customChannel;
  return { customChannel, customClient, sendFileSpy, sendImageSpy };
};

/** `channel.uploadImage` / `channel.uploadFile` take `({ file }, requestOptions)`. */
type UploadSpy = {
  mock: {
    calls: [unknown, ...unknown[]][];
  };
};

const expectChannelUploadCall = (spy: UploadSpy, expectedFile: File) => {
  expect(spy.mock.calls.length).toBeGreaterThan(0);
  const callArgs = spy.mock.calls[0];
  expect(callArgs[0]).toEqual({ file: expectedFile });
  expect(callArgs[callArgs.length - 1]).toEqual(
    expect.objectContaining({ onUploadProgress: expect.any(Function) }),
  );
};

const renderWithActiveCooldown = async ({
  messageInputProps = {},
}: {
  messageInputProps?: Partial<MessageComposerProps>;
} = {}) => {
  const {
    channels: [channel],
    client,
  } = await initClientWithChannels({
    channelsData: [{ channel: { cooldown } }],
    customUser: user,
  });

  // Set cooldown active via the channel's cooldownTimer state
  channel.cooldownTimer.state.next(
    fromPartial<CooldownTimerState>({ cooldownRemaining: cooldown }),
  );

  await renderComponent({
    customChannel: channel,
    customClient: client,
    messageInputProps,
  });
  return { channel };
};

describe(`MessageInputFlat`, () => {
  afterEach(tearDown);

  it('should render custom EmojiPicker', async () => {
    const CustomEmojiPicker = () => <div data-testid='custom-emoji-picker' />;

    await renderComponent({ components: { EmojiPicker: CustomEmojiPicker } });

    await waitFor(() => {
      const c = screen.getByTestId('custom-emoji-picker');
      expect(c).toBeInTheDocument();
    });
  });

  it('should contain placeholder text if no default message text provided', async () => {
    await renderComponent();
    await waitFor(() => {
      const textarea = screen.getByPlaceholderText(inputPlaceholder);
      expect(textarea).toBeInTheDocument();
      expect((textarea as HTMLTextAreaElement).value).toBe('');
    });
  });

  it('should force single-line placeholder styling while input is empty', async () => {
    await renderComponent();

    const textarea = await screen.findByPlaceholderText(inputPlaceholder);

    expect(textarea.style.whiteSpace).toBe('nowrap');
    expect(textarea.style.overflow).toBe('hidden');
    expect(textarea.style.textOverflow).toBe('ellipsis');
  });

  it('should remove empty-state single-line styling after user types', async () => {
    await renderComponent();

    const textarea = await screen.findByPlaceholderText(inputPlaceholder);

    fireEvent.change(textarea, {
      target: { value: 'hello world' },
    });

    await waitFor(() => {
      expect(textarea.style.whiteSpace).toBe('');
      expect(textarea.style.overflow).toBe('');
      expect(textarea.style.textOverflow).toBe('');
    });
  });

  it('should display default value', async () => {
    const defaultValue = nanoid();
    const { customChannel, customClient } = await setup();
    customChannel.messageComposer.textComposer.defaultValue = defaultValue;
    await renderComponent({
      customChannel,
      customClient,
    });
    await waitFor(() => {
      const textarea = screen.queryByDisplayValue(defaultValue);
      expect(textarea).toBeInTheDocument();
    });
  });

  it('should shift focus to the textarea if the `focus` prop is true', async () => {
    const { container } = await renderComponent({
      messageInputProps: {
        focus: true,
      },
    });
    await waitFor(() => {
      expect(screen.getByPlaceholderText(inputPlaceholder)).toHaveFocus();
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should render default file upload icon', async () => {
    const { container } = await renderComponent();
    const fileUploadIcon = await screen.findByTestId('invoke-attachment-selector-button');

    await waitFor(() => {
      expect(fileUploadIcon).toBeInTheDocument();
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should render custom AttachmentSelectorInitiationButtonContents', async () => {
    const AttachmentSelectorInitiationButtonContents = () => (
      <svg>
        <title>CustomAttachmentIcon</title>
      </svg>
    );

    const { container } = await renderComponent({
      components: { AttachmentSelectorInitiationButtonContents },
    });

    const customIcon = await screen.findByTitle('CustomAttachmentIcon');

    await waitFor(() => {
      expect(customIcon).toBeInTheDocument();
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('FileUploadIcon is no longer used (replaced by AttachmentSelectorInitiationButtonContents)', async () => {
    const FileUploadIcon = () => (
      <svg>
        <title>NotFileUploadIcon</title>
      </svg>
    );

    const AttachmentSelectorInitiationButtonContents = () => (
      <svg>
        <title>AttachmentSelectorInitiationButtonContents</title>
      </svg>
    );

    const { container } = await renderComponent({
      components: { AttachmentSelectorInitiationButtonContents, FileUploadIcon },
    });

    const fileUploadIcon = screen.queryByTitle('NotFileUploadIcon');
    const attachmentSelectorButtonIcon = screen.getByTitle(
      'AttachmentSelectorInitiationButtonContents',
    );
    await waitFor(() => {
      expect(fileUploadIcon).not.toBeInTheDocument();
      expect(attachmentSelectorButtonIcon).toBeInTheDocument();
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('are rendered in custom LinkPreviewList component', async () => {
    const LINK_PREVIEW_TEST_ID = 'link-preview-card';
    const customTestId = 'custom-link-preview';
    const CustomLinkPreviewList = () => <div data-testid={customTestId} />;
    const { customChannel, customClient } = await setup();
    await renderComponent({
      components: { LinkPreviewList: CustomLinkPreviewList },
      customChannel,
      customClient,
    });
    // Manually trigger link preview state so the previews section renders
    await act(() => {
      const scrapedData = generateScrapedDataAttachment(
        fromPartial<LinkPreview>({
          og_scrape_url: 'http://getstream.io',
          status: LinkPreviewStatus.LOADED,
          title: 'http://getstream.io',
        }),
      );
      customChannel.messageComposer.linkPreviewsManager.state.next(
        fromPartial<LinkPreviewsManagerState>({
          previews: new Map([[scrapedData.og_scrape_url, scrapedData]]),
        }),
      );
    });

    expect(screen.queryByTestId(customTestId)).toBeInTheDocument();
    expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
  });

  describe('Attachments', () => {
    it('Pasting images and files should result in uploading the files and showing previews', async () => {
      const { customChannel, customClient, sendFileSpy, sendImageSpy } = await setup();
      const { container } = await renderComponent({ customChannel, customClient });
      const file = getFile();
      const image = getImage();

      const clipboardEvent = new Event('paste', {
        bubbles: true,
      });
      // set `clipboardData`. Mock DataTransfer object
      clipboardEvent['clipboardData'] = {
        items: [
          {
            getAsFile: () => file,
            kind: 'file',
          },
          {
            getAsFile: () => image,
            kind: 'file',
          },
        ],
      };
      const formElement = await screen.findByPlaceholderText(inputPlaceholder);
      await act(async () => {
        await formElement.dispatchEvent(clipboardEvent);
      });
      const filenameTexts = await screen.findAllByTitle(filename);
      await waitFor(() => {
        expectChannelUploadCall(sendFileSpy, file);
        expectChannelUploadCall(sendImageSpy, image);
        expect(screen.getByTestId(IMAGE_PREVIEW_TEST_ID)).toBeInTheDocument();
        expect(screen.getByTestId(FILE_PREVIEW_TEST_ID)).toBeInTheDocument();
        filenameTexts.forEach((filenameText) => expect(filenameText).toBeInTheDocument());
        expect(screen.getByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID)).toBeInTheDocument();
      });

      const results = await axe(container, {
        rules: { 'nested-interactive': { enabled: false } },
      });
      expect(results).toHaveNoViolations();
    });

    it('gives preference to pasting text over files', async () => {
      const { customChannel, customClient, sendFileSpy, sendImageSpy } = await setup();
      const { container } = await renderComponent({ customChannel, customClient });
      const pastedString = 'pasted string';

      const file = getFile();
      const image = getImage();

      const clipboardEvent = new Event('paste', {
        bubbles: true,
      });
      // set `clipboardData`. Mock DataTransfer object
      clipboardEvent['clipboardData'] = {
        items: [
          {
            getAsFile: () => file,
            kind: 'file',
          },
          {
            getAsFile: () => image,
            kind: 'file',
          },
          {
            getAsString: (cb) => cb(pastedString),
            kind: 'string',
            type: 'text/plain',
          },
        ],
      };
      const formElement = screen.getByPlaceholderText(inputPlaceholder);
      await act(async () => {
        await formElement.dispatchEvent(clipboardEvent);
      });

      await waitFor(() => {
        expect(sendFileSpy).not.toHaveBeenCalled();
        expect(sendImageSpy).not.toHaveBeenCalled();
        expect(screen.queryByTestId(IMAGE_PREVIEW_TEST_ID)).not.toBeInTheDocument();
        expect(screen.queryByTestId(FILE_PREVIEW_TEST_ID)).not.toBeInTheDocument();
        expect(screen.queryByText(filename)).not.toBeInTheDocument();
        expect(
          screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID),
        ).not.toBeInTheDocument();
        expect(formElement).toHaveValue(pastedString);
      });

      const results = await axe(container, {
        rules: { 'nested-interactive': { enabled: false } },
      });
      expect(results).toHaveNoViolations();
    });

    it('Should upload an image when it is dropped on the dropzone', async () => {
      const { customChannel, customClient, sendImageSpy } = await setup();
      const { container } = await renderComponent({ customChannel, customClient });
      // drop on the form input. Technically could be dropped just outside of it as well, but the input should always work.
      const formElement = await screen.findByPlaceholderText(inputPlaceholder);
      const file = getImage();
      await act(() => {
        dropFile(file, formElement);
      });
      await waitFor(() => {
        expectChannelUploadCall(sendImageSpy, file);
      });
      const results = await axe(container, {
        rules: { 'nested-interactive': { enabled: false } },
      });
      expect(results).toHaveNoViolations();
    });

    it('Should upload, display and link to a file when it is dropped on the dropzone', async () => {
      const { customChannel, customClient } = await setup();
      const { container } = await renderComponent({ customChannel, customClient });
      // drop on the form input. Technically could be dropped just outside of it as well, but the input should always work.
      const formElement = await screen.findByPlaceholderText(inputPlaceholder);

      await act(() => {
        dropFile(getFile(), formElement);
      });

      const filenameText = await screen.findByText(filename);

      expect(filenameText).toBeInTheDocument();
      await waitFor(() => {
        expect(screen.getByTestId(FILE_PREVIEW_TEST_ID)).toBeInTheDocument();
      });

      await axeNoViolations(container);
    });

    it('should allow uploading files with the file upload button', async () => {
      const { customChannel, customClient } = await setup();
      const { container } = await renderComponent({ customChannel, customClient });
      const file = getFile();
      const input = screen.getByTestId(FILE_INPUT_TEST_ID);

      await act(() => {
        fireEvent.change(input, {
          target: {
            files: [file],
          },
        });
      });

      expect(screen.getByText(filename)).toBeInTheDocument();
      await waitFor(() => {
        expect(screen.getByTestId(FILE_PREVIEW_TEST_ID)).toBeInTheDocument();
      });
      await axeNoViolations(container);
    });

    it('should not set multiple attribute on the file input if multipleUploads is false', async () => {
      const {
        channels: [customChannel],
        client: customClient,
      } = await initClientWithChannels({
        channelsData: [mockedChannelData],
        customUser: user,
      });
      customChannel.messageComposer.attachmentManager.maxNumberOfFilesPerMessage = 1;
      const { container } = await renderComponent({
        customChannel,
        customClient,
      });
      const input = screen.getByTestId(FILE_INPUT_TEST_ID);
      expect(input).not.toHaveAttribute('multiple');
      await axeNoViolations(container);
    });

    it('should set multiple attribute on the file input if multipleUploads is true', async () => {
      const {
        channels: [customChannel],
        client: customClient,
      } = await initClientWithChannels({
        channelsData: [mockedChannelData],
        customUser: user,
      });
      customChannel.messageComposer.attachmentManager.maxNumberOfFilesPerMessage = 5;
      const { container } = await renderComponent({
        customChannel,
        customClient,
      });
      const input = screen.getByTestId(FILE_INPUT_TEST_ID);
      expect(input).toHaveAttribute('multiple');
      await axeNoViolations(container);
    });

    const filename1 = '1.txt';
    const filename2 = '2.txt';
    it('should only allow dropping max number of files into the dropzone', async () => {
      const { customChannel, customClient } = await setup();
      const { container } = await renderComponent({
        customChannel,
        customClient,
      });
      act(() => {
        customChannel.messageComposer.attachmentManager.maxNumberOfFilesPerMessage = 1;
      });

      const formElement = await screen.findByPlaceholderText(inputPlaceholder);

      const file = getFile(filename1);

      act(() => dropFile(file, formElement));

      await waitFor(() => expect(screen.queryByText(filename1)).toBeInTheDocument());

      const file2 = getFile(filename2);
      act(() => dropFile(file2, formElement));

      await waitFor(() => expect(screen.queryByText(filename2)).not.toBeInTheDocument());

      await axeNoViolations(container);
    });

    it('should show attachment previews if at least one non-scraped attachments available', async () => {
      const { customChannel, customClient } = await setup();
      customChannel.messageComposer.attachmentManager.state.next({
        attachments: [
          fromPartial<LocalAttachment>({ ...generateLocalAttachmentData(), type: 'xxx' }),
        ],
      });
      await renderComponent({
        customChannel,
        customClient,
      });
      const previewListContainer = screen.getByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID);
      expect(previewListContainer).toBeInTheDocument();
      expect(previewListContainer.children).toHaveLength(1);
      expect(previewListContainer.children[0]).toHaveAttribute(
        'data-testid',
        UNKNOWN_ATTACHMENT_PREVIEW_TEST_ID,
      );
    });

    it('should not show scraped content in attachment previews', async () => {
      const { customChannel, customClient } = await setup();
      const scrapedAttachment = fromPartial<LocalAttachment>({
        ...generateLocalAttachmentData(),
        ...generateScrapedDataAttachment(),
      });
      const unknownAttachment = fromPartial<LocalAttachment>({
        ...generateLocalAttachmentData(),
        type: 'xxx',
      });
      customChannel.messageComposer.attachmentManager.state.next({
        attachments: [scrapedAttachment, unknownAttachment],
      });
      await renderComponent({
        customChannel,
        customClient,
      });
      const previewListContainer = screen.getByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID);
      expect(previewListContainer).toBeInTheDocument();
      expect(previewListContainer.children).toHaveLength(1);
      expect(previewListContainer.children[0]).toHaveAttribute(
        'data-testid',
        UNKNOWN_ATTACHMENT_PREVIEW_TEST_ID,
      );
    });

    it('should not show attachment previews if no files uploaded and no attachments available', async () => {
      const { customChannel, customClient } = await setup();
      customChannel.messageComposer.attachmentManager.state.next({
        attachments: [],
      });
      await renderComponent({
        customChannel,
        customClient,
      });
      expect(
        screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID),
      ).not.toBeInTheDocument();
    });

    it('should not show attachment previews if no files uploaded and attachments available are only link previews', async () => {
      const { customChannel, customClient } = await setup();
      customChannel.messageComposer.attachmentManager.state.next({
        attachments: [],
      });
      const linkPreviewData = generateScrapedDataAttachment();
      customChannel.messageComposer.linkPreviewsManager.state.next(
        fromPartial<LinkPreviewsManagerState>({
          previews: new Map([[linkPreviewData.og_scrape_url, linkPreviewData]]),
        }),
      );
      await renderComponent({
        customChannel,
        customClient,
      });
      expect(
        screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID),
      ).not.toBeInTheDocument();
    });

    it('should show attachment preview list if not only failed uploads are available', async () => {
      const cause = new Error('failed to upload');
      const { customChannel, customClient, sendFileSpy } =
        await setupUploadRejected(cause);
      sendFileSpy.mockResolvedValueOnce(fromPartial({ file: fileUploadUrl }));
      await renderComponent({
        customChannel,
        customClient,
      });

      vi.spyOn(console, 'warn').mockImplementationOnce(() => null);
      const formElement = await screen.findByPlaceholderText(inputPlaceholder);
      const file = getFile();

      await act(async () => await dropFile(file, formElement));

      await waitFor(() => {
        expect(screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID)).toBeInTheDocument();
        expect(screen.queryByTestId(FILE_UPLOAD_RETRY_BTN_TEST_ID)).toBeInTheDocument();
      });

      await act(async () => await dropFile(file, formElement));

      await waitFor(() => {
        const previewList = screen.getByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID);
        expect(previewList).toBeInTheDocument();
        expect(previewList.children).toHaveLength(2);
      });
    });
  });

  describe('Uploads disabled', () => {
    const channelData = { channel: { own_capabilities: [] } };

    it('pasting images and files should do nothing', async () => {
      const { customChannel, customClient, sendFileSpy, sendImageSpy } = await setup({
        channelData,
      });
      const { container } = await renderComponent({
        customChannel,
        customClient,
      });

      const file = getFile();
      const image = getImage();

      const clipboardEvent = new Event('paste', { bubbles: true });
      // set `clipboardData`. Mock DataTransfer object
      clipboardEvent['clipboardData'] = {
        items: [
          { getAsFile: () => file, kind: 'file' },
          { getAsFile: () => image, kind: 'file' },
        ],
      };
      const formElement = screen.getByPlaceholderText(inputPlaceholder);

      await act(() => {
        formElement.dispatchEvent(clipboardEvent);
      });

      await waitFor(() => {
        expect(screen.queryByText(filename)).not.toBeInTheDocument();
        expect(sendFileSpy).not.toHaveBeenCalled();
        expect(sendImageSpy).not.toHaveBeenCalled();
      });
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });

    it('Should not upload an image when it is dropped on the dropzone', async () => {
      const { customChannel, customClient, sendImageSpy } = await setup({
        channelData,
      });
      const { container } = await renderComponent({
        customChannel,
        customClient,
      });

      // drop on the form input. Technically could be dropped just outside of it as well, but the input should always work.
      const formElement = await screen.findByPlaceholderText(inputPlaceholder);
      const file = getImage();

      await act(async () => {
        await dropFile(file, formElement);
      });

      await waitFor(() => {
        expect(sendImageSpy).not.toHaveBeenCalled();
      });
      await waitFor(axeNoViolations(container));
    });
  });

  describe('Submitting', () => {
    it('should submit the input value when clicking the submit button', async () => {
      const { customChannel, customClient } = await setup();
      const { container, submit } = await renderComponent({
        customChannel,
        customClient,
      });

      const messageText = 'Some text';
      fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
        target: {
          value: messageText,
        },
      });

      await act(() => submit());

      expect(sendMessageMock).toHaveBeenCalledWith(
        customChannel,
        expect.objectContaining({
          text: messageText,
        }),
        {},
      );
      await axeNoViolations(container);
    });

    it('clears the composer before the send request resolves', async () => {
      // Regression: the composer used to be cleared only after awaiting the send round-trip, which
      // opened a window where a fast follow-up keystroke/submit raced with the late clear (dropped
      // or un-cleared messages when typing and submitting in quick succession). The clear must
      // happen optimistically, before the send is awaited.
      const { customChannel, customClient } = await setup();
      let resolveSend: () => void = () => undefined;
      sendMessageMock.mockImplementationOnce(
        () =>
          new Promise<void>((resolve) => {
            resolveSend = resolve;
          }),
      );
      const { submit } = await renderComponent({ customChannel, customClient });

      const textarea = (await screen.findByPlaceholderText(
        inputPlaceholder,
      )) as HTMLTextAreaElement;
      const messageText = 'race-guard';
      fireEvent.change(textarea, { target: { value: messageText } });
      await waitFor(() => expect(textarea.value).toBe(messageText));

      await act(() => submit());

      // The send request is dispatched but still pending (never resolved yet). The composer must
      // already be empty — with the pre-fix ordering it would stay 'race-guard' until the send
      // resolved.
      await waitFor(() => expect(sendMessageMock).toHaveBeenCalled());
      await waitFor(() => expect(textarea.value).toBe(''));

      await act(async () => {
        resolveSend();
        await Promise.resolve();
      });
    });

    it('should allow to send custom message data', async () => {
      const { customChannel, customClient } = await setup();
      const customMessageData = { customX: 'customX' };
      const CustomStateSetter = null;

      customChannel.messageComposer.customDataManager.setMessageData(customMessageData);
      const { container, submit } = await renderComponent({
        customChannel,
        customClient,
        CustomStateSetter,
      });

      fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
        target: {
          value: 'Some text',
        },
      });

      await act(() => submit());

      await waitFor(() => {
        expect(sendMessageMock).toHaveBeenCalledWith(
          customChannel,
          expect.objectContaining(customMessageData),
          {},
        );
      });
      await axeNoViolations(container);
    });

    it('sends through a custom request handler, replacing the default send (successor to the removed overrideSubmitHandler prop)', async () => {
      // `overrideSubmitHandler` was removed; overriding the send is now done through `Channel`'s
      // `doSendMessageRequest`, which registers a `send` handler on `channel.messageOperations`
      // (`configState.requestHandlers.sendMessageRequest`). `sendMessageWithLocalUpdate` uses that
      // handler instead of the default `channel.sendMessage`, and — because the handler resolves a
      // response — the default request is never made.
      const { customChannel, customClient } = await setup();
      const sendMessageSpy = vi.spyOn(customChannel, 'sendMessage');
      const messageText = 'via-custom-handler';
      const customMessageData = { customX: 'customX' };
      customChannel.messageComposer.customDataManager.setMessageData(customMessageData);
      sendMessageMock.mockResolvedValueOnce({
        message: generateMessage({ text: messageText, user }),
      });

      const { submit } = await renderComponent({ customChannel, customClient });

      fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
        target: { value: messageText },
      });

      await act(() => submit());

      // The custom handler receives the composed message (text + custom data) and the send options.
      await waitFor(() =>
        expect(sendMessageMock).toHaveBeenCalledWith(
          customChannel,
          expect.objectContaining({ text: messageText, ...customMessageData }),
          {},
        ),
      );
      // Its resolved response replaces the default send — channel.sendMessage is never called.
      expect(sendMessageSpy).not.toHaveBeenCalled();
    });

    it('should not do anything if the message is empty and has no files', async () => {
      const { customChannel, customClient } = await setup();
      const { container, submit } = await renderComponent({
        customChannel,
        customClient,
        messageContextOverrides: {
          message: fromPartial<LocalMessage>({
            cid: customChannel.cid,
            created_at: new Date(),
            updated_at: new Date(),
          }),
        },
      });

      await act(() => submit());

      expect(sendMessageMock).not.toHaveBeenCalled();
      await axeNoViolations(container);
    });

    it('should add image as attachment if a message is submitted with an image', async () => {
      const { customChannel, customClient, sendImageSpy } = await setup();
      const { container, submit } = await renderComponent({
        customChannel,
        customClient,
      });
      // drop on the form input. Technically could be dropped just outside of it as well, but the input should always work.
      const formElement = await screen.findByPlaceholderText(inputPlaceholder);
      const file = getImage();
      await act(async () => {
        await dropFile(file, formElement);
      });

      // wait for image uploading to complete before trying to send the message

      await waitFor(() => expect(sendImageSpy).toHaveBeenCalled());

      await act(async () => await submit());

      const msgFragment = {
        attachments: expect.arrayContaining([
          expect.objectContaining({
            image_url: fileUploadUrl,
            type: 'image',
          }),
        ]),
      };

      await waitFor(() => {
        expect(sendMessageMock).toHaveBeenCalledWith(
          customChannel,
          expect.objectContaining(msgFragment),
          {},
        );
      });

      await axeNoViolations(container);
    });

    it('should submit if shouldSubmit function is not provided but keydown events do match', async () => {
      const { customChannel, customClient } = await setup();
      const { container } = await renderComponent({
        customChannel,
        customClient,
      });

      const messageText = 'Some text';
      const input = await screen.findByPlaceholderText(inputPlaceholder);

      await act(async () => {
        await fireEvent.change(input, {
          target: {
            value: messageText,
          },
        });
      });

      await act(() => fireEvent.keyDown(input, { key: 'Enter' }));

      expect(sendMessageMock).toHaveBeenCalledWith(
        customChannel,
        expect.objectContaining({
          text: messageText,
        }),
        {},
      );
      await axeNoViolations(container);
    });

    it('should not submit if shouldSubmit function is provided but keydown events do not match', async () => {
      const { customChannel, customClient } = await setup();
      const { container } = await renderComponent({
        customChannel,
        customClient,
        messageInputProps: {
          shouldSubmit: (e) => e.key === '9',
        },
      });
      const input = await screen.findByPlaceholderText(inputPlaceholder);

      const messageText = 'Some text';
      fireEvent.change(input, {
        target: {
          value: messageText,
        },
      });

      await act(() => fireEvent.keyDown(input, { key: 'Enter' }));

      expect(sendMessageMock).not.toHaveBeenCalled();
      await axeNoViolations(container);
    });

    it('should submit if shouldSubmit function is provided and keydown events do match', async () => {
      const { customChannel, customClient } = await setup();
      const { container } = await renderComponent({
        customChannel,
        customClient,
        messageInputProps: {
          shouldSubmit: (e) => e.key === '9',
        },
      });
      const messageText = 'Submission text.';
      const input = await screen.findByPlaceholderText(inputPlaceholder);

      await act(async () => {
        await fireEvent.change(input, {
          target: {
            value: messageText,
          },
        });
      });
      await act(async () => {
        await fireEvent.keyDown(input, {
          key: '9',
        });
      });
      expect(sendMessageMock).toHaveBeenCalledWith(
        customChannel,
        expect.objectContaining({
          text: messageText,
        }),
        {},
      );

      await axeNoViolations(container);
    });

    it('should not submit if Shift key is pressed', async () => {
      const { customChannel, customClient } = await setup();
      const { container } = await renderComponent({
        customChannel,
        customClient,
      });
      const messageText = 'Submission text.';
      const input = await screen.findByPlaceholderText(inputPlaceholder);

      await act(async () => {
        await fireEvent.change(input, {
          target: {
            value: messageText,
          },
        });
      });
      await act(async () => {
        await fireEvent.keyDown(input, {
          key: 'Enter',
          shiftKey: true,
        });
      });

      expect(sendMessageMock).not.toHaveBeenCalled();

      await axeNoViolations(container);
    });
  });

  it('should list all the available users to mention if only @ is typed', async () => {
    const scrollIntoView = Element.prototype.scrollIntoView;
    // eslint-disable-next-line vitest/prefer-spy-on
    Element.prototype.scrollIntoView = vi.fn();
    const { customChannel, customClient } = await setup();
    vi.spyOn(customClient, 'searchRoles').mockResolvedValue(fromPartial({ roles: [] }));
    vi.spyOn(customClient, 'searchUserGroups').mockResolvedValue(
      fromPartial({ user_groups: [] }),
    );
    await renderComponent({
      customChannel,
      customClient,
      customUser: generateUser(),
    });

    const formElement = await screen.findByPlaceholderText(inputPlaceholder);
    await act(async () => {
      await fireEvent.change(formElement, {
        target: {
          selectionEnd: 1,
          selectionStart: 1,
          value: '@',
        },
      });
    });

    // The suggestion list also contains broadcast mentions (e.g. @channel, @here)
    // injected by the SDK, so assert every mentionable member is listed rather
    // than matching the raw item count.
    const mentionableMembers = Object.values(customChannel.state.members)
      .map((member) => member.user)
      .filter((mentionUser) => mentionUser && mentionUser.id !== customClient.userID);

    await waitFor(() => {
      mentionableMembers.forEach((mentionableUser) => {
        expect(
          document.querySelector(
            `.str-chat__suggestion-list-item[title="${mentionableUser.name ?? mentionableUser.id}"]`,
          ),
        ).toBeInTheDocument();
      });
    });
    Element.prototype.scrollIntoView = scrollIntoView;
  });

  it('should render mixed mention suggestions on @ open with the mention suggestions fallback label', async () => {
    const scrollIntoView = Element.prototype.scrollIntoView;
    // eslint-disable-next-line vitest/prefer-spy-on
    Element.prototype.scrollIntoView = vi.fn();
    const { customChannel, customClient } = await setup();
    vi.spyOn(customClient, 'searchRoles').mockResolvedValue(
      fromPartial({ roles: [{ name: 'admin' }] }),
    );
    vi.spyOn(customClient, 'searchUserGroups').mockResolvedValue(
      fromPartial({
        user_groups: [{ id: 'backend-team', name: 'Backend Team' }],
      }),
    );

    const { container } = await renderComponent({
      customChannel,
      customClient,
      customUser: generateUser(),
    });
    const formElement = await screen.findByPlaceholderText(inputPlaceholder);

    await act(async () => {
      await fireEvent.change(formElement, {
        target: {
          selectionEnd: 1,
          selectionStart: 1,
          value: '@',
        },
      });
    });

    await waitFor(() => {
      // The accessible name lives on the listbox container (role="listbox"), not the inner
      // presentation element.
      expect(
        container.querySelector('.str-chat__suggestion-list-container'),
      ).toHaveAttribute('aria-label', 'Mention Suggestions');
      expect(
        container.querySelectorAll('.str-chat__suggestion-list-item').length,
      ).toBeGreaterThanOrEqual(3);
      expect(screen.getByText(mentionName)).toBeInTheDocument();
      expect(screen.getByText('@channel')).toBeInTheDocument();
      expect(screen.getByText('@here')).toBeInTheDocument();
    });

    const results = await axe(container);
    expect(results).toHaveNoViolations();
    Element.prototype.scrollIntoView = scrollIntoView;
  });

  it('should support keyboard selection for non-user mention items even when search source has next page', async () => {
    const scrollIntoView = Element.prototype.scrollIntoView;
    // eslint-disable-next-line vitest/prefer-spy-on
    Element.prototype.scrollIntoView = vi.fn();
    const { customChannel, customClient } = await setup({
      channelData: fromPartial<GenerateChannelOptions>({
        members: [generateMember({ user })],
      }),
    });
    vi.spyOn(customClient, 'searchRoles').mockResolvedValue(fromPartial({ roles: [] }));

    await renderComponent({
      customChannel,
      customClient,
      customUser: generateUser(),
    });

    const formElement = await screen.findByPlaceholderText(inputPlaceholder);
    await act(async () => {
      await fireEvent.change(formElement, {
        target: {
          selectionEnd: 1,
          selectionStart: 1,
          value: '@',
        },
      });
    });

    const searchSource =
      customChannel.messageComposer.textComposer.suggestions?.searchSource;
    expect(searchSource).toBeDefined();

    const nonUserMentionSuggestions: TextComposerSuggestion[] = [
      {
        id: 'channel',
        mentionType: 'channel',
        name: 'channel',
        tokenizedDisplayName: { parts: ['channel'], token: '' },
      },
      {
        id: 'here',
        mentionType: 'here',
        name: 'here',
        tokenizedDisplayName: { parts: ['here'], token: '' },
      },
    ];

    await act(() => {
      searchSource?.state.partialNext({
        hasNext: true,
        items: nonUserMentionSuggestions,
      } satisfies Partial<SearchSourceState<TextComposerSuggestion>>);
    });

    await waitFor(() => {
      expect(screen.getByText('@channel')).toBeInTheDocument();
      expect(screen.getByText('@here')).toBeInTheDocument();
    });

    await act(async () => {
      await fireEvent.keyDown(formElement, { key: 'ArrowDown' });
      await fireEvent.keyDown(formElement, { key: 'Enter' });
    });

    await waitFor(() => {
      expect(formElement).toHaveValue('@here ');
    });

    Element.prototype.scrollIntoView = scrollIntoView;
  });

  it('should add a mentioned user if @ is typed and a user is selected', async () => {
    const scrollIntoView = Element.prototype.scrollIntoView;
    // eslint-disable-next-line vitest/prefer-spy-on
    Element.prototype.scrollIntoView = vi.fn();
    const { customChannel, customClient } = await setup();
    vi.spyOn(customClient, 'searchRoles').mockResolvedValue(fromPartial({ roles: [] }));
    vi.spyOn(customClient, 'searchUserGroups').mockResolvedValue(
      fromPartial({ user_groups: [] }),
    );
    const { container, submit } = await renderComponent({
      customChannel,
      customClient,
      customUser: generateUser(),
    });

    const formElement = await screen.findByPlaceholderText(inputPlaceholder);
    await act(async () => {
      await fireEvent.change(formElement, {
        target: {
          selectionEnd: 1,
          selectionStart: 1,
          value: '@',
        },
      });
    });

    // The suggestion list also contains broadcast mentions (e.g. @channel, @here),
    // so target the user suggestion explicitly instead of the first item.
    await waitFor(() => {
      expect(
        document.querySelector(`.str-chat__suggestion-list-item[title="${mentionName}"]`),
      ).toBeInTheDocument();
    });
    const mentionItem = screen.getByText(mentionName).closest('button');
    expect(mentionItem).toBeTruthy();
    await act(async () => {
      await fireEvent.click(mentionItem!);
    });

    await act(() => submit());

    expect(sendMessageMock).toHaveBeenCalledWith(
      customChannel,
      expect.objectContaining({
        mentioned_users: expect.arrayContaining([mentionId]),
        text: '@mention-name ',
      }),
      {},
    );

    Element.prototype.scrollIntoView = scrollIntoView;
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  // RW9b: the composer textarea is wired to the suggestion list as an
  // aria-activedescendant autocomplete (textarea cannot be role="combobox").
  it('wires the textarea to the suggestion listbox via aria-controls/aria-activedescendant', async () => {
    const scrollIntoView = Element.prototype.scrollIntoView;
    // eslint-disable-next-line vitest/prefer-spy-on
    Element.prototype.scrollIntoView = vi.fn();
    const { customChannel, customClient } = await setup();
    await renderComponent({
      customChannel,
      customClient,
      customUser: generateUser(),
    });

    const textarea = await screen.findByPlaceholderText(inputPlaceholder);
    // Closed: no dangling references to a listbox that is not rendered.
    expect(textarea).toHaveAttribute('aria-autocomplete', 'list');
    expect(textarea).not.toHaveAttribute('aria-controls');
    expect(textarea).not.toHaveAttribute('aria-activedescendant');

    await act(async () => {
      await fireEvent.change(textarea, {
        target: { selectionEnd: 1, selectionStart: 1, value: '@' },
      });
    });

    let listbox: HTMLElement;
    await waitFor(() => {
      listbox = document.querySelector('[role="listbox"]') as HTMLElement;
      expect(listbox).toBeInTheDocument();
    });

    // aria-controls points at the rendered listbox as soon as it opens.
    const listboxId = listbox!.getAttribute('id');
    expect(listboxId).toBeTruthy();
    expect(textarea).toHaveAttribute('aria-controls', listboxId);

    // No active option is advertised on mere filtering — otherwise the SR would re-read the
    // auto-reset first option on every keystroke. It appears only once the user navigates.
    expect(textarea).not.toHaveAttribute('aria-activedescendant');

    await act(async () => {
      await fireEvent.keyDown(textarea, { key: 'ArrowDown' });
    });

    // After Arrow navigation, aria-activedescendant references an option that exists in the
    // listbox (so the SR voices it).
    await waitFor(() => {
      const activeDescendantId = textarea.getAttribute('aria-activedescendant');
      expect(activeDescendantId).toBeTruthy();
      expect(document.getElementById(activeDescendantId!)).toHaveAttribute(
        'role',
        'option',
      );
    });

    Element.prototype.scrollIntoView = scrollIntoView;
  });

  it('should override the default List component when SuggestionList is provided as a prop', async () => {
    const AutocompleteSuggestionList = () => (
      <div data-testid='suggestion-list'>Suggestion List</div>
    );
    const { customChannel, customClient } = await setup();
    const { container } = await renderComponent({
      components: {
        AutocompleteSuggestionList,
      },
      customChannel,
      customClient,
    });

    const formElement = await screen.findByPlaceholderText(inputPlaceholder);

    // the component does not check whether there are items to be displayed
    expect(await screen.findByText('Suggestion List')).toBeInTheDocument();

    await act(() => {
      fireEvent.change(formElement, {
        target: { value: '/' },
      });
    });

    await waitFor(() =>
      expect(screen.queryByText('Suggestion List')).toBeInTheDocument(),
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  describe('Command activation announcement', () => {
    const giphyCommand = fromPartial<Command>({
      args: '[text]',
      description: 'Post a random gif to the channel',
      name: 'giphy',
    });

    const getPoliteLiveRegion = () =>
      screen.getByTestId('str-chat__aria-live-region--polite');

    it('announces the new textarea label when the command activates while the textarea is focused', async () => {
      const { channel } = await renderComponent();
      const input = (await screen.findByPlaceholderText(
        inputPlaceholder,
      )) as HTMLTextAreaElement;

      await act(() => {
        input.focus();
      });
      expect(document.activeElement).toBe(input);

      await act(() => {
        channel.messageComposer.textComposer.setCommand(giphyCommand);
      });

      await waitFor(() => {
        expect(getPoliteLiveRegion()).toHaveTextContent('Search GIFs');
      });
    });

    it('does not announce the new label when the command activates while focus is elsewhere', async () => {
      const { channel } = await renderComponent();
      await screen.findByPlaceholderText(inputPlaceholder);

      const decoyButton = document.createElement('button');
      decoyButton.textContent = 'decoy';
      document.body.appendChild(decoyButton);
      decoyButton.focus();
      expect(document.activeElement).toBe(decoyButton);

      await act(() => {
        channel.messageComposer.textComposer.setCommand(giphyCommand);
      });

      await new Promise((resolve) => requestAnimationFrame(resolve));
      await new Promise((resolve) => requestAnimationFrame(resolve));

      expect(getPoliteLiveRegion()).toHaveTextContent('');

      decoyButton.remove();
    });
  });

  describe('Composer textarea accessible name', () => {
    const getPoliteLiveRegion = () =>
      screen.getByTestId('str-chat__aria-live-region--polite');

    // The harness uses a raw ChatProvider (no TranslationProvider), so the
    // default translator returns i18n keys verbatim without interpolation.
    const STABLE_LABEL = 'Message input';
    const USER_SELECTED = 'User selected: mention-name';

    // RW13: the textarea must name itself explicitly so it never inherits an
    // ancestor name (e.g. the ChatView "Channels, tab panel").
    it('exposes the placeholder as an explicit aria-label while empty', async () => {
      await renderComponent();
      const input = await screen.findByPlaceholderText(inputPlaceholder);
      expect(input).toHaveAttribute('aria-label', inputPlaceholder);
    });

    // RW10: once the field has content the accessible name must NOT be the
    // (potentially stale/templated) placeholder, but a stable label.
    it('switches to a stable explicit aria-label once the field has content', async () => {
      const { channel } = await renderComponent();
      const input = await screen.findByPlaceholderText(inputPlaceholder);

      await act(() => {
        channel.messageComposer.textComposer.setText('hello world');
      });

      await waitFor(() => {
        expect(input).toHaveAttribute('aria-label', STABLE_LABEL);
      });
      // and never the placeholder while content exists
      expect(input).not.toHaveAttribute('aria-label', inputPlaceholder);
    });

    // RW10: the command-specific placeholder template must not become the
    // accessible name once real content is present.
    it('does not use the command placeholder template as the name when content exists', async () => {
      const giphyCommand = fromPartial<Command>({
        args: '[text]',
        description: 'Post a random gif to the channel',
        name: 'giphy',
      });
      const { channel } = await renderComponent();
      const input = await screen.findByPlaceholderText(inputPlaceholder);

      await act(() => {
        channel.messageComposer.textComposer.setCommand(giphyCommand);
        channel.messageComposer.textComposer.setText('a gif query');
      });

      await waitFor(() => {
        expect(input).toHaveAttribute('aria-label', STABLE_LABEL);
      });
      expect(input).not.toHaveAttribute('aria-label', 'Search GIFs');
    });

    it('names the giphy GIF-search field by its own placeholder while empty', async () => {
      const giphyCommand = fromPartial<Command>({
        args: '[text]',
        description: 'Post a random gif to the channel',
        name: 'giphy',
      });
      const { channel } = await renderComponent();
      const input = await screen.findByPlaceholderText(inputPlaceholder);

      await act(() => {
        channel.messageComposer.textComposer.setCommand(giphyCommand);
      });

      await waitFor(() => {
        expect(input).toHaveAttribute('aria-label', 'Search GIFs');
      });
    });

    // RW10: announce a one-shot selection confirmation when a user is picked.
    it('announces a confirmation once when a user mention is selected', async () => {
      const { channel } = await renderComponent();
      await screen.findByPlaceholderText(inputPlaceholder);

      await act(() => {
        channel.messageComposer.textComposer.upsertMentionedUser(mentionUser);
      });

      await waitFor(() => {
        expect(getPoliteLiveRegion()).toHaveTextContent(USER_SELECTED);
      });
    });

    // RW10: unrelated state changes must not re-fire the selection announcement.
    it('does not re-announce a selection on subsequent unrelated state changes', async () => {
      const { channel } = await renderComponent();
      await screen.findByPlaceholderText(inputPlaceholder);

      await act(() => {
        channel.messageComposer.textComposer.upsertMentionedUser(mentionUser);
      });

      await waitFor(() => {
        expect(getPoliteLiveRegion()).toHaveTextContent(USER_SELECTED);
      });

      // A text-only change must not re-announce the selection.
      await act(() => {
        channel.messageComposer.textComposer.setText('@mention-name typing more');
      });

      // Re-upserting the SAME user (already present) must not re-announce.
      await act(() => {
        channel.messageComposer.textComposer.upsertMentionedUser(mentionUser);
      });

      // exactly one occurrence — no double announce
      const occurrences = getPoliteLiveRegion().textContent?.match(
        new RegExp(USER_SELECTED.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'),
      );
      expect(occurrences).toHaveLength(1);
    });
  });

  describe('Command dismissal', () => {
    it('clears the active command when Escape is pressed in the textarea', async () => {
      const { channel } = await renderComponent();
      const input = await screen.findByPlaceholderText(inputPlaceholder);
      const command = fromPartial<Command>({
        args: '[text]',
        description: 'Post a random gif to the channel',
        name: 'giphy',
      });

      await act(() => {
        channel.messageComposer.textComposer.setCommand(command);
      });

      expect(screen.getByText('giphy')).toBeInTheDocument();

      await act(() => {
        fireEvent.keyDown(input, { key: 'Escape' });
      });

      await waitFor(() => {
        expect(screen.queryByText('giphy')).not.toBeInTheDocument();
      });
    });

    it('clears the active command when Backspace is pressed in an empty textarea', async () => {
      const { channel } = await renderComponent();
      const input = await screen.findByPlaceholderText(inputPlaceholder);
      const command = fromPartial<Command>({
        args: '[text]',
        description: 'Post a random gif to the channel',
        name: 'giphy',
      });

      await act(() => {
        channel.messageComposer.textComposer.setCommand(command);
      });

      expect(screen.getByText('giphy')).toBeInTheDocument();
      expect(input).toHaveValue('');

      await act(() => {
        fireEvent.keyDown(input, { key: 'Backspace' });
      });

      await waitFor(() => {
        expect(screen.queryByText('giphy')).not.toBeInTheDocument();
      });
    });

    it('clears the active command when the textarea DOM is empty even if composer text lags behind', async () => {
      const { channel } = await renderComponent();
      const input = (await screen.findByPlaceholderText(
        inputPlaceholder,
      )) as HTMLTextAreaElement;
      const command = fromPartial<Command>({
        args: '[text]',
        description: 'Post a random gif to the channel',
        name: 'giphy',
      });

      await act(() => {
        channel.messageComposer.textComposer.setCommand(command);
        channel.messageComposer.textComposer.state.next({
          ...channel.messageComposer.textComposer.state.getLatestValue(),
          text: 'a',
        });
      });

      input.value = '';

      await act(() => {
        fireEvent.keyDown(input, { key: 'Backspace' });
      });

      await waitFor(() => {
        expect(screen.queryByText('giphy')).not.toBeInTheDocument();
      });
    });
  });

  describe('QuotedMessagePreview', () => {
    it('is displayed on quote action click', async () => {
      await renderComponent();
      await initQuotedMessagePreview(mainListMessage);
      await quotedMessagePreviewIsDisplayedCorrectly(mainListMessage);
    });

    it('renders quoted message text', async () => {
      const m = generateMessage({
        mentioned_users: [{ id: 'john', name: 'John Cena' }],
        text: 'hey @John Cena',
        user,
      });
      await renderComponent({ messageContextOverrides: { message: m } });
      await initQuotedMessagePreview(m);

      expect(await screen.findByText(m.text)).toBeInTheDocument();
    });

    it('uses custom renderText fn if provided', async () => {
      const m = generateMessage({
        text: nanoid(),
        user,
      });
      const fn = vi.fn().mockReturnValue(<div data-testid={m.text}>{m.text}</div>);
      await renderComponent({
        components: {
          QuotedMessagePreview: (props) => (
            <QuotedMessagePreview {...props} renderText={fn} />
          ),
        },
        messageContextOverrides: { message: m },
      });
      await initQuotedMessagePreview(m);

      expect(fn).toHaveBeenCalled();
      expect(await screen.findByTestId(m.text)).toBeInTheDocument();
    });

    it('is updated on original message update', async () => {
      const { channel, client } = await renderComponent();
      await initQuotedMessagePreview(mainListMessage);
      mainListMessage.text = new Date().toISOString();
      await act(() => {
        dispatchMessageUpdatedEvent(client, mainListMessage, channel);
      });
      await quotedMessagePreviewIsDisplayedCorrectly(mainListMessage);
    });

    it('is closed on original message delete', async () => {
      const { channel, client } = await renderComponent();
      await initQuotedMessagePreview(mainListMessage);
      await act(() => {
        dispatchMessageDeletedEvent(client, mainListMessage, channel);
      });
      quotedMessagePreviewIsNotDisplayed(mainListMessage);
    });

    it('clears active command when quoting makes it unavailable', async () => {
      const { channel } = await renderComponent();
      const command = fromPartial<Command>({
        args: '[@username] [text]',
        description: 'Ban a user',
        name: 'ban',
        set: 'moderation_set',
      });

      await act(() => {
        channel.messageComposer.textComposer.setCommand(command);
      });

      expect(screen.getByText('ban')).toBeInTheDocument();

      await initQuotedMessagePreview(mainListMessage);

      await waitFor(() => {
        expect(screen.queryByText('ban')).not.toBeInTheDocument();
      });
    });
  });

  describe('send button', () => {
    it('should be renderer for empty input', async () => {
      await renderComponent();
      expect(screen.getByTestId(SEND_BTN_TEST_ID)).toBeInTheDocument();
    });

    it('should not be rendered during active cooldown period', async () => {
      await renderWithActiveCooldown();
      expect(screen.queryByTestId(SEND_BTN_TEST_ID)).not.toBeInTheDocument();
    });

    it('should not be renderer if explicitly hidden', async () => {
      await renderComponent({ messageInputProps: { hideSendButton: true } });
      expect(screen.queryByTestId(SEND_BTN_TEST_ID)).not.toBeInTheDocument();
    });

    it('should be disabled if there is no content to be submitted', async () => {
      await renderComponent();
      expect(screen.getByTestId(SEND_BTN_TEST_ID)).toBeDisabled();
    });

    it('should be enabled if there is text to be submitted', async () => {
      await renderComponent();
      await act(() => {
        fireEvent.change(screen.getByPlaceholderText(inputPlaceholder), {
          target: {
            value: 'X',
          },
        });
      });
      expect(screen.getByTestId(SEND_BTN_TEST_ID)).toBeEnabled();
    });

    it('should be enabled if there are uploads to be submitted', async () => {
      const { customChannel, customClient } = await setup();
      await renderComponent({
        customChannel,
        customClient,
      });
      const file = getFile();

      await act(async () => {
        await fireEvent.change(screen.getByTestId(FILE_INPUT_TEST_ID), {
          target: {
            files: [file],
          },
        });
      });
      expect(screen.getByTestId(SEND_BTN_TEST_ID)).toBeEnabled();
    });

    it('should disabled if there are failed attachments only', async () => {
      const error = new Error('Upload failed');
      const { customChannel, customClient } = await setupUploadRejected(error);
      await renderComponent({
        customChannel,
        customClient,
      });
      const file = getFile();

      await act(async () => {
        await fireEvent.change(screen.getByTestId(FILE_INPUT_TEST_ID), {
          target: {
            files: [file],
          },
        });
      });
      expect(screen.getByTestId(SEND_BTN_TEST_ID)).not.toBeEnabled();
    });
  });

  describe('cooldown timer', () => {
    const COOLDOWN_TIMER_TEST_ID = 'cooldown-timer';

    it('should be renderer during active cool-down period', async () => {
      await renderWithActiveCooldown();
      expect(screen.getByTestId(COOLDOWN_TIMER_TEST_ID)).toBeInTheDocument();
    });

    it('should not be renderer if send button explicitly hidden', async () => {
      await renderWithActiveCooldown({ messageInputProps: { hideSendButton: true } });
      expect(screen.queryByTestId(COOLDOWN_TIMER_TEST_ID)).not.toBeInTheDocument();
    });

    it('should be removed after cool-down period elapsed', async () => {
      const { channel } = await renderWithActiveCooldown();
      expect(screen.getByTestId(COOLDOWN_TIMER_TEST_ID)).toHaveTextContent(
        cooldown.toString(),
      );
      await act(() => {
        channel.cooldownTimer.state.next(
          fromPartial<CooldownTimerState>({ cooldownRemaining: 0 }),
        );
      });
      expect(screen.queryByTestId(COOLDOWN_TIMER_TEST_ID)).not.toBeInTheDocument();
    });
  });

  describe('SendToChannelCheckbox', () => {
    it('does not render in the channel context', async () => {
      const { customChannel, customClient } = await setup();
      await renderComponent({
        customChannel,
        customClient,
      });
      expect(screen.queryByTestId('send-to-channel-checkbox')).not.toBeInTheDocument();
    });
  });

  describe('Edit mode', () => {
    const enterEditMode = async () => {
      const actionsButton = await screen.findByTestId('message-actions-toggle-button');
      await act(() => {
        fireEvent.click(actionsButton);
      });
      const editButton = await screen.findByText(/^Edit Message$/i);
      await act(() => {
        fireEvent.click(editButton);
      });
    };

    it('should restore composer text when cancelling edit mode', async () => {
      await renderComponent();
      const textarea = await screen.findByPlaceholderText(inputPlaceholder);

      // Type some text before editing
      await act(() => {
        fireEvent.change(textarea, { target: { value: 'my draft message' } });
      });
      expect(textarea).toHaveValue('my draft message');

      // Enter edit mode on the rendered message
      await enterEditMode();

      // Textarea should now show the edited message's text
      await waitFor(() => {
        expect(textarea).toHaveValue(mainListMessage.text);
      });

      // Cancel edit via the dismiss button
      const cancelButton = await screen.findByTestId(
        'quoted-message-preview-dismiss-btn',
      );
      await act(() => {
        fireEvent.click(cancelButton);
      });

      // Original draft text should be restored
      await waitFor(() => {
        expect(textarea).toHaveValue('my draft message');
      });
    });

    it('should return to empty composer when cancelling edit if composer was empty', async () => {
      await renderComponent();
      const textarea = await screen.findByPlaceholderText(inputPlaceholder);
      expect(textarea).toHaveValue('');

      await enterEditMode();

      await waitFor(() => {
        expect(textarea).toHaveValue(mainListMessage.text);
      });

      const cancelButton = await screen.findByTestId(
        'quoted-message-preview-dismiss-btn',
      );
      await act(() => {
        fireEvent.click(cancelButton);
      });

      await waitFor(() => {
        expect(textarea).toHaveValue('');
      });
    });

    it('should clear active command when entering edit mode', async () => {
      const { channel } = await renderComponent();
      const command = fromPartial<Command>({
        args: '[text]',
        description: 'Post a random gif to the channel',
        name: 'giphy',
      });

      await act(() => {
        channel.messageComposer.textComposer.setCommand(command);
      });

      expect(screen.getByText('giphy')).toBeInTheDocument();

      await enterEditMode();

      await waitFor(() => {
        expect(screen.queryByText('giphy')).not.toBeInTheDocument();
      });
    });

    it('should not render command suggestions when all commands are disabled', async () => {
      const scrollIntoView = Element.prototype.scrollIntoView;
      // eslint-disable-next-line vitest/prefer-spy-on
      Element.prototype.scrollIntoView = vi.fn();

      await renderComponent();
      const textarea = await screen.findByPlaceholderText(inputPlaceholder);

      await act(async () => {
        await fireEvent.change(textarea, {
          target: {
            selectionEnd: 1,
            selectionStart: 1,
            value: '/',
          },
        });
      });

      await waitFor(() => {
        expect(screen.getByText('giphy')).toBeInTheDocument();
      });

      await enterEditMode();

      await waitFor(() => {
        expect(screen.queryByText('giphy')).not.toBeInTheDocument();
      });

      await act(async () => {
        await fireEvent.change(textarea, {
          target: {
            selectionEnd: 1,
            selectionStart: 1,
            value: '/',
          },
        });
      });

      await waitFor(() => {
        expect(
          document.querySelector('.str-chat__suggestion-list'),
        ).not.toBeInTheDocument();
      });

      // RW9b: with the listbox suppressed, the textarea must not advertise a
      // dangling aria-controls/aria-activedescendant pointing at a missing element.
      expect(textarea).not.toHaveAttribute('aria-controls');
      expect(textarea).not.toHaveAttribute('aria-activedescendant');

      Element.prototype.scrollIntoView = scrollIntoView;
    });
  });
});