fix: delete chat template cause dialog render panic

src/components/ListAPI.tsx

@@ -226,10 +226,28 @@ function ChatTemplateDropdownList() {
       </NavigationMenuTrigger>
       <NavigationMenuContent>
         <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-          {templates.map((t: TemplateChatStore, index: number) => {
+          {templates.map((t: TemplateChatStore, index: number) => (
+            <ChatTemplateItem key={index} t={t} index={index} />
+          ))}
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  );
+}
+
+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 key={index}>
+    <li>
       <NavigationMenuLink asChild>
         <a
           onClick={() => {
@@ -250,9 +268,7 @@ function ChatTemplateDropdownList() {
             "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">
+          <div className="text-sm font-medium leading-non">{t.name}</div>
-                      {t.name}
-                    </div>
           <div onClick={(e) => e.stopPropagation()}>
             <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
               <DialogTrigger asChild>
@@ -272,10 +288,9 @@ function ChatTemplateDropdownList() {
                   }}
                 />
                 <p>
-                            Raw JSON allows you to modify any content within the
+                  Raw JSON allows you to modify any content within the template.
-                            template. You can remove unnecessary fields, and
+                  You can remove unnecessary fields, and non-existent fields
-                            non-existent fields will be inherited from the
+                  will be inherited from the current session.
-                            current session.
                 </p>
                 <Textarea
                   className="h-64"
@@ -298,22 +313,18 @@ function ChatTemplateDropdownList() {
                   type="submit"
                   variant={"destructive"}
                   onClick={() => {
-                              const confirm = window.confirm(
+                    let confirm = window.confirm(
                       "Are you sure you want to delete this template?"
                     );
-                              if (confirm) {
+                    if (!confirm) return;
                     templates.splice(index, 1);
                     setTemplates([...templates]);
                     setDialogOpen(false);
-                              }
                   }}
                 >
                   Delete
                 </Button>
-                          <Button
+                <Button type="submit" onClick={() => setDialogOpen(false)}>
-                            type="submit"
-                            onClick={() => setDialogOpen(false)}
-                          >
                   Close
                 </Button>
               </DialogContent>
@@ -323,12 +334,7 @@ function ChatTemplateDropdownList() {
       </NavigationMenuLink>
     </li>
   );
-          })}
+};
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-  );
-}
 
 const APIListMenu: React.FC = () => {
   const ctx = useContext(AppContext);