From ad17b27c3d6aadde9cf232fac4ce4d2c813c53d2 Mon Sep 17 00:00:00 2001
From: musistudio <m@musiiot.top>
Date: Wed, 30 Jul 2025 11:55:55 +0800
Subject: [PATCH] feat: get all transformers

---
 src/server.ts                   | 18 +++++++++++++++---
 ui/src/components/Providers.tsx | 30 +++++++++++++++++++++++-------
 ui/src/locales/en.json          |  2 +-
 ui/src/locales/zh.json          |  2 +-
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/server.ts b/src/server.ts
index be0c895..bcb65da 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -13,6 +13,18 @@ export const createServer = (config: any): Server => {
     return await readConfigFile();
   });
 
+  server.app.get("/api/transformers", async () => {
+    const transformers =
+      server.app._server!.transformerService.getAllTransformers();
+    const transformerList = Array.from(transformers.entries()).map(
+      ([name, transformer]: any) => ({
+        name,
+        endpoint: transformer.endPoint || null,
+      })
+    );
+    return { transformers: transformerList };
+  });
+
   // Add endpoint to save config.json
   server.app.post("/api/config", async (req) => {
     const newConfig = req.body;
@@ -26,8 +38,8 @@ export const createServer = (config: any): Server => {
 
     // Restart the service after a short delay to allow response to be sent
     setTimeout(() => {
-      const { spawn } = require('child_process');
-      spawn('ccr', ['restart'], { detached: true, stdio: 'ignore' });
+      const { spawn } = require("child_process");
+      spawn("ccr", ["restart"], { detached: true, stdio: "ignore" });
     }, 1000);
   });
 
@@ -35,7 +47,7 @@ export const createServer = (config: any): Server => {
   server.app.register(fastifyStatic, {
     root: join(__dirname, "..", "dist"),
     prefix: "/ui/",
-    maxAge: "1h"
+    maxAge: "1h",
   });
 
   // Redirect /ui to /ui/ for proper static file serving
diff --git a/ui/src/components/Providers.tsx b/ui/src/components/Providers.tsx
index 7002df8..469bc86 100644
--- a/ui/src/components/Providers.tsx
+++ b/ui/src/components/Providers.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -18,6 +18,7 @@ import { X, Trash2, Plus } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Combobox } from "@/components/ui/combobox";
 import { ComboInput } from "@/components/ui/combo-input";
+import { api } from "@/lib/api";
 
 
 export function Providers() {
@@ -28,8 +29,23 @@ export function Providers() {
   const [hasFetchedModels, setHasFetchedModels] = useState<Record<number, boolean>>({});
   const [providerParamInputs, setProviderParamInputs] = useState<Record<string, {name: string, value: string}>>({});
   const [modelParamInputs, setModelParamInputs] = useState<Record<string, {name: string, value: string}>>({});
+  const [availableTransformers, setAvailableTransformers] = useState<{name: string; endpoint: string | null;}[]>([]);
   const comboInputRef = useRef<HTMLInputElement>(null);
 
+  // Fetch available transformers when component mounts
+  useEffect(() => {
+    const fetchTransformers = async () => {
+      try {
+        const response = await api.get<{transformers: {name: string; endpoint: string | null;}[]}>('/transformers');
+        setAvailableTransformers(response.transformers);
+      } catch (error) {
+        console.error('Failed to fetch transformers:', error);
+      }
+    };
+
+    fetchTransformers();
+  }, []);
+
   if (!config) {
     return null;
   }
@@ -438,9 +454,9 @@ export function Providers() {
                 {/* Add new transformer */}
                 <div className="flex gap-2">
                   <Combobox
-                    options={config.transformers.map(t => ({
-                      label: t.path.split('/').pop() || t.path,
-                      value: t.path
+                    options={availableTransformers.map(t => ({
+                      label: t.name,
+                      value: t.name
                     }))}
                     value=""
                     onChange={(value) => {
@@ -591,9 +607,9 @@ export function Providers() {
                         <div className="flex gap-2">
                           <div className="flex-1 flex gap-2">
                             <Combobox
-                              options={config.transformers.map(t => ({
-                                label: t.path.split('/').pop() || t.path,
-                                value: t.path
+                              options={availableTransformers.map(t => ({
+                                label: t.name,
+                                value: t.name
                               }))}
                               value=""
                               onChange={(value) => {
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index d988770..cc25c27 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -1,6 +1,6 @@
 {
   "app": {
-    "title": "Configuration",
+    "title": "Claude Code Router",
     "save": "Save",
     "save_and_restart": "Save and Restart",
     "cancel": "Cancel",
diff --git a/ui/src/locales/zh.json b/ui/src/locales/zh.json
index 2f427dd..95ecd21 100644
--- a/ui/src/locales/zh.json
+++ b/ui/src/locales/zh.json
@@ -1,6 +1,6 @@
 {
   "app": {
-    "title": "配置",
+    "title": "Claude Code Router",
     "save": "保存",
     "save_and_restart": "保存并重启",
     "cancel": "取消",