Add Azure OpenAI API support.

app/api/auth.ts

@@ -26,6 +26,13 @@ function parseApiKey(bearToken: string) {
 
 export function auth(req: NextRequest) {
   const authToken = req.headers.get("Authorization") ?? "";
+  const aoaiApiKey = req.headers.get("azure-api-key") ?? "";
+
+  if (!!aoaiApiKey) {
+    return {
+      error: false,
+    };
+  }
 
   // check if it is openai api key or user token
   const { accessCode, apiKey: token } = parseApiKey(authToken);

app/client/api.ts

@@ -141,5 +141,9 @@ export function getHeaders() {
     );
   }
 
+  if (accessStore.enableAOAI && validString(accessStore.aoaiToken)) {
+    headers["api-key"] = accessStore.aoaiToken;
+  }
+
   return headers;
 }

app/client/platforms/openai.ts

@@ -3,7 +3,12 @@ import {
   OpenaiPath,
   REQUEST_TIMEOUT_MS,
 } from "@/app/constant";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
+import {
+  useAccessStore,
+  useAppConfig,
+  useChatStore,
+  AZURE_API_VERSION,
+} from "@/app/store";
 
 import { ChatOptions, getHeaders, LLMApi, LLMUsage } from "../api";
 import Locale from "../../locales";
@@ -14,11 +19,29 @@ import {
 import { prettyObject } from "@/app/utils/format";
 
 export class ChatGPTApi implements LLMApi {
+  public get ChatPath() {
+    const OPENAI_REQUEST_PATH = OpenaiPath.ChatPath;
+    const { enableAOAI, azureDeployName } = useAccessStore.getState();
+    if (!enableAOAI) return OPENAI_REQUEST_PATH;
+
+    // For now azure api only support one version
+    const azureApiVersion = AZURE_API_VERSION[0].name;
+
+    const AZURE_REQUEST_PATH = `openai/deployments/${azureDeployName}/chat/completions?api-version=${azureApiVersion}`;
+    return AZURE_REQUEST_PATH;
+  }
+
   path(path: string): string {
     let openaiUrl = useAccessStore.getState().openaiUrl;
     if (openaiUrl.length === 0) {
       openaiUrl = DEFAULT_API_HOST;
     }
+
+    const { enableAOAI, azureEndpoint } = useAccessStore.getState();
+    if (enableAOAI) {
+      openaiUrl = azureEndpoint;
+    }
+
     if (openaiUrl.endsWith("/")) {
       openaiUrl = openaiUrl.slice(0, openaiUrl.length - 1);
     }
@@ -59,7 +82,7 @@ export class ChatGPTApi implements LLMApi {
     options.onController?.(controller);
 
     try {
-      const chatPath = this.path(OpenaiPath.ChatPath);
+      const chatPath = this.path(this.ChatPath);
       const chatPayload = {
         method: "POST",
         body: JSON.stringify(requestPayload),

app/components/mask.tsx

@@ -13,7 +13,13 @@ import EyeIcon from "../icons/eye.svg";
 import CopyIcon from "../icons/copy.svg";
 
 import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
-import { ChatMessage, ModelConfig, useAppConfig, useChatStore } from "../store";
+import {
+  ChatMessage,
+  ModelConfig,
+  useAccessStore,
+  useAppConfig,
+  useChatStore,
+} from "../store";
 import { ROLES } from "../client/api";
 import {
   Input,
@@ -29,7 +35,7 @@ import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales";
 import { useNavigate } from "react-router-dom";
 
 import chatStyle from "./chat.module.scss";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { downloadAs, readFromFile } from "../utils";
 import { Updater } from "../typing";
 import { ModelConfigList } from "./model-config";
@@ -67,6 +73,8 @@ export function MaskConfig(props: {
 
   const globalConfig = useAppConfig();
 
+  const accessStore = useAccessStore();
+
   return (
     <>
       <ContextPrompts
@@ -149,6 +157,17 @@ export function MaskConfig(props: {
         ) : null}
       </List>
 
+      {accessStore.enableAOAI ? (
+        <List>
+          <ListItem
+            title={Locale.Settings.AzureDeploymentName.Title}
+            subTitle={Locale.Settings.AzureDeploymentName.SubTitle}
+          >
+            <input value={accessStore.azureDeployName} />
+          </ListItem>
+        </List>
+      ) : null}
+
       <List>
         <ModelConfigList
           modelConfig={{ ...props.mask.modelConfig }}

app/components/model-config.tsx

@@ -1,4 +1,9 @@
-import { ALL_MODELS, ModalConfigValidator, ModelConfig } from "../store";
+import {
+  ALL_MODELS,
+  ModalConfigValidator,
+  ModelConfig,
+  useAccessStore,
+} from "../store";
 
 import Locale from "../locales";
 import { InputRange } from "./input-range";
@@ -8,27 +13,32 @@ export function ModelConfigList(props: {
   modelConfig: ModelConfig;
   updateConfig: (updater: (config: ModelConfig) => void) => void;
 }) {
+  const accessStore = useAccessStore();
+
   return (
     <>
-      <ListItem title={Locale.Settings.Model}>
-        <Select
-          value={props.modelConfig.model}
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.model = ModalConfigValidator.model(
-                  e.currentTarget.value,
-                )),
-            );
-          }}
-        >
-          {ALL_MODELS.map((v) => (
-            <option value={v.name} key={v.name} disabled={!v.available}>
-              {v.name}
-            </option>
-          ))}
-        </Select>
-      </ListItem>
+      {accessStore.enableAOAI ? null : (
+        <ListItem title={Locale.Settings.Model}>
+          <Select
+            value={props.modelConfig.model}
+            onChange={(e) => {
+              props.updateConfig(
+                (config) =>
+                  (config.model = ModalConfigValidator.model(
+                    e.currentTarget.value,
+                  )),
+              );
+            }}
+          >
+            {ALL_MODELS.map((v) => (
+              <option value={v.name} key={v.name} disabled={!v.available}>
+                {v.name}
+              </option>
+            ))}
+          </Select>
+        </ListItem>
+      )}
+
       <ListItem
         title={Locale.Settings.Temperature.Title}
         subTitle={Locale.Settings.Temperature.SubTitle}

app/components/settings.tsx

@@ -376,7 +376,8 @@ export function Settings() {
   const customCount = promptStore.getUserPrompts().length ?? 0;
   const [shouldShowPromptModal, setShowPromptModal] = useState(false);
 
-  const showUsage = accessStore.isAuthorized();
+  // For now azure openai api do not expose usage api
+  const showUsage = accessStore.isAuthorized() && !accessStore.enableAOAI;
   useEffect(() => {
     // checks per minutes
     checkUpdate();
@@ -594,62 +595,113 @@ export function Settings() {
             <></>
           )}
 
-          {!accessStore.hideUserApiKey ? (
-            <ListItem
-              title={Locale.Settings.Token.Title}
-              subTitle={Locale.Settings.Token.SubTitle}
-            >
-              <PasswordInput
-                value={accessStore.token}
-                type="text"
-                placeholder={Locale.Settings.Token.Placeholder}
-                onChange={(e) => {
-                  accessStore.updateToken(e.currentTarget.value);
-                }}
-              />
-            </ListItem>
-          ) : null}
+          <ListItem title={Locale.Settings.EnableAOAI}>
+            <input
+              type="checkbox"
+              checked={accessStore.enableAOAI}
+              onChange={(e) => {
+                accessStore.switchAOAI(e.currentTarget.checked);
+              }}
+            ></input>
+          </ListItem>
 
-          {!accessStore.hideBalanceQuery ? (
-            <ListItem
-              title={Locale.Settings.Usage.Title}
-              subTitle={
-                showUsage
-                  ? loadingUsage
-                    ? Locale.Settings.Usage.IsChecking
-                    : Locale.Settings.Usage.SubTitle(
-                        usage?.used ?? "[?]",
-                        usage?.subscription ?? "[?]",
-                      )
-                  : Locale.Settings.Usage.NoAccess
-              }
-            >
-              {!showUsage || loadingUsage ? (
-                <div />
-              ) : (
-                <IconButton
-                  icon={<ResetIcon></ResetIcon>}
-                  text={Locale.Settings.Usage.Check}
-                  onClick={() => checkUsage(true)}
+          {accessStore.enableAOAI ? (
+            <>
+              <ListItem
+                title={Locale.Settings.AzureDeploymentName.Title}
+                subTitle={Locale.Settings.AzureDeploymentName.SubTitle}
+              >
+                <input
+                  value={accessStore.azureDeployName}
+                  type="text"
+                  placeholder={Locale.Settings.AzureDeploymentName.Placeholder}
+                  onChange={(e) => {
+                    accessStore.updateAzureDeployName(e.currentTarget.value);
+                  }}
                 />
-              )}
-            </ListItem>
+              </ListItem>
+              <ListItem title={Locale.Settings.AOAIToken.Title}>
+                <PasswordInput
+                  value={accessStore.aoaiToken}
+                  type="text"
+                  placeholder={Locale.Settings.AOAIToken.Placeholder}
+                  onChange={(e) => {
+                    accessStore.updateAOAIToken(e.currentTarget.value);
+                  }}
+                />
+              </ListItem>
+              <ListItem title={Locale.Settings.AzureEndpoint.Title}>
+                <input
+                  value={accessStore.azureEndpoint}
+                  type="text"
+                  placeholder={Locale.Settings.AzureEndpoint.Placeholder}
+                  onChange={(e) => {
+                    accessStore.updateAzureEndpoint(e.currentTarget.value);
+                  }}
+                />
+              </ListItem>
+            </>
           ) : null}
 
-          {!accessStore.hideUserApiKey ? (
-            <ListItem
-              title={Locale.Settings.Endpoint.Title}
-              subTitle={Locale.Settings.Endpoint.SubTitle}
-            >
-              <input
-                type="text"
-                value={accessStore.openaiUrl}
-                placeholder="https://api.openai.com/"
-                onChange={(e) =>
-                  accessStore.updateOpenAiUrl(e.currentTarget.value)
-                }
-              ></input>
-            </ListItem>
+          {!accessStore.enableAOAI ? (
+            <>
+              {!accessStore.hideUserApiKey ? (
+                <ListItem
+                  title={Locale.Settings.Token.Title}
+                  subTitle={Locale.Settings.Token.SubTitle}
+                >
+                  <PasswordInput
+                    value={accessStore.token}
+                    type="text"
+                    placeholder={Locale.Settings.Token.Placeholder}
+                    onChange={(e) => {
+                      accessStore.updateToken(e.currentTarget.value);
+                    }}
+                  />
+                </ListItem>
+              ) : null}
+
+              {!accessStore.hideBalanceQuery ? (
+                <ListItem
+                  title={Locale.Settings.Usage.Title}
+                  subTitle={
+                    showUsage
+                      ? loadingUsage
+                        ? Locale.Settings.Usage.IsChecking
+                        : Locale.Settings.Usage.SubTitle(
+                            usage?.used ?? "[?]",
+                            usage?.subscription ?? "[?]",
+                          )
+                      : Locale.Settings.Usage.NoAccess
+                  }
+                >
+                  {!showUsage || loadingUsage ? (
+                    <div />
+                  ) : (
+                    <IconButton
+                      icon={<ResetIcon></ResetIcon>}
+                      text={Locale.Settings.Usage.Check}
+                      onClick={() => checkUsage(true)}
+                    />
+                  )}
+                </ListItem>
+              ) : null}
+              {!accessStore.hideUserApiKey ? (
+                <ListItem
+                  title={Locale.Settings.Endpoint.Title}
+                  subTitle={Locale.Settings.Endpoint.SubTitle}
+                >
+                  <input
+                    type="text"
+                    value={accessStore.openaiUrl}
+                    placeholder="https://api.openai.com/"
+                    onChange={(e) =>
+                      accessStore.updateOpenAiUrl(e.currentTarget.value)
+                    }
+                  ></input>
+                </ListItem>
+              ) : null}
+            </>
           ) : null}
         </List>
 

app/locales/cn.ts

@@ -159,6 +159,7 @@ const cn = {
       Title: "面具启动页",
       SubTitle: "新建聊天时，展示面具启动页",
     },
+
     Prompt: {
       Disable: {
         Title: "禁用提示词自动补全",
@@ -191,6 +192,20 @@ const cn = {
       Placeholder: "OpenAI API Key",
     },
 
+    EnableAOAI: "使用 Azure OpenAI",
+    AzureEndpoint: {
+      Title: "Azure OpenAI Endpoint",
+      Placeholder: "https://docs-test-001.openai.azure.com/",
+    },
+    AzureDeploymentName: {
+      Title: "Azure OpenAI 部署实例名称",
+      SubTitle: "此值将对应于在部署模型时为部署选择的自定义名称",
+      Placeholder: "部署自定义名称",
+    },
+    AOAIToken: {
+      Title: "Azure OpenAI API Key",
+      Placeholder: "Azure OpenAI API Key",
+    },
     Usage: {
       Title: "余额查询",
       SubTitle(used: any, total: any) {