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/pages/WorkflowEditor.tsx

@@ -3,9 +3,10 @@ import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { ArrowLeft, Play, Save, Rocket, Plus, Bot, UserCheck, Wrench, Ban, Zap, X, Copy, MousePointer2 } from 'lucide-react';
 import { Button, Input, Badge } from '../components/UI';
-import { Assistant, WorkflowNode, WorkflowEdge, Workflow } from '../types';
+import { WorkflowNode, WorkflowEdge, Workflow } from '../types';
 import { DebugDrawer } from './Assistants';
-import { createWorkflow, fetchAssistants, fetchWorkflowById, updateWorkflow } from '../services/backendApi';
+import { createWorkflow, fetchWorkflowById, updateWorkflow } from '../services/backendApi';
+import { useAssistantsQuery } from '../services/queries';
 
 const toWorkflowNodeType = (type: WorkflowNode['type']): WorkflowNode['type'] => {
   if (type === 'conversation') return 'assistant';
@@ -80,7 +81,7 @@ export const WorkflowEditorPage: React.FC = () => {
   const [nodes, setNodes] = useState<WorkflowNode[]>(() => getTemplateNodes(templateType));
   const [edges, setEdges] = useState<WorkflowEdge[]>([]);
   const [createdAt, setCreatedAt] = useState('');
-  const [assistants, setAssistants] = useState<Assistant[]>([]);
+  const { data: assistants = [] } = useAssistantsQuery();
   
   const [selectedNodeName, setSelectedNodeName] = useState<string | null>(null);
   const [isAddMenuOpen, setIsAddMenuOpen] = useState(false);
@@ -215,18 +216,6 @@ export const WorkflowEditorPage: React.FC = () => {
     };
   }, [draggingNodeName, isPanning, zoom]);
 
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const assistantList = await fetchAssistants();
-        setAssistants(assistantList);
-      } catch (error) {
-        console.error(error);
-      }
-    };
-    loadData();
-  }, []);
-
   useEffect(() => {
     if (!id) return;
     const loadWorkflow = async () => {