heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #24 from heimoshuiyu/cursor

Browse Source 
fix: chat template / api template select menu not working for the first click
This commit is contained in:
黑墨水鱼
2025-05-28 09:30:41 +08:00
committed by GitHub
parent 812ce3cc1f 8f24489959
commit 95b319db7d
1 changed files with 145 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
src/components/ListAPI.tsx
View File

@@ -1,16 +1,14 @@
import React from "react"; import React, { useContext } from "react";
import { ChatStore, TemplateAPI, TemplateChatStore } from "@/types/chatstore"; import {
ChatStore,
TemplateAPI,
TemplateChatStore,
TemplateTools,
} from "@/types/chatstore";
import { Tr } from "@/translate"; import { Tr } from "@/translate";
import {
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useContext } from "react";
import { AppChatStoreContext, AppContext } from "@/pages/App"; import { AppChatStoreContext, AppContext } from "@/pages/App";
import { import {
NavigationMenu, NavigationMenu,
@@ -83,62 +81,53 @@ function APIsDropdownList({
API = templateAPIsImageGen; API = templateAPIsImageGen;
} }
const [open, setOpen] = React.useState(false);
return ( return (
<NavigationMenuItem> <div className="flex items-center space-x-4 mx-3">
<NavigationMenuTrigger> <p className="text-sm text-muted-foreground">
<span className="lg:hidden">{shortLabel}</span> <Tr>{label}</Tr>
<span className="hidden lg:inline"> </p>
{label}{" "} <Popover open={open} onOpenChange={setOpen}>
{API.find( <PopoverTrigger asChild>
(t: TemplateAPI) => <Button variant="outline" className="w-[150px] justify-start">
chatStore[apiField as keyof ChatStore] === t.endpoint && {API.find(
chatStore[keyField as keyof ChatStore] === t.key (t: TemplateAPI) =>
)?.name && chatStore[apiField as keyof ChatStore] === t.endpoint &&
`: ${ chatStore[keyField as keyof ChatStore] === t.key
API.find( )?.name || `+ ${shortLabel}`}
(t: TemplateAPI) => </Button>
chatStore[apiField as keyof ChatStore] === t.endpoint && </PopoverTrigger>
chatStore[keyField as keyof ChatStore] === t.key <PopoverContent className="p-0" side="bottom" align="start">
)?.name <Command>
}`} <CommandInput placeholder="Search template..." />
</span> <CommandList>
</NavigationMenuTrigger> <CommandEmpty>
<NavigationMenuContent> <Tr>No results found.</Tr>
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] "> </CommandEmpty>
{API.map((t: TemplateAPI, index: number) => ( <CommandGroup>
<li key={index}> {API.map((t: TemplateAPI, index: number) => (
<NavigationMenuLink asChild> <CommandItem
<a key={index}
onClick={() => { value={t.name}
// @ts-ignore onSelect={() => {
chatStore[apiField as keyof ChatStore] = t.endpoint; setChatStore({
// @ts-ignore ...chatStore,
chatStore[keyField] = t.key; [apiField]: t.endpoint,
setChatStore({ [keyField]: t.key,
...chatStore, });
}); setOpen(false); // Close popover after selecting
}} }}
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">
{t.name} {t.name}
</div> </CommandItem>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground"> ))}
{new URL(t.endpoint).host} </CommandGroup>
</p> </CommandList>
</a> </Command>
</NavigationMenuLink> </PopoverContent>
</li> </Popover>
))} </div>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
); );
} }
@@ -197,7 +186,7 @@ function ToolsDropdownList() {
<BrushIcon /> <Tr>Clear tools</Tr> <BrushIcon /> <Tr>Clear tools</Tr>
</CommandItem> </CommandItem>
)} )}
{ctx.templateTools.map((t, index) => ( {ctx.templateTools.map((t: TemplateTools, index: number) => (
<CommandItem <CommandItem
key={index} key={index}
value={t.toolsString} value={t.toolsString}
@@ -223,171 +212,108 @@ function ChatTemplateDropdownList() {
const { chatStore, setChatStore } = useContext(AppChatStoreContext); const { chatStore, setChatStore } = useContext(AppChatStoreContext);
const { templates, setTemplates } = useContext(AppContext); const { templates, setTemplates } = useContext(AppContext);
const [open, setOpen] = React.useState(false);
return ( return (
<NavigationMenuItem> <div className="flex items-center space-x-4 mx-3">
<NavigationMenuTrigger> <p className="text-sm text-muted-foreground">
<span className="lg:hidden">Chat Template</span> <Tr>Chat Template</Tr>
<span className="hidden lg:inline">Chat Template</span> </p>
</NavigationMenuTrigger> <Popover open={open} onOpenChange={setOpen}>
<NavigationMenuContent> <PopoverTrigger asChild>
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]"> <Button variant="outline" className="w-[150px] justify-start">
{templates.map((t: TemplateChatStore, index: number) => ( <Tr>Select Template</Tr>
<ChatTemplateItem key={index} t={t} index={index} /> </Button>
))} </PopoverTrigger>
</ul> <PopoverContent className="p-0" side="bottom" align="start">
</NavigationMenuContent> <Command>
</NavigationMenuItem> <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 APIListMenu: React.FC = () => {
const ctx = useContext(AppContext); const ctx = useContext(AppContext);
return ( return (
<div className="flex flex-col my-2 gap-2 w-full"> <div className="flex flex-col my-2 gap-2 w-full">
{ctx.templateTools.length > 0 && <ToolsDropdownList />} {ctx.templateTools.length > 0 && <ToolsDropdownList />}
<NavigationMenu> {ctx.templates.length > 0 && <ChatTemplateDropdownList />}
<NavigationMenuList> {ctx.templateAPIs.length > 0 && (
{ctx.templates.length > 0 && <ChatTemplateDropdownList />} <APIsDropdownList
{ctx.templateAPIs.length > 0 && ( label="Chat API"
<APIsDropdownList shortLabel="Chat"
label="Chat API" apiField="apiEndpoint"
shortLabel="Chat" keyField="apiKey"
apiField="apiEndpoint" />
keyField="apiKey" )}
/> {ctx.templateAPIsWhisper.length > 0 && (
)} <APIsDropdownList
{ctx.templateAPIsWhisper.length > 0 && ( label="Whisper API"
<APIsDropdownList shortLabel="Whisper"
label="Whisper API" apiField="whisper_api"
shortLabel="Whisper" keyField="whisper_key"
apiField="whisper_api" />
keyField="whisper_key" )}
/> {ctx.templateAPIsTTS.length > 0 && (
)} <APIsDropdownList
{ctx.templateAPIsTTS.length > 0 && ( label="TTS API"
<APIsDropdownList shortLabel="TTS"
label="TTS API" apiField="tts_api"
shortLabel="TTS" keyField="tts_key"
apiField="tts_api" />
keyField="tts_key" )}
/> {ctx.templateAPIsImageGen.length > 0 && (
)} <APIsDropdownList
{ctx.templateAPIsImageGen.length > 0 && ( label="Image Gen API"
<APIsDropdownList shortLabel="ImgGen"
label="Image Gen API" apiField="image_gen_api"
shortLabel="ImgGen" keyField="image_gen_key"
apiField="image_gen_api" />
keyField="image_gen_key" )}
/>
)}
</NavigationMenuList>
</NavigationMenu>
</div> </div>
); );
}; };