File size: 2,811 Bytes
bc27e65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script lang="ts">

	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';

	import ManageModal from './Personalization/ManageModal.svelte';

	import Tooltip from '$lib/components/common/Tooltip.svelte';

	const dispatch = createEventDispatcher();



	const i18n = getContext('i18n');



	export let saveSettings: Function;



	let showManageModal = false;



	// Addons

	let enableMemory = false;



	onMount(async () => {

		enableMemory = $settings?.memory ?? false;

	});

</script>

<ManageModal bind:show={showManageModal} />

<form
	class="flex flex-col h-full justify-between space-y-3 text-sm"
	on:submit|preventDefault={() => {
		dispatch('save');
	}}
>
	<div class="py-1 overflow-y-scroll max-h-[28rem] lg:max-h-full">

		<div>

			<div class="flex items-center justify-between mb-1">

				<Tooltip

					content={$i18n.t(

						'This is an experimental feature, it may not function as expected and is subject to change at any time.'

					)}

				>

					<div class="text-sm font-medium">

						{$i18n.t('Memory')}



						<span class=" text-xs text-gray-500">({$i18n.t('Experimental')})</span>

					</div>

				</Tooltip>



				<div class="">

					<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>

				{$i18n.t(

					"You can personalize your interactions with LLMs by adding memories through the 'Manage' button below, making them more helpful and tailored 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-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"

				on:click={() => {

					showManageModal = true;

				}}

			>

				{$i18n.t('Manage')}

			</button>
		</div>
	</div>

	<div class="flex justify-end text-sm font-medium">

		<button

			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"

			type="submit"

		>

			{$i18n.t('Save')}

		</button>
	</div>
</form>