feat: conditionally render voice button based on voice mode state (#8561)

* chore: update webrtcvad dependency and add optional audio support

- Updated webrtcvad version requirement to >=1.9.4 in pyproject.toml and uv.lock.
- Moved webrtcvad to optional dependencies under the new 'audio' category in both pyproject.toml files for better modularity.
- Ensured compatibility with existing dependencies while enhancing documentation for optional audio features.

* fix: handle optional import of voice_mode_router in API initialization

- Updated the API router initialization to conditionally include the voice_mode_router if it is available, improving modularity and preventing import errors.
- Adjusted the import statement for voice_mode_router to handle ImportError gracefully, ensuring the application remains robust in its absence.

* feat: add voice mode flag to API configuration

- Introduced a new function `get_voice_mode_enabled` to check for the availability of the `webrtcvad` library, enhancing the API's capability to support voice mode features.
- Updated the `ConfigResponse` schema to include `voice_mode_enabled` flag, allowing clients to query the status of voice mode support.
- Integrated the voice mode feature flag into the `get_config` endpoint response, improving the configurability of the API.

* test: skip voice mode tests if webrtcvad is not installed

- Added a conditional import for the webrtcvad library in the voice mode test suite.
- Implemented a pytest marker to skip tests when webrtcvad is unavailable, enhancing test robustness and preventing unnecessary failures.

* feat: add voice mode state management to flows manager store

- Introduced `voiceModeEnabled` state and `setVoiceModeEnabled` action in the flows manager store to manage the voice mode feature.
- Updated the `ConfigResponse` interface and `useGetConfig` hook to integrate the new voice mode state, allowing for dynamic configuration updates.
- Enhanced the API's configurability by ensuring the voice mode state is properly set based on the API response.

* feat: conditionally render voice button based on voice mode state

- Integrated `voiceModeEnabled` from the flows manager store to control the visibility of the VoiceButton component.
- The VoiceButton will now return null if voice mode is not enabled, enhancing the user interface by preventing unnecessary rendering.

* fix: ensure boolean conversion for voice mode state in config hook

- Updated the `setVoiceModeEnabled` function in the `useGetConfig` hook to explicitly convert the `voice_mode_enabled` value to a boolean, ensuring consistent handling of the voice mode state based on API responses.

* refactor: conditionally import voice_mode_router in API initialization

- Updated the API router to conditionally include the voice_mode_router based on its availability, enhancing modularity and preventing import errors.
- Adjusted the __init__.py file to dynamically add voice_mode_router to the __all__ list if the import is successful, improving the API's robustness.

* chore: revert mcp version update

* refactor: reorder router initialization and add audio flag to backend install task

* feat: add audio module to backend installation command in VS Code tasks

* ci: add audio extras to uv sync in frontend tests

src/frontend/src/controllers/API/queries/config/use-get-config.ts

@@ -21,6 +21,7 @@ export interface ConfigResponse {
   webhook_polling_interval: number;
   serialization_max_items_length: number;
   event_delivery: EventDeliveryType;
+  voice_mode_enabled: boolean;
 }
 
 export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
@@ -44,6 +45,9 @@ export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
     (state) => state.setWebhookPollingInterval,
   );
   const setEventDelivery = useUtilityStore((state) => state.setEventDelivery);
+  const setVoiceModeEnabled = useFlowsManagerStore(
+    (state) => state.setVoiceModeEnabled,
+  );
   const { query } = UseRequestProcessor();
 
   const getConfigFn = async () => {
@@ -65,6 +69,7 @@ export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
         data.webhook_polling_interval ?? DEFAULT_POLLING_INTERVAL,
       );
       setEventDelivery(data.event_delivery ?? EventDeliveryType.POLLING);
+      setVoiceModeEnabled(Boolean(data.voice_mode_enabled));
     }
     return data;
   };

src/frontend/src/modals/IOModal/components/chatView/chatInput/components/voice-assistant/components/voice-button.tsx

@@ -1,6 +1,7 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import { Button } from "@/components/ui/button";
 import { ICON_STROKE_WIDTH } from "@/constants/constants";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { useVoiceStore } from "@/stores/voiceStore";
 
 interface VoiceButtonProps {
@@ -11,6 +12,13 @@ const VoiceButton = ({ toggleRecording }: VoiceButtonProps) => {
   const setNewSessionCloseVoiceAssistant = useVoiceStore(
     (state) => state.setNewSessionCloseVoiceAssistant,
   );
+  const voiceModeEnabled = useFlowsManagerStore(
+    (state) => state.voiceModeEnabled,
+  );
+
+  if (!voiceModeEnabled) {
+    return null;
+  }
 
   return (
     <>

src/frontend/src/stores/flowsManagerStore.ts

@@ -17,6 +17,8 @@ const past = {};
 const future = {};
 
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
+  voiceModeEnabled: false,
+  setVoiceModeEnabled: (voiceModeEnabled: boolean) => set({ voiceModeEnabled }),
   IOModalOpen: false,
   setIOModalOpen: (IOModalOpen: boolean) => {
     set({ IOModalOpen });

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -29,6 +29,8 @@ export type FlowsManagerStoreType = {
   IOModalOpen: boolean;
   setIOModalOpen: (IOModalOpen: boolean) => void;
   resetStore: () => void;
+  voiceModeEnabled: boolean;
+  setVoiceModeEnabled: (voiceModeEnabled: boolean) => void;
 };
 
 export type UseUndoRedoOptions = {