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

Refactor ListAPIs and ListToolsTemplates components to use Card and Carousel for improved UI; enhance template management with Edit and Delete buttons

Browse Source
This commit is contained in:
ecwu
2024-12-20 20:44:50 +08:00
parent de231e215e
commit 346634c0d0
3 changed files with 250 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/listAPIs.tsx
View File

@@ -1,6 +1,17 @@
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 {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
import { Button } from "./components/ui/button";
import { cn } from "@/lib/utils";
interface Props { interface Props {
chatStore: ChatStore; chatStore: ChatStore;
setChatStore: (cs: ChatStore) => void; setChatStore: (cs: ChatStore) => void;
@@ -20,63 +31,79 @@ export function ListAPIs({
keyField, keyField,
}: Props) { }: Props) {
return ( return (
<div className="break-all opacity-80 p-3 rounded base-200 my-3 text-left"> <div className="p-3 space-y-4">
<h2>{Tr(`Saved ${label} templates`)}</h2> <h2 className="text-2xl font-semibold">
<hr className="my-2" /> {Tr(`Saved ${label} templates`)}
<div className="flex flex-wrap"> </h2>
{tmps.map((t, index) => ( <Carousel className="w-full">
<div <CarouselContent>
className={`cursor-pointer rounded ${ {tmps.map((t, index) => (
// @ts-ignore <CarouselItem key={index} className="md:basis-1/4 lg:basis-1/6">
chatStore[apiField] === t.endpoint && <div className="p-1">
// @ts-ignore <Card
chatStore[keyField] === t.key className={cn(
? "bg-info" "cursor-pointer transition-colors",
: "bg-base-300" chatStore[apiField as keyof ChatStore] === t.endpoint &&
} w-fit p-2 m-1 flex flex-col`} chatStore[keyField as keyof ChatStore] === t.key
onClick={() => { ? "bg-primary/10"
// @ts-ignore : ""
chatStore[apiField] = t.endpoint; )}
// @ts-ignore >
chatStore[keyField] = t.key; <CardHeader>
setChatStore({ ...chatStore }); <CardTitle
}} className="text-center"
> onClick={() => {
<span className="w-full text-center">{t.name}</span> // @ts-ignore
<span className="flex justify-between gap-x-2"> chatStore[apiField] = t.endpoint;
<button // @ts-ignore
className="link" chatStore[keyField] = t.key;
onClick={() => { setChatStore({ ...chatStore });
const name = prompt(`Give **${label}** template a name`); }}
if (!name) { >
return; {t.name}
} </CardTitle>
t.name = name; </CardHeader>
setTmps(structuredClone(tmps)); <CardFooter className="flex justify-center gap-4">
}} <Button
> variant="ghost"
Edit size="sm"
</button> onClick={() => {
<button const name = prompt(
className="link" `Give **${label}** template a name`
onClick={() => { );
if ( if (!name) return;
!confirm( t.name = name;
`Are you sure to delete this **${label}** template?`, setTmps(structuredClone(tmps));
) }}
) { >
return; Edit
} </Button>
tmps.splice(index, 1); <Button
setTmps(structuredClone(tmps)); variant="ghost"
}} size="sm"
> onClick={() => {
Delete if (
</button> !confirm(
</span> `Are you sure to delete this **${label}** template?`
</div> )
))} ) {
</div> return;
}
tmps.splice(index, 1);
setTmps(structuredClone(tmps));
}}
>
Delete
</Button>
</CardFooter>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div> </div>
); );
} }

132
src/listToolsTemplates.tsx
View File

@@ -1,5 +1,14 @@
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 {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
import { Button } from "./components/ui/button";
interface Props { interface Props {
templateTools: TemplateTools[]; templateTools: TemplateTools[];
@@ -14,66 +23,85 @@ export function ListToolsTempaltes({
setChatStore, setChatStore,
}: Props) { }: Props) {
return ( return (
<div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black"> <div className="p-3">
<h2> <h2 className="text-lg font-semibold mb-4 flex items-center">
<span>{Tr(`Saved tools templates`)}</span> <span>{Tr(`Saved tools templates`)}</span>
<button <Button
className="mx-2 underline cursor-pointer" variant="link"
className="ml-2 text-sm"
onClick={() => { onClick={() => {
chatStore.toolsString = ""; chatStore.toolsString = "";
setChatStore({ ...chatStore }); setChatStore({ ...chatStore });
}} }}
> >
{Tr(`Clear`)} {Tr(`Clear`)}
</button> </Button>
</h2> </h2>
<hr className="my-2" /> <Carousel className="w-full">
<div className="flex flex-wrap"> <CarouselContent>
{templateTools.map((t, index) => ( {templateTools.map((t, index) => (
<div <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
className={`cursor-pointer rounded ${ <div className="p-1">
chatStore.toolsString === t.toolsString <Card
? "bg-info" className={`cursor-pointer ${
: "bg-base-300" chatStore.toolsString === t.toolsString
} w-fit p-2 m-1 flex flex-col`} ? "border-primary"
onClick={() => { : ""
chatStore.toolsString = t.toolsString; }`}
setChatStore({ ...chatStore }); onClick={() => {
}} chatStore.toolsString = t.toolsString;
> setChatStore({ ...chatStore });
<span className="w-full text-center">{t.name}</span> }}
<span className="flex justify-between gap-x-2"> >
<button <CardContent className="p-4">
className="link" <div className="flex flex-col gap-2">
onClick={() => { <span className="font-medium text-center">{t.name}</span>
const name = prompt(`Give **tools** template a name`); <div className="flex justify-between mt-2">
if (!name) { <Button
return; variant="ghost"
} size="sm"
t.name = name; className="text-blue-500 hover:text-blue-600"
setTemplateTools(structuredClone(templateTools)); onClick={(e) => {
}} e.stopPropagation();
> const name = prompt(
Edit `Give **tools** template a name`
</button> );
<button if (!name) return;
className="link" t.name = name;
onClick={() => { setTemplateTools(structuredClone(templateTools));
if ( }}
!confirm(`Are you sure to delete this **tools** template?`) >
) { Edit
return; </Button>
} <Button
templateTools.splice(index, 1); variant="ghost"
setTemplateTools(structuredClone(templateTools)); size="sm"
}} className="text-red-500 hover:text-red-600"
> onClick={(e) => {
Delete e.stopPropagation();
</button> if (
</span> !confirm(
</div> `Are you sure to delete this **tools** template?`
))} )
</div> )
return;
templateTools.splice(index, 1);
setTemplateTools(structuredClone(templateTools));
}}
>
Delete
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div> </div>
); );
} }

145
src/pages/Chatbox.tsx
View File

@@ -44,8 +44,20 @@ import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ChatInput } from "@/components/ui/chat/chat-input"; import { ChatInput } from "@/components/ui/chat/chat-input";
import { ChatMessageList } from "@/components/ui/chat/chat-message-list"; import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
import { CornerDownLeftIcon, ImageIcon } from "lucide-react"; import {
CornerDownLeftIcon,
GlobeIcon,
ImageIcon,
KeyIcon,
} 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";
export default function ChatBOX(props: { export default function ChatBOX(props: {
db: Promise<IDBPDatabase<ChatStore>>; db: Promise<IDBPDatabase<ChatStore>>;
@@ -472,71 +484,86 @@ export default function ChatBOX(props: {
)} )}
<ChatMessageList> <ChatMessageList>
{!chatStore.apiKey && ( {!chatStore.apiKey && (
<p className="bg-base-200 p-6 rounded my-3 text-left"> <Alert>
{Tr("Please click above to set")} (OpenAI) API KEY <KeyIcon className="h-4 w-4" />
</p> <AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
{Tr("Please click above to set")} (OpenAI) API KEY
</AlertDescription>
</Alert>
)} )}
{!chatStore.apiEndpoint && ( {!chatStore.apiEndpoint && (
<p className="bg-base-200 p-6 rounded my-3 text-left"> <Alert>
{Tr("Please click above to set")} API Endpoint <GlobeIcon className="h-4 w-4" />
</p> <AlertTitle>Heads up!</AlertTitle>
)} <AlertDescription>
{templateAPIs.length > 0 && ( {Tr("Please click above to set")} API Endpoint
<ListAPIs </AlertDescription>
label="API" </Alert>
tmps={templateAPIs}
setTmps={setTemplateAPIs}
chatStore={chatStore}
setChatStore={setChatStore}
apiField="apiEndpoint"
keyField="apiKey"
/>
)} )}
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Saved Presets</AccordionTrigger>
<AccordionContent>
{templateAPIs.length > 0 && (
<ListAPIs
label="API"
tmps={templateAPIs}
setTmps={setTemplateAPIs}
chatStore={chatStore}
setChatStore={setChatStore}
apiField="apiEndpoint"
keyField="apiKey"
/>
)}
{templateAPIsWhisper.length > 0 && ( {templateAPIsWhisper.length > 0 && (
<ListAPIs <ListAPIs
label="Whisper API" label="Whisper API"
tmps={templateAPIsWhisper} tmps={templateAPIsWhisper}
setTmps={setTemplateAPIsWhisper} setTmps={setTemplateAPIsWhisper}
chatStore={chatStore} chatStore={chatStore}
setChatStore={setChatStore} setChatStore={setChatStore}
apiField="whisper_api" apiField="whisper_api"
keyField="whisper_key" keyField="whisper_key"
/> />
)} )}
{templateAPIsTTS.length > 0 && ( {templateAPIsTTS.length > 0 && (
<ListAPIs <ListAPIs
label="TTS API" label="TTS API"
tmps={templateAPIsTTS} tmps={templateAPIsTTS}
setTmps={setTemplateAPIsTTS} setTmps={setTemplateAPIsTTS}
chatStore={chatStore} chatStore={chatStore}
setChatStore={setChatStore} setChatStore={setChatStore}
apiField="tts_api" apiField="tts_api"
keyField="tts_key" keyField="tts_key"
/> />
)} )}
{templateAPIsImageGen.length > 0 && ( {templateAPIsImageGen.length > 0 && (
<ListAPIs <ListAPIs
label="Image Gen API" label="Image Gen API"
tmps={templateAPIsImageGen} tmps={templateAPIsImageGen}
setTmps={setTemplateAPIsImageGen} setTmps={setTemplateAPIsImageGen}
chatStore={chatStore} chatStore={chatStore}
setChatStore={setChatStore} setChatStore={setChatStore}
apiField="image_gen_api" apiField="image_gen_api"
keyField="image_gen_key" keyField="image_gen_key"
/> />
)} )}
{toolsTemplates.length > 0 && ( {toolsTemplates.length > 0 && (
<ListToolsTempaltes <ListToolsTempaltes
templateTools={toolsTemplates} templateTools={toolsTemplates}
setTemplateTools={setTemplateTools} setTemplateTools={setTemplateTools}
chatStore={chatStore} chatStore={chatStore}
setChatStore={setChatStore} setChatStore={setChatStore}
/> />
)} )}
</AccordionContent>
</AccordionItem>
</Accordion>
{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">