refactor: reorganize SetAPIsTemplate component and update imports for improved structure

src/components/ListAPI.tsx

@@ -19,25 +19,18 @@ import {
 
 interface APITemplateItemProps {
   label: string;
-  shortLabel: string;
   apiField: string;
   keyField: string;
 }
-function ListAPIs({
-  label,
-  shortLabel,
-  apiField,
-  keyField,
-}: APITemplateItemProps) {
+function ListAPIs({ label, apiField, keyField }: APITemplateItemProps) {
   const ctx = useContext(AppContext);
   if (ctx === null) return <></>;
 
   return (
     <NavigationMenuItem>
       <NavigationMenuTrigger>
-        <span className="lg:hidden">{shortLabel}</span>
+        {label}{" "}
         <span className="hidden lg:inline">
-          {label}{" "}
           {ctx.templateAPIs.find(
             (t) =>
               ctx.chatStore[apiField as keyof ChatStore] === t.endpoint &&
@@ -215,7 +208,6 @@ const ListAPI: React.FC = () => {
           {ctx.templateAPIs.length > 0 && (
             <ListAPIs
               label="Chat API"
-              shortLabel="API"
               apiField="apiEndpoint"
               keyField="apiKey"
             />
@@ -223,23 +215,16 @@ const ListAPI: React.FC = () => {
           {ctx.templateAPIsWhisper.length > 0 && (
             <ListAPIs
               label="Whisper API"
-              shortLabel="Whisper"
               apiField="whisper_api"
               keyField="whisper_key"
             />
           )}
           {ctx.templateAPIsTTS.length > 0 && (
-            <ListAPIs
-              label="TTS API"
-              shortLabel="TTS"
-              apiField="tts_api"
-              keyField="tts_key"
-            />
+            <ListAPIs label="TTS API" apiField="tts_api" keyField="tts_key" />
           )}
           {ctx.templateAPIsImageGen.length > 0 && (
             <ListAPIs
               label="Image Gen API"
-              shortLabel="ImgGen"
               apiField="image_gen_api"
               keyField="image_gen_key"
             />

src/components/MessageBubble.tsx

@@ -1,11 +1,11 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import Markdown from "react-markdown";
-import { useContext, useState } from "react";
+import { useContext, useState, useMemo } from "react";
 import { ChatStoreMessage } from "@/types/chatstore";
+import { addTotalCost } from "@/utils/totalCost";
 
 import { Tr } from "@/translate";
 import { getMessageText } from "@/chatgpt";
-import TTSButton, { TTSPlay } from "@/tts";
 import { EditMessage } from "@/editMessage";
 import logprobToColor from "@/utils/logprob";
 import {
@@ -15,12 +15,15 @@ import {
   ChatBubbleActionWrapper,
 } from "@/components/ui/chat/chat-bubble";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
 import {
   ClipboardIcon,
   PencilIcon,
   MessageSquareOffIcon,
   MessageSquarePlusIcon,
+  AudioLinesIcon,
+  LoaderCircleIcon,
 } from "lucide-react";
 import { AppContext } from "@/pages/App";
 
@@ -143,6 +146,94 @@ function MessageToolResp({ chat, copyToClipboard }: ToolRespondMessageProps) {
   );
 }
 
+interface TTSProps {
+  chat: ChatStoreMessage;
+}
+interface TTSPlayProps {
+  chat: ChatStoreMessage;
+}
+export function TTSPlay(props: TTSPlayProps) {
+  const src = useMemo(() => {
+    if (props.chat.audio instanceof Blob) {
+      return URL.createObjectURL(props.chat.audio);
+    }
+    return "";
+  }, [props.chat.audio]);
+
+  if (props.chat.hide) {
+    return <></>;
+  }
+  if (props.chat.audio instanceof Blob) {
+    return <audio className="w-64" src={src} controls />;
+  }
+  return <></>;
+}
+function TTSButton(props: TTSProps) {
+  const [generating, setGenerating] = useState(false);
+  const ctx = useContext(AppContext);
+  if (!ctx) return <div>error</div>;
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => {
+        const api = ctx.chatStore.tts_api;
+        const api_key = ctx.chatStore.tts_key;
+        const model = "tts-1";
+        const input = getMessageText(props.chat);
+        const voice = ctx.chatStore.tts_voice;
+
+        const body: Record<string, any> = {
+          model,
+          input,
+          voice,
+          response_format: ctx.chatStore.tts_format || "mp3",
+        };
+        if (ctx.chatStore.tts_speed_enabled) {
+          body["speed"] = ctx.chatStore.tts_speed;
+        }
+
+        setGenerating(true);
+
+        fetch(api, {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${api_key}`,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(body),
+        })
+          .then((response) => response.blob())
+          .then((blob) => {
+            // update price
+            const cost = (input.length * 0.015) / 1000;
+            ctx.chatStore.cost += cost;
+            addTotalCost(cost);
+            ctx.setChatStore({ ...ctx.chatStore });
+
+            // save blob
+            props.chat.audio = blob;
+            ctx.setChatStore({ ...ctx.chatStore });
+
+            const url = URL.createObjectURL(blob);
+            const audio = new Audio(url);
+            audio.play();
+          })
+          .finally(() => {
+            setGenerating(false);
+          });
+      }}
+    >
+      {generating ? (
+        <LoaderCircleIcon className="h-4 w-4 animate-spin" />
+      ) : (
+        <AudioLinesIcon className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}
+
 export default function Message(props: { messageIndex: number }) {
   const ctx = useContext(AppContext);
   if (ctx === null) return <></>;

src/components/Settings.tsx

@@ -12,7 +12,7 @@ import {
 import { models } from "@/types/models";
 import { tr, Tr, langCodeContext, LANG_OPTIONS } from "@/translate";
 import { isVailedJSON } from "@/utils/isVailedJSON";
-import { SetAPIsTemplate } from "@/setAPIsTemplate";
+import { SetAPIsTemplate } from "@/components/setAPIsTemplate";
 import { autoHeight } from "@/utils/textAreaHelp";
 import { getDefaultParams } from "@/utils/getDefaultParam";
 

src/components/setAPIsTemplate.tsx

@@ -0,0 +1,91 @@
+import { TemplateAPI } from "@/types/chatstore";
+import { Tr } from "@/translate";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "./ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { SaveIcon } from "lucide-react";
+
+interface Props {
+  temps: TemplateAPI[];
+  setTemps: (temps: TemplateAPI[]) => void;
+  label: string;
+  endpoint: string;
+  APIkey: string;
+}
+export function SetAPIsTemplate({
+  endpoint,
+  APIkey,
+  temps: temps,
+  setTemps: setTemps,
+  label,
+}: Props) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">{Tr(`Save ${label}`)}</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Save {label} as Template</DialogTitle>
+          <DialogDescription>
+            Once saved, you can easily access your templates from the dropdown
+            menu.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="templateName" className="sr-only">
+              Name
+            </Label>
+            <Input id="templateName" placeholder="Type Something..." />
+            <Label id="templateNameError" className="text-red-600"></Label>
+          </div>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button
+              type="submit"
+              size="sm"
+              className="px-3"
+              onClick={() => {
+                const name = document.getElementById(
+                  "templateName"
+                ) as HTMLInputElement;
+                if (!name.value) {
+                  const errorLabel = document.getElementById(
+                    "templateNameError"
+                  ) as HTMLLabelElement;
+                  if (errorLabel) {
+                    errorLabel.textContent = "Template name is required.";
+                  }
+                  return;
+                }
+                const temp: TemplateAPI = {
+                  name: name.value,
+                  endpoint,
+                  key: APIkey,
+                };
+                temps.push(temp);
+                setTemps([...temps]);
+              }}
+            >
+              <SaveIcon className="w-4 h-4" /> Save
+              <span className="sr-only">Save</span>
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}