[feat] round icons

src/lang/en.ts

@@ -246,5 +246,6 @@ export const languageEnglish = {
     ToggleSuperMemory: "Toggle SupaMemory",
     SuperMemory:"SupaMemory",
     useExperimental: "Able Experimental Features",
-    showMemoryLimit: "Show Memory Limit"
+    showMemoryLimit: "Show Memory Limit",
+    roundIcons: "Round Icons"
 }

src/lib/ChatScreens/Chat.svelte

@@ -65,9 +65,11 @@
 <div class="flex max-w-full justify-center" class:bgc={isLastMemory}>
     <div class="text-neutral-200 mt-1 mb-1 p-2 bg-transparent flex-grow ml-4 mr-4 border-t-gray-900 border-opacity-30 border-transparent flexium items-start">
         {#await img}
-            <div class="rounded-md shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
+            <div class="shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`}
+            class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
         {:then m}
-            <div class="rounded-md shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
+            <div class="shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`}
+            class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}  />
         {/await}
         <span class="flex flex-col ml-4 w-full">
             <div class="flexium items-center chat">

src/lib/SideBars/Settings.svelte

@@ -397,6 +397,11 @@
         <span>{language.SwipeRegenerate}</span>
     </div>
 
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.roundIcons}/>
+        <span>{language.roundIcons}</span>
+    </div>
+
     <div class="flex items-center mt-2">
         <Check bind:check={$DataBase.instantRemove}/>
         <span>{language.instantRemove}</span>

src/lib/SideBars/SidebarAvatar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { DataBase } from "src/ts/database";
+
   export let src:string|Promise<string>;
   export let size = "22";
 </script>
@@ -11,6 +13,7 @@
         style:width={size + "px"}
         style:height={size + "px"}
         style:minWidth={size + "px"}
+        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} 
       />
     {:then img}
       <img
@@ -19,6 +22,7 @@
         style:width={size + "px"}
         style:height={size + "px"}
         style:minWidth={size + "px"}
+        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} 
         alt="avatar"
       />
     {/await}
@@ -28,6 +32,7 @@
       style:width={size + "px"}
       style:height={size + "px"}
       style:minWidth={size + "px"}
+      class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} 
     />
   {/if}
 </span>

src/ts/database.ts

@@ -406,6 +406,7 @@ export interface Database{
     elevenLabKey:string
     useExperimental:boolean
     showMemoryLimit:boolean
+    roundIcons:boolean
 }