feat: display the balance of current key

app/api/credit-summary/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest } from "next/server";
+export async function POST(req: NextRequest) {
+    try {
+      let apiKey = process.env.OPENAI_API_KEY;
+      const userApiKey = req.headers.get("token");
+      if (userApiKey) {
+        apiKey = userApiKey;
+      }
+  
+      const res = await fetch("https://api.openai.com/dashboard/billing/credit_grants", {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${apiKey}`,
+          },
+          method: "GET"
+      });
+      console.log(res.body)
+      return new Response(res.body);
+    } catch (error) {
+      console.error("[TOKEN]", error);
+    }
+  }

app/components/settings.tsx

@@ -27,6 +27,7 @@ import { getCurrentCommitId } from "../utils";
 import Link from "next/link";
 import { UPDATE_URL } from "../constant";
 import { SearchService, usePromptStore } from "../store/prompt";
+import { requestAccountBalance, requestCreditSummary, requestWithPrompt } from "../requests";
 
 function SettingItem(props: {
   title: string;
@@ -72,6 +73,7 @@ export function Settings(props: { closeSettings: () => void }) {
 
   useEffect(() => {
     checkUpdate();
+    requestAccountBalance().then((res)=> setAccountBalance(res))
   }, []);
 
   const accessStore = useAccessStore();
@@ -84,6 +86,8 @@ export function Settings(props: { closeSettings: () => void }) {
   const builtinCount = SearchService.count.builtin;
   const customCount = promptStore.prompts.size ?? 0;
 
+  const [accountBalance, setAccountBalance] = useState(-1);
+
   return (
     <>
       <div className={styles["window-header"]}>
@@ -320,10 +324,24 @@ export function Settings(props: { closeSettings: () => void }) {
               placeholder={Locale.Settings.Token.Placeholder}
               onChange={(e) => {
                 accessStore.updateToken(e.currentTarget.value);
+                requestAccountBalance().then((res)=> setAccountBalance(res))
               }}
             ></input>
           </SettingItem>
 
+          <SettingItem
+            title={Locale.Settings.AccountBalance.Title}
+            subTitle={Locale.Settings.AccountBalance.SubTitle}
+          >
+            <input
+              value={accountBalance}
+              type="number"
+              style={{maxWidth: '15%', textAlign: 'center', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+              placeholder={Locale.Settings.AccountBalance.Placeholder}
+              disabled= {true}
+            ></input>
+          </SettingItem>
+
           <SettingItem
             title={Locale.Settings.HistoryCount.Title}
             subTitle={Locale.Settings.HistoryCount.SubTitle}

app/locales/cn.ts

@@ -97,6 +97,11 @@ const cn = {
       SubTitle: "使用自己的 Key 可绕过受控访问限制",
       Placeholder: "OpenAI API Key",
     },
+    AccountBalance: {
+      Title: "账户余额",
+      SubTitle: "查看当前 Key 账户余额",
+      Placeholder: "-1"
+    },
     AccessCode: {
       Title: "访问码",
       SubTitle: "现在是受控访问状态",

app/locales/en.ts

@@ -100,6 +100,11 @@ const en: LocaleType = {
       SubTitle: "Use your key to ignore access code limit",
       Placeholder: "OpenAI API Key",
     },
+    AccountBalance: {
+      Title: "Account Balance",
+      SubTitle: "Query balance of current key",
+      Placeholder: "-1"
+    },
     AccessCode: {
       Title: "Access Code",
       SubTitle: "Access control enabled",

app/locales/tw.ts

@@ -98,6 +98,11 @@ const tw: LocaleType = {
       SubTitle: "使用自己的 Key 可規避受控訪問限制",
       Placeholder: "OpenAI API Key",
     },
+    AccountBalance: {
+      Title: "賬戶余額",
+      SubTitle: "查詢當前 Key 的賬戶余額",
+      Placeholder: "-1"
+    },
     AccessCode: {
       Title: "訪問碼",
       SubTitle: "現在是受控訪問狀態",

app/requests.ts

@@ -38,7 +38,7 @@ function getHeaders() {
   if (accessStore.token && accessStore.token.length > 0) {
     headers["token"] = accessStore.token;
   }
-
+ 
   return headers;
 }
 
@@ -57,6 +57,22 @@ export async function requestChat(messages: Message[]) {
   return (await res.json()) as ChatReponse;
 }
 
+export async function requestCreditSummary() {
+  const res = await fetch("/api/credit-summary", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...getHeaders(),
+    },
+  });
+  return (await res.json())
+} 
+
+export async function requestAccountBalance() {
+  const res = await requestCreditSummary();
+  return res?.total_available ?? -1
+}
+
 export async function requestChatStream(
   messages: Message[],
   options?: {