feat: Add Audio configuration setting to app configuration UI

[marcelodiaz558]

Important

1. Make sure you have read our contribution guidelines
2. Ensure there is an associated issue and you have been assigned to it
3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

This fixes #21956

This PR adds a new Audio configuration setting to the app configuration UI, positioned below the existing Vision and Document settings. This allows users to easily enable audio file uploads in their applications, including embedded chatbots.

Changes Made

• New Component: Created ConfigAudio component (web/app/components/app/configuration/config/config-audio.tsx) following the same pattern as existing Vision and Document configurations
• UI Integration: Added the Audio setting to the main configuration panel in the correct visual hierarchy
• Context Support: Extended the debug configuration context to include isShowAudioConfig flag
• Translations: Added English translation keys for the audio upload feature
• Model Feature Detection: Audio setting only appears when the selected model supports the audio feature flag

Problem Solved

Previously, users could not easily enable audio file uploads through the main app configuration UI. They had to work around this limitation by configuring audio uploads through user input variables, which was not intuitive. This change provides a consistent and discoverable way to enable audio file support.

Supported Audio Formats

When enabled, the following audio formats are supported:

• MP3, M4A, WAV, AMR, MPGA (up to 50MB per file)

UI Behavior

• The Audio setting appears automatically when a model with audio processing capabilities is selected
• Uses a microphone icon with violet background to distinguish it from Vision (blue) and Document (indigo)
• Follows the same toggle pattern as other file upload settings
• Integrates seamlessly with existing file upload configuration logic

This enhancement improves the user experience by making audio file upload configuration more discoverable and consistent with other file type settings.

Screenshots

Before

After

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

[Copilot]

Pull Request Overview

Adds a new Audio configuration toggle to the app’s debug configuration UI, enabling users to upload and process audio files alongside existing Vision and Document settings.

• Introduces translation entries for the Audio feature
• Extends the debug configuration context with an isShowAudioConfig flag
• Integrates a ConfigAudio component into the main configuration panel

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
web/i18n/en-US/app-debug.ts	Added audioUpload translation keys
web/context/debug-configuration.ts	Added isShowAudioConfig flag to context type and default
web/app/components/app/configuration/index.tsx	Computed isShowAudioConfig and passed it into context
web/app/components/app/configuration/config/index.tsx	Imported and rendered the ConfigAudio component
web/app/components/app/configuration/config/config-audio.tsx	Created new ConfigAudio component with toggle logic

Comments suppressed due to low confidence (1)

web/app/components/app/configuration/config/config-audio.tsx:15

• The new ConfigAudio component lacks dedicated unit or integration tests to verify its rendering and behavior; consider adding test coverage for toggling the audio configuration.

const ConfigAudio: FC = () => {