Update SettingsModal.svelte

This commit is contained in:
Timothy J. Baek 2023-10-22 15:37:06 -07:00
parent 4a32b00000
commit e1361e68ec

View file

@ -6,6 +6,8 @@
let system = '';
let temperature = 0.8;
let selectedMenu = 'general';
$: if (show) {
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
system = settings.system ?? '';
@ -37,7 +39,65 @@
</div>
<hr class=" border-gray-800" />
<div class="p-5 flex flex-col space-y-3">
<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
<div
class="flex flex-row space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-36 text-gray-200 text-xs text-left mb-3 md:mb-0"
>
<button
class="px-2 py-2 rounded flex-1 md:flex-none flex text-right transition {selectedMenu ===
'general'
? 'bg-gray-700'
: 'hover:bg-gray-800'}"
on:click={() => {
selectedMenu = 'general';
}}
>
<div class=" self-center mr-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center">General</div>
</button>
<button
class="px-2 py-2 rounded flex-1 md:flex-none flex text-right transition {selectedMenu ===
'models'
? 'bg-gray-700'
: 'hover:bg-gray-800'}"
on:click={() => {
selectedMenu = 'models';
}}
>
<div class=" self-center mr-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center">Models</div>
</button>
</div>
<div class="flex-1 md:min-h-[280px]">
{#if selectedMenu === 'general'}
<div class="flex flex-col space-y-3">
<div>
<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
<textarea
@ -68,7 +128,10 @@
<button
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 transition rounded"
on:click={() => {
saveSettings(system != '' ? system : null, temperature != 0.8 ? temperature : null);
saveSettings(
system != '' ? system : null,
temperature != 0.8 ? temperature : null
);
show = false;
}}
>
@ -76,5 +139,14 @@
</button>
</div>
</div>
{:else if selectedMenu === 'models'}
<div class="text-sm">
<div>
<div>Pull a model</div>
</div>
</div>
{/if}
</div>
</div>
</div>
</Modal>