From 5e9683a5e4e4ce8747f8cac952176714e9a58b96 Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Wed, 26 Jul 2023 00:13:56 +0900
Subject: [PATCH] [feat] new sidebar

---
 src/App.svelte                                |  8 +-
 src/lib/ChatScreens/ChatScreen.svelte         |  6 +-
 .../Pages/AccessibilitySettings.svelte        |  2 +-
 src/lib/Setting/Pages/AdvancedSettings.svelte |  2 +-
 src/lib/Setting/Pages/BotSettings.svelte      |  2 +-
 src/lib/Setting/Pages/DisplaySettings.svelte  |  2 +-
 src/lib/Setting/Pages/LanguageSettings.svelte |  4 +-
 src/lib/Setting/Pages/OtherBotSettings.svelte |  2 +-
 src/lib/Setting/Pages/PluginSettings.svelte   |  2 +-
 src/lib/Setting/Pages/UserSettings.svelte     |  2 +-
 src/lib/SideBars/CharConfig.svelte            |  2 +-
 src/lib/SideBars/LoreBook/LoreBookData.svelte |  2 +-
 .../SideBars/LoreBook/LoreBookSetting.svelte  |  2 +-
 src/lib/SideBars/Regex/RegexData.svelte       |  2 +-
 src/lib/SideBars/SideChatList.svelte          | 93 +++++++++++++++++++
 src/lib/SideBars/Sidebar.svelte               | 33 ++++---
 .../GUI/{Check.svelte => CheckInput.svelte}   | 16 ----
 src/lib/UI/GUI/SideBarArrow.svelte            | 15 +++
 src/ts/parser.ts                              | 33 +++++--
 src/ts/storage/globalApi.ts                   |  2 +-
 src/ts/stores.ts                              |  3 +
 tailwind.config.js                            |  8 +-
 22 files changed, 186 insertions(+), 57 deletions(-)
 create mode 100644 src/lib/SideBars/SideChatList.svelte
 rename src/lib/UI/GUI/{Check.svelte => CheckInput.svelte} (66%)
 create mode 100644 src/lib/UI/GUI/SideBarArrow.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 84b10342..cbdaaaa4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Sidebar from './lib/SideBars/Sidebar.svelte';
     import {ArrowRight} from 'lucide-svelte'
-    import { SizeStore, settingsOpen, sideBarStore } from './ts/stores';
+    import { DynamicGUI, settingsOpen, sideBarStore } from './ts/stores';
     import { DataBase, loadedStore } from './ts/storage/database';
     import ChatScreen from './lib/ChatScreens/ChatScreen.svelte';
     import AlertComp from './lib/Others/AlertComp.svelte';
@@ -37,7 +37,7 @@
             <GridChars endGrid={() => {gridOpen = false}} />
         {:else}
             {#if $sideBarStore}
-                {#if ($SizeStore.w > 1028)}
+                {#if (!$DynamicGUI)}
                     <Sidebar openGrid={() => {gridOpen = true}} />
                 {:else}
                     <div class="fixed top-0 w-full h-full left-0 z-30 flex flex-row items-center">
@@ -48,10 +48,6 @@
 
                     </div>
                 {/if}
-            {:else}
-                <button on:click={() => {sideBarStore.set(true)}} class="fixed top-3 left-0 h-12 w-12 border-none rounded-r-md bg-borderc hover:bg-green-500 transition-colors flex items-center justify-center text-neutral-200 opacity-30 hover:opacity-70 z-20">
-                    <ArrowRight />
-                </button>
             {/if}
             <ChatScreen />
         {/if}
diff --git a/src/lib/ChatScreens/ChatScreen.svelte b/src/lib/ChatScreens/ChatScreen.svelte
index def0aa26..d27b3549 100644
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
     import { getCustomBackground, getEmotion } from "../../ts/util";
     import { DataBase } from "../../ts/storage/database";
-    import { CharEmotion, SizeStore, selectedCharID, sideBarStore } from "../../ts/stores";
+    import { CharEmotion, selectedCharID } from "../../ts/stores";
     import ResizeBox from './ResizeBox.svelte'
     import DefaultChatScreen from "./DefaultChatScreen.svelte";
     import defaultWallpaper from '../../etc/bg.jpg'
     import ChatList from "../Others/ChatList.svelte";
     import TransitionImage from "./TransitionImage.svelte";
   import BackgroundDom from "./BackgroundDom.svelte";
+  import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
     let openChatList = false
 
     const wallPaper = `background: url(${defaultWallpaper})`
@@ -28,6 +29,7 @@
 </script>
 {#if $DataBase.theme === ''}
     <div class="flex-grow h-full min-w-0 relative justify-center flex">
+        <SideBarArrow />
         <BackgroundDom />
         <div style={bgImg} class="h-full w-full" class:max-w-6xl={$DataBase.classicMaxWidth}>
             {#if $selectedCharID >= 0}
@@ -40,6 +42,7 @@
     </div>
 {:else if $DataBase.theme === 'waifu'}
     <div class="flex-grow h-full flex justify-center relative" style="{bgImg.length < 4 ? wallPaper : bgImg}">
+        <SideBarArrow />
         <BackgroundDom />
         {#if $selectedCharID >= 0}
             {#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
@@ -54,6 +57,7 @@
     </div>
 {:else if $DataBase.theme === 'waifuMobile'}
     <div class="flex-grow h-full relative" style={bgImg.length < 4 ? wallPaper : bgImg}>
+        <SideBarArrow />
         <BackgroundDom />
         <div class="w-full absolute z-10 bottom-0 left-0"
             class:per33={$selectedCharID >= 0 && $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
diff --git a/src/lib/Setting/Pages/AccessibilitySettings.svelte b/src/lib/Setting/Pages/AccessibilitySettings.svelte
index c731b43b..36be9121 100644
--- a/src/lib/Setting/Pages/AccessibilitySettings.svelte
+++ b/src/lib/Setting/Pages/AccessibilitySettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Check from "src/lib/UI/GUI/Check.svelte";
+    import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
     import { DataBase } from "src/ts/storage/database";
 
diff --git a/src/lib/Setting/Pages/AdvancedSettings.svelte b/src/lib/Setting/Pages/AdvancedSettings.svelte
index 0412b87a..6f8ec2c9 100644
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Check from "src/lib/UI/GUI/Check.svelte";
+    import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
     import { DataBase } from "src/ts/storage/database";
     import { alertMd } from "src/ts/alert";
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index 18265f7a..7e669414 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Check from "src/lib/UI/GUI/Check.svelte";
+    import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
     import Help from "src/lib/Others/Help.svelte";
     import { DataBase } from "src/ts/storage/database";
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index 90cd4444..61dd1227 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -2,7 +2,7 @@
     import { language } from "src/lang";
     import { DataBase, saveImage, updateTextTheme } from "src/ts/storage/database";
     import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
-    import Check from "src/lib/UI/GUI/Check.svelte";
+    import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import Help from "src/lib/Others/Help.svelte";
   import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
   import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
diff --git a/src/lib/Setting/Pages/LanguageSettings.svelte b/src/lib/Setting/Pages/LanguageSettings.svelte
index b999bf48..aefac210 100644
--- a/src/lib/Setting/Pages/LanguageSettings.svelte
+++ b/src/lib/Setting/Pages/LanguageSettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Check from "src/lib/UI/GUI/Check.svelte";
+    import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { changeLanguage, language } from "src/lang";
     import { DataBase } from "src/ts/storage/database";
     import { sleep } from "src/ts/util";
@@ -16,7 +16,7 @@
 <span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
 <SelectInput className="mt-2" bind:value={$DataBase.language} on:change={async () => {
     if($DataBase.language === 'translang'){
-        downloadFile('lang.json', Buffer.from(JSON.stringify(languageEnglish, null, 4), 'utf-8'))
+        downloadFile('lang.json', new TextEncoder().encode(JSON.stringify(languageEnglish, null, 4)))
         alertNormal("Downloaded JSON, translate it, and send it to the dev by discord DM and email. I will add it to the next version.")
         $DataBase.language = 'en'
     }
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index 2a923827..82fd292e 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Check from "src/lib/UI/GUI/Check.svelte";
+    import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
     import Help from "src/lib/Others/Help.svelte";
     import { DataBase } from "src/ts/storage/database";
diff --git a/src/lib/Setting/Pages/PluginSettings.svelte b/src/lib/Setting/Pages/PluginSettings.svelte
index f2d8f579..9a3ca7da 100644
--- a/src/lib/Setting/Pages/PluginSettings.svelte
+++ b/src/lib/Setting/Pages/PluginSettings.svelte
@@ -4,7 +4,7 @@
   import { alertConfirm } from "src/ts/alert";
   import { DataBase } from "src/ts/storage/database";
   import { importPlugin } from "src/ts/plugins/plugins";
-  import Check from "src/lib/UI/GUI/Check.svelte";
+  import Check from "src/lib/UI/GUI/CheckInput.svelte";
   import TextInput from "src/lib/UI/GUI/TextInput.svelte";
   import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
   import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
diff --git a/src/lib/Setting/Pages/UserSettings.svelte b/src/lib/Setting/Pages/UserSettings.svelte
index 572ea50a..8c5e16ea 100644
--- a/src/lib/Setting/Pages/UserSettings.svelte
+++ b/src/lib/Setting/Pages/UserSettings.svelte
@@ -4,7 +4,7 @@
     import { getCharImage, selectUserImg } from "src/ts/characters";
     import { loadRisuAccountData, saveRisuAccountData } from "src/ts/drive/accounter";
     import { DataBase } from "src/ts/storage/database";
-    import Check from "src/lib/UI/GUI/Check.svelte";
+    import Check from "src/lib/UI/GUI/CheckInput.svelte";
   import { alertConfirm, alertSelect } from "src/ts/alert";
   import { forageStorage, isNodeServer, isTauri } from "src/ts/storage/globalApi";
   import { unMigrationAccount } from "src/ts/storage/accountStorage";
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index 45035a9b..c6672038 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -4,7 +4,7 @@
     import { DataBase, saveImage as saveAsset, type Database, type character, type groupChat } from "../../ts/storage/database";
     import { selectedCharID } from "../../ts/stores";
     import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User, DnaIcon, CurlyBraces, Volume2Icon, XIcon } from 'lucide-svelte'
-    import Check from "../UI/GUI/Check.svelte";
+    import Check from "../UI/GUI/CheckInput.svelte";
     import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
     import LoreBook from "./LoreBook/LoreBookSetting.svelte";
     import { alertConfirm, alertError, alertNormal, alertSelectChar, alertTOS } from "../../ts/alert";
diff --git a/src/lib/SideBars/LoreBook/LoreBookData.svelte b/src/lib/SideBars/LoreBook/LoreBookData.svelte
index fc7ba4f5..fa438c38 100644
--- a/src/lib/SideBars/LoreBook/LoreBookData.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookData.svelte
@@ -3,7 +3,7 @@
     import { language } from "../../../lang";
     import type { loreBook } from "../../../ts/storage/database";
     import { alertConfirm } from "../../../ts/alert";
-    import Check from "../../UI/GUI/Check.svelte";
+    import Check from "../../UI/GUI/CheckInput.svelte";
     import Help from "../../Others/Help.svelte";
     import TextInput from "../../UI/GUI/TextInput.svelte";
     import NumberInput from "../../UI/GUI/NumberInput.svelte";
diff --git a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
index 6f502468..97afcbe6 100644
--- a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
@@ -4,7 +4,7 @@
     import {selectedCharID} from '../../../ts/stores'
     import { DownloadIcon, FolderUpIcon, ImportIcon, PlusIcon } from "lucide-svelte";
     import { addLorebook, exportLoreBook, importLoreBook } from "../../../ts/process/lorebook";
-    import Check from "../../UI/GUI/Check.svelte";
+    import Check from "../../UI/GUI/CheckInput.svelte";
     import NumberInput from "../../UI/GUI/NumberInput.svelte";
     import LoreBookList from "./LoreBookList.svelte";
 
diff --git a/src/lib/SideBars/Regex/RegexData.svelte b/src/lib/SideBars/Regex/RegexData.svelte
index 4e5f1d9a..c3dff92b 100644
--- a/src/lib/SideBars/Regex/RegexData.svelte
+++ b/src/lib/SideBars/Regex/RegexData.svelte
@@ -3,7 +3,7 @@
     import { language } from "src/lang";
     import { alertConfirm } from "src/ts/alert";
     import type { customscript } from "src/ts/storage/database";
-    import Check from "../../UI/GUI/Check.svelte";
+    import Check from "../../UI/GUI/CheckInput.svelte";
     import TextInput from "../../UI/GUI/TextInput.svelte";
     import SelectInput from "../../UI/GUI/SelectInput.svelte";
     import OptionInput from "../../UI/GUI/OptionInput.svelte";
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
new file mode 100644
index 00000000..9940bfe6
--- /dev/null
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import type { character, groupChat } from "src/ts/storage/database";
+    import { DataBase } from "src/ts/storage/database";
+    import TextInput from "../UI/GUI/TextInput.svelte";
+    import { DownloadIcon, TrashIcon } from "lucide-svelte";
+    import { exportChat } from "src/ts/characters";
+    import { alertConfirm, alertError } from "src/ts/alert";
+    import { language } from "src/lang";
+    import Button from "../UI/GUI/Button.svelte";
+    import { findCharacterbyId } from "src/ts/util";
+    import CheckInput from "../UI/GUI/CheckInput.svelte";
+    export let chara:character|groupChat
+    let editMode = false
+</script>
+<div class="flex flex-col w-full h-[calc(100%-2rem)] max-h-[calc(100%-2rem)]">
+
+    <Button className="relative bottom-2" on:click={() => {
+        const cha = chara
+        const len = chara.chats.length
+        let chats = chara.chats
+        chats.unshift({
+            message:[], note:'', name:`New Chat ${len + 1}`, localLore:[]
+        })
+        if(cha.type === 'group'){
+            cha.characters.map((c) => {
+                chats[len].message.push({
+                    saying: c,
+                    role: 'char',
+                    data: findCharacterbyId(c).firstMessage
+                })
+            })
+        }
+        chara.chats = chats
+        chara.chatPage = 0
+    }}>New Chat</Button>
+    <div class="flex flex-col w-full mt-2 overflow-y-auto flex-grow">
+    
+        {#each chara.chats as chat, i}
+        <button on:click={() => {
+            if(!editMode){
+                chara.chatPage = i
+            }
+        }} class="flex items-center text-neutral-200  border-solid border-0 border-gray-600 p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
+            {#if editMode}
+                <TextInput bind:value={chara.chats[i].name} padding={false}/>
+            {:else}
+                <span>{chat.name}</span>
+            {/if}
+            <div class="flex-grow flex justify-end">
+                <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
+                    e.stopPropagation()
+                    exportChat(i)
+                }}>
+                    <DownloadIcon size={18}/>
+                </button>
+                <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    e.stopPropagation()
+                    if(chara.chats.length === 1){
+                        alertError(language.errors.onlyOneChat)
+                        return
+                    }
+                    const d = await alertConfirm(`${language.removeConfirm}${chat.name}`)
+                    if(d){
+                        chara.chatPage = 0
+                        let chats = chara.chats
+                        chats.splice(i, 1)
+                        chara.chats = chats
+                    }
+                }}>
+                    <TrashIcon size={18}/>
+                </button>
+            </div>
+        </button>
+    {/each}
+    </div>
+    <div class="border-t border-selected mt-2">
+        <div class="flex mt-2 items-center">
+            <CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
+        </div>
+        
+        {#if $DataBase.supaMemoryType !== 'none'}
+            <div class="flex mt-2 items-center">
+                <CheckInput bind:check={chara.supaMemory} name={language.ToggleSuperMemory}/>
+            </div>
+        {/if}
+    </div>
+
+    {#if chara.type === 'group'}
+        <div class="flex mt-2 items-center">
+            <CheckInput bind:check={chara.orderByOrder} name={language.orderByOrder}/>
+        </div>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index e4ecd2eb..e866a9d6 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import {
     CharEmotion,
-    SizeStore,
+    DynamicGUI,
+    botMakerMode,
     selectedCharID,
     settingsOpen,
     sideBarStore,
@@ -41,6 +42,7 @@
   import Button from "../UI/GUI/Button.svelte";
   import { fly } from "svelte/transition";
   import { alertInput, alertSelect } from "src/ts/alert";
+  import SideChatList from "./SideChatList.svelte";
   let openPresetList = false;
   let sideBarMode = 0;
   let editMode = false;
@@ -581,7 +583,7 @@
   class="setting-area flex w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200 max-h-full"
   class:risu-sidebar={!closing}
   class:risu-sidebar-close={closing}
-  class:minw96={$SizeStore.w > 1028}
+  class:minw96={!$DynamicGUI}
   on:animationend={() => {
     if(closing){
       closing = false
@@ -598,7 +600,7 @@
       closing = true;
     }}
   >
-    <button class="border-none bg-transparent p-0 text-gray-200"><X /></button>
+    <!-- <button class="border-none bg-transparent p-0 text-gray-200"><X /></button> -->
   </button>
   {#if sideBarMode === 0}
     {#if $selectedCharID < 0 || $settingsOpen}
@@ -607,7 +609,15 @@
         <span class="text-xs text-gray-400">Select a bot to start chating</span>
       </div>
     {:else}
-      <CharConfig />
+      <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-gray-500={$botMakerMode}>Chat</button>
+        <button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-gray-500={!$botMakerMode}>Bot</button>
+      </div>
+      {#if $botMakerMode}
+        <CharConfig />
+      {:else}
+        <SideChatList bind:chara={ $DataBase.characters[$selectedCharID]} />
+      {/if}
     {/if}
   {:else if sideBarMode === 1}
     <Button
@@ -645,8 +655,13 @@
   />
 {/if}
 
-{#if $SizeStore.w <= 1028}
-    <div class="flex-grow h-full"
+{#if $DynamicGUI}
+    <div class="flex-grow h-full min-w-12" on:click={() => {
+      if(closing){
+        return
+      }
+      closing = true;
+    }}
       class:sidebar-dark-animation={!closing}
       class:sidebar-dark-close-animation={closing}>
 
@@ -664,24 +679,18 @@
   @keyframes sidebar-transition {
     from {
       width: 0rem;
-      min-width: 0rem;
     }
     to {
       width: 24rem;
-      min-width: 24rem;
     }
   }
   @keyframes sidebar-transition-close {
     from {
       width: 24rem;
-      min-width: 24rem;
-      max-width: 24rem;
       right:0rem;
     }
     to {
       width: 0rem;
-      min-width: 0rem;
-      max-width: 0rem;
       right: 10rem;
     }
   }
diff --git a/src/lib/UI/GUI/Check.svelte b/src/lib/UI/GUI/CheckInput.svelte
similarity index 66%
rename from src/lib/UI/GUI/Check.svelte
rename to src/lib/UI/GUI/CheckInput.svelte
index 9320c8b4..7a14c062 100644
--- a/src/lib/UI/GUI/Check.svelte
+++ b/src/lib/UI/GUI/CheckInput.svelte
@@ -8,22 +8,6 @@
     export let hiddenName = false
 </script>
 
-<!-- <label title={name} class:mr-2={margin} class="flex relative">
-    <input title={name} type="checkbox" class='absolute opacity-0 w-6 h-6' bind:checked={check} on:change={() => {
-        onChange(check)
-    }}/>
-    {#if check}
-        <div class="w-6 h-6 bg-green-500 flex justify-center items-center text-sm">
-            <CheckIcon />
-        </div>
-    {:else}
-        <div class="w-6 h-6 bg-selected flex justify-center items-center text-sm"/>
-    {/if}
-    {#if name != '' && !hiddenName}
-        <span class="text-neutral-200 ml-2">{name}</span>
-    {/if}
-</label> -->
-
 <label 
     class="flex items-center space-x-2 cursor-pointer text-white"
     class:mr-2={margin}
diff --git a/src/lib/UI/GUI/SideBarArrow.svelte b/src/lib/UI/GUI/SideBarArrow.svelte
new file mode 100644
index 00000000..b22854c7
--- /dev/null
+++ b/src/lib/UI/GUI/SideBarArrow.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { ArrowLeft, ArrowRight } from "lucide-svelte";
+  import { DynamicGUI, sideBarStore } from "src/ts/stores";
+
+</script>
+
+{#if $sideBarStore && !$DynamicGUI}
+    <button on:click={() => {sideBarStore.set(false)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 z-20">
+        <ArrowLeft />
+    </button>
+{:else}
+    <button on:click={() => {sideBarStore.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 opacity-50 hover:opacity-90 z-20">
+        <ArrowRight />
+    </button>
+{/if}
\ No newline at end of file
diff --git a/src/ts/parser.ts b/src/ts/parser.ts
index 6e1a1905..b0ffde3a 100644
--- a/src/ts/parser.ts
+++ b/src/ts/parser.ts
@@ -524,12 +524,17 @@ const blockMatcher = (p1:string,matcherArg:matcherArg) => {
     const content = p1.substring(bn + 1)
     const statement = logic.split(" ", 2)
 
-
-    if(["","0","-1"].includes(statement[1])){
-        return ''
+    switch(statement[0]){
+        case 'if':{
+            if(["","0","-1"].includes(statement[1])){
+                return ''
+            }
+        
+            return content.trim()
+        }
     }
 
-    return content.trim()
+    return null
 
 
 }
@@ -562,6 +567,7 @@ export function risuChatParser(da:string, arg:{
     let nested:string[] = [""]
     let pf = performance.now()
     let v = new Uint8Array(512)
+    let pureMode = false
     const matcherObj = {
         chatID: chatID,
         chara: chara,
@@ -603,7 +609,7 @@ export function risuChatParser(da:string, arg:{
                 }
                 pointer++
                 const dat = nested.shift()
-                const mc = matcher(dat, matcherObj)
+                const mc = (pureMode) ? null :matcher(dat, matcherObj)
                 nested[0] += mc ?? `{{${dat}}}`
                 break
             }
@@ -612,8 +618,21 @@ export function risuChatParser(da:string, arg:{
                     break
                 }
                 const dat = nested.shift()
-                const mc = smMatcher(dat, matcherObj)
-                nested[0] += mc ?? `<${dat}>`
+                switch(dat){
+                    case 'Pure':{
+                        pureMode = true
+                        break
+                    }
+                    case '/Pure':{
+                        pureMode = false
+                        break
+                    }
+                    default:{
+                        const mc = (pureMode) ? null : smMatcher(dat, matcherObj)
+                        nested[0] += mc ?? `<${dat}>`
+                        break
+                    }
+                }
                 break
             }
             default:{
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
index d69b4013..1f95ad96 100644
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -39,7 +39,7 @@ interface fetchLog{
 
 let fetchLog:fetchLog[] = []
 
-export async function downloadFile(name:string, data:Uint8Array) {
+export async function downloadFile(name:string, data:Uint8Array|ArrayBuffer) {
     const downloadURL = (data:string, fileName:string) => {
         const a = document.createElement('a')
         a.href = data
diff --git a/src/ts/stores.ts b/src/ts/stores.ts
index 56176601..cd59d9eb 100644
--- a/src/ts/stores.ts
+++ b/src/ts/stores.ts
@@ -5,17 +5,20 @@ function updateSize(){
         w: window.innerWidth,
         h: window.innerHeight
     })
+    DynamicGUI.set(window.innerWidth <= 1024)
 }
 
 export const SizeStore = writable({
     w: 0,
     h: 0
 })
+export const DynamicGUI = writable(false)
 export const sideBarStore = writable(window.innerWidth > 1024)
 export const selectedCharID = writable(-1)
 export const CharEmotion = writable({} as {[key:string]: [string, string, number][]})
 export const ViewBoxsize = writable({ width: 12 * 16, height: 12 * 16 }); // Default width and height in pixels
 export const settingsOpen = writable(false)
+export const botMakerMode = writable(false)
 
 updateSize()
 window.addEventListener("resize", updateSize);
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 20fe7fa4..697fe8c8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,10 +14,15 @@ export default {
           draculared: "#ff5555"
       },
       minWidth: {
+        '2': '0.5rem',
+        '8': '2rem',
+        '12': '3rem',
         '20': '5rem',
         '14': '3.5rem',
         'half': '50%',
-        '5': '1.25rem'
+        '5': '1.25rem',
+        '6': '1.5rem',
+
       },
       maxWidth:{
         'half': '50%',
@@ -36,6 +41,7 @@ export default {
         '3xl': '72rem',
       },
       minHeight:{
+        '2': '0.5rem',
         '8': '2rem',
         '5': '1.25rem',
         '14': '3.5rem',