Integrate React Query for data management and enhance Debug Preferences

- Added React Query for managing API calls related to assistants and voices.
- Introduced `useAssistantsQuery` and `useVoicesQuery` hooks for fetching data.
- Implemented mutations for creating, updating, and deleting voices using React Query.
- Integrated a global `QueryClient` for managing query states and configurations.
- Refactored components to utilize the new query hooks, improving data handling and performance.
- Added a Zustand store for managing debug preferences, including WebSocket URL and audio settings.

web/stores/debugPrefsStore.ts

@@ -0,0 +1,65 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type DebugPrefsState = {
+  wsUrl: string;
+  aecEnabled: boolean;
+  nsEnabled: boolean;
+  agcEnabled: boolean;
+  clientToolEnabledMap: Record<string, boolean>;
+  setWsUrl: (value: string) => void;
+  setAecEnabled: (value: boolean) => void;
+  setNsEnabled: (value: boolean) => void;
+  setAgcEnabled: (value: boolean) => void;
+  setClientToolEnabled: (toolId: string, enabled: boolean) => void;
+  hydrateClientToolDefaults: (toolIds: string[]) => void;
+};
+
+const getDefaultWsUrl = (): string => {
+  if (typeof window === 'undefined') {
+    return 'ws://localhost:8000/ws';
+  }
+  const defaultHost = window.location.hostname || 'localhost';
+  return `ws://${defaultHost}:8000/ws`;
+};
+
+export const useDebugPrefsStore = create<DebugPrefsState>()(
+  persist(
+    (set, get) => ({
+      wsUrl: getDefaultWsUrl(),
+      aecEnabled: true,
+      nsEnabled: true,
+      agcEnabled: true,
+      clientToolEnabledMap: {},
+      setWsUrl: (value) => set({ wsUrl: value }),
+      setAecEnabled: (value) => set({ aecEnabled: value }),
+      setNsEnabled: (value) => set({ nsEnabled: value }),
+      setAgcEnabled: (value) => set({ agcEnabled: value }),
+      setClientToolEnabled: (toolId, enabled) =>
+        set((state) => ({
+          clientToolEnabledMap: {
+            ...state.clientToolEnabledMap,
+            [toolId]: enabled,
+          },
+        })),
+      hydrateClientToolDefaults: (toolIds) => {
+        const current = get().clientToolEnabledMap;
+        let changed = false;
+        const nextMap: Record<string, boolean> = { ...current };
+        for (const toolId of toolIds) {
+          if (!(toolId in nextMap)) {
+            nextMap[toolId] = true;
+            changed = true;
+          }
+        }
+        if (changed) {
+          set({ clientToolEnabledMap: nextMap });
+        }
+      },
+    }),
+    {
+      name: 'assistants-debug-prefs',
+      version: 1,
+    }
+  )
+);