save tool templates

src/app.tsx

@@ -22,6 +22,11 @@ export interface TemplateAPI {
   endpoint: string;
 }
 
+export interface TemplateTools {
+  name: string;
+  toolsString: string;
+}
+
 export interface ChatStore {
   chatgpt_api_web_version: string;
   systemMessageContent: string;
@@ -121,6 +126,7 @@ export const STORAGE_NAME_TEMPLATE_API = `${STORAGE_NAME_TEMPLATE}-api`;
 export const STORAGE_NAME_TEMPLATE_API_WHISPER = `${STORAGE_NAME_TEMPLATE}-api-whisper`;
 export const STORAGE_NAME_TEMPLATE_API_TTS = `${STORAGE_NAME_TEMPLATE}-api-tts`;
 export const STORAGE_NAME_TEMPLATE_API_IMAGE_GEN = `${STORAGE_NAME_TEMPLATE}-api-image-gen`;
+export const STORAGE_NAME_TEMPLATE_TOOLS = `${STORAGE_NAME_TEMPLATE}-tools`;
 
 export function addTotalCost(cost: number) {
   let totalCost = getTotalCost();

src/chatbox.tsx

@@ -10,7 +10,9 @@ import {
   STORAGE_NAME_TEMPLATE_API_IMAGE_GEN,
   STORAGE_NAME_TEMPLATE_API_TTS,
   STORAGE_NAME_TEMPLATE_API_WHISPER,
+  STORAGE_NAME_TEMPLATE_TOOLS,
   TemplateAPI,
+  TemplateTools,
   addTotalCost,
 } from "./app";
 import ChatGPT, {
@@ -27,6 +29,7 @@ import Settings from "./settings";
 import getDefaultParams from "./getDefaultParam";
 import { AddImage } from "./addImage";
 import { ListAPIs } from "./listAPIs";
+import { ListToolsTempaltes } from "./listToolsTemplates";
 
 export interface TemplateChatStore extends ChatStore {
   name: string;
@@ -338,6 +341,11 @@ export default function ChatBOX(props: {
       localStorage.getItem(STORAGE_NAME_TEMPLATE_API_IMAGE_GEN) || "[]"
     ) as TemplateAPI[]
   );
+  const [toolsTemplates, _setToolsTemplates] = useState(
+    JSON.parse(
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_TOOLS) || "[]"
+    ) as TemplateTools[]
+  );
   const setTemplates = (templates: TemplateChatStore[]) => {
     localStorage.setItem(STORAGE_NAME_TEMPLATE, JSON.stringify(templates));
     _setTemplates(templates);
@@ -370,6 +378,13 @@ export default function ChatBOX(props: {
     );
     _setTemplateAPIsImageGen(templateAPIImageGen);
   };
+  const setTemplateTools = (templateTools: TemplateTools[]) => {
+    localStorage.setItem(
+      STORAGE_NAME_TEMPLATE_TOOLS,
+      JSON.stringify(templateTools)
+    );
+    _setToolsTemplates(templateTools);
+  };
 
   return (
     <div className="grow flex flex-col p-2 dark:text-black">
@@ -389,6 +404,8 @@ export default function ChatBOX(props: {
           setTemplateAPIsTTS={setTemplateAPIsTTS}
           templateAPIsImageGen={templateAPIsImageGen}
           setTemplateAPIsImageGen={setTemplateAPIsImageGen}
+          templateTools={toolsTemplates}
+          setTemplateTools={setTemplateTools}
         />
       )}
       <div
@@ -504,6 +521,18 @@ export default function ChatBOX(props: {
             />
           )}
 
+        {toolsTemplates.length > 0 &&
+          (chatStore.develop_mode ||
+            chatStore.history.filter((msg) => !msg.example).length == 0 ||
+            !chatStore.toolsString) && (
+            <ListToolsTempaltes
+              templateTools={toolsTemplates}
+              setTemplateTools={setTemplateTools}
+              chatStore={chatStore}
+              setChatStore={setChatStore}
+            />
+          )}
+
         {chatStore.history.filter((msg) => !msg.example).length == 0 && (
           <div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
             <h2>

src/listToolsTemplates.tsx

@@ -0,0 +1,67 @@
+import { ChatStore, TemplateTools } from "./app";
+import { Tr } from "./translate";
+
+interface Props {
+  templateTools: TemplateTools[];
+  setTemplateTools: (tmps: TemplateTools[]) => void;
+  chatStore: ChatStore;
+  setChatStore: (cs: ChatStore) => void;
+}
+export function ListToolsTempaltes({
+  chatStore,
+  templateTools,
+  setTemplateTools,
+  setChatStore,
+}: Props) {
+  return (
+    <div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
+      <h2>{Tr(`Saved tools templates`)}</h2>
+      <hr className="my-2" />
+      <div className="flex flex-wrap">
+        {templateTools.map((t, index) => (
+          <div
+            className={`cursor-pointer rounded ${
+              chatStore.toolsString === t.toolsString
+                ? "bg-red-600"
+                : "bg-red-400"
+            } 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>
+            <hr className="mt-2" />
+            <span className="flex justify-between">
+              <button
+                onClick={() => {
+                  const name = prompt(`Give **tools** template a name`);
+                  if (!name) {
+                    return;
+                  }
+                  t.name = name;
+                  setTemplateTools(structuredClone(templateTools));
+                }}
+              >
+                🖋
+              </button>
+              <button
+                onClick={() => {
+                  if (
+                    !confirm(`Are you sure to delete this **tools** template?`)
+                  ) {
+                    return;
+                  }
+                  templateTools.splice(index, 1);
+                  setTemplateTools(structuredClone(templateTools));
+                }}
+              >
+                ❌
+              </button>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/settings.tsx

@@ -1,6 +1,12 @@
 import { createRef } from "preact";
 import { StateUpdater, useContext, useEffect, useState } from "preact/hooks";
-import { ChatStore, TemplateAPI, clearTotalCost, getTotalCost } from "./app";
+import {
+  ChatStore,
+  TemplateAPI,
+  TemplateTools,
+  clearTotalCost,
+  getTotalCost,
+} from "./app";
 import models from "./models";
 import { TemplateChatStore } from "./chatbox";
 import { tr, Tr, langCodeContext, LANG_OPTIONS } from "./translate";
@@ -274,6 +280,8 @@ export default (props: {
   setTemplateAPIsTTS: (templateAPIs: TemplateAPI[]) => void;
   templateAPIsImageGen: TemplateAPI[];
   setTemplateAPIsImageGen: (templateAPIs: TemplateAPI[]) => void;
+  templateTools: TemplateTools[];
+  setTemplateTools: (templateTools: TemplateTools[]) => void;
 }) => {
   let link =
     location.protocol +
@@ -564,6 +572,27 @@ export default (props: {
                 setTmps={props.setTemplateAPIsImageGen}
               />
             )}
+
+            {props.chatStore.toolsString.trim() && (
+              <button
+                className="p-2 m-2 rounded bg-blue-300"
+                onClick={() => {
+                  const name = prompt(`Give this **Tools** template a name:`);
+                  if (!name) {
+                    alert("No template name specified");
+                    return;
+                  }
+                  const newToolsTmp: TemplateTools = {
+                    name,
+                    toolsString: props.chatStore.toolsString,
+                  };
+                  props.templateTools.push(newToolsTmp);
+                  props.setTemplateTools([...props.templateTools]);
+                }}
+              >
+                {Tr(`Save Tools`)}
+              </button>
+            )}
           </div>
           <p className="flex justify-evenly">
             <button