v1.6.0 save api as template

src/CHATGPT_API_WEB_VERSION.ts

@@ -1,3 +1,3 @@
-const CHATGPT_API_WEB_VERSION = "v1.5.0";
+const CHATGPT_API_WEB_VERSION = "v1.6.0";
 
 export default CHATGPT_API_WEB_VERSION;

src/app.tsx

@@ -14,6 +14,11 @@ export interface ChatStoreMessage extends Message {
   example: boolean;
 }
 
+export interface TemplateAPI {
+  name: string;
+  key: string;
+  endpoint: string;
+}
 export interface ChatStore {
   chatgpt_api_web_version: string;
   systemMessageContent: string;
@@ -78,6 +83,7 @@ const STORAGE_NAME_SELECTED = `${STORAGE_NAME}-selected`;
 const STORAGE_NAME_INDEXES = `${STORAGE_NAME}-indexes`;
 const STORAGE_NAME_TOTALCOST = `${STORAGE_NAME}-totalcost`;
 export const STORAGE_NAME_TEMPLATE = `${STORAGE_NAME}-template`;
+export const STORAGE_NAME_TEMPLATE_API = `${STORAGE_NAME_TEMPLATE}-api`;
 
 export function addTotalCost(cost: number) {
   let totalCost = getTotalCost();

src/chatbox.tsx

@@ -1,7 +1,13 @@
 import structuredClone from "@ungap/structured-clone";
 import { createRef } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
-import { ChatStore, STORAGE_NAME_TEMPLATE, addTotalCost } from "./app";
+import {
+  ChatStore,
+  STORAGE_NAME_TEMPLATE,
+  STORAGE_NAME_TEMPLATE_API,
+  TemplateAPI,
+  addTotalCost,
+} from "./app";
 import ChatGPT, {
   calculate_token_length,
   ChunkMessage,
@@ -233,10 +239,22 @@ export default function ChatBOX(props: {
       localStorage.getItem(STORAGE_NAME_TEMPLATE) || "[]"
     ) as TemplateChatStore[]
   );
+  const [templateAPIs, _setTemplateAPIs] = useState(
+    JSON.parse(
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_API) || "[]"
+    ) as TemplateAPI[]
+  );
   const setTemplates = (templates: TemplateChatStore[]) => {
     localStorage.setItem(STORAGE_NAME_TEMPLATE, JSON.stringify(templates));
     _setTemplates(templates);
   };
+  const setTemplateAPIs = (templateAPIs: TemplateAPI[]) => {
+    localStorage.setItem(
+      STORAGE_NAME_TEMPLATE_API,
+      JSON.stringify(templateAPIs)
+    );
+    _setTemplateAPIs(templateAPIs);
+  };
 
   return (
     <div className="grow flex flex-col p-2 dark:text-black">
@@ -248,6 +266,8 @@ export default function ChatBOX(props: {
           selectedChatStoreIndex={props.selectedChatIndex}
           templates={templates}
           setTemplates={setTemplates}
+          templateAPIs={templateAPIs}
+          setTemplateAPIs={setTemplateAPIs}
         />
       )}
       <p
@@ -296,6 +316,63 @@ export default function ChatBOX(props: {
             请先在上方设置 API Endpoint
           </p>
         )}
+        {(chatStore.history.filter((msg) => !msg.example).length == 0 ||
+          !chatStore.apiEndpoint ||
+          !chatStore.apiKey) && (
+          <p className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
+            <h2>已保存的 API 模板</h2>
+            <hr className="my-2" />
+            <div className="flex flex-wrap">
+              {templateAPIs.map((t, index) => (
+                <div
+                  className={`cursor-pointer rounded ${
+                    chatStore.apiEndpoint === t.endpoint &&
+                    chatStore.apiKey === t.key
+                      ? "bg-red-600"
+                      : "bg-red-400"
+                  } w-fit p-2 m-1 flex flex-col`}
+                  onClick={() => {
+                    chatStore.apiEndpoint = t.endpoint;
+                    chatStore.apiKey = 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 **API** template a name");
+                        if (!name) {
+                          return;
+                        }
+                        t.name = name;
+                        setTemplateAPIs(structuredClone(templateAPIs));
+                      }}
+                    >
+                      🖋
+                    </button>
+                    <button
+                      onClick={() => {
+                        if (
+                          !confirm(
+                            "Are you sure to delete this **API** template?"
+                          )
+                        ) {
+                          return;
+                        }
+                        templateAPIs.splice(index, 1);
+                        setTemplateAPIs(structuredClone(templateAPIs));
+                      }}
+                    >
+                      ❌
+                    </button>
+                  </span>
+                </div>
+              ))}
+            </div>
+          </p>
+        )}
         {templates.length > 0 &&
           chatStore.history.filter((msg) => !msg.example).length == 0 && (
             <p className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
@@ -465,6 +542,18 @@ export default function ChatBOX(props: {
             请在左上角创建新会话：）
           </p>
         )}
+        {chatStore.chatgpt_api_web_version < "v1.6.0" && (
+          <p className="p-2 my-2 text-center dark:text-white">
+            <br />
+            提示：当前会话版本 {chatStore.chatgpt_api_web_version} {"< v1.6.0"}
+            。
+            <br />
+            v1.6.0 开始保存会话模板时会将 apiKey 和 apiEndpoint
+            设置为空，继续使用旧版可能在保存读取模板时出现问题
+            <br />
+            请在左上角创建新会话：）
+          </p>
+        )}
         {showRetry && (
           <p className="text-right p-2 my-2 dark:text-white">
             <button

src/settings.tsx

@@ -1,6 +1,6 @@
 import { createRef } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
-import { ChatStore, clearTotalCost, getTotalCost } from "./app";
+import { ChatStore, TemplateAPI, clearTotalCost, getTotalCost } from "./app";
 import models from "./models";
 import { TemplateChatStore } from "./chatbox";
 
@@ -158,6 +158,8 @@ export default (props: {
   selectedChatStoreIndex: number;
   templates: TemplateChatStore[];
   setTemplates: (templates: TemplateChatStore[]) => void;
+  templateAPIs: TemplateAPI[];
+  setTemplateAPIs: (templateAPIs: TemplateAPI[]) => void;
 }) => {
   let link =
     location.protocol +
@@ -371,6 +373,9 @@ export default (props: {
                 }
                 const tmp: ChatStore = structuredClone(props.chatStore);
                 tmp.history = tmp.history.filter((h) => h.example);
+                // clear api because it is stored in the API template
+                tmp.apiEndpoint = "";
+                tmp.apiKey = "";
                 // @ts-ignore
                 tmp.name = name;
                 props.templates.push(tmp as TemplateChatStore);
@@ -379,6 +384,25 @@ export default (props: {
             >
               As template
             </button>
+            <button
+              className="p-2 m-2 rounded bg-amber-500"
+              onClick={() => {
+                const name = prompt("Give this **API** template a name:");
+                if (!name) {
+                  alert("No template name specified");
+                  return;
+                }
+                const tmp: TemplateAPI = {
+                  name,
+                  endpoint: props.chatStore.apiEndpoint,
+                  key: props.chatStore.apiKey,
+                };
+                props.templateAPIs.push(tmp);
+                props.setTemplateAPIs([...props.templateAPIs]);
+              }}
+            >
+              As API Template
+            </button>
             <button
               className="p-2 m-2 rounded bg-amber-500"
               onClick={() => {