fix: chat template menu by cursor
This commit is contained in:
@@ -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>
|
||||
<a
|
||||
onClick={() => {
|
||||
// @ts-ignore
|
||||
chatStore[apiField as keyof ChatStore] = t.endpoint;
|
||||
// @ts-ignore
|
||||
chatStore[keyField] = t.key;
|
||||
setChatStore({
|
||||
...chatStore,
|
||||
});
|
||||
}}
|
||||
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",
|
||||
chatStore[apiField as keyof ChatStore] === t.endpoint &&
|
||||
chatStore[keyField as keyof ChatStore] === t.key
|
||||
? "bg-accent text-accent-foreground"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<NavigationMenuLink
|
||||
asChild
|
||||
onSelect={() => {
|
||||
// @ts-ignore
|
||||
chatStore[apiField as keyof ChatStore] = t.endpoint;
|
||||
// @ts-ignore
|
||||
chatStore[keyField] = t.key;
|
||||
setChatStore({
|
||||
...chatStore,
|
||||
});
|
||||
}}
|
||||
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",
|
||||
chatStore[apiField as keyof ChatStore] === t.endpoint &&
|
||||
chatStore[keyField as keyof ChatStore] === t.key
|
||||
? "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>
|
||||
<NavigationMenuTrigger>
|
||||
<span className="lg:hidden">Chat Template</span>
|
||||
<span className="hidden lg:inline">Chat Template</span>
|
||||
</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) => (
|
||||
<ChatTemplateItem key={index} t={t} index={index} />
|
||||
))}
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
<div className="flex items-center space-x-4 mx-3">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<Tr>Chat Template</Tr>
|
||||
</p>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="w-[150px] justify-start">
|
||||
<Tr>Select Template</Tr>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0" side="bottom" align="start">
|
||||
<Command>
|
||||
<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"
|
||||
|
||||
Reference in New Issue
Block a user