feat: settings personalization tab ui

2024-05-16 14:25:48 -10:00
parent e29a999dc9
commit ba61f87a2f
3 changed files with 246 additions and 15 deletions
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { getBackendConfig } from '$lib/apis';
+	import { setDefaultPromptSuggestions } from '$lib/apis/configs';
+	import Switch from '$lib/components/common/Switch.svelte';
+	import { config, models, settings, user } from '$lib/stores';
+	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	const dispatch = createEventDispatcher();
+
+	const i18n = getContext('i18n');
+
+	export let saveSettings: Function;
+
+	// Addons
+	let enableMemory = true;
+
+	onMount(async () => {
+		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+		enableMemory = settings?.memory ?? true;
+	});
+</script>
+
+<form
+	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	on:submit|preventDefault={() => {
+		dispatch('save');
+	}}
+>
+	<div class="  pr-1.5 overflow-y-scroll max-h-[25rem]">
+		<div>
+			<div class="flex items-center justify-between mb-1">
+				<div class="text-sm font-medium">
+					{$i18n.t('Memory')} <span class=" text-xs text-gray-500">({$i18n.t('Beta')})</span>
+				</div>
+
+				<div class="mt-1">
+					<Switch
+						bind:state={enableMemory}
+						on:change={async () => {
+							saveSettings({ memory: enableMemory });
+						}}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<div class="text-xs text-gray-600 dark:text-gray-400">
+			<div>
+				LLMs will become more helpful as you chat, picking up on details and preferences to tailor
+				its responses to you.
+			</div>
+
+			<!-- <div class="mt-3">
+				To understand what LLM remembers or teach it something new, just chat with it:
+
+				<div>- “Remember that I like concise responses.”</div>
+				<div>- “I just got a puppy!”</div>
+				<div>- “What do you remember about me?”</div>
+				<div>- “Where did we leave off on my last project?”</div>
+			</div> -->
+		</div>
+
+		<div class="mt-3 mb-1 ml-1">
+			<button
+				type="button"
+				class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-gray-300 dark:outline-gray-800 rounded-3xl"
+			>
+				Manage
+			</button>
+		</div>
+	</div>
+
+	<div class="flex justify-end text-sm font-medium">
+		<button
+			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
+			type="submit"
+		>
+			{$i18n.t('Save')}
+		</button>
+	</div>
+</form>