Merge pull request #24 from heimoshuiyu/cursor
fix: chat template / api template select menu not working for the first click
This commit is contained in:
GitHub
@@ -1,16 +1,14 @@
|
||||
import React from "react";
|
||||
import { ChatStore, TemplateAPI, TemplateChatStore } from "@/types/chatstore";
|
||||
import React, { useContext } from "react";
|
||||
import {
|
||||
ChatStore,
|
||||
TemplateAPI,
|
||||
TemplateChatStore,
|
||||
TemplateTools,
|
||||
} from "@/types/chatstore";
|
||||
import { Tr } from "@/translate";
|
||||
|
||||
import {
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuTrigger,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useContext } from "react";
|
||||
import { AppChatStoreContext, AppContext } from "@/pages/App";
|
||||
import {
|
||||
NavigationMenu,
|
||||
@@ -83,62 +81,53 @@ function APIsDropdownList({
|
||||
API = templateAPIsImageGen;
|
||||
}
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
return (
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>
|
||||
<span className="lg:hidden">{shortLabel}</span>
|
||||
<span className="hidden lg:inline">
|
||||
{label}{" "}
|
||||
{API.find(
|
||||
(t: TemplateAPI) =>
|
||||
chatStore[apiField as keyof ChatStore] === t.endpoint &&
|
||||
chatStore[keyField as keyof ChatStore] === t.key
|
||||
)?.name &&
|
||||
`: ${
|
||||
API.find(
|
||||
(t: TemplateAPI) =>
|
||||
chatStore[apiField as keyof ChatStore] === t.endpoint &&
|
||||
chatStore[keyField as keyof ChatStore] === t.key
|
||||
)?.name
|
||||
}`}
|
||||
</span>
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<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"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<div className="text-sm font-medium leading-none">
|
||||
<div className="flex items-center space-x-4 mx-3">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<Tr>{label}</Tr>
|
||||
</p>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="w-[150px] justify-start">
|
||||
{API.find(
|
||||
(t: TemplateAPI) =>
|
||||
chatStore[apiField as keyof ChatStore] === t.endpoint &&
|
||||
chatStore[keyField as keyof ChatStore] === t.key
|
||||
)?.name || `+ ${shortLabel}`}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0" side="bottom" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search template..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>
|
||||
<Tr>No results found.</Tr>
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{API.map((t: TemplateAPI, index: number) => (
|
||||
<CommandItem
|
||||
key={index}
|
||||
value={t.name}
|
||||
onSelect={() => {
|
||||
setChatStore({
|
||||
...chatStore,
|
||||
[apiField]: t.endpoint,
|
||||
[keyField]: t.key,
|
||||
});
|
||||
setOpen(false); // Close popover after selecting
|
||||
}}
|
||||
>
|
||||
{t.name}
|
||||
</div>
|
||||
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
{new URL(t.endpoint).host}
|
||||
</p>
|
||||
</a>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -197,7 +186,7 @@ function ToolsDropdownList() {
|
||||
<BrushIcon /> <Tr>Clear tools</Tr>
|
||||
</CommandItem>
|
||||
)}
|
||||
{ctx.templateTools.map((t, index) => (
|
||||
{ctx.templateTools.map((t: TemplateTools, index: number) => (
|
||||
<CommandItem
|
||||
key={index}
|
||||
value={t.toolsString}
|
||||
@@ -223,171 +212,108 @@ 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 />}
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
{ctx.templates.length > 0 && <ChatTemplateDropdownList />}
|
||||
{ctx.templateAPIs.length > 0 && (
|
||||
<APIsDropdownList
|
||||
label="Chat API"
|
||||
shortLabel="Chat"
|
||||
apiField="apiEndpoint"
|
||||
keyField="apiKey"
|
||||
/>
|
||||
)}
|
||||
{ctx.templateAPIsWhisper.length > 0 && (
|
||||
<APIsDropdownList
|
||||
label="Whisper API"
|
||||
shortLabel="Whisper"
|
||||
apiField="whisper_api"
|
||||
keyField="whisper_key"
|
||||
/>
|
||||
)}
|
||||
{ctx.templateAPIsTTS.length > 0 && (
|
||||
<APIsDropdownList
|
||||
label="TTS API"
|
||||
shortLabel="TTS"
|
||||
apiField="tts_api"
|
||||
keyField="tts_key"
|
||||
/>
|
||||
)}
|
||||
{ctx.templateAPIsImageGen.length > 0 && (
|
||||
<APIsDropdownList
|
||||
label="Image Gen API"
|
||||
shortLabel="ImgGen"
|
||||
apiField="image_gen_api"
|
||||
keyField="image_gen_key"
|
||||
/>
|
||||
)}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
{ctx.templates.length > 0 && <ChatTemplateDropdownList />}
|
||||
{ctx.templateAPIs.length > 0 && (
|
||||
<APIsDropdownList
|
||||
label="Chat API"
|
||||
shortLabel="Chat"
|
||||
apiField="apiEndpoint"
|
||||
keyField="apiKey"
|
||||
/>
|
||||
)}
|
||||
{ctx.templateAPIsWhisper.length > 0 && (
|
||||
<APIsDropdownList
|
||||
label="Whisper API"
|
||||
shortLabel="Whisper"
|
||||
apiField="whisper_api"
|
||||
keyField="whisper_key"
|
||||
/>
|
||||
)}
|
||||
{ctx.templateAPIsTTS.length > 0 && (
|
||||
<APIsDropdownList
|
||||
label="TTS API"
|
||||
shortLabel="TTS"
|
||||
apiField="tts_api"
|
||||
keyField="tts_key"
|
||||
/>
|
||||
)}
|
||||
{ctx.templateAPIsImageGen.length > 0 && (
|
||||
<APIsDropdownList
|
||||
label="Image Gen API"
|
||||
shortLabel="ImgGen"
|
||||
apiField="image_gen_api"
|
||||
keyField="image_gen_key"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user