refactor(quick-settings): added sliders

your-papa · Mar 13, 2024 · 55dc3a7 · 55dc3a7
1 parent 25d867d
commit 55dc3a7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 33 deletions.
diff --git a/src/components/Chat/QuickSettingsDrawer.svelte b/src/components/Chat/QuickSettingsDrawer.svelte
@@ -5,11 +5,12 @@
     import ProgressBar from '../base/ProgressBar.svelte';
     import { t } from 'svelte-i18n';
     import DropdownComponent from '../base/Dropdown.svelte';
-    import Toggle from '../base/Toggle.svelte';
+    import ToggleComponent from '../base/Toggle.svelte';
     import PullOllamaModel from '../Onboarding/PullOllamaModel.svelte';
     import LoadingAnimation from '../base/LoadingAnimation.svelte';
     import { ConfirmModal } from '../Settings/ConfirmModal';
     import { get } from 'svelte/store';
+    import SettingContainer from '../Settings/SettingContainer.svelte';
 
     const icon = (node: HTMLElement, iconId: string) => {
         setIcon(node, iconId);
@@ -36,11 +37,10 @@
         $plugin.s2b.setSimilarityThreshold(similarityThreshold / 100);
         $plugin.saveSettings();
     }
-    $: similarityThreshold, setSimilarityThreshold();
 
     let temperature = Math.round($data.isIncognitoMode ? $data.ollamaGenModel.temperature : $data.openAIGenModel.temperature) * 100;
     $: temperature = Math.min(Math.max(temperature, 0), 100);
-    function setTemperature(temperature: number) {
+    function setTemperature() {
         if ($data.isIncognitoMode) {
             $data.ollamaGenModel.temperature = temperature / 100;
             $plugin.s2b.setGenModel($data.ollamaGenModel);
@@ -50,7 +50,6 @@
         }
         $plugin.saveSettings();
     }
-    $: temperature, setTemperature(temperature);
 
     const languages: { display: Language; value: Language }[] = Object.values(Languages).map((language: Language) => ({ display: language, value: language }));
     const setAssistantLanguage = (selected: Language) => {
@@ -144,41 +143,43 @@
                     use:icon={'refresh-cw'}
                 />
             {:else if $papaState === 'settings-change'}
-                <h2 class="text-center">{$t('quick_settings.settings_change')}</h2>
+                <h2 class="text-center">{$t('quick_settings.settings_changed')}</h2>
                 <button
                     aria-label={$t('quick_settings.reinitialize')}
                     on:click={() => $plugin.s2b.init()}
                     class="h-8 rounded-l-md px-4 py-2 transition duration-300 ease-in-out hover:bg-[--text-accent-hover]"
                     use:icon={'refresh-cw'}
                 />
             {:else}
-                <div class="loader"></div>
-                {#if $data.isIncognitoMode}
-                    <h2 class="mb-0 text-center">Ollama</h2>
-                    <p class="mt-1 text-center">{$t('quick_settings.chat_via', { values: { model: $data.ollamaGenModel.model } })}</p>
-                {:else}
-                    <h2 class="mb-0 text-center">OpenAI</h2>
-                    <p class="mt-1 text-center">{$t('quick_settings.chat_via', { values: { model: $data.openAIGenModel.model } })}</p>
-                {/if}
-                <div class="w-full max-w-[220px]">
-                    <div class="mb-1 flex w-full items-center justify-between">
-                        <p class="m-0 inline-block">{$t('quick_settings.chatview')}</p>
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <!-- svelte-ignore a11y-no-static-element-interactions -->
-                        <Toggle isEnabled={$data.isChatComfy} changeFunc={setChatViewDensity} />
+                <h2 class="mb-0">{$data.isIncognitoMode ? 'Ollama' : 'OpenAI'}</h2>
+                <p class="mt-1">
+                    {$t('quick_settings.chat_via', { values: { model: $data.isIncognitoMode ? $data.ollamaGenModel.model : $data.openAIGenModel.model } })}
+                </p>
+                <div class="w-full max-w-[300px]">
+                    <div class="flex justify-between items-center h-8">
+                        {$t('quick_settings.chatview')}
+                        <ToggleComponent isEnabled={$data.isChatComfy} changeFunc={setChatViewDensity} />
                     </div>
-                    <div class="flex w-full items-center justify-between">
-                        <p class="m-0 inline-block">{$t('quick_settings.assistant_language')}</p>
+                    <div class="flex justify-between items-center h-8">
+                        {$t('quick_settings.assistant_language')}
                         <DropdownComponent selected={$data.assistantLanguage} options={languages} changeFunc={setAssistantLanguage} />
                     </div>
-                    <div class="flex w-full items-center justify-between">
-                        <p class="m-0 inline-block">{$t('quick_settings.similarity_threshold')}</p>
-                        <input type="number" bind:value={similarityThreshold} min="0" max="100" />
-                    </div>
-                    <div class="flex w-full items-center justify-between">
-                        <p class="m-0 inline-block">{$t('quick_settings.creativity')}</p>
-                        <input type="number" bind:value={temperature} min="0" max="100" />
+                    <div class="flex justify-between items-center h-8">
+                        {$t('quick_settings.creativity')}
+                        <div class="flex items-center">
+                            <output>{temperature}%</output>
+                            <input class="slider" type="range" bind:value={temperature} on:blur={setTemperature} min="0" max="100" />
+                        </div>
                     </div>
+                    {#if $data.isUsingRag}
+                        <div class="flex justify-between items-center h-8">
+                            {$t('quick_settings.similarity_threshold')}
+                            <div class="flex items-center">
+                                <output>{similarityThreshold}%</output>
+                                <input class="slider" type="range" bind:value={similarityThreshold} on:blur={setSimilarityThreshold} min="0" max="100" />
+                            </div>
+                        </div>
+                    {/if}
                 </div>
             {/if}
         {/if}

diff --git a/src/components/Onboarding/InitButton.svelte b/src/components/Onboarding/InitButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { plugin, data } from '../../store';
     import { ConfirmModal } from '../Settings/ConfirmModal';
+    import { t } from 'svelte-i18n';
     import { get } from 'svelte/store';
 
     function completeOnboarding() {
@@ -12,7 +13,7 @@
 </script>
 
 <button
-    aria-label="Initialize your Smart Second Brain"
+    aria-label={$t('onboarding.init_label')}
     class="mod-cta"
     on:click={() => {
         $data.isIncognitoMode
@@ -26,5 +27,5 @@
                   },
                   'hideIncognitoWarning'
               ).activate();
-    }}>Initialize your Smart Second Brain</button
+    }}>{$t('onboarding.init')}</button
 >
diff --git a/src/components/Onboarding/Onboarding.svelte b/src/components/Onboarding/Onboarding.svelte
@@ -22,7 +22,7 @@
     <IncognitoToggle />
     {#if $data.isIncognitoMode}
         <p class="px-10">
-            {$t('onboarding.privacy_mode_note')}}
+            {$t('onboarding.privacy_mode_note')}
         </p>
         {#if osType === 'Darwin'}
             <SliderComponent {options} bind:selected />

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -54,6 +54,8 @@
         "test": "Test",
         "privacy_mode_note": "Your assistant is running in privacy mode. That means it is not connected to the internet and is running fully locally by leveraging Ollama.",
         "openai_mode_note": "Your assistant is using third party services to run. That means you will have to share all your personal information with these services and your Smart Second Brain needs to be connected to the internet to leverage OpenAIs large language models like ChatGPT.",
+        "init": "Initialize your Smart Second Brain",
+        "init_label": "Click to initialize",
         "ollama": {
             "deamon": {
                 "install": "Install Ollama",
@@ -152,8 +154,8 @@
         "reinitialize": "Reinitialize Smart Second Brain",
         "chat_via": "Chat via {model}",
         "chatview": "Comfy Chatview",
-        "similarity_threshold": "Relevancy in %",
-        "creativity": "Creativity in %",
+        "similarity_threshold": "Relevancy",
+        "creativity": "Creativity",
         "settings_changed": "Settings changed.\nReinitialize Smart Second Brain.",
         "open": "Open quick settings",
         "close": "Close quick settings",