refactor: update button labels and improve dialog for saving tools templates

src/components/ListAPI.tsx

@@ -139,7 +139,7 @@ function ToolsDropdownList() {
   return (
     <NavigationMenuItem className="p-3">
       <NavigationMenuTrigger>
-        <span>{Tr(`Saved tools templates`)}</span>
+        <span>{Tr(`Tools`)}</span>
         <Button
           variant="link"
           className="ml-2 text-sm"

src/components/MessageBubble.tsx

@@ -244,44 +244,6 @@ export default function Message(props: { messageIndex: number }) {
   const [showEdit, setShowEdit] = useState(false);
   const [renderMarkdown, setRenderWorkdown] = useState(false);
   const [renderColor, setRenderColor] = useState(false);
-  const DeleteIcon = () => (
-    <button
-      onClick={() => {
-        chatStore.history[messageIndex].hide =
-          !chatStore.history[messageIndex].hide;
-
-        //chatStore.totalTokens =
-        chatStore.totalTokens = 0;
-        for (const i of chatStore.history
-          .filter(({ hide }) => !hide)
-          .slice(chatStore.postBeginIndex)
-          .map(({ token }) => token)) {
-          chatStore.totalTokens += i;
-        }
-        setChatStore({ ...chatStore });
-      }}
-    >
-      Delete
-    </button>
-  );
-  const CopiedHint = () => (
-    <div role="alert" className="alert">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        className="stroke-info h-6 w-6 shrink-0"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-        ></path>
-      </svg>
-      <span>{Tr("Message copied to clipboard!")}</span>
-    </div>
-  );
 
   const { toast } = useToast();
   const copyToClipboard = async (text: string) => {
@@ -309,20 +271,6 @@ export default function Message(props: { messageIndex: number }) {
     }
   };
 
-  const CopyIcon = ({ textToCopy }: { textToCopy: string }) => {
-    return (
-      <>
-        <button
-          onClick={() => {
-            copyToClipboard(textToCopy);
-          }}
-        >
-          Copy
-        </button>
-      </>
-    );
-  };
-
   return (
     <>
       {chatStore.postBeginIndex !== 0 &&

src/components/Settings.tsx

@@ -53,6 +53,7 @@ import {
 } from "@/components/ui/select";
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -73,6 +74,7 @@ import {
   KeyIcon,
   ListIcon,
   MoveHorizontalIcon,
+  SaveIcon,
   TriangleAlertIcon,
 } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
@@ -581,25 +583,68 @@ export default (props: {}) => {
                 <div className="box">
                   <div className="flex justify-evenly flex-wrap">
                     {ctx.chatStore.toolsString.trim() && (
-                      <Button
-                        onClick={() => {
-                          const name = prompt(
-                            `Give this **Tools** template a name:`
-                          );
-                          if (!name) {
-                            alert("No template name specified");
-                            return;
-                          }
-                          const newToolsTmp: TemplateTools = {
-                            name,
-                            toolsString: ctx.chatStore.toolsString,
-                          };
-                          ctx.templateTools.push(newToolsTmp);
-                          ctx.setTemplateTools([...ctx.templateTools]);
-                        }}
-                      >
-                        {Tr(`Save Tools`)}
-                      </Button>
+                      <Dialog>
+                        <DialogTrigger asChild>
+                          <Button variant="outline">{Tr(`Save Tools`)}</Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-md">
+                          <DialogHeader>
+                            <DialogTitle>Save the tool as Template</DialogTitle>
+                            <DialogDescription>
+                              Once saved, you can easily access your tools from
+                              the dropdown menu.
+                            </DialogDescription>
+                          </DialogHeader>
+                          <div className="flex items-center space-x-2">
+                            <div className="grid flex-1 gap-2">
+                              <Label htmlFor="toolsName" className="sr-only">
+                                Name
+                              </Label>
+                              <Input
+                                id="toolsName"
+                                placeholder="Type Something..."
+                              />
+                              <Label
+                                id="toolsNameError"
+                                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(
+                                    "toolsName" as string
+                                  ) as HTMLInputElement;
+                                  if (!name.value) {
+                                    const errorLabel = document.getElementById(
+                                      "toolsNameError" as string
+                                    ) as HTMLLabelElement;
+                                    if (errorLabel) {
+                                      errorLabel.textContent =
+                                        "Tool name is required.";
+                                    }
+                                    return;
+                                  }
+                                  const newToolsTmp: TemplateTools = {
+                                    name: name.value,
+                                    toolsString: ctx.chatStore.toolsString,
+                                  };
+                                  ctx.templateTools.push(newToolsTmp);
+                                  ctx.setTemplateTools([...ctx.templateTools]);
+                                }}
+                              >
+                                <SaveIcon className="w-4 h-4" /> Save
+                                <span className="sr-only">Save</span>
+                              </Button>
+                            </DialogClose>
+                          </DialogFooter>
+                        </DialogContent>
+                      </Dialog>
                     )}
                   </div>
                 </div>