Merge branch 'main' into 111

core/src/ten_manager/designer_frontend/package.json

@@ -24,39 +24,43 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dagre": "^0.8.5",
-    "i18next": "^24.1.2",
+    "i18next": "^24.2.0",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
-    "lucide-react": "^0.468.0",
+    "lucide-react": "^0.469.0",
     "monaco-editor": "^0.52.2",
     "next-themes": "^0.4.4",
+    "pino": "^9.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^15.2.0",
+    "react-i18next": "^15.4.0",
     "react-icons": "^5.4.0",
     "sonner": "^1.7.1",
-    "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "swr": "^2.3.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.15.0",
+    "@eslint/js": "^9.17.0",
     "@types/dagre": "^0.7.52",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.20",
-    "esbuild": "^0.24.0",
-    "eslint": "^9.15.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "globals": "^15",
+    "esbuild": "^0.24.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "pino-pretty": "^13.0.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.7",
-    "typescript-eslint": "^8.15.0",
-    "vite": "^6.0"
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.6"
   }
-}
+}

core/src/ten_manager/designer_frontend/src/App.tsx

@@ -4,7 +4,7 @@
 // Licensed under the Apache License, Version 2.0, with certain conditions.
 // Refer to the "LICENSE" file in the root directory for more information.
 //
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import {
   addEdge,
   applyEdgeChanges,
@@ -17,14 +17,13 @@ import { toast } from "sonner";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import AppBar from "@/components/AppBar/AppBar";
 import FlowCanvas from "@/flow/FlowCanvas";
+import { useVersion } from "@/api/services/common";
 import {
-  fetchConnections,
-  fetchDesignerVersion,
-  fetchGraphs,
-  fetchNodes,
-  setBaseDir,
-} from "@/api/api";
-import { Graph } from "@/api/interface";
+  getGraphNodes,
+  getGraphConnections,
+  getGraphs,
+} from "@/api/services/graphs";
+import { putBaseDir } from "@/api/services/fileSystem";
 import { CustomNodeType } from "@/flow/CustomNode";
 import { CustomEdgeType } from "@/flow/CustomEdge";
 import {
@@ -35,28 +34,20 @@ import {
   processNodes,
 } from "@/flow/graph";
 import Popup from "@/components/Popup/Popup";
+import type { IGraph } from "@/types/graphs";
 
 const App: React.FC = () => {
-  const [version, setVersion] = useState<string>("");
-  const [graphs, setGraphs] = useState<Graph[]>([]);
+  const [graphs, setGraphs] = useState<IGraph[]>([]);
   const [showGraphSelection, setShowGraphSelection] = useState<boolean>(false);
   const [nodes, setNodes] = useState<CustomNodeType[]>([]);
   const [edges, setEdges] = useState<CustomEdgeType[]>([]);
 
   // Get the version of tman.
-  useEffect(() => {
-    fetchDesignerVersion()
-      .then((version) => {
-        setVersion(version);
-      })
-      .catch((err) => {
-        console.error("Failed to fetch version:", err);
-      });
-  }, []);
+  const { version } = useVersion();
 
   const handleOpenExistingGraph = useCallback(async () => {
     try {
-      const fetchedGraphs = await fetchGraphs();
+      const fetchedGraphs = await getGraphs();
       setGraphs(fetchedGraphs);
       setShowGraphSelection(true);
     } catch (error: unknown) {
@@ -73,8 +64,8 @@ const App: React.FC = () => {
     setShowGraphSelection(false);
 
     try {
-      const backendNodes = await fetchNodes(graphName);
-      const backendConnections = await fetchConnections(graphName);
+      const backendNodes = await getGraphNodes(graphName);
+      const backendConnections = await getGraphConnections(graphName);
 
       let initialNodes: CustomNodeType[] = processNodes(backendNodes);
 
@@ -128,12 +119,14 @@ const App: React.FC = () => {
 
   const handleSetBaseDir = useCallback(async (folderPath: string) => {
     try {
-      await setBaseDir(folderPath.trim());
+      await putBaseDir(folderPath.trim());
       setNodes([]); // Clear the contents of the FlowCanvas.
       setEdges([]);
     } catch (error: unknown) {
       if (error instanceof Error) {
-        toast.error(`Failed to open a new app folder: ${error.message}`);
+        toast.error(`Failed to open a new app folder`, {
+          description: error.message,
+        });
       } else {
         toast.error("An unknown error occurred.");
       }

core/src/ten_manager/designer_frontend/src/api/endpoints/addons.ts

@@ -0,0 +1,28 @@
+//
+// Copyright © 2025 Agora
+// This file is part of TEN Framework, an open source project.
+// Licensed under the Apache License, Version 2.0, with certain conditions.
+// Refer to the "LICENSE" file in the root directory for more information.
+//
+import z from "zod";
+
+import { API_DESIGNER_V1, ENDPOINT_METHOD } from "@/api/endpoints/constant";
+import { genResSchema } from "@/api/endpoints/utils";
+import type { IExtensionAddon } from "@/types/addons";
+
+export const ENDPOINT_ADDONS = {
+  extensionByName: {
+    [ENDPOINT_METHOD.GET]: {
+      url: `${API_DESIGNER_V1}/addons/extensions/:name`,
+      method: ENDPOINT_METHOD.GET,
+      pathParams: ["name"],
+      responseSchema: genResSchema<IExtensionAddon>(
+        z.object({
+          name: z.string(),
+          url: z.string(),
+          api: z.unknown().optional(),
+        })
+      ),
+    },
+  },
+};