settings added

src/lib/components/chat/SettingsModal.svelte

@@ -1,19 +1,80 @@
-<script>
+<script lang="ts">
+	import { onMount } from 'svelte';
 	import Modal from '../common/Modal.svelte';
 	export let show = false;
+	export let saveSettings: Function;
+	let system = '';
+	let temperature = 0.8;
+
+	$: if (show) {
+		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+		system = settings.system ?? '';
+		temperature = settings.temperature ?? 0.8;
+	}
 </script>
 
 <Modal bind:show>
-	<div class="mt-3 p-3 rounded-lg bg-gray-900">
-		<label for="models" class="block mb-2 text-sm font-medium text-gray-200">Select a model</label>
-		<select
-			id="models"
-			class="border border-gray-600 bg-gray-700 text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400"
-		>
-			<option value="US">United States</option>
-			<option value="CA">Canada</option>
-			<option value="FR">France</option>
-			<option value="DE">Germany</option>
-		</select>
+	<div class="rounded-lg bg-gray-900">
+		<div class=" flex justify-between text-gray-300 px-5 py-4">
+			<div class=" text-lg font-medium self-center">Settings</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+		<hr class=" border-gray-800" />
+
+		<div class="p-5 flex flex-col space-y-3">
+			<div>
+				<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
+				<textarea
+					bind:value={system}
+					class="w-full rounded p-4 text-sm text-gray-300 bg-gray-800 outline-none"
+					rows="4"
+				/>
+			</div>
+
+			<div>
+				<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
+					<div>Temperature</div>
+					<div>
+						{temperature}
+					</div></label
+				>
+				<input
+					id="steps-range"
+					type="range"
+					min="0"
+					max="1"
+					bind:value={temperature}
+					step="0.05"
+					class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
+				/>
+			</div>
+			<div class="flex justify-end pt-3 text-sm font-medium">
+				<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);
+						show = false;
+					}}
+				>
+					Save
+				</button>
+			</div>
+		</div>
 	</div>
 </Modal>

src/lib/components/common/Modal.svelte

@@ -28,7 +28,7 @@
 		}}
 	>
 		<div
-			class="m-auto min-h-52 max-w-full w-[30rem] bg-stone-800 rounded-lg p-5 mx-3 shadow-3xl"
+			class="m-auto min-h-52 max-w-full w-[36rem] mx-2 bg-gray-900 rounded-lg shadow-3xl"
 			transition:fade={{ delay: 100, duration: 200 }}
 			on:click={(e) => {
 				e.stopPropagation();

src/lib/components/layout/Navbar.svelte

@@ -14,6 +14,7 @@
 	export let importChatHistory: Function;
 	export let exportChatHistory: Function;
 	export let deleteChatHistory: Function;
+	export let openSettings: Function;
 
 	onMount(() => {});
 
@@ -259,7 +260,12 @@
 					</div>
 					<div class=" self-center">Clear conversations</div>
 				</button>
-				<!-- <button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition" disabled>
+				<button
+					class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+					on:click={() => {
+						openSettings();
+					}}
+				>
 					<div class=" self-center mr-3">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -282,78 +288,8 @@
 						</svg>
 					</div>
 					<div class=" self-center font-medium">Settings</div>
-				</button> -->
+				</button>
 			</div>
 		</div>
 	</div>
 </div>
-
-<!-- <div
-	class="h-screen fixed top-0 left-0 z-30 text-sm
-	"
->
-	<div class="pl-2 pt-2">
-		<button
-			class=" cursor-pointer p-3 flex hover:bg-gray-700 rounded-lg transition"
-			on:click={() => {
-				show = !show;
-			}}
-		>
-			<div class=" m-auto self-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-5 h-5"
-				>
-					<path
-						fill-rule="evenodd"
-						d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-			</div>
-		</button>
-	</div>
-</div>
-
- -->
-
-<!-- 
-
-<div class="h-screen fixed top-0 right-0 z-30 text-sm">
-	<div class="pr-2 pt-2">
-		<button
-			class=" cursor-pointer p-3 flex hover:bg-gray-700 rounded-lg transition"
-			on:click={() => {
-				chatHistory = {};
-			}}
-		>
-			<div class=" m-auto self-center">
-				<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-5 h-5"
-					>
-						<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>
-
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-5 h-5"
-				>
-					<path
-						d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
-					/>
-				</svg>
-			</div>
-		</button>
-	</div>
-</div> -->

src/routes/+page.svelte

@@ -4,7 +4,10 @@
 
 	import { v4 as uuidv4 } from 'uuid';
 	import { marked } from 'marked';
-	import { saveAs } from 'file-saver';
+
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
 	import hljs from 'highlight.js';
 	import 'highlight.js/styles/dark.min.css';
 
@@ -13,12 +16,14 @@
 
 	import { openDB, deleteDB } from 'idb';
 	import { ENDPOINT as SERVER_ENDPOINT } from '$lib/contants';
+	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
 
 	export let data: PageData;
 	$: ({ models, OLLAMA_ENDPOINT } = data);
 
 	let ENDPOINT;
 	let textareaElement;
+	let showSettings = false;
 	let db;
 
 	let selectedModel = '';
@@ -133,6 +138,23 @@
 		toast.success('Default model updated');
 	};
 
+	const saveSettings = (_system, _temperature) => {
+		system = _system;
+		temperature = _temperature;
+
+		let settings = localStorage.getItem('settings') ?? '{}';
+		if (settings) {
+			settings = JSON.parse(settings);
+			settings.system = system;
+			settings.temperature = temperature;
+			localStorage.setItem('settings', JSON.stringify(settings));
+		}
+
+		console.log(settings);
+
+		console.log('saved');
+	};
+
 	const createNewChat = () => {
 		if (messages.length > 0) {
 			chatId = uuidv4();
@@ -194,6 +216,10 @@
 		saveAs(blob, `chat-export-${Date.now()}.json`);
 	};
 
+	const openSettings = async () => {
+		showSettings = true;
+	};
+
 	//////////////////////////
 	// Ollama functions
 	//////////////////////////
@@ -455,14 +481,49 @@
 			{importChatHistory}
 			{exportChatHistory}
 			{deleteChatHistory}
+			{openSettings}
 		/>
 
+		<SettingsModal bind:show={showSettings} {saveSettings} />
+
 		<div class="min-h-screen w-full flex justify-center">
 			<div class=" py-2.5 flex flex-col justify-between w-full">
 				<div class="max-w-2xl mx-auto w-full px-2.5 mt-14">
 					<div class="p-3 rounded-lg bg-gray-900">
 						<div>
-							<label for="models" class="block mb-2 text-sm font-medium text-gray-200">Model</label>
+							<label
+								for="models"
+								class="block mb-2 text-sm font-medium text-gray-200 flex justify-between"
+							>
+								<div class="self-center">Model</div>
+
+								<button
+									class=" self-center hover:text-gray-300"
+									on:click={() => {
+										openSettings();
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+										/>
+									</svg>
+								</button>
+							</label>
 
 							<div>
 								<select