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 { 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,63 +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
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">
<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>
);
}
@@ -198,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}
@@ -251,7 +239,10 @@ function ChatTemplateDropdownList() {
value={t.name}
onSelect={() => {
// 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);
const confirm = window.confirm(
"This will replace the current chat history. Are you sure? "
@@ -264,7 +255,9 @@ function ChatTemplateDropdownList() {
setChatStore({
...newChatStore({
...chatStore,
...{ use_this_history: t.history ?? chatStore.history },
...{
use_this_history: t.history ?? chatStore.history,
},
...t,
}),
});
@@ -289,42 +282,38 @@ const APIListMenu: React.FC = () => {
<div className="flex flex-col my-2 gap-2 w-full">
{ctx.templateTools.length > 0 && <ToolsDropdownList />}
{ctx.templates.length > 0 && <ChatTemplateDropdownList />}
<NavigationMenu>
<NavigationMenuList>
{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.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>
);
};