feat: 1) Present 'maxtokens' as properties tied to a single model. 2) Remove the original author's implementation of the send verification logic and replace it with a user input validator. Pre-verification 3) Provides the ability to pull the 'User Visible modellist' provided by 'provider' 4) Provider-related parameters are passed in the constructor of 'providerClient'. Not passed in the 'chat' method

app/client/providers/openai/config.ts

@@ -1,8 +1,10 @@
-import { SettingItem } from "../../core/types";
+import { SettingItem } from "../../common";
 import Locale from "./locale";
 
 export const OPENAI_BASE_URL = "https://api.openai.com";
 
+export const ROLES = ["system", "user", "assistant"] as const;
+
 export const OpenaiMetas = {
   ChatPath: "v1/chat/completions",
   UsagePath: "dashboard/billing/usage",
@@ -12,15 +14,20 @@ export const OpenaiMetas = {
 
 export type SettingKeys = "openaiUrl" | "openaiApiKey";
 
-export const defaultModal = "gpt-3.5-turbo";
-
 export const modelConfigs = [
+  {
+    name: "gpt-4o",
+    displayName: "gpt-4o",
+    isVision: false,
+    isDefaultActive: true,
+    isDefaultSelected: true,
+  },
   {
     name: "gpt-3.5-turbo",
     displayName: "gpt-3.5-turbo",
     isVision: false,
     isDefaultActive: true,
-    isDefaultSelected: true,
+    isDefaultSelected: false,
   },
   {
     name: "gpt-3.5-turbo-0301",
@@ -150,13 +157,30 @@ export const modelConfigs = [
   },
 ];
 
+const defaultEndpoint = "/api/openai";
+
 export const settingItems: SettingItem<SettingKeys>[] = [
   {
     name: "openaiUrl",
     title: Locale.Endpoint.Title,
     description: Locale.Endpoint.SubTitle,
-    defaultValue: OPENAI_BASE_URL,
+    defaultValue: defaultEndpoint,
     type: "input",
+    validators: [
+      "required",
+      async (v: any) => {
+        if (typeof v === "string" && v.endsWith("/")) {
+          return Locale.Endpoint.Error.EndWithBackslash;
+        }
+        if (
+          typeof v === "string" &&
+          !v.startsWith(defaultEndpoint) &&
+          !v.startsWith("http")
+        ) {
+          return Locale.Endpoint.SubTitle;
+        }
+      },
+    ],
   },
   {
     name: "openaiApiKey",

app/client/providers/openai/index.ts

@@ -1,19 +1,26 @@
-import { modelConfigs, settingItems, SettingKeys, OpenaiMetas } from "./config";
-import { getMessageTextContent } from "@/app/utils";
 import {
+  ChatHandlers,
   InternalChatRequestPayload,
   IProviderTemplate,
-} from "../../core/types";
+  ModelInfo,
+  getMessageTextContent,
+} from "../../common";
 import {
   EventStreamContentType,
   fetchEventSource,
 } from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
 import Locale from "@/app/locales";
+import { makeBearer, validString, prettyObject } from "./utils";
+import {
+  modelConfigs,
+  settingItems,
+  SettingKeys,
+  OpenaiMetas,
+  ROLES,
+} from "./config";
 
 export type OpenAIProviderSettingKeys = SettingKeys;
 
-export const ROLES = ["system", "user", "assistant"] as const;
 export type MessageRole = (typeof ROLES)[number];
 
 export interface MultimodalContent {
@@ -28,7 +35,6 @@ export interface RequestMessage {
   role: MessageRole;
   content: string | MultimodalContent[];
 }
-
 interface RequestPayload {
   messages: {
     role: "system" | "user" | "assistant";
@@ -43,6 +49,16 @@ interface RequestPayload {
   max_tokens?: number;
 }
 
+interface ModelList {
+  object: "list";
+  data: Array<{
+    id: string;
+    object: "model";
+    created: number;
+    owned_by: "system" | "openai-internal";
+  }>;
+}
+
 class OpenAIProvider
   implements IProviderTemplate<SettingKeys, "openai", typeof OpenaiMetas>
 {
@@ -51,7 +67,7 @@ class OpenAIProvider
 
   readonly REQUEST_TIMEOUT_MS = 60000;
 
-  models = modelConfigs.map((c) => ({ ...c, providerTemplateName: this.name }));
+  defaultModels = modelConfigs;
 
   providerMeta = {
     displayName: "OpenAI",
@@ -62,25 +78,11 @@ class OpenAIProvider
     const {
       providerConfig: { openaiUrl },
     } = payload;
-
     const path = OpenaiMetas.ChatPath;
 
-    let baseUrl = openaiUrl;
+    console.log("[Proxy Endpoint] ", openaiUrl, path);
 
-    if (!baseUrl) {
-      baseUrl = "/api/openai";
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith("/api/openai")) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
+    return [openaiUrl, path].join("/");
   }
 
   private getHeaders(payload: InternalChatRequestPayload<SettingKeys>) {
@@ -90,14 +92,9 @@ class OpenAIProvider
       "Content-Type": "application/json",
       Accept: "application/json",
     };
-    const authHeader = "Authorization";
 
-    const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-    const validString = (x?: string): x is string => Boolean(x && x.length > 0);
-
-    // when using google api in app, not set auth header
     if (validString(openaiApiKey)) {
-      headers[authHeader] = makeBearer(openaiApiKey);
+      headers["Authorization"] = makeBearer(openaiApiKey);
     }
 
     return headers;
@@ -143,9 +140,11 @@ class OpenAIProvider
     };
   }
 
-  private readWholeMessageResponseBody(res: any) {
+  private readWholeMessageResponseBody(res: {
+    choices: { message: { content: any } }[];
+  }) {
     return {
-      message: res.choices?.at(0)?.message?.content ?? "",
+      message: res.choices?.[0]?.message?.content ?? "",
     };
   }
 
@@ -190,52 +189,12 @@ class OpenAIProvider
 
   streamChat(
     payload: InternalChatRequestPayload<SettingKeys>,
-    onProgress: (message: string, chunk: string) => void,
-    onFinish: (message: string) => void,
-    onError: (err: Error) => void,
+    handlers: ChatHandlers,
   ) {
     const requestPayload = this.formatChatPayload(payload);
 
     const timer = this.getTimer();
 
-    let responseText = "";
-    let remainText = "";
-    let finished = false;
-
-    // animate response to make it looks smooth
-    const animateResponseText = () => {
-      if (finished || timer.signal.aborted) {
-        responseText += remainText;
-        console.log("[Response Animation] finished");
-        if (responseText?.length === 0) {
-          onError(new Error("empty response from server"));
-        }
-        return;
-      }
-
-      if (remainText.length > 0) {
-        const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-        const fetchText = remainText.slice(0, fetchCount);
-        responseText += fetchText;
-        remainText = remainText.slice(fetchCount);
-        onProgress(responseText, fetchText);
-      }
-
-      requestAnimationFrame(animateResponseText);
-    };
-
-    // start animaion
-    animateResponseText();
-
-    const finish = () => {
-      if (!finished) {
-        finished = true;
-        onFinish(responseText + remainText);
-      }
-    };
-
-    timer.signal.onabort = finish;
-
     fetchEventSource(requestPayload.url, {
       ...requestPayload,
       async onopen(res) {
@@ -244,8 +203,8 @@ class OpenAIProvider
         console.log("[OpenAI] request response content type: ", contentType);
 
         if (contentType?.startsWith("text/plain")) {
-          responseText = await res.clone().text();
-          return finish();
+          const responseText = await res.clone().text();
+          return handlers.onFlash(responseText);
         }
 
         if (
@@ -255,29 +214,29 @@ class OpenAIProvider
             ?.startsWith(EventStreamContentType) ||
           res.status !== 200
         ) {
-          const responseTexts = [responseText];
+          const responseTexts = [];
+          if (res.status === 401) {
+            responseTexts.push(Locale.Error.Unauthorized);
+          }
+
           let extraInfo = await res.clone().text();
           try {
             const resJson = await res.clone().json();
             extraInfo = prettyObject(resJson);
           } catch {}
 
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
           if (extraInfo) {
             responseTexts.push(extraInfo);
           }
 
-          responseText = responseTexts.join("\n\n");
+          const responseText = responseTexts.join("\n\n");
 
-          return finish();
+          return handlers.onFlash(responseText);
         }
       },
       onmessage(msg) {
-        if (msg.data === "[DONE]" || finished) {
-          return finish();
+        if (msg.data === "[DONE]") {
+          return;
         }
         const text = msg.data;
         try {
@@ -286,20 +245,19 @@ class OpenAIProvider
             delta: { content: string };
           }>;
           const delta = choices[0]?.delta?.content;
-          const textmoderation = json?.prompt_filter_results;
 
           if (delta) {
-            remainText += delta;
+            handlers.onProgress(delta);
           }
         } catch (e) {
           console.error("[Request] parse error", text, msg);
         }
       },
       onclose() {
-        finish();
+        handlers.onFinish();
       },
       onerror(e) {
-        onError(e);
+        handlers.onError(e);
         throw e;
       },
       openWhenHidden: true,
@@ -307,6 +265,23 @@ class OpenAIProvider
 
     return timer;
   }
+
+  async getAvailableModels(
+    providerConfig: Record<SettingKeys, string>,
+  ): Promise<ModelInfo[]> {
+    const { openaiApiKey, openaiUrl } = providerConfig;
+    const res = await fetch(`${openaiUrl}/vi/models`, {
+      headers: {
+        Authorization: `Bearer ${openaiApiKey}`,
+      },
+      method: "GET",
+    });
+    const data: ModelList = await res.json();
+
+    return data.data.map((o) => ({
+      name: o.id,
+    }));
+  }
 }
 
 export default OpenAIProvider;

app/client/providers/openai/locale.ts

@@ -1,4 +1,4 @@
-import { getLocaleText } from "../../core/locale";
+import { getLocaleText } from "../../common/locale";
 
 export default getLocaleText<
   {
@@ -11,6 +11,9 @@ export default getLocaleText<
     Endpoint: {
       Title: string;
       SubTitle: string;
+      Error: {
+        EndWithBackslash: string;
+      };
     };
   },
   "en"
@@ -26,6 +29,9 @@ export default getLocaleText<
       Endpoint: {
         Title: "接口地址",
         SubTitle: "除默认地址外，必须包含 http(s)://",
+        Error: {
+          EndWithBackslash: "不能以「/」结尾",
+        },
       },
     },
     en: {
@@ -38,6 +44,9 @@ export default getLocaleText<
       Endpoint: {
         Title: "OpenAI Endpoint",
         SubTitle: "Must starts with http(s):// or use /api/openai as default",
+        Error: {
+          EndWithBackslash: "Cannot end with '/'",
+        },
       },
     },
     pt: {
@@ -50,6 +59,9 @@ export default getLocaleText<
       Endpoint: {
         Title: "Endpoint OpenAI",
         SubTitle: "Deve começar com http(s):// ou usar /api/openai como padrão",
+        Error: {
+          EndWithBackslash: "Não é possível terminar com '/'",
+        },
       },
     },
     sk: {
@@ -63,6 +75,9 @@ export default getLocaleText<
         Title: "Koncový bod OpenAI",
         SubTitle:
           "Musí začínať http(s):// alebo použiť /api/openai ako predvolený",
+        Error: {
+          EndWithBackslash: "Nemôže končiť znakom „/“",
+        },
       },
     },
     tw: {
@@ -75,6 +90,9 @@ export default getLocaleText<
       Endpoint: {
         Title: "介面(Endpoint) 地址",
         SubTitle: "除預設地址外，必須包含 http(s)://",
+        Error: {
+          EndWithBackslash: "不能以「/」結尾",
+        },
       },
     },
   },

app/client/providers/openai/utils.ts

@@ -0,0 +1,18 @@
+export const makeBearer = (s: string) => `Bearer ${s.trim()}`;
+
+export const validString = (x?: string): x is string =>
+  Boolean(x && x.length > 0);
+
+export function prettyObject(msg: any) {
+  const obj = msg;
+  if (typeof msg !== "string") {
+    msg = JSON.stringify(msg, null, "  ");
+  }
+  if (msg === "{}") {
+    return obj.toString();
+  }
+  if (msg.startsWith("```json")) {
+    return msg;
+  }
+  return ["```json", msg, "```"].join("\n");
+}