fix: delete chat template cause dialog render panic
This commit is contained in:
@@ -226,110 +226,116 @@ function ChatTemplateDropdownList() {
|
|||||||
</NavigationMenuTrigger>
|
</NavigationMenuTrigger>
|
||||||
<NavigationMenuContent>
|
<NavigationMenuContent>
|
||||||
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
|
<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) => (
|
||||||
const [dialogOpen, setDialogOpen] = React.useState(false);
|
<ChatTemplateItem key={index} t={t} index={index} />
|
||||||
return (
|
))}
|
||||||
<li key={index}>
|
|
||||||
<NavigationMenuLink asChild>
|
|
||||||
<a
|
|
||||||
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, ...t }) });
|
|
||||||
}}
|
|
||||||
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={() => {
|
|
||||||
const confirm = window.confirm(
|
|
||||||
"Are you sure you want to delete this template?"
|
|
||||||
);
|
|
||||||
if (confirm) {
|
|
||||||
templates.splice(index, 1);
|
|
||||||
setTemplates([...templates]);
|
|
||||||
setDialogOpen(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
onClick={() => setDialogOpen(false)}
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</Button>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</NavigationMenuLink>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
</ul>
|
||||||
</NavigationMenuContent>
|
</NavigationMenuContent>
|
||||||
</NavigationMenuItem>
|
</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>
|
||||||
|
<NavigationMenuLink asChild>
|
||||||
|
<a
|
||||||
|
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, ...t }) });
|
||||||
|
}}
|
||||||
|
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 APIListMenu: React.FC = () => {
|
||||||
const ctx = useContext(AppContext);
|
const ctx = useContext(AppContext);
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user