feat: add alert icon in Settings button for missing API key or endpoint

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">

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 && (