feat: support api proxy (#266)

1. proxy to rewrite all front-end request to local server
2. remove .env.example, commit .env as default file

playground/.env

@@ -0,0 +1 @@
+AGENT_SERVER_URL=http://localhost:8080

playground/.gitignore

@@ -73,7 +73,8 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
+# .env
+!.env
 .env.development.local
 .env.test.local
 .env.production.local

playground/Dockerfile

@@ -4,7 +4,7 @@ FROM base AS builder
 
 WORKDIR /app
 
-COPY .env.example .env
+# COPY .env.example .env
 COPY . .
 
 RUN npm i && \

playground/next.config.mjs

@@ -1,9 +1,41 @@
 /** @type {import('next').NextConfig} */
+
+const { AGENT_SERVER_URL } = process.env;
+
+// Check if environment variables are available
+if (!AGENT_SERVER_URL) {
+  throw "Environment variables AGENT_SERVER_URL are not available";
+}
+
 const nextConfig = {
   // basePath: '/ai-agent',
   // output: 'export',
   output: 'standalone',
   reactStrictMode: false,
+  async rewrites() {
+    return [
+      // customize agents start at /app/api/agents/start.tsx
+      {
+        source: '/api/agents/start',
+        destination: '/api/agents/start',
+      },
+      // Proxy all other agents API requests
+      {
+        source: '/api/agents/:path*',
+        destination: `${AGENT_SERVER_URL}/:path*`,
+      },
+      // Proxy all other documents requests
+      {
+        source: '/api/vector/:path*',
+        destination: `${AGENT_SERVER_URL}/vector/:path*`,
+      },
+      // Proxy all other documents requests
+      {
+        source: '/api/token/:path*',
+        destination: `${AGENT_SERVER_URL}/token/:path*`,
+      },
+    ];
+  },
   webpack(config) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>

playground/src/common/constant.ts

@@ -1,6 +1,4 @@
 import { IOptions, ColorItem, LanguageOptionItem, VoiceOptionItem, GraphOptionItem } from "@/types"
-
-export const REQUEST_URL = process.env.NEXT_PUBLIC_REQUEST_URL ?? ""
 export const GITHUB_URL = "https://github.com/TEN-framework/ASTRA.ai"
 export const OPTIONS_KEY = "__options__"
 export const DEFAULT_OPTIONS: IOptions = {

playground/src/common/request.ts

@@ -1,5 +1,3 @@
-import { AnyObject } from "antd/es/_util/type"
-import { REQUEST_URL } from "./constant"
 import { genUUID } from "./utils"
 import { Language } from "@/types"
 
@@ -17,7 +15,8 @@ interface GenAgoraDataConfig {
 }
 
 export const apiGenAgoraData = async (config: GenAgoraDataConfig) => {
-  const url = `${REQUEST_URL}/token/generate`
+  // the request will be rewrite at next.config.mjs to send to $AGENT_SERVER_URL
+  const url = `/api/token/generate`
   const { userId, channel } = config
   const data = {
     request_id: genUUID(),
@@ -59,7 +58,7 @@ export const apiStartService = async (config: StartRequestConfig): Promise<any>
 }
 
 export const apiStopService = async (channel: string) => {
-  // look at app/api/agents/stop/route.tsx for the server-side implementation
+  // the request will be rewrite at next.config.mjs to send to $AGENT_SERVER_URL
   const url = `/api/agents/stop`
   const data = {
     request_id: genUUID(),
@@ -77,7 +76,7 @@ export const apiStopService = async (channel: string) => {
 }
 
 export const apiGetDocumentList = async () => {
-  const url = `${REQUEST_URL}/vector/document/preset/list`
+  const url = `/api/vector/document/preset/list`
   let resp: any = await fetch(url, {
     method: "GET",
     headers: {
@@ -92,7 +91,8 @@ export const apiGetDocumentList = async () => {
 }
 
 export const apiUpdateDocument = async (options: { channel: string, collection: string, fileName: string }) => {
-  const url = `${REQUEST_URL}/vector/document/update`
+  // the request will be rewrite at next.config.mjs to send to $AGENT_SERVER_URL
+  const url = `/api/vector/document/update`
   const { channel, collection, fileName } = options
   const data = {
     request_id: genUUID(),
@@ -114,7 +114,8 @@ export const apiUpdateDocument = async (options: { channel: string, collection:
 
 // ping/pong 
 export const apiPing = async (channel: string) => {
-  const url = `${REQUEST_URL}/ping`
+  // the request will be rewrite at next.config.mjs to send to $AGENT_SERVER_URL
+  const url = `/api/agents/ping`
   const data = {
     request_id: genUUID(),
     channel_name: channel

playground/src/components/pdfSelect/upload/index.tsx

@@ -1,7 +1,7 @@
 import { Select, Button, message, Upload, UploadProps } from "antd"
 import { useState } from "react"
 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
-import { REQUEST_URL, useAppSelector, genUUID } from "@/common"
+import { useAppSelector, genUUID } from "@/common"
 import { IPdfData } from "@/types"
 
 import styles from "./index.module.scss"
@@ -22,7 +22,7 @@ const PdfUpload = (props: PdfSelectProps) => {
     accept: "application/pdf",
     maxCount: 1,
     showUploadList: false,
-    action: `${REQUEST_URL}/vector/document/upload`,
+    action: `/api/vector/document/upload`,
     data: {
       channel_name: channel,
       uid: String(userId),