🎙️ fix: Optimize and Fix Browser TTS Incompatibility (firefox)

[danny-avila]

Summary

Addresses TTS issues with MSEDGE voices on firefox

• Refactored the HoverButtons and MessageAudio components to only pass necessary props, reducing unnecessary re-renders and improving performance.
• Updated the useTextToSpeech hook to accept an object of props instead of individual parameters
• Enhanced the MessageAudio component to handle null or undefined values more gracefully (type safety)
• Optimized the useEffect hook in MessageAudio to only run when necessary dependencies change.
• Updated the useTextToSpeechEdge hook to handle browser compatibility issues, specifically for browsers that don't support 'audio/mpeg' (e.g., Firefox).
• Implemented a check for browser support of 'audio/mpeg' in useTextToSpeechEdge, returning a dummy object with empty functions when not supported.
• Added conditional rendering in useTextToSpeechEdge to prevent unnecessary initialization on unsupported browsers.

Testing

To test these changes:

1. Test the TTS functionality on different browsers, especially Chrome and Firefox.
2. Verify that the TTS buttons appear and function correctly in the chat interface.
3. Check that the audio playback works as expected on supported browsers.
4. Ensure that the application doesn't throw errors or break on unsupported browsers.

Test Configuration:

• Test on latest versions of Chrome, Firefox, and Edge browsers
• Test with different types of messages (text-only, code blocks, etc.)
• Verify functionality with different TTS voices and settings

Change Type

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• My changes do not introduce new warnings
• I have tested my changes in multiple browsers to ensure cross-browser compatibility

[rio2dev]

Thanks! I tested Safari on iPhone. MediaSource brokes whole app when opening Settings -> Speech tab.
Safari on iPhone does not have MediaSource.
https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#browser_compatibility

[danny-avila]

Thanks! I tested Safari on iPhone. MediaSource brokes whole app when opening Settings -> Speech tab.
Safari on iPhone does not have MediaSource.
https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#browser_compatibility

Thanks will look into it

[danny-avila]

Thanks! I tested Safari on iPhone. MediaSource brokes whole app when opening Settings -> Speech tab. Safari on iPhone does not have MediaSource. https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#browser_compatibility

Resolved here #3632