feat: Add edit and delete functionality for templates and enhance JSON editor

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@hookform/resolvers": "^3.9.1",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-aspect-ratio": "^1.1.1",

src/components/ListAPI.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState, useRef } from "react";
 import {
   ChatStore,
   TemplateAPI,
@@ -6,6 +6,7 @@ import {
   TemplateTools,
 } from "@/types/chatstore";
 import { Tr } from "@/translate";
+import Editor from "@monaco-editor/react";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -35,14 +36,16 @@ import {
   Dialog,
   DialogContent,
   DialogHeader,
-  DialogTrigger,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
 } from "./ui/dialog";
-import { DialogTitle } from "@radix-ui/react-dialog";
 import { Textarea } from "./ui/textarea";
 import { Label } from "./ui/label";
 import { Input } from "./ui/input";
 import { SetAPIsTemplate } from "./setAPIsTemplate";
 import { isVailedJSON } from "@/utils/isVailedJSON";
+import { toast } from 'sonner';
 
 interface APITemplateDropdownProps {
   label: string;
@@ -50,6 +53,81 @@ interface APITemplateDropdownProps {
   apiField: string;
   keyField: string;
 }
+
+interface EditTemplateDialogProps {
+  template: TemplateAPI;
+  onSave: (updatedTemplate: TemplateAPI) => void;
+  onClose: () => void;
+}
+
+function EditTemplateDialog({ template, onSave, onClose }: EditTemplateDialogProps) {
+  const [name, setName] = useState(template.name);
+  const [endpoint, setEndpoint] = useState(template.endpoint);
+  const [key, setKey] = useState(template.key);
+  const { toast } = useToast();
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      toast({
+        title: "Error",
+        description: "Template name cannot be empty",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    onSave({
+      ...template,
+      name: name.trim(),
+      endpoint: endpoint.trim(),
+      key: key.trim(),
+    });
+    onClose();
+  };
+
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Template</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="name">Template Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="endpoint">API Endpoint</Label>
+            <Input
+              id="endpoint"
+              value={endpoint}
+              onChange={(e) => setEndpoint(e.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="key">API Key</Label>
+            <Input
+              id="key"
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button onClick={handleSave}>Save Changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function APIsDropdownList({
   label,
   shortLabel,
@@ -70,18 +148,53 @@ function APIsDropdownList({
     setTemplateAPIsWhisper,
     setTemplateTools,
   } = useContext(AppContext);
+  const { toast } = useToast();
+  const [open, setOpen] = React.useState(false);
+  const [editingTemplate, setEditingTemplate] = useState<TemplateAPI | null>(null);
+
   let API = templateAPIs;
+  let setAPI = setTemplateAPIs;
   if (label === "Chat API") {
     API = templateAPIs;
+    setAPI = setTemplateAPIs;
   } else if (label === "Whisper API") {
     API = templateAPIsWhisper;
+    setAPI = setTemplateAPIsWhisper;
   } else if (label === "TTS API") {
     API = templateAPIsTTS;
+    setAPI = setTemplateAPIsTTS;
   } else if (label === "Image Gen API") {
     API = templateAPIsImageGen;
+    setAPI = setTemplateAPIsImageGen;
   }
 
-  const [open, setOpen] = React.useState(false);
+  const handleEdit = (template: TemplateAPI) => {
+    setEditingTemplate(template);
+  };
+
+  const handleSave = (updatedTemplate: TemplateAPI) => {
+    const index = API.findIndex(t => t.name === updatedTemplate.name);
+    if (index !== -1) {
+      const newAPI = [...API];
+      newAPI[index] = updatedTemplate;
+      setAPI(newAPI);
+      toast({
+        title: "Success",
+        description: "Template updated successfully",
+      });
+    }
+  };
+
+  const handleDelete = (template: TemplateAPI) => {
+    if (window.confirm(`Are you sure you want to delete "${template.name}"?`)) {
+      const newAPI = API.filter(t => t.name !== template.name);
+      setAPI(newAPI);
+      toast({
+        title: "Success",
+        description: "Template deleted successfully",
+      });
+    }
+  };
 
   return (
     <div className="flex items-center space-x-4 mx-3">
@@ -116,10 +229,34 @@ function APIsDropdownList({
                         [apiField]: t.endpoint,
                         [keyField]: t.key,
                       });
-                      setOpen(false); // Close popover after selecting
+                      setOpen(false);
                     }}
                   >
-                    {t.name}
+                    <div className="flex items-center justify-between w-full">
+                      <span>{t.name}</span>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleEdit(t);
+                          }}
+                        >
+                          <EditIcon className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleDelete(t);
+                          }}
+                        >
+                          <DeleteIcon className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
                   </CommandItem>
                 ))}
               </CommandGroup>
@@ -127,6 +264,13 @@ function APIsDropdownList({
           </Command>
         </PopoverContent>
       </Popover>
+      {editingTemplate && (
+        <EditTemplateDialog
+          template={editingTemplate}
+          onSave={handleSave}
+          onClose={() => setEditingTemplate(null)}
+        />
+      )}
     </div>
   );
 }
@@ -207,12 +351,143 @@ function ToolsDropdownList() {
   );
 }
 
+interface EditChatTemplateDialogProps {
+  template: TemplateChatStore;
+  onSave: (updatedTemplate: TemplateChatStore) => void;
+  onClose: () => void;
+}
+
+function EditChatTemplateDialog({ template, onSave, onClose }: EditChatTemplateDialogProps) {
+  const [name, setName] = useState(template.name);
+  const [jsonContent, setJsonContent] = useState(() => {
+    const { name: _, ...rest } = template;
+    return JSON.stringify(rest, null, 2);
+  });
+  const [editor, setEditor] = useState<any>(null);
+
+  const handleEditorDidMount = (editor: any) => {
+    setEditor(editor);
+  };
+
+  const handleFormat = () => {
+    if (editor) {
+      editor.getAction('editor.action.formatDocument').run();
+    }
+  };
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      toast.error('Template name cannot be empty');
+      return;
+    }
+
+    try {
+      const parsedJson = JSON.parse(jsonContent);
+      const updatedTemplate: TemplateChatStore = {
+        name: name.trim(),
+        ...parsedJson
+      };
+      onSave(updatedTemplate);
+      toast.success('Template updated successfully');
+    } catch (error) {
+      toast.error('Invalid JSON format');
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>Edit Template</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="name">Template Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter template name"
+            />
+          </div>
+          <div>
+            <Label>Template Content (JSON)</Label>
+            <div className="relative">
+              <Button
+                variant="outline"
+                size="sm"
+                className="absolute right-2 top-2 z-10"
+                onClick={handleFormat}
+              >
+                Format JSON
+              </Button>
+              <div className="h-[400px] border rounded-md">
+                <Editor
+                  height="400px"
+                  defaultLanguage="json"
+                  value={jsonContent}
+                  onChange={(value) => setJsonContent(value || '')}
+                  onMount={handleEditorDidMount}
+                  options={{
+                    minimap: { enabled: false },
+                    fontSize: 14,
+                    lineNumbers: 'on',
+                    scrollBeyondLastLine: false,
+                    automaticLayout: true,
+                    tabSize: 2,
+                    wordWrap: 'on'
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>Save Changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function ChatTemplateDropdownList() {
   const ctx = useContext(AppContext);
-
   const { chatStore, setChatStore } = useContext(AppChatStoreContext);
   const { templates, setTemplates } = useContext(AppContext);
   const [open, setOpen] = React.useState(false);
+  const [editingTemplate, setEditingTemplate] = useState<TemplateChatStore | null>(null);
+  const { toast } = useToast();
+
+  const handleEdit = (template: TemplateChatStore) => {
+    setEditingTemplate(template);
+  };
+
+  const handleSave = (updatedTemplate: TemplateChatStore) => {
+    const index = templates.findIndex(t => t.name === updatedTemplate.name);
+    if (index !== -1) {
+      const newTemplates = [...templates];
+      newTemplates[index] = updatedTemplate;
+      setTemplates(newTemplates);
+      toast({
+        title: "Success",
+        description: "Template updated successfully",
+      });
+    }
+  };
+
+  const handleDelete = (template: TemplateChatStore) => {
+    if (window.confirm(`Are you sure you want to delete "${template.name}"?`)) {
+      const newTemplates = templates.filter(t => t.name !== template.name);
+      setTemplates(newTemplates);
+      toast({
+        title: "Success",
+        description: "Template deleted successfully",
+      });
+    }
+  };
 
   return (
     <div className="flex items-center space-x-4 mx-3">
@@ -238,17 +513,15 @@ function ChatTemplateDropdownList() {
                     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
+                          setOpen(false);
                           return;
                         }
                       }
@@ -261,10 +534,34 @@ function ChatTemplateDropdownList() {
                           ...t,
                         }),
                       });
-                      setOpen(false); // Close popover after selecting
+                      setOpen(false);
                     }}
                   >
-                    {t.name}
+                    <div className="flex items-center justify-between w-full">
+                      <span>{t.name}</span>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleEdit(t);
+                          }}
+                        >
+                          <EditIcon className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleDelete(t);
+                          }}
+                        >
+                          <DeleteIcon className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
                   </CommandItem>
                 ))}
               </CommandGroup>
@@ -272,6 +569,13 @@ function ChatTemplateDropdownList() {
           </Command>
         </PopoverContent>
       </Popover>
+      {editingTemplate && (
+        <EditChatTemplateDialog
+          template={editingTemplate}
+          onSave={handleSave}
+          onClose={() => setEditingTemplate(null)}
+        />
+      )}
     </div>
   );
 }