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

83
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,20 +31,27 @@ 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>
<Carousel className="w-full">
<CarouselContent>
{tmps.map((t, index) => ( {tmps.map((t, index) => (
<div <CarouselItem key={index} className="md:basis-1/4 lg:basis-1/6">
className={`cursor-pointer rounded ${ <div className="p-1">
// @ts-ignore <Card
chatStore[apiField] === t.endpoint && className={cn(
// @ts-ignore "cursor-pointer transition-colors",
chatStore[keyField] === t.key chatStore[apiField as keyof ChatStore] === t.endpoint &&
? "bg-info" chatStore[keyField as keyof ChatStore] === t.key
: "bg-base-300" ? "bg-primary/10"
} w-fit p-2 m-1 flex flex-col`} : ""
)}
>
<CardHeader>
<CardTitle
className="text-center"
onClick={() => { onClick={() => {
// @ts-ignore // @ts-ignore
chatStore[apiField] = t.endpoint; chatStore[apiField] = t.endpoint;
@@ -42,27 +60,31 @@ export function ListAPIs({
setChatStore({ ...chatStore }); setChatStore({ ...chatStore });
}} }}
> >
<span className="w-full text-center">{t.name}</span> {t.name}
<span className="flex justify-between gap-x-2"> </CardTitle>
<button </CardHeader>
className="link" <CardFooter className="flex justify-center gap-4">
<Button
variant="ghost"
size="sm"
onClick={() => { onClick={() => {
const name = prompt(`Give **${label}** template a name`); const name = prompt(
if (!name) { `Give **${label}** template a name`
return; );
} if (!name) return;
t.name = name; t.name = name;
setTmps(structuredClone(tmps)); setTmps(structuredClone(tmps));
}} }}
> >
Edit Edit
</button> </Button>
<button <Button
className="link" variant="ghost"
size="sm"
onClick={() => { onClick={() => {
if ( if (
!confirm( !confirm(
`Are you sure to delete this **${label}** template?`, `Are you sure to delete this **${label}** template?`
) )
) { ) {
return; return;
@@ -72,11 +94,16 @@ export function ListAPIs({
}} }}
> >
Delete Delete
</button> </Button>
</span> </CardFooter>
</Card>
</div> </div>
</CarouselItem>
))} ))}
</div> </CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div> </div>
); );
} }

90
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">
<Card
className={`cursor-pointer ${
chatStore.toolsString === t.toolsString chatStore.toolsString === t.toolsString
? "bg-info" ? "border-primary"
: "bg-base-300" : ""
} w-fit p-2 m-1 flex flex-col`} }`}
onClick={() => { onClick={() => {
chatStore.toolsString = t.toolsString; chatStore.toolsString = t.toolsString;
setChatStore({ ...chatStore }); setChatStore({ ...chatStore });
}} }}
> >
<span className="w-full text-center">{t.name}</span> <CardContent className="p-4">
<span className="flex justify-between gap-x-2"> <div className="flex flex-col gap-2">
<button <span className="font-medium text-center">{t.name}</span>
className="link" <div className="flex justify-between mt-2">
onClick={() => { <Button
const name = prompt(`Give **tools** template a name`); variant="ghost"
if (!name) { size="sm"
return; className="text-blue-500 hover:text-blue-600"
} onClick={(e) => {
e.stopPropagation();
const name = prompt(
`Give **tools** template a name`
);
if (!name) return;
t.name = name; t.name = name;
setTemplateTools(structuredClone(templateTools)); setTemplateTools(structuredClone(templateTools));
}} }}
> >
Edit Edit
</button> </Button>
<button <Button
className="link" variant="ghost"
onClick={() => { size="sm"
className="text-red-500 hover:text-red-600"
onClick={(e) => {
e.stopPropagation();
if ( if (
!confirm(`Are you sure to delete this **tools** template?`) !confirm(
) { `Are you sure to delete this **tools** template?`
)
)
return; return;
}
templateTools.splice(index, 1); templateTools.splice(index, 1);
setTemplateTools(structuredClone(templateTools)); setTemplateTools(structuredClone(templateTools));
}} }}
> >
Delete Delete
</button> </Button>
</span>
</div> </div>
</div>
</CardContent>
</Card>
</div>
</CarouselItem>
))} ))}
</div> </CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div> </div>
); );
} }

37
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,15 +484,27 @@ export default function ChatBOX(props: {
)} )}
<ChatMessageList> <ChatMessageList>
{!chatStore.apiKey && ( {!chatStore.apiKey && (
<p className="bg-base-200 p-6 rounded my-3 text-left"> <Alert>
<KeyIcon className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
{Tr("Please click above to set")} (OpenAI) API KEY {Tr("Please click above to set")} (OpenAI) API KEY
</p> </AlertDescription>
</Alert>
)} )}
{!chatStore.apiEndpoint && ( {!chatStore.apiEndpoint && (
<p className="bg-base-200 p-6 rounded my-3 text-left"> <Alert>
<GlobeIcon className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
{Tr("Please click above to set")} API Endpoint {Tr("Please click above to set")} API Endpoint
</p> </AlertDescription>
</Alert>
)} )}
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Saved Presets</AccordionTrigger>
<AccordionContent>
{templateAPIs.length > 0 && ( {templateAPIs.length > 0 && (
<ListAPIs <ListAPIs
label="API" label="API"
@@ -537,6 +561,9 @@ export default function ChatBOX(props: {
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">