{ 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/'); const fileUploadButton = canvas.getByText('Attach files'); await userEvent.click(fileUploadButton); const recordButton = canvas.getAllByRole('button', { name: 'Start recording' })[1]; const imagesButton = document.querySelector('.images-button'); const audioButton = document.querySelector('.audio-button'); await expect(recordButton).toBeDisabled(); await expect(imagesButton).toHaveAttribute('data-disabled'); await expect(audioButton).toHaveAttribute('data-disabled'); }} /> { mockServerProps(mockConfigs.visionOnly); // Test initial file input state (should accept images but not audio) const fileInput = document.querySelector('input[type="file"]'); const acceptAttr = fileInput?.getAttribute('accept'); console.log('Vision modality accept attr:', acceptAttr); const fileUploadButton = canvas.getByText('Attach files'); await userEvent.click(fileUploadButton); // Test that record button is disabled (no audio support) const recordButton = canvas.getAllByRole('button', { name: 'Start recording' })[1]; await expect(recordButton).toBeDisabled(); // Test that Images button is enabled (vision support) const imagesButton = document.querySelector('.images-button'); await expect(imagesButton).not.toHaveAttribute('data-disabled'); // Test that Audio button is disabled (no audio support) const audioButton = document.querySelector('.audio-button'); await expect(audioButton).toHaveAttribute('data-disabled'); // Fix for dropdown menu side effect const body = document.querySelector('body'); if (body) body.style.pointerEvents = 'all'; console.log('✅ Vision modality: Images enabled, Audio/Recording disabled'); }} /> { mockServerProps(mockConfigs.audioOnly); // Test initial file input state (should accept audio but not images) const fileInput = document.querySelector('input[type="file"]'); const acceptAttr = fileInput?.getAttribute('accept'); console.log('Audio modality accept attr:', acceptAttr); const fileUploadButton = canvas.getByText('Attach files'); await userEvent.click(fileUploadButton); // Test that record button is enabled (audio support) const recordButton = canvas.getAllByRole('button', { name: 'Start recording' })[1]; await expect(recordButton).not.toBeDisabled(); // Test that Images button is disabled (no vision support) const imagesButton = document.querySelector('.images-button'); await expect(imagesButton).toHaveAttribute('data-disabled'); // Test that Audio button is enabled (audio support) const audioButton = document.querySelector('.audio-button'); await expect(audioButton).not.toHaveAttribute('data-disabled'); // Fix for dropdown menu side effect const body = document.querySelector('body'); if (body) body.style.pointerEvents = 'all'; console.log('✅ Audio modality: Audio/Recording enabled, Images disabled'); }} /> { 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(); }} />