Refactor ListAPIs and ListToolsTemplates components to use Card and Carousel for improved UI; enhance template management with Edit and Delete buttons
This commit is contained in:
ecwu
141
src/listAPIs.tsx
141
src/listAPIs.tsx
@@ -1,6 +1,17 @@
|
||||
import { ChatStore, TemplateAPI } from "@/types/chatstore";
|
||||
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 {
|
||||
chatStore: ChatStore;
|
||||
setChatStore: (cs: ChatStore) => void;
|
||||
@@ -20,63 +31,79 @@ export function ListAPIs({
|
||||
keyField,
|
||||
}: Props) {
|
||||
return (
|
||||
<div className="break-all opacity-80 p-3 rounded base-200 my-3 text-left">
|
||||
<h2>{Tr(`Saved ${label} templates`)}</h2>
|
||||
<hr className="my-2" />
|
||||
<div className="flex flex-wrap">
|
||||
{tmps.map((t, index) => (
|
||||
<div
|
||||
className={`cursor-pointer rounded ${
|
||||
// @ts-ignore
|
||||
chatStore[apiField] === t.endpoint &&
|
||||
// @ts-ignore
|
||||
chatStore[keyField] === t.key
|
||||
? "bg-info"
|
||||
: "bg-base-300"
|
||||
} w-fit p-2 m-1 flex flex-col`}
|
||||
onClick={() => {
|
||||
// @ts-ignore
|
||||
chatStore[apiField] = t.endpoint;
|
||||
// @ts-ignore
|
||||
chatStore[keyField] = t.key;
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
<span className="w-full text-center">{t.name}</span>
|
||||
<span className="flex justify-between gap-x-2">
|
||||
<button
|
||||
className="link"
|
||||
onClick={() => {
|
||||
const name = prompt(`Give **${label}** template a name`);
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
t.name = name;
|
||||
setTmps(structuredClone(tmps));
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="link"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure to delete this **${label}** template?`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
tmps.splice(index, 1);
|
||||
setTmps(structuredClone(tmps));
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-3 space-y-4">
|
||||
<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">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const name = prompt(
|
||||
`Give **${label}** template a name`
|
||||
);
|
||||
if (!name) return;
|
||||
t.name = name;
|
||||
setTmps(structuredClone(tmps));
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure to delete this **${label}** template?`
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
tmps.splice(index, 1);
|
||||
setTmps(structuredClone(tmps));
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
import { ChatStore, TemplateTools } from "@/types/chatstore";
|
||||
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 {
|
||||
templateTools: TemplateTools[];
|
||||
@@ -14,66 +23,85 @@ export function ListToolsTempaltes({
|
||||
setChatStore,
|
||||
}: Props) {
|
||||
return (
|
||||
<div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
|
||||
<h2>
|
||||
<div className="p-3">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center">
|
||||
<span>{Tr(`Saved tools templates`)}</span>
|
||||
<button
|
||||
className="mx-2 underline cursor-pointer"
|
||||
<Button
|
||||
variant="link"
|
||||
className="ml-2 text-sm"
|
||||
onClick={() => {
|
||||
chatStore.toolsString = "";
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
{Tr(`Clear`)}
|
||||
</button>
|
||||
</Button>
|
||||
</h2>
|
||||
<hr className="my-2" />
|
||||
<div className="flex flex-wrap">
|
||||
{templateTools.map((t, index) => (
|
||||
<div
|
||||
className={`cursor-pointer rounded ${
|
||||
chatStore.toolsString === t.toolsString
|
||||
? "bg-info"
|
||||
: "bg-base-300"
|
||||
} w-fit p-2 m-1 flex flex-col`}
|
||||
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
|
||||
className="link"
|
||||
onClick={() => {
|
||||
const name = prompt(`Give **tools** template a name`);
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
t.name = name;
|
||||
setTemplateTools(structuredClone(templateTools));
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="link"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(`Are you sure to delete this **tools** template?`)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
templateTools.splice(index, 1);
|
||||
setTemplateTools(structuredClone(templateTools));
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Carousel className="w-full">
|
||||
<CarouselContent>
|
||||
{templateTools.map((t, index) => (
|
||||
<CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
|
||||
<div className="p-1">
|
||||
<Card
|
||||
className={`cursor-pointer ${
|
||||
chatStore.toolsString === t.toolsString
|
||||
? "border-primary"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
chatStore.toolsString = t.toolsString;
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="font-medium text-center">{t.name}</span>
|
||||
<div className="flex justify-between mt-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
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;
|
||||
setTemplateTools(structuredClone(templateTools));
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-500 hover:text-red-600"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure to delete this **tools** template?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
templateTools.splice(index, 1);
|
||||
setTemplateTools(structuredClone(templateTools));
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -44,8 +44,20 @@ import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ChatInput } from "@/components/ui/chat/chat-input";
|
||||
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 {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
|
||||
export default function ChatBOX(props: {
|
||||
db: Promise<IDBPDatabase<ChatStore>>;
|
||||
@@ -472,71 +484,86 @@ export default function ChatBOX(props: {
|
||||
)}
|
||||
<ChatMessageList>
|
||||
{!chatStore.apiKey && (
|
||||
<p className="bg-base-200 p-6 rounded my-3 text-left">
|
||||
{Tr("Please click above to set")} (OpenAI) API KEY
|
||||
</p>
|
||||
<Alert>
|
||||
<KeyIcon className="h-4 w-4" />
|
||||
<AlertTitle>Heads up!</AlertTitle>
|
||||
<AlertDescription>
|
||||
{Tr("Please click above to set")} (OpenAI) API KEY
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{!chatStore.apiEndpoint && (
|
||||
<p className="bg-base-200 p-6 rounded my-3 text-left">
|
||||
{Tr("Please click above to set")} API Endpoint
|
||||
</p>
|
||||
)}
|
||||
{templateAPIs.length > 0 && (
|
||||
<ListAPIs
|
||||
label="API"
|
||||
tmps={templateAPIs}
|
||||
setTmps={setTemplateAPIs}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
apiField="apiEndpoint"
|
||||
keyField="apiKey"
|
||||
/>
|
||||
<Alert>
|
||||
<GlobeIcon className="h-4 w-4" />
|
||||
<AlertTitle>Heads up!</AlertTitle>
|
||||
<AlertDescription>
|
||||
{Tr("Please click above to set")} API Endpoint
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<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 && (
|
||||
<ListAPIs
|
||||
label="Whisper API"
|
||||
tmps={templateAPIsWhisper}
|
||||
setTmps={setTemplateAPIsWhisper}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
apiField="whisper_api"
|
||||
keyField="whisper_key"
|
||||
/>
|
||||
)}
|
||||
{templateAPIsWhisper.length > 0 && (
|
||||
<ListAPIs
|
||||
label="Whisper API"
|
||||
tmps={templateAPIsWhisper}
|
||||
setTmps={setTemplateAPIsWhisper}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
apiField="whisper_api"
|
||||
keyField="whisper_key"
|
||||
/>
|
||||
)}
|
||||
|
||||
{templateAPIsTTS.length > 0 && (
|
||||
<ListAPIs
|
||||
label="TTS API"
|
||||
tmps={templateAPIsTTS}
|
||||
setTmps={setTemplateAPIsTTS}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
apiField="tts_api"
|
||||
keyField="tts_key"
|
||||
/>
|
||||
)}
|
||||
{templateAPIsTTS.length > 0 && (
|
||||
<ListAPIs
|
||||
label="TTS API"
|
||||
tmps={templateAPIsTTS}
|
||||
setTmps={setTemplateAPIsTTS}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
apiField="tts_api"
|
||||
keyField="tts_key"
|
||||
/>
|
||||
)}
|
||||
|
||||
{templateAPIsImageGen.length > 0 && (
|
||||
<ListAPIs
|
||||
label="Image Gen API"
|
||||
tmps={templateAPIsImageGen}
|
||||
setTmps={setTemplateAPIsImageGen}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
apiField="image_gen_api"
|
||||
keyField="image_gen_key"
|
||||
/>
|
||||
)}
|
||||
{templateAPIsImageGen.length > 0 && (
|
||||
<ListAPIs
|
||||
label="Image Gen API"
|
||||
tmps={templateAPIsImageGen}
|
||||
setTmps={setTemplateAPIsImageGen}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
apiField="image_gen_api"
|
||||
keyField="image_gen_key"
|
||||
/>
|
||||
)}
|
||||
|
||||
{toolsTemplates.length > 0 && (
|
||||
<ListToolsTempaltes
|
||||
templateTools={toolsTemplates}
|
||||
setTemplateTools={setTemplateTools}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
)}
|
||||
{toolsTemplates.length > 0 && (
|
||||
<ListToolsTempaltes
|
||||
templateTools={toolsTemplates}
|
||||
setTemplateTools={setTemplateTools}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
{chatStore.history.filter((msg) => !msg.example).length == 0 && (
|
||||
<div className="bg-base-200 break-all p-3 my-3 text-left">
|
||||
|
||||
Reference in New Issue
Block a user