feat: Add edit and delete functionality for templates and enhance JSON editor
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user