Update to 0.8.1 (#46)

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "RisuAI",
-    "version": "0.8.0"
+    "version": "0.8.1"
   },
   "tauri": {
     "allowlist": {

src/lang/en.ts

@@ -72,7 +72,6 @@ export const languageEnglish = {
         scenario: "A brief description about character's scenario. \n\n**It is not recommended to use this option. Describe it in character description instead.**",
         utilityBot: "When activated, it ignores main prompt. \n\n**It is not recommended to use this option. Modifiy system prompt instead.**",
         loreSelective: "If Selective mode is toggled, both Activation Key and Secondary key should have a match to activate the lore."
-
     },
     setup: {
         chooseProvider: "Choose AI Provider",
@@ -240,5 +239,7 @@ export const languageEnglish = {
     selective: "Selective",
     SecondaryKeys: 'Secondary keys',
     useGlobalSettings: "Use Global Settings",
-    recursiveScanning: "Recursive Scanning"
+    recursiveScanning: "Recursive Scanning",
+    creator: "Creator",
+    CharVersion: "Character Version"
 }

src/lib/SideBars/BarIcon.svelte

@@ -1,13 +1,16 @@
+<!-- TODO: REMOVE AND REFACTOR TO BASE BUTTON UI COMPONENT -->
+
+<script lang="ts">
+  export let onClick = () => {};
+  export let additionalStyle: string | Promise<string> = "";
+</script>
 
 {#await additionalStyle}
   <button on:click={onClick} class="ico"><slot /></button>
 {:then as}
   <button on:click={onClick} class="ico" style={as}><slot /></button>
 {/await}
-<script lang="ts">
+
-    export let onClick = () => {}
-    export let additionalStyle:string|Promise<string> = ''
-</script>
 <style>
   .ico {
     cursor: pointer;
@@ -15,13 +18,16 @@
     height: 3.5rem;
     width: 3.5rem;
     min-height: 3.5rem;
-        margin-top: 0.5rem;
     --tw-shadow-color: 0, 0, 0;
-        --tw-shadow: 0 10px 15px -3px rgba(var(--tw-shadow-color), 0.1), 0 4px 6px -2px rgba(var(--tw-shadow-color), 0.05);
+    --tw-shadow: 0 10px 15px -3px rgba(var(--tw-shadow-color), 0.1),
-        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+      0 4px 6px -2px rgba(var(--tw-shadow-color), 0.05);
-        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-bg-opacity: 1;
-        background-color: rgba(107, 114, 128, var(--tw-bg-opacity));        display: flex;
+    background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
+    display: flex;
     justify-content: center;
     align-items: center;
     transition-property: background-color, border-color, color, fill, stroke;

src/lib/SideBars/CharConfig.svelte

@@ -472,6 +472,12 @@
             <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.scenario}></textarea>
         {/if}
 
+        <span class="text-neutral-200">{language.creator}</span>
+        <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
+
+        <span class="text-neutral-200">{language.CharVersion}</span>
+        <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.additionalData.character_version} type="number" />
+
         <span class="text-neutral-200 mt-2">{language.altGreet}</span>
         <table class="contain w-full max-w-full tabler mt-2">
             <tr>
@@ -514,7 +520,6 @@
             {/each}
         </table>
       
-      
         {#if $DataBase.showUnrecommended || currentChar.data.utilityBot}
             <div class="flex items-center mt-4">
                 <Check bind:check={currentChar.data.utilityBot}/>

src/lib/SideBars/Sidebar.svelte

@@ -1,144 +1,228 @@
 <script lang="ts">
-    import { CharEmotion, SizeStore, selectedCharID, settingsOpen, sideBarStore } from "../../ts/stores";
+  import {
+    CharEmotion,
+    SizeStore,
+    selectedCharID,
+    settingsOpen,
+    sideBarStore,
+  } from "../../ts/stores";
   import { DataBase } from "../../ts/database";
   import BarIcon from "./BarIcon.svelte";
-    import { Plus, User, X, Settings, Users, Edit3Icon, ArrowUp, ArrowDown, ListIcon, LayoutGridIcon, PlusIcon} from 'lucide-svelte'
+  import SidebarIndicator from "./SidebarIndicator.svelte";
-    import { characterFormatUpdate, createNewCharacter, createNewGroup, getCharImage } from "../../ts/characters";
+  import {
-    import {importCharacter} from 'src/ts/characterCards'
+    Plus,
-    import SettingsDom from './Settings.svelte'
+    User,
+    X,
+    Settings,
+    Users,
+    Edit3Icon,
+    ArrowUp,
+    ArrowDown,
+    ListIcon,
+    LayoutGridIcon,
+    PlusIcon,
+  } from "lucide-svelte";
+  import {
+    characterFormatUpdate,
+    createNewCharacter,
+    createNewGroup,
+    getCharImage,
+  } from "../../ts/characters";
+  import { importCharacter } from "src/ts/characterCards";
+  import SettingsDom from "./Settings.svelte";
   import CharConfig from "./CharConfig.svelte";
   import { language } from "../../lang";
   import Botpreset from "../Others/botpreset.svelte";
   import { onDestroy } from "svelte";
-    import {isEqual} from 'lodash'
+  import { isEqual } from "lodash";
-    let openPresetList =false
+  import SidebarAvatar from "./SidebarAvatar.svelte";
-    let sideBarMode = 0
+  import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
-    let editMode = false
+  let openPresetList = false;
-    let menuMode = 0
+  let sideBarMode = 0;
-    export let openGrid = () => {}
+  let editMode = false;
-
+  let menuMode = 0;
+  export let openGrid = () => {};
 
   function createScratch() {
     reseter();
-        const cid = createNewCharacter()
+    const cid = createNewCharacter();
-        selectedCharID.set(-1)
+    selectedCharID.set(-1);
   }
   function createGroup() {
     reseter();
-        const cid = createNewGroup()
+    const cid = createNewGroup();
-        selectedCharID.set(-1)
+    selectedCharID.set(-1);
   }
   async function createImport() {
     reseter();
-        const cid = await importCharacter()
+    const cid = await importCharacter();
-        selectedCharID.set(-1)
+    selectedCharID.set(-1);
   }
 
   function changeChar(index: number) {
     reseter();
-        characterFormatUpdate(index)
+    characterFormatUpdate(index);
-        selectedCharID.set(index)
+    selectedCharID.set(index);
   }
 
   function reseter() {
     menuMode = 0;
     sideBarMode = 0;
-        editMode = false
+    editMode = false;
-        settingsOpen.set(false)
+    settingsOpen.set(false);
-        CharEmotion.set({})
+    CharEmotion.set({});
   }
 
-    let charImages:string[] = []
+  let charImages: string[] = [];
 
   const unsub = DataBase.subscribe((db) => {
-        let newCharImages:string[] = []
+    let newCharImages: string[] = [];
     for (const cha of db.characters) {
-            newCharImages.push(cha.image ?? '')
+      newCharImages.push(cha.image ?? "");
     }
     if (!isEqual(charImages, newCharImages)) {
-            charImages = newCharImages
+      charImages = newCharImages;
     }
-    })
+  });
-
-
-    onDestroy(unsub)
 
+  onDestroy(unsub);
 </script>
-<div class="w-20 flex flex-col bg-bgcolor text-white items-center overflow-y-scroll h-full shadow-lg min-w-20 overflow-x-hidden"
+
-    class:editMode={editMode}>
+<div
-    <button class="bg-gray-500 w-14 min-w-14 flex justify-center h-8 items-center rounded-b-md cursor-pointer hover:bg-green-500 transition-colors absolute top-0" on:click={() => {
+  class="flex h-full w-20 min-w-20 flex-col items-center overflow-x-hidden overflow-y-scroll bg-bgcolor text-white shadow-lg gap-2"
-        menuMode = 1 - menuMode
+  class:editMode
-    }}><ListIcon/></button>
+>
-    <div class="w-14 min-w-14 h-8 min-h-8 bg-transparent"></div>
+  <button
+    class="absolute top-0 flex h-8 w-14 min-w-14 cursor-pointer items-center justify-center rounded-b-md bg-gray-500 transition-colors hover:bg-green-500"
+    on:click={() => {
+      menuMode = 1 - menuMode;
+    }}><ListIcon /></button
+  >
+  <div class="h-8 min-h-8 w-14 min-w-14 bg-transparent" />
   {#if menuMode === 0}
     {#each charImages as charimg, i}
-        <div class="flex items-center">
+      <div class="group relative flex items-center px-2">
-            {#if charimg !== ''}
+        <SidebarIndicator
-                <BarIcon onClick={() => {changeChar(i)}} additionalStyle={getCharImage($DataBase.characters[i].image, 'css')}>
+          isActive={$selectedCharID === i && sideBarMode !== 1}
-                </BarIcon>
+        />
+        {#if charimg !== ""}
+          <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+          <div
+            on:click={() => {
+              changeChar(i);
+            }}
+            on:keydown={(e) => {
+              if (e.key === "Enter") {
+                changeChar(i);
+              }
+            }}
+            tabindex="0"
+          >
+            <SidebarAvatar src={getCharImage($DataBase.characters[i].image, "plain")} size="56" />
+          </div>
         {:else}
-                <BarIcon onClick={() => {changeChar(i)}} additionalStyle={i === $selectedCharID ? 'background:#44475a' : ''}>
+          <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-
+          <div
-                </BarIcon>
+            on:click={() => {
+              changeChar(i);
+            }}
+            on:keydown={(e) => {
+              if (e.key === "Enter") {
+                changeChar(i);
+              }
+            }}
+            tabindex="0"
+          >
+            <SidebarAvatar size="56" src="https://via.placeholder.com/150" />
+          </div>
         {/if}
         {#if editMode}
-                <div class="flex flex-col mt-2">
+          <div class="mt-2 flex flex-col">
-                    <button on:click={() => {
+            <button
-                        let chars = $DataBase.characters
+              on:click={() => {
+                let chars = $DataBase.characters;
                 if (chars[i - 1]) {
-                            const currentchar = chars[i]
+                  const currentchar = chars[i];
-                            chars[i] = chars[i-1]
+                  chars[i] = chars[i - 1];
-                            chars[i-1] = currentchar
+                  chars[i - 1] = currentchar;
-                            $DataBase.characters = chars
+                  $DataBase.characters = chars;
                 }
-                    }}>
+              }}
+            >
               <ArrowUp size={20} />
             </button>
-                    <button on:click={() => {
+            <button
-                        let chars = $DataBase.characters
+              on:click={() => {
+                let chars = $DataBase.characters;
                 if (chars[i + 1]) {
-                            const currentchar = chars[i]
+                  const currentchar = chars[i];
-                            chars[i] = chars[i+1]
+                  chars[i] = chars[i + 1];
-                            chars[i+1] = currentchar
+                  chars[i + 1] = currentchar;
-                            $DataBase.characters = chars
+                  $DataBase.characters = chars;
                 }
-                    }}>
+              }}
+            >
               <ArrowDown size={22} />
             </button>
           </div>
         {/if}
       </div>
     {/each}
-    <BarIcon onClick={() => {
+    <div class="flex flex-col items-center space-y-2 px-2">
+      <BaseRoundedButton
+        onClick={() => {
           if (sideBarMode === 1) {
             reseter();
-            sideBarMode = 0
+            sideBarMode = 0;
-        }
+          } else {
-        else{
             reseter();
-            sideBarMode = 1
+            sideBarMode = 1;
           }
-    }}><PlusIcon/></BarIcon>
+        }}
+        ><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
+          ><path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+          /></svg
+        ></BaseRoundedButton
+      >
+    </div>
   {:else}
-        <BarIcon onClick={() => {
+    <BarIcon
+      onClick={() => {
         if ($settingsOpen) {
           reseter();
-                settingsOpen.set(false)
+          settingsOpen.set(false);
-            }
+        } else {
-            else{
           reseter();
-                settingsOpen.set(true)
+          settingsOpen.set(true);
         }
-        }}><Settings/></BarIcon>
+      }}><Settings /></BarIcon
-        <BarIcon onClick={() => {
+    >
+    <BarIcon
+      onClick={() => {
         reseter();
-            openGrid()
+        openGrid();
-        }}><LayoutGridIcon/></BarIcon>
+      }}><LayoutGridIcon /></BarIcon
+    >
   {/if}
 </div>
-<div class="w-96 p-6 flex flex-col bg-darkbg text-gray-200 overflow-y-auto overflow-x-hidden setting-area" class:flex-grow={($SizeStore.w <= 1000)} class:minw96={($SizeStore.w > 1000)}>
+<div
-    <button class="flex w-full justify-end text-gray-200" on:click={() => {sideBarStore.set(false)}}>
+  class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200"
-        <button class="p-0 bg-transparent border-none text-gray-200"><X/></button>
+  class:flex-grow={$SizeStore.w <= 1000}
+  class:minw96={$SizeStore.w > 1000}
+>
+  <button
+    class="flex w-full justify-end text-gray-200"
+    on:click={() => {
+      sideBarStore.set(false);
+    }}
+  >
+    <button class="border-none bg-transparent p-0 text-gray-200"><X /></button>
   </button>
   {#if sideBarMode === 0}
     {#if $selectedCharID < 0 || $settingsOpen}
@@ -147,31 +231,46 @@
       <CharConfig />
     {/if}
   {:else if sideBarMode === 1}
-        <h2 class="title font-bold text-xl mt-2">Create</h2>
+    <h2 class="title mt-2 text-xl font-bold">Create</h2>
     <button
       on:click={createScratch}
-            class="drop-shadow-lg p-5 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-lg">
+      class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-5 text-lg drop-shadow-lg hover:bg-selected"
+    >
       {language.createfromScratch}
     </button>
     <button
       on:click={createImport}
-            class="drop-shadow-lg p-5 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-lg">
+      class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-5 text-lg drop-shadow-lg hover:bg-selected"
+    >
       {language.importCharacter}
     </button>
     <button
       on:click={createGroup}
-            class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
+      class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-3 drop-shadow-lg hover:bg-selected"
+    >
       {language.createGroup}
     </button>
-        <h2 class="title font-bold text-xl mt-4">Edit</h2>
+    <h2 class="title mt-4 text-xl font-bold">Edit</h2>
     <button
-            on:click={() => {editMode = !editMode;$selectedCharID = -1}}
+      on:click={() => {
-            class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
+        editMode = !editMode;
+        $selectedCharID = -1;
+      }}
+      class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-3 drop-shadow-lg hover:bg-selected"
+    >
       {language.editOrder}
     </button>
   {/if}
 </div>
 
+{#if openPresetList}
+  <Botpreset
+    close={() => {
+      openPresetList = false;
+    }}
+  />
+{/if}
+
 <style>
   .minw96 {
     min-width: 24rem; /* 384px */
@@ -183,7 +282,3 @@
     min-width: 6rem;
   }
 </style>
-
-{#if openPresetList}
-    <Botpreset close={() => {openPresetList = false}}/>
-{/if}

src/lib/SideBars/SidebarAvatar.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  export let src:string|Promise<string>;
+  export let size = "22";
+</script>
+
+<span class="flex shrink-0 items-center justify-center">
+  {#if src}
+    {#await src}
+      <div
+        class="bg-skin-border sidebar-avatar rounded-md bg-top"
+        style:width={size + "px"}
+        style:height={size + "px"}
+        style:minWidth={size + "px"}
+      />
+    {:then img}
+      <img
+        src={img}
+        class="bg-skin-border sidebar-avatar rounded-md object-cover object-top"
+        style:width={size + "px"}
+        style:height={size + "px"}
+        style:minWidth={size + "px"}
+        alt="avatar"
+      />
+    {/await}
+  {:else}
+    <div
+      class="bg-skin-border sidebar-avatar rounded-md bg-top"
+      style:width={size + "px"}
+      style:height={size + "px"}
+      style:minWidth={size + "px"}
+    />
+  {/if}
+</span>

src/lib/SideBars/SidebarIndicator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let isActive: boolean;
+</script>
+
+<div
+  class="
+      group-hover:bg-white
+      absolute
+      left-[-4px]
+      h-[8px]
+      w-[8px]
+      rounded-full
+      transition-all
+      duration-300
+      {isActive ? 'bg-white !h-[20px]' : 'group-hover:h-[10px]'}
+    "
+/>

src/lib/UI/BaseRoundedButton.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let isDisabled: boolean = false;
+  export let onClick: () => void;
+</script>
+
+<button
+  disabled={isDisabled}
+  on:click={onClick}
+  class="flex h-[56px] w-[56px] cursor-pointer select-none items-center justify-center
+   transition-colors rounded-full
+   border border-gray-500 text-gray-300
+   hover:border-gray-300 
+   {isDisabled ? '!cursor-not-allowed' : ''}"
+>
+  <slot />
+</button>

src/ts/characters.ts

@@ -281,6 +281,11 @@ export function characterFormatUpdate(index:number|character){
         cha.personality = cha.personality ?? ''
         cha.scenario = cha.scenario ?? ''
         cha.firstMsgIndex = cha.firstMsgIndex ?? -1
+        cha.additionalData = cha.additionalData ?? {
+            tag: [],
+            creator: '',
+            character_version: 0
+        }
 
     }
     if(checkNullish(cha.customscript)){

src/ts/database.ts

@@ -7,7 +7,7 @@ import { cloneDeep } from 'lodash';
 
 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
-export let appVer = '0.8.0'
+export let appVer = '0.8.1'
 
 
 export function setDatabase(data:Database){

src/ts/process/index.ts

@@ -120,10 +120,12 @@ export async function sendChat(chatProcessIndex = -1):Promise<boolean> {
         })
     }
 
+    if(currentChat.note !== ''){
         unformated.authorNote.push({
             role: 'system',
-        content: replacePlaceholders(currentChat.note, currentChar.name)
+            content: replacePlaceholders(currentChar.postHistoryInstructions, currentChat.note)
         })
+    }
 
     if(currentChar.postHistoryInstructions !== ''){
         unformated.authorNote.push({
@@ -169,15 +171,19 @@ export async function sendChat(chatProcessIndex = -1):Promise<boolean> {
         content: '[Start a new chat]'
     })
 
+    if(nowChatroom.type !== 'group'){
+        const firstMsg = nowChatroom.firstMsgIndex === -1 ? nowChatroom.firstMessage : nowChatroom.alternateGreetings[nowChatroom.firstMsgIndex]
+
         chats.push({
             role: 'assistant',
             content: processScript(currentChar,
-            replacePlaceholders(nowChatroom.firstMessage, currentChar.name),
+                replacePlaceholders(firstMsg, currentChar.name),
             'editprocess')
         })
         currentTokens += await tokenize(processScript(currentChar,
-        replacePlaceholders(nowChatroom.firstMessage, currentChar.name),
+            replacePlaceholders(firstMsg, currentChar.name),
         'editprocess'))
+    }
 
     const ms = currentChat.message
     for(const msg of ms){

version.json

@@ -1 +1 @@
-{"version":"0.8.0"}
+{"version":"0.8.1"}