feat: check usage throttle

app/components/settings.module.scss

@@ -32,3 +32,14 @@
     min-width: 80%;
   }
 }
+
+.user-prompt-modal {
+  .user-prompt-search {
+  }
+
+  .user-prompt-list {
+  }
+
+  .user-prompt-actions {
+  }
+}

app/components/settings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, HTMLProps } from "react";
+import { useState, useEffect, useMemo, HTMLProps, useRef } from "react";
 
 import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react";
 
@@ -34,6 +34,15 @@ import { requestUsage } from "../requests";
 import { ErrorBoundary } from "./error";
 import { InputRange } from "./input-range";
 
+function UserPromptModal() {
+  const promptStore = usePromptStore();
+  const prompts = Array.from(promptStore.prompts.values()).sort(
+    (a, b) => a.id ?? 0 - (b.id ?? 0),
+  );
+
+  return <></>;
+}
+
 function SettingItem(props: {
   title: string;
   subTitle?: string;
@@ -99,18 +108,16 @@ export function Settings(props: { closeSettings: () => void }) {
     });
   }
 
-  const [usage, setUsage] = useState<{
-    used?: number;
-    subscription?: number;
-  }>();
+  const usage = {
+    used: updateStore.used,
+    subscription: updateStore.subscription,
+  };
   const [loadingUsage, setLoadingUsage] = useState(false);
   function checkUsage() {
     setLoadingUsage(true);
-    requestUsage()
-      .then((res) => setUsage(res))
-      .finally(() => {
-        setLoadingUsage(false);
-      });
+    updateStore.updateUsage().finally(() => {
+      setLoadingUsage(false);
+    });
   }
 
   const accessStore = useAccessStore();
@@ -126,6 +133,7 @@ export function Settings(props: { closeSettings: () => void }) {
 
   const showUsage = accessStore.isAuthorized();
   useEffect(() => {
+    // checks per minutes
     checkUpdate();
     showUsage && checkUsage();
     // eslint-disable-next-line react-hooks/exhaustive-deps

app/requests.ts

@@ -113,7 +113,7 @@ export async function requestUsage() {
   if (response.total_usage) {
     response.total_usage = Math.round(response.total_usage) / 100;
   }
-  
+
   if (total.hard_limit_usd) {
     total.hard_limit_usd = Math.round(total.hard_limit_usd * 100) / 100;
   }

app/store/update.ts

@@ -1,13 +1,19 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { FETCH_COMMIT_URL, FETCH_TAG_URL } from "../constant";
+import { requestUsage } from "../requests";
 
 export interface UpdateStore {
   lastUpdate: number;
   remoteVersion: string;
 
+  used?: number;
+  subscription?: number;
+  lastUpdateUsage: number;
+
   version: string;
-  getLatestVersion: (force: boolean) => Promise<string>;
+  getLatestVersion: (force?: boolean) => Promise<void>;
+  updateUsage: (force?: boolean) => Promise<void>;
 }
 
 export const UPDATE_KEY = "chat-update";
@@ -26,22 +32,23 @@ function queryMeta(key: string, defaultValue?: string): string {
   return ret;
 }
 
+const ONE_MINUTE = 60 * 1000;
+
 export const useUpdateStore = create<UpdateStore>()(
   persist(
     (set, get) => ({
       lastUpdate: 0,
       remoteVersion: "",
 
+      lastUpdateUsage: 0,
+
       version: "unknown",
 
       async getLatestVersion(force = false) {
-        set(() => ({ version: queryMeta("version") }));
+        set(() => ({ version: queryMeta("version") ?? "unknown" }));
 
-        const overTenMins = Date.now() - get().lastUpdate > 10 * 60 * 1000;
-        const shouldFetch = force || overTenMins;
-        if (!shouldFetch) {
-          return get().version ?? "unknown";
-        }
+        const overTenMins = Date.now() - get().lastUpdate > 10 * ONE_MINUTE;
+        if (!force && !overTenMins) return;
 
         try {
           // const data = await (await fetch(FETCH_TAG_URL)).json();
@@ -53,10 +60,19 @@ export const useUpdateStore = create<UpdateStore>()(
             remoteVersion: remoteId,
           }));
           console.log("[Got Upstream] ", remoteId);
-          return remoteId;
         } catch (error) {
           console.error("[Fetch Upstream Commit Id]", error);
-          return get().version ?? "";
+        }
+      },
+
+      async updateUsage(force = false) {
+        const overOneMinute = Date.now() - get().lastUpdateUsage >= ONE_MINUTE;
+        if (!overOneMinute && !force) return;
+
+        const usage = await requestUsage();
+
+        if (usage) {
+          set(() => usage);
         }
       },
     }),