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

refac: api template menu

Browse Source
This commit is contained in:
黑墨水鱼
2025-05-28 02:10:18 +08:00
parent 39c3860c78
commit 8f24489959
1 changed files with 92 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
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,63 +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 <CommandItem
asChild key={index}
onSelect={() => { 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"
: ""
)}
>
<a>
<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>
); );
} }
@@ -198,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}
@@ -251,7 +239,10 @@ function ChatTemplateDropdownList() {
value={t.name} value={t.name}
onSelect={() => { onSelect={() => {
// Update chatStore with the selected template // Update chatStore with the selected template
if (chatStore.history.length > 0 || chatStore.systemMessageContent) { if (
chatStore.history.length > 0 ||
chatStore.systemMessageContent
) {
console.log("you clicked", t.name); console.log("you clicked", t.name);
const confirm = window.confirm( const confirm = window.confirm(
"This will replace the current chat history. Are you sure? " "This will replace the current chat history. Are you sure? "
@@ -264,7 +255,9 @@ function ChatTemplateDropdownList() {
setChatStore({ setChatStore({
...newChatStore({ ...newChatStore({
...chatStore, ...chatStore,
...{ use_this_history: t.history ?? chatStore.history }, ...{
use_this_history: t.history ?? chatStore.history,
},
...t, ...t,
}), }),
}); });
@@ -289,42 +282,38 @@ const APIListMenu: React.FC = () => {
<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 />}
{ctx.templates.length > 0 && <ChatTemplateDropdownList />} {ctx.templates.length > 0 && <ChatTemplateDropdownList />}
<NavigationMenu> {ctx.templateAPIs.length > 0 && (
<NavigationMenuList> <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>
); );
}; };