Add branches

src/lib/Others/AlertComp.svelte

@@ -21,12 +21,20 @@
     import ModuleChatMenu from "../Setting/Pages/Module/ModuleChatMenu.svelte";
     import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
     import Help from "./Help.svelte";
+    import { getChatBranches } from "src/ts/gui/branches";
+  import { getCurrentCharacter } from "src/ts/storage/database.svelte";
+  import { message } from "@tauri-apps/plugin-dialog";
     let btn
     let input = $state('')
     let cardExportType = $state('realm')
     let cardExportType2 = $state('')
     let cardLicense = $state('')
     let generationInfoMenuIndex = $state(0)
+    let branchHover:null|{
+        x:number,
+        y:number,
+        content:string,
+    } = $state(null)
     $effect.pre(() => {
         if(btn){
             btn.focus()
@@ -34,6 +42,9 @@
         if($alertStore.type !== 'input'){
             input = ''
         }
+        if($alertStore.type !== 'branches'){
+            branchHover = null
+        }
         if($alertStore.type !== 'cardexport'){
             cardExportType = 'realm'
             cardExportType2 = ''
@@ -69,7 +80,7 @@
     }
 }}></svelte:window>
 
-{#if $alertStore.type !== 'none' &&  $alertStore.type !== 'toast' &&  $alertStore.type !== 'cardexport' && $alertStore.type !== 'selectModule' && $alertStore.type !== 'pukmakkurit'}
+{#if $alertStore.type !== 'none' &&  $alertStore.type !== 'toast' &&  $alertStore.type !== 'cardexport' && $alertStore.type !== 'branches' && $alertStore.type !== 'selectModule' && $alertStore.type !== 'pukmakkurit'}
     <div class="absolute w-full h-full z-50 bg-black bg-opacity-50 flex justify-center items-center" class:vis={ $alertStore.type === 'wait2'}>
         <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl  max-h-full overflow-y-auto">
             {#if $alertStore.type === 'error'}
@@ -551,7 +562,78 @@
 
         </div>
     </div>
+{:else if $alertStore.type === 'branches'}
+    <div class="absolute w-full h-full z-50 bg-black bg-opacity-80 flex justify-center items-center overflow-x-auto overflow-y-auto">
+        {#if branchHover !== null}
+            <div class="z-30 whitespace-pre-wrap p-4 text-textcolor bg-darkbg border-darkborderc border rounded-md absolute text-white" style="top: {branchHover.y * 80 + 24}px; left: {(branchHover.x + 1) * 80 + 24}px">
+                {branchHover.content}
+            </div>
+        {/if}
 
+        <div class="x-50 right-2 top-2 absolute">
+            <button class="bg-darkbg border-darkborderc border p-2 rounded-md" onclick={() => {
+                alertStore.set({
+                    type: 'none',
+                    msg: ''
+                })
+            }}>
+                <XIcon />
+            </button>
+        </div>
+
+        {#each getChatBranches() as obj}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+            <div
+                role="table"
+                class="peer w-12 h-12 z-20 bg-bgcolor border border-darkborderc rounded-full flex justify-center items-center overflow-y-auto absolute"
+                style="top: {obj.y * 80 + 24}px; left: {obj.x * 80 + 24}px"
+                onmouseenter={() => {
+                    if(branchHover === null){
+                        const char = getCurrentCharacter()
+                        branchHover = {
+                            x: obj.x,
+                            y: obj.y,
+                            content: char.chats[obj.chatId].message[obj.y - 1].data
+                        }
+                    }
+                }}
+                onclick={() => {
+                    if(branchHover === null){
+                        const char = getCurrentCharacter()
+                        branchHover = {
+                            x: obj.x,
+                            y: obj.y,
+                            content: char.chats[obj.chatId].message[obj.y - 1].data
+                        }
+                    }
+                }}
+                onmouseleave={() => {
+                    branchHover = null
+                }}
+            >
+                
+            </div>
+            {#if obj.connectX === obj.x}
+                {#if obj.multiChild}
+                    <div class="w-0 h-20 border-x border-x-red-500 absolute" style="top: {(obj.y-1) * 80 + 24}px; left: {obj.x * 80 + 45}px">
+
+                    </div>
+                {:else}
+                    <div class="w-0 h-20 border-x border-x-blue-500 absolute" style="top: {(obj.y-1) * 80 + 24}px; left: {obj.x * 80 + 45}px">
+
+                    </div>
+                {/if}
+            {:else if obj.connectX !== -1}
+                <div class="w-0 h-10 border-x border-x-red-500 absolute" style="top: {(obj.y) * 80}px; left: {obj.x * 80 + 45}px">
+
+                </div>
+                <div class="h-0 border-y border-y-red-500 absolute" style="top: {(obj.y) * 80}px; left: {obj.connectX * 80 + 46}px" style:width={Math.abs((obj.x - obj.connectX) * 80) + 'px'}>
+
+                </div>
+            {/if}
+        {/each}
+    </div>
 {/if}
 
 <style>

src/lib/SideBars/SideChatList.svelte

@@ -3,9 +3,9 @@
     
     import { DBState } from 'src/ts/stores.svelte';
     import TextInput from "../UI/GUI/TextInput.svelte";
-    import { DownloadIcon, PencilIcon, FolderUpIcon, MenuIcon, TrashIcon } from "lucide-svelte";
+    import { DownloadIcon, PencilIcon, FolderUpIcon, MenuIcon, TrashIcon, GitBranchIcon, SplitIcon } from "lucide-svelte";
     import { exportChat, importChat } from "src/ts/characters";
-    import { alertChatOptions, alertConfirm, alertError, alertNormal, alertSelect } from "src/ts/alert";
+    import { alertChatOptions, alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "src/ts/alert";
     import { language } from "src/lang";
     import Button from "../UI/GUI/Button.svelte";
     import { findCharacterbyId, parseKeyValue, sleep, sortableOptions } from "src/ts/util";
@@ -15,6 +15,7 @@
     import Sortable from 'sortablejs/modular/sortable.core.esm.js';
     import { onDestroy, onMount } from "svelte";
     import { v4 } from "uuid";
+  import { getChatBranches } from "src/ts/gui/branches";
 
   interface Props {
     chara: character|groupChat;
@@ -202,11 +203,19 @@
             }}>
                 <FolderUpIcon size={18}/>
             </button>
-            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={() => {
+            <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" onclick={() => {
                 editMode = !editMode
             }}>
                 <PencilIcon size={18}/>
             </button>
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={() => {
+                alertStore.set({
+                  type: "branches",
+                  msg: ""
+                })
+            }}>
+                <SplitIcon size={18}/>
+            </button>
         </div>
 
         {#if DBState.db.characters[$selectedCharID]?.chaId !== '§playground'}