fix: chat template menu by cursor

src/components/ListAPI.tsx

@@ -107,25 +107,26 @@ function APIsDropdownList({
         <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
           {API.map((t: TemplateAPI, index: number) => (
             <li key={index}>
-              <NavigationMenuLink asChild>
+              <NavigationMenuLink
-                <a
+                asChild
-                  onClick={() => {
+                onSelect={() => {
-                    // @ts-ignore
+                  // @ts-ignore
-                    chatStore[apiField as keyof ChatStore] = t.endpoint;
+                  chatStore[apiField as keyof ChatStore] = t.endpoint;
-                    // @ts-ignore
+                  // @ts-ignore
-                    chatStore[keyField] = t.key;
+                  chatStore[keyField] = t.key;
-                    setChatStore({
+                  setChatStore({
-                      ...chatStore,
+                    ...chatStore,
-                    });
+                  });
-                  }}
+                }}
-                  className={cn(
+                className={cn(
-                    "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                  "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-                    chatStore[apiField as keyof ChatStore] === t.endpoint &&
+                  chatStore[apiField as keyof ChatStore] === t.endpoint &&
-                      chatStore[keyField as keyof ChatStore] === t.key
+                    chatStore[keyField as keyof ChatStore] === t.key
-                      ? "bg-accent text-accent-foreground"
+                    ? "bg-accent text-accent-foreground"
-                      : ""
+                    : ""
-                  )}
+                )}
-                >
+              >
+                <a>
                   <div className="text-sm font-medium leading-none">
                     {t.name}
                   </div>
@@ -223,137 +224,73 @@ function ChatTemplateDropdownList() {
 
   const { chatStore, setChatStore } = useContext(AppChatStoreContext);
   const { templates, setTemplates } = useContext(AppContext);
+  const [open, setOpen] = React.useState(false);
 
   return (
-    <NavigationMenuItem>
+    <div className="flex items-center space-x-4 mx-3">
-      <NavigationMenuTrigger>
+      <p className="text-sm text-muted-foreground">
-        <span className="lg:hidden">Chat Template</span>
+        <Tr>Chat Template</Tr>
-        <span className="hidden lg:inline">Chat Template</span>
+      </p>
-      </NavigationMenuTrigger>
+      <Popover open={open} onOpenChange={setOpen}>
-      <NavigationMenuContent>
+        <PopoverTrigger asChild>
-        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+          <Button variant="outline" className="w-[150px] justify-start">
-          {templates.map((t: TemplateChatStore, index: number) => (
+            <Tr>Select Template</Tr>
-            <ChatTemplateItem key={index} t={t} index={index} />
+          </Button>
-          ))}
+        </PopoverTrigger>
-        </ul>
+        <PopoverContent className="p-0" side="bottom" align="start">
-      </NavigationMenuContent>
+          <Command>
-    </NavigationMenuItem>
+            <CommandInput placeholder="Search template..." />
+            <CommandList>
+              <CommandEmpty>
+                <Tr>No results found.</Tr>
+              </CommandEmpty>
+              <CommandGroup>
+                {templates.map((t: TemplateChatStore, index: number) => (
+                  <CommandItem
+                    key={index}
+                    value={t.name}
+                    onSelect={() => {
+                      // Update chatStore with the selected template
+                      if (chatStore.history.length > 0 || chatStore.systemMessageContent) {
+                        console.log("you clicked", t.name);
+                        const confirm = window.confirm(
+                          "This will replace the current chat history. Are you sure? "
+                        );
+                        if (!confirm) {
+                          setOpen(false); // Close popover even if not confirmed
+                          return;
+                        }
+                      }
+                      setChatStore({
+                        ...newChatStore({
+                          ...chatStore,
+                          ...{ use_this_history: t.history ?? chatStore.history },
+                          ...t,
+                        }),
+                      });
+                      setOpen(false); // Close popover after selecting
+                    }}
+                  >
+                    {t.name}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }
 
-const ChatTemplateItem = ({
-  t,
-  index,
-}: {
-  t: TemplateChatStore;
-  index: number;
-}) => {
-  const [dialogOpen, setDialogOpen] = React.useState(false);
-  const { chatStore, setChatStore } = useContext(AppChatStoreContext);
-  const { templates, setTemplates } = useContext(AppContext);
-
-  return (
-    <li
-      onClick={() => {
-        // Update chatStore with the selected template
-        if (chatStore.history.length > 0 || chatStore.systemMessageContent) {
-          console.log("you clicked", t.name);
-          const confirm = window.confirm(
-            "This will replace the current chat history. Are you sure? "
-          );
-          if (!confirm) return;
-        }
-        setChatStore({
-          ...newChatStore({
-            ...chatStore,
-            ...{ use_this_history: t.history ?? chatStore.history },
-            ...t,
-          }),
-        });
-      }}
-    >
-      <NavigationMenuLink asChild>
-        <a
-          className={cn(
-            "flex flex-row justify-between items-center select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-          )}
-        >
-          <div className="text-sm font-medium leading-non">{t.name}</div>
-          <div onClick={(e) => e.stopPropagation()}>
-            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-              <DialogTrigger asChild>
-                <EditIcon />
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Edit Template</DialogTitle>
-                </DialogHeader>
-                <Label>Template Name</Label>
-                <Input
-                  value={t.name}
-                  onBlur={(e) => {
-                    t.name = e.target.value;
-                    templates[index] = t;
-                    setTemplates([...templates]);
-                  }}
-                />
-                <p>
-                  Raw JSON allows you to modify any content within the template.
-                  You can remove unnecessary fields, and non-existent fields
-                  will be inherited from the current session.
-                </p>
-                <Textarea
-                  className="h-64"
-                  value={JSON.stringify(t, null, 2)}
-                  onBlur={(e) => {
-                    try {
-                      const json = JSON.parse(
-                        e.target.value
-                      ) as TemplateChatStore;
-                      json.name = t.name;
-                      templates[index] = json;
-                      setTemplates([...templates]);
-                    } catch (e) {
-                      console.error(e);
-                      alert("Invalid JSON");
-                    }
-                  }}
-                />
-                <Button
-                  type="submit"
-                  variant={"destructive"}
-                  onClick={() => {
-                    let confirm = window.confirm(
-                      "Are you sure you want to delete this template?"
-                    );
-                    if (!confirm) return;
-                    templates.splice(index, 1);
-                    setTemplates([...templates]);
-                    setDialogOpen(false);
-                  }}
-                >
-                  Delete
-                </Button>
-                <Button type="submit" onClick={() => setDialogOpen(false)}>
-                  Close
-                </Button>
-              </DialogContent>
-            </Dialog>
-          </div>
-        </a>
-      </NavigationMenuLink>
-    </li>
-  );
-};
-
 const APIListMenu: React.FC = () => {
   const ctx = useContext(AppContext);
   return (
     <div className="flex flex-col my-2 gap-2 w-full">
       {ctx.templateTools.length > 0 && <ToolsDropdownList />}
+      {ctx.templates.length > 0 && <ChatTemplateDropdownList />}
       <NavigationMenu>
         <NavigationMenuList>
-          {ctx.templates.length > 0 && <ChatTemplateDropdownList />}
           {ctx.templateAPIs.length > 0 && (
             <APIsDropdownList
               label="Chat API"