chat history/code syntax highlighting added

de86193c · Timothy J. Baek · b1095836 · de86193c · de86193c · de86193c
Commit de86193c authored Oct 16, 2023 by Timothy J. Baek
7 changed files
--- a/README.md
+++ b/README.md
@@ -11,6 +11,8 @@ ChatGPT-Style Web Interface for Ollama 🦙
 - ⚡ **Swift Responsiveness**: Enjoy fast and responsive performance.
 - 🚀 **Effortless Setup**: Install seamlessly using Docker for a hassle-free experience.
 - 🤖 **Multiple Model Support**: Seamlessly switch between different chat models for diverse interactions.
+- 📜 **Chat History**: Effortlessly access and manage your conversation history.
+- 💻 **Code Syntax Highlighting**: Enjoy enhanced code readability with our syntax highlighting feature.
 - 🌟 **Continuous Updates**: We are committed to improving Ollama Web UI with regular updates and new features.

 ## How to Install 🚀
@@ -30,14 +32,14 @@ Your Ollama Web UI should now be hosted at [http://localhost:3000](http://localh

 Here are some exciting tasks on our to-do list:

- 📜 **Chat History**: Effortlessly access and manage your conversation history.
 - 📤📥 **Import/Export Chat History**: Seamlessly move your chat data in and out of the platform.
+- 🌐 **Web Browser Extension**: Seamlessly integrate our services into your browsing experience with our convenient browser extension.
+- 🚀 **Integration with Messaging Platforms**: Explore possibilities for integrating with popular messaging platforms like Slack and Discord.
 - 🎨 **Customization**: Tailor your chat environment with personalized themes and styles.
 - 📥🗑️ **Download/Delete Models**: Easily acquire or remove models directly from the web UI.
 - ⚙️ **Advanced Parameters Support**: Harness the power of advanced settings for fine-tuned control.
 - 📚 **Enhanced Documentation**: Elevate your setup and customization experience with improved, comprehensive documentation.
 - 🌟 **User Interface Enhancement**: Elevate the user interface to deliver a smoother, more enjoyable interaction.
- 🚀 **Integration with Messaging Platforms**: Explore possibilities for integrating with popular messaging platforms like Slack and Discord.
 - 🧐 **User Testing and Feedback Gathering**: Conduct thorough user testing to gather insights and refine our offerings based on valuable user feedback.

 Feel free to contribute and help us make Ollama Web UI even better! 🙌

--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,11 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
+				"highlight.js": "^11.9.0",
+				"idb": "^7.1.1",
 				"marked": "^9.1.0",
-				"svelte-french-toast": "^1.2.0"
+				"svelte-french-toast": "^1.2.0",
+				"uuid": "^9.0.1"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.0",
@@ -2084,6 +2087,19 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/highlight.js": {
+			"version": "11.9.0",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+			"integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/idb": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+			"integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+		},
 		"node_modules/ignore": {
 			"version": "5.2.4",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -3709,6 +3725,18 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/vite": {
 			"version": "4.4.11",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
@@ -5143,6 +5171,16 @@
 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 			"dev": true
 		},
+		"highlight.js": {
+			"version": "11.9.0",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+			"integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw=="
+		},
+		"idb": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+			"integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+		},
 		"ignore": {
 			"version": "5.2.4",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -6205,6 +6243,11 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
+		},
 		"vite": {
 			"version": "4.4.11",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",

--- a/package.json
+++ b/package.json
@@ -33,7 +33,10 @@
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.3.1",
+		"highlight.js": "^11.9.0",
+		"idb": "^7.1.1",
 		"marked": "^9.1.0",
-		"svelte-french-toast": "^1.2.0"
+		"svelte-french-toast": "^1.2.0",
+		"uuid": "^9.0.1"
 	}
 }
--- a/src/app.css
+++ b/src/app.css
@@ -8,6 +8,10 @@ html {
 	@apply bg-gray-800;
 }

+.hljs {
+	@apply rounded-lg;
+}
+
 ::-webkit-scrollbar-thumb {
 	--tw-border-opacity: 1;
 	background-color: rgba(217, 217, 227, 0.8);

--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
 <script lang="ts">
 	let show = false;
 	let navElement;
+
+	export let title: string = 'Ollama Web UI';
+	export let chats = [];
+
+	export let createNewChat: Function;
+	export let loadChat: Function;
+	export let deleteChatHistory: Function;
 </script>

 <div
@@ -33,14 +40,15 @@
 					</button>
 				</div>

-				<div class=" self-center">Ollama Web UI</div>
+				<div class=" self-center">
+					{title != '' ? title.split(' ').slice(0, 7).join(' ') : 'Ollama Web UI'}
+				</div>

 				<div class="pr-2">
 					<button
 						class=" cursor-pointer p-1 flex hover:bg-gray-700 rounded-lg transition"
 						on:click={() => {
-							location.href = location.href;
-							console.log('new chat');
+							createNewChat();
 						}}
 					>
 						<div class=" m-auto self-center">
@@ -74,8 +82,7 @@
 			<button
 				class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex"
 				on:click={() => {
-					location.href = location.href;
-					console.log('new chat');
+					createNewChat();
 				}}
 			>
 				<div class="self-center mr-2">
@@ -122,8 +129,14 @@
 			</button>
 		</div>

-		<div class="my-3 flex flex-col space-y-1 overflow-y-scroll">
-			<button class=" flex rounded-md p-4 hover:bg-gray-800 transition">
+		<div class="my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
+			{#each chats.reverse() as chat, i}
+				<button
+					class=" flex rounded-md p-4 hover:bg-gray-800 transition whitespace-nowrap text-ellipsis"
+					on:click={() => {
+						loadChat(chat.id);
+					}}
+				>
 					<div class=" self-center mr-3">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -140,14 +153,60 @@
 							/>
 						</svg>
 					</div>
-				<div class=" self-center">
-					We're currently working on bringing you the ability to access your chat history. Stay
-					tuned for updates, and thank you for your patience!
+					<div class=" self-center overflow-hidden">{chat.title}</div>
+				</button>
+			{/each}
+		</div>
+
+		<div class="">
+			<hr class=" border-gray-800 mb-2" />
+
+			<div class="flex flex-col">
+				<!-- <div class="flex">
+					<button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition">
+						<div class=" self-center mr-3">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="w-5 h-5"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+								/>
+							</svg>
+						</div>
+						<div class=" self-center">Import</div>
+					</button>
+					<button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition">
+						<div class=" self-center mr-3">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="w-5 h-5"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+								/>
+							</svg>
 						</div>
+						<div class=" self-center">Export</div>
 					</button>
-			<!-- {#each Array(100) as a, i}
+				</div> -->
 				<button
-					class=" flex rounded-md p-4 hover:bg-gray-800 transition whitespace-nowrap text-ellipsis"
+					class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+					on:click={() => {
+						deleteChatHistory();
+					}}
 				>
 					<div class=" self-center mr-3">
 						<svg
@@ -156,18 +215,42 @@
 							viewBox="0 0 24 24"
 							stroke-width="1.5"
 							stroke="currentColor"
-							class="w-4 h-4"
+							class="w-5 h-5"
 						>
 							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
-								d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+								d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
 							/>
 						</svg>
 					</div>
-					<div class=" self-center overflow-hidden">{i} Chat History</div>
+					<div class=" self-center">Clear conversations</div>
 				</button>
-			{/each} -->
+				<!-- <button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition" disabled>
+					<div class=" self-center mr-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="w-5 h-5"
+						>
+							<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>
+					</div>
+					<div class=" self-center font-medium">Settings</div>
+				</button> -->
+			</div>
 		</div>
 	</div>
 </div>

--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,6 @@
 	import { Toaster } from 'svelte-french-toast';

 	import '../app.css';
-
 	import '../tailwind.css';
 </script>


--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,23 +2,33 @@
 	import toast from 'svelte-french-toast';
 	import Navbar from '$lib/components/layout/Navbar.svelte';

+	import { v4 as uuidv4 } from 'uuid';
 	import { marked } from 'marked';
+	import hljs from 'highlight.js';
+	import 'highlight.js/styles/dark.min.css';

 	import type { PageData } from './$types';
 	import { ENDPOINT } from '$lib/contants';
 	import { onMount, tick } from 'svelte';

+	import { openDB, deleteDB } from 'idb';
+
 	export let data: PageData;
 	$: ({ models } = data);
 	let textareaElement;
+	let db;

 	let selectedModel = '';
 	let systemPrompt = '';
 	let temperature = '';
+
+	let chats = [];
+	let chatId = uuidv4();
+	let title = ``;
 	let prompt = '';
 	let messages = [];

-	onMount(() => {
+	onMount(async () => {
 		let settings = localStorage.getItem('settings');
 		if (settings) {
 			settings = JSON.parse(settings);
@@ -28,6 +38,20 @@
 			systemPrompt = settings.systemPrompt ?? '';
 			temperature = settings.temperature ?? '';
 		}
+
+		db = await openDB('Chats', 1, {
+			upgrade(db) {
+				const store = db.createObjectStore('chats', {
+					keyPath: 'id',
+					autoIncrement: true
+				});
+				store.createIndex('timestamp', 'timestamp');
+			}
+		});
+
+		chats = await db.getAllFromIndex('chats', 'timestamp');
+		console.log(chats);
+		console.log(chatId);
 	});

 	//////////////////////////
@@ -101,11 +125,32 @@
 		toast.success('Default model updated');
 	};

+	const createNewChat = () => {
+		if (messages.length > 0) {
+			messages = [];
+			title = '';
+			chatId = uuidv4();
+		}
+	};
+
+	const loadChat = async (id) => {
+		const chat = await db.get('chats', id);
+		messages = chat.messages;
+		title = chat.title;
+		chatId = chat.id;
+	};
+
+	const deleteChatHistory = async () => {
+		const tx = db.transaction('chats', 'readwrite');
+		await Promise.all([tx.store.clear(), tx.done]);
+		chats = await db.getAllFromIndex('chats', 'timestamp');
+	};
+
 	//////////////////////////
 	// Ollama functions
 	//////////////////////////

-	const submitPrompt = async () => {
+	const submitPrompt = async (user_prompt) => {
 		console.log('submitPrompt');

 		if (selectedModel === '') {
@@ -113,9 +158,15 @@
 		} else if (messages.length != 0 && messages.at(-1).done != true) {
 			console.log('wait');
 		} else {
-			console.log(prompt);
-
-			let user_prompt = prompt;
+			if (messages.length == 0) {
+				await db.put('chats', {
+					id: chatId,
+					title: 'New Chat',
+					timestamp: Date.now(),
+					messages: messages
+				});
+				chats = await db.getAllFromIndex('chats', 'timestamp');
+			}
 			messages = [
 				...messages,
 				{
@@ -180,6 +231,7 @@
 								responseMessage.done = true;
 								responseMessage.context = data.context;
 								messages = messages;
+								hljs.highlightAll();
 							}
 						}
 					}
@@ -190,6 +242,17 @@
 			}

 			window.scrollTo({ top: document.body.scrollHeight });
+
+			if (messages.length == 2) {
+				await generateTitle(user_prompt);
+			}
+			await db.put('chats', {
+				id: chatId,
+				title: title,
+				timestamp: Date.now(),
+				messages: messages
+			});
+			chats = await db.getAllFromIndex('chats', 'timestamp');
 		}
 	};

@@ -252,6 +315,7 @@
 								responseMessage.done = true;
 								responseMessage.context = data.context;
 								messages = messages;
+								hljs.highlightAll();
 							}
 						}
 					}
@@ -262,15 +326,51 @@
 			}

 			window.scrollTo({ top: document.body.scrollHeight });
+			await db.put('chats', {
+				id: chatId,
+				title: title,
+				timestamp: Date.now(),
+				messages: messages
+			});
+			chats = await db.getAllFromIndex('chats', 'timestamp');
 		}

 		console.log(messages);
 	};
+
+	const generateTitle = async (user_prompt) => {
+		console.log('generateTitle');
+
+		const res = await fetch(`${ENDPOINT}/api/generate`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'text/event-stream'
+			},
+			body: JSON.stringify({
+				model: selectedModel,
+				prompt: `Create an extremely short title for the following question with 3-5 words without using the word 'title.': ${user_prompt}`,
+				stream: false
+			})
+		})
+			.then(async (res) => {
+				if (!res.ok) throw await res.json();
+				return res.json();
+			})
+			.catch((error) => {
+				console.log(error);
+				return null;
+			});
+
+		if (res) {
+			console.log(res);
+			title = res.response;
+		}
+	};
 </script>

 <div class="app text-gray-100">
 	<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row">
-		<Navbar />
+		<Navbar {chats} {title} {loadChat} {createNewChat} {deleteChatHistory} />

 		<div class="min-h-screen w-full flex justify-center">
 			<div class=" py-2.5 flex flex-col justify-between w-full">
@@ -300,9 +400,9 @@
 					</div>
 				</div>

-				<div class=" h-full mb-44 w-full flex flex-col">
+				<div class=" h-full mb-48 w-full flex flex-col">
 					{#if messages.length == 0}
-						<div class="m-auto text-center max-w-md">
+						<div class="m-auto text-center max-w-md pb-16">
 							<div class="flex justify-center mt-8">
 								<img src="/ollama.png" class="w-16 invert-[80%]" />
 							</div>
@@ -391,6 +491,113 @@

 				<div class=" bg-gradient-to-t from-gray-900 pt-5">
 					<div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0">
+						{#if messages.length == 0}
+							<div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left">
+								<button
+									class=" flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
+									on:click={() => {
+										submitPrompt(`Tell me a random fun fact about the Roman Empire`);
+									}}
+								>
+									<div class="flex flex-col text-left">
+										<div class="text-sm font-medium text-gray-300">Tell me a fun fact</div>
+										<div class="text-sm text-gray-500">about the Roman Empire</div>
+									</div>
+
+									<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="none"
+											class="w-4 h-4"
+											><path
+												d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
+												fill="currentColor"
+											/></svg
+										>
+									</div>
+								</button>
+
+								<button
+									class="flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
+									on:click={() => {
+										submitPrompt(
+											`Show me a code snippet of a website's sticky header in CSS and JavaScript.`
+										);
+									}}
+								>
+									<div class="flex flex-col text-left">
+										<div class="text-sm font-medium text-gray-300">Show me a code snippet</div>
+										<div class="text-sm text-gray-500">of a website's sticky header</div>
+									</div>
+									<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="none"
+											class="w-4 h-4"
+											><path
+												d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
+												fill="currentColor"
+											/></svg
+										>
+									</div>
+								</button>
+
+								<button
+									class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
+									on:click={() => {
+										submitPrompt(
+											`Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
+										);
+									}}
+								>
+									<div class="flex flex-col text-left">
+										<div class="text-sm font-medium text-gray-300">Help me study</div>
+										<div class="text-sm text-gray-500">vocabulary for a college entrance exam</div>
+									</div>
+									<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="none"
+											class="w-4 h-4"
+											><path
+												d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
+												fill="currentColor"
+											/></svg
+										>
+									</div>
+								</button>
+
+								<button
+									class="  hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
+									on:click={() => {
+										submitPrompt(
+											`What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
+										);
+									}}
+								>
+									<div class="flex flex-col text-left">
+										<div class="text-sm font-medium text-gray-300">Give me ideas</div>
+										<div class="text-sm text-gray-500">for what to do with my kids' art</div>
+									</div>
+									<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="none"
+											class="w-4 h-4"
+											><path
+												d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
+												fill="currentColor"
+											/></svg
+										>
+									</div>
+								</button>
+							</div>
+						{/if}
+
 						{#if messages.length != 0 && messages.at(-1).role == 'assistant' && messages.at(-1).done == true}
 							<div class=" flex justify-end mb-2.5">
 								<button
@@ -415,7 +622,12 @@
 								</button>
 							</div>
 						{/if}
-						<form class=" flex shadow-sm relative w-full" on:submit|preventDefault={submitPrompt}>
+						<form
+							class=" flex shadow-sm relative w-full"
+							on:submit|preventDefault={() => {
+								submitPrompt(prompt);
+							}}
+						>
 							<textarea
 								class="rounded-xl bg-gray-700 outline-none w-full py-3 px-5 pr-12 resize-none"
 								placeholder="Send a message"
@@ -426,7 +638,7 @@
 										e.preventDefault();
 									}
 									if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
-										submitPrompt();
+										submitPrompt(prompt);
 									}
 								}}
 								rows="1"