Add audio input/output mode support to chat with tools agent app

[Copilot]

Overview

This PR implements comprehensive audio input/output functionality for the chat with tools agent Streamlit app, addressing issue requirements while maintaining full backward compatibility with existing text-based interactions.

Key Features

Audio Mode Selection

Added a sidebar radio button selector allowing users to seamlessly switch between:

• テキスト: Traditional text input/output (unchanged existing functionality)
• 音声: New voice-based interaction mode

Audio Input Implementation

• Integrated audio-recorder-streamlit component with visual feedback
• Microphone button displays red when recording and black when idle as requested
• Optional Azure OpenAI Whisper integration for high-quality speech-to-text conversion
• Graceful fallback with informative messages when Azure OpenAI is not configured
• Comprehensive error handling for audio processing

Audio Output Implementation

• Uses gTTS for Japanese text-to-speech conversion of assistant responses
• Automatic playback in audio mode with proper temporary file management
• Clean resource handling with automatic cleanup

Professional Configuration

• Collapsible Azure OpenAI Whisper settings panel in sidebar
• Pre-configured defaults (API version: 2024-02-01, Model: whisper)
• Environment variable integration for seamless setup
• Optional configuration - works with or without Azure OpenAI

Technical Implementation

The implementation follows minimal-change principles:

• Zero Breaking Changes: All existing text functionality preserved exactly as before
• Conditional Logic: Clean branching based on selected mode
• Resource Management: Proper cleanup of temporary audio files
• Error Resilience: Comprehensive error handling with user-friendly messages

Screenshots

Text Mode (Backward Compatible):

Audio Mode Interface:

Audio Mode with Configuration Panel:

Text Mode Testing:

User Experience

Text Mode

• Identical interface to original implementation
• Full file upload support maintained
• All existing tools integration preserved

Audio Mode

• 🎤 Visual microphone with recording feedback
• Automatic speech recognition (when configured)
• 🔊 Auto-playing text-to-speech responses
• Clear status messages and configuration guidance

Dependencies

Both required libraries were already present in pyproject.toml:

• audio-recorder-streamlit>=0.0.10
• gtts>=2.5.4

Testing

• ✅ Text mode maintains 100% backward compatibility
• ✅ Audio mode provides smooth voice interaction
• ✅ Mode switching works seamlessly
• ✅ Error handling tested for various scenarios
• ✅ Configuration panel functions correctly

This implementation successfully delivers the requested audio input/output functionality while preserving all existing capabilities, making it ready for production use.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>support audio input/output mode to chat with tools agent app</issue_title>
<issue_description>## 要件

template_langgraph/services/streamlits/pages/chat_with_tools_agent.py に tool call agent と対話できる Streamlit アプリがあります。
現状、テキスト入出力のみをサポートしており、ユーザーはチャットフォームから文字列を入力し、agent が文字列を表示する構成となっています。

今回新たに、音声入出力をサポートしてほしいです。
既存機能との互換性を担保するため、入出力モード設定をサイドバーから設定できるようにしてください。入出力モードが"テキスト"の場合は既存の機能そのままに互換性を担保してください。入出力モードが"音声"になったときに音声入出力がオンになります。

音声入出力モードの場合以下の実装により、ユーザーはブラウザの音声入力・音声出力を利用できます。

• audio-recorder-streamlit を使ったマイク経由での音声入力機能のサポート
  • ユーザーは streamlit アプリ上に表示されているマイク入力ボタンを押下すると音声入力ができます。アイコンが赤のときに入力中・黒のときはオフとして視覚的にわかるようにしてください。
• gTTS による音声出力のサポート
  </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #160

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.