From f91a6b63d122b78f79faee655214ce2c6f1ce67b Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 29 Dec 2023 23:03:48 -0800
Subject: [PATCH 1/5] feat: message components refac

---
 src/lib/components/chat/Messages.svelte       | 830 +-----------------
 src/lib/components/chat/Messages/Name.svelte  |   3 +
 .../chat/Messages/Placeholder.svelte          |  71 ++
 .../chat/Messages/ProfileImage.svelte         |   7 +
 .../chat/Messages/ResponseMessage.svelte      | 544 ++++++++++++
 .../components/chat/Messages/Skeleton.svelte  |  19 +
 .../chat/Messages/UserMessage.svelte          | 195 ++++
 src/routes/(app)/+page.svelte                 |  13 +-
 static/ollama-dark.png                        | Bin 0 -> 13509 bytes
 static/ollama.png                             | Bin 7487 -> 7788 bytes
 10 files changed, 891 insertions(+), 791 deletions(-)
 create mode 100644 src/lib/components/chat/Messages/Name.svelte
 create mode 100644 src/lib/components/chat/Messages/Placeholder.svelte
 create mode 100644 src/lib/components/chat/Messages/ProfileImage.svelte
 create mode 100644 src/lib/components/chat/Messages/ResponseMessage.svelte
 create mode 100644 src/lib/components/chat/Messages/Skeleton.svelte
 create mode 100644 src/lib/components/chat/Messages/UserMessage.svelte
 create mode 100644 static/ollama-dark.png

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index df8a72b8..08589420 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -1,12 +1,5 @@
 <script lang="ts">
-	import { marked } from 'marked';
-
 	import { v4 as uuidv4 } from 'uuid';
-	import tippy from 'tippy.js';
-	import hljs from 'highlight.js';
-	import 'highlight.js/styles/github-dark.min.css';
-	import auto_render from 'katex/dist/contrib/auto-render.mjs';
-	import 'katex/dist/katex.min.css';
 
 	import { chats, config, db, modelfiles, settings, user } from '$lib/stores';
 	import { tick } from 'svelte';
@@ -14,6 +7,10 @@
 	import toast from 'svelte-french-toast';
 	import { getChatList, updateChatById } from '$lib/apis/chats';
 
+	import UserMessage from './Messages/UserMessage.svelte';
+	import ResponseMessage from './Messages/ResponseMessage.svelte';
+	import Placeholder from './Messages/Placeholder.svelte';
+
 	export let chatId = '';
 	export let sendPrompt: Function;
 	export let regenerateResponse: Function;
@@ -24,56 +21,7 @@
 	export let history = {};
 	export let messages = [];
 
-	export let selectedModelfile = null;
-
-	$: if (messages && messages.length > 0 && (messages.at(-1).done ?? false)) {
-		(async () => {
-			await tick();
-
-			[...document.querySelectorAll('*')].forEach((node) => {
-				if (node._tippy) {
-					node._tippy.destroy();
-				}
-			});
-
-			console.log('rendering message');
-
-			renderLatex();
-			hljs.highlightAll();
-			createCopyCodeBlockButton();
-
-			for (const message of messages) {
-				if (message.info) {
-					console.log(message);
-
-					tippy(`#info-${message.id}`, {
-						content: `<span class="text-xs" id="tooltip-${message.id}">token/s: ${
-							`${
-								Math.round(
-									((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
-								) / 100
-							} tokens` ?? 'N/A'
-						}<br/>
-						total_duration: ${
-							Math.round(((message.info.total_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
-						}ms<br/>
-						load_duration: ${
-							Math.round(((message.info.load_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
-						}ms<br/>
-						prompt_eval_count: ${message.info.prompt_eval_count ?? 'N/A'}<br/>
-						prompt_eval_duration: ${
-							Math.round(((message.info.prompt_eval_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
-						}ms<br/>
-						eval_count: ${message.info.eval_count ?? 'N/A'}<br/>
-						eval_duration: ${
-							Math.round(((message.info.eval_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
-						}ms</span>`,
-						allowHTML: true
-					});
-				}
-			}
-		})();
-	}
+	export let selectedModelfiles = [];
 
 	$: if (autoScroll && bottomPadding) {
 		(async () => {
@@ -82,95 +30,6 @@
 		})();
 	}
 
-	const speakMessage = (message) => {
-		const speak = new SpeechSynthesisUtterance(message);
-		speechSynthesis.speak(speak);
-	};
-
-	const createCopyCodeBlockButton = () => {
-		// use a class selector if available
-		let blocks = document.querySelectorAll('pre');
-
-		blocks.forEach((block) => {
-			// only add button if browser supports Clipboard API
-
-			if (block.childNodes.length < 2 && block.id !== 'user-message') {
-				let code = block.querySelector('code');
-				code.style.borderTopRightRadius = 0;
-				code.style.borderTopLeftRadius = 0;
-
-				let topBarDiv = document.createElement('div');
-				topBarDiv.style.backgroundColor = '#202123';
-				topBarDiv.style.overflowX = 'auto';
-				topBarDiv.style.display = 'flex';
-				topBarDiv.style.justifyContent = 'space-between';
-				topBarDiv.style.padding = '0 1rem';
-				topBarDiv.style.paddingTop = '4px';
-				topBarDiv.style.borderTopRightRadius = '8px';
-				topBarDiv.style.borderTopLeftRadius = '8px';
-
-				let langDiv = document.createElement('div');
-
-				let codeClassNames = code?.className.split(' ');
-				langDiv.textContent =
-					codeClassNames[0] === 'hljs' ? codeClassNames[1].slice(9) : codeClassNames[0].slice(9);
-				langDiv.style.color = 'white';
-				langDiv.style.margin = '4px';
-				langDiv.style.fontSize = '0.75rem';
-
-				let button = document.createElement('button');
-				button.className = 'copy-code-button';
-				button.textContent = 'Copy Code';
-				button.style.background = 'none';
-				button.style.fontSize = '0.75rem';
-				button.style.border = 'none';
-				button.style.margin = '4px';
-				button.style.cursor = 'pointer';
-				button.style.color = '#ddd';
-				button.addEventListener('click', () => copyCode(block, button));
-
-				topBarDiv.appendChild(langDiv);
-				topBarDiv.appendChild(button);
-
-				block.prepend(topBarDiv);
-			}
-		});
-
-		async function copyCode(block, button) {
-			let code = block.querySelector('code');
-			let text = code.innerText;
-
-			await copyToClipboard(text);
-
-			// visual feedback that task is completed
-			button.innerText = 'Copied!';
-
-			setTimeout(() => {
-				button.innerText = 'Copy Code';
-			}, 1000);
-		}
-	};
-
-	const renderLatex = () => {
-		let chatMessageElements = document.getElementsByClassName('chat-assistant');
-		// let lastChatMessageElement = chatMessageElements[chatMessageElements.length - 1];
-
-		for (const element of chatMessageElements) {
-			auto_render(element, {
-				// customised options
-				// • auto-render specific keys, e.g.:
-				delimiters: [
-					{ left: '$$', right: '$$', display: true },
-					// { left: '$', right: '$', display: false },
-					{ left: '\\(', right: '\\)', display: true },
-					{ left: '\\[', right: '\\]', display: true }
-				],
-				// • rendering keys, e.g.:
-				throwOnError: false
-			});
-		}
-	};
-
 	const copyToClipboard = (text) => {
 		if (!navigator.clipboard) {
 			var textArea = document.createElement('textarea');
@@ -207,24 +66,8 @@
 		);
 	};
 
-	const editMessageHandler = async (messageId) => {
-		// let editMessage = history.messages[messageId];
-		history.messages[messageId].edit = true;
-		history.messages[messageId].originalContent = history.messages[messageId].content;
-		history.messages[messageId].editedContent = history.messages[messageId].content;
-
-		await tick();
-
-		const editElement = document.getElementById(`message-edit-${messageId}`);
-
-		editElement.style.height = '';
-		editElement.style.height = `${editElement.scrollHeight}px`;
-	};
-
-	const confirmEditMessage = async (messageId) => {
-		history.messages[messageId].edit = false;
-
-		let userPrompt = history.messages[messageId].editedContent;
+	const confirmEditMessage = async (messageId, content) => {
+		let userPrompt = content;
 		let userMessageId = uuidv4();
 
 		let userMessage = {
@@ -252,25 +95,13 @@
 		await sendPrompt(userPrompt, userMessageId, chatId);
 	};
 
-	const confirmEditResponseMessage = async (messageId) => {
-		history.messages[messageId].edit = false;
-		history.messages[messageId].content = history.messages[messageId].editedContent;
+	const confirmEditResponseMessage = async (messageId, content) => {
+		history.messages[messageId].content = content;
 	};
 
-	const cancelEditMessage = (messageId) => {
-		history.messages[messageId].edit = false;
-		history.messages[messageId].editedContent = undefined;
-	};
-
-	const rateMessage = async (messageIdx, rating) => {
-		// TODO: Move this function to parent
-		messages = messages.map((message, idx) => {
-			if (messageIdx === idx) {
-				message.rating = rating;
-			}
-			return message;
-		});
-
+	const rateMessage = async (messageId, rating) => {
+		history.messages[messageId].rating = rating;
+		await tick();
 		await updateChatById(localStorage.token, chatId, {
 			messages: messages,
 			history: history
@@ -372,619 +203,38 @@
 </script>
 
 {#if messages.length == 0}
-	<div class="m-auto text-center max-w-md pb-56 px-2">
-		<div class="flex justify-center mt-8">
-			{#if selectedModelfile && selectedModelfile.imageUrl}
-				<img
-					src={selectedModelfile?.imageUrl}
-					alt="modelfile"
-					class=" w-20 mb-2 rounded-full"
-					draggable="false"
-				/>
-			{:else}
-				<img
-					src="/ollama.png"
-					class=" w-16 invert-[10%] dark:invert-[100%] rounded-full"
-					alt="ollama"
-					draggable="false"
-				/>
-			{/if}
-		</div>
-		<div class=" mt-2 text-2xl text-gray-800 dark:text-gray-100 font-semibold">
-			{#if selectedModelfile}
-				<span class=" capitalize">
-					{selectedModelfile.title}
-				</span>
-				<div class="mt-0.5 text-base font-normal text-gray-600 dark:text-gray-400">
-					{selectedModelfile.desc}
-				</div>
-				{#if selectedModelfile.user}
-					<div class="mt-0.5 text-sm font-normal text-gray-500 dark:text-gray-500">
-						By <a href="https://ollamahub.com/m/{selectedModelfile.user.username}"
-							>{selectedModelfile.user.name
-								? selectedModelfile.user.name
-								: `@${selectedModelfile.user.username}`}</a
-						>
-					</div>
-				{/if}
-			{:else}
-				How can I help you today?
-			{/if}
-		</div>
-	</div>
+	<Placeholder models={selectedModels} modelfiles={selectedModelfiles} />
 {:else}
 	{#each messages as message, messageIdx}
 		<div class=" w-full">
 			<div class="flex justify-between px-5 mb-3 max-w-3xl mx-auto rounded-lg group">
-				<div class=" flex w-full">
-					<div class=" mr-4">
-						{#if message.role === 'user'}
-							{#if $config === null || !($config?.auth ?? true)}
-								<img
-									src="{$settings.gravatarUrl ? $settings.gravatarUrl : '/user'}.png"
-									class=" max-w-[28px] object-cover rounded-full"
-									alt="User profile"
-									draggable="false"
-								/>
-							{:else}
-								<img
-									src={$user ? $user.profile_image_url : '/user.png'}
-									class=" max-w-[28px] object-cover rounded-full"
-									alt="User profile"
-									draggable="false"
-								/>
-							{/if}
-						{:else if selectedModelfile}
-							<img
-								src={selectedModelfile?.imageUrl ?? '/favicon.png'}
-								class=" max-w-[28px] object-cover rounded-full"
-								alt="Ollama profile"
-								draggable="false"
-							/>
-						{:else}
-							<img
-								src="/favicon.png"
-								class=" max-w-[28px] object-cover rounded-full"
-								alt="Ollama profile"
-								draggable="false"
-							/>
-						{/if}
-					</div>
-
-					<div class="w-full overflow-hidden">
-						<div class=" self-center font-bold mb-0.5">
-							{#if message.role === 'user'}
-								You
-							{:else if selectedModelfile}
-								<span class="capitalize">
-									{selectedModelfile.title}
-								</span>
-							{:else}
-								Ollama <span class=" text-gray-500 text-sm font-medium"
-									>{message.model ? ` ${message.model}` : ''}</span
-								>
-							{/if}
-						</div>
-
-						{#if message.role !== 'user' && message.content === ''}
-							<div class="w-full mt-3">
-								<div class="animate-pulse flex w-full">
-									<div class="space-y-2 w-full">
-										<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded mr-14" />
-
-										<div class="grid grid-cols-3 gap-4">
-											<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-2" />
-											<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1" />
-										</div>
-										<div class="grid grid-cols-4 gap-4">
-											<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1" />
-											<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-2" />
-											<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1 mr-4" />
-										</div>
-
-										<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded" />
-									</div>
-								</div>
-							</div>
-						{:else}
-							<div
-								class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
-							>
-								{#if message.role == 'user'}
-									{#if message.files}
-										<div class="my-3 w-full flex overflow-x-auto space-x-2">
-											{#each message.files as file}
-												<div>
-													{#if file.type === 'image'}
-														<img
-															src={file.url}
-															alt="input"
-															class=" max-h-96 rounded-lg"
-															draggable="false"
-														/>
-													{/if}
-												</div>
-											{/each}
-										</div>
-									{/if}
-
-									{#if message?.edit === true}
-										<div class=" w-full">
-											<textarea
-												id="message-edit-{message.id}"
-												class=" bg-transparent outline-none w-full resize-none"
-												bind:value={history.messages[message.id].editedContent}
-												on:input={(e) => {
-													e.target.style.height = `${e.target.scrollHeight}px`;
-												}}
-											/>
-
-											<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
-												<button
-													class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
-													on:click={() => {
-														confirmEditMessage(message.id);
-													}}
-												>
-													Save & Submit
-												</button>
-
-												<button
-													class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
-													on:click={() => {
-														cancelEditMessage(message.id);
-													}}
-												>
-													Cancel
-												</button>
-											</div>
-										</div>
-									{:else}
-										<div class="w-full">
-											<pre id="user-message">{message.content}</pre>
-
-											<div class=" flex justify-start space-x-1">
-												{#if message.parentId !== null && message.parentId in history.messages && (history.messages[message.parentId]?.childrenIds.length ?? 0) > 1}
-													<div class="flex self-center">
-														<button
-															class="self-center"
-															on:click={() => {
-																showPreviousMessage(message);
-															}}
-														>
-															<svg
-																xmlns="http://www.w3.org/2000/svg"
-																viewBox="0 0 20 20"
-																fill="currentColor"
-																class="w-4 h-4"
-															>
-																<path
-																	fill-rule="evenodd"
-																	d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-																	clip-rule="evenodd"
-																/>
-															</svg>
-														</button>
-
-														<div class="text-xs font-bold self-center">
-															{history.messages[message.parentId].childrenIds.indexOf(message.id) +
-																1} / {history.messages[message.parentId].childrenIds.length}
-														</div>
-
-														<button
-															class="self-center"
-															on:click={() => {
-																showNextMessage(message);
-															}}
-														>
-															<svg
-																xmlns="http://www.w3.org/2000/svg"
-																viewBox="0 0 20 20"
-																fill="currentColor"
-																class="w-4 h-4"
-															>
-																<path
-																	fill-rule="evenodd"
-																	d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-																	clip-rule="evenodd"
-																/>
-															</svg>
-														</button>
-													</div>
-												{:else if message.parentId === null && Object.values(history.messages).filter((message) => message.parentId === null).length > 1}
-													<div class="flex self-center">
-														<button
-															class="self-center"
-															on:click={() => {
-																showPreviousMessage(message);
-															}}
-														>
-															<svg
-																xmlns="http://www.w3.org/2000/svg"
-																viewBox="0 0 20 20"
-																fill="currentColor"
-																class="w-4 h-4"
-															>
-																<path
-																	fill-rule="evenodd"
-																	d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-																	clip-rule="evenodd"
-																/>
-															</svg>
-														</button>
-
-														<div class="text-xs font-bold self-center">
-															{Object.values(history.messages)
-																.filter((message) => message.parentId === null)
-																.map((message) => message.id)
-																.indexOf(message.id) + 1} / {Object.values(history.messages).filter(
-																(message) => message.parentId === null
-															).length}
-														</div>
-
-														<button
-															class="self-center"
-															on:click={() => {
-																showNextMessage(message);
-															}}
-														>
-															<svg
-																xmlns="http://www.w3.org/2000/svg"
-																viewBox="0 0 20 20"
-																fill="currentColor"
-																class="w-4 h-4"
-															>
-																<path
-																	fill-rule="evenodd"
-																	d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-																	clip-rule="evenodd"
-																/>
-															</svg>
-														</button>
-													</div>
-												{/if}
-
-												<button
-													class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
-													on:click={() => {
-														editMessageHandler(message.id);
-													}}
-												>
-													<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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-														/>
-													</svg>
-												</button>
-
-												<button
-													class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
-													on:click={() => {
-														copyToClipboard(message.content);
-													}}
-												>
-													<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="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
-														/>
-													</svg>
-												</button>
-											</div>
-										</div>
-									{/if}
-								{/if}
-
-								{#if message.role === 'assistant'}
-									<div>
-										{#if message?.edit === true}
-											<div class=" w-full">
-												<textarea
-													id="message-edit-{message.id}"
-													class=" bg-transparent outline-none w-full resize-none"
-													bind:value={history.messages[message.id].editedContent}
-													on:input={(e) => {
-														e.target.style.height = `${e.target.scrollHeight}px`;
-													}}
-												/>
-
-												<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
-													<button
-														class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
-														on:click={() => {
-															confirmEditResponseMessage(message.id);
-														}}
-													>
-														Save
-													</button>
-
-													<button
-														class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
-														on:click={() => {
-															cancelEditMessage(message.id);
-														}}
-													>
-														Cancel
-													</button>
-												</div>
-											</div>
-										{:else}
-											<div class="w-full">
-												{#if message?.error === true}
-													<div
-														class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
-													>
-														<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 self-center"
-														>
-															<path
-																stroke-linecap="round"
-																stroke-linejoin="round"
-																d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-															/>
-														</svg>
-
-														<div class=" self-center">
-															{message.content}
-														</div>
-													</div>
-												{:else}
-													{@html marked(message.content.replace('\\\\', '\\\\\\'))}
-												{/if}
-
-												{#if message.done}
-													<div class=" flex justify-start space-x-1 -mt-2">
-														{#if message.parentId !== null && message.parentId in history.messages && (history.messages[message.parentId]?.childrenIds.length ?? 0) > 1}
-															<div class="flex self-center">
-																<button
-																	class="self-center"
-																	on:click={() => {
-																		showPreviousMessage(message);
-																	}}
-																>
-																	<svg
-																		xmlns="http://www.w3.org/2000/svg"
-																		viewBox="0 0 20 20"
-																		fill="currentColor"
-																		class="w-4 h-4"
-																	>
-																		<path
-																			fill-rule="evenodd"
-																			d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-																			clip-rule="evenodd"
-																		/>
-																	</svg>
-																</button>
-
-																<div class="text-xs font-bold self-center">
-																	{history.messages[message.parentId].childrenIds.indexOf(
-																		message.id
-																	) + 1} / {history.messages[message.parentId].childrenIds.length}
-																</div>
-
-																<button
-																	class="self-center"
-																	on:click={() => {
-																		showNextMessage(message);
-																	}}
-																>
-																	<svg
-																		xmlns="http://www.w3.org/2000/svg"
-																		viewBox="0 0 20 20"
-																		fill="currentColor"
-																		class="w-4 h-4"
-																	>
-																		<path
-																			fill-rule="evenodd"
-																			d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-																			clip-rule="evenodd"
-																		/>
-																	</svg>
-																</button>
-															</div>
-														{/if}
-
-														<button
-															class="{messageIdx + 1 === messages.length
-																? 'visible'
-																: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-															on:click={() => {
-																editMessageHandler(message.id);
-															}}
-														>
-															<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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-																/>
-															</svg>
-														</button>
-
-														<button
-															class="{messageIdx + 1 === messages.length
-																? 'visible'
-																: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition copy-response-button"
-															on:click={() => {
-																copyToClipboard(message.content);
-															}}
-														>
-															<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="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
-																/>
-															</svg>
-														</button>
-
-														<button
-															class="{messageIdx + 1 === messages.length
-																? 'visible'
-																: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-															on:click={() => {
-																rateMessage(messageIdx, 1);
-															}}
-														>
-															<svg
-																stroke="currentColor"
-																fill="none"
-																stroke-width="2"
-																viewBox="0 0 24 24"
-																stroke-linecap="round"
-																stroke-linejoin="round"
-																class="w-4 h-4"
-																xmlns="http://www.w3.org/2000/svg"
-																><path
-																	d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
-																/></svg
-															>
-														</button>
-														<button
-															class="{messageIdx + 1 === messages.length
-																? 'visible'
-																: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-															on:click={() => {
-																rateMessage(messageIdx, -1);
-															}}
-														>
-															<svg
-																stroke="currentColor"
-																fill="none"
-																stroke-width="2"
-																viewBox="0 0 24 24"
-																stroke-linecap="round"
-																stroke-linejoin="round"
-																class="w-4 h-4"
-																xmlns="http://www.w3.org/2000/svg"
-																><path
-																	d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
-																/></svg
-															>
-														</button>
-
-														<button
-															class="{messageIdx + 1 === messages.length
-																? 'visible'
-																: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-															on:click={() => {
-																speakMessage(message.content);
-															}}
-														>
-															<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="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
-																/>
-															</svg>
-														</button>
-
-														{#if message.info}
-															<button
-																class=" {messageIdx + 1 === messages.length
-																	? 'visible'
-																	: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition whitespace-pre-wrap"
-																on:click={() => {
-																	console.log(message);
-																}}
-																id="info-{message.id}"
-															>
-																<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="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
-																	/>
-																</svg>
-															</button>
-														{/if}
-
-														{#if messageIdx + 1 === messages.length}
-															<button
-																type="button"
-																class="{messageIdx + 1 === messages.length
-																	? 'visible'
-																	: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-																on:click={regenerateResponse}
-															>
-																<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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-																	/>
-																</svg>
-															</button>
-														{/if}
-													</div>
-												{/if}
-											</div>
-										{/if}
-									</div>
-								{/if}
-							</div>
-						{/if}
-					</div>
-					<!-- {} -->
-				</div>
+				{#if message.role === 'user'}
+					<UserMessage
+						user={$user}
+						{message}
+						siblings={message.parentId !== null
+							? history.messages[message.parentId]?.childrenIds ?? []
+							: Object.values(history.messages)
+									.filter((message) => message.parentId === null)
+									.map((message) => message.id) ?? []}
+						{confirmEditMessage}
+						{showPreviousMessage}
+						{showNextMessage}
+						{copyToClipboard}
+					/>
+				{:else}
+					<ResponseMessage
+						{message}
+						siblings={history.messages[message.parentId]?.childrenIds ?? []}
+						isLastMessage={messageIdx + 1 === messages.length}
+						{confirmEditResponseMessage}
+						{showPreviousMessage}
+						{showNextMessage}
+						{rateMessage}
+						{copyToClipboard}
+						{regenerateResponse}
+					/>
+				{/if}
 			</div>
 		</div>
 	{/each}
diff --git a/src/lib/components/chat/Messages/Name.svelte b/src/lib/components/chat/Messages/Name.svelte
new file mode 100644
index 00000000..4638e3b7
--- /dev/null
+++ b/src/lib/components/chat/Messages/Name.svelte
@@ -0,0 +1,3 @@
+<div class=" self-center font-bold mb-0.5 capitalize">
+	<slot />
+</div>
diff --git a/src/lib/components/chat/Messages/Placeholder.svelte b/src/lib/components/chat/Messages/Placeholder.svelte
new file mode 100644
index 00000000..1d709b5f
--- /dev/null
+++ b/src/lib/components/chat/Messages/Placeholder.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let models = [];
+	export let modelfiles = [];
+
+	let modelfile = null;
+	let selectedModelIdx = 0;
+
+	$: modelfile =
+		models[selectedModelIdx] in modelfiles ? modelfiles[models[selectedModelIdx]] : null;
+
+	$: if (models.length > 0) {
+		selectedModelIdx = models.length - 1;
+	}
+</script>
+
+{#if models.length > 0}
+	<div class="m-auto text-center max-w-md pb-56 px-2">
+		<div class="flex justify-center mt-8">
+			<div class="flex -space-x-10">
+				{#each models as model, modelIdx}
+					<button
+						on:click={() => {
+							selectedModelIdx = modelIdx;
+						}}
+					>
+						{#if model in modelfiles}
+							<img
+								src={modelfiles[model]?.imageUrl}
+								alt="modelfile"
+								class=" w-20 mb-2 rounded-full {models.length > 1
+									? ' border-[5px] border-white dark:border-gray-800'
+									: ''}"
+								draggable="false"
+							/>
+						{:else}
+							<img
+								src={models.length === 1 ? '/ollama.png' : 'ollama-dark.png'}
+								class=" w-20 mb-2 {models.length === 1
+									? 'invert-[10%] dark:invert-[100%]'
+									: 'border-[5px] border-white dark:border-gray-800'}  rounded-full"
+								alt="ollama"
+								draggable="false"
+							/>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+		<div class=" mt-2 text-2xl text-gray-800 dark:text-gray-100 font-semibold">
+			{#if modelfile}
+				<span class=" capitalize">
+					{modelfile.title}
+				</span>
+				<div class="mt-0.5 text-base font-normal text-gray-600 dark:text-gray-400">
+					{modelfile.desc}
+				</div>
+				{#if modelfile.user}
+					<div class="mt-0.5 text-sm font-normal text-gray-500 dark:text-gray-500">
+						By <a href="https://ollamahub.com/m/{modelfile.user.username}"
+							>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a
+						>
+					</div>
+				{/if}
+			{:else}
+				How can I help you today?
+			{/if}
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/chat/Messages/ProfileImage.svelte b/src/lib/components/chat/Messages/ProfileImage.svelte
new file mode 100644
index 00000000..84410d91
--- /dev/null
+++ b/src/lib/components/chat/Messages/ProfileImage.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let src = '/user.png';
+</script>
+
+<div class=" mr-4">
+	<img {src} class=" max-w-[28px] object-cover rounded-full" alt="profile" draggable="false" />
+</div>
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
new file mode 100644
index 00000000..abdd5da2
--- /dev/null
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -0,0 +1,544 @@
+<script lang="ts">
+	import { marked } from 'marked';
+
+	import tippy from 'tippy.js';
+	import hljs from 'highlight.js';
+	import 'highlight.js/styles/github-dark.min.css';
+	import auto_render from 'katex/dist/contrib/auto-render.mjs';
+	import 'katex/dist/katex.min.css';
+
+	import Name from './Name.svelte';
+	import ProfileImage from './ProfileImage.svelte';
+	import Skeleton from './Skeleton.svelte';
+	import { onMount, tick } from 'svelte';
+
+	export let modelfiles = [];
+	export let message;
+	export let siblings;
+
+	export let isLastMessage = true;
+
+	export let confirmEditResponseMessage: Function;
+	export let showPreviousMessage: Function;
+	export let showNextMessage: Function;
+	export let rateMessage: Function;
+
+	export let copyToClipboard: Function;
+	export let regenerateResponse: Function;
+
+	let selectedModelfile = '';
+
+	let edit = false;
+	let editedContent = '';
+
+	let tooltipInstance = null;
+	let speaking = null;
+
+	$: if (message) {
+		renderStyling();
+	}
+
+	const renderStyling = async () => {
+		await tick();
+
+		if (tooltipInstance) {
+			console.log(tooltipInstance);
+			tooltipInstance[0].destroy();
+		}
+
+		console.log('rendering message');
+
+		renderLatex();
+		hljs.highlightAll();
+		createCopyCodeBlockButton();
+
+		if (message.info) {
+			console.log(message);
+
+			tooltipInstance = tippy(`#info-${message.id}`, {
+				content: `<span class="text-xs" id="tooltip-${message.id}">token/s: ${
+					`${
+						Math.round(
+							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
+						) / 100
+					} tokens` ?? 'N/A'
+				}<br/>
+                    total_duration: ${
+											Math.round(((message.info.total_duration ?? 0) / 1000000) * 100) / 100 ??
+											'N/A'
+										}ms<br/>
+                    load_duration: ${
+											Math.round(((message.info.load_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
+										}ms<br/>
+                    prompt_eval_count: ${message.info.prompt_eval_count ?? 'N/A'}<br/>
+                    prompt_eval_duration: ${
+											Math.round(((message.info.prompt_eval_duration ?? 0) / 1000000) * 100) /
+												100 ?? 'N/A'
+										}ms<br/>
+                    eval_count: ${message.info.eval_count ?? 'N/A'}<br/>
+                    eval_duration: ${
+											Math.round(((message.info.eval_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
+										}ms</span>`,
+				allowHTML: true
+			});
+		}
+	};
+
+	const createCopyCodeBlockButton = () => {
+		// use a class selector if available
+		let blocks = document.querySelectorAll('pre');
+
+		blocks.forEach((block) => {
+			// only add button if browser supports Clipboard API
+
+			if (block.childNodes.length < 2 && block.id !== 'user-message') {
+				let code = block.querySelector('code');
+				code.style.borderTopRightRadius = 0;
+				code.style.borderTopLeftRadius = 0;
+
+				let topBarDiv = document.createElement('div');
+				topBarDiv.style.backgroundColor = '#202123';
+				topBarDiv.style.overflowX = 'auto';
+				topBarDiv.style.display = 'flex';
+				topBarDiv.style.justifyContent = 'space-between';
+				topBarDiv.style.padding = '0 1rem';
+				topBarDiv.style.paddingTop = '4px';
+				topBarDiv.style.borderTopRightRadius = '8px';
+				topBarDiv.style.borderTopLeftRadius = '8px';
+
+				let langDiv = document.createElement('div');
+
+				let codeClassNames = code?.className.split(' ');
+				langDiv.textContent =
+					codeClassNames[0] === 'hljs' ? codeClassNames[1].slice(9) : codeClassNames[0].slice(9);
+				langDiv.style.color = 'white';
+				langDiv.style.margin = '4px';
+				langDiv.style.fontSize = '0.75rem';
+
+				let button = document.createElement('button');
+				button.className = 'copy-code-button';
+				button.textContent = 'Copy Code';
+				button.style.background = 'none';
+				button.style.fontSize = '0.75rem';
+				button.style.border = 'none';
+				button.style.margin = '4px';
+				button.style.cursor = 'pointer';
+				button.style.color = '#ddd';
+				button.addEventListener('click', () => copyCode(block, button));
+
+				topBarDiv.appendChild(langDiv);
+				topBarDiv.appendChild(button);
+
+				block.prepend(topBarDiv);
+			}
+		});
+
+		async function copyCode(block, button) {
+			let code = block.querySelector('code');
+			let text = code.innerText;
+
+			await copyToClipboard(text);
+
+			// visual feedback that task is completed
+			button.innerText = 'Copied!';
+
+			setTimeout(() => {
+				button.innerText = 'Copy Code';
+			}, 1000);
+		}
+	};
+
+	const renderLatex = () => {
+		let chatMessageElements = document.getElementsByClassName('chat-assistant');
+		// let lastChatMessageElement = chatMessageElements[chatMessageElements.length - 1];
+
+		for (const element of chatMessageElements) {
+			auto_render(element, {
+				// customised options
+				// • auto-render specific keys, e.g.:
+				delimiters: [
+					{ left: '$$', right: '$$', display: true },
+					// { left: '$', right: '$', display: false },
+					{ left: '\\(', right: '\\)', display: true },
+					{ left: '\\[', right: '\\]', display: true }
+				],
+				// • rendering keys, e.g.:
+				throwOnError: false
+			});
+		}
+	};
+
+	const toggleSpeakMessage = async () => {
+		if (speaking) {
+			speechSynthesis.cancel();
+			speaking = null;
+		} else {
+			speaking = true;
+			const speak = new SpeechSynthesisUtterance(message.content);
+			speechSynthesis.speak(speak);
+		}
+	};
+
+	const editMessageHandler = async () => {
+		edit = true;
+		editedContent = message.content;
+
+		await tick();
+		const editElement = document.getElementById(`message-edit-${message.id}`);
+
+		editElement.style.height = '';
+		editElement.style.height = `${editElement.scrollHeight}px`;
+	};
+
+	const editMessageConfirmHandler = async () => {
+		confirmEditResponseMessage(message.id, editedContent);
+
+		edit = false;
+		editedContent = '';
+
+		await tick();
+		renderStyling();
+	};
+
+	const cancelEditMessage = async () => {
+		edit = false;
+		editedContent = '';
+		await tick();
+		renderStyling();
+	};
+
+	onMount(async () => {
+		await tick();
+		renderStyling();
+	});
+</script>
+
+<div class=" flex w-full message-{message.id}">
+	<ProfileImage src={selectedModelfile?.imageUrl ?? '/favicon.png'} />
+
+	<div class="w-full overflow-hidden">
+		<Name>
+			{#if selectedModelfile}
+				{selectedModelfile.title}
+			{:else}
+				Ollama <span class=" text-gray-500 text-sm font-medium"
+					>{message.model ? ` ${message.model}` : ''}</span
+				>
+			{/if}
+		</Name>
+
+		{#if message.content === ''}
+			<Skeleton />
+		{:else}
+			<div
+				class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
+			>
+				<div>
+					{#if edit === true}
+						<div class=" w-full">
+							<textarea
+								id="message-edit-{message.id}"
+								class=" bg-transparent outline-none w-full resize-none"
+								bind:value={editedContent}
+								on:input={(e) => {
+									e.target.style.height = `${e.target.scrollHeight}px`;
+								}}
+							/>
+
+							<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
+								<button
+									class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
+									on:click={() => {
+										editMessageConfirmHandler();
+									}}
+								>
+									Save
+								</button>
+
+								<button
+									class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
+									on:click={() => {
+										cancelEditMessage();
+									}}
+								>
+									Cancel
+								</button>
+							</div>
+						</div>
+					{:else}
+						<div class="w-full">
+							{#if message?.error === true}
+								<div
+									class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
+								>
+									<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 self-center"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+										/>
+									</svg>
+
+									<div class=" self-center">
+										{message.content}
+									</div>
+								</div>
+							{:else}
+								{@html marked(message.content.replace('\\\\', '\\\\\\'))}
+							{/if}
+
+							{#if message.done}
+								<div class=" flex justify-start space-x-1 -mt-2">
+									{#if siblings.length > 1}
+										<div class="flex self-center">
+											<button
+												class="self-center"
+												on:click={() => {
+													showPreviousMessage(message);
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											</button>
+
+											<div class="text-xs font-bold self-center">
+												{siblings.indexOf(message.id) + 1} / {siblings.length}
+											</div>
+
+											<button
+												class="self-center"
+												on:click={() => {
+													showNextMessage(message);
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											</button>
+										</div>
+									{/if}
+
+									<button
+										class="{isLastMessage
+											? 'visible'
+											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
+										on:click={() => {
+											editMessageHandler();
+										}}
+									>
+										<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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+											/>
+										</svg>
+									</button>
+
+									<button
+										class="{isLastMessage
+											? 'visible'
+											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition copy-response-button"
+										on:click={() => {
+											copyToClipboard(message.content);
+										}}
+									>
+										<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="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+											/>
+										</svg>
+									</button>
+
+									<button
+										class="{isLastMessage
+											? 'visible'
+											: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1
+											? 'bg-gray-100 dark:bg-gray-900'
+											: ''} transition"
+										on:click={() => {
+											rateMessage(message.id, 1);
+										}}
+									>
+										<svg
+											stroke="currentColor"
+											fill="none"
+											stroke-width="2"
+											viewBox="0 0 24 24"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											class="w-4 h-4"
+											xmlns="http://www.w3.org/2000/svg"
+											><path
+												d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+											/></svg
+										>
+									</button>
+									<button
+										class="{isLastMessage
+											? 'visible'
+											: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1
+											? 'bg-gray-100 dark:bg-gray-900'
+											: ''} transition"
+										on:click={() => {
+											rateMessage(message.id, -1);
+										}}
+									>
+										<svg
+											stroke="currentColor"
+											fill="none"
+											stroke-width="2"
+											viewBox="0 0 24 24"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											class="w-4 h-4"
+											xmlns="http://www.w3.org/2000/svg"
+											><path
+												d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
+											/></svg
+										>
+									</button>
+
+									<button
+										class="{isLastMessage
+											? 'visible'
+											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
+										on:click={() => {
+											toggleSpeakMessage(message);
+										}}
+									>
+										{#if speaking}
+											<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="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
+												/>
+											</svg>
+										{:else}
+											<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="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+												/>
+											</svg>
+										{/if}
+									</button>
+
+									{#if message.info}
+										<button
+											class=" {isLastMessage
+												? 'visible'
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition whitespace-pre-wrap"
+											on:click={() => {
+												console.log(message);
+											}}
+											id="info-{message.id}"
+										>
+											<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="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+												/>
+											</svg>
+										</button>
+									{/if}
+
+									{#if isLastMessage}
+										<button
+											type="button"
+											class="{isLastMessage
+												? 'visible'
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
+											on:click={regenerateResponse}
+										>
+											<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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+												/>
+											</svg>
+										</button>
+									{/if}
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/chat/Messages/Skeleton.svelte b/src/lib/components/chat/Messages/Skeleton.svelte
new file mode 100644
index 00000000..af8ca3fd
--- /dev/null
+++ b/src/lib/components/chat/Messages/Skeleton.svelte
@@ -0,0 +1,19 @@
+<div class="w-full mt-3">
+	<div class="animate-pulse flex w-full">
+		<div class="space-y-2 w-full">
+			<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded mr-14" />
+
+			<div class="grid grid-cols-3 gap-4">
+				<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-2" />
+				<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1" />
+			</div>
+			<div class="grid grid-cols-4 gap-4">
+				<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1" />
+				<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-2" />
+				<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1 mr-4" />
+			</div>
+
+			<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded" />
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
new file mode 100644
index 00000000..a760ce3a
--- /dev/null
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import Name from './Name.svelte';
+	import ProfileImage from './ProfileImage.svelte';
+
+	export let user;
+	export let message;
+	export let siblings;
+
+	export let confirmEditMessage: Function;
+	export let showPreviousMessage: Function;
+	export let showNextMessage: Function;
+	export let copyToClipboard: Function;
+
+	let edit = false;
+	let editedContent = '';
+
+	const editMessageHandler = async () => {
+		edit = true;
+		editedContent = message.content;
+
+		await tick();
+		const editElement = document.getElementById(`message-edit-${message.id}`);
+
+		editElement.style.height = '';
+		editElement.style.height = `${editElement.scrollHeight}px`;
+	};
+
+	const editMessageConfirmHandler = async () => {
+		confirmEditMessage(message.id, editedContent);
+
+		edit = false;
+		editedContent = '';
+	};
+
+	const cancelEditMessage = () => {
+		edit = false;
+		editedContent = '';
+	};
+</script>
+
+<div class=" flex w-full">
+	<ProfileImage src={user?.profile_image_url ?? '/user.png'} />
+
+	<div class="w-full overflow-hidden">
+		<Name>You</Name>
+
+		<div
+			class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
+		>
+			{#if message.files}
+				<div class="my-3 w-full flex overflow-x-auto space-x-2">
+					{#each message.files as file}
+						<div>
+							{#if file.type === 'image'}
+								<img src={file.url} alt="input" class=" max-h-96 rounded-lg" draggable="false" />
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			{#if edit === true}
+				<div class=" w-full">
+					<textarea
+						id="message-edit-{message.id}"
+						class=" bg-transparent outline-none w-full resize-none"
+						bind:value={editedContent}
+						on:input={(e) => {
+							e.target.style.height = `${e.target.scrollHeight}px`;
+						}}
+					/>
+
+					<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
+						<button
+							class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
+							on:click={() => {
+								editMessageConfirmHandler();
+							}}
+						>
+							Save & Submit
+						</button>
+
+						<button
+							class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
+							on:click={() => {
+								cancelEditMessage();
+							}}
+						>
+							Cancel
+						</button>
+					</div>
+				</div>
+			{:else}
+				<div class="w-full">
+					<pre id="user-message">{message.content}</pre>
+
+					<div class=" flex justify-start space-x-1">
+						{#if siblings.length > 1}
+							<div class="flex self-center">
+								<button
+									class="self-center"
+									on:click={() => {
+										showPreviousMessage(message);
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</button>
+
+								<div class="text-xs font-bold self-center">
+									{siblings.indexOf(message.id) + 1} / {siblings.length}
+								</div>
+
+								<button
+									class="self-center"
+									on:click={() => {
+										showNextMessage(message);
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/if}
+
+						<button
+							class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
+							on:click={() => {
+								editMessageHandler();
+							}}
+						>
+							<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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+								/>
+							</svg>
+						</button>
+
+						<button
+							class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
+							on:click={() => {
+								copyToClipboard(message.content);
+							}}
+						>
+							<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="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+								/>
+							</svg>
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 6f272a62..a6aa0929 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -30,6 +30,17 @@
 			? $modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0])[0]
 			: null;
 
+	let selectedModelfiles = {};
+	$: selectedModelfiles = selectedModels.reduce((a, tagName, i, arr) => {
+		const modelfile =
+			$modelfiles.filter((modelfile) => modelfile.tagName === tagName)?.at(0) ?? undefined;
+
+		return {
+			...a,
+			...(modelfile && { [tagName]: modelfile })
+		};
+	}, {});
+
 	let chat = null;
 
 	let title = '';
@@ -609,7 +620,7 @@
 			<Messages
 				chatId={$chatId}
 				{selectedModels}
-				{selectedModelfile}
+				{selectedModelfiles}
 				bind:history
 				bind:messages
 				bind:autoScroll
diff --git a/static/ollama-dark.png b/static/ollama-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..f489a84e5652496232c6fd19a95b0d4a157b6314
GIT binary patch
literal 13509
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
Iag)&h0r$YltN;K2

literal 0
HcmV?d00001

diff --git a/static/ollama.png b/static/ollama.png
index 8cd2cf1ed8043caf62e8b069330889c0cf0f5a3b..ee85f8d4ea875da88b0dd999a307f2b3a3a5bda0 100644
GIT binary patch
literal 7788
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

literal 7487
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
Qzmr7mm8No$(ud&x12B~oumAu6


From b916f1b07d89b9779e3dffd59d5560617fe98c52 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 29 Dec 2023 23:25:40 -0800
Subject: [PATCH 2/5] feat: messages refac

---
 src/lib/components/chat/Messages.svelte             | 11 +++++++++++
 .../components/chat/Messages/ResponseMessage.svelte | 13 +++----------
 src/routes/(app)/c/[id]/+page.svelte                | 13 ++++++++++++-
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 08589420..3920a40d 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -96,7 +96,17 @@
 	};
 
 	const confirmEditResponseMessage = async (messageId, content) => {
+		history.messages[messageId].originalContent = history.messages[messageId].content;
 		history.messages[messageId].content = content;
+
+		await tick();
+
+		await updateChatById(localStorage.token, chatId, {
+			messages: messages,
+			history: history
+		});
+
+		await chats.set(await getChatList(localStorage.token));
 	};
 
 	const rateMessage = async (messageId, rating) => {
@@ -225,6 +235,7 @@
 				{:else}
 					<ResponseMessage
 						{message}
+						modelfiles={selectedModelfiles}
 						siblings={history.messages[message.parentId]?.childrenIds ?? []}
 						isLastMessage={messageIdx + 1 === messages.length}
 						{confirmEditResponseMessage}
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index abdd5da2..bb81b2c9 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -26,8 +26,6 @@
 	export let copyToClipboard: Function;
 	export let regenerateResponse: Function;
 
-	let selectedModelfile = '';
-
 	let edit = false;
 	let editedContent = '';
 
@@ -42,19 +40,14 @@
 		await tick();
 
 		if (tooltipInstance) {
-			console.log(tooltipInstance);
 			tooltipInstance[0].destroy();
 		}
 
-		console.log('rendering message');
-
 		renderLatex();
 		hljs.highlightAll();
 		createCopyCodeBlockButton();
 
 		if (message.info) {
-			console.log(message);
-
 			tooltipInstance = tippy(`#info-${message.id}`, {
 				content: `<span class="text-xs" id="tooltip-${message.id}">token/s: ${
 					`${
@@ -214,12 +207,12 @@
 </script>
 
 <div class=" flex w-full message-{message.id}">
-	<ProfileImage src={selectedModelfile?.imageUrl ?? '/favicon.png'} />
+	<ProfileImage src={modelfiles[message.model]?.imageUrl ?? '/favicon.png'} />
 
 	<div class="w-full overflow-hidden">
 		<Name>
-			{#if selectedModelfile}
-				{selectedModelfile.title}
+			{#if message.model in modelfiles}
+				{modelfiles[message.model]?.title}
 			{:else}
 				Ollama <span class=" text-gray-500 text-sm font-medium"
 					>{message.model ? ` ${message.model}` : ''}</span
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 9600f298..db027502 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -31,6 +31,17 @@
 			? $modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0])[0]
 			: null;
 
+	let selectedModelfiles = {};
+	$: selectedModelfiles = selectedModels.reduce((a, tagName, i, arr) => {
+		const modelfile =
+			$modelfiles.filter((modelfile) => modelfile.tagName === tagName)?.at(0) ?? undefined;
+
+		return {
+			...a,
+			...(modelfile && { [tagName]: modelfile })
+		};
+	}, {});
+
 	let chat = null;
 
 	let title = '';
@@ -643,7 +654,7 @@
 				<Messages
 					chatId={$chatId}
 					{selectedModels}
-					{selectedModelfile}
+					{selectedModelfiles}
 					bind:history
 					bind:messages
 					bind:autoScroll

From 7ffc1902a9f3f93cf08ac6231c7223093c78b8f0 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 29 Dec 2023 23:35:08 -0800
Subject: [PATCH 3/5] feat: toggle settings shortcut added

---
 src/lib/components/chat/ModelSelector.svelte  |  7 ++++---
 src/lib/components/chat/ShortcutsModal.svelte | 17 +++++++++++++++++
 src/routes/(app)/+layout.svelte               |  7 +++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index 626755e0..b4a0f47c 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -6,8 +6,8 @@
 	export let disabled = false;
 
 	const saveDefaultModel = () => {
-		const hasEmptyModel = selectedModels.filter(it => it === '');
-		if(hasEmptyModel.length){
+		const hasEmptyModel = selectedModels.filter((it) => it === '');
+		if (hasEmptyModel.length) {
 			toast.error('Choose a model before saving...');
 			return;
 		}
@@ -88,8 +88,9 @@
 			{#if selectedModelIdx === 0}
 				<button
 					class=" self-center dark:hover:text-gray-300"
+					id="open-settings-button"
 					on:click={async () => {
-						await showSettings.set(true);
+						await showSettings.set(!$showSettings);
 					}}
 				>
 					<svg
diff --git a/src/lib/components/chat/ShortcutsModal.svelte b/src/lib/components/chat/ShortcutsModal.svelte
index b3118392..2e0b66f7 100644
--- a/src/lib/components/chat/ShortcutsModal.svelte
+++ b/src/lib/components/chat/ShortcutsModal.svelte
@@ -123,6 +123,23 @@
 				</div>
 
 				<div class="flex flex-col space-y-3 w-full self-start">
+					<div class="w-full flex justify-between items-center">
+						<div class=" text-sm">Toggle settings</div>
+
+						<div class="flex space-x-1 text-xs">
+							<div
+								class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
+							>
+								Ctrl/⌘
+							</div>
+							<div
+								class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
+							>
+								S
+							</div>
+						</div>
+					</div>
+
 					<div class="w-full flex justify-between items-center">
 						<div class=" text-sm">Toggle sidebar</div>
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index fcc54a2c..e6d296f2 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -160,6 +160,13 @@
 					document.getElementById('delete-chat-button')?.click();
 				}
 
+				// Check if Ctrl + S is pressed
+				if (isCtrlPressed && event.key.toLowerCase() === 's') {
+					event.preventDefault();
+					console.log('openSettings');
+					document.getElementById('open-settings-button')?.click();
+				}
+
 				// Check if Ctrl + / is pressed
 				if (isCtrlPressed && event.key === '/') {
 					event.preventDefault();

From d5dc36b2a9fb472e7607608bcb17ade528c6fe5e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 30 Dec 2023 00:15:37 -0800
Subject: [PATCH 4/5] feat: delete all user chats

---
 backend/apps/web/routers/chats.py            |  20 ++
 src/lib/apis/chats/index.ts                  |  32 +++
 src/lib/components/chat/SettingsModal.svelte | 260 ++++++++++---------
 3 files changed, 189 insertions(+), 123 deletions(-)

diff --git a/backend/apps/web/routers/chats.py b/backend/apps/web/routers/chats.py
index 798972e7..d5e63c0f 100644
--- a/backend/apps/web/routers/chats.py
+++ b/backend/apps/web/routers/chats.py
@@ -159,3 +159,23 @@ async def delete_chat_by_id(id: str, cred=Depends(bearer_scheme)):
             status_code=status.HTTP_401_UNAUTHORIZED,
             detail=ERROR_MESSAGES.INVALID_TOKEN,
         )
+
+
+############################
+# DeleteAllChats
+############################
+
+
+@router.delete("/", response_model=bool)
+async def delete_all_user_chats(cred=Depends(bearer_scheme)):
+    token = cred.credentials
+    user = Users.get_user_by_token(token)
+
+    if user:
+        result = Chats.delete_chats_by_user_id(user.id)
+        return result
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.INVALID_TOKEN,
+        )
diff --git a/src/lib/apis/chats/index.ts b/src/lib/apis/chats/index.ts
index 354e4f74..0eddf5b4 100644
--- a/src/lib/apis/chats/index.ts
+++ b/src/lib/apis/chats/index.ts
@@ -191,3 +191,35 @@ export const deleteChatById = async (token: string, id: string) => {
 
 	return res;
 };
+
+export const deleteAllChats = async (token: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/`, {
+		method: 'DELETE',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 5dd57c78..1a9c3314 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -8,7 +8,7 @@
 	import { splitStream, getGravatarURL } from '$lib/utils';
 
 	import { getOllamaVersion } from '$lib/apis/ollama';
-	import { createNewChat, getAllChats, getChatList } from '$lib/apis/chats';
+	import { createNewChat, deleteAllChats, getAllChats, getChatList } from '$lib/apis/chats';
 	import {
 		WEB_UI_VERSION,
 		OLLAMA_API_BASE_URL,
@@ -19,6 +19,7 @@
 	import Advanced from './Settings/Advanced.svelte';
 	import Modal from '../common/Modal.svelte';
 	import { updateUserPassword } from '$lib/apis/auths';
+	import { goto } from '$app/navigation';
 
 	export let show = false;
 
@@ -83,7 +84,7 @@
 	// Chats
 
 	let importFiles;
-	let showDeleteHistoryConfirm = false;
+	let showDeleteConfirm = false;
 
 	const importChats = async (_chats) => {
 		for (const chat of _chats) {
@@ -114,6 +115,12 @@
 		reader.readAsText(importFiles[0]);
 	}
 
+	const deleteChats = async () => {
+		await goto('/');
+		await deleteAllChats(localStorage.token);
+		await chats.set(await getChatList(localStorage.token));
+	};
+
 	// Auth
 	let authEnabled = false;
 	let authType = 'Basic';
@@ -1618,147 +1625,154 @@
 					</form>
 				{:else if selectedTab === 'chats'}
 					<div class="flex flex-col h-full justify-between space-y-3 text-sm">
-						<div class="flex flex-col">
-							<input
-								id="chat-import-input"
-								bind:files={importFiles}
-								type="file"
-								accept=".json"
-								hidden
-							/>
-							<button
-								class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
-								on:click={() => {
-									document.getElementById('chat-import-input').click();
-								}}
-							>
-								<div class=" self-center mr-3">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 16 16"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
-								</div>
-								<div class=" self-center text-sm font-medium">Import Chats</div>
-							</button>
-							<button
-								class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
-								on:click={() => {
-									exportChats();
-								}}
-							>
-								<div class=" self-center mr-3">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 16 16"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
-								</div>
-								<div class=" self-center text-sm font-medium">Export Chats</div>
-							</button>
-						</div>
-						<!-- {#if showDeleteHistoryConfirm}
-							<div
-								class="flex justify-between rounded-md items-center py-3 px-3.5 w-full transition"
-							>
-								<div class="flex items-center">
-									<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 mr-3"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											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>
-									<span>Are you sure?</span>
-								</div>
-
-								<div class="flex space-x-1.5 items-center">
-									<button
-										class="hover:text-white transition"
-										on:click={() => {
-											deleteChatHistory();
-											showDeleteHistoryConfirm = false;
-										}}
-									>
+						<div class=" space-y-2">
+							<div class="flex flex-col">
+								<input
+									id="chat-import-input"
+									bind:files={importFiles}
+									type="file"
+									accept=".json"
+									hidden
+								/>
+								<button
+									class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
+									on:click={() => {
+										document.getElementById('chat-import-input').click();
+									}}
+								>
+									<div class=" self-center mr-3">
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
+											viewBox="0 0 16 16"
 											fill="currentColor"
 											class="w-4 h-4"
 										>
 											<path
 												fill-rule="evenodd"
-												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+												d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
 												clip-rule="evenodd"
 											/>
 										</svg>
-									</button>
-									<button
-										class="hover:text-white transition"
-										on:click={() => {
-											showDeleteHistoryConfirm = false;
-										}}
-									>
+									</div>
+									<div class=" self-center text-sm font-medium">Import Chats</div>
+								</button>
+								<button
+									class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
+									on:click={() => {
+										exportChats();
+									}}
+								>
+									<div class=" self-center mr-3">
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
+											viewBox="0 0 16 16"
 											fill="currentColor"
 											class="w-4 h-4"
 										>
 											<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"
+												fill-rule="evenodd"
+												d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
+												clip-rule="evenodd"
 											/>
 										</svg>
-									</button>
-								</div>
+									</div>
+									<div class=" self-center text-sm font-medium">Export Chats</div>
+								</button>
 							</div>
-						{:else}
-							<button
-								class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
-								on:click={() => {
-									showDeleteHistoryConfirm = true;
-								}}
-							>
-								<div class="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="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>
+
+							<hr class=" dark:border-gray-700" />
+
+							{#if showDeleteConfirm}
+								<div
+									class="flex justify-between rounded-md items-center py-2 px-3.5 w-full transition"
+								>
+									<div class="flex items-center space-x-3">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path
+												d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z"
+											/>
+											<path
+												fill-rule="evenodd"
+												d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM5.72 7.47a.75.75 0 0 1 1.06 0L8 8.69l1.22-1.22a.75.75 0 1 1 1.06 1.06L9.06 9.75l1.22 1.22a.75.75 0 1 1-1.06 1.06L8 10.81l-1.22 1.22a.75.75 0 0 1-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 0 1 0-1.06Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+										<span>Are you sure?</span>
+									</div>
+
+									<div class="flex space-x-1.5 items-center">
+										<button
+											class="hover:text-white transition"
+											on:click={() => {
+												deleteChats();
+												showDeleteConfirm = false;
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 20 20"
+												fill="currentColor"
+												class="w-4 h-4"
+											>
+												<path
+													fill-rule="evenodd"
+													d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+													clip-rule="evenodd"
+												/>
+											</svg>
+										</button>
+										<button
+											class="hover:text-white transition"
+											on:click={() => {
+												showDeleteConfirm = false;
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 20 20"
+												fill="currentColor"
+												class="w-4 h-4"
+											>
+												<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>
 								</div>
-								<span>Clear conversations</span>
-							</button>
-						{/if} -->
+							{:else}
+								<button
+									class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
+									on:click={() => {
+										showDeleteConfirm = true;
+									}}
+								>
+									<div class=" self-center mr-3">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path
+												d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z"
+											/>
+											<path
+												fill-rule="evenodd"
+												d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM5.72 7.47a.75.75 0 0 1 1.06 0L8 8.69l1.22-1.22a.75.75 0 1 1 1.06 1.06L9.06 9.75l1.22 1.22a.75.75 0 1 1-1.06 1.06L8 10.81l-1.22 1.22a.75.75 0 0 1-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 0 1 0-1.06Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</div>
+									<div class=" self-center text-sm font-medium">Delete All Chats</div>
+								</button>
+							{/if}
+						</div>
 					</div>
 				{:else if selectedTab === 'auth'}
 					<form

From bf40695eb852caa699642b565a054a5292077057 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 30 Dec 2023 00:24:57 -0800
Subject: [PATCH 5/5] fix: toggle settings shortcut fix

---
 src/lib/components/chat/ShortcutsModal.svelte | 2 +-
 src/routes/(app)/+layout.svelte               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/ShortcutsModal.svelte b/src/lib/components/chat/ShortcutsModal.svelte
index 2e0b66f7..2b643b2a 100644
--- a/src/lib/components/chat/ShortcutsModal.svelte
+++ b/src/lib/components/chat/ShortcutsModal.svelte
@@ -135,7 +135,7 @@
 							<div
 								class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
 							>
-								S
+								.
 							</div>
 						</div>
 					</div>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index e6d296f2..222a7d84 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -160,8 +160,8 @@
 					document.getElementById('delete-chat-button')?.click();
 				}
 
-				// Check if Ctrl + S is pressed
-				if (isCtrlPressed && event.key.toLowerCase() === 's') {
+				// Check if Ctrl + . is pressed
+				if (isCtrlPressed && event.key === '.') {
 					event.preventDefault();
 					console.log('openSettings');
 					document.getElementById('open-settings-button')?.click();