feat: refactor webui httpclient

web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState, useRef } from 'react';
 import styles from '@/app/home/plugins/plugins.module.css';
 import { PluginMarketCardVO } from '@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO';
 import PluginMarketCardComponent from '@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent';
-import { spaceClient } from '@/app/infra/http/HttpClient';
+import { getCloudServiceClientSync } from '@/app/infra/http';
 import { useTranslation } from 'react-i18next';
 import { Input } from '@/components/ui/input';
 import {
@@ -41,6 +41,8 @@ export default function PluginMarketComponent({
   const searchTimeout = useRef<NodeJS.Timeout | null>(null);
   const pageSize = 10;
 
+  const cloudServiceClient = getCloudServiceClientSync();
+
   useEffect(() => {
     initData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -72,7 +74,7 @@ export default function PluginMarketComponent({
     sortOrder: string = sortOrderValue,
   ) {
     setLoading(true);
-    spaceClient
+    cloudServiceClient
       .getMarketPlugins(page, pageSize, keyword, sortBy, sortOrder)
       .then((res) => {
         setMarketPluginList(

web/src/app/infra/http/BackendClient.ts

@@ -0,0 +1,292 @@
+import { BaseHttpClient } from './BaseHttpClient';
+import {
+  ApiRespProviderRequesters,
+  ApiRespProviderRequester,
+  ApiRespProviderLLMModels,
+  ApiRespProviderLLMModel,
+  LLMModel,
+  ApiRespPipelines,
+  Pipeline,
+  ApiRespPlatformAdapters,
+  ApiRespPlatformAdapter,
+  ApiRespPlatformBots,
+  ApiRespPlatformBot,
+  Bot,
+  ApiRespPlugins,
+  ApiRespPlugin,
+  ApiRespPluginConfig,
+  PluginReorderElement,
+  AsyncTaskCreatedResp,
+  ApiRespSystemInfo,
+  ApiRespAsyncTasks,
+  ApiRespUserToken,
+  GetPipelineResponseData,
+  GetPipelineMetadataResponseData,
+  AsyncTask,
+  ApiRespWebChatMessage,
+  ApiRespWebChatMessages,
+} from '@/app/infra/entities/api';
+import { GetBotLogsRequest } from '@/app/infra/http/requestParam/bots/GetBotLogsRequest';
+import { GetBotLogsResponse } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
+
+/**
+ * 后端服务客户端
+ * 负责与后端 API 的所有交互
+ */
+export class BackendClient extends BaseHttpClient {
+  constructor(baseURL: string) {
+    super(baseURL, false);
+  }
+
+  // ============ Provider API ============
+  public getProviderRequesters(): Promise<ApiRespProviderRequesters> {
+    return this.get('/api/v1/provider/requesters');
+  }
+
+  public getProviderRequester(name: string): Promise<ApiRespProviderRequester> {
+    return this.get(`/api/v1/provider/requesters/${name}`);
+  }
+
+  public getProviderRequesterIconURL(name: string): string {
+    if (this.instance.defaults.baseURL === '/') {
+      // 获取用户访问的URL
+      const url = window.location.href;
+      const baseURL = url.split('/').slice(0, 3).join('/');
+      return `${baseURL}/api/v1/provider/requesters/${name}/icon`;
+    }
+    return (
+      this.instance.defaults.baseURL +
+      `/api/v1/provider/requesters/${name}/icon`
+    );
+  }
+
+  // ============ Provider Model LLM ============
+  public getProviderLLMModels(): Promise<ApiRespProviderLLMModels> {
+    return this.get('/api/v1/provider/models/llm');
+  }
+
+  public getProviderLLMModel(uuid: string): Promise<ApiRespProviderLLMModel> {
+    return this.get(`/api/v1/provider/models/llm/${uuid}`);
+  }
+
+  public createProviderLLMModel(model: LLMModel): Promise<object> {
+    return this.post('/api/v1/provider/models/llm', model);
+  }
+
+  public deleteProviderLLMModel(uuid: string): Promise<object> {
+    return this.delete(`/api/v1/provider/models/llm/${uuid}`);
+  }
+
+  public updateProviderLLMModel(
+    uuid: string,
+    model: LLMModel,
+  ): Promise<object> {
+    return this.put(`/api/v1/provider/models/llm/${uuid}`, model);
+  }
+
+  public testLLMModel(uuid: string, model: LLMModel): Promise<object> {
+    return this.post(`/api/v1/provider/models/llm/${uuid}/test`, model);
+  }
+
+  // ============ Pipeline API ============
+  public getGeneralPipelineMetadata(): Promise<GetPipelineMetadataResponseData> {
+    // as designed, this method will be deprecated, and only for developer to check the prefered config schema
+    return this.get('/api/v1/pipelines/_/metadata');
+  }
+
+  public getPipelines(): Promise<ApiRespPipelines> {
+    return this.get('/api/v1/pipelines');
+  }
+
+  public getPipeline(uuid: string): Promise<GetPipelineResponseData> {
+    return this.get(`/api/v1/pipelines/${uuid}`);
+  }
+
+  public createPipeline(pipeline: Pipeline): Promise<{
+    uuid: string;
+  }> {
+    return this.post('/api/v1/pipelines', pipeline);
+  }
+
+  public updatePipeline(uuid: string, pipeline: Pipeline): Promise<object> {
+    return this.put(`/api/v1/pipelines/${uuid}`, pipeline);
+  }
+
+  public deletePipeline(uuid: string): Promise<object> {
+    return this.delete(`/api/v1/pipelines/${uuid}`);
+  }
+
+  // ============ Debug WebChat API ============
+  public sendWebChatMessage(
+    sessionType: string,
+    messageChain: object[],
+    pipelineId: string,
+    timeout: number = 15000,
+  ): Promise<ApiRespWebChatMessage> {
+    return this.post(
+      `/api/v1/pipelines/${pipelineId}/chat/send`,
+      {
+        session_type: sessionType,
+        message: messageChain,
+      },
+      {
+        timeout,
+      },
+    );
+  }
+
+  public getWebChatHistoryMessages(
+    pipelineId: string,
+    sessionType: string,
+  ): Promise<ApiRespWebChatMessages> {
+    return this.get(
+      `/api/v1/pipelines/${pipelineId}/chat/messages/${sessionType}`,
+    );
+  }
+
+  public resetWebChatSession(
+    pipelineId: string,
+    sessionType: string,
+  ): Promise<{ message: string }> {
+    return this.post(
+      `/api/v1/pipelines/${pipelineId}/chat/reset/${sessionType}`,
+    );
+  }
+
+  // ============ Platform API ============
+  public getAdapters(): Promise<ApiRespPlatformAdapters> {
+    return this.get('/api/v1/platform/adapters');
+  }
+
+  public getAdapter(name: string): Promise<ApiRespPlatformAdapter> {
+    return this.get(`/api/v1/platform/adapters/${name}`);
+  }
+
+  public getAdapterIconURL(name: string): string {
+    if (this.instance.defaults.baseURL === '/') {
+      // 获取用户访问的URL
+      const url = window.location.href;
+      const baseURL = url.split('/').slice(0, 3).join('/');
+      return `${baseURL}/api/v1/platform/adapters/${name}/icon`;
+    }
+    return (
+      this.instance.defaults.baseURL + `/api/v1/platform/adapters/${name}/icon`
+    );
+  }
+
+  // ============ Platform Bots ============
+  public getBots(): Promise<ApiRespPlatformBots> {
+    return this.get('/api/v1/platform/bots');
+  }
+
+  public getBot(uuid: string): Promise<ApiRespPlatformBot> {
+    return this.get(`/api/v1/platform/bots/${uuid}`);
+  }
+
+  public createBot(bot: Bot): Promise<{ uuid: string }> {
+    return this.post('/api/v1/platform/bots', bot);
+  }
+
+  public updateBot(uuid: string, bot: Bot): Promise<object> {
+    return this.put(`/api/v1/platform/bots/${uuid}`, bot);
+  }
+
+  public deleteBot(uuid: string): Promise<object> {
+    return this.delete(`/api/v1/platform/bots/${uuid}`);
+  }
+
+  public getBotLogs(
+    botId: string,
+    request: GetBotLogsRequest,
+  ): Promise<GetBotLogsResponse> {
+    return this.post(`/api/v1/platform/bots/${botId}/logs`, request);
+  }
+
+  // ============ Plugins API ============
+  public getPlugins(): Promise<ApiRespPlugins> {
+    return this.get('/api/v1/plugins');
+  }
+
+  public getPlugin(author: string, name: string): Promise<ApiRespPlugin> {
+    return this.get(`/api/v1/plugins/${author}/${name}`);
+  }
+
+  public getPluginConfig(
+    author: string,
+    name: string,
+  ): Promise<ApiRespPluginConfig> {
+    return this.get(`/api/v1/plugins/${author}/${name}/config`);
+  }
+
+  public updatePluginConfig(
+    author: string,
+    name: string,
+    config: object,
+  ): Promise<object> {
+    return this.put(`/api/v1/plugins/${author}/${name}/config`, config);
+  }
+
+  public togglePlugin(
+    author: string,
+    name: string,
+    target_enabled: boolean,
+  ): Promise<object> {
+    return this.put(`/api/v1/plugins/${author}/${name}/toggle`, {
+      target_enabled,
+    });
+  }
+
+  public reorderPlugins(plugins: PluginReorderElement[]): Promise<object> {
+    return this.put('/api/v1/plugins/reorder', { plugins });
+  }
+
+  public updatePlugin(
+    author: string,
+    name: string,
+  ): Promise<AsyncTaskCreatedResp> {
+    return this.post(`/api/v1/plugins/${author}/${name}/update`);
+  }
+
+  public installPluginFromGithub(
+    source: string,
+  ): Promise<AsyncTaskCreatedResp> {
+    return this.post('/api/v1/plugins/install/github', { source });
+  }
+
+  public removePlugin(
+    author: string,
+    name: string,
+  ): Promise<AsyncTaskCreatedResp> {
+    return this.delete(`/api/v1/plugins/${author}/${name}`);
+  }
+
+  // ============ System API ============
+  public getSystemInfo(): Promise<ApiRespSystemInfo> {
+    return this.get('/api/v1/system/info');
+  }
+
+  public getAsyncTasks(): Promise<ApiRespAsyncTasks> {
+    return this.get('/api/v1/system/tasks');
+  }
+
+  public getAsyncTask(id: number): Promise<AsyncTask> {
+    return this.get(`/api/v1/system/tasks/${id}`);
+  }
+
+  // ============ User API ============
+  public checkIfInited(): Promise<{ initialized: boolean }> {
+    return this.get('/api/v1/user/init');
+  }
+
+  public initUser(user: string, password: string): Promise<object> {
+    return this.post('/api/v1/user/init', { user, password });
+  }
+
+  public authUser(user: string, password: string): Promise<ApiRespUserToken> {
+    return this.post('/api/v1/user/auth', { user, password });
+  }
+
+  public checkUserToken(): Promise<ApiRespUserToken> {
+    return this.get('/api/v1/user/check-token');
+  }
+}

web/src/app/infra/http/BaseHttpClient.ts

@@ -0,0 +1,195 @@
+import axios, {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+  AxiosError,
+} from 'axios';
+
+type JSONValue = string | number | boolean | JSONObject | JSONArray | null;
+interface JSONObject {
+  [key: string]: JSONValue;
+}
+type JSONArray = Array<JSONValue>;
+
+export interface ResponseData<T = unknown> {
+  code: number;
+  message: string;
+  data: T;
+  timestamp: number;
+}
+
+export interface RequestConfig extends AxiosRequestConfig {
+  isSSR?: boolean; // 服务端渲染标识
+  retry?: number; // 重试次数
+}
+
+/**
+ * 基础 HTTP 客户端类
+ * 提供通用的 HTTP 请求方法和拦截器配置
+ */
+export abstract class BaseHttpClient {
+  protected instance: AxiosInstance;
+  protected disableToken: boolean = false;
+  protected baseURL: string;
+
+  constructor(baseURL: string, disableToken?: boolean) {
+    this.baseURL = baseURL;
+    this.disableToken = disableToken || false;
+
+    this.instance = axios.create({
+      baseURL: baseURL,
+      timeout: 15000,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    this.initInterceptors();
+  }
+
+  // 外部获取baseURL的方法
+  public getBaseUrl(): string {
+    return this.baseURL;
+  }
+
+  // 更新 baseURL
+  public updateBaseURL(newBaseURL: string): void {
+    this.baseURL = newBaseURL;
+    this.instance.defaults.baseURL = newBaseURL;
+  }
+
+  // 同步获取Session
+  protected getSessionSync(): string | null {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('token');
+    }
+    return null;
+  }
+
+  // 拦截器配置
+  protected initInterceptors(): void {
+    // 请求拦截
+    this.instance.interceptors.request.use(
+      async (config) => {
+        // 客户端添加认证头
+        if (typeof window !== 'undefined' && !this.disableToken) {
+          const session = this.getSessionSync();
+          if (session) {
+            config.headers.Authorization = `Bearer ${session}`;
+          }
+        }
+
+        return config;
+      },
+      (error) => Promise.reject(error),
+    );
+
+    // 响应拦截
+    this.instance.interceptors.response.use(
+      (response: AxiosResponse<ResponseData>) => {
+        return response;
+      },
+      (error: AxiosError<ResponseData>) => {
+        // 统一错误处理
+        if (error.response) {
+          const { status, data } = error.response;
+          const errMessage = data?.message || error.message;
+
+          switch (status) {
+            case 401:
+              console.log('401 error: ', errMessage, error.request);
+              console.log('responseURL', error.request.responseURL);
+              if (typeof window !== 'undefined') {
+                localStorage.removeItem('token');
+                if (!error.request.responseURL.includes('/check-token')) {
+                  window.location.href = '/login';
+                }
+              }
+              break;
+            case 403:
+              console.error('Permission denied:', errMessage);
+              break;
+            case 500:
+              console.error('Server error:', errMessage);
+              break;
+          }
+
+          return Promise.reject({
+            code: data?.code || status,
+            message: errMessage,
+            data: data?.data || null,
+          });
+        }
+
+        return Promise.reject({
+          code: -1,
+          message: error.message || 'Network Error',
+          data: null,
+        });
+      },
+    );
+  }
+
+  // 转换下划线为驼峰
+  protected convertKeysToCamel(obj: JSONValue): JSONValue {
+    if (Array.isArray(obj)) {
+      return obj.map((v) => this.convertKeysToCamel(v));
+    } else if (obj !== null && typeof obj === 'object') {
+      return Object.keys(obj).reduce((acc, key) => {
+        const camelKey = key.replace(/_([a-z])/g, (_, letter) =>
+          letter.toUpperCase(),
+        );
+        acc[camelKey] = this.convertKeysToCamel((obj as JSONObject)[key]);
+        return acc;
+      }, {} as JSONObject);
+    }
+    return obj;
+  }
+
+  // 错误处理
+  protected handleError(error: object): never {
+    if (axios.isCancel(error)) {
+      throw { code: -2, message: 'Request canceled', data: null };
+    }
+    throw error;
+  }
+
+  // 核心请求方法
+  public async request<T = unknown>(config: RequestConfig): Promise<T> {
+    try {
+      const response = await this.instance.request<ResponseData<T>>(config);
+      return response.data.data;
+    } catch (error) {
+      return this.handleError(error as object);
+    }
+  }
+
+  // 快捷方法
+  public get<T = unknown>(
+    url: string,
+    params?: object,
+    config?: RequestConfig,
+  ): Promise<T> {
+    return this.request<T>({ method: 'get', url, params, ...config });
+  }
+
+  public post<T = unknown>(
+    url: string,
+    data?: object,
+    config?: RequestConfig,
+  ): Promise<T> {
+    return this.request<T>({ method: 'post', url, data, ...config });
+  }
+
+  public put<T = unknown>(
+    url: string,
+    data?: object,
+    config?: RequestConfig,
+  ): Promise<T> {
+    return this.request<T>({ method: 'put', url, data, ...config });
+  }
+
+  public delete<T = unknown>(url: string, config?: RequestConfig): Promise<T> {
+    return this.request<T>({ method: 'delete', url, ...config });
+  }
+}

web/src/app/infra/http/CloudServiceClient.ts

@@ -0,0 +1,39 @@
+import { BaseHttpClient } from './BaseHttpClient';
+import { MarketPluginResponse } from '@/app/infra/entities/api';
+
+/**
+ * 云服务客户端
+ * 负责与 cloud service 的所有交互
+ */
+export class CloudServiceClient extends BaseHttpClient {
+  constructor(baseURL: string = '') {
+    // cloud service 不需要 token 认证
+    super(baseURL, true);
+  }
+
+  /**
+   * 获取插件市场插件列表
+   * @param page 页码
+   * @param page_size 每页大小
+   * @param query 搜索关键词
+   * @param sort_by 排序字段
+   * @param sort_order 排序顺序
+   */
+  public getMarketPlugins(
+    page: number,
+    page_size: number,
+    query: string,
+    sort_by: string = 'stars',
+    sort_order: string = 'DESC',
+  ): Promise<MarketPluginResponse> {
+    return this.post(`/api/v1/market/plugins`, {
+      page,
+      page_size,
+      query,
+      sort_by,
+      sort_order,
+    });
+  }
+
+  // 未来可以在这里添加更多 cloud service 相关的方法
+}

web/src/app/infra/http/HttpClient.ts

@@ -1,509 +1,17 @@
-import axios, {
-  AxiosInstance,
-  AxiosRequestConfig,
-  AxiosResponse,
-  AxiosError,
-} from 'axios';
-import {
-  ApiRespProviderRequesters,
-  ApiRespProviderRequester,
-  ApiRespProviderLLMModels,
-  ApiRespProviderLLMModel,
-  LLMModel,
-  ApiRespPipelines,
-  Pipeline,
-  ApiRespPlatformAdapters,
-  ApiRespPlatformAdapter,
-  ApiRespPlatformBots,
-  ApiRespPlatformBot,
-  Bot,
-  ApiRespPlugins,
-  ApiRespPlugin,
-  ApiRespPluginConfig,
-  PluginReorderElement,
-  AsyncTaskCreatedResp,
-  ApiRespSystemInfo,
-  ApiRespAsyncTasks,
-  ApiRespUserToken,
-  MarketPluginResponse,
-  GetPipelineResponseData,
-  GetPipelineMetadataResponseData,
-  AsyncTask,
-  ApiRespWebChatMessage,
-  ApiRespWebChatMessages,
-} from '@/app/infra/entities/api';
-import { GetBotLogsRequest } from '@/app/infra/http/requestParam/bots/GetBotLogsRequest';
-import { GetBotLogsResponse } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
-
-type JSONValue = string | number | boolean | JSONObject | JSONArray | null;
-interface JSONObject {
-  [key: string]: JSONValue;
-}
-type JSONArray = Array<JSONValue>;
-
-export interface ResponseData<T = unknown> {
-  code: number;
-  message: string;
-  data: T;
-  timestamp: number;
-}
-
-export interface RequestConfig extends AxiosRequestConfig {
-  isSSR?: boolean; // 服务端渲染标识
-  retry?: number; // 重试次数
-}
-
-export let systemInfo: ApiRespSystemInfo = {
-  debug: false,
-  version: '',
-  cloud_service_url: '',
-};
-
-class HttpClient {
-  private instance: AxiosInstance;
-  private disableToken: boolean = false;
-  private baseURL: string;
-  // 暂不需要SSR
-  // private ssrInstance: AxiosInstance | null = null
-
-  constructor(baseURL: string, disableToken?: boolean) {
-    this.baseURL = baseURL;
-    this.instance = axios.create({
-      baseURL: baseURL,
-      timeout: 15000,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    this.disableToken = disableToken || false;
-    this.initInterceptors();
-
-    if (
-      systemInfo.cloud_service_url === '' &&
-      baseURL != 'https://space.langbot.app'
-    ) {
-      this.getSystemInfo().then((res) => {
-        systemInfo = res;
-      });
-    }
-  }
-
-  // 外部获取baseURL的方法
-  getBaseUrl(): string {
-    return this.baseURL;
-  }
-
-  // 同步获取Session
-  private getSessionSync() {
-    // NOT IMPLEMENT
-    return localStorage.getItem('token');
-  }
-
-  // 拦截器配置
-  private initInterceptors() {
-    // 请求拦截
-    this.instance.interceptors.request.use(
-      async (config) => {
-        // 服务端请求自动携带 cookie, Langbot暂时用不到SSR相关
-        // if (typeof window === 'undefined' && config.isSSR) { }
-        // cookie not required
-        // const { cookies } = await import('next/headers')
-        // config.headers.Cookie = cookies().toString()
-
-        // 客户端添加认证头
-        if (typeof window !== 'undefined' && !this.disableToken) {
-          const session = this.getSessionSync();
-          config.headers.Authorization = `Bearer ${session}`;
-        }
-
-        return config;
-      },
-      (error) => Promise.reject(error),
-    );
-
-    // 响应拦截
-    this.instance.interceptors.response.use(
-      (response: AxiosResponse<ResponseData>) => {
-        // 响应拦截处理写在这里，暂无业务需要
-
-        return response;
-      },
-      (error: AxiosError<ResponseData>) => {
-        // 统一错误处理
-        if (error.response) {
-          const { status, data } = error.response;
-          const errMessage = data?.message || error.message;
-
-          switch (status) {
-            case 401:
-              console.log('401 error: ', errMessage, error.request);
-              console.log('responseURL', error.request.responseURL);
-              localStorage.removeItem('token');
-              if (!error.request.responseURL.includes('/check-token')) {
-                window.location.href = '/login';
-              }
-              break;
-            case 403:
-              console.error('Permission denied:', errMessage);
-              break;
-            case 500:
-              // NOTE: move to component layer for customized message?
-              // toast.error(errMessage);
-              console.error('Server error:', errMessage);
-              break;
-          }
-
-          return Promise.reject({
-            code: data?.code || status,
-            message: errMessage,
-            data: data?.data || null,
-          });
-        }
-
-        return Promise.reject({
-          code: -1,
-          message: error.message || 'Network Error',
-          data: null,
-        });
-      },
-    );
-  }
-
-  // 转换下划线为驼峰
-  private convertKeysToCamel(obj: JSONValue): JSONValue {
-    if (Array.isArray(obj)) {
-      return obj.map((v) => this.convertKeysToCamel(v));
-    } else if (obj !== null && typeof obj === 'object') {
-      return Object.keys(obj).reduce((acc, key) => {
-        const camelKey = key.replace(/_([a-z])/g, (_, letter) =>
-          letter.toUpperCase(),
-        );
-        acc[camelKey] = this.convertKeysToCamel((obj as JSONObject)[key]);
-        return acc;
-      }, {} as JSONObject);
-    }
-    return obj;
-  }
-
-  // 核心请求方法
-  public async request<T = unknown>(config: RequestConfig): Promise<T> {
-    try {
-      // 这里未来如果需要SSR可以将前面替换为SSR的instance
-      const instance = config.isSSR ? this.instance : this.instance;
-      const response = await instance.request<ResponseData<T>>(config);
-      return response.data.data;
-    } catch (error) {
-      return this.handleError(error as object);
-    }
-  }
-
-  private handleError(error: object): never {
-    if (axios.isCancel(error)) {
-      throw { code: -2, message: 'Request canceled', data: null };
-    }
-    throw error;
-  }
-
-  // 快捷方法
-  public get<T = unknown>(
-    url: string,
-    params?: object,
-    config?: RequestConfig,
-  ) {
-    return this.request<T>({ method: 'get', url, params, ...config });
-  }
-
-  public post<T = unknown>(url: string, data?: object, config?: RequestConfig) {
-    return this.request<T>({ method: 'post', url, data, ...config });
-  }
-
-  public put<T = unknown>(url: string, data?: object, config?: RequestConfig) {
-    return this.request<T>({ method: 'put', url, data, ...config });
-  }
-
-  public delete<T = unknown>(url: string, config?: RequestConfig) {
-    return this.request<T>({ method: 'delete', url, ...config });
-  }
-
-  // real api request implementation
-  // ============ Provider API ============
-  public getProviderRequesters(): Promise<ApiRespProviderRequesters> {
-    return this.get('/api/v1/provider/requesters');
-  }
-
-  public getProviderRequester(name: string): Promise<ApiRespProviderRequester> {
-    return this.get(`/api/v1/provider/requesters/${name}`);
-  }
-
-  public getProviderRequesterIconURL(name: string): string {
-    if (this.instance.defaults.baseURL === '/') {
-      // 获取用户访问的URL
-      const url = window.location.href;
-      const baseURL = url.split('/').slice(0, 3).join('/');
-      return `${baseURL}/api/v1/provider/requesters/${name}/icon`;
-    }
-    return (
-      this.instance.defaults.baseURL +
-      `/api/v1/provider/requesters/${name}/icon`
-    );
-  }
-
-  // ============ Provider Model LLM ============
-  public getProviderLLMModels(): Promise<ApiRespProviderLLMModels> {
-    return this.get('/api/v1/provider/models/llm');
-  }
-
-  public getProviderLLMModel(uuid: string): Promise<ApiRespProviderLLMModel> {
-    return this.get(`/api/v1/provider/models/llm/${uuid}`);
-  }
-
-  public createProviderLLMModel(model: LLMModel): Promise<object> {
-    return this.post('/api/v1/provider/models/llm', model);
-  }
-
-  public deleteProviderLLMModel(uuid: string): Promise<object> {
-    return this.delete(`/api/v1/provider/models/llm/${uuid}`);
-  }
-
-  public updateProviderLLMModel(
-    uuid: string,
-    model: LLMModel,
-  ): Promise<object> {
-    return this.put(`/api/v1/provider/models/llm/${uuid}`, model);
-  }
-
-  public testLLMModel(uuid: string, model: LLMModel): Promise<object> {
-    return this.post(`/api/v1/provider/models/llm/${uuid}/test`, model);
-  }
-
-  // ============ Pipeline API ============
-  public getGeneralPipelineMetadata(): Promise<GetPipelineMetadataResponseData> {
-    // as designed, this method will be deprecated, and only for developer to check the prefered config schema
-    return this.get('/api/v1/pipelines/_/metadata');
-  }
-
-  public getPipelines(): Promise<ApiRespPipelines> {
-    return this.get('/api/v1/pipelines');
-  }
-
-  public getPipeline(uuid: string): Promise<GetPipelineResponseData> {
-    return this.get(`/api/v1/pipelines/${uuid}`);
-  }
-
-  public createPipeline(pipeline: Pipeline): Promise<{
-    uuid: string;
-  }> {
-    return this.post('/api/v1/pipelines', pipeline);
-  }
-
-  public updatePipeline(uuid: string, pipeline: Pipeline): Promise<object> {
-    return this.put(`/api/v1/pipelines/${uuid}`, pipeline);
-  }
-
-  public deletePipeline(uuid: string): Promise<object> {
-    return this.delete(`/api/v1/pipelines/${uuid}`);
-  }
-
-  // ============ Debug WebChat API ============
-  public sendWebChatMessage(
-    sessionType: string,
-    messageChain: object[],
-    pipelineId: string,
-    timeout: number = 15000,
-  ): Promise<ApiRespWebChatMessage> {
-    return this.post(
-      `/api/v1/pipelines/${pipelineId}/chat/send`,
-      {
-        session_type: sessionType,
-        message: messageChain,
-      },
-      {
-        timeout,
-      },
-    );
-  }
-
-  public getWebChatHistoryMessages(
-    pipelineId: string,
-    sessionType: string,
-  ): Promise<ApiRespWebChatMessages> {
-    return this.get(
-      `/api/v1/pipelines/${pipelineId}/chat/messages/${sessionType}`,
-    );
-  }
-
-  public resetWebChatSession(
-    pipelineId: string,
-    sessionType: string,
-  ): Promise<{ message: string }> {
-    return this.post(
-      `/api/v1/pipelines/${pipelineId}/chat/reset/${sessionType}`,
-    );
-  }
-
-  // ============ Platform API ============
-  public getAdapters(): Promise<ApiRespPlatformAdapters> {
-    return this.get('/api/v1/platform/adapters');
-  }
-
-  public getAdapter(name: string): Promise<ApiRespPlatformAdapter> {
-    return this.get(`/api/v1/platform/adapters/${name}`);
-  }
-
-  public getAdapterIconURL(name: string): string {
-    if (this.instance.defaults.baseURL === '/') {
-      // 获取用户访问的URL
-      const url = window.location.href;
-      const baseURL = url.split('/').slice(0, 3).join('/');
-      return `${baseURL}/api/v1/platform/adapters/${name}/icon`;
-    }
-    return (
-      this.instance.defaults.baseURL + `/api/v1/platform/adapters/${name}/icon`
-    );
-  }
-
-  // ============ Platform Bots ============
-  public getBots(): Promise<ApiRespPlatformBots> {
-    return this.get('/api/v1/platform/bots');
-  }
-
-  public getBot(uuid: string): Promise<ApiRespPlatformBot> {
-    return this.get(`/api/v1/platform/bots/${uuid}`);
-  }
-
-  public createBot(bot: Bot): Promise<{ uuid: string }> {
-    return this.post('/api/v1/platform/bots', bot);
-  }
-
-  public updateBot(uuid: string, bot: Bot): Promise<object> {
-    return this.put(`/api/v1/platform/bots/${uuid}`, bot);
-  }
-
-  public deleteBot(uuid: string): Promise<object> {
-    return this.delete(`/api/v1/platform/bots/${uuid}`);
-  }
-
-  public getBotLogs(
-    botId: string,
-    request: GetBotLogsRequest,
-  ): Promise<GetBotLogsResponse> {
-    return this.post(`/api/v1/platform/bots/${botId}/logs`, request);
-  }
-
-  // ============ Plugins API ============
-  public getPlugins(): Promise<ApiRespPlugins> {
-    return this.get('/api/v1/plugins');
-  }
-
-  public getPlugin(author: string, name: string): Promise<ApiRespPlugin> {
-    return this.get(`/api/v1/plugins/${author}/${name}`);
-  }
-
-  public getPluginConfig(
-    author: string,
-    name: string,
-  ): Promise<ApiRespPluginConfig> {
-    return this.get(`/api/v1/plugins/${author}/${name}/config`);
-  }
-
-  public updatePluginConfig(
-    author: string,
-    name: string,
-    config: object,
-  ): Promise<object> {
-    return this.put(`/api/v1/plugins/${author}/${name}/config`, config);
-  }
-
-  public togglePlugin(
-    author: string,
-    name: string,
-    target_enabled: boolean,
-  ): Promise<object> {
-    return this.put(`/api/v1/plugins/${author}/${name}/toggle`, {
-      target_enabled,
-    });
-  }
-
-  public reorderPlugins(plugins: PluginReorderElement[]): Promise<object> {
-    return this.put('/api/v1/plugins/reorder', { plugins });
-  }
-
-  public updatePlugin(
-    author: string,
-    name: string,
-  ): Promise<AsyncTaskCreatedResp> {
-    return this.post(`/api/v1/plugins/${author}/${name}/update`);
-  }
-
-  public getMarketPlugins(
-    page: number,
-    page_size: number,
-    query: string,
-    sort_by: string = 'stars',
-    sort_order: string = 'DESC',
-  ): Promise<MarketPluginResponse> {
-    return this.post(`/api/v1/market/plugins`, {
-      page,
-      page_size,
-      query,
-      sort_by,
-      sort_order,
-    });
-  }
-
-  public installPluginFromGithub(
-    source: string,
-  ): Promise<AsyncTaskCreatedResp> {
-    return this.post('/api/v1/plugins/install/github', { source });
-  }
-
-  public removePlugin(
-    author: string,
-    name: string,
-  ): Promise<AsyncTaskCreatedResp> {
-    return this.delete(`/api/v1/plugins/${author}/${name}`);
-  }
-
-  // ============ System API ============
-  public getSystemInfo(): Promise<ApiRespSystemInfo> {
-    return this.get('/api/v1/system/info');
-  }
-
-  public getAsyncTasks(): Promise<ApiRespAsyncTasks> {
-    return this.get('/api/v1/system/tasks');
-  }
-
-  public getAsyncTask(id: number): Promise<AsyncTask> {
-    return this.get(`/api/v1/system/tasks/${id}`);
-  }
-
-  // ============ User API ============
-  public checkIfInited(): Promise<{ initialized: boolean }> {
-    return this.get('/api/v1/user/init');
-  }
-
-  public initUser(user: string, password: string): Promise<object> {
-    return this.post('/api/v1/user/init', { user, password });
-  }
-
-  public authUser(user: string, password: string): Promise<ApiRespUserToken> {
-    return this.post('/api/v1/user/auth', { user, password });
-  }
-
-  public checkUserToken(): Promise<ApiRespUserToken> {
-    return this.get('/api/v1/user/check-token');
-  }
-}
-
-const getBaseURL = (): string => {
-  if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_API_BASE_URL) {
-    return process.env.NEXT_PUBLIC_API_BASE_URL;
-  }
-
-  return '/';
-};
-
-export const httpClient = new HttpClient(getBaseURL());
-
-// 临时写法，未来两种Client都继承自HttpClient父类，不允许共享方法
-export const spaceClient = new HttpClient(systemInfo.cloud_service_url);
+/**
+ * @deprecated 此文件仅用于向后兼容。请使用新的 client：
+ * - import { backendClient } from '@/app/infra/http'
+ * - import { getCloudServiceClient } from '@/app/infra/http'
+ */
+
+// 重新导出新的客户端实现，保持向后兼容
+export {
+  backendClient as httpClient,
+  systemInfo,
+  type ResponseData,
+  type RequestConfig,
+} from './index';
+
+// 为了兼容性，重新导出 BackendClient 作为 HttpClient
+import { BackendClient } from './BackendClient';
+export const HttpClient = BackendClient;

web/src/app/infra/http/README.md

@@ -0,0 +1,68 @@
+# HTTP Client 架构说明
+
+## 概述
+
+HTTP Client 已经重构为更清晰的架构，将通用方法与业务逻辑分离，并为不同的服务创建了独立的客户端。
+
+## 文件结构
+
+- **BaseHttpClient.ts** - 基础 HTTP 客户端类，包含所有通用的 HTTP 方法和拦截器配置
+- **BackendClient.ts** - 后端服务客户端，处理与后端 API 的所有交互
+- **CloudServiceClient.ts** - 云服务客户端，处理与 cloud service 的交互（如插件市场）
+- **index.ts** - 主入口文件，管理客户端实例的创建和导出
+- **HttpClient.ts** - 仅用于向后兼容的文件（已废弃）
+
+## 使用方法
+
+### 新的推荐用法
+
+```typescript
+// 使用后端客户端
+import { backendClient } from '@/app/infra/http';
+
+// 获取模型列表
+const models = await backendClient.getProviderLLMModels();
+
+// 使用云服务客户端（异步方式，确保 URL 已初始化）
+import { getCloudServiceClient } from '@/app/infra/http';
+
+const cloudClient = await getCloudServiceClient();
+const marketPlugins = await cloudClient.getMarketPlugins(1, 10, 'search term');
+
+// 使用云服务客户端（同步方式，可能使用默认 URL）
+import { cloudServiceClient } from '@/app/infra/http';
+
+const marketPlugins = await cloudServiceClient.getMarketPlugins(1, 10, 'search term');
+```
+
+### 向后兼容（不推荐）
+
+```typescript
+// 旧的用法仍然可以工作
+import { httpClient, spaceClient } from '@/app/infra/http/HttpClient';
+
+// httpClient 现在指向 backendClient
+const models = await httpClient.getProviderLLMModels();
+
+// spaceClient 现在指向 cloudServiceClient
+const marketPlugins = await spaceClient.getMarketPlugins(1, 10, 'search term');
+```
+
+## 特点
+
+1. **清晰的职责分离**
+   - BaseHttpClient：通用 HTTP 功能
+   - BackendClient：后端 API 业务逻辑
+   - CloudServiceClient：云服务 API 业务逻辑
+
+2. **自动初始化**
+   - 应用启动时自动从后端获取 cloud service URL
+   - 云服务客户端会自动更新 baseURL
+
+3. **类型安全**
+   - 所有方法都有完整的 TypeScript 类型定义
+   - 请求和响应类型都从 `@/app/infra/entities/api` 导入
+
+4. **向后兼容**
+   - 旧代码无需修改即可继续工作
+   - 逐步迁移到新的 API

web/src/app/infra/http/index.ts

@@ -0,0 +1,86 @@
+import { BackendClient } from './BackendClient';
+import { CloudServiceClient } from './CloudServiceClient';
+import { ApiRespSystemInfo } from '@/app/infra/entities/api';
+
+// 系统信息
+export let systemInfo: ApiRespSystemInfo = {
+  debug: false,
+  version: '',
+  cloud_service_url: '',
+};
+
+/**
+ * 获取基础 URL
+ */
+const getBaseURL = (): string => {
+  if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_API_BASE_URL) {
+    return process.env.NEXT_PUBLIC_API_BASE_URL;
+  }
+  return '/';
+};
+
+// 创建后端客户端实例
+export const backendClient = new BackendClient(getBaseURL());
+
+// 创建云服务客户端实例（初始化时使用默认 URL）
+export const cloudServiceClient = new CloudServiceClient(
+  'https://space.langbot.app',
+);
+
+// 应用启动时自动初始化系统信息
+if (typeof window !== 'undefined' && systemInfo.cloud_service_url === '') {
+  backendClient
+    .getSystemInfo()
+    .then((info) => {
+      systemInfo = info;
+      cloudServiceClient.updateBaseURL(info.cloud_service_url);
+    })
+    .catch((error) => {
+      console.error('Failed to initialize system info on startup:', error);
+    });
+}
+
+/**
+ * 获取云服务客户端
+ * 如果 cloud service URL 尚未初始化，会自动从后端获取
+ */
+export const getCloudServiceClient = async (): Promise<CloudServiceClient> => {
+  if (systemInfo.cloud_service_url === '') {
+    try {
+      systemInfo = await backendClient.getSystemInfo();
+      // 更新 cloud service client 的 baseURL
+      cloudServiceClient.updateBaseURL(systemInfo.cloud_service_url);
+    } catch (error) {
+      console.error('Failed to get system info:', error);
+      // 如果获取失败，继续使用默认 URL
+    }
+  }
+  return cloudServiceClient;
+};
+
+/**
+ * 获取云服务客户端（同步版本）
+ * 注意：如果 cloud service URL 尚未初始化，将使用默认 URL
+ */
+export const getCloudServiceClientSync = (): CloudServiceClient => {
+  return cloudServiceClient;
+};
+
+/**
+ * 手动初始化系统信息
+ * 可以在应用启动时调用此方法预先获取系统信息
+ */
+export const initializeSystemInfo = async (): Promise<void> => {
+  try {
+    systemInfo = await backendClient.getSystemInfo();
+    cloudServiceClient.updateBaseURL(systemInfo.cloud_service_url);
+  } catch (error) {
+    console.error('Failed to initialize system info:', error);
+  }
+};
+
+// 导出类型，以便其他地方使用
+export type { ResponseData, RequestConfig } from './BaseHttpClient';
+export { BaseHttpClient } from './BaseHttpClient';
+export { BackendClient } from './BackendClient';
+export { CloudServiceClient } from './CloudServiceClient';