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

Refactor ListToolsTemplates component to use NavigationMenu for improved navigation; enhance template management with Edit and Delete buttons

Browse Source
This commit is contained in:
ecwu
2024-12-21 12:51:07 +08:00
parent 1656e16c7c
commit e8f0c0ffa5
3 changed files with 489 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/listAPIs.tsx
View File

@@ -1,14 +1,16 @@
import { ChatStore, TemplateAPI } from "@/types/chatstore"; import { ChatStore, TemplateAPI } from "@/types/chatstore";
import { Tr } from "@/translate"; import { Tr } from "@/translate";
import { Card, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { import {
Carousel, NavigationMenu,
CarouselContent, NavigationMenuContent,
CarouselItem, NavigationMenuIndicator,
CarouselNext, NavigationMenuItem,
CarouselPrevious, NavigationMenuLink,
} from "@/components/ui/carousel"; NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
} 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";
@@ -31,27 +33,14 @@ export function ListAPIs({
keyField, keyField,
}: Props) { }: Props) {
return ( return (
<div className="p-3 space-y-4"> <NavigationMenuItem>
<h2 className="text-2xl font-semibold"> <NavigationMenuTrigger>{label}</NavigationMenuTrigger>
{Tr(`Saved ${label} templates`)} <NavigationMenuContent>
</h2> <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
<Carousel className="w-full">
<CarouselContent>
{tmps.map((t, index) => ( {tmps.map((t, index) => (
<CarouselItem key={index} className="md:basis-1/4 lg:basis-1/6"> <li>
<div className="p-1"> <NavigationMenuLink asChild>
<Card <a
className={cn(
"cursor-pointer transition-colors",
chatStore[apiField as keyof ChatStore] === t.endpoint &&
chatStore[keyField as keyof ChatStore] === t.key
? "bg-primary/10"
: ""
)}
>
<CardHeader>
<CardTitle
className="text-center"
onClick={() => { onClick={() => {
// @ts-ignore // @ts-ignore
chatStore[apiField] = t.endpoint; chatStore[apiField] = t.endpoint;
@@ -59,18 +48,28 @@ export function ListAPIs({
chatStore[keyField] = t.key; chatStore[keyField] = t.key;
setChatStore({ ...chatStore }); 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">
{t.name} {t.name}
</CardTitle> </div>
</CardHeader> <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
<CardFooter className="flex justify-center gap-4"> {label === "API" ? t.endpoint : t.key}
</p>
</a>
</NavigationMenuLink>
<div className="mt-2 flex justify-between">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => { onClick={() => {
const name = prompt( const name = prompt(`Give **${label}** template a name`);
`Give **${label}** template a name`
);
if (!name) return; if (!name) return;
t.name = name; t.name = name;
setTmps(structuredClone(tmps)); setTmps(structuredClone(tmps));
@@ -95,15 +94,55 @@ export function ListAPIs({
> >
Delete Delete
</Button> </Button>
</CardFooter>
</Card>
</div> </div>
</CarouselItem> </li>
))} ))}
</CarouselContent> </ul>
<CarouselPrevious /> </NavigationMenuContent>
<CarouselNext /> </NavigationMenuItem>
</Carousel> // <div className="p-3 space-y-4">
</div> // <h2 className="text-2xl font-semibold">
// {Tr(`Saved ${label} templates`)}
// </h2>
// <Carousel className="w-full">
// <CarouselContent>
// {tmps.map((t, index) => (
// <CarouselItem key={index} className="md:basis-1/4 lg:basis-1/6">
// <div className="p-1">
// <Card
// className={cn(
// "cursor-pointer transition-colors",
// chatStore[apiField as keyof ChatStore] === t.endpoint &&
// chatStore[keyField as keyof ChatStore] === t.key
// ? "bg-primary/10"
// : ""
// )}
// >
// <CardHeader>
// <CardTitle
// className="text-center"
// onClick={() => {
// // @ts-ignore
// chatStore[apiField] = t.endpoint;
// // @ts-ignore
// chatStore[keyField] = t.key;
// setChatStore({ ...chatStore });
// }}
// >
// {t.name}
// </CardTitle>
// </CardHeader>
// <CardFooter className="flex justify-center gap-4">
// </CardFooter>
// </Card>
// </div>
// </CarouselItem>
// ))}
// </CarouselContent>
// <CarouselPrevious />
// <CarouselNext />
// </Carousel>
// </div>
); );
} }

86
src/listToolsTemplates.tsx
View File

@@ -1,13 +1,16 @@
import { ChatStore, TemplateTools } from "@/types/chatstore"; import { ChatStore, TemplateTools } from "@/types/chatstore";
import { Tr } from "@/translate"; import { Tr } from "@/translate";
import { Card, CardContent } from "@/components/ui/card";
import { import {
Carousel, NavigationMenu,
CarouselContent, NavigationMenuContent,
CarouselItem, NavigationMenuIndicator,
CarouselNext, NavigationMenuItem,
CarouselPrevious, NavigationMenuLink,
} from "@/components/ui/carousel"; NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
} from "@/components/ui/navigation-menu";
import { cn } from "@/lib/utils";
import { Button } from "./components/ui/button"; import { Button } from "./components/ui/button";
interface Props { interface Props {
@@ -23,8 +26,8 @@ export function ListToolsTempaltes({
setChatStore, setChatStore,
}: Props) { }: Props) {
return ( return (
<div className="p-3"> <NavigationMenuItem className="p-3">
<h2 className="text-lg font-semibold mb-4 flex items-center"> <NavigationMenuTrigger>
<span>{Tr(`Saved tools templates`)}</span> <span>{Tr(`Saved tools templates`)}</span>
<Button <Button
variant="link" variant="link"
@@ -36,36 +39,38 @@ export function ListToolsTempaltes({
> >
{Tr(`Clear`)} {Tr(`Clear`)}
</Button> </Button>
</h2> </NavigationMenuTrigger>
<Carousel className="w-full"> <NavigationMenuContent>
<CarouselContent> <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
{templateTools.map((t, index) => ( {templateTools.map((t, index) => (
<CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3"> <li key={index}>
<div className="p-1"> <NavigationMenuLink asChild>
<Card <a
className={`cursor-pointer ${
chatStore.toolsString === t.toolsString
? "border-primary"
: ""
}`}
onClick={() => { onClick={() => {
chatStore.toolsString = t.toolsString; chatStore.toolsString = t.toolsString;
setChatStore({ ...chatStore }); 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.toolsString === t.toolsString
? "bg-accent text-accent-foreground"
: ""
)}
> >
<CardContent className="p-4"> <div className="text-sm font-medium leading-none">
<div className="flex flex-col gap-2"> {t.name}
<span className="font-medium text-center">{t.name}</span> </div>
<div className="flex justify-between mt-2"> <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
{t.toolsString}
</p>
</a>
</NavigationMenuLink>
<div className="mt-2 flex justify-between">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-blue-500 hover:text-blue-600" onClick={() => {
onClick={(e) => { const name = prompt(`Give **tools** template a name`);
e.stopPropagation();
const name = prompt(
`Give **tools** template a name`
);
if (!name) return; if (!name) return;
t.name = name; t.name = name;
setTemplateTools(structuredClone(templateTools)); setTemplateTools(structuredClone(templateTools));
@@ -76,15 +81,14 @@ export function ListToolsTempaltes({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-red-500 hover:text-red-600" onClick={() => {
onClick={(e) => {
e.stopPropagation();
if ( if (
!confirm( !confirm(
`Are you sure to delete this **tools** template?` `Are you sure to delete this **tools** template?`
) )
) ) {
return; return;
}
templateTools.splice(index, 1); templateTools.splice(index, 1);
setTemplateTools(structuredClone(templateTools)); setTemplateTools(structuredClone(templateTools));
}} }}
@@ -92,16 +96,10 @@ export function ListToolsTempaltes({
Delete Delete
</Button> </Button>
</div> </div>
</div> </li>
</CardContent>
</Card>
</div>
</CarouselItem>
))} ))}
</CarouselContent> </ul>
<CarouselPrevious /> </NavigationMenuContent>
<CarouselNext /> </NavigationMenuItem>
</Carousel>
</div>
); );
} }

41
src/pages/Chatbox.tsx
View File

@@ -51,13 +51,16 @@ import {
KeyIcon, KeyIcon,
} from "lucide-react"; } from "lucide-react";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
export default function ChatBOX(props: { export default function ChatBOX(props: {
db: Promise<IDBPDatabase<ChatStore>>; db: Promise<IDBPDatabase<ChatStore>>;
@@ -453,7 +456,8 @@ export default function ChatBOX(props: {
const userInputRef = createRef(); const userInputRef = createRef();
return ( return (
<div className="grow flex flex-col p-2 w-full"> <>
<div className="flex flex-col w-full">
{true && ( {true && (
<Settings <Settings
chatStore={chatStore} chatStore={chatStore}
@@ -482,7 +486,7 @@ export default function ChatBOX(props: {
setShow={setShowSearch} setShow={setShowSearch}
/> />
)} )}
<ChatMessageList>
{!chatStore.apiKey && ( {!chatStore.apiKey && (
<Alert> <Alert>
<KeyIcon className="h-4 w-4" /> <KeyIcon className="h-4 w-4" />
@@ -501,10 +505,8 @@ export default function ChatBOX(props: {
</AlertDescription> </AlertDescription>
</Alert> </Alert>
)} )}
<Accordion type="single" collapsible className="w-full"> <NavigationMenu>
<AccordionItem value="item-1"> <NavigationMenuList>
<AccordionTrigger>Saved Presets</AccordionTrigger>
<AccordionContent>
{templateAPIs.length > 0 && ( {templateAPIs.length > 0 && (
<ListAPIs <ListAPIs
label="API" label="API"
@@ -516,7 +518,6 @@ export default function ChatBOX(props: {
keyField="apiKey" keyField="apiKey"
/> />
)} )}
{templateAPIsWhisper.length > 0 && ( {templateAPIsWhisper.length > 0 && (
<ListAPIs <ListAPIs
label="Whisper API" label="Whisper API"
@@ -528,7 +529,6 @@ export default function ChatBOX(props: {
keyField="whisper_key" keyField="whisper_key"
/> />
)} )}
{templateAPIsTTS.length > 0 && ( {templateAPIsTTS.length > 0 && (
<ListAPIs <ListAPIs
label="TTS API" label="TTS API"
@@ -540,7 +540,6 @@ export default function ChatBOX(props: {
keyField="tts_key" keyField="tts_key"
/> />
)} )}
{templateAPIsImageGen.length > 0 && ( {templateAPIsImageGen.length > 0 && (
<ListAPIs <ListAPIs
label="Image Gen API" label="Image Gen API"
@@ -552,7 +551,6 @@ export default function ChatBOX(props: {
keyField="image_gen_key" keyField="image_gen_key"
/> />
)} )}
{toolsTemplates.length > 0 && ( {toolsTemplates.length > 0 && (
<ListToolsTempaltes <ListToolsTempaltes
templateTools={toolsTemplates} templateTools={toolsTemplates}
@@ -561,10 +559,11 @@ export default function ChatBOX(props: {
setChatStore={setChatStore} setChatStore={setChatStore}
/> />
)} )}
</AccordionContent> </NavigationMenuList>
</AccordionItem> </NavigationMenu>
</Accordion> </div>
<div className="grow flex flex-col p-2 w-full">
<ChatMessageList>
{chatStore.history.filter((msg) => !msg.example).length == 0 && ( {chatStore.history.filter((msg) => !msg.example).length == 0 && (
<div className="bg-base-200 break-all p-3 my-3 text-left"> <div className="bg-base-200 break-all p-3 my-3 text-left">
<h2> <h2>
@@ -617,7 +616,6 @@ export default function ChatBOX(props: {
</div> </div>
</div> </div>
)} )}
{chatStore.history.map((_, messageIndex) => ( {chatStore.history.map((_, messageIndex) => (
<Message <Message
chatStore={chatStore} chatStore={chatStore}
@@ -789,5 +787,6 @@ export default function ChatBOX(props: {
)} )}
</div> </div>
</div> </div>
</>
); );
} }