File size: 4,444 Bytes
2606dde
 
 
 
 
 
 
 
 
 
 
 
cd6894d
 
 
 
2606dde
 
 
cf7ac8d
2606dde
 
cd6894d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2606dde
 
fe5e801
2606dde
 
 
cd6894d
 
 
 
 
2606dde
 
 
 
 
cd6894d
2606dde
 
cd6894d
2606dde
 
 
 
 
 
 
 
 
cd6894d
2606dde
cd6894d
5d07536
2606dde
 
 
 
 
 
 
cf7ac8d
 
2606dde
 
 
 
 
12c3a5a
 
 
2606dde
 
cd6894d
5d07536
2606dde
 
 
cd6894d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2606dde
 
 
 
 
 
 
 
 
 
 
 
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<script lang="ts">
	import { createEventDispatcher } from "svelte";

	import Modal from "$lib/components/Modal.svelte";
	import CarbonClose from "~icons/carbon/close";
	import CarbonCheckmark from "~icons/carbon/checkmark-filled";
	import ModelCardMetadata from "./ModelCardMetadata.svelte";
	import type { Model } from "$lib/types/Model";
	import type { LayoutData } from "../../routes/$types";
	import { enhance } from "$app/forms";
	import { base } from "$app/paths";

	import CarbonEdit from "~icons/carbon/edit";
	import CarbonSave from "~icons/carbon/save";
	import CarbonRestart from "~icons/carbon/restart";

	export let settings: LayoutData["settings"];
	export let models: Array<Model>;

	let selectedModelId = settings.activeModel;

	const dispatch = createEventDispatcher<{ close: void }>();

	let expanded = false;

	function onToggle() {
		if (expanded) {
			settings.customPrompts[selectedModelId] = value;
		}
		expanded = !expanded;
	}

	let value = "";

	function onModelChange() {
		value =
			settings.customPrompts[selectedModelId] ??
			models.filter((el) => el.id === selectedModelId)[0].preprompt ??
			"";
	}

	$: selectedModelId, onModelChange();
</script>

<Modal width="max-w-lg" on:close>
	<form
		action="{base}/settings"
		method="post"
		on:submit={() => {
			if (expanded) {
				onToggle();
			}
		}}
		use:enhance={() => {
			dispatch("close");
		}}
		class="flex w-full flex-col gap-5 p-6"
	>
		{#each Object.entries(settings).filter(([k]) => !(k == "activeModel" || k === "customPrompts")) as [key, val]}
			<input type="hidden" name={key} value={val} />
		{/each}
		<input type="hidden" name="customPrompts" value={JSON.stringify(settings.customPrompts)} />
		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
			<h2>Models</h2>
			<button type="button" class="group" on:click={() => dispatch("close")}>
				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
			</button>
		</div>

		<div class="space-y-4">
			{#each models as model}
				{@const active = model.id === selectedModelId}
				<div
					class="rounded-xl border border-gray-100 {active
						? 'bg-gradient-to-r from-primary-200/40 via-primary-500/10'
						: ''}"
				>
					<label class="group flex cursor-pointer p-3" on:change aria-label={model.displayName}>
						<input
							type="radio"
							class="sr-only"
							name="activeModel"
							value={model.id}
							bind:group={selectedModelId}
						/>
						<span>
							<span class="text-md block font-semibold leading-tight text-gray-800"
								>{model.displayName}</span
							>
							{#if model.description}
								<span class="text-xs text-[#9FA8B5]">{model.description}</span>
							{/if}
						</span>
						<CarbonCheckmark
							class="-mr-1 -mt-1 ml-auto shrink-0 text-xl {active
								? 'text-primary-400'
								: 'text-transparent group-hover:text-gray-200'}"
						/>
					</label>
					{#if active}
						<div class=" overflow-hidden rounded-xl px-3 pb-2">
							<div class="flex flex-row flex-nowrap gap-2 pb-1">
								<div class="text-xs font-semibold text-gray-500">System Prompt</div>
								{#if expanded}
									<button
										class="text-gray-500 hover:text-gray-900"
										on:click|preventDefault={onToggle}
									>
										<CarbonSave class="text-sm " />
									</button>
									<button
										class="text-gray-500 hover:text-gray-900"
										on:click|preventDefault={() => {
											value = model.preprompt ?? "";
										}}
									>
										<CarbonRestart class="text-sm " />
									</button>
								{:else}
									<button
										class=" text-gray-500 hover:text-gray-900"
										on:click|preventDefault={onToggle}
									>
										<CarbonEdit class="text-sm " />
									</button>
								{/if}
							</div>
							<textarea
								enterkeyhint="send"
								tabindex="0"
								rows="1"
								class="h-20 w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll rounded-md border border-gray-300 bg-transparent p-1  text-xs outline-none focus:ring-0 focus-visible:ring-0"
								bind:value
								hidden={!expanded}
							/>
						</div>
					{/if}
					<ModelCardMetadata {model} />
				</div>
			{/each}
		</div>
		<button
			type="submit"
			class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-colors hover:ring"
		>
			Apply
		</button>
	</form>
</Modal>