realDuang · LaChimere · May 31, 2023 · May 31, 2023 · May 31, 2023 · May 31, 2023
diff --git a/app/api/auth.ts b/app/api/auth.ts
@@ -27,6 +27,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);

diff --git a/app/api/common.ts b/app/api/common.ts
@@ -3,17 +3,25 @@ import { NextRequest } from "next/server";
 export const OPENAI_URL = "api.openai.com";
 const DEFAULT_PROTOCOL = "https";
 const PROTOCOL = process.env.PROTOCOL ?? DEFAULT_PROTOCOL;
-const BASE_URL = process.env.BASE_URL ?? OPENAI_URL;
 
 export async function requestOpenai(req: NextRequest) {
   const controller = new AbortController();
   const authValue = req.headers.get("Authorization") ?? "";
+  const azureApiKey = req.headers.get("azure-api-key") ?? "";
+  const azureDomainName = req.headers.get("azure-domain-name") ?? "";
+  const AZURE_OPENAI_URL = `${azureDomainName}.openai.azure.com`;
   const openaiPath = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
     "/api/openai/",
     "",
   );
 
-  let baseUrl = BASE_URL;
+  let baseUrl = OPENAI_URL;
+  if (openaiPath?.includes("/deployments/")) {
+    baseUrl = AZURE_OPENAI_URL;
+  }
+  if (process.env.BASE_URL) {
+    baseUrl = process.env.BASE_URL;
+  }
 
   if (!baseUrl.startsWith("http")) {
     baseUrl = `${PROTOCOL}://${baseUrl}`;
@@ -26,6 +34,9 @@ export async function requestOpenai(req: NextRequest) {
     console.log("[Org ID]", process.env.OPENAI_ORG_ID);
   }
 
+  if (!azureApiKey && (!authValue || !authValue.startsWith("Bearer sk-"))) {
+    console.error("[OpenAI Request] invalid api key provided", authValue);
+  }
   const timeoutId = setTimeout(() => {
     controller.abort();
   }, 10 * 60 * 1000);
@@ -35,6 +46,7 @@ export async function requestOpenai(req: NextRequest) {
     headers: {
       "Content-Type": "application/json",
       Authorization: authValue,
+      "api-key": azureApiKey,
       ...(process.env.OPENAI_ORG_ID && {
         "OpenAI-Organization": process.env.OPENAI_ORG_ID,
       }),

diff --git a/app/client/api.ts b/app/client/api.ts
@@ -115,5 +115,11 @@ export function getHeaders() {
     );
   }
 
+  if (accessStore.enableAOAI && validString(accessStore.aoaiToken)) {
+    headers["azure-api-key"] = accessStore.aoaiToken;
+    headers["azure-domain-name"] = accessStore.azureDomainName;
+    headers["azure-deployment-name"] = accessStore.azureDeployName;
+  }
+
   return headers;
 }
diff --git a/app/client/platforms/openai.ts b/app/client/platforms/openai.ts
@@ -1,5 +1,10 @@
 import { 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";
@@ -10,10 +15,21 @@ import {
 import { prettyObject } from "@/app/utils/format";
 
 export class ChatGPTApi implements LLMApi {
-  public ChatPath = "v1/chat/completions";
   public UsagePath = "dashboard/billing/usage";
   public SubsPath = "dashboard/billing/subscription";
 
+  public get ChatPath() {
+    const OPENAI_REQUEST_PATH = "v1/chat/completions";
+    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.endsWith("/")) {

diff --git a/app/components/mask.tsx b/app/components/mask.tsx
@@ -13,15 +13,29 @@ 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, List, ListItem, Modal, Popover, Select } from "./ui-lib";
+import {
+  Input,
+  List,
+  ListItem,
+  Modal,
+  Popover,
+  Select,
+  TextInput,
+} from "./ui-lib";
 import { Avatar, AvatarPicker } from "./emoji";
 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";
@@ -59,6 +73,8 @@ export function MaskConfig(props: {
 
   const globalConfig = useAppConfig();
 
+  const accessStore = useAccessStore();
+
   return (
     <>
       <ContextPrompts
@@ -141,6 +157,17 @@ export function MaskConfig(props: {
         ) : null}
       </List>
 
+      {accessStore.enableAOAI ? (
+        <List>
+          <ListItem
+            title={Locale.Settings.AzureDeploymentName.Title}
+            subTitle={Locale.Settings.AzureDeploymentName.SubTitle}
+          >
+            <TextInput value={accessStore.azureDeployName} />
+          </ListItem>
+        </List>
+      ) : null}
+
       <List>
         <ModelConfigList
           modelConfig={{ ...props.mask.modelConfig }}

diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx
@@ -1,34 +1,43 @@
-import { ALL_MODELS, ModalConfigValidator, ModelConfig } from "../store";
+import {
+  ALL_MODELS,
+  ModalConfigValidator,
+  ModelConfig,
+  useAccessStore,
+} from "../store";
 
 import Locale from "../locales";
 import { InputRange } from "./input-range";
-import { List, ListItem, Select } from "./ui-lib";
+import { ListItem, Select } from "./ui-lib";
 
 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}

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
@@ -17,6 +17,7 @@ import {
   Modal,
   PasswordInput,
   Popover,
+  TextInput,
   Select,
 } from "./ui-lib";
 import { ModelConfigList } from "./model-config";
@@ -264,7 +265,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();
@@ -502,45 +504,97 @@ 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>
+          <ListItem title={Locale.Settings.EnableAOAI}>
+            <input
+              type="checkbox"
+              checked={accessStore.enableAOAI}
+              onChange={(e) => {
+                accessStore.switchAOAI(e.currentTarget.checked);
+              }}
+            ></input>
+          </ListItem>
+
+          {accessStore.enableAOAI ? (
+            <>
+              <ListItem title={Locale.Settings.AzureDomainName.Title}>
+                <TextInput
+                  value={accessStore.azureDomainName}
+                  type="text"
+                  placeholder={Locale.Settings.AzureDomainName.Placeholder}
+                  onChange={(e) => {
+                    accessStore.updateDomainName(e.currentTarget.value);
+                  }}
+                />
+              </ListItem>
+              <ListItem
+                title={Locale.Settings.AzureDeploymentName.Title}
+                subTitle={Locale.Settings.AzureDeploymentName.SubTitle}
+              >
+                <TextInput
+                  value={accessStore.azureDeployName}
+                  type="text"
+                  placeholder={Locale.Settings.AzureDeploymentName.Placeholder}
+                  onChange={(e) => {
+                    accessStore.updateDeployName(e.currentTarget.value);
+                  }}
+                />
+              </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>
+            </>
           ) : null}
 
-          <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>
+          {!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}
+
+              <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}
         </List>
 
         <List>

diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
@@ -246,6 +246,14 @@ export function PasswordInput(props: HTMLProps<HTMLInputElement>) {
   );
 }
 
+export function TextInput(props: HTMLProps<HTMLInputElement>) {
+  return (
+    <div className={"password-input-container"}>
+      <input {...props} type={"text"} className={"password-input"} />
+    </div>
+  );
+}
+
 export function Select(
   props: React.DetailedHTMLProps<
     React.SelectHTMLAttributes<HTMLSelectElement>,