From c421792b9f25f82b474eef184118244c878e9b16 Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Fri, 3 Jan 2025 01:35:45 +0800
Subject: [PATCH] feat: add alert icon in Settings button for missing API key
 or endpoint

---
 src/components/Settings.tsx |  4 ++++
 src/pages/Chatbox.tsx       | 18 ------------------
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 531f0fa..d1c7bd8 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -73,6 +73,7 @@ import {
   KeyIcon,
   ListIcon,
   MoveHorizontalIcon,
+  TriangleAlertIcon,
 } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { Slider } from "@/components/ui/slider";
@@ -519,6 +520,9 @@ export default (props: {}) => {
       <SheetTrigger asChild>
         <Button variant="outline" className="flex-grow">
           {Tr("Settings")}
+          {(!ctx.chatStore.apiKey || !ctx.chatStore.apiEndpoint) && (
+            <TriangleAlertIcon className="w-4 h-4 ml-1 text-yellow-500" />
+          )}
         </Button>
       </SheetTrigger>
       <SheetContent className="flex flex-col overflow-scroll">
diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx
index 07a3c91..dad1ea9 100644
--- a/src/pages/Chatbox.tsx
+++ b/src/pages/Chatbox.tsx
@@ -428,24 +428,6 @@ export default function ChatBOX() {
   return (
     <>
       <div className="flex flex-col p-2 gap-2 w-full">
-        {!chatStore.apiKey && (
-          <Alert>
-            <KeyIcon className="h-4 w-4" />
-            <AlertTitle>Heads up!</AlertTitle>
-            <AlertDescription>
-              {Tr("Please click above to set")} (OpenAI) API KEY
-            </AlertDescription>
-          </Alert>
-        )}
-        {!chatStore.apiEndpoint && (
-          <Alert>
-            <GlobeIcon className="h-4 w-4" />
-            <AlertTitle>Heads up!</AlertTitle>
-            <AlertDescription>
-              {Tr("Please click above to set")} API Endpoint
-            </AlertDescription>
-          </Alert>
-        )}
         <NavigationMenu>
           <NavigationMenuList>
             {ctx.templateAPIs.length > 0 && (