From 4aca3482cbe6b842a6b7cd971ef639d65bb7cc2b Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Sat, 24 Aug 2024 19:48:22 +0900
Subject: [PATCH] Add Devtools

---
 src/lang/en.ts                                |  1 +
 src/lib/Setting/Pages/AdvancedSettings.svelte |  4 +++
 src/lib/SideBars/DevTool.svelte               | 25 +++++++++++++++
 src/lib/SideBars/Sidebar.svelte               | 21 ++++++++++--
 src/lib/UI/GUI/TextInput.svelte               |  8 +++--
 src/ts/hotkey.ts                              | 32 ++++++++++++++++++-
 src/ts/storage/database.ts                    |  1 +
 7 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/SideBars/DevTool.svelte

diff --git a/src/lang/en.ts b/src/lang/en.ts
index b6a943da..67e7ce35 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -686,4 +686,5 @@ export const languageEnglish = {
     openClose: "Open/Close",
     hideApiKeys: "Hide API Keys",
     unformatQuotes: "Disable Quote Formatting",
+    enableDevTools: "Enable Dev Tools",
 }
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/AdvancedSettings.svelte b/src/lib/Setting/Pages/AdvancedSettings.svelte
index 5844c83c..a973847a 100644
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -122,6 +122,10 @@
         <Help key="removePunctuationHypa"/>
     </Check>
 </div>
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.enableDevTools} name={language.enableDevTools}>
+    </Check>
+</div>
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.dynamicAssets} name={language.dynamicAssets}>
         <Help key="dynamicAssets"/>
diff --git a/src/lib/SideBars/DevTool.svelte b/src/lib/SideBars/DevTool.svelte
new file mode 100644
index 00000000..1cb7a567
--- /dev/null
+++ b/src/lib/SideBars/DevTool.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { CurrentChat } from "src/ts/stores";
+  import TextInput from "../UI/GUI/TextInput.svelte";
+  import NumberInput from "../UI/GUI/NumberInput.svelte";
+
+    
+</script>
+
+<span>Variables</span>
+<div class="rounded-md border border-darkborderc grid grid-cols-2 gap-2 p-2">
+    {#if $CurrentChat.scriptstate &&  Object.keys($CurrentChat.scriptstate).length > 0}
+        {#each Object.keys($CurrentChat.scriptstate) as key}
+            <span>{key}</span>
+            {#if typeof $CurrentChat.scriptstate[key] === "object"}
+                <div class="p-2 text-center">Object</div>
+            {:else if typeof $CurrentChat.scriptstate[key] === "string"}
+                <TextInput bind:value={$CurrentChat.scriptstate[key]} />
+            {:else if typeof $CurrentChat.scriptstate[key] === "number"}
+                <NumberInput bind:value={$CurrentChat.scriptstate[key]} />
+            {/if}
+        {/each}
+    {:else}
+        <div class="p-2 text-center">No variables</div>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index e3a73290..30d4b39c 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -52,9 +52,11 @@
     import SideChatList from "./SideChatList.svelte";
     import { joinMultiuserRoom } from "src/ts/sync/multiuser";
   import { sideBarSize } from "src/ts/gui/guisize";
+  import DevTool from "./DevTool.svelte";
   let sideBarMode = 0;
   let editMode = false;
   let menuMode = 0;
+  let devTool = false
   export let openGrid = () => {};
 
   function createScratch() {
@@ -658,10 +660,23 @@
       <SideChatList bind:chara={ $CurrentCharacter} />
     {:else}
       <div class="w-full h-8 min-h-8 border-l border-b border-r border-selected relative bottom-6 rounded-b-md flex">
-        <button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-textcolor2={$botMakerMode}>{language.Chat}</button>
-        <button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode}>{language.character}</button>
+        <button on:click={() => {
+          devTool = false
+          botMakerMode.set(false)
+        }} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-textcolor2={$botMakerMode}>{language.Chat}</button>
+        <button on:click={() => {
+          devTool = false
+          botMakerMode.set(true)
+        }} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode}>{language.character}</button>
+        {#if $DataBase.enableDevTools}
+          <button on:click={() => {
+            devTool = true
+          }} class="flex-grow border-l border-l-selected rounded-br-md" class:text-textcolor2={!$botMakerMode}>🛠️</button>
+        {/if}
       </div>
-      {#if $botMakerMode}
+      {#if devTool}
+        <DevTool />
+      {:else if $botMakerMode}
         <CharConfig />
       {:else}
         <SideChatList bind:chara={ $CurrentCharacter} />
diff --git a/src/lib/UI/GUI/TextInput.svelte b/src/lib/UI/GUI/TextInput.svelte
index acb6605d..c8f95016 100644
--- a/src/lib/UI/GUI/TextInput.svelte
+++ b/src/lib/UI/GUI/TextInput.svelte
@@ -60,7 +60,9 @@
         type="text"
         bind:value
         disabled={disabled}
-        on:input={onInput}
+        on:input={(e) => {
+            onInput(e)
+        }}
     />
 {/if}
 
@@ -73,7 +75,9 @@
     export let padding = true
     export let marginBottom = false
     export let marginTop = false
-    export let onInput = () => {}
+    export let onInput = (e:Event & {
+        currentTarget: EventTarget & HTMLInputElement;
+    }) => {}
     export let fullwidth = false
     export let fullh = false
     export let className = ''
diff --git a/src/ts/hotkey.ts b/src/ts/hotkey.ts
index a6681556..2ffe0007 100644
--- a/src/ts/hotkey.ts
+++ b/src/ts/hotkey.ts
@@ -1,7 +1,8 @@
 import { get } from "svelte/store"
-import { alertToast, doingAlert } from "./alert"
+import { alertSelect, alertToast, doingAlert } from "./alert"
 import { DataBase, changeToPreset as changeToPreset2  } from "./storage/database"
 import { openPersonaList, openPresetList, selectedCharID, settingsOpen } from "./stores"
+import { language } from "src/lang"
 
 export function initHotkey(){
     document.addEventListener('keydown', (ev) => {
@@ -97,6 +98,35 @@ export function initHotkey(){
             ev.preventDefault()
         }
     })
+
+
+    let touchs = 0
+    //check for triple touch
+    document.addEventListener('touchstart', async (ev) => {
+        touchs++
+        if(touchs > 2){
+            touchs = 0
+            if(doingAlert()){
+                return
+            }
+            const selStr = await alertSelect([
+                language.presets,
+                language.persona
+            ])
+            const sel = parseInt(selStr)
+            if(sel === 0){
+                openPresetList.set(!get(openPresetList))
+            }
+            if(sel === 1){
+                openPersonaList.set(!get(openPersonaList))
+            }
+
+
+        }
+    })
+    document.addEventListener('touchend', (ev) => {
+        touchs = 0
+    })
 }
 
 function changeToPreset(num:number){
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index 8ee858fd..ae562422 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -714,6 +714,7 @@ export interface Database{
     claudeCachingExperimental: boolean
     hideApiKey: boolean
     unformatQuotes: boolean
+    enableDevTools: boolean
 }
 
 export interface customscript{