setmuted insted of setEnabled

frontend/app/UserContext.tsx

@@ -72,9 +72,9 @@ export const UserProvider: React.FC<{children: React.ReactNode}> = ({children})
     const toggleMute = useCallback(async () => {
         if (localTracks[0]) {
           if (isMuted) {
-            await localTracks[0].setEnabled(true);
+            await localTracks[0].setMuted(true);
           } else {
-            await localTracks[0].setEnabled(false);
+            await localTracks[0].setMuted(false);
           }
           setIsMuted(!isMuted);
         }
@@ -185,7 +185,7 @@ export const UserProvider: React.FC<{children: React.ReactNode}> = ({children})
         let client:IAgoraRTCClient 
         const init = async () => {
           try {
-            client  = await AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
+            client  = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
             clientRef.current = client;
             client.on('user-left', handleUserLeft);
             client.on('user-joined', handleUserJoined)

frontend/app/api/proxy/route.ts

@@ -3,10 +3,54 @@ import { NextRequest, NextResponse } from 'next/server';
 
 const API_BASE_URL = process.env.AGORA_AI_AGENT_URL || "http://47.251.115.141:8081";
 
+
+const corsHeaders = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+  };
+
+
+//   export async function OPTIONS() {
+//     return NextResponse.json({}, { headers: corsHeaders });
+//   }
+
+export async function OPTIONS(request: Request) {
+    const allowedOrigin = request.headers.get("origin");
+    const response = new NextResponse(null, {
+      status: 200,
+      headers: {
+        "Access-Control-Allow-Origin": allowedOrigin || "*",
+        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+        "Access-Control-Allow-Headers":
+          "Content-Type, Authorization, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version",
+        "Access-Control-Max-Age": "86400",
+      },
+    });
+
+    return response;
+  }
+
+// export async function POST(request: Request) {
+//     const allowedOrigin = request.headers.get("origin");
+//     const response = new NextResponse(null, {
+//       status: 200,
+//       headers: {
+//         "Access-Control-Allow-Origin": allowedOrigin || "http://localhost:9000",
+//         "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+//         "Access-Control-Allow-Headers":
+//           "Content-Type, Authorization, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version",
+//         "Access-Control-Max-Age": "86400",
+//       },
+//     });
+
+//     return response;
+// }
+
 export async function POST(request: NextRequest) {
 
-//   return NextResponse.json({ error: 'for debug' }, { status: 200 }); // for debugging
+//   return NextResponse.json({ error: 'for debug' }, { headers: corsHeaders }); // for debugging
 
+const allowedOrigin = request.headers.get("origin");
   try {
     const body = await request.json();
     const {action, channel_name, uid} = body
@@ -28,9 +72,34 @@ export async function POST(request: NextRequest) {
     }
 
     const data = await response.json();
-    return NextResponse.json(data);
+
+    const nextResponse = new NextResponse(data, {
+      status: 200,
+      headers: {
+        "Access-Control-Allow-Origin": allowedOrigin || "*",
+        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+        "Access-Control-Allow-Headers":
+          "Content-Type, Authorization, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version",
+        "Access-Control-Max-Age": "86400",
+      },
+    });
+
+    return nextResponse;
+
+    // return NextResponse.json(data, {status:200,  headers: corsHeaders });
   } catch (error) {
     console.error('Proxy error:', error);
-    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    // return NextResponse.json({ error: 'Internal Server Error' }, { status: 500,  headers: corsHeaders });
+    return new NextResponse(null, {
+        status: 200,
+        headers: {
+          "Access-Control-Allow-Origin": allowedOrigin || "*",
+          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+          "Access-Control-Allow-Headers":
+            "Content-Type, Authorization, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version",
+          "Access-Control-Max-Age": "86400",
+        },
+      });
+
   }
 }

frontend/app/middleware.js

@@ -0,0 +1,27 @@
+// src/middleware.js 
+// or 
+// src/app/middleware.js 
+// or 
+// src/pages/middleware.js 
+
+import { NextResponse } from "next/server";
+
+export function middleware() {
+    // retrieve the current response
+    const res = NextResponse.next()
+
+    // add the CORS headers to the response
+    res.headers.append('Access-Control-Allow-Credentials', "true")
+    res.headers.append('Access-Control-Allow-Origin', 'http://localhost:9000') // replace this your actual origin
+    res.headers.append('Access-Control-Allow-Methods', 'GET,DELETE,PATCH,POST,PUT')
+    res.headers.append(
+        'Access-Control-Allow-Headers',
+        'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
+    )
+    return res
+}
+
+// specify the path regex to apply the middleware to
+export const config = {
+    matcher: '/api/:path*',
+}

frontend/components/ui/agentcontrol.tsx

@@ -29,12 +29,13 @@ const connectToAIAgent = async (agentAction: 'start_agent' | 'stop_agent', chann
         throw new Error(`HTTP error! status: ${response.status}`);
       }
 
-      const data = await response.json();
+      // const data = await response.json();
+      console.log({agentResponse: response})
 
-      console.log({data})
+      // console.log({data})
       console.log(
-        `AI agent ${agentAction === 'start_agent' ? 'connected' : 'disconnected'}`,
-        data
+        `AI agent ${agentAction === 'start_agent' ? 'connected' : 'disconnected'}`, 
+        response
       );
     } catch (error) {
       console.error(`Failed to ${agentAction} AI agent connection:`, error);

frontend/next.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+    async headers() {
+      return [
+        {
+          // matching all API routes
+          source: "/api/:path*",
+          headers: [
+            { key: "Access-Control-Allow-Credentials", value: "true" },
+            { key: "Access-Control-Allow-Origin", value: "http://localhost:9000" },
+            { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
+            { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
+          ]
+        }
+      ]
+    }
+  };
+

vercel.json

@@ -0,0 +1,13 @@
+{
+    "headers": [
+      {
+        "source": "/api/(.*)",
+        "headers": [
+          { "key": "Access-Control-Allow-Credentials", "value": "true" },
+          { "key": "Access-Control-Allow-Origin", "value": "*" },
+          { "key": "Access-Control-Allow-Methods", "value": "GET,DELETE,PATCH,POST,PUT" },
+          { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
+        ]
+      }
+    ]
+  }