From 346634c0d07fdd8bc5125771b5e55df2b058d68a Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Fri, 20 Dec 2024 20:44:50 +0800
Subject: [PATCH] Refactor ListAPIs and ListToolsTemplates components to use
 Card and Carousel for improved UI; enhance template management with Edit and
 Delete buttons

---
 src/listAPIs.tsx           | 141 +++++++++++++++++++++---------------
 src/listToolsTemplates.tsx | 132 ++++++++++++++++++++-------------
 src/pages/Chatbox.tsx      | 145 ++++++++++++++++++++++---------------
 3 files changed, 250 insertions(+), 168 deletions(-)

diff --git a/src/listAPIs.tsx b/src/listAPIs.tsx
index f6d9cf1..152aadd 100644
--- a/src/listAPIs.tsx
+++ b/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>
   );
 }
diff --git a/src/listToolsTemplates.tsx b/src/listToolsTemplates.tsx
index 87dd5b3..0be70d0 100644
--- a/src/listToolsTemplates.tsx
+++ b/src/listToolsTemplates.tsx
@@ -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>
   );
 }
diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx
index b9756de..a69fb1a 100644
--- a/src/pages/Chatbox.tsx
+++ b/src/pages/Chatbox.tsx
@@ -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">