refactor: rename tmps to temps in Settings and setAPIsTemplate components for consistency

src/components/Settings.tsx

@@ -859,8 +859,8 @@ export default (props: {}) => {
                       label="Chat API"
                       endpoint={ctx.chatStore.apiEndpoint}
                       APIkey={ctx.chatStore.apiKey}
-                      tmps={ctx.templateAPIs}
-                      setTmps={ctx.setTemplateAPIs}
+                      temps={ctx.templateAPIs}
+                      setTemps={ctx.setTemplateAPIs}
                     />
                   </CardContent>
                 </Card>
@@ -964,8 +964,8 @@ export default (props: {}) => {
                         label="Whisper API"
                         endpoint={ctx.chatStore.whisper_api}
                         APIkey={ctx.chatStore.whisper_key}
-                        tmps={ctx.templateAPIsWhisper}
-                        setTmps={ctx.setTemplateAPIsWhisper}
+                        temps={ctx.templateAPIsWhisper}
+                        setTemps={ctx.setTemplateAPIsWhisper}
                       />
                     </CardContent>
                   </Card>
@@ -997,8 +997,8 @@ export default (props: {}) => {
                       label="TTS API"
                       endpoint={ctx.chatStore.tts_api}
                       APIkey={ctx.chatStore.tts_key}
-                      tmps={ctx.templateAPIsTTS}
-                      setTmps={ctx.setTemplateAPIsTTS}
+                      temps={ctx.templateAPIsTTS}
+                      setTemps={ctx.setTemplateAPIsTTS}
                     />
                   </CardContent>
                 </Card>
@@ -1122,8 +1122,8 @@ export default (props: {}) => {
                       label="Image Gen API"
                       endpoint={ctx.chatStore.image_gen_api}
                       APIkey={ctx.chatStore.image_gen_key}
-                      tmps={ctx.templateAPIsImageGen}
-                      setTmps={ctx.setTemplateAPIsImageGen}
+                      temps={ctx.templateAPIsImageGen}
+                      setTemps={ctx.setTemplateAPIsImageGen}
                     />
                   </CardContent>
                 </Card>

src/pages/Chatbox.tsx

@@ -447,7 +447,7 @@ export default function ChatBOX() {
                 keyField="image_gen_key"
               />
             )}
-            {ctx.templateTools.length > 0 && <ListToolsTempaltes />}
+            {ctx.templateTools.length > 0 && <ListToolsTemplates />}
           </NavigationMenuList>
         </NavigationMenu>
       </div>

src/setAPIsTemplate.tsx

@@ -1,10 +1,24 @@
 import { TemplateAPI } from "@/types/chatstore";
 import { Tr } from "@/translate";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { Button } from "./components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { SaveIcon } from "lucide-react";
 
 interface Props {
-  tmps: TemplateAPI[];
-  setTmps: (tmps: TemplateAPI[]) => void;
+  temps: TemplateAPI[];
+  setTemps: (temps: TemplateAPI[]) => void;
   label: string;
   endpoint: string;
   APIkey: string;
@@ -12,31 +26,66 @@ interface Props {
 export function SetAPIsTemplate({
   endpoint,
   APIkey,
-  tmps,
-  setTmps,
+  temps: temps,
+  setTemps: setTemps,
   label,
 }: Props) {
   return (
-    <Button
-      variant="default"
-      size="sm"
-      className="mt-3"
-      onClick={() => {
-        const name = prompt(`Give this **${label}** template a name:`);
-        if (!name) {
-          alert("No template name specified");
-          return;
-        }
-        const tmp: TemplateAPI = {
-          name,
-          endpoint,
-          key: APIkey,
-        };
-        tmps.push(tmp);
-        setTmps([...tmps]);
-      }}
-    >
-      {Tr(`Save ${label}`)}
-    </Button>
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">{Tr(`Save ${label}`)}</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Save {label} as Template</DialogTitle>
+          <DialogDescription>
+            Once saved, you can easily access your templates from the dropdown
+            menu.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="templateName" className="sr-only">
+              Name
+            </Label>
+            <Input id="templateName" placeholder="Type Something..." />
+            <Label id="templateNameError" className="text-red-600"></Label>
+          </div>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button
+              type="submit"
+              size="sm"
+              className="px-3"
+              onClick={() => {
+                const name = document.getElementById(
+                  "templateName"
+                ) as HTMLInputElement;
+                if (!name.value) {
+                  const errorLabel = document.getElementById(
+                    "templateNameError"
+                  ) as HTMLLabelElement;
+                  if (errorLabel) {
+                    errorLabel.textContent = "Template name is required.";
+                  }
+                  return;
+                }
+                const tmp: TemplateAPI = {
+                  name: name.value,
+                  endpoint,
+                  key: APIkey,
+                };
+                temps.push(tmp);
+                setTemps([...temps]);
+              }}
+            >
+              <SaveIcon className="w-4 h-4" /> Save
+              <span className="sr-only">Save</span>
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }