feat: setting endpoint url

Author: Dogtiti

public/locales/en/settings.json

@@ -13,5 +13,6 @@
   "api-key-notice": "<0>NOTE: To get a key, sign up for an OpenAI account and visit the following <1>link.</1>,This key is only used in the current browser session</0>",
   "tokens-tips": "Controls the maximum number of tokens used in each API call (higher value will make responses more detailed but cost more).",
   "tokens": "Tokens: ",
-  "guest-key": "Guest Key: "
+  "guest-key": "Guest Key: ",
+  "endPoint": "Endpoint: "
 }

public/locales/zh/settings.json

@@ -13,5 +13,6 @@
   "api-key-notice": "<0>注意：要获取密钥，请注册OpenAI账户并访问以下<1>链接。</1>此密钥仅在当前浏览器会话中使用。</0>",
   "tokens-tips": "控制每个 API 调用中使用的最大令牌数（更高的值将使响应更详细，但更昂贵）。",
   "tokens": "字节数：",
-  "guest-key": "访问码："
+  "guest-key": "访问码：",
+  "endPoint": "代理地址："
 }

src/components/SettingsDialog.tsx

@@ -9,13 +9,15 @@ import {
   FaSyncAlt,
   FaCoins,
   FaCode,
+  FaServer,
 } from "react-icons/fa";
 import Dialog from "./Dialog";
 import Input from "./Input";
 import { GPT_MODEL_NAMES, GPT_4 } from "../utils/constants";
 import Accordion from "./Accordion";
 import type { ModelSettings } from "../utils/types";
 import { useGuestMode } from "../hooks/useGuestMode";
+import { DEFAULT_SETTINGS } from "../hooks/useSettings";
 
 export const SettingsDialog: React.FC<{
   show: boolean;
@@ -25,7 +27,7 @@ export const SettingsDialog: React.FC<{
   const [settings, setSettings] = React.useState<ModelSettings>({
     ...customSettings,
   });
-  const { isGuestMode } = useGuestMode(settings.guestKey);
+  const { isGuestMode } = useGuestMode(settings.customGuestKey);
   const { t } = useTranslation(["settings", "common"]);
 
   useEffect(() => {
@@ -37,6 +39,22 @@ export const SettingsDialog: React.FC<{
     value: ModelSettings[Key]
   ) => {
     setSettings((prev) => {
+      if (key === "customApiKey" && !value) {
+        const {
+          customTemperature,
+          customMaxLoops,
+          customEndPoint,
+          customMaxTokens,
+        } = DEFAULT_SETTINGS;
+        return {
+          ...prev,
+          [key]: value,
+          customTemperature,
+          customMaxLoops,
+          customEndPoint,
+          customMaxTokens,
+        };
+      }
       return { ...prev, [key]: value };
     });
   };
@@ -50,6 +68,18 @@ export const SettingsDialog: React.FC<{
   const disabled = !settings.customApiKey;
   const advancedSettings = (
     <>
+      <Input
+        left={
+          <>
+            <FaServer />
+            <span className="ml-2">{t("endPoint")}</span>
+          </>
+        }
+        disabled={disabled}
+        value={settings.customEndPoint}
+        onChange={(e) => updateSettings("customEndPoint", e.target.value)}
+      />
+      <br />
       <Input
         left={
           <>
@@ -104,10 +134,10 @@ export const SettingsDialog: React.FC<{
             <span className="ml-2">{t("tokens")}</span>
           </>
         }
-        value={settings.maxTokens ?? 400}
+        value={settings.customMaxTokens ?? 400}
         disabled={disabled}
         onChange={(e) =>
-          updateSettings("maxTokens", parseFloat(e.target.value))
+          updateSettings("customMaxTokens", parseFloat(e.target.value))
         }
         type="range"
         toolTipProperties={{
@@ -192,8 +222,8 @@ export const SettingsDialog: React.FC<{
                 <span className="ml-2">{t("guest-key")}</span>
               </>
             }
-            value={settings.guestKey}
-            onChange={(e) => updateSettings("guestKey", e.target.value)}
+            value={settings.customGuestKey}
+            onChange={(e) => updateSettings("customGuestKey", e.target.value)}
           />
         )}
         <br className="hidden md:inline" />

src/env/schema.mjs

@@ -46,7 +46,6 @@ export const serverSchema = z.object({
   NEXTAUTH_SECRET: requiredAuthEnabledForProduction(),
   NEXTAUTH_URL: validateNextUrl(),
   OPENAI_API_KEY: z.string(),
-  OPENAI_API_BASE_URL: z.string().url().optional(),
   GOOGLE_CLIENT_ID: requiredAuthEnabledForProduction(),
   GOOGLE_CLIENT_SECRET: requiredAuthEnabledForProduction(),
   GITHUB_CLIENT_ID: requiredAuthEnabledForProduction(),
@@ -74,7 +73,6 @@ export const serverEnv = {
   NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
   NEXTAUTH_URL: process.env.NEXTAUTH_URL ?? "http://localhost:3000",
   OPENAI_API_KEY: process.env.OPENAI_API_KEY,
-  OPENAI_API_BASE_URL: process.env.OPENAI_API_BASE_URL,
   GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
   GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
   GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,

src/hooks/useGuestMode.ts

@@ -1,19 +1,19 @@
 import { useState, useEffect } from "react";
 import { env } from "../env/client.mjs";
 
-export function useGuestMode(guestKey = "") {
+export function useGuestMode(customGuestKey = "") {
   const [isValidGuest, setIsValidGuest] = useState(false);
   const [isGuestMode, setIsGuestMode] = useState(false);
 
   useEffect(() => {
     const publicGuestKey = env.NEXT_PUBLIC_GUEST_KEY ?? "";
     const keys = publicGuestKey.split(",").filter((key) => !!key);
     const isGuestMode = keys.length > 0;
-    const isMatchedGuestKey = !!keys.find((key) => key === guestKey);
+    const isMatchedGuestKey = !!keys.find((key) => key === customGuestKey);
     const isValidGuest = isMatchedGuestKey;
     setIsValidGuest(isValidGuest);
     setIsGuestMode(isGuestMode);
-  }, [guestKey]);
+  }, [customGuestKey]);
 
   return {
     isValidGuest,

src/hooks/useSettings.ts

@@ -5,58 +5,60 @@ import {
   DEFAULT_MAX_LOOPS_FREE,
   GPT_35_TURBO,
 } from "../utils/constants";
-import { useGuestMode } from "./useGuestMode"
+import { useGuestMode } from "./useGuestMode";
 
 const SETTINGS_KEY = "AGENTGPT_SETTINGS";
-const DEFAULT_SETTINGS: ModelSettings = {
+export const DEFAULT_SETTINGS: ModelSettings = {
   customApiKey: "",
   customModelName: GPT_35_TURBO,
   customTemperature: 0.9,
   customMaxLoops: DEFAULT_MAX_LOOPS_FREE,
   customLanguage: "",
-  maxTokens: 400,
-  guestKey:""
+  customEndPoint: "",
+  customMaxTokens: 400,
+  customGuestKey: "",
 };
 
 const loadSettings = () => {
+  const defaultSettions = DEFAULT_SETTINGS;
   if (typeof window === "undefined") {
-    return DEFAULT_SETTINGS;
+    return defaultSettions;
   }
 
   const data = localStorage.getItem(SETTINGS_KEY);
   if (!data) {
-    return DEFAULT_SETTINGS;
+    return defaultSettions;
   }
 
   try {
     const obj = JSON.parse(data) as ModelSettings;
     Object.entries(obj).forEach(([key, value]) => {
-      if (DEFAULT_SETTINGS.hasOwnProperty(key)) {
+      if (defaultSettions.hasOwnProperty(key)) {
         // @ts-ignore
-        DEFAULT_SETTINGS[key] = value;
+        defaultSettions[key] = value;
       }
     });
   } catch (error) {}
 
   if (
-    DEFAULT_SETTINGS.customApiKey &&
-    DEFAULT_SETTINGS.customMaxLoops === DEFAULT_MAX_LOOPS_FREE
+    defaultSettions.customApiKey &&
+    defaultSettions.customMaxLoops === DEFAULT_MAX_LOOPS_FREE
   ) {
-    DEFAULT_SETTINGS.customMaxLoops = DEFAULT_MAX_LOOPS_CUSTOM_API_KEY;
+    defaultSettions.customMaxLoops = DEFAULT_MAX_LOOPS_CUSTOM_API_KEY;
   }
 
-  return DEFAULT_SETTINGS;
+  return defaultSettions;
 };
 
 export function useSettings({ customLanguage }: { customLanguage: string }) {
   const [settings, setSettings] = useState<ModelSettings>(loadSettings);
-  const { isValidGuest } = useGuestMode(settings.guestKey);
+  const { isValidGuest } = useGuestMode(settings.customGuestKey);
 
   const rewriteSettings = (settings: ModelSettings) => {
     const rewriteSettings = {
       ...settings,
       customLanguage,
-      isValidGuest
+      isValidGuest,
     };
 
     return rewriteSettings;

src/pages/index.tsx

@@ -45,7 +45,7 @@ const Home: NextPage = () => {
     useState(false);
   const [customLanguage, setCustomLanguage] = useState<string>(i18n.language);
   const { settings, saveSettings } = useSettings({ customLanguage });
-  const { isValidGuest, isGuestMode } = useGuestMode(settings.guestKey);
+  const { isValidGuest, isGuestMode } = useGuestMode(settings.customGuestKey);
 
   const router = useRouter();
   const agentUtils = useAgent();

src/utils/prompts.ts

@@ -13,11 +13,11 @@ export const createModel = (settings: ModelSettings) => {
     openAIApiKey: _settings?.customApiKey || process.env.OPENAI_API_KEY,
     temperature: _settings?.customTemperature || 0.9,
     modelName: _settings?.customModelName || GPT_35_TURBO,
-    maxTokens: _settings?.maxTokens || 400,
+    maxTokens: _settings?.customMaxLoops || 400,
   };
 
   const baseOptions = {
-    basePath: process.env.OPENAI_API_BASE_URL,
+    basePath: _settings?.customEndPoint || undefined,
   };
   console.log(
     "Dogtiti ~ file: prompts.ts:22 ~ createModel ~ options:",

src/utils/types.ts

@@ -4,8 +4,9 @@ export type ModelSettings = {
   customTemperature: number;
   customMaxLoops: number;
   customLanguage: string;
-  maxTokens?: number;
-  guestKey?: string;
+  customEndPoint?: string;
+  customMaxTokens?: number;
+  customGuestKey?: string;
 };
 
 export type GuestSettings = {