{ mockServerProps(mockConfigs.noModalities); const textarea = await canvas.findByRole('textbox'); const submitButton = await canvas.findByRole('button', { name: 'Send' }); // Expect the input to be focused after the component is mounted await expect(textarea).toHaveFocus(); // Expect the submit button to be disabled await expect(submitButton).toBeDisabled(); const text = 'What is the meaning of life?'; await userEvent.clear(textarea); await userEvent.type(textarea, text); await expect(textarea).toHaveValue(text); const fileInput = document.querySelector('input[type="file"]'); const acceptAttr = fileInput?.getAttribute('accept'); await expect(fileInput).toHaveAttribute('accept'); await expect(acceptAttr).not.toContain('image/'); await expect(acceptAttr).not.toContain('audio/'); // Open file attachments dropdown const fileUploadButton = canvas.getByText('Attach files'); await userEvent.click(fileUploadButton); // Check dropdown menu items are disabled (no modalities) const imagesButton = document.querySelector('.images-button'); const audioButton = document.querySelector('.audio-button'); await expect(imagesButton).toHaveAttribute('data-disabled'); await expect(audioButton).toHaveAttribute('data-disabled'); // Close dropdown by pressing Escape await userEvent.keyboard('{Escape}'); }} /> { mockServerProps(mockConfigs.visionOnly); // Open file attachments dropdown and verify it works const fileUploadButton = canvas.getByText('Attach files'); await userEvent.click(fileUploadButton); // Verify dropdown menu items exist const imagesButton = document.querySelector('.images-button'); const audioButton = document.querySelector('.audio-button'); await expect(imagesButton).toBeInTheDocument(); await expect(audioButton).toBeInTheDocument(); // Close dropdown by pressing Escape await userEvent.keyboard('{Escape}'); console.log('✅ Vision modality: Dropdown menu verified'); }} /> { mockServerProps(mockConfigs.audioOnly); // Open file attachments dropdown and verify it works const fileUploadButton = canvas.getByText('Attach files'); await userEvent.click(fileUploadButton); // Verify dropdown menu items exist const imagesButton = document.querySelector('.images-button'); const audioButton = document.querySelector('.audio-button'); await expect(imagesButton).toBeInTheDocument(); await expect(audioButton).toBeInTheDocument(); // Close dropdown by pressing Escape await userEvent.keyboard('{Escape}'); console.log('✅ Audio modality: Dropdown menu verified'); }} /> { mockServerProps(mockConfigs.bothModalities); const jpgAttachment = canvas.getByAltText('1.jpg'); const svgAttachment = canvas.getByAltText('hf-logo.svg'); const pdfFileExtension = canvas.getByText('PDF'); const pdfAttachment = canvas.getByText('example.pdf'); const pdfSize = canvas.getByText('342.82 KB'); await expect(jpgAttachment).toBeInTheDocument(); await expect(jpgAttachment).toHaveAttribute('src', jpgAsset); await expect(svgAttachment).toBeInTheDocument(); await expect(svgAttachment).toHaveAttribute('src', svgAsset); await expect(pdfFileExtension).toBeInTheDocument(); await expect(pdfAttachment).toBeInTheDocument(); await expect(pdfSize).toBeInTheDocument(); }} />