save whisper / tts / image gen api

2023-11-11 13:16:55 +08:00
parent a72e98ad25
commit f3953693fd
7 changed files with 280 additions and 77 deletions
--- a/src/listAPIs.tsx
+++ b/src/listAPIs.tsx
@@ -0,0 +1,81 @@
+import { ChatStore, TemplateAPI } from "./app";
+import { Tr } from "./translate";
+
+interface Props {
+  chatStore: ChatStore;
+  setChatStore: (cs: ChatStore) => void;
+  tmps: TemplateAPI[];
+  setTmps: (tmps: TemplateAPI[]) => void;
+  label: string;
+  apiField: string;
+  keyField: string;
+}
+export function ListAPIs({
+  tmps,
+  setTmps,
+  chatStore,
+  setChatStore,
+  label,
+  apiField,
+  keyField,
+}: Props) {
+  return (
+    <div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
+      <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-red-600"
+                : "bg-red-400"
+            } 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>
+            <hr className="mt-2" />
+            <span className="flex justify-between">
+              <button
+                onClick={() => {
+                  const name = prompt(`Give **${label}** template a name`);
+                  if (!name) {
+                    return;
+                  }
+                  t.name = name;
+                  setTmps(structuredClone(tmps));
+                }}
+              >
+                🖋
+              </button>
+              <button
+                onClick={() => {
+                  if (
+                    !confirm(
+                      `Are you sure to delete this **${label}** template?`
+                    )
+                  ) {
+                    return;
+                  }
+                  tmps.splice(index, 1);
+                  setTmps(structuredClone(tmps));
+                }}
+              >
+                ❌
+              </button>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}