Merge pull request #4935 from ConnectAI-E/feature/get-client-api

feat: add getClientApi method

app/client/api.ts

@@ -200,3 +200,14 @@ export function getHeaders() {
 
   return headers;
 }
+
+export function getClientApi(provider: ServiceProvider): ClientApi {
+  switch (provider) {
+    case ServiceProvider.Google:
+      return new ClientApi(ModelProvider.GeminiPro);
+    case ServiceProvider.Anthropic:
+      return new ClientApi(ModelProvider.Claude);
+    default:
+      return new ClientApi(ModelProvider.GPT);
+  }
+}

app/components/exporter.tsx

@@ -36,13 +36,9 @@ import { toBlob, toPng } from "html-to-image";
 import { DEFAULT_MASK_AVATAR } from "../store/mask";
 
 import { prettyObject } from "../utils/format";
-import {
+import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
-  EXPORT_MESSAGE_CLASS_NAME,
-  ModelProvider,
-  ServiceProvider,
-} from "../constant";
 import { getClientConfig } from "../config/client";
-import { ClientApi } from "../client/api";
+import { type ClientApi, getClientApi } from "../client/api";
 import { getMessageTextContent } from "../utils";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
@@ -316,14 +312,7 @@ export function PreviewActions(props: {
   const onRenderMsgs = (msgs: ChatMessage[]) => {
     setShouldExport(false);
 
-    var api: ClientApi;
+    const api: ClientApi = getClientApi(config.modelConfig.providerName);
-    if (config.modelConfig.providerName == ServiceProvider.Google) {
-      api = new ClientApi(ModelProvider.GeminiPro);
-    } else if (config.modelConfig.providerName == ServiceProvider.Anthropic) {
-      api = new ClientApi(ModelProvider.Claude);
-    } else {
-      api = new ClientApi(ModelProvider.GPT);
-    }
 
     api
       .share(msgs)

app/components/home.tsx

@@ -12,7 +12,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import { getCSSVar, useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
-import { ServiceProvider, ModelProvider, Path, SlotID } from "../constant";
+import { Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";
 
 import { getISOLang, getLang } from "../locales";
@@ -27,7 +27,7 @@ import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
-import { ClientApi } from "../client/api";
+import { type ClientApi, getClientApi } from "../client/api";
 import { useAccessStore } from "../store";
 
 export function Loading(props: { noLogo?: boolean }) {
@@ -170,14 +170,8 @@ function Screen() {
 export function useLoadData() {
   const config = useAppConfig();
 
-  var api: ClientApi;
+  const api: ClientApi = getClientApi(config.modelConfig.providerName);
-  if (config.modelConfig.providerName == ServiceProvider.Google) {
+
-    api = new ClientApi(ModelProvider.GeminiPro);
-  } else if (config.modelConfig.providerName == ServiceProvider.Anthropic) {
-    api = new ClientApi(ModelProvider.Claude);
-  } else {
-    api = new ClientApi(ModelProvider.GPT);
-  }
   useEffect(() => {
     (async () => {
       const models = await api.llm.models();

app/store/chat.ts

@@ -15,7 +15,12 @@ import {
   SUMMARIZE_MODEL,
   GEMINI_SUMMARIZE_MODEL,
 } from "../constant";
-import { ClientApi, RequestMessage, MultimodalContent } from "../client/api";
+import { getClientApi } from "../client/api";
+import type {
+  ClientApi,
+  RequestMessage,
+  MultimodalContent,
+} from "../client/api";
 import { ChatControllerPool } from "../client/controller";
 import { prettyObject } from "../utils/format";
 import { estimateTokenLength } from "../utils/token";
@@ -363,15 +368,7 @@ export const useChatStore = createPersistStore(
           ]);
         });
 
-        var api: ClientApi;
+        const api: ClientApi = getClientApi(modelConfig.providerName);
-        if (modelConfig.providerName == ServiceProvider.Google) {
-          api = new ClientApi(ModelProvider.GeminiPro);
-        } else if (modelConfig.providerName == ServiceProvider.Anthropic) {
-          api = new ClientApi(ModelProvider.Claude);
-        } else {
-          api = new ClientApi(ModelProvider.GPT);
-        }
-
         // make request
         api.llm.chat({
           messages: sendMessages,
@@ -547,14 +544,7 @@ export const useChatStore = createPersistStore(
         const session = get().currentSession();
         const modelConfig = session.mask.modelConfig;
 
-        var api: ClientApi;
+        const api: ClientApi = getClientApi(modelConfig.providerName);
-        if (modelConfig.providerName == ServiceProvider.Google) {
-          api = new ClientApi(ModelProvider.GeminiPro);
-        } else if (modelConfig.providerName == ServiceProvider.Anthropic) {
-          api = new ClientApi(ModelProvider.Claude);
-        } else {
-          api = new ClientApi(ModelProvider.GPT);
-        }
 
         // remove error messages if any
         const messages = session.messages;