chore: add quota overflow banner

src/components/ConversationView/index.tsx

@@ -18,6 +18,7 @@ import MessageView from "./MessageView";
 import MessageTextarea from "./MessageTextarea";
 import DataStorageBanner from "../DataStorageBanner";
 import ProductHuntBanner from "../ProductHuntBanner";
+import QuotaOverflowBanner from "../QuotaOverflowBanner";
 
 // The maximum number of tokens that can be sent to the OpenAI API.
 // reference: https://platform.openai.com/docs/api-reference/completions/create#completions/create-max_tokens
@@ -105,7 +106,7 @@ const ConversationView = () => {
   }, [currentConversation, connectionStore.currentConnectionCtx]);
 
   const sendMessageToCurrentConversation = async () => {
-    const currentConversation = conversationStore.getConversationById(conversationStore.getState().currentConversationId)
+    const currentConversation = conversationStore.getConversationById(conversationStore.getState().currentConversationId);
     if (!currentConversation) {
       return;
     }
@@ -220,6 +221,7 @@ const ConversationView = () => {
     >
       <div className="sticky top-0 z-1 bg-white dark:bg-zinc-800 w-full flex flex-col justify-start items-start">
         <ProductHuntBanner />
+        <QuotaOverflowBanner />
         <DataStorageBanner />
         <Header className={showHeaderShadow ? "shadow" : ""} />
       </div>

src/components/QuotaOverflowBanner.tsx

@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import { useLocalStorage } from "react-use";
+import Icon from "./Icon";
+import SettingModal from "./SettingModal";
+import { useState } from "react";
+
+interface Props {
+  className?: string;
+}
+
+const QuotaOverflowBanner = (props: Props) => {
+  const { className } = props;
+  const { t } = useTranslation();
+  const [hideBanner, setHideBanner] = useLocalStorage("hide-quota-overflow-banner", false);
+  const [showSettingModal, setShowSettingModal] = useState(false);
+  const show = !hideBanner;
+
+  return (
+    <>
+      <div
+        className={`${!show && "!hidden"} ${
+          className || ""
+        } relative w-full flex flex-row justify-start sm:justify-center items-center px-4 py-1 bg-gray-100 dark:bg-zinc-700`}
+      >
+        <div className="text-sm leading-6 pr-4 cursor-pointer">
+          {t("banner.quota-overflow")}{" "}
+          <button className="ml-1 underline hover:opacity-80" onClick={() => setShowSettingModal(true)}>
+            {t("banner.use-my-key")}
+          </button>
+        </div>
+        <button className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100" onClick={() => setHideBanner(true)}>
+          <Icon.BiX className="w-6 h-auto" />
+        </button>
+      </div>
+
+      {showSettingModal && <SettingModal close={() => setShowSettingModal(false)} />}
+    </>
+  );
+};
+
+export default QuotaOverflowBanner;

src/locales/en.json

@@ -72,6 +72,8 @@
   "banner": {
     "data-storage": "Connection settings are stored in your local browser",
     "non-select-sql-warning": "The current statement may be non-SELECT SQL, which will result in a database schema or data change. Make sure you know what you are doing.",
-    "product-hunt": "🚀🚀🚀 We just launched on Product Hunt, please give us a vote! 🚀🚀🚀"
+    "product-hunt": "🚀🚀🚀 We just launched on Product Hunt, please give us a vote! 🚀🚀🚀",
+    "quota-overflow": "Our quota is full and we are applying for additional credits. Please wait a moment.",
+    "use-my-key": "Use my key"
   }
 }

src/locales/zh.json

@@ -72,6 +72,8 @@
   "banner": {
     "data-storage": "连接设置存储在您的本地浏览器中",
     "non-select-sql-warning": "当前语句可能是非 SELECT SQL，这将导致数据库模式或数据变化。",
-    "product-hunt": "🚀🚀🚀 我们刚在 Product Hunt 发布, 来给我们点个赞! 🚀🚀🚀"
+    "product-hunt": "🚀🚀🚀 我们刚在 Product Hunt 发布, 来给我们点个赞! 🚀🚀🚀",
+    "quota-overflow": "我们的 OpenAI 额度已满，正在申请额外的额度。请稍候再来。",
+    "use-my-key": "用我自己的 Key"
   }
 }